/* ===== SOFRA digital cookbook store (ported from brand HTML) ===== */

/* ============================================================
   SOFRA — single-product digital store
   Brand tokens (from the Sofra brand book)
   ============================================================ */
:root{
  --ivory:#F4EFE6;      /* primary surface */
  --paper:#FBF8F2;      /* reading surface */
  --charcoal:#25231F;   /* body text, dark sections */
  --teal:#245E60;       /* structure, headings, buttons */
  --copper:#B67850;     /* time, accents, foil */
  --copper-lt:#D9A87C;  /* copper on dark */
  --burgundy:#733441;   /* warnings, badges */
  --line:#e8e0d2;
  --muted:#7a7469;
  --body:#3a352e;
  --maxw:1240px;

  /* Type stacks.

     Arabic uses the reading device's own interface face rather than a web
     font: whatever the phone or laptop already renders every other Arabic app
     in. It is the face its owner reads best, it is hinted for that screen, and
     it costs no download — which matters more on a slow connection than any
     decorative choice. A calligraphic naskh looked handsome on a designer's
     monitor and thin and uneven on much of everything else.

     Latin languages swap in their own pair below, so English and Turkish never
     fall back to an Arabic-first face. */
  --ui-font:system-ui,-apple-system,'Segoe UI','Noto Sans Arabic','Noto Kufi Arabic',
            'Dubai',Tahoma,Arial,sans-serif;
  --display-font:system-ui,-apple-system,'Segoe UI','Noto Sans Arabic','Noto Kufi Arabic',
                 'Dubai',Tahoma,Arial,sans-serif;
}

/* In Arabic the display face and the interface face are the same family, so
   what separates a heading from body text is weight, not a serif. Everything
   that would have been set in the old naskh is listed here; at 27px and up,
   a regular weight reads washed out. */
html[lang="ar"] .display,
html[lang="ar"] .amiri,
html[lang="ar"] .sect-title,
html[lang="ar"] .sub,
html[lang="ar"] .price,
html[lang="ar"] .stat .n,
html[lang="ar"] .admin-h1,
html[lang="ar"] .price-preview,
html[lang="ar"] .toc-num,
html[lang="ar"] .reader h1,
html[lang="ar"] .reader h2,
html[lang="ar"] .reader h3,
html[lang="ar"] .reader h4{font-weight:600;letter-spacing:0}

/* Arabic sets denser than Latin at the same size; give it a little more room. */
html[lang="ar"] .lede,
html[lang="ar"] .getbox-text,
html[lang="ar"] .reader{line-height:2}

/* Latin editions (English, Türkçe) */
html[lang="en"],html[lang="tr"]{
  --ui-font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --display-font:'Cormorant Garamond',Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--charcoal);
     font-family:var(--ui-font);line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--copper)}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.ltr{direction:ltr;unicode-bidi:isolate}
.serif{font-family:'Cormorant Garamond',serif}
.amiri,.display{font-family:var(--display-font)}
/* Cormorant sets small for its size; a touch of tracking evens it out. */
html[lang="en"] .display,html[lang="tr"] .display{letter-spacing:.005em}
.slot{position:relative;overflow:hidden;background:var(--ivory)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--copper);font-weight:600}
.sect-title{font-family:var(--display-font);font-size:38px;line-height:1.35;margin:12px 0 0}

