/* ===========================================================
   BadanFit — Supplement article pages
   =========================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Vazirmatn-fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 400;
  font-display: optional;
  src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 700;
  font-display: optional;
  src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 900;
  font-display: optional;
  src: url('../fonts/vazirmatn/Vazirmatn-Black.woff2') format('woff2');
}

/* ---------- Reset & tokens ---------- */
*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --primary-color:#D0F252;
  --header-bg:rgba(255,255,255,.98);
  --text-dark:#333;
  --text-light:#fff;

  --art-bg:#0a0e1a;
  --art-surface:#111726;
  --art-surface-2:#161d30;
  --art-border:#233047;
  --art-text:#e7ecf3;
  --art-muted:#9fb0c3;
  --art-green:#7FAD39;
  --art-green-bright:#D0F252;
  --art-radius:16px;
}

body{
  font-family:'Vazirmatn','Vazirmatn-fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
  color:var(--text-dark);
}

.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.header .container{padding:0;max-width:none;}

h1,h2,h3,h4,h5,h6{direction:rtl;margin:0;font-family:"Vazirmatn","Noto Sans Arabic",Tahoma,Arial,sans-serif;}
p{font-family:"Vazirmatn","Noto Sans Arabic",Tahoma,Arial,sans-serif;font-weight:400;margin:0 0 18px;direction:rtl;}
img{max-width:100%;}
ul,ol{padding:0;margin:0;}
a:hover,a:focus{text-decoration:none;outline:none;}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.header{
  position:fixed;top:20px;right:20px;z-index:1000;padding:0;
  max-width:1400px;margin:0 auto;
  left:50%;transform:translateX(-50%);width:calc(100% - 40px);
}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--header-bg);padding:15px 40px;border-radius:50px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);flex-direction:row-reverse;
}
.logo{cursor:pointer;display:flex;align-items:center;flex-shrink:0;height:28px;}
.logo img{height:100%;width:auto;}

.nav-menu{display:flex;list-style:none;align-items:center;gap:25px;flex:1;justify-content:center;direction:rtl;}
.nav-item{position:relative;}
.nav-link{
  text-decoration:none;color:var(--text-dark);font-weight:500;font-size:14px;
  display:flex;align-items:center;gap:5px;padding:8px 0;
  transition:color .3s ease;direction:rtl;
}
.nav-link:hover{color:#666;}
.dropdown-icon{font-size:10px;transition:transform .3s ease;}

.dropdown-menu{
  position:absolute;top:100%;left:auto;right:0;text-align:right;
  background:#fff;list-style:none;min-width:200px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);border-radius:8px;padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:all .3s ease;margin-top:10px;
}
.dropdown-menu li{padding:0;}
.dropdown-menu a{display:block;padding:12px 20px;color:var(--text-dark);text-decoration:none;font-size:14px;transition:background .3s ease;}
.dropdown-menu a:hover{background:#f5f5f5;}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown:hover .dropdown-icon{transform:rotate(180deg);}

.btn-signin{
  background:var(--primary-color);color:var(--text-dark);
  padding:10px 30px;border-radius:6px;text-decoration:none;
  font-weight:600;font-size:14px;transition:all .3s ease;
  box-shadow:0 2px 10px rgba(208,242,82,.3);
}
.btn-signin:hover{background:#bce047;box-shadow:0 4px 15px rgba(208,242,82,.5);transform:translateY(-2px);}

.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;}
.nav-toggle span{width:25px;height:3px;background:var(--text-dark);border-radius:3px;transition:all .3s ease;}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px);}
.mobile-signin{display:none;}

