/*
 * D&H Huawei Child Theme v2.2.21
 * Product gallery smooth JS follow layout.
 * Desktop only. Mobile/tablet keeps the existing WooCommerce/Astra flow.
 *
 * Purpose:
 * - Do not constrain the whole right summary to gallery height.
 * - Do not create internal summary/description scrolling.
 * - Use a JS transform follow fallback instead of relying only on CSS sticky,
 *   because some Astra/WooCommerce wrappers can prevent sticky from taking effect.
 */

@media (min-width: 1025px) {
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product {
    --dh-gallery-follow-top: 96px;
    --dh-gallery-follow-offset: 0px;
  }

  /* Explicitly cancel the previous compact summary experiment. */
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .summary.entry-summary,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .entry-summary {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  body.dhh-single-product.dhh-product-gallery-follow-v2221 .dhh-summary-scroll-region,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .dhh-summary-purchase-region {
    display: contents !important;
  }

  body.dhh-single-product.dhh-product-gallery-follow-v2221 .summary.entry-summary > .woocommerce-product-details__short-description,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .entry-summary > .woocommerce-product-details__short-description {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Allow the transformed gallery to remain visible outside tight theme wrappers. */
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .site,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .site-content,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .content-area,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .ast-container,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .ast-woocommerce-container,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product div.images,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .woocommerce-product-gallery {
    overflow: visible !important;
  }

  /* JS applies translateY to the gallery. This is more reliable than CSS sticky on this layout. */
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .woocommerce-product-gallery,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .images,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .dhh-product-gallery,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .product-gallery {
    position: relative !important;
    top: auto !important;
    z-index: 3;
    transform: translate3d(0, var(--dh-gallery-follow-offset, 0px), 0);
  }

  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .dhh-gallery-follow-ready {
    transition: none !important;
    backface-visibility: hidden;
  }

  /* Prevent the moving gallery from sitting above later WooCommerce sections. */
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .woocommerce-tabs,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .related,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .upsells {
    position: relative;
    z-index: 4;
  }
}

@media (max-width: 1024px) {
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .woocommerce-product-gallery,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .images,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .dhh-product-gallery,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 div.product .product-gallery {
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }

  body.dhh-single-product.dhh-product-gallery-follow-v2221 .dhh-summary-scroll-region,
  body.dhh-single-product.dhh-product-gallery-follow-v2221 .dhh-summary-purchase-region {
    display: contents !important;
  }
}

/* =========================================================
   D&H Huawei Child Theme v2.2.22 patch
   Checkout / order-received presentation fixes only.
   Does not change WooCommerce payment, inventory, or availability logic.
   ========================================================= */

/* Product-gallery follow class compatibility for v2.2.22. */
@media (min-width: 1025px) {
  body.dhh-single-product.dhh-product-gallery-follow-v2222 div.product {
    --dh-gallery-follow-top: 96px;
    --dh-gallery-follow-offset: 0px;
  }
}

/* Keep WooCommerce thank-you/order overview cards in one row on desktop. */
html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-thankyou-order-details,
html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-order-overview,
html body.dhh-theme.dhh-checkout .woocommerce-order ul.order_details,
html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-thankyou-order-details,
html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview,
html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.order_details,
html body.dhh-theme .woocommerce-order ul.woocommerce-thankyou-order-details,
html body.dhh-theme .woocommerce-order ul.woocommerce-order-overview,
html body.dhh-theme .woocommerce-order ul.order_details,
html body.dhh-theme ul.woocommerce-thankyou-order-details,
html body.dhh-theme ul.woocommerce-order-overview,
html body.dhh-theme ul.order_details {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 28px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  clear: both !important;
}

html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-thankyou-order-details li,
html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-order-overview li,
html body.dhh-theme.dhh-checkout .woocommerce-order ul.order_details li,
html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-thankyou-order-details li,
html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview li,
html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.order_details li,
html body.dhh-theme .woocommerce-order ul.woocommerce-thankyou-order-details li,
html body.dhh-theme .woocommerce-order ul.woocommerce-order-overview li,
html body.dhh-theme .woocommerce-order ul.order_details li,
html body.dhh-theme ul.woocommerce-thankyou-order-details li,
html body.dhh-theme ul.woocommerce-order-overview li,
html body.dhh-theme ul.order_details li,
html body.dhh-theme .dhh-order-overview-grid-fixed li {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 1px solid #e3e8ef !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

html body.dhh-theme .woocommerce-order ul.woocommerce-thankyou-order-details li::before,
html body.dhh-theme .woocommerce-order ul.woocommerce-thankyou-order-details li::after,
html body.dhh-theme .woocommerce-order ul.woocommerce-order-overview li::before,
html body.dhh-theme .woocommerce-order ul.woocommerce-order-overview li::after,
html body.dhh-theme .woocommerce-order ul.order_details li::before,
html body.dhh-theme .woocommerce-order ul.order_details li::after,
html body.dhh-theme ul.woocommerce-thankyou-order-details li::before,
html body.dhh-theme ul.woocommerce-thankyou-order-details li::after,
html body.dhh-theme ul.woocommerce-order-overview li::before,
html body.dhh-theme ul.woocommerce-order-overview li::after,
html body.dhh-theme ul.order_details li::before,
html body.dhh-theme ul.order_details li::after {
  display: none !important;
  content: none !important;
}

/* Extra spacing if Revolut reward/express checkout blocks appear above the order overview. */
html body.dhh-theme.dhh-checkout .woocommerce-order > * + ul.woocommerce-thankyou-order-details,
html body.dhh-theme.dhh-checkout .woocommerce-order > * + ul.woocommerce-order-overview,
html body.dhh-theme.dhh-checkout .woocommerce-order > * + ul.order_details {
  margin-top: 32px !important;
}

@media (max-width: 900px) {
  html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-thankyou-order-details,
  html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-order-overview,
  html body.dhh-theme.dhh-checkout .woocommerce-order ul.order_details,
  html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-thankyou-order-details,
  html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview,
  html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.order_details,
  html body.dhh-theme .woocommerce-order ul.woocommerce-thankyou-order-details,
  html body.dhh-theme .woocommerce-order ul.woocommerce-order-overview,
  html body.dhh-theme .woocommerce-order ul.order_details,
  html body.dhh-theme ul.woocommerce-thankyou-order-details,
  html body.dhh-theme ul.woocommerce-order-overview,
  html body.dhh-theme ul.order_details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-thankyou-order-details,
  html body.dhh-theme.dhh-checkout .woocommerce-order ul.woocommerce-order-overview,
  html body.dhh-theme.dhh-checkout .woocommerce-order ul.order_details,
  html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-thankyou-order-details,
  html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview,
  html body.dhh-theme.woocommerce-order-received .woocommerce-order ul.order_details,
  html body.dhh-theme .woocommerce-order ul.woocommerce-thankyou-order-details,
  html body.dhh-theme .woocommerce-order ul.woocommerce-order-overview,
  html body.dhh-theme .woocommerce-order ul.order_details,
  html body.dhh-theme ul.woocommerce-thankyou-order-details,
  html body.dhh-theme ul.woocommerce-order-overview,
  html body.dhh-theme ul.order_details {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   D&H v2.2.23 checkout address security notice
   Message only; no checkout/payment logic changes.
   ========================================================= */
html body.dhh-theme .dhh-checkout-security-notice,
html body.woocommerce-checkout .dhh-checkout-security-notice {
  margin: 14px 0 20px !important;
  padding: 14px 16px !important;
  border: 1px solid #bfdbfe !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 14px !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08) !important;
}

html body.dhh-theme .dhh-checkout-security-notice strong,
html body.woocommerce-checkout .dhh-checkout-security-notice strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

@media (max-width: 560px) {
  html body.dhh-theme .dhh-checkout-security-notice,
  html body.woocommerce-checkout .dhh-checkout-security-notice {
    padding: 13px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   D&H Huawei Child Theme v2.2.25 patch
   Checkout payment method layout fixes only.
   - Removes legacy pseudo-element white box under Pay by Bank.
   - Aligns radio buttons, labels and payment icons cleanly.
   Does not change payment gateway logic or checkout processing.
   ========================================================= */

/* Stop legacy clearfix pseudo-elements appearing as empty white boxes inside payment methods. */
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method::before,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method::after,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after {
  content: none !important;
  display: none !important;
  clear: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Payment method list: clean spacing without touching gateway functionality. */
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  align-items: center !important;
  padding: 9px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  position: relative !important;
  min-height: 32px !important;
}

html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
}

html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method > label,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Keep gateway logos readable and stop them overlapping labels. */
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method label img,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
  display: inline-block !important;
  max-height: 24px !important;
  width: auto !important;
  max-width: 120px !important;
  margin: 0 0 0 6px !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  object-fit: contain !important;
}

html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_cc label img,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.payment_method_revolut_cc label img,
html body.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_cc label img,
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_pay_by_bank label img,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.payment_method_revolut_pay_by_bank label img,
html body.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_pay_by_bank label img {
  max-height: 22px !important;
}

/* Gateway description boxes should sit under the label column, and empty boxes should disappear. */
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method .payment_box,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 8px 0 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: #f7f9fc !important;
  border: 1px solid #e3e8ef !important;
  box-shadow: none !important;
  min-height: auto !important;
}

html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box:empty,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method .payment_box:empty,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box:empty {
  display: none !important;
}

@media (max-width: 560px) {
  html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
  html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method,
  html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 8px 0 !important;
  }

  html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label,
  html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method > label,
  html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    gap: 8px !important;
    font-size: 14px !important;
  }

  html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img,
  html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method label img,
  html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
    max-height: 20px !important;
    max-width: 96px !important;
  }
}

/* =========================================================
   D&H Huawei Child Theme v2.2.25 patch
   Hide empty Revolut Pay by Bank payment description container
   ========================================================= */

/* Revolut Pay by Bank outputs an empty .payment_box container on checkout.
   It is not a user-input area; hiding it removes the blank blue/white box
   without changing the payment gateway logic. */
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_pay_by_bank > .payment_box,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.payment_method_revolut_pay_by_bank > .payment_box,
html body.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_pay_by_bank > .payment_box,
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_paybybank > .payment_box,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.payment_method_revolut_paybybank > .payment_box,
html body.woocommerce-checkout #payment ul.payment_methods li.payment_method_revolut_paybybank > .payment_box {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Keep other payment boxes visible only when they have useful content. */
html body.dhh-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:not(.payment_method_revolut_pay_by_bank):not(.payment_method_revolut_paybybank) > .payment_box,
html body.dhh-theme.dhh-checkout #payment ul.payment_methods li.wc_payment_method:not(.payment_method_revolut_pay_by_bank):not(.payment_method_revolut_paybybank) > .payment_box,
html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:not(.payment_method_revolut_pay_by_bank):not(.payment_method_revolut_paybybank) > .payment_box {
    grid-column: 2 !important;
}


/* =========================================================
   D&H Huawei Child Theme v2.2.26 patch
   Cart page button colour and coupon spacing
   ========================================================= */

/* Keep cart action buttons aligned with the D&H dark navy style instead of the red/pink fallback. */
html body.dhh-theme.woocommerce-cart table.cart button.button,
html body.dhh-theme.woocommerce-cart table.shop_table button.button,
html body.dhh-theme.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button,
html body.woocommerce-cart table.cart button.button,
html body.woocommerce-cart table.shop_table button.button,
html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
  background: #071126 !important;
  background-color: #071126 !important;
  color: #ffffff !important;
  border: 1px solid #071126 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  min-height: 46px !important;
  line-height: 1.2 !important;
}

