/* ============================================================================
 *  3D Gifts — ОБЩИ СТИЛОВЕ ЗА ПРОДУКТОВИТЕ СТРАНИЦИ
 * ----------------------------------------------------------------------------
 *  Файлът е копие на стиловете от началната страница и се ползва от
 *  cards.html, portraits.html и puzzles.html, за да изглеждат едно към едно
 *  с конфигуратора на дърворезбите.
 * ==========================================================================*/

  /* =====================================================================
     3D GIFTS — dark, single-theme, "product stage" design system.
     Committed dark world (no light variant) — see artifact-design notes:
     stage lighting on black, one warm copper accent, huge type, big media.
  ===================================================================== */
  :root{
    --bg:            #0e0c08;
    --bg-1:          #100e0a;
    --bg-2:          #15120c;
    --surface:       #1c1810;
    --surface-2:     #262016;
    --line:          rgba(255,255,255,.12);
    --line-soft:     rgba(255,255,255,.07);
    --text:          #f6f3ee;
    --text-dim:      #a8a196;
    --text-faint:    #837c6f;
    --accent:        #d69a52;
    --accent-bright: #f0b975;
    --accent-deep:   #8a5a2b;
    --accent-soft:   rgba(214,154,82,.14);
    --shadow:        rgba(0,0,0,.7);
    --font-ui:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-alt: 'Golos Text', var(--font-ui);
    --radius-lg: 28px;
    --radius-md: 16px;
    --radius-sm: 10px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{
    scroll-behavior:smooth; -webkit-text-size-adjust:100%;
    /* clip, not hidden — see the note on body below */
    overflow-x:hidden; overflow-x:clip;
  }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
  body{
    margin:0; color:var(--text);
    /* Soft embossed-wave ground, echoing the printed card. Two wide warm
       glows lift the corners; the waves themselves are 3% white, which is
       enough to feel like a surface and far too little to hurt contrast. */
    background-color:var(--bg);
    background-image:
      radial-gradient(1200px 700px at 12% -8%, rgba(214,154,82,.055), transparent 62%),
      radial-gradient(1000px 800px at 105% 22%, rgba(214,154,82,.035), transparent 60%),
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgNjAwIDI0MCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGcgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utb3BhY2l0eT0iMC41NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwyKSI+PHBhdGggZD0iTTAgMjAgQzUwIDQsMTAwIDQsMTUwIDIwIEMyMDAgMzYsMjUwIDM2LDMwMCAyMCBDMzUwIDQsNDAwIDQsNDUwIDIwIEM1MDAgMzYsNTUwIDM2LDYwMCAyMCIvPjxwYXRoIGQ9Ik0wIDYwIEM1MCA0NCwxMDAgNDQsMTUwIDYwIEMyMDAgNzYsMjUwIDc2LDMwMCA2MCBDMzUwIDQ0LDQwMCA0NCw0NTAgNjAgQzUwMCA3Niw1NTAgNzYsNjAwIDYwIi8+PHBhdGggZD0iTTAgMTAwIEM1MCA4NCwxMDAgODQsMTUwIDEwMCBDMjAwIDExNiwyNTAgMTE2LDMwMCAxMDAgQzM1MCA4NCw0MDAgODQsNDUwIDEwMCBDNTAwIDExNiw1NTAgMTE2LDYwMCAxMDAiLz48cGF0aCBkPSJNMCAxNDAgQzUwIDEyNCwxMDAgMTI0LDE1MCAxNDAgQzIwMCAxNTYsMjUwIDE1NiwzMDAgMTQwIEMzNTAgMTI0LDQwMCAxMjQsNDUwIDE0MCBDNTAwIDE1Niw1NTAgMTU2LDYwMCAxNDAiLz48cGF0aCBkPSJNMCAxODAgQzUwIDE2NCwxMDAgMTY0LDE1MCAxODAgQzIwMCAxOTYsMjUwIDE5NiwzMDAgMTgwIEMzNTAgMTY0LDQwMCAxNjQsNDUwIDE4MCBDNTAwIDE5Niw1NTAgMTk2LDYwMCAxODAiLz48cGF0aCBkPSJNMCAyMjAgQzUwIDIwNCwxMDAgMjA0LDE1MCAyMjAgQzIwMCAyMzYsMjUwIDIzNiwzMDAgMjIwIEMzNTAgMjA0LDQwMCAyMDQsNDUwIDIyMCBDNTAwIDIzNiw1NTAgMjM2LDYwMCAyMjAiLz48L2c+PGcgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC4wNzUiPjxwYXRoIGQ9Ik0wIDIwIEM1MCA0LDEwMCA0LDE1MCAyMCBDMjAwIDM2LDI1MCAzNiwzMDAgMjAgQzM1MCA0LDQwMCA0LDQ1MCAyMCBDNTAwIDM2LDU1MCAzNiw2MDAgMjAiLz48cGF0aCBkPSJNMCA2MCBDNTAgNDQsMTAwIDQ0LDE1MCA2MCBDMjAwIDc2LDI1MCA3NiwzMDAgNjAgQzM1MCA0NCw0MDAgNDQsNDUwIDYwIEM1MDAgNzYsNTUwIDc2LDYwMCA2MCIvPjxwYXRoIGQ9Ik0wIDEwMCBDNTAgODQsMTAwIDg0LDE1MCAxMDAgQzIwMCAxMTYsMjUwIDExNiwzMDAgMTAwIEMzNTAgODQsNDAwIDg0LDQ1MCAxMDAgQzUwMCAxMTYsNTUwIDExNiw2MDAgMTAwIi8+PHBhdGggZD0iTTAgMTQwIEM1MCAxMjQsMTAwIDEyNCwxNTAgMTQwIEMyMDAgMTU2LDI1MCAxNTYsMzAwIDE0MCBDMzUwIDEyNCw0MDAgMTI0LDQ1MCAxNDAgQzUwMCAxNTYsNTUwIDE1Niw2MDAgMTQwIi8+PHBhdGggZD0iTTAgMTgwIEM1MCAxNjQsMTAwIDE2NCwxNTAgMTgwIEMyMDAgMTk2LDI1MCAxOTYsMzAwIDE4MCBDMzUwIDE2NCw0MDAgMTY0LDQ1MCAxODAgQzUwMCAxOTYsNTUwIDE5Niw2MDAgMTgwIi8+PHBhdGggZD0iTTAgMjIwIEM1MCAyMDQsMTAwIDIwNCwxNTAgMjIwIEMyMDAgMjM2LDI1MCAyMzYsMzAwIDIyMCBDMzUwIDIwNCw0MDAgMjA0LDQ1MCAyMjAgQzUwMCAyMzYsNTUwIDIzNiw2MDAgMjIwIi8+PC9nPjwvZz48L3N2Zz4=");
    background-repeat:no-repeat, no-repeat, repeat;
    background-attachment:fixed, fixed, fixed;
    font-family:var(--font-ui); font-weight:400;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    /* `clip` instead of `hidden`: hidden turns the body into a scroll
       container (overflow-y computes to auto), which silently disables
       position:sticky on the preview column. `clip` trims overflow
       without creating that container. Older engines ignore it and keep
       the hidden above, which is the previous behaviour. */
    overflow-x:hidden;
    overflow-x:clip;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }
  ul{ list-style:none; margin:0; padding:0; }
  h1,h2,h3,p{ margin:0; }
  h1,h2,h3{ font-weight:700; letter-spacing:-.02em; text-wrap:balance; }

  ::selection{ background:var(--accent); color:#1a1206; }

  .visually-hidden{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* global film-grain, fixed over everything */
  body::before{
    content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
    opacity:.05; mix-blend-mode:overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .container{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px; }
  @media (max-width:640px){ .container{ padding-inline:20px; } }
  .section-pad{ padding-block: clamp(40px, 5.2vw, 72px); }
  .eyebrow{
    display:inline-block; font-family:var(--font-ui); font-size:.76rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;
  }
  h2{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.06; }
  h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); line-height:1.25; }
  .lede{ font-size:clamp(1rem, 1.6vw, 1.18rem); line-height:1.6; color:var(--text-dim); max-width:56ch; }
  .muted{ color:var(--text-dim); }
  .hr{ border:none; border-top:1px solid var(--line-soft); }

  /* ---------------- buttons ---------------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55em;
    font-family:var(--font-ui); font-weight:600; font-size:.98rem;
    padding: .95em 1.7em; border-radius:999px; border:1px solid transparent;
    cursor:pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
    white-space:nowrap;
  }
  .btn svg{ width:16px; height:16px; }
  .btn-primary{ background:var(--accent); color:#1a1206; }
  .btn-primary:hover{ background:var(--accent-bright); transform:translateY(-1px); }
  .btn-ghost{ background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line); backdrop-filter:blur(6px); }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-bright); }
  .btn-sm{ padding:.68em 1.3em; font-size:.86rem; }
  .btn-block{ width:100%; }

  /* ---------------- header / nav ---------------- */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:900;
    border-bottom:1px solid var(--line-soft);
  }
  /* the frosted-glass backdrop lives on a pseudo-element rather than on
     header.site itself: backdrop-filter (like transform/filter) makes an
     element the containing block for its position:fixed descendants, which
     broke the full-height mobile nav.primary dropdown nested inside it —
     it was sizing itself against the ~64px-tall header instead of the
     viewport. Keeping the filter off the header element sidesteps that. */
  header.site::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:rgba(14,12,8,.62); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  }
  .nav-row{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:84px; }
  .brand{ display:flex; align-items:center; gap:.6em; }
  .brand img{ width:68px; height:68px; border-radius:50%; object-fit:contain; }
  .brand-word{ font-weight:700; font-size:1rem; letter-spacing:-.01em; }
  .brand-word em{ font-style:normal; color:var(--accent); }
  nav.primary{ display:flex; align-items:center; gap:2em; }
  nav.primary a{
    font-size:.86rem; font-weight:500; color:var(--text-dim);
    position:relative; padding:6px 0; transition:color .2s ease;
  }
  nav.primary a:hover, nav.primary a.active{ color:var(--text); }
  nav.primary a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); border-radius:2px;
  }
  .nav-actions{ display:flex; align-items:center; gap:12px; }
  .menu-toggle{
    display:none; width:38px; height:38px; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--line); border-radius:10px; color:var(--text); cursor:pointer;
  }
  .menu-toggle svg{ width:18px; height:18px; }
  @media (max-width:860px){
    nav.primary{
      position:fixed; inset:84px 0 0 0; background:var(--bg); flex-direction:column; align-items:flex-start;
      padding: 28px 24px; gap:0; transform:translateY(-8px); opacity:0; pointer-events:none;
      transition: opacity .22s ease, transform .22s ease; overflow-y:auto;
    }
    nav.primary.open{ opacity:1; transform:none; pointer-events:auto; }
    nav.primary a{ width:100%; padding:16px 0; font-size:1.3rem; border-bottom:1px solid var(--line-soft); color:var(--text); }
    .menu-toggle{ display:inline-flex; }
    .nav-actions .btn-sm{ display:none; }
  }

  /* ---------------- hero ---------------- */
  .hero{
    position:relative; min-height:100svh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    padding-top:96px; overflow:hidden;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(214,154,82,.16), transparent 60%),
      radial-gradient(90% 60% at 50% 100%, rgba(138,90,43,.10), transparent 65%),
      var(--bg);
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:.55em; font-size:.78rem; font-weight:600;
    letter-spacing:.06em; color:var(--accent-bright); background:var(--accent-soft);
    border:1px solid rgba(214,154,82,.35); padding:.5em 1.1em; border-radius:999px; margin-bottom:26px;
  }
  .hero-eyebrow svg{ width:14px; height:14px; }
  .hero h1{
    font-size:clamp(2.8rem, 8vw, 6.6rem); line-height:.98; letter-spacing:-.04em;
    font-weight:800; max-width:16ch;
  }
  .hero h1 em{ font-style:normal; color:var(--accent); }
  .hero .lede{ margin:26px auto 0; text-align:center; font-size:clamp(1.02rem,1.8vw,1.25rem); }
  .hero-actions{ display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap; }

  .hero-stage{
    /* по-малкият кръг оставя място отдолу за стрелката "Скрол" */
    position:relative; width:min(280px, 60vw); aspect-ratio:1/1; margin: 56px auto 176px;
  }
  .hero-stage .halo{
    position:absolute; inset:-14%; border-radius:50%;
    background: radial-gradient(closest-side, rgba(214,154,82,.28), transparent 72%);
    filter: blur(6px);
  }
  .hero-stage .ring{
    position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-soft);
  }
  .hero-stage .ring2{ inset:-7%; border-color:rgba(255,255,255,.05); }
  .hero-stage .disc{
    position:absolute; inset:6%; border-radius:50%; overflow:hidden;
    box-shadow: 0 60px 120px -40px var(--shadow), 0 0 0 1px var(--line);
  }
  .hero-stage .disc img{ width:100%; height:100%; object-fit:cover; }
  .hero-stage .spark{
    position:absolute; inset:-2%; border-radius:50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(214,154,82,.5) 40deg, transparent 90deg, transparent 360deg);
    animation: spin 7s linear infinite; opacity:.8;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .hero-stage .spark{ animation:none; } }
  .hero-tag{
    position:absolute; bottom:-22%; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:.5em; white-space:nowrap;
    background:rgba(8,7,5,.75); backdrop-filter:blur(10px); border:1px solid var(--line);
    padding:.6em 1.05em; border-radius:999px; font-size:.78rem; font-weight:600; color:var(--text);
  }
  .hero-tag svg{ width:15px; height:15px; color:var(--accent); }
  @media (max-width:640px){ .hero-tag{ right:2%; } }

  .scroll-cue{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-faint);
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--text-faint), transparent); animation:scrollcue 1.8s ease-in-out infinite; }
  @keyframes scrollcue{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .scroll-cue .line{ animation:none; } }

  /* ---------------- stat strip ---------------- */
  .stat-strip{
    border-block:1px solid var(--line-soft); background:var(--bg-1);
  }
  .stats{
    display:grid; grid-template-columns:repeat(3,1fr);
  }
  .stat{
    padding: clamp(36px,6vw,64px) 24px; text-align:center;
    border-left:1px solid var(--line-soft);
  }
  .stat:first-child{ border-left:none; }
  .stat strong{
    display:block; font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; letter-spacing:-.03em;
    color:var(--text);
  }
  .stat strong span{ color:var(--accent); }
  .stat p{ margin-top:8px; color:var(--text-dim); font-size:.92rem; }
  @media (max-width:700px){
    .stats{ grid-template-columns:1fr; }
    .stat{ border-left:none; border-top:1px solid var(--line-soft); }
    .stat:first-child{ border-top:none; }
  }

  /* ---------------- reveal-on-scroll ---------------- */
  [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  [data-reveal].in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

  /* ---------------- story / process ---------------- */
  .story{ text-align:center; }
  .story h2{ max-width:20ch; margin-inline:auto; }
  .story .lede{ margin-inline:auto; }
  .process-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; margin-top:48px; }
  .p-step{ background:var(--bg-1); padding: 40px 32px; }
  .p-step .num{ font-size:.8rem; font-weight:700; color:var(--accent); letter-spacing:.08em; }
  .p-step h3{ margin-top:14px; }
  .p-step p{ margin-top:10px; color:var(--text-dim); font-size:.95rem; line-height:1.55; }
  @media (max-width:800px){ .process-steps{ grid-template-columns:1fr; } }

  /* ---------------- features ---------------- */
  .features{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  }
  .feature{ background:var(--bg); padding:44px 30px; text-align:center; }
  .feature svg{ width:72px; height:72px; color:var(--accent); }
  .feature h3{ margin-top:16px; font-size:1.05rem; }
  .feature p{ margin-top:8px; color:var(--text-dim); font-size:.9rem; line-height:1.55; }
  @media (max-width:900px){ .features{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .features{ grid-template-columns:1fr; } }
  /* mobile only: centred, much larger icons, tighter blocks */
  @media (max-width:640px){
    .feature{ padding:26px 24px; text-align:center; }
    .feature svg{ width:80px; height:80px; }
    .feature h3{ margin-top:12px; font-size:1.12rem; }
    .feature p{ margin-top:6px; }
  }

  /* ---------------- gallery slider ---------------- */
  .gallery{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
  .gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .gallery-controls{ display:flex; gap:10px; }
  .gallery-controls button{
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.03);
    color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: border-color .2s ease, color .2s ease;
  }
  .gallery-controls button:hover{ border-color:var(--accent); color:var(--accent-bright); }
  .gallery-controls svg{ width:18px; height:18px; }
  .gallery-controls .prev svg{ transform:scaleX(-1); }
  .gallery-track{
    display:flex; align-items:center; gap:20px; margin-top:36px; padding:6px 0 20px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    scroll-behavior:smooth;
  }
  .gallery-track::-webkit-scrollbar{ display:none; }
  /* Every card is the same height; the width comes from the orientation, so a
     landscape photo gets a wider frame and all cards of one kind match. */
  .flip-card-carousel{
    flex:0 0 auto; scroll-snap-align:start;
    --card-h:400px;
    height:var(--card-h);
    width:calc(var(--card-h) * 3 / 4);
  }
  .flip-card-carousel.is-landscape{ width:calc(var(--card-h) * 4 / 3); }
  @media (max-width:1023px){ .flip-card-carousel{ --card-h:340px; } }
  .g-card{
    position:relative; flex:0 0 auto; width:min(74vw, 380px); aspect-ratio:4/5;
    border-radius:var(--radius-lg); overflow:hidden; scroll-snap-align:start;
    border:1px solid var(--line); box-shadow:0 40px 80px -40px var(--shadow);
    display:flex; align-items:flex-end; isolation:isolate;
  }
  .g-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .g-card .swatch-bg{
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.10), transparent 55%),
      repeating-linear-gradient(100deg, var(--wg-a,#3a2a17) 0 3px, var(--wg-b,#2c1f11) 3px 7px);
  }
  .g-card .shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 46%, transparent 66%); z-index:1; }
  .g-card .g-body{ position:relative; z-index:2; padding:26px; }
  .g-card .g-icon{
    width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px; backdrop-filter:blur(6px);
  }
  .g-card .g-icon svg{ width:19px; height:19px; color:var(--accent-bright); }
  .g-card h3{ color:#fff; font-size:1.2rem; }
  .g-card p{ color:rgba(255,255,255,.72); font-size:.86rem; margin-top:6px; }
  .gallery-note{ margin-top:22px; font-size:.82rem; color:var(--text-faint); display:flex; align-items:center; gap:.5em; }
  .gallery-note svg{ width:14px; height:14px; flex:none; }

  /* Flip Card Carousel */
  .flip-card-carousel{
    position:relative; margin:0 auto;
    border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
    box-shadow:0 40px 80px -40px var(--shadow); cursor:pointer;
    background:var(--surface);
  }
  /* 2D flip. A flattened rotateY is the same matrix as scaleX(-1), so the
     rotation is written directly as a mirror: no transform-style, no
     backface-visibility, no perspective, therefore no 3D rendering context -
     that combination is what painted the dark back face over the photo on
     iOS Safari and made the cards read as black. */
  .flip-card-inner{
    position:absolute; inset:0;
    transform:scaleX(1);
    transition:transform 0.55s ease-in-out;
  }
  .flip-card-carousel.flipped .flip-card-inner{ transform:scaleX(-1); }
  .flip-card-front, .flip-card-back{
    position:absolute; inset:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    transition:opacity 0s linear 0.275s;
  }
  .flip-card-front{ opacity:1; z-index:2; }
  .flip-card-back{ opacity:0; z-index:1; transform:scaleX(-1); }
  .flip-card-carousel.flipped .flip-card-front{ opacity:0; }
  .flip-card-carousel.flipped .flip-card-back{ opacity:1; }
  .flip-card-front img, .flip-card-back img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  @media (max-width:640px){
    .flip-card-carousel{ height:auto; width:min(90vw, 420px); aspect-ratio:3/4; }
    .flip-card-carousel.is-landscape{ width:min(90vw, 420px); aspect-ratio:4/3; }
  }
  @media (prefers-reduced-motion: reduce){
    .flip-card-inner{ transition:none; transform:none; }
    .flip-card-carousel.flipped .flip-card-inner{ transform:none; }
    .flip-card-back{ transform:none; }
    .flip-card-front, .flip-card-back{ transition:opacity .3s ease; }
  }
  .flip-label{
    position:absolute; bottom:0; left:0; right:0; padding:12px 16px;
    background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
    color:rgba(255,255,255,.6); font-size:.75rem; text-align:center; z-index:10;
  }

  /* ---------------- product / pricing ---------------- */
  .product-wrap{
    display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center;
  }
  @media (max-width:900px){ .product-wrap{ grid-template-columns:1fr; } }
  .spec-list{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
  .spec-list li{ display:flex; align-items:flex-start; gap:.7em; font-size:.98rem; color:var(--text); }
  .spec-list svg{ width:18px; height:18px; color:var(--accent); flex:none; margin-top:2px; }
  @media (max-width:640px){
    .spec-list{ text-align:center; }
    .spec-list li{ justify-content:center; }
    .spec-list svg{ width:32px; height:32px; }
  }

  .price-card{
    position:relative; background:linear-gradient(165deg, var(--surface), var(--bg-1));
    border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(28px,4vw,42px);
    box-shadow:0 50px 90px -50px var(--shadow);
  }
  .price-card .corner{
    position:absolute; top:22px; right:22px; font-size:.7rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--accent-bright); background:var(--accent-soft);
    border:1px solid rgba(214,154,82,.35); padding:.4em .8em; border-radius:999px;
  }
  .price-card .label{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
  .price-row{ display:flex; align-items:baseline; gap:.5em; margin-top:14px; }
  .price-old{ font-size:1.3rem; color:var(--text-faint); text-decoration:line-through; }
  .price-new{ font-size:clamp(2.6rem,5vw,3.6rem); font-weight:800; letter-spacing:-.03em; color:var(--text); }
  .price-unit{ margin-top:4px; color:var(--text-dim); font-size:.88rem; }
  .price-note{ margin-top:16px; font-size:.8rem; color:var(--text-faint); text-align:center; }

  /* ---------------- configurator ---------------- */
  .configurator{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
  .configurator-head{ max-width:640px; margin-inline:auto; text-align:center; }
  .configurator-head .lede{ margin-inline:auto; }
  .configurator-grid{
    display:grid; grid-template-columns: .95fr 1.05fr; gap:clamp(28px,4vw,56px); margin-top:56px; align-items:flex-start;
  }
  @media (max-width:980px){ .configurator-grid{ grid-template-columns:1fr; } }
  .preview-col{ position:sticky; top:88px; }
  @media (max-width:980px){ .preview-col{ position:static; } }

  .photo-frame{
    position:relative; width:100%; margin-inline:auto;
    --ar:0.75;                                   /* plaque width / height, set from JS */
    aspect-ratio:var(--ar);
    /* whichever runs out first: the column's width, or the window's height */
    max-width:min(560px, calc(72vh * var(--ar)));
    background:var(--surface-2); border:1px solid var(--line); overflow:hidden; cursor:grab;
    transition:border-radius .35s ease, border-color .2s ease, aspect-ratio .35s ease;
    box-shadow:0 30px 60px -34px var(--shadow);
    touch-action:pan-y; -webkit-user-select:none; user-select:none;
  }
  .photo-frame:active{ cursor:grabbing; }
  .photo-frame.shape-round{ border-radius:28px; }
  .photo-frame.shape-sharp{ border-radius:6px; }
  .photo-frame.pulse{ animation:pulseGlow 1.15s ease-out 1; }
  @media (max-width:900px){
    /* phones scroll naturally, so height is no longer the binding limit */
    .photo-frame{ margin-inline:0; max-width:min(100%, calc(96vh * var(--ar))); }
  }

  @keyframes pulseGlow{
    0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 30px 60px -34px var(--shadow); }
    70%{ box-shadow:0 0 0 16px transparent, 0 30px 60px -34px var(--shadow); }
    100%{ box-shadow:0 0 0 0 transparent, 0 30px 60px -34px var(--shadow); }
  }
  @media (prefers-reduced-motion: reduce){ .photo-frame.pulse{ animation:none; } }

  /* ---- real 3D preview (three.js): drag to rotate, see the back & thickness ---- */
  .dc3d-container{ position:absolute; inset:0; }
  .dc3d-container canvas{ width:100%; height:100%; display:block; }
  .dc3d-empty{ position:absolute; inset:0; z-index:2; background:rgba(0,0,0,.28); pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7em; color:rgba(255,255,255,.55); text-align:center; padding:0; transition:opacity .3s ease; }
  .dc3d-empty svg{ width:48px; height:48px; opacity:.6; color:var(--accent); }
  .dc3d-empty strong{ color:var(--text); font-size:1.2rem; }
  .dc3d-empty span{ font-size:.78rem; }
  .dc3d-empty.hide{ opacity:0; }
  /* цялото превю е кликаемо — отваря избора на снимка */
  .photo-frame{ cursor:pointer; }
  .photo-frame.has-photo{ cursor:grab; }
  .photo-frame:active{ cursor:grabbing; }
  .dc3d-empty svg{ transition:opacity .2s ease, transform .2s ease; }
  .photo-frame:hover .dc3d-empty svg{ opacity:1; transform:translateY(-3px); }
  /* снимка-заместител в голямото превю, докато клиентът не е качил своя
     (config.js → photoStep.previewPlaceholder) */
  .dc3d-placeholder{
    position:absolute; inset:0; z-index:1; width:100%; height:100%;
    object-fit:cover; object-position:center; opacity:0; transition:opacity .3s ease;
  }
  .dc3d-placeholder.visible{ opacity:1; }
  .dc3d-placeholder.hide{ opacity:0; }
  .dc3d-error{
    position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:1.6em; font-size:.85rem; line-height:1.5; color:var(--text-dim);
  }
  .photo-frame .drop-hint{
    position:absolute; inset:0; border:2px dashed var(--accent); border-radius:inherit; pointer-events:none; z-index:4;
    display:none; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    font-size:.85rem; font-weight:700; color:var(--accent);
  }
  .photo-frame.drag-over .drop-hint{ display:flex; }

  .opt-hint{ margin-top:10px; font-size:.8rem; color:var(--text-faint); }
  .order-field-wide{ grid-column:1 / -1; }
  .order-field-wide em{ font-style:normal; color:var(--text-faint); }
  textarea.field{ resize:vertical; min-height:76px; font-family:inherit; }
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .order-status{ margin-top:14px; font-size:.88rem; line-height:1.5; display:none; }
  .order-status.show{ display:block; }
  .order-status.ok{ color:#7fd18f; }
  .order-status.err{ color:#e5836f; }
  .order-status.busy{ color:var(--text-dim); }
  .upload-row{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
  .upload-btn{
    display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
    background:var(--surface-2); border:1px solid var(--line); color:var(--text);
    font-family:inherit; font-size:.85rem; font-weight:600; padding:.7em 1.2em; border-radius:999px;
    transition:border-color .2s ease, color .2s ease;
  }
  .upload-btn:hover{ border-color:var(--accent); color:var(--accent-bright); }
  .upload-btn svg{ width:16px; height:16px; }
  .upload-clear{
    background:none; border:none; color:var(--text-faint); font-family:inherit;
    font-size:.82rem; font-weight:600; cursor:pointer; padding:.4em .2em;
  }
  .upload-clear:hover{ color:var(--accent-bright); text-decoration:underline; }

  .rotate-hint{ margin:16px 0 0; font-size:.8rem; color:var(--text-faint); text-align:center; }
  .preview-note{ margin:6px 0 0; font-size:.76rem; color:var(--text-faint); font-style:italic; text-align:center; }

  /* ---- example preview above every option group (cross-fades on pick) ---- */
  /* Кадърът е 20:7 — точно пропорцията на снимките 1200x420, така че те
     се побират цели, от край до край, без нищо да се изрязва. */
  /* Рамката е inset box-shadow, а не border — така пропорцията на кадъра е
     точна и снимката ляга в него от ръб до ръб, без празни ивици. */
  .option-preview{
    position:relative; width:100%; aspect-ratio:20/7; border-radius:14px; overflow:hidden;
    margin-bottom:14px; box-shadow:inset 0 0 0 1px var(--line); background:var(--surface-2);
  }
  /* „Тип на изписване“ ползва по-широки снимки — 714x147. */
  #methodPreview{ aspect-ratio:714/147; }
  /* Докато се показва истинска снимка, рисуваната фигура отдолу се крие
     напълно — иначе прозира при смяна на кутия/панделка/плик. */
  .option-preview.has-photo > *:not(.option-preview-img){ opacity:0 !important; visibility:hidden; }

  .opt-subhead{ margin-top:22px; }
  .opt-sublabel{ margin:0; font-size:.86rem; font-weight:700; color:var(--text); }

  .tex-wood{
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.12), transparent 62%),
      repeating-linear-gradient(94deg,
        color-mix(in srgb, var(--preview-color,#dcb98a) 92%, #000 8%) 0 3px,
        color-mix(in srgb, var(--preview-color,#dcb98a) 66%, #000 34%) 3px 7px);
    filter:saturate(.94) brightness(.74);
  }

  .option-preview-wood{
    position:absolute; inset:0; opacity:1; transform:scale(1);
    transition:opacity .22s ease, transform .22s ease;
  }
  .option-preview-wood.fading{ opacity:0; transform:scale(.97); }
  @media (prefers-reduced-motion: reduce){ .option-preview-wood{ transition:none; } }

  /* optional real PNG photo per option, set via config.js (image: "images/…png").
     Sits above the auto-generated preview below it and crossfades in only once
     the file has been confirmed to load — if it's missing/blank, the existing
     generated preview keeps showing underneath, so nothing ever looks broken. */
  /* contain, а не cover — снимката се вижда цяла. Ако някоя не е 1200x420,
     тя просто се смалява и отстрани остава фон, вместо да ѝ се реже краят. */
  .option-preview-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
    z-index:2; opacity:0; transition:opacity .22s ease; pointer-events:none; display:block;
  }
  .option-preview-img.visible{ opacity:1; }
  @media (prefers-reduced-motion: reduce){ .option-preview-img{ transition:none; } }

  /* frame-shape preview: a plaque silhouette whose corners switch round/sharp */
  .option-preview-frame{
    position:absolute; inset:14% 28%; background:var(--preview-color,#dcb98a);
    border-radius:20%; box-shadow:0 16px 30px -18px rgba(0,0,0,.6);
    opacity:1; transform:scale(1);
    transition:opacity .22s ease, transform .22s ease, border-radius .3s ease;
  }
  .option-preview-frame.sharp{ border-radius:8%; }
  .option-preview-frame.fading{ opacity:0; transform:scale(.97); }

  /* engrave-method preview: sample text on the wood plate */
  .option-preview-text{
    position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:0 11%; font-family:var(--font-ui); font-weight:500;
    color:rgba(255,255,255,.94); text-shadow:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
    opacity:1; transition:opacity .22s ease;
  }
  .option-preview-text.fading{ opacity:0; }
  .option-preview-text.engrave{ font-style:italic; font-weight:500; font-size:clamp(.95rem,2.6vw,1.2rem); letter-spacing:.01em; }
  .option-preview-text.laser{ font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:clamp(.72rem,1.9vw,.88rem); color:rgba(255,255,255,.88); }

  /* box preview: gift-box silhouette, flat color or wood-grain */
  .option-preview-box{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .option-preview-box .box-body{
    position:relative; width:44%; aspect-ratio:1/.82; border-radius:6px;
    background:var(--preview-color,#f4ede0); box-shadow:0 16px 30px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.18);
    overflow:hidden; opacity:1; transform:scale(1); transition:opacity .22s ease, transform .22s ease;
  }
  .option-preview-box .box-body.fading{ opacity:0; transform:scale(.97); }
  .option-preview-box .box-lid{
    position:absolute; left:-6%; right:-6%; top:0; height:18%;
    background:color-mix(in srgb, var(--preview-color,#f4ede0) 80%, #000 20%);
  }
  .option-preview-box .box-body.wood .box-lid{ display:none; }

  /* envelope preview */
  .option-preview-env{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .option-preview-env .env-body{
    position:relative; width:52%; aspect-ratio:3/2; border-radius:6px;
    background:var(--preview-color,#ecd9b8); box-shadow:0 14px 26px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.16);
    overflow:hidden; opacity:1; transform:scale(1); transition:opacity .22s ease, transform .22s ease;
  }
  .option-preview-env .env-body.fading{ opacity:0; transform:scale(.97); }
  .option-preview-env .env-flap{ position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.32), transparent 55%); }
  .option-preview-env .env-flap::after{
    content:""; position:absolute; left:0; right:0; top:0; height:62%;
    background:color-mix(in srgb, var(--preview-color,#ecd9b8) 78%, #000 22%);
    clip-path:polygon(0 0, 100% 0, 50% 100%);
  }

  /* ribbon preview: bow + ribbon cross on a neutral card */
  .option-preview-ribbon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .option-preview-ribbon .rib-card{
    /* fixed light "wrapping paper" tone (not a dark-theme token) so any
       ribbon color, including black, stays visible against it */
    position:relative; width:46%; aspect-ratio:1/.82; border-radius:6px; background:#eee3cf;
    box-shadow:0 14px 26px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.14); overflow:visible;
    opacity:1; transform:scale(1); transition:opacity .22s ease, transform .22s ease;
  }
  .option-preview-ribbon .rib-card.fading{ opacity:0; transform:scale(.97); }
  .option-preview-ribbon .rib-v{ position:absolute; top:0; bottom:0; left:50%; width:16%; margin-left:-8%; background:var(--preview-color,#c9a227); }
  .option-preview-ribbon .rib-h{ position:absolute; left:0; right:0; top:38%; height:16%; background:var(--preview-color,#c9a227); }
  .option-preview-ribbon .rib-bow{
    /* kept inside the card bounds (not overflowing above it) since the
       surrounding .option-preview panel clips overflow */
    position:absolute; top:4%; left:50%; width:26%; aspect-ratio:1.6/1; margin-left:-13%;
    background:var(--preview-color,#c9a227); border-radius:50% 50% 40% 40%/60% 60% 40% 40%;
  }
  @media (prefers-reduced-motion: reduce){
    .option-preview-frame, .option-preview-box .box-body, .option-preview-env .env-body, .option-preview-ribbon .rib-card, .option-preview-text{ transition:none; }
  }


  .opt-group{ padding-block:26px; border-top:1px solid var(--line-soft); }
  .opt-group:first-child{ border-top:none; padding-top:0; }

  /* ---------------- configurator wizard (right column) ---------------- */
  .wizard-col{ display:flex; flex-direction:column; }
  .wizard-progress{ margin-bottom:24px; }
  .wizard-dots{ display:flex; gap:6px; list-style:none; padding:0; margin:0 0 12px; }
  .wizard-dots li{ flex:1; display:flex; }
  .wizard-dots button{
    width:100%; height:4px; border-radius:999px; border:none; background:var(--line-soft);
    cursor:pointer; padding:0; transition:background-color .2s ease, transform .2s ease;
  }
  .wizard-dots button:hover{ transform:scaleY(1.4); }
  .wizard-dots button.done{ background:var(--accent); }
  .wizard-dots button.active{ background:var(--accent-bright); }
  .wizard-stepline{ font-size:.82rem; color:var(--text-faint); }
  .wizard-stepline strong{ color:var(--text); font-weight:700; }
  .wizard-stepline span{ color:var(--accent-bright); font-weight:600; }

  .wizard-panels{ position:relative; }
  .wizard-step{ display:none; }
  .wizard-step.active{ display:block; animation:wizardIn .32s ease; }
  @keyframes wizardIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){ .wizard-step.active{ animation:none; } }

  .wizard-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:32px; }
  .wizard-nav button{ flex:1; }
  /* .btn sets display:inline-flex, which (being an author rule) otherwise
     beats the browser's default `[hidden]{display:none}` UA style — so a
     hidden nav button would still render without this explicit override */
  #wizardBack[hidden], #wizardNext[hidden]{ display:none; }

  .order-fields{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
  .order-field{ display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--text-dim); font-weight:600; }
  .order-field .field{ font-weight:400; font-size:.95rem; }
  .order-field .field:invalid:not(:placeholder-shown){ outline:1px solid #c85a52; }
  .opt-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .opt-head h3{ font-size:1rem; }
  .opt-head span{ font-size:.84rem; color:var(--accent-bright); font-weight:600; }
  .opt-head span:not([id]){ color:var(--text-faint); font-weight:500; }

  .swatches{ display:flex; flex-wrap:wrap; gap:12px; }
  .swatch{
    width:38px; height:38px; border-radius:50%; border:2px solid transparent; padding:2px;
    background:transparent; cursor:pointer; position:relative;
  }
  .swatch span{ display:block; width:100%; height:100%; border-radius:50%; background:var(--sw-color); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
  .swatch:hover{ border-color:var(--line); }
  .swatch.active{ border-color:var(--accent); }

  .seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; }
  .seg button{
    display:flex; align-items:center; gap:.5em; background:none; border:none; color:var(--text-dim);
    font-size:.85rem; font-weight:600; padding:.6em 1.1em; border-radius:999px; cursor:pointer; transition:background-color .2s ease, color .2s ease;
  }
  .seg button svg{ width:15px; height:15px; }
  .seg button.active{ background:var(--accent); color:#1a1206; }
  /* Size picker: a grid rather than the pill row, so any number of sizes
     from config.js lays out evenly instead of leaving a ragged last line. */
  .seg-wrap{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:6px; border-radius:var(--radius-md); width:100%;
  }
  .seg-wrap button{
    justify-content:center; text-align:center; border-radius:var(--radius-sm);
    padding:.75em .6em; line-height:1.3;
  }
  @media (max-width:420px){
    .seg-wrap{ grid-template-columns:1fr 1fr; }
  }

  .field{
    width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
    color:var(--text); font-family:inherit; font-size:.95rem; padding:12px 14px; resize:vertical;
  }
  .field:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .field-note{ margin-top:6px; font-size:.76rem; color:var(--text-faint); text-align:right; }

  .summary-card{
    margin-top:30px; background:linear-gradient(165deg, var(--surface), var(--bg-1)); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:clamp(24px,3.4vw,32px); box-shadow:0 40px 80px -50px var(--shadow);
  }
  .summary-card .label{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
  .summary-card h3{ margin-top:6px; }
  .summary-list{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
  .summary-list li{ display:flex; justify-content:space-between; gap:12px; font-size:.88rem; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
  .summary-list li span:first-child{ color:var(--text-faint); }
  .summary-list li span:last-child{ color:var(--text); font-weight:500; text-align:right; }
  .summary-price{ display:flex; align-items:baseline; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  .summary-price strong{ font-size:1.8rem; font-weight:800; color:var(--text); }
  .summary-actions{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
  .copied-flag{ margin-top:10px; text-align:center; font-size:.82rem; color:var(--accent-bright); font-weight:600; opacity:0; transition:opacity .2s ease; }
  .copied-flag.show{ opacity:1; }
  .privacy-note{ margin-top:20px; display:flex; gap:.6em; font-size:.76rem; color:var(--text-faint); line-height:1.5; }
  .privacy-note svg{ width:16px; height:16px; flex:none; color:var(--accent); margin-top:1px; }

  /* ---------------- occasions ---------------- */
  .occasions{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); margin-top:44px; border-radius:var(--radius-lg); overflow:hidden; }
  .occ-card{ background:var(--bg-1); padding:30px 22px; text-align:center; }
  .occ-card svg{ width:64px; height:64px; color:var(--accent); }
  .occ-card h3{ margin-top:16px; font-size:1.05rem; }
  .occ-card p{ margin-top:8px; color:var(--text-dim); font-size:.9rem; line-height:1.55; }
  @media (max-width:1080px){ .occasions{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:820px){ .occasions{ grid-template-columns:1fr 1fr; } }
  /* 16 повода на телефон: по 2 на ред, за да не става секцията безкрайна */
  @media (max-width:520px){ .occasions{ grid-template-columns:1fr 1fr; } }
  /* mobile: bigger icons and tighter cards, matching the features row */
  @media (max-width:640px){
    .occ-card{ padding:24px 14px; }
    .occ-card svg{ width:58px; height:58px; }
    .occ-card h3{ margin-top:12px; font-size:.98rem; }
    .occ-card p{ margin-top:6px; font-size:.82rem; }
  }

  /* ---------------- faq ---------------- */
  .faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,5vw,60px); }
  @media (max-width:800px){ .faq-grid{ grid-template-columns:1fr; } }
  .faq-item{ border-top:1px solid var(--line-soft); }
  .faq-item:last-child{ border-bottom:1px solid var(--line-soft); }
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:none; border:none; color:var(--text); font-family:inherit; font-size:1rem; font-weight:600;
    padding:20px 0; cursor:pointer; text-align:left;
  }
  .faq-q svg{ width:18px; height:18px; color:var(--accent); flex:none; transition:transform .25s ease; }
  .faq-item.open .faq-q svg{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .faq-a p{ padding:0 0 22px; color:var(--text-dim); font-size:.95rem; line-height:1.6; max-width:60ch; }

  /* ---------------- contact ---------------- */
  .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:start; }
  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-list{ margin-top:30px; display:flex; flex-direction:column; gap:18px; }
  .contact-list a, .contact-list .row{ display:flex; align-items:center; gap:16px; }
  .cicon{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none;
  }
  .cicon svg{ width:19px; height:19px; color:var(--accent); }
  .contact-list .t1{ font-weight:600; font-size:.98rem; }
  .contact-list .t2{ font-size:.82rem; color:var(--text-faint); }
  .social-label{ margin-top:30px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
  .social-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
  .social-row a{
    height:42px; padding:0 16px 0 13px; gap:9px; border-radius:999px; border:1px solid var(--line); display:inline-flex; align-items:center;
    color:var(--text-dim); font-size:.88rem; font-weight:600; text-decoration:none;
    transition:border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  .social-row a:hover{ border-color:var(--accent); color:var(--accent-bright); background:rgba(214,154,82,.07); }
  .social-row svg{ width:18px; height:18px; flex:none; }

  /* ---------------- контактна форма ---------------- */
  .contact-form{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
  .contact-form .order-field{ display:flex; flex-direction:column; gap:7px; }
  .contact-form .order-field > span{ font-size:.82rem; font-weight:600; color:var(--text-dim); }
  .contact-form .field{ font-weight:400; font-size:.95rem; width:100%; }
  .contact-form textarea.field{ min-height:120px; }

  /* ---- промо код в резюмето ---- */
  .promo-box{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
  .promo-label{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-faint); margin-bottom:8px; }
  .promo-row{ display:flex; gap:8px; align-items:stretch; }
  .promo-row .field{ flex:1; min-width:0; letter-spacing:.04em; }
  .promo-row .field::placeholder{ letter-spacing:0; }
  .promo-row .btn{ flex:none; white-space:nowrap; }
  .promo-msg{ margin:8px 0 0; font-size:.84rem; min-height:1.1em; }
  /* ---- съгласие с общите условия ---- */
  .consent-row{ display:flex; gap:10px; align-items:flex-start; margin-top:18px;
    font-size:.88rem; line-height:1.55; color:var(--text-dim); cursor:pointer; }
  .consent-row input{ flex:none; width:18px; height:18px; margin-top:2px;
    accent-color:var(--accent); cursor:pointer; }
  .consent-row a{ color:var(--accent); }
  .consent-row.missing{ color:#e08f8f; }
  .consent-row.missing input{ outline:2px solid #e08f8f; outline-offset:2px; border-radius:3px; }

  .promo-msg.ok{ color:#7fc79b; }
  .promo-msg.err{ color:#e08f8f; }
  .promo-box.applied .promo-row .field{ border-color:#4f8f68; color:#9fd8b4; font-weight:600; }
  .summary-price .was{ display:block; font-size:.82rem; color:var(--text-faint);
    text-decoration:line-through; font-weight:400; margin-bottom:2px; }
  @media (max-width:420px){
    .promo-row{ flex-wrap:wrap; }
    .promo-row .btn{ flex:1; }
  }
  .contact-form .field:invalid:not(:placeholder-shown){ outline:1px solid #c85a52; }
  .contact-form .field-note{ margin-top:2px; }
  .contact-form .btn{ margin-top:4px; justify-content:center; }
  .contact-form .btn[disabled]{ opacity:.6; cursor:progress; }
  .contact-card{
    background:linear-gradient(165deg, var(--surface), var(--bg-1)); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:clamp(26px,4vw,38px); box-shadow:0 40px 80px -50px var(--shadow);
  }
  .contact-card .label{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
  .contact-card h3{ margin-top:8px; }
  .contact-card p{ margin-top:10px; }
  .contact-card .stack{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }

  /* ---------------- footer ---------------- */
  footer{ border-top:1px solid var(--line-soft); padding-block:44px; background:var(--bg-1); }
  .foot-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .foot-brand{ display:flex; align-items:center; gap:.6em; font-weight:700; }
  .foot-brand img{ width:112px; height:112px; border-radius:50%; object-fit:contain; }
  .foot-links{ display:flex; gap:1.4em; flex-wrap:wrap; }
  .foot-links a{ font-size:.86rem; color:var(--text-dim); }
  .foot-links a:hover{ color:var(--text); }
  .foot-meta{ font-size:.78rem; color:var(--text-faint); margin-top:22px; text-align:center; }

  /* ---------------- floating chrome ---------------- */
  .totop{
    position:fixed; right:22px; bottom:22px; z-index:500; width:46px; height:46px; border-radius:50%;
    background:rgba(10,9,7,.8); backdrop-filter:blur(10px); border:1px solid var(--line); color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
  }
  .totop.show{ opacity:1; pointer-events:auto; transform:none; }
  .totop:hover{ border-color:var(--accent); color:var(--accent); }
  .totop svg{ width:18px; height:18px; transform:rotate(-90deg); }

  .order-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:480; display:none; align-items:center; justify-content:space-between;
    gap:14px; padding:14px 18px; background:rgba(14,12,8,.88); backdrop-filter:blur(16px); border-top:1px solid var(--line);
    opacity:0; transform:translateY(100%); transition:opacity .25s ease, transform .25s ease;
  }
  .order-bar.show{ opacity:1; transform:none; }
  .order-bar-price strong{ font-size:1.1rem; }
  .order-bar-price span{ display:block; font-size:.72rem; color:var(--text-faint); }
  @media (max-width:760px){
    .order-bar{ display:flex; }
    .totop{ bottom:88px; }
  }

  /* ---------------- products dropdown ---------------- */
  nav.primary .nav-group{ position:relative; }
  .nav-trigger{
    display:inline-flex; align-items:center; gap:.4em;
    font-family:inherit; font-size:.86rem; font-weight:500; color:var(--text-dim);
    background:none; border:0; padding:6px 0; cursor:pointer; transition:color .2s ease;
  }
  .nav-trigger:hover, .nav-group.open > .nav-trigger{ color:var(--text); }
  .nav-trigger .chev{ width:11px; height:11px; transition:transform .2s ease; flex:none; }
  .nav-group.open > .nav-trigger .chev{ transform:rotate(180deg); }

  .nav-menu{
    position:absolute; top:calc(100% + 12px); left:-14px; min-width:232px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:8px; box-shadow:0 24px 48px -24px rgba(0,0,0,.8);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  .nav-group.open > .nav-menu{ opacity:1; visibility:visible; transform:none; }
  .nav-menu a, .nav-menu .nav-trigger{
    display:flex; align-items:center; justify-content:space-between; gap:.6em;
    width:100%; padding:10px 12px; border-radius:9px; font-size:.88rem;
    color:var(--text-dim); text-decoration:none; text-align:left;
  }
  .nav-menu a:hover, .nav-menu .nav-trigger:hover,
  .nav-menu .nav-group.open > .nav-trigger{ background:rgba(255,255,255,.05); color:var(--text); }
  .nav-menu .nav-group{ position:relative; }
  /* the nested list flies out to the side on desktop */
  .nav-menu .nav-menu{ top:-9px; left:calc(100% + 6px); min-width:236px; }
  /* Продукти сега стои близо до десния край, затова менюто виси отдясно на
     бутона, а вложеното се обръща наляво, когато вдясно няма място. */
  nav.primary > .nav-group > .nav-menu{ left:auto; right:-14px; }
  @media (max-width:1200px){
    .nav-menu .nav-menu{ left:auto; right:calc(100% + 6px); }
  }
  .nav-menu .nav-trigger .chev{ transform:rotate(-90deg); }
  .nav-menu .nav-group.open > .nav-trigger .chev{ transform:rotate(-90deg); }
  .nav-sep{ height:1px; margin:6px 10px; background:var(--line-soft); }
  /* Под тази ширина вложеният списък се отваря наляво, затова и стрелката
     сочи наляво. Стои след правилата по-горе, за да ги надделее. */
  @media (max-width:1200px){
    .nav-menu .nav-trigger .chev,
    .nav-menu .nav-group.open > .nav-trigger .chev{ transform:rotate(90deg); }
  }

  @media (max-width:860px){
    /* inside the mobile sheet everything stacks and expands in place */
    nav.primary .nav-group{ width:100%; }
    .nav-trigger{
      width:100%; justify-content:space-between; padding:16px 0;
      font-size:1.3rem; color:var(--text); border-bottom:1px solid var(--line-soft);
    }
    .nav-trigger .chev{ width:14px; height:14px; }
    .nav-menu{
      position:static; opacity:1; visibility:visible; transform:none;
      background:transparent; border:0; box-shadow:none; border-radius:0;
      padding:0 0 0 14px; min-width:0; display:none;
    }
    .nav-group.open > .nav-menu{ display:block; }
    /* `nav.primary a` from the base sheet is more specific than `.nav-menu a`,
       so the selector has to match it to keep both levels the same size. */
    nav.primary .nav-menu a, .nav-menu .nav-trigger{
      font-size:1.02rem; padding:13px 0; border-bottom:1px solid var(--line-soft);
      border-radius:0;
    }
    /* no highlight band on the expanded parent — it reads as a selected row */
    .nav-menu .nav-group.open > .nav-trigger{ background:transparent; }
    .nav-menu .nav-menu{ left:auto; top:auto; padding-left:14px; }
    .nav-menu .nav-trigger .chev,
    .nav-menu .nav-group.open > .nav-trigger .chev{ transform:none; }
    .nav-menu .nav-group.open > .nav-trigger .chev{ transform:rotate(180deg); }
    .nav-sep{ display:none; }
  }

  /* ---------------- order confirmation popup ---------------- */
  .modal-back{
    /* above the sticky order bar (480), the back-to-top button (500) and the
       header (900) — otherwise they stay lit on top of the dimmed page */
    position:fixed; inset:0; z-index:3000; display:none;
    align-items:center; justify-content:center; padding:24px;
    background:rgba(0,0,0,.72); backdrop-filter:blur(3px);
  }
  .modal-back.show{ display:flex; }
  .modal-card{
    width:min(460px, 100%); background:var(--surface); color:var(--text);
    border:1px solid var(--line); border-radius:22px; padding:34px 30px 28px;
    text-align:center; box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
    animation:modalIn .26s cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } }
  @media (prefers-reduced-motion: reduce){ .modal-card{ animation:none; } }
  .modal-tick{
    width:62px; height:62px; margin:0 auto 18px; border-radius:50%;
    background:rgba(127,209,143,.14); border:1px solid rgba(127,209,143,.45);
    display:flex; align-items:center; justify-content:center;
  }
  .modal-tick svg{ width:30px; height:30px; color:#7fd18f; }
  .modal-card h3{ margin:0; font-size:1.32rem; font-weight:800; letter-spacing:-.02em; }
  .modal-card p{ margin:12px 0 0; color:var(--text-dim); font-size:.95rem; line-height:1.6; }
  .modal-card .btn{ margin-top:24px; width:100%; }
  .modal-close{
    position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
    border:1px solid var(--line); background:transparent; color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .modal-close:hover{ color:var(--text); background:rgba(255,255,255,.06); }
  .modal-close svg{ width:14px; height:14px; }
  .modal-card{ position:relative; }

  /* социалните мрежи във футъра — видими на всяка страница */
  .foot-social{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px; padding-top:24px; border-top:1px solid var(--line-soft); }
  .foot-social a{
    height:40px; padding:0 16px 0 13px; gap:9px; border-radius:999px; border:1px solid var(--line);
    display:inline-flex; align-items:center; color:var(--text-dim); font-size:.86rem; font-weight:600; text-decoration:none;
    transition:border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  .foot-social a:hover{ border-color:var(--accent); color:var(--accent-bright); background:rgba(214,154,82,.07); }
  .foot-social svg{ width:17px; height:17px; flex:none; }

  /* закотвените секции спират под фиксирания хедър, а не под него */
  section[id], main[id]{ scroll-margin-top: 96px; }