/* =========================================================
   Upharna — storefront styles
   Breakpoints: ≤480 phone · ≤768 large phone / small tablet
                ≤1024 tablet / small laptop · ≥1280 desktop
   ========================================================= */

:root {
  --orange: #C35D29;        /* brand orange: large text, bands */
  --orange-deep: #A3481C;   /* buttons + small orange text (readable) */
  --orange-dark: #7E3713;
  --cream: #FBF6EC;         /* brand cream */
  --cream-2: #F5ECDC;
  --cream-3: #F1E4CE;
  --paper: #FFFCF6;
  --ink: #2B1A12;
  --ink-2: #5A3E2E;
  --muted: #6B4A38;
  --line: #E6D6BD;
  --line-2: #CDB797;
  --green: #24504C;
  --green-bg: #E3EDE9;
  --wa: #1E6B3D;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: Arial, 'Arial MT', Helvetica, sans-serif;
  --max: 1280px;
  --gutter: clamp(16px, 3vw, 24px);
  --section: clamp(56px, 8vw, 96px);
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
img, svg { max-width: 100%; display: block; }
a { color: var(--orange-deep); }
a:hover { color: var(--orange-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 760px; }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--tint { background: var(--cream-2); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--orange { background: var(--orange); color: var(--cream); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap, 16px); align-items: center; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 56px); align-items: center; }
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.between { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.grid { display: grid; gap: var(--gap, 24px); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); --cols: 4; }
.cols-2 { --cols: 2; } .cols-3 { --cols: 3; } .cols-4 { --cols: 4; } .cols-6 { --cols: 6; }
.center { text-align: center; align-items: center; }

/* ---------- type ---------- */
.kicker { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-deep); }
.section--dark .kicker { color: #E9A47E; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.05; }
.h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.02; }
.h2 { font-size: clamp(30px, 4vw, 52px); }
.h3 { font-size: clamp(22px, 2.2vw, 30px); }
.lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--ink-2); margin: 0; }
.italic-orange { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); color: var(--orange); margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
p { margin: 0; }
.prose p + p { margin-top: 16px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; border: 1px solid var(--orange-deep); border-radius: var(--radius); background: var(--orange-deep); color: var(--cream); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--orange-deep); }
.btn--ghost:hover { background: var(--orange-deep); color: var(--cream); }
.btn--light { background: transparent; color: var(--cream); border-color: #E6D6BD; }
.btn--light:hover { background: var(--cream); color: var(--ink); }
.btn--block { width: 100%; }
.btn--wa { background: #fff; color: var(--wa); border-color: #2E7D4F; }
.btn--wa:hover { background: #2E7D4F; color: #fff; }
.link-caps { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: 13px; color: var(--ink-2); }
.input, .select, .textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--radius); padding: 0 14px; font-size: 16px; }
.textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.check input { width: 18px; height: 18px; accent-color: var(--orange-deep); margin-top: 2px; flex: none; }
.phone-input { display: flex; align-items: center; border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--radius); min-height: 48px; }
.phone-input span { padding: 0 12px; border-right: 1px solid var(--line); color: var(--ink-2); align-self: stretch; display: flex; align-items: center; }
.phone-input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 12px; min-height: 46px; font-size: 16px; }
.choice { text-align: left; padding: 14px 16px; border: 1px solid var(--line-2); background: transparent; border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; }
.choice[aria-pressed="true"] { border-color: var(--orange-deep); background: #FFF6EC; }
.choice small { color: var(--muted); font-size: 13px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

/* ---------- announcement + header ---------- */
.announce { background: var(--orange-deep); color: var(--cream); text-align: center; font-size: 13px; letter-spacing: .06em; padding: 9px var(--gutter); }
.site-header { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; min-height: 76px; }
.logo img { height: 54px; width: auto; }
.nav { display: flex; gap: 4px 24px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.nav a { color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--orange); }
.icons { display: flex; align-items: center; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); text-decoration: none; }
.bag-count { background: var(--orange-deep); color: var(--cream); border-radius: 999px; min-width: 20px; height: 20px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; margin-left: 2px; }
.menu-btn { display: none; }
.mobile-nav { display: none; border-top: 1px solid var(--line); padding: 8px var(--gutter) 20px; background: var(--cream); }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid #EFE3CF; color: var(--ink); text-decoration: none; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.mobile-nav a::after { content: '→'; color: var(--orange-deep); }
.mobile-nav .btn { margin-top: 16px; width: 100%; }
.mobile-nav .btn::after { content: none; }
.site-header.open .mobile-nav { display: block; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #F3E9D7; padding: clamp(48px, 7vw, 72px) 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 36px; }
.footer-top img { width: 180px; height: auto; }
.footer-top p { color: #D9C8AE; font-size: 14px; line-height: 1.6; margin-top: 16px; max-width: 320px; }
.footer-col h4 { margin: 0 0 10px; font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #E9A47E; }
.footer-col a { display: flex; align-items: center; min-height: 34px; color: #F3E9D7; text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid #4A3226; margin-top: 44px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: #CDBBA0; }
.footer-bottom a { color: #CDBBA0; margin-right: 16px; }

/* ---------- media ---------- */
.media { width: 100%; object-fit: cover; object-position: center bottom; border-radius: var(--radius); background: var(--cream-3); }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-1 { aspect-ratio: 1 / 1; }
.ratio-hero { aspect-ratio: 15 / 14; max-height: 600px; }
.ratio-wide { aspect-ratio: 16 / 9; }

/* ---------- cards ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.card__body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.card__link { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); }
.tile { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 12px; }
.tile__name { font-family: var(--serif); font-size: 24px; }

/* product card */
.product { display: flex; flex-direction: column; gap: 12px; }
.product__img { position: relative; display: block; }
.badge { position: absolute; top: 12px; left: 12px; background: var(--cream); color: var(--orange-deep); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; }
.product__tag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.product__name { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.15; color: var(--ink); text-decoration: none; }
.price { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.price s { color: #8A6E5C; font-size: 13px; }
.add-btn { min-height: 46px; border: 1px solid var(--orange-deep); background: transparent; color: var(--orange-deep); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--radius); }
.add-btn[aria-pressed="true"] { background: var(--orange-deep); color: var(--cream); }

/* chips */
.chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip { flex: none; white-space: nowrap; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-size: 14px; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---------- home ---------- */
.hero { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }
.marquee-wrap { overflow: hidden; }
.marquee { display: flex; width: max-content; gap: clamp(48px, 8vw, 96px); align-items: center; animation: marquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - clamp(24px, 4vw, 48px))); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.client { display: flex; align-items: center; gap: 12px; color: var(--muted); flex: none; }
.client__mark { width: 38px; height: 38px; border: 2px solid #8A6E5C; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.client__word { font-weight: 700; letter-spacing: .14em; font-size: 18px; white-space: nowrap; }
.review { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.review blockquote { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.35; }
.review figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; border-top: 1px solid #EFE3CF; padding-top: 16px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--cream-3); color: var(--orange-deep); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; flex: none; }
.stars { color: var(--orange); letter-spacing: 4px; }
.form-card { background: var(--cream); color: var(--ink); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); }
.dots li { display: flex; gap: 12px; align-items: center; }
.dots li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }
.dots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.section--dark .dots li::before { background: #E9A47E; }

/* ---------- page head ---------- */
.page-head { background: var(--cream-2); padding: clamp(32px, 5vw, 48px) 0 clamp(28px, 4vw, 40px); }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* ---------- shop ---------- */
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.sort { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; }
.sort button { min-height: 40px; padding: 0 12px; border: 0; background: transparent; }
.sort button[aria-pressed="true"] { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- product page ---------- */
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gallery-thumbs button { padding: 0; border: 2px solid transparent; background: none; border-radius: var(--radius); overflow: hidden; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--orange-deep); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); min-height: 50px; }
.qty button { width: 46px; height: 48px; border: 0; background: transparent; font-size: 20px; }
.qty span { min-width: 32px; text-align: center; }
.note-box { background: var(--cream-2); padding: 18px; border-radius: var(--radius); }
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { min-height: 56px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 15px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; color: var(--orange-deep); font-size: 20px; }
.accordion details[open] summary::after { content: '−'; }
.accordion .acc-body { padding: 0 0 20px; color: var(--ink-2); line-height: 1.7; font-size: 15px; }

/* ---------- cart / checkout ---------- */
.cart-item { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 140px; height: 175px; object-fit: cover; border-radius: var(--radius); }
.summary { background: var(--cream-2); padding: clamp(20px, 3vw, 28px); border-radius: var(--radius); display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; }
.summary .line { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.summary .total { border-top: 1px solid var(--line-2); padding-top: 14px; font-size: 16px; align-items: baseline; }
.summary .total strong { font-size: 24px; font-weight: 400; }
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 4vw, 48px); align-items: start; }
.pay-option { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 60px; padding: 0 18px; border: 1px solid var(--line-2); background: transparent; border-radius: var(--radius); width: 100%; }
.pay-option .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--orange-deep); display: flex; align-items: center; justify-content: center; flex: none; }
.pay-option[aria-pressed="true"] { border-color: var(--orange-deep); background: #FFF6EC; }
.pay-option[aria-pressed="true"] .radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-deep); }
.mini-item { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.mini-item img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--radius); flex: none; }

/* ---------- side-nav pages (account, policies) ---------- */
.side-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: start; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav button { text-align: left; min-height: 48px; padding: 0 16px; border: 0; border-left: 3px solid transparent; background: transparent; font-size: 15px; }
.side-nav button[aria-pressed="true"] { border-left-color: var(--orange); background: var(--cream-2); }
.panel[hidden] { display: none !important; }
.order { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.order__head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding: 20px; }
.order__head img { width: 72px; height: 72px; object-fit: cover; object-position: center bottom; border-radius: var(--radius); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: #F9E6DA; color: var(--orange-deep); }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--done { background: var(--green-bg); color: var(--green); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 14px; padding-bottom: 14px; position: relative; }
.timeline li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--paper); flex: none; margin-top: 3px; z-index: 1; }
.timeline li.done::before { background: var(--orange-deep); border-color: var(--orange-deep); }
.timeline li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.timeline li.done:not(:last-child)::after { background: var(--orange-deep); }
.policy-part { border-top: 1px solid var(--line); padding-top: 20px; }
.policy-part h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.policy-part p { line-height: 1.75; color: #3F2A1E; white-space: pre-line; }

/* ---------- vouchers ---------- */
.voucher { aspect-ratio: 1.6 / 1; width: 100%; max-width: 440px; border-radius: 10px; padding: clamp(18px, 3vw, 28px); color: #fff; display: flex; flex-direction: column; justify-content: space-between; background: var(--brand, var(--orange)); }
.voucher__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.voucher__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .14em; font-size: 15px; }
.voucher__mark { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.voucher__value { font-family: var(--serif); font-size: clamp(36px, 5vw, 48px); line-height: 1; }
.voucher__meta { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .08em; gap: 10px; }
.engrave { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(43,26,18,.78); color: #F3DFAF; border: 1px solid #C9A24A; border-radius: 2px; font-size: 11px; letter-spacing: .18em; white-space: nowrap; }
.gift-card { text-align: left; padding: 0; border: 2px solid var(--line); background: var(--paper); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.gift-card[aria-pressed="true"] { border-color: var(--orange-deep); }
.gift-card .media { aspect-ratio: 1 / 1; border-radius: 0; }
.gift-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.tag-free { position: absolute; top: 10px; left: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; background: #3F6E6A; color: #fff; }
.tag-up { position: absolute; top: 10px; left: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; background: var(--cream); color: var(--orange-deep); }
.sticky-bar { position: sticky; bottom: 0; background: var(--ink); color: var(--cream); z-index: 40; }
.sticky-bar .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.cobrand { border-top: 6px solid var(--brand, var(--orange)); }
.cobrand-badge { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--brand); color: #fff; border-radius: 2px; font-weight: 700; letter-spacing: .14em; font-size: 14px; }

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0; } .gap-s { --gap: 10px; } .gap-l { --gap: 32px; }
.hide { display: none !important; }
.toast { background: var(--green-bg); color: var(--green); padding: 12px 16px; border-radius: 4px; font-size: 14px; }


/* ---------- Laravel build additions ---------- */
.chip[aria-current="page"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.sort a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--ink); text-decoration: none; }
.sort a[aria-current="true"] { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 6px; }
.toast--error { background: #FBE7DD; color: #8A3412; }
.field-error { font-size: 13px; color: #8A3412; }
.link-btn { border: 0; background: none; color: var(--orange-deep); text-decoration: underline; min-height: 44px; padding: 0; cursor: pointer; font: inherit; }
.link-btn.small { min-height: 0; font-size: 13px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.search-bar { border-top: 1px solid var(--line); padding: 12px 0; background: var(--cream); }
.client__logo { height: 44px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .75; }
.client__logo:hover { filter: none; opacity: 1; }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.2); text-decoration: none; }
.wa-float:hover { color: #fff; background: #1EBE5A; }
.wa-float svg { width: 30px; height: 30px; }
.wa-float__label { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: #fff; color: var(--ink); font-size: 14px; letter-spacing: .04em; padding: 8px 14px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 28px 0; flex-wrap: wrap; }
.pager__btn { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.pager__btn.is-disabled { opacity: .4; }
.pager__info { font-size: 14px; color: var(--muted); }
.sticky-bar .btn { flex: none; }
form .add-btn { width: 100%; }
@media (max-width: 640px) { .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; } .wa-float__label { display: none; } }


/* ---------- homepage: signature collections (v3) ---------- */
.kicker--ornament { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; }
.kicker--ornament::before, .kicker--ornament::after { content: ''; width: clamp(28px, 6vw, 56px); height: 1px; background: currentColor; opacity: .55; }
.h2 .accent { font-style: italic; color: var(--orange); font-weight: 500; }
.collection { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.collection:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43, 26, 18, .10); color: var(--ink); }
.collection__media { position: relative; }
.collection__media .media { border-radius: 0; transition: transform .5s ease; }
.collection__media { overflow: hidden; }
.collection:hover .collection__media .media { transform: scale(1.04); }
.ribbon-tag { position: absolute; left: 0; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 16px; background: var(--orange-deep); color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); padding-right: 26px; box-shadow: 0 4px 12px rgba(43, 26, 18, .18); }
.ribbon-tag span { color: #F3C9A6; font-size: 13px; letter-spacing: 0; }
.collection__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 30px); }
.collection__title { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; color: var(--ink); }
.collection__text { color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.collection__link { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-deep); }
.collection__link .arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--orange-deep); font-size: 16px; letter-spacing: 0; transition: background .2s, color .2s, transform .2s; }
.collection:hover .collection__link .arrow { background: var(--orange-deep); color: var(--cream); transform: translateX(4px); }
.tile__soon { color: var(--orange-deep); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .collection, .collection__media .media, .collection__link .arrow { transition: none; } }


/* ---------- voucher store bag (v5) ---------- */
.gift-card { transition: border-color .2s, box-shadow .2s; }
.gift-card:hover { box-shadow: 0 10px 24px rgba(43, 26, 18, .08); }
.gift-card .add-btn { width: 100%; }
.voucher-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--brand, var(--orange-deep)); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }


/* ---------- corporate enquiry form (v6) ---------- */
.enquiry-title { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 40px); color: var(--orange-deep); margin-bottom: 18px; line-height: 1.1; }
.req { color: #B3261E; }
.enquiry-form .field label { font-weight: 700; color: var(--ink-2); }
.enquiry-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.enquiry-actions .btn { flex: 1 1 200px; }
.enquiry-actions .btn--wa svg { flex: none; }





/* ---------- for business page (v7) ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 16px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 2px 16px; align-items: start; }
.steps li::before { content: counter(step); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--orange-deep); color: var(--cream); font-family: var(--serif); font-size: 22px; display: flex; align-items: center; justify-content: center; }
.steps strong { font-size: 17px; }
.steps span { color: var(--muted); line-height: 1.6; }
.budgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); }
.budgets > div { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; }
.budgets > div + div { border-left: 1px solid var(--line); }
.budgets strong { font-family: var(--serif); font-size: 28px; font-weight: 500; }
.budgets__hi { background: #FFF6EC; }
@media (max-width: 760px) { .budgets { grid-template-columns: 1fr; } .budgets > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- company portal (v7) ---------- */
.portal-nav { background: var(--cream-2); border-bottom: 1px solid var(--line); }
.portal-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 56px; }
.portal-nav__links { display: flex; gap: 4px; overflow-x: auto; }
.portal-nav__links a, .portal-nav__links button { white-space: nowrap; padding: 10px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; }
.portal-nav__links a[aria-current="page"] { background: var(--ink); color: var(--cream); }
.portal-company { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .08em; font-size: 13px; }
.portal-company img { height: 28px; width: auto; }
.auth-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(22px, 3vw, 36px); }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat-box { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; }
.stat-box strong { display: block; font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); font-weight: 500; line-height: 1.1; }
.stat-box span { font-size: 13px; color: var(--muted); }
.batch { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--brand, var(--orange-deep)); border-radius: 4px; padding: 18px 20px; text-decoration: none; color: var(--ink); }
.batch:hover { color: var(--ink); box-shadow: 0 8px 20px rgba(43,26,18,.07); }
.batch__name { font-family: var(--serif); font-size: 24px; }
.progress { height: 8px; border-radius: 999px; background: var(--cream-3); overflow: hidden; grid-column: 1 / -1; }
.progress span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.pill { display: inline-block; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--cream-3); color: var(--ink-2); white-space: nowrap; }
.pill--ok { background: var(--green-bg); color: var(--green); }
.pill--wait { background: #FBE7DD; color: #8A3412; }
.value-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.value-picks button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-size: 15px; cursor: pointer; }
.value-picks button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.total-box { background: var(--ink); color: var(--cream); border-radius: 4px; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.total-box strong { font-family: var(--serif); font-size: 34px; font-weight: 500; }
.code-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); }
.code-table th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.code-table td { padding: 12px 14px; border-bottom: 1px solid #F0E6D6; font-size: 15px; }
.code-table code { font-size: 15px; letter-spacing: .08em; font-weight: 700; }
.table-wrap { overflow-x: auto; }
@media (max-width: 640px) { .stat-row { grid-template-columns: 1fr 1fr; } .stat-row .stat-box:last-child { grid-column: 1 / -1; } .batch { grid-template-columns: 1fr; } }




/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .logo img { height: 46px; }
}
@media (max-width: 1024px) {
  .cols-6 { --cols: 3; }
  .cols-4 { --cols: 3; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .split--wide-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .side-layout { grid-template-columns: minmax(0, 1fr); }
  .side-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .side-nav button { flex: none; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; min-height: 44px; }
  .side-nav button[aria-pressed="true"] { border-left: 0; border-bottom-color: var(--orange); }
  .cols-4 { --cols: 2; }
  .cols-3 { --cols: 2; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-item { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .cart-item img { width: 96px; height: 120px; }
  .cart-item .line-price { grid-column: 2; text-align: left !important; }
  .footer-top { grid-template-columns: 1fr; }
  .announce { font-size: 12px; }
  .btn { padding: 0 20px; }
  .btn-row .btn { flex: 1 1 auto; }
  .cols-6 { --cols: 2; --gap: 14px; }
  .cols-3, .cols-2 { --cols: 1; }
  .icon-btn.hide-sm { display: none; }
}
@media (max-width: 359px) {
  .cols-4 { --cols: 1; }
}
@media (max-width: 400px) {
  .logo img { height: 40px; }
}
@media (min-width: 1600px) {
  :root { --max: 1400px; }
}

/* =========================================================
   Header v9 — two rows: [company login | logo | icons] then the menu
   ========================================================= */
.announce { padding: 10px 0; font-size: 14px; }
.announce__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: center; gap: 12px 32px; flex-wrap: wrap; text-align: center; }
.announce__main { letter-spacing: .06em; }
.announce__main a { color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }
.announce__main a:hover, .announce__phone:hover { color: #fff; }
.announce__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); text-decoration: none; letter-spacing: .04em; padding-left: 32px; border-left: 1px solid rgba(251, 246, 236, .35); }
.announce__phone strong { font-weight: 700; letter-spacing: .06em; }

.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 96px; }
.bar__left { display: flex; align-items: center; gap: 8px; justify-self: start; }
.site-header .logo { justify-self: center; display: block; padding: 6px 0; }
.site-header .logo img { height: 68px; width: auto; }
.site-header .icons { justify-self: end; display: flex; align-items: center; gap: 6px; }
.icon-count { position: relative; }
.icon-count .bag-count { position: absolute; top: 2px; right: -2px; margin: 0; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
.company-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--orange-deep); border-radius: 999px; color: var(--orange-deep); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.company-link:hover { background: var(--orange-deep); color: var(--cream); }
.company-link svg { flex: none; }

