/* Design 1 – "Verano": brand logo colours, whitewashed wood, playful stickers, walking mascots. */
:root {
  --c-primary: #3aa535; --c-primary-dark: #2b7f2a; --c-primary-soft: #e4f4e1;
  --c-accent: #f7941d; --c-accent-dark: #e07d0a;
  --c-sun: #ffd23f; --c-sunset: #e8532a; --c-sea: #1d3b6b;
  --c-bg: #efe7d8; --c-surface: #fffdf7; --c-surface-2: #f8f1e3;
  --c-text: #1e2a1c; --c-muted: #6a6f62; --c-border: #e2d7c3;
  --radius: 18px; --radius-sm: 10px;
  --header-h: 72px;
}
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Whitewashed planks: bg-wood.webp is a seamless 2×2 mirrored tile (800×1422) built from background.png,
   so the pattern repeats without visible seams. Scaled per breakpoint so planks look the same width on phone and desktop. */
body.theme-design1 {
  background: var(--c-bg) url("../img/bg-wood.webp") center top / 560px auto repeat;
  position: relative;
}
@media (min-width: 768px) { body.theme-design1 { background-size: 800px auto; } }
/* light wash over the wood so dark text keeps contrast everywhere */
body.theme-design1::before { content: ""; position: fixed; inset: 0; background: rgba(255, 250, 240, .5); pointer-events: none; z-index: -1; }
.no-webp body.theme-design1 { background-image: url("../img/bg-wood.jpg"); }
/* text that sits directly on the wood gets a soft white halo */
.theme-design1 h1, .theme-design1 h2, .theme-design1 h3, .theme-design1 .lead, .theme-design1 .breadcrumb, .theme-design1 .chips-label,
.theme-design1 .products-head, .theme-design1 .kicker { text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255,253,247,.9); }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 900; background: rgba(255, 253, 247, .95); border-bottom: 3px solid var(--c-primary); box-shadow: 0 2px 12px rgba(0,0,0,.08); }
/* blur only on desktop: backdrop-filter turns the header into the containing block of the fixed mobile drawer (it got trapped inside the header) */
@media (min-width: 1024px) { .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255, 253, 247, .92); } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--header-h); }
.brand img { width: 96px; height: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); } @media (min-width: 768px) { .brand img { width: 124px; } }
.main-nav { display: none; }
.main-nav a { font-weight: 700; color: var(--c-sea); padding: 8px 10px; border-radius: 999px; }
.main-nav a:hover { background: var(--c-primary-soft); text-decoration: none; color: var(--c-primary-dark); }
.nav-minor, .nav-mobile-extra { display: none; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--c-sea); position: relative; cursor: pointer; }
.icon-btn svg { width: 24px; height: 24px; } .icon-btn:hover { background: var(--c-primary-soft); }
.cart-btn [data-cart-count] { position: absolute; top: 2px; right: 0; }
.lang-switch { font-weight: 800; font-size: .85rem; color: var(--c-sea); border: 2px solid var(--c-sea); border-radius: 999px; padding: 4px 9px; }
.lang-switch:hover { background: var(--c-sea); color: #fff; text-decoration: none; }
.nav-register { display: none; }
.nav-close { display: none; }
@media (min-width: 1024px) {
  .main-nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; } .nav-cat { display: none; }
  .nav-toggle { display: none; } .nav-register { display: inline-flex; }
}
@media (max-width: 1023px) {
  .main-nav { display: flex; flex-direction: column; position: fixed; top: var(--header-h); right: 0; bottom: 0; width: min(320px, 86vw); background: var(--c-surface); padding: 18px; gap: 4px; box-shadow: -8px 0 24px rgba(0,0,0,.15); transform: translateX(105%); transition: transform .25s ease; overflow-y: auto; z-index: 950; }
  .main-nav.open { transform: none; }
  .main-nav a { font-size: 1.05rem; padding: 12px 14px; }
  .nav-cat { padding-left: 28px !important; font-weight: 600 !important; font-size: .95rem !important; }
  .nav-minor, .nav-mobile-extra { display: block; } .nav-mobile-extra { margin-top: 12px; border-top: 1px solid var(--c-border); padding-top: 10px; }
  .nav-mobile-extra a { display: block; }
  .nav-close { display: inline-flex; align-self: flex-end; font-size: 1.6rem; font-weight: 800; border: 2px solid var(--c-sea); margin-bottom: 4px; }
  /* The drawer lives inside the sticky header (stacking context z 900), so the dim overlay must stay BELOW 900
     or it paints over the open menu and swallows every tap. */
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 890; }
}

