/*
 * RalliTark shop styles.
 *
 * The tokens, type scale, nav, hero, ticket and confirmation card below come
 * from the client approved design export (scripts/kavand_import.php writes the
 * mockups to public/kavand). They were lifted once and now live here as normal
 * source: the mockups only show the happy path, and the real shop also has
 * errors, empty states, sold out forms and admin edited content to style.
 *
 * Page level rules are scoped to the body class that src/layout.php sets, so
 * the checkout's slim footer and the front page's dark one can share a file
 * without fighting. Scopes: .page-shop (front page and text pages),
 * .page-checkout, .page-confirmation. The admin has its own admin.css.
 *
 * Dark rally theme since 02.09.2026 (docs/04). NB: the token NAMES come from
 * the old light theme and their values are now inverted, so --brown is the
 * LIGHT colour. Never guess a colour from its token name here.
 */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlowc-i700-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlowc-i700-lat.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/barlowc-i800-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/barlowc-i800-lat.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/azeret-400-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/azeret-400-lat.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/954cf92aa22d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/492771231d9b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/a310474d2731.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/57fd1acf8d96.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/a310474d2731.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/57fd1acf8d96.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/a310474d2731.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/57fd1acf8d96.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/a310474d2731.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/57fd1acf8d96.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{color-scheme:dark;--shell:1680px;--gutter:clamp(18px,4vw,80px);--ink:#120002;--ink-2:#1A0507;--ink-3:#0C0001;--field:#0B0001;--cream:#F7F1E5;--paper:#1A0507;--brown:#F7F1E5;--taupe:#0C0001;--red:#8E0C12;--red-hot:#BC0000;--orange:#FF5A3C;--green:#FF5A3C;--green-dark:#FF7C64;--green-deep:#FF5A3C;--green-tint:#2B0B0D;--muted:rgba(247,241,229,.78);--soft:rgba(247,241,229,.5);--line:rgba(247,241,229,.18);--line-2:rgba(247,241,229,.32);--sand:#1A0507}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- index ---------- */
.page-shop a{color:var(--green);text-decoration-color:rgba(255,90,60,.35)}
.page-shop a:hover{color:var(--green-dark)}
.page-shop h1, .page-shop h2, .page-shop h3{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;margin:0}
.page-shop .wrap{width:100%;max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.page-shop .disp{font-weight:800;letter-spacing:.005em;line-height:1;text-transform:uppercase}
.page-shop .btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;font-family:'Barlow Condensed',system-ui,sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:0;transition:background .15s ease,color .15s ease}
.page-shop .btn-dark{background:var(--red-hot);color:var(--cream);font-size:22px;padding:15px 34px;box-shadow:0 14px 34px rgba(188,0,0,.34)}
.page-shop .btn-green{background:var(--cream);color:var(--ink)}
.page-shop nav{display:flex;justify-content:space-between;align-items:center;padding:16px var(--gutter);border-bottom:1px solid var(--line);max-width:var(--shell);margin:0 auto}
.page-shop .brand{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;font-size:24px;letter-spacing:.01em;color:var(--cream);text-decoration:none;border-bottom:0}
/* The wordmark is a picture now, so the brand link only has to hold it: the
   type rules above still apply to the alt text if the file ever fails to load.
   Height, never width: the logo is 2.7:1 and the nav is what sets the scale. */
.page-shop .brand{display:inline-flex;align-items:center}
.brand-mark{display:block;height:40px;width:auto}
.page-shop .foot-brand .brand-mark{height:38px}
.page-shop .nav-links{display:flex;gap:8px}
.page-shop .pill{border:1px solid var(--line-2);border-radius:0;padding:9px 18px;font-family:'Azeret Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;background:transparent;color:var(--muted);text-decoration:none;transition:border-color .15s,color .15s}
.page-shop .nav-buy{font-size:16px;padding:0 20px;height:40px;line-height:40px;border-radius:0;font-family:'Barlow Condensed',system-ui,sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.page-shop .hero{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,4vw,56px);align-items:start;padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(36px,5vw,68px)}
.page-shop .hero-badge{display:inline-block;background:transparent;border:1px solid var(--line-2);color:var(--muted);font-family:'Azeret Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:0;transform:none;margin-bottom:24px}
.page-shop .hero h1{font-size:clamp(46px,7.4vw,112px);line-height:.9;letter-spacing:.005em;font-weight:800}
.page-shop .hero-sub{font-size:19px;color:var(--muted);max-width:460px;margin:26px 0 30px}
.page-shop .buy-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.page-shop .qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:0;background:transparent;overflow:hidden}
.page-shop .qty button{width:46px;height:54px;border:0;background:none;font-size:20px;font-weight:600;color:var(--soft);cursor:pointer;font-family:'Figtree',sans-serif}
.page-shop .qty span{width:36px;text-align:center;font-family:'Azeret Mono',ui-monospace,monospace;font-weight:500;font-size:16px}
.page-shop .rules-link{font-weight:600;font-size:15px;color:var(--cream);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--orange)}
.page-shop .trust{display:flex;gap:22px;margin-top:26px;font-family:'Azeret Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);flex-wrap:wrap}
.page-shop .trust span{display:flex;align-items:center;gap:7px}
.page-shop .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.page-shop .chips{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;align-items:center}
.page-shop .chip{background:transparent;border:1px solid var(--line);font-family:'Azeret Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 14px;border-radius:0}
.page-shop .note-mono{font:10.5px 'Azeret Mono',ui-monospace,monospace;letter-spacing:.12em;color:var(--soft)}
.page-shop .fan{position:relative;height:440px}
.page-shop .card{position:absolute;width:186px;height:264px;border-radius:0;box-shadow:0 16px 34px rgba(0,0,0,.24);padding:16px}
.page-shop .card .strip{height:12px;border-radius:0;background:repeating-conic-gradient(rgba(247,241,229,.85) 0% 25%,transparent 0% 50%);background-size:13px 13px}
.page-shop .card .rt{font-style:italic;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:56px;text-align:center;margin-top:70px}
.page-shop .sticker{position:absolute;width:118px;height:118px;background:var(--red);border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg);box-shadow:0 14px 30px rgba(0,0,0,.5);border:2px solid var(--cream);color:var(--cream);text-align:center}
.page-shop .ticker-band{background:var(--red);overflow:hidden;padding:13px 0;transform:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-shop .ticker{display:flex;white-space:nowrap;width:max-content;animation:tick 26s linear infinite}
.page-shop .ticker span{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;font-size:19px;color:var(--cream);letter-spacing:.06em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){
.page-shop .ticker{animation:none}
}
.page-shop .sec-title{font-size:clamp(38px,4.5vw,54px);margin-bottom:40px;text-transform:uppercase;letter-spacing:.005em}
.page-shop .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.page-shop .why{border:1px solid var(--line);border-radius:0;padding:30px;transition:border-color .15s ease}
.page-shop .why h3{font-size:22px;margin-bottom:10px;font-weight:800}
.page-shop .why p{margin:0;font-size:15.5px;color:var(--muted)}
.page-shop .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.page-shop .ph{aspect-ratio:4/3;border-radius:0;border:1px dashed var(--line-2);background:repeating-linear-gradient(45deg,#160406 0 18px,#1D0708 18px 36px);display:grid;place-items:center}
.page-shop .ph em{background:var(--ink);border-radius:0;padding:8px 16px;font:11px 'Azeret Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--soft)}
.page-shop .faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.page-shop .faq details{background:var(--ink-2);border:1px solid var(--line);border-radius:0;padding:0;transition:border-color .15s}
.page-shop .faq details[open]{border-color:var(--line-2)}
.page-shop .faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;font-size:17px;padding:22px 26px;cursor:pointer;list-style:none}
.page-shop .faq summary::-webkit-details-marker{display:none}
.page-shop .faq summary::after{content:"+";font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;font-size:28px;color:var(--orange);line-height:1;transition:transform .15s}
.page-shop .faq details[open] summary::after{transform:rotate(45deg)}
.page-shop .faq details p{margin:0;padding:0 26px 22px;font-size:15px;line-height:1.65;color:var(--muted)}
.page-shop .cta-band{background:var(--red);border-radius:0;padding:clamp(56px,7vw,86px) 0 clamp(52px,6vw,72px);position:relative;overflow:hidden;margin-top:clamp(48px,6vw,80px)}
.page-shop .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.page-shop .cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:30px;background-image:repeating-linear-gradient(90deg,var(--cream) 0 15px,transparent 15px 30px),repeating-linear-gradient(90deg,transparent 0 15px,var(--cream) 15px 30px);background-size:100% 15px,100% 15px;background-position:0 0,0 15px;background-repeat:no-repeat}
.page-shop .cta-band h2{font-size:clamp(40px,5vw,58px);line-height:.95;letter-spacing:.005em;color:var(--cream);max-width:560px;text-transform:uppercase}
.page-shop footer{background:var(--ink-3);color:var(--muted);border-top:1px solid var(--line)}
@media (max-width:960px){
.page-shop .cta-inner{flex-direction:column;align-items:flex-start;gap:28px}
}

/* ==========================================================================
   Kassa ja kinnitus, kavand D "Boksileht + ajakaart"
   (docs/kavand-2026-09/kassa/Boksileht.dc.html, Kinnitus.dc.html).

   Vasak pool on kreemjas boksileht kaldlõikega nagu avalehe kreemjad ribad,
   sektsiooninumbrid on hiiglaslikud kontuurid tausta sees. Parem pool on
   tume, valgusvihuga nagu avalehe kangelane, ja seal lebab ajakaart: valge
   kaart lauale visatud, kaks lehte all, pitsat nurgal, rebimisjoon, punane
   nupp. Kinnitusel saab sama kaart templi. Kreemja poole värvid on avalehe
   kreemja riba omad (tint #1A0507, punane #BC0000), mitte lehe muutujad,
   sest muutujad on pööratud tumeda lehe jaoks (--brown on HELE).
   ========================================================================== */

.page-checkout, .page-confirmation { overflow-x: hidden; }
.page-checkout a, .page-confirmation a { color: var(--orange); text-decoration-color: rgba(255,90,60,.35); }
.page-checkout a:hover, .page-confirmation a:hover { color: var(--green-dark); }
.page-checkout .brico, .page-confirmation .brico { font-style: italic; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; }
.page-checkout .mono, .page-confirmation .mono { font: 500 13px 'Azeret Mono', ui-monospace, monospace; letter-spacing: .04em; white-space: nowrap; }

/* ---------- kest: nav ja jalus ---------- */
.page-checkout nav, .page-confirmation nav {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line);
  max-width: var(--shell); margin: 0 auto;
}
.page-checkout .brand, .page-confirmation .brand { display: block; border-bottom: 0; }
.page-checkout .brand-mark, .page-confirmation .brand-mark { height: 34px; }
.page-checkout .crumbs {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--soft);
}
.page-checkout .crumbs .on { color: var(--cream); }
.page-checkout .crumbs i { width: 26px; height: 1px; background: var(--line-2); }
.page-checkout .back, .page-confirmation .back {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}

.page-checkout .site-footer, .page-confirmation .site-footer {
  display: flex; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  padding: 18px var(--gutter);
  border-top: 1px solid var(--line);
  max-width: var(--shell); margin: 0 auto;
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em;
  color: var(--soft);
}
.page-checkout .site-footer a, .page-confirmation .site-footer a { color: var(--muted); text-decoration: none; }

/* ---------- kassa: kaks poolt ---------- */
.page-checkout .grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 500px;
  max-width: var(--shell); margin: 0 auto; align-items: stretch;
  /* The glow behind the card reaches past the page edge; paint containment
     clips it without making the grid a scroll container, so the card stays
     sticky to the viewport. overflow: hidden here would break the sticky. */
  contain: paint;
}
.page-checkout .grid-empty { padding: 48px var(--gutter); }

/* Kreemjas boksileht. Kaldlõige on ülaserval nagu avalehe kreemjatel ribadel. */
.page-checkout .col-form {
  position: relative;
  background: var(--cream); color: #1A0507;
  clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 100%);
  padding: 48px var(--gutter) 48px;
  display: grid; gap: 40px; align-content: start;
}
.page-checkout .col-form > section { position: relative; }

.page-checkout .stephead {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  /* Sammupealkiri ON h2 (ekraanilugeja jaoks on kassal peatükid). Brauseri
     oma h2 vahed tuleb nulli panna, muidu nihkub kavand paar pikslit. */
  margin: 0;
  padding: 26px 0 10px;
  border-bottom: 2.5px solid #1A0507;
  font-weight: inherit;
}
/* Kontuurnumber tausta sees, nagu kavandis. Ei ole sisu, ainult pilt. */
.page-checkout .stephead .num {
  position: absolute; left: -10px; top: -40px;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 130px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(188,0,0,.22);
  pointer-events: none; user-select: none;
}
.page-checkout .stephead .t {
  position: relative;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 30px; line-height: .95;
  letter-spacing: .005em; text-transform: uppercase; color: #1A0507;
}
.page-checkout .stephead .tag {
  position: relative;
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #8E0C12; white-space: nowrap;
}

