/* =========================================================
   DIAMONDIO | Inner pages, mega menu, search, filters
   Builds on the tokens in style.css
   ========================================================= */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Active nav ---------- */
.nav li.is-active > a { color: var(--bronze); }
.nav li.is-active > a::after { transform: scaleX(1); }
.drawer-nav li.is-active a { color: var(--bronze); padding-left: 10px; box-shadow: inset 2px 0 0 var(--gold-3); }
.btn-dark.is-active { background: var(--grad); color: var(--espresso); }

/* ---------- Mega menu ---------- */
.nav .has-sub { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 60px -40px rgba(42,12,14,.35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav .has-sub:hover .mega, .nav .has-sub:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner {
  max-width: var(--container); margin: 0 auto; padding: 32px var(--gutter);
  display: grid; grid-template-columns: 1fr 340px; gap: 48px;
}
.mega-title { font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.mega-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; margin-bottom: 22px; }
.nav .mega-col ul a {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--font-head); font-size: 1.12rem; font-weight: 400; transition: color var(--t-fast), padding var(--t-fast);
}
.nav .mega-col ul a::after { display: none; }
.nav .mega-col ul a span { font-family: var(--font-body); font-size: .74rem; color: var(--ink-3); }
.nav .mega-col ul a:hover { padding-left: 8px; color: var(--bronze); }
.nav .mega .link-arrow::after { display: none; }
.mega-card { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.nav .mega-card::after { display: none; }
.mega-card:hover .ph { transform: scale(1.05); }

/* ---------- Search overlay ---------- */
.search-ov { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.search-ov::before { content: ""; position: absolute; inset: 0; background: rgba(42,8,10,.45); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t); }
.search-panel { position: relative; background: var(--paper); padding: 28px 0 32px; transform: translateY(-100%); transition: transform .55s var(--ease-out); max-height: 86vh; overflow-y: auto; }
.search-ov.is-open { visibility: visible; }
.search-ov.is-open::before { opacity: 1; }
.search-ov.is-open .search-panel { transform: none; }
.search-bar { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.search-bar > .ic { width: 22px; height: 22px; color: var(--gold-3); }
.search-bar input { flex: 1; min-width: 0; outline: none; font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); background: none; }
.search-close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); }
.search-results { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.search-results .sr-empty, .search-results .sr-hint { grid-column: 1 / -1; color: var(--ink-3); font-size: .95rem; }
.sr-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; border: 1px solid var(--line-2); transition: background var(--t-fast), border-color var(--t-fast); }
.sr-item:hover { background: var(--cream); border-color: var(--line); }
.sr-thumb { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; }
.sr-thumb .ph-ic { width: 20px; height: 20px; }
.sr-item strong { display: block; font-weight: 500; color: var(--ink); font-size: .92rem; line-height: 1.35; }
.sr-item small { color: var(--ink-3); font-size: .78rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 130; display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .9rem;
  transform: translate(-50%, 140%); opacity: 0; transition: transform .5s var(--ease-out), opacity var(--t);
  box-shadow: 0 20px 40px -20px rgba(42,8,10,.6);
}
.toast .ic { color: var(--gold); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.cart-count.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.5); } }

/* ---------- Breadcrumbs + page heads ---------- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--bronze); }
.crumbs .ic { width: 12px; height: 12px; }
.crumbs span { color: var(--ink); }

.page-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px); background: var(--paper); border-bottom: 1px solid var(--line); }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-title { font-family: var(--font-head); font-weight: 400; color: var(--ink); font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.02em; }
.page-title em { font-style: italic; color: var(--gold-3); font-weight: 400; }
.page-lead { margin-top: 22px; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--ink-2); max-width: 54ch; }
.page-lead mark { background: linear-gradient(transparent 62%, rgba(242,196,197,.55) 62%); color: var(--ink); padding: 0 2px; }
.page-hero .hero-ctas { margin-top: 30px; }

/* =========================================================
   PRODUCT LISTING
   ========================================================= */
.plp-head { padding-block: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 32px); background: var(--paper); }
.plp-head-grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); align-items: end; gap: 40px; }
.plp-title { font-family: var(--font-head); font-weight: 400; color: var(--ink); font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.025em; }
.plp-count { margin-top: 14px; color: var(--ink-3); font-size: .95rem; }
.plp-count strong { color: var(--ink); font-weight: 600; }
.plp-head-media { height: 190px; border-radius: var(--radius); overflow: hidden; }

.plp-bar { position: sticky; top: var(--hdr, 72px); z-index: 30; background: rgba(255,253,250,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: top var(--t), box-shadow var(--t); }
.plp-bar.is-stuck { box-shadow: 0 14px 30px -26px rgba(42,12,14,.45); }
.plp-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 12px; scrollbar-width: none; border-bottom: 1px solid var(--line-2); }
.plp-tabs::-webkit-scrollbar { display: none; }
.plp-tabs:empty { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  font-size: .86rem; font-weight: 500; color: var(--ink-2); background: var(--paper); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tab small { font-size: .72rem; color: var(--ink-3); transition: color var(--t-fast); }
.tab:hover { border-color: var(--gold-2); color: var(--ink); transform: translateY(-1px); }
.tab.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tab.is-active small { color: var(--gold); }

.plp-toolbar { display: flex; align-items: center; gap: 14px; padding: 12px 0; min-height: 64px; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ink);
  font-size: .88rem; font-weight: 500; color: var(--ink); transition: background var(--t-fast), color var(--t-fast);
}
.tool-btn:hover { background: var(--ink); color: var(--paper); }
.tool-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold-2); color: var(--espresso); font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.active-pills { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--sand);
  font-size: .78rem; color: var(--ink); animation: pillIn .35s var(--ease-out);
}
.pill .ic { width: 14px; height: 14px; }
.pill:hover { background: var(--line); }
.pill-clear { font-size: .8rem; font-weight: 500; color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; }
@keyframes pillIn { from { opacity: 0; transform: scale(.9); } }
.tool-count { font-size: .86rem; color: var(--ink-3); white-space: nowrap; }
.sort { position: relative; display: inline-flex; align-items: center; }
.sort select {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 10px 38px 10px 16px; font: inherit; font-size: .86rem; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast);
}
.sort select:hover, .sort select:focus { border-color: var(--gold-3); outline: none; }
.sort .ic { position: absolute; right: 14px; width: 14px; height: 14px; pointer-events: none; }
.density { display: flex; gap: 4px; }
.density button { display: flex; gap: 2px; padding: 10px 8px; border-radius: 8px; opacity: .45; transition: opacity var(--t-fast), background var(--t-fast); }
.density button i { width: 4px; height: 14px; background: var(--ink); border-radius: 1px; }
.density button.is-active, .density button:hover { opacity: 1; background: var(--sand); }

.plp-body { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px) clamp(12px, 1.6vw, 22px); }
.pgrid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pcard { position: relative; opacity: 0; transform: translateY(24px); animation: cardIn .7s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes cardIn { to { opacity: 1; transform: none; } }
.pcard-media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--sand); cursor: pointer; }
.pcard-media .ph span { font-size: .64rem; }
.pcard:hover .pcard-media .ph { transform: scale(1.06); }
.pcard-tag {
  position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: rgba(255,253,250,.9);
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--bronze); backdrop-filter: blur(6px);
}
.wish {
  position: absolute; right: 10px; top: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,253,250,.9); color: var(--ink); backdrop-filter: blur(6px); transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.wish .ic { width: 17px; height: 17px; }
.wish:hover { transform: scale(1.1); color: var(--bronze); }
.wish.is-on { color: #B4533A; }
.wish.is-on .ic { fill: currentColor; animation: bump .45s var(--ease-out); }
.pcard-actions {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; gap: 8px;
  transform: translateY(calc(100% + 14px)); transition: transform .45s var(--ease-out);
}
.pcard:hover .pcard-actions, .pcard:focus-within .pcard-actions { transform: none; }
.pcard-actions button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; border-radius: 12px;
  font-size: .8rem; font-weight: 500; transition: background var(--t-fast), color var(--t-fast);
}
.pa-cart { background: var(--ink); color: var(--paper); }
.pa-cart:hover { background: var(--espresso); color: var(--gold); }
.pa-view { background: rgba(255,253,250,.94); color: var(--ink); flex: 0 0 auto !important; padding-inline: 14px !important; }
.pa-view:hover { background: var(--paper); color: var(--bronze); }
.pcard-actions .ic { width: 16px; height: 16px; }
.pcard-body { padding: 14px 4px 0; }
.pcard-name { display: block; text-align: left; padding: 0; font-family: var(--font-head); font-size: 1.12rem; font-weight: 400; color: var(--ink); line-height: 1.25; cursor: pointer; transition: color var(--t-fast); }
.pcard-name:hover { color: var(--bronze); }
.pcard-sku { font-size: .74rem; color: var(--ink-3); letter-spacing: .02em; margin-top: 4px; }
.pcard-price { margin-top: 6px; font-weight: 600; color: var(--ink); font-size: .98rem; }
.pcard-mobile-cart { display: none; }

.plp-empty { text-align: center; padding: 60px 0; color: var(--ink-2); display: grid; justify-items: center; gap: 16px; }
.plp-empty .ic { width: 40px; height: 40px; color: var(--gold-3); }
.plp-more { display: grid; justify-items: center; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.plp-more[hidden] { display: none; }
.more-text { font-size: .86rem; color: var(--ink-3); }
.more-bar { width: 220px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.more-bar span { display: block; height: 100%; background: var(--grad); transition: width .6s var(--ease-out); }

.plp-cta { padding-top: 0; }
.plp-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta-tile {
  display: flex; align-items: center; gap: 20px; padding: 28px 30px; border-radius: var(--radius-lg); background: var(--sand);
  border: 1px solid var(--line); transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.cta-tile:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(110,18,21,.7); }
.cta-icon { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--gold-3); }
.cta-icon .ic { width: 24px; height: 24px; }
.cta-text { flex: 1; display: grid; gap: 2px; }
.cta-text strong { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; color: var(--ink); }
.cta-text em { font-style: normal; font-size: .9rem; color: var(--ink-2); }
.cta-arrow { width: 22px; height: 22px; color: var(--ink); transition: transform var(--t); }
.cta-tile:hover .cta-arrow { transform: translateX(6px); }
.cta-tile-dark { background: var(--espresso); border-color: var(--espresso); }
.cta-tile-dark .cta-icon { background: rgba(255,255,255,.06); color: var(--gold); }
.cta-tile-dark strong { color: #fff; }
.cta-tile-dark em { color: rgba(255,255,255,.65); }
.cta-tile-dark .cta-arrow { color: var(--gold); }

/* ---------- Filter drawer ---------- */
.fdrawer { position: fixed; inset: 0; z-index: 110; visibility: hidden; }
.fdrawer::before { content: ""; position: absolute; inset: 0; background: rgba(42,8,10,.45); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t); }
.fdrawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(420px, 100%); background: var(--paper);
  display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .55s var(--ease-out);
}
.fdrawer.is-open { visibility: visible; }
.fdrawer.is-open::before { opacity: 1; }
.fdrawer.is-open .fdrawer-panel { transform: none; }
.fdrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line-2); }
.fdrawer-head h2 { font-family: var(--font-head); font-weight: 400; font-size: 1.8rem; color: var(--ink); }
.fdrawer-body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.fgroup { border-bottom: 1px solid var(--line-2); }
.fgroup summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer;
  font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink);
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary .ic { transition: transform var(--t); width: 16px; height: 16px; }
.fgroup[open] summary .ic { transform: rotate(180deg); }
.fgroup ul { display: grid; gap: 2px; padding-bottom: 16px; }
.fopt { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; font-size: .92rem; color: var(--ink-2); }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fbox { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast); }
.fbox .ic { width: 13px; height: 13px; color: var(--paper); opacity: 0; transform: scale(.5); transition: opacity var(--t-fast), transform var(--t-fast); stroke-width: 2.4; }
.fopt input:checked + .fbox { background: var(--ink); border-color: var(--ink); }
.fopt input:checked + .fbox .ic { opacity: 1; transform: none; }
.fopt input:focus-visible + .fbox { outline: 2px solid var(--gold-3); outline-offset: 2px; }
.fopt:hover { color: var(--ink); }
.fopt:hover .fbox { border-color: var(--gold-3); }
.fopt em { margin-left: auto; font-style: normal; font-size: .78rem; color: var(--ink-3); }
.fopt.is-zero { opacity: .4; }
.fdrawer-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 16px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: var(--cream); }