/* ---- hero ---- */
.hero { padding: 26px 0 10px; overflow: hidden; }
.hero-inner { display: grid; gap: 18px; align-items: center; }
@media (min-width: 860px) { .hero-inner { grid-template-columns: 1.3fr 1fr; } .hero { padding: 50px 0 20px; } }
.kicker { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; color: var(--c-sunset); margin-bottom: 8px; }
/* frosted panel so the hero copy is readable on the planks */
.hero-text { background: rgba(255, 253, 247, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid rgba(255,255,255,.7); border-radius: var(--radius); padding: 18px 18px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
@media (min-width: 860px) { .hero-text { padding: 26px 28px 20px; } }
.hero h1 { font-size: clamp(2rem, 6vw, 3.6rem); color: var(--c-sea); text-shadow: 0 2px 0 #fff; }
.hero-sub { font-size: 1.1rem; max-width: 52ch; color: #2b3328; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.sticker { display: inline-block; background: var(--c-sun); color: var(--c-sea); font-weight: 800; padding: 8px 16px; border-radius: 999px; transform: rotate(-2deg); box-shadow: 0 3px 0 rgba(0,0,0,.12); margin-top: 6px; }
.hero-art { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 220px; }
.hero-mascot { width: min(260px, 60vw); position: relative; z-index: 2; animation: float 3.5s ease-in-out infinite; filter: drop-shadow(0 12px 10px rgba(0,0,0,.25)); }
.sun { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, var(--c-sun) 0%, var(--c-accent) 55%, rgba(232,83,42,.0) 72%); top: 0; z-index: 1; opacity: .9; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }

/* ---- usp ---- */
.usp { padding: 8px 0 4px; }
.usp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 860px) { .usp-grid { grid-template-columns: repeat(4, 1fr); } }
.usp-item { background: var(--c-surface); border: 2px dashed var(--c-border); border-radius: var(--radius-sm); padding: 10px 12px; font-weight: 700; font-size: .85rem; display: flex; gap: 8px; align-items: center; color: var(--c-sea); }
.usp-ico { font-size: 1.3rem; }

/* ---- categories ---- */
.sec-title { color: var(--c-sea); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sec-title .count { font-size: .9rem; font-weight: 600; color: var(--c-muted); }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (min-width: 860px) { .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.cat-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 16px; border-radius: var(--radius); background: var(--c-surface); border: 3px solid var(--cat); color: var(--c-text); position: relative; min-height: 130px; transition: transform .15s, box-shadow .15s; }
.cat-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow); text-decoration: none; }
.cat-card strong { font-size: 1.05rem; color: var(--cat); } .cat-card small { color: var(--c-muted); font-size: .8rem; line-height: 1.3; }
.cat-count { position: absolute; top: -12px; right: 12px; background: var(--cat); color: #fff; font-weight: 800; font-size: .8rem; padding: 3px 10px; border-radius: 999px; }
.cat-hero { background: linear-gradient(135deg, var(--cat), transparent 70%); border-radius: 0 0 var(--radius) var(--radius); }
.cat-hero h1 { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.3); } .cat-hero .lead { color: #fff; }

/* ---- products ---- */
.products-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.toolbar { display: flex; gap: 8px; flex: 1; min-width: 100%; } @media (min-width: 700px) { .toolbar { min-width: 0; max-width: 520px; } }
.search { flex: 1; position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--c-muted); }
.search input, .sort select { width: 100%; min-height: 44px; border: 2px solid var(--c-border); border-radius: 999px; padding: 8px 14px 8px 38px; font: inherit; background: var(--c-surface); }
.sort select { padding: 8px 12px; width: auto; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; align-items: center; } .chips::-webkit-scrollbar { display: none; }
.chips-cats .chip { border-width: 2px; border-color: var(--cat, var(--c-primary)); color: var(--cat, var(--c-primary)); }
.chips-cats .chip.active { background: var(--cat, var(--c-primary)); color: #fff; }
.chips-label { font-size: .8rem; font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.chip-tag { font-size: .8rem; min-height: 32px; padding: 4px 12px; }
.theme-design1 .pcard { border: 2px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.theme-design1 .pcard:hover { border-color: var(--c-primary); }
.theme-design1 .price { color: var(--c-sunset); }
.theme-design1 .badge { background: var(--c-sun); color: var(--c-sea); }

/* ---- fun (facts + quiz) ---- */
.fun-grid { display: grid; gap: 16px; } @media (min-width: 860px) { .fun-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.fact-card { position: relative; padding-right: 120px; min-height: 180px; background: linear-gradient(135deg, #fffdf7, #fff3d6); border: 3px solid var(--c-sun); }
.fact-card h2 { color: var(--c-sunset); }
.fact-text { font-size: 1.1rem; font-weight: 600; min-height: 3.3em; }
.fact-mascot { position: absolute; right: 8px; bottom: 8px; width: 110px; animation: float 4s ease-in-out infinite; }
.quiz-card { border: 3px solid var(--c-primary); }
.quiz-card h2 { color: var(--c-primary-dark); }

/* ---- about / teaser ---- */
.about-inner { display: grid; gap: 16px; align-items: center; } @media (min-width: 860px) { .about-inner { grid-template-columns: 1.4fr 1fr; } }
.about-text { border: 3px solid var(--c-sea); margin: 0; }
.about-art { display: flex; justify-content: center; } .about-pack { width: min(300px, 70vw); border-radius: var(--radius); transform: rotate(3deg); box-shadow: var(--shadow); }
.teaser { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--c-sea); color: #fff; border: 0; }
.teaser h2 { color: #fff; margin: 0 0 4px; } .teaser .muted { color: #cfe0ff; } .teaser a { color: #fff; }

/* ---- product page ---- */
.breadcrumb a { color: var(--c-sunset); }
.product-grid { display: grid; gap: 16px; margin-bottom: 26px; } @media (min-width: 860px) { .product-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.product-media { padding: 10px; border: 3px solid var(--c-border); } .product-photo { aspect-ratio: 1; object-fit: contain; }
.product-info h1 { color: var(--c-sea); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.variant-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px; border: 2px dashed var(--c-border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--c-surface-2); }
.variant-price { display: flex; flex-direction: column; } .variant-price .price { font-size: 1.7rem; color: var(--c-sunset); }
.variant-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.product-more { margin: 14px 0; } .product-more summary { font-weight: 800; cursor: pointer; color: var(--c-primary-dark); }

/* ---- footer ---- */
.site-footer { background: var(--c-sea); color: #dfe8f5; margin-top: 30px; padding: 32px 0 90px; border-top: 6px solid var(--c-primary); }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; } @media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fcol-brand { grid-column: 1 / -1; } @media (min-width: 860px) { .fcol-brand { grid-column: auto; } }
.fcol h4 { color: var(--c-sun); margin-bottom: 8px; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.fcol ul { list-style: none; margin: 0; padding: 0; } .fcol li { margin: 4px 0; font-size: .95rem; }
.fcol .social { display: flex; gap: 10px; margin-top: 8px; } .fcol .social a { opacity: .85; } .fcol .social a:hover { opacity: 1; }
.site-footer .muted { color: #a9b8d0; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.15); margin-top: 24px; padding-top: 14px; font-size: .85rem; }
.agency { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); padding: 6px 12px; border-radius: 999px; }
.agency img { width: 20px; height: 20px; border-radius: 5px; } .agency:hover { background: rgba(255,255,255,.18); text-decoration: none; }

/* ---- back to top ---- */
.back-top { position: fixed; right: 14px; bottom: 90px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c-sea); color: #fff; font-size: 1.3rem; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 800; box-shadow: var(--shadow); cursor: pointer; }
.back-top.show { opacity: .9; pointer-events: auto; }

/* ---- mascot (Clippy-style walker) ---- */
.mascot { position: fixed; bottom: 0; left: 0; z-index: 1000; width: 120px; pointer-events: none; will-change: transform; }
.mascot-img { width: 120px; height: auto; pointer-events: auto; cursor: pointer; transform-origin: 50% 100%; filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); user-select: none; }
.mascot.walking .mascot-img { animation: walk .55s ease-in-out infinite; }
.mascot.flip .mascot-img { transform: scaleX(-1); }
.mascot.flip.walking .mascot-img { animation-name: walk-flip; }
.mascot.talking .mascot-img { animation: talk 1.2s ease-in-out infinite; }
@keyframes walk { 0%, 100% { transform: translateY(0) rotate(-4deg); } 25% { transform: translateY(-7px) rotate(0deg); } 50% { transform: translateY(0) rotate(4deg); } 75% { transform: translateY(-7px) rotate(0deg); } }
@keyframes walk-flip { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(4deg); } 25% { transform: scaleX(-1) translateY(-7px) rotate(0deg); } 50% { transform: scaleX(-1) translateY(0) rotate(-4deg); } 75% { transform: scaleX(-1) translateY(-7px) rotate(0deg); } }
@keyframes talk { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04) translateY(-2px); } }
.mascot-bubble { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(.9); width: 220px; background: #fff; color: var(--c-sea); font-weight: 700; font-size: .85rem; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--c-sea); box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: auto; }
.mascot-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--c-sea); }
.mascot.talking .mascot-bubble { opacity: 1; transform: translateX(-50%) scale(1); }
.mascot.at-right .mascot-bubble { left: auto; right: 0; transform: translateX(0) scale(.9); } .mascot.at-right.talking .mascot-bubble { transform: translateX(0) scale(1); } .mascot.at-right .mascot-bubble::after { left: auto; right: 48px; }
.mascot.at-left .mascot-bubble { left: 0; transform: translateX(0) scale(.9); } .mascot.at-left.talking .mascot-bubble { transform: translateX(0) scale(1); } .mascot.at-left .mascot-bubble::after { left: 52px; }
.mascot-close { position: absolute; top: -8px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c-sea); background: #fff; color: var(--c-sea); font-weight: 800; line-height: 1; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .2s; z-index: 2; }
.mascot:hover .mascot-close, .mascot.talking .mascot-close { opacity: 1; }
@media (max-width: 600px) { .mascot, .mascot-img { width: 92px; } .mascot-bubble { width: 180px; font-size: .8rem; } }
/* while the mobile menu is open the mascot goes under the dim overlay instead of walking over the drawer */
body.nav-open .mascot { z-index: 880; }