/*
Theme Name: Kiosko Child Theme
Text Domain: kiosko-child
Template: kiosko
Description: Child theme for E-Art24 (WooCommerce wall-art shop).
Author: E-Art24
Author URI: https://e-art24.com
Theme URI: https://e-art24.com
Version: 1.1.0
*/

/* ======================================================================
   TABLE OF CONTENTS

    1. Design tokens
    2. Global utilities and small fixes
    3. Site header
    4. Button system
    5. Shop / archive grid
    6. Sale badge
    7. Pinterest save button
    8. Pagination
    9. Single product: breadcrumb, image, variations, price
   10. Single product: info lines, summary box, notices
   11. Product details / cart UI small tweaks
   12. Select controls (sorting + variation dropdowns)
   13. Category sidebar and off-canvas filter
   14. Editorial pages (About / Privacy / Refunds / Support)
   15. Cart page (Woo Blocks)
   16. Search results (desktop)
   17. Mini-cart drawer
   18. Checkout
   19. AddToAny share buttons
   20. MailPoet subscribe block + footer links
   21. Logo
   22. Product tabs and panels (typography + spec tables)
   23. Front page (Front Page template)
   24. Breakpoint: >= 768px (desktop / tablet)
   25. Breakpoint: >= 992px (cart layout)
   26. Breakpoint: <= 767.98px (mobile)
   27. Breakpoint: <= 781px (front page mobile)
   28. Breakpoints: <= 1100px / <= 600px (front page format tiles)
   29. Breakpoint: >= 1200px (category header, side by side)
   30. Parked toggles (inactive on purpose)

   Conventions
   - All colours, radii and button metrics live in section 1. Change them
     there, not inline.
   - Media queries are grouped at the end (sections 24-29) so the cascade
     is easy to follow: base styles first, breakpoints last.
   - !important is used throughout because most of this overrides Kiosko
     and WooCommerce block styles that are loaded after the child theme.
   ====================================================================== */


/* ======================================================================
   1) DESIGN TOKENS (single source of truth)
   ====================================================================== */
:root{
  /* Colour */
  --brand: gray;
  --text: dimgray;
  --text-dark: #222;
  --muted: #666;
  --border: #8f8f8f;
  --border-light: #ddd;
  --panel-bg: #f9f9f9;
  --accent: #ff4500;      /* the logo dot */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 30px;

  /* Buttons */
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-border: 2px;

  /* Product tab panels (see section 22). Overridden on mobile in 26. */
  --eart24-panel-font: 1rem;        /* body text in both panels            */
  --eart24-panel-title: 1.5rem;     /* panel names + description title     */
  --eart24-panel-heading: 1.15rem;  /* smaller headings inside a panel     */
  --eart24-attr-label: 7.5rem;      /* label column of the two spec tables */
  --eart24-tab-label: 1rem;         /* mobile tab buttons (mobile only)    */
}


/* ======================================================================
   2) GLOBAL UTILITIES AND SMALL FIXES
   ====================================================================== */
.radius-corners{ border-radius: var(--radius-lg); }

/* Hanging indent utility (used in the availability note) */
.hanging-indent{
  margin-left: 2.2rem;
  text-indent: -1.6rem;
}

/* Dots separator */
:where(.wp-block-separator.is-style-dots)::before{
  color: darkorange !important;
  font-size: 2em !important;
  letter-spacing: 1.2em !important;
  padding-left: 1.2em !important;
}

h1.wp-block-post-title{ font-size: 2rem; }


/* ======================================================================
   3) SITE HEADER (title, tagline, search alignment)
   ====================================================================== */
.wp-block-site-title a,
h1.wp-block-site-title a,
.wp-block-site-tagline,
p.wp-block-site-tagline{
  color: var(--text) !important;
  font-weight: 700 !important;
}

.wp-block-site-title a:hover{ color: var(--brand) !important; }

h1.wp-block-site-title a:hover{
  text-decoration: none !important;
  box-shadow: none;
}

/* Header search and tagline alignment */
header.wp-block-template-part
  > .wp-block-group.has-global-padding
  > .wp-block-group.alignwide.is-layout-flex{
  padding-bottom: 40px !important;
  padding-left: 0px !important;
}

header.wp-block-template-part .wp-block-search__input{
  height: 42px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 42px;
}

