/* ---- tokens ------------------------------------------------------- */
:root {
  --ivory: #F6F3EC;
  --ink: #1C1B17;
  --ink-soft: #4A473E;
  --hairline: #D8D2C2;
  --bramble: #0F80C4;
  --bramble-dark: #521E1E;
  --stone: #8A8371;
  --white: #FFFFFF;
  --gold: #B8935A;
  --danger: #C0392B;
  --danger-soft: #F5E4E0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em 0;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.container-wide {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
  display: block;
}

/* ---- header --------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--ivory);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* full-bleed 3-column grid: logo pins to the far left edge, nav sits
   truly centered on the page regardless of logo/cart width, cart pins
   to the far right edge — independent of the 1120px content container
   used everywhere else on the site. */
.site-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  height: 76px;
  padding: 0 clamp(20px, 4vw, 48px);
}

.logo {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.logo-mark {
  height: 50px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.logo-word {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
}

.logo span { color: var(--bramble); }

.logo small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---- header actions: Book Appointment CTA sits beside the bag link ---- */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 20px;
  border-radius: 999px;
  background: var(--bramble);
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}

.header-book-btn:hover { background: var(--bramble-dark); transform: translateY(-1px); }

.header-book-btn .icon-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--bramble);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-book-btn .icon-circle svg { width: 11px; height: 11px; }

@media (max-width: 860px) {
  .header-book-btn span.label { display: none; }
  .header-book-btn { padding: 9px; }
}

.main-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.main-nav a:hover, .main-nav a.active {
  color: var(--ink);
  border-color: var(--bramble);
}

.cart-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color .15s;
}

.cart-link:hover, .cart-link.active { color: var(--ink); }

.cart-count,
.wishlist-count {
  background: var(--bramble);
  color: var(--white);
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

@media (max-width: 860px) {
  .site-header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo actions" "nav nav";
    row-gap: 12px;
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .logo { grid-area: logo; }
  .header-actions { grid-area: actions; }
  .main-nav { grid-area: nav; justify-self: stretch; justify-content: center; flex-wrap: wrap; gap: 18px; }
}

/* ---- account, wishlist + cart triggers ---------------------------------
   The account icon links out (to be wired up once accounts exist), the
   heart opens the wishlist drawer, and the bag opens the cart drawer -
   both drawers open via JS instead of navigating away. ------------------- */
.account-link,
.wishlist-trigger,
.cart-trigger {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  transition: background .15s, color .15s;
}

.account-link i,
.wishlist-trigger i,
.cart-trigger i {
  font-size: 22px;
  line-height: 1;
}

.account-link:hover,
.wishlist-trigger:hover,
.wishlist-trigger.active,
.cart-trigger:hover,
.cart-trigger.active {
  background: var(--hairline);
  color: var(--ink);
}

.wishlist-trigger.has-items i { color: var(--bramble); }

.cart-trigger .cart-count,
.wishlist-trigger .wishlist-count {
  position: absolute;
  top: -2px;
  right: -2px;
}

@media (max-width: 860px) {
  .header-actions { gap: 6px; }
}

@media (max-width: 400px) {
  .logo-mark { height: 38px; }
  .account-link, .wishlist-trigger, .cart-trigger { width: 40px; height: 40px; }
  .account-link i, .wishlist-trigger i, .cart-trigger i { font-size: 19px; }
}

/* ---- side drawers -------------------------------------------------------
   Shared slide-in panel styling used by both the cart drawer and the
   wishlist drawer. Each is populated via fetch() (cart_summary /
   wishlist_summary) and kept in sync as items are added or removed. ------ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 23, 0.45);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 40;
}

.drawer-overlay.is-open { opacity: 1; }

.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--white);
  box-shadow: -12px 0 32px rgba(28, 27, 23, 0.14);
  z-index: 41;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.25, .8, .25, 1);
}

.side-drawer.is-open { transform: translateX(0); }

.side-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}

.side-drawer-header h3 { margin: 0; font-size: 20px; }

.side-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.side-drawer-close:hover { background: var(--hairline); color: var(--ink); }
.side-drawer-close i { font-size: 18px; line-height: 1; }

.side-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}

.side-drawer-empty {
  color: var(--ink-soft);
  font-size: 14px;
  padding: 32px 0;
  text-align: center;
}

.side-drawer-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}

.side-drawer-item:last-child { border-bottom: none; }

.side-drawer-item-img,
.side-drawer-item-img--empty {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--ivory);
}

.side-drawer-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: block;
}

.side-drawer-item-name:hover { color: var(--bramble); }

.side-drawer-item-meta {
  font-size: 12px;
  color: var(--stone);
  margin-top: 4px;
}

.side-drawer-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.side-drawer-item-subtotal {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.side-drawer-item-remove {
  border: none;
  background: transparent;
  color: var(--stone);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  transition: color .15s;
}

.side-drawer-item-remove:hover { color: var(--bramble); }

.side-drawer-item-move {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.side-drawer-item-move:hover { background: var(--ink); color: var(--ivory); }

.side-drawer-footer {
  border-top: 1px solid var(--hairline);
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.side-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.side-drawer-action { width: 100%; }

@media (max-width: 480px) {
  .side-drawer { width: 100vw; }
}

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.btn:hover { background: var(--bramble); border-color: var(--bramble); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-outline:hover { background: var(--ink); color: var(--ivory); }

.btn-block { width: 100%; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- hero ------------------------------------------------------------- */
.hero {
  position: relative;
}

.hero-row {
  min-height: 680px;
}

/* soft ambient glow behind the copy column — the quiet bit of depth
   that keeps the ivory field from reading flat next to the photo */
.hero-copy-col::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 2%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(110, 42, 42, 0.07) 0%, rgba(110, 42, 42, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---- hero copy column --------------------------------------------------- */
.hero-copy-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 28px 130px clamp(28px, 6vw, 72px);
}

.hero-copy { position: relative; z-index: 1; max-width: 460px; animation: heroSlideLeft .9s ease both; }
.hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; animation: heroFadeIn .7s ease both; animation-delay: .3s; }
.hero-copy .eyebrow svg { width: 13px; height: 13px; color: var(--bramble); }
.hero-copy h1 { animation: heroFadeIn .7s ease both; animation-delay: .38s; }
.hero-copy .lede { animation: heroFadeIn .7s ease both; animation-delay: .46s; }
.hero-cta-row { animation: heroFadeIn .7s ease both; animation-delay: .54s; }
.hero-stats { animation: heroFadeIn .7s ease both; animation-delay: .62s; }

.hero-copy h1 {
  font-size: 54px;
  line-height: 1.05;
  max-width: 14ch;
}

.hero-copy h1 .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--bramble);
}

.hero-copy p.lede {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 38ch;
  margin-bottom: 34px;
}

/* ---- cta row: pill button with an inset arrow badge + a quiet link ------ */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 28px;
  border-radius: 999px;
  background: var(--bramble);
  color: var(--ivory);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 16px 30px -14px rgba(110, 42, 42, 0.55);
  transition: background .15s, box-shadow .15s, transform .15s;
}

.btn-pill:hover { background: var(--bramble-dark); transform: translateY(-1px); }

.btn-pill-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--bramble);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-pill-icon svg { width: 15px; height: 15px; }

.watch-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.watch-link .icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}

.watch-link .icon-circle svg { width: 12px; height: 12px; }

.watch-link:hover .icon-circle { background: var(--ink); color: var(--ivory); }

/* ---- stat cluster: a floating card, not a flat bordered strip ----------- */
.hero-stats {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0;
  max-width: 460px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 28px 54px -22px rgba(28, 27, 23, 0.22);
}

.hero-stat {
  flex: 1;
  padding: 22px 24px;
}

.hero-stat svg {
  width: 20px;
  height: 20px;
  color: var(--bramble);
  margin-bottom: 10px;
  display: block;
}

.hero-stat .num {
  font-family: 'Fraunces', serif;
  font-size: 27px;
  color: var(--ink);
  display: block;
}

.hero-stat .label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-top: 2px;
}

/* on wide screens let the card bleed a little past its column and rest
   on top of the image edge, the way a raised card would sit on a desk */
@media (min-width: 992px) {
  .hero-stats { margin-right: -56px; }
}

/* ---- hero visual column: single blob-clipped image, no clutter ---------- */
.hero-visual-col {
  position: relative;
  min-height: 480px;
}

.hero-blob {
  position: absolute;
  inset: 0;
  border-radius: 52% 0 0 58% / 62% 0 0 66%;
  overflow: hidden;
  background: var(--stone);
  box-shadow: -30px 24px 70px -24px rgba(28, 27, 23, 0.35);
  animation: heroSlideRight 1s ease both;
  animation-delay: .1s;
}

/* warm brand-tinted wash over the photo so it reads as part of the
   palette rather than a raw, disconnected stock image */
.hero-blob::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(110, 42, 42, 0.22) 0%, rgba(110, 42, 42, 0.02) 40%, rgba(28, 27, 23, 0.18) 100%);
  pointer-events: none;
}

/* shared crossfade behaviour for the cycling hero image
   (5 slides x 4s each = 20s full loop) */
.cycle-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: cycleFade 20s infinite;
}

.cycle-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cycle-slide .placeholder-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
}

.cycle-slide .studio-art {
  width: 100%;
  height: 100%;
}

