:root {
  /* Primary Brand (Red Theme) */
  --green: #C90606;          /* main red (logo color) */
  --green-dark: #8B0000;     /* deep red */
  --green-light: #E04A4A;    /* lighter red */
  --green-pale: #FDECEC;     /* very soft red background */
        --accent-amber: #f59e0b;
        --soft-bg: #fdf0f0;
  /* Accent */
  --amber: #F59E0B;
  --amber-pale: #FEF9EC;

  /* Base Colors */
  --white: #FFFFFF;
  --off-white: #FAFAFA;

  /* Neutrals (matched with logo tone) */
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-900: #1F1F1F;

  /* Status */
  --red: #E53935;

  /* Shadows (slightly red tinted for branding) */
  --shadow-sm: 0 2px 8px rgba(var(--theme-primary-rgb), 0.08);
  --shadow-md: 0 8px 32px rgba(var(--theme-primary-rgb), 0.14);
  --shadow-lg: 0 20px 60px rgba(var(--theme-primary-rgb), 0.18);

  /* Radius */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 100px;
    --font-display: 'Fraunces', serif;
  --font-body:    'Nunito', sans-serif;
}
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
       font-family: var(--font-body);
      background: var(--off-white);
      color: var(--gray-900);
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }
h1, h2, h3, h4, h5, h6,
.section-title,
.legal-content h2,
.page-hero h1,
.paw-card h3,
.paw-card h4 {
  font-family: var(--font-display);
}

