/* WINKOO site theme v3 (2 Oct 2026). Additive layer that carries the homepage look
   (pieces on complementary colour, colour-wash page heads) across the site.
   Loaded last. Styling only: it changes no behaviour. Remove the <link> to undo. */
html,body{overflow-x:clip}
:root{--t3-out:cubic-bezier(.16,1,.3,1);--t3-spring:cubic-bezier(.34,1.45,.64,1)}

/* ---------- 1. pieces on colour ---------- */
.t3-tile{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(255,255,255,.34),transparent 70%),var(--t3-bg,#93402c)!important;transition:background-color .6s ease}
.t3-tile .t3-src{opacity:0!important}
.t3-cut{position:absolute!important;left:0;right:0;top:auto!important;bottom:10%;margin:0 auto;width:auto!important;height:74%!important;max-width:84%;object-fit:contain!important;object-position:50% 100%;filter:drop-shadow(0 22px 22px rgba(0,0,0,.35));transition:transform .6s var(--t3-spring),opacity .3s;pointer-events:none;border-radius:0!important;aspect-ratio:auto!important;inset-inline:0}
.pc .ph.t3-tile:hover .t3-cut,.card:hover .img.t3-tile .t3-cut{transform:translateY(-8px) scale(1.035)}
.pc.feature .ph .t3-cut{height:80%;bottom:8%}
.buy-media .t3-cut{height:80%;bottom:8%;filter:drop-shadow(0 34px 34px rgba(0,0,0,.38))}
.g-thumbs button.t3-tile .t3-cut,.line-image .t3-cut,.pairing-image .t3-cut,.summary-image .t3-cut{height:80%;bottom:9%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.line-image.t3-tile,.pairing-image.t3-tile,.summary-image.t3-tile{display:block;border:0!important}
.pc .ph.t3-tile .dots i{background:rgba(255,255,255,.45)}
.pc .ph.t3-tile .dots i.on{background:#fff}
.pc .ph.t3-ph .placeholder{background:transparent;color:rgba(255,255,255,.92)}
.pc .ph.t3-ph .placeholder svg{filter:drop-shadow(0 16px 16px rgba(0,0,0,.3))}
.buy-media.t3-tile .badge,.pc .ph.t3-tile .badge{background:rgba(20,16,13,.55);color:#fff}
@media (prefers-reduced-motion:reduce){.t3-cut,.t3-tile{transition:none}}

/* ---------- 2. colour-wash page heads ---------- */
.shop-intro,.page-hero,.page-intro,.trade-hero{--t3-band:#93402c;--t3-deep:rgba(0,0,0,.28);position:relative;isolation:isolate;color:#fbf6ee}
.shop-intro::before,.page-hero::before,.page-intro::before,.trade-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 19% 62% at 80% 46%,rgba(255,255,255,.2),transparent 100%),var(--t3-band);box-shadow:0 0 0 100vmax var(--t3-band);clip-path:inset(0 -100vmax)}
.shop-intro::after,.page-hero::after,.page-intro::after{content:"";position:absolute;z-index:-1;right:clamp(0px,4vw,60px);bottom:clamp(14px,2.4vw,30px);top:clamp(18px,3vw,36px);width:min(30%,300px);background:var(--t3-piece) 50% 100%/contain no-repeat;filter:drop-shadow(0 26px 26px rgba(0,0,0,.36));pointer-events:none}
.shop-intro,.page-hero{padding-block:clamp(44px,6.5vw,92px)!important;margin-bottom:clamp(20px,3vw,36px)}
.shop-intro{grid-template-columns:minmax(0,1fr)!important;padding-right:min(34%,340px)}
.page-hero{padding-right:min(34%,340px)}
.shop-intro h1,.page-hero h1,.page-intro h1,.trade-hero h1{color:#fff}
.shop-intro h1 em,.page-hero h1 em,.trade-hero h1 em{color:#fff!important;opacity:.92}
.shop-intro p,.page-hero p.lede,.page-intro p.lede,.trade-hero p.lede{color:rgba(251,246,238,.88)!important}
.page-hero .eyebrow,.page-intro .eyebrow,.trade-hero .eyebrow{color:rgba(251,246,238,.75)}
.shop-intro .intro-facts{border-top-color:rgba(255,255,255,.3);max-width:520px;margin-top:6px}
.shop-intro .intro-facts b{color:#fff}
.shop-intro .intro-facts span{color:rgba(251,246,238,.78)}
.page-hero .pill.blue,.trade-hero .pill.blue{background:#fbf6ee;color:#2f2a26}
.page-hero .pill.outline,.trade-hero .pill.outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);border-color:rgba(255,255,255,.7)}
.trade-hero{--t3-band:#23305e;padding-block:clamp(36px,5vw,64px)!important;margin-bottom:clamp(16px,2.4vw,28px)}
.trade-hero .aud-tabs a{background:rgba(255,255,255,.14);color:#fff}
.trade-hero img{box-shadow:0 30px 50px -24px rgba(0,0,0,.55)}
/* prose pages (materials, size guide): the intro becomes the band */
.prose-page:has(.page-intro){padding-top:0}
.page-intro{padding:clamp(40px,6vw,80px) min(36%,330px) clamp(36px,5vw,64px) 0;margin-bottom:clamp(28px,4vw,44px)}
.page-intro::after{right:-6%}
.page-intro .text-link{color:#fff}
/* per page colour pairs: the piece and the colour that sets it off */
.shop-intro{--t3-band:#a0621f;--t3-piece:url(/home-assets/home-v3/img/p/orrin-ROBL.webp)}
.page-hero{--t3-band:#1f3a5c;--t3-piece:url(/home-assets/home-v3/img/p/noma-SUTE.webp)}
html:has(link[data-t3="contact"]) .page-hero{--t3-band:#55603a;--t3-piece:url(/home-assets/home-v3/img/p/orrin-MUPU.webp)}
.page-intro{--t3-band:#1d4a40;--t3-piece:url(/home-assets/home-v3/img/p/aro-SUTE.webp)}
html:has(link[data-t3="guide"]) .page-intro{--t3-band:#7a3f2c;--t3-piece:url(/home-assets/home-v3/img/p/noma-MOGR.webp)}
@media (max-width:760px){
  .shop-intro,.page-hero{padding-right:0;padding-bottom:clamp(150px,44vw,210px)!important}
  .page-intro{padding-right:0;padding-bottom:clamp(150px,44vw,210px)}
  .shop-intro::after,.page-hero::after,.page-intro::after{top:auto;height:clamp(120px,36vw,170px);width:46%;right:0;bottom:10px}
  .shop-intro .intro-facts{max-width:none}
  html:has(link[data-t3="contact"]) .page-hero{padding-bottom:clamp(36px,8vw,56px)!important}
  html:has(link[data-t3="contact"]) .page-hero::after{display:none}
}

/* ---------- 3. small colour echoes ---------- */
.hdr .cart{padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;text-decoration:none!important;transition:background-color .25s,color .25s}
.hdr .cart:hover{background:#2f2a26;color:#fbf6ee}
.hdr{border-bottom-color:transparent!important}
.choose li:nth-child(1)::before{background:#0f4a42}
.choose li:nth-child(2)::before{background:#23305e}
.choose li:nth-child(3)::before{background:#c0461f}
.statbar>div:nth-child(1) b{color:#0f4a42}
.statbar>div:nth-child(2) b{color:#c0461f}
.statbar>div:nth-child(3) b{color:#86384a}
.statbar>div:nth-child(4) b{color:#23305e}
main .trade:not(.block){background:radial-gradient(ellipse 50% 120% at 88% 50%,rgba(255,255,255,.14),transparent 70%),#1d4a40;color:#fbf6ee;border:0!important;border-radius:20px;padding:clamp(24px,3.4vw,40px)!important}
main .trade:not(.block) h2{color:#fff}
main .trade:not(.block) p{color:rgba(251,246,238,.85)!important}
main .trade:not(.block) .pill.blue{background:#fbf6ee;color:#2f2a26}
.page-heading{position:relative}
.page-heading::after{content:"";display:block;width:132px;height:6px;margin-top:18px;border-radius:6px;background:linear-gradient(90deg,#0f4a42 0 25%,#23305e 25% 50%,#c0461f 50% 75%,#86384a 75%)}

/* ---------- 4. before / after as one draggable picture ---------- */
.pair.t3-compare{display:block;position:relative;width:min(100%,calc(min(76vh,640px) * .8));aspect-ratio:4/5;margin-inline:auto;border-radius:16px;overflow:hidden;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;--pos:50%;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.pair.t3-compare figure{position:absolute;inset:0;margin:0}
.pair.t3-compare figure:first-of-type{z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.pair.t3-compare picture{display:block;width:100%;height:100%}
.pair.t3-compare img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;pointer-events:none;-webkit-user-drag:none}
.pair.t3-compare figcaption{z-index:1;top:12px;left:12px;font-weight:600}
.pair.t3-compare figure:last-of-type figcaption{left:auto;right:12px}
.t3-handle{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;outline:0}
.t3-handle i{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.t3-handle i::before,.t3-handle i::after{content:"";position:absolute;top:50%;width:0;height:0;border:7px solid transparent;margin-top:-7px}
.t3-handle i::before{left:7px;border-right-color:#2f2a26}
.t3-handle i::after{right:7px;border-left-color:#2f2a26}
.t3-handle:focus-visible i{box-shadow:0 0 0 3px #fff,0 0 0 6px #23305e}
.t3-hint{position:absolute;z-index:2;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:rgba(20,16,13,.6);color:#fff;font:600 12px/1 Figtree,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.t3-compare.t3-used .t3-hint{opacity:0}