.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.brand > span {
  min-width: 0;
}

.brand-mark {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  background: var(--ink);
  color: #fff3d6;
  font-weight: 900;
}

img.brand-mark.brand-logo {
  background: transparent;
  border: 0;
  border-radius: 6px;
  object-fit: contain;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong,
.brand small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand strong {
  line-height: 1.05;
}

.brand small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
  color: #342f2a;
}

.topbar nav a:not(.whatsapp-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.topbar nav a:not(.whatsapp-btn):hover,
.topbar nav a:not(.whatsapp-btn).active,
.topbar nav a:not(.whatsapp-btn)[aria-current="page"] {
  color: var(--ink);
}

.topbar nav a:not(.whatsapp-btn).active::after,
.topbar nav a:not(.whatsapp-btn)[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  background: var(--green);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.mobile-header-icons {
  display: none;
}

.mobile-icon-btn {
  position: relative;
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.mobile-icon-btn svg {
  width: 21px;
  height: 21px;
}

.mobile-icon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.62rem;
  min-width: 19px;
  height: 19px;
}

.header-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 84px 16px 16px;
  background: rgba(25, 20, 13, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.header-search-overlay[hidden] {
  display: none;
}

.header-search-overlay.open {
  opacity: 1;
}

.header-search-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 14px;
  width: min(560px, 100%);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  /* Top padding is sized to actually clear the floating close button (top:14px + 34px tall +
     a bit of breathing room) instead of the previous flat 20px, which let the button visually
     collide with the search row right beneath it. */
  padding: 20px 20px 20px;
  border: 1px solid rgba(221, 212, 198, 0.9);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 30px 80px rgba(25, 20, 13, 0.32);
  transform: translateY(-14px) scale(0.98);
  transition: transform 200ms ease;
}

.header-search-heading {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.header-search-panel .global-search-results {
  grid-column: 1 / -1;
}

.header-search-overlay.open .header-search-panel {
  transform: translateY(0) scale(1);
}

.header-search-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(233, 223, 207, 0.8);
  color: var(--ink);
  cursor: pointer;
}

.header-search-close svg {
  width: 18px;
  height: 18px;
}

/* On mobile, the search popup drops the floating-dialog chrome (blurred backdrop, centered
   card, shadow) and instead takes over the full screen with the site's own paper background —
   so it reads as "the home page's search bar, full screen" rather than a modal dialog. */
@media (max-width: 760px) {
  .header-search-overlay {
    align-items: stretch;
    padding: 0;
    background: var(--paper);
    backdrop-filter: none;
  }

  .header-search-panel {
    width: 95%;
    max-height: none;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--paper);
    padding: 36px 16px 24px;
    align-content: start;
    transform: none;
  }

  .header-search-overlay.open .header-search-panel {
    transform: none;
  }

  .header-search-close {
    top: 18px;
    right: 16px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(25, 20, 13, 0.12);
  }

  .header-search-heading {
    font-size: 1.1rem;
  }

  .header-search-panel .global-search-box {
    min-height: 54px;
    padding: 0 14px;
  }

  .header-search-panel .global-search-shop-btn {
    width: auto;
    /* Not 0 — that let this auto-sized grid column shrink smaller than the button's own
       nowrap text, spilling/wrapping it, whenever the input box got squeezed on a narrow
       screen. max-content keeps the button at its natural text width always; the input's
       own minmax(0, 1fr) column is what should absorb the shrinking instead. */
    min-width: max-content;
    flex-shrink: 0;
    min-height: 54px;
    padding: 0 18px;
  }

  .header-search-panel .global-search-box {
    overflow: hidden;
  }
}

/* Very narrow phones: even a max-content-wide button leaves too little room for the input to
   stay usable side-by-side (it was overlapping/clipping under the button). Stack them instead —
   full-width search box on top, full-width button below. */
@media (max-width: 420px) {
  .header-search-panel {
    grid-template-columns: 1fr;
  }

  .header-search-panel .global-search-box {
    grid-column: 1;
  }

  .header-search-panel .global-search-shop-btn {
    grid-column: 1;
    width: 100%;
    min-width: 0;
  }
}

.hero,
.home-search-hero,
.catalogue-head,
.product-grid,
.commerce-band,
.contact-section,
.detail-page,
.error-page,
.collection-showcase,
.budget-showcase {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.shop-head {
  border-top: none;
  padding-top: 56px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.68fr);
  gap: clamp(30px, 6vw, 76px);
  align-items: center;
  min-height: min(80vh, 680px);
  padding: 48px 0 34px;
}

.home-search-hero {
  display: grid;
  gap: 24px;
  padding: 8px 0;
}

.home-search-copy {
  max-width: 780px;
}

.home-search-copy h1 {
  margin: 8px 0 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.5rem, 7vw, 5.6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--ink);
}

.home-search-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.6;
}

.global-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  max-width: 880px;
}

.global-search-results {
  grid-column: 1 / -1;
}

.global-search-box {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 20px;
  border: 1px solid rgba(205, 188, 163, 0.9);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 18px 48px rgba(28, 23, 15, 0.09);
}

.global-search-box svg {
  width: 24px;
  height: 24px;
  color: var(--green);
}

.global-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.global-search-shop-btn {
  justify-self: start;
  min-width: 160px;
  min-height: 42px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: #fff8eb;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.global-search-shop-btn:hover {
  background: var(--green);
}

.global-search-results {
  display: grid;
  gap: 8px;
}

.global-search-empty {
  padding: 18px 20px;
  border: 1px dashed rgba(205, 188, 163, 0.9);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 253, 248, 0.64);
}

.global-search-result {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 10px;
  border: 1px solid rgba(221, 212, 198, 0.9);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.94);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.global-search-result:hover {
  transform: translateY(-1px);
  border-color: rgba(24, 115, 101, 0.42);
  box-shadow: 0 14px 30px rgba(28, 23, 15, 0.08);
}

.global-search-thumb,
.global-search-thumb img,
.global-search-thumb-empty {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}

.global-search-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f3eee4;
}

.global-search-thumb img {
  object-fit: cover;
}

.global-search-thumb-empty {
  display: grid;
  place-items: center;
  color: #fff3d6;
  background: var(--ink);
  font-weight: 900;
}

.global-search-result-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.global-search-type {
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-search-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result > strong {
  color: var(--ink);
  font-size: 0.98rem;
  white-space: nowrap;
}

.floating-cart {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 20px 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: #fff8eb;
  box-shadow: 0 14px 38px rgba(25, 20, 13, 0.22);
  cursor: pointer;
  transition: transform 190ms ease, box-shadow 190ms ease;
}

.floating-cart:hover {
  transform: scale(1.045);
  box-shadow: 0 18px 46px rgba(25, 20, 13, 0.28);
}

.floating-cart.cart-empty-state {
  width: 58px;
  min-height: 58px;
  justify-content: center;
  padding: 0;
}

.floating-cart.cart-empty-state .floating-cart-left {
  gap: 0;
}

.floating-actions {
  position: fixed;
  right: 22px;
  bottom: 94px;
  z-index: 44;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-action {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(167, 125, 53, 0.28);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink);
  box-shadow: 0 14px 38px rgba(25, 20, 13, 0.16);
  cursor: pointer;
  transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
}

.floating-action svg {
  width: 22px;
  height: 22px;
}

.floating-action:hover {
  transform: scale(1.045);
  box-shadow: 0 18px 46px rgba(25, 20, 13, 0.2);
  border-color: rgba(167, 125, 53, 0.55);
}

.floating-action-whatsapp {
  color: var(--green);
}

@media (max-width: 768px) {
  /* The mobile cart bar is a full-width flush-bottom strip (not the small circular FAB used on
     desktop), so floating-actions needs real clearance above it — including the safe-area inset
     on devices with a home indicator — or the two stacks of buttons collide. */
  .floating-actions {
    right: 18px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

.cart-icon {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: inherit;
}

.floating-cart-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.floating-cart-total {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 800;
  color: inherit;
  white-space: nowrap;
}

.floating-cart-total[hidden] {
  display: none;
}

.floating-cart-view {
  display: none;
}

.cart-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  background: var(--copper);
  color: white;
  font-size: 0.75rem;
  font-weight: 900;
}

.cart-badge.bump {
  animation: badge-bump 230ms ease;
}

@keyframes badge-bump {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.24);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .floating-cart {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 0;
    box-shadow: 0 -8px 28px rgba(25, 20, 13, 0.18);
  }

  .floating-cart-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .floating-cart-total {
    font-size: 0.95rem;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .floating-cart-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff8eb;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .cart-badge {
    top: -6px;
    right: -6px;
  }

  /* Base .cart-empty-state (2 classes) outranks the .floating-cart rule above (1 class) by
     specificity, so its width/padding/justify-content would win here and collapse the strip
     back into a small pill even though this query no longer repositions it — force the strip
     layout back explicitly. */
  .floating-cart.cart-empty-state {
    width: 100%;
    min-height: 0;
    justify-content: space-between;
    padding: 12px 18px;
  }
}

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: rgba(21, 21, 21, 0);
  transition: background 220ms ease;
}

.cart-overlay.open {
  pointer-events: auto;
  background: rgba(21, 21, 21, 0.24);
}

.customer-capture-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(21, 21, 21, 0.42);
  backdrop-filter: blur(8px);
}

.customer-capture-dialog {
  width: min(420px, calc(100% - 28px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: transparent;
}

.customer-capture-dialog::backdrop {
  background: transparent;
}

.customer-capture-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid rgba(217, 208, 193, 0.95);
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 24px 80px rgba(25, 20, 13, 0.24);
}

.customer-capture-card h2 {
  margin: -4px 0 0;
  font-size: 1.35rem;
}

.customer-capture-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.customer-capture-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.customer-capture-card input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-transform: none;
}

.customer-capture-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.customer-capture-close svg {
  width: 18px;
  height: 18px;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 55;
  display: flex;
  width: min(430px, 100%);
  height: 100vh;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdf8, #f8f2e8);
  /* The topbar is position:fixed at every viewport width (z-index 90, above the drawer's own
     55), so the drawer always needs top clearance for its own heading to stay visible — not
     just on mobile. */
  padding: 92px 22px 22px;
  box-shadow: -24px 0 60px rgba(25, 20, 13, 0.18);
  transform: translateX(104%);
  transition: transform 230ms ease;
}

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

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.cart-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.cart-footer-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cart-footer-links .text-btn {
  padding: 4px 0;
}

.cart-head h2 {
  margin: 0;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-close-icon {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.cart-close-icon svg {
  width: 13px;
  height: 13px;
}

.cart-close-icon:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.cart-customer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(217, 208, 193, 0.9);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
}

.cart-customer span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cart-customer strong,
.cart-customer small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-customer strong {
  font-size: 0.85rem;
}

.cart-customer small {
  color: var(--muted);
  font-size: 0.72rem;
}

.cart-customer .text-btn {
  grid-column: 2;
  grid-row: 2 / 4;
  padding: 0;
  font-size: 0.72rem;
}

.cart-empty {
  display: grid;
  min-height: 160px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.66);
  text-align: center;
}

.cart-empty[hidden],
.inline-empty[hidden],
[hidden] {
  display: none !important;
}

.cart-items {
  display: grid;
  gap: 12px;
  overflow: auto;
  /* Stops scrolling to the end of this list from "chaining" into a scroll of the page
     behind the drawer — without this, flicking to the bottom of a long cart keeps the
     background storefront scrolling too. */
  overscroll-behavior: contain;
  padding: 2px 2px 16px;
}