/* Forms, buttons, inputs — Nunito */
input, textarea, select, button,
.input-custom,
.btn-brand,
.btn-outline,
.btn-atc,
.nav-btn-primary,
.btn-add-cart {
  font-family: var(--font-body);
}
    /* ===== SKELETON LOADER ===== */
    #page-loader {
      position: fixed;
      inset: 0;
      background: var(--white);
      z-index: 9999;
      overflow-y: auto;
      padding-bottom: 60px;
    }
    .sk-nav {
      height: 72px;
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .sk-logo { width: 140px; height: 36px; border-radius: 6px; }
    .sk-nav-links { display: flex; gap: 20px; }
    .sk-nav-link { width: 60px; height: 16px; border-radius: 4px; }
    .sk-nav-icons { display: flex; gap: 16px; }
    .sk-icon { width: 36px; height: 36px; border-radius: 50%; }
    .sk-hero { height: 480px; margin: 24px 40px; border-radius: var(--radius); }
    .sk-section { padding: 40px; }
    .sk-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
    .sk-section-title { width: 220px; height: 28px; border-radius: 6px; }
    .sk-see-all { width: 80px; height: 20px; border-radius: 4px; }
    .sk-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .sk-product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; }
    .sk-product-img { width: 100%; height: 200px; }
    .sk-product-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
    .sk-product-tag { width: 60px; height: 14px; border-radius: 4px; }
    .sk-product-title { width: 90%; height: 18px; border-radius: 4px; }
    .sk-product-title-2 { width: 65%; height: 18px; border-radius: 4px; }
    .sk-product-price { width: 80px; height: 22px; border-radius: 4px; margin-top: 4px; }
    .sk-product-btn { width: 100%; height: 40px; border-radius: var(--radius-pill); margin-top: 6px; }
    .shimmer {
      background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 40%, var(--gray-100) 80%);
      background-size: 400% 100%;
      animation: shimmer 1.4s ease-in-out infinite;
    }
    @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
    #page-loader.fade-out { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }

    /* ===== ANNOUNCE BAR ===== */
    .announce-bar {
      background: var(--green);
      color: var(--white);
      text-align: center;
      padding: 9px 20px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .announce-bar span { opacity: 0.6; margin: 0 12px; }

    /* ===== NAVBAR ===== */
    .navbar {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 16px rgba(45,125,70,0.07);
    }
    .nav-inner {
      /* max-width: 1400px; */
      width: 100%;
      margin: 0 auto;
      padding: 0 40px;
      height: 72px;
      display: flex;
      align-items: center;
      gap: 36px;
    }
    .mobile-trigger { display: none; font-size: 24px; color: var(--gray-900); background: none; border: none; cursor: pointer; }
        .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 1001; }
    .nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0;text-decoration: none; }
    .logo-mark {
      width: 65px; height: 65px;
      /* background: var(--green); */
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      position: relative;
    }
    .logo-mark::after {
      content: '';
      position: absolute;
      top: -4px; right: -4px;
      width: 14px; height: 14px;
      background: var(--amber);
      border-radius: 50%;
      border: 2px solid var(--white);
    }
    .logo-text {
      /* font-family: 'Fraunces', serif;
      font-weight: 900;
      font-size: 22px;
      color: var(--gray-900); */
      max-width: 80px;
    }
    .logo-text em { font-style: normal; color: var(--green); }

    .nav-search {
      flex: 1; max-width: 480px; position: relative;
    }
    .nav-search input {
      width: 100%; height: 42px;
      border: 1.5px solid var(--gray-200);
      border-radius: var(--radius-pill);
      padding: 0 48px 0 20px;
      font-family: 'Nunito', sans-serif;
      font-size: 14px;
      background: var(--gray-100);
      color: var(--gray-900);
      outline: none;
      transition: border-color 0.2s, background 0.2s;
    }
    .nav-search input:focus { border-color: var(--green); background: var(--white); }
    .nav-search input::placeholder { color: var(--gray-400); }
    .nav-search-btn {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      width: 32px; height: 32px;
      background: var(--green); border: none; border-radius: 50%;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: var(--white); transition: background 0.2s;
    }
    .nav-search-btn:hover { background: var(--green-dark); }

    .nav-links { display: flex; align-items: center; gap: 24px;margin-left: auto; }
    .nav-links a {
      font-size: 14px; font-weight: 700;
      color: var(--gray-600); transition: color 0.2s; white-space: nowrap;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--green); }

    .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
    .nav-btn {
      width: 40px; height: 40px; border-radius: 50%; border: none;
      background: transparent; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--gray-600); font-size: 18px;
      transition: background 0.2s, color 0.2s; position: relative;
    }
    .nav-btn:hover { background: var(--green-pale); color: var(--green); }
    .nav-btn .badge {
      position: absolute; top: 4px; right: 4px;
      width: 18px; height: 18px;
      background: var(--green); color: var(--white);
      border-radius: 50%; font-size: 10px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid var(--white);
    }
    .nav-btn-primary {
      height: 40px; padding: 0 20px;
      background: var(--green); color: var(--white);
      border: none; border-radius: var(--radius-pill);
      font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800;
      cursor: pointer; transition: background 0.2s; white-space: nowrap;
    }
    .nav-btn-primary:hover { background: var(--green-dark); }

    /* ===== CATEGORY BAR ===== */
    .cat-bar { background: var(--white); border-bottom: 1px solid var(--gray-200); }
    .cat-bar-inner {
      max-width: 1400px; margin: 0 auto; padding: 0 40px;
      display: flex; align-items: center; overflow-x: auto; scrollbar-width: none;
    }
    .cat-bar-inner::-webkit-scrollbar { display: none; }
    .cat-item {
      padding: 12px 20px; font-size: 13.5px; font-weight: 700;
      color: var(--gray-600); cursor: pointer; white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .cat-item:hover { color: var(--green); }
    .cat-item.active { color: var(--green); border-bottom-color: var(--green); }

    /* ===== HERO ===== */
    .hero {
      max-width: 1400px; margin: 28px auto; padding: 0 40px;
      display: grid; grid-template-columns: 1.5fr 1fr;
      grid-template-rows: 1fr 1fr; gap: 16px; height: 500px;
    }
    .hero-main {
      grid-row: 1 / 3;
      background: linear-gradient(140deg, var(--green-dark) 0%, var(--green) 45%, var(--green) 100%);
      border-radius: var(--radius); overflow: hidden;
      position: relative; cursor: pointer;
      display: flex; align-items: flex-end; padding: 40px;
    }
    .hero-main::before {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='80' cy='0' r='20'/%3E%3Ccircle cx='0' cy='80' r='20'/%3E%3Ccircle cx='80' cy='80' r='20'/%3E%3C/g%3E%3C/svg%3E");
    }
    .hero-main::after {
      content: '';
      position: absolute; top: -80px; right: -80px;
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
      border-radius: 50%;
    }
    .hero-main-product {
      position: absolute; top: 50%; right: 8%; transform: translateY(-50%);
      width: 200px; height: 260px;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-product-visual {
      width: 170px; height: 210px;
      background: linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04));
      border-radius: 24px; border: 1px solid rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 88px; backdrop-filter: blur(4px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
      animation: float 4s ease-in-out infinite;
    }
    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
    .hero-main-content { position: relative; z-index: 2; }
    .hero-badge {
      display: inline-block;
      background: rgba(255,255,255,0.15); color: var(--white);
      font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 5px 14px; border-radius: var(--radius-pill); margin-bottom: 14px;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .hero-main-title {
      font-family: 'Fraunces', serif;
      font-size: 42px; font-weight: 900; color: var(--white);
      line-height: 1.1; margin-bottom: 14px;
    }
    .hero-main-sub { font-size: 14px; color: rgba(255,255,255,0.72); margin-bottom: 24px; font-weight: 600; }
    .hero-cta {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--white); color: var(--green);
      font-weight: 800; font-size: 14px;
      padding: 12px 24px; border-radius: var(--radius-pill);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

    .hero-side {
      background: var(--green-pale); border-radius: var(--radius); padding: 24px;
      cursor: pointer; position: relative; overflow: hidden;
      display: flex; flex-direction: column; justify-content: space-between;
      transition: transform 0.2s; border: 1.5px solid rgba(45,125,70,0.1);
    }
    .hero-side:hover { transform: translateY(-3px); }
    .hero-side-2 { background: linear-gradient(135deg, var(--amber-pale) 0%, var(--theme-tint) 100%); border-color: rgba(var(--theme-secondary-rgb),0.15); }
    .hero-side-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
    .hero-side-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; color: var(--gray-900); line-height: 1.3; }
    .hero-side-disc {
      display: inline-block; background: var(--green); color: var(--white);
      font-size: 12px; font-weight: 800; padding: 4px 12px;
      border-radius: var(--radius-pill); margin-top: 10px;
    }
    .hero-side-emoji { font-size: 64px; text-align: right; line-height: 1; margin-top: auto; }

    /* ===== SECTIONS ===== */
    .section { max-width: 1400px; margin: 0 auto; padding: 0 40px 52px; }
    .section-header {
      display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px;
    }
    .section-title {
      font-family: 'Fraunces', serif;
      font-size: 28px; font-weight: 700; color: var(--gray-900);
    }
    .section-title span { color: var(--green); }
    .see-all {
      font-size: 13px; font-weight: 800; color: var(--green);
      display: flex; align-items: center; gap: 4px; transition: gap 0.2s;
    }
    .see-all:hover { gap: 8px; }

    /* ===== CATEGORIES ===== */
    .cats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
    .cat-card { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
    .cat-icon {
      width: 88px; height: 88px;
      background: var(--white); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 36px;
      border: 2px solid var(--gray-200);
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
       position: relative;
    }
    .cat-card:hover .cat-icon { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(45,125,70,0.18); }
    .cat-name { font-size: 13px; font-weight: 700; color: var(--gray-600); text-align: center; transition: color 0.2s; }
    .cat-card:hover .cat-name { color: var(--green); }

    /* ===== PRODUCTS GRID ===== */
    .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .product-card {
      background: var(--white); border-radius: var(--radius);
      overflow: hidden; box-shadow: var(--shadow-sm);
      transition: transform 0.25s, box-shadow 0.25s;
      cursor: pointer; position: relative;
    }
    .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
    .product-img-wrap {
      position: relative; overflow: hidden;
      background: var(--gray-100); height: 210px;
      display: flex; align-items: center; justify-content: center; font-size: 78px;
    }
    .product-badge {
      position: absolute; top: 12px; left: 12px;
      background: var(--green); color: var(--white);
      font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 4px 10px; border-radius: var(--radius-pill);
    }
    .product-badge.badge-new { background: var(--gray-900); }
    .product-badge.badge-hot { background: #FF6B35; }
    .product-badge.badge-sale { background: var(--red); }
    .product-wishlist {
      position: absolute; top: 12px; right: 12px;
      width: 34px; height: 34px; background: var(--white);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      opacity: 0; transition: opacity 0.2s;
    }
    .product-card:hover .product-wishlist { opacity: 1; }
    .product-body { padding: 16px; }
    .product-cat { font-size: 11px; font-weight: 800; color: var(--green); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
    .product-name { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; line-height: 1.4; }
    .product-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 12px; color: var(--amber); }
    .product-stars span { color: var(--gray-400); font-size: 11px; margin-left: 2px; }
    .product-footer { display: flex; align-items: center; justify-content: space-between; }
    .product-price { display: flex; flex-direction: column; }
    .price-current { font-size: 18px; font-weight: 800; color: var(--green); }
    .price-old { font-size: 12px; color: var(--gray-400); text-decoration: line-through; }
    .btn-add {
      height: 36px; padding: 0 16px; background: var(--green); color: var(--white);
      border: none; border-radius: var(--radius-pill);
      font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
      cursor: pointer; transition: background 0.2s, transform 0.15s;
      display: flex; align-items: center; gap: 6px;
    }
    .btn-add:hover { background: var(--green-dark); transform: scale(1.05); }

    /* ===== DIVIDER STRIP ===== */
    .section-divider {
      background: var(--green);
      padding: 14px 0;
    }
    .divider-inner {
      max-width: 1400px; margin: 0 auto; padding: 0 40px;
      display: flex; align-items: center; gap: 24px;
    }
    .divider-label {
      background: var(--white); color: var(--green);
      font-weight: 900; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap;
    }
    .divider-title { color: var(--white); font-size: 15px; font-weight: 700; }
    .divider-timer { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .timer-unit {
      background: rgba(255,255,255,0.15); border-radius: 8px;
      padding: 4px 10px; min-width: 48px; text-align: center;
    }
    .timer-num { font-size: 20px; font-weight: 900; color: var(--white); line-height: 1.2; display: block; }
    .timer-lbl { font-size: 10px; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; }
    .timer-colon { font-size: 22px; font-weight: 900; color: rgba(255,255,255,0.6); margin-bottom: 4px; }

    /* ===== PROMO ===== */
    .promo-banner { max-width: 1400px; margin: 0 auto 52px; padding: 0 40px; }
    .promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .promo-card {
      border-radius: var(--radius); padding: 36px 40px;
      position: relative; overflow: hidden; cursor: pointer;
      min-height: 180px; display: flex; flex-direction: column; justify-content: center;
    }
    .promo-card-1 { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); color: var(--white); }
    .promo-card-2 { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%); color: var(--white); }
    .promo-card::after {
      content: ''; position: absolute; right: -30px; top: -30px;
      width: 200px; height: 200px;
      border: 40px solid rgba(255,255,255,0.06); border-radius: 50%;
    }
    .promo-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-bottom: 8px; }
    .promo-title { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; margin-bottom: 6px; line-height: 1.2; }
    .promo-sub { font-size: 14px; opacity: 0.78; margin-bottom: 20px; font-weight: 600; }
    .promo-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.18); color: var(--white);
      border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-pill);
      padding: 9px 20px; font-size: 13px; font-weight: 800;
      cursor: pointer; transition: background 0.2s; font-family: 'Nunito', sans-serif;
    }
    .promo-btn:hover { background: rgba(255,255,255,0.28); }
    .promo-emoji { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); font-size: 80px; opacity: 0.28; }

    /* ===== FEATURES ===== */
    .features {
      background: var(--white); padding: 36px 0;
      border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); margin-bottom: 52px;
    }
    .features-inner {
      max-width: 1400px; margin: 0 auto; padding: 0 40px;
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    }
    .feature { display: flex; align-items: center; gap: 16px; }
    .feature-icon {
      width: 52px; height: 52px; background: var(--green-pale);
      border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
      font-size: 24px; flex-shrink: 0;
    }
    .feature-title { font-size: 14px; font-weight: 800; color: var(--gray-900); margin-bottom: 3px; }
    .feature-desc { font-size: 12px; color: var(--gray-400); font-weight: 600; }

    /* ===== FOOTER ===== */
    footer { background: var(--gray-900); color: var(--white);  }
    .footer-inner {
      max-width: 1400px; margin: 0 auto; padding: 0 40px;
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
    }
    .footer-brand p { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.7; margin: 16px 0 24px; max-width: 280px; font-weight: 600; }
    .footer-socials { display: flex; gap: 10px; }
    .social-btn {
      width: 36px; height: 36px; background: rgba(255,255,255,0.08);
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
      font-size: 16px; cursor: pointer; transition: background 0.2s;
    }
    .social-btn:hover { background: var(--green); }
    .footer-col h4 { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 20px; }
    .footer-col ul { display: flex; flex-direction: column; gap: 12px; }
    .footer-col ul li a { font-size: 14px; color: rgba(255,255,255,0.6); transition: color 0.2s; font-weight: 600; }
    .footer-col ul li a:hover { color: var(--white); }
    .footer-bottom {
      margin-top: 48px; padding: 20px 40px;
      border-top: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: space-between;
      font-size: 13px; color: rgba(255,255,255,0.35); font-weight: 600;
    }
    .footer-bottom em { color: var(--green); font-style: normal; }

    #back-top {
      position: fixed; bottom: 28px; right: 28px;
      width: 44px; height: 44px;
      background: var(--green); color: var(--white);
      border: none; border-radius: 50%; cursor: pointer;
      font-size: 18px; display: none; align-items: center; justify-content: center;
      box-shadow: var(--shadow-md); z-index: 200; transition: transform 0.2s;
    }
    #back-top:hover { transform: translateY(-3px); }
    #back-top.visible { display: flex; }

    .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ===== NEW ARRIVAL RIBBON ===== */
    .new-ribbon {
      position: absolute; top: 14px; left: -8px;
      background: var(--amber); color: var(--white);
      font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 4px 14px 4px 12px;
      clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
    }

    .announce-bar {
  background: var(--green);
  color: #fff;
  overflow: hidden;
  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  position: relative;
}

