/* =========================================================================
   We Ideal Office Automation - Public site theme
   Light, clean, modern tech look built to blend with the actual logo
   artwork's navy-blue color (#01285f): deep navy (logo color) + gold
   accents on a crisp white/soft-gray surface, with a near-black brand
   color for headings, the footer band and high-contrast text.
   Update 57: --ideal-accent / --ideal-accent-bright / --ideal-accent-soft
   switched from the old teal palette to the logo's own navy blue so the
   site's primary color reads as the same blue as the logo instead of a
   teal that didn't actually appear anywhere in the artwork.
   ========================================================================= */

:root {
  --ideal-bg: #ffffff;
  --ideal-bg-alt: #f4f7f8;
  --ideal-card: #ffffff;
  --ideal-card-2: #fafcfc;
  --ideal-border: #e2e8ec;
  --ideal-dark: #17171c;          /* brand black - headings / high-contrast text */
  --ideal-dark-2: #22242b;
  --ideal-accent: #01285f;        /* logo navy blue (exact match) - price, links, primary brand color */
  --ideal-accent-bright: #1f5fa8; /* brighter blue in the same family - icons, borders, glows, gradients */
  --ideal-accent-soft: rgba(1, 40, 95, .12);
  --ideal-gold: #f2c400;          /* gold - badges, highlights, icon fills (kept as contrast accent alongside navy) */
  --ideal-gold-soft: rgba(242, 196, 0, .18);
  --ideal-danger: #e0384f;
  --ideal-success: #17974f;
  --ideal-text: #23272d;
  --ideal-text-muted: #6b7580;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--ideal-bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(31,95,168,.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(242,196,0,.07) 0%, transparent 40%),
    linear-gradient(rgba(23,23,28,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,23,28,.028) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
  color: var(--ideal-text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--ideal-accent); }
a:hover { color: var(--ideal-accent-bright); }

/* ---- Brand lockup: the client's real logo (icon + wordmark, one image)
   used in navbar / footer / admin sidebar / admin login. Replaces the
   earlier icon + live CSS text combo (Update 7-26) now that the client
   has supplied the actual combined logo artwork. */
.brand-mark { display: inline-flex; align-items: center; text-decoration: none; }
/* Update 55: sized by WIDTH with height:auto (was the reverse) so the whole
   lockup - icon + wordmark + tagline - reads at a bigger, clearer size
   instead of being squeezed down to fit a fixed row height.
   Update 56: floor raised to a consistent 190px on every device (mobile no
   longer sized smaller than this) per client feedback. */
.brand-full-logo { width: 190px; height: auto; }

/* ---- Top bar & navbar -------------------------------------------------- */
.topbar {
  background-color: var(--ideal-dark);
  color: #b9c3c8;
  border-bottom: 1px solid var(--ideal-border);
}
.topbar a { color: #b9c3c8; text-decoration: none; }
.topbar a:hover { color: var(--ideal-gold); }

.main-navbar {
  background-color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ideal-border);
  /* Sticky on every device/breakpoint (desktop 2-row layout included).
     Set directly here (not left to the "sticky-top" utility class alone)
     because Bootstrap's own `.sticky-top` rule has no !important, so a
     same-specificity `.main-navbar { position: relative }` declared later
     in this file (needed below for the ::after underline) was silently
     winning the cascade and cancelling the stickiness - the navbar was
     scrolling away with the page instead of staying pinned at the top. */
  position: sticky;
  top: 0;
  z-index: 1020;
}
.main-navbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ideal-accent-bright), var(--ideal-gold), transparent);
  opacity: .9;
}
.main-navbar .nav-link {
  color: var(--ideal-text);
  font-weight: 600;
  margin: 0 .35rem;
  padding: .4rem .2rem;
  position: relative;
  transition: color .2s ease;
}
.main-navbar .nav-link::after {
  content: "";
  position: absolute; left: .2rem; right: .2rem; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--ideal-accent-bright), var(--ideal-gold));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.main-navbar .nav-link.active,
.main-navbar .nav-link:hover {
  color: var(--ideal-accent);
}
.main-navbar .nav-link.active::after,
.main-navbar .nav-link:hover::after {
  transform: scaleX(1);
}

.footer-logo-full { width: 210px; height: auto; }
.sidebar-logo-full { max-width: 100%; height: auto; }
.login-logo-full { max-width: 280px; width: 100%; height: auto; margin-bottom: .5rem; }

/* ---- Navbar restructure (Update 28) --------------------------------------
   Layout adopts the general feel of a reference storefront the client
   shared - prominent logo, centered search bar, a "Call Us" contact box, a
   categories-browse row, main nav links, and (on mobile) a hamburger that
   opens an offcanvas panel with Main Menu / Categories tabs - restyled
   entirely in this site's own light teal/gold theme rather than the
   reference's dark/red colors. Cart/Favorites/Compare/Weekly-Deals/
   Branches/Gallery from the reference are intentionally left out - this
   site has no cart or online checkout (WhatsApp/Call ordering only). */

