:root{--bg:#0b0f14;--bg2:#0f1620;--card:#121a26;--text:#e9eef5;--muted:#b8c4d6;--muted2:#8ea0b8;--border:rgba(255,255,255,.10);--shadow:0 10px 28px rgba(0,0,0,.30);--accent:#6aa7ff;--accent2:#6aa7ff;--radius:18px;--radius2:26px;--max:1120px;--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
html,body{height:100%}
body{margin:0;font-family:var(--font);background:radial-gradient(1000px 700px at 20% -10%, rgba(106,167,255,.20), transparent 55%),radial-gradient(900px 700px at 90% 0%, rgba(124,227,179,.16), transparent 55%),linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
a{color:inherit;text-decoration:none} a:hover{opacity:.95}
.container{max-width:var(--max);margin:0 auto;padding:24px 16px 70px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;top:0;left:0;right:0;width:100%;z-index:100;background:rgba(11,15,20,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar .inner{max-width:var(--max);margin:0 auto;width:100%;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg, rgba(106,167,255,.95), rgba(124,227,179,.85));box-shadow:var(--shadow);display:grid;place-items:center;font-weight:900;color:#071018;letter-spacing:-.5px}
.brand .name{font-weight:900;letter-spacing:-.6px;font-size:18px}
.brand .tag{font-size:12px;color:var(--muted2);margin-top:2px}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* The navigation bar is fixed to the top of the viewport so it sits flush with
   the top edge. No extra top padding is applied to the body; the page’s
   content already begins below the header thanks to existing container
   padding. */
/* To prevent page content from disappearing under the fixed header, we
   increase the top padding on the main container. The header's height is
   larger on mobile screens when the navigation items stack, so we allocate
   more space there. */
.container {
  padding-top: 108px;
}
@media (max-width: 550px) {
  .container {
    padding-top: 160px;
  }
}

/*
 * Ensure in-page anchor links (e.g. #dogs, #cats, #articles) scroll the
 * corresponding sections into view below the fixed header instead of
 * underneath it. The scroll-margin-top property reserves space equal to
 * the header height on both desktop and mobile.
 */
section[id] {
  scroll-margin-top: 108px;
}
@media (max-width: 550px) {
  section[id] {
    scroll-margin-top: 160px;
  }
}
/* Mobile navigation grid layout (4+4 items) */
@media (max-width: 550px) {
  /* Increase the z-index on mobile to ensure the header sits above other content.
     The header is already fixed globally so we don't need to redefine its position here. */
  .topbar {
    z-index: 1000;
  }
  /* On mobile, we don't add extra top padding because the header is already fixed and flush to the top. */
  /* Stack brand and nav vertically for more space */
  .topbar .inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    gap: 8px;
  }
  /* Brand layout: keep logo and text horizontal */
  .brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  /* Shrink logo for mobile */
  .brand-logo {
    width: 42px;
    height: 42px;
  }
  /* Adjust brand name size */
  .brand .name {
    font-size: 18px;
  }
  /* Show tagline below the brand name with smaller font */
  .brand .tag {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    margin: 1px 0 0;
    opacity: .9;
  }
  /* Hide the back button completely */
  #backBtn {
    display: none;
  }
  /* Mobile nav: compact grid (no horizontal scroll, less height) */
  .nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 6px;
    width: 100%;
    justify-items: stretch;
    margin-top: 6px;
  }

  /* On very small phones, fall back to 4 columns */
  @media (max-width: 380px) {
    .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .nav .pill {
    margin: 0;
    padding: 5px 6px;
    font-size: 11px;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    min-width: 0;
  }
}

/*
 * Articles appear inside a `.container.article` element. The base `.article`
 * rule sets a uniform `padding: 18px`, which inadvertently overrides the
 * top padding added to `.container` (108px on desktop, 160px on small
 * screens) to offset the fixed header. As a result, the article heading
 * and intro text are hidden beneath the navigation bar. To restore the
 * intended spacing, explicitly set a larger `padding-top` on the
 * `.container.article` selector that adds the header offset on top of the
 * original 18px padding. The `calc()` function keeps the math clear.
 */
.container.article {
  /* 18px base padding + 108px header offset */
  padding-top: calc(18px + 108px);
}
@media (max-width: 550px) {
  .container.article {
    /* 18px base padding + 160px header offset on small screens */
    padding-top: calc(18px + 160px);
  }
}
.pill{padding:10px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text);background:rgba(255,255,255,.03);font-weight:700;font-size:13px}
.pill:hover{background:rgba(255,255,255,.06)}
.hero{padding:30px 0 8px}
.hero-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:18px;align-items:stretch}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hcard{border:1px solid var(--border);border-radius:var(--radius2);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));box-shadow:var(--shadow);overflow:hidden}
.hcard .pad{padding:22px 22px 18px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
/* Base H1 style: enlarge for improved hierarchy */
/*
 * Global H1 styling
 *
 * Increase the base heading size and weight to create a more dramatic
 * introduction on the homepage. A larger h1 helps establish a clear
 * visual hierarchy, signalling to readers that this line is the most
 * important headline on the page. We also slightly increase the
 * letter‑spacing to improve legibility at large sizes.
 */
h1{
  margin:12px 0 12px;
  font-size:56px;
  line-height:1.05;
  letter-spacing:-1.4px;
  font-weight:900;
}
@media (max-width:520px){h1{font-size:34px}}
.lead{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 16px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-weight:900}
.btn.primary{background:linear-gradient(135deg, rgba(106,167,255,.92), rgba(124,227,179,.84));border-color:transparent;color:#071018}
.btn.small{padding:10px 12px;font-weight:800;font-size:13px;border-radius:999px}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{display:inline-flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--muted);font-weight:700;font-size:13px}
.badge b{color:var(--text)}
.panel{padding:20px;display:flex;flex-direction:column;gap:14px}
.panel .mini{border:1px solid var(--border);border-radius:var(--radius);background:rgba(0,0,0,.22);padding:14px}
.panel h3{margin:0 0 6px;font-size:14px}
.panel p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.panel .mini .list{margin:10px 0 0;padding-left:16px;color:var(--muted);font-size:13px;line-height:1.55}
.section{margin-top:22px}
.section h2{font-size:22px;margin:0 0 10px;letter-spacing:-.4px}
.grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:14px}
.card{grid-column:span 6;border:1px solid var(--border);border-radius:var(--radius2);background:rgba(255,255,255,.03);box-shadow:var(--shadow);overflow:hidden}
@media (max-width:900px){.card{grid-column:span 12}}
.card .pad{padding:18px 18px 16px}
.card .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted2);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.card h3{margin:10px 0 6px;font-size:18px;letter-spacing:-.4px}
.card p{margin:0;color:var(--muted);line-height:1.55}
.card .actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.tag{padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-weight:800;font-size:12px;background:rgba(255,255,255,.03)}
.footer{margin-top:38px;border-top:1px solid var(--border);padding-top:18px;color:var(--muted2);font-size:13px;line-height:1.6}
.footer a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
hr.sep{border:0;border-top:1px solid var(--border);margin:16px 0}
.article-wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;margin-top:14px}
@media (max-width:980px){.article-wrap{grid-template-columns:1fr}}
.article{border:1px solid var(--border);border-radius:var(--radius2);background:rgba(255,255,255,.03);box-shadow:var(--shadow);padding:18px}
.article h1{font-size:36px;margin-top:6px}
.article h2{font-size:22px;margin:22px 0 10px}
.article h3{font-size:18px;margin:18px 0 8px}
.article p,.article li{color:var(--muted);line-height:1.7}
.article ul{padding-left:18px}
.note{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);padding:12px 14px;border-radius:16px;color:var(--muted);line-height:1.6}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.18);overflow:hidden}
.table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:13px;vertical-align:top}
.table th{color:var(--text);font-weight:900}
.table tr:last-child td{border-bottom:0}
.aside{border:1px solid var(--border);border-radius:var(--radius2);background:rgba(255,255,255,.02);box-shadow:var(--shadow);padding:14px}
.aside h3{margin:4px 0 8px;font-size:14px}
.aside p,.aside li{color:var(--muted);font-size:13px;line-height:1.6}
.aside ul{padding-left:18px;margin:8px 0}
.aside .box{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20);border-radius:16px;padding:12px;margin-top:10px}
.small{font-size:12px;color:var(--muted2)}
.disclosure{border:1px solid rgba(255,255,255,.14);background:rgba(124,227,179,.08);border-radius:16px;padding:12px 14px;color:var(--muted);line-height:1.6}
body.light{--bg:#f6f8fb;--bg2:#eef2f7;--text:#0c1220;--muted:#334155;--muted2:#55657b;--border:rgba(12,18,32,.10);--shadow:0 10px 28px rgba(16,24,40,.10)}
body.light .topbar{background:rgba(246,248,251,.75)}

.hero-img{width:100%;height:auto;display:block;border-bottom:1px solid var(--border);}
.table .thumb{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);overflow:hidden;flex:0 0 auto;}
.table .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.prodcell{display:flex;gap:10px;align-items:flex-start;}

