/* ==========================================================================
   Little Desk — design system
   Derived from the six artboard mockups (Home, Shop, Product, Story,
   Contact, Mobile). Tokens below carry the exact values from those files.
   ========================================================================== */

:root{
  --cream:#FFF6E9;
  --navy:#16224A;
  --navy-soft:#2B3A66;
  --navy-mute:#5A6789;
  --periwinkle:#CFD6E8;
  --pink:#C9325A;
  --pink-dark:#96203F;

  --accent:#FF9F1C;
  --accent-shadow:#B86E00;

  --yellow-blob:#FFE3A8;
  --green-blob:#CFEBDA;
  --peach:#FFD08A;
  --mint:#A8DCC0;
  --sky:#BBD9F2;
  --peach-light:#FFE8D6;
  --mint-light:#DFF1E6;
  --sky-light:#DCEAF8;
  --pink-light:#F6DCE4;
  --green-dark:#1C8757;
  --blue-dark:#1E6FA8;
  --brown:#6B4B10;
  --maroon:#8A3352;
  --green-darker:#1C6A4B;

  --radius-lg:34px;
  --radius-md:26px;
  --radius-sm:18px;
  --border:#16224A;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  font-family:'Nunito','Trebuchet MS',sans-serif;
  color:var(--navy);
  overflow-x:hidden;
}
h1,h2,h3,.display{ font-family:'Fredoka',sans-serif; margin:0; }
a{ color:var(--pink); text-decoration:none; }
a:hover{ color:var(--pink-dark); }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
ul{ list-style:none; margin:0; padding:0; }