.page-checkout .panel { padding-top: 18px; display: grid; gap: 14px; }
.page-checkout .lbl {
  display: block;
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(26,5,7,.6); margin-bottom: 6px;
}
.page-checkout .inp {
  width: 100%;
  border: 1.5px solid #1A0507; border-radius: 0; background: #FFFFFF;
  padding: 10px 14px;
  font-size: 15px; font-family: 'Figtree', system-ui, sans-serif; color: #1A0507;
  transition: box-shadow .15s, border-color .15s;
}
.page-checkout .inp::placeholder { color: #A08F7A; }
/* Vea sisend: punane raam ja oranž vari, abirida all (kassa.php
   checkout_field_err_html). Fookus võidab, sama punane. */
.page-checkout .inp[aria-invalid="true"] { border-color: #BC0000; box-shadow: 4px 4px 0 #E0684A; }
.page-checkout .field-err { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: #7A0000; }
.page-checkout .terms-err { box-shadow: 0 0 0 2px #BC0000; padding: 6px 8px; margin: 0 -8px 8px; }
.page-checkout .col-form [id] { scroll-margin-top: 16px; }
.page-checkout.has-thumb-bar .col-form [id] { scroll-margin-top: 80px; }
.page-checkout .inp:focus { outline: none; border-color: #BC0000; box-shadow: 4px 4px 0 #BC0000; }
.page-checkout .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }

.page-checkout .check-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; font-weight: 600; color: #1A0507;
  cursor: pointer; min-height: 36px;
}
.page-checkout .check-row input {
  appearance: none; width: 18px; height: 18px; margin: 0; flex: none;
  border: 1.5px solid #1A0507; background: #FFFFFF; border-radius: 0;
  display: grid; place-items: center; cursor: pointer;
}
.page-checkout .check-row input:checked::after { content: ""; width: 10px; height: 10px; background: #BC0000; }
.page-checkout .company-fields { display: grid; gap: 14px; }
.page-checkout .company-fields[hidden] { display: none; }

/* Tarneviisid kahes veerus nagu kavandis C, kitsal ekraanil ühes. */
.page-checkout .carriers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.page-checkout .carrier {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid #1A0507; background: #FFFFFF; border-radius: 0;
  cursor: pointer; font-size: 15px; font-weight: 600; color: #1A0507;
  transition: box-shadow .15s, border-color .15s;
}
.page-checkout .carrier input {
  appearance: none; width: 18px; height: 18px; margin: 0; flex: none;
  border-radius: 50%; border: 1.5px solid #1A0507;
  display: grid; place-items: center; cursor: pointer;
}
.page-checkout .carrier input:checked { border-color: #BC0000; }
.page-checkout .carrier input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #BC0000; }
.page-checkout .carrier:has(input:checked) { border-color: #BC0000; box-shadow: 4px 4px 0 #BC0000; font-weight: 700; }
.page-checkout .carrier .price {
  margin-left: auto;
  font: 500 12px 'Azeret Mono', ui-monospace, monospace; letter-spacing: .08em;
  color: rgba(26,5,7,.6); white-space: nowrap;
}
.page-checkout .carrier:has(input:checked) .price { color: #BC0000; }

.page-checkout .pickup { margin-top: 16px; }
.page-checkout .pickup[hidden] { display: none; }
.page-checkout .address { display: grid; gap: 14px; }
.page-checkout .pak-list {
  border: 1.5px solid #1A0507; border-top: 0; background: #FFFFFF;
  max-height: 220px; overflow-y: auto;
}
/* Raadiorida, mitte select: töötab ilma JavaScriptita ja vahetatud vedaja ei
   jäta vana automaadi id-d maha. */
.page-checkout .pak {
  display: flex; align-items: center; gap: 12px;
  min-height: 42px; padding: 9px 14px;
  font-size: 14.5px; color: #1A0507; cursor: pointer;
  border-top: 1px solid rgba(26,5,7,.14);
}
.page-checkout .pak:first-child { border-top: 0; }
.page-checkout .pak input {
  appearance: none; width: 16px; height: 16px; margin: 0; flex: none;
  border-radius: 50%; border: 1.5px solid #1A0507;
  display: grid; place-items: center; cursor: pointer;
}
.page-checkout .pak input:checked { border-color: #BC0000; }
.page-checkout .pak input:checked::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #BC0000; }
.page-checkout .pak span { flex: 1; }
.page-checkout .pak small { color: rgba(26,5,7,.55); font-size: 13px; }
.page-checkout .pak:has(input:checked) { background: #FBEDE8; box-shadow: inset 4px 0 0 #BC0000; font-weight: 700; }
.page-checkout .pak[hidden] { display: none; }
/* Kasti alaserv hajub: all on veel ridu. Valitud automaat korratakse otsingu
   all, sest telefonil kerib märgitud rida ühe tõmbega kastist välja; "muuda"
   tühjendab otsingu ja kerib rea kasti sees nähtavale (main.js). */
.page-checkout .pak-list-wrap { position: relative; }
.page-checkout .pak-list-wrap::after {
  content: ""; position: absolute; left: 1.5px; right: 1.5px; bottom: 1.5px; height: 28px;
  background: linear-gradient(rgba(255,255,255,0), #FFFFFF); pointer-events: none;
}
.page-checkout .pak-chosen {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 10px 14px;
  border: 1.5px solid #1A0507; border-top: 0; background: #FBEDE8; box-shadow: inset 4px 0 0 #BC0000;
  font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #1A0507;
}
.page-checkout .pak-chosen[hidden] { display: none; }
.page-checkout .pak-chosen-lbl { flex: none; font: 500 11px 'Azeret Mono', ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #8E0C12; }
.page-checkout .pak-chosen-name { flex: 1; min-width: 0; }
.page-checkout .pak-change {
  flex: none; border: 0; background: none; padding: 12px 0; margin: -12px 0;
  font: 500 11px 'Azeret Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
  color: #BC0000; text-decoration: underline; cursor: pointer;
}

/* Veapaneel ja teated kreemjal poolel. */
.page-checkout .col-form .error {
  background: #FFF3F0; border: 1.5px solid #BC0000; box-shadow: 4px 4px 0 #BC0000;
  color: #7A0000; margin: 0;
}
.page-checkout .col-form .error a { color: #7A0000; text-decoration-color: rgba(122,0,0,.4); }
.page-checkout .col-form .notice { background: #FFFFFF; border: 1.5px solid #1A0507; color: #1A0507; margin: 0; }

/* ---------- kassa: ajakaart tumedal poolel ---------- */
.page-checkout .ticket-wrap { position: relative; padding: 44px var(--gutter) 48px 24px; }
.page-checkout .ticket-wrap::before {
  content: ""; position: absolute; top: -120px; left: -80px; width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(255,90,60,.22) 0%, rgba(255,90,60,0) 62%);
  pointer-events: none;
}
/* Kaart on kleepuv, sest vorm on pikem kui ekraan ja nupp on kaardil. */
.page-checkout .ticket-stack { position: sticky; top: 16px; width: 380px; max-width: 100%; padding-top: 18px; }
/* Kaks lehte kaardi all, nagu avalehe kaardipakk. */
.page-checkout .ticket-stack::before, .page-checkout .ticket-stack::after,
.page-confirmation .card-stack::before, .page-confirmation .card-stack::after {
  content: ""; position: absolute; border: 1px solid #CFC2A9; background: #E6DCC8;
}
.page-checkout .ticket-stack::before { inset: 34px 0 16px 20px; transform: rotate(-5deg); }
.page-checkout .ticket-stack::after { inset: 26px 12px 6px 8px; background: #F2EADB; border-color: #DCCFB6; transform: rotate(-2.5deg); }

.page-checkout .ticket {
  position: relative; z-index: 1;
  background: #FFFFFF; border: 1px solid #DCCFB6; border-radius: 0;
  box-shadow: 0 26px 50px rgba(0,0,0,.45);
  transform: rotate(1.2deg);
  color: #1A0507;
}
.page-checkout .seal {
  position: absolute; right: -28px; top: -38px; width: 104px; height: 104px; z-index: 2;
  transform: rotate(-8deg);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
}
.page-checkout .seal svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.page-checkout .seal img { position: absolute; left: 50%; top: 50%; width: 60px; height: auto; transform: translate(-50%, -50%); display: block; }

.page-checkout .ticket-main { padding: 22px 26px 0; }
.page-checkout .trow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.page-checkout .ticket-title, .page-checkout .ticket-domain {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #A08F7A;
}
.page-checkout .ticket-domain { padding-right: 50px; }

.page-checkout .ticket-item {
  display: flex; gap: 16px; align-items: center;
  margin-top: 16px; padding-bottom: 14px;
  border-bottom: 1px dashed #CFC2A9;
}
/* The card's back, landscape like the real card, thrown down at an angle. */
.page-checkout .ticket-thumb {
  width: 70px; flex: none;
  border: 1px solid #DCCFB6;
  transform: rotate(-5deg);
  box-shadow: 0 8px 16px rgba(0,0,0,.3);
}
.page-checkout .ticket-thumb img { width: 100%; height: auto; display: block; }
.page-checkout .ticket-item-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.page-checkout .ticket-name { font-size: 15.5px; font-weight: 700; color: #1A0507; }

.page-checkout .qty { display: inline-flex; align-items: center; border: 1px solid #1A0507; background: #FFFFFF; width: max-content; }
.page-checkout .qty button {
  width: 36px; height: 30px; border: 0; background: none;
  font-size: 17px; color: #1A0507; cursor: pointer; font-family: 'Figtree', system-ui, sans-serif;
}
.page-checkout .qty input {
  width: 36px; height: 30px; border: 0; background: none; text-align: center;
  font: 500 14px 'Azeret Mono', ui-monospace, monospace; color: #1A0507;
  -moz-appearance: textfield;
}
.page-checkout .qty input::-webkit-outer-spin-button,
.page-checkout .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.page-checkout .ticket-sums { display: grid; gap: 8px; padding: 13px 0; border-bottom: 1px dashed #CFC2A9; font-size: 14.5px; }
.page-checkout .ticket-muted { color: #4A3A32; }
.page-checkout .trow-pickup[hidden] { display: none; }
.page-checkout .ticket-pickup { font-size: 12.5px; line-height: 1.4; }
.page-checkout .ticket-total { padding: 14px 0 4px; }
.page-checkout .ticket-total-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #4A3A32;
}
.page-checkout .ticket-total-sum { font-size: 38px; line-height: .9; color: #1A0507; }
.page-checkout .ticket-fund {
  margin: 0 0 16px;
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 9px; font-weight: 500; letter-spacing: .04em; line-height: 1.6;
  color: #8E0C12;
}
.page-checkout .ticket-total-spacer { height: 16px; }

.page-checkout .tear { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 26px; }
.page-checkout .tear .dash { flex: 1; border-top: 1px dashed #A08F7A; height: 0; }
.page-checkout .tear .txt { font: 500 10px 'Azeret Mono', ui-monospace, monospace; letter-spacing: .22em; color: #A08F7A; }
.page-checkout .notch { position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: var(--ink); border-radius: 50%; }
.page-checkout .notch.l { left: -13px; }
.page-checkout .notch.r { right: -13px; }

.page-checkout .ticket-bottom { padding: 16px 26px 22px; display: grid; gap: 12px; }
.page-checkout .ticket-bottom .notice { background: #F7F1E5; border: 1.5px solid #1A0507; color: #1A0507; margin: 0; font-size: 14px; }
.page-checkout .terms { display: flex; gap: 12px; align-items: center; margin: 0; font-size: 13.5px; line-height: 1.5; color: #4A3A32; cursor: pointer; }
.page-checkout .terms input {
  appearance: none; width: 16px; height: 16px; margin: 0; flex: none;
  border: 1px solid #1A0507; background: #FFFFFF; border-radius: 0;
  display: grid; place-items: center; cursor: pointer;
}
.page-checkout .terms input:checked::after { content: ""; width: 8px; height: 8px; background: #BC0000; }
.page-checkout .terms input:focus-visible { outline: 2px solid #BC0000; outline-offset: 2px; }
.page-checkout .terms a { color: #BC0000; text-decoration-color: rgba(188,0,0,.4); }
.page-checkout .paybtn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 50px; border: 0; border-radius: 0;
  background: var(--red-hot); color: var(--cream);
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 21px;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 14px 34px rgba(188,0,0,.36);
  transition: background .15s;
}
.page-checkout .paybtn .arrow { flex: none; }
.page-checkout .paynote {
  margin: 0;
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; line-height: 1.7;
  color: #A08F7A; text-align: center;
}

/* ---------- kinnitus: finiš ---------- */
.page-confirmation main { position: relative; contain: paint; }
.page-confirmation .confirmation, .page-confirmation .simple {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: center;
  max-width: var(--shell); margin: 0 auto;
  padding: 48px var(--gutter) 64px;
}
.page-confirmation .simple { grid-template-columns: minmax(0, 1fr); }
.page-confirmation .confirmation::before, .page-confirmation .simple::before {
  content: ""; position: absolute; top: -260px; left: 50%; width: 900px; height: 900px; margin-left: -450px;
  background: radial-gradient(circle, rgba(255,90,60,.3) 0%, rgba(255,90,60,0) 62%);
  pointer-events: none;
}
.page-confirmation .conf-head, .page-confirmation .card-stack { position: relative; }
.page-confirmation .conf-eyebrow {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange);
}
.page-confirmation .conf-head h1, .page-confirmation .simple h1 {
  margin: 18px 0 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(48px, 7vw, 96px); line-height: .86; letter-spacing: -.015em; text-transform: uppercase;
  color: var(--cream);
}
.page-confirmation .conf-head > p, .page-confirmation .simple > .conf-head > p { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 18px 0 0; max-width: 26em; }

/* Ajavõtutabel nagu avalehel: stardinumber, aeg, summa. */
.page-confirmation .conf-table {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr;
  margin-top: 32px;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.page-confirmation .conf-cell { padding: 16px 0 14px 22px; border-right: 1px solid rgba(247,241,229,.14); min-width: 0; }
.page-confirmation .conf-cell:first-child { padding-left: 0; }
.page-confirmation .conf-cell:last-child { border-right: 0; }
.page-confirmation .conf-cell-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--soft);
}
.page-confirmation .conf-cell-val { font-size: 34px; line-height: 1; margin-top: 6px; white-space: nowrap; }
.page-confirmation .conf-cell-val.hot { color: var(--orange); }

.page-confirmation .conf-actions { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.page-confirmation .btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--cream); color: var(--ink);
  padding: 0 26px; height: 50px; border-radius: 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 20px;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .15s;
}
.page-confirmation .btn-retry { background: var(--red-hot); color: var(--cream); box-shadow: 0 14px 34px rgba(188,0,0,.36); }
.page-confirmation .btn[hidden] { display: none; }
.page-confirmation .conf-foot {
  margin: 0; max-width: 36ch;
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; line-height: 1.7;
  color: var(--soft);
}

/* Templiga ajakaart lauale visatud. */
.page-confirmation .card-stack { padding: 30px 0 20px; }
.page-confirmation .card-stack::before { inset: 46px 0 0 34px; transform: rotate(-6deg); }
.page-confirmation .card-stack::after { inset: 40px 12px 6px 18px; background: #F2EADB; border-color: #DCCFB6; transform: rotate(-3deg); }
.page-confirmation .card {
  position: relative; z-index: 1;
  background: #FFFFFF; border: 1px solid #DCCFB6; border-radius: 0;
  box-shadow: 0 26px 50px rgba(0,0,0,.45);
  transform: rotate(1.5deg);
  color: #1A0507; padding: 24px 26px 26px;
}
.page-confirmation .stamp {
  position: absolute; right: 16px; top: -26px; width: 100px; height: 100px;
  border: 2.5px solid #BC0000; border-radius: 50%;
  transform: rotate(-10deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #BC0000; background: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 4px #FFFFFF, inset 0 0 0 5.5px #BC0000;
}
.page-confirmation .stamp-lbl { font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .2em; }
.page-confirmation .stamp-date { font-size: 18px; line-height: 1; }
.page-confirmation .stamp-src { font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 500; letter-spacing: .16em; }
.page-confirmation .card-title {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #A08F7A;
}
.page-confirmation .conf-number { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; padding-bottom: 18px; border-bottom: 1px dashed #CFC2A9; flex-wrap: wrap; }
.page-confirmation .conf-number-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #4A3A32;
}
.page-confirmation .conf-number-val { font-size: 26px; line-height: 1; color: #1A0507; }
.page-confirmation .conf-rows { display: grid; gap: 9px; padding: 14px 0; border-bottom: 1px dashed #CFC2A9; font-size: 14.5px; }
.page-confirmation .trow { display: flex; justify-content: space-between; gap: 16px; }
.page-confirmation .conf-muted { color: #4A3A32; }
.page-confirmation .conf-box { display: grid; gap: 4px; margin-top: 6px; }
.page-confirmation .conf-box-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #A08F7A;
}
.page-confirmation .conf-strong { font-weight: 700; color: #1A0507; }
.page-confirmation .conf-total { padding-top: 16px; align-items: baseline; }
.page-confirmation .conf-total-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #4A3A32;
}
.page-confirmation .conf-total-sum { font-size: 38px; line-height: .9; color: #1A0507; }
.page-confirmation .conf-note { margin: 18px 0 0; background: #F7F1E5; border: 1.5px solid #1A0507; color: #1A0507; font-size: 14px; }

/* ---------- tingimused ja privaatsus: rajaraamat ---------- */
.page-doc .doc { padding: 44px var(--gutter) 64px; }
.page-doc .doc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); padding-bottom: 14px; }
.page-doc .doc h1 { font-size: clamp(36px, 4.5vw, 48px); line-height: 1; text-transform: uppercase; margin: 0; }
.page-doc .doc-meta {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--soft);
}
.page-doc .doc-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; margin-top: 44px; align-items: start; }
.page-doc .doc-toc { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); position: sticky; top: 20px; }
.page-doc .doc-toc a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid rgba(247,241,229,.14);
  color: rgba(247,241,229,.6); text-decoration: none;
  transition: color .15s;
}
.page-doc .doc-toc b { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 24px; line-height: 1; min-width: 34px; }
.page-doc .doc-toc span { font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; }
.page-doc .doc-body { max-width: 640px; counter-reset: ptk; }
.page-doc .doc-body h2 {
  counter-increment: ptk;
  border-top: 2px solid rgba(247,241,229,.3); padding-top: 13px; margin: 36px 0 0;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 24px; line-height: 1.05;
  letter-spacing: .005em; text-transform: uppercase; color: var(--cream);
  scroll-margin-top: 20px;
}
.page-doc .doc-body h2::before {
  content: counter(ptk, decimal-leading-zero);
  display: block; margin: 0 0 9px -3px;
  font-size: 44px; line-height: .82; color: var(--orange);
}
.page-doc .doc-body > :first-child, .page-doc .doc-body > .prose:first-child > :first-child { margin-top: 0; }
.page-doc .doc-body p, .page-doc .doc-body li { font-size: 16px; line-height: 1.6; color: rgba(247,241,229,.84); }
.page-doc .doc-body h2 + p, .page-doc .doc-body h2 + ul, .page-doc .doc-body h2 + .prose { margin-top: 12px; }
.page-doc .doc-body a { color: var(--orange); }

/* ---------- kitsad ekraanid ----------
   Üks redel igale lehele (04.09.2026, docs/00 punkt 19): 1105 ja üles on
   laud (kinnitatud 1440 ja 1920), 900 kuni 1104 tahvel laiuti (laua
   kompositsioon päris veergudel), 600 kuni 899 tahvel püsti (üks veerg,
   paaris alaveerud), alla 600 telefon, alla 380 väike telefon. Sisu laiuse
   lülitid (699, 479) on sisu, mitte seadme omad. Puutealad ja sisendid
   käivad pointer: coarse järgi, mitte laiuse, faili lõpus. Avalehe oma
   redel on faili lõpus, sest ta peab tulema 1104 ploki JÄREL. */
@media (max-width: 1104px) {
  /* Kinnituse ja 404 pealkiri: 56 kuni 466 laiuseni, 72 600 peal, 92 768
     peal, 96 alates 800. "OOTAME MAKSE KINNITUST" murdub 56 px-ga 324 px
     sisse kahele reale. */
  .page-confirmation .conf-head h1, .page-confirmation .simple h1 { font-size: clamp(56px, 12vw, 96px); }
  /* Monosildid puutekihtidel vähemalt 11 px. */
  .page-confirmation .conf-cell-lbl, .page-confirmation .card-title, .page-confirmation .conf-number-lbl { font-size: 11px; }
  .page-confirmation .conf-foot { font-size: 12.5px; color: var(--muted); }
  /* Peatükkide loend on <nav> ja .page-shop nav (polster, vahe, joon all,
     keskele joondus, max-width) lekib sinna. 1440 peal on see lekk kinnitatud
     välimuse taga ja jääb (Magnuse otsustada); siit allpool nullitakse. */
  .page-doc .doc-toc { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; gap: 0; border-bottom: 0; max-width: none; margin: 0; }
}
/* Tahvel laiuti (1024): laua kompositsioon, kitsam parem veerg. */
@media (min-width: 900px) and (max-width: 1104px) {
  /* Kassa: vorm pluss 408 px kleepuv ajakaart (360 px kaart, pitsat üle serva). */
  .page-checkout .grid { grid-template-columns: minmax(0, 1fr) 408px; }
  .page-checkout .col-form { padding: 44px 32px 44px var(--gutter); }
  /* 48 px paremal: pitsat ulatub kaardist 28 px üle ja kalle lisab 5, muidu
     lõikas ekraani serv pitsati ära (mõõdetud 1024 ja 1104 peal). */
  .page-checkout .ticket-wrap { padding: 44px 48px 48px 0; }
  .page-checkout .ticket-stack { width: 360px; top: 56px; }
  .page-checkout .pak-list { max-height: 280px; }
  .page-confirmation .confirmation { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  /* Ajavõtutabel 542 px veerus: olek ja summa sisu järgi, muidu ulatus
     "Tühistatud" / "Tagastatud" 1fr lahtris summa eraldajani (1024). */
  .page-confirmation .conf-table { grid-template-columns: minmax(0, 1fr) auto auto; }
  .page-confirmation .conf-cell:not(:last-child) { padding-right: 22px; }
  .page-confirmation .conf-actions { gap: 12px; }
  .page-confirmation .btn { padding: 0 20px; }
  .page-doc .doc-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  .page-doc .doc-toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: none; }
  .page-doc .doc-toc::-webkit-scrollbar { display: none; }
  .page-doc .doc-toc a { padding: 11px 0; }
}
/* Tarneviisid ühes veerus kuni 1200: kaks 253 px kiipi murdsid nime kahele
   reale (mõõdetud 1105 peal); 1440 ei puutu. */
@media (min-width: 900px) and (max-width: 1200px) {
  .page-checkout .carriers { grid-template-columns: 1fr; }
}
/* Ootel olekus on kaks nuppu (449 px) ja 900 peal on päise veerg 428 px:
   kuni 1000 üksteise all. */
@media (min-width: 900px) and (max-width: 999px) {
  .page-confirmation .conf-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 899px) {
  .page-checkout .grid { grid-template-columns: minmax(0, 1fr); }
  .page-checkout .col-form { clip-path: polygon(0 0, 100% 24px, 100% 100%, 0 100%); padding: 44px var(--gutter) 72px; gap: 36px; }
  /* Ajakaart 440 keskel, kalle ja pitsat jäävad laua omaks; sära kaardi taga keskele. */
  .page-checkout .ticket-wrap { padding: 48px var(--gutter) 64px; display: flex; justify-content: center; }
  .page-checkout .ticket-wrap::before { left: 50%; top: -60px; margin-left: -320px; }
  .page-checkout .ticket-stack { position: relative; top: auto; width: 100%; max-width: 440px; }
  /* Pöidlariba nupp kerib kaardi juurde: pitsat jääb ekraanile. */
  .page-checkout .ticket { scroll-margin-top: 44px; }
  .page-checkout .pak-list { max-height: 320px; }
  .page-checkout.has-thumb-bar .site-footer { padding-bottom: 90px; }
  /* Kinnitus ühes veerus: päis laguneb ruudustiku otsesteks liikmeteks
     (display: contents), et templiga kaart saaks tabeli ja nuppude vahele.
     DOM jääb päis, nupud, kaart, mis on ekraanilugeja jaoks loogiline. */
  .page-confirmation .confirmation { grid-template-columns: 1fr; gap: 0; padding: 40px var(--gutter) 56px; }
  .page-confirmation .conf-head { display: contents; }
  .page-confirmation .conf-head > p { max-width: 26em; }
  .page-confirmation .card-stack { order: 5; max-width: 460px; margin: 32px auto 0; }
  .page-confirmation .conf-actions { order: 6; }
  .page-doc .doc-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .page-doc .doc-toc { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 1px solid var(--line-2); }
  .page-doc .doc-toc a { padding: 12px 0; }
  .page-doc .doc-toc span { font-size: 12px; }
}
/* Tahvel püsti alates 700: nupud vasakul, templiga kaart paremal, üks ekraan. */
@media (min-width: 700px) and (max-width: 899px) {
  .page-confirmation .confirmation { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; }
  .page-confirmation .conf-eyebrow, .page-confirmation .conf-head h1, .page-confirmation .conf-head > p, .page-confirmation .conf-table { grid-column: 1 / -1; }
  .page-confirmation .conf-actions { grid-column: 1; grid-row: 5; order: 0; align-self: start; flex-direction: column; align-items: flex-start; margin-top: 30px; }
  .page-confirmation .btn { min-width: 240px; }
  .page-confirmation .conf-foot { max-width: none; }
  .page-confirmation .card-stack { grid-column: 2; grid-row: 5; order: 0; margin: 0; max-width: none; padding-top: 30px; }
}
/* Sisu laiuse lülitid. */
@media (max-width: 699px) {
  .page-checkout .crumbs { display: none; }
  .page-checkout .carriers { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .page-checkout .col-form { padding: 40px var(--gutter) 72px; gap: 32px; }
  .page-checkout .stephead .num { font-size: 110px; top: -30px; }
  .page-checkout .stephead .t { font-size: 27px; }
  .page-checkout .lbl { font-size: 11px; letter-spacing: .16em; margin-bottom: 7px; }
  .page-checkout .panel { gap: 16px; }
  .page-checkout .carrier .price { font-size: 13px; }
  /* Nimekiri pool ekraani, mitte rohkem: otsing ja valitud rida jäävad
     peale, ja kasti kerimine ei tõmba lehte kaasa. */
  .page-checkout .pak-list { max-height: min(50vh, 420px); overscroll-behavior: contain; }
  /* Rida kahel real: nimi, linn selle all, nupp keskel; kõrvuti veergudena
     oli nimi 390 peal kolmel real ja linn parema serva küljes. */
  .page-checkout .pak { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
  .page-checkout .pak input { grid-row: 1 / span 2; }
  .page-checkout .pak span { grid-column: 2; line-height: 1.3; }
  .page-checkout .pak small { grid-column: 2; font-size: 12.5px; }
  /* Valitud rida: silt ja "muuda" ülemisel real, nimi oma real. */
  .page-checkout .pak-chosen { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .page-checkout .pak-chosen-lbl { grid-row: 1; grid-column: 1; }
  .page-checkout .pak-change { grid-row: 1; grid-column: 2; justify-self: end; }
  .page-checkout .pak-chosen-name { grid-row: 2; grid-column: 1 / -1; }
  .page-checkout .ticket { transform: none; }
  /* Pitsat 88 nurgal, päise rida hoiab talle 72 px paremal; "Nr antakse
     finišis" võib 360 peal kahele paremale joondatud reale minna. */
  .page-checkout .seal { right: -8px; top: -30px; width: 88px; height: 88px; }
  .page-checkout .seal img { width: 50px; }
  .page-checkout .ticket-main { padding: 24px 20px 0; }
  .page-checkout .ticket-main > .trow:first-child { padding-right: 72px; }
  .page-checkout .ticket-domain { padding-right: 0; text-align: right; max-width: 130px; }
  .page-checkout .ticket-bottom { padding-left: 20px; padding-right: 20px; }
  .page-checkout .tear { padding: 0 20px; }
  .page-checkout .ticket-fund { white-space: normal; font-size: 10.5px; }
  .page-checkout .paynote { font-size: 11px; }
  .page-checkout .tear .txt { font-size: 10.5px; }
  .page-checkout .paybtn { height: 54px; font-size: 21px; }
  /* Kitsas jalus kahe reana, eraldaja peitu. */
  .page-checkout .site-footer, .page-confirmation .site-footer { flex-direction: column; gap: 8px; font-size: 12px; }
  .site-footer .foot-line { display: flex; flex-direction: column; gap: 4px; }
  .site-footer .sep { display: none; }
  /* Ajavõtutabel kahe reana: stardinumber üle rea, all olek ja summa kõrvuti. */
  .page-confirmation .conf-head > p { font-size: 17px; margin-top: 14px; }
  .page-confirmation .conf-table { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .page-confirmation .conf-cell { padding: 14px 0 12px; border-top: 0; border-right: 1px solid rgba(247,241,229,.14); }
  .page-confirmation .conf-cell:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(247,241,229,.14); }
  .page-confirmation .conf-cell:nth-child(2) { padding-right: 16px; }
  .page-confirmation .conf-cell:last-child { padding-left: 16px; border-right: 0; }
  .page-confirmation .conf-cell-lbl { font-size: 11px; }
  .page-confirmation .conf-cell-val { font-size: 32px; }
  .page-confirmation .card-stack { padding: 26px 0 16px; margin-top: 28px; }
  .page-confirmation .card { transform: none; padding: 22px 20px 24px; }
  .page-confirmation .stamp { right: 8px; top: -24px; width: 88px; height: 88px; }
  .page-confirmation .stamp-date { font-size: 17px; }
  .page-confirmation .conf-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; }
  .page-confirmation .btn { width: 100%; justify-content: space-between; padding: 0 22px; height: 52px; }
  .page-confirmation .conf-foot { max-width: none; margin-top: 6px; }
  .page-confirmation .conf-mail { color: var(--cream); font-weight: 500; }
  /* Peatükid kleepuva kiibireana, mis jälgib lugemist (main.js). Parem serv
     hajub kleepuva ::after gradiendiga, mitte maskiga: mask teeks riba
     serva läbipaistvaks ja alt keritav tekst paistaks sealt läbi. */
  .page-doc .doc { padding: 28px var(--pad) 56px; }
  .page-doc .doc h1 { font-size: clamp(30px, 9vw, 40px); overflow-wrap: anywhere; }
  .page-doc .doc-head { row-gap: 6px; padding-bottom: 12px; }
  .page-doc .doc-meta { font-size: 11px; }
  .page-doc .doc-grid { margin-top: 20px; gap: 24px; }
  .page-doc .doc-toc { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 28px 0 var(--pad);
    background: var(--ink); margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad); border-top: 0; border-bottom: 1px solid var(--line); }
  .page-doc .doc-toc::-webkit-scrollbar { display: none; }
  .page-doc .doc-toc::after { content: ""; position: sticky; right: 0; flex: none; width: 28px; margin-left: -28px; background: linear-gradient(90deg, rgba(18,0,2,0), var(--ink)); pointer-events: none; }
  .page-doc .doc-toc a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); white-space: nowrap; scroll-snap-align: start; color: rgba(247,241,229,.7); }
  .page-doc .doc-toc a:last-child { margin-right: 28px; }
  .page-doc .doc-toc a.on { border-color: var(--cream); color: var(--cream); }
  .page-doc .doc-toc b { font-size: 20px; min-width: 0; }
  .page-doc .doc-toc span { font-size: 11.5px; letter-spacing: .1em; line-height: 1; }
  .page-doc .doc-body h2 { scroll-margin-top: 72px; }
}
@media (max-width: 479px) {
  .page-checkout .two { grid-template-columns: 1fr; }
}
/* Telefon laiuti: lühike ekraan, päis kokku, kiibirida lahti. */
@media (max-height: 500px) and (orientation: landscape) {
  /* Kinnitus: pealkiri 56, lõik ja tabel tihedamalt, et stardinumber ja
     summa oleks 390 px kõrgel ekraanil esimesel ekraanil. */
  .page-confirmation .confirmation { padding-top: 12px; }
  .page-confirmation .conf-head h1 { margin-top: 10px; font-size: clamp(44px, 6.5vw, 56px); }
  .page-confirmation .conf-head > p { margin-top: 10px; font-size: 15px; max-width: 44em; }
  .page-confirmation .conf-table { margin-top: 16px; }
  .page-doc .doc-toc { position: static; }
  /* Küpsiseteade katab 390 px kõrgel ekraanil kinnituse tabeli (20.6): kitsam
     riba (mõõdud faili lõpus, sest siin kaotavad nad hilisemale baasreeglile),
     teine lause peitu, ja kinnituse alla ruumi, kuni teade on lahti. */
  .cookie-notice .cookie-more { display: none; }
  body.cookie-open.page-confirmation .confirmation { padding-bottom: 88px; }
  /* Ka kitsam teade (50 px) jääb kokkuvõtteriba peale, seega kuni teade on
     LAHTI, on päis ja lahtrid tihedamalt. Teate sulgemine annab kujunduse
     mõõdud tagasi. Spetsiifilisus 0,3,0, et võita ploki enda read ülal. */
  body.cookie-open.page-confirmation .conf-head h1 { margin-top: 8px; font-size: clamp(38px, 5.2vw, 46px); }
  body.cookie-open.page-confirmation .conf-head > p { margin-top: 8px; }
  body.cookie-open.page-confirmation .conf-table { margin-top: 12px; }
  body.cookie-open.page-confirmation .conf-cell { padding: 10px 0 8px 22px; }
  body.cookie-open.page-confirmation .conf-cell:first-child { padding-left: 0; }
  body.cookie-open.page-confirmation .conf-cell-val { font-size: 26px; }
}
/* Väike telefon: "Itella SmartPost pakiautomaat" kiip murdus 360 peal kahele
   reale (76 px, teised 52). */
@media (max-width: 380px) {
  .page-checkout .carrier { font-size: 14px; gap: 10px; }
  .page-checkout .carrier .price { font-size: 12.5px; }
}

/* ==========================================================================
   Beyond the mockup: states a static design cannot show.
   ========================================================================== */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 50;
  background: var(--ink-2); color: var(--cream);
  padding: 10px 16px; border: 1px solid var(--line-2); border-radius:0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.muted { color: var(--soft); }

/* Messages. The mockup has none, and every one of them is a real state: a
   failed payment, a sold out product, an expired form. */
.notice,
.error {
  border-radius:0;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.55;
  margin: 18px 0;
}

.notice {
  background: var(--green-tint);
  border: 2px solid var(--green-deep);
  color: var(--cream);
}

.error {
  background: #2A0906;
  border: 2px solid #E0684A;
  color: #FFC9B8;
}

.error p { margin: 0 0 6px; }
.error p:last-child { margin-bottom: 0; }

/* Honeypot: off screen, never visible to a real visitor. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Admin edited content and the legal pages. The client writes these, so the
   styling has to survive whatever ordinary text they paste in. */
.prose {
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--muted);
}

.prose h2,
.prose h3 {
  font-style: italic;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .005em;
  color: var(--brown);
  margin: 1.8em 0 0.5em;
}

.prose h2 { font-size: 26px; }
.prose h3 { font-size: 20px; }
.prose p, .prose li { margin: 0 0 0.9em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose a { color: var(--green-dark); }

.doc {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 48px var(--gutter) 72px;
}

.doc h1 {
  font-style: italic;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: .005em;
  line-height: 1.05;
  margin: 0 0 24px;
}

/* Cookie notice. One session cookie and a flag in localStorage, nothing else
   (docs/03 point 7), so this is a notice and not a consent wall. */
.cookie-notice {
  position: fixed;
  inset: auto 16px 16px;
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  /* Keskel, mitte ülemise serva küljes. Kahe reaga teatel jäi ikoon esimese
     rea kõrgusele ja luges kohmakalt (Magnus, 16.09.2026). */
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius:0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  font-size: 13px;
  line-height: 1.4;
  z-index: 40;
}

.cookie-notice p { margin: 0; }
.cookie-notice a { color: var(--green-dark); }
/* Ikoon on sama kõrge kui nupp on lai: riba loeb ühe asjana, mitte kolme
   eri suurusega tükina. Nihet alla ei ole, riba joondab ta ise keskele. */
.cookie-notice .cookie-icon { flex: none; width: 26px; height: 26px; color: var(--orange); }

.cookie-ok {
  flex: none;
  border: 1px solid var(--cream);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  min-width: 72px;
  padding: 0 16px;
  align-self: center;
  border-radius:0;
  cursor: pointer;
}

/* Real gallery photos land in the frame the mockup fills with a placeholder. */
.page-shop .gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Sold out: the buy button is replaced by the waiting list form (docs/03 p5). */
.page-shop .notify {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius:0;
  padding: 22px 24px;
  max-width: 480px;
}

.page-shop .notify h2 {
  font-style: italic;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 8px;
}

.page-shop .notify p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }

.page-shop .notify input[type="email"] {
  width: 100%;
  font: inherit;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius:0;
  background: var(--field);
  color: var(--cream);
  margin-bottom: 12px;
}

/* 404. Same voice as the confirmation's "Tellimust ei leitud": eyebrow, big
   uppercase headline, left aligned, slim nav (layout.php nav 'slim'). The
   confirmation's own .simple states keep their own rules, this does not reach
   them (body there is page-confirmation, not page-shop). */
.page-shop .simple {
  max-width: 640px;
  margin: 0;
  padding: 48px var(--gutter) 64px;
  text-align: left;
}
.page-shop .simple .conf-eyebrow {
  display: block;
  font: 500 11px 'Azeret Mono', ui-monospace, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.page-shop .simple h1 {
  font-style: italic;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 12vw, 72px);
  letter-spacing: -.015em;
  line-height: .9;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.page-shop .simple p { color: var(--muted); margin: 0 0 26px; font-size: 17px; line-height: 1.55; max-width: 26em; }
.page-shop .simple .btn-dark { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px; font-size: 20px; }
/* The slim nav's back link on a shop page (404): the confirmation's look. */
.page-shop .nav-slim .back {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}

/* A field the server rejected. */
.inp[aria-invalid="true"] { border-color: #E0684A; }

/* ==========================================================================
   Front page pieces the mockup carried as inline styles. They are classes here
   because the content inside them comes from settings, not from the markup.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.page-shop .section-pad { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 28px; }

/* The quantity is a real number input, not the mockup's <span>: the stepper
   buttons are an enhancement and the field still works with JavaScript off. */
.page-shop .qty input {
  width: 52px;
  height: 56px;
  border: 0;
  background: none;
  text-align: center;
  font-style: italic;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--brown);
  -moz-appearance: textfield;
}

.page-shop .qty input::-webkit-outer-spin-button,
.page-shop .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.page-shop .buy-row { margin-top: 4px; }

/* Sold out form, styled like the rest of the hero. */
.page-shop .notify .lbl {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 6px;
}

.page-shop .notify .btn { font-size: 17px; padding: 13px 28px; }

/* The card fan stands in until real photos arrive. */
.page-shop .card-pip {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 12px; height: 12px;
  background: var(--green);
  transform: rotate(45deg);
}

.page-shop .fan-note {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font: 11.5px 'Azeret Mono', ui-monospace, Menlo, monospace;
  color: var(--soft);
}

.page-shop .sticker-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; }

.page-shop .sticker-sum {
  font-style: italic;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
}

/* A real product photo takes the whole fan area. */
.page-shop .hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:0;
  border: 2px solid var(--brown);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.page-shop .ph-photo {
  border: 2px solid var(--brown);
  background: none;
  padding: 0;
  overflow: hidden;
}

@media (max-width: 960px) {
  .page-shop .section-pad { padding-top: 52px; }
  /* The wordmark shares the narrow nav with the buy button. */
  .brand-mark { height: 32px; }
}

/* ---------- preview mode (shop visible, buying closed) ---------- */
.preview-bar {
  background: var(--red);
  color: var(--cream);
  font-size: 14px;
  text-align: center;
  padding: 10px 16px;
}

.preview-bar a { color: var(--cream); text-decoration: underline; }
.preview-bar-open { background: var(--orange); color: var(--ink); }
.preview-bar-open a { color: var(--ink); }
/* Design check view: dark, with an orange rule, so it is never mistaken for
   the red "shop opens soon" bar or the orange "buying is open" bar. */
.preview-bar-sample { background: var(--ink-2); color: var(--cream); border-top: 3px solid var(--orange); }

/* Dead buy buttons. Grey, no shadow to lift them, and a cursor that says so
   before the click does. */
.btn-off,
.page-shop .btn-off,
.page-checkout .btn-off {
  background: #2A2724;
  border: 1px solid rgba(247,241,229,.22);
  color: #9A958C;
  box-shadow: none;
  cursor: not-allowed;
  user-select: none;
}

.page-shop .btn-off.btn-dark, .page-shop .btn-off.cta-btn { color: #9A958C; }

.buy-row-off .qty { opacity: .55; }
.buy-row-off .qty-step { cursor: not-allowed; }
.buy-row-off input { background: transparent; }

/* ---------- 500, oma lühike kest (src/errors.php) ---------- */
.page-error {
  max-width: 620px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.page-error h1 {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(34px, 7vw, 52px);
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.page-error p { color: var(--muted); margin: 0 0 20px; }
.page-error a { color: var(--green); }
.page-error a:hover { color: var(--green-dark); }

/* ==========================================================================
   Avaleht, ralliteema kavandi järgi (docs/kavand-2026-09).
   ========================================================================== */

.page-shop .hero { grid-template-columns: 1.18fr .82fr; align-items: start; }
.page-shop .hero-text { padding-top: 6px; }
.page-shop .hero h1 .hi { color: var(--orange); }

.page-shop .hero-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  text-align: right;
}

.page-shop .hero-price-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--soft);
}

.page-shop .hero-price-sum {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 66px;
  line-height: .9;
  margin-top: 2px;
}

.page-shop .hero-buy .buy-row,
.page-shop .hero-buy form.buy-row { justify-content: flex-end; }
.page-shop .hero-buy .trust { justify-content: flex-end; text-align: right; }
.page-shop .hero-buy .notify { text-align: left; max-width: 380px; }

/* Ajavõtutabel. Nelja veeru asemel nii mitu, kui seadetes ridu on. */
.page-shop .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-top: 54px;
}

.page-shop .stat { padding: 20px 26px 18px 0; border-right: 1px solid var(--line); }
.page-shop .stat:last-child { border-right: 0; }
.page-shop .stat + .stat { padding-left: 26px; }

.page-shop .stat-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft);
}

.page-shop .stat-val {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 46px;
  line-height: 1;
  margin-top: 6px;
}

.page-shop .band-cream .prose { color: #463831; }
.page-shop .band-cream .prose h2, .page-shop .band-cream .prose h3 { color: var(--ink); }
.page-shop .band-cream .prose a { color: var(--red); }
.page-shop .band-cream .sec-title { color: var(--ink); }

.page-shop .legend {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: center;
}

.page-shop .legend .sec-title { margin-bottom: 18px; }
.page-shop .card .strip-dark {
  background: repeating-conic-gradient(rgba(18, 0, 2, .82) 0% 25%, transparent 0% 50%);
  background-size: 13px 13px;
}
.page-shop .band-cream .fan-note { color: #8A7C6A; }

/* Sektsiooni päis: pealkiri vasakul, silt paremal, joon alla. */
.page-shop .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 14px;
  margin-bottom: 46px;
}

.page-shop .sec-head .sec-title { margin-bottom: 0; }

.eyebrow {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft);
}

.eyebrow-red { color: var(--red); }

/* Reeglid kolme veergu suurte numbritega, kui klient kirjutas need loendina.
   Muu sisu voolab tavalise proosana, seega vale kuju ei lõhu midagi. */
.page-shop .rules .prose { max-width: none; }

.page-shop .rules .prose ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: samm;
}

.page-shop .rules .prose ol > li {
  counter-increment: samm;
  border-top: 2px solid var(--line-2);
  padding-top: 15px;
  margin: 0;
}

.page-shop .rules .prose ol > li::before {
  content: counter(samm, decimal-leading-zero);
  display: block;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 54px;
  line-height: .82;
  color: var(--orange);
  margin: 0 0 11px -3px;
}


.page-shop .support-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.page-shop .support-rule { height: 3px; background: var(--ink); margin-top: 13px; }

.page-shop .support-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 48px;
  align-items: start;
  margin-top: 38px;
}

.page-shop .support-sum {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(64px, 9vw, 104px);
  line-height: .88;
  color: var(--red);
  margin-left: -4px;
}

.page-shop .support-note {
  font-size: 17px;
  line-height: 1.6;
  color: #463831;
  margin: 18px 0 0;
  max-width: 44ch;
}

/* Fondi logo istub kreemjal ribal ilma kastita. Valge kast oli kavandi kohatäite
   plaat ja luges pärast logo saabumist raamina, mis lehe taustast välja hüppas.
   Logo on paremasse serva joondatud: selle parem serv jookseb kokku ülal oleva
   sildi ja all oleva "Fondi 1,00 €" reaga, ehk ta seisab riba oma joonel. */
.page-shop .support-plate {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.page-shop .support-plate span {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.8;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(26, 5, 7, .6);
}



.page-shop .hero-price { margin-top: 4px; }

/* ==========================================================================
   Ekraanisuurused. Enne oli üks murdepunkt 960 juures ja kõik muu lukus
   1240 piksli peale, mistõttu suurel ekraanil seisis pood kitsa ribana keskel
   ja vahemik 640 kuni 960 ei olnud üldse läbi mõeldud.
   ========================================================================== */

/* ==========================================================================
   AVALEHT, kavand 1:1 (docs/kavand-2026-09/Main.dc.html).

   Kavand on joonistatud 1200 piksli laiusele. Siin on iga mõõt sama arv korda
   var(--s), mis on ühe kavandipiksli tegelik suurus. Alates 1200 laiusest on
   --s täpselt 1px ja leht seisab kavandiga üks ühele ekraani keskel, ribad
   jooksevad servast servani. Varem kasvas --s ekraaniga kaasa (1920 peal
   1,6 korda) ja Magnus ütles 03.09.2026, et kõik on liiga sisse zoomitud:
   üks sektsioon peab ekraanile korraga ära mahtuma. 1104 kuni 1200 vahel
   kahaneb --s veidi alla ühe, allpool laotub leht ühte veergu.
   ========================================================================== */

.page-shop {
  --s: clamp(0.92px, 0.083333vw, 1px);
  --pad: calc(56 * var(--s));
}

.page-shop .band { position: relative; background: var(--ink); }
.page-shop .band-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1200 * var(--s));
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Nav skaleerub koos ülejäänuga, muidu istub kavandi kohal võõras riba. */
.page-shop nav { max-width: none; padding: calc(16 * var(--s)) var(--pad); gap: calc(24 * var(--s)); }
.page-shop .brand-mark { height: calc(34 * var(--s)); }
.page-shop .nav-links { gap: calc(18 * var(--s)); }
.page-shop .pill {
  border: 0; padding: 0;
  font-size: calc(11.5 * var(--s));
  letter-spacing: .18em;
  color: rgba(247, 241, 229, .72);
}
.page-shop .nav-buy {
  height: calc(38 * var(--s));
  line-height: calc(38 * var(--s));
  padding: 0 calc(18 * var(--s));
  font-size: calc(16 * var(--s));
  border: 1px solid rgba(247, 241, 229, .4);
  background: none;
  color: var(--cream);
}

/* ---- START ---- */
/* Kuma, mitte pilt. Karbi kiirusjoonte jpg on 26 kB ja venis suurel ekraanil
   pikslipuruks (Magnus, 03.09.2026). Kolm kihti: sügavpunane halo riba enda
   taustal, kavandi oranž valgusvihk selle peal ja vasakut serva tumendav loor,
   et pealkiri jääks puhtale mustale. */
.page-shop .band-hero {
  overflow: hidden;
  background-color: var(--ink);
  background-image: radial-gradient(ellipse calc(1100 * var(--s)) calc(760 * var(--s)) at 78% 45%,
    rgba(142, 12, 18, .62) 0%, rgba(142, 12, 18, .24) 45%, rgba(142, 12, 18, 0) 72%);
  background-repeat: no-repeat;
}

.page-shop .hero-beam {
  position: absolute;
  top: calc(-260 * var(--s));
  left: 46%;
  width: calc(900 * var(--s));
  height: calc(900 * var(--s));
  background: radial-gradient(circle, rgba(255, 90, 60, .38) 0%, rgba(255, 90, 60, .12) 34%, rgba(255, 90, 60, 0) 62%);
  pointer-events: none;
}

.page-shop .hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(6, 0, 1, .55) 0%, rgba(6, 0, 1, 0) 48%);
  pointer-events: none;
}

.page-shop .hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: calc(32 * var(--s));
  align-items: start;
  padding: calc(46 * var(--s)) 0 0;
  max-width: none;
}


.page-shop .hero-title .hi { color: var(--orange); }

.page-shop .hero-lead {
  font-size: calc(18 * var(--s));
  line-height: 1.55;
  color: rgba(247, 241, 229, .78);
  margin: calc(24 * var(--s)) 0 0;
  max-width: 27em;
}

.page-shop .hero-badge {
  font-size: calc(10.5 * var(--s));
  padding: calc(8 * var(--s)) calc(14 * var(--s));
  margin-bottom: 0;
}

.page-shop .hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(20 * var(--s));
  text-align: right;
  padding-top: calc(8 * var(--s));
}

/* Kaardipakk: seitse päris kaardiselga käsitsi kuhjatud pakina, seal kus enne
   oli münt. Hõljumine segab pakki (main.js): kaardid tulevad kuhja seest välja,
   lendavad vasakule üles ja kukuvad üksteise järel peale tagasi. Kuhja
   järjekord on ainult pos-N klassid, lend on üks keyframe kaardi enda
   muutujatega. Liigub ainult transform ja opacity, z-index hüppab
   diskreetselt keyframe sees (nagu deal-away lehvikus). Kaart 240 x 169
   (640:451), kast 190 kõrge nagu münt, et hind ja ostunupp ei liiguks. */
/* Vihje paki all ("Puuduta, sega pakki"): peidus igal pool peale sõrmega
   ekraani alla 900 (pointer: coarse plokk faili lõpus), kaob esimese puutega
   (main.js paneb deck-wrap'ile .touched). Baasreegel on siin, mitte
   meediaplokis, sest ilma selleta joonistuks 1440 peal 300 x 150 SVG. */
.page-shop .deck-hint { display: none; align-items: center; gap: 8px; margin-top: 12px; white-space: nowrap; font: 10.5px 'Azeret Mono', ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 241, 229, .5); transition: opacity .4s ease; }
.page-shop .deck-hint svg { width: 16px; height: 16px; flex: none; }
/* -6 kraadi kalle lükkab paki parema ülanurga umbes 10 px veeru joonest
   (OSTA nupp, HIND, hind) üle; nihuta pakk selle võrra vasakule, et ta
   oleks joonega tasa nagu münt oli. */
.page-shop .deck-wrap { width: max-content; margin-right: calc(10 * var(--s)); }
.page-shop .deck {
  --dir: -1; --reach: 1; --lift: 1; --twist: 1;
  /* Paki laius on üks muutuja: laual 240 kavandipikslit, puuteastmetel oma
     clamp (allpool). Kasti kõrgus on sama 190/240 suhe, laual täpselt 190. */
  --deck-w: calc(240 * var(--s));
  position: relative;
  width: var(--deck-w);
  height: calc(var(--deck-w) * 190 / 240);
  transform: rotate(-6deg);
  perspective: calc(900 * var(--s));
  /* Kaardid on päris 3D ruumis (translateZ), mitte z-index'iga: kuhjast välja
     tõmmatud kaart tõuseb teiste kohale sujuvalt, ilma kihi hüppeta. */
  transform-style: preserve-3d;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.page-shop .deck:focus-visible { outline: 2px solid var(--orange); outline-offset: calc(8 * var(--s)); }
/* Paki vari laual: staatiline plaat alumise kaardi jalajäljel, sama kaal kui
   mündi drop-shadow'l. Ei liigu kunagi. */
.page-shop .deck::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s)); top: calc(12 * var(--s));
  width: var(--deck-w);
  aspect-ratio: 640 / 451;
  border-radius: calc(6 * var(--s));
  transform: rotate(-.6deg) translateZ(calc(-14 * var(--s)));
  box-shadow: 0 calc(16 * var(--s)) calc(30 * var(--s)) rgba(0, 0, 0, .55);
  z-index: 0;
  pointer-events: none;
}
.page-shop .deck-card {
  --rx: 0px; --ry: 0px; --rr: 0deg; --z: 1; --zd: 0;
  --i: 0; --zt: 10; --turn: 0; --dur: 900ms;
  --fx: 150; --fy: 22; --fr: 12;
  position: absolute; left: 0; top: 0;
  width: var(--deck-w);
  aspect-ratio: 640 / 451;
  border-radius: calc(6 * var(--s));
  box-shadow: 0 calc(8 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, .5), 0 0 0 1px rgba(247, 241, 229, .22);
  transform: translate3d(var(--rx), var(--ry), calc(var(--zd) * var(--s))) rotate(var(--rr));
  transform-style: preserve-3d;
  z-index: var(--z);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
/* Kaks külge nagu mündil: selg ees, küsimus taga, tagakülg peidus. Mitte
   overflow: hidden siia, see lamendaks 3D ja Safari vilgutaks. */
/* <picture> on ainult ümbris WebP versiooni jaoks (layout.php picture_html).
   Ta ei tohi paigutust muuta, seega ta kaob paigutusest ise ära ja pilt jääb
   täpselt sinna, kus ta enne oli. */
.page-shop picture, .page-checkout picture { display: contents; }

.page-shop .deck-card img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Nägu on peegelpildis ja nähtamatu; pööre on 2D scaleX (mitte rotateY), sest
   kolm korraga keeravat kaarti lõikaksid päris 3D-s üksteisest läbi. Kui
   kaart on scaleX(-1) peal, on peegelnägu õigetpidi ja opacity toob ta ette. */
.page-shop .deck-face { transform: scaleX(-1); opacity: 0; background: var(--cream); }
/* Lennuvari: eraldi plaat kaardi all, ainult opacity liigub. */
.page-shop .deck-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: -1;
  box-shadow: 0 calc(30 * var(--s)) calc(40 * var(--s)) rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
}
/* Puhkeasend, pos-0 on pealmine. Väikesed käsitsi kuhjatud nihked. */
.page-shop .deck-card.pos-0 { --zd: 0; --rx: 0px; --ry: 0px; --rr: 0deg; --z: 7; }
.page-shop .deck-card.pos-1 { --zd: -1.4; --rx: calc(3 * var(--s)); --ry: calc(2 * var(--s)); --rr: 1.2deg; --z: 6; }
.page-shop .deck-card.pos-2 { --zd: -2.8; --rx: calc(-2 * var(--s)); --ry: calc(4 * var(--s)); --rr: -1.4deg; --z: 5; }
.page-shop .deck-card.pos-3 { --zd: -4.2; --rx: calc(4 * var(--s)); --ry: calc(6 * var(--s)); --rr: .8deg; --z: 4; }
.page-shop .deck-card.pos-4 { --zd: -5.6; --rx: calc(-3 * var(--s)); --ry: calc(8 * var(--s)); --rr: -1.8deg; --z: 3; }
.page-shop .deck-card.pos-5 { --zd: -7; --rx: calc(2 * var(--s)); --ry: calc(10 * var(--s)); --rr: 1.4deg; --z: 2; }
.page-shop .deck-card.pos-6 { --zd: -8.4; --rx: calc(-1 * var(--s)); --ry: calc(12 * var(--s)); --rr: -.6deg; --z: 1; }
/* Lennu iseloom on DOM-i elemendi küljes, et ükski kaks kaarti ei lendaks
   sama rada: ulatus (px), kõrgus (px), kalle (deg), kõik korda --s. Kõrgus
   on lagi 24: koos kaldega, tipu scale'iga ja pöörleva kaardi perspektiiviga
   jääb iga kaardi ülemine nurk navi alumisest joonest allapoole (mõõdetud
   1105, 1200, 1440, 1920 peal, pausitud animatsiooni sammudes). */
.page-shop .deck-card:nth-child(1) { --fx: 150; --fy: 22; --fr: 8; }
.page-shop .deck-card:nth-child(2) { --fx: 118; --fy: 12; --fr: 5; }
.page-shop .deck-card:nth-child(3) { --fx: 164; --fy: 24; --fr: 8; }
.page-shop .deck-card:nth-child(4) { --fx: 134; --fy: 18; --fr: 7; }
.page-shop .deck-card:nth-child(5) { --fx: 156; --fy: 21; --fr: 8; }
.page-shop .deck-card:nth-child(6) { --fx: 124; --fy: 14; --fr: 6; }
.page-shop .deck-card:nth-child(7) { --fx: 146; --fy: 19; --fr: 7; }

/* Segamine: iga kaart lendab sama keyframe'iga, --i (0..6) annab viivituse
   ja --zt (20 + i) maandumise järjekorra, --turn (0 või 360) täispöörde
   õhus, mille ajal vilksatab küsimuse külg. 0 kuni 24 protsenti libiseb
   kaart kuhja SEEST külje pealt välja (oma z-ga, teiste kaartide alt), 28
   protsendil hüppab kõige peale, 50 on lennu tipp, 84 on paki kohal,
   100 puhkeasendis. */
.page-shop .deck.shuffling .deck-card {
  animation: deck-fly var(--dur, 900ms) linear calc(var(--i) * 170ms) both;
  transition: none;
}
.page-shop .deck.shuffling .deck-card::after {
  animation: deck-fly-shadow var(--dur, 900ms) linear calc(var(--i) * 170ms) both;
}
/* 0 kuni 30: kaart libiseb oma sügavusel (--zd) kuhja seest külje pealt
   välja, teiste alt. 30 kuni 55: tõuseb (translateZ) ja lendab tippu,
   perspektiiv teeb ta ise pisut suuremaks. 55 kuni 86: laskub paki kohale
   oma maandumissügavusel (--zt, iga järgmine kõrgemal). 100: puhkeasend. */
@keyframes deck-fly {
  0% {
    transform: translate3d(var(--rx), var(--ry), calc(var(--zd) * var(--s))) rotate(var(--rr)) scaleX(1) scale(1);
    animation-timing-function: cubic-bezier(.5, 0, .6, 1);
  }
  /* Väljalibisemine käib sama --reach korrutajaga nagu kogu ülejäänud lend.
     Ilma selleta libises kaart telefonil 118 px paremale, ehk 2,4 korda
     kaugemale kui lennu tipp, ja kattis hinna, mida see otsus (--reach .3,
     04.09.2026) just vältima pidi. Laual on --reach 1, seega seal 118 px
     nagu enne (15.09.2026, 13.25). */
  30% {
    transform: translate3d(calc(var(--rx) + var(--dir) * 118 * var(--reach) * var(--s)), calc(var(--ry) + 4 * var(--s)), calc(var(--zd) * var(--s))) rotate(calc(var(--rr) + var(--dir) * 2deg)) scaleX(1) scale(1);
    animation-timing-function: cubic-bezier(.25, .5, .3, 1);
  }
  /* Pöörlev kaart (--turn 360): scaleX läheb 1 -> 0 (48%) -> -1 (55%) -> 0
     (66%) -> 1, nägu on nähtav 48 kuni 66 protsendil (deck-face). Ilma
     Z-ulatuseta ei lõika kolm korraga keeravat kaarti üksteist. */
  42% {
    transform: translate3d(calc(var(--rx) + var(--dir) * var(--fx) * .85 * var(--reach) * var(--s)), calc(var(--ry) - var(--fy) * .7 * var(--lift) * var(--s)), calc((40 + var(--turn) * .07) * var(--s))) rotate(calc(var(--dir) * var(--fr) * .8 * var(--twist) * 1deg)) scaleX(calc(1 - var(--turn) / 360 * .45)) scale(calc(1 - var(--turn) * .0003));
    animation-timing-function: cubic-bezier(.35, .1, .3, 1);
  }
  48% {
    transform: translate3d(calc(var(--rx) + var(--dir) * var(--fx) * .93 * var(--reach) * var(--s)), calc(var(--ry) - var(--fy) * .88 * var(--lift) * var(--s)), calc((45 + var(--turn) * .07) * var(--s))) rotate(calc(var(--dir) * var(--fr) * .9 * var(--twist) * 1deg)) scaleX(calc(1 - var(--turn) / 360)) scale(calc(1 - var(--turn) * .0003));
    animation-timing-function: cubic-bezier(.3, .3, .3, 1);
  }
  55% {
    transform: translate3d(calc(var(--rx) + var(--dir) * var(--fx) * var(--reach) * var(--s)), calc(var(--ry) - var(--fy) * var(--lift) * var(--s) + var(--turn) * .01 * var(--s)), calc((48 + var(--turn) * .07) * var(--s))) rotate(calc(var(--dir) * var(--fr) * var(--twist) * 1deg)) scaleX(calc(1 - var(--turn) / 360 * 2)) scale(calc(1 - var(--turn) * .0003));
    animation-timing-function: cubic-bezier(.45, .05, .25, 1);
  }
  66% {
    transform: translate3d(calc(var(--rx) + var(--dir) * var(--fx) * .6 * var(--reach) * var(--s)), calc(var(--ry) - var(--fy) * .75 * var(--lift) * var(--s)), calc((36 + var(--turn) * .07) * var(--s))) rotate(calc(var(--dir) * var(--fr) * .55 * var(--twist) * 1deg)) scaleX(calc(1 - var(--turn) / 360)) scale(calc(1 - var(--turn) * .0003));
    animation-timing-function: cubic-bezier(.3, .3, .3, 1);
  }
  70% {
    transform: translate3d(calc(var(--rx) + var(--dir) * var(--fx) * .45 * var(--reach) * var(--s)), calc(var(--ry) - var(--fy) * .6 * var(--lift) * var(--s)), calc((30 + var(--turn) * .05) * var(--s))) rotate(calc(var(--dir) * var(--fr) * .4 * var(--twist) * 1deg)) scaleX(calc(1 - var(--turn) / 360 * .5)) scale(calc(1 - var(--turn) * .0003));
    animation-timing-function: cubic-bezier(.3, .5, .3, 1);
  }
  86% {
    transform: translate3d(calc(var(--rx) + var(--dir) * 4 * var(--s)), calc(var(--ry) - 2 * var(--s)), calc((var(--zt) + 4) * var(--s))) rotate(var(--rr)) scaleX(1) scale(1);
    animation-timing-function: cubic-bezier(.3, .6, .3, 1);
  }
  100% {
    transform: translate3d(var(--rx), var(--ry), calc(var(--zt) * var(--s))) rotate(var(--rr)) scaleX(1) scale(1);
  }
}
/* Küsimuse nägu on ees ainult siis, kui kaart on peegli poole (48 kuni 66
   protsenti lennust) ja ainult keerval kaardil (--turn 360, muidu 0). */
.page-shop .deck.shuffling .deck-face {
  animation: deck-face var(--dur, 900ms) linear calc(var(--i) * 170ms) both;
}
@keyframes deck-face {
  0%, 47.9% { opacity: 0; }
  48%, 66% { opacity: calc(var(--turn) / 360); }
  66.1%, 100% { opacity: 0; }
}
@keyframes deck-fly-shadow {
  0%, 30% { opacity: 0; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}
/* Ootel: pealmine kaart nihkub korraks välja ja tagasi, vihje et pakk reageerib. */
.page-shop .deck.peek .deck-card.pos-0 { animation: deck-peek 700ms cubic-bezier(.45, 0, .3, 1) 1; }
@keyframes deck-peek {
  0%, 100% { transform: translate3d(var(--rx), var(--ry), calc(var(--zd) * var(--s))) rotate(var(--rr)); }
  45% { transform: translate3d(calc(var(--rx) + var(--dir) * 22 * var(--s)), calc(var(--ry) + 2 * var(--s)), calc(var(--zd) * var(--s))) rotate(calc(var(--rr) + var(--dir) * 3deg)); }
}

.page-shop .hero-price-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(10.5 * var(--s));
  line-height: 1.25;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 241, 229, .55);
}

.page-shop .hero-price-sum {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(66 * var(--s));
  line-height: .9;
  margin-top: calc(2 * var(--s));
}

.page-shop .hero-right .buy-row { justify-content: flex-end; gap: calc(10 * var(--s)); }
.page-shop .hero-right .qty { height: calc(52 * var(--s)); }
.page-shop .hero-right .qty button, .page-shop .hero-right .qty .qty-step {
  width: calc(42 * var(--s)); height: calc(52 * var(--s)); line-height: calc(52 * var(--s));
  font-size: calc(20 * var(--s)); font-weight: 400; color: rgba(247, 241, 229, .65); padding: 0;
}
/* Number on kavandis Azeret Mono püsti, mitte pealkirjakiri kaldu. */
.page-shop .hero-right .qty input {
  width: calc(30 * var(--s)); height: calc(52 * var(--s)); padding: 0;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-style: normal; font-weight: 500;
  font-size: calc(16 * var(--s)); color: var(--cream);
}
.page-shop .hero-right .qty span { font-size: calc(16 * var(--s)); }
.page-shop .hero-right .btn-dark {
  height: calc(54 * var(--s));
  padding: 0 calc(30 * var(--s));
  font-size: calc(22 * var(--s));
  display: inline-flex;
  align-items: center;
}
.page-shop .hero-right .notify { text-align: left; }

.page-shop .hero-fine {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(11 * var(--s));
  letter-spacing: .1em;
  line-height: 1.7;
  color: rgba(247, 241, 229, .5);
  margin: 0;
}

/* ---- ajavõtutabel ---- */
.page-shop .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(247, 241, 229, .22);
  border-bottom: 1px solid rgba(247, 241, 229, .22);
  margin: calc(54 * var(--s)) 0 0;
}

.page-shop .stat {
  padding: calc(20 * var(--s)) 0 calc(18 * var(--s));
  border-right: 1px solid rgba(247, 241, 229, .14);
  border-bottom: 0;
}
.page-shop .stat + .stat { padding-left: calc(26 * var(--s)); }
.page-shop .stat:last-child { border-right: 0; }

.page-shop .stat-lbl {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(10.5 * var(--s));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247, 241, 229, .5);
}

.page-shop .stat-val {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(46 * var(--s));
  line-height: 1;
  margin-top: calc(6 * var(--s));
}

.page-shop .hero-tail { height: calc(46 * var(--s)); }

/* ---- kreemjas riba ---- */
.page-shop .band-cream { background: var(--ink-2); color: var(--ink); }
.page-shop .band-cream::before { content: ""; position: absolute; inset: 0; background: var(--cream); }
.page-shop .band-cream > .band-in {
  padding-top: calc(96 * var(--s));
  padding-bottom: calc(76 * var(--s));
}
.page-shop .band-legend { margin-top: calc(-20 * var(--s)); }
/* Polügoni alumine serv on kastist väljas: siis lõikab all kasti enda serv,
   mille brauser pikslivõrku klõpsab. Polügoni serv murdosapikslil sulatatakse
   riba tumeda tausta peale halliks jooneks, mis paistis kreemja ja tumeda
   riba vahel terve laiuse ulatuses (mõõdetud 04.09.2026). */
.page-shop .band-legend::before { clip-path: polygon(0 calc(46 * var(--s)), 100% 0, 100% 110%, 0 110%); }

.page-shop .legend {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: calc(40 * var(--s));
  align-items: center;
}

.page-shop .eyebrow {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(11 * var(--s));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247, 241, 229, .5);
}
.page-shop .band-cream .eyebrow { color: rgba(26, 5, 7, .55); }
.page-shop .eyebrow-red { color: var(--red); }

.page-shop .sec-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(52 * var(--s));
  line-height: .95;
  text-transform: uppercase;
  margin: calc(12 * var(--s)) 0 0;
  color: inherit;
}

.page-shop .legend .prose {
  font-size: calc(17 * var(--s));
  line-height: 1.6;
  color: #4A3A32;
  margin-top: calc(18 * var(--s));
  max-width: 26em;
}
.page-shop .band-cream .prose h2, .page-shop .band-cream .prose h3 { color: var(--ink); }
.page-shop .band-cream .prose a { color: var(--red); }

/* Kaardilehvik. Kolm kaarti samas kastis, koht tuleb pos-klassist: pos-0 on
   ees, pos-1 ja pos-2 on seljad kavandi nurkade all. Hõljumine jagab eesmise
   kaardi taha ja järgmise ette (main.js), muutes ainult klasse. Kavand mõõtis
   kaardi content-box'ina: 430 pluss polster pluss raam. */
.page-shop .legend-cards { position: relative; }
.page-shop .band-legend { overflow: hidden; }
.page-shop .fan { position: relative; height: auto; min-height: calc(300 * var(--s)); outline: none; }
.page-shop .fan[data-fan] { cursor: pointer; }
.page-shop .fan[data-fan]:focus-visible .pos-0 { outline: 2px solid var(--orange); outline-offset: 4px; }
.page-shop .fan-card {
  --tx: 0px; --ty: 0px; --rot: 1.5deg;
  position: absolute; left: 0; top: 0;
  box-sizing: content-box;
  width: calc(430 * var(--s));
  min-height: calc(194 * var(--s));
  background: #FFFFFF;
  border: 1px solid #DCCFB6;
  box-shadow: 0 calc(26 * var(--s)) calc(50 * var(--s)) rgba(26, 5, 7, .22);
  padding: calc(30 * var(--s)) calc(32 * var(--s)) calc(34 * var(--s));
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transition: transform .75s cubic-bezier(.2, .8, .2, 1), background-color .5s ease, box-shadow .5s ease, opacity .5s ease;
}
.page-shop .fan-card > * { transition: opacity .35s ease; }
.page-shop .fan-card.pos-0 { z-index: 3; }
.page-shop .fan-card.pos-1 { --tx: calc(18 * var(--s)); --ty: calc(8 * var(--s)); --rot: -3.5deg; z-index: 2; background: #F2EADB; box-shadow: none; }
.page-shop .fan-card.pos-2 { --tx: calc(40 * var(--s)); --ty: calc(22 * var(--s)); --rot: -7deg; z-index: 1; background: #E6DCC8; border-color: #CFC2A9; box-shadow: none; }
.page-shop .fan-card.pos-hidden { --tx: calc(40 * var(--s)); --ty: calc(22 * var(--s)); --rot: -7deg; z-index: 0; opacity: 0; }
.page-shop .fan-card:not(.pos-0) > * { opacity: 0; }
.page-shop .fan-card.dealing { animation: deal-away .8s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes deal-away {
  0% { transform: rotate(1.5deg); z-index: 5; }
  40% { transform: translate(calc(70 * var(--s)), calc(-80 * var(--s))) rotate(10deg) scale(1.04); z-index: 5; }
  55% { z-index: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); z-index: 1; }
}

.page-shop .fan-ref {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(10.5 * var(--s));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A08F7A;
}

.page-shop .fan-q {
  font-size: calc(17 * var(--s));
  line-height: 1.45;
  color: #1A0507;
  margin: calc(14 * var(--s)) 0 calc(20 * var(--s));
  font-weight: 500;
}

.page-shop .fan-a { display: flex; flex-direction: column; gap: calc(9 * var(--s)); font-size: calc(16 * var(--s)); line-height: 1.25; color: #4A3A32; }
/* Õiget vastust EI tõsteta esile: kliendi tagasiside 05.09.2026. Klass jääb
   markupi (admin märgib õige vastuse ära), aga näeb välja nagu teised. */
.page-shop .fan-a .right { font-weight: inherit; font-style: inherit; color: inherit; }
.page-shop .band-cream .fan-note { color: #8A7C6A; margin-top: calc(14 * var(--s)); }

/* ---- rajamärkmed ---- */
.page-shop .band-rules { background: var(--ink-2); }
.page-shop .band-rules > .band-in { padding-top: calc(82 * var(--s)); padding-bottom: calc(88 * var(--s)); }

.page-shop .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(24 * var(--s));
  border-bottom: 1px solid rgba(247, 241, 229, .2);
  padding-bottom: calc(14 * var(--s));
  margin-bottom: 0;
}
.page-shop .sec-head .sec-title { font-size: calc(46 * var(--s)); line-height: 1; margin: 0; }

.page-shop .steps {
  display: grid;
  grid-template-columns: .95fr 1.25fr .8fr;
  gap: calc(48 * var(--s));
  margin-top: calc(46 * var(--s));
}

.page-shop .step {
  background: none;
  border-top: 2px solid rgba(247, 241, 229, .3);
  padding: calc(15 * var(--s)) 0 0;
}

.page-shop .step-num {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(54 * var(--s));
  line-height: .82;
  color: var(--orange);
  margin-left: calc(-3 * var(--s));
}

.page-shop .step-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(27 * var(--s));
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--cream);
  margin: calc(11 * var(--s)) 0 0;
}

.page-shop .step-text {
  font-size: calc(16.5 * var(--s));
  line-height: 1.55;
  color: rgba(247, 241, 229, .84);
  margin: calc(12 * var(--s)) 0 0;
}

/* ---- galerii ja küsimused ---- */
.page-shop #galerii > .band-in { padding-top: calc(72 * var(--s)); padding-bottom: calc(24 * var(--s)); }
.page-shop .gal { gap: calc(22 * var(--s)); }
.page-shop .band-faq { background: var(--ink-2); }
.page-shop .band-faq > .band-in { padding-top: calc(72 * var(--s)); padding-bottom: calc(88 * var(--s)); }
.page-shop .band-faq .faq { margin-top: calc(40 * var(--s)); max-width: none; gap: calc(14 * var(--s)); }
.page-shop .band-faq .faq summary { font-size: calc(17 * var(--s)); padding: calc(22 * var(--s)) calc(26 * var(--s)); }
.page-shop .band-faq .faq summary::after { font-size: calc(28 * var(--s)); }
.page-shop .band-faq .faq details p { font-size: calc(15 * var(--s)); padding: 0 calc(26 * var(--s)) calc(22 * var(--s)); }

/* ---- toetus ---- */
.page-shop .band-support { margin-top: calc(-22 * var(--s)); }
.page-shop .band-support::before { clip-path: polygon(0 0, 100% calc(44 * var(--s)), 100% 110%, 0 110%); }
.page-shop .band-support > .band-in {
  padding-top: calc(86 * var(--s));
  padding-bottom: calc(62 * var(--s));
}

.page-shop .support-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(24 * var(--s)); }
.page-shop .support-rule { height: calc(3 * var(--s)); background: var(--ink); margin-top: calc(13 * var(--s)); }

.page-shop .support-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(268 * var(--s));
  gap: calc(48 * var(--s));
  align-items: start;
  margin-top: calc(38 * var(--s));
}

