/* ==========================================================================
   Daveric Gamers — WooCommerce brand overrides
   Restyles WooCommerce's own default markup (shop, single product, cart,
   checkout, my account) to match the theme's ink / gold / wine palette
   instead of WooCommerce's default purple ("Automattic purple", #7f54b3).
   Loaded only on WooCommerce screens, after style.css, so these rules can
   safely override WooCommerce core CSS with reasonable specificity.
   ========================================================================== */

/* ---- Buttons: add to cart, checkout, place order, view cart, etc. ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.added_to_cart,
.woocommerce .single_add_to_cart_button,
.wp-block-add-to-cart-form .wc-block-components-button__text,
.wc-block-components-button:not(.is-link) {
  background-color: var( --ink, #14141a ) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 13px !important;
  padding: 13px 24px !important;
  transition: background-color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover {
  background-color: var( --gold-dark, #8f6f3f ) !important;
  color: #fff !important;
}
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {
  opacity: .5 !important;
}

/* Secondary / outline style buttons (e.g. "Select options", "Continue shopping") */
.woocommerce a.button.wc-forward,
.woocommerce .woocommerce-cart .button.wc-backward {
  background-color: transparent !important;
  color: var( --ink, #14141a ) !important;
  border: 1px solid var( --ink, #14141a ) !important;
}
.woocommerce a.button.wc-forward:hover,
.woocommerce .woocommerce-cart .button.wc-backward:hover {
  background-color: var( --ink, #14141a ) !important;
  color: #fff !important;
}

/* ---- Product title ----
   No override existed before, so it fell through to the theme's generic
   `h1 { font-size: 46px; }` (style.css) -- sized for big marketing/hero
   headlines, not a product name sitting next to price/add-to-cart. Trimmed
   down closer to the site's h2 size for a slightly less oversized, more
   product-page-appropriate scale. */
.woocommerce div.product .product_title {
  font-size: 35px;
  line-height: 1.2;
}
/* The sitewide `h1 { font-size: 32px }` mobile rule (style.css, ≤760px)
   can't reach this element -- a class+element selector always beats a
   bare element selector regardless of source order, so without this,
   product titles stayed at the full 35px on phones instead of stepping
   down like every other h1 on the site. Long product names (e.g. "New KZ
   Carol Pro TWS ANC Bluetooth 5.4") need the extra room a smaller size
   gives them to wrap cleanly across 2 lines instead of fighting for space
   next to price/add-to-cart on a narrow screen. */
@media (max-width: 600px) {
  .woocommerce div.product .product_title { font-size: 26px; }
}

/* ---- Price ---- */
.woocommerce .price,
.woocommerce .price ins,
.woocommerce-Price-amount,
.wc-block-components-product-price {
  color: var( --ink, #14141a );
  font-weight: 700;
}
.woocommerce .price del,
.woocommerce-Price-amount.woocommerce-Price-amount del {
  color: #9a99a1;
  opacity: 1;
  font-weight: 400;
}
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount {
  color: var( --gold-dark, #8f6f3f );
  font-size: 26px;
}

/* ---- Product meta (category, SKU, tags) ---- */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta > span {
  color: #7d7c84;
  font-size: 13px;
}
.woocommerce div.product .product_meta a {
  color: var( --ink-soft, #3a3a42 );
  text-decoration: none;
}
.woocommerce div.product .product_meta a:hover {
  color: var( --gold-dark, #8f6f3f );
}

/* ---- Quantity input ----
   No fixed width was set here before, so the field fell back to the
   browser/WooCommerce default (sized off the "size" HTML attribute, not
   actual pixels) -- wide enough for one digit before the text started
   getting clipped by the left/right padding as soon as you typed a 2nd or
   3rd digit. Giving it an explicit width fixes that regardless of how
   many digits are typed. */
.woocommerce .quantity .qty {
  border: 1px solid var( --border, #e6e3da ) !important;
  border-radius: 4px !important;
  height: 46px;
  width: 74px;
  padding: 0 10px;
  font-size: 14px;
  text-align: center;
}

/* ---- Modern quantity stepper --------------------------------------
   WooCommerce's own quantity field is just a bare number input -- it has
   no +/- buttons out of the box. A small script (main.js) wraps each one
   in a ".lumen-qty-stepper" pill and injects the two buttons; these rules
   style that pill and quietly strip the plain-box look above once it's
   been enhanced (still falls back to the plain box if JS doesn't run). */
.woocommerce .quantity.lumen-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var( --border, #e6e3da );
  border-radius: 999px;
  overflow: hidden;
  height: 48px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce .quantity.lumen-qty-stepper:focus-within {
  border-color: var( --gold-dark, #8f6f3f );
  box-shadow: 0 0 0 3px rgba(176,141,87,.15);
}
.woocommerce .quantity.lumen-qty-stepper .qty {
  border: none !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0;
  font-size: 15px !important;
  font-weight: 700;
  color: var( --ink, #14141a );
  background: transparent;
  -moz-appearance: textfield;
}
.woocommerce .quantity.lumen-qty-stepper .qty::-webkit-outer-spin-button,
.woocommerce .quantity.lumen-qty-stepper .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce .quantity.lumen-qty-stepper .lumen-qty-btn {
  flex-shrink: 0;
  width: 42px;
  height: 48px;
  border: none;
  background: transparent;
  color: var( --ink-soft, #3a3a42 );
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.woocommerce .quantity.lumen-qty-stepper .lumen-qty-minus { border-right: 1px solid var( --border, #e6e3da ); }
.woocommerce .quantity.lumen-qty-stepper .lumen-qty-plus { border-left: 1px solid var( --border, #e6e3da ); }
.woocommerce .quantity.lumen-qty-stepper .lumen-qty-btn:hover {
  background: var( --ink, #14141a );
  color: #fff;
}
.woocommerce .quantity.lumen-qty-stepper .lumen-qty-btn:active { transform: scale(.9); }
.woocommerce .quantity.lumen-qty-stepper .lumen-qty-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.woocommerce .quantity.lumen-qty-stepper .lumen-qty-btn:disabled:hover {
  background: transparent;
  color: var( --ink-soft, #3a3a42 );
}

/* ---- Quantity stepper + Add to Cart: one row, same height, evenly
   spaced. Without this the two sit at whatever height/alignment their own
   padding happens to produce -- form.cart gets no layout rules otherwise,
   so the button (sized by its own padding) ends up shorter than the 48px
   stepper and the two don't align on either edge. ---- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.woocommerce div.product form.cart .quantity.lumen-qty-stepper {
  margin: 0;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0;
}

/* ---- Single product: "Buy via WhatsApp" button, right after Add to Cart ----
   Printed via woocommerce_after_add_to_cart_button (functions.php), so it's
   already a flex child of the same form.cart row as the qty stepper and Add
   to Cart button -- it only needs to match their 48px height, not their
   layout. Deliberately its own class (not ".button") so it doesn't have to
   fight that rule's own "!important" ink/gold background -- uses the same
   WhatsApp green built for the product-grid WhatsApp cards instead of the
   site's ink/gold palette, since that's the color people already associate
   with the action. Free-width rather than matching the Add to Cart button's
   width exactly -- "Buy via WhatsApp" is longer text, so it's fine (and
   expected) to end up a bit wider. */
.woocommerce div.product form.cart .lumen-wa-single-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  margin: 0;
  border-radius: 4px;
  background: #25D366;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.woocommerce div.product form.cart .lumen-wa-single-buy:hover {
  background: #1DA851;
  color: #fff !important;
}
.woocommerce div.product form.cart .lumen-wa-single-buy .lumen-wa-icon {
  flex-shrink: 0;
}

/* ---- Single product summary: breathing room between the short
   description, the quantity/Add to Cart row, and the meta below it ---- */
.woocommerce div.product .woocommerce-product-details__short-description {
  margin-top: 6px;
  margin-bottom: 26px;
}
.woocommerce div.product .summary form.cart {
  margin-top: 4px;
  margin-bottom: 28px;
}
.woocommerce div.product .summary .product_meta {
  margin-top: 20px;
}

/* ---- Star ratings ---- */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var( --gold, #b08d57 );
}

/* ---- Out of stock: clear label + visual treatment ----
   WooCommerce already adds the "outofstock" class to the product wrapper
   and a <p class="stock out-of-stock">Out of stock</p> near the price on
   single-product pages -- these rules just make both hard to miss. */
.woocommerce p.stock.out-of-stock,
.woocommerce .stock.out-of-stock {
  display: inline-block;
  color: #9b1b30;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(155, 27, 48, .08);
  border-radius: 3px;
  padding: 6px 10px;
  margin: 10px 0;
}
.woocommerce p.stock.in-stock,
.woocommerce .stock.in-stock {
  color: #3a3a42;
  font-size: 13px;
}
/* Single product page: guarantee the quantity box + Add to Cart button are
   gone (not just visually faded) whenever the product itself is out of
   stock. WooCommerce already skips rendering this form for out-of-stock
   products by default, but this is a hard CSS backstop in case anything
   else on the page (a plugin, a block override) still outputs it. */
.woocommerce div.product.outofstock form.cart,
.woocommerce div.product.outofstock .quantity,
.woocommerce div.product.outofstock .single_add_to_cart_button,
.woocommerce div.product.outofstock button[type="submit"].add_to_cart_button {
  display: none !important;
}

/* Shop/archive/related grid: ribbon badge + faded image on out-of-stock cards */
.woocommerce ul.products li.product.outofstock {
  position: relative;
}
.woocommerce ul.products li.product.outofstock::before {
  content: "Out of Stock";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: #14141a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 6px 10px;
  line-height: 1;
}
.woocommerce ul.products li.product.outofstock img {
  opacity: .5;
}
.woocommerce ul.products li.product.outofstock .add_to_cart_button,
.woocommerce ul.products li.product.outofstock .ajax_add_to_cart {
  display: none;
}

/* ---- Sale badge ---- */
.woocommerce span.onsale {
  background: var( --wine, #9b1b30 ) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 3px;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 6px 10px;
  top: 12px;
  left: 12px;
  right: auto;
}

/* ---- "Hot" badge (featured products, when not also on sale) ----
   Same top-left slot as the sale badge above, styled to match this
   theme's other "special" accents (the wishlist tab, back-to-top button)
   instead of WooCommerce's plain default. See functions.php for what
   sets a product's "Hot" flag: WooCommerce's own "Featured" checkbox. */
.woocommerce span.lumen-hot-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: linear-gradient( 180deg, var( --ink, #14141a ), #24242c ) !important;
  color: var( --gold, #b08d57 ) !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid rgba(176, 141, 87, .45);
}

/* ---- Product image / gallery ---- */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images img {
  border-radius: 8px;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: 6px;
  border: 1px solid var( --border, #e6e3da );
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var( --gold, #b08d57 );
}

/* ---- Variation attribute swatches (color / image / select type) ----
   WooCommerce's built-in attribute-swatch markup varies by version/block;
   these cover the common class patterns for a richer, more tactile color
   picker -- bigger circles with breathing room between them, a soft lift
   + gold glow on hover, and a clear gold ring + checkmark on whichever
   swatch is selected, instead of a plain thin outline. */
.woocommerce .variations ul.wc-attribute-swatches,
.woocommerce .wc-block-components-attribute-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.woocommerce .wc-block-components-attribute-swatches__attribute-name,
.woocommerce .wc-attribute-name,
.woocommerce .variations-attribute-name {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var( --ink-soft, #3a3a42 );
}
.woocommerce .variations .wc-attribute-swatch,
.woocommerce .wc-block-components-attribute-swatch,
.woocommerce ul.wc-attribute-swatches li,
.woocommerce .wc-attribute-swatches__item {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden;
  cursor: pointer;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 0 1px rgba( 20, 20, 26, .12 ) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Image-type swatches (attribute term "Type" set to Image in wp-admin) --
   WooCommerce renders the photo as either a CSS background-image on the
   swatch itself (covered above) or a nested <img>; this covers the <img>
   case so the photo fills the same circle instead of overflowing it. */
.woocommerce .wc-attribute-swatch img,
.woocommerce .wc-block-components-attribute-swatch img,
.woocommerce .wc-attribute-swatches__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.woocommerce .wc-attribute-swatch:hover,
.woocommerce .wc-block-components-attribute-swatch:hover,
.woocommerce .wc-attribute-swatches__item:hover {
  transform: translateY(-4px) scale(1.22);
  box-shadow: 0 0 0 1px rgba( 20, 20, 26, .12 ), 0 8px 18px rgba( 176, 141, 87, .4 ) !important;
  z-index: 2;
}
.woocommerce .wc-attribute-swatch,
.woocommerce .wc-block-components-attribute-swatch,
.woocommerce .wc-attribute-swatches__item {
  transition: transform .3s cubic-bezier( .34, 1.56, .64, 1 ), box-shadow .3s ease !important;
}
.woocommerce .wc-attribute-swatch.selected,
.woocommerce .wc-block-components-attribute-swatch--selected,
.woocommerce .wc-attribute-swatches__item.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 6px 14px rgba( 176, 141, 87, .4 ) !important;
}
.woocommerce .wc-attribute-swatch.selected::after,
.woocommerce .wc-block-components-attribute-swatch--selected::after,
.woocommerce .wc-attribute-swatches__item.selected::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba( 0, 0, 0, .55 );
  pointer-events: none;
}

/* Soft gold ripple/glow when a swatch becomes the selected one -- ends on
   the exact resting box-shadow the .selected rule above already sets, so
   there's no snap once the animation finishes and the static rule takes
   back over. Deliberately not a scale/bounce "pop" -- just a quiet pulse. */
@keyframes lumenSwatchSelectGlow {
  0%   { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 0 0 4px rgba( 176, 141, 87, .55 ); }
  70%  { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 0 0 16px rgba( 176, 141, 87, 0 ); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 6px 14px rgba( 176, 141, 87, .4 ); }
}
.woocommerce .wc-attribute-swatch.selected,
.woocommerce .wc-block-components-attribute-swatch--selected,
.woocommerce .wc-attribute-swatches__item.selected {
  animation: lumenSwatchSelectGlow .6s ease;
}

/* Hover tooltip showing the color's name, using the swatch's own native
   title attribute -- degrades silently (no tooltip, no error) on any
   WooCommerce version that doesn't render one. */
.woocommerce .wc-attribute-swatch[title]:hover::before,
.woocommerce .wc-block-components-attribute-swatch[title]:hover::before,
.woocommerce .wc-attribute-swatches__item[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var( --ink, #14141a );
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
  animation: lumenTooltipIn .15s ease forwards;
}
@keyframes lumenTooltipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Variation dropdowns (fallback, non-swatch attributes) ---- */
.woocommerce .variations select {
  border: 1px solid var( --border, #e6e3da );
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  color: var( --ink-soft, #3a3a42 );
}
.woocommerce .variations label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var( --ink-soft, #3a3a42 );
}

/* ---- Variable products: normalize the extra markup WooCommerce only
   injects here (the attribute table + single_variation_wrap) so it sits
   on the same tight rhythm as the rest of the summary column instead of
   falling back to WooCommerce's own default table/paragraph spacing. ---- */
.woocommerce div.product form.cart table.variations {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  background: var( --sand-soft, #f3f1ec );
  border: 1px solid var( --border, #e6e3da );
  border-radius: 10px;
  padding: 18px 20px;
}
.woocommerce div.product form.cart table.variations tbody {
  display: block;
}
.woocommerce div.product form.cart table.variations tr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.woocommerce div.product form.cart table.variations tr + tr {
  margin-top: 18px;
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  padding: 0;
  border: none;
  line-height: normal;
  text-align: left;
  font-weight: normal;
}
.woocommerce div.product form.cart table.variations td.label,
.woocommerce div.product form.cart table.variations th.label {
  margin-right: 28px !important;
  flex-shrink: 0;
}
.woocommerce div.product form.cart table.variations td.value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  flex: 1 1 auto;
}
.woocommerce div.product form.cart table.variations td.value select {
  min-width: 180px;
}
.woocommerce div.product form.cart .reset_variations {
  font-size: 12px;
  color: var( --gray, #6b6b75 );
  text-decoration: underline;
  white-space: nowrap;
}
.woocommerce div.product form.cart .single_variation_wrap {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation-price {
  margin: 0 0 16px !important;
  padding: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation-price .price,
.woocommerce div.product form.cart .woocommerce-variation-price p {
  margin: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation-price .price,
.woocommerce div.product form.cart .woocommerce-variation-price .price .woocommerce-Price-amount {
  font-size: 19px !important;
  font-weight: 700;
}
.woocommerce div.product form.cart .woocommerce-variation-price .price::before {
  content: "Selected price: ";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var( --gray, #6b6b75 );
  display: block;
  margin-bottom: 4px;
}
.woocommerce div.product form.cart .woocommerce-variation-availability {
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation-availability p {
  margin: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation-description {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 13.5px;
  color: var( --gray, #6b6b75 );
}
.woocommerce div.product form.cart .woocommerce-variation-description p {
  margin: 0 !important;
}
.woocommerce div.product form.cart .woocommerce-variation-description:empty,
.woocommerce div.product form.cart .woocommerce-variation-availability:empty {
  display: none !important;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Product tabs (Description, Reviews, etc.) ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: var( --border, #e6e3da );
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #9a99a1;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 0 0 12px;
  margin-right: 28px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var( --ink, #14141a );
  border-bottom: 2px solid var( --gold, #b08d57 );
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

/* ---- Shop / archive product grid cards ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  color: var( --ink, #14141a );
  font-weight: 700;
  font-size: 15px;
}
.woocommerce ul.products li.product .price {
  color: var( --ink, #14141a );
}

/* ---- Category archive: subcategory tiles ----
   When a category's "Display type" (Products > Categories > edit the
   category, in wp-admin) is set to "Subcategories" or "Both", WooCommerce
   prints each subcategory as its own <li class="product-category product">
   inside the exact same grid as real products -- it already inherits
   this theme's grid/column layout for free since it carries the same
   ".product" class. Styled here as a distinct card (centered image, name,
   product count) so shoppers immediately read it as "browse this
   brand/category" rather than "buy this item". Clicking one is native
   WooCommerce behaviour -- it just filters the grid to that subcategory,
   nothing extra needed for that part.
   >>> No thumbnail set for a subcategory yet? WooCommerce falls back to
   its own placeholder image, which this still styles consistently -- set
   a real "Thumbnail" image on the subcategory in wp-admin whenever
   you're ready and it swaps in automatically. <<< */
.woocommerce ul.products li.product-category {
  text-align: center;
  background: var( --card, #fff );
  border: 1px solid var( --border, #e6e3da );
  border-radius: var( --radius, 4px );
  box-shadow: var( --shadow, 0 2px 24px rgba(20,20,26,.06) );
  padding: 22px 16px 20px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.woocommerce ul.products li.product-category:hover {
  box-shadow: var( --shadow-hover, 0 12px 32px rgba(20,20,26,.12) );
  transform: translateY(-3px);
  border-color: var( --gold, #b08d57 );
}
.woocommerce ul.products li.product-category a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.woocommerce ul.products li.product-category img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var( --sand-soft, #f3f1ec );
  margin: 0 !important;
  box-shadow: none !important;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var( --ink, #14141a );
  transition: color .2s ease;
}
.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
  color: var( --gold-dark, #8f6f3f );
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count {
  background: var( --sand, #eae6dc ) !important;
  color: var( --gray, #6b6b75 ) !important;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ---- Shop / archive thumbnails: zoom + crossfade to 2nd photo on hover ----
   Wrapper (".lumen-thumb", printed by functions.php in place of WooCommerce's
   default single-image loop thumbnail) holds the primary photo and, when the
   product has one, its first gallery photo stacked on top of each other.
   Square aspect-ratio box to match this theme's other product-card imagery.
   On hover the primary zooms + fades out while the secondary zooms in from a
   touch larger and fades in -- if there's no 2nd photo, the secondary rules
   simply never apply and it's a plain refined zoom on the one image. */
.woocommerce ul.products li.product .lumen-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  background: var( --sand-soft, #f3f1ec );
}
.woocommerce ul.products li.product .lumen-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s ease, transform .6s ease;
}
.woocommerce ul.products li.product .lumen-thumb-primary {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.woocommerce ul.products li.product .lumen-thumb-secondary {
  opacity: 0;
  transform: scale(1.12);
  z-index: 2;
}
.woocommerce ul.products li.product:hover .lumen-thumb-primary {
  opacity: 0;
  transform: scale(1.08);
}
.woocommerce ul.products li.product:hover .lumen-thumb-secondary {
  opacity: 1;
  transform: scale(1.06);
}
/* No 2nd photo on this product -- just the existing image, refined zoom only */
.woocommerce ul.products li.product .lumen-thumb-primary:only-child {
  transition: transform .6s ease;
}
.woocommerce ul.products li.product:hover .lumen-thumb-primary:only-child {
  opacity: 1;
  transform: scale(1.08);
}

/* ---- Cart & checkout blocks: give paired address fields real breathing room ----
   This checkout/cart runs on WooCommerce's Cart & Checkout blocks (not the
   classic shortcode layout) -- confirmed by reading its own bundled CSS
   (assets/client/blocks/checkout.css). Paired fields (First/Last name,
   Town-City/State, Postcode/Phone, etc.) sit in a flex row via
   ".wc-block-components-address-form" with only a 12px column gap, and
   every row after the first gets just 12px (16px for Country/Region and
   the "different address" checkbox specifically) of margin-top -- all
   read as cramped against the rest of this theme's roomier spacing.
   Widening both here; "!important" is needed since this stylesheet has
   no guaranteed load-order relationship with the Blocks CSS (equal
   selector specificity otherwise leaves the outcome to whichever loads
   last).
   NOTE: an earlier pass here only listed ".text-input"/".select-input"/
   ".state-input" and missed that Country/Region uses its own separate
   class (".country-input", core default margin-top:16px, not 12px) --
   that's exactly why Last name still visually touched Country/Region
   after that pass: every OTHER row picked up the wider 22px gap, making
   Country/Region's untouched (smaller, and by comparison cramped-looking)
   16px stand out even more. This version lists every full-width/paired
   row class the address form actually uses, not just the three most
   common ones, so nothing gets missed a second time. The existing
   ":first-child" (no top margin) and "first-child + text-input" (2nd
   field of the very first row, sits beside its row-mate rather than
   under it) rules from core are left alone -- they're more specific than
   this, so they still win correctly and don't need repeating here. */
.wc-block-checkout .wc-block-components-address-form,
.wc-block-cart .wc-block-components-address-form {
  gap: 0 22px !important;
}
.wc-block-checkout .wc-block-components-address-form .wc-block-components-text-input,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-select-input,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-state-input,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-country-input,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__company,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_1,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-checkbox,
.wc-block-cart .wc-block-components-address-form .wc-block-components-text-input,
.wc-block-cart .wc-block-components-address-form .wc-block-components-select-input,
.wc-block-cart .wc-block-components-address-form .wc-block-components-state-input,
.wc-block-cart .wc-block-components-address-form .wc-block-components-country-input,
.wc-block-cart .wc-block-components-address-form .wc-block-components-address-form__company,
.wc-block-cart .wc-block-components-address-form .wc-block-components-address-form__address_1,
.wc-block-cart .wc-block-components-address-form .wc-block-components-address-form__address_2,
.wc-block-cart .wc-block-components-address-form .wc-block-components-checkbox {
  margin-top: 22px !important;
}
.wc-block-checkout .wc-block-components-address-form .wc-block-components-text-input:first-child,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-select-input:first-child,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-state-input:first-child,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-country-input:first-child,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__company:first-child,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_1:first-child,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-address-form__address_2:first-child,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-checkbox:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-text-input:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-select-input:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-state-input:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-country-input:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-address-form__company:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-address-form__address_1:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-address-form__address_2:first-child,
.wc-block-cart .wc-block-components-address-form .wc-block-components-checkbox:first-child {
  margin-top: 0 !important;
}
/* The one real asymmetry: the very first row (First name + Last name) --
   First name is the form's literal first-child, so it gets margin-top:0
   above, but Last name (its row-mate, sitting beside it, not under it)
   is NOT itself a first-child, so the blanket "22px !important" rule
   above was landing on it too, shoving it down out of alignment with
   First name. Core handles this with its own (non-!important)
   ":first-child + text-input" rule, but since a plain rule can never
   beat an "!important" one no matter how specific it is, that rule was
   being silently overridden rather than followed -- this restores it
   explicitly, with !important of its own, so Last name (and the
   equivalent case if a select/state field ever ends up first) actually
   lines up level with its row-mate instead of stacking underneath. Every
   *other* paired row (Town/City + State, Postcode + Phone, ...) never
   had this problem: neither field in those rows is the container's
   first-child, so both already receive the same 22px margin-top and stay
   aligned with each other automatically. */
.wc-block-checkout .wc-block-components-address-form .wc-block-components-text-input:first-child + .wc-block-components-text-input,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-select-input:first-child + .wc-block-components-text-input,
.wc-block-checkout .wc-block-components-address-form .wc-block-components-state-input:first-child + .wc-block-components-text-input,
.wc-block-cart .wc-block-components-address-form .wc-block-components-text-input:first-child + .wc-block-components-text-input,
.wc-block-cart .wc-block-components-address-form .wc-block-components-select-input:first-child + .wc-block-components-text-input,
.wc-block-cart .wc-block-components-address-form .wc-block-components-state-input:first-child + .wc-block-components-text-input {
  margin-top: 0 !important;
}

/* ---- Cart & checkout blocks: consistent field height, empty or not ----
   The real cause of Town/City and State/County looking misaligned isn't
   spacing -- it's height. WooCommerce Blocks' text inputs use a floating
   label: EMPTY fields show it centered, placeholder-style, in a shorter
   box; once a field has a value (or is focused), core's own ".is-active"
   class shrinks the label up to a small caption and adds extra top
   padding for the value, making the box taller. A <select> like
   State/County always has a value (Kenya's counties default to one), so
   it's always in that taller "active" state -- but Town/City starts
   empty, so it sits in the shorter state until the customer types
   something, making the two look uneven purely because of what's typed
   so far, not any actual CSS bug. Forcing every text input into the
   "active" layout permanently -- regardless of whether it currently has
   a value -- makes every field in a row (and across rows) the same
   height from the moment the page loads, not just after it's filled in.
   Select fields are untouched since they're already always in this
   taller state by nature. */
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="number"],
.wc-block-checkout .wc-block-components-text-input input[type="password"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"],
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="url"],
.wc-block-cart .wc-block-components-text-input input[type="email"],
.wc-block-cart .wc-block-components-text-input input[type="number"],
.wc-block-cart .wc-block-components-text-input input[type="password"],
.wc-block-cart .wc-block-components-text-input input[type="tel"],
.wc-block-cart .wc-block-components-text-input input[type="text"],
.wc-block-cart .wc-block-components-text-input input[type="url"] {
  padding: 24px 9px 8px !important;
}
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-cart .wc-block-components-text-input label {
  top: 6px !important;
  transform: scale(.82) !important;
}

/* ---- M-Pesa payment: thank-you page instructions ----
   Printed by Lumen_Gateway_MPesa::thankyou_page() (inc/mpesa-gateway.php)
   on the order-received page (part of is_checkout(), so this stylesheet
   is already loaded there). The same markup is also emailed to the
   customer, but email clients don't load this stylesheet -- that's fine,
   it's plain semantic HTML (h3/p/ol) that already reads fine unstyled in
   an inbox, same approach WooCommerce's own core gateways use. */
.lumen-mpesa-instructions {
  margin-top: 32px;
  padding: 24px 26px;
  background: var( --sand-soft, #f3f1ec );
  border: 1px solid var( --border, #e6e3da );
  border-radius: 10px;
}
.lumen-mpesa-instructions h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var( --ink, #14141a );
}
.lumen-mpesa-business {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var( --gold-dark, #8f6f3f );
}
.lumen-mpesa-instructions ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.lumen-mpesa-instructions ol li {
  margin-bottom: 8px;
  font-size: 14.5px;
  color: var( --ink-soft, #3a3a42 );
}
.lumen-mpesa-instructions ol li:last-child {
  margin-bottom: 0;
}
.lumen-mpesa-note {
  margin: 0;
  font-size: 13px;
  color: var( --gray, #6b6b75 );
}
.lumen-mpesa-instructions p:last-child {
  margin-bottom: 0;
}

/* ---- Cart & checkout tables ---- */
.woocommerce table.shop_table {
  border: 1px solid var( --border, #e6e3da );
  border-radius: 8px;
}
.woocommerce table.shop_table th {
  color: var( --ink, #14141a );
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]:checked + label::before,
.woocommerce a.remove {
  color: var( --wine, #9b1b30 ) !important;
}

/* ---- Notices (added to cart, errors, etc.) ---- */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var( --gold, #b08d57 ) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var( --gold, #b08d57 ) !important;
}
.woocommerce-error {
  border-top-color: var( --wine, #9b1b30 ) !important;
}
.woocommerce-error::before {
  color: var( --wine, #9b1b30 ) !important;
}

/* ---- Shop/archive: Add to Cart + WhatsApp icon, side by side ----
   ".lumen-shop-actions" is the wrapper main.js builds around WooCommerce's
   own Add to Cart button and this theme's WhatsApp icon (functions.php) --
   neither has a shared container in the default markup, so JS wraps them
   at runtime and this just lays that wrapper out as a row.

   The card itself is made a vertical flex column here so this row can be
   pinned to the bottom with "margin-top: auto" -- without that, cards
   whose title wraps onto a 2nd line (or whose price is longer, e.g. a
   sale price next to a struck-through regular price) push their own
   button row down further than shorter cards next to them in the same
   grid row, so the buttons end up misaligned across the row even though
   the cards are the same overall height. Pinning to the bottom fixes
   that regardless of how much text is above it. */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  position: relative; /* anchors the wishlist heart overlay (top-right) below */
}
.woocommerce ul.products li.product .lumen-shop-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.woocommerce ul.products li.product .lumen-shop-actions .button {
  margin: 0 !important;
}
.woocommerce ul.products li.product .lumen-wa-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #25D366;
  color: #fff;
  transition: background-color .2s ease, transform .15s ease;
}
.woocommerce ul.products li.product .lumen-wa-icon-btn svg {
  width: 24px;
  height: 24px;
}
.woocommerce ul.products li.product .lumen-wa-icon-btn:hover {
  background: #1DA851;
  color: #fff;
  transform: translateY(-2px);
}


/* ---- Custom color swatches (JS-built, main.js) -----------------------
   No native/plugin swatch feature exists on this install, so main.js
   progressively enhances the real attribute <select> with a clickable
   circle-swatch UI in front of it (the select itself is kept, just visually
   hidden, so WooCommerce's own price/stock/AJAX matching is untouched).
   Reuses the same lift/glow/ring/checkmark/tooltip language as the rest of
   the site's variation styling. */
.lumen-visually-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.lumen-color-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.lumen-color-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba( 20, 20, 26, .15 );
  transition: transform .3s cubic-bezier( .34, 1.56, .64, 1 ), box-shadow .3s ease;
}
.lumen-color-swatch:hover {
  transform: translateY(-4px) scale(1.22);
  box-shadow: 0 0 0 1px rgba( 20, 20, 26, .15 ), 0 8px 18px rgba( 176, 141, 87, .4 );
  z-index: 2;
}
.lumen-color-swatch.selected {
  animation: lumenSwatchSelectGlow .6s ease;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 6px 14px rgba( 176, 141, 87, .4 );
}
@keyframes lumenSwatchSelectGlow {
  0%   { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 0 0 4px rgba( 176, 141, 87, .55 ); }
  70%  { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 0 0 16px rgba( 176, 141, 87, 0 ); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --gold, #b08d57 ), 0 6px 14px rgba( 176, 141, 87, .4 ); }
}
.lumen-color-swatch.selected::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba( 0, 0, 0, .55 );
  pointer-events: none;
}
.lumen-color-swatch[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var( --ink, #14141a );
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
  animation: lumenTooltipIn .15s ease forwards;
}

/* ---- Small preview photo, shown/updated the moment a color is picked ----
   Driven by main.js listening for WooCommerce's own "found_variation" event
   (fires once the selected color resolves to a real variation), using that
   variation's own image -- the same "Variation image" set on the Variations
   tab in wp-admin that also drives the automatic main-gallery photo swap. */
.lumen-color-swatch-preview {
  display: none;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  margin: 14px 0 0;
  border: 1px solid var( --border, #e6e3da );
  box-shadow: var( --shadow, 0 2px 24px rgba( 20, 20, 26, .06 ) );
}
.lumen-color-swatch-preview.is-visible {
  display: block;
  animation: lumenSwatchPreviewIn .3s ease;
}
@keyframes lumenSwatchPreviewIn {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- "Select all options" hint -----------------------------------------
   Shown by default (matches the true state on page load -- nothing picked
   yet) and hidden by main.js the moment WooCommerce resolves a complete
   variation; re-shown if the selection is cleared or made incomplete
   again. Only matters on products with more than one attribute (e.g.
   Color + Mic), where picking just the color isn't enough for a price to
   appear -- this makes that "still waiting on your other choice" state
   visible instead of just leaving an empty gap that reads as broken. */
.lumen-variation-hint {
  display: block;
  margin: 14px 0 0;
  padding: 10px 14px;
  background: rgba( 176, 141, 87, .08 );
  border: 1px solid rgba( 176, 141, 87, .25 );
  border-radius: 6px;
  color: var( --gold-dark, #8f6f3f );
  font-size: 12.5px;
  font-weight: 600;
}
.lumen-variation-hint.is-hidden {
  display: none;
}

/* =========================================================================
 * Low-stock urgency messaging
 * Printed by lumen_low_stock_html() (functions.php) via the
 * woocommerce_get_stock_html filter -- reuses WooCommerce's own
 * <p class="stock ...">, just adds a distinct "lumen-low-stock" class so
 * this doesn't collide with the existing in-stock/out-of-stock styling
 * above. Amber/urgent rather than red (red is reserved for out-of-stock)
 * so the two states stay visually distinct at a glance.
 * ========================================================================= */
.woocommerce p.stock.lumen-low-stock,
.woocommerce .stock.lumen-low-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a15c00;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: rgba(224, 149, 33, .12);
  border: 1px solid rgba(224, 149, 33, .35);
  border-radius: 3px;
  padding: 6px 10px;
  margin: 10px 0;
  animation: lumenLowStockPulse 2.4s ease-in-out infinite;
}
.woocommerce p.stock.lumen-low-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e09521;
  flex-shrink: 0;
}
@keyframes lumenLowStockPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 149, 33, .25); }
  50%      { box-shadow: 0 0 0 5px rgba(224, 149, 33, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce p.stock.lumen-low-stock {
    animation: none;
  }
}

/* =========================================================================
 * Reviews: "Verified Buyer" badge
 * WooCommerce already prints <em class="woocommerce-review__verified
 * verified">(Verified Buyer)</em> next to a reviewer's name once the
 * verification option is force-enabled and the string relabeled
 * (functions.php) -- this just turns that plain italic text into a small
 * green pill with a checkmark, matching the gold/ink brand language used
 * elsewhere (swatches, low-stock dot) but in green to read as "trust/
 * confirmed" rather than "urgent."
 * ========================================================================= */
.woocommerce .woocommerce-review__verified.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #2f7a4f;
  background: rgba(79, 154, 111, .12);
  border: 1px solid rgba(79, 154, 111, .3);
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  margin-left: 8px;
  vertical-align: middle;
}
.woocommerce .woocommerce-review__verified.verified::before {
  content: "\2713";
  font-weight: 700;
}

/* =========================================================================
 * Reviews: optional customer photo upload
 * .comment-form-photo is the wrapper printed by lumen_review_photo_field()
 * (functions.php, via the woocommerce_product_review_comment_form_args
 * filter) inside the native review form; .lumen-review-photo is the
 * clickable thumbnail printed by lumen_display_review_photo() next to a
 * submitted review's text.
 * ========================================================================= */
.comment-form-photo.lumen-review-photo-field {
  margin: 0 0 20px;
}
.comment-form-photo.lumen-review-photo-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var( --ink-soft, #3a3a42 );
}
.comment-form-photo.lumen-review-photo-field input[type="file"] {
  display: block;
  width: 100%;
  max-width: 320px;
  font-size: 13px;
  color: var( --gray, #6b6b75 );
  padding: 8px 0;
}

.lumen-review-photo {
  display: inline-block;
  margin: 10px 0 4px;
}
.lumen-review-photo img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var( --border, #e6e3da );
  box-shadow: var( --shadow, 0 2px 24px rgba( 20, 20, 26, .06 ) );
  transition: transform .2s ease;
}
.lumen-review-photo:hover img {
  transform: scale(1.05);
}

/* =========================================================================
 * Wishlist heart button
 * Same markup/classes in two places: overlaid on shop-loop card thumbnails
 * (".lumen-wishlist-btn--grid") and inline under the title on the single
 * product page (".lumen-wishlist-btn--single", which also shows the label).
 * Purely visual here -- main.js owns the actual saved/unsaved state
 * (localStorage) and toggles ".is-active" + [aria-pressed] on click.
 * ========================================================================= */
.lumen-wishlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var( --ink, #14141a );
  padding: 0;
}
.lumen-wishlist-icon {
  width: 20px;
  height: 20px;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), stroke .15s ease, fill .15s ease;
}
.lumen-wishlist-btn:hover .lumen-wishlist-icon {
  transform: scale(1.12);
}
.lumen-wishlist-btn.is-active .lumen-wishlist-icon {
  stroke: var( --wine, #9b1b30 );
  fill: var( --wine, #9b1b30 );
}
.lumen-wishlist-btn.lumen-wishlist-pop .lumen-wishlist-icon {
  animation: lumenWishlistPop .35s ease;
}
@keyframes lumenWishlistPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lumen-wishlist-icon,
  .lumen-wishlist-btn.lumen-wishlist-pop .lumen-wishlist-icon {
    transition: none;
    animation: none;
  }
}

/* Shop/archive card: circular button pinned to the thumbnail's top-right
   corner (li.product is position:relative -- see the flex-column rule
   above). White/translucent so it reads on any product photo. */
.woocommerce ul.products li.product .lumen-wishlist-btn--grid {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(20, 20, 26, .14);
}
.woocommerce ul.products li.product .lumen-wishlist-btn--grid .lumen-wishlist-icon {
  width: 18px;
  height: 18px;
}
.woocommerce ul.products li.product .lumen-wishlist-btn--grid:hover {
  background: #fff;
}

/* Single product page: sits right under the title, label visible. */
.single-product .lumen-wishlist-btn--single {
  margin: 10px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var( --ink-soft, #3a3a42 );
}
.single-product .lumen-wishlist-btn--single:hover {
  color: var( --wine, #9b1b30 );
}
.single-product .lumen-wishlist-btn--single.is-active {
  color: var( --wine, #9b1b30 );
}

/* =========================================================================
 * Recently Viewed / Wishlist product strips
 * Both are populated client-side (main.js, from localStorage) via the
 * lumen_product_grid AJAX action, then rendered with WooCommerce's own
 * "ul.products li.product" card markup -- so no extra card styling is
 * needed here, just section spacing and the empty/loading states.
 * ========================================================================= */
.lumen-recently-viewed-section {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var( --border, #e6e3da );
  display: none; /* revealed by main.js once there's at least one item to show */
}
.lumen-recently-viewed-section.is-loaded {
  display: block;
}
.lumen-recently-viewed-section h2 {
  margin-bottom: 28px;
}

.lumen-wishlist-page {
  padding: 40px 0 80px;
}
.lumen-wishlist-empty {
  text-align: center;
  padding: 60px 20px;
  color: var( --gray, #6b6b75 );
}
.lumen-wishlist-empty p {
  margin: 0 0 20px;
  font-size: 15px;
}
.lumen-wishlist-grid[hidden] {
  display: none;
}
.lumen-wishlist-continue {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var( --border, #e6e3da );
  text-align: center;
}
.lumen-wishlist-continue[hidden] {
  display: none;
}





/* Fix: keep Add to Cart + WhatsApp icon on one row on mobile (was wrapping) */
.woocommerce ul.products li.product .lumen-shop-actions {
  flex-wrap: nowrap;
}
.woocommerce ul.products li.product .lumen-shop-actions .button {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 480px) {
  .woocommerce ul.products li.product .lumen-shop-actions .button {
    padding: 13px 10px !important;
    font-size: 11px !important;
  }
}






/* Shop grid: title truncates to one line; price reserves 2-line height
   so button rows line up without needing equal-height cards */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.woocommerce ul.products li.product .price {
  display: flex;
  align-items: flex-end;
  min-height: 20px;
}





#reviews #commentform {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 640px;
  margin-top: 20px;
}
#reviews #commentform > p,
#reviews #commentform > .comment-form-rating {
  flex: 1 1 100%;
  margin: 0;
}
#reviews #commentform .comment-form-author,
#reviews #commentform .comment-form-email {
  flex: 1 1 calc(50% - 10px);
}
#reviews #commentform label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
#reviews #commentform .required {
  color: var(--wine);
  text-decoration: none;
}
#reviews #commentform input[type="text"],
#reviews #commentform input[type="email"],
#reviews #commentform textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#reviews #commentform textarea {
  min-height: 140px;
  resize: vertical;
}
#reviews #commentform input[type="text"]:focus,
#reviews #commentform input[type="email"]:focus,
#reviews #commentform textarea:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .15);
}
#reviews #commentform .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
}
#reviews #commentform .comment-form-cookies-consent input {
  accent-color: var(--gold-dark);
  margin: 0;
}
#reviews #commentform .form-submit {
  margin-top: 4px;
}
@media (max-width: 560px) {
  #reviews #commentform .comment-form-author,
  #reviews #commentform .comment-form-email {
    flex: 1 1 100%;
  }
}


/* The abandoned-cart WhatsApp nudge card (bottom-left "Complete on
 * WhatsApp" bar) that used to be styled here has been removed at the
 * user's request, along with its markup (functions.php) and timing/
 * dismissal JS (main.js). */