/**
 * JAYAM CRACKERS — premium storefront overrides
 * Loaded after Bootstrap + style.css. Does not alter PHP/JS contracts.
 */

:root {
  --jayam-deep: #c40000;
  --jayam-bright: #ff1a1a;
  --jayam-gold: #e8c547;
  --jayam-gold-soft: #f5e6a8;
  --jayam-ink: #0f0f12;
  --jayam-ink-soft: #1a1a22;
  --jayam-surface: #ffffff;
  --jayam-muted: #5c5c66;
  --jayam-radius: 16px;
  --jayam-radius-sm: 12px;
  --jayam-shadow: 0 18px 50px rgba(15, 15, 18, 0.12);
  --jayam-shadow-hover: 0 28px 60px rgba(196, 0, 0, 0.22);
  --jayam-font-display: "Poppins", system-ui, sans-serif;
  --jayam-font-body: "Inter", system-ui, sans-serif;
  --jayam-red-gradient: linear-gradient(90deg, var(--jayam-deep) 0%, #8b0000 35%, var(--jayam-bright) 100%);
  --jayam-red-gradient-noise: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

html {
  scroll-behavior: smooth;
}

.jayam-site {
  font-family: var(--jayam-font-body);
  color: var(--jayam-ink);
  background: var(--jayam-surface);
  -webkit-font-smoothing: antialiased;
}

.jayam-site h1,
.jayam-site h2,
.jayam-site h3,
.jayam-site h4,
.jayam-site h5,
.jayam-site h6,
.jayam-site .display-1,
.jayam-site .display-3,
.jayam-site .display-4,
.jayam-site .display-5,
.jayam-site .display-6 {
  font-family: var(--jayam-font-display);
  letter-spacing: -0.02em;
}

/* Bootstrap primary → brand */
.jayam-site .btn-primary,
.jayam-site .bg-primary {
  background: linear-gradient(135deg, var(--jayam-deep) 0%, var(--jayam-bright) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(196, 0, 0, 0.35);
}

.jayam-site .btn-primary:hover,
.jayam-site .btn-primary:focus {
  filter: brightness(1.06);
  box-shadow: 0 12px 32px rgba(255, 26, 26, 0.45);
  color: #fff !important;
}

.jayam-site .text-primary {
  color: var(--jayam-gold) !important;
}

.jayam-site .border-primary {
  border-color: rgba(232, 197, 71, 0.45) !important;
}

/* ---------- Top announcement ---------- */
.jayam-topbar {
  background: linear-gradient(90deg, var(--jayam-ink) 0%, #2a1212 50%, var(--jayam-ink) 100%);
  color: #f8f4e8;
  font-size: 0.8125rem;
  padding: 0.45rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(232, 197, 71, 0.2);
}

.jayam-topbar strong {
  color: var(--jayam-gold-soft);
  font-weight: 600;
}

/* ---------- Navbar ---------- */
.jayam-site .jayam-nav-shell {
  position: relative;
  z-index: 1050;
}

/* ── Desktop Fixed Navbar ── */
.jayam-site .navbar.jayam-navbar.jayam-fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1050;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(15, 15, 18, 0.09);
}

/* ── Desktop Navbar + Hero layout ──────────────────────────────────────────
   On desktop the navbar gets position:fixed via JS (.jayam-fixed-nav), so it
   leaves the normal document flow. The nav-shell contains both the navbar and
   the hero-wrap.

   CRITICAL: Do NOT set height:0 on .jayam-nav-shell.
   If height is forced to 0, the hero-wrap (720px tall) visually overflows but
   contributes 0px to document flow. Every section after the nav-shell
   (Festival Savings, Trending Picks, etc.) then starts at y=82px — directly
   BEHIND the 720px hero image, making them completely invisible on desktop.

   With height:auto (default):
     - navbar is fixed → out of flow, contributes 0px to nav-shell height
     - hero-wrap is 720px tall with margin-top:-82px → effective height = 638px
     - nav-shell height = 638px, bottom edge = 82px + 638px = 720px
     - sections correctly start at y=720px, below the hero ✓
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .jayam-site .jayam-nav-shell {
    height: auto !important; /* MUST be auto — height:0 causes all sections to hide behind hero */
    overflow: visible; /* allow fixed navbar to render outside the shell's box */
  }

  /* Body padding-top reserves space for the fixed navbar on all non-hero pages */
  body.jayam-site {
    padding-top: 82px;
  }

  /* Home page hero: full-bleed behind the transparent fixed navbar.
     margin-top:-82px cancels the body padding so the hero starts at y=0.
     padding-top:0 ensures the carousel image fills from the very top (no grey strip).
     Hero text is safely positioned via carousel-caption padding-top:10.5rem. */
  .jayam-home .jayam-hero-wrap {
    margin-top: -82px; /* pull hero up to y=0 (full-bleed behind transparent navbar) */
    padding-top: 0;    /* image starts at y=0 — no grey strip */
  }
}

.jayam-site .navbar.jayam-navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(196, 0, 0, 0.08);
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.25s ease;
}

/* Home page: navbar is transparent dark overlay when at top of page */
body.jayam-home:not(.scrolled) .navbar.jayam-navbar {
  background: rgba(15, 15, 18, 0.35) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

body.jayam-home:not(.scrolled) .navbar.jayam-navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.jayam-home:not(.scrolled) .navbar.jayam-navbar .navbar-nav .nav-link:hover,
body.jayam-home:not(.scrolled) .navbar.jayam-navbar .navbar-nav .nav-link.active {
  color: var(--jayam-gold) !important;
}

body.jayam-home:not(.scrolled) .navbar.jayam-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
}

/* Home page: navbar becomes solid white when scrolled */
body.jayam-home.scrolled .navbar.jayam-navbar,
.jayam-site .navbar.jayam-navbar.sticky-top {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 10px 40px rgba(15, 15, 18, 0.08);
}

body.jayam-home.scrolled .navbar.jayam-navbar .navbar-nav .nav-link,
.jayam-site .navbar.jayam-navbar.sticky-top .navbar-nav .nav-link {
  color: var(--jayam-ink) !important;
}

body.jayam-home.scrolled .navbar.jayam-navbar .navbar-nav .nav-link:hover,
body.jayam-home.scrolled .navbar.jayam-navbar .navbar-nav .nav-link.active,
.jayam-site .navbar.jayam-navbar.sticky-top .navbar-nav .nav-link:hover,
.jayam-site .navbar.jayam-navbar.sticky-top .navbar-nav .nav-link.active {
  color: var(--jayam-deep) !important;
}

