/* Concept store UI · Brand Evolution (shared by the e-commerce concepts; colours come from each site's --cs-* tokens) */
html.cs-lock{overflow:hidden}
.cs-btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 22px;border-radius:var(--cs-radius,0);background:var(--cs-accent);color:var(--cs-accent-fg);transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s}
.cs-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cs-btn-ghost{background:transparent;color:var(--cs-fg);box-shadow:inset 0 0 0 1.5px var(--cs-line)}
.cs-link{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--cs-fg);text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.8}
.cs-link:hover{opacity:1;color:var(--cs-accent)}

/* filters */
.cs-chip{appearance:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:9px 16px;border-radius:999px;border:1.5px solid var(--cs-line);background:transparent;color:var(--cs-fg);transition:background .25s,color .25s,border-color .25s}
.cs-chip:hover{border-color:var(--cs-fg)}
.cs-chip[aria-pressed="true"]{background:var(--cs-fg);color:var(--cs-bg);border-color:var(--cs-fg)}

/* grid cards */
.cs-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(18px,2.4vw,32px)}
.cs-card{position:relative;min-width:0}
.cs-anim .cs-card{animation:csIn .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 70ms)}
@keyframes csIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cs-art{position:relative;aspect-ratio:4/5;background:var(--cs-card);overflow:hidden;border-radius:var(--cs-radius,0)}
.cs-art-btn{appearance:none;border:0;padding:0;margin:0;background:none;position:absolute;inset:0;width:100%;cursor:zoom-in;display:block}
.cs-layer{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.cs-layer svg{width:100%;height:100%}
.cs-l1{opacity:0}
@media (hover:hover){
  .cs-card:hover .cs-l1{opacity:1}
  .cs-card:hover .cs-layer{transform:scale(1.035)}
  .cs-card:hover .cs-quick,.cs-card:focus-within .cs-quick{transform:none;opacity:1}
}
.cs-no{position:absolute;left:12px;top:10px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--cs-fg);opacity:.6;pointer-events:none}
.cs-tag{position:absolute;left:12px;bottom:12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--cs-accent);color:var(--cs-accent-fg);padding:5px 9px;pointer-events:none;border-radius:var(--cs-radius,0)}
.cs-heart{appearance:none;position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%;border:0;background:var(--cs-heart-bg,rgba(255,255,255,.75));display:grid;place-items:center;cursor:pointer;color:var(--cs-fg);transition:transform .3s,background .3s;z-index:2}
.cs-heart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;transition:fill .25s,stroke .25s}
.cs-heart:hover{transform:scale(1.08)}
.cs-heart[aria-pressed="true"] svg{fill:var(--cs-accent);stroke:var(--cs-accent);animation:csPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes csPop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.cs-heart.inline{position:static;flex:0 0 auto;width:52px;height:52px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--cs-line)}
.cs-quick{appearance:none;position:absolute;left:10px;right:10px;bottom:10px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14px;padding:12px;background:var(--cs-fg);color:var(--cs-bg);border-radius:var(--cs-radius,0);transform:translateY(14px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;z-index:2}
@media (hover:none){.cs-quick{position:static;display:block;width:100%;opacity:1;transform:none;margin-top:0;border-radius:0}.cs-art{display:flex;flex-direction:column}.cs-art-btn{position:relative;flex:1}.cs-tag{bottom:56px}}
.cs-meta{padding-top:12px}
.cs-meta-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cs-meta h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0}
.cs-price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0}
.cs-price.big{font-size:24px}
.cs-sub{font-size:13.5px;color:var(--cs-muted);margin:3px 0 0}
.cs-sw{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cs-swatch{appearance:none;width:22px;height:22px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px var(--cs-bg),0 0 0 3px transparent;transition:box-shadow .25s,transform .25s}
.cs-swatch:hover{transform:scale(1.12)}
.cs-swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px var(--cs-bg),0 0 0 3.5px var(--cs-fg)}
.cs-sw.lg .cs-swatch{width:30px;height:30px}
.cs-none{grid-column:1/-1;padding:48px 0;color:var(--cs-muted)}