/* ---------- Quick view ---------- */
.qv { position: fixed; inset: 0; z-index: 115; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.qv::before { content: ""; position: absolute; inset: 0; background: rgba(42,8,10,.5); backdrop-filter: blur(5px); opacity: 0; transition: opacity var(--t); }
.qv-panel {
  position: relative; width: min(940px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper); border-radius: var(--radius-lg); opacity: 0; transform: translateY(30px) scale(.98); transition: opacity var(--t), transform .55s var(--ease-out);
}
.qv.is-open { visibility: visible; }
.qv.is-open::before { opacity: 1; }
.qv.is-open .qv-panel { opacity: 1; transform: none; }
.qv-close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); transition: transform var(--t-fast); }
.qv-close:hover { transform: rotate(90deg); }
.qv-media { min-height: 420px; }
.qv-body { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
.qv-body h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1; color: var(--ink); }
.qv-price { font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-top: 12px; }
.qv-specs { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 100%; font-size: .9rem; }
.qv-specs dt { color: var(--ink-3); }
.qv-specs dd { color: var(--ink); font-weight: 500; }
.qv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; width: 100%; }
.qv-actions .btn { flex: 1; }
.qv-wish.is-on { background: var(--ink); color: var(--paper); }

/* =========================================================
   CUSTOMISE
   ========================================================= */
.custom-collage { position: relative; height: clamp(360px, 40vw, 520px); }
.custom-collage > div { position: absolute; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(110,18,21,.7); }
.cc-a { left: 0; top: 8%; width: 48%; height: 62%; border-radius: var(--radius); }
.cc-b { right: 0; top: 0; width: 46%; height: 48%; border-radius: var(--radius-lg); }
.cc-c { right: 8%; bottom: 0; width: 44%; height: 46%; border-radius: var(--radius-lg); border: 6px solid var(--paper); }
.custom-collage > div:hover .ph { transform: scale(1.05); }
.page-hero .btn-ghost { background: var(--paper); }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); position: relative; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.step {
  position: relative; padding: 28px 26px 30px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.step:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -36px rgba(110,18,21,.6); border-color: var(--gold-2); }
.step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.step-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--espresso); transition: transform var(--t); }
.step:hover .step-icon { transform: rotate(-10deg) scale(1.06); }
.step-icon .ic { width: 24px; height: 24px; }
.step-no { font-family: var(--font-head); font-size: 2.4rem; font-weight: 300; color: var(--line); transition: color var(--t); }
.step:hover .step-no { color: var(--gold-2); }
.step h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.4rem; color: var(--ink); margin-bottom: 10px; }
.step p { font-size: .94rem; }
.craft-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.craft-chips li { padding: 9px 18px; border-radius: 999px; background: var(--sand); color: var(--ink); font-size: .86rem; font-weight: 500; transition: background var(--t-fast), color var(--t-fast); }
.craft-chips li:hover { background: var(--ink); color: var(--gold); }

.form-sec { background: var(--paper); }
.form-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.form-aside { position: sticky; top: 120px; }
.after-card { display: flex; gap: 18px; margin-top: 30px; padding: 24px; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--line); }
.after-card h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; color: var(--ink); margin-bottom: 6px; }
.after-card p { font-size: .94rem; }
.after-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--gold); }
.after-icon.big { width: 72px; height: 72px; }
.after-icon.big .ic { width: 30px; height: 30px; }
.aside-contact { display: grid; gap: 12px; margin-top: 24px; }
.aside-contact li { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.aside-contact .ic { color: var(--gold-3); }
.aside-contact a:hover { color: var(--bronze); }

.dform { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--line); }
.dform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.span-2 { grid-column: span 2; }
.field { display: grid; gap: 8px; border: 0; min-width: 0; }
.field > label, .field legend, .field .label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.field legend { margin-bottom: 10px; }
.field input:not([type=radio]):not([type=file]), .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: .95rem; outline: none; resize: vertical; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field textarea:focus { border-color: var(--gold-3); box-shadow: 0 0 0 4px rgba(242,196,197,.35); }
.field.is-error input, .field.is-error textarea { border-color: #B4533A; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .88rem; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.choice span:hover { border-color: var(--gold-3); }
.choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--gold-3); outline-offset: 2px; }
.fieldset-error .choice span { border-color: #B4533A; }
.field > label.drop { text-transform: none; letter-spacing: 0; font-weight: 400; }
.drop {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 16px; border: 1.5px dashed var(--gold-2);
  background: var(--paper); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.drop:hover, .drop.is-over { background: var(--sand); border-color: var(--gold-3); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop > .ic { width: 28px; height: 28px; color: var(--gold-3); }
.drop-text { display: grid; }
.drop-text strong { font-weight: 500; color: var(--ink); }
.drop-text em { font-style: normal; font-size: .84rem; color: var(--ink-3); }
.drop-list { display: flex; flex-wrap: wrap; gap: 8px; }
.drop-list li { padding: 6px 12px; border-radius: 999px; background: var(--sand); font-size: .8rem; color: var(--ink); }
.form-done { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 30px 10px; }
.form-done h3 { font-family: var(--font-head); font-weight: 400; font-size: 2rem; color: var(--ink); }
.dform.is-done .dform-grid, .dform.is-done > .btn { display: none; }

/* =========================================================
   BOOK AN APPOINTMENT
   ========================================================= */
.appt-hero { padding-bottom: clamp(28px, 4vw, 44px); }
.appt-hero .hero-badges { border-top: 0; padding-top: 0; margin-top: 22px; }
.booking-sec { padding-top: 0; background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 100%); }
.booking-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; }
.booking { padding: clamp(22px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(110,18,21,.6); }
.bk-steps { list-style: none; display: flex; gap: 8px; margin-bottom: 30px; }
.bk-steps li {
  flex: 1; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--line);
  font-size: .84rem; font-weight: 500; color: var(--ink-3); transition: color var(--t), border-color var(--t);
}
.bk-steps li span { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: .78rem; transition: background var(--t), color var(--t), border-color var(--t); }
.bk-steps li.is-current, .bk-steps li.is-done { color: var(--ink); border-color: var(--gold-3); }
.bk-steps li.is-current span { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.bk-steps li.is-done span { background: var(--gold-2); color: var(--espresso); border-color: var(--gold-2); }
.bk-step { display: none; }
.bk-step.is-current { display: grid; gap: 24px; animation: stepIn .55s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(20px); } }
.bk-step[data-step="1"].is-current { grid-template-columns: 1.2fr 1fr; }
.bk-step[data-step="1"] .bk-nav { grid-column: 1 / -1; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; color: var(--ink); }
.cal-head .round-btn { width: 40px; height: 40px; }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-week span { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 0; }
.cal-day {
  aspect-ratio: 1; border-radius: 12px; font-size: .92rem; color: var(--ink); display: grid; place-items: center; position: relative;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.cal-day:not(:disabled):hover { background: var(--sand); transform: scale(1.06); }
.cal-day:disabled { color: var(--line); cursor: not-allowed; }
.cal-day.is-today::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-3); }
.cal-day.is-selected { background: var(--ink); color: var(--gold); }
.bk-slots h3 { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 12px 0 16px; }
.bk-slots h3 .ic { color: var(--gold-3); }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.slots:empty::before { content: ""; grid-column: 1 / -1; height: 220px; border-radius: 16px; background: repeating-linear-gradient(135deg, var(--cream) 0 12px, var(--paper) 12px 24px); }
.slot {
  padding: 12px 8px; border-radius: 12px; border: 1px solid var(--line); font-size: .88rem; color: var(--ink); background: var(--paper);
  opacity: 0; animation: cardIn .45s var(--ease-out) forwards; animation-delay: var(--d, 0s);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.slot:hover { border-color: var(--gold-3); }
.slot.is-selected { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.bk-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.bk-nav .btn:disabled { opacity: .35; pointer-events: none; }
.bk-step .dform-grid { margin-bottom: 0; }
.bk-summary { display: grid; gap: 0; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.bk-summary div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); font-size: .94rem; }
.bk-summary div:last-child { border-bottom: 0; }
.bk-summary dt, .bk-summary span:first-child { color: var(--ink-3); }
.bk-summary strong { color: var(--ink); font-weight: 500; text-align: right; }
.bk-done.is-current { justify-items: center; text-align: center; padding: 40px 0; }
.bk-done h3 { font-family: var(--font-head); font-weight: 400; font-size: 2rem; color: var(--ink); }

.store-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--line); position: sticky; top: 110px; }
.store-map { height: 200px; }
.store-body { padding: 28px; }
.store-logo { height: var(--logo-h); width: auto; margin-bottom: 18px; }
.store-body h2 { font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; font-family: var(--font-body); }
.store-body > p { color: var(--ink-2); font-size: .95rem; }
.store-links { display: grid; gap: 10px; margin: 22px 0; }
.store-links a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); transition: border-color var(--t-fast), background var(--t-fast); }
.store-links a:hover { border-color: var(--gold-2); background: var(--cream); }
.store-links i { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--grad); color: var(--espresso); }
.store-links span { display: grid; color: var(--ink); font-weight: 500; font-size: .94rem; }
.store-links em { font-style: normal; font-size: .74rem; color: var(--ink-3); font-weight: 400; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px 150px; gap: 14px; }
.about-collage > div { border-radius: var(--radius); overflow: hidden; }
.ac-1 { grid-row: span 2; border-radius: var(--radius) !important; }
.ac-4 { grid-column: 2; grid-row: 2 / span 2; }
.ac-3 { grid-column: 1; }
.about-collage > div:hover .ph { transform: scale(1.06); }