.jayam-site .navbar-light .navbar-nav .nav-link {
  font-family: var(--jayam-font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.75rem 0 !important;
  margin-right: 1.25rem;
}

@media (min-width: 992px) {
  .jayam-site .navbar-light .navbar-nav .nav-link {
    padding: 1.25rem 0 !important;
  }
}

.jayam-site .navbar-light .navbar-brand img {
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.jayam-site .navbar.jayam-navbar.sticky-top .navbar-brand img {
  max-height: 56px;
}

/* Search */
.jayam-site .search-form {
  flex: 1;
  max-width: 320px;
  margin: 0 1rem;
  display: flex;
  align-items: stretch;
  background: rgba(15, 15, 18, 0.06);
  border-radius: 999px;
  border: 1px solid rgba(196, 0, 0, 0.12);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.jayam-home .navbar:not(.sticky-top) .search-form {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.jayam-site .search-form:focus-within {
  border-color: var(--jayam-gold);
  box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.25);
}

.jayam-site .search-form input[type="search"] {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.875rem;
  outline: none;
}

.jayam-site .search-form button {
  border: 0;
  background: linear-gradient(135deg, var(--jayam-deep), var(--jayam-bright));
  color: #fff;
  padding: 0 1rem;
  transition: filter 0.2s ease;
}

.jayam-site .search-form button:hover {
  filter: brightness(1.08);
}

/* Cart + CTA cluster */
.jayam-site .jayam-nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.jayam-site .jayam-nav-actions .btn {
  border-radius: 999px !important;
  font-family: var(--jayam-font-display);
  font-weight: 600;
  font-size: 0.875rem;
}

.jayam-site .jayam-btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* ---------- Hero / carousel ---------- */
.jayam-site .jayam-hero-wrap {
  position: relative;
}

.jayam-site .header-carousel .header-carousel-item,
.jayam-site .header-carousel .header-carousel-item img {
  height: min(88vh, 720px);
}

.jayam-site .header-carousel .header-carousel-item .carousel-caption {
  background: linear-gradient(
    120deg,
    rgba(15, 15, 18, 0.75) 0%,
    rgba(196, 0, 0, 0.35) 45%,
    rgba(15, 15, 18, 0.65) 100%
  );
  padding: 5rem 0 4rem;
}

@media (min-width: 992px) {
  .jayam-site .header-carousel .header-carousel-item .carousel-caption {
    padding-top: 10.5rem !important;
    padding-bottom: 6.5rem !important;
  }
}

.jayam-site .header-carousel .header-carousel-item .carousel-caption .carousel-caption-content {
  width: min(92%, 720px);
  text-align: center;
}

.jayam-hero-badge {
  display: inline-block;
  font-family: var(--jayam-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jayam-gold);
  border: 1px solid rgba(232, 197, 71, 0.5);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  animation: jayam-fade-up 0.8s ease both;
}

.jayam-hero-title {
  font-family: var(--jayam-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  animation: jayam-fade-up 0.85s ease 0.1s both;
}

.jayam-hero-lead {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 auto 1.75rem;
  text-align: center;
  animation: jayam-fade-up 0.9s ease 0.15s both;
}

.jayam-hero-cta .btn {
  padding: 0.85rem 2rem !important;
  font-weight: 600;
  animation: jayam-fade-up 0.95s ease 0.2s both;
}

/* Subtle sparks overlay */
.jayam-hero-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.jayam-hero-sparks::before,
.jayam-hero-sparks::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--jayam-gold) 40%, transparent 70%);
  opacity: 0;
  animation: jayam-spark 4s ease-in-out infinite;
}

.jayam-hero-sparks::before {
  left: 18%;
  top: 42%;
  animation-delay: 0.5s;
}

.jayam-hero-sparks::after {
  right: 22%;
  top: 38%;
  animation-delay: 2.2s;
}

@keyframes jayam-spark {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.4) translateY(0);
  }
  15% {
    opacity: 0.85;
  }
  40% {
    opacity: 0;
    transform: scale(1.2) translateY(-28px);
  }
}

