/* 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; }
}

/* ===================================================================
   28. Call for price - Cohiba

   These products show a phone call-to-action instead of a price. The
   underlying prices are untouched in the database; only the display and
   purchasability change (see spl-call-for-price.php).
   =================================================================== */

/* ---- Listing cards ------------------------------------------------ */
.spl-cfp {
  display: block;
  line-height: 1.35;
}
.spl-cfp__lead {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--spl-gold-ink, #8a6d1f);
  margin-bottom: 6px;
}
.spl-cfp__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--spl-gold-deep, #b8912b);
  border-radius: 3px;
  background: var(--spl-gold-sheen, linear-gradient(180deg, #e3c560 0%, #d4af37 48%, #bf9b2f 100%));
  color: var(--spl-on-gold, #1a1a1a) !important;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.spl-cfp__btn:hover,
.spl-cfp__btn:focus-visible {
  background: var(--spl-gold-sheen-hover, linear-gradient(180deg, #d9b845 0%, #c9a42f 48%, #ac8a26 100%));
  color: var(--spl-on-gold, #1a1a1a) !important;
}
.spl-cfp__icon { font-size: 1.05em; line-height: 1; }

.spl-cfp--compact .spl-cfp__lead { font-size: 0.76rem; margin-bottom: 5px; }
.spl-cfp--compact .spl-cfp__btn { min-height: 38px; font-size: 0.85rem; padding: 5px 11px; }

/* "Call to order" replaces Read more on cards. */
.woocommerce ul.products li.product a.spl-cfp__loop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* ---- Single product panel ----------------------------------------- */
.spl-cfp-panel {
  margin: 6px 0 0;
  padding: 18px 20px 20px;
  background: #f7f4ec;
  border: 1px solid rgba(184, 145, 43, 0.38);
  border-left: 3px solid var(--spl-gold-deep, #b8912b);
  border-radius: 3px;
}
.spl-cfp-panel__lead {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3a3a3a;
  max-width: 46ch;
}
.spl-cfp-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 26px;
  border: 1px solid var(--spl-gold-deep, #b8912b);
  border-radius: 3px;
  background: var(--spl-gold-sheen, linear-gradient(180deg, #e3c560 0%, #d4af37 48%, #bf9b2f 100%));
  color: var(--spl-on-gold, #1a1a1a) !important;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
}
.spl-cfp-panel__btn:hover,
.spl-cfp-panel__btn:focus-visible {
  background: var(--spl-gold-sheen-hover, linear-gradient(180deg, #d9b845 0%, #c9a42f 48%, #ac8a26 100%));
  color: var(--spl-on-gold, #1a1a1a) !important;
}
.spl-cfp-panel__hours {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: #6b6b6b;
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 767px) {
  .spl-cfp__btn,
  .woocommerce ul.products li.product a.spl-cfp__loop-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .spl-cfp-panel { padding: 16px; }
  .spl-cfp-panel__btn { width: 100%; min-height: 52px; font-size: 1.05rem; }
  .spl-cfp-panel__lead { max-width: none; }
}

@media (max-width: 400px) {
  .spl-cfp--compact .spl-cfp__btn { font-size: 0.8rem; padding: 5px 8px; }
}

/* The sticky bar's button becomes an anchor on call-for-price products. */
a.spl-sticky-atc__btn {
  text-decoration: none !important;
  background: var(--spl-gold-sheen, linear-gradient(180deg, #e3c560 0%, #d4af37 48%, #bf9b2f 100%));
  color: var(--spl-on-gold, #1a1a1a) !important;
}
a.spl-sticky-atc__btn:hover,
a.spl-sticky-atc__btn:focus-visible {
  background: var(--spl-gold-sheen-hover, linear-gradient(180deg, #d9b845 0%, #c9a42f 48%, #ac8a26 100%));
  color: var(--spl-on-gold, #1a1a1a) !important;
}

/* ===================================================================
   29. Absolute type sizes for small UI text

   The site's root font-size is 13.68px, not the 16px rem assumes, so
   every rem value in this stylesheet rendered about 15% smaller than
   intended - 0.76rem came out at 10.4px and the out-of-stock badge at
   9.9px. Anything small enough to matter is pinned in px here so it is
   predictable regardless of the root size.
   =================================================================== */

/* Call-for-price on listing cards. */
.spl-cfp__lead { font-size: 12.5px; }
.spl-cfp__btn { font-size: 14px; }
.spl-cfp--compact .spl-cfp__lead { font-size: 12px; line-height: 1.3; }
.spl-cfp--compact .spl-cfp__btn { font-size: 13px; padding: 5px 10px; }

/* Call-for-price panel on the product page. */
.spl-cfp-panel__lead { font-size: 15px; }
.spl-cfp-panel__btn { font-size: 17px; }
.spl-cfp-panel__hours { font-size: 12.5px; }

/* Out-of-stock badge was rendering at 9.9px; 12.5px keeps it level with
   the category counts and clear of the 12px readability floor. */
.woocommerce ul.products li.product .ast-shop-product-out-of-stock {
  font-size: 12.5px;
}

/* Sticky add-to-cart / call bar. */
.spl-sticky-atc__name { font-size: 12.5px; }
.spl-sticky-atc__price { font-size: 14.5px; }
.spl-sticky-atc__btn { font-size: 14.5px; }

/* Add-to-basket toast. */
.spl-toast { font-size: 14px; }
.spl-toast__link { font-size: 14px; }

/* Notify-me form. */
.spl-notify__lead { font-size: 14px; }
.spl-notify__consent { font-size: 12.5px; }
.spl-notify__msg { font-size: 13px; }

/* Product card price and title floors. */
.woocommerce ul.products li.product .price { font-size: 15px; }

/* The card button is width:100% below 768px, so its width comes from the
   card, not its text - the type can be raised with no risk of it pushing
   past the card edge. */
@media (max-width: 400px) {
  .spl-cfp--compact .spl-cfp__btn { font-size: 13.5px; padding: 6px 8px; }
  .spl-cfp--compact .spl-cfp__lead { font-size: 12px; }
}

/* Remaining card text Astra renders below 12px on mobile. */
.woocommerce ul.products li.product .ast-woo-product-category { font-size: 12.5px; }
.woocommerce ul.products li.product .ast-onsale-card { font-size: 12px; }
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .rating { font-size: 12.5px; }

/* The .spl-cfp--compact rule (two classes) outranked the mobile 44px rule
   (one class), so the card call button was rendering 38px tall on touch.
   Matched specificity here so touch targets hold. */
@media (max-width: 767px) {
  .spl-cfp .spl-cfp__btn,
  .spl-cfp--compact .spl-cfp__btn,
  .woocommerce ul.products li.product a.spl-cfp__loop-btn {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }
}

/* ===================================================================
   30. Google reviews block (homepage)

   The [grw] widget renders a slider whose off-screen slides sit up to
   4766px to the right. Nothing scrolls sideways today only because body
   carries overflow-x:hidden - if that ever changes the page would gain a
   horizontal scrollbar. Clip it at the widget instead so it does not
   depend on a global.
   =================================================================== */
.elementor-element-splgrw .wp-gr,
.elementor-element-splgrw .elementor-widget-shortcode {
  max-width: 100%;
  overflow: hidden;
}

.elementor-element-splgrw {
  border-top: 1px solid rgba(28, 35, 32, 0.10);
}

.elementor-element-splgrw .elementor-heading-title {
  font-size: 26px;
  letter-spacing: 0.04em;
  margin-bottom: 26px;
}

@media (max-width: 1024px) {
  .elementor-element-splgrw .elementor-heading-title { font-size: 22px; margin-bottom: 20px; }
}

@media (max-width: 767px) {
  .elementor-element-splgrw .elementor-heading-title { font-size: 19px; margin-bottom: 16px; }
  /* Review text should not fall below the readability floor on phones. */
  .elementor-element-splgrw .wp-gr .wp-google-name,
  .elementor-element-splgrw .wp-gr .wp-google-text { font-size: 13px; }
}

/* ===================================================================
   31. Google reviews slider - touch controls

   On a phone the widget's own controls were far too small to use:
   prev/next arrows at 34x34 and sixteen pagination dots rendering
   between 4x4 and 8x8. The dots shrink with distance from the current
   slide, so most of them were 4px - not tappable by any measure.

   Arrows go to 44x44. The dots keep their look but get an 18px touch
   box each; sixteen at 44px would need 704px and the widget is 355px
   wide, so 18px plus proper arrows is the workable compromise.
   =================================================================== */
@media (max-width: 767px) {
  .elementor-element-splgrw .wp-gr .rpi-ltgt,
  .elementor-element-splgrw .wp-gr .grw-prev,
  .elementor-element-splgrw .wp-gr .grw-next {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Pagination dots are left exactly as the plugin renders them, at the
     owner's request - native size and its distance-based scaling. They
     read as a position indicator rather than a touch control; the 44px
     arrows below are what navigate the slider. */

  /* "Review us on Google" is a real call to action - give it a real target. */
  .elementor-element-splgrw .wp-gr a[href*="writerev"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
  }

  /* Business name link at the top of the widget. */
  .elementor-element-splgrw .wp-gr a[href*="maps.google.com"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}



/* ===================================================================
   32. Footer type sizes

   Root font-size is 15px on desktop (and 13.68px on mobile), so the rem
   values used when the footer was built rendered smaller than intended:
   the age notice at 11.4px, copyright and legal links at 12px, contact
   and intro copy at 14px. Column headings sat at 13.5px - below the 17px
   links underneath them, which inverted the hierarchy.

   Everything is pinned in px so it no longer depends on the root size.
   Menu links stay at 17px, matching the header.
   =================================================================== */
.elementor-location-footer .spl-foot-menu__head,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 0.85rem;
}

.elementor-location-footer .spl-foot-intro {
  font-size: 16px;
  line-height: 1.6;
}

.elementor-location-footer .spl-foot-contact {
  font-size: 16px;
  line-height: 1.65;
}
.elementor-location-footer .spl-foot-contact a {
  font-size: 16px;
}

.elementor-location-footer .spl-foot-age {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.8;
}

.elementor-location-footer .spl-foot-legal,
.elementor-location-footer .spl-foot-legal a {
  font-size: 14px;
  line-height: 1.6;
}

/* Slightly tighter on phones, but still well clear of the old sizes. */
@media (max-width: 767px) {
  .elementor-location-footer .spl-foot-intro,
  .elementor-location-footer .spl-foot-contact,
  .elementor-location-footer .spl-foot-contact a { font-size: 15px; }
  .elementor-location-footer .spl-foot-age { font-size: 13.5px; }
  .elementor-location-footer .spl-foot-legal,
  .elementor-location-footer .spl-foot-legal a { font-size: 13.5px; }
}

/* ===================================================================
   33. About page

   The page was a single 250-word paragraph carrying the history, the
   product range, credentials, opening hours, address, phone numbers and
   company registration all at once. Same facts, given structure.
   =================================================================== */

/* Give the page the same wider measure as the product grids. */
.page-id-1371 .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: min(1180px, 92vw) !important;
}

/* ---- Intro -------------------------------------------------------- */
.spl-ab-intro { text-align: center; max-width: 46rem; margin: 0 auto; }

.spl-ab-eyebrow {
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spl-gold-ink, #8a6d1f);
  margin: 0 0 14px;
}

.spl-ab-h1 {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #2b2b2b;
}

.spl-ab-lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0 auto 22px;
  max-width: 38rem;
}

.spl-ab-badge {
  display: inline-block;
  margin: 0;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.4;
  color: #3a3a3a;
  background: #faf6ea;
  border: 1px solid rgba(184, 145, 43, 0.45);
  border-radius: 3px;
}
.spl-ab-badge strong { color: var(--spl-gold-ink, #8a6d1f); }

/* ---- Shared body -------------------------------------------------- */
.spl-ab-body { max-width: 100%; }

.spl-ab-h2 {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b2b2b;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--spl-gold, #d4af37);
  display: inline-block;
}

.spl-ab-body p {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 14px;
  max-width: 62ch;
}
.spl-ab-body strong { color: #2b2b2b; }

/* ---- Story images ------------------------------------------------- */
.elementor-element-splabout2 .elementor-widget-image { margin-bottom: 18px; }
/* The two photographs are only 494x372. The column is 731px wide, so
   letting them fill it upscaled them by about 48% and they went soft.
   Capped at their natural width and centred instead. */
.elementor-element-splabout2 .elementor-widget-image img {
  width: auto;
  max-width: min(100%, 494px);
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(28, 35, 32, 0.08);
  box-shadow: 0 2px 6px rgba(28, 35, 32, 0.08), 0 12px 24px -12px rgba(28, 35, 32, 0.22);
}
.elementor-element-splabout2 .elementor-widget-image { text-align: center; }

/* ---- What we stock ------------------------------------------------ */
.spl-ab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.spl-ab-card {
  padding: 20px 22px 22px;
  background: #fbfaf7;
  border: 1px solid rgba(28, 35, 32, 0.09);
  border-top: 3px solid var(--spl-gold, #d4af37);
  border-radius: 3px;
}
.spl-ab-card h3 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2b2b2b;
  margin: 0 0 8px;
}
.spl-ab-card p { font-size: 15px; line-height: 1.55; color: #5a5a5a; margin: 0; max-width: none; }

/* ---- Visit ---------------------------------------------------------- */
.spl-ab-visit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px 32px;
  margin-top: 22px;
  padding: 26px 28px;
  background: #fbfaf7;
  border: 1px solid rgba(28, 35, 32, 0.09);
  border-left: 3px solid var(--spl-gold, #d4af37);
  border-radius: 3px;
}
.spl-ab-visit__col h3 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spl-gold-ink, #8a6d1f);
  margin: 0 0 10px;
}
.spl-ab-visit__col p { font-size: 16px; line-height: 1.6; margin: 0; color: #3a3a3a; }

.spl-ab-hours { margin: 0; font-size: 16px; line-height: 1.6; color: #3a3a3a; }
.spl-ab-hours dt { font-weight: 400; color: #5a5a5a; }
.spl-ab-hours dd { margin: 0 0 8px; font-weight: 700; color: #2b2b2b; }
.spl-ab-hours dd.is-closed { font-weight: 400; color: #8a8a8a; }

.spl-ab-contact a {
  color: var(--spl-gold-ink, #8a6d1f);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 109, 31, 0.35);
  display: inline-block;
  min-height: 32px;
  padding: 3px 0;
}
.spl-ab-contact a:hover,
.spl-ab-contact a:focus-visible { border-bottom-color: currentColor; }
.spl-ab-note { color: #8a8a8a; font-size: 14px; }

.spl-ab-delivery {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5a5a5a;
}

/* ---- Company details ------------------------------------------------ */
.spl-ab-company {
  padding-top: 26px;
  border-top: 1px solid rgba(28, 35, 32, 0.12);
}
.spl-ab-h3 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a7a;
  margin: 0 0 14px;
}
.spl-ab-reg {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 22px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.spl-ab-reg dt { color: #8a8a8a; }
.spl-ab-reg dd { margin: 0; color: #3a3a3a; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 767px) {
  .spl-ab-intro { text-align: left; }
  .spl-ab-lead { margin-left: 0; }
  .spl-ab-h2 { display: block; }
  .spl-ab-visit { padding: 20px; gap: 22px; }
  .spl-ab-reg { grid-template-columns: 1fr; gap: 2px; }
  .spl-ab-reg dt { margin-top: 10px; }
  .spl-ab-contact a { min-height: 44px; display: flex; align-items: center; }
  .spl-ab-body p, .spl-ab-visit__col p { font-size: 16px; }
}

/* Story section: the two columns stack below desktop, but Elementor left
   them at mismatched widths (578px text against a 707px image column).
   Both to full width so the block reads as one column. */
@media (max-width: 1024px) {
  .elementor-element-splabout2 > .elementor-container > .elementor-top-column {
    width: 100% !important;
  }
  .elementor-element-splabout2 .elementor-widget-image { text-align: left; }
}

/* Two photographs side by side once there is room for them. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-splabout2 .elementor-widget-image {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    margin-right: 2%;
  }
}

/* ===================================================================
   34. About page - section rhythm

   The padding set on each Elementor section never made it into the
   generated CSS: all five compute to 0px top and bottom, so every
   section sat flush against the next with only a 10px widget-wrap gap
   between them. That is what made the page feel cramped. Spacing is set
   here instead, where it reliably applies.
   =================================================================== */
.page-id-1371 .elementor-element-splabout1 { padding: 56px 0 40px !important; }
.page-id-1371 .elementor-element-splabout2 { padding: 8px 0 48px !important; }
.page-id-1371 .elementor-element-splabout3 { padding: 8px 0 48px !important; }
.page-id-1371 .elementor-element-splabout4 { padding: 8px 0 44px !important; }
.page-id-1371 .elementor-element-splabout5 { padding: 8px 0 64px !important; }

/* A hairline between the major blocks so the structure reads. */
.page-id-1371 .elementor-element-splabout3,
.page-id-1371 .elementor-element-splabout4 {
  border-top: 1px solid rgba(28, 35, 32, 0.09);
}

/* Section headings need room above them once sections are separated. */
.page-id-1371 .spl-ab-h2 { margin-top: 8px; }

@media (max-width: 767px) {
  .page-id-1371 .elementor-element-splabout1 { padding: 36px 0 28px !important; }
  .page-id-1371 .elementor-element-splabout2 { padding: 4px 0 34px !important; }
  .page-id-1371 .elementor-element-splabout3 { padding: 28px 0 34px !important; }
  .page-id-1371 .elementor-element-splabout4 { padding: 28px 0 32px !important; }
  .page-id-1371 .elementor-element-splabout5 { padding: 24px 0 44px !important; }

  /* Cards and the visit block need a little separation of their own. */
  .spl-ab-grid { gap: 14px; margin-top: 20px; }
  .spl-ab-visit { margin-top: 18px; }
  .spl-ab-company { padding-top: 22px; }
}

/* ===================================================================
   35. About page - stock cards two-up on mobile

   The auto-fit grid needed 240px per card, so on a 325px content width
   it collapsed to a single column. Forced to two columns on phones, with
   the padding and type stepped down so a ~155px card still reads.
   =================================================================== */
@media (max-width: 767px) {
  .spl-ab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .spl-ab-card {
    padding: 15px 13px 17px;
    border-top-width: 2px;
  }

  .spl-ab-card h3 {
    font-size: 14px;
    letter-spacing: 0.03em;
    line-height: 1.25;
    margin-bottom: 6px;
    /* Long labels such as "Cuban & New World cigars" must wrap, not spill. */
    overflow-wrap: anywhere;
  }

  .spl-ab-card p {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* Below ~340px two cards leave too little room for the copy, so fall
   back to a single column rather than let it get unreadable. */
@media (max-width: 339px) {
  .spl-ab-grid { grid-template-columns: minmax(0, 1fr); }
  .spl-ab-card { padding: 18px 16px; }
  .spl-ab-card h3 { font-size: 15px; }
  .spl-ab-card p { font-size: 15px; }
}

/* ===================================================================
   36. Contact page

   The contact details were plain text - no tel: or mailto: links at all,
   so nobody could tap to call from a phone. Rebuilt around the existing
   Elementor form widget, which was left untouched and still delivers.
   =================================================================== */
.page-id-1533 .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: min(1180px, 92vw) !important;
}

.page-id-1533 .elementor-element-splct1 { padding: 56px 0 34px !important; }
.page-id-1533 .elementor-element-splct2 { padding: 8px 0 52px !important; }
.page-id-1533 .elementor-element-splct3 { padding: 34px 0 64px !important; border-top: 1px solid rgba(28, 35, 32, 0.09); }

/* ---- Intro -------------------------------------------------------- */
.spl-ct-intro { max-width: 44rem; }
.spl-ct-eyebrow {
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--spl-gold-ink, #8a6d1f); margin: 0 0 14px;
}
.spl-ct-h1 {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.1;
  text-transform: uppercase; color: #2b2b2b; margin: 0 0 16px;
}
.spl-ct-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: #4a4a4a; margin: 0 0 26px; max-width: 40rem; }

.spl-ct-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.spl-ct-btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 50px; padding: 10px 22px;
  border: 1px solid var(--spl-gold-deep, #b8912b); border-radius: 3px;
  font-size: 16px; font-weight: 700; text-decoration: none !important;
  color: var(--spl-gold-ink, #8a6d1f); background: #fff;
}
.spl-ct-btn--primary {
  background: var(--spl-gold-sheen, linear-gradient(180deg,#e3c560 0%,#d4af37 48%,#bf9b2f 100%));
  color: var(--spl-on-gold, #1a1a1a) !important;
}
.spl-ct-btn:hover, .spl-ct-btn:focus-visible { border-color: var(--spl-gold-darker, #9a7822); }
.spl-ct-btn--primary:hover { background: var(--spl-gold-sheen-hover, linear-gradient(180deg,#d9b845 0%,#c9a42f 48%,#ac8a26 100%)); }

/* ---- Headings and blocks ------------------------------------------ */
.spl-ct-h2 {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(20px, 2vw, 25px); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #2b2b2b;
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--spl-gold, #d4af37); display: inline-block;
}
.spl-ct-note { font-size: 16px; line-height: 1.6; color: #5a5a5a; margin: 0 0 18px; max-width: 52ch; }

/* ---- Details card -------------------------------------------------- */
.spl-ct-card {
  background: #fbfaf7;
  border: 1px solid rgba(28, 35, 32, 0.09);
  border-left: 3px solid var(--spl-gold, #d4af37);
  border-radius: 3px;
  padding: 6px 22px;
}
.spl-ct-row {
  display: grid; grid-template-columns: 108px 1fr; gap: 4px 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(28, 35, 32, 0.07);
}
.spl-ct-row:last-child { border-bottom: 0; }
.spl-ct-label {
  font-family: "Josefin Sans", sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8a8a8a;
}
.spl-ct-value { font-size: 16px; line-height: 1.55; color: #2b2b2b; }
a.spl-ct-value {
  color: var(--spl-gold-ink, #8a6d1f);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 109, 31, 0.35);
  display: inline-block; min-height: 30px; padding: 2px 0;
}
a.spl-ct-value:hover, a.spl-ct-value:focus-visible { border-bottom-color: currentColor; }
.spl-ct-value--email { overflow-wrap: anywhere; }
.spl-ct-closed { color: #8a8a8a; }

/* ---- Form ---------------------------------------------------------- */
.page-id-1533 .elementor-form .elementor-field-group { margin-bottom: 4px; }
.page-id-1533 .elementor-form input[type="text"],
.page-id-1533 .elementor-form input[type="email"],
.page-id-1533 .elementor-form textarea {
  min-height: 48px;
  font-size: 16px; /* stops iOS zooming on focus */
  padding: 12px 14px;
  border: 1px solid #cfc9bc;
  border-radius: 3px;
  background: #fff;
}
.page-id-1533 .elementor-form textarea { min-height: 130px; }
.page-id-1533 .elementor-form input:focus,
.page-id-1533 .elementor-form textarea:focus {
  outline: 2px solid var(--spl-gold-deep, #b8912b);
  outline-offset: 1px;
  border-color: var(--spl-gold-deep, #b8912b);
}
.page-id-1533 .elementor-form .elementor-button {
  min-height: 50px;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 32px;
}

/* ---- Map ------------------------------------------------------------ */
.page-id-1533 .elementor-widget-google_maps iframe {
  width: 100%;
  min-height: 380px;
  border: 1px solid rgba(28, 35, 32, 0.10);
  border-radius: 3px;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
  .page-id-1533 .elementor-element-splct2 > .elementor-container > .elementor-top-column { width: 100% !important; }
  .page-id-1533 .elementor-element-splct2 > .elementor-container > .elementor-top-column + .elementor-top-column { margin-top: 34px; }
}

@media (max-width: 767px) {
  .page-id-1533 .elementor-element-splct1 { padding: 34px 0 26px !important; }
  .page-id-1533 .elementor-element-splct2 { padding: 4px 0 34px !important; }
  .page-id-1533 .elementor-element-splct3 { padding: 28px 0 44px !important; }
  .spl-ct-h2 { display: block; }
  .spl-ct-actions { flex-direction: column; }
  .spl-ct-btn { width: 100%; justify-content: center; min-height: 52px; }
  .spl-ct-card { padding: 4px 16px; }
  .spl-ct-row { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
  a.spl-ct-value { min-height: 44px; display: flex; align-items: center; }
  .page-id-1533 .elementor-widget-google_maps iframe { min-height: 300px; }
}
/* ===================================================================
   37. Category tiles - title and product count

   The [product_categories] tiles used on the Tobacco, Accessories and
   Cuban Cigars landing pages rendered their title at 12.3px and the
   product count at 9.2px - both far below readable, another consequence
   of the 13.68px root font-size. The count is a <mark> element, so its
   background is pinned transparent in case a browser highlights it.
   =================================================================== */
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: #2b2b2b;
}

.woocommerce ul.products li.product-category .count,
.woocommerce ul.products li.product-category mark.count {
  display: block;
  margin-top: 5px;
  background: transparent;
  color: #7a7a7a;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .woocommerce ul.products li.product-category h2,
  .woocommerce ul.products li.product-category .woocommerce-loop-category__title { font-size: 16px; }
  .woocommerce ul.products li.product-category .count { font-size: 13px; }
}

/* The theme sizes .count in em relative to the tile title (0.75em), which
   beat the rule above and left it at 11.25px. Pinned in px with weight. */
.woocommerce ul.products li.product-category h2 .count,
.woocommerce ul.products li.product-category h2 mark.count,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
  font-size: 12.5px !important;
}
@media (min-width: 768px) {
  .woocommerce ul.products li.product-category h2 .count,
  .woocommerce ul.products li.product-category h2 mark.count,
  .woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
    font-size: 13px !important;
  }
}

/* ===================================================================
   38. Product page buy controls on mobile

   455 of 560 products are variable, so the variation dropdown is the
   main buy control - and it was rendering 34px tall at 13.68px. Under
   the 44px touch minimum, and any font below 16px makes iOS zoom the
   viewport when the field is focused, which throws the layout.

   The quantity box had the same font problem, the variation Clear link
   was 10.3px, and the description tabs were 36px.
   =================================================================== */
.woocommerce div.product form.cart select,
.woocommerce div.product .variations select,
.woocommerce form.cart select {
  min-height: 48px;
  font-size: 16px;
  padding: 8px 34px 8px 12px;
  border: 1px solid #cfc9bc;
  border-radius: 3px;
  background-color: #fff;
}

.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
  font-size: 16px;
  min-height: 44px;
}

.woocommerce div.product form.cart .reset_variations,
a.reset_variations {
  font-size: 13.5px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

/* Variation labels sit beside the select and were inheriting the small
   root size. */
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations label {
  font-size: 15px;
}

@media (max-width: 767px) {
  /* Stack the variation rows so the select gets the full width. */
  .woocommerce div.product form.cart .variations,
  .woocommerce div.product form.cart .variations tbody,
  .woocommerce div.product form.cart .variations tr,
  .woocommerce div.product form.cart .variations th,
  .woocommerce div.product form.cart .variations td {
    display: block;
    width: 100%;
  }
  .woocommerce div.product form.cart .variations th { padding-bottom: 6px; }
  .woocommerce div.product form.cart .variations td { padding-bottom: 12px; }
  .woocommerce div.product form.cart select { width: 100%; }
}


/* ============================================================
   39. Shop grid on mobile - title legibility, tap target, row rhythm

   Product titles in the loop rendered at 13px on phones (12.996px for
   the heading, 13.68px for the link) - another consequence of the
   13.68px root font-size. That is the primary label on every card and
   it was the smallest text on the page. The link was also only 24px
   tall, well under the 44px touch minimum, even though it sits
   directly beneath a 169px tappable image.

   Grid rows size independently, so a row of one-line titles came out
   342px and a row of two-line titles 390px. Equal rows read as a grid
   rather than a ragged stack.

   The age gate is the first thing every visitor touches on the site
   and its two buttons were 34px tall at 13.68px.
   ============================================================ */

@media (max-width: 1024px) {
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .ast-loop-product__link {
    font-size: 15px;
    line-height: 1.4;
  }

  ul.products li.product .ast-loop-product__link {
    display: block;
    min-height: 46px;
    padding: 2px 0;
  }

  /* Every row the same height, so the grid reads as a grid. */
  ul.products { grid-auto-rows: 1fr; }

  /* Two more real touch targets on this width: the footer menu links,
     which measured 215x41, and the call-for-price button on Cohiba
     cards, 133x38 at 13px - and that one is a phone number people are
     meant to tap. Both are border-box, so min-height is the whole box. */
  ul.spl-foot-list a {
    min-height: 44px;
  }

  .spl-cfp .spl-cfp__btn,
  .spl-cfp--compact .spl-cfp__btn {
    min-height: 44px;
    font-size: 14px;
  }
}

/* Age gate - first interaction on the site, so sized on every breakpoint. */
.avwp-av button.yes,
.avwp-av button.no {
  min-height: 48px;
  min-width: 96px;
  padding: 12px 22px;
  font-size: 16px;
}