/*
Theme Name: ZODIA STORE
Theme URI: https://zodia.store
Description: ZODIA STORE's storefront. Warm paper, plum ink, one gold hairline. Built to sit under artwork rather than compete with it.
Author: ZODIA STORE
Template: storefront
Version: 6.9.0
Text Domain: zodia
*/

/* ============================================================
   WHY THIS IS LIGHT

   v3 and v4 were a night sky: the obvious choice for an astrology
   shop, and the wrong one. The covers are cream — printable PDFs
   photographed on pale paper — so on a near-black page they read as
   holes punched in the layout rather than as products.

   The premium stores in this trade are all warm paper. Measured, not
   assumed: desenio.co.uk serves `rgb(253, 251, 249)` with a
   high-contrast serif for headings at 32px and a geometric sans for
   text. Papier and Juniqe use the same recipe. ZODIA's own brand
   tokens on Shopify were cream, plum and gold to begin with — this
   returns to them and sharpens them.

   The dark version is kept in git history if it is ever wanted back.

     1. Tokens
     2. Page and type
     3. Announcement, header, navigation
     4. Hero and front page
     5. Product cards and the grid
     6. Single product
     7. Buttons and forms
     8. Personalisation
     9. Cart, checkout, notices
    10. Footer
    11. Mobile
   ============================================================ */

/* ---------------------------------------------- 1. TOKENS --- */

/*
   Contrast, computed against the surface each colour sits on:

     --z-ink    #241a2e on --z-paper #faf7f2   14.8:1
     --z-body   #3d3348 on --z-paper           10.5:1
     --z-muted  #63586f on --z-paper            5.9:1
     --z-plum   #4e2358 on --z-paper            9.7:1
     --z-gold-ink #8a6226 on --z-paper          5.0:1
     #ffffff on --z-plum                        9.7:1

   All clear WCAG AA; the first two clear AAA. Decorative gold
   (--z-gold) is for hairlines and never carries text — that is what
   --z-gold-ink is for, and it is the darker of the two on purpose.
*/

:root {
  --z-paper: #faf7f2;
  --z-paper-2: #ffffff;
  --z-paper-3: #f3ece2;
  --z-paper-4: #ebe2d5;

  --z-ink: #241a2e;
  --z-body: #3d3348;
  --z-muted: #63586f;

  --z-plum: #4e2358;
  --z-plum-deep: #2e1236;
  --z-plum-veil: rgba(78, 35, 88, 0.06);

  --z-gold: #c9a961;
  --z-gold-ink: #8a6226;
  --z-gold-veil: rgba(201, 169, 97, 0.14);
  --z-gold-line: rgba(138, 98, 38, 0.28);

  --z-line: rgba(36, 26, 46, 0.1);
  --z-line-strong: rgba(36, 26, 46, 0.2);

  --z-error: #a8203a;

  /* Playfair Display, not Cormorant Garamond. Cormorant is a display Garamond
     drawn for very large sizes, and its Cyrillic is the weak half of the
     family: at the 28-32px this shop actually sets headings, Bulgarian came out
     spindly, and it mixes cursive localised forms — т as m, и as u, л as a bare
     lambda — into an upright face, so a Bulgarian heading read as half-broken
     rather than elegant. Playfair carries the same high-contrast, expensive
     feel with Cyrillic that was actually drawn to be set at these sizes.
     Compared side by side in Bulgarian before switching; scripts/font-specimen.js
     renders that comparison again if it is ever worth revisiting. */
  --z-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --z-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --z-caps: 0.16em;

  --z-radius: 6px;
  --z-radius-lg: 10px;
  /* Shadows on paper are a whisper, not a drop. */
  --z-shadow: 0 1px 2px rgba(36, 26, 46, 0.05), 0 6px 20px rgba(36, 26, 46, 0.06);
  --z-shadow-lift: 0 2px 4px rgba(36, 26, 46, 0.07), 0 14px 40px rgba(36, 26, 46, 0.1);

  --z-s1: 0.5rem;
  --z-s2: 1rem;
  --z-s3: 1.5rem;
  --z-s4: 2.25rem;
  --z-s5: 3.5rem;
  --z-s6: 5rem;
}

/* -------------------------------------- 2. PAGE AND TYPE --- */

body,
body.woocommerce,
.site {
  background: var(--z-paper);
  color: var(--z-body);
  font-family: var(--z-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Manrope ships Bulgarian localised Cyrillic and, because the document is
     lang="bg", browsers were using it: лаптоп set as лаnmоn, теб as meб,
     дизайн as gизайн. Correct Bulgarian typography, and wrong for this shop.
     Playfair has no Bulgarian forms, so headings and body disagreed on the
     same page; the catalogue is full of Latin — PDF, ZIP, Astro Planner —
     against which the alternate shapes read as a rendering fault rather than
     as craft; and zodia.store itself has always set standard forms, so this
     would have been a visible change nobody asked for.

     Turned off here rather than by weakening lang="bg", which screen readers
     and Google both rely on. Note that font-feature-settings replaces rather
     than merges, so every rule below that sets it repeats 'locl' 0. */
  font-feature-settings: 'locl' 0;
}

h1, h2, h3, h4,
.page-title,
.product_title,
.entry-title,
.woocommerce-loop-product__title {
  font-family: var(--z-display);
  /* 500, where Cormorant needed 600. Playfair is drawn heavier at the same
     number, and its high contrast does the work that weight was compensating
     for — at 600 the Cyrillic headings go from confident to chunky. */
  font-weight: 500;
  color: var(--z-ink);
  line-height: 1.16;
  letter-spacing: 0;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: 'lnum' 1, 'pnum' 1, 'locl' 0;
}

/* Restrained on purpose. The references top out around 32px for a
   page title; a 48px heading on a shop page shouts over the product
   it is meant to introduce. */
h1, .page-title {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  margin-bottom: var(--z-s3);
}

h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }

p { margin-bottom: var(--z-s2); }

a {
  color: var(--z-plum);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover, a:focus { color: var(--z-gold-ink); }

:focus-visible {
  outline: 2px solid var(--z-plum);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--z-gold-veil); color: var(--z-ink); }

.price, .amount, .woocommerce-Price-amount,
td.product-total, .cart-subtotal, .order-total,
.quantity .qty, .woocommerce-result-count {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1, 'locl' 0;
}

/* ------------------ 3. ANNOUNCEMENT, HEADER, NAVIGATION --- */

/* A dark strip at the very top, the way every one of the references
   does it: it frames the page and gives the wordmark somewhere to
   start from. */
.zodia-announce {
  background: var(--z-plum-deep);
  color: #f0e7dd;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.8em 1em;
}

.zodia-announce .col-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85em;
  flex-wrap: wrap;
}

.zodia-announce__dot { color: var(--z-gold); }

.site-header {
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-line);
  padding-top: var(--z-s3);
  padding-bottom: 0;
}

.site-title { margin: 0; line-height: 1; }

.site-title a {
  display: inline-block;
  font-family: var(--z-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: var(--z-caps);
  text-transform: uppercase;
  color: var(--z-ink);
  text-decoration: none;
}

.site-title a:hover { color: var(--z-plum); }

.site-header .site-branding .site-description,
.site-header .beta.site-description {
  display: block;
  margin: 0.45rem 0 0;
  font-family: var(--z-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--z-muted);
}

.storefront-primary-navigation {
  border-top: 1px solid var(--z-line);
  margin-top: var(--z-s3);
}

.main-navigation ul.menu > li,
.main-navigation ul.nav-menu > li {
  padding: 0.85em 0;
  margin-right: 1.6em;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.main-navigation ul.menu li.current-menu-item > a,
.main-navigation ul.menu li.current_page_item > a,
.main-navigation ul.menu li.current-menu-ancestor > a,
.main-navigation ul.menu li.menu-item-has-children > a,
.main-navigation ul.nav-menu li.current-menu-item > a,
.secondary-navigation ul.menu a {
  color: var(--z-body);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s ease;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover { color: var(--z-plum); }

.main-navigation ul.menu li.current-menu-item > a,
.main-navigation ul.menu li.current-menu-ancestor > a,
.main-navigation ul.nav-menu li.current-menu-item > a { color: var(--z-gold-ink); }

.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow);
  padding: 0.4em 0;
}

.main-navigation ul.menu ul li,
.main-navigation ul.nav-menu ul li { margin: 0; padding: 0; }

.main-navigation ul.menu ul a,
.main-navigation ul.nav-menu ul a {
  padding: 0.6em 1.2em;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.site-header-cart .cart-contents,
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count {
  color: var(--z-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.site-header-cart .widget_shopping_cart {
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow);
}

.site-search .widget_product_search form input[type='search'] { background: var(--z-paper-2); }

.storefront-breadcrumb {
  background: transparent;
  padding: var(--z-s3) 0 0;
  color: var(--z-muted);
  font-size: 0.8rem;
}

.storefront-breadcrumb a { color: var(--z-muted); }
.storefront-breadcrumb a:hover { color: var(--z-plum); }

/* ------------------------------ 4. HERO AND FRONT PAGE --- */

.zodia-hero {
  margin: 0 0 var(--z-s5);
  padding: var(--z-s5) var(--z-s3) var(--z-s4);
  text-align: center;
}

.zodia-front .zodia-hero { margin-bottom: var(--z-s4); }

.zodia-hero__eyebrow {
  margin: 0 0 var(--z-s2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--z-caps);
  text-transform: uppercase;
  color: var(--z-gold-ink);
}

.zodia-hero__title {
  margin: 0 auto var(--z-s3);
  max-width: 16ch;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.1;
}

.zodia-hero__title em { font-style: italic; color: var(--z-plum); }

.zodia-hero__lede {
  margin: 0 auto;
  max-width: 50ch;
  font-size: 1.02rem;
  color: var(--z-body);
}

.zodia-hero__cta { margin: var(--z-s3) 0 0; }
.zodia-hero__cta .button { padding: 1.05em 2.4em; font-size: 0.8rem; }

.zodia-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: var(--z-s4) auto 0;
  max-width: 180px;
}

.zodia-rule::before,
.zodia-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-gold-line), transparent);
}

