/* ==========================================================================
   HS Kids - Root
   One place for: colours, fonts, font sizes, spacing, Bootstrap re-theme,
   base tags (h1-h6, p), utility classes (colour / background / button /
   section padding) and the shared reveal animation.
   Loaded on every page (handle: kids_wear-main). The old (sky-blue) home page
   does NOT load this file, it uses old_home.css.

   HOW TO USE (no extra CSS needed)
   ----------------------------------------------------------------------
   Headings / text   <h2>, <p>   or   <div class="h2">, <span class="p">
   Text colour       .text-gold  .text-brown  .text-ink  .text-cream  .text-white
                     .text-primary (= gold)   .text-muted
   Background        .bg-gold  .bg-brown  .bg-ink  .bg-cream  .bg-sand  .bg-beige
   Buttons           .btn.btn-primary   (solid gold)
                     .btn.btn-outline-primary  (gold outline)
                     .btn.btn-dark      (solid brown)
                     .btn.btn-outline-dark (brown outline)
                     sizes: .btn-sm  .btn-lg
   Section padding  .section (top + bottom)  .section-sm  .pt-section  .pb-section
   Heading divider  .title-line  (short gold line under a centred heading)
   Scroll reveal    .reveal  (+ style="--reveal-delay:.1s")
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Colours (taken from the HS Kids home page design)
     ------------------------------------------------------------------------ */
  --hs-gold:        #C1A172;   /* top bar, buttons, accents           */
  --hs-gold-dark:   #A98856;   /* button hover, links hover           */
  --hs-gold-soft:   #D9C3A0;   /* borders on dark, subtle highlights  */
  --hs-footer:      #BB9969;   /* footer background                   */
  --hs-brown:       #70583C;   /* deep brown: dark buttons, strong UI */
  --hs-brown-dark:  #5A4630;
  --hs-ink:         #4A3626;   /* headings                            */
  --hs-text:        #6E5E4F;   /* body copy, nav                      */
  --hs-muted:       #9A8672;   /* captions, helper text               */

  --hs-cream:       #FAF5EE;   /* page background                     */
  --hs-header:      #F8F3ED;   /* header background                   */
  --hs-sand:        #F1EBDF;   /* cards, info bars                    */
  --hs-beige:       #EDE7DB;   /* tinted sections (Why HS Kids)       */
  --hs-white:       #FFFFFF;
  --hs-border:      #E6DACB;
  --hs-border-soft: #EFE6DA;

  --hs-sale:        #B5533C;
  --hs-success:     #6F8A5B;
  --hs-whatsapp:    #25D366;

  --hs-gold-rgb:    193, 161, 114;
  --hs-brown-rgb:   112, 88, 60;
  --hs-ink-rgb:     74, 54, 38;

  /* ------------------------------------------------------------------------
     2. Fonts
     ------------------------------------------------------------------------ */
  --hs-font-heading: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hs-font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ------------------------------------------------------------------------
     3. Font size / weight / spacing per tag (h1-h6 + p, same for .h1-.h6 + .p)
     ------------------------------------------------------------------------ */
  --hs-h1-size: clamp(2.1rem, 4.2vw, 3.4rem);   --hs-h1-weight: 500;  --hs-h1-py: .5rem;
  --hs-h2-size: clamp(1.55rem, 2.6vw, 2rem);    --hs-h2-weight: 500;  --hs-h2-py: .5rem;
  --hs-h3-size: clamp(1.3rem, 2vw, 1.6rem);     --hs-h3-weight: 500;  --hs-h3-py: .4rem;
  --hs-h4-size: 1.15rem;                        --hs-h4-weight: 500;  --hs-h4-py: .35rem;
  --hs-h5-size: 1.125rem;                       --hs-h5-weight: 500;  --hs-h5-py: .3rem;
  --hs-h6-size: 1rem;                           --hs-h6-weight: 500;  --hs-h6-py: .25rem;
  --hs-p-size:  1rem;                           --hs-p-weight:  400;  --hs-p-py:  .25rem;

  --hs-h-line-height: 1.2;
  --hs-p-line-height: 1.7;

  /* ------------------------------------------------------------------------
     4. Layout, radius, shadow, motion
     ------------------------------------------------------------------------ */
  --hs-container:   1320px;   /* applied from 1400px screens up */
  --hs-section-py:  clamp(3rem, 6vw, 5rem);
  --hs-section-py-sm: clamp(2rem, 4vw, 3rem);

  --hs-radius-sm:   2px;
  --hs-radius:      4px;
  --hs-radius-lg:   8px;
  --hs-radius-pill: 999px;

  --hs-shadow-sm:   0 1px 2px rgba(74, 54, 38, .05);
  --hs-shadow:      0 6px 20px rgba(74, 54, 38, .08);
  --hs-shadow-lg:   0 16px 36px rgba(74, 54, 38, .13);

  /* Spacing scale (4px base) */
  --hs-space-1: .25rem;   /*  4px */
  --hs-space-2: .5rem;    /*  8px */
  --hs-space-3: .75rem;   /* 12px */
  --hs-space-4: 1rem;     /* 16px */
  --hs-space-5: 1.5rem;   /* 24px */
  --hs-space-6: 2rem;     /* 32px */
  --hs-space-7: 3rem;     /* 48px */
  --hs-space-8: 4.5rem;   /* 72px */

  /* Layers */
  --hs-z-sticky:  1030;
  --hs-z-mega:    1031;
  --hs-z-float:   1040;
  --hs-z-toast:   1100;

  /* Breakpoints (reference only; CSS media queries cannot read variables)
     tablet: max-width 991.98px   mobile: max-width 767.98px */

  --hs-ease:        cubic-bezier(.22, 1, .36, 1);
  --hs-t-fast:      .2s var(--hs-ease);
  --hs-t:           .35s var(--hs-ease);
  --hs-t-slow:      .6s var(--hs-ease);

  /* ------------------------------------------------------------------------
     5. Bootstrap 5.3 re-theme (so .text-primary, .bg-primary, .border-primary,
        links, forms, .bg-light, .text-dark, .text-muted all follow the palette)
     ------------------------------------------------------------------------ */
  --bs-body-font-family: var(--hs-font-body);
  --bs-body-font-size: var(--hs-p-size);
  --bs-body-line-height: var(--hs-p-line-height);
  --bs-body-color: var(--hs-text);
  --bs-body-color-rgb: 110, 94, 79;
  --bs-body-bg: var(--hs-cream);
  --bs-body-bg-rgb: 250, 245, 238;
  --bs-heading-color: var(--hs-ink);
  --bs-emphasis-color: var(--hs-ink);
  --bs-secondary-color: var(--hs-muted);
  --bs-secondary-color-rgb: 154, 134, 114;
  --bs-border-color: var(--hs-border);
  --bs-border-color-translucent: rgba(112, 88, 60, .12);
  --bs-border-radius: var(--hs-radius);
  --bs-border-radius-sm: var(--hs-radius-sm);
  --bs-border-radius-lg: var(--hs-radius-lg);
  --bs-border-radius-xl: 10px;
  --bs-border-radius-xxl: 14px;
  --bs-link-color: var(--hs-gold-dark);
  --bs-link-color-rgb: 169, 136, 86;
  --bs-link-hover-color: var(--hs-brown);
  --bs-link-hover-color-rgb: 112, 88, 60;

  --bs-primary: var(--hs-gold);
  --bs-primary-rgb: 193, 161, 114;
  --bs-primary-text-emphasis: var(--hs-brown);
  --bs-primary-bg-subtle: var(--hs-sand);
  --bs-primary-border-subtle: var(--hs-border);
  --bs-dark: var(--hs-ink);
  --bs-dark-rgb: 74, 54, 38;
  --bs-light: var(--hs-sand);
  --bs-light-rgb: 241, 235, 223;
  --bs-success: var(--hs-success);
  --bs-success-rgb: 111, 138, 91;
  --bs-danger: var(--hs-sale);
  --bs-danger-rgb: 181, 83, 60;
  --bs-warning: var(--hs-gold);            /* rating stars, highlights */
  --bs-warning-rgb: 193, 161, 114;
  --bs-info: var(--hs-brown);
  --bs-info-rgb: 112, 88, 60;
  --bs-focus-ring-color: rgba(193, 161, 114, .35);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--hs-font-body);
  font-size: var(--hs-p-size);
  font-weight: 400;
  line-height: var(--hs-p-line-height);
  color: var(--hs-text);
  background-color: var(--hs-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Headings + paragraph: the tag and its class share ONE rule */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--hs-font-heading);
  color: var(--hs-ink);
  line-height: var(--hs-h-line-height);
  letter-spacing: -.005em;
  margin: 0;
}