.page-shop .support-sum {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(104 * var(--s));
  line-height: .88;
  color: var(--red);
  margin-left: calc(-4 * var(--s));
}

.page-shop .support-note { font-size: calc(17 * var(--s)); line-height: 1.6; color: #463831; margin: calc(18 * var(--s)) 0 0; max-width: 44ch; }

.page-shop .support-plate {
  display: flex; align-items: center; justify-content: flex-end;
}
.page-shop .support-plate span {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(10.5 * var(--s));
  line-height: 1.8; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(26, 5, 7, .6);
}
/* Fondi logo: laius veerust, kõrgus proportsioonist (170 x 53). 244 on suurim
   mõõt, mille juures täht ulatub täpselt veeru parema servani ja mitte üle
   (mõõdetud 1440, 1920 ja 390 pildilt 13.09.2026). */
.page-shop .support-logo { display: block; width: min(100%, calc(244 * var(--s))); height: auto; }

/* Kuusteist ruutu, üks neist punane. Ruutude arv ON see fakt. */
.page-shop .measure { display: grid; grid-template-columns: repeat(var(--n, 16), 1fr); gap: calc(8 * var(--s)); margin-top: calc(48 * var(--s)); }
.page-shop .measure span { height: calc(46 * var(--s)); background: rgba(26, 5, 7, .13); }
.page-shop .measure span.on { background: var(--red); }
.page-shop .measure-lbl {
  display: flex; justify-content: space-between; gap: calc(24 * var(--s)); margin-top: calc(11 * var(--s));
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(10.5 * var(--s)); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(26, 5, 7, .55);
}
.page-shop .measure-lbl .on { color: var(--red); }

/* ---- finiš ---- */
/* Sama kuma mis kangelasel, pildita: punane riba, mis vasakul vajub mustaks. */
.page-shop .band-finish {
  background-color: var(--red);
  background-image: radial-gradient(ellipse calc(900 * var(--s)) calc(460 * var(--s)) at 82% 55%,
    rgba(255, 90, 60, .28) 0%, rgba(255, 90, 60, 0) 70%);
  background-repeat: no-repeat;
}
.page-shop .band-finish::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,0,1,.92) 0%, rgba(8,0,1,.62) 100%);
}
/* Lipp, neljas ring (Magnus 03. ja 04.09.2026). Mis töötas: staatiline kavand,
   kus kumbki rida oli ÜKS lai gradient. Mis ei töötanud: 30 x 15 tükkidena
   korduv taust, sest Windowsi 125 või 150 protsendi skaleerimisel ümardub iga
   tükk ekraanipiksliteks eraldi ja kahe rea ruudud nihkuvad teineteise
   suhtes; kui palju, sõltub sellest, millisele murdosapikslile lehe sisu lipu
   jätab, sellepärast paistis KKK avamine seda muutvat. Nüüd on kumbki rida
   jälle üks gradient, 3000 kavandipikslit lai (täpselt 100 perioodi), mis
   kordub ainult selleks, et liikumine saaks servast mähkida. Taust on tavaline,
   mitte eraldi kompositorikiht, sest kiht joonistatakse filtriga ja jätab
   kreemja riba alla häguse õmbluse. */