.zodia-rule span {
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--z-gold-ink);
}

/* ---------- category tiles ---------- */

.zodia-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--z-s2);
  margin-bottom: var(--z-s6);
}

.zodia-tile {
  display: flex;
  flex-direction: column;
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.zodia-tile:hover {
  border-color: var(--z-gold-line);
  transform: translateY(-2px);
  box-shadow: var(--z-shadow-lift);
}

.zodia-tile__img {
  display: block;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center 22%;
  background-color: var(--z-paper-3);
}

.zodia-tile__body {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: var(--z-s2) var(--z-s2) var(--z-s3);
}

.zodia-tile__name {
  font-family: var(--z-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--z-ink);
}

.zodia-tile__line { font-size: 0.86rem; color: var(--z-muted); line-height: 1.5; }

.zodia-tile__count {
  margin-top: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--z-gold-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- front-page rows ---------- */

.zodia-row { margin-bottom: var(--z-s6); }

.zodia-row--alt {
  background: var(--z-paper-3);
  border-top: 1px solid var(--z-line);
  border-bottom: 1px solid var(--z-line);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--z-s5) max(var(--z-s3), calc(50vw - 600px)) var(--z-s4);
}

.zodia-row__title { text-align: center; margin-bottom: var(--z-s2); }

.zodia-row__sub {
  max-width: 56ch;
  margin: 0 auto var(--z-s4);
  text-align: center;
  color: var(--z-muted);
}

.zodia-row__more { margin: var(--z-s3) 0 0; text-align: center; }

.zodia-row__more a {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--z-plum);
}

.zodia-why {
  border-top: 1px solid var(--z-line);
  padding-top: var(--z-s5);
  margin-bottom: var(--z-s5);
}

.zodia-why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--z-s4);
}

.zodia-why h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--z-gold-line);
}

.zodia-why p { margin: 0; font-size: 0.9rem; color: var(--z-muted); line-height: 1.65; }

/* -------------------------- 5. PRODUCT CARDS AND THE GRID --- */

/*
   The covers came from three sources and are not one shape. Every card
   image gets the same 4:5 frame with the artwork contained, so nothing
   is cropped and the grid reads as one collection. On paper the frame
   needs no fill of its own — white on off-white is enough separation.
*/

ul.products li.product {
  display: flex;
  flex-direction: column;
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-lg);
  padding: 0.8rem 0.8rem 1.15rem;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

ul.products li.product:hover {
  border-color: var(--z-gold-line);
  transform: translateY(-2px);
  box-shadow: var(--z-shadow-lift);
}

ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex; flex-direction: column; flex: 1; text-decoration: none;
}

ul.products li.product a img {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--z-paper-3);
  border-radius: calc(var(--z-radius-lg) - 4px);
  margin-bottom: var(--z-s2);
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem;
  line-height: 1.32;
  color: var(--z-ink);
  padding-top: 0 !important;
  margin-bottom: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

ul.products li.product .price {
  display: block;
  margin-top: auto;
  padding-top: 0.35rem;
  font-family: var(--z-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--z-ink);
}

ul.products li.product .price del { color: var(--z-muted); font-weight: 400; margin-right: 0.4em; opacity: 1; }
ul.products li.product .price ins { text-decoration: none; color: var(--z-error); }

ul.products li.product .button { margin-top: var(--z-s2); width: 100%; text-align: center; }

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--z-plum);
  color: #fff;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: auto; min-width: auto;
  padding: 0.4em 0.95em;
  line-height: 1.4;
}

.zodia-instant {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--z-gold-veil);
  color: var(--z-gold-ink);
  border: 1px solid var(--z-gold-line);
  border-radius: 999px;
  padding: 0.3em 0.8em;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.55em;
  align-self: flex-start;
}

.storefront-sorting, .woocommerce-pagination { color: var(--z-body); }
.woocommerce-result-count, .woocommerce-ordering select { font-size: 0.84rem; }

.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 0.35rem; display: inline-flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  color: var(--z-body);
  padding: 0.5em 0.9em;
  font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--z-plum); border-color: var(--z-plum); color: #fff;
}

.zodia-taxhead {
  padding: var(--z-s4) 0 var(--z-s3);
  border-bottom: 1px solid var(--z-line);
  margin-bottom: var(--z-s4);
}

.zodia-taxhead__title { margin: 0 0 var(--z-s2); }
.zodia-taxhead__text { max-width: 62ch; color: var(--z-body); margin: 0; }

/* ------------------------------------- 6. SINGLE PRODUCT --- */

.single-product div.product .product_title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: var(--z-s2);
}

.single-product div.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--z-ink);
  font-family: var(--z-sans);
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: var(--z-s3);
}

.woocommerce div.product p.price del { color: var(--z-muted); font-size: 1.05rem; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--z-error); }

.woocommerce-product-gallery__image img {
  border-radius: var(--z-radius-lg);
  background: var(--z-paper-2);
}

/* Storefront's zoom control ships at 2em — 32x32 — which is under the 44px a
   thumb needs, and on a shop selling artwork "look closer" is a button people
   actually want. Given a real surface too, because as a bare emoji on a pale
   photograph it was easy to miss entirely.

   Written at Storefront's own specificity on purpose: the plain class selector
   loses to
   `.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger`,
   so the first attempt shipped, appeared in the served CSS, and changed
   nothing. */
body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--z-paper-2);
  border-radius: 999px;
  box-shadow: var(--z-shadow);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}

@media screen and (min-width: 992px) {
  .single-product div.product .woocommerce-product-gallery { position: sticky; top: var(--z-s3); }
}

.woocommerce div.product form.cart { margin-bottom: var(--z-s4); }
.woocommerce div.product form.cart .variations { margin-bottom: var(--z-s2); border: 0; }

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  border: 0; padding: 0 0 0.5em; display: block; text-align: left;
}

.woocommerce div.product form.cart .variations label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--z-muted);
}

.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--z-s2); }

.woocommerce div.product form.cart .reset_variations {
  display: inline-block; margin-bottom: var(--z-s2);
  font-size: 0.8rem; color: var(--z-muted);
}

.zodia-delivery-note {
  background: var(--z-paper-3);
  border: 1px solid var(--z-line);
  border-left: 2px solid var(--z-gold-ink);
  border-radius: var(--z-radius);
  padding: 1.1em 1.3em;
  margin: var(--z-s3) 0;
  font-size: 0.93rem;
}

.zodia-delivery-note p:last-child { margin-bottom: 0; }

.zodia-assure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: var(--z-s3) 0;
  padding: var(--z-s3) 0 0;
  border-top: 1px solid var(--z-line);
  list-style: none;
}

.zodia-assure li {
  margin: 0; padding-left: 1.4em; position: relative;
  font-size: 0.87rem; color: var(--z-body); line-height: 1.5;
}

.zodia-assure li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--z-gold-ink);
}

.woocommerce div.product .woocommerce-tabs { margin-top: var(--z-s5); }