h1, .h1 { font-size: var(--hs-h1-size); font-weight: var(--hs-h1-weight); padding-block: var(--hs-h1-py); letter-spacing: -.015em; line-height: 1.12; }
h2, .h2 { font-size: var(--hs-h2-size); font-weight: var(--hs-h2-weight); padding-block: var(--hs-h2-py); }
h3, .h3 { font-size: var(--hs-h3-size); font-weight: var(--hs-h3-weight); padding-block: var(--hs-h3-py); }
h4, .h4 { font-size: var(--hs-h4-size); font-weight: var(--hs-h4-weight); padding-block: var(--hs-h4-py); }
h5, .h5 { font-size: var(--hs-h5-size); font-weight: var(--hs-h5-weight); padding-block: var(--hs-h5-py); }
h6, .h6 { font-size: var(--hs-h6-size); font-weight: var(--hs-h6-weight); padding-block: var(--hs-h6-py); }

p, .p {
  font-family: var(--hs-font-body);
  font-size: var(--hs-p-size);
  font-weight: var(--hs-p-weight);
  line-height: var(--hs-p-line-height);
  color: var(--hs-text);
  margin: 0;
  padding-block: var(--hs-p-py);
}

small, .small { font-size: 1rem; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--hs-t-fast), background-color var(--hs-t-fast), border-color var(--hs-t-fast), opacity var(--hs-t-fast);
}
a:hover { color: var(--hs-gold-dark); }