.announce-track {
  position: relative;
  height: 24px;
}

.announce-item {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s ease;
}

.announce-item.active {
  opacity: 1;
  transform: translateY(0);
}

.announce-item i {
  margin-right: 8px;
  color: var(--amber);
}

@media (max-width: 1024px) {
            .nav-inner { padding: 0 20px; gap: 20px; }
            .nav-links { display: none; } /* Hide links on tablet/mobile */
            .mobile-trigger { display: block; }
            
            /* Mobile Nav Drawer */
            .nav-links.mobile-active {
                display: flex; position: fixed; top: 0; left: 0; 
                width: 280px; height: 100vh; background: white;
                flex-direction: column; padding: 40px; z-index: 1002;
                box-shadow: 10px 0 30px rgba(0,0,0,0.1);
            }
        }

        @media (max-width: 768px) {
            .navbar { height: 70px; }
            .nav-search { display: none; }
            .nav-btn-primary { display: none; }
            .cat-bar { top: 70px; }
            .hero { flex-direction: column; text-align: center; }
            .hero-content h1 { font-size: 2.5rem; }
            
            /* Horizontal Pill Style for Mobile Categories */
            .cat-item {
                background: var(--gray-100); border-radius: 50px;
                padding: 8px 18px; margin: 10px 0; border: none;
                font-size: 13px;
            }
            .cat-item.active { background: var(--green); color: white; }
        }
        .navbar {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 12px 20px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* Logo */
.logo-text {
  font-size: 22px;
  font-weight: 700;
}
.logo-text em {
  color: var(--green);
  font-style: normal;
}

/* Search */
.nav-search {
  flex: 1;
  max-width: 400px;
  display: flex;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.nav-search input {
  border: none;
  padding: 8px 12px;
  width: 100%;
  outline: none;
}

.nav-search-btn {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 0 15px;
}

/* Links */
.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  color: var(--gray-600);
  font-weight: 500;
}

.nav-links a.active {
  color: var(--green);
}

/* Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-btn-primary  {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.nav-btn-primary:hover{
  text-decoration: none;
  color: var(--white);
}

/* Mobile Trigger */
.mobile-trigger {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100%;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 20px;
  transition: 0.3s;
  z-index: 1000;
  overflow-y: scroll;
}

.sidebar.active {
  left: 0;
}

.sidebar a {
  display: block;
  padding: 12px 6px;
  color: var(--gray-700);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
}

.close-sidebar {
  background: none;
  border: none;
  font-size: 20px;
  margin-bottom: 15px;
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 999;
}

.overlay.active {
  display: block;
}

/* Responsive */
@media (max-width: 992px) {
  .nav-links {
    display: none;
  }

  .mobile-trigger {
    display: block;
  }

  .nav-search {
    display: none;
  }
}
.hero-banner {
        background: linear-gradient(135deg, var(--soft-bg) 0%, #ffffff 100%);
        padding: 80px 0;
        border-radius: 30px;
        margin: 20px;
        overflow: hidden;
        position: relative;
    }

    /* Decorative Circle in Background */
    .hero-banner::after {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 400px;
        height: 400px;
        background: rgba(45, 125, 70, 0.05);
        border-radius: 50%;
        z-index: 0;
    }

    .hero-content-wrapper {
        position: relative;
        z-index: 2;
    }

    .hero-badge {
        display: inline-block;
        background: var(--white);
        padding: 8px 16px;
        border-radius: var(--radius-pill);
        font-size: 13px;
        font-weight: 800;
        color: var(--green);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        margin-bottom: 24px;
        border: 1px solid var(--gray-200);
    }

    .hero-title {
        font-family: 'Fraunces', serif;
        font-size: 4rem;
        font-weight: 900;
        color: #1a1a1a;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .hero-title span {
        color: var(--green);
    }

    .hero-sub {
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 35px;
        max-width: 500px;
    }

    /* Premium Button */
    .hero-cta {
        padding: 16px 40px;
        background: var(--green);
        color: white;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: none;
        box-shadow: 0 10px 25px rgba(45, 125, 70, 0.25);
    }

    .hero-cta:hover {
        transform: translateY(-5px);
        background: var(--green-dark);
        color: white;
        box-shadow: 0 15px 30px rgba(125, 45, 45, 0.35);
    }

    /* Right Side Image Styling */
    .hero-image-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-img-circle {
        width: 450px;
        height: 450px;
        background: white;
        border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 180px;
        box-shadow: var(--shadow);
        animation: blob-animate 8s linear infinite;
        border: 8px solid rgba(45, 125, 70, 0.05);
    }

    /* Floating Mini Cards */
    .floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        padding: 15px 20px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        gap: 12px;
        animation: float-slow 4s ease-in-out infinite;
    }

    .f-1 { top: 10%; right: 0; }
    .f-2 { bottom: 10%; left: 0; animation-delay: 2s; }

    @keyframes blob-animate {
        0% { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
        50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
        100% { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
    }

    @keyframes float-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

    /* Mobile Responsive Fixes */
    @media (max-width: 991px) {
        .hero-title { font-size: 2.8rem; }
        .hero-banner { text-align: center; padding: 60px 20px; }
        .hero-sub { margin: 0 auto 30px; }
        .main-img-circle { width: 300px; height: 300px; font-size: 100px; margin-top: 50px; }
        .f-1, .f-2 { display: none; } /* Hide floating cards on small screens */
    }
    .section-title span {
  color: var(--green);
}
.main-img-circle img{
    border-radius: 100px 0 100px 0px;
}
.cat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 10px;
  box-shadow: var(--shadow-sm);
  transition: 0.3s;
  cursor: pointer;
}

.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.cat-icon {
  font-size: 28px;
  color: var(--green);
  margin-bottom: 10px;
}

.cat-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
}

.see-all {
  text-decoration: none;
  color: var(--green);
  font-weight: 500;
}
/* Section Styling */
.section-title span {
    color: var(--green); /* Your main Red */
}

.see-all {
    color: var(--gray-600);
    font-weight: 600;
    transition: color 0.3s;
}

.see-all:hover {
    color: var(--green);
}

/* Card Styling */
.product-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Image Wrapper */
.product-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 4rem; /* For the emojis */
}

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
}

.badge-sale { background-color: var(--green); }
.badge-hot { background-color: var(--amber); }

.product-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 35px;
    height: 35px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    color: var(--gray-400);
}

/* Body Text */
.product-cat {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 5px 0;
}

.product-stars {
    color: var(--accent-amber);
    font-size: 0.9rem;
}

.review-count { color: var(--gray-400); font-size: 0.8rem; }

/* Footer & Button */
.price-current {
    display: block;
    font-weight: 800;
    color: var(--green);
    font-size: 1.1rem;
}

.price-old {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: var(--gray-400);
}

.btn-add {
    background-color: var(--green);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background 0.3s;
}

.btn-add:hover {
    background-color: var(--green-dark);
}
/* Promo Banner Section Styling */
.promo-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    color: var(--white);
    transition: all 0.4s ease;
    border: none;
    display: flex;
    align-items: center;
}

/* Card 1: Deep Red Theme */
.vet-card-consultation {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
    box-shadow: 0 15px 35px rgba(var(--theme-primary-rgb), 0.2);
}

/* Card 2: Light Red/Amber Theme for contrast */
.vet-card-vax {
    background: linear-gradient(135deg, var(--amber) 0%, var(--green-light) 100%);
    box-shadow: 0 15px 35px rgba(224, 74, 74, 0.2);
}

.promo-content {
    position: relative;
    z-index: 2;
    max-width: 70%;
}

.promo-label {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    display: inline-block;
    padding: 5px 15px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.promo-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.promo-sub {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 25px;
}

/* Stylish Button */
.promo-btn {
    background: var(--white);
    color: var(--green-dark);
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: all 0.3s ease;
}

.promo-btn:hover {
    background: var(--gray-100);
    transform: scale(1.05);
}

.btn-arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.promo-btn:hover .btn-arrow {
    transform: translateX(5px);
}

/* Decorative Icon Styling */
.promo-icon {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 8rem;
    opacity: 0.15;
    transform: rotate(-15deg);
    transition: all 0.4s ease;
    pointer-events: none;
}

.promo-card:hover .promo-icon {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.25;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .promo-title { font-size: 1.8rem; }
    .promo-content { max-width: 100%; }
    .promo-icon { font-size: 5rem; }
}
.feature {
  background: var(--white);
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: 0.3s;
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  font-size: 22px;
  color: var(--green);
  min-width: 35px;
  text-align: center;
}

.feature-title {
  font-weight: 600;
  font-size: 14px;
}

.feature-desc {
  font-size: 12px;
  color: var(--gray-600);
}

:root {
    --green: #C90606;
    --green-dark: #8B0000;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.search-page-wrapper { background-color: #f8f9fa; }

/* Main Search Bar */
.main-search-bar {
    display: flex;
    background: #fff;
    padding: 10px;
    border-radius: 50px;
    align-items: center;
    border: 1px solid #eee;
}
.main-search-bar input {
    border: none !important;
    box-shadow: none !important;
    padding-left: 15px;
}
.main-search-bar .btn { border-radius: 50px; }

/* Product Card Modern */
.pro-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    transition: 0.3s all ease;
    border: 1px solid rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}
.pro-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(var(--theme-primary-rgb), 0.1) !important;
}

.pro-img-box {
    height: 200px;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 4rem;
}

.pro-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--green);
    color: #fff;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: bold;
}

.wish-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    background: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #ccc;
    transition: 0.3s;
}
.wish-btn:hover { color: var(--green); }

.pro-title {
    font-weight: 700;
    font-size: 15px;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-main {
    color: var(--green);
    font-weight: 800;
    font-size: 1.1rem;
}
.price-off {
    font-size: 0.8rem;
    color: #aaa;
    margin-left: 5px;
}

.btn-cart-sm {
    background: var(--green);
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    transition: 0.3s;
}
.btn-cart-sm:hover {
    background: var(--green-dark);
    transform: rotate(90deg);
}

.x-small { font-size: 11px; }

/* Filter Customization */
.custom-check .form-check-input:checked {
    background-color: var(--green);
    border-color: var(--green);
}
.custom-range::-webkit-slider-thumb { background: var(--green); }
.sort-select { padding: 8px 35px 8px 15px; cursor: pointer; }
 .text-brand { color: var(--green) !important; }
        .text-accent { color: var(--accent-amber) !important; }
        .bg-brand-pale { background-color: var(--green-pale) !important; }
        .fw-800 { font-weight: 800; }

        /* Custom Buttons */
        .btn-brand {
            background-color: var(--green);
            color: var(--white);
            border: none;
            border-radius: var(--radius-sm);
            padding: 0.8rem 1.5rem;
            box-shadow: var(--shadow-sm);
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-brand:hover {
            background-color: var(--green-dark);
            color: var(--white);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }
        
        .btn-outline-brand {
            border: 2px solid var(--gray-200);
            color: var(--gray-600);
            border-radius: var(--radius-sm);
            background: transparent;
            font-weight: 600;
            transition: all 0.2s ease;
        }
        .btn-outline-brand:hover, .btn-outline-brand.active {
            border-color: var(--green);
            color: var(--green);
            background-color: var(--green-pale);
        }

        /* Product Gallery */
        .product-main-img {
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            background-color: var(--white);
            overflow: hidden;
            position: relative;
            aspect-ratio: 1/1;
        }
        .product-main-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .product-main-img:hover img {
            transform: scale(1.05);
        }
        .detail-badge {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            background-color: var(--green);
            color: var(--white);
            padding: 0.4rem 1rem;
            border-radius: var(--radius-pill);
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            z-index: 2;
            box-shadow: var(--shadow-sm);
        }
        .thumb-box {
            border-radius: var(--radius-sm);
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            aspect-ratio: 1/1;
            transition: all 0.3s;
        }
        .thumb-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .thumb-box.active {
            border-color: var(--green);
            box-shadow: var(--shadow-sm);
        }

        /* Quantity Input */
        .qty-wrapper {
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-sm);
            padding: 0.25rem;
            background: var(--white);
        }
        .qty-btn {
            background: transparent;
            border: none;
            color: var(--gray-600);
            width: 35px;
            height: 35px;
            font-weight: bold;
            border-radius: 6px;
            transition: background 0.2s;
        }
        .qty-btn:hover {
            background: var(--gray-100);
        }
        .qty-input input {
            text-align: center;
            border: none;
            width: 50px;
            font-weight: 700;
            background: transparent;
        }
        .qty-input input:focus {
            outline: none;
        }
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
            -webkit-appearance: none; 
            margin: 0; 
        }

        /* Features */
        .feature-icon-box {
            background-color: var(--green-pale);
            color: var(--green);
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-bottom: 0.75rem;
            font-size: 1.2rem;
        }

        /* Custom Tabs */
        .custom-tabs .nav-link {
            border: none;
            color: var(--gray-400);
            font-weight: 700;
            font-size: 1.1rem;
            padding: 1rem 0;
            margin-right: 2.5rem;
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
            background: transparent;
        }
        .custom-tabs .nav-link:hover {
            color: var(--green-light);
            border-color: transparent;
        }
        .custom-tabs .nav-link.active {
            color: var(--green);
            border-bottom: 3px solid var(--green);
        }
        .tab-content-box {
            background-color: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 2rem;
            margin-top: 1.5rem;
        }

        /* Related Products */
        .product-card {
            background: var(--white);
            border-radius: var(--radius);
            border: none;
            box-shadow: var(--shadow-sm);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }
        .product-card .card-img-top {
            border-top-left-radius: var(--radius);
            border-top-right-radius: var(--radius);
            aspect-ratio: 1/1;
            object-fit: cover;
        }
        .product-card .card-body {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .cart-page {
    padding: 40px 0;
}

.cart-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--green-dark);
}