.site-header .nav { display: block; border-top: 1px solid var(--line); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.nav__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(20px, 2.6vw, 48px); }
.site-header .nav a { display: inline-block; padding: 16px 0 14px; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-header .nav a:hover, .site-header .nav a[aria-current="page"] { border-bottom-color: var(--orange); color: var(--orange-deep); }

@media (max-width: 1180px) {
  .site-header .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .company-link { display: none; }
  .site-header .bar { min-height: 76px; }
  .site-header .logo img { height: 50px; }
}
@media (min-width: 1181px) { .menu-btn { display: none; } }
@media (max-width: 760px) {
  .announce { font-size: 13px; }
  .announce__phone { padding-left: 0; border-left: 0; }
  .announce__phone span { display: none; }
}
@media (max-width: 420px) {
  .site-header .logo img { height: 42px; }
  .site-header .icons { gap: 0; }
  .site-header .icon-btn { width: 40px; }
}

/* ---------- wishlist hearts (v9) ---------- */
.product__media { position: relative; }
.wish-form { margin: 0; }
.product__media .wish-form { position: absolute; top: 10px; right: 10px; }
.wish-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 252, 246, .92); color: var(--orange-deep); box-shadow: 0 2px 8px rgba(43, 26, 18, .12); cursor: pointer; transition: transform .15s; }
.wish-btn svg { fill: none; flex: none; }
.wish-btn[aria-pressed="true"] svg { fill: currentColor; }
.wish-btn:hover { transform: scale(1.08); }
.wish-form--big .wish-btn { width: 100%; height: auto; min-height: 48px; border-radius: var(--radius); border: 1px solid var(--line-2); background: transparent; box-shadow: none; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.wish-form--big .wish-btn:hover { transform: none; border-color: var(--orange-deep); }
.account-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.account-tabs a { padding: 12px 16px; white-space: nowrap; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.account-tabs a:hover { border-bottom-color: var(--orange); }

/* =========================================================
   v10 — OTP login, My Account, Corporate products, footer, Journal, FAQ
   ========================================================= */

/* ---------- login / OTP ---------- */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 96px); }
.auth-wrap .auth-card { max-width: 480px; width: 100%; justify-self: center; }
.auth-art { position: relative; overflow: hidden; border-radius: 4px; background: var(--cream-2); min-height: 520px; }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-art__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 32px; background: linear-gradient(transparent, rgba(43, 26, 18, .82)); color: var(--cream); }
.auth-art__text .kicker { color: #F2C3A3; }
.auth-art__text p { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin: 8px 0 0; }
.input--lg { min-height: 56px; font-size: 17px; }
.otp-input { min-height: 64px; text-align: center; font-family: var(--serif); font-size: 34px; letter-spacing: .5em; padding-left: .5em; }
.pw-login { border-top: 1px solid var(--line); padding-top: 14px; }
.pw-login summary { cursor: pointer; font-size: 14px; color: var(--orange-deep); min-height: 32px; display: flex; align-items: center; }
.narrow-auth { max-width: 520px; margin: 0 auto; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 96px); }