img { max-width: 100%; height: auto; }

::selection { background: var(--hs-gold); color: #fff; }

/* Site container: Synchronize Bootstrap and Elementor containers (1320px for >=1400px screens) */
.container,
.container-lg,
.container-xl,
.container-xxl,
.elementor-container,
.e-con.e-con-boxed,
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner,
.site-container {
  width: 100%;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl,
  .elementor-container,
  .e-con.e-con-boxed,
  .elementor-section.elementor-section-boxed > .elementor-container,
  .e-con-boxed > .e-con-inner,
  .site-container {
    max-width: var(--hs-container, 1320px) !important;
  }
}

/* Uppercase micro-label used above headings and for captions */
.eyebrow {
  display: block;
  font-family: var(--hs-font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hs-gold-dark);
}

/* ==========================================================================
   Colour classes  (text / background / border). Add the class, no CSS needed.
   ========================================================================== */
.text-gold   { color: var(--hs-gold) !important; }
.text-brown  { color: var(--hs-brown) !important; }
.text-ink    { color: var(--hs-ink) !important; }
.text-body-hs{ color: var(--hs-text) !important; }
.text-cream  { color: var(--hs-cream) !important; }
.text-sale   { color: var(--hs-sale) !important; }

.bg-gold     { background-color: var(--hs-gold) !important; }
.bg-brown    { background-color: var(--hs-brown) !important; }
.bg-ink      { background-color: var(--hs-ink) !important; }
.bg-cream    { background-color: var(--hs-cream) !important; }
.bg-sand     { background-color: var(--hs-sand) !important; }
.bg-beige    { background-color: var(--hs-beige) !important; }
.bg-footer   { background-color: var(--hs-footer) !important; }

.border-gold  { border-color: var(--hs-gold) !important; }
.border-brown { border-color: var(--hs-brown) !important; }
.border-sand  { border-color: var(--hs-border) !important; }

/* Dark backgrounds: keep headings / text readable automatically */
:is(.bg-gold, .bg-brown, .bg-ink, .bg-footer) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, .p) { color: #fff; }

/* ==========================================================================
   Section spacing (top + bottom padding)
   ========================================================================== */
.section     { padding-block: var(--hs-section-py); }
.section-sm  { padding-block: var(--hs-section-py-sm); }
.pt-section  { padding-top: var(--hs-section-py); }
.pb-section  { padding-bottom: var(--hs-section-py); }

/* Short gold divider under a centred heading */
.title-line::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin: .9rem auto 0;
  background: var(--hs-gold);
}
.title-line.text-start::after,
.title-line.text-lg-start::after { margin-inline: 0; }

