/* =====================================================================
   TO DYE FOR AND MORE — MAIN STYLESHEET
   ---------------------------------------------------------------------
   This one file styles every page.

   BRAND SETTINGS (colors + fonts) are directly below.
      Your 7 brand colors are listed once under "Brand palette".
      Change a hex code there and every page updates.

   Everything below the BRAND SETTINGS block is layout/styling you
   normally won't need to touch.
   ===================================================================== */

/* ---------- FONTS ----------
   Baloo Thambi (headings) and Poppins (body text), the same fonts
   you use in Canva, loaded free from Google Fonts. ("Baloo Thambi 2"
   is the current version of Baloo Thambi on Google Fonts.)
   To change fonts: pick new ones at fonts.google.com, replace the
   @import URL below, then update --font-heading / --font-body. */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap");

/* =====================================================================
   BRAND SETTINGS — edit these
   ===================================================================== */
:root {
  /* ---------- Brand palette (your official colors) ---------- */
  --brand-navy:       #213e7f;
  --brand-orange:     #e2511e;
  --brand-lime:       #cced74;
  --brand-periwinkle: #95b1e8;
  --brand-blush:      #f2cdc0;
  --brand-light:      #f8f8f8;
  --brand-dark:       #191919;

  /* ---------- Where each color is used ---------- */
  --color-primary:   var(--brand-navy);       /* main buttons, active menu item, links, footer */
  --color-secondary: var(--brand-orange);     /* prices, check marks, highlights */
  --color-accent:    var(--brand-lime);       /* small labels, "Best Seller" badges, footer headings */
  --color-soft:      var(--brand-periwinkle); /* soft blue accents, upload boxes */

  /* Soft tints: lighter versions of the palette for section
     backgrounds & placeholder photo boxes (made automatically) */
  --tint-blush:  color-mix(in srgb, var(--brand-blush) 55%, #fff);
  --tint-blue:   color-mix(in srgb, var(--brand-periwinkle) 28%, #fff);
  --tint-lime:   color-mix(in srgb, var(--brand-lime) 30%, #fff);
  --tint-orange: color-mix(in srgb, var(--brand-orange) 14%, #fff);
  --tint-navy:   color-mix(in srgb, var(--brand-navy) 12%, #fff);

  /* Neutrals */
  --color-text:       var(--brand-dark);  /* main text color */
  --color-text-muted: #55585F;            /* lighter text */
  --color-bg:         var(--brand-light); /* page background */
  --color-surface:    #FFFFFF;            /* cards, forms */
  --color-border:     #E4E7EE;
  --color-footer-bg:  var(--brand-navy);
  --color-footer-text:var(--brand-light);

  /* Status colors (form messages) */
  --color-success: #1E9E62;
  --color-error:   #C8243F;

  /* Fonts */
  --font-heading: "Baloo Thambi 2", "Baloo Thambi", "Trebuchet MS", sans-serif;
  --font-body:    "Poppins", "Segoe UI", Arial, sans-serif;

  /* Shape */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
}
/* ===================== END BRAND SETTINGS ===================== */


/* ---------- Layout helpers (usually leave alone) ---------- */
:root {
  --shadow-sm: 0 2px 8px rgba(25, 25, 25, 0.06);
  --shadow:    0 10px 30px rgba(25, 25, 25, 0.08);
  --shadow-lg: 0 18px 50px rgba(25, 25, 25, 0.14);
  --container: 1180px;
  --header-h:  76px;
  /* Navy → deep periwinkle blend used behind the big call-to-action bands */
  --gradient-brand: linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, var(--color-soft)));
}

/* =====================================================================
   BASE / RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* anything marked hidden stays hidden */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--color-secondary); }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; border-radius: 6px; }

/* Outlined icons (drawn by layout.js). They use the surrounding text color. */
.icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.15em; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 1000;
  background: var(--color-text); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--lime   { background: var(--tint-lime); }
