/*!
Theme Name: البوابة التعليمية - المدونة
Description: قالب مدونة عربي RTL مبني ليتماشى مع هوية متجر البوابة التعليمية e-portal.ae
Version: 1.0.0
Text Domain: eportal-blog
--------------------------------------------------------------------
جاهز للتحويل إلى قالب ووردبريس (انظر ملف README.md لدليل التحويل)
--------------------------------------------------------------------
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Brand colors — derived from e-portal.ae identity */
  --color-primary:        #437c39;   /* Teal - trust / education */
  --color-primary-dark:   #326529;
  --color-primary-light:  #E4F3F2;
  --color-accent:         #F2994A;   /* Orange - CTA / price */
  --color-accent-dark:    #D97B24;
  --color-accent-light:   #FDEEDD;
  --color-sale:           #E4572E;   /* Coral - badges / discounts */

  --color-bg:             #FBF8F3;   /* Warm cream background */
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F5F1E8;

  --color-text:           #1C2B33;
  --color-text-muted:     #6B7280;
  --color-text-light:     #98A2AE;
  --color-border:         #EAE4D8;
  --color-border-strong:  #DCD4C4;

  --color-success:        #1E9E6B;
  --color-star:           #F2A93B;

  /* Typography */
  --font-heading: 'Cairo', 'Tahoma', sans-serif;
  --font-body:    'Tajawal', 'Tahoma', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  2.875rem;

  /* Spacing scale (8px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(28,43,51,.06);
  --shadow-md: 0 8px 24px rgba(28,43,51,.09);
  --shadow-lg: 0 16px 40px rgba(28,43,51,.14);

  --container: 1240px;
  --header-h: 108px;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-text);
  font-size:var(--fs-base);
  line-height:1.85;
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none}
button{cursor:pointer}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:800;line-height:1.35;color:var(--color-text)}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
@media(max-width:640px){.container{padding:0 var(--sp-4)}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Skip link */
.skip-link{position:absolute;right:-999px;top:0;background:var(--color-primary);color:#fff;padding:.75rem 1.5rem;z-index:9999;border-radius:0 0 0 8px}
.skip-link:focus{right:0}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */
.section{padding:var(--sp-8) 0}
@media(max-width:768px){.section{padding:var(--sp-7) 0}}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.section-head .eyebrow{color:var(--color-accent-dark);font-weight:700;font-size:var(--fs-sm);display:block;margin-bottom:var(--sp-2)}
.section-head h2{font-size:var(--fs-2xl)}
.section-head p{color:var(--color-text-muted);margin-top:var(--sp-2)}
.view-all{display:inline-flex;align-items:center;gap:.4rem;color:var(--color-primary);font-weight:700;white-space:nowrap;border-bottom:2px solid transparent;transition:border-color .2s}
.view-all:hover{border-color:var(--color-primary)}
.text-muted{color:var(--color-text-muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.75rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:var(--fs-sm);white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  border:2px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-accent-dark);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--color-primary);color:#fff}
.btn-secondary:hover{background:var(--color-primary-dark)}
.btn-outline{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-ghost{background:var(--color-surface-alt);color:var(--color-text)}
.btn-ghost:hover{background:var(--color-border)}
.btn-sm{padding:.55rem 1.25rem;font-size:var(--fs-xs)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ==========================================================================
   5. BADGES / TAGS
   ========================================================================== */
.badge{display:inline-block;padding:.3rem .8rem;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700}
.badge-sale{background:var(--color-sale);color:#fff}
.badge-new{background:var(--color-primary);color:#fff}
.badge-free{background:var(--color-success);color:#fff}
.tag{display:inline-block;padding:.35rem 1rem;border-radius:var(--radius-pill);background:var(--color-primary-light);color:var(--color-primary-dark);font-size:var(--fs-xs);font-weight:700;transition:background .2s}
.tag:hover{background:var(--color-primary);color:#fff}
.category-pill{display:inline-block;padding:.3rem .9rem;border-radius:var(--radius-pill);background:var(--color-accent-light);color:var(--color-accent-dark);font-size:var(--fs-xs);font-weight:800}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header{background:var(--color-surface);position:sticky;top:0;z-index:500;box-shadow:0 1px 0 var(--color-border)}
.header-topbar{background:var(--color-primary-dark);color:#fff;font-size:var(--fs-xs)}
.header-topbar .container{display:flex;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}
.topbar-links{display:flex;gap:var(--sp-5);align-items:center;direction: ltr;}
.topbar-links a{opacity:.9;display:flex;align-items:center;gap:.35rem}
.topbar-links a:hover{opacity:1;text-decoration:underline}
.topbar-social{display:flex;gap:var(--sp-3)}
.topbar-social a{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.topbar-social a:hover{background:var(--color-accent)}

.header-main{padding:var(--sp-5) 0}
.header-main .container{display:flex;align-items:center;gap:var(--sp-6)}
.site-logo{flex-shrink:0;display:flex;align-items:center;gap:.6rem}
.site-logo .logo-mark{width:86px;height:86px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-heading);font-weight:900;font-size:1.15rem}
.site-logo .logo-text{font-family:var(--font-heading);font-weight:800;font-size:1.2rem;color:var(--color-text);line-height:1.2}
.site-logo .logo-text span{display:block;font-size:.68rem;font-weight:600;color:var(--color-text-muted)}

.header-search{flex:1;max-width:520px;position:relative}
.header-search input{width:100%;padding:.85rem 1.2rem .85rem 3.2rem;border:2px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface-alt);font-size:var(--fs-sm);transition:border-color .2s}
.header-search input:focus{border-color:var(--color-primary);background:#fff}
.header-search button{position:absolute;left:.35rem;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center}

.header-actions{display:flex;align-items:center;gap:var(--sp-4);margin-inline-start:auto}
.header-action-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.68rem;color:var(--color-text);font-weight:700}
.header-action-btn svg{width:22px;height:22px}
.header-action-btn .count{position:absolute;top:-6px;left:-8px;background:var(--color-accent);color:#fff;width:18px;height:18px;border-radius:50%;font-size:.62rem;display:flex;align-items:center;justify-content:center;font-weight:800}
.hamburger{display:none;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-surface-alt);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.hamburger span{display:block;width:20px;height:2px;background:var(--color-text);border-radius:2px}

/* Main nav */
.main-nav{border-top:1px solid var(--color-border)}
.main-nav .container{display:flex;align-items:center;gap:var(--sp-6)}
.nav-list{display:flex;align-items:center}
.nav-list>li{position:relative}
.nav-list>li>a{display:flex;align-items:center;gap:.3rem;padding:.95rem var(--sp-4);font-weight:700;font-size:var(--fs-sm);color:var(--color-text);transition:color .2s}
.nav-list>li>a:hover,.nav-list>li.current-menu-item>a{color:var(--color-primary)}
.nav-list>li.has-children>a svg{width:12px;transition:transform .2s}
.nav-list>li:hover.has-children>a svg{transform:rotate(180deg)}

.sub-menu{position:absolute;top:100%;right:0;min-width:230px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.6rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s ease;z-index:60}
.nav-list>li.has-children:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu li a{display:block;padding:.65rem .9rem;border-radius:var(--radius-sm);font-size:var(--fs-sm)}
.sub-menu li a:hover{background:var(--color-primary-light);color:var(--color-primary-dark)}

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0;z-index:1000;visibility:hidden}
.mobile-drawer.is-open{visibility:visible}
.drawer-overlay{position:absolute;inset:0;background:rgba(20,30,35,.55);opacity:0;transition:opacity .25s}
.mobile-drawer.is-open .drawer-overlay{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:88%;max-width:360px;background:#fff;padding:var(--sp-5);overflow-y:auto;transform:translateX(100%);transition:transform .3s ease}
.mobile-drawer.is-open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5)}
.drawer-close{width:40px;height:40px;border-radius:50%;background:var(--color-surface-alt);display:flex;align-items:center;justify-content:center}
.drawer-nav li a{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid var(--color-border);font-weight:700}
.drawer-sub{padding-inline-start:var(--sp-4);display:none}
.drawer-sub.is-open{display:block}
.drawer-sub li a{border-bottom:none;padding:.6rem 0;font-weight:500;color:var(--color-text-muted)}

@media(max-width:960px){
  .header-search{display:none}
  .main-nav{display:none}
  .hamburger{display:flex}
}
@media(max-width:640px){
  .header-action-btn span.label{display:none}
}

/* ==========================================================================
   7. HERO / FEATURED ARTICLE
   ========================================================================== */
.featured-hero{padding:var(--sp-7) 0 var(--sp-8)}
.featured-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-5)}
.featured-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;box-shadow:var(--shadow-md)}
.featured-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.featured-main::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,25,28,.88) 0%,rgba(10,25,28,.35) 55%,rgba(10,25,28,0) 100%);z-index:2}
.featured-main .featured-content{position:relative;z-index:3;padding:var(--sp-6);color:#fff}
.featured-main h1,.featured-main h2{color:#fff;font-size:var(--fs-2xl);margin:var(--sp-3) 0}
.featured-main .post-meta{color:rgba(255,255,255,.85)}
.featured-main .post-meta a{color:#fff}
.featured-side{display:flex;flex-direction:column;gap:var(--sp-4)}
.featured-side-card{display:flex;gap:var(--sp-3);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--sp-3);box-shadow:var(--shadow-sm);flex:1}
.featured-side-card img{width:110px;height:100%;min-height:100px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0}
.featured-side-card h3{font-size:var(--fs-sm);margin-bottom:.4rem}
@media(max-width:900px){.featured-grid{grid-template-columns:1fr}.featured-main{min-height:320px}}

/* ==========================================================================
   8. POST CARDS / GRID
   ========================================================================== */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.posts-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.posts-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.posts-grid,.posts-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts-grid,.posts-grid.cols-2,.posts-grid.cols-4{grid-template-columns:1fr}}

.post-card{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease;display:flex;flex-direction:column;height:100%}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.post-card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card-media img{transform:scale(1.06)}
.post-card-media .category-pill{position:absolute;top:var(--sp-3);right:var(--sp-3)}
.post-card-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.post-card h3{font-size:var(--fs-md)}
.post-card h3 a:hover{color:var(--color-primary)}
.post-card p{color:var(--color-text-muted);font-size:var(--fs-sm);flex:1}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;font-size:var(--fs-xs);color:var(--color-text-muted)}
.post-meta span{display:flex;align-items:center;gap:.3rem}
.post-meta svg{width:14px;height:14px}
.post-author-mini{display:flex;align-items:center;gap:.5rem}
.post-author-mini img{width:26px;height:26px;border-radius:50%;object-fit:cover}