/* ==========================================================================
   Shared components used by home, shop and product pages
   ========================================================================== */

/* Section head: centred (default) or split (title left, link right) */
.hs-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.hs-head h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.012em; }

.hs-head p {
  margin-top: .35rem;
  color: var(--hs-muted);
  font-size: .92rem;
}

.hs-head .title-line::after { transition: width .5s var(--hs-ease); }

.hs-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  text-align: left;
}

.hs-head--split .title-line::after { margin-inline: 0; }

.hs-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--hs-gold-soft);
  font-family: var(--hs-font-heading);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hs-ink);
  transition: color var(--hs-t-fast), border-color var(--hs-t-fast), gap var(--hs-t);
}

.hs-link-arrow:hover { gap: .8rem; color: var(--hs-gold-dark); border-color: var(--hs-gold); }

/* Star rating */
.hs-rating {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  color: var(--hs-muted);
}

.hs-rating__stars { color: var(--hs-gold); font-size: .68rem; letter-spacing: .08em; }

/* Small pill badge */
.hs-badge {
  display: inline-block;
  padding: .3rem .6rem;
  border-radius: var(--hs-radius-pill);
  background: #fff;
  font-family: var(--hs-font-heading);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hs-ink);
}

.hs-badge--sale { background: var(--hs-sale); color: #fff; }
.hs-badge--gold { background: var(--hs-gold); color: #fff; }

/* "Added" confirmation state on any add-to-bag button */
.btn.is-added { --bs-btn-bg: var(--hs-brown); --bs-btn-border-color: var(--hs-brown); --bs-btn-hover-bg: var(--hs-brown); }

/* Price line (now + was) */
.hs-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.hs-price__now { font-weight: 600; color: var(--hs-ink); }
.hs-price__was { font-size: .85em; color: var(--hs-muted); text-decoration: line-through; }
.hs-price__soon { font-size: .8rem; font-weight: 500; font-style: italic; color: var(--hs-gold-dark); }

/* ==========================================================================
   Buttons  (Bootstrap classes, re-themed: square, uppercase, spaced letters)
   ========================================================================== */
.btn {
  --bs-btn-font-family: var(--hs-font-heading);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.9rem;
  --bs-btn-padding-y: .85rem;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: var(--hs-radius-sm);
  --bs-btn-focus-shadow-rgb: 193, 161, 114;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--hs-t-fast), border-color var(--hs-t-fast), color var(--hs-t-fast), transform var(--hs-t-fast), box-shadow var(--hs-t-fast);
}
.btn-sm { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .6rem; --bs-btn-font-size: 1rem; }
.btn-lg { --bs-btn-padding-x: 2.4rem; --bs-btn-padding-y: 1rem;  --bs-btn-font-size: 1.125rem; }
.btn-link { text-transform: none; letter-spacing: 0; font-family: var(--hs-font-body); }

.btn:not(.btn-link):not(:disabled):not(.disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--hs-brown-rgb), .18); }
.btn:not(.btn-link):not(:disabled):not(.disabled):active { transform: translateY(0); box-shadow: none; }

