/*
Theme Name: Zentrous
Theme URI: https://zentrous.marginmints.com
Author: Zentrous
Author URI: https://zentrous.marginmints.com
Description: A custom WooCommerce theme for Zentrous. Layout and measurements follow the store's approved Zero-style reference structure; branding, copy, products and implementation are Zentrous's own.
Version: 1.0.12
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zentrous
Tags: e-commerce, woocommerce, custom-menu, custom-logo, featured-images
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ==========================================================================
   Zentrous design system
   Poppins everywhere. Contained wrap. Orange brand accent, black chrome,
   dark-red card CTA (Zero's observed button colour), buy red for emphasis.
   ========================================================================== */
:root{
  --z-bg:#ffffff;
  --z-ink:#141414;
  --z-muted:#6f6a7d;
  --z-line:#e8e6ee;
  --z-black:#000000;
  --z-navy2:#26262b;
  --z-purple:#5e2391;
  --z-pink:#e0218a;
  --z-red:#d92323;
  --z-buy-red:#c8102e;
  --z-card-red:#7f1d1d;
  --z-gold:#f5a623;
  --z-yellow:#ffd21f;
  --z-green:#1a9e4b;
  --z-green-dark:#0f7a36;
  --z-orange:#ff6a1a;
  --z-soft:#f3f3f5;
  --z-cream:#fdf6ec;
  --z-card-border:#e8e8e8;
  --z-radius:12px;
  --z-wrap:1340px;
  --z-header-h:64px;
  --z-shadow:0 10px 30px rgba(20,20,20,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--z-bg);
  color:var(--z-ink);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit}
