/*
Theme Name: K9 Keep
Theme URI: https://k9keep.com
Author: IA Digital Hub
Description: Premium WooCommerce theme for K9 Keep, built on the brand's existing red/black/white/neutral identity.
Version: 1.0.6
Text Domain: k9-keep
Requires PHP: 7.4
Requires at least: 6.0
*/

/* =============================
   1. CSS VARIABLES / DESIGN SYSTEM
============================= */
:root{
  --color-primary: #E31B1B;
  --color-primary-dark: #B81414;
  --color-black: #0B0F14;
  --color-charcoal: #161B22;
  --color-white: #FFFFFF;
  --color-background: #FFFFFF;
  --color-background-alt: #F5F5F5;
  --color-text: #14181F;
  --color-text-muted: #5B6270;
  --color-text-inverse: #FFFFFF;
  --color-border: #E5E5E5;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --container-width: 1280px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;

  --transition-base: 200ms ease;
}

/* =============================
   2. RESET / BASE
============================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0 0 var(--space-sm); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
h1{ font-size: clamp(2.25rem, 4.5vw, 3.75rem); }
h2{ font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.5rem); }
p{ margin: 0 0 var(--space-sm); color: var(--color-text-muted); }

.k9-eyebrow{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

/* =============================
   3. LAYOUT UTILITIES
============================= */
.container{
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.section{ padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.section--alt{ background: var(--color-background-alt); }
.section--dark{ background: var(--color-black); color: var(--color-text-inverse); }
.section--dark p{ color: rgba(255,255,255,0.7); }
.section-head{ max-width: 640px; margin: 0 auto var(--space-lg); text-align: center; }
.section-head--left{ margin-left: 0; text-align: left; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--color-primary);
  color: #fff; padding: 0.75rem 1.25rem; z-index: 10000; border-radius: var(--radius-sm);
}
.skip-link:focus{ left: var(--space-sm); top: var(--space-sm); }

/* =============================
   4. BUTTONS
============================= */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  min-height: 44px;
}
.btn-primary{ background: var(--color-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible{ background: var(--color-primary-dark); }
.btn-secondary{ background: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn-secondary:hover, .btn-secondary:focus-visible{ background: var(--color-white); color: var(--color-black); }
.btn-outline-dark{ background: transparent; color: var(--color-black); border-color: var(--color-black); }
.btn-outline-dark:hover, .btn-outline-dark:focus-visible{ background: var(--color-black); color: #fff; }
.btn:focus-visible{ outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* =============================
   5. ANNOUNCEMENT BAR
============================= */
.k9-announcement{
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem var(--space-md);
}

/* =============================
   6. HEADER
============================= */
.k9-header{
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 999;
}
.k9-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.k9-logo img{ max-height: 58px; width: auto; }
.k9-logo{ font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; flex-shrink: 0; }
@media (max-width: 480px){
  .k9-logo img{ max-height: 42px; }
}
@media (min-width: 960px){
  .k9-logo img{ max-height: 68px; }
}

.k9-primary-nav{ display: none; flex: 1 1 auto; min-width: 0; flex-direction: column; row-gap: 0.6rem; }
.k9-primary-nav-row{ display: flex; align-items: center; flex-wrap: nowrap; column-gap: clamp(0.9rem, 1.6vw, 1.75rem); }
.k9-primary-nav-row--second{ column-gap: clamp(0.9rem, 1.6vw, 1.75rem); }
.k9-primary-nav li{ flex-shrink: 0; }
.k9-primary-nav a{
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.k9-primary-nav a:hover, .k9-primary-nav a:focus-visible{ color: var(--color-primary); }
.k9-primary-nav .current-menu-item > a{ color: var(--color-primary); border-color: var(--color-primary); }

.k9-header-actions{ display: flex; align-items: center; gap: var(--space-sm); }
.k9-icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: background var(--transition-base);
  position: relative;
}
.k9-icon-btn:hover, .k9-icon-btn:focus-visible{ background: var(--color-background-alt); }
.k9-icon-btn svg{ width: 20px; height: 20px; }
.k9-cart-count{
  position: absolute; top: 2px; right: 2px;
  background: var(--color-primary); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.k9-menu-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none; border: none;
}
.k9-menu-toggle svg{ width: 24px; height: 24px; }

.k9-mobile-drawer{
  position: fixed; inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 1001;
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
}
.k9-mobile-drawer.is-open{ transform: translateX(0); }
.k9-mobile-drawer-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
  z-index: 1000;
}
.k9-mobile-drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }
.k9-mobile-drawer-close{ background:none; border:none; margin-bottom: var(--space-md); width:40px; height:40px; }
.k9-mobile-drawer ul li{ border-bottom: 1px solid var(--color-border); }
.k9-mobile-drawer ul li a{
  display: block; padding: var(--space-sm) 0;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.95rem;
}

@media (min-width: 960px){
  .k9-primary-nav{ display: flex; }
  .k9-menu-toggle{ display: none; }
}

/* =============================
   7. HERO
============================= */
.k9-hero{
  position: relative;
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.k9-hero-media{
  position: absolute; inset: 0;
}
.k9-hero-media img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Opt-in only — NOT applied by default. Add class="k9-hero-media--overlay" in
   hero.php only if a specific future hero image genuinely lacks contrast for
   the text. Default hero images render at their true, unaltered appearance. */
.k9-hero-media--overlay::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,15,20,0.55) 0%, rgba(11,15,20,0.25) 55%, rgba(11,15,20,0.05) 100%);
}
.k9-hero-content{
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: var(--space-2xl) 0;
}
.k9-hero-content h1{ margin-bottom: var(--space-md); }
.k9-hero-content p{ color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 500px; }
.k9-hero-ctas{ display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

@media (max-width: 640px){
  .k9-hero{ min-height: auto; }
  .k9-hero-content{ padding: var(--space-xl) 0; }
}

/* =============================
   8. CATEGORY GRID
============================= */
.k9-cat-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 720px){ .k9-cat-grid{ grid-template-columns: repeat(4, 1fr); } }

.k9-cat-card{
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--color-background-alt);
}
.k9-cat-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.k9-cat-card:hover img, .k9-cat-card:focus-visible img{ transform: scale(1.05); }
.k9-cat-card::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
}
.k9-cat-card-label{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-sm);
  z-index: 2;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.k9-cat-card-fallback{
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
  background: linear-gradient(135deg, var(--color-charcoal), var(--color-black));
}
.k9-cat-card-fallback span{ color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; opacity: 0.5; }

