/* =============================================================
   DEMETER & CO. — shared motion system (motion.css)
   Measured on suitsupply.com: these are their exact durations
   and easings. Loaded on every page so clicks/hovers feel the
   same everywhere.
   ============================================================= */
:root{
  --ease:cubic-bezier(.4,0,.2,1);        /* colour / opacity / border */
  --ease-out:cubic-bezier(0,0,.2,1);      /* reveals */
  --ease-move:cubic-bezier(.5,0,.16,1);   /* transforms (chips, arrows, panels) */
  --ease-panel:cubic-bezier(.49,.03,.13,.99); /* header / drawers */
  --t-fast:.15s; --t-base:.2s; --t-slow:.3s; --t-panel:.45s;
}

/* text links & icon buttons: colour only, .3s */
a,button{transition:color var(--t-slow) var(--ease),background-color var(--t-slow) var(--ease),border-color var(--t-slow) var(--ease),opacity var(--t-fast) var(--ease)}
/* SuitSupply never zooms images on hover */
img{transition:opacity var(--t-slow) var(--ease)}
a:hover img,.tile:hover img,.cat-card:hover img,.rec:hover img,.item:hover img,.ctl-card:hover img,.ymal .card:hover img{transform:none}

/* header icons: slight dim on hover */
header .icon-btn:hover{opacity:.6}

/* generic press feedback (what makes clicks feel "alive" on SuitSupply) */
button:active,.chip:active,.cat-card:active,.p-fav:active{transform:scale(.97);transition:transform var(--t-fast) var(--ease-move)}
.btn-size:active,.btn-cust:active,.checkout:active,.btn-primary:active{transform:scale(.985)}

/* focus rings like theirs: 1px outline, offset 2px */
:focus-visible{outline:1px solid #2d2e2c;outline-offset:2px}

/* ---- product card (listing / wishlist / recs) ---- */
.p-media,.rec .ph,.ymal .card .ph,.item .media{overflow:hidden}
.p-media .pi{transition:opacity var(--t-slow) var(--ease)}
.p-arrow{opacity:0;transition:opacity var(--t-slow) var(--ease),background-color var(--t-fast) var(--ease)}
.p-media:hover .p-arrow{opacity:1}
.p-arrow:hover{background:#fff}
.p-fav{transition:background-color var(--t-fast) var(--ease),opacity var(--t-slow) var(--ease)}
.p-fav:hover{transform:none;background:#fff}
.p-fav svg{transition:fill var(--t-fast) var(--ease)}
.p-name,.p-sub,.p-price{transition:color var(--t-slow) var(--ease)}
.product:hover .p-name{color:#6f6f6f}

/* ---- chips & category tiles ---- */
.chip{transition:background-color var(--t-slow) ease-in-out,border-color var(--t-base) var(--ease)}
.cat-card .lbl{transition:color var(--t-slow) var(--ease)}
.cat-card:hover .lbl{color:#6f6f6f}

/* ---- accordions: grid-rows 0fr → 1fr over .3s (no height jump) ---- */
.acc details .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease);overflow:hidden;padding:0}
.acc details .body>*{min-height:0;overflow:hidden}
.acc details[open] .body{grid-template-rows:1fr}
.acc details .body .inner{padding:0 0 16px;transition:padding var(--t-slow) var(--ease)}
.acc details:not([open]) .body .inner{padding:0}
.acc summary .pm::before,.acc summary .pm::after{transition:transform var(--t-slow) var(--ease)}

/* ---- toast (bottom centre, .3s) ---- */
.toast{transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease-move)}

/* ---- drawers / veils ---- */
.dco-veil,.drawer-veil,.fdrawer-veil{transition:opacity var(--t-slow) var(--ease)}
.dco-menu,.fdrawer,.size-panel{transition:transform var(--t-panel) var(--ease-panel)}

/* ---- size panel (right-side slide-in like SuitSupply) ---- */
.size-veil{position:fixed;inset:0;z-index:180;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.size-veil.on{opacity:1;pointer-events:auto}
.size-panel{position:fixed;top:0;right:0;bottom:0;width:min(576px,100vw);z-index:190;background:#fff;transform:translateX(105%);display:flex;flex-direction:column;padding:28px 32px}
.size-panel.open{transform:none}
.size-panel .sp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.size-panel .sp-h b{font-size:16px;font-weight:500}
.size-panel .sp-h .x{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:#2d2e2c}
.size-panel .sp-sub{font-size:14px;font-weight:300;margin-bottom:18px;display:flex;justify-content:space-between}
.size-panel .sp-sub a{text-decoration:underline;text-underline-offset:3px}
.size-panel .sp-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.size-panel .sp-list button{height:40px;border:1px solid #e1e1e1;border-radius:4px;background:#fff;font:inherit;font-size:14px;font-weight:300;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#2d2e2c;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.size-panel .sp-list button:hover{border-color:#2d2e2c}
.size-panel .sp-list button.sel{background:#2d2e2c;color:#fff;border-color:#2d2e2c}
.size-panel .sp-list button.oos{color:#c9c9c9;cursor:not-allowed}
.size-panel .sp-list button.oos span{text-decoration:line-through}
.size-panel .sp-list button small{font-size:12px;font-weight:300;color:#6f6f6f}
.size-panel .sp-list button.sel small{color:#ddd}
/* SuitSupply: price + delivery on the left, Add to bag on the right, pinned to the panel's bottom */
.size-panel .sp-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid #e1e1e1}
.size-panel .sp-price{display:block;font-size:16px;font-weight:500;line-height:24px}
.size-panel .sp-del{font-size:14px;font-weight:300;line-height:20px}
.size-panel .sp-add{height:44px;padding:0 24px;border:0;border-radius:4px;background:#2d2e2c;color:#fff;font:inherit;font-size:14px;font-weight:400;cursor:pointer;white-space:nowrap;transition:background-color var(--t-fast) var(--ease)}
.size-panel .sp-add:disabled{background:#c9c9c9;cursor:default}
@media(max-width:700px){.size-panel{padding:20px 16px 16px}.size-panel .sp-h{margin-bottom:22px}.size-panel .sp-foot{padding-top:16px}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}