/* ============ OVRCAST — shop: drawer, product page, checkout ============ */

/* ---------- search results ---------- */
.search__results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; margin-top: 8px; max-height: 50vh; overflow: auto; }
.sr { display: flex; align-items: center; gap: 16px; padding: 10px 8px; border-radius: var(--radius); transition: background .3s; }
.sr:hover { background: var(--panel); }
.sr img { width: 52px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--panel); }
.sr span { flex: 1; display: grid; }
.sr b { font-weight: 600; }
.sr small { color: var(--ink-3); }
.sr em { font-style: normal; font-weight: 600; }
.sr-empty { color: var(--ink-2); padding: 14px 8px; }

/* ---------- cart drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .5s; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: 480px; max-width: 100%;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(104%); transition: transform .7s var(--ease);
}
.drawer.open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 28px 32px 20px; }
.drawer__head h2 { font: 500 30px/1 var(--display); letter-spacing: -.03em; }
.drawer__head h2 span { color: var(--ink-3); }
.drawer__head button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: background .3s, transform .5s var(--ease-out); }
.drawer__head button:hover { background: var(--panel); transform: rotate(90deg); }
.drawer__head svg { width: 22px; height: 22px; }
.drawer__ship { padding: 0 32px 20px; border-bottom: 1px solid var(--line); }
.drawer__ship p { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.drawer__ship b { color: var(--ink); font-weight: 600; }
.bar { height: 4px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--signal); border-radius: 4px; transition: width .7s var(--ease-out); }
.drawer__items { flex: 1; overflow: auto; padding: 8px 32px; }
.line { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line__img { aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--panel); }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__body { display: flex; flex-direction: column; }
.line__top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.line__top a:hover { text-decoration: underline; text-underline-offset: 3px; }
.line__meta { color: var(--ink-3); margin-top: 4px; }
.line__bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.line__remove { color: var(--ink-3); transition: color .3s; }
.line__remove:hover { color: var(--signal); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; height: 38px; }
.qty button { width: 38px; height: 100%; font-size: 18px; border-radius: 50%; transition: background .3s; }
.qty button:hover { background: var(--panel); }
.qty span { min-width: 22px; text-align: center; font-weight: 600; font-size: 15px; }
.qty--lg { height: 56px; }
.qty--lg button { width: 52px; font-size: 20px; }
.drawer__empty { display: grid; justify-items: center; gap: 18px; padding: 80px 0; color: var(--ink-2); }
.drawer__empty svg { width: 44px; height: 44px; }
.drawer__foot { padding: 24px 32px 28px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.drawer__row { display: flex; justify-content: space-between; font: 500 22px/1 var(--display); letter-spacing: -.02em; }
.drawer__save { color: var(--signal); min-height: 14px; }
.drawer__note { font-size: 13px; color: var(--ink-3); }
.drawer__cta { justify-content: center; width: 100%; height: 58px; margin-top: 8px; }
.drawer__continue { font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; padding: 8px; }

/* ---------- quick-add sizes on product cards ---------- */
.product { cursor: pointer; }
.product__add { display: flex; flex-direction: column; gap: 8px; height: auto; padding: 12px; border-radius: var(--radius); font-weight: 500; }
.product__add:hover { background: #fff; color: var(--ink); }
.product__add .mono { color: var(--ink-3); font-size: 11px; text-align: center; }
.product__sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.product__sizes button { height: 38px; border-radius: 6px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; transition: background .25s, color .25s, border-color .25s; }
.product__sizes button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.product--link { display: block; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid4 .product__img { aspect-ratio: 4 / 5; }
.grid4 .product__img > img { transition: transform .9s var(--ease-out); }
.product--link:hover .product__img > img { transform: scale(1.05); }
.stack__card .btn { text-decoration: none; }
.layering__imgs figure { cursor: pointer; }

/* ---------- product page ---------- */
.pdp { padding-top: 28px; padding-bottom: 100px; }
.crumbs { display: flex; gap: 10px; align-items: center; color: var(--ink-3); margin-bottom: 28px; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 500; }
.pdp__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: start; }
.pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pdp__frame { aspect-ratio: 4 / 5; border-radius: var(--radius); grid-column: span 2; }
.pdp__frame--half { grid-column: span 1; }
.pdp__frame img { transition: opacity .35s; }
.pdp__frame--half img { transform: scale(var(--z)); }
.pdp__sticky { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 22px; }
.tag--inline { position: static; justify-self: start; border: 1px solid var(--line); }
.pdp__title { font-size: 56px; margin-top: -4px; }
.pdp__price { display: flex; align-items: baseline; gap: 14px; }
.pdp__price b { font: 500 34px/1 var(--display); letter-spacing: -.03em; }
.pdp__price s { font-size: 20px; }
.pill { background: var(--signal); color: #fff; border-radius: 999px; padding: 5px 10px; font: 500 12px/1 var(--mono); }
.pdp__rating { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.pdp__desc { font-size: 18px; color: var(--ink-2); max-width: 520px; }
.opt { display: grid; gap: 12px; }
.opt__head { display: flex; justify-content: space-between; align-items: baseline; }
.opt__head b { font-weight: 600; }
.opt__hint { font-size: 14px; color: var(--ink-3); transition: color .3s; }
.opt.err .opt__hint { color: var(--signal); font-weight: 600; }
.opt.err .sizes { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.swatches { display: flex; gap: 12px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); position: relative; transition: transform .3s var(--ease-out); }
.swatch:hover { transform: scale(1.08); }
.swatch.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink); }
.sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.size { height: 52px; border: 1.5px solid var(--line); border-radius: var(--radius); font-weight: 600; transition: border-color .25s, background .25s, color .25s; }
.size:hover { border-color: var(--ink); }
.size.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pdp__buy { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 4px; }
.pdp__add { height: 56px; justify-content: center; }
.pdp__add b { font-weight: 600; }
.pdp__now { height: 54px; justify-content: center; }
.pdp__perks { list-style: none; display: grid; gap: 12px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.pdp__perks li { display: flex; align-items: center; gap: 14px; }
.pdp__perks svg { width: 22px; height: 22px; flex: none; color: var(--ink); }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-weight: 600; font-size: 17px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { width: 14px; height: 14px; position: relative; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.6px; background: var(--ink); transition: transform .4s var(--ease-out); }
.acc summary i::after { transform: rotate(90deg); }
.acc details[open] summary i::after { transform: rotate(0); }
.acc p, .acc ul { padding: 0 0 22px; color: var(--ink-2); font-size: 16px; }
.acc ul { list-style: none; display: grid; gap: 8px; }
.acc li::before { content: "—"; margin-right: 10px; color: var(--ink-3); }
.related { padding-top: 40px; }
.notfound { padding: 140px 0; display: grid; gap: 24px; justify-items: start; }

/* ---------- checkout ---------- */
.header--checkout { grid-template-columns: 1fr auto 1fr; }
.co-back { justify-self: start; color: var(--ink-2); transition: color .3s; }
.co-back:hover { color: var(--ink); }
.co-secure { justify-self: end; display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.co-secure svg { width: 18px; height: 18px; }
.co { display: grid; grid-template-columns: 1fr 460px; gap: 100px; padding-top: 40px; padding-bottom: 100px; align-items: start; }
.co__title { font-size: 56px; margin-bottom: 40px; }
.co__block { display: grid; gap: 16px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.co__blockhead { display: flex; justify-content: space-between; align-items: baseline; }
.co__blockhead h2 { font: 500 26px/1 var(--display); letter-spacing: -.03em; }
.co__blockhead .mono { color: var(--ink-3); font-size: 11px; }
.co__blockhead a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.field { display: grid; gap: 8px; position: relative; }
.field span { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.field span em { font-style: normal; color: var(--ink-3); text-transform: none; }
.field input, .field select {
  height: 54px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff;
  font: 500 16px/1 var(--body); color: var(--ink); outline: 0; transition: border-color .25s, box-shadow .25s; width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.field.err input { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255,74,28,.12); }
.field.err span { color: var(--signal); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row--3 { grid-template-columns: 1fr 2fr; }
.check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check i { width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 6px; display: grid; place-items: center; transition: background .25s, border-color .25s; flex: none; }
.check input:checked + i { background: var(--ink); border-color: var(--ink); }
.check input:checked + i::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.choices { display: grid; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.choice { display: flex; align-items: center; gap: 16px; padding: 20px 20px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background .25s; }
.choice:last-child { border-bottom: 0; }
.choice:hover { background: var(--panel); }
.choice.on { background: var(--panel); }
.choice input { position: absolute; opacity: 0; }
.choice i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-3); flex: none; position: relative; transition: border-color .25s; }
.choice.on i { border-color: var(--ink); }
.choice.on i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
.choice span { flex: 1; display: grid; gap: 2px; }
.choice b { font-weight: 600; }
.choice small { color: var(--ink-3); font-size: 14px; }
.choice em { font-style: normal; font-weight: 600; }
.pay-panel { display: grid; gap: 16px; padding: 22px 20px 26px; background: #fff; border-bottom: 1px solid var(--line); }
.pay-panel.hide { display: none; }
.co__error { color: var(--signal); font-weight: 600; min-height: 22px; margin-bottom: 8px; }
.co__submit { width: 100%; height: 62px; justify-content: center; font-size: 17px; }
.co__submit:disabled { opacity: .7; cursor: wait; }
.co__submit b { font-weight: 600; margin-left: 4px; }
.co__legal { color: var(--ink-3); margin-top: 18px; text-align: center; }
.co__summary { position: relative; }
.co__sticky { position: sticky; top: calc(var(--header-h) + 24px); background: var(--panel); border-radius: var(--radius); padding: 32px; display: grid; gap: 20px; }
.co__sumtitle { font: 500 24px/1 var(--display); letter-spacing: -.03em; }
.sumlines { display: grid; gap: 16px; max-height: 340px; overflow: auto; }
.sumline { display: grid; grid-template-columns: 68px 1fr auto; gap: 16px; align-items: center; }
.sumline__img { position: relative; width: 68px; height: 84px; border-radius: 6px; background: #fff; }
.sumline__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.sumline__img span { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: #fff; font: 600 11px/22px var(--mono); text-align: center; }
.sumline__txt { display: grid; gap: 4px; }
.sumline__txt b { font-weight: 600; }
.sumline__txt small { color: var(--ink-3); }
.sumline em { font-style: normal; font-weight: 600; }
.promo { display: flex; gap: 10px; }
.promo input { flex: 1; height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: 500 15px/1 var(--body); outline: 0; text-transform: uppercase; }
.promo input:focus { border-color: var(--ink); }
.promo .btn { height: 48px; background: #fff; }
.promo .btn:hover { background: var(--ink); }
.promo__msg { min-height: 14px; margin-top: -8px; }
.promo__msg.ok { color: #2f7a3f; }
.promo__msg.bad { color: var(--signal); }
.totals { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.totals div { display: flex; justify-content: space-between; color: var(--ink-2); }
.totals dd { color: var(--ink); font-weight: 500; }
.totals .disc dd { color: #2f7a3f; }
.totals .grand { padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line); color: var(--ink); font: 500 24px/1 var(--display); letter-spacing: -.02em; align-items: baseline; }
.totals .grand small { font-size: 11px; color: var(--ink-3); margin-left: 6px; letter-spacing: .05em; }
.co__save { color: var(--signal); text-align: center; min-height: 14px; }
.co-foot { display: flex; gap: 32px; justify-content: center; padding: 28px 0 40px; color: var(--ink-3); border-top: 1px solid var(--line); }
.co-foot a:hover { color: var(--ink); }

/* order confirmation */
.done { padding: 100px 0 140px; display: grid; gap: 26px; justify-items: center; text-align: center; }
.done .eyebrow { margin-bottom: 0; }
.done__check { width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; animation: pop .8s var(--ease-out); }
.done__check svg { width: 38px; height: 38px; stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .7s .35s var(--ease-out) forwards; }
@keyframes pop { from { transform: scale(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done .lead { max-width: 560px; }
.done__card { width: min(620px, 100%); text-align: left; background: var(--panel); border-radius: var(--radius); padding: 32px; display: grid; gap: 22px; margin: 10px 0; }
.done__lines { display: grid; gap: 16px; }
.done__meta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.done__meta .mono { color: var(--ink-3); }
.done__meta p { margin-top: 6px; font-size: 15px; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .container, .menu__inner { width: calc(100% - 64px); }
  .header { padding: 0 24px; }
  .header__nav { display: none; }
  .title { font-size: 52px; }
  .title--lg { font-size: 64px; }
  .title--xl { font-size: 88px; }
  .layering__wrap, .band__wrap, .faq, .footer__top { gap: 56px; }
  .stack__text { padding: 40px; }
  .stack__text h3 { font-size: 72px; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .pdp__grid, .co { gap: 48px; }
  .co { grid-template-columns: 1fr 380px; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; --announce-h: 32px; }
  body { font-size: 16px; }
  html { overflow-x: clip; }
  .container, .menu__inner { width: calc(100% - 32px); }
  .header { padding: 0 8px; grid-template-columns: auto 1fr auto; }
  .header .logo { justify-self: center; font-size: 22px; gap: 8px; }
  .logo__cloud { width: 28px; height: 17px; }
  .header__temp { display: none; }
  .header__right { gap: 0; }
  .icon-btn { width: 42px; height: 42px; }

  .title, .layering__text .title { font-size: 40px; }
  .title--lg { font-size: 46px; }
  .title--xl { font-size: 54px; }
  .lead { font-size: 17px; }
  .section { padding: 72px 0; }
  .section--tight { padding: 56px 0; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .center-head { margin-bottom: 40px; padding: 0 16px; }
  .grid3 { grid-template-columns: 1fr; gap: 32px; }
  .grid4 { gap: 16px; }

  /* menu overlay */
  .menu { padding-top: calc(var(--header-h) + 28px); overflow-y: auto; }
  .menu__inner { grid-template-columns: 1fr; gap: 32px; }
  .menu__links a { font-size: 40px; gap: 14px; }
  .search { padding: 20px 16px 24px; }
  .search__bar input { font-size: 24px; min-width: 0; }
  .search__tags { flex-wrap: wrap; }
  .search__results { grid-template-columns: 1fr; }

  /* hero: word in the back, card in the middle, models at the edges */
  .hero { height: auto; min-height: calc(100svh - var(--announce-h) - var(--header-h)); padding: 28px 0 80px; display: grid; place-items: center; }
  .hero__word { font-size: 22vw; padding: 0 12px; }
  .hero__center { position: relative; left: auto; top: auto; transform: none; gap: 32px; }
  .flip { width: 230px; height: 306px; }
  .poster { padding: 20px; }
  .poster h2 { font-size: 48px; }
  .poster__big { font-size: 76px; }
  .poster__code { font-size: 24px; }
  .hero__model--left { left: -6%; width: 40%; height: 46%; }
  .hero__model--right { right: -6%; width: 34%; height: 36%; }
  .hero__meta { left: 16px; right: 16px; bottom: 18px; }

  /* product cards: no hover on touch, so keep the quick-add hidden */
  .product__add { display: none; }
  .product__info h3 { font-size: 17px; }

  .story { height: 78svh; min-height: 520px; padding: 0 20px; }
  .story__content p:not(.eyebrow) { font-size: 17px; }

  .layering__wrap, .band__wrap, .faq, .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .layering__text, .faq__head { position: static; }

  .band { padding: 80px 0; }
  .band__side > p { font-size: 17px; }
  .band__stats { gap: 12px; margin-top: 32px; }
  .band__stats b { font-size: 34px; }

  .stack__card, .stack__card--rev { grid-template-columns: 1fr; grid-template-rows: 46% 1fr; height: 600px; top: calc(var(--header-h) + 16px + var(--i, 0) * 14px); margin-bottom: 28px; }
  .stack__card--rev .stack__img { order: 0; }
  .stack__text { padding: 24px; gap: 12px; justify-content: flex-start; }
  .stack__text h3 { font-size: 52px; }
  .stack__text > p:not(.mono) { font-size: 15px; }
  .stack__buy { margin-top: auto; gap: 12px; }
  .stack__buy b { font-size: 30px; }
  .stack__buy .btn { height: 46px; padding: 0 18px; font-size: 14px; }

  .review { width: 300px; padding: 24px; min-height: 260px; margin-right: 16px; }
  .review blockquote { font-size: 17px; }

  .faq__q { font-size: 18px; padding: 22px 0; gap: 16px; }
  .faq__a p { padding-right: 0; font-size: 16px; }

  .perk { padding: 28px 24px; }

  .footer { padding: 72px 0 28px; }
  .footer__news-title { font-size: 34px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .footer__word { margin: 56px 0 24px; }
  .footer__bottom { flex-direction: column; gap: 10px; }

  .toast { left: 16px; right: 16px; transform: translateY(calc(100% + 60px)); justify-content: center; }
  .toast.show { transform: none; }

  /* drawer */
  .drawer__head { padding: 22px 20px 16px; }
  .drawer__ship, .drawer__items { padding-left: 20px; padding-right: 20px; }
  .drawer__foot { padding: 20px; }
  .line { grid-template-columns: 76px 1fr; gap: 14px; }

  /* product page */
  .pdp { padding-top: 16px; padding-bottom: 64px; }
  .crumbs { flex-wrap: wrap; margin-bottom: 18px; }
  .pdp__grid { grid-template-columns: 1fr; gap: 32px; }
  .pdp__gallery { gap: 10px; }
  .pdp__sticky { position: static; gap: 18px; }
  .pdp__title { font-size: 40px; }
  .pdp__price b { font-size: 28px; }
  .size { height: 48px; }
  .pdp__buy { grid-template-columns: 1fr; }

  /* checkout */
  .co-secure { font-size: 0; gap: 0; }
  .co-secure svg { width: 20px; height: 20px; }
  .header--checkout { padding: 0 16px; }
  .co { grid-template-columns: 1fr; gap: 40px; padding-top: 24px; padding-bottom: 64px; }
  .co__summary { order: -1; }
  .co__sticky { position: static; padding: 22px; }
  .co__title { font-size: 40px; margin-bottom: 28px; }
  .field-row, .field-row--3 { grid-template-columns: 1fr; }
  .co-foot { flex-wrap: wrap; gap: 14px 24px; padding: 24px 16px 32px; }
  .done { padding: 64px 0 96px; }
  .done__card { padding: 22px; }
  .done__meta { grid-template-columns: 1fr; }
}