/* Lipp on kaks rida PÄRIS KASTE (index.php), üks iga kreemja ruudu kohta.
   Põhjus, mõõdetud 04.09.2026 pikslihaaval (scratchpad/lab): Windowsi 125 või
   175 protsendi skaleerimisel joonistab Chrome gradienttausta, SVG mustri ja
   rasterpildi (ka image-rendering: pixelated) murdosalisel asukohal filtriga,
   ridade vahele ja kreemja riba alla tekib terve laiuse pikkune hall joon,
   mis sõltub sellest, kuhu leht lipu jätab (sellepärast paistis KKK avamine
   seda muutvat). Tavalise värviga kasti klõpsab Chrome pikslivõrku alati.
   Kastid on liikuva kompositorikihi (transform) SEES: kihi sisu joonistatakse
   kihi enda pikslivõrgus teravalt ja kiht ise hoitakse tervel ekraanipikslil
   (main.js joondab riba ja paneb sammu pikkuseks terve ekraanipiksli; media
   (resolution) reeglid all teevad sama ilma skriptita). Kihita kastid
   klõpsab Blink kõigepealt terve CSS-piksli peale, mis on 125 protsendi
   juures kolmel juhul neljast murdosaline ekraanipiksel. Ruut on 16, mitte kavandi 15: 16 on 20,
   24, 28 või 32 ekraanipikslit. Riba katab kreemjat riba 1 px, et piir jääks
   ruutude sisse. */
