/* ==========================================================================
   HAREEM ISTANBUL — storefront
   Light luxury · products first · mobile first
   ========================================================================== */

:root {
  --bg: #fffdf9;
  --cream: #f7f2ea;
  --sand: #efe7da;
  --sand-2: #e3d8c5;
  --ink: #1f1b17;
  --ink-2: #4a423a;
  --muted: #7d7368;
  --gold: #a8843a;
  --gold-2: #c9ab6a;
  --gold-soft: #f3ead8;
  --line: #ece4d7;
  --sale: #a2342f;
  --ok: #3b7350;
  --white: #fff;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -24px rgba(60, 45, 25, .35);
  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1280px;
  --gutter: 16px;
  --hdr: 60px;
}
@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --hdr: 80px; --gutter: 40px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.2; }
del { color: var(--muted); }
ins { text-decoration: none; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.i--sm { width: 18px; height: 18px; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 10px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 10px; }
.hp { position: absolute !important; left: -9999px !important; opacity: 0; width: 0; height: 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tc { text-align: center; }
.tr { text-align: right; }

/* ---------- Type ---------- */
.label { display: inline-block; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.title { font-size: clamp(1.6rem, 5.4vw, 2.6rem); font-weight: 400; letter-spacing: .01em; line-height: 1.15; }
.title-sm { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 400; line-height: 1.2; }
.lead { font-size: 1rem; color: var(--ink-2); line-height: 1.7; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sec-head .title-sm { margin-top: 6px; }
.more-link { flex-shrink: 0; font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-2); color: var(--ink); white-space: nowrap; }
@media (min-width: 1024px) { .sec-head { margin-bottom: 28px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 4px; font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #8f6f2c; }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--soft { background: var(--cream); color: var(--ink); border-color: var(--line); }
.btn--soft:hover { border-color: var(--ink); }
.btn--wa { background: #1f8d4f; color: #fff; text-transform: none; letter-spacing: .02em; font-size: .95rem; }
.btn--wa:hover { background: #18723f; }
.btn--wa svg { width: 20px; height: 20px; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .74rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .65; pointer-events: none; }
.spin { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.icon-btn:hover { background: var(--cream); }
.badge { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

/* ---------- Top bar (rotating service messages) ---------- */
.topbar { background: var(--ink); color: rgba(255, 255, 255, .86); font-size: .74rem; letter-spacing: .06em; }
.topbar__in { display: grid; grid-template-columns: 1fr; align-items: center; height: 34px; }
.topbar__side { display: none; }
.topbar__msgs { position: relative; height: 34px; overflow: hidden; text-align: center; }
.topbar__msgs span { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.topbar__msgs span.is-on { opacity: 1; transform: none; }
.topbar a { color: inherit; transition: color .2s; }
.topbar a:hover { color: var(--sky); }
@media (min-width: 1024px) {
  .topbar__in { grid-template-columns: 1fr auto 1fr; }
  .topbar__side { display: flex; gap: 22px; }
  .topbar__side--r { justify-content: flex-end; }
  .topbar__msgs { min-width: 420px; }
}

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(255, 253, 249, .96); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease, background .25s ease; }
.hdr.is-scrolled { box-shadow: 0 10px 30px -24px rgba(40, 30, 15, .45); }
.hdr__in { height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transition: height .25s ease; }
.hdr__left, .hdr__right { display: flex; align-items: center; min-width: 0; }
.hdr__left { margin-left: -10px; }
.hdr__right { justify-content: flex-end; gap: 2px; margin-right: -10px; }
.brand { display: block; padding: 8px 4px; }
.brand__word { display: block; width: 150px; height: auto; }
@media (max-width: 360px) { .brand__word { width: 124px; } }
.hdr__nav, .hdr__acct, .hdr__wish { display: none; }
.hdr__search { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.hdr__search span { display: none; }
.hdr__search:hover { background: var(--cream); }
@media (min-width: 1024px) {

  .hdr__left { margin-left: 0; }
  .hdr__right { margin-right: -8px; gap: 4px; }
  .hdr__menu { display: none; }
  .brand__word { width: 212px; transition: width .25s ease; }
  .hdr.is-scrolled .brand__word { width: 184px; }
  .hdr__nav { display: flex; align-items: center; gap: 6px; margin-left: -12px; }
  .hdr__link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .hdr__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
  .hdr__link:hover::after, .hdr__link.is-active::after, .hdr__link[aria-expanded="true"]::after { transform: scaleX(1); }
  .hdr__chev { width: 14px; height: 14px; transition: transform .2s ease; }
  .hdr__link[aria-expanded="true"] .hdr__chev { transform: rotate(180deg); }
  .hdr__acct, .hdr__wish { display: inline-grid; }
  .hdr__search { display: inline-flex; align-items: center; gap: 10px; width: 210px; height: 42px; margin-right: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: .84rem; justify-content: flex-start; transition: border-color .2s, box-shadow .2s; }
  .hdr__search svg { width: 18px; height: 18px; color: var(--ink); }
  .hdr__search span { display: inline; }
  .hdr__search:hover { background: #fff; border-color: var(--sand-2); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .3); }
}
@media (min-width: 1024px) and (max-width: 1180px) { .hdr__search { width: 44px; padding: 0; justify-content: center; border-color: transparent; background: none; } .hdr__search span { display: none; } }

/* ---------- Mega menu ---------- */
.drop { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(40, 30, 15, .35); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.drop.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.drop__in { display: grid; grid-template-columns: 1fr 0.9fr 0.9fr 2fr; gap: 40px; padding-block: 34px 38px; }
.drop__h { display: block; margin-bottom: 12px; font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.drop__col { display: grid; align-content: start; }
.drop__col a { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .95rem; color: var(--ink-2); transition: color .15s, transform .15s; }
.drop__col a:hover { color: var(--ink); transform: translateX(3px); }
.drop__col a small { margin-left: auto; font-size: .74rem; color: var(--muted); }
.drop__all { font-weight: 500; color: var(--ink) !important; }
.drop__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.drop__finder { color: var(--sky-deep) !important; font-weight: 500; }
.drop__finder svg { width: 16px; height: 16px; }
.drop__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drop__feat { display: grid; gap: 4px; align-content: start; }
.drop__img { display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 16px; background: var(--tile); overflow: hidden; }
.drop__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform .4s ease; }
.drop__feat:hover .drop__img img { transform: scale(1.06); }
.drop__feat b { font-weight: 500; font-size: .98rem; }
.drop__feat small { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--sky-deep); }
.drop__feat small svg { width: 14px; height: 14px; transition: transform .2s; }
.drop__feat:hover small svg { transform: translateX(3px); }

/* ---------- Mobile search bar & category bubbles ---------- */
.msearch { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--muted); font-size: .95rem; text-align: left; }
.bubbles { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--gutter) 6px; margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.bubbles::-webkit-scrollbar { display: none; }
.bubble { flex: 0 0 auto; width: 76px; display: grid; justify-items: center; gap: 8px; font-size: .78rem; line-height: 1.25; text-align: center; scroll-snap-align: start; }
.bubble img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line); padding: 3px; }
.bubble.is-active img { border-color: var(--gold); border-width: 2px; }
@media (min-width: 1024px) {
  .bubbles { justify-content: center; gap: 28px; margin: 0; padding-inline: 0; }
  .bubble { width: 110px; font-size: .88rem; }
  .bubble img { width: 104px; height: 104px; }
}

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: .86rem; white-space: nowrap; }
.chip:hover { border-color: var(--ink-2); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--gold)); }

/* ---------- Overlays ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(31, 27, 23, .4); opacity: 0; transition: opacity .25s; }
.scrim.is-open { opacity: 1; }
.panel-l, .panel-r { position: fixed; z-index: 95; top: 0; bottom: 0; width: min(420px, 100%); background: var(--bg); display: flex; flex-direction: column; transition: transform .3s ease; }
.panel-l { left: 0; transform: translateX(-100%); }
.panel-r { right: 0; transform: translateX(100%); }
.panel-l.is-open, .panel-r.is-open { transform: none; }
.panel__head { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); padding: 0 8px 0 var(--gutter); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.panel__title { font-size: 1.15rem; font-weight: 500; }
.panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.panel__foot { flex-shrink: 0; border-top: 1px solid var(--line); padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 10px; background: var(--bg); }

.mnav { padding: 6px var(--gutter) 20px; }
.mnav a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.mnav a small { color: var(--muted); font-size: .82rem; }
.mnav__label { display: block; margin: 22px 0 6px; }
.mnav .chips { margin: 4px 0 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
.mnav .chips a { padding: 0 15px; border: 1px solid var(--line); }
.mnav__foot { display: grid; gap: 10px; margin-top: 24px; font-size: .92rem; color: var(--ink-2); }


/* ---------- Alerts / toast ---------- */
.flashes { position: fixed; z-index: 150; top: calc(var(--hdr) + 10px); left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); display: grid; gap: 8px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .92rem; }
.alert--success { border-left: 3px solid var(--ok); }
.alert--error { border-left: 3px solid var(--sale); }
.alert--info { border-left: 3px solid var(--gold); }
.alert__x { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); }
.toast { position: fixed; z-index: 160; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); max-width: calc(100% - 32px); padding: 13px 20px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .92rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--sale); }
body.has-buybar .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; font-size: .78rem; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }

/* ==========================================================================
   HOME
   ========================================================================== */
.homenav { padding-block: 22px 6px; }
.homenav .msearch { margin-bottom: 18px; }
@media (min-width: 1024px) { .homenav .msearch { display: none; } .homenav { padding-block-start: 40px; } }

.sec { padding: 34px 0; }
.sec--cream { background: var(--cream); }
@media (min-width: 1024px) { .sec { padding: 64px 0; } }

.banner { display: block; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.banner img { width: 100%; height: auto; }
.banners { display: grid; gap: 12px; }

.fams { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .fams { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.fam { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); min-width: 0; }
.fam:hover { border-color: var(--ink-2); }
.fam i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); flex-shrink: 0; opacity: .85; }
.fam b { display: block; font-weight: 500; font-size: .95rem; }
.fam span { display: block; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.fam--finder { background: var(--ink); color: #fff; border-color: var(--ink); }
.fam--finder span { color: #cbbfae; }
.fam--finder svg { color: var(--gold-2); }

.story { display: grid; gap: 22px; align-items: center; }
.story__img { border-radius: var(--radius); overflow: hidden; background: #fff; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story .title-sm { margin: 8px 0 12px; }
.story .lead { margin-bottom: 20px; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; gap: 60px; } }

.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust div { display: flex; gap: 10px; align-items: flex-start; }
.trust svg { color: var(--gold); width: 24px; height: 24px; }
.trust b { display: block; font-weight: 500; font-size: .88rem; }
.trust span { font-size: .8rem; color: var(--muted); }


.signup { display: grid; gap: 16px; padding: 26px var(--gutter); border-radius: var(--radius); background: var(--gold-soft); text-align: center; }
.signup .title-sm { margin-top: 6px; }
.nl { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; width: 100%; }
.nl input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--sand-2); border-radius: 4px; background: #fff; font-size: 16px; }
@media (min-width: 900px) { .signup { grid-template-columns: 1fr 1fr; align-items: center; text-align: left; padding: 44px; } .nl { margin: 0; } }

/* ==========================================================================
   PRODUCT CARD & GRID
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 18px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } }
.pc { display: flex; flex-direction: column; min-width: 0; }
.pc__frame { position: relative; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.pc__media { display: block; aspect-ratio: 1; }
.pc__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.pc__img2 { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) { .pc:hover .pc__img2 { opacity: 1; } }
.pc__tag { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 4px; background: var(--white); border: 1px solid var(--line); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.pc__tag--sale { background: var(--sale); border-color: var(--sale); color: #fff; }
.pc__wish { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; }
.pc__wish svg { width: 18px; height: 18px; }
[data-wishlist].is-active svg { fill: var(--sale); stroke: var(--sale); }
.pc__body { display: flex; flex-direction: column; gap: 3px; padding-top: 10px; flex: 1; }
.pc__cat { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc__name { font-size: .95rem; font-weight: 400; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc__sub { font-size: .76rem; color: var(--muted); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 500; font-size: .98rem; margin-top: 2px; }
.price del { font-weight: 400; font-size: .85em; }
.price--sale ins { color: var(--sale); }
.pc__buy { margin-top: auto; padding-top: 10px; }
.pc__add { width: 100%; min-height: 42px; border: 1px solid var(--ink); border-radius: 4px; background: var(--white); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s; }
.pc__add:hover { background: var(--ink); color: #fff; }
.pc__add.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.pc__add--out { border-color: var(--line); color: var(--muted); background: var(--cream); pointer-events: none; }
@media (min-width: 1024px) { .pc__name { font-size: 1rem; } }

/* Horizontal product row (mobile scroll, desktop grid) */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); }
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; }
@media (min-width: 760px) { .row { grid-auto-columns: 30%; } }
@media (min-width: 1100px) { .row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 40px 24px; } }

/* ==========================================================================
   LISTING
   ========================================================================== */
.lhead { padding-block: 16px 14px; }
.lhead h1 { margin: 6px 0 4px; }
.lhead__count { font-size: .85rem; color: var(--muted); }
.lhead__intro { color: var(--ink-2); max-width: 680px; margin-top: 8px; font-size: .95rem; }
.lbar { position: sticky; top: var(--hdr); z-index: 30; background: rgba(255, 253, 249, .97); border-bottom: 1px solid var(--line); }
.lbar__in { display: flex; align-items: center; gap: 10px; padding-block: 10px; }
.lbar .chips { flex: 1; margin: 0; padding: 2px 0; }
.lbar__btn { flex-shrink: 0; height: 38px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; }
.lgrid { padding-top: 18px; padding-bottom: 56px; }
.lcats { margin-bottom: 18px; }
.more { display: grid; justify-items: center; gap: 10px; margin-top: 36px; }
.more__bar { width: 200px; height: 2px; background: var(--line); }
.more__bar span { display: block; height: 100%; background: var(--gold); }
.empty { max-width: 460px; margin: 0 auto; padding-block: 50px 70px; text-align: center; }
.empty img { width: 70px; margin: 0 auto 16px; opacity: .8; }
.empty .title-sm { margin-bottom: 8px; }
.empty__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.seo-text { margin-top: 44px; max-width: 760px; }