.cart-header p {
    color: var(--gray-600);
    margin-bottom: 30px;
}

/* Layout */
.cart-wrapper {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

/* Left items */
.cart-items {
    flex: 2;
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.cart-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--gray-200);
}

.cart-img img {
    width: 100px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
}

.cart-info h3 {
    font-size: 16px;
    margin: 0;
    color: var(--gray-900);
}

.variant {
    font-size: 13px;
    color: var(--gray-600);
}

/* Qty */
.qty-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-pill);
    overflow: hidden;
    width: fit-content;
    margin-top: 10px;
}

.qty-box button {
    background: var(--green-pale);
    border: none;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: bold;
    color: var(--green-dark);
}

.qty-box input {
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
}

/* Remove */
.remove {
    margin-left: 15px;
    color: var(--red);
    font-size: 13px;
}

/* Price */
.cart-price {
    margin-left: auto;
    font-weight: 600;
    color: var(--gray-900);
}

/* Summary */
.cart-summary {
    flex: 1;
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 20px;
}

.cart-summary h2 {
    margin-bottom: 15px;
    color: var(--gray-900);
}

.summary-row,
.summary-total {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.summary-total {
    font-weight: 700;
    border-top: 1px solid var(--gray-200);
    padding-top: 10px;
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--rb-brand-dark), var(--rb-brand));
    color: white;
    border: none;
    padding: 12px;
    border-radius: var(--radius-pill);
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
    transition: 0.3s;
}

.checkout-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), .36);
}

.note {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .cart-wrapper {
        flex-direction: column;
    }

    .cart-price {
        margin-left: 0;
    }
}
 .navbar-brand img {
            height: 50px;
        }
        .breadcrumb {
            font-size: 0.9rem;
            margin-bottom: 30px;
        }
        .breadcrumb-item a {
            color: var(--green);
            text-decoration: none;
        }
        .breadcrumb-item.active {
            color: var(--gray-600);
        }

        /* Section Titles */
        .section-title {
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .section-title i {
            color: var(--green);
        }

        /* Form Controls */
        .form-label {
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 8px;
            color: var(--gray-900);
        }
        .form-label span {
            color: var(--green);
        }
        .form-control, .form-select {
            border-radius: var(--radius-sm);
            padding: 12px 16px;
            border: 1px solid var(--gray-200);
            background-color: var(--off-white);
            transition: all 0.2s ease;
        }
        .form-control:focus {
            border-color: var(--green);
            box-shadow: 0 0 0 4px var(--green-pale);
            background-color: white;
        }
        .input-group-text {
            background: none;
            border-right: none;
            color: var(--gray-400);
        }
        .has-icon .form-control {
            border-left: none;
        }

        /* Order Summary Card */
        .summary-card {
            background-color: white;
            border-radius: var(--radius);
            padding: 30px;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-100);
            position: sticky;
            top: 20px;
        }
        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-weight: 500;
        }
        .summary-total {
            border-top: 1px solid var(--gray-200);
            padding-top: 20px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 1.5rem;
            font-weight: 700;
        }

        /* Payment Method */
        .payment-box {
            border: 2px solid var(--green);
            border-radius: var(--radius-sm);
            padding: 20px;
            background-color: var(--green-pale);
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
        }
        .payment-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .payment-icon {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--green);
        }
        .payment-text h6 {
            margin: 0;
            font-weight: 700;
        }
        .payment-text p {
            margin: 0;
            font-size: 0.85rem;
            color: var(--gray-600);
        }

        /* Buttons */
        .btn-place-order {
            background-color: var(--green);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            padding: 16px;
            width: 100%;
            font-weight: 700;
            font-size: 1.1rem;
            margin-top: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
        }
        .btn-place-order:hover {
            background-color: var(--green-dark);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(var(--theme-primary-rgb), 0.3);
            color: white;
        }
        
        .secure-text {
            text-align: center;
            font-size: 0.85rem;
            color: var(--gray-600);
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        /* Radio Custom */
        .custom-radio {
            width: 20px;
            height: 20px;
            border: 2px solid var(--green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .custom-radio-inner {
            width: 10px;
            height: 10px;
            background-color: var(--green);
            border-radius: 50%;
        }

        @media (max-width: 991.98px) {
            .summary-card {
                margin-top: 40px;
                position: static;
            }
        }
        .login-card {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 400px;
}

/* ===== TITLE ===== */
.login-title {
  text-align: center;
  margin-bottom: 25px;
  color: var(--green);
  font-size: 26px;
  font-weight: bold;
}

/* ===== INPUT ===== */
.input-group {
  margin-bottom: 18px;
}

.input-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--gray-600);
  font-size: 14px;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  outline: none;
  transition: 0.3s;
}

.input-group input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-pale);
}

/* ===== BUTTON ===== */
.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.login-btn:hover {
  background: var(--green-dark);
}

/* ===== FOOTER ===== */
.login-footer {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: var(--gray-600);
}

.login-footer a {
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
}

.login-footer a:hover {
  text-decoration: underline;
}
.cat-bar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Individual Category Item */
.cat-item {
    position: relative; /* Crucial for absolute positioning of the dropdown */
    padding: 10px 15px;
    cursor: pointer;
}

/* Hide the dropdown menu by default */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    min-width: 180px;
    z-index: 1000;
    border-radius: 4px;
    padding: 5px 0;
}

/* Show the dropdown menu when hovering over the parent */
.has-dropdown:hover .dropdown-menu {
    display: block;
}

