/* ============================================================================
   SADERLEX STORE · homepage sections.
   The store homepage's own section CSS, shared by both language homepages
   (root index.html = Arabic, en/index.html = English). Built ON the SADER
   monochrome system + the shared store layer (store.css). All units logical,
   so the same rules render RTL and LTR. Sections: subscription plans · final CTA.
   ============================================================================ */

/* ======================= SUBSCRIPTION PLANS =======================
   The landing's whole offer: ONE country's portal, priced two ways. Both plans
   carry the same access — only the term differs — so they are one object at two
   weights rather than two products: the monthly outlined and quiet, the yearly
   ringed in the accent with its saving stated on it.

   ACCENT. --lx-accent is the site's per-country accent (crimson for Lebanon,
   gold for the Emirates), declared in local-site/static/site-header.css, which
   the /store/ proxy injects into every store page. A store page opened OUTSIDE
   that proxy has no such token and falls back to the store's own --commerce —
   which is that same variable again, with a hex behind it. Nothing here names a
   colour of its own. */
.st-plans{
  --plan-accent:      var(--lx-accent, var(--commerce));
  --plan-accent-dark: var(--lx-accent-shade, var(--commerce-dark));
  --plan-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  /* First section on the page now, so it owns the clearance under the fixed
     header that the hero used to provide. */
  padding-block: calc(var(--header-h) + clamp(2.5rem,7vh,4.5rem)) clamp(2.5rem,6vh,4.5rem); }

.st-plans__head{ max-inline-size:44rem; margin-inline:auto; text-align:center;
  margin-block-end:clamp(var(--space-7),4vw,var(--space-9)); }
.st-plans__eyebrow{ display:inline-flex; align-items:center; gap:.7rem;
  font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--text-muted); }
.st-plans__eyebrow::before,.st-plans__eyebrow::after{ content:""; inline-size:26px; block-size:1px;
  background:var(--plan-accent); }
.st-plans__head h2{ margin-block-start:var(--space-4); font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-display-3); line-height:1.06; color:var(--text); text-wrap:balance; }
.st-plans__head h2 em{ font-style:normal; position:relative; white-space:nowrap; }
.st-plans__head h2 em::after{ content:""; position:absolute; inset-inline:0; inset-block-end:-.04em;
  block-size:.11em; background:var(--plan-accent); }
/* Arabic sits lower in its box than Latin does — ن and ي drop well past the
   baseline — so the same rule that underlines "two terms" strikes through
   "بمدّتين". Drop it clear of the descenders in RTL. */
[dir="rtl"] .st-plans__head h2 em::after{ inset-block-end:-.18em; }
.st-plans__head p{ margin-block-start:var(--space-4); font-size:var(--fs-lead); color:var(--text-muted); }

.st-plans__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(var(--space-5),2.5vw,var(--space-7)); max-inline-size:58rem; margin-inline:auto; }

.st-plan{ position:relative; display:flex; flex-direction:column;
  padding:clamp(var(--space-6),3vw,var(--space-8));
  border:1px solid var(--line); background:var(--bg);
  transition:border-color var(--dur-fast) var(--ease); }
.st-plan:hover{ border-color:var(--line-strong); }
/* the recommended term: ringed in the accent, with a rule laid across its top */
.st-plan--best,.st-plan--best:hover{ border-color:var(--plan-accent); box-shadow:var(--shadow-lift); }
.st-plan--best::before{ content:""; position:absolute; inset-block-start:-1px; inset-inline:-1px;
  block-size:3px; background:var(--plan-accent); }
.st-plan__flag{ position:absolute; inset-block-start:0; inset-inline-end:clamp(var(--space-5),3vw,var(--space-7));
  transform:translateY(-50%); display:inline-flex; align-items:center; gap:.4em;
  background:var(--plan-accent); color:#fff; font-size:var(--fs-micro); font-weight:var(--fw-bold);
  letter-spacing:.06em; padding:.45em .9em; white-space:nowrap; }

.st-plan__name{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h4);
  line-height:1.2; color:var(--text); }
.st-plan__note{ margin-block-start:var(--space-2); font-size:var(--fs-small); color:var(--text-muted); }

.st-plan__price{ margin-block-start:var(--space-6); display:flex; align-items:baseline; flex-wrap:wrap; gap:.45rem; }
.st-plan__amt{ font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(2.4rem,1.75rem + 2vw,3.3rem); color:var(--text); }
.st-plan--best .st-plan__amt{ color:var(--plan-accent); }
.st-plan__per{ font-size:var(--fs-body); color:var(--text-faint); }
.st-plan__compare{ margin-block-start:var(--space-3); font-size:var(--fs-small); color:var(--text-muted); }
.st-plan__compare s{ text-decoration-thickness:1px; }
/* The daily figure, under the comparison. It reads as full text rather than as
   a second muted footnote — it is the line meant to be remembered — but it is
   still smaller than the price, so the annual figure keeps the card. The number
   inside takes the country accent, which is what makes it catch the eye without
   needing a larger size. */
