/*
Theme Name: MOKALUN Child
Template: astra
Version: 0.1.0
*/
:root{--ink:#17221d;--accent:#b56832;--paper:#fffaf4;--accent-hover:#17221d;--hairline:#c9ad96;--surface:#f5e8dc;--muted:#5f6a64;--on-accent:#ffffff;--font-sans:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--text-base:1rem;--text-sm:.875rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;--text-3xl:2.25rem;--weight-normal:400;--weight-medium:600;--weight-bold:700;--leading-tight:1.25;--leading-snug:1.4;--leading-normal:1.6;--space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--space-6:3rem;--radius-sm:.3rem;--radius-md:.5rem;--radius-lg:.75rem;--shadow-card:0 .125rem .5rem rgba(23,34,29,.12);--focus-ring:2px solid var(--accent);--bp-mobile:768px;--bp-tablet:1024px}*{box-sizing:border-box}body{color:var(--ink);background:var(--paper);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-normal);line-height:var(--leading-normal)}.site-main,.site-footer,.site-header{max-width:1200px;margin:auto;padding:1rem}
/* T5-1.2 product gallery placeholder */
.afn-product-placeholder{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;margin:0;padding:0;background:var(--paper);overflow:hidden}
.afn-product-placeholder img,.afn-product-placeholder__img{display:block;width:100%;max-width:100%;height:100%;object-fit:contain;border:0}
/* ===== T5-1.6 product desktop (BEGIN) ===== */
/* scoped to the single-product page only; no global or shop or policy rules */
.single-product .afn-product-placeholder{border:1px solid #c9ad96;border-radius:.5rem;background:var(--paper)}
/* two column layout: gallery left and summary right; widths include padding via border-box */
body.single-product #content .ast-woocommerce-container div.product div.images,body.single-product #content .ast-woocommerce-container div.product div.summary{width:48%}
body.single-product #content .ast-woocommerce-container div.product div.images{float:left;margin:0 0 2em}
body.single-product #content .ast-woocommerce-container div.product div.summary{float:right;margin:0 0 2em}
/* selling points list with a pure css accent marker */
.single-product .afn-selling-points{list-style:none;margin:1.25rem 0 1.5rem;padding:0;display:grid;gap:.7rem}
.single-product .afn-selling-points .afn-selling-point{position:relative;margin:0;padding:0 0 0 1.5rem;line-height:1.55;color:var(--ink)}
.single-product .afn-selling-points .afn-selling-point::before{content:"";position:absolute;left:.12rem;top:.66em;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
/* trust row: wrapping inline links plus a muted demo note */
.single-product .afn-trust{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.25rem;row-gap:.5rem;clear:both;margin:1.5rem 0 0;padding:1.1rem 0 0;border-top:1px solid #c9ad96;font-size:.9rem;line-height:1.5}
.single-product .afn-trust .afn-trust-link{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.single-product .afn-trust .afn-trust-link:hover{color:var(--accent)}
.single-product .afn-trust .afn-trust-demo{color:var(--ink);opacity:.65}
/* brand add to cart button */
body.single-product .ast-woocommerce-container div.product form.cart button.single_add_to_cart_button.button.alt{display:block;width:100%;max-width:100%;margin:0;padding:.95rem 1.25rem;background:var(--accent);color:#fff;border:0;border-radius:.3rem;font-size:1.05rem;font-weight:700;line-height:1.2;text-align:center;cursor:pointer;white-space:normal}
body.single-product .ast-woocommerce-container div.product form.cart button.single_add_to_cart_button.button.alt:hover{background:var(--ink);color:#fff}
body.single-product .ast-woocommerce-container div.product form.cart button.single_add_to_cart_button.button.alt.disabled,body.single-product .ast-woocommerce-container div.product form.cart button.single_add_to_cart_button.button.alt:disabled{opacity:.55;cursor:not-allowed}
/* price */
body.single-product .ast-woocommerce-container .woocommerce-Price-amount{color:var(--ink);font-size:1.6rem;font-weight:700;line-height:1.2}
/* variation controls and quantity */
.single-product table.variations{width:100%;margin:0 0 1.25rem}
.single-product table.variations select{display:block;width:100%;max-width:100%;min-height:2.9rem;padding:.55rem .8rem;border:1px solid #c9ad96;border-radius:.3rem;background:var(--paper);color:var(--ink);font-size:1rem}
.single-product table.variations td label{font-weight:600;color:var(--ink)}
.single-product form.cart .quantity{display:inline-block;margin:0 0 .75rem}
.single-product .quantity .qty{width:5rem;max-width:100%;min-height:2.9rem;padding:.5rem .75rem;border:1px solid #c9ad96;border-radius:.3rem;background:var(--paper);color:var(--ink);font-size:1rem}
/* ===== T5-1.6 product desktop (END) ===== */
/* ===== T5-1.7 product mobile (BEGIN) ===== */
/* narrow screens only: stack gallery above summary at full width */
/* rendered markup uses woocommerce-product-gallery inside images and entry-summary alongside summary */
@media (max-width:768px)
{
body.single-product #content .ast-woocommerce-container div.product div.images,body.single-product #content .ast-woocommerce-container div.product div.summary{width:100%;float:none}
body.single-product #content .ast-woocommerce-container div.product div.images{margin:0 0 1.5rem}
body.single-product #content .ast-container{padding-left:.5rem;padding-right:.5rem}
body.single-product #primary #main.site-main{padding-left:0;padding-right:0}
}
/* ===== T5-1.7 product mobile (END) ===== */
/* ===== T5-3.1 tokens (BEGIN) ===== */
/* paper baseline must beat the astra plain container white fill */
body,body.ast-plain-container{background-color:var(--paper)}
/* global baseline typography built from the root tokens */
h1,h2,h3,h4{font-family:var(--font-sans);color:var(--ink);font-weight:var(--weight-bold);line-height:var(--leading-tight)}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
/* content links in prose areas use accent color and underline */
.entry-content a,.site-main p a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.entry-content a:hover,.site-main p a:hover{color:var(--accent-hover)}
/* fine print uses the muted ink tone */
small{font-size:var(--text-sm);color:var(--muted)}
/* visible keyboard focus ring in the accent color */
:focus-visible{outline:var(--focus-ring);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring);outline-offset:2px}
/* legacy cta keeps a visible accent ring on programmatic or mouse focus */
.afn-button:focus{outline:var(--focus-ring);outline-offset:2px}
/* media never overflows its container */
img,video,canvas,svg{max-width:100%}
/* breakpoint tokens are documentation only and not usable inside media queries */
/* media queries use literals 768px and 1024px which equal the breakpoint tokens */
/* ===== T5-3.1 tokens (END) ===== */
/* ===== T5-3.2 header footer (BEGIN) ===== */
/* desktop (astra swaps at 922px): stop the flex column #page flex child
   shrink-to-fit compressing the header and footer; definite width 100%
   leaves the inherited auto margins and 1200px max-width untouched.
   astra pushes the nav ul to the row edge with margin-left:auto, so a fixed
   96px right margin adds the required free space on the right of the five
   item row, clearing the 96px gate at both 1280 and 1440 widths */
@media(min-width:922px){
#masthead.site-header{width:100%}
#colophon.site-footer{width:100%}
#ast-desktop-header #ast-hf-menu-1.main-header-menu{margin-right:96px}
}
/* desktop five item navigation: ink default, brand accent on hover and current;
   current selectors carry the li type plus the current class for specificity
   (2,2,2), which beats this file own ink default rule at (2,1,2) */
#ast-desktop-header #ast-hf-menu-1 .main-header-menu>li>a,
#ast-desktop-header #ast-hf-menu-1.main-header-menu>li>a{color:var(--ink)}
#ast-desktop-header #ast-hf-menu-1 .main-header-menu>li>a:hover,
#ast-desktop-header #ast-hf-menu-1.main-header-menu>li>a:hover{color:var(--accent)}
#ast-desktop-header #ast-hf-menu-1.main-header-menu>li.current-menu-item>a,
#ast-desktop-header #ast-hf-menu-1.main-header-menu>li.current_page_item>a{color:var(--accent)}
/* wordmark: bold tracked caps feel; blogname text untouched and no symbol added */
#masthead .site-title a{font-weight:700;letter-spacing:.06em;color:var(--ink)}
/* mobile trigger: button color is the brand accent, and an explicit currentcolor
   fill on the svg and its paths overrides the astra hard coded blue path fill,
   so the hamburger follows the button color and its hover state */
#ast-mobile-header .menu-toggle.main-header-menu-toggle{color:var(--accent)}
#ast-mobile-header .menu-toggle.main-header-menu-toggle:hover{color:var(--accent-hover)}
#ast-mobile-header .menu-toggle.main-header-menu-toggle .ast-mobile-svg,
#ast-mobile-header .menu-toggle.main-header-menu-toggle .ast-mobile-svg path{fill:currentColor}
/* mobile menu: hairline container plus the same ink/accent link states; the li
   type on current keeps it above the ink default rule specificity */
#ast-hf-mobile-menu{border-top:1px solid var(--hairline)}
#ast-hf-mobile-menu .menu-item>a{color:var(--ink)}
#ast-hf-mobile-menu .menu-item>a:hover{color:var(--accent)}
#ast-hf-mobile-menu li.current-menu-item>a,
#ast-hf-mobile-menu li.current_page_item>a{color:var(--accent)}
/* footer: php filter renders the copyright line once in the markup; keep only
   the brand type settings, alignment stays with the theme default */
.ast-footer-copyright p{font-size:1rem;line-height:1.5;color:var(--ink)}
/* ===== T5-3.2 header footer (END) ===== */
/* ===== T5-3.3 controls (BEGIN) ===== */
/* site wide control system: primary cta buttons, form fields, quantity, notices
   and keyboard focus. all brand values come from root tokens only.
   specificity ledger:
   1. archive loop buttons use the #page id prefix so id level specificity beats
      every woocommerce and astra class rule; the rules declare paint properties
      alone, therefore the loop button box geometry cannot move.
   2. the astra on-card overlay receives color only; visibility, opacity, the
      transparent background, z-index and geometry are never declared.
   3. generic button rules declare only background-color, color and radius, and
      loop anchors are excluded through :not(.add_to_cart_button). the T5-1.6
      single product button rules keep far higher specificity and identical
      computed values, including the disabled opacity and cursor, which are
      never restated here.
   4. the cart quantity rule is scoped under a .woocommerce-cart ancestor, so
      the single product quantity never matches and keeps its T5-1.6 width. */

/* 1a. archive loop plain anchor: brand fill rest and hover, paint only */
#page .product_type_variable.add_to_cart_button:not(.ast-on-card-button){background-color:var(--accent);color:var(--on-accent)}
#page .product_type_variable.add_to_cart_button:not(.ast-on-card-button):hover,
#page .product_type_variable.add_to_cart_button:not(.ast-on-card-button):focus,
#page .product_type_variable.add_to_cart_button:not(.ast-on-card-button):focus-visible{background-color:var(--accent-hover);color:var(--on-accent)}
#page .product_type_variable.add_to_cart_button:not(.ast-on-card-button).disabled,
#page .product_type_variable.add_to_cart_button:not(.ast-on-card-button):disabled{opacity:.55;cursor:not-allowed}

/* 1b. astra on-card overlay: color only, native hidden rest state preserved */
#page .ast-on-card-button.product_type_variable,
#page .ast-on-card-button.product_type_variable:hover,
#page .ast-on-card-button.product_type_variable:focus,
#page .ast-on-card-button.product_type_variable:focus-visible,
#page .ast-on-card-button.product_type_variable:active{color:var(--accent)}
#page .ast-on-card-button.product_type_variable .ast-icon,
#page .ast-on-card-button.product_type_variable svg{color:var(--accent)}
#page .ast-on-card-button.product_type_variable svg,
#page .ast-on-card-button.product_type_variable svg path{fill:currentColor}

/* 1c. generic brand button bases: paint and radius only; loop anchors and the
   overlay carry add_to_cart_button and stay excluded so geometry and the
   transparent overlay fill do not change */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button:not(.add_to_cart_button),
.afn-button,
.wc-block-cart__return-to-store,
.woocommerce a.button.wc-forward{background-color:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm)}
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce a.button:not(.add_to_cart_button):hover,
.woocommerce a.button:not(.add_to_cart_button):focus,
.afn-button:hover,
.afn-button:focus,
.wc-block-cart__return-to-store:hover,
.wc-block-cart__return-to-store:focus,
.woocommerce a.button.wc-forward:hover,
.woocommerce a.button.wc-forward:focus{background-color:var(--accent-hover);color:var(--on-accent)}

/* 1d. checkout place order button: static brand rule for classic checkout */
#place_order{background-color:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm)}
#place_order:hover,
#place_order:focus{background-color:var(--accent-hover);color:var(--on-accent)}

/* 1e. block cart empty state: title and new in store grid use type/ink tokens */
.wc-block-cart__empty-cart__title{color:var(--ink);font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:var(--leading-tight)}
.wp-block-product-new .wc-block-grid__product .wc-block-grid__product-title{color:var(--ink)}
.wp-block-product-new .wc-block-grid__product .wc-block-grid__product-title:hover{color:var(--accent)}
.wp-block-product-new .wc-block-grid__product .price,
.wp-block-product-new .wc-block-grid__product .wc-block-grid__product-price{color:var(--ink);font-weight:var(--weight-medium)}

/* 2a. classic woocommerce account/checkout fields: hairline, paper, 46px min */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{border:1px solid var(--hairline);background-color:var(--paper);color:var(--ink);min-height:2.9rem;border-radius:var(--radius-sm)}
/* variation select repeats only paint values that equal T5-1.6; layout props
   (width, min-height, padding, radius) stay owned by the T5-1.6 rule */
.woocommerce table.variations select{border:1px solid var(--hairline);background-color:var(--paper);color:var(--ink)}
#coupon_code{border:1px solid var(--hairline);background-color:var(--paper);color:var(--ink);min-height:2.9rem;border-radius:var(--radius-sm)}
.woocommerce .select2-container--default .select2-selection--single{border-color:var(--hairline)}

/* 2b. contact form three inputs: unified hairline, paper ground, 46px min */
.afn-contact input[name=name],
.afn-contact input[type=email],
.afn-contact textarea[name=message]{border:1px solid var(--hairline);background-color:var(--paper);color:var(--ink);min-height:46px;border-radius:var(--radius-sm)}
.afn-contact input[name=name]:focus,
.afn-contact input[type=email]:focus,
.afn-contact textarea[name=message]:focus{outline:var(--focus-ring);outline-offset:2px}

/* 2c. contact submit: brand orange held as a zero regression guard */
.afn-contact button[type=submit]{background-color:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm)}
.afn-contact button[type=submit]:hover,
.afn-contact button[type=submit]:focus{background-color:var(--accent-hover);color:var(--on-accent)}

/* 3. cart quantity gets a formal width in cart context only; the single product
   quantity has no .woocommerce-cart ancestor and keeps its T5-1.6 width */
.woocommerce-cart .quantity .qty{width:4.5rem;min-height:2.9rem;padding:.5rem .75rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background-color:var(--paper);color:var(--ink);vertical-align:middle}

/* 4. notices: paper card, hairline frame, accent left bar; static only because
   no notice page is reachable in this slice; the empty wrapper paints nothing */
.woocommerce-notices-wrapper{color:var(--ink)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background-color:var(--paper);border:1px solid var(--hairline);border-left:4px solid var(--accent);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);color:var(--ink);padding:.85rem 1.25rem;margin:0 0 1rem}

/* 5. focus-visible extension over the T5-3.1 baseline for control classes */
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce a.button:focus-visible,
.afn-button:focus-visible,
.woocommerce .quantity .qty:focus-visible,
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.afn-contact input[name=name]:focus-visible,
.afn-contact input[type=email]:focus-visible,
.afn-contact textarea[name=message]:focus-visible,
.afn-contact button[type=submit]:focus-visible,
.wc-block-cart__return-to-store:focus-visible,
.woocommerce a.wc-forward:focus-visible,
#place_order:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* 6. contact focus ring reinforcement: astra prints a woocommerce inline sheet
   after this stylesheet whose :focus longhands tie the (0,3,1) rules above for
   email and reset textarea. the woocommerce-js class on body is verified on the
   contact ancestor chain, so prefixing it lifts every selector to (0,4,1) and
   the brand ring wins in both pointer focus and keyboard focus states */
.woocommerce-js .afn-contact input[name=name]:focus,
.woocommerce-js .afn-contact input[type=email]:focus,
.woocommerce-js .afn-contact textarea[name=message]:focus,
.woocommerce-js .afn-contact input[name=name]:focus-visible,
.woocommerce-js .afn-contact input[type=email]:focus-visible,
.woocommerce-js .afn-contact textarea[name=message]:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* 7. contact resting transition scoping: astra prints transition all .2s
   linear on the input and textarea type rules, so the outline longhands are
   interpolated too and a synchronous getComputedStyle read right after focus
   catches a mid frame instead of the final 2px ring. this resting rule swaps
   the shorthand for an explicit property list that keeps only the border,
   ground, text and shadow fade; no outline longhand is listed, so outline
   width, style, color and offset land in the focus frame with no delay. the
   .site-main wrapper rendered by the contact template lifts each selector to
   (0,4,1): woocommerce-js, site-main, afn-contact plus the name or type
   attribute, over the astra type level transition declaration */
.woocommerce-js .site-main .afn-contact input[name=name],
.woocommerce-js .site-main .afn-contact input[type=email],
.woocommerce-js .site-main .afn-contact textarea[name=message]{transition:border-color .2s linear,background-color .2s linear,color .2s linear,box-shadow .2s linear}
/* ===== T5-3.3 controls (END) ===== */
/* ===== T5-3.4 cards BEGIN ===== */
/* q33 decision: hairline frame plus soft shadow; the shadow consumes the
   --shadow-card token only. card face, image rhythm, type, price and category
   all use root tokens; templates and markup are untouched. selectors are
   scoped to archives and search so single product pages, header and footer
   and the T5-3.3 controls never match. */

/* 1. archive product card: shop loop, search product grids and future related
   grids share one card system through these selectors */
body.woocommerce ul.products li.product,
body.search-results ul.products li.product{background-color:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;transition:border-color .18s ease}
body.woocommerce ul.products li.product:hover,
body.search-results ul.products li.product:hover{border-color:var(--accent)}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
body.search-results ul.products li.product .astra-shop-thumbnail-wrap{background-color:var(--paper)}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a img,
body.search-results ul.products li.product .astra-shop-thumbnail-wrap a img{margin:0}
body.woocommerce ul.products li.product .astra-shop-summary-wrap,
body.search-results ul.products li.product .astra-shop-summary-wrap{padding:var(--space-3) var(--space-3) var(--space-4)}
body.woocommerce ul.products li.product .ast-woo-product-category,
body.search-results ul.products li.product .ast-woo-product-category{display:block;margin:0 0 var(--space-1);color:var(--muted);font-size:var(--text-sm);line-height:1.4;letter-spacing:.04em}
body.woocommerce ul.products li.product a.ast-loop-product__link,
body.search-results ul.products li.product a.ast-loop-product__link{color:var(--ink)}
body.woocommerce ul.products li.product a.ast-loop-product__link:hover,
body.search-results ul.products li.product a.ast-loop-product__link:hover{color:var(--accent)}
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.search-results ul.products li.product .woocommerce-loop-product__title{margin:0 0 var(--space-2);padding:0;color:var(--ink);font-family:var(--font-sans);font-size:var(--text-base);font-weight:700;line-height:var(--leading-snug)}
body.woocommerce ul.products li.product .price,
body.search-results ul.products li.product .price{margin:0;color:var(--ink);font-size:var(--text-base);font-weight:700;line-height:var(--leading-snug)}
body.woocommerce ul.products li.product .price .woocommerce-Price-amount,
body.search-results ul.products li.product .price .woocommerce-Price-amount,
body.woocommerce ul.products li.product .price ins,
body.search-results ul.products li.product .price ins{color:var(--ink)}
body.woocommerce ul.products li.product .price del,
body.search-results ul.products li.product .price del{color:var(--muted)}

/* 2. breadcrumb, result count and ordering row on the shop archive only;
   the single product breadcrumb keeps its T5-1 baseline values */
body.woocommerce-shop .woocommerce-breadcrumb{margin:0 0 var(--space-3);font-size:var(--text-sm);line-height:1.5;color:var(--muted)}
body.woocommerce-shop .woocommerce-breadcrumb a{color:var(--muted);text-decoration:none}
body.woocommerce-shop .woocommerce-breadcrumb a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
body.woocommerce-shop .woocommerce-result-count{font-size:var(--text-sm);line-height:1.5;color:var(--muted)}
body.woocommerce-shop form.woocommerce-ordering select.orderby{min-height:2.5rem;padding:.4rem 2rem .4rem .75rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background-color:var(--paper);color:var(--ink);font-size:var(--text-sm);cursor:pointer}

/* 3. related products: no related items exist in the catalog today, so these
   are static rhythm rules only. any future related card inherits the card
   system above through the body.woocommerce ul.products selectors */
body.woocommerce div.product .related.products{margin-top:var(--space-6)}
body.woocommerce div.product .related.products ul.products{margin-top:var(--space-4)}

/* 4. search result article links use accent with an ink hover, plus finished
   result spacing; body.search-results scope keeps navigation and card
   controls out of reach */
body.search-results #primary .ast-article-post h2.entry-title.ast-blog-single-element a{color:var(--accent);text-decoration:none}
body.search-results #primary .ast-article-post h2.entry-title.ast-blog-single-element a:hover{color:var(--accent-hover)}
body.search-results #primary .ast-article-post{margin:0 0 var(--space-5);padding:0 0 var(--space-4);border-bottom:1px solid var(--hairline)}
body.search-results #primary .ast-article-post:last-child{margin-bottom:0;border-bottom:0}

/* 5. mobile up to 768px: one full width product column. the grid selectors
   outrank the astra inline 0,4,1 mobile and tablet column rules by ancestor
   classes, with no important flag. the shop container gutter mirrors the
   T5-1.7 single product mobile recipe; no overflow masking is used */
@media(max-width:768px){
body.woocommerce .ast-container .ast-woocommerce-container ul.products:not(.elementor-grid),
body.search-results .ast-container ul.products:not(.elementor-grid){grid-template-columns:minmax(0,1fr)}
body.woocommerce-shop .ast-container{padding-left:var(--space-2);padding-right:var(--space-2)}
body.woocommerce-shop #primary #main.site-main{padding-left:0;padding-right:0}
}
/* ===== T5-3.4 cards END ===== */
/* ===== T5-3.5 content (BEGIN) ===== */
/* Content pages, home sections, blog, search and 404 finish. Every color and
   rhythm value consumes the root tokens. Selectors are triple scoped to a
   content body class, a content container and the target element, so
   woocommerce pages, product cards, masthead and colophon never match. */

/* content and global pages using the separate container layout share the warm
   paper ground around their paper boxes; woocommerce bodies (shop, product,
   cart, checkout and product archives) never match and keep the T5-3.1 ground */
body.blog.ast-separate-container, body.search-results.ast-separate-container, body.error404.ast-separate-container, body.archive.ast-separate-container:not(.woocommerce){background-color:var(--paper);}

/* 1. home hero: two track grid with token type and gaps */
.afn-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:center;padding:var(--space-6) var(--space-3)}
.afn-eyebrow{margin:0 0 var(--space-2);color:var(--muted);font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:.12em}
.afn-hero h1{margin:0 0 var(--space-3)}
.afn-hero h2{margin:0 0 var(--space-3)}
.afn-hero p{margin:0 0 var(--space-4)}

/* 2. brand cta base shared by the home hero anchor and the contact submit;
   paint, hover and focus rings stay owned by the T5-3.3 control rules */
.afn-button{display:inline-block;max-width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-weight:var(--weight-bold);line-height:1.2;text-align:center;text-decoration:none;white-space:normal;cursor:pointer;transition:background-color .18s ease,color .18s ease}

/* 3. media cards: paper face, one pixel hairline frame, medium radius and the
   same soft shadow the T5-3.4 product card system uses */
.afn-media-card{display:flex;align-items:center;justify-content:center;min-height:14rem;padding:var(--space-6) var(--space-5);text-align:center;color:var(--muted);font-size:var(--text-sm);background-color:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}

/* 4. proof, story and faq home sections share the 800px reading measure */
.afn-proof,.afn-story,.afn-faq{max-width:48rem;margin:var(--space-6) auto;padding:0 var(--space-3)}
.afn-proof>h2,.afn-faq>h2{margin:0 0 var(--space-4)}
.afn-faq details{margin:0;padding:var(--space-3) 0;border-top:1px solid var(--hairline)}
.afn-faq details:last-of-type{border-bottom:1px solid var(--hairline)}
.afn-faq summary{padding:var(--space-1) 0;color:var(--ink);font-weight:var(--weight-medium);cursor:pointer}
.afn-faq details[open] summary{padding-bottom:var(--space-2)}
.afn-faq details p{margin:0;color:var(--ink)}

/* 5. contact form layout only; hairline, paper ground, radius and focus paint
   stay owned by T5-3.3 */
.afn-contact{max-width:50rem;margin:var(--space-5) auto 0}
.afn-contact label{display:block;margin:var(--space-3) 0}
.afn-contact input,.afn-contact textarea{width:100%;padding:.7rem}
.afn-contact .afn-button{margin-top:var(--space-3)}
body.page:has(.afn-contact) .site-main>h1,
body.page:has(.afn-contact) .site-main>p{max-width:50rem;margin-left:auto;margin-right:auto}

/* 6. reading measure for static pages and single posts, centered as a block;
   woocommerce bodies and the 1200px site main rule are intentionally excluded */
body.page:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-no-js) .entry-content,
body.single-post .entry-content{max-width:50rem;margin-left:auto;margin-right:auto;line-height:var(--leading-normal)}
body.page:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-no-js) .entry-header,
body.single-post .entry-header,
body.single-post .entry-footer{max-width:50rem;margin-left:auto;margin-right:auto}

/* 7. blog list rhythm mirrors the T5-3.4 search list: hairline separators on a
   paper face; no wordpress text node is changed */
body.blog #primary .ast-article-post{margin:0 0 var(--space-5);padding:0 0 var(--space-4);border-bottom:1px solid var(--hairline);background-color:var(--paper)}
body.blog #primary .ast-article-inner,
body.search-results #primary .ast-article-inner,
body.search-results #primary .ast-article-post,
body.search-results .no-results,
body.search-results .ast-archive-description{background-color:var(--paper)}
body.blog #primary .ast-article-post:last-child{margin-bottom:0;border-bottom:0}
body.blog #primary .ast-article-post .entry-header,
body.search-results #primary .ast-article-post .entry-header{margin:0 0 var(--space-2)}
body.blog #primary .entry-meta,
body.search-results #primary .entry-meta,
body.single-post #primary .entry-meta{margin:var(--space-2) 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--muted)}
body.blog .ast-archive-description,
body.search-results .ast-archive-description,
body.search-results .page-header{margin:0 0 var(--space-5)}

/* 8. blog post titles follow the accent search title system */
body.blog #primary .ast-article-post h2.entry-title.ast-blog-single-element a{color:var(--accent);text-decoration:none}
body.blog #primary .ast-article-post h2.entry-title.ast-blog-single-element a:hover{color:var(--accent-hover)}

/* 9. post meta joins the content link system: dates, category links and
   byline copy are muted; meta anchors stay underline free until hover turns
   them accent. every selector is scoped through a content body class and
   #primary, so woocommerce pages and cards, masthead and colophon never
   match; the slash separators inherit muted from these containers */
body.blog #primary .entry-meta .published,
body.blog #primary .entry-meta .updated,
body.blog #primary .entry-meta .author-name,
body.blog #primary .posted-on,
body.blog #primary .posted-on::before,
body.blog #primary .ast-blog-meta .published,
body.blog #primary .ast-blog-meta .updated,
body.search-results #primary .entry-meta .published,
body.search-results #primary .entry-meta .updated,
body.search-results #primary .entry-meta .author-name,
body.search-results #primary .posted-on,
body.search-results #primary .posted-on::before,
body.search-results #primary .ast-blog-meta .published,
body.search-results #primary .ast-blog-meta .updated,
body.archive:not(.woocommerce) #primary .entry-meta .published,
body.archive:not(.woocommerce) #primary .entry-meta .updated,
body.archive:not(.woocommerce) #primary .entry-meta .author-name,
body.archive:not(.woocommerce) #primary .posted-on,
body.archive:not(.woocommerce) #primary .posted-on::before,
body.archive:not(.woocommerce) #primary .ast-blog-meta .published,
body.archive:not(.woocommerce) #primary .ast-blog-meta .updated,
body.single-post #primary .entry-meta .published,
body.single-post #primary .entry-meta .updated,
body.single-post #primary .entry-meta .author-name,
body.single-post #primary .posted-on,
body.single-post #primary .posted-on::before,
body.single-post #primary .ast-blog-meta .published,
body.single-post #primary .ast-blog-meta .updated{color:var(--muted)}
body.blog #primary .entry-meta a,
body.blog #primary .cat-links a,
body.blog #primary .posted-on a,
body.search-results #primary .entry-meta a,
body.search-results #primary .cat-links a,
body.search-results #primary .posted-on a,
body.archive:not(.woocommerce) #primary .entry-meta a,
body.archive:not(.woocommerce) #primary .cat-links a,
body.archive:not(.woocommerce) #primary .posted-on a,
body.single-post #primary .entry-meta a,
body.single-post #primary .cat-links a,
body.single-post #primary .posted-on a{color:var(--muted);text-decoration:none}
body.blog #primary .entry-meta a:hover,
body.blog #primary .cat-links a:hover,
body.blog #primary .posted-on a:hover,
body.search-results #primary .entry-meta a:hover,
body.search-results #primary .cat-links a:hover,
body.search-results #primary .posted-on a:hover,
body.archive:not(.woocommerce) #primary .entry-meta a:hover,
body.archive:not(.woocommerce) #primary .cat-links a:hover,
body.archive:not(.woocommerce) #primary .posted-on a:hover,
body.single-post #primary .entry-meta a:hover,
body.single-post #primary .cat-links a:hover,
body.single-post #primary .posted-on a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}

/* 10. prose links: content scope, content container and anchor; masthead,
   colophon, product cards and woocommerce controls never match */
body.page:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-no-js) .entry-content a,
body.single-post .entry-content a,
body.blog #primary .entry-content a,
body.search-results #primary .entry-content a,
body.archive:not(.woocommerce) #primary .entry-content a,
body.blog .no-results a,
body.search-results .no-results a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
body.page:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-no-js) .entry-content a:hover,
body.single-post .entry-content a:hover,
body.blog #primary .entry-content a:hover,
body.search-results #primary .entry-content a:hover,
body.archive:not(.woocommerce) #primary .entry-content a:hover,
body.blog .no-results a:hover,
body.search-results .no-results a:hover{color:var(--accent-hover)}

