/* ==========================================================================
   OTAWE — audit fixes overlay
   Loaded AFTER the theme's own stylesheets, so equal-specificity rules here
   win. Nothing in the theme is modified; deactivate the plugin to revert.
   ========================================================================== */

/* --- FIX 20 — token overrides. The theme's --ink-faint (#8A7A69) is
   3.82:1 on cream; AA needs 4.5. --ember-on-dark is new. ----------------- */
:root{
  --ink-faint:#736353;      /* 5.31:1 on cream, 4.58:1 on cream-deep */
  --ember-on-dark:#E0824C;  /* 6.34:1 on the charcoal footer */
}

/* --- FIX 1 — product photos. The theme sets `.stage>img{opacity:0}` and
   reveals on `.ok`, but only the hero has that class hard-coded in the
   template; WooCommerce images never get it and nothing in the theme's JS
   adds it, so every product photo renders invisible. Visible by default
   here; the fade-in only applies once our JS confirms it is running. ----- */
.stage>img{opacity:1;z-index:2;}
.js-ok .stage>img{opacity:0;transition:opacity .45s ease;}
.js-ok .stage>img.ok{opacity:1;}
.js-ok .stage>img.failed{opacity:0;}
@media (prefers-reduced-motion:reduce){.js-ok .stage>img{transition:none;}}

/* --- FIX 2 — the header Amazon CTA was `display:none` below 71rem, which
   removed the only purchase link on every phone. ------------------------- */
@media (max-width:71rem){
  .annc-cta{display:inline-flex;padding:.5rem .8125rem;}
  .annc-cta .annc-cta__long{display:none;}
}
@media (min-width:71.0625rem){.annc-cta .annc-cta__short{display:none;}}
@media (max-width:29.99rem){.header__actions .regsw{display:none;}}
.annc-cta{min-height:2.75rem;white-space:nowrap;}
.annc-cta .i{width:.875rem;height:.875rem;flex:none;}

/* buy button injected into the mobile drawer by the plugin's JS */
.mnav__cta{margin-top:1.75rem;}
.mnav__cta .btn{width:100%;justify-content:center;min-height:3.25rem;font-size:1rem;}
.mnav__cta .amzn-alt{margin:.625rem 0 0;text-align:center;font-size:var(--fs-tiny);color:var(--soft-on-char);}
.mnav__cta .amzn-alt a{color:var(--ember-on-dark);}

/* --- FIX 3 — hide the wrapper left behind when the placeholder strings
   are filtered out (see the gettext filter in the plugin). --------------- */
.news__in p.tiny:empty{display:none;}

/* ==========================================================================
   AUDIT FIXES - appended 21 Aug 2026. Each block cites its finding number
   from the site survey. Later rules win at equal specificity, so this file
   can be reviewed (or reverted) as one contiguous section.
   ========================================================================== */

/* --- FIX 2 - keep the Amazon CTA on mobile ------------------------------ */
.annc-cta{min-height:2.75rem;padding:.5rem 1.125rem;font-size:var(--fs-tiny);white-space:nowrap;}
.annc-cta .i{width:.875rem;height:.875rem;flex:none;}
@media (max-width:71rem){
  /* drop to the short label so it fits beside the burger */
  .annc-cta{padding:.5rem .8125rem;}
  .annc-cta .annc-cta__long{display:none;}
}
@media (min-width:71.0625rem){.annc-cta .annc-cta__short{display:none;}}
@media (max-width:29.99rem){
  /* narrowest phones: the region switcher yields, the buy button stays */
  .header__actions .regsw{display:none;}
}
/* buy button inside the mobile drawer */
.mnav__cta{margin-top:1.75rem;}
.mnav__cta .btn{width:100%;justify-content:center;min-height:3.25rem;font-size:1rem;}
.mnav__cta .amzn-alt{margin:.625rem 0 0;text-align:center;font-size:var(--fs-tiny);color:var(--soft-on-char);}
.mnav__cta .amzn-alt a{color:var(--ember-on-dark);}