.cycle-slide .placeholder-slide span {
  margin: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cycle-slide:nth-child(1) { animation-delay: 0s; }
.cycle-slide:nth-child(2) { animation-delay: 4s; }
.cycle-slide:nth-child(3) { animation-delay: 8s; }
.cycle-slide:nth-child(4) { animation-delay: 12s; }
.cycle-slide:nth-child(5) { animation-delay: 16s; }

/* percentages re-timed for a 20s loop so each slide still gets the
   same ~4s on-screen window as before (fade in, hold, fade out, wait) */
@keyframes cycleFade {
  0%     { opacity: 0; transform: scale(1.04); }
  1.8%   { opacity: 1; transform: scale(1.04); }
  18%    { opacity: 1; transform: scale(1); }
  21.6%  { opacity: 0; transform: scale(1); }
  100%   { opacity: 0; }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroSlideLeft {
  from { opacity: 0; transform: translateX(-70px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroSlideRight {
  from { opacity: 0; transform: translateX(70px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- scroll reveal: sections fade + rise up as they enter the viewport --
   .fade-up starts hidden/offset; main.js adds .in-view via
   IntersectionObserver once the section is on screen. Respects
   prefers-reduced-motion by skipping the transition entirely. --------- */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- feature strip: tucks under the blob's edge on desktop, with a
   fade rather than a hard seam; drops to a plain full-width bar on
   small screens where there's no image edge to tuck under ------------- */
.hero-feature-strip {
  position: relative;
  z-index: 4;
}

.hero-feature-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  width: 100%;
  max-width: 850px;
  padding: 10px 28px;
  gap: 20px;
  background: var(--bramble);
}

.hero-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ivory);
  font-size: 13px;
  letter-spacing: 0.02em;
  flex: 1 1 200px;
}

.hero-feature-list svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }

@media (min-width: 992px) {
  .hero-feature-strip {
    position: absolute;
    left: 0;
    bottom: 32px;
    width: min(64%, 720px);
  }
  .hero-feature-list {
    border-radius: 0 100px 100px 0;
    padding: 20px clamp(20px, 4vw, 48px) 20px clamp(28px, 6vw, 72px);
    background: linear-gradient(to right, var(--bramble) 0%, var(--bramble) 72%, rgba(110, 42, 42, 0) 100%);
    flex-wrap: nowrap;
    box-shadow: 0 20px 40px -18px rgba(28, 27, 23, 0.3);
  }
  .hero-feature-list li:last-child { opacity: 0.85; }
}

@media (max-width: 991px) {
  .hero-row { min-height: 0; }
  .hero-copy-col { padding: 40px 20px 32px; }
  .hero-copy-col::before { display: none; }
  .hero-visual-col { min-height: 46vh; }
  .hero-blob { border-radius: 28px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-stats { flex-wrap: wrap; border-radius: 14px; }
  .hero-stat { flex: 1 1 33%; border-bottom: 1px solid var(--hairline); }
}

@media (max-width: 575px) {
  .hero-stat { flex: 1 1 50%; }
  .hero-cta-row { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-copy .eyebrow, .hero-copy h1, .hero-copy .lede, .hero-cta-row,
  .hero-stats, .hero-blob, .cycle-slide, .reveal,
  .testimonial-slide {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cycle-slide:not(:first-child) { display: none; }
  .testimonial-slide { position: absolute; visibility: hidden; }
  .testimonial-slide.is-active { position: relative; visibility: visible; }
}

/* ---- sections ----------------------------------------------------------- */
.section { padding: 76px 0; }

/* scroll-triggered fade-up, toggled by main.js via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-tight { padding: 48px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 20px;
}

/* ---- product grid --------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.product-card:hover {
  border-color: var(--stone);
  box-shadow: 0 24px 48px -28px rgba(28, 27, 23, 0.28);
  transform: translateY(-3px);
}
/* =========================================================================
   NEW — wishlist heart button overlaid on product cards (catalogue grid
   and the "You may also like" row). Wrap card + button share
   .product-card-wrap as a positioning context.
   ========================================================================= */
.product-card-wrap {
  position: relative;
}

.product-card-wrap .product-card {
  height: 100%;
}

.wishlist-heart {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(28, 27, 23, 0.35);
  transition: background .15s, color .15s, transform .15s;
}

.wishlist-heart:hover {
  background: var(--white);
  transform: scale(1.06);
}

.wishlist-heart svg { pointer-events: none; }

.wishlist-heart.is-active {
  color: var(--bramble);
}

.wishlist-heart.is-active svg {
  fill: var(--bramble);
}

.wishlist-heart:disabled {
  opacity: 0.6;
  cursor: default;
}

/* =========================================================================
   NEW — the "Wishlist" toggle button next to Add to bag on the detail page
   ========================================================================= */
.detail-wishlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.detail-wishlist-btn svg { flex-shrink: 0; }

.detail-wishlist-btn.is-active {
  border-color: var(--bramble);
  color: var(--bramble);
  background: transparent;
}

.detail-wishlist-btn.is-active svg { fill: var(--bramble); }

.detail-wishlist-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 480px) {
  .qty-row { flex-wrap: wrap; }
  .detail-wishlist-btn { width: 100%; justify-content: center; }
}
.product-index {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--stone);
}

.product-thumb {
  aspect-ratio: 4 / 5;
  background: #EDE7D8;
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-name { font-size: 21px; margin-bottom: 2px; }
.product-price { color: var(--bramble); font-size: 17px; font-weight: 600; }
.product-cat { color: var(--stone); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 860px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ---- filters --------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.filter-pill {
  padding: 7px 16px;
  border: 1px solid var(--hairline);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.filter-pill.active { border-color: var(--ink); color: var(--ink); background: var(--white); }

/* ---- product detail --------------------------------------------------------- */
/* Tighter than the default .section (76px top/bottom) so the product
   page fits within one screen without scrolling to see the price/
   add-to-bag row - this page doesn't need the extra breathing room a
   landing section does. */
.product-detail-section {
  padding: 28px 0 56px;
}

@media (max-width: 860px) {
  .product-detail-section { padding: 18px 0 44px; }
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

/* =========================================================================
   REPLACE the existing .product-detail-image rule with this — caps the
   image height instead of letting it stretch full column height.
   ========================================================================= */
.product-detail-image {
  aspect-ratio: 4 / 3;
  max-height: 420px;
  width: 100%;
  background: #EDE7D8;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  overflow: hidden;
}
.product-detail-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .product-detail-image { max-height: 280px; }
}

/* =========================================================================
   NEW — styled product description (replaces the plain <p class="lede">).
   Renders paragraphs with readable spacing and turns "- " bullet lines
   (typed in the admin) into an actual list with the site's gold dot
   marker, matching the .expertise-list treatment used elsewhere.
   ========================================================================= */
.product-detail-description {
  margin-bottom: 24px;
}

.product-detail-description p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 52ch;
}

.product-detail-description p:last-child { margin-bottom: 0; }

.product-detail-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-detail-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.product-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* =========================================================================
   NEW — "You may also like" recommendations row below the detail grid.
   Reuses .product-card/.product-thumb but on a 4-up grid, dialed back
   to 3-up on tablet and stacked on mobile via the existing breakpoints.
   ========================================================================= */
.related-products .product-grid--related {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
  .related-products .product-grid--related { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .related-products .product-grid--related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .related-products .product-grid--related { grid-template-columns: 1fr; }
}


.product-detail-price { font-size: 24px; color: var(--bramble); margin-bottom: 24px; }

.qty-row { display: flex; gap: 12px; margin-bottom: 20px; }
.qty-row input[type=number] {
  width: 76px;
  padding: 12px;
  border: 1px solid var(--hairline);
  background: var(--white);
  font-size: 14px;
}

/* ---- forms --------------------------------------------------------- */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  background: var(--white);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--bramble);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-errors { color: var(--bramble); font-size: 13px; margin-top: 6px; }

.form-errors {
  border: 1px solid var(--bramble);
  color: var(--bramble-dark);
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 14px;
}

/* ---- messages --------------------------------------------------------- */
.messages { list-style: none; margin: 0; padding: 0; }
.messages li {
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.messages .success { background: #EEF2E5; }
.messages .error { background: #F5E4E0; }
.messages .warning { background: #F7EFD9; }
.messages .info { background: #E9EEF2; }

/* ---- cart / checkout table --------------------------------------------------------- */
/* wrapper enables a contained horizontal scroll on narrow screens instead
   of letting the table force the whole page to overflow sideways */
.cart-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 32px;
}

.cart-table { width: 100%; min-width: 620px; border-collapse: collapse; margin-bottom: 0; }
.cart-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
  white-space: nowrap;
}
.cart-table td {
  padding: 18px 12px 18px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.cart-table .qty-input {
  width: 60px;
  padding: 8px;
  border: 1px solid var(--hairline);
}
.cart-total-row td { font-size: 18px; font-family: 'Fraunces', serif; padding-top: 20px; border: none; }

/* ---- product thumbnail in the cart row ---------------------------------- */
.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cart-item-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  object-fit: cover;
}

.cart-item-thumb--empty {
  display: block;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
}

.cart-item-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: color .15s;
}

.cart-item-name:hover { color: var(--bramble); }

/* ---- icon action buttons (update / remove) ------------------------------ */
.cart-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cart-qty-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cart-remove-form { display: inline-flex; }

.cart-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.cart-icon-btn svg { width: 16px; height: 16px; }

.cart-icon-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
  transform: translateY(-1px);
}

.cart-icon-btn--remove {
  color: var(--danger);
  border-color: rgba(192, 57, 43, 0.3);
}

.cart-icon-btn--remove:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

/* ---- bottom actions: wrap with breathing room, never touch edge-to-edge */
.cart-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 560px) {
  .cart-table th, .cart-table td { padding-right: 8px; font-size: 13px; }
  .cart-table .qty-input { width: 48px; padding: 6px; }
  .cart-icon-btn { width: 32px; height: 32px; }
  .cart-icon-btn svg { width: 14px; height: 14px; }
  .cart-bottom-actions .btn { flex: 1 1 auto; }
}

/* ---- phone layout: drop the table chrome and stack each row as a card,
   instead of relying on horizontal scroll. Uses the data-label attributes
   on each <td> in cart.html to relabel cells via ::before. --------------- */
@media (max-width: 480px) {
  .cart-table-scroll { overflow-x: visible; }
  .cart-table { min-width: 0; }

  .cart-table thead { display: none; }

  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td {
    display: block;
    width: 100%;
  }

  .cart-table tr {
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--white);
  }

  .cart-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: none;
    font-size: 14px;
  }

  .cart-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone);
    flex-shrink: 0;
  }

  .cart-row-actions { justify-content: flex-end; }

  /* product cell carries an image + name, not a plain label/value pair -
     give it its own full-width row at the top of the card instead */
  .cart-table td.cart-item-cell {
    justify-content: flex-start;
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
  }
  .cart-table td.cart-item-cell::before { display: none; }

  .cart-total-row {
    border: none;
    margin-bottom: 0;
    background: transparent;
  }
  .cart-total-row td {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    padding-top: 14px;
  }
  .cart-total-row td::before { display: none; }
}

.summary-box {
  border: 1px solid var(--hairline);
  padding: 28px;
  background: var(--white);
}

.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }

/* ---- shop by category ------------------------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.category-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  isolation: isolate;
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* solid brand-color fallback, shows if the photo is missing or still loading */
  background: var(--cat-bg, linear-gradient(160deg, var(--bramble) 0%, var(--ink) 100%));
  z-index: -3;
}

/* the category's own photo, sitting above the solid fallback and below
   the darkening wash so the heading/count stay readable */
.category-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s ease;
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,27,23,0) 35%, rgba(28,27,23,0.75) 100%);
  z-index: -1;
}

.category-card:hover .category-card-img,
.category-card:hover::before { transform: scale(1.06); }

.category-card-body {
  position: relative;
  padding: 22px;
  width: 100%;
}

