/* =============================================================
     THE EHS GURU — EHS Ebook Store (standalone frontend stylesheet)

     This is part of the plugin's standalone frontend (see
     standalone/ebook-store.html for the full explanation of how the
     three standalone/ files relate to the WordPress plugin). Edit this
     file directly for any visual/styling change — nothing here requires
     touching plugin/PHP code, and the [ehs_ebook_store] shortcode picks
     up changes automatically on next page load (cache-busted via
     EHS_Ebook_Shortcode::asset_version(), which reads this file's own
     last-modified time).

     Every rule lives under .ehs-ebook-store (no bare html/body/* rules)
     so this file never leaks onto the surrounding WordPress theme —
     safe to enqueue on any page, in the classic editor, Gutenberg, or a
     page-builder section (Elementor, Divi, etc.).
     ============================================================= */

  .ehs-ebook-store *{ -webkit-tap-highlight-color:transparent; }

  .ehs-ebook-store{
    /* Force light-themed native browser UI (the "All Categories" <select>'s
       dropdown list, date/time pickers, etc.) inside this widget regardless
       of the visitor's OS/browser dark-mode setting. Without this, tapping
       a native form control on a phone in system dark mode can pop it open
       with the OS's own near-black theme — reported as "poora black ho
       jaata hai" (the whole thing turns black) — even though every custom
       element in this stylesheet stays on the intended light theme. */
    color-scheme:light;
    /* Full-bleed: break out of whatever contained/boxed width the page
       or page-builder places this in (e.g. an Elementor "Boxed" section,
       a theme's centered content column) so the store always spans the
       full browser width edge-to-edge, exactly like a native full-width
       section — the inner .ehs-container below still centers and caps
       the readable content width. If you're placing this inside
       Elementor, you can alternatively (or additionally) turn on that
       section/container's own "Stretch Section" / full-width option —
       both achieve the same result and are safe to combine. */
    width:100vw;
    max-width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    --ehs-navy-900:#312E81;
    --ehs-navy-800:#4338CA;
    --ehs-navy-700:#6D28D9;
    --ehs-navy-600:#7C3AED;
    --ehs-yellow:#F59E0B;
    --ehs-yellow-light:#FBBF24;
    --ehs-yellow-dark:#B45309;
    --ehs-white:#FFFFFF;
    --ehs-grey-50:#F5F7F9;
    --ehs-grey-100:#ECEFF3;
    --ehs-grey-200:#DEE3EA;
    --ehs-grey-500:#7A8699;
    --ehs-grey-600:#5A6478;
    --ehs-grey-700:#3E4658;
    --ehs-ink:#0C1526;
    --ehs-green:#16A34A;
    --ehs-green-bg:#E7F6EE;
    --ehs-blue:#2563EB;
    --ehs-blue-bg:#EAF1FE;
    --ehs-bestseller:#B5590A;
    --ehs-bestseller-bg:#FDEEDD;
    --ehs-pink:#EC4899;
    --ehs-teal:#0D9488;
    --ehs-rose:#E11D48;
    --ehs-amber:#D97706;

    --ehs-font-head:'Poppins','Segoe UI',Arial,sans-serif;
    --ehs-font-body:'Inter','Segoe UI',Arial,sans-serif;

    --ehs-radius-sm:8px; --ehs-radius-md:14px; --ehs-radius-lg:20px; --ehs-radius-pill:999px;
    --ehs-shadow-sm:0 2px 10px rgba(49,46,129,0.08);
    --ehs-shadow-md:0 12px 30px rgba(49,46,129,0.12);
    --ehs-shadow-lg:0 22px 50px rgba(49,46,129,0.18);
    --ehs-shadow-lift:0 4px 12px rgba(49,46,129,0.08), 0 18px 36px rgba(49,46,129,0.14);
    --ehs-accent-bar:linear-gradient(90deg, var(--ehs-navy-700), var(--ehs-yellow));
    --ehs-container:1240px;
    --ehs-transition:260ms cubic-bezier(0.22,1,0.36,1);

    font-family:var(--ehs-font-body);
    color:var(--ehs-grey-700);
    background:var(--ehs-white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  .ehs-ebook-store *,
  .ehs-ebook-store *::before,
  .ehs-ebook-store *::after{ box-sizing:border-box; }
  .ehs-ebook-store img{ max-width:100%; display:block; }
  .ehs-ebook-store a{ color:inherit; text-decoration:none; }
  .ehs-ebook-store ul{ margin:0; padding:0; list-style:none; }
  .ehs-ebook-store button{ font-family:inherit; cursor:pointer; background:none; border:none; }
  .ehs-ebook-store h1,
  .ehs-ebook-store h2,
  .ehs-ebook-store h3,
  .ehs-ebook-store h4{ font-family:var(--ehs-font-head); color:var(--ehs-ink); margin:0; line-height:1.2; font-weight:700; }
  .ehs-ebook-store p{ margin:0; }
  .ehs-hidden{ display:none !important; }
  /* Screen-reader-only text: keeps a real <label> in the DOM for assistive
     tech (the search input/category select are otherwise only labelled by
     placeholder text and a visible chip row, neither of which is a
     substitute for a real label) without changing the visible layout. */
  .ehs-visually-hidden{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .ehs-container{ max-width:var(--ehs-container); margin:0 auto; padding:0 24px; }
  .ehs-section{ padding:64px 0; }
  .ehs-section--tint{ background:linear-gradient(180deg, #F5F3FF 0%, #FDF2F8 100%); }
  #ehs-categories{ background:linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 100%); }
  @media (max-width:768px){
    .ehs-section{ padding:44px 0; }
    /* The category section's own bottom padding plus the next section's
       top padding stack to ~88px on mobile — visually a large empty gap
       before the search bar when there are few categories. Trim it here,
       only for this specific pair of adjacent sections, without touching
       .ehs-section's shared padding rule (which every other section still
       uses) or the desktop layout. */
    #ehs-categories{ padding-bottom:20px; }
    #ehs-browse{ padding-top:24px; }
  }

  .ehs-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--ehs-font-head); font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ehs-navy-700); background:var(--ehs-grey-100); padding:6px 14px; border-radius:var(--ehs-radius-pill);
  }
  .ehs-eyebrow .ehs-dot{ width:6px; height:6px; border-radius:50%; background:var(--ehs-yellow); }
  .ehs-eyebrow--green{ background:var(--ehs-green-bg); color:var(--ehs-green); }
  .ehs-eyebrow--green .ehs-dot{ background:var(--ehs-green); }
  .ehs-eyebrow--gold{ background:rgba(245,158,11,0.14); color:var(--ehs-yellow-dark); }
  .ehs-eyebrow--gold .ehs-dot{ background:var(--ehs-yellow); }

  .ehs-section__head--center{ max-width:680px; margin:0 auto 40px; text-align:center; }
  .ehs-section__title{ font-size:clamp(24px,3vw,34px); margin-top:12px; }
  .ehs-section__title--sm{ font-size:20px; margin-top:0; }
  .ehs-section__sub{ font-size:15.5px; color:var(--ehs-grey-600); margin-top:12px; line-height:1.6; }

  /* ---------- Buttons ---------- */
  .ehs-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:var(--ehs-radius-pill); font-family:var(--ehs-font-head); font-weight:600; font-size:14px;
    padding:12px 22px; border:2px solid transparent;
    transition:transform var(--ehs-transition), box-shadow var(--ehs-transition), background var(--ehs-transition), color var(--ehs-transition), border-color var(--ehs-transition);
    white-space:nowrap;
    position:relative; overflow:hidden;
  }
  .ehs-btn:hover{ transform:translateY(-2px) scale(1.025); }
  .ehs-btn:active{ transform:translateY(0) scale(0.97); transition-duration:120ms; }
  .ehs-btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px var(--ehs-white), 0 0 0 6px var(--ehs-navy-700);
  }
  /* Subtle premium sheen — a soft diagonal highlight sweeps across on hover.
     Restrained: low opacity, single pass, no loop/flash. */
  .ehs-btn::after{
    content:""; position:absolute; top:0; left:0; width:34%; height:100%;
    background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
    transform:translateX(-220%) skewX(-20deg);
    transition:transform 650ms cubic-bezier(0.22,1,0.36,1);
    pointer-events:none;
  }
  .ehs-btn:hover::after{ transform:translateX(320%) skewX(-20deg); }
  /* Gradient stays within the amber→orange-400 range deliberately — every stop
     keeps at least 4.5:1 contrast with the navy-900 label text (checked). */
  .ehs-btn--primary{ background:linear-gradient(120deg, var(--ehs-yellow-light) 0%, var(--ehs-yellow) 60%, #FB923C 100%); color:var(--ehs-navy-900); box-shadow:0 10px 22px rgba(245,158,11,0.35); }
  .ehs-btn--primary:hover{ background:linear-gradient(120deg, var(--ehs-yellow) 0%, #FB923C 100%); box-shadow:0 16px 32px rgba(245,158,11,0.42); }
  .ehs-btn--primary:active{ box-shadow:0 6px 14px rgba(245,158,11,0.3); }
  .ehs-btn--navy{ background:var(--ehs-navy-900); color:var(--ehs-white); }
  .ehs-btn--navy:hover{ background:var(--ehs-navy-700); box-shadow:0 14px 28px rgba(49,46,129,0.28); }
  .ehs-btn--navy:active{ box-shadow:0 6px 14px rgba(49,46,129,0.22); }
  .ehs-btn--outline{ background:transparent; color:var(--ehs-white); border-color:rgba(255,255,255,0.55); }
  .ehs-btn--outline:hover{ background:rgba(255,255,255,0.12); border-color:var(--ehs-white); box-shadow:0 10px 24px rgba(0,0,0,0.18); }
  .ehs-btn--outline-navy{ background:transparent; color:var(--ehs-navy-800); border-color:var(--ehs-navy-800); }
  .ehs-btn--outline-navy:hover{ background:var(--ehs-navy-900); color:var(--ehs-white); box-shadow:0 10px 22px rgba(49,46,129,0.16); }
  .ehs-btn--ghost{ background:var(--ehs-grey-100); color:var(--ehs-navy-800); }
  .ehs-btn--ghost:hover{ background:var(--ehs-grey-200); box-shadow:0 8px 18px rgba(49,46,129,0.1); }
  .ehs-btn--disabled{ background:var(--ehs-grey-100); color:var(--ehs-grey-500); cursor:not-allowed; }
  .ehs-btn--disabled:hover{ transform:none; box-shadow:none; }
  .ehs-btn--disabled:hover::after{ transform:translateX(-220%) skewX(-20deg); }
  .ehs-btn--disabled:active{ transform:none; }
  .ehs-btn--sm{ padding:9px 16px; font-size:13px; }
  .ehs-btn--lg{ padding:15px 30px; font-size:15px; }

  /* ---------- Hero (photo background + overlay, content-driven height) ---------- */
  .ehs-hero{
    position:relative;
    color:var(--ehs-white);
    padding:96px 0 80px;
    overflow:hidden;
    background-color:var(--ehs-navy-900); /* fallback while the photo loads / if it fails */
  }
  .ehs-hero__bg{
    position:absolute; inset:0; z-index:0;
    background:
      var(--ehs-hero-bg, url('https://images.unsplash.com/photo-1735494032948-14ef288fc9d3?auto=format&fit=crop&w=1920&q=80'))
      center/cover no-repeat;
  }
  /* A left-weighted, neutral dark scrim (not a colour wash) — strong enough
     behind the text for contrast, fading away by ~60% across so the actual
     uploaded/background photo stays clearly visible on the right side and
     through the rest of the hero, instead of being hidden under a solid
     tinted "fade" layer. */
  .ehs-hero__overlay{
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(90deg, rgba(8,14,28,0.82) 0%, rgba(8,14,28,0.58) 32%, rgba(8,14,28,0.22) 58%, rgba(8,14,28,0.02) 78%);
  }
  .ehs-hero .ehs-container{ position:relative; z-index:1; }
  .ehs-hero__copy{ max-width:640px; }
  .ehs-hero .ehs-eyebrow{ background:rgba(245,158,11,0.22); color:var(--ehs-yellow-light); }
  .ehs-hero .ehs-eyebrow .ehs-dot{ background:var(--ehs-yellow); }
  .ehs-hero .ehs-hero__title{ font-size:clamp(32px,4.6vw,50px); font-weight:800; color:var(--ehs-white); margin-top:16px; letter-spacing:0.01em; text-shadow:0 2px 16px rgba(0,0,0,0.4); }
  .ehs-hero__sub{ margin-top:14px; font-size:clamp(15px,1.5vw,18px); color:rgba(255,255,255,0.92); max-width:520px; line-height:1.6; text-shadow:0 1px 10px rgba(0,0,0,0.35); }
  .ehs-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

  /* Entrance animation — fade/scale for the photo, staggered fade+up for copy. */
  @media (prefers-reduced-motion:no-preference){
    .ehs-hero__bg{ animation:ehsHeroBgIn 600ms cubic-bezier(0.22,1,0.36,1) both; }
    .ehs-hero .ehs-eyebrow{ animation:ehsFadeUp 450ms cubic-bezier(0.22,1,0.36,1) both; animation-delay:60ms; }
    .ehs-hero .ehs-hero__title{ animation:ehsFadeUp 500ms cubic-bezier(0.22,1,0.36,1) both; animation-delay:140ms; }
    .ehs-hero__sub{ animation:ehsFadeUp 500ms cubic-bezier(0.22,1,0.36,1) both; animation-delay:220ms; }
    .ehs-hero__cta{ animation:ehsFadeUp 500ms cubic-bezier(0.22,1,0.36,1) both; animation-delay:300ms; }
  }
  @keyframes ehsHeroBgIn{ from{ opacity:0; transform:scale(1.06);} to{ opacity:1; transform:scale(1);} }
  @keyframes ehsFadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

  /* ---------- Trust feature cards (moved out of the hero) ---------- */
  .ehs-trust-features{ padding:28px 0 48px; background:var(--ehs-white); }
  .ehs-trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .ehs-trust-card{
    display:flex; flex-direction:column; align-items:flex-start;
    background:var(--ehs-white); border:1px solid var(--ehs-grey-100); border-radius:var(--ehs-radius-lg);
    box-shadow:var(--ehs-shadow-sm); padding:22px 20px;
    transition:transform var(--ehs-transition), box-shadow var(--ehs-transition), border-color var(--ehs-transition);
    position:relative; overflow:hidden;
  }
  .ehs-trust-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--ehs-accent-bar); transform:scaleX(0); transform-origin:left center;
    transition:transform var(--ehs-transition); pointer-events:none;
  }
  .ehs-trust-card__icon{
    width:44px; height:44px; border-radius:13px; flex:none; margin-bottom:12px;
    background:linear-gradient(150deg,var(--ehs-navy-800),var(--ehs-navy-600)); color:var(--ehs-white);
    display:flex; align-items:center; justify-content:center;
  }
  /* Distinct hue per trust card — a small vibrant variation instead of one flat tone. */
  .ehs-trust-card:nth-child(1) .ehs-trust-card__icon{ background:linear-gradient(150deg,#2563EB,#1D4ED8); }
  .ehs-trust-card:nth-child(2) .ehs-trust-card__icon{ background:linear-gradient(150deg,#7C3AED,#6D28D9); }
  .ehs-trust-card:nth-child(3) .ehs-trust-card__icon{ background:linear-gradient(150deg,#EC4899,#DB2777); }
  .ehs-trust-card__icon i.ph{ font-size:20px; transition:transform var(--ehs-transition); }
  .ehs-trust-card__title{ display:block; font-family:var(--ehs-font-head); font-size:14.5px; font-weight:700; color:var(--ehs-ink); }
  .ehs-trust-card__desc{ display:block; font-size:12.5px; color:var(--ehs-grey-600); margin-top:2px; }
  @media (hover:hover) and (pointer:fine){
    .ehs-trust-card:hover{ transform:translateY(-3px); box-shadow:var(--ehs-shadow-lift); border-color:var(--ehs-grey-200); }
    .ehs-trust-card:hover::before{ transform:scaleX(1); }
    .ehs-trust-card:hover .ehs-trust-card__icon i.ph{ transform:scale(1.05); }
  }

  /* ---------- Category grid ---------- */
  .ehs-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .ehs-cat-card{
    text-align:left; background:var(--ehs-white); border:1px solid var(--ehs-grey-100); border-radius:var(--ehs-radius-lg);
    padding:22px; box-shadow:var(--ehs-shadow-sm); transition:transform var(--ehs-transition), box-shadow var(--ehs-transition), border-color var(--ehs-transition);
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
  }
  .ehs-cat-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--ehs-accent-bar); transform:scaleX(0); transform-origin:left center;
    transition:transform var(--ehs-transition); pointer-events:none;
  }
  .ehs-cat-card:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ehs-white), 0 0 0 6px var(--ehs-navy-700); }
  /* Tap feedback for touch devices — the :hover rules below only fire on
     mice/trackpads (hover:hover), so touch screens would otherwise show no
     reaction at all when a category card is tapped. This :active rule is
     not gated behind that media query, so every device gets a visible,
     tactile press animation. */
  .ehs-cat-card.ehs-cat-card:active{ transform:translateY(-1px) scale(0.985); box-shadow:var(--ehs-shadow-sm); transition-duration:120ms; }
  @media (hover:hover) and (pointer:fine){
    .ehs-cat-card:hover{ transform:translateY(-3px); box-shadow:var(--ehs-shadow-lift); border-color:var(--ehs-grey-200); }
    .ehs-cat-card:hover::before{ transform:scaleX(1); }
    .ehs-cat-card:hover .ehs-cat-card__icon i.ph{ transform:scale(1.05); }
  }
  .ehs-cat-card__icon{
    width:48px; height:48px; border-radius:13px; flex:none; margin-bottom:16px;
    background:linear-gradient(150deg,var(--ehs-navy-800),var(--ehs-navy-600)); color:var(--ehs-white);
    display:flex; align-items:center; justify-content:center;
  }
  .ehs-cat-card__title{ font-family:var(--ehs-font-head); font-weight:600; font-size:16px; color:var(--ehs-ink); margin-bottom:4px; }
  .ehs-cat-card__desc{ font-size:13px; color:var(--ehs-grey-600); line-height:1.5; margin-bottom:12px; }
  .ehs-cat-card__count{ margin-top:auto; font-size:12px; font-weight:600; color:var(--ehs-navy-600); }

  /* ---------- Search + filter ---------- */
  .ehs-search-panel{ background:var(--ehs-white); border:1px solid var(--ehs-grey-100); border-radius:var(--ehs-radius-lg); padding:22px; margin-bottom:32px; }
  .ehs-search-bar{
    display:flex; align-items:center; gap:12px; background:var(--ehs-white);
    border:1.5px solid var(--ehs-grey-200); border-radius:var(--ehs-radius-pill); padding:8px 8px 8px 18px;
    transition:border-color var(--ehs-transition), box-shadow var(--ehs-transition);
  }
  .ehs-search-bar:hover{ border-color:var(--ehs-grey-500); }
  .ehs-search-bar:focus-within{ border-color:var(--ehs-navy-600); box-shadow:0 0 0 4px rgba(124,58,237,0.12); }
  .ehs-search-bar i.ph{ flex:none; color:var(--ehs-grey-500); font-size:18px; transition:color var(--ehs-transition); }
  .ehs-search-bar:focus-within i.ph{ color:var(--ehs-navy-700); }
  .ehs-search-bar input{ border:none; outline:none; flex:1; font-size:14.5px; background:transparent; min-width:0; color:var(--ehs-ink); }
  .ehs-filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; align-items:center; }
  .ehs-chip{
    border:1.5px solid var(--ehs-grey-200); background:var(--ehs-white); color:var(--ehs-grey-700);
    font-family:var(--ehs-font-head); font-weight:600; font-size:13px; padding:9px 18px; border-radius:var(--ehs-radius-pill);
    transition:all var(--ehs-transition);
  }
  .ehs-chip:hover{ border-color:var(--ehs-navy-600); color:var(--ehs-navy-700); }
  .ehs-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(124,58,237,0.28); }
  .ehs-chip.is-active{ background:var(--ehs-navy-900); border-color:var(--ehs-navy-900); color:var(--ehs-yellow); }
  .ehs-select{
    border:1.5px solid var(--ehs-grey-200); border-radius:var(--ehs-radius-pill); padding:9px 16px; font-family:var(--ehs-font-head);
    font-weight:600; font-size:13px; color:var(--ehs-navy-800); background:var(--ehs-white); cursor:pointer;
    transition:border-color var(--ehs-transition), box-shadow var(--ehs-transition);
  }
  .ehs-select:hover{ border-color:var(--ehs-navy-600); }
  .ehs-select:focus-visible{ outline:none; border-color:var(--ehs-navy-700); box-shadow:0 0 0 4px rgba(124,58,237,0.14); }
  .ehs-results-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
  .ehs-results-count{ font-size:13.5px; color:var(--ehs-grey-500); }

  /* ---------- Ebook grid + cards ---------- */
  .ehs-ebook-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .ehs-card{
    background:var(--ehs-white); border:1px solid var(--ehs-grey-100); border-radius:var(--ehs-radius-lg);
    box-shadow:var(--ehs-shadow-sm); overflow:hidden; display:flex; flex-direction:column;
    transition:transform var(--ehs-transition), box-shadow var(--ehs-transition), border-color var(--ehs-transition);
    position:relative;
  }
  .ehs-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
    background:var(--ehs-accent-bar); transform:scaleX(0); transform-origin:left center;
    transition:transform var(--ehs-transition); pointer-events:none;
  }
  /* Touch-device tap feedback — see the matching comment on .ehs-cat-card
     above; the :hover rules just below only fire on mouse/trackpad input. */
  .ehs-card.ehs-card:active{ transform:translateY(-1px) scale(0.99); box-shadow:var(--ehs-shadow-sm); transition-duration:120ms; }
  @media (hover:hover) and (pointer:fine){
    .ehs-card:hover{ transform:translateY(-3px); box-shadow:var(--ehs-shadow-lift); border-color:var(--ehs-grey-200); }
    .ehs-card:hover::before{ transform:scaleX(1); }
  }
  .ehs-card__cover-wrap{ padding:26px 22px 16px; display:flex; justify-content:center; background:var(--ehs-grey-50); position:relative; }
  .ehs-card__cover-link{ display:block; }

  .ehs-badge{
    position:absolute; top:14px; left:14px; z-index:2;
    font-family:var(--ehs-font-head); font-weight:700; font-size:10.5px; letter-spacing:0.03em; text-transform:uppercase;
    padding:5px 11px; border-radius:var(--ehs-radius-pill);
  }
  .ehs-badge--free{ background:var(--ehs-green-bg); color:var(--ehs-green); }
  .ehs-badge--premium{ background:var(--ehs-navy-900); color:var(--ehs-yellow); }
  .ehs-badge--new{ background:var(--ehs-blue-bg); color:var(--ehs-blue); }
  .ehs-badge--bestseller{ background:var(--ehs-bestseller-bg); color:var(--ehs-bestseller); }
  .ehs-badge--lg{ font-size:12px; padding:7px 14px; }

  /* 3D book cover with real image (or gradient+title fallback) */
  .ehs-book3d{ position:relative; width:112px; height:156px; transform:perspective(700px) rotateY(-16deg); transition:transform 0.45s cubic-bezier(.4,0,.2,1); }
  .ehs-card:hover .ehs-book3d{ transform:perspective(700px) rotateY(-4deg) translateY(-5px); }
  .ehs-book3d--lg{ width:220px; height:308px; }
  .ehs-book-face{ position:absolute; inset:0; border-radius:4px 9px 9px 4px; overflow:hidden; box-shadow:7px 12px 22px rgba(49,46,129,0.28); background:linear-gradient(155deg,var(--ehs-navy-700),var(--ehs-navy-900)); }
  .ehs-book-face img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ehs-cover-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%), linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0) 18%); }
  .ehs-cover-fallback{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:14px 12px; }
  .ehs-cover-cat{ font-size:9px; font-family:var(--ehs-font-head); font-weight:700; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:0.04em; }
  .ehs-cover-title{ color:var(--ehs-white); font-family:var(--ehs-font-head); font-weight:700; font-size:13px; line-height:1.3; }
  .ehs-book3d--lg .ehs-cover-title{ font-size:20px; }
  .ehs-book-spine-shine{ position:absolute; left:0; top:0; bottom:0; width:9px; background:linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0)); border-radius:4px 0 0 4px; pointer-events:none; }
  .ehs-book-pages{ position:absolute; top:3px; bottom:3px; right:-5px; width:7px; background:repeating-linear-gradient(180deg,#fff,#fff 2px,#e3e6ec 2px,#e3e6ec 3px); border-radius:0 4px 4px 0; box-shadow:2px 2px 6px rgba(49,46,129,0.18); }

  .ehs-card__body{ padding:16px 20px 20px; display:flex; flex-direction:column; flex:1; }
  .ehs-card__cat{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ehs-navy-600); margin-bottom:6px; }
  .ehs-card__title{ font-size:15.5px; font-weight:600; line-height:1.35; margin-bottom:6px; font-family:var(--ehs-font-head); }
  .ehs-card__title a{ transition:color var(--ehs-transition); }
  .ehs-card__title a:hover{ color:var(--ehs-navy-700); }
  /* Clamp to exactly 3 lines regardless of excerpt length, so every card in
     a row stays the same height — the JS-side word-safe truncation
     (truncateWords()) keeps the underlying text reasonably sized, this is
     the visual guarantee. */
  .ehs-card__desc{
    font-size:13px; color:var(--ehs-grey-600); line-height:1.55; margin-bottom:14px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
  }
  .ehs-card__meta{ display:flex; align-items:center; gap:14px; font-size:11.5px; color:var(--ehs-grey-500); margin-bottom:14px; }
  .ehs-card__meta span{ display:flex; align-items:center; gap:5px; }
  .ehs-card__price{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .ehs-price-now{ font-family:var(--ehs-font-head); font-weight:700; font-size:18px; color:var(--ehs-ink); }
  .ehs-price-old{ font-size:12.5px; color:var(--ehs-grey-500); text-decoration:line-through; }
  .ehs-price-off{ font-size:11px; font-weight:700; color:var(--ehs-green); background:var(--ehs-green-bg); padding:2px 7px; border-radius:6px; }
  .ehs-price-free{ font-family:var(--ehs-font-head); font-weight:700; font-size:16px; color:var(--ehs-green); }
  .ehs-card__actions{ display:flex; gap:10px; margin-top:auto; }
  .ehs-card__actions .ehs-btn{ flex:1; padding:10px 12px; font-size:12.5px; }

  .ehs-empty-state{ text-align:center; padding:60px 20px; color:var(--ehs-grey-500); background:var(--ehs-grey-50); border-radius:var(--ehs-radius-lg); }
  .ehs-load-more-wrap{ display:flex; justify-content:center; margin-top:34px; }

  /* ---------- Free section ---------- */
  .ehs-section--free{ background:linear-gradient(180deg, var(--ehs-green-bg) 0%, var(--ehs-white) 100%); }

  /* ---------- Premium section (dark) ---------- */
  .ehs-section--premium{ background:linear-gradient(180deg, var(--ehs-navy-900), var(--ehs-navy-800)); color:var(--ehs-white); position:relative; overflow:hidden; }
  .ehs-section--premium::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(236,72,153,0.16),transparent 70%); top:-180px; left:-120px; pointer-events:none; }
  .ehs-section--premium::after{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(245,158,11,0.14),transparent 70%); bottom:-160px; right:-100px; pointer-events:none; }
  .ehs-section--premium .ehs-container{ position:relative; z-index:1; }
  .ehs-section--premium .ehs-section__title{ color:var(--ehs-white); }
  .ehs-section--premium .ehs-section__sub{ color:rgba(255,255,255,0.65); }
  .ehs-section--premium .ehs-card{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1); }
  .ehs-section--premium .ehs-card__cover-wrap{ background:rgba(255,255,255,0.02); }
  .ehs-section--premium .ehs-card__title,
  .ehs-section--premium .ehs-price-now{ color:var(--ehs-white); }
  .ehs-section--premium .ehs-card__desc,
  .ehs-section--premium .ehs-card__meta{ color:rgba(255,255,255,0.55); }
  .ehs-section--premium .ehs-card__cat{ color:var(--ehs-yellow); }
  .ehs-section--premium .ehs-btn--ghost{ background:rgba(255,255,255,0.08); color:var(--ehs-white); }
  .ehs-section--premium .ehs-btn--ghost:hover{ background:rgba(255,255,255,0.16); }

  /* ---------- Why choose ---------- */
  .ehs-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .ehs-why-card{ padding:16px 0; }
  .ehs-why-icon{
    width:52px; height:52px; border-radius:15px; background:var(--ehs-grey-50); border:1px solid var(--ehs-grey-100);
    display:flex; align-items:center; justify-content:center; color:var(--ehs-navy-700); margin-bottom:16px;
    transition:transform var(--ehs-transition), background var(--ehs-transition), color var(--ehs-transition), border-color var(--ehs-transition);
  }
  /* Each "why choose" card gets its own hue — quiet tint at rest, solid on hover. */
  .ehs-why-card:nth-child(1) .ehs-why-icon{ background:rgba(79,70,229,0.1); border-color:rgba(79,70,229,0.18); color:#4F46E5; }
  .ehs-why-card:nth-child(2) .ehs-why-icon{ background:rgba(13,148,136,0.1); border-color:rgba(13,148,136,0.18); color:#0D9488; }
  .ehs-why-card:nth-child(3) .ehs-why-icon{ background:rgba(249,115,22,0.1); border-color:rgba(249,115,22,0.18); color:#F97316; }
  .ehs-why-card:nth-child(4) .ehs-why-icon{ background:rgba(22,163,74,0.1); border-color:rgba(22,163,74,0.18); color:#16A34A; }
  @media (hover:hover) and (pointer:fine){
    .ehs-why-card:hover .ehs-why-icon{ transform:translateY(-4px); color:var(--ehs-white); }
    .ehs-why-card:nth-child(1):hover .ehs-why-icon{ background:#4F46E5; border-color:#4F46E5; }
    .ehs-why-card:nth-child(2):hover .ehs-why-icon{ background:#0D9488; border-color:#0D9488; }
    .ehs-why-card:nth-child(3):hover .ehs-why-icon{ background:#F97316; border-color:#F97316; }
    .ehs-why-card:nth-child(4):hover .ehs-why-icon{ background:#16A34A; border-color:#16A34A; }
    .ehs-why-card:hover .ehs-why-icon i.ph{ transform:scale(1.05); }
  }
  .ehs-why-card h3{ font-size:16px; font-weight:600; margin-bottom:6px; }
  .ehs-why-card p{ font-size:13px; color:var(--ehs-grey-600); line-height:1.55; }

  /* ---------- Final CTA ---------- */
  .ehs-final-cta-wrap{ padding:0 0 64px; }
  .ehs-final-cta{
    background:linear-gradient(135deg, var(--ehs-navy-900), var(--ehs-navy-700));
    border-radius:26px; padding:64px 40px; text-align:center; color:var(--ehs-white); position:relative; overflow:hidden;
  }
  .ehs-final-cta::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(245,158,11,0.22),transparent 70%); top:-140px; right:-100px; pointer-events:none; }
  .ehs-final-cta::after{ content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(236,72,153,0.2),transparent 70%); bottom:-150px; left:-90px; pointer-events:none; }
  .ehs-final-cta-wrap .ehs-final-cta h2{ position:relative; font-size:clamp(24px,3.8vw,36px); color:var(--ehs-white); }
  .ehs-final-cta p{ position:relative; max-width:540px; margin:14px auto 0; color:rgba(255,255,255,0.75); font-size:15px; line-height:1.6; }
  .ehs-final-cta .ehs-btn{ position:relative; margin-top:26px; }

  /* ---------- Loading / setup / error states (standalone-page only) ---------- */
  .ehs-status-block{ text-align:center; padding:70px 20px; color:var(--ehs-grey-500); }
  .ehs-status-block__spinner{
    width:38px; height:38px; margin:0 auto 18px; border-radius:50%;
    border:3px solid var(--ehs-grey-100);
    border-top-color:var(--ehs-yellow); border-right-color:var(--ehs-navy-700);
    box-shadow:0 0 16px rgba(245,158,11,0.16);
    animation:ehsSpin 0.85s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
  }
  @keyframes ehsSpin{ to{ transform:rotate(360deg); } }
  .ehs-status-block p{ animation:ehsPulseText 1.7s ease-in-out infinite; }
  @keyframes ehsPulseText{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }
  .ehs-setup-banner{
    background:#FFF6DA; border:1px solid var(--ehs-yellow-dark); color:#6B4E00;
    border-radius:var(--ehs-radius-md); padding:16px 20px; font-size:13.5px; line-height:1.6;
    max-width:var(--ehs-container); margin:18px auto 0;
  }
  .ehs-setup-banner code{ background:rgba(0,0,0,0.06); padding:2px 6px; border-radius:4px; }
  .ehs-error-banner{
    background:#FDECEC; border:1px solid #E4A3A3; color:#8A1F1F;
    border-radius:var(--ehs-radius-md); padding:16px 20px; font-size:13.5px; line-height:1.6;
  }

  /* ---------- Phosphor icon sizing (glyphs replace the former inline SVGs 1:1) ---------- */
  .ehs-ebook-store i.ph{ line-height:1; display:inline-block; }
  .ehs-cat-card__icon i.ph{ font-size:24px; transition:transform var(--ehs-transition); }
  .ehs-card__meta i.ph{ font-size:13px; }
  .ehs-why-icon i.ph{ font-size:24px; transition:transform var(--ehs-transition); }

  /* =============================================================
     RESPONSIVE
     ============================================================= */
  @media (max-width:1080px){
    .ehs-cat-grid{ grid-template-columns:repeat(3,1fr); }
    .ehs-ebook-grid{ grid-template-columns:repeat(3,1fr); }
    .ehs-why-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:768px){
    .ehs-container{ padding:0 18px; }
    .ehs-hero{ padding:56px 0 40px; }
    .ehs-hero .ehs-hero__title{ margin-top:12px; }
    .ehs-hero__sub{ margin-top:10px; }
    .ehs-hero__cta{ margin-top:20px; }
    /* Hero copy spans most of the width on smaller screens, so keep the
       scrim strong across more of the photo here rather than fading it
       out by mid-width — text legibility takes priority once there's no
       room for the photo to "breathe" beside it. */
    .ehs-hero__overlay{ background:linear-gradient(180deg, rgba(8,14,28,0.78) 0%, rgba(8,14,28,0.62) 55%, rgba(8,14,28,0.68) 100%); }
    .ehs-trust-features{ padding:18px 0 36px; }
    .ehs-cat-grid{ grid-template-columns:repeat(2,1fr); }
    .ehs-ebook-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
    .ehs-why-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
    .ehs-final-cta{ padding:44px 24px; border-radius:20px; }
  }
  @media (max-width:560px){
    .ehs-cat-grid{ grid-template-columns:1fr; }
    .ehs-ebook-grid{ grid-template-columns:1fr; }
    .ehs-why-grid{ grid-template-columns:1fr; }
    .ehs-hero__cta{ flex-direction:column; align-items:stretch; }
    .ehs-hero__cta .ehs-btn{ width:100%; }
    .ehs-search-bar{ flex-wrap:wrap; border-radius:var(--ehs-radius-md); padding:12px 14px; }
    .ehs-search-bar input{ width:100%; order:2; flex:1 1 100%; padding:8px 0; }
    .ehs-search-bar button{ order:3; width:100%; }
    .ehs-filter-row{ flex-wrap:wrap; }
    .ehs-select{ width:100%; }
    .ehs-card__actions{ flex-direction:column; }
  }
  @media (max-width:480px){
    .ehs-hero{ padding:44px 0 32px; }
    .ehs-hero .ehs-hero__title{ margin-top:10px; }
    .ehs-hero__sub{ margin-top:8px; }
    .ehs-hero__cta{ margin-top:18px; gap:10px; }
    .ehs-trust-features{ padding:14px 0 28px; }
    .ehs-trust-grid{ gap:10px; }
    .ehs-trust-card{ padding:14px 10px; border-radius:var(--ehs-radius-md); align-items:center; text-align:center; }
    .ehs-trust-card__icon{ width:34px; height:34px; border-radius:10px; margin-bottom:8px; }
    .ehs-trust-card__icon i.ph{ font-size:16px; }
    .ehs-trust-card__title{ font-size:11px; line-height:1.25; }
    .ehs-trust-card__desc{ font-size:9.5px; margin-top:3px; }
  }

  /* ---------- Scroll-reveal: applied site-wide (trust cards, section
     headers, category cards, search panel, every ebook card, "why choose"
     cards, final CTA) via store-frontend.js's IntersectionObserver, which
     adds .is-visible (and a small staggered transition-delay) as each
     element scrolls into view. Gated behind prefers-reduced-motion so
     elements are simply visible immediately — no hidden state, no
     dependency on JS running — when the visitor has asked for less
     motion; this also means a JS failure never leaves content stuck
     invisible for those visitors. */
  @media (prefers-reduced-motion:no-preference){
    .ehs-reveal{
      opacity:0;
      transform:translateY(24px);
      transition:opacity 650ms cubic-bezier(0.22,1,0.36,1), transform 650ms cubic-bezier(0.22,1,0.36,1);
    }
    .ehs-reveal.is-visible{ opacity:1; transform:translateY(0); }
  }

  /* ---------- Reduced motion: shrink (not remove) so entrance-animated
     elements still resolve to their visible end state instantly. ---------- */
  @media (prefers-reduced-motion:reduce){
    .ehs-ebook-store{ scroll-behavior:auto; }
    .ehs-ebook-store *,
    .ehs-ebook-store *::before,
    .ehs-ebook-store *::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
    }
  }