/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* et-preview-title-off — Earth Tab, 2026-08-08.
   Hides Woodmart's page-title bar ONLY on the five preview pages; it duplicates
   the hero headline. Scoped by page id so no NIM page is affected. Delete this
   block to restore. */
body.page-id-3475 .wd-page-title,
body.page-id-3476 .wd-page-title,
body.page-id-3376 .wd-page-title,
body.page-id-3377 .wd-page-title,
body.page-id-3378 .wd-page-title { display: none !important; }

/* et-light-headings — 2026-08-08. Element titles ("Popular products", carousel
   headings) are hard-coded white by the Woodmart T-shirts demo layouts. The page
   behind them is linen now, so they were invisible. Scoped to light sections
   only — the dark footer and dark header keep their white type. */
.wd-page-content .wd-el-title,
.wd-page-content .slider-title,
.wd-page-content .element-title { color: var(--wd-title-color) !important; }
.wd-footer .wd-el-title, .whb-header .wd-el-title { color: #FFFFFF !important; }

/* et-shop-readable — 2026-08-08 (v2). The T-shirts demo styles product cards as
   dark tiles with white type. Card body is white now, so the white title/price
   had to move to ink. Selectors verified against the live DOM:
   .wd-product > .product-wrapper > .product-element-bottom > h3.wd-entities-title
   Header and footer contain no .wd-product, so they are unaffected. */
.wd-product .product-wrapper { background-color: #FFFFFF !important;
  border: 1px solid #E6E1D8; border-radius: 10px; overflow: hidden; }
.wd-product .product-element-bottom { padding: 14px 16px 16px; }
.wd-product .wd-entities-title,
.wd-product .wd-entities-title a,
.wd-product .price,
.wd-product .price .amount,
.wd-product .price bdi { color: #16202E !important; }
.wd-product .wd-entities-title a:hover { color: #16365E !important; }

/* Shop toolbar + breadcrumbs were white-on-linen, i.e. invisible. */
.wd-page-content .wd-products-per-page, .wd-page-content .wd-products-per-page a,
.wd-page-content .wd-ordering, .wd-page-content .wd-breadcrumbs,
.wd-page-content .wd-breadcrumbs a, .wd-page-content .wd-shop-tools { color: #5F6874 !important; }
.wd-page-content .wd-load-more { color: #16365E !important; border-color: #16365E !important; }

/* The demo layout ships `.wd-product .price {color:#fff !important}`. No theme
   option controls it, so this needs one more class to out-rank it. */
.wd-products .wd-product .price,
.wd-products .wd-product .price .woocommerce-Price-amount,
.wd-products .wd-product .price bdi,
.wd-products .wd-product .price ins { color: #16202E !important; }

/* et-light-header — Earth Tab, 2026-08-08.
   The header is the one element on every screen, and it was still the T-shirts
   demo's near-black bar (.whb-general-header, background rgba(1,2,6,1)) sitting
   on top of a linen page. This turns it to paper with ink type.

   THE LOGO. Their logo file is a white mark on transparency, so on a light bar
   it disappears. It is not restyled with a filter — filters fringe on the
   antialiased edges of a hand-drawn mark. A recoloured copy of THEIR OWN file
   was uploaded (nim-logo-ink.png, identical geometry, ink instead of white) and
   is swapped in as a background while the original img is left in place to hold
   the layout. That keeps their media library the source of truth and means the
   header builder setting never had to be touched.

   Deleting this whole block restores the dark header exactly. */

.whb-general-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E6E1D8;
}

/* .whb-color-light paints every child white — nav, icons, counters, dividers. */
.whb-header .whb-color-light .wd-nav > li > a,
.whb-header .whb-color-light .wd-tools-element > a,
.whb-header .whb-color-light .wd-tools-element > a span,
.whb-header .whb-color-light .wd-header-divider,
.whb-header .wd-nav-header > li > a,
.whb-header .wd-header-nav a,
.whb-header .wd-tools-element a { color: #16202E !important; }

.whb-header .wd-nav > li > a:hover,
.whb-header .wd-nav > li.current-menu-item > a,
.whb-header .wd-tools-element > a:hover { color: #16365E !important; }

/* The icon set is drawn with currentColor in some places and a hard fill in
   others; both paths have to be told the same thing. */
.whb-header .wd-tools-icon svg,
.whb-header .wd-tools-icon path { fill: currentColor !important; stroke: none; }
.whb-header .wd-header-divider { border-color: #E6E1D8 !important;
  background-color: #E6E1D8 !important; }

/* Cart count keeps the navy chip it has on our own pages. */
.whb-header .wd-cart-number { background-color: #16365E !important; color: #FFF !important; }

/* Logo: hold the original in place for sizing, paint ours over it. */
.whb-header .wd-logo { display: inline-block;
  background-image: url(https://nimpeptides.com/wp-content/uploads/2026/08/nim-logo-ink.png);
  background-repeat: no-repeat; background-position: left center; background-size: contain; }
.whb-header .wd-logo img { opacity: 0 !important; }

/* Sticky state reuses the same row, so it inherits the above — but Woodmart
   drops a shadow that read as a smudge against linen. */
.whb-sticked .whb-general-header { box-shadow: 0 1px 0 #E6E1D8 !important; }

/* Mobile: the burger and the mobile nav panel are separate elements from the
   desktop menu and keep their own white. */
.whb-header .wd-tools-element.wd-header-mobile-nav > a,
.whb-header .whb-mobile-left a, .whb-header .whb-mobile-right a,
.whb-header .whb-mobile-center a { color: #16202E !important; }

/* Every nested container carried its own dark fill; flatten them onto the one
   surface above. The button and the input claim theirs back further down. */
footer.elementor-location-footer .e-con,
footer.elementor-location-footer .e-con-inner,
footer.elementor-location-footer .elementor-element { background-color: transparent !important; }

footer.elementor-location-footer,
footer.elementor-location-footer p,
footer.elementor-location-footer li,
footer.elementor-location-footer span,
footer.elementor-location-footer a { color: #C3CFE0 !important; }

footer.elementor-location-footer a:hover { color: #FFFFFF !important; }

footer.elementor-location-footer h1, footer.elementor-location-footer h2,
footer.elementor-location-footer h3, footer.elementor-location-footer h4,
footer.elementor-location-footer h5, footer.elementor-location-footer h6,
footer.elementor-location-footer .elementor-heading-title { color: #FFFFFF !important; }

/* Icons are the loudest thing down here — the blue reads as a link colour on a
   row of things that are not links. Linen at low weight instead. */
footer.elementor-location-footer svg,
footer.elementor-location-footer svg path,
footer.elementor-location-footer .elementor-icon { fill: #E6E1D8 !important;
  color: #E6E1D8 !important; }

/* The one place white earns its keep: the signup. Paper on ink reads instantly
   and needs no accent colour of its own. */
footer.elementor-location-footer .elementor-button,
footer.elementor-location-footer button,
footer.elementor-location-footer input[type="submit"] {
  background-color: #FFFFFF !important; color: #16202E !important;
  border: 0 !important; font-weight: 700 !important; }
footer.elementor-location-footer .elementor-button:hover,
footer.elementor-location-footer button:hover { background-color: #E6E1D8 !important; }

footer.elementor-location-footer input[type="email"],
footer.elementor-location-footer input[type="text"] {
  background-color: #FFFFFF !important; color: #16202E !important;
  border: 1px solid #E6E1D8 !important; }

/* The trust strip was a boxed row with a blue hairline. Keep the box, quiet it. */
footer.elementor-location-footer .e-con[class*="elementor-element"] { border-color: #2B3A4E !important; }

/* et-footer-ink — Earth Tab, 2026-08-08.
   The footer stays DARK on purpose — that is the design, not an oversight: a
   linen page wants an ink foot, and it is what our own build does. What changes
   is WHICH dark, and what colour sits on it. The T-shirts demo shipped it at
   #02060F with two electric blues (#3C83F6, #035DF2) and two flat greys
   (#7C7878, #8D8D8D), all of which belong to the old look.

   The colours are not overridden hex-by-hex — Elementor writes them into
   post-2057.css against 29 generated element ids, and chasing those ids means
   this breaks the next time anyone nudges a widget. Everything here is scoped
   to the footer element and addressed by ROLE — surface, type, link, icon,
   field, button — so it survives edits inside the builder.

   Deleting this block returns the demo footer exactly as it was. */

/* The demo does not paint the footer with a colour — it paints it with a
   one-stop linear-gradient (#02060F to #02060F) laid over a transparent
   background-color. A background-color override, however loud, sits UNDER that
   image and changes nothing. The image has to be removed by name. */
footer.elementor-location-footer,
footer.elementor-location-footer.elementor-2057 {
  background-image: none !important;
  background-color: #16202E !important; }

/* Every nested container carried its own dark fill; flatten them onto the one
   surface above. The button and the input claim theirs back further down. */
footer.elementor-location-footer .e-con,
footer.elementor-location-footer .e-con-inner,
footer.elementor-location-footer .elementor-element { background-color: transparent !important; }

footer.elementor-location-footer,
footer.elementor-location-footer p,
footer.elementor-location-footer li,
footer.elementor-location-footer span,
footer.elementor-location-footer a { color: #C3CFE0 !important; }

footer.elementor-location-footer a:hover { color: #FFFFFF !important; }

footer.elementor-location-footer h1, footer.elementor-location-footer h2,
footer.elementor-location-footer h3, footer.elementor-location-footer h4,
footer.elementor-location-footer h5, footer.elementor-location-footer h6,
footer.elementor-location-footer .elementor-heading-title { color: #FFFFFF !important; }

/* Icons are the loudest thing down here — the blue reads as a link colour on a
   row of things that are not links. Linen at low weight instead. */
footer.elementor-location-footer svg,
footer.elementor-location-footer svg path,
footer.elementor-location-footer .elementor-icon { fill: #E6E1D8 !important;
  color: #E6E1D8 !important; }

/* The one place white earns its keep: the signup. Paper on ink reads instantly
   and needs no accent colour of its own. */
footer.elementor-location-footer .elementor-button,
footer.elementor-location-footer button,
footer.elementor-location-footer input[type="submit"] {
  background-color: #FFFFFF !important; color: #16202E !important;
  border: 0 !important; font-weight: 700 !important; }
footer.elementor-location-footer .elementor-button:hover,
footer.elementor-location-footer button:hover { background-color: #E6E1D8 !important; }
/* The label is a span inside the button, so the footer-wide span colour above
   would otherwise leave grey text on a white button. */
footer.elementor-location-footer .elementor-button span,
footer.elementor-location-footer button span { color: #16202E !important; }

footer.elementor-location-footer input[type="email"],
footer.elementor-location-footer input[type="text"] {
  background-color: #FFFFFF !important; color: #16202E !important;
  border: 1px solid #E6E1D8 !important; }

/* The trust strip was a boxed row with a blue hairline. Keep the box, quiet it. */
footer.elementor-location-footer .e-con[class*="elementor-element"] { border-color: #2B3A4E !important; }

/* Gallery arrows, the grid toggle and the share glyphs are drawn in
   currentColor, so they followed the white type into invisibility. */
.elementor-571 .elementor-element-474b6cb svg,
.elementor-571 .elementor-element-474b6cb svg path { fill: currentColor !important; }

/* Quantity stepper was a white-on-black control. */
.elementor-571 .quantity input,
.elementor-571 .quantity .wd-buttons a,
.elementor-571 .quantity .minus, .elementor-571 .quantity .plus {
  color: #16202E !important; background-color: #FFFFFF !important;
  border-color: #E6E1D8 !important; }

/* ...but NOT the button. It stays navy with a white label. */
.elementor-571 .single_add_to_cart_button,
.elementor-571 .single_add_to_cart_button span,
.elementor-571 .elementor-element-474b6cb .button,
.elementor-571 .elementor-element-474b6cb .button span { color: #FFFFFF !important; }
.elementor-571 .single_add_to_cart_button { background-color: #16365E !important; }
.elementor-571 .single_add_to_cart_button:hover { background-color: #0E2444 !important; }

/* "Popular products" below the fold is a Woodmart element title hard-coded
   white by the demo. The earlier et-light-headings block scoped its fix to
   .wd-page-content; this heading sits inside the Elementor template instead,
   so it never matched. */
.elementor-571 .wd-el-title,
.elementor-571 .element-title,
.elementor-571 .slider-title { color: #16202E !important; }

/* The demo's brand blue on this template, matched to the navy used everywhere
   else in the retone. */
.elementor-571 a { color: #16365E; }

/* et-product-page — Earth Tab, 2026-08-08.
   The single-product page is an Elementor template the T-shirts demo ships
   (id 571). Its top container — breadcrumb, gallery, title, price, specs, add
   to cart — is painted #000000 by
     .elementor-571 .elementor-element-474b6cb { background-color:#000000 }
   which is why the page still opened black after the header, footer and product
   images had all moved to the light scheme. Retoning it here rather than in the
   builder keeps the demo template untouched, so their own updates and our
   revert are both one step.

   The panel becomes PAPER, not linen: the page behind it is linen, and a white
   panel with the demo's existing rounded foot reads as a deliberate product
   card instead of a section that lost its colour.

   Type is recoloured by role, and the add-to-cart button is explicitly excluded
   — it is navy with a white label and must keep it. A blanket "everything in
   here is ink" would have put ink text on a navy button.

   Deleting this block restores the black product page. */

.elementor-571 .elementor-element-474b6cb { background-color: #FFFFFF !important; }

.elementor-571 .elementor-element-474b6cb h1,
.elementor-571 .elementor-element-474b6cb h2,
.elementor-571 .elementor-element-474b6cb h3,
.elementor-571 .elementor-element-474b6cb .product_title,
.elementor-571 .elementor-element-474b6cb .price,
.elementor-571 .elementor-element-474b6cb .price bdi,
.elementor-571 .elementor-element-474b6cb .woocommerce-Price-amount,
.elementor-571 .elementor-element-474b6cb li,
.elementor-571 .elementor-element-474b6cb p,
.elementor-571 .elementor-element-474b6cb strong { color: #16202E !important; }

.elementor-571 .elementor-element-474b6cb .wd-breadcrumbs,
.elementor-571 .elementor-element-474b6cb .wd-breadcrumbs a,
.elementor-571 .elementor-element-474b6cb .product_meta,
.elementor-571 .elementor-element-474b6cb .product_meta a,
.elementor-571 .elementor-element-474b6cb .wd-social-icons,
.elementor-571 .elementor-element-474b6cb .wd-social-icons a { color: #5F6874 !important; }

.elementor-571 .elementor-element-474b6cb .wd-breadcrumbs a:hover,
.elementor-571 .elementor-element-474b6cb .product_meta a:hover { color: #16365E !important; }

/* The CURRENT crumb and the "Category:" label are not links, and the demo gives
   each its own hard white — so colouring the container left both of them
   invisible on the new white panel rather than merely wrong. Descendants, not
   inheritance. */
.elementor-571 .elementor-element-474b6cb .wd-breadcrumbs *,
.elementor-571 .elementor-element-474b6cb .product_meta * { color: #5F6874 !important; }
.elementor-571 .elementor-element-474b6cb .product_meta a { color: #16365E !important; }

/* Gallery arrows, the grid toggle and the share glyphs are drawn in
   currentColor, so they followed the white type into invisibility. */
.elementor-571 .elementor-element-474b6cb svg,
.elementor-571 .elementor-element-474b6cb svg path { fill: currentColor !important; }

/* Quantity stepper was a white-on-black control. */
.elementor-571 .quantity input,
.elementor-571 .quantity .wd-buttons a,
.elementor-571 .quantity .minus, .elementor-571 .quantity .plus {
  color: #16202E !important; background-color: #FFFFFF !important;
  border-color: #E6E1D8 !important; }

/* ...but NOT the button. It stays navy with a white label. */
.elementor-571 .single_add_to_cart_button,
.elementor-571 .single_add_to_cart_button span,
.elementor-571 .elementor-element-474b6cb .button,
.elementor-571 .elementor-element-474b6cb .button span { color: #FFFFFF !important; }
.elementor-571 .single_add_to_cart_button { background-color: #16365E !important; }
.elementor-571 .single_add_to_cart_button:hover { background-color: #0E2444 !important; }

/* "Popular products" below the fold is a Woodmart element title hard-coded
   white by the demo. The earlier et-light-headings block scoped its fix to
   .wd-page-content; this heading sits inside the Elementor template instead,
   so it never matched. */
.elementor-571 .wd-el-title,
.elementor-571 .element-title,
.elementor-571 .slider-title { color: #16202E !important; }

/* The demo's brand blue on this template, matched to the navy used everywhere
   else in the retone. */
.elementor-571 a { color: #16365E; }

/* Dividers and icon glyphs were white for the same reason as the type. */
body:not(.page-id-3475):not(.page-id-3476):not(.page-id-3376):not(.page-id-3377):not(.page-id-3378)
  .wd-page-content .elementor-divider-separator { border-color: #E6E1D8 !important; }

/* The eight dark banners, restored. */


/* Cart and checkout are WooCommerce templates rather than Elementor widgets, so
   they need the same treatment named separately: totals tables, notices, the
   empty-cart line, and the form labels. */
.woocommerce-cart .wd-page-content, .woocommerce-checkout .wd-page-content,
.woocommerce-cart .wd-page-content :is(th, td, label, .woocommerce-info),
.woocommerce-checkout .wd-page-content :is(th, td, label, .woocommerce-info) { color: #16202E; }
.woocommerce-cart .wd-page-content .cart-empty,
.woocommerce-checkout .wd-page-content .cart-empty { color: #16202E !important; }

/* Dividers and icon glyphs were white for the same reason as the type. */
body:not(.page-id-3475):not(.page-id-3476):not(.page-id-3376):not(.page-id-3377):not(.page-id-3378)
  .wd-page-content .elementor-divider-separator { border-color: #E6E1D8 !important; }

/* The eight dark banners, restored. */


/* Cart and checkout are WooCommerce templates rather than Elementor widgets, so
   they need the same treatment named separately: totals tables, notices, the
   empty-cart line, and the form labels. */
.woocommerce-cart .wd-page-content, .woocommerce-checkout .wd-page-content,
.woocommerce-cart .wd-page-content :is(th, td, label, .woocommerce-info),
.woocommerce-checkout .wd-page-content :is(th, td, label, .woocommerce-info) { color: #16202E !important; }
.woocommerce-cart .wd-page-content .cart-empty,
.woocommerce-checkout .wd-page-content .cart-empty { color: #16202E !important; }

/* et-light-body-copy — Earth Tab, 2026-08-08.
   About, FAQs, Contact, the four policy pages, Cart and Checkout were all still
   printing white body copy. That was correct while the page behind it was black
   and became close to unreadable the moment the page turned linen — the worst
   possible half-state, because the page LOOKS finished until you try to read it.

   WHY THIS IS CSS AND NOT A RETONE OF THE PAGES
   It was tried the other way first. Walking each page's Elementor data found
   almost nothing to change — About carries three colour settings in total —
   because the white is not set per page. It comes from the theme's global type
   colour, one setting inherited by every page. One place to fix, and the pages
   keep their own data untouched.

   WHY IT IS SCOPED TO .elementor-widget
   That one class does two jobs. It reaches all of the demo's page content, and
   it excludes our own five rebuild pages for free — those are hand-written HTML
   carrying their own type colours, and a rule reaching into them would undo the
   design rather than fix it. The first draft excluded them by page id instead,
   with five :not() clauses; that worked, but it made this rule so specific that
   the banner exception below could not out-rank it and the banners went dark.
   Specificity is a budget — spend it where the exception needs it.

   The !important is not decoration: the demo sets this colour high enough up
   the tree that a plain declaration loses on the pages that need it most.
   Verified in the browser before it was added. */

.wd-page-content .elementor-widget :is(p, li, td, th, dd, dt, label, blockquote,
    .elementor-icon-list-text, .elementor-widget-text-editor) { color: #5F6874 !important; }

.wd-page-content .elementor-widget :is(h1, h2, h3, h4, h5, h6,
    .elementor-heading-title, .wd-el-title) { color: #16202E !important; }

.wd-page-content .elementor-widget a:not(.elementor-button) { color: #16365E !important; }

.wd-page-content .elementor-widget .elementor-divider-separator { border-color: #E6E1D8 !important; }

/* The eight dark banners, restored.

   Each page opens with a dark banner photograph. Its background is an IMAGE, so
   the page turning linen left the banner dark and its white type correct —
   flipping type globally puts dark text on a dark banner.

   Each banner is pinned to its OWN page id. Elementor reuses element ids across
   pages built from one demo template, and an unpinned id list matched headings
   on pages it had nothing to do with — that is how "Quality Standards" came out
   white on linen. The page id makes each rule mean the one banner it was
   written for. Ids were read off the rendered pages, one per page, not guessed.

   If a banner is ever rebuilt in the builder its id changes and its type will
   go dark. That is the maintenance cost of this block, and it shows the moment
   anyone opens the page. */
body.page-id-1053 .wd-page-content .elementor-element-06cd6ec :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title),
body.page-id-1304 .wd-page-content .elementor-element-7e540ea :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title),
body.page-id-72   .wd-page-content .elementor-element-e3a885d :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title),
body.page-id-1253 .wd-page-content .elementor-element-da4a609 :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title),
body.page-id-1259 .wd-page-content .elementor-element-e1a79b6 :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title),
body.page-id-1272 .wd-page-content .elementor-element-dd3c2fc :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title),
body.page-id-2746 .wd-page-content .elementor-element-a8ed756 :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title),
body.page-id-2208 .wd-page-content .elementor-element-99f1e20 :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title) {
  color: #FFFFFF !important;
}

/* Cart and checkout are WooCommerce templates rather than Elementor widgets, so
   the rule above never reaches them. Named separately: totals tables, notices,
   the empty-cart line and the form labels. */
.woocommerce-cart .wd-page-content, .woocommerce-checkout .wd-page-content,
.woocommerce-cart .wd-page-content :is(th, td, label, .woocommerce-info),
.woocommerce-checkout .wd-page-content :is(th, td, label, .woocommerce-info) { color: #16202E !important; }
.woocommerce-cart .wd-page-content .cart-empty,
.woocommerce-checkout .wd-page-content .cart-empty { color: #16202E !important; }

/* et-faq-tabs — Earth Tab, 2026-08-08.
   The FAQ category rail is an Elementor nested-tabs widget. Its titles are not
   headings or paragraphs, so the body-copy rule above never reached them: the
   inactive ones stayed white on a near-transparent chip and read as blank rows,
   and the active one kept the demo's electric blue. The chip's own fill is
   rgba(2,1,1,.28) — a black wash that only worked on a black page.

   Delete this block to get the demo's tab rail back. */

.wd-page-content .e-n-tab-title { background-color: #EDEEEF !important;
  border: 1px solid #E6E1D8 !important; }
.wd-page-content .e-n-tab-title,
.wd-page-content .e-n-tab-title-text { color: #16202E !important; }

.wd-page-content .e-n-tab-title[aria-selected="true"] { background-color: #16365E !important;
  border-color: #16365E !important; }
.wd-page-content .e-n-tab-title[aria-selected="true"],
.wd-page-content .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text { color: #FFFFFF !important; }

.wd-page-content .e-n-tab-title:hover { background-color: #E6E1D8 !important; }

/* The accordion rows on the right use the same widget family. */
.wd-page-content .e-n-accordion-item-title,
.wd-page-content .e-n-accordion-item-title-text { color: #16202E !important; }

/* et-light-chrome — Earth Tab, 2026-08-08.
   The last of the demo's black, found by walking the rendered page for every
   element with a near-black fill rather than by clicking around and hoping:

     .wd-page-wrapper           #1A1A1A  the sheet the whole site sits on
     .elementor-element-2587a27 #000000  the "Shop / Categories" band
     .mobile-nav                #0F0F0F  the slide-out menu
     .cart-widget-side          #0F0F0F  the slide-out cart
     .wd-toolbar                #0F0F0F  the sticky bottom bar on phones

   The last three matter more than they look: they are what a phone visitor
   actually touches, and they were the only dark surfaces left once the pages
   were light — a black drawer sliding over a linen site reads as a bug.

   Delete this block to put the demo's chrome back. */

.wd-page-wrapper.website-wrapper { background-color: #F5F1E9 !important; }

/* Shop banner — same treatment as a page heading, not a coloured band. */
.elementor-element-2587a27 { background-color: #F5F1E9 !important;
  border-bottom: 1px solid #E6E1D8; }
.elementor-element-2587a27 :is(h1, h2, h3, .elementor-heading-title, a, span, p) { color: #16202E !important; }
.elementor-element-2587a27 a:hover { color: #16365E !important; }

/* Slide-out menu and cart: paper drawers. */
.mobile-nav, .cart-widget-side { background-color: #FFFFFF !important; }
.mobile-nav :is(a, span, .wd-nav-opener), .cart-widget-side :is(a, span, p, .wd-heading) { color: #16202E !important; }
.mobile-nav a:hover, .cart-widget-side a:hover { color: #16365E !important; }
.mobile-nav li, .cart-widget-side .widget-heading { border-color: #E6E1D8 !important; }

/* Sticky bottom bar on phones. */
.wd-toolbar { background-color: #FFFFFF !important; border-top: 1px solid #E6E1D8 !important; }
.wd-toolbar :is(a, span) { color: #16202E !important; }
.wd-toolbar .wd-cart-number { background-color: #16365E !important; color: #FFFFFF !important; }

/* et-shop-tools-readable — Earth Tab, 2026-08-08.
   The archive toolbar — breadcrumb, "Show: 9/12/18/24", the grid switcher and
   the Filters opener — still had white glyphs and labels from the dark demo.
   An earlier block caught the per-page links; these are the pieces it missed,
   named from the rendered DOM: .wd-action-text (Filters), the breadcrumb links,
   and the grid-view icons, which are strokes rather than fills.

   Delete this block and the toolbar goes back to white-on-linen. */

.wd-page-content :is(.wd-action-text, .wd-shop-tools a, .wd-breadcrumbs, .wd-breadcrumbs a,
  .wd-products-per-page, .wd-products-per-page a, .wd-ordering, .wd-ordering a) { color: #5F6874 !important; }

.wd-page-content :is(.wd-action-text:hover, .wd-shop-tools a:hover,
  .wd-breadcrumbs a:hover, .wd-products-per-page a:hover) { color: #16365E !important; }

/* Selected page-size and the active grid button read as the current state. */
.wd-page-content .wd-products-per-page a.current,
.wd-page-content .wd-grid-opener.wd-active { color: #16202E !important; font-weight: 700; }

.wd-page-content :is(.wd-shop-tools, .wd-grid-opener, .wd-action-btn) svg { fill: #5F6874 !important;
  stroke: #5F6874 !important; }

/* et-footer-phone-tidy — Earth Tab, 2026-08-08.
   His photo from an iPhone: the block above the sticky bar is cramped and reads
   as low quality. What is in it is NIM's phone footer — three nav menus
   (SHOP / COMPANY / POLICIES) sitting SIDE BY SIDE in one row, each collapsed
   to its own burger toggle. Three toggles across a 390px screen leaves each one
   about a hundred pixels wide, so the labels squeeze, the icons shrink, and the
   whole strip looks like a rendering fault rather than a menu.

   This stacks them: one menu per row, full width, a real 44px tap target each,
   with a hairline between them so they read as a list instead of a smear. The
   type goes up to 12.5px and the letter-spacing comes down, which is most of
   what "more HD" actually means here — nothing in that strip is an image, the
   icons are inline SVG, so there is no resolution to raise. It looked soft
   because it was squeezed.

   Scoped to the footer, to the phone, and to the container that holds the three
   menus. That container id is a handle into someone else's builder: if the
   footer is ever rebuilt the id changes and this block simply stops applying —
   it degrades to nothing rather than to something wrong.

   Delete this block to get the three-across row back. */

@media (max-width: 768px) {
  .elementor-location-footer .elementor-element-841899b {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .elementor-location-footer .elementor-element-841899b > .elementor-widget-nav-menu {
    width: 100% !important;
    max-width: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .elementor-location-footer .elementor-element-841899b
    > .elementor-widget-nav-menu:last-child { border-bottom: 0; }

  /* The toggle is the whole row now, not a button floating in a column. */
  .elementor-location-footer .elementor-element-841899b .elementor-menu-toggle {
    width: 100% !important;
    min-height: 44px;
    justify-content: space-between !important;
    padding: 11px 2px !important;
    font-size: 12.5px !important;
    letter-spacing: .6px !important;
  }
  .elementor-location-footer .elementor-element-841899b .elementor-menu-toggle svg {
    width: 18px; height: 18px;
  }

  /* An opened menu should read as a list under its own heading. */
  .elementor-location-footer .elementor-element-841899b .elementor-nav-menu--dropdown {
    width: 100% !important;
  }
  .elementor-location-footer .elementor-element-841899b
    .elementor-nav-menu--dropdown a {
    padding: 10px 2px !important;
    font-size: 13px !important;
    min-height: 40px;
    display: flex;
    align-items: center;
  }
}

/* et-footer-hide-desktop-bands — Earth Tab, 2026-08-08.
   Second photo from his iPhone, and it settles the argument: the bottom of the
   page shows the copyright line TWICE — once in the phone footer with our
   credit, and again in a black band with the payment icons, which belongs to
   the DESKTOP footer. Both halves of NIM's footer are rendering on his phone,
   so the three squeezed black bands he circled are the desktop layout crushed
   into 390px: the SHOP/COMPANY/POLICIES columns, the four trust badges, and the
   copyright-plus-cards row.

   Their own builder already says those rows are not for phones — every one of
   them carries `elementor-hidden-mobile`. Elementor ships the matching rule
   (`.elementor .elementor-hidden-mobile{display:none}` at max-width:768px) and
   I can fetch it from the server, so the intent and the CSS both exist; on his
   device it is not winning. Rather than spend another hour on why someone
   else's cascade loses, this restates the same intent from our own stylesheet,
   which loads last, with the weight to settle it.

   This hides nothing the site's author did not already mark as hidden on
   phones. It cannot remove content from desktop or tablet — the query stops at
   767px. If a band ever needs to come BACK on phones, the honest fix is to
   untick "hide on mobile" for it in Elementor, not to delete this block.

   Delete this block to hand the argument back to Elementor. */

@media (max-width: 768px) {
  .elementor-location-footer .elementor-hidden-mobile,
  .elementor-location-footer .elementor-hidden-phone { display: none !important; }
}

/* et-preview-top-gap — Earth Tab, 2026-08-08.
   From his phone: a bare tan strip between the header and the hero on the
   preview pages. It is not an element of ours — it is the theme's own spacing
   above the content, showing the linen page background through the gap. Our
   page sits on white, the wrapper behind it is linen, so any space the theme
   leaves at the top reads as a tan bar we did not draw.

   `et-preview-title-off` already hides the page-title bar on these five pages.
   This closes what is left: the wrapper's top spacing, and — belt and braces —
   the wrapper's background, so that if any residual gap survives on a device I
   cannot render, it is white and invisible rather than tan and obvious. I could
   not reproduce the strip in any capture; his screenshot is the evidence, so
   the fix is written to cover the whole class of cause rather than the one
   element I would have guessed.

   Scoped to the five preview page ids. No NIM page is affected, and their own
   pages keep the linen wrapper the retone gave them.

   Delete this block to hand the spacing back to Woodmart. */

body.page-id-3475 :is(.main-page-wrapper, .wd-content-layout, .content-layout-wrapper),
body.page-id-3476 :is(.main-page-wrapper, .wd-content-layout, .content-layout-wrapper),
body.page-id-3376 :is(.main-page-wrapper, .wd-content-layout, .content-layout-wrapper),
body.page-id-3377 :is(.main-page-wrapper, .wd-content-layout, .content-layout-wrapper),
body.page-id-3378 :is(.main-page-wrapper, .wd-content-layout, .content-layout-wrapper) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.page-id-3475 .wd-page-content,
body.page-id-3476 .wd-page-content,
body.page-id-3376 .wd-page-content,
body.page-id-3377 .wd-page-content,
body.page-id-3378 .wd-page-content { background-color: #FFFFFF !important; }

/* et-footer-phone-menus-open — Earth Tab, 2026-08-08.
   His photo of the phone footer, second pass. The three menus in NIM's phone
   footer (SHOP / COMPANY / POLICIES, widgets 5cfe0ec / a1f806d / 3427372) are
   configured as Elementor BURGER toggles, and an Elementor burger toggle draws
   the icon ONLY — there is no label beside it. On a phone that renders as three
   identical hamburger glyphs stacked in a dark strip with nothing to say what
   they are. Nobody taps an unlabelled icon three times to find out, so the
   whole footer navigation — eight links: Shop, FAQS, Contact us, About, Terms
   and Conditions, Refund Policy, Privacy Policy, COAS — is effectively dead on
   mobile. That is also why the strip reads as a rendering fault rather than a
   menu: it has no words in it.

   `et-footer-phone-tidy` stacked those toggles so each got a full-width row.
   This finishes the job: on phones the toggle disappears and the list it was
   hiding is simply open, which is what a footer is for. Nothing is added and
   nothing is invented — these are their own menus, their own link text, shown
   instead of hidden.

   The mechanics: Elementor collapses an inactive toggle's container with
   `max-height:0; transform:scaleY(0)` rather than `display:none`, so unhiding
   it means undoing those three properties, not flipping a display. The
   dropdown's own white background (`.elementor-nav-menu--dropdown{background-
   color:#fff}`) has to go transparent as well, or an open list paints a white
   panel into the navy footer.

   Scoped to the footer, to the phone, and to container 841899b — the same
   handle `et-footer-phone-tidy` uses. If the footer is rebuilt the id changes
   and this block stops applying: it degrades to nothing, not to something
   wrong. Desktop and tablet are untouched; their real column footer still runs
   there.

   Delete this block to put the three hamburgers back. */

@media (max-width: 768px) {
  .elementor-location-footer .elementor-element-841899b .elementor-menu-toggle {
    display: none !important;
  }

  .elementor-location-footer .elementor-element-841899b
    .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container,
  .elementor-location-footer .elementor-element-841899b
    .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  .elementor-location-footer .elementor-element-841899b
    .elementor-nav-menu--dropdown {
    display: block !important;
    background-color: transparent !important;
    font-size: inherit !important;
  }

  /* Their link rows: a real 44px target, aligned with the rest of the column. */
  .elementor-location-footer .elementor-element-841899b
    .elementor-nav-menu--dropdown .elementor-item {
    padding: 11px 0 !important;
    min-height: 44px;
    border: 0 !important;
    font-size: 13px !important;
    letter-spacing: .2px !important;
  }

  /* The dropdown's hover fill is a grey box from Elementor's defaults; on ink
     it reads as a smudge. Keep the state, drop the box. */
  .elementor-location-footer .elementor-element-841899b
    .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-location-footer .elementor-element-841899b
    .elementor-nav-menu--dropdown .elementor-item:focus,
  .elementor-location-footer .elementor-element-841899b
    .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: transparent !important;
    color: #FFFFFF !important;
  }

  /* One menu per block, separated the way et-footer-phone-tidy separates them. */
  .elementor-location-footer .elementor-element-841899b
    > .elementor-widget-nav-menu { padding: 4px 0 !important; }
}

/* et-header-hide-no-strip — Earth Tab, 2026-08-08.
   His question from an iPhone: "when scrolling down, the header disappears",
   with a photo of an empty tan band left behind. His call, same day: keep the
   hiding, lose the band.

   WHAT IT ACTUALLY IS, measured on a 390x844 render rather than reasoned about.
   Their header is Woodmart's `whb-hide-on-scroll` (their setting, not our
   retone), and the element `header.whb-header` is `position: sticky` with
   height 81px, `padding-top: 80px` and background rgb(245,241,233) — the linen.
   The visible bar, `.whb-main-header`, is `position: absolute` INSIDE that box.
   So hiding slides the BAR out from under the box and the box stays pinned to
   the top of the screen: an 81px strip of linen with nothing in it. The header
   is not what he was looking at; its container is.

   THE FIX. While the bar is away — Woodmart marks that state by putting
   `whb-scroll-down` on the same element — the box goes transparent and stops
   taking taps. The page then runs the full height of the screen and scrolls
   visibly through where the strip was. Nothing moves: the box keeps its size
   and its place in the flow, so there is no jump on the way down or back up,
   and the fade is timed to the .3s the bar already takes to slide.

   Deliberately NOT done: collapsing the padding (that shifts the whole document
   by 80px every time you change scroll direction), and touching their
   hide-on-scroll setting at all — he wants the hiding kept.

   Not scoped to phones: the same strip appears at any width the header hides
   at, and the rule keys off the state class rather than a breakpoint.

   Delete this block to get the tan strip back. */

.whb-header.whb-scroll-down {
  background-color: transparent !important;
  pointer-events: none;
  transition: background-color .3s ease;
}

/* Coming back up, the bar is live again the moment the state class goes. */
.whb-header.whb-scroll-up,
.whb-header:not(.whb-scroll-down) { pointer-events: auto; }

/* et-product-grid-price — Earth Tab, 2026-08-08.
   The tiles on our two pages now come from [nim_products] (child theme block
   et-product-grid), and the price comes through WooCommerce's own markup so a
   sale price or a price range still renders correctly on a product we have
   never seen. That markup nests the amount in its own span, and the demo paints
   `.woocommerce-Price-amount` WHITE globally — so on the white card the number
   vanished and only the currency symbol, which carries its own colour, stayed
   visible. Caught by rendering the page: reading the DOM text returned
   "$119.99" quite happily, because the text was there and simply could not be
   seen.

   This paints the whole price, whatever WooCommerce nests inside it, and gives
   a struck-through old price the quieter grey used elsewhere.

   Delete this block and the amount goes white-on-white again. */

.et-ln .price,
.et-ln .price *,
.et-ln .price bdi { color: #16202E !important; }

.et-ln .price del,
.et-ln .price del * { color: #5F6874 !important; }

.et-ln .price ins { text-decoration: none !important; }

/* et-a11y-contrast — Earth Tab, 2026-08-08.
   From the WCAG 2.2 AA pass run on the rendered pages at 390px, before
   go-live. Two pieces of text failed the contrast minimum, and BOTH are ours —
   the retone turned the surfaces pale and these two carried a colour that only
   worked on the demo's black.

   1. "RETURN TO SHOP" in the cart drawer: ink #16202E sitting on the navy
      accent #16365E, ratio 1.35 against a required 4.5. A button whose label
      you cannot read is not a button. Its label goes white, which is what the
      navy was designed for.

   2. "Shop" as the current crumb in the shop breadcrumb: still white from the
      demo, now on linen — ratio 1.13, i.e. invisible. et-product-page fixed
      the crumbs on PRODUCT pages; the archive was missed because the crumb
      there is a different element. Same grey as every other quiet label.

   The heading rule at the bottom is the other half of an accessibility fix: All
   Peptides opened at H2 with no H1 on the page, so its own title was not the
   document's heading. The markup now carries an H1 and this gives it exactly
   the size the H2 had — 32px/800/-0.9px — so nothing moves on screen.

   Delete this block and the two invisible labels come back. */

.btn.btn-accent,
.btn.btn-accent:hover,
.btn.btn-accent:focus,
.btn.btn-accent span { color: #FFFFFF !important; }

.wd-breadcrumbs .wd-last,
.wd-page-content .wd-breadcrumbs .wd-last { color: #5F6874 !important; }

.et-ln .shead h1 {
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.9px !important;
  color: #16202E !important;
}

/* et-footer-bottom-bar — Earth Tab, 2026-08-08.
   His screenshot of the desktop footer's bottom bar: "sleeker, maybe one line,
   less dead space". It was 122px tall and mostly air. Three reasons, all
   measured on the rendered page rather than guessed:

   · the copyright column was 274px wide, so a 58-character line wrapped onto
     two rows;
   · the policy nav had 498px for four links that need more, so it wrapped into
     a 2x2 grid with a gap down the middle — the dead space he circled;
   · the payment strip is a background IMAGE 348px wide, and its column was
     stretching to the full height of the row.

   So the fix is width, not decoration: give the copyright enough room to stay
   on one line, give the links enough to sit in one row, hold the card strip to
   its own height, centre the three against each other and take the vertical
   padding down. Nothing is removed and no wording changes — it is the same bar
   on one line instead of three.

   Desktop only. Phones never see this row; their footer is the other half of
   the template, handled by et-footer-real-text.

   The column split is 30/50/20 rather than the builder's 24/44/31: measured on
   the page, the four links need 540px in one row and the copyright needs 340,
   so the widths follow the content instead of the other way round.

   Delete this block to get the tall bar back. */

@media (min-width: 1025px) {

  .elementor-location-footer .elementor-element-a0010de > .e-con-inner {
    align-items: center !important;
    gap: 18px !important;
    padding-block: 14px !important;
  }

  .elementor-location-footer .elementor-element-349b288 { width: 31% !important; }
  .elementor-location-footer .elementor-element-0488430 { width: 47% !important; }
  .elementor-location-footer .elementor-element-7fc3b11 { width: 22% !important; }

  .elementor-location-footer .elementor-element-349b288 p,
  .elementor-location-footer .elementor-element-87fc1e9 p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  /* Four links, one row. */
  .elementor-location-footer .elementor-element-62b274a .elementor-nav-menu {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .elementor-location-footer .elementor-element-62b274a .elementor-item {
    padding: 4px 6px !important;
    font-size: 11px !important;
    letter-spacing: .3px !important;
    white-space: nowrap !important;
  }

  /* The card marks were a 1536x1024 canvas with the five logos in a narrow band
     across the middle and transparent space above and below. Fitted to a box,
     that empty space set the height of the entire bar — it IS the dead space.
     Same five marks, cropped to their own edges (1420x150, transparency intact,
     saved as nim-payment-marks.png in their library), so 26px of height now
     shows the logos at 26px instead of at nine. The original file is untouched
     and still in the library. */
  .elementor-location-footer .elementor-element-7fc3b11 {
    min-height: 0 !important;
    height: 26px !important;
    background-image: url(https://nimpeptides.com/wp-content/uploads/2026/08/nim-payment-marks.png) !important;
    background-position: right center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}

/* et-footer-real-text — Earth Tab, 2026-08-08.
   BREAKPOINT NOTE (added the same day): these phone blocks are cut at 768px,
   not 767, because that is where ELEMENTOR cuts. Their footer is built twice
   and swapped by Elementor's own hidden-mobile / hidden-desktop classes at
   max-width:768px, so a rule stopping at 767 leaves a one-pixel-wide device
   class — an iPad at exactly 768 — showing the phone footer with none of our
   phone fixes on it. Measured at 768: the three screenshot strips were still
   there. Match their boundary, not a rounder-looking number.
   The client's answer, via Dimitrios: build the three picture strips as real
   text and links.

   What was there: three empty 50px spacers wearing screenshots of the DESKTOP
   footer as background images — Screenshot_84 (the SHOP / COMPANY / POLICIES
   bar), Screenshot_81 (the trust badges) and Screenshot_83 (the copyright and
   card logos). Nothing in them was text, nothing was tappable, and the
   copyright appeared twice because the picture carried one and the real line
   carried the other.

   What replaces them, and where each piece comes from — all of it NIM's own
   content, none of it written by us:

   · The trust badges are not rebuilt, they are UNHIDDEN. Their desktop footer
     already holds the real thing — four SVG icons with "Research Use Only",
     "Lab Tested in USA", "Discreet Shipping" and "SSL Secure" as live text.
     It carries `elementor-hidden-mobile`, so a phone got the photograph of it
     instead. This shows the real one and stacks it one per row.
   · The SHOP / COMPANY / POLICIES headings are printed above the three menus
     they belong to, by the companion block et-footer-real-text in
     functions.php. The words are lifted from their own desktop footer
     headings.
   · The copyright is NOT rebuilt: the phone footer already carries a real one.
     The picture was simply a second copy, and it goes.

   THE CARD LOGOS ARE DELIBERATELY NOT REPLACED. Visa, Mastercard, Amex,
   Discover and Google Pay exist nowhere on this site as real elements — only
   inside Screenshot_83. Transcribing a payment-methods claim out of a
   photograph into fresh text would be us asserting something we have not
   verified at their checkout. Flagged for the client instead: if they want the
   marks on phones, we add the real icons once they confirm the list.

   Delete this block and the three photographs come back. */

@media (max-width: 768px) {

  /* The three screenshots, out. */
  .elementor-location-footer .elementor-element-5e6caaf,
  .elementor-location-footer .elementor-element-1704c81,
  .elementor-location-footer .elementor-element-34b3f46 { display: none !important; }

  /* Their real trust band, in — one per row, and beating the blanket
     hide-on-mobile rule that et-footer-hide-desktop-bands applies to the
     desktop leftovers. This is the one band whose content phones should have. */
  .elementor-location-footer .elementor-element-c461a58.elementor-hidden-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 0 14px !important;
  }
  /* Their desktop layout puts an empty 55px container between each badge, as
     the gap between columns. Stacked on a phone those become four blank rows —
     the dead space, not the content. Out. */
  .elementor-location-footer .elementor-element-c461a58 .elementor-element-0036fab,
  .elementor-location-footer .elementor-element-c461a58 .elementor-element-3bbdf72,
  .elementor-location-footer .elementor-element-c461a58 .elementor-element-e50c093,
  .elementor-location-footer .elementor-element-c461a58 .elementor-element-49621ed,
  .elementor-location-footer .elementor-element-c461a58 .elementor-element-7a731df { display: none !important; }

  .elementor-location-footer .elementor-element-c461a58 .elementor-element-4db2fe2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .elementor-location-footer .elementor-element-c461a58 .elementor-widget-icon-box {
    width: 100% !important;
    max-width: none !important;
  }

  /* One badge per row: icon left at a phone-sized 20px, wording beside it. */
  .elementor-location-footer .elementor-element-c461a58 .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 11px !important;
    text-align: start !important;
    padding: 10px 2px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .elementor-location-footer .elementor-element-c461a58 .elementor-widget-icon-box:last-of-type .elementor-icon-box-wrapper { border-bottom: 0; }
  .elementor-location-footer .elementor-element-c461a58 .elementor-icon-box-icon {
    margin: 1px 0 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .elementor-location-footer .elementor-element-c461a58 .elementor-icon-box-icon svg,
  .elementor-location-footer .elementor-element-c461a58 .elementor-icon-box-icon i {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
  }
  .elementor-location-footer .elementor-element-c461a58 .elementor-icon-box-content { flex: 1 1 auto !important; }
  .elementor-location-footer .elementor-element-c461a58 :is(.elementor-icon-box-title, .elementor-icon-box-title a, .elementor-icon-box-title span) {
    margin: 0 0 2px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .7px !important;
  }
  .elementor-location-footer .elementor-element-c461a58 .elementor-icon-box-description {
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  /* The headings the companion block prints above each footer menu. */
  .elementor-location-footer .et-footer-heading {
    margin: 14px 0 2px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
  }
}

/* et-cart-checkout-readable — Earth Tab, 2026-08-08.
   THE ONE THAT SHOULD HAVE STOPPED THE REVIEW, found by the pre-launch panel.

   With a real item in the basket, every price on the cart and the checkout was
   WHITE ON LINEN — 1.13:1 against a 4.5 minimum, i.e. invisible — and the
   "Proceed to checkout" button was ink #16365E on #16365E, a ratio of 1.00: a
   navy rectangle with no words on it. A customer reaching the cart saw no
   prices, no total, and no button.

   WHY WE DID NOT SEE IT. Every earlier check of these two pages ran with an
   EMPTY basket. An empty cart has no prices to be invisible and an empty
   checkout 302s to the cart, so the pages measured clean and I reported them
   clean. The site was never clean; the test was. Build a cart before you
   measure anything on either page — this is the third time an empty basket has
   produced a false pass on this project.

   WHY IT HAPPENS. The theme paints money in its own colour on the element
   itself — `.woocommerce-Price-amount`, its `bdi`, its currency symbol — so
   telling the surrounding `td` to be ink, which the retone did, changes
   nothing: the inner span brings its own white. And our own line
   `.wd-page-content .elementor-widget a:not(.elementor-button){color:#16365E}`
   catches `a.checkout-button`, which is an anchor inside an Elementor widget
   but is a BUTTON, so it painted the label the same navy as its own fill.

   Everything here is scoped to the cart and checkout pages, or to the specific
   control named. Nothing touches the dark banner images or the product pages.

   Delete this block and the prices go white again. Don't. */

/* Money, wherever the theme paints it. */
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-content
  :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, .amount, bdi),
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-content
  :is(td, th, tr) :is(span, bdi, ins, del) { color: #16202E !important; }

body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-content del,
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-content del * { color: #5F6874 !important; }

/* The totals table labels: Woodmart prints some of them from a ::before on the
   cell, which inherits the cell's colour rather than the row's. */
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-content
  :is(td, th)::before { color: #16202E !important; }

/* The button that takes the money. White label on the navy fill it was
   designed for — measured 12.19:1. */
.wd-page-content a.checkout-button,
.wd-page-content a.checkout-button span,
.wd-page-content .wc-proceed-to-checkout a,
.wd-page-content .wc-proceed-to-checkout a span,
.cart-widget-side .buttons a.checkout,
.cart-widget-side .buttons a.checkout span,
.cart-widget-side a.btn-checkout,
.cart-widget-side a.btn-checkout span { color: #FFFFFF !important; }

/* The coupon toggle is the only way to open the coupon field, and it was the
   same white as the prices. */
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-content
  :is(a.showcoupon, .showlogin) { color: #16365E !important; }

/* "(optional)" was white at half opacity; the required asterisk was a red that
   only worked on black. */
.wd-page-content span.optional { color: #5F6874 !important; }
.wd-page-content .required,
.wd-page-content abbr.required { color: #B3261E !important; }

/* The count in the header cart. A blanket rule on the slide-out cart was
   winning over the header's own white, so a real "1" rendered ink-on-navy. */
.whb-header .wd-cart-number,
.whb-header .wd-tools-count,
.cart-widget-side .wd-cart-number { color: #FFFFFF !important; }

/* et-cart-checkout-readable-2 — Earth Tab, 2026-08-08.
   The three the first pass did not beat, each one lost on SPECIFICITY rather
   than on being wrong. Written out because the next person will hit the same
   wall:

   · The cart count in the header. Our own et-light-header carries
     `.whb-header .whb-color-light .wd-tools-element > a span` — four classes —
     which paints every span in the header ink, including the count inside the
     navy chip. A rule of `.whb-header .wd-cart-number` is only two classes and
     loses. Matched here at five.
   · "Proceed to checkout". Our et-light-body-copy carries
     `.wd-page-content .elementor-widget a:not(.elementor-button)`, and a
     `:not()` counts its argument, so that is three classes plus an element.
     The button is an anchor inside an Elementor widget, so it matched, and the
     label took the same navy as the fill. Matched here at four classes.
   · The payment box. The client's own `.payment_box{background:#05080e}` was
     coherent on their black site; on cream it is a black island holding the
     one paragraph that tells a customer their card is handled securely, at
     3.55:1. Repainted to paper, with its type in ink, so it reads as part of
     the page it is now on.

   Delete this block and those three go back to being unreadable. */

.whb-header .whb-color-light .wd-tools-element > a span.wd-cart-number,
.whb-header .whb-color-light .wd-header-cart .wd-cart-number { color: #FFFFFF !important; }

.wd-page-content .elementor-widget a.checkout-button.button,
.wd-page-content .elementor-widget a.checkout-button.button span,
.wd-page-content .elementor-widget .wc-proceed-to-checkout a.button { color: #FFFFFF !important; }

body.woocommerce-checkout .wd-page-content .payment_box,
body.woocommerce-checkout .wd-page-content li.wc_payment_method .payment_box {
  background-color: #FFFFFF !important;
  border: 1px solid #E6E1D8 !important;
}
body.woocommerce-checkout .wd-page-content .payment_box,
body.woocommerce-checkout .wd-page-content .payment_box :is(p, span, label, li, div) { color: #16202E !important; }
body.woocommerce-checkout .wd-page-content .payment_box a { color: #16365E !important; }

/* The asterisk that marks a required field: the demo's red only worked on
   black. This one clears 4.5:1 on both the paper form and any dark island. */
.wd-page-content :is(.required, abbr.required),
.wd-page-content :is(td, th, label, p) :is(.required, abbr.required) { color: #B3261E !important; }

/* et-footer-phone-order — Earth Tab, 2026-08-08.
   His photo of the phone footer, third pass: "please clean this up."

   Measured on a 390x844 render rather than argued about. Four faults, all of
   them ours, none of them in their content:

   · THE COPYRIGHT WAS STRANDED IN THE MIDDLE. Their phone footer is one
     Elementor container (e2db520) holding two blocks: e23c990 — logo,
     Research-Use-Only disclaimer, social icons and the copyright — followed by
     e9a6545, the STAY INFORMED signup and the three menus. So the line that
     closes a page was printing halfway up it, with the newsletter and eight
     links underneath. Nothing was wrong with the line; it was in the wrong
     place, and no amount of styling fixes an order.
   · THE FORM AND THE FIRST HEADING COLLIDED. Measured: the signup form's box
     ends at 6412 and the SHOP heading starts at 6410 — minus two pixels. The
     heading's own 14px top margin sits INSIDE container 841899b, which starts
     before the form has finished, so the margin buys nothing. It has to go on
     the container, not the heading.
   · STAY INFORMED WAS THE LOUDEST THING ON THE PAGE at 32px/800 — heavier than
     any heading on the home page above it, for a mailing-list box.
   · AN EMPTY 60px BLOCK (60962e6) sat below the trust badges, holding open dead
     space above the sticky bottom bar.

   WHAT THIS BLOCK DOES: puts the phone footer in reading order —

       trust badges  ·  signup  ·  links  ·  logo + disclaimer + socials  ·  copyright

   done with flex `order` at the two levels where the elements are genuine
   siblings, because CSS cannot lift a grandchild past its parent and we are not
   going to fake it by printing a second copyright and hiding the first. The
   copyright is the SAME element it always was; it is now last because the block
   that carries it is last.

   WHAT THIS BLOCK DOES NOT DO: their menus. SHOP as a heading over a single
   link named Shop reads as a duplication, and it is — but it is theirs: their
   desktop footer is built the same way, from their own three menus. Changing
   the information architecture of a client's footer is a decision to bring
   them, not a tidy-up to slip into a CSS block. Flagged, left alone.

   Link rows are untouched at 44px: that is the tap target
   `et-footer-phone-menus-open` set deliberately, and the airiness is the
   accessibility minimum doing its job, not a spacing bug.

   Scoped to the footer and to phones at the 768px cut Elementor itself uses.
   If the footer is rebuilt the ids change and this stops applying — it degrades
   to nothing, not to something wrong.

   Delete this block and the copyright goes back to the middle. */

@media (max-width: 768px) {

  /* ---- Level one: the footer's own children. ---- */
  .elementor-location-footer {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Their trust band opens the footer; the phone block follows it. */
  .elementor-location-footer > .elementor-element-c461a58 { order: 1 !important; }
  .elementor-location-footer > .elementor-element-e2db520 { order: 2 !important; }
  /* The empty 60px block, out. */
  .elementor-location-footer > .elementor-element-60962e6 { display: none !important; }

  /* ---- Level two: inside the phone block. ---- */
  .elementor-location-footer .elementor-element-e2db520 > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Signup and links first... */
  .elementor-location-footer .elementor-element-e2db520 > .e-con-inner
    > .elementor-element-e9a6545 { order: 1 !important; }
  /* ...then logo, disclaimer, socials and — last on the page — the copyright. */
  .elementor-location-footer .elementor-element-e2db520 > .e-con-inner
    > .elementor-element-e23c990 { order: 2 !important; margin-top: 26px !important; }

  /* ---- The collision. The gap belongs on the container, not the heading. ---- */
  .elementor-location-footer .elementor-element-841899b { margin-top: 22px !important; }

  /* ---- A signup box should not out-shout the page. ---- */
  .elementor-location-footer .elementor-element-06a5100 .elementor-heading-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    letter-spacing: .6px !important;
  }

  /* ---- Headings quieter than the links they head, so the eye reads the
         group label first and the links as the content. ---- */
  .elementor-location-footer .et-footer-heading {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .55) !important;
    margin: 20px 0 2px !important;
  }
  .elementor-location-footer .elementor-element-841899b
    > .elementor-widget-nav-menu:first-of-type .et-footer-heading { margin-top: 0 !important; }

  /* ---- The closing line: ruled off, and no orphaned "Earth Tab".

         At 14px the line ran to two lines and left "Earth Tab" alone on the
         second — measured 12px fits it on one, 35px to 355px inside a 340px
         column. The bottom padding is not decoration: their back-to-top button
         is fixed to the bottom-right of the screen, and at the end of the page
         it was sitting on top of the last two words. The padding gives the
         button empty navy to float over instead of the copyright. ---- */
  .elementor-location-footer .elementor-element-e7a0c0d {
    margin-top: 18px !important;
    padding: 16px 0 42px !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
  }
  .elementor-location-footer .elementor-element-e7a0c0d p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

/* et-page-canvas — Earth Tab, 2026-08-10.
   Measured at cutover: on staging `.wd-page-content` is linen #F5F1E9 on every
   page; on live the same element is near-black (#02060F, #000 on products).
   That difference does NOT come from our CSS — it is a Woodmart THEME OPTION
   that was changed on staging and lives in staging's database, so the
   change-set port could not carry it. Left alone it makes every price and
   table cell on cart and checkout ink-on-black: 1.24:1, unreadable, with a
   real basket.

   Reproduced here as a block rather than by editing their theme options, so it
   is visible, named and reversible like the rest. The two Earth Tab pages keep
   their own white canvas — `et-preview-top-gap` is page-id scoped and outranks
   this. Delete this block to hand the canvas back to Woodmart's setting. */
.wd-page-content { background-color: #F5F1E9 !important; }

/* Same cause, second element: the sticky header BOX behind the visible bar is
   linen on staging and near-black on live. `.whb-header.whb-scroll-down`
   (0,2,0) still outranks this (0,1,1), so hide-on-scroll keeps making the box
   transparent — the strip fix is unaffected. */
header.whb-header { background-color: #F5F1E9 !important; }

/* et-a11y-focus-ring — Earth Tab, 2026-08-10 (revised same day).
   Keyboard focus was INVISIBLE here: the theme drew a white dotted ring which
   over the white product cards computes 1.00:1 against a required 3:1, and a
   focused-vs-blurred pixel diff on the header controls returned 0 changed
   pixels. WCAG 2.4.7 (AA) and 2.4.13.

   FIRST ATTEMPT WAS WRONG and the correction is the point of this comment: an
   OUTSET ring is invisible on the product cards because `.card` carries
   `overflow: hidden`, so both the outline and its halo are clipped at the card
   edge. Measured, not guessed — the rule was winning the cascade the whole
   time and still could not be seen. Anything inside a clipping container needs
   an INSET ring.

   So: inset double ring (ink + white) on the card links, outset double ring
   everywhere else where nothing clips. Only on :focus-visible, so a mouse
   click never draws it. Delete this block to hand focus back to Woodmart. */

/* Inside clipping containers — draw the ring INWARD. */
a.cardlink:focus-visible,
.card a:focus-visible,
.wd-product a:focus-visible {
  outline: 3px solid #16202E !important;
  outline-offset: -3px !important;
  box-shadow: inset 0 0 0 6px #FFFFFF, inset 0 0 0 9px #16202E !important;
}

/* Everywhere else — the ring can sit outside the box. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #16202E !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 8px #16202E !important;
  border-radius: 3px;
}

/* On the near-black chrome the halo inverts: white inside, ink outside. */
.whb-header :where(a, button):focus-visible,
footer :where(a, button):focus-visible {
  outline: 3px solid #FFFFFF !important;
  box-shadow: 0 0 0 6px #16202E, 0 0 0 8px #FFFFFF !important;
}

/* et-mobile-search-visible — 13 August 2026
   The off-canvas mobile menu carries Woodmart's `color-scheme-light`, which
   means "paint the text light, because the panel behind it is dark". The panel
   is white. The menu LINKS were re-inked by an earlier block and read fine; the
   search block never was, so it kept the light scheme. Measured on LIVE at
   390px on 13 Aug 2026: input background rgba(0,0,0,0), text AND placeholder
   rgba(255,255,255,0.7), border 0, submit icon rgba(255,255,255,0.7). White on
   white — the field was present and tappable and completely unseeable, which is
   exactly what he reported.

   This gives it a real field: white fill, grey border, dark ink, a readable
   placeholder and a dark magnifier. Heights are chosen to preserve the existing
   70px block (46px input + 12px padding top and bottom) so nothing below it
   shifts. Scoped to `.mobile-nav.wd-side-hidden` ONLY — the header search and
   the desktop search keep the theme's own styling.

   Deleting this block restores the invisible field and changes nothing else. */
.mobile-nav.wd-side-hidden .wd-search-form {
  padding: 12px 15px;
}
.mobile-nav.wd-side-hidden .wd-search-form form.searchform {
  background-color: #ffffff;
  border: 1px solid #c9cdd3;
  border-radius: 6px;
  overflow: hidden;
}
.mobile-nav.wd-side-hidden .wd-search-form form.searchform input[type="search"],
.mobile-nav.wd-side-hidden .wd-search-form form.searchform input.s {
  height: 46px;
  padding: 0 46px 0 14px;
  color: #1d2530 !important;
  background-color: transparent !important;
  border: 0 !important;
}
.mobile-nav.wd-side-hidden .wd-search-form form.searchform input[type="search"]::placeholder,
.mobile-nav.wd-side-hidden .wd-search-form form.searchform input.s::placeholder {
  color: #6a7280 !important;
  opacity: 1;
}
.mobile-nav.wd-side-hidden .wd-search-form form.searchform .searchsubmit,
.mobile-nav.wd-side-hidden .wd-search-form form.searchform .searchsubmit:hover {
  color: #1d2530 !important;
}


/* et-coa-page-fixes — Earth Tab, 2026-09-04. Two of the six corrections NIM sent
   on September 4 2026 (NIM_BioLabs_COA_Page_Corrections_UPDATED.pdf), plus the
   same defect as item 4 in the second place it shows.

   ITEM 4, the COA search bar. The Woodmart search widget on /coas/ renders as
   `<div class="wd-el-search woodmart-ajax-search wd-color-">` — the colour
   scheme half of that class is EMPTY because the widget has no colour_scheme
   set, so the field falls back to the light-on-dark defaults and paints its
   typed text, its placeholder and its submit icon in white. The band behind it
   is cream. Measured on the live page before this block: typed text and icon
   rgba(255,255,255,.8), placeholder rgba(255,255,255,.6) — a search box you can
   only find by clicking where you guess it is.

   THE SAME COLOUR LANDS ON THE RELATED-POSTS EXCERPT under every COA article
   (`.wd-post-excerpt`, also rgba(255,255,255,.8) on cream). The client only
   reported the search bar because that is the one they tried to use, but it is
   one defect in two places and fixing the half they noticed would leave the
   other half invisible.

   ITEM 5, the cards on /coas/ being "too zoomed in and cropped". The widget's
   own item-ratio is the real cause and is fixed in the Elementor data by
   scripts/nim_wp_coas_page.py, not here. This block is the belt to that
   braces, and it is what the client's own last bullet asked for in words:
   "use a contain-style image treatment rather than cover/crop if the current
   CSS is causing the zoom". Elementor absolutely-positions the thumbnail and
   centres it with a transform, so a square vial in a 3:2 box loses its cap off
   the top and its base off the bottom.

   Deleting this block restores: a white-on-cream search field, white-on-cream
   related-post excerpts, and cover-cropped COA cards.

   Colours are the site's own ink (#333, the theme's --btn-default-color), not
   a new value introduced here — item 4's last bullet asks for the styling to
   stay consistent with the rest of the site. */

/* --- item 4: the search field on /coas/ ------------------------------------ */
/* Scoped to the element search widget. The HEADER search (wd-header-search-form)
   sits on a white bar and is already correct — widening this to every .searchform
   would repaint a control the client did not report and did not ask about. */
.wd-el-search .searchform input.s,
.wd-el-search .searchform input[type="search"] {
	color: #333;
}

/* ::placeholder has to be its own rule. An unrecognised pseudo-element in a
   selector list invalidates the WHOLE list in every browser, so grouping it
   with the line above would silently drop the typed-text fix too. opacity:1
   because Firefox dims placeholders by default and .6 of an already-dimmed
   grey is back to unreadable. */
.wd-el-search .searchform input.s::placeholder,
.wd-el-search .searchform input[type="search"]::placeholder {
	color: rgba(51, 51, 51, .65);
	opacity: 1;
}

.wd-el-search .searchform .searchsubmit,
.wd-el-search .searchform button[type="submit"] {
	color: #333;
}

/* --- item 4, second location: related-post excerpts under a COA ------------ */
.wd-posts .wd-post-excerpt,
.wd-posts .wd-post-excerpt p {
	color: #333;
}

/* --- item 5: the COA cards -------------------------------------------------- */
/* The vial photographs are 1254x1254 squares. With the widget ratio set square
   (nim_wp_coas_page.py) this rule is what keeps the whole vial inside the box
   rather than filling it: `contain` letterboxes, `cover` is what cropped the
   cap. White behind it because the photographs are cut out on white, so the
   letterbox is invisible rather than a grey bar. */
.elementor-posts-container .elementor-post__thumbnail img {
	object-fit: contain;
	background-color: #fff;
}

/* Elementor centres the thumbnail with `top:calc(50% + 1px); left:calc(50% + 1px)`
   and a transform. That +1px is a rounding nudge for cover-cropped art; with a
   contained image it shows as a one-pixel seam of card border along two edges. */
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
	top: 50%;
	left: 50%;
}


/* et-coa-library — Earth Tab, 2026-09-04. Two things the new /coa-library/ page
   needs to look like the /coas/ page it is the other half of. Item 6 of the
   client's September 4 corrections; the page is built by
   scripts/nim_wp_coa_library_page.py.

   1. THE NINTH DARK BANNER. The block above ("The eight dark banners, restored")
      flips all Elementor type to ink, then exempts each dark banner by page id.
      /coa-library/ copies its banner from /coas/, so it inherited the banner and
      not the exemption: the copied hero rendered #16202E headings on a navy
      photograph — legible only if you already knew what it said. Same rule, one
      more page. Its element id is `etcoalibhero`, written by the script rather
      than assigned by the builder, so unlike the eight above it does NOT change
      if somebody re-saves the page — it changes only if that script changes.

   2. THE DOUBLE TITLE. Woodmart prints its own page-title bar with a breadcrumb
      above the content. /coas/ has that bar switched off in the theme's per-page
      options, which is why it opens straight onto the navy band. Those options
      are theme post-meta that the REST API does not expose, so the page could
      not be created with the bar already off, and the page opened with a plain
      "COA Library" heading stacked on top of the banner saying the same thing.
      Hidden here rather than left as two titles.

   Deleting this block gives back: dark-on-dark headings in the library banner,
   and a duplicate title bar above it. */

body.page-id-3650 .wd-page-content .elementor-element-etcoalibhero :is(p, li, span, h1, h2, h3, h4, .elementor-heading-title) {
	color: #FFFFFF !important;
}

/* Scoped to the one page id. `.wd-page-title` is the template used across the
   whole site, so an unscoped rule here would take the title off every blog post
   and archive on nimpeptides.com. */
body.page-id-3650 .wd-page-title {
	display: none;
}