.variant-picker { margin: 16px 0; }
.variant-label { font-size: 13px; color: var(--stone); display: block; margin-bottom: 8px; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pill { border: 1px solid var(--hairline); padding: 8px 14px; font-size: 14px; cursor: pointer; position: relative; }
.variant-pill.is-selected { border-color: var(--stone); background: var(--white); font-weight: 600; }
.variant-pill.is-disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.variant-pill input { position: absolute; opacity: 0; }

/* ---- product detail: available colours - customer picks one before adding to bag, same submit target as the variant picker via the `form` attribute */
.colour-swatches { margin: 12px 0; }
.colour-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.colour-swatch-option { position: relative; display: inline-block; cursor: pointer; line-height: 0; }
.colour-swatch-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.colour-swatch-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  display: inline-block;
  cursor: pointer;
}
.colour-swatch-option.is-selected .colour-swatch-dot {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink);
}
.colour-swatch-selected-name { font-size: 13px; color: var(--stone); margin-top: 8px; }

/* ---- product detail: "custom request" - lets a customer ask for a
   colour/tweak that isn't in the swatch list, via a modal ---------- */
.colour-swatches-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.colour-swatches--no-colours { margin: 16px 0; }

.custom-request-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--bramble);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.custom-request-btn:hover { color: var(--ink); }

.custom-request-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  font-size: 13px;
  color: var(--ink-soft);
}
.custom-request-summary svg { flex-shrink: 0; color: var(--bramble); }
.custom-request-summary span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-request-summary button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
}
.custom-request-summary button:hover { color: var(--ink); }

.custom-request-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.custom-request-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 23, 0.55);
}
.custom-request-modal-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 28px 24px 24px;
  max-height: 90vh;
  overflow-y: auto;
}
.custom-request-modal-panel h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  margin: 0 0 10px;
  padding-right: 24px;
}
.custom-request-modal-hint {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.custom-request-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  padding: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 0;
}
.custom-request-modal-close:hover { color: var(--ink); }
.custom-request-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 6px;
}
@media (max-width: 480px) {
  .custom-request-modal-actions { flex-direction: column-reverse; }
  .custom-request-modal-actions .btn,
  .custom-request-modal-actions .btn-outline { width: 100%; text-align: center; }
}
.variant-oos { font-size: 11px; margin-left: 4px; }
.category-card .category-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(246, 243, 236, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.category-card .category-icon svg { width: 19px; height: 19px; }

.category-card h3 {
  color: var(--ivory);
  font-size: 19px;
  margin-bottom: 4px;
}

.category-card span.count {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.75);
}

.category-card[data-cat="jewelry"] { --cat-bg: linear-gradient(160deg, #6E2A2A 0%, #3B1616 100%); }
.category-card[data-cat="hair"] { --cat-bg: linear-gradient(160deg, #8A6A3A 0%, #4A3418 100%); }
.category-card[data-cat="wearables"] { --cat-bg: linear-gradient(160deg, #4A473E 0%, #1C1B17 100%); }
.category-card[data-cat="home"] { --cat-bg: linear-gradient(160deg, #B8935A 0%, #6E2A2A 100%); }

@media (max-width: 992px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .category-grid { grid-template-columns: 1fr; }
  .category-card { aspect-ratio: 16 / 10; }
}

/* ---- expertise / Ankara craft ---------------------------------------- */
.services-section { background: var(--ivory); }

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.expertise-category {
  background: var(--ivory);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background .25s ease;
}

.expertise-category:hover { background: var(--white); }

.expertise-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(110, 42, 42, 0.08);
  color: var(--bramble);
  flex-shrink: 0;
}

.expertise-icon svg { width: 20px; height: 20px; }

.expertise-category h3 {
  font-size: 18px;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.expertise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex-grow: 1;
}

.expertise-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.expertise-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 992px) {
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .expertise-grid { grid-template-columns: 1fr; }
}

/* ---- testimonials: full-bleed dark band ------------------------------ */
.testimonial-band {
  background: var(--ink);
  color: var(--ivory);
  padding: 150px 0;
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.testimonial-band .container { width: 100%; }

.testimonial-band .section-head { border-color: rgba(246, 243, 236, 0.14); }
.testimonial-band .eyebrow { color: var(--gold); }
.testimonial-band h2 { color: var(--ivory); }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 12px;
}

/* ---- testimonial slideshow: one review shown at a time --------------- */
.testimonial-slideshow {
  position: relative;
  margin: 40px auto 0;
  max-width: 640px;
  text-align: center;
}

.testimonial-slides {
  position: relative;
  min-height: 180px;
}

.testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}

.testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}

/* dot navigation, added by JS so the count always matches how many
   reviews the template rendered */
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.testimonial-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(246, 243, 236, 0.3);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.testimonial-dots button:hover { background: rgba(246, 243, 236, 0.55); }

.testimonial-dots button.is-active {
  background: var(--gold);
  transform: scale(1.2);
}

.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.testimonial .stars { display: flex; justify-content: center; gap: 3px; color: var(--gold); }
.testimonial .stars svg { width: 14px; height: 14px; }

.testimonial blockquote {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ivory);
}

.testimonial cite {
  font-style: normal;
  font-size: 13px;
  color: rgba(246, 243, 236, 0.6);
}

.testimonial cite strong { display: block; color: var(--ivory); font-size: 14px; margin-bottom: 2px; }

@media (max-width: 860px) {
  .testimonial-band { padding: 90px 0; min-height: 0; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 40px; }
  .testimonial-slideshow { max-width: none; }
}

/* ---- CTA booking band: light card, phone mockup + copy, two-up ------- */
.cta-band {
  position: relative;
  background: #EFEAE0;
  padding: 100px 0;
  overflow: hidden;
}

.cta-band-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.cta-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(28, 27, 23, 0.28);
}

/* ---- phone panel: soft backdrop the mockup sits on -------------------- */
.cta-phone-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  background: linear-gradient(180deg, #F6F3EC 0%, #EDE7D8 100%);
}

.cta-phone {
  position: relative;
  width: 220px;
  height: 448px;
  background: var(--ink);
  border-radius: 42px;
  padding: 10px;
  box-shadow: 0 30px 60px -24px rgba(28, 27, 23, 0.45);
}

.cta-phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 20px;
  background: var(--ink);
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.cta-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--bramble) 0%, var(--bramble-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.cta-phone-logo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.45);
  margin-bottom: 26px;
  flex-shrink: 0;
}

.cta-phone-logo img { width: 34px; height: 34px; object-fit: contain; }

.cta-phone-cycle {
  position: relative;
  width: 100%;
  height: 44px;
}

.cta-phone-cycle span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ivory);
  opacity: 0;
  animation: textCycle 16s infinite;
}

.cta-phone-cycle span:nth-child(1) { animation-delay: 0s; }
.cta-phone-cycle span:nth-child(2) { animation-delay: 4s; }
.cta-phone-cycle span:nth-child(3) { animation-delay: 8s; }
.cta-phone-cycle span:nth-child(4) { animation-delay: 12s; }

@keyframes textCycle {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: translateY(0); }
  22%  { opacity: 1; transform: translateY(0); }
  27%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; }
}

.cta-phone-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 4px;
  border-radius: 4px;
  background: rgba(246, 243, 236, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .cta-phone-cycle span { animation: none; opacity: 0; }
  .cta-phone-cycle span:nth-child(1) { opacity: 1; }
}

/* ---- copy panel --------------------------------------------------------- */
.cta-copy-col {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-band .eyebrow { color: var(--stone); }
.cta-band h2 { color: var(--ink); font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 16px; max-width: 12ch; }
.cta-band p { color: var(--ink-soft); margin-bottom: 32px; max-width: 44ch; }

.cta-band-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-band .btn-pill { background: var(--bramble); color: var(--ivory); }
.cta-band .btn-pill:hover { background: var(--bramble-dark); transform: translateY(-1px); }
.cta-band .btn-pill-icon { background: rgba(246, 243, 236, 0.16); color: var(--ivory); }

.btn-pill-outline {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color .15s, transform .15s;
}

.btn-pill-outline:hover { border-color: var(--ink); transform: translateY(-1px); }

.btn-pill-outline .btn-pill-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--bramble);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-pill-outline .btn-pill-icon svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .cta-card { grid-template-columns: 1fr; }
  .cta-phone-panel { padding: 48px 32px; }
  .cta-copy-col { padding: 48px 32px; text-align: center; align-items: center; }
  .cta-band-actions { justify-content: center; }
  .cta-band h2 { max-width: none; }
}

@media (max-width: 520px) {
  .cta-band { padding: 64px 0; }
  .cta-band-inner { padding: 0 16px; }
  .cta-phone { width: 190px; height: 390px; }
}

/* ---- footer ----------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(246, 243, 236, 0.68);
  margin-top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.legal-container { max-width: 760px; }
.legal-header { margin-bottom: 40px; }
.legal-body h2 { margin-top: 36px; margin-bottom: 12px; font-size: 20px; }
.legal-body p, .legal-body li { line-height: 1.7; }
.legal-list { padding-left: 20px; }
.legal-list li { margin-bottom: 8px; }
.site-footer .container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 1440px;
  padding-top: 100px;
  padding-bottom: 32px;
  padding-left: 40px;
  padding-right: 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr 0.85fr 0.85fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  margin: auto 0;
  border-bottom: 1px solid rgba(246, 243, 236, 0.12);
}

.footer-brand .logo-mark { height: 44px; }
.footer-brand .logo-word { color: var(--ivory); font-size: 30px; }
.footer-brand .logo span { color: var(--gold); }
.footer-brand .logo small { color: rgba(246, 243, 236, 0.5); font-size: 12px; }

.footer-tagline {
  margin: 24px 0 30px;
  font-size: 17px;
  line-height: 1.7;
  max-width: 320px;
  color: rgba(246, 243, 236, 0.6);
}

.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(246, 243, 236, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  transition: background .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--bramble); border-color: var(--bramble); }
.footer-social svg { width: 20px; height: 20px; }

.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 26px;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.footer-col a { font-size: 17px; color: rgba(246, 243, 236, 0.68); transition: color .2s ease; }
.footer-col a:hover { color: var(--gold); }

.footer-col address { font-style: normal; font-size: 17px; line-height: 1.9; color: rgba(246, 243, 236, 0.68); margin-bottom: 26px; }

.footer-newsletter p { font-size: 16px; margin: 0 0 18px; color: rgba(246, 243, 236, 0.55); }
.footer-newsletter-form { display: flex; gap: 0; border: 1px solid rgba(246, 243, 236, 0.22); }
.footer-newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 18px 20px;
  color: var(--ivory);
  font-family: inherit;
  font-size: 16px;
}
.footer-newsletter-form input::placeholder { color: rgba(246, 243, 236, 0.4); }
.footer-newsletter-form input:focus { outline: none; }
.footer-newsletter-form button {
  border: none;
  background: var(--bramble);
  color: var(--ivory);
  padding: 0 26px;
  cursor: pointer;
  transition: background .2s ease;
}
.footer-newsletter-form button:hover { background: var(--bramble-dark); }
.footer-newsletter-form button svg { width: 19px; height: 19px; }

.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14.5px;
  color: rgba(246, 243, 236, 0.45);
  padding: 32px 0;
}

.footer-grid a { color: rgba(246, 243, 236, 0.45); }
.footer-grid a:hover { color: var(--gold); }
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer { min-height: 0; }
  .site-footer .container { padding-top: 64px; padding-left: 20px; padding-right: 20px; }
  .footer-brand .logo-word { font-size: 24px; }
  .footer-brand .logo-mark { height: 34px; }
  .footer-tagline { font-size: 15px; max-width: 280px; }
  .footer-col a, .footer-col address, .footer-newsletter p { font-size: 15px; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; text-align: center; }
}

/* ---- reviews layout: two columns (list + form), stacks on tablet/mobile --
   used by product_detail.html's "What customers say" section and by
   reviews.html — replaces the old unresponsive inline grid styles. ------- */