.flag {
  position: relative;
  z-index: 1;
  height: 32px;
  overflow: hidden;
}
.flag-rows { position: absolute; left: -32px; top: 0; will-change: transform; transform: translateX(0); }
.flag-row { display: flex; height: 16px; gap: 16px; }
.flag-row-2 { padding-left: 16px; }
.flag-row i { display: block; flex: none; width: 16px; height: 16px; background: var(--cream); }

.page-shop .finish {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: calc(40 * var(--s));
  padding-top: calc(54 * var(--s)); padding-bottom: calc(58 * var(--s));
}

.page-shop .finish-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic; font-weight: 800;
  font-size: calc(58 * var(--s));
  line-height: .92; text-transform: uppercase; margin: 0; color: var(--cream);
}

.page-shop .finish-facts {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(12 * var(--s)); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 241, 229, .7); margin: calc(14 * var(--s)) 0 0;
}

.page-shop .finish-side { display: flex; flex-direction: column; align-items: flex-end; gap: calc(12 * var(--s)); text-align: right; margin-top: calc(3 * var(--s)); }
.page-shop .finish-side .cta-btn {
  height: calc(62 * var(--s)); padding: 0 calc(34 * var(--s));
  font-size: calc(24 * var(--s));
  display: inline-flex; align-items: center; white-space: nowrap;
}
.page-shop .finish-side .cta-note {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(10.5 * var(--s)); letter-spacing: .12em; color: rgba(247, 241, 229, .6);
}