.fsheet { padding: 6px var(--gutter) 20px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.fgroup h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
.fgroup .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.fprice { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.fprice input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 16px; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdp { display: grid; gap: 0; padding-bottom: 30px; }
.gal { position: relative; margin-inline: calc(var(--gutter) * -1); background: #fff; }
.gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; background: #fff; }
.gal__item img { width: 100%; height: 100%; object-fit: contain; }
.gal__dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 4px; background: var(--bg); }
.gal__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sand-2); }
.gal__dots i.is-active { background: var(--ink); }
.gal__thumbs { display: none; }
.pinfo { padding-top: 16px; }
.pinfo__cat { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pinfo__title { font-size: clamp(1.45rem, 5vw, 2.1rem); font-weight: 400; line-height: 1.2; margin: 6px 0 2px; }
.pinfo__sub { font-size: .86rem; color: var(--muted); }
.pinfo__rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .84rem; color: var(--muted); }
.stars { --r: 0; display: inline-block; font-size: 13px; letter-spacing: 2px; line-height: 1; }
.stars::before { content: '★★★★★'; background: linear-gradient(90deg, var(--gold) calc(var(--r) / 5 * 100%), var(--sand-2) calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pinfo__price { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-size: 1.35rem; font-weight: 500; }
.pinfo__price del { font-size: .95rem; font-weight: 400; }
.save { padding: 3px 8px; border-radius: 4px; background: var(--sale); color: #fff; font-size: .72rem; font-weight: 500; letter-spacing: .06em; }
.pinfo__fams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pinfo__fams a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; background: #fff; }
.pinfo__fams i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pinfo__short { margin-top: 14px; color: var(--ink-2); font-size: .95rem; line-height: 1.7; }
.pinfo__more { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.stock { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .88rem; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock--in { color: var(--ok); }
.stock--low { color: #a8701b; }
.stock--out { color: var(--sale); }
.buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 14px; }
.qty { display: inline-flex; align-items: center; height: 50px; border: 1px solid var(--sand-2); border-radius: 4px; background: #fff; }
.qty button { width: 40px; height: 100%; border: 0; background: none; font-size: 1.15rem; }
.qty input { width: 34px; height: 100%; border: 0; text-align: center; background: none; font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { height: 38px; }
.qty--sm button { width: 32px; }
.qty--sm input { width: 28px; }
.pinfo__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.wishbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 1px solid var(--sand-2); border-radius: 4px; background: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.pinfo .btn--wa { margin-top: 10px; }
.perks { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.perks li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.perks svg { color: var(--gold); }
.notes { margin-top: 18px; padding: 16px; border-radius: var(--radius); background: var(--cream); }
.notes h3 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; }
.notes__row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sand-2); font-size: .9rem; }
.notes__row:first-of-type { border-top: 0; }
.notes__row span { color: var(--gold); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.acc { margin-top: 18px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; font-size: .9rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--muted); }
.acc details[open] summary::after { content: '−'; }
.acc__body { padding-bottom: 18px; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .9rem; margin: 0; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; }
.review { padding: 12px 0; border-bottom: 1px solid var(--line); }
.review header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; font-size: .88rem; }
.review time { color: var(--muted); font-size: .78rem; margin-left: auto; }
.verified { font-size: .7rem; padding: 2px 7px; border-radius: 4px; background: #e6f1ea; color: var(--ok); }
.rate { border: 0; margin: 0 0 4px; padding: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rate legend { width: 100%; font-size: .85rem; margin-bottom: 4px; }
.rate input { position: absolute; opacity: 0; }
.rate label { font-size: 28px; line-height: 1; color: var(--sand-2); cursor: pointer; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: var(--gold); }
.buybar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .3); transform: translateY(110%); transition: transform .25s ease; }
.buybar.is-on { transform: none; }
.buybar__info { flex: 1; min-width: 0; line-height: 1.3; }
.buybar__info b { display: block; font-weight: 400; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__info span { font-weight: 500; }
.buybar .btn { min-height: 46px; padding: 0 20px; }
@media (min-width: 1024px) {
  .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; padding-top: 20px; }
  .gal { margin: 0; background: none; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-self: start; position: sticky; top: calc(var(--hdr) + 18px); }
  .gal:not(:has(.gal__thumbs)) { grid-template-columns: 1fr; }
  .gal__track { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
  .gal__thumbs { display: grid; gap: 10px; align-content: start; grid-row: 1; }
  .gal__thumbs button { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; opacity: .6; }
  .gal__thumbs button.is-active { opacity: 1; border-color: var(--ink); }
  .gal__dots { display: none; }
  .pinfo { padding-top: 0; }
  .buybar { display: none; }
}

/* ==========================================================================
   SCENT FINDER
   ========================================================================== */
.finder { padding-block: 22px 60px; }
.finder__in { max-width: 760px; margin: 0 auto; }
.finder__progress { display: flex; gap: 6px; margin: 0 auto 22px; max-width: 280px; }
.finder__progress i { flex: 1; height: 3px; border-radius: 2px; background: var(--sand); }
.finder__progress i.is-done { background: var(--gold); }
.step { display: none; text-align: center; }
.step.is-active { display: block; }
.step__q { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 400; margin: 8px 0 20px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .opts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.opt { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
.opt:hover, .opt:focus-visible { border-color: var(--ink); }
.opt b { font-weight: 500; font-size: 1rem; }
.opt span { font-size: .8rem; color: var(--muted); }
.opt svg { width: 28px; height: 28px; color: var(--gold); }
.opt__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); }
.finder__back { margin-top: 18px; border: 0; background: none; color: var(--muted); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
.finder__loading { display: grid; justify-items: center; gap: 12px; padding: 40px 0; color: var(--muted); }
.finder__result { display: none; }
.finder__result.is-active { display: block; }
.finder__result .grid { margin-top: 22px; text-align: left; }
.finder__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ==========================================================================
   BAG / CART / CHECKOUT
   ========================================================================== */
.panel__body[data-mini-cart] { display: flex; flex-direction: column; }
.mc__list { list-style: none; margin: 0; padding: 0 var(--gutter); flex: 1 0 auto; }
.mc__item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mc__item img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.mc__name { font-size: .92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mc__rm { border: 0; background: none; color: var(--muted); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.mc__sub { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.mc__sub strong { font-weight: 500; }
.mc__note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--cream); font-size: .82rem; color: var(--ink-2); }
.mc__empty { padding: 40px var(--gutter); text-align: center; display: grid; gap: 10px; justify-items: center; }
.mc__empty img { width: 64px; opacity: .8; }

.page-head { padding-block: 18px 14px; }
.page-head h1 { margin-top: 6px; }
.cart { display: grid; gap: 22px; padding-bottom: 60px; }
@media (min-width: 980px) { .cart { grid-template-columns: 1fr 380px; gap: 44px; align-items: start; } }
.cline { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cline img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.cline__name { font-size: .95rem; line-height: 1.35; }
.cline__unit { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.cline__total { font-weight: 500; }
.cline__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 640px) { .box { padding: 24px; } }
.box__title { font-size: 1.1rem; font-weight: 500; }
.rows { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; font-size: .94rem; }
.rows dd { margin: 0; text-align: right; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.1rem; }
.total strong { font-weight: 500; font-size: 1.25rem; }
.coupon { display: flex; gap: 8px; }
.coupon input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 16px; }
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; color: var(--muted); }

.co { display: grid; gap: 16px; padding-bottom: 30px; }
@media (min-width: 1000px) { .co { grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; align-items: start; padding-bottom: 60px; } .co__side { position: sticky; top: calc(var(--hdr) + 16px); } }
@media (max-width: 999px) { .co__side { display: none; } }
.co__main { display: grid; gap: 16px; min-width: 0; }
.co__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); font-size: .92rem; }
.co__toggle span { display: flex; align-items: center; gap: 8px; color: var(--gold); }
.co__toggle b { font-weight: 500; }
@media (min-width: 1000px) { .co__toggle { display: none; } }
.step-h { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 500; }
.step-h b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 500; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.items li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: .88rem; }
.items__img { position: relative; }
.items__img img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.items__img b { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-2); color: #fff; font-size: 11px; font-weight: 500; display: grid; place-items: center; }
.opt-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.opt-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt-card input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex-shrink: 0; }
.opt-card__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opt-card__title { font-size: .92rem; font-weight: 500; line-height: 1.35; }
.opt-card__desc { font-size: .8rem; color: var(--muted); line-height: 1.5; white-space: pre-line; }
.opt-card--pay .opt-card__desc { display: none; }
.opt-card--pay:has(input:checked) .opt-card__desc { display: block; }
.opt-card__price { font-weight: 500; font-size: .9rem; white-space: nowrap; }
.cards-logos { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.cards-logos span { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; font-size: .62rem; font-weight: 600; color: var(--muted); }
.co-bar { position: sticky; bottom: 0; z-index: 20; margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); display: grid; gap: 8px; }
@media (min-width: 1000px) { .co-bar { position: static; margin: 0; padding: 0; border: 0; background: none; } }
.form-error { padding: 12px 14px; border-radius: 8px; background: #fbefed; color: var(--sale); font-size: .9rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.row2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .row2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; font-size: .88rem; color: var(--ink-2); }
.field abbr { color: var(--sale); text-decoration: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--sand-2); border-radius: 6px; background: #fff; color: var(--ink); font-size: 16px; -webkit-appearance: none; appearance: none; }
.field select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231f1b17' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field.has-error input, .field.has-error select { border-color: var(--sale); }
.field__err { color: var(--sale); font-size: .8rem; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; cursor: pointer; line-height: 1.45; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.pw { position: relative; display: block; }
.pw input { padding-right: 70px; }
.pw__t { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: var(--cream); border-radius: 4px; padding: 6px 10px; font-size: .78rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---------- Content pages ---------- */
.narrow { max-width: 780px; }
.prose { line-height: 1.8; color: var(--ink-2); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.4rem; color: var(--ink); margin-top: 1.6em; }
.prose h3 { font-size: 1.15rem; color: var(--ink); margin-top: 1.4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose img { border-radius: var(--radius-sm); }
.prose blockquote { margin: 1.4em 0; padding-left: 16px; border-left: 2px solid var(--gold); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px; }
.article__img { border-radius: var(--radius); overflow: hidden; margin: 16px 0 24px; aspect-ratio: 16 / 9; background: var(--sand); }
.article__img img { width: 100%; height: 100%; object-fit: cover; }
.thanks { text-align: center; padding: 24px 0 8px; }
.thanks__ic { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); font-size: 26px; }
.thanks__ic--warn { background: #fbefed; color: var(--sale); }
.thanks h1 { margin: 6px 0 10px; }
.facts { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(5, 1fr); } }
.facts li { background: #fff; padding: 12px 14px; font-size: .74rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.facts strong { display: block; margin-top: 3px; font-size: .95rem; font-weight: 500; color: var(--ink); letter-spacing: 0; text-transform: none; }
.bank { padding: 18px; border-radius: var(--radius); background: var(--gold-soft); display: grid; gap: 10px; margin-bottom: 18px; }
.bank__text { white-space: pre-line; line-height: 1.7; color: var(--ink-2); font-size: .94rem; }
.status { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: .76rem; font-weight: 500; background: var(--cream); }
.status--processing { background: #e6f1ea; color: var(--ok); }
.status--completed { background: #e4ecf5; color: #2a537d; }
.status--on-hold { background: #f7eed9; color: #8a6116; }
.status--cancelled, .status--failed, .status--refunded { background: #fbefed; color: var(--sale); }
.otable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.otable th, .otable td { padding: 10px 2px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.otable .tr { text-align: right; }
.otable tfoot th { color: var(--muted); }
.otable .grand th, .otable .grand td { font-weight: 500; color: var(--ink); border-bottom: 0; }
.addrs { display: grid; gap: 16px; }
@media (min-width: 600px) { .addrs { grid-template-columns: 1fr 1fr; } }
.addrs h4 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--sand-2); }
.timeline li { position: relative; padding-bottom: 12px; }
.timeline li::before { content: ''; position: absolute; left: -21px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.timeline time { font-size: .76rem; color: var(--muted); }
.timeline p { font-size: .9rem; }

.auth { display: flex; justify-content: center; padding-block: 26px 60px; }
.auth__card { width: 100%; max-width: 420px; }
.auth__card h1 { margin: 6px 0 20px; }
.auth__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.auth__row a, .auth__switch a { text-decoration: underline; text-underline-offset: 3px; }
.auth__switch { margin-top: 22px; text-align: center; font-size: .92rem; color: var(--muted); }

.acct { display: grid; gap: 18px; padding-bottom: 60px; }
@media (min-width: 960px) { .acct { grid-template-columns: 220px 1fr; gap: 44px; } }
.acct__nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.acct__nav::-webkit-scrollbar { display: none; }
.acct__nav a, .acct__nav button { flex-shrink: 0; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .86rem; display: inline-flex; align-items: center; }
.acct__nav .is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.acct__nav form { margin: 0; }
@media (min-width: 960px) {
  .acct__nav { flex-direction: column; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); align-self: start; }
  .acct__nav a, .acct__nav button { height: auto; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; width: 100%; text-align: left; }
  .acct__nav .is-active { background: none; color: var(--gold); }
}
.acct__body { min-width: 0; display: grid; gap: 16px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.olist { display: grid; gap: 10px; }
.orow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.orow:hover { border-color: var(--ink-2); }
.orow__id { font-weight: 500; }
.orow__date { font-size: .82rem; color: var(--muted); }
.orow__total { font-weight: 500; text-align: right; }
.orow__go { font-size: .82rem; color: var(--gold); text-align: right; }
.contact { display: grid; gap: 24px; padding-bottom: 50px; }
@media (min-width: 960px) { .contact { grid-template-columns: 1fr 1.2fr; gap: 50px; } }
.clist { list-style: none; margin: 16px 0; padding: 0; border-top: 1px solid var(--line); }
.clist li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.clist span { display: block; font-size: .74rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 30px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.pager [aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Footer ---------- */
.ftr { margin-top: 40px; background: var(--cream); border-top: 1px solid var(--line); }
.ftr__trust { padding: 26px 0; border-bottom: 1px solid var(--line); }
.ftr__top { display: grid; gap: 4px; padding: 26px 0 14px; }
@media (min-width: 900px) { .ftr__top { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding: 44px 0 30px; } }
.ftr__brand img { width: 160px; margin-bottom: 12px; }
.ftr__brand p { font-size: .9rem; color: var(--ink-2); max-width: 320px; }
.ftr__social { display: flex; gap: 8px; margin: 16px 0 18px; }
.ftr__social a { width: 40px; height: 40px; border: 1px solid var(--sand-2); border-radius: 50%; display: grid; place-items: center; }
.ftr__social a:hover { border-color: var(--ink); }
.ftr__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ftr__col h3 { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; color: var(--ink-2); }
.ftr__col a:hover { color: var(--gold); }
@media (max-width: 899px) {
  .ftr__col { border-top: 1px solid var(--line); }
  .ftr__col h3 { display: flex; justify-content: space-between; margin: 0; padding: 15px 0; cursor: pointer; }
  .ftr__col h3::after { content: '+'; font-weight: 300; font-size: 1.2rem; line-height: 1; }
  .ftr__col.is-open h3::after { content: '−'; }
  .ftr__col ul { display: none; padding-bottom: 14px; }
  .ftr__col.is-open ul { display: grid; }
}
.ftr__bottom { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 16px 0 24px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.pay span { padding: 3px 8px; border: 1px solid var(--sand-2); border-radius: 4px; font-size: .7rem; background: #fff; }

.wa-fab { position: fixed; z-index: 50; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 50px; height: 50px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.wa-fab svg { width: 26px; height: 26px; }
.is-pdp .wa-fab, .is-checkout .wa-fab { display: none; }
@media (min-width: 1024px) { .is-pdp .wa-fab { display: grid; } .wa-fab { right: 22px; bottom: 22px; } }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ==========================================================================
   APP LAYER — native-app feel on phones (overrides the base styles above)
   ========================================================================== */
:root { --tile: #f3efe8; --tabbar: 62px; }

/* ---------- Bottom tab bar ---------- */
.tabbar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 253, 249, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--muted); font-size: .66rem; letter-spacing: .02em; }
.tabbar svg { width: 23px; height: 23px; }
.tabbar .is-active { color: var(--ink); }
.tabbar .is-active svg { stroke-width: 1.9; }
.tabbar .badge { top: 6px; right: calc(50% - 20px); }
body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
.wa-fab { bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom)); }
.is-checkout .tabbar, .is-pdp .tabbar { display: none; }
.is-checkout { padding-bottom: 0; }
.ftr { margin-top: 28px; }
@media (min-width: 1024px) {
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  .wa-fab { bottom: 22px; }
  .toast { bottom: 24px; }
}

/* ---------- Product card ---------- */
.pc__frame { background: var(--tile); border: 0; border-radius: 18px; }
.pc__media { aspect-ratio: 1; }
.pc__media img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; transition: transform .4s ease; }
@media (hover: hover) { .pc:hover .pc__media img { transform: scale(1.04); } }
.pc__tag { top: 10px; left: 10px; border: 0; background: #fff; border-radius: 999px; padding: 4px 9px; font-size: .64rem; }
.pc__tag--sale { background: var(--sale); color: #fff; }
.pc__wish { top: 8px; right: 8px; width: 34px; height: 34px; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .25); }
.pc__addform { position: absolute; right: 8px; bottom: 8px; margin: 0; }
.pc__add { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); transition: transform .15s, background .2s; }
.pc__add:active { transform: scale(.92); }
.pc__add:hover { background: #000; }
.pc__add svg { width: 20px; height: 20px; stroke-width: 2; }
.pc__add.is-done { background: var(--ok); }
.pc__body { display: grid; gap: 2px; padding: 10px 2px 0; }
.pc__body .price { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.pc__body .price del { font-weight: 400; font-size: .8rem; margin-left: 4px; }
.pc__name { font-size: .9rem; font-weight: 400; color: var(--ink); }
.pc__sub { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc__rating { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); }
.pc--out .pc__media img { opacity: .55; }
.grid { gap: 22px 12px; }
@media (min-width: 1100px) { .grid { gap: 36px 22px; } }
.row { grid-auto-columns: 42%; }
@media (min-width: 760px) { .row { grid-auto-columns: 28%; } }
.row--posts { grid-auto-columns: 78%; }
@media (min-width: 760px) { .row--posts { grid-auto-columns: 40%; } }
@media (min-width: 1100px) { .row--posts { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Home ---------- */
.home-search { padding-block: 12px 14px; }
@media (min-width: 1024px) { .home-search { display: none; } }
.promo { max-width: var(--wrap); margin: 0 auto; }
.promo__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
.promo__track::-webkit-scrollbar { display: none; }
.promo__card { position: relative; flex: 0 0 86%; scroll-snap-align: start; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; min-height: 196px; border-radius: 22px; background: var(--bg); overflow: hidden; color: var(--ink); }
.promo__text { padding: 20px 0 20px 20px; position: relative; z-index: 1; }
.promo__count { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.promo__title { font-size: 1.45rem; font-weight: 500; line-height: 1.12; margin: 6px 0 6px; }
.promo__sub { font-size: .82rem; color: var(--ink-2); line-height: 1.45; }
.promo__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 500; }
.promo__cta svg { width: 16px; height: 16px; }
.promo__img { width: 100%; height: 100%; max-height: 220px; object-fit: contain; mix-blend-mode: multiply; padding: 12px 10px 12px 0; }
.promo__dots { display: flex; justify-content: center; gap: 6px; padding-top: 10px; }
.promo__dots button { width: 7px; height: 7px; border: 0; padding: 0; border-radius: 4px; background: var(--sand-2); transition: width .25s, background .25s; }
.promo__dots button.is-active { width: 20px; background: var(--ink); }
@media (min-width: 760px) { .promo__card { flex-basis: 48%; } }
@media (min-width: 1024px) {
  .promo { padding-top: 28px; }
  .promo__card { flex-basis: calc((100% - 24px) / 3); min-height: 280px; }
  .promo__title { font-size: 1.8rem; }
  .promo__text { padding: 28px 0 28px 28px; }
  .promo__dots { display: none; }
}
.home-cats { padding-block: 18px 0; }
.bubble { width: 74px; gap: 7px; font-size: .74rem; color: var(--ink-2); }
.bubble__img { width: 68px; height: 68px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; overflow: hidden; border: 2px solid transparent; transition: border-color .2s; }
.bubble__img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; border: 0; padding: 0; border-radius: 0; background: none; }
.bubble.is-active .bubble__img { border-color: var(--gold); }
.bubble.is-active { color: var(--ink); font-weight: 500; }
@media (min-width: 1024px) { .bubble { width: 112px; font-size: .86rem; } .bubble__img { width: 100px; height: 100px; } }
.sec-head { align-items: center; margin-bottom: 14px; }
.sec-head .title-sm { margin: 0; font-size: 1.25rem; font-weight: 500; }
@media (min-width: 1024px) { .sec-head .title-sm { font-size: 1.6rem; } }
.more-link { text-decoration: none; color: var(--gold); font-size: .85rem; }
.sec { padding: 26px 0; }
@media (min-width: 1024px) { .sec { padding: 52px 0; } }
.finder-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--gold-soft); color: var(--ink); }
.finder-card__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; }
.finder-card__text { flex: 1; display: grid; gap: 2px; font-size: .82rem; color: var(--ink-2); line-height: 1.4; }
.finder-card__text b { font-size: .98rem; font-weight: 500; color: var(--ink); }
.fams { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .fams { grid-template-columns: repeat(5, 1fr); } }
.fam { padding: 12px; gap: 10px; border-radius: 14px; background: var(--white); }
.fam i { width: 34px; height: 34px; opacity: .9; }
.fam__t { display: grid; gap: 0; line-height: 1.25; }
.fam__t b { font-weight: 500; font-size: .92rem; }
.fam__t small { color: var(--muted); font-size: .74rem; }
.campaign-d { display: none; }
@media (min-width: 900px) { .campaign-d { display: block; padding-block: 10px; } }

/* ---------- Listing ---------- */
.lhead { padding-block: 12px 10px; }
.lhead h1 { font-size: 1.55rem; font-weight: 500; margin: 6px 0 2px; }
@media (max-width: 760px) { .lhead__intro { display: none; } .lhead .crumbs { display: none; } }
@media (min-width: 1024px) { .lhead h1 { font-size: 2.2rem; } }
.lcats { margin-bottom: 8px; }
.lbar__btn { border-color: var(--line); }

/* ---------- Product page ---------- */
.appbar { display: none; }
.gal__badge { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: var(--sale); color: #fff; font-size: .74rem; font-weight: 500; }
.gal__track { background: var(--tile); }
.gal__item { background: transparent; }
.gal__item img { mix-blend-mode: multiply; padding: 7%; }
.pinfo { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.pinfo__cat { font-size: .72rem; }
.pinfo__title { font-size: clamp(1.45rem, 5.4vw, 2.1rem); font-weight: 500; margin: 4px 0 2px; }
.pinfo__pricerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.pinfo__price { margin: 0; font-size: 1.5rem; font-weight: 600; gap: 8px; }
.pinfo__price del { font-size: .95rem; font-weight: 400; }
.pinfo__rating { margin: 0; }
.pinfo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip-s { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cream); font-size: .78rem; color: var(--ink-2); }
.chip-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chip-s--in { background: #e9f2ec; color: var(--ok); }
.chip-s--low { background: #f7eed9; color: #8a6116; }
.chip-s--out { background: #fbefed; color: var(--sale); }
.buy { grid-template-columns: auto 1fr; margin: 0; }
.buy .qty { height: 52px; border-radius: 12px; border-color: var(--line); }
.buy__add, .buy__now { min-height: 52px; border-radius: 12px; }
.buy__now { grid-column: 1 / -1; }
.wa-line { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.wa-line > svg:first-child { width: 34px; height: 34px; color: #25d366; flex-shrink: 0; }
.wa-line span { flex: 1; display: grid; line-height: 1.35; }
.wa-line b { font-weight: 500; font-size: .92rem; }
.wa-line small { font-size: .78rem; color: var(--muted); }
.card-s { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.card-s__title { font-size: .95rem; font-weight: 500; margin-bottom: 10px; }
.card-s .pinfo__short { margin: 0; }
.notes3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.notes3__col { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 12px; background: var(--cream); }
.notes3__col span { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.notes3__col b { font-weight: 400; font-size: .84rem; line-height: 1.3; }
.perks2 { display: grid; gap: 12px; }
.perks2 div { display: flex; align-items: center; gap: 12px; }
.perks2 svg { color: var(--gold); width: 24px; height: 24px; flex-shrink: 0; }
.perks2 span { display: grid; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.perks2 b { font-weight: 500; font-size: .88rem; color: var(--ink); }
.acc { margin: 0; }

@media (max-width: 1023px) {
  .is-pdp .hdr, .is-pdp .topbar, .is-pdp .crumbs { display: none; }
  .is-pdp { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .is-pdp .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .appbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; transition: background .2s, box-shadow .2s; }
  .appbar.is-solid { background: rgba(255, 253, 249, .97); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .appbar__btn { position: relative; width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); }
  .appbar__btn svg { width: 21px; height: 21px; }
  .appbar__btn.is-active svg { fill: var(--sale); stroke: var(--sale); }
  .appbar.is-solid .appbar__btn { box-shadow: none; background: var(--cream); }
  .appbar__title { flex: 1; min-width: 0; font-size: .95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
  .appbar.is-solid .appbar__title { opacity: 1; }
  .pdp-wrap { padding-inline: 0; }
  .gal { margin: 0; }
  .gal__item { aspect-ratio: 1 / 1.08; }
  .gal__dots { position: absolute; left: 0; right: 0; bottom: 36px; background: none; padding: 0; }
  .gal__badge { top: auto; bottom: 40px; }
  .pinfo { position: relative; z-index: 2; margin-top: -24px; padding: 22px var(--gutter) 6px; border-radius: 26px 26px 0 0; background: var(--bg); }
  .buy { position: fixed; z-index: 65; left: 0; right: 0; bottom: 0; grid-template-columns: auto 1fr; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 253, 249, .98); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .35); }
  .buy .qty { height: 50px; }
  .buy__add { min-height: 50px; padding: 0 12px; font-size: .78rem; }
  .buy__now { display: none; }
}
@media (min-width: 1024px) {
  .gal__track { border: 0; border-radius: 20px; }
  .gal__thumbs button { background: var(--tile); border-color: transparent; border-radius: 12px; }
  .gal__thumbs button img { mix-blend-mode: multiply; }
  .gal__thumbs button.is-active { border-color: var(--ink); }
  .pinfo { gap: 16px; align-content: start; }
}

/* ---------- Bag panel & misc ---------- */
.mc__item img, .cline img, .items__img img { border-radius: 12px; object-fit: contain; background: #fff; }

/* ==========================================================================
   APP LAYER 2 — sheets, add-ons, progress, install, micro-interactions
   ========================================================================== */
.linkbtn { border: 0; background: none; padding: 4px 0; color: var(--gold); font-size: .85rem; cursor: pointer; }

/* ---------- Filters as a bottom sheet (phones) ---------- */
@media (max-width: 767px) {
  #filters.panel-r { top: auto; left: 0; right: 0; width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 22px 22px 0 0; transform: translateY(100%); box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .35); }
  #filters.panel-r.is-open { transform: none; }
  #filters .panel__head { position: relative; height: 58px; padding-top: 8px; }
  #filters .panel__head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--sand-2); }
}

/* ---------- Bag: empty state + add-ons ---------- */
.mc__emptyicon { width: 76px; height: 76px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; margin: 0 auto 6px; color: var(--gold); }
.mc__emptyicon svg { width: 32px; height: 32px; }
.addons { padding: 18px 0 16px; }
.addons__title { display: block; padding: 0 var(--gutter) 10px; font-size: .92rem; font-weight: 500; }
.addons__row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); }
.addons__row::-webkit-scrollbar { display: none; }
.addon { flex: 0 0 132px; scroll-snap-align: start; display: grid; gap: 6px; align-content: start; }
.addon__img { display: block; aspect-ratio: 1; border-radius: 14px; background: var(--tile); overflow: hidden; }
.addon__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.addon__name { font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.addon__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.addon__foot b { font-size: .86rem; font-weight: 600; }
.addon__foot form { margin: 0; }
.addon__add { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .15s; }
.addon__add svg { width: 16px; height: 16px; stroke-width: 2; }
.addon__add:active { transform: scale(.9); }
.addon__add.is-loading .spin { width: 14px; height: 14px; }

/* ---------- Cart page ---------- */
.page-head__count { font-size: .9rem; font-weight: 400; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.empty .mc__emptyicon { margin-bottom: 16px; }
.cline { align-items: start; }
.cline__total { font-weight: 600; }
.cobar { display: none; }
@media (max-width: 979px) {
  .cart { padding-bottom: 96px; }
  .cobar { position: fixed; z-index: 65; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 253, 249, .98); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .35); }
  .cobar__sum { flex: 1; display: grid; line-height: 1.25; }
  .cobar__sum small { font-size: .74rem; color: var(--muted); }
  .cobar__sum b { font-size: 1.15rem; font-weight: 600; }
  .cobar .btn { min-height: 50px; border-radius: 12px; padding-inline: 24px; }
  .is-checkout .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ---------- Product page extras ---------- */
.eta { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .82rem; color: var(--ink-2); line-height: 1.4; }
.eta svg { color: var(--ok); flex-shrink: 0; }
.eta b { font-weight: 500; color: var(--ink); }

/* ---------- Home: shop by price ---------- */


/* ---------- Order progress ---------- */
.oprog { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oprog li { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; padding: 0 2px; }
.oprog li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.oprog li:first-child::before { display: none; }
.oprog li.is-done::before, .oprog li.is-current::before { background: var(--ok); }
.oprog i { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8rem; font-weight: 500; background: #fff; border: 2px solid var(--line); color: var(--muted); margin-bottom: 6px; }
.oprog i svg { width: 16px; height: 16px; stroke-width: 2.4; }
.oprog .is-done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.oprog .is-current i { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 0 5px rgba(59, 115, 80, .12); }
.oprog .is-wait i { border-style: dashed; border-color: var(--gold-2); color: var(--gold); }
.oprog b { font-size: .74rem; font-weight: 500; line-height: 1.25; }
.oprog small { font-size: .68rem; color: var(--muted); line-height: 1.25; }
.oprog li:not(.is-done):not(.is-current) b { color: var(--muted); font-weight: 400; }
.oprog--stop { margin: 16px 0; }
@media (min-width: 760px) { .oprog b { font-size: .86rem; } .oprog small { font-size: .76rem; } }

/* ---------- Account dashboard ---------- */
@media (max-width: 959px) { .acct--dash .acct__nav { display: none; } }
.lastorder { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--ink); color: #fff; }
.lastorder__top { display: flex; align-items: center; justify-content: space-between; }
.lastorder__top .label { color: var(--gold-2); }
.lastorder__main { display: grid; }
.lastorder__main b { font-size: 1.2rem; font-weight: 500; }
.lastorder__main span { font-size: .84rem; color: #cbbfae; }
.lastorder__go { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--gold-2); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: grid; gap: 2px; align-content: start; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform .15s, border-color .2s; }
.tile svg { width: 26px; height: 26px; color: var(--gold); margin-bottom: 10px; }
.tile b { font-weight: 500; font-size: .95rem; }
.tile small { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.tile:hover { border-color: var(--sand-2); }
.tile--gold { background: var(--gold-soft); border-color: transparent; }
.signout { margin: 0; }
.signout button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 0; color: var(--muted); font-size: .9rem; }
@media (min-width: 960px) { .signout { display: none; } }

/* ---------- Install banner ---------- */
.install { position: fixed; z-index: 75; left: 12px; right: 12px; bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(40, 30, 15, .45); animation: sheetUp .35s ease both; }
.install[hidden] { display: none; }
.install img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.install__text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.install__text b { font-weight: 500; font-size: .92rem; }
.install__text span { font-size: .76rem; color: var(--muted); }
.install .btn { flex-shrink: 0; border-radius: 999px; }
.install__x { flex-shrink: 0; width: 30px; height: 30px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; padding: 0; }
.is-pdp .install, .is-checkout .install { display: none; }
@media (min-width: 1024px) { .install { left: auto; right: 24px; bottom: 24px; width: 380px; } }
@keyframes sheetUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Micro-interactions ---------- */
@media (hover: none) {
  .pc__frame, .bubble__img, .fam, .pricechip, .tile, .promo__card, .finder-card { transition: transform .15s ease; }
  .pc__media:active, .bubble:active .bubble__img, .fam:active, .pricechip:active, .tile:active, .promo__card:active, .finder-card:active { transform: scale(.97); }
}
.btn:active { transform: scale(.98); }
.badge.is-bump { animation: bump .45s ease; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.fly { position: fixed; z-index: 120; pointer-events: none; border-radius: 14px; background: var(--tile); object-fit: contain; transition: transform .7s cubic-bezier(.5, -.2, .7, .4), opacity .7s ease; }
.panel__body[data-mini-cart] .mc__list { flex: 0 0 auto; }
.panel__body[data-mini-cart] .panel__foot { margin-top: auto; }
.cart .link { display: inline-flex; align-items: center; gap: 6px; }
.install:not([hidden]) ~ .wa-fab, body:has(.install:not([hidden])) .wa-fab { opacity: 0; pointer-events: none; }

/* ==========================================================================
   APP LAYER 3 — motion, gestures, loading states
   ========================================================================== */

/* ---------- Page transitions (Chrome / Edge / Safari 18+) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
  ::view-transition-group(pimg) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  .gal__item:first-child img { view-transition-name: pimg; }
  .tabbar { view-transition-name: tabbar; }
}

/* ---------- Header hides on scroll down (phones) ---------- */
@media (max-width: 1023px) {
  .hdr { transition: transform .28s ease; }
  .lbar { transition: top .28s ease; }
  .hdr-off .hdr { transform: translateY(-101%); }
  .hdr-off .lbar { top: 0; }
}

/* ---------- Back to top ---------- */
.totop { position: fixed; z-index: 68; left: 16px; bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { width: 20px; height: 20px; }
.is-pdp .totop { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .totop, .is-pdp .totop { bottom: 24px; left: auto; right: 90px; } }

/* ---------- Toast with action ---------- */
.toast--act { display: flex; align-items: center; gap: 16px; text-align: left; padding: 10px 10px 10px 18px; pointer-events: auto; border-radius: 12px; }
.toast--act span { flex: 1; }
.toast__act { flex-shrink: 0; border: 0; background: rgba(255, 255, 255, .14); color: var(--gold-2); font-weight: 500; font-size: .85rem; padding: 8px 12px; border-radius: 8px; }
.mc__item.is-leaving { opacity: .35; transition: opacity .2s; }

/* ---------- Skeletons & image fade ---------- */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--cream) 0%, #fbf8f2 50%, var(--cream) 100%); background-size: 200% 100%; animation: sk 1.2s ease-in-out infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
i.sk { height: 12px; width: 80%; font-style: normal; }
i.sk--s { width: 45%; }
i.sk--btn { width: 96px; height: 30px; margin-top: 6px; }
.sk--img { aspect-ratio: 1; width: 100%; border-radius: 18px; }
.mc__item .sk--img { width: 76px; height: 76px; border-radius: 12px; }
.sk-lines { display: grid; gap: 8px; align-content: start; padding-top: 4px; }
.sk-grid { display: contents; }
.sk-card { display: grid; gap: 8px; }
.pc__media img.is-ld, .addon__img img.is-ld { opacity: 0; }
.pc__media img, .addon__img img { transition: opacity .35s ease, transform .4s ease; }

/* ---------- Live search ---------- */


/* ---------- Listing: view toggle + filter pills ---------- */
.lbar__view { flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); padding: 0; }
.lbar__view svg { grid-area: 1 / 1; transition: opacity .2s, transform .2s; }
.lbar__view svg + svg { opacity: 0; transform: scale(.6); }
.lbar__view.is-big svg:first-child { opacity: 0; transform: scale(.6); }
.lbar__view.is-big svg + svg { opacity: 1; transform: none; }
@media (min-width: 760px) { .lbar__view { display: none; } }
@media (max-width: 759px) {
  .grid--big { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .grid--big .pc__frame { border-radius: 22px; }
  .grid--big .pc__media img { padding: 7%; }
  .grid--big .pc__body { grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 4px 0; }
  .grid--big .pc__body .price { grid-column: 2; grid-row: 1; font-size: 1.05rem; }
  .grid--big .pc__name { grid-column: 1; grid-row: 1; font-size: 1rem; font-weight: 500; }
  .grid--big .pc__sub, .grid--big .pc__rating { grid-column: 1 / -1; }
  .grid--big .pc__add { width: 46px; height: 46px; }
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .8rem; }
.pill svg { width: 14px; height: 14px; opacity: .75; }
.pill--clear { background: none; color: var(--gold); padding: 0 6px; }

/* ---------- Menu with category images ---------- */
.mnav .mnav__cat { justify-content: flex-start; gap: 14px; padding: 9px 0; }
.mnav__img { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.mnav__img img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.mnav__t { flex: 1; }

/* ---------- Tab bar active indicator ---------- */
.tabbar a::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--ink); transform: translateX(-50%); transition: width .25s ease; }
.tabbar a.is-active::before { width: 26px; }
.toast--act { width: min(420px, calc(100% - 32px)); }

/* ==========================================================================
   HERO SLIDER — phones: square photo card with live text · desktop: full-bleed artwork
   ========================================================================== */
.hero { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter) 0; }
.hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px; overscroll-behavior-x: contain; }
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 1 / 1.08; overflow: hidden; background: var(--tile); color: var(--ink); }
.hero__slide picture { display: contents; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6.5s cubic-bezier(.2, .6, .3, 1); }
.hero__slide.is-active .hero__img { transform: scale(1); }
.hero__slide--wide .hero__img { object-fit: cover; object-position: 30% center; }

/* glass caption card */
.hero__card { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: 18px; background: rgba(255, 253, 249, .8); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(14px); transition: opacity .5s ease .15s, transform .5s cubic-bezier(.2, .8, .2, 1) .15s; }
.hero__slide.is-active .hero__card { opacity: 1; transform: none; }
.hero__title { font-size: 1.32rem; font-weight: 500; line-height: 1.15; letter-spacing: -.005em; }
.hero__sub { font-size: .82rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__cta { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 500; letter-spacing: .02em; }
.hero__cta svg { width: 16px; height: 16px; transition: transform .2s; }
.hero__slide:hover .hero__cta svg { transform: translateX(3px); }

/* story-style progress bars */
.hero__bars { position: absolute; z-index: 3; top: 24px; left: calc(var(--gutter) + 14px); right: calc(var(--gutter) + 14px); display: flex; gap: 5px; pointer-events: none; }
.hero__bars button { flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.hero__bars i { display: block; position: relative; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .55); overflow: hidden; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); }
.hero__bars i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero__bars .is-done i::after { transform: scaleX(1); }
.hero__bars .is-active i::after { animation: heroBar var(--hero-ms, 6000ms) linear forwards; }
.hero.is-paused .hero__bars .is-active i::after { animation-play-state: paused; }
.hero--static .hero__bars .is-active i::after { animation: none; transform: scaleX(1); }
@keyframes heroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__arrow { display: none; }

/* tablets & desktop: the original wide artwork (words are part of the picture) */
@media (min-width: 768px) {
  .hero { max-width: none; padding: 0; }
  .hero__track { border-radius: 0; }
  .hero__slide, .hero__slide--wide { aspect-ratio: 1920 / 600; max-height: 620px; background: #f4f1ec; }
  .hero__slide .hero__img, .hero__slide--wide .hero__img { object-fit: cover; object-position: center; }
  .hero__card { display: none; }
  .hero__bars { top: auto; bottom: 18px; left: 50%; right: auto; width: min(360px, 40vw); transform: translateX(-50%); }
  .hero__bars i { background: rgba(31, 27, 23, .18); }
  .hero__arrow { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .4); opacity: 0; transition: opacity .25s, transform .25s; cursor: pointer; }
  .hero__arrow svg { width: 20px; height: 20px; }
  .hero__arrow--prev { left: 24px; transform: translateX(-8px); }
  .hero__arrow--next { right: 24px; transform: translateX(8px); }
  .hero:hover .hero__arrow { opacity: 1; transform: none; }
  .hero__arrow:hover { background: #fff; }
}
@media (min-width: 768px) and (max-width: 1023px) { .hero__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__img { transition: none; transform: none; } }
@media (min-width: 768px) {
  .hero__bars { bottom: 20px; width: auto; min-width: 220px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .hero__bars button { width: 56px; flex: 0 0 56px; height: 12px; padding: 4.5px 0; }
  .hero__bars i { background: rgba(31, 27, 23, .16); box-shadow: none; }
  .hero__arrow { top: auto; bottom: 16px; margin-top: 0; width: 42px; height: 42px; opacity: 1; transform: none; }
  .hero__arrow--prev { left: auto; right: 74px; transform: none; }
  .hero__arrow--next { right: 24px; transform: none; }
}

.hero__card { justify-items: start; } .hero__card .hero__cta { width: fit-content; width: -moz-fit-content; margin-right: auto; }

/* ==========================================================================
   COLLECTIONS — swipe row on phones; balanced grid (everything visible) from tablets up
   ========================================================================== */
.promo__head { display: none; }
.promo__track { -webkit-user-select: none; user-select: none; }
.promo__card img { -webkit-user-drag: none; }
@media (min-width: 768px) {
  .promo { max-width: var(--wrap); padding-top: 34px; }
  .promo__head { display: block; margin-bottom: 16px; }
  .promo__head .title-sm { margin: 0; font-size: 1.5rem; font-weight: 500; }
  .promo__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none; padding: 0 var(--gutter); }
  .promo__dots { display: none; }
  .promo__card { grid-column: span 3; min-height: 230px; grid-template-columns: minmax(0, 1fr) 42%; transition: transform .25s ease, box-shadow .25s ease; }
  .promo__text { padding: 26px 0 26px 26px; }
  .promo__title { font-size: 1.55rem; }
  .promo__img { max-height: 210px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  /* 5 collections: 2 big on top, 3 below · 3: one row · odd count on tablets: last one full width */
  .promo--n5 .promo__card:nth-child(n + 3) { grid-column: span 2; }
  .promo--n3 .promo__card { grid-column: span 2; }
  .promo--n5 .promo__card:nth-child(n + 3) .promo__title, .promo--n3 .promo__title { font-size: 1.3rem; }
  .promo--n5 .promo__card:nth-child(n + 3) .promo__sub, .promo--n3 .promo__sub { display: none; }
}
@media (min-width: 1024px) {
  .promo__card { min-height: 280px; }
  .promo__text { padding: 34px 0 34px 34px; }
  .promo__title { font-size: 1.9rem; }
  .promo__img { max-height: 250px; }
  .promo--n5 .promo__card:nth-child(n + 3), .promo--n3 .promo__card { min-height: 240px; }
  .promo--n5 .promo__card:nth-child(n + 3) .promo__title, .promo--n3 .promo__title { font-size: 1.45rem; }
  .promo--n5 .promo__card:nth-child(n + 3) .promo__sub, .promo--n3 .promo__sub { display: block; }
  .promo--n5 .promo__card:nth-child(n + 3) .promo__text, .promo--n3 .promo__text { padding: 28px 0 28px 28px; }
}
@media (hover: hover) and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .promo__card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -26px rgba(60, 45, 25, .45); }
  .promo__card:hover .promo__img { transform: scale(1.05); }
}
@media (min-width: 768px) { .home-cats { padding-top: 36px; } }

/* Slides without a phone image: show the whole banner on phones too (edge to edge, nothing cropped) */
@media (max-width: 767px) {
  .hero__slide--wide { aspect-ratio: 1920 / 600; }
  .hero__slide--wide .hero__img { object-fit: cover; object-position: center; }
  .hero--wide { padding: 0; }
  .hero--wide .hero__track { border-radius: 0; }
  .hero--wide .hero__bars { position: static; display: flex; justify-content: center; gap: 5px; margin: 10px auto 0; width: 132px; }
  .hero--wide .hero__bars button { flex: 1; }
  .hero--wide .hero__bars i { background: var(--sand-2); box-shadow: none; }
}

/* ==========================================================================
   BRAND BLUE #28BFEF — second brand colour.
   Roles: gold = heritage & labels · blue = "new / live / you are here" (badges, progress,
   active states, focus, alerts). Text never sits in #28BFEF on light backgrounds (too faint):
   --sky-deep is used for blue text, --sky for fills with ink text on top.
   ========================================================================== */
:root { --sky: #28bfef; --sky-deep: #0a77a0; --sky-soft: #e8f7fd; --sky-line: #bfe9f9; }

::selection { background: var(--sky-soft); color: var(--ink); }
:focus-visible { outline-color: var(--sky); }

/* counters on bag / wishlist / tab bar */
.badge { background: var(--sky); color: var(--ink); font-weight: 600; }

/* "you are here" indicators */
.tabbar a::before { background: var(--sky); height: 3px; }
.promo__dots button.is-active { background: var(--sky); }
.hero__bars i::after { background: var(--sky); }
.more__bar span, .finder__progress i.is-done { background: var(--sky); }
.bubble.is-active .bubble__img { border-color: var(--sky); }
.gal__dots i.is-active { background: var(--sky); }

/* live search highlight + toast action */
.toast__act { color: var(--sky); }

/* delivery estimate & notes */
.eta svg { color: var(--sky-deep); }
.mc__note { background: var(--sky-soft); color: var(--ink-2); }
.mc__note svg { color: var(--sky-deep); }

/* "New" tag */
.pc__tag--new, .tag-new { background: var(--sky); color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.tag-new { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: .66rem; text-transform: uppercase; }

/* blue button (alerts) */
.btn--sky { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.btn--sky:hover { background: #4fcbf2; border-color: #4fcbf2; }
.btn--sky svg { width: 18px; height: 18px; }

/* announcement bar: soft brand blue */

/* ---------- Back-in-stock card (product page) ---------- */
.notify { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--sky-soft); border: 1px solid var(--sky-line); }
.notify__head, .notify__done { display: flex; align-items: center; gap: 12px; }
.notify__head span:last-child, .notify__done span:last-child { display: grid; line-height: 1.35; }
.notify b { font-weight: 500; font-size: .98rem; }
.notify small { font-size: .82rem; color: var(--ink-2); }
.notify__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; }
.notify__icon svg { width: 20px; height: 20px; }
.buy--notify { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.buy--notify input[type=email] { height: 52px; min-width: 0; width: 100%; padding: 0 14px; border: 1px solid var(--sky-line); border-radius: 12px; background: #fff; font-size: 16px; }
.buy--notify input[type=email]:focus { border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px rgba(40, 191, 239, .2); }
.buy--notify .buy__add { gap: 6px; }
.notify__nl { margin: 0; color: var(--ink-2); }
@media (max-width: 1023px) {
  .buy--notify { grid-template-columns: minmax(0, 1fr) auto; }
  .buy--notify input[type=email] { height: 50px; }
  .buy--notify .buy__add { padding: 0 16px; }
}

/* ---------- Product cards: second photo on hover + quick view (desktop) ---------- */
.pc__media { position: relative; }
.pc__alt { position: absolute; inset: 0; opacity: 0; }
.pc__quick { display: none; }
@media (hover: hover) and (min-width: 1024px) {
  .pc:hover .pc__alt { opacity: 1; }
  .pc:hover .pc__media img:first-child:not(:only-child) { opacity: 0; }
  .pc__quick { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: .78rem; font-weight: 500; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); transform: translate(-50%, 8px); opacity: 0; transition: opacity .2s, transform .2s, background .2s; cursor: pointer; }
  .pc__quick svg { width: 16px; height: 16px; }
  .pc:hover .pc__quick, .pc__quick:focus-visible { opacity: 1; transform: translate(-50%, 0); }
  .pc__quick:hover { background: var(--sky); }
  .pc__quick.is-loading { opacity: .6; pointer-events: none; }
}

/* ---------- Quick view window ---------- */
.qv { position: fixed; z-index: 96; left: 50%; top: 50%; width: min(940px, calc(100vw - 48px)); max-height: calc(100vh - 64px); overflow: auto; border-radius: 24px; background: var(--bg); box-shadow: 0 40px 80px -30px rgba(30, 20, 10, .5); transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.qv.is-open { transform: translate(-50%, -50%); opacity: 1; }
.qv__x { position: absolute; top: 12px; right: 12px; z-index: 3; background: #fff; border-radius: 50%; }
.qv__body { display: grid; grid-template-columns: 1fr 1fr; }
.qv__gal { position: relative; background: var(--tile); border-radius: 24px 0 0 24px; overflow: hidden; }
.qv__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.qv__track::-webkit-scrollbar { display: none; }
.qv__track img { flex: 0 0 100%; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; mix-blend-mode: multiply; scroll-snap-align: start; }
.qv__nav { position: absolute; top: 50%; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; cursor: pointer; }
.qv__nav svg { width: 18px; height: 18px; }
.qv__nav--prev { left: 12px; } .qv__nav--next { right: 12px; }
.qv__info { display: grid; gap: 12px; align-content: center; padding: 40px 36px; }
.qv__title { margin: 0; font-size: 1.7rem; font-weight: 500; line-height: 1.15; }
.qv__sub { margin: -6px 0 0; color: var(--muted); }
.qv__price { font-size: 1.35rem; font-weight: 600; }
.qv__price del { font-size: .9rem; font-weight: 400; color: var(--muted); }
.qv__text { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.qv__notes { margin: 0; font-size: .86rem; color: var(--ink-2); }
.qv__notes span { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.qv__buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 4px 0 0; }
.qv__buy .qty { height: 50px; border-radius: 12px; }
.qv__buy .btn { min-height: 50px; border-radius: 12px; }
.qv__more { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-deep); font-size: .88rem; font-weight: 500; }
.qv__more svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .qv { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .qv.is-open { transform: none; }
  .qv__body { grid-template-columns: 1fr; }
  .qv__gal { border-radius: 24px 24px 0 0; }
  .qv__info { padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   EDITORIAL LAYER — brand story, store locator, price cards, journal lead
   ========================================================================== */
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sky); border-color: var(--sky); }
.btn--ghost-light { background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.sec--tight { padding-block: 8px 26px; }

/* ---------- Shop by price: cards with a real product ---------- */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .prices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pricecard { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 112px; padding: 14px 8px 14px 16px; border-radius: 18px; background: var(--tile); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.pricecard__t { position: relative; z-index: 1; display: grid; gap: 4px; min-width: 0; }
.pricecard__t small { display: flex; gap: 3px; }
.pricecard__t small i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pricecard__t b { font-weight: 500; font-size: .98rem; line-height: 1.2; }
.pricecard__t > span { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--sky-deep); font-weight: 500; }
.pricecard__t > span svg { width: 13px; height: 13px; }
.pricecard img { width: 74px; height: 92px; flex-shrink: 0; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
@media (min-width: 900px) { .pricecard { min-height: 140px; padding: 20px 14px 20px 22px; } .pricecard__t b { font-size: 1.12rem; } .pricecard img { width: 100px; height: 120px; } }
@media (hover: hover) { .pricecard:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -24px rgba(60, 45, 25, .5); } .pricecard:hover img { transform: scale(1.06) rotate(-2deg); } }

/* ---------- Brand band on the home page ---------- */
.brandband { position: relative; display: grid; min-height: 420px; border-radius: 26px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.brandband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.brandband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 16, 12, .15) 0%, rgba(20, 16, 12, .78) 62%, rgba(20, 16, 12, .9) 100%); }
.brandband__in { align-self: end; display: grid; gap: 14px; padding: 28px 22px 26px; }
.brandband .label { color: var(--sky); }
.brandband__title { margin: 0; font-size: clamp(1.7rem, 6vw, 2.8rem); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
.brandband__nums { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 6px 0 4px; }
.brandband__nums div { display: grid; }
.brandband__nums b { font-size: 1.6rem; font-weight: 500; line-height: 1.1; }
.brandband__nums span { font-size: .76rem; color: rgba(255, 255, 255, .72); }
.brandband__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.brandband__btns .btn { min-height: 46px; border-radius: 999px; padding-inline: 22px; }
@media (min-width: 900px) {
  .brandband { min-height: 480px; }
  .brandband::before { background: linear-gradient(90deg, rgba(20, 16, 12, .88) 0%, rgba(20, 16, 12, .6) 42%, rgba(20, 16, 12, 0) 75%); }
  .brandband__in { align-self: center; max-width: 520px; padding: 48px 56px; }
  .brandband__nums b { font-size: 2rem; }
}

/* ---------- About page ---------- */
.ahero { position: relative; display: grid; min-height: 72vh; min-height: 72svh; color: #fff; background: var(--ink); isolation: isolate; overflow: hidden; }
.ahero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ahero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 16, 12, .1) 20%, rgba(20, 16, 12, .82) 100%); }
.ahero__in { align-self: end; display: grid; gap: 12px; padding-block: 40px 44px; }
.ahero .label { color: var(--sky); }
.ahero__title { margin: 0; font-size: clamp(2.1rem, 8vw, 4.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -.015em; }
.ahero__lead { margin: 0; max-width: 520px; font-size: 1rem; color: rgba(255, 255, 255, .82); }
.astory { display: grid; gap: 28px; padding-block: 48px; }
.astory__fig { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--tile); aspect-ratio: 4 / 5; }
.astory__fig > img { width: 100%; height: 100%; object-fit: cover; }
.astory__fig figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 253, 249, .92); font-size: .82rem; font-weight: 500; }
.astory__fig figcaption img { width: 30px; height: 30px; }
.astory__text .title-sm { margin: 8px 0 14px; font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.astory__text .prose p { color: var(--ink-2); }
@media (min-width: 960px) {
  .astory { grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; padding-block: 90px; }
  .astory__fig { position: sticky; top: calc(var(--hdr) + 24px); }
  .astory__text .title-sm { font-size: 2rem; }
}
.aquote { background: var(--sky-soft); border-block: 1px solid var(--sky-line); text-align: center; padding-block: 56px; }
.aquote img { margin: 0 auto 14px; width: 56px; }
.aquote blockquote { margin: 0; font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 400; font-style: italic; letter-spacing: .01em; line-height: 1.1; color: var(--ink); }
.aquote p { margin: 10px 0 0; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sky-deep); }
.avalues { padding-block: 56px 40px; }
.avalues__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aval { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.aval > span { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; background: var(--sky-soft); color: var(--sky-deep); display: grid; place-items: center; }
.aval > span svg { width: 22px; height: 22px; }
.aval b { font-weight: 500; font-size: 1.02rem; }
.aval small { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.anums { background: var(--ink); color: #fff; }
.anums__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; padding-block: 44px; }
@media (min-width: 900px) { .anums__in { grid-template-columns: repeat(4, 1fr); padding-block: 60px; } }
.anums b { display: block; font-size: clamp(2rem, 6vw, 3rem); font-weight: 400; line-height: 1; color: var(--sky); }
.anums span { display: block; margin-top: 8px; font-size: .84rem; color: rgba(255, 255, 255, .72); }
.acta { position: relative; display: grid; margin-block: 56px 70px; border-radius: 26px; overflow: hidden; background: var(--tile); }
.acta > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.acta__in { display: grid; gap: 10px; padding: 26px 22px 28px; }
.acta__in .title-sm { margin: 0; font-size: 1.6rem; font-weight: 500; }
.acta__in p { margin: 0; color: var(--ink-2); }
.acta__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (min-width: 900px) { .acta { grid-template-columns: 1.2fr 1fr; align-items: center; } .acta > img { height: 100%; aspect-ratio: auto; min-height: 380px; } .acta__in { padding: 48px; } .acta__in .title-sm { font-size: 2rem; } }

/* ---------- Store locator ---------- */
.stores { padding-block: 40px 80px; scroll-margin-top: calc(var(--hdr) + 12px); }
.stores__head { display: grid; gap: 16px; margin-bottom: 16px; }
.stores__head .title-sm { margin: 6px 0 4px; font-size: 1.6rem; font-weight: 500; }
.stores__head p { margin: 0; }
.stores__search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.stores__search:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(40, 191, 239, .18); }
.stores__search svg { color: var(--muted); flex-shrink: 0; }
.stores__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; }
@media (min-width: 900px) { .stores__head { grid-template-columns: 1fr 380px; align-items: end; } }
.stores__tabs { margin: 0 0 18px; }
.stores__tabs .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.stores__grid { columns: 1; column-gap: 14px; }
@media (min-width: 700px) { .stores__grid { columns: 2; } }
@media (min-width: 1100px) { .stores__grid { columns: 3; } }
.scard { break-inside: avoid; margin-bottom: 14px; padding: 6px 4px 4px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.scard[hidden] { display: none; }
.scard__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }
.scard__pin { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--sky-soft); color: var(--sky-deep); display: grid; place-items: center; }
.scard__pin svg { width: 16px; height: 16px; }
.scard__head b { flex: 1; font-weight: 500; font-size: .98rem; }
.scard__head small { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--cream); font-size: .74rem; color: var(--ink-2); display: grid; place-items: center; }
.scard ul { list-style: none; margin: 0; padding: 0 4px 4px; }
.srow { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); }
.srow[hidden] { display: none; }
.srow > span { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.srow b { font-weight: 500; font-size: .88rem; }
.srow small { font-size: .78rem; color: var(--muted); }
.srow__map { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s; }
.srow__map svg { width: 16px; height: 16px; transform: rotate(-45deg); }
.srow__map:hover { background: var(--sky); }
.srow mark { background: var(--sky-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.stores__none { padding: 20px 0; }

/* ---------- Journal: lead story ---------- */
.postlead { display: grid; gap: 18px; margin-bottom: 36px; }
.postlead__img { display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--tile); }
.postlead__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.postlead:hover .postlead__img img { transform: scale(1.03); }
.postlead__text { display: grid; gap: 10px; align-content: center; }
.postlead__title { margin: 0; font-size: clamp(1.4rem, 4.5vw, 2.1rem); font-weight: 500; line-height: 1.15; }
.postlead__text p { margin: 0; color: var(--ink-2); }
.postlead__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: .84rem; color: var(--muted); }
.postlead__foot .link { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-deep); font-weight: 500; }
@media (min-width: 900px) { .postlead { grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; } }
.stores__tabs { padding-inline: 0; margin-inline: 0; }
.pricecard__t b { white-space: nowrap; }
.brandband::before { background: linear-gradient(180deg, rgba(20, 16, 12, .2) 0%, rgba(20, 16, 12, .72) 34%, rgba(20, 16, 12, .92) 100%); }
.brandband .label { color: #8fdcf6; }
@media (min-width: 900px) { .brandband::before { background: linear-gradient(90deg, rgba(20, 16, 12, .9) 0%, rgba(20, 16, 12, .62) 45%, rgba(20, 16, 12, 0) 78%); } }
@media (max-width: 899px) { .fams > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.brandsec { padding-block: 26px; } @media (min-width: 1024px) { .brandsec { padding-block: 52px; } }

/* ==========================================================================
   PHOTO VIEWER — full screen, warm studio backdrop so white product shots blend in
   ========================================================================== */
.viewer { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--ink); -webkit-user-select: none; user-select: none; }
.viewer__bg { position: absolute; inset: 0; z-index: -1; background: #f4f0ea; opacity: 0; transition: opacity .3s ease; }
.viewer.is-open .viewer__bg { opacity: 1; }
.viewer.is-closing .viewer__bg { opacity: 0; transition-duration: .22s; }
.viewer.is-dragging .viewer__bg { transition: none; }

.viewer__bar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px 18px; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease .1s, transform .25s ease .1s; }
.viewer.is-open .viewer__bar { opacity: 1; transform: none; }
.viewer__count { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.viewer__count b { font-weight: 500; color: var(--ink); }
.viewer__title { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 500; text-align: center; }
.viewer__tools { justify-self: end; display: flex; gap: 6px; }
.viewer__btn { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .35); cursor: pointer; transition: background .2s, transform .15s; }
.viewer__btn:hover { background: #fff; }
.viewer__btn:active { transform: scale(.94); }
.viewer__btn svg { width: 21px; height: 21px; }
.viewer.is-zoomed [data-v-zoom] { background: var(--ink); color: #fff; }

.viewer__stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; }
.viewer.is-zoomed .viewer__stage { cursor: zoom-out; }
.viewer__track { display: flex; height: 100%; will-change: transform; }
.vslide { flex: 0 0 100%; height: 100%; display: grid; place-items: center; padding: 8px 4vw; overflow: hidden; }
.vimg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transform-origin: center; will-change: transform; pointer-events: auto; -webkit-user-drag: none; }

.viewer__nav { position: absolute; z-index: 2; top: 50%; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); display: none; place-items: center; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .4); cursor: pointer; transition: opacity .2s, background .2s, transform .15s; }
.viewer__nav svg { width: 22px; height: 22px; }
.viewer__nav:hover:not(:disabled) { background: var(--ink); color: #fff; }
.viewer__nav:disabled { opacity: .25; cursor: default; }
.viewer__nav--prev { left: 24px; } .viewer__nav--next { right: 24px; }
@media (hover: hover) and (pointer: fine) { .viewer__nav { display: grid; } }

.viewer__thumbs { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; opacity: 0; transform: translateY(8px); transition: opacity .25s ease .1s, transform .25s ease .1s; }
.viewer__thumbs::-webkit-scrollbar { display: none; }
.viewer.is-open .viewer__thumbs { opacity: 1; transform: none; }
.viewer__thumbs button { flex: 0 0 auto; width: 58px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: #fff; overflow: hidden; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.viewer__thumbs button img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.viewer__thumbs button.is-active { opacity: 1; border-color: var(--ink); }
.viewer__thumbs button:hover { opacity: 1; }
@media (min-width: 1024px) { .viewer__thumbs button { width: 70px; height: 70px; } .vslide { padding: 12px 120px; } }

.viewer__hint { position: absolute; z-index: 3; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(31, 27, 23, .82); color: #fff; font-size: .78rem; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.viewer__hint.is-gone { opacity: 0; }
.viewer:not(:has(.viewer__thumbs)) .viewer__hint { bottom: calc(28px + env(safe-area-inset-bottom)); }

/* tap once on phones to hide the controls and see only the photo */
.viewer.is-bare .viewer__bar, .viewer.is-bare .viewer__thumbs { opacity: 0; pointer-events: none; }
.viewer.is-zoomed .viewer__thumbs { opacity: .0; pointer-events: none; }
.viewer.is-closing .viewer__bar, .viewer.is-closing .viewer__thumbs, .viewer.is-closing .viewer__nav { opacity: 0; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) { .viewer__bg, .viewer__bar, .viewer__thumbs { transition: none; } }

/* ---------- Product gallery: magnify in place (desktop) + expand button ---------- */
.gal__track { position: relative; }
.gal__expand { position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); cursor: pointer; transition: background .2s, transform .15s; }
.gal__expand svg { width: 18px; height: 18px; }
.gal__expand:hover { background: var(--sky); }
.gal__expand:active { transform: scale(.94); }
@media (max-width: 1023px) { .gal__expand { bottom: 40px; right: 16px; } }
.gal__item { overflow: hidden; cursor: zoom-in; }
.gal__item img { transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .gal__item.is-magnify img { transform: scale(1.9); transition: transform .12s ease-out; }
}
/* the sliding track is its own layer, so the warm backdrop must live on it for white photos to blend (multiply) */
.viewer__track { background: rgba(244, 240, 234, var(--va, 1)); transition: background-color .3s ease; }
.viewer:not(.is-open) .viewer__track, .viewer.is-closing .viewer__track { background: transparent; }
.viewer.is-dragging .viewer__track { transition: none; }
.viewer__track, .vimg { will-change: auto; }
/* Viewer on pure white: product shots are white-backed, so they sit seamlessly without relying on blend modes */
.viewer__bg { background: #fff; }
.viewer__track { background: transparent; }
.vimg { mix-blend-mode: normal; }
.viewer__btn, .viewer__nav { background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .3); }
.viewer__btn:hover { background: var(--cream); }
.viewer__thumbs button { background: #fff; border-color: var(--line); }
.viewer__thumbs button.is-active { border-color: var(--ink); }
.viewer__bar { border-bottom: 1px solid transparent; }
.vslide { position: relative; display: block; padding: 0; }
.vimg { position: absolute; top: 8px; bottom: 8px; left: 4vw; right: 4vw; width: calc(100% - 8vw); height: calc(100% - 16px); max-width: none; max-height: none; object-fit: contain; }
@media (min-width: 1024px) { .vimg { left: 120px; right: 120px; width: calc(100% - 240px); top: 12px; bottom: 12px; height: calc(100% - 24px); } }

/* ==========================================================================
   JOURNAL — list, cards and article reading experience
   ========================================================================== */
.journal { padding-bottom: 80px; }
.journal__head { max-width: 680px; margin: 0 auto; padding-block: 36px 34px; text-align: center; }
.journal__title { margin: 10px 0 10px; font-size: clamp(2.3rem, 7vw, 4rem); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; }
.journal__head p { margin: 0; color: var(--muted); font-size: 1rem; }
@media (min-width: 900px) { .journal__head { padding-block: 56px 48px; } }

/* cards */
.posts { display: grid; gap: 34px 24px; }
@media (min-width: 700px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; } }
.post { display: grid; gap: 16px; align-content: start; }
.post__img { display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--tile); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.post:hover .post__img img { transform: scale(1.04); }
.post__body { display: grid; gap: 8px; }
.post__meta { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.post__title { margin: 0; font-size: 1.22rem; font-weight: 500; line-height: 1.28; letter-spacing: -.005em; }
.post__title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s ease; }
.post:hover .post__title a { background-size: 100% 1px; }
.post p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .84rem; font-weight: 500; color: var(--sky-deep); }
.post__more svg { width: 15px; height: 15px; transition: transform .2s; }
.post:hover .post__more svg { transform: translateX(3px); }
.postlead { margin-bottom: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.postlead__img { border-radius: 24px; aspect-ratio: 3 / 2; }
.postlead__title { font-weight: 400; letter-spacing: -.015em; font-size: clamp(1.7rem, 4.6vw, 2.6rem); line-height: 1.1; }

/* reading progress */
.readbar { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.readbar i { display: block; height: 100%; width: 100%; background: var(--sky); transform: scaleX(0); transform-origin: left; }

/* article */
.art__head { max-width: 860px; padding-block: 26px 30px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.art__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--ink-2); transition: background .2s; }
.art__back:hover { background: #fff; }
.art__back svg { width: 15px; height: 15px; }
.art__kicker { color: var(--gold); }
.art__title { margin: 0; font-size: clamp(2rem, 6.4vw, 3.6rem); font-weight: 400; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.art__dek { margin: 0; max-width: 620px; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.art__by { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; text-align: left; }
.art__by img { width: 34px; height: 34px; }
.art__by span { display: grid; line-height: 1.25; }
.art__by b { font-weight: 500; font-size: .88rem; }
.art__by small { font-size: .76rem; color: var(--muted); }
.art__hero { margin: 0 auto; max-width: 1120px; }
.art__hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px; background: var(--tile); }
@media (max-width: 760px) { .art__hero { padding-inline: 0; } .art__hero img { border-radius: 0; aspect-ratio: 4 / 3; } }
.art__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 920px; padding-block: 40px 60px; }
@media (min-width: 1024px) { .art__wrap { grid-template-columns: 64px minmax(0, 680px); justify-content: center; gap: 56px; padding-block: 64px 80px; } }
.art__rail { order: 2; display: flex; align-items: center; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.art__rail span { margin-right: 6px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.art__rail a, .art__rail button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.art__rail a:hover, .art__rail button:hover { background: var(--sky); border-color: var(--sky); }
.art__rail svg { width: 17px; height: 17px; }
@media (min-width: 1024px) {
  .art__rail { order: 0; position: sticky; top: calc(var(--hdr) + 32px); align-self: start; flex-direction: column; padding-top: 6px; border: 0; }
  .art__rail span { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 0 8px; }
}

/* article typography */
.prose--article { font-size: 1.06rem; line-height: 1.85; color: #3d362f; }
.prose--article > * + * { margin-top: 1.15em; }
.prose--article > p:first-child { font-size: 1.22rem; line-height: 1.7; color: var(--ink); }
.prose--article > p:first-child::first-letter { float: left; margin: .08em .1em 0 0; font-size: 3.6em; line-height: .82; font-weight: 400; color: var(--gold); }
.prose--article h2 { margin-top: 2.2em; font-size: 1.6rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.prose--article h3 { margin-top: 1.8em; font-size: 1.18rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.prose--article h2 + *, .prose--article h3 + * { margin-top: .6em; }
.prose--article b, .prose--article strong { font-weight: 500; color: var(--ink); }
.prose--article a { color: var(--sky-deep); text-decoration-color: rgba(10, 119, 160, .35); text-underline-offset: 4px; }
.prose--article a:hover { text-decoration-color: currentColor; }
.prose--article ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.prose--article ul li { position: relative; padding-left: 24px; }
.prose--article ul li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); }
.prose--article blockquote { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--sky); font-size: 1.3rem; line-height: 1.5; font-style: normal; color: var(--ink); }
.prose--article img { border-radius: 18px; margin-block: 1.6em; }

/* shop the story + closing call to action */
.art__shop { background: var(--cream); }
.art__shop .sec-head > div .title-sm, .sec-head > div .title-sm { margin-top: 4px; }
.art__cta { display: grid; gap: 22px; margin-block: 56px; padding: 32px 26px; border-radius: 26px; background: var(--ink); color: #fff; }
.art__cta .label { color: var(--sky); }
.art__cta-title { margin: 8px 0 8px; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 400; line-height: 1.15; }
.art__cta p { margin: 0; color: rgba(255, 255, 255, .72); max-width: 460px; }
.art__cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.art__cta-btns .btn { min-height: 48px; border-radius: 999px; padding-inline: 22px; gap: 8px; }
@media (min-width: 900px) { .art__cta { grid-template-columns: 1fr auto; align-items: center; padding: 48px 56px; } }
@media (max-width: 1023px) { .drop { display: none; } }

/* ==========================================================================
   JOURNAL SIDEBAR
   ========================================================================== */
.jlayout { display: grid; gap: 48px; }
.jlayout__main { min-width: 0; }
@media (min-width: 1024px) { .jlayout { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } }
@media (min-width: 700px) { .posts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jresult { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 28px; padding: 14px 18px; border-radius: 14px; background: var(--sky-soft); border: 1px solid var(--sky-line); font-size: .92rem; }
.jresult a { color: var(--sky-deep); font-weight: 500; }

.jside { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1024px) { .jside--sticky { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; } }
.jside__search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.jside__search:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(40, 191, 239, .18); }
.jside__search svg { color: var(--muted); flex-shrink: 0; }
.jside__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; }
.jbox { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.jbox__h { font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.jbox p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
.jtoc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.jtoc li { counter-increment: toc; }
.jtoc a { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 7px 8px 7px 0; border-radius: 8px; font-size: .88rem; line-height: 1.35; color: var(--ink-2); transition: color .2s; }
.jtoc a::before { content: counter(toc, decimal-leading-zero); font-size: .72rem; color: var(--muted); padding-top: 2px; }
.jtoc a:hover { color: var(--ink); }
.jtoc a.is-active { color: var(--ink); font-weight: 500; }
.jtoc a.is-active::before { color: var(--sky-deep); }
.jfinder { background: var(--ink); border-color: var(--ink); color: #fff; gap: 6px; transition: transform .2s; }
.jfinder:hover { transform: translateY(-2px); }
.jfinder__icon { width: 42px; height: 42px; margin-bottom: 6px; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; }
.jfinder__icon svg { width: 20px; height: 20px; }
.jfinder b { font-weight: 500; font-size: 1.05rem; }
.jfinder small { color: rgba(255, 255, 255, .7); font-size: .84rem; }
.jfinder__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .84rem; font-weight: 500; color: var(--sky); }
.jfinder__go svg { width: 15px; height: 15px; }
.jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jitem { display: flex; align-items: center; gap: 12px; padding: 6px; margin: 0 -6px; border-radius: 12px; transition: background .2s; }
.jitem:hover { background: var(--cream); }
.jitem__img { width: 60px; height: 60px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--tile); }
.jitem__img img { width: 100%; height: 100%; object-fit: cover; }
.jitem__img--product img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.jitem__t { min-width: 0; display: grid; gap: 2px; }
.jitem__t b { font-weight: 500; font-size: .86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jitem__t small { font-size: .76rem; color: var(--muted); }
.jnews { background: var(--sky-soft); border-color: var(--sky-line); }
.jnews form { display: grid; gap: 8px; margin: 0; }
.jnews input[type=email] { height: 46px; padding: 0 14px; border: 1px solid var(--sky-line); border-radius: 12px; background: #fff; font-size: 16px; min-width: 0; }
.jnews input[type=email]:focus { outline: 0; border-color: var(--sky); }
.jnews .btn { min-height: 46px; border-radius: 12px; }
.jsocial { display: flex; flex-wrap: wrap; gap: 8px; }
.jsocial a { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.jsocial a:hover { background: var(--sky); border-color: var(--sky); }
.jsocial svg { width: 18px; height: 18px; }

/* post page: share rail | article | sidebar */
@media (min-width: 1024px) {
  .art__wrap { max-width: var(--wrap); grid-template-columns: 56px minmax(0, 680px) 300px; justify-content: space-between; gap: 40px; }
}
@media (min-width: 1280px) { .art__wrap { grid-template-columns: 56px minmax(0, 700px) 320px; gap: 56px; } }
@media (max-width: 1023px) {
  .art__wrap .jside { order: 3; margin-top: 12px; }
  .art__wrap .jtoc { display: none; }
}

/* ==========================================================================
   SEARCH — full-screen on phones, drop-down panel on desktop
   ========================================================================== */
.search { position: fixed; inset: 0; z-index: 97; pointer-events: none; }
.search__panel { pointer-events: auto; position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); opacity: 0; transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease; }
.search.is-open .search__panel { opacity: 1; transform: none; }
.search__bar { flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--bg); padding-top: env(safe-area-inset-top); }
.search__barin { display: flex; align-items: center; gap: 10px; height: 72px; }
.search__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; cursor: text; }
.search__field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(40, 191, 239, .14); }
.search__field > svg { width: 20px; height: 20px; flex-shrink: 0; }
.search__field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.search__field input::-webkit-search-cancel-button { display: none; }
.search__field input::placeholder { color: var(--muted); }
.search__spin { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--sand-2); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; }
.search__clear { width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.search__clear svg { width: 15px; height: 15px; }
.search__cancel { flex-shrink: 0; height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font-size: .92rem; font-weight: 500; cursor: pointer; }
.search__cancel kbd { display: none; }
.search__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px 0 calc(40px + env(safe-area-inset-bottom)); }

/* section headings */
.sh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.sh > span { font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sh em { font-style: normal; margin-left: 4px; color: var(--muted); letter-spacing: .06em; }
.sh a, .sh .linkbtn { font-size: .82rem; color: var(--sky-deep); font-weight: 500; }

/* idle state */
.sidle { display: grid; gap: 30px; }
.sidle__side, .sidle__main { display: grid; align-content: start; gap: 0; min-width: 0; }
.sidle__side > * + .sh, .sidle__main > * + .sh { margin-top: 28px; }
.recents { margin-bottom: 28px; }
.recents__list { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; }
.rchip a { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 4px 0 14px; font-size: .88rem; }
.rchip a svg { width: 15px; height: 15px; color: var(--muted); }
.rchip button { width: 32px; height: 100%; padding: 0; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.rchip button svg { width: 13px; height: 13px; }
.rchip button:hover { color: var(--ink); }
.strend { display: flex; flex-wrap: wrap; gap: 8px; }
.strend a { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--cream); font-size: .88rem; transition: background .2s; }
.strend a svg { width: 15px; height: 15px; color: var(--sky-deep); }
.strend a:hover, .strend a:focus-visible { background: var(--sand); }
.sfams { display: grid; gap: 2px; }
.sfams a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; transition: background .2s; }
.sfams a:hover, .sfams a:focus-visible { background: var(--cream); }
.sfams i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }
.sfams span { display: grid; line-height: 1.3; }
.sfams b { font-weight: 500; font-size: .92rem; }
.sfams small { font-size: .76rem; color: var(--muted); }
.scats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scat { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.scat:hover, .scat:focus-visible { border-color: var(--sand-2); transform: translateY(-1px); }
.scat__img { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: var(--tile); overflow: hidden; }
.scat__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.scat__t { flex: 1; min-width: 0; font-size: .86rem; font-weight: 500; line-height: 1.25; }
.scat small { font-size: .74rem; color: var(--muted); }

/* product tiles (idle "Trending now" + results) */
.sprods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.sprod { display: grid; gap: 4px; align-content: start; border-radius: 16px; }
.sprod__img { position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; border-radius: 16px; background: var(--tile); overflow: hidden; }
.sprod__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform .35s ease; }
.sprod__img.is-out img { opacity: .5; }
.sprod__img em { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: #fff; font-style: normal; font-size: .66rem; font-weight: 500; }
.sprod:hover .sprod__img img, .sprod:focus-visible .sprod__img img { transform: scale(1.05); }
.sprod__t { font-size: .86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sprod small { font-size: .74rem; color: var(--muted); }
.sprod b { font-size: .9rem; font-weight: 600; }
.sprod del { font-weight: 400; font-size: .76rem; color: var(--muted); }
.search mark { background: none; color: var(--sky-deep); font-weight: 600; }

/* results */
.sres[hidden] { display: none; }
.sres__fix { margin: 0 0 20px; padding: 12px 16px; border-radius: 14px; background: var(--sky-soft); border: 1px solid var(--sky-line); font-size: .9rem; }
.sres__fix a { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.sres__fix span { color: var(--muted); }
.sres__grid { display: grid; gap: 26px; }
.ssug { display: grid; gap: 2px; margin-bottom: 8px; }
.ssug a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; transition: background .2s; }
.ssug a:hover, .ssug a:focus-visible { background: var(--cream); }
.ssug a > span:last-child { display: grid; line-height: 1.3; font-size: .92rem; }
.ssug small { font-size: .74rem; color: var(--muted); }
.ssug__img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--tile); overflow: hidden; }
.ssug__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.ssug__dot { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55); }
.ssearch { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--cream); font-size: .9rem; transition: background .2s; }
.ssearch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssearch b { font-weight: 600; }
.ssearch:hover, .ssearch:focus-visible { background: var(--sand); }
.sres__all { width: 100%; margin-top: 22px; min-height: 50px; border-radius: 999px; gap: 8px; }
.snone { display: grid; justify-items: center; gap: 6px; padding: 24px 0 30px; text-align: center; }
.snone__icon { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; color: var(--muted); }
.snone b { font-weight: 500; font-size: 1.1rem; }
.snone span { color: var(--muted); font-size: .9rem; max-width: 340px; }
.search [data-sr-item]:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

@media (min-width: 700px) {
  .scats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sprods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .search__panel { inset: 0 0 auto 0; max-height: min(86vh, 780px); border-radius: 0 0 28px 28px; box-shadow: 0 40px 80px -40px rgba(30, 20, 10, .45); }
  .search__barin { height: 96px; gap: 24px; }
  .search__field { height: 58px; padding: 0 12px 0 22px; }
  .search__field input { font-size: 1.15rem; }
  .search__cancel { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 400; }
  .search__cancel kbd { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: 500 .7rem var(--font); color: var(--ink-2); }
  .search__cancel:hover { color: var(--ink); }
  .search__body { padding: 30px 0 36px; }
  .sidle { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .scats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sres__grid { grid-template-columns: minmax(0, 1fr); }
  .sres.has-side .sres__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .sres__all { width: auto; justify-self: start; padding-inline: 28px; }
}
.is-checkout .search__panel, .search { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .search__panel { transition: none; } }

/* ---------- Search results page ---------- */
.shead { display: grid; gap: 14px; padding-block: 26px 18px; }
.shead__form { display: flex; align-items: center; gap: 10px; max-width: 720px; height: 58px; padding: 0 6px 0 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.shead__form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(40, 191, 239, .14); }
.shead__form svg { width: 20px; height: 20px; flex-shrink: 0; }
.shead__form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 1.05rem; }
.shead__form input::-webkit-search-cancel-button { display: none; }
.shead__form .btn { min-height: 46px; border-radius: 999px; padding-inline: 22px; }
.shead__count, .shead__fix { margin: 0; color: var(--ink-2); }
.shead__count b { font-weight: 600; color: var(--ink); }
.shead__fix { padding: 12px 16px; border-radius: 14px; background: var(--sky-soft); border: 1px solid var(--sky-line); max-width: 720px; }
.shead__fix b { font-weight: 600; color: var(--sky-deep); }
.shead__rel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shead__rel > span { font-size: .82rem; color: var(--muted); margin-right: 2px; }
.shead__rel .chip small { margin-left: 4px; font-size: .72rem; color: var(--muted); }
@media (max-width: 600px) { .shead__form .btn { padding-inline: 16px; } .shead__form { height: 54px; padding-left: 16px; } }
.snone--page { padding: 40px 0 36px; }
.strend--center { justify-content: center; margin-top: 10px; }
.ssug b { font-weight: 500; } .sh + .sprods, .sh + .scats { margin-top: 0; }

/* ==========================================================================
   ENERGY — lifestyle direction (brand blue + coral, bold display type, colour-pop tiles)
   Re-maps the old tokens so every page follows; component tweaks below.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --ink: #111214;
  --ink-2: #3b3d44;
  --muted: #6b6f78;
  --line: #e7e9ee;
  --cream: #f3f7fa;
  --sand: #e9eef3;
  --sand-2: #d9e0e7;
  --tile: #eef6fb;
  --gold: #e8542a;            /* accents (was gold) -> coral */
  --gold-2: #ff8a5f;
  --gold-soft: #ffe8de;
  --coral: #ff6b3d;
  --coral-ink: #c2410c;       /* coral that is readable as small text */
  --sky: #28bfef;
  --sky-deep: #0a77a0;
  --sky-soft: #e3f6fd;
  --sky-line: #b8e7f8;
  --butter: #fff1bf;
  --pink: #ffd9e4;
  --mint: #d6f1df;
  --peach: #ffe1d4;
  --display: 'Bricolage Grotesque', 'Jost', system-ui, sans-serif;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 22px 44px -26px rgba(17, 18, 20, .35);
}
body { background: var(--bg); color: var(--ink); }
::selection { background: var(--sky); color: var(--ink); }

/* ---------- Type: bold, tight, characterful ---------- */
h1, h2, h3, .title, .title-sm, .journal__title, .art__title, .ahero__title, .brandband__title, .promo__title, .hero__title,
.postlead__title, .qv__title, .pinfo__title, .lhead h1, .page-head .title, .sec-head .title-sm, .stores__head .title-sm, .art__cta-title {
  font-family: var(--display); font-weight: 700; letter-spacing: -.025em;
}
.title { font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.02; }
.title-sm, .sec-head .title-sm { font-size: clamp(1.45rem, 4.4vw, 2.3rem); line-height: 1.05; }
@media (min-width: 1024px) { .sec-head .title-sm { font-size: 2.4rem; } }
.label, .kicker, .art__kicker, .post__meta, .drop__h, .jbox__h, .sh > span { color: var(--coral-ink); letter-spacing: .14em; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .74rem; font-weight: 600; text-transform: uppercase; }
.kicker::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--coral); }
.sec-head { align-items: flex-end; }
.sec-head > div { display: grid; }
.more-link { color: var(--ink); font-weight: 600; font-size: .86rem; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.more-link:hover { color: var(--sky-deep); }
.price ins, .pc__body .price, .pinfo__price, .qv__price, .sprod b, .cobar__sum b { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }

/* ---------- Buttons: pills with punch ---------- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .06em; transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--sky); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(40, 191, 239, .8); }
.btn--gold { background: var(--coral); color: var(--ink); }
.btn--gold:hover { background: #ff7f57; box-shadow: 0 10px 24px -12px rgba(255, 107, 61, .8); }
.btn--line { border: 2px solid var(--ink); }
.btn--sky { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.btn--sky:hover { background: #fff; border-color: #fff; color: var(--ink); }
.buy__add, .buy__now, .qv__buy .btn, .cobar .btn, .notify .btn { border-radius: 999px !important; }
.chip { border-radius: 999px; font-weight: 500; }
.chip.is-active, .stores__tabs .chip.is-active, .lbar .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:hover { border-color: var(--ink); }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--sky); color: var(--ink); font-weight: 500; }
.topbar a:hover { color: #fff; }
.hdr { background: rgba(255, 255, 255, .94); }
.hdr__link { font-weight: 600; letter-spacing: .06em; }
.hdr__link::after { height: 3px; border-radius: 2px; background: var(--coral); }
.hdr__search { background: var(--cream) !important; border-color: transparent !important; color: var(--ink-2) !important; }
.hdr__search:hover { box-shadow: 0 0 0 2px var(--sky) !important; }
.badge { background: var(--coral); color: var(--ink); }
.tabbar a::before { background: var(--coral); }

/* ---------- Energy band (moving text) ---------- */
.marquee { overflow: hidden; background: var(--ink); color: #fff; padding: 14px 0; }
.marquee__track { display: flex; align-items: center; gap: 26px; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-family: var(--display); font-size: clamp(1.1rem, 3.4vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.marquee i { font-style: normal; color: var(--sky); font-size: 1rem; }
.marquee i:nth-of-type(even) { color: var(--coral); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Product cards: colour-pop tiles ---------- */
.pc__frame { border-radius: 22px; background: var(--tile); transition: transform .25s ease, box-shadow .25s ease; }
.grid > .pc:nth-child(5n+1) .pc__frame, .row > .pc:nth-child(5n+1) .pc__frame { background: #e3f5fd; }
.grid > .pc:nth-child(5n+2) .pc__frame, .row > .pc:nth-child(5n+2) .pc__frame { background: #ffece4; }
.grid > .pc:nth-child(5n+3) .pc__frame, .row > .pc:nth-child(5n+3) .pc__frame { background: #fff4d2; }
.grid > .pc:nth-child(5n+4) .pc__frame, .row > .pc:nth-child(5n+4) .pc__frame { background: #ffe6ee; }
.grid > .pc:nth-child(5n+5) .pc__frame, .row > .pc:nth-child(5n+5) .pc__frame { background: #e3f4e8; }
@media (hover: hover) { .pc:hover .pc__frame { transform: translateY(-4px); box-shadow: 0 22px 34px -24px rgba(17, 18, 20, .45); } }
.pc__add { background: var(--ink); }
.pc__add:hover { background: var(--coral); color: var(--ink); }
.pc__tag { font-weight: 700; }
.pc__tag--sale { background: var(--coral); color: var(--ink); }
.pc__name { font-weight: 500; }

/* ---------- Home: collections, vibes, moments ---------- */
.promo__card { border-radius: 26px; }
.promo__title { font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1; }
.promo__count { color: var(--ink); font-weight: 600; }
.promo__cta { background: var(--ink); border-radius: 999px; }
.promo__card:hover .promo__cta { background: var(--coral); color: var(--ink); }
@media (min-width: 1024px) { .promo__title { font-size: 2.4rem; } .promo--n5 .promo__card:nth-child(n + 3) .promo__title { font-size: 1.7rem; } }

.vibes__row { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
.vibes__row::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .vibes__row { grid-auto-columns: 34%; } }
@media (min-width: 1100px) { .vibes__row { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 4px 0 8px; overflow: visible; } }
.vibe { position: relative; display: grid; align-content: start; min-height: 250px; padding: 20px; border-radius: 26px; background: var(--bg); overflow: hidden; scroll-snap-align: start; isolation: isolate; transition: transform .25s ease; }
.vibe:hover { transform: translateY(-4px) rotate(-.6deg); }
.vibe__t { display: grid; gap: 4px; position: relative; z-index: 1; }
.vibe__t small { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.vibe__t b { font-family: var(--display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.vibe__t em { font-style: normal; font-size: .9rem; color: var(--ink-2); }
.vibe img { position: absolute; right: -6%; bottom: -4%; width: 72%; height: auto; mix-blend-mode: multiply; transform: rotate(-8deg); transition: transform .4s ease; z-index: -1; }
.vibe:hover img { transform: rotate(-2deg) scale(1.06); }
.vibe__go { position: absolute; left: 20px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }

.moments__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.moment { position: relative; display: block; border-radius: 22px; overflow: hidden; background: var(--tile); aspect-ratio: 1; }
.moment img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.moment:hover img { transform: scale(1.05); }
.moment--1 { grid-column: span 2; aspect-ratio: 4 / 3; }
.moment--quote { display: grid; align-content: end; gap: 10px; padding: 20px; background: var(--sky); color: var(--ink); grid-column: span 2; aspect-ratio: auto; min-height: 220px; }
.moment--quote span { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.moment--quote b { font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.moment--quote .btn { justify-self: start; }
@media (min-width: 900px) {
  .moments__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
  .moment--1 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .moment--quote { grid-column: span 2; min-height: 0; padding: 30px; }
}

.finder-card { background: var(--ink); color: #fff; border-radius: 22px; }
.finder-card__text, .finder-card__text b { color: #fff; }
.finder-card__text span { color: rgba(255, 255, 255, .75); }
.finder-card__icon { background: var(--sky); color: var(--ink); }
.pricecard { background: var(--cream); border-radius: 22px; }
.pricecard:nth-child(1) { background: #e3f5fd; } .pricecard:nth-child(2) { background: #ffece4; } .pricecard:nth-child(3) { background: #fff4d2; } .pricecard:nth-child(4) { background: #ffe6ee; }
.pricecard__t b { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.pricecard__t small i { background: var(--coral); }
.brandband .label, .ahero .label, .art__cta .label { color: var(--sky); }
.bubble.is-active .bubble__img { border-color: var(--coral); }
.bubble__img { background: var(--cream); }

/* ---------- Product page ---------- */
.pinfo__title { font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.02; }
.pinfo__cat { color: var(--coral-ink); font-weight: 600; }
.chip-s { border-radius: 999px; font-weight: 500; }
.chip-s--in { background: #dcf5e4; color: #146c37; }
.notes3__col { background: var(--cream); border-radius: 16px; }
.notes3__col span { color: var(--coral-ink); font-weight: 600; }
.card-s, .wa-line, .perks2 { border-radius: 22px; }
.perks2 svg, .trust svg { color: var(--sky-deep); }
.gal__track { background: #e3f5fd; }

/* ---------- Listing ---------- */
.lhead h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.lbar { background: rgba(255, 255, 255, .96); }

/* ---------- Footer: dark & bold ---------- */
.ftr { background: var(--ink); color: rgba(255, 255, 255, .78); border-top: 0; }
.ftr__shout { background: var(--coral); color: var(--ink); }
.ftr__shoutin { display: grid; gap: 18px; padding-block: 36px; }
.ftr__shout b { font-family: var(--display); font-size: clamp(2.4rem, 9vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; line-height: .92; }
.ftr__shout b span { color: #fff; }
.ftr__shout p { margin: 0 0 16px; max-width: 420px; font-size: 1rem; color: var(--ink); }
.ftr__shout .btn--sky { background: var(--ink); border-color: var(--ink); color: #fff; }
.ftr__shout .btn--sky:hover { background: #fff; border-color: #fff; color: var(--ink); }
@media (min-width: 900px) { .ftr__shoutin { grid-template-columns: 1.2fr 1fr; align-items: end; padding-block: 56px; } }
.ftr__trust { border-color: rgba(255, 255, 255, .12); }
.trust b, .ftr__col h3 { color: #fff; }
.trust span { color: rgba(255, 255, 255, .6); }
.trust svg { color: var(--sky); }
.ftr__brand img { filter: invert(1); }
.ftr__brand p { color: rgba(255, 255, 255, .7); }
.ftr__social a { border-color: rgba(255, 255, 255, .22); color: #fff; }
.ftr__social a:hover { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.ftr__col ul { color: rgba(255, 255, 255, .72); }
.ftr__col a:hover { color: var(--sky); }
.ftr__col { border-color: rgba(255, 255, 255, .12) !important; }
.ftr__bottom { border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); }
.pay span { background: transparent; border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8); }

/* ---------- Journal / about / misc accents ---------- */
.aquote { background: var(--sky); border: 0; }
.aquote blockquote { font-family: var(--display); font-style: normal; font-weight: 800; letter-spacing: -.03em; }
.aquote p { color: var(--ink); }
.anums b { color: var(--sky); font-family: var(--display); font-weight: 800; }
.art__cta { background: var(--ink); }
.jfinder { background: var(--ink); }
.jnews { background: var(--sky-soft); }
.drop__finder { color: var(--coral-ink) !important; }
.empty .mc__emptyicon, .mc__emptyicon { background: var(--sky-soft); color: var(--sky-deep); }

/* ---------- Scroll reveal (only when JS is on; content is always visible without it) ---------- */
.js-reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js-reveal .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .rv { opacity: 1; transform: none; transition: none; } }
@media (min-width: 900px) {
  .moments__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 270px)); grid-auto-rows: auto; }
  .moment { aspect-ratio: auto; }
  .moment--1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .moment--quote { grid-column: 3 / span 2; grid-row: 2; }
}

/* Scent-quiz nudge (replaces the old "install the app" bar) */
.install { background: linear-gradient(120deg, #fff 0%, #fff4ee 100%); border-color: rgba(255, 107, 61, .25); }
.install__art { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid #e3f5fd; display: grid; place-items: center; overflow: hidden; }
.install__art img { width: 32px; height: 32px; border-radius: 0; }
a.install__text { color: inherit; text-decoration: none; }
.install__text b { font-family: var(--display, inherit); font-weight: 700; }
.install .btn { background: var(--coral, #ff6b3d); border-color: var(--coral, #ff6b3d); color: #fff; }
.install__text b, .install__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.install .btn { padding-inline: 18px; }

/* Horizontal rails scroll sideways only — no vertical jiggle inside them on phones */
.bubbles, .chips, .row, .gal__track, .acct__nav, .promo__track, .addons__row, .hero__track, .qv__track, .vibes__row, .viewer__thumbs, [data-recent-row] {
  overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
}

/* Shop by price on phones: picture sits top-right in its own cell, so the price label never runs over it */
@media (max-width: 899px) {
  .pricecard { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dots img" "label label" "count count"; align-items: start; gap: 6px 8px; min-height: 0; padding: 14px 14px 16px 16px; }
  .pricecard__t { display: contents; }
  .pricecard__t small { grid-area: dots; align-self: start; padding-top: 4px; }
  .pricecard__t b { grid-area: label; font-size: clamp(1.02rem, 4.9vw, 1.2rem); white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .pricecard__t > span { grid-area: count; }
  .pricecard img { grid-area: img; width: 76px; height: 76px; margin: -4px -4px 0 0; border-radius: 12px; object-fit: contain; }
}

/* ---------- True product colours ----------
   Photos are never blended into the pastel tiles (multiply tinted the products). Each photo sits on its own white
   card instead; the pastel stays around it as a frame. */
.drop__img img, .pc__media img, .promo__img, .bubble__img img, .gal__item img, .gal__thumbs button img, .addon__img img,
.mnav__img img, .qv__track img, .pricecard img, .vimg, .jitem__img--product img, .scat__img img, .sprod__img img,
.ssug__img img, .vibe img { mix-blend-mode: normal; }
.pc__media { margin: 6px; border-radius: 17px; background: #fff; overflow: hidden; }
.pc__media img { padding: 7%; }
.grid--big .pc__media { border-radius: 18px; }
.pc--out .pc__media img { opacity: .55; }
.gal__item, .gal__thumbs button { background: #fff; }
.drop__img, .addon__img, .mnav__img, .scat__img, .sprod__img, .ssug__img, .jitem__img--product { background: #fff; }
.bubble__img { background: #fff; border: 3px solid #e3f5fd; }
.bubble.is-active .bubble__img { border-color: var(--coral); }
.bubble__img img { width: 66%; height: 66%; border-radius: 8px; }
.pricecard img, .promo__img { background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 10px 22px -16px rgba(17, 18, 20, .45); }
.promo__img { width: calc(100% - 14px); height: auto; aspect-ratio: 1; max-height: 210px; padding: 8%; margin-right: 14px; justify-self: end; border-radius: 20px; }
.vibe img { background: #fff; border-radius: 22px; padding: 7%; width: 58%; right: -4%; bottom: -6%; box-shadow: 0 18px 30px -18px rgba(17, 18, 20, .5); }