.rating{color:#ffcc66;font-weight:900;letter-spacing:.1em}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.trust .pill{background:rgba(255,255,255,.05)}
.ctabar{position:sticky;bottom:0;background:rgba(11,15,20,.9);border-top:1px solid var(--border);padding:10px;display:flex;justify-content:center;gap:12px;z-index:60}
.ctabar a{font-weight:900}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:900px){.testimonials{grid-template-columns:1fr}}
.testi{border:1px solid var(--border);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)}
.testi b{color:var(--text)}

.brand-logo{
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  flex: 0 0 auto;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
}
.footer-links a{
  color:var(--text);
  opacity:.85;
  text-decoration:none;
}
.footer-links a:hover{opacity:1;text-decoration:underline;}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 800px){
  .grid-2{grid-template-columns: 1fr;}
}


/* Minimal cookie bar (mobile-safe) */
#cookieBar{
  position:fixed;
  left:0; right:0; bottom:0;
  background:#111;
  color:#fff;
  padding:12px 14px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  font-size:13px;
  line-height:1.35;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:9999;
  box-shadow:0 -6px 18px rgba(0,0,0,.35);
}
#cookieBar{flex-wrap:wrap}
#cookieBar button{
  margin-left:auto;
  background:#22c55e;
  color:#fff;
  border:0;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}

