/* ============================================================
   inner-warm.css — WARM palette for inner category pages
   (pralines.html / shapes.html / tablets.html)
   Matches index.html (warm LYRA-style) instead of the old dark styles.css
   ============================================================ */
:root{
  --cream:#FAF8F5; --kraft:#F1E9DC; --brown:#3a2317; --ink:#513629;
  --ink-soft:#6b5443; --ochre:#AD712E; --gold:#C99A4E;
  /* one typeface site-wide (Rubik) — both names resolve to it, see index.html */
  --max:1180px; --serif:'Rubik',Arial,sans-serif; --sans:'Rubik',Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
/* WCAG 2.4.1 (Bypass Blocks) — off-screen until it receives keyboard focus */
.skip-link{position:absolute;top:-100px;inset-inline-start:16px;z-index:300;
  background:#3a2317;color:#fbf3e7;padding:12px 20px;border-radius:0 0 6px 6px;
  font-size:15px;font-weight:600;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased}

/* speckle paper texture, same as homepage cream bands */
body::before{content:"";position:fixed;inset:0;z-index:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(rgba(122,90,60,.16) 1px,transparent 1.2px),
                   radial-gradient(rgba(122,90,60,.10) 1px,transparent 1.2px);
  background-size:34px 34px,19px 19px;background-position:0 0,11px 7px}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;left:0;right:0;z-index:40;background:rgba(250,248,245,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(122,90,60,.12)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:16px 5vw;
  display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex}
.brand-logo{height:46px;width:auto;display:block}
.nav-tools{display:flex;align-items:center;gap:24px}
.back-link{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);
  text-decoration:none;transition:color .3s}
.back-link:hover{color:var(--ochre)}
.lang-toggle{background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brown)}
.lang-toggle:hover{color:var(--ochre)}

/* ---------- CATEGORY PAGE ---------- */
.section{position:relative;z-index:1;padding:0 5vw}
.praline-cat{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(90px,11vw,150px)}
.label{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.334em;
  text-transform:uppercase;color:#8a5a1d;margin-bottom:18px} /* deep ochre — ≥4.5:1 on cream (a11y) */
.center{text-align:center}
.praline-cat-title{font-family:var(--serif);font-weight:700;text-wrap:balance;letter-spacing:-.022em;
  font-size:clamp(40px,7vw,82px);color:var(--brown);margin-bottom:18px;line-height:1.04}
.sub{font-size:18px;color:var(--ink-soft);max-width:620px;margin:0 auto clamp(48px,6vw,80px);line-height:1.7}

.praline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(22px,2.6vw,40px);max-width:var(--max);margin:0 auto}
.praline-card{margin:0;text-align:center}
.praline-shot{overflow:hidden;border-radius:4px;background:var(--kraft);
  box-shadow:0 18px 38px -22px rgba(90,60,35,.3)}
.praline-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
/* 1.05 read as a jump on a product photo; a slower, smaller move reads expensive */
.praline-card:hover .praline-shot img{transform:scale(1.03)}
/* the interior never zooms - it is already the close-up, and scaling it on top
   crops the tray against the card edge, which is what made the peek feel cramped */
.praline-card:hover .praline-shot.peek .peek-in,
.praline-shot.peek.is-open .peek-in{transform:none}
.praline-card figcaption{margin-top:14px;font-family:var(--serif);font-size:17px;
  color:var(--ink);letter-spacing:.01em}

/* ===== PEEK INSIDE =====
   A boxed product tells you nothing about what is in it. On these cards the
   closed box is the resting face and the packed tray fades in on hover/focus,
   so a hotel buyer sees the contents without leaving the grid.
   Touch has no hover, so the same swap is bound to the round button — which
   also doubles as the desktop affordance (nobody hovers what looks static). */
.praline-shot.peek{position:relative}
.praline-shot.peek .peek-in{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .5s var(--ease),transform .9s var(--ease)}
.praline-card:hover .praline-shot.peek .peek-in,
.praline-card:focus-visible .praline-shot.peek .peek-in,
.praline-shot.peek.is-open .peek-in{opacity:1}
.peek-btn{position:absolute;inset-block-end:10px;inset-inline-end:10px;z-index:2;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--brown);
  background:rgba(253,250,245,.86);backdrop-filter:blur(2px);
  box-shadow:0 4px 12px -4px rgba(90,60,35,.45);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.peek-btn svg{width:18px;height:18px;display:block}