.reviews-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 860px) {
  .reviews-layout { grid-template-columns: 1fr; gap: 40px; }
}

.empty-state {
  padding: 80px 0;
  text-align: center;
  color: var(--ink-soft);
}
.empty-state h2 { margin-bottom: 12px; }

.divider { border: none; border-top: 1px solid var(--hairline); margin: 48px 0; }

@media (max-width: 860px) {
  .product-detail-grid, .checkout-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
   ABOUT PAGE — hero, story section, partners strip
   ========================================================================= */

/* ---- about hero: badge-circle + headline, blob photo bleeding to edge -- */
.about-hero {
  position: relative;
  background: var(--ivory);
}

.about-hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  min-height: 750px;
  margin-bottom: 50px;
}

.about-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 64px 28px 64px clamp(28px, 6vw, 72px);
  animation: heroSlideLeft .9s ease both;
}

.about-hero-copy h1 {
  font-size: 50px;
  line-height: 1.08;
  max-width: 500px;
  margin-bottom: 22px;
  animation: heroFadeIn .7s ease both;
  animation-delay: .38s;
}

.about-hero-copy h1 .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--bramble);
}

.about-hero-copy .lede {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 34px;
  animation: heroFadeIn .7s ease both;
  animation-delay: .46s;
}

.about-hero-copy .hero-cta-row {
  margin-bottom: 0;
  animation: heroFadeIn .7s ease both;
  animation-delay: .54s;
}

/* the yellow badge circle with a loose hand-drawn ring around it, echoing
   the "PORTFOLIO" badge treatment — the one bit of visual flourish on an
   otherwise quiet hero */
.badge-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  position: relative;
  margin-bottom: 30px;
  animation: heroFadeIn .7s ease both;
  animation-delay: .2s;
}

.badge-circle::after {
  content: "";
  position: absolute;
  inset: -11px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  opacity: 0.32;
  transform: rotate(-7deg);
}

.about-hero-visual {
  position: relative;
  height: 100%;
  min-height: 480px;
}

.about-hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--stone);
  animation: heroSlideRight 1s ease both;
  animation-delay: .1s;
}

.about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(184, 147, 90, 0.28) 0%, rgba(184, 147, 90, 0.03) 40%, rgba(28, 27, 23, 0.2) 100%);
  pointer-events: none;
}

.about-hero-photo .placeholder-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
}

.about-hero-photo .placeholder-slide span {
  margin: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* second, smaller photo that overlaps the bottom-left corner of the main
   hero photo — echoes the story-section photo pair, but floated into the
   hero itself, per the reference layout */
.about-hero-photo-circle {
  position: absolute;
  left: -30%;
  bottom: 32%;
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 7px solid var(--ivory);
  box-shadow: 0 22px 44px -18px rgba(28, 27, 23, 0.4);
  z-index: 3;
  animation: heroFadeIn .9s ease both;
  animation-delay: .32s;
}

.about-hero-photo-circle .placeholder-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
}

.about-hero-photo-circle .placeholder-slide span {
  margin: 16px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 991px) {
  .about-hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .about-hero-copy { padding: 48px 20px 32px; max-width: none; }
  .about-hero-copy h1 { font-size: 38px; }
  .about-hero-visual { min-height: 0; padding-bottom: 0; }
  .about-hero-photo { position: relative; border-radius: 24px; inset: auto; height: 46vh; }
  /* single clean photo on smaller screens — the overlapping circular
     accent photo is dropped rather than risking the same overlap glitch
     seen in the mission/vision photos above. */
  .about-hero-photo-circle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-copy, .about-hero-photo, .about-hero-photo-circle, .badge-circle,
  .about-hero-copy h1, .about-hero-copy .lede, .about-hero-copy .hero-cta-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- story section: overlapping photo pair + copy panel --------------- */
.about-story { padding: 48px 0; }

.about-story-row {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  align-items: center;
  gap: 72px;
}

.about-story-media {
  position: relative;
  padding-bottom: 56px;
  padding-right: 20px;
  margin-left: 100px;
}

.about-story-photo {
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(28, 27, 23, 0.32);
  height: 500px;
}

.about-story-photo img,
.about-story-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-story-photo img,
.about-story-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-story-photo .placeholder-slide,
.about-story-photo-circle .placeholder-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
}

.about-story-photo .placeholder-slide span,
.about-story-photo-circle .placeholder-slide span {
  margin: 16px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.about-story-photo-circle {
  position: absolute;
  right: -150px;
  bottom: -200px;
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 7px solid var(--ivory);
  box-shadow: 0 22px 44px -18px rgba(28, 27, 23, 0.38);
  margin-right: 100px;
  margin-bottom: 100px;
}

.about-story-copy h2 {
  font-size: clamp(28px, 3.2vw, 36px);
  max-width: 25ch;
  margin-bottom: 20px;
}

.about-story-copy p {
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: 18px;
}

.about-story-copy .btn-pill-outline {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .about-story-row { grid-template-columns: 1fr; gap: 40px; }
  .about-story-media { margin-left: 0; padding-right: 0; padding-bottom: 64px; order: 1; }
  .about-story-copy { order: 2; }
  .about-story-photo { height: auto; }
  .about-story-photo-circle { width: 54%; right: -10px; bottom: -50px; margin-right: 0; margin-bottom: 0; }
}

@media (max-width: 480px) {
  .about-story-photo-circle { width: 46%; right: -6px; bottom: -32px; }
}

/* ---- partners & brands: fade in left-to-right, one after another ------ */
.partners-section { padding: 108px 0 128px; }

.partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px 44px;
  padding-top: 24px;
}

.partner-logo {
  flex: 1 1 160px;
  max-width: 200px;
  height: 128px;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease, transform .3s ease;
  transition-delay: calc(var(--i, 0) * 0.12s);
}

.partners-row.in-view .partner-logo {
  opacity: 1;
  transform: translateX(0);
}

.partner-logo .placeholder-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
  transition: box-shadow .3s ease, transform .3s ease;
}

.partner-logo .placeholder-slide span {
  padding: 0 18px;
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
}

.partner-logo:hover .placeholder-slide,
.partner-logo:hover img {
  box-shadow: 0 18px 34px -20px rgba(28, 27, 23, 0.32);
  transform: translateY(-3px);
}

@media (max-width: 700px) {
  .partners-section { padding: 84px 0 96px; }
  .partners-row { justify-content: flex-start; gap: 24px 28px; }
  .partner-logo { flex: 1 1 128px; height: 100px; }
  .partner-logo .placeholder-slide span { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-logo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* =========================================================================
   ABOUT PAGE — mission & vision, impact stats, core values
   ========================================================================= */

/* ---- mission & vision: photo pair on the left, copy on the right, same
   composition as the story section above it -------------------------------- */
.about-mission { padding-top: 24px; padding-bottom: 40px; }

.about-mission-row {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  align-items: center;
  gap: 72px;
}

.about-mission-media {
  position: relative;
}

/* two photos, diagonally overlapping: a straight portrait bleeding off
   the top-right edge, and a larger, slightly rotated photo bleeding off
   the bottom-left edge and layered on top — matches the reference
   composition; the whole pair sits in the left column via the grid. */
.mv-duo {
  position: relative;
  height: 680px;
}

.mv-duo-photo {
  position: absolute;
  overflow: hidden;
  border: 6px solid var(--ivory);
  box-shadow: 0 22px 44px -18px rgba(28, 27, 23, 0.4);
  border-radius: 14px;
}

.mv-duo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-duo-photo .placeholder-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #EFE9DA 0%, #DCD3BC 100%);
}

.mv-duo-photo .placeholder-slide span {
  margin: 16px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* a — straight portrait, pinned to the left edge with a small margin */
.mv-duo-a {
  top: 0;
  left: 10px;
  width: 58%;
  height: 650px;
  z-index: 1;
}

/* b — larger photo, right side, rotated, layered in front of a */
.mv-duo-b {
  top: 50%;
  right: 0;
  left: auto;
  width: 62%;
  height: 55%;
  transform: rotate(130deg);
  z-index: 2;
}

@media (max-width: 900px) {
  .about-mission-row { grid-template-columns: 1fr; gap: 40px; }
  .about-mission-media { order: 1; }
  .about-mission-copy { order: 2; }

  /* show a single, clean photo on smaller screens instead of the two
     overlapping/rotated desktop photos — mv-duo-a's fixed 650px height
     was also overflowing its shorter mobile container and spilling into
     the text below it, which this also fixes. */
  .mv-duo { height: auto; }
  .mv-duo-b { display: none; }
  .mv-duo-a {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 340px;
    z-index: 1;
  }
}

@media (max-width: 520px) {
  .mv-duo-a { height: 260px; }
}

.mv-block + .mv-block {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

.mv-block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mv-block-head .icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mv-block-head .icon-circle svg {
  width: 16px;
  height: 16px;
  color: var(--bramble);
}

.mv-block-head h3 { margin: 0; font-size: clamp(20px, 2vw, 24px); }

.mv-block p {
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0;
}

/* ---- impact: four animated counters in one floating card ---------------- */
.impact-section { padding: 64px 0; }

.impact-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 28px 54px -22px rgba(28, 27, 23, 0.18);
  overflow: hidden;
}

.impact-stat {
  padding: 40px 28px;
  text-align: center;
  border-right: 1px solid var(--hairline);
}

.impact-stat:last-child { border-right: none; }

.impact-stat svg {
  width: 24px;
  height: 24px;
  color: var(--bramble);
  margin: 0 auto 14px;
  display: block;
}

.impact-stat .num {
  font-family: 'Fraunces', serif;
  font-size: 40px;
  color: var(--ink);
  display: block;
}

.impact-stat .label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-top: 8px;
}

@media (max-width: 860px) {
  .impact-stats { grid-template-columns: repeat(2, 1fr); }
  .impact-stat { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .impact-stat:nth-child(2n) { border-right: none; }
  .impact-stat:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 480px) {
  .impact-stat { padding: 28px 16px; }
  .impact-stat .num { font-size: 32px; }
}

/* ---- core values: 7-item icon grid --------------------------------------- */
.values-section { padding: 64px 0 72px; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.value-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: 32px 28px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.value-card:hover {
  border-color: var(--stone);
  box-shadow: 0 24px 48px -28px rgba(28, 27, 23, 0.28);
  transform: translateY(-3px);
}

.value-card .icon-circle-lg {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.value-card .icon-circle-lg svg {
  width: 20px;
  height: 20px;
  color: var(--bramble);
}

.value-card h3 { font-size: 18px; margin-bottom: 8px; }

.value-card p {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}

@media (max-width: 992px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   CONTACT PAGE — map-pin hero + two-column details/social + form
   ========================================================================= */

/* ---- hero: full-bleed embedded map with a floating "pin" card ---------- */
.contact-hero { position: relative; background: var(--ivory); }

.contact-hero-map {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: var(--stone);
}

.contact-hero-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.2) contrast(1.03);
}

/* soft gradient so the floating card below reads as anchored to the map,
   not just stacked on top of it */
.contact-hero-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 27, 23, 0) 60%, rgba(28, 27, 23, 0.55) 100%);
  pointer-events: none;
}