.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(217, 208, 193, 0.88);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  /* Extra right padding clears the remove (X) button, which is pinned to the vertical
     center of the card via absolute positioning (see .cart-remove) instead of living in
     the grid flow — that way it stays fixed at the right-middle at every screen width
     instead of dropping to its own row once the grid collapses to 2 columns on mobile. */
  padding: 10px 40px 10px 10px;
  box-shadow: 0 10px 28px rgba(22, 17, 9, 0.06);
  transition: transform 170ms ease, box-shadow 170ms ease;
  cursor: pointer;
}

.cart-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(22, 17, 9, 0.09);
}

.cart-item:focus-visible {
  outline: 2px solid rgba(35, 110, 99, 0.45);
  outline-offset: 2px;
}

.cart-item button,
.cart-item input {
  cursor: auto;
}

.cart-item img,
.cart-image-empty {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1e7d9;
}

.cart-item-main {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.cart-item-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-main span {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.qty-control {
  display: inline-grid;
  width: max-content;
  grid-template-columns: 34px 42px 34px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
}

.qty-control input {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-btn {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}

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

.qty-btn:hover {
  background: rgba(167, 125, 53, 0.12);
  color: var(--gold);
}

.qty-btn:active {
  transform: scale(0.86);
}

.cart-remove {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.cart-remove svg {
  width: 15px;
  height: 15px;
}

.cart-remove:hover {
  background: transparent;
  border-color: transparent;
  color: var(--danger, #c0392b);
  transform: translateY(-50%) scale(1.18);
}

.cart-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.select-gift-btn {
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(167, 125, 53, 0.55);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  transition: transform 170ms ease, background 170ms ease, color 170ms ease, box-shadow 170ms ease;
}

.select-gift-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 24px rgba(22, 17, 9, 0.11);
}

.select-gift-btn.selected {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.hero-metrics {
  margin: 26px 0;
}

.hero-metrics article {
  min-width: 118px;
  border-top: 1px solid rgba(21, 21, 21, 0.35);
  padding-top: 12px;
}

.hero-metrics strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
  font-weight: 500;
}

.hero-metrics span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.primary-btn,
.secondary-btn,
.whatsapp-btn,
.danger-btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.secondary-btn {
  background: transparent;
  color: var(--ink);
}

.whatsapp-btn {
  border-color: var(--green);
  background: var(--green);
}

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

a[href*="/trade"].primary-btn,
button[type="submit"].primary-btn[name*="trade"],
.trade-access-screen .primary-btn {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}

a[href*="wa.me"].primary-btn,
a[href*="wa.me"].secondary-btn,
a[href*="wa.me"].whatsapp-btn,
.whatsapp-btn {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.full-btn {
  width: 100%;
}

.text-btn {
  border: none;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  min-height: auto;
  padding: 6px 0;
}

.cart-clear-btn:hover {
  color: #b3413a;
}

.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  font-size: 1rem;
}

.cart-minimum-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(167, 125, 53, 0.32);
  border-radius: 8px;
  background: var(--amber-bg, #f7ecd6);
  color: #8a6416;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
}

.cart-minimum-note::before {
  content: "!";
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: #fff8eb;
  font-size: 0.72rem;
  font-weight: 900;
}

.cart-minimum-note.shake {
  animation: cart-minimum-shake 420ms ease;
}

@keyframes cart-minimum-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}

.cart-item-price {
  font-weight: 600;
  color: var(--copper);
}

button:hover,
.primary-btn:hover,
.secondary-btn:hover,
.whatsapp-btn:hover,
.danger-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(21, 21, 21, 0.12);
}

.hero-feature {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(21, 21, 21, 0.2);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.hero-feature img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.hero-feature div {
  display: grid;
  gap: 4px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, #f4eee3);
}

.hero-feature strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 500;
}

.catalogue-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 36px 0 18px;
  border-top: 1px solid var(--line);
}

.collection-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 6;
  min-height: 160px;
  max-height: 360px;
  overflow: hidden;
}

.collection-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .collection-banner {
    aspect-ratio: 4 / 3;
    max-height: 280px;
  }
}

.collection-banner-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 28px clamp(18px, 4vw, 54px);
  background: linear-gradient(0deg, rgba(21, 21, 21, 0.72), rgba(21, 21, 21, 0) 65%);
  color: #fff8eb;
}

.collection-banner-copy .eyebrow {
  color: rgba(255, 248, 235, 0.8);
}

.collection-banner-copy h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 500;
}

.collection-banner-copy p {
  margin: 0;
  max-width: 60ch;
  color: rgba(255, 248, 235, 0.9);
}

.collection-anchor-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

textarea {
  min-height: 108px;
  resize: vertical;
}

/* Grows with its content (see autosizeTextarea() in app.js) instead of scrolling internally. */
[data-enquiry-message] {
  overflow: hidden;
  resize: none;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(182, 138, 61, 0.16);
}

.date-picker {
  position: relative;
  min-width: 0;
}

.date-picker-range {
  min-width: min(100%, 280px);
}

.date-picker input[type="date"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.date-picker-button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
}

.date-picker-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted);
}

.date-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 65;
  display: grid;
  width: min(310px, calc(100vw - 32px));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  box-shadow: var(--shadow);
}

.date-picker-menu.align-end {
  right: 0;
  left: auto;
}

.date-picker-menu[hidden] {
  display: none;
}

.date-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.date-picker-head strong {
  font-size: 0.95rem;
}

.date-picker-nav,
.date-picker-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.date-picker-nav {
  width: 32px;
  height: 32px;
}

.date-picker-nav svg {
  width: 15px;
  height: 15px;
}

.date-picker-week,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.date-picker-week span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.date-picker-day {
  aspect-ratio: 1;
  font-size: 0.82rem;
}

.date-picker-day.is-muted {
  color: color-mix(in srgb, var(--muted) 62%, white);
}

.date-picker-day.is-today {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}

.date-picker-day.is-selected {
  background: var(--ink);
  color: #fff;
}

.date-picker-day.is-range {
  background: rgba(167, 125, 53, 0.14);
  color: var(--ink);
}

.date-picker-day.is-range-start,
.date-picker-day.is-range-end {
  background: var(--ink);
  color: #fff;
}

.date-picker-status {
  border: 1px solid rgba(217, 208, 193, 0.7);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.72);
  padding: 7px 9px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.date-picker-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.date-picker-foot button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  padding: 0 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 520px) {
  .date-picker,
  .date-picker-range {
    width: 100%;
  }

  .date-picker-menu,
  .date-picker-menu.align-end {
    position: fixed;
    right: 12px;
    left: 12px;
    top: auto;
    bottom: 14px;
    width: auto;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
  }
}

.filters input {
  flex: 1 1 220px;
}

.filters select {
  flex: 1 1 170px;
}

.filters-decorated {
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.92);
  padding: 12px;
  box-shadow: 0 8px 22px rgba(22, 17, 9, 0.05);
}

/* Desktop persistent filter sidebar — hidden by default (mobile keeps the top quick-tabs pills
   plus the floating-button popup); shown as a real sidebar beside the grid at desktop widths. */
.shop-desktop-sidebar {
  display: none !important;
}

.shop-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .filter-search / .price-range-row set `flex: 1 1 <px>` for horizontal flex-row contexts
   elsewhere on this page — inside this vertical (column) sidebar section that basis would
   apply to height instead of width, so pin both back to a normal full-width block. */
.shop-sidebar-section .filter-search,
.shop-sidebar-section .price-range-row {
  flex: none;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* The sidebar column (260px) is narrower than the viewport widths the general
   .price-range-row 3-column grid assumes — reuse the same flex/full-width-slider layout
   the mobile popup uses, regardless of viewport width, since what matters here is the
   *container's* width, not the screen's. */
.shop-sidebar-section .price-range-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
}

.shop-sidebar-section .price-range-slider {
  order: 3;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.shop-sidebar-section .price-range-label,
.shop-sidebar-section .price-range-value {
  border: 0;
  padding: 0;
}

.shop-sidebar-section + .shop-sidebar-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* .shop-body-layout wraps .results-bar/.product-grid/.shop-load-more (previously direct
   children of <main>, each self-centering via `width: min(1180px, 100% - 32px)`). Now that
   they're nested one level deeper, that same rule would compute against .shop-main-content's
   (narrower, sidebar-adjusted) width instead of the page — so .shop-body-layout takes over the
   single 1180px centering, and the inner elements just fill their column at 100%. */
.shop-body-layout {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.shop-main-content {
  min-width: 0;
  width: 100%;
}

.shop-main-content .results-bar,
.shop-main-content .product-grid,
.shop-main-content .shop-load-more {
  width: 100%;
  margin-inline: 0;
}

@media (min-width: 1081px) {
  .shop-body-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }

  .shop-desktop-sidebar {
    display: flex !important;
    flex-direction: column;
    position: sticky;
    top: 18px;
  }

  .shop-desktop-sidebar .filter-actions {
    margin: 18px 0 0;
  }
}

.filters-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.filters-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}

.filters-heading-icon {
  display: grid;
  flex: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: rgba(167, 125, 53, 0.14);
  color: var(--gold);
}

.filters-heading-icon svg {
  width: 19px;
  height: 19px;
}

.filters-heading h3 {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.filters-reset {
  flex: none;
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filters-reset:hover {
  color: var(--gold);
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.shop-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
}

.shop-filter-backdrop,
.shop-filter-panel-head,
.shop-filter-close {
  display: none;
}

html.shop-filter-open,
body.shop-filter-open {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

.shop-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  background: rgba(22, 17, 9, 0.42);
}

.shop-filter-backdrop[hidden] {
  display: none;
}

.shop-filter-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -105%;
  z-index: 85;
  display: flex;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  max-height: min(84vh, 680px);
  overflow: auto;
  padding: 18px;
  border: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -22px 48px rgba(22, 17, 9, 0.26);
  transition: bottom 220ms ease;
  -webkit-overflow-scrolling: touch;
}

.shop-filter-panel.is-open {
  bottom: 0;
}

.shop-filter-panel-head {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: calc(100% + 36px);
  margin: -18px -18px 0;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.96);
}

.shop-filter-panel-head strong {
  display: block;
  font-size: 1rem;
}

.shop-filter-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shop-filter-reset-link {
  flex: none;
  color: var(--green);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.shop-filter-reset-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-filter-panel-body {
  display: flex;
  align-items: stretch;
  width: calc(100% + 36px);
  margin: 0 -18px;
  min-height: 220px;
}

.shop-filter-tabs {
  display: flex;
  flex: 0 0 118px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding: 10px 0;
}

.shop-filter-tab {
  padding: 13px 16px;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
}

.shop-filter-tab.is-active {
  border-left-color: var(--green);
  background: rgba(35, 110, 99, 0.08);
  color: var(--green);
}

.shop-filter-tab-panels {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px;
}

.shop-filter-tab-panel {
  display: none;
}

.shop-filter-tab-panel.is-active {
  display: block;
}

.shop-filter-panel-foot {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  width: calc(100% + 36px);
  margin: auto -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.96);
}

.shop-filter-apply-btn {
  width: 100%;
}

.shop-filter-close {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}

.shop-filter-close svg {
  width: 18px;
  height: 18px;
}

.shop-filter-collections {
  display: grid;
  gap: 8px;
  width: 100%;
  overflow: visible;
}

.shop-filter-collections .quick-tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 0;
  padding-bottom: 6px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.shop-filter-collections .quick-tabs a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
}

.shop-filter-panel .shop-filter-row {
  grid-template-columns: 1fr;
  width: 100%;
}

.shop-filter-row .filter-search,
.shop-filter-row .price-range-row {
  flex: none;
  width: 100%;
}

/* With Apply Filters / Share this view hidden, .filter-actions usually only
   holds the (conditional) Reset link — let it sit inline as a third column
   instead of wrapping to its own near-empty row below the two filter boxes. */
.shop-filter-row .filter-actions {
  margin-left: 0;
}

.shop-filter-actions-hidden[hidden] {
  display: none !important;
}