/* 11. empty states for a future empty blog or search index; static rules only */
body.blog .no-results,
body.search-results .no-results{max-width:48rem;margin:var(--space-5) auto;padding:var(--space-5) var(--space-3) 0;text-align:center}
body.blog .no-results .search-form,
body.search-results .no-results .search-form{margin-top:var(--space-3)}
body.blog .no-results label,
body.search-results .no-results label{display:block}
body.blog .no-results .search-field,
body.search-results .no-results .search-field{display:block;max-width:26rem;width:100%;min-height:46px;margin:0 auto var(--space-2);padding:.65rem var(--space-3);border:1px solid var(--hairline);border-radius:var(--radius-sm);background-color:var(--paper);color:var(--ink)}
body.blog .no-results .search-submit,
body.search-results .no-results .search-submit{min-height:46px;padding:0 var(--space-4);border:0;border-radius:var(--radius-sm);background-color:var(--accent);color:var(--on-accent);font-weight:var(--weight-bold);cursor:pointer}
body.blog .no-results .search-submit:hover,
body.search-results .no-results .search-submit:hover{background-color:var(--accent-hover)}

/* 12. 404 spacing, measure and branded search field; form markup untouched */
body.error404 .error-404{background-color:var(--paper)}
body.error404 .ast-404-layout-1{max-width:40rem;margin:var(--space-6) auto;padding:0 var(--space-3);text-align:center}
body.error404 .page-header h1{margin:0 0 var(--space-3)}
body.error404 .page-sub-title{margin:0 0 var(--space-4);color:var(--ink)}
body.error404 .ast-404-search{margin-top:var(--space-4)}
body.error404 .ast-404-search label{display:block}
body.error404 .ast-404-search .search-field{display:block;max-width:28rem;width:100%;min-height:46px;margin:0 auto var(--space-2);padding:.65rem var(--space-3);border:1px solid var(--hairline);border-radius:var(--radius-sm);background-color:var(--paper);color:var(--ink)}
body.error404 .ast-404-search .search-submit{min-height:46px;padding:0 var(--space-4);border:0;border-radius:var(--radius-sm);background-color:var(--accent);color:var(--on-accent);font-weight:var(--weight-bold);cursor:pointer}
body.error404 .ast-404-search .search-submit:hover{background-color:var(--accent-hover)}