.post-card.horizontal{flex-direction:row}
.post-card.horizontal .post-card-media{width:38%;aspect-ratio:auto}
.post-card.horizontal .post-card-body{width:62%}
@media(max-width:560px){.post-card.horizontal{flex-direction:column}.post-card.horizontal .post-card-media,.post-card.horizontal .post-card-body{width:100%}}

/* Popular list (numbered) */
.popular-list{display:flex;flex-direction:column;gap:var(--sp-4)}
.popular-item{display:flex;align-items:center;gap:var(--sp-4)}
.popular-item .rank{font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:900;color:var(--color-primary-light);-webkit-text-stroke:1.5px var(--color-primary);width:44px;flex-shrink:0;text-align:center}
.popular-item img{width:74px;height:74px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.popular-item h4{font-size:var(--fs-sm)}

/* ==========================================================================
   9. CATEGORIES SECTION
   ========================================================================== */
.categories-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}
@media(max-width:960px){.categories-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.categories-grid{grid-template-columns:repeat(2,1fr)}}
.category-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-3);text-align:center;transition:all .25s ease}
.category-card:hover{border-color:var(--color-primary);background:var(--color-primary-light);transform:translateY(-4px)}
.category-card .icon{width:52px;height:52px;margin:0 auto var(--sp-3);border-radius:50%;background:var(--color-accent-light);display:flex;align-items:center;justify-content:center;color:var(--color-accent-dark)}
.category-card h3{font-size:var(--fs-sm)}
.category-card .count{color:var(--color-text-muted);font-size:var(--fs-xs);margin-top:.25rem;display:block}

