/* ============================================================
   Smart Home Life — WooCommerce + UI fixes
   Loaded as a real CSS file (not inline PHP) so it never
   conflicts with any shl-fixes plugin that may still be active.
   ============================================================ */

/* ── WooCommerce block — transparent product-image overlay ──── */
.wc-block-components-product-image,
.wc-block-components-product-image > a { background: transparent !important; }
.wc-block-components-product-image__inner-container {
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* ── Block Cart — larger image column ──────────────────────── */
.wc-block-cart-items__header .wc-block-cart-items__header-image {
  width: 120px !important; min-width: 120px !important;
}
.wc-block-cart-item .wc-block-cart-item__image {
  width: 120px !important; min-width: 120px !important;
  padding-right: 20px !important;
}
.wc-block-cart-item__image .wc-block-components-product-image {
  width: 100px !important; height: 100px !important;
  border-radius: 14px !important; overflow: hidden !important;
  background: var(--bg-raised, #e8e8ed) !important;
}
.wc-block-cart-item__image .wc-block-components-product-image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}

/* ── Block Cart — product name + price ─────────────────────── */
.wc-block-components-product-name,
.wc-block-components-product-name a {
  font-size: 15px !important; font-weight: 700 !important;
  line-height: 1.35 !important; text-decoration: none !important;
}
.wc-block-components-product-price .woocommerce-Price-amount {
  font-size: 15px !important; font-weight: 600 !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .wc-block-cart-items__header .wc-block-cart-items__header-image,
  .wc-block-cart-item .wc-block-cart-item__image {
    width: 88px !important; min-width: 88px !important;
    padding-right: 14px !important;
  }
  .wc-block-cart-item__image .wc-block-components-product-image {
    width: 72px !important; height: 72px !important;
  }
  .wc-block-components-product-name,
  .wc-block-components-product-name a { font-size: 13px !important; }
}

/* ── Checkout dark mode — explicit toggle ─────────────────── */
:root[data-theme="dark"] .wc-block-components-text-input input,
:root[data-theme="dark"] .wc-block-components-text-input textarea,
:root[data-theme="dark"] .wc-blocks-components-select__container,
:root[data-theme="dark"] .wc-blocks-components-select select,
:root[data-theme="dark"] .wc-block-components-country-input input,
:root[data-theme="dark"] .wc-block-components-state-input input,
:root[data-theme="dark"] .wc-block-checkout__add-note textarea {
  background: var(--bg-surface, #1a2833) !important;
  background-color: var(--bg-surface, #1a2833) !important;
  color: var(--text-primary, #f5f5f7) !important;
  border-color: var(--stroke-subtle, rgba(255,255,255,.12)) !important;
}
:root[data-theme="dark"] .wc-block-components-text-input label,
:root[data-theme="dark"] .wc-blocks-components-select label,
:root[data-theme="dark"] .wc-block-components-form label {
  color: var(--text-secondary, rgba(245,245,247,.65)) !important;
}
:root[data-theme="dark"] .wc-block-components-text-input input::placeholder,
:root[data-theme="dark"] .wc-block-components-text-input textarea::placeholder {
  color: var(--text-tertiary, rgba(245,245,247,.35)) !important;
}

/* ── Checkout dark mode — OS-level preference ─────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wc-block-components-text-input input,
  :root:not([data-theme="light"]) .wc-block-components-text-input textarea,
  :root:not([data-theme="light"]) .wc-blocks-components-select__container,
  :root:not([data-theme="light"]) .wc-blocks-components-select select,
  :root:not([data-theme="light"]) .wc-block-components-country-input input,
  :root:not([data-theme="light"]) .wc-block-components-state-input input,
  :root:not([data-theme="light"]) .wc-block-checkout__add-note textarea {
    background: var(--bg-surface, #1a2833) !important;
    background-color: var(--bg-surface, #1a2833) !important;
    color: var(--text-primary, #f5f5f7) !important;
    border-color: var(--stroke-subtle, rgba(255,255,255,.12)) !important;
  }
  :root:not([data-theme="light"]) .wc-block-components-text-input label,
  :root:not([data-theme="light"]) .wc-blocks-components-select label,
  :root:not([data-theme="light"]) .wc-block-components-form label {
    color: var(--text-secondary, rgba(245,245,247,.65)) !important;
  }
  :root:not([data-theme="light"]) .wc-block-components-text-input input::placeholder,
  :root:not([data-theme="light"]) .wc-block-components-text-input textarea::placeholder {
    color: var(--text-tertiary, rgba(245,245,247,.35)) !important;
  }
}

/* ── Guide paid-card images — absolute fill, beats WC height:auto ── */
/*
   The inline CSS in page-guides.php sets aspect-ratio:1/1 on .guide-paid-card__img.
   WooCommerce's global "img { height: auto }" defeats height:100% on the child.
   Fix: position:relative + padding-bottom:100% (height:0) container.
   Gradient ::after fades the white bottom of cover-art images into the card background.
*/
.guide-paid-card__img {
  position: relative !important;
  padding-bottom: 100% !important;
  height: 0 !important;
  overflow: hidden !important;
  /* match card surface so any image gap is invisible in both light + dark */
  background: var(--bg-surface, #111827) !important;
  aspect-ratio: unset !important;
}
.guide-paid-card__img img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  z-index: 0 !important;
  transition: transform 0.22s ease !important;
}
.guide-paid-card:hover .guide-paid-card__img img {
  transform: scale(1.04) !important;
}
/* Gradient overlay: fades the white bottom strip on guide cover art into
   the card background. Invisible in light mode (white→transparent).
   Hides the white band in dark mode. */
.guide-paid-card__img::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 30% !important;
  background: linear-gradient(to top, var(--bg-surface, #111827), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Guide paid-card button — full-width red pill (matches cart-empty style).
   WC JS may append add_to_cart_button / loading / added_to_cart classes.
   Force red + full-width regardless of WC or cascade. */
.guide-paid-card__btn,
.guide-paid-card__btn.button,
.guide-paid-card__btn.add_to_cart_button,
.guide-paid-card__btn.added_to_cart,
.guide-paid-card__btn.added,
.guide-paid-card__btn.loading {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 10px 16px !important;
  background: #f55139 !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  letter-spacing: .01em !important;
  margin-top: auto !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px -4px rgba(245,81,57,.4) !important;
  transition: opacity .15s ease, transform .15s ease !important;
}
.guide-paid-card__btn:hover,
.guide-paid-card__btn.button:hover,
.guide-paid-card__btn.add_to_cart_button:hover,
.guide-paid-card__btn.added_to_cart:hover,
.guide-paid-card__btn.added:hover {
  opacity: .88 !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ── Cart-empty page: shl-guide-card cards ──────────────────── */
.shl-cart-empty { display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 24px 48px;gap:16px; }
.shl-cart-empty__title { font-size:var(--type-xl,1.5rem);font-weight:700;color:var(--text-primary);margin:0; }
.shl-cart-empty__sub   { font-size:var(--type-sm,14px);color:var(--text-secondary);margin:0;max-width:320px; }
.shl-new-in-store { padding:0 0 80px; }
.shl-new-in-store__header { display:flex;align-items:baseline;gap:12px;margin-bottom:24px; }
.shl-new-in-store__eyebrow { font-size:var(--type-xs,11px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent); }
.shl-new-in-store__title { font-size:var(--type-2xl,1.75rem);font-weight:800;color:var(--text-primary);letter-spacing:-.02em;margin:0; }
.shl-guide-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px; }
.shl-guide-card { background:var(--bg-surface);border:1px solid var(--stroke-subtle);border-radius:var(--radius-2xl,20px);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease; }
.shl-guide-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.18); }

/* shl-guide-card image — absolute-fill + gradient fade so white-bottomed
   cover art blends into the card background in dark mode. */
.shl-guide-card__img {
  position: relative !important;
  padding-bottom: 100% !important;
  height: 0 !important;
  overflow: hidden !important;
  /* match the card surface so any image gap is invisible */
  background: var(--bg-surface, #111827) !important;
  aspect-ratio: unset !important;
}
.shl-guide-card__img img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  z-index: 0 !important;
}
/* Gradient overlay: fades the bottom of the cover art into the card background.
   In light mode this is white→transparent (invisible).
   In dark mode this hides the white bottom strip on guide cover images. */
.shl-guide-card__img::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 30% !important;
  background: linear-gradient(to top, var(--bg-surface, #111827), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.shl-guide-card__body { padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1; }
.shl-guide-card__name  { font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.3;margin:0; }
.shl-guide-card__price { font-size:14px;font-weight:600;color:var(--text-secondary);margin:0; }
/* Full-width red pill — matches the guides-page card buttons */
.shl-guide-card__btn,
.shl-guide-card__btn.button,
.shl-guide-card__btn.add_to_cart_button,
.shl-guide-card__btn.added_to_cart,
.shl-guide-card__btn.added {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 10px 16px !important;
  background: #f55139 !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  margin-top: auto !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px -4px rgba(245,81,57,.4) !important;
  transition: opacity .15s ease, transform .15s ease !important;
}
.shl-guide-card__btn:hover,
.shl-guide-card__btn.button:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
}

/* ── WooCommerce loop product cards ─────────────────────────── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-surface, #111827) !important;
  border: 1px solid var(--stroke-subtle, rgba(255,255,255,.08)) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Image link — square crop using padding-bottom technique so WC
   "img { height: auto }" cannot create a white bar at the bottom. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
  display: block !important;
  position: relative !important;
  padding-bottom: 100% !important;
  height: 0 !important;
  overflow: hidden !important;
  background: #0d1117 !important;
  line-height: 0 !important;
  /* clear aspect-ratio if it was set elsewhere */
  aspect-ratio: unset !important;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title a {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary, #f5f5f7) !important;
  text-decoration: none !important;
  padding: 14px 16px 0 !important;
  flex: 1 !important;
  line-height: 1.35 !important;
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  padding: 14px 16px 0 !important;
  flex: 1 !important;
  margin: 0 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-secondary, rgba(245,245,247,.65)) !important;
  padding: 4px 16px 0 !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }

/* Add to Cart button — red pill */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .wp-element-button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product .wp-element-button,
.woocommerce-page ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 12px 16px 16px !important;
  padding: 10px 16px !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: opacity .15s ease !important;
  box-shadow: 0 4px 16px -4px rgba(245,81,57,.45) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .wp-element-button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .wp-element-button:hover {
  opacity: .88 !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
}
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .button.added {
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
  opacity: .72 !important;
}

/* "View cart →" link that WC injects after add-to-cart in the loop.
   Override the inherited red-pill button styles so it reads as a
   compact text link, not a second stacked button. */
.woocommerce ul.products li.product a.added_to_cart.wc-forward,
.woocommerce-page ul.products li.product a.added_to_cart.wc-forward {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 0 16px 14px !important;
  padding: 5px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--accent, #f55139) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.woocommerce ul.products li.product a.added_to_cart.wc-forward:hover,
.woocommerce-page ul.products li.product a.added_to_cart.wc-forward:hover {
  text-decoration: underline !important;
  opacity: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  transform: none !important;
}

/* ── Related products — breathing room above the section ────── */
.related.products {
  margin-top: 60px !important;
  clear: both !important;
}
.related.products > h2 {
  margin-bottom: 28px !important;
}

/* ── WooCommerce single product gallery — square crop ───────── */
/*
   Same padding-bottom technique here so the gallery image fills
   the square perfectly and the dark "border" from an unfilled
   aspect-ratio container disappears.
*/
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  position: relative !important;
  padding-bottom: 100% !important;
  height: 0 !important;
  overflow: hidden !important;
  background: #0d1117 !important;
  border-radius: 16px !important;
  /* clear any aspect-ratio set by theme or WC */
  aspect-ratio: unset !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  display: block !important;
  line-height: 0 !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a img,
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* Zoom trigger — light frosted-glass pill so it's easy to see
   over both bright and dark product images. */
.woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 12px !important; right: 12px !important;
  z-index: 9 !important;
  background: rgba(255,255,255,.22) !important;
  border-radius: 50% !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.woocommerce-product-gallery__trigger img {
  /* WC renders the trigger as an <a> containing an <img> of a magnifier icon.
     Make sure it's visible on both light and dark backgrounds. */
  filter: invert(1) !important;
  opacity: .85 !important;
}

/* ── Home page story — phone mockup ─────────────────────────── */
.story__visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.shl-phone {
  position: relative;
  z-index: 1;
  width: min(60%, 190px);
  background: linear-gradient(180deg, #1c2d40 0%, #0f1925 100%);
  border-radius: 30px;
  border: 1.5px solid rgba(255,255,255,.13);
  overflow: hidden;
  box-shadow: 0 40px 80px -16px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(255,255,255,.07);
}
.shl-phone__chrome {
  background: #060e18;
  padding: 10px 0 8px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.shl-phone__cam {
  display: inline-block;
  width: 40px; height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
}
.shl-phone__screen { padding: 10px 10px 14px; }
.shl-phone__topbar { text-align: center; margin-bottom: 10px; }
.shl-phone__brand {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent, #f55139);
}
.shl-phone__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 8px;
}
.shl-phone__tile {
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.shl-phone__tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.shl-phone__tile-name {
  font-size: 6.5px;
  font-weight: 700;
  color: rgba(245,245,247,.82);
  padding: 4px 5px 5px;
  line-height: 1.3;
}
.shl-phone__stat {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  background: rgba(245,81,57,.12);
  border-radius: 8px;
  border: 1px solid rgba(245,81,57,.22);
}
.shl-phone__stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent, #f55139);
  line-height: 1;
}
.shl-phone__stat-label {
  font-size: 6.5px;
  font-weight: 600;
  color: rgba(245,245,247,.6);
  line-height: 1.4;
}

/* ── WooCommerce notices — on-brand ─────────────────────────── */
.woocommerce-notices-wrapper { margin-bottom: 20px !important; }
.woocommerce-notices-wrapper ul,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
ul.woocommerce-error { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; }

.woocommerce-message,
ul.woocommerce-error,
.woocommerce-info {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border-width: 1px !important;
  border-style: solid !important;
  margin: 0 0 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  color: var(--text-primary, #1d1d1f) !important;
  line-height: 1.5 !important;
}
ul.woocommerce-error li {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.woocommerce-message {
  background: rgba(245, 81, 57, 0.07) !important;
  border-color: rgba(245, 81, 57, 0.28) !important;
}
ul.woocommerce-error {
  background: rgba(220, 53, 53, 0.07) !important;
  border-color: rgba(220, 53, 53, 0.28) !important;
}
.woocommerce-info {
  background: var(--bg-surface, #f5f5f7) !important;
  border-color: var(--stroke-subtle, rgba(0,0,0,.12)) !important;
}

/* Hide the WooCommerce icon-font checkmark that overlaps notice text
   in our custom flex notice layout. */
.woocommerce-message::before {
  display: none !important;
}

.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message a.wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  order: 2 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  margin-left: auto !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  transition: opacity 0.15s ease !important;
  flex-shrink: 0 !important;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-message a.wc-forward:hover { opacity: 0.85 !important; }

.woocommerce-message > svg,
.woocommerce-message > .woocommerce-message__icon,
.woocommerce-message > span[class*="icon"],
.woocommerce-message > .wc-block-components-spinner {
  order: 0 !important;
  flex-shrink: 0 !important;
  width: 18px !important; height: 18px !important;
  min-width: 18px !important; max-width: 18px !important;
}
.wc-block-components-notice-snackbar,
.wc-block-store-notices .wc-block-components-notice-snackbar {
  background: rgba(245, 81, 57, 0.1) !important;
  border: 1px solid rgba(245, 81, 57, 0.3) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary, #f5f5f7) !important;
  padding: 12px 16px !important;
}
.wc-block-components-notice-snackbar__dismiss-action { color: var(--accent, #f55139) !important; }

:root[data-theme="dark"] .woocommerce-message { background: rgba(245, 81, 57, 0.12) !important; }
:root[data-theme="dark"] ul.woocommerce-error { background: rgba(220, 53, 53, 0.12) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .woocommerce-message { background: rgba(245, 81, 57, 0.12) !important; }
  :root:not([data-theme="light"]) ul.woocommerce-error { background: rgba(220, 53, 53, 0.12) !important; }
}

/* ── Email gate overlay ─────────────────────────────────────── */
body.shl-gated main { filter: blur(10px); pointer-events: none; user-select: none; }
body.shl-gated .nav { z-index: 998; }
.shl-gate {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 18, 26, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.shl-gate__card {
  width: 100%; max-width: 460px;
  background: var(--bg-surface, #f5f5f7);
  border: 1px solid var(--stroke-subtle, rgba(0,0,0,.1));
  border-radius: 24px; padding: 40px 36px 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,.45); text-align: center;
}
:root[data-theme="dark"] .shl-gate__card { background: var(--bg-raised, #1a2833); border-color: var(--stroke-subtle, rgba(255,255,255,.1)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shl-gate__card { background: var(--bg-raised, #1a2833); border-color: var(--stroke-subtle, rgba(255,255,255,.1)); }
}
.shl-gate__badge { display:inline-flex;align-items:center;padding:3px 10px;background:rgba(245,81,57,.14);color:var(--accent,#f55139);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:16px; }
.shl-gate__title { font-size:clamp(1.25rem,4vw,1.65rem);font-weight:800;color:var(--text-primary,#1d1d1f);letter-spacing:-.02em;line-height:1.2;margin:0 0 12px; }
.shl-gate__sub { font-size:14px;color:var(--text-secondary,#6e6e73);line-height:1.6;margin:0 auto 28px;max-width:34ch; }
.shl-gate__form { display:flex;flex-direction:column;gap:12px; }
.shl-gate__input { width:100%;padding:13px 16px;border:1.5px solid var(--stroke-subtle,rgba(0,0,0,.15));border-radius:12px;font-size:15px;color:var(--text-primary,#1d1d1f);background:var(--bg-canvas,#fff);outline:none;font-family:inherit;box-sizing:border-box;transition:border-color .15s ease; }
.shl-gate__input:focus { border-color:var(--accent,#f55139); }
.shl-gate__btn { display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;background:var(--accent,#f55139);color:#fff;border:none;border-radius:999px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;letter-spacing:-.01em;transition:opacity .15s ease,transform .15s ease;box-shadow:0 6px 24px -6px rgba(245,81,57,.55); }
.shl-gate__btn:hover { opacity:.88;transform:translateY(-1px); }
.shl-gate__fine { font-size:12px;color:var(--text-tertiary,#aeaeb2);margin-top:16px;line-height:1.5; }
.shl-gate__back { display:block;font-size:13px;color:var(--text-tertiary,#aeaeb2);text-decoration:none;margin-top:18px;transition:color .15s ease; }
.shl-gate__back:hover { color:var(--text-secondary,#6e6e73); }
@media (max-width: 480px) { .shl-gate__card { padding: 32px 24px 28px; } }

/* ── Amazon purchase unlock — floating banner ────────────────── */
#shl-unlock-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 48px));
  z-index: 9990;
  width: min(560px, calc(100vw - 24px));
  background: var(--bg-surface, #111827);
  border: 1px solid var(--stroke-subtle, rgba(255,255,255,.12));
  border-top: 3px solid var(--accent, #f55139);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(.25,.46,.45,.94), opacity 0.38s ease;
}
#shl-unlock-banner.shl-unlock-banner--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.shl-unlock-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.shl-unlock-banner__icon { font-size: 22px; flex-shrink: 0; }
.shl-unlock-banner__body { flex: 1; min-width: 0; }
.shl-unlock-banner__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #f5f5f7);
  margin: 0 0 2px;
  line-height: 1.3;
}
.shl-unlock-banner__sub {
  font-size: 12px;
  color: var(--text-secondary, rgba(245,245,247,.65));
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shl-unlock-banner__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--accent, #f55139);
  color: #fff !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s ease;
}
.shl-unlock-banner__cta:hover { opacity: .88; }
.shl-unlock-banner__close {
  background: none;
  border: none;
  color: var(--text-tertiary, rgba(245,245,247,.4));
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  transition: color .15s ease;
}
.shl-unlock-banner__close:hover { color: var(--text-secondary); }
@media (max-width: 520px) {
  .shl-unlock-banner__inner { flex-wrap: wrap; gap: 8px; }
  .shl-unlock-banner__body  { order: 1; flex-basis: calc(100% - 46px); }
  .shl-unlock-banner__icon  { order: 0; }
  .shl-unlock-banner__close { order: 0; margin-left: auto; }
  .shl-unlock-banner__cta   { order: 2; flex: 1; justify-content: center; }
}

/* ── Amazon perk callout on device detail pages ───────────────── */
.shl-amazon-perk {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 11px 14px;
  background: rgba(245, 81, 57, 0.08);
  border: 1px solid rgba(245, 81, 57, 0.22);
  border-radius: 12px;
  line-height: 1.4;
}
.shl-amazon-perk__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.shl-amazon-perk__body {
  flex: 1;
  min-width: 0;
}
.shl-amazon-perk__headline {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1d1d1f);
  margin-bottom: 1px;
}
.shl-amazon-perk__sub {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #6e6e73);
}
.shl-amazon-perk__cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--accent, #f55139);
  color: #fff !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s ease;
  box-shadow: 0 3px 10px -3px rgba(245,81,57,.45);
}
.shl-amazon-perk__cta:hover { opacity: .88; }
@media (max-width: 480px) {
  .shl-amazon-perk { flex-wrap: wrap; }
  .shl-amazon-perk__icon { order: 0; }
  .shl-amazon-perk__body { order: 1; flex-basis: calc(100% - 40px); }
  .shl-amazon-perk__cta  { order: 2; flex: 1; justify-content: center; }
}

/* ── WooCommerce cross-sells on the filled cart page ─────────── */
/* The cross-sells section sits inside the classic cart and its   */
/* buttons can inherit darker default WC styles. Force red pill.  */
.cross-sells ul.products li.product .button,
.cross-sells ul.products li.product .add_to_cart_button,
.cross-sells ul.products li.product .wp-element-button,
.woocommerce .cross-sells ul.products li.product .button,
.woocommerce .cross-sells ul.products li.product .add_to_cart_button,
.woocommerce-cart .cross-sells ul.products li.product .button,
.woocommerce-cart .cross-sells ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 12px 16px 16px !important;
  padding: 10px 16px !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: opacity .15s ease !important;
  box-shadow: 0 4px 16px -4px rgba(245,81,57,.45) !important;
}
.cross-sells ul.products li.product .button:hover,
.cross-sells ul.products li.product .add_to_cart_button:hover,
.woocommerce .cross-sells ul.products li.product .button:hover,
.woocommerce .cross-sells ul.products li.product .add_to_cart_button:hover {
  opacity: .88 !important;
  background: var(--accent, #f55139) !important;
  background-color: var(--accent, #f55139) !important;
  color: #fff !important;
}
/* "View cart →" text link after adding from cross-sells */
.cross-sells ul.products li.product a.added_to_cart.wc-forward {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 0 16px 14px !important;
  padding: 5px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--accent, #f55139) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}