/* ---------- My Account ---------- */
.acct { background: var(--paper); border-top: 1px solid var(--line); }
.acct__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); align-items: start; }
.acct__side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.acct__me { display: flex; gap: 14px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.acct__nav { display: flex; flex-direction: column; }
.acct__nav a, .acct__nav button { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; width: 100%; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.acct__nav a:hover, .acct__nav button:hover { color: var(--orange-deep); }
.acct__nav a[aria-current="page"] { color: var(--orange-deep); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange-deep); padding-left: 14px; }
.acct__nav a span { font-size: 12px; letter-spacing: 0; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cream-2); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 400; }
.acct__nav form { margin: 0; }
.acct__help { background: var(--cream); border: 1px solid var(--line); padding: 16px; line-height: 1.7; }
.acct__main { min-width: 0; }
.acct-hero { padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.acct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acct-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; min-height: 170px; background: var(--cream); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.acct-card:hover { border-color: var(--orange-deep); transform: translateY(-2px); color: var(--ink); }
.acct-card strong { font-size: 26px; line-height: 1.1; font-weight: 500; margin-top: auto; }
.avatar-lg { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; background: var(--orange-deep); color: var(--cream); font-family: var(--serif); font-size: 30px; display: inline-flex; align-items: center; justify-content: center; }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xl { width: 112px; height: 112px; font-size: 48px; }
.avatar-picks { display: grid; grid-template-columns: repeat(6, minmax(0, 72px)); gap: 12px; }
.avatar-pick { position: relative; cursor: pointer; border-radius: 50%; }
.avatar-pick input { position: absolute; opacity: 0; inset: 0; }
.avatar-pick img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; transition: border-color .15s, transform .15s; }
.avatar-pick:hover img { transform: scale(1.05); }
.avatar-pick input:checked + img { border-color: var(--orange-deep); box-shadow: 0 0 0 3px var(--cream); }
.avatar-pick input:focus-visible + img { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
.steps-line { list-style: none; margin: 16px 0 0; padding: 0; display: flex; }
.steps-line li { flex: 1; position: relative; padding-top: 22px; font-size: 12px; color: var(--muted); text-align: center; }
.steps-line li::before { content: ''; position: absolute; top: 4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--line-2); z-index: 1; }
.steps-line li::after { content: ''; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.steps-line li:first-child::after { display: none; }
.steps-line li.done { color: var(--ink); }
.steps-line li.done::before, .steps-line li.done::after { background: var(--orange-deep); }

/* ---------- Corporate Gifting ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { flex: 0 1 auto; }
.btn--cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--cream:hover { background: #fff; color: var(--ink); }
.corp-grid { --gap: 32px 20px; }
.corp-card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.corp-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cream-2); }
.corp-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.corp-card__body h3 { font-size: 24px; line-height: 1.1; }
.corp-card__body h3 a { color: var(--ink); text-decoration: none; }
.corp-card__price { font-size: 14px; color: var(--ink-2); }
.corp-card .btn { margin-top: auto; min-height: 44px; font-size: 13px; }
.how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: how; list-style: none; padding: 0; margin: 0; }
.how-grid li { counter-increment: how; border-top: 2px solid var(--orange-deep); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.how-grid li::before { content: '0' counter(how); font-family: var(--serif); font-size: 40px; color: var(--orange); line-height: 1; }
.how-grid strong { font-size: 17px; }
.how-grid span { color: var(--muted); line-height: 1.6; font-size: 15px; }

/* ---------- footer v2 ---------- */
.footer-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: center; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid #4A3226; }
.footer-news h2 { font-size: clamp(28px, 3vw, 40px); color: var(--cream); }
.footer-news p { color: #D9C8AE; font-size: 14px; margin: 8px 0 0; }
.footer-news form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-news .input { flex: 1 1 240px; background: transparent; border-color: #8C6B55; color: var(--cream); }
.footer-news .input::placeholder { color: #BFA88D; }
.footer-news .btn { background: var(--orange); border-color: var(--orange); }
.footer-news .btn:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.footer-news .toast { background: #2F4F3F; color: #E3EDE9; }
.footer-top--5 { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #6B4F3E; display: inline-flex; align-items: center; justify-content: center; color: #F3E9D7; transition: background .2s, border-color .2s; }
.socials a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.socials svg { width: 18px; height: 18px; }

/* ---------- Journal ---------- */
.post-grid { --gap: 40px 24px; }
.post-card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.post-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cream-2); transition: transform .4s; }
.post-card__img { overflow: hidden; }
.post-card:hover img { transform: scale(1.03); }
.post-card h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.post-card:hover h3 { color: var(--orange-deep); }
.post-meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.post-hero { padding-top: clamp(32px, 5vw, 64px); }
.post-hero img { width: 100%; max-height: 520px; object-fit: cover; margin-top: 32px; background: var(--cream-2); }
.prose { font-size: 18px; line-height: 1.8; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(28px, 3vw, 36px); color: var(--ink); margin-top: 1.6em; }
.prose h3 { font-size: 24px; color: var(--ink); margin-top: 1.4em; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--orange-deep); }
.prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 3px solid var(--orange); font-family: var(--serif); font-size: 24px; font-style: italic; color: var(--ink); }
.crumbs { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 12px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--orange-deep); line-height: 1; flex: none; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 20px; color: var(--ink-2); line-height: 1.75; max-width: 760px; }

@media (max-width: 1024px) {
  .footer-top--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct__grid { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); }
  .auth-art { min-height: 220px; }
  .acct__grid { grid-template-columns: minmax(0, 1fr); }
  .acct__side { position: static; }
  .acct__nav { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .acct__nav a, .acct__nav button { width: auto; flex: none; border: 1px solid var(--line); border-radius: 999px; min-height: 40px; padding: 0 14px; gap: 8px; font-size: 12px; }
  .acct__nav a[aria-current="page"] { box-shadow: none; background: var(--ink); color: var(--cream); border-color: var(--ink); padding-left: 14px; }
  .acct__help { display: none; }
  .acct-cards { grid-template-columns: minmax(0, 1fr); }
  .acct-card { min-height: 0; }
  .avatar-picks { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .footer-news { grid-template-columns: minmax(0, 1fr); }
  .steps-line li { font-size: 11px; }
}
@media (max-width: 480px) {
  .footer-top--5 { grid-template-columns: minmax(0, 1fr); }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { flex: 1 1 100%; }
  .avatar-picks { grid-template-columns: repeat(3, minmax(0, 72px)); }
}
/* v10 fixes: hero buttons fit one row on laptops; readable login caption */
.hero-actions { gap: 10px; }
.hero-actions .btn { padding-left: 20px; padding-right: 20px; letter-spacing: .1em; }
.auth-art__text { background: rgba(43, 26, 18, .86); }

/* =========================================================
   v11 — trust badges, personalised card option
   ========================================================= */
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trust li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.trust svg { flex: none; color: var(--orange-deep); margin-top: 2px; }
.trust strong { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.15; }
.trust small { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.trust-band { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.stack > .trust, .layout-aside .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 18px; border-top: 1px solid var(--line); }
.trust--compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px; margin-top: 14px; }
.trust--compact svg { width: 20px; height: 20px; }
.trust--compact strong { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--ink-2); }
.card-opt { border: 1px solid var(--line); background: var(--paper); padding: 16px; border-radius: 2px; }
.card-opt .check { font-size: 15px; }
.card-opt [data-card-fields] { margin-top: 12px; }
@media (max-width: 1024px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .trust { grid-template-columns: minmax(0, 1fr); } .trust--compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.rate-card { margin-top: 24px; background: var(--paper); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; border-radius: 2px; }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 36px; line-height: 1; color: var(--line-2); cursor: pointer; padding: 2px; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: var(--orange); }
.stars input:focus-visible + label { outline: 2px solid var(--orange-deep); }

/* ---------- v12: influencer partner dashboard ---------- */
.partner-share { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 20px; word-break: break-all; }
.partner-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.partner-tabs a { flex: none; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 14px; }
.partner-tabs a[aria-current="page"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.partner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.partner-stats > div { background: var(--paper); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.partner-stats span { font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); line-height: 1; }
.partner-stats small { color: var(--muted); font-size: 13px; }
.partner-stats .is-hi { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.partner-stats .is-hi small { color: #E6D6BD; }
.partner-table { border: 1px solid var(--line); background: var(--paper); }
.partner-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); text-decoration: none; }
.partner-row:last-child { border-bottom: 0; }
a.partner-row:hover { background: var(--cream-2); }
.partner-row--head { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--cream-2); }
.partner-row--total { font-weight: 700; background: var(--cream-2); }
@media (max-width: 768px) { .partner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partner-row { grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 8px; padding: 12px; font-size: 13px; } .partner-row--head { font-size: 10px; letter-spacing: .06em; } .partner-row > :nth-child(2) { display: none; } }

/* =========================================================
   v13 — 17 Oct: tidy grids, aligned product cards, Silver Edition,
   moving reviews, Instagram, coupon pill, checkout helpers
   ========================================================= */

/* Occasions: centred rows, so switching one off never leaves a hole */
.occ-grid { --g: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px var(--g); }
.occ-grid > .tile { flex: 0 0 calc((100% - 5 * var(--g)) / 6); min-width: 0; }
@media (max-width: 1024px) { .occ-grid > .tile { flex-basis: calc((100% - 2 * var(--g)) / 3); } }
@media (max-width: 640px) { .occ-grid { --g: 14px; row-gap: 22px; } .occ-grid > .tile { flex-basis: calc((100% - var(--g)) / 2); } .tile__name { font-size: 21px; } }

/* Collections: same idea, 3 per row */
.coll-grid { --g: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.coll-grid > .collection { flex: 0 0 calc((100% - 2 * var(--g)) / 3); min-width: 0; }
@media (max-width: 860px) { .coll-grid > .collection { flex-basis: calc((100% - var(--g)) / 2); } }
@media (max-width: 640px) { .coll-grid > .collection { flex-basis: 100%; } }

/* Product cards: same height in every row, "Add to bag" always on one line at the bottom */
.product { height: 100%; }
.product__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.4em; }
.product__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.product > form, .product > .add-btn { margin-top: auto; }
.product .add-btn { width: 100%; }
@media (max-width: 640px) {
  .product { gap: 8px; }
  .product__tag { font-size: 10px; letter-spacing: .12em; }
  .product__name { font-size: 18px; }
  .add-btn { min-height: 42px; font-size: 11px; letter-spacing: .1em; padding: 0 6px; }
}

/* Special edition (Silver) */
.section--silver { background: linear-gradient(180deg, #F3F2EF 0%, #E8E7E3 100%); border-top: 1px solid #D9D7D1; border-bottom: 1px solid #D9D7D1; }
.edition { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.edition__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.edition__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius); box-shadow: 0 18px 40px rgba(60, 60, 64, .12); }
.section--silver .kicker { color: #6E6F73; }
.section--silver .btn--ghost { border-color: #6E6F73; color: #3E3F42; }
.section--silver .btn--ghost:hover { background: #3E3F42; color: #fff; }
.section--silver .product__media, .section--silver .product .media { background: #fff; }
.edition__soon { border: 1px dashed #B9BABD; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; background: rgba(255, 255, 255, .5); }
.edition__soon p { margin: 0; color: #4A4B4F; }
@media (max-width: 760px) { .edition__intro { grid-template-columns: minmax(0, 1fr); } }

/* Reviews move like the client logos */
.review-marquee { padding: 4px 0 8px; }
.marquee--reviews { gap: 24px; align-items: stretch; animation: marquee-r var(--dur, 60s) linear infinite; }
.marquee--reviews .review { width: calc((min(100vw, var(--max)) - 2 * var(--gutter) - 48px) / 3); flex: none; }
.marquee--reviews .review blockquote { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes marquee-r { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
.review-marquee:hover .marquee--reviews, .review-marquee:focus-within .marquee--reviews { animation-play-state: paused; }
@media (max-width: 860px) { .marquee--reviews .review { width: calc((100vw - 2 * var(--gutter) - 24px) / 2); } }
@media (max-width: 640px) { .marquee--reviews .review { width: calc(100vw - 2 * var(--gutter) - 24px); } }
@media (prefers-reduced-motion: reduce) { .marquee--reviews { animation: none; flex-wrap: nowrap; overflow-x: auto; width: auto; } }

/* Instagram */
.insta__follow { display: inline-flex; align-items: center; gap: 8px; }
.insta__row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.insta__item { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; }
.insta__item .instagram-media { background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
.insta__fallback { display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 20px; text-align: center; color: var(--orange-deep); }

/* Coupon applied */
.coupon-ok { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; background: #EEF5F3; border: 1px solid #BFD8D2; color: #2F5A55; padding: 12px 14px; border-radius: var(--radius); }
.coupon-ok strong { letter-spacing: .06em; }
.coupon-ok .small { color: #3F6E6A; }
.coupon-ok .link-btn { color: #2F5A55; }
.coupon-form .row { flex-wrap: nowrap; }
.coupon-form .input { text-transform: uppercase; }
.coupon-err { color: var(--orange-deep); margin: 6px 0 0; }

/* Checkout helpers */
.saved-addr { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-addr button { flex: 1 1 240px; text-align: left; border: 1px solid var(--line-2); background: var(--paper); padding: 10px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.4; max-width: 100%; }
.saved-addr button:hover, .saved-addr button[aria-pressed="true"] { border-color: var(--orange-deep); background: #FFF4EC; }
.pin-note { font-size: 12px; color: var(--muted); min-height: 1em; }
.pin-note.is-ok { color: #3F6E6A; }
.login-nudge { font-size: 14px; color: var(--ink-2); background: var(--cream-2); padding: 10px 14px; border-radius: var(--radius); }

/* Silver Edition: menu link, own page header, "launching soon" */
.nav-edition span { color: #8F9195; font-size: .9em; }
.nav__inner .nav-edition { color: #4A4B4F; }
.mobile-nav .nav-edition { color: #4A4B4F; }
.edition-head { padding: clamp(28px, 5vw, 56px) 0; }
.edition-head .crumbs { margin-bottom: 4px; }
.edition__soon--page { padding: clamp(36px, 6vw, 64px) 24px; text-align: center; }
.edition__soon--page p { max-width: 520px; margin: 0 auto; }
.edition__soon--page .btn-row { flex-wrap: wrap; }
@media (max-width: 640px) { .edition__soon--page .btn-row { flex-direction: column; align-items: stretch; width: 100%; } .edition__soon--page .btn { white-space: normal; height: auto; min-height: 48px; padding: 12px 16px; line-height: 1.3; } }
.edition__soon--page { flex-direction: column; align-items: center; flex-wrap: nowrap; }
.edition__soon--page .btn-row { justify-content: center; }
/* 8 menu items fit on one line on laptops */
.nav__inner { gap: 0 clamp(16px, 2.1vw, 40px); }
@media (max-width: 1440px) { .nav { letter-spacing: .05em; font-size: 13.5px; } }
.nav__inner { gap: 0 clamp(14px, 1.7vw, 40px); }
@media (max-width: 1440px) { .nav { letter-spacing: .04em; font-size: 13px; } }
/* The menu has 8 links now: below 1280px use the ☰ menu instead of a two-line bar */
@media (max-width: 1279px) { .site-header .nav { display: none; } .menu-btn { display: inline-flex; } }
@media (min-width: 1280px) { .menu-btn { display: none; } }

/* Signature collections with 4 cards (e.g. + Silver Edition): one row of 4 on computers */
@media (min-width: 1200px) {
  .coll-grid[data-count="4"] > .collection, .coll-grid[data-count="8"] > .collection { flex-basis: calc((100% - 3 * var(--g)) / 4); }
  .coll-grid[data-count="4"] .collection__title, .coll-grid[data-count="8"] .collection__title { font-size: clamp(24px, 2vw, 28px); }
}
@media (min-width: 641px) and (max-width: 1199px) { .coll-grid[data-count="4"] > .collection { flex-basis: calc((100% - var(--g)) / 2); } }
/* the silver card */
.collection--silver .collection__media { background: linear-gradient(180deg, #F3F2EF, #E3E2DE); }
.collection--silver .ribbon-tag { background: #5E6064; }
.collection--silver .ribbon-tag span { color: #E4E5E7; }
.collection--silver .collection__body { background: linear-gradient(180deg, #FFFFFF, #F7F7F5); }
@media (min-width: 1200px) { .coll-grid[data-count="4"] .collection__link { letter-spacing: .07em; font-size: 11.5px; white-space: nowrap; gap: 10px; } }

.collection__link .arrow { flex: none; }

/* Signature collection cards: wide picture, short text (no tall square cards) */
.collection__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.collection__body { gap: 10px; padding: clamp(18px, 2vw, 24px); }
.collection__text { -webkit-line-clamp: 2; font-size: 15px; line-height: 1.55; }
.collection__link { margin-top: auto; padding-top: 14px; }
@media (min-width: 1200px) { .coll-grid[data-count="4"] .collection__title { font-size: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 640px) { .collection__img { aspect-ratio: 16 / 10; } }

/* =========================================================
   v15 — motion: logo loading screen, soft scroll reveals, hovers
   Everything is skipped when the visitor asks for reduced motion.
   ========================================================= */
.intro { display: none; }
html.is-intro .intro { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; background: var(--cream, #FBF6EC); animation: intro-out .6s ease 2.6s forwards; }
html.is-intro.intro-done .intro { animation: intro-out .55s ease forwards; }
html.is-intro body { overflow: hidden; }
html.is-intro.intro-done body { overflow: auto; }
.intro__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.intro__logo { width: min(220px, 52vw); height: auto; opacity: 0; transform: translateY(10px) scale(.96); animation: intro-logo .9s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
.intro__line { display: block; height: 1px; width: 0; background: var(--orange); animation: intro-line .9s ease .55s forwards; }
.intro__tag { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--orange-deep); opacity: 0; animation: intro-fade .7s ease .9s forwards; }
@keyframes intro-logo { to { opacity: 1; transform: none; } }
@keyframes intro-line { to { width: 160px; } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* Hero entrance */
.js .hero .stack > * { opacity: 0; transform: translateY(14px); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .hero .stack > :nth-child(2) { animation-delay: .08s; } .js .hero .stack > :nth-child(3) { animation-delay: .16s; }
.js .hero .stack > :nth-child(4) { animation-delay: .24s; } .js .hero .stack > :nth-child(5) { animation-delay: .32s; }
.js .hero .ratio-hero { opacity: 0; transform: scale(1.03); animation: settle 1.2s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
html.is-intro .hero .stack > *, html.is-intro .hero .ratio-hero { animation-delay: 1.4s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { to { opacity: 1; transform: none; } }

/* Scroll reveal: JS adds .reveal to cards and headings, then .is-in when they come into view */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Hovers */
.product__img { overflow: hidden; border-radius: var(--radius); }
.product__img .media { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.product:hover .product__img .media { transform: scale(1.045); }
.add-btn { transition: background .2s, color .2s, transform .2s; }
.add-btn:hover:not(:disabled) { background: var(--orange-deep); color: var(--cream); }
.tile .media { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile { overflow: visible; }
.tile:hover .media { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(43, 26, 18, .10); }
.btn { transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(163, 72, 28, .16); }
.collection__link .arrow { transition: transform .25s ease; }
.collection:hover .collection__link .arrow { transform: translateX(4px); }
.edition__img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.section--silver:hover .edition__img { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .intro, .reveal, .js .hero .stack > *, .js .hero .ratio-hero { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  html.is-intro .intro { display: none; }
  .product:hover .product__img .media, .tile:hover .media, .btn:hover { transform: none; }
}
/* Phones: collection cards in a swipe row instead of a long stack */
@media (max-width: 640px) {
  .coll-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-padding-left: var(--gutter); }
  .coll-grid > .collection { flex: 0 0 82%; scroll-snap-align: start; }
  .coll-grid > .collection:hover { transform: none; }
}
@media (max-width: 640px) { .coll-grid .collection__link { letter-spacing: .08em; font-size: 12px; white-space: nowrap; gap: 10px; } }

/* =========================================================
   v16 — homepage banner: 3D gift boxes with festival themes, or a full-width photo
   ========================================================= */
/* Themes (Admin → Homepage & settings → Top banner) */
.hero--3d { --bg1: #FBF1E4; --bg2: #F2D7C2; --tx: var(--ink); --tx2: var(--ink-2); --acc: var(--orange); --b1: #C35D29; --b1d: #8E3B1F; --b2: #3F6E6A; --b2d: #294B48; --b3: #EFE2CC; --b3d: #CDB797; --rb: #C9A24A; --rbd: #9E7A2E; --glow: rgba(233, 164, 126, .55); --spark: #C9A24A; }
.hero--3d[data-theme="diwali"] { --bg1: #4A1214; --bg2: #200708; --tx: #FBF0DC; --tx2: #EBCFB3; --acc: #F2B84B; --b1: #B8322A; --b1d: #7A1C17; --b2: #E2A33A; --b2d: #A86F17; --b3: #6B1E46; --b3d: #431129; --rb: #F5D27A; --rbd: #C9982F; --glow: rgba(255, 176, 64, .45); --spark: #FFD27A; }
.hero--3d[data-theme="wedding"] { --bg1: #FBE7DC; --bg2: #F3C7A6; --tx: #4A0F17; --tx2: #6E2A2F; --acc: #B3263A; --b1: #A3192B; --b1d: #6E0F1C; --b2: #E89A20; --b2d: #B06F0C; --b3: #FFF7EC; --b3d: #E8D3B8; --rb: #D4AF37; --rbd: #A8862A; --glow: rgba(232, 154, 32, .45); --spark: #D4AF37; }
.hero--3d[data-theme="silver"] { --bg1: #F5F5F2; --bg2: #D9D8D3; --tx: #2B2C30; --tx2: #4A4B4F; --acc: #A3481C; --b1: #C9CACC; --b1d: #8F9195; --b2: #E9E9E6; --b2d: #B4B5B8; --b3: #A3481C; --b3d: #6E2F12; --rb: #F2F2F0; --rbd: #B4B5B8; --glow: rgba(255, 255, 255, .7); --spark: #FFFFFF; }
.hero--3d[data-theme="royal"] { --bg1: #1F3A5F; --bg2: #0D1B30; --tx: #F7F1E3; --tx2: #D6DDE8; --acc: #E3B65C; --b1: #1E5B4F; --b1d: #113A33; --b2: #7A1F2B; --b2d: #4E121A; --b3: #E3B65C; --b3d: #A9822F; --rb: #F1D28C; --rbd: #B8913F; --glow: rgba(227, 182, 92, .4); --spark: #F1D28C; }

.hero--3d { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 84px); background: radial-gradient(120% 90% at 78% 40%, var(--bg1) 0%, var(--bg2) 100%); color: var(--tx); }
.hero--3d .h1 { color: var(--tx); }
.hero--3d .lead { color: var(--tx2); }
.hero--3d .kicker { color: var(--acc); }
.hero--3d .italic-orange { color: var(--acc); }
.hero--3d[data-theme="diwali"] .btn--ghost, .hero--3d[data-theme="royal"] .btn--ghost { color: var(--tx); border-color: color-mix(in srgb, var(--tx) 55%, transparent); }
.hero--3d[data-theme="diwali"] .btn:not(.btn--ghost), .hero--3d[data-theme="royal"] .btn:not(.btn--ghost) { background: var(--acc); border-color: var(--acc); color: #2B1A12; }
.hero3d__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.hero3d__copy .h1 { font-size: clamp(40px, 5.2vw, 72px); }

/* soft decorative rings in the background */
.h3d-bg { position: absolute; inset: 0; pointer-events: none; }
.h3d-bg__ring { position: absolute; right: -8%; top: 50%; width: min(70vw, 820px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); animation: ring-spin 60s linear infinite; }
.h3d-bg__ring::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--acc) 26%, transparent); }
.h3d-bg__ring--2 { width: min(46vw, 540px); right: 4%; animation-duration: 90s; animation-direction: reverse; opacity: .7; }
@keyframes ring-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* the 3D stage */
.h3d { position: relative; height: clamp(300px, 38vw, 520px); perspective: 1400px; perspective-origin: 50% 40%; }
.h3d__glow { position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--glow) 0%, transparent 65%); filter: blur(10px); animation: glow 5s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .7; transform: translate(-50%, -50%) scale(1.06); } }
.h3d__stage { --s: 1; position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--s)) rotateX(calc(-16deg + var(--ry, 0deg))) rotateY(calc(-34deg + var(--rx, 0deg))); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.h3d__floor { position: absolute; left: 50%; top: 80%; width: 72%; height: 40px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(43, 26, 18, .28) 0%, transparent 70%); filter: blur(4px); }

.gwrap { position: absolute; transform-style: preserve-3d; }
.gwrap--a { --w: 190px; --h: 150px; --d: 190px; transform: translate3d(-170px, -150px, 40px); }
.gwrap--b { --w: 150px; --h: 120px; --d: 150px; transform: translate3d(20px, -120px, -110px); }
.gwrap--c { --w: 120px; --h: 96px; --d: 120px; transform: translate3d(70px, -96px, 120px); }
.gbox { position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; animation: gfloat 6s ease-in-out infinite; }
.gwrap--b .gbox { animation-delay: -2s; animation-duration: 7s; }
.gwrap--c .gbox { animation-delay: -4s; animation-duration: 5.5s; }
@keyframes gfloat { 50% { transform: translateY(-12px) rotateY(4deg); } }
.gf { position: absolute; left: 0; top: 0; backface-visibility: hidden; }
/* faces: box colour + a ribbon band down the middle + a darker lid band at the top */
.gf--front, .gf--back { width: var(--w); height: var(--h); background:
  linear-gradient(90deg, transparent calc(50% - 9px), var(--rb) calc(50% - 9px), var(--rb) calc(50% + 9px), transparent calc(50% + 9px)),
  linear-gradient(180deg, var(--cd) 0 22%, rgba(0, 0, 0, .12) 22% 24%, var(--c) 24% 100%); }
.gf--left, .gf--right { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); background:
  linear-gradient(90deg, transparent calc(50% - 9px), var(--rb) calc(50% - 9px), var(--rb) calc(50% + 9px), transparent calc(50% + 9px)),
  linear-gradient(180deg, var(--cd) 0 22%, rgba(0, 0, 0, .18) 22% 24%, color-mix(in srgb, var(--c) 82%, #000) 24% 100%); }
.gf--top, .gf--bottom { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); background:
  linear-gradient(90deg, transparent calc(50% - 9px), var(--rb) calc(50% - 9px), var(--rb) calc(50% + 9px), transparent calc(50% + 9px)),
  linear-gradient(0deg, transparent calc(50% - 9px), var(--rb) calc(50% - 9px), var(--rb) calc(50% + 9px), transparent calc(50% + 9px)),
  linear-gradient(135deg, color-mix(in srgb, var(--cd) 70%, #fff) 0%, var(--cd) 100%); }
.gf--front { transform: translateZ(calc(var(--d) / 2)); }
.gf--back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.gf--right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.gf--left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.gf--top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.gf--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: rgba(0, 0, 0, .3); }
.gf--front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255, 255, 255, .22) 0%, transparent 40%); }
/* bow stands up on the lid */
.gbow { position: absolute; left: 50%; top: 50%; width: calc(var(--w) * .62); transform: translate(-50%, -100%) rotateX(-90deg); transform-origin: 50% 100%; }
.gbow svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .18)); }

/* sparkles */
.spark { position: absolute; left: var(--x); top: var(--y); width: var(--z); height: var(--z); background: var(--spark); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: twinkle var(--t) ease-in-out var(--dl) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } }
.diya { position: absolute; bottom: 9%; width: 70px; }
.diya svg { width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(255, 190, 80, .7)); }
.diya--l { left: 6%; } .diya--r { right: 4%; bottom: 14%; width: 56px; }
.diya svg path:first-child { transform-origin: 50% 100%; animation: flame 1.6s ease-in-out infinite; }
@keyframes flame { 50% { transform: scaleY(1.12) scaleX(.92); } }

@media (max-width: 1024px) { .h3d__stage { --s: .82; } }
@media (max-width: 860px) {
  .hero3d__grid { grid-template-columns: minmax(0, 1fr); }
  .h3d { height: 300px; margin-top: -10px; order: -1; }
  .h3d__stage { --s: .66; top: 60%; }
  .h3d-bg__ring { width: 120vw; right: -40%; top: 26%; }
  .h3d-bg__ring--2 { width: 80vw; right: -10%; }
}
@media (max-width: 420px) { .h3d { height: 250px; } .h3d__stage { --s: .56; } }

/* Full-width photo banner */
.hero--banner { position: relative; overflow: hidden; padding: 0; min-height: clamp(460px, 62vw, 720px); display: flex; align-items: center; color: #FBF6EC; }
.hero-banner__pic, .hero-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-banner__img { object-fit: cover; animation: kenburns 18s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero--banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 14, 9, var(--ov, .45)) 0%, rgba(25, 14, 9, calc(var(--ov, .45) * .5)) 55%, transparent 100%); }
.hero-banner__inner { position: relative; z-index: 1; width: 100%; padding-top: 48px; padding-bottom: 48px; }
.hero-banner__copy { max-width: 620px; }
.hero--banner .h1 { color: #FFF8EE; font-size: clamp(40px, 5.4vw, 76px); text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero--banner .lead { color: #F3E6D6; }
.hero--banner .kicker, .hero--banner .italic-orange { color: #F2C08F; }
.hero--banner .btn--ghost { color: #FFF8EE; border-color: rgba(255, 248, 238, .7); }
@media (max-width: 640px) { .hero--banner { min-height: 560px; align-items: flex-end; } .hero--banner::after { background: linear-gradient(0deg, rgba(25, 14, 9, calc(var(--ov, .45) + .25)) 0%, rgba(25, 14, 9, var(--ov, .45)) 45%, transparent 100%); } }

@media (prefers-reduced-motion: reduce) {
  .gbox, .h3d-bg__ring, .h3d__glow, .spark, .hero-banner__img, .diya svg path { animation: none !important; }
  .spark { opacity: .7; }
}

/* Collection cards on phones: show the whole picture (no cropping) */
@media (max-width: 640px) { .collection__img { aspect-ratio: 1 / 1; object-position: center 70%; } }
.gf--top { transform-style: preserve-3d; }
.gbow { backface-visibility: visible; transform: translate(-50%, -100%) rotateX(-90deg) translateZ(0); }
.gbow svg { transform: translateY(8%); }
.hero3d__copy .h1 { font-size: clamp(38px, 4.4vw, 62px); }
.hero--3d { padding: clamp(32px, 5vw, 64px) 0 clamp(36px, 5vw, 68px); }

/* =========================================================
   v17 — Page sections (Admin → Page sections)
   ========================================================= */
.psec { padding: clamp(36px, 6vw, 72px) 0; }
.psec--theme-cream { background: var(--cream-2); }
.psec--theme-tint { background: #F6E3D3; }
.psec--theme-dark { background: var(--ink); color: var(--cream); }
.psec--theme-dark .lead { color: #E6D6BD; } .psec--theme-dark .kicker { color: #E9A47E; } .psec--theme-dark .h2 { color: var(--cream); }
.psec--theme-silver { background: linear-gradient(180deg, #F3F2EF, #E6E5E1); }
.psec img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* picture left / right */
.psec__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.psec--image_right .psec__media { order: 2; }
.psec__split--text { grid-template-columns: minmax(0, 1fr); max-width: 760px; text-align: center; }
.psec__split--text .psec__copy { align-items: center; }
.psec__media { min-width: 0; }
.psec--fit-cover .psec__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.psec--fit-contain .psec__media img { object-fit: contain; max-height: 640px; width: auto; max-width: 100%; margin: 0 auto; }
@media (max-width: 760px) { .psec__split { grid-template-columns: minmax(0, 1fr); } .psec--image_right .psec__media { order: 0; } }

/* full-width picture (your own designed banner, never cropped) */
.psec--full { padding: clamp(20px, 3vw, 36px) 0; }
.psec__full { display: block; border-radius: var(--radius); overflow: hidden; }
.psec--full.psec--fit-cover .psec__full img { aspect-ratio: 21 / 8; object-fit: cover; }
a.psec__full img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.psec__full:hover img { transform: scale(1.015); }

/* picture with text on top */
.psec--overlay { padding: 0; }
.psec__overlay { position: relative; min-height: clamp(380px, 46vw, 600px); display: flex; align-items: center; overflow: hidden; color: #FFF8EE; }
.psec__overlay picture, .psec__overlay picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.psec__overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 14, 9, .55), rgba(25, 14, 9, .15) 65%, transparent); }
.psec__overlay-copy { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 40px; }
.psec__overlay .h2 { color: #FFF8EE; } .psec__overlay .lead { color: #F3E6D6; } .psec__overlay .kicker { color: #F2C08F; }
@media (max-width: 640px) { .psec__overlay { align-items: flex-end; } .psec__overlay::after { background: linear-gradient(0deg, rgba(25, 14, 9, .7), rgba(25, 14, 9, .2) 70%, transparent); } }

/* 2–4 pictures in a row */
.psec__gallery { display: grid; gap: 16px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.psec__gallery[data-count="2"] { --n: 2; } .psec__gallery[data-count="3"] { --n: 3; } .psec__gallery[data-count="4"] { --n: 4; } .psec__gallery[data-count="1"] { --n: 1; }
.psec__tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); color: inherit; text-decoration: none; }
.psec--fit-cover .psec__tile img { aspect-ratio: 4 / 5; object-fit: cover; }
.psec__tile img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.psec__tile:hover img { transform: scale(1.03); }
.psec__caption { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 252, 246, .94); color: var(--ink); padding: 8px 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) { .psec__gallery[data-count="3"], .psec__gallery[data-count="4"] { --n: 2; } }
@media (max-width: 480px) { .psec__gallery { --n: 1 !important; } }

/* ---------- 23 Oct: build your own box, customer reviews, occasions, refer a friend ---------- */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.builder-hero { background: var(--cream); padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 48px); align-items: start; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 7vw, 88px); }
.builder__steps { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); min-width: 0; }
.bstep__h { display: flex; align-items: center; gap: 12px; font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 18px; flex-wrap: wrap; }
.bstep__h > span { width: 38px; height: 38px; border-radius: 50%; background: var(--orange-deep); color: #fff; font: 600 17px var(--sans); display: inline-grid; place-items: center; flex: none; }
.bstep__h small { font: 14px var(--sans); }
.bgroup { font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 12px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.bgrid--boxes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bgrid--cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bopt { position: relative; display: block; cursor: pointer; }
.bopt > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.bopt__card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s, transform .2s; }
.bopt__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: var(--cream); }
.bopt:hover .bopt__card { border-color: var(--orange); }
.bopt > input:checked + .bopt__card { border-color: var(--orange-deep); box-shadow: 0 0 0 3px rgba(195, 93, 41, .18); }
.bopt > input:focus-visible + .bopt__card { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
.bopt__name { font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.bopt__desc { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.bopt__meta { font-size: 13px; color: var(--muted); margin-top: auto; }
.bopt__none { display: grid; place-items: center; min-height: 110px; color: var(--muted); font-size: 14px; }
.bopt--item { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 12px; padding: 12px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); cursor: default; transition: border-color .2s; }
.bopt--item img { width: 76px; height: 76px; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: var(--cream); grid-row: span 2; }
.bopt--item .bopt__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bopt--item .bopt__name { font-size: 19px; }
.bopt--item.is-on { border-color: var(--orange-deep); background: #FFFBF5; }
.qty-step { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; justify-self: start; background: #fff; }
.qty-step button { width: 38px; height: 36px; border: 0; background: transparent; font-size: 20px; color: var(--orange-deep); cursor: pointer; }
.qty-step button:disabled { color: var(--line-2); cursor: not-allowed; }
.qty-step input { width: 34px; height: 36px; border: 0; text-align: center; font-size: 16px; background: transparent; -moz-appearance: textfield; }
.qty-step input::-webkit-outer-spin-button, .qty-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.builder__sum { position: sticky; top: 96px; }
.bsum { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bsum__box { font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.bsum__meter { height: 8px; border-radius: 99px; background: var(--cream-3, #EADFCB); overflow: hidden; }
.bsum__meter span { display: block; height: 100%; width: 0; background: var(--orange-deep); transition: width .3s; }
.bsum__list { list-style: none; margin: 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.bsum__list li { display: flex; justify-content: space-between; gap: 10px; }
.bsum__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; gap: 8px; flex-wrap: wrap; }
.bsum__total strong { font-family: var(--serif); font-size: 28px; font-weight: 500; }
.bsum__qty { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.bsum__qty .input { width: 90px; min-height: 42px; }
.builder-cta { display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .builder__sum { position: sticky; bottom: 0; top: auto; z-index: 20; margin: 0 calc(-1 * var(--gutter)); }
  .bsum { border-radius: 0; border-width: 1px 0 0; box-shadow: 0 -8px 24px rgba(43, 26, 18, .12); padding: 14px var(--gutter); gap: 8px; }
  .bsum .kicker, .bsum__list, .bsum__qty, .bsum__meter { display: none; }
  .bsum__box { font-size: 18px; }
  .bsum__total { border: 0; padding: 0; }
  .builder-cta { grid-template-columns: 1fr; }
}
.review-items { display: flex; flex-wrap: wrap; gap: 10px; }
.review-item { display: flex; align-items: center; gap: 10px; background: var(--cream); border-radius: var(--radius); padding: 6px 12px 6px 6px; font-size: 14px; }
.review-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
.review-photos { display: flex; gap: 10px; flex-wrap: wrap; }
.review-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius); }
.cust-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cust-review { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.cust-review__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cust-review__photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.cust-review blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.35; }
.cust-review figcaption { font-size: 13px; color: var(--ink-2); margin-top: auto; }
.stars-s { color: var(--orange); letter-spacing: 3px; }
.occ-add { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 12px; align-items: end; background: var(--cream); border: 1px solid var(--line); padding: 18px; border-radius: var(--radius); }
.occ-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.occ-list li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.occ-list__day { width: 54px; flex: none; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.occ-list__day b { display: block; font: 500 28px/1 var(--serif); color: var(--ink); letter-spacing: 0; }
.occ-list__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.link-plain { background: none; border: 0; color: var(--orange-deep); cursor: pointer; font-size: 14px; text-decoration: underline; padding: 6px; }
.refer-card { background: var(--cream); border: 1px dashed var(--orange); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.refer-card__code { font: 600 clamp(30px, 4vw, 42px)/1 var(--sans); letter-spacing: .08em; color: var(--orange-deep); }
@media (max-width: 720px) { .occ-add { grid-template-columns: 1fr 1fr; } .occ-add .btn { grid-column: 1 / -1; } }
.gst-fold summary { cursor: pointer; color: var(--orange-deep); }