@keyframes jayam-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jayam-site .header-carousel .owl-nav .owl-prev,
.jayam-site .header-carousel .owl-nav .owl-next {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

.jayam-site .header-carousel .owl-nav .owl-prev:hover,
.jayam-site .header-carousel .owl-nav .owl-next:hover {
  background: linear-gradient(135deg, var(--jayam-deep), var(--jayam-bright)) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- Page hero (breadcrumb) ---------- */
.jayam-site .bg-breadcrumb {
  background: linear-gradient(135deg, rgba(15, 15, 18, 0.92) 0%, rgba(80, 10, 10, 0.88) 100%),
    url(../images/slider1.jpg);
  padding: 140px 0 56px;
}

.jayam-site .bg-breadcrumb h3 {
  font-weight: 700;
}

.jayam-site .bg-breadcrumb .breadcrumb-item.active {
  color: var(--jayam-gold) !important;
}

/* ---------- Section chrome ---------- */
.jayam-site .section-title .sub-title,
.jayam-site .section-title .sub-style .sub-title {
  color: var(--jayam-deep) !important;
  font-family: var(--jayam-font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 20px;
}

.jayam-site .section-title .sub-style::before,
.jayam-site .section-title .sub-style::after {
  border-color: var(--jayam-gold) !important;
}

.jayam-section-dark {
  background: var(--jayam-red-gradient);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.jayam-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jayam-red-gradient-noise);
  opacity: 0.55;
  pointer-events: none;
}

.jayam-section-dark > .container {
  position: relative;
  z-index: 1;
}

.jayam-section-dark .sub-title {
  color: var(--jayam-gold-soft) !important;
}

.jayam-section-dark .section-title .sub-style::before,
.jayam-section-dark .section-title .sub-style::after {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* ---------- Product / brand cards ---------- */
.jayam-site .service .service-item,
.jayam-site .jayam-product-card .service-item {
  border-radius: var(--jayam-radius);
  overflow: hidden;
  border: 1px solid rgba(196, 0, 0, 0.08);
  box-shadow: var(--jayam-shadow);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  background: var(--jayam-surface);
}

.jayam-site .service .service-item:hover,
.jayam-site .jayam-product-card .service-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--jayam-shadow-hover);
}

.jayam-site .service .service-item .service-img::before {
  background: linear-gradient(180deg, transparent 0%, rgba(196, 0, 0, 0.45) 100%) !important;
}

/* Hover: keep copy readable (avoid white-on-light when overlay sits under inner z-index) */
.jayam-site .service .service-item:hover .service-content::before {
  height: 5px !important;
  background: linear-gradient(90deg, var(--jayam-deep), var(--jayam-bright)) !important;
  border-radius: 0 0 var(--jayam-radius-sm) var(--jayam-radius-sm);
}

.jayam-site .service .service-item:hover .service-content .service-content-inner {
  color: var(--jayam-ink) !important;
  z-index: 1;
}

.jayam-site .service .service-item:hover .service-content .service-content-inner h5 {
  color: var(--jayam-ink) !important;
}

.jayam-site .service .service-item:hover .service-content .service-content-inner p,
.jayam-site .service .service-item:hover .service-content .service-content-inner .text-muted {
  color: var(--jayam-muted) !important;
}

.jayam-site .service .service-item:hover .service-content .service-content-inner .jayam-product-meta {
  color: var(--jayam-deep) !important;
}

.jayam-product-card {
  position: relative;
}

.jayam-offer-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  font-family: var(--jayam-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--jayam-gold) 0%, #fff4c2 100%);
  color: var(--jayam-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.jayam-site .jayam-product-card .btn-primary {
  width: 100%;
  text-align: center;
}

/* Category tiles */
.jayam-site .feature-item {
  border-radius: var(--jayam-radius);
  border: 1px solid rgba(196, 0, 0, 0.1);
  background: linear-gradient(145deg, #fff 0%, #faf7f2 100%);
  box-shadow: var(--jayam-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.jayam-site .feature-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--jayam-shadow-hover);
}

.jayam-site .feature-item h5 {
  font-family: var(--jayam-font-display);
  font-weight: 600;
}

/* Offer / team cards */
.jayam-site .team-item {
  border-radius: var(--jayam-radius);
  overflow: hidden;
  border: 1px solid rgba(232, 197, 71, 0.35);
  box-shadow: var(--jayam-shadow);
}

.jayam-site .team-content {
  background: linear-gradient(180deg, #fffefb 0%, #fff5e6 100%) !important;
  border: none !important;
}

.jayam-site .team-content h5 {
  font-family: var(--jayam-font-display);
  font-weight: 700;
  color: var(--jayam-ink);
}

/* ---------- Why choose / testimonials ---------- */
.jayam-why-card {
  background: var(--jayam-surface);
  border-radius: var(--jayam-radius);
  padding: 1.75rem;
  border: 1px solid rgba(196, 0, 0, 0.08);
  box-shadow: var(--jayam-shadow);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jayam-why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--jayam-shadow-hover);
}

.jayam-why-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(196, 0, 0, 0.12), rgba(255, 26, 26, 0.08));
  color: var(--jayam-deep);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.jayam-why-card h5 {
  font-family: var(--jayam-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.jayam-testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--jayam-radius);
  padding: 1.75rem;
  height: 100%;
  backdrop-filter: blur(10px);
}

.jayam-testimonial-card .stars {
  color: var(--jayam-gold);
  margin-bottom: 0.75rem;
  letter-spacing: 2px;
}

.jayam-testimonial-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(248, 244, 232, 0.9);
  margin-bottom: 1rem;
}

.jayam-testimonial-card .name {
  font-family: var(--jayam-font-display);
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.15rem;
}

.jayam-testimonial-card .meta {
  font-size: 0.8125rem;
  color: rgba(232, 197, 71, 0.85);
}

/* Featured strip */
.jayam-featured-strip {
  background: var(--jayam-red-gradient);
  color: #fff;
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}

.jayam-featured-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jayam-red-gradient-noise);
  opacity: 0.6;
  pointer-events: none;
}

.jayam-featured-strip .container {
  position: relative;
  z-index: 1;
}

.jayam-strip-title {
  font-family: var(--jayam-font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin-bottom: 0.35rem;
}

.jayam-strip-actions .btn {
  white-space: nowrap;
}

/* Quick category pills */
.jayam-quick-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.jayam-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--jayam-font-display);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.jayam-cat-pill:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Footer ---------- */
.jayam-site .footer {
  background: var(--jayam-red-gradient) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.jayam-site .footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jayam-red-gradient-noise);
  opacity: 0.5;
  pointer-events: none;
}

.jayam-site .footer > .container {
  position: relative;
  z-index: 1;
}

.jayam-site .footer .footer-item img {
  max-height: 64px;
  width: auto;
  margin-bottom: 1rem;
  filter: brightness(1.05);
}

.jayam-site .footer .footer-item a {
  color: rgba(232, 232, 240, 0.85) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.jayam-site .footer .footer-item a:hover {
  color: var(--jayam-gold) !important;
  padding-left: 4px;
}

.jayam-site .footer h4 {
  font-family: var(--jayam-font-display);
  font-weight: 600;
  color: #fff !important;
  letter-spacing: 0.02em;
}

.jayam-site .copyright {
  background: var(--jayam-red-gradient) !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.jayam-site .copyright::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jayam-red-gradient-noise);
  opacity: 0.45;
  pointer-events: none;
}

.jayam-site .copyright > .container {
  position: relative;
  z-index: 1;
}

.jayam-site .copyright span,
.jayam-site .copyright a {
  color: rgba(255, 255, 255, 0.88) !important;
}

.jayam-site .copyright a:hover {
  color: var(--jayam-gold) !important;
}

/* Float helpers */
.jayam-site a.float {
  z-index: 1040;
}

.jayam-site .back-to-top {
  background: linear-gradient(135deg, var(--jayam-deep), var(--jayam-bright)) !important;
  border: none;
  box-shadow: 0 8px 24px rgba(196, 0, 0, 0.4);
}

/* ---------- Cart ---------- */
.jayam-site .basket-module {
  margin-bottom: 2rem;
}

.jayam-site .basket {
  background: var(--jayam-surface);
  border-radius: var(--jayam-radius);
  border: 1px solid rgba(196, 0, 0, 0.1);
  box-shadow: var(--jayam-shadow);
  padding: 1.25rem 1.5rem;
}

