/* sections/starter-hero.bit */ #section-starter-hero .hero{ position: relative; min-height: var(--hero-min-height, 480px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--scheme-background, transparent); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-hero .hero--full{ min-height: 100svh; } #section-starter-hero .hero__bg{ position: absolute; inset: 0; background-size: cover; background-position: center; } #section-starter-hero .hero__bg-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #section-starter-hero .hero__bg--mobile{ display: none; } @media (max-width: 640px){#section-starter-hero .hero:has(.hero__bg--mobile) .hero__bg--desktop{ display: none; } #section-starter-hero .hero__bg--mobile{ display: block; }} #section-starter-hero .hero__overlay{ position: absolute; inset: 0; } #section-starter-hero .hero__content{ position: relative; z-index: 1; max-width: 640px; padding: 2rem; } #section-starter-hero .hero__heading{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin: 0 0 1rem; color: var(--hero-text-color, #fff); } #section-starter-hero .hero__sub{ font-size: clamp(1rem, 2vw, 1.25rem); margin: 0 0 1.5rem; color: var(--hero-text-color, #fff); } #section-starter-hero .hero__btn{ display: inline-block; padding: .85rem 2rem; background: var(--scheme-button, #fff); color: var(--scheme-button-label, #111); font-weight: 600; text-decoration: none; border-radius: 999px; transition: transform .2s ease; margin: 0 .4rem .4rem 0; } #section-starter-hero .hero__btn:hover{ transform: scale(1.04); } #section-starter-hero .hero__scroll-btn{ position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: transparent; border: none; color: var(--hero-text-color, #fff); cursor: pointer; animation: hero-scroll-bounce 1.6s ease-in-out infinite; } @keyframes hero-scroll-bounce{ 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* sections/starter-products.bit */ #section-starter-products .crsl__wrap{ position: relative; } #section-starter-products .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-products .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-products .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-products .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-products .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-products .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-products .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-products .crsl__arrow--prev{ left: -14px; } #section-starter-products .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-products .crsl__arrow{ display: none; }} #section-starter-products .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-products .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-products .crsl__dot--visible{ display: inline-block; } #section-starter-products .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-products .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-products .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-products .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-products .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-products .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-products .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-products .crsl__thumb img, #section-starter-products .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-products .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-products .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-products .crsl__hint[hidden]{ display: none; } #section-starter-products .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-products .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-products .pcard{ display: flex; flex-direction: column; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); border: 1px solid #e0e0e0; overflow: hidden; background: transparent; transition: background-color .2s ease; } #section-starter-products .pcard:hover{ background-color: rgba(0,0,0,.015); } #section-starter-products .pcard__img-wrap{ position: relative; display: block; aspect-ratio: var(--pcard-aspect, 5/7); overflow: hidden; background: #f9f9f9; } #section-starter-products .pcard__img{ width: 100%; height: 100%; object-fit: cover; } #section-starter-products .pcard__gallery, #section-starter-products .pcard__gallery-track{ width: 100%; height: 100%; } #section-starter-products .pcard__gallery-track{ gap: 0; padding: 0; } #section-starter-products .pcard__gallery-track > .pcard__img{ flex: 0 0 100%; } #section-starter-products .pcard__arrow{ width: 32px; height: 32px; opacity: 0; background: rgba(255,255,255,.15); color: #18181b; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; transition: opacity .2s ease, background-color .2s ease; } #section-starter-products .pcard:hover .pcard__arrow:not(:disabled){ opacity: 1; } #section-starter-products .pcard__arrow:hover{ background: rgba(255,255,255,.3); color: #18181b; } #section-starter-products .pcard__gallery .crsl__arrow--prev{ left: 8px; } #section-starter-products .pcard__gallery .crsl__arrow--next{ right: 8px; } @media (hover: none){#section-starter-products .pcard__arrow{ display: none !important; }} #section-starter-products .pcard__dots{ opacity: 0; transition: opacity .25s ease; } #section-starter-products .pcard:hover .pcard__dots{ opacity: 1; } #section-starter-products .pcard__badge{ position: absolute; bottom: .5rem; right: .5rem; background: #e8e0d6; color: #000; font-size: .56rem; font-weight: 600; padding: .19rem .5rem; letter-spacing: .02em; text-transform: uppercase; } #section-starter-products .pcard__info{ display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .875rem .625rem 1rem; } #section-starter-products .pcard__details{ flex: 1; min-width: 0; } #section-starter-products .pcard__vendor{ font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 0 0 .2rem; font-weight: 500; } #section-starter-products .pcard__name{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .625rem; color: #18181b; text-decoration: none; padding-bottom: .15rem; } @media (min-width: 768px){#section-starter-products .pcard__name{ font-size: .6875rem; }} #section-starter-products .pcard__price{ display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; } #section-starter-products .pcard__now{ font-size: .625rem; font-weight: 500; color: #ef4444; white-space: nowrap; } #section-starter-products .pcard__now--no-sale{ color: #6b7280; } #section-starter-products .pcard__compare{ font-size: .625rem; font-weight: 400; color: #6b7280; text-decoration: line-through; white-space: nowrap; } @media (min-width: 768px){#section-starter-products .pcard__now, #section-starter-products .pcard__compare{ font-size: .6875rem; }} #section-starter-products .pcard__add-wrap{ flex-shrink: 0; margin: 0; } #section-starter-products .pcard__quick-add{ background: transparent; border: none; padding: .1rem 0 0; color: #18181b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .2s ease; } #section-starter-products .pcard__quick-add:hover{ opacity: .6; transform: scale(1.05); } #section-starter-products .pcard__quick-add svg{ width: 18px; height: 18px; } @media (min-width: 768px){#section-starter-products .pcard__quick-add svg{ width: 23px; height: 23px; } #section-starter-products .pcard__info{ padding: 1rem .875rem 1.125rem; }} #section-starter-products .fp{ padding: var(--fp-py, 72px) 1rem; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-products .fp__header{ display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin: 0 auto 2.5rem; max-width: 1280px; } #section-starter-products .fp__header-text{ flex: 1; min-width: 0; } #section-starter-products .fp__title{ font-family: var(--font-heading, 'Geist', sans-serif); letter-spacing: -0.01em; margin: 0; } #section-starter-products .fp__sub{ color: #7a7a7a; margin: .5rem 0 0; font-size: .95rem; } #section-starter-products .fp__view-all{ flex-shrink: 0; font-size: .85rem; font-weight: 500; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9c9c9; transition: text-decoration-color .2s ease; } #section-starter-products .fp__view-all:hover{ text-decoration-color: currentColor; } #section-starter-products .fp__grid{ display: grid; grid-template-columns: repeat(var(--fp-cols-mobile, 2), 1fr); column-gap: var(--fp-gap, 5px); row-gap: var(--fp-gap, 5px); max-width: 1280px; margin: 0 auto; } @media (min-width: 640px){#section-starter-products .fp{ padding: var(--fp-py, 72px) 1.5rem; } #section-starter-products .fp__grid{ grid-template-columns: repeat(2, 1fr); }} @media (min-width: 1024px){#section-starter-products .fp__grid{ grid-template-columns: repeat(var(--fp-cols, 4), 1fr); }} @media (max-width: 639px){#section-starter-products .fp__header{ flex-direction: column; align-items: flex-start; gap: .5rem; }} #section-starter-products .pcard{ border: none; } #section-starter-products .pcard__img--swap-base, #section-starter-products .pcard__img--hover{ display: none; } #section-starter-products .pcard__img-wrap--hover-swap .pcard__gallery{ display: none; } #section-starter-products .pcard__img-wrap--hover-swap .pcard__img--swap-base, #section-starter-products .pcard__img-wrap--hover-swap .pcard__img--hover{ display: block; } #section-starter-products .pcard__img--hover{ position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; } #section-starter-products .pcard__img-wrap--hover-swap:hover .pcard__img--hover{ opacity: 1; } #section-starter-products .qad-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 998; opacity: 0; transition: opacity .3s ease; } #section-starter-products .qad-overlay.qad-open{ opacity: 1; } #section-starter-products .qad-drawer{ position: fixed; z-index: 999; background: #fff; color: #18181b; display: flex; flex-direction: column; padding: 1.5rem; font-family: var(--font-body, 'Geist', sans-serif); box-shadow: 0 -8px 30px rgba(0,0,0,.12); left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1); } #section-starter-products .qad-drawer.qad-open{ transform: translateY(0); } @media (min-width: 768px){#section-starter-products .qad-drawer{ left: auto; top: 0; right: 0; bottom: 0; width: 90vw; max-width: 380px; border-radius: 0; box-shadow: -8px 0 30px rgba(0,0,0,.12); transform: translateX(100%); } #section-starter-products .qad-drawer.qad-open{ transform: translateX(0); }} #section-starter-products .qad-close{ position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border: none; background: transparent; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .15s; } #section-starter-products .qad-close:hover{ background: #f4f4f5; color: #18181b; } #section-starter-products .qad-shimmer-line{ border-radius: 4px; background: #f0f0f0; overflow: hidden; position: relative; } #section-starter-products .qad-shimmer-line--title{ height: 18px; width: 70%; margin: .25rem 0 .75rem; } #section-starter-products .qad-shimmer-line--price{ height: 14px; width: 35%; margin-bottom: 1.5rem; } #section-starter-products .qad-shimmer-pills{ display: flex; gap: .5rem; margin-bottom: 2rem; } #section-starter-products .qad-shimmer-pill{ height: 38px; width: 52px; border-radius: 999px; background: #f0f0f0; } #section-starter-products .qad-shimmer-actions{ display: flex; gap: .75rem; } #section-starter-products .qad-shimmer-btn{ flex: 1; height: 46px; border-radius: 999px; background: #f0f0f0; } #section-starter-products .qad-shimmer-line, #section-starter-products .qad-shimmer-pill, #section-starter-products .qad-shimmer-btn{ background-image: linear-gradient(90deg, #f0f0f0 0%, #e6e6e6 40%, #f0f0f0 80%); background-size: 300px 100%; animation: qad-shimmer 1.4s ease-in-out infinite; } @keyframes qad-shimmer{ 0% { background-position: -150px 0; } 100% { background-position: 250px 0; } } #section-starter-products .qad-title{ font-size: 1rem; font-weight: 500; margin: 1rem 2.5rem .35rem 0; text-transform: uppercase; letter-spacing: .02em; } #section-starter-products .qad-price{ font-size: .95rem; margin-bottom: 1.5rem; display: flex; align-items: baseline; gap: .5rem; } #section-starter-products .qad-price-now{ font-weight: 500; } #section-starter-products .qad-price-compare{ color: #9ca3af; text-decoration: line-through; font-weight: 400; } #section-starter-products .qad-option-group{ margin-bottom: 1.5rem; } #section-starter-products .qad-option-label{ font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin: 0 0 .6rem; } #section-starter-products .qad-pills{ display: flex; flex-wrap: wrap; gap: .5rem; } #section-starter-products .qad-pill{ min-width: 44px; height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid #e0e0e0; background: #fff; color: #18181b; font-size: .8rem; font-family: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } #section-starter-products .qad-pill:hover{ border-color: #18181b; } #section-starter-products .qad-pill--selected{ background: #18181b; color: #fff; border-color: #18181b; } #section-starter-products .qad-pill--disabled{ color: #c4c4c4; text-decoration: line-through; cursor: not-allowed; background: #fafafa; } #section-starter-products .qad-pill--disabled:hover{ border-color: #e0e0e0; } #section-starter-products .qad-error{ color: #ef4444; font-size: .8rem; margin: 0 0 1rem; } #section-starter-products .qad-actions{ display: flex; gap: .75rem; margin-top: auto; padding-top: .5rem; } #section-starter-products .qad-btn{ flex: 1; height: 48px; border-radius: 999px; font-size: .8rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: opacity .15s, transform .15s; font-family: inherit; } #section-starter-products .qad-btn:active{ transform: scale(.98); } #section-starter-products .qad-btn--add{ background: #18181b; color: #fff; border: 1px solid #18181b; } #section-starter-products .qad-btn--add:hover{ opacity: .85; } #section-starter-products .qad-btn--add:disabled{ background: #e5e7eb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; } #section-starter-products .qad-btn--buy{ background: #fff; color: #18181b; border: 1px solid #18181b; } #section-starter-products .qad-btn--buy:hover{ background: #f4f4f5; } /* sections/starter-collections.bit */ #section-starter-collections .cg{ padding: 2.5rem 0.5rem; background: var(--scheme-background, #fdfdfd); color: var(--scheme-text, #000); font-family: var(--font-body, 'Geist', sans-serif); } @media (min-width: 768px){#section-starter-collections .cg{ padding: 2.5rem 1.5rem; }} #section-starter-collections .cg__header{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 0 auto 1.5rem; max-width: 1800px; } #section-starter-collections .cg__header-text{ flex: 1; min-width: 0; } #section-starter-collections .cg__title{ font-family: var(--font-heading, 'Geist', sans-serif); letter-spacing: -0.02em; text-transform: uppercase; margin: 0; } #section-starter-collections .cg__view-all{ flex-shrink: 0; display: inline-block; background: color-mix(in srgb, var(--scheme-text, #000) 8%, transparent); padding: .5rem 1rem; text-decoration: none; color: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; transition: background-color .15s ease; } #section-starter-collections .cg__view-all:hover{ background: color-mix(in srgb, var(--scheme-text, #000) 15%, transparent); } #section-starter-collections .cg__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2px; row-gap: 2px; grid-auto-rows: 220px; max-width: 1800px; margin: 0 auto; } @media (min-width: 768px){#section-starter-collections .cg__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 340px; }} #section-starter-collections .cg__card:nth-child(1){ grid-column: span 2 / span 2; grid-row: span 1 / span 1; } @media (min-width: 768px){#section-starter-collections .cg__card:nth-child(1){ grid-row: span 2 / span 2; }} #section-starter-collections .cg__card:nth-child(4){ grid-column: span 2 / span 2; grid-row: span 1 / span 1; } #section-starter-collections .cg__card:nth-child(5), #section-starter-collections .cg__card:nth-child(6){ grid-column: span 2 / span 2; grid-row: span 1 / span 1; } #section-starter-collections .cg__card{ position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; text-decoration: none; color: inherit; background: #f0f0f0; } @media (min-width: 768px){#section-starter-collections .cg__card{ padding: 24px; }} #section-starter-collections .cg__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.25,1,.5,1); z-index: 0; } #section-starter-collections .cg__img--placeholder{ display: flex; align-items: center; justify-content: center; background: #e5e7eb; } #section-starter-collections .cg__img--placeholder span{ color: #9ca3af; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; } #section-starter-collections .cg__overlay{ position: absolute; inset: 0; background: linear-gradient(to top, var(--cg-overlay, rgba(0,0,0,.6)) 0%, rgba(0,0,0,0) 45%); z-index: 1; opacity: .85; transition: opacity .4s ease; } #section-starter-collections .cg__content{ position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; transform: translateY(6px); transition: transform .4s cubic-bezier(.25,1,.5,1); } #section-starter-collections .cg__card-title{ color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.25; margin: 0; } @media (min-width: 768px){#section-starter-collections .cg__card-title{ font-size: .9rem; }} #section-starter-collections .cg__card-subtitle{ color: rgba(255,255,255,.75); font-size: .72rem; margin: .25rem 0 0; } #section-starter-collections .cg__arrow{ display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: translateX(-8px); transition: all .4s cubic-bezier(.25,1,.5,1); flex-shrink: 0; } #section-starter-collections .cg__card:hover .cg__img{ transform: scale(1.05); } #section-starter-collections .cg__card:hover .cg__overlay{ opacity: 1; } #section-starter-collections .cg__card:hover .cg__content{ transform: translateY(0); } #section-starter-collections .cg__card:hover .cg__arrow{ opacity: 1; transform: translateX(0); } @media (max-width: 639px){#section-starter-collections .cg__header{ flex-direction: column; align-items: flex-start; gap: .75rem; }} /* sections/starter-rich-text.bit */ #section-starter-rich-text .rtb{ display: grid; gap: 2.5rem; align-items: center; max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-rich-text .rtb__image-wrap{ aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius, 8px); background: #f3f4f6; } #section-starter-rich-text .rtb__image{ width: 100%; height: 100%; object-fit: cover; } #section-starter-rich-text .rtb__heading{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 1rem; } #section-starter-rich-text .rtb__body{ line-height: 1.6; margin: 0 0 1.25rem; } #section-starter-rich-text .rtb__btn{ display: inline-block; padding: .75rem 1.75rem; background: var(--scheme-button, #111827); color: var(--scheme-button-label, #fff); text-decoration: none; font-weight: 600; border-radius: 999px; margin: 0 .5rem .5rem 0; } @media (min-width: 768px){#section-starter-rich-text .rtb--left, #section-starter-rich-text .rtb--right{ grid-template-columns: 1fr 1fr; } #section-starter-rich-text .rtb--right .rtb__image-wrap{ order: 2; }} /* sections/starter-product-detail.bit */ #section-starter-product-detail .pd{ display: grid; grid-template-columns: 7fr 3fr; gap: 2.5rem; padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-product-detail .pd:not(:has(.pd__gallery)){ grid-template-columns: 1fr; max-width: 640px; } @media (max-width: 768px){#section-starter-product-detail .pd{ grid-template-columns: 1fr; }} #section-starter-product-detail .pd__buybox{ position: sticky; top: 1.5rem; } @media (max-width: 768px){#section-starter-product-detail .pd__buybox{ position: static; }} #section-starter-product-detail .pd__gallery{ padding: var(--pd-pad-t, 0) var(--pd-pad-r, 0) var(--pd-pad-b, 0) var(--pd-pad-l, 0); } #section-starter-product-detail .pd__gallery--constrained .pd__media{ max-height: calc(100svh - 120px); } #section-starter-product-detail .pd__media{ width: 100%; height: 100%; object-fit: var(--pd-fit, cover); display: block; } #section-starter-product-detail .pd__media-item--hidden{ display: none !important; } #section-starter-product-detail .pd__grid{ display: grid; grid-template-columns: repeat(var(--pd-grid-cols, 2), 1fr); gap: var(--pd-gap, 4px); } #section-starter-product-detail .pd__grid-item{ position: relative; overflow: hidden; border-radius: var(--pd-radius, 0); background: #f3f4f6; } #section-starter-product-detail .pd__grid-item--full{ grid-column: 1 / -1; } #section-starter-product-detail .pd__carousel{ display: none; } #section-starter-product-detail .pd__carousel--desktop{ display: block; } #section-starter-product-detail .pd__carousel-track{ gap: 0; padding: 0; scroll-snap-type: x mandatory; } #section-starter-product-detail .pd__slide{ flex: 0 0 100%; width: 100%; position: relative; overflow: hidden; border-radius: var(--pd-radius, 0); background: #f3f4f6; padding: 0; border: none; display: block; } #section-starter-product-detail .pd__slide--zoomable{ cursor: zoom-in; } #section-starter-product-detail .pd__slide--zoomable:disabled{ cursor: default; } #section-starter-product-detail .pd__carousel .crsl__arrow{ display: flex; } @media (max-width: 768px){#section-starter-product-detail .pd__grid{ display: none !important; } #section-starter-product-detail .pd__carousel{ display: block !important; }} #section-starter-product-detail .pd__thumbs{ padding: 0 var(--pd-pad-r, 0) 0 var(--pd-pad-l, 0); } #section-starter-product-detail .pd:has(.pd__gallery--edge){ max-width: none; } #section-starter-product-detail .pd__zoom-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 2rem; } #section-starter-product-detail .pd__zoom-overlay[hidden]{ display: none; } #section-starter-product-detail .pd__zoom-image{ max-width: 100%; max-height: 100%; object-fit: contain; } #section-starter-product-detail .pd__zoom-close{ position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; cursor: pointer; padding: .5rem; } #section-starter-product-detail .pd__vendor{ font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; margin: 0 0 .375rem; } #section-starter-product-detail .pd__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.25rem, 1.1vw + .9rem, 1.875rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .75rem; } #section-starter-product-detail .pd__price{ display: flex; align-items: baseline; flex-wrap: wrap; gap: .625rem; font-size: .9rem; font-weight: 400; margin: 0 0 1.75rem; } #section-starter-product-detail .pd__now{ color: #ef4444; } #section-starter-product-detail .pd__now--no-sale{ color: var(--scheme-text, #111827); } #section-starter-product-detail .pd__compare{ font-size: .9rem; font-weight: 400; color: #9ca3af; text-decoration: line-through; } #section-starter-product-detail .pd__sku{ font-size: .7rem; letter-spacing: .02em; color: #9ca3af; margin: 0 0 1.5rem; } #section-starter-product-detail .pd__divider{ border: none; border-top: 1px solid #efeeec; margin: 1.75rem 0; } #section-starter-product-detail .pd__option{ margin: 0 0 1.5rem; } #section-starter-product-detail .pd__option-label{ display: block; font-size: .8rem; font-weight: 600; margin-bottom: .625rem; } #section-starter-product-detail .pd__pills{ display: flex; flex-wrap: wrap; gap: .375rem; } #section-starter-product-detail .pd__pill{ display: flex; justify-content: center; align-items: center; width: 18.7%; height: 2.25rem; padding: 0 .5rem; border-radius: 100px; border: 1px solid #DCDCDC; font-size: .6875rem; font-weight: 500; color: #1f1f1f; background: #fff; cursor: pointer; user-select: none; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } #section-starter-product-detail .pd__pill:hover{ border-color: #000; } #section-starter-product-detail .pd__pill--selected{ background: #000; color: #fff; border-color: #DCDCDC; } #section-starter-product-detail .pd__pill--unavailable{ background: #c4c4c4 !important; color: #888 !important; text-decoration: line-through !important; border-color: transparent !important; opacity: 1 !important; cursor: not-allowed; } #section-starter-product-detail .pd__actions{ display: flex; flex-direction: column; align-items: stretch; gap: .75rem; margin: 1.75rem 0; } #section-starter-product-detail .pd__qty{ display: flex; align-items: center; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; flex-shrink: 0; transition: border-color .15s ease; } #section-starter-product-detail .pd__qty:focus-within{ border-color: #9ca3af; } #section-starter-product-detail .pd__qty-btn{ width: 2.75rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--scheme-text, #111827); border-radius: 999px; transition: background-color .15s ease; } #section-starter-product-detail .pd__qty-btn:hover:not(:disabled){ background: #f9fafb; } #section-starter-product-detail .pd__qty-btn:active:not(:disabled){ background: #f3f4f6; } #section-starter-product-detail .pd__qty-input{ width: 2.25rem; height: 3.25rem; border: none; text-align: center; font-size: .9rem; font-weight: 400; background: transparent; color: inherit; -moz-appearance: textfield; } #section-starter-product-detail .pd__buttons{ display: flex; gap: .625rem; width: 100%; } #section-starter-product-detail .pd__add-to-cart, #section-starter-product-detail .pd__buy-now{ min-height: 3.25rem; padding: 0 1.5rem; border-radius: 999px; font-weight: 400; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .1s ease; } #section-starter-product-detail .pd__add-to-cart{ flex: 1; background: #fff; border: 1px solid #d1d5db; color: var(--scheme-text, #111827); } #section-starter-product-detail .pd__add-to-cart:hover:not(:disabled){ background: #f9fafb; border-color: #9ca3af; } #section-starter-product-detail .pd__add-to-cart:active:not(:disabled){ transform: scale(.97); background: #f3f4f6; } #section-starter-product-detail .pd__buy-now{ width: 100%; border: none; color: var(--scheme-button-label, #fff); } #section-starter-product-detail .pd__buy-now:hover:not(:disabled){ filter: brightness(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.18); } #section-starter-product-detail .pd__buy-now:active:not(:disabled){ transform: scale(.97); filter: brightness(1.05); } #section-starter-product-detail .pd__add-to-cart:disabled, #section-starter-product-detail .pd__buy-now:disabled{ opacity: .5; cursor: not-allowed; transform: none; } #section-starter-product-detail .pd__stock-notice{ width: 100%; font-size: .8rem; font-weight: 600; color: #b45309; margin: 0; } #section-starter-product-detail .pd__description{ font-size: .9rem; line-height: 1.65; color: #4b5563; margin: 1.5rem 0 0; } #section-starter-product-detail .pd__faq{ margin-top: 0; border-top: 1px solid #e5e7eb; padding: .875rem 0; } #section-starter-product-detail .pd__faq summary{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 600; font-size: .875rem; list-style: none; } #section-starter-product-detail .pd__faq summary::-webkit-details-marker{ display: none; } #section-starter-product-detail .pd__faq-icon{ flex-shrink: 0; color: #9ca3af; transition: transform .2s ease; } #section-starter-product-detail .pd__faq[open] .pd__faq-icon{ transform: rotate(180deg); } #section-starter-product-detail .pd__faq p{ margin: .625rem 0 0; font-size: .875rem; line-height: 1.6; color: #4b5563; } #section-starter-product-detail .crsl__wrap{ position: relative; } #section-starter-product-detail .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-product-detail .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-product-detail .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-product-detail .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-product-detail .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-product-detail .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-product-detail .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-product-detail .crsl__arrow--prev{ left: -14px; } #section-starter-product-detail .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-product-detail .crsl__arrow{ display: none; }} #section-starter-product-detail .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-product-detail .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-product-detail .crsl__dot--visible{ display: inline-block; } #section-starter-product-detail .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-product-detail .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-product-detail .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-product-detail .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-product-detail .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-product-detail .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-product-detail .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-product-detail .crsl__thumb img, #section-starter-product-detail .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-product-detail .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-product-detail .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-product-detail .crsl__hint[hidden]{ display: none; } #section-starter-product-detail .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-product-detail .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-product-detail .btn-spinner{ display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: btn-spinner-spin .6s linear infinite; flex-shrink: 0; } #section-starter-product-detail .btn-spinner[hidden]{ display: none; } @keyframes btn-spinner-spin{ to { transform: rotate(360deg); } } /* sections/starter-recommended-products.bit */ #section-starter-recommended-products .crsl__wrap{ position: relative; } #section-starter-recommended-products .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-recommended-products .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-recommended-products .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-recommended-products .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-recommended-products .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-recommended-products .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-recommended-products .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-recommended-products .crsl__arrow--prev{ left: -14px; } #section-starter-recommended-products .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-recommended-products .crsl__arrow{ display: none; }} #section-starter-recommended-products .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-recommended-products .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-recommended-products .crsl__dot--visible{ display: inline-block; } #section-starter-recommended-products .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-recommended-products .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-recommended-products .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-recommended-products .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-recommended-products .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-recommended-products .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-recommended-products .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-recommended-products .crsl__thumb img, #section-starter-recommended-products .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-recommended-products .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-recommended-products .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-recommended-products .crsl__hint[hidden]{ display: none; } #section-starter-recommended-products .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-recommended-products .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-recommended-products .pcard{ display: flex; flex-direction: column; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); border: 1px solid #e0e0e0; overflow: hidden; background: transparent; transition: background-color .2s ease; } #section-starter-recommended-products .pcard:hover{ background-color: rgba(0,0,0,.015); } #section-starter-recommended-products .pcard__img-wrap{ position: relative; display: block; aspect-ratio: var(--pcard-aspect, 5/7); overflow: hidden; background: #f9f9f9; } #section-starter-recommended-products .pcard__img{ width: 100%; height: 100%; object-fit: cover; } #section-starter-recommended-products .pcard__gallery, #section-starter-recommended-products .pcard__gallery-track{ width: 100%; height: 100%; } #section-starter-recommended-products .pcard__gallery-track{ gap: 0; padding: 0; } #section-starter-recommended-products .pcard__gallery-track > .pcard__img{ flex: 0 0 100%; } #section-starter-recommended-products .pcard__arrow{ width: 32px; height: 32px; opacity: 0; background: rgba(255,255,255,.15); color: #18181b; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; transition: opacity .2s ease, background-color .2s ease; } #section-starter-recommended-products .pcard:hover .pcard__arrow:not(:disabled){ opacity: 1; } #section-starter-recommended-products .pcard__arrow:hover{ background: rgba(255,255,255,.3); color: #18181b; } #section-starter-recommended-products .pcard__gallery .crsl__arrow--prev{ left: 8px; } #section-starter-recommended-products .pcard__gallery .crsl__arrow--next{ right: 8px; } @media (hover: none){#section-starter-recommended-products .pcard__arrow{ display: none !important; }} #section-starter-recommended-products .pcard__dots{ opacity: 0; transition: opacity .25s ease; } #section-starter-recommended-products .pcard:hover .pcard__dots{ opacity: 1; } #section-starter-recommended-products .pcard__badge{ position: absolute; bottom: .5rem; right: .5rem; background: #e8e0d6; color: #000; font-size: .56rem; font-weight: 600; padding: .19rem .5rem; letter-spacing: .02em; text-transform: uppercase; } #section-starter-recommended-products .pcard__info{ display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .875rem .625rem 1rem; } #section-starter-recommended-products .pcard__details{ flex: 1; min-width: 0; } #section-starter-recommended-products .pcard__vendor{ font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 0 0 .2rem; font-weight: 500; } #section-starter-recommended-products .pcard__name{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .625rem; color: #18181b; text-decoration: none; padding-bottom: .15rem; } @media (min-width: 768px){#section-starter-recommended-products .pcard__name{ font-size: .6875rem; }} #section-starter-recommended-products .pcard__price{ display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; } #section-starter-recommended-products .pcard__now{ font-size: .625rem; font-weight: 500; color: #ef4444; white-space: nowrap; } #section-starter-recommended-products .pcard__now--no-sale{ color: #6b7280; } #section-starter-recommended-products .pcard__compare{ font-size: .625rem; font-weight: 400; color: #6b7280; text-decoration: line-through; white-space: nowrap; } @media (min-width: 768px){#section-starter-recommended-products .pcard__now, #section-starter-recommended-products .pcard__compare{ font-size: .6875rem; }} #section-starter-recommended-products .pcard__add-wrap{ flex-shrink: 0; margin: 0; } #section-starter-recommended-products .pcard__quick-add{ background: transparent; border: none; padding: .1rem 0 0; color: #18181b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .2s ease; } #section-starter-recommended-products .pcard__quick-add:hover{ opacity: .6; transform: scale(1.05); } #section-starter-recommended-products .pcard__quick-add svg{ width: 18px; height: 18px; } @media (min-width: 768px){#section-starter-recommended-products .pcard__quick-add svg{ width: 23px; height: 23px; } #section-starter-recommended-products .pcard__info{ padding: 1rem .875rem 1.125rem; }} #section-starter-recommended-products .rp{ padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-recommended-products .rp__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; margin: 0 0 2rem; } #section-starter-recommended-products .rp__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 768px){#section-starter-recommended-products .rp__grid{ grid-template-columns: repeat(2, 1fr); }} @media (max-width: 480px){#section-starter-recommended-products .rp__grid{ grid-template-columns: 1fr; }} #section-starter-recommended-products .pcard{ border: none; } #section-starter-recommended-products .pcard__img--swap-base, #section-starter-recommended-products .pcard__img--hover{ display: none; } #section-starter-recommended-products .pcard__img-wrap--hover-swap .pcard__gallery{ display: none; } #section-starter-recommended-products .pcard__img-wrap--hover-swap .pcard__img--swap-base, #section-starter-recommended-products .pcard__img-wrap--hover-swap .pcard__img--hover{ display: block; } #section-starter-recommended-products .pcard__img--hover{ position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; } #section-starter-recommended-products .pcard__img-wrap--hover-swap:hover .pcard__img--hover{ opacity: 1; } #section-starter-recommended-products .qad-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 998; opacity: 0; transition: opacity .3s ease; } #section-starter-recommended-products .qad-overlay.qad-open{ opacity: 1; } #section-starter-recommended-products .qad-drawer{ position: fixed; z-index: 999; background: #fff; color: #18181b; display: flex; flex-direction: column; padding: 1.5rem; font-family: var(--font-body, 'Geist', sans-serif); box-shadow: 0 -8px 30px rgba(0,0,0,.12); left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1); } #section-starter-recommended-products .qad-drawer.qad-open{ transform: translateY(0); } @media (min-width: 768px){#section-starter-recommended-products .qad-drawer{ left: auto; top: 0; right: 0; bottom: 0; width: 90vw; max-width: 380px; border-radius: 0; box-shadow: -8px 0 30px rgba(0,0,0,.12); transform: translateX(100%); } #section-starter-recommended-products .qad-drawer.qad-open{ transform: translateX(0); }} #section-starter-recommended-products .qad-close{ position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border: none; background: transparent; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .15s; } #section-starter-recommended-products .qad-close:hover{ background: #f4f4f5; color: #18181b; } #section-starter-recommended-products .qad-shimmer-line{ border-radius: 4px; background: #f0f0f0; overflow: hidden; position: relative; } #section-starter-recommended-products .qad-shimmer-line--title{ height: 18px; width: 70%; margin: .25rem 0 .75rem; } #section-starter-recommended-products .qad-shimmer-line--price{ height: 14px; width: 35%; margin-bottom: 1.5rem; } #section-starter-recommended-products .qad-shimmer-pills{ display: flex; gap: .5rem; margin-bottom: 2rem; } #section-starter-recommended-products .qad-shimmer-pill{ height: 38px; width: 52px; border-radius: 999px; background: #f0f0f0; } #section-starter-recommended-products .qad-shimmer-actions{ display: flex; gap: .75rem; } #section-starter-recommended-products .qad-shimmer-btn{ flex: 1; height: 46px; border-radius: 999px; background: #f0f0f0; } #section-starter-recommended-products .qad-shimmer-line, #section-starter-recommended-products .qad-shimmer-pill, #section-starter-recommended-products .qad-shimmer-btn{ background-image: linear-gradient(90deg, #f0f0f0 0%, #e6e6e6 40%, #f0f0f0 80%); background-size: 300px 100%; animation: qad-shimmer 1.4s ease-in-out infinite; } @keyframes qad-shimmer{ 0% { background-position: -150px 0; } 100% { background-position: 250px 0; } } #section-starter-recommended-products .qad-title{ font-size: 1rem; font-weight: 500; margin: 1rem 2.5rem .35rem 0; text-transform: uppercase; letter-spacing: .02em; } #section-starter-recommended-products .qad-price{ font-size: .95rem; margin-bottom: 1.5rem; display: flex; align-items: baseline; gap: .5rem; } #section-starter-recommended-products .qad-price-now{ font-weight: 500; } #section-starter-recommended-products .qad-price-compare{ color: #9ca3af; text-decoration: line-through; font-weight: 400; } #section-starter-recommended-products .qad-option-group{ margin-bottom: 1.5rem; } #section-starter-recommended-products .qad-option-label{ font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin: 0 0 .6rem; } #section-starter-recommended-products .qad-pills{ display: flex; flex-wrap: wrap; gap: .5rem; } #section-starter-recommended-products .qad-pill{ min-width: 44px; height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid #e0e0e0; background: #fff; color: #18181b; font-size: .8rem; font-family: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } #section-starter-recommended-products .qad-pill:hover{ border-color: #18181b; } #section-starter-recommended-products .qad-pill--selected{ background: #18181b; color: #fff; border-color: #18181b; } #section-starter-recommended-products .qad-pill--disabled{ color: #c4c4c4; text-decoration: line-through; cursor: not-allowed; background: #fafafa; } #section-starter-recommended-products .qad-pill--disabled:hover{ border-color: #e0e0e0; } #section-starter-recommended-products .qad-error{ color: #ef4444; font-size: .8rem; margin: 0 0 1rem; } #section-starter-recommended-products .qad-actions{ display: flex; gap: .75rem; margin-top: auto; padding-top: .5rem; } #section-starter-recommended-products .qad-btn{ flex: 1; height: 48px; border-radius: 999px; font-size: .8rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: opacity .15s, transform .15s; font-family: inherit; } #section-starter-recommended-products .qad-btn:active{ transform: scale(.98); } #section-starter-recommended-products .qad-btn--add{ background: #18181b; color: #fff; border: 1px solid #18181b; } #section-starter-recommended-products .qad-btn--add:hover{ opacity: .85; } #section-starter-recommended-products .qad-btn--add:disabled{ background: #e5e7eb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; } #section-starter-recommended-products .qad-btn--buy{ background: #fff; color: #18181b; border: 1px solid #18181b; } #section-starter-recommended-products .qad-btn--buy:hover{ background: #f4f4f5; } /* sections/starter-collection-products.bit */ #section-starter-collection-products .crsl__wrap{ position: relative; } #section-starter-collection-products .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-collection-products .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-collection-products .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-collection-products .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-collection-products .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-collection-products .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-collection-products .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-collection-products .crsl__arrow--prev{ left: -14px; } #section-starter-collection-products .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-collection-products .crsl__arrow{ display: none; }} #section-starter-collection-products .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-collection-products .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-collection-products .crsl__dot--visible{ display: inline-block; } #section-starter-collection-products .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-collection-products .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-collection-products .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-collection-products .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-collection-products .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-collection-products .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-collection-products .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-collection-products .crsl__thumb img, #section-starter-collection-products .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-collection-products .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-collection-products .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-collection-products .crsl__hint[hidden]{ display: none; } #section-starter-collection-products .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-collection-products .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-collection-products .pcard{ display: flex; flex-direction: column; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); border: 1px solid #e0e0e0; overflow: hidden; background: transparent; transition: background-color .2s ease; } #section-starter-collection-products .pcard:hover{ background-color: rgba(0,0,0,.015); } #section-starter-collection-products .pcard__img-wrap{ position: relative; display: block; aspect-ratio: var(--pcard-aspect, 5/7); overflow: hidden; background: #f9f9f9; } #section-starter-collection-products .pcard__img{ width: 100%; height: 100%; object-fit: cover; } #section-starter-collection-products .pcard__gallery, #section-starter-collection-products .pcard__gallery-track{ width: 100%; height: 100%; } #section-starter-collection-products .pcard__gallery-track{ gap: 0; padding: 0; } #section-starter-collection-products .pcard__gallery-track > .pcard__img{ flex: 0 0 100%; } #section-starter-collection-products .pcard__arrow{ width: 32px; height: 32px; opacity: 0; background: rgba(255,255,255,.15); color: #18181b; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; transition: opacity .2s ease, background-color .2s ease; } #section-starter-collection-products .pcard:hover .pcard__arrow:not(:disabled){ opacity: 1; } #section-starter-collection-products .pcard__arrow:hover{ background: rgba(255,255,255,.3); color: #18181b; } #section-starter-collection-products .pcard__gallery .crsl__arrow--prev{ left: 8px; } #section-starter-collection-products .pcard__gallery .crsl__arrow--next{ right: 8px; } @media (hover: none){#section-starter-collection-products .pcard__arrow{ display: none !important; }} #section-starter-collection-products .pcard__dots{ opacity: 0; transition: opacity .25s ease; } #section-starter-collection-products .pcard:hover .pcard__dots{ opacity: 1; } #section-starter-collection-products .pcard__badge{ position: absolute; bottom: .5rem; right: .5rem; background: #e8e0d6; color: #000; font-size: .56rem; font-weight: 600; padding: .19rem .5rem; letter-spacing: .02em; text-transform: uppercase; } #section-starter-collection-products .pcard__info{ display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .875rem .625rem 1rem; } #section-starter-collection-products .pcard__details{ flex: 1; min-width: 0; } #section-starter-collection-products .pcard__vendor{ font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 0 0 .2rem; font-weight: 500; } #section-starter-collection-products .pcard__name{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .625rem; color: #18181b; text-decoration: none; padding-bottom: .15rem; } @media (min-width: 768px){#section-starter-collection-products .pcard__name{ font-size: .6875rem; }} #section-starter-collection-products .pcard__price{ display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; } #section-starter-collection-products .pcard__now{ font-size: .625rem; font-weight: 500; color: #ef4444; white-space: nowrap; } #section-starter-collection-products .pcard__now--no-sale{ color: #6b7280; } #section-starter-collection-products .pcard__compare{ font-size: .625rem; font-weight: 400; color: #6b7280; text-decoration: line-through; white-space: nowrap; } @media (min-width: 768px){#section-starter-collection-products .pcard__now, #section-starter-collection-products .pcard__compare{ font-size: .6875rem; }} #section-starter-collection-products .pcard__add-wrap{ flex-shrink: 0; margin: 0; } #section-starter-collection-products .pcard__quick-add{ background: transparent; border: none; padding: .1rem 0 0; color: #18181b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .2s ease; } #section-starter-collection-products .pcard__quick-add:hover{ opacity: .6; transform: scale(1.05); } #section-starter-collection-products .pcard__quick-add svg{ width: 18px; height: 18px; } @media (min-width: 768px){#section-starter-collection-products .pcard__quick-add svg{ width: 23px; height: 23px; } #section-starter-collection-products .pcard__info{ padding: 1rem .875rem 1.125rem; }} #section-starter-collection-products .cp{ padding: 3rem 1.5rem; max-width: 1400px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-collection-products .cp__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 .5rem; } #section-starter-collection-products .cp__description{ color: #6b7280; max-width: 640px; margin: 0 0 2rem; line-height: 1.5; } #section-starter-collection-products .cp__toolbar{ display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.25rem; } #section-starter-collection-products .cp__filter-toggle{ display: none; align-items: center; gap: .4rem; padding: .55rem 1rem; border: 1px solid #e5e7eb; border-radius: 999px; background: none; color: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; font-family: inherit; } #section-starter-collection-products .cp__count{ flex: 1; margin: 0; font-size: .82rem; color: #9ca3af; } #section-starter-collection-products .cp__sort{ padding: .55rem 2rem .55rem .9rem; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; } #section-starter-collection-products .cp__active-filters{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } #section-starter-collection-products .cp__active-filters:empty{ display: none; margin: 0; } #section-starter-collection-products .cp__active-chip{ display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 999px; background: #f3f4f6; color: inherit; font-size: .78rem; font-weight: 500; text-decoration: none; } #section-starter-collection-products .cp__active-chip:hover{ background: #e5e7eb; } #section-starter-collection-products .cp__active-chip svg{ flex-shrink: 0; color: #9ca3af; } #section-starter-collection-products .cp__layout{ display: flex; align-items: flex-start; gap: 2.5rem; } #section-starter-collection-products .cp__filters{ width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.5rem; } #section-starter-collection-products .cp__filter-group{ display: flex; flex-direction: column; gap: .6rem; } #section-starter-collection-products .cp__filter-label{ font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin: 0; } #section-starter-collection-products .cp__filter-values{ display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; } #section-starter-collection-products .cp__filter-chip{ display: inline-flex; align-items: center; gap: .35rem; padding: .3rem 0; background: none; border: none; color: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; } #section-starter-collection-products .cp__filter-chip:hover{ opacity: .65; } #section-starter-collection-products .cp__filter-chip--active{ font-weight: 700; } #section-starter-collection-products .cp__filter-chip--active::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } #section-starter-collection-products .cp__filter-count{ color: #9ca3af; font-size: .78rem; } #section-starter-collection-products .cp__filter-price{ display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } #section-starter-collection-products .cp__filter-price-input{ width: 64px; padding: .4rem .5rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: .8rem; color: inherit; background: #fff; font-family: inherit; } #section-starter-collection-products .cp__filter-price-sep{ color: #9ca3af; } #section-starter-collection-products .cp__filter-price-apply{ padding: .4rem .7rem; border-radius: 6px; border: 1px solid currentColor; background: none; color: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; font-family: inherit; } #section-starter-collection-products .cp__filter-clear{ font-size: .78rem; color: #9ca3af; text-decoration: underline; flex-basis: 100%; } #section-starter-collection-products .cp__main{ flex: 1; min-width: 0; } #section-starter-collection-products .cp__grid{ display: grid; grid-template-columns: repeat(var(--cp-cols, 4), 1fr); gap: 2rem 1.5rem; } @media (max-width: 1024px){#section-starter-collection-products .cp__grid{ grid-template-columns: repeat(3, 1fr); }} @media (max-width: 768px){#section-starter-collection-products .cp__grid{ grid-template-columns: repeat(2, 1fr); }} @media (max-width: 480px){#section-starter-collection-products .cp__grid{ grid-template-columns: 1fr; }} #section-starter-collection-products .cp__load-more-wrap{ position: relative; display: flex; justify-content: center; margin-top: 2rem; } #section-starter-collection-products .cp__sentinel{ position: absolute; top: 0; width: 1px; height: 1px; } #section-starter-collection-products .cp__load-more{ padding: .8rem 2rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: var(--scheme-text, #111827); font-weight: 600; cursor: pointer; font-family: inherit; } #section-starter-collection-products .cp__load-more:hover{ background: var(--scheme-text, #111827); color: var(--scheme-background, #fff); } @media (max-width: 900px){#section-starter-collection-products .cp__filter-toggle{ display: inline-flex; } #section-starter-collection-products .cp__layout{ flex-direction: column; gap: 1.25rem; } #section-starter-collection-products .cp__filters{ display: none; width: 100%; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 12px; } #section-starter-collection-products .cp__filters--open{ display: flex; }} #section-starter-collection-products .pcard{ border: none; } #section-starter-collection-products .pcard__img--swap-base, #section-starter-collection-products .pcard__img--hover{ display: none; } #section-starter-collection-products .pcard__img-wrap--hover-swap .pcard__gallery{ display: none; } #section-starter-collection-products .pcard__img-wrap--hover-swap .pcard__img--swap-base, #section-starter-collection-products .pcard__img-wrap--hover-swap .pcard__img--hover{ display: block; } #section-starter-collection-products .pcard__img--hover{ position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; } #section-starter-collection-products .pcard__img-wrap--hover-swap:hover .pcard__img--hover{ opacity: 1; } #section-starter-collection-products .crsl__wrap{ position: relative; } #section-starter-collection-products .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-collection-products .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-collection-products .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-collection-products .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-collection-products .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-collection-products .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-collection-products .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-collection-products .crsl__arrow--prev{ left: -14px; } #section-starter-collection-products .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-collection-products .crsl__arrow{ display: none; }} #section-starter-collection-products .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-collection-products .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-collection-products .crsl__dot--visible{ display: inline-block; } #section-starter-collection-products .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-collection-products .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-collection-products .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-collection-products .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-collection-products .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-collection-products .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-collection-products .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-collection-products .crsl__thumb img, #section-starter-collection-products .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-collection-products .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-collection-products .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-collection-products .crsl__hint[hidden]{ display: none; } #section-starter-collection-products .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-collection-products .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-collection-products .qad-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 998; opacity: 0; transition: opacity .3s ease; } #section-starter-collection-products .qad-overlay.qad-open{ opacity: 1; } #section-starter-collection-products .qad-drawer{ position: fixed; z-index: 999; background: #fff; color: #18181b; display: flex; flex-direction: column; padding: 1.5rem; font-family: var(--font-body, 'Geist', sans-serif); box-shadow: 0 -8px 30px rgba(0,0,0,.12); left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1); } #section-starter-collection-products .qad-drawer.qad-open{ transform: translateY(0); } @media (min-width: 768px){#section-starter-collection-products .qad-drawer{ left: auto; top: 0; right: 0; bottom: 0; width: 90vw; max-width: 380px; border-radius: 0; box-shadow: -8px 0 30px rgba(0,0,0,.12); transform: translateX(100%); } #section-starter-collection-products .qad-drawer.qad-open{ transform: translateX(0); }} #section-starter-collection-products .qad-close{ position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border: none; background: transparent; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .15s; } #section-starter-collection-products .qad-close:hover{ background: #f4f4f5; color: #18181b; } #section-starter-collection-products .qad-shimmer-line{ border-radius: 4px; background: #f0f0f0; overflow: hidden; position: relative; } #section-starter-collection-products .qad-shimmer-line--title{ height: 18px; width: 70%; margin: .25rem 0 .75rem; } #section-starter-collection-products .qad-shimmer-line--price{ height: 14px; width: 35%; margin-bottom: 1.5rem; } #section-starter-collection-products .qad-shimmer-pills{ display: flex; gap: .5rem; margin-bottom: 2rem; } #section-starter-collection-products .qad-shimmer-pill{ height: 38px; width: 52px; border-radius: 999px; background: #f0f0f0; } #section-starter-collection-products .qad-shimmer-actions{ display: flex; gap: .75rem; } #section-starter-collection-products .qad-shimmer-btn{ flex: 1; height: 46px; border-radius: 999px; background: #f0f0f0; } #section-starter-collection-products .qad-shimmer-line, #section-starter-collection-products .qad-shimmer-pill, #section-starter-collection-products .qad-shimmer-btn{ background-image: linear-gradient(90deg, #f0f0f0 0%, #e6e6e6 40%, #f0f0f0 80%); background-size: 300px 100%; animation: qad-shimmer 1.4s ease-in-out infinite; } @keyframes qad-shimmer{ 0% { background-position: -150px 0; } 100% { background-position: 250px 0; } } #section-starter-collection-products .qad-title{ font-size: 1rem; font-weight: 500; margin: 1rem 2.5rem .35rem 0; text-transform: uppercase; letter-spacing: .02em; } #section-starter-collection-products .qad-price{ font-size: .95rem; margin-bottom: 1.5rem; display: flex; align-items: baseline; gap: .5rem; } #section-starter-collection-products .qad-price-now{ font-weight: 500; } #section-starter-collection-products .qad-price-compare{ color: #9ca3af; text-decoration: line-through; font-weight: 400; } #section-starter-collection-products .qad-option-group{ margin-bottom: 1.5rem; } #section-starter-collection-products .qad-option-label{ font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin: 0 0 .6rem; } #section-starter-collection-products .qad-pills{ display: flex; flex-wrap: wrap; gap: .5rem; } #section-starter-collection-products .qad-pill{ min-width: 44px; height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid #e0e0e0; background: #fff; color: #18181b; font-size: .8rem; font-family: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } #section-starter-collection-products .qad-pill:hover{ border-color: #18181b; } #section-starter-collection-products .qad-pill--selected{ background: #18181b; color: #fff; border-color: #18181b; } #section-starter-collection-products .qad-pill--disabled{ color: #c4c4c4; text-decoration: line-through; cursor: not-allowed; background: #fafafa; } #section-starter-collection-products .qad-pill--disabled:hover{ border-color: #e0e0e0; } #section-starter-collection-products .qad-error{ color: #ef4444; font-size: .8rem; margin: 0 0 1rem; } #section-starter-collection-products .qad-actions{ display: flex; gap: .75rem; margin-top: auto; padding-top: .5rem; } #section-starter-collection-products .qad-btn{ flex: 1; height: 48px; border-radius: 999px; font-size: .8rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: opacity .15s, transform .15s; font-family: inherit; } #section-starter-collection-products .qad-btn:active{ transform: scale(.98); } #section-starter-collection-products .qad-btn--add{ background: #18181b; color: #fff; border: 1px solid #18181b; } #section-starter-collection-products .qad-btn--add:hover{ opacity: .85; } #section-starter-collection-products .qad-btn--add:disabled{ background: #e5e7eb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; } #section-starter-collection-products .qad-btn--buy{ background: #fff; color: #18181b; border: 1px solid #18181b; } #section-starter-collection-products .qad-btn--buy:hover{ background: #f4f4f5; } /* sections/starter-all-collections.bit */ #section-starter-all-collections .ccard{ position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; display: block; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-all-collections .ccard__img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); } #section-starter-all-collections .ccard:hover .ccard__img{ transform: scale(1.04); } #section-starter-all-collections .ccard__overlay{ position: absolute; inset: 0; } #section-starter-all-collections .ccard__label{ position: absolute; bottom: 1.25rem; left: 1.25rem; color: #fff; } #section-starter-all-collections .ccard__name{ display: block; font-weight: 500; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; } #section-starter-all-collections .ccard__count{ display: block; font-size: .72rem; opacity: .85; margin-top: .3rem; letter-spacing: .02em; } #section-starter-all-collections .acg{ padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-all-collections .acg__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 2rem; } #section-starter-all-collections .acg__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 768px){#section-starter-all-collections .acg__grid{ grid-template-columns: repeat(2, 1fr); }} @media (max-width: 480px){#section-starter-all-collections .acg__grid{ grid-template-columns: 1fr; }} /* sections/starter-cart-page.bit */ #section-starter-cart-page .cpg{ max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-cart-page .cpg__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 2rem; } #section-starter-cart-page .cpg__empty{ text-align: center; padding: 3rem 0; color: #6b7280; } #section-starter-cart-page .cpg__continue{ display: inline-block; margin-top: 1rem; text-decoration: underline; color: inherit; } #section-starter-cart-page .cpg__continue--under{ text-align: center; margin-top: .75rem; } #section-starter-cart-page .cpg__item{ display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid #e5e7eb; } #section-starter-cart-page .cpg__item-img{ width: 96px; height: 96px; object-fit: cover; border-radius: 6px; background: #f3f4f6; flex-shrink: 0; } #section-starter-cart-page .cpg__item-details{ flex: 1; } #section-starter-cart-page .cpg__item-title{ font-weight: 600; margin-bottom: .25rem; } #section-starter-cart-page .cpg__item-variant{ font-size: .8rem; color: #9ca3af; margin-bottom: .5rem; } #section-starter-cart-page .cpg__item-actions{ display: flex; align-items: center; gap: 1rem; margin-top: .5rem; } #section-starter-cart-page .cpg__qty{ display: flex; align-items: center; gap: .5rem; border: 1px solid #e5e7eb; border-radius: 6px; padding: .2rem .5rem; } #section-starter-cart-page .cpg__qty button{ border: none; background: none; cursor: pointer; font-size: 1rem; padding: .15rem .4rem; } #section-starter-cart-page .cpg__remove{ border: none; background: none; text-decoration: underline; color: #6b7280; cursor: pointer; font-size: .85rem; } #section-starter-cart-page .cpg__item-price{ font-weight: 600; white-space: nowrap; } #section-starter-cart-page .cpg__summary{ margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid #111827; } #section-starter-cart-page .cpg__subtotal-row{ display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; } #section-starter-cart-page .cpg__tax-note{ font-size: .8rem; color: #6b7280; margin: 0 0 1.25rem; } #section-starter-cart-page .cpg__checkout{ display: block; text-align: center; padding: 1rem; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--scheme-button, #111827); color: var(--scheme-button-label, #fff); } /* sections/starter-search-results.bit */ #section-starter-search-results .crsl__wrap{ position: relative; } #section-starter-search-results .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-search-results .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-search-results .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-search-results .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-search-results .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-search-results .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-search-results .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-search-results .crsl__arrow--prev{ left: -14px; } #section-starter-search-results .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-search-results .crsl__arrow{ display: none; }} #section-starter-search-results .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-search-results .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-search-results .crsl__dot--visible{ display: inline-block; } #section-starter-search-results .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-search-results .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-search-results .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-search-results .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-search-results .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-search-results .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-search-results .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-search-results .crsl__thumb img, #section-starter-search-results .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-search-results .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-search-results .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-search-results .crsl__hint[hidden]{ display: none; } #section-starter-search-results .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-search-results .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-search-results .pcard{ display: flex; flex-direction: column; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); border: 1px solid #e0e0e0; overflow: hidden; background: transparent; transition: background-color .2s ease; } #section-starter-search-results .pcard:hover{ background-color: rgba(0,0,0,.015); } #section-starter-search-results .pcard__img-wrap{ position: relative; display: block; aspect-ratio: var(--pcard-aspect, 5/7); overflow: hidden; background: #f9f9f9; } #section-starter-search-results .pcard__img{ width: 100%; height: 100%; object-fit: cover; } #section-starter-search-results .pcard__gallery, #section-starter-search-results .pcard__gallery-track{ width: 100%; height: 100%; } #section-starter-search-results .pcard__gallery-track{ gap: 0; padding: 0; } #section-starter-search-results .pcard__gallery-track > .pcard__img{ flex: 0 0 100%; } #section-starter-search-results .pcard__arrow{ width: 32px; height: 32px; opacity: 0; background: rgba(255,255,255,.15); color: #18181b; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; transition: opacity .2s ease, background-color .2s ease; } #section-starter-search-results .pcard:hover .pcard__arrow:not(:disabled){ opacity: 1; } #section-starter-search-results .pcard__arrow:hover{ background: rgba(255,255,255,.3); color: #18181b; } #section-starter-search-results .pcard__gallery .crsl__arrow--prev{ left: 8px; } #section-starter-search-results .pcard__gallery .crsl__arrow--next{ right: 8px; } @media (hover: none){#section-starter-search-results .pcard__arrow{ display: none !important; }} #section-starter-search-results .pcard__dots{ opacity: 0; transition: opacity .25s ease; } #section-starter-search-results .pcard:hover .pcard__dots{ opacity: 1; } #section-starter-search-results .pcard__badge{ position: absolute; bottom: .5rem; right: .5rem; background: #e8e0d6; color: #000; font-size: .56rem; font-weight: 600; padding: .19rem .5rem; letter-spacing: .02em; text-transform: uppercase; } #section-starter-search-results .pcard__info{ display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .875rem .625rem 1rem; } #section-starter-search-results .pcard__details{ flex: 1; min-width: 0; } #section-starter-search-results .pcard__vendor{ font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 0 0 .2rem; font-weight: 500; } #section-starter-search-results .pcard__name{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .625rem; color: #18181b; text-decoration: none; padding-bottom: .15rem; } @media (min-width: 768px){#section-starter-search-results .pcard__name{ font-size: .6875rem; }} #section-starter-search-results .pcard__price{ display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; } #section-starter-search-results .pcard__now{ font-size: .625rem; font-weight: 500; color: #ef4444; white-space: nowrap; } #section-starter-search-results .pcard__now--no-sale{ color: #6b7280; } #section-starter-search-results .pcard__compare{ font-size: .625rem; font-weight: 400; color: #6b7280; text-decoration: line-through; white-space: nowrap; } @media (min-width: 768px){#section-starter-search-results .pcard__now, #section-starter-search-results .pcard__compare{ font-size: .6875rem; }} #section-starter-search-results .pcard__add-wrap{ flex-shrink: 0; margin: 0; } #section-starter-search-results .pcard__quick-add{ background: transparent; border: none; padding: .1rem 0 0; color: #18181b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .2s ease; } #section-starter-search-results .pcard__quick-add:hover{ opacity: .6; transform: scale(1.05); } #section-starter-search-results .pcard__quick-add svg{ width: 18px; height: 18px; } @media (min-width: 768px){#section-starter-search-results .pcard__quick-add svg{ width: 23px; height: 23px; } #section-starter-search-results .pcard__info{ padding: 1rem .875rem 1.125rem; }} #section-starter-search-results .ccard{ position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; display: block; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-search-results .ccard__img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); } #section-starter-search-results .ccard:hover .ccard__img{ transform: scale(1.04); } #section-starter-search-results .ccard__overlay{ position: absolute; inset: 0; } #section-starter-search-results .ccard__label{ position: absolute; bottom: 1.25rem; left: 1.25rem; color: #fff; } #section-starter-search-results .ccard__name{ display: block; font-weight: 500; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; } #section-starter-search-results .ccard__count{ display: block; font-size: .72rem; opacity: .85; margin-top: .3rem; letter-spacing: .02em; } #section-starter-search-results .sr{ max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem 4rem; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-search-results .sr__bar{ display: flex; align-items: center; gap: .6rem; max-width: 560px; margin: 0 auto 2.5rem; border: 1px solid #e5e7eb; border-radius: 999px; padding: .8rem 1.1rem; background: #f9fafb; transition: border-color .15s, background .15s; } #section-starter-search-results .sr__bar:focus-within{ border-color: #c7c7cc; background: #fff; } #section-starter-search-results .sr__bar > svg:first-child{ flex-shrink: 0; color: #9ca3af; } #section-starter-search-results .sr__bar-input{ flex: 1; min-width: 0; border: none; outline: none; font-size: 1rem; background: transparent; color: inherit; font-family: inherit; } #section-starter-search-results .sr__bar-submit{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: .1rem; cursor: pointer; color: #111; } #section-starter-search-results .sr__prompt{ text-align: center; color: #9ca3af; padding: 3rem 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; } #section-starter-search-results .sr__prompt > svg{ color: #d1d5db; margin-bottom: .5rem; width: 32px; height: 32px; } #section-starter-search-results .sr__prompt-title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: 1.05rem; font-weight: 600; color: var(--scheme-text, #18181b); margin: 0; } #section-starter-search-results .sr__prompt-sub{ font-size: .88rem; color: #9ca3af; margin: 0; } #section-starter-search-results .sr__eyebrow{ text-align: center; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; margin: 0 0 .5rem; } #section-starter-search-results .sr__heading{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.4rem, 3vw, 1.9rem); text-align: center; margin: 0 0 2.25rem; } #section-starter-search-results .sr__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 768px){#section-starter-search-results .sr__grid{ grid-template-columns: repeat(2, 1fr); }} @media (max-width: 480px){#section-starter-search-results .sr__grid{ grid-template-columns: 1fr; }} #section-starter-search-results .sr__page-result{ display: block; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: inherit; } #section-starter-search-results .sr__load-more{ display: block; margin: 2.5rem auto 0; padding: .75rem 2rem; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; font-weight: 600; font-family: inherit; transition: opacity .15s; } #section-starter-search-results .sr__load-more:disabled{ opacity: .5; cursor: default; } #section-starter-search-results .qad-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 998; opacity: 0; transition: opacity .3s ease; } #section-starter-search-results .qad-overlay.qad-open{ opacity: 1; } #section-starter-search-results .qad-drawer{ position: fixed; z-index: 999; background: #fff; color: #18181b; display: flex; flex-direction: column; padding: 1.5rem; font-family: var(--font-body, 'Geist', sans-serif); box-shadow: 0 -8px 30px rgba(0,0,0,.12); left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1); } #section-starter-search-results .qad-drawer.qad-open{ transform: translateY(0); } @media (min-width: 768px){#section-starter-search-results .qad-drawer{ left: auto; top: 0; right: 0; bottom: 0; width: 90vw; max-width: 380px; border-radius: 0; box-shadow: -8px 0 30px rgba(0,0,0,.12); transform: translateX(100%); } #section-starter-search-results .qad-drawer.qad-open{ transform: translateX(0); }} #section-starter-search-results .qad-close{ position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border: none; background: transparent; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .15s; } #section-starter-search-results .qad-close:hover{ background: #f4f4f5; color: #18181b; } #section-starter-search-results .qad-shimmer-line{ border-radius: 4px; background: #f0f0f0; overflow: hidden; position: relative; } #section-starter-search-results .qad-shimmer-line--title{ height: 18px; width: 70%; margin: .25rem 0 .75rem; } #section-starter-search-results .qad-shimmer-line--price{ height: 14px; width: 35%; margin-bottom: 1.5rem; } #section-starter-search-results .qad-shimmer-pills{ display: flex; gap: .5rem; margin-bottom: 2rem; } #section-starter-search-results .qad-shimmer-pill{ height: 38px; width: 52px; border-radius: 999px; background: #f0f0f0; } #section-starter-search-results .qad-shimmer-actions{ display: flex; gap: .75rem; } #section-starter-search-results .qad-shimmer-btn{ flex: 1; height: 46px; border-radius: 999px; background: #f0f0f0; } #section-starter-search-results .qad-shimmer-line, #section-starter-search-results .qad-shimmer-pill, #section-starter-search-results .qad-shimmer-btn{ background-image: linear-gradient(90deg, #f0f0f0 0%, #e6e6e6 40%, #f0f0f0 80%); background-size: 300px 100%; animation: qad-shimmer 1.4s ease-in-out infinite; } @keyframes qad-shimmer{ 0% { background-position: -150px 0; } 100% { background-position: 250px 0; } } #section-starter-search-results .qad-title{ font-size: 1rem; font-weight: 500; margin: 1rem 2.5rem .35rem 0; text-transform: uppercase; letter-spacing: .02em; } #section-starter-search-results .qad-price{ font-size: .95rem; margin-bottom: 1.5rem; display: flex; align-items: baseline; gap: .5rem; } #section-starter-search-results .qad-price-now{ font-weight: 500; } #section-starter-search-results .qad-price-compare{ color: #9ca3af; text-decoration: line-through; font-weight: 400; } #section-starter-search-results .qad-option-group{ margin-bottom: 1.5rem; } #section-starter-search-results .qad-option-label{ font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin: 0 0 .6rem; } #section-starter-search-results .qad-pills{ display: flex; flex-wrap: wrap; gap: .5rem; } #section-starter-search-results .qad-pill{ min-width: 44px; height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid #e0e0e0; background: #fff; color: #18181b; font-size: .8rem; font-family: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } #section-starter-search-results .qad-pill:hover{ border-color: #18181b; } #section-starter-search-results .qad-pill--selected{ background: #18181b; color: #fff; border-color: #18181b; } #section-starter-search-results .qad-pill--disabled{ color: #c4c4c4; text-decoration: line-through; cursor: not-allowed; background: #fafafa; } #section-starter-search-results .qad-pill--disabled:hover{ border-color: #e0e0e0; } #section-starter-search-results .qad-error{ color: #ef4444; font-size: .8rem; margin: 0 0 1rem; } #section-starter-search-results .qad-actions{ display: flex; gap: .75rem; margin-top: auto; padding-top: .5rem; } #section-starter-search-results .qad-btn{ flex: 1; height: 48px; border-radius: 999px; font-size: .8rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: opacity .15s, transform .15s; font-family: inherit; } #section-starter-search-results .qad-btn:active{ transform: scale(.98); } #section-starter-search-results .qad-btn--add{ background: #18181b; color: #fff; border: 1px solid #18181b; } #section-starter-search-results .qad-btn--add:hover{ opacity: .85; } #section-starter-search-results .qad-btn--add:disabled{ background: #e5e7eb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; } #section-starter-search-results .qad-btn--buy{ background: #fff; color: #18181b; border: 1px solid #18181b; } #section-starter-search-results .qad-btn--buy:hover{ background: #f4f4f5; } /* sections/starter-not-found.bit */ #section-starter-not-found .nf{ max-width: 480px; margin: 0 auto; padding: 6rem 1.5rem; text-align: center; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-not-found .nf__heading{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 1rem; } #section-starter-not-found .nf__body{ color: #6b7280; margin: 0 0 1.5rem; line-height: 1.5; } #section-starter-not-found .nf__btn{ display: inline-block; padding: .85rem 2rem; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--scheme-button, #111827); color: var(--scheme-button-label, #fff); } /* sections/starter-password-message.bit */ #section-starter-password-message .pwm{ max-width: 480px; margin: 0 auto; padding: 5rem 1.5rem 1rem; text-align: center; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-password-message .pwm__logo{ max-height: 48px; margin: 0 auto 1.5rem; display: block; } #section-starter-password-message .pwm__heading{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .75rem; } #section-starter-password-message .pwm__body{ color: #6b7280; margin: 0; line-height: 1.5; } /* sections/starter-header.bit */ #section-starter-header .sh{ position: relative; z-index: 100; border-bottom: 1px solid #e5e7eb; background: var(--scheme-background, #fff); color: var(--scheme-text, #111); font-family: var(--font-body, 'Geist', sans-serif); transition: background-color .3s ease, border-color .3s ease; } #section-starter-header .sh--sticky{ position: sticky; top: 0; } #section-starter-header .sh--sticky.sh--blur{ background: color-mix(in srgb, var(--scheme-background, #fff) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #section-starter-header .sh--overlay{ position: fixed; top: 0; left: 0; right: 0; width: 100%; background: transparent; border-bottom-color: transparent; color: #fff; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } #section-starter-header .sh--overlay .sh__cart-count{ background: #fff; color: #111; } #section-starter-header .sh--overlay.sh--scrolled{ background: var(--scheme-background, #fff); color: var(--scheme-text, #111); border-bottom-color: #e5e7eb; } #section-starter-header .sh--overlay.sh--scrolled.sh--blur{ background: color-mix(in srgb, var(--scheme-background, #fff) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #section-starter-header .sh__container{ max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; height: var(--sh-height, 76px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } #section-starter-header .sh__mobile-toggle{ display: none; background: none; border: none; padding: .5rem; margin-left: -.5rem; color: inherit; cursor: pointer; } #section-starter-header .sh__nav-desktop{ flex: 1; } #section-starter-header .sh__nav-list{ display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } #section-starter-header .sh__nav-item{ position: relative; } #section-starter-header .sh__nav-link{ display: inline-flex; align-items: center; gap: .3rem; position: relative; color: inherit; text-decoration: none; font-size: .82rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: .5rem 0; } #section-starter-header .sh__nav-link::after{ content: ''; position: absolute; left: 0; bottom: .1rem; width: 0; height: 1px; background: currentColor; transition: width .25s cubic-bezier(.4,0,.2,1); } #section-starter-header .sh__nav-link:hover::after{ width: 100%; } #section-starter-header .sh__nav-chevron{ transition: transform .2s ease; } #section-starter-header .sh__nav-item:hover .sh__nav-chevron{ transform: rotate(180deg); } #section-starter-header .sh__nav-item:has(.sh__dropdown:empty) .sh__nav-chevron{ display: none; } #section-starter-header .sh__dropdown{ position: absolute; top: 100%; left: 0; margin-top: .6rem; min-width: 190px; background: #fff; color: #111; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: .4rem 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1), visibility .2s ease; z-index: 50; } #section-starter-header .sh__dropdown:empty{ display: none; } #section-starter-header .sh__dropdown::before{ content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } #section-starter-header .sh__nav-item:hover .sh__dropdown:not(:empty){ opacity: 1; visibility: visible; transform: translateY(0); } #section-starter-header .sh__dropdown-link{ display: block; padding: .55rem 1.1rem; font-size: .8rem; color: inherit; text-decoration: none; white-space: nowrap; } #section-starter-header .sh__dropdown-link:hover{ background: rgba(0,0,0,.04); } #section-starter-header .sh__logo{ display: flex; align-items: center; text-decoration: none; color: inherit; font-weight: 700; font-size: 1.1rem; } #section-starter-header .sh__logo img{ display: block; max-height: var(--sh-logo-height, 30px); width: auto; object-fit: contain; } #section-starter-header .sh__utilities{ flex: 1; display: flex; justify-content: flex-end; gap: 1.25rem; } #section-starter-header .sh__util-link{ position: relative; color: inherit; text-decoration: none; display: flex; align-items: center; transition: opacity .15s ease; } #section-starter-header .sh__util-link:hover{ opacity: .65; } #section-starter-header .sh__cart-count{ position: absolute; top: -6px; right: -8px; background: var(--scheme-text, #111); color: var(--scheme-background, #fff); font-size: .65rem; min-width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px){#section-starter-header .sh__container{ height: var(--sh-height-mobile, 60px); } #section-starter-header .sh__logo img{ max-height: var(--sh-logo-height-mobile, 24px); } #section-starter-header .sh__mobile-toggle{ display: flex; align-items: center; justify-content: center; } #section-starter-header .sh__nav-desktop{ display: none; }} #section-starter-header .sh__mnav-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 108; opacity: 0; transition: opacity .3s ease; } #section-starter-header .sh__mnav-overlay--open{ opacity: 1; } #section-starter-header .sh__mnav-overlay[hidden]{ display: none; } #section-starter-header .sh__mnav-panel{ position: fixed; top: 0; left: 0; bottom: 0; width: 88vw; max-width: 380px; background: #fff; color: #111; z-index: 109; display: flex; flex-direction: column; font-family: var(--font-body, 'Geist', sans-serif); transform: translateX(-100%); transition: transform .4s cubic-bezier(.22,1,.36,1); } #section-starter-header .sh__mnav-panel[hidden]{ display: none; } #section-starter-header .sh__mnav-panel--open{ transform: translateX(0); } #section-starter-header .sh__mnav-header{ display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; } #section-starter-header .sh__mnav-logo{ color: inherit; text-decoration: none; font-weight: 700; } #section-starter-header .sh__mnav-logo img{ max-height: 28px; display: block; } #section-starter-header .sh__mnav-close{ background: none; border: none; cursor: pointer; color: inherit; padding: .25rem; display: flex; } #section-starter-header .sh__mnav-body{ flex: 1; overflow-y: auto; padding: 1.5rem; } #section-starter-header .sh__mnav-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; } #section-starter-header .sh__mnav-row{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; } #section-starter-header .sh__mnav-link{ flex: 1; color: inherit; text-decoration: none; font-size: .92rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; } #section-starter-header .sh__mnav-toggle{ display: none; background: none; border: none; padding: .3rem; margin: -.3rem; color: inherit; cursor: pointer; } #section-starter-header .sh__mnav-item:has(.sh__mnav-submenu:not(:empty)) .sh__mnav-toggle{ display: flex; align-items: center; justify-content: center; } #section-starter-header .sh__mnav-toggle svg{ transition: transform .25s ease; } #section-starter-header .sh__mnav-item--expanded .sh__mnav-toggle svg{ transform: rotate(180deg); } #section-starter-header .sh__mnav-submenu{ list-style: none; margin: 0; padding: 0; border-left: 1px solid #e5e7eb; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease; } #section-starter-header .sh__mnav-submenu:empty{ display: none; } #section-starter-header .sh__mnav-item--expanded .sh__mnav-submenu{ max-height: 480px; opacity: 1; margin-top: .8rem; padding-left: 1rem; } #section-starter-header .sh__mnav-sublink{ display: block; padding: .5rem 0; font-size: .82rem; color: rgba(0,0,0,.65); text-decoration: none; } #section-starter-header .sh__mnav-sublink:hover{ color: #111; } #section-starter-header .sh__search-overlay{ position: fixed; inset: 0; background: rgba(17,17,17,.45); z-index: 103; opacity: 0; transition: opacity .3s ease; } #section-starter-header .sh__search-overlay--open{ opacity: 1; } #section-starter-header .sh__search-overlay[hidden]{ display: none; } #section-starter-header .sh__search-panel{ position: fixed; inset: 0; z-index: 104; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 1.25rem 1.25rem; overflow-y: auto; pointer-events: none; } #section-starter-header .sh__search-panel[hidden]{ display: none; } #section-starter-header .sh__search-card{ pointer-events: auto; width: 100%; max-width: 600px; background: #fff; color: #111; border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.2); padding: 1.5rem; font-family: var(--font-body, 'Geist', sans-serif); opacity: 0; transform: translateY(-16px) scale(.98); transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1); } #section-starter-header .sh__search-panel--open .sh__search-card{ opacity: 1; transform: translateY(0) scale(1); } #section-starter-header .sh__search-top{ display: flex; align-items: center; gap: .6rem; } #section-starter-header .sh__search-close{ flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #f3f4f6; border: none; cursor: pointer; color: #6b7280; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } #section-starter-header .sh__search-close:hover{ background: #e5e7eb; color: #111; } #section-starter-header .sh__search-form{ flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; border: 1px solid #e5e7eb; border-radius: 999px; padding: .8rem 1.1rem; background: #f9fafb; transition: border-color .15s, background .15s; } #section-starter-header .sh__search-form:focus-within{ border-color: #c7c7cc; background: #fff; } #section-starter-header .sh__search-form-icon{ flex-shrink: 0; color: #9ca3af; } #section-starter-header .sh__search-input{ flex: 1; min-width: 0; border: none; outline: none; font-size: 1rem; background: transparent; color: inherit; } #section-starter-header .sh__search-results{ margin-top: 1rem; max-height: 55vh; overflow-y: auto; } #section-starter-header .sh__search-results[hidden]{ display: none; } #section-starter-header .sh__search-empty{ color: #9ca3af; text-align: center; padding: 2rem 0 .5rem; margin: 0; } #section-starter-header .sh__search-suggest-label{ font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; margin: 0 0 .5rem; padding: 0 .4rem; } #section-starter-header .sh__search-result{ display: flex; align-items: center; gap: .75rem; padding: .6rem .4rem; margin: 0 -.4rem; border-radius: 10px; text-decoration: none; color: inherit; transition: background .15s; } #section-starter-header .sh__search-result:hover{ background: #f9fafb; } #section-starter-header .sh__search-result img, #section-starter-header .sh__search-result-noimg{ width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: #f3f4f6; flex-shrink: 0; } #section-starter-header .sh__search-result-title{ flex: 1; font-size: .88rem; font-weight: 500; } #section-starter-header .sh__search-result-price{ font-size: .82rem; font-weight: 600; color: #6b7280; } #section-starter-header .sh__search-viewall{ display: block; text-align: center; margin-top: .5rem; padding: .8rem .4rem .2rem; font-size: .82rem; font-weight: 600; color: #111; text-decoration: none; border-top: 1px solid #f3f4f6; } #section-starter-header .sh__search-viewall:hover{ opacity: .65; } #section-starter-header .sh__search-skel-row{ display: flex; align-items: center; gap: .75rem; padding: .6rem .4rem; } #section-starter-header .sh__search-skel-thumb{ width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size: 200% 100%; animation: sh-search-shimmer 1.4s infinite; } #section-starter-header .sh__search-skel-line{ flex: 1; height: 12px; border-radius: 6px; background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size: 200% 100%; animation: sh-search-shimmer 1.4s infinite; } @keyframes sh-search-shimmer{ 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 640px){#section-starter-header .sh__search-panel{ padding: 0; } #section-starter-header .sh__search-card{ max-width: none; min-height: 100dvh; border-radius: 0; padding: 1.25rem 1.25rem 2rem; transform: translateY(-8px); } #section-starter-header .sh__search-panel--open .sh__search-card{ transform: translateY(0); }} #section-starter-header .sh__cart-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; opacity: 0; transition: opacity .3s ease; } #section-starter-header .sh__cart-overlay--open{ opacity: 1; } #section-starter-header .sh__cart-overlay[hidden]{ display: none; } #section-starter-header .sh__cart-drawer{ position: fixed; top: 0; right: 0; bottom: 0; width: 90vw; max-width: 420px; background: #fff; color: #111; z-index: 1001; display: flex; flex-direction: column; font-family: var(--font-body, 'Geist', sans-serif); box-shadow: -8px 0 40px rgba(0,0,0,.12); transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1); } #section-starter-header .sh__cart-drawer--open{ transform: translateX(0); } #section-starter-header .sh__cart-drawer[hidden]{ display: none; } #section-starter-header .cd__header{ display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; } #section-starter-header .cd__header-title-wrap{ display: flex; align-items: center; } #section-starter-header .cd__title{ margin: 0; font-size: 1.05rem; font-weight: 600; } #section-starter-header .cd__count{ font-weight: 400; font-size: .85rem; color: #6b7280; margin-left: .25rem; } #section-starter-header .cd__close{ width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color .15s; } #section-starter-header .cd__close:hover{ background: #f9fafb; color: #111; } #section-starter-header .cd__scroll{ flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.5rem 0; } #section-starter-header .cd__empty{ text-align: center; padding: 3rem 0; color: #6b7280; } #section-starter-header .cd__continue{ display: inline-block; margin-top: .75rem; text-decoration: underline; color: inherit; } #section-starter-header .cd__item{ display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: 'media info price' 'media qty qty'; gap: .5rem 1rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #f3f4f6; } #section-starter-header .cd__item:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; } #section-starter-header .cd__item-media{ grid-area: media; align-self: start; border-radius: 6px; overflow: hidden; background: #f9fafb; } #section-starter-header .cd__item-media img{ width: 64px; height: 64px; object-fit: cover; display: block; } #section-starter-header .cd__item-info{ grid-area: info; min-width: 0; align-self: start; } #section-starter-header .cd__item-title{ font-size: .78rem; font-weight: 500; text-transform: uppercase; color: #111; text-decoration: none; display: block; } #section-starter-header .cd__item-variant{ font-size: .72rem; color: #6b7280; margin-top: .2rem; } #section-starter-header .cd__item-price{ grid-area: price; align-self: start; font-size: .8rem; font-weight: 600; color: #111; text-align: right; white-space: nowrap; } #section-starter-header .cd__item-qty{ grid-area: qty; display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-direction: row-reverse; } #section-starter-header .cd__qty{ display: inline-flex; align-items: center; border: 1px solid #111; border-radius: 6px; height: 30px; overflow: hidden; background: #fff; flex-shrink: 0; } #section-starter-header .cd__qty-btn{ width: 28px; height: 100%; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1rem; line-height: 1; cursor: pointer; color: #111; padding: 0; } #section-starter-header .cd__qty-value{ min-width: 22px; text-align: center; font-size: .8rem; font-weight: 500; } #section-starter-header .cd__item-remove{ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #6b7280; cursor: pointer; padding: 0; transition: color .15s; flex-shrink: 0; } #section-starter-header .cd__item-remove:hover{ color: #ef4444; } #section-starter-header .cd__top-deals{ margin-top: 1.5rem; padding-bottom: 1.5rem; } #section-starter-header .cd__deals-heading{ display: flex; align-items: center; font-size: .8rem; font-weight: 600; color: #111; margin: 0 0 1rem; white-space: nowrap; } #section-starter-header .cd__deals-icon{ margin-right: .4rem; } #section-starter-header .cd__deals-line{ flex-grow: 1; height: 1px; background: #e5e7eb; margin-left: .75rem; } #section-starter-header .cd__deals-scroll{ display: flex; overflow-x: auto; gap: 1rem; padding-bottom: .5rem; scrollbar-width: none; } #section-starter-header .cd__deals-scroll::-webkit-scrollbar{ display: none; } #section-starter-header .cd__deal{ flex: 0 0 120px; display: flex; flex-direction: column; } #section-starter-header .cd__deal-media{ display: block; width: 120px; aspect-ratio: 5/7; background: #f3f4f6; border-radius: 8px; margin-bottom: .5rem; overflow: hidden; } #section-starter-header .cd__deal-media img{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-header .cd__deal-title{ font-size: .68rem; font-weight: 500; color: #111; text-transform: uppercase; line-height: 1.3; text-decoration: none; margin-bottom: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #section-starter-header .cd__deal-prices{ display: flex; align-items: baseline; gap: .25rem; margin-bottom: .6rem; } #section-starter-header .cd__deal-price{ font-size: .72rem; font-weight: 600; color: #111; } #section-starter-header .cd__deal-compare{ font-size: .62rem; color: #9ca3af; text-decoration: line-through; } #section-starter-header .cd__deal-add{ width: 100%; padding: .35rem 0; background: transparent; border: 1px solid #111; border-radius: 6px; font-size: .72rem; font-weight: 500; color: #111; cursor: pointer; transition: background-color .2s, color .2s; } #section-starter-header .cd__deal-add:hover{ background: #111; color: #fff; } #section-starter-header .cd__bill{ padding-top: 1rem; border-top: 1px solid #f3f4f6; } #section-starter-header .cd__bill-title{ font-size: .85rem; font-weight: 600; color: #111; margin: 0 0 1rem; } #section-starter-header .cd__bill-row{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: .8rem; color: #6b7280; } #section-starter-header .cd__bill-label{ display: flex; align-items: center; } #section-starter-header .cd__bill-row--grand{ margin-bottom: 0; padding-top: 1rem; border-top: 1px dashed #e5e7eb; color: #111; } #section-starter-header .cd__bill-row--grand span:first-child{ font-weight: 600; font-size: .85rem; } #section-starter-header .cd__bill-row--grand span:last-child{ font-weight: 700; color: #111; font-size: .95rem; } #section-starter-header .cd__footer{ flex-shrink: 0; padding: 1rem 1.5rem 1.25rem; } #section-starter-header .cd__checkout-bar-wrapper{ background: #f9fafb; border-radius: 12px; padding: 1rem; box-shadow: 0 -4px 12px rgba(0,0,0,.05); } #section-starter-header .cd__checkout-bar{ display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; gap: 1rem; } #section-starter-header .cd__checkout-price{ font-size: 1rem; font-weight: 700; color: #111; } #section-starter-header .cd__checkout-details{ font-size: .68rem; color: #9ca3af; margin-top: .1rem; } #section-starter-header .cd__checkout-btn{ flex-shrink: 0; min-height: 3.25rem; padding: 0 1.5rem; border-radius: 999px; background: #111; color: #fff; text-decoration: none; font-weight: 400; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: filter .18s ease, box-shadow .18s ease, transform .1s ease; } #section-starter-header .cd__checkout-btn:hover{ filter: brightness(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.18); } #section-starter-header .cd__checkout-btn:active{ transform: scale(.97); filter: brightness(1.05); } #section-starter-header .cd__checkout-btn--loading{ opacity: .5; pointer-events: none; cursor: not-allowed; transform: none; } #section-starter-header .cd__secure{ display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .68rem; color: #9ca3af; } #section-starter-header .td-overlay{ opacity: 0; pointer-events: none; transition: opacity .3s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); position: fixed; inset: 0; background-color: rgba(0,0,0,.2); z-index: 1002; } #section-starter-header .td-overlay.active{ opacity: 1; pointer-events: auto; } #section-starter-header .td-drawer{ position: fixed; bottom: 12px; left: 12px; right: 12px; border-radius: 36px; background-color: #eae9e9; background-clip: padding-box; z-index: 1003; padding: 13px; max-height: calc(90vh - 24px); display: flex; flex-direction: column; overflow-y: auto; border: 6px solid rgba(255,255,255,.6); box-shadow: 0 15px 40px rgba(0,0,0,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-body, 'Geist', sans-serif); transform: translateY(120%); transition: transform .4s cubic-bezier(.32,.72,0,1); } #section-starter-header .td-drawer.active{ transform: translateY(0); } @media (min-width: 768px){#section-starter-header .td-drawer{ bottom: 24px; left: auto; right: 24px; width: 440px; padding: 20px; }} #section-starter-header .td-size-pill{ display: inline-flex; justify-content: center; align-items: center; height: 38px; width: calc(20% - 3.2px); padding: 0; border: 1px solid #d1d5db; border-radius: 9999px; font-size: 10.5px; font-weight: 500; color: #374151; background: #fff; cursor: pointer; } #section-starter-header .td-size-pill:hover{ border-color: #000; } #section-starter-header .td-size-pill.selected{ background: #000 !important; color: #fff !important; border-color: #000 !important; font-weight: 600 !important; } #section-starter-header .td-size-pill.disabled{ background: #c4c4c4 !important; color: #888 !important; text-decoration: line-through !important; border-color: transparent !important; opacity: 1 !important; cursor: not-allowed; pointer-events: none; } #section-starter-header .td-product-header{ display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; } #section-starter-header .td-product-image{ width: 80px; aspect-ratio: 5/7; object-fit: cover; border-radius: 8px; background: #f3f4f6; } #section-starter-header .td-product-info{ flex: 1; } #section-starter-header .td-title{ font-size: .9vw; font-weight: 600; color: #111; line-height: 1.2; max-width: 240px; white-space: normal; overflow-wrap: break-word; margin: 0 0 6px; } #section-starter-header .td-price{ font-size: .8vw; font-weight: 500; color: #888; margin: 0; } @media screen and (max-width: 950px){#section-starter-header .td-title{ font-size: 3.5vw; } #section-starter-header .td-price{ font-size: 3vw; }} #section-starter-header .td-variants-wrap{ display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; } #section-starter-header .td-error{ color: #ef4444; font-size: 12px; margin: 0 0 12px; } #section-starter-header .td-add-btn{ width: 100%; height: 48px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; background: #000; color: #fff; border: none; transition: transform .2s ease; } #section-starter-header .td-add-btn:active{ transform: scale(.98); } #section-starter-header .td-add-btn:disabled{ background: #e5e7eb; color: #9ca3af; cursor: not-allowed; } #section-starter-header .td-shimmer-bg{ background: #f6f7f8; background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); background-repeat: no-repeat; background-size: 800px 100%; animation: td-shimmer 1.5s infinite linear; } @keyframes td-shimmer{ 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } } #section-starter-header .btn-spinner{ display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: btn-spinner-spin .6s linear infinite; flex-shrink: 0; } #section-starter-header .btn-spinner[hidden]{ display: none; } @keyframes btn-spinner-spin{ to { transform: rotate(360deg); } } /* sections/starter-footer.bit */ #section-starter-footer .sf{ padding: var(--sf-py-top, 48px) 1.5rem var(--sf-py-bottom, 32px); background: var(--scheme-background, #fafafa); color: var(--scheme-text, #111); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-footer .sf--card{ margin-top: 20px; border-radius: var(--sf-radius, 28px) var(--sf-radius, 28px) 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.06); } @media (max-width: 640px){#section-starter-footer .sf--card{ border-radius: calc(var(--sf-radius, 28px) * 0.4) calc(var(--sf-radius, 28px) * 0.4) 0 0; }} #section-starter-footer .sf__container{ max-width: 1400px; margin: 0 auto; } #section-starter-footer .sf__top{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; margin-bottom: 2.5rem; } #section-starter-footer .sf__brand{ flex-shrink: 0; max-width: 220px; } #section-starter-footer .sf__logo{ max-width: 160px; max-height: 48px; object-fit: contain; display: block; } #section-starter-footer .sf__store-name{ font-size: 1rem; font-weight: 600; margin: 0; } #section-starter-footer .sf__columns{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; flex: 1; } #section-starter-footer .sf__column-heading{ font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 1rem; } #section-starter-footer .sf__links a{ display: block; color: inherit; text-decoration: none; font-size: .875rem; margin-bottom: .6rem; } #section-starter-footer .sf__links a:hover{ opacity: .7; } #section-starter-footer .sf__bottom{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,.08); } #section-starter-footer .sf__social{ display: flex; gap: 1rem; } #section-starter-footer .sf__social-link{ display: flex; align-items: center; justify-content: center; color: inherit; transition: opacity .15s ease; } #section-starter-footer .sf__social-link:hover{ opacity: .65; } #section-starter-footer .sf__switch-form{ display: inline-block; } #section-starter-footer .sf__switch-select{ font-size: .8rem; padding: .3rem .5rem; border: 1px solid #d1d5db; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; } #section-starter-footer .sf__copyright{ font-size: .75rem; color: #9ca3af; margin: 0 0 0 auto; } @media (max-width: 640px){#section-starter-footer .sf__bottom{ flex-direction: column; align-items: flex-start; } #section-starter-footer .sf__copyright{ margin-left: 0; }} /* sections/starter-blog-listing.bit */ #section-starter-blog-listing .bl{ padding: 3rem 1.5rem; max-width: 1000px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-blog-listing .bl__heading{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 2rem; } #section-starter-blog-listing .bl__empty{ color: #9ca3af; } #section-starter-blog-listing .bl__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @media (max-width: 768px){#section-starter-blog-listing .bl__grid{ grid-template-columns: repeat(2, 1fr); }} @media (max-width: 540px){#section-starter-blog-listing .bl__grid{ grid-template-columns: 1fr; }} /* sections/starter-blog-post.bit */ #section-starter-blog-post .bp{ padding: 3rem 1.5rem; max-width: 720px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-blog-post .bp__back{ display: inline-block; margin-bottom: 1.5rem; font-size: .85rem; color: #6b7280; text-decoration: none; } #section-starter-blog-post .bp__back:hover{ text-decoration: underline; } #section-starter-blog-post .bp__cover{ width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius, 8px); margin-bottom: 1.5rem; } #section-starter-blog-post .bp__meta{ display: flex; gap: .75rem; font-size: .8rem; color: #9ca3af; margin-bottom: .5rem; } #section-starter-blog-post .bp__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 2rem; line-height: 1.25; } #section-starter-blog-post .bp__content{ line-height: 1.8; } #section-starter-blog-post .bp__content--plain{ white-space: pre-wrap; } #section-starter-blog-post .bp__content img{ max-width: 100%; border-radius: 8px; } /* sections/starter-announcement-bar.bit */ #section-starter-announcement-bar .ab{ position: relative; display: flex; align-items: center; justify-content: center; padding: .6rem 2.5rem; background: var(--scheme-background, #111827); color: var(--scheme-text, #fff); font-family: var(--font-body, 'Geist', sans-serif); font-size: .8rem; text-align: center; overflow: hidden; } #section-starter-announcement-bar .ab__track{ display: flex; width: 100%; transition: transform .4s ease; } #section-starter-announcement-bar .ab__slide{ flex: 0 0 100%; display: flex; justify-content: center; } #section-starter-announcement-bar .ab__link, #section-starter-announcement-bar .ab__text{ color: inherit; text-decoration: none; } #section-starter-announcement-bar .ab__link:hover{ text-decoration: underline; } #section-starter-announcement-bar .ab__close{ position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: inherit; cursor: pointer; padding: .25rem; opacity: .7; transition: opacity .15s; } #section-starter-announcement-bar .ab__close:hover{ opacity: 1; } /* sections/starter-call-to-action.bit */ #section-starter-call-to-action .cta{ padding: 5rem 1.5rem; text-align: center; background-color: var(--scheme-background, #111827); background-size: cover; background-position: center; color: var(--scheme-text, #fff); position: relative; font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-call-to-action .cta__inner{ position: relative; max-width: 560px; margin: 0 auto; } #section-starter-call-to-action .cta__heading{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 .75rem; } #section-starter-call-to-action .cta__description{ opacity: .85; margin: 0 0 1.5rem; line-height: 1.6; } #section-starter-call-to-action .cta__btn{ display: inline-block; padding: .9rem 2.25rem; border-radius: 999px; background: var(--scheme-button, #fff); color: var(--scheme-button-label, #111827); text-decoration: none; font-weight: 600; transition: transform .15s, opacity .15s; margin: 0 .4rem .4rem; } #section-starter-call-to-action .cta__btn:hover{ transform: translateY(-1px); opacity: .9; } /* sections/starter-testimonials.bit */ #section-starter-testimonials .ts{ padding: 4rem 1.5rem; max-width: 1100px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-testimonials .ts__heading{ text-align: center; font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 2.5rem; } #section-starter-testimonials .ts__empty{ text-align: center; color: #9ca3af; } #section-starter-testimonials .ts__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 900px){#section-starter-testimonials .ts__grid{ grid-template-columns: repeat(2, 1fr); }} @media (max-width: 600px){#section-starter-testimonials .ts__grid{ grid-template-columns: 1fr; }} #section-starter-testimonials .ts__card{ padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: var(--radius, 8px); } #section-starter-testimonials .ts__rating{ font-size: .8rem; font-weight: 700; color: #f59e0b; margin-bottom: .5rem; } #section-starter-testimonials .ts__quote{ line-height: 1.6; margin: 0 0 1.25rem; } #section-starter-testimonials .ts__byline{ display: flex; align-items: center; gap: .75rem; } #section-starter-testimonials .ts__photo{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } #section-starter-testimonials .ts__name{ font-weight: 600; font-size: .9rem; margin: 0; } #section-starter-testimonials .ts__role{ font-size: .8rem; color: #6b7280; margin: 0; } /* sections/starter-faq.bit */ #section-starter-faq .fq{ padding: 4rem 1.5rem; max-width: 720px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-faq .fq__heading{ text-align: center; font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 2rem; } #section-starter-faq .fq__empty{ text-align: center; color: #9ca3af; } #section-starter-faq .fq__list{ display: flex; flex-direction: column; gap: .75rem; } #section-starter-faq .fq__item{ padding: 1rem 0; border-bottom: 1px solid #e5e7eb; } #section-starter-faq .fq__question{ cursor: pointer; font-weight: 600; } #section-starter-faq .fq__answer{ margin: .75rem 0 0; line-height: 1.6; color: #4b5563; white-space: pre-wrap; } /* sections/starter-logo-list.bit */ #section-starter-logo-list .ll{ padding: 3rem 1.5rem; max-width: 1100px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-logo-list .ll__heading{ text-align: center; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; margin: 0 0 2rem; } #section-starter-logo-list .ll__empty{ text-align: center; color: #9ca3af; } #section-starter-logo-list .ll__row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; } #section-starter-logo-list .ll__logo{ display: block; } #section-starter-logo-list .ll__logo img{ height: 32px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; } #section-starter-logo-list .ll__logo:hover img{ filter: grayscale(0); opacity: 1; } /* sections/starter-product-slider.bit */ #section-starter-product-slider .crsl__wrap{ position: relative; } #section-starter-product-slider .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-product-slider .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-product-slider .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-product-slider .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-product-slider .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-product-slider .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-product-slider .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-product-slider .crsl__arrow--prev{ left: -14px; } #section-starter-product-slider .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-product-slider .crsl__arrow{ display: none; }} #section-starter-product-slider .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-product-slider .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-product-slider .crsl__dot--visible{ display: inline-block; } #section-starter-product-slider .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-product-slider .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-product-slider .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-product-slider .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-product-slider .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-product-slider .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-product-slider .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-product-slider .crsl__thumb img, #section-starter-product-slider .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-product-slider .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-product-slider .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-product-slider .crsl__hint[hidden]{ display: none; } #section-starter-product-slider .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-product-slider .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-product-slider .pcard{ display: flex; flex-direction: column; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); border: 1px solid #e0e0e0; overflow: hidden; background: transparent; transition: background-color .2s ease; } #section-starter-product-slider .pcard:hover{ background-color: rgba(0,0,0,.015); } #section-starter-product-slider .pcard__img-wrap{ position: relative; display: block; aspect-ratio: var(--pcard-aspect, 5/7); overflow: hidden; background: #f9f9f9; } #section-starter-product-slider .pcard__img{ width: 100%; height: 100%; object-fit: cover; } #section-starter-product-slider .pcard__gallery, #section-starter-product-slider .pcard__gallery-track{ width: 100%; height: 100%; } #section-starter-product-slider .pcard__gallery-track{ gap: 0; padding: 0; } #section-starter-product-slider .pcard__gallery-track > .pcard__img{ flex: 0 0 100%; } #section-starter-product-slider .pcard__arrow{ width: 32px; height: 32px; opacity: 0; background: rgba(255,255,255,.15); color: #18181b; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; transition: opacity .2s ease, background-color .2s ease; } #section-starter-product-slider .pcard:hover .pcard__arrow:not(:disabled){ opacity: 1; } #section-starter-product-slider .pcard__arrow:hover{ background: rgba(255,255,255,.3); color: #18181b; } #section-starter-product-slider .pcard__gallery .crsl__arrow--prev{ left: 8px; } #section-starter-product-slider .pcard__gallery .crsl__arrow--next{ right: 8px; } @media (hover: none){#section-starter-product-slider .pcard__arrow{ display: none !important; }} #section-starter-product-slider .pcard__dots{ opacity: 0; transition: opacity .25s ease; } #section-starter-product-slider .pcard:hover .pcard__dots{ opacity: 1; } #section-starter-product-slider .pcard__badge{ position: absolute; bottom: .5rem; right: .5rem; background: #e8e0d6; color: #000; font-size: .56rem; font-weight: 600; padding: .19rem .5rem; letter-spacing: .02em; text-transform: uppercase; } #section-starter-product-slider .pcard__info{ display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .875rem .625rem 1rem; } #section-starter-product-slider .pcard__details{ flex: 1; min-width: 0; } #section-starter-product-slider .pcard__vendor{ font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 0 0 .2rem; font-weight: 500; } #section-starter-product-slider .pcard__name{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .625rem; color: #18181b; text-decoration: none; padding-bottom: .15rem; } @media (min-width: 768px){#section-starter-product-slider .pcard__name{ font-size: .6875rem; }} #section-starter-product-slider .pcard__price{ display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; } #section-starter-product-slider .pcard__now{ font-size: .625rem; font-weight: 500; color: #ef4444; white-space: nowrap; } #section-starter-product-slider .pcard__now--no-sale{ color: #6b7280; } #section-starter-product-slider .pcard__compare{ font-size: .625rem; font-weight: 400; color: #6b7280; text-decoration: line-through; white-space: nowrap; } @media (min-width: 768px){#section-starter-product-slider .pcard__now, #section-starter-product-slider .pcard__compare{ font-size: .6875rem; }} #section-starter-product-slider .pcard__add-wrap{ flex-shrink: 0; margin: 0; } #section-starter-product-slider .pcard__quick-add{ background: transparent; border: none; padding: .1rem 0 0; color: #18181b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .2s ease; } #section-starter-product-slider .pcard__quick-add:hover{ opacity: .6; transform: scale(1.05); } #section-starter-product-slider .pcard__quick-add svg{ width: 18px; height: 18px; } @media (min-width: 768px){#section-starter-product-slider .pcard__quick-add svg{ width: 23px; height: 23px; } #section-starter-product-slider .pcard__info{ padding: 1rem .875rem 1.125rem; }} #section-starter-product-slider .ps{ padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-product-slider .ps__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1.5rem; text-align: center; } #section-starter-product-slider .ps__empty{ text-align: center; color: #9ca3af; } #section-starter-product-slider .ps__track > .pcard{ width: 220px; } #section-starter-product-slider .pcard{ border: none; } #section-starter-product-slider .pcard__img--swap-base, #section-starter-product-slider .pcard__img--hover{ display: none; } #section-starter-product-slider .pcard__img-wrap--hover-swap .pcard__gallery{ display: none; } #section-starter-product-slider .pcard__img-wrap--hover-swap .pcard__img--swap-base, #section-starter-product-slider .pcard__img-wrap--hover-swap .pcard__img--hover{ display: block; } #section-starter-product-slider .pcard__img--hover{ position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; } #section-starter-product-slider .pcard__img-wrap--hover-swap:hover .pcard__img--hover{ opacity: 1; } #section-starter-product-slider .crsl__wrap{ position: relative; } #section-starter-product-slider .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-product-slider .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-product-slider .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-product-slider .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-product-slider .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-product-slider .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-product-slider .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-product-slider .crsl__arrow--prev{ left: -14px; } #section-starter-product-slider .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-product-slider .crsl__arrow{ display: none; }} #section-starter-product-slider .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-product-slider .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-product-slider .crsl__dot--visible{ display: inline-block; } #section-starter-product-slider .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-product-slider .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-product-slider .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-product-slider .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-product-slider .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-product-slider .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-product-slider .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-product-slider .crsl__thumb img, #section-starter-product-slider .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-product-slider .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-product-slider .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-product-slider .crsl__hint[hidden]{ display: none; } #section-starter-product-slider .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-product-slider .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } #section-starter-product-slider .qad-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 998; opacity: 0; transition: opacity .3s ease; } #section-starter-product-slider .qad-overlay.qad-open{ opacity: 1; } #section-starter-product-slider .qad-drawer{ position: fixed; z-index: 999; background: #fff; color: #18181b; display: flex; flex-direction: column; padding: 1.5rem; font-family: var(--font-body, 'Geist', sans-serif); box-shadow: 0 -8px 30px rgba(0,0,0,.12); left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1); } #section-starter-product-slider .qad-drawer.qad-open{ transform: translateY(0); } @media (min-width: 768px){#section-starter-product-slider .qad-drawer{ left: auto; top: 0; right: 0; bottom: 0; width: 90vw; max-width: 380px; border-radius: 0; box-shadow: -8px 0 30px rgba(0,0,0,.12); transform: translateX(100%); } #section-starter-product-slider .qad-drawer.qad-open{ transform: translateX(0); }} #section-starter-product-slider .qad-close{ position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border: none; background: transparent; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .15s; } #section-starter-product-slider .qad-close:hover{ background: #f4f4f5; color: #18181b; } #section-starter-product-slider .qad-shimmer-line{ border-radius: 4px; background: #f0f0f0; overflow: hidden; position: relative; } #section-starter-product-slider .qad-shimmer-line--title{ height: 18px; width: 70%; margin: .25rem 0 .75rem; } #section-starter-product-slider .qad-shimmer-line--price{ height: 14px; width: 35%; margin-bottom: 1.5rem; } #section-starter-product-slider .qad-shimmer-pills{ display: flex; gap: .5rem; margin-bottom: 2rem; } #section-starter-product-slider .qad-shimmer-pill{ height: 38px; width: 52px; border-radius: 999px; background: #f0f0f0; } #section-starter-product-slider .qad-shimmer-actions{ display: flex; gap: .75rem; } #section-starter-product-slider .qad-shimmer-btn{ flex: 1; height: 46px; border-radius: 999px; background: #f0f0f0; } #section-starter-product-slider .qad-shimmer-line, #section-starter-product-slider .qad-shimmer-pill, #section-starter-product-slider .qad-shimmer-btn{ background-image: linear-gradient(90deg, #f0f0f0 0%, #e6e6e6 40%, #f0f0f0 80%); background-size: 300px 100%; animation: qad-shimmer 1.4s ease-in-out infinite; } @keyframes qad-shimmer{ 0% { background-position: -150px 0; } 100% { background-position: 250px 0; } } #section-starter-product-slider .qad-title{ font-size: 1rem; font-weight: 500; margin: 1rem 2.5rem .35rem 0; text-transform: uppercase; letter-spacing: .02em; } #section-starter-product-slider .qad-price{ font-size: .95rem; margin-bottom: 1.5rem; display: flex; align-items: baseline; gap: .5rem; } #section-starter-product-slider .qad-price-now{ font-weight: 500; } #section-starter-product-slider .qad-price-compare{ color: #9ca3af; text-decoration: line-through; font-weight: 400; } #section-starter-product-slider .qad-option-group{ margin-bottom: 1.5rem; } #section-starter-product-slider .qad-option-label{ font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin: 0 0 .6rem; } #section-starter-product-slider .qad-pills{ display: flex; flex-wrap: wrap; gap: .5rem; } #section-starter-product-slider .qad-pill{ min-width: 44px; height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid #e0e0e0; background: #fff; color: #18181b; font-size: .8rem; font-family: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } #section-starter-product-slider .qad-pill:hover{ border-color: #18181b; } #section-starter-product-slider .qad-pill--selected{ background: #18181b; color: #fff; border-color: #18181b; } #section-starter-product-slider .qad-pill--disabled{ color: #c4c4c4; text-decoration: line-through; cursor: not-allowed; background: #fafafa; } #section-starter-product-slider .qad-pill--disabled:hover{ border-color: #e0e0e0; } #section-starter-product-slider .qad-error{ color: #ef4444; font-size: .8rem; margin: 0 0 1rem; } #section-starter-product-slider .qad-actions{ display: flex; gap: .75rem; margin-top: auto; padding-top: .5rem; } #section-starter-product-slider .qad-btn{ flex: 1; height: 48px; border-radius: 999px; font-size: .8rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: opacity .15s, transform .15s; font-family: inherit; } #section-starter-product-slider .qad-btn:active{ transform: scale(.98); } #section-starter-product-slider .qad-btn--add{ background: #18181b; color: #fff; border: 1px solid #18181b; } #section-starter-product-slider .qad-btn--add:hover{ opacity: .85; } #section-starter-product-slider .qad-btn--add:disabled{ background: #e5e7eb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; } #section-starter-product-slider .qad-btn--buy{ background: #fff; color: #18181b; border: 1px solid #18181b; } #section-starter-product-slider .qad-btn--buy:hover{ background: #f4f4f5; } /* sections/starter-collection-slider.bit */ #section-starter-collection-slider .ccard{ position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; display: block; min-width: 0; font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-collection-slider .ccard__img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); } #section-starter-collection-slider .ccard:hover .ccard__img{ transform: scale(1.04); } #section-starter-collection-slider .ccard__overlay{ position: absolute; inset: 0; } #section-starter-collection-slider .ccard__label{ position: absolute; bottom: 1.25rem; left: 1.25rem; color: #fff; } #section-starter-collection-slider .ccard__name{ display: block; font-weight: 500; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; } #section-starter-collection-slider .ccard__count{ display: block; font-size: .72rem; opacity: .85; margin-top: .3rem; letter-spacing: .02em; } #section-starter-collection-slider .cs{ padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-collection-slider .cs__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1.5rem; text-align: center; } #section-starter-collection-slider .cs__empty{ text-align: center; color: #9ca3af; } #section-starter-collection-slider .cs__track > .ccard{ width: 260px; } #section-starter-collection-slider .crsl__wrap{ position: relative; } #section-starter-collection-slider .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-collection-slider .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-collection-slider .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-collection-slider .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-collection-slider .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-collection-slider .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-collection-slider .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-collection-slider .crsl__arrow--prev{ left: -14px; } #section-starter-collection-slider .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-collection-slider .crsl__arrow{ display: none; }} #section-starter-collection-slider .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-collection-slider .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-collection-slider .crsl__dot--visible{ display: inline-block; } #section-starter-collection-slider .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-collection-slider .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-collection-slider .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-collection-slider .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-collection-slider .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-collection-slider .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-collection-slider .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-collection-slider .crsl__thumb img, #section-starter-collection-slider .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-collection-slider .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-collection-slider .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-collection-slider .crsl__hint[hidden]{ display: none; } #section-starter-collection-slider .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-collection-slider .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } } /* sections/starter-media-carousel.bit */ #section-starter-media-carousel .mc{ padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; background: var(--scheme-background, transparent); color: var(--scheme-text, inherit); font-family: var(--font-body, 'Geist', sans-serif); } #section-starter-media-carousel .mc__title{ font-family: var(--font-heading, 'Geist', sans-serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1.5rem; text-align: center; } #section-starter-media-carousel .mc__empty{ text-align: center; color: #9ca3af; } #section-starter-media-carousel .mc__slide{ width: 360px; } #section-starter-media-carousel .mc__image{ width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius, 8px); background: #f3f4f6; display: block; } #section-starter-media-carousel .mc__image--empty{ display: block; } #section-starter-media-carousel .mc__caption{ margin: .6rem 0 0; font-size: .9rem; color: #6b7280; } #section-starter-media-carousel .crsl__wrap{ position: relative; } #section-starter-media-carousel .crsl__track{ display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem .75rem; } #section-starter-media-carousel .crsl__track::-webkit-scrollbar{ display: none; } #section-starter-media-carousel .crsl__track > *{ scroll-snap-align: start; flex: 0 0 auto; } #section-starter-media-carousel .crsl__arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; transition: background-color .15s, box-shadow .15s; } #section-starter-media-carousel .crsl__arrow:hover{ background: #111827; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); } #section-starter-media-carousel .crsl__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; } #section-starter-media-carousel .crsl__arrow:disabled:hover{ background: #fff; color: #111827; } #section-starter-media-carousel .crsl__arrow--prev{ left: -14px; } #section-starter-media-carousel .crsl__arrow--next{ right: -14px; } @media (max-width: 640px){#section-starter-media-carousel .crsl__arrow{ display: none; }} #section-starter-media-carousel .crsl__dots{ position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .3rem; align-items: center; z-index: 2; } #section-starter-media-carousel .crsl__dot{ display: none; width: 2.5px; height: 2.5px; border-radius: 50%; border: none; padding: 0; margin: 0; background: #fff; cursor: pointer; } #section-starter-media-carousel .crsl__dot--visible{ display: inline-block; } #section-starter-media-carousel .crsl__dot--medium{ width: 4px; height: 4px; } #section-starter-media-carousel .crsl__dot--active{ width: 5.5px; height: 5.5px; } #section-starter-media-carousel .crsl__counter{ position: absolute; bottom: .75rem; left: .75rem; z-index: 2; display: flex; align-items: center; gap: 2px; padding: .35rem .75rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; } #section-starter-media-carousel .crsl__counter-total{ color: rgba(255,255,255,.55); } #section-starter-media-carousel .crsl__thumbs{ display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } #section-starter-media-carousel .crsl__thumbs::-webkit-scrollbar{ display: none; } #section-starter-media-carousel .crsl__thumb{ flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f3f4f6; } #section-starter-media-carousel .crsl__thumb img, #section-starter-media-carousel .crsl__thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; } #section-starter-media-carousel .crsl__thumb.is-active{ border-color: currentColor; } #section-starter-media-carousel .crsl__hint{ position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; } #section-starter-media-carousel .crsl__hint[hidden]{ display: none; } #section-starter-media-carousel .crsl__hint svg{ opacity: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } #section-starter-media-carousel .crsl__hint--play svg{ animation: crsl-hint-swipe 1.4s ease-in-out; } @keyframes crsl-hint-swipe{ 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 50% { transform: translateX(-22px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }