/* Shared storefront polish. Keep the existing palette and type system. */
:root{color-scheme:dark}
html{scroll-padding-top:88px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--text,#F4F4F5);outline-offset:4px}
:where(button,input,select,textarea){font:inherit}
:where(button,a){-webkit-tap-highlight-color:transparent}
button{min-width:24px;min-height:24px}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px}
button:disabled{cursor:not-allowed}
.tl-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.srch-row,.tln-srch-row{min-height:64px;border-radius:8px;padding-left:8px!important;padding-right:8px!important}
.srch-row[aria-selected=true],.tln-srch-row[aria-selected=true]{background:var(--surf,#121214);box-shadow:inset 3px 0 0 var(--text,#F4F4F5)}
.srch-results,.tln-srch-results{overscroll-behavior:contain;scrollbar-gutter:stable}
.tl-search-recovery{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.tl-search-recovery a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:1px solid var(--line-2,rgba(255,255,255,.22));border-radius:7px;color:var(--text,#F4F4F5);text-decoration:none}
h1,h2{text-wrap:balance}
.tl-loading{width:100%;min-width:0;grid-column:1/-1;padding:16px 0;color:var(--muted,#9A9AA1)}
.tl-loading-label{font-size:.85rem;line-height:1.5;margin:0 0 16px}
.tl-skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tl-skeleton-card{min-width:0}
.tl-skeleton{display:block;background:var(--surf,#121214);position:relative;overflow:hidden;border-radius:4px}
.tl-skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,var(--line,rgba(255,255,255,.09)),transparent);transform:translateX(-100%);animation:tl-shimmer 1.8s ease-in-out infinite}
.tl-skeleton-image{aspect-ratio:4/5;border:1px solid var(--line,rgba(255,255,255,.09));border-radius:10px}
.tl-skeleton-line{height:12px;margin-top:14px;width:80%}
.tl-skeleton-line:last-child{width:45%}
.tl-skeleton-rows{display:grid;gap:16px}
.tl-skeleton-row{border:1px solid var(--line,rgba(255,255,255,.09));border-radius:10px;padding:20px;min-height:92px;background:var(--tile,#101012)}
.tl-load-error{grid-column:1/-1;padding:28px 20px;border:1px solid var(--line-2,rgba(255,255,255,.22));border-radius:10px;background:var(--tile,#101012);color:var(--text,#F4F4F5);line-height:1.6}
.tl-load-error p{margin:0 0 16px}
.tl-load-error button,.tl-load-error a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--line-2,rgba(255,255,255,.22));background:var(--surf,#121214);color:var(--text,#F4F4F5);border-radius:6px;cursor:pointer;text-decoration:none}
.tl-product-loading{min-height:650px}
.tl-product-loading .tl-skeleton-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
.tl-product-loading .tl-skeleton-card:nth-child(2) .tl-skeleton-image{aspect-ratio:auto;height:230px}
.tlsel-opt{min-height:44px}
.has-drop:focus-within>.drop{opacity:1;visibility:visible;pointer-events:auto}
.tl-skip{position:fixed;top:8px;left:8px;z-index:10000;padding:12px 18px;background:var(--text,#F4F4F5);color:var(--bg,#0B0B0C);transform:translateY(-160%)}
.tl-skip:focus{transform:none}
.srch:not(.open),.mob-menu:not(.open),.drawer:not(.open){visibility:hidden}
.hero p{color:var(--text,#F4F4F5);text-shadow:0 1px 8px #0B0B0C}
.pd-thumbs .thumb{cursor:pointer}
.tl-image-failed{object-fit:contain!important;opacity:.65}
@keyframes tl-shimmer{to{transform:translateX(100%)}}
@media(max-width:700px){.tl-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tl-product-loading .tl-skeleton-grid{grid-template-columns:1fr;gap:20px}.tl-product-loading .tl-skeleton-card:first-child .tl-skeleton-image{aspect-ratio:1}.tl-product-loading .tl-skeleton-card:nth-child(2) .tl-skeleton-image{height:90px}.tl-skeleton-row{padding:16px}.icon-btn,.tlsel-btn,.oi-toggle,.ic,.tln-ic,.schip,.chip,.tab{min-height:44px;min-width:44px}.mob-menu,.tln-mobmenu{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}.drop-inner{max-width:calc(100vw - 32px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Off-screen drawers must also leave the keyboard and accessibility tree. */
.drw:not(.open),.tl-drw:not(.open),.tln-mobmenu:not(.open),.tln-srch:not(.open){visibility:hidden}
.pd>*{min-width:0}
.pd-info,.pd-gallery{max-width:100%}
.pd-thumbs{min-width:0}

/* Core storefront design system. Scoped so operational/admin pages keep their dense layouts. */
.tl-home,.tl-product,.tl-collection,.tl-page-checkout{
  --tl-radius:12px;
  --tl-radius-lg:18px;
  --tl-elev:0 18px 55px rgba(0,0,0,.24);
}
.tl-home .hd,.tl-product .hd,.tl-collection .hd{box-shadow:0 12px 40px rgba(0,0,0,.16)}
.tl-home .hero-in{max-width:900px}
.tl-home .hero .sub{max-width:48ch;line-height:1.7}
.tl-home .sec{border-top:1px solid var(--line);padding-block:clamp(58px,7vw,92px)}
.tl-home .sec-h{align-items:center;margin-bottom:30px}
.tl-home .scroller{gap:20px;padding:2px 1px 12px}
.tl-home .tiers{padding:clamp(42px,6vw,72px) max(18px,calc((100vw - var(--maxw))/2 + 34px));background:#0e0e10}
.tl-home .tgrid{gap:18px}
.tl-home .tier{min-height:300px;border:1px solid var(--line)!important;border-radius:var(--tl-radius-lg);background:linear-gradient(145deg,#151518,#0f0f11);overflow:hidden}
.tl-home .tier:hover{border-color:var(--line-2)!important;background:#17171a}
.tl-home .proms{gap:16px;padding:clamp(46px,6vw,72px) max(18px,calc((100vw - var(--maxw))/2 + 34px));border-top:1px solid var(--line)}
.tl-home .prom{padding:30px;border:1px solid var(--line)!important;border-radius:var(--tl-radius);background:var(--tile)}
.tl-home .rev-card{box-shadow:0 12px 36px rgba(0,0,0,.16)}

.tl-product .pd{max-width:1320px;margin-inline:auto;gap:clamp(36px,5vw,72px)}
.tl-product .pd-main{border-radius:var(--tl-radius-lg);background:linear-gradient(145deg,#19191c,#101012);box-shadow:var(--tl-elev)}
.tl-product .pd-tag{border-radius:999px;background:rgba(11,11,12,.74);backdrop-filter:blur(8px)}
.tl-product .thumb{border-radius:10px;overflow:hidden}
.tl-product .pd-info h1{max-width:18ch}
.tl-product .vtoggle{border-radius:var(--tl-radius);overflow:hidden;background:var(--tile)}
.tl-product .vseg.on{box-shadow:inset 0 0 0 1px #fff}
.tl-product .size{border-radius:9px}
.tl-product .perso,.tl-product .patchsec,.tl-product .sleeve-switch{border-radius:var(--tl-radius);background:linear-gradient(145deg,#141417,#101012)}
.tl-product .add{border-radius:10px;min-height:58px;box-shadow:0 12px 32px rgba(255,255,255,.08)}
.tl-product .wish{border-radius:10px}
.tl-product .acc{border:1px solid var(--line);border-radius:var(--tl-radius);overflow:hidden}
.tl-product .acc-item{padding-inline:18px}
.tl-product .acc-item:last-child{border-bottom:0}

.tl-page-checkout{background-color:var(--bg);background-image:radial-gradient(circle at 75% 5%,rgba(255,255,255,.045),transparent 30%)}
.tl-page-checkout .top{background:rgba(11,11,12,.88);backdrop-filter:blur(18px);position:sticky;top:0;z-index:40}
.tl-page-checkout .checkout-progress{max-width:1180px;margin:22px auto 0;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:0;color:var(--muted-2);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tl-page-checkout .checkout-progress span{display:flex;align-items:center;gap:12px}
.tl-page-checkout .checkout-progress span:not(:last-child):after{content:"";width:clamp(34px,7vw,92px);height:1px;background:var(--line-2);margin-right:12px}
.tl-page-checkout .checkout-progress .on{color:var(--text)}
.tl-page-checkout .checkout-progress .on:before{content:"";width:7px;height:7px;border-radius:50%;background:#7CE0A0}
.tl-page-checkout form>.sec{padding:22px;border:1px solid var(--line);border-radius:var(--tl-radius);background:rgba(18,18,20,.72);margin-bottom:16px}
.tl-page-checkout form>.sec .sec-h{color:var(--text);font-family:var(--display);font-size:1rem;letter-spacing:.09em}
.tl-page-checkout .fld input,.tl-page-checkout .fld select,.tl-page-checkout .dial-sel{background:#0e0e10;border-color:var(--line-2);min-height:50px}
.tl-page-checkout .fld input:focus,.tl-page-checkout .fld select:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.tl-page-checkout .sum{border-radius:var(--tl-radius-lg);box-shadow:var(--tl-elev);background:linear-gradient(145deg,#17171a,#111113)}
.tl-page-checkout .s-item .mini{border-radius:8px;overflow:hidden}
.tl-page-checkout .pay-opt{min-height:64px}

@media(max-width:700px){
  .tl-home .sec{padding-block:46px}
  .tl-home .scroller{gap:14px}
  .tl-home .tiers{padding-block:38px}
  .tl-home .tgrid{gap:12px}
  .tl-home .proms{gap:10px;padding-block:38px}
  .tl-home .prom{padding:24px}
  .tl-product .pd-main{border-radius:12px}
  .tl-product .acc-item{padding-inline:15px}
  .tl-page-checkout .checkout-progress{margin-top:18px}
  .tl-page-checkout .wrap{padding-top:28px}
  .tl-page-checkout form>.sec{padding:18px}
  .tl-page-checkout .three{grid-template-columns:1fr}
  .tl-page-checkout .sum{padding:20px}
}