.jayam-site .basket-labels {
  font-family: var(--jayam-font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jayam-muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(15, 15, 18, 0.08);
  margin-bottom: 0.5rem;
}

.jayam-site .basket-product {
  border-bottom: 1px solid rgba(15, 15, 18, 0.08) !important;
  padding: 1.25rem 0 !important;
}

.jayam-site .product-image img {
  border-radius: var(--jayam-radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.06);
  max-width: 100px;
}

.jayam-site .product-details h1 {
  font-family: var(--jayam-font-display);
  font-size: 1rem !important;
}

.jayam-site .price {
  font-weight: 600;
  color: var(--jayam-deep);
}

.jayam-site .quantity-field {
  border-radius: 10px;
  border: 1px solid rgba(196, 0, 0, 0.2);
}

.jayam-site .summary {
  background: linear-gradient(165deg, #1e1e28 0%, #12121a 100%) !important;
  border: 1px solid rgba(232, 197, 71, 0.2) !important;
  border-radius: var(--jayam-radius) !important;
  color: #e8e8ec;
  box-shadow: var(--jayam-shadow);
}

.jayam-site .summary-total-items,
.jayam-site .summary-subtotal,
.jayam-site .summary-total {
  font-size: 0.9375rem;
}

.jayam-site .summary .final-value {
  font-weight: 700;
  color: var(--jayam-gold);
}

.jayam-site .summary label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
}

.jayam-site .summary .form-control {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 10px;
}

.jayam-site .summary .form-control:focus {
  border-color: var(--jayam-gold);
  box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.jayam-site .summary .checkout-cta {
  width: 100%;
  border-radius: 12px !important;
  font-weight: 600;
  padding-top: 0.9rem !important;
  padding-bottom: 0.9rem !important;
}

/* Sidebar categories on product pages */
.jayam-site .service.py-5 .col-md-3 h5 {
  font-family: var(--jayam-font-display);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--jayam-ink);
}

.jayam-site .service.py-5 .col-md-3 p {
  margin-bottom: 0.35rem;
}

.jayam-site .service.py-5 .col-md-3 a {
  color: var(--jayam-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.jayam-site .service.py-5 .col-md-3 a:hover {
  color: var(--jayam-deep);
  padding-left: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .jayam-site .search-form {
    max-width: 100%;
    margin: 1rem 0;
  }

  .jayam-site .jayam-nav-actions {
    width: 100%;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .jayam-site .jayam-nav-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 1.5rem !important;
  }

  .jayam-site .jayam-nav-actions .jayam-btn-cart {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 !important;
  }
}

@media (max-width: 576px) {
  .jayam-site .navbar-light .navbar-brand img {
    max-height: 56px;
  }

  .jayam-strip-actions {
    margin-top: 1rem;
  }
}

/* --- Brand hero title gradient + strip badge on red --- */
.jayam-text-glow {
  background: linear-gradient(90deg, #fff9d6 0%, var(--jayam-gold) 45%, #fffef2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.jayam-featured-strip .jayam-hero-badge {
  color: #fffef8;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.18);
}

.jayam-home .navbar:not(.sticky-top) .search-form input[type="search"] {
  color: #fff !important;
}

.jayam-home .navbar:not(.sticky-top) .search-form input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.jayam-site .jayam-shop-sidebar .jayam-sidebar-title {
  font-family: var(--jayam-font-display);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ---------- Homepage: promo strip (alias of featured strip) ---------- */
.jayam-promo-strip {
  background: var(--jayam-red-gradient);
  color: #fff;
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}

.jayam-promo-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jayam-red-gradient-noise);
  opacity: 0.55;
  pointer-events: none;
}

.jayam-promo-strip .container {
  position: relative;
  z-index: 1;
}

.jayam-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--jayam-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fffef5;
}

.jayam-promo-strip .btn-light {
  border: none;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.jayam-promo-strip .btn-outline-light {
  border-width: 2px;
  font-weight: 600;
}

/* Hero badge: sentence case on carousel */
.jayam-hero-badge {
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 0.8125rem;
}

/* Offer / value pill */
.jayam-offer-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--jayam-font-display);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--jayam-gold) 0%, #fff4c2 100%);
  color: var(--jayam-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.jayam-site .service-img .jayam-offer-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
}

.jayam-price,
.jayam-product-meta {
  font-family: var(--jayam-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--jayam-deep);
}

/* Testimonials (index) */
.jayam-testimonials {
  background: linear-gradient(165deg, #0f0f14 0%, #1a0a0c 42%, #120810 100%);
  position: relative;
  overflow: hidden;
}

.jayam-testimonials::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 60%;
  left: -20%;
  top: -10%;
  background: radial-gradient(ellipse at center, rgba(196, 0, 0, 0.35) 0%, transparent 65%);
  pointer-events: none;
}

.jayam-testimonials .container {
  position: relative;
  z-index: 1;
}

.jayam-quote-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--jayam-radius);
  padding: 1.75rem;
  height: 100%;
  backdrop-filter: blur(12px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
}

.jayam-quote-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 197, 71, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.jayam-stars {
  color: var(--jayam-gold);
  letter-spacing: 3px;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.jayam-why {
  background: linear-gradient(180deg, #fffdfb 0%, #fff5f0 100%);
}

.jayam-team-grid .team-content h5 {
  font-family: var(--jayam-font-display);
  font-weight: 700;
}

/* Inner pages: category sidebar (explicit class) */
.jayam-site .jayam-shop-sidebar {
  position: sticky;
  top: 5.5rem;
  align-self: flex-start;
  padding: 1.25rem 1.5rem;
  border-radius: var(--jayam-radius);
  background: linear-gradient(180deg, #fafafa 0%, #f3f3f7 100%);
  border: 1px solid rgba(196, 0, 0, 0.1);
  box-shadow: var(--jayam-shadow);
  height: fit-content;
}

.jayam-site .jayam-shop-sidebar p {
  margin-bottom: 0.5rem;
}

.jayam-site .jayam-shop-sidebar a {
  color: var(--jayam-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.jayam-site .jayam-shop-sidebar a:hover {
  color: var(--jayam-deep);
  padding-left: 4px;
}

.jayam-cart-page .basket {
  margin-top: 0;
}

/* ======================================================
   PRODUCT GRID / LIST VIEW
   IMPORTANT:
   1. Remove all previous .jayam-products-row--grid/list CSS
   2. Paste only this CSS
   3. Hard refresh browser (Ctrl + F5)
   ====================================================== */


/* ======================================================
   GRID VIEW
   ====================================================== */

/* Desktop: 3 cards per row */
.jayam-products-row--grid .jayam-product-col {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
}

/* Mobile: 1 card per row */
@media (max-width: 767.98px) {
    .jayam-products-row--grid .jayam-product-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Grid cards are vertical */
.jayam-products-row--grid .service-item {
    display: block !important;
}

.jayam-products-row--grid .service-img {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
}

.jayam-products-row--grid .service-img img {
    width: 100% !important;
    height: 240px !important;
    min-height: auto !important;
    object-fit: cover;
}

.jayam-products-row--grid .service-content {
    width: 100% !important;
    display: block !important;
    padding: 1.5rem !important;
}

.jayam-products-row--grid .btn-primary {
    width: 100% !important;
}


/* ======================================================
   LIST VIEW
   ====================================================== */

/* Always full width row */
.jayam-products-row--list .jayam-product-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Desktop list layout */
@media (min-width: 768px) {
    .jayam-products-row--list .service-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        width: 100%;
    }

    /* Image fixed width */
    .jayam-products-row--list .service-img {
        flex: 0 0 260px !important;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        overflow: hidden;
    }

    .jayam-products-row--list .service-img img {
        width: 100% !important;
        height: 100% !important;
        min-height: 260px !important;
        object-fit: cover;
    }

    /* Content fills remaining space */
    .jayam-products-row--list .service-content {
        flex: 1 1 auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center;
        padding: 2rem !important;
    }

    .jayam-products-row--list .service-content-inner {
        width: 100%;
    }

    /* Button should not be full width */
    .jayam-products-row--list .btn-primary {
        width: auto !important;
        min-width: 180px;
    }
}

/* Mobile list layout = stacked */
@media (max-width: 767.98px) {
    .jayam-products-row--list .service-item {
        display: block !important;
    }

    .jayam-products-row--list .service-img,
    .jayam-products-row--list .service-content {
        width: 100% !important;
        min-width: auto !important;
        max-width: 100% !important;
    }

    .jayam-products-row--list .service-img img {
        width: 100% !important;
        height: 240px !important;
        min-height: auto !important;
        object-fit: cover;
    }

    .jayam-products-row--list .service-content {
        display: block !important;
        padding: 1.5rem !important;
    }

    .jayam-products-row--list .btn-primary {
        width: 100% !important;
    }
}
/* ======================================================
   LIST VIEW - RESPONSIVE
   Desktop  : Image left, content right
   Mobile   : Same horizontal layout (image left, content right)
   ====================================================== */

/* Full width item in list view */
.jayam-products-row--list .jayam-product-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Horizontal layout for ALL screen sizes */
.jayam-products-row--list .service-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    width: 100%;
}

/* Image section */
.jayam-products-row--list .service-img {
    flex: 0 0 34% !important;
    width: 34% !important;
    min-width: 34% !important;
    max-width: 34% !important;
    overflow: hidden;
}

/* Product image */
.jayam-products-row--list .service-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 180px !important;
    object-fit: cover;
}

/* Content section */
.jayam-products-row--list .service-content {
    flex: 1 1 auto !important;
    width: 66% !important;
    display: flex !important;
    align-items: center;
    padding: 1rem !important;
}

.jayam-products-row--list .service-content-inner {
    width: 100%;
}

/* Title */
.jayam-products-row--list .service-content h5 {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

/* Price */
.jayam-products-row--list .jayam-product-meta {
    font-size: 1.15rem !important;
    margin-bottom: 1rem !important;
}

/* Add to Cart button */
.jayam-products-row--list .btn-primary {
    width: auto !important;
    min-width: 150px;
}

/* ======================================================
   MOBILE ADJUSTMENTS
   ====================================================== */
@media (max-width: 767.98px) {

    /* Slightly smaller image on mobile */
    .jayam-products-row--list .service-img {
        flex: 0 0 38% !important;
        width: 38% !important;
        min-width: 38% !important;
        max-width: 38% !important;
    }

    .jayam-products-row--list .service-img img {
        min-height: 150px !important;
    }

    .jayam-products-row--list .service-content {
        width: 62% !important;
        padding: 0.75rem !important;
    }

    .jayam-products-row--list .service-content h5 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .jayam-products-row--list .jayam-product-meta {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .jayam-products-row--list .btn-primary {
        width: 100% !important;
        min-width: auto;
        font-size: 0.9rem;
        padding: 0.55rem 1rem !important;
    }
}

/* ======================================================
   DESKTOP ENHANCEMENT
   ====================================================== */
@media (min-width: 992px) {
    .jayam-products-row--list .service-img {
        flex: 0 0 260px !important;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
    }

    .jayam-products-row--list .service-img img {
        min-height: 260px !important;
    }

    .jayam-products-row--list .service-content {
        padding: 2rem !important;
    }

    .jayam-products-row--list .service-content h5 {
        font-size: 1.75rem !important;
    }

    .jayam-products-row--list .jayam-product-meta {
        font-size: 1.4rem !important;
    }

    .jayam-products-row--list .btn-primary {
        width: auto !important;
        min-width: 180px;
    }
}
/* ==========================================================
   FOOTER RESPONSIVE FIX
   Paste this CSS after your existing footer styles
   ========================================================== */

/* Footer logo */
.footer-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Footer text and links */
.footer-item p,
.footer-item a {
    word-break: break-word;
    line-height: 1.9;
}

/* Social icons */
.footer .btn-square {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Address block */
.footer-item a i {
    margin-top: 4px;
    flex-shrink: 0;
}

.footer-item a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Desktop spacing */
@media (min-width: 992px) {
    .footer .row > div {
        margin-bottom: 0;
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    .footer {
        text-align: left;
    }

    .footer .row > div {
        margin-bottom: 2rem;
    }

    .footer-item p {
        max-width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .footer {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    .footer .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer .row {
        row-gap: 1.5rem;
    }

    .footer .row > div {
        margin-bottom: 0;
    }

    .footer-item {
        text-align: left;
    }

    .footer-item h4 {
        font-size: 1.35rem;
        margin-bottom: 1rem !important;
    }

    .footer-item img {
        max-width: 220px;
        margin-bottom: 1rem !important;
    }

    .footer-item p {
        max-width: 100% !important;
        font-size: 0.95rem;
        margin-bottom: 1.25rem !important;
    }

    .footer-item a {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    /* Social icons wrap nicely */
    .footer-item .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center !important;
    }

    .footer-item .d-flex.align-items-center .fa-share {
        font-size: 1.4rem !important;
        margin-right: 6px !important;
    }

    /* Copyright section */
    .copyright {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .copyright .row {
        row-gap: 0.5rem;
    }

    .copyright .col-md-6 {
        text-align: center !important;
    }

    .copyright span,
    .copyright a {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* Very small devices */
@media (max-width: 480px) {
    .footer-item img {
        max-width: 180px;
    }

    .footer-item h4 {
        font-size: 1.2rem;
    }

    .footer-item p,
    .footer-item a {
        font-size: 0.9rem;
    }

    .footer .btn-square {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================
   PHASE 2 — FRONTEND MODERNIZATION ADDITIONS
   Appended safely after all existing styles.
   No existing selectors overridden without intent.
   ========================================================== */

/* ---- 1. NAVBAR ACTIVE STATE — animated underline indicator ---- */
.jayam-site .navbar-light .navbar-nav .nav-link {
    position: relative;
}
.jayam-site .navbar-light .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--jayam-deep), var(--jayam-bright));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.jayam-site .navbar-light .navbar-nav .nav-link.active::after,
.jayam-site .navbar-light .navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}
/* Active link colour on white navbar */
.jayam-site .navbar.jayam-navbar.sticky-top .navbar-nav .nav-link.active {
    color: var(--jayam-deep) !important;
    font-weight: 600 !important;
}
/* Active link on dark (home) hero navbar */
.jayam-home .navbar:not(.sticky-top) .navbar-nav .nav-link.active {
    color: var(--jayam-gold) !important;
    font-weight: 600 !important;
}
.jayam-home .navbar:not(.sticky-top) .navbar-nav .nav-link.active::after {
    background: var(--jayam-gold) !important;
}

/* ---- 2. HOVER TEXT VISIBILITY GUARANTEE ---- */
/* Product service cards — ensure content is ALWAYS dark on hover */
.jayam-site .service .service-item:hover .service-content,
.jayam-site .service .service-item:hover .service-content * {
    color: var(--jayam-ink) !important;
}
.jayam-site .service .service-item:hover .service-content .text-muted,
.jayam-site .service .service-item:hover .service-content p {
    color: var(--jayam-muted) !important;
}
.jayam-site .service .service-item:hover .service-content .btn-primary {
    color: #fff !important;
}
/* Feature tiles */
.jayam-site .feature-item:hover * {
    color: inherit;
}
/* Footer links — always readable */
.jayam-site .footer .footer-item a,
.jayam-site .footer .footer-item a:hover {
    text-decoration: none;
}
/* Strip CTA — always visible */
.jayam-featured-strip .btn-light,
.jayam-promo-strip .btn-light {
    color: var(--jayam-deep) !important;
    font-weight: 700;
}
.jayam-featured-strip .btn-light:hover,
.jayam-promo-strip .btn-light:hover {
    background: #fff !important;
    color: var(--jayam-deep) !important;
}

/* ---- 3. SCROLL REVEAL UTILITY ---- */
.jayam-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.jayam-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.jayam-reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.jayam-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.jayam-reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.jayam-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---- 4. WHY CHOOSE — Glassmorphism upgrade ---- */
.jayam-why-card {
    position: relative;
    overflow: hidden;
}
.jayam-why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
    backdrop-filter: blur(4px);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.jayam-why-card:hover::before {
    opacity: 1;
}
.jayam-why-card:hover .jayam-why-icon {
    background: linear-gradient(135deg, var(--jayam-deep), var(--jayam-bright));
    color: #fff;
    box-shadow: 0 8px 24px rgba(196,0,0,0.35);
    transform: scale(1.08) rotate(6deg);
    transition: all 0.35s ease;
}

/* ---- 5. HERO — additional floating sparks ---- */
@keyframes jayam-spark-float {
    0%   { opacity: 0; transform: translateY(0) scale(0.4); }
    20%  { opacity: 0.9; }
    60%  { opacity: 0; transform: translateY(-40px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-55px) scale(0.8); }
}
.jayam-spark-extra {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff9d6, var(--jayam-gold) 60%, transparent);
    pointer-events: none;
    animation: jayam-spark-float 3.5s ease-in-out infinite;
}
.jayam-spark-extra:nth-child(1) { left: 12%; top: 35%; animation-delay: 0s;   }
.jayam-spark-extra:nth-child(2) { left: 75%; top: 45%; animation-delay: 1.1s; }
.jayam-spark-extra:nth-child(3) { left: 50%; top: 25%; animation-delay: 2.2s; }
.jayam-spark-extra:nth-child(4) { left: 30%; top: 60%; animation-delay: 0.7s; }
.jayam-spark-extra:nth-child(5) { left: 88%; top: 30%; animation-delay: 1.8s; }

/* ---- 6. PRODUCT CARD — glow shimmer on hover ---- */
.jayam-site .service .service-item {
    position: relative;
    overflow: hidden;
}
.jayam-site .service .service-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,255,255,0.08) 50%,
        transparent 100%
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 5;
}
.jayam-site .service .service-item:hover::before {
    left: 130%;
}

/* ---- 7. SECTION TITLE — refined ---- */
.jayam-site .section-title {
    text-align: center;
}
.jayam-site .section-title .sub-style {
    display: inline-flex;
    align-items: center;
}

/* ---- 8. MOBILE GLOBAL POLISH ---- */
@media (max-width: 767.98px) {
    /* Ensure no horizontal overflow */
    .jayam-featured-strip .jayam-strip-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .jayam-featured-strip .btn {
        text-align: center;
    }
    /* Bigger touch targets for nav links */
    .jayam-site .navbar-light .navbar-nav .nav-link {
        padding: 0.85rem 0 !important;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    /* Cart button touch target */
    .jayam-btn-cart {
        min-width: 48px !important;
        min-height: 48px !important;
    }
}

/* ---- 9. TOPBAR ANNOUNCE STRIP — premium feel ---- */
.jayam-topbar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.jayam-topbar a {
    color: var(--jayam-gold-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}
.jayam-topbar a:hover {
    color: #fff;
}

/* ---- 10. BACK-TO-TOP button fine-tuning ---- */
.back-to-top {
    display: none;
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 1039;
    width: 46px;
    height: 46px;
    border-radius: 50% !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
}
.back-to-top.show,
.back-to-top.active {
    display: flex;
}

/* ---- 11. CATEGORY PILLS — shimmer effect on hover ---- */
.jayam-cat-pill {
    position: relative;
    overflow: hidden;
}
.jayam-cat-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.jayam-cat-pill:hover::after {
    transform: translateX(100%);
}

/* ---- 12. PERFORMANCE — will-change hints for animated elements ---- */
.jayam-site .service .service-item,
.jayam-why-card,
.jayam-feat-card,
.jayam-value-card {
    will-change: transform;
}

/* ==========================================================
   PHASE 3 — CRITICAL HOVER VISIBILITY FIXES
   Root: style.css btn-primary:hover fills bs-light making
   text invisible. service-content-inner:hover makes all
   children white-on-white. Fixed below with high specificity.
   ========================================================== */

/* A. BTN-PRIMARY — keep text WHITE on hover always */
.jayam-site .btn.btn-primary:hover,
.jayam-site .btn.btn-primary:focus,
.jayam-site .btn.btn-primary:active {
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(196,0,0,0.35) !important;
}
/* Hero CTA primary */
.jayam-hero-cta .btn.btn-primary:hover { color:#fff !important; background:linear-gradient(135deg,#a30000,#e01010) !important; }
/* Hero outline-light stays readable */
.jayam-hero-cta .btn.btn-outline-light:hover { color:var(--jayam-ink) !important; background:#fff !important; }

/* B. BTN-LIGHT — dark text always, no primary fill */
.jayam-site .btn.btn-light:hover,
.jayam-site .btn.btn-light:focus {
    color: var(--jayam-deep) !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}
.jayam-featured-strip .btn.btn-light,
.jayam-featured-strip .btn.btn-light:hover { color:var(--jayam-deep) !important; background:#fff !important; }
.jayam-featured-strip .btn.btn-outline-light:hover { color:var(--jayam-ink) !important; background:#fff !important; }

/* C. SERVICE CARD hover text — root cause fix */
.jayam-site .service .service-item:hover .service-content .service-content-inner { color:#fff !important; position:relative; z-index:9; }
.jayam-site .service .service-item:hover .service-content .service-content-inner h5 { color:#fff !important; }
.jayam-site .service .service-item:hover .service-content .service-content-inner p,
.jayam-site .service .service-item:hover .service-content .service-content-inner .text-muted { color:rgba(255,255,255,.85) !important; }
.jayam-site .service .service-item:hover .service-content .service-content-inner .btn { color:#fff !important; border-color:rgba(255,255,255,.6) !important; background:rgba(255,255,255,.15) !important; box-shadow:none !important; }
.jayam-site .service .service-item:hover .service-content .service-content-inner .btn:hover { color:var(--jayam-deep) !important; background:#fff !important; border-color:#fff !important; }
.jayam-site .service .service-item:hover .service-content .service-content-inner [class*="price"],
.jayam-site .service .service-item:hover .service-content .service-content-inner strong { color:var(--jayam-gold) !important; }

/* D. FEATURE / WHY CHOOSE items */
.jayam-site .feature .feature-item:hover .feature-content { color:#fff !important; }
.jayam-site .feature .feature-item:hover .feature-content h5,
.jayam-site .feature .feature-item:hover .feature-content h6 { color:#fff !important; }
.jayam-site .feature .feature-item:hover .feature-content p,
.jayam-site .feature .feature-item:hover .feature-content span { color:rgba(255,255,255,.85) !important; }
.jayam-site .feature .feature-item:hover .feature-icon { background:rgba(255,255,255,.2) !important; color:#fff !important; }

/* E. About CTA strip */
.jayam-about-cta-strip .btn-light:hover { color:var(--jayam-deep) !important; background:#fff !important; }
.jayam-about-cta-strip .jayam-btn-wa:hover { color:#fff !important; }

/* F. Navbar cart button */
.jayam-btn-cart,.jayam-btn-cart:hover,.jayam-btn-cart:focus { color:#fff !important; }
.jayam-btn-cart:hover { box-shadow:0 8px 20px rgba(196,0,0,.4) !important; transform:translateY(-2px); }

/* G. Footer links/social */
.jayam-social-btn:hover,.jayam-social-wa:hover { color:#fff !important; }
.jayam-footer-contact-list a:hover { color:var(--jayam-gold) !important; }
.jayam-footer-links a:hover { color:var(--jayam-gold) !important; }
.jayam-wa-cta-btn:hover { color:#075E54 !important; background:#f0fdf4 !important; }

/* H. Centralized transition */
.jayam-site .btn,
.jayam-site .nav-link,
.jayam-social-btn,
.jayam-footer-links a {
    transition: all 0.28s cubic-bezier(0.25,0.8,0.25,1);
}

/* I. Back-to-top arrow always white */
.back-to-top i,.back-to-top:hover i { color:#fff !important; }
.back-to-top:hover { color:#fff !important; box-shadow:0 8px 24px rgba(196,0,0,.4) !important; }

/* ─── JAYAM FINAL UI ROUND CUSTOM STYLES ─── */

/* 1. Products Hero Banner Text Visibility */
.products-hero-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 16px rgba(0, 0, 0, 0.7) !important;
    font-weight: 800 !important;
    font-family: var(--jayam-font-display) !important;
}

.products-hero-title .jayam-text-glow {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #d4af37 !important;
    text-shadow: 0 0 12px rgba(212,175,55,.5), 0 2px 8px rgba(0, 0, 0, 0.9) !important;
    display: inline-block !important;
}

.btn-detail-arrow {
    display: none !important;
}

/* 2. Product Grid View Card Consistency */
.jayam-product-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-image-box {
    height: 240px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    overflow: hidden !important;
    position: relative !important;
}

.product-image-box img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transition: transform .4s ease !important;
}

/* 3. Product List View Redesign (Single Row Layout) */
.product-item-wrapper[data-layout="list"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.product-item-wrapper[data-layout="list"] .jayam-product-card {
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px 24px !important;
    gap: 20px !important;
    border-radius: 14px !important;
    height: auto !important;
}

.product-item-wrapper[data-layout="list"] .product-image-box {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
}

.product-item-wrapper[data-layout="list"] .product-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.product-item-wrapper[data-layout="list"] .product-content-box {
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
}

.product-item-wrapper[data-layout="list"] .product-info-top {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.product-item-wrapper[data-layout="list"] .product-name-heading {
    margin-bottom: 0 !important;
}

.product-item-wrapper[data-layout="list"] .product-desc-text {
    display: none !important; /* Hide description in list view */
}

.product-item-wrapper[data-layout="list"] .product-action-section {
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    flex-shrink: 0 !important;
}

.product-item-wrapper[data-layout="list"] .product-qty-wrapper {
    margin-bottom: 0 !important;
    gap: 10px !important;
}

.product-item-wrapper[data-layout="list"] .qty-label {
    display: none !important; /* Hide quantity label in list view row */
}

.product-item-wrapper[data-layout="list"] .product-price-btn-row {
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.product-item-wrapper[data-layout="list"] .jayam-offer-pill {
    display: none !important; /* Hide offer pill in list view */
}

.product-item-wrapper[data-layout="list"] .btn-detail-arrow {
    display: none !important; /* Hide chevron details in list view */
}

.product-item-wrapper[data-layout="list"] .btn-add-cart {
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    padding: 0 20px !important;
}

/* 4. Mobile responsive overrides for List View */
@media (max-width: 767.98px) {
    .product-item-wrapper[data-layout="list"] .jayam-product-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .product-item-wrapper[data-layout="list"] .product-image-box {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto !important;
    }
    .product-item-wrapper[data-layout="list"] .product-content-box {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .product-item-wrapper[data-layout="list"] .product-action-section {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .product-item-wrapper[data-layout="list"] .product-qty-wrapper {
        justify-content: space-between !important;
    }
    .product-item-wrapper[data-layout="list"] .qty-label {
        display: inline !important;
    }
    .product-item-wrapper[data-layout="list"] .product-price-btn-row {
        justify-content: space-between !important;
    }
}

/* Related Products Swiper slide image adjustments */
.related-products-swiper .product-image-box {
    height: 180px !important;
    background: #f8f9fa !important;
}
.related-products-swiper .jayam-product-card {
    height: calc(100% - 20px) !important;
}

/* 
 * UX optimization: Hide floating sticky action buttons (WhatsApp and Back to Top)
 * when a user focuses any input field or textarea. This prevents the buttons
 * from overlapping mobile keyboards or covering the input elements.
 */
body:has(input:focus, textarea:focus) .jayam-float-wa,
body:has(input:focus, textarea:focus) .back-to-top {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.22s ease, visibility 0.22s ease !important;
}

/* ======================================================
   ADDITIONAL ULTIMATE RESPONSIVE REMEDIATION OVERRIDES
   ====================================================== */

/* 1. Mobile Navbar Dropdown Scroll Boundaries */
@media (max-width: 991.98px) {
  .jayam-site .navbar.jayam-navbar {
    max-height: 100vh !important;
    overflow-y: auto !important;
  }
}

/* 2. Direct Checkout Copy Button & WhatsApp Overlap */
@media (max-width: 575.98px) {
  .jayam-checkout-wrapper .card {
    padding: 1.25rem !important;
  }
  .jayam-checkout-wrapper #btn-copy-upi {
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
}

/* 3. Direct Checkout Floating Button Opacity reduction on Mobile */
@media (max-width: 480px) {
  /* Translucent floating action buttons on cart success/checkout page to protect bank details visibility */
  .jayam-checkout-wrapper ~ .jayam-float-wa,
  .jayam-checkout-wrapper ~ .back-to-top {
    opacity: 0.15 !important;
  }
  .jayam-checkout-wrapper ~ .jayam-float-wa:hover,
  .jayam-checkout-wrapper ~ .back-to-top:hover {
    opacity: 1 !important;
  }
}

/* 4. Product Details floating WhatsApp Button overlap fix */
@media (max-width: 375px) {
  .jayam-float-wa {
    bottom: 5.25rem !important;
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
  }
  .back-to-top {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 36px !important;
    height: 36px !important;
  }
}


/* ============================================================
   HOTFIX: Mobile right-side white space / horizontal overflow
   ROOT CAUSE IDENTIFIED:
   1. .sub-title::before uses margin-right:-100px
      .sub-title::after uses margin-right:-50px
      These decorative side-lines bleed 100px beyond the right
      edge of the element — escaping the viewport on mobile.
   2. Swiper .swiper-button-next can extend outside .container
      boundary on narrow screens.
   3. OWL Carousel .owl-stage overflows during transitions.
   ============================================================ */

/* Fix 1: Clip the hero carousel wrapper so OWL stage never escapes */
.jayam-site .jayam-hero-wrap,
.jayam-site .header-carousel {
  overflow: hidden;
  max-width: 100%;
}
.jayam-site .header-carousel .owl-stage-outer {
  overflow: hidden;
}

/* Fix 2: Ensure the nav-shell container-fluid never exceeds viewport */
.jayam-nav-shell.container-fluid {
  max-width: 100vw;
}

/* Fix 3: Clip about-page image wrapper so ring / badge don't overflow */
.jayam-about-img-wrap {
  overflow: hidden;
}

/* Fix 4: ROOT CAUSE — sub-title decorative lines overflow on mobile.
   The ::before (margin-right:-100px) and ::after (margin-right:-50px)
   are hidden on mobile screens where those lines are not needed. */
@media (max-width: 767.98px) {
  .sub-title::before,
  .sub-title::after,
  .section-title .sub-style::before,
  .section-title .sub-style::after {
    display: none !important;
  }
}

/* Fix 5: Swiper navigation arrows — prevent extending outside container */
@media (max-width: 767.98px) {
  .jayam-testimonial-swiper .swiper-button-prev,
  .jayam-testimonial-swiper .swiper-button-next {
    display: none !important;
  }
}

/* Fix 6: Global page-level clip — last resort containment */
.jayam-site {
  overflow-x: clip; /* `clip` does not create a scroll container */
}

/* On mobile, clean up negative offsets that bleed outside column */
@media (max-width: 575.98px) {
  .jayam-about-img-wrap {
    overflow: visible; /* allow badge to show */
  }
  .jayam-img-ring {
    display: none;
  }
  .jayam-exp-badge {
    display: none;
  }
  .jayam-about-main .row,
  .jayam-stats-strip .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   HOTFIX: Desktop white gap above page banners (About/Products/Contact)
   ROOT CAUSE:
   body.jayam-site gets padding-top:82px at desktop so the fixed
   navbar doesn't overlap content. The Home page compensates with
   margin-top:-82px on .jayam-hero-wrap. Inner page banners
   (.jayam-about-hero used by About + Products) have no such
   compensation — the 82px body padding creates a visible white gap.
   FIX: Apply margin-top:-82px to all inner page hero banners.
   Each banner's own padding-top (80-100px) keeps text clear of navbar.
   ============================================================ */
@media (min-width: 992px) {
  /* About + Products page hero (both use .jayam-about-hero) */
  .jayam-about-hero {
    margin-top: -82px;
  }

  /* Standard breadcrumb banner (.bg-breadcrumb) */
  .bg-breadcrumb {
    margin-top: -82px;
  }
}

/* ============================================================
   FIX: OWL Carousel inactive slide leak
   ROOT CAUSE:
   animateOut:'slideOutDown' stacks all .owl-item elements
   absolutely at top:0. Inactive slides retain opacity:1 from
   animation-fill-mode:both, causing slide 2 buttons to bleed
   over the active slide on desktop.
   FIX: Force inactive slides (not transitioning) to opacity:0
   and pointer-events:none so they are invisible and non-interactive.
   ============================================================ */
.jayam-site .header-carousel .owl-item:not(.active):not(.owl-animated-in):not(.owl-animated-out) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}