/* Row 1 logo gets a little more presence than the old single-row navbar.
   Update 55: width-anchored (height: auto) and sized up so the wordmark
   is comfortably legible instead of shrinking to fit a fixed height.
   Update 56: mobile floor raised to 190px (was 180px) so every device shows
   the logo at at least the same 190px width, not smaller on mobile. */
.main-navbar .brand-full-logo { width: 220px; height: auto; }
@media (max-width: 575.98px) {
  .main-navbar .brand-full-logo { width: 190px; }
}

/* Note (Update 32): the separate live-text ".brand-tagline" element added in
   Update 31 (stacked under the logo via ".brand-mark-desktop") has been
   removed - the "Your Ideal Office Solution" slogan is now baked directly
   into the logo artwork itself (assets/img/logo-full.png / -white.png),
   blended in as a second line under "IDEAL OFFICE AUTOMATION" in the same
   clean font, so it now shows everywhere the logo appears (navbar on every
   breakpoint, mobile offcanvas, footer, admin sidebar, admin login) instead
   of only in the desktop navbar. Keeping both the baked-in line and this
   separate HTML line together would have shown the slogan twice. */

/* Centered search bar in navbar row 1 - reuses .shop-search-box, capped so
   it doesn't stretch the full width of a wide desktop row. */
.nav-search-box { width: 100%; max-width: 420px; }

/* "Need Help? Call Us" contact box, desktop only. */
.nav-call-box {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--ideal-text);
  transition: color .2s ease;
}
.nav-call-box:hover { color: var(--ideal-accent); }
.nav-call-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--ideal-accent-bright), var(--ideal-accent));
  font-size: 1.05rem;
}
.nav-call-text { display: flex; flex-direction: column; line-height: 1.25; }
.nav-call-text small { color: var(--ideal-text-muted); font-size: .72rem; }
.nav-call-text strong { font-size: .95rem; color: var(--ideal-text); }

/* Row 2 - thin "Browse Categories + nav links" bar under the main row. */
.navbar-row-2 {
  border-top: 1px solid var(--ideal-border);
  padding: .55rem 0;
}
.nav-cat-toggle {
  display: flex; align-items: center;
  padding: .5rem 1.1rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ideal-accent-bright), var(--ideal-accent));
  border: none;
}
.nav-cat-toggle:hover, .nav-cat-toggle:focus {
  color: #fff;
  box-shadow: 0 4px 14px rgba(31,95,168,.3);
}
.navbar-row-2 .navbar-nav .nav-link { margin: 0 .5rem; }

/* Mobile top row: the hamburger button (left) and the centered logo. A
   WhatsApp icon button used to sit on the right with this same footprint so
   the logo landed dead-center between the two - removed per client request
   (Update 34); ".nav-icon-spacer" below takes over just its width/height so
   the logo doesn't drift off-center now that nothing balances the hamburger. */
.nav-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ideal-border);
  background: var(--ideal-card);
  color: var(--ideal-text);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.nav-icon-btn:hover, .nav-icon-btn:focus { color: var(--ideal-accent); border-color: var(--ideal-accent-bright); }
.nav-icon-spacer { width: 42px; height: 42px; flex-shrink: 0; }

/* Mobile offcanvas menu - light theme (not the reference site's dark
   panel), with Main Menu / Categories tabs. */
.mobile-nav-offcanvas {
  width: 300px;
  /* Sit above the floating WhatsApp button (z-index 1050) so it doesn't
     poke through the panel while the mobile menu is open. */
  z-index: 1060;
}
.mobile-nav-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--ideal-border);
  padding: 1rem 1.15rem;
}
/* Update 56: bumped up to the same 190px floor used everywhere else - was
   noticeably smaller (150px) than the navbar logo right above it. */
.offcanvas-logo { width: 190px; height: auto; }
.mobile-nav-tabs {
  border-bottom: 1px solid var(--ideal-border);
  padding: 0 .75rem;
}
.mobile-nav-tabs .nav-link {
  color: var(--ideal-text-muted);
  font-weight: 600;
  font-size: .88rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .85rem .9rem;
}
.mobile-nav-tabs .nav-link.active {
  color: var(--ideal-accent);
  background: transparent;
  border-bottom-color: var(--ideal-accent-bright);
}
.mobile-nav-links li { border-bottom: 1px solid var(--ideal-border); }
.mobile-nav-links li:last-child { border-bottom: none; }
.mobile-nav-links a {
  display: block;
  padding: .85rem .25rem;
  color: var(--ideal-text);
  text-decoration: none;
  font-weight: 500;
}
.mobile-nav-links a:hover, .mobile-nav-links a.active { color: var(--ideal-accent); }