.filters-row select {
  flex: 1 1 0;
  min-width: 150px;
}

.filters-decorated select {
  cursor: pointer;
}

.price-range-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(217, 208, 193, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0 12px;
}

/* On /shop this element also carries .admin-price-slider-row (shared with the
   admin product filters), whose padding: 12px 16px (defined later, in
   admin.css) otherwise wins and makes this box taller than .filter-search /
   the Reset button next to it. Scope an override to this exact combination so
   admin pages using .admin-price-slider-row alone are unaffected. */
.price-range-row.admin-price-slider-row {
  padding: 0 12px;
}

.price-range-label {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-right: 1px solid var(--line);
  padding-right: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.price-range-slider {
  --price-track-inset: 12px;
  position: relative;
  flex: 1 1 auto;
  height: 36px;
  min-width: 160px;
  touch-action: none;
  cursor: pointer;
}

.price-range-slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--price-track-inset);
  right: var(--price-track-inset);
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(217, 208, 193, 0.9);
}

.price-range-fill {
  position: absolute;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--green);
  pointer-events: none;
}

.price-range-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--panel);
  box-shadow: 0 4px 12px rgba(22, 17, 9, 0.24);
  cursor: grab;
  touch-action: none;
  z-index: 2;
}

.price-range-thumb:hover,
.price-range-thumb:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 6px 16px rgba(22, 17, 9, 0.28);
}

.price-range-thumb:active {
  cursor: grabbing;
  z-index: 3;
  transform: translate(-50%, -50%) scale(1.1);
}