header.wp-block-template-part .wp-block-search__button{
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

header.wp-block-template-part form.wp-block-search{
  flex: 0 1 clamp(340px, 42vw, 620px) !important;
  max-width: clamp(340px, 42vw, 620px) !important;
}

header.wp-block-template-part
  .wp-block-group.alignwide.is-vertical.is-layout-flex
  > p.wp-block-site-tagline{
  font-size: 2.2rem !important;
}

header.wp-block-template-part .wp-block-site-tagline{
  margin-top: 1rem !important;
}


/* ======================================================================
   4) BUTTON SYSTEM (no-jump everywhere)
   ====================================================================== */
/* Canonical "no jump" button geometry: identical box in every state, so
   nothing shifts on hover. */
:where(
  .woocommerce a.button,
  .woocommerce button,
  .woocommerce .button,
  .woocommerce .wp-element-button,
  .wp-block-button .wp-element-button,
  .wp-block-button__link,
  .wc-block-components-button,
  .wc-block-components-product-button__button
){
  box-sizing: border-box !important;
  border-width: var(--btn-border) !important;
  border-style: solid !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  line-height: 1.2 !important;
  outline: 0 !important;
  box-shadow: none !important;

  background: #fff !important;
  background-color: #fff !important;
  color: var(--text) !important;
}

:where(
  .woocommerce a.button:hover,
  .woocommerce button:hover,
  .woocommerce .button:hover,
  .woocommerce .wp-element-button:hover,
  .wp-block-button .wp-element-button:hover,
  .wp-block-button__link:hover,
  .wc-block-components-button:hover,
  .wc-block-components-product-button__button:hover
){
  border-color: #00d084 !important;
  background: #fff !important;
  background-color: #fff !important;
  color: var(--text) !important;
}

/* Search button: fixed width, no shrink on hover */
.wp-block-search .wp-block-search__button,
.wp-block-search button.wp-block-search__button,
.wp-block-search button[type="submit"]{
  min-width: 72px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;

  background-color: var(--text) !important;
  border-color: var(--text) !important;
  color: #fff !important;
}

.wp-block-search .wp-block-search__button:hover,
.wp-block-search button.wp-block-search__button:hover,
.wp-block-search button[type="submit"]:hover{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* Single product "Add to cart": filled */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button{
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 12px 18px !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* WC block "product button" wrapper */
.wp-block-button.wc-block-components-product-button{ background-color: #fff; }

/* Drawer close button */
.wc-block-components-button.wc-block-components-drawer__close{
  padding: 0.5em !important;
  right: 20px;
  top: 15px;
}

.wc-block-components-button.wc-block-components-drawer__close:hover{
  border-color: orangered !important;
}


/* ======================================================================
   5) SHOP / ARCHIVE GRID
   ====================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  margin-bottom: 42px;
  display: block !important;
}

.woocommerce ul.products li.product a img{ margin-bottom: 16px; }

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 15px;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  margin: 6px 0 12px;
}

.woocommerce ul.products li.product .price{
  line-height: 1.3;
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

.woocommerce ul.products li.product .price del{ opacity: 0.45; }

.woocommerce ul.products li.product .price ins{
  text-decoration: none;
  font-weight: 600;
}

/* Centre the paragraph that wraps the loop product link */
p:has(> a.woocommerce-LoopProduct-link){
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}

/* --- Category archive header -----------------------------------------
   Title above, description card below it at full width. Section 29 turns
   this into the side-by-side version on wide screens.
   NOTE: .page-title is also the sidebar's "Subjects" heading, so every
   rule here is scoped to #product-grid. */
#product-grid > .page-title{
  margin: 0 0 1rem;
}

.term-description{
  margin: 0 0 1.5rem;
  padding: .85rem 1.15rem;
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text);
}

/* Size on the paragraph, not the wrapper: the block theme sets a
   font-size on p directly, and a direct declaration always beats an
   inherited one. */
.term-description p{
  margin: 0 0 .6rem;
  font-size: 1.08rem;
  line-height: 1.6;
}

.term-description p:last-child{ margin-bottom: 0; }

.woocommerce-result-count{ font-weight: bold; }

.wc-block-components-product-price__value{ font-weight: 600; }

div.wc-block-components-product-price.wc-block-grid__product-price{ font-size: 1rem; }

/* Search grid: stop the product-image wrapper inflating to 1500px */
.wp-block-post-template .wc-block-components-product-image img{
  aspect-ratio: revert-layer !important;
}


/* ======================================================================
   6) SALE BADGE (single source, consistent placement)
   ====================================================================== */
/* Positioning context for the badge */
.wp-block-woocommerce-product-image-gallery,
.woocommerce ul.products li.product,
.wp-block-query li.wp-block-post{
  position: relative;
}

/* The "Sale!" pseudo-element badge is OFF while there is no shop-wide sale.
   Its selectors carry no sale condition, so it would label every product.
   The rule, plus its mobile and search-page overrides, is parked in
   section 30 under "Shop-wide Sale! badge". The rules below are layout,
   not badge, and stay live. */

/* Shrink-wrap the loop link so the badge hangs off the image, not the cell */
.woocommerce ul.products li.product
  > a.woocommerce-loop-product__link:first-of-type{
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column;
  width: auto !important;
  max-width: 100% !important;
  vertical-align: top;
}

.woocommerce ul.products li.product
  > a.woocommerce-loop-product__link:first-of-type img{
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Woo native onsale flash, in case it ever renders */
.woocommerce span.onsale{
  font-size: 11px !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  min-height: auto !important;
  min-width: auto !important;

  background-color: #555 !important;
  color: #fff !important;
  opacity: 0.92;
}

/* Keep the gallery zoom trigger from covering the badge */
.wp-block-woocommerce-product-image-gallery .wc-block-product-gallery__trigger,
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__trigger{
  z-index: 5 !important;
}

.woocommerce-product-gallery__trigger{ display: none; }


/* ======================================================================
   7) PINTEREST SAVE BUTTON
   ====================================================================== */
.woocommerce ul.products li.product > .pinterest-for-woocommerce-image-wrapper{
  top: 23px !important;
  left: 13px !important;
}

.single-product .wp-block-group .pinterest-for-woocommerce-image-wrapper,
.single-product .woocommerce div.product div.images .pinterest-for-woocommerce-image-wrapper{
  top: 15px !important;
  left: 46px !important;
}


/* ======================================================================
   8) PAGINATION
   ====================================================================== */
.woocommerce nav.woocommerce-pagination ul{ border: 0 !important; }

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination .page-numbers,
.page-numbers{
  color: var(--text) !important;
  font-weight: 700 !important;
  padding: 7px 10px !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  border-radius: 8px !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current{
  background: #f3f3f3 !important;
}

.woocommerce nav.woocommerce-pagination .next.page-numbers,
.woocommerce nav.woocommerce-pagination .prev.page-numbers{
  font-weight: 400 !important;
  font-size: 1.25rem !important;
}


/* ======================================================================
   9) SINGLE PRODUCT: breadcrumb, image, variations, price
   ====================================================================== */
/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a{
  color: var(--text) !important;
  text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover{ color: var(--brand) !important; }

/* Title + main image */
.woocommerce div.product .product_title{ line-height: 1.25; }
.woocommerce div.product div.images img{ border-radius: var(--radius-sm); }

/* Variation table and selects */
table.variations{
  table-layout: auto !important;
  width: auto !important;
}

table.variations td.message-cell{
  vertical-align: middle !important;
  padding-left: 50px;
  width: 277px;
}

.woocommerce div.product form.cart table.variations td select{ min-width: 70%; }

.woocommerce table.variations tr td select{
  height: 3rem;
  padding: .9rem 1.1rem;
  font-size: var(--wp--preset--font-size--medium);
}

/* Woo block metadata description is redundant next to our own summary */
div.wc-block-components-product-metadata__description.text{ display: none; }

/* Attribute labels */
.woocommerce-product-attributes-item__label{ white-space: nowrap; }

/* Variation price block typography */
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .woocommerce-Price-amount{
  font-size: 1.06em;
}

.woocommerce del{ margin-right: 0.5em; }
.single-product .price del{ font-weight: 400; }
.single-product .price ins{ font-weight: 700; }

/* Discount label */
.discount-label{
  font-size: 0.92em;
  font-weight: 600;
  color: var(--muted);
}

.single-product .discount-label{
  color: red;
  font-weight: 700;
}

/* Let the variation area grow so the "Total" line is never clipped */
.single-product .woocommerce-variation.single_variation,
.single-product .woocommerce-variation-price,
.single-product .single_variation_wrap,
.single-product .single_variation_wrap .woocommerce-variation,
.single-product .single_variation_wrap .woocommerce-variation.single_variation{
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.single-product .wp-block-woocommerce-add-to-cart-form form.cart,
.single-product .wp-block-woocommerce-add-to-cart-form .variations_button{
  grid-auto-rows: auto !important;
  align-items: start !important;
}

.single-product .woocommerce div.product .single_variation_wrap{
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
}

/* Availability note box (the JS used to write these as inline styles) */
.eart24-variation-note{
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem 0.9rem 0;
  box-sizing: border-box;
}

table.variations td.message-cell > .eart24-variation-note{
  margin-top: 1.5rem;
}

/* Related products spacing */
.woocommerce .related.products{ margin-top: 36px; }


/* ======================================================================
   10) SINGLE PRODUCT: info lines, summary box, notices
   ====================================================================== */
/* Category / tag / spaces lines under the product */
.info-categories-tags,
.info-categories-tags a{
  color: #333;
  text-decoration: none;
  font-weight: normal;
  font-family: inherit;
}

.recommended-spaces-list{ color: #333; }

/* Selected-variation line */
.selection-info-right{
  font-weight: 500;
  display: block;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

/* "Choose your options" hint */
.selection-hint{
  padding: 15px;
  background-color: #e6e6e6;
  border-left: 4px solid #ccc;
  margin: 20px 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.description-subtitles{
  margin: 1.8rem 0 0.4rem 0;
  font-weight: bold;
}

/* Short summary panel above the tabs */
.single-product .eart24-summary{
  margin: 1rem 0 1.4rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  width: 75%;
}

.single-product .eart24-intro{ font-weight: 600; margin-bottom: 0.5rem; }

.single-product .eart24-summary .wc-block-components-product-summary{
  margin: 0;
  line-height: 1.55;
}

.wc-block-components-product-summary p{ font-size: 1.02rem !important; }

/* "Added to basket" notice */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content{
  display: flex;
  align-items: center !important;
  font-size: 1.1rem;
}

.wc-block-components-notice-banner__content
a.button.wc-forward.wp-element-button{
  margin-left: auto !important;
  padding: 10px !important;
  text-decoration: none;
}


/* ======================================================================
   11) PRODUCT DETAILS / CART UI SMALL TWEAKS
   ====================================================================== */
ul.wc-block-components-product-details{ font-size: initial; }

.wc-block-components-product-details__value{ font-weight: 400; }

/* Replace the "Size" label with our own, so it lines up with "Medium" */
li.wc-block-components-product-details__sizes span.wc-block-components-product-details__name{
  display: none;
}

li.wc-block-components-product-details__sizes::before{
  content: "Size: ";
  font-weight: bold;
  margin-right: 1.75rem;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon{
  color: darkorange !important;
  font-size: x-large !important;
}

div.wp-block-woocommerce-cart-order-summary-fee-block.wc-block-components-totals-wrapper{
  color: red !important;
}

/* Quantity spin control */
.woocommerce-page .input-text{
  font-size: 1em;
  line-height: 1.5em;
}

/* Mini-cart icon/button */
.wc-block-mini-cart__button{ font-size: 1.45em; }


/* ======================================================================
   12) SELECT CONTROLS (sorting + variation dropdowns)
   ====================================================================== */
select.orderby,
select#medium,
select#size{
  color: var(--text) !important;
  background-color: #fff !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 7px 12px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

select#medium,
select#size{ width: 300px !important; }

.woocommerce.wc-block-catalog-sorting select.orderby{ font-size: 15px !important; }

.woocommerce select.orderby:focus{
  outline: none !important;
  border-color: var(--brand) !important;
}


/* ======================================================================
   13) CATEGORY SIDEBAR AND OFF-CANVAS FILTER
   ====================================================================== */
.sidebar-products-wrapper{ display: flex; }

#category-sidebar{
  background-color: var(--panel-bg);
  padding: 0 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

#product-grid{
  margin: -5px 40px 40px 40px;
  flex: 1;
}

.toggle-sidebar-button{
  display: none;
  margin: 10px 0;
  background-color: var(--brand);
  color: #fff;
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.category-button{
  display: block;
  padding: 7px 10px;
  border: 1px solid #d7d7d7;
  border-bottom: 0;
  color: gray;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  margin-bottom: -1px;
  line-height: 1.6;
}

.category-button.pressed{
  background-color: var(--brand);
  color: #fff;
}

.category-button:hover{
  background-color: #f2fffa;
  color: #333;
}

/* "All" is handled by the shop link instead */
#all.category-button{ display: none; }

/* Close the list: the last visible button needs its own bottom border */
#all1.category-button,
#category-sidebar ul li:last-child a.category-button{
  border-bottom: 1px solid gray;
}


/* ======================================================================
   14) EDITORIAL PAGES (About / Privacy / Refunds / Support)
   Page IDs: 2, 3, 11, 13465
   ====================================================================== */
:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465)
  :is(
    .woocommerce-breadcrumb,
    .storefront-breadcrumb,
    .breadcrumbs,
    nav[aria-label="Breadcrumb"]
  ){
  display: none !important;
}

:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465) h2.wp-block-post-title{
  max-width: 720px;
  margin: 0 auto 1rem;
  text-align: left;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465) .entry-content{
  max-width: 720px;
  margin: 10px auto 0;
  text-align: left;
}

:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465) .entry-content p{
  margin: 0 0 0.9em 0;
}

:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465) .entry-content h3{
  margin: 1.7em 0 0.6em;
  font-size: 1.4rem;
  font-weight: 600;
  color: inherit;
  line-height: 1.3;
}

:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465)
  :is(.entry-content p + ul, .entry-content p + ol){
  margin-top: 0.2em;
}

:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465)
  :is(.entry-content ul, .entry-content ol){
  margin: 0 0 1em 0;
  padding-left: 2.7em;
}

:is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465) .entry-content li{
  margin-bottom: 0.35em;
}


/* ======================================================================
   15) CART PAGE (Woo Blocks)
   Scope: the Cart page only, via main[data-page="cart"]
   ====================================================================== */
body main[data-page="cart"] .wp-block-woocommerce-cart{
  font-size: 18px;
  line-height: 1.45;
}

/* Widen the container */
body main[data-page="cart"] .wp-block-woocommerce-cart.alignwide{
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
}

body main[data-page="cart"] .wp-block-woocommerce-cart,
body main[data-page="cart"] .wp-block-woocommerce-cart *{
  color: dimgray !important;
}

/* No underlines on links or the "Remove item" button */
body main[data-page="cart"] .wp-block-woocommerce-cart a,
body main[data-page="cart"] .wp-block-woocommerce-cart a:hover,
body main[data-page="cart"] .wp-block-woocommerce-cart a:focus,
body main[data-page="cart"] .wp-block-woocommerce-cart button.wc-block-cart-item__remove-link,
body main[data-page="cart"] .wp-block-woocommerce-cart button.wc-block-cart-item__remove-link:hover{
  text-decoration: none !important;
  box-shadow: none !important;
}

/* --- Headers ---------------------------------------------------------
   "Cart totals" is an h2; the table header must override Woo's cart.css
   (14px) at the same selector level, hence the table.* prefix. */
body main[data-page="cart"] .wp-block-woocommerce-cart .wc-block-cart__totals-title,
body main[data-page="cart"] table.wc-block-cart-items .wc-block-cart-items__header{
  font-size: 1.1em !important;   /* approx. 19.8px */
  font-weight: 700 !important;
  letter-spacing: .02em;
}

body main[data-page="cart"]
table.wc-block-cart-items .wc-block-cart-items__header th{
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* --- Product title --------------------------------------------------- */
body main[data-page="cart"] .wp-block-woocommerce-cart a.wc-block-components-product-name{
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* --- One text size across table and totals --------------------------- */
body main[data-page="cart"] .wp-block-woocommerce-cart :is(
  .wc-block-cart-item__product,
  .wc-block-cart-item__total,
  .wc-block-components-sidebar,
  .wp-block-woocommerce-cart-totals-block,
  .wp-block-woocommerce-cart-order-summary-block,
  .wc-block-components-totals-wrapper,
  .wc-block-components-totals-item,
  .wc-block-components-totals-footer-item,
  .wc-block-components-totals-item__label,
  .wc-block-components-totals-item__value,
  .wc-block-components-totals-footer-item-tax-value,
  .wc-block-components-panel__button,
  .wc-block-components-formatted-money-amount,
  .wc-block-components-product-price,
  .wc-block-cart-item__prices,
  .wc-block-cart-item__prices del,
  .wc-block-cart-item__prices ins,
  .wc-block-components-product-details__name,
  .wc-block-components-product-details__value,
  .wc-block-components-quantity-selector__input,
  .wc-block-components-quantity-selector__button
){
  font-size: 1em !important;
  line-height: 1.45 !important;
}

/* --- "SAVE $..." badges ---------------------------------------------- */
body main[data-page="cart"] .wp-block-woocommerce-cart
.wc-block-components-product-badge.wc-block-components-sale-badge{
  font-size: .8em !important;
  line-height: 1.2 !important;
  padding: .25em .6em !important;
}

/* --- Thumbnail (size the image and its cell only, to stay table-safe) - */
body main[data-page="cart"] .wp-block-woocommerce-cart .wc-block-cart-item__image{
  width: clamp(80px, 10vw, 140px) !important;
}

body main[data-page="cart"] .wp-block-woocommerce-cart .wc-block-cart-item__image img{
  width: clamp(70px, 9vw, 120px) !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* --- Quantity + Remove item (centred under the selector) -------------- */
body main[data-page="cart"] .wp-block-woocommerce-cart .wc-block-cart-item__quantity{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .35em;
  width: fit-content;
}

body main[data-page="cart"] .wp-block-woocommerce-cart
.wc-block-cart-item__quantity .wc-block-cart-item__remove-link{
  display: block !important;
  width: 100%;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  font-size: .8em !important;
}

/* --- Product column width (table-safe) -------------------------------- */
body main[data-page="cart"] .wp-block-woocommerce-cart
.wc-block-cart-items__header-product,
body main[data-page="cart"] .wp-block-woocommerce-cart
.wc-block-cart-item__product{
  width: min(600px, 100%) !important;
  min-width: 0 !important;
}


/* ======================================================================
   16) SEARCH RESULTS (desktop; mobile overrides in section 26)
   ====================================================================== */
body.search .search-results-with-sidebar{
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.search .search-results-with-sidebar
> .search-results-column{
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;

  /* Same margins as #product-grid on the homepage */
  margin: -5px 40px 40px !important;
}

/* Three products per row */
body.search .search-results-column :is(
  ul.wp-block-post-template,
  ul.wc-block-product-template,
  ul.wp-block-woocommerce-product-template
){
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}


/* ======================================================================
   17) MINI-CART DRAWER
   ====================================================================== */
/* --- Base typography and colour (scoped, not a global *) -------------- */
.wc-block-mini-cart__items{
  font-size: 18px;
  line-height: 1.45;
  color: dimgray !important;
}

.wc-block-mini-cart__items,
.wc-block-mini-cart__items .wc-block-components-product-name,
.wc-block-mini-cart__items .wc-block-components-product-details__name,
.wc-block-mini-cart__items .wc-block-components-product-details__value,
.wc-block-mini-cart__items .wc-block-cart-item__prices,
.wc-block-mini-cart__items .wc-block-cart-item__total,
.wc-block-mini-cart__items .wc-block-components-product-price,
.wc-block-mini-cart__items .wc-block-components-product-badge{
  color: dimgray !important;
}

.wc-block-mini-cart__items a,
.wc-block-mini-cart__items a:hover,
.wc-block-mini-cart__items a:focus{
  text-decoration: none !important;
  box-shadow: none !important;
}

/* "Remove item" as plain text, no button chrome */
.wc-block-mini-cart__items button.wc-block-cart-item__remove-link{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  cursor: pointer;
  text-decoration: none !important;
}

/* --- Thumbnail (single image only) ------------------------------------ */
/* Woo prints a hidden fallback IMG as well; hide it to avoid doubles */
.wc-block-mini-cart__items .wc-block-cart-item__image > img[hidden]{
  display: none !important;
}

.wc-block-mini-cart__items .wc-block-cart-item__image{ width: 110px !important; }

.wc-block-mini-cart__items .wc-block-cart-item__image a{ display: block; }

.wc-block-mini-cart__items .wc-block-cart-item__image a > img{
  width: 90px !important;
  height: auto !important;
  max-width: none !important;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

/* --- Product name and pricing ----------------------------------------- */
.wc-block-mini-cart__items a.wc-block-components-product-name{
  font-size: 1.08em !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.wc-block-mini-cart__items .wc-block-cart-item__prices{ margin-top: .25em; }

.wc-block-mini-cart__items .wc-block-components-product-badge.wc-block-components-sale-badge{
  font-size: .7em !important;
  line-height: 1.2 !important;
  padding: .25em .6em !important;
}

/* --- Quantity selector and Remove item -------------------------------- */
.wc-block-mini-cart__items .wc-block-cart-item__quantity{
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .45em;
  width: auto;                    /* safer than fit-content */
}

.wc-block-mini-cart__items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link{
  display: block !important;
  width: 100%;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: .8em !important;
  font-weight: 400 !important;
}

/* Match the cart's quantity control: one bordered box, flat buttons */
.wc-block-mini-cart__items .wc-block-components-quantity-selector{
  display: inline-flex !important;
  align-items: stretch !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #fff !important;
  padding: 0 !important;
  width: auto;
}

.wc-block-mini-cart__items .wc-block-components-quantity-selector__button{
  position: static !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
}

.wc-block-mini-cart__items .wc-block-components-quantity-selector__input{
  border: 0 !important;
  border-left: 1px solid #d0d0d0 !important;
  border-right: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 54px !important;
  height: 44px !important;
  line-height: 44px !important;
  text-align: center !important;
  padding: 0 !important;
}

.wc-block-mini-cart__items .wc-block-components-quantity-selector__button:focus,
.wc-block-mini-cart__items .wc-block-components-quantity-selector__button:focus-visible,
.wc-block-mini-cart__items .wc-block-components-quantity-selector__input:focus,
.wc-block-mini-cart__items .wc-block-components-quantity-selector__input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.wc-block-mini-cart__items .wc-block-components-quantity-selector__button,
.wc-block-mini-cart__items .wc-block-components-quantity-selector__input{
  font-size: 1em !important;
}

/* --- Forced layout: table -> block, rows -> grid ----------------------
   Woo Blocks' table markup overlaps thumbnail and text inside the narrow
   drawer; a grid per row is the only reliable fix. */
.wc-block-components-drawer .wc-block-mini-cart__items
table.wc-block-cart-items.wc-block-mini-cart-items,
.wc-block-components-drawer .wc-block-mini-cart__items
table.wc-block-cart-items.wc-block-mini-cart-items tbody{
  display: block !important;
  width: 100% !important;
}

.wc-block-components-drawer .wc-block-mini-cart__items
table.wc-block-cart-items.wc-block-mini-cart-items thead{
  display: none !important;      /* headers not needed inside the drawer */
}

/* image | details | total  (auto for the total is more robust than 110px) */
.wc-block-components-drawer .wc-block-mini-cart__items
table.wc-block-cart-items.wc-block-mini-cart-items tbody
tr.wc-block-cart-items__row{
  display: grid !important;
  grid-template-columns: 110px 1fr auto !important;
  column-gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
}

.wc-block-components-drawer .wc-block-mini-cart__items
table.wc-block-cart-items.wc-block-mini-cart-items tbody
tr.wc-block-cart-items__row > td{
  display: block !important;
  font-size: 1em;
  font-weight: 600;
}

.wc-block-components-drawer .wc-block-mini-cart__items td.wc-block-cart-item__image{
  grid-column: 1 !important;
  overflow: hidden !important;
}

.wc-block-components-drawer .wc-block-mini-cart__items td.wc-block-cart-item__product{
  grid-column: 2 !important;
  overflow: hidden !important;
}

.wc-block-components-drawer .wc-block-mini-cart__items td.wc-block-cart-item__total{
  grid-column: 3 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* The product name must wrap, never slide under the image */
.wc-block-components-drawer .wc-block-mini-cart__items
td.wc-block-cart-item__product a.wc-block-components-product-name{
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}


/* ======================================================================
   18) CHECKOUT
   ====================================================================== */
.woocommerce-checkout{ font-size: 1.05rem; }

.woocommerce-checkout .wp-block-site-title a{ font-size: 3rem !important; }

.woocommerce-checkout .wp-block-site-title a:hover{ text-decoration: none !important; }

.woocommerce-checkout h1{
  font-size: 2.5rem !important;
  margin-left: 0px !important;
  color: dimgray;
}

.woocommerce-checkout h2,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text{
  font-size: 1.4rem !important;
}

.woocommerce-checkout .wc-block-components-title.wc-block-components-title{
  margin-top: 2rem !important;
}

.woocommerce-checkout .wc-block-components-product-name{ margin-bottom: 1rem !important; }

.wc-block-components-product-metadata{ margin-top: 1rem !important; }

.wc-block-components-sidebar{ padding-left: 0; }

/* Order summary thumbnail: hold a fixed width so text can't flatten it */
.wc-block-components-order-summary-item__image{
  width: 120px !important;
  min-width: 120px !important;
  flex-basis: 120px !important;   /* needed for the flex layout */
  flex-shrink: 0 !important;
}

.wc-block-components-order-summary-item__image img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 450 / 300 !important;   /* the artwork proportions */
  max-width: none !important;
  object-fit: cover !important;
}

/* Quantity badge sits on the new right edge */
.wc-block-components-order-summary-item__quantity{
  z-index: 10 !important;
  right: 0px !important;
  top: -5px !important;
}


/* ======================================================================
   19) ADDTOANY SHARE BUTTONS
   ====================================================================== */
.a2a_kit{
  float: left;
  margin-top: 0px;
  position: relative;      /* keeps the icons above the GPay container */
  z-index: 10;
  clear: none !important;  /* stops WordPress forcing a new line */
}


/* ======================================================================
   20) MAILPOET SUBSCRIBE BLOCK + FOOTER LINKS
   ====================================================================== */
.subscribe-block{
  width: 30%;
  margin-top: 5rem !important;
  text-align: center;
}

.subscribe-block summary{
  display: inline-block;
  cursor: pointer;
}

.subscribe-block summary::-webkit-details-marker{ display: none; }

.wp-block-group.footer-links{
  padding-bottom: 2rem !important;
  padding-top: 5rem !important;
}

/* Space the links apart instead of padding the markup with blank
   characters. */
.footer-links-par > a{
  padding-left: 10px;
  padding-right: 10px;
}


/* ======================================================================
   21) LOGO (inline SVG in the header)
   ====================================================================== */
.logo-link{
  display: inline-flex !important;
  /* Negative margin pulls the logo past the parent padding so it lines
     up with the tagline. */
  margin-left: -8px !important;
  text-decoration: none;
  line-height: 0;
}

.logo-svg{
  width: 250px;
  height: auto;
  display: block;
}

.logo-text{
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 110px;
  font-weight: bold;
  fill: #696969;
}

/* Accents */
#logo-dash,
#logo-dot{ fill: #ff4500; }

/* Front page: hide the empty breadcrumbs row (second wide row in header) */
.home header .wp-block-group.alignwide + .wp-block-group.alignwide{
  display: none;
}


/* ======================================================================
   22) PRODUCT TABS AND PANELS (typography + spec tables)

   One type size for BOTH panels, at every width. The description panel is
   injected HTML that carries its own sizes (the collapsible sections even
   have inline font-size), while the additional-information panel picks up
   .woocommerce-Tabs-panel and .left-panel. That mismatch is why the tabs
   did not match, so everything inside a panel now inherits from the panel.

   The numbers to touch are the --eart24-panel-* tokens in section 1
   (and their mobile values in section 26).
   ====================================================================== */
/* Force the description tab to exist. The PANEL is only forced open on
   desktop (section 24), where both panels sit side by side and the tab
   list is hidden. On mobile it must stay toggleable, or WooCommerce's tab
   script cannot hide it and both panels show at once. */
.description_tab{ display: block !important; }

.woocommerce-Tabs-panel,
.td{ font-size: 1.02rem !important; }

.left-panel{ font-size: 1.02rem; }

.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--additional_information{
  border: 1px solid #ddd;
  background: #f9f9f9;
}

.single-product .woocommerce-tabs .panel{
  font-size: var(--eart24-panel-font) !important;
  line-height: 1.55;
}

.single-product .woocommerce-tabs .panel *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
  font-size: inherit !important;
  line-height: inherit;
}

/* The panel name ("Description", "Additional information") and the title
   that opens the description are all headings, so they share one size. */
.single-product .woocommerce-tabs .panel h2,
.single-product .woocommerce-tabs .panel h3{
  font-size: var(--eart24-panel-title) !important;
  line-height: 1.25;
  margin: 0.5rem 0 0.6rem;
}

.single-product .woocommerce-tabs .panel h2 {
    font-weight: 450;
    font-size: 2.1rem !important;
}

.single-product .woocommerce-tabs .panel h4,
.single-product .woocommerce-tabs .panel h5,
.single-product .woocommerce-tabs .panel h6{
  font-size: var(--eart24-panel-heading) !important;
  line-height: 1.3;
  margin: 1.2rem 0 0.4rem;
}

/* :first-child alone does not reach the "Description" heading, because the
   panel starts with a hidden element; without :first-of-type it sat about
   1.4rem lower than "Additional information". */
.single-product .woocommerce-tabs .panel > *:first-child,
.single-product .woocommerce-tabs .panel > h2:first-of-type{
  margin-top: 0;
}

/* --- Spec tables: one gutter for the whole list, at every width -------
   The Category / Tag / Spaces / Gifts rows carry inline padding-right of
   2.5rem and 3.2rem, which widened the gutter halfway down the card.
   table-layout:fixed is what actually pins it: with the default auto
   layout the browser hands the card's spare width to the label column. */
.single-product .woocommerce-tabs .panel table{
  width: 100% !important;
  table-layout: fixed !important;
  margin: 0 0 0.6rem;
}

.single-product .woocommerce-tabs .panel table th{
  width: var(--eart24-attr-label) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  vertical-align: top !important;
  overflow-wrap: break-word;
}

.single-product .woocommerce-tabs .panel table td{
  padding-left: 0 !important;
  vertical-align: top !important;
  overflow-wrap: break-word;
}


/* ======================================================================
   23) FRONT PAGE (Front Page template)
   ====================================================================== */
/* Shared values, matched to #category-sidebar and the logo */
.ea-front{
  --ea-panel-bg: var(--panel-bg, #f9f9f9);
  --ea-panel-border: #e6e6e6;
  --ea-radius: 8px;
  --ea-accent: var(--accent);
}

/* Shared panel look: hero, format tiles, trust tiles */
.ea-hero,
.ea-card,
.ea-trust__list li{
  background: var(--ea-panel-bg);
  border: 1px solid var(--ea-panel-border);
  border-radius: var(--ea-radius);
}

/* Alignment with the header, and section spacing (padding, because the
   margins get overridden by the block layout) */
.ea-formats,
.ea-trust{
  padding-left: var(--wp--style--root--padding-left, 1.75rem);
  padding-right: var(--wp--style--root--padding-right, 1.75rem);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3.5rem;
}

.ea-trust{ padding-bottom: 4rem; }

.ea-section-title{ margin-bottom: 1.25rem; }

.ea-trust .ea-trust__list{ gap: 2rem; }

/* Format tiles: four across, halving at 1100px then 600px (section 28) */
.ea-formats .ea-formats__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* --- Hero band -------------------------------------------------------- */
.ea-hero{
  max-width: min(69%, 1200px);
  margin: 0 auto 2.5rem;
  padding: 2.5rem 2rem 2.25rem;
  text-align: center;
}

.ea-hero__title{
  margin: 0 0 1rem;
  text-wrap: balance;
  line-height: 1.15;
}

.ea-hero__title::after{
  content: "";
  display: block;
  width: 93%;
  height: 3px;
  margin: .4rem auto 0;
  background: var(--ea-accent);
  border-radius: 2px;
}

.ea-hero__text,
.ea-hero__note{
  max-width: 85%;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* The note keeps the same type, on a narrower measure */
.ea-hero__note{
  max-width: 62ch;
  margin: .55rem auto 0;
  text-wrap: balance;
}

/* --- Format tiles ----------------------------------------------------- */
.ea-card{
  padding: 1.5rem 1.75rem;
  border-top: 3px solid var(--ea-accent);
}

.ea-card h3{ margin: 0 0 .5rem; }
.ea-card p{ margin: 0; }

/* --- Trust tiles ------------------------------------------------------ */
.ea-trust__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  text-align: center;
  line-height: 1.5;
}

.ea-trust__list li{
  margin: 0;
  padding: 1.5rem 1.25rem;
  border-top: 3px solid var(--ea-accent);
}

.ea-trust__list strong{
  display: inline-block;
  font-size: 1.05rem;
  margin-bottom: .2rem;
}

.ea-trust__list li::before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto .75rem;
  background: var(--ea-accent);
  -webkit-mask: var(--ea-icon) center / contain no-repeat;
  mask: var(--ea-icon) center / contain no-repeat;
}

/* star: exclusive */
.ea-trust__list li:nth-child(1){
  --ea-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

/* truck: US shipping */
.ea-trust__list li:nth-child(2){
  --ea-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

/* shield: arrives right */
.ea-trust__list li:nth-child(3){
  --ea-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}


/* ======================================================================
   24) BREAKPOINT: >= 768px  (desktop / tablet)
   Product tabs side by side; the tab list is hidden at this width.
   ====================================================================== */
@media (min-width: 768px){

  .woocommerce-tabs{
    display: flex;
    align-items: flex-start;
  }

  .woocommerce-tabs ul.tabs{ display: none; }

  .woocommerce-tabs .woocommerce-Tabs-panel--description{
    width: 50%;
    padding: 0 20px 20px;
    box-sizing: border-box;
    order: 2;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
  }

  .woocommerce-tabs .woocommerce-Tabs-panel--additional_information{
    display: block !important;
    width: 34%;
    margin-right: 0.5rem;
    padding: 0 20px 20px;
    box-sizing: border-box;
    order: 1;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
  }

  /* Both panels stay open, so both titles must show */
  .woocommerce-Tabs-panel h2:first-of-type,
  #tab-description{ display: block !important; }

  .single-product .woocommerce-tabs .panel{ padding-top: 1.4rem; }

  .wc-block-components-drawer{
    --drawer-width: 560px;
    --neg-drawer-width: -560px;
  }

  header .wp-block-woocommerce-customer-account{
    transform: translateX(90px);
  }
}


/* ======================================================================
   25) BREAKPOINT: >= 992px  (cart page layout)
   Main column + sidebar only; the table columns are left alone.
   ====================================================================== */
@media (min-width: 992px){

  body main[data-page="cart"] .wp-block-woocommerce-cart .wc-block-components-sidebar-layout{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    column-gap: 1.4em !important;
  }

  body main[data-page="cart"] .wp-block-woocommerce-cart .wc-block-components-main{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 1em !important;
  }

  body main[data-page="cart"] .wp-block-woocommerce-cart .wc-block-components-sidebar{
    flex: 0 0 320px !important;
    max-width: 320px !important;
  }
}


/* ======================================================================
   26) BREAKPOINT: <= 767.98px  (mobile)

   C1) variation selectors      C4) tab panels
   C2) availability note        C5) attributes table
   C3) tab bar                  C6) mini-cart / cart / checkout items
   ====================================================================== */
@media (max-width: 767.98px){

  :root{
    --eart24-panel-font: 0.95rem;
    --eart24-panel-heading: 1.05rem;
    --eart24-attr-label: 38%;
  }

  /* --- General product-page adjustments ------------------------------- */
  .hanging-indent{ margin-left: 1rem; }

  .unframed-text,
  .framed-text,
  .poster-text,
  .framed-poster-text{
    width: 100%;
    margin-left: 0;
  }

  .taxonomy-product_cat{ padding-right: 10px; }

  .single-product .eart24-summary{ width: 87%; }

  /* --- Product category off-canvas filter ----------------------------- */
  .toggle-sidebar-button{
    display: inline-block;
    padding: 9px 13px;
    margin-bottom: 0;
    width: 105px;
  }

  p:has(> .toggle-sidebar-button){ margin-bottom: 0; }

  .toggle-and-sidebar-container{
    position: relative;
    display: inline-block;
  }

  .sidebar-products-wrapper{ display: block; }

  .offcanvas-sidebar{
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--panel-bg);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
    border-radius: 4px;
  }

  .offcanvas-sidebar.open{ transform: translateX(0); }

  #category-sidebar{
    padding: 0 10px;
    opacity: 90%;
  }

  .category-button{
    font-size: 10px;
    font-weight: bold;
  }

  #product-grid{ margin: 18px 10px 40px 10px; }

  .page-title{
    display: none;
    font-size: 1.7rem;
  }

  .woocommerce .woocommerce-result-count{
    font-size: 0.85rem !important;
    font-weight: bold;
  }

  .woocommerce select.orderby{ font-size: 0.75rem !important; }

  .woocommerce.wc-block-catalog-sorting select.orderby{ font-size: 12px !important; }

  /* --- Editorial pages ------------------------------------------------ */
  :is(.page-id-2, .page-id-3, .page-id-11, .page-id-13465)
  :is(.entry-content, h2.wp-block-post-title){
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Sharing and subscription --------------------------------------- */
  .a2a_kit{
    float: none;
    margin-top: 20px;
  }

  .subscribe-block{ width: 90%; }

  /* --- Home / archive grid -------------------------------------------- */
  /* Remove the left product indentation */
  .woocommerce ul.products::before,
  .woocommerce ul.products::after{
    content: none !important;
    display: none !important;
  }

  /* --------------------------------------------------------------
     C1) VARIATION SELECTORS - stack label over select, full width.
     Fixes selects that were too wide and too far apart, and the table
     overflowing the viewport. (The huge vertical gap between Medium and
     Size came from the tall right-hand note cell stretching both rows;
     that cell is removed on mobile, see C2.)
     -------------------------------------------------------------- */
  .single-product table.variations{
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 0.25rem !important;
    border: 0;
  }

  .single-product table.variations tbody,
  .single-product table.variations tr{
    display: block;
    width: 100%;
  }

  .single-product table.variations tr{ margin: 0 0 0.9rem; }

  .single-product table.variations th,
  .single-product table.variations td{
    display: block;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    vertical-align: top;
  }

  .single-product table.variations th.label{ margin-bottom: 0.3rem; }

  .single-product table.variations th.label label{
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .single-product table.variations td.value select,
  .woocommerce div.product form.cart table.variations td select{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 2.9rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 1rem !important;
    box-sizing: border-box;
  }

  .single-product table.variations a.reset_variations{
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
  }

  /* --------------------------------------------------------------
     C2) AVAILABILITY NOTE - under the selectors, inside the viewport
     -------------------------------------------------------------- */
  .single-product table.variations td.message-cell,
  .single-product table.variations th.message-header{
    display: none !important;
  }

  .single-product .eart24-variation-note{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.25rem 0 1.1rem !important;
    padding: 0.8rem 0.9rem 0.8rem 0.3rem !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: var(--radius-sm);
    background: #f7f7f7;
    font-size: 0.95rem;
  }

  .single-product .eart24-variation-note .hanging-indent{
    margin-left: 1.7rem !important;
    text-indent: -1.5rem;
    line-height: 1.4;
  }

  /* --------------------------------------------------------------
     C3) TABS - two equal buttons on one row, no wrapping artefacts
     -------------------------------------------------------------- */
  .single-product .woocommerce-tabs{
    display: block;
    margin-top: 1.6rem;
    padding: 0;
  }

  .single-product .woocommerce-tabs ul.tabs{
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin: 0 0 0.9rem !important;
    padding: 0 !important;
    list-style: none;
    border: 0 !important;
    box-shadow: none !important;
  }

  .single-product .woocommerce-tabs ul.tabs::before,
  .single-product .woocommerce-tabs ul.tabs::after,
  .single-product .woocommerce-tabs ul.tabs li::before,
  .single-product .woocommerce-tabs ul.tabs li::after{
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .single-product .woocommerce-tabs ul.tabs li{
    display: flex !important;
    flex: 1 1 0;
    min-width: 0;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
  }

  .single-product .woocommerce-tabs ul.tabs li a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.4rem !important;
    text-align: center;
    font-size: var(--eart24-tab-label);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text) !important;
    text-decoration: none !important;
  }

  .single-product .woocommerce-tabs ul.tabs li.active{
    background: var(--panel-bg) !important;
    border-color: var(--border) !important;
  }

  .single-product .woocommerce-tabs ul.tabs li.active a{
    color: var(--text-dark) !important;
  }

  /* --------------------------------------------------------------
     C4) PANELS - one at a time, full width, no overflow
     -------------------------------------------------------------- */
  /* Safety net: beats `#tab-description{display:block !important}` from
     section 24 even if it is not scoped. WooCommerce's tab script writes
     an inline `display: none` on the panel it hides; this respects it. */
  .single-product .woocommerce-tabs #tab-description[style*="display: none"],
  .single-product .woocommerce-tabs #tab-additional_information[style*="display: none"]{
    display: none !important;
  }

  .single-product .woocommerce-tabs .panel{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--panel-bg);
  }

  /* Inner "Additional information" table: kill the desktop-sized inline
     paddings and the nowrap labels so nothing pushes past the screen. */
  .single-product .woocommerce-tabs .panel table{ max-width: 100% !important; }

  .single-product .woocommerce-tabs .panel table th{ padding-left: 0 !important; }

  .single-product .woocommerce-tabs .panel .woocommerce-product-attributes-item__label,
  .single-product .woocommerce-tabs .panel table th.left-panel{
    white-space: normal !important;
  }

  /* The panel name is hidden on mobile, so whatever follows it becomes the
     first visible thing and must not carry a heading top margin. */
  .single-product .woocommerce-tabs .panel > h2:first-of-type + *,
  .single-product .woocommerce-tabs .panel > h2:first-of-type + * > *:first-child{
    margin-top: 0 !important;
  }

  /* --------------------------------------------------------------
     C5) ATTRIBUTES TABLE - keep label and value on the SAME line.
     WooCommerce's small-screen stylesheet turns these th/td into
     blocks, which is what stacked Medium / Canvas Unframed etc.
     -------------------------------------------------------------- */
  .single-product .woocommerce-tabs .panel table.woocommerce-product-attributes,
  .single-product .woocommerce-tabs .panel table.shop_attributes{
    display: table !important;
    width: 100% !important;
    margin: 0 0 0.6rem !important;
  }

  .single-product .woocommerce-tabs .panel table.woocommerce-product-attributes tbody,
  .single-product .woocommerce-tabs .panel table.shop_attributes tbody{
    display: table-row-group !important;
  }

  .single-product .woocommerce-tabs .panel table.woocommerce-product-attributes tr,
  .single-product .woocommerce-tabs .panel table.shop_attributes tr{
    display: table-row !important;
  }

  .single-product .woocommerce-tabs .panel table.woocommerce-product-attributes th,
  .single-product .woocommerce-tabs .panel table.woocommerce-product-attributes td,
  .single-product .woocommerce-tabs .panel table.shop_attributes th,
  .single-product .woocommerce-tabs .panel table.shop_attributes td{
    display: table-cell !important;
    text-align: left !important;
    vertical-align: top !important;
    border: 0 !important;
  }

  .single-product .woocommerce-tabs .panel table.woocommerce-product-attributes th,
  .single-product .woocommerce-tabs .panel table.shop_attributes th{
    font-weight: 700;
  }

  .single-product .woocommerce-tabs .panel table.woocommerce-product-attributes td p,
  .single-product .woocommerce-tabs .panel table.shop_attributes td p{
    margin: 0 !important;
  }

  /* --------------------------------------------------------------
     C6) MINI-CART + CART + CHECKOUT - shared mobile product layout
     -------------------------------------------------------------- */
  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ){
    font-size: 18px;
    line-height: 1.45;
    color: dimgray;
  }

  .wc-block-mini-cart__items{ padding: 1.75rem 1.75rem 0; }

  /* Each line item becomes: image on row 1, details + total on row 2 */
  .wc-block-components-drawer .wc-block-mini-cart__items
  table.wc-block-cart-items.wc-block-mini-cart-items
  tbody tr.wc-block-cart-items__row,
  body main[data-page="cart"] .wp-block-woocommerce-cart
  table.wc-block-cart-items tbody tr.wc-block-cart-items__row,
  .woocommerce-checkout .wc-block-components-order-summary-item{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart
  ) td.wc-block-cart-item__image,
  .woocommerce-checkout .wc-block-components-order-summary-item__image{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 105px !important;
    min-width: 105px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .wc-block-components-drawer .wc-block-mini-cart__items
  td.wc-block-cart-item__image a > img,
  body main[data-page="cart"] .wp-block-woocommerce-cart
  td.wc-block-cart-item__image img,
  .woocommerce-checkout .wc-block-components-order-summary-item__image img{
    display: block !important;
    width: 105px !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 8px;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart
  ) td.wc-block-cart-item__product,
  .woocommerce-checkout .wc-block-components-order-summary-item__description{
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    text-indent: 0 !important;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart
  ) td.wc-block-cart-item__total,
  .woocommerce-checkout .wc-block-components-order-summary-item__total-price{
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* Product name */
  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-components-product-name{
    display: block !important;
    margin: 0 0 .3rem !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  /* Individual regular and sale prices */
  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-cart-item__prices,
  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-cart-item__prices :is(del, ins){
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
  }

  /* Medium and Size */
  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-components-product-metadata{
    margin-top: .65rem !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-components-product-details__name{
    font-size: inherit !important;
    font-weight: 700 !important;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-components-product-details__value{
    font-size: inherit !important;
    font-weight: 400 !important;
  }

  .wc-block-components-product-details{
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }

  /* Line total and Save badge */
  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-cart-item__total-price-and-sale-badge-wrapper{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: .35rem !important;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items
      .wc-block-cart-item__total,
    body main[data-page="cart"] .wp-block-woocommerce-cart
      .wc-block-cart-item__total,
    .woocommerce-checkout .wc-block-components-order-summary-item__total-price
  ) .wc-block-components-product-price__value{
    font-size: 1.12rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart,
    .woocommerce-checkout .wc-block-components-order-summary
  ) .wc-block-components-sale-badge{
    padding: .3em .55em !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }

  .wc-block-components-product-badge.wc-block-components-sale-badge{ font-weight: 600; }

  /* Same full, symmetrical quantity selector in mini-cart and cart */
  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart
  ) .wc-block-components-quantity-selector{
    display: grid !important;
    grid-template-columns: 40px 48px 40px !important;
    width: 128px !important;
    min-width: 128px !important;
    overflow: hidden !important;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart
  ) .wc-block-components-quantity-selector__button{
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    line-height: 40px !important;
  }

  :is(
    .wc-block-components-drawer .wc-block-mini-cart__items,
    body main[data-page="cart"] .wp-block-woocommerce-cart
  ) .wc-block-components-quantity-selector__input{
    width: 48px !important;
    min-width: 48px !important;
    height: 40px !important;
    padding: 0 !important;
    line-height: 40px !important;
    text-align: center !important;
  }

  /* Woo outputs fallback and linked versions of the mini-cart image and
     product name. Keep only the linked versions, even after hydration
     removes the fallback elements' hidden attributes. */
  .wc-block-components-drawer .wc-block-mini-cart__items
  table.wc-block-cart-items.wc-block-mini-cart-items
  td.wc-block-cart-item__image > img,
  .wc-block-components-drawer .wc-block-mini-cart__items
  .wc-block-cart-item__wrap > span.wc-block-components-product-name{
    display: none !important;
  }

  /* --- "Added to basket" notice --------------------------------------- */
  .wc-block-components-notice-banner
  .wc-block-components-notice-banner__content{
    display: block;
    font-size: 1rem;
  }

  .wc-block-components-notice-banner__content
  a.button.wc-forward.wp-element-button{
    float: none !important;
    display: block;
    width: max-content;
    margin: 20px auto 0 !important;
    transform: translateX(-25px);
    padding: 6px 8px !important;
    font-size: 0.85em !important;
  }

  /* --- Checkout header ------------------------------------------------
     Keep the large text logo; hide the duplicate image logo and the empty
     two-line navigation button. */
  body.woocommerce-checkout .wp-site-blocks > .wp-block-group:first-child
  .wp-block-site-logo,
  body.woocommerce-checkout .wp-site-blocks > .wp-block-group:first-child
  .wp-block-navigation{
    display: none !important;
  }

  /* --- Search results -------------------------------------------------- */
  body.search .search-results-with-sidebar{ display: block !important; }

  body.search .search-results-column
  > .wp-block-group.has-global-padding{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.search .search-results-with-sidebar
  > .search-sidebar-column{
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  body.search .search-results-with-sidebar
  > .search-results-column{
    width: auto !important;
    margin: 18px 10px 40px !important;
  }

  /* Two products per row, matching the homepage */
  body.search .search-results-column :is(
    ul.wp-block-post-template,
    ul.wc-block-product-template,
    ul.wp-block-woocommerce-product-template
  ){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 42px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.search .search-results-column :is(
    ul.wp-block-post-template,
    ul.wc-block-product-template,
    ul.wp-block-woocommerce-product-template
  ) > li{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}


/* ======================================================================
   27) BREAKPOINT: <= 781px  (front page; WordPress columns breakpoint)
   ====================================================================== */
@media (max-width: 781px){

  .ea-hero{
    max-width: calc(100% - 2rem);
    margin-bottom: 1.5rem;
    padding: 1.75rem 1.25rem;
  }

  .ea-hero__title{
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.2;
  }

  .ea-hero__text,
  .ea-hero__note{ font-size: 1rem; }

  .ea-formats,
  .ea-trust{ padding-top: 2.5rem; }

  .ea-trust{ padding-bottom: 2.5rem; }

  .ea-card{ padding: 1.25rem 1.5rem; }

  .ea-trust__list{ grid-template-columns: 1fr; }

  .ea-trust__list li{ padding: 1.25rem 1rem; }
}


/* ======================================================================
   28) BREAKPOINTS: <= 1100px and <= 600px  (front page format tiles)
   Four tiles across, then two, then one. Both queries set
   grid-template-columns on the same selector, so the order matters.
   ====================================================================== */
@media (max-width: 1100px){
  .ea-formats .ea-formats__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .ea-formats .ea-formats__grid{ grid-template-columns: 1fr; }
}


/* ======================================================================
   29) BREAKPOINT: >= 1200px  (category header, side by side)

   The title is taken out of flow and parked at the left, so the card is
   free of it. The card then runs from a fixed left offset to the right
   edge of the product grid: its right edge lines up with the sorting
   dropdown and the last column of products, and its left edge is in the
   same place on every category page regardless of the name's length.

   :has() keeps this to pages that actually have a description. The shop
   page has a title and no card, and there the title must stay in flow or
   the result count rides up underneath it.
   ====================================================================== */
@media (min-width: 1200px){

  #product-grid:has(> .term-description){ position: relative; }

  #product-grid:has(> .term-description) > .page-title{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  /* 15rem clears the longest category name plus a gap */
  .term-description{ margin: 0 0 1.5rem 15rem; }
}


/* ======================================================================
   30) PARKED TOGGLES

   Kept on purpose: these are switches that have been wanted before and
   may be wanted again. Everything here is inactive. Nothing else in this
   file is commented-out code.
   ====================================================================== */

/* Hide the newsletter box from logged-in users
.logged-in .subscribe-block{ display: none; }
Subscribers can enable the admin bar too, hence the second selector:
body:not(.admin-bar).logged-in .subscribe-block{ display: none; }
*/

/* Logo without the dot
#logo-dot{ display: none !important; }
*/

/* Logo hover colour
.logo-link:hover #logo-dash,
.logo-link:hover #logo-dot{ fill: #cc3a00; }
*/

/* Hide the AddToAny share row entirely
.addtoany_share_save_container{ display: none; }
*/

/* Hide post excerpts
.wp-block-post-excerpt,
p.wp-block-post-excerpt__excerpt{ display: none !important; }
*/

/* Shop-wide Sale! badge — belongs to section 6, with overrides that belong
   in section 26 (mobile) and in its search-results part. Uncomment all
   three together to bring the badge back. Note that the selectors are
   unconditional: every product gets a badge, which is what a shop-wide
   sale wants. For a badge on genuinely discounted items only, style
   .woocommerce span.onsale instead (section 6, still live).

.wp-block-woocommerce-product-image-gallery::before,
.woocommerce ul.products li.product
  > a.woocommerce-loop-product__link:first-of-type::before,
.wp-block-query li.wp-block-post::before{
  content: "Sale!";
  position: absolute !important;
  top: -18px !important;
  right: -21px !important;
  left: auto !important;
  bottom: auto !important;
  background-color: #555 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  line-height: 2.2rem !important;
  padding: 0 .55rem !important;
  border-radius: 999px !important;
  z-index: 9999 !important;
  pointer-events: none;
  opacity: 0.92;
  letter-spacing: 0.2px;
}

  --- inside @media (max-width: 767.98px), two-column grid ---
  .woocommerce ul.products li.product
  > a.woocommerce-loop-product__link:first-of-type::before{
    top: -12px !important;
    right: 0px !important;
    font-size: 10px !important;
    line-height: 1.5rem !important;
    padding: 0 .4rem !important;
    border-radius: 99px !important;
    letter-spacing: 0.1px;
  }

  --- inside @media (max-width: 767.98px), search results ---
  body.search .wp-block-query li.wp-block-post::before{
    top: -12px !important;
    right: 0 !important;
    font-size: 10px !important;
    line-height: 1.5rem !important;
    padding: 0 .4rem !important;
    border-radius: 99px !important;
  }
*/