/* Size selection pills on product cards */
.cd-size-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-size-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 36px;
  padding: 6px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.cd-size-pill:hover { border-color: #bbb; }
.cd-size-pill:focus { outline: 2px solid #2684ff; outline-offset: 1px; }
.cd-size-pill.selected { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
@media (max-width: 576px) {
  .cd-size-pill { min-width: 40px; height: 34px; padding: 6px 10px; border-radius: 8px; }
}
/* Hide back-to-top when any Bootstrap modal is open */
body.modal-open #cd-back-to-top {
  display: none !important;
}
/* Navbar link visibility tweaks: emphasize nav links */
.navbar-nav .nav-link {
  font-weight: 700; /* Make Home/Products/About us bold */
}

/* Improve legibility on small screens: font size and spacing */
@media (max-width: 576px) {
  .navbar-nav .nav-link {
    font-size: 1.05rem; /* Slightly larger text for mobile */
    letter-spacing: 0.2px; /* Minor spacing for clarity */
  }
}

/* Ensure the expanded mobile menu sits on a solid background */
@media (max-width: 992px) {
  .navbar-collapse {
    background-color: rgba(248, 249, 250, 0.95); /* near bg-light */
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08);
  }

  /* Higher contrast links on mobile menu */
  .navbar-light .navbar-nav .nav-link {
    color: #35393d;
  }
  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link.active {
    color: #000;
  }
}

/* Fixed navbar styles and theme variables */
/* Theme: Velasca-inspired palette applied via CSS variables */
:root {
  /* Core palette */
  --color-primary: #285570;      /* deep cool blue */
  --color-bg: #faf7f6;           /* soft off-white */
  --color-accent: #e3ded7;       /* warm light beige */
  --color-muted: #cbcac7;        /* neutral gray-beige */
  --color-dark: #333333;         /* near black */

  /* Component tokens */
  --nav-bg-solid: rgba(255,255,255,0.92);
  --nav-text: var(--color-dark);
  --brand-gold: #D4AF37; /* keep brand accent unless changed */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: #ffffff;
  --footer-bg: var(--color-accent);
  --category-box-bg: rgba(0,0,0,0.035);
  --category-box-border: rgba(0,0,0,0.06);
}

/* Apply base background, text, and font family (Lato site-wide) */
html, body { background-color: var(--color-bg); color: var(--color-dark); font-family: 'Lato', Arial, sans-serif; }

/* Product media: scaling improvements for portrait images */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

.penguin-logo { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Price / info / buttons */
.penguin-info { display: block; margin-left: auto; margin-right: auto; margin-top: 10%; }
.penguin-card-border, .penguin-card-img { border-radius: 1em; }
.price-text-style { color: rgb(237, 158, 12); font-weight: bold; }
.penguin-card-footer, .penguin-card-border { background-color: white; border: 0; }
.penguin-btn { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.footer-section { background-color: var(--footer-bg); padding: 3% 1% 1% 1%; }

/* IMAGE / CAROUSEL: desktop width-first, mobile height-first scaling */
:root {
  --product-img-height-desktop: 320px;
  --product-img-height-mobile: 340px; /* increased for better mobile visibility */
  --product-image-padding-desktop: 0;  /* kept minimal */
  --product-image-padding-mobile: 4px; /* slight padding on mobile */
}

.product-media {
  height: var(--product-img-height-desktop);
  max-height: var(--product-img-height-desktop);
  overflow: hidden;
  background-color: #f4f7f6;
  padding: var(--product-image-padding-desktop);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* needed for indicators/mask positioning */
}

/* Desktop / tablet: width-first scaling to reduce side gaps while still showing full image */
.product-media img,
.carousel-slide-inner img,
.card-product > img,
.card-product img.card-img-top {
  display: block;
  width: 100%;          /* prefer full-width usage on larger screens */
  height: auto;         /* preserve aspect ratio */
  max-height: 100%;     /* don't overflow the product-media height */
  object-fit: contain;  /* preserve entire image (no cropping) */
  object-position: center center;
  background-color: transparent;
  padding: 0;
}

/* Carousel layout */
.product-media .carousel { width: 100%; height: 100%; }
.product-media .carousel-inner { height: 100% !important; position: relative; overflow: hidden; }
.product-media .carousel-item { height: 100%; position: relative; }
.carousel-slide-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* Single-image fallback */
.card-product img.card-img-top,
.card-product > img {
  display: block;
  width: 100%;
  height: var(--product-img-height-desktop);
  object-fit: contain;
  object-position: center center;
}

/* NAVBAR: positioning and mobile panel styles */
.fixed-navbar {
  position: fixed; top: 0; width: 100%; z-index: 999;
  background: hsla(0, 0%, 100%, 0.018); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); height: 80px;
}
/* Brand title color aligned to theme primary; change to --brand-gold if preferred */
.navbar-brand-text {
  font-size: 2.3rem;
  font-family: "Cookie", cursive;
  font-weight: 400; /* stronger presence to echo logo */
  font-style: normal;
  margin-left: 50px;
  color: var(--brand-gold); /* match logo accent */
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Navbar solid state: improves contrast after scrolling or when mobile menu is open */
.fixed-navbar.navbar-solid {
  background: var(--nav-bg-solid);
  backdrop-filter: saturate(120%) blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Center brand text across desktop and mobile */
.navbar .container { position: relative; }
.navbar .navbar-brand {
  /* Center brand horizontally and stack title + tagline */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0; /* override any spacing */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tagline: small, bold-ish, tight spacing and centered */
.navbar-brand-subtext { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3px; margin-top: 2px; }

/* Place toggler (three lines) on the left for mobile */
@media (max-width: 992px) {
  .navbar .navbar-toggler {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Full-width edge-to-edge mobile menu panel below brand */
  .navbar .navbar-collapse {
    position: fixed;
    left: 0;
    right: 0;
    top: 80px; /* align with navbar height */
    width: 100vw;
    max-width: 100vw;
    /* Match the solid navbar background for better readability */
    background: var(--nav-bg-solid);
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    padding: 12px 16px;
    z-index: 1000;
  }

  .navbar .navbar-nav .nav-link {
    display: block;
    padding: 12px 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .navbar .navbar-nav .nav-item + .nav-item .nav-link {
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .navbar .dropdown-menu {
    position: static;
    float: none;
    margin: 6px 0 10px;
    border: none;
    border-left: 2px solid rgba(0,0,0,0.06);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 6px 8px;
  }

  /* Allow Bootstrap to show dropdown with .show */
  .navbar .dropdown-menu.show {
    display: block;
    background: rgba(255,255,255,0.98);
  }

  .navbar .dropdown-item {
    padding: 10px 6px;
    font-weight: 600;
  }
}

/* Clean hamburger: remove box, border and focus ring */
.navbar-toggler {
  border: none;
  background: transparent;
}
.navbar-toggler:focus,
.navbar-toggler:active {
  box-shadow: none;
  outline: none;
}
/* Ensure the three-line icon is visible on light navbars */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* HERO BANNER: scrolling background and title overlay */
.hero-banner {
  height: 50vh;
  margin-top: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 1; }
.hero-banner .content { position: relative; z-index: 2; }

/* Back-to-top floating button */
#cd-back-to-top {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 1200;
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  color: #333;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#cd-back-to-top:hover { filter: brightness(1.03); }
#cd-back-to-top i { font-size: 18px; line-height: 1; }

@media (max-width: 576px) {
  #cd-back-to-top { right: 12px; bottom: 72px; width: 48px; height: 48px; }
}

/* Floating WhatsApp button (mobile-only) */
#cd-whatsapp-float {
  position: fixed;
  right: 12px;
  bottom: 16px;
  z-index: 1150;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: none; /* shown on mobile via media query */
  align-items: center;
  justify-content: center;
  background: #25D366; /* WhatsApp green */
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  text-decoration: none;
}
#cd-whatsapp-float i { font-size: 28px; line-height: 1; }
#cd-whatsapp-float:hover { filter: brightness(1.05); }
@media (max-width: 576px) {
  #cd-whatsapp-float { display: inline-flex; }
}
/* Hide floating buttons when modal (Your Cart) is open */
body.modal-open #cd-whatsapp-float { display: none !important; }

/* Scrolling banners background */
.hero-banners-strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-banners-track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 24px;
  animation: cd-scroll-x 40s linear infinite;
}
.hero-banners-track img {
  height: 70%;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  filter: saturate(110%);
}

@keyframes cd-scroll-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile tune: adjust banner sizes and animation */
@media (max-width: 576px) {
  /* Make the banner more readable on mobile */
  .hero-banner {
    height: 50vh; /* taller so title + subtitle fit fully */
    margin-top: 80px; /* match fixed navbar height */
    padding: 12px 12px 18px; /* extra bottom padding for full visibility */
  }

  .hero-banner::before {
    background: rgba(0,0,0,0.6); /* stronger contrast for text */
  }

  .hero-banners-track img { height: 60%; opacity: 0.9; }
  .hero-banners-track { animation-duration: 45s; gap: 12px; } /* faster, closer to desktop */

  .hero-title {
    font-size: 2.0rem; /* compact for mobile */
    line-height: 1.2;
    margin-bottom: 6px;
  }
  .hero-subtitle {
    font-size: 1.2rem;
    line-height: 1.25;
  }
}

/* iPhone 13/14/15 sizes (portrait) fine-tuning */
@media (max-width: 428px) and (min-height: 800px) {
  .hero-banner { height: 56vh; margin-top: 80px; padding: 12px 12px 20px; }
  .hero-title { font-size: 1.9rem; line-height: 1.15; margin-bottom: 6px; }
  .hero-subtitle { font-size: 1.15rem; line-height: 1.25; }
  .hero-banners-track { animation-duration: 40s; }
}

/* Slightly smaller width (e.g., iPhone 13 non-max) */
@media (max-width: 390px) and (min-height: 780px) {
  .hero-banner { height: 58vh; }
  .hero-title { font-size: 1.8rem; }
  .hero-subtitle { font-size: 1.1rem; }
}

/* Galaxy S21 portrait (approx 412x915) */
@media (max-width: 412px) and (min-height: 800px) {
  .hero-banner { height: 60vh; margin-top: 80px; padding: 12px 12px 22px; }
  .hero-banner::before { background: rgba(0,0,0,0.65); }
  .hero-title { font-size: 1.7rem; line-height: 1.15; margin-bottom: 6px; }
  .hero-subtitle { font-size: 1.05rem; line-height: 1.25; }
  .hero-banners-track { animation-duration: 40s; }
}
.hero-title { color: var(--brand-gold); font-size: 3.5rem; font-weight: bold; margin-bottom: 15px; }
.hero-subtitle { color: var(--color-bg); font-size: 2rem; font-weight: 700; }

/* Category spacing: compact spacing and separators */
#products.mt-5.pt-5 { margin-top: 0.5rem !important; padding-top: 0.5rem !important; }
.category-section.container.mt-5 { margin-top: 0.5rem !important; padding-top: 0.25rem !important; border-top: 1px solid rgba(0,0,0,0.04); }

/* In-page category nav: heading and pills visible on mobile + desktop */
.shop-by-category { font-weight: 600; }
#cd-category-pills { padding-bottom: 4px; }
#cd-category-pills .nav-link { font-weight: 600; }

/* Modern style for category pills */
#cd-category-pills .nav-link.btn {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #ffffff, #f6f6f6);
  color: var(--color-dark);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 8px 14px;
}
#cd-category-pills .nav-link.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
#cd-category-pills .nav-link.btn:active,
#cd-category-pills .nav-link.btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Category title: prominent boxed style for better visibility on main page */
.category-title {
  display: block;
  margin: 0.5rem 0 0.75rem;
  padding: 10px 12px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  background: var(--category-box-bg);
  border: 1px solid var(--category-box-border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

@media (max-width: 576px) {
  .category-title { font-size: 1.15rem; padding: 8px 10px; }
}

/* fallback scale for devices where JS won't run */
@media (hover: hover) and (pointer: fine) {
  .product-media img, .card-product > img { transition: transform .35s ease; will-change: transform; cursor: zoom-in; }
  .product-media:hover img, .card-product:hover > img { transform: scale(1.02); }
}

/* Carousel indicators: hide arrows; center dots below image */
.card-product .carousel-control-prev,
.card-product .carousel-control-next {
  display: none !important; /* hide arrow panels in card grid */
}

/* Move indicators to bottom center of the product-media */
.card-product .carousel-indicators {
  position: absolute;
  top: auto;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  padding: 0;
  margin: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  background: transparent;
  align-items: center;
  justify-content: center;
}

/* default dot */
.card-product .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(246, 245, 245, 0.306);
  border: 1px solid rgba(223, 75, 75, 0.002);
  opacity: 1;
  padding: 0;
  transition: transform .12s ease, background-color .12s ease;
}

/* active dot */
.card-product .carousel-indicators .active,
.card-product .carousel-indicators [aria-current="true"] {
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* ensure indicator buttons are not intrusive on image */
.card-product .carousel-indicators button {
  border: none;
  outline: none;
}

/* Mobile-specific improvements: taller viewer and height-first scaling */
@media (max-width: 576px) {
  :root {
    --product-img-height-desktop: 320px;
    --product-img-height-mobile: 360px; /* make viewer taller on narrow screens */
  }

  .product-media {
    height: var(--product-img-height-mobile);
    max-height: var(--product-img-height-mobile);
    padding: var(--product-image-padding-mobile);
    border-radius: 10px;
  }

  /* On mobile prefer height-first so portrait images fill more of the viewer */
  .product-media img,
  .carousel-slide-inner img,
  .card-product > img,
  .card-product img.card-img-top {
    width: auto;        /* width determined by aspect ratio */
    height: 100%;       /* fill viewer height */
    max-width: 100%;
    object-fit: contain; /* still show full image without cropping */
    padding: 0;
  }

  /* Slightly larger dots on mobile for easier tapping */
  .card-product .carousel-indicators [data-bs-target] { width: 10px; height: 10px; }
  .card-product .carousel-indicators .active,
  .card-product .carousel-indicators [aria-current="true"] { width: 14px; height: 14px; }

  /* disable zoom panel on small screens for performance/usability */
  .cd-zoom-panel { display: none !important; }
  .cd-zoom-mask { display: none !important; }
}

/* small-other screens */
@media (max-width: 767px) {
  /* keep zoom disabled for tablets/smaller devices */
  .cd-zoom-panel { display: none !important; }
  .cd-zoom-mask { display: none !important; }
}

/* Footer icon brand colors + hover polish */

.footer-section a { text-decoration: none; }

/* Base styling for icons in the footer */
.footer-section .fa {
  display: inline-block;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
  opacity: 0.95;
}

/* Facebook: official blue */
.footer-section a[href*="facebook"] .fa,
.footer-section .fa-facebook,
.footer-section .fa-facebook-square {
  color: #1877F2; /* Facebook Blue */
}

/* Instagram: gradient colored text via background-clip (modern browsers) */
.footer-section a[href*="instagram"] .fa,
.footer-section .fa-instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%,
    #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* needed for background-clip text */
  -webkit-text-fill-color: transparent;
}

/* WhatsApp: green */
.footer-section a[href*="wa.me"] .fa,
.footer-section a[href*="whatsapp"] .fa,
.footer-section .fa-whatsapp {
  color: #06b947; /* WhatsApp green */
}

/* Hover: subtle lift + full opacity */
.footer-section a:hover .fa {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.03);
  opacity: 1;
}

/* Ensure large icon sizing is consistent */
.footer-section .fa-2x {
  font-size: 2.6rem; /* adjust if you want bigger/smaller */
}

/* Mobile menu socials: apply same brand colors as footer */
.navbar-mobile-socials a { text-decoration: none; }
.navbar-mobile-socials .fa { transition: transform .12s ease, filter .12s ease, opacity .12s ease; opacity: 0.95; }
/* Facebook blue */
.navbar-mobile-socials .fa-facebook,
.navbar-mobile-socials .fa-facebook-square { color: #1877F2; }
/* Instagram gradient text */
.navbar-mobile-socials .fa-instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%,
    #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.navbar-mobile-socials a:hover .fa { transform: translateY(-2px) scale(1.02); filter: brightness(1.03); opacity: 1; }

/* Gallery Overlay (desktop + mobile) */
.cd-gallery-overlay {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 120010; display: none;
}
.cd-gallery-header {
  position: absolute; left: 12px; top: 12px; z-index: 2;
}
.cd-gallery-back {
  background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px; padding: 6px 12px; font-weight: 600;
}
.cd-gallery-desktop {
  position: absolute; inset: 60px 24px 24px 24px; display: grid;
  grid-template-columns: 72px 1fr; gap: 16px; align-items: start;
}
.cd-gallery-desktop .cd-thumbs { overflow-y: auto; max-height: 100%; }
.cd-gallery-desktop .cd-thumbs img {
  display: block; width: 64px; height: 64px; object-fit: cover;
  border-radius: 6px; margin-bottom: 8px; opacity: 0.85; cursor: pointer;
}
.cd-gallery-desktop .cd-thumbs img.active { outline: 2px solid #fff; opacity: 1; }
.cd-gallery-desktop .cd-main {
  position: relative; background: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.cd-gallery-desktop .cd-main img { max-width: 100%; max-height: 80vh; object-fit: contain; }

/* Mobile cascade list */
.cd-gallery-mobile-cascade {
  position: absolute; inset: 60px 0 60px 0; overflow-y: auto; padding: 0 12px;
}
.cd-gallery-mobile-cascade .cd-cascade-img {
  display: block; width: 100%; height: auto; object-fit: contain;
  border-radius: 8px; margin-bottom: 16px; background: #fff; padding: 4px;
}
.cd-gallery-mobile-dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 16px; display: flex; gap: 6px;
}
.cd-gallery-mobile-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #bbb; }
.cd-gallery-mobile-dots .dot.active { background: #fff; width: 10px; height: 10px; }

/* Mobile fullscreen with thumbs below */
.cd-gallery-mobile-view {
  position: absolute; inset: 60px 0 84px 0; display: flex; align-items: center; justify-content: center;
}
.cd-gallery-mobile-view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cd-gallery-mobile-thumbs {
  position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 8px; padding: 0 12px; justify-content: center;
}
.cd-gallery-mobile-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; opacity: 0.85; }
.cd-gallery-mobile-thumbs img.active { outline: 2px solid #fff; opacity: 1; }

/* Share highlight effect when navigating via ?product=ID */
.card-product.share-highlight {
  outline: 2px solid var(--brand-gold);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  animation: cd-highlight-pulse 1.6s ease-in-out 2;
}
@keyframes cd-highlight-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Back-to-Home modern button (policies) */
.back-home-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #1f4358);
  box-shadow: 0 8px 20px rgba(31, 67, 88, 0.22);
}
.back-home-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.back-home-btn:active { filter: brightness(0.98); }

/* Only 1 Left badge (Final Sale) */
.badge-only-one {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dc3545; /* Bootstrap danger tone */
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}