/* ---------------------------------------------------------------------
 *  Product comparison table styles
 *
 *  The product table allows readers to compare our top picks at a glance.
 *  It follows the same visual language as other tables on the site but
 *  includes a rating column with star characters. Stars are coloured
 *  gold to draw the eye without overwhelming the page. Columns collapse
 *  gracefully on smaller screens thanks to the responsive grid wrapper.
 */
.product-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  overflow:hidden;
}
.product-table th,
.product-table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
.product-table th{color:var(--text);font-weight:900;}
.product-table tr:last-child td{border-bottom:0;}
.product-table .prodcell{display:flex;gap:10px;align-items:flex-start;}
.product-table .thumb{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  overflow:hidden;
  flex:0 0 auto;
}
.product-table .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.product-table .rating{
  color:#ffd966;
  font-weight:900;
  letter-spacing:.05em;
}

/* ---------------------------------------------------------------------
 *  Newsletter sign-up styles
 *
 *  The newsletter card uses the same card pattern as other content
 *  sections. It provides a simple email form with ample spacing and
 *  accessible colours. The form doesn't submit to a backend; instead
 *  developers can hook up their own newsletter provider later.
 */
.newsletter{
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}

/*
 * Section titles
 *
 * These rules enlarge and bold the headings for sections such as Dog guides,
 * Cat guides and Latest articles. A larger font and stronger weight help
 * create a clear hierarchy and improve the premium feel of the page.
 */