.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs .panel {
  float: none; width: 100%; margin-left: 0; margin-right: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0; margin: 0 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--z-line); }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--z-paper-3);
  border: 1px solid var(--z-line);
  border-bottom: 0;
  border-radius: var(--z-radius) var(--z-radius) 0 0;
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--z-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--z-paper-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--z-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li:only-child { display: none; }

.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: 0 var(--z-radius-lg) var(--z-radius-lg) var(--z-radius-lg);
  padding: var(--z-s4);
  margin-top: 0;
}

.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.4rem; }
.woocommerce div.product .woocommerce-tabs .panel h2:first-of-type { margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol { margin-left: 1.2em; }

.related.products, .up-sells { margin-top: var(--z-s6); }
.related.products > h2, .up-sells > h2 { text-align: center; margin-bottom: var(--z-s4); }

/* --------------------------------------- 7. BUTTONS/FORMS --- */

button,
input[type='button'], input[type='reset'], input[type='submit'],
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--z-plum);
  color: #fff;
  border: 0;
  border-radius: var(--z-radius);
  padding: 0.9em 1.7em;
  font-family: var(--z-sans);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.08s ease;
}

button:hover, .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--z-plum-deep);
  color: #fff;
  box-shadow: 0 6px 18px rgba(46, 18, 54, 0.22);
}

/*
   A pressed state. There was none, and on a phone — where hover does not exist
   — that meant tapping "add to basket" gave no feedback at all until the page
   moved. On a slow connection that is the gap in which people tap twice.

   Deliberately small: 1px down and the lift removed, so the button reads as
   taking the press rather than as animating.
*/
button:active, .button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
  transform: translateY(1px);
  box-shadow: none;
}

button:disabled:active,
.woocommerce button.button:disabled:active,
.woocommerce button.button.disabled:active {
  transform: none;
}

/* Someone who has asked for less motion gets the colour change and not the
   movement. */
@media (prefers-reduced-motion: reduce) {
  button, .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button {
    transition: background 0.16s ease;
  }
  button:active, .button:active,
  .woocommerce a.button:active,
  .woocommerce button.button:active,
  .woocommerce input.button:active {
    transform: none;
  }
}

/* Secondary: outlined, for anything that is not the main action. */
.woocommerce ul.products li.product .button,
.zodia-row__more .button {
  background: transparent;
  color: var(--z-plum);
  border: 1px solid var(--z-line-strong);
}

.woocommerce ul.products li.product .button:hover {
  background: var(--z-plum);
  color: #fff;
  border-color: var(--z-plum);
  box-shadow: none;
}

/* Add-to-cart on a product page is the one button that must be found
   without looking. Solid plum, full width, larger. */
.woocommerce div.product form.cart .button.single_add_to_cart_button:not(.disabled),
.woocommerce button.button.alt:not(.disabled),
.woocommerce a.button.alt:not(.disabled),
.woocommerce input.button.alt:not(.disabled) {
  background: var(--z-plum);
  color: #fff;
  font-size: 0.82rem;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
  width: 100%;
  padding: 1.05em 1.7em;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .button.single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled {
  background: var(--z-paper-4);
  color: var(--z-muted);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

input[type='text'], input[type='email'], input[type='tel'],
input[type='url'], input[type='password'], input[type='search'],
input[type='number'], input[type='date'], input[type='file'],
textarea, select,
.select2-container .select2-selection--single {
  background: var(--z-paper-2);
  color: var(--z-ink);
  border: 1px solid var(--z-line-strong);
  border-radius: var(--z-radius);
  padding: 0.72em 0.9em;
  min-height: 46px;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder, textarea::placeholder { color: var(--z-muted); }

input:focus, textarea:focus, select:focus {
  border-color: var(--z-plum);
  box-shadow: 0 0 0 3px var(--z-plum-veil);
}

label { color: var(--z-body); }

.quantity .qty {
  background: var(--z-paper-2);
  color: var(--z-ink);
  border: 1px solid var(--z-line-strong);
}

/* ------------------------------------ 8. PERSONALISATION --- */

.zodia-personalization {
  margin: var(--z-s3) 0;
  padding: var(--z-s3);
  background: var(--z-paper-3);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-lg);
}

.zodia-personalization__title {
  margin: 0 0 0.3em;
  font-family: var(--z-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--z-ink);
}

.zodia-personalization__hint { margin: 0 0 var(--z-s2); font-size: 0.89rem; color: var(--z-muted); }

.zodia-personalization__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85em;
}

.zodia-personalization__field--full { grid-column: 1 / -1; }

.zodia-personalization label {
  display: block; margin-bottom: 0.4em;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--z-muted);
}

.zodia-personalization__req { color: var(--z-gold-ink); }
.zodia-personalization input,
.zodia-personalization select,
.zodia-personalization textarea { width: 100%; }
.zodia-personalization__help { margin: 0.4em 0 0; font-size: 0.82rem; color: var(--z-muted); }

.zodia-personalization [data-zp-invalid] {
  border-color: var(--z-error);
  box-shadow: 0 0 0 3px rgba(168, 32, 58, 0.12);
}

.zodia-personalization__error {
  margin: var(--z-s2) 0 0; font-size: 0.89rem; font-weight: 600; color: var(--z-error);
}

/* ---------------------- 9. CART, CHECKOUT, NOTICES --- */

.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce-checkout #order_review {
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-lg);
  color: var(--z-body);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.cart th,
.woocommerce table.cart td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  background-color: transparent !important;
  border-color: var(--z-line);
  color: var(--z-body);
}

.woocommerce table.shop_table thead th,
.woocommerce-checkout-review-order-table thead th {
  color: var(--z-ink);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.woocommerce table.shop_table tbody tr:not(:last-child) th,
.woocommerce table.shop_table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--z-line); }

.woocommerce table.shop_table tfoot th,
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading { color: var(--z-ink); }

.woocommerce table.shop_table td.product-name a { color: var(--z-ink); }
.woocommerce table.shop_table td.product-name a:hover { color: var(--z-plum); }

.woocommerce table.shop_table .product-remove a.remove { color: var(--z-muted) !important; background: transparent; }
.woocommerce table.shop_table .product-remove a.remove:hover { color: var(--z-error) !important; background: transparent; }

.woocommerce table.shop_table tr.order-total th,
.woocommerce table.shop_table tr.order-total td,
.woocommerce table.shop_table tr.order-total .amount {
  color: var(--z-ink); font-size: 1.05rem;
}

.woocommerce-checkout #payment {
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-lg);
}

.woocommerce-checkout #payment div.payment_box { background: var(--z-paper-3); color: var(--z-body); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--z-paper-3); }

.woocommerce-checkout #payment div.form-row.place-order,
.woocommerce-checkout .form-row.place-order {
  background: var(--z-paper-3);
  border-radius: var(--z-radius);
  padding: var(--z-s3);
}

.woocommerce-checkout .form-row.place-order .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .form-row.place-order .woocommerce-privacy-policy-text p { color: var(--z-body); }
.woocommerce-checkout .form-row.place-order a { color: var(--z-plum); }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-search--dropdown .select2-search__field {
  background: var(--z-paper-2);
  border-color: var(--z-line-strong);
  color: var(--z-ink);
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results__option { color: var(--z-ink); }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--z-plum); color: #fff;
}

.woocommerce-info, .woocommerce-message, .woocommerce-error,
.woocommerce-noreviews, p.no-comments {
  background: var(--z-paper-2);
  color: var(--z-body);
  border-top-color: var(--z-gold-ink);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow);
}

.woocommerce-info::before, .woocommerce-message::before { color: var(--z-gold-ink); }
.woocommerce-error { border-top-color: var(--z-error); }
.woocommerce-error::before { color: var(--z-error); }

/* --------------------------------------------- 10. FOOTER --- */

.site-footer {
  background: var(--z-plum-deep);
  border-top: 0;
  padding-top: var(--z-s5);
  color: #ddd3e0;
  font-size: 0.9rem;
}

.zodia-foot { max-width: 1200px; margin: 0 auto; }

.zodia-foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--z-s4);
  padding-bottom: var(--z-s4);
}

.site-footer .zodia-foot__mark {
  margin: 0 0 0.8rem;
  font-family: var(--z-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: var(--z-caps);
  text-transform: uppercase;
  color: #fbf7f2;
}

.site-footer .zodia-foot__blurb {
  margin: 0; max-width: 38ch;
  font-size: 0.87rem; color: #bcb0c6; line-height: 1.7;
}

.site-footer .zodia-foot__title {
  margin: 0 0 0.9rem;
  font-family: var(--z-sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: var(--z-caps); text-transform: uppercase;
  color: var(--z-gold);
}

.zodia-foot__list { list-style: none; margin: 0; padding: 0; }
.zodia-foot__list li { margin: 0 0 0.55rem; }

.site-footer .zodia-foot__list a,
.site-footer .zodia-foot__list a:not(.button) {
  color: #ddd3e0; font-size: 0.89rem; text-decoration: none;
}

.site-footer .zodia-foot__list a:hover,
.site-footer .zodia-foot__list a:not(.button):hover { color: var(--z-gold); }

.zodia-foot__base {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--z-s3); flex-wrap: wrap;
  border-top: 1px solid rgba(251, 247, 242, 0.12);
  padding: var(--z-s3) 0 var(--z-s4);
  color: #bcb0c6; font-size: 0.78rem;
}

.site-footer .zodia-foot__base p,
.site-footer .zodia-foot__note { margin: 0; color: #bcb0c6; }
.zodia-foot__note { max-width: 52ch; text-align: right; }

.woocommerce-tabs, .entry-content, .site-main, .content-area { background: transparent; }
hr { border-color: var(--z-line); }

.zodia-full-width .content-area { width: 100%; float: none; margin-right: 0; }
.zodia-full-width .widget-area { display: none; }

/* --------------------------------------------- 11. MOBILE --- */

.menu-toggle, button.menu-toggle,
.menu-toggle:hover, button.menu-toggle:hover {
  background: transparent;
  color: var(--z-ink);
  border: 1px solid var(--z-line-strong);
  border-radius: var(--z-radius);
  font-family: var(--z-sans);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: none;
}

.menu-toggle::before { color: var(--z-plum); }

.storefront-handheld-footer-bar {
  background: var(--z-paper-2);
  border-top: 1px solid var(--z-line);
  box-shadow: 0 -4px 18px rgba(36, 26, 46, 0.08);
}

.storefront-handheld-footer-bar ul li { border-color: var(--z-line); }
.storefront-handheld-footer-bar ul li > a { color: var(--z-body); }
.storefront-handheld-footer-bar ul li > a:hover,
.storefront-handheld-footer-bar ul li.cart > a:hover { color: var(--z-plum); }

.storefront-handheld-footer-bar ul li.cart .count {
  background: var(--z-plum); color: #fff;
  border-color: var(--z-paper-2);
  font-variant-numeric: lining-nums tabular-nums;
}

.storefront-handheld-footer-bar ul li.search .site-search {
  background: var(--z-paper-2);
  border-top: 1px solid var(--z-line);
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .main-navigation ul.menu > li,
  .main-navigation ul.nav-menu > li { margin-right: 1.05em; }
  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a { font-size: 0.68rem; letter-spacing: 0.05em; }
}

@media screen and (max-width: 991px) {
  .zodia-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zodia-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-s3); }
  .zodia-foot__grid { grid-template-columns: 1fr 1fr; gap: var(--z-s3); }
  .zodia-foot__col--brand { grid-column: 1 / -1; }
}

@media screen and (max-width: 767px) {
  .main-navigation ul.menu > li,
  .main-navigation ul.nav-menu > li {
    margin-right: 0; padding: 0;
    border-bottom: 1px solid var(--z-line);
  }

  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a {
    display: block; padding: 0.9em 0; font-size: 0.78rem;
  }

  .zodia-personalization__grid { grid-template-columns: 1fr; }
  .zodia-personalization__field--full { grid-column: auto; }
  .zodia-assure { grid-template-columns: 1fr; }

  .zodia-hero { padding: var(--z-s4) var(--z-s2) var(--z-s3); margin-bottom: var(--z-s4); }
  .zodia-hero__lede { font-size: 0.95rem; }

  .single-product div.product .price { font-size: 1.3rem; }
  .woocommerce div.product .woocommerce-tabs .panel { padding: var(--z-s3); }
}

@media screen and (max-width: 600px) {
  .zodia-tiles { grid-template-columns: 1fr; }
  .zodia-why__grid { grid-template-columns: 1fr; }
  .zodia-row--alt { padding-left: var(--z-s2); padding-right: var(--z-s2); }
  .zodia-foot__grid { grid-template-columns: 1fr; }
  .zodia-foot__base { flex-direction: column; }
  .zodia-foot__note { text-align: left; }
  .zodia-announce { font-size: 0.62rem; letter-spacing: 0.06em; }
}