/* 13. mobile at the 768px token breakpoint: single track hero and tighter
   section rhythm; replaces the legacy narrow screen block removed from line 6 */
@media(max-width:768px){
.afn-hero{grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding:var(--space-5) var(--space-2)}
.afn-media-card{min-height:12rem;padding:var(--space-5) var(--space-3)}
.afn-proof,.afn-story,.afn-faq{margin:var(--space-5) auto;padding:0 var(--space-2)}
body.error404 .ast-404-layout-1{margin-top:var(--space-5);margin-bottom:var(--space-5)}
}
/* ===== T5-3.5 content (END) ===== */
/* ===== T5-3.6 responsive closure (BEGIN) ===== */
/* responsive closure: five-viewport geometry verified, no overflow rules added */
#ast-scroll-top{background-color:var(--accent);transition:background-color .18s ease}
#ast-scroll-top:hover{background-color:var(--accent-hover)}
#ast-scroll-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ===== T5-3.6 responsive closure (END) ===== */
/* ===== T5-4.2b footer policy links style (BEGIN) ===== */
/* auxiliary footer navigation row output at astra_footer_content_bottom,
   a direct child of #colophon after the copyright row. wrapping flex track
   keeps the four anchors visible and clickable with 44px touch boxes at
   375/390/412 and on desktop, and never widens the document: long rows wrap
   instead of overflowing. only T5-3.1 root tokens are used. */