/* ---- Hero (Update 45: two-column layout - static welcome message + logo on
   the left, real-product showcase slider on the right. Update 44 briefly
   merged both into one full-width slider; this restores the two-column look
   the client wanted while keeping Update 44's real product photo/price/stock
   slides on the right instead of the old icon-only mini carousel.) -------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #f7fbfc 0%, #eef7f8 55%, #fdfaf0 100%);
  border-bottom: 1px solid var(--ideal-border);
  padding: 3.5rem 0;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 30%, rgba(31,95,168,.08) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(242,196,0,.08) 0%, transparent 40%),
    url('../img/tech-pattern.svg');
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, auto, 320px 320px;
  opacity: .4;
  pointer-events: none;
}
@media (max-width: 575.98px) {
  .hero::before { background-size: auto, auto, 220px 220px; }
}
.hero > .container { position: relative; z-index: 1; }
.hero h1, .hero h2 { font-weight: 800; color: var(--ideal-dark); }
.hero .accent { color: var(--ideal-accent); }
.hero-stats .stat-box {
  background: linear-gradient(180deg, var(--ideal-card), var(--ideal-card-2));
  border: 1px solid var(--ideal-border);
  border-radius: .75rem;
  padding: .85rem .5rem;
  box-shadow: 0 2px 10px rgba(23,23,28,.05);
}

/* Left column - static welcome message (logo removed, Update 47). */
@media (max-width: 991.98px) { .hero-welcome-col { text-align: center; } }
@media (max-width: 991.98px) { .hero-welcome-col .d-flex.gap-3 { justify-content: center; } }

/* Right column - real-product showcase slider. Uses Bootstrap's own
   carousel-fade transition (CSS opacity/transform, no custom scroll JS) so
   it behaves identically across desktop/mobile and every browser, including
   Safari/iOS where the category slider's earlier hand-rolled scrollTo
   approach ran into trouble (see Updates 37-39). Native touch swipe comes
   from Bootstrap for free. */
.hero-slider { position: relative; z-index: 1; padding: 0 2.75rem; }
@media (max-width: 575.98px) { .hero-slider { padding: 0 2.25rem; } }

/* One real selling product per slide (photo + name + price + stock +
   View Product), pulled from the same featured-products data used in the
   "Major Products" section further down the page - stacked as a compact
   card since this now lives in a half-width column, not the full page. */
.hero-product-card { padding: .5rem 0 1rem; max-width: 360px; }
.hero-product-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ideal-accent-bright);
  margin-bottom: .35rem;
}
.hero-product-name { font-size: 1.4rem; }
.hero-product-price { font-size: 1.25rem; font-weight: 800; color: var(--ideal-dark); }
.hero-product-frame {
  max-width: 240px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: linear-gradient(180deg, var(--ideal-card), var(--ideal-card-2));
  border: 1px solid var(--ideal-border);
  border-radius: 1.25rem;
  box-shadow: 0 14px 34px rgba(23,23,28,.1), 0 0 0 1px rgba(31,95,168,.06);
}
.hero-product-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hero-product-card-empty { padding: 2rem 1rem; }

/* Update 46 - owner-uploaded custom banner slides: shown at their own
   natural proportions (no cropping/forcing into a square frame like the
   auto-generated product cards above), since the owner's own designed
   graphic already includes whatever photo/badges/branding they want. Just a
   rounded-corner frame + soft shadow so it still reads as part of the site. */
.hero-banner-slide { max-width: 480px; padding: .5rem 0 1rem; }
.hero-banner-slide a { display: block; }
.hero-banner-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(23,23,28,.12), 0 0 0 1px rgba(31,95,168,.06);
}

/* Prev/next arrows - same circular button treatment as the category
   slider's arrows (.cat-slider-arrow) for a consistent look site-wide.
   Bootstrap's own data-bs-slide="prev"/"next" handles the actual sliding
   (CSS transform, not scrollLeft), so these are safe on every browser. */
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ideal-border);
  background: var(--ideal-bg);
  color: var(--ideal-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 14px rgba(23,23,28,.1);
  z-index: 2;
  padding: 0;
  opacity: 1;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.hero-slider-arrow:hover { background: var(--ideal-accent-bright); color: #fff; box-shadow: 0 6px 18px rgba(31,95,168,.3); }
.hero-slider-arrow-prev { left: 0; }
.hero-slider-arrow-next { right: 0; }
@media (max-width: 575.98px) {
  .hero-slider-arrow { width: 32px; height: 32px; font-size: .9rem; }
}

.hero-slider-dots { position: relative; margin-top: 1rem !important; }
.hero-slider-dots [data-bs-target] {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--ideal-border) !important;
  opacity: 1 !important;
  border: none !important;
}
.hero-slider-dots [data-bs-target].active { background-color: var(--ideal-accent-bright) !important; }

/* ---- Section headings ---------------------------------------------------- */
.section-title {
  font-weight: 800;
  color: var(--ideal-dark);
  position: relative;
  padding-bottom: .6rem;
  margin-bottom: 1.75rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 60px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ideal-accent-bright), var(--ideal-gold));
}
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }

/* ---- Cards: categories & products ----------------------------------------- */
.category-card, .product-card {
  background: linear-gradient(180deg, var(--ideal-card), var(--ideal-card-2));
  border: 1px solid var(--ideal-border);
  border-radius: .85rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
  height: 100%;
  position: relative;
  box-shadow: 0 3px 14px rgba(23,23,28,.06), 0 1px 3px rgba(23,23,28,.04);
}
.category-card:hover, .product-card:hover {
  transform: translateY(-5px);
  border-color: var(--ideal-accent-bright);
  box-shadow: 0 14px 30px rgba(23,23,28,.1), 0 0 0 1px rgba(31,95,168,.15);
}
/* Thin accent bar across the top edge, revealed on hover/focus - a small
   eye-catching detail shared by category + product tiles. */
.category-card::before, .product-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-top-left-radius: .85rem;
  border-top-right-radius: .85rem;
  background: linear-gradient(90deg, var(--ideal-accent-bright), var(--ideal-gold));
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2;
}
.category-card:hover::before, .product-card:hover::before,
.category-card:focus-within::before, .product-card:focus-within::before { opacity: 1; }
.category-card a, .product-card a.stretched-link, .cat-tile a { color: inherit; text-decoration: none; }
.cat-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ideal-accent-soft);
  border: 1px solid rgba(31,95,168,.3);
  border-radius: 50%;
  font-size: 1.6rem;
  color: var(--ideal-accent);
  transition: box-shadow .2s ease;
}
.category-card:hover .cat-icon,
.cat-tile:hover .cat-icon { box-shadow: 0 0 0 6px rgba(31,95,168,.12); }

.product-card .product-img-wrap {
  background: radial-gradient(circle at 28% 22%, rgba(31,95,168,.06), transparent 60%), #f6f9fa;
  border-bottom: 1px solid var(--ideal-border);
  height: 190px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-top-left-radius: .85rem;
  border-top-right-radius: .85rem;
}
.product-card .product-img-wrap img {
  max-height: 100%; max-width: 100%; object-fit: contain;
  transition: transform .3s ease;
}
.product-card:hover .product-img-wrap img { transform: scale(1.05); }
.product-card .price { color: var(--ideal-accent); font-weight: 700; font-size: 1.1rem; }
.product-card.is-out-of-stock .product-img-wrap img { opacity: .45; filter: grayscale(.4); }
.product-card { overflow: hidden; }
.product-card .cat-eyebrow {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ideal-accent);
  background: var(--ideal-accent-soft);
  padding: .2rem .55rem;
  border-radius: 999px;
  margin-bottom: .5rem;
}
.product-card .product-title {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.product-card .btn-view { border-radius: 999px; }

/* "New" badge (Update 47) - independent of the Hot Price ribbon; occupies
   the top-left corner slot (Update 49: the "Out of Stock" corner badge was
   removed from product cards - stock status is still shown via the
   in-card stock_badge() next to the price). */
.badge-new {
  position: absolute;
  top: .6rem; left: .6rem;
  z-index: 3;
  background: var(--ideal-accent-bright, #1f5fa8);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .3rem .65rem;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(18,165,148,.35);
}

/* ---- Auto-moving marquee (Our Brands strip only - the category strip
   below was switched from this one-directional marquee to a manually
   steerable slider, see ".cat-slider" further down) --------- */
.brand-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.brand-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: ideal-marquee-scroll 34s linear infinite reverse;
}
.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }
@keyframes ideal-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Shop by Category slider ----------------------------------------------
   A native horizontally-scrollable track (touch swipe works for free) that
   JS (main.js) auto-advances at a slow, readable pace and pauses on
   hover/touch; visible prev/next arrow buttons let visitors also step
   through by hand in either direction, looping around at each end. */