.section-title h2{
  /*
   * Make section titles more prominent with a larger font size and
   * bolder weight. This helps differentiate between primary sections on
   * the homepage and gives the site a more premium feel.
   */
  font-size:32px;
  font-weight:900;
  letter-spacing:-0.6px;
  margin:0 0 8px;
}

/*
 * Mission section styles
 *
 * The mission statement sits between the hero and the pet sections. It
 * introduces visitors to BestPetsCo’s purpose and tone of voice. The
 * styles mirror the card pattern but provide slightly more generous
 * typography to draw attention without overpowering other content.
 */
.mission{
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.mission h2{
  margin:0 0 10px;
  font-size:28px;
  font-weight:900;
  letter-spacing:-0.6px;
}
.mission p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

/*
 * Article featured guide styling
 *
 * We tint the image container for articles with a subtle blue overlay to
 * differentiate it from the pet guides while keeping a cohesive palette.
 */
.featured-guide.article .featured-img{
  background:rgba(106,167,255,.12);
}

/* Hide the original article grid in the homepage. The new article layout
 * is inserted after the grid. */
#articles .guide-grid{
  display:none;
}

/* Hide the entire legacy articles section to reduce clutter. We keep the
 * markup in the HTML for potential future use, but the section will not
 * render on the homepage. */
#articles{
  display:none;
}

/*
 * Reduce visual clutter in the Featured articles section by hiding
 * additional secondary article cards. Only the first secondary card
 * remains visible; subsequent cards are not shown. This helps focus
 * the reader on one key supporting article while keeping the layout
 * balanced.
 */
#featured-articles .secondary-grid > a:nth-child(n+2){
  display:none;
}
.newsletter h2{
  margin:0 0 6px;
  font-size:22px;
  letter-spacing:-.4px;
}
.newsletter p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.newsletter-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.newsletter-form input[type="email"]{
  flex:1 1 240px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.newsletter-form input[type="email"]::placeholder{color:var(--muted2);}
.newsletter-form button{
  padding:10px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(106,167,255,.92), rgba(124,227,179,.84));
  color:#071018;
  font-weight:900;
  cursor:pointer;
}

/* ---------------------------------------------------------------------
 *  Trust section styles
 *
 *  The trust block highlights why readers can rely on BestPetsCo. It uses
 *  generous typography and checkmark bullets to convey authority and
 *  credibility. The list items describe concrete evaluation criteria and
 *  independence from paid promotions.
 */
.trust{
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  margin-top:32px;
}
.trust .pad{
  padding:20px 24px;
}
.trust h2{
  font-size:32px;
  margin:0 0 12px;
  font-weight:900;
  letter-spacing:-0.6px;
}
.trust ul{
  list-style:none;
  padding-left:0;
  margin:0;
}
.trust ul li{
  position:relative;
  padding-left:32px;
  margin-bottom:10px;
  font-size:16px;
  line-height:1.55;
  color:var(--muted);
}
.trust ul li::before{
  content:'\2714';
  position:absolute;
  left:0;
  top:2px;
  color:var(--accent);
  font-weight:900;
}

/* ---------------------------------------------------------------------
 *  Featured guide and secondary grid styles
 *
 *  To create a clearer visual hierarchy on the homepage, each pet section
 *  contains one prominent featured guide followed by a smaller grid of
 *  secondary guides. The featured guide uses a split layout with a large
 *  image and explanatory text. Secondary cards reuse the existing guide
 *  card pattern but adjust the proportions and spacing.
 */
.featured-guide{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  overflow:hidden;
}
@media (max-width:800px){
  .featured-guide{
    grid-template-columns:1fr;
  }
}
.featured-guide .featured-img{
  position:relative;
  overflow:hidden;
}
.featured-guide .featured-img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.featured-guide .featured-content{
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.featured-guide .featured-content h3{
  margin:0 0 10px;
  /* Elevate the featured guide title to stand out from secondary cards */
  font-size:24px;
  letter-spacing:-.4px;
}
.featured-guide .featured-content p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}
.featured-guide .featured-content a{
  width:max-content;
}

