/* ALJILD components — WEB-03
 *
 * The no-boxes layer. Zero radius, zero shadow, outline CTAs, text tabs.
 * Loaded after chrome.css so it wins on order at equal specificity.
 *
 * Principle: air does the work a border would do. Saddle tan appears as a
 * 1px border or an underline, never as a large filled area. Antique brass
 * never carries body text — it fails AA on parchment.
 */


/* ==========================================================================
   Nothing is boxed
   ========================================================================== */

.woocommerce,
.woocommerce-page,
.aljild-home,
.site-content {
  --radius: 0;
}

.woocommerce *,
.woocommerce-page *,
.aljild-home *,
#masthead *,
#colophon * {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The gallery lightbox is the one exception — it is chrome, not page. */
.pswp,
.pswp * {
  box-shadow: revert !important;
}


/* ==========================================================================
   CTA — outline, never filled
   ========================================================================== */

.aljild-cta,
.aljild-btn,
.wp-block-button__link,
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single-product .single_add_to_cart_button {
  background: transparent;
  color: var(--page-fg);
  border: 1px solid var(--accent);
  padding: 1rem 1.75rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--step--1);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease;
  /* Interactive targets clear 44px: 1rem padding + 1 line at --step--1. */
  min-height: 44px;
}

.aljild-cta:hover,
.aljild-btn:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button:hover,
.single-product .single_add_to_cart_button:hover,
.aljild-cta:focus-visible,
.aljild-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
  background: var(--accent);
  color: var(--accent-fg);
}

@media (prefers-reduced-motion: reduce) {
  .aljild-cta,
  .aljild-btn,
  .button,
  .woocommerce a.button,
  .woocommerce button.button { transition: none; }
}

/* The ghost variant is now the default, so the modifier only inverts. */
.aljild-btn--ghost {
  border-color: var(--page-fg);
}

.aljild-btn--ghost:hover,
.aljild-btn--ghost:focus-visible {
  background: var(--page-fg);
  color: var(--page-bg);
}


/* ==========================================================================
   Links — underline as the only decoration
   ========================================================================== */

.aljild-home a:not(.aljild-btn):not(.aljild-card__link),
.woocommerce-Tabs-panel a,
.entry-content a:not(.button) {
  color: var(--page-fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.aljild-textlink {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--page-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}

.aljild-textlink:hover,
.aljild-textlink:focus-visible {
  border-bottom-color: var(--page-fg);
}


/* ==========================================================================
   Type — sentence case above 14px
   ========================================================================== */

.aljild-home h1,
.aljild-home h2,
.woocommerce-products-header__title,
.woocommerce .page-title,
.single-product div.product .product_title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--leading-tight);
  color: var(--page-fg);
  text-wrap: balance;
}

/* Prose blocks are centred and narrow — the measure is the design. */
.aljild-prose {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-prose);
  max-width: var(--measure-prose);
  margin-inline: auto;
  text-align: center;
  color: var(--page-fg);
}

.aljild-meta {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
}


/* ==========================================================================
   Text tabs — navigation, not containers
   ========================================================================== */

.single-product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--space-8);
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: flex-start;
}

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

.single-product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

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

.single-product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  padding: 0 0 6px;
  border-bottom: 1px solid transparent;
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover,
.single-product .woocommerce-tabs ul.tabs li a:focus-visible {
  color: var(--page-fg);
  border-bottom-color: var(--accent);
  box-shadow: none;
}


/* ==========================================================================
   Form controls — hairline, no fills
   ========================================================================== */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .quantity input.qty {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--page-fg);
  min-height: 44px;
}

.woocommerce input:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce select:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
}

/* Sorting: a plain underlined text control, not a styled select box. */
.woocommerce .woocommerce-ordering select {
  border-bottom: 1px solid var(--accent);
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Woo notices: text-first, one hairline rule, no coloured panel. */
/* The order-received headline carries .woocommerce-notice--success but is a
   display line, not a notice band — excluded so it does not draw a second
   hairline right under the page header's. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice:not(.woocommerce-thankyou-order-received) {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--accent) !important;
  padding: var(--space-4) 0 !important;
  color: var(--page-fg);
  font-family: var(--font-body);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }


/* ==========================================================================
   Machinery stays hidden — §2.5, "no SKU, no stock counts, no badges"
   ========================================================================== */

.single-product .product_meta,
.single-product .stock,
.woocommerce div.product .woocommerce-product-rating,
.woocommerce ul.products li.product .star-rating,
.woocommerce span.onsale {
  display: none !important;
}


/* ==========================================================================
   RTL — logical properties throughout; the mirror is layout, never a photo
   ========================================================================== */

[dir="rtl"] .aljild-textlink,
[dir="rtl"] .single-product .woocommerce-tabs ul.tabs li a,
[dir="rtl"] .aljild-meta {
  letter-spacing: normal;
}

[dir="rtl"] .aljild-footer-mark .name-lat { text-indent: 0; }


/* ==========================================================================
   Product page — brief §6.4
   Centred header above a bounded two-column region; stacked gallery.
   ========================================================================== */

.aljild-pdp-head {
  text-align: center;
  max-width: var(--content-max);
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.aljild-pdp-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-transform: none;
  color: var(--page-fg);
  margin: 0 auto var(--space-4);
  max-width: var(--measure-display);
  text-wrap: balance;
}

.aljild-pdp-intro {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-prose);
  max-width: 60ch;
  margin-inline: auto;
  color: var(--page-fg);
}