.peek-btn:hover{background:#fff;transform:scale(1.08)}
.peek-btn:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
/* mobile: pralines shown 2-up (denser, so the full range is easy to scan without endless scrolling) */
@media(max-width:600px){
  .cols-2-m{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .cols-2-m .praline-card figcaption{margin-top:10px;font-size:15px;line-height:1.35}
}

/* The footer carries no phone number and no WhatsApp icon, deliberately (Ori,
   2026-08-08). The number lives in exactly one place, #contact on the homepage.
   Four lead forms are the intended route; whoever really wants to call will
   look the number up rather than be handed it on every page. */

/* ---------- FOOTER — identical to the homepage footer ---------- */
.footer{position:relative;z-index:1;background:#241510;color:#cbb59c;text-align:center;
  padding:70px 6vw 56px}
.footer-logo{height:54px;width:auto;margin-bottom:18px;opacity:.95}
.footer-brand{font-family:var(--serif);font-size:22px;color:#fbf3e7;margin-bottom:4px}
.footer-est{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.footer-tagline{font-size:14px;color:#bda489;margin-bottom:26px}
.footer-hechsher{display:block;height:52px;width:auto;margin:0 auto 22px}
.footer-social{display:flex;justify-content:center;gap:18px;margin-bottom:28px}
.footer-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(220,190,150,.25);color:#cbb59c;transition:.25s}
.footer-social a:hover{border-color:var(--gold);color:var(--gold)}
.footer-social svg{width:19px;height:19px}
.footer-legal{font-size:12.5px;margin-bottom:10px}
.footer-legal a{color:#bda489;text-decoration:none;transition:.25s}
.footer-legal a:hover{color:var(--gold);text-decoration:underline}
.footer-rights{font-size:12.5px;color:#a38d75} /* lightened — ≥4.5:1 on dark footer (a11y) */
/* short allergen line on category pages (verbatim legal-label wording — do not edit) */
/* the top pad also has to absorb the last row's caption, which sits ~24px below the
   grid's own bottom edge — with no top pad the notice landed on top of it */
.cat-allergen{max-width:760px;margin:0 auto;padding:clamp(60px,5vw,72px) 6vw 52px;text-align:center;
  font-size:13.5px;line-height:1.7;color:#836c55}

@media(max-width:600px){
  .nav-tools{gap:16px}
  .brand-logo{height:40px}
}

/* ===== MOTION — same calm reveal language as the homepage ===== */
.d1{--d:1}.d2{--d:2}
html.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:calc(var(--d,0)*120ms)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
}

/* ===== LIGHTBOX — enlarged product view (shared by all category pages) ===== */
.praline-card{cursor:pointer}
.praline-card:focus-visible{outline:2px solid var(--ochre);outline-offset:4px;border-radius:4px}
body.lb-lock{overflow:hidden}
.lb{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:4vh 5vw;
  background:rgba(32,20,13,.6);backdrop-filter:blur(14px) saturate(.9);
  opacity:0;pointer-events:none;visibility:hidden; /* visibility keeps closed lightbox out of tab order (a11y) */
  transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.lb.open{opacity:1;pointer-events:auto;visibility:visible}
.lb-card{position:relative;transform:translateY(18px) scale(.975);transition:transform .55s var(--ease)}
.lb.open .lb-card{transform:none}
.lb-shot{position:relative;width:min(86vw,calc((72vh - 70px)*0.805));aspect-ratio:4/5;
  border-radius:6px;overflow:hidden;background:#efe7da;
  box-shadow:0 46px 90px -30px rgba(15,8,4,.6)}
.lb-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lb-shot .lb-hi{opacity:0;transition:opacity .5s ease}
.lb-shot .lb-hi.on{opacity:1}
.lb-name{margin-top:18px;font-family:var(--serif);font-size:24px;color:#fbf3e7;
  text-align:center;letter-spacing:.01em;line-height:1.3}
.lb-count{margin-top:5px;font-size:12px;letter-spacing:.22em;color:rgba(251,243,231,.55);
  text-align:center;direction:ltr}
.lb-close{position:absolute;top:22px;inset-inline-end:24px;width:46px;height:46px;border-radius:50%;
  border:1.4px solid rgba(251,243,231,.4);background:rgba(32,20,13,.3);color:#fbf3e7;
  font-size:20px;font-weight:400;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.lb-close:hover{background:rgba(173,113,46,.85);border-color:transparent}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1.4px solid rgba(251,243,231,.4);background:rgba(32,20,13,.3);color:#fbf3e7;
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;direction:ltr;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.lb-arrow:hover{background:rgba(173,113,46,.85);border-color:transparent}
.lb-arrow.lb-left{left:26px}
.lb-arrow.lb-right{right:26px}
@media(max-width:640px){
  .lb{padding:3vh 4vw}
  .lb-shot{width:min(88vw,calc((66vh - 64px)*0.8))}
  .lb-name{font-size:20px;margin-top:14px}
  .lb-close{top:14px;inset-inline-end:14px;width:42px;height:42px}
  .lb-arrow{width:42px;height:42px;font-size:19px;top:auto;bottom:18px;transform:none}
  .lb-arrow.lb-left{left:18px}
  .lb-arrow.lb-right{right:18px}
}
@media (prefers-reduced-motion:reduce){
  .lb{transition:none}
  .lb-card{transform:none;transition:none}
  .lb-shot .lb-hi{transition:none}
}