/* bdeals component styles
   Adapted from Muqtana editorial design language.
   Logical properties throughout for clean RTL/LTR.
*/

/* Container */
.container {
  inline-size: min(var(--w-page), 100% - 2 * var(--s-5));
  margin-inline: auto;
}
.container-narrow { inline-size: min(var(--w-narrow), 100% - 2 * var(--s-5)); margin-inline: auto; }
.prose { max-inline-size: var(--w-prose); }

/* Skip link */
.bdeals-skip { position: absolute; inset-inline-start: -9999px; }
.bdeals-skip:focus { inset-inline-start: var(--s-3); inset-block-start: var(--s-3); z-index: 1000; padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--r-2); }

/* Hairlines */
hr { border: 0; border-block-start: 1px solid var(--hairline); margin-block: var(--s-7); }

/* Typography overrides for Arabic legibility */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); }
p, li, blockquote { font-family: var(--font-body); color: var(--ink); }
small, .meta { color: var(--ink-3); font-size: var(--fs-xs); }

/* Editorial Hero */
.editorial-hero {
  padding-block: var(--s-8) var(--s-7);
  border-block-end: 1px solid var(--hairline);
}
.editorial-hero h1 {
  font-size: clamp(40px, 6vw, var(--fs-5xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-inline-size: 22ch;
}
.editorial-hero h1 em { font-style: normal; color: var(--accent); font-weight: 800; }
.editorial-hero .lede { font-size: var(--fs-md); color: var(--ink-2); max-inline-size: 56ch; line-height: 1.7; }

/* Inline disclosure pill */
.inline-disclosure {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  padding-block: 6px; padding-inline: 10px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-pill);
  inline-size: max-content;
}
.inline-disclosure::before {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent);
}

/* Section header */
.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: var(--s-5);
  margin-block-end: var(--s-6); padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--hairline);
}
.section-head .title-block { display: grid; gap: 8px; }
.section-head h2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.section-head .index { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.section-head .more { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.section-head .more:hover { color: var(--accent); }

/* Product card */
.product-card {
  display: grid; gap: var(--s-3); padding: var(--s-4);
  border: 1px solid var(--hairline); border-radius: var(--r-3);
  background: var(--paper); text-decoration: none; transition: transform .2s, border-color .2s;
}
.product-card:hover { transform: translateY(-2px); border-color: var(--hairline-strong); }
.product-card .img { aspect-ratio: 4/5; border-radius: var(--r-2); background: var(--paper-2) center/cover no-repeat; }
.product-card .cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.product-card h3 { font-size: var(--fs-md); line-height: 1.3; color: var(--ink); }
.product-card .verdict-line { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.product-card .price-row { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block-start: var(--s-2); border-block-start: 1px dashed var(--hairline); }
.product-card .source-chip { font-size: 12px; color: var(--ink-3); padding-block: 4px; padding-inline: 8px; background: var(--paper-2); border-radius: var(--r-pill); }

/* Offers grid */
.offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .offers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .offers-grid { grid-template-columns: 1fr; } }

/* Featured cover */
.feature-cover { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-7); align-items: center; padding-block: var(--s-8); }
.feature-cover .img { aspect-ratio: 5/4; border-radius: var(--r-4); background: var(--paper-2) center/cover no-repeat; }
.feature-cover h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.02em; max-inline-size: 18ch; }
.feature-cover .verdict { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.7; }
.feature-cover .byline { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.feature-cover .price-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.feature-cover .cta-row { display: flex; align-items: center; gap: var(--s-4); margin-block-start: var(--s-3); }
@media (max-width: 800px) { .feature-cover { grid-template-columns: 1fr; } }

/* CTA buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding-block: 12px; padding-inline: 20px; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); border-radius: var(--r-2); text-decoration: none; transition: all .15s; }
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.btn-secondary:hover { border-color: var(--ink); }

/* Affiliate disclosure indicator */
.aff-indicator { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-inline-start: 6px; padding-block: 2px; padding-inline: 6px; background: var(--paper-2); border-radius: var(--r-pill); white-space: nowrap; }

/* Source comparison sticky */
.source-compare {
  position: sticky; inset-block-start: var(--s-5);
  border: 1px solid var(--hairline); border-radius: var(--r-3); padding: var(--s-5);
  background: var(--paper); display: grid; gap: var(--s-3);
}
.source-compare h3 { font-size: var(--fs-base); margin: 0; color: var(--ink-2); }
.source-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; padding-block: var(--s-3); border-block-end: 1px dashed var(--hairline); }
.source-row:last-child { border-block-end: 0; }
.source-row .label { font-weight: 600; }
.source-row .meta { font-size: 12px; color: var(--ink-3); }

/* Pros / Cons */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); padding-block: var(--s-6); }
.pros-cons > div { padding: var(--s-5); border-radius: var(--r-3); }
.pros-cons .pros { background: oklch(0.95 0.04 155 / 0.4); }
.pros-cons .cons { background: oklch(0.95 0.04 25 / 0.4); }
.pros-cons h3 { font-size: var(--fs-md); margin-block-end: var(--s-3); }
.pros-cons ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.pros-cons li { line-height: 1.6; }
.pros-cons .pros li::before { content: "✓"; color: var(--good); font-weight: 700; margin-inline-end: 8px; }
.pros-cons .cons li::before { content: "×"; color: var(--warn); font-weight: 700; margin-inline-end: 8px; }
@media (max-width: 700px) { .pros-cons { grid-template-columns: 1fr; } }

/* Spec table */
.spec-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--hairline); text-align: start; }
.spec-table th { font-weight: 600; color: var(--ink-2); inline-size: 30%; }

/* FAQ accordion */
.faq-item { border-block-end: 1px solid var(--hairline); padding-block: var(--s-4); }
.faq-item summary { font-weight: 600; cursor: pointer; padding-block: var(--s-2); list-style: none; display: flex; align-items: center; gap: var(--s-3); }
.faq-item summary::after { content: "+"; margin-inline-start: auto; font-size: var(--fs-xl); color: var(--ink-3); transition: transform .15s; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--ink-2); line-height: 1.7; padding-block-start: var(--s-3); }

/* Breadcrumbs */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); padding-block: var(--s-4); }
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { color: var(--hairline-strong); }

/* Author byline */
.author-byline {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s-3);
  align-items: center; padding-block: var(--s-4);
  border-block: 1px solid var(--hairline); margin-block: var(--s-5);
}
.author-byline .avatar { inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--paper-2) center/cover no-repeat; }
.author-byline .name { font-weight: 600; }
.author-byline .bio { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.author-byline .last-tested { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); margin-block-start: 4px; }

/* Affiliate disclosure banner (above the fold) */
.aff-disclosure-banner {
  background: var(--paper-2); border-block-end: 1px solid var(--hairline);
  padding-block: var(--s-3); padding-inline: var(--s-5);
  font-size: var(--fs-xs); color: var(--ink-2); text-align: center;
}
.aff-disclosure-banner strong { color: var(--ink); }

/* Footer */
.site-footer { background: var(--paper-2); border-block-start: 1px solid var(--hairline); padding-block: var(--s-7); margin-block-start: var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-5); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { font-size: var(--fs-sm); margin-block-end: var(--s-3); color: var(--ink); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--accent); }
.site-footer .legal { padding-block-start: var(--s-5); margin-block-start: var(--s-5); border-block-start: 1px solid var(--hairline); font-size: var(--fs-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }