/* ============================================================
   Toys & Gifts — theme layer.
   Loaded LAST on every page. Re-skins the shared storefront
   (style.css, refinements.css, shop.css, product.css …) with the
   toy-shop look: ivory ground, coral actions, deep ink text,
   mint and butter accents, rounded frames. All DOM hooks and
   layouts come from the base files; this file only restyles.
   ============================================================ */
:root {
  --ivory:#fff8ef;
  --ivory-deep:#fbeedd;
  --ink:#2a2233;
  --ink-deep:#2a2233;
  --ink-soft:#5e5563;
  --coral:#e8735a;
  --coral-strong:#c24a33;
  --coral-deep:#a83d29;
  --coral-soft:#fde3d9;
  --mint:#dff0e6;
  --mint-deep:#6fae8e;
  --butter:#f9e3a3;
  --butter-deep:#e0b53f;
  --hairline:#f0e2cf;
  --muted:#5e5563;
  --muted-warm:#6f6674;
  --panel:#fffaf3;
  --serif:'Fredoka','DM Sans',system-ui,sans-serif;
  --radius:18px;
  /* Base files use "gold" for the accent; map it onto coral. */
  --gold:var(--coral-strong);
  --gold-deep:var(--coral-deep);
  --gold-soft:var(--coral-soft);
  --shadow-sm:0 1px 2px #2a22330a,0 4px 12px #2a22330d;
  --shadow-md:0 2px 6px #2a22330f,0 14px 34px -8px #2a22331f;
  --shadow-lift:0 1px 2px #2a223308,0 18px 44px -14px #2a223326;
  color:var(--ink);
  background:var(--ivory);
}

body {
  background:var(--ivory);
  color:var(--ink);
}

::selection {
  background:var(--butter);
  color:var(--ink);
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--coral-strong);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- Type: rounded, friendly headings ---------- */
h1,h2,
.hero h1,.gift-copy h2,.newsletter h2,.journal-intro h2 {
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}

h3,h4 { color:var(--ink); }

.eyebrow {
  color:var(--coral-deep);
  font-weight:700;
  letter-spacing:.2em;
}

.eyebrow:before { background:var(--coral) !important; }

/* ---------- Buttons ---------- */
.button {
  border:1px solid var(--coral-strong);
  border-radius:999px;
  background:var(--coral-strong);
  color:#fff;
  font-weight:600;
  box-shadow:0 6px 16px -8px #c24a3399;
}

.button:hover {
  background:var(--coral-deep);
  border-color:var(--coral-deep);
  box-shadow:0 10px 22px -8px #a83d2999;
}

.button.ghost {
  background:#fff;
  color:var(--ink);
  border-color:var(--ink);
  box-shadow:none;
}