.page-shop footer { margin-top: 0; font-size: calc(14 * var(--s)); }
.page-shop footer .wrap {
  max-width: calc(1200 * var(--s));
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.page-shop nav { max-width: calc(1200 * var(--s)); margin: 0 auto; }

/* ---- nav kangelase sees ----
   Kavandis jookseb kiirusjoonte tekstuur navi TAGA, mitte navi all algavas
   ribas. Avaleht trükib navi kangelase riba sisse (index.php), siin saab ta
   riba enda serva ja kavandi joone. */
.page-shop .nav-home {
  max-width: none;
  margin: 0 calc(-1 * var(--pad));
  padding: calc(16 * var(--s)) var(--pad);
  border-bottom: 1px solid rgba(247, 241, 229, .16);
}
.page-shop .nav-links { gap: calc(30 * var(--s)); }
.page-shop .nav-buy {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--s));
  letter-spacing: .05em;
}
.page-shop .btn .arrow { flex: none; width: calc(16 * var(--s)); height: calc(11 * var(--s)); }
.page-shop .hero-right .btn-dark { gap: calc(12 * var(--s)); }
.page-shop .hero-right .btn-dark .arrow { width: calc(20 * var(--s)); height: calc(14 * var(--s)); }
.page-shop .finish-side .cta-btn { gap: calc(14 * var(--s)); }
.page-shop .finish-side .cta-btn .arrow { width: calc(22 * var(--s)); height: calc(14 * var(--s)); }

/* Pealkiri kavandi mõõdus. Vanem reegel ".page-shop .hero h1" on ühe elemendi
   võrra spetsiifilisem kui ".hero-title" ja võitis vaikselt: 1200 peal oli
   pealkiri 89 pikslit kavandi 104 asemel. Silmaga näha, arvutusega mitte. */
.page-shop .hero h1.hero-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(104 * var(--s));
  line-height: .86;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: calc(26 * var(--s)) 0 0;
  color: var(--cream);
}

/* Logo kangelases. Kavandi PNG-l on läbipaistev ääris, seega sama kõrgus
   annaks meie SVG-ga silmaga suurema märgi: 58 kavandipikslit on see, mis
   paistab kavandiga sama suur. Veidi vasakule, et R algaks pealkirja joonelt. */
.page-shop .hero-logo { display: flex; align-items: center; height: calc(74 * var(--s)); width: max-content; border: 0; }
.page-shop .hero-logo .brand-mark { height: calc(58 * var(--s)); margin-left: calc(-5 * var(--s)); }

/* Teated ostuveerus (eelvaade, eeltellimus) on kavandi peenkirja keeles, mitte
   raamiga kast, mis kavandis puudub. */
.page-shop .hero-right .notice {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(11 * var(--s));
  letter-spacing: .1em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--orange);
}

/* Toetusriba pealkiri, kavandi 54 pikslit. */
.page-shop .support-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: calc(54 * var(--s));
  line-height: .95;
  text-transform: uppercase;
  margin: calc(-6 * var(--s)) 0 0;
  color: var(--ink);
}

/* ---- jalus, kavandi järgi ---- */
.page-shop footer { border-top: 0; color: rgba(247, 241, 229, .7); }
.page-shop footer .wrap { padding-top: calc(46 * var(--s)); padding-bottom: calc(38 * var(--s)); }
.page-shop .foot-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(34 * var(--s));
  padding: 0;
}
.page-shop .foot-seller-col { grid-column: span 5; }
.page-shop .foot-col { grid-column: span 4; }
.page-shop .foot-col:last-child { grid-column: span 3; }
.page-shop .foot-brand .brand-mark { height: calc(25 * var(--s)); margin-bottom: calc(16 * var(--s)); }
.page-shop .foot-seller {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(12.5 * var(--s));
  line-height: 1.85;
  margin: 0;
  color: rgba(247, 241, 229, .6);
}
/* Lingid venivad veeru laiuseks, siis jookseb joon nende all veeru servani,
   nagu kavandis. */
.page-shop .foot-col {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--s));
  font-size: calc(15 * var(--s));
  line-height: 1.2;
}
.page-shop .foot-head {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: calc(10.5 * var(--s));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247, 241, 229, .42);
  margin-bottom: calc(5 * var(--s));
}
.page-shop .foot-col a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 241, 229, .35);
}
/* Sotsiaalmeedia link jaluse kontaktveerus: ikoon ja nimi ühel real. Joon
   käib ainult nime alt, mitte ikooni alt, muidu jookseb kriips ikooni sisse. */
.page-shop .foot-social {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--s));
  border-bottom: 0;
  width: max-content;
}
.page-shop .foot-social svg { flex: none; width: calc(17 * var(--s)); height: calc(17 * var(--s)); opacity: .82; }
.page-shop .foot-social span { border-bottom: 1px solid rgba(247, 241, 229, .35); }
.page-shop .foot-social:hover svg { opacity: 1; }

/* Telefoninumber on tel: link, et telefon helistaks, aga laual (1105 ja
   üles) näeb ta välja nagu kinnitatud tekst: ilma joone ja värvita. Lingi
   välimuse saab ta 1104 plokis. */
.page-shop .foot-col a[href^="tel:"], .page-shop .foot-col a[href^="tel:"]:hover { color: inherit; border-bottom: 0; }
.page-shop .foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: calc(24 * var(--s));
  flex-wrap: wrap;
  border-top: 1px solid rgba(247, 241, 229, .14);
  margin-top: calc(32 * var(--s));
  padding: calc(18 * var(--s)) 0 0;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: calc(11.5 * var(--s));
  letter-spacing: .08em;
  color: rgba(247, 241, 229, .42);
}
.page-shop .foot-bottom a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(247, 241, 229, .35); }

/* 1104 on see laius, kus kavand mahub veel täpselt ära: allpool peaks --s
   langema alla 0,92 ja siis muutuvad 10,5-pikslised sildid loetamatuks. Seega
   siit allpool läheb leht ühte veergu ja --s jääb ühe piksli peale, ehk kõik
   väiksed mõõdud on täpselt kavandi omad ja ainult näidiskiri saab oma piiri. */
@media (max-width: 1104px) {
  .page-shop {
    --s: 1px;
    --pad: clamp(18px, 5vw, 44px);
    /* Ribade rütm kasvab laiusega: 48/36 360 peal, 65/54 768 peal, 94/77
       1104 peal, ehk kavandi 96/76 vastu 1105 peal 2 px sees. */
    --band-top: clamp(48px, 8.5vw, 96px);
    --band-bottom: clamp(36px, 7vw, 76px);
  }
  .page-shop .band-cream > .band-in, .page-shop .band-rules > .band-in,
  .page-shop .band-faq > .band-in, .page-shop #galerii > .band-in { padding-top: var(--band-top); padding-bottom: var(--band-bottom); }
  .page-shop #galerii > .band-in { padding-bottom: 24px; }

  .page-shop .hero { grid-template-columns: 1fr; gap: calc(34 * var(--s)); }
  .page-shop .hero h1.hero-title { font-size: clamp(40px, 10.5vw, 78px); }
  .page-shop .hero-right { align-items: flex-start; text-align: left; padding-top: calc(10 * var(--s)); }
  .page-shop .hero-right .buy-row { justify-content: flex-start; width: 100%; }
  /* Pakk on vasakus servas, seega lend läheb paremale, lühemalt ja madalamalt. */
  .page-shop .deck-wrap { margin-right: 0; display: flex; flex-direction: column; align-items: center; }
  .page-shop .deck { --dir: 1; --reach: .62; --lift: .3; --twist: .5; }
  /* Vihje paki all: ainult sõrmega ja alla 900, kaob esimese puutega
     (main.js paneb deck-wrap'ile .touched). */
  .page-shop .deck-wrap.touched .deck-hint { opacity: 0; }
  .page-shop .hero-price-sum { font-size: clamp(46px, 13vw, 66px); }

  .page-shop .stats { grid-template-columns: 1fr 1fr; }
  .page-shop .stat { border-bottom: 1px solid rgba(247, 241, 229, .14); }
  .page-shop .stat:nth-child(2n) { border-right: 0; }
  .page-shop .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .page-shop .stat:nth-child(2n+1) { padding-left: 0; }
  /* Kahe veeru puhul joonistas parempoolse lahtri animeeritud vahejoon
     tabeli paremasse serva; 900 kuni 1104 tuleb ta tagasi (neli veergu). */
  html.js .page-shop .stat:nth-child(2n)::after { display: none; }
  /* Peenkirja fakt ei murdu keskelt ("tarne alates" / "3,90 €"), rida
     vahetub ainult faktide vahelt. */
  .page-shop .hero-fine .fact { white-space: nowrap; }

  .page-shop .legend { grid-template-columns: 1fr; gap: calc(36 * var(--s)); }
  /* Telefonis kaardid üksteise all, seljad paistavad vaid servast. */
  .page-shop .fan { min-height: calc(260 * var(--s)); }
  .page-shop .fan-card { left: 0; right: 0; width: auto; --rot: 0deg; }
  .page-shop .fan-card.pos-1 { --tx: 6px; --ty: 6px; --rot: -1.5deg; }
  .page-shop .fan-card.pos-2, .page-shop .fan-card.pos-hidden { --tx: 12px; --ty: 12px; --rot: -3deg; }

  .page-shop .steps { grid-template-columns: 1fr; gap: calc(34 * var(--s)); }
  .page-shop .support-main { grid-template-columns: 1fr; }
  .page-shop .support-sum { font-size: clamp(64px, 17vw, 104px); }
  .page-shop .support-slot { max-width: calc(268 * var(--s)); }
  .page-shop .measure { gap: 4px; }
  .page-shop .measure span { height: 34px; }
  .page-shop .measure-lbl { flex-direction: column; gap: 4px; }

  .page-shop .foot-main { gap: 26px; }
  /* :last-child (span 3) on spetsiifilisem kui .foot-col ja jättis Info veeru
     62 px laiuseks (mõõdetud 04.09.2026); siin nimeliselt üle rea. */
  .page-shop .foot-seller-col, .page-shop .foot-col, .page-shop .foot-col:last-child { grid-column: 1 / -1; }
  .page-shop .foot-bottom { flex-direction: column; gap: 8px; font-size: 12px; }
  .page-shop .foot-head { font-size: 11px; }
  /* Telefoninumber on siit allpool link nagu teised (.foot-main tõstab
     spetsiifilisust, et hover: hover ploki neutraalne reegel ei võidaks). */
  .page-shop .foot-main .foot-col a[href^="tel:"], .page-shop .foot-main .foot-col a[href^="tel:"]:hover { color: var(--cream); border-bottom: 1px solid rgba(247, 241, 229, .35); }
  /* Sektsioonipäise silt läheb kitsal ekraanil pealkirja alla, mitte üle ääre. */
  .page-shop .sec-head { flex-wrap: wrap; row-gap: 6px; }
  .page-shop .sec-head .eyebrow { white-space: nowrap; }
  /* Toetuse pealkirja reavahetus on laua jaoks; telefonis murdub tekst ise.
     Kangelase pealkirja reavahetused jäävad: neid trükib PHP ilma tühikuta,
     peidetud reavahetus liidaks sõnad kokku. */
  .page-shop .support-title br { display: none; }

  .page-shop .finish { flex-direction: column; align-items: flex-start; gap: calc(28 * var(--s)); }
  .page-shop .finish-title { font-size: clamp(38px, 10vw, 58px); }
  .page-shop .finish-side { align-items: flex-start; text-align: left; width: 100%; }
  .page-shop .finish-side .cta-btn { width: 100%; justify-content: center; }
  .page-shop .finish-side .cta-note { text-align: left; max-width: none; }
}

/* ==========================================================================
   AVALEHE PUUTEASTMED (04.09.2026, Magnus: "olgu tahvel, telefon või muu").
   Kõik 1104 ploki JÄREL, sest sama spetsiifilisusega reeglid võidavad
   järjekorraga. Telefon alla 600: pakk hinna kõrval, ostureaga otse all, nii
   et pakk, hind ja OSTA on 390x844 peal ühel ekraanil ilma pöidlaribata.
   Tahvel püsti 600 kuni 899: pealkiri üle rea, pakk vasakul, hind ja ost
   paremal. Tahvel laiuti 900 kuni 1104: laua seis päris veergudel, --s 1px.
   ========================================================================== */

/* ---- telefon ---- */
@media (max-width: 599px) {
  .page-shop .hero { padding-top: 20px; gap: 22px; }
  .page-shop .hero-logo { height: 56px; }
  .page-shop .hero-logo .brand-mark { height: 44px; }
  .page-shop .hero h1.hero-title { margin-top: 16px; }
  .page-shop .hero-lead { font-size: 17px; line-height: 1.5; margin-top: 16px; max-width: none; }
  /* Pakk vasakul, hind paremal samal real; ostu rida, teated ja peenkiri
     üle rea nende all. Read tulevad ise (auto), seega eelvaate või
     eeltellimuse teade ei kattu kunagi ostureaga. */
  .page-shop .hero-right { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 16px; align-items: center; padding-top: 0; }
  .page-shop .deck-wrap { grid-column: 1; grid-row: 1; }
  .page-shop .hero-price { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; margin: 0; }
  .page-shop .hero-right .buy-row, .page-shop .hero-right .notice, .page-shop .hero-right .notify, .page-shop .hero-fine { grid-column: 1 / -1; }
  /* Lend lühike (49 px paremale): pikem kataks hinna, mis on samal real;
     vasakule ei saa (pakk on riba servas, ülevool lõikab), kõrgemale ei saa
     (juhtlõigu viimane rida). Ruumilisus tuleb translateZ-st ja pöördest. */
  .page-shop .deck { --deck-w: clamp(172px, 48vw, 226px); --dir: 1; --reach: .3; --lift: .5; --twist: .6; perspective: 700px; }
  .page-shop .hero-price-lbl { font-size: 11px; }
  .page-shop .hero-price-sum { font-size: clamp(40px, 11.5vw, 50px); white-space: nowrap; }
  .page-shop .hero-right .qty, .page-shop .hero-right .qty button, .page-shop .hero-right .qty .qty-step, .page-shop .hero-right .qty input { height: 54px; line-height: 54px; }
  .page-shop .hero-right .btn-dark { flex: 1; justify-content: center; height: 54px; font-size: 21px; padding: 0 18px; }
  /* text-wrap: pretty jätab rea lõppu terve sõna, mitte ühe ("jooksul"). */
  .page-shop .hero-fine { font-size: 12px; text-wrap: pretty; }
  .page-shop .stat { padding: 16px 0 14px; }
  .page-shop .stat:nth-child(2n) { padding-left: 18px; }
  .page-shop .stat-val { font-size: 42px; }
  .page-shop .stat-lbl { font-size: 11px; }
  .page-shop .hero-tail { height: 32px; }
  .page-shop .sec-title { font-size: clamp(38px, 10vw, 52px); }
  .page-shop .legend .prose { font-size: 16px; }
  /* Pealmine kaart on voolus ja annab kastile kõrguse (main.js fit() ei
     sea siin min-height'i), seljad paistavad servast. */
  .page-shop .fan { min-height: auto; }
  .page-shop .fan-card.pos-0 { position: relative; }
  .page-shop .fan-card { padding: 22px 20px 24px; }
  .page-shop .band-legend > .band-in { padding-bottom: 36px; }
  .page-shop .steps { gap: 26px; }
  .page-shop .step-num { font-size: 48px; }
  .page-shop .step-title { font-size: 24px; }
  .page-shop .step-text { font-size: 16px; }
  /* Galerii on keritav rida, iga foto 78 vw, järgmise serv paistab. */
  .page-shop .gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 8px; scrollbar-width: none; }
  .page-shop .gal::-webkit-scrollbar { display: none; }
  .page-shop .gal > * { flex: 0 0 78vw; scroll-snap-align: start; aspect-ratio: 4 / 3; }
  .page-shop .band-faq .faq summary { padding: 18px 18px; font-size: 16px; min-height: 56px; }
  .page-shop .band-faq .faq details p { padding: 0 18px 18px; }
  .page-shop .support-title { font-size: clamp(34px, 9vw, 54px); }
  .page-shop .measure span { height: 34px; }
  .page-shop .finish-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .page-shop .finish-facts .sep, .page-shop .hero-fine .sep { display: none; }
  .page-shop .finish-side .cta-note { font-size: 11px; }
  .page-shop footer .wrap { padding-top: 40px; padding-bottom: 32px; }
}
@media (max-width: 460px) {
  .page-shop .support-head { flex-wrap: wrap; }
  .page-shop .support-head .eyebrow:last-child { flex-basis: 100%; white-space: normal; }
  .page-shop .measure { grid-template-columns: repeat(8, 1fr); }
  .page-shop .hero-fine .fact { display: block; }
  /* Plokk-fakti järel teeks reavahetus tühja rea. */
  .page-shop .hero-fine .fact + br { display: none; }
}
@media (max-width: 380px) {
  .page-shop .stat-val { font-size: 40px; }
  /* 320 peal jäi hinnale 98 px ja "16,00 €" murdus kahele reale: pakk 150,
     vihje kitsama vahega (mitte laiem kui pakk), hind alates 36. */
  .page-shop .deck { --deck-w: clamp(150px, 48vw, 226px); }
  .page-shop .deck-hint { letter-spacing: .1em; }
  .page-shop .hero-price-sum { font-size: clamp(36px, 11.5vw, 50px); }
}

