/* ==========================================================================
   Theme.css — shared design system for storefront, customer & admin panels
   Built on top of Bootstrap 5. Only visual layer; no markup contracts broken.
   ========================================================================== */

:root{
  --brand:            var(--brand-primary, #f2711c);
  --brand-dark:        color-mix(in srgb, var(--brand) 80%, black 20%);
  --brand-light:       color-mix(in srgb, var(--brand) 12%, white 88%);
  --brand-softer:      color-mix(in srgb, var(--brand) 6%, white 94%);
  --ink:              #17181c;
  --ink-soft:         #5b5f6a;
  --surface:          #ffffff;
  --surface-muted:    #f6f7f9;
  --border-soft:      #e9ebef;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(23,24,28,.06);
  --shadow-md: 0 10px 30px rgba(23,24,28,.08);
  --shadow-lg: 0 20px 50px rgba(23,24,28,.14);
  --font: "Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{ scrollbar-width: thin; }

html, body{
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6{ font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; }

a{ transition: color .15s ease; }

/* ---------- Buttons ---------- */
.btn{ border-radius: var(--radius-sm); font-weight: 600; padding: .55rem 1.1rem; transition: all .18s ease; }
.btn-sm{ border-radius: 8px; }
.btn-brand{
  background: var(--brand);
  color:#fff; border: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent);
}
.btn-brand:hover{ color:#fff; background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 40%, transparent); }
.btn-brand:active{ transform: translateY(0); }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger{ border-radius: var(--radius-sm); }
.btn:disabled{ box-shadow:none; }

/* ---------- Cards ---------- */
.card{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.card-header{ background: var(--surface); border-bottom: 1px solid var(--border-soft); font-weight: 700; border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; }

/* ---------- Product cards ---------- */
.product-card{
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card .card-img-top{ background: var(--surface-muted); }
.discount-badge{ border-radius: 999px; font-weight: 700; letter-spacing:.02em; z-index:2; }
.price-old{ text-decoration: line-through; color:#a6abb5; font-size:.85rem; }
.text-brand{ color: var(--brand) !important; }
.bg-brand{ background: var(--brand) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  border-radius: var(--radius-sm);
  border-color: var(--border-soft);
  padding: .6rem .85rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-light);
}
.form-check-input:checked{ background-color: var(--brand); border-color: var(--brand); }

/* ---------- Tables ---------- */
.table{ --bs-table-hover-bg: var(--brand-softer); }
.table thead th{ text-transform: uppercase; font-size:.72rem; letter-spacing:.06em; color: var(--ink-soft); border-bottom-width:1px; }
.table > :not(caption) > * > *{ padding: .85rem 1rem; }

/* ---------- Badges ---------- */
.badge{ font-weight: 600; border-radius: 8px; padding: .4em .65em; }

/* ==========================================================================
   STOREFRONT
   ========================================================================== */
.sf-header{
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(255,255,255,.92);
}
/* Safety cap matching the admin's max allowed Logo Height (200px), so a
   stale/out-of-range setting value can never render larger than intended.
   max-width keeps a wide/large logo from squeezing out the rest of the
   header row; the brand text truncates instead of overflowing/wrapping. */
.navbar-brand img{ max-height: 200px; max-width: 220px; width: auto; flex-shrink: 0; }
.navbar-brand{ min-width: 0; }
.navbar-brand span{ min-width: 0; }
.sf-topbar{
  background: var(--ink);
  color:#cfd2d8;
  font-size:.8rem;
}
.sf-topbar a{ color:#fff; text-decoration:none; }
.sf-search .form-control{ border-radius: 999px 0 0 999px; }
.sf-search .btn{ border-radius: 0 999px 999px 0; }
.icon-btn{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border-soft); background:#fff; color: var(--ink);
}
.icon-btn:hover{ background: var(--brand-softer); border-color: var(--brand-light); }

.hero{
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--brand-dark), var(--brand));
  color:#fff;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 200px at 85% 20%, rgba(255,255,255,.18), transparent 60%);
}
.hero .hero-inner{ position:relative; z-index:1; }
.hero h1{ font-size: clamp(1.7rem, 4vw, 3rem); }

.section-title{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.1rem; }
.section-title h4{ margin:0; }
.section-title .view-all{ font-size:.85rem; font-weight:700; color: var(--brand); text-decoration:none; white-space:nowrap; }

.category-pill{
  border-radius: var(--radius-md);
  border:1px solid var(--border-soft);
  transition: all .2s ease;
}
.category-pill:hover{ border-color: var(--brand); background: var(--brand-softer); transform: translateY(-2px); }

footer.sf-footer{
  background: #14151a;
  color:#a6abb8;
}
footer.sf-footer h5, footer.sf-footer h6{ color:#fff; }
footer.sf-footer a{ color:#c3c7d1; text-decoration:none; }
footer.sf-footer a:hover{ color:#fff; }
footer.sf-footer .social-icon{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
}
footer.sf-footer .social-icon:hover{ background: var(--brand); }

/* Mobile bottom nav for storefront */
.sf-bottom-nav{
  position: fixed; bottom:0; left:0; right:0; z-index:1030;
  background:#fff; border-top:1px solid var(--border-soft);
  display:none;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.sf-bottom-nav a{
  flex:1; text-align:center; padding:.55rem 0 .5rem; color: var(--ink-soft); text-decoration:none; font-size:.68rem; font-weight:600;
  position:relative;
}
.sf-bottom-nav a i{ display:block; font-size:1.15rem; margin-bottom:2px; }
.sf-bottom-nav a.active{ color: var(--brand); }
@media (max-width: 767.98px){
  .sf-bottom-nav{ display:flex; }
  body{ padding-bottom: 64px; }
}

/* ==========================================================================
   CUSTOMER ACCOUNT
   ========================================================================== */
.account-sidebar .list-group-item{ border:none; border-radius: var(--radius-sm) !important; margin-bottom:.25rem; font-weight:600; color: var(--ink-soft); }
.account-sidebar .list-group-item.active{ background: var(--brand); border-color: var(--brand); color:#fff; box-shadow: var(--shadow-sm); }
.account-sidebar .list-group-item:not(.active):hover{ background: var(--brand-softer); color: var(--ink); }

/* ==========================================================================
   ADMIN
   ========================================================================== */
.admin-shell{ min-height:100vh; }
.admin-sidebar{
  width: var(--admin-sidebar-width, 264px);
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(180deg, var(--ink) 0%, #22242b 100%);
  color:#c9cbd3;
  transition: margin-left .25s ease;
}
.sidebar-resize-handle{
  position:absolute; top:0; right:-3px; width:6px; height:100%;
  cursor: col-resize; z-index:1046; background:transparent;
}
.sidebar-resize-handle:hover, body.sidebar-resizing .sidebar-resize-handle{
  background: var(--brand); opacity:.6;
}
body.sidebar-resizing{ cursor: col-resize; user-select: none; }
body.sidebar-resizing .admin-sidebar{ transition: none; }
.admin-sidebar .admin-brand{ color:#fff; border-bottom: 1px solid rgba(255,255,255,.08); overflow:hidden; }
/* Whatever height the admin sets for the logo (Settings > General), it must
   never outgrow the fixed-width sidebar: cap its rendered width and let the
   company name truncate with an ellipsis instead of overflowing/getting
   visually cut off. */
.admin-brand .admin-logo{ max-width: 130px; width:auto; flex-shrink:0; }
.admin-brand span{ min-width:0; }
.admin-sidebar .nav-link{
  color: #b7bac4; border-radius: var(--radius-sm); font-weight:600; font-size:.92rem;
  padding: .6rem .85rem; display:flex; align-items:center;
}
.admin-sidebar .nav-link:hover{ color:#fff; background: rgba(255,255,255,.06); }
.admin-sidebar .nav-link.active{ color:#fff; background: var(--brand); box-shadow: var(--shadow-sm); }
.admin-topbar{ background:#fff; border-bottom:1px solid var(--border-soft); }
.admin-topbar > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-stat-card{
  border-radius: var(--radius-md); border:1px solid var(--border-soft); box-shadow: var(--shadow-sm);
  position:relative; overflow:hidden;
}
.admin-stat-card .stat-icon{
  width:46px; height:46px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff;
  flex-shrink:0;
}
.sidebar-toggle-btn{ display:none; }

/* Narrow phones (2-up stat cards get tight): shrink the icon and value size
   so currency/large numbers don't collide with it or force overflow. */
@media (max-width: 420px){
  .admin-stat-card .card-body{ padding:.9rem; gap:.5rem; }
  .admin-stat-card .stat-icon{ width:36px; height:36px; font-size:1rem; border-radius:10px; }
  .admin-stat-card .fs-3{ font-size:1.3rem !important; }
  .admin-topbar{ padding-left:.5rem !important; padding-right:.5rem !important; }
  .admin-topbar .d-flex.gap-3{ gap:.5rem !important; }
}

.image-dropzone{
  border: 2px dashed var(--border-soft); border-radius: var(--radius-md);
  padding: 1.5rem; text-align:center; cursor:pointer; transition: border-color .15s ease, background .15s ease;
}
.image-dropzone:hover, .image-dropzone.dragover{ border-color: var(--brand); background: var(--brand-softer); }
.existing-image-item{ cursor: grab; }
.existing-image-item:active{ cursor: grabbing; }

.template-pick-card{
  border:2px solid var(--border-soft); border-radius: var(--radius-md); padding:.85rem; cursor:pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.template-pick-card:hover{ border-color: var(--brand); }
.template-pick-card.active{ border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-softer, rgba(242,113,28,.15)); }

@media (max-width: 991.98px){
  /* Off-canvas drawer on mobile always uses a fixed width — the drag-to-resize
     handle is desktop-only, so it shouldn't affect the mobile drawer. */
  .admin-sidebar{ position: fixed; left:0; top:0; bottom:0; z-index:1045; width:264px; margin-left:-264px; }
  .admin-sidebar.show{ margin-left:0; box-shadow: var(--shadow-lg); }
  .sidebar-toggle-btn{ display:inline-flex; }
  .sidebar-resize-handle{ display:none; }
  .admin-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; display:none; }
  .admin-backdrop.show{ display:block; }
}

/* Printing an admin page (reports, invoices): hide chrome, let the report
   content use the full page width. Elements marked .no-print never print. */
@media print{
  .admin-sidebar, .admin-topbar, .admin-backdrop, .no-print{ display:none !important; }
  .admin-shell, .admin-shell > .flex-grow-1, main{ margin:0 !important; padding:0 !important; width:100% !important; }
  body{ background:#fff !important; }
}

/* ==========================================================================
   Component styles previously scoped to a "warm" variant now apply globally
   ========================================================================== */

/* Scrolling promo/announcement bar */
.promo-bar{
  background: var(--ink);
  color:#f4e9da;
  overflow:hidden;
  white-space:nowrap;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
}
.promo-bar .promo-track{
  display:inline-block;
  padding-left:100%;
  animation: promo-scroll 22s linear infinite;
}
.promo-bar .promo-track span{ margin-right:3rem; }
@keyframes promo-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .promo-bar .promo-track{ animation: none; padding-left:1rem; }
}

/* Category tiles (round, ingredient-forward) */
.cat-tile{
  border-radius: 999px;
  aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-tile:hover{ transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); }
.cat-tile img{ width:100%; height:100%; object-fit:cover; }
.cat-tile-label{ font-weight:700; font-size:.85rem; text-align:center; margin-top:.6rem; }

/* Brand story split section */
.brand-story{
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.brand-story .story-art{
  background: linear-gradient(135deg, var(--brand-light), var(--surface-muted));
  min-height: 220px;
  display:flex; align-items:center; justify-content:center;
  font-size: 3.5rem;
}

/* Instagram-style gallery grid */
.insta-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:.5rem; }
.insta-grid a{
  display:block; aspect-ratio:1/1; border-radius: var(--radius-sm); overflow:hidden; position:relative;
}
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.insta-grid a:hover img{ transform: scale(1.08); }
@media (max-width: 767.98px){
  .insta-grid{ grid-template-columns: repeat(3,1fr); }
}

/* Floating WhatsApp button */
.whatsapp-fab{
  position: fixed; right:1.1rem; bottom: 1.3rem; z-index:1040;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: var(--shadow-lg); text-decoration:none;
}
.whatsapp-fab:hover{ color:#fff; transform: translateY(-2px); }
@media (max-width: 767.98px){
  .whatsapp-fab{ bottom: 76px; right: .9rem; width:50px; height:50px; font-size:1.4rem; }
}

/* Back-to-top — stacks directly above the WhatsApp button, never overlapping it.
   Hidden until the page is scrolled, shown/hidden via the .show class toggled
   by the small script in each layout that includes this button. */
.back-to-top-fab{
  position: fixed; right:1.1rem; bottom: 5.3rem; z-index:1040;
  width:44px; height:44px; border-radius:50%;
  background: var(--brand, #f2711c); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; box-shadow: var(--shadow-lg); text-decoration:none;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
}
.back-to-top-fab.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top-fab:hover{ color:#fff; background: color-mix(in srgb, var(--brand, #f2711c) 82%, black 18%); }
@media (max-width: 767.98px){
  .back-to-top-fab{ bottom: 136px; right: .9rem; width:40px; height:40px; font-size:1.05rem; }
}

/* Newsletter band in footer */
.newsletter-band{
  background: color-mix(in srgb, var(--brand) 14%, #14151a 86%);
  border-radius: var(--radius-lg);
}
.newsletter-band .form-control{ border-radius: 999px 0 0 999px; border:none; }
.newsletter-band .btn{ border-radius: 0 999px 999px 0; }

.payment-badges img, .payment-badges .badge{ height:26px; }

/* ==========================================================================
   DARK MODE
   Toggle by setting data-theme="dark" on <html>. Respects prefers-color-scheme
   on first visit, then remembers the user's choice via localStorage.
   ========================================================================== */
html[data-theme="dark"]{
  --ink: #eef0f3;
  --ink-soft: #a7abb6;
  --surface: #1b1c22;
  --surface-muted: #24262e;
  --border-soft: #33353f;
  --brand-softer: rgba(255,255,255,.04);
  --brand-light: rgba(255,255,255,.08);
}
html[data-theme="dark"] body{ background: #131418; color: var(--ink); }
html[data-theme="dark"] .bg-light{ background: var(--surface-muted) !important; }
html[data-theme="dark"] .bg-white{ background: var(--surface) !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .sf-header,
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .navbar.bg-white{ background: var(--surface); color: var(--ink); border-color: var(--border-soft); }
html[data-theme="dark"] .sf-header{ background: rgba(27,28,34,.92); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{ background: var(--surface-muted); border-color: var(--border-soft); color: var(--ink); }
html[data-theme="dark"] .form-control::placeholder{ color: var(--ink-soft); }
html[data-theme="dark"] .table{ color: var(--ink); }
html[data-theme="dark"] .table > :not(caption) > *{ background: var(--surface); color: var(--ink); border-color: var(--border-soft); }
html[data-theme="dark"] .table-light, html[data-theme="dark"] .table thead th{ background: var(--surface-muted) !important; color: var(--ink-soft); }
html[data-theme="dark"] .dropdown-menu{ background: var(--surface); border-color: var(--border-soft); }
html[data-theme="dark"] .dropdown-item{ color: var(--ink); }
html[data-theme="dark"] .dropdown-item:hover{ background: var(--surface-muted); color: var(--ink); }
html[data-theme="dark"] .btn-outline-secondary{ color: var(--ink); border-color: var(--border-soft); }
html[data-theme="dark"] .icon-btn{ background: var(--surface); border-color: var(--border-soft); color: var(--ink); }
html[data-theme="dark"] .btn-light{ background:#fff; color:#111; }
html[data-theme="dark"] .btn-outline-dark{ color: var(--ink); border-color: var(--border-soft); }
html[data-theme="dark"] .category-pill,
html[data-theme="dark"] .cat-tile{ background: var(--surface-muted); border-color: var(--border-soft); }
html[data-theme="dark"] .offcanvas{ background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .brand-story{ background: var(--surface-muted); }
html[data-theme="dark"] .account-sidebar .list-group-item{ background: var(--surface); color: var(--ink-soft); }
html[data-theme="dark"] .account-sidebar .list-group-item:not(.active):hover{ background: var(--surface-muted); }
html[data-theme="dark"] .alert-light{ background: var(--surface-muted); color: var(--ink); border-color: var(--border-soft); }
html[data-theme="dark"] .sf-menu-bar{ background: var(--surface); border-color: var(--border-soft) !important; }
html[data-theme="dark"] .sf-menu-bar a{ color: var(--ink-soft); }
html[data-theme="dark"] .sf-menu-bar a:hover{ color: #fff; }
html[data-theme="dark"] hr{ border-color: var(--border-soft); opacity:1; }
html[data-theme="dark"] .login-card{ background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .payment-badges .badge{ background: var(--surface-muted) !important; color: var(--ink) !important; border-color: var(--border-soft) !important; }

/* Theme toggle switch (sun / moon) */
.theme-toggle-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border-soft);
  background: var(--surface); color: var(--ink); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .15s ease;
}
.theme-toggle-btn:hover{ background: var(--brand-softer); }
.theme-toggle-btn .bi-moon-stars{ display:none; }
html[data-theme="dark"] .theme-toggle-btn .bi-sun{ display:none; }
html[data-theme="dark"] .theme-toggle-btn .bi-moon-stars{ display:inline; }

/* ---------- Storefront horizontal menu bar (categories) ---------- */
.sf-menu-bar{
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-soft);
}
.sf-menu-bar .nav-link{
  color: var(--ink); font-weight:600; font-size:.88rem; padding:.65rem .9rem;
  border-radius: 8px;
}
.sf-menu-bar .nav-link:hover{ background: var(--brand-softer); color: var(--brand); }
.sf-menu-bar .nav-link.all-cats{ background: var(--brand); color:#fff; }
.sf-menu-bar .nav-link.all-cats:hover{ color:#fff; opacity:.9; }

/* ==========================================================================
   Fashion-store layout components (sidebar categories, feature strip, promo tiles)
   ========================================================================== */
.fashion-topbar{
  background:#14151a; color:#d8dadf; font-size:.78rem;
}
.fashion-topbar a{ color:#fff; text-decoration:none; }

.cat-sidebar{
  border-radius: var(--radius-md);
  border:1px solid var(--border-soft);
  overflow:hidden;
  background:#fff;
}
.cat-sidebar .cat-sidebar-head{
  background: var(--brand); color:#fff; font-weight:800; letter-spacing:.03em;
  padding:.85rem 1rem; font-size:.85rem; text-transform:uppercase;
}
.cat-sidebar ul{ list-style:none; margin:0; padding:.4rem 0; }
.cat-sidebar li a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 1rem; color: var(--ink); text-decoration:none; font-size:.88rem; font-weight:500;
  border-bottom:1px solid var(--border-soft);
}
.cat-sidebar li:last-child a{ border-bottom:none; }
.cat-sidebar li a:hover{ background: var(--brand-softer); color: var(--brand); }
.cat-sidebar li a i.bi-chevron-right{ font-size:.7rem; opacity:.5; }

.split-hero{ border-radius: var(--radius-lg); overflow:hidden; }
.split-hero .hero-banner{
  background: linear-gradient(120deg, rgba(0,0,0,.05), rgba(0,0,0,.35)), var(--surface-muted);
  background-size: cover; background-position:center;
  min-height: 340px; border-radius: var(--radius-lg);
  display:flex; align-items:center;
  position:relative; overflow:hidden;
}
.split-hero .hero-banner .hero-text{ position:relative; z-index:1; padding: 2rem; max-width: 480px; }
.split-hero .hero-banner .hero-kicker{ text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:.78rem; color: var(--brand); }
.split-hero .hero-banner h2{ font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight:800; margin:.25rem 0 .6rem; }

/* Feature icon strip */
.feature-strip{
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.feature-strip .feature-item{ display:flex; align-items:center; gap:.75rem; }
.feature-strip .feature-icon{
  width:44px; height:44px; border-radius:50%; background: var(--brand-softer); color: var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0;
}
.feature-strip .feature-title{ font-weight:700; font-size:.88rem; margin:0; }
.feature-strip .feature-sub{ font-size:.78rem; color: var(--ink-soft); margin:0; }

/* Promo tile (image banner beside a product grid) */
.promo-tile{
  position:relative; border-radius: var(--radius-md); overflow:hidden; min-height: 100%;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
}
.promo-tile::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%);
}
.promo-tile .promo-tile-text{ position:relative; z-index:1; padding:1.5rem; color:#fff; }
.promo-tile .promo-tile-text h3{ font-weight:800; font-size:1.7rem; line-height:1.15; margin-bottom:0; }
.promo-tile .promo-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  background: var(--brand); color:#fff; font-weight:800; font-size:.78rem;
  padding:.3rem .7rem; border-radius:999px;
}

@media (max-width: 767.98px){
  .split-hero .hero-banner{ min-height:260px; }
  .promo-tile{ min-height:220px; }
}

/* Quantity stepper (+ / −) — replaces plain number inputs on product & cart pages */
.qty-stepper{
  display:inline-flex; align-items:center; border:1.5px solid var(--border-soft);
  border-radius: var(--radius-sm); overflow:hidden; height:44px;
}
.qty-stepper .qty-btn{
  width:40px; height:100%; border:none; background: var(--surface-muted); color: var(--ink);
  font-size:1.15rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; transition: background .15s ease;
  line-height: 1;
}
.qty-stepper .qty-btn:hover{ background: var(--brand-softer); color: var(--brand); }
.qty-stepper .qty-btn:disabled{ opacity:.4; cursor:not-allowed; }
.qty-stepper .qty-input{
  width:52px; height:100%; border:none; border-left:1px solid var(--border-soft); border-right:1px solid var(--border-soft);
  text-align:center; font-weight:700; font-size:.95rem; -moz-appearance:textfield;
  background: var(--surface); color: var(--ink);
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-stepper .qty-input:focus{ outline:none; }
.qty-stepper.qty-sm{ height:36px; }
.qty-stepper.qty-sm .qty-btn{ width:32px; font-size:1rem; }
.qty-stepper.qty-sm .qty-input{ width:42px; font-size:.85rem; }

/* Full-bleed section helper — lets a background stretch edge-to-edge while its
   content still lines up with the container above/below it. */
.full-bleed{
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}

/* Category showcase: promo image + tab-style category list */
.cat-showcase{
  border-radius: var(--radius-lg); overflow:hidden; position:relative;
  min-height: 320px; background-size:cover; background-position:center;
  display:flex; align-items:center;
}
.cat-showcase::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.1)); }
.cat-showcase .showcase-text{ position:relative; z-index:1; color:#fff; padding:2rem; max-width:360px; }
.cat-tab-list{ display:flex; flex-direction:column; gap:.5rem; }
.cat-tab-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; border-radius: var(--radius-sm); border:1px solid var(--border-soft);
  color: var(--ink); text-decoration:none; font-weight:700;
  transition: all .15s ease;
}
.cat-tab-list a:hover{ background: var(--brand); color:#fff; border-color: var(--brand); }

/* Deal of the day banner */
.deal-banner{
  border-radius: var(--radius-lg); background: var(--brand-softer);
  border: 1px solid var(--border-soft); overflow:hidden;
}
.deal-banner .deal-countdown{ display:flex; gap:.6rem; margin-top:1rem; }
.deal-banner .deal-countdown .box{
  background:#fff; border-radius:8px; padding:.5rem .75rem; text-align:center; min-width:56px; box-shadow: var(--shadow-sm);
}
.deal-banner .deal-countdown .box .n{ font-weight:800; font-size:1.2rem; line-height:1; color: var(--brand); }
.deal-banner .deal-countdown .box .l{ font-size:.65rem; text-transform:uppercase; color: var(--ink-soft); }
.deal-banner .price-now{ font-size:1.8rem; font-weight:800; color: var(--brand); }

/* Testimonials carousel */
.testimonial-card{
  border-radius: var(--radius-md); border:1px solid var(--border-soft); background:#fff;
  padding:1.75rem; height:100%;
}
.testimonial-card .quote-icon{ color: var(--brand-light); font-size:2rem; line-height:1; }
.testimonial-card .t-name{ font-weight:700; margin-bottom:0; }
.testimonial-card .t-role{ font-size:.78rem; color: var(--ink-soft); }
.testimonial-avatar{ width:44px; height:44px; border-radius:50%; background: var(--brand-softer); color: var(--brand); display:flex; align-items:center; justify-content:center; font-weight:700; }
html[data-theme="dark"] .testimonial-card{ background: var(--surface); }

/* Click-to-zoom image modal (shared by every storefront template's product page) */
.zoomable-image:hover, .zoomable-thumb:hover{ opacity:.9; }
.zoom-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.15); color:#fff; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
}
.zoom-nav:hover{ background:rgba(255,255,255,.3); }
.zoom-prev{ left:1rem; }
.zoom-next{ right:1rem; }

/* Pack-size variant pills on the product detail page */
.variant-pill-btn{
  border: 1.5px solid var(--border-soft); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: .45rem 1rem; font-weight: 600; font-size: .85rem;
}
.variant-pill-btn:hover{ border-color: var(--brand); color: var(--brand); }
.variant-pill-btn.active{ background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Responsive helpers ---------- */
@media (max-width: 575.98px){
  .container{ padding-left:1rem; padding-right:1rem; }
  .hero{ border-radius: var(--radius-md); }
  h1.display-6{ font-size:1.6rem; }
}

/* Shared dual-handle price range slider (flipkart/orange/minimal templates —
   corporate has its own scoped version). Each template sets --psr-accent to
   match its own palette; falls back to the global brand color. */
.psr{ margin-bottom:20px; }
.psr-values{ display:flex; justify-content:space-between; font-weight:700; font-size:13px; margin-bottom:16px; color: var(--psr-accent, var(--brand)); }
.psr-track-wrap{ position:relative; height:16px; }
.psr-track{ position:absolute; top:6px; left:0; right:0; height:4px; background: var(--border-soft); border-radius:2px; }
.psr-fill{ position:absolute; top:6px; height:4px; background: var(--psr-accent, var(--brand)); border-radius:2px; }
.psr-input{ position:absolute; top:0; left:0; width:100%; margin:0; height:16px; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none; }
.psr-input::-webkit-slider-runnable-track{ background:transparent; height:16px; }
.psr-input::-moz-range-track{ background:transparent; height:16px; }
.psr-input::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:17px; height:17px; border-radius:50%;
  background: var(--psr-accent, var(--brand)); border:3px solid #fff; box-shadow:0 0 0 1px var(--psr-accent, var(--brand)), 0 2px 6px rgba(0,0,0,.25); cursor:pointer;
}
.psr-input::-moz-range-thumb{
  pointer-events:auto; width:17px; height:17px; border-radius:50%; background: var(--psr-accent, var(--brand)); border:3px solid #fff;
  box-shadow:0 0 0 1px var(--psr-accent, var(--brand)), 0 2px 6px rgba(0,0,0,.25); cursor:pointer;
}

/* Cart mobile cards (used when .cart-row-card is toggled via CSS at small width) */
@media (max-width: 767.98px){
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{ border:1px solid var(--border-soft); border-radius: var(--radius-md); margin-bottom:.75rem; padding:.75rem; }
  .cart-table td{ border:none; padding:.3rem 0; }
  .cart-table td[data-label]::before{
    content: attr(data-label); display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); font-weight:700; margin-bottom:.15rem;
  }
}

/* Infinite scroll sentinel + loading spinner (category & search listing pages) */
.ifs-sentinel{
  width:100%; display:flex; align-items:center; justify-content:center; padding: 2rem 0 0.5rem;
}
.ifs-spinner{
  display:flex; align-items:center; gap:.4rem;
}
.ifs-spinner-dot{
  width:8px; height:8px; border-radius:50%; background: var(--brand, #0b3d91); opacity:.35;
  animation: ifs-bounce 1s infinite ease-in-out both;
}
.ifs-spinner-dot:nth-child(1){ animation-delay:-0.28s; }
.ifs-spinner-dot:nth-child(2){ animation-delay:-0.14s; }
@keyframes ifs-bounce{
  0%, 80%, 100% { transform: scale(0.6); opacity:.35; }
  40% { transform: scale(1); opacity:1; }
}