.mokalun-policy-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;max-width:100%;margin:var(--space-2) 0 0;padding:0;column-gap:var(--space-3);row-gap:var(--space-1)}
.mokalun-policy-links a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;max-width:100%;margin:0;padding:.6875rem var(--space-3);color:var(--muted);font-size:var(--text-sm);font-weight:var(--weight-normal);line-height:1.3;text-decoration:none;white-space:normal;border-radius:var(--radius-sm)}
.mokalun-policy-links a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.mokalun-policy-links a:focus-visible{color:var(--accent);outline:var(--focus-ring);outline-offset:2px}
@media(min-width:922px){
.mokalun-policy-links{margin-top:var(--space-3);column-gap:var(--space-4)}
}
/* ===== T5-4.2b footer policy links style (END) ===== */
/* ===== T5-4.3 mobile nav & touch (BEGIN) ===== */
/* mobile breakpoint only (the frozen facts confirm the hamburger header
   renders through 768px): grow the two header tap targets and the global
   scroll control to a 44px box without touching paint or row layout, and
   reserve a footer clearance band so the fixed control never intersects the
   footer policy anchors at page end. spacing values use T5-3.1 tokens; the
   44px size is the platform touch minimum shared with the 4.2b marker zone. */
@media(max-width:768px){
/* hamburger trigger: native box is 40px; min sizing grows only the hit area
   and flex centering keeps the svg glyph centered inside the bigger box */
#ast-mobile-header button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* wordmark anchor: keep the inline text width, lift the tap height to 44px */
#masthead .site-title a{display:inline-flex;align-items:center;min-height:44px}
/* fixed scroll-to-top control: 44px box; paint stays owned by the T5-3.6
   marker zone, this rule sets geometry only */
#ast-scroll-top{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* footer clearance band: space-6 plus space-5 plus space-1 is 5.25rem, which
   keeps the last footer anchor above the fixed 44px control band (30px bottom
   offset plus a 44px box plus a visual gap) at every frozen mobile width */
#colophon.site-footer{padding-bottom:calc(var(--space-6) + var(--space-5) + var(--space-1))}
}
/* ===== T5-4.3 mobile nav & touch (END) ===== */
/* ===== T5-4.4 mobile layout/img/text (BEGIN) ===== */
/* content layer mobile closure for the T5-4.1 baseline: B-01 filled block
   cart overflow at 320, F-41-A twin 404 submit controls, F-41-B the invisible
   home story cta, plus the content layer touch targets handed over from the
   T5-4.3 review. sizes reuse T5-3.1 tokens; 44px is the shared touch minimum
   from the 4.2b and 4.3 zones; the 80px track mirrors the woocommerce mobile
   cart grid. paint, text and widths are left untouched and no rule masks
   overflow. */