.intro-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.intro-big { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.25; color: var(--ink); }
.intro-side p { font-size: 1rem; }
.intro-side strong { color: var(--ink); font-weight: 600; }
.metal-chips { display: flex; gap: 8px; margin-top: 22px; }
.metal-chips li { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); font-size: .86rem; font-weight: 500; color: var(--ink); background: var(--paper); }
.metal-chips li:nth-child(1) { background: linear-gradient(135deg, #F6E3C3, #E3BD84); border-color: transparent; }
.metal-chips li:nth-child(2) { background: linear-gradient(135deg, #F4F4F2, #D8D8D4); border-color: transparent; }
.metal-chips li:nth-child(3) { background: linear-gradient(135deg, #EEF0F2, #C9CED3); border-color: transparent; }

.motto { padding-bottom: var(--section-y); }
.motto-card {
  position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); border-radius: var(--radius-lg);
  background: radial-gradient(70% 100% at 50% 0%, rgba(242,196,197,.22), transparent 70%), var(--espresso);
}
.motto-card .kicker { color: var(--gold); }
.motto-card .kicker::before { background: var(--gold); }
.motto-text { font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 5.4vw, 4.4rem); line-height: 1.05; letter-spacing: .02em; color: var(--gold); margin: 10px auto 18px; max-width: 18ch; }
.motto-sub { color: rgba(255,255,255,.72); max-width: 52ch; margin: 0 auto; }

.name-story { background: var(--paper); }
.ns-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.ns-head p { font-size: 1.02rem; }
.ns-head .io { color: var(--gold-3); font-style: italic; }
.io-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }
.io-card {
  padding: 28px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--cream);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.io-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -36px rgba(110,18,21,.6); background: var(--paper); }
.io-mark { display: inline-block; font-family: var(--font-head); font-size: 2.6rem; line-height: 1; color: var(--ink); margin-bottom: 22px; }
.io-mark span { color: var(--gold-3); font-style: italic; }
.io-card h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }
.io-card p, .io-list { font-size: .93rem; }
.io-list { display: grid; gap: 6px; margin-top: 10px; }
.io-list strong { color: var(--ink); }
.io-card-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); background: var(--espresso); border-color: var(--espresso); }
.io-card-wide h3 { color: #fff; }
.io-card-wide p { color: rgba(255,255,255,.72); max-width: 70ch; }
.io-card-wide:hover { background: var(--espresso); }
.io-symbol { display: flex; align-items: center; gap: 14px; flex: none; }
.io-symbol i { width: 6px; height: 72px; border-radius: 3px; background: var(--grad); }
.io-symbol b { width: 72px; height: 72px; border-radius: 50%; border: 6px solid var(--gold); transition: transform 1s var(--ease-out); }
.io-card-wide:hover .io-symbol b { transform: rotate(180deg) scale(1.06); }
.ns-foot { margin-top: 32px; text-align: center; max-width: 70ch; margin-inline: auto; font-family: var(--font-head); font-style: italic; font-size: 1.15rem; color: var(--ink); }

.ls-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.ls-visual {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle, var(--paper) 0%, var(--sand) 70%);
}
.ls-visual::before, .ls-visual::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(155,27,30,.35); }
.ls-visual::after { inset: 14%; border-style: dashed; animation: spin 50s linear infinite; }
.ls-visual img { width: 64%; height: auto; position: relative; z-index: 1; animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }
.ls-lead { font-size: 1.05rem; color: var(--ink-2); margin-bottom: 26px; }
.ls-lead strong { color: var(--ink); }
.ls-items { display: grid; gap: 12px; }
.ls-item { display: flex; gap: 18px; padding: 20px 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); transition: transform var(--t), border-color var(--t); }
.ls-item:hover { transform: translateX(8px); border-color: var(--gold-2); }
.ls-item h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin-bottom: 4px; }
.ls-item p { font-size: .93rem; }
.ls-foot { margin-top: 22px; font-size: .98rem; color: var(--ink); }

.directors { background: var(--paper); }
.profile { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.profile-photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; position: sticky; top: 120px; }
.profile-lead { font-family: var(--font-head); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.4; color: var(--ink); font-weight: 300; }
.profile-more { display: grid; gap: 14px; margin-top: 18px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--ease-out), opacity var(--t); }
.profile-more.is-open { max-height: 1400px; opacity: 1; }
.read-more { margin-top: 18px; cursor: pointer; }
.read-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.profile-social { display: flex; gap: 10px; margin-top: 26px; }
.dir-title { font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink); margin: clamp(48px, 6vw, 72px) 0 18px; padding-bottom: 13px; border-bottom: 1px solid var(--line); position: relative; }
.dir-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; background: var(--grad); }
.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dir-card { display: flex; gap: 20px; padding: 26px; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--line); transition: transform var(--t), box-shadow var(--t); }
.dir-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -34px rgba(110,18,21,.6); }
.dir-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--gold); font-family: var(--font-head); font-size: 1.3rem; }
.dir-card h4 { font-family: var(--font-head); font-weight: 500; font-size: 1.35rem; color: var(--ink); }
.dir-role { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); margin: 2px 0 10px; }
.dir-card p:last-child { font-size: .92rem; }