/* the drop-pin marker fixed at the visual centre of the map */
.contact-hero-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(28, 27, 23, 0.35));
}

.contact-hero-marker .pin-badge {
  width: 52px;
  height: 52px;
  border-radius: 50% 50% 50% 0;
  background: var(--bramble);
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-hero-marker .pin-badge svg {
  transform: rotate(45deg);
  width: 22px;
  height: 22px;
  color: var(--ivory);
}

.contact-hero-marker .pin-pulse {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(28, 27, 23, 0.28);
}

.contact-hero-pin-card {
  position: relative;
  z-index: 3;
  max-width: 520px;
  margin: -84px auto 0;
  background: var(--white);
  padding: 34px clamp(24px, 4vw, 44px) 38px;
  text-align: center;
  box-shadow: 0 30px 60px -28px rgba(28, 27, 23, 0.32);
}

.contact-hero-pin-card .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.contact-hero-pin-card .eyebrow svg { width: 13px; height: 13px; color: var(--bramble); }

.contact-hero-pin-card h1 {
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.1;
  margin-bottom: 12px;
}

.contact-hero-pin-card h1 .accent { font-style: italic; font-weight: 500; color: var(--bramble); }

.contact-hero-pin-card .lede {
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 46ch;
  margin: 0 auto 24px;
}

.contact-hero-pin-card .btn-pill { margin: 0 auto; }

@media (max-width: 700px) {
  .contact-hero-map { height: 320px; }
  .contact-hero-marker .pin-badge { width: 44px; height: 44px; }
  .contact-hero-pin-card { margin-top: -60px; padding: 26px 20px 30px; }
}

/* ---- body: details+social on the left, form on the right --------------- */
.contact-section { padding-top: 92px; }

.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: stretch;
}

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
}

.contact-details-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 20px clamp(24px, 3vw, 40px);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-details-card h3 {
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  font-family: 'Inter', sans-serif;
  margin-bottom: 24px;
}

.contact-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }

.contact-detail-list li { display: flex; align-items: flex-start; gap: 20px; }

.contact-detail-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--bramble);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-detail-icon svg { width: 20px; height: 20px; }

.contact-detail-list .label {
  display: block;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 4px;
}

.contact-detail-list p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.contact-detail-list a { color: var(--ink); transition: color .15s; }
.contact-detail-list a:hover { color: var(--bramble); }

/* ---- social row: its own card, sits below the details card ------------- */
.contact-socials-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 48px clamp(24px, 3vw, 40px);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}

.contact-socials-card .label {
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.contact-socials { display: flex; gap: 14px; }

.contact-socials a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}

.contact-socials a:hover {
  background: var(--bramble);
  border-color: var(--bramble);
  color: var(--ivory);
  transform: translateY(-2px);
}

.contact-socials svg { width: 18px; height: 18px; }

/* ---- form panel ---------------------------------------------------------- */
.contact-form-panel {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 44px clamp(24px, 4vw, 52px);
}

.contact-form-panel h2 { font-size: clamp(26px, 2.6vw, 32px); margin-bottom: 8px; }
.contact-form-panel > p.lede { color: var(--ink-soft); margin-bottom: 30px; max-width: 52ch; }

.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.contact-form-grid .field { grid-column: span 1; }
.contact-form-panel .field-full { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
  .contact-side { height: auto; }
}

@media (max-width: 560px) {
  .contact-form-grid { grid-template-columns: 1fr; }
}
/* ---- preloader --------------------------------------------------------
   Logo fills bottom-to-top using the illustration as a mask over a solid
   fill layer, with a business-tagline typewriter beneath it. Removed
   from the DOM once the window "load" event fires (see main.js). ------- */
body.preloader-lock { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  transition: opacity .6s ease, visibility .6s ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.preloader-logo {
  position: relative;
  width: 132px;
  height: 148px;
}

.preloader-logo-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .14;
}

.preloader-logo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bramble);
  -webkit-mask-image: var(--logo-mask);
  mask-image: var(--logo-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  clip-path: inset(100% 0 0 0);
  animation: preloader-fill 2.1s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes preloader-fill {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0% 0 0 0); }
}

.preloader-tagline {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.preloader-cursor {
  color: var(--bramble);
  animation: preloader-blink 1s step-end infinite;
}

@keyframes preloader-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .preloader-logo-fill { animation: none; clip-path: inset(0 0 0 0); }
  .preloader-cursor { animation: none; }
  .preloader { transition: none; }
}
/* =========================================================================
   MOBILE HAMBURGER NAV — trigger button + slide-in drawer (reuses the
   .side-drawer component already used for the cart/wishlist drawers).
   The button itself is hidden until the phone breakpoint below turns it on.
   ========================================================================= */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}

.nav-hamburger:hover { background: var(--hairline); }

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
}

.mobile-nav-links a {
  padding: 16px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--bramble); }

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.mobile-nav-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.mobile-nav-action:hover { color: var(--bramble); }
.mobile-nav-action i { width: 18px; text-align: center; color: var(--bramble); }

/* =========================================================================
   PHONE-SPECIFIC MOBILE REFINEMENTS (max-width: 767px)
   Placed last so these rules win the cascade over the earlier tablet-level
   (860 / 900 / 991px) breakpoints wherever both apply.
   ========================================================================= */
@media (max-width: 767px) {

  /* ---- header: logo left, hamburger right, inline nav links tucked
     into the slide-in drawer instead --------------------------------- */
  .main-nav { display: none; }
  .account-link,
  .wishlist-trigger,
  .cart-trigger { display: none; }
  .nav-hamburger { display: inline-flex; }

  .site-header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo actions";
    row-gap: 0;
    height: 68px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .header-actions { gap: 4px; }

  /* ---- homepage hero: image + copy content together, hero-stats
     directly below as its own row, feature strip in a 2x2 grid ------- */
  .hero-copy-col { display: contents; }

  .hero-visual-col {
    order: 1;
    width: 100%;
    min-height: 44vh;
  }

  .hero-copy {
    order: 2;
    width: 100%;
    max-width: none;
    padding: 28px 20px 0;
  }

  .hero-stats {
    order: 3;
    width: 100%;
    max-width: 460px;
    margin: 24px auto 0;
    padding: 0 20px;
  }

  .hero-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: none;
    padding: 16px 20px;
    gap: 14px 16px;
  }
  .hero-feature-list li { flex: none; }

  /* ---- about page hero: photo appears with/above the copy ---------- */
  .about-hero-visual { order: -1; }

  /* ---- contact page: form immediately after the hero --------------- */
  .contact-form-panel { order: -1; }
}

/* =========================================================================
   FLOATING WHATSAPP BUTTON — fixed to the bottom-left of the viewport on
   every page. Sits above ordinary page content but below the cart/wishlist/
   nav drawers and their overlays (z-index 40/41) so it doesn't float over
   an open drawer.
   ========================================================================= */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(28, 27, 23, 0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 16px 32px -10px rgba(28, 27, 23, 0.5);
}

.whatsapp-float i { font-size: 28px; line-height: 1; }

@media (max-width: 480px) {
  .whatsapp-float { left: 16px; bottom: 16px; width: 50px; height: 50px; }
  .whatsapp-float i { font-size: 24px; }
}
/* ---- accounts: login / register / order history -----------------------
   Reuses the same .field / .form-errors / .btn primitives as the contact
   and checkout forms, just in a single centered card instead of the
   two-column contact layout. */
.auth-section { padding: 92px 0 100px; }

.auth-panel {
  max-width: 440px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 44px clamp(24px, 5vw, 48px);
}

.auth-panel h1 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 8px; }
.auth-panel > p.lede { color: var(--ink-soft); margin-bottom: 30px; }

.auth-switch {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

.auth-switch a { color: var(--bramble); text-decoration: underline; }

/* ---- order history ------------------------------------------------- */
.account-section { padding: 92px 0 100px; }

.account-header { margin-bottom: 36px; }
.account-header h1 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 6px; }
.account-header p { color: var(--ink-soft); }

.order-list { display: flex; flex-direction: column; gap: 20px; }

.order-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 24px clamp(20px, 3vw, 32px);
}

.order-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.order-card-ref { font-family: 'Fraunces', Georgia, serif; font-size: 18px; }
.order-card-date { font-size: 13px; color: var(--stone); margin-top: 2px; }

.order-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}

.order-status--pending { background: #F7EFD9; color: #8A6A1B; }
.order-status--completed { background: #EEF2E5; color: #3E6B2E; }
.order-status--failed { background: var(--danger-soft); color: var(--danger); }

.order-card-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.order-card-item { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-soft); }
.order-card-item span:first-child { color: var(--ink); }

.order-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-card-total { font-family: 'Fraunces', Georgia, serif; font-size: 18px; }

.account-empty {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-soft);
}

