/* ============================================================
   RNDeals — design tokens
   Bootstrap 5 handles layout/grid/utilities; this file carries
   the brand's color, type, and component personality.
   ============================================================ */

:root {
  /* --- color --- */
  --color-primary: #1f6f43;
  --color-primary-dark: #15502f;
  --color-primary-tint: #eaf5ee;
  --color-bg: #faf9f6;
  --color-surface: #ffffff;
  --color-text: #14181b;
  --color-muted: #48494b;
  --color-border: #e7e5df;
  --color-save-bg: #e4f6ea;
  --color-save-text: #146c3a;
  --color-price-strike: #565656;
  --color-danger: #df5344;
  --pdp-ink: #000000;

  /* category tile tints (mirrors the reference storefront) */
  --tile-furniture: #fbf0df;
  --tile-electronics: #e4eefb;
  --tile-kitchen: #e4f1fb;
  --tile-fashion: #fbe6ea;

  /* --- type --- */
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* --- shape --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 1px 2px rgba(20, 24, 27, 0.06);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 0.975rem;
}

h1,
h2,
h3,
h4,
h5,
.font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a {
  text-decoration: none;
}

/* --- buttons: brand green replaces bootstrap blue --- */
.btn-brand {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.btn-brand:hover,
.btn-brand:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.btn-outline-brand {
  background: var(--pdp-ink);
  border: 1px solid var(--pdp-ink);
  color: #fff;
  font-weight: 600;
}

.btn-outline-brand:hover {
  background: #2a3136;
  border-color: #2a3136;
  color: #fff;
}

.text-brand {
  color: var(--color-primary);
}

.link-brand {
  color: var(--color-primary);
  font-weight: 600;
}

.link-brand:hover {
  color: var(--color-primary-dark);
}

/* focus visibility, kept even where bootstrap resets it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- announcement bar --- */
.announce-bar {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  padding: 0.45rem 0;
}

/* --- header --- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: #fff;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
}

.brand-mark span {
  color: var(--color-primary);
}

.brand-logo-img {
  max-height: 40px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}

.header-icon-link {
  color: var(--color-text);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72rem;
  gap: 2px;
}

/* --- mobile bottom bar (home page only) --- */
/* ---- Liquid glass bottom bar --------------------------------
   A floating frosted pill: backdrop-blur so whatever scrolls
   underneath (photos, banners, white sections) shows through with a
   soft frosted tint, a liquid indicator that morphs between tabs, and
   a lighter "hover" pill that bulges under whichever tab is being
   pointed at or pressed. Icon/label colors are fixed (not derived
   from the backdrop) so they stay legible everywhere. */
.bottom-nav-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  justify-content: center;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.bottom-nav {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 480px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(250, 249, 246, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(160%) grayscale(0.2);
  backdrop-filter: blur(20px) saturate(160%) grayscale(0.2);
  box-shadow:
    0 10px 26px rgba(20, 24, 27, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 -1px 0 rgba(20, 24, 27, 0.05) inset;
}

/* thin gradient rim + top sheen for a glassy, curved-surface read */
.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.25)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* the liquid pill: position/width are driven by JS (bottom-nav.js) */
.bottom-nav-indicator {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(20, 24, 27, 0.05);
  box-shadow:
    0 2px 8px rgba(20, 24, 27, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transform: translateX(0);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
  opacity: 0;
  will-change: transform, width;
  z-index: 0;
}

/* brief iridescent sheen while the blob is travelling between tabs */
.bottom-nav-indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #7dd3fc, #f0abfc, #fca5a5, #fde68a, #7dd3fc);
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity 0.15s ease;
}

.bottom-nav-indicator.is-morphing::after {
  opacity: 0.5;
}

.bottom-nav-indicator.is-instant {
  transition: none;
}

/* hover preview: a softer glass pill that follows the pointer on tabs
   that aren't already active — a "bulge" of light before you tap */
.bottom-nav-hover {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 14px rgba(20, 24, 27, 0.1);
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity 0.2s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  will-change: transform, width, opacity;
  z-index: 0;
}

.bottom-nav-item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
}

/* resting (inactive) icon/label: a stable, always-legible color. (An
   earlier version used mix-blend-mode: difference to auto-flip icons
   white/dark against whatever was behind the glass — it looked great
   on some backgrounds but rendered wrong colors, e.g. green or dull,
   on others depending on the exact backdrop. Plain, dependable color
   instead.) */
.bottom-nav-item i,
.bottom-nav-item .bottom-nav-label {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.bottom-nav-item i {
  font-size: 1.25rem;
  line-height: 1;
}

/* active / momentarily-pressed / pointer-hovering tab: brand color */
.bottom-nav-item.is-active i,
.bottom-nav-item.is-active .bottom-nav-label,
.bottom-nav-item.is-pressed i,
.bottom-nav-item.is-pressed .bottom-nav-label,
.bottom-nav-item.is-hovering i,
.bottom-nav-item.is-hovering .bottom-nav-label {
  color: var(--color-primary);
}

.bottom-nav-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 999px;
}

/* tactile press feedback on tap, any pointer type */
.bottom-nav-item:active i {
  transform: scale(0.9);
}

.bottom-nav-item i {
  transition:
    color 0.2s ease,
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.bottom-nav-badge {
  position: absolute;
  top: 0;
  left: calc(50% + 8px);
  background: var(--color-danger);
  color: #fff;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.5;
  mix-blend-mode: normal;
  box-shadow: 0 0 0 2px rgba(250, 249, 246, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav-indicator {
    transition: none;
  }
}

/* leave room so the fixed bar never covers page content on the home page */
@media (max-width: 767.98px) {
  .has-bottom-nav {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

/* three-line menu button (mobile/tablet) — opens the category sheet */
.header-menu-btn {
  background: none;
  border: 0;
  padding: 0.25rem;
  margin-left: -0.25rem;
  color: var(--color-text);
  font-size: 1.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.header-menu-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* back button on the product detail page (mobile only, sits before the logo) */
.header-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  border-radius: 50%;
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.header-back-btn:hover,
.header-back-btn:active {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.header-back-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.header-icon-link i {
  font-size: 1.15rem;
}

.header-icon-link .badge-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--color-danger);
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.3;
}

/* --- header: responsive logo sizing (tablet / mobile) ---
   Keeps the logo from crowding the search bar and account/cart icons
   as the header narrows. */
@media (max-width: 767.98px) {
  .brand-logo-img {
    max-height: 32px;
    max-width: 130px;
  }

  .brand-mark {
    font-size: 1.15rem;
  }
}

@media (max-width: 575.98px) {
  .brand-logo-img {
    max-height: 26px;
    max-width: 96px;
  }

  .brand-mark {
    font-size: 1rem;
  }
}

/* ============================================================
   Categories
   - .cat-thumb     round image/icon used everywhere categories show
   - .category-nav  desktop bar + mega menu (>= 992px)
   - .cat-strip     mobile/tablet swipeable icon row (< 992px)
   - .cat-sheet     mobile/tablet two-pane category sheet
   ============================================================ */

/* --- thumb: uploaded image, or icon on a tint. Tones echo the home tiles. --- */
.cat-thumb {
  --s: 56px;
  --tint: var(--color-primary-tint);
  --tint-fg: var(--color-primary);
  flex: 0 0 var(--s);
  width: var(--s);
  height: var(--s);
  border-radius: 20%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: var(--tint);
  color: var(--tint-fg);
  font-size: calc(var(--s) * 0.42);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 27, 0.06);
}

.cat-thumb img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.cat-thumb--xs { --s: 32px; }
.cat-thumb--sm { --s: 44px; }
.cat-thumb--md { --s: 48px; }
.cat-thumb--strip { --s: 45px; }
.cat-thumb--lg { --s: 68px; }

.tone-0 { --tint: #e4f1ea; --tint-fg: #1f6f43; }
.tone-1 { --tint: #e4eefb; --tint-fg: #24528f; }
.tone-2 { --tint: #fbf0df; --tint-fg: #9a5b12; }
.tone-3 { --tint: #fbe6ea; --tint-fg: #a1364d; }

.cat-thumb--all {
  --tint: var(--color-primary);
  --tint-fg: #fff;
}

/* --- desktop bar --- */
.category-nav {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.cn-inner {
  position: relative;
}

.cn-row {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

.cn-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 6px 0.75rem 6px 0;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.86rem;
}

.cn-all .cn-caret {
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.cn-all[aria-expanded="true"] .cn-caret {
  transform: rotate(180deg);
}

.cn-links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.cn-links::-webkit-scrollbar {
  display: none;
}

.cn-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.62rem;
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.cn-link i {
  color: var(--color-primary);
  font-size: 1.05rem;
}

/* Icons return once the bar has room for all eight categories; the mega menu shows them anyway. */
@media (max-width: 1399.98px) {
  .cn-link i {
    display: none;
  }
}

/* Scroll arrows: shown only on the side that still has categories to reveal */
.cn-scroll {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* Swipe / drag / trackpad scrolling, same feel as the mobile strip */
.cn-scroll .cn-links {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
}

.cn-scroll .cn-links.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.cn-scroll .cn-links.is-dragging .cn-link {
  pointer-events: none;
}

.cn-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 44px;
  display: none;
  align-items: center;
  pointer-events: none; /* indicator only: the row itself is what scrolls */
  color: var(--color-primary-dark);
}

.cn-arrow i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 6px rgba(20, 24, 27, 0.15);
  font-size: 0.8rem;
}

.cn-arrow--prev {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, 0));
}

.cn-arrow--next {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(270deg, #fff 55%, rgba(255, 255, 255, 0));
}

.cn-row.can-prev .cn-arrow--prev,
.cn-row.can-next .cn-arrow--next {
  display: flex;
}

.cn-link:hover,
.cn-link.is-hover {
  color: var(--color-primary);
}

.cn-link.active {
  color: var(--color-primary-dark);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

/* --- mega panel: one shared panel under the bar --- */
.cn-mega {
  position: absolute;
  top: 100%;
  left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  z-index: 1020;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 330px;
  max-height: min(70vh, 540px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 40px rgba(20, 24, 27, 0.12);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.category-nav.is-open .cn-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cn-rail {
  padding: 0.6rem;
  background: #f6f5f1;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}

.cn-rail-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 500;
}

.cn-rail-name {
  flex: 1 1 auto;
  min-width: 0;
}

.cn-rail-chevron {
  font-size: 0.7rem;
  color: var(--color-muted);
  opacity: 0;
}

.cn-rail-item.is-active {
  background: #fff;
  color: var(--color-primary-dark);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--color-border);
}

.cn-rail-item.is-active .cn-rail-chevron {
  opacity: 1;
}

.cn-panes {
  padding: 1.15rem 1.5rem 1.4rem;
  overflow-y: auto;
}

.cn-pane {
  display: none;
}

.cn-pane.is-active {
  display: block;
}

.cn-pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.cn-pane-title {
  margin: 0;
  font-size: 1.1rem;
}

.cn-viewall {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.cn-viewall i {
  font-size: 0.7rem;
}

.cn-viewall:hover {
  color: var(--color-primary-dark);
}

.cn-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.15rem 0.75rem;
}

.cn-sub {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
  color: var(--color-text);
}

.cn-sub:hover {
  background: var(--color-primary-tint);
}

.cn-sub.is-current {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.cn-sub-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.cn-sub-name {
  font-size: 0.9rem;
  font-weight: 500;
}

.cn-sub-count {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.cn-empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* --- mobile & tablet: swipeable icon strip --- */
.cat-strip {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.cat-strip-scroller {
  display: flex;
  gap: 0.15rem;
  padding: 0.7rem 0.6rem 0.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 0.6rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cat-strip-scroller::-webkit-scrollbar {
  display: none;
}

.cat-strip-item {
  flex: 0 0 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  scroll-snap-align: center;
}

/* snapping is paused while app.js glides the tapped category to the center */
.cat-strip-scroller.is-centering {
  scroll-snap-type: none;
}

.cat-strip-item .cat-thumb {
  transition: box-shadow 0.2s ease;
}

.cat-strip-label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.cat-strip-item.is-active .cat-thumb {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
}

.cat-strip-label {
  transition: color 0.2s ease;
}

.cat-strip-item.is-active .cat-strip-label {
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* --- mobile & tablet: two-pane category sheet --- */
.cat-sheet {
  --bs-offcanvas-width: min(100vw, 520px);
}

.cat-sheet-head {
  border-bottom: 1px solid var(--color-border);
  padding: 0.85rem 1rem;
}

.cat-sheet-head .offcanvas-title {
  font-family: var(--font-display);
  font-weight: 600;
}

.cat-sheet-body {
  display: flex;
  padding: 0;
  overflow: hidden;
}

.cat-sheet-rail {
  flex: 0 0 92px;
  overflow-y: auto;
  background: #f4f3ef;
  border-right: 1px solid var(--color-border);
}

.cat-sheet-tab {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 0.35rem;
  border: 0;
  border-bottom: 1px solid rgba(20, 24, 27, 0.05);
  background: transparent;
  color: var(--color-muted);
}

.cat-sheet-tab-name {
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.cat-sheet-tab.is-active {
  background: #fff;
  color: var(--color-primary-dark);
}

.cat-sheet-tab.is-active .cat-sheet-tab-name {
  font-weight: 700;
}

.cat-sheet-tab.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}

.cat-sheet-panes {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  background: #fff;
}

.cat-sheet-pane {
  display: none;
  padding: 0.9rem 0.85rem 1.5rem;
}

.cat-sheet-pane.is-active {
  display: block;
}

.cat-sheet-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.cat-sheet-all-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.cat-sheet-all small {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.cat-sheet-sub-title {
  margin: 1.1rem 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-muted);
}

.cat-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 0.5rem;
}

.cat-sheet-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text);
  text-align: center;
}

.cat-sheet-sub-name {
  font-size: 0.74rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cat-sheet-sub.is-current .cat-thumb {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
}

.cat-sheet-sub.is-current .cat-sheet-sub-name {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.cat-sheet-none {
  margin: 1.1rem 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* --- hero --- */
.hero-panel {
  background: linear-gradient(115deg, var(--color-primary-tint) 0%, #f3f8f2 55%, #fff 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hero-panel .hero-copy h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.08;
}

/* --- full-bleed hero slider (breaks out of the bootstrap .container) --- */
body {
  overflow-x: hidden;
}

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hero-slide {
  position: relative;
  height: 460px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

/* Video slides sit inside the exact same .hero-slide box/height as image
   slides — this just fills it the way background-size:cover does for
   images, so the slider's design and size never change either way. */
.hero-slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 24, 27, 0.72) 0%, rgba(20, 24, 27, 0.45) 42%, rgba(20, 24, 27, 0.05) 70%);
}

.hero-slide .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.hero-slide-copy {
  max-width: 560px;
  color: #fff;
}

.hero-slide-copy h1 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.1;
}

.hero-slide-copy p {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767.98px) {
  .hero-slide {
    height: 240px;
  }

  .hero-slide-overlay {
    background: linear-gradient(180deg, rgba(20, 24, 27, 0.35) 0%, rgba(20, 24, 27, 0.75) 100%);
  }

  .hero-slide-copy h1 {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    margin-bottom: 0.5rem !important;
  }

  .hero-slide-copy p {
    font-size: 0.9rem;
    margin-bottom: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  .hero-slide {
    height: 190px;
  }

  .hero-slide-copy .btn {
    padding: 0.45rem 1rem !important;
    font-size: 0.85rem;
  }
}

/* --- category tiles --- */
.tile {
  position: relative;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  height: 100%;
  min-height: 108px;
  overflow: visible;
  display: flex;
  align-items: flex-start;
}

.tile-furniture {
  background: var(--tile-furniture);
}

.tile-electronics {
  background: var(--tile-electronics);
}

.tile-kitchen {
  background: var(--tile-kitchen);
}

.tile-fashion {
  background: var(--tile-fashion);
}

.tile-copy {
  max-width: 64%;
  position: relative;
  z-index: 2;
}

.tile .tile-off {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.tile-image {
  position: absolute;
  right: 6px;
  bottom: -10px;
  width: 44%;
  max-width: 110px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(20, 24, 27, 0.18);
}

@media (max-width: 767.98px) {
  .tile {
    min-height: 96px;
    padding: 0.9rem 1rem;
  }

  .tile-image {
    width: 40%;
    max-width: 76px;
    right: 4px;
    bottom: -8px;
  }
}

/* --- product card ---
   Shared by home, listing, deals, wishlist and "you may also like".
   The one loud element is the discount tab on the image corner: on a clearance
   store the saving is what people scan for, so everything else stays quiet. */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.pcard:hover {
  border-color: #b9cfc0;
}

.pcard-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f6f5f1;
}

.pcard-media a {
  position: absolute;
  inset: 0;
  display: block;
}

/* contain + multiply: nothing gets cropped, and white product shots melt into the tile */
.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.pcard-off {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 3px 9px 3px 8px;
  border-radius: 0 6px 6px 0;
  background: #d41500;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.pcard-soldout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 8px;
  background: rgba(20, 24, 27, 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.pcard.is-soldout .pcard-media img {
  opacity: 0.5;
}

.pcard-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem 0.8rem;
}

.pcard-title {
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.pcard-title:hover {
  color: var(--color-primary-dark);
}

.pcard-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  color: var(--color-muted);
  min-height: 1rem;
}

.pcard-stars {
  --gold: #e8a317;
  --off: #d8d5cb;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--gold) calc(var(--rating) / 5 * 100%), var(--off) 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pcard-stars::before {
  content: "\f586\f586\f586\f586\f586";
}

.pcard-rating-num {
  font-weight: 600;
  color: var(--color-text);
}

/* price + save line + button hug the bottom so rows line up across the grid */
.pcard-buy {
  margin-top: auto;
  padding-top: 0.2rem;
}

.pcard-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
}

.pcard-save {
  min-height: 1.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-save-text);
}

@media (max-width: 575.98px) {
  .pcard-body {
    padding: 0.6rem 0.65rem 0.7rem;
  }

  .pcard-title {
    font-size: 0.82rem;
  }

  .price-now {
    font-size: 0.98rem;
  }
}

.wishlist-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgb(255 255 255 / 60%); 
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.wishlist-toggle.active {
  color: var(--color-danger);
}

.wishlist-toggle i.bi-heart-fill {
  display: none;
}

.wishlist-toggle.active i.bi-heart {
  display: none;
}

.wishlist-toggle.active i.bi-heart-fill {
  display: inline-block;
}

/* Same show/hide-icon trick as .wishlist-toggle above, for the button
   next to "Add to Cart" on the product detail page — that one sits
   inline in the button group rather than floating over an image, so
   it keeps btn-outline-brand's own sizing/position instead of the
   circular floating treatment. Previously this button only ever got
   its icon class from the initial server render, so clicking it
   toggled the wishlist but the heart itself never visibly changed
   until the next full page load. */
.wishlist-toggle-detail i.bi-heart-fill {
  display: none;
}

.wishlist-toggle-detail.active {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.wishlist-toggle-detail.active i.bi-heart {
  display: none;
}

.wishlist-toggle-detail.active i.bi-heart-fill {
  display: inline-block;
}

.price-now {
  font-weight: 700;
  font-size: 1.02rem;
}

.price-was {
  color: var(--color-price-strike);
  text-decoration: line-through;
  font-size: 0.85rem;
}

.save-badge {
  display: inline-block;
  background: var(--color-save-bg);
  color: var(--color-save-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.btn-add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.btn-add-cart:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-add-cart.in-cart {
  background: var(--color-primary-tint);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.btn-add-cart:disabled {
  background: #f4f3f0;
  border-color: var(--color-border);
  color: var(--color-muted);
}

/* --- listing grid: shown instead of "Add to cart" (see partials/product-card) --- */
.btn-notify-me,
.btn-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.btn-notify-me {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.btn-notify-me:hover {
  background: var(--color-primary-tint);
}

.btn-options {
  background: #fff;
  color: var(--color-text);
}

.btn-options:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --- section heading row --- */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* --- footer --- */
.site-footer {
  background: #f2f1ec;
  border-top: 1px solid var(--color-border);
}

.site-footer h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--color-muted);
}

.site-footer a:hover {
  color: var(--color-primary);
}

/* --- product detail --- */
.pd-gallery-main {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f4f3f0;
}

.pd-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-thumb {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  background: #f4f3f0;
}

.pd-thumb.active {
  border-color: var(--color-primary);
}

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

.qty-stepper {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.qty-stepper button {
  border: none;
  background: transparent;
  width: 36px;
}

.qty-stepper input {
  border: none;
  width: 44px;
  text-align: center;
}

.qty-stepper input:focus {
  outline: none;
  box-shadow: none;
}

.swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  cursor: pointer;
}

.swatch.active {
  border-color: var(--color-primary);
}

.size-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.size-option.active {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

/* --- product detail: description/specs/reviews --- */
.spec-table th,
.spec-table td {
  padding: 0.5rem 0.25rem;
  border-color: var(--color-border);
}

/* --- cart / checkout --- */
.cart-line {
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
}

.cart-line img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.summary-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}

.checkout-step-tabs .nav-link {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  margin-right: 0.5rem;
}

.checkout-step-tabs .nav-link.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* --- auth --- */
.auth-card {
  max-width: 440px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}

/* --- empty states --- */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
}

.empty-state i {
  font-size: 2.4rem;
  color: var(--color-muted);
}

/* --- misc --- */
.badge-soft {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.rating-stars i {
  color: #e0a527;
  font-size: 0.85rem;
}

/* --- product highlights & video (product detail page) --- */
.pd-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pd-highlights li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}

.pd-highlights i {
  color: var(--color-primary);
  margin-top: 0.15rem;
}

.pd-video {
  width: 100%;
  max-height: 320px;
  border-radius: var(--radius-md);
  background: #000;
}

/* --- order status timeline (account > orders > show) --- */
.order-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.order-timeline li {
  position: relative;
  padding: 0 0 1.15rem 1.6rem;
  border-left: 2px solid var(--color-border);
}

.order-timeline li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.order-timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--tl-color, var(--color-primary));
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--color-border);
}

.order-timeline .what {
  font-weight: 600;
  font-size: 0.9rem;
}

.order-timeline .when {
  font-size: 0.78rem;
  color: var(--color-muted);
}
/* --- header search suggestions (type-ahead dropdown) --- */
.search-suggest-host {
  position: relative;
}

.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1060;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 24, 27, 0.14);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 6px 0;
}

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

.search-suggest__heading {
  padding: 8px 14px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.search-suggest__item,
.search-suggest__all {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  color: var(--color-text);
  text-decoration: none;
}

.search-suggest__item:hover,
.search-suggest__item.is-active,
.search-suggest__all:hover,
.search-suggest__all.is-active {
  background: var(--color-primary-tint);
  color: var(--color-text);
}

.search-suggest__item img,
.search-suggest__noimg {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.search-suggest__item--cat i {
  width: 40px;
  flex: 0 0 40px;
  text-align: center;
  color: var(--color-primary);
}

.search-suggest__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest__name strong {
  color: var(--color-primary-dark);
}

.search-suggest__price {
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.search-suggest__all {
  justify-content: center;
  border-top: 1px solid var(--color-border);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
}

.search-suggest__empty {
  padding: 14px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

/* ============================================================
   Recently Viewed — home page slider
   Scroll-snap track (native swipe on touch, no library), arrow
   buttons on wider screens, a progress bar on phones. Cards are the
   shared .pcard; only their wrapper width is controlled here.
   Slides per view is one CSS variable, so each breakpoint is a
   single line: fractional values leave the next card peeking, which
   tells shoppers the row scrolls.
   ============================================================ */
.rv-section {
  --rv-per: 2.15;
  --rv-gap: 0.75rem;
  --rv-pad: 0.85rem;

  position: relative;
  padding: var(--rv-pad);
  background: linear-gradient(180deg, var(--color-primary-tint) 0%, #62a785  55%);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-md) + 4px);
  overflow: hidden;
}

.rv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.rv-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.rv-title h2 {
  font-size: 1.1rem;
  line-height: 1.25;
}

.rv-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.05rem;
}

.rv-sub {
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* arrows: shown by JS only when there is something to scroll to */
.rv-controls {
  display: flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.rv-controls[hidden] {
  display: none;
}

.rv-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  font-size: 0.9rem;
  box-shadow: var(--shadow-card);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.rv-arrow:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.rv-arrow:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.rv-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* track: bleeds to the section edge on phones so cards slide under the border */
.rv-viewport {
  margin: 0 calc(var(--rv-pad) * -1);
}

.rv-track {
  display: flex;
  gap: var(--rv-gap);
  padding: 2px var(--rv-pad) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rv-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rv-track::-webkit-scrollbar {
  display: none;
}

.rv-track:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

/* the shared card partial wraps itself in a bootstrap .col; make it a slide */
.rv-track > .col {
  flex: 0 0 calc((100% - (var(--rv-per) - 1) * var(--rv-gap)) / var(--rv-per));
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
  scroll-snap-align: start;
}

/* mouse-drag feedback (desktop) */
.rv-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.rv-track.is-dragging a,
.rv-track.is-dragging img {
  pointer-events: none;
}

/* progress bar (phones / tablets, where the arrows are hidden) */
.rv-progress {
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
}

.rv-progress[hidden] {
  display: none;
}

.rv-progress-bar {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: 3px;
  background: var(--color-primary);
  transform: translateX(0);
  will-change: transform;
}

/* --- responsive: slides per view --- */
@media (min-width: 576px) {
  .rv-section { --rv-per: 3.15; --rv-gap: 0.85rem; --rv-pad: 1.1rem; }
  .rv-title h2 { font-size: 1.2rem; }
}

@media (min-width: 768px) {
  .rv-section { --rv-per: 3.4; }
}

@media (min-width: 992px) {
  .rv-section { --rv-per: 4; --rv-gap: 1rem; --rv-pad: 1.25rem; }
  .rv-track:not(.is-dragging) { cursor: grab; }

  /* wide screens: clip cleanly at the content edge instead of bleeding to the border */
  .rv-viewport { margin: 0; }
  .rv-track { padding-inline: 0; scroll-padding-inline: 0; }
}

@media (min-width: 1200px) {
  .rv-section { --rv-per: 5; }
}

/* phones swipe + progress bar; arrows replace the bar once there is room for them */
@media (max-width: 767.98px) {
  .rv-controls { display: none; }
}

@media (min-width: 768px) {
  .rv-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-track { scroll-behavior: auto; }
  .rv-arrow { transition: none; }
}