/* Solid gold */
.btn-primary,
.btn-kbaby-primary,
.kw-btn--primary,
a.btn-primary,
a.btn-kbaby-primary,
a.kw-btn--primary {
  color: #fff !important;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hs-gold);
  --bs-btn-border-color: var(--hs-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hs-gold-dark);
  --bs-btn-hover-border-color: var(--hs-gold-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hs-brown);
  --bs-btn-active-border-color: var(--hs-brown);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--hs-gold-soft);
  --bs-btn-disabled-border-color: var(--hs-gold-soft);
}

.btn-primary *,
a.btn-primary * {
  color: #fff !important;
}

/* Gold outline */
.btn-outline-primary,
.btn-kbaby-outline,
.kw-btn--outline {
  --bs-btn-color: var(--hs-gold-dark);
  --bs-btn-border-color: var(--hs-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hs-gold);
  --bs-btn-hover-border-color: var(--hs-gold);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hs-gold-dark);
  --bs-btn-active-border-color: var(--hs-gold-dark);
  --bs-btn-disabled-color: var(--hs-gold-soft);
  --bs-btn-disabled-border-color: var(--hs-gold-soft);
}

/* Solid brown */
.btn-dark,
.btn-brown {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hs-brown);
  --bs-btn-border-color: var(--hs-brown);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hs-brown-dark);
  --bs-btn-hover-border-color: var(--hs-brown-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hs-ink);
  --bs-btn-active-border-color: var(--hs-ink);
}

/* Brown outline */
.btn-outline-dark,
.btn-outline-brown {
  --bs-btn-color: var(--hs-brown);
  --bs-btn-border-color: var(--hs-brown);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hs-brown);
  --bs-btn-hover-border-color: var(--hs-brown);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hs-brown-dark);
  --bs-btn-active-border-color: var(--hs-brown-dark);
}

/* Soft sand + white (used on gold backgrounds) */
.btn-light,
.btn-soft,
.kw-btn--soft {
  --bs-btn-color: var(--hs-brown);
  --bs-btn-bg: var(--hs-sand);
  --bs-btn-border-color: var(--hs-sand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hs-gold);
  --bs-btn-hover-border-color: var(--hs-gold);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hs-gold-dark);
  --bs-btn-active-border-color: var(--hs-gold-dark);
}

.btn-whatsapp {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hs-whatsapp);
  --bs-btn-border-color: var(--hs-whatsapp);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1EBE5A;
  --bs-btn-hover-border-color: #1EBE5A;
}

/* Legacy .kw-btn / .btn-kbaby-* (store templates) use the same look */
.kw-btn,
.btn-kbaby-primary,
.btn-kbaby-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.9rem;
  border: 1px solid var(--bs-btn-border-color, transparent);
  border-radius: var(--hs-radius-sm);
  background: var(--bs-btn-bg, transparent);
  color: var(--bs-btn-color, inherit);
  font-family: var(--hs-font-heading);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--hs-t-fast), border-color var(--hs-t-fast), color var(--hs-t-fast), transform var(--hs-t-fast), box-shadow var(--hs-t-fast);
}
.kw-btn:hover,
.btn-kbaby-primary:hover,
.btn-kbaby-outline:hover {
  background: var(--bs-btn-hover-bg, var(--hs-gold));
  border-color: var(--bs-btn-hover-border-color, var(--hs-gold));
  color: var(--bs-btn-hover-color, #fff);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--hs-brown-rgb), .18);
}
.kw-btn--sm { padding: .6rem 1.25rem; font-size: 1rem; }
.kw-btn svg { flex-shrink: 0; width: 16px; height: 16px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control,
.form-select {
  border-color: var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background-color: #fff;
  color: var(--hs-ink);
  font-size: 1rem;
  padding: .7rem .95rem;
}
.form-control::placeholder { color: var(--hs-muted); opacity: .85; }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--hs-gold);
  box-shadow: 0 0 0 .2rem rgba(var(--hs-gold-rgb), .22);
  background-color: #fff;
  color: var(--hs-ink);
}
.form-check-input:checked {
  background-color: var(--hs-gold);
  border-color: var(--hs-gold);
}
.form-check-input { border-color: var(--hs-gold-soft); }
.form-range::-webkit-slider-thumb { background: var(--hs-gold); }
.form-range::-moz-range-thumb { background: var(--hs-gold); }
.form-label { font-size: 1rem; font-weight: 600; color: var(--hs-ink); }