.section--blush   { background: var(--tint-blush); }
.section--blue   { background: var(--tint-blue); }
.section--navy { background: var(--tint-navy); }

.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-head p { color: var(--color-text-muted); font-size: 1.08rem; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.text-center { text-align: center; }
.muted { color: var(--color-text-muted); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.btn--primary:hover { color: #fff; background: color-mix(in srgb, var(--color-primary) 85%, #000); }
.btn--secondary { background: var(--color-secondary); color: #fff; }
.btn--secondary:hover { color: #fff; background: color-mix(in srgb, var(--color-secondary) 85%, #000); }
.btn--outline { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn--outline:hover { background: var(--color-text); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--color-text); }
.btn--light { background: #fff; color: var(--color-text); }
.btn--light:hover { color: var(--color-primary); }
.btn--small { padding: 9px 16px; font-size: 0.92rem; }
/* "Coming soon" in place of Buy Now (no Square link yet) */
.btn--soon, .btn--soon:hover { background: var(--color-border); border-color: var(--color-border); color: var(--color-text-muted); cursor: default; box-shadow: none; transform: none; }
/* "Message us on Instagram" button */
.btn--instagram { background: #fff; color: var(--color-primary); border-color: var(--color-primary); }
.btn--instagram:hover { background: var(--color-primary); color: #fff; }
.btn--instagram svg { width: 18px; height: 18px; flex-shrink: 0; }
.card--dm { background: var(--tint-blush); border-color: transparent; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Buttons that should all be the same size (Home page hero):
   one even row of three on desktop and iPad, stacked full width on phones */
.btn-row--equal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.btn-row--equal .btn { width: 100%; justify-content: center; text-align: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; font-size: 0.95rem; }
@media (max-width: 600px) { .btn-row--equal { grid-template-columns: 1fr; } }

/* =====================================================================
   PLACEHOLDER IMAGES
   ---------------------------------------------------------------------
   Colored boxes that stand in for real photos. Each one displays its
   label, e.g. "[Photo: custom painted jean jacket]", so you know what
   to swap in. To replace one with a real photo, change:
     <div class="ph ..." role="img" aria-label="[Photo: X]">...</div>
   to:
     <img class="media-img" src="assets/photos/your-photo.jpg" alt="Describe the photo">
   ===================================================================== */
.ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius);
  background-color: var(--brand-blush);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.45) 0 12px, transparent 12px 24px);
  color: #3E4148;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute; top: 12px; left: 12px;
  width: 28px; height: 22px;
  border: 2.5px solid currentColor; border-radius: 5px; opacity: 0.35;
}
.ph--square   { aspect-ratio: 1 / 1; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--wide     { aspect-ratio: 16 / 9; }
.ph--blush  { background-color: var(--brand-blush); }
.ph--blue   { background-color: color-mix(in srgb, var(--brand-periwinkle) 60%, #fff); }
.ph--lime   { background-color: color-mix(in srgb, var(--brand-lime) 75%, #fff); }
.ph--navy   { background-color: color-mix(in srgb, var(--brand-navy) 22%, #fff); }
.ph--orange { background-color: color-mix(in srgb, var(--brand-orange) 30%, #fff); }
/* Real photos: every photo in a section uses the same crop shape */
.media-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--tint-blue); }
.media-img--square   { aspect-ratio: 1 / 1; }
.media-img--portrait { aspect-ratio: 4 / 5; }
.media-img--wide     { aspect-ratio: 16 / 9; }

/* "Coming soon" placeholder for items that don't have a photo yet */
.ph--soon { flex-direction: column; gap: 4px; }
.ph__soon {
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-primary);
  background: rgba(255,255,255,0.85); padding: 4px 14px; border-radius: 999px;
}
.ph__label { font-size: 0.8rem; font-weight: 600; color: #3E4148; background: rgba(255,255,255,0.7); padding: 2px 10px; border-radius: 999px; }

/* =====================================================================
   HEADER / NAVIGATION (sticky)
   ===================================================================== */
#site-header { min-height: var(--header-h); } /* reserves space before the header loads */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--color-border); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); flex-shrink: 0; }
.brand:hover { color: var(--color-text); }
.brand__logo { height: 54px; width: auto; }
.site-header .brand__tagline { padding-left: 12px; border-left: 2px solid var(--color-border); }
.footer-brand .brand__logo { height: 64px; }
.brand__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.brand__text { display: flex; flex-direction: column; }
.brand__tagline { font-size: 0.8rem; font-weight: 500; color: var(--color-secondary); line-height: 1.3; }
.site-footer .brand__tagline { color: var(--color-accent); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { background: var(--tint-blue); color: var(--color-primary); }
.nav__link[aria-current="page"] { background: var(--color-primary); color: #fff; }


.header-actions { display: flex; align-items: center; gap: 6px; }
.nav-toggle {
  display: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; background: var(--tint-navy); color: var(--color-text);
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ---------- Header search ----------
   Desktop & iPad: a search bar in the header. Phones: a search icon
   that opens the box below the header. Searching opens search.html. */
.header-search { position: relative; }
.header-search__form, .search-page__form { position: relative; display: flex; align-items: center; }
.header-search input, .search-page__form input {
  width: 190px; padding: 9px 14px 9px 40px; border-radius: 999px;
  border: 2px solid var(--color-border); background: var(--color-surface);
  font: inherit; font-size: 0.92rem; color: var(--color-text);
  -webkit-appearance: none; appearance: none;
}
.header-search input:focus, .search-page__form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--tint-blue); }
.header-search input::-webkit-search-cancel-button, .search-page__form input::-webkit-search-cancel-button { cursor: pointer; }
/* The magnifying glass inside the box is the search button */
.search-submit {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent;
  color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.search-submit:hover { color: var(--color-primary); background: var(--tint-blue); }
.search-submit svg { width: 18px; height: 18px; }
.search-toggle {
  display: none; width: 46px; height: 46px; border-radius: 50%;
  border: none; background: var(--tint-navy); color: var(--color-text);
  cursor: pointer; align-items: center; justify-content: center;
}
.search-toggle svg { width: 22px; height: 22px; }
@media (min-width: 1081px) {
  /* Room for the search bar next to the menu (the tagline shows on iPad and in the footer) */
  .site-header .brand__tagline { display: none; }
  .nav { margin-left: auto; }
  .nav__link { padding: 8px 10px; }
  .header-search input { width: 180px; }
}
@media (min-width: 1181px) { .header-search input { width: 200px; } }
@media (max-width: 600px) {
  .search-toggle { display: inline-flex; }
  .header-search {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 110;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow);
    padding: 12px 16px 16px; display: none;
  }
  .header-search.is-open { display: block; }
  .header-search input { width: 100%; font-size: 1rem; padding-top: 11px; padding-bottom: 11px; }
}

/* ---------- Search Results page (search.html) ---------- */
.search-hero { padding: clamp(28px, 5vw, 48px) 0 8px; }
.search-hero h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 16px; overflow-wrap: anywhere; }
.search-page__form { max-width: 560px; }
.search-page__form input { width: 100%; font-size: 1rem; padding-top: 12px; padding-bottom: 12px; }
.search-empty { max-width: 640px; margin: 0 auto 32px; text-align: center; padding: clamp(24px, 5vw, 40px); }
.search-empty h2 { font-size: clamp(1.3rem, 3.5vw, 1.7rem); }
.search-popular__title { text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 14px; }
.search-popular { margin-bottom: 0; }
.search-results { padding-top: clamp(20px, 3vw, 32px); }
.search-more { text-align: center; margin: 32px 0 0; color: var(--color-text-muted); }

/* Mobile/tablet menu */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    padding: 12px 20px 24px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: all 0.2s ease;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; width: 100%; gap: 4px; }
  .nav__link { padding: 12px 16px; font-size: 1.05rem; }
}
@media (max-width: 480px) {
  .brand__name { font-size: 1rem; }
  .brand__logo { height: 42px; }
  .site-header .brand__tagline { display: none; }
}

/* =====================================================================
   HERO (home page)
   ===================================================================== */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 90px) 0 clamp(56px, 8vw, 100px); }
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1; filter: blur(2px);
}
.hero::before { width: 420px; height: 420px; background: var(--tint-blush); top: -120px; right: -100px; }
.hero::after  { width: 300px; height: 300px; background: var(--tint-blue); bottom: -120px; left: -80px; }
.hero__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.hero h1 .highlight {
  color: var(--color-secondary);
  background: linear-gradient(transparent 64%, var(--color-accent) 64%, var(--color-accent) 88%, transparent 88%);
  padding: 0 4px;
}
.hero__lead { font-size: 1.2rem; color: var(--color-text-muted); max-width: 520px; margin-bottom: 28px; }
.hero__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero__collage > :first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.hero__badges li .icon { color: var(--color-secondary); margin-right: 6px; font-size: 1.1em; }
.hero__badges li {
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
}
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* Inner-page banner (top of every page except home) */
.page-hero {
  padding: clamp(44px, 7vw, 80px) 0 clamp(36px, 5vw, 56px);
  text-align: center;
  background:
    radial-gradient(circle at 12% 20%, var(--tint-blush) 0 110px, transparent 111px),
    radial-gradient(circle at 90% 80%, var(--tint-blue) 0 140px, transparent 141px),
    var(--tint-lime);
}
.page-hero p { max-width: 640px; margin: 0 auto; font-size: 1.12rem; color: var(--color-text-muted); }

/* Page banner with a photo beside the text */
.page-hero--media { text-align: left; }
.page-hero--media .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.page-hero--media p { margin: 0; }
.page-hero__photo { max-width: 460px; justify-self: end; width: 100%; box-shadow: var(--shadow); }
@media (max-width: 800px) {
  .page-hero--media { text-align: center; }
  .page-hero--media .container { grid-template-columns: 1fr; }
  .page-hero__photo { justify-self: center; max-width: 420px; }
}

/* Before & after pair (Shop page) */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.before-after figure { margin: 0; position: relative; }
.before-after figcaption {
  position: absolute; left: 12px; top: 12px;
  background: #fff; color: var(--color-primary); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 12px; border-radius: 999px;
}

/* =====================================================================
   GRIDS & CARDS
   ===================================================================== */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

/* Shop-by-category tiles */
.category-card {
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 14px 14px 20px;
  border: 1px solid var(--color-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); color: var(--color-text); }
.category-card h3 { margin: 0 6px; }
.category-card p { margin: 0 6px; color: var(--color-text-muted); font-size: 0.95rem; }
.category-card .arrow { margin: auto 6px 0; font-weight: 700; color: var(--color-primary); }

/* Product cards (Shop + featured) */
.product-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card__media { position: relative; }
.product-card__badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--color-accent); color: var(--color-text);
  font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.product-card__body { padding: 14px 6px 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card__name { font-size: 1.12rem; margin: 0; }
.product-card__desc { font-size: 0.92rem; color: var(--color-text-muted); margin: 0 0 8px; }
.product-card__price { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-secondary); margin: 0 0 4px; }
.product-card__type {
  align-self: flex-start; margin: 0 0 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 10px; border-radius: 999px;
}
.product-card__type--ready  { background: var(--tint-lime); color: var(--color-primary); }
.product-card__type--custom { background: var(--tint-blue); color: var(--color-primary); }
.product-card__from { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); }
.product-card__note { font-size: 0.8rem; color: var(--color-text-muted); margin: -8px 0 12px; }
.product-card__options { display: grid; gap: 10px; margin: 0 0 12px; }
.product-card__options .field { gap: 4px; }
.product-card__options label { font-size: 0.82rem; }
.product-card__options select { padding: 8px 10px; font-size: 0.92rem; }
.product-card__hint { font-size: 0.78rem; color: var(--color-text-muted); margin: -4px 0 0; }
.product-card__actions { display: grid; grid-template-columns: 1fr; align-content: start; gap: 8px; margin-top: auto; padding: 8px 6px 4px; }
/* Tiles in the same row are the same height, and their photos, text and
   buttons each line up across the row (browsers without subgrid fall back
   to buttons pinned to the bottom of each tile). */
@supports (grid-template-rows: subgrid) {
  .product-grid > .product-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .product-grid .product-card__actions { margin-top: 0; }
}

/* Filter chips (Shop + Gallery) */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.chip {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  padding: 8px 18px; border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer;
}
.filters--sub { margin-top: -24px; }
.filters--sub .chip { font-size: 0.85rem; padding: 5px 14px; border-width: 1.5px; }
.chip:hover { border-color: var(--color-soft); color: var(--color-primary); }
.chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* How-it-works steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step {
  position: relative; text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px 24px 28px;
  box-shadow: var(--shadow-sm);
}
.step__icon {
  width: 76px; height: 76px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px; font-size: 2rem;
}
.step__icon { color: var(--color-primary); font-size: 2.3rem; }
.step:nth-child(1) .step__icon { background: var(--tint-blush); }
.step:nth-child(2) .step__icon { background: var(--tint-blue); }
.step:nth-child(3) .step__icon { background: var(--tint-lime); }
.step__num {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: 700; line-height: 36px;
}
.step p { color: var(--color-text-muted); margin: 0; }
.steps--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 36px; } }

/* Split (image + text side by side) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}

.feature-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.feature-list li { position: relative; padding-left: 34px; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-secondary);
}
/* the white check mark inside the orange circle */
.feature-list li::after {
  content: ""; position: absolute; left: 9px; top: 6px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Service cards (Custom Orders apparel types, use cases, values) */
.service-card { display: flex; flex-direction: column; gap: 12px; }
.service-card h3 { margin: 6px 0 0; }
.service-card p { margin: 0; color: var(--color-text-muted); }
.service-card--link { text-decoration: none; color: var(--color-text); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-card--link:hover { color: var(--color-text); transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card--link .arrow { margin-top: auto; font-weight: 700; color: var(--color-primary); }
.service-card .arrow--bottom { margin-top: auto; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.service-card .arrow--bottom:hover { text-decoration: underline; }
.tag {
  display: inline-block; align-self: flex-start;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--tint-blue); color: var(--color-primary);
}

/* Callout / notice box */
.callout {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--tint-lime);
  border: 2px dashed color-mix(in srgb, var(--brand-lime) 70%, var(--brand-navy));
  border-radius: var(--radius);
  padding: 18px 22px;
}
.callout__icon { font-size: 1.7rem; line-height: 1; color: var(--color-primary); display: inline-flex; }
.callout p:last-child { margin-bottom: 0; }

/* Big CTA band */
.cta-band {
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
}
.cta-band h2 { color: var(--color-accent); }
.cta-band p { max-width: 560px; margin: 0 auto 26px; opacity: 0.95; font-size: 1.1rem; }
.cta-band .btn-row { justify-content: center; }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font-weight: 700; font-size: 0.95rem; }
.field .req { color: var(--color-primary); }
.field .hint { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field input[type="date"], .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--tint-blue);
}
.field [aria-invalid="true"] { border-color: var(--color-error) !important; }
.field-error { color: var(--color-error); font-size: 0.87rem; font-weight: 700; min-height: 0; margin: 0; }
.field-error:empty { display: none; }

fieldset.field { border: none; padding: 0; margin: 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 4px; }
.check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-weight: 600; cursor: pointer;
}
.check:has(input:checked) { border-color: var(--color-primary); background: var(--tint-blue); }
.check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 0.95rem; }
.consent input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }

/* File upload drop area */
.upload {
  position: relative;
  border: 2px dashed var(--color-soft);
  border-radius: var(--radius);
  background: var(--tint-blue);
  padding: 24px; text-align: center;
  transition: background 0.15s ease;
}
.upload.is-dragover { background: color-mix(in srgb, var(--color-soft) 50%, #fff); }
.upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.upload__icon { font-size: 2.2rem; color: var(--color-primary); display: inline-flex; }
.upload__text { font-weight: 700; margin: 4px 0 0; }
.upload__list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.upload__list li .icon { margin-right: 6px; color: var(--color-primary); }
.upload__list li { background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; font-weight: 700; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.form-note { font-size: 0.88rem; color: var(--color-text-muted); margin: 0; }

.form-success {
  text-align: center;
  padding: 40px 20px;
}
.form-success__icon {
  width: 84px; height: 84px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--tint-blue);
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
  color: var(--color-primary);
}
.form-alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 18px;
  background: #FDE8EC; color: var(--color-error); font-weight: 700;
}
.form-alert[hidden] { display: none; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.gallery-item {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 10px 10px 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gallery-item__open {
  position: relative; display: block; width: 100%;
  padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--radius);
  font: inherit; color: inherit;
}
.gallery-item__count {
  position: absolute; right: 10px; bottom: 10px;
  background: var(--color-primary); color: #fff;
  font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
/* Featured Work (top of the gallery) */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.featured-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-sm);
}
.featured-card__name {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--color-primary); color: #fff;
  font-size: 0.82rem; font-weight: 700; padding: 5px 14px; border-radius: 999px;
}
.featured-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 8px 8px; flex: 1; }
.featured-card__body h3 { margin: 0; font-size: 1.35rem; }
.featured-card__body p { margin: 0 0 8px; color: var(--color-text-muted); font-size: 0.95rem; }
.featured-card__body .btn { margin-top: auto; align-self: flex-start; }

.gallery-item__more { margin: 12px 6px 0; align-self: flex-start; }
.gallery-item__caption { padding: 10px 6px 0; margin: 0; font-weight: 700; }
.gallery-item__cat { padding: 0 6px; margin: 0; font-size: 0.82rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

.lightbox {
  border: none; padding: 0; border-radius: var(--radius-lg);
  width: min(760px, 92vw); max-height: 90vh;
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.lightbox::backdrop { background: rgba(31, 27, 46, 0.7); }
.lightbox__inner { padding: 18px; }
.lightbox__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: #fff; box-shadow: var(--shadow-sm);
  font-size: 1.4rem; cursor: pointer;
}
.lightbox__stage { position: relative; }
/* keep "Coming soon" text clear of the arrow buttons */
.lightbox__stage .ph { height: min(70vh, 640px); aspect-ratio: auto; padding: 16px 64px; }
/* show the whole photo in the slideshow (no cropping) */
.lightbox__stage .media-img {
  aspect-ratio: auto; width: 100%; height: min(70vh, 640px);
  object-fit: contain; background: var(--color-bg);
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--color-primary); background: #fff; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-sm);
}
.lightbox__nav:hover { background: var(--color-primary); color: #fff; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 6px 4px; }
.lightbox__caption { margin: 0; font-weight: 700; }
.lightbox__counter { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); }