.button.ghost:hover {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.newsletter .button { border-radius:0 999px 999px 0; }
.newsletter input { border-radius:999px 0 0 999px; border-color:#ead8c3; }

.text-link:hover { color:var(--coral-deep); }

/* ---------- Announcement + header ---------- */
.announcement { background:var(--ink); color:#fff; }
.announcement a { color:#fff; }

.site-header { background:var(--ivory); }
.site-header.is-stuck { background:var(--ivory); }

.brand { gap:.7rem; }

.brand-symbol {
  display:grid;
  place-items:center;
  width:3.3rem;
  height:3.3rem;
  border-radius:16px;
  background:var(--mint);
}

.brand-symbol svg { width:2.35rem; height:2.35rem; display:block; }

.brand-name {
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
}

.brand-name em {
  font-style:normal;
  color:var(--coral-strong);
}

.brand-tagline {
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--ink-soft);
}

.desktop-nav a:hover:after,.desktop-nav .active:after {
  height:3px;
  border-radius:3px;
  background:var(--coral);
}

.nav-dropdown-menu { border-radius:14px; }
.nav-dropdown-menu a:hover { color:var(--coral-deep); }

.cart-count { background:var(--coral-strong); }

/* ---------- Panels: softer, rounder ---------- */
.panel { border-radius:var(--radius); }

/* ---------- Hero ---------- */
.hero { background:#f7ecdd; overflow:hidden; }

.hero:after {
  background:linear-gradient(90deg,#fbf1e4 0%,#fbf1e4ee 24%,#fbf1e499 40%,transparent 58%);
}

.hero-image { object-position:62% 60%; }

.hero h1 { font-size:4.6rem; line-height:1; }

.hero-description { color:var(--ink-soft); }

/* The toy photograph has no clear space for the script note; the headline
   carries the message, so the note stays in the markup but is not shown. */
.hero-note { display:none; }

.round-button { background:#ffffffcc; color:var(--ink); }

/* ---------- Benefits ---------- */
.benefits { background:var(--mint); }
.benefit { border-color:#bfdccb; }
.benefit>.ph { color:var(--coral-strong); }
.benefit p { color:var(--ink-soft); }

/* ---------- Category circles ---------- */
.moods { background:var(--panel); }

.mood-photo {
  background-color:#fbf6ee;
  background-size:cover;
  border:6px solid #fff;
  box-shadow:0 0 0 1px var(--hairline),var(--shadow-sm);
}
.mood-photo-5 { background-position:60% 50%; }
.mood-card:nth-child(6n+1) .mood-photo { background-color:var(--coral-soft); }
.mood-card:hover .mood-photo { box-shadow:0 0 0 2px var(--coral),var(--shadow-md); }

.mood-caption { background:none; }
.mood-caption strong { color:var(--ink); }
.mood-caption span { color:var(--ink-soft); }
.mood-card:hover .mood-caption strong { color:var(--coral-deep); }

/* ---------- Gift banner ---------- */
/* Ground matches the photo's own backdrop so copy and image read as one scene. */
.gift-section { background:#f1e7dd; }
.gift-image {
  background-position:78% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30%);
}
.gift-copy>p:not(.eyebrow) { color:var(--ink-soft); }

/* ---------- Product cards ---------- */
.bestsellers { background:#fff; }

.product-image {
  height:auto;
  aspect-ratio:1;
  border:0;
  border-radius:16px;
}

.product-image img { object-fit:contain; object-position:center; }

/* Cards are columns so prices and buttons line up when a title wraps. */
.product-card {
  display:flex;
  flex-direction:column;
  border-color:var(--hairline);
  border-radius:18px;
}
.product-card .add-cart { margin-top:auto; }
.product-card h3 { min-height:2.3em; }

.favorite { background:#ffffffe6; color:var(--ink); }
.favorite.saved { color:var(--coral-strong); }

.product-card>p { color:var(--ink-soft); font-size:.86rem; }
.price { color:var(--ink); font-weight:600; }

/* ---------- Journal ---------- */
.journal { background:var(--ivory-deep); }
.journal-card { border-radius:16px; }
.journal-card img { object-position:center 55%; background:#fbf6ee; }

/* ---------- Newsletter ---------- */
.newsletter {
  background-color:var(--butter);
  background-image:linear-gradient(90deg,var(--butter) 0%,var(--butter) 80%,#f9e3a300 97%),url('../assets/img/hero-playtime-768.webp');
  background-position:right 60%;
}

/* ---------- Footer ---------- */
.site-footer { background:#fbf0e2; }
.footer-main h3 { color:var(--coral-deep); }
.credit a { color:var(--coral-deep); }

.whatsapp-float { box-shadow:0 10px 24px -8px #2a223366; }

/* ---------- Collection, product, cart & checkout pages ---------- */
.breadcrumb a:hover { color:var(--coral-deep); }

/* Page titles share the homepage's rounded weight. */
.buy-panel h1,.collection-header h1,.categories-header h1,.bag-page h1,.checkout-form h1,.wishlist-page h1,
.blog-hero h1,.article-header h1,.policy-hero h1,.about-intro-card h1,.contact-form-wrap h1,.auth-card h1,.tracking-panel h1,.order-success h1 {
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.01em;
}

/* Product photos sit on a warm studio backdrop (~#f4ede3); frames use the
   same tone so contained images have no visible edge. */
.collection-image,.gallery-main,.thumb,.line-thumb,.summary-thumb,.wishlist-thumb,.category-card { border-radius:16px; overflow:hidden; }
.product-image,.collection-image,.gallery-main,.thumb,.line-thumb,.summary-thumb,.wishlist-thumb { background:#f4ede3; }
.gallery-main { aspect-ratio:1; }
.collection-image img,.gallery-main img,.thumb img,.line-thumb img,.summary-thumb img,.wishlist-thumb img,.bag-row img { object-fit:contain; background:#f4ede3; }

.discount-flag,.product-flag { background:var(--coral-strong); color:#fff; border-radius:999px; }
.price-save { background:var(--mint); color:#245a42; border-radius:999px; }

.size-option { border-radius:14px; }
.size-option.is-active { border-color:var(--coral-strong); box-shadow:0 0 0 1px var(--coral-strong); background:#fff7f3; }
.size-tag { background:var(--butter); color:var(--ink); }

.qty-stepper,.promo-form input,.filter-select,.field input,.field select,.field textarea { border-radius:12px; }

.assurance-strip { background:var(--mint); border-radius:14px; }

.tab.is-active { color:var(--coral-deep); border-color:var(--coral-strong); }

.category-card span { border-radius:0 0 16px 16px; }

.tracking-demo-note {
  margin:0 0 1rem;
  padding:.75rem 1rem;
  border-radius:12px;
  background:var(--butter);
  color:var(--ink);
  font-size:.92rem;
  line-height:1.45;
}

/* ---------- Responsive tuning ---------- */
@media (max-width:1100px) {
  .brand-name { font-size:1.65rem; }
  .hero-note { display:none; }
}

@media (max-width:767px) {
  .brand-symbol { width:2.7rem; height:2.7rem; border-radius:13px; }
  .brand-symbol svg { width:1.9rem; height:1.9rem; }
  .brand-name { font-size:1.35rem; }
  .brand-tagline { font-size:.5rem; letter-spacing:.12em; }
  .hero h1 { font-size:2.7rem; }
  .hero-image { object-position:78% 50%; }
  .newsletter .button { border-radius:999px; }
  .newsletter input { border-radius:999px; }
}