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



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

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

/* 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.
------------------------------------------------------- */

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

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

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

@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;
}