/*
 * Caiser Theme — clean, fast PS8 child theme
 *
 * Design DNA:
 *   - Cleeoloi B2C: magenta accent, dark header/footer
 *   - brand base: Montserrat, pill buttons, rounded corners, premium feel
 *   - B2B: clean, professional, functional
 *
 * NOTE: This file loads AFTER classic/theme.css (priority 300).
 *   Parent uses normal specificity (#header .header-nav etc), no !important.
 *   We match or exceed specificity — no !important needed except vs Bootstrap.
 */

/* ===========================
   1. FONTS
   =========================== */

/* @import disabled — TASK-169 prod redo (regression from later deploys) */

/* TASK-223 font diet — self-host Manrope woff2 to override classic/theme.css.
 * Classic ships each weight as woff2 + woff + OTF (3 files × 7 weights = 21 src refs).
 * We only need woff2 in 2026 (Chrome 36+/FF 39+/Safari 12+/Edge 14+ all OK).
 * Caiser CSS loads AFTER classic in the bundle → these @font-face declarations win
 * the cascade for font-family "Manrope" + the same weight, so classic's woff/OTF URLs
 * are never fetched by the browser. Saves ~282 KB woff + ~200 KB OTF cold-load. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/Manrope-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Manrope-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Manrope-800.woff2') format('woff2');
}

/* TASK-223 font diet — self-host a SUBSET Material Icons woff2 (only the ~85
 * icons actually used across PS classic + caiser + frontoffice modules).
 *
 * Why not just keep <svg> inlines: the swap broke every `i` tag selector in
 * classic + PS modules (e.g. `#search_widget form i { position:absolute }`)
 * and added an open-ended maintenance tax — every future PS / module update
 * that ships <i class="material-icons"> would need a new override.
 *
 * Why not the full 60 KB font: 1000+ icon glyphs we'll never render.
 *
 * Subset built by `tools/material-icons/build-subset.py` (custom fontTools
 * script — pyftsubset's default closure preserves the entire GSUB ligature
 * table at 50 KB+ even with one icon; we trim GSUB ligatures down to only
 * rules that resolve to glyphs we want).
 *
 * Result: 4.1 KB woff2 with full ligature-name support, so `<i class=
 * "material-icons">close</i>` continues to render the close glyph natively.
 * Overrides classic's @font-face (caiser CSS loads later in the bundle). */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/MaterialIcons-subset.woff2') format('woff2');
}

/* ===========================
   2. CSS VARIABLES
   =========================== */

:root {
  /* Overridden by Caiser Theme Editor module when installed */
  --caiser-primary: #e5159b;
  --caiser-primary-hover: #c8108a;
  --caiser-header-bg: #1a1a1a;
  --caiser-header-text: #ffffff;
  --caiser-footer-bg: #1a1a1a;
  --caiser-footer-text: #999999;
  --caiser-dark: #1a1a1a;
  --caiser-text: #232323;
  --caiser-text-light: #666;
  --caiser-bg: #fff;
  --caiser-bg-alt: #f5f5f5;
  --caiser-input-bg: #ededed;
  --caiser-border: #ddd;
  --caiser-success: #4cbb6c;
  --caiser-error: #ff4c4c;
  --caiser-radius: 0.5rem;
  --caiser-radius-lg: 1rem;
  --caiser-radius-pill: 10rem;
  --caiser-btn-radius: 10rem;
  --caiser-container-max-width: 1440px;
  --caiser-products-per-row: 4;
  --caiser-products-per-row-tablet: 3;
  --caiser-products-per-row-mobile: 2;
  --caiser-title-lines: 3;
  --caiser-font-family: 'Montserrat', sans-serif;

  /* Brand surface tokens consumed by the caiserajaxcart module
     (TASK-170 extraction). Module CSS reads these via var(...) with
     hardcoded fallbacks, so the module works standalone on themes
     that don't define them. */
  --caiser-cart-pulse-color: #e5159b;
  --caiser-cart-shake-color: #c0392b;
  --caiser-cart-anim-duration: 0.6s;
}

/* ===========================
   3. GLOBAL
   =========================== */

body,
body#checkout {
  font-family: var(--caiser-font-family);
  color: var(--caiser-text);
  background: var(--caiser-bg);
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap .container uses !important in media queries, so width/max-width still need it.
 * A-108: padding split by viewport — desktop+ keeps the 20px theme gutter; mobile falls
 * through to Bootstrap's default 15px (cleaner than overriding with !important unconditionally). */
.container {
  width: 100% !important;
  max-width: var(--caiser-container-max-width) !important;
}
@media (min-width: 576px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Product grid: override Bootstrap col classes (they use !important) */
.products .js-product.product {
  flex: 0 0 calc(100% / var(--caiser-products-per-row)) !important;
  max-width: calc(100% / var(--caiser-products-per-row)) !important;
}

@media (max-width: 1199px) {
  .products .js-product.product {
    flex: 0 0 calc(100% / var(--caiser-products-per-row-tablet)) !important;
    max-width: calc(100% / var(--caiser-products-per-row-tablet)) !important;
  }
}

@media (max-width: 767px) {
  .products .js-product.product {
    flex: 0 0 calc(100% / var(--caiser-products-per-row-mobile)) !important;
    max-width: calc(100% / var(--caiser-products-per-row-mobile)) !important;
  }
}

a {
  color: var(--caiser-text);
}

/* Parent: #header .top-menu a[data-depth="0"]:hover,a:hover{color:#24b9d7}
   and: #header a:hover{color:#24b9d7}
   The comma in the parent makes a:hover global. We must match + beat both. */
a:hover,
#header a:hover,
#header .top-menu a[data-depth="0"]:hover {
  color: var(--caiser-primary);
  text-decoration: none;
}

/* ===========================
   4. HEADER
   =========================== */

/* Parent: #header{background:#fff} */
#header {
  background: var(--caiser-header-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: var(--caiser-header-text);
}

/* -- header-nav: thin utility bar (language only) --
   Parent: #header .header-nav{max-height:50px;border-bottom:#f6f6f6 2px solid} */
#header .header-nav {
  background: var(--caiser-header-bg);
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  padding: 0.15rem 0;
  max-height: none;
}

#header .header-nav .header-nav-desktop {
  display: flex;
  justify-content: flex-end;
}

#header .header-nav .header-nav-desktop .right-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#header .header-nav .language-selector-wrapper {
  font-size: 0.75rem;
}

#header .header-nav a,
#header .header-nav span,
#header .header-nav .material-icons {
  color: var(--caiser-header-text);
}

/* Classic ships #header .header-nav #menu-icon .material-icons{line-height:50px}
   which inflates the icon's inline box and fights the wrapper's flex centering.
   Neutralize so all three mobile-header icons rely on flex centering only. */
#header .header-nav #menu-icon .material-icons {
  line-height: 1;
}

/* Cart badge styling, fly-to-cart animation, success pulse, error shake,
   and ps_shoppingcart bubble override moved to the caiserajaxcart module
   (TASK-170). See ps-modules/caiserajaxcart/views/css/caiserajaxcart.css. */

/* Mobile header row: switch from float-based to flex so hamburger,
   logo, user, cart vertically center on the same line (floats can't
   use vertical-align so they were baseline-anchored to the logo). */
@media (max-width: 991px) {
  #header .header-nav .mobile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
  }
  /* Normalize all three icon wrappers to the same 50px box with
     internal centering, so the parent's align-items:center lines
     them up exactly (otherwise wrappers with mismatched heights
     — user-info 24px vs cart 52px vs hamburger 50px — would each
     center at slightly different baselines). */
  #header .header-nav .mobile #menu-icon,
  #header .header-nav .mobile #_mobile_user_info,
  #header .header-nav .mobile #_mobile_cart {
    height: 50px;
    display: flex;
    align-items: center;
    float: none !important;
  }
  #header .header-nav .mobile #menu-icon {
    order: 0;
  }
  #header .header-nav .mobile #_mobile_logo {
    order: 1;
    flex: 1;
    min-width: 0;
  }
  #header .header-nav .mobile #_mobile_user_info {
    order: 2;
  }
  #header .header-nav .mobile #_mobile_cart {
    order: 3;
  }
  #header .header-nav .mobile #_mobile_search {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
  }
  #header .header-nav .mobile .clearfix {
    display: none;
  }
}

/* Parent: #header .header-nav .user-info{margin-top:.9375rem} etc. */
#header .header-nav .user-info,
#header .header-nav .language-selector {
  margin-top: 0;
}

/* -- header-top: logo + search + actions --
   Parent: #header .header-top{padding:1.25rem 0} */
#header .header-top {
  background: var(--caiser-header-bg);
  padding: 0.75rem 0;
}

#header .header-top a,
#header .header-top span,
#header .header-top .material-icons {
  color: var(--caiser-header-text);
}

/* Parent: #header a:hover{color:#24b9d7} */
#header .header-nav a:hover,
#header .header-top a:hover {
  color: var(--caiser-primary);
}

#header .header-top .menu,
#header .header-top .position-static {
  background: transparent;
}

/* Actions group: accedi + cart — aligned right */
#header .header-top .header-top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

/* Language selector lives in header-nav now, hide duplicate from displayNav2 */
#header .header-top-actions .language-selector-wrapper,
#header .header-top-actions .currency-selector {
  display: none;
}

/* Parent: #header .logo{max-width:100%;height:auto} */
#header .logo {
  max-height: 50px;
  width: auto;
}

/* Search bar
   Module ps_searchbar uses ID: #search_widget{float:right;min-width:16.5rem} at 992px+
   We need ID in selector to match specificity. */
#header #_desktop_search {
  display: flex;
  align-items: center;
  flex: 1;
}

/* Parent: .search-widget{display:inline-block} — makes it shrink-to-fit.
   Module: #search_widget{float:right;min-width:16.5rem} at 992px+.
   We use both class and ID selectors for safety. */
#header .header-top #search_widget,
#header .header-top .search-widgets {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  float: none;
  margin-bottom: 0;
  overflow: visible;
}

#header .header-top #search_widget form,
#header .header-top .search-widgets form {
  width: 100%;
}

#header .header-top #search_widget form input[type="text"],
#header .header-top .search-widgets form input[type="text"] {
  background: rgba(128, 128, 128, 0.1);
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: var(--caiser-radius-pill);
  color: var(--caiser-header-text);
  padding: 0.5rem 1rem 0.5rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

#header .header-top #search_widget form input[type="text"]::placeholder,
#header .header-top .search-widgets form input[type="text"]::placeholder {
  color: rgba(128, 128, 128, 0.5);
}

#header .header-top #search_widget form input[type="text"]:focus,
#header .header-top .search-widgets form input[type="text"]:focus {
  background: rgba(128, 128, 128, 0.15);
}

#header .header-top #search_widget form button[type="submit"],
#header .header-top .search-widgets form button[type="submit"] {
  color: var(--caiser-header-text);
}

/* Parent: #header .header-nav .blockcart{background:#f6f6f6;height:3rem;padding:.75rem} */
#header .header-nav .blockcart,
#header .header-top .blockcart {
  background: transparent;
  margin-left: 0;
  height: auto;
  padding: 0;
}

#header .blockcart .header {
  color: var(--caiser-header-text);
}

/* Parent: #header .header-nav .blockcart a,.account-list a{color:#7a7a7a} */
#header .header-nav .blockcart a,
#header .header-top .blockcart a {
  color: var(--caiser-header-text);
}

/* Parent: #header .header-nav .blockcart a:hover{color:#24b9d7} */
#header .header-nav .blockcart a:hover,
#header .header-top .blockcart a:hover {
  color: var(--caiser-primary);
}

/* User info / sign in
   Parent: #header .header-nav .user-info{margin-left:2.5rem} */
#header .user-info a,
#header .user-info .account {
  color: var(--caiser-header-text);
  white-space: nowrap;
}

#header .header-nav .user-info {
  margin-left: 0;
}

/* ── User Dropdown ── */
.caiser-user-dropdown {
  position: relative;
}

.caiser-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--caiser-header-text);
}

#header .caiser-user-trigger .material-icons {
  color: var(--caiser-header-text);
}

.caiser-user-arrow {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

/* Hidden by default — shown via JS .open class */
.caiser-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: var(--caiser-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0;
  z-index: 1100;
}

.caiser-user-menu.open {
  display: block;
}

.caiser-user-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  color: var(--caiser-text);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}

.caiser-user-menu a:hover {
  background: var(--caiser-bg-alt);
  color: var(--caiser-primary);
}

.caiser-user-menu a .material-icons {
  font-size: 1.1rem;
  color: var(--caiser-text-light);
}

.caiser-user-menu a:hover .material-icons {
  color: var(--caiser-primary);
}

.caiser-user-menu-divider {
  height: 1px;
  background: var(--caiser-border);
  margin: 0.3rem 0;
}

.caiser-user-menu a.logout {
  color: var(--caiser-error);
}

.caiser-user-menu a.logout .material-icons {
  color: var(--caiser-error);
}

/* ===========================
   5. MAIN MENU (ps_mainmenu — disabled, kept for reference)
   =========================== */

#_desktop_top_menu,
.top-menu-link {
  background: var(--caiser-header-bg);
}

#_desktop_top_menu .top-menu > li > a,
#_desktop_top_menu .top-menu a[data-depth="0"] {
  color: var(--caiser-header-text);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu .current > a {
  color: var(--caiser-primary);
}

#_desktop_top_menu .popover.sub-menu {
  border-radius: var(--caiser-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: none;
}

/* ===========================
   6. BUTTONS
   Bootstrap .btn-primary uses !important in some states, so we must too.
   =========================== */

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--caiser-primary) !important;
  border-color: var(--caiser-primary) !important;
  border-radius: var(--caiser-btn-radius);
  color: #fff !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.6rem 1.8rem;
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus,
.open > .btn-primary.dropdown-toggle {
  background-color: var(--caiser-primary-hover) !important;
  border-color: var(--caiser-primary-hover) !important;
  color: #fff !important;
}

.btn-outline-primary {
  background: transparent;
  color: var(--caiser-primary);
  border-color: var(--caiser-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.focus,
.open > .btn-outline-primary.dropdown-toggle {
  background-color: var(--caiser-primary);
  border-color: var(--caiser-primary);
  color: #fff;
}

/* Radio + checkbox checked-state color (replaces classic #24b9d7 / #232323) */
.custom-radio input[type="radio"]:checked + span,
.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
  color: var(--caiser-primary);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--caiser-text);
  border-radius: var(--caiser-btn-radius);
  color: var(--caiser-text);
  font-weight: 600;
  text-transform: none;
  padding: 0.6rem 1.8rem;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--caiser-text);
  color: #fff;
}

.btn-tertiary {
  border-radius: var(--caiser-btn-radius);
}

/* Add to cart */
.add-to-cart,
.product-add-to-cart .add-to-cart {
  background-color: var(--caiser-primary);
  border-color: var(--caiser-primary);
  border-radius: var(--caiser-btn-radius);
  color: #fff;
  font-weight: 600;
  text-transform: none;
  padding: 0.75rem 2rem;
}

.add-to-cart:hover,
.product-add-to-cart .add-to-cart:hover {
  background-color: var(--caiser-primary-hover);
  border-color: var(--caiser-primary-hover);
  color: #fff;
}

/* ===========================
   7. FORMS
   =========================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  background: var(--caiser-input-bg);
  border: none;
  border-radius: var(--caiser-radius-pill);
  padding: 0.65rem 1.2rem;
  color: var(--caiser-text);
  transition: box-shadow 0.2s ease;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(229, 21, 155, 0.2);
  outline: none;
  border: none;
}

textarea,
textarea.form-control {
  border-radius: var(--caiser-radius-lg);
}

select {
  border-radius: var(--caiser-radius);
}

label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--caiser-text);
}

/* ===========================
   8. PRODUCT CARDS
   =========================== */

.product-miniature {
  border-radius: var(--caiser-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  border: none;
}

.product-miniature:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.product-miniature .thumbnail-container {
  width: 100%;
  border-radius: var(--caiser-radius-lg);
  overflow: hidden;
}

.product-miniature .product-thumbnail {
  position: relative;
  overflow: hidden;
}

.product-miniature .product-thumbnail img {
  border-radius: var(--caiser-radius-lg) var(--caiser-radius-lg) 0 0;
}

/* Hover image — supports fade/slide/zoom via data-hover-transition attribute */
.product-miniature .product-thumbnail picture:last-child:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

.product-miniature .product-thumbnail picture:last-child:not(:first-child) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Fade (default) */
.product-miniature .product-thumbnail:hover picture:last-child:not(:first-child) {
  opacity: 1;
}

/* Slide — image slides in from right */
.product-miniature[data-hover-transition="slide"] .product-thumbnail picture:last-child:not(:first-child) {
  transform: translateX(100%);
}
.product-miniature[data-hover-transition="slide"] .product-thumbnail:hover picture:last-child:not(:first-child) {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom — image zooms in */
.product-miniature[data-hover-transition="zoom"] .product-thumbnail picture:last-child:not(:first-child) img {
  transform: scale(1);
}
.product-miniature[data-hover-transition="zoom"] .product-thumbnail:hover picture:last-child:not(:first-child) img {
  transform: scale(1.1);
}

.product-miniature .product-title {
  min-height: 2.8em;
  display: flex;
  align-items: flex-start;
}

.product-miniature .product-title a {
  font-weight: 600;
  color: var(--caiser-text);
  display: -webkit-box;
  -webkit-line-clamp: var(--caiser-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.4;
}

.product-miniature .product-description {
  overflow: hidden;
}

.product-miniature .add-to-cart-or-refresh {
  max-width: 100%;
}

.product-miniature .add-to-cart {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  display: block;
  text-align: center;
}

.product-miniature .product-reference {
  font-size: 0.75rem;
  color: var(--caiser-text-light);
  margin-top: 0.25rem;
  text-align: center;
}

.product-miniature .product-reference .label {
  font-weight: 400;
  font-size: 0.75rem;
}

.product-miniature .product-price-and-shipping .price {
  color: var(--caiser-primary);
  font-weight: 700;
}

/* Product flags/badges — prod-verbatim (leo_noir) for cutover parity.
   Selectors use `li.product-flag` to beat classic theme.css's base
   rules (which load first and use the li element selector).
   TODO: migrate hard-coded colors to --caiser-pf-* vars wired through
   caiserthemeeditor so operators can tune palette via BO. */
.product-flags li.product-flag {
  position: static;
  margin: 0 0 5px;
  width: 42px;
  height: 42px;
  min-width: 0;
  min-height: 0;
  display: flex;
  font-weight: 600;
  align-items: center;
  letter-spacing: 0;
  font-size: 10px;
  text-align: center;
  margin-top: .625rem;
  color: #fff;
  border-radius: 50%;
  line-height: 1;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  word-break: normal;
  padding: 2px;
  top: auto;
  right: auto;
}

/* Product miniature surface — override classic's min-width/min-height. */
.product-miniature .product-flags li.product-flag {
  width: 42px;
  height: 42px;
  min-width: 1rem;
  min-height: 1rem;
}

.product-flags li.product-flag.online-only         { background: #e5159b; }
.product-flags li.product-flag.new                 { background: #D9242A; }
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage { background: #000000; }
.product-flags li.product-flag.on-sale {
  background: blue;
  width: 42px;
  order: 0;
  text-align: center;
}

/* Override classic's Material-Icons pseudo + absolute positioning. */
.product-flags li.product-flag.online-only::before { content: none; }
.product-miniature .product-flags li.product-flag.online-only { top: auto; }

/* Hide out-of-stock badge — moved from tem BO custom CSS (2026-05-17). */
.product-flags li.product-flag.out_of_stock { display: none; }

/* ===========================
   9. PRODUCT PAGE
   =========================== */

.product-cover img {
  border-radius: var(--caiser-radius-lg);
}

.product-images > li .thumb {
  border-radius: var(--caiser-radius);
}

.product-prices .current-price .price,
.product-prices .current-price span {
  color: var(--caiser-primary);
  font-weight: 700;
}

/* Quantity input — keep square, override pill radius from forms section */
.product-quantity .qty .input-group .form-control,
.product-quantity #quantity_wanted {
  border-radius: 0;
  background: #fff;
  border: 1px solid var(--caiser-border);
}

/* ===========================
   10. CATEGORIES
   =========================== */

.block-category .category-cover img {
  border-radius: var(--caiser-radius-lg);
}

#js-product-list .products {
  gap: 1rem 0;
}

.subcategory-image img {
  border-radius: var(--caiser-radius-lg);
}

/* ===========================
   11. CART & CHECKOUT
   =========================== */

.cart-grid .card {
  border-radius: var(--caiser-radius-lg);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cart-grid .card-block {
  border-radius: var(--caiser-radius-lg);
}

body#checkout section.checkout-step .step-title {
  border-bottom-color: var(--caiser-border);
}

body#checkout section.checkout-step.-current .step-title {
  border-bottom-color: var(--caiser-primary);
}

/* ===========================
   12. FOOTER
   =========================== */

#footer {
  background: var(--caiser-footer-bg);
  color: var(--caiser-footer-text);
}

/* Parent: #block_myaccount_infos .myaccount-title a,#header a{color:#232323} — combined selector.
   We need specificity to override footer links from that rule. */
#footer a,
#footer .myaccount-title a {
  color: var(--caiser-footer-text);
}

#footer a:hover {
  color: var(--caiser-primary);
}

#footer .footer-container {
  padding: 2rem 0;
}

#footer h3,
#footer .h3,
#footer h4,
#footer .h4 {
  color: var(--caiser-footer-text);
  font-weight: 600;
}

/* ===========================
   13. ALERTS & NOTIFICATIONS
   =========================== */

.alert {
  border-radius: var(--caiser-radius);
  border: none;
}

.alert-success {
  background: rgba(76, 187, 108, 0.1);
  color: var(--caiser-success);
}

.alert-danger {
  background: rgba(255, 76, 76, 0.1);
  color: var(--caiser-error);
}

/* ===========================
   14. BREADCRUMBS
   =========================== */

.breadcrumb {
  background: transparent;
  font-size: 0.8rem;
}

.breadcrumb li::after {
  color: var(--caiser-text-light);
}

/* ===========================
   15. PAGINATION
   =========================== */

.pagination .page-list li a {
  border-radius: var(--caiser-radius);
}

.pagination .page-list li.current a {
  background: var(--caiser-primary);
  border-color: var(--caiser-primary);
  color: #fff;
}

/* ===========================
   16. FACETED SEARCH / SIDEBAR
   =========================== */

/* Hide category tree block — navigation handled by mega menu */
.block-categories {
  display: none;
}

/* Hide category heading — title already in breadcrumb/megamenu */
#js-product-list-header {
  display: none;
}

#search_filters .facet .facet-title {
  font-weight: 600;
}

#search_filters .facet .custom-checkbox input[type="checkbox"] + span {
  border-radius: var(--caiser-radius);
}

/* ===========================
   17. MISC
   =========================== */

.card {
  border-radius: var(--caiser-radius-lg);
  border-color: var(--caiser-border);
}

.modal-content {
  border-radius: var(--caiser-radius-lg);
}

.badge {
  border-radius: var(--caiser-radius-pill);
}

.table thead th {
  background: var(--caiser-bg-alt);
  font-weight: 600;
}

/* ===========================
   18. SEARCH BAR IN NAV (legacy, kept for mobile)
   =========================== */

@media (min-width: 768px) {
  .header-nav #search_widget {
    float: left;
    margin-bottom: 0;
    margin-top: 0.3rem;
  }
}

/* ===========================
   19. MEGA MENU
   =========================== */

.caiser-mega-menu {
  background: var(--caiser-header-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caiser-mega-menu .mega-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.caiser-mega-menu .mega-nav > li {
  position: relative;
}

.caiser-mega-menu .mega-nav > li > a {
  display: block;
  padding: 0.7rem 0.9rem;
  color: var(--caiser-header-text);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  text-transform: none;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.caiser-mega-menu .mega-nav > li > a:hover,
.caiser-mega-menu .mega-nav > li:hover > a {
  color: var(--caiser-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Dropdown panel */
.caiser-mega-menu .mega-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 0 0 var(--caiser-radius-lg) var(--caiser-radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 1.25rem 1.5rem;
  min-width: 280px;
  z-index: 1000;
  gap: 1.5rem;
}

.caiser-mega-menu .mega-nav > li.has-dropdown:hover .mega-dropdown {
  display: flex;
}

.caiser-mega-menu .mega-col {
  min-width: 140px;
}

.caiser-mega-menu .mega-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--caiser-text);
  margin: 0 0 0.4rem 0;
  padding: 0;
}

.caiser-mega-menu .mega-col h4 a {
  color: var(--caiser-text);
  text-decoration: none;
}

.caiser-mega-menu .mega-col h4 a:hover {
  color: var(--caiser-primary);
}

.caiser-mega-menu .mega-col ul {
  list-style: none;
  margin: 0 0 0.8rem 0;
  padding: 0;
}

.caiser-mega-menu .mega-col ul li a {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.78rem;
  color: var(--caiser-text-light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.caiser-mega-menu .mega-col ul li a:hover {
  color: var(--caiser-primary);
}

/* Toggle arrow — hidden on desktop, shown on mobile */
.caiser-mega-menu .mega-toggle {
  display: none;
}

/* ── MOBILE MEGA MENU ──
   Mobile needs !important to override desktop styles within same selectors */
@media (max-width: 767px) {
  .caiser-mega-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    z-index: 2000;
    overflow-y: auto;
    background: #fff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    border-top: none;
    padding-top: 1rem;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
  }

  .caiser-mega-menu.mobile-open {
    display: block;
    transform: translateX(0);
  }

  .caiser-menu-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    margin: 0;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--caiser-border, #eee);
    font-size: 0.95rem;
    font-weight: 600;
    color: #232323;
    cursor: pointer;
  }

  .caiser-menu-close:hover {
    color: var(--caiser-primary);
  }

  .caiser-menu-close .material-icons {
    font-size: 1.4rem;
  }

  .caiser-mega-menu .container {
    padding: 0 !important;
    width: 100% !important;
  }

  .caiser-mega-menu .mega-nav {
    flex-direction: column;
    gap: 0;
  }

  .caiser-mega-menu .mega-nav > li {
    border-bottom: 1px solid var(--caiser-border, #eee);
    position: relative;
  }

  .caiser-mega-menu .mega-nav > li > a {
    color: var(--caiser-text);
    padding: 0.85rem 1.2rem;
    font-size: 0.9rem;
    white-space: normal;
  }

  /* Toggle arrow for items with dropdowns */
  .caiser-mega-menu .mega-nav > li.has-dropdown > .mega-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    cursor: pointer;
    z-index: 1;
  }

  .caiser-mega-menu .mega-nav > li.has-dropdown > .mega-toggle::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--caiser-text-light);
    transition: transform 0.2s ease;
  }

  .caiser-mega-menu .mega-nav > li.has-dropdown.mobile-expanded > .mega-toggle::after {
    content: '\2212';
  }

  /* Dropdown — override desktop absolute positioning */
  .caiser-mega-menu .mega-dropdown {
    display: none !important;
    position: static !important;
    transform: none !important;
    box-shadow: none;
    border-radius: 0;
    background: var(--caiser-bg-alt, #f5f5f5);
    padding: 0.5rem 1.2rem 0.75rem 1.8rem;
    min-width: auto;
    flex-direction: column;
    gap: 0;
  }

  .caiser-mega-menu .mega-nav > li.has-dropdown.mobile-expanded .mega-dropdown {
    display: block !important;
  }

  .caiser-mega-menu .mega-col {
    min-width: auto;
    margin-bottom: 0.25rem;
  }

  .caiser-mega-menu .mega-col h4 {
    font-size: 0.82rem;
    margin: 0.3rem 0 0.2rem;
  }

  .caiser-mega-menu .mega-col ul {
    margin: 0 0 0.3rem 0.5rem;
  }

  .caiser-mega-menu .mega-col ul li a {
    padding: 0.25rem 0;
    font-size: 0.8rem;
  }
}

/* ---------------------------
   Three-tier wrappers
   --------------------------- */
/* Home reassurance section (moved out of footer-top — now home-only) */
.home-reassurance {
  background: #fff;
  padding: 2rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #232323;
  margin-top: 2rem;
}

.home-reassurance a { color: #232323; }
.home-reassurance a:hover { color: var(--caiser-primary); }

.home-reassurance .block-reassurance-item {
  text-align: center;
  padding: 0.75rem;
}

.home-reassurance .block-icon {
  margin-bottom: 0.5rem;
}

.home-reassurance .block-icon .material-icons {
  font-size: 2.5rem;
  color: var(--caiser-primary);
  line-height: 1;
}

.home-reassurance .block-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.home-reassurance .block-description {
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
}

/* Reassurance icons on product page / cart (displayBlockProduct.tpl) */
.blockreassurance_product .item-product .material-icons {
  font-size: 1.5rem;
  color: var(--caiser-primary);
  vertical-align: middle;
  line-height: 1;
}

/* Each item rendered as: [icon spans both rows] | title (row 1) / description (row 2)
   Defaults render the <p> as a block dropping under the icon — grid keeps it inline. */
.blockreassurance_product > div:not(.clearfix) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  align-items: start;
  margin-bottom: 0.85rem;
}

.blockreassurance_product > div:not(.clearfix) > .item-product {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
  /* Module's front.css forces float:left + 35x35 fixed box on .item-product;
     that removes the icon from grid flow and collapses column-gap. Override. */
  float: none;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.blockreassurance_product > div:not(.clearfix) > .block-title {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  line-height: 1.2;
}

.blockreassurance_product > div:not(.clearfix) > p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

#footer .footer-top .block-reassurance {
  background: transparent;
  margin: 0;
  box-shadow: none;
}

#footer .footer-top .block-reassurance ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-top .block-reassurance li {
  background: transparent;
  border: none;
  padding: 0.25rem 1rem;
}

#footer .footer-top .block-reassurance li .h6,
#footer .footer-top .block-reassurance li span {
  color: var(--caiser-footer-text);
}

#footer .footer-center {
  /* center tier; .footer-container already provides padding */
}

#footer .footer-bottom {
  background: rgba(0, 0, 0, 0.30);
  padding: 1rem 0;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#footer .footer-bottom .footer-bottom-row {
  align-items: center;
  margin: 0;
}

#footer .footer-bottom .copyright,
#footer .footer-bottom .privacy-cookies {
  text-align: center;
}

#footer .footer-bottom .privacy-cookies ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

#footer .footer-bottom .payments-img {
  text-align: right;
}

#footer .footer-bottom .payments-img img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  #footer .footer-bottom .copyright,
  #footer .footer-bottom .privacy-cookies,
  #footer .footer-bottom .payments-img {
    text-align: center;
    margin-top: 0.5rem;
  }
}

#footer .caiser-footer-info address {
  margin: 0 0 0.6rem 0;
  font-style: normal;
  line-height: 1.6;
}

/* Neutralize classic theme's mobile-menu list styling (grey bg + bordered
   items) on the now always-expanded footer link blocks; also center the
   footer content on mobile for a tighter narrow-viewport feel. */
@media (max-width: 767px) {
  #footer .footer-container .links ul {
    background: transparent;
    padding: 0;
  }
  #footer .footer-container .links ul > li {
    padding: 0.2rem 0;
    font-weight: normal;
    border-bottom: none;
  }
  #footer .footer-container .links ul > li a {
    color: var(--caiser-footer-text);
  }

  /* Center all footer-center content on mobile */
  #footer .footer-container .col-md-3,
  #footer .footer-container .col-md-8,
  #footer .footer-container .col-md-12,
  #footer .footer-container .links .wrapper,
  #footer .footer-container .links .h3,
  #footer .footer-container .links ul,
  #footer .caiser-footer-info,
  #footer .caiser-footer-info address {
    text-align: center;
  }

  #footer .caiser-footer-whatsapp a,
  #footer .caiser-footer-social {
    justify-content: center;
  }
}

#footer .caiser-footer-whatsapp,
#footer .caiser-footer-social {
  margin: 0.5rem 0 0 0;
}

#footer .caiser-footer-whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

#footer .caiser-footer-whatsapp a:hover {
  color: var(--caiser-primary);
}

#footer .caiser-footer-social {
  display: flex;
  gap: 0.6rem;
}

#footer .caiser-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--caiser-footer-text);
  transition: color 0.2s ease;
}

#footer .caiser-footer-social a:hover {
  color: var(--caiser-primary);
}

/* Tame classic theme's standalone-block styling for the footer column.
   Don't touch width/max-width/float — col-md-4's flex-basis already
   sizes the column, and overriding max-width here lifts the 33.3% cap. */
#footer .block_newsletter {
  background: transparent;
  margin: 0;
  font-size: inherit;
}

#footer .block_newsletter form {
  position: static;
}

#footer .block_newsletter .newsletter-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#footer .block_newsletter form input[type="email"],
#footer .block_newsletter form input[type="text"] {
  min-width: 0;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--caiser-footer-text);
  border-radius: var(--caiser-radius);
}

#footer .block_newsletter form input[type="email"]::placeholder,
#footer .block_newsletter form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

#footer .block_newsletter form input[type="email"]:focus,
#footer .block_newsletter form input[type="text"]:focus {
  outline: none;
  border-color: var(--caiser-primary);
  background: rgba(255, 255, 255, 0.1);
  color: var(--caiser-footer-text);
}

#footer .block_newsletter form button[type="submit"] {
  position: static;
  align-self: flex-start;
  background: var(--caiser-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: var(--caiser-radius);
}

#footer .block_newsletter form button[type="submit"]:hover {
  filter: brightness(1.1);
  color: #fff;
}

#footer .block_newsletter #block-newsletter-label {
  color: var(--caiser-footer-text);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.25rem 0 0.5rem 0;
  margin: 0;
}

#footer .block_newsletter .conditions {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  opacity: 0.75;
}

/* Required-field marker — magenta asterisk after the label.
   Two cases: standard input fields (text in .form-control-label.required)
   and checkbox rows (outer .form-control-label is empty; mark the inner
   custom-checkbox label whose <input> has the [required] attribute). */
.form-control-label.required::after {
  content: " *";
  color: var(--caiser-primary);
  font-weight: 700;
}

/* Skip when another module already injected its own marker (e.g.
   caiseraddressrules adds <span class="caiser-ar-star"> *</span>).
   Also skip on checkbox rows where the outer label is empty. */
.form-control-label.required:has(.caiser-ar-star)::after,
.form-group.row:has(.custom-checkbox) > .form-control-label.required::after {
  content: none;
}

.form-group.row:has(.custom-checkbox input[required]) .custom-checkbox > label::after {
  content: " *";
  color: var(--caiser-primary);
  font-weight: 700;
}

/* GDPR consent checkbox — keep readable on dark footer */
#footer .psgdpr_consent_message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--caiser-footer-text);
  font-size: 0.8rem;
  line-height: 1.4;
}

#footer .psgdpr_consent_message > span,
#footer .psgdpr_consent_message a {
  color: var(--caiser-footer-text);
}

/* Classic theme's `#authentication .custom-checkbox span { flex: 0 0 15px }`
   clamps the text span to 15px on /login. Let it grow. */
#footer .psgdpr_consent_message > span:not(:first-of-type) {
  flex: 1 1 auto;
}

#footer .psgdpr_consent_message a {
  text-decoration: underline;
}

#footer .psgdpr_consent_message a:hover {
  color: var(--caiser-primary);
}

/* Hide the empty material-icons element that was rendering as a square */
#footer .psgdpr_consent_message .checkbox-checked {
  display: none !important;
}

/* Hide the native checkbox while keeping it accessible to clicks */
#footer .psgdpr_consent_message input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom box drawn on the first span */
#footer .psgdpr_consent_message > span:first-of-type {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
}

/* Checkmark drawn via ::after when input is checked */
#footer .psgdpr_consent_message input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 9px;
  border: solid var(--caiser-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- */
/* A-091b — Checkout "Sono un'azienda" toggle                        */
/* ---------------------------------------------------------------- */

/* Toggle container above the delivery address form */
.caiser-azienda-toggle {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-left: 3px solid var(--caiser-primary, #6c757d);
  border-radius: 4px;
}

.caiser-azienda-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}

.caiser-azienda-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  cursor: pointer;
}

/* All show/hide of fiscal block + invoice block + use_same_address
 * row + [data-azienda-only] markers is driven by .is-azienda-mode
 * on the .caiser-azienda-scope scope. JS adds the class when toggle ON,
 * removes it when OFF. Default state (no class) is privato — safe
 * for JS-disabled users.
 *
 * Uses :has() selector — supported in all evergreen browsers since
 * 2024. PS classic uses bootstrap 3 float-based layout: .row is just
 * negative margins, and .col-md-* applies float:left + width only at
 * the md+ breakpoint. So un-hide MUST use `display: block` (the natural
 * default for div) — NOT `display: flex`, which would convert the
 * form-group into a flex container, ignore the col-md-* floats, and
 * collapse input width on mobile (label and input go side-by-side
 * instead of stacking, and the input shrinks to "remaining space").
 */
.caiser-azienda-scope [data-azienda-only],
.caiser-azienda-scope .form-group:has([name="company"]),
.caiser-azienda-scope .form-group:has([name="vat_number"]),
.caiser-azienda-scope .form-group:has([name="dni"]),
.caiser-azienda-scope .form-group:has([name="sdi"]),
.caiser-azienda-scope .form-group:has([name="pec"]),
.caiser-azienda-scope .form-group:has(#use_same_address) {
  display: none;
}

.caiser-azienda-scope.is-azienda-mode [data-azienda-only],
.caiser-azienda-scope.is-azienda-mode .form-group:has([name="company"]),
.caiser-azienda-scope.is-azienda-mode .form-group:has([name="vat_number"]),
.caiser-azienda-scope.is-azienda-mode .form-group:has([name="dni"]),
.caiser-azienda-scope.is-azienda-mode .form-group:has([name="sdi"]),
.caiser-azienda-scope.is-azienda-mode .form-group:has([name="pec"]),
.caiser-azienda-scope.is-azienda-mode .form-group:has(#use_same_address) {
  display: block;
}

/* "Dati aziendali" section header injected by JS above first fiscal
 * field row. Inherits .h4 sizing from PS classic typography. */
.caiser-azienda-section-header {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Cosmetic "Usa stesso indirizzo per fatturazione" checkbox.
 * Visual layer on top of PS classic's link-based use_same_address
 * mechanism. JS routes checkbox clicks to the appropriate hidden
 * server-roundtrip link (different-invoice-address or
 * js-cancel-address). The form submit path is untouched — PS still
 * controls the actual use_same_address state. */
.caiser-azienda-scope .caiser-azienda-same-address {
  margin: 1rem 0 0.75rem;
}

.caiser-azienda-scope .caiser-azienda-same-address label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.caiser-azienda-scope .caiser-azienda-same-address input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  cursor: pointer;
}

.caiser-azienda-scope .caiser-azienda-same-address input[disabled] {
  opacity: 0.5;
  cursor: wait;
}

/* Hide PS classic's original "Billing address differs from shipping
 * address" link — the cosmetic checkbox above replaces it visually
 * but JS still triggers it programmatically. Specificity bumped
 * past .is-azienda-mode show rule (0,3,0) which would otherwise
 * win for [data-azienda-only] descendants. */
.caiser-azienda-scope .caiser-azienda-bridge-link,
.caiser-azienda-scope.is-azienda-mode .caiser-azienda-bridge-link {
  display: none;
}

/* Hide PS classic's "Annulla" link in the invoice form — the
 * cosmetic checkbox above the form replaces it visually. JS still
 * triggers this link programmatically when the user re-checks the
 * box from the second-address state. */
.caiser-azienda-scope a.js-cancel-address,
.caiser-azienda-scope.is-azienda-mode a.js-cancel-address {
  display: none;
}

/* ============================================================
   Checkout footer (slim variant) — used by
   themes/caiser/templates/checkout/_partials/footer.tpl on /ordine.
   ============================================================ */

/* Classic ships `body#checkout #footer { background:#fff; padding:.9375rem }`
   which beats our generic `#footer` rule on specificity. Override at the
   same specificity to neutralize the white frame around the dark footer. */
body#checkout #footer {
  padding: 0;
  background: var(--caiser-footer-bg);
  color: var(--caiser-footer-text);
}

.caiser-checkout-footer {
  margin-top: 3rem;
  background: var(--caiser-footer-bg);
  color: var(--caiser-footer-text);
  font-size: 0.875rem;
}

.caiser-checkout-footer > .container {
  padding: 1.75rem 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.caiser-checkout-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
}

.caiser-checkout-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.caiser-checkout-trust-item .material-icons {
  font-size: 1.2rem;
  color: var(--caiser-primary);
}

.caiser-checkout-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.caiser-checkout-support-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.caiser-checkout-support-link:hover {
  color: var(--caiser-primary);
  border-bottom-color: var(--caiser-primary);
}

.caiser-checkout-support-link .material-icons {
  font-size: 1.1rem;
}

.caiser-checkout-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.caiser-checkout-legal a {
  color: var(--caiser-footer-text);
  text-decoration: none;
}

.caiser-checkout-legal a:hover {
  color: var(--caiser-primary);
}

.caiser-checkout-sep {
  opacity: 0.5;
}

.caiser-checkout-footer .footer-bottom {
  background: rgba(0, 0, 0, 0.30);
  padding: 1rem 0;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 1.5rem;
}

.caiser-checkout-footer .footer-bottom .footer-bottom-row {
  align-items: center;
  margin: 0;
}

.caiser-checkout-footer .footer-bottom .copyright,
.caiser-checkout-footer .footer-bottom .privacy-cookies {
  text-align: center;
}

.caiser-checkout-footer .footer-bottom .privacy-cookies ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.caiser-checkout-footer .footer-bottom .privacy-cookies a {
  color: var(--caiser-footer-text);
  text-decoration: none;
}

.caiser-checkout-footer .footer-bottom .privacy-cookies a:hover {
  color: var(--caiser-primary);
}

.caiser-checkout-footer .footer-bottom .payments-img {
  text-align: right;
}

.caiser-checkout-footer .footer-bottom .payments-img img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .caiser-checkout-footer .footer-bottom .copyright,
  .caiser-checkout-footer .footer-bottom .privacy-cookies,
  .caiser-checkout-footer .footer-bottom .payments-img {
    text-align: center;
    margin-top: 0.5rem;
  }
}

/* Mark required terms checkbox with red asterisk.
   PS native checkout doesn't add required="" to the input, so the theme's
   generic "label::after + content: ' *'" rule never fires here. Direct
   selector instead. */
#conditions-to-approve .condition-label > label::after {
  content: " *";
  color: var(--caiser-primary);
}

/* ===========================
   IN-APP BROWSER NUDGE (TASK-291)
   Dismissible banner injected at top of <body> by caiser-inapp-nudge.js
   when an embedded webview (GSA / Facebook / Instagram) is detected.
   In normal document flow (position: static) — pushes content down with
   no overlap and no CLS on already-rendered content (it's prepended once,
   before paint settles, and never resizes the viewport unexpectedly).
   =========================== */

.caiser-inapp-nudge {
  background: var(--caiser-dark, #1a1a1a);
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
  border-bottom: 3px solid var(--caiser-primary, #e5159b);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.caiser-inapp-nudge__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.caiser-inapp-nudge__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 60%;
  min-width: 0;
}

.caiser-inapp-nudge__title {
  font-weight: 600;
  color: #fff;
}

.caiser-inapp-nudge__body {
  color: #d8d8d8;
  font-weight: 400;
}

.caiser-inapp-nudge__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.caiser-inapp-nudge__copy {
  background: var(--caiser-primary, #e5159b);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.caiser-inapp-nudge__copy:hover,
.caiser-inapp-nudge__copy:focus {
  background: var(--caiser-primary-hover, #c8108a);
}

.caiser-inapp-nudge__copy.is-copied {
  background: var(--caiser-success, #4cbb6c);
}

.caiser-inapp-nudge__close {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.35rem;
  cursor: pointer;
  opacity: 0.8;
}

.caiser-inapp-nudge__close:hover,
.caiser-inapp-nudge__close:focus {
  opacity: 1;
}

@media (max-width: 575px) {
  .caiser-inapp-nudge__inner {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .caiser-inapp-nudge__actions {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.35rem;
  }
}