.cat-slider-wrap { padding: 0 2.75rem; }
.cat-slider {
  overflow-x: auto;
  overflow-y: hidden;
  /* Scrolling itself is animated by hand in main.js (requestAnimationFrame)
     rather than via CSS "scroll-behavior: smooth" - Safari doesn't reliably
     support the JS scrollTo/scrollBy smooth-behavior option and can fight
     with scroll-snap-type below, so the arrows silently did nothing there;
     the manual animation works identically in every browser. */
  -webkit-overflow-scrolling: touch; /* momentum/inertial swipe on iOS Safari */
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-slider::-webkit-scrollbar { display: none; }
.cat-slider-track { display: flex; gap: 1.25rem; width: max-content; }
.cat-slider-track .cat-tile { scroll-snap-align: start; }

.cat-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ideal-border);
  background: var(--ideal-bg);
  color: var(--ideal-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 14px rgba(23,23,28,.1);
  z-index: 2;
  padding: 0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cat-slider-arrow:hover { background: var(--ideal-accent-bright); color: #fff; box-shadow: 0 6px 18px rgba(31,95,168,.3); }
.cat-slider-arrow-prev { left: 0; }
.cat-slider-arrow-next { right: 0; }
@media (max-width: 575.98px) {
  .cat-slider-wrap { padding: 0 2.25rem; }
  .cat-slider-arrow { width: 34px; height: 34px; font-size: .9rem; }
}

.cat-tile {
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: linear-gradient(180deg, var(--ideal-card), var(--ideal-card-2));
  border: 1px solid var(--ideal-border);
  border-radius: .85rem;
  box-shadow: 0 2px 8px rgba(23,23,28,.04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.cat-tile:hover {
  transform: translateY(-5px);
  border-color: var(--ideal-accent-bright);
  box-shadow: 0 14px 30px rgba(23,23,28,.1), 0 0 0 1px rgba(31,95,168,.15);
}
.cat-tile .cat-icon { width: 54px; height: 54px; font-size: 1.4rem; margin-bottom: .65rem; flex-shrink: 0; }
.cat-tile-name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .cat-tile { width: 128px; height: 140px; padding: .75rem; }
  .cat-tile .cat-icon { width: 44px; height: 44px; font-size: 1.15rem; }
  .cat-tile-name { font-size: .74rem; }
}

/* ---- Our Brands strip ------------------------------------------------------
   Update 48: switched from a horizontal "icon/logo + name side by side"
   pill to a vertical card - logo/icon on top, brand name underneath -
   matching the client's "logo eka dala eeta yatin brand name" request and
   the same top-icon/bottom-label layout already used by .cat-tile above. */
.brand-tile {
  flex: 0 0 auto;
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1.1rem .75rem;
  background: linear-gradient(180deg, var(--ideal-card), var(--ideal-card-2));
  border: 1px solid var(--ideal-border);
  border-radius: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--ideal-dark);
  text-align: center;
  box-shadow: 0 2px 8px rgba(23,23,28,.04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.brand-tile:hover {
  transform: translateY(-4px);
  border-color: var(--ideal-accent-bright);
  box-shadow: 0 14px 30px rgba(23,23,28,.1), 0 0 0 1px rgba(31,95,168,.15);
}
.brand-tile i { color: var(--ideal-accent); font-size: 1.8rem; }
.brand-tile span { line-height: 1.25; }

/* Real manufacturer logo variant (Updates 42-43, restyled Update 48) - used
   for any brand whose actual logo image file has been supplied, in place
   of the icon+text card above. Shows the real logo image on top and the
   brand name underneath, same "mark + name" pairing as the icon cards,
   just with a bigger logo since there's no icon glyph competing for
   space. */
.brand-tile-logo img { height: 44px; width: auto; max-width: 90px; object-fit: contain; display: block; }

/* ---- "Hot Price" ribbon (corner starburst-style banner) ------------------- */
.hot-price-ribbon {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe066, var(--ideal-gold) 55%, #c99400 100%);
  box-shadow: 0 0 0 3px rgba(242,196,0,.2), 0 6px 16px rgba(242,196,0,.4);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(12deg);
  animation: hot-price-pulse 2.4s ease-in-out infinite;
}
.hot-price-ribbon span {
  color: var(--ideal-dark);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hot-price-ribbon-sm { width: 50px; height: 50px; top: 8px; right: 8px; }
.hot-price-ribbon-sm span { font-size: .55rem; }
@keyframes hot-price-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(242,196,0,.2), 0 6px 16px rgba(242,196,0,.4); }
  50%      { box-shadow: 0 0 0 7px rgba(242,196,0,.07), 0 6px 20px rgba(242,196,0,.6); }
}

/* ---- Stock status badges --------------------------------------------------- */
.stock-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.stock-badge.stock-in {
  color: var(--ideal-success);
  background: rgba(23, 151, 79, .1);
  border: 1px solid rgba(23, 151, 79, .3);
}
.stock-badge.stock-out {
  color: var(--ideal-danger);
  background: rgba(224, 56, 79, .1);
  border: 1px solid rgba(224, 56, 79, .3);
}

/* ---- Product detail page --------------------------------------------------- */
.product-detail-img {
  background: radial-gradient(circle at 50% 20%, rgba(31,95,168,.08), transparent 60%), #f6f9fa;
  border: 1px solid var(--ideal-border);
  border-radius: .85rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  padding: 1.5rem;
}
.product-detail-img img { max-width: 100%; max-height: 420px; object-fit: contain; }

.meta-label { color: var(--ideal-text-muted); font-size: .85rem; }
.product-meta > div { margin-bottom: .35rem; font-size: .92rem; }

.tag-pill {
  display: inline-block;
  font-size: .74rem; font-weight: 600;
  padding: .28rem .75rem;
  border-radius: 999px;
  background: var(--ideal-accent-soft);
  border: 1px solid rgba(31,95,168,.3);
  color: var(--ideal-accent);
}

.spec-quicklist { list-style: none; padding: 0; margin: 0; }
.spec-quicklist li {
  padding: .4rem 0 .4rem 1.4rem;
  border-bottom: 1px dashed var(--ideal-border);
  position: relative;
  font-size: .92rem;
  color: var(--ideal-text-muted);
}
.spec-quicklist li:last-child { border-bottom: none; }
.spec-quicklist li::before {
  content: "";
  position: absolute; left: 0; top: .65rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ideal-accent-bright);
}
.spec-quicklist li strong { color: var(--ideal-text); }

.warranty-box {
  display: flex; align-items: center; gap: .6rem;
  border-radius: .65rem;
  padding: .85rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  height: 100%;
  color: #fff;
}
.warranty-box i { font-size: 1.3rem; }
.warranty-box-primary { background: linear-gradient(135deg, #ff6b6b, #d9455f); }
.warranty-box-secondary { background: linear-gradient(135deg, #1f5fa8, #01285f); }

/* ---- Specification section: clean grid of "spec tiles" ------------------- */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.spec-tile {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: linear-gradient(180deg, var(--ideal-card), var(--ideal-card-2));
  border: 1px solid var(--ideal-border);
  border-radius: .7rem;
  padding: .85rem 1.1rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.spec-tile:hover {
  border-color: var(--ideal-accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(23,23,28,.08);
}
.spec-tile-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ideal-accent-soft);
  border: 1px solid rgba(31,95,168,.3);
  color: var(--ideal-accent);
  font-size: 1rem;
}
.spec-tile-text { min-width: 0; }
.spec-tile-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ideal-text-muted);
  margin-bottom: .15rem;
}
.spec-tile-value {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ideal-text);
  word-break: break-word;
}

@media (max-width: 575.98px) {
  .spec-grid { grid-template-columns: 1fr; }
}

/* ---- Shop filter sidebar --------------------------------------------------- */
.shop-filter { background: var(--ideal-card); border: 1px solid var(--ideal-border); border-radius: .85rem; box-shadow: 0 2px 8px rgba(23,23,28,.04); }
.shop-filter .list-group-item {
  background: transparent; color: var(--ideal-text);
  border-color: var(--ideal-border);
}
.shop-filter .list-group-item.active {
  background: linear-gradient(90deg, var(--ideal-accent-bright), var(--ideal-accent));
  border-color: transparent; color: #fff; font-weight: 700;
}

/* Desktop/tablet shop search bar - centred at the top of the page (see
   shop.php), comfortably capped in width so it doesn't stretch edge to
   edge on wide screens, matching the prominence the mobile search bar
   already had above the category chips. */
.shop-search-top { width: 100%; max-width: 480px; }

/* Shop search box - a single pill-shaped control (icon inside the field,
   circular gradient submit button) shared by the desktop top bar and the
   mobile filter bar, replacing the plain squared-off Bootstrap
   input-group so the search box reads as a deliberate, polished piece of
   UI rather than a default form control. */
.shop-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ideal-card);
  border: 1px solid var(--ideal-border);
  border-radius: 999px;
  padding: .3rem .3rem .3rem 1.15rem;
  box-shadow: 0 3px 14px rgba(23,23,28,.06);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.shop-search-box:focus-within {
  border-color: var(--ideal-accent-bright);
  box-shadow: 0 0 0 4px rgba(31,95,168,.14), 0 3px 14px rgba(23,23,28,.06);
}
.shop-search-box .shop-search-icon {
  color: var(--ideal-text-muted);
  font-size: 1.05rem;
  margin-right: .65rem;
  flex-shrink: 0;
}
.shop-search-box input.form-control {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: .65rem 0;
  flex: 1 1 auto;
  min-width: 0;
}
.shop-search-box input.form-control:focus { border: none; box-shadow: none; }

/* Custom "clear" (x) button (Update 50) - a hand-built clear control shown
   only once the field has text, replacing reliance on each browser's own
   native type="search" clear icon. Safari doesn't reliably render its
   native clear icon inside this custom-styled pill field at all (it
   simply never appeared), while Chrome/Firefox show their own
   inconsistent versions - so every browser's native decoration is hidden
   below and this one custom button is used everywhere instead, for a
   guaranteed-consistent look and behavior across all browsers/devices. */
.shop-search-box input[type="search"]::-webkit-search-cancel-button,
.shop-search-box input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.shop-search-box .shop-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ideal-text-muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  margin-right: .1rem;
  cursor: pointer;
  transition: color .15s ease;
}
.shop-search-box .shop-search-clear:hover,
.shop-search-box .shop-search-clear:focus-visible {
  color: var(--ideal-dark);
}
.shop-search-box.has-value .shop-search-clear { display: flex; }
.shop-search-box .shop-search-submit {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--ideal-accent-bright), var(--ideal-accent));
  transition: transform .15s ease, box-shadow .15s ease;
}
.shop-search-box .shop-search-submit:hover,
.shop-search-box .shop-search-submit:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(31,95,168,.35);
}

