/* ═══════════════════════════════════════════════════════════════════
   OPTIC ART SUPPLY — RESPONSIVE
   Loaded LAST so these rules win the cascade.
   Breakpoints: 1100 / 900 / 720 / 560 / 400
   ═══════════════════════════════════════════════════════════════════ */

/* ─── GLOBAL SAFETY ────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* never let long words / URLs blow out the layout */
.article-content, .article-lead, .bg-row-title, .guide-card-title,
.post-hero-title, .product-hero-title, .hero-headline,
.cat-hero-title, .brand-page-title, .about-hero-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* article tables scroll instead of overflowing */
.article-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 1100px  — small laptop / tablet landscape
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .container { padding: 0 20px; }

  /* header: nav scrolls horizontally rather than wrapping */
  .header-inner { gap: 16px; }
  .search-bar { max-width: 280px; }
  .header-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { padding: 6px 9px; font-size: 13.5px; }

  /* homepage */
  .hero-inner { grid-template-columns: 1fr 380px; gap: 36px; }
  .hero-headline { font-size: 42px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card--wide { grid-column: span 3; aspect-ratio: 12/3; }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .picks-grid { grid-template-columns: 1fr 1fr; }
  .pick-hero { grid-column: span 2; }

  /* post + category layouts */
  .post-layout { grid-template-columns: 1fr 280px; gap: 28px; }
  .cat-layout  { grid-template-columns: 1fr 220px; gap: 24px; }
  .article-wrap { padding: 36px 32px; }

  /* buying guides hub */
  .bg-cat-grid { grid-template-columns: repeat(4, 1fr); }

  /* brands */
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-intro-grid { grid-template-columns: 1fr 260px; gap: 32px; }

  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 900px  — tablet portrait.  Sidebars drop below content.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── header ── */
  .header-inner { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 10px; }
  .site-logo { font-size: 20px; }
  .search-bar { order: 3; flex-basis: 100%; max-width: none; }
  .header-nav { order: 2; margin-left: auto; }

  /* ── homepage hero ── */
  .hero { padding: 48px 0 44px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-headline { font-size: 38px; }
  .hero-sub { max-width: none; font-size: 16px; }
  .hero-featured-card { max-width: 520px; }

  /* ── trust bar ── */
  .trust-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
    justify-content: start;
  }
  .trust-item { font-size: 12.5px; }

  /* ── sections ── */
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-title { font-size: 26px; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card--wide { grid-column: span 2; aspect-ratio: 8/3; }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }

  .picks-grid { grid-template-columns: 1fr; }
  .pick-hero { grid-column: auto; }
  .pick-side { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .pick-side .pick-mini { flex: 1 1 calc(50% - 6px); }

  .editorial-grid { grid-template-columns: 1fr; }

  /* ── post pages: sidebar under article ── */
  .post-layout { grid-template-columns: 1fr; gap: 24px; }
  .post-sidebar { position: static; top: auto; }
  .post-sidebar .sidebar-box { }
  .article-wrap { padding: 30px 26px; }
  .post-hero-title { font-size: 30px; }

  /* ── product pages ── */
  .product-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .product-hero-title { font-size: 28px; }
  .product-hero-img-wrap { max-width: 520px; }
  .buy-bar { position: static; }
  .buy-bar-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .buy-bar-btns { width: 100%; }
  .buy-bar-btn { flex: 1; text-align: center; }
  .product-variant-header { grid-template-columns: 1fr; }
  .product-variant-img { width: 100%; height: 200px; border-right: none;
                         border-bottom: 1px solid var(--border-light); }
  .product-variant-body { grid-template-columns: 1fr; gap: 16px; }
  .pros-cons { grid-template-columns: 1fr; }
  .content-card { padding: 28px 24px; }

  /* ── category pages ── */
  .cat-layout { grid-template-columns: 1fr; gap: 24px; }
  .cat-sidebar { position: static; top: auto; }
  .cat-sidebar .sidebar-box:first-child .sidebar-cats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-hero { min-height: 240px; }
  .cat-hero-title { font-size: 34px; }
  .cat-hero-desc { font-size: 15px; }
  .filter-bar { position: static; }
  .filter-inner { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── brands ── */
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-hero-title { font-size: 34px; }
  .brand-page-hero { min-height: 260px; }
  .brand-page-title { font-size: 38px; }
  .brand-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .brand-intro-stats { grid-template-columns: repeat(2, 1fr); }

  /* ── buying guides hub ── */
  .bg-hero h1 { font-size: 34px; }
  .bg-cat-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── about ── */
  .about-hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .about-hero-title { font-size: 34px; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── footer ── */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 720px  — large phone / small tablet
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .container { padding: 0 16px; }

  /* promo banner */
  .top-promo-banner { padding: 9px 14px; }
  .top-promo-banner-content { gap: 10px; }
  .top-promo-banner-text { font-size: 13px; text-align: center; }
  .top-promo-banner-icon { display: none; }
  .top-promo-banner-button { font-size: 12.5px; padding: 4px 12px; }

  /* header */
  .site-header { position: static; }   /* free vertical space on phones */
  .header-inner { gap: 8px; }
  .site-logo { font-size: 18px; }
  .header-nav a { font-size: 13px; padding: 5px 8px; }
  .search-bar input { font-size: 16px; }  /* ≥16px stops iOS zoom-on-focus */

  /* breadcrumb */
  .breadcrumb-inner { font-size: 12px; flex-wrap: wrap; row-gap: 2px; }

  /* homepage */
  .hero { padding: 36px 0 34px; }
  .hero-headline { font-size: 31px; }
  .hero-eyebrow { font-size: 11px; }
  .hero-sub { font-size: 15px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-card-img { height: 180px; }

  .trust-items { grid-template-columns: 1fr; gap: 10px; }

  section { padding: 40px 0; }
  .section-title { font-size: 23px; }
  .section-subtitle { font-size: 13.5px; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card--wide { grid-column: span 2; aspect-ratio: 16/7; }
  .cat-card-name { font-size: 15px; }
  .cat-card-count { font-size: 11px; }

  .guide-grid { grid-template-columns: 1fr; gap: 16px; }
  .post-grid  { grid-template-columns: 1fr; gap: 16px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .pick-side { flex-direction: column; }
  .pick-side .pick-mini { flex: 1 1 auto; }
  .pick-hero-title { font-size: 20px; }

  /* posts */
  .post-hero-img { max-height: 260px; object-fit: cover; }
  .post-hero-meta { padding: 20px 0 22px; }
  .post-hero-title { font-size: 24px; }
  .post-hero-byline-text { font-size: 12.5px; }
  .article-wrap { padding: 24px 18px; border-radius: 0; border-left: none; border-right: none; }
  .article-lead { font-size: 15.5px; margin-bottom: 26px; padding-bottom: 22px; }
  .article-content h2 { font-size: 22px; margin-top: 32px; }
  .article-content h3 { font-size: 16px; }
  .article-content p,
  .article-content li { font-size: 15.5px; }
  .article-author { gap: 11px; padding-bottom: 18px; margin-bottom: 20px; }
  .article-author-img { width: 40px; height: 40px; }

  /* products */
  .product-hero { padding: 24px 0 28px; }
  .product-hero-title { font-size: 24px; }
  .quick-specs { grid-template-columns: 1fr; gap: 8px; }
  .hero-buy-btns { flex-direction: column; }
  .btn-buy-primary, .btn-buy-secondary { width: 100%; }
  .buy-bar-btns { flex-direction: column; }
  .buy-bar-btn { width: 100%; }
  .variant-buy-row { flex-direction: column; align-items: stretch; }
  .variant-btn-primary, .variant-btn-secondary { justify-content: center; }
  .content-card { padding: 22px 18px; border-radius: 0; border-left: none; border-right: none; }
  .content-card-title { font-size: 21px; }
  .product-card-inline { flex-direction: column; }
  .product-card-inline-img { width: 100%; height: 160px; }
  .product-card-inline-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn-shop, .btn-shop-secondary { text-align: center; justify-content: center; }

  /* sidebar boxes full-bleed feel */
  .post-sidebar .sidebar-box,
  .cat-sidebar .sidebar-box { padding: 18px; }

  /* categories */
  .cat-hero { min-height: 200px; }
  .cat-hero-body { padding: 34px 0 30px; }
  .cat-hero-title { font-size: 28px; }
  .cat-hero-eyebrow { font-size: 11px; }
  .cat-hero-stats { gap: 20px; }
  .cat-stat-num { font-size: 20px; }
  .filter-pills { gap: 6px; }
  .filter-pill { font-size: 12px; padding: 5px 11px; }
  .cat-sidebar .sidebar-box:first-child .sidebar-cats { grid-template-columns: 1fr; }

  /* brands */
  .brands-hero { padding: 40px 0 36px; }
  .brands-hero-title { font-size: 28px; }
  .brands-grid { grid-template-columns: 1fr; gap: 16px; }
  .brand-page-hero { min-height: 220px; }
  .brand-page-title { font-size: 30px; }
  .brand-page-tagline { font-size: 15px; }
  .brand-page-btns { flex-direction: column; }
  .brand-page-btns .btn { justify-content: center; }
  .brand-intro-stats { grid-template-columns: 1fr 1fr; }
  .brand-buy-box { grid-column: span 2; }

  /* buying guides hub */
  .bg-hero { padding: 36px 0 32px; }
  .bg-hero h1 { font-size: 28px; }
  .bg-hero p { font-size: 15px; }
  .bg-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bg-cats h2, .bg-all h2 { font-size: 23px; }
  .bg-row { grid-template-columns: 64px 1fr; padding: 10px 12px; gap: 12px; }
  .bg-row-img { width: 64px; height: 48px; }
  .bg-row-date { display: none; }
  .bg-row-title { font-size: 14px; }
  .bg-row-desc { display: none; }
  .bg-filters { gap: 6px; }
  .bg-filter { font-size: 12px; padding: 5px 11px; }

  /* about */
  .about-hero { padding: 36px 0 32px; }
  .about-hero-inner { text-align: center; justify-items: center; }
  .about-avatar { width: 96px; height: 96px; }
  .about-hero-title { font-size: 28px; }
  .about-card { padding: 24px 18px; }
  .about-card p { font-size: 15.5px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .about-socials { justify-content: center; }

  /* newsletter */
  .newsletter { padding: 40px 0; }
  .newsletter h2 { font-size: 26px; }
  .newsletter p { font-size: 14px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input,
  .newsletter-form button { width: 100%; font-size: 16px; }

  /* footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 560px  — standard phone
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .hero-headline { font-size: 27px; }
  .section-title { font-size: 21px; }

  .cat-grid { grid-template-columns: 1fr; }
  .cat-card, .cat-card--wide { grid-column: auto; aspect-ratio: 16/8; }
  .related-grid { grid-template-columns: 1fr; }

  .post-hero-title { font-size: 21px; }
  .product-hero-title { font-size: 21px; }
  .cat-hero-title { font-size: 25px; }
  .brand-page-title { font-size: 26px; }
  .bg-hero h1 { font-size: 25px; }
  .about-hero-title { font-size: 25px; }

  .bg-cat-grid { grid-template-columns: 1fr; }
  .brand-intro-stats { grid-template-columns: 1fr; }
  .brand-buy-box { grid-column: auto; }

  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   ≤ 400px  — small phone
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .container { padding: 0 13px; }
  .hero-headline { font-size: 24px; }
  .post-hero-title, .product-hero-title { font-size: 19px; }
  .site-logo { font-size: 17px; }
  .article-content h2 { font-size: 20px; }
  .bg-row { grid-template-columns: 52px 1fr; }
  .bg-row-img { width: 52px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   TOUCH — remove hover transforms that feel broken on touch devices
   ══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .guide-card:hover,
  .related-card:hover,
  .brand-card:hover,
  .portfolio-item:hover,
  .pick-mini:hover,
  .cat-card:hover { transform: none; }
  .bg-row:hover { transform: none; }
  .btn:hover, .guide-card-cta:hover,
  .btn-buy-primary:hover, .btn-buy-secondary:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════════ */
@media print {
  .top-promo-banner, .site-header, .breadcrumb, .buy-bar,
  .newsletter, .site-footer, .post-sidebar, .cat-sidebar,
  .related-posts, .filter-bar { display: none !important; }
  .post-layout, .cat-layout { grid-template-columns: 1fr; }
  .article-wrap, .content-card { border: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}