/* ============================================================
   THE SHOP'S OWN CHROME

   Storefront's header is replaced rather than restyled — inc/chrome.php
   says why. Kept in its own file because it is a different concern from
   the palette and the product templates, and because style.css is
   already long enough to be hard to hold in one head.

   Loaded after style.css, so it inherits every token.
   ============================================================ */

.site-header { padding-top: 0; border-bottom: 0; }
.site-header .site-branding { display: none; }

.zodia-head {
  background: var(--z-paper);
  border-bottom: 1px solid var(--z-line);
}

.zodia-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--z-s2);
  padding: var(--z-s3) 0;
}

.zodia-head__side { display: flex; align-items: center; gap: 0.35rem; }
.zodia-head__side--right { justify-content: flex-end; }

.zodia-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--z-ink);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/*
   Measured on a 390px phone: these came out 36x36, under the 44px minimum —
   and these four are the whole navigation on a phone, the basket included.

   They cannot simply be made bigger. The header is three tracks and at 375px
   it already overflowed once, clipping the basket off the right edge, which is
   why they were shrunk in the first place.

   So the element is a real 44x44 and gives the width back with a negative
   margin: the box a thumb hits is 44, the space it occupies in the header is
   the 40 it always was. An earlier attempt added the padding as an absolutely
   positioned ::after instead, which looked right and was not — probing the
   rendered page with elementFromPoint showed the generated box was not
   hit-testable, so the enlarged target existed only on paper.

   The gold hairline on the basket badge and the hover disc both follow the
   element, so they grow with it — hence the explicit radius below.
*/
.zodia-icon {
  width: 44px;
  height: 44px;
  margin: -2px;
}

.zodia-icon:hover { background: var(--z-plum-veil); color: var(--z-plum); }

.zodia-icon__count {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--z-plum);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
}

/* The menu button exists only below the nav breakpoint. */
.zodia-icon--menu { display: none; }

/* ---------- the wordmark ---------- */

.zodia-head__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--z-ink);
  padding: 0 var(--z-s2);
}

.zodia-head__mark:hover { color: var(--z-plum); }

.zodia-mark { color: var(--z-gold-ink); display: block; }

.zodia-head__name {
  font-family: var(--z-display);
  /* Uppercase and widely tracked, so it needs far less weight than it looks:
     Playfair at 700 turns the wordmark into a slab, at 500 it reads as a
     name rather than a shout. */
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  /* The tracking adds space after the last letter; this pulls the
     wordmark back to optical centre. */
  text-indent: 0.2em;
  white-space: nowrap;
}

.zodia-head__tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--z-muted);
  text-align: center;
  line-height: 1.3;
}

/* ---------- the category line ---------- */

.zodia-nav { border-top: 1px solid var(--z-line); }

.zodia-nav__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--z-s4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.zodia-nav__list li { position: relative; margin: 0; }

.zodia-nav__list > li > a {
  display: block;
  padding: 1em 0;
  color: var(--z-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s ease;
}

.zodia-nav__list > li > a:hover { color: var(--z-plum); }

.zodia-nav__list > li.current-menu-item > a,
.zodia-nav__list > li.current-menu-ancestor > a { color: var(--z-gold-ink); }

.zodia-nav__list ul {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  min-width: 210px;
  margin: 0;
  padding: 0.5em 0;
  list-style: none;
  background: var(--z-paper-2);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
}

.zodia-nav__list li:hover > ul,
.zodia-nav__list li:focus-within > ul { opacity: 1; visibility: visible; }

.zodia-nav__list ul a {
  display: block;
  padding: 0.55em 1.3em;
  color: var(--z-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.zodia-nav__list ul a:hover { color: var(--z-plum); background: var(--z-plum-veil); }

/* ---------- search drawer ---------- */

.zodia-search {
  border-top: 1px solid var(--z-line);
  background: var(--z-paper-3);
  padding: var(--z-s3) 0;
}

.zodia-search form {
  display: flex;
  gap: 0.5rem;
  max-width: 560px;
  margin: 0 auto;
}

.zodia-search input[type='search'] { flex: 1; }
.zodia-search button { white-space: nowrap; }

/* ---------- mobile drawer ---------- */

.zodia-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(36, 26, 46, 0.45);
}

.zodia-drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(84vw, 340px);
  background: var(--z-paper);
  padding: var(--z-s4) var(--z-s3);
  overflow-y: auto;
  box-shadow: var(--z-shadow-lift);
}

.zodia-drawer__close {
  position: absolute;
  top: var(--z-s2);
  right: var(--z-s2);
  /* 44, not 40: this one only ever appears on a phone, so it is the one
     control here that is always operated by a thumb. */
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--z-ink);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.zodia-drawer__list { list-style: none; margin: var(--z-s3) 0 0; padding: 0; }
.zodia-drawer__list li { margin: 0; }

.zodia-drawer__list a {
  display: block;
  padding: 0.85em 0;
  border-bottom: 1px solid var(--z-line);
  color: var(--z-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.zodia-drawer__list ul { list-style: none; margin: 0 0 0 var(--z-s2); padding: 0; }

.zodia-drawer__list ul a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--z-body);
}

html.zodia-locked,
html.zodia-locked body { overflow: hidden; }

/* ---------- the hero stack ---------- */

.zodia-hero--split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: var(--z-s6);
  text-align: left;
  padding: var(--z-s6) 0 var(--z-s5);
}