.price-range-thumb:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.price-range-value {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: flex-end;
  border-left: 1px solid var(--line);
  padding-left: 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.price-budget-fields {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.price-budget-field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.price-budget-field input {
  flex: none;
  width: 100%;
  font-size: 0.92rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}

/* Between mobile and desktop, minmax(0, 1fr) minmax(0, 1fr) auto squeezes the
   search box, price-range box and actions into one cramped row with nothing
   to give — stack them like on mobile instead of letting them overlap/clip. */
@media (max-width: 900px) {
  .shop-filter-row {
    grid-template-columns: 1fr;
  }

  .shop-filter-row .filter-actions {
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* Grid (1fr auto + a spanning row-2 item) let the "auto" value column inflate to fit the
   spanning slider's own intrinsic size in some browsers, pushing the track/thumbs past the
   card's right edge. Flex with the slider forced to its own 100%-wide line avoids that: its
   width always resolves to the container's own content width, never wider. */
@media (max-width: 640px) {
  .price-range-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
  }

  .price-range-slider {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .price-range-label {
    border-right: 0;
    padding-right: 0;
  }

  .price-range-value {
    border-left: 0;
    padding-left: 0;
  }
}

/* Below ~400px, "Price Range" + "₹390 – ₹1,548" can no longer both fit on one line next to
   each other — let them wrap/shrink instead of overflowing past the card's edge. */
@media (max-width: 420px) {
  .price-range-label,
  .price-range-value {
    white-space: normal;
    border: 0;
    padding: 0;
  }
}

.filters-decorated select:hover,
.filters-decorated .inline-check:hover {
  border-color: var(--gold);
}

.filter-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #fffdf8);
  padding: 0 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.filter-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}

.filter-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-size: 0.92rem;
  color: var(--ink);
  outline: none;
  box-shadow: none !important;
}

.filter-search-icon {
  position: static !important;
  transform: none !important;
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  pointer-events: none;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.filters-reset-btn {
  flex: 0 0 auto;
}

.btn-icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* The view-dialog action icons are set dynamically via .innerHTML with bare <svg> markup
   (no width/height of their own) into a wrapping span.btn-icon — as a span, it ignores the
   width/height above (non-replaced inline elements do), so give it its own box to size against. */
.view-dialog-actions-secondary .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}

.view-dialog-actions-secondary .btn-icon svg {
  width: 100%;
  height: 100%;
}

.view-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.view-dialog-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-tabs-panel {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  padding: 14px;
}

.quick-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  padding-top: 10px;
}

.quick-tabs a {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.quick-tabs a,
.chip-list span,
.status-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  padding: 9px 12px;
}

.chip-list span,
.status-pill {
  min-width: max-content;
}

.quick-tabs a.active {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.collection-showcase {
  display: grid;
  gap: 18px;
  padding: 12px 0 54px;
  border-top: 1px solid var(--line);
}

.collection-grid {
  --home-card-media-height: calc(((min(1180px, 100vw - 32px) - 54px) / 4) * 0.75);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Two-layer crossfade stage for rotating card images (collection/spotlight/budget cards) —
   see the [data-rotate-images] handler in app.js. Keeping the original in-flow image (which
   carries each card type's own sizing rules below) as the layout box, with the cloned second
   layer absolutely filling it, means this one rule works for every aspect ratio in use. */
.image-rotator-stage {
  position: relative;
  display: block;
}

.image-rotator-stage img {
  transition: opacity 500ms ease;
}

.image-rotator-stage img.image-rotator-layer-b {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}

.collection-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(22, 17, 9, 0.06);
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.collection-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(22, 17, 9, 0.1);
}

.collection-card img,
.collection-card-empty {
  display: block;
  width: 100%;
  height: var(--home-card-media-height);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e9dfcf;
}

.collection-card-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.74rem;
}

.collection-card div {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.collection-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 500;
}

.collection-card span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .collection-grid {
    --home-card-media-height: calc(((min(1180px, 100vw - 32px) - 28px) / 3) * 0.75);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .collection-card img,
  .collection-card-empty {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .collection-card {
    position: relative;
    aspect-ratio: 1 / 1;
  }

  .collection-card img,
  .collection-card-empty {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  .collection-card div {
    position: absolute;
    inset: auto 0 0;
    padding: 10px;
    background: linear-gradient(180deg, rgba(20, 14, 7, 0), rgba(20, 14, 7, 0.78));
    color: white;
  }

  .collection-card strong {
    font-size: 0.94rem;
    line-height: 1.08;
  }

  .collection-card span {
    color: rgba(255, 255, 255, 0.86);
  }
}

.budget-showcase {
  display: grid;
  gap: 18px;
  padding: 42px 0 54px;
  border-top: 1px solid var(--line);
}

.budget-grid {
  --home-card-media-height: calc(((min(1180px, 100vw - 32px) - 54px) / 4) * 0.75);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.budget-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(22, 17, 9, 0.06);
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.budget-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(22, 17, 9, 0.1);
}

.budget-card img,
.budget-card .collection-card-empty {
  display: block;
  width: 100%;
  height: var(--home-card-media-height);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e9dfcf;
  transition: opacity 300ms ease;
}

.budget-card div {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.budget-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 500;
}

.budget-card span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.budget-card-range {
  color: var(--green, #4a7c59);
  font-weight: 600;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .budget-grid {
    --home-card-media-height: calc(((min(1180px, 100vw - 32px) - 28px) / 3) * 0.75);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .budget-card img,
  .budget-card .collection-card-empty {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 768px) {
  .budget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .budget-card {
    position: relative;
    aspect-ratio: 1 / 1;
  }

  .budget-card img,
  .budget-card .collection-card-empty {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  .budget-card div {
    position: absolute;
    inset: auto 0 0;
    padding: 10px;
    background: linear-gradient(180deg, rgba(20, 14, 7, 0), rgba(20, 14, 7, 0.78));
    color: white;
  }

  .budget-card strong {
    font-size: 0.94rem;
    line-height: 1.08;
  }

  .budget-card span,
  .budget-card-range {
    color: rgba(255, 255, 255, 0.86);
  }
}

.budget-bracket-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}

.budget-bracket-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #e9dfcf;
}

.budget-bracket-preview-count {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  margin-bottom: 10px;
}

/* Shop view toggle (grid / list / compact) — see [data-shop-view] below for the responsive
   column counts and card layout each mode uses at mobile/tablet/desktop widths. */
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  line-height: 0;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease;
}

.view-toggle-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

.view-toggle-btn:hover {
  color: var(--ink);
}

.view-toggle-btn.active {
  background: var(--ink);
  color: #fff8eb;
}

.results-bar {
  display: flex;
  width: min(1180px, calc(100% - 32px));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-inline: auto;
  padding-bottom: 16px;
  flex-wrap: wrap;
}

.results-count {
  color: var(--muted);
  font-size: 0.86rem;
}

.product-grid.is-loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.shop-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: min(1180px, calc(100% - 32px));
  min-height: 72px;
  margin: 10px auto 46px;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

.shop-load-more.is-complete span {
  color: var(--gold);
  font-weight: 700;
}

.shop-load-more-btn {
  min-height: 34px;
  padding-block: 7px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 54px;
}

/* Cards are wrapped in a [data-product-cards] div (so /shop's "Load more"/search can replace just
   that inner HTML) — display:contents removes the wrapper from the box tree so .product-card
   elements become direct grid items of .product-grid again, instead of collapsing into a single
   block-flow column regardless of the grid/list/compact toggle. */
.product-grid > [data-product-cards] {
  display: contents;
}

@media (min-width: 641px) {
  .product-grid[data-shop-view="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1081px) {
  .product-grid[data-shop-view="grid"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* List view: one column, cards laid out as a horizontal row (thumbnail + details + price/cart). */
.product-grid[data-shop-view="list"] {
  grid-template-columns: 1fr;
  gap: 12px;
}

.product-grid[data-shop-view="list"] .product-card {
  --list-media-size: 180px;
  position: relative;
  flex-direction: row;
  align-items: stretch;
  min-height: var(--list-media-size);
}

.product-grid[data-shop-view="list"] .product-media {
  position: static;
  align-self: stretch;
  flex: 0 0 var(--list-media-size);
  width: var(--list-media-size);
  height: auto;
  aspect-ratio: 1 / 1;
}

.product-grid[data-shop-view="list"] .floating-card-cart {
  right: 14px;
  bottom: 14px;
}

.product-grid[data-shop-view="list"] .floating-card-qty {
  right: 14px;
  bottom: 16px;
  width: auto;
}

.product-grid[data-shop-view="list"] .card-qty-control.floating-card-qty {
  grid-template-columns: 34px auto 34px;
  border-radius: 999px;
  border-width: 1px;
}

/* Sized in ch so it naturally grows with the digit count; app.js keeps this in sync with the
   current value each render instead of reserving a fixed width for the worst case. */
.product-grid[data-shop-view="list"] .card-qty-control.floating-card-qty input {
  width: 2.2ch;
  min-width: 2.2ch;
  padding: 0 4px;
}

.product-grid[data-shop-view="list"] .product-image {
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.product-grid[data-shop-view="list"] .product-image img,
.product-grid[data-shop-view="list"] .product-image-empty {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.product-grid[data-shop-view="list"] .product-body {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
  padding-right: 78px;
}

.product-grid[data-shop-view="list"] .product-body > span.product-collection {
  flex-basis: 100%;
}

.product-grid[data-shop-view="list"] .product-card h3 {
  flex: 1;
  min-width: 160px;
}

.product-list-info {
  display: none;
}

.product-grid[data-shop-view="list"] .product-list-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 100%;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-grid[data-shop-view="list"] .product-list-info li {
  position: relative;
  min-width: 0;
  padding-left: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.product-grid[data-shop-view="list"] .product-list-info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.product-grid[data-shop-view="list"] .product-list-info span {
  display: inline;
  color: var(--muted);
}

.product-grid[data-shop-view="list"] .product-list-info span::after {
  content: ": ";
}

.product-grid[data-shop-view="list"] .product-list-info strong {
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-grid[data-shop-view="list"] .card-price-row {
  flex: 0 0 auto;
  gap: 14px;
  margin-top: 0;
}

@media (min-width: 641px) {
  .product-grid[data-shop-view="list"] .product-card {
    --list-media-size: clamp(170px, 20vw, 220px);
  }

  .product-grid[data-shop-view="list"] .product-media {
    flex-basis: var(--list-media-size);
    width: var(--list-media-size);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .product-grid[data-shop-view="list"] .product-card {
    --list-media-size: clamp(150px, 23vw, 190px);
    min-height: var(--list-media-size);
  }

  .product-grid[data-shop-view="list"] .product-media {
    align-self: stretch;
    height: auto;
  }

  .product-grid[data-shop-view="list"] .product-body {
    gap: 8px 14px;
    padding-block: 14px;
    padding-right: 78px;
  }

  .product-grid[data-shop-view="list"] .floating-card-qty {
    right: 16px;
    bottom: 18px;
    width: auto;
  }

  .product-grid[data-shop-view="list"] .card-qty-control.floating-card-qty {
    border-radius: 999px;
    border-width: 1px;
  }

}

@media (min-width: 641px) and (max-width: 760px) {
  .product-grid[data-shop-view="list"] .product-card {
    --list-media-size: 120px;
    min-height: 148px;
  }

  .product-grid[data-shop-view="list"] .product-body {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px 64px 14px 14px;
  }

  .product-grid[data-shop-view="list"] .product-list-info {
    display: none;
  }

  .product-grid[data-shop-view="list"] .product-card h3,
  .product-grid[data-shop-view="list"] .price-line {
    grid-column: 1 / -1;
  }

  .product-grid[data-shop-view="list"] .product-card h3 {
    min-width: 0;
  }

  .product-grid[data-shop-view="list"] .price-line {
    display: flex;
    margin-top: 0;
  }

  .product-grid[data-shop-view="list"] .floating-card-qty {
    right: 16px;
    bottom: 18px;
    width: auto;
  }

}

@media (max-width: 640px) {
  .product-grid[data-shop-view="list"] .product-card {
    --list-media-size: 96px;
    display: grid;
    grid-template-columns: var(--list-media-size) minmax(0, 1fr);
    min-height: 0;
  }

  /* The qty pill overlays the bottom of the row once an item is added, so the body needs room
     reserved below its text — but only then, otherwise the row stays as compact as its content. */
  .product-grid[data-shop-view="list"] .product-card:has(.floating-card-qty:not([hidden])) .product-body {
    padding-bottom: 42px;
  }

  .product-grid[data-shop-view="list"] .product-media {
    align-self: stretch;
    width: var(--list-media-size);
    height: auto;
    flex: none;
  }

  .product-grid[data-shop-view="list"] .product-image {
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .product-grid[data-shop-view="list"] .product-image img,
  .product-grid[data-shop-view="list"] .product-image-empty {
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .product-grid[data-shop-view="list"] .floating-card-cart {
    right: 12px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }

  .product-grid[data-shop-view="list"] .product-body {
    display: grid;
    align-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 14px 58px 14px 14px;
  }

  .product-grid[data-shop-view="list"] .product-collection {
    display: block;
    order: 3;
    color: var(--green);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: none;
  }

  .product-grid[data-shop-view="list"] .product-card:has(.floating-card-qty:not([hidden])) .product-collection {
    display: none;
  }

  .product-grid[data-shop-view="list"] .product-body > span.product-collection,
  .product-grid[data-shop-view="list"] .product-card h3,
  .product-grid[data-shop-view="list"] .product-list-info,
  .product-grid[data-shop-view="list"] .price-line {
    grid-column: 1 / -1;
  }

  .product-grid[data-shop-view="list"] .product-card h3 {
    font-size: 0.9rem;
    line-height: 1.25;
    min-width: 0;
    flex-basis: 100%;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .product-grid[data-shop-view="list"] .product-list-info {
    display: none;
  }

  .product-grid[data-shop-view="list"] .product-info-category {
    display: none;
  }

  .product-grid[data-shop-view="list"] .price-line {
    order: 2;
    display: flex;
    flex-basis: 100%;
    gap: 10px;
    margin-top: 0;
  }

  .product-grid[data-shop-view="list"] .price-line strong {
    font-size: 0.9rem;
  }

  .product-grid[data-shop-view="list"] .price-line del {
    font-size: 0.72rem;
  }

  .product-grid[data-shop-view="list"] .floating-card-cart {
    right: 12px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }

  /* Shrink-to-fit, anchored to the row's bottom-right corner — the bar's own width follows its
     content (the right-aligned -/qty/+ cluster) instead of stretching across empty space. */
  .product-grid[data-shop-view="list"] .floating-card-qty {
    left: auto;
    right: 0;
    bottom: 0;
    width: auto;
  }

  .product-grid[data-shop-view="list"] .card-qty-control.floating-card-qty {
    grid-template-columns: 38px auto 38px;
    border-radius: 8px 0 0 0;
    border-width: 1px 0 0 1px;
  }

  .product-grid[data-shop-view="list"] .card-qty-control.floating-card-qty input {
    width: 2.6ch;
    min-width: 2.6ch;
  }

  .product-grid[data-shop-view="list"] .card-qty-control.floating-card-qty button,
  .product-grid[data-shop-view="list"] .card-qty-control.floating-card-qty input {
    height: 34px;
    min-height: 34px;
  }

}

/* Compact view: dense grid, more columns, smaller cards with the essentials only. */
.product-grid[data-shop-view="compact"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-grid[data-shop-view="compact"] .product-body {
  display: none;
}

.product-grid[data-shop-view="compact"] .product-collection {
  display: none;
}

.product-grid[data-shop-view="compact"] .product-card h3 {
  font-size: 0.88rem;
  line-height: 1.25;
}

.product-grid[data-shop-view="compact"] .price-line strong {
  font-size: 1rem;
}

.product-grid[data-shop-view="compact"] .price-line del {
  font-size: 0.76rem;
}

.product-grid[data-shop-view="compact"] .price-line {
  display: none;
}

.product-grid[data-shop-view="compact"] .product-image-price {
  display: inline-flex;
}

.product-grid[data-shop-view="compact"] .action-icon-btn-cart {
  right: 8px;
  bottom: 8px;
  width: 34px;
  height: 34px;
}

.product-grid[data-shop-view="compact"] .floating-card-qty {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  transform: none;
}

.product-grid[data-shop-view="compact"] .card-qty-control.floating-card-qty {
  grid-template-columns: 25% 50% 25%;
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.product-grid[data-shop-view="compact"] .card-qty-control.floating-card-qty button,
.product-grid[data-shop-view="compact"] .card-qty-control.floating-card-qty input {
  height: 28px;
  min-height: 28px;
}

.product-grid[data-shop-view="compact"] .card-qty-control.floating-card-qty input {
  /* !important: app.js sets an inline width in ch to fit the digit count everywhere else
     (list view), but here the field should fill its whole 50% track, not hug the number. */
  width: 100% !important;
  padding: 0 4px;
  justify-self: stretch;
}

.product-grid[data-shop-view="compact"] .action-icon-btn-cart svg {
  width: 16px;
  height: 16px;
}

.product-grid[data-shop-view="compact"] .private-pill {
  top: auto;
  bottom: 8px;
  left: 8px;
  padding: 4px 7px;
  font-size: 0.68rem;
}

/* Once the qty pill takes over the bottom strip, the private/featured badge underneath it
   would otherwise bleed through the pill's translucent background. */
.product-grid[data-shop-view="compact"] .product-card:has(.floating-card-qty:not([hidden])) .private-pill {
  display: none;
}

.product-grid[data-shop-view="grid"] .product-body {
  gap: 4px;
  min-height: 0;
  padding: 8px 8px 8px;
}

.product-grid[data-shop-view="grid"] .product-collection {
  display: none;
}

.product-grid[data-shop-view="grid"] .product-card h3 {
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.1;
  min-height: calc(1.1em * 2);
}

.product-grid[data-shop-view="grid"] .price-line {
  margin-top: 0;
}

.product-grid[data-shop-view="grid"] .price-line strong {
  font-size: 0.88rem;
}

/* Grid view keeps the icon-only overlay hidden — it uses the full-width "Add to Cart"
   button/qty stepper below the price instead (see .add-to-cart-full). */
.product-grid[data-shop-view="grid"] .floating-card-cart,
.product-grid[data-shop-view="grid"] .floating-card-qty {
  display: none;
}

@media (min-width: 641px) {
  .product-grid[data-shop-view="compact"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1081px) {
  .product-grid[data-shop-view="compact"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.product-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(22, 17, 9, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  /* Skips layout/paint work for cards currently scrolled off-screen — the intrinsic-size
     estimate only matters before a card's first render, so a rough guess is fine here. */
  content-visibility: auto;
  contain-intrinsic-size: 0 420px;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(22, 17, 9, 0.12);
  border-color: rgba(167, 125, 53, 0.35);
}

.product-media {
  position: relative;
  flex: 0 0 auto;
}

.product-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #e9dfcf;
}

.product-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: fill;
  transition: transform 320ms ease;
}

.product-card:hover .product-image img {
  transform: scale(1.045);
}

.private-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  border-radius: 4px;
}

.product-image-price {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: none;
  align-items: center;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  border: 1px solid rgba(255, 248, 235, 0.44);
  border-radius: 4px;
  background: rgba(255, 248, 235, 0.74);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 5px 14px rgba(22, 17, 9, 0.12);
  backdrop-filter: blur(8px);
}

.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.floating-card-cart {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff8eb;
  border: 1px solid var(--ink);
  box-shadow: 0 6px 18px rgba(21, 21, 21, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.floating-card-cart:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(21, 21, 21, 0.3);
}

.floating-card-cart.selected {
  background: var(--green, #236e63);
  border-color: var(--green, #236e63);
  color: #fff8eb;
}

.floating-card-qty {
  position: absolute;
  right: 14px;
  bottom: 20px;
  z-index: 6;
}

.card-qty-control {
  grid-template-columns: 34px 42px 34px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 235, 0.5);
  border-radius: 999px;
  background: rgba(21, 21, 21, 0.94);
  color: #fff8eb;
  box-shadow: 0 10px 26px rgba(21, 21, 21, 0.28);
}

.card-qty-control:not([hidden]) {
  display: grid;
}

.card-qty-control button:disabled,
.qty-control button:disabled,
.add-to-cart-full-qty button:disabled,
.qty-pill-inline button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.card-qty-control button,
.card-qty-control input {
  min-height: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  font-weight: 800;
}

.card-qty-control button {
  cursor: pointer;
  font-size: 0.94rem;
}

.card-qty-control input {
  width: 42px;
  border-right: 1px solid rgba(255, 248, 235, 0.2);
  border-left: 1px solid rgba(255, 248, 235, 0.2);
  -moz-appearance: textfield;
  appearance: textfield;
}

.card-qty-control input::-webkit-outer-spin-button,
.card-qty-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Grid view's own full-width CTA, living in .product-body below the price (not overlaid on the
   image like list/compact) — replaced by .add-to-cart-full-qty once the item is in the cart. */
.add-to-cart-full {
  display: none;
  width: 100%;
  min-height: 30px;
  margin-top: 2px;
  border: none;
  border-radius: 6px;
  background: var(--ink);
  color: #fff8eb;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.add-to-cart-full:hover {
  transform: translateY(-1px);
}

.add-to-cart-full.selected {
  display: none !important;
}

.add-to-cart-full-qty {
  display: none;
  align-items: stretch;
  width: 100%;
  height: 30px;
  margin-top: 2px;
  overflow: hidden;
  border: none;
  border-radius: 6px;
  background: var(--ink);
  color: #fff8eb;
}

.add-to-cart-full-qty button {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff8eb;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.add-to-cart-full-qty [data-card-cart-qty] {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 248, 235, 0.3);
  border-left: 1px solid rgba(255, 248, 235, 0.3);
  color: #fff8eb;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
}

.product-grid[data-shop-view="grid"] .add-to-cart-full {
  display: block;
}

.product-grid[data-shop-view="grid"] .add-to-cart-full-qty {
  display: none;
}

.product-grid[data-shop-view="grid"] .add-to-cart-full-qty:not([hidden]) {
  display: flex;
}

.product-collection {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.product-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.22;
  /* Clamped to 2 lines and reserved at that height even when a name only fills 1, so cards in the
     same row always end at the same height regardless of how long each product's name is. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.22em * 2);
}

.price-line strong {
  font-size: 1.32rem;
}

.price-line.large strong {
  font-size: 2rem;
}

.price-line del {
  color: #8f867d;
}

.price-line span {
  color: var(--copper);
  font-size: 0.8rem;
  font-weight: 800;
}

.price-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.price-actions {
  display: flex;
  gap: 10px;
}

.action-icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

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

.action-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(22, 17, 9, 0.12);
}

.action-icon-btn-whatsapp {
  color: var(--green);
  border-color: rgba(35, 110, 99, 0.3);
}

.action-icon-btn-cart {
  background: var(--ink);
  color: #fff8eb;
  border-color: var(--ink);
}

.action-icon-btn-cart.selected {
  background: var(--green, #4a7c59);
  border-color: var(--green, #4a7c59);
}

.action-icon-btn-sm {
  width: 36px;
  height: 36px;
}

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

.card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Pinned to the bottom of the card so it lines up across a row even if the name or collection
     tag above it varies slightly in height. */
  margin-top: auto;
}

.product-card[data-product-href] {
  cursor: pointer;
}

.card-actions {
  flex-wrap: nowrap;
}

.add-to-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff8eb;
  font-weight: 600;
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.add-to-cart-btn svg {
  width: 18px;
  height: 18px;
}

.add-to-cart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(22, 17, 9, 0.16);
}

.add-to-cart-btn.selected {
  background: var(--green, #4a7c59);
  border-color: var(--green, #4a7c59);
}

.add-to-cart-btn-inline {
  width: auto;
  min-height: 46px;
  padding: 0 22px;
}

.add-to-cart-btn-inline.selected {
  display: none;
}

.qty-pill-inline {
  display: none;
  align-items: stretch;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff8eb;
}

.qty-pill-inline:not([hidden]) {
  display: flex;
}

.qty-pill-inline button {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff8eb;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.qty-pill-inline input {
  flex: 1 1 auto;
  width: 56px;
  min-width: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 248, 235, 0.22);
  border-left: 1px solid rgba(255, 248, 235, 0.22);
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #fff8eb;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-pill-inline input::-webkit-outer-spin-button,
.qty-pill-inline input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-icon-added {
  animation: cart-icon-pop 420ms ease;
}

button:not(.selected) .cart-icon-added {
  color: var(--green);
}

.selected .cart-icon-added,
.selected.cart-icon-added {
  color: #fff8eb;
}

@keyframes cart-icon-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  55% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.markdown-guide-box {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 244, 237, 0.7);
  font-size: 0.85rem;
}

.markdown-guide-box summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
}

.markdown-guide-box summary:hover {
  color: var(--gold);
}

.markdown-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.markdown-guide-grid code {
  background: rgba(0, 0, 0, 0.07);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--ink);
}

.stock-ok {
  color: var(--green);
}

.stock-low {
  color: var(--copper);
}

.stock-out {
  color: var(--danger);
}

.process-band {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: 12px 0 54px;
  border-top: 1px solid var(--line);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.process-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(22, 17, 9, 0.06);
  padding: 22px;
}

.process-step {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(167, 125, 53, 0.14);
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.process-grid strong {
  display: block;
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 500;
}

.process-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.process-step svg {
  width: 20px;
  height: 20px;
}

.spotlight-band {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: 12px 0 54px;
  border-top: 1px solid var(--line);
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.spotlight-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.spotlight-card img,
.spotlight-card .collection-card-empty {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #e9dfcf;
  transition: transform 300ms ease;
}

.spotlight-card:hover img {
  transform: scale(1.05);
}

.spotlight-caption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 4px;
  padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 5, 0.82));
  color: #fff;
}

.spotlight-caption strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 500;
}

.spotlight-caption span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.trust-band {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: 12px 0 54px;
  border-top: 1px solid var(--line);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.trust-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(22, 17, 9, 0.06);
  padding: 22px;
}

.trust-grid strong {
  display: block;
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 500;
}

.trust-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.faq-band {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: 12px 0 54px;
  border-top: 1px solid var(--line);
}

.faq-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  max-width: 820px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px 20px;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: none;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(167, 125, 53, 0.14);
  color: var(--gold);
}

.faq-icon svg {
  width: 13px;
  height: 13px;
  transition: transform 200ms ease;
}

.faq-item[open] .faq-icon svg {
  transform: rotate(45deg);
}

.faq-answer {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

.faq-answer p {
  margin: 0 0 10px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.commerce-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 28px 0 64px;
}

.commerce-band article {
  border-top: 1px solid var(--ink);
  padding: 18px 0;
}

.commerce-band span {
  color: var(--gold);
  font-weight: 900;
}

.commerce-band strong {
  display: block;
  margin: 7px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 500;
}

.commerce-band p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.contact-section {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 36px;
  align-items: start;
  padding: 44px 0 86px;
  border-top: 1px solid var(--line);
}

.enquiry-page {
  width: min(980px, calc(100% - 32px));
  margin-inline: auto;
  padding: 48px 0 88px;
}

.enquiry-panel {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 26px;
  align-items: start;
  border: 1px solid rgba(217, 208, 193, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  padding: clamp(20px, 4vw, 34px);
  box-shadow: 0 16px 44px rgba(22, 17, 9, 0.08);
}

.enquiry-panel h1 {
  margin: 8px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.92;
}

.enquiry-panel p {
  color: var(--muted);
  line-height: 1.6;
}

.receipt-panel {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
}

.receipt-actions {
  flex-wrap: wrap;
  margin-top: 8px;
}

.receipt-preview {
  position: relative;
  margin-top: 24px;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.receipt-preview-frame {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 0;
  display: block;
}

.receipt-preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 420px;
  color: var(--muted);
  font-size: 0.92rem;
}

.receipt-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(167, 125, 53, 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: receipt-spin 800ms linear infinite;
}

@keyframes receipt-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .receipt-preview-frame,
  .receipt-preview-loading {
    min-height: 320px;
    height: 60vh;
  }
}

.selected-summary,
.enquiry-form {
  grid-column: 2;
}

.selected-summary,
.sent-summary {
  display: grid;
  gap: 12px;
}

.enquiry-items {
  display: grid;
  gap: 8px;
}

.enquiry-item-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 12px;
}

.enquiry-item-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.enquiry-item-row span {
  flex-shrink: 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.78rem;
}

.inline-empty {
  min-height: 86px;
}

.contact-page {
  width: min(1080px, calc(100% - 32px));
  margin-inline: auto;
  padding: 48px 0 88px;
}

.contact-page-head {
  max-width: 640px;
  margin-bottom: 36px;
}

.contact-page-head h1 {
  margin: 8px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
}

.contact-page-head p {
  color: var(--muted);
  line-height: 1.6;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 32px;
  align-items: start;
}

.contact-info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--shadow);
}

.contact-info-card h2 {
  margin: 0 0 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.contact-info-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-info-list li p {
  margin: 4px 0 0;
}

.contact-social-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.contact-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.contact-page-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--shadow);
}

@media (max-width: 760px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
  }
}

.compact {
  grid-template-columns: repeat(2, 1fr);
}

.compact textarea,
.compact button,
.compact .whatsapp-btn {
  grid-column: span 2;
}

.detail-page {
  padding: 40px 0 80px;
}

.breadcrumb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: min(1180px, calc(100% - 32px));
  margin: 20px auto;
  color: var(--muted);
  font-size: 0.82rem;
}

.breadcrumb-nav a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.breadcrumb-sep {
  color: rgba(120, 108, 90, 0.5);
}

.breadcrumb-current {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  max-width: 40ch;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-page {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

@media (min-width: 1081px) {
  .detail-media {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
  }
}

.gallery {
  display: grid;
  gap: 12px;
}

.gallery-stage {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface, #f4f2ef);
  box-shadow: var(--shadow);
}

.gallery-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  animation: gallery-fade 0.25s ease;
}

.gallery-slide.detail-video {
  background: #111;
}

.gallery-slide.detail-video iframe,
.gallery-slide.detail-video video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@keyframes gallery-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
}

.gallery-arrow svg {
  width: 20px;
  height: 20px;
}

.gallery-arrow-prev {
  left: 10px;
}

.gallery-arrow-next {
  right: 10px;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
  width: min(100%, 480px);
  margin: 0 auto;
}

.gallery-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface, #f4f2ef);
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.gallery-thumb-fallback {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(24, 115, 101, 0.14);
}

.gallery-thumb.is-active {
  border-color: var(--gold);
}

.gallery-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.gallery-thumb-play svg {
  width: 20px;
  height: 20px;
}

.trade-pricing {
  margin: 12px 0;
}

.detail-copy {
  display: grid;
  gap: 18px;
  padding: 18px 0;
}

.product-detail-page .detail-copy h1 {
  margin: 0;
  font-size: clamp(1.65rem, 2.1vw, 2.35rem);
  line-height: 1.12;
}

.product-description {
  white-space: pre-line;
}

@media (max-width: 1080px) {
  .product-detail-page {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .gallery-stage,
  .gallery-thumbs {
    width: min(100%, 420px, calc(100vw - 32px));
  }

  .gallery-stage {
    max-height: min(420px, 46vh);
  }

  .detail-copy {
    gap: 10px;
    padding-top: 14px;
  }

  .product-detail-page .detail-copy h1 {
    font-size: clamp(1.75rem, 6vw, 2.7rem);
  }

  .detail-copy > .eyebrow {
    order: 1;
  }

  .detail-copy > .private-pill {
    order: 2;
  }

  .detail-copy > h1 {
    order: 3;
    margin: 0;
  }

  .detail-copy > .price-actions-row {
    order: 4;
  }

  .detail-copy > p {
    order: 5;
  }

  .detail-copy > .trade-pricing {
    order: 6;
  }

  .detail-copy > .spec-grid {
    order: 7;
  }

  .detail-copy > .tag-row {
    order: 8;
  }

  .detail-copy > label {
    order: 9;
  }

  .detail-copy > .contact-form {
    order: 10;
  }
}

@media (max-width: 640px) {
  .detail-page {
    padding-top: 20px;
  }

  .gallery-stage,
  .gallery-thumbs {
    width: min(100%, 340px, calc(100vw - 32px));
  }

  .gallery-stage {
    max-height: min(340px, 42vh);
  }

  .gallery-thumb {
    width: 54px;
    height: 54px;
  }
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--line);
}

.spec-grid div {
  padding: 13px;
  background: white;
}

.spec-grid dt {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.spec-grid dd {
  margin: 4px 0 0;
  font-weight: 900;
}

.tag-row,
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-row span {
  padding: 8px 11px;
  background: rgba(182, 138, 61, 0.15);
  color: #5b421b;
}

.login-screen,
.error-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px 16px;
}

.login-card {
  display: grid;
  width: min(460px, 100%);
  max-width: 100%;
  min-width: 0;
  gap: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  padding: clamp(24px, 5vw, 44px);
  box-shadow: var(--shadow);
}

.login-card h1 {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  overflow-wrap: anywhere;
}

/* Scoped to the share-password gate only — its heading is a short instruction ("Enter password
   to view"), not a page title, so it doesn't need the same large hero-style sizing as /trade or
   /admin/login. */
.share-password-card h1 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.login-card .contact-form,
.login-card .primary-btn,
.login-card .secondary-btn {
  width: 100%;
  min-width: 0;
}

.login-card .brand {
  min-width: 0;
}

.alert {
  border: 1px solid rgba(182, 64, 64, 0.4);
  background: rgba(182, 64, 64, 0.09);
  color: var(--danger);
  padding: 12px;
}

.danger-icon-btn {
  display: grid;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(182, 64, 64, 0.5);
  border-radius: 8px;
  background: rgba(182, 64, 64, 0.14);
  color: var(--danger);
  cursor: pointer;
  transition: background 160ms ease;
}

.danger-icon-btn:hover {
  background: rgba(182, 64, 64, 0.26);
}

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

.tooltip-anchor {
  position: relative;
  display: inline-flex;
}

.tooltip-bubble {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  width: 280px;
  max-width: calc(100vw - 40px);
  padding: 12px 14px;
  border-radius: 8px;
  background: #171513;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f8eedf;
  font-size: 0.8rem;
  line-height: 1.5;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.tooltip-bubble strong {
  color: #fff;
  font-size: 0.85rem;
}

.tooltip-bubble code {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.78em;
}

.tooltip-anchor:hover .tooltip-bubble,
.tooltip-anchor:focus-within .tooltip-bubble {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tooltip-top-right {
  top: auto;
  bottom: calc(100% + 10px);
  right: 0;
  left: auto;
  width: max-content;
  max-width: min(280px, calc(100vw - 40px), calc(var(--admin-sidebar-w, 270px) - 24px));
}

.credentials-explainer {
  border: 1px solid rgba(182, 64, 64, 0.3);
  border-radius: 8px;
  background: rgba(182, 64, 64, 0.08);
  padding: 12px 14px;
}

.credentials-explainer strong {
  display: block;
  margin-bottom: 4px;
  color: var(--danger);
}

.credentials-explainer p {
  margin: 0;
  color: #4f4943;
  font-size: 0.85rem;
  line-height: 1.5;
}

.credentials-explainer code {
  background: rgba(21, 21, 21, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}

.app-version-badge {
  position: fixed;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

.metric-grid strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  font-weight: 500;
}

.metric-grid span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Settings page: each card is a <details> bar in one full-width stacked list
   (not side-by-side columns) — click the whole summary row to expand/collapse
   it, instead of every form always being shown at once. */
.settings-bar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-bar {
  padding: 0;
  overflow: hidden;
}

.settings-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.settings-bar-head::-webkit-details-marker {
  display: none;
}

.settings-bar-head h2 {
  margin: 0;
}

.settings-bar-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 180ms ease;
}

.settings-bar[open] .settings-bar-head {
  border-bottom: 1px solid var(--line);
}

.settings-bar[open] .settings-bar-chevron {
  transform: rotate(180deg);
}

.settings-bar-head:hover {
  background: rgba(0, 0, 0, 0.02);
}

.settings-bar-body {
  padding: 18px;
}

.og-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 20px;
  align-items: start;
}

.og-preview {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.og-preview-card {
  border: 1px solid var(--admin-hairline, #e2d9cc);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.og-preview-image {
  aspect-ratio: 1200 / 630;
  background: #e9dfcf;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
}

.og-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.og-preview-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}

.og-preview-domain {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.og-preview-title {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.og-preview-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 760px) {
  .og-settings-layout {
    grid-template-columns: 1fr;
  }

  .og-preview {
    position: static;
  }
}

.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.section-title > * {
  min-width: 0;
}

.section-title a {
  color: var(--green);
  font-weight: 800;
}

.analytics-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.analytics-dialog-body :is(.mini-row, .report-pair):first-child {
  border-top: 0;
}

@media (max-width: 760px) {
  .analytics-detail-btn {
    width: 100%;
  }
}

.mini-row {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.analytics-grid {
  align-items: start;
}

.analytics-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analytics-wide {
  grid-column: 1 / -1;
}

.analytics-row small {
  color: var(--muted);
  line-height: 1.45;
}

.analytics-chips {
  padding-top: 4px;
}

.analytics-chips span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-line {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(217, 208, 193, 0.74);
}

.progress-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.activity-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.report-pair {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.report-pair span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.78rem;
}

.report-pair strong {
  font-size: 1.15rem;
}

.checkout-totals {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.checkout-totals .report-pair {
  padding: 8px 0;
}

.checkout-grand-total {
  border-top: 1px solid var(--ink);
}

.checkout-grand-total strong {
  font-size: 1.35rem;
}

.checkout-minimum-warning {
  border-color: rgba(182, 64, 64, 0.28);
  background: rgba(182, 64, 64, 0.08);
}

.checkout-minimum-warning strong {
  color: var(--danger);
  font-size: 0.88rem;
  line-height: 1.35;
  text-align: right;
}

.engagement-row span {
  text-transform: none;
}

.product-management-panel {
  display: grid;
  /* Without an explicit minmax(0, 1fr) here, this single implicit column's automatic minimum
     size is the max-content width of the filter form inside it (search box + price slider +
     buttons) — on narrow screens that's wider than the viewport, and since this panel clips
     overflow, the filter bar silently got cut off on the right instead of wrapping/shrinking. */
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(22, 17, 9, 0.05);
  overflow: hidden;
}

.fuzzy-search-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  padding: 5px 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.stock-filter-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--admin-hairline, #e2d9cc);
  border-radius: 8px;
  background: #fffdf8;
}

.stock-filter-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stock-filter-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}

.stock-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  padding: 7px 8px;
  border-radius: 6px;
  transition: background 140ms ease;
}

.stock-radio:hover {
  background: rgba(184, 134, 11, 0.08);
}

.dashboard-hub-section {
  display: grid;
  gap: 16px;
}

.dashboard-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-tab-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--admin-hairline, #e2d9cc);
  border-radius: var(--admin-radius, 12px);
  background: var(--admin-card, #fff);
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dashboard-tab-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold, #b8860b);
  box-shadow: 0 10px 24px rgba(25, 20, 13, 0.08);
}

.tab-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.tab-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(184, 134, 11, 0.1);
  color: var(--gold, #b8860b);
}

.tab-card-icon svg {
  width: 22px;
  height: 22px;
}

.tab-card-badge {
  max-width: 100%;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(184, 134, 11, 0.12);
  color: var(--dark-gold, #8b6508);
  overflow-wrap: anywhere;
  text-align: right;
}

.dashboard-tab-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.dashboard-tab-card p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.45;
}

.tab-card-link {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gold, #b8860b);
  margin-top: 4px;
}

@media (max-width: 1200px) {
  .dashboard-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .dashboard-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Analytics Date Selection & Block Section Layout */
.analytics-date-card {
  padding: 16px 20px;
}

.analytics-date-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.analytics-presets-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-record-presets-top {
  margin: 14px 0;
}

.preset-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.preset-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-pill {
  border: 1px solid var(--admin-hairline, #e2d9cc);
  background: #fff;
  color: var(--ink);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 140ms ease;
}

.preset-pill:hover {
  border-color: var(--gold, #b8860b);
  background: rgba(184, 134, 11, 0.06);
}

.preset-pill.active {
  background: var(--gold, #b8860b);
  border-color: var(--gold, #b8860b);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(184, 134, 11, 0.25);
}

.analytics-date-inputs {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--admin-hairline, #e2d9cc);
}

.analytics-date-inputs .date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analytics-date-inputs .date-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.analytics-date-inputs .date-action {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

@media (max-width: 520px) {
  .analytics-date-inputs .date-action {
    width: 100%;
    margin-left: 0;
  }

  .analytics-date-inputs .date-action .primary-btn,
  .analytics-date-inputs .date-action .secondary-btn {
    flex: 1 1 calc(50% - 5px);
  }
}

.analytics-block-title {
  margin-top: 24px;
  padding: 10px 0 6px;
  border-bottom: 2px solid var(--gold, #b8860b);
}

.analytics-block-title h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}

.analytics-block-title span {
  font-size: 0.84rem;
  color: var(--muted);
}

.analytics-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
}

.analytics-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0 4px;
}

.analytics-tab {
  border: 1px solid var(--border, #ddd);
  background: var(--surface, #fff);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.86rem;
  cursor: pointer;
  color: var(--ink);
}

.analytics-tab.active {
  background: var(--gold, #b8860b);
  border-color: var(--gold, #b8860b);
  color: #fff;
}

.analytics-panel[hidden] {
  display: none;
}

.analytics-loading {
  padding: 10px 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.sr-only-scrollable {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.trend-data-table {
  border-collapse: collapse;
}

.trend-data-table th,
.trend-data-table td {
  border: 1px solid #ccc;
  padding: 2px 6px;
}

@media (max-width: 640px) {
  .analytics-toolbar {
    position: static;
  }
  .analytics-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .analytics-tab {
    flex: 0 0 auto;
  }
}

th,
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-radius: 6px;
  min-width: 240px;
}

.product-cell:hover {
  background: color-mix(in srgb, var(--green) 6%, transparent);
}

.product-cell:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.product-cell img {
  width: 62px;
  height: 62px;
  object-fit: cover;
}

.image-missing,
.product-image-empty,
.detail-media-empty {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: #f5efe5;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.image-missing {
  width: 62px;
  height: 62px;
}

.product-image-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.detail-media-empty {
  min-height: 620px;
}

.row-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  min-width: 210px;
}

.row-actions .primary-btn,
.row-actions .secondary-btn,
.row-actions .danger-btn,
.row-actions form {
  flex: 0 0 auto;
}

.reorder-form {
  display: inline-flex;
  margin: 0;
}

.collection-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.collection-thumb-empty {
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--muted);
  background: var(--surface-2, #f1efe9);
  padding: 4px;
}

/* Collection Management: one "bar" per collection instead of a table row,
   so actions can wrap onto their own line on narrow screens without any
   horizontal scrolling. */
.collection-bar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.collection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(22, 17, 9, 0.05);
}

.collection-bar-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 240px;
}

.collection-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.collection-bar-info strong {
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-bar-count {
  font-size: 0.78rem;
  color: var(--muted);
}

.collection-bar-actions {
  justify-content: flex-end;
}

.collection-row-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.collection-row-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--gold);
  outline: none;
}

.collection-select-all-row {
  display: flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.collection-select-all-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--gold);
  outline: none;
}

.collection-drag-handle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 40px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.collection-drag-handle svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.collection-drag-handle:hover {
  color: var(--ink);
}

.collection-bar.is-dragging {
  position: relative;
  opacity: 0.92;
  box-shadow: 0 16px 32px rgba(22, 17, 9, 0.22);
  cursor: grabbing;
  will-change: transform;
}

.collection-bar.drop-target-before {
  box-shadow: inset 0 3px 0 var(--gold, #a77d35);
}

.collection-bar.drop-target-after {
  box-shadow: inset 0 -3px 0 var(--gold, #a77d35);
}

.collection-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.7);
}

.collection-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.collection-legend-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.icon-collapse-btn .btn-icon {
  margin-right: 6px;
}

@media (max-width: 760px) {
  .collection-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .collection-drag-handle {
    align-self: flex-end;
    margin-top: -8px;
  }

  .collection-bar-main {
    flex-basis: auto;
  }

  .collection-bar-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .collection-bar-actions .primary-btn,
  .collection-bar-actions .secondary-btn,
  .collection-bar-actions .danger-btn,
  .collection-bar-actions form {
    flex: 1 1 calc(50% - 8px);
  }

  .collection-bar-actions form button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .icon-collapse-btn .btn-label {
    display: none;
  }

  .icon-collapse-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .icon-collapse-btn .btn-icon {
    margin-right: 0;
  }

  .collection-bar-actions .danger-btn {
    flex: 1 1 100%;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.budget-bracket-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}

.budget-bracket-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.budget-bracket-preview img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.budget-bracket-field legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  text-transform: uppercase;
}

label input,
label select,
label textarea {
  color: var(--ink);
  font-size: 1rem;
  text-transform: none;
}

.switch-row label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-row input {
  width: auto;
  min-height: auto;
}

.product-dialog {
  width: min(1120px, calc(100% - 28px));
  max-height: calc(100vh - 28px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: white;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.product-dialog::backdrop {
  background: rgba(21, 21, 21, 0.52);
}

.icon-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fffdf8;
  cursor: pointer;
  box-shadow: var(--shadow);
}

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

.icon-save {
  border: 2px solid var(--ink);
}

.icon-close {
  border: 2px solid var(--line);
}

.inline-check {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  padding: 8px 10px;
}

.inline-check input {
  width: auto;
  min-height: auto;
}

.collection-product-list {
  display: grid;
  gap: 6px;
  min-width: 300px;
  max-height: 260px;
  overflow: auto;
  padding-top: 10px;
}

.collection-product-list span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  color: var(--ink);
  font-size: 0.9rem;
  text-transform: none;
}

.collection-product-list small {
  color: var(--muted);
  text-transform: uppercase;
}

.collection-product-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  color: var(--ink);
  font-size: 0.9rem;
}

.collection-product-item:hover {
  color: var(--gold);
}

.collection-product-item img,
.collection-product-item-empty {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: #e9dfcf;
}

.collection-product-item-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.6rem;
  text-transform: uppercase;
}

.collection-product-item span {
  display: block;
  border-top: none;
  padding-top: 0;
}

.product-picker-search {
  width: 100%;
}

.picker-filter-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.9);
  padding: 14px;
}

.product-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 2px;
}

.product-picker-card {
  position: relative;
  display: grid;
  gap: 6px;
  cursor: pointer;
}

.product-picker-media {
  position: relative;
}

.product-picker-card img,
.product-picker-card .collection-product-item-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  object-fit: cover;
  background: #e9dfcf;
  border: 1px solid var(--line);
}

.product-picker-media input[type="checkbox"],
.product-picker-card > input[type="checkbox"] {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--green);
  box-shadow: 0 1px 4px rgba(22, 17, 9, 0.4);
  outline: none;
  cursor: pointer;
}


.product-picker-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--ink);
}

.product-picker-card:has(input:checked) img {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.product-picker-qty {
  width: 100%;
  padding: 4px 6px;
  font-size: 0.8rem;
}

.product-picker-qty:disabled {
  opacity: 0.4;
}

.confirm-dialog {
  width: min(720px, calc(100% - 28px));
}

.confirm-copy {
  margin: 0;
  color: #4f4943;
  line-height: 1.6;
}

/* ---------- Collection hide/show ("visibility") dialog ---------- */

.visibility-confirm-dialog {
  width: min(460px, calc(100% - 28px));
}

.visibility-dialog-head {
  align-items: center;
}

.visibility-confirm-dialog .visibility-dialog-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, var(--panel)), var(--panel));
}

.visibility-confirm-dialog.is-start .visibility-dialog-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 10%, var(--panel)), var(--panel));
}

.visibility-confirm-dialog.is-pause .visibility-dialog-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--copper) 10%, var(--panel)), var(--panel));
}

.visibility-dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  margin-right: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 14%, var(--panel));
  color: var(--gold);
  box-shadow: 0 4px 14px rgba(25, 20, 13, 0.12);
}

.visibility-dialog-icon svg {
  width: 22px;
  height: 22px;
}

.visibility-dialog-icon img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.visibility-dialog-icon:has(img:not([hidden])) svg {
  display: none;
}

.visibility-dialog-icon .visibility-icon-start {
  display: none;
}

.visibility-dialog.is-start .visibility-dialog-icon .visibility-icon-pause {
  display: none;
}

.visibility-dialog.is-start .visibility-dialog-icon .visibility-icon-start {
  display: block;
}

.visibility-dialog.is-start .visibility-dialog-icon,
.visibility-dialog-icon-start {
  background: color-mix(in srgb, var(--green) 16%, var(--panel));
  color: var(--green);
}

.visibility-dialog.is-pause .visibility-dialog-icon {
  background: color-mix(in srgb, var(--copper) 16%, var(--panel));
  color: var(--copper);
}

.visibility-dialog-section {
  padding-top: 20px;
}

.visibility-dialog-copy {
  font-size: 0.96rem;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 6%, var(--paper));
  border: 1px solid var(--line);
}

.visibility-dialog-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.visibility-dialog-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.visibility-dialog-btn .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.visibility-dialog-cancel {
  width: 100%;
  border: none;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
}

/* Preserves the real line breaks already in the stored enquiry message (one per "- item x qty"
   line) — a plain <p> collapses \n to a space by default, which is what flattened it into one
   run-on line. */
.enquiry-message-block {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.share-password-note {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 14px;
}

.share-password-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.share-password-value {
  width: fit-content;
  border: 1px dashed var(--gold);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: "Courier New", monospace;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.confirm-product-list {
  max-height: 340px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 10px;
}

.image-url-list {
  display: grid;
  gap: 10px;
}

.image-url-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  border-radius: 8px;
  transition: box-shadow 0.15s ease;
}

.image-url-row label {
  flex: 1 1 160px;
  min-width: 0;
}

.image-url-row .image-remove-btn {
  flex: 0 0 auto;
}

.media-row-drag-handle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 26px;
  height: 36px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.media-row-drag-handle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.media-row-drag-handle:hover {
  color: var(--ink);
}

.image-url-row.is-dragging {
  position: relative;
  opacity: 0.92;
  box-shadow: var(--shadow);
  cursor: grabbing;
  will-change: transform;
  background: var(--panel);
  z-index: 5;
}

.image-url-row.drop-target-before {
  box-shadow: inset 0 3px 0 var(--gold);
}

.image-url-row.drop-target-after {
  box-shadow: inset 0 -3px 0 var(--gold);
}

.variant-list {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.variant-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
}

.variant-row input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  padding: 8px 10px;
}

.image-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.upload-field {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 0 16px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.upload-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.image-preview-grid img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.enquiry-list {
  display: grid;
  gap: 12px;
}

.enquiry-card {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--line);
  background: white;
  padding: 18px;
}

.enquiry-card p {
  color: var(--muted);
  line-height: 1.55;
}

.enquiry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.status-pill {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  background: rgba(47, 118, 106, 0.11);
  color: var(--green);
  overflow-wrap: anywhere;
}

.empty-state {
  grid-column: 1 / -1;
  border: 1px dashed var(--line);
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.enquiry-table td {
  vertical-align: top;
}

.date-range-form {
  margin-bottom: 18px;
}

.trend-chart-card {
  margin-bottom: 18px;
}

.trend-chart {
  width: 100%;
  height: clamp(120px, 18vw, 220px);
  display: block;
}

.trend-line {
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.trend-line-views { stroke: var(--blue); }
.trend-line-enquiries { stroke: var(--gold); }
.trend-line-orders { stroke: var(--green); }

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.trend-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
}

.trend-legend-views::before { background: var(--blue); }
.trend-legend-enquiries::before { background: var(--gold); }
.trend-legend-orders::before { background: var(--green); }

.kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.kpi-tile {
  display: grid;
  gap: 2px;
  min-width: 0;
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px 14px;
  overflow: hidden;
}

.kpi-tile strong {
  display: block;
  max-width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.78rem, 13cqi, 1.5rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-tile span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.kpi-cancelled strong { color: var(--danger); }
.kpi-delivered strong,
.kpi-revenue strong { color: var(--green); }

.status-pill.status-pending { background: var(--amber-bg, #f7ecd6); color: #a5730f; }
.status-pill.status-confirmed { background: rgba(35, 110, 99, 0.12); color: var(--green); }
.status-pill.status-processing { background: rgba(38, 75, 99, 0.12); color: var(--blue); }
.status-pill.status-shipped { background: rgba(167, 125, 53, 0.16); color: var(--gold); }
.status-pill.status-delivered { background: rgba(35, 110, 99, 0.18); color: var(--green); }
.status-pill.status-cancelled { background: rgba(182, 64, 64, 0.12); color: var(--danger); }
.status-pill.status-new { background: rgba(38, 75, 99, 0.12); color: var(--blue); }
.status-pill.status-contacted { background: rgba(167, 125, 53, 0.16); color: var(--gold); }
.status-pill.status-converted { background: rgba(35, 110, 99, 0.18); color: var(--green); }
.status-pill.status-closed { background: rgba(107, 100, 89, 0.14); color: var(--muted); }
.status-pill.status-active { background: rgba(35, 110, 99, 0.18); color: var(--green); }
.status-pill.status-disabled { background: rgba(167, 125, 53, 0.16); color: var(--gold); }
.status-pill.status-archived { background: rgba(107, 100, 89, 0.14); color: var(--muted); }

.status-pill.custom-order-pill {
  background: rgba(52, 34, 58, 0.14);
  color: var(--plum);
  font-weight: 700;
}

.status-pill.repeat-pill {
  background: rgba(52, 34, 58, 0.12);
  color: var(--plum);
}

.kpi-new strong,
.kpi-converted strong { color: var(--green); }
.kpi-closed strong { color: var(--muted); }

.custom-order-items {
  display: grid;
  gap: 10px;
}

.custom-order-item-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 80px 120px auto;
  gap: 8px;
  align-items: center;
}

@media (max-width: 900px) {
  .custom-order-item-row {
    grid-template-columns: 1fr;
  }
}

.record-box-list {
  display: grid;
  gap: 18px;
}

.record-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.record-box-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.record-box-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.record-box-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--gold);
  outline: none;
}

.record-box-toggle > .avatar-initial {
  flex: 0 0 38px;
}

.record-box-toggle > span:not(.avatar-initial):not(.status-pill):not(.record-box-chevron):not(.record-box-check) {
  flex: 1 1 auto;
  min-width: 0;
}

.record-box-toggle > .status-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

.record-box-toggle small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 3px;
}

.record-box-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--muted);
  transition: transform 170ms ease;
}

.record-box-toggle.is-open .record-box-chevron {
  transform: rotate(180deg);
}

.avatar-initial {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-weight: 900;
}

.status-pill.issue {
  background: rgba(182, 64, 64, 0.1);
  color: var(--danger);
}

.record-box-panel {
  display: grid;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 16px;
}

.record-box-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Flex items default to min-width:auto (not 0), so a wide child — the line-items table's
   min-width, a long tracking link, etc. — stretches this flex column past the viewport instead
   of scrolling internally, dragging the whole admin page into horizontal scroll on mobile/tablet. */
.record-box-panel-body > * {
  min-width: 0;
}

.record-box-panel[hidden] {
  display: none;
}

.record-box-loading {
  color: var(--muted, #777);
  font-size: 0.9em;
  padding: 4px 0;
}

.record-box-loading[hidden] {
  display: none;
}

.record-box-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  gap: 18px;
  align-items: start;
}

/* The phone breakpoint elsewhere (admin.css, max-width: 760px) already stacks this to one
   column, but tablets (e.g. a 768px-wide iPad portrait) sit just above that and were still
   forced into the fixed 240–280px sidebar column, cramming it and the line-item table together
   too narrow to be usable. */
@media (max-width: 1024px) {
  .record-box-grid {
    /* A bare "1fr" track still defaults to an "auto" minimum (based on its content's min-content
       size), so a wide child — the line-items table's min-width — kept forcing this grid, and the
       whole page, wider than the viewport. minmax(0, 1fr) is what actually lets it shrink. */
    grid-template-columns: minmax(0, 1fr);
  }

  .record-box-side {
    min-width: 0;
  }
}

.record-box-grid h3,
.record-box-side h3,
.version-list h3 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.compact-table {
  font-size: 0.88rem;
  /* .admin-table's own min-width (900px, meant for its dense multi-column admin list views) is
     far more than this 5-column line-item table needs, and was forcing a horizontal scrollbar
     on it even on tablets where the surrounding .record-box-grid now has plenty of room. */
  min-width: 480px;
}

.compact-table span,
.version-list span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.record-box-side {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.record-box-side p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  /* Long unbreakable strings (the receipt URL, a run of enquiry message text with no spaces)
     otherwise refuse to wrap and overflow the card instead of shrinking with it. */
  overflow-wrap: anywhere;
}

.version-list {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.cell-stack {
  display: grid;
  gap: 2px;
}

.cell-stack span {
  color: var(--muted);
  font-size: 0.82rem;
}

.enquiry-product-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.enquiry-product-link:hover {
  color: var(--gold);
}

.enquiry-product-link img {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: #e9dfcf;
}

.enquiry-product-link.large {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.enquiry-product-link.large img {
  width: 64px;
  height: 64px;
}

.inline-status-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.inline-status-form select {
  flex: 0 0 auto;
  min-width: 140px;
}

.inline-status-form input {
  flex: 1 1 220px;
  min-width: 0;
}

.inline-status-form button,
.inline-status-form .secondary-btn,
.inline-status-form .primary-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.order-status-update-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}

.status-form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* Itself a flex item of .order-status-update-form's column layout, so — same min-width:auto
     issue as the panel body above — it needs its own min-width:0 to actually shrink/wrap instead
     of forcing the form (and page) wider than the viewport on mobile/tablet. */
  min-width: 0;
}

.status-form-group select {
  flex: 0 0 auto;
  min-width: 140px;
}

.status-form-group input {
  flex: 1 1 180px;
  min-width: 0;
}

.status-form-group button,
.status-form-group .secondary-btn,
.status-form-group .primary-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.alert-success {
  border: 1px solid rgba(35, 110, 99, 0.4);
  background: rgba(35, 110, 99, 0.09);
  color: var(--green);
  padding: 12px;
}

.alert-error {
  border: 1px solid rgba(182, 64, 64, 0.4);
  background: rgba(182, 64, 64, 0.09);
  color: var(--danger);
  padding: 12px;
}

.nav-whatsapp-btn {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 700;
}

.site-footer {
  position: relative;
  background: var(--ink);
  color: rgba(255, 248, 235, 0.72);
  padding: 56px clamp(18px, 4vw, 54px) 0;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--green), var(--gold));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.footer-brand {
  display: block;
}

.footer-brand-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand .brand-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: rgba(255, 248, 235, 0.1);
  color: #fff8eb;
  border: 1px solid rgba(255, 248, 235, 0.18);
}

.footer-brand strong {
  color: #fff8eb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 500;
}

.footer-brand p {
  margin: 6px 0 0;
  color: rgba(255, 248, 235, 0.6);
  font-size: 0.86rem;
  line-height: 1.55;
}

.footer-links {
  display: grid;
  gap: 12px;
  align-content: start;
}

.footer-links .eyebrow {
  margin-bottom: 2px;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.footer-links a {
  position: relative;
  display: inline-block;
  width: fit-content;
  color: rgba(255, 248, 235, 0.72);
  font-size: 0.9rem;
  transition: color 160ms ease;
}

.footer-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.footer-links a:hover {
  color: #fff8eb;
}

.footer-links a:hover::after {
  transform: scaleX(1);
}

.footer-address {
  color: rgba(255, 248, 235, 0.6);
  font-size: 0.86rem;
  line-height: 1.5;
}

.footer-social-icons {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.footer-social-icons a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 248, 235, 0.18);
  border-radius: 999px;
  background: rgba(255, 248, 235, 0.05);
  color: rgba(255, 248, 235, 0.72);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.footer-social-icons a:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(255, 248, 235, 0.1);
}

.footer-social-icons svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 248, 235, 0.12);
  padding: 18px 0;
  color: rgba(255, 248, 235, 0.5);
  font-size: 0.78rem;
  text-align: center;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 20;
  max-width: min(360px, calc(100% - 36px));
  background: var(--ink);
  color: white;
  padding: 13px 16px;
  box-shadow: var(--shadow);
}

@media (max-width: 1024px) {
  .topbar {
    position: fixed;
    min-height: 60px;
    padding: 8px 10px;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .brand {
    order: 0;
    justify-content: center;
    text-align: center;
    gap: 6px;
    flex-shrink: 1;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .brand strong {
    font-size: 0.82rem;
    white-space: normal;
  }

  .brand small {
    display: none;
  }

  .mobile-header-icons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
  }

  .mobile-header-icons-left {
    order: -1;
  }

  .mobile-header-icons-right {
    order: 1;
  }

  .nav-toggle,
  .mobile-icon-btn {
    display: flex;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
  }

  .nav-toggle svg,
  .mobile-icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .topbar nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(12px, 4vw, 28px);
    left: clamp(12px, 4vw, 28px);
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(221, 212, 198, 0.92);
    border-radius: 12px;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 18px 44px rgba(32, 25, 17, 0.14);
    backdrop-filter: blur(18px);
  }

  .topbar nav.nav-open {
    display: flex;
  }

  .topbar nav a {
    padding: 11px 12px;
    border-radius: 8px;
  }

  .topbar nav a:not(.whatsapp-btn).active,
  .topbar nav a:not(.whatsapp-btn)[aria-current="page"] {
    background: rgba(24, 115, 101, 0.09);
  }

  .topbar nav a:not(.whatsapp-btn).active::after,
  .topbar nav a:not(.whatsapp-btn)[aria-current="page"]::after {
    display: none;
  }

  .nav-whatsapp-btn {
    text-align: center;
  }
}

/* Narrow phones: the brand text already truncates, but give the icon row a bit more room too,
   and let it wrap to its own line as a last resort rather than ever overlapping the brand. */
@media (max-width: 520px) {
  .home-search-hero {
    padding-top: 8px;
  }

  .global-search {
    grid-template-columns: 1fr;
  }

  .cart-drawer {
    padding-bottom: 36px;
  }

  .global-search-box {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 58px;
    padding: 0 14px;
  }

  .global-search-shop-btn {
    width: 100%; 
    min-height: 42px;
  }

  .global-search-result {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }

  .global-search-thumb,
  .global-search-thumb img,
  .global-search-thumb-empty {
    width: 54px;
    height: 54px;
  }

  .global-search-result > strong {
    grid-column: 2;
    font-size: 0.9rem;
  }

  .brand {
    gap: 9px;
  }

  .brand strong {
    font-size: 0.94rem;
  }

  .brand small {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.product-table {
  display: flex;
  flex-direction: column;
}

.bulk-action-bar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
  box-shadow: var(--shadow);
}

.bulk-action-count {
  font-weight: 700;
  color: var(--ink);
}

.bulk-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bulk-action-clear {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .bulk-action-bar {
    top: 0;
  }

  .bulk-action-clear {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

.product-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 2.2fr) 110px 110px minmax(0, 160px) 116px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--admin-hairline, var(--line));
}

.product-row-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-row-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--gold);
  outline: none;
}


.product-row-head {
  padding-block: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--admin-card, rgba(255, 253, 248, 0.7));
  border-top: none;
  border-bottom: 1px solid var(--admin-hairline, var(--line));
}

.product-row-head span:last-child {
  text-align: center;
}

.product-row:hover {
  background: color-mix(in srgb, var(--green, #2f6b4f) 4%, transparent);
}

.product-cell-summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

.product-cell-summary img,
.product-cell-summary .image-missing {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
}

.product-cell-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.product-cell-text strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-cell-text span {
  font-size: 0.82rem;
  color: var(--muted);
}

.product-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  justify-content: center;
  gap: 8px;
}

.product-typeahead {
  position: relative;
  min-width: 180px;
}

.product-typeahead-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--admin-hairline, var(--line));
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.product-typeahead-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.84rem;
}

.product-typeahead-item:hover,
.product-typeahead-item:focus-visible {
  background: var(--admin-hover, rgba(0, 0, 0, 0.04));
}

.product-typeahead-item img,
.product-typeahead-item .collection-product-item-empty {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.product-typeahead-empty {
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.record-box-panel-body .empty-state {
  padding: 16px;
}

.product-view-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.product-view-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
}

.product-view-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.manage-products-section h4 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 600;
  padding: 4px 0;
}

.manage-products-section + .manage-products-section {
  border-top: 1px solid var(--admin-hairline);
  padding-top: 20px;
}

.manage-products-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.manage-products-section-head h4 {
  margin: 0;
}

.collection-bar-count-pill {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--admin-panel, #f1f5f9);
  border: 1px solid var(--admin-hairline, var(--line));
  border-radius: 999px;
  padding: 3px 10px;
}

.manage-products-section .filter-search {
  margin: 10px 0;
}

.collection-product-manage-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
  margin-top: 8px;
}

.manage-product-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--admin-hairline);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.manage-product-row:has(input:checked) {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px rgba(182, 64, 64, 0.2);
}

.manage-product-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--admin-panel, #f1f5f9);
}

.manage-product-badge.is-only {
  color: var(--warn, #b4632a);
  background: var(--warn-bg, rgba(180, 99, 42, 0.12));
}

.manage-product-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 220px;
  text-transform: none;
}

.manage-product-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--danger);
  outline: none;
}

.manage-product-check img,
.manage-product-check .collection-product-item-empty {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
}

.manage-product-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}

.manage-product-name small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.manage-reassign-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.manage-reassign-field select {
  border-radius: 7px;
  border: 1px solid var(--admin-hairline);
  padding: 6px 8px;
  font-size: 0.82rem;
  text-transform: none;
  color: var(--ink);
  background: #fff;
}

.manage-products-form-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.resume-picker-toolbar {
  justify-content: space-between;
  align-items: center;
}

.resume-picker-count {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.icon-close-btn {
  display: inline-flex;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

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

@media (max-width: 640px) {
  .manage-product-row {
    flex-direction: column;
    align-items: stretch;
  }

  .manage-reassign-field {
    justify-content: space-between;
  }
}

/* Media fields (collection image/banner/video pickers): link rows + a "+" button + upload */
.media-field-group {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--admin-hairline, var(--line));
  padding-top: 16px;
}

.media-rotate-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}

.media-rotate-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--gold);
}

.media-url-list {
  display: grid;
  gap: 8px;
}

.media-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.media-url-row input {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid var(--admin-hairline, var(--line));
  min-height: 38px;
  padding: 0 12px;
  text-transform: none;
}

.media-remove-btn {
  display: inline-flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-hairline, var(--line));
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.media-remove-btn:hover {
  background: rgba(182, 64, 64, 0.08);
  color: var(--danger);
}

.media-remove-btn svg {
  width: 14px;
  height: 14px;
}

.media-field-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.media-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed color-mix(in srgb, var(--gold) 60%, var(--line));
  border-radius: 8px;
  background: transparent;
  color: var(--gold);
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.media-add-btn:hover {
  background: rgba(167, 125, 53, 0.08);
}

.media-add-btn svg {
  width: 15px;
  height: 15px;
}

.media-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--admin-hairline, var(--line));
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
}

.media-upload-btn input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ---------- Product page: "More from this collection" ---------- */

.related-products {
  max-width: var(--page-max-width, 1240px);
  margin: 56px auto 0;
  padding: 0 16px 8px;
}

.related-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.related-products-head h2 {
  margin: 2px 0 0;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.related-products-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.related-product-card {
  scroll-snap-align: start;
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: var(--panel);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.related-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}

.related-product-media {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}

.related-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-product-body {
  display: grid;
  gap: 4px;
}

.related-product-body h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-product-price {
  font-weight: 700;
  color: var(--gold);
}

@media (max-width: 640px) {
  .related-products {
    margin-top: 36px;
  }

  .related-products-row {
    grid-auto-columns: 150px;
    gap: 12px;
  }
}