.secondary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
  margin-top:18px;
}
.secondary-grid > a{
  /* Ensure secondary cards expand evenly when fewer items are shown */
  flex:1;
}

/* Hide additional secondary cards in dog and cat sections to reduce clutter. Only
 * the first secondary guide remains visible. */
/* Hide additional secondary cards in dog and cat sections: use nth-of-type to skip
 * whitespace text nodes and ensure only the first anchor remains visible. */
/*
 * Show all secondary guide cards for both the dog and cat sections. We previously
 * hid every card after the first one to reduce clutter, but this prevented
 * important guides (like the power chewer checklist and indoor cat toys) from
 * appearing. Removing the rule allows all secondary cards within the dog and
 * cat sections to be visible. If you wish to limit the number of cards in
 * other sections (such as the featured articles), leave those rules in place.
 */
/* Formerly:
   #dogs .secondary-grid > a:nth-of-type(n+2),
   #cats .secondary-grid > a:nth-of-type(n+2) {
     display: none;
   }
*/
.guide-card.secondary{
  flex-direction:row;
}
.guide-card.secondary .guide-icon{
  width:52px;
  height:52px;
}
.guide-card.secondary .guide-text h3{
  font-size:18px;
}
.guide-card.secondary .guide-text p{
  font-size:13.5px;
  line-height:1.5;
}


/* --- Navigation polish (fix clipped text + add back button) --- */
.topbar{position:fixed;top:0;left:0;right:0;width:100%;z-index:999;background:rgba(11,15,20,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar .inner{max-width:var(--max);margin:0 auto;padding:12px 18px;display:flex;gap:14px;align-items:center;justify-content:space-between}
/* Desktop navigation layout - apply only on screens wider than 550px to avoid overriding mobile grid */
@media (min-width: 551px){
  .nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;line-height:1.1;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.04);color:var(--text);text-decoration:none;font-weight:600}
.pill:hover{background:rgba(255,255,255,.07)}
.pill:active{transform:translateY(1px)}
.pill-icon{width:16px;height:16px;display:inline-block}
.pill-btn{cursor:pointer}
@media(max-width:760px){.topbar .inner{padding:10px 14px}.pill{padding:9px 12px;font-weight:600}}

/* --- Premium calm homepage blocks --- */
.hero-mini{padding:28px 0 8px}
.hero-mini h1{
  /*
   * Increase the size and spacing of the hero heading for stronger impact.
   * This heading is the first thing visitors see. A larger font and
   * adjusted letter‑spacing establish authority and make the hero feel
   * premium. We also increase the margin below to create breathing room
   * before the supporting paragraph.
   */
  font-size:50px;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 16px;
}
.hero-mini p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}
.twin-heads{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.head-card{border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;background:rgba(255,255,255,.03)}
.head-card .head-media{display:flex;align-items:center;gap:14px;padding:14px 16px}
.head-img{width:54px;height:54px;border-radius:999px;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.head-card h2{margin:0;font-size:18px}
.head-card p{margin:4px 0 0;color:var(--muted);font-size:14px}
.head-actions{padding:0 16px 16px}
.head-actions a{display:inline-flex}
@media(max-width:860px){.twin-heads{grid-template-columns:1fr} .hero-mini h1{font-size:36px}}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.section-title h2{margin:0}
.section-title .hint{color:var(--muted2);font-size:13.5px}

/*
 * Premium guide grid
 *
 * The guide-grid and guide-card classes provide a more engaging card style for
 * our dog, cat and article lists. Instead of plain text boxes, each card has
 * a leading circular icon coloured by category, with tidy spacing and hover
 * effects. The layout remains responsive, collapsing to a single column on
 * small screens.
 */
.guide-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width:700px){
  .guide-grid{grid-template-columns:1fr;}
}
.guide-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:transform .15s ease,background .15s ease;
}
.guide-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.05);
}
/* Guide card icon styling
 *
 * Icons are displayed inside a circular container. We switch from plain SVG icons
 * to photographic thumbnails for the dog and cat sections. The base style
 * defines the size, layout and overflow behaviour. Individual categories set
 * their own border and tint colours.
 */