.wrap{ max-width:1440px; margin:0 auto; padding:0 72px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:60px; padding:0 34px; border-radius:30px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px;
  border:3px solid var(--navy); cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{ transform:translate(3px,4px); box-shadow:none !important; }
.btn-accent{
  background:var(--accent); color:var(--navy);
  box-shadow:5px 7px 0 var(--navy);
}
.btn-accent:hover{ color:var(--navy); filter:brightness(1.04); }
.btn-dark{
  background:var(--navy); color:var(--cream); border-color:var(--navy);
  box-shadow:0 6px 0 #0B1230;
}
.btn-dark:hover{ color:var(--cream); }
.btn-outline{
  background:#FFFFFF; color:var(--navy);
}
.btn-outline:hover{ color:var(--navy); background:#FFFBF2; }
.btn-sm{ height:48px; padding:0 22px; font-size:16px; border-radius:24px; }
.btn-block{ width:100%; }

/* ---------- badges / pills ---------- */
.pill{
  display:inline-flex; align-self:flex-start; padding:9px 18px;
  border-radius:20px; background:#fff; border:2.5px solid var(--navy);
  font-weight:800; font-size:14px; letter-spacing:.8px; text-transform:uppercase;
  box-shadow:3px 4px 0 var(--navy);
}
.tag{
  position:absolute; padding:14px 20px; border-radius:22px; background:#fff;
  border:3px solid var(--navy); font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:17px; box-shadow:4px 6px 0 var(--navy); white-space:nowrap;
}

/* ---------- header ---------- */
.site-header{
  height:96px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:3px solid rgba(22,34,74,.08); background:var(--cream);
  position:sticky; top:0; z-index:40;
}
.brand{ display:flex; align-items:center; gap:14px; color:var(--navy); }
.brand-mark{
  width:46px; height:46px; border-radius:16px; background:var(--accent);
  border:3px solid var(--navy); box-shadow:4px 5px 0 var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-name{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:25px; letter-spacing:-.3px; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{ font-weight:700; font-size:17px; color:var(--navy); }
.main-nav a.active{ font-weight:800; color:var(--pink); }
.main-nav .cart-btn{
  display:flex; align-items:center; gap:8px; height:52px; padding:0 26px;
  border-radius:26px; background:var(--navy); color:var(--cream);
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px; border:none; cursor:pointer;
}

.menu-toggle{ display:none; }

/* header blended transparently over a full-bleed hero; regains a solid
   background once the page scrolls past it (see .scrolled toggle in main.js) */
.transparent-header{
  position:fixed; top:0; left:0; right:0; width:100%;
  background:transparent; border-bottom-color:transparent; z-index:50;
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.transparent-header.scrolled{
  background:var(--cream); border-bottom-color:rgba(22,34,74,.08);
  box-shadow:0 4px 16px rgba(22,34,74,.08);
}

/* ---------- footer ---------- */
.site-footer{
  margin-top:auto; padding:44px 0; border-top:3px solid rgba(22,34,74,.12);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.site-footer .brand-name{ font-size:20px; }
.footer-nav{ display:flex; gap:28px; font-size:16px; font-weight:600; flex-wrap:wrap; }
.footer-nav a{ color:var(--navy-soft); }
.footer-meta{ font-size:15px; color:var(--navy-mute); }

/* ---------- decorative blobs ---------- */
.blob{ position:absolute; border-radius:50%; z-index:0; pointer-events:none; }

/* ---------- 3D booklet stack ---------- */
.stack{ position:relative; perspective:1500px; }
.stack img{
  position:absolute; object-fit:cover; border-radius:16px; border:5px solid #fff;
  box-shadow:0 30px 55px rgba(22,34,74,.22);
}

/* ---------- cursor-tracking character hero (full-bleed) ---------- */
.hero-full{
  position:relative; width:100%; height:clamp(360px, 68vh, 780px);
  overflow:hidden; background:linear-gradient(135deg,#FFF6E9,#DCEAF8);
}
.hero-full canvas{ display:block; width:100%; height:100%; cursor:pointer; }
.character-loading{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; background:linear-gradient(135deg,#FFF6E9,#DCEAF8);
  transition:opacity .35s ease; padding:20px; text-align:center;
}
.character-loading.hidden{ opacity:0; pointer-events:none; }
.character-loading .spinner{
  width:48px; height:48px; border-radius:16px; background:var(--accent); border:3px solid var(--navy);
  box-shadow:4px 5px 0 var(--navy); display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka',sans-serif; font-weight:700; color:var(--navy); animation:char-bob 1s ease-in-out infinite;
}
@keyframes char-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.character-loading p{ margin:0; font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; color:var(--navy-soft); }
.character-loading .bar{ width:180px; height:8px; border-radius:5px; background:#fff; border:2px solid var(--navy); overflow:hidden; }
.character-loading .bar-fill{ height:100%; background:var(--accent); width:0%; transition:width .15s ease; }

@media (max-width: 980px){
  .hero-full{ height:clamp(300px, 52vh, 560px); }
}
@media (max-width: 640px){
  .hero-full{ height:clamp(260px, 44vh, 440px); }
}

/* ---------- sections ---------- */
section{ position:relative; }
.section-pad{ padding:96px 0 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.section-head h2{ font-weight:700; font-size:50px; letter-spacing:-.8px; }
.section-head p{ margin-top:12px; font-size:19px; color:var(--navy-soft); max-width:640px; }
.see-all{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px; color:var(--pink); }

/* ---------- cards ---------- */
.card{
  background:#fff; border:4px solid var(--navy); border-radius:28px; padding:32px;
  box-shadow:14px 18px 0 rgba(22,34,74,.12); display:flex; flex-direction:column; gap:18px;
}
.card-icon{
  width:64px; height:64px; border-radius:20px; border:3px solid var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.card h3{ font-weight:600; font-size:27px; }
.card p{ margin:0; font-size:17px; line-height:1.55; color:var(--navy-soft); }
.card .price{ font-weight:800; font-size:17px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }

/* ---------- trust strip ---------- */
.trust-strip{
  height:104px; background:var(--navy); display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:0 72px; flex-wrap:wrap;
}
.trust-strip span.item{ color:var(--cream); font-family:'Fredoka',sans-serif; font-size:20px; }
.trust-strip .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* ---------- CTA band ---------- */
.cta-band{
  margin:0 72px; padding:56px 60px; background:var(--navy); border-radius:36px;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band h2{ color:var(--cream); font-size:44px; line-height:1.1; }
.cta-band p{ margin:14px 0 0; color:var(--periwinkle); font-size:19px; }
.cta-band .side{ display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.cta-band .fine{ font-size:15px; color:var(--periwinkle); }

/* ---------- product grid card (shop) ---------- */
.product-card{
  background:#fff; border:3.5px solid var(--navy); border-radius:26px; overflow:hidden;
  box-shadow:10px 13px 0 rgba(22,34,74,.11); display:flex; flex-direction:column;
}
.product-card .thumb{
  height:240px; display:flex; align-items:center; justify-content:center;
  border-bottom:3.5px solid var(--navy); overflow:hidden;
}
.product-card .thumb img{
  width:150px; height:208px; object-fit:cover; border-radius:10px; border:4px solid #fff;
  box-shadow:0 16px 28px rgba(22,34,74,.26);
}
.product-card .body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.product-card h3{ font-weight:600; font-size:23px; }
.product-card p{ margin:0; font-size:16px; color:var(--navy-soft); flex-grow:1; }
.product-card .row{ display:flex; align-items:center; justify-content:space-between; padding-top:8px; }
.product-card .row .price{ font-weight:800; font-size:20px; }
.add-btn{
  height:46px; padding:0 22px; border-radius:23px; border:3px solid var(--navy);
  background:var(--accent); color:var(--navy); font-family:'Fredoka',sans-serif;
  font-weight:600; font-size:16px; cursor:pointer;
}
.add-btn.added{ background:var(--green-dark); color:#fff; }

/* ---------- filter chips ---------- */
.filters{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{
  height:48px; padding:0 24px; border-radius:24px; border:3px solid var(--navy);
  background:#fff; color:var(--navy); font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:16px; cursor:pointer;
}
.chip.active{ background:var(--navy); color:var(--cream); }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:800; font-size:14px; letter-spacing:.6px; text-transform:uppercase; color:var(--navy-mute); }
.field input, .field select, .field textarea{
  height:58px; border-radius:18px; border:3px solid var(--navy); background:var(--cream);
  font-family:'Nunito',sans-serif; font-size:17px; padding:0 18px; color:var(--navy);
}
.field textarea{ height:auto; padding:16px 18px; resize:vertical; font-family:'Nunito',sans-serif; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:3px solid var(--accent); outline-offset:1px; }
.field.error input, .field.error select, .field.error textarea{ border-color:var(--pink); }
.field .err-msg{ display:none; font-size:14px; color:var(--pink); font-weight:700; }
.field.error .err-msg{ display:block; }
.row-2{ display:flex; gap:18px; }
.row-2 > .field{ flex-grow:1; }
.checkbox-row{ display:flex; align-items:center; gap:12px; }
.checkbox-row input{ width:24px; height:24px; accent-color:var(--navy); }

/* ---------- cart drawer ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(22,34,74,.4); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:440px; max-width:92vw;
  background:var(--cream); border-left:4px solid var(--navy); z-index:61;
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ padding:26px 28px; border-bottom:3px solid rgba(22,34,74,.12); display:flex; align-items:center; justify-content:space-between; }
.cart-head h2{ font-size:26px; }
.cart-close{ width:44px; height:44px; border-radius:14px; border:2.5px solid var(--navy); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cart-items{ flex-grow:1; overflow-y:auto; padding:20px 28px; display:flex; flex-direction:column; gap:16px; }
.cart-item{ display:flex; gap:14px; align-items:center; background:#fff; border:3px solid var(--navy); border-radius:18px; padding:12px; }
.cart-item img{ width:56px; height:56px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.cart-item .info{ flex-grow:1; display:flex; flex-direction:column; gap:2px; }
.cart-item .info strong{ font-family:'Fredoka',sans-serif; font-size:16px; }
.cart-item .info span{ font-size:14px; color:var(--navy-mute); }
.qty-ctrl{ display:flex; align-items:center; gap:8px; }
.qty-ctrl button{ width:28px; height:28px; border-radius:8px; border:2px solid var(--navy); background:#fff; cursor:pointer; font-weight:800; }
.remove-item{ background:none; border:none; color:var(--pink); font-weight:700; cursor:pointer; font-size:13px; }
.cart-empty{ text-align:center; color:var(--navy-mute); padding:60px 20px; font-size:16px; }
.cart-foot{ padding:24px 28px; border-top:3px solid rgba(22,34,74,.12); display:flex; flex-direction:column; gap:14px; }
.cart-foot .subtotal{ display:flex; justify-content:space-between; font-family:'Fredoka',sans-serif; font-weight:600; font-size:20px; }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%,20px);
  background:var(--navy); color:var(--cream); padding:16px 26px; border-radius:26px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px; z-index:70;
  opacity:0; pointer-events:none; transition:all .25s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- magic-wand cursor + glitter (mouse devices only) ---------- */
@media (pointer: fine){
  .magic-cursor-active, .magic-cursor-active *{ cursor:none !important; }
}
.magic-wand-cursor{
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  font-size:30px; line-height:1; transform:translate3d(-100px,-100px,0) rotate(-35deg);
  transform-origin:20% 85%; opacity:0; transition:opacity .15s ease;
  filter:drop-shadow(0 3px 5px rgba(22,34,74,.35));
}
.magic-wand-cursor.visible{ opacity:1; }

.glitter-particle{
  position:fixed; z-index:9999; pointer-events:none; will-change:transform, opacity;
  animation-name:glitter-pop; animation-timing-function:ease-out; animation-fill-mode:forwards;
}
@keyframes glitter-pop{
  0%{ opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
  100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(.25) rotate(var(--rot)); }
}

/* ---------- mobile ---------- */
@media (max-width: 980px){
  .wrap{ padding:0 24px; }
  .site-header{ padding:0; }
  .main-nav{ position:fixed; top:0; right:0; height:100%; width:82vw; max-width:360px;
    background:var(--cream); border-left:4px solid var(--navy); flex-direction:column;
    align-items:flex-start; padding:96px 28px 28px; gap:26px; transform:translateX(100%);
    transition:transform .25s ease; z-index:55; }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ font-size:20px; }
  .main-nav .cart-btn{ width:100%; justify-content:center; }
  .menu-toggle{
    display:flex; width:46px; height:46px; border-radius:14px; border:2.5px solid var(--navy);
    background:#fff; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .nav-overlay{ position:fixed; inset:0; background:rgba(22,34,74,.4); z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .nav-overlay.open{ opacity:1; pointer-events:auto; }

  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr 1fr; gap:20px; }
  .hero-flex, .split, .split-rev{ flex-direction:column !important; }
  h1{ font-size:38px !important; letter-spacing:-.8px !important; }
  .section-head h2, .cta-band h2{ font-size:32px !important; }
  .cta-band{ margin:0 24px; padding:36px 28px; }
  .cta-band .side{ align-items:flex-start; width:100%; }
  .cta-band .btn{ width:100%; }
  .trust-strip{ flex-direction:column; height:auto; padding:20px 24px; align-items:flex-start; gap:10px; }
  .trust-strip .dot{ display:none; }
}

@media (max-width: 640px){
  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; }
  .row-2{ flex-direction:column; }
  .cart-drawer{ width:100vw; }
}