.mobile-nav-action-form { width: 100%; margin: 0; }

/* ---- account: order-details modal ---------------------------------- */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.order-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 23, 0.55);
}
.order-modal-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 30px clamp(20px, 3vw, 32px) 28px;
}
.order-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  padding: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 0;
}
.order-modal-close:hover { color: var(--ink); }

.order-modal-loading { padding: 40px 0; text-align: center; color: var(--stone); }

.order-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 24px;
}
.order-modal-head h3 { font-family: 'Fraunces', serif; font-size: 22px; margin: 0; }
.order-modal-date { font-size: 13px; color: var(--stone); margin-top: 4px; margin-bottom: 20px; }

.order-modal-tracking {
  border: 1px solid var(--hairline);
  background: var(--ivory);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.order-modal-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
  margin-bottom: 18px;
}

.order-modal-item { display: flex; gap: 14px; }
.order-modal-item-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  background: var(--ivory);
}
.order-modal-item-info { flex: 1; min-width: 0; }
.order-modal-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.order-modal-item-name { font-weight: 600; }
.order-modal-item-name a { color: var(--ink); text-decoration: none; }
.order-modal-item-name a:hover { text-decoration: underline; }
.order-modal-item-meta { font-size: 13px; color: var(--stone); margin-top: 3px; }
.order-modal-item-money { text-align: right; flex-shrink: 0; font-size: 13px; color: var(--ink-soft); }
.order-modal-item-subtotal { font-weight: 600; color: var(--ink); margin-top: 2px; }

.order-modal-rate {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--hairline);
  background: var(--ivory);
}
.order-modal-rate-stars { display: flex; gap: 4px; margin-bottom: 8px; }
.order-modal-star {
  background: none;
  border: none;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--hairline);
  cursor: pointer;
}
.order-modal-star.is-filled { color: var(--gold); }
.order-modal-rate-comment {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  resize: vertical;
  min-height: 44px;
  margin-bottom: 10px;
}
.order-modal-rate-comment:focus { outline: none; border-color: var(--bramble); }
.order-modal-rate-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-modal-rate-row .btn-outline { padding: 8px 16px; font-size: 13px; }
.order-modal-rate-status { font-size: 12px; color: var(--stone); }

.order-modal-totals { margin-bottom: 20px; }
.order-modal-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 4px 0;
}
.order-modal-totals-row--grand {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  margin-top: 6px;
  padding-top: 10px;
}

.order-modal-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.order-modal-link { font-size: 13px; color: var(--bramble); text-decoration: underline; text-underline-offset: 2px; }
.order-modal-link:hover { color: var(--ink); }

@media (max-width: 480px) {
  .order-modal-item { flex-direction: column; }
  .order-modal-item-top { flex-direction: column; gap: 4px; }
  .order-modal-item-money { text-align: left; }
  .order-modal-actions { flex-direction: column; align-items: stretch; }
  .order-modal-actions .btn-outline { text-align: center; }
}

/* ==========================================================================
   Manager dashboard
   ========================================================================== */
.manager-shell { padding: 48px 0 100px; }
.manager-shell-inner { display: block; }

/* fixed, full-height rail — independent of the shell's own scroll/padding
   so the border-right separator always runs the full height of the
   screen, and the footer (margin-top: auto below) sits pinned to the
   true bottom of the viewport rather than the bottom of the nav content */
.manager-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 76px;
  z-index: 15;
  background: var(--ivory);
  border-right: 1px solid var(--hairline);
  padding: 24px 16px 20px 4px;
  display: flex; flex-direction: column; gap: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width .22s ease;
}
.manager-shell-inner.is-nav-expanded .manager-nav { width: 240px; }

.manager-main {
  margin-left: calc(76px + 40px);
  transition: margin-left .22s ease;
}
.manager-shell-inner.is-nav-expanded .manager-main { margin-left: calc(240px + 40px); }

.manager-nav-top { display: flex; align-items: center; gap: 12px; }
.manager-nav-brand { font-family: 'Fraunces', Georgia, serif; font-size: 18px; white-space: nowrap; }

/* ---- hamburger toggle: the two outer bars run longer than the middle
   one, expands/collapses the sidebar, collapsed (icon rail) by default */
.manager-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.manager-nav-toggle:hover { background: var(--ivory); }
.manager-nav-toggle-line {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: width .15s ease;
}
.manager-nav-toggle-line--long { width: 20px; }
.manager-nav-toggle-line--short { width: 12px; }

/* ---- profile block: avatar (swappable photo) + name/email ------------ */
.manager-nav-profile { display: flex; align-items: center; gap: 12px; }

.manager-nav-avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.manager-nav-avatar-img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--ivory);
}
.manager-nav-avatar-edit {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bramble);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ivory);
  cursor: pointer;
  transition: background .15s;
}
.manager-nav-avatar-edit:hover { background: var(--bramble-dark); }
.manager-nav-avatar-edit svg { width: 11px; height: 11px; }

.manager-nav-profile-info { display: flex; flex-direction: column; min-width: 0; }
.manager-nav-profile-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.manager-nav-profile-email {
  font-size: 12px; color: var(--stone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- nav links, icon + label -------------------------------------------- */
.manager-nav nav { display: flex; flex-direction: column; gap: 4px; }
.manager-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--ink-soft); font-size: 14px;
  border: none; background: none; font: inherit;
  width: 100%; text-align: left; cursor: pointer;
}
.manager-nav-link:hover { background: var(--ivory); color: var(--ink); }
.manager-nav-link.is-active { background: var(--bramble); color: var(--white); }
.manager-nav-link.is-active .manager-nav-icon { color: var(--white); }

.manager-nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--stone);
}
.manager-nav-icon svg { width: 18px; height: 18px; }
.manager-nav-link:hover .manager-nav-icon,
.manager-nav-link.is-active .manager-nav-icon { color: inherit; }

.manager-nav-label { white-space: nowrap; }

/* ---- footer: settings + logout ------------------------------------------ */
.manager-nav-foot {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.manager-nav-logout-form { margin: 0; }
.manager-nav-link--logout:hover { background: var(--danger-soft); color: var(--danger); }
.manager-nav-link--logout:hover .manager-nav-icon { color: var(--danger); }

/* ---- collapsed state: icon rail only, labels/text hidden --------------- */
.manager-shell-inner:not(.is-nav-expanded) .manager-nav-label,
.manager-shell-inner:not(.is-nav-expanded) .manager-nav-brand,
.manager-shell-inner:not(.is-nav-expanded) .manager-nav-profile-info {
  display: none;
}
.manager-shell-inner:not(.is-nav-expanded) .manager-nav-link { justify-content: center; }
.manager-shell-inner:not(.is-nav-expanded) .manager-nav-top { justify-content: center; }
.manager-shell-inner:not(.is-nav-expanded) .manager-nav-profile { justify-content: center; }

@media (max-width: 860px) {
  /* the sidebar already drops to a horizontal scroller here — always show
     it fully expanded and hide the toggle, collapsing makes no sense
     once it's a top row instead of a side rail. It also comes back into
     normal document flow instead of staying fixed full-height. */
  .manager-nav {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row; align-items: center; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--hairline);
  }
  .manager-shell-inner.is-nav-expanded .manager-nav { width: 100%; }
  .manager-main,
  .manager-shell-inner.is-nav-expanded .manager-main { margin-left: 0; margin-top: 24px; }
  .manager-nav-toggle { display: none; }
  .manager-nav nav { flex-direction: row; }
  .manager-nav-foot { flex-direction: row; margin-top: 0; margin-left: auto; border-top: none; padding-top: 0; }
  .manager-shell-inner .manager-nav-label,
  .manager-shell-inner .manager-nav-brand,
  .manager-shell-inner .manager-nav-profile-info { display: inline; }
  .manager-nav-profile-info { display: flex !important; }
}

.manager-main-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.manager-main-header h1 { margin: 0; font-size: clamp(24px, 3vw, 30px); }

.manager-messages { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.manager-message { padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.manager-message--success { background: #EEF2E5; color: #3E6B2E; }
.manager-message--error { background: var(--danger-soft); color: var(--danger); }
.manager-message--info, .manager-message--warning { background: #F7EFD9; color: #8A6A1B; }

.manager-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 32px; }
.manager-stat-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 20px; }
.manager-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); margin-bottom: 8px; }
.manager-stat-value { font-family: 'Fraunces', Georgia, serif; font-size: 26px; }
.manager-stat-sub { font-size: 14px; color: var(--stone); }