/* Styling for the subcategory items */
.dropdown-item {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: #f3f4f6;
    color: #000;
}

/* Arrow styling */
.arrow {
    font-size: 12px;
    margin-left: 4px;
}
.swiper-button-next,
.swiper-button-prev {
    width: 45px !important;
    height: 45px !important;

    /* Glass effect */
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Arrow icon */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 16px !important;
    color: var(--green); /* better on glass */
}
.cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* perfect fill */
  border-radius: 50%; /* ensure circle */
}
.btn-add-cart {
    position: relative;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* icon */
.btn-add-cart .icon {
    font-size: 20px;
    transition: 0.3s;
    margin: -3px 1px 0px 0px;
}

/* hidden text */
.btn-add-cart .text {
    position: absolute;
    opacity: 0;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
}

/* hover effect */
.btn-add-cart:hover {
    width: 130px;
    justify-content: space-between;
    padding: 0 15px;
    background: var(--green);
}

/* show text on hover */
.btn-add-cart:hover .text {
    opacity: 1;
    margin-left: 15px;
}

/* adjust icon */
.btn-add-cart:hover .icon {
    transform: translateX(-3px);
}

    /* ── MAIN SWIPER IMAGE ── */
    .mainSwiper .product-main-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 16px;
        background: #f5f5f5;
    }

    .mainSwiper .product-main-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ── NAVIGATION ARROWS ── */
    .mainSwiper .swiper-button-prev,
    .mainSwiper .swiper-button-next {
        background: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        color: #333;
    }

    .mainSwiper .swiper-button-prev::after,
    .mainSwiper .swiper-button-next::after {
        font-size: 13px;
        font-weight: 900;
    }

    /* ── THUMBNAIL SWIPER ── */
    .thumbSwiper {
        padding: 4px 0;
        margin-top: 12px;
    }

    .thumbSwiper .swiper-slide {
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

    .thumbSwiper .swiper-slide-thumb-active {
        opacity: 1;
    }

    .thumbSwiper .thumb-box {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 10px;
        border: 2px solid transparent;
        transition: border-color 0.2s ease;
    }

    .thumbSwiper .swiper-slide-thumb-active .thumb-box {
        border-color: var(--brand-color, #333);
    }

    .thumbSwiper .thumb-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .feature-card {
    background: var(--gray-50, #f9f9f9);
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.feature-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.bg-teal-light   { background: #E1F5EE; }
.bg-purple-light { background: #EEEDFE; }
.bg-amber-light  { background: #FAEEDA; }
.bg-coral-light  { background: #FAECE7; }
/* ── ADD TO CART ── */
.btn-atc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 0;   /* sirf vertical padding */
    width: 300px;      /* full width */
    /* background: var(--green); */
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition:transform .25s ease, box-shadow .25s ease, color .2s ease;
        background: linear-gradient(135deg, var(--rb-brand-dark), var(--rb-brand));
        border-radius: 100px;

}
.btn-atc:hover{
        transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(var(--theme-primary-rgb), .36);
}
/* .btn-atc:hover {
    background: var(--green-dark);
} */

.btn-atc:active {
    transform: scale(0.98);
}

.btn-atc.added {
    background: var(--green-dark);
}

.btn-atc-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-atc-sub {
    font-size: 11px;
    color: #9FE1CB;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 2px;
}

.btn-atc-main {
    font-size: 15px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.3;
}

/* ── WISHLIST ── */
.btn-wishlist {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    color: var(--gray-500);
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    flex-shrink: 0;
    border-radius: 100px;
}

.btn-wishlist:hover {
    border-color: #D4537E;
    color: #D4537E;
    background: #FBEAF0;
}
#cart-count.scale {
    transform: scale(1.3);
    transition: 0.3s;
}
.product-name a{
    color: #000 !important;
    text-decoration: none; 
}
.product-name a:hover{
    color: var(--green) !important;
}
/* FLOAT BUTTON */
.wa-float{
    position:fixed;
    bottom:20px;
    left:20px;
    width:55px;
    height:55px;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:26px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    z-index:9999;
}

/* PANEL */
.wa-panel{
    position:fixed;
    bottom:90px;
    left:20px;
    width:320px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
    overflow:hidden;

    transform:translateX(-120%);
    transition:0.3s ease;
    z-index:9999;
}

.wa-panel.active{
    transform:translateX(0);
}

.wa-header{
    background:#25D366;
    color:#fff;
    padding:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:600;
}

.wa-header button{
    background:none;
    border:none;
    color:#fff;
    font-size:20px;
    cursor:pointer;
}

.wa-body{
    padding:12px;
}

.wa-title{
    font-size:12px;
    color:#666;
    margin-bottom:10px;
}

.wa-msg{
    background:#f5f5f5;
    padding:8px;
    border-radius:8px;
    margin-bottom:8px;
    cursor:pointer;
    font-size:13px;
}

.wa-msg:hover{
    background:#e9ffe9;
}

.wa-body textarea{
    width:100%;
    height:70px;
    margin-top:10px;
    padding:8px;
    border-radius:8px;
    border:1px solid #ddd;
    resize:none;
}

.wa-send{
    width:100%;
    margin-top:10px;
    padding:10px;
    background:#25D366;
    color:#fff;
    border:none;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}
 .search-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-input {
        width: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        border-bottom: 2px solid var(--green);
        background: transparent;
        padding: 5px 0;
        font-size: 0.95rem;
        color: var(--gray-900);
        outline: none;
    }

    .search-wrapper.active .search-input {
        width: 220px;
        opacity: 1;
        visibility: visible;
        padding: 5px 10px;
        margin-right: 5px;
    }

    .search-input::placeholder {
        color: var(--gray-400);
    }

    .search-icon-btn {
        background: transparent;
        border: none;
        color: var(--gray-900);
        font-size: 1.2rem;
        cursor: pointer;
        transition: color 0.3s ease, transform 0.2s ease;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-icon-btn:hover, .search-wrapper.active .search-icon-btn {
        color: var(--green);
        transform: scale(1.1);
    }

    /* =========================================
       DESKTOP DROPDOWN DESIGN
    ========================================= */
    .nav-item-dropdown {
        position: relative;
        display: inline-block;
    }

    .nav-item-dropdown > a {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nav-item-dropdown > a i {
        font-size: 0.8em;
        transition: transform 0.3s ease;
    }

    .nav-item-dropdown:hover > a i {
        transform: rotate(180deg);
        color: var(--white);
    }
    .nav-item-dropdown:hover .no-rotate {
        transform: rotate(0deg) !important;
        color: var(--white);
    }

    .dropdown-menu-custom {
        position: absolute;
        top: 100%;
        left: 0;
        width: 260px;
        background-color: var(--white);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
        color: var(--gray-900) !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100;
        padding: 10px;
        border: 1px solid var(--gray-100);
    }

    .nav-item-dropdown:hover .dropdown-menu-custom {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-menu-custom ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .dropdown-menu-custom li {
        position: relative;
    }

    .dropdown-menu-custom a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        color: var(--gray-900);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.95rem;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .dropdown-menu-custom a:hover {
        background-color: var(--soft-bg);
        color: var(--green);
        padding-left: 18px; 
    }

    .submenu-custom {
        position: absolute;
        top: 0;
        left: 100%;
        width: 240px;
        background-color: var(--white);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateX(10px);
        transition: all 0.3s ease;
        padding: 10px;
        border: 1px solid var(--gray-100);
        margin-left: 5px;
    }

    .dropdown-menu-custom li.has-children:hover > .submenu-custom {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* =========================================
       MOBILE SIDEBAR ACCORDION DESIGN
    ========================================= */
    .mobile-category-wrapper {
        display: flex;
        flex-direction: column;
    }

    .mobile-category-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 12px 0;
        cursor: pointer;
        font-weight: 600;
        color: var(--gray-900);
        border-bottom: 1px solid var(--gray-100);
    }

    .mobile-category-toggle.active {
        color: var(--green);
    }

    .mobile-category-toggle i {
        transition: transform 0.3s ease;
    }

    .mobile-category-toggle.active i {
        transform: rotate(180deg);
    }

    .mobile-dropdown-content {
        display: none;
        padding-left: 10px;
        flex-direction: column;
        background-color: var(--white);
        border-radius: 0 0 8px 8px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .mobile-dropdown-content.show {
        display: flex;
        animation: slideDown 0.3s ease forwards;
    }

    /* Styling for categories WITH sub-categories */
    .mobile-sub-accordion {
        margin-bottom: 2px;
    }

    .mobile-sub-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        color: var(--gray-600);
        font-size: 0.95rem;
        cursor: pointer;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .mobile-sub-toggle.active {
        color: var(--green);
        border-left-color: var(--green);
        background-color: var(--soft-bg);
        font-weight: 500;
        border-radius: 0 6px 6px 0;
    }

    .mobile-sub-toggle i {
        font-size: 0.8rem;
        transition: transform 0.3s ease;
    }

    .mobile-sub-toggle.active i {
        transform: rotate(180deg);
    }

    .mobile-sub-content {
        display: none;
        padding-left: 25px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .mobile-sub-content.show {
        display: flex;
        flex-direction: column;
        animation: slideDown 0.3s ease forwards;
    }

    .mobile-sub-content a {
        padding: 8px 0;
        font-size: 0.85rem;
        color: var(--gray-600);
        text-decoration: none;
        transition: color 0.2s ease;
        border-bottom: 1px dashed var(--gray-200);
    }

    .mobile-sub-content a:last-child {
        border-bottom: none;
    }

    .mobile-sub-content a:hover {
        color: var(--accent-amber);
        padding-left: 5px;
    }

    /* Styling for simple categories (NO sub-categories) */
    .mobile-simple-link {
        display: block;
        padding: 10px 15px;
        color: var(--gray-600);
        font-size: 0.95rem;
        text-decoration: none;
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
    }

    .mobile-simple-link:hover {
        color: var(--green);
        background-color: var(--soft-bg);
        border-left-color: var(--green);
        border-radius: 0 6px 6px 0;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .categories-dropdown{
        background: var(--green);
        color: var(--white);
        border-radius: var(--radius-sm);
        padding: 10px;
    }
    .categories-dropdown a{
        color: var(--white);
        text-decoration: none;
        display: block;
        border-radius: 6px;
        margin: 0px 4px;
        transition: background 0.2s ease;
    }
   .dropdown-menu-custom a{
    color: var(--gray-900) !important;
   }
   /* =============================================
   SITE FOOTER
   ============================================= */

.site-footer {
    background: #0d1b2a;
    color: #a0aec0;
    font-size: 14px;
    margin-top: 80px;
    position: relative;
}

/* Wave */
.footer-wave {
    margin-bottom: -2px;
    line-height: 0;
}
.footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

.footer-body {
    padding: 60px 0 40px;
}

/* ---- Brand Col ---- */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}
.footer-logo-mark {
    font-size: 28px;
    line-height: 1;
    height: 56px;
    width: 56px;
}
.footer-logo span {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}
.footer-logo em {
    font-style: normal;
    color: var(--green);
}

.footer-tagline {
    font-size: 13px;
    line-height: 1.7;
    color: #718096;
    margin-bottom: 20px;
}

/* Contact list */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #a0aec0;
    line-height: 1.5;
}
.fc-icon {
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Socials */
.footer-socials {
    display: flex;
    gap: 10px;
}
.fsoc-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: #a0aec0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    border: 1px solid rgba(255,255,255,0.08);
}
.fsoc-btn:hover {
    background: var(--green);
    color: #fff;
    transform: translateY(-2px);
}

/* ---- Link Cols ---- */
.footer-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255,255,255,0.06);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links li a {
    color: #718096;
    text-decoration: none;
    font-size: 13.5px;
    transition: color 0.2s, padding-left 0.2s;
    display: block;
}
.footer-links li a:hover {
    color: var(--green);
    padding-left: 4px;
}

/* ---- New Arrivals Mini Grid ---- */
.footer-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.fproduct-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 8px;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.fproduct-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--green);
    transform: translateY(-2px);
}
.fproduct-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}
.fproduct-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fproduct-info {
    padding: 0 2px;
}
.fproduct-name {
    font-size: 11.5px;
    color: #a0aec0;
    margin: 0 0 3px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fproduct-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    margin: 0;
}

/* Placeholder */
.fproduct-placeholder .fproduct-img {
    background: rgba(255,255,255,0.04);
}

/* ---- Bottom Bar ---- */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 18px 0;
}
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: #4a5568;
}
.footer-bottom-inner em {
    font-style: normal;
    color: #718096;
}
.footer-bottom-links {
    display: flex;
    gap: 20px;
}
.footer-bottom-links a,
.footer-bottom a {
    color: #4a5568;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-bottom-links a:hover,
.footer-bottom a:hover {
    color: var(--green);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .logo-text{
        max-width: 52px !important;
  margin-bottom: 16px !important;
    }
    .footer-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* =============================================
   PAWCARE — ALL PAGES SHARED CSS
   Add this to your main stylesheet
   ============================================= */

/* ── PAGE HERO ── */
.page-hero {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-light) 100%);
    padding: 90px 0 130px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 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");
}
.page-hero-wave {
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    line-height: 0;
}
.page-hero-wave svg { display: block; width: 100%; height: 70px; }

.badge-pill {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.25);
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
}
.page-hero h1 {
font-family: 'Fraunces', serif;
    font-size: clamp(36px, 6vw, 62px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 16px;
}
.page-hero h1 em {
    font-style: italic;
    color: var(--theme-accent);
}
.page-hero p {
    color: rgba(255,255,255,0.78);
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto;
}

/* ── SECTION HELPERS ── */
.section-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--green);
    background: var(--green-pale);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
}
.section-title {
   font-family: 'Fraunces', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--gray-900);
    margin-bottom: 16px;
}
.section-title em { font-style: italic; color: var(--green); }
.section-sub {
    color: var(--gray-600);
    font-size: 16px;
    max-width: 580px;
    line-height: 1.75;
}
.section-wrap { padding: 80px 0; }

/* ── CARDS ── */
.paw-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.paw-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--green-light);
}
.card-grid { display: grid; gap: 28px; }
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.icon-box {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    background: var(--green-pale);
}