.aa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aa-item { padding: 32px 28px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.aa-item:hover { transform: translateY(-8px); border-color: var(--gold-2); box-shadow: 0 30px 60px -36px rgba(110,18,21,.6); }
.aa-item .assure-icon { margin-bottom: 22px; }
.aa-item h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.35rem; color: var(--ink); margin-bottom: 8px; }
.aa-item p { font-size: .94rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .pgrid, .pgrid[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .density { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before { display: none; }
  .io-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .mega { display: none; }
  .page-hero-grid, .about-hero-grid { grid-template-columns: 1fr; }
  .custom-collage { height: 380px; }
  .form-grid, .booking-grid, .ls-grid, .intro-grid, .ns-head { grid-template-columns: 1fr; }
  .form-aside, .store-card { position: static; }
  .ls-visual { max-width: 380px; width: 100%; margin-inline: auto; }
  .plp-head-grid { grid-template-columns: 1fr 260px; }
  .plp-head-media { height: 150px; }
  .tool-count { display: none; }
}

@media (max-width: 768px) {
  .plp-head-grid { grid-template-columns: 1fr; }
  .plp-head-media { display: none; }
  .plp-title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .plp-tabs { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .plp-toolbar { gap: 10px; min-height: 58px; }
  .active-pills { display: none; }
  .tool-btn { flex: 1; justify-content: center; }
  .sort { flex: 1; }
  .sort select { width: 100%; }
  .pgrid, .pgrid[data-cols="3"], .pgrid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .pcard-actions { display: none; }
  .pcard-name { font-size: 1rem; }
  .pcard-tag { display: none; }
  .pcard-mobile-cart {
    display: grid; place-items: center; position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
    background: var(--ink); color: var(--gold);
  }
  .pcard-mobile-cart .ic { width: 16px; height: 16px; }
  .wish { width: 34px; height: 34px; right: 8px; top: 8px; }
  .plp-cta-grid { grid-template-columns: 1fr; }
  .cta-tile { padding: 22px; gap: 16px; }
  .cta-text strong { font-size: 1.25rem; }

  .qv { padding: 0; align-items: end; }
  .qv-panel { grid-template-columns: 1fr; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; transform: translateY(100%); }
  .qv-media { min-height: 0; aspect-ratio: 16 / 11; }
  .qv-actions { flex-direction: column; }

  .page-title { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .page-hero .hero-ctas { flex-direction: column; }
  .page-hero .hero-ctas .btn { width: 100%; }
  .custom-collage { height: 300px; }
  .steps { grid-template-columns: 1fr; }
  .dform-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .bk-step[data-step="1"].is-current { grid-template-columns: 1fr; }
  .bk-steps li { font-size: .74rem; flex-direction: column; align-items: flex-start; gap: 6px; }
  .bk-nav .btn { flex: 1; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .slots:empty::before { height: 90px; }
  .appt-hero .hero-badges li { color: var(--ink); background: var(--paper); border-color: var(--line); backdrop-filter: none; }
  .appt-hero .hero-badges .ic { color: var(--gold-3); }

  .about-collage { grid-template-rows: 110px 110px 110px; gap: 10px; }
  .io-grid, .dir-grid, .aa-grid { grid-template-columns: 1fr; }
  .io-card-wide { flex-direction: column; align-items: flex-start; }
  .profile { grid-template-columns: 1fr; }
  .profile-photo { position: static; max-width: 320px; }
  .dir-card { flex-direction: column; }
  .search-results { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .pgrid, .pgrid[data-cols="3"], .pgrid[data-cols="4"] { gap: 18px 10px; }
  .slots { grid-template-columns: repeat(2, 1fr); }
}

/* Guard against programmatic sideways scroll + keep scrolled targets clear of the sticky header */
body { overflow-x: clip; }
.booking, .dform, #design-form, #how { scroll-margin-top: calc(var(--hdr, 72px) + 20px); }
.bk-nav .btn { min-width: 0; white-space: normal; text-align: center; }
@media (max-width: 768px) {
  .bk-nav { flex-wrap: wrap; }
  .bk-step[data-step="3"] .bk-nav .btn-gold { flex-basis: 100%; order: -1; }
}

/* Simple & elegant pass: pill CTAs, quiet form fields, flat cards */
.page-hero .btn, .plp-more .btn, .qv-actions .btn, .bk-nav .btn, .dform > .btn, .store-body .btn { border-radius: 999px; }
.page-hero .btn-gold, .bk-nav .btn-gold { background: var(--satin); background-size: 200% 100%; color: #fff; }
.field input:not([type=radio]):not([type=file]), .field textarea { border-radius: var(--radius); }
.step, .io-card, .aa-item, .dir-card, .ls-item, .after-card, .dform, .booking, .store-card, .cta-tile, .qv-panel { border-radius: var(--radius-lg); box-shadow: none; }

/* =========================================================
   PRODUCT LISTING HEAD + TOOLBAR (v2: centred, editorial)
   ========================================================= */
.plp-head { padding: clamp(36px, 5vw, 64px) 0 0; background: var(--paper); text-align: center; }
.plp-head-inner { display: flex; flex-direction: column; align-items: center; }
.plp-head .crumbs { justify-content: center; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.plp-head .crumbs .ic { width: 10px; height: 10px; }
.plp-title { font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; }
.plp-count { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.plp-count strong { color: var(--ink); font-weight: 500; }
.plp-count .rule { width: 32px; height: 1px; background: var(--gold-2); }

/* Subcategory tabs: quiet text tabs with an underline */
.plp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(18px, 3vw, 40px); margin-top: clamp(28px, 3vw, 40px); padding: 0; border: 0; max-width: 100%; }
.plp-tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; padding: 0 0 16px; border: 0; border-radius: 0; background: none;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.tab small { position: relative; top: -6px; margin-left: 2px; font-size: .62rem; letter-spacing: 0; color: var(--ink-3); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transition: transform var(--t); }
.tab:hover { color: var(--ink); transform: none; }
.tab:hover::after { transform: scaleX(.4); }
.tab.is-active { background: none; color: var(--ink); }
.tab.is-active small { color: var(--gold-3); }
.tab.is-active::after { transform: scaleX(1); }

/* Toolbar: one thin rule-bound row */
.plp-bar { background: rgba(255,255,255,.96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plp-toolbar { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 8px var(--gutter); }
.tool-btn { border: 0; padding: 8px 0; border-radius: 0; gap: 10px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.tool-btn:hover { background: none; color: var(--bronze); }
.tool-count { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sort { gap: 8px; }
.sort-label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sort select { border: 0; border-radius: 0; background: transparent; padding: 8px 22px 8px 0; font-size: .82rem; color: var(--ink); }
.sort .ic { right: 0; }
.density { display: none; }

/* Grid: 3 cards per row */
.pgrid, .pgrid[data-cols="3"], .pgrid[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.pcard-media { aspect-ratio: 4 / 4.4; border-radius: 0; background: var(--cream); }
.pcard-media .ph { background: var(--cream); }
.pcard-body { padding: 16px 2px 0; text-align: center; }
.pcard-name { text-align: center; margin-inline: auto; font-size: 1.18rem; }
.pcard-sku { font-size: .7rem; letter-spacing: .08em; }
.pcard-price { font-size: .95rem; font-weight: 500; letter-spacing: .02em; }
.pcard-tag { border-radius: 0; background: rgba(255,255,255,.92); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .6rem; }
.pcard-actions button { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; }

@media (max-width: 1024px) {
  .tool-count { display: none; }
}
@media (max-width: 768px) {
  .plp-head { padding-top: 28px; }
  .plp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); gap: 22px; }
  .plp-toolbar { gap: 12px; }
  .tool-btn { flex: 0 0 auto; justify-content: flex-start; }
  .sort { flex: 0 0 auto; margin-left: auto; }
  .sort-label { display: none; }
  .sort select { width: auto; max-width: 190px; }
  .pgrid, .pgrid[data-cols="3"], .pgrid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .pcard-name { font-size: 1rem; }
}

/* Listing: original-only controls */
.plp-bar { top: var(--hdr, 72px); }
.stars { display: inline-flex; gap: 3px; margin-top: 6px; }
.stars i { width: 10px; height: 10px; background: var(--line); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pcard-body { display: flex; flex-direction: column; align-items: center; }
.pcard-price { margin-top: 6px; }
.pcard-sku { margin-top: 2px; }
.plp-body { padding-top: clamp(28px, 3vw, 44px); }
.plp-empty p { font-size: .95rem; }

/* Content audit: leaner pages */
.mega-inner { grid-template-columns: 1fr; }
.mega-col ul { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.step .step-icon { margin-bottom: 22px; }
.custom-hero, .appt-hero { padding-block: clamp(36px, 5vw, 64px); }
.booking-solo { grid-template-columns: minmax(0, 820px); justify-content: center; }
.motto-card .motto-sub:first-child { margin-bottom: 0; }
.ls-copy .sec-title { margin-bottom: 18px; }
.profile-more.is-open { max-height: none; }
@media (max-width: 1024px) { .mega-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v4 fixes + site-wide title ornament */
.why-grid { align-items: stretch; }
@media (max-width: 768px) { .stage-track { flex: none; } }

.page-title, .sec-head.center .sec-title, .how .sec-title { position: relative; }
.page-hero .page-title::after, .sec-head.center .sec-title::after {
  content: ""; display: block; width: 150px; height: 12px; margin: 14px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='12' viewBox='0 0 150 12'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23D98A8C' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23D98A8C'/%3E%3Cstop offset='.7' stop-color='%23D98A8C'/%3E%3Cstop offset='1' stop-color='%23D98A8C' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 6h56M84 6h56' stroke='%23D98A8C'/%3E%3Cpath d='M75 1.5 79.5 6 75 10.5 70.5 6z' fill='none' stroke='%239B1B1E'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-hero { background: linear-gradient(180deg, var(--cream), #fff); }
.about-hero .page-title::after { margin-left: 0; }

/* =========================================================
   Fixed site head with Tanishq-style compact state on scroll
   ========================================================= */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #fff; transition: box-shadow .35s var(--ease); }
.head-space { height: var(--head-h, 170px); }
.site-head .header { position: relative; top: auto; box-shadow: none; border-bottom: 0; }
.site-head .topbar, .site-head .nav { overflow: hidden; max-height: 80px; transition: max-height .4s var(--ease), opacity .3s var(--ease), border-color .3s; }
.site-head .header-inner { transition: height .4s var(--ease); }
.site-head .logo img { transition: height .4s var(--ease); }

.site-head.is-compact { box-shadow: 0 6px 24px -14px rgba(30,19,20,.35); }
.site-head.is-compact .topbar { max-height: 0; opacity: 0; }
.site-head.is-compact .nav { max-height: 0; opacity: 0; border-top-color: transparent; pointer-events: none; }
.site-head.is-compact .header-inner { height: 70px; }
.site-head:not(.is-compact) .nav { overflow: visible; }
.site-head .header-inner { height: 84px; }
.site-head.is-compact .header-inner { height: 70px; }

/* Menu row list vs. dropdown list (dropdown no longer inherits the 50px row height) */
.nav > .container > ul { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; }
.nav .mega ul { height: auto; display: grid; justify-content: stretch; }

/* Dropdown panel (Tanishq-like) */
.mega { top: 100%; border-top: 1px solid var(--line-2); border-bottom: 0; box-shadow: 0 30px 50px -30px rgba(30,19,20,.35); }
.mega-inner { padding: 28px var(--gutter) 32px; }
.mega-col { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.mega-title { margin: 6px 0 0; padding-right: 24px; border-right: 1px solid var(--line); line-height: 1.6; color: var(--bronze); }
.mega-col ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; }
.nav .mega-col ul a { padding: 10px 12px; border: 0; border-radius: 8px; font-size: 1.05rem; transition: background var(--t-fast), color var(--t-fast), padding var(--t-fast); }
.nav .mega-col ul a:hover { background: var(--cream); padding-left: 16px; }
.nav .mega-col ul a span { min-width: 26px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--cream); display: inline-grid; place-items: center; font-size: .68rem; }
.nav .mega-col ul a:hover span { background: #fff; color: var(--bronze); }
.nav .has-sub:hover > a::before { transform: rotate(225deg) translate(-2px, -2px); }
.nav .has-sub > a::before { transition: transform var(--t-fast); }

@media (max-width: 1024px) {
  .head-space { height: var(--head-h, 110px); }
  .site-head { background: rgba(59,11,13,.98); }
  .site-head .header-inner, .site-head.is-compact .header-inner { height: var(--header-h); }
  .site-head.is-compact .logo img { height: var(--logo-h); }
  .site-head.is-compact { box-shadow: 0 8px 24px -14px rgba(0,0,0,.6); }
}

/* =========================================================
   Header wishlist + cart links
   ========================================================= */
.header-actions a.icon-btn { color: var(--ink); }
.header-actions .icon-btn.is-active { color: var(--bronze); }
.wish-link .ic { transition: transform var(--t-fast); }
.wish-link:hover .ic { transform: scale(1.12); }
@media (max-width: 1024px) { .header-actions a.icon-btn { color: #fff; } .header-actions .icon-btn.is-active { color: var(--gold); } }

/* =========================================================
   Cart page
   ========================================================= */
.cart-sec { padding-top: clamp(32px, 4vw, 56px); }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.cart-head, .cart-item { display: grid; grid-template-columns: minmax(0, 2.4fr) 1fr 1fr 1fr; align-items: center; gap: 16px; }
.cart-head { padding: 0 0 14px; border-bottom: 1px solid var(--ink); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.cart-head span:not(:first-child), .cart-item > :not(.ci-product) { justify-self: center; }
.cart-head span:last-child, .ci-sub { justify-self: end !important; }
.cart-item { padding: 22px 0; border-bottom: 1px solid var(--line); transition: opacity .3s, transform .3s; }
.cart-item.is-leaving { opacity: 0; transform: translateX(-16px); }
.ci-product { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ci-thumb { flex: none; width: 96px; height: 96px; border-radius: 6px; overflow: hidden; display: block; background: var(--cream); }
.ci-thumb .ph-ic { width: 22px; height: 22px; }
.ci-info { display: grid; gap: 4px; min-width: 0; }
.ci-name { font-family: var(--font-head); font-size: 1.15rem; color: var(--ink); line-height: 1.3; transition: color var(--t-fast); }
.ci-name:hover { color: var(--bronze); }
.ci-sku { font-size: .74rem; color: var(--ink-3); }
.ci-remove { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); transition: color var(--t-fast); }
.ci-remove .ic { width: 12px; height: 12px; }
.ci-remove:hover { color: #B4533A; }
.ci-price { font-size: .95rem; color: var(--ink-2); }
.ci-sub { font-size: 1rem; font-weight: 600; color: var(--ink); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { width: 36px; height: 36px; font-size: 1.05rem; color: var(--ink); transition: background var(--t-fast); }
.qty button:hover { background: var(--cream); }
.qty span { min-width: 28px; text-align: center; font-weight: 500; font-size: .95rem; }

.cart-summary { position: sticky; top: calc(var(--hdr, 72px) + 24px); padding: 28px; border-radius: 10px; background: var(--cream); border: 1px solid var(--line); }
.cart-summary h2 { font-family: var(--font-head); font-weight: 400; font-size: 1.6rem; color: var(--ink); padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.cart-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.cart-summary dt { color: var(--ink-2); }
.cart-summary dd { color: var(--ink); font-weight: 500; }
.cart-summary .total { border-bottom: 0; padding-bottom: 22px; }
.cart-summary .total dt { font-weight: 600; color: var(--ink); }
.cart-summary .total dd { font-family: var(--font-head); font-size: 1.6rem; font-weight: 500; }
.cart-summary .btn-block { margin-bottom: 16px; }
.cart-summary .link-arrow { display: flex; justify-content: center; width: fit-content; margin: 0 auto; }

/* Empty states (cart + wishlist) */
.empty-state { display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(40px, 7vw, 90px) 0; }
.empty-icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--gold-3); box-shadow: inset 0 0 0 1px var(--line); }
.empty-icon .ic { width: 32px; height: 32px; stroke-width: 1.2; }
.empty-state p { font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--ink); }

/* Wishlist */
.wish-sec { padding-top: clamp(32px, 4vw, 56px); }
.wish-sec .pcard { transition: opacity .25s; }

@media (max-width: 1024px) {
  .cart-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 640px) {
  .cart-head { display: none; }
  .cart-item { grid-template-columns: 1fr auto; grid-template-areas: "prod prod" "qty sub"; gap: 14px; padding: 18px 0; }
  .ci-product { grid-area: prod; }
  .ci-price { display: none; }
  .qty { grid-area: qty; justify-self: start !important; }
  .ci-sub { grid-area: sub; }
  .ci-thumb { width: 84px; height: 84px; }
  .cart-summary { padding: 22px; }
}

/* =========================================================
   Cart: original structure additions
   ========================================================= */
.cart-h, .co-h { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--ink); margin-bottom: 18px; }
.cart-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; }
.coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.coupon input { height: 46px; min-width: 220px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; outline: none; font-size: .9rem; transition: border-color var(--t-fast); }
.coupon input:focus { border-color: var(--gold-3); }
.coupon .btn { padding-block: 12px; }
#updateCart:disabled { opacity: .45; cursor: default; }
.cart-summary .ship dd { display: grid; justify-items: end; gap: 4px; text-align: right; }
.cart-summary .ship a { font-size: .8rem; color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   Checkout
   ========================================================= */
.co-sec { padding-top: clamp(32px, 4vw, 52px); }
.co-coupon { margin-bottom: clamp(28px, 4vw, 44px); padding: 16px 22px; border-radius: 8px; background: var(--cream); border-left: 3px solid var(--gold-3); }
.co-coupon p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .92rem; color: var(--ink); }
.co-coupon p .ic { width: 16px; height: 16px; color: var(--gold-3); }
.link-btn { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }
.co-coupon .coupon { margin-top: 14px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.co-main .dform-grid { margin-bottom: 26px; }
.field abbr { color: #B4533A; text-decoration: none; }
.field .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.field input + input { margin-top: 10px; }
.select { position: relative; }
.select select {
  width: 100%; height: 50px; padding: 0 40px 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
  font: inherit; font-size: .95rem; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.select select:focus { border-color: var(--gold-3); box-shadow: 0 0 0 4px rgba(242,196,197,.35); }
.select .ic { position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; }
.field.is-error select { border-color: #B4533A; }
.pw { position: relative; }
.pw input { padding-right: 50px !important; }
.pw-toggle { position: absolute; right: 6px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: color var(--t-fast), background var(--t-fast); }
.pw-toggle:hover, .pw-toggle.is-on { color: var(--bronze); background: var(--cream); }
.pw-toggle .ic { width: 18px; height: 18px; }
.ship-toggle, .terms { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ship-toggle { margin: 10px 0 22px; }
.ship-toggle .co-h { margin: 0; font-size: 1.35rem; }
.ship-toggle input, .terms input { position: absolute; opacity: 0; pointer-events: none; }
.ship-toggle input:checked + .fbox, .terms input:checked + .fbox { background: var(--ink); border-color: var(--ink); }
.ship-toggle input:checked + .fbox .ic, .terms input:checked + .fbox .ic { opacity: 1; transform: none; }
.ship-toggle input:focus-visible + .fbox, .terms input:focus-visible + .fbox { outline: 2px solid var(--gold-3); outline-offset: 2px; }
.ship-fields { padding: 22px; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 8px; animation: hsIn .3s var(--ease-out); }

.co-side { position: sticky; top: calc(var(--hdr, 72px) + 24px); }
.co-review { padding: 28px; border-radius: 10px; background: var(--cream); border: 1px solid var(--line); }
.co-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 22px; }
.co-table th, .co-table td { padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.co-table td:last-child, .co-table th:last-child { text-align: right; }
.co-table thead th { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-bottom-color: var(--ink); }
.co-table tbody td { color: var(--ink-2); }
.co-name { color: var(--ink); }
.co-table tbody small { display: block; margin-top: 3px; font-size: .74rem; color: var(--ink-3); }
.co-table tfoot th { font-weight: 500; color: var(--ink-2); }
.co-table tfoot td { color: var(--ink); font-weight: 500; }
.co-table tr.total th, .co-table tr.total td { border-bottom: 0; padding-top: 16px; color: var(--ink); font-weight: 600; }
.co-table tr.total td { font-family: var(--font-head); font-size: 1.45rem; font-weight: 500; }
.pay-box { padding: 16px 18px; border-radius: 8px; background: #fff; border: 1px solid var(--line); margin-bottom: 18px; }
.pay-opt { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; }
.pay-opt .radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; }
.pay-opt input:checked + .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.pay-box p { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: .86rem; color: var(--ink-2); }
.privacy { font-size: .82rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 14px; }
.privacy a, .terms a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }
.terms { font-size: .86rem; color: var(--ink); margin-bottom: 20px; align-items: flex-start; }
.terms .fbox { margin-top: 2px; }
.terms.is-error .fbox { border-color: #B4533A; }
.terms abbr { color: #B4533A; text-decoration: none; }

@media (max-width: 1024px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-side { position: static; }
}
@media (max-width: 640px) {
  .cart-actions { flex-direction: column; align-items: stretch; }
  .coupon input { flex: 1; min-width: 0; }
  .co-review { padding: 20px; }
}

/* =========================================================
   Customise page v3
   ========================================================= */
/* Hero: dark framed banner */
.cz-hero { padding: clamp(24px, 3vw, 40px) 0 0; }
.cz-frame {
  position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; min-height: clamp(320px, 34vw, 440px); overflow: hidden; border-radius: 12px;
  background: radial-gradient(90% 120% at 0% 0%, rgba(242,196,197,.2), transparent 60%), var(--espresso);
}
.cz-frame::before { content: ""; position: absolute; inset: 12px; z-index: 3; border: 1px solid rgba(242,196,197,.4); border-radius: 8px; pointer-events: none; }
.cz-copy { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: clamp(36px, 5vw, 72px); }
.cz-logo { height: 56px; width: auto; }
.cz-title { font-family: var(--font-head); font-weight: 300; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.05; color: #fff; }
.cz-title em { font-style: italic; color: var(--gold); }
.cz-media { position: relative; }
.cz-media .ph { position: absolute; inset: 0; background: linear-gradient(160deg, #4E1013, #2A0708); color: rgba(242,196,197,.55); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }

/* How It Works: horizontal timeline */
.timeline { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.timeline::before { content: ""; position: absolute; top: 36px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2) 10%, var(--gold-2) 90%, transparent); }
.tl-step { position: relative; text-align: center; }
.tl-dot {
  position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #FFF1F1, #EDB9BB 60%, #C2373B); color: #7E1518; box-shadow: 0 0 0 8px #fff, 0 14px 30px -16px rgba(110,18,21,.8);
  transition: transform var(--t), background var(--t), color var(--t);
}
.tl-dot .ic { width: 28px; height: 28px; stroke-width: 1.3; }
.tl-step:hover .tl-dot { transform: translateY(-6px); background: var(--ink); color: var(--gold); }
.tl-step h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.32rem; color: var(--ink); margin-bottom: 10px; }
.tl-step p { font-size: .9rem; line-height: 1.7; color: var(--ink-2); max-width: 30ch; margin-inline: auto; }

/* Submission: dark panel + white form card */
.cz-form-sec { background: var(--cream); }
.cz-form-wrap { display: grid; grid-template-columns: .85fr 1.15fr; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(59,11,13,.6); }
.cz-panel {
  position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 56px);
  background: radial-gradient(80% 100% at 0% 100%, rgba(242,196,197,.16), transparent 60%), var(--espresso); color: #fff;
}
.cz-panel h2 { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; color: #fff; }
.cz-panel .flourish { margin: 18px 0 30px; }
.cz-panel .flourish::after { background: var(--espresso); box-shadow: 0 0 0 3px var(--espresso); border-color: var(--gold); }
.cz-after { padding-top: 24px; border-top: 1px solid rgba(242,196,197,.25); }
.cz-after .after-icon { background: var(--gold); color: var(--espresso); margin-bottom: 14px; }
.cz-after h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; color: var(--gold); margin-bottom: 8px; }
.cz-after p { font-size: .92rem; line-height: 1.7; color: rgba(255,255,255,.75); }
.cz-card { border: 0; border-radius: 0; background: #fff; padding: clamp(28px, 4vw, 52px); }

@media (max-width: 1024px) {
  .cz-frame { grid-template-columns: 1fr; }
  .cz-media { min-height: 200px; }
  .cz-media .ph { -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
  .cz-form-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cz-copy { align-items: center; text-align: center; }
  .cz-copy .btn { white-space: normal; text-align: center; }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { top: 36px; bottom: 36px; left: 36px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--gold-2) 8%, var(--gold-2) 92%, transparent); }
  .tl-step { display: grid; grid-template-columns: 72px 1fr; column-gap: 20px; text-align: left; padding-bottom: 30px; }
  .tl-dot { grid-row: span 2; margin: 0; }
  .tl-step h3 { align-self: end; margin: 8px 0 6px; }
  .tl-step p { margin: 0; max-width: none; }
}

/* =========================================================
   How It Works: step viewer (list + panel)
   ========================================================= */
.cz-how { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.hw { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.hw-list { display: flex; flex-direction: column; gap: 10px; }
.hw-tab {
  position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
.hw-tab:hover { border-color: var(--gold-2); transform: translateX(4px); }
.hw-tab.is-active { border-color: var(--gold-3); box-shadow: 0 18px 36px -26px rgba(110,18,21,.9); background: #fff; }
.hw-ic {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--gold-3);
  border: 1px solid var(--line); transition: background var(--t), color var(--t), border-color var(--t);
}
.hw-ic .ic { width: 22px; height: 22px; stroke-width: 1.3; }
.hw-tab.is-active .hw-ic { background: radial-gradient(circle at 30% 25%, #FFF1F1, #EDB9BB 60%, #C2373B); color: #7E1518; border-color: transparent; }
.hw-tab-title { font-family: var(--font-head); font-size: 1.2rem; color: var(--ink-2); transition: color var(--t-fast); }
.hw-tab.is-active .hw-tab-title { color: var(--ink); }
.hw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.hw-bar i { display: block; height: 100%; width: 0; background: var(--grad); }

.hw-panels { position: relative; min-height: 440px; }
.hw-panel {
  position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease-out), visibility .5s;
}
.hw-panel.is-active { opacity: 1; visibility: visible; transform: none; }
.hw-img { position: relative; min-height: 200px; }
.hw-img .ph { position: absolute; inset: 0; }
.hw-panel.is-active .hw-img .ph { animation: hwZoom 7s linear both; }
@keyframes hwZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hw-text { position: relative; padding: 0 clamp(22px, 3vw, 40px) clamp(24px, 3vw, 36px); }
.hw-text .hw-ic { margin-top: -26px; margin-bottom: 14px; position: relative; background: radial-gradient(circle at 30% 25%, #FFF1F1, #EDB9BB 60%, #C2373B); color: #7E1518; border: 0; box-shadow: 0 0 0 6px #fff; }
.hw-text h3 { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--ink); margin-bottom: 10px; }
.hw-text p { font-size: .96rem; line-height: 1.75; color: var(--ink-2); max-width: 62ch; }

@media (max-width: 900px) {
  .hw { grid-template-columns: 1fr; }
  .hw-list { display: none; }
  .hw-panels { min-height: 0; display: grid; gap: 16px; }
  .hw-panel { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }
  .hw-img { min-height: 0; aspect-ratio: 16 / 9; }
  .hw-panel .hw-img .ph { animation: none !important; }
}

/* =========================================================
   Book an Appointment v3: two-pane booking card
   ========================================================= */
.page-appt .booking-sec { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); padding-top: clamp(40px, 5vw, 64px); }
.bk-shell { display: grid; grid-template-columns: 300px 1fr; max-width: 1080px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 50px 90px -60px rgba(59,11,13,.65); scroll-margin-top: calc(var(--hdr, 72px) + 20px); }

/* side panel */
.bk-side {
  position: relative; display: flex; flex-direction: column; gap: 32px; padding: 36px 30px; color: #fff;
  background: radial-gradient(90% 70% at 0% 0%, rgba(242,196,197,.18), transparent 60%), var(--espresso);
}
.bk-side::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(242,196,197,.28); border-radius: 8px; pointer-events: none; }
.bk-logo { height: var(--logo-h); width: auto; align-self: flex-start; }
.bk-side .bk-steps { flex-direction: column; gap: 0; margin: 0; }
.bk-side .bk-steps li { position: relative; flex: none; padding: 0 0 22px; border: 0; color: rgba(255,255,255,.5); font-size: .9rem; gap: 14px; }
.bk-side .bk-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: rgba(242,196,197,.25); }
.bk-side .bk-steps li span { width: 30px; height: 30px; border-color: rgba(242,196,197,.35); color: rgba(255,255,255,.6); }
.bk-side .bk-steps li.is-current { color: #fff; }
.bk-side .bk-steps li.is-current span { background: var(--gold); border-color: var(--gold); color: var(--espresso); box-shadow: 0 0 0 5px rgba(242,196,197,.18); }
.bk-side .bk-steps li.is-done { color: rgba(255,255,255,.85); }
.bk-side .bk-steps li.is-done span { background: transparent; border-color: var(--gold); color: var(--gold); }
.bk-side .bk-steps li.is-done:not(:last-child)::after { background: var(--gold); }
.bk-live { margin-top: auto; display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(242,196,197,.22); }
.bk-live div { display: grid; gap: 4px; }
.bk-live div[hidden] { display: none; }
.bk-live dt { display: flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.bk-live dt .ic { width: 14px; height: 14px; }
.bk-live dd { font-family: var(--font-head); font-size: 1.12rem; color: rgba(255,255,255,.55); }
.bk-live dd.is-set, #liveTime { color: #fff; }

/* main pane */
.bk-shell .booking { border: 0; border-radius: 0; box-shadow: none; padding: clamp(26px, 3.4vw, 44px); }
.bk-step[data-step="1"].is-current { grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 3vw, 36px); }
.cal-head h3 { font-size: 1.4rem; }
.cal-day { border-radius: 50%; font-size: .95rem; }
.cal-day.is-selected { background: var(--ink); color: var(--gold); box-shadow: 0 8px 18px -10px rgba(30,19,20,.7); }
.bk-slots { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line-2); }
.slot { border-radius: 999px; }
.slot.is-selected { background: var(--ink); color: var(--gold); }
.bk-summary { border-radius: 10px; background: var(--cream); border-color: var(--line); }
.bk-done h3 { font-weight: 300; }

@media (max-width: 900px) {
  .bk-shell { grid-template-columns: 1fr; }
  .bk-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 22px; }
  .bk-logo { display: none; }
  .bk-side .bk-steps { flex-direction: row; flex: 1 1 100%; }
  .bk-side .bk-steps li { flex: 1; flex-direction: column; align-items: flex-start; padding: 0; font-size: .74rem; gap: 6px; }
  .bk-side .bk-steps li:not(:last-child)::after { left: 34px; right: 6px; top: 15px; bottom: auto; width: auto; height: 1px; }
  .bk-live { margin-top: 0; flex: 1 1 100%; grid-auto-flow: column; justify-content: start; gap: 24px; padding-top: 14px; }
  .bk-live dd { font-size: 1rem; }
}
@media (max-width: 768px) {
  .bk-step[data-step="1"].is-current { grid-template-columns: 1fr; }
  .bk-slots { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
}

/* =========================================================
   Account panel (Log In / Register / Lost password)
   ========================================================= */
.acct { position: fixed; inset: 0; z-index: 120; visibility: hidden; overflow: hidden; }
.acct::before { content: ""; position: absolute; inset: 0; background: rgba(30,6,8,.5); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t); }
.acct-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: #fff;
  transform: translateX(100%); transition: transform .6s var(--ease-out); overflow-y: auto;
}
.acct.is-open { visibility: visible; }
.acct.is-open::before { opacity: 1; }
.acct.is-open .acct-panel { transform: none; }
.acct-head {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 24px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(242,196,197,.22), transparent 65%), var(--espresso);
}
.acct-head::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(242,196,197,.3); border-radius: 6px; pointer-events: none; }
.acct-logo { height: 70px; width: auto; }
.acct-close { position: absolute; top: 18px; right: 18px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); background: rgba(255,255,255,.06); transition: transform var(--t), background var(--t-fast); }
.acct-close:hover { transform: rotate(90deg); background: rgba(255,255,255,.12); }
.acct-close .ic { width: 16px; height: 16px; }
.acct-body { position: relative; padding: 30px 32px 36px; }
.acct-view { display: none; flex-direction: column; gap: 16px; }
.acct-view.is-active { display: flex; animation: acctIn .45s var(--ease-out); }
@keyframes acctIn { from { opacity: 0; transform: translateX(14px); } }
.acct-title { font-family: var(--font-head); font-weight: 400; font-size: 2rem; color: var(--ink); text-align: center; }
.acct-view .flourish { margin: -6px auto 6px; }
.acct-view .field input { height: 50px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acct .remember { margin: 0; font-size: .86rem; align-items: center; }
.acct .remember .fbox { margin-top: 0; }
.acct .link-btn { font-size: .86rem; }
.acct-switch { text-align: center; font-size: .88rem; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--line-2); }
.acct-note { font-size: .9rem; line-height: 1.65; color: var(--ink-2); text-align: center; }
.acct .privacy { margin: 0; }
.acct button[type=submit].is-sent { background: var(--gold-3); }
.header-actions [data-acct-open] { display: grid; }

@media (max-width: 480px) {
  .acct-body { padding: 26px 20px 30px; }
  .acct-head { min-height: 120px; }
  .acct-logo { height: 56px; }
}

/* =========================================================
   Mission Statement v2: centred quote + guarantee cards
   ========================================================= */
.mission2 { position: relative; overflow: hidden; background: var(--cream); }
.mission2::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%);
  background: url("../img/logo.png") center / contain no-repeat; opacity: .05; pointer-events: none;
}
.m2-quote { position: relative; max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.m2-label { font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 18px; }
.m2-text { font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.15; color: var(--ink); }
.m2-text em { font-style: italic; color: var(--gold-3); }
.m2-mark { font-size: 1.4em; line-height: 0; vertical-align: -.32em; color: var(--gold-2); margin-right: .06em; }
.m2-mark.close { margin: 0 0 0 .04em; }
.m2-quote .flourish { margin-top: 22px; }
.m2-quote .flourish::after { background: var(--cream); box-shadow: 0 0 0 3px var(--cream); }
.m2-cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.m2-card {
  display: flex; align-items: flex-start; gap: 18px; padding: clamp(22px, 2.4vw, 30px); border-radius: 12px; background: #fff; border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.m2-card:hover { transform: translateY(-6px); border-color: var(--gold-2); box-shadow: 0 26px 50px -32px rgba(110,18,21,.7); }
.m2-icon { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #FFF1F1, #EDB9BB 60%, #C2373B); color: #7E1518; transition: transform .6s var(--ease); }
.m2-icon .ic { width: 24px; height: 24px; stroke-width: 1.3; }
.m2-card:hover .m2-icon { transform: rotateY(180deg); }
.m2-card h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.28rem; color: var(--ink); margin: 4px 0 6px; white-space: nowrap; }
.m2-card p { font-size: .9rem; line-height: 1.6; color: var(--ink-2); }

/* =========================================================
   Subcategories v3: expanding gallery
   ========================================================= */
.subcats2 { padding-block: clamp(48px, 6vw, 80px); }
.xp-row { display: flex; gap: 10px; height: clamp(420px, 42vw, 540px); }
.xp {
  position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 12px; display: block; isolation: isolate;
  transition: flex .7s var(--ease-out);
}
.xp.is-open { flex: 4.2; }
.xp-img { position: absolute; inset: 0; display: block; }
.xp-img .ph { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out); }
.xp-img .ph span { font-size: .56rem; }
.xp.is-open .xp-img .ph { transform: scale(1.04); }
.xp-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(59,11,13,.05) 30%, rgba(59,11,13,.78) 100%); transition: opacity .5s; }
.xp-vert {
  position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--font-head); font-size: 1.15rem; letter-spacing: .04em; color: #fff; white-space: nowrap; transition: opacity .35s;
}
.xp.is-open .xp-vert { opacity: 0; }
.xp-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px;
  padding: clamp(20px, 2.4vw, 32px); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .5s var(--ease-out);
}
.xp.is-open .xp-info { opacity: 1; transform: none; transition-delay: .25s; }
.xp-name { grid-column: 1; font-family: var(--font-head); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; color: #fff; white-space: nowrap; }
.xp-name::after { content: ""; display: block; width: 32px; height: 1px; margin-top: 12px; background: var(--gold); }
.xp-tag { grid-column: 1; font-size: .92rem; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-go {
  grid-column: 2; grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5); color: #fff; transition: background var(--t), color var(--t), border-color var(--t);
}
.xp-go .ic { width: 16px; height: 16px; }
.xp:hover .xp-go { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.xp:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 3px; }

/* =========================================================
   Page band (Cart / Checkout / Wishlist)
   ========================================================= */
.page-band { padding-top: clamp(20px, 2.6vw, 32px); }
.pb-frame {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(28px, 4vw, 44px) 20px; border-radius: 12px; text-align: center;
  background: radial-gradient(70% 140% at 50% 0%, rgba(242,196,197,.2), transparent 65%), var(--espresso);
}
.pb-frame::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(242,196,197,.35); border-radius: 8px; pointer-events: none; }
.pb-crumbs { margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pb-crumbs a { color: rgba(255,255,255,.7); }
.pb-crumbs a:hover { color: var(--gold); }
.pb-crumbs span { color: var(--gold); }
.pb-crumbs .ic { width: 10px; height: 10px; color: rgba(242,196,197,.6); }
.pb-title { font-family: var(--font-head); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.1; color: #fff; }
.pb-steps { list-style: none; display: flex; align-items: center; gap: 0; margin-top: 6px; }
.pb-steps li { display: flex; align-items: center; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pb-steps li a { display: flex; align-items: center; color: inherit; }
.pb-steps li + li::before { content: ""; width: clamp(40px, 8vw, 90px); height: 1px; margin: 0 14px; background: rgba(242,196,197,.35); }
.pb-steps li.is-done + li::before { background: var(--gold); }
.pb-steps span { width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(242,196,197,.4); font-size: .72rem; letter-spacing: 0; }
.pb-steps li.is-current { color: #fff; }
.pb-steps li.is-current span { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.pb-steps li.is-done { color: var(--gold); }
.pb-steps li.is-done span { border-color: var(--gold); color: var(--gold); }

@media (max-width: 1024px) {
  .m2-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .m2-card h3 { white-space: normal; }
}
@media (max-width: 768px) {
  .xp-row { height: auto; flex-direction: column; gap: 10px; }
  .xp, .xp.is-open { flex: none; height: 200px; }
  .xp-vert { display: none; }
  .xp-info { opacity: 1; transform: none; }
  .xp-tag { white-space: normal; }
  .mission2::before { width: 320px; height: 320px; }
}
@media (max-width: 768px) { .xp-img .ph { justify-content: flex-start; padding-top: 28px; } .xp-img .ph span { display: none; } }

/* How It Works v3: no image, dark step card */
.hw-panel { grid-template-rows: 1fr; background: radial-gradient(80% 90% at 100% 0%, rgba(242,196,197,.18), transparent 60%), var(--espresso); border-color: var(--espresso); }
.hw-panel::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(242,196,197,.3); border-radius: 8px; pointer-events: none; }
.hw-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4.5vw, 64px); }
.hw-num { position: absolute; top: clamp(16px, 2vw, 28px); right: clamp(24px, 3vw, 44px); font-family: var(--font-head); font-weight: 300; font-size: clamp(5rem, 9vw, 8rem); line-height: 1; color: rgba(242,196,197,.14); }
.hw-text .hw-ic { margin: 0 0 22px; width: 64px; height: 64px; box-shadow: 0 0 0 6px rgba(242,196,197,.12); }
.hw-text .hw-ic .ic { width: 26px; height: 26px; }
.hw-text h3 { color: #fff; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 14px; }
.hw-text h3::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 16px; background: var(--gold); }
.hw-text p { color: rgba(255,255,255,.75); font-size: 1rem; position: relative; }
.hw-panel.is-active .hw-num { animation: hwNum .8s var(--ease-out); }
@keyframes hwNum { from { opacity: 0; transform: translateY(20px); } }
.hw-panels { min-height: 380px; }
@media (max-width: 900px) {
  .hw-text { padding: 30px 26px; }
  .hw-num { font-size: 4.5rem; }
}
/* Page band: left aligned */
.pb-frame { align-items: flex-start; text-align: left; padding-inline: clamp(28px, 4vw, 56px); background: radial-gradient(70% 140% at 0% 0%, rgba(242,196,197,.2), transparent 65%), var(--espresso); }
.pb-crumbs { justify-content: flex-start; }

/* =========================================================
   Listing toolbar v3: filter pill + custom sort dropdown
   ========================================================= */
.plp-bar { background: rgba(255,255,255,.96); border-top: 0; border-bottom: 1px solid var(--line-2); }
.plp-toolbar { min-height: 72px; gap: 14px; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.tool-btn:hover { background: #fff; color: var(--ink); border-color: var(--gold-2); box-shadow: 0 10px 24px -18px rgba(110,18,21,.9); }
.tb-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #FFF1F1, #EDB9BB 60%, #C2373B); color: #7E1518; }
.tb-ic .ic { width: 16px; height: 16px; }
.tool-badge { background: var(--ink); color: var(--gold); }
.active-pills { flex: 1; }

.sortdd { position: relative; margin-left: auto; }
.sortdd-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 22px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: .88rem; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sortdd-btn:hover, .sortdd.is-open .sortdd-btn { border-color: var(--gold-2); box-shadow: 0 10px 24px -18px rgba(110,18,21,.9); }
.sortdd-label { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding-right: 10px; border-right: 1px solid var(--line); }
.sortdd-value { font-weight: 500; white-space: nowrap; }
.sortdd-btn .ic { width: 14px; height: 14px; transition: transform var(--t); }
.sortdd.is-open .sortdd-btn .ic { transform: rotate(180deg); }
.sortdd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 270px; padding: 8px; list-style: none; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 50px -28px rgba(30,19,20,.45); animation: hsIn .25s var(--ease-out);
}
.sortdd-menu li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border-radius: 9px; cursor: pointer;
  font-size: .9rem; color: var(--ink-2); outline: none; transition: background var(--t-fast), color var(--t-fast);
}
.sortdd-menu li:hover, .sortdd-menu li:focus { background: var(--cream); color: var(--ink); }
.sortdd-menu li .ic { width: 15px; height: 15px; color: var(--gold-3); opacity: 0; stroke-width: 2; }
.sortdd-menu li.is-selected { color: var(--ink); font-weight: 500; }
.sortdd-menu li.is-selected .ic { opacity: 1; }

@media (max-width: 768px) {
  .plp-toolbar { min-height: 64px; }
  .tool-btn { height: 42px; padding-right: 16px; letter-spacing: .1em; }
  .tb-ic { width: 30px; height: 30px; }
  .sortdd-btn { height: 42px; padding: 0 14px; }
  .sortdd-label { display: none; }
  .sortdd-value { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .sortdd-menu { min-width: min(270px, calc(100vw - 32px)); }
}

/* =========================================================
   Page band v3: light split band (title left, stepper right)
   ========================================================= */
.page-band { position: relative; padding: 0; background: linear-gradient(180deg, var(--cream) 0%, #fff 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.page-band::before { content: ""; position: absolute; right: -60px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); background: url("../img/logo.png") center / contain no-repeat; opacity: .07; pointer-events: none; }
.pb-frame {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 40px; row-gap: 6px;
  padding: clamp(30px, 4vw, 52px) 0; border-radius: 0; background: none; text-align: left;
}
.pb-frame::before { display: none; }
.pb-crumbs { grid-column: 1; grid-row: 1; color: var(--ink-3); }
.pb-crumbs a { color: var(--ink-3); }
.pb-crumbs a:hover { color: var(--bronze); }
.pb-crumbs span { color: var(--bronze); }
.pb-crumbs .ic { color: var(--gold-2); }
.pb-title { grid-column: 1; grid-row: 2; color: var(--ink); font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.pb-steps {
  grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 14px 22px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 14px 30px -24px rgba(110,18,21,.8);
}
.pb-steps li { color: var(--ink-3); font-weight: 500; }
.pb-steps li + li::before { width: clamp(40px, 6vw, 80px); background: var(--line); }
.pb-steps li.is-done + li::before { background: var(--gold-3); }
.pb-steps span { border-color: var(--line); color: var(--ink-3); }
.pb-steps li.is-current { color: var(--ink); }
.pb-steps li.is-current span { background: var(--ink); border-color: var(--ink); color: var(--gold); }
.pb-steps li.is-done { color: var(--bronze); }
.pb-steps li.is-done span { background: var(--grad); border-color: transparent; color: var(--espresso); }
.pb-steps li.is-done a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .pb-frame { grid-template-columns: 1fr; row-gap: 8px; padding: 26px 0; }
  .pb-steps { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 8px; padding: 10px 16px; }
  .page-band::before { width: 200px; height: 200px; right: -50px; }
}

/* =========================================================
   Subcategories v4: editorial index (list + large image)
   ========================================================= */
.idx { padding-block: clamp(56px, 7vw, 96px); }
.idx-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.idx-list { border-top: 1px solid var(--line); }
.idx-row {
  position: relative; display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; gap: 18px; padding: 20px 4px;
  border-bottom: 1px solid var(--line); transition: padding var(--t);
}
.idx-row::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--gold-3); transition: width .6s var(--ease-out); }
.idx-thumb { display: none; }
.idx-num { font-size: .78rem; letter-spacing: .14em; color: var(--ink-3); transition: color var(--t-fast); }
.idx-text { display: grid; gap: 4px; min-width: 0; }
.idx-name { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; color: var(--ink-3); transition: color var(--t), transform var(--t); }
.idx-tag { font-size: .88rem; color: var(--ink-3); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s; }
.idx-go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); opacity: .35; transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t), transform var(--t); }
.idx-go .ic { width: 15px; height: 15px; }
.idx-row.is-active { padding-left: 14px; }
.idx-row.is-active::before { width: 100%; }
.idx-row.is-active .idx-num { color: var(--gold-3); }
.idx-row.is-active .idx-name { color: var(--ink); }
.idx-row.is-active .idx-tag { max-height: 40px; opacity: 1; }
.idx-row.is-active .idx-go { opacity: 1; background: var(--ink); border-color: var(--ink); color: var(--gold); transform: rotate(-45deg); }
.idx-row:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 2px; }

.idx-stage { position: relative; }
.idx-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 14px 14px; overflow: hidden; box-shadow: 0 40px 70px -46px rgba(110,18,21,.75); }
.idx-frame::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px 999px 8px 8px; pointer-events: none; z-index: 2; }
.idx-img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.2s var(--ease-out); }
.idx-img.is-active { opacity: 1; transform: none; }
.idx-img .ph { position: absolute; inset: 0; }

@media (max-width: 900px) {
  .idx-grid { grid-template-columns: 1fr; }
  .idx-stage { display: none; }
  .idx-row { grid-template-columns: 84px 1fr 38px; gap: 14px; padding: 14px 0; }
  .idx-row.is-active { padding-left: 0; }
  .idx-thumb { display: block; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; }
  .idx-thumb .ph-ic { width: 20px; height: 20px; }
  .idx-num { display: none; }
  .idx-name { font-size: 1.4rem; color: var(--ink); }
  .idx-tag { max-height: none; opacity: 1; font-size: .84rem; }
  .idx-go { width: 38px; height: 38px; opacity: 1; }
}
@media (max-width: 900px) { .idx-row::before { display: none; } .idx-row.is-active .idx-go { background: transparent; border-color: var(--line); color: var(--ink); transform: none; } .idx-row:hover .idx-go { background: var(--ink); color: var(--gold); border-color: var(--ink); } }

/* =========================================================
   Shop by Subcategories: scroll-driven (pinned) on desktop
   ========================================================= */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .idx { height: 380vh; padding: 0; }
  .idx-sticky { position: sticky; top: var(--hdr, 72px); height: calc(100vh - var(--hdr, 72px)); display: flex; flex-direction: column; justify-content: center; }
  .idx .title-block { margin-bottom: clamp(18px, 3vh, 36px); }
  /* everything visible; the scroll itself is the animation */
  .idx .idx-head, .idx .idx-row { opacity: 1; transform: none; transition-delay: 0s; }
  .idx .idx-head .flourish, .idx .idx-row::after, .idx .idx-list::before { transform: none; }
  .idx .idx-row { padding-block: clamp(10px, 1.8vh, 20px); transition: padding .5s var(--ease-out); }
  .idx .idx-name { font-size: clamp(1.4rem, 3.6vh, 2.2rem); }
  /* progress line down the list */
  .idx .idx-list { position: relative; padding-left: 22px; }
  .idx .idx-list::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: var(--grad); border-radius: 2px; }
  .idx .idx-list > .idx-row:first-child::before { }
  /* arch opens with the first part of the scroll, image drifts gently */
  .idx .idx-frame {
    height: min(calc(100vh - var(--hdr, 72px) - 210px), 600px); width: auto; aspect-ratio: 4 / 5; margin-inline: auto;
    clip-path: inset(calc((1 - min(1, var(--p, 0) * 6 + .35)) * 100%) 0 0 0 round 999px 999px 14px 14px); transition: none;
  }
  .idx .idx-frame .idx-img.is-active { transform: none; }
  .idx .idx-img .ph { transform: translateY(calc((var(--p, 0) - .5) * -6%)) scale(1.08); }
  .idx .idx-img { transition: opacity .7s var(--ease); }
}
/* Mobile: rows ease in one by one */
@media (max-width: 900px) {
  .idx .idx-row { transition-delay: calc(.1s + var(--i) * .08s); }
}
.coll-extra::before { opacity: .55; }
.stage .side-arrow { position: relative; z-index: 20; }
@media (max-width: 768px) { .stage .side-arrow { position: absolute; } }

/* =========================================================
   Shop by Subcategories v5: bento mosaic
   ========================================================= */
.bento2 { padding-block: clamp(56px, 7vw, 96px); }
.bt-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 17vw, 240px); gap: clamp(10px, 1.2vw, 16px);
  grid-template-areas: "a a b c" "a a d c" "e f f f";
}
.bt-1 { grid-area: a; } .bt-2 { grid-area: b; } .bt-3 { grid-area: c; }
.bt-4 { grid-area: d; } .bt-5 { grid-area: e; } .bt-6 { grid-area: f; }
.bt { position: relative; display: block; overflow: hidden; border-radius: 14px; isolation: isolate; background: var(--cream); }
.bt-img { position: absolute; inset: 0; display: block; }
.bt-img .ph { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out); }
.bt-img .ph span { font-size: .56rem; }
.bt-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(59,11,13,.38) 100%); opacity: .6; transition: opacity .5s; }
.bt-num {
  position: absolute; top: 16px; left: 16px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.85);
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; color: var(--bronze); backdrop-filter: blur(6px);
}
.bt-go {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: var(--espresso); opacity: 0; transform: scale(.7) rotate(-45deg); transition: opacity .4s, transform .5s var(--ease-out);
}
.bt-go .ic { width: 16px; height: 16px; }
.bt-label {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: grid; gap: 2px; padding: 14px 18px; border-radius: 12px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.6);
}
.bt-name { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -.01em; color: var(--ink); }
.bt-1 .bt-name { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.bt-tag { font-size: .84rem; color: var(--ink-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s, margin .4s; }
.bt:hover .bt-img .ph, .bt:focus-visible .bt-img .ph { transform: scale(1.06); }
.bt:hover .bt-shade { opacity: 1; }
.bt:hover .bt-go, .bt:focus-visible .bt-go { opacity: 1; transform: none; }
.bt:hover .bt-tag, .bt:focus-visible .bt-tag { max-height: 44px; opacity: 1; margin-top: 4px; }
.bt-1 .bt-tag { max-height: 44px; opacity: 1; margin-top: 4px; }
.bt:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 3px; }

/* scroll entrance: staggered curtain wipe */
.bento2 .bt { clip-path: inset(100% 0 0 0 round 14px); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); transition-delay: calc(var(--i) * .09s); }
.bento2 .bt .bt-img .ph { transform: scale(1.18); }
.bento2.is-shown .bt { clip-path: inset(0 0 0 0 round 14px); }
.bento2.is-shown .bt .bt-img .ph { transform: none; transition: transform 1.6s var(--ease-out) calc(var(--i) * .09s + .2s); }
.bento2.is-shown .bt:hover .bt-img .ph { transform: scale(1.06); transition-delay: 0s; }
.bento2 .bt-label, .bento2 .bt-num { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i) * .09s + .6s); }
.bento2.is-shown .bt-label, .bento2.is-shown .bt-num { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .bt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; grid-template-areas: "a a" "b c" "d c" "e e" "f f"; }
}
@media (max-width: 640px) {
  .bt-grid { grid-auto-rows: 170px; grid-template-areas: "a a" "a a" "b c" "d c" "e f"; gap: 10px; }
  .bt-label { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; }
  .bt-name, .bt-1 .bt-name { font-size: 1rem; }
  .bt-1 .bt-name { font-size: 1.3rem; }
  .bt-tag { display: none; }
  .bt-1 .bt-tag { display: block; }
  .bt-num { top: 10px; left: 10px; }
  .bt-go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bento2 .bt { clip-path: none; }
  .bento2 .bt-label, .bento2 .bt-num { opacity: 1; transform: none; }
}
.bt-img .ph span { display: none; } .bt-img .ph { justify-content: flex-start; padding-top: 22%; }

