/* ======================= Design Tokens ======================= */
:root{
  /* Pastel core (tuned to typical soft logo palettes) */
  --cloud:#f6f7fb;     /* page bg */
  --ink:#0e1738;       /* main text on light */
  --muted:#5c668a;     /* secondary text */

  --pink:#ff8fce;      /* brand pink */
  --aqua:#6bb9ff;      /* brand aqua / hero blue */
  --mint:#77d68d;      /* support green */
  --sun:#ffd95e;       /* star/sun accent */

  /* Surfaces */
  --surface:#ffffff;
  --card:#ffe6f0;      /* soft pink card */
  --card-2:#fff;       /* white card */

  /* Header / footer */
  --header-bg:var(--pink);
  --footer-bg:#befdff;

  /* Effects */
  --ring: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
  --shadow-1:0 4px 12px rgba(9,16,40,.08);
  --shadow-2:0 10px 28px rgba(9,16,40,.12);

  /* Typography */
  --font: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

  /* Radii / spacing */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;

  --gap:24px;

/* ...your existing tokens... */
  --accent: var(--pink); /* alias so all var(--accent) usages work */
}


[data-theme="dark"]{
  --cloud:  #182652;
  --ink:    #f5f5f5;
  --muted:  #cfd4ee;

  /* derived from --cloud, lighter steps */
  --surface: color-mix(in oklab, var(--cloud) 86%, white 14%);
  --card:    color-mix(in oklab, var(--cloud) 80%, white 20%);
  --card-2:  color-mix(in oklab, var(--cloud) 72%, white 28%);

  /* subtle hairline/border + ring */
  --border:  color-mix(in oklab, var(--surface) 88%, white 12%);
  --ring:    0 0 0 3px color-mix(in oklab, #6bb9ff 30%, transparent);

  /* these belong here too */
  --header-bg:#c76ba3;     /* softened pink in dark */

  --footer-bg: #0f2d54;  /* dark mode footer (navy) */
  --footer-fg: #eaf4ff;  /* soft white text */


  --shadow-1:none;
  --shadow-2:none;
}


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

html,body{ height:100%; margin:0; }

html{ scroll-behavior:smooth; }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--cloud);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.6;
}

/* Helpers */
.wrap{ width:min(1100px, 100%); margin-inline:auto; padding:24px; }
.center{ text-align:center; }

/* Headings keep a brand accent */
h1,h2,h3{ color:var(--aqua); margin:0 0 .4em; }