.st-plan__perday{ margin-block-start:var(--space-2); font-size:var(--fs-small);
  line-height:1.5; color:var(--text); }
.st-plan__perday .lx-fig{ font-family:var(--font-display); font-weight:800;
  color:var(--plan-accent); }

.st-plan__feat{ margin-block:var(--space-6) var(--space-7); padding-block-start:var(--space-5);
  border-block-start:1px solid var(--line); display:flex; flex-direction:column; gap:var(--space-4); }
.st-plan__feat li{ display:flex; align-items:flex-start; gap:.7rem;
  font-size:var(--fs-small); line-height:1.55; color:var(--text); }
/* the tick is a mask rather than an <svg> per item: it takes the country accent
   for free and leaves the markup a plain list. */
.st-plan__feat li::before{ content:""; flex:0 0 auto; inline-size:15px; block-size:15px;
  margin-block-start:.18em; background:var(--plan-accent);
  -webkit-mask:var(--plan-tick) center/contain no-repeat;
  mask:var(--plan-tick) center/contain no-repeat; }

/* `auto` rather than a fixed gap: the yearly card carries a saving line the
   monthly one does not, and without this the two buttons sit at different
   heights inside cards the grid has already stretched to match. The list below
   keeps the minimum breathing room, so `auto` only ever adds to it. */
.st-plan__cta{ margin-block-start:auto; }
.st-plan--best .st-plan__cta{ background:var(--plan-accent); border-color:var(--plan-accent); color:#fff; }
.st-plan--best .st-plan__cta:hover{ background:var(--plan-accent-dark); border-color:var(--plan-accent-dark); color:#fff; }

.st-plans__foot{ max-inline-size:58rem; margin:var(--space-6) auto 0; text-align:center;
  font-size:var(--fs-caption); color:var(--text-faint); }

/* The whole page flips dark while the CTA below holds the viewport middle. The
   accent is a deep crimson (or gold) and loses its ground there, so the yearly
   figure goes back to the theme's own ink. */
[data-theme="dark"] .st-plan--best .st-plan__amt{ color:var(--text); }

@media (max-width:720px){
  .st-plans__grid{ grid-template-columns:1fr; }
  .st-plan--best{ order:-1; }          /* recommended first in one column */
  .st-plan__flag{ inset-inline-end:auto; inset-inline-start:clamp(var(--space-5),3vw,var(--space-7)); }
}

/* ======================= PUBLICATIONS SHELF =======================
   SADER has printed law since 1863, and the portal above is only half of what
   the house sells. DISPLAY ONLY in this pass: no price, no cart, no per-book
   link. So the section is built to do exactly ONE thing — hand the visitor to
   the full catalogue — and everything in it is weighted DOWN except the handoff
   bar at the end, which is the only filled accent here and the loudest element
   in the section.

   The head repeats .st-plans__head's shapes one size down (eyebrow ruled either
   side, display h2 with an accent-underlined <em>, muted lead) so the two
   sections read as one page. Restated rather than folded into the plans'
   selectors on purpose: the plan cards are the landing's actual offer and
   nothing added here should be able to move them.

   ACCENT. Same arrangement as .st-plans — --lx-accent is the per-country accent
   (crimson for Lebanon, gold for the Emirates) injected by the /store/ proxy,
   and --commerce is the store's own fallback for a page opened outside it.
   Nothing below names a colour of its own. */
.st-books{
  --book-accent:      var(--lx-accent, var(--commerce));
  --book-accent-dark: var(--lx-accent-shade, var(--commerce-dark));
  padding-block:clamp(2.5rem,6vh,4.5rem);
  border-block-start:1px solid var(--line);
  background:var(--bg-alt); }

.st-books__head{ max-inline-size:44rem; margin-inline:auto; text-align:center;
  margin-block-end:clamp(var(--space-6),3.5vw,var(--space-8)); }
.st-books__eyebrow{ display:inline-flex; align-items:center; gap:.7rem;
  font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--text-muted); }
.st-books__eyebrow::before,.st-books__eyebrow::after{ content:""; inline-size:26px; block-size:1px;
  background:var(--book-accent); }
.st-books__head h2{ margin-block-start:var(--space-4); font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-h2); line-height:1.1; color:var(--text); text-wrap:balance; }
.st-books__head h2 em{ font-style:normal; position:relative; white-space:nowrap; }
.st-books__head h2 em::after{ content:""; position:absolute; inset-inline:0; inset-block-end:-.04em;
  block-size:.09em; background:var(--book-accent); }