/* Starting prices ("Starting at $55") under a heading */
.price-note { margin: 0 0 16px; color: var(--color-text-muted); }
.price-note strong { color: var(--color-secondary); font-family: var(--font-heading); font-size: 1.2rem; }
.service-card .price-note { margin: 0; }

/* Pricing guide (Custom Orders page) */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }
.price-card h3 { margin-bottom: 8px; }
.price-list { margin: 0; }
.price-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
.price-list > div:last-child { border-bottom: none; }
.price-list dt { margin: 0; }
.price-list dd { margin: 0; font-weight: 700; color: var(--color-secondary); white-space: nowrap; }

/* On-page slideshows (Custom Orders shoes & baby boxes) */
.slideshow {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border-radius: var(--radius); overflow: hidden; background: var(--tint-blue);
}
.slideshow__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.slideshow__slide.is-active { opacity: 1; visibility: visible; }
/* Smaller arrows when a slideshow sits on a shop card */
.product-card .slideshow .lightbox__nav { width: 34px; height: 34px; }
.product-card .slideshow .lightbox__nav svg { width: 16px; height: 16px; }
.product-card .slideshow__count { font-size: 0.72rem; padding: 2px 9px; right: 8px; bottom: 8px; }
/* Slideshow inside a Custom Orders card: same 4:3 shape as the other card photos */
.slideshow--card { aspect-ratio: 4 / 3; }
.slideshow--card .lightbox__nav { width: 34px; height: 34px; }
.slideshow--card .lightbox__nav svg { width: 16px; height: 16px; }
.slideshow--card .slideshow__count { font-size: 0.72rem; padding: 2px 9px; right: 8px; bottom: 8px; }
.slideshow__count {
  position: absolute; right: 12px; bottom: 12px;
  background: var(--color-primary); color: #fff;
  font-size: 0.8rem; font-weight: 600; padding: 3px 12px; border-radius: 999px;
}