/* Menu bar stays visible when the header is compact (only the top bar folds away) */
.site-head.is-compact .nav { max-height: 80px; opacity: 1; pointer-events: auto; overflow: visible; border-top-color: var(--line-2); }
.site-head.is-compact .nav > .container > ul { height: 46px; }
.bt { background: #fff; border: 1px solid var(--line-2); } .bt-shade { display: none; } .bt .ph.has-img.contain > img { padding: 10% 10% 26%; } .bt:hover { border-color: var(--gold-2); }
.bt .ph.has-img.contain > img { padding: 44px 24px 86px; } @media (max-width: 640px) { .bt .ph.has-img.contain > img { padding: 36px 14px 64px; } } @media (max-width: 768px) { .hero-banner { height: auto !important; min-height: 0 !important; aspect-ratio: 1362 / 652; } }

/* Product cards: bordered frame */
.pcard { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px 10px 18px; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.pcard:hover { border-color: var(--gold-2); box-shadow: 0 22px 40px -30px rgba(110,18,21,.7); transform: translateY(-3px); }
.pcard-media { border-radius: 8px; }
.pcard-body { padding-inline: 6px; }
@media (max-width: 768px) { .pcard { padding: 6px 6px 14px; border-radius: 10px; } .pcard:hover { transform: none; } }

/* =========================================================
   Shop by Subcategories v6: original banners, 2-column
   ========================================================= */
.subban { padding-block: clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.sb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px) clamp(16px, 2vw, 28px); }
.sb { display: block; }
.sb-frame {
  position: relative; display: block; aspect-ratio: 886 / 240; overflow: hidden; border-radius: 14px; border: 1px solid var(--line);
  background: var(--cream); box-shadow: 0 18px 36px -30px rgba(110,18,21,.7); transition: box-shadow var(--t), border-color var(--t);
}
.sb-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.sb-frame::before { content: ""; position: absolute; inset: 8px; z-index: 2; border: 1px solid rgba(155,27,30,.55); border-radius: 9px; opacity: 0; transition: opacity var(--t), inset var(--t); pointer-events: none; }
.sb-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-110%); transition: transform 1s var(--ease);
}
.sb:hover .sb-frame { border-color: var(--gold-2); box-shadow: 0 30px 50px -32px rgba(110,18,21,.85); }
.sb:hover .sb-frame img { transform: scale(1.05); }
.sb:hover .sb-frame::before { opacity: 1; inset: 10px; }
.sb:hover .sb-frame::after { transform: translateX(110%); }
.sb-cap { display: flex; align-items: center; gap: 14px; padding: 14px 4px 0; }
.sb-num { font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--gold-3); }
.sb-name { flex: 1; font-family: var(--font-head); font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--ink); transition: color var(--t-fast); }
.sb-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); }
.sb-go .ic { width: 15px; height: 15px; }
.sb:hover .sb-name { color: var(--bronze); }
.sb:hover .sb-go { background: var(--ink); border-color: var(--ink); color: var(--gold); transform: rotate(-45deg); }
.sb:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 4px; border-radius: 14px; }

