/* Smokers Paradise London - responsive & accessibility UX layer
   Added 2026-08-14. Remove by disabling wp-content/novamira-sandbox/spl-ux.php */

/* ---------------------------------------------------------------
   1. Minimum 44px tap targets (WCAG 2.5.5 / Apple + Google guidance)
   --------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.wc-block-components-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Header utility links (Cart / Login) were 23px tall */
.elementor-location-header .elementor-icon-list-item > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Astra on-image quick buttons were 28x27 */
.ast-on-card-button,
.astra-shop-thumbnail-wrap .ast-on-card-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Pagination and sorting controls */
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.woocommerce-ordering select,
.woocommerce .quantity input.qty {
  min-height: 44px;
}

/* ---------------------------------------------------------------
   2. Legible text floor - 41 nodes were rendering below 12px
   --------------------------------------------------------------- */
.woocommerce .price,
.woocommerce-loop-product__title,
.elementor-location-header .elementor-icon-list-text,
.woocommerce-result-count,
.product_meta,
.woocommerce-breadcrumb {
  font-size: max(0.8125rem, 1em);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  line-height: 1.35;
}

/* ---------------------------------------------------------------
   3. Product grid - was 1 column on mobile, cramped 171px at tablet
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce ul.products.elementor-grid,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 12px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem !important;
  }
  .woocommerce ul.products li.product .button {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.85rem;
  }
}

/* Very narrow phones keep a single column so cards stay usable */
@media (max-width: 359px) {
  .woocommerce ul.products.elementor-grid,
  .woocommerce ul.products {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------------------------------------------------------------
   4. Tablet - stop the shop sidebar squeezing products into 171px.
      Scoped to sections that actually contain the product grid.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-section:has(.elementor-widget-woocommerce-products)
    > .elementor-container
    > .elementor-top-column {
    width: 100% !important;
  }
  .woocommerce ul.products.elementor-grid,
  .woocommerce ul.products {
    gap: 32px 20px;
  }
}

/* ---------------------------------------------------------------
   5. Collapsible filter panel below desktop (toggle added by spl-ux.js)
   --------------------------------------------------------------- */
.spl-filter-toggle {
  display: none;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 12px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #f4f2ee;
  color: #222;
  border: 1px solid #d8d3c9;
  border-radius: 2px;
  cursor: pointer;
}
.spl-filter-toggle::after {
  content: "+";
  font-size: 1.25em;
  line-height: 1;
}
.spl-filter-toggle[aria-expanded="true"]::after { content: "\2212"; }
.spl-filter-toggle:focus-visible { outline: 2px solid #2e5241; outline-offset: 2px; }

@media (max-width: 1024px) {
  .spl-filter-toggle { display: flex; }
  .spl-filters-collapsed { display: none !important; }
}

/* ---------------------------------------------------------------
   6. Sticky add-to-cart on mobile product pages
   --------------------------------------------------------------- */
.spl-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #ddd8ce;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
}
.spl-sticky-atc__info { flex: 1 1 auto; min-width: 0; }
.spl-sticky-atc__name {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #444;
}
.spl-sticky-atc__price { display: block; font-weight: 700; font-size: 0.95rem; }
.spl-sticky-atc__btn {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 0;
  border-radius: 2px;
  background: #222;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 767px) {
  body.single-product .spl-sticky-atc { display: flex; }
  body.single-product { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------
   7. Checkout and cart on small screens
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last {
    width: 100%;
    float: none;
    margin-right: 0;
  }
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea {
    min-height: 44px;
    font-size: 16px; /* stops iOS zooming the viewport on focus */
  }
  .woocommerce table.shop_table_responsive tr td { text-align: right; }
  .woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
}

/* ---------------------------------------------------------------
   8. Focus visibility for keyboard users
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2e5241;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .spl-sticky-atc { transition: none !important; }
}

/* ===================================================================
   9. Sticky header (desktop / tablet / mobile)

   body has overflow-x:hidden, which makes position:sticky unreliable,
   so the header is switched to position:fixed once you scroll past it
   and a spacer holds its place. spl-ux.js adds .spl-stuck to <html>.
   =================================================================== */
.spl-header-spacer { display: none; }
html.spl-stuck .spl-header-spacer { display: block; }

html.spl-stuck .elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9995;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
}
html.spl-stuck.spl-adminbar .elementor-location-header { top: 32px; }

/* Contact strip folds away once stuck, on desktop and tablet. */
@media (min-width: 768px) {
  html.spl-stuck .elementor-location-header .elementor-element-bedf77d { display: none; }
}

/* Compress the logo row and nav row so the stuck bar stays shallow. */
html.spl-stuck .elementor-location-header .elementor-element-f53bf2d,
html.spl-stuck .elementor-location-header .elementor-element-f53bf2d > .elementor-container,
html.spl-stuck .elementor-location-header .elementor-element-3fb4d75,
html.spl-stuck .elementor-location-header .elementor-element-3fb4d75 > .elementor-container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
}
html.spl-stuck .elementor-location-header .elementor-element-f53bf2d .elementor-widget-image img {
  max-height: 46px;
  width: auto;
  transition: max-height 0.18s ease;
}