/* --- FIX 16 - mobile hero density -------------------------------------- */
@media (max-width:47.9375rem){
  .custom-logo{max-height:2.25rem;}
  .header__in{min-height:3.75rem;gap:.625rem;}
  .hero__cta{gap:.625rem;}
  .hero__cta .btn{flex:1 1 100%;justify-content:center;}
  .hero__proof{gap:.5rem 1.125rem;font-size:var(--fs-tiny);}
  .hero__proof span{flex:0 1 auto;}
  .hero{padding-block-start:1.5rem;}
  .hero__stagewrap{margin-top:1.25rem;}
}

/* --- FIX 20 - readable ember on the charcoal footer --------------------- */
.footer .em-i,.footer__sign .em-i{color:var(--ember-on-dark);}
.footer :focus-visible,.mnav :focus-visible{outline-color:var(--ember-on-dark);}

/* --- FIX 21 - 44px minimum touch targets ------------------------------- */
@media (max-width:61.9375rem){
  .footer__col a,.footer__legal a,.legalnav a{
    display:inline-flex;align-items:center;min-height:2.75rem;
  }
  .link-arrow{min-height:2.75rem;display:inline-flex;align-items:center;}
  .pcard__name a{display:inline-flex;align-items:center;min-height:2.75rem;}
  .btn--sm{min-height:2.75rem;}
}

/* --- FIX 22 - section rhythm + footer sign-off -------------------------- */
.bg-deep .vgrid{padding-block-end:0;}
.bg-deep.section{padding-block-end:calc(var(--sect) * .78);}
/* the sign-off repeats the H1 verbatim; it is now a <p>, so restore the look */
.footer__sign p{
  font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(1.9rem,4.6vw,3rem);margin:0;color:var(--cream-on-char);
}

/* --- FIX 10 - footer legal row ----------------------------------------- */
.legalnav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0 0 .75rem;padding:0;list-style:none;}
.legalnav a{color:var(--soft-on-char);font-size:var(--fs-tiny);}
.legalnav a:hover{color:var(--cream-on-char);}

/* --- FIX 3 - editor-only notices never render for visitors ------------- */
.editor-note{display:none;}
body.otawe-can-edit .editor-note{
  display:block;background:#FFF6D6;border:1px dashed #C9A227;color:#5C4708;
  padding:.75rem 1rem;border-radius:.5rem;font-size:var(--fs-small);margin-bottom:1rem;
}

/* --- FIX 28 — utility classes replacing inline style attributes --------- */
.eyebrow--center{justify-content:center;}
.news__title{max-width:16ch;}
.news__sub{max-width:38rem;}
.news__fine{color:var(--ink-faint);}
.pcard__soon{
  display:inline-flex;align-items:center;gap:.375rem;
  font-size:var(--fs-tiny);font-weight:650;color:var(--forest);
}

/* --- FIX 15 — the hero now holds a photograph, not a diagram -----------
   One frame instead of arch-inside-square-inside-page, and cover rather
   than contain so a real photo fills the shape. */
.hero__stage .stage--photo:has(>img.ok){
  background:var(--cream-deep);border-color:transparent;
}
.hero__stage .stage--photo>img.ok{padding:0;object-fit:cover;}
.hero__stage .stage--photo>svg.ill,
.hero__stage .stage--photo>img:not(.ok){padding:9%;object-fit:contain;}
/* remaining sub-44px targets found in verification: region chips (43px)
   and the logo links, whose hit area was only as tall as the mark */
@media (max-width:61.9375rem){
  .regsw__row .chip{min-height:2.75rem;}
  .header .custom-logo-link,.header .logo,.mnav__top .logo,.footer__brand .logo{
    display:inline-flex;align-items:center;min-height:2.75rem;
  }
}