/* scrim + drawer */
.cs-scrim{position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.42);opacity:0;transition:opacity .35s}
.cs-scrim.open{opacity:1}
.cs-drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(440px,100%);background:var(--cs-bg);color:var(--cs-fg);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .42s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.25);outline:none}
.cs-drawer.open{transform:none}
.cs-dh{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--cs-line)}
.cs-dh h2{font-family:var(--cs-display);font-size:26px;font-weight:600;margin:0;letter-spacing:-.01em}
.cs-dcount{font-size:.6em;opacity:.6}
.cs-x{appearance:none;border:0;background:transparent;color:var(--cs-fg);width:44px;height:44px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.cs-x:hover{background:var(--cs-line)}
.cs-ship{padding:14px 22px;border-bottom:1px solid var(--cs-line);font-size:14px}
.cs-ship-bar{height:5px;background:var(--cs-line);margin-top:10px;overflow:hidden;border-radius:4px}
.cs-ship-bar i{display:block;height:100%;background:var(--cs-accent);transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cs-lines{list-style:none;margin:0;padding:0 22px;overflow:auto;flex:1}
.cs-line{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--cs-line);align-items:start}
.cs-line-art{width:76px;aspect-ratio:4/5;background:var(--cs-card);border-radius:var(--cs-radius,0);overflow:hidden}
.cs-line-art svg{width:100%;height:100%}
.cs-line-name{font-weight:700;font-size:15px;margin:0}
.cs-line-var{font-size:13px;color:var(--cs-muted);margin:2px 0 10px}
.cs-line-end{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end;font-weight:700;font-variant-numeric:tabular-nums}
.cs-line-end p{margin:0}
.cs-qty{display:inline-flex;align-items:center;border:1.5px solid var(--cs-line);border-radius:var(--cs-radius,0);height:52px}
.cs-qty button{appearance:none;border:0;background:none;color:var(--cs-fg);width:40px;height:100%;font-size:20px;cursor:pointer}
.cs-qty span{min-width:22px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cs-qty.sm{height:34px}
.cs-qty.sm button{width:32px;font-size:17px}
.cs-empty{display:none;padding:40px 22px;text-align:center;flex:1}
.cs-empty p{margin:0 0 18px;color:var(--cs-muted)}
.cs-drawer.is-empty .cs-empty{display:block}
.cs-drawer.is-empty .cs-lines,.cs-drawer.is-empty .cs-df{display:none}
.cs-df{padding:18px 22px 22px;border-top:1px solid var(--cs-line)}
.cs-subrow{display:flex;justify-content:space-between;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.cs-note{font-size:12.5px;color:var(--cs-muted);margin:6px 0 14px}
.cs-checkout{width:100%}
.cs-disabled{margin:12px 0 0;padding:10px 12px;font-size:13.5px;font-weight:600;background:var(--cs-line);text-align:center;border-radius:var(--cs-radius,0)}

/* modal + quick view */
.cs-modal{position:fixed;inset:0;z-index:92;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,.5);opacity:0;transition:opacity .3s}
.cs-modal[hidden]{display:none}
.cs-modal.open{opacity:1}
.cs-modal-card{position:relative;background:var(--cs-bg);color:var(--cs-fg);width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;transform:translateY(16px) scale(.985);transition:transform .4s cubic-bezier(.2,.8,.2,1);border-radius:var(--cs-radius,0);outline:none}
.cs-modal.open .cs-modal-card{transform:none}
.cs-modal-card>.cs-x{position:absolute;right:10px;top:10px;z-index:3;background:var(--cs-bg)}
.cs-qv-card{display:grid;grid-template-columns:1.05fr 1fr}
.cs-qv-art{position:relative;background:var(--cs-card);aspect-ratio:4/5;overflow:hidden;touch-action:none}
.cs-qv-art>svg{width:100%;height:100%}
.cs-qv-info{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.cs-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-muted);margin:0}
.cs-qv-info h2{font-family:var(--cs-display);font-size:clamp(28px,3.4vw,42px);font-weight:600;line-height:1.02;letter-spacing:-.015em;margin:0;padding-right:40px}
.cs-desc{color:var(--cs-muted);font-size:15px;line-height:1.55;margin:0}
.cs-fs{border:0;padding:0;margin:0;min-width:0}
.cs-fs legend{font-size:13px;font-weight:600;margin-bottom:10px;padding:0}
.cs-sizes{display:flex;flex-wrap:wrap;gap:8px}
.cs-size{appearance:none;font:inherit;font-size:14px;font-weight:600;min-width:52px;height:44px;padding:0 12px;border:1.5px solid var(--cs-line);background:transparent;color:var(--cs-fg);cursor:pointer;border-radius:var(--cs-radius,0);transition:border-color .2s,background .2s,color .2s}
.cs-size:hover{border-color:var(--cs-fg)}
.cs-size[aria-pressed="true"]{background:var(--cs-fg);color:var(--cs-bg);border-color:var(--cs-fg)}
.cs-sizes.shake{animation:csShake .4s}
@keyframes csShake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.cs-fs .cs-link{margin-top:10px}
.cs-err{color:var(--cs-accent);font-size:13px;font-weight:700;margin:8px 0 0}
.cs-onesize{font-size:13px;color:var(--cs-muted);margin:0}
.cs-buy{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.cs-buy .cs-add{flex:1;min-width:180px}
.cs-details{margin:4px 0 0;padding:14px 0 0 18px;border-top:1px solid var(--cs-line);font-size:14px;color:var(--cs-muted);display:grid;gap:4px}
/* magnifier */
.cs-mag{cursor:crosshair}
.cs-lens{position:absolute;left:0;top:0;width:180px;height:180px;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 18px 40px rgba(0,0,0,.45);background:var(--cs-card);will-change:transform}
.cs-mag.zoom .cs-lens{opacity:1}
.cs-lens-in{position:absolute;left:0;top:0;will-change:transform}
.cs-lens-in svg{width:100%;height:100%}
.cs-maghint{position:absolute;left:12px;bottom:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--cs-muted);pointer-events:none;transition:opacity .2s}
.cs-mag.zoom .cs-maghint{opacity:0}
@media (max-width:760px){
  .cs-qv-card{grid-template-columns:1fr}
  .cs-qv-art{aspect-ratio:1/1}
  .cs-lens{width:130px;height:130px}
}

/* fly + toast + cart bump */
.cs-fly{position:fixed;z-index:120;pointer-events:none;background:var(--cs-card);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.cs-fly svg{width:100%;height:100%}
.cs-toast{position:fixed;left:50%;bottom:22px;z-index:130;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--cs-fg);color:var(--cs-bg);padding:12px 18px;font-size:14px;font-weight:600;border-radius:999px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;max-width:calc(100% - 32px);text-align:center}
.cs-toast.show{opacity:1;transform:translate(-50%,0)}
.bump{animation:csBump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes csBump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .cs-drawer,.cs-modal,.cs-modal-card,.cs-scrim,.cs-layer,.cs-quick,.cs-toast{transition:none!important}
  .cs-anim .cs-card,.bump,.cs-heart[aria-pressed="true"] svg{animation:none!important}
}
.cs-price small{font-weight:600;font-size:.78em;opacity:.7}

/* phone: compact 2-column product grid */
@media (max-width:760px){
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .cs-meta{padding-top:9px}
  .cs-meta-row{flex-direction:column;align-items:flex-start;gap:2px}
  .cs-meta h3{font-size:14.5px}
  .cs-price{font-size:14px}
  .cs-sub{font-size:12.5px;line-height:1.35}
  .cs-quick{font-size:12.5px;padding:11px 6px;min-height:40px;line-height:1.2}
  .cs-tag{left:8px;font-size:9.5px;letter-spacing:.08em;padding:4px 7px}
  .cs-no{left:9px;top:8px;font-size:11px}
  .cs-heart{right:4px;top:4px}
  .cs-sw{gap:10px}
  .cs-swatch{width:26px;height:26px}
}