/* Arabic drops well past the baseline, so the same underline strikes through
   the word instead. Cleared exactly as .st-plans clears it. */
[dir="rtl"] .st-books__head h2 em::after{ inset-block-end:-.18em; }
.st-books__head p{ margin-block-start:var(--space-4); font-size:var(--fs-body); color:var(--text-muted); }

/* THE SHELF. 58rem wide, the same measure as .st-plans__grid, so the books line
   up under the two cards rather than beside them.

   Every cover is drawn into ONE uniform portrait frame so a whole row lines up
   at the same height. The frame is 7:10 because that is the proportion of most
   of the catalogue's cover art, so cover-fit crops those to nothing; the few
   square spreads fill the frame and are cropped, but the crop is anchored to the
   TOP (object-position) so it eats the bottom edge, never the title. This is the
   deliberate trade for uniformity: earlier every cover kept its own proportions
   and a square one stood shorter than its neighbours, which read as "funky". */
.st-books__shelf{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(var(--space-5),2.4vw,var(--space-7)) clamp(var(--space-4),2vw,var(--space-6));
  max-inline-size:58rem; margin-inline:auto; }
.st-books__item{ display:flex; flex-direction:column; min-inline-size:0; }
.st-books__cover{ display:block; inline-size:min(100%,8.5rem); margin-inline:auto; }
.st-books__cover img{ display:block; inline-size:100%; block-size:auto; aspect-ratio:7/10;
  object-fit:cover; object-position:center top;
  border:1px solid var(--line); box-shadow:0 10px 22px -10px rgba(0,0,0,.45); }