/* ---- Shop page, mobile/tablet: horizontally-scrolling category chips -----
   Below `lg` the full category list-group is hidden (see shop.php) since
   on a phone it's a long list that pushes every product far down the
   page. This swipeable single-line chip row sits right above the product
   grid instead - every category reachable in one screen, no big block to
   scroll past first. */
.shop-cat-scroll {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .35rem;
  scrollbar-width: thin;
}
.shop-cat-scroll::-webkit-scrollbar { height: 5px; }
.shop-cat-scroll::-webkit-scrollbar-thumb { background: var(--ideal-border); border-radius: 999px; }
.shop-cat-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--ideal-border);
  background: var(--ideal-card);
  color: var(--ideal-text);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.shop-cat-chip:hover { border-color: var(--ideal-accent-bright); color: var(--ideal-accent); }
.shop-cat-chip.active {
  background: linear-gradient(90deg, var(--ideal-accent-bright), var(--ideal-accent));
  border-color: transparent;
  color: #fff;
}

/* ---- Generic surfaces -------------------------------------------------------- */
.surface { background-color: var(--ideal-bg-alt); }
.card-dark {
  background: linear-gradient(180deg, var(--ideal-card), var(--ideal-card-2));
  border: 1px solid var(--ideal-border);
  border-radius: .85rem;
  box-shadow: 0 2px 8px rgba(23,23,28,.04);
}