/* Mobile: keep a tap-to-call button in the stuck bar, drop email + address. */
@media (max-width: 767px) {
  html.spl-stuck .elementor-location-header .elementor-element-a5223bb,
  html.spl-stuck .elementor-location-header .elementor-element-dfc4826 {
    display: none;
  }
  html.spl-stuck .elementor-location-header .elementor-element-bedf77d,
  html.spl-stuck .elementor-location-header .elementor-element-bedf77d > .elementor-container {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  html.spl-stuck .elementor-location-header .elementor-element-f53bf2d .elementor-widget-image img {
    max-height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.spl-stuck .elementor-location-header .elementor-widget-image img { transition: none; }
}

/* ===================================================================
   10. Tap-to-call button
   =================================================================== */
.elementor-element-0e5d24b a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

@media (max-width: 767px) {
  .elementor-element-0e5d24b a[href^="tel:"] {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
  }
  .elementor-element-0e5d24b a[href^="tel:"]::before {
    content: "\260E";
    font-size: 1.05em;
    line-height: 1;
  }
}

/* ===================================================================
   11. Out-of-stock products in listings
   =================================================================== */
.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__link {
  position: relative;
  display: block;
}
.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap::after {
  content: "Out of stock";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  padding: 5px 10px;
  background: rgba(28, 35, 32, 0.86);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woocommerce ul.products li.product.outofstock img {
  opacity: 0.62;
  filter: saturate(0.55);
}
.woocommerce ul.products li.product.outofstock:hover img { opacity: 0.78; }

/* ===================================================================
   12. Back-in-stock notify form
   =================================================================== */
.spl-notify {
  margin: 18px 0 0;
  padding: 16px 18px 18px;
  background: #f4f2ee;
  border: 1px solid #ddd8ce;
  border-left: 3px solid #2e5241;
  border-radius: 2px;
}
.spl-notify__lead {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
}
.spl-notify__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}
.spl-notify__email {
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #c9c3b7;
  border-radius: 2px;
  background: #fff;
}
.spl-notify__btn {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 2px;
  background: #2e5241;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.spl-notify__btn:hover { background: #24412f; }
.spl-notify__btn[disabled] { opacity: 0.6; cursor: default; }
.spl-notify__consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #555;
}
.spl-notify__consent input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.spl-notify__msg {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}
.spl-notify__msg.is-error { color: #9c2f26; }
.spl-notify__msg.is-ok { color: #2e5241; font-weight: 600; }

@media (max-width: 480px) {
  .spl-notify__form { grid-template-columns: 1fr; }
  .spl-notify__btn { width: 100%; }
}

/* Sentinel that tells the observer when the header has scrolled past. */
.spl-header-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ===================================================================
   13. Compact sticky header on small screens

   Elementor stacks each header section's columns to full width below
   its mobile breakpoint, which turned the stuck header into three
   tall rows (306px on a 375px phone). When stuck, lay the columns
   back out in a single row and drop what is not needed while
   scrolling: the email address, the postal address and the search box.
   Logo, basket, menu and the call button all stay reachable.
   =================================================================== */
@media (max-width: 767px) {
  html.spl-stuck .elementor-location-header .elementor-top-section > .elementor-container {
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
  }
  html.spl-stuck .elementor-location-header .elementor-top-section > .elementor-container > .elementor-column {
    width: auto !important;
    flex: 0 1 auto !important;
  }
  html.spl-stuck .elementor-location-header .elementor-widget-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Contact strip keeps only the call button. */
  html.spl-stuck .elementor-location-header .elementor-element-bedf77d
    > .elementor-container
    > .elementor-column:not(:has(a[href^="tel:"])) {
    display: none !important;
  }
  html.spl-stuck .elementor-location-header .elementor-element-bedf77d
    > .elementor-container
    > .elementor-column:has(a[href^="tel:"]) {
    flex: 1 1 auto !important;
  }

  /* Search is reachable from the page itself while scrolling. */
  html.spl-stuck .elementor-location-header .elementor-element-2e8373f { display: none !important; }

  /* Logo row: logo left, basket and account right. */
  html.spl-stuck .elementor-location-header .elementor-element-f53bf2d
    > .elementor-container
    > .elementor-column:first-child {
    display: none !important;
  }
  html.spl-stuck .elementor-location-header .elementor-element-f53bf2d .elementor-widget-image { text-align: left; }
  html.spl-stuck .elementor-location-header .elementor-element-d8b4173 .elementor-icon-list-items {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin: 0;
  }

  /* Menu toggle sits at the end of the nav row. */
  html.spl-stuck .elementor-location-header .elementor-element-3fb4d75
    > .elementor-container
    > .elementor-column:empty {
    display: none !important;
  }
}

/* Desktop and tablet: trim the nav and logo rows while stuck. The height
   there comes from the menu items' own padding, not section padding. */
@media (min-width: 768px) {
  html.spl-stuck .elementor-location-header .elementor-element-f53bf2d .elementor-widget-wrap,
  html.spl-stuck .elementor-location-header .elementor-element-3fb4d75 .elementor-widget-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html.spl-stuck .elementor-location-header .elementor-element-3fb4d75 .elementor-nav-menu .elementor-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  html.spl-stuck .elementor-location-header .elementor-element-3fb4d75 .elementor-widget-aws input[type="search"],
  html.spl-stuck .elementor-location-header .elementor-element-3fb4d75 .aws-container input {
    min-height: 40px;
  }
}

/* Hamburger deserves the same 44px target as everything else.
   Deliberately does NOT set display: Elementor hides this toggle above the
   mobile breakpoint, and forcing a display value made it appear on desktop. */
.elementor-menu-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* The stuck header lays header columns out in a single row on mobile; make
   sure that can never clip or stack under the mobile menu dropdown. */
html.spl-stuck .elementor-location-header .elementor-top-section > .elementor-container,
html.spl-stuck .elementor-location-header .elementor-widget-wrap,
html.spl-stuck .elementor-location-header .elementor-widget-nav-menu {
  overflow: visible !important;
}
html.spl-stuck .elementor-location-header .elementor-nav-menu--dropdown {
  z-index: 9996;
}

/* ===================================================================
   14. Product cards - 3D lift and layered shadow

   Applies wherever WooCommerce renders a product grid: shop, category,
   tag, search, related products, upsells and the Elementor Products
   widget all share ul.products > li.product.

   Hover effects are gated behind (hover: hover) so touch devices get a
   press state instead of a stuck hover, and everything collapses under
   prefers-reduced-motion.
   =================================================================== */
.woocommerce ul.products {
  perspective: 1400px;
}

/* The theme already paints a resting glow on cards, so this deliberately
   does not set a resting box-shadow - it only owns the hover state. */
.woocommerce ul.products li.product {
  position: relative;
  border-radius: 4px;
  background-clip: padding-box;
  transition:
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translate3d(0, 0, 0);
}

/* Keep the image inside the rounded corner so the lift reads cleanly. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  overflow: hidden;
  border-radius: 3px;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Tidy the grid: mixed source image sizes made rows ragged. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce ul.products li.product > a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  height: auto;
}

/* .spl-force-hover mirrors :hover so the effect can be verified without a
   real pointer; nothing in the site ever adds that class at runtime. */
@media (hover: hover) and (pointer: fine) {
  body .woocommerce ul.products li.product:hover,
  body .woocommerce ul.products li.product:focus-within,
  body .woocommerce ul.products li.product.spl-force-hover {
    z-index: 3;
    transform: translate3d(0, -9px, 30px) rotateX(2deg) !important;
    box-shadow:
      0 2px 4px rgba(28, 35, 32, 0.06),
      0 9px 18px rgba(28, 35, 32, 0.10),
      0 26px 46px -14px rgba(28, 35, 32, 0.30) !important;
  }

  body .woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img,
  body .woocommerce ul.products li.product.spl-force-hover .astra-shop-thumbnail-wrap img {
    transform: scale(1.05);
  }

  /* Out-of-stock cards lift too, but stay visually muted. */
  body .woocommerce ul.products li.product.outofstock:hover .astra-shop-thumbnail-wrap img {
    transform: scale(1.03);
  }
}

/* Touch: a short press response instead of a hover that sticks. */
@media (hover: none) {
  .woocommerce ul.products li.product:active {
    transform: scale(0.985);
    transition: transform 0.12s ease;
  }
}

/* Keyboard users get the same affordance as mouse users. */
.woocommerce ul.products li.product:focus-within {
  outline: 2px solid #2e5241;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
    transition: none !important;
  }
  .woocommerce ul.products li.product:hover,
  .woocommerce ul.products li.product:focus-within {
    transform: none !important;
    box-shadow: 0 6px 20px rgba(28, 35, 32, 0.22);
  }
  .woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img {
    transform: none !important;
  }
}

/* ===================================================================
   15. Add-to-basket confirmation toast
   =================================================================== */
.spl-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9994;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 13px 16px;
  background: #1c2320;
  color: #fff;
  border-radius: 3px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.spl-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.spl-toast__text { flex: 1 1 auto; min-width: 0; }
.spl-toast__link {
  flex: 0 0 auto;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.spl-toast__link:hover, .spl-toast__link:focus { color: #fff; }

/* Keep clear of the sticky add-to-cart bar on mobile product pages. */
@media (max-width: 767px) {
  .spl-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  body.single-product .spl-toast { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .spl-toast { transition: none; }
}

/* ===================================================================
   16. Footer

   The footer now carries the full product menu from the header, laid
   out flat in four columns so nothing is hidden behind a dropdown.
   Elementor stacks the columns below its tablet breakpoint.
   =================================================================== */
.elementor-location-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.elementor-location-footer .elementor-widget-heading:not(:first-child) {
  margin-top: 1.6rem;
}

ul.spl-foot-list {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
ul.spl-foot-list li { margin: 0; }
ul.spl-foot-list a {
  display: block;
  padding: 7px 0;
  min-height: 30px;
  font-size: 0.9rem;
  line-height: 1.3;
  text-decoration: none;
  opacity: 0.86;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
ul.spl-foot-list a:hover,
ul.spl-foot-list a:focus-visible {
  opacity: 1;
  transform: translateX(3px);
  text-decoration: underline;
}

.spl-foot-intro {
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0 0 1rem;
  max-width: 34ch;
}
.spl-foot-contact {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 0.9rem;
}
.spl-foot-contact a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}
.spl-foot-contact a:hover { border-bottom-color: currentColor; }

.spl-foot-age {
  font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 34ch;
}

.spl-foot-legal {
  font-size: 0.8rem;
  margin: 0;
  opacity: 0.75;
}
.spl-foot-legal a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}
.spl-foot-legal a:hover, .spl-foot-legal a:focus-visible { border-bottom-color: currentColor; }
.spl-foot-legal--right { text-align: right; }

/* Tablet and below: columns stack, so give links room to be tapped. */
@media (max-width: 1024px) {
  ul.spl-foot-list a { padding: 10px 0; min-height: 40px; }
}
@media (max-width: 767px) {
  ul.spl-foot-list a,
  .spl-foot-contact a,
  .spl-foot-legal a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  ul.spl-foot-list a:hover { transform: none; }
  .spl-foot-legal--right { text-align: left; }
  .spl-foot-intro, .spl-foot-age { max-width: none; }
  .elementor-location-footer .elementor-widget-heading:not(:first-child) { margin-top: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  ul.spl-foot-list a { transition: none; }
  ul.spl-foot-list a:hover { transform: none; }
}

/* Footer column behaviour. Elementor keeps the four columns side by side
   at tablet, which left them 188px wide and pushed long labels such as
   "MG Cigars Smokers Paradise" past the viewport edge. */
.elementor-location-footer ul.spl-foot-list a,
.elementor-location-footer .spl-foot-contact,
.elementor-location-footer .spl-foot-legal {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 1024px) {
  .elementor-location-footer .elementor-element-splfoot1
    > .elementor-container
    > .elementor-top-column {
    width: 50% !important;
  }
}

@media (max-width: 767px) {
  .elementor-location-footer .elementor-element-splfoot1
    > .elementor-container
    > .elementor-top-column,
  .elementor-location-footer .elementor-element-splfoot2
    > .elementor-container
    > .elementor-top-column {
    width: 100% !important;
  }
}

/* Belt and braces: the footer must never be the source of a sideways scroll. */
.elementor-location-footer,
.elementor-location-footer .elementor-container {
  max-width: 100%;
}

/* ===================================================================
   17. Auto-syncing footer menu

   [spl_footer_menu] renders the live header menu flat, so the footer
   tracks any menu edit. It lays out its own columns rather than relying
   on Elementor columns, which keeps the two in step at every width.
   =================================================================== */
.spl-foot-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 26px;
  align-items: start;
}

.spl-foot-menu__col { min-width: 0; }

.spl-foot-menu__head {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
  color: inherit;
}

@media (max-width: 1024px) {
  .spl-foot-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; }
}

@media (max-width: 600px) {
  .spl-foot-menu { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spl-foot-menu__col + .spl-foot-menu__col { margin-top: 1.6rem; }
}

/* Elementor's own columns: menu block over contact block below desktop. */
@media (max-width: 1024px) {
  .elementor-location-footer .elementor-element-splfootnav,
  .elementor-location-footer .elementor-element-splfootvisit {
    width: 100% !important;
  }
  .elementor-location-footer .elementor-element-splfootvisit { margin-top: 1.8rem; }
}

/* ===================================================================
   18. Footer restructured into three stacked, full-width sections

   Menu / contact / legal are now separate Elementor sections rather
   than columns of one section. Sections stack natively at every width,
   so the layout no longer depends on Elementor's responsive column
   widths - which is what left the menu squeezed into 157px at tablet.
   Each block manages its own internal grid instead.
   =================================================================== */

/* Menu grid now has the full container width to work with. */
.spl-foot-menu {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 30px;
}
@media (max-width: 1024px) {
  .spl-foot-menu { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 24px; }
}
@media (max-width: 600px) {
  .spl-foot-menu { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spl-foot-menu__col + .spl-foot-menu__col { margin-top: 1.6rem; }
}

/* Contact strip: horizontal on desktop, stacked on small screens. */
.spl-foot-contactbar {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 20px 30px;
  align-items: start;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.spl-foot-contactbar__cell { min-width: 0; }
.spl-foot-contactbar .spl-foot-menu__head { margin-bottom: 0.5rem; }
.spl-foot-contactbar .spl-foot-intro { margin: 0; max-width: 46ch; }
.spl-foot-contactbar .spl-foot-contact { margin: 0; }

@media (max-width: 880px) {
  .spl-foot-contactbar { grid-template-columns: 1fr 1fr; }
  .spl-foot-contactbar__cell:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .spl-foot-contactbar { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .spl-foot-contactbar__cell:first-child { grid-column: auto; }
  .spl-foot-contactbar .spl-foot-intro { max-width: none; }
}

.spl-foot-age {
  margin-top: 1.3rem;
  max-width: none;
}

/* Legal bar: copyright left, links right, stacked on mobile. */
.spl-foot-legalbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.spl-foot-legalbar .spl-foot-legal { margin: 0; }
@media (max-width: 600px) {
  .spl-foot-legalbar { justify-content: flex-start; }
  .spl-foot-legal--right { text-align: left; }
}

/* ===================================================================
   19. Product grids - reclaim the side space, widen the gaps

   Elementor caps every boxed container at 1140px, so on a 1440px screen
   roughly 285px sat unused either side while the product columns were
   only 20px apart. These rules widen any container that actually holds
   a product grid and open the gaps up, on the homepage "We Are On Sale"
   block, the shop, and every category and tag archive.

   Scoped with :has() so it only ever affects product sections - the rest
   of the site keeps Elementor's 1140px measure.
   =================================================================== */
.elementor-section.elementor-section-boxed:has(ul.products) > .elementor-container,
.elementor-section.elementor-section-boxed:has(.elementor-widget-woocommerce-products) > .elementor-container,
.elementor-section.elementor-section-boxed:has(.elementor-widget-wc-archive-products) > .elementor-container,
.elementor-section.elementor-section-boxed:has(.elementor-widget-woocommerce-product-related) > .elementor-container {
  max-width: min(1400px, 93vw) !important;
}

/* Desktop: generous breathing room between cards. */
.woocommerce ul.products,
.woocommerce ul.products.elementor-grid {
  column-gap: 40px !important;
  row-gap: 56px !important;
}

@media (max-width: 1024px) {
  .elementor-section.elementor-section-boxed:has(ul.products) > .elementor-container,
  .elementor-section.elementor-section-boxed:has(.elementor-widget-woocommerce-products) > .elementor-container,
  .elementor-section.elementor-section-boxed:has(.elementor-widget-wc-archive-products) > .elementor-container {
    max-width: 95vw !important;
  }
  .woocommerce ul.products,
  .woocommerce ul.products.elementor-grid {
    column-gap: 26px !important;
    row-gap: 42px !important;
  }
}

@media (max-width: 767px) {
  .elementor-section.elementor-section-boxed:has(ul.products) > .elementor-container,
  .elementor-section.elementor-section-boxed:has(.elementor-widget-woocommerce-products) > .elementor-container,
  .elementor-section.elementor-section-boxed:has(.elementor-widget-wc-archive-products) > .elementor-container {
    max-width: 100% !important;
  }
  /* Two cards per row on a phone need a tighter gutter, not a wider one. */
  .woocommerce ul.products,
  .woocommerce ul.products.elementor-grid {
    column-gap: 14px !important;
    row-gap: 30px !important;
  }
}

/* Widening the container left category archives at three 413px cards,
   which is larger than the 600px source images can carry and out of step
   with the homepage's four 300px cards. On wide screens the reclaimed
   width is better spent on a fourth column than on oversized cards.
   Scoped to real archives - the Shop All page keeps three because it
   gives up a third of its width to the filter rail. */
@media (min-width: 1200px) {
  body.tax-product_cat .woocommerce ul.products,
  body.tax-product_tag .woocommerce ul.products,
  body.post-type-archive-product .woocommerce ul.products,
  body.search-results .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===================================================================
   20. Resting card elevation

   The cards already sit on a #f2f2f2 surface, but the theme painted an
   even grey halo (0 0 10px rgba(117,117,117,.5)) around them - a glow
   with no direction, which reads flat and lets neighbouring cards blur
   into one another.

   Replaced with a directional three-layer shadow lit from above: a tight
   contact shadow, a mid layer, and a soft ambient one. Each card now
   reads as a separate object at rest, so the gap between them is legible
   without needing a hover.
   =================================================================== */
 body .woocommerce ul.products li.product {
  background-clip: padding-box;
  border: 1px solid rgba(28, 35, 32, 0.06);
  border-radius: 5px;
  box-shadow:
    0 1px 2px rgba(28, 35, 32, 0.07),
    0 4px 8px -2px rgba(28, 35, 32, 0.10),
    0 12px 22px -10px rgba(28, 35, 32, 0.20) !important;
}

/* Hover remains a clear step up from that resting elevation. */
@media (hover: hover) and (pointer: fine) {
  body .woocommerce ul.products li.product:hover,
  body .woocommerce ul.products li.product:focus-within,
  body .woocommerce ul.products li.product.spl-force-hover {
    border-color: rgba(28, 35, 32, 0.10);
    box-shadow:
      0 2px 4px rgba(28, 35, 32, 0.07),
      0 10px 20px -4px rgba(28, 35, 32, 0.13),
      0 30px 52px -16px rgba(28, 35, 32, 0.32) !important;
  }
}

/* Out-of-stock cards sit slightly lower, matching their muted image. */
body .woocommerce ul.products li.product.outofstock {
  box-shadow:
    0 1px 2px rgba(28, 35, 32, 0.05),
    0 3px 6px -2px rgba(28, 35, 32, 0.07),
    0 8px 16px -10px rgba(28, 35, 32, 0.14) !important;
}

/* Touch devices never get the hover step, so give them the full resting
   elevation and a brief press response instead. */
@media (hover: none) {
  body .woocommerce ul.products li.product:active {
    box-shadow:
      0 1px 2px rgba(28, 35, 32, 0.08),
      0 2px 4px rgba(28, 35, 32, 0.10) !important;
  }
}

/* ===================================================================
   21. Sticky search on mobile

   Section 13 hid the search box while the header was stuck on phones to
   keep the bar shallow. Search is worth more than the saved pixels on a
   560-product catalogue, so it now rides alongside the hamburger:

     [ menu toggle 44px ][ search - fills the rest ]

   This overrides the display:none set earlier in section 13.
   =================================================================== */
@media (max-width: 767px) {
  html.spl-stuck .elementor-location-header .elementor-element-2e8373f {
    display: block !important;
    width: 100%;
  }

  /* Drop the empty spacer column so the two real ones get the width. */
  html.spl-stuck .elementor-location-header .elementor-element-1623a00 {
    display: none !important;
  }

  /* Toggle keeps its 44px; search takes everything left over. */
  html.spl-stuck .elementor-location-header .elementor-element-faffe84 {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  html.spl-stuck .elementor-location-header .elementor-element-99de49a {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
  }

  html.spl-stuck .elementor-location-header .elementor-element-3fb4d75 > .elementor-container {
    gap: 10px;
    align-items: center;
  }
  html.spl-stuck .elementor-location-header .elementor-element-3fb4d75 .elementor-widget-wrap {
    padding: 0 !important;
  }

  /* Advanced Woo Search sizes itself to its container by default. */
  html.spl-stuck .elementor-location-header .aws-container,
  html.spl-stuck .elementor-location-header .aws-search-form {
    width: 100% !important;
    max-width: none !important;
  }
  html.spl-stuck .elementor-location-header .aws-container .aws-search-field {
    min-height: 42px;
    font-size: 16px; /* stops iOS zooming the viewport on focus */
  }

  /* The ajax results panel must escape the stuck bar, not be clipped by it. */
  html.spl-stuck .elementor-location-header .aws-search-result {
    z-index: 9997;
  }
}

/* ===================================================================
   22. Footer menu type matched to the header menu

   Header nav items compute to 15px; the footer links were 13.5px.
   Raised to match, with line-height loosened so the longer labels stay
   readable when they wrap into two lines.

   Column headings go up a little too - at 12.3px they were smaller than
   the links sitting underneath them, which inverted the hierarchy.
   =================================================================== */
.elementor-location-footer ul.spl-foot-list a {
  font-size: 15px;
  line-height: 1.4;
}

.elementor-location-footer .spl-foot-menu__head,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 13.5px;
}

/* Keep the supporting copy a step below the navigation. */
.elementor-location-footer .spl-foot-contact { font-size: 14px; }
.elementor-location-footer .spl-foot-intro { font-size: 14px; }

@media (max-width: 767px) {
  .elementor-location-footer ul.spl-foot-list a { font-size: 15px; }
}

/* ===================================================================
   23. Footer dividers - correction

   When the footer was built its rules were written against a dark
   background, using rgba(255,255,255,.14) hairlines. The footer
   actually sits on the white page background, so all four dividers
   have been invisible. Repainted in a dark neutral at low alpha.
   =================================================================== */
.elementor-location-footer { border-top-color: rgba(28, 35, 32, 0.13); }
.spl-foot-contactbar { border-top-color: rgba(28, 35, 32, 0.13); }
.spl-foot-legalbar { border-top-color: rgba(28, 35, 32, 0.13); }
.spl-foot-age { border-top-color: rgba(28, 35, 32, 0.13); }

/* The contact links were underlined with a white border for the same
   reason - give them a visible rule instead. */
.spl-foot-contact a { border-bottom-color: rgba(28, 35, 32, 0.28); }

/* ===================================================================
   24. Footer menu typeface and colour matched to the header

   Header nav computes to: Josefin Sans, 600, uppercase, 15px,
   rgb(122,122,122) default and rgb(198,175,21) gold on hover.

   The default colour is taken from Elementor's global text token so it
   tracks any palette change. The gold is hardcoded because it is a
   per-widget override on the header menu, not the global accent - the
   global accent is green (#61CE70) and would be wrong here.

   The font stack is byte-identical to the header's, so if Josefin Sans
   ever fails to load both fall back to the same face and still match.
   =================================================================== */
.elementor-location-footer ul.spl-foot-list a {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--e-global-color-text, #7a7a7a);
  opacity: 1;
}

.elementor-location-footer ul.spl-foot-list a:hover,
.elementor-location-footer ul.spl-foot-list a:focus-visible {
  color: #c6af15;
  opacity: 1;
  text-decoration: none;
}

/* Column headings share the family; weight and tracking keep them
   distinct from the items beneath. */
.elementor-location-footer .spl-foot-menu__head,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-family: "Josefin Sans", sans-serif;
  color: var(--e-global-color-text, #7a7a7a);
}

/* Contact and legal links pick up the same hover so the whole footer
   behaves as one system. */
.elementor-location-footer .spl-foot-contact a,
.elementor-location-footer .spl-foot-legal a {
  color: var(--e-global-color-text, #7a7a7a);
}
.elementor-location-footer .spl-foot-contact a:hover,
.elementor-location-footer .spl-foot-contact a:focus-visible,
.elementor-location-footer .spl-foot-legal a:hover,
.elementor-location-footer .spl-foot-legal a:focus-visible {
  color: #c6af15;
  border-bottom-color: #c6af15;
}

/* Uppercase is wider than sentence case; let the longest labels wrap
   cleanly rather than push the column. */
.elementor-location-footer ul.spl-foot-list a { hyphens: none; }

/* ===================================================================
   25. Gold palette

   The site accent was #c6af15 - a mustard/olive that reads dull rather
   than precious. Replaced with a warm metallic gold across every place
   Astra injects the accent: buttons, the Sale badge, prices, pagination,
   the mobile menu trigger, text selection and block buttons.

   Two golds, deliberately:
     --spl-gold      fills (buttons, badges) - bright, warm, metallic
     --spl-gold-ink  gold TEXT on light backgrounds - deeper, because
                     bright gold on white is about 2:1 contrast and
                     genuinely hard to read

   Button text goes to near-black. White on gold is roughly 2:1 and was
   already muddy at #c6af15; dark ink on gold is both the luxury
   convention and about 9:1, which actually passes.
   =================================================================== */
:root {
  --spl-gold: #d4af37;
  --spl-gold-light: #e3c560;
  --spl-gold-deep: #b8912b;
  --spl-gold-darker: #9a7822;
  --spl-gold-ink: #8a6d1f;
  --spl-on-gold: #1a1a1a;
  --spl-gold-sheen: linear-gradient(180deg, #e3c560 0%, #d4af37 48%, #bf9b2f 100%);
  --spl-gold-sheen-hover: linear-gradient(180deg, #d9b845 0%, #c9a42f 48%, #ac8a26 100%);
}

/* ---- Buttons ---------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-js a.button,
.woocommerce-js button.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.single_add_to_cart_button,
.wp-block-button .wp-block-button__link,
.ast-button,
.ast-custom-button,
body .button {
  background: var(--spl-gold-sheen) !important;
  background-color: var(--spl-gold) !important;
  border-color: var(--spl-gold-deep) !important;
  color: var(--spl-on-gold) !important;
  text-shadow: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-js a.button:hover,
.woocommerce-js button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce ul.products li.product .button:hover,
.single_add_to_cart_button:hover,
.wp-block-button .wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover,
body .button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.single_add_to_cart_button:focus-visible {
  background: var(--spl-gold-sheen-hover) !important;
  background-color: var(--spl-gold-deep) !important;
  border-color: var(--spl-gold-darker) !important;
  color: var(--spl-on-gold) !important;
}

/* Sticky add-to-cart and notify buttons join the same system. */
.spl-sticky-atc__btn {
  background: var(--spl-gold-sheen);
  color: var(--spl-on-gold);
}
.spl-sticky-atc__btn:hover { background: var(--spl-gold-sheen-hover); }

/* ---- Sale badge -------------------------------------------------- */
.woocommerce span.onsale,
.wc-block-grid__product .wc-block-grid__product-onsale {
  background: var(--spl-gold-sheen) !important;
  background-color: var(--spl-gold) !important;
  color: var(--spl-on-gold) !important;
}

/* ---- Prices and gold text on light backgrounds ------------------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .price .amount,
.woocommerce ul.products li.product .price .amount {
  color: var(--spl-gold-ink) !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: #8a8a8a !important;
}

/* ---- Pagination, selection, misc accents ------------------------- */
.ast-pagination .page-numbers.current,
.post-page-numbers.current .page-link,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--spl-gold-sheen) !important;
  background-color: var(--spl-gold) !important;
  border-color: var(--spl-gold-deep) !important;
  color: var(--spl-on-gold) !important;
}

::selection { background-color: var(--spl-gold); color: var(--spl-on-gold); }
::-moz-selection { background-color: var(--spl-gold); color: var(--spl-on-gold); }

/* Mobile menu trigger picked up the old accent too. */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu {
  color: var(--spl-gold-ink) !important;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
  fill: var(--spl-gold-ink) !important;
}

/* Outline-style block buttons. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-color: var(--spl-gold-deep) !important;
  color: var(--spl-gold-ink) !important;
}

/* ---- Navigation accents ------------------------------------------ */
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .elementor-item.highlighted,
.elementor-nav-menu--main .elementor-item:focus {
  color: var(--spl-gold-ink) !important;
}

/* Footer links adopt the same hover gold. */
.elementor-location-footer ul.spl-foot-list a:hover,
.elementor-location-footer ul.spl-foot-list a:focus-visible,
.elementor-location-footer .spl-foot-contact a:hover,
.elementor-location-footer .spl-foot-contact a:focus-visible,
.elementor-location-footer .spl-foot-legal a:hover,
.elementor-location-footer .spl-foot-legal a:focus-visible {
  color: var(--spl-gold-ink) !important;
  border-bottom-color: var(--spl-gold-ink);
}

/* Focus rings follow the palette. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.woocommerce ul.products li.product:focus-within {
  outline-color: var(--spl-gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce a.button, .woocommerce button.button { transition: none; }
}

/* Remaining accent surfaces that still carried the old mustard. */

/* Sale prices sit in <ins>, which the .price rules did not reach. */
.woocommerce .price ins,
.woocommerce .price ins .amount,
.woocommerce .price ins bdi,
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: var(--spl-gold-ink) !important;
  text-decoration: none;
}

/* Active item in the mobile dropdown had a mustard fill. */
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown .elementor-item.highlighted,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  background-color: var(--spl-gold) !important;
  color: var(--spl-on-gold) !important;
}
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  background-color: transparent !important;
  color: var(--spl-gold-ink) !important;
}

/* Scroll-to-top button. */
#to-top-button,
.to-top-button,
[id*="to-top"],
[class*="to-top"] {
  background-color: var(--spl-gold) !important;
  color: var(--spl-on-gold) !important;
}
[id*="to-top"] .dashicons,
[class*="to-top"] .dashicons {
  color: var(--spl-on-gold) !important;
}

/* ===================================================================
   26. Out-of-stock label - de-duplicated

   Out-of-stock cards were showing the label three times: Astra's own
   .ast-shop-product-out-of-stock (in default link blue), WooCommerce's
   .stock.out-of-stock, and the ::after badge added in section 11.

   Astra's is the native one, so that stays and gets styled; the other
   two are suppressed on listing cards. The dimmed image treatment is
   kept - that part was doing useful work.
   =================================================================== */
.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap::after {
  content: none;
}

.woocommerce ul.products li.product .ast-shop-product-out-of-stock {
  background: rgba(28, 35, 32, 0.86);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  line-height: 1.2;
}

/* WooCommerce's own stock paragraph is redundant inside a card. */
.woocommerce ul.products li.product p.stock.out-of-stock {
  display: none;
}

/* Elementor buttons adopt the gold too, so new ones match by default. */
.elementor-button,
.elementor-widget-button .elementor-button {
  background-color: var(--spl-gold) !important;
  background-image: var(--spl-gold-sheen) !important;
  color: var(--spl-on-gold) !important;
  border-color: var(--spl-gold-deep);
}
.elementor-button:hover,
.elementor-button:focus-visible {
  background-image: var(--spl-gold-sheen-hover) !important;
  color: var(--spl-on-gold) !important;
}

/* Exception: the homepage hero button is a transparent outline treatment
   sitting on a photograph. Filling it with gold would bury the image, so
   it keeps its white outline. */
.elementor-element-a1f7144 .elementor-button {
  background-color: rgba(255, 255, 255, 0.01) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
}
.elementor-element-a1f7144 .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  background-image: none !important;
  color: #fff !important;
}

/* The single-product template renders the brand line and the price as
   Elementor heading widgets, not WooCommerce .price markup, so the rules
   above did not reach them. Widget ids come from template 1418. */
.elementor-element-a3f4aad .elementor-heading-title,
.elementor-element-a3f4aad .woocommerce-Price-amount,
.elementor-element-a3f4aad .woocommerce-Price-currencySymbol,
.elementor-element-a3f4aad bdi,
.elementor-element-a3f4aad ins,
.elementor-element-888c219 .elementor-heading-title,
.elementor-element-888c219 .elementor-heading-title a {
  color: var(--spl-gold-ink) !important;
}

/* Struck-through original prices stay neutral so the live price leads. */
.elementor-element-a3f4aad del,
.elementor-element-a3f4aad del .woocommerce-Price-amount {
  color: #8a8a8a !important;
}

/* ===================================================================
   27. Header - full width and larger menu type

   Elementor capped the header containers at 1140px, so on a 1440px
   screen 150px sat empty either side while the 12-item menu was squeezed
   into a 681px column and wrapped onto two lines. The nav row also
   carried a 190px empty spacer column doing nothing.

   Widened to use the screen, spacer dropped, item padding tightened and
   the type raised from 15px to 17px. On wide screens the menu now has
   room for a single row; at 1440 it still wraps, because the twelve
   labels genuinely need about 1470px at this size - but both rows are
   full width and legible rather than crammed into 681px.
   =================================================================== */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: min(1700px, 96vw) !important;
  }

  /* The empty spacer column in the nav row. */
  .elementor-location-header .elementor-element-1623a00 {
    display: none !important;
  }

  /* Menu takes the space the spacer gave up; search keeps a fixed slot. */
  .elementor-location-header .elementor-element-faffe84 {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0;
  }
  .elementor-location-header .elementor-element-99de49a {
    width: auto !important;
    flex: 0 0 260px !important;
  }

  /* Larger, more legible menu type. */
  .elementor-location-header .elementor-nav-menu--main .elementor-item {
    font-size: 17px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  /* Let the menu use the full column and stay centred. */
  .elementor-location-header .elementor-nav-menu--main {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Wide screens: raise the ceiling so the twelve items clear a single row.
   An earlier version widened the item padding here, which pushed the menu
   back onto two lines - the opposite of what was wanted. */
@media (min-width: 1600px) {
  .elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: min(1800px, 95vw) !important;
  }
  .elementor-location-header .elementor-element-99de49a {
    flex: 0 0 240px !important;
  }
}

/* Tablet keeps the wider container but the original type size. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 96vw !important;
  }
}

/* Footer menu tracks the header, as set up in section 24. */
@media (min-width: 1025px) {
  .elementor-location-footer ul.spl-foot-list a { font-size: 17px; }
}