/*
 * ZAD Shared Design — component layer.
 * Every value comes from the token contract. There are no brand colours here;
 * that is the whole point. Five storefronts, one sheet.
 */

/* ---------- foundations ---------- */
/* The ground must be the brand's, not a legacy sheet's. A bare `body` rule
   loses to any plugin stylesheet that loads later, and on a dark brand that
   leaves near-white headings on a light ground — unreadable. The body class
   is added by this plugin, so one class of specificity settles it without
   !important. */
body,
body.zsd-light-brand,
body.zsd-dark-brand{background:var(--surface-base);color:var(--text-primary);
  font-family:var(--font-body);line-height:var(--leading-body)}
body.zsd-dark-brand :where(.site,#main,.ct-container,.entry-content){background:transparent}
h1,h2,h3,h4,h5,h6,.entry-title,.wp-block-heading{font-family:var(--font-heading);color:var(--text-primary);line-height:var(--leading-display);text-wrap:balance}
a{color:var(--brand-primary)}
a:hover{color:var(--brand-secondary)}
::selection{background:var(--brand-primary);color:var(--text-on-accent)}
:where(.zsd-section){padding-block:var(--space-xl)}
:where(.zsd-wrap){max-width:1200px;margin-inline:auto;padding-inline:var(--space-md)}

/* Arabic marks rise above the em box; display type needs the extra clearance. */
.zsd-rtl h1,.zsd-rtl h2,.zsd-rtl .zsd-display{padding-top:.08em}
/* Digits that line up in columns should not dance. */
.zsd-price,.zsd-stat,.woocommerce-Price-amount{font-variant-numeric:tabular-nums}

/* ---------- site chrome ----------
 * DELIBERATELY MINIMAL — see notes.
 *
 * Chrome roles (--chrome-bg / -fg / -muted / -accent / -border) are computed and
 * emitted by the token engine and are correct per brand (verified: aisi 20.32:1,
 * zadstack 17.89:1, zad.tools 19.44:1). What is NOT yet solved is applying them
 * to Blocksy's header: Blocksy paints its header rows from its own Customizer
 * variables, and three attempts to override that (parent background, row
 * background, raised specificity) each failed on pages whose legacy stylesheet
 * paints a dark ground — one of them left navigation at 1:1 contrast.
 *
 * Rather than stack another blind override, only typography is unified here.
 * The correct fix is to map Blocksy's own header-row background variable in
 * ZSD_Blocksy, the same way the palette is mapped — that needs the variable
 * name read from a live Blocksy header, not guessed.
 */
.ct-header,.ct-header *,.ct-footer,.ct-footer *{font-family:var(--font-body)}
.ct-header .menu-item > a:focus-visible,.ct-header .ct-toggle:focus-visible{
  outline:3px solid var(--brand-secondary);outline-offset:2px}

/* ---------- eyebrow / chip ---------- */
.zsd-eyebrow{display:inline-block;background:var(--brand-secondary);color:var(--text-on-secondary);
  font-size:var(--step-n1);font-weight:800;letter-spacing:.06em;padding:.4em .9em;border-radius:var(--radius-sm)}

/* ---------- buttons ---------- */
.zsd-btn,.wp-block-button__link,.button,button.ct-button,.ct-button-primary,
.woocommerce a.button,.woocommerce button.button,.woocommerce .button.alt{
  background-color:var(--brand-primary);color:var(--text-on-accent);border:2px solid var(--brand-primary);
  border-radius:var(--radius-md);font-family:var(--font-heading);font-weight:700;
  padding:.7em 1.5em;transition:background-color .15s ease,border-color .15s ease}
.zsd-btn:hover,.wp-block-button__link:hover,.button:hover,.ct-button-primary:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button.alt:hover{
  background-color:var(--brand-secondary);border-color:var(--brand-secondary);color:var(--text-on-secondary)}
.zsd-btn--ghost{background:transparent;color:var(--brand-primary)}
.zsd-btn--ghost:hover{background:var(--brand-primary);color:var(--text-on-accent)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--brand-secondary);outline-offset:2px}

/* ---------- surfaces / cards ---------- */
.zsd-card{background:var(--surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-lg);
  padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-2xs)}