.guide-card .guide-icon{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid transparent;
}
/* Dog icons use a blue accent. The border colour inherits from the colour
 * property so it's easy to override. We remove the tinted background so
 * photographic thumbnails can show through cleanly.
 */
.guide-card.dog .guide-icon{
  /* Use the unified brand accent for dog icons */
  color: #6aa7ff;
  border-color: #6aa7ff;
  background: none;
}
/* Cat icons use a green accent. */
.guide-card.cat .guide-icon{
  /* Cat icons now share the same blue accent for a cohesive palette */
  color: #6aa7ff;
  border-color: #6aa7ff;
  background: none;
}
/* Article icons retain the violet tint but also get a border for consistency. */
.guide-card.article .guide-icon{
  /* Article icons also adopt the unified blue accent; a light tint remains for subtle distinction */
  color: #6aa7ff;
  border-color: #6aa7ff;
  background: rgba(106,167,255,.12);
}
/* Ensure icons (either SVGs or images) fill the container */
.guide-card .guide-icon svg,
.guide-card .guide-icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
/* Remove fill inheritance on article SVGs so the violet color applies correctly */
.guide-card.article .guide-icon svg{
  fill: currentColor;
}
.guide-card .guide-text h3{
  margin:0;
  /* Increase guide card title size and weight for stronger emphasis */
  font-size:20px;
  font-weight:800;
  letter-spacing:-.4px;
}
.guide-card .guide-text p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}


/* ===============================
   LIGHT MODE BOTTOM BAR FIX
   Better visibility + hierarchy
================================= */

body:not(.dark-mode) .bottom-bar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}

body:not(.dark-mode) .bottom-bar a {
    font-weight: 600;
}

/* Primary CTA */
body:not(.dark-mode) .bottom-bar .primary-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

/* Secondary CTA */
body:not(.dark-mode) .bottom-bar .secondary-btn {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1;
}

body:not(.dark-mode) .bottom-bar .secondary-btn:hover {
    background: #cbd5e1 !important;
}



/* ===============================
   FIX: CTABAR (bottom sticky bar)
   Theme system uses body.light for LIGHT mode.
================================= */

body.light .ctabar{
  background: rgba(255,255,255,0.98) !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.08) !important;
}

body.light .ctabar .btn{
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

body.light .ctabar .btn:hover{
  background: #cbd5e1 !important;
}

body.light .ctabar .btn.primary{
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  color: #ffffff !important;
  border-color: rgba(29,78,216,0.35) !important;
  box-shadow: 0 6px 14px rgba(37,99,235,0.25) !important;
}


/* Chewy CTA enhancements (dark-mode first)
   Site default is dark. Light mode is enabled via `body.light`. */
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.1rem;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  color:#ffffff;
  background:linear-gradient(135deg, rgba(106,167,255,.95), rgba(79,141,255,.92));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  transform:translateY(0);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.34); filter:brightness(1.03); }
.cta-btn:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(0,0,0,.26); }