html body.dhh-theme.woocommerce-cart table.cart button.button:hover,
html body.dhh-theme.woocommerce-cart table.shop_table button.button:hover,
html body.dhh-theme.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover,
html body.woocommerce-cart table.cart button.button:hover,
html body.woocommerce-cart table.shop_table button.button:hover,
html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
  background: #101b31 !important;
  background-color: #101b31 !important;
  border-color: #101b31 !important;
  color: #ffffff !important;
}

html body.dhh-theme.woocommerce-cart table.cart button.button:disabled,
html body.dhh-theme.woocommerce-cart table.shop_table button.button:disabled,
html body.dhh-theme.woocommerce-cart table.cart button.button:disabled[disabled],
html body.dhh-theme.woocommerce-cart table.shop_table button.button:disabled[disabled],
html body.woocommerce-cart table.cart button.button:disabled,
html body.woocommerce-cart table.shop_table button.button:disabled,
html body.woocommerce-cart table.cart button.button:disabled[disabled],
html body.woocommerce-cart table.shop_table button.button:disabled[disabled] {
  background: #9aa3b2 !important;
  background-color: #9aa3b2 !important;
  border-color: #9aa3b2 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Add breathing room between coupon input and Apply coupon button. */
html body.dhh-theme.woocommerce-cart table.cart td.actions .coupon,
html body.dhh-theme.woocommerce-cart table.shop_table td.actions .coupon,
html body.woocommerce-cart table.cart td.actions .coupon,
html body.woocommerce-cart table.shop_table td.actions .coupon {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  float: left !important;
}

html body.dhh-theme.woocommerce-cart table.cart td.actions .coupon .input-text,
html body.dhh-theme.woocommerce-cart table.shop_table td.actions .coupon .input-text,
html body.woocommerce-cart table.cart td.actions .coupon .input-text,
html body.woocommerce-cart table.shop_table td.actions .coupon .input-text {
  margin: 0 !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

html body.dhh-theme.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"],
html body.dhh-theme.woocommerce-cart table.shop_table td.actions .coupon button[name="apply_coupon"],
html body.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"],
html body.woocommerce-cart table.shop_table td.actions .coupon button[name="apply_coupon"] {
  margin-left: 0 !important;
  padding: 0 22px !important;
  white-space: nowrap !important;
}

html body.dhh-theme.woocommerce-cart table.cart td.actions button[name="update_cart"],
html body.dhh-theme.woocommerce-cart table.shop_table td.actions button[name="update_cart"],
html body.woocommerce-cart table.cart td.actions button[name="update_cart"],
html body.woocommerce-cart table.shop_table td.actions button[name="update_cart"] {
  float: right !important;
  padding: 0 22px !important;
  white-space: nowrap !important;
}

/* Make the main checkout button match checkout page styling. */
html body.dhh-theme.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button,
html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  margin-top: 12px !important;
  font-size: 16px !important;
}

@media (max-width: 767px) {
  html body.dhh-theme.woocommerce-cart table.cart td.actions .coupon,
  html body.dhh-theme.woocommerce-cart table.shop_table td.actions .coupon,
  html body.woocommerce-cart table.cart td.actions .coupon,
  html body.woocommerce-cart table.shop_table td.actions .coupon {
    width: 100% !important;
    float: none !important;
  }

  html body.dhh-theme.woocommerce-cart table.cart td.actions .coupon .input-text,
  html body.dhh-theme.woocommerce-cart table.shop_table td.actions .coupon .input-text,
  html body.woocommerce-cart table.cart td.actions .coupon .input-text,
  html body.woocommerce-cart table.shop_table td.actions .coupon .input-text,
  html body.dhh-theme.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"],
  html body.dhh-theme.woocommerce-cart table.shop_table td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart table.shop_table td.actions .coupon button[name="apply_coupon"],
  html body.dhh-theme.woocommerce-cart table.cart td.actions button[name="update_cart"],
  html body.dhh-theme.woocommerce-cart table.shop_table td.actions button[name="update_cart"],
  html body.woocommerce-cart table.cart td.actions button[name="update_cart"],
  html body.woocommerce-cart table.shop_table td.actions button[name="update_cart"] {
    width: 100% !important;
    float: none !important;
  }
}


/* v2.2.27: restore WooCommerce shop/category/tag archive layout after refresh
   Scope: product archive/category/tag pages only. Does not touch product inventory or availability logic. */
body.dhh-shop-archive {
  background: #f3f4f6 !important;
}

/* Prevent old/native WooCommerce/Astra archive title/description from appearing beside the D&H hero. */
body.dhh-shop-archive .woocommerce-products-header,
body.dhh-shop-archive .ast-archive-description,
body.dhh-shop-archive .ast-woocommerce-container > .page-title,
body.dhh-shop-archive .ast-woocommerce-container > .term-description,
body.dhh-shop-archive .site-main > .page-title,
body.dhh-shop-archive .site-main > .term-description {
  display: none !important;
}

/* Make the archive page a clean centered D&H layout. */
body.dhh-shop-archive #primary,
body.dhh-shop-archive .site-main,
body.dhh-shop-archive .ast-woocommerce-container {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
}

body.dhh-shop-archive .site-content .ast-container,
body.dhh-shop-archive .ast-container,
body.dhh-shop-archive .site-main {
  display: block !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* D&H category/shop hero card */
body.dhh-shop-archive .dhh-category-header,
body.dhh-shop-archive .dhh-archive-header {
  width: min(1180px, calc(100vw - 48px)) !important;
  margin: 48px auto 28px !important;
  padding: clamp(30px, 4vw, 54px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background:
    radial-gradient(circle at top right, rgba(234, 245, 251, 0.95), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
  align-items: center !important;
  gap: 28px !important;
}

body.dhh-shop-archive .dhh-category-header::before,
body.dhh-shop-archive .dhh-archive-header::before {
  content: "D&H SHOP";
  display: block;
  grid-column: 1 / 2;
  margin-bottom: 14px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.dhh-shop-archive .dhh-category-header h1,
body.dhh-shop-archive .dhh-archive-header h1 {
  grid-column: 1 / 2;
  margin: 0 0 12px !important;
  color: #111827 !important;
  font-size: clamp(38px, 5vw, 68px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;
  font-weight: 900 !important;
}

body.dhh-shop-archive .dhh-category-header p,
body.dhh-shop-archive .dhh-archive-header p {
  grid-column: 1 / 2;
  max-width: 760px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

body.dhh-shop-archive .dhh-category-subcats {
  grid-column: 2 / 3;
  grid-row: 1 / span 3;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-content: center !important;
  gap: 12px !important;
}

body.dhh-shop-archive .dhh-category-subcats a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
}

body.dhh-shop-archive .dhh-category-subcats a:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
}

/* Product loop card container */
body.dhh-shop-archive .dhh-shop-loop-shell {
  width: min(1180px, calc(100vw - 48px)) !important;
  margin: 0 auto 76px !important;
  padding: clamp(26px, 3vw, 38px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.07) !important;
  box-sizing: border-box !important;
  clear: both !important;
  overflow: visible !important;
}

/* Top archive controls */
body.dhh-shop-archive .woocommerce-result-count {
  margin: 0 0 28px !important;
  color: #64748b !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

body.dhh-shop-archive .woocommerce-ordering {
  margin: -12px 0 28px auto !important;
}

body.dhh-shop-archive .woocommerce-ordering select {
  min-width: 220px !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Product archive grid/cards */
body.dhh-shop-archive ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.dhh-shop-archive ul.products::before,
body.dhh-shop-archive ul.products::after {
  display: none !important;
}

body.dhh-shop-archive ul.products li.product {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 24px 24px 28px !important;
  border-radius: 22px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.dhh-shop-archive ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
}

body.dhh-shop-archive ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  margin: 0 0 18px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
}

body.dhh-shop-archive ul.products li.product .ast-woo-product-category,
body.dhh-shop-archive ul.products li.product .woocommerce-loop-category__title {
  color: #a8b3c3 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
}

body.dhh-shop-archive ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 16px !important;
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

body.dhh-shop-archive ul.products li.product .price {
  display: block !important;
  margin: auto 0 18px !important;
  color: #0066ff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

body.dhh-shop-archive ul.products li.product .button,
body.dhh-shop-archive .woocommerce ul.products li.product .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  min-height: 44px !important;
  min-width: 124px !important;
  width: fit-content !important;
  padding: 0 22px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #111827 !important;
  background: #111827 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.dhh-shop-archive ul.products li.product .button:hover {
  background: #020617 !important;
  border-color: #020617 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  body.dhh-shop-archive .dhh-category-header,
  body.dhh-shop-archive .dhh-archive-header {
    grid-template-columns: 1fr !important;
  }

  body.dhh-shop-archive .dhh-category-subcats {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
    justify-content: flex-start !important;
  }

  body.dhh-shop-archive ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 800px) {
  body.dhh-shop-archive .dhh-category-header,
  body.dhh-shop-archive .dhh-archive-header,
  body.dhh-shop-archive .dhh-shop-loop-shell {
    width: min(100% - 28px, 1180px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 22px !important;
  }

  body.dhh-shop-archive ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 520px) {
  body.dhh-shop-archive .dhh-category-header h1,
  body.dhh-shop-archive .dhh-archive-header h1 {
    font-size: 38px !important;
  }

  body.dhh-shop-archive ul.products {
    grid-template-columns: 1fr !important;
  }
}


/* v2.2.28: remove duplicate archive/category hero card
   D&H Design System or old archive markup may also output .dhh-category-header.
   Keep the theme-owned .dhh-archive-header only. */
body.dhh-shop-archive .dhh-category-header:not(.dhh-archive-header) {
  display: none !important;
}

/* Make sure the remaining theme archive hero starts at the correct position. */
body.dhh-shop-archive .dhh-category-header.dhh-archive-header {
  margin-top: 48px !important;
}


/* v2.2.29: D&H Design System archive compatibility
   The Design System now outputs its own .dhds-shop-hero and .dhds-shop-loop-shell.
   Hide the theme-generated .dhh-archive-header to prevent it becoming a narrow left-side column. */
body.dhh-shop-archive.dhds-huawei-shop-archive .dhh-category-header.dhh-archive-header,
body.dhh-shop-archive.dhds-enabled .dhh-category-header.dhh-archive-header {
  display: none !important;
}

/* Also hide native WooCommerce/Astra archive description, which can appear as a side column inside Astra flex containers. */
body.dhh-shop-archive.dhds-huawei-shop-archive .woocommerce-products-header,
body.dhh-shop-archive.dhds-huawei-shop-archive .woocommerce-products-header .term-description,
body.dhh-shop-archive.dhds-enabled .woocommerce-products-header,
body.dhh-shop-archive.dhds-enabled .woocommerce-products-header .term-description {
  display: none !important;
}

/* Let the Design System archive hero be the only top hero card. */
body.dhh-shop-archive.dhds-huawei-shop-archive .dhds-shop-hero,
body.dhh-shop-archive.dhds-enabled .dhds-shop-hero {
  width: min(1180px, calc(100vw - 48px)) !important;
  margin: 48px auto 28px !important;
  box-sizing: border-box !important;
}

/* If both wrappers exist, use the Design System wrapper as the outer card and neutralise the theme wrapper inside it. */
body.dhh-shop-archive.dhds-huawei-shop-archive .dhds-shop-loop-shell,
body.dhh-shop-archive.dhds-enabled .dhds-shop-loop-shell {
  width: min(1180px, calc(100vw - 48px)) !important;
  margin: 0 auto 76px !important;
  padding: clamp(26px, 3vw, 38px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.07) !important;
  box-sizing: border-box !important;
  clear: both !important;
  overflow: visible !important;
}

body.dhh-shop-archive.dhds-huawei-shop-archive .dhds-shop-loop-shell > .dhh-shop-loop-shell,
body.dhh-shop-archive.dhds-enabled .dhds-shop-loop-shell > .dhh-shop-loop-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Prevent Astra flex container from treating archive title/description as a side column. */
body.dhh-shop-archive.dhds-huawei-shop-archive .site-content > .ast-container,
body.dhh-shop-archive.dhds-enabled .site-content > .ast-container {
  display: block !important;
  max-width: none !important;
}

/* Mobile spacing */
@media (max-width: 800px) {
  body.dhh-shop-archive.dhds-huawei-shop-archive .dhds-shop-hero,
  body.dhh-shop-archive.dhds-enabled .dhds-shop-hero,
  body.dhh-shop-archive.dhds-huawei-shop-archive .dhds-shop-loop-shell,
  body.dhh-shop-archive.dhds-enabled .dhds-shop-loop-shell {
    width: min(100% - 28px, 1180px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 22px !important;
  }
}


/* v2.2.30: Find Your Order / WooCommerce order tracking page styling */
body.page .entry-content:has(form.woocommerce-form-track-order),
body.page .entry-content:has(form.track_order) {
  width: min(1180px, calc(100vw - 48px)) !important;
  margin: 0 auto !important;
  padding: clamp(54px, 7vw, 96px) 0 clamp(70px, 8vw, 110px) !important;
  box-sizing: border-box !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) > h1,
body.page .entry-content:has(form.track_order) > h1,
body.page .entry-content:has(form.woocommerce-form-track-order) > h2,
body.page .entry-content:has(form.track_order) > h2 {
  margin: 0 0 20px !important;
  color: #111827 !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order,
body.page .entry-content:has(form.track_order) form.track_order {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 22px 28px !important;
  width: 100% !important;
  margin: 28px 0 0 !important;
  padding: clamp(28px, 4vw, 46px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order > p:first-child,
body.page .entry-content:has(form.track_order) form.track_order > p:first-child {
  grid-column: 1 / -1 !important;
  margin: 0 0 4px !important;
  color: #64748b !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order .form-row,
body.page .entry-content:has(form.track_order) form.track_order .form-row {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order label,
body.page .entry-content:has(form.track_order) form.track_order label {
  display: block !important;
  margin: 0 0 10px !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order input.input-text,
body.page .entry-content:has(form.track_order) form.track_order input.input-text,
body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order input[type="text"],
body.page .entry-content:has(form.track_order) form.track_order input[type="text"],
body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order input[type="email"],
body.page .entry-content:has(form.track_order) form.track_order input[type="email"] {
  width: 100% !important;
  height: 56px !important;
  padding: 0 20px !important;
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 16px !important;
  line-height: 56px !important;
  box-shadow: none !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order input.input-text:focus,
body.page .entry-content:has(form.track_order) form.track_order input.input-text:focus {
  border-color: #111827 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order .button,
body.page .entry-content:has(form.track_order) form.track_order .button,
body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order button.button,
body.page .entry-content:has(form.track_order) form.track_order button.button,
body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order input[type="submit"],
body.page .entry-content:has(form.track_order) form.track_order input[type="submit"] {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 26px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #07111f !important;
  background: #07111f !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order .button:hover,
body.page .entry-content:has(form.track_order) form.track_order .button:hover,
body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order button.button:hover,
body.page .entry-content:has(form.track_order) form.track_order button.button:hover,
body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order input[type="submit"]:hover,
body.page .entry-content:has(form.track_order) form.track_order input[type="submit"]:hover {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Order tracking result / order details action buttons */
body.page .entry-content .woocommerce table.shop_table a.button,
body.page .entry-content .woocommerce .order_details a.button,
body.page .entry-content .woocommerce .woocommerce-order-details a.button,
body.page .entry-content .woocommerce a.button,
body.page .entry-content .woocommerce button.button,
body.page .entry-content .woocommerce a[href*="invoice"],
body.page .entry-content .woocommerce a[href*="track"],
body.page .entry-content .woocommerce .button.track,
body.page .entry-content .woocommerce .button.invoice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  min-width: 112px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid #07111f !important;
  background: #07111f !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.page .entry-content .woocommerce table.shop_table a.button:hover,
body.page .entry-content .woocommerce .order_details a.button:hover,
body.page .entry-content .woocommerce .woocommerce-order-details a.button:hover,
body.page .entry-content .woocommerce a.button:hover,
body.page .entry-content .woocommerce button.button:hover,
body.page .entry-content .woocommerce a[href*="invoice"]:hover,
body.page .entry-content .woocommerce a[href*="track"]:hover {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  body.page .entry-content:has(form.woocommerce-form-track-order),
  body.page .entry-content:has(form.track_order) {
    width: min(100% - 28px, 1180px) !important;
    padding-top: 42px !important;
  }

  body.page .entry-content:has(form.woocommerce-form-track-order) form.woocommerce-form-track-order,
  body.page .entry-content:has(form.track_order) form.track_order {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    border-radius: 22px !important;
  }
}


/* =========================================================
   D&H v2.2.31 single product restore
   - Self-contained thumbnail carousel
   - Single add-to-basket button matches D&H styling
   - Reinforces smooth gallery follow layout
   ========================================================= */

body.dhh-single-product.dhh-product-page-v2232 div.product div.images,
body.dhh-single-product.dhh-product-page-v2232 div.product .woocommerce-product-gallery {
  overflow: visible !important;
}

body.dhh-single-product.dhh-product-page-v2232 .dhh-thumb-carousel-shell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
}

body.dhh-single-product.dhh-product-page-v2232 ol.flex-control-nav.flex-control-thumbs.dhh-thumb-carousel-track,
body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track,
body.dhh-single-product.dhh-product-page-v2232 .woocommerce-product-gallery ol.flex-control-thumbs.dhh-thumb-carousel-track {
  grid-column: 2 / 3 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 2px 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  list-style: none !important;
}

body.dhh-single-product.dhh-product-page-v2232 ol.flex-control-nav.flex-control-thumbs.dhh-thumb-carousel-track::-webkit-scrollbar,
body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track::-webkit-scrollbar {
  height: 0 !important;
}

body.dhh-single-product.dhh-product-page-v2232 ol.flex-control-nav.flex-control-thumbs.dhh-thumb-carousel-track li,
body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track li,
body.dhh-single-product.dhh-product-page-v2232 .woocommerce div.product div.images .flex-control-thumbs.dhh-thumb-carousel-track li {
  float: none !important;
  flex: 0 0 92px !important;
  width: 92px !important;
  max-width: 92px !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start !important;
}

body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track img {
  display: block !important;
  width: 92px !important;
  height: 92px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  opacity: 0.62 !important;
  transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track img.flex-active,
body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track img:hover {
  opacity: 1 !important;
  border-color: #111827 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
  transform: translateY(-1px) !important;
}

body.dhh-single-product.dhh-product-page-v2232 .dhh-thumb-carousel-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
  cursor: pointer !important;
}

body.dhh-single-product.dhh-product-page-v2232 .dhh-thumb-carousel-button:hover:not(:disabled) {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.dhh-single-product.dhh-product-page-v2232 .dhh-thumb-carousel-button:disabled {
  opacity: .28 !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Single product add-to-basket button: override Astra/global red fallback. */
html body.dhh-single-product.dhh-product-page-v2232 .summary.entry-summary form.cart button.single_add_to_cart_button,
html body.dhh-single-product.dhh-product-page-v2232 .summary.entry-summary form.cart .single_add_to_cart_button,
html body.dhh-single-product.dhh-product-page-v2232 .woocommerce div.product form.cart button.button.single_add_to_cart_button,
html body.single-product.dhh-theme .woocommerce div.product form.cart button.button.single_add_to_cart_button,
html body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt,
html body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  height: 48px !important;
  min-width: 150px !important;
  padding: 0 28px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #07111f !important;
  background: #07111f !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body.dhh-single-product.dhh-product-page-v2232 .summary.entry-summary form.cart button.single_add_to_cart_button:hover,
html body.dhh-single-product.dhh-product-page-v2232 .woocommerce div.product form.cart button.button.single_add_to_cart_button:hover,
html body.single-product.dhh-theme .woocommerce div.product form.cart button.button.single_add_to_cart_button:hover,
html body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover,
html body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

html body.dhh-single-product.dhh-product-page-v2232 .summary.entry-summary form.cart button.single_add_to_cart_button:disabled,
html body.dhh-single-product.dhh-product-page-v2232 .summary.entry-summary form.cart button.single_add_to_cart_button.disabled,
html body.dhh-single-product.dhh-product-page-v2232 .woocommerce div.product form.cart button.single_add_to_cart_button.disabled {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  transform: none !important;
}

@media (max-width: 760px) {
  body.dhh-single-product.dhh-product-page-v2232 .dhh-thumb-carousel-shell {
    grid-template-columns: 1fr !important;
  }
  body.dhh-single-product.dhh-product-page-v2232 .dhh-thumb-carousel-button {
    display: none !important;
  }
  body.dhh-single-product.dhh-product-page-v2232 ol.flex-control-nav.flex-control-thumbs.dhh-thumb-carousel-track,
  body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track {
    grid-column: 1 / -1 !important;
  }
  body.dhh-single-product.dhh-product-page-v2232 ol.flex-control-nav.flex-control-thumbs.dhh-thumb-carousel-track li,
  body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track li {
    flex-basis: 74px !important;
    width: 74px !important;
    max-width: 74px !important;
  }
  body.dhh-single-product.dhh-product-page-v2232 .flex-control-thumbs.dhh-thumb-carousel-track img {
    width: 74px !important;
    height: 74px !important;
  }
}


/* v2.2.32 Back-to-top button cleanup
   Keep the Astra/theme scroll-to-top button and hide the duplicated Elementor scroll-to-top widget/button.
   This fixes the two-layer bottom-right button where a blue Elementor arrow/button sits underneath the theme button. */
body .e-scroll-to-top,
body .e-scroll-to-top__button,
body .elementor-widget-e-scroll-to-top,
body .elementor-widget-scroll-to-top,
body .elementor-element.e-scroll-to-top,
body .elementor-element.elementor-widget-button:has(a[href="#top"]),
body .elementor-element.elementor-widget-button:has(a[href="#page"]),
body .elementor-element.elementor-widget-button:has(a[href="#masthead"]),
body .elementor-element.elementor-widget-button:has(a[href="#site-header"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Make sure the single remaining Astra/theme button stays clean and above page content. */
body #ast-scroll-top,
body .ast-scroll-top-icon {
  z-index: 99999 !important;
}
