/*
 * StrategyFive UX fixes
 * - Home page Amici carousel image sizing
 * - Mini cart quantity controls
 * - Cart page cross-sell CTA button
 * - Cart coupon/gift card info tooltip + inline notices
 */

/* 1) Home page: Amici carousel images
   Existing theme CSS forces a 16:9 aspect ratio which heavily crops portrait photography.
   On the homepage carousel we intentionally switch to a portrait-friendly ratio.

   IMPORTANT:
   The same `.wp-block-group--product-gallery` class is also used on single product pages.
   Keep this override scoped to the homepage only so product galleries remain 16:9.
*/
body.home .wp-block-group--product-gallery .wp-block-image {
  height: auto;
}

body.home .wp-block-group--product-gallery .wp-block-image img {
  aspect-ratio: 3 / 4;
  min-height: 0;
  width: 100%;
  display: block;
  object-fit: cover;
}

.header__logo img {
  width:auto;
}

/* 2) Mini cart: quantity controls */
.minicart .woocommerce-mini-cart-item .quantity.unimatic-mini-cart__quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-text {
  white-space: nowrap;
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9d9d9;
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-input {
  width: 36px;
  min-width: 36px;
  height: 28px;
  border: 0;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  padding: 0;
  text-align: center;
  font: inherit;
  background: transparent;
}

/* Remove the native number spinners so the value stays centred and doesn't shift on hover */
.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-input[type='number']::-webkit-outer-spin-button,
.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Draw the plus/minus icon using 1px strokes in a light grey */
.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-btn::before,
.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: #b6b6b6;
  transform: translate(-50%, -50%);
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-btn--plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-btn--minus::after {
  display: none;
}

.minicart .woocommerce-mini-cart-item .unimatic-mini-cart__qty-controls.is-updating {
  opacity: 0.6;
  pointer-events: none;
}

/* Move the remove icon to align with the product title (top of row) */
.minicart .woocommerce-mini-cart-item > a.remove {
  align-self: flex-start;
  margin-top: 2px;
}

/* 3) Footer newsletter: render a real fallback form when the Klaviyo embed is
   slow, blocked, or fails to mount. Keep the Klaviyo placeholder invisible once
   the fallback is active so the footer never looks blank. */
.footer__newsletter-fallback[hidden] {
  display: none !important;
}

.footer__newsletter--fallback-active .footer__newsletter-klaviyo {
  display: none;
}

.footer__newsletter .footer__newsletter-fallback {
  margin-top: 16px;
}

.footer__newsletter .footer__newsletter-fallback .gform_wrapper,
.footer__newsletter .footer__newsletter-fallback form {
  margin-top: 0;
}

/* 3b) Archive product sold-out CTA: on mobile the "Browse available items"
   button can sit flush against the next section. Add a little breathing room
   without affecting the standard in-stock PDP flow. */
@media (max-width: 767px) {
  .single-product .product-archive-soldout {
    margin-bottom: 28px;
  }
}



/* 6) Mini cart: cross-sells panel scroll (desktop)
   The "Complete Your Purchase" flyout is full-height on desktop. When it contains many items,
   the list can overflow the viewport with no way to scroll. We keep the heading visible and
   allow the list itself to scroll inside the panel.
*/
@media (min-width: 782px) {
  .minicart__cross-sells {
    display: flex;
    flex-direction: column;
  }

  .minicart__cross-sells-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
/* 4) Cart page: cross-sells add-to-cart button styling */
.woocommerce-page.woocommerce-cart .cross-sells .product {
  position: relative;
}

.woocommerce-page.woocommerce-cart .cross-sells .product a.button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0;
  border-radius: 0;
  background: #c1ff3d;
  color: #1e1e1e;
  text-align: center;
  justify-content: center;
}

.woocommerce-page.woocommerce-cart .cross-sells .product a.button:hover {
  background: #1e1e1e;
  color: #fff;
}

/* 7) Cart page: mobile spacing above the cross-sell CTA
   On mobile the cross-sell product cards are tighter. We reserve extra space so the
   "Add to cart" button doesn't feel cramped against the product details.
*/
@media (max-width: 781px) {
  .woocommerce-page.woocommerce-cart .cross-sells .product {
    /* Desktop cards reserve 48px for the CTA; on mobile we add ~15px breathing room. */
    padding-bottom: 63px;
  }
}

/* 5) Cart page: info tooltip for gift card format */
.unimatic-coupon-gift-toggle {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 12px;
  cursor: pointer;
}

/* Prevent any theme/default pseudo-icons from duplicating our toggle icon */
.unimatic-coupon-gift-toggle::before,
.unimatic-coupon-gift-toggle::after {
  content: '' !important;
  display: none !important;
}

.unimatic-coupon-gift-toggle__left {
  min-width: 0;
}

.unimatic-coupon-gift-toggle__label {
  min-width: 0;
}

.unimatic-coupon-gift-toggle__icon {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: solid rgba(30, 30, 30, 0.7);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: 8px;
}

.unimatic-coupon-gift-toggle.is-open .unimatic-coupon-gift-toggle__icon {
  transform: rotate(-135deg);
}

.unimatic-info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.unimatic-info-tooltip__trigger {
  width: 22px;
  height: 22px;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  background: #fff;
  color: #1e1e1e;
  font: inherit;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.unimatic-info-tooltip__content {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 75vw;
  max-width: 320px;
  background: #fff;
  border: 1px solid #d9d9d9;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
}

.unimatic-info-tooltip:hover .unimatic-info-tooltip__content,
.unimatic-info-tooltip:focus-within .unimatic-info-tooltip__content {
  opacity: 1;
  visibility: visible;
}

/* Inline notice area for coupon/gift card feedback (especially on mobile) */
.unimatic-cart-code-notices {
  display: none;
  margin: 10px 0 12px;
}

.unimatic-cart-code-notices.is-active {
  display: block;
}

.unimatic-inline-notice {
  border: 1px solid #d9d9d9;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}

.unimatic-inline-notice.is-error {
  border-color: #d7b3b3;
  color: #b00020;
}

.unimatic-inline-notice.is-success {
  border-color: #cfd9b3;
}


/* 8) Mini cart: snappier open/close */
.minicart {
  transition: transform 0.18s ease, -webkit-transform 0.18s ease;
}

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

/* 8b) Mini cart (mobile): lock background scroll while keeping minicart scrollable
   iOS can chain-scroll the page behind fixed overlays unless the document is locked.
*/
@media (max-width: 781px) {
  html.unimatic-minicart-open-mobile,
  body.unimatic-minicart-open-mobile {
    overflow: hidden;
    height: 100%;
  }

  body.unimatic-minicart-open-mobile {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }

  body.unimatic-minicart-open-mobile .minicart .widget_shopping_cart_content,
  body.unimatic-minicart-open-mobile .minicart .widget_shopping_cart_content .woocommerce-mini-cart,
  body.unimatic-minicart-open-mobile .minicart__cross-sells-list {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* 9) Cart gift card form: stop messages squeezing the input on mobile */
.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form {
  flex-wrap: wrap;
}

.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form > p,
.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form > label,
.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form > .woocommerce-error,
.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form > .woocommerce-message,
.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form > .woocommerce-info {
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 8px;
}

.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form input[type="text"],
.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form input[type="tel"],
.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.woocommerce-page.woocommerce-cart #wc_gc_cart_redeem_form button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Mobile: show tooltip content inline (no off-screen/cropped popovers) */
@media (max-width: 768px) {
  .unimatic-info-tooltip__content {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 12px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }

  .unimatic-info-tooltip.is-open .unimatic-info-tooltip__content,
  .unimatic-info-tooltip:focus-within .unimatic-info-tooltip__content {
    display: block;
  }

  /* Tooltip mobile layout (legacy)
     The cart code info now uses the inline notice area, so we avoid altering the toggle layout here. */
}

/* Cart totals: free shipping progress notice */
.woocommerce-cart .unimatic-free-shipping-progress td {
  padding-top: 0;
}

.woocommerce-cart .unimatic-free-shipping-progress small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.8;
}

/* 10) Checkout: country field label overlap
   The native checkout uses a custom select component (`.vue-select`). The theme previously
   relied on the CSS :has() selector to float the label when a value is present, but :has()
   is not supported in Firefox. This caused the Country label to overlap the selected value.
   We now mirror the `has-value` state on the `.vue-select` wrapper in JS and style against it.
*/
.woocommerce-checkout-steps .vue-select.has-value + .vue-select-label {
  top: 9px !important;
}

.woocommerce-checkout-steps .vue-select.native-vue-select.has-value {
    padding: 4px 0px 10px 100px;
    border: 1px solid #ddd;
}

/* Hotfix: ensure the selected value never collides with the label, even when the browser does not support :has() */
.woocommerce-checkout-steps .form-row .vue-select.native-vue-select .value-container {
  padding-top: 6px;
}
/* 9) Coupon / gift card: invalid field highlighting (cart + minicart) */
input.unimatic-code-field--error,
.unimatic-code-field--error input {
  border-color: #d63638 !important;
  box-shadow: 0 0 0 1px #d63638 inset !important;
}

input.unimatic-code-field--error:focus {
  outline-color: #d63638;
}

[data-minicart] .unimatic-cart-code-notices {
  margin-top: 12px;
}


/* 10) Product listing (catalog): header filters
   Hotfix: "Case Diameter" filter can disappear and the "Clean Filters" reset link can jump left.
   Root cause: the catalog stylesheet hides the last `.catalog__filter` (`.catalog-filters .catalog__filter:last-child{display:none}`).
   When the reset link is rendered before the filters (older markup or cached variant), the final filter becomes the last-child and gets hidden.
*/
.catalog--layout-header .catalog-filters .catalog__filter:last-child {
  display: block;
}

.catalog--layout-header .catalog-filters .catalog__filter--price:last-child {
  display: none;
}

/* Keep reset link aligned after filters on desktop, even if markup order changes */
@media (min-width: 782px) {
  .catalog--layout-header .catalog-filters__reset {
    order: 900;
  }

  .catalog--layout-header .catalog__filter--price {
    order: 901;
  }
}

/* Fix: vue-select floating labels in browsers without :has() support (eg Firefox) */
/* This relies on the .has-value class toggled on the .vue-select wrapper in native-checkout.js */
.woocommerce-checkout-steps .form-row .vue-select.has-value + .vue-select-label,
.woocommerce-checkout-steps .form-row .vue-select[aria-expanded="true"] + .vue-select-label,
.woocommerce-checkout-steps .form-row .vue-select:focus + .vue-select-label,
.woocommerce-checkout-steps .form-row .vue-select:focus-visible + .vue-select-label {
  top: 9px !important;
  font-size: .8125em !important;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 100%;
}
/* 11) Product listing (PLP): CTA and swatches
 *
 * Client request:
 * - CTA always visible on desktop and mobile.
 * - CTA styled as plain text (no box / outline), matching price typography.
 * - CTA sits directly under the price.
 * - Swatches sit above the title and remain usable when overflowing (swipe/drag).
 */

body.woocommerce.archive .catalog__items .product a.unimatic-plp-cta,
body.woocommerce.search .catalog__items .product a.unimatic-plp-cta {
    position: static;
    right: auto;
    bottom: auto;

    display: inline-block;
    max-width: 100%;
    margin: 4px 0 0;

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    text-align: left;
    line-height: 1.2;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;

    /* Typography: match price */
    font-size: 0.8125em;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
}

body.woocommerce.archive .catalog__items .product a.unimatic-plp-cta:hover,
body.woocommerce.search .catalog__items .product a.unimatic-plp-cta:hover,
body.woocommerce.archive .catalog__items .product a.unimatic-plp-cta:focus,
body.woocommerce.search .catalog__items .product a.unimatic-plp-cta:focus {
    background: transparent;
    box-shadow: none;
    text-decoration: underline;
}

/* Swatches above title (single row, swipeable) */
body.woocommerce.archive .catalog__items .product .variation-list--above-title,
body.woocommerce.search .catalog__items .product .variation-list--above-title {
    margin: 0 0 6px;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    cursor: grab;
    user-select: none;
}

body.woocommerce.archive .catalog__items .product .variation-list--above-title.is-dragging,
body.woocommerce.search .catalog__items .product .variation-list--above-title.is-dragging {
    cursor: grabbing;
}

body.woocommerce.archive .catalog__items .product .variation-list--above-title::-webkit-scrollbar,
body.woocommerce.search .catalog__items .product .variation-list--above-title::-webkit-scrollbar {
    display: none;
}

/* 12) Footer: country selector arrow/text overlap
   Reserve space on the right so long labels do not sit under the dropdown indicator.
*/
.shipping-country select,
.shipping-country select[name="wcpbc_country_selector"],
.shipping-country select[name="wcpbc_manual_country_selector"] {
  padding-right: 2.25rem;
}

/* Keep swatches compact so they typically stay on one row */
body.woocommerce.archive .catalog__items .product .variation-list--above-title .variation-list__color,
body.woocommerce.search .catalog__items .product .variation-list--above-title .variation-list__color,
body.woocommerce.archive .catalog__items .product .variation-list--above-title .variation-list__image,
body.woocommerce.search .catalog__items .product .variation-list--above-title .variation-list__image {
    width: 0.7vw;
    height: 0.7vw;
}

@media (max-width: 768px) {

  /* Keep swatches compact so they typically stay on one row */
  body.woocommerce.archive .catalog__items .product .variation-list--above-title .variation-list__color,
  body.woocommerce.search .catalog__items .product .variation-list--above-title .variation-list__color,
  body.woocommerce.archive .catalog__items .product .variation-list--above-title .variation-list__image,
  body.woocommerce.search .catalog__items .product .variation-list--above-title .variation-list__image {
      width: 16px;
      height: 16px;
  }

}

/* Accessible focus state for keyboard users */
body.woocommerce.archive .catalog__items .product .variation-list__item:focus,
body.woocommerce.search .catalog__items .product .variation-list__item:focus {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

/* Ensure the product image still scrolls vertically on touch, while we handle horizontal swipes */
body.woocommerce.archive .catalog__items .product .woocommerce-LoopProduct-link,
body.woocommerce.search .catalog__items .product .woocommerce-LoopProduct-link {
    touch-action: pan-y;
}

.variation-list__item {
    margin: 1px;
}

/* ============================================================
   Unified Gift Card + Coupon Code Entry (Cart & Checkout)
   ============================================================ */

/* Progressive enhancement:
   We keep the default WooCommerce / Gift Card forms visible until the JS-driven
   unified UI initialises. That way, if JS fails for any reason, customers can
   still redeem codes using the stock forms. */
.unimatic-code-entry {
  display: none;
  margin-top: 18px;
  padding-bottom: 20px;
}

body.unimatic-code-entry-enabled .unimatic-code-entry {
  display: block;
}

/* Hide legacy / default code forms (the rebuilt UI proxies to these). */
body.unimatic-code-entry-enabled.woocommerce-cart .woocommerce-form-coupon__wrapper,
body.unimatic-code-entry-enabled.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.unimatic-code-entry-enabled.woocommerce-checkout form.checkout_coupon,
body.unimatic-code-entry-enabled.woocommerce-checkout form.woocommerce-form-coupon {
  display: none !important;
}

/* WooCommerce cart template: hide the default coupon UI but keep it in the DOM for submission. */
body.unimatic-code-entry-enabled.woocommerce-cart form.woocommerce-cart-form .coupon {
  display: none !important;
}

/* WooCommerce Gift Cards: hide native gift card redemption forms (we proxy to these). */
body.unimatic-code-entry-enabled.woocommerce-cart #wc_gc_cart_redeem_form,
body.unimatic-code-entry-enabled.woocommerce-cart .add_gift_card_form,
body.unimatic-code-entry-enabled.woocommerce-checkout #wc_gc_cart_redeem_form,
body.unimatic-code-entry-enabled.woocommerce-checkout #wc_gc_checkout_redeem_form,
body.unimatic-code-entry-enabled.woocommerce-checkout .add_gift_card_form {
  display: none !important;
}

.unimatic-code-entry__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.unimatic-code-entry__toggle-label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.unimatic-code-entry__toggle-icon {
  width: 12px;
  height: 12px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.unimatic-code-entry__toggle[aria-expanded="true"] .unimatic-code-entry__toggle-icon {
  transform: rotate(-135deg);
}

.unimatic-code-entry__body {
  margin-top: 12px;
}

.unimatic-code-entry__body[hidden] {
  display: none !important;
}

.unimatic-code-entry__section + .unimatic-code-entry__section {
  margin-top: 18px;
}

.unimatic-code-entry__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.unimatic-code-entry__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.unimatic-code-entry__input {
  flex: 1 1 auto;
  min-width: 0;
}

.unimatic-code-entry__input.has-error {
  border-color: #b00020 !important;
}

.unimatic-code-entry__apply {
  white-space: nowrap;
}

.unimatic-code-entry__help {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.75;
  font-family: 'Sul Mono', sans-serif;
}

.unimatic-code-entry__message {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-line;
}

.unimatic-code-entry__message:empty {
  display: none;
}

.unimatic-code-entry__message.is-error {
  color: #b00020;
}

.unimatic-code-entry__message.is-success {
  color: inherit;
}

@media (max-width: 768px) {
  .unimatic-code-entry__row {
    flex-direction: column;
  }

  /* Prevent iOS Safari input zoom by ensuring a >=16px font-size on focusable fields. */
  .unimatic-code-entry__input {
    font-size: 16px !important;
  }

  .unimatic-code-entry__apply {
    width: 100%;
  }
}

.product-images__item img {
    height: auto;
}

.catalog__items .product img {
    padding: 80px 0px 60px 0px;
}

.woocommerce-checkout-steps .vue-select.native-vue-select.has-value {
    max-height: 200px;
    overflow: auto;
}

/* -------------------------------------------------------
   Checkout: Terms and Conditions modal (lightbox)
   Replaces WooCommerce's inline terms "letterbox" UI.
------------------------------------------------------- */

/* Cart totals: duty-paid reassurance note above gift card / coupon toggle. */
.woocommerce-cart .unimatic-cart-delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 10px;
  font-family: "Sul Mono", sans-serif;
  font-size: 0.8125em;
  line-height: 1.4;
  color: #7d7972;
}

.woocommerce-cart .unimatic-cart-delivery-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: "Sul Mono", sans-serif;
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
}

.woocommerce-cart .unimatic-cart-delivery-note__text {
  margin: 0;
}

body.unimatic-terms-modal-open {
  overflow: hidden;
}

.unimatic-terms-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.55);
}

.unimatic-terms-modal[aria-hidden="false"] {
  display: flex;
}

.unimatic-terms-modal__dialog {
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  background: #f8f9fa;
  color: #1e1e1e;
  border: 1px solid #1e1e1e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.unimatic-terms-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(30, 30, 30, 0.2);
}

.unimatic-terms-modal__title {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
}

.unimatic-terms-modal__close {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 44px;
}

.unimatic-terms-modal__close::before,
.unimatic-terms-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.unimatic-terms-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.unimatic-terms-modal__close:focus-visible {
  outline: 2px solid #1e1e1e;
  outline-offset: 2px;
}

.unimatic-terms-modal__content {
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 781px) {
  .unimatic-terms-modal {
    padding: 16px 12px;
  }

  .unimatic-terms-modal__dialog {
    max-height: calc(100vh - 24px);
  }

  .unimatic-terms-modal__content {
    padding: 14px;
  }
}

.unimatic-terms-modal__content .block-tabs__menu .wp-block-buttons {
  display:none;
}

/* --------------------------------------------------------------------------
   Checkout: Stripe payment processing overlay
   -------------------------------------------------------------------------- */
body.woocommerce-checkout .payment_box.payment_method_stripe {
  position: relative;
}

body.woocommerce-checkout .woocommerce-checkout-payment,
body.woocommerce-checkout #payment {
  position: relative;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal {
  position: absolute;
  inset: 0;
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 36px 6px;
  text-align: center;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing {
  pointer-events: none;
}

body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal {
  padding: 32px 10px;
  background: rgba(255, 255, 255, 0.52);
  pointer-events: auto;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing.is-visible,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal.is-visible,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal.is-visible {
  display: flex;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__inner,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__inner,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__inner {
  width: min(420px, 100%);
  padding: 54px 8px;
  border-radius: 8px;
  border: 1px solid rgba(30, 30, 30, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #1e1e1e;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__spinner,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner {
  width: 30px;
  height: 30px;
  display: block;
  animation: unimatic-stripe-processing-spin 0.95s linear infinite;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__spinner-track,
body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__spinner-path,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-track,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-path,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-track,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-path {
  fill: none;
  stroke-width: 3.5;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__spinner-track,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-track,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-track {
  stroke: rgba(30, 30, 30, 0.22);
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__spinner-path,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-path,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-path {
  stroke: var(--color-collection, #c1ff3d);
  stroke-linecap: round;
  stroke-dasharray: 82 140;
  animation: unimatic-stripe-processing-dash 1.4s ease-in-out infinite;
}

body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__text,
body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__text,
body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__text {
  margin: 0;
  max-width: 38ch;
  font-size: 13px;
  line-height: 1.4;
  font-family: inherit;
}

@keyframes unimatic-stripe-processing-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes unimatic-stripe-processing-dash {
  0% {
    stroke-dasharray: 2 140;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 82 140;
    stroke-dashoffset: -24;
  }
  100% {
    stroke-dasharray: 82 140;
    stroke-dashoffset: -110;
  }
}

@media (max-width: 781px) {
  body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing,
  body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal,
  body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal {
    padding: 24px 8px;
  }

  body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__inner,
  body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__inner,
  body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__inner {
    width: min(360px, 100%);
    padding: 44px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__spinner,
  body.woocommerce-checkout .payment_box.payment_method_stripe .unimatic-stripe-processing__spinner-path,
  body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner,
  body.woocommerce-checkout .woocommerce-checkout-payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-path,
  body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner,
  body.woocommerce-checkout #payment .unimatic-stripe-processing--paypal .unimatic-stripe-processing__spinner-path {
    animation: none;
  }
}

/* Express wallets (PDP/cart): full-page processing state between wallet submit
   and redirect/phone-capture page. */
.unimatic-stripe-processing--site {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.unimatic-stripe-processing--site.is-visible {
  display: flex;
}

.unimatic-stripe-processing--site .unimatic-stripe-processing__inner {
  width: min(420px, calc(100vw - 32px));
  padding: 40px 16px;
  border-radius: 8px;
  border: 1px solid rgba(30, 30, 30, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #1e1e1e;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.unimatic-stripe-processing--site .unimatic-stripe-processing__spinner {
  width: 30px;
  height: 30px;
  display: block;
  animation: unimatic-stripe-processing-spin 0.95s linear infinite;
}

.unimatic-stripe-processing--site .unimatic-stripe-processing__spinner-track,
.unimatic-stripe-processing--site .unimatic-stripe-processing__spinner-path {
  fill: none;
  stroke-width: 3.5;
}

.unimatic-stripe-processing--site .unimatic-stripe-processing__spinner-track {
  stroke: rgba(30, 30, 30, 0.22);
}

.unimatic-stripe-processing--site .unimatic-stripe-processing__spinner-path {
  stroke: var(--color-collection, #c1ff3d);
  stroke-linecap: round;
  stroke-dasharray: 82 140;
  animation: unimatic-stripe-processing-dash 1.4s ease-in-out infinite;
}

.unimatic-stripe-processing--site .unimatic-stripe-processing__text {
  margin: 0;
  max-width: 38ch;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 781px) {
  .unimatic-stripe-processing--site {
    padding: 16px;
  }

  .unimatic-stripe-processing--site .unimatic-stripe-processing__inner {
    width: min(360px, calc(100vw - 24px));
    padding: 32px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .unimatic-stripe-processing--site .unimatic-stripe-processing__spinner,
  .unimatic-stripe-processing--site .unimatic-stripe-processing__spinner-path {
    animation: none;
  }
}

/* 5) PDP: Add-ons dropdown height (Mobile)
   When a product has 3-4+ add-ons, the add-ons list must expand to show all
   options and push page content down, rather than being constrained to a
   fixed height.

   Requirement:
   - Expand to full height to show all options
   - Do not make the box scrollable (page scroll only)
*/
@media (max-width: 781px) {
  .single-product .product__summary .product-addons__list,
  .single-product .product__summary .product-addons__list ul {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .single-product .product__summary .product-addons__list ul {
    min-height: 50px;
  }
}

/* Homepage hero slider image fill (mobile only)
   Replace `.home-hero-slider` with the real slider wrapper class from your markup. */
@media (max-width: 767px) {
  .home .home-hero-slider {
    overflow: hidden;
  }

  .home .home-hero-slider .slide,
  .home .home-hero-slider .swiper-slide,
  .home .home-hero-slider .slick-slide {
    overflow: hidden;
  }

  .home .home-hero-slider img,
  .home .home-hero-slider picture,
  .home .home-hero-slider picture img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
}

/* --------------------------------------------------------------------------
   Checkout: Reliability fixes (Staging go-live)
   - 2) Password label overlap on mobile
   - 3) Country/State dropdown scroll + label typography
   -------------------------------------------------------------------------- */

/* 2) Checkout (Mobile): password input label overlaps copy when focused
   The floating label jumps upwards (top: -11px) and can overlap the paragraph above.
   On mobile, keep the label as an "in-field" hint only, then hide it while focused
   or once the user has typed.
*/
@media (max-width: 781px) {
  .woocommerce-checkout-steps__password .password-wrapper {
    /* Give the field a little breathing room under the copy above. */
    margin-top: 12px;
  }

  .woocommerce-checkout-steps__password .password-wrapper #user_pass:focus + label,
  .woocommerce-checkout-steps__password .password-wrapper #user_pass:not(:placeholder-shown) + label {
    /* Prevent the label from floating into the copy above on mobile. */
    top: 10px !important;
    font-size: inherit !important;
    opacity: 0 !important;
  }
}

/* 2.5) Cart + Checkout (Mobile): prevent browser auto-zoom on field focus
   Mobile Safari zooms when editable controls are below 16px.
*/
@media (max-width: 781px) {
  body.woocommerce-cart .woocommerce form input[type="text"],
  body.woocommerce-cart .woocommerce form input[type="email"],
  body.woocommerce-cart .woocommerce form input[type="password"],
  body.woocommerce-cart .woocommerce form input[type="search"],
  body.woocommerce-cart .woocommerce form input[type="tel"],
  body.woocommerce-cart .woocommerce form input[type="url"],
  body.woocommerce-cart .woocommerce form input[type="number"],
  body.woocommerce-cart .woocommerce form input[type="date"],
  body.woocommerce-cart .woocommerce form input[type="time"],
  body.woocommerce-cart .woocommerce form input[type="datetime-local"],
  body.woocommerce-cart .woocommerce form input[type="month"],
  body.woocommerce-cart .woocommerce form input[type="week"],
  body.woocommerce-cart .woocommerce form textarea,
  body.woocommerce-cart .woocommerce form select,
  body.woocommerce-checkout .woocommerce form input[type="text"],
  body.woocommerce-checkout .woocommerce form input[type="email"],
  body.woocommerce-checkout .woocommerce form input[type="password"],
  body.woocommerce-checkout .woocommerce form input[type="search"],
  body.woocommerce-checkout .woocommerce form input[type="tel"],
  body.woocommerce-checkout .woocommerce form input[type="url"],
  body.woocommerce-checkout .woocommerce form input[type="number"],
  body.woocommerce-checkout .woocommerce form input[type="date"],
  body.woocommerce-checkout .woocommerce form input[type="time"],
  body.woocommerce-checkout .woocommerce form input[type="datetime-local"],
  body.woocommerce-checkout .woocommerce form input[type="month"],
  body.woocommerce-checkout .woocommerce form input[type="week"],
  body.woocommerce-checkout .woocommerce form textarea,
  body.woocommerce-checkout .woocommerce form select,
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="text"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="email"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="password"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="search"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="tel"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="url"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="number"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="date"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="time"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="datetime-local"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="month"],
  body.woocommerce-checkout .woocommerce-checkout-steps input[type="week"],
  body.woocommerce-checkout .woocommerce-checkout-steps textarea,
  body.woocommerce-checkout .woocommerce-checkout-steps select {
    font-size: 16px !important;
  }
}

/* 3) Checkout: make Country/State dropdown menus scroll internally (not the page)
   iOS in particular can scroll the page instead of the options list when the menu
   is taller than the viewport.
*/
.woocommerce-checkout-steps .vue-select .menu {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 3.2 + 3.3) Checkout: unify typography for dropdown values/options and labels */
.woocommerce-checkout-steps .form-row label:not(.checkbox),
.woocommerce-checkout-steps .password-wrapper label:not(.checkbox),
.woocommerce-checkout-steps .vue-select-label,
.woocommerce-checkout-steps .vue-select .single-value,
.woocommerce-checkout-steps .vue-select .menu-option {
  font-family: "Sul Mono", sans-serif;
}

/* Ensure the selected value and menu options render at the same size */
.woocommerce-checkout-steps .vue-select .single-value,
.woocommerce-checkout-steps .vue-select .menu-option {
  font-size: 0.8125em;
  font-weight: 400;
  line-height: 1.2;
}
/* 10) PDP gallery: prevent Owl pre-init collapse (CLS)
   Owl Carousel hides `.owl-carousel` until `.owl-loaded`, which can collapse the
   gallery area and create a large layout shift when JS initializes.
   We keep the first image visible (and hide the rest) until Owl is ready.
*/
.single-product .product-images__carousel.owl-carousel {
  display: block !important;
}

.single-product .product-images__carousel.owl-carousel:not(.owl-loaded) {
  overflow: hidden;
}

.single-product .product-images__carousel.owl-carousel:not(.owl-loaded) > .product-images__item {
  display: none;
}

.single-product .product-images__carousel.owl-carousel:not(.owl-loaded) > .product-images__item:first-child {
  display: block;
}

.single-product .product-images__carousel.owl-carousel:not(.owl-loaded) .product-images__image {
  display: block;
  width: 100%;
  height: auto;
}

/* 11) Express checkout buttons (Stripe/PayPal): reserve space to avoid late-mount CLS
   The payment provider inserts buttons asynchronously; reserving space prevents
   “page dancing” on PDP, cart and checkout.
*/
#wc-stripe-express-checkout-element {
  min-height: 112px;
}

/* Keep Stripe express wallet stacks visible (Apple Pay + Google Pay when available). */
.woocommerce-checkout #unimatic-express-checkout-wrapper,
.woocommerce-checkout #unimatic-express-checkout-wrapper #wc-stripe-express-checkout-element,
.woocommerce-checkout #unimatic-express-checkout-wrapper #wc-stripe-express-checkout-element > .StripeElement {
  max-height: none;
  overflow: visible;
}

@media (max-width: 781px) {
  #wc-stripe-express-checkout-element {
    min-height: 104px;
  }
}

#wc-stripe-express-checkout-button-separator {
  min-height: 24px;
}

.wc-ppcp-express-checkout {
  min-height: 56px;
}


/* 12) PDP: Colour swatches sizing and layout (match PLP) */
.woocommerce div.product form.cart .variations .color-variable-items-wrapper {
  /* Override Woo Variation Swatches sizing just for the colour attribute list */
  --wvs-single-product-item-width: 20px;
  --wvs-single-product-item-height: 20px;
  --wvs-single-product-large-item-width: 20px;
  --wvs-single-product-large-item-height: 20px;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Allow space for focus rings / selection outlines without clipping */
  padding: 2px 2px 6px;
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.woocommerce div.product form.cart .variations .color-variable-items-wrapper .variable-item {
  flex: 0 0 auto;
  margin: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}

.woocommerce div.product form.cart .variations .color-variable-items-wrapper .variable-item-contents {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woocommerce div.product form.cart .variations .color-variable-items-wrapper .variable-item-span-color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  /* V3 can have much longer colour sets than watch PDPs. Make the swatch row a
     dedicated horizontal scroller so the last options never get clipped. */
  .pdp-template--v3.woocommerce div.product form.cart .variations td.value {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pdp-template--v3.woocommerce div.product form.cart .variations td.value::-webkit-scrollbar {
    display: none;
  }

  .pdp-template--v3.woocommerce div.product form.cart .variations .color-variable-items-wrapper {
    --wvs-single-product-item-width: 15px;
    --wvs-single-product-item-height: 15px;
    --wvs-single-product-large-item-width: 15px;
    --wvs-single-product-large-item-height: 15px;

    display: flex;
    width: max-content;
    min-width: max-content;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 2px 10px 6px 0;
    margin: 0;
  }

  .pdp-template--v3.woocommerce div.product form.cart .variations .color-variable-items-wrapper .variable-item {
    flex: 0 0 15px;
    width: 15px;
    min-width: 15px;
    height: 15px;
    margin: 0;
  }
}

/* 13) PDP: Gutenberg image blocks – responsive on mobile
   The theme enforces `min-height: 500px` + `object-fit: cover` for direct child
   Gutenberg image blocks inside `.product-gutenberg-content`.

   This helps standardise the desktop layout, but on mobile it can force landscape
   banners to render heavily cropped/zoomed (and can appear “non-responsive”).

   We relax the constraint below the theme's mobile breakpoint so images keep their
   intrinsic aspect ratio and scale naturally within the container.
*/
@media (max-width: 781px) {
  body.woocommerce.single-product .product-gutenberg-content > .wp-block-image img {
    min-height: 0;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
  }
}

/* 14) Footer closure parity: keep payment block right aligned on desktop */
@media (min-width: 768px) {
  .footer__closure > div:last-child {
    margin-left: auto;
  }
}