.aljild-pdp-intro p { margin: 0 0 var(--space-3); }

.aljild-provenance-mark {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin: var(--space-6) 0 0;
}

/* Title now lives in the header, so suppress the in-column duplicate rule. */
.aljild-pdp-top .product_title { display: none; }

/* ---- stacked gallery: full-width images, no filmstrip, no zoom cursor ---- */

.woocommerce div.product .woocommerce-product-gallery {
  opacity: 1 !important;
  width: 100%;
}

.woocommerce-product-gallery__wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  transform: none !important;
  width: 100% !important;
}

.woocommerce-product-gallery__image {
  width: 100% !important;
  margin: 0 !important;
  background: var(--plate);
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Chrome the reference does not have. */
.woocommerce-product-gallery__trigger,
.woocommerce div.product .flex-control-thumbs,
.woocommerce div.product .flex-control-nav {
  display: none !important;
}

/* ---- buy column ---- */

.aljild-shipnote,
.aljild-scarcity {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
}

.aljild-shipnote { margin: 0 0 var(--space-6); }
.aljild-scarcity { margin: var(--space-4) 0 var(--space-8); text-transform: none; }

.single-product div.product p.price,
.single-product div.product span.price {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  color: var(--page-fg);
  margin: 0 0 var(--space-2);
}

/* ---- description rhythm ---- */

.aljild-desc h3 {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--page-fg);
  margin: var(--space-8) 0 var(--space-3);
}

.aljild-desc h3:first-child { margin-top: 0; }

.aljild-desc p {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: var(--measure-body);
  margin: 0 0 var(--space-3);
}

.aljild-dotlist {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure-body);
}

.aljild-dotlist li {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  padding-inline-start: 1.25em;
  position: relative;
}

.aljild-dotlist li::before {
  content: ".";
  position: absolute;
  inset-inline-start: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Placeholders announce themselves. Nothing here should reach production. */
.aljild-todo {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--space-3);
}


/* ==========================================================================
   Full-bleed macro band

   Two earlier attempts failed, both recorded so they are not repeated:

   1. `overflow-x: clip` on html/body stopped the overflow and killed
      position:sticky — a clip ancestor gives sticky a non-scrolling
      container. Verified in-browser: the buy column reported `static`.

   2. `width: calc(100vw - (100vw - 100%))` reduces algebraically to `100%`.
      It resolves against the element's own containing block, not the root,
      so the band came out 1242px inside a 1696px viewport. A custom property
      cannot rescue it either: variables store the token and re-resolve in the
      child's context.

   So: the classic bleed, with no clipping anywhere, and horizontal overflow
   measured in the browser rather than assumed. On a viewport with overlay
   scrollbars the overshoot is zero; where a gutter is reserved it is the
   scrollbar width, which `max-inline-size` then trims.
   ========================================================================== */

.aljild-material {
  width: 100vw;
  max-inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);
}


/* ==========================================================================
   Product photography on a parchment ground

   The synced catalogue is shot on pure white (#FFFFFF); the page is Warm
   Parchment (#F9F6F0). The gap is small but every product reads as a visible
   rectangle — the boxing the design exists to avoid, caused by photography
   rather than CSS. multiply maps the image's white onto the page behind it.

   REMOVE when Phase 3 shoots on Parchment: the backgrounds will already
   match, and blending then costs contrast on dark products for nothing.
   ========================================================================== */

.aljild-plate img,
.woocommerce-product-gallery__image img,
.woocommerce ul.products li.product img,
.aljild-card__art img,
.aljild-spotlight__art img,
.aljild-hero__img,
/* Composition classes — renaming these orphaned the blend and put the white
   rectangle back behind every product. Keep this list in step with ui.css. */
.c-hero__media img,
.c-spotlight__media img,
.c-card__media img {
  mix-blend-mode: multiply;
}

@media (prefers-contrast: more) {
  .aljild-plate img,
  .woocommerce-product-gallery__image img,
  .woocommerce ul.products li.product img,
  .aljild-card__art img,
  .aljild-spotlight__art img,
  .aljild-hero__img,
  .c-hero__media img,
  .c-spotlight__media img,
  .c-card__media img {
    mix-blend-mode: normal;
  }
}


/* ==========================================================================
   Hero image height

   Measured at 1425px tall — 1.87 screens — because a 779x1024 portrait
   supplier image was scaled to the full container width with no height
   limit. The hero should be a photograph on the page, not a wall the reader
   has to scroll past twice.
   ========================================================================== */

.aljild-hero__art {
  max-height: min(66vh, 560px);
}