/* ==========================================================================
   10. NEWSLETTER
   ========================================================================== */
.newsletter{background:linear-gradient(120deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:var(--radius-lg);padding:var(--sp-7);color:#fff;position:relative;overflow:hidden}
.newsletter::before{content:"";position:absolute;width:340px;height:340px;background:rgba(255,255,255,.06);border-radius:50%;top:-160px;left:-100px}
.newsletter-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.newsletter h2{color:#fff;font-size:var(--fs-xl);max-width:420px}
.newsletter p{opacity:.9;margin-top:var(--sp-2);max-width:420px}
.newsletter-form{display:flex;gap:.6rem;flex:1;min-width:300px;max-width:460px}
.newsletter-form input{flex:1;padding:.9rem 1.2rem;border-radius:var(--radius-pill);border: 1px solid white}
.newsletter-form .btn{flex-shrink:0}
.newsletter-form input{flex:1;padding:.9rem 1.2rem;border-radius:var(--radius-pill);border: 1px solid white}
#newsletter-email::placeholder {color: #fff;}
/* ==========================================================================
   11. AD SLOTS
   ========================================================================== */
.ad-slot{display:flex;align-items:center;justify-content:center;background:var(--color-surface-alt);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-light);font-size:var(--fs-xs);text-align:center;overflow:hidden;position:relative}
.ad-slot::before{content:"إعلان";position:absolute;top:6px;right:10px;font-size:.62rem;color:var(--color-text-light)}
.ad-slot-header{width:100%;min-height:100px;margin:var(--sp-4) 0}
.ad-slot-content{width:100%;min-height:120px;margin:var(--sp-6) 0}
.ad-slot-sidebar{width:100%;min-height:280px;margin-bottom:var(--sp-5)}
.ad-slot-grid{min-height:220px}
.ad-slot-footer{width:100%;min-height:100px;margin-top:var(--sp-6)}
@media(max-width:640px){.ad-slot-sidebar{min-height:200px}}

/* ==========================================================================
   12. LAYOUT: content + sidebar
   ========================================================================== */
.content-layout{display:grid;grid-template-columns:2.3fr 1fr;gap:var(--sp-7);align-items:start}
@media(max-width:960px){.content-layout{grid-template-columns:1fr}}
.sidebar{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:var(--sp-6)}
.widget{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.widget h3{font-size:var(--fs-md);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:2px solid var(--color-primary-light)}
.widget-tags{display:flex;flex-wrap:wrap;gap:.5rem}

/* Breadcrumbs */
.breadcrumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--color-text-muted);padding:var(--sp-4) 0}
.breadcrumbs a:hover{color:var(--color-primary)}
.breadcrumbs svg{width:11px;transform:scaleX(-1)}

/* Page header (archives, pages) */
.page-header{background:var(--color-surface-alt);padding:var(--sp-7) 0;text-align:center;border-bottom:1px solid var(--color-border)}
.page-header h1{font-size:var(--fs-2xl)}
.page-header p{color:var(--color-text-muted);max-width:640px;margin:var(--sp-3) auto 0}
.page-header .post-count{margin-top:var(--sp-3)}

/* ==========================================================================
   13. SINGLE POST
   ========================================================================== */
.single-header{padding:var(--sp-7) 0 var(--sp-5)}
.single-header .category-pill{margin-bottom:var(--sp-3)}
.single-header h1{font-size:var(--fs-2xl);max-width:900px}
@media(min-width:768px){.single-header h1{font-size:var(--fs-3xl)}}
.single-excerpt{color:var(--color-text-muted);font-size:var(--fs-md);margin-top:var(--sp-3);max-width:820px}

.single-meta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--color-border)}
.author-box-mini{display:flex;align-items:center;gap:.8rem}
.author-box-mini img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.author-box-mini strong{display:block;font-size:var(--fs-sm)}
.author-box-mini span{font-size:var(--fs-xs);color:var(--color-text-muted)}
.meta-stats{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.meta-stats span{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);color:var(--color-text-muted)}
.meta-stats svg{width:16px;height:16px}

