/* ALJILD header, footer and announcement bar — WEB-02
 *
 * Kadence exposes its own palette as --global-palette1..9 and uses those
 * throughout its components. Overriding them here re-skins the parent theme
 * without touching its customizer options, which reject being written to
 * directly and can take the site down when they are.
 *
 * Ground roles per brand system v2.1: Parchment is the page, Obsidian is an
 * anchor band. Header, footer and announcement bar are the anchors.
 */

:root {
  --global-palette1: #96572E;  /* saddle tan   — buttons, links */
  --global-palette2: #C5A059;  /* antique brass — rules, accents */
  --global-palette3: #121212;  /* obsidian     — headings */
  --global-palette4: #3A342E;  /* body text */
  --global-palette5: #6B615A;  /* muted text */
  --global-palette6: #E2DDD5;  /* borders */
  --global-palette7: #F1EDE6;  /* deep parchment */
  --global-palette8: #F9F6F0;  /* warm parchment — page ground */
  /* Kadence uses palette9 for .content-bg — the box the page content sits in.
     It must be the PAGE colour, not white: pure white paints a full-width slab
     behind the content that shows at the edges of every product image and
     breaks the one-ground rule. Measured on the product page as a 1352px
     rgb(255,255,255) ancestor. */
  --global-palette9: var(--aljild-stone);

  --global-palette-highlight: var(--global-palette1);
  --global-palette-btn-bg: var(--global-palette1);
  --global-palette-btn: var(--global-palette8);

  --aljild-chrome-h: 74px;
}

body,
.site,
.content-bg,
.entry-content-wrap {
  background: var(--page-bg);
}


/* ==========================================================================
   Announcement bar
   Espresso rather than Obsidian so the two dark strips at the top of the page
   read as two things, not one thick slab.
   ========================================================================== */

.aljild-announce {
  /* One ground, header to footer. The brown fill was a seam, not a feature. */
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  padding: 12px 16px 10px;
  line-height: 1.4;
}

.aljild-announce [data-blocked] {
  /* Copy is gated on Gate 2 and Gate 5. Visible in staging, never in prod —
     grep the theme for data-blocked before launch. */
  outline: 1px dashed currentColor;
  outline-offset: 2px;
  opacity: 0.75;
}


/* ==========================================================================
   Header — Obsidian anchor band
   ========================================================================== */

#masthead,
.site-header-wrap,
.site-header-row,
.site-header-main-section-left,
.site-header-main-section-right,
.site-header-row-container-inner,
.site-header-upper-wrap,
.site-header-main-section-center {
  background: var(--page-bg);
}

#masthead {
  border-bottom: 0;
  box-shadow: none;
}

/* The hairline appears only once the page has moved, so the header reads as
   part of the page at rest. Kadence adds .item-is-fixed when stuck. */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
  border-bottom: 1px solid var(--border);
  background: var(--page-bg);
}

/* Nav: micro-label scale, so uppercase stays under 14px per the type rule. */
#masthead .header-navigation .header-menu-container > ul > li > a,
#masthead .header-menu-container ul li a {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--page-fg);
}

#masthead .header-menu-container ul li a:hover,
#masthead .header-menu-container ul li a:focus-visible {
  color: var(--accent);
}

#masthead .header-account-button,
#masthead .header-cart-wrap .header-cart-button,
#masthead .search-toggle-open {
  color: var(--page-fg);
}

/* Cart count: a hairline ring, not a filled pill. */
#masthead .header-cart-total {
  background: transparent;
  color: var(--page-fg);
  border: 1px solid var(--accent);
}

#masthead .site-title,
#masthead .site-title a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--page-fg);
}

#masthead .site-branding img,
#masthead .site-branding svg {
  max-height: 40px;
  width: auto;
}


/* ==========================================================================
   Footer — Obsidian anchor band
   ========================================================================== */

#colophon,
.site-footer,
.site-middle-footer-wrap,
.site-top-footer-wrap,
.site-bottom-footer-wrap {
  background: var(--page-bg);
  color: var(--page-fg);
}

#colophon {
  border-top: 1px solid var(--border);
}

#colophon a {
  color: var(--page-fg);
  text-decoration: none;
}

#colophon a:hover,
#colophon a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#colophon .site-footer-row { border-top: 0; }

#colophon,
#colophon .footer-navigation .footer-menu-container ul li a {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Footer lockup: monogram over the bilingual name */
.aljild-footer-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) 0 var(--space-4);
}

.aljild-footer-mark img {
  width: 34px;
  height: 34px;
}

.aljild-footer-mark .name-ar {
  font-family: var(--font-ar);
  font-size: 22px;
  color: var(--page-fg);
  line-height: 1;
}

.aljild-footer-mark .rule {
  width: 72px;
  height: 1px;
  background: var(--aljild-antique-brass);
}

.aljild-footer-mark .name-lat {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--track-display);
  text-indent: var(--track-display);
  color: var(--page-fg);
}


/* ==========================================================================
   Product plate — see --plate in tokens.css
   Photographs are shot on Parchment and sit on Parchment, so the image
   dissolves into the page instead of sitting in a visible box.
   ========================================================================== */

.woocommerce ul.products li.product .product-image,
.woocommerce ul.products li.product img,
.single-product .woocommerce-product-gallery {
  background: var(--plate);
}

.woocommerce ul.products li.product {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Two-up grid. Nine products in three columns reads as an empty shop; the
   same nine at two-up read as a curated selection — see sheet DIR-01. */
@media (min-width: 720px) {
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card: name, then spec line, then price. Material before cost is the whole
   positioning — the spec line needs a product attribute to read from, which
   does not exist yet (Gate 2). */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--aljild-obsidian);
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #4A423A;
}

.aljild-card-spec {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #886D41;
  margin: 2px 0 4px;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button.alt {
  background: var(--aljild-saddle-tan);
  color: var(--page-bg);
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}

.woocommerce a.button:hover,
.woocommerce button.button.alt:hover {
  background: var(--aljild-deep-espresso);
  color: var(--page-bg);
}


/* ==========================================================================
   RTL — the header mirrors, the product photography never does
   ========================================================================== */

[dir="rtl"] #masthead .header-menu-container ul li a {
  letter-spacing: normal;
}

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


/* ==========================================================================
   Front page — DIR-01 as revised by the approved mockup
   ========================================================================== */

.aljild-home {
  background: var(--page-bg);
}

.aljild-home section {
  /* Sections own their vertical rhythm; no stacked margins to collapse. */
  padding-block: clamp(3rem, 7vw, 6rem);
}

/* ---- hero ---- */

.aljild-hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.aljild-hero__copy h1 {
  /* A sentence, not a banner headline. Max 26ch per line. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  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-hero__sub {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin: 0 auto;
  max-width: 40ch;
}

/* The long soft shadow is what makes the product read as an object rather
   than a cutout. It belongs to the photograph, not to CSS — this only keeps
   the plate out of the way while the image carries it. */
.aljild-hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.aljild-hero__img {
  width: 100%;
  height: auto;
  display: block;
}

.aljild-btn {
  display: inline-block;
  background: var(--aljild-saddle-tan);
  color: var(--page-bg);
  padding: 1rem 2.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

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

/* ---- trust strip ----
   A tonal band with vertical brass dividers, not horizontal rules. Separates
   the section without adding another line across the page. */

.aljild-trust {
  background: var(--border);
  padding-block: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.aljild-trust ul {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.aljild-trust li {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* On the muted band, not the page: #6B615A only reaches 4.46:1 here. */
  color: #6A6059;
  padding-inline: var(--space-4);
}

.aljild-trust li + li {
  /* Tan, not brass: brass on parchment is 2.28:1 and fails even the 3:1
     non-text threshold. Brass is reserved for the obsidian band. */
  border-inline-start: 1px solid var(--aljild-saddle-tan);
}

/* ---- featured ---- */

.aljild-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7C6F63;
  text-align: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.aljild-featured__grid {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (max-width: 600px) {
  .aljild-hero__inner,
  .aljild-featured__grid {
    grid-template-columns: 1fr;
  }
  .aljild-trust ul {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .aljild-trust li + li {
    border-inline-start: 0;
  }
}

.aljild-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.aljild-card__art {
  display: block;
  margin-bottom: var(--space-4);
}

.aljild-card__art img {
  width: 100%;
  height: auto;
  display: block;
}

.aljild-card__title {
  /* Sentence case: caps at heading size destroy word-shape. Uppercase is
     permitted only below 14px, which this is not. */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--aljild-obsidian);
  text-align: center;
  margin: 0 0 var(--space-2);
}

/* Brass spec line between name and price. Material before cost. */
.aljild-card__spec {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #886D41;
  margin-bottom: var(--space-2);
}

.aljild-card__price {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: #4A423A;
}

.aljild-card__price del { opacity: 0.5; margin-inline-end: 0.4em; }
.aljild-card__price ins { text-decoration: none; }

/* ---- material band — the one dark editorial band per page ---- */

.aljild-material {
  /* The one dark surface left on the site, and the only place it is welcome.
     Full bleed: it should read as a break in the page, not a section in it. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 !important;
  background: var(--aljild-obsidian);
  /* Bleed geometry lives in components.css — one owner, see the note there. */
}

@media (max-width: 720px) {
  .aljild-material { grid-template-columns: 1fr; }
}

.aljild-material__art {
  min-height: 340px;
  background: #1B1512;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aljild-well {
  border: 1px dashed rgba(197, 160, 89, 0.4);
  color: #8A7355;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2rem;
  text-align: center;
  max-width: 70%;
}

.aljild-material__copy {
  padding: clamp(2.5rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aljild-material__copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-bg);
  margin: 0;
}

.aljild-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--aljild-antique-brass);
  margin: var(--space-6) 0;
}

.aljild-material__copy p {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #A79C90;
  margin: 0;
  max-width: 42ch;
}


/* ==========================================================================
   Collection page
   Quiet grid, no filter rail, no sale badges. Count in the header so a small
   catalogue reads as deliberate rather than sparse.
   ========================================================================== */

.woocommerce .site-container,
.woocommerce-page .site-container {
  background: var(--page-bg);
}

.woocommerce .woocommerce-products-header,
.woocommerce .page-title,
.woocommerce-products-header__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aljild-obsidian);
}

.woocommerce .woocommerce-result-count {
  display: block;
  float: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7C6F63;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Sorting dropdown is noise on a catalogue this size. */
.woocommerce .woocommerce-ordering { display: none; }

.woocommerce ul.products {
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--step-1);
  margin-top: var(--space-4);
}

.woocommerce ul.products li.product .price {
  display: block;
  text-align: center;
}

.woocommerce ul.products li.product .aljild-card__spec {
  display: block;
  text-align: center;
  margin: var(--space-2) 0;
}

/* Sale flashes belong to a discount brand, not this one. */
.woocommerce span.onsale { display: none; }

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.woocommerce nav.woocommerce-pagination ul li { border: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: transparent;
  color: #6B615A;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  color: var(--aljild-obsidian);
  border-bottom: 1px solid var(--aljild-antique-brass);
}


/* ==========================================================================
   Product page
   ========================================================================== */

.single-product div.product .product_title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aljild-obsidian);
  line-height: 1.35;
}

.single-product div.product p.price,
.single-product div.product span.price {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--aljild-obsidian);
  font-variant-numeric: tabular-nums;
}

.single-product .woocommerce-product-gallery img {
  background: var(--plate);
}

/* ---- specification table, above add-to-cart ---- */

.aljild-spec {
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-block: 1px solid var(--aljild-saddle-tan);
  display: grid;
  gap: 2px;
}

.aljild-spec__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.aljild-spec dt {
  color: #786F68;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

.aljild-spec dd {
  margin: 0;
  color: #886D41;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ---- add to cart ---- */

.single-product .single_add_to_cart_button {
  width: 100%;
  padding: 1.1rem 2rem;
  border-radius: 0;
  letter-spacing: 0.18em;
}

.single-product .quantity input.qty {
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  border-radius: 0;
  min-height: 48px;
}

/* ---- accordions: nothing that makes a claim is open by default ---- */

.single-product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}

.single-product .woocommerce-tabs ul.tabs::before { border: 0; }

.single-product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 var(--space-6) 0 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-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #786F68;
  padding: var(--space-3) 0;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--aljild-obsidian);
  box-shadow: inset 0 -1px 0 var(--aljild-antique-brass);
}

/* ---- related products ---- */

.single-product .related > h2,
.single-product .upsells > h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7C6F63;
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* The macro band spans the page, so pull it clear of the content container. */
.single-product .aljild-material {
  margin-top: clamp(3rem, 7vw, 6rem);
}


/* ==========================================================================
   Sticky header
   ========================================================================== */

#masthead {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Admin bar must not push the sticky header off-screen. */
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 46px; } }


/* ==========================================================================
   Front page — additional sections
   ========================================================================== */

/* Four across on desktop, two on tablet, one on phone. */
.aljild-featured__grid--four {
  max-width: 1240px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

@media (max-width: 1024px) {
  .aljild-featured__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .aljild-featured__grid--four { grid-template-columns: 1fr; }
}

/* ---- welcome block ---- */

.aljild-welcome {
  text-align: center;
}

.aljild-welcome p {
  /* The emotional centre of the page, and it is just text. Display face at
     --step-2 on a 58ch measure — the measure is the design. */
  max-width: var(--measure-prose);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-prose);
  color: var(--page-fg);
}

/* ---- single product spotlight ---- */

.aljild-spotlight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  padding: 0 !important;
  background: var(--border);
}

@media (max-width: 720px) {
  .aljild-spotlight { grid-template-columns: 1fr; }
}

.aljild-spotlight__art {
  display: block;
  padding: clamp(2rem, 5vw, 4rem);
}

.aljild-spotlight__art img {
  width: 100%;
  height: auto;
  display: block;
}

.aljild-spotlight__copy {
  padding: clamp(2rem, 6vw, 5rem);
}

.aljild-spotlight__copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aljild-obsidian);
  margin: var(--space-3) 0 0;
  line-height: 1.4;
}

.aljild-rule--dark { background: var(--aljild-saddle-tan); }

.aljild-spotlight__price {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: #4A423A;
  margin: 0 0 var(--space-6);
}

.aljild-btn--ghost {
  background: transparent;
  color: var(--aljild-obsidian);
  border: 1px solid var(--aljild-obsidian);
}

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

/* ---- view everything ---- */

.aljild-viewall {
  text-align: center;
}

/* ---- four assurance blocks ---- */

.aljild-assure {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) { .aljild-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .aljild-assure { grid-template-columns: 1fr; } }

.aljild-assure__item { text-align: center; }

.aljild-assure__item img {
  width: 26px;
  height: 26px;
  margin-bottom: var(--space-4);
  /* Badges are strokes in currentColor; the filter tints them brass without
     needing a second file per colourway. */
  filter: invert(66%) sepia(28%) saturate(628%) hue-rotate(1deg) brightness(94%) contrast(88%);
}

.aljild-assure__item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aljild-obsidian);
  margin: 0 0 var(--space-2);
}

.aljild-assure__item p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: #6B615A;
  margin: 0;
  max-width: 28ch;
  margin-inline: auto;
}


/* ==========================================================================
   Product page — sticky summary, provenance, delivery link
   ========================================================================== */

@media (min-width: 900px) {
  .single-product div.product .entry-summary,
  .single-product div.product .summary {
    position: sticky;
    top: calc(var(--aljild-chrome-h) + 1.5rem);
    align-self: start;
  }
}