/* CTA band + "Not sure what to create?" box side by side */
.cta-split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 860px) { .cta-split { grid-template-columns: 1fr; } }
.help-box {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  background: var(--tint-lime);
  border: 2px dashed color-mix(in srgb, var(--brand-lime) 70%, var(--brand-navy));
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 36px);
}
.help-box h3 { margin: 4px 0 0; font-size: 1.4rem; }
.help-box p { margin: 0 0 10px; color: var(--color-text-muted); }
.help-box__icon {
  width: 52px; height: 52px; border-radius: 16px; background: #fff;
  color: var(--color-primary); font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
/* Wide single-row version (used on the Shop page) */
.help-box--wide { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; }
.help-box--wide > div { flex: 1 1 280px; }
.help-box--wide p { margin: 0; }

/* =====================================================================
   ABOUT / CONTACT extras
   ===================================================================== */
.value-card { text-align: center; padding: 32px 24px; }
.value-card__icon {
  width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
  color: var(--color-primary);
}
.value-card p { color: var(--color-text-muted); margin: 0; }

.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.info-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 14px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; }
.info-list__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--tint-blue); color: var(--color-primary); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* =====================================================================
   FAQ (faq.html): click a question to open its answer
   ===================================================================== */
a.chip { text-decoration: none; }
.faq-group { margin-top: 48px; }
.faq-group h2 { font-size: 1.7rem; margin-bottom: 16px; }
/* Long-form text pages (Privacy & Terms) */
.prose h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.prose ul { padding-left: 1.2em; margin: 0 0 12px; }
.prose li { margin-bottom: 6px; }
.faq {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
/* the round +/- button on the right */
.faq summary::after {
  content: "+";
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tint-blue); color: var(--color-primary);
  font-size: 1.2rem; font-weight: 700; line-height: 28px; text-align: center;
}
.faq[open] summary::after { content: "−"; background: var(--color-primary); color: #fff; }
.faq summary:hover { color: var(--color-primary); }
.faq__answer { padding: 0 22px 18px; color: var(--color-text-muted); }
.faq__answer p:last-child, .faq__answer ul:last-child, .faq__answer ol:last-child { margin-bottom: 0; }
.faq__answer li { margin-bottom: 6px; }

/* =====================================================================
   CUSTOMER REVIEWS (Home page): one review shows at a time and fades
   to the next
   ===================================================================== */
.reviews { text-align: center; }
.reviews__stage { display: grid; }
.review {
  grid-area: 1 / 1;              /* all reviews stack in the same spot */
  margin: 0; padding: clamp(24px, 4vw, 40px);
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.review.is-active { opacity: 1; visibility: visible; }
.review__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.review__text { margin: 0; font-family: var(--font-heading); font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.45; color: var(--color-text); }
.review__by { display: flex; flex-direction: column; gap: 2px; font-size: 0.95rem; }
.review__item { color: var(--color-text-muted); font-size: 0.88rem; }
.reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.reviews__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-primary); background: transparent; padding: 0; cursor: pointer; }
.reviews__dot[aria-pressed="true"] { background: var(--color-primary); }