.z-wrap{width:min(var(--z-wrap),calc(100% - 40px));margin-inline:auto}
.z-wrap-narrow{width:min(920px,calc(100% - 40px));margin-inline:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.z-site-main{min-height:50vh}
.z-page-content{padding:28px 0 56px}
.z-page-content .entry-title{font-size:34px;line-height:1.15;margin:0 0 18px;font-weight:800}
.entry-content::after{content:"";display:block;clear:both}

/* Buttons */
.button,
.z-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:13px 28px;border:1px solid transparent;
  font-weight:700;font-size:14px;line-height:1;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.button:hover,.z-btn:hover{transform:translateY(-1px)}
.z-btn--black,.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--z-black);color:#fff}
.z-btn--outline{background:#fff;color:var(--z-ink);border-color:var(--z-ink)}
.z-btn--white{background:#fff;color:#000}
.z-btn--buy{background:var(--z-buy-red);color:#fff}

/* ==========================================================================
   Announcement marquee — a real element, site-wide (header.php)
   ========================================================================== */
.z-announcement{
  background:var(--z-orange);color:#1a0e00;overflow:hidden;position:relative;
  font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.z-announcement__track{
  display:flex;width:max-content;white-space:nowrap;
  animation:z-marquee 28s linear infinite;
}
.z-announcement__track span{padding:9px 0}
.z-announcement__track span::after{content:"•";margin:0 26px;opacity:.55}
@keyframes z-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.z-announcement__track{animation:none}}

/* ==========================================================================
   Header — black, sticky; logo left, nav centred, actions right
   ========================================================================== */
.z-header{
  position:sticky;top:0;z-index:900;background:var(--z-black);color:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.z-header__inner{
  display:flex;align-items:center;gap:18px;
  min-height:var(--z-header-h);padding:10px 0;
}
.z-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:0;flex:0 0 auto;max-width:250px}
.z-logo svg{height:40px;width:auto;display:block;flex:0 0 auto}
.z-logo__mark{flex:0 0 auto;display:block;width:40px;height:40px}
.z-logo__word{display:block;font-weight:900;font-size:23px;letter-spacing:.05em;line-height:1;color:#fff}
.z-logo__word em{font-style:normal;color:var(--z-orange)}
.z-logo__tag{display:block;margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.34em;color:#b9b9c9}
.z-logo img.custom-logo{display:block;height:40px;max-height:40px;width:auto;max-width:210px;object-fit:contain}
.z-primary-nav{min-width:0}
.z-primary-menu{
  display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.z-primary-menu>li{position:relative}
.z-primary-menu>li>a{
  display:block;padding:10px 13px;color:#fff;text-decoration:none;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.z-primary-menu>li>a:hover,.z-primary-menu>li:focus-within>a{color:var(--z-orange)}
/* Mega / dropdown panel */
.z-primary-menu .sub-menu{
  list-style:none;margin:0;padding:18px;
  position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,6px);
  min-width:240px;background:#111116;color:#fff;border:1px solid rgba(255,255,255,.10);
  border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:950;
}
.z-primary-menu li:hover>.sub-menu,.z-primary-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.z-primary-menu>li.menu-item-has-children>.sub-menu{
  display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:8px 26px;min-width:min(680px,86vw);
}
.z-primary-menu .sub-menu a{color:#e9e7f2;text-decoration:none;font-size:13.5px;font-weight:500;display:block;padding:5px 0}
.z-primary-menu .sub-menu a:hover{color:var(--z-orange)}
.z-primary-menu .sub-menu .sub-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent;padding:0;min-width:0;display:block}
.z-primary-menu .sub-menu>li.menu-item-has-children>a{font-weight:800;color:#fff;text-transform:uppercase;font-size:12px;letter-spacing:.08em;margin-bottom:4px}
.z-header__actions{display:flex;align-items:center;gap:6px}
.z-icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:999px;border:0;background:transparent;color:#fff;cursor:pointer;text-decoration:none;
}
.z-icon-btn:hover{background:rgba(255,255,255,.12)}
.z-icon-btn svg{width:21px;height:21px}
.z-cart-count{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--z-orange);color:#140a00;
  font-size:11px;font-weight:800;line-height:18px;text-align:center;
}
.z-cart-count.is-empty{display:none}
.z-nav-toggle{display:none}

/* Search overlay */
.z-search-overlay{
  position:fixed;inset:0;z-index:1200;background:rgba(8,8,12,.97);color:#fff;
  padding:86px 20px 40px;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s;
}
.z-search-overlay.is-open{opacity:1;visibility:visible}
.z-search-overlay__inner{width:min(860px,100%);margin-inline:auto}
.z-search-overlay form{display:flex;gap:10px}
.z-search-overlay input[type="search"]{
  flex:1;background:#17171d;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  color:#fff;padding:15px 22px;font-size:17px;outline:none;
}
.z-search-overlay__close{position:absolute;top:18px;right:22px}
.z-search-popular{margin-top:22px;color:#cfcbe0;font-size:14px}
.z-search-popular a{color:#fff;margin:0 12px 8px 0;display:inline-block}

/* Mobile nav panel */
.z-mobile-nav{display:none}

/* ==========================================================================
   Homepage components (used by Gutenberg blocks / theme sections alike)
   ========================================================================== */
.z-hero{margin-top:18px;border-radius:24px;overflow:hidden;background:var(--z-black)}
.z-hero .n2-ss-slider,.z-hero img{border-radius:24px}
.z-section{margin-top:44px}
.z-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.z-section-head h2{font-size:26px;line-height:1.15;margin:0;font-weight:800}
.z-section-head p{margin:6px 0 0;color:var(--z-muted);font-size:14.5px}
.z-section-head .z-view-all{flex:0 0 auto}
.z-view-all{background:var(--z-black);color:#fff;border-radius:999px;padding:10px 22px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0}
.z-cats-row{display:flex;gap:14px;justify-content:space-between;margin-top:34px;flex-wrap:wrap}
.z-cat-circle{flex:1;min-width:110px;text-align:center;text-decoration:none;background:none;border:0;cursor:pointer}
.z-cat-circle .ring{
  display:flex;align-items:center;justify-content:center;margin:0 auto;
  width:115px;height:115px;border-radius:50%;overflow:hidden;background:var(--z-soft);
  border:2px solid var(--z-line);transition:border-color .15s ease,transform .15s ease;
}
.z-cat-circle:hover .ring{border-color:var(--z-orange);transform:translateY(-2px)}
.z-cat-circle img{width:100%;height:100%;object-fit:cover}
.z-cat-circle h3,.z-cat-circle .z-cat-label{font-size:13px;font-weight:700;margin:10px 0 0;line-height:1.3}
.z-promo{
  margin-top:40px;border-radius:26px;color:#fff;padding:36px 40px;
  background:linear-gradient(105deg,#4a1578,#8e1163 58%,#e0218a);
  display:flex;align-items:center;gap:30px;overflow:hidden;
}
.z-promo__text{flex:1;min-width:min(430px,100%)}
.z-promo__eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.z-promo h2{font-size:32px;line-height:1.12;margin:8px 0 10px;font-weight:800}
.z-promo p{margin:0 0 18px;color:rgba(255,255,255,.92)}
.z-promo img{flex:0 1 420px;width:420px;max-width:46%;border-radius:18px;object-fit:cover}
.z-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.z-trust-item{background:var(--z-soft);border:1px solid var(--z-line);border-radius:16px;padding:18px}
.z-trust-item h3{margin:0 0 6px;font-size:16px;font-weight:800}
.z-trust-item p{margin:0;color:var(--z-muted);font-size:14px}
.z-moment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.z-moment-tile{position:relative;border-radius:18px;overflow:hidden;min-height:210px;background:var(--z-soft)}
.z-moment-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.z-moment-tile span{position:absolute;left:14px;bottom:12px;background:rgba(0,0,0,.72);color:#fff;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700}
.z-collabs-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.z-collab-tile{position:relative;border-radius:18px;overflow:hidden;background:var(--z-soft);min-height:230px}
.z-collab-tile img{width:100%;height:100%;object-fit:cover;display:block}
.z-collab-tile .z-btn{position:absolute;left:14px;bottom:14px;padding:10px 18px;font-size:12px}
.z-newsletter{background:var(--z-orange);border-radius:26px;padding:34px 40px;margin-top:44px;color:#160b00}
.z-newsletter h2{margin:0 0 8px;font-size:27px;line-height:1.15;font-weight:800}
.z-newsletter form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.z-newsletter input[type="email"]{flex:1;min-width:240px;border:0;border-radius:999px;padding:13px 20px}
.z-seo-block{margin-top:44px;color:#2b2833}
.z-seo-block h1{font-size:30px;line-height:1.2;font-weight:800}
.z-seo-block h2{font-size:22px;margin-top:28px;font-weight:800}

/* ==========================================================================
   WooCommerce product grids + cards (content-product.php)
   ========================================================================== */
.woocommerce ul.products,
ul.products.z-products{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  list-style:none;margin:0;padding:0;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product,
ul.products li.product.zentrous-card{
  float:none;width:auto;margin:0;background:#fff;border:1px solid var(--z-card-border);
  border-radius:var(--z-radius);padding:14px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 2px rgba(20,20,20,.03);
}
.zentrous-card__media{position:relative;border-radius:8px;overflow:hidden;background:#f5f5f5;aspect-ratio:1/1}
.zentrous-card__media a{display:block;width:100%;height:100%}
.zentrous-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.zentrous-card__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2;pointer-events:none}
.z-badge{
  display:inline-flex;align-items:center;width:max-content;max-width:100%;
  border-radius:6px;padding:5px 8px;font-size:11px;font-weight:800;line-height:1;letter-spacing:.03em;text-transform:uppercase;
}
.z-badge--sale{background:var(--z-black);color:#fff}
.z-badge--feature{background:var(--z-pink);color:#fff}
.z-badge--stock{background:var(--z-yellow);color:#171200}
.zentrous-card__body{display:flex;flex-direction:column;gap:7px;flex:1}
.zentrous-card__title{font-size:16px;line-height:1.28;font-weight:700;margin:0}
.zentrous-card__title a{text-decoration:none;color:#111}
.zentrous-card__title a:hover{color:var(--z-card-red)}
.zentrous-card__tagline{
  color:#77717f;font-size:14px;line-height:1.4;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.zentrous-card__rating{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--z-muted)}
.zentrous-card__rating .star-rating{float:none;margin:0;color:var(--z-gold)}
.woocommerce .star-rating span::before,.woocommerce .star-rating::before{color:var(--z-gold)}
.z-swatches{display:flex;align-items:center;gap:5px}
.z-swatch{width:15px;height:15px;border-radius:4px;border:1px solid rgba(0,0,0,.16);background:var(--sw,#ddd);display:inline-block}
.z-swatches__more{font-size:12px;color:var(--z-muted);font-weight:700}
.zentrous-card__price{margin-top:auto;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.zentrous-card__price .z-price-label{font-size:11px;color:var(--z-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.zentrous-card__price del{color:#999;font-size:14px;font-weight:500;text-decoration:line-through}
.zentrous-card__price ins,.zentrous-card__price .z-price-now{text-decoration:none;font-size:18px;font-weight:800;color:#111}
.zentrous-card .button,
.zentrous-card a.button,
.zentrous-card a.added_to_cart{
  margin-top:4px;background:var(--z-card-red);color:#fff;border-color:var(--z-card-red);
  min-height:38px;padding:10px 24px;font-size:13px;width:100%;
}
.zentrous-card .button:hover{background:#641515;border-color:#641515;color:#fff}
.zentrous-card a.added_to_cart{background:var(--z-black);border-color:var(--z-black);text-align:center}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--z-line);border-radius:999px;padding:9px 14px;background:#fff}

/* Archive / shop */
.z-shop-hero{padding:30px 0 8px}
.z-shop-hero h1{font-size:32px;margin:8px 0;font-weight:800;line-height:1.15}
.z-shop-hero .term-description{color:var(--z-muted);max-width:760px}
.z-shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0}
.woocommerce .woocommerce-ordering select{border:1px solid var(--z-line);border-radius:999px;padding:10px 14px;background:#fff}
.woocommerce .woocommerce-result-count{margin:0;color:var(--z-muted)}
.z-breadcrumb{font-size:13px;color:var(--z-muted);margin:18px 0}
.z-breadcrumb a{color:var(--z-muted);text-decoration:none}
.z-breadcrumb a:hover{color:var(--z-ink)}

/* ==========================================================================
   Single product (content-single-product.php) — Zero order
   ========================================================================== */
.z-product-main{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:start;padding-bottom:12px}
.z-gallery__main{position:relative;border:1px solid var(--z-line);border-radius:18px;overflow:hidden;background:#f7f7f8;aspect-ratio:1/1}
.z-gallery__main img{width:100%;height:100%;object-fit:cover;display:block}
.z-gallery__badges{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:7px;z-index:2}
.z-gallery__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.z-gallery__thumb{width:76px;height:76px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#f5f5f5;padding:0;cursor:pointer}
.z-gallery__thumb.is-active{border-color:var(--z-orange)}
.z-gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.z-product-summary .z-product-badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.z-product-title{font-size:31px;line-height:1.16;font-weight:800;margin:0 0 8px}
.z-product-tagline{color:var(--z-muted);font-size:16px;margin:0 0 12px}
.z-product-rating{display:flex;align-items:center;gap:8px;color:var(--z-muted);font-size:14px;margin:8px 0 14px}
.z-product-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:12px 0}
.z-product-price del{color:#999;font-size:19px}
.z-product-price ins,.z-product-price .z-price-now{text-decoration:none;font-size:34px;font-weight:800;color:#111}
.z-sale-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#e8f7ee;border:1px solid #bfe8cc;color:var(--z-green-dark);
  border-radius:12px;padding:11px 14px;font-weight:800;margin:14px 0;
}
.z-sale-bar .z-countdown{font-variant-numeric:tabular-nums}
.z-stock-note{font-weight:700;margin:10px 0}
.z-stock-note.in-stock{color:var(--z-green-dark)}
.z-stock-note.low-stock{color:#9a6200}
.z-stock-note.out-of-stock{color:var(--z-red)}
.z-buy-row{margin:18px 0}
.z-buy-row form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.z-buy-row .quantity input.qty{width:74px;height:50px;border:1px solid var(--z-ink);border-radius:999px;text-align:center;font-weight:700}
.z-buy-row .single_add_to_cart_button{
  background:#fff!important;color:var(--z-ink)!important;border:1px solid var(--z-ink)!important;min-height:50px;padding:13px 26px;
}
.z-buy-row .single_add_to_cart_button:hover{background:var(--z-soft)!important}
.z-buy-now-btn{background:var(--z-black);color:#fff;min-height:50px;padding:13px 28px}
.z-buy-now-btn:hover{background:#222;color:#fff}
.woocommerce div.product form.cart .variations{margin-bottom:14px}
.woocommerce div.product form.cart .variations select{border:1px solid var(--z-line);border-radius:10px;padding:10px;width:100%}
.z-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.z-trust-row .z-trust-item{text-align:center;padding:14px}
.z-product-tabs{margin-top:34px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;display:flex;gap:8px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border:1px solid var(--z-line);background:var(--z-soft);border-radius:999px;margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--z-black);color:#fff}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:10px 18px;font-weight:700;color:inherit}
.woocommerce div.product .woocommerce-tabs .panel{border:1px solid var(--z-line);border-radius:18px;padding:24px;margin-top:16px}
.z-faq{margin-top:30px}
.z-faq h2,.z-recently-viewed h2,.z-reviews h2{font-size:23px;font-weight:800}
.z-faq details{border:1px solid var(--z-line);border-radius:14px;padding:0 18px;margin:0 0 10px;background:#fff}
.z-faq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none}
.z-faq summary::-webkit-details-marker{display:none}
.z-faq details p{margin:0 0 16px;color:#3c3846}
.z-recently-viewed{margin-top:36px}
.z-sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;margin:0;
  display:flex;align-items:center;gap:12px;
  min-height:60px;max-height:72px;
  background:#111;color:#fff;border-radius:0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
  transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility .22s;
}
.z-sticky-buy.is-visible{transform:translateY(0);visibility:visible}
.z-sticky-buy strong{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.z-sticky-buy .z-btn{flex:0 0 auto;white-space:nowrap}
body.single-product .z-site-main{padding-bottom:84px}

/* Woo notices / forms / account / cart page */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-radius:14px;border-top:0;background:var(--z-soft);color:var(--z-ink);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input.input-text,textarea,select{
  border:1px solid var(--z-line);border-radius:10px;padding:11px 13px;background:#fff;
}
.woocommerce table.shop_table{border:1px solid var(--z-line);border-radius:16px;overflow:hidden}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{background:var(--z-black)}
.woocommerce-checkout #payment{background:var(--z-soft);border-radius:16px}

/* ==========================================================================
   Cart drawer (footer.php markup, Woo AJAX fragments)
   ========================================================================== */
.z-drawer-overlay{
  position:fixed;inset:0;background:rgba(7,7,10,.55);z-index:1300;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
}
.z-cart-drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(430px,94vw);z-index:1400;
  background:#fff;color:var(--z-ink);transform:translateX(105%);transition:transform .24s ease;
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.25);
}
body.zentrous-drawer-open{overflow:hidden}
body.zentrous-drawer-open .z-drawer-overlay{opacity:1;visibility:visible}
body.zentrous-drawer-open .z-cart-drawer{transform:translateX(0)}
.z-cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:24px 20px 16px;padding-top:max(24px,env(safe-area-inset-top));border-bottom:1px solid var(--z-line)}
.z-cart-drawer__head h2{font-size:19px;margin:0;font-weight:800}
.z-cart-drawer__inner{display:flex;flex-direction:column;min-height:0;flex:1}
.z-ship-progress{padding:16px 20px;border-bottom:1px solid var(--z-line);background:#f4fbf5}
.z-ship-progress p{margin:0 0 9px;font-size:14px;font-weight:700;color:var(--z-green-dark)}
.z-ship-progress__bar{height:9px;border-radius:999px;background:#dcefe1;overflow:hidden}
.z-ship-progress__fill{height:100%;background:var(--z-green);border-radius:999px;transition:width .25s ease}
.z-cart-items{list-style:none;margin:0;padding:8px 20px;overflow:auto;flex:1}
.z-cart-item{display:grid;grid-template-columns:68px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid #efedf3}
.z-cart-item img{width:68px;height:68px;object-fit:cover;border-radius:10px;background:#f5f5f5}
.z-cart-item__name{font-size:14px;font-weight:700;line-height:1.35;margin:0 0 4px}
.z-cart-item__meta{font-size:12.5px;color:var(--z-muted)}
.z-cart-item__meta dl,.z-cart-item__meta dt,.z-cart-item__meta dd{display:inline;margin:0}
.z-cart-item__price{font-weight:800;white-space:nowrap}
.z-cart-item__price del{color:#999;font-weight:500;margin-right:5px}
.z-qty{display:inline-flex;align-items:center;border:1px solid var(--z-line);border-radius:999px;overflow:hidden;margin-top:8px}
.z-qty button{width:30px;height:30px;border:0;background:#fff;cursor:pointer;font-weight:800}
.z-qty input{width:38px;height:30px;border:0;text-align:center;font-weight:700}
.z-cart-item__remove{border:0;background:none;color:var(--z-red);font-size:12.5px;font-weight:700;cursor:pointer;padding:0;margin-top:7px}
.z-cart-empty{padding:28px 20px;text-align:center;color:var(--z-muted)}
.z-cart-drawer__foot{border-top:1px solid var(--z-line);padding:16px 20px 20px;background:#fff}
.z-cart-drawer__foot .z-cart-note{font-size:13px;color:var(--z-muted);margin:0 0 8px}
.z-cart-drawer__subtotal{display:flex;justify-content:space-between;font-weight:800;margin-bottom:12px}
.z-cart-checkout{width:100%;background:var(--z-black);color:#fff;min-height:52px}
.z-cart-continue{width:100%;margin-top:9px;background:#fff;border-color:var(--z-line);color:var(--z-ink)}

/* ==========================================================================
   Footer — black, 4 columns + payment marks (Zero structure; marks by owner order)
   ========================================================================== */
.z-footer{background:var(--z-black);color:#fff;margin-top:64px}
.z-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:48px 0 30px}
.z-footer h3{font-size:15px;margin:0 0 14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.z-footer ul{list-style:none;margin:0;padding:0}
.z-footer li{margin:0 0 9px}
.z-footer a{color:#d8d5e2;text-decoration:none;font-size:14.5px}
.z-footer a:hover{color:#fff}
.z-socials{display:flex;gap:9px;flex-wrap:wrap}
.z-socials a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;
}
.z-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:18px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.z-footer__brand{display:flex;align-items:center;gap:12px;color:#cfcbe0;font-size:14px}
.z-payment-marks{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.z-payment-marks span{background:#fff;border-radius:7px;padding:6px 9px;display:inline-flex;align-items:center}
.z-payment-marks img{height:17px;width:auto;display:block}

/* ==========================================================================
   Responsive — mobile first-class (owner is mobile-only; ~390px target)
   ========================================================================== */
@media (max-width:1024px){
  .woocommerce ul.products,ul.products.z-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .z-product-main{grid-template-columns:1fr;gap:26px}
  .z-footer__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .z-header__inner{gap:8px;min-height:58px;justify-content:space-between;padding:8px 0}
  .z-logo__word{font-size:20px}
  .z-logo__tag{display:none}
  .z-primary-nav{display:none}
  .z-nav-toggle{display:inline-flex}
  .z-mobile-nav{
    display:block;position:fixed;inset:0 auto 0 0;width:min(330px,88vw);z-index:1250;background:#0d0d11;color:#fff;
    transform:translateX(-105%);transition:transform .22s ease;padding:20px;overflow:auto;
  }
  body.zentrous-nav-open .z-mobile-nav{transform:translateX(0)}
  .z-mobile-nav ul{list-style:none;margin:14px 0;padding:0}
  .z-mobile-nav a{color:#fff;text-decoration:none;display:block;padding:9px 0;font-weight:700}
  .z-mobile-nav .sub-menu{padding-left:14px}
  .z-mobile-nav .sub-menu a{font-weight:500;color:#d8d5e2}
  .z-mobile-nav__close{margin-left:auto}
  .z-promo{flex-direction:column;align-items:flex-start;padding:28px 22px}
  .z-promo img{max-width:100%;width:100%}
  .z-trust-grid,.z-moment-grid,.z-collabs-row{grid-template-columns:repeat(2,1fr)}
  .z-trust-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .z-wrap{width:calc(100% - 24px)}
  .woocommerce ul.products,ul.products.z-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .woocommerce ul.products li.product,ul.products li.product.zentrous-card{padding:10px;border-radius:12px}
  .zentrous-card__title{font-size:14.5px}
  .zentrous-card__price ins,.zentrous-card__price .z-price-now{font-size:16px}
  .z-cats-row{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:8px;scrollbar-width:none}
  .z-cats-row::-webkit-scrollbar{display:none}
  .z-cat-circle{min-width:92px;flex:0 0 92px}
  .z-cat-circle .ring{width:90px;height:90px}
  .z-cat-circle h3,.z-cat-circle .z-cat-label{font-size:12px}
  .z-section{margin-top:34px}
  .z-section-head h2{font-size:22px}
  .z-hero{border-radius:20px;margin-top:12px}
  .z-product-title{font-size:25px}
  .z-product-price ins,.z-product-price .z-price-now{font-size:28px}
  .z-buy-row form.cart{flex-direction:column}
  .z-buy-row .single_add_to_cart_button,.z-buy-now-btn{width:100%}
  .z-footer__grid{grid-template-columns:repeat(2,1fr);gap:22px;padding:38px 0 24px}
  .z-footer__bottom{flex-direction:column;align-items:flex-start}
  .z-shop-toolbar{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   FIX ROUND v1.0.1 (post-launch visual verification)
   ========================================================================== */

/* --- 1. Header hardening: nav flex row, centred, never stacked --------- */
.z-primary-nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.z-header__actions{flex:0 0 auto}
.z-primary-menu{flex-wrap:nowrap}
.z-primary-menu>li>a{white-space:nowrap}
/* wp_page_menu fallback output (used when no menu is assigned) gets the
   same horizontal treatment instead of a vertical page list. */
.z-primary-nav .menu{display:flex;justify-content:center;min-width:0}
.z-primary-nav .menu>ul{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
.z-primary-nav .menu>ul>li{position:relative}
.z-primary-nav .menu a{display:block;padding:10px 13px;color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.z-primary-nav .menu a:hover{color:var(--z-orange)}
.z-primary-nav .menu .children{display:none}
@media (min-width:821px) and (max-width:1180px){
  .z-primary-menu>li>a,.z-primary-nav .menu a{padding:10px 8px;font-size:12.5px}
  .z-logo{max-width:210px}
}

/* --- 5 + 11. Front page: contained content, no sideways scroll, hero
       keeps its height on first paint ------------------------------------ */
body.home{overflow-x:clip}
.z-front-page{overflow-x:clip}
.z-front-content>.alignfull,.z-front-content .alignfull{width:100%;max-width:100%;margin-inline:0}
.z-front-content>*{max-width:100%}
.z-front-content h1,.z-front-content h2,.z-front-content h3{overflow-wrap:break-word}
.z-front-page .n2-ss-slider,.z-front-page .n2-section-smartslider,.z-front-page .smartslider{
  min-height:clamp(260px,42vw,540px);background:var(--z-soft);border-radius:24px;
}
.z-hero{min-height:clamp(260px,42vw,540px)}
/* FAQ / disclosure blocks inside page content (SEO block accordions) */
.z-front-content details{
  border:1px solid var(--z-line);border-radius:14px;padding:0 18px;margin:0 0 10px;background:#fff;
}
.z-front-content summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none}
.z-front-content summary::-webkit-details-marker{display:none}
.z-front-content summary::marker{color:var(--z-orange)}
.z-front-content summary::after{content:"+";float:right;font-weight:800;color:var(--z-orange)}
.z-front-content details[open ] summary::after{content:"–"}
.z-front-content details p{margin:0 0 16px;color:#3c3846}

/* --- 3. Homepage "Recent Collabs" tiles: buttons keep natural width,
       tile images share one aspect ratio -------------------------------- */
.z-front-content .wp-block-button,.z-front-content .wp-block-buttons{min-width:fit-content}
.z-front-content .wp-block-button__link{
  white-space:nowrap;width:max-content;max-width:100%;
}
.z-collab-tile{aspect-ratio:4/3;min-height:0}
.z-collab-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.z-collab-tile .z-btn{white-space:nowrap;width:max-content;max-width:calc(100% - 28px)}
.z-front-content .wp-block-columns .wp-block-column figure{margin:0}
.z-front-content .wp-block-columns .wp-block-column figure img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:18px;
}
.z-front-content .wp-block-columns .wp-block-column .wp-block-button__link{white-space:nowrap}

/* --- 4. [zentrous_products] shortcode grids (same cards as the shop) --- */
ul.products.z-products--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
ul.products.z-products--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
ul.products.z-products--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
ul.products.z-products--cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
ul.products.z-products--cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1024px){
  ul.products.z-products--cols-4,ul.products.z-products--cols-5,ul.products.z-products--cols-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  ul.products.z-products[class*="z-products--cols-"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 6b/6c. Single product: Add to Cart is a solid CTA in every state
       (including Woo's variation-not-chosen "disabled" state), Buy It Now
       in buy red, and the price block is prominent for every type ------- */
.z-buy-row .single_add_to_cart_button,
.woocommerce .z-buy-row button.single_add_to_cart_button,
.woocommerce .z-buy-row button.single_add_to_cart_button.disabled,
.woocommerce .z-buy-row button.single_add_to_cart_button.wc-variation-selection-needed{
  background:var(--z-black)!important;color:#fff!important;border:1px solid var(--z-black)!important;
  opacity:1!important;min-height:50px;padding:13px 26px;
}
.z-buy-row .single_add_to_cart_button:hover{background:#222!important}
.z-buy-now-btn,
.woocommerce .z-buy-row button.z-buy-now-btn{
  background:var(--z-buy-red);color:#fff;border:1px solid var(--z-buy-red);min-height:50px;padding:13px 28px;
}
.z-buy-now-btn:hover,
.woocommerce .z-buy-row button.z-buy-now-btn:hover{background:#a30d27;color:#fff}
.z-product-price .price{font-size:30px;font-weight:800;color:#111;line-height:1.15}
.z-product-price .price del{font-size:19px;font-weight:500;color:#999}
.z-product-price .price ins{font-size:34px;font-weight:800;text-decoration:none;color:#111}
.z-product-price .price .woocommerce-Price-amount{font-weight:800}
.variations.z-variations-need-choice{outline:2px solid var(--z-buy-red);outline-offset:6px;border-radius:8px}

/* --- 9. Newsletter plugin form (tnp) on the orange band ---------------- */
.z-newsletter .tnp-subscription,.z-newsletter .tnp-widget{max-width:100%}
.z-newsletter .tnp-subscription form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.z-newsletter .tnp-subscription .tnp-field{flex:1;min-width:220px;margin:0}
.z-newsletter .tnp-subscription label,
.z-newsletter .tnp-widget label,
.tnp-subscription label{color:#160b00;font-weight:600;font-size:14px}
.z-newsletter .tnp-subscription input.tnp-email,
.z-newsletter .tnp-subscription input[type="email"]{
  width:100%;border:0;border-radius:999px;padding:13px 20px;background:#fff;color:var(--z-ink);
}
.z-newsletter .tnp-subscription input.tnp-submit,
.z-newsletter .tnp-subscription input[type="submit"],
.z-newsletter .tnp-widget input[type="submit"],
.tnp-subscription input.tnp-submit{
  background:var(--z-black);color:#fff;border:0;border-radius:999px;
  padding:13px 28px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;width:auto;
}
.z-newsletter .tnp-subscription input.tnp-submit:hover,
.z-newsletter .tnp-subscription input[type="submit"]:hover{background:#222}
.z-newsletter .tnp-subscription .tnp-privacy-field{flex-basis:100%;font-size:12.5px;color:#3a2400}

/* --- 10. Back-to-top: REMOVED entirely in fix round 3 (the reference
       store has no floating button; it collided with pills, the FAQ
       toggle and the footer at both widths). Markup, JS and CSS all
       deleted — see the round-3 section at the end of this file. --- */

/* ==========================================================================
   FIX ROUND 3 (v1.0.3) — exhaustive re-check of v1.0.1.
   Root causes are written up in FIX-NOTES.md ("Fix round 3"). This block
   sits at the END of the file on purpose: several v1.0.1 rules were
   declared here, after the responsive blocks, and silently outranked
   them — the round-3 rules either outrank those (higher specificity)
   or re-assert the responsive behaviour after them.
   ========================================================================== */

/* --- R3-1. Header: the logo lockup is capped, whichever markup prints it.
       Root cause: zentrous_logo_markup() calls the_custom_logo() when a
       custom logo is set; that output is <a class="custom-logo-link">
       wrapping <img class="custom-logo" width="1131" height="220"> — it
       is NOT inside .z-logo, so the old `.z-logo img.custom-logo` rule
       never matched and the PNG rendered near natural size (~135px+),
       inflating the bar and squeezing the nav/actions into overlap.
       These rules target the real markup, scoped to .z-header. -------- */
.z-header__inner{flex-wrap:nowrap}
.z-header .custom-logo-link{
  display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;
  max-width:min(250px,54vw);min-width:0;
}
.z-header .custom-logo-link img,
.z-header img.custom-logo{
  display:block;height:40px;max-height:40px;width:auto;max-width:100%;object-fit:contain;
}
.z-header .z-logo{max-height:52px;overflow:hidden}
.z-header .z-logo svg,
.z-header .z-logo__mark{height:40px;max-height:40px;width:auto}
.z-header .z-logo img{height:40px;max-height:40px;width:auto;max-width:210px;object-fit:contain}

/* --- R3-2. Mobile header end state, re-asserted AFTER the v1.0.1
       hardening block. Root cause of the regression: that block set
       `.z-primary-nav{display:flex}` OUTSIDE any media query, later in
       the file than the ≤820px `display:none`, at equal specificity —
       the desktop nav therefore rendered on phones, over the logo.
       Scoped to .z-header (0,2,0) these beat it at any source order. -- */
@media (max-width:820px){
  .z-header .z-primary-nav{display:none}
  .z-header .z-nav-toggle{display:inline-flex}
  .z-header .custom-logo-link{max-width:46vw}
  .z-header .custom-logo-link img,
  .z-header img.custom-logo{height:32px;max-height:32px}
  .z-header .z-logo svg,
  .z-header .z-logo__mark{height:32px;max-height:32px}
  .z-header .z-logo__word{font-size:19px}
}

/* --- R3-3. No page-level sideways scroll anywhere (v1.0.1 clipped only
       body.home, leaving shop/category/product unguarded), and the
       product grid gets a full min-width:0 chain so a card can never
       push its track wider than the phone. --------------------------- */
body{overflow-x:clip}
.woocommerce ul.products,
ul.products.z-products{max-width:100%}
.woocommerce ul.products li.product,
ul.products li.product.zentrous-card{min-width:0;box-sizing:border-box}
.zentrous-card__body{min-width:0}
.zentrous-card__body>*{min-width:0}
.zentrous-card__title{overflow-wrap:break-word}
.zentrous-card__price{max-width:100%}
.zentrous-card__price .woocommerce-Price-amount{white-space:nowrap}
.zentrous-card__media{max-width:100%}
@media (max-width:640px){
  .woocommerce ul.products,
  ul.products.z-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* Any not-yet-migrated WooCommerce BLOCK grid: core renders it as a
     flex row with per-item margins — a classic 390px overflow source.
     Force the same 2-col grid behaviour as the theme cards. */
  .wc-block-grid__products{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
    margin:0;padding:0;max-width:100%;
  }
  .wc-block-grid__products .wc-block-grid__product{
    width:auto;max-width:100%;min-width:0;flex:none;margin:0;box-sizing:border-box;
  }
  .wc-block-grid__product img{max-width:100%;height:auto}
}

/* --- R3-4. Card buttons at phone width are full-width pills, never
       circles: the v1.0.1 collab rule (`width:max-content` + nowrap on
       .wp-block-button__link) left block-card buttons sized to their
       min-content box inside narrow grid cells. A width:100% pill at
       12.5px fits "SELECT OPTIONS" / "BUY NOW" on one line. ------------ */
@media (max-width:640px){
  .woocommerce ul.products li.product.zentrous-card .button,
  .woocommerce ul.products li.product.zentrous-card a.added_to_cart{
    display:flex;width:100%;min-height:40px;padding:10px 12px;
    font-size:12.5px;line-height:1.15;white-space:normal;text-align:center;
    border-radius:999px;box-sizing:border-box;
  }
  .z-front-content .wc-block-grid .wp-block-button,
  .wc-block-grid__product .wp-block-button{width:100%;min-width:0}
  .z-front-content .wc-block-grid .wp-block-button__link,
  .wc-block-grid__product-add-to-cart .wp-block-button__link,
  .wc-block-grid__product .add_to_cart_button{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:40px;padding:10px 12px;
    font-size:12.5px;line-height:1.15;white-space:normal;text-align:center;
    border-radius:999px;box-sizing:border-box;
  }
}

/* --- R3-5. Recent Collabs at phone width: 2×2, natural-width pills.
       Root cause: the homepage tiles are Gutenberg columns saved with
       "stack on mobile" OFF (class .is-not-stacked-on-mobile), and WP
       core keeps that class in ONE nowrap row at ≤781px — four ~85px
       columns, pills crammed and truncated. Wrap every front-page
       column group to 2-per-row instead (the approved mobile layout);
       the theme-class .z-collabs-row grid is re-asserted too. -------- */
@media (max-width:768px){
  .z-front-content .wp-block-columns{flex-wrap:wrap!important;gap:16px}
  .z-front-content .wp-block-columns .wp-block-column{
    flex-basis:calc(50% - 8px)!important;flex-grow:0!important;margin-left:0!important;min-width:0;
  }
  .z-front-content .wp-block-columns .wp-block-button__link{
    white-space:nowrap;width:max-content;max-width:100%;
  }
  .z-collabs-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .z-collab-tile .z-btn{position:absolute;left:12px;bottom:12px;width:max-content;max-width:calc(100% - 24px)}
}

/* --- R3-6. Single-product price: prominent for EVERY price shape.
       Markup verified in content-single-product.php: the price sits in
       .z-product-price inside <section class="z-product-summary">, and
       zentrous_card_price_html() returns three shapes — del/ins pieces
       (simple, on sale), a .z-price-now span (simple), or Woo's own
       get_price_html() (variable/grouped: a .price span of
       .woocommerce-Price-amount children). The v1.0.1 rules sized only
       some shapes and the container itself had no font-size, so the
       variable shape still read small next to the 31px title. Setting
       the size on the container and inheriting it into every child
       covers all shapes from one place. ------------------------------- */
.z-product-summary .z-product-price{
  font-size:29px;font-weight:800;color:var(--z-ink);line-height:1.15;
}
.z-product-summary .z-product-price .price,
.z-product-summary .z-product-price .z-price-now,
.z-product-summary .z-product-price ins,
.z-product-summary .z-product-price .woocommerce-Price-amount{
  font-size:inherit;font-weight:800;color:inherit;text-decoration:none;
}
.z-product-summary .z-product-price del{
  font-size:18px;font-weight:500;color:#999;text-decoration:line-through;
}
@media (max-width:640px){
  .z-product-summary .z-product-price{font-size:26px}
  .z-product-summary .z-product-price del{font-size:16px}
}

/* --- R3-7. Mobile hero (Smart Slider): intentionally NO new CSS.
       Smart Slider sizes its canvas and absolutely-positioned layers
       from JS using the slider's configured Width×Height ratio; a CSS
       min-height on the wrapper cannot rescale those layers (the
       v1.0.1 guard is inert for the slider's internals) and forcing
       cover heights would crop/distort slides. The fix is a Smart
       Slider admin setting — see FIX-NOTES.md, "Fix round 3", item 7. - */

/* --- R3-8. Fluid section headings at phone width, so titles like
       "Featured Launches" set at a size that fits the measure instead
       of wrapping mid-phrase at a fixed 22px. -------------------------- */
@media (max-width:640px){
  .z-section-head h2{font-size:clamp(20px,6vw,24px);line-height:1.2}
  .z-front-content h2{font-size:clamp(20px,6vw,27px);line-height:1.22;text-wrap:balance}
  .z-shop-hero h1{font-size:clamp(24px,7vw,32px)}
  .z-product-title{font-size:clamp(23px,6.4vw,25px)}
}

/* ==========================================================================
   FIX ROUND 4 (v1.0.4) — the two archive-only mobile survivors of
   re-check #3 (10/12 fixed there). Homepage cards at mobile were
   already correct and desktop archive was already correct; both
   defects live in the gap between the theme's rules and WooCommerce
   core's own stylesheets, which this theme never dequeues. Root
   causes in FIX-NOTES.md ("Fix round 4"). Nothing outside the archive
   list and the card button changes.
   ========================================================================== */

/* --- R4-1. Defect A, root cause: Woo core's woocommerce-smallscreen.css
       declares, at max-width:768px,
         .woocommerce ul.products[class*="columns-"] li.product
           { width:48%; float:left; clear:both; margin:0 0 2.992em }
       Specificity 0,4,2 — it OUTRANKS the theme's item reset
       (.woocommerce ul.products li.product{width:auto;float:none;
       margin:0}, 0,3,2) even though this sheet prints later, so on
       shop/category pages every grid item stayed pinned to 48% OF ITS
       OWN TRACK: quarter-screen strips, the "4-across forced" look.
       (Woo's desktop width rule is only 0,3,2, ties the theme's reset
       and loses on source order — which is why desktop archive was
       correct and only ≤768px broke.)
       Only the archive list is exposed: woocommerce_product_loop_start()
       prints <ul class="products columns-4"> — it carries the real
       "columns-" substring Woo's attribute selector needs. The homepage
       shortcode list is <ul class="products z-products
       z-products--cols-N">: "columns-" never appears in its class
       attribute ("--cols-" is not "columns-"), so Woo's rule never
       matched it and homepage cards were already full-track.
       Fix: re-assert the reset on selectors that include BOTH the
       columns- attribute and the card class (0,5,2) — they outrank
       Woo's 0,4,2 outright at any source order, for both the
       .woocommerce and .woocommerce-page prefixes Woo uses. Declared
       at Woo's own ≤768px breakpoint so the 641–768px band (3-column
       tracks) is un-squeezed too, not just ≤640px. ------------------ */
@media (max-width:768px){
  .woocommerce ul.products[class*="columns-"] li.product.zentrous-card,
  .woocommerce-page ul.products[class*="columns-"] li.product.zentrous-card{
    float:none;clear:none;width:auto;min-width:0;margin:0;box-sizing:border-box;
  }
}

/* --- R4-2. Defect A: the archive grid, re-asserted in one place at
       phone width — the same 2-column fluid grid the homepage
       shortcode already produces at this width, items free to shrink
       (min-width:0), so card proportions match the homepage exactly.
       Title word-breaking: R3-3's `.zentrous-card__title{
       overflow-wrap:anywhere}` was edited at its source in this round
       to `break-word` — 'anywhere' permits a break at ANY character
       (and shrinks min-content to one character), which is what tore
       titles mid-word inside the squeezed cards ("Ani / mals / Adve /
       nt"). Titles now wrap at word boundaries only; no break-all /
       anywhere remains anywhere in the card. ----------------------- */
@media (max-width:640px){
  .woocommerce ul.products{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  }
  .woocommerce ul.products li.product.zentrous-card{min-width:0}
  .zentrous-card__title,
  .zentrous-card__title a{
    overflow-wrap:break-word;word-break:normal;
  }
}

/* --- R4-3. Defect B: ONE mobile rule for the card button in EVERY
       context — two different failures converged on it:
       (i) archive — the R4-1 squeeze left the button at width:100% of
           a ~61px content box; R3-4's phone rule allowed
           white-space:normal, so "SELECT OPTIONS" wrapped inside a
           min-height:40px, border-radius:999px box ≈ a dark-red
           CIRCLE with the second line clipped ("SELECT / PTION").
       (ii) homepage — R3-4's button rule is prefixed
           ".woocommerce ul.products …", but the homepage <body> carries
           no .woocommerce ancestor class (Woo adds it only on its own
           pages), so shortcode buttons fell back to the base rule
           (.zentrous-card .button{padding:10px 24px;font-size:13px}):
           ~112px of label + 48px of side padding > the ~141px card
           content box → two-line pills.
       The .zentrous-card selectors are context-free — they match the
       card in the shortcode grid, the archive list and anywhere else
       content-product.php renders — and the archive selector repeats
       R3-4's own (0,5,2) later in the file, winning that tie where
       both apply. nowrap + 12px + 8px side padding puts
       "SELECT OPTIONS" (~101px at 12px) on ONE line with room to
       spare in the narrowest 2-col card (~126px of text room at a
       360px viewport). Un-migrated block-grid buttons get the same
       metrics on R3-4's own selectors. ------------------------------ */
@media (max-width:640px){
  .zentrous-card .button,
  .zentrous-card a.button,
  .zentrous-card a.added_to_cart,
  .woocommerce ul.products li.product.zentrous-card .button,
  .woocommerce ul.products li.product.zentrous-card a.added_to_cart{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:40px;padding:10px 8px;
    font-size:12px;line-height:1.2;letter-spacing:normal;
    white-space:nowrap;text-align:center;
    border-radius:999px;box-sizing:border-box;
  }
  .z-front-content .wc-block-grid .wp-block-button__link,
  .wc-block-grid__product-add-to-cart .wp-block-button__link,
  .wc-block-grid__product .add_to_cart_button{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:40px;padding:10px 8px;
    font-size:12px;line-height:1.2;letter-spacing:normal;
    white-space:nowrap;text-align:center;
    border-radius:999px;box-sizing:border-box;
  }
}

/* ==========================================================================
   FIX ROUND 5 (v1.0.5) — homepage block styling absorbed into the theme,
   card title clamp, footer payment marks in brand colours.
   Background: page 694 carried a Custom HTML block whose CSS styled the
   homepage's Gutenberg blocks (section heads, the category CIRCLES,
   the promo band, the slider frame). The block's <style> tag was lost
   in the round-2 content migration, so the CSS now prints as visible
   page text and the blocks render unstyled — the owner photographed
   the categories as big underlined rectangular tiles, raw CSS text
   under the FAQ, and nine-line product titles. The live rules are
   absorbed below so the styling lives in the theme; a separate server
   step strips the dead block from the page and removes a duplicated
   promise section.
   DEPLOY ORDER: this theme goes live BEFORE the dead block is
   stripped — otherwise the homepage block styling vanishes in between.
   ========================================================================== */

/* --- R5-1. Card titles clamp to two lines (Zero-style) ---------------
   content-product.php prints the title as
   <h3 class="zentrous-card__title"><a …>…</a></h3> — the one template
   behind BOTH the archive loop and the [zentrous_products] shortcode,
   so this context-free rule clamps every card in every context.
   Combines with R3-3/R4-2's overflow-wrap:break-word (titles wrap at
   word boundaries first, then clamp with an ellipsis). -------------- */
.zentrous-card__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* --- R5-2. Homepage blocks (absorbed from page style block, v1.0.5) --
   Selectors target the Gutenberg markup inside page content, exactly
   as the dead block's rules did, and the !important flags are KEPT —
   Gutenberg block/inline styles compete with the sheet, which is why
   the originals used them throughout. Where the theme already styles
   the same elements, nothing is duplicated (full map in FIX-NOTES
   round 5): the .z-section-head flex row comes from the theme's own
   rules; only the block-only pieces are added. NOT absorbed (dead):
   the Blocksy-era .ct-announcement-bar rules, the wc-block-grid card
   rules + badge ::after hacks (those sections are theme shortcodes
   now), and the Poppins base rule (the theme sets Poppins itself). -- */

/* Section headings inside page content — the dead block's base rule. */
main h2{font-size:26px!important;font-weight:800!important;text-align:left!important;margin-bottom:8px!important}
@media (max-width:768px){
  main h2{font-size:22px!important}
}
/* A section-head h2 keeps NO bottom margin: the theme's own
   .z-section-head h2{margin:0} carries no !important and cannot defend
   itself against the absorbed main h2 above, so the reset is
   re-asserted here with one. */
.z-section-head h2{margin:0!important}
/* "View all" pill in BLOCK section heads: blocks render
   .wp-block-button__link, not the theme's .z-view-all class. */
.z-section-head .wp-block-button__link,
.z-section-head .wp-block-buttons a{
  background:#000!important;color:#fff!important;border-radius:999px!important;
  padding:10px 22px!important;font-size:13px!important;font-weight:600!important;
  text-decoration:none!important;white-space:nowrap!important;display:inline-block!important;
}

/* Category circles — the block markup is a Columns block whose columns
   hold a Group (figure + linked h3 label). The theme's .z-cat-circle
   rules style the theme's own markup only and never matched this;
   without these rules the columns render as the rectangular tiles
   with big underlined labels the owner photographed. */
main .wp-block-column > .wp-block-group{
  flex-direction:column!important;gap:10px!important;align-items:center!important;
  background:transparent!important;padding:0!important;overflow:visible!important;
}
main .wp-block-column > .wp-block-group figure{
  width:115px!important;height:115px!important;border-radius:50%!important;
  overflow:hidden!important;background:#f6f6f6!important;margin:0 auto!important;flex-shrink:0!important;
}
main .wp-block-column > .wp-block-group figure img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}
main .wp-block-column > .wp-block-group h3{
  font-size:13px!important;font-weight:700!important;line-height:1.3!important;
  text-align:center!important;margin:0!important;
}
main .wp-block-column > .wp-block-group h3 a{
  color:inherit!important;text-decoration:none!important;
}
/* Categories at phone width — AMENDED (owner sent Zero Lifestyle's own
   mobile screenshots mid-round): Zero's row is ONE horizontally
   scrolling row of small circles (~5 visible at once), NOT a
   2-per-row grid of 90px circles. The :has() scope picks out exactly
   the Columns wrapper whose columns hold a category Group, so R3-5's
   wrap-to-2-per-row keeps governing every OTHER front-page column
   group (collabs etc.); these selectors also outrank R3-5's on
   specificity (0,4,1 / 0,5,1 against 0,2,0 / 0,3,0) with !important
   on both sides. Columns size to their Group; the Group is a fixed
   measure, so a long label (e.g. "Tree Toppers & Ornaments") wraps
   to at most two centred lines under the circle instead of forcing
   the column wide. (Pitch history: v1.0.5 circle 64px / group 76px /
   gap 14px → v1.0.6 56 / 66 / 10; v1.0.7 tightens again — circle
   50px, column measure 58px, gap 8px, 12px side padding on the row —
   because the preview still showed only ~4 circles at 390px.) */
/* REMOVED in R12-1 (v1.0.12): the ≤768px category scroll-row block
   stood here (nowrap flex row, 58px group measure, 50px circles,
   2-line clamped labels). The owner's phone never rendered the
   scroll row — the row lays out 4-across — and the fixed 58px
   measure is what R8-1/R10-3 then had to fight. The phone category
   layout is now owned by ONE consolidated block, R12-1 (FIX ROUND
   12), driven off the grid cell. */

/* Hero slider frame — the theme's .z-hero / front-page rules already
   give radius 24 + a first-paint min-height; the page's own frame was
   radius 20 inside 30px side margins (12px on mobile). Absorbed as the
   live values; they outrank the theme's 24px wherever the slider
   renders inside page content. */
main .n2-ss-slider{border-radius:20px!important;margin-left:30px!important;margin-right:30px!important;overflow:hidden!important}
@media (max-width:768px){
  main .n2-ss-slider{margin-left:12px!important;margin-right:12px!important}
}

/* Promo band — the block carries the theme's own .z-promo class, so
   the gradient already comes from the theme rule above (identical
   values; NOT duplicated here). Absorbed: the block's own radius and
   padding (20px / 28px 32px — they outrank the theme-markup defaults
   of 26px / 36px 40px; only page 694 uses the class today), the
   guaranteed white text, the white pill button blocks render, and
   the 14px image radius. */
main .z-promo{border-radius:20px!important;padding:28px 32px!important;color:#fff!important}
main .z-promo .wp-block-button__link{
  background:#fff!important;color:#141414!important;border-radius:999px!important;
}
main .z-promo .wp-block-image img{border-radius:14px!important}

/* Recent Collabs block images + the page's spacer rhythm. */
main .z-collabs .wp-block-image img{border-radius:14px!important}
main .wp-block-spacer{height:40px!important}

/* --- R5-3. Footer payment marks in BRAND COLOURS — no CSS change.
   The monochrome look was not a CSS filter (this sheet has none on
   .z-payment-marks): footer.php forced it through the Simple Icons
   URL colour suffix "/141414". The suffix is removed there, so the
   CDN serves each mark in its own brand hex on the same white pill
   chips (Visa #1A1F71, Mastercard #EB001B, Amex #2E77BC, PayPal
   #003087, Google Pay #4285F4; Apple Pay's brand colour IS black,
   so it stays black). ------------------------------------------------ */

/* ==========================================================================
   FIX ROUND 6 (v1.0.6) — Zero-parity round: card anatomy restructure,
   header/nav parity, wider container, black ship bar, tabs + trust
   strip components, product-page buy stack. Root causes and the full
   item map are in FIX-NOTES.md ("Round v1.0.6"). Structure and layout
   only — no reference copy, artwork or numbers are reproduced.
   ========================================================================== */

/* --- R6-1. Card anatomy (content-product.php restructured) -------------
   New order: gradient eyebrow (first category) → grey image panel →
   title row (title flexes, red "% OFF" right) → tagline → colour dots
   → rating (real reviews only) → footer row (price stack left, pill
   button right). ------------------------------------------------------ */
.zentrous-card__eyebrow{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--z-purple),var(--z-pink));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.zentrous-card__media{background:#f4f4f6;border-radius:10px}
.zentrous-card__media img{border-radius:10px}
.zentrous-card__titlerow{display:flex;align-items:flex-start;gap:8px}
.zentrous-card__titlerow .zentrous-card__title{flex:1 1 auto;min-width:0}
.zentrous-card__off{
  flex:0 0 auto;color:var(--z-red);font-size:12.5px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;padding-top:2px;
}
/* Colour dots: round now (the reference shows dots, not squares), a
   touch larger; the hex comes from the --sw custom property the PHP
   sets per term/option (term-meta override → name map → neutral). */
.z-swatch{width:16px;height:16px;border-radius:50%}
/* Footer row: prices stack LEFT (struck regular above, current bold
   below), button RIGHT at natural width. The old full-width button
   base rule and the R3-4/R4-3 phone rules are overridden below and in
   the ≤640px block further down. */
.zentrous-card__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;
}
.zentrous-card__foot .zentrous-card__price{
  margin-top:0;flex-direction:column;align-items:flex-start;gap:0;flex:1 1 auto;min-width:0;
}
/* The "Regular price / Sale price" helper labels are redundant in the
   stacked layout (struck-over-bold reads on its own); del/ins order in
   the helper output already stacks struck first under column flow. */
.zentrous-card__foot .zentrous-card__price .z-price-label{display:none}
.zentrous-card__foot .button,
.zentrous-card__foot a.button,
.zentrous-card__foot a.added_to_cart{
  width:auto;flex:0 0 auto;margin-top:0;min-height:38px;padding:10px 18px;font-size:12.5px;
}
@media (max-width:640px){
  /* Beat R4-3's full-width phone rule on its own archive selectors
     (0,5,2) by adding the foot class (0,6,2); the context-free pair
     below wins the homepage tie on source order (R4-3's 0,2,0). */
  .zentrous-card__foot .button,
  .zentrous-card__foot a.button,
  .zentrous-card__foot a.added_to_cart,
  .woocommerce ul.products li.product.zentrous-card .zentrous-card__foot .button,
  .woocommerce ul.products li.product.zentrous-card .zentrous-card__foot a.added_to_cart{
    width:auto;min-height:38px;padding:10px 14px;font-size:12px;white-space:nowrap;
  }
  .zentrous-card__off{font-size:11.5px}
}

/* --- R6-2. Archive title third-line leak — root cause fix ------------
   The archive loop renders the SAME content-product.php title as the
   homepage shortcode, so the markup was never the difference. What
   differs on /shop/ + category pages is WooCommerce core's own
   stylesheet (never dequeued by this theme), whose rule
     .woocommerce ul.products li.product h3{padding:.5em 0;margin:0;
       font-size:1em}                                  (specificity 0,3,3)
   applies only where a .woocommerce ancestor exists — Woo adds that
   body class on its own pages, never on the homepage. It (a) inflates
   the clamped h3 with 8px top/bottom padding, so the -webkit-box
   clamp clips inside a taller box and the third line's top half
   stays readable under the clip edge, and (b) overrides the theme's
   14.5px phone size back to 16px. Reset both on a selector that
   provably outranks core's (0,4,2) and re-assert the clamp in the
   archive context. ---------------------------------------------------- */
.woocommerce ul.products li.product .zentrous-card__title{
  padding:0;font-size:16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:640px){
  .woocommerce ul.products li.product .zentrous-card__title{font-size:14.5px}
}

/* --- R6-3. Header / nav parity ----------------------------------------
   Desktop nav: menu labels are already Title Case in WP — the caps
   were forced by CSS. Drop the transform on both the real menu and
   the wp_page_menu fallback. ------------------------------------------ */
.z-primary-menu>li>a{text-transform:none}
.z-primary-nav .menu a{text-transform:none}
/* Mobile header (≤820px) → reference layout: hamburger + search LEFT,
   logo CENTRED, cart RIGHT. The logo (either the .custom-logo-link
   image or the .z-logo SVG lockup) is centred absolutely — flex order
   alone cannot centre it truly with uneven side groups. (The left /
   right grouping itself is structural since v1.0.10 — see R10-4;
   this block now carries only the centring.) */
@media (max-width:820px){
  .z-header__inner{position:relative;justify-content:flex-start}
  /* R6-3's display:contents dissolution of .z-header__actions and
     the order:-2/-1/2 lines stood here. Removed in R10-4: the toggle
     + search now live in .z-header__cluster (header.php) and the
     cart's wrapper carries its own margin-left:auto — R10-4 (FIX
     ROUND 10) owns the whole ≤820px header cascade. Only the logo
     centring from this block survives, below. */
  .z-header .custom-logo-link,
  .z-header .z-logo{
    position:absolute;left:50%;transform:translateX(-50%);order:0;
  }
}

/* --- R6-4. Cart drawer free-shipping bar → black on light grey --------
   Was a green-tinted strip (green message, pale-green track, green
   fill). Message is now plain ink, track light grey, fill solid black. */
.z-ship-progress{background:#fff}
.z-ship-progress p{color:var(--z-ink)}
.z-ship-progress__bar{background:#e8e6ee}
.z-ship-progress__fill{background:var(--z-black)}

/* --- R6-5. [zentrous_tabs] — pill tabs + panels -------------------------
   Pills row right-aligned above the panels (the section heading comes
   from the page block around the shortcode, not the shortcode itself).
   First pill active (black); panels toggle via the hidden attribute
   and a small vanilla-JS switch in zentrous.js — no AJAX. ------------ */
.z-tabs__bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin:0 0 16px}
.z-tabs__pill{
  border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;cursor:pointer;
  background:var(--z-soft);color:var(--z-ink);border:1px solid var(--z-line);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.z-tabs__pill:hover{border-color:var(--z-ink)}
.z-tabs__pill.is-active{background:var(--z-black);color:#fff;border-color:var(--z-black)}
.z-tabs__panel[hidden]{display:none}

/* --- R6-6. [zentrous_trust] strip + product-page trust row ------------
   Line icon + bold label ONLY — no heading, no description sentences.
   One item markup serves both: the homepage strip (.z-trust-strip)
   and the single-product row (.z-trust-row reuses the strip layout;
   its old grey-box .z-trust-item rules simply stop matching because
   the template now prints strip items). ------------------------------ */
.z-trust-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin:34px 0 6px;padding:6px 0;
}
.z-trust-strip__item{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;color:var(--z-ink);
}
.z-trust-strip__item svg{
  width:30px;height:30px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.z-trust-strip__item span{
  font-size:13.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.3;
}
.z-trust-row.z-trust-strip{margin:22px 0}
@media (max-width:820px){
  .z-trust-strip{grid-template-columns:repeat(2,1fr)}
}

/* --- R6-7. Single product buy box → stacked buttons --------------------
   Reference order: full-width ADD TO CART (white, 1.5px black outline,
   black text) ABOVE full-width BUY IT NOW (solid black); the quantity
   stepper sits BELOW both. This replaces the v1.0.1 6b treatment
   (solid-black Add to Cart, buy-red Buy It Now) and the old row
   layout at every width. display:contents lifts quantity + buttons
   out of Woo's .single_variation_wrap / .woocommerce-variation-add-
   to-cart wrappers so flex order can sequence them for simple AND
   variable forms alike; Woo's variation JS only reads/writes the
   DOM (classes, hidden inputs), which display:contents does not
   disturb, and the theme's no-variation JS guard + the server-side
   zentrous_buy_now redirect are untouched, as is the sticky buy bar.
   The !important is deliberate: Woo's variation script shows/hides
   the wrap with inline display styles, and a plain stylesheet
   display:contents would lose to them after the first selection —
   the stack would degrade to quantity-first (buttons still stacked
   full-width in order), never to a broken layout. */
.z-buy-row form.cart{flex-direction:column;align-items:stretch}
.z-buy-row .single_variation_wrap,
.z-buy-row .woocommerce-variation-add-to-cart{display:contents!important}
.z-buy-row form.cart .single_add_to_cart_button{order:1;width:100%}
.z-buy-row form.cart .z-buy-now-btn{order:2;width:100%}
.z-buy-row form.cart .quantity{order:3;align-self:flex-start}
.z-buy-row form.cart .variations{order:0}
.woocommerce .z-buy-row form.cart button.single_add_to_cart_button,
.woocommerce .z-buy-row form.cart button.single_add_to_cart_button.disabled,
.woocommerce .z-buy-row form.cart button.single_add_to_cart_button.wc-variation-selection-needed{
  background:#fff!important;color:var(--z-ink)!important;
  border:1.5px solid var(--z-ink)!important;opacity:1!important;
  min-height:50px;padding:13px 26px;
}
.woocommerce .z-buy-row form.cart button.single_add_to_cart_button:hover{background:var(--z-soft)!important}
.woocommerce .z-buy-row form.cart button.z-buy-now-btn{
  background:var(--z-black);color:#fff;border:1.5px solid var(--z-black);
  min-height:50px;padding:13px 28px;
}
.woocommerce .z-buy-row form.cart button.z-buy-now-btn:hover{background:#222;color:#fff}

/* ==========================================================================
   FIX ROUND 7 (v1.0.7) — mobile + interaction survivors of the v1.0.6
   verification (desktop was 10/10). Root causes and the full item map
   are in FIX-NOTES.md ("Round v1.0.7").
   ========================================================================== */

/* --- R7-1. Mobile header: the search icon must RENDER ----------------
   Root cause: the v1.0.6 layout dissolved .z-header__actions with
   display:contents so its buttons could be ordered as direct flex
   items. The search <button> then occupied its ~50px slot in the row
   (the empty gap the verification measured between hamburger and
   logo) but never painted — display:contents parents are a known
   fragile pattern for form-control children, and the search toggle
   is the one plain <button> among them whose box generation depends
   on it. Fix: the pattern is abandoned. header.php now prints the
   nav toggle OUTSIDE the actions wrapper (desktop: display:none, so
   nothing moves there), and below the actions wrapper is an ordinary
   flex row that stretches between the hamburger and the right edge:
   search is its first item (immediately beside the hamburger, as the
   owner asked — "three-lines menu ke sath"), cart is pushed right
   with margin-left:auto. The logo stays absolutely centred (R6-3
   rules, untouched); it paints above the wrapper's empty middle, so
   it stays clickable. Selectors are scoped .z-header … (0,2,0) so
   they beat the R6-3 display:contents rule (0,1,0) at any order. --- */
/* R7-1's ≤820px rules stood here (actions as a flex:1 row, search
   forced visible as its first item, cart margin-left:auto). Removed
   in R10-4: header.php now groups toggle + search in one
   .z-header__cluster container and R10-4 owns the cascade. The
   search button is a plain flex item of a plain flex container
   again, so the display:contents fragility this block fought is
   gone by construction, not by another override. */

/* --- R7-2. Card swatches are BUTTONS now (v1.0.7 functional dots) ----
   content-product.php renders each colour value with an available
   variation as a <button class="z-swatch">; zentrous.js toggles
   .is-active. Reset the UA button chrome so a button dot is pixel-
   identical to the old span dot, and give the selected dot the
   reference's selection ring: white gap + ink ring, readable on any
   fill colour including white (the base 1px border stays under it). */
button.z-swatch{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;cursor:pointer;font:inherit;
}
.z-swatch.is-active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--z-ink)}
button.z-swatch:focus-visible{outline:2px solid var(--z-orange);outline-offset:2px}

/* --- R7-3. FAQ "+": centred on the row, however many lines it wraps --
   The homepage FAQ marker was a FLOAT (::after{float:right}): a
   float takes the line box it starts in, so a question wrapping to
   two lines on a narrow phone left its "+" sitting against the wrong
   line — some rows centred, some dropped low, exactly as the owner's
   screenshot showed. The summary is now a flex row and the marker a
   centred, non-shrinking flex item pinned to the row's middle at any
   line count. Same specificity as the floated rules it replaces
   (0,1,1 / 0,1,2) — later in the file wins. -------------------------- */
.z-front-content summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.z-front-content summary::after{float:none;flex:0 0 auto;margin:0;line-height:1}

/* --- R7-4. Hero edges: symmetric, clamped, no band --------------------
   On the owner's real phone the slider ran off one side with a grey/
   silver band behind it (the Customizer preview contained it). Two
   stacked causes in the theme's own rules: (a) the round-1 first-
   paint guard paints var(--z-soft) — a light silver-grey — behind
   .n2-section-smartslider / .n2-ss-slider, and the section wrapper
   spans the full content width while the slider sits inside its
   side margins, so a grey frame shows around the slider wherever
   the two don't coincide; (b) Smart Slider's full-width mode can
   set the section/slider wider than the content column (its own
   inline geometry), which at phone width reads as a one-sided run-
   off. Fix: the band colour is gone (transparent — the min-height
   first-paint reservation stays), the section is clamped to the
   content width with overflow hidden, Smart Slider's default
   container shadow is removed, and the slider's side margins are
   re-asserted SYMMETRIC (12px) across the whole ≤820px band (the
   absorbed R5 rule only covered ≤768px, leaving 769–820px at the
   desktop 30px). The R5 radius (20px) and overflow clipping on the
   slider itself are untouched. -------------------------------------- */
main .n2-section-smartslider{
  max-width:100%!important;overflow:hidden;
  background:transparent!important;box-shadow:none!important;
}
main .n2-ss-slider{
  width:auto!important;background:transparent!important;box-shadow:none!important;
}
main .n2-ss-slider .n2-ss-slide{box-shadow:none}
@media (max-width:820px){
  main .n2-ss-slider{margin-left:12px!important;margin-right:12px!important}
}

/* --- R7-5. Card foot on narrow cards: the pill must never cover the
   price (owner phone screenshots of LIVE v1.0.6, patched into this
   round). Root cause — no absolute positioning or negative margin is
   involved (checked: no such rule touches the card button). The foot
   is a NON-wrapping flex row; at ≤640px the R6-1 button is
   flex:0 0 auto (never shrinks) with white-space:nowrap and 10px 14px
   padding at 12px — "SELECT OPTIONS" ≈ 129px of untouchable width —
   while the price column is flex:1 1 auto with min-width:0, so it
   absorbs the ENTIRE squeeze. Price (~55px) + gap (10px) + button
   (~129px) ≈ 194px against a ~136px card content box at a 360px
   viewport (2-col grid): the price column collapses toward zero, its
   amounts are white-space:nowrap (R3-3) with no overflow clipping, so
   they spill right OUT of the collapsed column — and the opaque pill,
   the later flex item, paints over the spill. Net render: struck
   price half-covered, current price hidden behind the button with
   only its "$" peeking out. The R3-4/R4-3 width:100% phone rules
   cannot rescue this — R6-1's foot selectors outrank them by design.
   Fix: the row may WRAP, the button may SHRINK (11px, 8px 10px), and
   when price + button cannot share the row the button takes its own
   line under the price, left-aligned (a lone item on a space-between
   line sits at the start), full label visible. The price column
   keeps flex:1 1 auto / min-width:0 and, alone on its line, grows to
   the full card width. Selectors repeat R6-1's (0,3,0 context-free /
   0,6,2 archive) later in the file, so they win every tie against
   R3-4/R4-3/R6-1 at ≤640px; desktop is untouched. ----------------- */
@media (max-width:640px){
  .zentrous-card__foot{flex-wrap:wrap;gap:8px}
  .zentrous-card__foot .zentrous-card__price{flex:1 1 auto;min-width:0}
  .zentrous-card__foot .button,
  .zentrous-card__foot a.button,
  .zentrous-card__foot a.added_to_cart,
  .woocommerce ul.products li.product.zentrous-card .zentrous-card__foot .button,
  .woocommerce ul.products li.product.zentrous-card .zentrous-card__foot a.added_to_cart{
    flex:0 1 auto;min-width:0;width:auto;
    min-height:34px;padding:8px 10px;font-size:11px;line-height:1.15;
    white-space:normal;
  }
}

/* --- R7-6. [zentrous_tabs] pills: ONE row at every width ------------
   Root cause: R6-5 set .z-tabs__bar{flex-wrap:wrap;
   justify-content:flex-end}. The three pills at 12.5px with 9px 18px
   padding total ≈ 371px + gaps — more than a phone's ~336px content
   width — so the row broke after GIFTS and dropped KIDS & FAMILY
   alone onto a second, also right-aligned row: the staggered mess in
   the owner's screenshot. Fix: the bar never wraps; it scrolls
   horizontally instead (scrollbar hidden), pills keep their natural
   text width (flex:0 0 auto + nowrap), and at ≤820px the row aligns
   LEFT under the section heading with compact pills (11px, 8px 12px
   → all three ≈ 329px, one line even at 360px). Desktop keeps the
   R6-5 right alignment, now nowrap as well. ----------------------- */
.z-tabs__bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.z-tabs__bar::-webkit-scrollbar{display:none}
.z-tabs__pill{flex:0 0 auto;white-space:nowrap}
@media (max-width:820px){
  .z-tabs__bar{justify-content:flex-start}
  .z-tabs__pill{padding:8px 12px;font-size:11px}
}

/* ==========================================================================
   FIX ROUND 8 (v1.0.8) — the v1.0.7 verification survivors, diagnosed
   against the LIVE store's own HTML: dead card swatches (a PHP key
   mismatch — see FIX-NOTES "Round v1.0.8" item 1; that fix is in
   content-product.php, not here), elliptical category circles with a
   grey crescent, the silver card panel, brand-colour socials, the
   reference-shaped rating badge, the mobile header pair, and the
   newsletter band recoloured to the promo gradient.
   ========================================================================== */

/* --- R8-1. Category circles: TRUE squares, no grey disc --------------
   Root cause: the R5 rules sized the FIGURE (115×115, background
   #f6f6f6, circle clip) and gave the img width/height 100% — but
   since the v1.0.7 page fix the img sits inside an inline <a>, so the
   img's percentage HEIGHT has no definite base and collapses to
   auto; with height auto, the never-removed v1.0.1 rule
   (.z-front-content … figure img{aspect-ratio:4/3}) takes over and
   forces the photo to 4:3 (wider than tall — the ellipse), and the
   figure's own #f6f6f6 background shows beneath the shortened photo
   as the grey crescent inside the clipped circle. The fix removes
   every percentage-height dependency: the figure is a positioned
   square via aspect-ratio, the anchor is stretched over it as a
   block, and the img is absolutely filled with its aspect-ratio
   explicitly reset. Figure background is TRANSPARENT — no grey disc
   exists anywhere in the cell now. Labels lose the ellipsis clamp
   and wrap fully (see the ≤768px block for the phone sizes). */
main .wp-block-column > .wp-block-group figure{
  position:relative!important;width:115px!important;height:auto!important;
  aspect-ratio:1/1!important;border-radius:50%!important;overflow:hidden!important;
  background:transparent!important;margin:0 auto!important;flex:none!important;
}
main .wp-block-column > .wp-block-group figure a{
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;border-radius:50%!important;
}
main .wp-block-column > .wp-block-group figure img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;border-radius:50%!important;
  aspect-ratio:auto!important;
}
main .wp-block-column > .wp-block-group h3{
  overflow:visible!important;text-overflow:clip!important;white-space:normal!important;
}
/* REMOVED in R12-1 (v1.0.12): R8-1's ≤768px size/label block stood
   here (50px circles, 10.5px full-wrap labels). The true-circle
   CONSTRUCTION above (aspect-ratio figure, absolute anchor + img,
   transparent background) is untouched and still owns the circles;
   only the phone sizes and label metrics moved — into the
   consolidated R12-1 block, where the circle is 68px and the label
   is 10px inside its own grid cell. */

/* --- R8-2. Card media: visible SLIGHT SILVER panel + inset photo ----
   The reference's product photos sit on a light silver panel; the
   store's CJ photos carry white backgrounds, so the silver must read
   as a FRAME: the panel deepens to #e9e9ee and gains 9px of padding,
   the photo insets inside it with a smaller radius. One rule set on
   .zentrous-card__media covers every card context (homepage grids,
   tabs, shop, category, related — all render content-product.php).
   The product-page gallery frame takes the same treatment. */
.zentrous-card__media{background:#e9e9ee;border-radius:12px;padding:9px}
.zentrous-card__media img{border-radius:7px}
.z-gallery__main{background:#e9e9ee;padding:9px}
.z-gallery__main img{border-radius:10px}

/* --- R8-3. Footer socials: brand-colour circles -----------------------
   footer.php now prints inline SVG glyphs with data-social keys;
   each link is a 38px circle in its brand colour (white glyph),
   replacing the monochrome letter chips. Links stay '#' until the
   store's accounts exist (existing theme-mod behaviour). */
.z-socials{gap:10px}
.z-socials a{
  width:38px;height:38px;border:0;border-radius:50%;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0;line-height:0;transition:transform .15s ease,filter .15s ease;
}
.z-socials a svg{width:19px;height:19px;display:block;fill:currentColor}
.z-socials a[data-social="facebook"]{background:#1877F2}
.z-socials a[data-social="instagram"]{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
.z-socials a[data-social="tiktok"]{background:#000}
.z-socials a[data-social="youtube"]{background:#FF0000}
.z-socials a[data-social="pinterest"]{background:#E60023}
.z-socials a[data-social="x"]{background:#000}
.z-socials a:hover{color:#fff;filter:brightness(1.12);transform:translateY(-2px)}

/* --- R8-4. Rating badge (reference shape, real reviews only) ---------
   zentrous_product_rating_html() now prints .z-rating-badge: gold
   star + average + '|' + count (+ green verified tick when a
   verified-owner review exists). Zero reviews → the helper prints
   nothing at all, as before. The product-page review list's own
   "(Verified owner)" line (WooCommerce's review template) is
   restyled to the same green tick badge. */
.zentrous-card__rating{display:flex;align-items:center}
.z-rating-badge{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--z-ink);line-height:1}
.z-rating-star{color:var(--z-gold);flex:0 0 auto;display:block}
.z-rating-sep{color:#b9b4c7;font-weight:400}
.z-verified-tick{color:#1a9e4b;display:inline-flex;flex:0 0 auto}
.z-verified-tick svg{display:block}
.z-product-rating .z-rating-badge{font-size:14.5px}
.z-reviews .woocommerce-review__verified{
  display:inline-flex;align-items:center;font-size:0;line-height:0;vertical-align:middle;
}
.z-reviews .woocommerce-review__verified::before{
  content:"✓";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:#1a9e4b;color:#fff;
  font-size:10px;font-weight:700;font-style:normal;line-height:1;
}

/* --- R8-5. Mobile header: hamburger + search read as ONE pair --------
   v1.0.7 made the search icon render (R7-1); on the owner's phone it
   still read as grouped with the centred logo rather than with the
   menu. Spacing only: the pair's gap is pinned at 6px and the left
   cluster sits flush; the logo stays absolutely centred (R6-3) and
   the cart stays right (R7-1). */
/* R8-5's two gap rules stood here. Removed in R10-4 — spacing-only
   fixes to the pair kept losing to the structure (see R10-4); the
   cluster in header.php owns the pairing now. */

/* --- R8-6. Homepage newsletter band → the promo gradient -------------
   The page-694 group carrying the Newsletter form is a bare
   .wp-block-group with an INLINE flat orange (background-color:
   #ff6a1a). Scoped by :has(.tnp-subscription) — only that group on
   the page contains the form — it takes the .z-promo gradient
   (105deg, #4a1578 → #8e1163 58% → #e0218a) and the promo's 20px
   radius; the !important shorthand beats the inline colour. The
   form takes the promo's treatment on the gradient: centred flex
   row, email a white pill, and the SUBSCRIBE submit a WHITE pill
   with dark text (the v1.0.1 black pill fought the gradient). The
   .z-newsletter-scoped v1.0.1 rules are untouched and keep working
   wherever that wrapper is used. */
.z-front-content .wp-block-group:has(.tnp-subscription){
  background:linear-gradient(105deg,#4a1578,#8e1163 58%,#e0218a)!important;
  border-radius:20px!important;color:#fff!important;
}
.z-front-content .wp-block-group:has(.tnp-subscription) .tnp-subscription form{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  max-width:620px;margin:8px auto 0;
}
.z-front-content .wp-block-group:has(.tnp-subscription) .tnp-subscription .tnp-field{
  flex:1 1 230px;margin:0;
}
.z-front-content .wp-block-group:has(.tnp-subscription) .tnp-subscription .tnp-field-button{
  flex:0 0 auto;
}
.z-front-content .wp-block-group:has(.tnp-subscription) .tnp-subscription label{
  color:#fff!important;font-weight:600;font-size:14px;
}
.z-front-content .wp-block-group:has(.tnp-subscription) .tnp-subscription input.tnp-email{
  width:100%;border:0;border-radius:999px;padding:13px 20px;background:#fff;color:var(--z-ink);
}
.z-front-content .wp-block-group:has(.tnp-subscription) .tnp-subscription input.tnp-submit{
  background:#fff!important;color:#17141f!important;border:0;border-radius:999px;
  padding:13px 28px;font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.04em;cursor:pointer;width:auto;
}
.z-front-content .wp-block-group:has(.tnp-subscription) .tnp-subscription input.tnp-submit:hover{
  background:#efe9fb!important;
}

/* ==========================================================================
   FIX ROUND 9 (v1.0.9) — card CTA takes the promo gradient; TikTok/X
   footer discs gain a visible edge on the black footer. Two small
   owner-directed changes; geometry from R6-1/R7-5 is untouched.
   ========================================================================== */

/* --- R9-1. Card foot CTA → the promo purple→pink gradient -------------
   Owner order: the pill in the card foot (SELECT OPTIONS for variable
   products, BUY NOW for simple ones) leaves the maroon
   var(--z-card-red) (#7f1d1d) and takes the SAME gradient as .z-promo
   and the newsletter band (R8-6). Colour ONLY — size, shape and the
   R7-5 wrap/shrink behaviour stay exactly as they were. The maroon
   reaches the pill from the base .zentrous-card .button rule (0,2,0):
   the R6-1/R7-5 foot rules set geometry, never colour. So the gradient
   is declared on those same foot selectors (0,3,0 context-free),
   which outrank the base rule in every context the foot renders
   (homepage shortcode grids, tabs, shop, category, related), with
   border-color:transparent so no maroon edge survives around the
   gradient. The ≤640px repeat uses R7-5's own selector set (incl.
   the 0,6,2 archive pair) so the gradient also holds inside the
   phone band. Hover/focus: the same gradient under a brightness dip
   (these 0,4,0 selectors beat the base .zentrous-card .button:hover
   maroon, 0,3,0). The foot's added_to_cart link is grouped with the
   CTA here exactly as R6-1/R7-5 group it for geometry. Untouched by
   design: the product-page ADD TO CART (white/black outline) and
   BUY IT NOW (solid black), the sticky buy bar, the drawer buttons,
   and the red "% OFF" text (a discount label, not this button). --- */
.zentrous-card__foot .button,
.zentrous-card__foot a.button,
.zentrous-card__foot a.added_to_cart{
  background:linear-gradient(105deg,#4a1578,#8e1163 58%,#e0218a);
  border-color:transparent;color:#fff;
}
.zentrous-card__foot .button:hover,
.zentrous-card__foot a.button:hover,
.zentrous-card__foot a.added_to_cart:hover,
.zentrous-card__foot .button:focus-visible,
.zentrous-card__foot a.button:focus-visible{
  background:linear-gradient(105deg,#4a1578,#8e1163 58%,#e0218a);
  border-color:transparent;color:#fff;filter:brightness(.88);
}
@media (max-width:640px){
  .zentrous-card__foot .button,
  .zentrous-card__foot a.button,
  .zentrous-card__foot a.added_to_cart,
  .woocommerce ul.products li.product.zentrous-card .zentrous-card__foot .button,
  .woocommerce ul.products li.product.zentrous-card .zentrous-card__foot a.added_to_cart{
    background:linear-gradient(105deg,#4a1578,#8e1163 58%,#e0218a);
    border-color:transparent;color:#fff;
  }
}

/* --- R9-2. TikTok / X footer discs: a visible edge on black ----------
   v1.0.8 verification: the TikTok and X discs are #000 circles on the
   footer's black background, so the disc edge vanishes and only the
   white glyph floats. Brand-wise both discs must stay black, so just
   those two gain a subtle 1px light border — the attribute selectors
   (0,2,1) beat R8-3's border:0 on .z-socials a (0,1,1). The disc
   stays #000 and the glyph stays white; the other four brand-colour
   discs are untouched. -------------------------------------------- */
.z-socials a[data-social="tiktok"],
.z-socials a[data-social="x"]{
  border:1px solid rgba(255,255,255,.35);
}

/* ==========================================================================
   FIX ROUND 10 (v1.0.10) — diagnosed from the LIVE render (curl of the
   homepage + Smart Slider's own generated CSS), because the Customizer
   preview passed the hero and the header pair while the owner's real
   phone failed both, twice. Five items: hero asymmetry, the category
   row gap, category label mid-word breaks, the search-icon grouping
   made structural, and the price colours. Root causes and the full
   item map are in FIX-NOTES.md ("Round v1.0.10").
   ========================================================================== */

/* --- R10-1. Hero: symmetric by construction --------------------------
   Live evidence: the slider is Smart Slider 3 in "full width" mode —
   its wrapper chain (.n2-section-smartslider > #n2-ss-2-align >
   .n2-padding > #n2-ss-2) carries NO server-side width; SS3's JS
   measures at runtime and sets the slider's pixel width itself. The
   theme asked the section only to CLIP (overflow:hidden since R7-4)
   while the slider stayed LEFT-ANCHORED — SS3's align wrapper is a
   plain left-aligned block and R5/R7-4 put plain side margins on the
   slider. Any overshoot between SS3's measured width and the real
   visual viewport (the desktop-class layout width Android Chrome
   first reports, before settling to the visual width) therefore
   shows entirely on the RIGHT: left inset visible, right edge cut —
   the owner's photo, twice. The Customizer preview iframes at one
   fixed width, so SS3's measurement happens to be right there.
   Fix — containment, not another measurement: the section and the
   whole wrapper chain are hard-capped at the content width; the
   slider is CENTRED with auto side margins (and at ≤820px a
   max-width of 100% − 24px, preserving the symmetric 12px design
   inset); and because the section clips, any residual overshoot is
   cropped EQUALLY on both sides instead of running off the right.
   The R5 radius (20px) and the R7-4 transparent background stand. -- */
main .n2-section-smartslider,
main .n2-ss-align,
main .n2-ss-align .n2-padding{
  width:100%!important;max-width:100%!important;
  margin-left:0!important;margin-right:0!important;
}
main .n2-ss-slider{
  margin-left:auto!important;margin-right:auto!important;
  max-width:100%!important;left:auto!important;
}
@media (max-width:820px){
  main .n2-ss-slider{max-width:calc(100% - 24px)!important}
}

/* --- R10-2. Category rows: the dead band between them ----------------
   Live markup: the two category Columns blocks sit BACK-TO-BACK (the
   v1.0.7 page fix already removed the spacer), yet ~90px of white
   separates row 1's labels from row 2's circles on the phone. The
   space is stacked from: the block library's .wp-block-columns
   margin-bottom (1.75em ≈ 28px), row 1's THREE-line labels (the R8
   full-wrap labels at the narrow measure — shortened by R10-3), and
   the scroll row's own bottom padding. Fix: the first category block
   (identified structurally: a category Columns block whose next
   sibling is another Columns block that is NOT the .z-promo band)
   gets an explicit 20px bottom margin at ≤820px, and both category
   blocks lose any top margin, so the label-to-circle distance lands
   at ~20–24px. Desktop keeps the block library's ~28px (inside the
   owner's "airy, not below ~24px" band) untouched. --------------- */
/* REMOVED in R12-1 (v1.0.12): R10-2's two margin rules stood here.
   Their selector DID match (live proof in round 12: the two
   category blocks are adjacent `.z-tiles` siblings) and the ~26px
   they produced stacked on top of 3-line labels — the owner wants
   ~16px TOTAL and only there. The row gap is now set inside the
   consolidated R12-1 block with the proven `.z-tiles:has(+ .z-tiles)`
   selector at exactly 16px; both blocks' margin-top:0 intent is
   carried into that block, and the cats→promo gap is untouched. */

/* --- R10-3. Category labels: words never break mid-word --------------
   R8 let the labels wrap fully, but the label measure was the 58px
   column itself: at 10.5px Poppins the longest words — "Countdown"
   (≈57px), "Ornaments" (≈58px) — meet or exceed the measure, and the
   theme's .z-front-content h3{overflow-wrap:break-word} then splits
   them ("Countdow/n", "Ornament/s" in the owner's screenshot). Fix:
   at ≤768px the label takes an 80px measure CENTRED on its 58px
   column (negative offset via margin-left calc — the label box may
   be wider than the column; the columns are flex items in a clipped
   scroll row and the arithmetic is safe: 4 × 58px + 3 × 8px gaps =
   256px of columns inside ≥312px of row at 360px, and each label
   extends only ~11px into the 8px gap + its neighbour's empty
   centred-text margins, so no text collides and nothing reaches the
   row's edge). Word-breaking is switched OFF for these labels:
   overflow-wrap:normal + word-break:normal + no hyphens, so a word
   that still cannot fit wraps whole to the next line instead of
   splitting. Labels stay centred; 2–3 lines are fine. ------------ */
/* REMOVED in R12-1 (v1.0.12): R10-3's 80px centred-bleed label
   measure stood here — it is the DIRECT cause of Defect A in round
   12: an 80px label box centred on a ~72–80px cell reaches ~11px
   into each neighbour's cell, and with every label doing the same,
   adjacent labels' glyphs meet ("ChristmasTree Toppers",
   "Calendars &Lights & DécorOrnaments" in the owner's screenshot).
   Labels now take 100% of their OWN grid cell in R12-1 — no bleed,
   no negative margins — so collision is geometrically impossible. */

/* --- R10-4. Mobile header: the pair is STRUCTURAL now -----------------
   History: v1.0.6 ordered three dissolved buttons (search vanished);
   v1.0.7 put search + cart in one flex:1 actions row (search first);
   v1.0.8 pinned 6px gaps. All three "passed" the preview and failed
   the phone, because the defect was never the gap value: the search
   lived inside the actions row that spans the FULL header width
   under the absolutely-centred logo, so the magnifier's right edge
   sat a few px from the logo's left edge while its left edge sat a
   full icon-width from the hamburger glyph — it READ as the logo's
   companion. Fix: header.php now prints ONE .z-header__cluster
   container holding exactly the nav toggle + the search toggle (no
   in-flow siblings between them, 8px gap, flex:0 0 auto), and the
   cart's wrapper is pushed right with margin-left:auto. The cascade
   is cleaned, not stacked: R6-3's display:contents + order lines,
   R7-1's actions-row rules and R8-5's gap rules are REMOVED from
   this sheet; the block below is the single ≤820px owner of the
   header layout (the surviving earlier rules agree with it: R3-2
   hides the desktop nav and shows the toggle; R6-3 centres the logo
   absolutely; the base ≤820px block's justify-content:space-between
   at 0,1,0 loses to this block's 0,2,0). Desktop: the cluster is a
   plain flex box whose only visible child is the search button;
   flex order restores the pre-1.0.10 arrangement exactly (logo,
   nav, search, cart) and a −12px cluster margin keeps the old 6px
   search↔cart spacing against the inner row's 18px gap. ---------- */
.z-header__cluster{display:flex;align-items:center;gap:8px;flex:0 0 auto}
@media (min-width:821px){
  .z-header__cluster{order:3;margin-right:-12px}
  .z-header__actions{order:4}
}
@media (max-width:820px){
  .z-header .z-header__inner{position:relative;justify-content:flex-start;gap:10px}
  .z-header .z-header__cluster{display:flex;align-items:center;gap:8px;flex:0 0 auto}
  .z-header .z-header__cluster .z-nav-toggle,
  .z-header .z-header__cluster [data-zentrous-search-open]{
    display:inline-flex;flex:0 0 auto;
  }
  .z-header .z-header__actions{
    display:flex;align-items:center;flex:0 0 auto;margin-left:auto;min-width:0;
  }
  .z-header .z-cart-toggle{flex:0 0 auto}
}

/* --- R10-5. Price colours: sale purple, original ink ------------------
   Owner order: the SELLING price of a sale turns the theme's solid
   purple (#5e2391 — the legible banafshi; text cannot carry the
   promo gradient), and the struck ORIGINAL turns ink black (#141414)
   instead of the muted #999 it has worn since the base rules. Woo
   marks the sale state structurally — <ins> is always the current
   selling amount and <del> always the struck original inside every
   price shape the theme prints (the card helper's del/ins pair, the
   variation payload prices the swatch JS swaps in, Woo's own
   get_price_html() ranges, the product summary) — so styling ins/del
   styles exactly the sale state: a plain amount (single price, or an
   un-sale range) has no ins and stays ink, as ordered. These rules
   repeat the base selectors (0,1,1 / 0,2,1) at the end of the sheet
   so they win every tie; sizes and weights are untouched, and the
   red "% OFF" label is not a price and stays red. ----------------- */
.zentrous-card__price del{color:#141414}
.zentrous-card__price ins{color:#5e2391}
.z-product-price del,
.z-product-price .price del,
.z-product-summary .z-product-price del{color:#141414}
.z-product-price ins,
.z-product-price .price ins,
.z-product-summary .z-product-price ins{color:#5e2391}

/* ==========================================================================
   FIX ROUND 11 (v1.0.11) — the product page rendered WIDER than the
   owner's phone (header, title, gallery all clipped) + card silver
   shadow (owner, techhunk.pk reference). Diagnosis in FIX-NOTES.md,
   Round v1.0.11: nothing in the theme contained imported product
   content or guarded the product grid against min-content blowout,
   so ONE element wider than the viewport widened the whole body's
   scroll area — and the in-flow sticky header widened with it. The
   cure is containment at the source (R11-2..R11-4); R11-1 is only a
   backstop. R11-5 is the card shadow. ================================ */

/* --- R11-1. Global backstop: no sideways page, ever --------------------
   overflow-x:clip — NOT hidden. clip forbids horizontal scrolling
   WITHOUT creating a scroll container, so position:sticky (the site
   header) and position:fixed (the sticky buy bar) are untouched;
   hidden would turn html/body into a scroll container and can break
   sticky in the engines that take the fallback. This net catches
   anything R11-2..R11-4 somehow miss (a future CJ import, a new
   plugin widget): the excess is clipped, the page can never again
   grow wider than the screen. Fallback for pre-clip engines
   (Android Chrome < 90 / Safari < 16): hidden on BODY ONLY — html
   stays visible so the viewport keeps the real scroll context. --- */
html,body{overflow-x:clip}
@supports not (overflow:clip){
  body{overflow-x:hidden}
}

/* --- R11-2. Imported product content can never exceed its box ---------
   CJ description / attribute HTML is printed raw into the Woo tab
   panels (woocommerce_output_product_data_tabs) and, for pages, into
   .entry-content. Before this round the ONLY guard in the theme was
   the global img{max-width:100%} (line ~57): tables, iframes,
   videos, figures and ANY element carrying an inline width were
   completely unguarded — the attributes table (.shop_attributes)
   did not even match the theme's one table rule (.shop_table).
   max-width:100%!important caps the used width even when an inline
   style sets width:750px; tables become their own horizontal scroll
   strip instead of widening the page; long unbroken strings wrap. - */
.z-product-tabs .panel img,
.z-product-tabs .panel video,
.z-product-tabs .panel iframe,
.z-product-tabs .panel embed,
.z-product-tabs .panel object,
.z-product-tabs .panel figure,
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content figure{max-width:100%!important}
.z-product-tabs .panel img,
.z-product-tabs .panel video,
.entry-content img,
.entry-content video{height:auto}
.z-product-tabs .panel table,
.entry-content table{
  display:block;width:100%;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.z-product-tabs .panel :where(p,li,td,th,div,span,a,h2,h3,h4),
.entry-content :where(p,li,td,th,div,span,a,h2,h3,h4){overflow-wrap:break-word}
.z-product-tabs .panel pre,
.entry-content pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}

/* --- R11-3. Product layout: grid-blowout proofing ---------------------
   .z-product-main used bare fr tracks (1.05fr/.95fr, 1fr at ≤1024px)
   and its items carried no min-width:0 — the textbook CSS grid
   blowout: a grid item refuses to shrink below its widest
   min-content descendant (a table, a select, an unbreakable string),
   the track follows, and the whole page renders wide. minmax(0,…)
   tracks + min-width:0 items remove that path entirely; the summary
   column and the buy form (variations table included) are capped
   the same way. ------------------------------------------------------ */
.z-product-main{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.z-product-main>*{min-width:0}
@media (max-width:1024px){
  .z-product-main{grid-template-columns:minmax(0,1fr)}
}
.z-product-summary{min-width:0;max-width:100%}
.z-buy-row,
.z-buy-row form.cart,
.z-buy-row form.cart .variations,
.z-buy-row .single_variation_wrap{min-width:0;max-width:100%}
.z-sale-bar{min-width:0}
.z-sale-bar>span{min-width:0}

/* --- R11-4. Gallery + thumbnails stay inside their box -----------------
   The main frame is already a capped, overflow:hidden panel (and the
   R8-2 silver frame); the strip already wraps. These rules pin the
   whole gallery column to its track so no state of it — many thumbs,
   a swapped main image, a long file name — can push past 100%. ----- */
.z-gallery{min-width:0;max-width:100%}
.z-gallery__main{max-width:100%}
.z-gallery__thumbs{max-width:100%;flex-wrap:wrap}
.z-gallery__thumb{flex:0 0 auto;max-width:100%}

/* --- R11-5. Card silver shadow (owner order; reference: techhunk.pk) --
   The reference's cards are white cards resting on a near-white page,
   DEFINED by a soft all-around silver shadow. Ours already had the
   white body, the radius and the R8-2 silver media panel, but the
   card's own shadow was a whisper (0 1px 2px rgba(20,20,20,.03)) and
   its edge the generic --z-card-border (#e8e8e8). Now: a defined 1px
   silver edge #e3e3e8 + 0 2px 14px rgba(20,20,20,.10) in EVERY context
   the card renders (homepage grids, tabs, shop, category, related,
   recently viewed — the card is only ever an li.product inside a
   ul.products, and the plain .zentrous-card line below covers any
   stray context at lower specificity), deepening slightly on hover
   where hover exists. Nothing else is taken from the reference: the
   CTA stays the owner's purple gradient (R9-1) and no ratings are
   printed without real reviews. ------------------------------------ */
.zentrous-card{box-shadow:0 2px 14px rgba(20,20,20,.10)}
.woocommerce ul.products li.product.zentrous-card,
ul.products li.product.zentrous-card{
  border-color:#e3e3e8;
  box-shadow:0 2px 14px rgba(20,20,20,.10);
}
@media (hover:hover){
  .woocommerce ul.products li.product.zentrous-card:hover,
  ul.products li.product.zentrous-card:hover{
    box-shadow:0 8px 24px rgba(20,20,20,.14);
  }
}

/* ==========================================================================
   FIX ROUND 12 (v1.0.12) — three REAL-PHONE survivors of v1.0.10.
   Diagnosed from the LIVE render: the homepage HTML was curled from
   this VM and the cascade was resolved on paper before any rule was
   written, because the Customizer preview has now passed falsely
   THREE times — every claim below is proved from the CSS arithmetic
   itself, not from another preview. R12-1 CONSOLIDATES the phone
   category rules into one block (the conflicting R5 / R8-1 / R10-2 /
   R10-3 pieces are removed above, each with a note). R12-2 gives the
   hero the top gap that never existed. R12-3 makes the header pair
   provably tight. Full write-up: FIX-NOTES.md, "Round v1.0.12".
   ========================================================================== */

/* --- R12-1. Phone categories: ONE block, driven off the grid cell ---
   Live structure (curl-verified): the two category blocks are
   ADJACENT siblings — `.wp-block-columns.z-tiles` immediately
   followed by another `.wp-block-columns.z-tiles`, then
   `.wp-block-columns.z-promo`; each cell is column > group (inline
   #f6f6f6 + padding, both neutralised since R5) > figure > a > img
   plus an h3 label. On the phone each block renders as ONE row of
   4, so each block becomes a true 4-track grid and every measure
   hangs off the CELL:
     cell = (wrap − 3 × gap) / 4,  wrap = viewport − 40 (.z-wrap),
     gap = 10px.
     390px viewport → cell (350 − 30) / 4 = 80px.
     360px viewport → cell (320 − 30) / 4 = 72.5px.
   Labels take 100% of their OWN cell — no centred bleed, no
   negative margins — so a label box CANNOT extend past its track
   and touching a neighbour is geometrically impossible. The longest
   words ("Countdown", "Ornaments", "Calendars", "Christmas" — 9
   chars each) measure ≈55–60px at 10px Poppins 600 with
   letter-spacing −.01em: ≥12px of slack inside the smallest cell
   (72.5px), so words wrap WHOLE, never split (overflow-wrap and
   word-break are pinned to normal, beating the two break-word
   sources — `.z-front-content h3` at 0,1,1 and R11-2's :where()
   rule at 0,0,0 — by specificity AND the !important flag). Circles
   keep the R8-1 true-square construction (aspect-ratio figure,
   absolute anchor + img, transparent background) untouched; only
   the width is set here: 68px, inside every cell at ≥360px,
   shrinking with the cell (min(68px,100%)) below that.
   ROW GAP (owner, emphasised — ONLY this gap): the first .z-tiles
   block, selected by the live-proven adjacency
   `:has(+ .wp-block-columns.z-tiles)`, carries margin-bottom:16px;
   both blocks carry margin-top:0. Labels and figures have
   margin:0 and the grid has no padding, so the distance from row
   1's label bottoms to row 2's circle tops is EXACTLY 16px. No
   other gap moves: the second block keeps the block library's
   margin-bottom, so cats→promo is byte-identical to v1.0.10.
   Desktop (>820px) is untouched — the base R5/R8-1 rules still own
   it (115px circles, 13px labels, library spacing). ------------- */
@media (max-width:820px){
  main .z-front-content .wp-block-columns.z-tiles{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;overflow:visible!important;
    padding:0!important;margin-top:0!important;
  }
  main .z-front-content .wp-block-columns.z-tiles:has(+ .wp-block-columns.z-tiles){
    margin-bottom:16px!important;
  }
  main .z-front-content .wp-block-columns.z-tiles > .wp-block-column{
    width:auto!important;min-width:0!important;flex:none!important;margin:0!important;
  }
  main .z-front-content .wp-block-columns.z-tiles .wp-block-column > .wp-block-group{
    width:100%!important;
  }
  main .z-front-content .wp-block-columns.z-tiles .wp-block-column > .wp-block-group figure{
    width:min(68px,100%)!important;
  }
  main .z-front-content .wp-block-columns.z-tiles .wp-block-column > .wp-block-group h3{
    display:block!important;width:100%!important;max-width:100%!important;
    font-size:10px!important;font-weight:600!important;line-height:1.25!important;
    letter-spacing:-.01em!important;text-align:center!important;
    margin:0!important;
    overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;
    overflow:visible!important;white-space:normal!important;
  }
}

/* --- R12-2. Hero: the top gap that never existed --------------------
   The header is position:sticky — IN FLOW (base rule) — and grep
   proves no rule in any round pulls the slider up: there is no
   negative margin-top anywhere in this sheet, zentrous.js touches
   no header/slider geometry, and the live markup shows the SS3
   section as the FIRST child of .entry-content with no offsets.
   The defect is the opposite of a pull-up: NOTHING ever gave the
   hero a top gap — every margin any round set on the chain was
   horizontal (R5: 30px / 12px sides; R7-4: sides again; R10-1:
   sides + caps) — so at rest the slider's top edge sits FLUSH
   against the sticky header's bottom edge, and inside its canvas
   SS3's fill mode (data-mode="fill", centred) crops the photo, so
   the picture's top reads as hidden behind the header — the
   owner's words exactly. Fix: the section takes a real top margin
   (20px desktop / 14px phone), and the inner chain's margin-top is
   pinned to 0 so nothing — SS3's runtime geometry included — can
   pull the slider back up against the header. The sticky behaviour
   is NOT touched (no positioning change anywhere): the header
   still sticks and content still slides under it while scrolling;
   only the at-rest flush/overlap is gone. R10-1's centring, caps
   and symmetric cropping are untouched. --------------------------- */
main .n2-section-smartslider{margin-top:20px!important}
main .n2-ss-align,
main .n2-ss-align .n2-padding,
main .n2-ss-slider{margin-top:0!important}
@media (max-width:820px){
  main .n2-section-smartslider{margin-top:14px!important}
}

/* --- R12-3. Header pair: PROVABLY tight (owner, third time) ---------
   The pair was never loose at the BOX level — resolved at ≤820px
   the old cascade gives exactly 42 + 8 + 42 = 92px (line 46 sets
   *{box-sizing:border-box}; .z-icon-btn is 42×42 with border:0; the
   UA button padding the base rule never zeroed sits INSIDE the
   border-box and cannot widen it). What the eye groups, though, is
   GLYPHS, and there the old geometry failed, provably: the buttons
   are transparent, so only the 21px glyphs show; glyph centres sat
   50px apart (21 + 8 + 21 of air between the glyph EDGES = 29px),
   while the search glyph's right edge sat only ≈11px from the
   centred logo's left edge (logo at 32px tall = 164px wide
   lockup; at a 390px viewport its left edge is at 113px, the
   search glyph ended at ≈101.5px). 29px of air on one side, 11px
   on the other — the magnifier READ as the logo's companion, and
   no gap value on that geometry could change it. The fix moves
   every term of the arithmetic at ≤820px:
     • cluster gap 8px → 6px (R10-4's rule, superseded below at
       equal specificity by source order);
     • header icon buttons 42px → 38px, padding pinned to 0
       (the cart button takes the same size — visual balance);
     • header side inset 20px → 12px (the inner's .z-wrap width),
       moving the whole pair left, away from the centred logo;
     • the logo lockup 32px → 28px tall (≈144px wide) with its
       link capped at 38vw so narrow screens shrink it further.
   PROOF (390px viewport): inset 12; toggle box 12–50, glyph
   centre 31; gap 6; search box 56–94, glyph centre 75, glyph
   right edge 85.5. CLUSTER TOTAL = 38 + 6 + 38 = 82px. Air
   between the two glyphs' edges = (38 − 21) + 6 = 23px. Logo
   spans 123–267 (144px centred), so air from the search glyph
   to the logo = 123 − 85.5 = 37.5px. The pair's internal air
   (23px) is now clearly SMALLER than the air to the logo
   (37.5px, 1.6×) — the search reads as the hamburger's partner,
   unmistakably. At 412px: logo left edge 134 → air 48.5px. At
   360px: the 38vw cap draws the logo at 136.8px wide, left edge
   111.6 → air 26.1px, still > 23px. (At the 320px Customizer
   width the logo would sit ~14px from the glyph — the preview is
   not the test; the owner's phone is 390px-class.)
   Hunted leftovers, one by one: R10-4's −12px cluster margin
   exists ONLY inside its (min-width:821px) block — it contributes
   nothing at ≤820px and is KEPT, because removing it would change
   the desktop search↔cart spacing from 6px to 18px and the brief
   holds desktop pixel-unchanged; the ≥821px order rules are
   likewise desktop-only. Desktop is otherwise untouched. ------- */
@media (max-width:820px){
  .z-header .z-header__inner{width:calc(100% - 24px)}
  .z-header .z-header__cluster{gap:6px}
  .z-header .z-icon-btn{width:38px;height:38px;padding:0}
  .z-header .custom-logo-link{max-width:38vw}
  .z-header .custom-logo-link img,
  .z-header img.custom-logo{height:28px;max-height:28px}
  .z-header .z-logo svg,
  .z-header .z-logo__mark{height:28px;max-height:28px}
}