.featured-image{border-radius:var(--radius-lg);overflow:hidden;margin:var(--sp-6) 0;box-shadow:var(--shadow-md)}
.featured-image img{width:100%;aspect-ratio:16/8;object-fit:cover}

/* Table of contents */
.toc-box{background:var(--color-primary-light);border-radius:var(--radius-md);padding:var(--sp-5);margin-bottom:var(--sp-6)}
.toc-box summary{font-family:var(--font-heading);font-weight:800;cursor:pointer;font-size:var(--fs-md);color:var(--color-primary-dark);display:flex;align-items:center;gap:.5rem}
.toc-box ol{margin-top:var(--sp-4);padding-inline-start:var(--sp-5);list-style:decimal;display:flex;flex-direction:column;gap:.5rem}
.toc-box a{color:var(--color-primary-dark);font-weight:600;font-size:var(--fs-sm)}
.toc-box a:hover{text-decoration:underline}

/* Article body typography */
.article-body{font-size:1.05rem;line-height:1.95;color:var(--color-text)}
.article-body>*+*{margin-top:var(--sp-5)}
.article-body h2{font-size:var(--fs-xl);margin-top:var(--sp-7);scroll-margin-top:130px}
.article-body h3{font-size:var(--fs-lg);margin-top:var(--sp-6);scroll-margin-top:130px}
.article-body p{margin-top:var(--sp-4)}
.article-body ul,.article-body ol{padding-inline-start:var(--sp-5);display:flex;flex-direction:column;gap:.6rem}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body img{border-radius:var(--radius-md);width:100%}
.article-body figcaption{text-align:center;font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:.5rem}
.article-body blockquote{border-inline-start:4px solid var(--color-accent);background:var(--color-accent-light);padding:var(--sp-5);border-radius:0 var(--radius-md) var(--radius-md) 0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-md);color:var(--color-text)}
.article-body a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.article-body strong{font-weight:800}