/* announcement + header */
.announce{background:var(--teal);color:var(--ivory);text-align:center;padding:9px;font-size:13px}
header{position:sticky;top:0;z-index:40;background:rgba(251,248,242,.96);
       backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;
     padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.brand-rule{width:1px;height:22px;background:#ded6c8}
.brand-domain{font-size:12px;letter-spacing:.14em;color:#8b8478}
.wordmark{font-family:'Cormorant Garamond',serif;font-size:30px;letter-spacing:.09em;color:var(--teal);line-height:1}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--body)}
.hdr-actions{display:flex;align-items:center;gap:14px}
.hdr-price{font-size:14px;color:#5c574f}
.btn{border:0;border-radius:2px;cursor:pointer;font-weight:600}
.btn-primary{background:var(--teal);color:var(--ivory);padding:10px 20px;font-size:14px;
             display:flex;align-items:center;gap:8px}
.btn-primary:hover{background:#1c4c4e}
.badge{background:var(--copper);color:#fff;border-radius:99px;min-width:20px;height:20px;
       display:inline-flex;align-items:center;justify-content:center;font-size:12px}

/* language switcher */
.langsel{position:relative}
.langsel-btn{display:flex;align-items:center;gap:7px;background:transparent;
             border:1px solid #ded6c8;border-radius:2px;padding:8px 12px;font-size:13.5px;
             color:var(--body);cursor:pointer;line-height:1}
.langsel-btn:hover{border-color:var(--teal);color:var(--teal)}
.langsel-caret{font-size:10px;color:var(--muted)}
.langsel-short{display:none}
.langsel-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;
              min-width:160px;margin:0;padding:4px;list-style:none;background:#fff;
              border:1px solid #ded6c8;box-shadow:0 12px 30px rgba(37,35,31,.14)}
.langsel-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
              width:100%;padding:9px 12px;background:transparent;border:0;cursor:pointer;
              font-size:14px;color:var(--body);text-align:start}
.langsel-item:hover{background:var(--ivory)}
.langsel-item.on{color:var(--teal);font-weight:600}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;
      padding-top:48px;padding-bottom:64px}
.hero-frame{background:var(--ivory);padding:28px;position:relative}
.tag{position:absolute;top:28px;inset-inline-start:28px;background:var(--burgundy);color:var(--ivory);
     font-size:12px;letter-spacing:.1em;padding:7px 14px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.h1{font-family:'Cormorant Garamond',serif;font-size:76px;letter-spacing:.08em;
    color:var(--teal);margin:14px 0 0;line-height:.95;text-align:start}
.sub{font-family:var(--display-font);font-size:27px;line-height:1.5;margin-top:10px}
.lede{font-size:15.5px;line-height:1.9;color:var(--body);margin:20px 0 0;max-width:52ch}
.pricerow{display:flex;align-items:baseline;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.price{font-family:var(--display-font);font-size:40px;color:var(--teal);line-height:1}
.was{font-size:16px;color:#9a9288;text-decoration:line-through}
.save{background:var(--ivory);color:var(--burgundy);font-size:13px;padding:5px 11px}
.pricenote{font-size:13px;color:var(--muted);margin-top:7px}
.field-label{font-size:13px;font-weight:600;margin-bottom:10px}
.langrow{display:flex;gap:10px}
.chip{flex:1;padding:12px 10px;border:1px solid #ded6c8;background:#fff;cursor:pointer;
      text-align:center;border-radius:2px}
.chip:has(input:checked){border-color:var(--teal);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--teal)}
.chip-name{font-weight:600;font-size:14px}
.chip-note{font-size:12px;color:var(--muted);margin-top:3px}
.getbox{margin-top:22px;background:var(--ivory);padding:18px}
.getbox-text{font-size:13.5px;line-height:2;color:var(--body)}
.qtyrow{display:flex;gap:12px;margin-top:26px;align-items:stretch;flex-wrap:wrap}
.stepper{display:flex;align-items:center;border:1px solid #ded6c8;background:#fff}
.stepper button{width:44px;height:52px;border:0;background:transparent;font-size:20px;color:#5c574f;cursor:pointer}
.stepper span{width:44px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
.btn-add{flex:1;height:54px;background:var(--teal);color:var(--ivory);font-size:16px;
         display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px}
.btn-add-price{font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}
.btn-add-price::before{content:"·";margin-inline-end:10px;opacity:.55}
.btn-add:hover{background:#1c4c4e}
.btn-ghost{width:100%;height:50px;margin-top:10px;border:1px solid var(--charcoal);
           background:transparent;color:var(--charcoal);font-size:15px;font-weight:600;cursor:pointer;border-radius:2px}
.btn-ghost:hover{background:var(--charcoal);color:var(--ivory)}
.assure{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:26px;
        padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--body)}
.assure strong{display:block;color:var(--teal)}

/* dark chapter band */
.dark{background:var(--charcoal);color:var(--ivory);padding:64px 0}
.dark .eyebrow{color:var(--copper-lt)}
.inside-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.statrow{display:flex;gap:44px;flex-wrap:wrap}
.stat n,.stat .n{font-family:var(--display-font);font-size:44px;color:var(--copper-lt);line-height:1;display:block}
.stat small{font-size:13px;color:#cdc3b2}
.chips{display:grid;grid-template-columns:repeat(7,1fr);gap:20px;margin-top:40px}
.chapcard{border-top:1px solid #4a453d;padding-top:16px}
.chapcard .num{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--copper-lt);direction:ltr;text-align:start}
.chapcard-title{font-size:16px;font-weight:600;margin-top:6px}
.chapcard-count{font-size:13px;color:#a09889;margin-top:5px}

/* promises + spreads + specs + faq */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.promise{background:var(--ivory);padding:26px}
.promise-title{font-size:22px;line-height:1.4;color:var(--teal)}
.promise-text{font-size:14px;line-height:1.75;color:var(--body);margin-top:10px}
.diamond{width:26px;height:26px;border:1px solid var(--copper);transform:rotate(45deg);margin-bottom:22px}
.spreads{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin-top:32px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
table.specs{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:24px}
table.specs td{padding:12px 0;border-bottom:1px solid var(--line);text-align:start}
table.specs td:first-child{color:var(--muted);width:42%}
.tealcard{background:var(--teal);color:var(--ivory);padding:34px}
.tealcard-text{font-size:14.5px;line-height:1.9;color:#dfe9e6;margin:16px 0 0}
.tealcard-stats{display:flex;gap:32px;margin-top:26px;padding-top:22px;border-top:1px solid #3d7274}
.transparency{border:1px solid var(--copper);padding:26px;margin-top:22px;
              font-size:14px;line-height:1.85;color:var(--body)}
.faq q{display:block}
.faq-item{border-top:1px solid #ded6c8}
.faq-q{width:100%;background:transparent;border:0;padding:20px 0;display:flex;
       align-items:center;justify-content:space-between;gap:20px;cursor:pointer;text-align:start}
.faq-q span:first-child{font-size:17px;font-weight:600;color:var(--charcoal)}
.faq-a{font-size:15px;line-height:1.95;color:var(--body);padding:0 0 22px;max-width:70ch;display:none}
.faq-item.open .faq-a{display:block}

/* closing band */
.closing{background:var(--charcoal);color:var(--ivory);padding:64px 20px;text-align:center}
.closing-mark{font-family:'Cormorant Garamond',serif;font-size:56px;letter-spacing:.09em}
.closing-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px 0}
.closing-rule-line{width:70px;height:1px;background:var(--copper)}
.closing-rule-diamond{width:16px;height:16px;border:1px solid var(--copper);transform:rotate(45deg)}
.closing-line{font-size:30px;line-height:1.5;max-width:26ch;margin:0 auto}
.closing-cta{margin-top:30px;background:var(--copper);color:#fff;padding:16px 44px;font-size:16px}

footer{background:var(--ivory);border-top:1px solid var(--line);padding:40px 0}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;font-size:13.5px;color:#5c574f;line-height:1.9}
.foot strong{display:block;color:var(--charcoal);margin-bottom:6px}
.foot-mark{font-size:24px;text-align:start}
.foot-legal{margin-top:26px;padding-top:18px;border-top:1px solid #ded6c8;font-size:12.5px;color:#8b8478}

/* ============================================================
   Shop pages — cart, checkout, payment result, library, admin
   ============================================================ */
.page{padding:48px 0 72px;min-height:60vh}
.panel-narrow{max-width:680px}
.page-title{font-size:36px;line-height:1.3;margin:0}
.page-lede{font-size:15px;line-height:1.85;color:var(--body);margin:10px 0 0;max-width:56ch}
.muted-note{font-size:13.5px;line-height:1.8;color:var(--muted)}
.back-link{background:transparent;border:0;color:var(--muted);font-size:13.5px;
           cursor:pointer;padding:0 0 14px;display:block}
.back-link:hover{color:var(--teal)}

.btn-solid{background:var(--teal);color:var(--ivory);padding:14px 28px;font-size:15px;
           display:inline-flex;align-items:center;justify-content:center;text-align:center}
.btn-solid:hover{background:#1c4c4e;color:var(--ivory)}
.btn-outline{background:transparent;color:var(--charcoal);border:1px solid var(--charcoal);
             padding:13px 27px;font-size:15px;display:inline-flex;align-items:center;
             justify-content:center;border-radius:2px}
.btn-outline:hover{background:var(--charcoal);color:var(--ivory)}
.ghost-btn{background:transparent;border:1px solid #ded6c8;border-radius:2px;
           padding:9px 16px;font-size:13.5px;color:var(--body);cursor:pointer}
.ghost-btn:hover{border-color:var(--teal);color:var(--teal)}

.empty-state{margin-top:40px;padding:48px 24px;background:var(--ivory);text-align:center}
.empty-state p{font-size:16px;color:#5c574f;margin:0 0 24px}

/* cart */
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.cart-row{display:flex;gap:20px;margin-top:28px;padding:22px 0;border-top:1px solid var(--line);
          border-bottom:1px solid var(--line)}
.cart-thumb{width:92px;height:115px;flex:none}
.cart-row-main{flex:1;min-width:0}
.cart-row-title{font-family:'Cormorant Garamond',serif;font-size:24px;letter-spacing:.08em;
                color:var(--teal);text-align:start}
.cart-row-sub{font-size:13.5px;color:var(--muted);margin-top:4px}
.cart-edition{margin-top:14px}
.cart-edition-label{font-size:12px;color:var(--muted);display:block;margin-bottom:7px}
.cart-edition-chips{display:flex;gap:7px;flex-wrap:wrap}
.mini-chip{border:1px solid #ded6c8;background:#fff;border-radius:2px;padding:6px 12px;
           font-size:13px;color:var(--body);cursor:pointer}
.mini-chip:has(input:checked){border-color:var(--teal);color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.cart-row-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.cart-row-price{font-size:22px;color:var(--teal);white-space:nowrap}
.stepper button:disabled{opacity:.35;cursor:not-allowed}

/* summary card */
.summary-card{background:var(--ivory);padding:26px;position:sticky;top:96px}
.summary-title{font-size:13px;font-weight:600;margin-bottom:16px}
.summary-line{display:flex;justify-content:space-between;gap:16px;font-size:14px;
              color:var(--body);padding:7px 0}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
               margin-top:14px;padding-top:16px;border-top:1px solid #ded6c8;
               font-size:15px;font-weight:600}
.summary-total .display{font-size:26px;color:var(--teal);font-weight:400}
.summary-cta{width:100%;margin-top:20px}
.summary-link{display:block;text-align:center;margin-top:12px;font-size:13.5px;color:#5c574f}

/* checkout */
.checkout-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.checkout-form{max-width:520px}
.form-block{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.form-block-title{font-size:15px;font-weight:600;color:var(--charcoal)}
.form-block-note{font-size:13.5px;line-height:1.8;color:var(--muted);margin:6px 0 18px}
.field{display:block;margin-bottom:18px}
.field .field-label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.input{width:100%;height:50px;padding:0 14px;border:1px solid #ded6c8;border-radius:2px;
       background:#fff;font-family:inherit;font-size:15px;color:var(--charcoal)}
.input:focus{outline:none;border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.input.invalid{border-color:var(--burgundy)}
.field-error{display:block;font-size:12.5px;color:var(--burgundy);margin-top:6px}
.form-alert{background:#f7ecec;border:1px solid #e0c3c8;color:var(--burgundy);
            padding:14px 16px;font-size:13.5px;line-height:1.7;margin-top:20px}
.form-notice{background:var(--ivory);padding:22px;margin-top:26px;font-size:14.5px;line-height:1.9}
.fallback-link{display:block;margin-top:12px;font-size:12.5px;word-break:break-all;color:var(--teal)}

.pay-option{display:flex;align-items:center;gap:12px;border:1px solid var(--teal);
            box-shadow:inset 0 0 0 1px var(--teal);background:#fff;padding:16px 18px;border-radius:2px}
.pay-radio{width:16px;height:16px;border-radius:50%;border:5px solid var(--teal);flex:none}
.pay-option-label{font-size:14.5px;font-weight:600}
.visa-mark{flex:none}
.pay-secure{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.checkout-submit{width:100%;margin-top:28px;height:54px;font-size:16px}
.checkout-submit:disabled{opacity:.6;cursor:not-allowed}

/* payment result */
.result-card{background:var(--ivory);padding:48px 32px;text-align:center;margin-top:24px}
.result-icon{width:56px;height:56px;border-radius:50%;margin:0 auto 22px;display:flex;
             align-items:center;justify-content:center;font-size:26px;
             background:#fff;border:1px solid #ded6c8;color:var(--muted)}
.result-paid .result-icon{border-color:var(--teal);color:var(--teal)}
.result-review .result-icon{border-color:var(--copper);color:var(--copper)}
.result-failed .result-icon,.result-unknown .result-icon{border-color:var(--burgundy);color:var(--burgundy)}
.result-title{font-size:28px;line-height:1.4;margin:0}
.result-body{font-size:14.5px;line-height:1.9;color:var(--body);margin:14px auto 0;max-width:44ch}
.result-ref{display:inline-flex;gap:10px;align-items:baseline;margin-top:22px;
            background:#fff;border:1px solid #ded6c8;padding:10px 16px;font-size:13.5px}
.result-actions{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:8px}

/* member library */
.account-grid{display:block}
.account-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
              flex-wrap:wrap;margin-bottom:32px}
.library-card{background:var(--ivory);padding:28px;margin-top:8px}
.library-card.locked{text-align:start}
.download-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* tables */
.table-scroll{overflow-x:auto;margin-top:14px}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.data-table th{text-align:start;font-weight:600;color:var(--muted);font-size:12px;
               padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.data-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.data-table tr:hover td{background:var(--ivory)}

.pill{display:inline-block;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:600}
.pill-paid{background:#e2efe9;color:#1c5c46}
.pill-pending{background:#f3ecdd;color:#7a5a1e}
.pill-failed{background:#f6e6e8;color:var(--burgundy)}
.pill-review{background:#f7ead9;color:#8a5320}

/* admin */
.admin-wrap{padding-bottom:24px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.stat-card{background:var(--ivory);padding:22px}
.stat-card.accent{background:var(--teal);color:var(--ivory)}
.stat-card.warn{background:#f7ead9}
.stat-card-value{font-size:30px;line-height:1.1;color:var(--teal)}
.stat-card.accent .stat-card-value{color:var(--copper-lt)}
.stat-card-label{font-size:12.5px;color:var(--muted);margin-top:7px}
.stat-card.accent .stat-card-label{color:#a9c4bf}

.health-card{margin-top:32px;background:#fff;border:1px solid var(--line);padding:24px}
.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:16px}
.health-row{display:flex;align-items:center;gap:10px;font-size:13.5px}
.health-dot{width:9px;height:9px;border-radius:50%;background:var(--burgundy);flex:none}
.health-dot.ok{background:#2f8a63}
.health-label{color:var(--muted)}
.health-value{margin-inline-start:auto;font-weight:500;text-align:end}

.review-card{margin-top:32px;background:#f7ead9;padding:24px}
.review-row{display:flex;justify-content:space-between;align-items:center;gap:20px;
            flex-wrap:wrap;padding:14px 0;border-top:1px solid #e3d2b8}
.review-actions{display:flex;gap:10px}
.review-actions .btn{padding:9px 18px;font-size:13.5px}

@media (max-width:900px){
  .cart-grid,.checkout-grid{grid-template-columns:1fr;gap:32px}
  .summary-card{position:static}
}
@media (max-width:540px){
  .page-title{font-size:28px}
  .cart-row{flex-wrap:wrap}
  .cart-row-price{width:100%;text-align:end}
}

@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .chips{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .wrap{padding:0 20px}
  .hero,.g2,.spreads{grid-template-columns:1fr;gap:32px}
  .chips{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .h1{font-size:56px}.sub{font-size:22px}.sect-title{font-size:30px}
}
@media (max-width:540px){
  .wrap{padding:0 16px}
  .g4,.thumbs{grid-template-columns:repeat(2,1fr)}
  .h1{font-size:44px}.sub{font-size:19px}.sect-title{font-size:25px}
  .langrow{flex-direction:column}
  .hdr-actions{gap:9px}
  .hdr-price{display:none}
  .langsel-full{display:none}
  .langsel-short{display:inline}
  .langsel-btn{padding:8px 9px}
}

/* ============================================================
   PHP build — form controls and pieces the React drawer used to own
   ============================================================ */

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

a.wordmark{text-decoration:none}
a.btn{text-decoration:none}

/* language switcher — three buttons in a form, no JavaScript */
.langsel{display:flex;align-items:center;gap:2px;border:1px solid #ded6c8;
         border-radius:2px;padding:3px 6px;background:transparent}
.langsel-icon{display:flex;color:var(--muted);margin-inline-end:4px}
.langsel-opt{background:transparent;border:0;border-radius:2px;cursor:pointer;
             padding:5px 8px;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1}
.langsel-opt:hover{color:var(--teal)}
.langsel-opt.on{background:var(--ivory);color:var(--teal)}

/* ---- edition and package choosers ---------------------------------
   These are real radios with the native control hidden. The highlight has
   to be driven by :has(input:checked), not by the server-rendered .on
   class: with the class alone the chip only moved after a page reload, so
   clicking a language appeared to do nothing at all. The .on class stays
   as the pre-:has() fallback and for the first paint. */
.chip{position:relative;display:block}

/* Hidden to the eye but not to the browser: a zero-size, zero-opacity input
   drops out of the accessibility tree in several readers, which would leave
   a keyboard user with no way to pick an edition at all. */
.chip input[type=radio]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
                             overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.chip:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.chip .chip-name,.chip .chip-note{display:block}
.chip:hover:not(:has(input:checked)){border-color:var(--copper)}

/* A visible mark, so the row reads as a set of choices. */
.chip-name::before{content:"";display:inline-block;width:13px;height:13px;border-radius:50%;
                   border:1.5px solid #c9bfae;margin-inline-end:8px;vertical-align:-2px;
                   background:#fff;transition:border-color .12s,box-shadow .12s}

.chip:has(input:checked) .chip-name::before{border-color:var(--teal);
                                            box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 13px var(--teal)}


/* The cart's edition switcher has the same job, and needs the same instant
   feedback — and the same reachable-by-keyboard input. */
.mini-chip{position:relative;display:inline-block}
.mini-chip input[type=radio]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
                             overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mini-chip:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.mini-chip:hover:not(:has(input:checked)){border-color:var(--copper)}

/* quantity select replaces the JS stepper */
.qty-select{display:inline-flex;align-items:center}
.qty-select select{height:52px;min-width:82px;padding:0 12px;border:1px solid #ded6c8;
                   background:#fff;font-family:inherit;font-size:16px;color:var(--charcoal);
                   border-radius:2px;cursor:pointer}
.qty-select select:focus{outline:none;border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.cart-row-actions .qty-select select{height:42px;font-size:15px}

/* FAQ as <details>, so it opens with JavaScript disabled */
.faq-item{border-top:1px solid #ded6c8}
.faq-q{width:100%;background:transparent;border:0;padding:20px 0;display:flex;
       align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
       text-align:start;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q span:first-child{font-size:17px;font-weight:600;color:var(--charcoal)}
.faq-sign{font-size:22px;color:var(--copper);line-height:1}
.faq-sign::before{content:"+"}
.faq-item[open] .faq-sign::before{content:"−"}
.faq-a{font-size:15px;line-height:1.95;color:var(--body);padding:0 0 22px;max-width:70ch}

/* cart row is a form */
form.cart-row{align-items:flex-start}
.cart-row-actions .ghost-btn{padding:11px 16px}

/* the empty-cart diamond outlived the drawer */
.drawer-empty-diamond{width:34px;height:34px;border:1px solid #ded6c8;
                      transform:rotate(45deg);margin:0 auto 24px}
.drawer-remove{background:transparent;border:0;color:var(--burgundy);
               font-size:13px;cursor:pointer}

@media (max-width:540px){
  .langsel-opt{padding:5px 6px;font-size:12px}
  .qty-select select{min-width:70px}
}

/* ============================================================
   Dashboard
   ============================================================ */
.admin-page{padding-top:32px}
.admin-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.admin-top-actions{display:flex;gap:8px;align-items:center}


.panel{background:#fff;border:1px solid var(--line);padding:24px;margin-bottom:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;
            flex-wrap:wrap;margin-bottom:16px}
.admin-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}

/* chart */
.chart{width:100%;height:170px;display:block;margin-top:8px}
.range-chips{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.range-chips strong{color:var(--teal);font-weight:600;margin-inline-start:4px}

.edition-bars{margin-top:12px}
.edition-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13.5px}
.edition-name{width:70px;flex:none;color:var(--body)}
.edition-track{flex:1;height:8px;background:var(--ivory);border-radius:99px;overflow:hidden}
.edition-fill{display:block;height:100%;background:var(--teal);border-radius:99px}
.edition-count{width:34px;text-align:end;flex:none;color:var(--muted)}

/* filters + search */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filter-chip{padding:6px 14px;border:1px solid #ded6c8;border-radius:99px;font-size:13px;
             color:var(--body);text-decoration:none}
.filter-chip:hover{border-color:var(--teal);color:var(--teal)}
.filter-chip.on{background:var(--teal);border-color:var(--teal);color:var(--ivory)}
.admin-search{display:flex;gap:8px;align-items:center}
.admin-search .input{height:40px;min-width:min(280px,60vw);font-size:14px}
.mono-link{color:var(--teal);text-decoration:none;font-weight:600}
.mono-link:hover{text-decoration:underline}

/* forms */
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px}
.check{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--teal)}
select.input{cursor:pointer}
.copy-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.copy-row code{display:block;background:var(--ivory);padding:10px 12px;margin-top:6px;
               font-size:12.5px;word-break:break-all}
.copy-row code a{color:var(--teal)}

/* invoice */
.invoice-sheet{max-width:820px}
.invoice-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
              flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.invoice-meta{text-align:end}
.invoice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
              gap:24px;margin-top:22px}
.invoice-total{display:flex;justify-content:space-between;align-items:baseline;
               margin-top:18px;padding-top:16px;border-top:2px solid var(--charcoal);
               font-size:15px;font-weight:600}
.invoice-total .display{font-size:26px;color:var(--teal);font-weight:400}
.invoice-refs{margin-top:20px;font-size:13px;line-height:2}

@media print{
  .announce,header,footer,.admin-nav,.admin-top-actions,.no-print{display:none!important}
  .panel{border:0;padding:0}
  body{background:#fff}
  .admin-page{padding:0}
}

@media (max-width:900px){
  .admin-cols{grid-template-columns:1fr}
    .panel-head{align-items:flex-start;flex-direction:column}
  .admin-search{width:100%}
  .admin-search .input{flex:1;min-width:0}
}

.smtp-log{background:var(--charcoal);color:#cdc3b2;padding:14px;font-size:11.5px;
          line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-word;
          max-height:240px;margin-top:12px}

/* uploads */
.upload-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}
.upload-card{border:1px solid var(--line);padding:18px;background:var(--paper)}
.upload-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.upload-meta{font-size:13px;margin-bottom:12px;word-break:break-word}
.upload-form{margin-top:10px}
.file-input{padding:9px 10px;height:auto;font-size:13px;background:#fff;cursor:pointer}
.file-input::file-selector-button{border:1px solid #ded6c8;background:var(--ivory);
  padding:6px 12px;margin-inline-end:10px;border-radius:2px;cursor:pointer;font-family:inherit;font-size:13px}
.upload-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.upload-actions .btn{padding:10px 20px;font-size:14px}

/* ============================================================
   Phone — the storefront and dashboard on a small screen
   ============================================================ */

/* Never let a long unbroken string (a reference, an email, a URL) push the
   page wider than the viewport. */
body{overflow-x:hidden}
.ltr,.mono-link,.muted-note{overflow-wrap:anywhere}

@media (max-width:860px){
  .hdr{gap:12px}
  .brand-rule,.brand-domain{display:none}
  .wordmark{font-size:26px}
}

@media (max-width:640px){
  .announce{font-size:11.5px;padding:8px 12px;line-height:1.5}

  /* Header becomes two rows: brand, then the actions. */
  .hdr{padding-top:12px;padding-bottom:12px}
  .hdr-actions{width:100%;justify-content:space-between}

  .hero{padding-top:28px;gap:26px}
  .h1{font-size:40px}
  .sub{font-size:19px}
  .lede{font-size:15px;line-height:1.85}
  .pricerow{flex-wrap:wrap;gap:10px}
  .price{font-size:34px}

  /* Editions stack, so each is a comfortable tap target. */
  .langrow{flex-direction:column;gap:8px}
  .chip{padding:14px 12px;text-align:start}

  .qtyrow{flex-direction:row;align-items:stretch;gap:10px}
  .qty-select{flex:0 0 84px}
  .qty-select select{width:100%;height:54px;min-width:0;font-size:16px}
  .btn-add{flex:1;width:auto;height:54px;font-size:16px;padding:0 14px}
  .btn-add-price::before{margin-inline-end:8px}
  .btn-ghost{height:52px;font-size:15px;margin-top:12px}

  .assure{grid-template-columns:1fr;gap:12px}
  .g4,.thumbs{grid-template-columns:repeat(2,1fr)}
  .chips{grid-template-columns:1fr 1fr}
  .statrow{gap:24px}
  .stat n,.stat .n{font-size:34px}
  .sect-title{font-size:24px!important}
  .inside-head{gap:22px}
  .tealcard,.promise,.transparency{padding:20px}
  .closing-mark{font-size:40px}
  .closing-line{font-size:24px}
  .closing-cta{width:100%;padding:16px 20px}

  section[style*="padding:64px 32px"]{padding:40px 16px!important}
  .g2{gap:32px}

  /* Buying flow */
  .cart-grid,.checkout-grid{gap:24px}
  .cart-row{flex-wrap:wrap;gap:14px}
  .cart-thumb{width:70px;height:88px}
  .cart-row-price{width:100%;text-align:end;font-size:20px}
  .cart-row-actions{width:100%;flex-wrap:wrap}
  .summary-card{padding:20px}
  .checkout-submit{height:52px}
  .pay-option{padding:14px}
  .result-card{padding:32px 20px}
  .result-title{font-size:23px}

  /* Dashboard */
  .admin-page{padding-top:20px}
  .admin-top{gap:14px}
  .admin-top-actions{width:100%}
  .admin-top-actions .ghost-btn{flex:1;text-align:center}
    .admin-nav::-webkit-scrollbar{display:none}
    .panel{padding:16px}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:16px}
  .stat-card-value{font-size:24px}
  .stat-card-label{font-size:11.5px}
  .chart{height:140px}
  .range-chips{gap:10px;font-size:11.5px}
  .field-grid{grid-template-columns:1fr}
  .upload-grid{grid-template-columns:1fr}
  .review-row{flex-direction:column;align-items:stretch}
  .review-actions{width:100%}
  .review-actions .btn{flex:1}
  .invoice-head,.invoice-grid{gap:16px}
  .data-table{font-size:12.5px;min-width:520px}
  .data-table th,.data-table td{padding:10px 8px}
  .foot{gap:24px}
}

@media (max-width:400px){
  .h1{font-size:34px}
  .chips,.g4,.thumbs{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
}

/* Touch targets: anything tappable gets a comfortable minimum. */
@media (hover:none){
  .btn,.btn-solid,.btn-outline,.ghost-btn,.filter-chip,.langsel-opt,  .btn,.btn-solid,.btn-outline{display:inline-flex;align-items:center;justify-content:center}
  .langsel-opt{min-width:40px}
}
/* SOFRA — deploy marker */

.site-logo{height:32px;width:auto;display:block}
.textarea{height:auto;padding:12px 14px;line-height:1.7;resize:vertical;font-family:inherit}
@media (max-width:640px){ .site-logo{height:26px} }

/* discount codes */
.coupon-box{margin:14px 0;padding:14px 0;border-top:1px solid #ded6c8;border-bottom:1px solid #ded6c8}
.coupon-form{display:flex;gap:8px;align-items:center}
.coupon-form .input{height:42px;font-size:14px;flex:1;min-width:0;text-transform:uppercase}
.coupon-form .ghost-btn{white-space:nowrap}
.coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.coupon-error{margin-top:8px;font-size:12.5px;color:var(--burgundy)}
.summary-line.discount-line{color:#1c5c46;font-weight:600}

/* ============================================================
   Dashboard — side menu and content column
   ============================================================ */
.admin-layout{display:grid;grid-template-columns:238px 1fr;gap:0;min-height:70vh;
              background:var(--paper);border:1px solid var(--line)}

/* menu */
.admin-side{background:var(--charcoal);color:#cdc3b2;display:flex;flex-direction:column;
            padding:20px 0 14px}
.side-brand{padding:0 20px 18px;border-bottom:1px solid #3a3630;margin-bottom:14px}
.side-mark{display:block;font-family:'Cormorant Garamond',serif;font-size:22px;
           letter-spacing:.08em;color:var(--ivory)}
.side-role{display:block;font-size:11.5px;color:#8b8478;margin-top:3px}

.side-nav{flex:1;display:flex;flex-direction:column;gap:1px}
.side-link{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:14px;
           color:#cdc3b2;text-decoration:none;border-inline-start:3px solid transparent}
a.side-link:hover{background:#302d28;color:var(--ivory)}
.side-link.on{background:#302d28;color:var(--ivory);border-inline-start-color:var(--copper)}
.side-parent{color:#8b8478;font-size:12px;letter-spacing:.06em;text-decoration:none;
             text-transform:uppercase;padding-bottom:6px}
a.side-parent:hover{color:var(--ivory);background:transparent}
.side-group.open > .side-parent{color:#b8ad9c}
.nav-icon{width:17px;height:17px;flex:none}
.side-text{flex:1}

.side-children{display:block;padding-bottom:6px}
.side-child{display:block;padding:9px 20px 9px 46px;font-size:13.5px;color:#cdc3b2;
            text-decoration:none;border-inline-start:3px solid transparent}
html[dir=rtl] .side-child{padding:9px 46px 9px 20px}
.side-child:hover{background:#302d28;color:var(--ivory)}
.side-child.on{color:var(--ivory);font-weight:600;border-inline-start-color:var(--copper);background:#302d28}
.side-foot{border-top:1px solid #3a3630;padding-top:12px;margin-top:12px}
.side-signout{width:100%;background:transparent;border:0;cursor:pointer;
              font-family:inherit;text-align:start}

/* content */
.admin-main{min-width:0;background:#fff}
.admin-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
           flex-wrap:wrap;padding:22px 26px;border-bottom:1px solid var(--line);background:var(--paper)}
.admin-h1{font-family:var(--display-font);font-size:26px;line-height:1.3;margin:0;font-weight:400}
.admin-sub{font-size:13.5px;color:var(--muted);margin:5px 0 0;max-width:60ch;line-height:1.7}
.admin-bar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-who{font-size:12.5px;color:var(--muted)}
.admin-content{padding:26px}

/* cards */
.card{border:1px solid var(--line);background:#fff;margin-bottom:20px}
.card-head{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.card-title{font-size:15px;font-weight:600;margin:0;color:var(--charcoal)}
.card-note{font-size:13px;color:var(--muted);margin:5px 0 0;line-height:1.7;max-width:70ch}
.card-body{padding:20px}
.card-body > .field:last-child,.card-body > .check:last-child{margin-bottom:0}

.save-bar{position:sticky;bottom:0;background:var(--paper);border:1px solid var(--line);
          padding:14px 20px;display:flex;justify-content:flex-end;margin-top:8px}

.notice-strip{padding:12px 16px;margin-bottom:20px;font-size:13.5px;border-inline-start:3px solid}
.notice-strip.ok{background:#e9f2ee;border-color:#2f8a63;color:#1c5c46}
.notice-strip.warn{background:#f7ead9;border-color:var(--copper);color:#8a5320}

.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form .input{height:42px;font-size:14px;flex:1;min-width:min(260px,60vw)}
.preview-row{display:flex;align-items:baseline;gap:12px;margin-top:14px;padding-top:14px;
             border-top:1px solid var(--line);flex-wrap:wrap}
.price-preview{font-family:var(--display-font);font-size:22px;color:var(--teal)}
.price-preview s{font-size:15px;margin-inline-start:8px}

/* the storefront chrome is noise inside the dashboard */
body:has(.admin-layout) > .announce,
body:has(.admin-layout) > header,
body:has(.admin-layout) > footer{display:none}
body:has(.admin-layout) .page{padding:0}
body:has(.admin-layout) .wrap{max-width:1400px}

@media (max-width:1000px){
  .admin-layout{grid-template-columns:1fr}
  .admin-side{flex-direction:row;align-items:center;gap:4px;padding:0 12px;
              overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .admin-side::-webkit-scrollbar{display:none}
  .side-brand{display:none}
  /* the strip is the only menu on a phone, so signing out has to stay in it */
  .side-foot{display:flex;align-items:center;flex:0 0 auto;border:0;margin:0;padding:0;
             border-inline-start:1px solid #3a3630}
  .side-foot form{display:flex}
  .side-nav{flex-direction:row;flex:0 0 auto;gap:2px}
  .side-group{display:flex;align-items:center}
  .side-parent{display:none}
  .side-children{display:flex!important;padding:0}
  .side-child,.side-link{white-space:nowrap;padding:14px 12px;border-inline-start:0;
                         border-bottom:3px solid transparent}
  html[dir=rtl] .side-child{padding:14px 12px}
  .side-child.on,.side-link.on{border-inline-start:0;border-bottom-color:var(--copper)}
  .admin-bar,.admin-content{padding:18px 16px}
  .admin-h1{font-size:22px}
  .save-bar{padding:12px 16px}
}
.health-fix{margin-inline-start:8px;font-size:12px;color:var(--teal);text-decoration:underline}

/* ============================================================
   Dashboard — tables that act, and the panels around them
   ============================================================ */
.card-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.row-actions{white-space:nowrap;text-align:end}
.ghost-btn-sm{padding:6px 12px;font-size:12.5px}
.inline-actions{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.editor-row td{background:var(--paper);border-bottom:2px solid var(--line)}
.editor-grid{display:grid;grid-template-columns:1fr 280px;gap:26px;padding:18px 4px;align-items:start}
.editor-form .field{margin-bottom:14px}
.editor-side{border-inline-start:1px solid var(--line);padding-inline-start:22px}
.stack-form{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.stack-form .ghost-btn{align-self:flex-start}
.danger-form{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;padding:18px 4px;font-size:13.5px}
.kv dt{color:var(--muted);white-space:nowrap}
.kv dd{margin:0;word-break:break-word}

.filter-block{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.filter-label{font-size:12.5px;color:var(--muted);min-width:76px}
.filter-form{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.filter-form .field{margin-bottom:0;min-width:170px}
.filter-form-actions{display:flex;gap:10px;align-items:center}

.transfer-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.transfer-grid .btn,.transfer-grid .ghost-btn{margin-top:12px}
.transfer-grid .file-input{margin-top:10px}

.edition-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.edition-card{border:1px solid var(--line);padding:14px 16px;display:flex;
              align-items:center;justify-content:space-between;gap:10px;background:var(--paper)}

.logo-row{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.logo-preview{width:190px;min-height:88px;border:1px dashed var(--line);background:var(--ivory);
              display:flex;align-items:center;justify-content:center;padding:12px}
.logo-preview img{max-width:100%;max-height:64px;object-fit:contain}
.logo-placeholder{font-family:var(--display-font);font-size:22px;color:var(--muted);letter-spacing:.08em}
.logo-form{flex:1;min-width:min(320px,100%)}
.logo-form .file-input{margin-bottom:10px}

.serp-preview{border:1px solid var(--line);background:#fff;padding:16px 18px;margin-bottom:20px;max-width:640px}
.serp-url{font-size:12.5px;color:#3a7d44;word-break:break-all}
.serp-title{font-size:19px;color:#1a0dab;line-height:1.35;margin-top:4px}
.serp-desc{font-size:13.5px;color:var(--muted);line-height:1.7;margin-top:5px}

.refs-cell{font-size:11.5px;word-break:break-all;max-width:190px}

@media (max-width:900px){
  .editor-grid,.transfer-grid{grid-template-columns:1fr;gap:20px}
  .editor-side{border-inline-start:0;border-top:1px solid var(--line);padding-inline-start:0;padding-top:18px}
  .filter-form .field{min-width:min(220px,100%)}
  .logo-row{gap:18px}
}

/* ============================================================
   The in-browser reader
   ============================================================ */
.reader-wrap{max-width:820px}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
            flex-wrap:wrap;padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.reader-edition{font-size:13px;color:var(--muted);letter-spacing:.06em}
.reader-head{margin-bottom:30px}

/* contents */
.toc{list-style:none;margin:0;padding:0;counter-reset:none}
.toc-item{border-bottom:1px solid var(--line)}
.toc-item a{display:flex;align-items:baseline;gap:16px;padding:13px 4px;color:var(--body)}
.toc-item a:hover{background:var(--ivory);color:var(--teal)}
.toc-num{min-width:2.4em;font-family:var(--display-font);font-size:15px;color:var(--copper);
         font-variant-numeric:tabular-nums}
.toc-title{flex:1;font-size:15px;line-height:1.6}

/* the page itself — the book's own typography, on the site's paper */
.reader{font-size:17px;line-height:1.95;color:var(--body)}
.reader h1,.reader h2,.reader h3,.reader h4{font-family:var(--display-font);color:var(--teal);
                                            line-height:1.35;margin:34px 0 14px;font-weight:400}
.reader h1{font-size:33px;margin-top:0}
.reader h2{font-size:26px}
.reader h3{font-size:21px}
.reader h4{font-size:18px}
.reader p{margin:0 0 17px}
.reader ul,.reader ol{margin:0 0 18px;padding-inline-start:24px}
.reader li{margin-bottom:8px}
.reader img{margin:26px auto;max-width:100%;height:auto}
.reader figure{margin:26px 0}
.reader figcaption{font-size:13px;color:var(--muted);margin-top:9px;text-align:center}
.reader blockquote{margin:24px 0;padding-inline-start:20px;border-inline-start:2px solid var(--copper);
                   color:var(--muted);font-style:italic}
.reader table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.reader th,.reader td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;
                      vertical-align:top}
.reader th{font-weight:600;color:var(--teal)}
.reader hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.reader code,.reader pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.reader a{color:var(--teal);text-decoration:underline}

/* moving between pages */
.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
            margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.reader-nav .btn{padding:12px 26px;font-size:15px}
.reader-toc-link{font-size:13.5px;color:var(--muted)}
.reader-toc-link:hover{color:var(--teal)}
.reader-jump{display:flex;align-items:center;justify-content:space-between;gap:14px;
             flex-wrap:wrap;margin-top:16px}
.reader-jump-links{display:flex;gap:6px}
.jump-link{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
           border:1px solid var(--line);font-size:13px;color:var(--body);background:#fff}
.jump-link:hover{border-color:var(--copper)}
.jump-link.on{background:var(--teal);border-color:var(--teal);color:var(--ivory)}

/* library rows, now that an edition has three actions */
.library-edition{padding:16px 0;border-top:1px solid var(--line)}
.library-edition:first-of-type{border-top:0;padding-top:8px}
.library-edition-name{font-weight:600;font-size:14.5px;margin-bottom:10px}
.download-row{display:flex;gap:10px;flex-wrap:wrap}

.format-tags{display:inline-flex;gap:6px}

@media (max-width:700px){
  .reader{font-size:16.5px}
  .reader h1{font-size:27px}
  .reader h2{font-size:22px}
  .reader-nav{gap:10px}
  .reader-nav .btn{padding:11px 16px;font-size:14px}
  .reader-jump{justify-content:center}
}
.ok-note{color:#2f8a63}
.result-download{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.result-download .download-row{justify-content:center;margin-top:12px}

/* dashboard language switcher, in the page header */
.admin-langsel{display:inline-flex;border:1px solid var(--line);background:#fff;overflow:hidden}
.admin-lang-opt{border:0;background:transparent;cursor:pointer;font-family:inherit;
                padding:6px 10px;font-size:12.5px;color:var(--muted);line-height:1.6;
                border-inline-end:1px solid var(--line)}
.admin-lang-opt:last-child{border-inline-end:0}
.admin-lang-opt:hover{background:var(--ivory);color:var(--teal)}
.admin-lang-opt.on{background:var(--teal);color:var(--ivory);font-weight:600}
@media (max-width:700px){
  .admin-lang-opt{padding:6px 8px;font-size:12px}
}

/* the per-language description block in settings */
.desc-block{margin-top:6px}
.desc-block > .field-label{margin-bottom:4px}
.desc-block .field{margin-top:14px}
.desc-lang{color:var(--teal);font-size:12.5px}

/* ============================================================
   Deleting orders
   ============================================================ */
.tick-col{width:34px;padding-inline-end:0}
.row-tick{width:17px;height:17px;accent-color:var(--burgundy);cursor:pointer}
.row-delete{margin-inline-start:8px}

.bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
          flex-wrap:wrap;padding:14px 0 2px;margin-top:12px;border-top:1px solid var(--line)}

/* The danger card looks different on purpose: nothing in it is reversible. */
.danger-card{border-color:#e0c3c8}
.danger-card .card-head{background:#f9f0f1;border-bottom-color:#e0c3c8}
.danger-card .card-title{color:var(--burgundy)}
.danger-card .inline-form{align-items:flex-end;gap:12px}
.danger-confirm{margin-bottom:0;flex:0 1 240px}
.danger-confirm .input{height:44px}

.btn-danger{background:var(--burgundy);color:#fff;height:44px;padding:0 22px;font-size:14.5px}
.btn-danger:hover{background:#5d2934}

@media (max-width:700px){
  /* A 17px box is a fiddly target for a thumb. */
  .tick-col{width:44px}
  .row-tick{width:22px;height:22px}
  .danger-card .inline-form{align-items:stretch}
  .danger-confirm{flex:1 1 100%}
  .btn-danger{width:100%}
  .bulk-bar{flex-direction:column;align-items:stretch;gap:10px}
  .bulk-bar .drawer-remove{align-self:flex-start}
}