/* =========================================================================
   THE CANDY CLUB — styles.css
   Vanilla CSS, mobile-first. Brand colours & fonts live in :root — these are
   pulled from the logo (warm cream) and the seven product packs (rainbow).
   Change them here to rebrand the whole site fast.
   ========================================================================= */

/* ----------------------------- DESIGN TOKENS ---------------------------- */
:root {
  /* Core brand neutrals (from the logo wordmark) */
  --color-logo:    #FBF2E2;   /* the wordmark's single off-white tone   */
  --color-cream:   #FCF6EC;   /* warm light base                        */
  --color-cream-2: #F6EAD6;   /* slightly deeper warm for alt sections  */
  --color-ink:     #171A33;   /* near-black navy (text / deepest)       */
  --color-grape:   #3946AE;   /* deep blue (dark sections / header)     */
  --color-white:   #ffffff;

  /* Product palette (sampled from the seven packs) */
  --c-green:  #5BB946;   /* Jumbo Tots     */
  --c-purple: #7C4DD6;   /* Trippy Tongues */
  --c-pink:   #F2589E;   /* Jelly Slices   */
  --c-blue:   #1FA3E0;   /* Jelly Snakes   */
  --c-teal:   #1FBEAE;   /* Jelly Bones    */
  --c-indigo: #2E50D6;   /* Jelly Rings    */
  --c-orange: #F7941D;   /* Angel Wings    */

  /* Semantic aliases */
  /* ---- MAIN brand colours (site chrome) ---- */
  --c-amber:      #ffa51d;   /* warm amber            */
  --c-orange2:    #ff741e;   /* punchy orange         */
  --c-blue-deep:  #3946ae;   /* deep blue             */
  --c-blue-bright:#5170ff;   /* bright periwinkle blue*/

  --bg:         var(--color-cream);
  --bg-alt:     var(--color-white);
  --text:       var(--color-ink);
  --text-muted: #5a5f72;
  --accent:     var(--c-orange2);  /* primary CTA / highlight (orange) */
  --accent-2:   var(--c-amber);    /* secondary pop (amber)            */

  /* Typography */
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, sans-serif;

  /* Spacing & shape */
  --container:    1180px;
  --radius-sm:    12px;
  --radius:       20px;
  --radius-lg:    32px;
  --section-pad:  clamp(3.5rem, 8vw, 7rem);

  /* Effects */
  --shadow:    0 18px 50px -20px rgba(23, 26, 51, 0.42);
  --shadow-sm: 0 8px 24px -12px rgba(23, 26, 51, 0.34);
  --ring:      0 0 0 3px rgba(255, 116, 30, 0.35);
  --transition:220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------- RESET ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.06; font-weight: 700; letter-spacing: -0.01em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* --------------------------- LAYOUT HELPERS ----------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

.section { padding-block: var(--section-pad); }

.section__title { font-size: clamp(1.9rem, 1.3rem + 3vw, 3.25rem); }
.section__lead  { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); color: var(--text-muted); max-width: 62ch; margin-top: 1rem; }
.section__head  { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.eyebrow {
  display: inline-block; font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.85rem;
}
.eyebrow--light { color: var(--accent-2); }

.text-gradient {
  background: linear-gradient(100deg, var(--c-amber) 0%, var(--c-orange2) 34%, var(--c-blue-bright) 72%, var(--c-blue-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.rounded-img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.muted { color: var(--text-muted); }

/* ------------------------------- BUTTONS -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.4rem; border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-family: var(--font-body); text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn--lg { padding: 1rem 1.8rem; font-size: 1.0625rem; }
.btn--primary { background: var(--accent); color: var(--color-white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-white); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text-muted); border-color: rgba(0,0,0,0.15); }
.btn--ghost:hover { background: rgba(0,0,0,0.05); }

/* ============================== AGE GATE ================================ */
.age-gate {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 1.25rem;
  background: radial-gradient(120% 120% at 50% 0%, var(--color-grape), var(--color-ink));
}
.age-gate[hidden] { display: none; }
.age-gate__card {
  background: var(--color-white); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 5vw, 3rem); max-width: 460px; width: 100%;
  text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  animation: pop var(--transition);
}
@keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.age-gate__emoji { font-size: 2.75rem; display: block; }
.age-gate__brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; color: var(--accent); margin-top: 0.4rem; }
.age-gate__title { font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem); margin-top: 0.75rem; }
.age-gate__copy  { color: var(--text-muted); margin-top: 0.75rem; }
.age-gate__actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }
.age-gate__actions .btn { min-width: 130px; }

/* ============================ STICKY HEADER ============================= */
/* Dark header so the single-colour off-white logo reads against it. */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(57, 70, 174, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled { box-shadow: 0 12px 30px -16px rgba(0,0,0,0.5); background: rgba(46, 57, 148, 0.95); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 92px; }
.brand__logo { height: 72px; width: auto; }
.main-nav { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: clamp(0.85rem, 2vw, 1.6rem); }
.nav-menu a { font-weight: 600; font-size: 0.98rem; position: relative; padding: 0.25rem 0; color: rgba(255,255,255,0.86); transition: color var(--transition); }
.nav-menu a:not(.nav-shop)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--accent); transition: width var(--transition);
}
.nav-menu a:not(.nav-shop):hover { color: var(--color-white); }
.nav-menu a:not(.nav-shop):hover::after { width: 100%; }
.nav-shop {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--accent); color: var(--color-white);
  padding: 0.5rem 0.9rem !important; border-radius: 999px; font-weight: 700;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.nav-shop:hover { background: var(--accent-2); color: var(--color-ink); transform: translateY(-1px); }
.nav-shop__soon { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--color-ink); color: var(--accent-2); padding: 0.12rem 0.4rem; border-radius: 999px; }
/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 0.5rem; }
.nav-toggle__bar { width: 26px; height: 3px; background: var(--color-white); border-radius: 3px; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ================================ HERO ================================= */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  /* soft orange/blue glow mesh over the warm cream base */
  background:
    radial-gradient(38% 46% at 10% 18%, rgba(255,165,29,0.22), transparent 70%),
    radial-gradient(36% 44% at 90% 14%, rgba(81,112,255,0.20), transparent 70%),
    radial-gradient(42% 50% at 84% 88%, rgba(57,70,174,0.16), transparent 70%),
    radial-gradient(40% 46% at 14% 90%, rgba(255,116,30,0.18), transparent 70%),
    radial-gradient(34% 42% at 50% 46%, rgba(255,165,29,0.08), transparent 72%),
    var(--color-cream);
}
/* Faint gummies photo behind the whole hero (kept low so text/photo stay clear) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/images/hero-bg.jpg") center/cover no-repeat;
  opacity: 0.07;
}
.hero__inner { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* Floating candies */
.hero__decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.candy {
  position: absolute; width: clamp(46px, 6vw, 92px);
  filter: drop-shadow(0 10px 16px rgba(42,18,69,0.18));
  animation: floaty 7s ease-in-out infinite;
}
.candy--1 { top: 5%;  left: 1%;  width: clamp(60px, 8vw, 120px); animation-delay: -0.5s; }   /* worm  */
.candy--2 { top: 9%;  right: 4%; animation-delay: -1.4s; }                                     /* ring  */
.candy--3 { top: 1%;  left: 45%; width: clamp(36px, 4vw, 58px); animation-delay: -3s; }        /* star  */
.candy--4 { bottom: 15%; right: 7%; width: clamp(56px, 7vw, 104px); animation-delay: -2.2s; }  /* bear  */
.candy--5 { bottom: 5%; right: 33%; animation-delay: -4s; }                                    /* slice */
.candy--6 { top: 50%; right: 1%; width: clamp(40px, 5vw, 72px); animation-delay: -1s; }        /* heart */
.candy--7 { bottom: 18%; left: 5%; width: clamp(38px, 4.5vw, 64px); animation-delay: -3.6s; }  /* ring  */
.candy--8 { top: 33%; left: 31%; width: clamp(32px, 4vw, 54px); opacity: 0.85; filter: blur(1px) drop-shadow(0 8px 12px rgba(42,18,69,0.15)); animation-delay: -5s; } /* bear, depth */
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }

/* ============================ FLAVOUR MARQUEE ========================== */
.marquee { background: var(--color-cream-2); border-block: 1px solid rgba(42,18,69,0.07); overflow: hidden; }
.marquee__row { display: flex; width: max-content; animation: scroll-x 34s linear infinite; }
.marquee__track { display: flex; align-items: center; padding-block: 0.85rem; }
.marquee__track > * { margin-left: clamp(1rem, 2.5vw, 1.75rem); }
.marquee .flavour { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.4rem); color: var(--text); white-space: nowrap; }
.marquee .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--pc); display: inline-block; flex: none; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ============================ SECTION DECOR =========================== */
/* Faint floating candies tucked into section corners. */
.section-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.section-decor .candy { animation: floaty 9s ease-in-out infinite; opacity: 0.5; }
.candy--tr { top: -14px; right: -12px; width: clamp(72px, 9vw, 132px); }
.candy--bl { bottom: -18px; left: -12px; width: clamp(72px, 9vw, 132px); animation-delay: -3s; }

/* =============================== GALLERY ============================== */
.gallery { background: var(--color-cream); }
.gallery__grid { display: grid; gap: clamp(0.6rem, 1.5vw, 1rem); grid-template-columns: 1fr; }
.gallery__item { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; }
.gallery__item:hover img { transform: scale(1.04); }

/* Keep section content above the decorative candies */
.enquire { position: relative; overflow: hidden; }
.white-label > .container, .enquire__inner { position: relative; z-index: 1; }
.hero__title { font-size: clamp(2.5rem, 1.6rem + 5.5vw, 4.75rem); }
.hero__lead { font-size: clamp(1.08rem, 1rem + 0.6vw, 1.35rem); color: var(--text-muted); margin-top: 1.4rem; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero__media { position: relative; }
.hero__img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; max-height: 640px; object-fit: cover; object-position: center; }
.hero__sticker {
  position: absolute; font-family: var(--font-display); font-weight: 700;
  border-radius: 999px; padding: 0.6rem 1rem; box-shadow: var(--shadow-sm);
  animation: float 5s ease-in-out infinite;
}
.hero__sticker--1 { top: -14px; left: -10px; background: var(--c-amber); color: var(--color-ink); }
.hero__sticker--2 { bottom: -14px; right: -6px; background: var(--accent); color: var(--color-white); animation-delay: -2.5s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* ============================= TRUST STRIP ============================= */
.trust { background: var(--color-ink); color: var(--color-white); }
.trust__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding-block: clamp(1.5rem, 4vw, 2.25rem); }
.trust__item { display: flex; align-items: center; gap: 0.7rem; justify-content: center; font-weight: 700; font-size: clamp(0.9rem, 0.85rem + 0.4vw, 1.05rem); }
.trust__icon { width: 26px; height: 26px; flex-shrink: 0; }
.trust__item:nth-child(1) .trust__icon { fill: var(--c-amber); }
.trust__item:nth-child(2) .trust__icon { fill: var(--c-orange2); }
.trust__item:nth-child(3) .trust__icon { fill: var(--c-blue-bright); }
.trust__item:nth-child(4) .trust__icon { fill: var(--c-blue-bright); }

/* ================================ ABOUT =============================== */
.about__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about__content > p:not(.section__lead) { margin-top: 1rem; color: var(--text-muted); }
.about__media { max-width: 460px; margin-inline: auto; }
.stat-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 2rem; }
.stat-row li { display: flex; flex-direction: column; }
.stat-row strong { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); color: var(--accent); line-height: 1; }
.stat-row span { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.25rem; }

/* ============================== PRODUCTS ============================== */
.products { background: var(--color-cream-2); }
/* Flex grid so the 7 cards stay evenly sized and the last row centres (no blank gaps) */
.product-grid { --gp: clamp(1rem, 2.2vw, 1.5rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gp); }
.product-card {
  position: relative; background: var(--bg-alt); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  border: 1px solid rgba(42,18,69,0.06);
  flex: 0 1 100%; max-width: 460px;        /* mobile: 1 per row, centred */
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -22px var(--pc, rgba(42,18,69,0.5)); border-color: var(--pc); }
.product-card__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--pc); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.product-card__title { font-size: 1.3rem; }
.product-card__badge {
  align-self: flex-start; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; background: var(--pc);
  padding: 0.28rem 0.62rem; border-radius: 999px;
}
.product-card__blurb { color: var(--text-muted); font-size: 0.94rem; }
.product-card__ingredients { color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; margin-top: 0.5rem; }
.product-card__ingredients strong { color: var(--text); font-weight: 700; }

/* Ingredients "read more" toggle */
.pc-more {
  margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0.3rem 0 0;
  color: var(--accent); font-weight: 700; font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.pc-more:hover .pc-more__label { text-decoration: underline; }
.pc-more__icon { transition: transform var(--transition); font-size: 0.8em; }
.pc-more[aria-expanded="true"] .pc-more__icon { transform: rotate(180deg); }

/* Per-product photo — main pack shot, hover reveals the gummies close-up.
   (Carousel arrows/dots removed for now; only slides 1 & 2 are used.) */
.pc-carousel { position: relative; }
.pc-carousel__track { position: absolute; inset: 0; }
.pc-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 380ms ease; }
.pc-slide img { width: 100%; height: 100%; object-fit: cover; }
.pc-slide:first-child { opacity: 1; }                 /* main pack shot shown by default */
.pc-slide:nth-child(n+3) { display: none; }           /* only main + hover for now */
.product-card:hover .pc-slide:first-child { opacity: 0; }
.product-card:hover .pc-slide:nth-child(2) { opacity: 1; }
.pc-arrow, .pc-dots { display: none; }                /* controls hidden */
.products__note { text-align: center; color: var(--text-muted); margin-top: clamp(1.8rem, 4vw, 2.6rem); font-size: 1rem; max-width: 66ch; margin-inline: auto; }

/* ===================== FEATURED / TOP SELLERS ==================== */
.featured { background: linear-gradient(180deg, #F9C892 0%, #F4B173 100%); }  /* soft faded orange */
.featured .eyebrow { color: var(--color-grape); }
.featured .section__title { color: var(--color-ink); }
.featured__head { text-align: center; margin-inline: auto; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); }
.featured-card {
  display: block; background: var(--bg-alt); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(42,18,69,0.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.featured-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -22px var(--pc); border-color: var(--pc); }
.featured-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--pc); }
.featured-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.featured-card:hover .featured-card__media img { transform: scale(1.06); }
.featured-card__body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.featured-card__tag { align-self: flex-start; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; background: var(--pc); padding: 0.24rem 0.55rem; border-radius: 999px; }
.featured-card__title { font-size: 1.15rem; }
@media (min-width: 820px) { .featured-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===================== DOSAGE & PRICING GUIDE ==================== */
/* Tighter spacing so this sits close to the range above it. */
.products { padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.dosage-guide {
  position: relative; overflow: hidden;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(180deg, #E9E7F7 0%, #DFE2FA 100%);  /* off violet-blue */
}
.dosage-guide::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 55% at 10% 18%, rgba(255,148,29,0.12), transparent 70%),
    radial-gradient(40% 52% at 90% 88%, rgba(46,80,214,0.14), transparent 70%);
}
.dosage-guide > .container { position: relative; z-index: 1; }
.dosage-guide .section__head { margin-inline: auto; text-align: center; }
.dosage-guide .section__lead { margin-inline: auto; }

.price-guide { max-width: 600px; margin-inline: auto; }
.price-table {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--bg-alt); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.price-table th, .price-table td { padding: 0.85rem 1.4rem; text-align: left; }
.price-table thead th {
  background: var(--color-grape); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.price-table thead th:last-child, .price-table tbody td:last-child { text-align: right; }
.price-table tbody tr:nth-child(even) { background: var(--color-cream); }
.price-table tbody tr + tr td { border-top: 1px solid rgba(57,70,174,0.10); }
.price-table tbody td:first-child { font-weight: 800; color: var(--text); }
.price-table tbody td:last-child { font-family: var(--font-display); font-weight: 600; color: var(--accent); }
.price-guide__note { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-top: 1rem; max-width: 46ch; margin-inline: auto; }

/* ===================== PRODUCT SHOWCASE BAND ====================== */
.showcase { position: relative; }
.showcase__img { display: block; width: 100%; height: clamp(260px, 44vw, 540px); object-fit: cover; object-position: center; }
.showcase__caption {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(23,26,51,0.92), rgba(23,26,51,0));
}
.showcase__caption .section__title { color: var(--color-white); max-width: 22ch; }

/* ============================= WHITE LABEL ============================ */
/* Full-bleed blue block that runs flush against the showcase band above it. */
.white-label { background: var(--color-grape); color: var(--color-white); position: relative; overflow: hidden; }
.white-label::after {
  content: ""; position: absolute; inset: auto auto -30% -10%; width: 50vw; height: 50vw; max-width: 480px; max-height: 480px;
  background: radial-gradient(circle, rgba(255,165,29,0.20), transparent 65%); border-radius: 50%;
}
.white-label .section__lead { color: rgba(255,255,255,0.80); }
.white-label__head { max-width: 64ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.steps { display: grid; gap: 1.1rem; list-style: none; padding: 0; }
.step {
  position: relative; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius); padding: 1.5rem;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.step:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); border-color: var(--pc, var(--accent-2)); }
.step__num { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--pc, var(--accent-2)); display: block; line-height: 1; }
.step__title { font-size: 1.18rem; margin: 0.5rem 0; }
.step p { color: rgba(255,255,255,0.74); font-size: 0.94rem; }
.white-label__note {
  margin-top: 2rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.white-label__note p { color: rgba(255,255,255,0.86); max-width: 60ch; }
.white-label__note strong { color: var(--color-white); }

/* =============================== ENQUIRE ============================== */
.enquire__intro { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.enquire__panel { background: var(--bg-alt); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2.25rem); max-width: 900px; }
.tabs { display: flex; gap: 0.4rem; background: var(--color-cream-2); padding: 0.4rem; border-radius: 999px; flex-wrap: wrap; }
.tab {
  flex: 1 1 140px; border: 0; background: transparent; border-radius: 999px;
  padding: 0.65rem 1rem; font-weight: 800; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.tab__sub { font-size: 0.7rem; font-weight: 600; opacity: 0.85; text-transform: none; letter-spacing: 0; }
.tab:hover:not(.is-active) { color: var(--text); }
.tab.is-active { background: var(--accent); color: var(--color-white); box-shadow: var(--shadow-sm); }

.enquiry-form { display: none; grid-template-columns: 1fr 1fr; gap: 1.05rem; margin-top: 1.4rem; }
.enquiry-form.is-active { display: grid; }
.enquiry-form__helper { grid-column: 1 / -1; color: var(--text-muted); margin-bottom: 0.2rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Enquiry success message */
.enquire__success { text-align: center; padding: clamp(1.75rem, 5vw, 3rem) 1rem; margin-top: 1.4rem; }
.enquire__success-emoji { font-size: 2.75rem; display: block; }
.enquire__success h3 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); margin-top: 0.5rem; }
.enquire__success p { color: var(--text-muted); max-width: 46ch; margin: 0.75rem auto 0; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 0.9rem; }
.req { color: var(--accent); }
.field input, .field select, .field textarea {
  font: inherit; padding: 0.75rem 0.9rem; border: 2px solid rgba(42,18,69,0.14);
  border-radius: var(--radius-sm); background: var(--color-cream); color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.field textarea { resize: vertical; }
.enquiry-form__submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-note { font-size: 0.82rem; color: var(--text-muted); flex: 1; min-width: 200px; }

/* =============================== CRAFTED ============================== */
.crafted { background: linear-gradient(180deg, #FBE9D4 0%, #FADFC6 100%); }
.crafted__head { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.crafted__points { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.crafted__points li { padding-left: 1.4rem; position: relative; }
.crafted__points li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--c-amber), var(--c-orange2)); }
.crafted__points strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.crafted__points span { color: var(--text-muted); font-size: 0.95rem; }

/* ============================ SHOP TEASER ============================ */
.shop-teaser { position: relative; text-align: center; background: var(--color-ink); overflow: hidden; }
.shop-teaser::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/images/range.jpg") center/cover no-repeat; opacity: 0.45;
}
.shop-teaser__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1rem; }
.shop-teaser .section__title { color: var(--color-white); }
.shop-teaser .section__lead { margin-inline: auto; color: rgba(255,255,255,0.88); }
.shop-teaser .btn { margin-top: 0.5rem; }
.shop-teaser .btn--outline { color: var(--color-white); border-color: var(--color-white); }
.shop-teaser .btn--outline:hover { background: var(--color-white); color: var(--color-ink); }

/* ============================== FOOTER ============================== */
.site-footer { background: var(--color-grape); color: rgba(255,255,255,0.9); padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer__inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
.footer-logo { height: 64px; width: auto; margin-bottom: 0.75rem; }
.footer-tagline { color: rgba(255,255,255,0.7); max-width: 34ch; }
.footer-heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-2); margin-bottom: 1rem; font-family: var(--font-body); font-weight: 800; }
.footer-list { display: grid; gap: 0.55rem; }
.footer-list a { color: rgba(255,255,255,0.85); transition: color var(--transition); }
.footer-list a:hover { color: var(--accent); }
.socials { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.social { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background var(--transition), transform var(--transition); }
.social svg { width: 20px; height: 20px; fill: var(--color-white); }
.social:hover { background: var(--accent); transform: translateY(-2px); }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.14); padding-block: 1.6rem; display: grid; gap: 0.6rem; }
.disclaimer { font-size: 0.8rem; color: rgba(255,255,255,0.6); max-width: 90ch; }
.copyright { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* ========================== SCROLL REVEAL ========================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================== RESPONSIVE =========================== */
@media (min-width: 620px) {
  .product-card { flex-basis: calc((100% - var(--gp)) / 2); max-width: none; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .crafted__points { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .about__inner { grid-template-columns: 0.85fr 1.15fr; }
  .trust__inner { grid-template-columns: repeat(4, 1fr); }
  .product-card { flex-basis: calc((100% - 2 * var(--gp)) / 3); }
  .steps--7 { grid-template-columns: repeat(4, 1fr); }
  .crafted__points { grid-template-columns: repeat(4, 1fr); }
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr;
    min-height: clamp(440px, 46vw, 620px);
  }
  .gallery__item--tall { grid-column: 1; grid-row: 1 / 3; }   /* portrait, left, full height */
  .gallery__item--wide { grid-column: 2 / 4; grid-row: 1; }   /* wide landscape, top-right */
  /* the two --sm tiles auto-fill row 2, cols 2 & 3 */
}
@media (min-width: 1080px) {
  .product-card { flex-basis: calc((100% - 3 * var(--gp)) / 4); }
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}

/* Mobile nav (drawer) */
@media (max-width: 859px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; inset: 92px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(46, 57, 148, 0.98); padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow);
    transform: translateY(-120%); opacity: 0; pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }
  .nav-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-menu li { border-bottom: 1px solid rgba(255,255,255,0.10); }
  .nav-menu a { display: block; padding: 0.9rem 0.25rem; font-size: 1.05rem; }
  .nav-shop { justify-content: center; margin-top: 0.75rem; }
  /* Keep the hero readable on small screens — fewer, fainter candies */
  .candy--3, .candy--5, .candy--8 { display: none; }
  .hero__decor .candy { opacity: 0.55; }
}

/* ---- Phones: stack the enquiry form & tabs, tidy spacing ---- */
@media (max-width: 600px) {
  .enquiry-form { grid-template-columns: 1fr; }      /* one field per row */
  .tabs { flex-direction: column; }                  /* full-width stacked tabs */
  .tab { flex: 1 1 auto; width: 100%; }
  .brand__logo { height: 60px; }                      /* logo fits smaller bars */
  .site-header__inner { min-height: 78px; }
  .nav-menu { inset: 78px 0 auto 0; }                 /* drawer meets shorter header */
  .hero__sticker { font-size: 0.85rem; padding: 0.45rem 0.8rem; }
  .stat-row { gap: 1.25rem 1.75rem; }
  .white-label__note { flex-direction: column; align-items: flex-start; }
  .white-label__note .btn { width: 100%; }
  .hero::before { background-image: url("assets/images/hero-bg-mobile.jpg"); opacity: 0.06; }
}

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