/* Share buttons */
.share-bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-5) 0;margin:var(--sp-6) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.share-list{display:flex;gap:.6rem}
.share-list a{width:40px;height:40px;border-radius:50%;background:var(--color-surface-alt);display:flex;align-items:center;justify-content:center;transition:all .2s}
.share-list a:hover{background:var(--color-primary);color:#fff}

/* Author box full */
.author-box{display:flex;gap:var(--sp-5);background:var(--color-surface-alt);border-radius:var(--radius-md);padding:var(--sp-5);align-items:flex-start;flex-wrap:wrap}
.author-box img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.author-box h3{font-size:var(--fs-md);margin-bottom:.3rem}
.author-box .role{color:var(--color-primary);font-size:var(--fs-xs);font-weight:700;margin-bottom:.6rem;display:block}
.author-box p{color:var(--color-text-muted);font-size:var(--fs-sm)}
.author-social{display:flex;gap:.5rem;margin-top:var(--sp-3)}
.author-social a{width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}

/* Comments */
.comments-section h2{font-size:var(--fs-xl);margin-bottom:var(--sp-5)}
.comment-list{display:flex;flex-direction:column;gap:var(--sp-5)}
.comment{display:flex;gap:var(--sp-4)}
.comment img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
.comment-body{flex:1;background:var(--color-surface);border-radius:var(--radius-md);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.comment-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.comment-head strong{font-size:var(--fs-sm)}
.comment-head time{font-size:var(--fs-xs);color:var(--color-text-muted)}
.comment-body p{font-size:var(--fs-sm);color:var(--color-text-muted)}
.comment-reply-btn{margin-top:.6rem;font-size:var(--fs-xs);font-weight:700;color:var(--color-primary)}
.comment.is-reply{padding-inline-start:calc(52px + var(--sp-4))}

.comment-form{margin-top:var(--sp-6);background:var(--color-surface);padding:var(--sp-5);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column;gap:.4rem}
.form-field label{font-size:var(--fs-sm);font-weight:700}
.form-field input,.form-field textarea{padding:.85rem 1rem;border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-alt);font-size:var(--fs-sm)}
.form-field input:focus,.form-field textarea:focus{border-color:var(--color-primary);background:#fff}
.form-field textarea{min-height:130px;resize:vertical}

/* ==========================================================================
   14. E-COMMERCE / CONVERSION COMPONENTS
   ========================================================================== */

/* Product card (WooCommerce-ready) */
.product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all .25s ease;position:relative}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:transparent}
.product-card-media{position:relative;aspect-ratio:1/1;background:var(--color-surface-alt)}
.product-card-media img{width:100%;height:100%;object-fit:contain;padding:var(--sp-4)}
.product-card-media .badge{position:absolute;top:var(--sp-3);right:var(--sp-3)}
.product-card-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:.5rem}
.product-card-body .cat{font-size:var(--fs-xs);color:var(--color-primary);font-weight:700}
.product-card-body h3{font-size:var(--fs-sm);font-weight:700;font-family:var(--font-body)}
.product-card-body p{font-size:var(--fs-xs);color:var(--color-text-muted)}
.product-price{display:flex;align-items:baseline;gap:.5rem;font-family:var(--font-heading)}
.product-price .price{font-size:var(--fs-md);font-weight:800;color:var(--color-accent-dark)}
.product-price .old-price{font-size:var(--fs-sm);color:var(--color-text-light);text-decoration:line-through}
.product-rating{display:flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);color:var(--color-star)}
.product-rating span{color:var(--color-text-muted)}
.product-card .btn{margin-top:.3rem}

