/* ================================================
   CLIMB RESEARCH LABS — CLAY THEME OVERLAY
   Soft, tactile surfaces. Keeps base palette (#D4A843 gold / #7EB8DA blue / dark bg).
   Loaded AFTER style.css so these win without !important wars.
   ================================================ */

/* --------------------------------------------------
   Page wrapper grey ring fix
   Woodmart customizer injects an inline <style> like:
     .woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) { background-color: rgb(10,10,10) !important }
   Specificity (0,3,0). Against the pure-black body that
   reads as a visible grey frame on archives. Match its
   body-class chain so we tie at (0,3,0) and win by order.
   -------------------------------------------------- */
.page .wd-page-content.main-page-wrapper,
.woodmart-archive-shop .wd-page-content.main-page-wrapper,
.single-product .wd-page-content.main-page-wrapper,
.woodmart-archive-blog .wd-page-content.main-page-wrapper,
.single-post .wd-page-content.main-page-wrapper,
.wd-page-content.main-page-wrapper {
  background: #000 !important;
  background-color: #000 !important;
}

:root {
  --clay-radius-sm: 12px;
  --clay-radius: 18px;
  --clay-radius-lg: 24px;

  /* Dark-mode clay shadows: deep black outer + faint highlight */
  --clay-shadow:
    8px 8px 22px rgba(0, 0, 0, 0.70),
    -4px -4px 14px rgba(255, 255, 255, 0.025),
    inset 1px 1px 1px rgba(255, 255, 255, 0.035),
    inset -1px -1px 1px rgba(0, 0, 0, 0.55);

  --clay-shadow-sm:
    4px 4px 12px rgba(0, 0, 0, 0.55),
    -2px -2px 8px rgba(255, 255, 255, 0.02),
    inset 1px 1px 1px rgba(255, 255, 255, 0.03);

  --clay-shadow-lg:
    14px 14px 38px rgba(0, 0, 0, 0.75),
    -6px -6px 20px rgba(255, 255, 255, 0.03),
    inset 1px 1px 2px rgba(255, 255, 255, 0.04),
    inset -2px -2px 2px rgba(0, 0, 0, 0.6);

  /* Pressed / inset (inputs, pressed buttons) */
  --clay-inset:
    inset 4px 4px 10px rgba(0, 0, 0, 0.65),
    inset -3px -3px 8px rgba(255, 255, 255, 0.025);

  --clay-gold-glow:
    8px 8px 22px rgba(0, 0, 0, 0.65),
    -3px -3px 14px rgba(212, 168, 67, 0.12),
    inset 1px 1px 1px rgba(255, 255, 255, 0.15),
    inset -1px -1px 1px rgba(0, 0, 0, 0.35);

  --clay-blue-glow:
    8px 8px 22px rgba(0, 0, 0, 0.65),
    -3px -3px 14px rgba(74, 114, 168, 0.18),
    inset 1px 1px 1px rgba(255, 255, 255, 0.08),
    inset -1px -1px 1px rgba(0, 0, 0, 0.35);

  --clay-ease: cubic-bezier(0.25, 0.85, 0.4, 1.15);
}

/* ============== CARDS / PRODUCT TILES ============== */
.product-grid-item,
.wd-product,
li.product,
.wd-post,
.post-loop-item,
.widget:not(.footer-widget):not(.wd-footer .widget),
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-cart-form__contents,
.wd-shop-tools,
.wd-sticky-btn-content,
#reviews,
.research-disclaimer,
.cr-coa-section {
  background: linear-gradient(145deg, #161616, #0d0d0d) !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow) !important;
  padding: 18px !important;
  transition: transform 280ms var(--clay-ease), box-shadow 280ms var(--clay-ease) !important;
}

.product-grid-item:hover,
.wd-product:hover,
li.product:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--clay-shadow-lg) !important;
}

/* Product images nestled inside clay frame */
.wd-product .product-image-link,
.wd-product .product-element-top,
li.product .wd-entities-title ~ .wd-product-thumbnail,
.wd-product-thumbnail {
  border-radius: var(--clay-radius-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--clay-inset) !important;
}

/* ============== BUTTONS ============== */
button,
input[type="submit"],
input[type="button"],
.button,
.wd-button,
a.button,
.wp-block-button__link,
.added_to_cart,
.checkout-button,
.single_add_to_cart_button,
.wc-forward,
.woodmart-button,
.btn,
.cr-coa-btn {
  border: none !important;
  border-radius: var(--clay-radius) !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: var(--clay-shadow-sm) !important;
  background: linear-gradient(145deg, #1a1a1a, #0e0e0e) !important;
  color: var(--cr-text) !important;
  transition: transform 180ms var(--clay-ease),
              box-shadow 220ms var(--clay-ease),
              background 220ms var(--clay-ease) !important;
  text-shadow: none !important;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wd-button:hover,
a.button:hover,
.wp-block-button__link:hover,
.checkout-button:hover,
.single_add_to_cart_button:hover,
.woodmart-button:hover,
.cr-coa-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow) !important;
}

button:active,
input[type="submit"]:active,
.button:active,
.single_add_to_cart_button:active,
.checkout-button:active,
.cr-coa-btn:active {
  transform: translateY(1px) !important;
  box-shadow: var(--clay-inset) !important;
}

/* Gold primary buttons — keep color, add clay depth */
.single_add_to_cart_button,
.checkout-button,
button[type="submit"].button,
.wp-block-button__link,
.wd-button.wd-style-default,
.cr-coa-btn--primary,
.woodmart-button.btn-color-primary {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  box-shadow: var(--clay-gold-glow) !important;
  font-weight: 700 !important;
}

.single_add_to_cart_button:hover,
.checkout-button:hover,
.wp-block-button__link:hover,
.cr-coa-btn--primary:hover {
  background: linear-gradient(145deg, #e8c159, #c29a34) !important;
  box-shadow:
    10px 10px 28px rgba(0, 0, 0, 0.75),
    -4px -4px 18px rgba(212, 168, 67, 0.22),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Ghost / secondary clay button */
.cr-coa-btn--ghost {
  background: linear-gradient(145deg, #161616, #0a0a0a) !important;
  color: var(--cr-blue) !important;
  box-shadow: var(--clay-shadow-sm) !important;
}

/* ============== FORM INPUTS — inset clay ============== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select,
.input-text,
.select2-container--default .select2-selection--single,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: #0b0b0b !important;
  border: none !important;
  border-radius: var(--clay-radius-sm) !important;
  box-shadow: var(--clay-inset) !important;
  padding: 14px 18px !important;
  color: var(--cr-text) !important;
  transition: box-shadow 220ms var(--clay-ease) !important;
}

input:focus,
textarea:focus,
select:focus,
.input-text:focus {
  outline: none !important;
  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.7),
    inset -3px -3px 8px rgba(255, 255, 255, 0.03),
    0 0 0 2px rgba(212, 168, 67, 0.35) !important;
}

/* ============== NAV / HEADER ============== */
.whb-header,
.whb-main-header {
  background: linear-gradient(180deg, #0a0a0a, #050505) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
  border-bottom: none !important;
}

.wd-nav-main > li > a,
.menu-item > a,
.woodmart-nav-link,
a.woodmart-nav-link {
  border-radius: var(--clay-radius-sm) !important;
  padding: 10px 16px !important;
  background: linear-gradient(145deg, #151515, #0a0a0a) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  transition: transform 200ms var(--clay-ease), box-shadow 200ms var(--clay-ease) !important;
}

.wd-nav-main > li > a:hover,
.menu-item > a:hover,
.woodmart-nav-link:hover,
.menu-item.current-menu-item > a,
li.current-menu-item > .woodmart-nav-link {
  background: linear-gradient(145deg, #1a1a1a, #0e0e0e) !important;
  box-shadow: var(--clay-shadow) !important;
  transform: translateY(-1px) !important;
}

/* Header icons — single clay bubble per tool, never nested.
   Icon-only tools (search/wishlist/compare): the outer <a> is the clay circle.
   Tools with text (cart $, account LOGIN/REGISTER): the outer <a> is the clay pill
   and the inner .wd-tools-icon is kept transparent so there's no double bubble. */

/* Uniform 14px gap between all header tool items (account, search, wishlist, cart).
   Woodmart stacks these inline with various margin utilities — override everything
   so the visual spacing between LOGIN/REGISTER and the search icon matches the
   spacing between search → wishlist → cart. */
.whb-col-right,
.wd-header-tools,
.wd-tools-elements,
.whb-column.whb-col-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.whb-col-right > *,
.whb-col-right .wd-tools-element,
.wd-header-tools > *,
.wd-tools-elements > * {
  margin: 0 !important;
}
.wd-header-my-account {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Icon-only tools — clay circle on the anchor itself */
.wd-header-search > a,
.wd-header-wishlist > a,
.wd-header-compare > a {
  background: linear-gradient(145deg, #151515, #0a0a0a) !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--clay-shadow-sm) !important;
  transition: transform 220ms var(--clay-ease), box-shadow 220ms var(--clay-ease) !important;
}
.wd-header-search > a:hover,
.wd-header-wishlist > a:hover,
.wd-header-compare > a:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow) !important;
}

/* Kill the inner icon bubble on every header tool — outer wrapper is the bubble */
.wd-header-search .wd-tools-icon,
.wd-header-wishlist .wd-tools-icon,
.wd-header-compare .wd-tools-icon,
.wd-header-cart .wd-tools-icon,
.wd-header-my-account .wd-tools-icon {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

.wd-header-cart .wd-cart-number {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  border-radius: 999px !important;
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.6),
    inset 1px 1px 1px rgba(255, 255, 255, 0.25) !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ============== QUANTITY STEPPER + ADD-TO-CART (product page) ============== */

/* Stepper wrapper is a flex row: [-] [qty input] [+] ADD TO CART */
.single-product-buttons,
.woocommerce-variation-add-to-cart,
form.cart {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 4px !important;
  background: transparent !important;
  border-radius: var(--clay-radius-sm) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The number input — was invisible because text color defaulted to black on a
   dark background. Give it contrast + width so the user can see the count. */
.quantity input.qty,
.quantity input[type="number"] {
  background: linear-gradient(145deg, #0b0b0b, #060606) !important;
  box-shadow: var(--clay-inset) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--cr-text) !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 46px !important;
  padding: 0 8px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  -moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.quantity button,
.quantity .plus,
.quantity .minus {
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: var(--clay-shadow-sm) !important;
  color: var(--cr-text) !important;
  width: 46px !important;
  height: 46px !important;
  font-size: 18px !important;
  line-height: 46px !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.quantity button:hover,
.quantity .plus:hover,
.quantity .minus:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow) !important;
}

/* ADD TO CART — force clay radius + padding regardless of Woodmart overrides */
.single_add_to_cart_button,
button.single_add_to_cart_button.alt,
.woocommerce form.cart .single_add_to_cart_button,
.wd-buy-now-btn.single_add_to_cart_button {
  border-radius: var(--clay-radius) !important;
  padding: 0 28px !important;
  height: 46px !important;
  line-height: 46px !important;
  min-width: 180px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ============== BADGES / PILLS ============== */
.wd-product-label,
.product-labels .onsale,
.onsale,
.wd-label-text {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  box-shadow:
    4px 4px 12px rgba(0, 0, 0, 0.55),
    inset 1px 1px 1px rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ============== TABS ============== */
.wd-tabs .wd-nav-tabs,
.woocommerce-tabs .wc-tabs {
  background: transparent !important;
  border: none !important;
  gap: 10px !important;
  display: flex !important;
}

.wd-tabs .wd-nav-tabs > li > a,
.woocommerce-tabs .wc-tabs > li > a {
  background: linear-gradient(145deg, #151515, #0a0a0a) !important;
  border-radius: var(--clay-radius-sm) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  padding: 12px 22px !important;
  border: none !important;
  transition: box-shadow 220ms var(--clay-ease), transform 220ms var(--clay-ease) !important;
}

.wd-tabs .wd-nav-tabs > li.active > a,
.woocommerce-tabs .wc-tabs > li.active > a {
  box-shadow: var(--clay-inset) !important;
  color: var(--cr-gold) !important;
}

/* ============== COA SECTION — clay card ============== */
.cr-coa-section {
  background: linear-gradient(145deg, #151515, #0c0c0c) !important;
  border-radius: var(--clay-radius-lg) !important;
  box-shadow: var(--clay-shadow) !important;
  padding: 24px !important;
  margin-top: 22px !important;
}

.cr-coa-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
}

.cr-coa-btn {
  display: inline-block !important;
  padding: 12px 22px !important;
  border-radius: var(--clay-radius) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
}

/* ============== RESEARCH DISCLAIMER ============== */
.research-disclaimer {
  background: linear-gradient(145deg, #1a0e0e, #0d0606) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow:
    8px 8px 22px rgba(0, 0, 0, 0.70),
    -3px -3px 14px rgba(220, 38, 38, 0.08),
    inset 1px 1px 1px rgba(255, 255, 255, 0.03) !important;
  padding: 18px !important;
}

/* ============== CART / CHECKOUT TABLES ============== */
.shop_table,
.woocommerce-cart-form table,
table.cart,
.cart_totals table {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

.shop_table tr,
table.cart tr {
  background: linear-gradient(145deg, #141414, #0a0a0a) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  border-radius: var(--clay-radius-sm) !important;
}

.shop_table th,
.shop_table td {
  border: none !important;
  padding: 16px !important;
}

/* ============== DROPDOWNS / SELECT2 ============== */
.select2-dropdown,
.wd-dropdown {
  background: linear-gradient(145deg, #151515, #0a0a0a) !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-lg) !important;
  overflow: hidden !important;
}

/* ============== PAGINATION ============== */
.page-numbers,
.woocommerce-pagination a,
.woocommerce-pagination span {
  background: linear-gradient(145deg, #151515, #0a0a0a) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--clay-shadow-sm) !important;
  padding: 10px 14px !important;
  min-width: 42px !important;
  text-align: center !important;
}

.page-numbers.current,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination li .page-numbers.current,
nav[class*="-pagination"] li .page-numbers.current {
  box-shadow: var(--clay-inset) !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #1f1f1f, #111111) !important;
  background-color: #1a1a1a !important;
}

/* Prev/next arrows — gold clay pill to match primary CTAs */
.woocommerce-pagination a.next,
.woocommerce-pagination a.prev,
.woocommerce-pagination .next.page-numbers,
.woocommerce-pagination .prev.page-numbers,
a.page-numbers.next,
a.page-numbers.prev {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  box-shadow: var(--clay-gold-glow), var(--clay-shadow-sm) !important;
}
.woocommerce-pagination a.next:hover,
.woocommerce-pagination a.prev:hover,
a.page-numbers.next:hover,
a.page-numbers.prev:hover {
  background: linear-gradient(145deg, #e8c159, #c29a34) !important;
  color: #0a0a0a !important;
}
.woocommerce-pagination a.next i,
.woocommerce-pagination a.prev i,
.woocommerce-pagination a.next svg,
.woocommerce-pagination a.prev svg,
a.page-numbers.next i,
a.page-numbers.prev i {
  color: #0a0a0a !important;
  fill: #0a0a0a !important;
}

/* ============== FOOTER — explicitly NOT clay ==============
   Kill any clay styling that bled in via inherited widget/card rules.
   Keep footer flat, regular, no shadows or rounded tiles. */
.wd-footer, .wd-footer *,
.site-footer, .site-footer *,
.website-wrapper > footer, .website-wrapper > footer * {
  box-shadow: none !important;
}
.wd-footer .widget,
.wd-footer .footer-widget,
.wd-footer .wd-widget,
.site-footer .widget,
.site-footer .footer-widget {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.wd-footer .footer-column,
.site-footer .footer-column {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wd-footer a,
.site-footer a {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: inherit !important;
}

/* ============== MINI-CART / SIDEBAR ============== */

/* The dropdown variant (not the side-drawer) gets the clay bubble */
.wd-cart-drop {
  background: linear-gradient(145deg, #121212, #080808) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-lg) !important;
  border: none !important;
}

/* Side drawer — the drawer itself is the clay surface, inner widgets stay flat.
   Previously the inner .widget_shopping_cart had its own rounded bubble,
   creating a second "card" with a visible edge inside the drawer. */
.cart-widget-side,
.cart-widget-side .widget_shopping_cart,
.cart-widget-side .widget_shopping_cart_content,
.cart-widget-side .woocommerce-mini-cart,
.cart-widget-side ul.cart_list,
.cart-widget-side .product_list_widget {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.cart-widget-side .woocommerce-mini-cart-item,
.cart-widget-side li.mini_cart_item,
.cart-widget-side ul.cart_list > li {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
}

/* Thin divider between mini-cart items so they don't visually merge */
.cart-widget-side ul.cart_list > li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Mini-cart action buttons — View Cart (ghost) + Checkout (gold).
   These use classes .button.wc-forward and .checkout.wc-forward. */
.cart-widget-side .woocommerce-mini-cart__buttons,
.widget_shopping_cart .woocommerce-mini-cart__buttons,
.widget_shopping_cart .buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cart-widget-side .woocommerce-mini-cart__buttons a,
.widget_shopping_cart .buttons a.button,
.widget_shopping_cart a.wc-forward {
  display: block !important;
  text-align: center !important;
  padding: 14px 22px !important;
  border-radius: var(--clay-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: var(--clay-shadow-sm) !important;
  background: linear-gradient(145deg, #1a1a1a, #0e0e0e) !important;
  color: var(--cr-text) !important;
  border: none !important;
  transition: transform 180ms var(--clay-ease), box-shadow 220ms var(--clay-ease) !important;
}
.cart-widget-side .woocommerce-mini-cart__buttons a.checkout,
.widget_shopping_cart a.checkout,
.widget_shopping_cart a.checkout.wc-forward {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  box-shadow: var(--clay-gold-glow) !important;
}
.cart-widget-side .woocommerce-mini-cart__buttons a:hover,
.widget_shopping_cart a.wc-forward:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow) !important;
}

/* Subtotal row — just typography, no bubble */
.cart-widget-side .woocommerce-mini-cart__total,
.cart-widget-side .total,
.widget_shopping_cart .total {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 0 !important;
  margin: 0 0 14px !important;
  color: var(--cr-text) !important;
  font-weight: 700 !important;
}

/* ============== LINKS inside clay cards stay readable ============== */
.product-grid-item a,
li.product a {
  text-decoration: none !important;
}

/* ============== FULL-SEND: cover every remaining button/chip variant ============== */

/* Top announcement strip ("FREE SHIPPING..." / "RESEARCH USE ONLY") — clay capsule */
.whb-top-bar,
.wd-header-banner,
.wd-top-bar {
  background: linear-gradient(145deg, #0e0e0e, #050505) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.025),
    0 2px 12px rgba(0, 0, 0, 0.5) !important;
  border: none !important;
}

/* Elementor + block + any theme button variants we didn't catch */
.elementor-button,
.elementor-button-wrapper .elementor-button,
.wp-block-button > a,
.wp-element-button,
.wd-buy-now-btn,
.woodmart-button.btn-style-bordered,
.woodmart-button.btn-style-link,
.woodmart-button.btn-style-semi-rounded,
.woodmart-button.btn-style-rounded,
.btn.btn-default,
.btn.btn-outline,
a.btn,
a.wd-button,
a.woodmart-button,
.wd-action-btn > a,
.wd-action-btn > span,
.product-compare-button a,
.wd-wishlist-btn a,
.add_to_wishlist,
.yith-wcwl-add-to-wishlist a,
.compare,
a.added_to_cart,
.wd-buttons .wd-button,
.wd-tools-element > a {
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  background: linear-gradient(145deg, #1a1a1a, #0e0e0e) !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  transition: transform 180ms var(--clay-ease),
              box-shadow 220ms var(--clay-ease) !important;
}

.elementor-button:hover,
.wp-block-button > a:hover,
.woodmart-button.btn-style-bordered:hover,
.add_to_wishlist:hover,
.compare:hover,
.wd-buy-now-btn:hover,
a.btn:hover,
a.wd-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow) !important;
}

/* Outline / "LEARN MORE" style — keep outline feel but clay-backed */
.woodmart-button.btn-style-bordered,
.btn.btn-outline,
.wd-button.wd-style-bordered {
  background: linear-gradient(145deg, #141414, #080808) !important;
  color: var(--cr-text) !important;
}

/* Elementor primary-coded buttons should still get gold clay */
.elementor-button.elementor-button-primary,
.elementor-button[class*="-primary"],
.wp-block-button.is-style-primary > a {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  box-shadow: var(--clay-gold-glow) !important;
}

/* Stat chips / pills — the "99%+ PURITY", "$250+ FREE SHIPPING", "COA EVERY BATCH",
   "99%+ NO CONTAMINATION", "SAME DAY PROCESSING", "USA BASED" capsules */
.wd-info-box,
.info-box,
.wd-promo-banner,
.wd-stat,
.stat-box,
.elementor-counter,
.elementor-icon-box-wrapper,
.wd-text-block.chip,
.price-label,
.wd-single-hero-stat,
.stat-chip {
  background: linear-gradient(145deg, #141414, #0a0a0a) !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  padding: 18px !important;
}

/* Elementor columns that hold stat groupings should look like clay tiles */
.elementor-widget-wrap > .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-heading) {
  border-radius: var(--clay-radius-sm) !important;
}

/* Class-less CTA anchors inside page content (SHOP NOW, LEARN MORE, BROWSE PRODUCTS, VIEW ALL →).
   Reset rule below protects product-title <a> inside h3.wd-entities-title from being pill-ified. */
.entry-content a[href]:not([class]):not([href^="mailto"]):not([href^="tel"]):not([href^="#"]):not([href*="/product/"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 22px !important;
  border-radius: var(--clay-radius) !important;
  background: linear-gradient(145deg, #161616, #0a0a0a) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  color: var(--cr-gold) !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: transform 180ms var(--clay-ease), box-shadow 220ms var(--clay-ease) !important;
}
.entry-content a[href]:not([class]):hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow) !important;
}

/* RESET: product-title / heading anchors should stay as inline text, never clay pills.
   Overrides the broader CTA rule above. */
.wd-product a:not([class]),
.wd-entities-title a,
h1 a:not([class]),
h2 a:not([class]),
h3 a:not([class]),
h4 a:not([class]),
h5 a:not([class]),
h6 a:not([class]),
.product-grid-item h3 a,
.wd-product h3 a,
.wd-product h2 a {
  display: inline !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  gap: 0 !important;
  transform: none !important;
}

/* "VIEW ALL →" and similar arrow links — clay pill */
a.wd-more,
.wd-entities-title ~ a.wd-more,
.more-link,
a.wd-view-all,
a[href*="/shop"] .wd-more-arrow,
.wd-more-arrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #161616, #0a0a0a) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  color: var(--cr-gold) !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Hero stats row ("99%+ / $250+ / COA") when shown as inline numbers — clay the container cells */
.wd-hero-stats,
.wd-stats-row,
.hero-stats {
  display: flex !important;
  gap: 12px !important;
}
.wd-hero-stats > *,
.wd-stats-row > *,
.hero-stats > * {
  background: linear-gradient(145deg, #141414, #0a0a0a) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  padding: 18px 22px !important;
  border: none !important;
}

/* Product page sticky add-to-cart bar, compare/wishlist row, social share buttons */
.wd-sticky-btn,
.wd-social-icons .wd-social-icon,
.wd-share .wd-social-icon,
.product-share a {
  border-radius: 50% !important;
  box-shadow: var(--clay-shadow-sm) !important;
  background: linear-gradient(145deg, #151515, #0a0a0a) !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* "Compare" / "Add to wishlist" under price — ONE clay pill per button.
   Put the pill on the inner <a> (which is the actual clickable element that
   Woodmart binds its JS click handlers to) and flatten the outer wrapper so
   there's no nested double-bubble. */
.wd-wishlist-btn,
.wd-compare-btn,
.product-compare-button,
.yith-wcwl-add-to-wishlist {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-right: 8px !important;
  display: inline-flex !important;
}

.wd-wishlist-btn > a,
.wd-compare-btn > a,
.product-compare-button > a,
.yith-wcwl-add-to-wishlist > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #141414, #0a0a0a) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  font-size: 12px !important;
  border: none !important;
  color: var(--cr-text) !important;
  text-decoration: none !important;
  transition: transform 180ms var(--clay-ease), box-shadow 220ms var(--clay-ease) !important;
}
.wd-wishlist-btn > a:hover,
.wd-compare-btn > a:hover,
.product-compare-button > a:hover,
.yith-wcwl-add-to-wishlist > a:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow) !important;
}

/* Category / brand tiles */
.wd-product-cats-list li > a,
.wd-cats-element,
.wd-brands-element {
  background: linear-gradient(145deg, #141414, #0a0a0a) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  padding: 14px !important;
  border: none !important;
}

/* Checkout / login / coupon / shipping calculator forms — clay grouping */
.woocommerce-form-login,
.woocommerce-form-coupon,
.woocommerce-form-register,
.woocommerce-shipping-calculator,
.woocommerce-address-fields,
#customer_details,
#customer_details > .col-1,
#customer_details > .col-2 {
  background: linear-gradient(145deg, #141414, #0a0a0a) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow) !important;
  padding: 22px !important;
  border: none !important;
}

/* FAQ page — raw <details>/<summary> rows rendered as clay bubbles */
.entry-content details,
.elementor-widget-container details,
.page-content details {
  background: linear-gradient(145deg, #141414, #0a0a0a) !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: box-shadow 220ms var(--clay-ease), transform 180ms var(--clay-ease) !important;
}
.entry-content details:hover,
.elementor-widget-container details:hover,
.page-content details:hover {
  box-shadow: var(--clay-shadow) !important;
  transform: translateY(-1px) !important;
}
.entry-content details[open],
.elementor-widget-container details[open],
.page-content details[open] {
  box-shadow: var(--clay-inset) !important;
  transform: none !important;
}
.entry-content details > summary,
.elementor-widget-container details > summary,
.page-content details > summary {
  padding: 18px 24px !important;
  color: var(--cr-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
.entry-content details > summary::-webkit-details-marker,
.elementor-widget-container details > summary::-webkit-details-marker,
.page-content details > summary::-webkit-details-marker {
  display: none !important;
}
.entry-content details > summary::before,
.elementor-widget-container details > summary::before,
.page-content details > summary::before {
  content: "+" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  text-align: center !important;
  margin-right: 12px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  color: var(--cr-gold) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  transition: transform 220ms var(--clay-ease) !important;
}
.entry-content details[open] > summary::before,
.elementor-widget-container details[open] > summary::before,
.page-content details[open] > summary::before {
  content: "−" !important;
  transform: rotate(0deg) !important;
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  box-shadow: var(--clay-gold-glow) !important;
}
.entry-content details > *:not(summary),
.elementor-widget-container details > *:not(summary),
.page-content details > *:not(summary) {
  padding: 0 24px 18px 58px !important;
  color: #bfbfbf !important;
  line-height: 1.65 !important;
}

/* Cart / Checkout step indicator (SHOPPING CART → CHECKOUT → ORDER COMPLETE) */
.wd-checkout-steps {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.wd-checkout-steps > li {
  background: transparent !important;
  padding: 0 !important;
}
.wd-checkout-steps > li > a,
.wd-checkout-steps > li.step-active,
.wd-checkout-steps > li.step-inactive,
.wd-checkout-steps > li > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #161616, #0a0a0a) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  color: var(--cr-text) !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  border: none !important;
}
.wd-checkout-steps > li.step-active,
.wd-checkout-steps > li.step-active > a {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  box-shadow: var(--clay-gold-glow) !important;
}

/* Price html & ratings — pill so they read as consistent clay chips */
.price ins,
.price del,
.price,
.stars,
.star-rating {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: transparent !important;
}

/* Buttons that are anchor-as-link (catch-all) */
.wd-button-wrap > a,
.wd-button-wrap > button {
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow-sm) !important;
}

/* ============== SCROLLBAR (subtle clay groove) ============== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: #050505;
  box-shadow: var(--clay-inset);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, #1c1c1c, #0a0a0a);
  border-radius: 10px;
  box-shadow: var(--clay-shadow-sm);
}

/* ============== CHECKOUT FIXES (2026-04-21 v2) ============== */

/* Double-bubble on checkout step indicator — strip <li>, keep pill on inner only */
.wd-checkout-steps > li,
.wd-checkout-steps > li.step-active,
.wd-checkout-steps > li.step-inactive {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
}

/* PLACE ORDER — force gold clay pill */
#place_order,
button#place_order,
.woocommerce-checkout #place_order,
button[name="woocommerce_checkout_place_order"] {
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-gold-glow) !important;
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 16px 28px !important;
  min-height: 52px !important;
  border: none !important;
  width: auto !important;
}

/* Billing inputs: pull inset shadow away from the text baseline */
.woocommerce-checkout input.input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea {
  min-height: 48px !important;
  padding: 10px 18px !important;
  line-height: 1.5 !important;
  font-size: 15px !important;
  box-shadow:
    inset 3px 3px 7px rgba(0, 0, 0, 0.55),
    inset -2px -2px 6px rgba(255, 255, 255, 0.02) !important;
}

/* Order review table: flatten per-row bubbles inside the clay panel */
.woocommerce-checkout-review-order .shop_table,
.woocommerce-checkout-review-order table.shop_table {
  background: transparent !important;
  box-shadow: none !important;
}
.woocommerce-checkout-review-order .shop_table tr,
.woocommerce-checkout-review-order table.shop_table tr {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.woocommerce-checkout-review-order .shop_table th,
.woocommerce-checkout-review-order .shop_table td,
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
  padding: 14px 8px !important;
  background: transparent !important;
}
.woocommerce-checkout-review-order .shop_table thead th {
  background: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* WC notice banners (add-to-cart success, error, info) — flex layout so the
   ::before checkmark/icon sits before the text instead of absolutely overlapping
   it, and any inline action button (VIEW CART, etc.) gets pushed to the right
   via margin-left:auto. Applies globally; the checkout-specific override below
   tightens alignment for multiline error blocks. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex-shrink: 0 !important;
}

/* Action button (VIEW CART / RETURN TO SHOP / etc.) snaps to right edge */
.woocommerce-message > a.button,
.woocommerce-message > .button,
.woocommerce-message > a.wc-forward,
.woocommerce-info > a.button,
.woocommerce-info > .button,
.woocommerce-error > a.button {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Checkout block — multiline notices look better aligned to the icon's top */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-info,
.woocommerce-NoticeGroup-checkout .woocommerce-error {
  align-items: flex-start !important;
  gap: 12px !important;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-NoticeGroup-checkout .woocommerce-info::before,
.woocommerce-NoticeGroup-checkout .woocommerce-error::before {
  margin-top: 2px !important;
}

/* ============== CART PAGE FIXES (2026-04-21 v3) ============== */

/* APPLY COUPON — clay pill */
button[name="apply_coupon"],
input[name="apply_coupon"],
.woocommerce-cart-form button[name="apply_coupon"] {
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-gold-glow) !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* PROCEED TO CHECKOUT — gold clay pill, dark readable text */
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout .checkout-button,
a.checkout-button,
a.checkout-button.button.alt,
a.checkout-button.wc-forward {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-gold-glow) !important;
  padding: 16px 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
}

/* Cart table header alignment */
.woocommerce-cart-form .shop_table th.product-name,
.woocommerce-cart-form .shop_table td.product-name,
table.cart th.product-name,
table.cart td.product-name {
  text-align: left !important;
}
.woocommerce-cart-form .shop_table th.product-price,
.woocommerce-cart-form .shop_table td.product-price,
.woocommerce-cart-form .shop_table th.product-quantity,
.woocommerce-cart-form .shop_table td.product-quantity,
table.cart th.product-price,
table.cart td.product-price,
table.cart th.product-quantity,
table.cart td.product-quantity {
  text-align: center !important;
}
.woocommerce-cart-form .shop_table th.product-subtotal,
.woocommerce-cart-form .shop_table td.product-subtotal,
table.cart th.product-subtotal,
table.cart td.product-subtotal {
  text-align: right !important;
}

/* UPDATE CART — match APPLY COUPON as gold clay */
button[name="update_cart"],
input[name="update_cart"],
.woocommerce-cart-form button[name="update_cart"] {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-gold-glow) !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  opacity: 1 !important;
}
button[name="update_cart"][disabled],
button[name="update_cart"]:disabled,
input[name="update_cart"][disabled] {
  opacity: 0.75 !important;
  cursor: not-allowed !important;
}

/* Checkout-step arrows — guarantee a visible → between each pill on both the
   cart and checkout pages (Woodmart's default arrow disappears once we flatten
   the <li>; re-add it via ::after). */
.wd-checkout-steps > li:not(:last-child) {
  display: inline-flex !important;
  align-items: center !important;
}
.wd-checkout-steps > li:not(:last-child)::after {
  content: "→";
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  font-weight: 500;
}

/* Product-listing box — mirror the thin frame that CART TOTALS has on the
   right so both sides of the cart page read as matched panels. */
.woocommerce-cart-form,
form.woocommerce-cart-form,
.woocommerce-cart-form__contents {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--clay-radius) !important;
}

/* Product-card titles: Woodmart defaults --wd-entities-title-color to #333,
   which is near-invisible on the black clay cards. Force readable text. */
:root {
  --wd-entities-title-color: #f2f2f2 !important;
  --wd-entities-title-color-hover: var(--cr-gold, #D4A843) !important;
}
.wd-entities-title,
.wd-entities-title a,
.product-grid-item .wd-entities-title,
.product-grid-item .wd-entities-title a,
.wd-product .wd-entities-title,
.wd-product .wd-entities-title a,
li.product .wd-entities-title,
li.product .wd-entities-title a {
  color: #f2f2f2 !important;
}
.wd-entities-title a:hover,
.product-grid-item .wd-entities-title a:hover,
.wd-product .wd-entities-title a:hover {
  color: var(--cr-gold, #D4A843) !important;
}

/* ============== MOBILE HEADER FIX ==============
   Earlier clay rules force .whb-col-right to display:inline-flex, which
   overrides Woodmart's whb-visible-lg media query and spills desktop-only
   header tools (LOGIN/REGISTER, search, wishlist, cart) across the mobile
   viewport. Restore Woodmart's intended mobile/desktop column switching. */
@media (max-width: 1024.98px) {
  .whb-column.whb-visible-lg,
  .whb-col-left.whb-visible-lg,
  .whb-col-center.whb-visible-lg,
  .whb-col-right.whb-visible-lg {
    display: none !important;
  }

  /* Hide the empty top bar on mobile — its "FREE SHIPPING" message is
     desktop-only (whb-visible-lg), so on mobile this row renders as a
     blank strip with a bottom border, reading as a grey separator bar. */
  .whb-row.whb-top-bar { display: none !important; }

  /* Site has no product_cat surface worth showing — the mobile drawer's
     Categories pane duplicates the Menu items via fallback. Hide the tab
     switcher + duplicate pane so the drawer is a single clean menu. */
  .mobile-nav .wd-nav-mob-tab,
  .mobile-nav .mobile-categories-menu { display: none !important; }

  /* Drop the clay pill treatment from mobile drawer menu items — the
     desktop nav pill from .woodmart-nav-link bleeds into the drawer and
     makes each row look like an individual button. Render as flat list,
     centered so items sit in the visual middle of the drawer. */
  .mobile-nav .woodmart-nav-link,
  .mobile-nav .menu-item > a,
  .mobile-nav .wd-nav-mobile a {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 14px 4px !important;
    transform: none !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .mobile-nav .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;
  }
  .mobile-nav .menu-item > a:hover,
  .mobile-nav .woodmart-nav-link:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--cr-gold, #D4A843) !important;
  }

  /* Unify the drawer search form into a single clay pill; on iOS the
     default focus ring on .searchsubmit renders as a weird gold square
     around just the button. Wrap input + submit as one visual unit. */
  .mobile-nav .wd-search-form,
  .mobile-nav form.searchform {
    background: linear-gradient(145deg, #151515, #0a0a0a) !important;
    border-radius: var(--clay-radius) !important;
    box-shadow: var(--clay-shadow-sm) !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding: 4px !important;
  }
  .mobile-nav form.searchform input.s,
  .mobile-nav form.searchform input[type="text"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    flex: 1 1 auto !important;
    padding: 12px 14px !important;
    color: var(--cr-text, #e8e8e8) !important;
    min-width: 0 !important;
  }
  .mobile-nav form.searchform button.searchsubmit,
  .mobile-nav form.searchform .searchsubmit {
    background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
    color: #0a0a0a !important;
    border: none !important;
    border-radius: calc(var(--clay-radius) - 4px) !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    flex: 0 0 auto !important;
  }
  .mobile-nav form.searchform button.searchsubmit:focus,
  .mobile-nav form.searchform button.searchsubmit:focus-visible,
  .mobile-nav form.searchform button.searchsubmit:active {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Related-products grid: Woodmart sets --wd-col-sm:2 on mobile, but clay
     card padding pushes each .product-grid-item past its 2-col cell width,
     creating the ghost-card overlap on the right. Force single column. */
  .related.products .products,
  .related.products .wd-products,
  .related-and-upsells .products,
  .related-and-upsells .wd-products {
    --wd-col-sm: 1 !important;
  }
  .related.products .product-grid-item,
  .related-and-upsells .product-grid-item {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============== KILL SECTION SEAMS ==============
   Homepage sections use inline styles alternating between #0a0a0a and #111
   backgrounds (with 1px #1a1a1a borders on the #111 section). Where those
   abut, the shade difference reads as a thin grey "bar" between sections.
   Unify all section-level wrappers to the body's pure black. Inner stat
   tiles (smaller padding values) keep their own backgrounds. */
div[style*="background:#0a0a0a;padding"],
div[style*="background: #0a0a0a;padding"] {
  background: #000 !important;
  background-color: #000 !important;
}
div[style*="background:#111;border-top:1px solid #1a1a1a"],
div[style*="background: #111;border-top: 1px solid #1a1a1a"] {
  background: #000 !important;
  background-color: #000 !important;
  border-top: none !important;
  border-bottom: none !important;
}
/* Also flatten any Elementor section wrappers that were hard-set to #0a0a0a
   via the <head> style block on the homepage. */
.elementor-section[style*="background-color: #0a0a0a"],
.elementor-section[style*="background-color:#0a0a0a"] {
  background-color: #000 !important;
}

/* ============== INLINE PRODUCT DESCRIPTION ==============
   Rendered by cr_product_description_inline() at priority 37 on
   woocommerce_single_product_summary — sits below the COA box. Matches the
   COA card visual language (dark clay panel, title row, body copy). */
.cr-product-description {
  background: linear-gradient(145deg, #161616, #0d0d0d) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow) !important;
  padding: 22px 24px !important;
  margin: 18px 0 0 !important;
}
.cr-product-description .cr-desc-title {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cr-gold, #D4A843) !important;
}
.cr-product-description .cr-desc-content {
  color: var(--cr-text, #e8e8e8) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}
.cr-product-description .cr-desc-content p {
  margin: 0 0 12px !important;
}
.cr-product-description .cr-desc-content p:last-child { margin-bottom: 0 !important; }

/* Review form submit button — was inheriting the dark clay button gradient
   and reading as disabled/unclickable. Force the gold primary CTA treatment. */
#review_form #submit,
#review_form input[type="submit"],
#respond #submit,
#respond input[type="submit"],
.comment-form-submit input[type="submit"],
.form-submit input[type="submit"] {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  background-image: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-gold-glow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 14px 28px !important;
  min-height: 48px !important;
}
#review_form #submit:hover,
#respond #submit:hover,
.comment-form-submit input[type="submit"]:hover,
.form-submit input[type="submit"]:hover {
  background: linear-gradient(145deg, #e7c058, #c59c37) !important;
  transform: translateY(-1px) !important;
  color: #0a0a0a !important;
}

/* ============================================================
   AGE GATE — clay-style revamp
   Plugin: age-gate 3.7.2. Markup is injected at runtime from a
   <template id="tmpl-age-gate"> by the plugin's JS, so all visual
   styling lives here (the plugin saves blue/silver accent settings
   in the DB which we override). DOM:
     .age-gate__wrapper           -- outer fixed full-viewport
       .age-gate__loader
       .age-gate__background-color   (solid color layer)
       .age-gate__background          (image layer)
       .age-gate                     -- centers the form
         .age-gate__form             -- the clay card itself
           .cr-age-gate-logo         -- injected by cr_age_gate_logo
           .age-gate__heading
             h1.age-gate__heading-title
             .cr-age-gate-tagline    -- injected by cr_age_gate_logo
           h2.age-gate__headline     -- "AGE VERIFICATION"
           p.age-gate__subheadline   -- body copy
           .age-gate__fields
             p.age-gate__challenge   -- usually empty
             .age-gate__buttons
               button.age-gate__submit--yes
               button.age-gate__submit--no
           .age-gate__remember-wrapper
             label.age-gate__remember
               input.age-gate__remember-field
               span.age-gate__remember-text
           .age-gate__errors
           .age-gate__additional-information   -- "FOR RESEARCH USE ONLY" + disclaimer
   ============================================================ */

/* Lock body scroll while the gate is up */
html:has(.age-gate),
body:has(.age-gate) {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

/* Backdrop: solid black. An earlier radial-gradient version (#0d0d0d → #000)
   read as visible "black bars" at the top/bottom because the dark edge fade
   contrasted against the slightly lighter center. */
.age-gate__wrapper,
.age-gate__background,
.age-gate__background-color {
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
}

/* The .age-gate element centers the form */
.age-gate {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* The card itself — block layout (NOT flex). Plugin's parent CSS sets
   .age-gate__form to flex-column with height:100%, which inside the
   flex-row `.age-gate` parent causes the form to be sized by the
   container's cross-axis (viewport height) rather than its own content,
   so children overflow the rounded card edge. Override to plain block
   so the form sizes to its natural content. */
.age-gate__form {
  background: linear-gradient(145deg, #1a1a1a, #0c0c0c) !important;
  background-image: linear-gradient(145deg, #1a1a1a, #0c0c0c) !important;
  background-color: #131313 !important;
  border: 1px solid rgba(212, 168, 67, 0.12) !important;
  border-radius: var(--clay-radius, 18px) !important;
  box-shadow: var(--clay-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: #e8e8e8 !important;
  width: 100% !important;
  max-width: 520px !important;
  padding: 36px 36px 36px !important;
  margin: 0 auto !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
}

/* Reset any wrapper padding/sizing the v1 rules used to put on .age-gate__wrapper */
.age-gate__wrapper {
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Kill ALL plugin-rendered separator lines (hr / pseudo accents in any color) */
.age-gate hr,
.age-gate__heading hr,
.age-gate__headline hr,
.age-gate__subheadline hr,
.age-gate__form hr {
  display: none !important;
}
.age-gate__heading::before,
.age-gate__heading::after,
.age-gate__headline::before,
.age-gate__headline::after,
.age-gate__subheadline::before,
.age-gate__subheadline::after,
.age-gate__heading-title::before,
.age-gate__heading-title::after,
/* style.css has `.age-gate h2::after { ... background: var(--cr-blue) }` which
   paints a blue accent line under AGE VERIFICATION. That selector is (0,1,2)
   while plain `.age-gate__headline::after` is only (0,1,1) — the blue rule
   wins despite `!important`. Match the higher specificity here to nuke it. */
.age-gate h1::before, .age-gate h1::after,
.age-gate h2::before, .age-gate h2::after,
.age-gate h3::before, .age-gate h3::after,
.age-gate__form h1::before, .age-gate__form h1::after,
.age-gate__form h2::before, .age-gate__form h2::after,
.age-gate__form h3::before, .age-gate__form h3::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

/* --- Logo --- */
.cr-age-gate-logo {
  text-align: center !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
}
.cr-age-gate-logo img {
  width: 88px !important;
  max-width: 88px !important;
  height: auto !important;
  display: inline-block !important;
  background: transparent !important;
  mix-blend-mode: screen !important;     /* removes the PNG's black box */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
}

/* --- Title block --- */
.age-gate__heading {
  text-align: center !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
}
.age-gate__heading-title {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.cr-age-gate-tagline {
  color: var(--cr-gold, #D4A843) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 !important;
  opacity: 0.95 !important;
}

/* --- "AGE VERIFICATION" pill --- */
.age-gate__headline {
  display: block !important;
  width: max-content !important;
  margin: 4px auto 0 !important;
  padding: 8px 18px !important;
  color: var(--cr-gold, #D4A843) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  background: rgba(212, 168, 67, 0.07) !important;
  border: 1px solid rgba(212, 168, 67, 0.28) !important;
  border-radius: 999px !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* --- Body copy --- */
.age-gate__subheadline {
  color: #d8d8d8 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  max-width: 420px !important;
  margin: 18px auto 26px !important;
  padding: 0 !important;
}

/* Plugin emits an empty <p class="age-gate__challenge"> with whitespace
   inside — `:empty` doesn't match because of that whitespace, so the
   element keeps its 1rem margin-bottom and steals 16-24px. Hard-hide. */
.age-gate__challenge {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* --- Buttons --- */
.age-gate__fields {
  margin: 0 !important;
  padding: 0 !important;
}
.age-gate__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
/* High-specificity selector chain (.age-gate__form button.age-gate__submit
   = 0,2,1) so we beat style.css's `button[type="submit"]` (0,1,1) AND
   the plugin's `button.age-gate__submit--*` (0,1,1). Without this, the
   buttons lose their pill shape, clay gradient, and proper text color. */
.age-gate__form button.age-gate__submit,
.age-gate__form button.age-gate__submit--yes,
.age-gate__form button.age-gate__submit--no {
  width: 100% !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  min-height: 56px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease,
              background .15s ease, color .15s ease !important;
  font-family: inherit !important;
  background-image: none !important;
}
.age-gate__form button.age-gate__submit--yes {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  background-image: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  background-color: #d4a843 !important;
  color: #0a0a0a !important;
  box-shadow: var(--clay-gold-glow) !important;
}
.age-gate__form button.age-gate__submit--yes:hover {
  background: linear-gradient(145deg, #e7c058, #c59c37) !important;
  background-image: linear-gradient(145deg, #e7c058, #c59c37) !important;
  transform: translateY(-1px) !important;
  color: #0a0a0a !important;
}
.age-gate__form button.age-gate__submit--no {
  background: linear-gradient(145deg, #1f1f1f, #111111) !important;
  background-image: linear-gradient(145deg, #1f1f1f, #111111) !important;
  background-color: #181818 !important;
  color: #ffffff !important;
  box-shadow: var(--clay-shadow-sm) !important;
}
.age-gate__form button.age-gate__submit--no:hover {
  color: var(--cr-gold, #D4A843) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--clay-shadow-sm),
              inset 0 0 0 1px rgba(212, 168, 67, 0.3) !important;
}

/* --- Remember-me checkbox --- */
.age-gate__remember-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
.age-gate__remember {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #b0b0b0 !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 !important;
  opacity: 1 !important;
}
.age-gate__remember-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid rgba(212, 168, 67, 0.45) !important;
  border-radius: 4px !important;
  background: #0d0d0d !important;
  position: relative !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.age-gate__remember-field:checked {
  background: var(--cr-gold, #D4A843) !important;
  border-color: var(--cr-gold, #D4A843) !important;
}
.age-gate__remember-field:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #0a0a0a !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  display: block !important;
}
.age-gate__remember-text {
  color: inherit !important;
  opacity: 1 !important;
  font: inherit !important;
}

/* --- Errors --- */
.age-gate__errors {
  color: #e8a87c !important;
  font-size: 13px !important;
  text-align: center !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.04em !important;
}
.age-gate__errors:empty {
  display: none !important;
}

/* --- Footer disclaimer --- */
.age-gate__additional-information {
  margin: 6px 0 0 !important;
  padding: 18px 0 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: center !important;
}
.age-gate__additional-information p {
  margin: 0 0 6px !important;
  color: #888 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
}
.age-gate__additional-information p:first-child {
  color: var(--cr-gold, #D4A843) !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  opacity: 0.95 !important;
}

/* Mobile tightening — every clay-style tweak above (logo, title, tagline,
   pill, body, buttons, remember, footer) cascades to mobile by default;
   this block just shrinks spacing/typography so the whole gate fits in
   one phone viewport with NO scroll. The previous gate scrolled, which
   the user explicitly does not want. */
@media (max-width: 600px) {
  .age-gate { padding: 10px !important; }
  .age-gate__form {
    padding: 20px 18px !important;
    max-width: 100% !important;
  }
  .cr-age-gate-logo {
    margin: 0 auto 8px !important;
  }
  .cr-age-gate-logo img {
    width: 78px !important;
    max-width: 78px !important;
  }
  .age-gate__heading {
    margin: 0 0 8px !important;
  }
  .age-gate__heading-title {
    font-size: 18px !important;
    margin: 0 0 4px !important;
    letter-spacing: 0.05em !important;
  }
  .cr-age-gate-tagline {
    font-size: 10px !important;
    letter-spacing: 0.26em !important;
  }
  .age-gate__headline {
    font-size: 10px !important;
    padding: 5px 12px !important;
    letter-spacing: 0.26em !important;
    margin: 2px auto 0 !important;
  }
  .age-gate__subheadline {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 10px auto 12px !important;
    max-width: 100% !important;
  }
  .age-gate__buttons {
    gap: 14px !important;
    margin: 0 0 10px !important;
  }
  .age-gate__form button.age-gate__submit,
  .age-gate__form button.age-gate__submit--yes,
  .age-gate__form button.age-gate__submit--no {
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.14em !important;
  }
  .age-gate__remember-wrapper {
    margin: 0 0 10px !important;
  }
  .age-gate__remember {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    gap: 8px !important;
  }
  .age-gate__remember-field {
    width: 16px !important;
    height: 16px !important;
  }
  .age-gate__remember-field:checked::after {
    left: 4px !important;
    top: 1px !important;
    width: 4px !important;
    height: 8px !important;
  }
  .age-gate__additional-information {
    padding: 10px 0 2px !important;
    margin: 4px 0 0 !important;
  }
  .age-gate__additional-information p {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
  .age-gate__additional-information p:first-child {
    font-size: 10px !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.26em !important;
  }
}

/* Very short viewports (landscape phones / iPhone SE class) — extra trim. */
@media (max-height: 680px) {
  .age-gate { padding: 8px !important; }
  .age-gate__form { padding: 16px 16px !important; }
  .cr-age-gate-logo { margin: 0 auto 4px !important; }
  .cr-age-gate-logo img { width: 64px !important; max-width: 64px !important; }
  .age-gate__heading { margin: 0 0 6px !important; }
  .age-gate__heading-title { font-size: 17px !important; margin: 0 0 2px !important; }
  .cr-age-gate-tagline { font-size: 9px !important; }
  .age-gate__headline { padding: 4px 10px !important; font-size: 9px !important; }
  .age-gate__subheadline { margin: 8px auto 10px !important; font-size: 12px !important; line-height: 1.4 !important; }
  .age-gate__buttons { gap: 12px !important; margin: 0 0 8px !important; }
  .age-gate__form button.age-gate__submit,
  .age-gate__form button.age-gate__submit--yes,
  .age-gate__form button.age-gate__submit--no {
    min-height: 40px !important; padding: 9px 18px !important; font-size: 12px !important;
  }
  .age-gate__remember-wrapper { margin: 0 0 8px !important; }
  .age-gate__additional-information { padding: 8px 0 2px !important; margin: 2px 0 0 !important; }
  .age-gate__additional-information p { font-size: 9.5px !important; line-height: 1.35 !important; }
  .age-gate__additional-information p:first-child { font-size: 9.5px !important; margin-bottom: 3px !important; }
}

/* ============== ORDER-RECEIVED / THANK-YOU PAGE ============== */
/* Gold-tint the success notice on the order-received page. The notice is
   rendered outside .woocommerce-order when the verify-email gate runs, so
   match by class alone. .wd-builder-off prefix matches the specificity of
   Woodmart's woo-thank-you-page-predefined.min.css rule we're overriding. */
.wd-builder-off .woocommerce-thankyou-order-received,
.wd-builder-off .woocommerce-notice--success {
  color: var(--cr-gold) !important;
  border-color: var(--cr-gold) !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Login prompt shown when the order isn't viewable without auth. */
.cr-order-login-required {
  background: linear-gradient(145deg, #161616, #0d0d0d) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow) !important;
  padding: 28px !important;
  margin-top: 18px !important;
  text-align: center !important;
}

.cr-order-login-required p {
  margin: 0 0 18px !important;
}

.cr-order-login-required .button {
  display: inline-block !important;
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-gold-glow) !important;
  font-weight: 700 !important;
  padding: 13px 32px !important;
  border: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: transform 220ms var(--clay-ease), box-shadow 220ms var(--clay-ease) !important;
}

.cr-order-login-required .button:hover {
  background: linear-gradient(145deg, #e8c159, #c29a34) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    10px 10px 28px rgba(0, 0, 0, 0.75),
    -4px -4px 18px rgba(212, 168, 67, 0.22),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.4) !important;
}

.cr-order-login-required .button:active {
  transform: translateY(1px) !important;
  box-shadow: var(--clay-inset) !important;
}

/* ============== FORM-SUBMIT / ACCENT BUTTONS — gold clay pill ============== */
/* style.css's legacy button rules use selectors like `button[type="submit"]`
   (specificity 0,1,1) and `.woocommerce-Button.button` (0,2,0) with !important,
   pinning border-radius:0 + flat solid gold. These selectors match or exceed
   that specificity so the clay treatment wins (tie + later cascade = clay). */
.btn.btn-accent,
button.searchsubmit,
.searchform .searchsubmit,
.woocommerce-Button.button,
.woocommerce-button.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button.woocommerce-Button,
button[type="submit"].button,
button[type="submit"].btn,
.woocommerce-form-login__submit,
.woocommerce-form-login .button,
.woocommerce-form-register__submit,
.woocommerce-form-register .button,
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-ResetPassword button[type="submit"],
.woocommerce-address-fields button[type="submit"],
.woocommerce a.button.wc-backward,
.woocommerce a.button.wc-forward,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.create-account-button,
a.create-account-button,
.checkout_coupon button[type="submit"],
.woocommerce-cart-form button[type="submit"],
.cart_totals .checkout-button,
form.checkout #place_order,
button#place_order,
.elementor-button-link,
input[type="submit"].wpcf7-submit,
button[type="submit"].wpcf7-submit,
.mc4wp-form button[type="submit"],
.mc4wp-form input[type="submit"],
.wd-popup button[type="submit"],
.wd-popup .button {
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-gold-glow) !important;
  padding: 14px 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: transform 220ms var(--clay-ease),
              box-shadow 220ms var(--clay-ease),
              background 220ms var(--clay-ease) !important;
}

.btn.btn-accent:hover,
button.searchsubmit:hover,
.searchform .searchsubmit:hover,
.woocommerce-Button.button:hover,
.woocommerce-button.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
button.woocommerce-Button:hover,
button[type="submit"].button:hover,
button[type="submit"].btn:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce a.button.wc-forward:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.create-account-button:hover,
a.create-account-button:hover,
form.checkout #place_order:hover,
button#place_order:hover,
.wpcf7-submit:hover,
.mc4wp-form button[type="submit"]:hover,
.wd-popup .button:hover {
  background: linear-gradient(145deg, #e8c159, #c29a34) !important;
  color: #0a0a0a !important;
  transform: translateY(-1px) !important;
  box-shadow:
    10px 10px 28px rgba(0, 0, 0, 0.75),
    -4px -4px 18px rgba(212, 168, 67, 0.22),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.4) !important;
}

.btn.btn-accent:active,
.searchsubmit:active,
.woocommerce-form-login__submit:active,
.woocommerce-form-register__submit:active,
form.checkout #place_order:active,
button#place_order:active {
  transform: translateY(1px) !important;
  box-shadow: var(--clay-inset) !important;
}

/* Popup containers — solid mid-grey so content reads cleanly against the
   black page bg, no transparency, no clay rounding (corners on a full-height
   side drawer or top overlay look broken). Interior padding gives content
   breathing room since the inner widgets/forms have their clay-card padding
   stripped (see reset below). Buttons *inside* popups still pick up the
   clay treatment from the rules above. */
.wd-side-hidden,
.cart-widget-side,
.login-form-side,
.mobile-nav,
.wd-search-form,
.wd-search-form-full,
.wd-popup,
.wd-popup .wd-popup-inner,
.mfp-content > div:not(.mfp-close),
.mfp-content .product,
.mfp-content .wd-quickview-inner {
  background: #1c1c1c !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
}

/* Side drawers (cart, login, mobile menu) need internal breathing room
   because their inner widgets/forms have clay-card padding stripped.
   Search form is a thin top-of-page overlay with its own layout — don't
   inflate it with extra padding. */
.wd-side-hidden,
.cart-widget-side,
.login-form-side,
.mobile-nav,
.wd-popup,
.wd-popup .wd-popup-inner,
.mfp-content > div:not(.mfp-close),
.mfp-content .product,
.mfp-content .wd-quickview-inner {
  padding: 24px !important;
}

/* Search form overlay drops down from the top — shadow goes below, not left */
.wd-search-form,
.wd-search-form-full {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* Search overlay input — strip the giant clay-input treatment that's meant
   for tall form fields. Woodmart sets `height: 70px` on `.mobile-nav .searchform
   input[type="text"]` (which is reused for the desktop search overlay too)
   plus the clay-input rule adds 14px 18px padding. Both inflate the bar.
   This override compresses it back to a clean compact search field. */
.wd-search-form input[type="search"],
.wd-search-form input[type="text"],
.wd-search-form input.s,
.wd-search-form .searchform input,
.wd-search-full-screen input[type="search"],
.wd-search-full-screen input[type="text"],
.wd-search-full-screen input.s,
.wd-search-full-screen .searchform input,
.mobile-nav .searchform input[type="text"],
.mobile-nav .searchform input[type="search"],
.mobile-nav .searchform input.s {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--cr-text) !important;
}

.wd-search-form input[type="search"]:focus,
.wd-search-form input[type="text"]:focus,
.wd-search-form input.s:focus,
.wd-search-form .searchform input:focus,
.wd-search-full-screen input[type="search"]:focus,
.wd-search-full-screen input[type="text"]:focus,
.wd-search-full-screen input.s:focus,
.wd-search-full-screen .searchform input:focus,
.mobile-nav .searchform input[type="text"]:focus,
.mobile-nav .searchform input.s:focus {
  outline: none !important;
  border-bottom-color: var(--cr-gold) !important;
  box-shadow: none !important;
}

/* Full-screen search overlay should cover the ENTIRE viewport (header included),
   not stop below the header. Woodmart's default pins it at top: 146px which
   leaves the page header visible above the dark overlay. Override to a true
   full-viewport overlay with breathing room at the top so the form doesn't
   crash into the close icon. */
.wd-search-full-screen {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: none !important;
  padding-top: 8px !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
}

/* Full-screen overlay uses a larger input/placeholder for presence — the
   shared rule above sets 18px which is too small for a page-wide search.
   Scope to .wd-search-full-screen only so mobile drawer search stays compact. */
.wd-search-full-screen input[type="search"],
.wd-search-full-screen input[type="text"],
.wd-search-full-screen input.s,
.wd-search-full-screen .searchform input {
  font-size: 28px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 12px 64px !important; /* symmetric padding so centered text stays optically centered; right side clears the absolute-positioned X */
  text-align: center !important;
}

.wd-search-full-screen input::placeholder {
  font-size: 28px !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Full-screen search overlay layout — let the gold underline span end-to-end
   and shrink the oversized close button to a clean 40px corner icon. */
.wd-search-full-screen .searchform {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Woodmart's parent rule sets --wd-action-icon-size: 38px on .wd-style-icon and
   width/height: 100px on the inner <a> — that's why the X glyph (an icon font
   character, not a CSS shape) renders huge. Override the variable AND match the
   .wd-style-icon chain for higher specificity than (0,2,0). */
.wd-search-full-screen .wd-close-search.wd-style-icon,
.wd-search-full-screen .wd-cross-icon.wd-style-icon,
.wd-search-full-screen .wd-close-search,
.wd-search-full-screen .wd-cross-icon {
  --wd-action-icon-size: 18px !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
}

/* The inner <a> in .wd-close-search picks up both the FULL-SEND clay-button rule
   (padding, gradient bg, shadow, 18px radius) AND Woodmart's .wd-style-icon > a
   { width: 100px; height: 100px } rule. Strip both here. */
.wd-search-full-screen .wd-close-search.wd-style-icon > a,
.wd-search-full-screen .wd-close-search > a,
.wd-search-full-screen .wd-close-search a {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The X glyph itself — kill the inherited end-margin so it centers in the 40x40
   anchor and doesn't bleed outside the wrapper. */
.wd-search-full-screen .wd-close-search .wd-action-icon {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.wd-search-full-screen .wd-close-search .wd-action-icon::before {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* ============== PHOTOSWIPE LIGHTBOX — scope out clay button styles ==============
   The product-image lightbox uses WC's PhotoSwipe v3 (.pswp). Its toolbar buttons
   (close, share, fullscreen, zoom, arrows) get their icons from a CSS sprite
   (default-skin.svg, set via background-image). The FULL-SEND clay button rule
   sets `background: linear-gradient(...) !important` which clobbers the sprite,
   so icons disappear and buttons render as solid black ovals — making the close
   X unfindable. Reset clay's chrome but restore the PhotoSwipe sprite. */
button.pswp__button,
.pswp button,
.pswp .pswp__button,
.pswp__button,
.pswp__button--close,
.pswp__button--share,
.pswp__button--fs,
.pswp__button--zoom {
  background-color: transparent !important;
  background-image: url('/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.svg') !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  font-weight: normal !important;
  text-shadow: none !important;
  transform: none !important;
  width: 44px !important;
  height: 44px !important;
}

/* Per-button sprite positions (match WC's photoswipe.min.css default-skin map) */
.pswp__button--close { background-position: 0 -44px !important; }
.pswp__button--share { background-position: -44px -44px !important; }
.pswp__button--fs    { background-position: -44px 0 !important; }
.pswp__button--zoom  { background-position: -88px 0 !important; }
.pswp__button--close:hover { background-position: 0 -44px !important; }
.pswp__button--zoom:hover  { background-position: -88px 0 !important; }

/* Arrow buttons use ::before for the sprite, not the button itself */
.pswp__button--arrow--left,
.pswp__button--arrow--right,
.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.pswp button:hover,
.pswp .pswp__button:hover,
.pswp__button:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Mobile drawer slides from the left — shadow goes right */
.mobile-nav.wd-left,
.wd-side-hidden.wd-left {
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.6) !important;
}

/* Reset clay card treatment for containers nested inside popups/drawers.
   The generic `.widget`, `.woocommerce-info`, `.cart_totals` etc. rules at
   the top of this file would otherwise turn the mini-cart widget, search
   widget, etc. into a rounded clay card *inside* the drawer — producing
   weird double-rounded "card-in-card" artifacts. Buttons inside popups are
   styled separately and unaffected by this reset. */
.wd-side-hidden .widget:not(.footer-widget):not(.wd-footer .widget),
.wd-side-hidden .woocommerce-info,
.wd-side-hidden .woocommerce-message,
.wd-side-hidden .woocommerce-error,
.wd-side-hidden .cart_totals,
.wd-side-hidden .woocommerce-cart-form__contents,
.wd-side-hidden .wd-shop-tools,
.wd-side-hidden .woocommerce-form-login,
.wd-side-hidden .woocommerce-form-register,
.wd-side-hidden .woocommerce-form-coupon,
.wd-side-hidden .woocommerce-shipping-calculator,
.wd-side-hidden .woocommerce-address-fields,
.wd-side-hidden form.login,
.wd-side-hidden form.register,
.wd-popup .widget:not(.footer-widget):not(.wd-footer .widget),
.wd-popup .woocommerce-info,
.wd-popup .woocommerce-message,
.wd-popup .woocommerce-error,
.wd-popup .cart_totals,
.wd-popup .woocommerce-cart-form__contents,
.wd-popup .woocommerce-form-login,
.wd-popup .woocommerce-form-register,
.wd-search-form .widget:not(.footer-widget):not(.wd-footer .widget),
.cart-widget-side .widget:not(.footer-widget):not(.wd-footer .widget),
.cart-widget-side .woocommerce-mini-cart,
.login-form-side .widget:not(.footer-widget):not(.wd-footer .widget),
.login-form-side .woocommerce-form-login,
.login-form-side .woocommerce-form-register,
.login-form-side form.login,
.login-form-side form.register,
.mobile-nav .widget:not(.footer-widget):not(.wd-footer .widget),
.mfp-content .widget:not(.footer-widget):not(.wd-footer .widget),
.mfp-content .woocommerce-info,
.mfp-content .woocommerce-message,
.mfp-content .cart_totals,
.mfp-content .woocommerce-form-login,
.mfp-content .woocommerce-form-register {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Breathing room between drawer header divider and the first form/content. */
.wd-side-hidden .woocommerce-form-login,
.wd-side-hidden .woocommerce-form-register,
.wd-side-hidden form.login,
.wd-side-hidden form.register,
.wd-side-hidden .woocommerce-mini-cart,
.wd-side-hidden .create-account-question,
.wd-popup .woocommerce-form-login,
.wd-popup .woocommerce-form-register {
  margin-top: 20px !important;
}

/* Homepage stat tile row (post 16163): hide the 2nd vertical divider on mobile.
   Container is the inline-styled flex row with gap:48px + margin-top:72px.
   Children are stat / divider / stat / divider / stat — on mobile flex-wrap
   pushes COA to a new row so the 4th child (2nd divider) dangles after $250+. */
@media (max-width: 768px) {
  div[style*="gap:48px"][style*="margin-top:72px"] > div:nth-child(4) {
    display: none !important;
  }
}

/* Mobile drawer search — Woodmart's inline AJAX results layout doesn't fit
   a 300px drawer (switches to a flex side-by-side column on .wd-searched
   and collapses the input). Hide the inline form; a `.cr-mobile-search-trigger`
   button is injected at the top of the drawer (functions.php) that fires
   the full-screen overlay shared with desktop. */
.mobile-nav .wd-search-form {
  display: none !important;
}
.cr-mobile-search-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 14px 18px !important;
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  background: linear-gradient(145deg, #e0b94f, #b8922f) !important;
  border: none !important;
  border-radius: var(--clay-radius, 14px) !important;
  box-shadow: var(--clay-gold-glow), var(--clay-shadow-sm) !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, transform 0.05s ease !important;
}
.cr-mobile-search-trigger:hover {
  filter: brightness(1.06) !important;
}
.cr-mobile-search-trigger:active {
  transform: translateY(1px) !important;
}
.cr-mobile-search-trigger svg {
  flex-shrink: 0 !important;
}

/* Woodmart's parent CSS sets `.wd-search-full-screen .wd-close-search
   { display: none }` inside `@media (max-width: 1024px)` because they
   assume mobile uses the drawer's inline search. Since we now route
   mobile to the full-screen overlay, the close-X must be visible. */
@media (max-width: 1024px) {
  /* Selector matches the earlier .wd-close-search.wd-style-icon rule (0,3,0)
     so this override actually wins. The plain .wd-close-search at 0,2,0
     loses to the existing .wd-style-icon rule. */
  .wd-search-full-screen .wd-close-search.wd-style-icon,
  .wd-search-full-screen .wd-close-search {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 20px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 2 !important;
  }
  .wd-search-full-screen .wd-close-search.wd-style-icon > a,
  .wd-search-full-screen .wd-close-search > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* On narrow screens the desktop overlay's 28px input font causes the
   "Search for products" placeholder to clip on the right. Reduce it. */
@media (max-width: 600px) {
  .wd-search-full-screen input.s,
  .wd-search-full-screen input[type="text"],
  .wd-search-full-screen .searchform .s {
    font-size: 18px !important;
    padding-left: 20px !important;
    padding-right: 60px !important;
  }
}