/*
 * Theme Name:  Buy65
 * Description: Deal and product recommendation site for seniors 65+.
 * Version:     1.0.0
 *
 * TABLE OF CONTENTS
 * -----------------
 *  1.  Fonts & CSS Variables
 *  2.  Reset & Base
 *  3.  Layout Wrapper
 *  4.  Top Utility Bar
 *  5.  Site Header
 *  6.  Primary Navigation
 *  7.  Category Nav Strip
 *  8.  Filter Bar  ← commented out in index.php, CSS kept for easy re-enable
 *  9.  Deal Card
 *      9a. Card shell
 *      9b. Thumbnail
 *      9c. Body
 *      9d. Badge
 *      9e. Title
 *      9f. Excerpt
 *      9g. Footer row (price + CTA)
 * 10.  Single Post Page
 * 11.  Pros / Cons Block
 * 12.  Sidebar & Ad Slot
 * 13.  Pagination
 * 14.  Footer
 * 15.  Animations
 * 16.  Responsive — Tablet (≤980px)
 * 17.  Responsive — Mobile (≤767px)
 */


/* =============================================================
   1. FONTS & CSS VARIABLES
   To change a color site-wide, edit the variable value here only.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;500;600;700&family=Lora:ital,wght@0,400;1,400&display=swap');

:root {
  /* Brand */
  --red:          #e81d25;
  --red-dark:     #c0151c;

  /* Neutrals */
  --black:        #181818;
  --dark:         #2a2a2a;
  --mid:          #555;
  --muted:        #909090;
  --bg:           #f0f0ec;
  --card-bg:      #fff;
  --border:       #ddddd8;
  --border-card:  #d4d4cf;

  /* Status colors */
  --green:        #2a9d5c;
  --green-bg:     #eaf6ef;
  --green-text:   #1e7a46;
  --blue:         #1a7fd4;
  --purple:       #7b4fbf;
  --amber:        #c97d10;
  --amber-bg:     #fef3e2;
  --amber-text:   #92570a;

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-ui:      'Barlow', sans-serif;
  --font-body:    'Lora', Georgia, serif;

  /* Shape */
  --radius:       4px;
  --radius-card:  6px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.07);
  --shadow-hover: 0 4px 14px rgba(0,0,0,0.11);

  /* Transition */
  --ease:         0.16s ease;
}


/* =============================================================
   2. RESET & BASE
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:  var(--font-ui);
  background:   var(--bg);
  color:        var(--black);
  font-size:    14px;
  line-height:  1.55;
  margin:       0;
  padding:      0;
  -webkit-font-smoothing: antialiased;
}

a               { color: var(--black); text-decoration: none; transition: color var(--ease); }
a:hover         { color: var(--red); }
img             { max-width: 100%; height: auto; display: block; }
ul, ol          { margin: 0; padding: 0; list-style: none; }
p               { margin: 0; }
h1, h2, h3, h4  { margin: 0; font-weight: 700; }


/* =============================================================
   3. LAYOUT WRAPPER
   ============================================================= */

.b65-wrap {
  max-width: 1080px;
  margin:    0 auto;
  padding:   0 16px;
}

/* Two-column layout: main feed + sticky sidebar */
.b65-layout {
  display:               grid;
  grid-template-columns: 1fr 240px;
  gap:                   20px;
  padding:               16px 0 32px;
  align-items:           start;
}

.b65-main    { min-width: 0; }
.b65-sidebar { position: sticky; top: 16px; }


/* =============================================================
   4. TOP UTILITY BAR
   ============================================================= */

.b65-topbar {
  background:  var(--dark);
  font-size:   11px;
  font-family: var(--font-ui);
  padding:     5px 0;
}

.b65-topbar .b65-wrap {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.b65-topbar-left              { color: #999; }
.b65-topbar-right a           { color: #888; margin-left: 14px; font-size: 11px; }
.b65-topbar-right a:hover     { color: #fff; }


/* =============================================================
   5. SITE HEADER
   Logo uses the uploaded Buy65 image. Black background to match logo.
   ============================================================= */

.b65-header {
  background:    var(--black);
  border-bottom: 3px solid var(--red);
  box-shadow:    0 1px 5px rgba(0,0,0,0.2);
}

.b65-header .b65-wrap {
  display:        flex;
  align-items:    center;
  gap:            20px;
  padding-top:    10px;
  padding-bottom: 10px;
}

/* Logo image */
.b65-logo {
  display:    block;
  flex-shrink: 0;
  line-height: 0;
}

.b65-logo img {
  height:    48px;
  width:     auto;
  display:   block;
}

/* Search bar — white on dark background */
.b65-search {
  display: flex;
  flex:    1;
}

.b65-search input {
  flex:          1;
  font-family:   var(--font-ui);
  font-size:     13px;
  padding:       8px 12px;
  border:        1.5px solid #3a3a3a;
  border-right:  none;
  border-radius: var(--radius) 0 0 var(--radius);
  background:    #2a2a2a;
  color:         #fff;
  outline:       none;
  transition:    border-color var(--ease);
}

.b65-search input:focus         { border-color: var(--red); background: #333; }
.b65-search input::placeholder  { color: #666; }

.b65-search button {
  font-family:   var(--font-ui);
  font-size:     13px;
  font-weight:   700;
  padding:       8px 16px;
  background:    var(--red);
  color:         #fff;
  border:        none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor:        pointer;
  transition:    background var(--ease);
}

.b65-search button:hover { background: var(--red-dark); }


/* =============================================================
   6. PRIMARY NAVIGATION
   White background, black text, red underline on hover.
   ============================================================= */

.b65-nav {
  background:    #fff;
  border-bottom: 1px solid var(--border);
}

.b65-nav .b65-wrap { display: flex; flex-wrap: wrap; }

.b65-nav ul { display: flex; flex-wrap: wrap; width: 100%; }

.b65-nav ul li a {
  display:     block;
  font-family: var(--font-ui);
  font-size:   13px;
  font-weight: 600;
  color:       var(--black);
  padding:     10px 13px;
  position:    relative;
  transition:  color var(--ease);
}

/* Sliding red underline */
.b65-nav ul li a::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       13px;
  right:      13px;
  height:     2px;
  background: var(--red);
  transform:  scaleX(0);
  transition: transform 0.18s ease;
}

.b65-nav ul li a:hover,
.b65-nav ul li.current-menu-item > a {
  color: var(--red);
}

.b65-nav ul li a:hover::after,
.b65-nav ul li.current-menu-item > a::after {
  transform: scaleX(1);
}


/* =============================================================
   7. CATEGORY NAV STRIP
   Dark bar, red filled box on hover.
   ============================================================= */

.b65-cat-nav { background: var(--dark); }

.b65-cat-nav .b65-wrap { display: flex; flex-wrap: wrap; padding: 0 16px; }

.b65-cat-nav ul { display: flex; flex-wrap: wrap; }

.b65-cat-nav ul li a {
  display:     block;
  font-family: var(--font-ui);
  font-size:   12px;
  font-weight: 600;
  color:       #ccc;
  padding:     9px 13px;
  transition:  background var(--ease), color var(--ease);
}

.b65-cat-nav ul li a:hover,
.b65-cat-nav ul li.current-menu-item > a {
  background: var(--red);
  color:      #fff;
}


/* =============================================================
   8. FILTER BAR
   Currently hidden — filter bar HTML is commented out in index.php.
   To re-enable: uncomment the filter bar block in index.php.
   CSS is kept here so nothing breaks when you turn it back on.
   ============================================================= */

.b65-filter-bar {
  display:        flex;
  gap:            6px;
  flex-wrap:      wrap;
  align-items:    center;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--border);
  margin-bottom:  14px;
}

.b65-filter-bar .b65-filter-label {
  font-size:      11px;
  font-weight:    600;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right:   4px;
}

.b65-filter {
  font-family:   var(--font-ui);
  font-size:     11px;
  font-weight:   500;
  color:         var(--mid);
  padding:       4px 12px;
  border:        1px solid var(--border);
  border-radius: 20px;
  background:    #fff;
  transition:    background var(--ease), color var(--ease), border-color var(--ease);
}

.b65-filter:hover,
.b65-filter.active {
  background:   var(--black);
  color:        #fff;
  border-color: var(--black);
}


/* =============================================================
   9. DEAL CARD
   ============================================================= */

/* --- 9a. Card Shell --- */

.b65-card {
  background:     var(--card-bg);
  border:         1px solid var(--border-card);
  border-radius:  var(--radius-card);
  box-shadow:     var(--shadow-card);
  display:        flex;
  flex-direction: row;
  overflow:       hidden;
  position:       relative;
  margin-bottom:  10px;
  transition:     box-shadow var(--ease), transform var(--ease);
}

.b65-card:hover {
  box-shadow: var(--shadow-hover);
  transform:  translateY(-1px);
}

/* Left red accent bar — appears on hover */
.b65-card::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           0;
  bottom:        0;
  width:         5px;
  background:    var(--red);
  opacity:       0;
  transition:    opacity 0.18s ease;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.b65-card:hover::before { opacity: 1; }


/* --- 9b. Card Thumbnail ---
   Fixed 150×150 container. 10px padding gaps the image from
   the card border and the left accent bar.                    */

.b65-card-img {
  width:       150px;
  min-width:   150px;
  height:      150px;
  padding:     10px;
  background:  var(--card-bg);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  justify-content: center;
}

.b65-card-img img {
  width:         130px;
  height:        130px;
  object-fit:    cover;
  object-position: center;
  border-radius: var(--radius);
  transition:    transform 0.25s ease;
}

.b65-card:hover .b65-card-img img { transform: scale(1.04); }

/* Placeholder when no featured image is set */
.b65-card-img-placeholder {
  width:           130px;
  height:          130px;
  background:      var(--bg);
  border-radius:   var(--radius);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.b65-card-img-placeholder svg { opacity: 0.2; }


/* --- 9c. Card Body --- */

.b65-card-body {
  padding:        11px 14px 11px 12px;
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            5px;
}


/* --- 9d. Badge ---
   Text: set via ACF field "Badge Text" — type anything you want.
   Color: set via ACF field "Badge Color" — choose from dropdown.
   To add a new color: add a .b65-badge--yourcolor rule below,
   then add the matching choice in functions.php section 5.    */

.b65-badge {
  display:        inline-block;
  font-family:    var(--font-ui);
  font-size:      10px;
  font-weight:    700;
  padding:        2px 8px;
  border-radius:  3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  width:          fit-content;
  line-height:    1.3;
}

.b65-badge--red     { background: var(--red);    color: #fff; }
.b65-badge--green   { background: var(--green);  color: #fff; }
.b65-badge--blue    { background: var(--blue);   color: #fff; }
.b65-badge--purple  { background: var(--purple); color: #fff; }
.b65-badge--amber   { background: var(--amber);  color: #fff; }
.b65-badge--black   { background: var(--black);  color: #fff; }
.b65-badge--outline { background: transparent; color: var(--red); border: 1px solid var(--red); }


/* --- 9e. Card Title ---
   Large, spans full card body width. Clamped to 2 lines.
   To change size: edit font-size below.
   To allow more lines: change -webkit-line-clamp value.       */

.b65-card-title {
  font-family:        var(--font-ui);
  font-size:          16px;
  font-weight:        700;
  color:              var(--black);
  line-height:        1.3;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.b65-card-title a       { color: var(--black); display: block; }
.b65-card-title a:hover { color: var(--red); }


/* --- 9f. Card Excerpt ---
   Short description. Clamped to 2 lines.
   Word count controlled in functions.php → excerpt_length.   */

.b65-card-excerpt {
  font-family:        var(--font-ui);
  font-size:          12px;
  color:              #666;
  line-height:        1.45;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}


/* --- 9g. Card Footer Row (price + CTA button) ---
   Price left, button right. Button always right-aligned.      */

.b65-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  margin-top:      auto;
  padding-top:     8px;
  flex-wrap:       wrap;
}

/* Price group */
.b65-card-price {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  flex-wrap:   wrap;
}

.b65-price-now {
  font-family:    var(--font-display);
  font-size:      24px;
  font-weight:    800;
  color:          var(--red);
  letter-spacing: -0.5px;
  line-height:    1;
}

.b65-price-was {
  font-family:     var(--font-ui);
  font-size:       12px;
  color:           #bbb;
  text-decoration: line-through;
}

.b65-price-save {
  font-family:   var(--font-ui);
  font-size:     11px;
  font-weight:   700;
  color:         var(--green-text);
  background:    var(--green-bg);
  padding:       2px 6px;
  border-radius: 3px;
}

/* CTA Button */
.b65-card-cta {
  display:        inline-block;
  font-family:    var(--font-ui);
  font-size:      12px;
  font-weight:    700;
  color:          #fff;
  background:     var(--red);
  padding:        8px 16px;
  border-radius:  var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     background var(--ease), transform 0.1s ease;
}

.b65-card-cta:hover  { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.b65-card-cta:active { transform: translateY(0); }


/* =============================================================
   10. SINGLE POST PAGE
   ============================================================= */

.b65-single {
  background:    var(--card-bg);
  border:        1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-card);
  padding:       28px 32px;
}

.b65-single-eyebrow {
  font-family:    var(--font-ui);
  font-size:      11px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom:  8px;
}

.b65-single-title {
  font-family:   var(--font-ui);
  font-size:     24px;
  font-weight:   700;
  color:         var(--black);
  line-height:   1.25;
  margin-bottom: 14px;
}

/* Product image — floats left, capped at 150×150 */
.b65-single-image {
  float:         left;
  margin:        0 20px 16px 0;
  padding:       8px;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  background:    var(--card-bg);
}

.b65-single-image img {
  width:         150px;
  height:        150px;
  object-fit:    cover;
  border-radius: var(--radius);
  display:       block;
}

/* Deal meta strip */
.b65-deal-meta {
  display:       flex;
  gap:           16px;
  flex-wrap:     wrap;
  padding:       8px 12px;
  background:    #f8f8f6;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-family:   var(--font-ui);
  font-size:     12px;
  color:         var(--muted);
  margin-bottom: 16px;
  clear:         both;
}

.b65-deal-meta strong { color: var(--dark);  font-weight: 600; }
.b65-deal-meta .expiry { color: var(--red);  font-weight: 600; }

/* Price on single post */
.b65-single-price {
  display:       flex;
  align-items:   baseline;
  gap:           10px;
  flex-wrap:     wrap;
  margin-bottom: 16px;
}

.b65-single-price .b65-price-now { font-size: 32px; }
.b65-single-price .b65-price-was { font-size: 16px; }

/* CTA on single post */
.b65-single-cta {
  display:        inline-block;
  font-family:    var(--font-ui);
  font-size:      14px;
  font-weight:    700;
  color:          #fff;
  background:     var(--red);
  padding:        12px 28px;
  border-radius:  var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom:  20px;
  transition:     background var(--ease);
}

.b65-single-cta:hover { background: var(--red-dark); color: #fff; }

/* Body copy */
.b65-single-content { clear: both; }

.b65-single-content p {
  font-family:   var(--font-body);
  font-size:     15px;
  line-height:   1.75;
  color:         #3a3a3a;
  margin-bottom: 1rem;
}

.b65-single-content h2 {
  font-family:  var(--font-ui);
  font-size:    18px;
  font-weight:  700;
  color:        var(--black);
  margin:       1.6rem 0 0.6rem;
  padding-left: 10px;
  border-left:  3px solid var(--red);
}

.b65-single-content h3 {
  font-family: var(--font-ui);
  font-size:   15px;
  font-weight: 600;
  color:       var(--dark);
  margin:      1.2rem 0 0.4rem;
}

.b65-single-content ul,
.b65-single-content ol {
  list-style:    disc;
  padding-left:  1.4rem;
  margin-bottom: 1rem;
}

.b65-single-content li {
  font-family:   var(--font-body);
  font-size:     14px;
  line-height:   1.65;
  color:         #3a3a3a;
  margin-bottom: 0.3rem;
}

/* Affiliate disclosure */
.b65-disclosure {
  font-family:  var(--font-ui);
  font-size:    11px;
  color:        #bbb;
  border-top:   1px solid var(--border);
  padding-top:  12px;
  margin-top:   20px;
  line-height:  1.5;
}


/* =============================================================
   11. PROS / CONS BLOCK
   Use in post body: <div class="b65-pros-cons">...</div>
   ============================================================= */

.b65-pros-cons {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin:                1.2rem 0;
}

.b65-pros, .b65-cons {
  padding:       12px 14px;
  border-radius: var(--radius);
  border:        1px solid;
}

.b65-pros { background: #f0faf5; border-color: #b8dfc7; }
.b65-cons { background: #fdf4f4; border-color: #f0bcbc; }

.b65-pros h4, .b65-cons h4 {
  font-family:    var(--font-ui);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom:  7px;
}

.b65-pros h4 { color: var(--green); }
.b65-cons h4 { color: var(--red); }

.b65-pros ul, .b65-cons ul { list-style: none; padding: 0; }
.b65-pros li, .b65-cons li { font-size: 13px; margin-bottom: 4px; padding-left: 0; }
.b65-pros li::before { content: '✓ '; color: var(--green); font-weight: 700; }
.b65-cons li::before { content: '✗ '; color: var(--red);   font-weight: 700; }


/* =============================================================
   12. SIDEBAR & AD SLOT
   Sidebar is intentionally blank. Replace the placeholder div
   with your actual ad network tag when ready.
   ============================================================= */

.b65-ad-slot {
  width:           100%;
  min-height:      600px;
  background:      #f7f7f4;
  border:          1px dashed #ccc;
  border-radius:   var(--radius);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
}

.b65-ad-slot span {
  font-family:    var(--font-ui);
  font-size:      10px;
  color:          #ccc;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* =============================================================
   13. PAGINATION
   ============================================================= */

.b65-pagination {
  display:         flex;
  justify-content: center;
  gap:             5px;
  margin:          24px 0;
  flex-wrap:       wrap;
}

.b65-pagination a,
.b65-pagination span {
  font-family:   var(--font-ui);
  font-size:     12px;
  font-weight:   600;
  padding:       6px 12px;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  background:    #fff;
  color:         var(--mid);
  transition:    background var(--ease), color var(--ease), border-color var(--ease);
}

.b65-pagination a:hover  { background: var(--black); color: #fff; border-color: var(--black); }
.b65-pagination .current { background: var(--red);   color: #fff; border-color: var(--red); }


/* =============================================================
   14. FOOTER
   Three equal columns. Dark background to match logo/header.
   ============================================================= */

.b65-footer {
  background:  var(--black);
  margin-top:  32px;
  padding-top: 32px;
}

.b65-footer-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   32px;
  padding-bottom:        24px;
}

.b65-footer-col h4 {
  font-family:    var(--font-display);
  font-size:      12px;
  font-weight:    700;
  color:          #fff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom:  10px;
}

.b65-footer-col p,
.b65-footer-col li,
.b65-footer-col a {
  font-family: var(--font-ui);
  font-size:   12px;
  color:       #888;
  line-height: 1.7;
}

.b65-footer-col ul li { margin-bottom: 3px; }
.b65-footer-col a:hover { color: #fff; }

/* Bottom bar */
.b65-footer-bottom {
  border-top:      1px solid #2a2a2a;
  padding:         12px 0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             8px;
}

.b65-footer-bottom p,
.b65-footer-bottom a {
  font-family: var(--font-ui);
  font-size:   11px;
  color:       #555;
}

.b65-footer-bottom a:hover { color: #aaa; }


/* =============================================================
   15. ANIMATIONS
   ============================================================= */

/* Subtle dot-grid page texture */
body::before {
  content:          '';
  position:         fixed;
  inset:            0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.025) 1px, transparent 0);
  background-size:  22px 22px;
  pointer-events:   none;
  z-index:          0;
}

main, header, footer, nav { position: relative; z-index: 1; }

/* Staggered card fade-in */
@keyframes b65-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.b65-card                { animation: b65-fadein 0.25s ease both; }
.b65-card:nth-child(1)   { animation-delay: 0.02s; }
.b65-card:nth-child(2)   { animation-delay: 0.05s; }
.b65-card:nth-child(3)   { animation-delay: 0.08s; }
.b65-card:nth-child(4)   { animation-delay: 0.11s; }
.b65-card:nth-child(5)   { animation-delay: 0.14s; }
.b65-card:nth-child(6)   { animation-delay: 0.17s; }
.b65-card:nth-child(n+7) { animation-delay: 0.20s; }


/* =============================================================
   16. RESPONSIVE — TABLET (≤980px)
   ============================================================= */

@media (max-width: 980px) {
  .b65-layout              { grid-template-columns: 1fr; }
  .b65-sidebar             { display: none; }
  .b65-single              { padding: 20px; }
  .b65-pros-cons           { grid-template-columns: 1fr; }
  .b65-footer-grid         { grid-template-columns: 1fr 1fr; }
}


/* =============================================================
   17. RESPONSIVE — MOBILE (≤767px)
   ============================================================= */

@media (max-width: 767px) {

  .b65-topbar { display: none; }

  .b65-card { flex-direction: column; }

  .b65-card-img {
    width:         100%;
    min-width:     100%;
    height:        180px;
    padding:       0;
    border-right:  none;
    border-bottom: 1px solid var(--border);
  }

  .b65-card-img img {
    width:         100%;
    height:        180px;
    border-radius: 0;
  }

  .b65-card-img-placeholder {
    width:  100%;
    height: 180px;
    border-radius: 0;
  }

  .b65-card-cta      { display: block; text-align: center; width: 100%; }
  .b65-single        { padding: 16px; }
  .b65-single-image  { float: none; margin: 0 0 14px 0; }
  .b65-single-cta    { display: block; text-align: center; }
  .b65-footer-grid   { grid-template-columns: 1fr; gap: 20px; }
  .b65-footer-bottom { flex-direction: column; text-align: center; }
  .b65-search input  { font-size: 16px; } /* prevents iOS zoom */
}