/* =============================
   9. PRODUCT GRID
============================= */
.k9-product-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 720px){ .k9-product-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .k9-product-grid{ grid-template-columns: repeat(4, 1fr); } }

.k9-product-card{
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.k9-product-card:hover{ box-shadow: 0 12px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
.k9-product-card-media{
  position: relative;
  aspect-ratio: 1/1;
  background: var(--color-background-alt);
  overflow: hidden;
}
.k9-product-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.k9-product-card:hover .k9-product-card-media img{ transform: scale(1.04); }
.k9-badge-sale{
  position: absolute; top: 10px; left: 10px;
  background: var(--color-primary); color: #fff;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  z-index: 2;
}
.k9-product-card-body{ padding: var(--space-sm); display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.k9-product-card-title{
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--color-text);
}
.k9-product-card-title a:hover{ color: var(--color-primary); }
.k9-product-card-rating{ font-size: 0.75rem; color: var(--color-primary); }
.k9-product-card-price{ font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.k9-product-card-price del{ color: var(--color-text-muted); font-weight: 400; margin-right: 0.4rem; }
.k9-product-card-price ins{ text-decoration: none; color: var(--color-primary); }
.k9-product-card-cta{ margin-top: auto; padding-top: 0.5rem; }
.k9-product-card-cta a{
  display: block; text-align: center;
  padding: 0.65rem; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 2px solid var(--color-black); border-radius: var(--radius-sm);
  transition: background var(--transition-base), color var(--transition-base);
}
.k9-product-card-cta a:hover{ background: var(--color-black); color: #fff; }

/* =============================
   10. WHY K9 KEEP
============================= */
.k9-benefits-grid{
  display: grid; grid-template-columns: 1fr; gap: var(--space-lg);
}
@media (min-width: 720px){ .k9-benefits-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .k9-benefits-grid{ grid-template-columns: repeat(4, 1fr); } }
.k9-benefit{ text-align: center; }
.k9-benefit-icon{
  width: 56px; height: 56px; margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: rgba(227,27,27,0.1);
  display: flex; align-items: center; justify-content: center;
}
.k9-benefit-icon svg{ width: 26px; height: 26px; stroke: var(--color-primary); }
.k9-benefit h3{ font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; }
.k9-benefit p{ font-size: 0.9rem; }

/* =============================
   11. BRAND BANNER (cinematic)
============================= */
.k9-banner{
  position: relative;
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.k9-banner img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.k9-banner::after{ content:""; position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.k9-banner-content{ position: relative; z-index: 2; max-width: 640px; padding: 0 var(--space-md); }
.k9-banner-content h2{ margin-bottom: var(--space-md); }
.k9-banner-content .k9-accent{ color: var(--color-primary); }

/* =============================
   12. ABOUT / EDITORIAL SPLIT
============================= */
.k9-split{
  display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center;
}
@media (min-width: 900px){ .k9-split{ grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
.k9-split-media img{ border-radius: var(--radius-md); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.k9-split-media--reverse{ order: 2; }
@media (min-width: 900px){
  .k9-split--reverse .k9-split-media{ order: 2; }
  .k9-split--reverse .k9-split-text{ order: 1; }
}

/* =============================
   13. PROMO BANDS (calculator / membership)
============================= */
.k9-promo{
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}
@media (min-width: 780px){ .k9-promo{ grid-template-columns: 2fr 1fr; padding: var(--space-xl); } }
.k9-promo--dark{ background: var(--color-charcoal); color: #fff; }
.k9-promo--dark p{ color: rgba(255,255,255,0.75); }
.k9-promo-ctas{ display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* =============================
   14. TESTIMONIALS
============================= */
.k9-testimonial-grid{
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
}
@media (min-width: 780px){ .k9-testimonial-grid{ grid-template-columns: repeat(3, 1fr); } }
.k9-testimonial-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.k9-testimonial-stars{ color: var(--color-primary); font-size: 0.85rem; margin-bottom: 0.5rem; }
.k9-testimonial-name{ font-family: var(--font-display); font-weight: 700; margin-top: var(--space-sm); }
.k9-testimonial-date{ font-size: 0.75rem; color: var(--color-text-muted); }
.k9-testimonial-empty{
  text-align: center; padding: var(--space-lg);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

/* =============================
   15. NEWSLETTER
============================= */
.k9-newsletter{ text-align: center; }
.k9-newsletter-form{
  display: flex; flex-direction: column; gap: var(--space-sm);
  max-width: 420px; margin: var(--space-md) auto 0;
}
@media (min-width: 560px){ .k9-newsletter-form{ flex-direction: row; } }
.k9-newsletter-form input[type="email"]{
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  min-height: 44px;
}
.k9-newsletter-form input[type="email"]:focus-visible{ outline: 2px solid var(--color-primary); }

/* =============================
   16. FOOTER
============================= */
.k9-footer{ background: var(--color-black); color: rgba(255,255,255,0.85); padding: var(--space-2xl) 0 var(--space-md); }
.k9-footer-grid{
  display: grid; grid-template-columns: 1fr; gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 780px){ .k9-footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.k9-footer-logo img{ max-height: 40px; margin-bottom: var(--space-sm); }
.k9-footer h4{
  font-family: var(--font-display); text-transform: uppercase; font-size: 0.8rem;
  letter-spacing: 0.08em; color: #fff; margin-bottom: var(--space-sm);
}
.k9-footer ul li{ margin-bottom: 0.5rem; }
.k9-footer a{ color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: color var(--transition-base); }
.k9-footer a:hover{ color: var(--color-primary); }
.k9-footer-social{ display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.k9-footer-social a{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
}
.k9-footer-social svg{ width: 16px; height: 16px; }
.k9-footer-bottom{
  display: flex; flex-direction: column; gap: var(--space-sm);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-md);
  font-size: 0.8rem; color: rgba(255,255,255,0.5);
  text-align: center;
}
@media (min-width: 780px){ .k9-footer-bottom{ flex-direction: row; text-align: left; } }

/* =============================
   17. MISC
============================= */
.k9-placeholder-note{
  font-size: 0.7rem; color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  padding: 0.3rem 0.6rem; border-radius: var(--radius-sm);
  display: inline-block; margin-top: 0.5rem;
}
body{ overflow-x: hidden; }

/* =============================
   18. ABOUT US PAGE (page-scoped — does not affect homepage)
============================= */

/* Elegant image fallback — used only when an admin hasn't uploaded
   an image yet. No developer instructions shown to site visitors. */
.k9-about-image-fallback{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-charcoal), var(--color-black));
}
.k9-about-image-fallback--full{
  position: absolute; inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  height: 100%;
}

/* --- Hero --- */
.k9-about-hero{
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--color-black);
  overflow: hidden;
}
.k9-about-hero-media{ position: absolute; inset: 0; }
.k9-about-hero-media img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.k9-about-hero-content{
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: var(--space-2xl) 0;
}
.k9-about-hero-content h1{ margin: var(--space-xs) 0 var(--space-md); }
.k9-about-hero-content p{ color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 500px; margin-bottom: var(--space-md); }
@media (max-width: 640px){
  .k9-about-hero{ min-height: auto; }
  .k9-about-hero-content{ padding: var(--space-xl) 0; }
}

/* --- More Than Products (asymmetric full-bleed statement) --- */
.k9-about-more{
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  padding: var(--space-2xl) 0;
}
.k9-about-more-media{ position: absolute; inset: 0; }
.k9-about-more-media img{ width: 100%; height: 100%; object-fit: cover; }
.k9-about-more-media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,15,20,0.85) 0%, rgba(11,15,20,0.45) 60%, rgba(11,15,20,0.15) 100%);
}
.k9-about-more-content{ position: relative; z-index: 2; max-width: 620px; }
.k9-about-more-content h2{ margin-bottom: var(--space-sm); }
.k9-about-more-content p{ color: rgba(255,255,255,0.85); font-size: 1.15rem; }

/* --- Genetic Blueprint (cinematic brand statement) --- */
.k9-about-blueprint{
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.k9-about-blueprint img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.k9-about-blueprint::after{ content:""; position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.k9-about-blueprint .container{ position: relative; z-index: 2; text-align: center; }
.k9-about-blueprint-content{ max-width: 640px; margin: 0 auto; padding: var(--space-2xl) 0; }
.k9-about-blueprint-content h2{ margin-bottom: var(--space-md); }
.k9-about-blueprint-content p{ color: rgba(255,255,255,0.8); margin-bottom: var(--space-md); }

/* --- Final CTA (kept visually lighter than the hero) --- */
.k9-about-final-cta{ text-align: center; }
.k9-about-final-cta .section-head p{ margin-bottom: var(--space-md); }

/* --- Values section on the About page only: turn the shared .k9-benefit
   blocks into bordered, hoverable cards. Scoped under .k9-about-values so
   the homepage's own "Why K9 Keep" section (which reuses the same base
   classes) is completely unaffected. --- */
.k9-about-values .k9-benefit{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.k9-about-values .k9-benefit:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce){
  .k9-about-values .k9-benefit:hover{ transform: none; }
}

/* =============================
   20. SHOP PAGE (WooCommerce archive — page-scoped, does not affect
       any other page)
============================= */

.k9-shop-page{ background: var(--color-white); }

/* Breadcrumbs */
.k9-shop-breadcrumbs{
  padding: var(--space-sm) var(--space-md);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.k9-shop-breadcrumbs .woocommerce-breadcrumb{ margin: 0; }
.k9-shop-breadcrumbs a{ color: var(--color-text-muted); transition: color var(--transition-base); }
.k9-shop-breadcrumbs a:hover{ color: var(--color-primary); }

/* Shop hero/header */
.k9-shop-hero{
  background: var(--color-black);
  color: #fff;
  text-align: center;
  padding: var(--space-xl) 0 var(--space-lg);
}
.k9-shop-hero .k9-eyebrow{ color: var(--color-primary); }
.k9-shop-hero h1{ margin-bottom: var(--space-sm); }
.k9-shop-hero p{ color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto; }

.k9-shop-body{ padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }

/* Toolbar: result count + sorting on one row */
.k9-shop-toolbar{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.k9-shop-result-count .woocommerce-result-count{
  margin: 0; color: var(--color-text-muted); font-size: 0.9rem;
}
.k9-shop-ordering .woocommerce-ordering{ margin: 0; }
.k9-shop-ordering select{
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  min-height: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314181F' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 16px;
}
.k9-shop-ordering select:focus-visible{ outline: 2px solid var(--color-primary); }

/* Product grid — WooCommerce's <ul class="products"> mapped onto the
   same grid rules used by the homepage's Featured Products, and each
   <li class="product"> reuses .k9-product-card styling directly since
   content-product.php outputs that class on the <li> itself. */
.k9-shop-page ul.products{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
}

/* WooCommerce's own core CSS adds a float-layout clearfix
   (content:" "; display:table;) to ul.products::before/::after. That's
   inert in a float layout, but since ul.products is a CSS Grid here,
   an unneutralized ::before becomes a real grid item — producing an
   empty first cell before the first product on both the Shop grid and
   Related Products (which reuses the same ul.products markup). This
   only removes that leftover pseudo-element; it does not touch product
   cards, spacing, or column count. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  content: none;
  display: none;
}
@media (min-width: 560px){ .k9-shop-page ul.products{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .k9-shop-page ul.products{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .k9-shop-page ul.products{ grid-template-columns: repeat(4, 1fr); } }
.k9-shop-page ul.products li.product{ list-style: none; }

/* WooCommerce's own core CSS (woocommerce-layout.css) still ships a
   legacy float-based grid rule on li.product:
     width: 22.0%; float: left; margin: 0 3.8% 2.992em 0;
   Since ul.products is CSS Grid here, that explicit width resolves
   against the item's own grid column (not the full row), shrinking
   each card to ~22% of its column and leaving the rest empty. This
   neutralizes only those three conflicting properties — nothing about
   card design, images, or spacing changes; the grid's own `gap`
   already handles spacing between cards. Targets .woocommerce ul.products
   generally (not just the Shop page) because Related Products renders
   through this same unmodified WooCommerce markup and has the same bug. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width: 100%;
  float: none;
  margin: 0;
}

.k9-product-card-image-link{ display: block; }

/* Pagination */
.k9-shop-pagination{ display: flex; justify-content: center; }
.k9-shop-pagination .woocommerce-pagination ul.page-numbers{
  display: flex; align-items: center; gap: 0.4rem;
  list-style: none; margin: 0; padding: 0;
}
.k9-shop-pagination .page-numbers li{ display: inline-flex; }
.k9-shop-pagination .page-numbers a,
.k9-shop-pagination .page-numbers span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  color: var(--color-text);
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.k9-shop-pagination .page-numbers a:hover,
.k9-shop-pagination .page-numbers a:focus-visible{
  border-color: var(--color-primary); color: var(--color-primary);
}
.k9-shop-pagination .page-numbers .current{
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* Empty state */
.k9-shop-empty{
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.k9-shop-empty p{ max-width: 480px; margin: 0 auto var(--space-md); }

/* Archive description (optional shop-page content block from
   WooCommerce > Settings, if the admin ever adds any) */
.k9-shop-body .woocommerce-products-header__title{ display: none; } /* replaced by our own H1 in the hero */

/* Single product page — full styling for WooCommerce's own product
   markup (image/summary, title, price, variations, meta, tabs,
   related products). Targets WooCommerce's default class names
   directly rather than duplicating its templates, so this works
   automatically for every current and future product regardless of
   type (simple/variable), matching #21 of the brief. */
.k9-single-product-body{ padding-top: var(--space-lg); padding-bottom: var(--space-2xl); }

.woocommerce div.product{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary{
  flex: 1 1 420px;
  min-width: 0;
  width: auto !important; /* override WooCommerce's inline 48% width */
  float: none !important;
  margin: 0 !important;
}
@media (max-width: 780px){
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary{ flex-basis: 100%; }
}

.woocommerce div.product .product_title{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  max-width: 26ch;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.woocommerce div.product .price del{ color: var(--color-text-muted); font-weight: 400; margin-right: 0.5rem; }
.woocommerce div.product .price ins{ text-decoration: none; color: var(--color-primary); }

/* Variations */
.woocommerce div.product table.variations{ margin-bottom: var(--space-md); }
.woocommerce div.product table.variations td.label{
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: capitalize;
  padding-bottom: 0.5rem;
}
.woocommerce div.product table.variations select{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 320px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-height: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314181F' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 16px;
}

/* Quantity + Add to Cart row */
.woocommerce div.product form.cart{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.woocommerce div.product form.cart div.quantity{ margin: 0; }
.woocommerce div.product form.cart .qty{
  width: 70px; min-height: 44px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.6rem; font-size: 0.95rem; text-align: center;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9rem 1.75rem;
  min-height: 44px;
  background: var(--color-primary); color: #fff;
  border: 2px solid var(--color-primary); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background var(--transition-base);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover{ background: var(--color-primary-dark); }

/* SKU / Category / Brand meta line */
.woocommerce div.product .product_meta{
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.85rem; color: var(--color-text-muted);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.woocommerce div.product .product_meta > span{ display: block; }
.woocommerce div.product .product_meta a{ color: var(--color-text); font-weight: 600; }

/* Description / Additional Information / Reviews tabs */
.woocommerce-tabs{ margin-top: var(--space-2xl); }
.woocommerce-tabs ul.tabs{
  display: flex; gap: var(--space-lg);
  list-style: none; margin: 0 0 var(--space-lg); padding: 0;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-tabs ul.tabs li{ margin: 0; }
.woocommerce-tabs ul.tabs li a{
  display: inline-block; padding: 0.75rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a{ color: var(--color-primary); border-color: var(--color-primary); }
.woocommerce-Tabs-panel{ max-width: 800px; line-height: 1.75; }
.woocommerce-Tabs-panel h2{ margin-bottom: var(--space-sm); }
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li{ color: var(--color-text-muted); }

/* Related products — heading only; the grid/cards automatically
   reuse the same ul.products / .k9-product-card styling as the
   Shop page, since this section is still inside .k9-shop-page and
   WooCommerce renders each related product through the same
   content-product.php override used everywhere else. */
.related.products{ margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); }
.related.products > h2{ margin-bottom: var(--space-lg); }

/* ---------------------------------------------------------------------
   Dosage Calculators hub page (page-dosage-calculators.php).
   Reuses .k9-product-card (same card look as the Shop page) inside its
   own grid wrapper, since this page isn't a WooCommerce archive and
   doesn't output WooCommerce's ul.products class.
   --------------------------------------------------------------------- */
.k9-calc-hub-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
}
@media (min-width: 560px){ .k9-calc-hub-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .k9-calc-hub-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .k9-calc-hub-grid{ grid-template-columns: repeat(4, 1fr); } }
.k9-calc-hub-grid .k9-calc-card{ list-style: none; }
.k9-calc-card-button{ width: 100%; text-align: center; }

/* ---------------------------------------------------------------------
   Product-page calculator (rendered via woocommerce_single_product_summary,
   priority 8 — between the title and the rating/price block, matching
   the original Shopify layout). Lives inside .woocommerce div.product
   .summary, so it already inherits the same content width as the rest
   of the purchase column — no new container introduced.
   --------------------------------------------------------------------- */
.k9-product-calculator{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-background-alt);
}

.k9-product-calculator-title{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}

.k9-product-calculator-form{
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.k9-product-calculator-label{
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.k9-product-calculator-input{
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
}
.k9-product-calculator-input:focus-visible{ outline: 2px solid var(--color-primary); }

.k9-product-calculator-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.9rem 1.5rem;
  background: var(--color-black);
  color: #fff;
  border: 2px solid var(--color-black);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-base);
}
.k9-product-calculator-button:hover,
.k9-product-calculator-button:focus-visible{ background: var(--color-primary); border-color: var(--color-primary); }

.k9-product-calculator-error{
  margin: var(--space-sm) 0 0;
  padding: 0.6rem 0.9rem;
  background: #FDEDED;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  font-size: 0.85rem;
}

.k9-product-calculator-result{
  margin: var(--space-sm) 0 0;
  padding: 0.75rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}

.k9-product-calculator-disclaimer{
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: var(--space-sm) 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--color-text-muted);
}

@media (max-width: 480px){
  .k9-product-calculator{ padding: var(--space-sm); }
}

/* ---------------------------------------------------------------------
   Header search overlay (header.php #k9-search-overlay, wired up in
   assets/js/main.js). Reuses the same design tokens, z-index scale,
   and open/close transition pattern already used by the mobile drawer
   above — this is not a new visual language, just the same system
   applied to a centered modal instead of a side drawer.
   --------------------------------------------------------------------- */
.k9-search-overlay{
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh var(--space-md) var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.k9-search-overlay.is-open{ opacity: 1; pointer-events: auto; }

.k9-search-overlay-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.k9-search-panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background: var(--color-black);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.k9-search-close{
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
}
.k9-search-close svg{ width: 20px; height: 20px; }

.k9-search-form{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.k9-search-input{
  flex: 1;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
}
.k9-search-input:focus-visible{ outline: 2px solid var(--color-primary); }

.k9-search-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-base);
}
.k9-search-submit:hover,
.k9-search-submit:focus-visible{ background: var(--color-primary-dark); }
.k9-search-submit svg{ width: 20px; height: 20px; }

@media (max-width: 600px){
  .k9-search-overlay{ padding: 8vh var(--space-sm) var(--space-sm); }
  .k9-search-panel{ padding: var(--space-md) var(--space-sm) var(--space-sm); }
}

/* =========================================================================
   MEMBERSHIP PAGE (page-membership.php)
   All content is pulled from K9 Keep -> Membership settings
   (inc/membership-page-settings.php). CSS below only handles layout —
   no text, prices, or images are hard-coded here.
   ========================================================================= */

.k9-membership-page{ background: var(--color-white); }

/* --- Hero --- */
.k9-mem-hero{
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-color: var(--color-black);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: var(--space-2xl) 0;
}
.k9-mem-hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,20,0.75) 0%, rgba(11,15,20,0.9) 100%);
}
.k9-mem-hero-content{ position: relative; z-index: 2; max-width: 720px; }
.k9-mem-hero-content h1{ color: #fff; margin: var(--space-xs) 0 var(--space-sm); }
.k9-mem-hero-subheading{ font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: var(--space-sm); }
.k9-mem-hero-text{ color: rgba(255,255,255,0.85); font-size: 1.05rem; margin-bottom: var(--space-lg); }
.k9-mem-hero-buttons{ display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* --- Introduction --- */
.k9-mem-intro{ padding: var(--space-2xl) 0 var(--space-xl); text-align: center; }
.k9-mem-intro .container{ max-width: 760px; }
.k9-mem-intro h2{ margin-bottom: var(--space-sm); }
.k9-mem-intro p{ color: var(--color-text-muted); font-size: 1.1rem; }

/* --- Four membership cards --- */
.k9-mem-cards-section{ padding: var(--space-xl) 0 var(--space-2xl); background: var(--color-background-alt); }
.k9-mem-cards{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}
@media (min-width: 640px){ .k9-mem-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .k9-mem-cards{ grid-template-columns: repeat(4, 1fr); } }

.k9-mem-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
}
.k9-mem-card-featured{
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(227,27,27,0.12);
}
.k9-mem-card-badge{
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}
.k9-mem-card-head{ margin-bottom: var(--space-sm); }
.k9-mem-card-head h3{ font-size: 1.2rem; margin-bottom: 0.2rem; }
.k9-mem-card-price{ font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--color-primary); margin: 0.2rem 0; }
.k9-mem-card-label{ font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.k9-mem-card-desc{ color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: var(--space-sm); }
.k9-mem-card-features{
  list-style: none; margin: 0 0 var(--space-sm); padding: 0;
  flex: 1;
}
.k9-mem-card-features li{
  padding: 0.4rem 0 0.4rem 1.4rem;
  position: relative;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.k9-mem-card-features li:last-child{ border-bottom: none; }
.k9-mem-card-features li::before{
  content: "✓";
  position: absolute; left: 0; top: 0.4rem;
  color: var(--color-primary);
  font-weight: 700;
}
.k9-mem-card-note{ font-size: 0.82rem; color: var(--color-text-muted); font-style: italic; margin-bottom: var(--space-sm); }
.k9-mem-card-button{ width: 100%; text-align: center; margin-top: auto; }

/* --- Comparison table --- */
.k9-mem-compare{ padding: var(--space-2xl) 0; }
.k9-mem-compare h2{ text-align: center; margin-bottom: var(--space-lg); }
.k9-mem-compare-table-wrap{ overflow-x: auto; }
.k9-mem-compare-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.k9-mem-compare-table th, .k9-mem-compare-table td{
  padding: 0.85rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.k9-mem-compare-table th:first-child, .k9-mem-compare-table td:first-child{ text-align: left; }
.k9-mem-compare-table thead th{
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-black);
  color: #fff;
}
.k9-mem-compare-table tbody tr:nth-child(even){ background: var(--color-background-alt); }

@media (max-width: 640px){
  .k9-mem-compare-table thead{ display: none; }
  .k9-mem-compare-table, .k9-mem-compare-table tbody, .k9-mem-compare-table tr, .k9-mem-compare-table td{ display: block; width: 100%; min-width: 0; }
  .k9-mem-compare-table tr{ margin-bottom: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
  .k9-mem-compare-table td{
    text-align: right !important;
    padding-left: 45%;
    position: relative;
    border-bottom: 1px solid var(--color-border);
  }
  .k9-mem-compare-table td:last-child{ border-bottom: none; }
  .k9-mem-compare-table td::before{
    content: attr(data-label);
    position: absolute; left: 1rem; top: 0.85rem;
    font-weight: 700;
    text-align: left;
  }
}

/* --- More Than a Membership (system section) --- */
.k9-mem-system{ padding: var(--space-2xl) 0; background: var(--color-black); color: #fff; text-align: center; }
.k9-mem-system h2{ color: #fff; margin-bottom: var(--space-sm); }
.k9-mem-system-text{ color: rgba(255,255,255,0.75); max-width: 640px; margin: 0 auto var(--space-lg); }
.k9-mem-system-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-md);
  text-align: left;
}
@media (min-width: 640px){ .k9-mem-system-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .k9-mem-system-grid{ grid-template-columns: repeat(4, 1fr); } }
.k9-mem-system-block{ border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: var(--space-md); }
.k9-mem-system-block h3{ color: #fff; font-size: 1.1rem; margin-bottom: 0.3rem; }
.k9-mem-system-tag{
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.k9-mem-system-block p{ color: rgba(255,255,255,0.75); font-size: 0.92rem; }

/* --- Performance Club feature section --- */
.k9-mem-pc{ padding: var(--space-2xl) 0; }
.k9-mem-pc-grid{ display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
@media (min-width: 960px){ .k9-mem-pc-grid{ grid-template-columns: 1.3fr 1fr; } }
.k9-mem-pc-copy h2{ margin: 0.3rem 0 var(--space-sm); }
.k9-mem-pc-copy > p{ color: var(--color-text-muted); margin-bottom: var(--space-md); }
.k9-mem-pc-features{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); }
.k9-mem-pc-feature h4{ font-size: 0.95rem; margin-bottom: 0.15rem; }
.k9-mem-pc-feature p{ font-size: 0.85rem; color: var(--color-text-muted); }
.k9-mem-pc-preview-card{
  background: var(--color-black);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.k9-mem-pc-preview-label{ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; }
.k9-mem-pc-preview-dog{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; }
.k9-mem-pc-preview-stat{ font-size: 1rem; color: rgba(255,255,255,0.85); margin: 0.2rem 0; }
.k9-mem-pc-preview-note{ font-size: 0.78rem; font-style: italic; color: var(--color-text-muted); margin-top: var(--space-sm); }

/* --- Start Free (basic section) --- */
.k9-mem-basic2{ padding: var(--space-2xl) 0; background: var(--color-background-alt); text-align: center; }
.k9-mem-basic2 h2{ margin-bottom: var(--space-sm); }
.k9-mem-basic2-text{ color: var(--color-text-muted); max-width: 640px; margin: 0 auto var(--space-lg); }
.k9-mem-basic2-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-md);
  text-align: left;
  margin-bottom: var(--space-xl);
}
@media (min-width: 640px){ .k9-mem-basic2-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ .k9-mem-basic2-grid{ grid-template-columns: repeat(5, 1fr); } }
.k9-mem-basic2-block{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-sm); }
.k9-mem-basic2-block h4{ font-size: 0.95rem; margin-bottom: 0.2rem; }
.k9-mem-basic2-block p{ font-size: 0.85rem; color: var(--color-text-muted); }
.k9-mem-basic2-upsell{
  max-width: 560px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}
.k9-mem-basic2-upsell h3{ margin-bottom: 0.3rem; }
.k9-mem-basic2-upsell p{ color: var(--color-text-muted); margin-bottom: var(--space-sm); }

/* --- Built for people who manage more --- */
.k9-mem-biz{ padding: var(--space-2xl) 0; }
.k9-mem-biz h2{ text-align: center; margin-bottom: var(--space-lg); }
.k9-mem-biz-grid{ display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 720px){ .k9-mem-biz-grid{ grid-template-columns: repeat(2, 1fr); } }
.k9-mem-biz-block{ background: var(--color-black); color: #fff; border-radius: var(--radius-md); padding: var(--space-lg); }
.k9-mem-biz-block h3{ color: #fff; font-size: 1.4rem; margin-bottom: 0.2rem; }
.k9-mem-biz-tagline{ color: rgba(255,255,255,0.8); margin-bottom: var(--space-sm); }
.k9-mem-biz-for-label{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.55); margin-bottom: 0.3rem; }
.k9-mem-biz-for{ list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.k9-mem-biz-for li{ padding: 0.2rem 0; color: rgba(255,255,255,0.85); font-size: 0.92rem; }

/* --- FAQ --- */
.k9-mem-faq{ padding: var(--space-2xl) 0; background: var(--color-background-alt); }
.k9-mem-faq h2{ text-align: center; margin-bottom: var(--space-lg); }
.k9-mem-faq-list{ max-width: 760px; margin: 0 auto; }
.k9-mem-faq-item{ border-bottom: 1px solid var(--color-border); }
.k9-mem-faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-sm) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
}
.k9-mem-faq-icon{ font-size: 1.3rem; color: var(--color-primary); flex-shrink: 0; transition: transform var(--transition-base); }
.k9-mem-faq-item.is-open .k9-mem-faq-icon{ transform: rotate(45deg); }
.k9-mem-faq-answer{ padding: 0 0 var(--space-sm); }
.k9-mem-faq-answer p{ color: var(--color-text-muted); margin: 0; }

/* --- Final CTA --- */
.k9-mem-final{ position: relative; padding: var(--space-2xl) 0; background-color: var(--color-black); background-size: cover; background-position: center; color: #fff; text-align: center; }
.k9-mem-final-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,20,0.75) 0%, rgba(11,15,20,0.9) 100%); }
.k9-mem-final-content{ position: relative; z-index: 2; }
.k9-mem-final h2{ color: #fff; margin-bottom: var(--space-sm); }
.k9-mem-final p{ color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto var(--space-lg); }
.k9-mem-final-buttons{ display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

@media (max-width: 480px){
  .k9-mem-hero, .k9-mem-intro, .k9-mem-cards-section, .k9-mem-compare, .k9-mem-system, .k9-mem-pc, .k9-mem-basic2, .k9-mem-biz, .k9-mem-faq, .k9-mem-final{
    padding-left: 0; padding-right: 0;
  }
  .k9-mem-hero-buttons, .k9-mem-final-buttons{ flex-direction: column; align-items: stretch; }
  .k9-mem-hero-buttons .btn, .k9-mem-final-buttons .btn{ width: 100%; text-align: center; }
}

/* ==========================================================================
   My Dogs (WooCommerce My Account -> My Dogs endpoint)
   ========================================================================== */
.k9-my-dogs{ max-width: 900px; }
.k9-my-dogs h2{ margin-bottom: var(--space-md); }
.k9-my-dogs h3{ margin: var(--space-lg) 0 var(--space-sm); }

.k9-dog-notice{ padding: var(--space-sm) var(--space-md); border-radius: 6px; margin-bottom: var(--space-md); font-weight: 600; }
.k9-dog-notice-success{ background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc0; }
.k9-dog-notice-error{ background: #fdecea; color: #b3261e; border: 1px solid #f4c7c3; }

.k9-dog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.k9-dog-card{
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: var(--space-sm);
  text-align: center;
  background: var(--color-white);
}
.k9-dog-card-photo{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--space-xs);
}
.k9-dog-card-photo-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: #f4f4f4;
}
.k9-dog-card h3{ margin: var(--space-xs) 0 4px; font-size: 1.1rem; }
.k9-dog-meta{ font-size: 0.9rem; color: #666; margin: 2px 0; }
.k9-dog-card-actions{ display: flex; gap: 8px; justify-content: center; margin-top: var(--space-sm); }
.k9-dog-delete-form{ display: inline; }
.k9-dog-delete-btn{ background: none; border: 1px solid var(--color-black); cursor: pointer; }

.k9-dog-form-wrap{
  border-top: 1px solid #e5e5e5;
  padding-top: var(--space-md);
}
.k9-dog-form .form-row{ margin-bottom: var(--space-sm); }
.k9-dog-form label{ display: block; font-weight: 600; margin-bottom: 4px; }
.k9-dog-form .input-text{ width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; }
.k9-dog-current-photo{ display: block; width: 100px; height: 100px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }

@media (min-width: 600px){
  .k9-dog-form .form-row-first{ display: inline-block; width: 48%; margin-right: 4%; }
  .k9-dog-form .form-row-last{ display: inline-block; width: 48%; }
}

/* ---------------------------------------------------------------
 * Share Your Results page + Results & Progress (My Account) tab
 * ------------------------------------------------------------- */
.k9-results-hero{ padding: var(--space-2xl) 0 var(--space-lg); background: var(--color-black); color: #fff; text-align: center; }
.k9-results-hero .eyebrow{ color: var(--color-red, #d0202a); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-xs); }
.k9-results-hero h1{ color: #fff; margin-bottom: var(--space-sm); }
.k9-results-hero-text{ color: rgba(255,255,255,0.85); max-width: 700px; margin: 0 auto; }

.k9-results-form-section{ padding: var(--space-2xl) 0; }
.k9-results-form{ max-width: 720px; margin: 0 auto; }
.k9-results-form h3{ margin: var(--space-lg) 0 var(--space-sm); }
.k9-results-form h3:first-child{ margin-top: 0; }
.k9-results-form .form-row{ margin-bottom: var(--space-sm); }
.k9-results-form label{ display: block; font-weight: 600; margin-bottom: 4px; }
.k9-results-form .input-text,
.k9-results-form select,
.k9-results-form textarea{ width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }

@media (min-width: 600px){
  .k9-results-form .form-row-first{ display: inline-block; width: 48%; margin-right: 4%; vertical-align: top; }
  .k9-results-form .form-row-last{ display: inline-block; width: 48%; vertical-align: top; }
}

.k9-results-performance{ border: 1px solid #ddd; border-radius: 6px; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
.k9-results-performance legend{ font-weight: 600; padding: 0 4px; }
.k9-results-checkbox-inline{ display: inline-block; margin: 4px 16px 4px 0; font-weight: 400; }
.k9-results-checkbox-inline input{ margin-right: 6px; }

.k9-results-permission{ background: #f7f7f7; border-radius: 6px; padding: var(--space-md); margin: var(--space-md) 0; }
.k9-results-permission .description{ margin-top: 0; margin-bottom: var(--space-sm); color: #555; }
.k9-results-checkbox-block{ display: block; font-weight: 400; margin-bottom: var(--space-xs); }
.k9-results-checkbox-block input{ margin-right: 8px; }

.k9-results-success{ max-width: 600px; margin: 0 auto; text-align: center; }
.k9-results-success h2{ margin-bottom: var(--space-sm); }

.k9-my-results{ max-width: 900px; }
.k9-my-results h2{ margin-bottom: var(--space-md); }
.k9-results-dog-block{ margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid #eee; }
.k9-results-dog-block h3{ margin-bottom: var(--space-sm); }
.k9-results-empty{ color: #666; margin-bottom: var(--space-sm); }
.k9-results-table{ width: 100%; border-collapse: collapse; margin-bottom: var(--space-sm); }
.k9-results-table th,
.k9-results-table td{ text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 0.92rem; }
.k9-results-table th{ background: #f7f7f7; font-weight: 600; }

/* =============================
   CONTACT US PAGE (page-scoped)
============================= */
.k9-contact-page{ background: var(--color-white); }
.k9-contact-intro{ text-align: left; padding-bottom: var(--space-md); }
.k9-contact-intro-text{ max-width: 560px; }

.k9-contact-body{ padding: 0 0 var(--space-2xl); }

.k9-contact-details-strip{
  list-style: none; margin: 0 0 var(--space-lg); padding: 0 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
}
.k9-contact-details-strip li{ display: flex; flex-direction: column; gap: 0.2rem; }
.k9-contact-detail-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.k9-contact-details-strip a{ color: var(--color-text); font-size: 0.95rem; }
.k9-contact-details-strip a:hover{ color: var(--color-primary); }

.k9-contact-form{ display: flex; flex-direction: column; gap: var(--space-md); max-width: 640px; }
.k9-contact-details-strip{ max-width: 640px; }
.k9-form-row-pair{ display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 560px){
  .k9-form-row-pair{ grid-template-columns: 1fr 1fr; }
}
.k9-form-row{ display: flex; flex-direction: column; gap: 0.4rem; }
.k9-form-row label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.k9-form-row input,
.k9-form-row textarea{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-height: 48px;
  transition: border-color var(--transition-base);
}
.k9-form-row input:hover,
.k9-form-row textarea:hover{ border-color: rgba(0,0,0,0.3); }
.k9-form-row textarea{ min-height: 140px; resize: vertical; }
.k9-form-row input:focus-visible,
.k9-form-row textarea:focus-visible{ outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.k9-contact-form .btn{ align-self: flex-start; }
.k9-contact-honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.k9-contact-notice{
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
}
.k9-contact-notice--success{ background: #e9f7ee; color: #1a6b34; border: 1px solid #bfe6cc; }
.k9-contact-notice--error{ background: #fbeaea; color: var(--color-primary-dark); border: 1px solid #f3c6c6; }

/* =============================
   LIVE SEARCH RESULTS (autosuggest dropdown)
============================= */
.k9-search-results{ display: none; margin-top: var(--space-sm); max-height: 60vh; overflow-y: auto; }
.k9-search-results.is-open{ display: grid; grid-template-columns: 1fr; gap: var(--space-lg); border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-sm); }
@media (min-width: 640px){
  .k9-search-results.is-open{ grid-template-columns: 1fr 2fr; }
}
.k9-search-col-label{
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.k9-search-suggestions-list{ list-style: none; margin: 0; padding: 0; }
.k9-search-suggestions-list li{ margin-bottom: 0.5rem; }
.k9-search-suggestions-list a{
  font-size: 0.9rem; color: rgba(255,255,255,0.85);
  transition: color var(--transition-base);
}
.k9-search-suggestions-list a:hover, .k9-search-suggestions-list a:focus-visible{ color: var(--color-primary); }
.k9-search-results-list{ list-style: none; margin: 0; padding: 0; }
.k9-search-result-link{
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: background var(--transition-base);
}
.k9-search-result-link:hover, .k9-search-result-link:focus-visible{ background: rgba(255,255,255,0.06); }
.k9-search-result-link img{
  width: 56px; height: 56px; object-fit: contain;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.k9-search-result-info{ display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.k9-search-result-name{
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k9-search-result-price{ font-size: 0.85rem; color: rgba(255,255,255,0.65); }

/* =============================
   FLOATING PROMO BADGE (site-wide, hidden until configured)
============================= */
.k9-promo-badge{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg) translateX(-50%);
  transform-origin: left top;
  background: var(--color-black);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 900;
  transition: background var(--transition-base);
  white-space: nowrap;
}
.k9-promo-badge:hover, .k9-promo-badge:focus-visible{ background: var(--color-primary); }
@media (max-width: 480px){
  .k9-promo-badge{ font-size: 0.7rem; padding: 0.55rem 0.9rem; }
}

/* =============================
   DOG TRACKING (My Dogs > per-dog page)
============================= */
.k9-dog-detail > p:first-child{ margin-bottom: var(--space-md); }
.k9-dog-log-section{
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.k9-dog-log-section h3{ margin-bottom: var(--space-sm); }
.k9-dog-log-form{ display: flex; flex-direction: column; gap: var(--space-sm); max-width: 520px; margin-bottom: var(--space-md); }
.k9-dog-log-table{ width: 100%; border-collapse: collapse; }
.k9-dog-log-table th, .k9-dog-log-table td{ text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.k9-dog-log-table th{ background: var(--color-background-alt); font-weight: 600; }
.k9-dog-log-delete{ background: none; border: none; color: #a00; cursor: pointer; font-size: 0.85rem; padding: 0; text-decoration: underline; }
.k9-dog-log-delete:hover{ color: #700; }

/* =============================
   MY ACCOUNT (premium sidebar + content layout)
============================= */
.woocommerce-account .woocommerce{
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}
@media (min-width: 782px){
  .woocommerce-account .woocommerce{ flex-direction: row; }
}

.woocommerce-MyAccount-navigation{
  width: 100%;
  flex-shrink: 0;
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
@media (min-width: 782px){
  .woocommerce-MyAccount-navigation{ width: 240px; position: sticky; top: var(--space-lg); }
}
.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.woocommerce-MyAccount-navigation-link a{
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  transition: background var(--transition-base), color var(--transition-base);
}
.woocommerce-MyAccount-navigation-link a:hover{ background: rgba(0,0,0,0.05); }
.woocommerce-MyAccount-navigation-link.is-active a{
  background: var(--color-primary);
  color: #fff;
}
.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top: 0.5rem; border-top: 1px solid var(--color-border); padding-top: 0.5rem; }

.woocommerce-MyAccount-content{
  flex: 1;
  min-width: 0;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{ margin-bottom: var(--space-sm); }
.woocommerce-MyAccount-content table.shop_table{ width: 100%; border-collapse: collapse; }
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td{ text-align: left; padding: 10px; border-bottom: 1px solid var(--color-border); }
.woocommerce-MyAccount-content .woocommerce-form-row{ margin-bottom: var(--space-md); }
.woocommerce-MyAccount-content .woocommerce-form-row input,
.woocommerce-MyAccount-content .woocommerce-form-row select{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  width: 100%;
}

.k9-dog-upgrade-prompt{
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border-top: none;
}
.k9-dog-upgrade-prompt h3{ margin-bottom: 0.4rem; }
.k9-dog-upgrade-prompt p{ margin-bottom: var(--space-sm); }

/* =============================
   KENNEL DASHBOARD (compact dog table for Kennel/Wholesale accounts)
============================= */
.k9-kennel-dog-table{ width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); }
.k9-kennel-dog-table th, .k9-kennel-dog-table td{ text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.k9-kennel-dog-table th{ background: var(--color-background-alt); font-weight: 600; font-family: var(--font-display); }
.k9-kennel-dog-table-actions a{ margin-right: 12px; font-weight: 600; color: var(--color-primary); }
.k9-kennel-dog-table-actions a:hover{ text-decoration: underline; }

/* =============================
   WHOLESALE DASHBOARD
============================= */
.k9-wholesale-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
@media (min-width: 782px){
  .k9-wholesale-grid{ grid-template-columns: 1fr 1fr; }
}
.k9-wholesale-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.k9-wholesale-card h3{ margin-bottom: var(--space-sm); }
.k9-wholesale-order-list,
.k9-wholesale-favorites-list{ list-style: none; margin: 0; padding: 0; }
.k9-wholesale-order-list li,
.k9-wholesale-favorites-list li{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.k9-wholesale-order-list li:last-child,
.k9-wholesale-favorites-list li:last-child{ border-bottom: none; }
.k9-wholesale-favorites-list a{ font-weight: 600; color: var(--color-text); }
.k9-wholesale-favorites-list a:hover{ color: var(--color-primary); }
.k9-wholesale-invite-form{ display: flex; gap: 0.6rem; flex-wrap: wrap; }
.k9-wholesale-invite-form input[type="email"]{
  flex: 1; min-width: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}
.k9-wholesale-save-button{ margin: var(--space-sm) 0; }

/* Minimum-order progress indicator (Cart / Checkout, Wholesale only) */
.k9-wholesale-minimum-notice{
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.k9-wholesale-minimum-notice p{ margin-bottom: 0.5rem; font-weight: 600; }
.k9-wholesale-progress-bar{
  width: 100%; height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.k9-wholesale-progress-bar-fill{
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* =============================
   ROTATING CHAMPIONS BANNER (homepage hero)
============================= */
.k9-champions-carousel{ position: relative; width: 100%; height: 100%; overflow: hidden; }
.k9-champions-slide{
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s ease;
}
.k9-champions-slide.is-active{ opacity: 1; visibility: visible; }
.k9-champions-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.k9-champions-caption{
  position: absolute;
  bottom: var(--space-lg);
  right: var(--space-lg);
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; text-align: right;
  z-index: 2;
}
.k9-champions-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.k9-champions-breed{ font-size: 0.85rem; opacity: 0.85; }
.k9-champions-achievement{ font-size: 0.85rem; color: var(--color-primary); font-weight: 600; }
.k9-champions-dots{
  position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem; z-index: 3;
}
.k9-champions-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none; padding: 0; cursor: pointer;
  transition: background var(--transition-base);
}
.k9-champions-dot.is-active{ background: #fff; }
@media (max-width: 600px){
  .k9-champions-caption{ left: var(--space-sm); right: var(--space-sm); text-align: left; }
}

/* =============================
   SHOP PAGE — subcategory tiles on parent categories
============================= */
.k9-shop-subcat-grid{ margin-bottom: var(--space-2xl); }

.k9-shop-all-note{ color: var(--color-text-muted); font-size: 0.9rem; margin: -1rem 0 var(--space-lg); }