/* scroll entrance: glide in from alternating sides */
.subban .sb { opacity: 0; transform: translateX(calc(var(--side, -1) * 48px)); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * .1s); }
.subban .sb:nth-child(even) { --side: 1; }
.subban.is-shown .sb { opacity: 1; transform: none; }
@media (max-width: 768px) {
  .sb-grid { grid-template-columns: 1fr; gap: 20px; }
  .subban .sb { transform: translateY(30px); }
}
@media (prefers-reduced-motion: reduce) { .subban .sb { opacity: 1; transform: none; } }
@media (max-width: 768px) { .hero-banner { aspect-ratio: 1600 / 860; } }
.hero-slides .ph.has-img > img { object-position: center 55%; }
@media (max-width: 768px) { .hero-banner { aspect-ratio: 4 / 4.4; } .hero-slides .ph.has-img > img { object-position: 58% center; } }
@media (max-width: 768px) { .hero-slides .ph-slide:first-child.has-img > img { object-position: 64% center; } }

/* =========================================================
   Red logo theme: logo placement rules
   ========================================================= */
/* Mobile / tablet header becomes white so the red logo reads clearly */
@media (max-width: 1024px) {
  .site-head, .header { background: #fff !important; }
  .header { border-bottom: 1px solid var(--line); }
  .header .icon-btn, .header-actions a.icon-btn { color: var(--ink); }
  .header .icon-btn:hover { background: var(--cream); color: var(--gold-3); }
  .header-actions .icon-btn.is-active { color: var(--gold-3); }
  .burger { color: var(--gold-3); }
  .search-open .show-search-btn { color: var(--gold-3); }
}
/* On dark (maroon) panels show the same logo in white */
.drawer-logo, .appt-logo, .cz-logo, .bk-logo, .acct-logo { filter: brightness(0) invert(1); }
.cart-count { background: var(--gold-3); color: #fff; } .tool-badge { background: var(--gold-3); color: #fff; }

/* =========================================================
   Appointment banners: balanced 50 / 50 split (home + Book an Appointment)
   ========================================================= */
.appt-frame, .cz-frame.appt-split { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: clamp(380px, 36vw, 480px); }
.appt-copy, .appt-split .cz-copy { justify-content: center; gap: 20px; padding: clamp(40px, 5vw, 72px); }
.appt-lines { max-width: 30ch; }
.appt-head { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.appt-split .cz-title { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.appt-split .appt-sub { margin-top: -6px; max-width: 36ch; }
.appt-media, .appt-split .cz-media { position: relative; min-height: 100%; align-self: stretch; }
.appt-media .ph, .appt-split .cz-media .ph {
  position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.appt-media .ph.has-img > img, .appt-split .cz-media .ph.has-img > img { object-position: 82% 30%; }
@media (max-width: 1024px) {
  .cz-frame.appt-split { grid-template-columns: 1fr; }
  .appt-split .cz-media { min-height: 260px; order: -1; }
}
@media (max-width: 768px) {
  .appt-frame { grid-template-columns: 1fr; }
  .appt-media, .appt-split .cz-media { min-height: 240px; order: -1; }
  .appt-media .ph, .appt-split .cz-media .ph { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .appt-split .cz-copy { align-items: center; text-align: center; }
  .appt-split .appt-sub { margin-inline: auto; }
}
.appt-lines { max-width: 520px; }
.appt-media .ph, .cz-frame.appt-split .cz-media .ph { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 18%, #000 38%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 18%, #000 38%); }
@media (max-width: 1024px) {
  .appt-media .ph.has-img > img, .appt-split .cz-media .ph.has-img > img { object-position: 96% 30%; }
  .appt-media .ph, .cz-frame.appt-split .cz-media .ph { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
}
@media (min-width: 1025px) { .cz-frame.appt-split .cz-media .ph { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgba(0,0,0,.55) 30%, #000 52%); mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgba(0,0,0,.55) 30%, #000 52%); } .cz-frame.appt-split .cz-media .ph.has-img > img { object-position: 92% 30%; } }

/* Best of DIAMONDIO: deeper base gradient so card titles sit clear of text printed in the original images */
.coll-card::before { background: linear-gradient(180deg, transparent 38%, rgba(59,11,13,.72) 64%, rgba(42,8,10,.96) 100%); }
.coll-card h3 { text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.coll-card .ph.has-img > img.crop-top { object-position: center top; transform: scale(1.4); transform-origin: 60% 0; }
.coll-card .ph.has-img > img.crop-top { transform: scale(1.22); transform-origin: 38% 0; }
@media (min-width: 769px) { .appt-frame .appt-media { max-width: none; max-height: none; aspect-ratio: auto; justify-self: stretch; width: 100%; } }
@media (min-width: 769px) { .appt-frame .appt-media .ph { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgba(0,0,0,.55) 30%, #000 52%); mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgba(0,0,0,.55) 30%, #000 52%); } .appt-frame .appt-media .ph.has-img > img { object-position: 92% 30%; } }

/* =========================================================
   Hero v3: client banners (2000 x 938) shown whole + Shop Now
   ========================================================= */
.hero-banner, .hero .hero-banner { height: auto !important; min-height: 0 !important; aspect-ratio: 2000 / 938 !important; max-height: calc(100svh - var(--head-h, 170px)); }
.hero-slides .ph.has-img > img, .hero-slides .ph-slide:first-child.has-img > img { object-fit: cover; object-position: left center; }
.ph-slide { pointer-events: none; }
.ph-slide.is-active { pointer-events: auto; }
.hero-cta {
  position: absolute; left: 8.3%; top: var(--cta-top, 60%); z-index: 3; padding: clamp(10px, 1vw, 15px) clamp(20px, 2vw, 32px); font-size: clamp(.62rem, .85vw, .82rem);
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out) .5s, transform .7s var(--ease-out) .5s, background-position .8s var(--ease);
  box-shadow: 0 14px 30px -16px rgba(59,11,13,.8);
}
.hero-cta .ic { width: 15px; height: 15px; }
.ph-slide.is-active .hero-cta { opacity: 1; transform: none; }
.hero-banner .hero-dots button { background: rgba(30,19,20,.25); }
.hero-banner .hero-dots button.is-active { background: var(--gold-3); }
@media (max-width: 768px) {
  .hero-cta { padding: 7px 14px; gap: 6px; letter-spacing: .1em; font-size: .58rem; }
  .hero-cta .ic { width: 11px; height: 11px; }
  .hero-banner .hero-dots { bottom: 10px; }
}
.hero-slide, .hero-slide.is-active { transform: none !important; transition: opacity 1s var(--ease) !important; }

/* =========================================================
   Appointment banners: image removed, content centred (home + Book page)
   ========================================================= */
.appt-frame.appt-center, .cz-frame.appt-center { grid-template-columns: 1fr !important; min-height: clamp(320px, 30vw, 420px); justify-items: center; text-align: center; }
.appt-center .appt-copy, .appt-center .cz-copy { align-items: center; text-align: center; justify-content: center; max-width: 720px; margin-inline: auto; }
.appt-center .appt-lines { max-width: 640px; justify-items: center; margin-inline: auto; }
.appt-center .appt-sub { margin-inline: auto; }
.appt-frame.appt-center, .cz-frame.appt-center {
  background: radial-gradient(60% 90% at 50% 0%, rgba(242,196,197,.18), transparent 65%), radial-gradient(40% 70% at 50% 110%, rgba(242,196,197,.10), transparent 70%), var(--espresso);
}

/* =========================================================
   Home hero: fill the screen below the header (landscape screens)
   Shop Now stays locked to the printed headline via container units.
   ========================================================= */
.hero-banner { container-type: size; }
@media (min-width: 769px) and (orientation: landscape) {
  .hero-banner, .hero .hero-banner { aspect-ratio: auto !important; height: calc(100svh - var(--head-h, 170px)) !important; max-height: none; min-height: 420px !important; }
}
.hero-slides .ph.has-img > img { object-fit: cover; object-position: left center; }
.hero-cta {
  /* banner art is 2000 x 938: text starts 8.25% from the left; image covers the frame anchored left/centre */
  left: calc(0.0825 * max(100cqw, 213.2cqh));
  top: calc(50cqh + (var(--cta-f, .61) - .5) * max(100cqh, 46.9cqw));
  font-size: clamp(.6rem, calc(0.0042 * max(100cqw, 213.2cqh)), .9rem);
}

/* Footer: Social Media block under the logo with brand icons */
.footer-brand .footer-social-head {
  position: relative; margin: 6px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); max-width: 260px;
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.footer-brand .footer-social-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 1.5px; background: var(--gold-3); }
.footer-brand .footer-social { margin-top: 0; flex-wrap: wrap; gap: 10px; }
.ic-brand { width: 17px; height: 17px; fill: currentColor; }
.social-btn { width: 42px; height: 42px; color: var(--gold-3); background: #fff; border-color: var(--line); }
.social-btn:hover { color: #fff; border-color: transparent; transform: translateY(-3px); }
.social-btn.sb-wa:hover { background: #25D366; }
.social-btn.sb-mail:hover { background: var(--gold-3); }
.social-btn.sb-fb:hover { background: #1877F2; }
.social-btn.sb-ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-btn.sb-yt:hover { background: #FF0000; }
@media (max-width: 1180px) { .footer-brand .footer-social-head { max-width: 320px; } }
@media (min-width: 1181px) { .footer-grid { grid-template-columns: 1.55fr 1.05fr 1fr .8fr 1.5fr; } .footer-brand .social-btn { width: 38px; height: 38px; } .footer-brand .footer-social { gap: 8px; flex-wrap: nowrap; } }
.subban { overflow-x: clip; }
.send-error { margin-top: 12px; font-size: .86rem; color: #B4533A; } .send-error a { color: inherit; text-decoration: underline; } .btn.is-busy { opacity: .7; cursor: progress; }