/* =====================================================================
   SOCIAL ICONS
   ===================================================================== */
.social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tint-blue); color: var(--color-primary);
  transition: transform 0.15s ease, background 0.15s ease;
}
.social a:hover { transform: translateY(-3px); background: var(--color-secondary); color: #fff; }
.social svg { width: 20px; height: 20px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 64px 0 28px; margin-top: 0; }
.site-footer a { color: var(--color-footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }
.footer-grid { display: grid; grid-template-columns: 1fr 1.7fr 1.4fr 1.1fr; gap: 36px; }
/* Footer email sign-up */
.footer-signup p { margin: 0 0 10px; font-size: 0.92rem; }
.footer-signup form { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-signup input[type="email"] {
  flex: 1 1 160px; min-width: 0; padding: 10px 14px; border-radius: 999px;
  border: 2px solid transparent; font: inherit; font-size: 0.92rem;
}
.footer-signup input[aria-invalid="true"] { border-color: var(--color-accent); }
.footer-signup .btn { background: var(--color-accent); color: var(--color-text); border-color: var(--color-accent); }
.footer-signup .footer-signup__msg { flex-basis: 100%; margin: 2px 0 0; font-size: 0.85rem; min-height: 1.2em; }
/* Announcement bar above the menu (config.js → announcement) */
.announcement { background: var(--color-primary); color: #fff; text-align: center; font-size: 0.9rem; font-weight: 600; }
.announcement p { margin: 0; padding: 8px 16px; }
.announcement a { color: var(--color-accent); text-decoration: underline; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand { color: var(--color-footer-text); margin-bottom: 12px; }
.footer-brand p { opacity: 0.8; font-size: 0.95rem; }
.site-footer h4 { font-size: 1.05rem; color: var(--color-accent); margin-bottom: 14px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
/* Explore links in two columns so the footer is shorter (fills down the first column, then the second) */
.footer-links--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 20px; }
.footer-links--2col a { white-space: nowrap; font-size: 0.95rem; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 0.95rem; }
.footer-contact li { display: flex; align-items: center; gap: 10px; }
.footer-contact .icon { color: var(--color-accent); font-size: 1.15rem; }
.site-footer .social a { background: rgba(255,255,255,0.1); color: #fff; }
.site-footer .social a:hover { background: var(--color-accent); color: var(--color-primary); }
.footer-bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: 0.88rem; opacity: 0.75;
}

/* =====================================================================
   TOAST (little pop-up message)
   ===================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 300;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--color-primary); color: #fff;
  padding: 12px 18px 12px 20px; border-radius: 24px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 14px;
  font-weight: 700; max-width: calc(100vw - 32px);
  /* size to the message, not to the space right of center (which squeezed it into a circle on phones) */
  width: max-content;
  transition: all 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--color-accent); white-space: nowrap; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Home page Instagram photo grid */
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.insta-grid__item { display: block; border-radius: var(--radius); overflow: hidden; }
.insta-grid__item img { transition: transform 0.3s ease; }
.insta-grid__item:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* Shop page: "Size help" link under the filters, and the small note above the footer */
.shop-size-help { margin: -6px 0 18px; text-align: right; font-size: 0.9rem; font-weight: 600; }
.shop-fine-print { padding: 22px 0; text-align: center; }
.shop-fine-print p { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }