/* =====================================================================
   ZOOM Mobile Theme — GroceryKart-style refresh
   Brand: #dd944a (warm orange) • Background: #ffffff • Font: Rubik
   Notes:
   - All brand tokens centralized in :root
   - Button hover = black
   - Old Poppins swapped for Rubik
   ===================================================================== */

/* Google Font (Rubik) */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap");

/* ==============================
   Design Tokens
   ============================== */
:root{
  /* Brand */
  --ps-primary: #dd944a;
  --ps-primary-contrast: #ffffff;
  --ps-primary-hover: #000000;
  --ps-primary-soft: rgba(221,148,74,.18);
  --ps-primary-soft-2: rgba(221,148,74,.30);

  /* Surfaces */
  --ps-bg: #ffffff;
  --ps-card: #ffffff;
  --ps-text: #111;
  --ps-muted: #6c757d;

  --ps-radius: 14px;
  --ps-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* Layout */
  --container-max: 1320px;
  --bottom-nav-h: 68px;

  /* Header */
  --header-band-y: 18px;
  --header-soft-border: #ffe2c2;

  /* Search pill */
  --search-bg: #fff;
  --search-border: #e9edf3;
  --search-shadow: 0 8px 20px rgba(17,24,39,.08);

  /* Type */
  --fs-base: 15.5px;
  --lh-base: 1.55;
}

/* Containers (match XStore width) */
@media (min-width:1200px){
  .container, .container-lg, .container-xl, .container-xxl{ max-width: var(--container-max); }
}

/* ==============================
   Base / Typography
   ============================== */
html, body{
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea{ font-family: inherit; }

h1,.h1{ font-weight:200; letter-spacing:.1px; }
h2,.h2{ font-weight:200; letter-spacing:.1px; }
h3,.h3{ font-weight:200; letter-spacing:.1px; }
h4,.h4,h5,.h5,h6,.h6{ font-weight:600; }

a{ color: var(--ps-primary); }
a:hover{ color: var(--ps-primary-hover); }

/* Buttons (global) */
.btn-primary{
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  color: var(--ps-primary-contrast) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
  background: var(--ps-primary-hover) !important;
  border-color: var(--ps-primary-hover) !important;
  color:#fff !important;
}
.btn-primary:focus,
.btn-check:focus + .btn-primary{
  box-shadow:0 0 0 .2rem var(--ps-primary-soft) !important;
}
.btn-primary:disabled,
.btn-primary.disabled{
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  opacity:.65;
  color:#fff !important;
}

.text-accent{ color: var(--ps-primary) !important; }
.bg-accent{ background: var(--ps-primary) !important; color:#fff !important; }
.badge-accent{ background: var(--ps-primary); color:#fff; }

/* ==============================
   HEADER (sticky)
   ============================== */
.main-header{
  position: sticky;
  top: 0;
  z-index: 1035;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  overflow: visible;
}

/* Band (brand) */
.header-band{
  background: var(--ps-primary) !important;
  color:#fff;
  padding: var(--header-band-y) 0;
}

/* Logo */
.site-logo{ height:86px; width:auto; }
@media (max-width:991.98px){ .site-logo{ height:38px; } }

/* --- Desktop band layout: logo | search | icons --- */
@media (min-width:992px){
  .header-band .row{
    display:flex;
    flex-wrap:nowrap !important;
    align-items:center !important;
  }
  .header-band .col-lg-2{
    flex:0 0 auto !important;
    width:auto !important;
    display:flex;
    align-items:center;
  }
  .header-band .col-lg-7{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0;
    margin-left:16px;
    display:flex;
    align-items:center;
  }
  .header-band .mega-search{ width:100%; }
  .header-band .mega-search .input-group{ width:100%; }
  .header-band .col-lg-3{
    flex:0 0 auto !important;
    width:auto !important;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin-left:16px;
  }
  .header-band .navbar-brand{
    margin:0 !important; padding:0 !important; line-height:0;
    display:inline-flex; align-items:center;
  }
  .mega-search .form-control,
  .mega-search .btn{ height:50px; }
}

/* Search pill (all sizes) */
.mega-search .input-group.input-group-lg .form-control,
.mega-search .input-group.input-group-lg .btn{ border-radius:9999px; }
.mega-search .form-control{
  background: var(--search-bg);
  border:1px solid var(--search-border);
  box-shadow: var(--search-shadow);
  padding:0 1rem;
  height:54px;
}
.mega-search .btn{
  background:#fff;
  border:1px solid var(--search-border);
  box-shadow: var(--search-shadow);
  height:54px;
  padding:0 18px;
  font-weight:600;
}
.mega-search .btn i{ color:#111; }
.mega-search .form-control:focus,
.mega-search .btn:focus{
  border-color:#dfe6ee;
  box-shadow:0 0 0 .2rem var(--ps-primary-soft);
}

/* Header actions */
.header-actions{ display:flex; align-items:center; gap:20px; }
.header-icon{ padding:8px; border-radius:10px; }
.header-band .header-icon{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.header-band .header-icon i{ color:#fff !important; font-size:22px; }
.header-band .header-icon:hover{ opacity:.9; }

/* -----------------Login & Register Page -------------  */
.auth-hero {
  background: linear-gradient(135deg, #dd944a 0%, #e7ae78 50%, #f2c59c 100%) !important;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(221, 148, 74, 0.35);
}

/* ==============================
   NAV BELT
   ============================== */
.navbelt{ background:#fff; border-top:1px solid #f2f4f7; border-bottom:1px solid #f2f4f7; }
.navbelt .nav .nav-link{
  color:#111; font-weight:400; padding:.9rem 1rem; letter-spacing:.1px;
}
.navbelt .nav .nav-link:hover,
.navbelt .nav .nav-link.active{ color: var(--ps-primary); }

/* All Departments */
.cats-trigger{
  border:1px solid var(--header-soft-border);
  background:#fff8ef;
  border-radius:12px;
  color:#111;
  font-weight:600;
}
.cats-trigger i{ color: var(--ps-primary); }
#browseToggle.btn{ padding:.55rem .85rem; border-radius:12px; }
#browseToggle .bi-chevron-down{ transition:transform .15s ease; }
.cats-wrap.show #browseToggle .bi-chevron-down{ transform:rotate(180deg); }

.cats-panel{
  position:absolute; left:0; top:calc(100% + 8px); width:320px; max-height:72vh; overflow:auto;
  background:#fff; border:1px solid #eef2f6; border-radius:12px; box-shadow:0 18px 40px rgba(2,6,23,.12);
  display:none; z-index:1060;
}
.cats-wrap.show .cats-panel{ display:block; }
.cats-item > a{
  display:flex; justify-content:space-between; align-items:center;
  padding:.6rem .9rem; color:#111; text-decoration:none; font-weight:500;
}
.cats-item > a:hover{ background:#fff7ed; }
.cats-sub{ display:none; padding:0 0 .6rem .9rem; }
.cats-item:hover .cats-sub{ display:block; }
.cats-sub a{ display:block; padding:.25rem 0; color:#555; text-decoration:none; font-weight:500; }
.cats-sub a:hover{ color: var(--ps-primary); }

/* Smooth height changes while scrolling on home */
.cats-panel { transition: max-height .2s ease; overflow: auto; overscroll-behavior: contain; }

/* ==============================
   MOBILE HEADER (≤ 991px)
   ============================== */
@media (max-width:991.98px){
  .m-band{ background:var(--ps-primary) !important; color:#fff; padding:.55rem 0; }

  .m-icon{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    width:auto; height:auto; padding:0;
  }
  .m-icon i{ color:#fff !important; font-size:22px; }
  .m-icon:hover{ opacity:.9; }

  .m-search-wrap{
    background:#fff; border:1px solid #e9edf3; border-radius:9999px;
    box-shadow:0 8px 20px rgba(17,24,39,.08);
    padding:.25rem; margin-top:.75rem;
  }
  .m-search-wrap input{ border:0; height:40px; box-shadow:none; }
  .m-search-wrap button{ border:0; height:40px; border-radius:9999px; }
}

/* Mobile offcanvas menu */
.off-menu{
  --bs-offcanvas-width:85vw;
  background: var(--ps-primary) !important;
  color:#fff;
}
.off-menu .btn-close{ filter:invert(1); opacity:.9; }
.off-header-logo{ height:28px; }
.off-search .form-control{ height:40px; border-radius:8px; }
.off-search .btn{ height:40px; border-radius:8px; }
.off-tabs .nav-link{ color:#fff; opacity:.85; font-weight:700; letter-spacing:.3px; }
.off-tabs .nav-link.active{ color:#fff; opacity:1; position:relative; }
.off-tabs .nav-link.active::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background:#fff;
}
.off-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0; color:#fff; text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.off-list a:hover{ color:#fff; opacity:.95; }
.off-sub a{ display:block; padding:.4rem 0 .4rem .75rem; font-weight:500; opacity:.9; border:0; }
.off-divider{ border-top:1px solid rgba(255,255,255,.25); margin:.75rem 0; }

/* ==============================
   Sections / Cards
   ============================== */
:root{ --ps-section-gap: clamp(32px, 5vw, 96px); }
.feature-bar, #shopByCategory, .section-trending{
  margin-top: var(--ps-section-gap) !important;
  margin-bottom: var(--ps-section-gap) !important;
}

/* Section spacing match */
.section-trending,
.section-latest,


.section-latest{ margin-top: var(--ps-section-gap); margin-bottom: var(--ps-section-gap); }

.card-soft{
  background: var(--ps-card);
  border:1px solid #eef2f6;
  box-shadow:0 8px 24px rgba(2,6,23,.05);
}
.badge-new{ background:#2ed573; }
.badge-hot{ background:#ffa502; }
.badge-sale{ background:#ff4757; }


/* Category rail (oval baseline) */
.cat-round{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  text-align:center; height:210px; padding:14px; border-radius:16px;
  background: linear-gradient(180deg,#fff 0%,#f9fbff 100%);
  box-shadow:0 10px 22px rgba(2,6,23,.05);
  transition: transform .30s ease, box-shadow .12s ease;
}
.cat-round:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(2,6,23,.06); }
.cat-oval{
  width:118px; height:118px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background: linear-gradient(90deg,var(--ps-primary),#ffba66); padding:8px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.12);
}
.oval-inner{ width:100%; height:100%; border-radius:9999px; background:#fff; display:flex; align-items:center; justify-content:center; padding:6px; overflow:hidden; }
.cat-oval img{ display:block; width:94px; height:94px; object-fit:cover; border-radius:9999px; }
.cat-round .title{ font-weight:700; font-size:1rem; color:#111; }
.cat-round .sub{ font-size:.8rem; color: var(--ps-muted); }

/* Horizontal rail */
.cat-rail{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scroll-behavior:smooth; scroll-padding:0 8px;
  user-select:none; -webkit-user-drag:none; touch-action: pan-x pan-y; cursor:grab;
}
.cat-rail::-webkit-scrollbar{ display:none; }
.cat-rail{ scrollbar-width:none; -ms-overflow-style:none; }
.cat-rail.is-dragging{ cursor:grabbing; }
.rail-item{ flex:0 0 180px; width:180px; scroll-snap-align:start; }

/* Keep circles perfectly round */
.cat-oval, .oval-inner{ aspect-ratio:1/1; height:auto; }
.cat-oval img{ width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; border-radius:9999px; }

/* Footer banner */
.footer-banner{ margin:0; margin-top: clamp(24px,4vw,56px); }
.footer-banner-img{
  display:block; width:100vw; max-width:100%; height:auto;
  margin-left:50%; transform:translateX(-50%); border-radius:0;
}


/* ===== Footer (refined, modern-dark) ===== */
.ps-footer{
  /* theme tokens */
  --ft-bg: #0e1117;
  --ft-elev: #121622;
  --ft-card: #141a28;
  --ft-text: #d7deea;
  --ft-muted:#9aa6b2;
  --ft-head:#ffffff;
  --ft-accent: var(--ps-primary);
  --ft-accent-2: #ffbd6a;
  --ft-border: rgba(255,255,255,.08);

  position: relative;
  background: radial-gradient(1200px 800px at 70% -200px, rgba(221,148,74,.10), transparent 60%) , var(--ft-bg);
  color: var(--ft-text);
  margin-top: clamp(32px, 6vw, 96px);
  padding: 54px 0 22px;
  font-size: 15px;
}

/* thin gradient band on top (reference vibe) */
.ps-footer::before{
  content:"";
  position: absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--ft-accent), var(--ft-accent-2));
  opacity:.85;
}

/* grid */
.ps-footer-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 30px;
}
@media (max-width: 991.98px){
  .ps-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px){
  .ps-footer{
    padding: 38px 0 18px;
    text-align:center;
  }
  .ps-footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ps-foot-block{ max-width: 520px; margin:0 auto; }
  .ps-foot-brand{ justify-content:center; }
  .ps-foot-list{ display:inline-block; text-align:left; }
  .ps-foot-contact{ display:inline-block; text-align:left; }
  .ps-foot-social{ justify-content:center; margin-top:.5rem; }
  .ps-foot-divider{ margin: 18px auto; width:84%; }
  .ps-foot-bottom{ justify-content:center; }
  .ps-bottom-line{ gap:.35rem; flex-wrap:wrap; justify-content:center; }
}
@media (min-width:576px) and (max-width:991.98px){
  .ps-foot-block{ max-width:640px; margin-left:auto; margin-right:auto; }
  .ps-foot-social{ justify-content:flex-start; }
}

.ps-foot-block{ min-width:0; }

/* brand + mini about */
.ps-foot-brand{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.25rem 0;
}
.ps-foot-brand strong{ font-size:1.2rem; letter-spacing:.2px; color:#fff; }
.ps-foot-brand img{ height:36px; width:auto; display:block; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.ps-foot-copy{
  color: var(--ft-muted); margin-top:.55rem; line-height:1.55;
}

/* section titles */
.ps-foot-title{
  color: var(--ft-head);
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:.95rem;
  margin: .15rem 0 .9rem 0;
  position:relative;
}
.ps-foot-title::after{
  content:"";
  display:block;
  width:36px; height:2px;
  margin-top:.45rem;
  background: linear-gradient(90deg, var(--ft-accent), var(--ft-accent-2));
  border-radius:2px;
}

/* links */
.ps-foot-list{ list-style:none; padding:0; margin:0; }
.ps-foot-list li{ margin:.45rem 0; }
.ps-foot-list a{
  color: var(--ft-text);
  text-decoration:none;
  position:relative;
  display:inline-flex; align-items:center; gap:.45rem;
}
.ps-foot-list a::before{
  content:"›"; font-weight:800; opacity:.5; transform:translateX(0);
  transition: transform .15s ease, opacity .15s ease;
}
.ps-foot-list a:hover{
  color: var(--ft-accent);
  text-decoration:none;
}
.ps-foot-list a:hover::before{ transform:translateX(3px); opacity:.9; }

/* contact list */
.ps-foot-contact{ list-style:none; padding:0; margin:0; }
.ps-foot-contact li{
  display:flex; gap:.6rem; align-items:flex-start; margin:.5rem 0;
  padding:.25rem 0;
}
.ps-foot-contact i{
  color: var(--ft-accent);
  margin-top:.1rem; font-size:1.05rem;
}
.ps-foot-contact a{
  color: var(--ft-text); text-decoration:none;
  border-bottom:1px dotted transparent;
  transition: border-color .15s ease, color .15s ease;
}
.ps-foot-contact a:hover{
  color: var(--ft-accent);
  border-color: var(--ft-accent);
}

/* socials */
.ps-foot-social{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.45rem; }
.ps-soc{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: linear-gradient(180deg, var(--ft-card), var(--ft-elev));
  border:1px solid var(--ft-border);
  color:#ffffff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.ps-soc:hover{
  transform: translateY(-2px);
  border-color: rgba(221,148,74,.45);
  background: #1b2234;
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  color: var(--ft-accent);
}

/* divider + bottom bar */
.ps-foot-divider{
  border:0; border-top:1px solid var(--ft-border);
  margin: 26px 0 16px;
}
.ps-foot-bottom{ display:flex; justify-content:center; }
.ps-bottom-line{
  display:flex; align-items:center; gap:.55rem; color: var(--ft-muted);
  font-size:.92rem;
}
.ps-bottom-line a{ color: var(--ft-text); text-decoration:none; }
.ps-bottom-line a:hover{ color: var(--ft-accent); text-decoration: underline; }
.ps-bottom-line .sep{ opacity:.6; }

/* optional small payment row if you add logos later */
.ps-payrow{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:.6rem;
  opacity:.9;
}
.ps-payrow img{
  height:22px; width:auto; display:block; filter: grayscale(15%) contrast(105%);
  opacity:.9;
}

/* ==============================
   Mobile bottom nav
   ============================== */
.mbottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:grid; grid-template-columns:repeat(5,1fr);
  background: var(--ps-primary) !important; color:#fff; border-top:1px solid rgba(0,0,0,.06);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 16px rgba(0,0,0,.08);
}
.mbottom-nav .mbitem{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; gap:4px; min-height:48px; line-height:1; font-weight:600;
}
.mbottom-nav .mbitem i{ font-size:22px; }
.mbottom-nav .mbitem span{ font-size:12px; }
.mbottom-nav .mbitem.active{ color:#fff9f2; }
.mbottom-nav .mbadge{
  position:absolute; top:2px; right:22%; transform:translate(50%,-40%);
  background:#dc3545; color:#fff; font-size:10px; padding:2px 6px; border-radius:999px; line-height:1;
}
@media (max-width:991.98px){ body{ padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); } }
@media (min-width:992px){ .mbottom-nav{ display:none; } body{ padding-bottom:0 !important; } }

/* ==============================
   Misc polish
   ============================== */
section.mb-5{ scroll-margin-top:84px; }
@media (min-width:992px){
  .row.g-4 > [class*="col-lg-3"] .product-card{ min-height:100%; }
}
@media (min-width:992px){
  #pd-main{ max-height:390px; width:100%; height:auto; object-fit:contain; display:block; }
}

/* ===== Header search: suggestions ===== */
.ps-suggest {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 2000;
  background: #fff;
  border: 1px solid var(--search-border);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  overflow: hidden;
  padding: 6px;
  max-height: 70vh;
}
.ps-sg-header, .ps-sg-footer {
  padding: .5rem .75rem;
  background: #fff;
  border-bottom: 1px solid #eef2f6;
}
.ps-sg-footer { border-top: 1px solid #eef2f6; border-bottom: 0; }
.ps-sg-list { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; }
.ps-sg-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; text-decoration: none; }
.ps-sg-item:hover, .ps-sg-item[aria-selected="true"] { background: #fff7ed; }
.ps-sg-thumb { width: 48px; height: 48px; border-radius: 10px; background:#fff; border:1px solid #eef2f6; object-fit: contain; }
.ps-sg-name { font-weight: 600; color: #111; line-height: 1.2; }
.ps-sg-price { margin-left: auto; font-weight: 700; color: var(--ps-primary); }
.ps-sg-empty { padding: .75rem; color: #6b7280; }
@media (max-width: 991.98px){
  .m-search-wrap { position: relative; }
  .ps-suggest{
    max-height: 50vh; max-height: 50svh; max-height: 50dvh;
    overflow: auto; overscroll-behavior: contain;
  }
}

/* Body-level fixed suggest (desktop-proof) */
.ps-suggest-fixed{
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  max-height: 70vh;
  overflow: auto;
  padding: 6px;
}
.ps-suggest-fixed .item{
  display:grid; grid-template-columns:48px 1fr auto; gap:10px;
  align-items:center; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:#111;
}
.ps-suggest-fixed .item:hover,
.ps-suggest-fixed .item.active{ background:#fff8ef; }
.ps-suggest-fixed .thumb{ width:48px; height:48px; object-fit:cover; border-radius:8px; background:#f8fafc; }
.ps-suggest-fixed .name{ font-weight:600; line-height:1.25; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ps-suggest-fixed .price{ font-weight:700; }



/* Section headers (title chip) */
.section-head {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  justify-content: flex-start;
}
.section-head h4 { margin: 0; text-align: left; }
.section-head .title-chip{
  display:inline-block;
  color:#fff;
  padding:.40rem .90rem;
  border-radius:.6rem;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  border:1px solid rgba(255,255,255,.18);
  max-width:100%;
  white-space:nowrap;
}
.section-head .chip-orange{
  background: var(--ps-primary) !important;
  box-shadow: 0 6px 18px var(--ps-primary-soft-2) !important;
}

/* Outline-primary to black on hover */
.btn-outline-primary{
  color: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: var(--ps-primary-hover) !important;
  border-color: var(--ps-primary-hover) !important;
  color: #fff !important;
}
.btn-outline-primary:active{
  background: var(--ps-primary-hover) !important;
  border-color: var(--ps-primary-hover) !important;
  color: #fff !important;
}

/* === Category rail: full brand tiles (optional keep) === */
.cat-rail .rail-item{ flex: 0 0 160px; width: 160px; scroll-snap-align: start; }
.cat-round{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.55rem; padding:12px;
  background: linear-gradient(135deg, var(--ps-primary) 0%, #ffbd6a 100%) !important;
  border:1px solid #f1d2b4 !important;
  border-radius:16px !important;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transition: transform .20s ease, box-shadow .15s ease;
}
.cat-round:hover{ transform: translateY(-3px); box-shadow:0 14px 30px rgba(2,6,23,.10); }
.cat-oval{
  width:100%; aspect-ratio: 1 / 1; height:auto !important; padding:0;
  border-radius:12px !important; overflow:hidden;
  background: rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow: inset 0 1px 4px rgba(255,255,255,.12);
  margin-bottom:.45rem;
}
.cat-rail .oval-inner{
  width:100%; height:100%; border-radius:12px; padding:0; background: transparent !important;
}
.cat-oval img{
  width:100% !important; height:100% !important; object-fit:contain !important;
  border-radius:0 !important; padding:10px; image-rendering:auto;
}
.cat-round .title{
  background:transparent !important; font-weight:800; font-size:.95rem;
  color:#fff !important; white-space:normal; margin:0; line-height:1.2;
  text-shadow:0 1px 0 rgba(0,0,0,.06);
}
.cat-round .sub{
  background:transparent !important; font-size:.80rem; color:#fff !important;
  margin:0; line-height:1.2; opacity:.95;
}
@media (max-width:575.98px){
  .cat-rail .rail-item{ flex-basis:140px; width:140px; }
}
.cat-rail > .rail-item .cat-oval{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Reusable accent helpers */
.btn-accent{
  background: var(--ps-primary) !important;
  border:2px solid var(--ps-primary) !important;
  color:#fff !important;
  font-weight:700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.btn-accent:hover,
.btn-accent:active,
.btn-accent.active{
  background: var(--ps-primary-hover) !important;
  border-color: var(--ps-primary-hover) !important;
  color:#fff !important;
}
.btn-accent:focus{ box-shadow:0 0 0 3px var(--ps-primary-soft) !important; }

.btn-outline-accent{
  background:transparent !important;
  border:2px solid var(--ps-primary) !important;
  color: var(--ps-primary) !important;
  font-weight:700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.btn-outline-accent:hover,
.btn-outline-accent:active,
.btn-outline-accent.active{
  background: var(--ps-primary-hover) !important;
  border-color: var(--ps-primary-hover) !important;
  color:#fff !important;
}
.btn-outline-accent:focus{ box-shadow:0 0 0 3px var(--ps-primary-soft) !important; }



/* ===== Brands loop ribbon ===== */
.section-brands .title-chip.chip-orange{
  background: #fff6eb; border: 1px solid #ffedd9; color: #c76a00;
}
.brand-strip{
  --gap: 28px; --speed: 28s;
  position: relative; overflow: hidden; padding: 10px 0;
  border-radius: 10px; background: #fff;
}
.brand-track{
  display: flex; align-items: center; gap: var(--gap);
  width: max-content; animation: brand-marquee var(--speed) linear infinite;
  will-change: transform;
}
.brand-strip:hover .brand-track{ animation-play-state: paused; }
.brand{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; height: 64px; padding: 8px 14px; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.brand:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.brand img{
  max-height: 50px; max-width: 120px; width: auto; height: auto;
  object-fit: contain; filter: saturate(.98) contrast(1.02);
}
@media (max-width: 575.98px){
  .brand{ min-width: 100px; height: 56px; padding: 6px 10px; }
  .brand img{ max-height: 34px; max-width: 100px; }
  .brand-strip{ --gap: 18px; --speed: 22s; }
}
@keyframes brand-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== WhatsApp FAB ===== */
.whatsapp-fab {
  position: fixed;
  right: 14px;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 14px);
  z-index: 1050;
  display: inline-flex;
  width: 54px; height: 54px;
  align-items: center; justify-content: center;
  border-radius: 9999px;
  background: #25D366;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  border: 0; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.whatsapp-fab i { font-size: 26px; line-height: 1; }
.whatsapp-fab:hover { transform: translateY(-1px); filter: brightness(0.98); }
.whatsapp-fab:active { transform: translateY(0); }

/* Bottom nav polish */
.mbottom-nav .mbitem i { font-size: 22px; }
.mbottom-nav .mbitem span { font-size: 12px; }
.mbottom-nav .mbitem.active i,
.mbottom-nav .mbitem.active span { opacity: 1; filter: brightness(1.12); }
.mbottom-nav .mbitem:not(.active) { opacity: 0.95; }
.mbottom-nav .mbitem:active { transform: translateY(1px); }

/* Tiny screens safe-area */
@media (max-width: 360px) {
  .whatsapp-fab { right: 10px; bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 10px); }
}



/*==== hero full size == */



/* --- Reserve left space when categories drawer is open (desktop) --- */
@media (min-width: 992px){
  :root { --cats-pad: 360px; }
  body.cats-open #heroArea{
    padding-left: var(--cats-pad);
    transition: padding-left .2s ease;
  }
}

/* --- Full-bleed wrapper (breaks out of .container) --- */
.full-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* --- Hero image --- */
#heroArea{ position:relative; }

.hero-bleed{
  position:relative;
  overflow:hidden;
}

.hero-bleed .hero-img{
  display:block;
  width:100%;
  height:520px;
  object-fit:cover;
}

@media (max-width: 991.98px){
  .hero-bleed .hero-img{ height:360px; }
}

/* --- Overlay (kept for opacity control via inline style, but not dark) --- */
.hero-bleed .hero-dim{
  position:absolute;
  inset:0;
  background:transparent;       /* no black overlay */
  pointer-events:none;
}

/* --- Text block container --- */
.hero-bleed .hero-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:clamp(16px, 6vw, 72px);
}

.hero-box{
  max-width:520px;
}

/* Typography / spacing */
.hero-kicker{
  font-size:clamp(13px,1.6vw,16px);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}

.hero-headline{
  font-weight:900;
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.1;
  margin:0 0 .75rem 0;
}

.hero-sub{
  font-size:clamp(15px,2vw,18px);
  margin-bottom:1.25rem;
}

.hero-cta.btn{
  font-weight:800;
  padding:.7rem 1.4rem;
  border-radius:12px;
  background:var(--ps-primary);
  border-color:var(--ps-primary);
  color:#fff;
}
.hero-cta.btn:hover{
  background:#000;
  border-color:#000;
  color:#fff;
}

/* --- Align helpers (PHP adds hero-align-left/center/right) --- */
.hero-align-left{
  justify-content:flex-start;
  text-align:left;
}
.hero-align-left .hero-box{
  margin-left:clamp(24px, 9vw, 220px);  /* pushes block further left */
}

.hero-align-center{
  justify-content:center;
  text-align:center;
}

.hero-align-right{
  justify-content:flex-end;
  text-align:right;
}
.hero-align-right .hero-box{
  margin-right:clamp(24px, 9vw, 220px);
}

/* On small screens, always center the text and widen a bit */
@media (max-width: 767.98px){
  .hero-bleed .hero-text{
    justify-content:center;
    text-align:center;
  }
  .hero-box{
    max-width:90vw;
    margin:0 auto;
  }
}

/* Carousel arrows */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  width:6%;
  opacity:.9;
}

/* --- LEFT-ALIGNED HERO TEXT: keep it in the left beige block --- */
.hero-align-left{
  justify-content:flex-start;
  text-align:left;
}

/* Put the text column in a fixed band on the left */
.hero-align-left .hero-box{
  /* narrow column so it stays in the beige area */
  max-width: 420px;

  /* distance from very left edge of the screen */
  margin-left: clamp(32px, 6vw, 90px);
}

/* On large desktops you can push it even a bit more left by reducing this
   number if you want:
   margin-left: clamp(24px, 4vw, 70px);
*/

/* Mobile: center everything again */
@media (max-width: 767.98px){
  .hero-bleed .hero-text{
    justify-content:center;
    text-align:center;
  }
  .hero-box{
    max-width:90vw;
    margin:0 auto;
  }
}


/* ===== Search suggest dropdown ===== */
.ps-suggest{
  position:absolute;             /* it's appended next to the form wrapper */
  top: 100%;
  left: 0;
  right: 0;                      /* same width as the search area */
  margin-top: .25rem;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(2,6,23,.12);
  z-index: 1060;
  max-height: 60vh;
  overflow:auto;
  padding: .35rem;
}

.ps-suggest .item{
  display:grid;
  grid-template-columns: 48px 1fr auto;  /* thumb | name | price */
  gap:.75rem;
  align-items:center;
  padding:.5rem .6rem;
  border-radius:10px;
  text-decoration:none;
  color:#111;
}

.ps-suggest .item:hover,
.ps-suggest .item.active{
  background:#f8fafc;
}

.ps-suggest .thumb{
  width:48px;
  height:48px;
  object-fit:contain;            /* keep product aspect, no crop */
  border-radius:8px;
  background:#fff;
  border:1px solid #f1f5f9;
}

.ps-suggest .name{
  font-size:.95rem;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ps-suggest .price{
  margin-left:.5rem;
  font-weight:700;
  font-size:.95rem;
  color:#111;
  white-space:nowrap;
}

/* Compact on very small screens */
@media (max-width: 480px){
  .ps-suggest .item{
    grid-template-columns: 40px 1fr auto;
    gap:.5rem;
    padding:.45rem .5rem;
  }
  .ps-suggest .thumb{ width:40px; height:40px; }
  .ps-suggest .name{ font-size:.9rem; }
  .ps-suggest .price{ font-size:.9rem; }
}

/* Dark-mode friendly (optional) */
@media (prefers-color-scheme: dark){
  .ps-suggest{
    background:#0b0f14;
    border-color:#1f2937;
    box-shadow:0 16px 36px rgba(0,0,0,.45);
  }
  .ps-suggest .item{ color:#e5e7eb; }
  .ps-suggest .item:hover,
  .ps-suggest .item.active{ background:#0f1720; }
  .ps-suggest .thumb{ background:#0b0f14; border-color:#111827; }
  .ps-suggest .price{ color:#fff; }


    #ceylon-gewuerze{
      background:#ffffff;
    }
    #ceylon-gewuerze .cg-wrap{
      max-width:1000px;
      margin:0 auto;
      padding:0 1.5rem;
      text-align:center;
    }
    #ceylon-gewuerze .cg-title{
      font-size:clamp(30px,3.2vw,42px);
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#111827;
      margin-bottom:1.75rem;
    }
    #ceylon-gewuerze .cg-body{
      font-size:1rem;
      line-height:1.8;
      color:#4b5563;
      max-width:60rem;
      margin:0 auto;
    }