/* F-41-A (all widths, 404 widget form only): the form prints the astra icon
   submit button and then a redundant core text input submit; the two absolute
   controls overlap by 30px on every viewport. the icon button is the intended
   control, so the duplicate text input leaves layout and the accessibility
   tree together. every other search form keeps its native controls. */
/* T5-4.6b: duplicate text submit removed at PHP source via search_form_args; rule deleted */

/* F-41-B (all widths): the story cta is an .afn-button nested in a
   paragraph, and the global .site-main p a accent link rule outranks the
   standalone button selector, so its text paints accent on accent. restore
   on-accent text for every interaction state; background paint stays owned
   by the T5-3.3 control rules. */
body.home .site-main p a.afn-button,
body.home .site-main p a.afn-button:hover,
body.home .site-main p a.afn-button:focus,
body.home .site-main p a.afn-button:focus-visible{color:var(--on-accent)}

/* B-01 / M-1 narrow handset guard at 480px (covers the frozen 320, 375, 390
   and 412 handsets; 768 stays on its frozen baseline). a filled block cart at
   320 pushes the document 6.83px past the right edge: the alignwide cart
   wrapper bleeds negative 2em side margins past the narrow content track, and
   the woocommerce mobile item grid uses fixed 80px plus 132px tracks that
   cannot shrink. keep the wrapper inside the content track and make the
   middle product track flexible; the 80px image track and the content sized
   total track stay unchanged. the block wrapper carries container queries
   that already resolve to the mobile branch below 480px, so no upstream
   container state flips. checkout uses its own block class and never
   matches. the cart page body has no woocommerce-cart class, so the rules
   anchor on the block classes themselves. */
