/* ============================================================
   Toying Idea — brand styles
   Palette from TI-brand-palette.pdf:
   Build Yellow #F0D860 · Aqua Teal #60C0C0 · Brick Orange #F07848
   Deep Orange #D86018 · Blueprint Blue #4890A8 · Maker Brown #783000
   Golden Amber #F0A818 · Fresh Green #108903
   ============================================================ */
:root{
  --yellow:#F0D860;
  --teal:#60C0C0;
  --orange:#F07848;
  --orange-deep:#D86018;
  --blue:#4890A8;
  --brown:#783000;
  --amber:#F0A818;
  --green:#108903;
  --ink:#2B2018;
  --muted:#7A6A5C;
  --paper:#FBF6EC;
  --card:#FFFFFF;
  --line:#EADFCE;
  --radius:20px;
  --shadow:0 6px 20px rgba(120,48,0,.10);
  --shadow-lift:0 12px 28px rgba(120,48,0,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;font-size:16px}
h1,h2,h3,h4,.display{font-family:'Fredoka',sans-serif;line-height:1.15;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin:0 auto}

/* brick-stud dotted texture used on hero & banners */
.studs{background-image:radial-gradient(rgba(120,48,0,.08) 2px,transparent 2.5px);background-size:30px 30px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Fredoka',sans-serif;
  font-weight:600;font-size:1rem;padding:13px 28px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(1px)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-deep)}
.btn-teal{background:var(--teal);color:#fff}
.btn-yellow{background:var(--yellow);color:var(--brown)}
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-sm{padding:9px 18px;font-size:.9rem}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- nav ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(251,246,236,.92);backdrop-filter:blur(8px);
  border-bottom:2px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.brand b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:.3px}
.brand b em{font-style:normal;color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links>a{font-weight:500;font-size:.95rem;color:var(--muted);padding-bottom:2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav-links>a:hover,.nav-links>a.active{color:var(--ink);border-color:var(--teal)}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;padding:9px 20px;border-radius:999px;
  transition:all .15s}
.cart-btn:hover{background:#000}
.cart-count{background:var(--yellow);color:var(--brown);font-size:.8rem;min-width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0 6px;font-weight:700}
.mobile-menu-btn{display:none;font-size:1.8rem;cursor:pointer;color:var(--ink);user-select:none;padding:0 8px}
.mobile-cart-btn{display:none}
@media(max-width:740px){
  .mobile-menu-btn{display:block}
  .mobile-cart-btn{display:inline-flex}
  .desktop-cart-btn{display:none !important}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(251,246,236,.96);backdrop-filter:blur(12px);flex-direction:column;padding:10px 5% 30px;box-shadow:var(--shadow-lift);border-bottom:2px solid var(--line);align-items:flex-start}
  .nav-links.show{display:flex}
  .nav-links>a{font-size:1.15rem;padding:14px 0;width:100%;border-bottom:1px solid rgba(0,0,0,.06)}
  .nav-links>a:last-child{border-bottom:none}
  .nav-links .cart-btn{margin-top:16px;align-self:flex-start;display:inline-flex}
}


/* ── Language toggle + skip link ── */
.lang-toggle{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.lang-toggle a{padding:4px 10px;font-size:.82rem;font-weight:600;text-decoration:none;color:var(--muted)}
.lang-toggle a.on{background:var(--orange);color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* ── Accessibility: visible keyboard focus everywhere ── */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.btn:focus-visible{outline-offset:3px}
/* Mouse users don't get the ring; keyboard users always do. */
:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}