/* ======================= Header ======================= */
.site-header{
  position:relative;
  z-index:100;
  background:var(--header-bg);
  color:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  border-bottom:1px solid color-mix(in oklab, var(--header-bg), black 16%);
}
.site-bar{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  color:#fff; text-decoration:none; font-weight:800;
}
.logo{ height:44px; width:auto; display:block; }
.wordmark{ font-size:clamp(18px,2.2vw,24px); color:#fff; }

/* Nav */
.main-nav{
  margin-left:auto;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.main-nav a{
  color:#fff; text-decoration:none; font-weight:700; opacity:.95;
}
.main-nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:2px; }

/* Dropdown */
.dropdown{ position:relative; }
.has-caret{ padding-right:6px; border-radius:var(--r-sm) var(--r-sm) 0 0; }
.dropdown-content{
  display:none;
  position:absolute; top:100%; left:0; min-width:220px;
  background:#ffe6f0; color:var(--ink);
  border:1px solid color-mix(in oklab, var(--header-bg), black 16%);
  border-top:none; border-radius:0 0 var(--r-md) var(--r-md);
  padding:8px 0; box-shadow: var(--shadow-2); z-index:200;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{ display:block; }
.dropdown-content a{
  display:block; padding:10px 14px; color:color-mix(in oklab, var(--header-bg), black 20%);
  font-weight:700; text-decoration:none; white-space:nowrap;
}
.dropdown-content a:hover{
  background: color-mix(in oklab, var(--header-bg), black 12%);
  color:#fff;
}

/* Theme toggle */
.theme-toggle{
  background:transparent; border:0; color:#fff; cursor:pointer; font-size:1.25rem;
  padding:6px 8px; border-radius:50%;
  transition: transform .25s ease;
}
.theme-toggle:hover{ transform: rotate(20deg) scale(1.08); }
.theme-toggle:focus-visible{ outline:var(--ring); background:rgba(255,255,255,.14); }

/* ======================= Sections ======================= */
main{ flex:1; }

section{ padding:56px 0; background:var(--cloud); }
section.alt{ background:var(--surface); }

.intro{
  background:var(--surface); color:var(--ink);
  border-radius:var(--r-lg);
  box-shadow: var(--shadow-1);
  margin:40px auto; padding:40px 24px;
  width:min(900px, 100%);
  text-align:center;
}
.intro p{ margin:.4rem 0; color:var(--muted); }

/* ======================= Buttons / pills ======================= */
.button, .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 18px; font-weight:800;
  border-radius:14px; border:2px solid rgba(0,0,0,.05);
  background:var(--aqua); color:#001225; text-decoration:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover, .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.25); }
.btn.outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:var(--sun); color:#332200; font-weight:800; }

/* ======================= Cards & grids ======================= */
.grid{ display:grid; gap:24px; }
@media(min-width:900px){
  .grid.two{ grid-template-columns: 1.2fr 1fr; }
  .grid.three{ grid-template-columns: repeat(3,1fr); }
  .grid.four{ grid-template-columns: repeat(4,1fr); }
}
.card{
  background:var(--card-2);
  border:1px solid #e9ecf7;
  border-radius:18px;
  padding:20px;
  box-shadow: var(--shadow-1);
}

/* ======================= Package / character cards ======================= */
.packages, .characters{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
  padding:40px 24px; width:min(1200px, 100%); margin:0 auto;
}
.package-card, .character-card{
  display:block; width:280px; text-decoration:none; color:inherit;
  background:var(--card-2); border-radius:var(--r-lg); padding:20px;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.package-card:hover, .character-card:hover{
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-2);
  background: color-mix(in oklab, var(--card-2), black 4%);
}
.character-card img{
  width:100%; aspect-ratio: 4/3; object-fit:cover;
  border-radius:var(--r-md); margin-bottom:12px;
}

/* Centered card grid for package lists */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 40px 24px;
  place-content: center;   /* centers rows when there’s extra space */
}

/* Let cards fill their grid column (no fixed width) */
.package-card, .character-card {
  width: auto;             /* override any fixed width */
  max-width: 420px;        /* prevents overly wide cards on huge screens */
}


/* ======================= Reusable “Hero” with LEGO bricks ======================= */
.hero{
  position:relative; overflow:hidden; color:#fff; background:var(--aqua);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.hero .wrap{ padding:64px 24px 92px; }
.hero h1, .hero .lead{ color:#fff; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

/* Bricks (can be shown on any page for continuity) */
.bricks{
  position:absolute; inset:auto 0 -26px 0; height:120px;
  display:flex; gap:12px; justify-content:center;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.2));
}
.brick{ width:110px; height:42px; border-radius:8px; position:relative; }
.brick:before, .brick:after{
  content:""; position:absolute; top:-10px; width:22px; height:10px; border-radius:6px;
}
.brick:before{ left:14px; } .brick:after{ right:14px; }

.b1{ background:#ffcf00; } .b1:before,.b1:after{ background:#ffd84a; }
.b2{ background:#ff5a4f; } .b2:before,.b2:after{ background:#ff766c; }
.b3{ background:#2eb1ff; } .b3:before,.b3:after{ background:#4dc1ff; }
.b4{ background:#75d36c; } .b4:before,.b4:after{ background:#8ae18c; }

/* ======================= Footer ======================= */
footer{
  background:var(--footer-bg); color:var(--footer-fg); text-align:center; padding:20px;
  font-size:.95rem;
}
footer a{ color:var(--footer-fg); }

/* ======================= Forms (global look) ======================= */
label{ font-weight:700; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], textarea, select{
  width:100%; padding:11px 12px; border-radius:10px;
  border:1px solid rgba(0,0,0,.12); background:var(--surface); color:var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--aqua); box-shadow: var(--ring); }

/* ======================= Utilities ======================= */
.note{ font-size:.95rem; color:var(--muted); }
.muted{ color:var(--muted); }

/* ======================= Responsive ======================= */
@media (max-width:768px){
  .package-card, .character-card{ width:100%; max-width:520px; }
}

/* ===== Page title bar & breadcrumb ===== */
.page-breadcrumb {
  background: color-mix(in srgb, var(--accent) 12%, white);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, white);
}
.page-breadcrumb .wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  font-size: 0.95rem;
}
.page-breadcrumb .crumb {
  color: color-mix(in srgb, var(--text) 80%, var(--accent) 20%);
  text-decoration: none;
}
.page-breadcrumb .crumb:hover { text-decoration: underline; }
.page-breadcrumb .sep { opacity: .65; }
.page-breadcrumb .here { font-weight: 700; color: var(--text); }

.page-titlebar {
  background: var(--bg);
}
.page-titlebar .wrap {
  padding: 16px 24px;
}
.page-title {
  margin: 0;
  line-height: 1.25;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  color: var(--accent);
}

/* Tighten spacing if a hero follows immediately */
.page-titlebar + .hero { margin-top: 0; }

/* Unify button bases: let .btn behave like .button */
.btn,
.button {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform .2s ease, box-shadow .2s ease;
}

/* Default hover (keeps existing .button:hover colour) */
.btn:hover,
.button:hover {
  background: #e04f7a;
}

/* Outline variant (shared) */
.btn.outline,
.button.outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

/* Signature pink variant — works for .btn and .button */
.btn[data-variant="signature"],
.button[data-variant="signature"] {
  background: var(--accent) !important;   /* beat outline */
  border-color: transparent !important;
  color: #001225 !important;              /* good contrast on pastel */
}

/* Signature hover */
.btn[data-variant="signature"]:hover,
.button[data-variant="signature"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}


/* Normalize the IG icon so it aligns perfectly with your header items */
.ig-link{
  display:inline-flex;            /* become a box, not baseline text */
  align-items:center;             /* vertical center */
  justify-content:center;         /* horizontal center */
  width:28px; height:28px;        /* match your header height */
  line-height:0;                  /* kill baseline spacing */
  vertical-align:middle;          /* align with neighboring inline elements */
  color:#1A2A57;                /* Our brand navy */
}
.ig-link svg{
  display:block;                  /* remove descender gap from inline svg */
  width:18px; height:18px;        /* size of the glyph */
}

.ig-link svg{ width:18px; height:18px; display:block; fill:currentColor; }
.ig-link:hover{ opacity:.9; }

/* Make the brand hero sit closer to what follows */
.brand-hero { padding-bottom: 0px; }            /* was 56px */
.brand-hero .brand-mark { margin: 0px auto 4px; } /* minor trim under logo */

/* Or compress the *next* section's top padding only when it follows the brand hero */
.brand-hero + section,
.brand-hero + .hero {
  padding-top: 28px; /* was 56px */
}

.brand-hero {
  padding: 20px 0; /* reduce section top/bottom padding */
}
.brand-hero .wrap {
  padding: 0 24px; /* keep horizontal, remove vertical */
}
.brand-hero .brand-mark {
  margin: 8px auto 4px; /* tighten image margins */
  max-width: 280px;     /* shrink image size */
}

.card.featured {
  width: min(720px, 100%);
  margin-inline: auto;
  justify-self: center;   /* grid safety */
  align-self: center;     /* flex/grid safety */
  flex: 0 1 auto;         /* flex safety */
  text-align: center;     /* center-aligns all text inside */
}

/* Center the list properly (removes default bullets/padding) */
.card.featured ul {
  display: inline-block;   /* centers the list as a block */
  text-align: left;        /* keeps bullets + text aligned */
  margin: 0 auto;          /* horizontal centering */
  padding-left: 1.25rem;   /* make sure bullets show properly */
  list-style: disc;        /* restore normal bullets */
}


/* Center CTA button row */
.card.featured .cta-row {
  display: flex;
  justify-content: center;
}

/* Only for this featured card */
.card.featured .price {
  margin: 1rem 0 1.5rem;   /* adds space above and below price */
}

.card.featured .note {
  margin-top: .1rem;     /* pushes list away from price */
}

.card.featured .note li {
  margin-bottom: .5rem;    /* extra breathing room between bullets */
}



.price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink, #0e1738); /* fallback dark text */
}

.price .old-price {
  text-decoration: line-through;
  color: #999999;
  margin-right: 0.4em;
}

.price .separator {
  margin-right: 0.4em;
  color: #666666;
}

.price .new-price {
  color: #e53935; /* professional sale red */
  font-weight: 700;
}

/* Dark mode override */
[data-theme="dark"] .price .new-price {
  color: #ff7676; /* softer red for dark backgrounds */
  font-weight: 700; /* keep emphasis */
}


/* ======================= % discount banner position ======================= */

.sale-banner { 
  z-index: 500;   /* lower than your header */
}
.site-header {
  position: relative;
  z-index: 1000;  /* higher so it sits above */
}


/* ===== Breadcrumb & Titlebar: make them theme-aware ===== */

/* Base (light) uses your tokens, not hard-coded colors */
.page-breadcrumb,
.page-titlebar {
  background: var(--surface);        /* or var(--cloud) if you prefer lighter */
  color: var(--ink);
}

.page-breadcrumb .wrap,
.page-titlebar .wrap {
  color: inherit;
}

.page-breadcrumb .crumb,
.page-breadcrumb .here,
.page-breadcrumb .sep {
  color: var(--muted);
}

.page-breadcrumb a.crumb {
  color: inherit;                    /* avoid default link blue */
  text-decoration: none;
}
.page-breadcrumb a.crumb:hover { text-decoration: underline; }

/* A soft divider that adapts */
.page-breadcrumb {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ===== Dark mode overrides ===== */
/* Match whatever your toggle sets: data-theme="dark" or .dark on <html> */
html[data-theme="dark"] .page-breadcrumb,
html[data-theme="dark"] .page-titlebar {
  background: var(--surface);        /* stays on the dark surface */
  color: var(--ink);                 /* your light text token in dark mode */
}

html[data-theme="dark"] .page-breadcrumb .crumb,
html[data-theme="dark"] .page-breadcrumb .here,
html[data-theme="dark"] .page-breadcrumb .sep {
  color: var(--muted);
}

html[data-theme="dark"] .page-breadcrumb {
  border-bottom-color: color-mix(in srgb, var(--ink) 28%, transparent);
}