.aljild-hero__img {
  max-height: min(66vh, 560px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Gallery images on the product page have the same portrait problem: five
   stacked 1024px-tall photographs is a very long page. Cap them so the stack
   stays scannable while each image is still large enough to read grain. */
.woocommerce-product-gallery__image img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}


/* ==========================================================================
   Card alignment

   Titles wrap to different line counts, so prices landed on four different
   baselines across a row. Cards become equal-height flex columns and the
   price is pushed to the bottom, so the row reads as one object.
   ========================================================================== */

.aljild-featured__grid .aljild-card,
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.aljild-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* The image keeps its own height; only the text block below stretches. */
.aljild-card__title {
  flex: 1;
}

.aljild-card__price,
.woocommerce ul.products li.product .price {
  margin-top: auto;
}

/* Equal-height rows. */
.aljild-featured__grid,
.woocommerce ul.products {
  align-items: stretch;
}


/* ==========================================================================
   Mobile controls

   Measured in-browser at a 530px viewport: the menu toggle rendered 31px
   tall and the header wordmark link 29px. The toggle is the primary
   navigation control on a phone and it was under the 44px minimum.
   ========================================================================== */

#masthead .menu-toggle-open,
#masthead .menu-toggle,
#masthead .drawer-toggle,
#mobile-drawer .drawer-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The wordmark is a link; give it the same floor without changing its size. */
#masthead .site-branding a,
#masthead .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Kadence's default footer line reads "© 2026 ALJILD - WordPress Theme by
   Kadence WP". It lives in .footer-html, not in a .powered-by-* class, which
   is why the first selector missed it. The colophon in functions.php already
   carries the copyright line, so the whole block goes. */
#colophon .footer-html {
  display: none;
}


/* ==========================================================================
   Pagination tap targets

   Measured at 30px tall. Pagination is often the only way deeper into a
   catalogue on a phone, and 30px misses the 44px minimum.
   ========================================================================== */

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-2);
}


/* ==========================================================================
   WooCommerce Blocks — cart and checkout

   The cart and checkout pages are Blocks-based, not the classic templates.
   They use `wc-block-*` class names, so every button and form rule written
   for `.woocommerce .button` missed them entirely: the checkout button was
   still a filled saddle-tan block with obsidian text (~2.5:1, a contrast
   failure as well as a brief violation).
   ========================================================================== */

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wp-element-button,
.wp-block-woocommerce-checkout .wp-element-button {
  background: transparent !important;
  color: var(--page-fg) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  min-height: 44px;
  padding: 1rem 1.75rem;
  transition: background 250ms ease, color 250ms ease;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:focus-visible {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}

.wc-block-components-button__text {
  color: inherit !important;
}

/* Blocks inputs get the same hairline treatment as the classic ones. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  min-height: 44px;
}

.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
  border-radius: 0;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-components-button { transition: none; }
}


/* ==========================================================================
   Page hero band

   Kadence paints a tonal band (#F1EDE6) behind page titles. On a site
   committed to one ground it reads as a box across the top of every inner
   page — measured full-width at 1403px on the cart. Flatten it.
   ========================================================================== */

.entry-hero-container-inner,
.entry-hero-container,
.page-hero-section,
.entry-hero .entry-header {
  background: var(--page-bg);
}

.entry-hero-container-inner {
  /* The band also carried a lot of dead vertical space. */
  padding-block: clamp(2rem, 5vw, 3.5rem);
}


/* ==========================================================================
   CRITICAL — keep the checkout button reachable

   Measured on the live cart at 1403px: zero visible checkout affordances.
   WooCommerce Blocks rendered only the `--sticky` submit container, which
   sits at `display: none`, so the outer proceed-to-checkout block collapsed
   to 0 height and the only route to checkout disappeared.

   This forces that container into normal flow and gives the button real
   dimensions, so the path to checkout does not depend on Blocks' own
   show/hide logic. Verify after any WooCommerce upgrade — if Blocks starts
   rendering a non-sticky container again, this becomes redundant rather than
   harmful, but the duplicate is worth checking for.
   ========================================================================== */

.wc-block-cart__submit,
.wp-block-woocommerce-proceed-to-checkout-block {
  display: block;
  min-height: 44px;
}

.wc-block-cart__submit-container,
.wc-block-cart__submit-container--sticky {
  display: block !important;
  position: static !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.wc-block-cart__submit-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}


/* ==========================================================================
   Checkout checkbox hit area

   Measured on /checkout/: the "use same address" and marketing checkboxes
   render 20px with a 20px label, so the whole tap target was 20px on the one
   form where a mis-tap costs an order. The control keeps its native 20px
   appearance; the LABEL grows to carry the 44px target.
   ========================================================================== */

.wc-block-components-checkbox {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.wc-block-components-checkbox__label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  cursor: pointer;
}

.wc-block-components-checkbox__input {
  width: 20px;
  height: 20px;
  margin-inline-end: var(--space-3);
  flex: none;
  accent-color: var(--accent);
}