/* user-panel state (set by global-auth.js) */
.btn-signin.user-panel-btn,
.btn-signin-mobile.user-panel-btn{background:#7fad39;color:#fff;}
.btn-signin.user-panel-btn:hover,
.btn-signin-mobile.user-panel-btn:hover{background:#6a9632;}
.btn-signin i,.btn-signin-mobile i{margin-left:5px;}

/* ===========================================================
   ARTICLE LAYOUT
   =========================================================== */
.spad{padding-top:0;padding-bottom:0;}
.blog-details-section{background:var(--art-bg);padding:140px 0 90px;}
.blog-details-section .container{max-width:1180px;}

.article-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 280px;
  gap:48px;align-items:start;direction:rtl;
}
.article-body{max-width:820px;}

.article-body h1{
  font-size:clamp(28px,4vw,40px);font-weight:900;line-height:1.35;
  color:#fff;margin:0 0 18px;padding:0;border:0;
}
.article-body h1 .accent{color:var(--art-green-bright);}

.article-eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.5px;
  color:var(--art-green-bright);background:rgba(208,242,82,.08);
  border:1px solid rgba(208,242,82,.25);padding:6px 14px;
  border-radius:30px;margin-bottom:18px;
}
.article-meta{
  display:flex;flex-wrap:wrap;gap:16px;color:var(--art-muted);font-size:14px;
  padding-bottom:22px;margin-bottom:10px;border-bottom:1px solid var(--art-border);
}
.article-meta span{display:inline-flex;align-items:center;gap:6px;}
.article-hero{margin:26px 0 34px;}
.article-hero img{width:100%;height:auto;border-radius:var(--art-radius);display:block;}