.zodia-hero--split .zodia-hero__title,
.zodia-hero--split .zodia-hero__lede { margin-left: 0; margin-right: 0; }
.zodia-hero--split .zodia-hero__title { max-width: 14ch; }
.zodia-hero--split .zodia-rule { margin-left: 0; }

.zodia-stack {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
}

.zodia-stack__item {
  position: absolute;
  display: block;
  border-radius: var(--z-radius);
  overflow: hidden;
  box-shadow: var(--z-shadow-lift);
  transition: transform 0.25s ease;
}

.zodia-stack__item img { display: block; width: 100%; height: auto; }

/* Overlapped the way prints lie on a table, the middle one in front. */
.zodia-stack__item--1 { width: 46%; left: 0;   top: 12%; transform: rotate(-5deg);  z-index: 1; }
.zodia-stack__item--2 { width: 50%; left: 26%; top: 0;   transform: rotate(1.5deg); z-index: 3; }
.zodia-stack__item--3 { width: 44%; right: 0;  top: 18%; transform: rotate(6deg);   z-index: 2; }

.zodia-stack__item--1:hover { transform: rotate(-5deg) translateY(-6px); }
.zodia-stack__item--2:hover { transform: rotate(1.5deg) translateY(-6px); }
.zodia-stack__item--3:hover { transform: rotate(6deg) translateY(-6px); }

/* ---------- breakpoints ---------- */

@media screen and (max-width: 900px) {
  .zodia-nav { display: none; }
  .zodia-icon--menu { display: inline-flex; }

  .zodia-hero--split {
    grid-template-columns: 1fr;
    gap: var(--z-s4);
    text-align: center;
    padding: var(--z-s4) 0 var(--z-s3);
  }

  .zodia-hero--split .zodia-hero__title,
  .zodia-hero--split .zodia-hero__lede { margin-left: auto; margin-right: auto; }
  .zodia-hero--split .zodia-rule { margin-left: auto; }
  .zodia-stack { order: -1; max-width: 460px; margin: 0 auto; }
}

@media screen and (max-width: 560px) {
  .zodia-head__inner { padding: var(--z-s2) 0; }
  .zodia-head__tag { display: none; }
  .zodia-head__name { font-size: 1.1rem; letter-spacing: 0.16em; }
  /* Still a real 44x44 target; the negative margin gives back the extra 8px
     so the three header tracks fit a 375px screen, which is what the 36 was
     for. */
  .zodia-icon { width: 44px; height: 44px; margin: -4px; }
}

/*
   On a 375px phone the header columns measured 78 + 181 + 78 with two 16px
   gaps — 368px of tracks in a 330px container. The overflow all landed on the
   right, so the basket icon was clipped by the edge of the screen: the one
   control that has to be reachable.

   The middle track was `auto`, sized to the wordmark and unable to shrink. It
   flexes now, and the wordmark is tightened enough to fit what is left. The
   sides stay `auto` and are the same width as each other, so the wordmark
   still reads as centred.
*/
@media screen and (max-width: 420px) {
  .zodia-head__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
  }
  .zodia-head__name {
    font-size: 1rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
}
/* ============================================================
   Two layout faults found by measuring, not by looking.
   ============================================================ */

/*
   Storefront's `.col-full` carries a clearfix: `::before` and `::after` with
   `content: ""`. Harmless on a block element — but the header inner is a grid,
   and in a grid container a pseudo-element becomes a grid item. Five items in
   three columns pushed the wordmark out of the middle track and off the right
   of the header.

   The class is on the same element on purpose (it supplies the page gutter),
   so the pseudo-elements are removed rather than the class.
*/
.zodia-head__inner::before,
.zodia-head__inner::after { display: none; }

/*
   The full-bleed band on the front page uses `calc(50% - 50vw)`, and 100vw
   includes the scrollbar while the element's 50% does not — so it hangs 8px
   past the right edge and adds a horizontal scrollbar. Clipping at the page
   wrapper is the fix that does not depend on scrollbar width, which varies by
   platform.
*/
.site { overflow-x: clip; }
/* ============================================================
   THE PRODUCT GRID

   Storefront lays products out with floats and percentage widths, so
   every card is as tall as its own content. Measured on the front
   page: 371, 428, 393, 393 — a ragged bottom edge, which is one of
   the things that separates a shop that looks made from a shop that
   looks assembled.

   CSS grid gives equal rows for free, and the price can then sit on
   the baseline of every card instead of wherever the title ended.
   ============================================================ */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(var(--z-cols, 4), minmax(0, 1fr));
  gap: var(--z-s3);
  margin: 0 0 var(--z-s4);
  padding: 0;
  list-style: none;
}

/* Storefront's own float rules, undone. Their `clear` on every nth
   child fights the grid and leaves holes. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  height: 100%;
}

/* Storefront sets the column count by adding classes; the grid reads
   it from a variable instead so one rule covers every context. */
.columns-1 ul.products { --z-cols: 1; }
.columns-2 ul.products { --z-cols: 2; }
.columns-3 ul.products { --z-cols: 3; }
.columns-5 ul.products { --z-cols: 5; }
.columns-6 ul.products { --z-cols: 6; }

ul.products.columns-1 { --z-cols: 1; }
ul.products.columns-2 { --z-cols: 2; }
ul.products.columns-3 { --z-cols: 3; }
ul.products.columns-5 { --z-cols: 5; }
ul.products.columns-6 { --z-cols: 6; }

/* Related products sit three up, which reads better than four in a
   narrower column. */
.related.products ul.products,
.up-sells ul.products { --z-cols: 3; }

@media screen and (max-width: 991px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { --z-cols: 3; gap: var(--z-s2); }
  .related.products ul.products, .up-sells ul.products { --z-cols: 3; }
}

@media screen and (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .related.products ul.products,
  .up-sells ul.products { --z-cols: 2; }
}

@media screen and (max-width: 420px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .related.products ul.products,
  .up-sells ul.products { --z-cols: 1; }
}

/* ---------- the current item, on the front page ----------

   The «По зодия» entry points at the shop page, and the shop page is
   the WooCommerce home, so WordPress marks it current on the front
   page too and it lit up gold for no reason. */
.home .zodia-nav__list > li.current-menu-item > a,
.home .zodia-nav__list > li.current-menu-ancestor > a,
.home .zodia-nav__list > li.current_page_parent > a { color: var(--z-body); }

.home .zodia-nav__list > li > a:hover { color: var(--z-plum); }

/* The «enter a coupon code» toggle sits inside .woocommerce-info and
   inherits that block's own colour, which on paper came out the same
   as its background — a link at 1.0:1, i.e. invisible. */
.woocommerce-info a.showcoupon,
.woocommerce-form-coupon-toggle a.showcoupon,
.woocommerce-info a { color: var(--z-plum); }

.woocommerce-info a.showcoupon:hover { color: var(--z-gold-ink); }

/*
   Search results share the hero's shape but not its scale: the headline is a
   query, not a slogan, and the grid under it is what the customer came for.
*/
.zodia-hero--search { padding-block: var(--z-s5) var(--z-s3); }
.zodia-hero--search .zodia-hero__title { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.zodia-hero--search .zodia-hero__lede { margin-bottom: var(--z-s3); }
.zodia-hero--search .woocommerce-product-search {
  display: flex;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto;
}
.zodia-hero--search .woocommerce-product-search input[type="search"] { flex: 1 1 auto; }

/* ---------- WooCommerce notices ----------

   These live here rather than in style.css because Storefront's
   woocommerce.css is enqueued AFTER the child stylesheet, so at equal
   specificity it wins — style.css was styling these and being silently
   overridden. chrome.css is the last sheet on the page.

   What was on screen: Storefront's own blue panel with white text, which
   measures 2.9:1 and fails WCAG AA, and which is the only bright blue
   anywhere in a shop built on cream and plum. Found by axe on the empty
   cart, the one page most likely to be a customer's first sight of a notice.
*/
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.cart-empty,
p.no-comments {
  background-color: var(--z-paper-2);
  color: var(--z-body);
  border-top: 3px solid var(--z-gold-ink);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow);
  /* Storefront reserves the left inset for a Font Awesome glyph. That font is
     no longer loaded, so the space held nothing. */
  padding-left: var(--z-s3);
}

