/* Homepage collections hub: range grid, NEW IN spotlights, the Guest List (gold) and one tabbed range rail. */
#cc-collections-home{--cch-lime:#d8ff23;--cch-gold:#d9b45a;--cch-gold-hi:#f3dc93;box-sizing:border-box;width:100%;min-width:0;max-width:1500px;margin:0 auto;padding:clamp(32px,5vw,72px) clamp(14px,3vw,40px);color:#f7f7f4}
.cch-section{margin:0 0 clamp(72px,10vw,140px)}
.cch-section:last-child{margin-bottom:clamp(24px,4vw,56px)}
.cch-head{margin:0 0 clamp(18px,2.6vw,32px)}
.cch-eyebrow{display:block;color:var(--cch-lime);font:900 11px/1.2 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.cch-title{margin:8px 0 0;font:950 clamp(34px,6vw,76px)/.92 Arial,sans-serif;letter-spacing:-.05em}
.cch-intro{margin:12px 0 0;font:15px/1.5 Arial,sans-serif;color:#c9c9cf;max-width:62ch}

/* Adverts show whole: fixed frame, image contained, blurred copy of itself behind. */
.cch-frame{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0d0d10}
.cch-frame::before{content:'';position:absolute;inset:-24px;background:var(--ad-bg) center/cover no-repeat;filter:blur(20px) brightness(.42)}
.cch-frame img{position:relative;display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s ease}

/* 1. Every range. */
.cch-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:760px){.cch-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(min-width:1180px){.cch-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.cch-tile{display:flex;flex-direction:column;border:1px solid #2d2d33;background:#141418;color:#fff;text-decoration:none;transition:border-color .2s}
.cch-tile:hover,.cch-tile:focus-visible{border-color:var(--cch-lime);outline:none}
.cch-tile:hover img,.cch-tile:focus-visible img{transform:scale(1.03)}
.cch-tile-copy{display:grid;gap:5px;padding:10px 12px 12px}
.cch-tile-copy strong{font:950 clamp(14px,1.8vw,21px)/1.02 Arial,sans-serif;letter-spacing:-.02em}
.cch-tile-copy span{font:900 10px/1.2 Arial,sans-serif;letter-spacing:.08em;color:var(--cch-lime);text-transform:uppercase}
.cch-tile--gold{border-color:var(--cch-gold);background:linear-gradient(160deg,#2a2212,#141418 60%);box-shadow:0 0 0 1px rgba(217,180,90,.35),0 10px 30px rgba(217,180,90,.12)}
.cch-tile--gold .cch-tile-copy strong{color:var(--cch-gold-hi)}
.cch-tile--gold .cch-tile-copy span{color:var(--cch-gold)}
.cch-tile--gold:hover,.cch-tile--gold:focus-visible{border-color:var(--cch-gold-hi)}

/* 2. NEW IN spotlights: advert and copy side by side, alternating. */
.cch-spot{display:grid;gap:18px 32px;align-items:center;margin:0 0 clamp(48px,7vw,96px)}
.cch-spot:last-child{margin-bottom:0}
@media(min-width:900px){
 .cch-spot{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"ad copy" "rail rail"}
 .cch-spot--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);grid-template-areas:"copy ad" "rail rail"}
 .cch-spot>.cch-spot-ad{grid-area:ad}.cch-spot>.cch-spot-copy{grid-area:copy}.cch-spot>.cch-rail{grid-area:rail}
 .cch-spot--flip>.cch-spot-copy{padding-left:clamp(0px,2vw,24px)}
}
.cch-spot-ad,.cch-guest-ad{display:block;border:1px solid #2d2d33;overflow:hidden}
.cch-spot-ad:hover img,.cch-guest-ad:hover img{transform:scale(1.02)}
.cch-spot-copy{display:grid;gap:10px;align-content:center}
.cch-spot-copy h3{margin:0;font:950 clamp(32px,4.6vw,64px)/.9 Arial,sans-serif;letter-spacing:-.05em}
.cch-spot-copy p{margin:0;font:16px/1.5 Arial,sans-serif;color:#d4d4da;max-width:40ch}
.cch-button{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 18px;background:var(--cch-lime);color:#09090b;text-decoration:none;font:900 12px/1 Arial,sans-serif;letter-spacing:.08em}
.cch-button:hover,.cch-button:focus-visible{background:#fff;outline:none}
.cch-button--gold{background:var(--cch-gold);color:#120e05}

/* 3. The Guest List. */
.cch-guest{position:relative;padding:clamp(24px,4vw,48px);border:1px solid var(--cch-gold);background:radial-gradient(120% 80% at 0 0,rgba(217,180,90,.16),transparent 60%),#0f0d09}
.cch-guest .cch-eyebrow{color:var(--cch-gold)}
.cch-guest .cch-title{color:var(--cch-gold-hi)}
.cch-guest-grid{display:grid;gap:clamp(36px,5vw,56px)}
@media(min-width:1000px){.cch-guest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cch-guest-card{display:grid;gap:16px;align-content:start;min-width:0}
.cch-guest-ad{border-color:rgba(217,180,90,.5)}
.cch-guest .cch-spot-copy h3{color:var(--cch-gold-hi);font-size:clamp(28px,3.4vw,46px)}
.cch-guest .cch-spot-copy .cch-eyebrow{color:var(--cch-gold)}
.cch-guest .cch-price{color:var(--cch-gold)}
.cch-guest .cch-more{border-color:var(--cch-gold)}.cch-guest .cch-more strong{color:var(--cch-gold)}
.cch-guest .cch-card{flex-basis:clamp(150px,16vw,210px)}

/* 4. One tabbed rail for every other range. */
.cch-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 14px;overscroll-behavior-x:contain}
.cch-tabs::-webkit-scrollbar{display:none}
.cch-tabs button{flex:none;min-height:40px;padding:0 14px;border:1px solid #48484f;background:transparent;color:#f7f7f4;font:900 11px/1 Arial,sans-serif;letter-spacing:.08em;cursor:pointer}
.cch-tabs button:hover{border-color:var(--cch-lime)}
.cch-tabs button[aria-selected=true]{background:var(--cch-lime);border-color:var(--cch-lime);color:#09090b}
.cch-browse>.cch-button{margin-top:18px}

/* Swipeable product rails. */
.cch-rail{position:relative;min-width:0}
.cch-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding-bottom:4px}
.cch-track::-webkit-scrollbar{display:none}
.cch-track:focus-visible{outline:2px solid var(--cch-lime);outline-offset:4px}
.cch-card{flex:0 0 clamp(150px,19vw,240px);scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;color:#f7f7f4;text-decoration:none;background:#141418;border:1px solid #2d2d33;padding-bottom:10px}
.cch-card:hover{border-color:#6a6a72}
.cch-photo{display:block;aspect-ratio:1/1;background:#101014;overflow:hidden}
.cch-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cch-name{padding:0 10px;font:900 14px/1.15 Arial,sans-serif}
.cch-price{padding:0 10px;color:var(--cch-lime);font:900 14px/1 Arial,sans-serif}
.cch-more{justify-content:center;align-items:center;text-align:center;padding:16px;border-color:var(--cch-lime)}
.cch-more strong{font:950 15px/1.2 Arial,sans-serif;color:var(--cch-lime)}
.cch-arrow{position:absolute;top:calc(50% - 30px);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(9,9,11,.85);color:#fff;font:700 24px/1 Arial,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0}
.cch-prev{left:-8px}.cch-next{right:-8px}
.cch-arrow:disabled{opacity:0;pointer-events:none}
@media(hover:none){.cch-arrow{display:none}}
@media(max-width:600px){.cch-card,.cch-guest .cch-card{flex-basis:44vw}.cch-spot-copy p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.cch-frame img{transition:none}}
/* Keep the complete scene on phones, with copy in the layout so wrapping or
   larger text can grow the banner instead of being clipped above its image. */
@media(max-width:700px){
 html body #after-hours-teaser{display:grid!important;grid-template-columns:minmax(0,1fr)}
 html body #after-hours-teaser .cc-afterhours-banner-image{grid-area:1/1;align-self:center}
 html body #after-hours-teaser .cc-afterhours-banner-image img{height:auto!important;aspect-ratio:1916/821!important;object-fit:contain!important}
 html body #after-hours-teaser .after-hours-live-copy{grid-area:1/1;position:relative!important;inset:auto!important;align-self:center;margin:0 6%!important;padding:24px 0!important;min-width:0}
 html body #after-hours-teaser .after-hours-live-copy h2{font-size:clamp(32px,8vw,56px)!important}
}
.cch-photo-note{margin:18px 0 0;color:#8f8f98;font:12px/1.4 Arial,sans-serif}
/* Seen in the Wild inside the hub, and the solo custom flag spotlight. */
#cc-collections-home>#cc-seen-wild{max-width:none;margin:0 0 clamp(72px,10vw,140px);padding:0}
@media(min-width:900px){.cch-spot--solo{grid-template-areas:"copy ad"}}
/* Full-width advert: the whole image, as big as the page allows, with its copy in a row below. */
@media(min-width:900px){
 .cch-spot--full{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ad ad" "copy copy" "rail rail"}
 .cch-spot--full>.cch-spot-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:end}
 .cch-spot--full>.cch-spot-copy>.cch-eyebrow,.cch-spot--full>.cch-spot-copy>h3,.cch-spot--full>.cch-spot-copy>p{grid-column:1}
 .cch-spot--full>.cch-spot-copy>.cch-button{grid-column:2;grid-row:1/4}
}
.cch-spot--full .cch-frame{aspect-ratio:auto}.cch-spot--full .cch-frame::before{display:none}
.cch-spot--full .cch-frame img{height:auto}
.cch-mixed .cch-card{flex-basis:clamp(150px,17vw,220px)}
/* The last two tiles fill the final row of the four-column grid. */
@media(min-width:1180px){.cch-tiles>.cch-tile:nth-last-child(-n+2){grid-column:span 2}}
/* Shipping banner inside the hub, still running edge to edge. */
main:has(>#cc-collections-home){overflow-x:clip}
#cc-collections-home>#shipping-home-banner{margin:0 calc(50% - 50vw) clamp(72px,10vw,140px)}
/* Bundle advert: full page width (auto margins were shrinking it to its content in the column layout). */
main>.cc-bundle-ad{width:100%;max-width:none;margin:36px 0;box-sizing:border-box}
#cc-collections-home>#shipping-home-banner{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:0;box-sizing:border-box}
/* How cheap are you? */
.cch-levels{display:grid;gap:14px}
@media(min-width:800px){.cch-levels{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.cch-level{display:grid;gap:8px;align-content:start;padding:clamp(18px,2.4vw,28px);border:1px solid #2d2d33;background:#141418}
.cch-level h3{margin:0;font:950 clamp(26px,3vw,40px)/.95 Arial,sans-serif;letter-spacing:-.04em}
.cch-level p{margin:0;color:#d4d4da;font:15px/1.45 Arial,sans-serif}
.cch-level .cch-level-mood{color:#fff;font-weight:900}
.cch-level strong{margin-top:6px;color:var(--cch-lime);font:900 15px/1.3 Arial,sans-serif}
.cch-level--flash{border-color:var(--cch-lime)}.cch-level--boujee{border-color:#ff2fb5}.cch-level--boujee strong{color:#ff2fb5}
.cch-size-note{margin:16px 0 0;color:#c9c9cf;font:14px/1.5 Arial,sans-serif}
/* Bundle advert product cards. */
.cc-bundle-live-products .cch-card{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;background:#111;color:#fff;border:2px solid #111;text-decoration:none;min-width:0}
.cc-bundle-live-products .cch-photo{display:block;aspect-ratio:1/1;overflow:hidden}.cc-bundle-live-products .cch-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cc-bundle-live-products .cch-name,.cc-bundle-live-products .cch-price{padding:0 8px;font:900 13px/1.15 Arial,sans-serif}.cc-bundle-live-products .cch-price{color:#d8ff23}