/* Misc Bootstrap pieces */
.breadcrumb { --bs-breadcrumb-divider-color: var(--hs-gold-soft); --bs-breadcrumb-item-active-color: var(--hs-ink); }
.page-link { color: var(--hs-brown); border-color: var(--hs-border); }
.page-link:hover { color: #fff; background: var(--hs-gold); border-color: var(--hs-gold); }
.page-item.active .page-link { background: var(--hs-gold); border-color: var(--hs-gold); color: #fff; }
.progress { --bs-progress-bg: var(--hs-sand); --bs-progress-bar-bg: var(--hs-gold); --bs-progress-border-radius: 0; }
.offcanvas, .modal-content { background: var(--hs-cream); }
.offcanvas-title { font-family: var(--hs-font-heading); color: var(--hs-ink); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--hs-gold); }
.badge.bg-primary { background-color: var(--hs-gold) !important; }

/* ==========================================================================
   Accessibility
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--hs-gold-dark);
  outline-offset: 3px;
  box-shadow: none;
}

.skip-link:focus { background: var(--hs-brown); color: #fff; padding: .6rem 1rem; z-index: 2000; }

/* ==========================================================================
   Scroll reveal (class added by assets/js/main.js)
   ========================================================================== */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--hs-t-slow), transform var(--hs-t-slow);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Legacy aliases
   Older store templates (single product, cart, checkout, category) still read
   --kw-* variables. They now resolve to the HS Kids palette, so nothing there
   needs editing and no sky-blue colour can leak in.
   ========================================================================== */
:root {
  --kw-primary: var(--hs-gold);
  --kw-primary-dark: var(--hs-gold-dark);
  --kw-secondary: var(--hs-gold-soft);
  --kw-accent: var(--hs-gold);
  --kw-mint: var(--hs-success);
  --kw-bg: var(--hs-white);
  --kw-bg-soft: var(--hs-cream);
  --kw-bg-cream: var(--hs-sand);
  --kw-text: var(--hs-ink);
  --kw-text-muted: var(--hs-muted);
  --kw-border: var(--hs-border);
  --kw-sale: var(--hs-sale);
  --kw-whatsapp: var(--hs-whatsapp);

  --kw-primary-tint: var(--hs-sand);
  --kw-secondary-tint: #F6ECE4;
  --kw-accent-tint: #F5EBD9;
  --kw-mint-tint: #EDF1E6;

  --kw-radius-sm: var(--hs-radius-sm);
  --kw-radius: var(--hs-radius);
  --kw-radius-lg: var(--hs-radius-lg);
  --kw-radius-pill: var(--hs-radius-pill);
  --kw-shadow: var(--hs-shadow);
  --kw-shadow-hover: var(--hs-shadow-lg);
  --kw-font-body: var(--hs-font-body);
  --kw-font-heading: var(--hs-font-heading);

  --primary: var(--hs-gold);
  --primary-light: var(--hs-sand);
  --dark: var(--hs-ink);
  --muted: var(--hs-muted);
  --muted-light: #B9A895;
  --border-strong: var(--hs-gold-soft);
  --border-light: var(--hs-border-soft);
  --rating-star-color: var(--hs-gold);
  --input-focus-border: var(--hs-gold);
  --input-focus-ring: rgba(193, 161, 114, .22);
  --font-heading: var(--hs-font-heading);
  --font-body: var(--hs-font-body);
}


/* ==========================================================================
   Widget design tokens (--fl-*) used by template-widgets CSS
   ========================================================================== */