.st-books__title{ margin-block-start:var(--space-4); font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-small); line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.st-books__author{ margin-block-start:.3rem; font-size:var(--fs-caption); color:var(--text-faint);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

/* THE PRICE. Accent-coloured because a price is the one thing on a shelf a
   reader scans for, and because --book-accent is already this section's
   per-country accent (crimson for Lebanon, gold for the Emirates) -- no colour
   is named here. Deliberately NOT commerce red and NOT a button: the figure is
   information. The only purchase on this page is still a subscription.

   margin-block-start:auto pins it to the BOTTOM of the card. .st-books__item is
   a column flexbox and grid stretches it to the tallest card in its row, so the
   prices line up across the row even though the titles above them run to one,
   two or three lines. Without it each price would float at whatever height its
   own title happened to stop, which is what makes a row of them unreadable.

   .lx-fig alongside supplies the sans face and tabular figures, exactly as it
   does for the plan amounts above. */
.st-books__price{ margin-block-start:auto; padding-block-start:.4rem;
  font-weight:var(--fw-bold); font-size:var(--fs-small); line-height:1.2;
  color:var(--book-accent); }

/* THE HANDOFF — the point of the whole section, and deliberately the loudest
   thing in it: the only filled accent, the biggest figure, the only button.
   NOT .st-btn--buy: commerce red on this page means "this is a purchase", and
   none of these books is one yet. */
.st-books__handoff{ display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(var(--space-4),2.4vw,var(--space-6));
  max-inline-size:58rem; margin:clamp(var(--space-7),4vw,var(--space-9)) auto 0;
  padding:clamp(var(--space-5),3vw,var(--space-7));
  background:var(--book-accent); color:#fff; }
.st-books__count{ flex:0 0 auto; font-family:var(--font-display); font-weight:800; line-height:.85;
  font-size:clamp(2.6rem,1.9rem + 2.4vw,4rem); color:#fff; }
.st-books__handoff-txt{ flex:1 1 15rem; min-inline-size:0; }
.st-books__handoff-lead{ font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-h4); line-height:1.2; color:#fff; }
.st-books__handoff-note{ margin-block-start:var(--space-2); font-size:var(--fs-small);
  line-height:1.5; color:rgba(255,255,255,.82); }
/* Scoped with .st-books so it outranks store.css's [data-theme="dark"] .st-btn
   rules: the whole page flips dark while the CTA below holds the viewport
   middle, and without this the button would repaint itself mid-scroll. */
.st-books .st-books__cta{ flex:0 0 auto; background:#fff; border-color:#fff; color:var(--book-accent);
  font-size:var(--fs-body); padding-block:var(--space-5); padding-inline:var(--space-8); }
.st-books .st-books__cta:hover{ background:transparent; border-color:#fff; color:#fff; }
/* The chevron is drawn from two borders rather than a glyph: an arrow character
   is bidi-neutral and would keep pointing right inside the Arabic page. */
.st-books .st-books__cta::after{ content:""; inline-size:.55em; block-size:.55em;
  border-block-start:2px solid currentColor; border-inline-end:2px solid currentColor;
  transform:rotate(45deg); }
/* Logical borders have ALREADY swapped sides in RTL (inline-end is the left
   edge), so the corner points NW here, not NE: it needs the opposite
   rotation, not a mirror on top of the swap. */
[dir="rtl"] .st-books .st-books__cta::after{ transform:rotate(-45deg); }

/* Fewer books before the handoff drifts off-screen, never more rows. */
@media (max-width:900px){
  .st-books__shelf{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .st-books__item:nth-child(n+7){ display:none; }
}
@media (max-width:560px){
  .st-books__shelf{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-books__item:nth-child(n+5){ display:none; }
  .st-books .st-books__cta{ inline-size:100%; }
}

/* ============================ FINAL CTA ============================ */
.st-final{ padding-block:clamp(2.75rem,2.2rem + 2.6vw,4.5rem); overflow:hidden; isolation:isolate; }
.st-final__wave{ position:absolute; inset:0; inline-size:100%; block-size:100%; z-index:0; pointer-events:none; }
.st-final__bar{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(var(--space-5),4vw,var(--space-8)); text-align:start; }
.st-final__txt{ flex:1 1 0; min-inline-size:0; }
.st-final h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-display-3); line-height:1.06; color:var(--text); text-wrap:balance; }
.st-final p{ margin-block-start:var(--space-4); color:var(--text-muted); font-size:var(--fs-lead); }
.st-final__cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); flex-shrink:0; }
/* SIGNED IN: the two CTAs are gone -- an account exists already and the plans
   sit above -- so the copy is the only child left in this flex row. A lone
   child under `justify-content:space-between` sits flush against the
   inline-start edge, NOT centred, so centring takes both halves: the flex
   rules centre the BOX, text-align centres the LINES within it. Same pair the
   <=720px rule below already applies, for the same reason. */
.st-final__bar--solo{ justify-content:center; text-align:center; }
.st-final__bar--solo .st-final__txt{ flex:0 1 auto; margin-inline:auto; }
/* The paragraph needs centring too, and text-align does NOT do it. base.css caps
   every <p> at `max-width:68ch`, which here computes to ~790px — narrower than
   the text column, so the BOX is off-centre even though the lines inside it are
   centred. In RTL the whole slack falls on one side, which put this line ~229px
   right of the heading. margin-inline:auto centres the box; the cap stays. */
.st-final__bar--solo .st-final__txt p{ margin-inline:auto; }
@media (max-width:720px){ .st-final__bar{ justify-content:center; text-align:center; } .st-final__txt{ margin-inline:auto; }
  .st-final__txt p{ margin-inline:auto; } }

/* ============================ SCROLL FX ============================ */
/* thin scroll-progress bar — scroll-fx.js scrubs transform:scaleX(0→1) */
.scroll-progress{ position:fixed; inset-block-start:0; inset-inline:0; block-size:3px;
  transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--lx-accent,#981B31) 0%,var(--lx-accent-lift,#C0223C) 100%);
  z-index:calc(var(--z-header) + 1); pointer-events:none; will-change:transform; }
[dir="rtl"] .scroll-progress{ transform-origin:100% 50%; }
[data-theme="dark"] .scroll-progress{ box-shadow:0 0 14px rgba(192,34,60,.6); }

/* The WHOLE page flips dark while a dark section holds the viewport middle:
   scroll-fx.js sets data-theme="dark" on <html>, so the design-system tokens
   repaint every section background dark + all text light automatically.
   Only non-token bits (the hardcoded-white sticky header, the <img> wordmark)
   need an explicit dark rule here. */
html[data-theme="dark"]{ background:#0E0E0E; }
html[data-theme="dark"] body{ background:#0E0E0E; }
[data-theme="dark"] .st-head.is-solid{ background:rgba(14,14,14,.82); border-block-end-color:rgba(255,255,255,.12); }
/* wordmark swaps ink → ivory */
.lx-brand__logo--dark{ display:none; }
[data-theme="dark"] .lx-brand__logo--light{ display:none; }
[data-theme="dark"] .lx-brand__logo--dark{ display:block; }

/* cross-fade every surface only during the flip, then stop (keeps hovers instant).
   Only background-color + color are transitioned: box-shadow/border/fill fades are
   the expensive repaints that make the flip stutter, and snapping them instantly is
   imperceptible inside the colour fade. */
html.is-theming,
html.is-theming *{
  transition: background-color .55s var(--ease), color .55s var(--ease) !important;
}
@media (prefers-reduced-motion:reduce){
  html.is-theming, html.is-theming *{ transition:none !important; }
}