@media(max-width:480px){
body.page .entry-content .wp-block-woocommerce-cart.alignwide{width:100%;max-width:100%;margin-left:0;margin-right:0}
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:80px minmax(0,1fr)}
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__product{min-width:0}
}

/* content layer 44px touch floor from the T5-4.3 review handoff, mobile
   breakpoint only: height and inline centering are set, so widths, fonts and
   paint stay frozen. the product variation select, the classic quantity
   field and the block cart stepper belong to the T5-4.5 commerce zone and
   are deliberately not matched here. */
@media(max-width:768px){
/* home faq disclosure summaries grow from about 31px; list-item display is
   kept so the native disclosure marker is untouched */
.afn-faq summary{min-height:44px}
/* shop and single product breadcrumb anchors and product meta anchors */
body.woocommerce .woocommerce-breadcrumb a,
body.single-product .product_meta a{display:inline-flex;align-items:center;min-height:44px}
/* archive product title links and loop action buttons (select options and
   view cart) on shop and product search grids */
body.woocommerce ul.products li.product a.ast-loop-product__link,
body.search-results ul.products li.product a.ast-loop-product__link{display:inline-flex;align-items:center;max-width:100%;min-height:44px}
body.woocommerce ul.products li.product a.button.add_to_cart_button,
body.woocommerce ul.products li.product a.button.added_to_cart,
body.search-results ul.products li.product a.button.add_to_cart_button,
body.search-results ul.products li.product a.button.added_to_cart{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
/* shop ordering select grows from 40px; equal specificity to the T5-3.4 rule
   with this later marker zone winning */
body.woocommerce-shop form.woocommerce-ordering select.orderby{min-height:44px}
/* single product tab anchors: flex is block level, so the mobile full width
   track and the 768px split track keep their widths */
body.single-product .woocommerce-tabs ul.tabs li a{display:flex;align-items:center;justify-content:center;min-height:44px}
/* gallery zoom trigger grows from 36px; top right anchoring keeps the added
   4px inside the main image right edge at every mobile width */
body.single-product .woocommerce-product-gallery__trigger{min-width:44px;min-height:44px}
/* product trust row links grow from about 20px; the existing flex wrap keeps
   the row inside the track */
body.single-product .afn-trust .afn-trust-link{display:inline-flex;align-items:center;min-height:44px}
/* blog, archive and single post meta anchors and search result article titles */
body.blog #primary .entry-meta a,
body.search-results #primary .entry-meta a,
body.archive:not(.woocommerce) #primary .entry-meta a,
body.single-post #primary .entry-meta a{display:inline-flex;align-items:center;min-height:44px}
body.search-results #primary .ast-article-post h2.entry-title a{display:inline-flex;align-items:center;max-width:100%;min-height:44px}
}
/* ===== T5-4.4 mobile layout/img/text (END) ===== */
/* ===== T5-4.5 mobile commerce (BEGIN) ===== */
/* mobile commerce closure for the buy chain at 768px and below only. the
   44px value is the shared touch minimum frozen by the 4.2b, 4.3 and 4.4
   zones, and 768px is the literal mobile breakpoint documented in T5-3.1.
   geometry only: no paint, font, track width or visibility change, no
   !important, no overflow masking. the two P1 rules close the T5-4.4 r1
   findings from this later marker zone instead of editing the frozen 4.4
   zone. the commerce rules cover the classic single product form and the
   block cart; the checkout billing fields already render visible and the
   silent shipping block plus the no payment notice stay untouched. */
@media(max-width:768px){
/* P1-1: blog index and non commerce archive article title links were absent
   from the 4.4 search only title selector; give them the same 44px box */
body.blog #primary .ast-article-post h2.entry-title a,
body.archive:not(.woocommerce) #primary .ast-article-post h2.entry-title a{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-width:44px;min-height:44px}
/* P1-2: short word links (breadcrumb Home and Blog, post meta admin, search
   title Blog) only reached the height floor with natural sub 44px widths;
   add the 44px width floor to the same inline-flex link groups. inline
   level boxes keep their natural text wrapping between separators */
body.woocommerce .woocommerce-breadcrumb a,
body.single-product .product_meta a,
body.blog #primary .entry-meta a,
body.search-results #primary .entry-meta a,
body.archive:not(.woocommerce) #primary .entry-meta a,
body.single-post #primary .entry-meta a,
body.search-results #primary .ast-article-post h2.entry-title a{min-width:44px;justify-content:center}
/* classic variation form: pack-size select and the quantity field render
   42px high from upstream form styles, and the add to cart button keeps an
   explicit floor beside its frozen block width. widths already clear 44px;
   paint and typography stay owned by the T5-1.6 product rules */
body.single-product select#pack-size[name=attribute_pack-size],
body.single-product form.cart input[name=quantity],
body.single-product form.cart button.single_add_to_cart_button{min-height:44px}
/* block cart stepper: upstream buttons are fixed 30px wide inside a fixed
   107px track. grow minus and plus to 44px squares, center the glyphs, and
   bring the value input to the same height so the bordered track reads as
   one rectangle. the painted buttons need 128px, so on the 320px handset
   the fixed upstream track box cannot hold them; the 360px bucket rule
   below lets the track hug the buttons and reflows the line. at 375px and
   wider the product column already absorbs the painted width */
.wc-block-cart .wc-block-components-quantity-selector button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{min-height:44px}
/* block cart line remove control: upstream icon button is 24px; the product
   quantity area is a gapped flex flow, so the 44px centered hit box grows
   in place. on the 320px handset the grown box used to land on the later
   painted total price cell; the 360px bucket rule below wraps it under the
   stepper and moves the price cell to its own row */
.wc-block-cart button.wc-block-cart-item__remove-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* proceed to checkout already measures 321x44 at the frozen baseline; pin
   the 44px floor so upstream padding drift cannot take it back under */
.wc-block-cart a.wc-block-cart__submit-button{min-height:44px}
}
/* T5-4.5 r1 320px bucket reflow (max 360px covers the frozen 320 handset;
   375, 390 and 412 keep the single row layout that already passes). at 320
   the block cart row is a 251px grid with a 105px product column: the 44px
   stepper paints 128px and its flow spills under the later painted total
   price cell, which stretches the full row height. trusted taps at the
   remove center hit the price wrapper so the line is not removed, and the
   plus and remove boxes intersect by about 10px by 44px. fix with an
   explicit two row, two column placement for this bucket only: the frozen
   80px image keeps the left rail and spans both rows, product details own
   the flexible 155px column, the quantity flow wraps its 44px remove
   control under the stepper, the selector box hugs its 128px buttons, and
   the line total moves to its own right aligned row where it cannot cover
   either control. geometry only: no paint, font, visibility or !important
   change; gaps reuse the space 3 column gap already measured upstream and
   the space 2 token. checkout and mini cart use other classes and never
   match the table scoped selectors. */
@media(max-width:360px){
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row{grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:none;column-gap:var(--space-3);row-gap:var(--space-2)}
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__image{grid-column:1;grid-row:1 / span 2}
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__product{grid-column:2;grid-row:1;min-width:0}
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__total{grid-column:2;grid-row:2;min-width:0;display:flex;justify-content:flex-end}
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__quantity{flex-wrap:wrap;row-gap:var(--space-2)}
.wc-block-cart.is-mobile .wc-block-cart__main table.wc-block-cart-items .wc-block-components-quantity-selector{width:auto;max-width:none}
}
/* ===== T5-4.5 mobile commerce (END) ===== */
/* ===== T5-4.6a cart stepper track prep (BEGIN) ===== */
/* prep for the T5-4.6 final pass: close the T5-4.5 r2 P1-1 carry over in
   the 361 to 768 bucket only. the frozen 4.5 rules grow the block cart
   stepper buttons to 44px squares while the upstream selector box keeps
   its fixed 107px track with visible overflow, so at 375, 390, 412 and 768
   the painted plus button runs about 22px past the track edge and its 44px
   box intersects the remove control by 10px. let the selector hug its
   painted buttons with auto width, and let the quantity flow wrap on the
   tight phone columns so the remove box drops under the track instead of
   sharing the line with the overflowing button; at 768 the wide product
   column keeps everything on one line. geometry only: no paint, font,
   visibility, priority flags or overflow masking. the table scoped chain
   matches the filled block cart line items table alone, so classic cart,
   checkout and mini cart never match, and the frozen <=360 grid reflow is
   untouched. */
@media(min-width:361px) and (max-width:768px){
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-components-quantity-selector{width:auto;max-width:none}
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items .wc-block-cart-item__quantity{flex-wrap:wrap;row-gap:var(--space-2)}
}
/* ===== T5-4.6a cart stepper track prep (END) ===== */
/* ===== T5-4.6c touch target closure (BEGIN) ===== */
/* r1 touch closure for the T5-4.6 review: five sub 44px controls plus the
   no match search page. geometry only and mobile only (the 768px token
   breakpoint): no paint, font, track width, visibility or priority flag
   change, no external url and no overflow masking. every selector is
   scoped to the measured component and page, so desktop, shop loops,
   checkout and mini cart keep their frozen marker zone rules. */
@media(max-width:768px){
/* 1. empty cart new in store grid: the select options anchor carries
   wp-block-button__link and add_to_cart_button but no button class, so
   the frozen T5-4.4 shop grid rule cannot match it; the empty cart block
   ancestor keeps shop and product search loops untouched */
.wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products a.wp-block-button__link.add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
/* 2. blog category anchors print in a standalone ast-taxonomy-container
   span outside entry-meta, where the frozen meta anchor rules do not
   reach; the current word is wider than 44px, the width floor only
   guards shorter category words */
body.blog #primary span.ast-taxonomy-container.cat-links a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* 3. search result featured image anchors wrap the whole image; when the
   image band collapses the anchor measured about 19px tall. grow only
   the anchor band and center its content; the image keeps its own
   aspect ratio and sizing untouched */
body.search-results #primary .post-thumb-img-content > a[aria-label^="Read:"]{display:flex;align-items:center;justify-content:center;min-height:44px}
/* 4. single product category anchor printed by astra outside product_meta */
body.single-product span.single-product-category a{display:inline-flex;align-items:center;min-height:44px}
/* 5. filled block cart coupon panel toggle and line product name; scoped
   to the cart block so the checkout order summary and mini cart never
   match. the wrapper div and its inner control both take the 44px
   floor, which keeps the toggle box identical after the panel expands */
.wc-block-cart .wc-block-components-panel__button{min-height:44px}
.wc-block-cart .wc-block-components-panel__button button,
.wc-block-cart .wc-block-components-panel__button a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.wc-block-cart a.wc-block-components-product-name{display:flex;align-items:center;min-height:44px}
/* P1-a. a long query token in the search results title can push the
   320px track; wrap only inside the word, desktop rules stay untouched */
body.search .ast-archive-description h1.page-title{overflow-wrap:anywhere}
/* P1-b. the ordinary no match search page is not a 404, so the 4.6b
   single submit php gate does not apply and the svg icon button plus
   the text input submit both render; grow the field and both submits
   to the 44px touch floor on this page only */
body.search-no-results .no-results form.search-form input.search-field{min-height:44px}
body.search-no-results .no-results form.search-form button.search-submit.ast-search-submit{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
body.search-no-results .no-results form.search-form input[type="submit"].search-submit{min-height:44px}
/* P1-c. astra breadcrumb trail home anchor on search pages; the woo
   breadcrumb variant stays owned by the frozen T5-4.4 rule */
body.search .ast-breadcrumbs-wrapper nav.breadcrumb-trail a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}
/* ===== T5-4.6c touch target closure (END) ===== */
/* ===== T5-5.1-prep checkout button 44 floor (BEGIN) ===== */
/* pre-work closure for the T5-4.6 r2 carry over P1-1 (see
   reports/reviewer/T5-4.6-r2.md, problem P1-1): the frozen T5-4.5 rule
   at line 691 pins the block cart proceed anchor with specificity
   (0,2,1), but the woocommerce blocks rule
   body:not(.woocommerce-block-theme-has-button-styles)
   .wc-block-components-button:not(.is-link){min-height:3em}
   ships at specificity (0,3,1) in cart.css, checkout.css and
   packages-style.css, so 3em (43.776px at the block button font size)
   wins the cascade and the proceed anchor and the checkout place order
   button both measured 43.77px tall. this zone re-pins the same 44px
   floor with selectors at (0,3,2): one body type, one element type and
   three classes beat the upstream three class plus one type chain on
   type count, with no !important and no reliance on sheet order. scope
   is the block cart proceed anchor and the block checkout place order
   button only; classic shortcode cart and checkout use other wrappers
   and never match, the mini cart lives under wc-block-mini-cart, and
   the mobile only query leaves the desktop cascade untouched. geometry
   only: one min-height per selector, no paint, font, width or
   visibility change and no external url. the five mobile widths 320,
   375, 390, 412 and 768 all fall inside the query; geometry is
   re-measured by REV with CDP together with T5-5.1. */
@media(max-width:768px){
body .wc-block-cart a.wc-block-cart__submit-button.wc-block-components-button,
body .wc-block-checkout button.wc-block-components-checkout-place-order-button.wc-block-components-button{min-height:44px}
}
/* ===== T5-5.1-prep checkout button 44 floor (END) ===== */
/* ===== T5-6.10 scroll top footer clearance 320 bucket (BEGIN) ===== */
/* T5-5.7 P2-3 closure on the 320px handset only; the max-width:360px
   query matches the frozen 320 width and never applies at 375 or wider,
   whose frozen geometry is left untouched. below 768px the T5-4.3 marker
   zone renders the fixed scroll control as a 44px square at right and
   bottom 30px, while the colophon end band is 5.25rem (about 77px); at
   320 the four footer policy anchors wrap into two centered rows whose
   painted tracks reach the right corner, so the last row meets the
   control with only a sub 3px vertical margin while the footer scrolls
   past and the control can cover the anchors. park a smaller 36px
   painted square 14px from the edges and deepen the colophon end band
   to 62px for this bucket: at maximum scroll the last anchor row bottom
   stays 12px above the painted square and 8px above its transparent 44px
   hit area, so rect intersection is zero and every anchor center still
   resolves to the anchor under elementFromPoint. paint, color, z-index
   99, the javascript show and hide logic and the data-on-devices
   attribute are untouched; geometry only, one media query, no
   !important, no display or visibility change, no overflow masking and
   no external url. */
@media(max-width:360px){
/* visual square 36px parked 14px from the right and bottom edges; the id
   selector overrides the 2.1em astra size, the T5-4.3 44px minimums and
   the 30px offsets on .ast-scroll-to-top-right inside this bucket only */
#ast-scroll-top{width:36px;min-width:36px;height:36px;min-height:36px;right:14px;bottom:14px}
/* transparent pseudo keeps the shared 44px touch minimum by extending
   four pixels past every edge of the 36px square; it paints nothing and
   stays inside the reserved 62px end band, so it cannot cover a footer
   anchor at maximum scroll */
#ast-scroll-top::before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;z-index:-1}
/* end band equals 36px control height plus 14px edge offset plus a 12px
   visual gap; same id plus class specificity as the T5-4.3 band rule,
   later source order wins inside this bucket only */
#colophon.site-footer{padding-bottom:62px}
}
/* ===== T5-6.10 scroll top footer clearance 320 bucket (END) ===== */
/* ===== T5-7.8 fr lang (BEGIN) ===== */
/* Brand styling for the TranslatePress shortcode language switcher injected by
   T5-7.7 into the desktop primary menu and the mobile off-canvas menu. Only
   the T5-7.7 frozen wrapper classes are used; every value comes from the
   T5-3.1 root tokens. Desktop (astra swaps at 922px): the in-flow menu item
   keeps zero width, so the frozen five-link geometry and the 96px reserved
   right band at line 84 stay byte-identical; the whole unit is lifted into
   that band and centered. Mobile: full width row with a 44px touch floor;
   names wrap instead of clipping or overflowing. plugin defaults and tp
   inline custom props are beaten by id/class specificity; flag images are
   removed server side by the T5-7.8-collab-1 filter, so no css flag rule. */
.mokalun-lang-switch{box-sizing:border-box;max-width:100%}
.mokalun-lang-switch .trp-shortcode-switcher__wrapper{box-sizing:border-box;max-width:100%}
@media(min-width:922px){
/* zero-width in-flow slot: the lifted unit cannot move the five frozen links
   or change the reserved 96px right margin on the menu ul. the slot li is the
   last flex child, so its x origin is exactly the band start (ul content right
   edge); the box therefore grows rightward with left:0 into the reserved band
   instead of extending left over the final menu link */
#ast-desktop-header li.mokalun-lang-nav-item--primary{position:relative;flex:0 0 auto;list-style:none;margin:0;padding:0}
#ast-desktop-header li.mokalun-lang-nav-item--primary .mokalun-lang-switch--desktop{position:absolute;top:50%;left:0;margin-left:4px;transform:translateY(-50%);max-width:90px}
/* text-only compact chip sized to fit the 96px band; closed state is
   borderless text like the menu items, open state is the card system
   (hairline border, large radius, card shadow on white) */
#ast-desktop-header .mokalun-lang-switch--desktop .trp-shortcode-switcher{padding:0;background:transparent;border:0;border-radius:var(--radius-lg);box-shadow:none}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-shortcode-overlay.is-open{background:#ffffff;border:1px solid var(--hairline);box-shadow:var(--shadow-card)}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-current-language-item__wrapper{padding-right:2px;color:var(--accent)}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-language-item{gap:0;padding:4px 6px}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-shortcode-arrow{width:14px;height:14px;flex:0 0 auto}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-shortcode-arrow path{stroke:currentColor}
/* nowrap name with the flag gone and tight chrome: max-content width is
   about 82px (54px longest name + 12 item padding + 14 arrow + 2 wrap pad),
   under the 90px clamp, so shrink-to-fit never clips either language name */
#ast-desktop-header .mokalun-lang-switch--desktop .trp-language-item-name{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-normal);line-height:1.3;letter-spacing:normal;color:var(--ink);white-space:nowrap}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-language-item:not(.trp-language-item__current):hover .trp-language-item-name{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-language-item__current .trp-language-item-name,
#ast-desktop-header .mokalun-lang-switch--desktop .trp-language-item[aria-current="true"] .trp-language-item-name{color:var(--accent)}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-language-item:hover{background-color:transparent}
#ast-desktop-header .mokalun-lang-switch--desktop .trp-language-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
@media(max-width:921px){
/* full-width row at the end of the off-canvas list; hairline plus token gap
   keeps the mobile list rhythm; every text node wraps and shrinks first, so
   no long french word can widen the document or get clipped */
#ast-mobile-site-navigation li.mokalun-lang-nav-item--mobile_menu{width:100%;list-style:none;margin:0;padding:var(--space-2) 0 0;border-top:1px solid var(--hairline)}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile,
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-shortcode-switcher__wrapper,
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-shortcode-switcher{display:block;width:100%;max-width:100%}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-shortcode-switcher{padding:0;background:transparent;border:0;border-radius:var(--radius-lg);box-shadow:none}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-shortcode-overlay.is-open{background:#ffffff;border:1px solid var(--hairline);box-shadow:var(--shadow-card)}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-current-language-item__wrapper{padding-right:8px;color:var(--accent)}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-language-item{gap:8px;padding:10px 20px;min-height:44px}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-shortcode-arrow{width:18px;height:18px;flex:0 0 auto}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-shortcode-arrow path{stroke:currentColor}
/* 15px matches the astra static mobile menu link size; horizontal padding
   aligns the name with the menu labels above */
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-language-item-name{flex:0 1 auto;min-width:0;font-family:var(--font-sans);font-size:15px;font-weight:var(--weight-normal);line-height:1.4;letter-spacing:normal;color:var(--ink);white-space:normal;overflow:visible;text-overflow:clip}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-language-item:not(.trp-language-item__current):hover .trp-language-item-name{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-language-item__current .trp-language-item-name,
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-language-item[aria-current="true"] .trp-language-item-name{color:var(--accent)}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-language-item:hover{background-color:transparent}
#ast-mobile-site-navigation .mokalun-lang-switch--mobile .trp-language-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
/* ===== T5-7.8 fr lang (END) ===== */