.manager-panel { background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.manager-panel h2 { font-size: 18px; margin-bottom: 16px; }
.manager-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.manager-panel-head h2 { margin: 0; }

.manager-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.manager-table th { text-align: left; color: var(--stone); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.manager-table td { padding: 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.manager-table tfoot td { font-family: 'Fraunces', Georgia, serif; font-weight: 500; border-top: 2px solid var(--hairline); border-bottom: none; }
.manager-muted { color: var(--stone); font-size: 12px; }

.manager-colour-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.manager-colour-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  display: inline-block;
}

.manager-thumb { width: 42px; height: 42px; min-width: 42px; min-height: 42px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.manager-thumb--empty { display: block; background: var(--ivory); border: 1px dashed var(--hairline); }

/* ---- product list: thumbnail + name in one cell ---------------------- */
.manager-product-name-cell { display: flex; align-items: center; gap: 10px; }
.manager-product-name { font-weight: 500; }

/* ---- order list: stacked item thumbnails ---------------------------- */
.manager-order-thumbs { display: flex; align-items: center; }
.manager-order-thumb {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--hairline);
  background: var(--ivory);
}
.manager-order-thumb--empty { display: block; border: 2px dashed var(--hairline); }
.manager-order-thumb + .manager-order-thumb,
.manager-order-thumb-more { margin-left: -10px; }
.manager-order-thumb-more {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--hairline);
  background: var(--ink);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- manager tables: keep the order thumb column a fixed width so it
   renders identically at every viewport, including once the table
   switches to horizontal-scroll mode on narrow screens (products now
   show their thumbnail inside the Name cell instead) ---- */
.manager-table--orders th:first-child,
.manager-table--orders td:first-child {
  width: 140px;
}

.manager-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.manager-badge--active { background: #EEF2E5; color: #3E6B2E; }
.manager-badge--inactive { background: var(--danger-soft); color: var(--danger); }

.manager-row-actions { display: flex; gap: 12px; align-items: center; }
.manager-link { color: var(--bramble); font-size: 13px; text-decoration: underline; }
.manager-link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--bramble); text-decoration: underline; cursor: pointer; }
.manager-link-btn--danger { color: var(--danger); }
.manager-row-actions form { margin: 0; }

.manager-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.manager-search { display: flex; gap: 8px; }
.manager-search input { padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 8px; font: inherit; min-width: 240px; }

/* ---- search input with the submit button anchored inside it ---- */
.manager-search-inline { position: relative; display: flex; gap: 0; }
.manager-search-inline input { width: 100%; padding-right: 44px; }
.manager-search-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.manager-search-btn svg { width: 16px; height: 16px; }
.manager-search-btn:hover { background: var(--ivory); color: var(--ink); }
.manager-search-btn:focus-visible { outline: 2px solid var(--bramble); outline-offset: 1px; }
.manager-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.manager-pill { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hairline); font-size: 13px; color: var(--ink-soft); }
.manager-pill.is-active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* ---- toolbar filter select (dropdown, styled to match .manager-search input) ---- */
.manager-filter-select { display: flex; }
.manager-filter-select-nav {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font: inherit;
  min-width: 180px;
  color: var(--ink);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A8371' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.manager-filter-select-nav:focus { outline: none; border-color: var(--bramble); }
@media (max-width: 700px) {
  .manager-filter-select-nav { width: 100%; min-width: 0; }
}

/* ---- icon-only row action buttons/links (view, edit, activate, delete) ---- */
.manager-icon-link,
.manager-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.manager-icon-link svg,
.manager-icon-btn svg { width: 16px; height: 16px; display: block; }
.manager-icon-link:hover,
.manager-icon-btn:hover { background: var(--ivory); border-color: var(--stone); color: var(--ink); }
.manager-icon-link:focus-visible,
.manager-icon-btn:focus-visible { outline: 2px solid var(--bramble); outline-offset: 2px; }

.manager-icon-btn--on { color: #3E6B2E; border-color: #D3E0C8; }
.manager-icon-btn--on:hover { background: #EEF2E5; border-color: #3E6B2E; color: #3E6B2E; }
.manager-icon-btn--off { color: var(--stone); }
.manager-icon-btn--off:hover { background: var(--ivory); border-color: var(--ink-soft); color: var(--ink); }
.manager-icon-btn--danger { color: var(--danger); }
.manager-icon-btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ---- visually hidden utility (accessible labels for icon-only controls) ---- */
.manager-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.manager-empty { color: var(--stone); padding: 24px 0; }

/* ---- manager list pagination ---------------------------------------- */
.manager-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.manager-pagination-count { font-size: 13px; color: var(--stone); }
.manager-pagination-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.manager-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}
a.manager-pagination-link:hover { background: var(--ivory); color: var(--ink); }
.manager-pagination-link.is-current { background: var(--ink); color: var(--ivory); font-weight: 600; }
.manager-pagination-link.is-disabled { color: var(--hairline); }
.manager-pagination-ellipsis { padding: 0 4px; color: var(--stone); }

.manager-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.manager-deflist { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin: 0 0 20px; }
.manager-deflist dt { color: var(--stone); }
.manager-deflist dd { margin: 0; }

.manager-status-form { display: flex; gap: 10px; }
.manager-status-form select { flex: 1; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; font: inherit; }

.manager-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.manager-field-span2 { grid-column: 1 / -1; }
.manager-field-checkbox { display: flex; align-items: center; gap: 8px; }
.manager-field-checkbox input { width: auto; }
.manager-hint { font-size: 12px; color: var(--stone); margin: 4px 0 0; }
.manager-current-image { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }

.manager-variant-row { display: grid; grid-template-columns: 2fr 1fr auto auto auto; gap: 12px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.manager-variant-row:last-child { border-bottom: none; }
.manager-variant-row .field { margin-bottom: 0; }
.manager-variant-row label { font-size: 12px; }

.manager-form-actions { display: flex; gap: 12px; margin-top: 8px; }

.manager-simple-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

@media (max-width: 860px) {
  .manager-detail-grid { grid-template-columns: 1fr; }
  .manager-form-grid { grid-template-columns: 1fr; }
  .manager-variant-row { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
   Manager dashboard v2 - stat card icons, charts, order feed
   (append this to the manager block already in style.css)
   ========================================================================== */
.manager-stat-card { display: flex; align-items: center; gap: 14px; }

.manager-stat-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.manager-stat-icon svg { width: 22px; height: 22px; }

.manager-stat-card--blue .manager-stat-icon { background: #E4F1FB; color: #0F80C4; }
.manager-stat-card--pink .manager-stat-icon { background: #F5E9F5; color: #A6529E; }
.manager-stat-card--yellow .manager-stat-icon { background: #FBF3DC; color: #B8935A; }
.manager-stat-card--orange .manager-stat-icon { background: #FBEAE0; color: #C06B3B; }

.manager-dash-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; margin-bottom: 24px; align-items: start; }
.manager-panel canvas { max-width: 100%; }

.manager-order-feed { display: flex; flex-direction: column; gap: 14px; }
.manager-order-feed-item { display: flex; align-items: center; gap: 12px; }
.manager-order-feed-item .manager-thumb { width: 40px; height: 40px; }
.manager-order-feed-item > div { flex: 1; min-width: 0; }
.manager-order-feed-ref { font-size: 13px; font-weight: 500; }
.manager-order-feed-name { font-size: 12px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.manager-table-product { display: flex; align-items: center; gap: 10px; }

@media (max-width: 960px) {
  .manager-dash-row { grid-template-columns: 1fr; }
}
/* Independent spacing/width control for the two dashboard rows */
.manager-dash-row--top { margin-bottom: 10px; }
.manager-dash-row--bottom { grid-template-columns: 1fr 1.3fr; }

@media (max-width: 960px) {
  .manager-dash-row--bottom { grid-template-columns: 1fr; }
}

/* Equal-height cards within each dashboard row: chart card matches Recent
   Orders' height, and Orders by Status matches Most Ordered Products' height.
   align-items defaults to stretch once removed, so both grid cells take the
   height of the taller one; the panel itself is a column flexbox so its
   content (table/feed/chart) can grow to fill that height. */
.manager-dash-row { align-items: stretch; }
.manager-dash-row > .manager-panel { display: flex; flex-direction: column; height: 100%; margin-bottom: 0; }

.manager-chart-wrap { position: relative; flex: 1; min-height: 220px; }
.manager-chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Dashboard-only: the shell's normal 100px bottom padding leaves a big
   gap under the last row of cards here specifically, since this page's
   content is short. Scoped to .manager-body--dashboard so other manager
   pages (orders, products, categories) keep their usual spacing. */
.manager-body--dashboard .manager-shell { padding-bottom: 10px; }
.manager-dash-row--bottom { margin-bottom: 10px; }

/* ---- dashboard: flow layout ---------------------------------------------
   Sales Overview, Recent Orders, and Orders by Status live together in
   .manager-dash-scroll so they can regroup into one horizontally-scrolling
   row on mobile; Most Ordered Products stays a separate full-width block.
   On larger screens .manager-dash-scroll dissolves (display: contents) and
   all four panels are placed directly on the grid below via grid-area. */
.manager-dash-flow {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-areas:
    "sales   recent"
    "mostord status";
  gap: 24px;
  align-items: stretch;
  margin-bottom: 10px;
}
.manager-dash-flow .manager-panel { display: flex; flex-direction: column; height: 100%; margin-bottom: 0; }
.manager-dash-scroll { display: contents; }
.manager-dash-panel--sales { grid-area: sales; }
.manager-dash-panel--recent { grid-area: recent; }
.manager-dash-panel--most-ordered { grid-area: mostord; }
.manager-dash-panel--status { grid-area: status; }

/* ==========================================================================
   Manager: Reports
   ========================================================================== */

/* ---- toolbar: period pills + range navigator + custom date form -------- */
.manager-report-toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }

.manager-range-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.manager-range-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--white); color: var(--ink);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.manager-range-btn svg { width: 16px; height: 16px; }
.manager-range-btn:hover { background: var(--ivory); border-color: var(--ink); }
.manager-range-btn:disabled,
.manager-range-btn.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.manager-range-label { font-family: 'Fraunces', Georgia, serif; font-size: 17px; min-width: 180px; }
.manager-range-compare { font-size: 12px; color: var(--stone); }

.manager-range-today {
  font-size: 12px; color: var(--bramble); text-decoration: underline;
  margin-left: 4px; white-space: nowrap;
}

.manager-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.manager-btn-outline:hover { background: var(--ink); color: var(--ivory); }
.manager-btn-outline svg { width: 15px; height: 15px; }

/* ---- download dropdown (Export CSV / PDF) ------------------------------- */
.manager-download-dropdown { position: relative; }
.manager-download-dropdown > summary.manager-btn-outline {
  list-style: none;
  justify-content: center;
}
.manager-download-dropdown > summary.manager-btn-outline::-webkit-details-marker { display: none; }
.manager-download-dropdown > summary.manager-btn-outline::marker { content: ""; }
.manager-download-chevron { transition: transform .15s; margin-left: -2px; }
.manager-download-dropdown[open] .manager-download-chevron { transform: rotate(180deg); }

.manager-download-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  min-width: 220px; background: var(--white); border: 1px solid var(--hairline);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(28, 27, 23, 0.12);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.manager-download-menu a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none; transition: background .15s;
}
.manager-download-menu a:hover { background: var(--ivory); }
.manager-download-menu svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--stone); }
.manager-download-menu span { display: flex; flex-direction: column; gap: 1px; }
.manager-download-menu span small { font-size: 11px; color: var(--stone); font-weight: 400; }
.manager-download-menu a span { font-size: 13px; font-weight: 500; }

@media (max-width: 640px) {
  .manager-download-menu { right: 0; left: auto; min-width: 200px; }
}

.manager-custom-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.manager-custom-form-field { display: flex; flex-direction: column; gap: 4px; }
.manager-custom-form-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stone); }
.manager-custom-form input[type="date"] {
  padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 8px;
  font: inherit; font-size: 13px; background: var(--white); color: var(--ink);
}
.manager-custom-form input[type="date"]:focus { outline: none; border-color: var(--bramble); }

/* ---- KPI delta badges ---------------------------------------------------- */
.manager-kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; margin-top: 6px;
}
.manager-kpi-delta svg { width: 12px; height: 12px; }
.manager-kpi-delta--up { color: #3E6B2E; }
.manager-kpi-delta--down { color: var(--danger); }
.manager-kpi-delta--flat { color: var(--stone); font-weight: 500; }
.manager-kpi-delta--new { color: var(--bramble); }
.manager-kpi-compare { display: block; font-size: 11px; color: var(--stone); font-weight: 400; margin-top: 2px; }

/* ---- category revenue rows: name + mini share bar + amount ------------- */
.manager-category-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.manager-category-row:last-child { border-bottom: none; }
.manager-category-name { flex: 0 0 120px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manager-category-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--ivory); overflow: hidden; }
.manager-category-bar-fill { height: 100%; border-radius: 999px; background: var(--bramble); }
.manager-category-amount { flex: 0 0 auto; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---- delivery status mini stats ----------------------------------------- */
.manager-delivery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.manager-delivery-stat { border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 14px; text-align: center; }
.manager-delivery-stat-value { font-family: 'Fraunces', Georgia, serif; font-size: 22px; }
.manager-delivery-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stone); margin-top: 4px; }

/* ---- report toolbar: period select + range nav / custom form, one row --- */
.manager-report-filters-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- report: flow layout -------------------------------------------------
   Revenue Trend, Orders by Payment Status, and Top Products live together
   in .manager-report-scroll so they can regroup into one horizontally-
   scrolling row on mobile; Revenue by Category stays a separate full-width
   block. On larger screens .manager-report-scroll dissolves (display:
   contents) and all four panels are placed directly on the grid via
   grid-area. */
.manager-report-flow {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-areas:
    "trend       status"
    "topproducts category";
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}
.manager-report-flow .manager-panel { display: flex; flex-direction: column; height: 100%; margin-bottom: 0; }
.manager-report-scroll { display: contents; }
.manager-report-panel--trend { grid-area: trend; }
.manager-report-panel--status { grid-area: status; }
.manager-report-panel--topproducts { grid-area: topproducts; }
.manager-report-panel--category { grid-area: category; }

@media (max-width: 860px) {
  .manager-range-nav { justify-content: space-between; }
  .manager-category-name { flex-basis: 90px; }
}

/* ==========================================================================
   Manager: clickable cards, panels & rows
   ========================================================================== */

/* ---- stat cards (dashboard totals + report KPIs) ------------------------ */
a.manager-stat-card,
a.manager-stat-card:visited {
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.manager-stat-card:hover,
a.manager-stat-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--bramble);
}
a.manager-stat-card:focus-visible { outline: 2px solid var(--bramble); outline-offset: 2px; }

/* ---- recent-order feed items --------------------------------------------- */
a.manager-order-feed-item,
a.manager-order-feed-item:visited {
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 6px;
  margin: -6px;
  transition: background .15s ease;
}
a.manager-order-feed-item:hover,
a.manager-order-feed-item:focus-visible {
  background: var(--ivory);
}
a.manager-order-feed-item:focus-visible { outline: 2px solid var(--bramble); outline-offset: 2px; }

/* ---- clickable table rows (products, orders, most/top ordered) ---------- */
.manager-table tbody tr[data-href] { cursor: pointer; }
.manager-table tbody tr[data-href]:hover { background: var(--ivory); }
.manager-table tbody tr[data-href]:focus-visible {
  outline: 2px solid var(--bramble);
  outline-offset: -2px;
}
/* row actions (links/buttons/forms) stay clickable in their own right and
   shouldn't visually look like part of the row-level navigation target */
.manager-table tbody tr[data-href] .manager-row-actions,
.manager-table tbody tr[data-href] a,
.manager-table tbody tr[data-href] button {
  position: relative;
  z-index: 1;
}

/* ---- chart click affordance ---------------------------------------------- */
.manager-panel canvas { cursor: pointer; }
.manager-chart-hint {
  font-size: 12px;
  color: var(--stone);
  text-align: center;
  margin: 8px 0 0;
}

/* ---- revenue-by-category rows (report), when linkable -------------------- */
a.manager-category-row,
a.manager-category-row:visited {
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 10px 8px;
  margin: 0 -8px;
  transition: background .15s ease;
}
a.manager-category-row:hover,
a.manager-category-row:focus-visible {
  background: var(--ivory);
}
a.manager-category-row:focus-visible { outline: 2px solid var(--bramble); outline-offset: 2px; }

/* ---- horizontally-scrolling tables (mobile) ------------------------------ */
.manager-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.manager-table-wrap .manager-table { min-width: 560px; }

/* ==========================================================================
   Manager: responsiveness
   ========================================================================== */
@media (max-width: 700px) {
  .manager-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .manager-stat-card { padding: 14px 16px; gap: 10px; }
  .manager-stat-icon { width: 38px; height: 38px; }
  .manager-stat-icon svg { width: 18px; height: 18px; }
  .manager-stat-value { font-size: 21px; }

  .manager-panel { padding: 16px; }
  .manager-chart-wrap { min-height: 200px; }

  .manager-toolbar { flex-direction: column; align-items: stretch; }
  .manager-search { flex-direction: column; }
  .manager-search input { min-width: 0; width: 100%; }

  /* ---- header row: title stays alongside a search bar living in
     manager_actions (e.g. Orders), instead of wrapping to its own line ---- */
  .manager-main-header { flex-wrap: nowrap; gap: 10px; }
  .manager-main-header h1 { font-size: 20px; flex-shrink: 0; }
  .manager-main-header .manager-search-inline { flex: 1 1 auto; min-width: 0; }
  .manager-main-header .manager-search-inline input { min-width: 0; width: 100%; }

  /* ---- toolbar variant: search + filter select share one row instead
     of stacking (e.g. Products) ---- */
  .manager-toolbar--row { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .manager-toolbar--row .manager-search-inline { flex: 1 1 auto; min-width: 0; }
  .manager-toolbar--row .manager-filter-select { flex: 0 0 auto; }
  .manager-toolbar--row .manager-filter-select-nav {
    width: auto;
    min-width: 0;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .manager-status-form { flex-direction: column; align-items: stretch; }
  .manager-custom-form { flex-direction: column; align-items: stretch; }
  .manager-custom-form-field { width: 100%; }
  .manager-custom-form input[type="date"] { width: 100%; }

  .manager-range-nav { justify-content: space-between; }
  .manager-range-label { min-width: 0; text-align: center; }

  .manager-report-toolbar .manager-btn-outline,
  .manager-main-header .manager-btn-outline { width: auto; }

  /* ---- report filters: select + range nav/custom form share one row ---- */
  .manager-report-filters-row { gap: 10px; }
  .manager-report-filters-row .manager-filter-select-nav { width: auto; min-width: 0; flex: 0 1 auto; }
  .manager-report-filters-row .manager-range-nav,
  .manager-report-filters-row .manager-custom-form { flex: 1 1 auto; }

  /* ---- dashboard & report: horizontally-scrolling card row -------------- */
  .manager-dash-flow,
  .manager-report-flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .manager-dash-scroll,
  .manager-report-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .manager-dash-scroll .manager-panel,
  .manager-report-scroll .manager-panel {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 250px;
    height: auto;
  }
  .manager-dash-flow .manager-panel,
  .manager-report-flow .manager-panel { height: auto; }
}

@media (max-width: 480px) {
  .manager-order-feed-name { max-width: 45vw; }
}


/* ==========================================================================
   Manager: mobile hamburger sidebar (phone widths)
   ========================================================================== */

/* fixed header shown only on phones; holds the brand + hamburger button
   since the sidebar itself lives off-screen until opened */
.manager-mobile-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  z-index: 40;
}
.manager-mobile-bar-brand { font-family: 'Fraunces', Georgia, serif; font-size: 17px; }

.manager-mobile-nav-toggle {
  appearance: none;
  border: none;
  background: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.manager-mobile-nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.manager-mobile-nav-toggle span:nth-child(1) { width: 22px; }
.manager-mobile-nav-toggle span:nth-child(2) { width: 16px; }
.manager-mobile-nav-toggle span:nth-child(3) { width: 22px; }
.manager-mobile-nav-toggle:hover span { width: 22px; }

/* hamburger -> X once the panel is open */
.manager-shell-inner.is-mobile-nav-open .manager-mobile-nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.manager-shell-inner.is-mobile-nav-open .manager-mobile-nav-toggle span:nth-child(2) { opacity: 0; }
.manager-shell-inner.is-mobile-nav-open .manager-mobile-nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.manager-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.45);
  z-index: 41;
  opacity: 0;
  transition: opacity .2s ease;
}
.manager-shell-inner.is-mobile-nav-open .manager-nav-backdrop { opacity: 1; }

body.manager-mobile-nav-locked { overflow: hidden; }

@media (max-width: 700px) {
  .manager-mobile-bar { display: flex; }
  .manager-shell { padding: 76px 0 40px; }

  /* the sidebar becomes a right-hand off-canvas drawer instead of the
     horizontal scrolling bar used at tablet widths */
  .manager-nav {
    position: fixed;
    top: 0; right: 0; left: auto; bottom: 0;
    width: min(280px, 82vw);
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: none;
    border-left: 1px solid var(--hairline);
    border-bottom: none;
    padding: 20px 16px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 42;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
  }
  .manager-shell-inner.is-mobile-nav-open .manager-nav { transform: translateX(0); }
  .manager-shell-inner.is-nav-expanded .manager-nav { width: min(280px, 82vw); }

  /* the desktop expand/collapse row (brand + toggle) is redundant with
     the fixed mobile header above, so it's hidden here */
  .manager-nav-top { display: none; }

  .manager-nav nav { flex-direction: column; gap: 4px; }
  .manager-nav-foot {
    flex-direction: column;
    align-items: stretch;
    margin-top: 16px;
    margin-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 16px;
  }

  /* The desktop "collapsed rail" rules (icons only, centred) are scoped to
     .manager-shell-inner:not(.is-nav-expanded) and are more specific than a
     plain .manager-nav-link/.manager-nav-label rule, so they'd otherwise
     win here even though the drawer is fully open. Match that same
     selector shape to override it and always show full labels + left-
     aligned rows inside the mobile drawer. */
  .manager-shell-inner:not(.is-nav-expanded) .manager-nav-label,
  .manager-shell-inner:not(.is-nav-expanded) .manager-nav-brand,
  .manager-shell-inner:not(.is-nav-expanded) .manager-nav-profile-info {
    display: inline;
  }
  .manager-shell-inner:not(.is-nav-expanded) .manager-nav-profile-info { display: flex !important; }
  .manager-shell-inner:not(.is-nav-expanded) .manager-nav-link { justify-content: flex-start; }
  .manager-shell-inner:not(.is-nav-expanded) .manager-nav-top { justify-content: flex-start; }
  .manager-shell-inner:not(.is-nav-expanded) .manager-nav-profile { justify-content: flex-start; }

  .manager-main,
  .manager-shell-inner.is-nav-expanded .manager-main { margin-left: 0; margin-top: 0; }
}