/* Product recommendation inline card (inside article) */
.product-recommendation{display:flex;gap:var(--sp-5);align-items:center;background:var(--color-surface);border:2px solid var(--color-primary-light);border-radius:var(--radius-lg);padding:var(--sp-5);margin:var(--sp-6) 0;flex-wrap:wrap}
.product-recommendation img{width:130px;height:130px;object-fit:contain;background:var(--color-surface-alt);border-radius:var(--radius-md);flex-shrink:0;padding:var(--sp-2)}
.product-recommendation .rec-body{flex:1;min-width:220px}
.product-recommendation .rec-label{font-size:var(--fs-xs);color:var(--color-accent-dark);font-weight:800;display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.product-recommendation h4{font-size:var(--fs-md);margin-bottom:.4rem}
.product-recommendation p{color:var(--color-text-muted);font-size:var(--fs-sm);margin-bottom:var(--sp-3)}
.product-recommendation .rec-footer{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}

/* Featured product block (highlighted, inside article) */
.product-banner{background:linear-gradient(120deg,var(--color-accent-light) 0%,#fff 70%);border-radius:var(--radius-lg);padding:var(--sp-6);margin:var(--sp-7) 0;display:grid;grid-template-columns:220px 1fr;gap:var(--sp-6);align-items:center;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.product-banner img{width:100%;border-radius:var(--radius-md)}
.product-banner .eyebrow{color:var(--color-accent-dark);font-weight:800;font-size:var(--fs-xs);margin-bottom:.4rem;display:block}
.product-banner h3{font-size:var(--fs-lg);margin-bottom:.5rem}
.product-banner p{color:var(--color-text-muted);margin-bottom:var(--sp-4)}
.product-banner .features{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--sp-4)}
.product-banner .features li{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);background:#fff;padding:.4rem .8rem;border-radius:var(--radius-pill);font-weight:700}
@media(max-width:640px){.product-banner{grid-template-columns:1fr;text-align:center}.product-banner img{max-width:180px;margin:0 auto}.product-banner .features{justify-content:center}}

/* Sticky product banner (in-article, follows scroll) */
.sticky-product-banner{position:sticky;bottom:0;z-index:80;background:var(--color-primary-dark);color:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:var(--sp-4) var(--sp-5);display:flex;align-items:center;gap:var(--sp-4);box-shadow:var(--shadow-lg);margin-top:var(--sp-7)}
.sticky-product-banner img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:var(--radius-sm);flex-shrink:0}
.sticky-product-banner .info{flex:1;min-width:0}
.sticky-product-banner strong{display:block;font-size:var(--fs-sm)}
.sticky-product-banner span{font-size:var(--fs-xs);opacity:.8}
.sticky-product-banner .close-sticky{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:560px){.sticky-product-banner span{display:none}}

/* Comparison table */
.comparison-wrap{overflow-x:auto;margin:var(--sp-6) 0;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.comparison-table{width:100%;border-collapse:collapse;background:var(--color-surface);min-width:640px}
.comparison-table th,.comparison-table td{padding:var(--sp-4);text-align:center;border-bottom:1px solid var(--color-border)}
.comparison-table th:first-child,.comparison-table td:first-child{text-align:start;font-weight:700}
.comparison-table thead th{background:var(--color-primary-light);font-family:var(--font-heading);color:var(--color-primary-dark)}
.comparison-table thead th img{width:70px;height:70px;object-fit:contain;margin:0 auto .5rem}
.comparison-table tbody tr:hover{background:var(--color-surface-alt)}
.comparison-table .check{color:var(--color-success);font-size:1.2rem}
.comparison-table .cross{color:var(--color-text-light);font-size:1.2rem}
.comparison-table .best-value{position:relative;background:var(--color-accent-light)}

/* Shop CTA section */
.shop-cta{background:var(--color-text);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-7);text-align:center;margin:var(--sp-7) 0}
.shop-cta h2{color:#fff;font-size:var(--fs-xl);margin-bottom:var(--sp-3)}
.shop-cta p{opacity:.85;max-width:520px;margin:0 auto var(--sp-5)}
.shop-cta .cta-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}

/* Related products */
.related-products{margin:var(--sp-7) 0}
.related-products h2{font-size:var(--fs-lg);margin-bottom:var(--sp-5)}

/* Promo / campaign banner */
.promo-banner{background:var(--color-sale);color:#fff;border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-6);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:var(--sp-6) 0}
.promo-banner strong{font-family:var(--font-heading);font-size:var(--fs-md)}
.promo-banner .btn{background:#fff;color:var(--color-sale)}
.promo-banner .btn:hover{background:var(--color-text);color:#fff}

/* Related articles */
.related-articles{margin-top:var(--sp-8)}

/* ==========================================================================
   15. PAGINATION
   ========================================================================== */
.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:var(--sp-7);flex-wrap:wrap}
.pagination a,.pagination span{min-width:42px;height:42px;padding:0 .6rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);background:var(--color-surface);border:1px solid var(--color-border)}
.pagination a:hover{border-color:var(--color-primary);color:var(--color-primary)}
.pagination .current,.pagination .page-numbers.current{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.pagination .dots,.pagination .page-numbers.dots{border:none;background:none}

/* ==========================================================================
   16. SEARCH PAGE
   ========================================================================== */
.search-hero{background:var(--color-primary);padding:var(--sp-8) 0;text-align:center;color:#fff}
.search-hero h1{color:#fff;font-size:var(--fs-2xl);margin-bottom:var(--sp-5)}
.search-hero-form{max-width:600px;margin:0 auto;position:relative}
.search-hero-form input{width:100%;padding:1.1rem 1.5rem 1.1rem 4rem;border-radius:var(--radius-pill);border:none;font-size:var(--fs-md)}
.search-hero-form button{position:absolute;left:.4rem;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center}
.search-results-count{color:var(--color-text-muted);margin:var(--sp-5) 0}
.search-results-count strong{color:var(--color-text)}

.empty-state{text-align:center;padding:var(--sp-9) var(--sp-5)}
.empty-state .icon{width:96px;height:96px;margin:0 auto var(--sp-5);color:var(--color-primary-light);background:var(--color-primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary)}
.empty-state h2{font-size:var(--fs-lg);margin-bottom:var(--sp-3)}
.empty-state p{color:var(--color-text-muted);max-width:420px;margin:0 auto var(--sp-5)}
.empty-state .suggestions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:var(--sp-5)}

/* ==========================================================================
   17. AUTHOR / TAG ARCHIVE HEADER
   ========================================================================== */
.author-hero{background:var(--color-surface-alt);padding:var(--sp-8) 0}
.author-hero-inner{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.author-hero img{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--shadow-md)}
.author-hero h1{font-size:var(--fs-xl)}
.author-hero .role{color:var(--color-primary);font-weight:700;font-size:var(--fs-sm)}
.author-hero-stats{display:flex;gap:var(--sp-6);margin-top:var(--sp-3)}
.author-hero-stats div strong{display:block;font-family:var(--font-heading);font-size:var(--fs-lg);color:var(--color-primary)}
.author-hero-stats div span{font-size:var(--fs-xs);color:var(--color-text-muted)}

/* ==========================================================================
   18. 404
   ========================================================================== */
.error-404{text-align:center;padding:var(--sp-9) 0;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.error-404 .code{font-family:var(--font-heading);font-size:7rem;font-weight:900;color:var(--color-primary-light);line-height:1;-webkit-text-stroke:2px var(--color-primary)}
.error-404 h1{font-size:var(--fs-xl);margin:var(--sp-4) 0 var(--sp-3)}
.error-404 p{color:var(--color-text-muted);max-width:420px;margin-bottom:var(--sp-6)}
.error-404-search{max-width:420px;width:100%;position:relative;margin-bottom:var(--sp-6)}
.error-404-search input{width:100%;padding:.9rem 1.2rem .9rem 3.2rem;border-radius:var(--radius-pill);border:2px solid var(--color-border)}
.error-404-search button{position:absolute;left:.35rem;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center}

/* ==========================================================================
   19. STATIC PAGES (about/contact/legal)
   ========================================================================== */
.static-content{max-width:860px;margin:0 auto}
.static-content h2{font-size:var(--fs-lg);margin-top:var(--sp-7)}
.static-content p{margin-top:var(--sp-4);color:var(--color-text-muted)}
.static-content ul{margin-top:var(--sp-4);padding-inline-start:var(--sp-5);list-style:disc;color:var(--color-text-muted);display:flex;flex-direction:column;gap:.5rem}

.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);text-align:center;margin:var(--sp-7) 0}
.stats-strip div strong{display:block;font-family:var(--font-heading);font-size:var(--fs-xl);color:var(--color-primary)}
.stats-strip div span{font-size:var(--fs-xs);color:var(--color-text-muted)}
@media(max-width:640px){.stats-strip{grid-template-columns:repeat(2,1fr)}}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-6)}
@media(max-width:768px){.value-grid{grid-template-columns:1fr}}
.value-card{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.value-card .icon{width:48px;height:48px;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3)}
.value-card h3{font-size:var(--fs-md);margin-bottom:.5rem}
.value-card p{color:var(--color-text-muted);font-size:var(--fs-sm)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-info-card{display:flex;gap:var(--sp-4);align-items:flex-start;background:var(--color-surface);padding:var(--sp-5);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4)}
.contact-info-card .icon{width:44px;height:44px;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-card h4{font-size:var(--fs-sm);margin-bottom:.3rem}
.contact-info-card p{color:var(--color-text-muted);font-size:var(--fs-sm)}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.site-footer{background:#0F2224;color:#D9E4E3;margin-top:var(--sp-9)}
.footer-top{padding:var(--sp-8) 0 var(--sp-7)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-6)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-about .site-logo .logo-text{color:#fff}
.footer-about p{color:#9FB3B1;font-size:var(--fs-sm);margin-top:var(--sp-4)}
.footer-social{display:flex;gap:.6rem;margin-top:var(--sp-4)}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s}
.footer-social a:hover{background:var(--color-accent)}
.footer-col h3{color:#fff;font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.footer-col ul{display:flex;flex-direction:column;gap:.75rem}
.footer-col a{color:#9FB3B1;font-size:var(--fs-sm);transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:var(--sp-4) 0}
.footer-bottom .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.footer-bottom p{font-size:var(--fs-xs);color:#7E9391}
.payment-icons{display:flex;gap:.5rem;align-items:center}
.payment-icons span{background:rgba(255,255,255,.08);padding:.35rem .7rem;border-radius:6px;font-size:var(--fs-xs);color:#D9E4E3}

/* ==========================================================================
   21. BACK TO TOP + MISC
   ========================================================================== */
.back-to-top{position:fixed;bottom:24px;left:24px;width:46px;height:46px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s ease;z-index:400}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

.reading-progress{position:fixed;top:0;right:0;height:3px;background:var(--color-accent);width:0%;z-index:999;transition:width .1s linear}

/* Print */
@media print{
  .site-header,.site-footer,.ad-slot,.share-bar,.sidebar,.back-to-top,.sticky-product-banner{display:none !important}
}