/* ---- tahvel püsti ---- */
@media (min-width: 600px) and (max-width: 899px) {
  .page-shop .hero { padding-top: 28px; gap: 28px; }
  .page-shop .hero h1.hero-title { font-size: clamp(56px, 9.5vw, 78px); }
  .page-shop .hero-lead { font-size: 18px; max-width: 30em; }
  /* Pakk vasakus veerus kolme rea kõrguselt, paremal HIND, hind, ostu rida
     ja peenkiri. Parema veeru read tulevad ise (auto), nii ei kattu
     eelvaate või eeltellimuse teade ostureaga; teatega saab pakk neljanda rea. */
  .page-shop .hero-right { --deck-col: clamp(240px, 36vw, 300px); display: grid; grid-template-columns: var(--deck-col) minmax(0, 1fr); column-gap: 32px; row-gap: 14px; align-items: end; padding-top: 0; text-align: left; }
  .page-shop .deck-wrap { grid-column: 1; grid-row: 1 / span 3; }
  .page-shop .hero-right:has(.notice) .deck-wrap { grid-row: 1 / span 4; }
  /* Lend lühike samal põhjusel mis telefonil: hind on paki kõrval paremal. */
  .page-shop .deck { --deck-w: clamp(240px, 36vw, 300px); --dir: 1; --reach: .32; --lift: .5; --twist: .8; }
  .page-shop .hero-price { grid-column: 2; grid-row: 1; }
  .page-shop .hero-right .buy-row, .page-shop .hero-right .notice, .page-shop .hero-right .notify, .page-shop .hero-fine { grid-column: 2; justify-content: flex-start; }
  .page-shop .hero-price-sum { font-size: clamp(50px, 7vw, 66px); }
  .page-shop .stat { padding: 20px 0 18px; }
  .page-shop .stat:nth-child(2n) { padding-left: 24px; }
  .page-shop .sec-title { font-size: 44px; }
  .page-shop .steps { gap: 28px; }
  .page-shop .step { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
  .page-shop .step-num { grid-row: 1 / span 2; font-size: 54px; }
  .page-shop .step-title { margin-top: 0; }
  .page-shop .step-text { margin-top: 8px; }
  .page-shop .gal { gap: 14px; }
  .page-shop .support-main { grid-template-columns: minmax(0, 1fr) 232px; gap: 36px; }
  .page-shop .measure { gap: 6px; }
  .page-shop .measure span { height: 40px; }
  .page-shop .measure-lbl { flex-direction: row; }
  .page-shop .finish-side .cta-btn { width: auto; min-width: 300px; }
}
/* 132 + 10 + 190 px ostu rida ei mahu 280 px hinnaveergu: kuni 700 on
   ostu rida, teated ja peenkiri üle rea paki all nagu telefonil. */
@media (min-width: 600px) and (max-width: 699px) {
  .page-shop .hero-right .buy-row, .page-shop .hero-right .notice, .page-shop .hero-right .notify, .page-shop .hero-fine { grid-column: 1 / -1; }
  .page-shop .deck-wrap, .page-shop .hero-right:has(.notice) .deck-wrap { grid-row: 1; }
  /* Hind paki kõrval keskel, mitte alumises nurgas: ostu rida on nagunii
     üle rea nende all. */
  .page-shop .hero-right { align-items: center; }
  /* Kolm veergu ka siin (kahega jäi kolmas foto üksi teisele reale);
     173 px foto on pisipilt, kohatäite silt pisut väiksem, et ta mahuks. */
  .page-shop .gal { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .page-shop .ph em { font-size: 9.5px; letter-spacing: .1em; padding: 6px 10px; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .page-shop .legend { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
  .page-shop .fan-card { padding: 24px 26px 28px; }
  .page-shop .fan-card.pos-1 { --tx: 12px; --ty: 6px; --rot: -2.5deg; }
  .page-shop .fan-card.pos-2, .page-shop .fan-card.pos-hidden { --tx: 24px; --ty: 14px; --rot: -5deg; }
  .page-shop .gal { grid-template-columns: repeat(3, 1fr); }
  .page-shop .finish { flex-direction: row; align-items: flex-start; }
  .page-shop .finish-side { align-items: flex-end; text-align: right; width: auto; }
  .page-shop .finish-side .cta-note { text-align: right; }
  /* Fakt ei murdu keskelt ("ÜKS" / "PAKK"), rida vahetub faktide vahelt. */
  .page-shop .finish-facts .fact { white-space: nowrap; }
}

/* ---- tahvel laiuti: laua seis päris veergudel ---- */
@media (min-width: 900px) and (max-width: 1104px) {
  .page-shop .hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding-top: 40px; }
  .page-shop .hero h1.hero-title { font-size: clamp(60px, 8.4vw, 92px); }
  .page-shop .hero-lead { max-width: 27em; }
  .page-shop .hero-right { display: flex; align-items: flex-end; text-align: right; padding-top: 8px; }
  .page-shop .hero-right .buy-row { justify-content: flex-end; width: auto; }
  .page-shop .deck-wrap { margin-right: 10px; }
  .page-shop .deck { --deck-w: 260px; --dir: -1; --reach: .8; --lift: .8; --twist: 1; }
  .page-shop .hero-price-sum { font-size: 60px; }
  .page-shop .hero-fine { font-size: 11.5px; }
  /* 340 px veerus mahub üks fakt reale, punkt jääks rea lõppu ripakile. */
  .page-shop .hero-fine .fact { display: block; }
  .page-shop .hero-fine .fact + br, .page-shop .hero-fine .sep { display: none; }
  .page-shop .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-shop .stat { border-bottom: 0; border-right: 1px solid rgba(247, 241, 229, .14); padding: 20px 0 18px; }
  .page-shop .stat:nth-child(2n) { border-right: 1px solid rgba(247, 241, 229, .14); }
  .page-shop .stat:last-child { border-right: 0; }
  .page-shop .stat + .stat { padding-left: 26px; }
  .page-shop .stat:nth-child(2n+1) { padding-left: 26px; }
  .page-shop .stat:first-child { padding-left: 0; }
  html.js .page-shop .stat:nth-child(2n):not(:last-child)::after { display: block; }
  .page-shop .legend { grid-template-columns: 5fr 7fr; gap: 40px; }
  .page-shop .fan { min-height: 300px; }
  .page-shop .fan-card { padding: 30px 32px 34px; }
  .page-shop .fan-card.pos-0 { --rot: 1.5deg; }
  .page-shop .fan-card.pos-1 { --tx: 18px; --ty: 8px; --rot: -3.5deg; }
  .page-shop .fan-card.pos-2, .page-shop .fan-card.pos-hidden { --tx: 40px; --ty: 22px; --rot: -7deg; }
  .page-shop .steps { grid-template-columns: .95fr 1.25fr .8fr; gap: 36px; }
  .page-shop .support-main { grid-template-columns: minmax(0, 1fr) 268px; gap: 48px; }
  .page-shop .support-slot { max-width: none; }
  .page-shop .measure { gap: 8px; }
  .page-shop .measure span { height: 46px; }
  .page-shop .measure-lbl { flex-direction: row; }
  .page-shop .finish { flex-direction: row; align-items: flex-start; gap: 40px; }
  .page-shop .finish-side { align-items: flex-end; text-align: right; width: auto; }
  .page-shop .finish-side .cta-btn { width: auto; }
  .page-shop .finish-side .cta-note { text-align: right; }
  .page-shop .foot-main { gap: 34px; }
}

/* ---- telefon külili (844x390 ja sarnased): kangelane kahes veerus ----
   Pealkiri ja juhtlõik (kuni kolm rida) vasakul, paremal pakk 170 hinnaga
   kõrval ja OSTA nende all, logo ja vihje peidus: ostu rida jääb 390 px
   kõrgel ekraanil esimesele ekraanile. max-width 1104 hoiab madala
   laua akna laua seisus. */
@media (max-width: 1104px) and (max-height: 500px) and (orientation: landscape) {
  .page-shop .hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding-top: 8px; }
  .page-shop .hero-logo { display: none; }
  .page-shop .hero h1.hero-title { font-size: clamp(36px, 5.2vw, 46px); margin-top: 0; }
  .page-shop .hero-lead { font-size: 14px; line-height: 1.4; margin-top: 10px; max-width: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .page-shop .hero-right { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; padding-top: 0; text-align: left; }
  .page-shop .deck-wrap, .page-shop .hero-right:has(.notice) .deck-wrap { grid-column: 1; grid-row: 1; margin: 0; }
  .page-shop .hero-price { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; margin: 0; }
  .page-shop .hero-right .buy-row, .page-shop .hero-right .notice, .page-shop .hero-right .notify, .page-shop .hero-fine { grid-column: 1 / -1; justify-content: flex-start; width: 100%; }
  .page-shop .deck { --deck-w: 170px; --dir: 1; --reach: .3; --lift: .5; --twist: .6; }
  .page-shop .hero-price-lbl { font-size: 11px; }
  .page-shop .hero-price-sum { font-size: 40px; white-space: nowrap; }
  /* 340 px veerus mahub üks fakt reale, punkt jääks rea lõppu ripakile. */
  .page-shop .hero-fine { font-size: 11px; }
  .page-shop .hero-fine .fact { display: block; }
  .page-shop .hero-fine .fact + br, .page-shop .hero-fine .sep { display: none; }
  .page-shop .deck-hint { display: none; }
}

.page-shop .hero-left { min-width: 0; }
.page-shop .legend-text { min-width: 0; }

.page-shop .fan-card-blank { display: flex; align-items: center; justify-content: center; }
.page-shop .fan-mark { width: calc(150 * var(--s)); height: auto; opacity: .28; }

/* ==========================================================================
   ELU. Magnus 03.09.2026: "lisa kõvasti professionaalset animatsiooni".
   Kõik on CSS ja väike vanilla JS (main.js), teegita. Sisu on lehel ka ilma
   skriptita: peitmine käib ainult html.js klassi all, ja prefers-reduced-motion
   keerab liikumise kinni.
   ========================================================================== */

/* Ilmumine kerimisel. --d on samm viivituse jaoks, seatakse märgistuses. */
html.js .page-shop [data-reveal] {
  opacity: 0;
  transform: translateY(calc(26 * var(--s)));
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .page-shop [data-reveal].in { opacity: 1; transform: none; }
html.js .page-shop [data-reveal="lines"], html.js .page-shop [data-reveal="plain"] { opacity: 1; transform: none; transition: none; }
html.js .page-shop [data-reveal="line"] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
html.js .page-shop [data-reveal="line"].in { transform: none; }

/* Pealkirja read tulevad maski seest üles, üks teise järel. */
html.js .page-shop .hero-title .tl { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .14em .1em 0; margin: -.06em -.14em -.1em 0; }
html.js .page-shop .hero-title .tl > span { display: inline-block; transform: translateY(112%); transition: transform .95s cubic-bezier(.2, .75, .2, 1); transition-delay: calc(140ms + var(--d, 0) * 110ms); }
html.js .page-shop .hero-title.in .tl > span { transform: none; }

/* Ajavõtutabel: numbrid loevad end üles (main.js), ribad joonistuvad. */
/* Vahejooned joonistuvad ülalt alla sinna, kus kavandi border on: lahtri
   paremasse serva, viimasel mitte. Varem joonistus joon iga lahtri vasakule,
   ka esimesele, ja "120" seisis vastu joont, mida kavandis ei ole. */
html.js .page-shop .stat { position: relative; border-right-color: transparent; }
html.js .page-shop .stat::after {
  content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 1px;
  background: rgba(247, 241, 229, .14);
  transform: scaleY(0); transform-origin: top;
  transition: transform .8s ease calc(var(--d, 0) * 90ms + 200ms);
}
html.js .page-shop .stat:last-child::after { display: none; }
html.js .page-shop .stat.in::after { transform: none; }

/* Rajamärkmed: joon joonistub vasakult paremale, number tuleb kaasa. */
html.js .page-shop .step { border-top-color: transparent; position: relative; }
html.js .page-shop .step::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: rgba(247, 241, 229, .3);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 140ms + 120ms);
}
html.js .page-shop .step.in::before { transform: none; }
html.js .page-shop .step .step-num { display: inline-block; transform: translateX(calc(-18 * var(--s))); opacity: 0; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; transition-delay: calc(var(--d, 0) * 140ms + 260ms); }
html.js .page-shop .step.in .step-num { transform: none; opacity: 1; }

/* Mõõduriba täitub vasakult paremale, punane ruut maandub viimasena. */
html.js .page-shop .measure span { opacity: 0; transform: scaleY(.15); transform-origin: bottom; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 55ms); }
html.js .page-shop .measure.in span { opacity: 1; transform: none; }
html.js .page-shop .measure.in span.on { animation: measure-pop .6s cubic-bezier(.3, 1.4, .4, 1) calc(var(--i, 0) * 55ms + 200ms) both; }
@keyframes measure-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: none; } }

/* Kuma hingab: valgusvihk triivib ja pulseerib aeglaselt. */
.page-shop .hero-beam { animation: beam-breathe 11s ease-in-out infinite; }
@keyframes beam-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(-4%, 5%) scale(1.09); opacity: .8; }
}

/* Finiši lipp jookseb täpselt ühe piksli kaupa: 30 astet ühe perioodi (30 px)
   peale, seega iga samm on terve piksel ja ruudud jäävad teravaks. Sujuv
   (linear) ajastus jättis brauseril sammud ebaühtlaseks ja nägi välja nõksuv. */
.flag-rows { animation: flag-run .75s steps(32) infinite; }
.flag-static .flag-rows { animation: none; }
@keyframes flag-run { from { transform: translateX(0); } to { transform: translateX(32px); } }
/* Samm peab olema terve EKRAANIPIKSEL, mitte CSS-piksel: 150 protsendi
   skaleerimisel on 1 CSS px 1,5 ekraanipikslit ja iga teine samm jääb poole
   piksli peale, mis annab ruutude servadesse halli õmbluse. Periood on 32 px,
   seega sammude arv on 32 korda tihedus. */
@media (resolution: 1.25dppx) { .flag-rows { animation-timing-function: steps(40); } }
@media (resolution: 1.5dppx) { .flag-rows { animation-timing-function: steps(48); } }
@media (resolution: 1.75dppx) { .flag-rows { animation-timing-function: steps(56); } }
@media (resolution: 2dppx) { .flag-rows { animation-timing-function: steps(64); } }
@media (resolution: 2.5dppx) { .flag-rows { animation-timing-function: steps(80); } }
@media (resolution: 3dppx) { .flag-rows { animation-timing-function: steps(96); } }

/* Nupud: nool liigub, punane nupp saab läike, kreem nupp läheb valgeks. */
.page-shop .btn { position: relative; overflow: hidden; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .25s ease; }
.page-shop .btn .arrow { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.page-shop .btn-dark:not(.btn-off)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-130%);
  transition: transform .7s ease;
  pointer-events: none;
}

/* Navi lingid saavad oranži joone alt. */
.page-shop .pill { position: relative; }
.page-shop .pill::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-5 * var(--s)); height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }

/* KKK vastus avaneb kõrgusega, mitte hüppega. Kõrguse annab main.js, sest
   details ise seda ei animeeri; kest hoiab ülevoolu kinni. */