/* --- FIX 21 (desktop) — WCAG 2.2 SC 2.5.8 wants 24x24 CSS px for pointer
   targets too, not just touch. Footer link lists were 19px tall.
   Scoped to min-width so it cannot out-specify the 44px touch rules
   above: `.footer__col li a` (0,1,2) beats `.footer__col a` (0,1,1)
   regardless of which media query each one sits in. ------------------ */
@media (min-width:62rem){
  .footer__col li a,.legalnav a,.amzn-alt a{
    display:inline-flex;align-items:center;min-height:1.5rem;
  }
}


/* ==========================================================================
   AUDIT FIXES — appended 21 Aug 2026. See the site survey for finding numbers.
   ========================================================================== */

/* --- FIX 4 — safety net for the missing container -----------------------
   woocommerce.php now wraps the store in .container. If any Woo template
   still slips through the default wrapper (a plugin endpoint, a custom
   shortcode page), give it the same gutter rather than letting it run
   flush to the viewport edge. */
.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area{
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);padding-block:var(--space-5);
}
.woo-wrap .container>.woocommerce,.woo-wrap .container>.site-main{margin:0;}
/* Woo pages inherit the cream ground instead of dropping to white */
.woocommerce-page,.single-product{background:var(--cream);}

/* --- FIX 4 — page title matches the rest of the site -------------------- */
.woocommerce .woocommerce-products-header__title,
.woo-wrap h1.page-title{
  font-family:var(--serif);font-size:var(--fs-h1);font-weight:520;
  letter-spacing:-.02em;line-height:1.06;margin:0 0 .5rem;
}
.woocommerce .woocommerce-result-count{margin-bottom:1.5rem;}

/* --- FIX 14 — sale flash: match the homepage badge ----------------------
   WooCommerce's own `.woocommerce ul.products li.product .onsale` is more
   specific than the base rule in this file, so it kept winning and parked
   the flash top-right in stock styling. Match its specificity. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.woocommerce div.product span.onsale{
  position:absolute;top:.875rem;left:.875rem;right:auto;z-index:3;
  min-height:0;min-width:0;line-height:1;margin:0;
  background:var(--ink);color:var(--cream);border-radius:999px;
  padding:.375rem .75rem;font-size:var(--fs-tiny);font-weight:600;
}
.woocommerce ul.products li.product{overflow:visible;}

/* --- FIX 14 — archive cards read like the homepage .pcard --------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__link{display:block;}
.woocommerce ul.products li.product .button{
  background:var(--ember);color:#fff;box-shadow:0 2px 6px rgba(191,69,23,.25);
  align-self:stretch;
}
.woocommerce ul.products li.product .button:hover{background:var(--ember-deep);}
/* category eyebrow above the title, same as the homepage card */
.woocommerce ul.products li.product .otawe-loop-cat{
  font-size:var(--fs-tiny);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin:0;
}

/* --- FIX 14 — ordering select stops looking like a browser default ------ */
.woocommerce .woocommerce-ordering{margin-bottom:1.5rem;}
.woocommerce .woocommerce-ordering select{
  appearance:none;-webkit-appearance:none;
  padding-inline:1.125rem 2.5rem;color:var(--ink);font-weight:550;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23211913' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.75 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.125rem center;
}