/* ---------- Typography ---------- */
.blog-details-text{color:var(--art-text);direction:rtl;text-align:right;font-size:17px;line-height:1.95;}
.blog-details-text p{color:var(--art-text);line-height:1.95;text-align:right;margin:0 0 18px;font-size:17px;}
.blog-details-text strong{color:#fff;font-weight:700;}
.blog-details-text a{color:var(--art-green-bright);text-decoration:none;border-bottom:1px solid rgba(208,242,82,.35);transition:color .2s,border-color .2s;}
.blog-details-text a:hover{color:#fff;border-color:#fff;}
.blog-details-text sup a{border:0;}

.blog-details-text h2,
.blog-details-text h3,
.blog-details-text h4,
.blog-details-text h5,
.blog-details-text h6{color:#fff;font-weight:800;direction:rtl;scroll-margin-top:120px;}

.blog-details-text h2,
.blog-details-text .section-title,
.blog-details-text .section-title-sm,
.blog-details-text .faq-section h2,
.blog-details-text .related-box h2{
  font-size:clamp(22px,2.6vw,28px);color:#fff;font-weight:800;
  margin:44px 0 16px;padding-inline-start:14px;
  border-inline-start:4px solid var(--art-green);text-align:right;
}
.blog-details-text h3,
.blog-details-text .subheading-white,
.blog-details-text .sub-h3{font-size:20px;margin:28px 0 12px;color:var(--art-green-bright);font-weight:800;}
.blog-details-text h4,
.blog-details-text .sub-h4,
.blog-details-text .sub-h4-25,
.blog-details-text .box-h4,
.blog-details-text .box-h4-20,
.blog-details-text .box-h4-25,
.blog-details-text .card-title,
.blog-details-text .box-title{font-size:17px;color:var(--art-green-bright);font-weight:700;margin:22px 0 12px;}
.blog-details-text .box-title,
.blog-details-text .box-h4,
.blog-details-text .card-title{margin-top:0;}
.blog-details-text h5,
.blog-details-text .myth-h5{font-size:16px;color:#fff;font-weight:700;margin:16px 0 10px;}
.blog-details-title{margin:0;}

/* ---------- Lists ---------- */
.blog-details-text ul,
.blog-details-text ol,
.accordion-content ul{
  margin:0 0 20px;padding-inline-start:22px;padding-right:22px;padding-left:0;
  color:var(--art-text);line-height:1.95;direction:rtl;text-align:right;
  list-style-position:outside;
}
.blog-details-text li,
.accordion-content ul li{color:var(--art-text);margin-bottom:10px;font-size:17px;padding:0;text-align:right;}
.blog-details-text ul li::marker{color:var(--art-green);}
.blog-details-text ol li::marker{color:var(--art-green);font-weight:700;}
.list-sm,.list-sm li{font-size:15px;}
.accordion-content p{text-align:right;direction:rtl;}

/* ---------- Breadcrumb ---------- */
.article-breadcrumb{margin-bottom:22px;}
.breadcrumb{
  background:transparent;margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--art-muted);direction:rtl;
}
.breadcrumb-item{display:inline-flex;align-items:center;gap:8px;}
.breadcrumb-item a{color:var(--art-muted);text-decoration:none;border:0;transition:color .2s;}
.breadcrumb-item a:hover{color:var(--art-green-bright);}
.breadcrumb-sep{margin:0;color:var(--art-border);}
.breadcrumb-item.active{color:var(--art-text);font-weight:600;}

/* ---------- Hook box ---------- */
.article-hook-box{
  background:var(--art-surface);border:1px solid var(--art-border);
  border-inline-start:4px solid var(--art-green-bright);
  border-radius:12px;padding:20px 22px;margin:24px 0;color:var(--art-muted);
}
.blog-details-text .article-hook-box h2{
  font-size:18px;color:var(--art-green-bright);font-weight:700;
  margin:0 0 14px;padding:0;border:0;display:flex;align-items:center;gap:10px;
}
.blog-details-text .article-hook-box>p{color:var(--art-muted);font-size:16px;margin-bottom:14px;}
.hook-box-inner{background:var(--art-surface-2);border-radius:10px;padding:16px 18px;margin-top:14px;}
.blog-details-text .hook-box-inner p{margin:0 0 8px;font-size:15px;color:var(--art-green-bright);font-weight:600;}
.blog-details-text .hook-box-list{margin:10px 0 0;color:var(--art-text);font-size:15px;}

/* ---------- Table of contents ---------- */
.article-toc{
  background:var(--art-surface);border:1px solid var(--art-border);
  border-radius:var(--art-radius);padding:22px 20px;margin:28px 0;
  direction:rtl;text-align:right;
}
.article-grid > .article-toc{
  position:sticky;top:110px;margin:0;
  max-height:calc(100vh - 140px);overflow:auto;
}
.toc-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;padding-bottom:12px;margin-bottom:10px;
  border-bottom:1px solid var(--art-border);
}
.article-toc .toc-head h2{
  font-size:15px;color:#fff;font-weight:800;letter-spacing:.3px;
  margin:0;padding:0;border:0;display:flex;align-items:center;gap:8px;
}
.toc-readtime{
  font-size:12px;font-weight:700;color:var(--art-green-bright);
  background:rgba(208,242,82,.08);border:1px solid rgba(208,242,82,.25);
  padding:5px 12px;border-radius:30px;
}
.article-toc .toc-note{color:var(--art-muted);font-size:13px;margin:0 0 12px;}
.article-toc .toc-list{padding-inline-start:20px;margin:0;color:var(--art-muted);line-height:1.8;font-size:14px;}
.article-toc .toc-list li{margin:0;border:0;}
.article-toc .toc-list a{
  display:block;padding:8px 10px;border-radius:8px;border:0;
  color:var(--art-muted);font-size:14px;line-height:1.5;
  text-decoration:none;transition:all .2s;
}
.article-toc .toc-list a:hover{background:var(--art-surface-2);color:#fff;padding-right:10px;}
.article-toc .toc-list a.active{background:rgba(127,173,57,.14);color:var(--art-green-bright);font-weight:700;}
.article-toc .toc-list a:focus-visible{outline:2px solid var(--art-green-bright);outline-offset:2px;border-radius:8px;}

/* anchor offsets for any section id inside the article */
.article-body [id]{scroll-margin-top:120px;}

/* ---------- Data table ---------- */
.creatine-comparison-table{margin:22px 0;overflow-x:auto;border-radius:12px;padding:0;background:transparent;}
.creatine-comparison-table table{width:100%;border-collapse:collapse;font-size:15px;color:var(--art-text);}
.creatine-comparison-table th,
.creatine-comparison-table td{padding:14px 16px;text-align:start;border:0;border-bottom:1px solid var(--art-border);}
.creatine-comparison-table thead th{background:var(--art-surface-2);color:#fff;font-weight:700;}
.creatine-comparison-table tbody tr{background:var(--art-surface);}
.creatine-comparison-table tbody tr:hover{background:var(--art-surface-2);}

/* ---------- Accordion blocks ---------- */
.supplement-accordion{
  margin:24px 0;background:var(--art-surface);
  border:1px solid var(--art-border);border-radius:12px;overflow:hidden;
}
.supplement-accordion .accordion-header{
  font-size:17px;font-weight:700;margin:0;padding:16px 20px;text-align:right;
  background:var(--art-surface-2);color:#fff;
  border-bottom:1px solid var(--art-border);
  border-inline-start:4px solid var(--art-green);
}
.supplement-accordion .accordion-header span,
.supplement-accordion .accordion-header strong{color:#fff;}
.supplement-accordion .accordion-content{
  padding:20px 22px;background:transparent;border:0;
  color:var(--art-text);text-align:right;direction:rtl;
}
.supplement-accordion .accordion-content>*:last-child{margin-bottom:0;}

/* ---------- Callouts ---------- */
.research-note,.dosage-calculator,.medical-disclaimer,.warning-box,
.callout-green-box,.callout-green-sm,.callout-orange,.warn-orange,
.tip-blue,.note-purple,.data-box,
.blog-details-text .callout-green,
.blog-details-text .tip-blue-sm,
.blog-details-text .summary-heading,
.blog-details-text .summary-green,
.blog-details-text .list-box{
  background:var(--art-surface);border:1px solid var(--art-border);
  border-inline-start:4px solid var(--art-green-bright);
  border-radius:12px;padding:18px 20px;margin:24px 0;
  color:var(--art-muted);direction:rtl;text-align:right;
}
.research-note p,.dosage-calculator p,.medical-disclaimer p,.warning-box p,
.callout-green-box p,.callout-green-sm p,.callout-orange p,.warn-orange p,
.tip-blue p,.note-purple p,.data-box p,
.blog-details-text .callout-green,
.blog-details-text .summary-green{color:var(--art-muted);}
.research-note>*:last-child,.dosage-calculator>*:last-child,.medical-disclaimer>*:last-child,
.warning-box>*:last-child,.callout-green-box>*:last-child,.tip-blue>*:last-child,
.warn-orange>*:last-child,.note-purple>*:last-child,.data-box>*:last-child{margin-bottom:0;}
.warning-box{border-inline-start-color:#e07a5f;}
.warning-box h4{color:#e07a5f;margin-top:0;}
.blog-details-text .summary-heading{font-size:17px;font-weight:700;color:var(--art-green-bright);}
.blog-details-text .tip-blue-sm{font-size:15px;}
.blog-details-text .note-italic{margin-top:20px;font-style:italic;color:var(--art-muted);}
.blog-details-text .para-emph,
.blog-details-text .para-emph-mt{color:var(--art-text);line-height:1.95;text-align:right;font-size:16px;}
.blog-details-text .para-emph-mt{margin-top:15px;}
.blog-details-text .mb-20{margin-bottom:20px;}
.blog-details-text .my-15{margin:15px 0;}
.blog-details-text .my-10{margin:10px 0;}
.inline-link,.ref-link{color:var(--art-green-bright);}

/* ---------- Compare cards ---------- */
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:22px 0;}
.compare-card{
  background:var(--art-surface-2);border:1px solid var(--art-border);
  border-radius:12px;padding:18px 20px;
}
.compare-card>*:last-child{margin-bottom:0;}

/* ---------- Figure ---------- */
.article-figure{margin:26px 0;text-align:center;}
.article-figure img{max-width:100%;height:auto;border-radius:var(--art-radius);display:block;margin:0 auto;}
.article-figure figcaption{color:var(--art-muted);font-size:13px;margin-top:10px;}

/* ---------- FAQ ---------- */
.faq-section{margin:40px 0;direction:rtl;text-align:right;}
.faq-item{
  background:var(--art-surface);border:1px solid var(--art-border);
  border-radius:12px;padding:18px 20px;margin-bottom:14px;
}
.blog-details-text .faq-item h3{
  font-size:17px;font-weight:800;color:#fff;margin:0 0 8px;
  display:flex;gap:10px;align-items:flex-start;
}
.blog-details-text .faq-item h3::before{content:"؟";color:var(--art-green-bright);font-weight:900;flex-shrink:0;}
.blog-details-text .faq-item p{color:var(--art-muted);line-height:1.85;margin:0;font-size:15px;}

/* ---------- Related guides ---------- */
.related-box{background:transparent;border:0;padding:0;margin:40px 0;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 8px;}
.related-card{
  display:block;height:100%;background:var(--art-surface);
  border:1px solid var(--art-border);border-radius:12px;padding:18px 20px;
  transition:transform .2s,border-color .2s;
}
.related-card:hover{transform:translateY(-4px);border-color:var(--art-green);}
.blog-details-text .related-card h3{color:var(--art-green-bright);font-size:16px;font-weight:700;margin:0 0 10px;text-align:right;}
.blog-details-text .related-card p{color:var(--art-muted);font-size:14px;line-height:1.8;margin:0 0 12px;text-align:right;}
.related-card a{color:var(--art-green-bright);font-weight:700;display:inline-block;border:0;}

/* ---------- References ---------- */
.blog-details-text .references-list{font-size:14px;text-align:left;direction:ltr;color:var(--art-muted);padding-inline-start:20px;}
.blog-details-text .references-list li{color:var(--art-muted);}
.blog-details-text .references-list a{color:var(--art-green-bright);word-break:break-word;}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{background:#000;color:#fff;padding:60px 0 30px;direction:rtl;text-align:right;}
.footer-content{display:grid;grid-template-columns:1.5fr 1fr 1fr 2fr;gap:50px;margin-bottom:40px;}
.footer-about{max-width:400px;order:4;}
.footer-logo{margin-bottom:20px;height:40px;}
.footer-logo img{height:100%;width:auto;}
.footer-description{color:#b0b0b0;font-size:14px;line-height:1.8;margin:0;}
.footer-column{display:flex;flex-direction:column;}
.footer-title{color:#fff;font-size:18px;font-weight:700;margin-bottom:20px;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links li{margin-bottom:12px;}
.footer-links a{color:#b0b0b0;text-decoration:none;font-size:14px;transition:color .3s ease;display:block;text-align:right;}
.footer-links a:hover{color:var(--primary-color);}
.footer-social{align-items:flex-start;order:1;}

.trust-seals{display:flex;gap:15px;margin-bottom:25px;align-items:center;justify-content:flex-start;}
.trust-seal-link{display:block;transition:transform .3s ease,filter .3s ease;}
.trust-seal-link:hover{transform:translateY(-3px);filter:drop-shadow(0 5px 15px rgba(208,242,82,.4));}
.trust-seal-img{display:block;width:80px;height:80px;object-fit:contain;}

.social-icons{display:flex;gap:15px;}
.social-link{
  width:40px;height:40px;border-radius:50%;background:#1a1a1a;border:1px solid #333;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s ease;
}
.social-link:hover{background:var(--primary-color);border-color:var(--primary-color);color:#000;transform:translateY(-3px);}
.social-link svg{width:20px;height:20px;}

.footer-bottom{border-top:1px solid #222;padding-top:25px;text-align:center;}
.footer-copyright{color:#666;font-size:13px;margin:0;}
.vinnonis-link{color:var(--primary-color);text-decoration:none;font-weight:600;transition:color .3s ease;}
.vinnonis-link:hover{color:#bce047;}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1100px){
  .nav-menu{gap:18px;}
  .nav-link{font-size:13px;}
}

@media (max-width:992px){
  .nav-menu{gap:15px;}
  .nav-link{font-size:13px;}
  .footer-content{grid-template-columns:1fr 1fr;gap:40px;}
  .footer-about{grid-column:1 / -1;max-width:100%;}
}

@media (max-width:980px){
  .article-grid{grid-template-columns:1fr;gap:0;}
  .article-grid > .article-toc{display:none;}
  .article-body{max-width:100%;}
}

@media (max-width:768px){
  .header{top:10px;left:10px;right:10px;width:calc(100% - 20px);transform:translateX(0);margin:0;}
  .navbar{padding:12px 20px;}
  .nav-toggle{display:flex;}
  .btn-signin{display:none;}
  .mobile-signin{display:block;margin-top:20px;}
  .btn-signin-mobile{
    display:block;background:var(--primary-color);color:var(--text-dark);
    padding:12px 30px;border-radius:6px;text-decoration:none;font-weight:600;text-align:center;
  }
  .nav-menu{
    position:fixed;top:80px;left:10px;right:10px;width:calc(100% - 20px);
    height:calc(100vh - 100px);background:#fff;flex-direction:column;
    align-items:flex-start;padding:30px 20px;gap:0;overflow-y:auto;
    transition:all .3s ease;box-shadow:0 4px 20px rgba(0,0,0,.15);
    transform:translateX(-150%);border-radius:20px;justify-content:flex-start;
  }
  .nav-menu.active{transform:translateX(0);}
  .nav-item{width:100%;border-bottom:1px solid #eee;}
  .nav-link{padding:15px 0;width:100%;}
  .dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    padding-left:20px;margin-top:0;max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .dropdown.active .dropdown-menu{max-height:500px;}

  .footer{padding:40px 0 20px;}
  .footer-content{grid-template-columns:1fr;gap:30px;}
  .footer-about{grid-column:1;}
  .footer-logo{height:35px;margin-bottom:15px;}
  .footer-title{font-size:16px;margin-bottom:15px;}
  .trust-seals{margin-bottom:20px;gap:12px;}
  .trust-seal-img{width:75px;height:75px;}
  .social-icons{gap:12px;}
  .social-link{width:38px;height:38px;}
}

@media (max-width:767px){
  .blog-details-text{font-size:16px;}
  .blog-details-text p,.blog-details-text li{font-size:16px;}
  .blog-details-text h2,.blog-details-text .section-title{margin-top:34px;}
  .supplement-accordion .accordion-content{padding:16px;}
  .article-hook-box,.article-toc{padding:16px;}
}

@media (max-width:560px){
  .blog-details-section{padding:120px 0 60px;}
}

@media (max-width:480px){
  .header{top:10px;left:10px;right:10px;width:calc(100% - 20px);transform:translateX(0);margin:0;}
  .navbar{padding:10px 15px;}
  .container{padding:0 15px;}
  .footer{padding:30px 0 15px;}
  .footer-content{gap:25px;}
  .footer-description{font-size:13px;line-height:1.7;}
  .trust-seals{justify-content:center;gap:10px;}
  .trust-seal-img{width:70px;height:70px;}
  .footer-copyright{font-size:12px;}
}

/* ---------- A11y ---------- */
.blog-details-text a:focus-visible,
.related-card:focus-visible{outline:2px solid var(--art-green-bright);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .related-card,.article-toc a,.blog-details-text a{transition:none;}
}