/* ── BUTTONS ── */
.btn-brand {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: var(--radius-pill);
    border: none; cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb),0.3);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-brand:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--theme-primary-rgb),0.35);
    color: #fff;
    text-decoration: none;
}
.btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    color: var(--green);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--green);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-outline:hover { background: var(--green); color: #fff; text-decoration: none; }

/* ── FORM INPUTS ── */
.form-label-custom {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.input-custom {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
  font-family: 'Nunito', sans-serif;
    color: var(--gray-900);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.input-custom:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb),0.1);
}
.input-custom::placeholder { color: var(--gray-400); }
textarea.input-custom { resize: vertical; min-height: 120px; }

/* ── LEGAL CONTENT ── */
.legal-content { max-width: 780px; }

.legal-section {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--gray-100);
}
.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.legal-content h2 {
  font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.legal-content h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 26px;
    background: var(--green);
    border-radius: 4px;
    flex-shrink: 0;
}

.legal-content p {
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 14px;
}
.legal-content p:last-child { margin-bottom: 0; }

.legal-content ul {
    padding-left: 0;
    list-style: none;
    margin: 14px 0;
}
.legal-content ul li {
    position: relative;
    padding: 9px 0 9px 24px;
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.7;
    border-bottom: 1px solid var(--gray-100);
}
.legal-content ul li:last-child { border-bottom: none; }
.legal-content ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
    font-size: 13px;
    top: 11px;
}
.legal-content ul li strong { color: var(--gray-900); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    /* Legal pages: hide sticky TOC, go single column */
    .legal-toc-col { display: none; }

    /* Contact / About grid → single col */
    .responsive-two-col {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .section-wrap { padding: 56px 0; }
    .page-hero { padding: 70px 0 110px; }

    .card-grid-3,
    .card-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    /* Force legal grid to single column */
    .container > div[style*="grid-template-columns:260px"] {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .card-grid-3,
    .card-grid-4 {
        grid-template-columns: 1fr;
    }
}
.hero-actions {
    margin-top: 20px;
}

/* Base Button */
.hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* PRIMARY BUTTON (Shop Now) */
.primary-btn {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff;
    box-shadow: 0 6px 20px rgba(200, 0, 0, 0.4);
}

.primary-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 30px rgba(200, 0, 0, 0.6);
}

/* Glow Effect */
.primary-btn::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.2);
    transition: 0.4s;
}