/* --- FIX 19 — sharper, better-proportioned gallery thumbnails ----------- */
.woocommerce div.product div.images .flex-control-thumbs{
  grid-template-columns:repeat(5,1fr);gap:.625rem;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  background:linear-gradient(180deg,#FFFEFB,#FBF6EC);
  transition:border-color var(--t-fast) ease,opacity var(--t-fast) ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover{border-color:var(--line-strong);}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{border-color:var(--ember);opacity:1;}
@media (max-width:35rem){
  .woocommerce div.product div.images .flex-control-thumbs{grid-template-columns:repeat(4,1fr);}
}

/* --- FIX 4 — two-column product layout inside our container -------------
   NOTE: WooCommerce puts its `.woocommerce` class on <body>, so it is an
   ANCESTOR of .woo-wrap, never a descendant. Selectors written as
   `.woo-wrap--product .woocommerce div.product` match nothing. Two classes
   plus an element already outrank Woo's own `.woocommerce div.product`. */
@media (min-width:62rem){
  .woo-wrap--product div.product{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:var(--space-6);row-gap:var(--space-5);align-items:start;
  }
  .woo-wrap--product div.product div.images{grid-column:1;margin-bottom:0;}
  .woo-wrap--product div.product div.summary{grid-column:2;margin-bottom:0;width:auto;float:none;}
  .woo-wrap--product div.product .woocommerce-tabs,
  .woo-wrap--product div.product .related,
  .woo-wrap--product div.product .upsells{grid-column:1 / -1;}
  /* the gallery must not outgrow its column */
  .woo-wrap--product div.product div.images img{width:100%;height:auto;}
}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important;float:none!important;}

/* --- FIX 13 — retire wishlist / compare if the plugins stay active ------ */
.summary .yith-wcwl-add-to-wishlist,
.summary .compare,
.summary a.compare.button,
.woocommerce ul.products .yith-wcwl-add-to-wishlist,
.woocommerce ul.products a.compare.button{display:none!important;}
/* stock "Category: … Brand: …" line ran together with no separator */
.woocommerce div.product .product_meta{
  display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;
  font-size:var(--fs-tiny);color:var(--ink-faint);
  border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1rem;
}
.woocommerce div.product .product_meta>span{display:inline-flex;gap:.375rem;}
.woocommerce div.product .product_meta a{color:var(--ink-soft);}

/* --- FIX 21 — touch targets on phones ---------------------------------- */
@media (max-width:61.9375rem){
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{min-height:2.75rem;}
  .woocommerce-breadcrumb a{display:inline-flex;align-items:center;min-height:2.5rem;}
}

/* --- FIX 4 — breadcrumb spacing now that it sits in the container ------- */
.woocommerce-breadcrumb{padding-block:1.25rem 0;}
@media (max-width:47.9375rem){
  .woocommerce-breadcrumb{font-size:var(--fs-tiny);line-height:1.7;}
}

/* --- FIX 20/21 — WooCommerce's own selectors carry one more class than
   the base rules in this file, so they kept winning. Match them.
   `.woocommerce .woocommerce-breadcrumb a` was painting #767676 (4.18:1)
   straight over our --ink-faint. ------------------------------------------ */
.woocommerce .woocommerce-breadcrumb,
.woo-wrap .woocommerce-breadcrumb{color:var(--ink-faint);}
.woocommerce .woocommerce-breadcrumb a,
.woo-wrap .woocommerce-breadcrumb a{color:var(--ink-soft);}
.woocommerce .woocommerce-breadcrumb a:hover,
.woo-wrap .woocommerce-breadcrumb a:hover{color:var(--ember-text);}

/* --- FIX 21 — the touch targets the first pass missed ------------------- */
@media (max-width:61.9375rem){
  .woocommerce .woocommerce-breadcrumb a,
  .woo-wrap .woocommerce-breadcrumb a,
  .woocommerce div.product .product_meta a,
  .amzn-alt a{
    display:inline-flex;align-items:center;min-height:2.75rem;
  }
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger{
    width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;
  }
}

/* --- FIX 5 — defensive: hide any widget sidebar that another template
   still manages to print on a store page. woocommerce.php does not call
   one, but re-uploading a theme merges rather than replaces, so a stale
   sidebar.php could survive the deploy. --------------------------------- */
.woo-wrap #sidebar,
.woo-wrap .widget-area,
.single-product #sidebar,
.woocommerce-page #sidebar{display:none;}

/* FIX 21 (desktop) — 24px minimum for pointer targets in the product meta.
   Scoped to min-width so it cannot override the 44px touch rule above. */
@media (min-width:62rem){
  .woocommerce div.product .product_meta a{display:inline-flex;align-items:center;min-height:1.5rem;}
}