.quick-picks{
  margin:1.2rem 0 1.6rem 0;
  padding:1.1rem 1.1rem;
  border-radius:20px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.quick-picks h2{ margin:.1rem 0 .35rem 0; font-size:1.25rem; }
.quick-picks p{ margin:0 0 .9rem 0; opacity:.88; }

.quick-picks-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.9rem;
}
.quick-pick-card{
  padding:1rem;
  border-radius:18px;
  background:rgba(18,26,38,.92);
  border:1px solid rgba(255,255,255,.10);
}
.quick-pick-card.featured{
  grid-column:1 / -1;
  padding:1.05rem 1.05rem;
}
.quick-pick-head{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  margin-bottom:.7rem;
}
.quick-pick-logo{
  width:34px;
  height:34px;
  flex:0 0 34px;
  opacity:.95;
}
.quick-pick-kicker{
  font-size:.85rem;
  letter-spacing:.02em;
  opacity:.92;
  margin-bottom:.05rem;
}
.quick-pick-title{
  font-weight:950;
  margin:0;
  line-height:1.15;
}
.quick-pick-sub{
  color:var(--muted);
  font-size:.95rem;
  margin:.25rem 0 0 0;
  opacity:1;
}
.quick-pick-bullets{
  margin:.55rem 0 .85rem 1.05rem;
  padding:0;
  color:rgba(255,255,255,.90);
}
.quick-pick-bullets li{ margin:.25rem 0; }

@media (max-width: 860px){
  .quick-picks-grid{ grid-template-columns:1fr; }
}

.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:.75rem .9rem;
  background:rgba(11,15,20,.72);
  backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--border);
  z-index:9999;
}
.sticky-cta-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.sticky-cta-text{ font-weight:900; }

/* Light mode overrides */
body.light .cta-btn{
  color:#0c1220;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,248,252,.96));
  border:1px solid rgba(12,18,32,.14);
  box-shadow:0 10px 22px rgba(16,24,40,.10);
}
body.light .quick-picks{
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.02);
}
body.light .quick-pick-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.08);
}
body.light .quick-pick-sub{ color:rgba(12,18,32,.72); }
body.light .quick-pick-bullets{ color:rgba(12,18,32,.86); }
body.light .quick-pick-kicker{ color:rgba(12,18,32,.70); }
body.light .quick-pick-logo{ opacity:.92; }
body.light .sticky-cta{
  background:rgba(255,255,255,.92);
  border-top:1px solid rgba(0,0,0,.10);
}

@media (max-width:860px){
  .quick-picks-grid{ grid-template-columns:1fr; }
  .sticky-cta-inner{ flex-direction:column; align-items:stretch; }
  .sticky-cta-text{ text-align:center; }
}



/* Product thumbnails (Quick Picks + tables) */
.quick-pick-logo.photo-thumb{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  padding:6px;
}
body.light .quick-pick-logo.photo-thumb{
  background: rgba(0,0,0,0.04);
}
.product-thumb{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:10px;
  background: rgba(255,255,255,0.06);
  padding:4px;
  vertical-align:middle;
  margin-right:10px;
}
body.light .product-thumb{
  background: rgba(0,0,0,0.04);
}
.product-cell{
  display:flex;
  align-items:center;
  gap:10px;
}


/* --- Mobile fit for Chewers tables (prevents page horizontal scroll) --- */
@media (max-width: 520px){
  /* Reduce columns so the table fits on phone screens */
  .product-table th:nth-child(3),
  .product-table td:nth-child(3),
  .product-table th:nth-child(5),
  .product-table td:nth-child(5),
  .product-table th:nth-child(6),
  .product-table td:nth-child(6){
    display:none;
  }

  .product-table th, .product-table td{
    padding:10px 8px;
  }

  /* Make CTA buttons wrap instead of forcing width */
  .product-table a,
  .product-table .btn,
  .product-table .cta-btn{
    white-space:normal;
    max-width:100%;
  }

  /* Prevent long product names from overflowing */
  .product-table td,
  .product-table th{
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
  }
}



/* Breadcrumbs */
.breadcrumb{
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 16px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
}
.breadcrumb a{
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumb a:hover{
  border-bottom-color: currentColor;
}
.breadcrumb .bc-sep{
  display: inline-block;
  margin: 0 8px;
  opacity: 0.6;
}
.breadcrumb .bc-current{
  opacity: 0.75;
}

@media (max-width: 560px){
  .breadcrumb{
    font-size: 12px;
    margin-top: 10px;
  }
}