.aljild-provenance {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #886D41;
  margin: 0 0 var(--space-4);
}

.aljild-delivery {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
}

.aljild-delivery a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B615A;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.aljild-delivery a:hover,
.aljild-delivery a:focus-visible {
  color: var(--aljild-obsidian);
  border-bottom-color: var(--aljild-antique-brass);
}

/* Gated tab copy reads as provisional rather than as a promise. */
.woocommerce-Tabs-panel [data-blocked] {
  color: #786F68;
  font-style: italic;
}


/* ==========================================================================
   Footer colophon
   ========================================================================== */

.aljild-colophon {
  text-align: center;
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--space-12);
}

.aljild-colophon__line {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-meta);
  max-width: 52ch;
  margin: 0 auto var(--space-4);
  text-transform: none;
  letter-spacing: 0;
}

.aljild-colophon__legal {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin: 0;
}


/* ==========================================================================
   Card image — second-image reveal on hover
   Crossfade only; no scale, no layout shift.
   ========================================================================== */

.aljild-card__art {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--plate);
  margin-bottom: var(--space-4);
}

.aljild-card__art img,
.aljild-card__art .aljild-card__img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 300ms ease-out;
}

.aljild-card__art.has-alt .aljild-card__img--alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.aljild-card__link:hover .aljild-card__art.has-alt .aljild-card__img--alt,
.aljild-card__link:focus-visible .aljild-card__art.has-alt .aljild-card__img--alt,
.woocommerce ul.products li.product a:hover .aljild-card__art.has-alt .aljild-card__img--alt,
.woocommerce ul.products li.product a:focus-visible .aljild-card__art.has-alt .aljild-card__img--alt {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .aljild-card__art img { transition: none; }
}

/* Keyboard users get the same reveal, and a visible focus ring on the card. */
.aljild-card__link:focus-visible,
.woocommerce ul.products li.product a:focus-visible {
  outline: 2px solid var(--aljild-saddle-tan);
  outline-offset: 3px;
}


/* ==========================================================================
   Product page — bounded two-column region
   The wrapper is what makes sticky safe: it is the sticky element's
   containing block, so the summary can never travel past the gallery.
   ========================================================================== */

.aljild-pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.aljild-pdp-top > .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.aljild-pdp-top > .summary,
.aljild-pdp-top > .entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: sticky;
  top: calc(var(--aljild-chrome-h) + 1.5rem);
}

/* A summary taller than the viewport cannot stick without hiding its own
   bottom, so it falls back to static — but only on genuinely short viewports.
   760px caught ordinary laptops (a 1440x900 window is ~762px of viewport) and
   disabled the sticky column everywhere it mattered. 520px is a real phone in
   landscape, which is the case this guard is actually for. */
@media (max-height: 520px) {
  .aljild-pdp-top > .summary,
  .aljild-pdp-top > .entry-summary {
    position: static;
  }
}

@media (max-width: 900px) {
  .aljild-pdp-top {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }
  .aljild-pdp-top > .summary,
  .aljild-pdp-top > .entry-summary {
    position: static;
  }
}

/* The old unbounded rule is deleted outright rather than reset here.
   `.single-product div.product .summary` is specificity 0,3,1 — an element
   selector more than `.single-product .aljild-pdp-top > .summary` at 0,3,0 —
   so a `position: static` reset written here silently outranks the sticky rule
   above and the column never sticks. Do not reintroduce it. */

@media (max-width: 900px), (max-height: 520px) {
  .single-product .aljild-pdp-top > .entry-summary,
  .single-product .aljild-pdp-top > .summary {
    position: static;
  }
}

/* Tabs and everything below start a clean full-width band. */
.single-product .woocommerce-tabs {
  clear: both;
  width: 100%;
}


/* sold_individually leaves a wrapper holding only a hidden input and an
   sr-only label. Collapse it so it cannot claim layout. */
.single-product .quantity:has(input[type="hidden"]) { display: none; }