.primary-btn:hover::before {
    width: 100%;
}

/* SECONDARY BUTTON (Book Vet) */
.secondary-btn {
    background: transparent;
    color: #222;
    border: 2px solid #ddd;
    backdrop-filter: blur(6px);
}

.secondary-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
    transform: translateY(-3px);
}

/* ICON ANIMATION */
.primary-btn svg {
    transition: transform 0.3s ease;
}

.primary-btn:hover svg {
    transform: translateX(5px);
}


.delivery-pending{
    background:#FFF4E5;
    color:#B07200;
}

.delivery-processing{
    background:#E8F4FD;
    color:#0D6EFD;
}

.delivery-packed{
    background:#EEF2FF;
    color:#4338CA;
}

.delivery-shipped{
    background:#E0F2FE;
    color:#0369A1;
}

.delivery-out_for_delivery{
    background:#FEF3C7;
    color:#B45309;
}

.delivery-delivered{
    background:#DCFCE7;
    color:#15803D;
}

.delivery-cancelled{
    background:#FEE2E2;
    color:#B91C1C;
}


.qty-wrapper{
    border-radius: 100px;
}

.web-disc-note {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.web-disc-note {
    font-size: 12.5px;
    font-weight: 700;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* ============ DISCOUNT BANNER ============ */
.hm1-disc-banner {
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
    background:linear-gradient(120deg, var(--green) 0%, var(--green-dark) 100%);
    border-radius:26px; padding:28px 34px; color:#fff;
    box-shadow:0 18px 40px rgba(var(--theme-primary-rgb),.22);
}
.hm1-disc-icon {
    width:56px; height:56px; border-radius:16px; flex-shrink:0;
    background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
    font-size:24px; color:#fff;
}
.hm1-disc-copy { flex:1; min-width:220px; }
.hm1-disc-copy h3 {
    font-family:var(--font-display); font-weight:900; font-size:1.35rem; margin:0 0 4px; color:#fff;
}
.hm1-disc-copy p { margin:0; font-size:13.5px; color:rgba(255,255,255,.85); }
.hm1-disc-btn {
    display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--green);
    font-weight:800; font-size:14px; padding:12px 26px; border-radius:100px; text-decoration:none;
    transition:gap .25s ease, transform .25s ease;
}
.hm1-disc-btn:hover { gap:14px; transform:translateY(-2px); color:var(--green-dark); }

@media (max-width:575px) {
    .hm1-disc-banner { padding:22px 20px; flex-direction:column; text-align:center; }
    .hm1-disc-btn { width:100%; justify-content:center; }
}


.coupon-section{margin:16px 0}

.coupon-input-row{
    display:flex;
    gap:8px;
    background:#fafafa;
    border:1.5px dashed #d4d4d8;
    border-radius:12px;
    padding:6px 6px 6px 4px;
    position:relative;
    transition:border-color .2s, background .2s;
}
.coupon-input-row:focus-within{
    border-color:var(--green);
    border-style:solid;
    background:var(--green-pale);
}
.coupon-input-row::before,
.coupon-input-row::after{
    content:"";
    position:absolute;
    width:14px;height:14px;
    background:#fff;
    border-radius:50%;
    top:50%;transform:translateY(-50%);
}
.coupon-input-row::before{left:-7px}
.coupon-input-row::after{right:-7px}

.coupon-input-wrap{
    flex:1;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 8px;
}
.coupon-icon{width:18px;height:18px;color:#9ca3af;flex-shrink:0}
.coupon-input-row:focus-within .coupon-icon{color:var(--green)}

#coupon_code{
    border:none;
    outline:none;
    background:transparent;
    width:100%;
    font-size:13.5px;
    padding:10px 0;
    color:#111;
    text-transform:uppercase;
    letter-spacing:.5px;
}
#coupon_code::placeholder{
    text-transform:none;
    letter-spacing:normal;
    color:#b0b0b8;
}

.coupon-apply-btn{
    border:none;
        background: linear-gradient(135deg, var(--rb-brand-dark), var(--rb-brand));
    color:#fff;
    font-size:13px;
    font-weight:600;
    padding:0 20px;
    border-radius:9px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:background .15s, transform .1s;
    min-width:80px;
}
.coupon-apply-btn:hover{background:#333}
.coupon-apply-btn:active{transform:scale(.97)}
.coupon-apply-btn:disabled{opacity:.6;cursor:not-allowed}

.btn-spinner{
    width:13px;height:13px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:coupon-spin .6s linear infinite;
}
@keyframes coupon-spin{to{transform:rotate(360deg)}}

.coupon-applied-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(135deg,#f0fdf4,#ecfdf5);
    border:1.5px solid #bbf7d0;
    border-radius:12px;
    padding:10px 14px;
    animation:coupon-pop .25s ease;
}
@keyframes coupon-pop{
    from{opacity:0; transform:scale(.95)}
    to{opacity:1; transform:scale(1)}
}

.coupon-applied-left{display:flex; align-items:center; gap:10px}

.coupon-check-circle{
    width:24px;height:24px;
    background:#16a34a;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    flex-shrink:0;
}

.coupon-applied-text{display:flex; flex-direction:column; line-height:1.3}
.coupon-applied-text strong{
    font-size:13px;
    color:#111;
    letter-spacing:.5px;
}
.coupon-applied-text span{
    font-size:11px;
    color:#16a34a;
    font-weight:500;
}

.coupon-remove-btn{
    width:26px;height:26px;
    border:none;
    background:#fff;
    color:#9ca3af;
    border-radius:50%;
    cursor:pointer;
    font-size:12px;
    transition:background .15s, color .15s;
}
.coupon-remove-btn:hover{background:#fee2e2; color:#dc2626}

.coupon-error-msg{
    margin-top:8px;
    font-size:12px;
    color:#dc2626;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:8px;
    padding:8px 12px;
    animation:coupon-pop .2s ease;
}
.contact-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 767px) {
    .contact-form-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}