:root {
	/* -------------------------------------------------------------
	 * 1. Brand Colors
	 * ------------------------------------------------------------- */
	--fl-primary: #0b6638;
	--fl-primary-hover: #074f2b;
	--fl-primary-dark: #004820;
	--fl-primary-light: #16a34a;
	--fl-primary-accent: #22c55e;
	--fl-primary-subtle: #e9f7ee;
	--fl-primary-deep: #0d3b22;
	--fl-cream: #f6f1e7;

	--fl-yellow: #ffd000;
	--fl-yellow-hover: #eab308;
	--fl-yellow-light: #fef08a;
	--fl-yellow-subtle: #fefce8;

	--fl-orange-deal: #ff5500;
	--fl-red-discount: #dc2626;
	--fl-red-subtle: #fee2e2;

	--fl-whatsapp: #25d366;
	--fl-whatsapp-dark: #128c7e;

	/* -------------------------------------------------------------
	 * 2. Neutral & Surface Palette
	 * ------------------------------------------------------------- */
	--fl-white: #ffffff;
	--fl-gray-50: #f8fafc;
	--fl-gray-100: #f1f5f9;
	--fl-gray-200: #e2e8f0;
	--fl-gray-300: #cbd5e1;
	--fl-gray-400: #94a3b8;
	--fl-gray-500: #64748b;
	--fl-gray-600: #475569;
	--fl-gray-700: #334155;
	--fl-gray-800: #1e293b;
	--fl-gray-900: #0f172a;

	--fl-text-heading: #0f172a;
	--fl-text-body: #334155;
	--fl-text-muted: #64748b;
	--fl-text-inverted: #ffffff;

	--fl-bg-body: #ffffff;
	--fl-bg-section: #ffffff;
	--fl-bg-card: #ffffff;
	--fl-border-color: #e2e8f0;

	/* -------------------------------------------------------------
	 * 3. Typography Stacks
	 * ------------------------------------------------------------- */
	--fl-font-sans: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	--fl-font-heading: "Outfit", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--fl-font-display: "Outfit", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	--fl-font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;

	--fl-line-height-tight: 1.08;
	--fl-line-height-snug: 1.25;
	--fl-line-height-normal: 1.5;
	--fl-line-height-relaxed: 1.65;

	/* Heading Scale Tokens */
	--fl-h1-size: clamp(2.1rem, 4vw, 3.25rem);
	--fl-h2-size: clamp(1.6rem, 2.8vw, 2.2rem);
	--fl-h3-size: clamp(1.3rem, 2.2vw, 1.7rem);
	--fl-h4-size: 1.25rem;
	--fl-h5-size: 1.05rem;
	--fl-h6-size: 0.9rem;

	/* -------------------------------------------------------------
	 * 4. Border Radius & Shadows
	 * ------------------------------------------------------------- */
	--fl-radius-xs: 4px;
	--fl-radius-sm: 6px;
	--fl-radius-md: 10px;
	--fl-radius-lg: 16px;
	--fl-radius-xl: 20px;
	--fl-radius-pill: 9999px;

	--fl-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
	--fl-shadow-card-hover: 0 10px 25px -5px rgba(15, 92, 56, 0.12), 0 0 0 1px rgba(34, 197, 94, 0.3);
	--fl-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
	--fl-shadow-lift: 0 4px 10px rgba(15, 23, 42, 0.05), 0 18px 36px -12px rgba(11, 102, 56, 0.22);

	/* -------------------------------------------------------------
	 * 5. Motion & Spacing
	 * ------------------------------------------------------------- */
	--fl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fl-duration: 0.35s;
	--fl-section-space: clamp(1.75rem, 3.2vw, 3rem);

	/* -------------------------------------------------------------
	 * 6. Layout: site container (single source of truth for gutters)
	 * ------------------------------------------------------------- */
	--fl-container-max: 100%;
	--fl-gutter: 50px;

	/* -------------------------------------------------------------
	 * 7. Design system for store widgets (product / category pages)
	 *    Colour roles follow Elementor Global Colors, with theme fallbacks.
	 * ------------------------------------------------------------- */
	--fl-space-1: 8px;
	--fl-space-2: 16px;
	--fl-space-3: 24px;
	--fl-space-4: 32px;
	--fl-space-5: 48px;
	--fl-space-6: 64px;

	--fl-c-primary: var(--e-global-color-primary, var(--fl-primary));
	--fl-c-primary-hover: var(--e-global-color-secondary, var(--fl-primary-hover));
	--fl-c-primary-light: var(--e-global-color-c_fl_primary_light, var(--fl-primary-light));
	--fl-c-primary-soft: var(--fl-primary-subtle);
	--fl-c-heading: var(--e-global-color-c_fl_heading_green, var(--fl-primary-deep));
	--fl-c-title: var(--e-global-color-c_fl_heading_deep, var(--fl-text-heading));
	--fl-c-text: var(--e-global-color-text, var(--fl-text-body));
	--fl-c-muted: var(--e-global-color-c_fl_gray_500, var(--fl-text-muted));
	--fl-c-sale: var(--e-global-color-c_fl_discount_red, var(--fl-red-discount));
	--fl-c-sale-soft: var(--fl-red-subtle);
	--fl-c-cream: var(--e-global-color-c_fl_cream, var(--fl-cream));
	--fl-c-surface: var(--fl-bg-card);
	--fl-c-surface-alt: var(--fl-gray-50);
	--fl-c-well: linear-gradient(180deg, #f6faf7 0%, #eef5f0 100%);
	--fl-c-border: var(--fl-border-color);
	--fl-c-border-soft: #edf0f2;
	--fl-c-border-active: rgba(34, 197, 94, 0.45);
	--fl-c-on-primary: var(--fl-white);
	--fl-c-focus: rgba(22, 163, 74, 0.45);

	--fl-shadow-1: var(--fl-shadow-soft);
	--fl-shadow-2: 0 4px 16px rgba(15, 23, 42, 0.06);
	--fl-shadow-3: var(--fl-shadow-lift);
	--fl-shadow-cta: 0 10px 20px -10px rgba(11, 102, 56, 0.7);

	--fl-t-fast: 0.2s;
	--fl-t-base: var(--fl-duration);
	--fl-t-slow: 0.5s;

	--fl-tap: 44px;
	--fl-measure: 75ch;
}

@media (max-width: 991.98px) {
	:root {
		--fl-gutter: 24px;
	}
}

@media (max-width: 575.98px) {
	:root {
		--fl-gutter: 16px;
	}
}

/* Section tint used by the page widgets */
.fl-page-section--tint {
  background: #f7fbf8;
}

.wc-el-wrap .fl-cat-pill:focus-visible {
  outline: 3px solid var(--fl-c-focus);
  outline-offset: 2px;
}

.fl-pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
}

.fl-pdp-rating-link {
  color: var(--fl-gray-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fl-pdp-notice {
  margin: 0.8rem 0 0;
  padding: 0.65rem 0.9rem;
  border-radius: var(--fl-radius-md);
  background: #fff5f5;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 0.86rem;
  font-weight: 600;
}

/* ==========================================================================
   Global Site Container (gutter: --fl-gutter above, 50 / 24 / 16px)
   ========================================================================== */

.site-container {
	width: 100%;
	max-width: var(--fl-container-max, 100%);
	padding-left: var(--fl-gutter, 50px);
	padding-right: var(--fl-gutter, 50px);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Custom Elevation Shadows */
.shadow-fl-card {
	box-shadow: var(--fl-shadow-card) !important;
}

.shadow-fl-hover:hover {
	box-shadow: var(--fl-shadow-card-hover) !important;
}

/* ==========================================================================
   Default page template (page.php): cart, checkout, my account, policies
   ========================================================================== */
.hs-page-main { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }

.hs-page-main .entry-header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hs-border);
}

.hs-page-main .entry-title {
  padding: 0;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.02em;
}

.hs-page-main .entry-content > * + * { margin-top: 1rem; }
.hs-page-main .entry-footer { margin-top: 2rem; font-size: .8rem; }
.hs-page-main .entry-footer a { color: var(--hs-gold-dark); }