/* ---- Footer -----------------------------------------------------------
   Update 58: switched from a dark/near-black band to a light background so
   the footer can use the SAME logo file as everywhere else on the site
   (navy wordmark on a white icon circle) instead of needing a separate
   white-text variant - the logo's own colors now read correctly here
   without any recoloring, and the footer blends with the rest of the
   site's light theme instead of being a separate dark block. */
.site-footer { background-color: var(--ideal-bg-alt); border-top: 1px solid var(--ideal-border); color: var(--ideal-text-muted); }
.site-footer h6 { color: var(--ideal-dark); }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--ideal-text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--ideal-accent); }
.footer-bottom { background-color: #eef1f3; border-top: 1px solid var(--ideal-border); color: var(--ideal-text-muted); }
/* Contact/social icons in the footer - was the Bootstrap .text-warning gold
   (fine against the old dark footer, but low-contrast/hard to see against
   this new light background) - now the site's own navy accent instead. */
.footer-icon-accent { color: var(--ideal-accent) !important; }

/* ---- WhatsApp floating button ------------------------------------------------ */
.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.7rem;
  box-shadow: 0 6px 18px rgba(23,23,28,.25);
  z-index: 1050;
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* ---- Buttons -------------------------------------------------------------- */
.btn-warning {
  --bs-btn-bg: var(--ideal-gold);
  --bs-btn-border-color: var(--ideal-gold);
  --bs-btn-hover-bg: #d9ac00;
  --bs-btn-hover-border-color: #d9ac00;
  --bs-btn-active-bg: #d9ac00;
  --bs-btn-active-border-color: #d9ac00;
  color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(242,196,0,.3);
  border: none;
}
.btn-warning:hover, .btn-warning:focus { color: #1a1a1a; box-shadow: 0 6px 18px rgba(242,196,0,.4); }

.btn-outline-light {
  --bs-btn-color: var(--ideal-dark);
  --bs-btn-border-color: var(--ideal-border);
  border-width: 1px;
}

/* Mobile-menu CTA group ("WhatsApp Us" + "Call Us") - balanced, equal-width
   buttons filling the collapsed menu's width on mobile/tablet; reverts to
   natural inline sizing at >=lg (where only WhatsApp Us shows). */
.navbar-cta-group { display: flex; gap: .5rem; }
@media (max-width: 991.98px) {
  .navbar-cta-group { width: 100%; }
  .navbar-cta-group .btn { flex: 1 1 0; }
}

/* Teal-accent outline button - used for the mobile-menu "Call Us" button
   next to "WhatsApp Us" (see includes/header.php). */
.btn-outline-accent {
  --bs-btn-color: var(--ideal-accent);
  --bs-btn-border-color: var(--ideal-accent);
  --bs-btn-hover-bg: var(--ideal-accent);
  --bs-btn-hover-border-color: var(--ideal-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ideal-accent);
  --bs-btn-active-border-color: var(--ideal-accent);
  --bs-btn-active-color: #fff;
  border-width: 1px;
}
.btn-outline-light:hover {
  background-color: var(--ideal-accent-soft);
  border-color: var(--ideal-accent-bright);
  color: var(--ideal-accent);
}
/* Buttons placed on the dark footer/CTA-on-dark contexts need a light resting color. */
.site-footer .btn-outline-light,
.hero .btn-outline-light {
  --bs-btn-color: var(--ideal-dark);
}

/* "View Details" (.btn-outline-warning, also doubles as the card's
   stretched-link) - teal outline at rest, solid teal + white text on hover.
   This out-specificities the earlier ".product-card a.stretched-link { color: inherit }"
   rule so the hover color reliably applies. */
.product-card a.btn-outline-warning {
  color: var(--ideal-accent);
  border-color: var(--ideal-accent);
}
.product-card a.stretched-link:hover,
.product-card a.stretched-link:focus {
  background-color: var(--ideal-accent);
  border-color: var(--ideal-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(6,122,140,.3);
}

/* ---- Forms --------------------------------------------------------------- */
.form-control, .form-select {
  background-color: #fff;
  border-color: var(--ideal-border);
  color: var(--ideal-text);
}
.form-control:focus, .form-select:focus {
  background-color: #fff;
  color: var(--ideal-text);
  border-color: var(--ideal-accent-bright);
  box-shadow: 0 0 0 .2rem rgba(31,95,168,.18);
}
::placeholder { color: var(--ideal-text-muted) !important; opacity: 1; }

/* ---- Utility ------------------------------------------------------------ */
.text-accent { color: var(--ideal-accent) !important; }
.text-tech { color: var(--ideal-accent-bright) !important; }
.bg-ideal-card { background-color: var(--ideal-card) !important; }
.rounded-xl { border-radius: 1rem !important; }

/* ---- Scroll-reveal animation ----------------------------------------------
   Applied via JS (see main.js) to product cards, category tiles, brand
   tiles and the "Why Choose Us" cards - a small fade-up as each one enters
   the viewport while scrolling, for a smoother, more "alive" feel. Kept to
   opacity + transform only (cheap to animate) and skipped entirely for
   users who've asked for reduced motion. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}
.row > *:nth-child(2)  .reveal-on-scroll { transition-delay: .06s; }
.row > *:nth-child(3)  .reveal-on-scroll { transition-delay: .12s; }
.row > *:nth-child(4)  .reveal-on-scroll { transition-delay: .18s; }
.row > *:nth-child(5)  .reveal-on-scroll { transition-delay: .24s; }
.row > *:nth-child(6)  .reveal-on-scroll { transition-delay: .3s; }
.row > *:nth-child(7)  .reveal-on-scroll { transition-delay: .36s; }
.row > *:nth-child(8)  .reveal-on-scroll { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 767.98px) {
  .hero { padding: 2.75rem 0; }
  .product-card .product-img-wrap { height: 150px; }
  body { background-size: auto, auto, 28px 28px, 28px 28px; }
}

/* ---- Product card, responsive polish -------------------------------------
   Image on top / details below at EVERY size, including the smallest
   phones - a horizontal image-left row was tried here and didn't read
   well once mobile switched to one full-width card per row, so this
   keeps the familiar "photo, then details" tile everywhere and instead
   fine-tunes proportions + touch sizing at each step so it stays
   comfortable and eye-catching from a small phone up to desktop. */
@media (max-width: 575.98px) {
  .product-card .product-img-wrap { height: 160px; }
  .product-card > .p-3 { padding: .9rem 1rem !important; }
  .product-card .cat-eyebrow { font-size: .64rem; }
  .product-card .product-title { font-size: .92rem; min-height: 2.4em; }
  .product-card .price { font-size: 1.05rem; }
  .product-card .btn-view { padding: .45rem 1rem; font-size: .85rem; }
}
@media (max-width: 359.98px) {
  .product-card .product-img-wrap { height: 145px; }
}