/* =====================================================================
   ORGANIC THEME — loads after gg-theme.css (wins).
   Desktop is matched element-by-element to ghorerbazar.com measurements
   (layout, sizes, colours, fonts — no copied logo/images/text).
   Colours apply site-wide; layout blocks are desktop-only (≥992px) so the
   existing mobile UI stays as it is.
   ===================================================================== */
:root {
  --og-orange: #F48721;
  --og-orange-dark: #DE7412;
  --og-green: #34BE82;
  --og-nav: #041F1E;
  --og-cream: #FBF9F5;
  --og-ink: #222831;
  --og-text: #666666;
  --og-muted: #AAAAAA;
  --og-gray: #F5F5F5;
  --og-red: #FF3F33;
  --og-border: #CCCCCC;
  --primary: #F48721 !important;
  --primary-dark: #DE7412 !important;
  --primary-light: #FDE7D2 !important;
  --primary-rgb: 244, 135, 33 !important;
  --accent: #F48721 !important;
  --secondary: #041F1E !important;
  --success: #34BE82 !important;
  --bg-body: #FBF9F5 !important;
  --font-primary: 'Open Sans', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
  --font-heading: 'Open Sans', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}

/* ---------- Typography + page ---------- */
body {
  font-family: 'Open Sans', 'Hind Siliguri', sans-serif !important;
  color: var(--og-text);
  background: var(--og-cream) !important;
}
h1, h2, h3, h4, h5, h6, .section-title, .product-name, .btn, button, input, select, textarea {
  font-family: 'Open Sans', 'Hind Siliguri', sans-serif !important;
}
a { color: inherit; }

/* ---------- Section heading: "Title ............ VIEW ALL ITEMS →" ---------- */
.section-title { color: var(--og-ink) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0; line-height: 24px !important; }
.section-title span { color: var(--og-ink) !important; }
.section-subtitle { display: none !important; }
.btn-see-more {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--og-orange) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 14.4px !important;
  text-transform: uppercase;
  letter-spacing: .7px;
  box-shadow: none !important;
}
.btn-see-more i { font-size: 17px; line-height: 1; }
.btn-see-more:hover { color: var(--og-orange-dark) !important; }

/* ---------- Product card (all screens: colours) ---------- */
.product-card { background: #fff !important; box-shadow: none !important; }
.product-category-label { display: none !important; }
.product-card .product-name, .product-card .product-name a { color: var(--og-ink) !important; font-weight: 500 !important; }
.product-card .product-name a:hover { color: var(--og-orange) !important; }
.product-price, .product-card .product-price { color: var(--og-orange) !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; }
.product-original-price { color: var(--og-muted) !important; font-family: 'Poppins', sans-serif !important; font-weight: 400 !important; text-decoration: line-through; }
.product-badge, .product-badge.sale {
  background: var(--og-green) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.product-flag {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 3;
  background: var(--og-orange);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
.card-stock-badge { background: var(--og-nav) !important; color: #fff !important; }
.product-rating .bi-star-fill, .product-rating .bi-star-half { color: #F6A609 !important; }
.product-card-actions { display: flex; gap: 8px; width: 100%; }

/* Add To Cart = orange outline (cart icon before text), fills on hover */
.product-card .add-to-cart-btn, .product-card .btn-global {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 6px;
  background: transparent !important;
  color: var(--og-orange) !important;
  border: 1px solid var(--og-orange) !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 16.8px !important;
  min-height: 40px;
  box-shadow: none !important;
  text-transform: none !important;
}
.product-card .add-to-cart-btn i { font-size: 14px; }
.product-card .add-to-cart-btn:hover:not([disabled]) { background: var(--og-orange) !important; color: #fff !important; }
.product-card .add-to-cart-btn[disabled] { border-color: #ddd !important; color: var(--og-muted) !important; }
.product-card .tp-buy-now-btn { background: var(--og-orange) !important; color: #fff !important; }
/* Buy now hover = dark green-black, like theirs */
.product-card .tp-buy-now-btn:hover { background: var(--og-nav) !important; border-color: var(--og-nav) !important; color: #fff !important; }

/* "Save Tk. X" lime pill under the Top Selling price */
.tp-save-pill {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  background: #BFDB38;
  color: var(--og-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  padding: 4px 8px;
  border-radius: 99px;
}

/* Card qty stepper (replaces Add To Cart once the product is in the cart) */
.product-card .add-to-cart-btn.og-hidden { display: none !important; }
.og-qty {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 40px;
  border: 1px solid var(--og-orange);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.og-qty button {
  flex: 0 0 40px;
  width: 40px;
  border: 0;
  background: var(--og-orange);
  color: #fff;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.og-qty button:hover { background: var(--og-nav); }
.og-qty-val { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--og-ink); font-size: 14px; font-weight: 700; }
.tp-horizontal .og-qty { width: 132px; flex: 0 0 132px; }

/* Generic buttons (product page, checkout, etc.) */
.btn-global, .btn-global-dark-red, .btn-sticky-cart { background: var(--og-orange) !important; border-color: var(--og-orange) !important; color: #fff !important; border-radius: 6px !important; }
.btn-global:hover, .btn-global-dark-red:hover { background: var(--og-orange-dark) !important; }
.btn-global-outline { background: transparent !important; border: 1px solid var(--og-orange) !important; color: var(--og-orange) !important; border-radius: 6px !important; }
.btn-global-outline:hover { background: var(--og-orange) !important; color: #fff !important; }

/* Hero slides use bright banners → no dark overlay, dark text on the left */
.hero-slide .slide-overlay { background: transparent !important; opacity: 0 !important; }
.hero-slide .slide-content { text-align: left !important; margin-left: 6% !important; margin-right: auto !important; max-width: 46% !important; }
.hero-slide .slide-title { color: var(--og-ink) !important; text-shadow: none !important; }
.hero-slide .slide-desc { color: var(--og-text) !important; text-shadow: none !important; }
.hero-slide .slide-btn { margin-left: 0 !important; }

/* ---------- "Our Brands" logo cards ---------- */
.common-carousel-item.brand-logo-item { flex: 0 0 calc(40% - 8px) !important; max-width: calc(40% - 8px) !important; min-width: 0 !important; }
.brand-logo-tile { display: flex; align-items: center; justify-content: center; height: 72px; background: #fff; border-radius: 8px; padding: 10px 16px; text-decoration: none; transition: box-shadow .2s ease; }
.brand-logo-tile:hover { box-shadow: 0 4px 16px rgba(34, 40, 49, .08); }
.brand-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logo-name { color: var(--og-nav); font-size: 18px; font-weight: 700; letter-spacing: .3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo-tile:hover .brand-logo-name { color: var(--og-orange); }

/* ---------- Full-width promo banner ---------- */
.promo-wide-banner { display: block; border-radius: 12px; overflow: hidden; line-height: 0; }
.promo-wide-banner img { width: 100%; height: auto; aspect-ratio: 1308 / 340; object-fit: cover; display: block; transition: transform .4s ease; }
a.promo-wide-banner:hover img { transform: scale(1.015); }

/* Floating cart + scroll-to-top are desktop widgets (mobile already has the cart in the bottom bar) */
@media (max-width: 991px) {
  .floating-cart, .og-scroll-top { display: none !important; }
}

/* =====================================================================
   DESKTOP (≥ 992px) — element-by-element ghorerbazar match
   ===================================================================== */
@media (min-width: 992px) {
  /* 1348 container with 20px side padding → 1308 content (like theirs) */
  /* fluid like theirs: 95% up to 1600px viewport, 80% above (1899 → 1519 container / 1479 content); 20px side padding */
  .container { max-width: 95% !important; padding-left: 20px !important; padding-right: 20px !important; }
}
@media (min-width: 1601px) {
  .container { max-width: 80% !important; }
}
@media (min-width: 992px) {

  /* ---------- HEADER (87px): logo · search · Track Order / Sign In / Wishlist / Cart / More ---------- */
  /* In normal flow on desktop (scrolls away); organic.js pins only the menu bar once it reaches the top */
  /* backdrop-filter would make the header the containing block of the fixed menu bar (bar would scroll away with it) */
  .main-header { position: relative !important; top: auto !important; background: #fff !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .main-header.og-nav-stuck { padding-bottom: 50px; }
  .mega-nav.og-nav-fixed { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; }
  /* sticky blocks only need to clear the 50px bar now (were tuned for the old full fixed header) */
  .cart-page .cart-summary, .product-page-gallery { top: 70px !important; }
  .main-header > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  .main-header .header-top { padding: 16px 0 17px !important; min-height: 87px; display: flex; align-items: center; }
  .main-header .header-top > .d-flex { width: 100%; gap: 0 !important; min-height: 54px; }
  .main-header .header-logo { flex: 0 0 auto; margin-right: 20px; min-height: 48px; }
  .main-header .header-logo img { height: 48px !important; max-height: 48px !important; width: auto !important; max-width: none !important; }
  .main-header .logo-text { color: var(--og-ink) !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: .3px; text-transform: none !important; line-height: 1.1; }
  .main-header .logo-text::first-letter { color: var(--og-orange) !important; }
  .main-header .logo-tagline { color: var(--og-text) !important; font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }

  .main-header .header-top .search-wrapper#searchWrapper {
    flex: 0 0 446px !important;
    width: 446px !important;
    max-width: 446px !important;
    margin: 0 auto !important;
    background: var(--og-gray) !important;
    border: 0 !important;
    border-radius: 8px !important;
    height: 47px;
    position: relative;
    box-shadow: none !important;
  }
  .main-header #searchWrapper .search-input {
    background: transparent !important;
    border: 1px solid transparent !important;
    height: 47px !important;
    padding: 9px 42px 9px 16px !important;
    font-size: 14px !important;
    line-height: 21px !important;
    color: var(--og-ink) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .main-header #searchWrapper .search-input::placeholder { color: #8A8F98; }
  .main-header #searchWrapper .search-btn {
    position: absolute !important;
    right: 14px; top: 50%; transform: translateY(-50%);
    background: transparent !important;
    border: 0 !important;
    width: 22px !important; height: 25px !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .main-header #searchWrapper .search-btn i { color: #252A34 !important; font-size: 20px !important; }

  .main-header .header-icons { gap: 23px !important; align-items: flex-start; margin-left: 20px; flex: 0 0 auto; }
  .main-header .header-icons a.header-label-link[aria-label="Wishlist"] { display: flex !important; }
  .header-label-link {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border: 0;
    padding: 0;
    height: 42px;
    color: var(--og-ink) !important;
    text-decoration: none;
    cursor: pointer;
  }
  .header-label-link i { font-size: 22px; line-height: 22px; height: 22px; color: var(--og-ink); }
  .header-label-link span { font-size: 14px; font-weight: 400; line-height: 14px; margin-top: 6px; white-space: nowrap; color: var(--og-ink); }
  .header-label-link:hover, .header-label-link:hover i, .header-label-link:hover span { color: var(--og-orange) !important; }

  /* Cart: dark icon + round orange count, dark "Cart" label */
  .main-header .header-cart-wrap { flex-direction: column; align-items: center !important; height: 42px !important; background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
  .main-header .header-cart-wrap .header-icon-btn {
    background: transparent !important; border: 0 !important; padding: 0 !important;
    width: 22px !important; height: 22px !important; min-width: 0 !important;
    position: relative; line-height: 22px;
  }
  .main-header .header-cart-wrap .header-icon-btn i { color: var(--og-ink) !important; font-size: 22px !important; line-height: 22px; }
  .main-header .header-cart-wrap .badge-count {
    display: flex !important;
    align-items: center; justify-content: center;
    position: absolute !important;
    top: -2px !important; right: -8px !important; left: auto !important;
    width: 16px !important; height: 16px !important; min-width: 16px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--og-orange) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
  }
  .main-header .header-cart-wrap .header-cart-label { display: block !important; color: var(--og-ink) !important; font-size: 14px; line-height: 14px; margin-top: 6px; }
  .main-header .header-cart-wrap:hover .header-cart-label, .main-header .header-cart-wrap:hover .header-icon-btn i { color: var(--og-orange) !important; }

  /* More dropdown */
  .header-more { position: relative; }
  .header-more .header-label-link { display: flex !important; }
  .header-more-menu {
    display: none;
    position: absolute;
    right: 0; top: calc(100% + 10px);
    min-width: 190px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(34, 40, 49, .12);
    padding: 8px 0;
    z-index: 1200;
  }
  .header-more::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
  .header-more:hover .header-more-menu, .header-more:focus-within .header-more-menu { display: block; }
  .header-more-menu a { display: block; padding: 9px 18px; color: var(--og-ink); font-size: 14px; text-decoration: none; }
  .header-more-menu a:hover { background: #FFF6EE; color: var(--og-orange); }

  /* ---------- CATEGORY MENU BAR (50px, #041F1E, white 14px links, 30px apart) ---------- */
  .mega-nav { background: var(--og-nav) !important; border: 0 !important; box-shadow: none !important; }
  .mega-nav .container-mobile-nav { padding-top: 0 !important; padding-bottom: 0 !important; }
  .mega-nav .nav { gap: 30px !important; justify-content: flex-start !important; flex-wrap: nowrap !important; }
  .mega-nav .nav > li { margin: 0 !important; padding: 0 !important; }
  .mega-nav, .mega-nav .navbar-collapse, .mega-nav .nav { min-height: 0 !important; }
  .mega-nav .nav { width: 100%; }
  .mega-nav .nav > li > .nav-link {
    display: flex !important;
    align-items: center;
    height: 50px;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
    padding: 0 !important;
    letter-spacing: -0.126px;
    text-transform: capitalize;
    background: transparent !important;
    white-space: nowrap;
  }
  /* hover = orange text only (gg-theme adds a #F5F6F8 box + a 2px ::after underline — both removed) */
  .mega-nav .nav > li > .nav-link:hover, .mega-nav .nav > li:hover > .nav-link,
  .mega-nav .nav-item:hover > .nav-link, .mega-nav .nav-link:hover { color: var(--og-orange) !important; background: transparent !important; }
  .mega-nav .nav > li > .nav-link::after, .mega-nav .nav > li > .nav-link::before { display: none !important; content: none !important; }
  .mega-nav .mega-caret { color: #fff !important; font-size: 9px !important; margin-left: 5px !important; }
  .mega-nav .nav > li:hover .mega-caret { color: var(--og-orange) !important; }
  /* Sub-category dropdown: 215px white list, 10px vertical padding, soft shadow; hovered row = orange bg + white text */
  .mega-nav .has-mega { position: relative; }
  .mega-nav .mega-dropdown.mega-cols-1 {
    width: auto !important;
    min-width: 215px !important;
    left: 0 !important; right: auto !important;
    top: 100% !important;
    padding: 10px 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 35px rgba(0, 0, 0, .1) !important;
  }
  .mega-nav .mega-dropdown .mega-list { columns: auto !important; column-count: 1 !important; margin: 0 !important; padding: 0 !important; }
  .mega-nav .mega-dropdown .mega-list > li { margin: 0 !important; padding: 0 !important; break-inside: avoid; }
  .mega-nav .mega-dropdown .mega-list > li > a {
    display: block !important;
    padding: 8px 19px !important;
    color: var(--og-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 14px !important;
    background: transparent !important;
    border-radius: 0 !important;
    white-space: nowrap;
  }
  .mega-nav .mega-dropdown .mega-list > li:hover { background: var(--og-orange) !important; }
  .mega-nav .mega-dropdown .mega-list > li:hover > a, .mega-nav .mega-dropdown .mega-list > li > a:hover { color: #fff !important; background: transparent !important; }
  .mega-nav .mega-dropdown::before { height: 0 !important; }

  /* ---------- HERO: 865 slider + 423 side banner, 347px, 8px corners ---------- */
  .hero-section { padding-top: 20px !important; padding-bottom: 0 !important; margin-top: 0 !important; }
  .hero-section > .container { padding-top: 0 !important; }
  .hero-section .row { --bs-gutter-x: 20px; --bs-gutter-y: 0; }
  .hero-slider-wrap, .hero-side-banner { border-radius: 8px !important; box-shadow: none !important; }
  .hero-slider-wrap { height: 347px; }
  /* with a side banner the slider keeps their 865:347 ratio (979×392 on a 1479 container); side banner = same height */
  .col-lg-8 > .hero-block .hero-slider-wrap { height: auto; aspect-ratio: 865 / 347; }
  .hero-slider, .hero-slide { height: 100% !important; min-height: 0 !important; }
  .hero-side-banner { height: 100% !important; }
  /* Hero arrows: 40px white squares with an orange chevron, shown on hover; hovered arrow turns orange */
  .hero-slider .slider-arrow {
    width: 40px !important; height: 40px !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--og-orange) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 20px !important;
    top: 50% !important; transform: translateY(-50%) !important;
    opacity: 0;
    transition: opacity .25s ease, background .2s ease, color .2s ease;
    display: flex !important; align-items: center; justify-content: center;
  }
  .hero-slider .slider-arrow.prev { left: 0 !important; }
  .hero-slider .slider-arrow.next { right: 0 !important; }
  .hero-block:hover .slider-arrow { opacity: 1; }
  .hero-slider .slider-arrow:hover { background: var(--og-orange) !important; color: #fff !important; }
  /* Hero dots: 8px, white @ .8 inside the banner (bottom 16 / left 24); active = orange */
  .hero-block .slider-dots { position: absolute !important; left: 24px !important; bottom: 16px !important; top: auto !important; transform: none !important; display: flex; gap: 0; z-index: 5; }
  .hero-block .slider-dot { width: 8px !important; height: 8px !important; margin: 5px !important; padding: 0 !important; border-radius: 50% !important; background: #fff !important; border: 1px solid #fff !important; opacity: .8; }
  .hero-block .slider-dot.active { background: var(--og-orange) !important; border-color: var(--og-orange) !important; opacity: 1; width: 8px !important; }
  .slide-btn { background: var(--og-orange) !important; color: #fff !important; border-radius: 6px !important; }
  .slide-tag { background: rgba(244, 135, 33, .92) !important; color: #fff !important; }
  .trust-badges-section { display: none !important; }

  /* No scroll-in slide animation (it offset headings by 30px until scrolled) */
  .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Section rhythm: 16px top/bottom like theirs */
  .section-spacing, .section-spacing-compact { padding-top: 16px !important; padding-bottom: 16px !important; }
  section .d-flex.justify-content-between:has(.section-title) { align-items: center !important; margin-bottom: 16px !important; padding-bottom: 12px; }
  /* Section head under-rule: 1px #DDD line with a 40×4 orange accent at its start (not on centred/plain heads) */
  section:not(.tp-horizontal):not(.featured-cats-section) .d-flex.justify-content-between:has(.section-title) { position: relative; border-bottom: 1px solid #DDD; }
  section:not(.tp-horizontal):not(.featured-cats-section) .d-flex.justify-content-between:has(.section-title)::before {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 40px; height: 4px; background: var(--og-orange);
  }

  /* Product-slider pagination dots (built by index.php script): 8px, orange ring; active = filled */
  .og-carousel-dots { display: flex; justify-content: center; margin-top: 15px; min-height: 18px; }
  .og-carousel-dots button { width: 8px; height: 8px; margin: 5px; padding: 0; border-radius: 50%; border: 1px solid var(--og-orange); background: transparent; cursor: pointer; }
  .og-carousel-dots { align-items: center; }
  .og-carousel-dots button { transition: width .2s ease, background .2s ease; }
  .og-carousel-dots button:hover { background: var(--og-orange); }
  /* active = elongated 19×11 orange pill */
  .og-carousel-dots button.active { background: var(--og-orange); width: 19px; height: 11px; border-radius: 12px; }

  /* ---------- Floating cart (right edge, vertically centred): orange "bag / N Items" + white price ---------- */
  .floating-cart, .floating-cart.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !important;
    width: 66px; min-width: 66px !important;
    background: var(--og-orange) !important;
    border: 0 !important;
    border-radius: 6px 0 0 6px !important;
    box-shadow: 0 12px 24px rgba(34, 87, 122, .24) !important;
    font-family: 'Open Sans', sans-serif !important;
  }
  .floating-cart.show:hover, .floating-cart:hover { transform: translateY(-50%) !important; }
  .floating-cart-top { background: transparent !important; color: #fff !important; padding: 12px !important; gap: 2px !important; }
  .floating-cart-icon { font-size: 20px !important; line-height: 24px !important; margin: 0 !important; color: #fff; }
  .floating-cart-items { color: #fff !important; font-size: 12px !important; line-height: 13.2px !important; letter-spacing: 0 !important; }
  .floating-cart-total {
    background: #fff !important;
    color: var(--og-orange) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 16.8px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 0 0 0 6px !important;
    white-space: nowrap;
  }

  /* ---------- Scroll-to-top: 36px orange circle + progress ring (right 60 / bottom 44) ---------- */
  .og-scroll-top {
    position: fixed; right: 60px; bottom: -60px; z-index: 999;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: bottom .3s ease, opacity .3s ease;
    text-decoration: none;
  }
  .og-scroll-top.show { bottom: 44px; opacity: 1; }
  .og-scroll-top:hover { opacity: .8; }
  .og-scroll-top i {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--og-orange); border: 2px solid var(--og-orange); color: #fff; font-size: 14px; z-index: 1;
  }
  .og-scroll-top svg { position: absolute; width: 46px; height: 46px; top: 0; left: 0; transform: rotate(-90deg); z-index: 0; overflow: visible; }
  .og-scroll-top circle { stroke: var(--og-orange); stroke-width: 2px; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }

  /* ---------- FEATURED CATEGORIES: 8 visible × 146px, 142px r20 image, orange round arrows ---------- */
  section .featured-cats-header.d-flex.justify-content-between { margin-bottom: 32px !important; padding-bottom: 0 !important; }
  .featured-cats-header .section-title { font-size: 22px !important; font-weight: 500 !important; line-height: 26.4px !important; }
  .featured-cats-header .btn-see-more { display: none !important; }
  .featured-cats-slider { position: relative; }
  .featured-cats-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-rows: auto !important;
    grid-auto-columns: calc((100% - 140px) / 8) !important; /* 8 slots, 146 at 1308 → 167 at 1479 */
    gap: 0 20px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 !important;
  }
  .featured-cats-grid::-webkit-scrollbar { display: none; }
  .featured-cats-grid .category-card {
    width: 100%;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    scroll-snap-align: start;
  }
  /* includes the :hover selector — gg-theme's hover rule resets width/height to auto (tile shrank to 62px) */
  .featured-cats-grid .category-card .cat-icon,
  .featured-cats-grid .category-card:hover .cat-icon {
    width: 142px !important; height: 142px !important;
    max-width: none; aspect-ratio: auto;
    margin: 0 auto !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transform: none !important;
  }
  .featured-cats-grid .category-card .cat-icon img,
  .featured-cats-grid .category-card:hover .cat-icon img { width: 72% !important; height: 72% !important; object-fit: contain; transform: none !important; }
  /* the card itself doesn't move on hover (their tiles stay still; only the name turns orange) */
  .featured-cats-grid .category-card:hover { transform: none !important; }
  .featured-cats-grid .category-card:hover .cat-icon { background: #fff !important; transform: none !important; box-shadow: none !important; }
  .featured-cats-grid .category-card:hover .cat-name { color: var(--og-orange) !important; }
  .cat-nav.is-disabled { opacity: .35; pointer-events: none; }
  .featured-cats-grid .cat-name { margin-top: 10px !important; padding-bottom: 2px; color: var(--og-ink) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 19.2px !important; text-align: center; }
  .cat-nav {
    position: absolute;
    top: 71px; transform: translateY(-50%);
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: var(--og-orange);
    color: #fff;
    align-items: center; justify-content: center;
    font-size: 14px;
    z-index: 5;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  }
  .cat-nav-prev { left: -18px; }
  .cat-nav-next { right: -18px; }
  .cat-nav:hover { background: var(--og-orange-dark); }

  /* ---------- PRODUCT SLIDERS: 5 × (246 + 20 gap), flush to the container edge ---------- */
  .common-carousel-container { margin-left: 0 !important; margin-right: 0 !important; }
  .common-carousel-item {
    flex: 0 0 calc((100% - 80px) / 5) !important;
    max-width: calc((100% - 80px) / 5) !important;
    min-width: 0 !important;
    margin: 0 20px 0 0 !important;
  }
  .carousel-nav { background: #fff !important; color: var(--og-ink) !important; border: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .1) !important; }
  .carousel-nav:hover { background: var(--og-orange) !important; color: #fff !important; }

  /* ---------- PRODUCT CARD: white, 1px #CCC, r4, 8px pad, 228×205 image ---------- */
  .product-card {
    border: 1px solid var(--og-border) !important;
    border-radius: 4px !important;
    padding: 8px !important;
    overflow: hidden;
    transition: box-shadow .2s ease;
    display: flex !important;
    flex-direction: column;
  }
  .product-card:hover { box-shadow: 0 6px 18px rgba(34, 40, 49, .08) !important; transform: none !important; }
  .product-card .product-image-wrap { padding: 0 !important; padding-top: 89.9% !important; border-radius: 0 !important; background: #fff !important; }
  .product-card .product-image { border-radius: 0 !important; }
  .product-card .product-badges { top: 6px !important; right: 6px !important; left: auto !important; }
  .product-card .product-actions { display: none !important; }
  .product-card .product-info { padding: 12px 0 0 !important; flex: 1 1 auto; display: flex; flex-direction: column; text-align: left !important; align-items: stretch !important; }
  .product-card .product-price-wrap { justify-content: flex-start !important; }
  .product-card .product-rating { display: none !important; }
  .product-card .product-name, .product-card .product-name a {
    font-size: 16px !important;
    line-height: 19.2px !important;
    margin: 0 0 8px !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    /* wraps like theirs (1 or 2 lines, no "...") — the card's space-between keeps prices/buttons aligned */
    white-space: normal !important; overflow: hidden; text-overflow: clip;
    -webkit-line-clamp: unset !important;
  }
  .product-card .product-name a { display: inline !important; margin: 0 !important; }
  .product-card .product-price-wrap { display: flex !important; align-items: baseline; flex-wrap: wrap !important; gap: 0 10px; margin: 0 !important; white-space: normal !important; line-height: 25.6px; }
  .product-card .product-price { font-size: 16px !important; line-height: 25.6px !important; }
  .product-card .product-original-price { font-size: 16px !important; font-weight: 400 !important; color: #AAA !important; margin: 0 !important; }
  .product-card .product-card-actions { margin-top: 12px; }
  .product-card .add-to-cart-btn { width: 100% !important; padding: 8px !important; height: 40px; gap: 5px !important; }
  /* theirs = flex column + space-between: image on top, name/price/button pinned to the bottom (cards in a row align) */
  section:not(.tp-horizontal) .product-card { justify-content: space-between !important; }
  section:not(.tp-horizontal) .product-card .product-info { flex: 0 0 auto !important; }

  /* Grid ("Just For You"): 4 per row at 992–1199 (their cols-lg-4), 5 per row from 1200 (cols-xl-5) */
  .col-xl-5ths { flex: 0 0 25%; max-width: 25%; }

  /* Load More: 14/600 uppercase, 2px orange ring, pill, 20px under the grid; hover = dark green */
  section .text-center:has(> .load-more-btn) { margin-top: 20px !important; }
  .load-more-btn, .load-more-btn:focus {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 14px !important;
    text-transform: uppercase;
    padding: 13px 27.7px !important;
    border: 2px solid var(--og-orange) !important;
    border-radius: 30px !important;
    color: var(--og-orange) !important;
    background: transparent !important;
    box-shadow: none !important; transform: none !important;
    transition: color .3s, border-color .3s, background-color .3s !important;
  }
  .load-more-btn i { display: none !important; }
  .load-more-btn:hover { background: var(--og-nav) !important; border-color: transparent !important; color: #fff !important; box-shadow: none !important; transform: none !important; }
  section:not(.tp-horizontal) .row.g-3:has(.product-card) { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }

  /* ---------- TOP SELLING: centred 28px title, 2 × 642×300 cards, 24px gaps ---------- */
  .tp-horizontal section, .tp-horizontal { }
  .tp-horizontal .d-flex.justify-content-between:has(.section-title) { justify-content: center !important; margin-bottom: 31px !important; padding-bottom: 0 !important; height: 34px; }
  .tp-horizontal .d-flex.justify-content-between:has(.section-title) > div { text-align: center; }
  .tp-horizontal .section-title { font-size: 28px !important; font-weight: 600 !important; line-height: 33.6px !important; }
  .tp-horizontal .btn-see-more { display: none !important; }
  .tp-horizontal .row { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
  .tp-horizontal .product-card {
    flex-direction: row !important;
    align-items: center;
    height: 300px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    position: relative;
  }
  .tp-horizontal .product-card .product-image-wrap {
    flex: 0 0 300px; width: 300px; height: 300px;
    padding-top: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
  }
  .tp-horizontal .product-card .product-image { border-radius: 8px !important; }
  .tp-horizontal .product-card .product-badges { display: none !important; }
  .tp-corner-badge {
    position: absolute; top: 0; right: 0; z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--og-red); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 14.4px;
    padding: 4px 8px;
    border-radius: 2px 8px;
  }
  .tp-corner-badge i { font-size: 12px; }
  .tp-horizontal .product-card .product-info { padding: 12px 12px 12px 0 !important; margin-left: 24px; justify-content: center; flex: 1 1 auto; }
  .tp-horizontal .product-card .product-name, .tp-horizontal .product-card .product-name a {
    font-size: 20px !important; font-weight: 600 !important; line-height: 26px !important;
    margin: 0 0 8px !important;
    white-space: normal; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical;
  }
  .tp-horizontal .product-card .product-price { font-family: 'Open Sans', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 27px !important; }
  .tp-horizontal .product-card .product-original-price { font-family: 'Open Sans', sans-serif !important; font-size: 15px !important; }
  .tp-horizontal .product-card .product-card-actions { margin-top: 30px; width: auto; }
  .tp-horizontal .product-card .add-to-cart-btn, .tp-horizontal .product-card .tp-buy-now-btn {
    width: auto !important; height: 40px; padding: 12px 16px !important; border-radius: 6px !important;
  }

  /* ---------- "Our Brands": 4 white cards per view, 90px tall ---------- */
  .common-carousel-item.brand-logo-item { flex: 0 0 calc((100% - 60px) / 4) !important; max-width: calc((100% - 60px) / 4) !important; }
  .brand-logo-tile { height: 90px; }
  .brand-logo-name { font-size: 22px; }

  /* Promo banner: 1308×340, 20px corners */
  .promo-wide-banner { border-radius: 20px; }

  /* ---------- Testimonials ---------- */
  .review-card { background: #fff !important; border: 0 !important; border-radius: 16px !important; padding: 24px !important; box-shadow: none !important; }
  .reviewer-avatar { background: var(--og-orange) !important; color: #fff !important; }
  .reviewer-name { color: var(--og-ink) !important; }

  /* ---------- Footer: white, gray text, dark headings ---------- */
  .main-footer { background: #fff !important; color: var(--og-text) !important; padding-top: 32px !important; border-top: 1px solid #EEE !important; --primary: #F48721 !important; }
  .main-footer .gg-footer h5, .main-footer h5 { color: var(--og-ink) !important; font-size: 18px !important; font-weight: 600 !important; }
  .gg-footer h5::after { background: var(--og-orange) !important; }
  .main-footer a, .gg-footer .footer-links-list a, .footer-contact-item, .footer-contact-inline { color: var(--og-text) !important; font-size: 15px; }
  .main-footer a:hover, .gg-footer .footer-links-list a:hover { color: var(--og-orange) !important; }
  .footer-call-btn, .footer-call-outline { background: transparent !important; border: 1px solid var(--og-orange) !important; color: var(--og-orange) !important; }
  .footer-call-outline:hover { background: var(--og-orange) !important; color: #fff !important; }
  .footer-newsletter input, .footer-newsletter-inline input { background: var(--og-gray) !important; border: 0 !important; color: var(--og-ink) !important; }
  .footer-newsletter button, .footer-newsletter-inline button { background: var(--og-orange) !important; color: #fff !important; border: 0 !important; }
  .footer-social a, .social-icons a { background: var(--og-gray) !important; color: var(--og-ink) !important; }
  .footer-social a:hover, .social-icons a:hover { background: var(--og-orange) !important; color: #fff !important; }
  .footer-bottom, .footer-bottom-inner { border-top-color: #EEE !important; color: var(--og-text) !important; }
  .footer-payments span, .payment-chip { background: var(--og-gray) !important; color: var(--og-ink) !important; border-color: transparent !important; }
}

/* ============================================================
   DESKTOP BREAKPOINTS — same steps as theirs (Swiper breakpoints are on window width)
   categories: 8 / gap 20 from 1320, 6 / gap 16 at 992–1319
   brands:     4 / gap 24 from 1320, 4 / gap 16 at 1024–1319, 3 / gap 16 at 992–1023
   grid:       5 per row from 1200, 4 at 992–1199 · Top Selling: 2 per row from 1200, 1 below
   ============================================================ */
@media (min-width: 992px) {
  /* their search box shrinks once the header gets tight (393 at 992) */
  .main-header .header-top .search-wrapper#searchWrapper { flex: 0 1 446px !important; min-width: 0; }

  /* category tile never wider than its slot (slot is 134 at 992; 142 elsewhere) */
  .featured-cats-grid .category-card .cat-icon,
  .featured-cats-grid .category-card:hover .cat-icon { width: min(142px, 100%) !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
}
@media (min-width: 992px) and (max-width: 1319.98px) {
  .featured-cats-grid { grid-auto-columns: calc((100% - 80px) / 6) !important; gap: 0 16px !important; }
  .common-carousel-item.brand-logo-item { margin-right: 16px !important; }
}
@media (min-width: 1320px) {
  .common-carousel-item.brand-logo-item { flex: 0 0 calc((100% - 72px) / 4) !important; max-width: calc((100% - 72px) / 4) !important; margin-right: 24px !important; }
}
@media (min-width: 1024px) and (max-width: 1319.98px) {
  .common-carousel-item.brand-logo-item { flex: 0 0 calc((100% - 48px) / 4) !important; max-width: calc((100% - 48px) / 4) !important; }
}
@media (min-width: 992px) and (max-width: 1023.98px) {
  .common-carousel-item.brand-logo-item { flex: 0 0 calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .tp-horizontal .row > .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl-5ths { flex: 0 0 20%; max-width: 20%; }
}

/* =====================================================================
   TABLET + PHONE (< 992px) — ghorerbazar's own mobile layout (replaces the old Shajgoj-style mobile UI)
   Their steps: 768–991 = "tablet" (81px header with search, no menu bar / bottom bar, desktop-style cards)
                < 768   = "phone"  (53px header, orange bottom bar, 2-up cards, 14px names, 34px buttons)
   ===================================================================== */
@media (max-width: 991.98px) {
  /* container: 95% + 20px padding (100% + 12px under 480, below) */
  .container { max-width: 95% !important; padding-left: 20px !important; padding-right: 20px !important; }
  body { padding-top: 0 !important; }
  .mega-nav .container.container-mobile-nav { max-width: none !important; padding: 0 !important; }

  /* header is in normal flow (scrolls away), white with a 1px #EEE line */
  .main-header { position: relative !important; top: auto !important; box-shadow: none !important; border-bottom: 1px solid #EEE !important; backdrop-filter: none !important; background: #fff !important; }
  .main-header > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  .main-header .header-top { padding: 0 !important; }
  .mobile-menu-btn { width: 22px !important; height: 22px !important; padding: 0 !important; border: 0 !important; background: transparent !important; flex: 0 0 22px; }
  .mobile-menu-btn .ham-bars { width: 22px; }
  #mobileSearchToggle { display: none !important; }
  .main-header .header-cart-wrap { display: flex !important; }
  .main-header #cartToggle { width: 22px !important; height: 22px !important; padding: 0 !important; background: transparent !important; border: 0 !important; position: relative; color: var(--og-ink) !important; }
  .main-header #cartToggle i { font-size: 22px !important; color: var(--og-ink) !important; line-height: 22px; }
  .main-header #cartToggle .badge-count { position: absolute !important; top: -5px !important; right: -6px !important; left: auto !important; width: 16px !important; min-width: 16px !important; height: 16px !important; padding: 0 !important; border-radius: 50% !important; background: var(--og-orange) !important; color: #fff !important; font-size: 10px !important; font-weight: 400 !important; line-height: 16px !important; display: flex !important; align-items: center; justify-content: center; border: 0 !important; }

  /* ---------- Section heads ---------- */
  section .d-flex.justify-content-between:has(.section-title) { align-items: center !important; margin-bottom: 16px !important; padding-bottom: 12px !important; }
  section:not(.tp-horizontal):not(.featured-cats-section) .d-flex.justify-content-between:has(.section-title) { position: relative; border-bottom: 1px solid #DDD !important; }
  section:not(.tp-horizontal):not(.featured-cats-section) .d-flex.justify-content-between:has(.section-title)::before { content: ''; position: absolute; left: 0; bottom: -2px; width: 40px; height: 4px; background: var(--og-orange); }
  .section-spacing, .section-spacing-compact { padding-top: 16px !important; padding-bottom: 16px !important; }
  .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
  .trust-badges-section { display: none !important; }

  /* ---------- Hero: rounded banner inside the container, no side banner ---------- */
  .hero-section { padding-top: 20px !important; padding-bottom: 0 !important; margin-top: 0 !important; }
  .hero-slider-wrap { height: auto !important; aspect-ratio: 865 / 347 !important; border-radius: 8px !important; box-shadow: none !important; overflow: hidden; }
  .hero-slider, .hero-slide { height: 100% !important; min-height: 0 !important; }
  .hero-block .slider-dots { position: absolute !important; left: 24px !important; bottom: 8px !important; top: auto !important; transform: none !important; display: flex; z-index: 5; }
  .hero-block .slider-dot { width: 8px !important; height: 8px !important; margin: 5px !important; padding: 0 !important; border-radius: 50% !important; background: #fff !important; border: 1px solid #fff !important; opacity: .8; }
  .hero-block .slider-dot.active { background: var(--og-orange) !important; border-color: var(--og-orange) !important; opacity: 1; }
  .hero-slider .slider-arrow { display: none !important; }

  /* ---------- Featured categories: slider with round orange arrows ---------- */
  section .featured-cats-header.d-flex.justify-content-between { justify-content: center !important; margin-bottom: 16px !important; padding-bottom: 0 !important; }
  .featured-cats-header .section-title { font-size: 18px !important; font-weight: 500 !important; line-height: 21.6px !important; text-align: center; }
  .featured-cats-header .btn-see-more { display: none !important; }
  .featured-cats-slider { position: relative; }
  #featuredCatsGrid.featured-cats-grid {
    display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-template-rows: auto !important;
    grid-auto-columns: calc((100% - 80px) / 6) !important; gap: 0 16px !important;
    overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 !important;
  }
  .featured-cats-grid::-webkit-scrollbar { display: none; }
  .featured-cats-grid .category-card { width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; height: auto !important; align-items: center !important; justify-content: flex-start !important; scroll-snap-align: start; transform: none !important; }
  .featured-cats-grid .category-card .cat-icon,
  .featured-cats-grid .category-card:hover .cat-icon { width: min(100px, 100%) !important; height: auto !important; aspect-ratio: 1 / 1 !important; max-width: none; margin: 0 auto !important; background: #fff !important; border-radius: 20px !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: none !important; }
  .featured-cats-grid .category-card .cat-icon img { width: 72% !important; height: 72% !important; object-fit: contain; transform: none !important; }
  .featured-cats-grid .cat-name { margin-top: 10px !important; color: var(--og-ink) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 19.2px !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cat-nav.d-none { display: flex !important; }
  .cat-nav { position: absolute; top: 50px; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--og-orange); color: #fff; align-items: center; justify-content: center; font-size: 14px; z-index: 5; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
  .cat-nav-prev { left: -18px; }
  .cat-nav-next { right: -18px; }
  .cat-nav.is-disabled { opacity: .35; pointer-events: none; }
  .cat-scroll-dots { display: none !important; }

  /* ---------- Product card (same as desktop) ---------- */
  .product-card { background: #fff !important; border: 1px solid var(--og-border) !important; border-radius: 4px !important; padding: 8px !important; overflow: hidden; display: flex !important; flex-direction: column; box-shadow: none !important; }
  section:not(.tp-horizontal) .product-card { justify-content: space-between !important; }
  .product-card .product-image-wrap { padding: 0 !important; padding-top: 89.9% !important; border-radius: 0 !important; background: #fff !important; }
  .product-card .product-image { border-radius: 0 !important; }
  .product-card .product-badges { top: 6px !important; right: 6px !important; left: auto !important; }
  .product-card .product-actions, .product-card .product-rating { display: none !important; }
  .product-card .product-info { padding: 12px 0 0 !important; display: flex; flex-direction: column; text-align: left !important; align-items: stretch !important; }
  section:not(.tp-horizontal) .product-card .product-info { flex: 0 0 auto !important; }
  .product-card .product-name, .product-card .product-name a { font-size: 16px !important; font-weight: 500 !important; line-height: 19.2px !important; margin: 0 0 8px !important; height: auto !important; min-height: 0 !important; display: block !important; white-space: normal !important; overflow: hidden; -webkit-line-clamp: unset !important; color: var(--og-ink) !important; }
  .product-card .product-name a { display: inline !important; margin: 0 !important; }
  .product-card .product-price-wrap { display: flex !important; align-items: baseline; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 0 10px; margin: 0 !important; line-height: 25.6px; }
  .product-card .product-price { font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 25.6px !important; color: var(--og-orange) !important; }
  .product-card .product-original-price { font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; color: #AAA !important; margin: 0 !important; }
  .product-card .product-card-actions { margin-top: 12px; }
  .product-card .add-to-cart-btn { width: 100% !important; height: 40px; min-height: 0 !important; padding: 8px !important; gap: 5px !important; font-size: 14px !important; border-radius: 4px !important; }

  /* product sliders: 3 per view (tablet) · 2 per view (phone), 20px gap; dots under them */
  .common-carousel-container { margin-left: 0 !important; margin-right: 0 !important; }
  .common-carousel-item { flex: 0 0 calc((100% - 40px) / 3) !important; max-width: calc((100% - 40px) / 3) !important; min-width: 0 !important; margin: 0 20px 0 0 !important; }
  .og-carousel-dots { display: flex; justify-content: center; align-items: center; margin-top: 15px; min-height: 18px; }
  .og-carousel-dots button { width: 8px; height: 8px; margin: 5px; padding: 0; border-radius: 50%; border: 1px solid var(--og-orange); background: transparent; transition: width .2s ease, background .2s ease; }
  .og-carousel-dots button.active { background: var(--og-orange); width: 19px; height: 11px; border-radius: 12px; }
  .carousel-nav { display: none !important; }

  /* grid ("Just For You"): 3 per row (tablet), 20px gaps */
  section:not(.tp-horizontal) .row.g-3:has(.product-card) { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }

  /* brands: 3 per view, 16px gap (tablet) */
  .common-carousel-item.brand-logo-item { flex: 0 0 calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; margin-right: 16px !important; }
  .brand-logo-tile { height: 90px; }

  /* Load More: same pill as desktop */
  section .text-center:has(> .load-more-btn) { margin-top: 20px !important; }
  .load-more-btn, .load-more-btn:focus { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 14px !important; text-transform: uppercase; padding: 13px 27.7px !important; border: 2px solid var(--og-orange) !important; border-radius: 30px !important; color: var(--og-orange) !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
  .load-more-btn i { display: none !important; }
  .load-more-btn:hover { background: var(--og-nav) !important; border-color: transparent !important; color: #fff !important; }

  /* floating cart (right edge) — shown on tablet + phone too; scroll-top stays desktop-only */
  .floating-cart, .floating-cart.show { display: block !important; opacity: 1 !important; visibility: visible !important; transform: translateY(-50%) !important; width: 66px; min-width: 66px !important; background: var(--og-orange) !important; border: 0 !important; border-radius: 6px 0 0 6px !important; box-shadow: 0 12px 24px rgba(34, 87, 122, .24) !important; font-family: 'Open Sans', sans-serif !important; }
  .floating-cart-top { background: transparent !important; color: #fff !important; padding: 12px !important; gap: 2px !important; }
  .floating-cart-icon { font-size: 20px !important; line-height: 24px !important; margin: 0 !important; color: #fff; }
  .floating-cart-items { color: #fff !important; font-size: 12px !important; line-height: 13.2px !important; letter-spacing: 0 !important; }
  .floating-cart-total { background: #fff !important; color: var(--og-orange) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 16.8px !important; padding: 5px 2px !important; border: 0 !important; border-radius: 0 0 0 6px !important; white-space: nowrap; }
}

/* ---------- TABLET only (768–991): header = ☰ · logo · search · icons (no labels), Top Selling = wide card ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .main-header .header-top > .d-flex { height: 80px; gap: 20px !important; justify-content: flex-start !important; }
  .main-header .header-logo { flex: 0 0 auto; margin: 0 !important; }
  .main-header .header-logo img { height: 48px !important; max-height: 48px !important; width: auto !important; }
  .main-header .header-top .search-wrapper#searchWrapper { display: flex !important; flex: 0 1 259px !important; width: 259px !important; max-width: 259px !important; height: 47px; margin: 0 !important; background: var(--og-gray) !important; border: 0 !important; border-radius: 8px !important; position: relative; }
  .main-header #searchWrapper .search-input { background: transparent !important; border: 0 !important; height: 47px !important; padding: 9px 42px 9px 16px !important; font-size: 14px !important; }
  .main-header #searchWrapper .search-btn { position: absolute !important; right: 14px; top: 50%; transform: translateY(-50%); background: transparent !important; border: 0 !important; padding: 0 !important; width: 22px !important; }
  .main-header #searchWrapper .search-btn i { color: #252A34 !important; font-size: 20px !important; }
  #mobileHeaderSearch { display: none !important; }
  .main-header .header-icons { margin-left: auto !important; gap: 20px !important; align-items: center; }
  .main-header .header-icons .header-label-link.d-none, .main-header .header-icons .header-more.d-none { display: flex !important; }
  .main-header .header-label-link { width: 22px; height: 22px; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--og-ink) !important; align-items: center; justify-content: center; }
  .main-header .header-label-link span, .main-header .header-cart-label { display: none !important; }
  .main-header .header-label-link i { font-size: 22px !important; color: var(--og-ink) !important; }
  .main-header .header-more-menu { display: none !important; }
  .mobile-bottom-nav { display: none !important; }
  body.has-bottom-nav { padding-bottom: 0 !important; }

  .hero-section .row > .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
  /* header order like theirs: ☰ · logo · search · icons */
  .main-header .header-top .mobile-menu-btn { order: 0 !important; }
  .main-header .header-top .header-logo { order: 1 !important; }
  .main-header .header-top #searchWrapper { order: 2 !important; }
  .main-header .header-top .header-icons { order: 3 !important; }
  .main-header .header-top #mobileHeaderSearch, html body #mobileHeaderSearch:not(.og-x) { display: none !important; }
  .og-search-panel #mobileHeaderSearch { display: flex !important; }
  /* hero copy sized for a 680px banner */
  .hero-slide .slide-title { font-size: 28px !important; line-height: 1.2 !important; }
  .hero-slide .slide-desc { font-size: 14px !important; line-height: 1.5 !important; -webkit-line-clamp: 2; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-slide .slide-tag { display: none !important; }
  .hero-slide .slide-btn { font-size: 13px !important; padding: 8px 16px !important; }

  /* Top Selling: 1 per row, 300×300 image left, desktop typography */
  .tp-horizontal .d-flex.justify-content-between:has(.section-title) { justify-content: center !important; margin-bottom: 31px !important; padding-bottom: 0 !important; }
  .tp-horizontal .section-title { font-size: 28px !important; font-weight: 600 !important; line-height: 33.6px !important; text-align: center; }
  .tp-horizontal .btn-see-more { display: none !important; }
  .tp-horizontal .row { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
  .tp-horizontal .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .tp-horizontal .product-card { flex-direction: row !important; align-items: center; height: 300px; padding: 0 !important; border: 0 !important; border-radius: 8px !important; position: relative; }
  .tp-horizontal .product-card .product-image-wrap { flex: 0 0 300px; width: 300px; height: 300px; padding-top: 0 !important; border-radius: 8px !important; overflow: hidden; }
  .tp-horizontal .product-card .product-badges { display: none !important; }
  .tp-horizontal .product-card .product-info { padding: 12px 12px 12px 0 !important; margin-left: 24px; justify-content: center; flex: 1 1 auto; }
  .tp-horizontal .product-card .product-name, .tp-horizontal .product-card .product-name a { font-size: 20px !important; font-weight: 600 !important; line-height: 26px !important; }
  .tp-horizontal .product-card .product-price { font-family: 'Open Sans', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 27px !important; }
  .tp-horizontal .product-card .product-original-price { font-family: 'Open Sans', sans-serif !important; font-size: 15px !important; }
  .tp-horizontal .product-card .product-card-actions { margin-top: 30px; width: auto; }
  .tp-horizontal .product-card .add-to-cart-btn, .tp-horizontal .product-card .tp-buy-now-btn { width: auto !important; height: 40px; padding: 12px 16px !important; border-radius: 6px !important; }
  .tp-corner-badge { position: absolute; top: 0; right: 0; z-index: 3; display: inline-flex; align-items: center; gap: 4px; background: var(--og-red); color: #fff; font-size: 12px; font-weight: 700; line-height: 14.4px; padding: 4px 8px; border-radius: 2px 8px; }
}

/* ---------- PHONE (< 768) ---------- */
@media (max-width: 767.98px) {
  /* header 53px: ☰ left · logo centred (32px) · cart right */
  .main-header .header-top > .d-flex { height: 52px; position: relative; }
  .main-header .header-logo { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; }
  .main-header .header-logo img { height: 32px !important; max-height: 32px !important; width: auto !important; }
  .main-header #searchWrapper, .main-header #mobileHeaderSearch { display: none !important; }
  .main-header .header-icons { margin-left: auto !important; }

  .hero-slider-wrap { aspect-ratio: 359 / 201 !important; }
  .hero-slide .slide-content { max-width: 60% !important; margin-left: 5% !important; }
  .hero-slide .slide-title { font-size: 18px !important; line-height: 1.25 !important; }
  .hero-slide .slide-desc, .hero-slide .slide-tag { display: none !important; }
  .hero-slide .slide-btn { font-size: 12px !important; padding: 6px 12px !important; }

  /* categories: 3 per view, 16px gap */
  #featuredCatsGrid.featured-cats-grid { grid-auto-columns: calc((100% - 32px) / 3) !important; }

  /* section heads */
  .section-title { font-size: 16px !important; font-weight: 600 !important; line-height: 19.2px !important; }
  .featured-cats-header .section-title { font-size: 18px !important; font-weight: 500 !important; line-height: 21.6px !important; }
  .btn-see-more { font-size: 12px !important; font-weight: 500 !important; }

  /* product cards: 14px names, 34px buttons */
  .product-card .product-name, .product-card .product-name a { font-size: 14px !important; line-height: 16.8px !important; }
  .product-card .add-to-cart-btn { height: 34px; font-size: 12px !important; line-height: 14.4px !important; }
  .product-card .og-qty { height: 34px; }
  .product-card .og-qty button { flex-basis: 34px; width: 34px; }
  .common-carousel-item { flex: 0 0 calc((100% - 20px) / 2) !important; max-width: calc((100% - 20px) / 2) !important; }
  section:not(.tp-horizontal) .row.g-3:has(.product-card) { --bs-gutter-x: 12px; --bs-gutter-y: 15px; }
  .common-carousel-item.brand-logo-item { flex: 0 0 calc((100% - 16px) / 2) !important; max-width: calc((100% - 16px) / 2) !important; }
  .brand-logo-tile { height: 72px; }

  /* Top Selling: 2 per row vertical cards (square image, 14px title, full-width 30px button, no Buy now) */
  .tp-horizontal .d-flex.justify-content-between:has(.section-title) { justify-content: center !important; margin-bottom: 16px !important; padding-bottom: 0 !important; }
  .tp-horizontal .section-title { font-size: 20px !important; font-weight: 600 !important; line-height: 24px !important; text-align: center; }
  .tp-horizontal .btn-see-more { display: none !important; }
  .tp-horizontal .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .tp-horizontal .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .tp-horizontal .product-card { flex-direction: column !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; position: relative; height: 100%; justify-content: flex-start !important; }
  .tp-horizontal .product-card .product-image-wrap { padding-top: 100% !important; border-radius: 8px !important; overflow: hidden; }
  .tp-horizontal .product-card .product-image { border-radius: 8px !important; }
  .tp-horizontal .product-card .product-badges { display: none !important; }
  .tp-corner-badge { position: absolute; top: 0; right: 0; z-index: 3; display: inline-flex; align-items: center; gap: 4px; background: var(--og-red); color: #fff; font-size: 12px; font-weight: 600; line-height: 14.4px; padding: 4px 8px; border-radius: 2px 8px; }
  .tp-horizontal .product-card .product-info { padding: 12px !important; flex: 1 1 auto; }
  .tp-horizontal .product-card .product-name, .tp-horizontal .product-card .product-name a { font-size: 14px !important; font-weight: 600 !important; line-height: 16.8px !important; }
  .tp-horizontal .product-card .product-price-wrap { gap: 0 6px; line-height: 21px; }
  .tp-horizontal .product-card .product-price { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 21px !important; }
  .tp-horizontal .product-card .product-original-price { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #767A7A !important; }
  .tp-save-pill { font-size: 10px; font-weight: 600; line-height: 12px; padding: 2px 4px; }
  .tp-horizontal .product-card .product-card-actions { margin-top: auto; padding-top: 12px; display: flex; }
  .tp-horizontal .product-card .add-to-cart-btn { width: 100% !important; height: 30px; padding: 4px 16px !important; border-radius: 6px !important; font-size: 12px !important; }
  .tp-horizontal .product-card .tp-buy-now-btn { display: none !important; }
  .tp-horizontal .og-qty { width: 100%; flex: 1 1 auto; height: 30px; }
  .tp-horizontal .og-qty button { flex-basis: 30px; width: 30px; }

  /* floating cart: 58px wide, 16px icon */
  .floating-cart, .floating-cart.show { width: 58px; min-width: 58px !important; }
  .floating-cart-top { padding: 8px !important; }
  .floating-cart-icon { font-size: 16px !important; line-height: 20px !important; }

  /* ---------- Bottom bar: orange, 55px, 5 items (16px white icon over a 10px uppercase label) ---------- */
  .mobile-bottom-nav { background: var(--og-orange) !important; border-top: 0 !important; box-shadow: none !important; padding: 9px 10px 10px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; height: auto; }
  .mobile-bottom-nav-inner { max-width: none !important; justify-content: stretch !important; }
  .mobile-bottom-item, .mobile-bottom-item.active { flex: 1 1 0 !important; color: #fff !important; opacity: 1 !important; transform: none !important; }
  .mobile-bottom-item i, .mobile-bottom-item.active i { font-size: 16px !important; line-height: 16px !important; margin: 0 !important; color: #fff !important; text-shadow: none !important; transform: none !important; }
  .mobile-bottom-item .item-label, .mobile-bottom-item.active .item-label { margin-top: 8px; font-family: 'Open Sans', sans-serif !important; font-size: 10px !important; font-weight: 400 !important; line-height: 10px !important; text-transform: uppercase; color: #fff !important; }
  .mobile-bottom-item .item-icon-wrapper::after { display: none !important; }
  .mobile-bottom-item:hover i, .mobile-bottom-item:focus i { color: #fff !important; }
  .mobile-cart-badge { top: -5px !important; right: -7px !important; width: 16px !important; min-width: 16px !important; height: 16px !important; padding: 0 !important; background: var(--og-ink) !important; color: #fff !important; font-size: 11px !important; line-height: 14px !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; border: 0 !important; }
  body.has-bottom-nav { padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ---------- Search panel (drops from the top) ---------- */
  .og-search-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .3s; }
  .og-search-panel { position: fixed; left: 0; right: 0; top: -140px; z-index: 9999; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); transition: top .3s; }
  body.og-search-open .og-search-overlay { opacity: 1; visibility: visible; }
  body.og-search-open .og-search-panel { top: 0; }
  .og-search-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px; height: 37px; }
  .og-search-head strong { font-size: 14px; font-weight: 700; color: var(--og-ink); }
  .og-search-close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 24, 24, .07); color: #FF1818; font-size: 10px; display: flex; align-items: center; justify-content: center; }
  .og-search-panel #mobileHeaderSearch { display: flex !important; position: relative !important; margin: 12px 16px !important; width: auto !important; height: 41px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .og-search-panel #mobileHeaderSearchInput { flex: 1 1 auto; height: 41px !important; padding: 12px 48px 12px 12px !important; border: 1px solid #DDD !important; border-radius: 4px !important; background: #fff !important; font-size: 13.33px !important; color: #000 !important; box-shadow: none !important; }
  .og-search-panel #mobileHeaderSearch .search-btn { position: absolute !important; right: 0 !important; top: 0 !important; left: auto !important; transform: none !important; width: 49px !important; height: 41px !important; border: 0 !important; border-radius: 0 4px 4px 0 !important; background: var(--og-orange) !important; color: #fff !important; display: flex !important; align-items: center; justify-content: center; }
  .og-search-panel #mobileHeaderSearch .search-btn i { color: #fff !important; font-size: 15px !important; }
  .og-search-panel .search-dropdown { top: 100% !important; left: 0 !important; right: 0 !important; }
}

/* ---------- small phones (< 480): container 100% + 12px ---------- */
@media (max-width: 479.98px) {
  .container { max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }
}

@media (min-width: 992px) {
  .og-search-panel, .og-search-overlay { display: none !important; }
}

/* < 992: beat gg-theme's mobile rules that use longer selectors
   (section .container 8px · .row.g-3:has(.product-card) 3px columns · .common-carousel-item .product-card …) */
@media (max-width: 991.98px) {
  html body .container:not(#og), html body section .container:not(#og) { max-width: 95% !important; padding-left: 20px !important; padding-right: 20px !important; }
  html body section.section-spacing, html body section.section-spacing-compact { padding-left: 0 !important; padding-right: 0 !important; }
  html body .mega-nav .container.container-mobile-nav:not(#og) { max-width: none !important; padding: 0 !important; }
  /* grids: 20px gaps on tablet */
  html body section .row.g-3:has(.product-card) { margin-left: -10px !important; margin-right: -10px !important; margin-top: 0 !important; row-gap: 20px; }
  html body section .row.g-3:has(.product-card) > [class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; margin-top: 0 !important; }
  html body section.tp-horizontal .row.g-3:has(.product-card) { margin-left: -12px !important; margin-right: -12px !important; row-gap: 24px; }
  html body section.tp-horizontal .row.g-3:has(.product-card) > [class*="col-"] { padding-left: 12px !important; padding-right: 12px !important; }
  .common-carousel-item .product-card .product-image-wrap { padding-top: 89.9% !important; }
  .common-carousel-item .product-card .product-name, .common-carousel-item .product-card .product-name a { font-size: 16px !important; line-height: 19.2px !important; }
  .common-carousel-item .product-card .add-to-cart-btn { font-size: 14px !important; }
}
@media (max-width: 767.98px) {
  /* grids: 12px column gap, 15px row gap */
  html body section .row.g-3:has(.product-card) { margin-left: -10px !important; margin-right: -10px !important; row-gap: 15px; } /* theirs: row -10, cols 6 → cards 8px from the edge */
  html body section .row.g-3:has(.product-card) > [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }
  html body section.tp-horizontal .row.g-3:has(.product-card) { margin-left: -6px !important; margin-right: -6px !important; row-gap: 12px; }
  html body section.tp-horizontal .row.g-3:has(.product-card) > [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }
  .common-carousel-item .product-card .product-name, .common-carousel-item .product-card .product-name a { font-size: 14px !important; line-height: 16.8px !important; }
  .common-carousel-item .product-card .add-to-cart-btn { font-size: 12px !important; }
  /* hero sits 8px from the edges (content is at 12) */
  html body .hero-section > .container:not(#og):not(#og2) { padding-left: 8px !important; padding-right: 8px !important; }
  .hero-section .row { --bs-gutter-x: 0; margin-left: 0 !important; margin-right: 0 !important; }
  .hero-section .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .mobile-bottom-nav { min-height: 55px; }
}
@media (max-width: 479.98px) {
  html body .container:not(#og), html body section .container:not(#og) { max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }
}
/* 576–767: their banner switches back to the wide 2.5:1 image (515×206 at 576) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-slider-wrap { aspect-ratio: 865 / 347 !important; }
  html body .hero-section > .container:not(#og):not(#og2) { padding-left: 16px !important; padding-right: 16px !important; }
}



/* =====================================================================
   PRODUCT PAGE — ghorerbazar layout: white card (vertical thumbs + bordered main image | info),
   2×2 action buttons, Brand box, then every section as its own white card with jump buttons above
   ===================================================================== */
.product-single-container .breadcrumb-custom { font-size: 13px !important; color: var(--og-ink) !important; margin-bottom: 12px !important; }
.product-single-container .breadcrumb-custom a { color: var(--og-ink) !important; }
.og-pd-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, .11); padding: 24px; }
.og-pd-card > .row { --bs-gutter-x: 30px; --bs-gutter-y: 20px; }

/* gallery: 80px thumb column (10px apart) + bordered main image, gap 16 */
.product-page-gallery { display: flex; align-items: flex-start; gap: 16px; }
.product-page-gallery #productThumbs { order: -1; flex: 0 0 80px; flex-direction: column !important; flex-wrap: nowrap !important; gap: 10px !important; }
.product-page-gallery #productThumbs .thumb-item img.qv-thumb { width: 80px !important; height: 80px !important; object-fit: contain !important; border: 1px solid rgba(34, 40, 49, .11) !important; border-radius: 4px !important; background: #fff; box-shadow: none !important; transform: none !important; opacity: 1 !important; }
.product-page-gallery #productThumbs .thumb-item img.qv-thumb.active, .product-page-gallery #productThumbs .thumb-item img.qv-thumb:hover { border-color: var(--og-orange) !important; }
.product-page-gallery .product-main-swiper { flex: 0 1 507px; min-width: 0; max-width: 507px !important; margin: 0 !important; border: 1px solid rgba(34, 40, 49, .11); border-radius: 4px !important; box-shadow: none !important; background: #fff; }
.product-page-gallery .product-page-main-img { object-fit: contain !important; background: #fff; }
.product-page-gallery .zoom-icon-overlay { display: none !important; }
.product-main-swiper .swiper-button-next, .product-main-swiper .swiper-button-prev { width: 27px !important; height: 44px !important; margin-top: -22px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #AAA !important; border-radius: 0 !important; }
.product-main-swiper .swiper-button-next { right: 10px !important; }
.product-main-swiper .swiper-button-prev { left: 10px !important; }
.product-main-swiper .swiper-button-next::after, .product-main-swiper .swiper-button-prev::after { font-size: 18px !important; font-weight: 400 !important; color: #AAA !important; }
.product-main-swiper .swiper-button-disabled { opacity: .35 !important; }

/* info column */
.og-pd-card .qv-category, .og-pd-card .qv-rating, .og-pd-card .qv-description, .og-pd-card .og-pd-avail { display: none !important; }
.og-pd-card h1.qv-name { font-family: 'Open Sans', sans-serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 28.8px !important; color: var(--og-ink) !important; margin: 0 0 16px !important; }
.og-pd-card .qv-price-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; padding-bottom: 13px; border-bottom: 1px solid #EEE; margin-bottom: 20px !important; }
.og-pd-card .qv-price { font-family: 'Open Sans', sans-serif !important; font-size: 26px !important; font-weight: 600 !important; line-height: 31.2px !important; color: var(--og-orange) !important; }
.og-pd-card .qv-original-price { font-family: 'Open Sans', sans-serif !important; font-size: 24px !important; font-weight: 400 !important; line-height: 28.8px !important; color: #AAA !important; text-decoration: line-through; }
.og-pd-card .qv-save { background: var(--og-green) !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; line-height: 17px; padding: 2px 6px !important; border-radius: 4px !important; }
.og-pd-card .qv-quantity-wrap { display: flex; align-items: center; gap: 40px; margin-bottom: 16px !important; }
.og-pd-card .qv-quantity-wrap .qv-selection-label { margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--og-ink) !important; }
.og-pd-card .qv-quantity-selector { display: flex; align-items: center; justify-content: space-between; width: 140px; height: 44px; padding: 0 8px; border: 1px solid #CCC; border-radius: 4px; background: #fff; }
.og-pd-card .qv-quantity-selector button { width: 24px !important; height: 24px !important; flex: 0 0 24px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #F5F5F5 !important; color: var(--og-ink) !important; font-size: 14px !important; line-height: 1 !important; display: flex; align-items: center; justify-content: center; }
.og-pd-card .qv-quantity-selector input { flex: 1 1 auto; width: 40px !important; height: 40px !important; border: 0 !important; background: transparent !important; text-align: center; font-size: 16px !important; font-weight: 500 !important; color: var(--og-ink) !important; box-shadow: none !important; }
.og-pd-card .qv-buttons, .og-pd-card .qv-contact-btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; margin: 0 0 12px !important; }
.og-pd-card .qv-buttons .btn-global, .og-pd-card .qv-contact-btns .btn-global { width: 100% !important; flex: none !important; height: 44px !important; min-height: 0 !important; padding: 0 12px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; border: 0 !important; transform: none !important; }
.og-pd-card .qv-buttons .btn-global { text-transform: uppercase; border-radius: 6px !important; }
.og-pd-card .qv-buttons .btn-global-dark-red { background: var(--og-orange) !important; color: #fff !important; }
.og-pd-card .qv-buttons .btn-global-outline { background: var(--og-nav) !important; color: #fff !important; }
.og-pd-card .qv-buttons .btn-global:hover:not([disabled]) { filter: brightness(.94); }
.og-pd-card .qv-buttons .btn-global[disabled] { grid-column: 1 / -1; background: #CCC !important; color: #fff !important; }
.og-pd-card .qv-contact-btns .btn-global { text-transform: capitalize; border-radius: 8px !important; }
.og-pd-card .qv-contact-btns .btn-whatsapp { background: #1DAA61 !important; }
.og-pd-card .qv-contact-btns .btn-call { background: #1E3A8A !important; }
.og-pd-card .qv-contact-btns .btn-global:only-child { grid-column: 1 / -1; }
.og-pd-brand { display: inline-flex; align-items: center; gap: 8px; height: 46px; margin-top: 12px; padding: 2px 12px; border: 1px solid #CCC; border-radius: 4px; text-decoration: none !important; }
.og-pd-brand-label { font-size: 14px; font-weight: 600; color: var(--og-ink); }
.og-pd-brand img { max-height: 40px; max-width: 120px; object-fit: contain; }
.og-pd-brand-name { font-size: 14px; font-weight: 700; color: var(--og-nav); }
.og-pd-brand:hover { border-color: var(--og-orange); }

/* sections below: jump buttons in a white strip, then each section is its own card */
.product-single-container > .mt-5 { margin-top: 24px !important; }
#productTabs { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px; margin: 0; background: #fff; border: 0 !important; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, .11); }
#productTabs .nav-item { margin: 0 !important; }
#productTabs .nav-link, #productTabs .nav-link.active, #productTabs .nav-link:hover { height: 38px; display: flex; align-items: center; padding: 12px 24px !important; margin: 0 !important; background: #F5F5F5 !important; color: #666 !important; border: 0 !important; border-radius: 4px !important; font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 14px !important; }
#productTabs .nav-link::after, #productTabs .nav-link::before { display: none !important; }
#productTabs .nav-link:hover { color: var(--og-orange) !important; }
.product-single-container .tab-content { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.product-single-container .tab-content > .tab-pane { display: block !important; opacity: 1 !important; height: auto !important; visibility: visible !important; margin-top: 24px; background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, .11); padding: 32px 24px 24px; }
.product-single-container .tab-content > .tab-pane > .p-4 { padding: 0 !important; }
.product-single-container .mobile-accordion-header { display: none !important; }
.og-pane-title { position: relative; display: block; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700; line-height: 18px; color: var(--og-ink); padding-bottom: 8px; margin: 0 0 16px; }
.og-pane-title::before { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; background: var(--og-orange); }

/* phone (< 768): card 8px padding, 50px thumbs, smaller type + 40px buttons, no jump strip */
@media (max-width: 767.98px) {
  .og-pd-card { padding: 8px; margin: 0 -10px; }
  .og-pd-card > .row { --bs-gutter-y: 16px; }
  .og-pd-card .product-page-gallery { gap: 18px !important; padding: 0 6px !important; margin: 0 !important; } /* style.css gave it -15px side margins */
  .product-page-gallery #productThumbs { flex: 0 0 50px; min-width: 50px; }
  .product-page-gallery .product-main-swiper { flex: 1 1 auto; max-width: none !important; }
  .product-page-gallery #productThumbs .thumb-item img.qv-thumb { width: 50px !important; height: 50px !important; }
  .og-pd-card > .row > .col-lg-6:last-child { padding: 0 6px 8px !important; }
  .og-pd-card h1.qv-name { font-size: 18px !important; line-height: 21.6px !important; margin-bottom: 8px !important; }
  .og-pd-card .qv-price { font-size: 18px !important; line-height: 24px !important; }
  .og-pd-card .qv-original-price { font-size: 16px !important; }
  .og-pd-card .qv-quantity-selector { height: 40px; }
  .og-pd-card .qv-buttons .btn-global, .og-pd-card .qv-contact-btns .btn-global { height: 40px !important; font-size: 12px !important; }
  .product-single-container .nav-tabs#productTabs { display: none !important; }
  .product-single-container .tab-content > .tab-pane { padding: 16px; }
}

/* Drawer at 576–991: the theme only styles the drawer below 576 (responsive.css), so on tablets the old drawer was
   edge-to-edge with boxed tabs and a 1-column Categories tab of huge icons → same rules as phone */
@media (min-width: 576px) and (max-width: 991.98px) {
  .mobile-nav-header { padding-top: 42px !important; }
  .nav-drawer-tab { flex-direction: column; padding: 10px 20px !important; }
  #drawerMainMenu > li.nav-item:not(.mobile-cat-accordion-wrap) { padding-top: 8px; }
  .mobile-tab-btn { border: none !important; background: #f8f9fa !important; padding: 12px !important; font-size: 13.6px !important; font-weight: 400; color: var(--gray-500) !important; border-radius: 0 !important; box-shadow: none !important; }
  .mobile-tab-btn.active { background: #fff !important; color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; }
  .mega-nav #drawerMainMenu .nav-link { padding: 14px 0; border-bottom: 1px solid #f0f0f0; color: var(--dark); font-weight: 500; font-size: 0.95rem; }
  .mega-nav #drawerMainMenu .nav-link i { width: 24px; text-align: center; color: var(--primary); font-size: 1.1rem; vertical-align: middle; margin-right: 8px; }
  .category-mobile-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; padding-bottom: 30px; }
  .category-mobile-card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); padding: 16px 10px; text-align: center; text-decoration: none !important; }
  .category-mobile-card .cat-card-icon { margin-bottom: 8px; }
  .category-mobile-card .nav-cat-grid-icon { width: 44px !important; height: 44px !important; object-fit: contain; }
  .category-mobile-card .cat-card-name { font-size: 0.8rem; font-weight: 400; color: var(--dark); line-height: 1.2; display: block; }
}

/* Drawer open (<992): the drawer lives inside the header, so the header is stacked above the page overlay and stayed
   bright white → give the header its own .5 dim under the drawer (same as the overlay) */
@media (max-width: 991.98px) {
  .main-header:has(#mainNavbar.show)::after { content: ''; position: absolute; inset: 0 0 -1px 0; background: rgba(0, 0, 0, .5); z-index: 1; pointer-events: none; }
  .main-header:has(#mainNavbar.show) .header-top { position: relative; z-index: 0; }
  .main-header:has(#mainNavbar.show) .mega-nav { position: relative; z-index: 60 !important; }
}

/* =====================================================================
   CATEGORY PAGE — ghorerbazar /collections: title left + breadcrumb right (no dark banner),
   one white card per filter, white "Sort By" bar, 4-column grid with 16px gaps
   ===================================================================== */
.premium-page-header { background: transparent !important; background-image: none !important; padding: 12px 0 !important; margin: 0 !important; min-height: 0 !important; box-shadow: none !important; }
.premium-page-header::before, .premium-page-header::after { display: none !important; }
.premium-page-header > .container { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; text-align: left !important; }
.premium-page-header h1 { font-family: 'Open Sans', sans-serif !important; font-size: 24px !important; font-weight: 600 !important; line-height: 28.8px !important; color: var(--og-ink) !important; margin: 0 !important; text-shadow: none !important; }
.premium-page-header .header-breadcrumb { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 13px !important; color: var(--og-ink) !important; }
.premium-page-header .header-breadcrumb a, .premium-page-header .header-breadcrumb span { color: var(--og-ink) !important; font-size: 13px !important; opacity: 1 !important; }
.premium-page-header .header-breadcrumb .separator i { font-size: 9px; }
.category-intro, .container:has(> .category-intro) { display: none !important; } /* theirs has no intro line above the grid (text stays in meta description) */

/* filter sidebar: transparent wrapper, each group = its own white card */
#filterSidebar { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
#filterSidebar .filter-group { background: #fff; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); padding: 12px; margin: 0 0 6px !important; border: 0 !important; }
#filterSidebar .filter-h { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 !important; margin: -1px 0 0 !important; border-bottom: 1px solid #EEE !important; font-family: 'Open Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .6px; line-height: 15.6px !important; text-transform: uppercase; color: #222 !important; cursor: pointer; }
#filterSidebar .og-fh-text { position: relative; }
#filterSidebar .og-fh-text::after { content: ''; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--og-orange); }
#filterSidebar .filter-toggle { font-size: 18px !important; font-weight: 400 !important; color: var(--og-ink) !important; line-height: 1; }
#filterSidebar .filter-body { padding: 5px 0 0 !important; }
#filterSidebar .filter-check { display: flex !important; align-items: center; gap: 9px; min-height: 28px; margin: 0 !important; padding: 0 !important; font-family: 'Open Sans', sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; color: #333 !important; cursor: pointer; }
#filterSidebar .filter-check input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0 !important; border: 1px solid #C0C0C0; border-radius: 4px; accent-color: var(--og-orange); }
#filterSidebar .filter-check .filter-count, #filterSidebar .filter-check small { margin-left: auto; color: #999; font-size: 12px; }
#filterSidebar .filter-see-more { color: var(--og-orange) !important; font-size: 12px !important; font-weight: 600 !important; background: none !important; border: 0 !important; padding: 6px 0 0 !important; }
/* price slider: 6px #EEE track, orange range, 20px orange handles with white ring */
#filterSidebar .price-slider-track { height: 6px !important; background: #EEE !important; border-radius: 3px !important; }
#filterSidebar .price-slider-range { height: 6px !important; background: var(--og-orange) !important; }
#filterSidebar .price-slider input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--og-orange); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
#filterSidebar .price-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--og-orange); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
#filterSidebar .filter-actions { background: #fff; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); padding: 12px; margin-top: 0 !important; }
#filterSidebar .filter-actions .btn-global { height: 40px; border-radius: 4px !important; font-size: 14px !important; font-weight: 600 !important; }

/* toolbar: white bar, "Sort By :" + select on the left, product count on the right */
.category-info-bar { background: #fff !important; border-radius: 4px !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .1) !important; padding: 12px !important; min-height: 62px; margin-bottom: 24px !important; flex-direction: row-reverse; }
.category-info-bar > .d-flex { gap: 10px !important; }
.og-sort-label { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--og-ink); white-space: nowrap; }
.category-info-bar .cat-sort { width: auto !important; flex: 0 0 auto; height: 38px; min-width: 136px; padding: 9px 27px 9px 9px !important; border: 1px solid #E3E3E3 !important; border-radius: 3px !important; font-size: 12px !important; color: var(--og-ink) !important; box-shadow: none !important; background-color: #fff !important; }
.category-info-bar .cat-count, .category-info-bar .cat-count * { font-size: 13px !important; color: #666 !important; }

/* grid: 4 columns × 16px gap (3 on tablet, 2 × 12px on phone) */
html body #categoryGrid.row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; margin: 0 !important; --bs-gutter-x: 0; --bs-gutter-y: 0; }
html body #categoryGrid.row > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
#categoryGrid .product-card { height: 100%; justify-content: space-between !important; }
#categoryGrid .product-card .product-info { flex: 0 0 auto !important; }

@media (min-width: 992px) {
  /* 290px sidebar + 20px gap + flexible main (1004 at 1440, like theirs) */
  .container-category-grid > .row { --bs-gutter-x: 20px; --bs-gutter-y: 0; padding: 0 !important; margin-left: -10px; margin-right: -10px; }
  .container-category-grid > .row > .col-lg-3 { flex: 0 0 310px; max-width: 310px; }
  .container-category-grid > .row > .col-lg-9 { flex: 1 1 0; max-width: calc(100% - 310px); }
  .container-category-grid { padding-top: 0 !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  html body #categoryGrid.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  html body #categoryGrid.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
  .premium-page-header h1 { font-size: 18px !important; line-height: 21.6px !important; }
  .og-sort-label { display: none; }
  .category-info-bar { flex-direction: row; min-height: 0; margin-bottom: 12px !important; }
}

/* menu bar: current category = orange text (organic.js adds .og-active) */
@media (min-width: 992px) {
  .mega-nav .nav > li > .nav-link.og-active, .mega-nav .nav > li > .nav-link.og-active .mega-caret { color: var(--og-orange) !important; }
}

/* Filter checkboxes = theirs: 16px, white + 1px #C0C0C0, r4; checked = orange fill + white tick */
#filterSidebar .filter-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; width: 16px; height: 16px; flex: 0 0 16px; margin: 0 !important; background: #fff; border: 1px solid #C0C0C0 !important; border-radius: 4px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
#filterSidebar .filter-check input[type="checkbox"]:checked { background: var(--og-orange); border-color: var(--og-orange) !important; }
#filterSidebar .filter-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#filterSidebar .filter-check input[type="checkbox"]:focus-visible { outline: 2px solid rgba(244, 135, 33, .4); outline-offset: 1px; }

/* white header part ends with a 1px #EEE line (theirs .header-middle) */
@media (min-width: 992px) {
  .main-header > .container { border-bottom: 1px solid #EEE; }
}

/* ===== Colours point-to-point with theirs (O-20) ===== */
.main-header #searchInput::placeholder { color: var(--og-ink) !important; opacity: 1; }

/* Footer: headings 16/500 ink · links 14px #666 · phone/email 16px #666 plain · cream round social icons · plain bottom bar */
.main-footer .gg-footer h5, .main-footer .gg-footer h4, .main-footer .gg-footer h6 { font-family: 'Open Sans', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: var(--og-ink) !important; }
.main-footer .footer-links-list a, .main-footer .gg-footer ul li a { font-size: 14px !important; color: #666 !important; }
.main-footer .footer-links-list a:hover, .main-footer .gg-footer ul li a:hover { color: var(--og-orange) !important; }
.main-footer .footer-contact-item, .main-footer .footer-contact-item * { font-size: 16px !important; color: #666 !important; }
.main-footer .footer-subscribe-btn { background: var(--og-orange) !important; color: #fff !important; border-color: var(--og-orange) !important; }
.main-footer .footer-subscribe-btn:hover { background: var(--og-nav) !important; border-color: var(--og-nav) !important; color: #fff !important; }
.main-footer .footer-desc, .main-footer .gg-footer p { color: #666 !important; font-size: 14px !important; }
.main-footer .footer-call-btn, .main-footer .footer-call-btn.footer-call-outline { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #666 !important; font-size: 16px !important; font-weight: 400 !important; }
.main-footer .footer-call-btn i { color: #666 !important; }
.main-footer .footer-social-actions a, .main-footer .footer-social a { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #FBF9F5 !important; color: var(--og-orange) !important; border: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
.main-footer .footer-social-actions a i, .main-footer .footer-social a i { color: var(--og-orange) !important; }
.main-footer .footer-social-actions a:hover, .main-footer .footer-social a:hover { background: var(--og-orange) !important; color: #fff !important; }
.main-footer .footer-social-actions a:hover i, .main-footer .footer-social a:hover i { color: #fff !important; }
.footer-bottom-bar { background: transparent !important; border-top: 1px solid #CCC !important; }
.footer-bottom-bar .footer-copy-text, .footer-bottom-bar .footer-copy-text * { color: #666 !important; font-size: 13px !important; }
.footer-bottom-bar .footer-dev-link { color: var(--og-orange) !important; }

/* page backgrounds like theirs: home cream #FBF9F5 · collections #F2F4F8 (div.main-menu) · product #F9F9F9 (main.details_main) */
body.page-category, body.page-category main { background-color: #F2F4F8 !important; }
body.page-product, body.page-product main { background-color: #F9F9F9 !important; }

/* ===== Add-to-cart feedback (own design): flying picture → cart bounce + count pop → white toast ===== */
.og-fly { position: fixed; z-index: 100000; pointer-events: none; background: #fff center / cover no-repeat; border-radius: 16px; box-shadow: 0 10px 28px rgba(4, 31, 30, .28), 0 0 0 3px #fff; will-change: transform, opacity; }
/* cart buttons dip and spring back; `translate` keeps the floating cart's own translateY(-50%) */
.og-cart-bounce { animation: og-cart-dip .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes og-cart-dip { 0% { translate: 0 0; scale: 1; } 30% { translate: 0 6px; scale: 1.08 .9; } 60% { translate: 0 -3px; scale: .97 1.04; } 100% { translate: 0 0; scale: 1; } }
.og-badge-pop { animation: og-badge-pop .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes og-badge-pop { 0% { scale: 1; } 40% { scale: 1.45; } 100% { scale: 1; } }

/* toast: white card top-right, thumbnail · ✓ title · name · View Cart · × · orange progress line */
.og-toast { position: fixed; top: 16px; right: 16px; z-index: 100001; display: flex; align-items: center; gap: 12px; width: 360px; max-width: calc(100vw - 24px); padding: 12px 40px 14px 12px; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(4, 31, 30, .18), 0 2px 6px rgba(0, 0, 0, .06); border-left: 4px solid var(--og-green); overflow: hidden; font-family: 'Open Sans', sans-serif; opacity: 0; transform: translateX(24px) scale(.98); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.og-toast.show { opacity: 1; transform: none; }
.og-toast-img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; object-fit: cover; background: #FBF9F5; border: 1px solid #F0EDE6; }
.og-toast-body { flex: 1 1 auto; min-width: 0; }
.og-toast-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--og-ink); line-height: 18px; }
.og-toast-title i { color: var(--og-green); font-size: 16px; }
.og-toast-name { margin-top: 2px; font-size: 13px; color: #666; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-toast-view { flex: 0 0 auto; height: 32px; padding: 0 12px; border: 1px solid var(--og-orange); border-radius: 6px; background: #fff; color: var(--og-orange); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease; }
.og-toast-view:hover { background: var(--og-orange); color: #fff; }
.og-toast-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #999; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.og-toast-x:hover { background: #F2F2F2; color: var(--og-ink); }
.og-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--og-orange), #F7B267); transform-origin: left; animation: og-toast-bar 2.8s linear forwards; }
.og-toast.paused .og-toast-bar { animation-play-state: paused; }
@keyframes og-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* phone: centred under the header, above the orange bottom bar's reach */
@media (max-width: 767.98px) {
  .og-toast { top: 10px; left: 12px; right: 12px; width: auto; max-width: none; transform: translateY(-16px); }
  .og-toast.show { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .og-toast, .og-cart-bounce, .og-badge-pop { transition: none; animation: none; }
}


/* ===== O-22: category filters/toolbar like theirs ===== */
#filterSidebar .og-filter-hidden, #filterSidebar .price-filter-row, #filterSidebar .filter-actions { display: none !important; }
#filterSidebar .og-price-labels { display: flex; justify-content: space-between; margin: 6px 0 12px; font-family: 'Open Sans', sans-serif; font-size: 13px; color: var(--og-ink); }
/* toolbar: [FILTERS] [Sort By : select] ............ [per-page select] — no product count (theirs has none) */
.category-info-bar { flex-direction: row !important; }
.category-info-bar .cat-count { display: none !important; }
.category-info-bar > .d-flex { flex: 1 1 auto; width: 100%; }
.category-info-bar .og-perpage { margin-left: auto !important; width: auto !important; flex: 0 0 auto !important; min-width: 94px; padding: 9px 28px 9px 13px !important; color: var(--og-orange) !important; }
.category-info-bar .cat-filter-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--og-orange) !important; border-radius: 4px !important; background: #fff !important; color: var(--og-orange) !important; font-family: 'Open Sans', sans-serif; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .3px; box-shadow: none !important; }
.category-info-bar .cat-filter-btn i { font-size: 16px; }
.category-info-bar .cat-filter-btn:hover { background: var(--og-orange) !important; color: #fff !important; }
@media (max-width: 991.98px) {
  .category-info-bar { padding: 12px !important; margin-bottom: 16px !important; }
  .category-info-bar > .d-flex { gap: 8px !important; }
  .category-info-bar .cat-sort { min-width: 0; flex: 0 1 auto; }
  /* filter drawer = their look: page-grey panel with the same white filter cards */
  #filterSidebar.filter-sidebar { background: #F2F4F8 !important; padding: 12px !important; }
  #filterSidebar .filter-mobile-header { background: transparent !important; border: 0 !important; padding: 0 0 8px !important; }
}
@media (max-width: 767.98px) {
  html body .container-category-grid { padding-top: 0 !important; }
  .container-category-grid > .row { margin-top: 0 !important; }
  .premium-page-header { padding: 10px 0 !important; }
  .category-info-bar { padding: 10px !important; margin-bottom: 12px !important; }
  .category-info-bar > .d-flex { gap: 6px !important; }
  .category-info-bar .cat-filter-btn { height: 36px; padding: 0 10px; font-size: 12px !important; gap: 6px; }
  .category-info-bar .cat-sort { height: 36px; min-width: 0; padding: 6px 24px 6px 8px !important; font-size: 12px !important; background-position: right 6px center !important; background-size: 12px !important; }
  .category-info-bar .og-perpage { min-width: 0; padding-left: 10px !important; }
}
@media (max-width: 991.98px) {
  html body .container-category-grid > .row { padding: 0 !important; --bs-gutter-y: 0; margin-top: 0 !important; }
  html body .container-category-grid > .row > [class*="col-"] { margin-top: 0 !important; }
}
/* footer is white at every width (theirs); gg-theme made it #101518 below 992 */
@media (max-width: 991.98px) {
  .main-footer, footer.main-footer { background: #fff !important; background-image: none !important; color: #666 !important; border-top: 1px solid #EEE; }
  .main-footer .footer-box, .main-footer .footer-col { background: transparent !important; color: #666 !important; border-color: #EEE !important; }
  .main-footer h5, .main-footer h4, .main-footer h6, .main-footer .footer-accordion-title { color: var(--og-ink) !important; }
  .main-footer a { color: #666 !important; }
  .main-footer .footer-newsletter input { background: #F5F5F5 !important; color: var(--og-ink) !important; border-color: #E3E3E3 !important; }
}
/* phone toolbar = their exact values (375): bar 359 wide pad 12 · FILTERS 94×38 13/600 2px border r3 · selects 136×38 / 94×38 12px r3 · title 16/600 */
@media (max-width: 767.98px) {
  .premium-page-header h1 { font-size: 16px !important; font-weight: 600 !important; line-height: 19.2px !important; }
  .premium-page-header .header-breadcrumb, .premium-page-header .header-breadcrumb a, .premium-page-header .header-breadcrumb span { font-size: 13px !important; }
  .category-info-bar { padding: 12px !important; margin-left: -4px !important; margin-right: -4px !important; }
  .category-info-bar > .d-flex { gap: 10px !important; }
  .category-info-bar .cat-filter-btn { height: 38px !important; padding: 0 10.8px !important; gap: 6px !important; border-width: 2px !important; border-radius: 3px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 13px; letter-spacing: 0 !important; }
  .category-info-bar .cat-filter-btn i { font-size: 14px !important; }
  .category-info-bar .cat-sort { height: 38px !important; width: 136px !important; flex: 0 0 136px !important; padding: 9px 27px 9px 9px !important; font-size: 12px !important; line-height: 18px !important; border: 1px solid #E3E3E3 !important; border-radius: 3px !important; color: var(--og-ink) !important; }
  .category-info-bar .og-perpage { width: 94px !important; flex: 0 0 94px !important; padding: 9px 28px 9px 13px !important; color: var(--og-orange) !important; }
}
/* phone: the number is already in the contact row → hide the extra call button (theirs shows it once) */
@media (max-width: 991.98px) {
  .main-footer .footer-call-btn { display: none !important; }
}

/* =====================================================================
   O-23 SIDE CART — their drawer: 400px white · "SHOPPING CART / Close →" · item cards ·
   grey "You May Also Like" strip · Total · orange CHECKOUT
   ===================================================================== */
#miniCart.mini-cart { width: 400px !important; max-width: 100vw !important; background: #fff !important; border-radius: 0 !important; display: flex !important; flex-direction: column; font-family: 'Open Sans', sans-serif; }
#miniCart .mini-cart-header { height: 40px; padding: 12px 24px !important; border-bottom: 1px solid #EEE !important; background: transparent !important; display: flex !important; align-items: center; justify-content: space-between; }
#miniCart .mini-cart-header h4 { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 14px !important; text-transform: uppercase; color: var(--og-ink) !important; letter-spacing: 0 !important; }
#miniCart .mini-cart-close { width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; display: inline-flex !important; align-items: center; gap: 6px; font-size: 14px !important; font-weight: 400; color: var(--og-ink) !important; text-transform: capitalize; }
#miniCart .mini-cart-close i { font-size: 16px; }
#miniCart .mini-cart-close:hover { color: var(--og-orange) !important; }
#miniCart .mini-cart-body { flex: 1 1 auto; overflow-y: auto; padding: 20px !important; background: #fff !important; }

/* item = white card, soft shadow, r8, pad 12 28 12 12 */
#miniCart .mini-cart-item { position: relative; display: flex !important; align-items: center; gap: 12px; padding: 12px 28px 12px 12px !important; margin: 0 0 16px !important; background: #fff !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 2px 2px rgba(34, 40, 49, .08) !important; }
#miniCart .mini-cart-item > img { width: 56px !important; height: 56px !important; flex: 0 0 56px; object-fit: cover; border: 1px solid #CCC !important; border-radius: 8px !important; background: #fff; margin: 0 !important; }
#miniCart .mini-cart-item-info { flex: 1 1 auto; min-width: 0; }
#miniCart .mini-cart-item-name { display: block; max-width: 200px; font-size: 14px !important; font-weight: 500 !important; line-height: 16.8px !important; color: var(--og-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none !important; margin: 0 0 4px !important; }
#miniCart a.mini-cart-item-name:hover { color: var(--og-orange) !important; }
#miniCart .mini-cart-item-attr { font-size: 12px; color: #767A7A; margin-bottom: 4px; }
#miniCart .mini-cart-item-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#miniCart .mini-cart-qty { display: inline-flex !important; align-items: center; gap: 0 !important; width: 72px; height: 24px; margin: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; }
#miniCart .mini-cart-qty button { width: 24px !important; height: 24px !important; padding: 0 !important; border: 1px solid #ECECEC !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; font-size: 16px !important; line-height: 1 !important; display: flex; align-items: center; justify-content: center; box-shadow: none !important; }
#miniCart .mini-cart-qty button:hover { border-color: var(--og-orange) !important; color: var(--og-orange) !important; }
#miniCart .mini-cart-qty .qty-value { width: 24px; text-align: center; font-size: 12px !important; font-weight: 400 !important; color: #000 !important; }
#miniCart .mini-cart-times { font-size: 14px; line-height: 1; color: #000; margin: 0 2px; }
#miniCart .mini-cart-item-price, #miniCart .mini-cart-item-total { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 16.8px; letter-spacing: -.7px; color: var(--og-ink) !important; margin: 0 !important; }
#miniCart .mini-cart-item-remove { position: absolute !important; right: 12px; top: 50%; transform: translateY(-50%); width: 18px !important; height: 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #000 !important; font-size: 13px !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; }
#miniCart .mini-cart-item-remove:hover { color: #FF3F33 !important; }
#miniCart .mini-cart-empty { color: #767A7A; }

/* footer: grey strip (suggestions + total + checkout); no free-delivery bar / view-cart link (theirs has none) */
#miniCart .mini-cart-footer { background: #F5F5F5 !important; padding: 12px 24px 24px !important; border-top: 0 !important; box-shadow: none !important; }
#miniCart #miniCartFreeDeliveryWrap, #miniCart .mini-cart-view-btn { display: none !important; }
#miniCart .cart-drawer-recs { display: block !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 8px !important; }
#miniCart .cart-drawer-recs .drawer-rec-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px !important; }
#miniCart .cart-drawer-recs .drawer-rec-title { position: relative; margin: 0 !important; padding-bottom: 8px; font-size: 16px !important; font-weight: 700 !important; line-height: 19.2px; color: var(--og-ink) !important; }
#miniCart .cart-drawer-recs .drawer-rec-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--og-orange); }
#miniCart .cart-drawer-recs .drawer-rec-nav { display: flex; gap: 8px; }
#miniCart .cart-drawer-recs .drawer-rec-nav-btn { width: 28px !important; height: 28px !important; border-radius: 50% !important; border: 0 !important; background: var(--og-orange) !important; color: #fff !important; font-size: 12px !important; display: flex; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; }
#miniCart .cart-drawer-recs .drawer-rec-nav-btn:hover { background: var(--og-nav) !important; }
#miniCart .cart-drawer-recs .close-rec-btn { display: none !important; }
#miniCart .cart-drawer-recs .drawer-rec-slider-wrapper { overflow: hidden !important; }
#miniCart .cart-drawer-recs .drawer-rec-track { display: flex; gap: 16px; overflow: visible !important; } /* app.js slideDrawerRecs moves the track with transform */
#miniCart .cart-drawer-recs .drawer-rec-track::-webkit-scrollbar { display: none; }
/* suggestion card: white, 1px #DDD, r12, pad 12 — 72px picture left, name / price / orange "+ Add" pill right */
#miniCart .cart-drawer-recs .drawer-rec-card { flex: 0 0 282px !important; max-width: 282px; display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 12px !important; background: #fff !important; border: 1px solid #DDD !important; border-radius: 12px !important; box-shadow: none !important; text-decoration: none !important; scroll-snap-align: start; }
#miniCart .cart-drawer-recs .drawer-rec-img { width: 72px !important; height: 72px !important; flex: 0 0 72px; border-radius: 12px !important; object-fit: cover; margin: 0 !important; background: #FBF9F5; }
#miniCart .cart-drawer-recs .drawer-rec-info { min-width: 0; flex: 1 1 auto; padding: 0 !important; text-align: left; }
#miniCart .cart-drawer-recs .drawer-rec-name { margin: 0 0 4px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 13.2px !important; color: var(--og-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#miniCart .cart-drawer-recs .drawer-rec-price-row { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; }
#miniCart .cart-drawer-recs .drawer-rec-price { font-size: 12px !important; font-weight: 400 !important; color: #767A7A !important; }
#miniCart .cart-drawer-recs .drawer-rec-add-btn { height: 19px; padding: 4px 12px !important; border: 0 !important; border-radius: 12px !important; background: var(--og-orange) !important; color: #fff !important; font-size: 10px !important; line-height: 11px !important; font-weight: 400 !important; }
#miniCart .cart-drawer-recs .drawer-rec-add-btn:hover { background: var(--og-nav) !important; }
/* Total row + CHECKOUT */
#miniCart .mini-cart-subtotal { display: flex !important; justify-content: space-between; align-items: center; padding: 12px 0 !important; margin: 0 !important; border: 0 !important; }
#miniCart .mini-cart-subtotal > span:first-child { font-size: 14px !important; font-weight: 600 !important; color: var(--og-ink) !important; letter-spacing: -.35px; }
#miniCart .mini-cart-subtotal .amount { font-size: 16px !important; font-weight: 600 !important; color: var(--og-ink) !important; letter-spacing: -.35px; }
#miniCart .mini-cart-checkout-btn { width: 100% !important; height: 37px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; background: var(--og-orange) !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 13px; text-transform: uppercase; box-shadow: none !important; display: flex !important; align-items: center; justify-content: center; }
#miniCart .mini-cart-checkout-btn i { display: none; }
#miniCart .mini-cart-checkout-btn:hover { background: var(--og-nav) !important; }
/* the nav drawer keeps its old look (O-18): no suggestion slider there */
#mainNavbar .drawer-recommendations { display: none !important; }
@media (max-width: 575.98px) {
  #miniCart.mini-cart { width: 100% !important; }
  #miniCart .mini-cart-item-name { max-width: 190px; }
  #miniCart .cart-drawer-recs .drawer-rec-card { flex-basis: 262px !important; max-width: 262px; }
}
/* product gallery arrows = theirs: 27×44, Swiper chevron at 44px, active rgb(0,122,255), disabled #CCC @ .35 */
.product-main-swiper .swiper-button-next, .product-main-swiper .swiper-button-prev { color: rgb(0, 122, 255) !important; --swiper-navigation-size: 44px; }
.product-main-swiper .swiper-button-next::after, .product-main-swiper .swiper-button-prev::after { content: '' !important; display: none !important; }
/* theirs draws a 13.3px icon-font chevron in ::before (::after is empty) */
.product-main-swiper .swiper-button-next::before, .product-main-swiper .swiper-button-prev::before { font-family: 'bootstrap-icons' !important; font-size: 13.3px; line-height: 1; color: inherit; }
.product-main-swiper .swiper-button-next::before { content: "\F285"; }
.product-main-swiper .swiper-button-prev::before { content: "\F284"; }
.product-main-swiper .swiper-button-disabled { color: #CCC !important; opacity: .35 !important; }
/* side-cart remove × = theirs: 14px, #222831 */
#miniCart .mini-cart-item-remove { width: 14px !important; height: 16px !important; color: var(--og-ink) !important; font-size: 14px !important; }
#miniCart .mini-cart-item-remove i { font-size: 14px !important; line-height: 1; -webkit-text-stroke: .2px; }
/* closed side cart fully off-screen at every width (responsive.css used right:-92% for the old 92%-wide drawer →
   the new 100%/400px drawer peeked 30px in from the right on phones) */
#miniCart.mini-cart:not(.active) { right: calc(-100vw - 40px) !important; visibility: hidden; transition: right .3s ease, visibility 0s linear .3s; }
#miniCart.mini-cart.active { right: 0 !important; visibility: visible; transition: right .3s ease; }

/* =====================================================================
   O-24 — re-measured side by side at 1920: their "Featured Categories" is centred,
   product pictures are square (1000×1000 → 263×263; the old 89.9% came from their
   lazy 266×240 placeholders), Top Selling old price 18/500
   ===================================================================== */
section .featured-cats-header.d-flex.justify-content-between { justify-content: center !important; }
section .featured-cats-header .text-start { flex: 1 1 auto; text-align: center !important; }
.featured-cats-header .section-title { text-align: center; }
html body section:not(.tp-horizontal) .product-card .product-image-wrap { padding-top: 100% !important; }
@media (min-width: 992px) {
  .tp-horizontal .product-card .product-original-price { font-size: 18px !important; font-weight: 500 !important; }
}

/* =====================================================================
   O-25 PHONE CARDS — measured on theirs at 440:
   card 198×320: pad 8, 180² picture, details pad-top 12, name 14/500 two lines (34),
   8px, price 16/600 Poppins + old 16/400 #AAA (26 high), 7px, button 34 high.
   Top Selling 202×314: 202² picture, pad 12, name ONE line 14/600 ellipsis, 7px,
   price · old · Save pill on one line (21), 12px, button 30.
   ===================================================================== */
@media (max-width: 767.98px) {
  html body section:not(.tp-horizontal) .product-card .product-info { padding: 12px 0 0 !important; }
  html body section:not(.tp-horizontal) .product-card .product-name { height: 34px !important; min-height: 0 !important; margin: 0 0 8px !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html body section:not(.tp-horizontal) .product-card .product-price-wrap { height: 26px; margin: 0 !important; align-items: center; flex-wrap: nowrap; overflow: hidden; }
  html body section:not(.tp-horizontal) .product-card .product-price { font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 25.6px !important; }
  html body section:not(.tp-horizontal) .product-card .product-original-price { font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; color: #AAA !important; line-height: 25.6px !important; }
  html body section:not(.tp-horizontal) .product-card .product-card-actions { margin: 7px 0 0 !important; padding: 0 !important; }
  html body section:not(.tp-horizontal) .product-card .product-card-actions .add-to-cart-btn,
  html body section:not(.tp-horizontal) .product-card .product-card-actions .og-qty { margin: 0 !important; height: 34px !important; }

  html body .tp-horizontal .product-card .product-name { height: auto !important; margin: 0 0 7px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
  html body .tp-horizontal .product-card .product-name a { white-space: nowrap !important; }
  html body .tp-horizontal .product-card .product-price-wrap { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 0 6px; height: 21px; overflow: hidden; }
  html body .tp-horizontal .product-card .tp-save-pill { margin: 0 0 0 6px !important; white-space: nowrap; }
  /* pill outside .product-price-wrap in the markup → info becomes a wrapping row so it sits on the price line */
  html body .tp-horizontal .product-card .product-info { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center; align-content: flex-start; }
  html body .tp-horizontal .product-card .product-info > * { flex: 0 0 100% !important; min-width: 0; }
  html body .tp-horizontal .product-card .product-info > .product-price-wrap { flex: 0 1 auto !important; }
  html body .tp-horizontal .product-card .product-info > .tp-save-pill { flex: 0 0 auto !important; }
  html body .tp-horizontal .product-card .product-info > .product-card-actions { margin-top: auto !important; }
}
/* O-25 category / collection grid on phone — theirs at 440: cards 208×330 from x4, 16px gaps
   (grid wider than the toolbar), same card insides as the home cards, 8px above the button */
#categoryGrid .product-card .product-image-wrap { padding-top: 100% !important; }
@media (max-width: 767.98px) {
  html body #categoryGrid.row { margin: 15px -8px 0 !important; gap: 16px !important; }
  html body #categoryGrid .product-card .product-info { padding: 12px 0 0 !important; }
  html body #categoryGrid .product-card .product-name { height: 34px !important; min-height: 0 !important; margin: 0 0 8px !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html body #categoryGrid .product-card .product-price-wrap { height: 26px; margin: 0 !important; align-items: center; flex-wrap: nowrap; overflow: hidden; }
  html body #categoryGrid .product-card .product-price { font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 25.6px !important; }
  html body #categoryGrid .product-card .product-original-price { font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; color: #AAA !important; line-height: 25.6px !important; }
  html body #categoryGrid .product-card .product-card-actions { margin: 8px 0 0 !important; padding: 0 !important; }
  html body #categoryGrid .product-card .product-card-actions .add-to-cart-btn,
  html body #categoryGrid .product-card .product-card-actions .og-qty { margin: 0 !important; height: 34px !important; }
}

/* O-25: their collection page has no brand pill row above the toolbar (brands stay in the Filters panel) */
html body .brand-pills { display: none !important; }

/* O-27: bottom-bar cart badge hidden while the cart is empty (JS sets display:none; beats the flex !important above) */
html body #mobileCartBadge[style*="none"] { display: none !important; }

/* =====================================================================
   O-28 — raised centre CART button in the phone bottom bar (user's reference: a round
   "Add Funds" button lifted out of the bar on a bump). Orange bump · white 52px circle ·
   orange cart icon · dark count badge on the circle · CART label on the same line as the rest
   ===================================================================== */
@media (max-width: 991.98px) {
  html body .mobile-bottom-item[data-og-action="cart"] { position: relative; overflow: visible !important; }
  /* the bump: an orange disc behind the circle, so the bar looks pushed up around it */
  /* smooth hump (circle of r35 with soft concave shoulders into the bar top), not a plain disc with sharp corners */
  html body .mobile-bottom-item[data-og-action="cart"]::before { content: ''; position: absolute; left: 50%; top: -45px; width: 120px; height: 46px; margin-left: -60px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'><path fill='%23F48721' d='M0 36H10C19 36 23.5 33 25.7 28A35 35 0 0 1 94.3 28C96.5 33 101 36 110 36H120V46H0Z'/></svg>") center / 100% 100% no-repeat; z-index: 0; pointer-events: none; }
  html body .mobile-bottom-item[data-og-action="cart"] .item-icon-wrapper { position: relative; z-index: 1; width: 52px !important; height: 52px !important; margin: -36px auto 0 !important; border-radius: 50% !important; background: #fff !important; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(4, 31, 30, .22), inset 0 0 0 1px rgba(244, 135, 33, .15); transition: transform .2s ease, box-shadow .2s ease; }
  html body .mobile-bottom-item[data-og-action="cart"] .item-icon-wrapper i { font-size: 22px !important; line-height: 22px !important; color: var(--og-orange) !important; }
  html body .mobile-bottom-item[data-og-action="cart"]:active .item-icon-wrapper { transform: scale(.93); box-shadow: 0 3px 8px rgba(4, 31, 30, .22); }
  html body .mobile-bottom-item[data-og-action="cart"] .item-label { position: relative; z-index: 1; font-weight: 600 !important; }
  html body .mobile-bottom-item[data-og-action="cart"] #mobileCartBadge { top: 1px !important; right: 1px !important; min-width: 18px !important; width: auto !important; height: 18px !important; padding: 0 4px !important; border-radius: 9px !important; line-height: 18px !important; font-size: 11px !important; font-weight: 600; box-shadow: 0 0 0 2px #fff; }
}
/* O-30 — closer to the reference: the circle itself is filled (brand orange) with a white icon and a
   white ring, 56px, sitting a little higher; the hump follows it (+2px) */
@media (max-width: 991.98px) {
  html body .mobile-bottom-item[data-og-action="cart"]::before { top: -47px; }
  html body .mobile-bottom-item[data-og-action="cart"] .item-icon-wrapper { width: 56px !important; height: 56px !important; margin: -40px auto 0 !important; background: var(--og-orange) !important; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(4, 31, 30, .28) !important; }
  html body .mobile-bottom-item[data-og-action="cart"] .item-icon-wrapper i { font-size: 24px !important; line-height: 24px !important; color: #fff !important; }
  html body .mobile-bottom-item[data-og-action="cart"] #mobileCartBadge { top: -2px !important; right: -2px !important; }
}
/* O-31 — notch instead of hump (user: "a U around the button, empty, no bg"): the bar's orange is
   drawn by .mobile-bottom-nav::before and a radial mask cuts a transparent U at the top centre, so
   the page shows through the 8px gap around the floating circle. The cart item is the middle of 5
   equal items, so the notch sits at 50%. */
@media (max-width: 991.98px) {
  html body .mobile-bottom-nav { background: transparent !important; isolation: isolate; }
  html body .mobile-bottom-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--og-orange);
    -webkit-mask: radial-gradient(circle at 50% -3px, transparent 32px, #000 32.75px);
            mask: radial-gradient(circle at 50% -3px, transparent 32px, #000 32.75px); }
  html body .mobile-bottom-item[data-og-action="cart"]::before { display: none !important; }
}

/* O-32: no white ring on the centre cart circle (user) */
@media (max-width: 991.98px) { html body .mobile-bottom-item[data-og-action="cart"] .item-icon-wrapper { border: 0 !important; } }

/* =====================================================================
   O-34 — iPhone needed TWO taps on "Add To Cart". On touch screens iOS treats the first tap as
   a hover when :hover changes the page (here the card jumped up 3–6px and the button turned
   orange/black), and only the second tap clicks. Touch devices get no hover effects on cards
   and their buttons (static = same as normal state); a quick :active flash is the tap feedback.
   ===================================================================== */
@media (hover: none) {
  html body .product-card:hover { transform: none !important; box-shadow: none !important; }
  html body .product-card:hover .product-image { transform: none !important; }
  html body .product-card .add-to-cart-btn:hover,
  html body .product-card .add-to-cart-btn:focus { background: transparent !important; color: var(--og-orange) !important; border-color: var(--og-orange) !important; box-shadow: none !important; transform: none !important; }
  html body .product-card .add-to-cart-btn:active { background: rgba(244, 135, 33, .12) !important; }
  html body .product-card .tp-buy-now-btn:hover { transform: none !important; box-shadow: none !important; }
  html body .category-card:hover, html body .category-card:hover .cat-icon, html body .category-card:hover .cat-icon img { transform: none !important; }
}
/* no double-tap-zoom wait on tappable controls */
.product-card a, .product-card button, .og-qty button, .mobile-bottom-item, .mini-cart button, .drawer-rec-card button { touch-action: manipulation; }