.page-shop .faq .faq-body { overflow: hidden; }
html.js .page-shop .faq .faq-body { transition: height .45s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.page-shop .faq summary::after { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

/* ==========================================================================
   Ühine kest puute jaoks (04.09.2026, Magnus: "optimiseerime telefoni jaoks
   ka kogu protsessi"). Puutevastus, pöidlariba, avalehe redel (nav, jalus,
   küpsiseteade), puutealad ja sisendid pointer: coarse järgi, hõljumine
   hover: hover taga. Kõik uus on meediaplokkides; laud 1105 ja üles on
   kinnitatud ja jääb piksli pealt paika.
   ========================================================================== */

/* Puutevastus: hall vilkumine maha, nupp vastab taustaga (mitte scale'iga,
   see läheks laual hover-tõusuga tülli). Laual ei tee need omadused midagi. */
.page-shop .pill, .page-shop .nav-buy, .page-shop .btn, .page-shop .qty button, .page-shop .fan, .page-shop .faq summary,
.page-checkout .carrier, .page-checkout .pak, .page-checkout .terms, .page-checkout .check-row, .page-checkout .paybtn, .page-checkout .qty button,
.page-confirmation .btn, .page-doc .doc-toc a, .cookie-ok, .thumb-bar-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (pointer: coarse) {
  .page-shop .btn-dark:not(.btn-off):active { background: #A00000; }
  .page-shop .btn-green:not(.btn-off):active { background: #FFFFFF; }
  .page-shop .pill:active { color: var(--cream); }
  .page-shop .faq summary:active { background: rgba(247,241,229,.04); }
  .page-checkout .carrier:active, .page-checkout .pak:active { background: #FBF6EC; }
  .page-checkout .paybtn:active, .page-confirmation .btn-retry:active { background: #A00000; }
  .page-confirmation .btn:active { opacity: .92; }
  .page-doc .doc-toc a:active { color: var(--cream); }
}

/* Pöidlariba: hind ja ostunupp ekraani alumises servas, kui kangelase
   ostunupp (avaleht, alla 600) või ajakaart (kassa, alla 900) on ekraanilt
   väljas. main.js lülitab .on klassi IntersectionObserveriga; küpsiseteate
   ajal ja sisendisse kirjutamise ajal (iOS klaviatuur) on riba peidus, kaks
   fikseeritud alumist elementi ei tohi kunagi kuhjuda. Avalehel on nupp
   päris submit kangelase vormile (form="buy-form"), seega kogus loetakse
   samast sisendist; kassas kerib nupp ajakaardi juurde ega saada kunagi ise
   (VÕS 62-2 lg 3: ostja vajutab nuppu, mille peal on summa). */
.thumb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px;
  padding: 8px var(--pad, var(--gutter)) calc(8px + env(safe-area-inset-bottom));
  background: var(--ink-3); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px rgba(0,0,0,.45);
  transform: translateY(110%); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.thumb-bar.on { transform: none; opacity: 1; }
body.cookie-open .thumb-bar.on, body.thumb-bar-typing .thumb-bar.on { transform: translateY(110%); opacity: 0; }
.thumb-bar-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.thumb-bar-lbl { font: 500 11px 'Azeret Mono', ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,241,229,.5); }
.thumb-bar-val { font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 24px; line-height: 1; color: var(--cream); }
.thumb-bar .thumb-bar-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 22px; border: 0; cursor: pointer;
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--red-hot); color: var(--cream); box-shadow: none;
}
.thumb-bar .thumb-bar-btn .arrow { flex: none; width: 16px; height: 11px; }
.thumb-bar .thumb-bar-btn:active { background: #A00000; }
@media (max-width: 599px) {
  .page-home .thumb-bar { display: flex; }
  .page-shop.has-thumb-bar footer .wrap { padding-bottom: calc(32px + 72px); }
}
@media (max-width: 899px) { .page-checkout .thumb-bar { display: flex; } }
@media (max-height: 500px) and (orientation: landscape) { .thumb-bar-lbl { display: none; } .thumb-bar { min-height: 56px; } }

/* ---- avalehe ja logoga lehtede redel: nav, jalus, galerii, küpsiseteade ----
   Need plokid peavad tulema 1104 ploki JÄREL, sest sama spetsiifilisusega
   reeglid võidavad järjekorraga. */

/* Tahvel laiuti: kavandi 12 veeruga jalus tagasi. */
@media (min-width: 900px) and (max-width: 1104px) {
  .page-shop .foot-seller-col { grid-column: span 5; }
  .page-shop .foot-col { grid-column: span 4; }
  .page-shop .foot-col:last-child { grid-column: span 3; }
  .page-shop .foot-bottom { flex-direction: row; }
}

/* Tahvel püsti: nav ühel real (neli pilli 335 px pluss nupp 145 mahuvad
   alates 600), jalus kahes veerus, galerii kahes. */
@media (min-width: 600px) and (max-width: 899px) {
  .page-shop .nav-home { flex-wrap: nowrap; gap: 24px; padding: 12px var(--pad); }
  .page-shop .nav-shop { padding: 12px var(--pad); }
  .page-shop .nav-links { order: 0; width: auto; }
  .page-shop .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
  .page-shop .foot-seller-col { grid-column: 1 / -1; }
  .page-shop .foot-col, .page-shop .foot-col:last-child { grid-column: auto; }
  .page-shop .foot-bottom { flex-direction: row; justify-content: space-between; }
}

/* Logoga nav (tingimused, privaatsus) kahes reas kuni 700: logo 90, pillid
   335, nupp 145 ja vahed ei mahu 600 peal ühte ritta (nupp jäi 60 px laiuseks,
   mõõdetud 04.09.2026). Ülemine rida logo ja kompaktne OSTA, alumine pillid. */
@media (max-width: 699px) {
  .page-shop .nav-shop { flex-wrap: wrap; gap: 4px 16px; padding: 8px var(--pad); }
  .page-shop .nav-shop .nav-links { order: 3; flex-basis: 100%; width: 100%; }
  .page-shop .nav-shop .brand-mark { height: 32px; }
  .page-shop .nav-shop .nav-buy { height: 44px; line-height: 44px; font-size: 14px; padding: 0 12px; }
}

/* Telefon. Avalehe nav on ÜKS 60 px rida keritavaid pille ilma ostunuputa:
   kangelase OSTA on esimesel ekraanil ja pöidlariba võtab üle hetkel, kui
   see ekraanilt lahkub; teine nupp navis oleks müra. Logoga lehed (tingimused,
   privaatsus) saavad kaks rida: logo ja kompaktne OSTA üleval, pillid all. */
@media (max-width: 599px) {
  .page-shop .nav-home { padding: 8px var(--pad); gap: 0; }
  .page-shop .nav-home .nav-buy { display: none; }
  .page-shop .nav-links { flex: 1 1 0; min-width: 0; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-right: 28px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .page-shop .nav-links::-webkit-scrollbar { display: none; }
  .page-shop .pill { white-space: nowrap; scroll-snap-align: start; text-align: center; }
  .page-shop .pill:last-child { margin-right: 28px; }
  /* Hõljumisjoon on pilli kastist väljas ja teeks kerijale 5 px püstist ülevoolu. */
  .page-shop .pill::after { display: none; }
  /* Jaluse alumine rida jääb tavaliseks tekstiks: punktid reavahetusega
     kaasa, nii on "Omniva pakiautomaat" ja "Montonio" eraldi faktid ka
     kolmel real (ilma punktideta lugesid nad ühe fraasina). */
  .cookie-notice { inset: auto 10px 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); font-size: 13px; line-height: 1.4; }
  .page-shop .simple .btn-dark { width: 100%; justify-content: space-between; }
}
/* Küpsiseteade telefonil: teine lause peitu ja kiri 12,5, muidu oli kiri
   nupu kõrval neljal real ja teade 117 px kõrge 360 peal. */
@media (max-width: 479px) {
  .cookie-notice { font-size: 12.5px; line-height: 1.35; }
  .cookie-notice .cookie-more { display: none; }
}
@media (max-width: 380px) {
  .page-shop .pill { letter-spacing: .12em; }
  .page-shop .nav-links { gap: 14px; }
  /* Kitsam nupp annab kirjale kolmanda rea asemel ruumi (360: 94 px teade). */
  .cookie-ok { min-width: 56px; padding: 0 12px; }
}

/* Puutealad ja sisendid sõrme, mitte laiuse järgi: iPad 1024 peal saab sama,
   mis telefon, hiirega sülearvuti 1024 peal jääb 15 px sisendite ja 40 px
   ridade juurde, ja iOS ei zoomi kunagi (16 px sisend). Puutega sülearvuti,
   mis ütleb pointer: coarse 1440 peal, saab needsamad, see on tahtlik. */
@media (pointer: coarse) and (max-width: 899px) {
  .page-shop .deck-hint { display: inline-flex; }
}
/* Külili telefonil vihjet ei ole; peab tulema ülemise ploki JÄREL. */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .page-shop .deck-hint { display: none; }
}
@media (pointer: coarse) {
  .page-shop .pill { padding: 13px 0; line-height: 18px; min-width: 44px; }
  .page-shop .nav-buy { height: 46px; line-height: 46px; }
  .page-shop .brand, .page-checkout .brand, .page-confirmation .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .page-checkout .back, .page-confirmation .back, .page-shop .nav-slim .back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; }
  /* Jaluse lingid: löögiala pseudoelemendiga, sest polster nihutaks
     allajoone; veergude vahe kasvab, et alad kattuks vähem. */
  .page-shop .foot-col { gap: 18px; }
  .page-shop .foot-col a, .page-shop .foot-bottom a { position: relative; }
  .page-shop .foot-col a::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; bottom: -13px; }
  .page-shop .foot-bottom a::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; bottom: -15px; }
  .page-checkout .site-footer a, .page-confirmation .site-footer a { display: inline-block; padding: 13px 0; margin: -13px 0; }
  .page-checkout .pak-change { padding: 16px 0; margin: -16px 0; }
  .page-shop .hero-right .qty button, .page-shop .hero-right .qty .qty-step { width: 48px; }
  .page-shop .hero-right .qty input { width: 36px; }
  .page-checkout .inp, .page-checkout .inp-search { font-size: 16px; min-height: 48px; padding: 12px 14px; }
  .page-checkout .qty button, .page-checkout .qty input { width: 44px; height: 44px; }
  .page-checkout .qty input { font-size: 16px; }
  .page-checkout .check-row { min-height: 44px; }
  .page-checkout .check-row input { width: 20px; height: 20px; }
  .page-checkout .carrier { min-height: 52px; padding: 13px 14px; }
  .page-checkout .carrier input { width: 20px; height: 20px; }
  .page-checkout .pak { min-height: 48px; padding: 11px 14px; }
  .page-checkout .pak input { width: 18px; height: 18px; }
  .page-checkout .terms { min-height: 44px; align-items: center; gap: 12px; margin-bottom: 8px; }
  .page-checkout .terms input { width: 22px; height: 22px; }
  .page-checkout .terms a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .page-doc .doc-toc a { min-height: 44px; }
  .cookie-ok { min-height: 44px; }
  .page-shop .notify input[type="email"] { font-size: 16px; }
}
/* Telefon laiuti, küpsiseteate mõõdud. Need read olid ploki juures real 880,
   aga kaotasid sama spetsiifilisusega hilisematele reeglitele: baasreeglile
   (.cookie-notice) ja (pointer: coarse) plokile (.cookie-ok), seega ei
   rakendunud kumbki kunagi ja teade jäi 390 px kõrgel ekraanil 70 px kõrguseks,
   kokkuvõtteriba peale (15.09.2026, 13.25). Meediapäring ei anna spetsiifilisust
   juurde, ainult järjekord otsustab, seega peavad nad olema siin, MÕLEMA ploki
   järel. */
@media (max-height: 500px) and (orientation: landscape) {
  .cookie-notice { inset: auto 8px 8px; padding: 6px 10px; font-size: 12px; line-height: 1.3; gap: 8px; }
  .cookie-ok { min-height: 36px; min-width: 56px; padding: 0 12px; }
}

/* Hõljumine on hiire asi. Kõik kosmeetilised :hover reeglid (vari, täide,
   tõus) on siin ühes plokis, muutmata, faili järjekorras: hiir 1440 peal
   vastab hover: hover ja näeb täpselt sama, mis enne; sõrm ei jää kunagi
   hõljuvasse olekusse kinni. */
@media (hover: hover) {
.page-shop .btn-dark:hover{background:#D40000;color:var(--cream)}
.page-shop .btn-green:hover{background:#FFFFFF;color:var(--ink)}
.page-shop .pill:hover{border-color:var(--cream);color:var(--cream)}
.page-shop .qty button:hover{background:rgba(247,241,229,.08);color:var(--cream)}
.page-shop .why:hover{border-color:var(--line-2);transform:none}
.page-shop .faq details:hover{border-color:var(--line-2)}
.page-checkout .back:hover, .page-confirmation .back:hover { color: var(--orange); }
.page-checkout .site-footer a:hover, .page-confirmation .site-footer a:hover { color: var(--orange); }
.page-checkout .carrier:hover { box-shadow: 4px 4px 0 #1A0507; }
.page-checkout .pak:hover { background: #FBF6EC; }
.page-checkout .qty button:hover { background: #F7F1E5; }
.page-checkout .paybtn:hover { background: #D40000; color: var(--cream); transform: none; }
.page-confirmation .btn:hover { background: #FFFFFF; color: var(--ink); transform: none; }
.page-confirmation .btn-retry:hover { background: #D40000; color: var(--cream); }
.page-doc .doc-toc a:hover { color: var(--orange); }
.btn-off:hover,
.page-shop .btn-off:hover { background: #2A2724; color: #9A958C; transform: none; }
.page-shop .pill:hover { color: var(--cream); }
.page-shop .nav-buy:hover { background: var(--cream); color: var(--ink); }
.page-shop .foot-col a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.page-shop .foot-bottom a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.page-shop .btn:not(.btn-off):hover .arrow { transform: translateX(calc(5 * var(--s))); }
.page-shop .btn-dark:not(.btn-off):hover { transform: translateY(-2px); box-shadow: 0 calc(20 * var(--s)) calc(44 * var(--s)) rgba(188, 0, 0, .5); }
.page-shop .btn-dark:not(.btn-off):hover::after { transform: translateX(130%); }
.page-shop .btn-green:not(.btn-off):hover { transform: translateY(-2px); }
.page-shop .pill:hover::after { transform: none; }
.page-shop .nav-buy:not(.btn-off):hover { background: var(--cream); color: var(--ink); }
.page-shop .nav-slim .back:hover { color: var(--orange); }
}

/* Ühe lülitiga kinni. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .thumb-bar { transition: none; }
  .page-shop .deck-hint { transition: none; }
  html.js .page-shop [data-reveal], html.js .page-shop [data-reveal="line"] { opacity: 1; transform: none; transition: none; }
  html.js .page-shop .hero-title .tl > span { transform: none; transition: none; }
  html.js .page-shop .stat::after, html.js .page-shop .step::before, html.js .page-shop .step .step-num,
  html.js .page-shop .measure span { transform: none; opacity: 1; transition: none; animation: none; }
  .page-shop .deck, .page-shop .deck-card, .page-shop .deck-card::after, .page-shop .hero-beam, .flag-rows,
  .page-shop .fan-card, .page-shop .faq .faq-body { animation: none; transition: none; }
  .page-shop .btn, .page-shop .btn .arrow, .page-shop .btn-dark::after, .page-shop .pill::after { transition: none; }
}

/* ==========================================================================
   Jalus telefonil ja tahvlil kompaktsemaks (Magnus 05.09.2026: "raiskame
   väga palju ruumi"). Tuleb PÄRAST pointer: coarse plokki, et võita sama
   spetsiifilisusega vahed. Löögialad jäävad 44 px (::before pseudoelement).
   ========================================================================== */
@media (max-width: 599px) {
  .page-shop footer .wrap { padding-top: 26px; padding-bottom: 22px; }
  .page-shop .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .page-shop .foot-seller-col { grid-column: 1 / -1; }
  .page-shop .foot-col, .page-shop .foot-col:last-child { grid-column: auto; }
  .page-shop .foot-brand .brand-mark { height: 22px; margin-bottom: 8px; }
  .page-shop .foot-seller { font-size: 11.5px; line-height: 1.6; }
  .page-shop .foot-col { gap: 14px; font-size: 14px; }
  .page-shop .foot-col a { align-self: flex-start; }
  .page-shop .foot-head { font-size: 10px; margin-bottom: 0; }
  .page-shop .foot-bottom { margin-top: 18px; padding-top: 12px; gap: 6px; font-size: 10.5px; line-height: 1.6; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .page-shop footer .wrap { padding-top: 30px; padding-bottom: 24px; }
  .page-shop .foot-main { grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; }
  .page-shop .foot-seller-col { grid-column: auto; }
  .page-shop .foot-brand .brand-mark { height: 24px; margin-bottom: 10px; }
  .page-shop .foot-seller { font-size: 12px; line-height: 1.7; }
  .page-shop .foot-col { gap: 14px; font-size: 14.5px; }
  .page-shop .foot-col a { align-self: flex-start; }
  .page-shop .foot-bottom { margin-top: 20px; padding-top: 12px; font-size: 11px; }
}

/* ==========================================================================
   Kampaaniahind (etapp 3): läbikriipsutatud varasem hind suure hinna all.
   Ilmub ainult kampaania ajal, ilma kampaaniata HTML-is seda elementi ei ole.
   ========================================================================== */
.page-shop .hero-price-old {
  display: block;
  margin-top: 6px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--soft);
  text-decoration: line-through;
}
/* Kassa pilet: varasem hind ühikuhinna KOHAL paremas servas, sama tume perekond
   (rgba(26,5,7,.55)) mis pakiautomaadi loendi linnal. Ümbris .ticket-price on
   HTML-is ainult kampaania ajal. Kõrvuti (laual 4 px vahega) jooksid kaks hinda
   pildil kokku ja telefonil ei mahtunud 12,00 € 390 px sisse; üksteise all on
   mõlemal sama selge. Pildistatud 11.09.2026 laiustel 390 ja 1440. */
.page-checkout .ticket-old { color: rgba(26,5,7,.55); text-decoration: line-through; font-size: 13px; }
.page-checkout .ticket-price { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }

/* "Näita kõik N automaati" (main.js, 20.6): loodud skriptiga, HTML-is seda ei
   ole. Sama joon ja taust mis .pak-chosen real, et ta loeks nimekirja osana. */
.page-checkout .pak-more {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1.5px solid #1A0507; border-top: 0; background: #FFFFFF; color: #1A0507;
  font: inherit; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer;
}
.page-checkout .pak-more[hidden] { display: none; }

/* Kinnituse jalus ekraani põhja (20.6): keha on veerg, main venib. Sisu ise
   jääb ülevale (grid keskjoondus on .confirmation sees, mitte main'is). */
body.page-confirmation { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.page-confirmation main { flex: 1 1 auto; }

/* Paki lend kitsal telefonil (mõõdetud 15.09.2026 scripts/_deck_measure.js abil
   laiustel 320, 360, 390, 430 ja 500). Hind seisab samal real paki kõrval ja
   lennu tipus 490 ms juures ulatus kaart hinna alla: 320 px peal luges ostja
   "6,00 €" ja mitte "16,00 €". Külgsuunaline ulatus on ainus mõõt, mis hinda
   puudutab, seega kahaneb ainult see; tõus, pööre ja sügavus jäävad samaks,
   ehk lend ei muutu lamedaks. Kehtib ainult seal, kus ruumi ei ole: 500 px
   peal oli vahe juba 41 px ja seal jääb .3 alles. */
@media (max-width: 430px) {
  .page-shop .deck { --reach: .08; }
}

/* ---------- käest kätte värav (13.26) ---------- */
/* Jaluse link näeb välja nagu link ja käitub nagu link ka ilma JS-ita.
   Värvid tulevad reast 274 (.page-checkout .site-footer a). */
.page-checkout .site-footer .gate-link { border-bottom: 1px solid var(--line-2); cursor: pointer; }
.page-checkout .site-footer .gate-link:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* Kast ekraani keskel. z-index 45: skip-link (50) jääb peale, küpsiseteade
   (40) ja pöidlariba (30) alla. Kast on vormist VÄLJAS, sest .grid kannab
   contain: paint ja .col-form clip-path (read 277 ja 287). */
.gate-wrap { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px; }
.gate-backdrop { position: absolute; inset: 0; background: rgba(12, 0, 1, .74); }
.gate-box {
  position: relative; width: min(420px, 100%);
  background: var(--cream); color: #1A0507;
  border: 1.5px solid #1A0507; box-shadow: 8px 8px 0 var(--red-hot);
  padding: 26px 24px 24px;
}
.gate-title {
  margin: 0 0 8px;
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800;
  font-size: 26px; line-height: 1; text-transform: uppercase; color: #1A0507;
}
.gate-lead { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: rgba(26, 5, 7, .72); }
.gate-err { margin: 6px 0 0; min-height: 18px; font-size: 12.5px; line-height: 1.4; color: #7A0000; }
.gate-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.gate-btn {
  border: 0; cursor: pointer; min-height: 46px; padding: 0 26px;
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-style: italic; font-weight: 800;
  font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--red-hot); color: var(--cream);
}
.gate-cancel {
  font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(26, 5, 7, .6); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.gate-cancel:hover { color: #1A0507; }

/* Kaks fikseeritud alumist elementi ei tohi kunagi kuhjuda: sama muster mis
   küpsiseteatel (body.cookie-open, rida 2780). */
body.gate-open .thumb-bar.on { transform: translateY(110%); opacity: 0; }

/* Tee tagasi tavalise tarne juurde, kui värav on lahti. Tekst, mitte nupp. */
.page-checkout .gate-undo { margin-top: 12px; }
.page-checkout .gate-undo-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 13px; color: rgba(26, 5, 7, .6); text-decoration: underline;
  text-underline-offset: 3px; font-family: 'Figtree', system-ui, sans-serif;
}
.page-checkout .gate-undo-btn:hover { color: #1A0507; }

@media (max-width: 600px) {
  .gate-box { padding: 22px 18px 20px; box-shadow: 5px 5px 0 var(--red-hot); }
  .gate-title { font-size: 23px; }
  /* iOS suumib alla 16px sisendile. Sama reegel mis real 2893. */
  .gate-box .inp { font-size: 16px; min-height: 48px; }
}