/* =========================================================
   momento.gift — shop pages (extends style.css)
   ========================================================= */

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); font-size: 14px; }
.linkish { background: none; border: 0; padding: 0; color: var(--sky-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 14px; }
.no-scroll { overflow: hidden; }
.hp { position: absolute; left: -9999px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 0 16px; }

/* Announcement bar */
.announce {
  text-align: center; font-size: 13px; letter-spacing: .04em; padding: 8px 16px;
  background: linear-gradient(90deg, rgba(216,38,27,.12), rgba(244,194,13,.18), rgba(140,203,239,.25));
  color: var(--ink);
}

/* Notices */
.notice { max-width: var(--max); margin: 16px auto; padding: 14px 20px; border-radius: 16px; font-size: 15px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: var(--glass-border); }
main > .notice { width: calc(100% - 2 * var(--gutter)); position: relative; z-index: 5; }
.notice--success { border-left: 4px solid #2e9d5b; }
.notice--error { border-left: 4px solid var(--pop-red); }
.notice--info { border-left: 4px solid var(--sky-deep); }
.form-error { color: var(--pop-red); font-size: 14px; margin-top: 10px; }
.placeholder-note { background: rgba(244,194,13,.18); border: 1px dashed #c79a00; padding: 10px 14px; border-radius: 12px; font-size: 14px; }

/* Buttons: extra variants */
.btn-metal--block { display: flex; width: 100%; }
.btn-metal.is-disabled, .btn-metal:disabled { opacity: .55; pointer-events: none; }
.btn-metal[disabled] { cursor: progress; }

/* Page head (inner pages) */
.page-head { position: relative; padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(24px, 4vw, 48px); }
.page-head--short { padding-bottom: 8px; }
.page-head__inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.page-head__title { font-size: clamp(38px, 5.4vw, 72px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.page-head__lede { margin-top: 18px; max-width: 560px; color: var(--muted); font-size: 17px; }
.section--compact { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(56px, 8vw, 110px); }

/* Shop toolbar */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-radius: 22px; padding: 12px 14px; margin-bottom: 18px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { padding: 9px 16px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background .2s, color .2s; }
.fchip:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.fchip.is-on { background: var(--ink); color: #fff; }
.shop-bar__tools { display: flex; gap: 10px; flex-wrap: wrap; }
.search-field, .select-field { position: relative; display: flex; align-items: center; }
.search-field svg { position: absolute; left: 14px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.search-field input, .select-field select {
  height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.7);
  font: inherit; font-size: 14px; color: var(--ink); padding: 0 16px;
}
.search-field input { padding-left: 38px; width: 200px; }
.select-field select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; }
.occasion-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; }
.occasion-filter__label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.chip--sm { padding: 8px 14px; font-size: 13px; }
.chip.is-on { background: var(--ink) !important; color: #fff; border-color: var(--ink) !important; }
.result-count { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* Product cards (links + price) */
.product__img { display: block; }
.product__name a { color: inherit; }
.product__name a:hover { color: var(--sky-deep); }
.product__price { margin-top: 6px; font-weight: 600; font-size: 16px; }
.product__price s { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.tag--sold { left: auto; right: 16px; background: var(--ink); color: #fff; }
.dot--none { background: var(--line); }
.products--shop { grid-template-columns: repeat(3, 1fr); }

/* Empty state */
.empty { text-align: center; padding: 56px 24px; border-radius: 28px; display: grid; justify-items: center; gap: 12px; }
.empty__art { width: 120px; color: var(--sky); }
.empty h2 { font-weight: 400; font-size: 26px; }

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.crumbs a:hover { color: var(--ink); }

/* ---------- Product page ---------- */
.pdp__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.gallery { position: sticky; top: 100px; }
.gallery__main { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 1; box-shadow: var(--glass-shadow); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__main:hover img { transform: scale(1.04); }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery__thumb { width: 74px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; }
.gallery__thumb.is-on { border-color: var(--sky-deep); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.buybox { border-radius: 28px; padding: clamp(24px, 3vw, 40px); }
.buybox__title { font-size: clamp(32px, 3.6vw, 48px); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; }
.buybox__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 14px; }
.buybox__rating { margin-left: 12px; color: var(--muted); }
.stars { color: var(--pop-yellow); letter-spacing: .1em; }
.stars-off { color: rgba(20,41,58,.18); }
.buybox__price { margin-top: 18px; font-size: 28px; font-weight: 500; }
.buybox__price s { font-size: 16px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.buybox__spec { margin-top: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.buybox__desc { margin-top: 14px; color: var(--muted); }
.pform { margin-top: 24px; display: grid; gap: 4px; }

/* Form fields */
.field { margin-bottom: 14px; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.field__hint { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.field input:not([type=radio]):not([type=checkbox]):not([type=file]), .field select, .field textarea, .form-card input, .coupon input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(20,41,58,.12);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .coupon input:focus {
  outline: none; border-color: var(--sky-deep); background: #fff; box-shadow: 0 0 0 4px rgba(47,134,192,.15);
}
.field input:disabled { opacity: .6; }
.field.has-error input, .field.has-error select { border-color: var(--pop-red); }
.field__error { color: var(--pop-red); font-size: 13px; margin-top: 4px; min-height: 0; }
.field__error:empty { display: none; }

/* Plaque live preview */
.plaque-preview { margin: 2px 0 16px; border-radius: 18px; padding: 10px; background: #1c1c1c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -14px rgba(0,0,0,.6); }
.plaque-preview__mat { background: #f4eee2; border-radius: 8px; padding: 22px 16px 20px; display: grid; justify-items: center; gap: 10px; box-shadow: inset 0 2px 8px rgba(0,0,0,.12); }
.plaque-preview__spec { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5b5448; text-align: center; }
.plaque {
  display: inline-block; min-width: 140px; max-width: 100%; text-align: center; overflow-wrap: anywhere;
  padding: 7px 18px; border-radius: 3px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #3b2a08; text-shadow: 0 1px 0 rgba(255,244,200,.7);
  background: linear-gradient(180deg, #f6e7b0 0%, #d9b867 45%, #b8913f 70%, #e3c77e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.25);
}
.plaque.pop { animation: plaquePop .3s var(--ease); }
/* the preview follows the chosen frame finish */
.plaque-preview { transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.plaque-preview[data-finish="walnut"] { background: repeating-linear-gradient(100deg, #6e4427 0 7px, #7d4f2e 7px 15px, #66401f 15px 19px), #6e4427;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 18px rgba(0,0,0,.35), 0 10px 24px -14px rgba(60,30,10,.7); }
.plaque-preview[data-finish="white"] { background: linear-gradient(160deg, #ffffff, #efece5); box-shadow: inset 0 0 0 1px #e1dbcf, 0 10px 24px -16px rgba(20,41,58,.35); }
.plaque-preview[data-finish="white"] .plaque-preview__mat { box-shadow: inset 0 2px 8px rgba(0,0,0,.08); }
.plaque-preview__cap { margin: 8px 4px 0; font-size: 12px; color: rgba(255,255,255,.75); text-align: center; letter-spacing: .02em; }
.plaque-preview[data-finish="white"] .plaque-preview__cap { color: var(--muted); }
.plaque-preview__photo { position: relative; width: 120px; height: 90px; border-radius: 4px; background: linear-gradient(160deg, #ece5d6, #d9cfbb) center / cover no-repeat; box-shadow: 0 2px 6px rgba(0,0,0,.15); display: grid; place-items: center; }
.plaque-preview__photo::after { content: attr(data-label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8a7f6c; }
.plaque-preview__photo.has-photo::after { content: none; }
.plaque-preview__photo.has-photo { background-size: cover; }
figure.plaque-preview { margin-inline: 0; }
@keyframes plaquePop { 50% { transform: scale(1.05); } }

/* Swatches & toggle */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; cursor: pointer; font-size: 14px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(20,41,58,.1); transition: border-color .2s, box-shadow .2s; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:has(input:checked) { border-color: var(--sky-deep); box-shadow: 0 0 0 3px rgba(47,134,192,.15); background: #fff; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.swatch small { color: var(--muted); }
.swatch__chip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.swatch__chip--black { background: #1c1c1c; }
.swatch__chip--walnut { background: linear-gradient(135deg, #7a4e2d, #5a371e); }
.swatch__chip--white { background: #f7f5f0; }
.swatch__chip--white.swatch__chip--white { background: #fff; }
.swatch__chip--blush { background: #f2c4c4; }
.swatch__chip--lavender { background: #b9a7de; }
.field > label.toggle, .toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.toggle input { position: absolute; opacity: 0; }
.toggle small { color: var(--muted); }
.toggle__ui { width: 44px; height: 26px; border-radius: 999px; background: rgba(20,41,58,.15); position: relative; transition: background .2s; flex: none; }
.toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s var(--ease); }
.toggle input:checked + .toggle__ui { background: var(--sky-deep); }
.toggle input:checked + .toggle__ui::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__ui { outline: 2px solid var(--sky-deep); outline-offset: 2px; }

/* Upload */
.upload { display: grid; place-items: center; gap: 10px; padding: 22px; border-radius: 18px; border: 2px dashed rgba(47,134,192,.4); background: rgba(255,255,255,.55); cursor: pointer; text-align: center; transition: background .2s, border-color .2s; }
.upload.is-drag, .upload:hover { background: rgba(226,240,249,.8); border-color: var(--sky-deep); }
.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload__prompt { font-size: 14px; color: var(--muted); }
.upload__prompt b { color: var(--sky-deep); }
.upload__preview { max-height: 220px; border-radius: 12px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }

/* Quantity + actions */
.buybox__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.buybox__actions .btn-metal { flex: 1 1 140px; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(20,41,58,.12); height: 48px; }
.qty input { width: 42px; text-align: center; border: 0 !important; background: none !important; font: inherit; padding: 0 !important; box-shadow: none !important; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty__btn { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); border-radius: 999px; }
.qty__btn:hover { background: rgba(47,134,192,.1); }
.qty--sm { height: 34px; }
.qty--sm .qty__btn { width: 32px; font-size: 16px; }
.qty__val { min-width: 22px; text-align: center; font-size: 14px; }
.stock-note { color: var(--pop-red); font-size: 13px; margin-top: 8px; }
.perks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.perks li::before { content: "✓"; color: var(--sky-deep); font-weight: 700; margin-right: 10px; }

/* Tabs */
.tabs { margin-top: 40px; border-radius: 24px; padding: 8px 8px 24px; }
.tabs__list { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; }
.tabs__list [role=tab] { border: 0; background: none; font: inherit; font-size: 15px; padding: 10px 18px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.tabs__list [role=tab][aria-selected=true] { background: var(--ink); color: #fff; }
.tabs__panel { padding: 16px 20px 0; max-width: 760px; color: var(--ink); }
.tabs__panel p + p { margin-top: 10px; }
.tabs__panel ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.tabs__panel a { color: var(--sky-deep); text-decoration: underline; }

/* Reviews on product page */
.big-rating { font-size: 20px; }
.review-form { margin-top: 28px; border-radius: 24px; padding: 24px 28px; max-width: 720px; }
.review-form h3 { font-weight: 400; font-size: 22px; margin-bottom: 10px; }
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; border: 0; padding: 0; margin: 0 0 10px; }
.rating-input input { position: absolute; opacity: 0; }
.rating-input label { font-size: 28px; color: rgba(20,41,58,.2); cursor: pointer; transition: color .15s; }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: var(--pop-yellow); }
.rating-input input:focus-visible + label { outline: 2px solid var(--sky-deep); border-radius: 4px; }

/* ---------- Cart drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20,41,58,.28); opacity: 0; transition: opacity .3s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.drawer__panel {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px));
  border-radius: 28px; display: flex; flex-direction: column; outline: none;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(251,246,236,.8));
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: var(--glass-border); box-shadow: 0 30px 80px -20px rgba(20,41,58,.4);
  transform: translateX(110%); transition: transform .45s var(--ease);
}
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 12px; }
.drawer__head h2 { font-weight: 400; font-size: 24px; }
.drawer__close { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(20,41,58,.06); font-size: 22px; cursor: pointer; color: var(--ink); }
.drawer__close:hover { background: rgba(20,41,58,.12); }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 24px 24px; display: flex; flex-direction: column; }
.drawer__loading { color: var(--muted); }

.freeship { padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.7); margin-bottom: 14px; font-size: 14px; }
.freeship__bar { height: 6px; border-radius: 99px; background: rgba(20,41,58,.08); margin-top: 8px; overflow: hidden; }
.freeship__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pop-red), var(--pop-yellow), var(--sky)); transition: width .6s var(--ease); }

.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8); transition: opacity .2s; }
.cart-line.is-busy { opacity: .5; }
.cart-line__img { border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-weight: 500; }
.cart-line__name span { color: var(--muted); font-weight: 400; }
.cart-line__opts { list-style: none; padding: 0; margin: 4px 0 8px; font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.cart-line__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-line__price { font-weight: 600; }
.cart-line__remove { margin-top: 6px; background: none; border: 0; padding: 0; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.cart-line__remove:hover { color: var(--pop-red); }

.cart-totals { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.cart-totals dl, .totals { margin: 0; display: grid; gap: 8px; font-size: 15px; }
.cart-totals dl > div, .totals > div { display: flex; justify-content: space-between; gap: 12px; }
.cart-totals dd, .totals dd { margin: 0; }
.is-discount dd { color: #2e9d5b; }
.is-total { border-top: 1px solid rgba(20,41,58,.12); padding-top: 10px; font-size: 18px; font-weight: 600; }
.cart-totals__view { justify-self: center; }
.coupon { display: flex; gap: 8px; }
.coupon input { flex: 1; padding: 10px 14px; }
.coupon__on { font-size: 13px; color: #2e9d5b; }
.cart-empty { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 40px 10px; color: var(--muted); }
.cart-empty svg { width: 56px; height: 56px; color: var(--sky-deep); }

.cart-page { border-radius: 28px; padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; max-width: 860px; }
.cart-page .cart-line { grid-template-columns: 110px 1fr; }
.cart-page .cart-totals { max-width: 420px; margin-left: auto; width: 100%; }

/* ---------- Checkout ---------- */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.checkout__main { display: grid; gap: 18px; }
.checkout__box { border-radius: 24px; padding: 22px 24px 10px; margin: 0; min-width: 0; }
.checkout__box legend { float: left; width: 100%; font-size: 20px; font-weight: 400; margin-bottom: 14px; padding: 0; }
.checkout__box legend + * { clear: both; }
.checkout__signin { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.checkout__signin a { color: var(--sky-deep); text-decoration: underline; }
.checkout__side { position: sticky; top: 100px; border-radius: 24px; padding: 24px; display: grid; gap: 16px; }
.checkout__side h2 { font-weight: 400; font-size: 22px; }
.paymethods { display: grid; gap: 10px; margin-bottom: 14px; }
.paymethod { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; cursor: pointer; background: rgba(255,255,255,.6); border: 1px solid rgba(20,41,58,.1); }
.paymethod input { position: absolute; opacity: 0; }
.paymethod:has(input:checked) { border-color: var(--sky-deep); background: #fff; box-shadow: 0 0 0 3px rgba(47,134,192,.15); }
.paymethod:has(input:focus-visible) { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.paymethod__ui { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(20,41,58,.3); flex: none; position: relative; }
.paymethod input:checked + .paymethod__ui { border-color: var(--sky-deep); }
.paymethod input:checked + .paymethod__ui::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sky-deep); }
.paymethod small { display: block; color: var(--muted); font-size: 13px; }
.secure-note { font-size: 12px; color: var(--muted); text-align: center; }

.mini-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mini-lines li { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.mini-lines img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.mini-lines small { display: block; color: var(--muted); font-size: 12px; }
.mini-lines em { font-style: normal; font-weight: 600; }
.mini-lines--big li { grid-template-columns: 72px 1fr auto; align-items: start; }
.mini-lines--big img { width: 72px; height: 72px; }

/* ---------- Order / account ---------- */
.order-layout, .account-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.order-main { display: grid; gap: 18px; }
.order-box { border-radius: 24px; padding: 24px; }
.order-box h2 { font-weight: 400; font-size: 22px; margin-bottom: 14px; }
.order-side p { margin-top: 14px; font-size: 14px; line-height: 1.6; }
.timeline { list-style: none; margin: 0; padding: 22px 24px; border-radius: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.timeline li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; top: 9px; left: -50%; right: 50%; height: 2px; background: rgba(20,41,58,.12); }
.timeline li:first-child::before { display: none; }
.timeline li.is-done::before { background: var(--sky-deep); }
.timeline__dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid rgba(20,41,58,.2); }
.timeline li.is-done { color: var(--ink); }
.timeline li.is-done .timeline__dot { background: var(--sky-deep); border-color: var(--sky-deep); }
.timeline li.is-current .timeline__dot { box-shadow: 0 0 0 6px rgba(47,134,192,.2); }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order-list a { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.6); font-size: 14px; transition: background .2s; }
.order-list a:hover { background: #fff; }
.order-list em { font-style: normal; font-weight: 600; }
.status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgba(20,41,58,.08); justify-self: start; }
.status--new { background: rgba(140,203,239,.35); }
.status--crafting { background: rgba(244,194,13,.3); }
.status--dispatched { background: rgba(47,134,192,.2); }
.status--delivered { background: rgba(46,157,91,.2); }
.status--cancelled, .status--awaiting_payment { background: rgba(216,38,27,.14); }
.signout { max-width: var(--max); margin: 24px auto 0; }

/* Forms on simple pages */
.form-card { max-width: 480px; margin: 0 auto; border-radius: 28px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 4px; }
.form-card--wide { max-width: none; margin: 0; }
.form-card__links { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }
.form-card__links a { color: var(--sky-deep); text-decoration: underline; }
.form-card .btn-metal { margin-top: 6px; }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.contact-side h2 { font-weight: 400; font-size: 22px; margin-bottom: 8px; }
.contact-side p { margin-top: 12px; font-size: 15px; }
.contact-side a:not(.btn-metal) { color: var(--sky-deep); }

/* Prose (policies) and FAQ */
.prose { border-radius: 28px; padding: clamp(24px, 4vw, 48px); max-width: 820px; }
.prose h2 { font-weight: 400; font-size: 22px; margin: 26px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: #2a3d4d; }
.prose a { color: var(--sky-deep); }
.faq { display: grid; gap: 10px; margin-bottom: 20px; }
.faq details { border-radius: 16px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); padding: 0 18px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--sky-deep); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 16px; color: var(--muted); }

.notfound { min-height: 55vh; display: grid; align-content: center; }
.notfound .btn-metal { margin: 24px 16px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .products--shop { grid-template-columns: repeat(2, 1fr); }
  .pdp__grid, .checkout, .order-layout, .account-grid, .contact-grid { grid-template-columns: 1fr; }
  .gallery, .checkout__side { position: static; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .shop-bar { border-radius: 20px; }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .fchip { white-space: nowrap; }
  .shop-bar__tools { width: 100%; }
  .search-field { flex: 1; }
  .search-field input { width: 100%; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .timeline li:nth-child(3)::before { display: none; }
  .order-list a { grid-template-columns: 1fr auto; }
  .cart-page .cart-line { grid-template-columns: 80px 1fr; }
  .buybox__actions .qty { flex: 0 0 auto; }
  .products--shop .product__info { gap: 10px; }
}

/* Test mode */
.testbar { text-align: center; font-size: 13px; padding: 8px 16px; background: #14293a; color: #fbf6ec; }
.testbar b { color: #f4c20d; font-weight: 600; margin-right: 4px; }
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate .form-card { width: 100%; }
.gate__logo { display: flex; align-items: center; font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.gate__logo .logo__dots { display: inline-flex; gap: 3px; margin-right: 10px; }
.gate__logo .logo__dots i { width: 6px; height: 6px; border-radius: 50%; }
.gate__logo .logo__dots i:nth-child(1) { background: var(--pop-red); }
.gate__logo .logo__dots i:nth-child(2) { background: var(--pop-yellow); }
.gate__logo .logo__dots i:nth-child(3) { background: var(--pop-blue); }
.gate__logo .logo__tld { color: var(--muted); font-weight: 300; }
.gate__title { font-weight: 300; font-size: 34px; letter-spacing: -.03em; }

/* =========================================================
   SOLID SURFACES (glassmorphism removed)
   Same sky-blue & cream palette, but flat, opaque panels:
   no frosted blur, no see-through layers, no colour blobs.
   ========================================================= */
:root {
  --glass-bg: #ffffff;
  --glass-border: 1px solid var(--line);
  --glass-shadow: 0 10px 30px -18px rgba(20,41,58,.22);
  --glass-blur: none;
}
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.aura { display: none !important; }

/* Page bands: solid colours */
.section--tint { background: var(--tint); }
.section--tint > .wave { color: var(--tint); }
.cta { background: #cfe8f7; }
.wave--cta { color: #cfe8f7 !important; }
.footer { background: var(--cream-deep); }
.wave--footer { color: var(--cream-deep); }

/* Panels & cards */
.nav { background: #fff; }
.nav__links { background: #fff; }
.hero__visual::before { background: var(--sky); }
.sticker { background: #fff; }
.sticker svg circle:first-of-type { fill: var(--bg); }
.cta__panel { background: #fff; }
.step, .step:last-child { background: var(--bg); border: 1px solid var(--line); }
.subnav__link + .subnav__link, .why__item + .why__item { border-left-color: var(--line); }
.chip, .chip:nth-child(3n+2) { background: #fff; border: 1px solid var(--line); }
.collection__meta { background: #fff; border: 0; }
.toast { background: var(--ink); border: 0; }
@media (max-width: 1000px) { .why__item:nth-child(n+3) { border-top-color: var(--line); } }
@media (max-width: 800px) {
  .nav__links { background: #fff; border: 1px solid var(--line); }
  .why__item, .why__item + .why__item { border-top-color: var(--line); }
}

/* Buttons: solid fills, no frosted sheen */
.btn-metal { --fill: var(--sky-deep); background: var(--fill); border: 1px solid transparent; box-shadow: 0 8px 20px -12px rgba(29,101,153,.6); }
.btn-metal::before, .btn-metal::after { display: none; }
.btn-metal:hover { --fill: #25709f; }
.btn-metal--chrome { --fill: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 6px 16px -12px rgba(20,41,58,.35); }
.btn-metal--chrome:hover { --fill: var(--bg); }
.cta .btn-metal--brass { --fill: var(--ink); }
.btn-metal.is-added { --fill: var(--pop-red); }

/* Shop surfaces */
.announce { background: var(--tint); }
.drawer__scrim { background: rgba(20,41,58,.35); }
.drawer__panel { background: var(--bg); border: 1px solid var(--line); }
.fchip:hover { background: #fff; }
.cart-line, .faq details, .freeship, .order-list a, .paymethod, .qty, .upload { background: #fff; border-color: var(--line); }
.cart-line, .faq details { border: 1px solid var(--line); }
.freeship__bar span, .progress span { background: var(--sky-deep); }

/* Uploaded logo image (Admin → Advanced → Logo) */
.logo--image { line-height: 0; }
.logo__img { display: block; width: auto; max-width: min(260px, 55vw); object-fit: contain; }
.footer .logo--image .logo__img { max-width: 240px; }
.gate__logo .logo__img { margin: 0 auto; max-width: 220px; }
/* image + "momento.gift" words: the image sits where the three dots were */
.logo--mark { gap: 10px; }
.logo__img--mark { max-width: 96px; flex: none; }
.gate__logo .logo__img--mark { margin: 0; }
.gate__logo:has(.logo__img--mark) { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 800px) { .nav .logo__img { max-height: 40px; } }

/* Entry animation when the site loads: the image pops in with a little turn, then the letters rise as before */
.nav .logo__img { animation: logoMarkIn .85s cubic-bezier(.3, 1.45, .5, 1) .1s both; transform-origin: 50% 60%; }
.nav .logo--image .logo__img { animation-name: logoImageIn; animation-duration: 1s; }
.nav .logo--mark:hover .logo__img { animation: logoMarkHop .6s ease both; }
@keyframes logoMarkIn {
  0%   { opacity: 0; transform: scale(.35) rotate(-24deg); filter: blur(3px); }
  55%  { opacity: 1; transform: scale(1.12) rotate(6deg); filter: blur(0); }
  78%  { transform: scale(.96) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes logoImageIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.9); clip-path: inset(0 100% 0 0); }
  60%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes logoMarkHop { 40% { transform: translateY(-3px) rotate(-6deg); } 100% { transform: none; } }

/* Menu button: three lines that turn into a cross when the menu is open */
.nav__toggle { height: 16px; }
.nav__toggle span { border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; transform-origin: 50% 50%; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

/* ---------- Pastel palette (soft versions of the site's sky / yellow / red / blue) ---------- */
:root { --pastel-sky: #a9d6f2; --pastel-butter: #f6da8e; --pastel-blush: #f4b1a8; --pastel-peri: #bcc8f0; }

/* Carousel & occasion chips: dots cycle through the pastels */
.occasions__row .chip__dot, .occasion-filter .chip__dot { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px rgba(20,41,58,.08); }
.occasions__row .chip:nth-child(4n+1) .chip__dot, .occasion-filter .chip:nth-child(4n+2) .chip__dot { background: var(--pastel-sky); }
.occasions__row .chip:nth-child(4n+2) .chip__dot, .occasion-filter .chip:nth-child(4n+3) .chip__dot { background: var(--pastel-butter); }
.occasions__row .chip:nth-child(4n+3) .chip__dot, .occasion-filter .chip:nth-child(4n+4) .chip__dot { background: var(--pastel-blush); }
.occasions__row .chip:nth-child(4n+4) .chip__dot, .occasion-filter .chip:nth-child(4n+5) .chip__dot { background: var(--pastel-peri); }

/* ---------- "Beautifully made / Gift ready / …" highlighted as a soft sky panel ---------- */
.why {
  max-width: calc(var(--wrap) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(16px, 2.4vw, 26px) !important; gap: clamp(10px, 1.4vw, 16px);
  background: linear-gradient(135deg, #e3f1fb 0%, #eef7fd 55%, #fbf4e3 100%) !important;
  border: 1px solid #cfe5f4 !important; border-radius: 28px;
  box-shadow: 0 18px 40px -28px rgba(47,134,192,.45) !important;
}
.why__item, .why__item + .why__item, .why__item:nth-child(n+3), .why__item:first-child {
  background: #fff; border: 1px solid rgba(47,134,192,.12) !important; border-radius: 18px;
  padding: 22px 20px !important; display: grid; align-content: start; gap: 4px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.why__item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -18px rgba(20,41,58,.35); }
.why__item h3 { font-size: 16px; font-weight: 600; margin: 10px 0 2px; }
.why__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); }
.why__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.why__icon--sky { background: var(--pastel-sky); }
.why__icon--butter { background: var(--pastel-butter); }
.why__icon--blush { background: var(--pastel-blush); }
.why__icon--peri { background: var(--pastel-peri); }
@media (max-width: 1000px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } .why__item, .why__item + .why__item { padding: 18px !important; } }

/* Hero video */
.hero__video { background: #e9e3d6; }

/* ---------- Floating WhatsApp chat button (pastel mint, matches the site's pastels) ---------- */
:root { --pastel-mint: #bfe8d4; --pastel-mint-deep: #9fdcbf; }
.wa { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90; display: grid; justify-items: end; gap: 10px; pointer-events: none; }
.wa > * { pointer-events: auto; }
.wa__btn {
  display: inline-flex; align-items: center; gap: 0; height: 58px; padding: 0 7px; border-radius: 999px;
  background: linear-gradient(145deg, #d3f1e2, var(--pastel-mint) 55%, var(--pastel-mint-deep));
  color: var(--ink); text-decoration: none; border: 3px solid #fff;
  box-shadow: 0 12px 28px -12px rgba(35, 110, 80, .45), 0 2px 6px rgba(20, 41, 58, .08);
  animation: waIn .7s cubic-bezier(.3, 1.5, .5, 1) 1.2s both;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), gap .3s var(--ease);
}
.wa__btn::after { /* soft "breathing" ring */
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(159, 220, 191, .55); animation: waRing 3.2s ease-out 2.5s infinite;
}
.wa__btn { position: relative; }
.wa__btn:hover, .wa__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(35, 110, 80, .55), 0 2px 6px rgba(20, 41, 58, .08); gap: 8px; }
.wa__icon { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.wa__icon svg { width: 24px; height: 24px; }
.wa__icon--img { background: none; width: 44px; height: 44px; }
.wa__icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wa__bubble-shape { fill: none; stroke: #2f8a63; stroke-width: 1.8; stroke-linejoin: round; }
.wa__heart { fill: #e7837a; }
.wa__btn:hover .wa__heart { animation: waBeat .8s ease; transform-origin: 16px 16px; }
@keyframes waBeat { 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }
.wa__btn:hover .wa__icon svg { animation: waWiggle .6s ease; }
.wa__label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 500; transition: max-width .35s var(--ease), padding .35s var(--ease); }
.wa__btn:hover .wa__label, .wa__btn:focus-visible .wa__label { max-width: 140px; padding-right: 12px; }
.wa__bubble {
  position: relative; max-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 18px 18px 6px 18px;
  padding: 12px 34px 12px 14px; font-size: 14px; line-height: 1.45; box-shadow: 0 14px 30px -18px rgba(20, 41, 58, .45);
  animation: waBubble .45s cubic-bezier(.3, 1.4, .5, 1) both;
}
.wa__bubble a { color: var(--ink); text-decoration: none; }
.wa__bubble::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--pastel-mint-deep); }
.wa__close { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%; }
.wa__close:hover { background: var(--bg); color: var(--ink); }
.no-scroll .wa { display: none; }   /* hidden while the cart drawer / menu is open */
@keyframes waIn { 0% { opacity: 0; transform: translateY(24px) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes waRing { 0% { box-shadow: 0 0 0 0 rgba(159, 220, 191, .6); } 70%, 100% { box-shadow: 0 0 0 14px rgba(159, 220, 191, 0); } }
@keyframes waWiggle { 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes waBubble { from { opacity: 0; transform: translateY(8px) scale(.95); transform-origin: 100% 100%; } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .wa { right: 14px; bottom: 14px; }
  .wa__btn { height: 54px; padding: 0 5px; }
  .wa__bubble { max-width: 210px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .wa__btn, .wa__btn::after, .wa__bubble { animation: none !important; } }
@media print { .wa { display: none; } }

/* ---------- Live order tracking (order page + My account) ---------- */
.timeline--steps { grid-template-columns: repeat(var(--steps, 5), minmax(64px, 1fr)); padding: 4px 0 2px; border-radius: 0; overflow-x: auto; }
.order-progress { display: grid; gap: 16px; }
.order-progress__desc { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; }
.order-progress__desc .status { margin-right: 6px; }
.status--c-sky { background: rgba(140,203,239,.38); } .status--c-mint { background: rgba(191,232,212,.85); }
.status--c-butter { background: rgba(246,218,142,.6); } .status--c-peri { background: rgba(188,200,240,.6); }
.status--c-blush { background: rgba(244,177,168,.5); } .status--c-grey { background: rgba(20,41,58,.1); }
.live-note--blush { border-left: 4px solid #e3867a; } .live-note--peri { border-left: 4px solid #8f9fdc; }
.live-note--mint { border-left: 4px solid #6cbf98; } .live-note--sky { border-left: 4px solid var(--sky-deep); }
.live-note--butter { border-left: 4px solid #e2b93f; } .live-note--grey { border-left: 4px solid #9aa6b2; }
.timeline__when { font-size: 11px; color: var(--muted); margin-top: -4px; }
.timeline li.is-current > span:not(.timeline__dot) { font-weight: 600; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 -4px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--muted); justify-self: start; }
.live-pill[hidden] { display: none; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: #2e9d5b; box-shadow: 0 0 0 0 rgba(46,157,91,.5); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(46,157,91,.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(46,157,91,0); } }
.order-live { display: grid; gap: 18px; }
.order-live.is-updated > * { animation: liveFlash 1.4s var(--ease); }
@keyframes liveFlash { 0% { box-shadow: 0 0 0 3px rgba(47,134,192,.45); } 100% { box-shadow: 0 0 0 0 rgba(47,134,192,0); } }
.ship-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; margin: 0 0 18px; }
.ship-card__facts dt { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.ship-card__facts dd { margin: 0; font-size: 15px; word-break: break-word; }
.ship-card__copy { font-size: 12px; margin-left: 6px; color: var(--sky-deep); }
.updates { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 16px; }
.updates::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.updates__item { position: relative; display: grid; gap: 2px; font-size: 14px; }
.updates__item::before { content: ""; position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.updates__item--step::before { border-color: var(--sky-deep); }
.updates__item.is-latest::before { background: var(--sky-deep); border-color: var(--sky-deep); box-shadow: 0 0 0 4px rgba(47,134,192,.18); }
.updates__item[hidden] { display: none; }
.updates__item time { font-size: 12px; color: var(--muted); }
.updates__item p { margin: 0; line-height: 1.45; }
.updates__where { color: var(--muted); }
.status--packed { background: rgba(169,214,242,.5); }
.status--out_for_delivery { background: rgba(191,232,212,.8); }
.status--returned { background: rgba(244,177,168,.45); }
.status--exchanged { background: rgba(188,200,240,.55); }
.status.is-updated { animation: liveFlash 1.4s var(--ease); }
@media (max-width: 800px) {
  .timeline--steps { grid-template-columns: repeat(var(--steps, 5), minmax(60px, 1fr)); }
  .timeline--steps li { font-size: 11px; }
  .timeline--steps li:nth-child(3)::before { display: block; }
}
@media (prefers-reduced-motion: reduce) { .live-pill i, .order-live.is-updated > *, .status.is-updated { animation: none; } }

/* ---------- Google Maps location picker ---------- */
.map-pick { margin: 0 0 14px; }
.map-pick__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px dashed var(--sky-deep); background: var(--tint); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background .2s; }
.map-pick__btn:hover { background: #d3e9f7; }
.map-pick__status { margin: 8px 0 0; font-size: 13px; color: #2e7d55; }
.map-pick__status[hidden] { display: none; }
.map-modal { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(20,41,58,.45); overflow: hidden; }
.map-modal[open] { display: flex; flex-direction: column; }
.map-modal::backdrop { background: rgba(20,41,58,.45); }
.map-modal__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 8px; }
.map-modal__head h2 { margin: 0; font-weight: 400; font-size: 20px; }
.map-modal__x { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); width: 40px; height: 40px; border-radius: 50%; }
.map-modal__x:hover { background: #fff; color: var(--ink); }
.map-modal__search { padding: 0 20px 10px; }
.map-modal__search gmp-place-autocomplete, .map-modal__input { width: 100%; }
.map-modal__input { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); font: inherit; background: #fff; }
.map-modal__map { position: relative; height: min(52vh, 420px); background: var(--cream-deep); }
.map-modal__canvas { position: absolute; inset: 0; }
.map-modal__pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -30px 0 0 -15px; pointer-events: none; z-index: 2;
  background: var(--pop-red); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 6px 14px -4px rgba(0,0,0,.45); }
.map-modal__pin::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.map-modal__locate { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 4px 12px -6px rgba(20,41,58,.4); }
.map-modal__hint { margin: 10px 20px 0; font-size: 12px; color: var(--muted); }
.map-modal__addr { margin: 4px 20px 0; min-height: 1.4em; font-size: 14px; }
.map-modal [data-map-error] { margin: 8px 20px 0; }
.map-modal [data-map-error][hidden] { display: none; }
.map-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; }
.map-modal__foot .btn-metal[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) {
  .map-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .map-modal__map { flex: 1; height: auto; min-height: 260px; }
  .map-modal__foot .btn-metal { flex: 1; }
}

/* ---------- Sign-in: password / one-time code / Google ---------- */
.signin { gap: 10px; }
.signin__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: 999px; background: var(--cream-deep); }
.signin__tabs a { text-align: center; padding: 9px 10px; border-radius: 999px; font-size: 14px; color: var(--muted); text-decoration: none; transition: background .2s, color .2s; }
.signin__tabs a.is-on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 2px 8px -4px rgba(20,41,58,.3); }
.signin__lede { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.signin__code { font-size: 24px; letter-spacing: 10px; text-align: center; }
.signin__test { background: #fff8e1; border: 1px dashed #e6cf7a; color: var(--ink); }
.signin__resend { margin: 4px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.signin__resend button[disabled] { opacity: .55; cursor: default; }
.signin__or { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: var(--muted); font-size: 13px; }
.signin__or::before, .signin__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.g-signin { display: flex; justify-content: center; min-height: 44px; }
.g-signin__error[hidden] { display: none; }

/* ---------- Newsletter ---------- */
.newsletter { margin-top: 18px; max-width: 380px; }
.newsletter__title { margin: 0 0 4px !important; font-size: 15px !important; color: var(--ink) !important; font-weight: 600; }
.newsletter__lede { margin: 0 0 10px !important; font-size: 13px !important; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter__row input[type=email] { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; }
.newsletter__row .btn-metal { padding: 0 18px; white-space: nowrap; }
.newsletter__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.newsletter__msg { margin: 8px 0 0 !important; font-size: 13px !important; }
.newsletter__msg[hidden] { display: none; }
.newsletter__msg.is-ok { color: #2e7d55 !important; } .newsletter__msg.is-error { color: var(--pop-red) !important; }
.newsletter-opt { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 10px; font-size: 14px; }
.newsletter-opt input { margin-top: 3px; }
.updates__note { margin: 4px 0 0 !important; padding: 8px 12px; border-radius: 12px; background: var(--tint); font-size: 13px; line-height: 1.5; }

.testbar--admin { background: #fdf1c7; color: #14293a; }
.testbar--admin b { color: #14293a; }
.testbar--admin a { color: #14293a; text-decoration: underline; }
.paymethod__note { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #fdf6dd; color: #4a3d12; font-size: 13px; line-height: 1.45; }
.paymethod:not(:has(input:checked)) .paymethod__note { display: none; }
.totals .is-advance { padding-top: 8px; border-top: 1px dashed var(--line); font-weight: 600; color: var(--sky-deep); }
.totals .is-balance { color: var(--muted); }
/* Notify me (sold-out pieces) */
.notify-me { margin-top: 16px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.notify-me__title { margin: 0 0 4px; font-weight: 600; }
.notify-me__text { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.notify-me__row { display: flex; flex-wrap: wrap; gap: 10px; }
.notify-me__row input[type=email] { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--line); font: inherit; background: #fff; }
.stock-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.stock-toggle input { width: 18px; height: 18px; accent-color: var(--sky-deep); }
.footer__disclaimer { max-width: 900px; margin: 28px auto 0; padding: 0 var(--gutter); font-size: 12px; line-height: 1.6; color: inherit; opacity: .65; text-align: center; }
.brand-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* What makes our 3D car frames special */
.special { margin: 8px 0 28px; padding: 26px clamp(18px, 4vw, 36px); border-radius: var(--radius); background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); }
.special__title { font-weight: 300; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; margin: 0 0 20px; text-wrap: balance; }
.special__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.special__item h3 { margin: 10px 0 4px; font-size: 16px; font-weight: 600; }
.special__item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.special__icon { width: 40px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.special__icon--red { color: var(--pop-red); } .special__icon--yellow { color: #c79a00; } .special__icon--blue { color: var(--pop-blue); }
.section--special { padding-top: 0; }
@media (max-width: 720px) { .special__list { grid-template-columns: 1fr; gap: 18px; } }

/* Price and type filters, visible "Sort by" */
.refine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: -14px 0 26px; }
.refine .refine__row { margin-bottom: 0; }
.chip--plain.is-on, .occasion-filter .chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.refine__clear { font-size: 13px; color: var(--sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.select-field--labelled { gap: 8px; }
.select-field__label { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Wishlist hearts */
.product { position: relative; }
.wish { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; color: var(--ink); }
.wish svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s var(--ease), fill .2s; }
.wish.is-on svg { fill: var(--pop-red); stroke: var(--pop-red); }
.wish:active svg { transform: scale(.85); }
.wish:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.wish--card { position: absolute; top: 20px; right: 20px; z-index: 3; width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.88); box-shadow: 0 4px 14px -6px rgba(20,41,58,.35); }
.wish--card:hover svg { transform: scale(1.1); }
.wish--page { padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
.buybox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.buybox__head .buybox__title { margin-bottom: 0; }
.wishlist__signin { margin-top: 22px; }
/* Recently viewed */
.recent-strip { margin-top: 48px; }
.recent-strip__title { font-weight: 300; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.02em; margin: 0 0 16px; }
.products--recent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .products--recent { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.checkout__remind-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }