/* iiwi storefront tweaks — loaded site-wide by the sfsfdrawerbar module.
   Home for small Hummingbird CSS overrides that have no native admin lever. */

/* ── Cart page quantity stepper ──────────────────────────────────────────
   Hummingbird's .btn-square-icon ships padding:15px 43px, which blows the +/-
   buttons up to ~111px wide; the 144px-wide input-group then wraps and the
   number field drops to a second line (looked broken). Render a compact,
   bordered [-] [ n ] [+] stepper instead. */
.product-line .quantity-button .input-group {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: auto !important;
  border: 1px solid #d8d3c8 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.product-line .quantity-button .btn.decrement,
.product-line .quantity-button .btn.increment {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #22201c !important;
  transition: background .12s ease !important;
}

.product-line .quantity-button .btn.decrement:hover,
.product-line .quantity-button .btn.increment:hover {
  background: #f1efe8 !important;
}

.product-line .quantity-button .btn .material-icons {
  font-size: 19px !important;
  line-height: 1 !important;
}

.product-line .quantity-button input.js-cart-line-product-quantity {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  text-align: center !important;
  border: 0 !important;
  border-left: 1px solid #ece9e1 !important;
  border-right: 1px solid #ece9e1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #22201c !important;
  background: #fff !important;
  -moz-appearance: textfield !important;
}

.product-line .quantity-button input.js-cart-line-product-quantity::-webkit-outer-spin-button,
.product-line .quantity-button input.js-cart-line-product-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ── Product reviews (productcomments via CE "Product Footer" block) ───────
   Strip the review block down: hide the "Anmeldelser (N) ★ (x.x)" header line
   (count + average stars) entirely, hide the per-review "report abuse" link, and
   shrink the oversized write-review button (~30% smaller: padding 15/43 → 10/30,
   font 12 → 11). #empty-product-comment padding tidies the zero-review state. */
#product-comments-list-header {
  display: none !important;
}
.report-abuse {
  display: none !important;
}
.post-product-comment,
#product-footer-review-button {
  font-size: 11px !important;
  padding: 10px 30px !important;
  line-height: 1.2 !important;
}
#empty-product-comment {
  padding-top: 0 !important;
}
/* Review title + body text down to the page body size (14px, was 16px). */
.comment__title,
.comment__text {
  font-size: 14px !important;
}

/* ── Sold-out (deny-order) products: "Se mere" instead of "Læg i kurv" ─────
   iiwi's stock model is non-standard: qty 0 + out_of_stock=1 is still SELLABLE
   (dropship, "Levering 2-6 hverdage"); only qty 0 + out_of_stock=0 is truly
   sold out. PrestaShop's native $product.flags.out_of_stock encodes exactly
   that distinction and is switched on by PS_SHOW_LABEL_OOS_LISTING_PAGES
   (Shop Parameters → Product Settings — enabled 2026-09-03; before that the
   flag never existed and every sold-out card offered a working buy button that
   dumped the customer on an empty cart with "… er ikke længere tilgængelig").
   With it on, Creative Elements renders:
     • listing / homepage cards → <button … disabled>   (its card template
       already carries {if isset($product.flags.out_of_stock)}disabled{/if})
     • product page             → <a … aria-disabled="true">
   Backorder-sellable products get neither, so they keep a working buy button.

   LISTING / HOME — relabel the dead buy button to "Se mere" and let the click
   fall through to the card's own product link: .elementor-product-link is
   absolutely positioned beneath the whole card, so taking the form out of
   hit-testing hands the click straight to it (no JS, no flash of wrong text).
   The label is CSS-injected because the button text is a single Creative
   Elements widget setting ("Læg i kurv") with no per-stock-state variant —
   editing it in the CE editor would change it for every product.

   PRODUCT PAGE — no button at all. The page already carries the "udsolgt"
   delivery line and the back-in-stock signup form, so both the CE add-to-cart
   widget and the raw fallback submit stay hidden. */
body:has(.ce-product-stock--out-of-stock) .elementor-widget-product-add-to-cart,
body:has(.ce-product-stock--out-of-stock) input.ce-add-to-cart {
  display: none !important;
}

.elementor-product-miniature .elementor-atc:has(.elementor-button:disabled) {
  pointer-events: none;
}

.elementor-product-miniature .elementor-atc .elementor-button:disabled .elementor-button-text,
.elementor-product-miniature .elementor-atc .elementor-button:disabled .elementor-button-icon {
  display: none !important;
}

.elementor-product-miniature .elementor-atc .elementor-button:disabled .elementor-button-content-wrapper::after {
  content: "Se mere";
}

/* The homepage card template (CE document 18170201) renders an out-of-stock
   BADGE from the same flag, but CE ships no background colour for
   .elementor-badge-out — it would paint white text straight onto the product
   photo. Keep it out. */
.elementor-product-miniature .elementor-badge-out {
  display: none !important;
}

/* ── Home hero background fills full width ─────────────────────────────────
   Two separate causes left a cream strip on the right of the home hero:
   (1) the hero section (element 42758768) carries a stray padding-right:20px,
       exposing 20px of its cream background down the right edge; and
   (2) the column background image (Dealicious 2.webp, 1536px) is drawn at
       natural size (background-size:auto), left-anchored, so on screens wider
       than the image the rest of the column is empty.
   Zero the right padding and force cover so the image fills the column at any
   width. Position stays left (Elementor's own rule) — keeps open wall space
   under the headline. Editing via CE column "Custom CSS" doesn't work here:
   `selector` targets the column wrapper, not the inner .elementor-column-wrap
   that actually holds the background, and it can't reach the section padding. */
.elementor-element-42758768 {
  padding-right: 0 !important;
}
.elementor-element-218cdba1 > .elementor-column-wrap.elementor-element-populated {
  background-size: cover !important;
}

/* ── Category page H1 (SEO) ────────────────────────────────────────────────
   The CE listing-category template dropped Hummingbird's stock <h1>, so the
   category name never appeared as a heading. sfsfdrawerbar hookDisplayWrapperTop
   renders it above the product grid; styled here to sit quietly with the design. */
.sfsf-category-title {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: .02em;
  margin: 18px auto 6px;
  color: #22201c;
}

/* ── CE Product Stock widget (delivery line under Læg i kurv) ──────────────
   Spacing between the checkmark icon and the "Levering: X hverdage" label.
   FontAwesome's SVG-JS loader replaces the <i> with an inline <svg> after
   page load, so the rule must target both. (The broken icon on in-stock
   products — FA5's dashed "missing icon" placeholder for the unknown FA6
   name fa-circle-check — is fixed in storefront.js, not here.) */
.ce-product-stock__availability i,
.ce-product-stock__availability svg {
  margin-right: 7px;
}

/* ── Scroll-to-top button ──────────────────────────────────────────────────
   Injected into <body> by storefront.js (mountScrollTop). Hidden until the
   page is scrolled past ~400px, then fades in. Bottom offset is bumped on
   mobile so it clears any sticky bottom UI. */
#sfsf-scroll-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #22201c;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .12s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  z-index: 999;
}
#sfsf-scroll-top:hover { background: #3a362f; }
#sfsf-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#sfsf-scroll-top svg { display: block; }
@media (max-width: 767px) {
  #sfsf-scroll-top { right: 14px; bottom: 80px; }
}

/* --- Checkout: hide OPC's password-suggestion popover (2026-07-30) ---------
   The hint text ("Add more words that are less common." etc.) comes from
   PrestaShop core's bundled @zxcvbn-ts ENGLISH pack inside a compiled webpack
   chunk (themes/<hash>-chunk.js). It never passes through PrestaShop's
   translation system, so it cannot be translated in the back office — hidden
   rather than shown in English on a Danish checkout.
   Kept deliberately visible: .password-strength-feedback (the strength bar and
   the Danish "Adgangskoden opfylder ikke sikkerhedskravene" message), which is
   a separate element built by OPC's front.js.
   NB: an OPC-native switch OPC_SHOW_PASSWORD_POLICY_RECOMMENDATIONS also
   exists, but it removes the whole widget (bar included), not just this popover. */
.opc-password-popover,
.opc-password-popover-below {
  display: none !important;
}

/* Checkout (/ordre, One Page Checkout): hide the navy "Kurv ⌄ 1.544,00 kr." toggle
   bar that OPC puts at the top on mobile (<992px). The full order summary is
   still shown at the payment step ("Total · N items" with expand). Kept here,
   not in OPC's Code Editors, so it survives OPC updates. */
#opc_main .cart-trigger-row { display: none !important; }