.woocommerce-error { border-top-color: var(--z-error); }

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before { content: none; }

/* Storefront paints every link and button inside a notice white, which was
   legible on its blue and is invisible on paper. */
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a { color: var(--z-plum); }

.woocommerce-info a:hover,
.woocommerce-message a:hover,
.woocommerce-error a:hover { color: var(--z-gold-ink); opacity: 1; }

.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button { color: var(--z-paper); }

.woocommerce-info .button:hover,
.woocommerce-message .button:hover,
.woocommerce-error .button:hover { color: var(--z-paper); opacity: 1; }

/* ---------- the files panel on the thank-you page ----------

   For a shop where 60 of 65 products are files, this is the most important
   block on the most important page, and it has to look like it.
*/
.zodia-files {
  margin: 0 0 var(--z-s5);
  padding: var(--z-s4);
  background: var(--z-paper-2);
  border: 1px solid var(--z-gold-line);
  border-top: 3px solid var(--z-gold-ink);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow);
}

.zodia-files__title {
  margin: 0 0 var(--z-s2);
  font-family: var(--z-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--z-plum-deep);
}

.zodia-files__lede { margin: 0 0 var(--z-s3); color: var(--z-body); }

.zodia-files__list { list-style: none; margin: 0; padding: 0; }

.zodia-files__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-s3);
  padding: var(--z-s2) 0;
  border-top: 1px solid var(--z-line);
}

.zodia-files__name { font-weight: 600; }
.zodia-files__button { white-space: nowrap; }

.zodia-files__note {
  margin: var(--z-s3) 0 0;
  font-size: 0.85rem;
  color: var(--z-muted);
}

@media screen and (max-width: 560px) {
  .zodia-files__item { flex-direction: column; align-items: stretch; }
  .zodia-files__button { text-align: center; }
}

/*
   The shop hero was pushing every product below the fold.

   Measured on a 1440x768 window: the hero ended at 742px, the sorting bar sat
   at 894 and the first product card at 985 — so someone landing on /magazin/
   saw a headline and had to scroll before a single thing they could buy came
   into view. On the front page that is a deliberate opening; on the page whose
   whole job is the grid it is 250px of nothing.

   The hero keeps its shape and loses the padding it did not need.
*/
.woocommerce-shop .zodia-hero {
  padding-top: var(--z-s3);
  padding-bottom: var(--z-s2);
  margin-bottom: var(--z-s3);
}

.woocommerce-shop .zodia-hero .zodia-rule { margin-top: var(--z-s3); }

/* The result count and the sort control sit closer to what they describe. */
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering { margin-bottom: var(--z-s2); }

/* The shop hero's eyebrow reads "ZODIA STORE" directly beneath a wordmark
   that says ZODIA STORE. On the front page it frames the headline; here it is
   30px spent saying the same thing twice, above a grid that needs the room. */
.woocommerce-shop .zodia-hero__eyebrow { display: none; }
.woocommerce-shop .zodia-hero__lede { max-width: 54ch; }

/*
   WooCommerce's archive header is a <header> holding the page title and the
   archive description. The theme replaces the shop's title with its own hero,
   so on /magazin/ that element renders empty — and still 96px tall, sitting
   between the hero and the sorting bar. It is why the grid started 985px down
   the page.

   The same is true of every category and tag archive: the theme prints its own
   .zodia-taxhead with the heading and the copy above the grid, and leaves this
   one empty.

   :has() rather than a blanket rule for the shop, so it only collapses when it
   really holds nothing. On page two the theme skips its own header and this is
   where the heading lives — a blanket rule left that page with no visible
   title at all.
*/
.woocommerce-products-header:not(:has(h1, h2, p, div)) { display: none; }