.zsd-card__title{font-size:var(--step-2);margin:0}
.zsd-card__meta{color:var(--text-muted);font-size:var(--step-n1)}
.zsd-panel--accent{background:var(--surface-accent);color:var(--text-on-accent)}
.zsd-panel--accent :where(h1,h2,h3,h4,p,li){color:var(--text-on-accent)}
.zsd-panel--anchor{background:var(--surface-anchor);color:var(--text-on-anchor)}
.zsd-panel--anchor :where(h1,h2,h3,h4,p,li){color:var(--text-on-anchor)}

/* ---------- grids ---------- */
.zsd-grid{display:grid;gap:var(--space-md)}
.zsd-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.zsd-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.zsd-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}

/* ---------- hero ---------- */
.zsd-hero{padding-block:var(--space-2xl)}
.zsd-hero__title{font-size:var(--step-6);margin:0 0 var(--space-sm)}
.zsd-hero__sub{font-size:var(--step-2);color:var(--text-muted);max-width:60ch}
.zsd-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-md)}

/* ---------- trust / proof ---------- */
.zsd-trust{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.zsd-trust__item{display:flex;align-items:baseline;gap:.6em;font-size:var(--step-0)}
.zsd-trust__num{font-weight:800;color:var(--brand-primary);font-variant-numeric:tabular-nums}
.zsd-proof__grid{display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.zsd-proof__item img{width:100%;height:auto;display:block;border:1px solid var(--border-color);border-radius:var(--radius-md)}
.zsd-proof__label{font-size:var(--step-n1);color:var(--text-muted);margin-top:var(--space-3xs)}

/* ---------- FAQ ---------- */
.zsd-faq details{border-bottom:1px solid var(--border-color);padding:var(--space-sm) 0}
.zsd-faq summary{cursor:pointer;font-family:var(--font-heading);font-weight:700;font-size:var(--step-1)}
.zsd-faq p{color:var(--text-muted);margin-top:var(--space-2xs)}

/* ---------- WooCommerce presentation ---------- */
.woocommerce ul.products{display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));margin:0;padding:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{background:var(--surface-raised);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:var(--space-sm);margin:0!important;width:auto!important;
  float:none!important;display:flex;flex-direction:column;gap:var(--space-3xs)}
.woocommerce ul.products li.product img{border-radius:var(--radius-md);margin-bottom:var(--space-2xs)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:var(--step-1)!important;font-family:var(--font-heading);color:var(--text-primary);padding:0!important}
.woocommerce ul.products li.product .price{color:var(--brand-primary);font-weight:800;font-size:var(--step-1)}
.woocommerce ul.products li.product .button{margin-top:auto;align-self:flex-start}

.woocommerce div.product .product_title{font-size:var(--step-5)}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--brand-primary);font-weight:800;font-size:var(--step-4)}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--text-muted);font-size:var(--step-1);max-width:62ch}
.woocommerce div.product form.cart{margin-top:var(--space-md);gap:var(--space-2xs);display:flex;flex-wrap:wrap;align-items:center}
.woocommerce .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--border-color)}
.woocommerce #reviews #comments h2,.woocommerce .related > h2,.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2{font-size:var(--step-3);margin-bottom:var(--space-sm)}

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--brand-primary);background:var(--surface-raised);border-radius:var(--radius-md)}
.woocommerce table.shop_table{border-color:var(--border-color);border-radius:var(--radius-md)}
.woocommerce-checkout #payment{background:var(--surface-raised);border-radius:var(--radius-lg)}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3xs)}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:.6em .8em;border-radius:var(--radius-md);color:var(--text-primary)}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{background:var(--surface-accent);color:var(--text-on-accent)}

/* ---------- responsive ---------- */
@media (max-width:781px){
  :where(.zsd-section){padding-block:var(--space-lg)}
  .zsd-hero{padding-block:var(--space-xl)}
  .woocommerce ul.products{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:var(--space-sm)}
  .zsd-hero__actions .zsd-btn{width:100%;text-align:center}
}
/* Wide content must scroll in its own box, never the page body. */
.zsd-scroll-x{overflow-x:auto}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}