/* ==========================================================================
 * Agricola Piano — Rebrand stylesheet
 *
 * Single source of truth for the rebrand override layer on top of the
 * `warehouse` theme. Loaded via _partials/head.tpl AFTER all other styles
 * (theme.css, module CSS, iqitthemeeditor custom_s_1.css) so every selector
 * here wins without needing !important.
 *
 * Portable: zip this file together with the theme template edits listed in
 * _dev/rebrand/README.md and drop it onto any environment running the
 * warehouse theme.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
 * 1. Design tokens
 * Mirrors rebrand-source-site/src/index.css and tailwind.config.ts.
 * Values are HSL triplets so they can be composed with hsl(var(--token) / alpha).
 * -------------------------------------------------------------------------- */
:root {
  /* Grano — wheat / primary gold */
  --rb-grano-chiaro: 45 84% 79%;
  --rb-grano-medio:  45 80% 46%;
  --rb-grano-scuro:  45 100% 27%;

  /* Pietra — stone / neutral surfaces */
  --rb-pietra-chiaro: 33 53% 91%;
  --rb-pietra-medio:  29 24% 80%;
  --rb-pietra-scuro:  27 22% 55%;

  /* Ulivo — olive / accent */
  --rb-ulivo-chiaro: 104 27% 76%;
  --rb-ulivo-medio:  104 22% 39%;
  --rb-ulivo-scuro:  104 35% 21%;

  /* Terra — earth / warm contrast */
  --rb-terra-chiaro: 22 37% 62%;
  --rb-terra-medio:  22 47% 33%;
  --rb-terra-scuro:  18 50% 18%;

  /* Adriatico — adriatic blue / cool contrast */
  --rb-adriatico-chiaro: 206 51% 83%;
  --rb-adriatico-medio:  206 47% 53%;
  --rb-adriatico-scuro:  206 62% 29%;

  /* Neutri — backgrounds and text */
  --rb-neutro-chiaro: 36 24% 95%;
  --rb-neutro-medio: 27 5% 40%;
  --rb-neutro-scuro: 30 11% 9%;

  /* Semantic aliases */
  --rb-primary:    var(--rb-grano-medio);
  --rb-accent:     var(--rb-ulivo-medio);
  --rb-background: var(--rb-neutro-chiaro);
  --rb-foreground: var(--rb-neutro-scuro);
  --rb-muted:      var(--rb-pietra-medio);
  --rb-border:     var(--rb-pietra-medio);

  /* Type */
  --rb-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --rb-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rb-heading-weight: 500;
  --rb-heading-tracking: -0.01em;
  --rb-heading-line: 1.15;

  /* Geometry */
  --rb-radius: 0.375rem;
  --rb-radius-lg: 0.75rem;
  --rb-container-max: 80rem;
  --rb-shadow-sm: 0 1px 2px hsl(var(--rb-neutro-scuro) / 0.06);
  --rb-shadow-md: 0 6px 24px hsl(var(--rb-neutro-scuro) / 0.08);
  --rb-shadow-lg: 0 18px 48px hsl(var(--rb-neutro-scuro) / 0.12);
}

/* --------------------------------------------------------------------------
 * 2. Global resets and body
 * -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body,
body#index,
body[id^="category"],
body#product,
body#cart,
body#checkout,
body#authentication,
body#my-account,
body#identity,
body#addresses,
body#history,
body#order-detail,
body#order-follow,
body#order-slip,
body#contact,
body#cms,
body#pagenotfound,
body#search {
  font-family: var(--rb-font-body) !important;
  background: hsl(var(--rb-background)) !important;
  color: hsl(var(--rb-foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--rb-font-heading);
  font-weight: var(--rb-heading-weight);
  letter-spacing: var(--rb-heading-tracking);
  line-height: var(--rb-heading-line);
  color: hsl(var(--rb-foreground));
}

a:link:not(.nav-link):not(.btn),
a:visited:not(.nav-link):not(.btn) {
  color: hsl(var(--rb-ulivo-scuro));
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover:not(.nav-link):not(.btn) {
  color: hsl(var(--rb-grano-scuro));
}

/* Container alignment with rebrand source 7xl */
.container { max-width: var(--rb-container-max); }

/* --------------------------------------------------------------------------
 * 3. Buttons
 * Override PrestaShop / iqitthemeeditor defaults so primary CTAs read as gold
 * and secondaries as warm neutrals.
 * -------------------------------------------------------------------------- */
.btn {
  font-family: var(--rb-font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--rb-radius);
  padding: 0.625rem 1.25rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background: hsl(var(--rb-primary));
  border: 1px solid hsl(var(--rb-primary));
  color: hsl(var(--rb-neutro-scuro));
  box-shadow: var(--rb-shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: hsl(var(--rb-grano-scuro));
  border-color: hsl(var(--rb-grano-scuro));
  color: hsl(var(--rb-neutro-chiaro));
  box-shadow: var(--rb-shadow-md);
}

.btn-secondary {
  background: transparent;
  border: 1px solid hsl(var(--rb-foreground));
  color: hsl(var(--rb-foreground));
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: hsl(var(--rb-foreground));
  color: hsl(var(--rb-neutro-chiaro));
}

.btn-tertiary {
  background: hsl(var(--rb-accent));
  border: 1px solid hsl(var(--rb-accent));
  color: hsl(var(--rb-neutro-chiaro));
}

/* --------------------------------------------------------------------------
 * 4. Forms / inputs
 * -------------------------------------------------------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--rb-font-body);
  border: 1px solid hsl(var(--rb-border));
  border-radius: var(--rb-radius);
  background: #fff;
  color: hsl(var(--rb-foreground));
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: hsl(var(--rb-accent));
  box-shadow: 0 0 0 3px hsl(var(--rb-ulivo-medio) / 0.18);
  outline: none;
}
.form-label,
label { font-weight: 500; color: hsl(var(--rb-foreground)); }

/* --------------------------------------------------------------------------
 * 5. Header
 * Variant in use: desktop-header-style-4 (header-4.tpl) + mobile-header-style-1
 * -------------------------------------------------------------------------- */
#header,
#desktop-header,
#desktop-header > div,
#desktop-header .header-top,
#mobile-header,
#mobile-header #mobile-header-sticky { background: hsl(var(--rb-background)) !important; }
#desktop-header { border-bottom: 1px solid hsl(var(--rb-border) / 0.5); box-shadow: 0 1px 0 hsl(var(--rb-border) / 0.3); }
#desktop-header .header-top { padding: 0.875rem 0; }

/* Nav links — muted color matches rebrand source (PRODOTTI/etc as pietra-scuro,
   hover lifts to foreground). Bigger gap; thinner letter-spacing. */
#desktop-header .custom-header-link,
#desktop-header .header-nav a,
#desktop-header a.pr-3,
.header-top a.custom-header-link {
  font-family: var(--rb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--rb-pietra-scuro));
  padding: 0.5rem 0;
  white-space: nowrap;
  transition: color 0.18s ease, opacity 0.18s ease;
}
#desktop-header .col-header-left .d-flex { gap: 2rem; }
#desktop-header .col-header-left .d-flex .d-flex { gap: 2rem; }
#desktop-header .custom-header-link.pr-3 { padding-right: 0 !important; }
#desktop-header .custom-header-link:hover,
#desktop-header .header-nav a:hover,
.header-top a.custom-header-link:hover { color: hsl(var(--rb-foreground)); }
#desktop-header .rb-nav-trigger { color: hsl(var(--rb-pietra-scuro)); }
#desktop-header .rb-nav-trigger:hover,
#desktop-header .rb-nav-trigger[aria-expanded="true"] { color: hsl(var(--rb-foreground)); }

/* Logo wrapper byline (already in header-4.tpl) */
#desktop_logo span,
.brand-byline {
  font-family: var(--rb-font-body) !important;
  font-size: 9px !important;
  letter-spacing: 0.32em !important;
  color: hsl(var(--rb-pietra-scuro)) !important;
  font-weight: 500 !important;
}

/* Right-side icons (search + BLOG link + cart). Tighter spacing, muted color
   for icon glyphs so they match the rebrand source's light-touch look. */
#desktop-header .col-header-right > .row {
  gap: 1.25rem;
  flex-wrap: nowrap;
}
#desktop-header .col-header-right .iqit-search-trigger,
#desktop-header .col-header-right .blockcart,
#desktop-header .col-header-right a,
#desktop-header .col-header-right button {
  color: hsl(var(--rb-pietra-scuro)) !important;
  background: transparent !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
}
#desktop-header .col-header-right a:hover,
#desktop-header .col-header-right button:hover { color: hsl(var(--rb-foreground)) !important; }
/* Thin out FA icons */
#desktop-header .col-header-right .fa,
#desktop-header .col-header-right svg,
#desktop-header .col-header-right i {
  font-size: 18px;
  font-weight: 400;
  stroke-width: 1.4px;
}
/* Cart icon — keep it as a thin outline shopping bag, not gold-filled. */
#desktop-header .col-header-right .blockcart .header,
#desktop-header .col-header-right .blockcart a,
#desktop-header .col-header-right .blockcart i { color: hsl(var(--rb-foreground)) !important; }

/* Replace FontAwesome glyphs with inline-SVG masks matching the rebrand
   source's lucide icons (Search + ShoppingBag). FA6 either isn't loading
   here or doesn't ship the `fa-shopping-bag` glyph as expected, so the
   header right side renders tofu boxes — these rules hide the FA glyph
   and paint the icon via mask-image instead. */
#desktop-header .col-header-right .fa-search,
#desktop-header .col-header-right .fa-shopping-bag,
#desktop-header .col-header-right .fa-shopping-cart,
#desktop-header .col-header-right .fa-bag-shopping {
  display: inline-block;
  width: 22px;
  height: 22px;
  font-size: 0;       /* hide whatever glyph (or tofu) the FA font would draw */
  line-height: 1;
  color: hsl(var(--rb-foreground));
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 22px 22px;
          mask-size: 22px 22px;
}
#desktop-header .col-header-right .fa-search::before,
#desktop-header .col-header-right .fa-shopping-bag::before,
#desktop-header .col-header-right .fa-shopping-cart::before,
#desktop-header .col-header-right .fa-bag-shopping::before { content: none; }

/* lucide Search icon */
#desktop-header .col-header-right .fa-search {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
/* lucide ShoppingBag icon */
#desktop-header .col-header-right .fa-shopping-bag,
#desktop-header .col-header-right .fa-shopping-cart,
#desktop-header .col-header-right .fa-bag-shopping {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}
#desktop-header .rb-blog-link {
  display: inline-flex !important;
  align-items: center;
  padding: 0.25rem 0.5rem !important;
}

/* Cart counter badge — tighten to a small pill in gold */
#desktop-header .blockcart .cart-products-count,
#desktop-header .cart-products-count {
  background: hsl(var(--rb-grano-medio));
  color: hsl(var(--rb-neutro-scuro));
  font-family: var(--rb-font-body);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

/* Mobile header background + buttons (mobile-header-style-1) */
#mobile-header { background: hsl(var(--rb-background)); }
#mobile-header #mobile-header-sticky { background: hsl(var(--rb-background)); border-bottom: 1px solid hsl(var(--rb-border) / 0.4); }
#mobile-header .m-nav-btn { color: hsl(var(--rb-foreground)); }
#mobile-header .m-nav-btn:hover { color: hsl(var(--rb-grano-scuro)); }
#mobile-header .mobile-buttons-bar { background: hsl(var(--rb-pietra-chiaro)); }

/* Rebrand nav (PRODOTTI dropdown + LA NOSTRA STORIA + RICETTE in header-4.tpl) */
.rb-nav { gap: 2rem; }
.rb-nav-item { position: relative; }
.rb-nav-trigger {
  background: transparent;
  border: 0;
  padding: 0.5rem 0;
  font-family: var(--rb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--rb-foreground));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: color 0.18s ease;
}
.rb-nav-trigger:hover,
.rb-nav-trigger[aria-expanded="true"] { color: hsl(var(--rb-grano-scuro)); }
.rb-chev { transition: transform 0.18s ease; opacity: 0.7; }
.rb-nav-trigger[aria-expanded="true"] .rb-chev { transform: rotate(180deg); }

/* Megamenu: hover-opens on desktop, click-toggle works via aria-expanded. */
.rb-megamenu {
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: 0.875rem;
  width: min(calc(100vw - 3rem), 820px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.2s;
  z-index: 1000;
}
.rb-nav-item:hover .rb-megamenu,
.rb-nav-item:focus-within .rb-megamenu,
.rb-nav-trigger[aria-expanded="true"] + .rb-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.rb-megamenu-inner {
  background: hsl(var(--rb-background));
  border: 1px solid hsl(var(--rb-border) / 0.6);
  border-radius: var(--rb-radius);
  box-shadow: var(--rb-shadow-lg);
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
.rb-cat {
  display: block;
  text-decoration: none;
  color: hsl(var(--rb-foreground)) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.rb-cat .rb-cat-img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--rb-radius);
  background: hsl(var(--rb-pietra-medio) / 0.3);
  margin-bottom: 0.5rem;
}
.rb-cat .rb-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.rb-cat:hover .rb-cat-img img { transform: scale(1.05); }
.rb-cat .rb-cat-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, hsl(var(--rb-foreground) / 0.7), transparent 55%);
}
.rb-cat-label {
  display: block;
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: hsl(var(--rb-foreground));
  transition: color 0.18s ease;
}
.rb-cat:hover .rb-cat-label { color: hsl(var(--rb-grano-scuro)); }
.rb-cat-tagline {
  display: block;
  font-family: var(--rb-font-body);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--rb-pietra-scuro));
  margin-top: 0.25rem;
  line-height: 1.35;
}

@media (max-width: 991.98px) {
  .rb-nav { display: none !important; }
}

/* Rebrand language selector (flag dropdown in header-4 right side).
   Markup is brand-authored but the data comes from the ps_languageselector
   module (widget_block) — real PS localization, dynamic language list, flag
   images and {url entity='language'} switch URLs. Reuses the rb-nav hover
   pattern but right-aligns the menu and keeps it compact. */
.rb-lang-col { display: flex; align-items: center; }
.rb-lang { position: relative; }
.rb-lang-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--rb-pietra-scuro)) !important;
  padding: 0.25rem 0.5rem !important;
  transition: color 0.18s ease;
  line-height: 1;
}
.rb-lang-trigger:hover,
.rb-lang-trigger[aria-expanded="true"] { color: hsl(var(--rb-foreground)) !important; }
.rb-lang-flag {
  display: block;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px hsl(var(--rb-neutro-scuro) / 0.08);
  flex: 0 0 auto;
}
.rb-lang-code { line-height: 1; }
.rb-lang .rb-chev { transition: transform 0.18s ease; opacity: 0.7; }
.rb-lang-trigger[aria-expanded="true"] .rb-chev { transform: rotate(180deg); }

/* Dropdown: hover-opens on desktop, click-toggle works via aria-expanded —
   mirrors the rb-megamenu behaviour. Right-aligned so it doesn't overflow
   the viewport edge. */
.rb-lang-menu {
  position: absolute;
  right: 0;
  top: 100%;
  padding-top: 0.625rem;
  min-width: 11rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.2s;
  z-index: 1000;
}
.rb-lang:hover .rb-lang-menu,
.rb-lang:focus-within .rb-lang-menu,
.rb-lang-trigger[aria-expanded="true"] + .rb-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.rb-lang-menu-inner {
  background: hsl(var(--rb-background));
  border: 1px solid hsl(var(--rb-border) / 0.6);
  border-radius: var(--rb-radius);
  box-shadow: var(--rb-shadow-lg);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.rb-lang-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--rb-radius);
  text-decoration: none;
  color: hsl(var(--rb-foreground)) !important;
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rb-lang-option:hover { background: hsl(var(--rb-pietra-chiaro)); color: hsl(var(--rb-grano-scuro)) !important; }
.rb-lang-option.is-current {
  color: hsl(var(--rb-grano-scuro)) !important;
  font-weight: 600;
  background: hsl(var(--rb-pietra-chiaro) / 0.6);
}
.rb-lang-name { line-height: 1.2; }

/* Mobile language selector (ps_languageselector mobile-menu override, shown in
   the iqitmegamenu mobile slide). Same flag treatment as desktop. */
.rb-lang-mobile .rb-lang-flag,
.rb-lang-mobile-option .rb-lang-flag {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}
.rb-lang-mobile-option { display: inline-flex; align-items: center; }

/* Disable the iqitmegamenu legacy panel when our custom Prodotti dropdown is active */
.iqitmegamenu-wrapper,
#iqitmegamenu { background: transparent; border: none; }

/* --------------------------------------------------------------------------
 * 6. Footer
 * The footer markup is the hand-crafted .footer-custom-dark block (see live
 * HTML). Classes: .footer-container .footer-custom-dark .footer-title
 * .footer-links .text-secondary-small .text-uppercase-tracking
 * .text-contact .border-top-dark .copyright-text .footer-social-text
 * -------------------------------------------------------------------------- */
#footer { background: hsl(var(--rb-foreground)); color: hsl(var(--rb-neutro-chiaro) / 0.7); }

.footer-container,
.footer-custom-dark,
#footer .footer-container { background: hsl(var(--rb-foreground)); color: hsl(var(--rb-neutro-chiaro) / 0.7); padding-top: 2.5rem; padding-bottom: 1.5rem; }

/* Widen the footer container — rebrand source spreads the 4 columns
   across a wider canvas than the regular site container (1076px). */
#footer .container,
.footer-container .container,
.footer-custom-dark .container,
#footer #footer-container-main .container {
  max-width: 1480px !important;
  width: 100% !important;
  padding-left: 4rem;
  padding-right: 4rem;
}
@media (max-width: 991.98px) {
  #footer .container,
  .footer-container .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5,
#footer .footer-title {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: hsl(var(--rb-neutro-chiaro) / 0.95);
  margin-bottom: 1.25rem;
}

#footer .footer-links { list-style: none; padding: 0; margin: 0; }
#footer .footer-links li { margin-bottom: 0.5rem; }
#footer a,
#footer a:link,
#footer a:visited,
#footer .footer-links a {
  color: hsl(var(--rb-neutro-chiaro) / 0.72);
  font-family: var(--rb-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: color 0.18s ease;
}
#footer a:hover { color: hsl(var(--rb-grano-chiaro)); }

#footer .text-secondary-small {
  font-size: 13px;
  line-height: 1.55;
  color: hsl(var(--rb-neutro-chiaro) / 0.7);
  margin-bottom: 1rem;
}
#footer .text-uppercase-tracking {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: hsl(var(--rb-pietra-medio));
  text-transform: uppercase;
  margin-top: 1.25rem;
}
#footer .text-contact {
  font-size: 13px;
  color: hsl(var(--rb-neutro-chiaro) / 0.75);
  margin-bottom: 0.25rem;
}
#footer .border-top-dark { border-top: 1px solid hsl(var(--rb-neutro-chiaro) / 0.12); padding-top: 1.5rem !important; padding-bottom: 1rem !important; margin-top: 1rem; }
#footer .copyright-text { font-size: 12px; color: hsl(var(--rb-neutro-chiaro) / 0.5); margin: 0; }
#footer .footer-social-text { display: flex; gap: 1.5rem; justify-content: flex-end; flex-wrap: wrap; }
#footer .footer-social-text a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: hsl(var(--rb-neutro-chiaro) / 0.6);
}
#footer .footer-social-text a:hover { color: hsl(var(--rb-grano-chiaro)); }
#footer .brand-column img { filter: brightness(0) invert(1) opacity(0.9); }
#footer .brand-column { padding-right: 2rem; }

@media (max-width: 768px) {
  #footer .footer-social-text { justify-content: center; margin-top: 1rem; }
  #footer .brand-column { padding-right: 0; }
}

/* --------------------------------------------------------------------------
 * 7. Listing / category / search
 * -------------------------------------------------------------------------- */

/* Page title (.page-header h1) */
.page-header h1,
#category .page-header h1,
body[id^="category"] .page-header h1,
#js-product-list-header h1 {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: -0.01em;
  margin: 1.5rem 0;
  color: hsl(var(--rb-foreground));
}

/* Filter sidebar — give the narrow col-lg-2 column proper breathing room
   and turn each .facet into a cohesive card matching the rebrand cards.
   Force a wider sidebar at lg+ so facet labels don't wrap mid-word. */
#left-column.col-lg-2,
#left-column { padding-right: 1.25rem; }
@media (min-width: 992px) {
  body[id^="category"] #left-column,
  body[id^="category"] #left-column.col-lg-2,
  body[id^="search"] #left-column { flex: 0 0 22%; max-width: 22%; }
  body[id^="category"] #content-wrapper,
  body[id^="category"] #content-wrapper.col-lg-10 { flex: 0 0 78%; max-width: 78%; }
}
#left-column,
#search_filters_wrapper { background: transparent; }
#search_filters,
.block-categories,
#left-column .block {
  background: #fff;
  border: 1px solid hsl(var(--rb-border) / 0.45);
  border-radius: var(--rb-radius-lg);
  padding: 0;
  margin-bottom: 1rem;
  box-shadow: var(--rb-shadow-sm);
  overflow: hidden;
}
#search_filters .facet,
.block-categories .block-title { margin: 0; }
#search_filters .facet { padding: 1rem 1.125rem 0.625rem; border-bottom: 1px solid hsl(var(--rb-border) / 0.35); }
#search_filters .facet:last-child { border-bottom: 0; }

#search_filters .facet-title,
#search_filters .facet h4,
.block-categories .block-title,
#left-column .block .h6 {
  font-family: var(--rb-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: hsl(var(--rb-pietra-scuro)) !important;
  margin: 0 0 0.625rem !important;
  padding: 0 0 0.5rem !important;
  border-bottom: 1px solid hsl(var(--rb-border) / 0.4) !important;
  background: transparent !important;
  display: block;
}
#search_filters .facet-title span { padding: 0 !important; }

#search_filters .facet ul,
#search_filters .facet-type-checkbox,
#search_filters .facet-type-radio,
.block-categories .category-sub-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}
#search_filters .facet ul li,
#search_filters .facet-type-checkbox li { padding: 0; margin: 0; }
#search_filters .facet-label,
#search_filters .facet-label > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-family: var(--rb-font-body);
  font-size: 13px;
  line-height: 1.35;
  color: hsl(var(--rb-foreground));
  cursor: pointer;
  text-decoration: none;
}
#search_filters .facet-label:hover,
#search_filters .facet-label > a:hover { color: hsl(var(--rb-grano-scuro)); }
#search_filters .facet-label .magnitude,
#search_filters .facet-label small {
  color: hsl(var(--rb-pietra-scuro));
  font-size: 11px;
}

/* Custom checkbox / radio inside .custom-checkbox */
#search_filters .custom-checkbox,
.custom-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 1.5px solid hsl(var(--rb-border));
  border-radius: 3px;
  background: #fff;
  flex: 0 0 auto;
}
#search_filters .custom-checkbox input[type="checkbox"],
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
#search_filters .custom-checkbox .ps-shown-by-js,
.custom-checkbox .ps-shown-by-js {
  position: absolute !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
}
#search_filters .custom-checkbox input[type="checkbox"]:checked ~ .ps-shown-by-js,
.custom-checkbox input[type="checkbox"]:checked ~ .ps-shown-by-js {
  display: flex !important;
}
#search_filters .custom-checkbox input[type="checkbox"]:checked ~ * { color: hsl(var(--rb-grano-scuro)); }
#search_filters .custom-checkbox .ps-shown-by-js i,
.custom-checkbox .ps-shown-by-js i {
  color: hsl(var(--rb-grano-scuro)) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: static !important;
}

/* Color/swatch facets */
#search_filters .facet-type-color .color {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 1px solid hsl(var(--rb-border));
  margin-right: 0.5rem;
}

/* Range slider facets */
#search_filters .ui-slider {
  background: hsl(var(--rb-pietra-medio));
  border: 0;
  height: 3px;
  border-radius: 999px;
  margin: 1rem 0 0.5rem;
}
#search_filters .ui-slider .ui-slider-range { background: hsl(var(--rb-grano-medio)); border: 0; height: 3px; }
#search_filters .ui-slider .ui-slider-handle {
  width: 14px; height: 14px;
  background: #fff;
  border: 2px solid hsl(var(--rb-grano-medio));
  border-radius: 999px;
  top: -6px;
}

/* Clear-all filter row */
#search_filters .clear-all-wrapper,
#search_filters .js-search-link {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--rb-neutro-medio));
}
#search_filters .js-search-link:hover { color: hsl(var(--rb-grano-scuro)); }

/* Category tree links (block-categories) */
.block-categories .category-sub-menu li { padding: 0.25rem 0; }
.block-categories a {
  font-family: var(--rb-font-body);
  font-size: 13px;
  color: hsl(var(--rb-foreground));
  text-decoration: none;
}
.block-categories a:hover { color: hsl(var(--rb-grano-scuro)); }
.block-categories .navbar-toggler { padding: 0; margin: 0; border: 0; background: transparent; color: hsl(var(--rb-neutro-medio)); }

/* Hide the redundant page-header h1 + raw 40KB category description
   on category pages — the Elementor hero now takes over the role of
   introducing the category. The full description can be moved to an
   "info" CMS link or be folded into the hero copy later. */
body[id^="category"] #js-product-list-header h1,
body[id^="category"] .page-header h1 { display: none; }
body[id^="category"] .category-description.category-description-top,
body[id^="category"] .rebrand-category-desc {
  display: none;
}

/* --------------------------------------------------------------------------
 * Category hero (rebrand source CategoryPage.tsx, lines 28-54)
 * Fresh hero matching the React source 1:1. The original Elementor hero is
 * hidden — we render our own bg image + dark gradient + bottom-left content
 * stack (breadcrumb → eyebrow → title → lead) directly from category.tpl.
 * -------------------------------------------------------------------------- */

/* Hide PS's default breadcrumb strip on category pages — breadcrumb now
   lives INSIDE the hero overlay. */
body[id^="category"] > #wrapper > nav.breadcrumb,
body[id^="category"] #wrapper > .breadcrumb,
body[id^="category"] nav.breadcrumb { display: none !important; }

/* Hide the original Elementor-built hero section — we replaced it with
   .rb-hero. The hook still renders for legacy compatibility but is invisible. */
body[id^="category"] .rb-hero-wrap > .elementor { display: none; }

/* Eliminate the 30px top gap section#wrapper adds so the hero sits flush
   against the header (rebrand source has no gap between Navbar and hero). */
body[id^="category"] section#wrapper { padding-top: 0; }

.rb-hero-wrap {
  position: relative;
  /* Break out of #inner-wrapper.container so the hero is full-bleed,
     matching rebrand-source's w-full h-[80vh]. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* The hero itself — h-[80vh] min-h-[560px] w-full overflow-hidden */
.rb-hero {
  position: relative;
  height: 80vh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
}
.rb-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  display: block;
}
/* bg-gradient-to-t from-foreground/85 via-foreground/30 to-foreground/40 */
.rb-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    hsl(var(--rb-neutro-scuro) / 0.85) 0%,
    hsl(var(--rb-neutro-scuro) / 0.30) 60%,
    hsl(var(--rb-neutro-scuro) / 0.40) 100%
  );
}
/* max-w-7xl mx-auto px-6 lg:px-8, h-full, flex-col justify-end, pb-20 lg:pb-28 */
.rb-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 80rem;          /* max-w-7xl = 80rem */
  margin: 0 auto;
  padding: 0 2rem 7rem;       /* px-8 + pb-28 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .rb-hero-content { padding: 0 1.5rem 5rem; }
}

/* Breadcrumb — text-[11px] uppercase tracking-[0.25em] text-secondary/70 mb-6 */
.rb-hero .rb-hero-breadcrumb {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--rb-pietra-chiaro) / 0.7);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.rb-hero .rb-hero-breadcrumb a:link,
.rb-hero .rb-hero-breadcrumb a:visited {
  color: hsl(var(--rb-pietra-chiaro) / 0.7);
  text-decoration: none;
  transition: color 0.18s ease;
}
.rb-hero .rb-hero-breadcrumb a:link:hover,
.rb-hero .rb-hero-breadcrumb a:visited:hover { color: hsl(var(--rb-pietra-chiaro)); }
.rb-hero .rb-hero-breadcrumb .rb-bc-current { color: hsl(var(--rb-pietra-chiaro)); }
.rb-hero .rb-hero-breadcrumb .rb-bc-sep { opacity: 0.7; flex: 0 0 12px; }

/* Eyebrow — text-[11px] uppercase tracking-[0.35em] text-grano-chiaro mb-5 font-medium */
.rb-hero-eyebrow {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: hsl(var(--rb-grano-chiaro));
  margin: 0 0 1.25rem;
}

/* Title — font-heading text-4xl md:text-5xl lg:text-7xl text-secondary
   max-w-4xl leading-[1.05] whitespace-pre-line */
.rb-hero-title {
  font-family: var(--rb-font-heading);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem); /* text-4xl → text-7xl */
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: hsl(var(--rb-pietra-chiaro));
  max-width: 56rem;          /* max-w-4xl */
  white-space: pre-line;     /* honors \n in title text */
  margin: 0;
}

/* Lead — text-secondary/80 text-lg md:text-xl max-w-2xl mt-8 leading-relaxed font-light */
.rb-hero-lead {
  font-family: var(--rb-font-body);
  font-size: clamp(1rem, 1.25vw, 1.25rem); /* text-lg → text-xl */
  font-weight: 300;
  line-height: 1.625;        /* leading-relaxed */
  color: hsl(var(--rb-pietra-chiaro) / 0.8);
  max-width: 42rem;          /* max-w-2xl */
  margin: 2rem 0 0;          /* mt-8 */
}

@media (max-width: 768px) {
  .rb-hero { min-height: 480px; }
  .rb-hero .rb-hero-breadcrumb { letter-spacing: 0.18em; margin-bottom: 1.25rem; }
  .rb-hero-eyebrow { letter-spacing: 0.25em; }
  .rb-hero-lead { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
 * Category listing — page background, full-width grid, source-style section
 * header, and product cards matching rebrand-source CategoryPage.tsx lines
 * 95-191.
 * -------------------------------------------------------------------------- */

/* Source has the products section on bg-pietra/30 (warm beige). Apply it
   to the body on category pages so the white cards pop. */
body[id^="category"] { background: hsl(var(--rb-pietra-chiaro) / 0.35); }
body[id^="category"] section#wrapper,
body[id^="category"] #inner-wrapper,
body[id^="category"] #main-page-content { background: transparent !important; }

/* Hide the left filter column on category pages — source has a full-width
   grid, no sidebar. The column still exists in the DOM so the "Filtra"
   button in the section header can slide it in as a drawer. */
body[id^="category"] #left-column {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(400px, 92vw);
  max-width: 92vw;
  flex: unset;
  z-index: 1060;
  background: hsl(var(--rb-background));
  box-shadow: var(--rb-shadow-lg);
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s ease;
  display: block;
}
body[id^="category"].rb-filters-open #left-column { transform: translateX(0); }
body[id^="category"] #content-wrapper,
body[id^="category"] #content-wrapper.col-lg-10 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Backdrop behind the drawer */
.rb-filter-overlay {
  position: fixed;
  inset: 0;
  background: hsl(var(--rb-neutro-scuro) / 0.45);
  z-index: 1055;
}

/* Filter toggle button in the section header */
.rb-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid hsl(var(--rb-border));
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--rb-foreground));
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.rb-filter-toggle:hover {
  background: hsl(var(--rb-grano-medio));
  border-color: hsl(var(--rb-grano-medio));
  color: hsl(var(--rb-neutro-scuro));
}
.rb-filter-toggle svg { display: block; }
.rb-grid-header-side {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ---- Drawer inner styling --------------------------------------------- */

/* Hide the redundant subcategory tree (Tenero / Duro dropdowns) — the
   facets below already cover the same filtering. */
body[id^="category"] #left-column .block-categories,
body[id^="category"] #left-column .block.block-toggle.block-categories { display: none !important; }

/* Drawer title row injected by the close-button JS (rb-filter-close) */
body[id^="category"] #left-column::before {
  content: "Filtri";
  display: block;
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  color: hsl(var(--rb-foreground));
  letter-spacing: -0.01em;
}
.rb-filter-close {
  position: fixed;
  top: 1.25rem;
  right: 1rem;
  z-index: 1062;
  width: 36px;
  height: 36px;
  border: 1px solid hsl(var(--rb-border));
  background: transparent;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  color: hsl(var(--rb-foreground));
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.rb-filter-close:hover { background: hsl(var(--rb-grano-medio)); color: hsl(var(--rb-neutro-scuro)); }
body.rb-filters-open .rb-filter-close { display: inline-flex; }

/* Facets — clean section per facet */
body[id^="category"] #left-column #facets_search_wrapper { padding: 0; background: transparent; }
body[id^="category"] #left-column .facet,
body[id^="category"] #left-column section.facet {
  border: none;
  background: transparent;
  border-top: 1px solid hsl(var(--rb-border) / 0.5);
  padding: 1.5rem 1.5rem !important;
  margin: 0;
}
body[id^="category"] #left-column .facet:first-of-type { border-top: none; padding-top: 1.5rem !important; }
body[id^="category"] #left-column .facet-title,
body[id^="category"] #left-column .facet-title span,
body[id^="category"] #left-column .block-title,
body[id^="category"] #left-column .facet h2,
body[id^="category"] #left-column .facet .h6 {
  font-family: var(--rb-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: hsl(var(--rb-neutro-scuro)) !important;
  margin: 0 0 1rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Facet items / checkboxes */
body[id^="category"] #left-column .facet-label,
body[id^="category"] #left-column .facet ul,
body[id^="category"] #left-column .facet li {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  list-style: none;
}
body[id^="category"] #left-column .facet li,
body[id^="category"] #left-column .facet .facet-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0 !important;
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 400;
  color: hsl(var(--rb-foreground));
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}
body[id^="category"] #left-column .facet-label a,
body[id^="category"] #left-column .facet a {
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 400;
  color: hsl(var(--rb-foreground));
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  flex: 1;
  padding: 0;
}
body[id^="category"] #left-column .facet-label a:hover,
body[id^="category"] #left-column .facet a:hover { color: hsl(var(--rb-grano-scuro)); }
body[id^="category"] #left-column .facet .magnitude {
  color: hsl(var(--rb-neutro-medio));
  font-size: 12px;
  margin-left: 0.25rem;
}

/* Native checkbox styling */
body[id^="category"] #left-column input[type="checkbox"],
body[id^="category"] #left-column .custom-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.4px solid hsl(var(--rb-border));
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 16px;
  position: relative;
  display: inline-block;
  margin: 0;
}
body[id^="category"] #left-column input[type="checkbox"]:checked,
body[id^="category"] #left-column .custom-checkbox input[type="checkbox"]:checked {
  background: hsl(var(--rb-grano-medio));
  border-color: hsl(var(--rb-grano-medio));
}
body[id^="category"] #left-column input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid hsl(var(--rb-neutro-scuro));
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* Active filters / clear-all */
body[id^="category"] #left-column #search_filter_controls .btn,
body[id^="category"] #left-column .js-search-filters-clear-all {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: hsl(var(--rb-terra-medio));
  border: 1px solid hsl(var(--rb-border));
  border-radius: 999px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}
body[id^="category"] #left-column .active_filters,
body[id^="category"] #left-column .active_filters .active-filter-title {
  background: transparent;
  border: none;
  font-family: var(--rb-font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--rb-neutro-medio));
}
body[id^="category"] #left-column .filter-block {
  background: hsl(var(--rb-pietra-chiaro) / 0.5);
  color: hsl(var(--rb-foreground));
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  margin: 0 0.5rem 0.5rem 0;
  font-size: 12px;
}

/* Hide collapse arrows / FA chevrons inside the drawer */
body[id^="category"] #left-column .collapse-icons,
body[id^="category"] #left-column .navbar-toggler,
body[id^="category"] #left-column .block-title .arrows { display: none !important; }

/* Drawer's overall block titles (e.g., "èViva la Farina") - keep them
   styled like facet titles for consistency */
body[id^="category"] #left-column .block-title {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--rb-neutro-medio));
  margin: 0 0 0.875rem;
  padding: 0;
  background: transparent;
  border: none;
}

/* Hide PS's small h1 page-title + the default toolbar (sort/per-page/total)
   — the source replaces it with the LA SELEZIONE / Tutta la linea section
   header that we render in category.tpl. */
body[id^="category"] #js-product-list-header,
body[id^="category"] #js-product-list-top,
body[id^="category"] .products-selection,
body[id^="category"] .products-sort-order { display: none !important; }

/* Section header — eyebrow + h2 on the left, subhead on the right */
.rb-grid-header {
  padding: 5rem 0 3rem;
}
.rb-grid-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.rb-grid-eyebrow {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(var(--rb-grano-scuro));
  margin: 0 0 0.75rem;
}
.rb-grid-title {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: hsl(var(--rb-foreground));
  margin: 0;
}
.rb-grid-subhead {
  font-family: var(--rb-font-body);
  font-size: 0.875rem;
  color: hsl(var(--rb-neutro-medio));
  max-width: 22rem;
  margin: 0;
}
@media (max-width: 768px) {
  .rb-grid-header { padding: 3rem 0 1.5rem; }
  .rb-grid-header-inner { padding: 0 1.25rem; }
}

/* Product card — matches source's white card design */
.product-miniature,
.product-miniature-default,
.product-miniature-layout-3,
.js-product-miniature {
  background: #fff;
  border: 1px solid hsl(var(--rb-border) / 0.4);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  padding: 0;
  margin-bottom: 1.5rem;
  display: flex !important;
  flex-direction: column;
}
.product-miniature:hover { box-shadow: var(--rb-shadow-md); }

/* Image area — aspect-square, image fills it. Hide alt-text bleed when
   the source image fails to load (dev env): make text transparent so the
   broken-image alt-attribute doesn't print across the card. */
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail,
.product-miniature .thumbnail-container .product-thumbnail picture {
  background: hsl(var(--rb-pietra-chiaro) / 0.35);
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
.product-miniature .thumbnail-container .product-thumbnail {
  aspect-ratio: 1 / 1;
}
.product-miniature .thumbnail-container picture,
.product-miniature .thumbnail-container img {
  width: 100%;
  height: 100%;
  display: block;
}
.product-miniature .thumbnail-container img {
  object-fit: cover;
  transition: transform 0.5s ease;
  color: transparent; /* hide alt-text when image is broken */
  font-size: 0;
}
.product-miniature:hover .thumbnail-container img { transform: scale(1.05); }
/* Hide the lazy-load placeholder/broken icon outline */
.product-miniature .thumbnail-container img.lazy-product-image:not([src]),
.product-miniature .thumbnail-container img[data-ll-status="error"] {
  visibility: hidden;
}

/* Card body — flex column, padding p-5 */
.product-miniature .product-description,
.product-miniature .product-meta {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Product title — serif h3 */
.product-miniature .product-title,
.product-miniature h3,
.product-miniature h2 {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: hsl(var(--rb-foreground));
  margin: 1.25rem 1.25rem 0.5rem;
  min-height: 0;
}
.product-miniature .product-title a {
  color: hsl(var(--rb-foreground));
  text-decoration: none;
}
.product-miniature .product-title a:hover { color: hsl(var(--rb-grano-scuro)); }

/* Description / weight rows — small gray */
.product-miniature .product-description-short,
.product-miniature .product-desc,
.product-miniature .product-reference {
  font-family: var(--rb-font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: hsl(var(--rb-neutro-medio));
  margin: 0 1.25rem 0.25rem;
}

/* Price + Add-to-cart row at the bottom of the card */
.product-miniature .product-price-and-shipping,
.product-miniature .price {
  font-family: var(--rb-font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  color: hsl(var(--rb-foreground));
  padding: 0 1.25rem 1.25rem;
  margin-top: auto;
}
.product-miniature .regular-price {
  text-decoration: line-through;
  color: hsl(var(--rb-neutro-medio));
  font-size: 0.875rem;
  font-weight: 400;
  margin-right: 0.375rem;
}

/* Product flags — solid pill badges top-left of image */
.product-miniature .product-flags,
.product-miniature .product-flag-wrapper { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; pointer-events: none; }
.product-miniature .product-flag,
.product-miniature .discount-product {
  background: hsl(var(--rb-grano-medio));
  color: hsl(var(--rb-neutro-scuro));
  font-family: var(--rb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.625rem;
  border-radius: 2px;
  display: inline-block;
}
.product-miniature .product-flag.new { background: hsl(var(--rb-ulivo-medio)); color: #fff; }
.product-miniature .product-flag.on-sale { background: hsl(var(--rb-terra-medio)); color: #fff; }

/* Add-to-cart button — gold rectangular pill matching source's "AGGIUNGI" */
.product-miniature .product-add-to-cart,
.product-miniature .product-add-to-cart .btn,
.product-miniature .add-to-cart,
.product-miniature .quick-view {
  font-family: var(--rb-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: hsl(var(--rb-grano-medio));
  color: hsl(var(--rb-neutro-scuro));
  border: none;
  border-radius: 4px;
  padding: 0.625rem 1rem;
}
.product-miniature .product-add-to-cart:hover,
.product-miniature .product-add-to-cart .btn:hover,
.product-miniature .add-to-cart:hover { background: hsl(var(--rb-grano-scuro)); color: #fff; }

/* The grid container — full-width 4-col on lg, 2 on sm */
body[id^="category"] #js-product-list .products,
body[id^="category"] .products.row {
  max-width: 80rem;
  margin: 0 auto 4rem;
  padding: 0 2rem;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
body[id^="category"] #js-product-list .products > *,
body[id^="category"] .products.row > * {
  flex: unset !important;
  max-width: unset !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1024px) {
  body[id^="category"] #js-product-list .products,
  body[id^="category"] .products.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  body[id^="category"] #js-product-list .products,
  body[id^="category"] .products.row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 1.25rem;
  }
}
@media (max-width: 480px) {
  body[id^="category"] #js-product-list .products,
  body[id^="category"] .products.row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 1rem 0;
  margin: 0;
}
.breadcrumb a,
.breadcrumb .active {
  color: hsl(var(--rb-neutro-medio));
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.breadcrumb a:hover { color: hsl(var(--rb-grano-scuro)); }
.breadcrumb-item + .breadcrumb-item::before { color: hsl(var(--rb-neutro-medio)); }

/* Pagination */
.pagination,
.page-list { display: flex; gap: 0.375rem; justify-content: center; align-items: center; padding: 2rem 0; }
.pagination .page-list li,
.page-list li {
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: var(--rb-radius);
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.pagination .page-list li.current,
.pagination .page-list li:hover {
  border-color: hsl(var(--rb-grano-medio));
  background: hsl(var(--rb-grano-chiaro));
}
.pagination .page-list li a,
.pagination .page-list li {
  font-family: var(--rb-font-body);
  font-weight: 500;
  font-size: 14px;
  color: hsl(var(--rb-foreground));
}
.pagination .page-list li.current a { color: hsl(var(--rb-grano-scuro)); }

/* Subcategory cards (block-categories on category page) */
.subcategories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.subcategory {
  background: #fff;
  border: 1px solid hsl(var(--rb-border) / 0.4);
  border-radius: var(--rb-radius-lg);
  overflow: hidden;
  padding: 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.subcategory:hover { transform: translateY(-2px); box-shadow: var(--rb-shadow-md); }

/* Quick view + wishlist + compare buttons on miniature */
.product-miniature .functional-buttons,
.product-miniature .iqit-product-functional-btns,
.product-miniature .btn-iqitwishlist-add,
.product-miniature .js-quick-view-iqit {
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  color: hsl(var(--rb-foreground));
  border: 1px solid hsl(var(--rb-border) / 0.5);
}

/* Filter button (mobile / collapsed) */
.btn-filter,
#search_filter_toggler,
button[data-target*="filter"] {
  background: #fff;
  border: 1px solid hsl(var(--rb-border));
  color: hsl(var(--rb-foreground));
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * 8. Product page
 * Layout: breadcrumb → 2-col (gallery | info) → tabs/description →
 * feature icons (new) → specs (new) → testimonials → related → footer
 * -------------------------------------------------------------------------- */

/* Product hero — force 50/50 split so the gallery is large and the info
   column has breathing room (overrides theme-editor pp_img_width=4). */
@media (min-width: 768px) {
  body#product .col-product-image,
  body#product .col-product-image.col-md-4,
  body#product .col-product-image.col-md-5,
  body#product .col-product-image.col-md-6 { flex: 0 0 50%; max-width: 50%; padding-right: 2rem; }
  body#product .col-product-info,
  body#product .col-product-info.col-md-8,
  body#product .col-product-info.col-md-7,
  body#product .col-product-info.col-md-6 { flex: 0 0 50%; max-width: 50%; padding-left: 2rem; }
}

#product .product-info-row { margin-bottom: 3rem; padding-top: 1.5rem; }

/* Product title — PrestaShop products often have very long SEO names.
   Cap at 3 lines max and reduce font-size so the title doesn't dominate. */
#product h1.h1,
#product h1.page-title,
#product h1.h1.page-title,
#product .product-h1,
#main h1.h1 {
  font-family: var(--rb-font-heading) !important;
  font-size: 1.625rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  color: hsl(var(--rb-foreground)) !important;
  margin: 0 0 0.875rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: calc(1.25em * 3) !important;
}
#product h1 span,
#product .product-h1 span { display: inline; }
#product .product-reference { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--rb-pietra-scuro)); }

/* Hide the duplicated long-form "description short" block from the info
   column (it actually contains the long marketing copy, which is also
   shown in the DESCRIZIONE tab below). Keeps the buy form above the fold. */
#product .col-product-info .product-description.rte-content,
#product .col-product-info > .product-information > .product-description,
#product #product-description-short-119 { display: none; }

/* iqitproducttags — clean up the SEO tag cloud that lives between the
   buy form and the tabs. Show as a single compact "Tags" line. */
#product .iqitproducttags {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--rb-border) / 0.5);
}
#product .iqitproducttags::before {
  content: 'Tag prodotto';
  display: block;
  font-family: var(--rb-font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--rb-pietra-scuro));
  margin-bottom: 0.625rem;
}
#product .iqitproducttags ul,
#product .iqitproducttags .product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  max-height: 5.25rem;
  overflow: hidden;
  position: relative;
}
#product .iqitproducttags a {
  display: inline-block;
  font-family: var(--rb-font-body);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: hsl(var(--rb-neutro-medio));
  background: hsl(var(--rb-pietra-chiaro) / 0.6);
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: 999px;
  padding: 0.2rem 0.625rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
#product .iqitproducttags a:hover {
  background: hsl(var(--rb-grano-chiaro));
  color: hsl(var(--rb-grano-scuro));
}

/* Product tabs section — give it a clean wrapper and space */
#product .tabs.product-tabs,
#product .product-tabs {
  margin: 3rem 0 2rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--rb-border) / 0.5);
}
#product .product-tabs .tab-pane { padding: 2rem 0; max-width: 920px; }
#product .product-tabs .tab-pane h2,
#product .product-tabs .tab-pane h3 {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 1.5rem 0 0.75rem;
  letter-spacing: -0.005em;
}
#product .product-tabs .tab-pane p { line-height: 1.7; margin-bottom: 1rem; }

/* Gallery — show a clean square placeholder when product image is missing
   (PrestaShop renders a 0-natural-size <img> in that case, which collapses
   the column without our min-height). */
#product .images-container,
#product .col-product-image .images-container {
  position: relative !important;
  display: block !important;
  min-height: 540px;
  background: hsl(var(--rb-pietra-chiaro) / 0.5);
  border-radius: var(--rb-radius-lg);
  border: 1px solid hsl(var(--rb-border) / 0.4);
  overflow: hidden;
}
#product .product-cover,
#product .col-product-image .product-cover,
#product .images-container .product-cover {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  min-height: 540px;
  aspect-ratio: 1 / 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
#product .product-cover::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(135deg, hsl(var(--rb-pietra-chiaro)) 0%, hsl(var(--rb-grano-chiaro) / 0.45) 100%);
  z-index: 0;
}
#product .product-cover > * { position: relative; z-index: 1; }
#product .product-cover img { display: block; max-width: 100%; height: auto; max-height: 100%; }
#product .product-cover img[src*="-large_default"]:not([src=""]) { width: 100%; }
#product .product-images .thumb-container,
#product .product-thumbs .thumb-container {
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: var(--rb-radius);
  overflow: hidden;
  margin: 0.5rem 0;
}
#product .product-images .thumb-container.selected,
#product .product-thumbs .thumb-container.selected,
#product .product-images .thumb.selected,
#product .product-images .thumb:hover { border-color: hsl(var(--rb-grano-medio)); }

/* Price */
#product .product-prices,
#product .current-price {
  font-family: var(--rb-font-heading);
  font-weight: 500;
}
#product .product-prices .current-price,
#product .product-prices .current-price-display {
  font-size: 2rem;
  color: hsl(var(--rb-grano-scuro));
  letter-spacing: -0.01em;
}
#product .product-prices .regular-price {
  text-decoration: line-through;
  color: hsl(var(--rb-neutro-medio));
  font-size: 1.125rem;
  margin-right: 0.5rem;
}
#product .product-prices .discount {
  background: hsl(var(--rb-terra-medio));
  color: #fff;
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: var(--rb-radius);
  margin-left: 0.5rem;
}
#product .tax-shipping-delivery-label { color: hsl(var(--rb-neutro-medio)); font-size: 12px; }

/* Quantity + add to cart row */
#product .product-quantity,
#product .product-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
#product .product-quantity .input-group,
#product .input-touchspin {
  width: auto;
  min-width: 120px;
}
#product .input-group .form-control,
#product .qty .input-group .form-control,
#product .bootstrap-touchspin .form-control {
  text-align: center;
  font-family: var(--rb-font-heading);
  font-size: 1.125rem;
  border-color: hsl(var(--rb-border));
}
#product .btn-touchspin {
  background: #fff;
  border: 1px solid hsl(var(--rb-border)) !important;
  color: hsl(var(--rb-foreground)) !important;
  width: 44px;
}
#product .btn-touchspin:hover { background: hsl(var(--rb-pietra-chiaro)); }
#product .add-to-cart,
#product button.add-to-cart {
  background: hsl(var(--rb-primary));
  border: 1px solid hsl(var(--rb-primary));
  color: hsl(var(--rb-neutro-scuro));
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  border-radius: var(--rb-radius);
  box-shadow: var(--rb-shadow-sm);
}
#product .add-to-cart:hover { background: hsl(var(--rb-grano-scuro)); border-color: hsl(var(--rb-grano-scuro)); color: hsl(var(--rb-neutro-chiaro)); box-shadow: var(--rb-shadow-md); }

#product .product-additional-info,
#product .social-sharing { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--rb-border) / 0.5); }
#product .product-description-short { font-size: 14px; line-height: 1.6; color: hsl(var(--rb-neutro-medio)); }

/* Tabs (descrizione / dettagli / recensioni) */
#product .nav-tabs,
#product .product-information .nav-tabs {
  border-bottom: 1px solid hsl(var(--rb-border) / 0.6);
  padding: 1rem 0 0;
  display: flex;
  gap: 2rem;
}
#product .nav-tabs .nav-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 0;
  color: hsl(var(--rb-neutro-medio));
  font-family: var(--rb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#product .nav-tabs .nav-link.active,
#product .nav-tabs .nav-link:hover {
  color: hsl(var(--rb-foreground));
  border-bottom-color: hsl(var(--rb-grano-medio));
}
#product .tab-content { padding: 1.5rem 0; }
#product .product-description,
#product .tab-pane { font-family: var(--rb-font-body); color: hsl(var(--rb-foreground)); line-height: 1.7; }
#product .product-description h2,
#product .product-description h3,
#product .product-description h4 { font-family: var(--rb-font-heading); margin-top: 1.5rem; }

/* Product features list (built-in) */
#product .product-features,
#product .data-sheet,
#product table.data-sheet {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
}
#product .data-sheet dt,
#product .data-sheet dd,
#product .data-sheet .name,
#product .data-sheet .value { padding: 0.75rem 0; border-bottom: 1px solid hsl(var(--rb-border) / 0.4); font-size: 14px; }
#product .data-sheet .name { font-family: var(--rb-font-heading); font-weight: 500; color: hsl(var(--rb-foreground)); }
#product .data-sheet .value { color: hsl(var(--rb-neutro-medio)); }

/* Comments (product comments module) → testimonials */
#product-comments-list,
#product-comments {
  margin: 2rem 0;
}
#product-comments-list .comment,
#product-comments-list .product-comment {
  background: #fff;
  border: 1px solid hsl(var(--rb-border) / 0.4);
  border-radius: var(--rb-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--rb-shadow-sm);
}
#product-comments-list .grade-stars,
#product-comments-list .star-on { color: hsl(var(--rb-grano-medio)); }
#product-comments-list .customer-name { font-family: var(--rb-font-heading); font-weight: 500; }

/* ───────────────────────────────────────────────────────────────────────────
   "Write your review" modal (productcomments post-comment / alert modals)

   The theme override template used to drop the `productCommentMandatoryMessage`
   + `ratingChosen` globals, which made post-comment.js throw before it could
   render the rating stars or bind the form (template now restores them). These
   rules give the modal a branded, single-column layout that never exceeds the
   viewport — it pairs with `modal-dialog-centered modal-dialog-scrollable`
   added to the dialog in the template.
   ─────────────────────────────────────────────────────────────────────────── */
.product-comment-modal .modal-dialog {
  max-width: 620px;
  width: calc(100% - 2rem);
}
.product-comment-modal .modal-content {
  background: hsl(var(--rb-background));
  border: 1px solid hsl(var(--rb-border) / 0.6);
  border-radius: var(--rb-radius-lg);
  box-shadow: var(--rb-shadow-lg);
  overflow: hidden;
}
.product-comment-modal .modal-header {
  align-items: center;
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid hsl(var(--rb-border) / 0.5);
}
.product-comment-modal .modal-header h2,
.product-comment-modal .modal-header .h2 {
  float: none;
  margin: 0;
  font-family: var(--rb-font-heading);
  font-weight: var(--rb-heading-weight);
  font-size: 1.5rem;
  letter-spacing: var(--rb-heading-tracking);
  color: hsl(var(--rb-foreground));
}
.product-comment-modal .modal-header .close {
  opacity: 0.55;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: 0;
  color: hsl(var(--rb-foreground));
  transition: opacity 0.15s ease;
}
.product-comment-modal .modal-header .close:hover { opacity: 1; }
.product-comment-modal .modal-body {
  padding: 1.5rem 1.75rem 1.75rem;
  max-height: min(70vh, 640px);
  overflow-y: auto;
}

/* Product summary header — compact thumbnail + name + clamped description */
.product-comment-modal .post-comment-product {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid hsl(var(--rb-border) / 0.45);
}
/* ID-scoped so the global `#product .product-cover` gallery sizing (which is
   ID-specific and would otherwise stretch this thumb to ~540px) cannot win. */
#post-product-comment-modal .post-comment-product .product-cover {
  flex: 0 0 84px;
  width: 84px !important;
  height: 84px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: var(--rb-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid hsl(var(--rb-border) / 0.5);
}
#post-product-comment-modal .post-comment-product .product-cover img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}
.product-comment-modal .post-comment-product-info { min-width: 0; }
.product-comment-modal .post-comment-product-info h3,
.product-comment-modal .post-comment-product-info .h3 {
  font-family: var(--rb-font-heading);
  font-weight: var(--rb-heading-weight);
  font-size: 1.0625rem;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  color: hsl(var(--rb-foreground));
}
.product-comment-modal .post-comment-product-info .product-desc {
  font-size: 0.85rem;
  line-height: 1.45;
  color: hsl(var(--rb-neutro-medio));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-comment-modal .post-comment-product-info .product-desc * {
  font-size: inherit !important;
  margin: 0 !important;
}

/* Rating criteria — one row each, label left, gold stars right */
.product-comment-modal #criterions_list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.product-comment-modal #criterions_list li { margin-bottom: 0.6rem; }
/* ID-scoped to beat the module's `#post-product-comment-modal .criterion-rating`
   rule that right-aligns the row. We want label + stars together on the left. */
#post-product-comment-modal .criterion-rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
}
#post-product-comment-modal .criterion-rating label {
  margin: 0;
  font-family: var(--rb-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(var(--rb-foreground));
}
/* Brand-colour the Font Awesome glyph stars: empty = muted stone, full = grano */
#post-product-comment-modal .grade-stars .star {
  color: hsl(var(--rb-pietra-scuro));
}
#post-product-comment-modal .grade-stars .star-on,
#post-product-comment-modal .grade-stars .star-hover {
  color: hsl(var(--rb-grano-medio));
}
.product-comment-modal #ratingNotChosen {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: hsl(var(--rb-terra-medio));
  text-align: left;
}

/* Form fields */
.product-comment-modal label.form-label {
  font-family: var(--rb-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: hsl(var(--rb-foreground));
  margin: 0.85rem 0 0.4rem;
}
.product-comment-modal input[type="text"],
.product-comment-modal input:not([type]),
.product-comment-modal textarea {
  width: 100%;
  border: 1px solid hsl(var(--rb-border));
  border-radius: var(--rb-radius);
  background: #fff;
  padding: 0.65rem 0.85rem;
  font-family: var(--rb-font-body);
  font-size: 0.95rem;
  color: hsl(var(--rb-foreground));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-comment-modal input[type="text"] { height: auto; }
.product-comment-modal textarea { min-height: 110px; resize: vertical; }
.product-comment-modal input:focus,
.product-comment-modal textarea:focus {
  outline: none;
  border-color: hsl(var(--rb-grano-medio));
  box-shadow: 0 0 0 3px hsl(var(--rb-grano-medio) / 0.18);
}
.product-comment-modal input.error,
.product-comment-modal textarea.error {
  border-color: hsl(var(--rb-terra-medio));
  background: hsl(var(--rb-terra-chiaro) / 0.18);
}
.product-comment-modal input.valid,
.product-comment-modal textarea.valid {
  border-color: hsl(var(--rb-ulivo-medio));
}
.product-comment-modal .required { color: hsl(var(--rb-neutro-medio)); }
.product-comment-modal sup.required { color: hsl(var(--rb-terra-medio)); }

/* Footer buttons */
.product-comment-modal .post-comment-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.product-comment-modal .post-comment-buttons .btn-comment {
  margin-left: 0;
}
.product-comment-modal .btn-comment,
.product-comment-modal .btn-comment-inverse {
  border-radius: var(--rb-radius);
  font-family: var(--rb-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  height: auto;
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.product-comment-modal .btn-comment {
  background: hsl(var(--rb-grano-medio));
  border: 1px solid hsl(var(--rb-grano-medio));
  color: hsl(var(--rb-neutro-scuro));
}
.product-comment-modal .btn-comment:hover {
  background: hsl(var(--rb-grano-scuro));
  border-color: hsl(var(--rb-grano-scuro));
  color: #fff;
}
.product-comment-modal .btn-comment-inverse {
  background: transparent;
  border: 1px solid hsl(var(--rb-border));
  color: hsl(var(--rb-foreground));
}
.product-comment-modal .btn-comment-inverse:hover {
  background: hsl(var(--rb-pietra-chiaro));
  border-color: hsl(var(--rb-pietra-scuro));
  color: hsl(var(--rb-foreground));
}

/* Confirmation / error alert modals share the same shell */
.product-comment-modal .modal-header .material-icons { color: hsl(var(--rb-ulivo-medio)); }
.product-comment-modal .modal-header .material-icons.error { color: hsl(var(--rb-terra-medio)); }

@media (max-width: 575px) {
  .product-comment-modal .modal-body { padding: 1.25rem 1.25rem 1.5rem; }
  .product-comment-modal .post-comment-product { flex-direction: row; }
  .product-comment-modal .post-comment-buttons { flex-direction: column-reverse; }
  .product-comment-modal .post-comment-buttons .btn-comment,
  .product-comment-modal .post-comment-buttons .btn-comment-inverse { width: 100%; }
}

/* Related products grid */
#product .product-accessories,
#product .accessories,
.product-accessories,
section.crossselling-products {
  margin: 3rem 0 0;
  padding: 2.5rem 0;
  border-top: 1px solid hsl(var(--rb-border) / 0.5);
}
.product-accessories h2,
.product-accessories h3,
section.crossselling-products h2,
section.crossselling-products .section-title {
  font-family: var(--rb-font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  text-align: center;
  color: hsl(var(--rb-foreground));
}
section.crossselling-products .section-title span { font-weight: 500; }

/* The theme's section-title accent underline is an off-brand bright green
   (#3db972 from iqitthemeeditor). Recolour to the brand gold everywhere, and
   centre it under the crossselling heading. */
.section-title::after { border-bottom-color: hsl(var(--rb-grano-medio)) !important; }
section.crossselling-products .section-title::after { left: 50%; right: auto; width: 48px; transform: translateX(-50%); }

/* Crossselling carousel: the swiper sizes slides off window width (≈6 per
   view) but lives in the cart's narrow column → cards collapse to ~110px and
   titles wrap one word per line. A container-aware re-sizing script in the
   module template fixes slidesPerView; this just tidies spacing + arrows. */
section.crossselling-products .swiper-slide { height: auto; padding: 0 0.5rem; box-sizing: border-box; }
section.crossselling-products .swiper-slide .product-miniature { margin-bottom: 0; height: 100%; }
section.crossselling-products .swiper-button-prev,
section.crossselling-products .swiper-button-next { color: hsl(var(--rb-grano-scuro)); }
section.crossselling-products .swiper-button-prev::after,
section.crossselling-products .swiper-button-next::after { font-size: 1.5rem; }
section.crossselling-products .swiper-pagination-product .swiper-pagination-bullet-active { background: hsl(var(--rb-grano-medio)); }

/* Add-to-cart success modal */
#blockcart-modal .modal-content,
#blockcart-modal .modal-header,
#blockcart-modal .modal-body {
  background: hsl(var(--rb-background));
  border-radius: var(--rb-radius-lg);
}
#blockcart-modal h4 { font-family: var(--rb-font-heading); }

@media (max-width: 768px) {
  #product h1, #product .product-h1 { font-size: 1.5rem; }
  #product .product-prices .current-price { font-size: 1.5rem; }
}

/* New structural sections (rebrand-product-*) */
.rebrand-product-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid hsl(var(--rb-border) / 0.5);
  border-bottom: 1px solid hsl(var(--rb-border) / 0.5);
}
.rebrand-product-features .feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.rebrand-product-features .feature i,
.rebrand-product-features .feature svg {
  width: 32px; height: 32px;
  color: hsl(var(--rb-accent));
}
.rebrand-product-features .feature h4 {
  font-family: var(--rb-font-heading);
  font-size: 1.0625rem;
  margin: 0;
}
.rebrand-product-features .feature p { font-size: 0.875rem; color: hsl(var(--rb-neutro-medio)); margin: 0; }

.rebrand-product-specs {
  padding: 2.5rem 0;
}
.rebrand-product-specs table {
  width: 100%;
  border-collapse: collapse;
}
.rebrand-product-specs th,
.rebrand-product-specs td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(var(--rb-border) / 0.5);
  text-align: left;
}
.rebrand-product-specs th {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  color: hsl(var(--rb-neutro-scuro));
  width: 35%;
}

.rebrand-product-testimonials {
  background: hsl(var(--rb-pietra-chiaro));
  padding: 3rem 0;
}

.rebrand-product-related {
  padding: 3rem 0;
}

@media (max-width: 768px) {
  .rebrand-product-features { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
 * 9. Non-Elementor pages
 * Covers cart, checkout, account, auth, contact, 404, CMS pages, search.
 * Markup is stock PrestaShop / iqitcheckout — style via class selectors only.
 * -------------------------------------------------------------------------- */

/* Shared card pattern */
#checkout .card,
#cart .card,
#authentication .card,
#my-account .card,
#identity .card,
#addresses .card,
#address .card,
#history .card,
#order-detail .card,
#order-follow .card,
#order-slip .card,
#order-confirmation .card,
#contact .card,
#cms .page-content,
#pagenotfound .page-content,
#search .page-content,
.page-wrapper > .card {
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: var(--rb-radius-lg);
  box-shadow: var(--rb-shadow-sm);
  background: #fff;
  margin-bottom: 1.25rem;
}
#checkout .card-header,
#cart .card-header,
#authentication .card-header,
.card-block-title,
.card .card-title {
  background: hsl(var(--rb-pietra-chiaro));
  border-bottom: 1px solid hsl(var(--rb-border) / 0.5);
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  padding: 1rem 1.25rem;
}
#checkout .card-body,
#cart .card-body,
.card .card-body { padding: 1.25rem 1.5rem; }

/* Page header (h1) on non-listing pages */
#cart .page-header h1,
#checkout .page-header h1,
#authentication .page-header h1,
#my-account .page-header h1,
#identity .page-header h1,
#addresses .page-header h1,
#address .page-header h1,
#history .page-header h1,
#contact .page-header h1,
#cms .page-header h1,
#pagenotfound .page-header h1,
#search .page-header h1 {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: hsl(var(--rb-foreground));
  margin: 1.25rem 0;
}

/* Cart line items */
#cart .cart-item,
#cart .cart-grid-body .product-line-info,
.cart-item {
  border-bottom: 1px solid hsl(var(--rb-border) / 0.4);
  padding: 1.25rem 0;
}
#cart .cart-line-product-actions a,
#cart .remove-from-cart {
  color: hsl(var(--rb-neutro-medio));
}
#cart .cart-line-product-actions a:hover { color: hsl(var(--rb-grano-scuro)); }
#cart .cart-summary,
.cart-summary {
  background: hsl(var(--rb-pietra-chiaro));
  border: 1px solid hsl(var(--rb-border) / 0.4);
  border-radius: var(--rb-radius-lg);
}
#cart .cart-total,
.cart-summary .cart-total {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  color: hsl(var(--rb-grano-scuro));
}
#cart .cart-detailed-actions .btn-primary { width: 100%; font-size: 13px; }

/* ============================================================
   Off-canvas mini-cart (ps_shoppingcart → .blockcart-content)
   The slide-in panel from the header cart toggle. Re-skinned to
   the rebrand design system: serif product name, bordered qty
   stepper with real +/− glyphs (the stock FA6 touchspin glyphs
   don't load — theme ships FA4 — so they render as tofu), and
   gold / olive-outline CTA buttons matching the cart page.
   ============================================================ */
.blockcart-content {
  padding: 1.5rem 1.5rem 2rem;
  background: hsl(var(--rb-background));
  font-family: var(--rb-font-body);
}
/* Panel title + close */
.blockcart-content .cart-title .modal-title,
.blockcart-content .cart-title span:not(.close span) {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  color: hsl(var(--rb-foreground));
}
.blockcart-content .cart-title hr,
.blockcart-content hr { border: 0; border-top: 1px solid hsl(var(--rb-border) / 0.5); }
.blockcart-content #js-cart-close { color: hsl(var(--rb-neutro-medio)); opacity: 0.85; border: 0; background: none; }
.blockcart-content #js-cart-close:hover { color: hsl(var(--rb-foreground)); opacity: 1; }

/* Product line */
.blockcart-content ul { list-style: none; padding: 0; margin: 0; }
.blockcart-content li { border-bottom: 1px solid hsl(var(--rb-border) / 0.4); padding: 1rem 0; }
.blockcart-content .product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rb-radius);
  background: hsl(var(--rb-pietra-chiaro) / 0.4);
}
.blockcart-content .col-info > .pb-1 > a {
  display: block;
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  color: hsl(var(--rb-foreground));
  text-decoration: none;
}
.blockcart-content .col-info > .pb-1 > a:hover { color: hsl(var(--rb-grano-scuro)); }
.blockcart-content .product-attributes .label,
.blockcart-content .product-line-info .label,
.blockcart-content .product-attributes .value,
.blockcart-content .product-line-info .value {
  font-size: 0.78rem;
  color: hsl(var(--rb-neutro-medio));
  text-transform: none;
}
.blockcart-content .product-price,
.blockcart-content .col.text-right > span:first-child {
  font-family: var(--rb-font-heading);
  font-weight: 600;
  color: hsl(var(--rb-foreground));
}

/* Qty stepper — bordered group with guaranteed +/− glyphs */
.blockcart-content .bootstrap-touchspin,
.blockcart-content .input-group { width: auto; max-width: 120px; flex-wrap: nowrap; }
.blockcart-content .block-cart-product-quantity,
.blockcart-content .bootstrap-touchspin .form-control,
.blockcart-content input[name="product-quantity-spin"] {
  text-align: center;
  font-family: var(--rb-font-heading);
  font-weight: 500;
  border-color: hsl(var(--rb-border));
  box-shadow: none;
  min-width: 44px;
}
.blockcart-content .btn-touchspin,
.blockcart-content .bootstrap-touchspin-up,
.blockcart-content .bootstrap-touchspin-down {
  background: #fff !important;
  border: 1px solid hsl(var(--rb-border)) !important;
  color: hsl(var(--rb-foreground)) !important;
  min-width: 30px;
  padding: 0;
}
.blockcart-content .btn-touchspin:hover,
.blockcart-content .bootstrap-touchspin-up:hover,
.blockcart-content .bootstrap-touchspin-down:hover { background: hsl(var(--rb-pietra-chiaro)) !important; }
/* FA6 angle glyphs aren't loaded here (theme ships FA4) → render as tofu.
   Zero the icon font and inject real +/− in the body font. */
.blockcart-content i.touchspin-up,
.blockcart-content i.touchspin-down {
  font-family: var(--rb-font-body) !important;
  font-size: 0 !important;
  font-style: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blockcart-content i.touchspin-up::before { content: "+"; font-size: 15px; font-weight: 600; }
.blockcart-content i.touchspin-down::before { content: "\2212"; font-size: 15px; font-weight: 600; }

/* Remove-from-cart (FA4 trash renders fine — just colour it) */
.blockcart-content .remove-from-cart { color: hsl(var(--rb-neutro-medio)); }
.blockcart-content .remove-from-cart:hover { color: hsl(var(--rb-terra-medio)); }

/* Subtotals / total */
.blockcart-content .cart-subtotals .label,
.blockcart-content .cart-subtotals .value { font-size: 0.9rem; color: hsl(var(--rb-neutro-medio)); }
.blockcart-content .cart-total .label,
.blockcart-content .cart-total .value {
  font-family: var(--rb-font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: hsl(var(--rb-foreground));
}

/* CTA buttons — gold primary + olive outline, full width */
.blockcart-content .cart-buttons { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1rem; }
.blockcart-content .cart-buttons .btn {
  width: 100%;
  margin: 0;
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--rb-radius);
  padding: 0.85rem 1rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Controlled CTA classes added in ps_shoppingcart-content.tpl. The offcanvas
   wins against the theme's .btn-primary green via the #blockcart-content ID
   (a class-based !important in theme.css otherwise out-ranks a plain class). */
#blockcart-content .cart-buttons .rb-cart-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
#blockcart-content .cart-buttons .rb-cart-cta--primary,
#blockcart-content .cart-buttons a.rb-cart-cta--primary {
  background: hsl(var(--rb-grano-medio)) !important;
  border: 1px solid hsl(var(--rb-grano-medio)) !important;
  color: hsl(var(--rb-neutro-scuro)) !important;
}
#blockcart-content .cart-buttons .rb-cart-cta--primary:hover,
#blockcart-content .cart-buttons a.rb-cart-cta--primary:hover {
  background: hsl(var(--rb-grano-scuro)) !important;
  border-color: hsl(var(--rb-grano-scuro)) !important;
  color: #fff !important;
}
#blockcart-content .cart-buttons .rb-cart-cta--primary .rb-icon {
  background-color: hsl(var(--rb-neutro-scuro));
  width: 16px; height: 16px;
}
#blockcart-content .cart-buttons .rb-cart-cta--primary:hover .rb-icon { background-color: #fff; }
#blockcart-content .cart-buttons .rb-cart-cta--secondary,
#blockcart-content .cart-buttons a.rb-cart-cta--secondary {
  background: transparent !important;
  border: 1px solid hsl(var(--rb-ulivo-medio)) !important;
  color: hsl(var(--rb-ulivo-medio)) !important;
}
#blockcart-content .cart-buttons .rb-cart-cta--secondary:hover,
#blockcart-content .cart-buttons a.rb-cart-cta--secondary:hover {
  background: hsl(var(--rb-ulivo-medio)) !important;
  border-color: hsl(var(--rb-ulivo-medio)) !important;
  color: #fff !important;
}

/* Checkout step header */
#checkout .step-title,
#checkout .step-number,
#checkout-personal-information-step .step-title {
  font-family: var(--rb-font-heading);
  font-weight: 500;
}
#checkout .step-edit,
#checkout .step .step-edit { color: hsl(var(--rb-accent)); }
#checkout #order-summary-content { background: #fff; border: 1px solid hsl(var(--rb-border) / 0.4); border-radius: var(--rb-radius-lg); }

/* Account dashboard tiles (#my-account .links a) */
#my-account .links a,
.account-links a,
#my-account a.col-lg-4 {
  display: block;
  background: #fff;
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: var(--rb-radius-lg);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
  box-shadow: var(--rb-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  color: hsl(var(--rb-foreground)) !important;
}
#my-account .links a:hover,
.account-links a:hover {
  transform: translateY(-2px);
  box-shadow: var(--rb-shadow-md);
  border-color: hsl(var(--rb-grano-medio));
}

/* Authentication / login / register forms */
#authentication .login-form,
#authentication .register-form,
.js-login-form,
.js-customer-form {
  max-width: 480px;
  margin: 2rem auto;
}
#authentication .form-group,
.js-login-form .form-group { margin-bottom: 1rem; }
#authentication .forgot-password { font-size: 13px; }

/* Contact form */
#contact-section,
#contact .contact-form { max-width: 720px; margin: 0 auto; }

/* CMS page typography */
#cms .page-content,
#cms .cms-content,
#cms #content {
  background: #fff;
  border-radius: var(--rb-radius-lg);
  padding: 2.5rem 3rem;
  border: 1px solid hsl(var(--rb-border) / 0.4);
}
#cms h1, #cms h2, #cms h3 { font-family: var(--rb-font-heading); }
#cms .page-content p { font-size: 16px; line-height: 1.75; color: hsl(var(--rb-foreground)); }

/* 404 + error pages */
#pagenotfound .page-content,
.page-error .page-content {
  text-align: center;
  padding: 4rem 2rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#pagenotfound h1,
.page-error h1 {
  font-family: var(--rb-font-heading);
  font-size: 2.5rem;
  font-weight: 500;
  color: hsl(var(--rb-foreground));
  margin-bottom: 1rem;
}
#pagenotfound .input-group { max-width: 480px; margin: 1.5rem auto; }

/* Search page header */
#search h1.h2 { font-family: var(--rb-font-heading); font-weight: 500; }

/* Notifications / alerts */
.alert-warning,
.alert-info,
.alert-success,
.alert-danger,
.notifications-success,
.notifications-warning,
.notifications-error,
.notifications-info {
  border-radius: var(--rb-radius);
  border-left: 4px solid;
  padding: 0.875rem 1.25rem;
  font-family: var(--rb-font-body);
}
.alert-warning, .notifications-warning { background: hsl(var(--rb-grano-chiaro) / 0.4); border-left-color: hsl(var(--rb-grano-medio)); color: hsl(var(--rb-grano-scuro)); }
.alert-info, .notifications-info { background: hsl(var(--rb-adriatico-chiaro) / 0.4); border-left-color: hsl(var(--rb-adriatico-medio)); color: hsl(var(--rb-adriatico-scuro)); }
.alert-success, .notifications-success { background: hsl(var(--rb-ulivo-chiaro) / 0.4); border-left-color: hsl(var(--rb-ulivo-medio)); color: hsl(var(--rb-ulivo-scuro)); }
.alert-danger, .notifications-error { background: hsl(var(--rb-terra-chiaro) / 0.4); border-left-color: hsl(var(--rb-terra-medio)); color: hsl(var(--rb-terra-scuro)); }

/* iqitcookielaw banner */
#iqitcookielaw_banner,
.iqitcookielaw {
  background: hsl(var(--rb-foreground)) !important;
  color: hsl(var(--rb-neutro-chiaro)) !important;
  border-radius: var(--rb-radius-lg) !important;
  box-shadow: var(--rb-shadow-lg) !important;
  font-family: var(--rb-font-body);
}
#iqitcookielaw_banner .btn,
.iqitcookielaw .btn {
  background: hsl(var(--rb-primary));
  border-color: hsl(var(--rb-primary));
  color: hsl(var(--rb-neutro-scuro));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * 10. Utilities
 * -------------------------------------------------------------------------- */
.rb-eyebrow {
  font-family: var(--rb-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(var(--rb-pietra-scuro));
}
.rb-display { font-family: var(--rb-font-heading); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.rb-bg-grano { background: hsl(var(--rb-grano-chiaro)); }
.rb-bg-pietra { background: hsl(var(--rb-pietra-chiaro)); }
.rb-bg-ulivo { background: hsl(var(--rb-ulivo-chiaro)); }

/* --------------------------------------------------------------------------
 * 11. Animation keyframes (mirrored from rebrand source)
 * -------------------------------------------------------------------------- */
@keyframes rb-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rb-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
.rb-animate-fade-up { animation: rb-fade-up 0.6s ease-out both; }
.rb-animate-fade-in { animation: rb-fade-in 0.6s ease-out both; }

/* --------------------------------------------------------------------------
 * 12. Product page — rebrand structural sections (markup added in
 *     product.tpl + _partials/rebrand-product-sections.tpl).
 *     Mirrors rebrand-source-site/src/pages/ProductMediterranea.tsx.
 *
 *     None of the values here are product-specific. Per-product copy
 *     comes from PS data (description, features, product comments).
 * -------------------------------------------------------------------------- */

/* Reusable container scope */
body#product .container,
body#product .rb-product-section .container,
body#product .rb-product-shipping-banner .container,
body#product .rb-product-shipping-reminder .container,
body#product .rb-product-final-cta .container {
  max-width: var(--rb-container-max);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
body#product .container--narrow { max-width: 56rem; }

/* Inline icon system — pure CSS masks, no SVG sprites needed in HTML.
   These mirror lucide icons used in the React source. */
.rb-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.rb-icon-truck    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>"); }
.rb-icon-shield   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>"); }
.rb-icon-package  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4 7.55 4.24'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><path d='M3.27 6.96 12 12.01l8.73-5.05'/><path d='M12 22.08V12'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4 7.55 4.24'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><path d='M3.27 6.96 12 12.01l8.73-5.05'/><path d='M12 22.08V12'/></svg>"); }
.rb-icon-leaf     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96c1.4 9.3-3.4 11.85-9.4 12.55a8.85 8.85 0 0 0-2.6 5.3c0 1.1.4 2.2 1 3.1'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96c1.4 9.3-3.4 11.85-9.4 12.55a8.85 8.85 0 0 0-2.6 5.3c0 1.1.4 2.2 1 3.1'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>"); }
.rb-icon-clock    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
.rb-icon-check    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }
.rb-icon-quote    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='none'><path d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z'/><path d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='none'><path d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z'/><path d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/></svg>"); }
.rb-icon-star     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='1' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
                          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='1' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>"); }

/* Top free-shipping banner */
.rb-product-shipping-banner {
  background: hsl(var(--rb-grano-chiaro) / 0.4);
  border-bottom: 1px solid hsl(var(--rb-grano-medio) / 0.2);
  font-family: var(--rb-font-body);
}
.rb-product-shipping-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  flex-wrap: wrap;
  text-align: center;
}
.rb-product-shipping-banner .rb-icon { width: 14px; height: 14px; color: hsl(var(--rb-primary)); }
.rb-product-shipping-banner-main {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--rb-foreground));
}
.rb-product-shipping-banner-sub {
  font-size: 12px;
  color: hsl(var(--rb-neutro-medio));
}
.rb-product-shipping-banner-sub::before { content: '· '; }

/* Eyebrow badge above product H1 (from category name) */
body#product .rb-product-eyebrow {
  display: inline-block;
  font-family: var(--rb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--rb-primary));
  background: hsl(var(--rb-grano-chiaro) / 0.5);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.875rem;
}

/* Product description short — bring it back as the "lead" paragraph below
   the H1; the long copy still lives in the description tab. */
body#product .rb-product-description-short,
body#product .col-product-info > .product-information > .product-description.rb-product-description-short,
body#product #product-description-short-119.rb-product-description-short,
body#product div[id^="product-description-short-"].rb-product-description-short {
  display: block !important;
  font-family: var(--rb-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--rb-foreground) / 0.8);
  margin: 0 0 1.5rem;
  max-height: 9.6em;     /* ~6 lines */
  overflow: hidden;
  position: relative;
}
body#product .rb-product-description-short::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2.4em;
  background: linear-gradient(to bottom, hsl(var(--rb-background) / 0), hsl(var(--rb-background)) 90%);
  pointer-events: none;
}
body#product .rb-product-description-short p {
  margin: 0 0 0.75rem;
  text-align: left !important;
}
body#product .rb-product-description-short strong { font-weight: 600; color: hsl(var(--rb-foreground)); }

/* Combination selector — turn the <select> into a row of pill cards */
body#product .product-variants {
  margin: 1.5rem 0 1rem;
}
body#product .product-variants-item {
  margin-bottom: 1rem;
}
body#product .product-variants-item .form-control-label {
  display: block;
  font-family: var(--rb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--rb-pietra-scuro));
  margin-bottom: 0.5rem;
}
body#product .product-variants-item .custom-select2,
body#product .product-variants-item select {
  width: 100%;
}
body#product .product-variants-item select.form-control {
  height: 48px;
  border: 1px solid hsl(var(--rb-border));
  border-radius: var(--rb-radius);
  font-family: var(--rb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--rb-foreground));
  background-color: #fff;
  padding: 0 1rem;
}
body#product .product-variants-item select.form-control:focus {
  border-color: hsl(var(--rb-primary));
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--rb-grano-chiaro) / 0.5);
}

/* Shipping callout below add-to-cart */
.rb-product-shipping-callout {
  background: hsl(var(--rb-grano-chiaro) / 0.35);
  border: 1px solid hsl(var(--rb-grano-medio) / 0.2);
  border-radius: var(--rb-radius);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rb-product-shipping-callout .rb-icon { width: 20px; height: 20px; color: hsl(var(--rb-primary)); }
.rb-product-shipping-callout-main {
  margin: 0;
  font-family: var(--rb-font-body);
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--rb-foreground));
}
.rb-product-shipping-callout-sub {
  margin: 0;
  font-family: var(--rb-font-body);
  font-size: 11px;
  color: hsl(var(--rb-neutro-medio));
}

/* Order-cutoff urgency line */
.rb-product-urgency {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-family: var(--rb-font-body);
  font-size: 11px;
  color: hsl(var(--rb-neutro-medio));
}
.rb-product-urgency .rb-icon { width: 14px; height: 14px; color: hsl(var(--rb-accent)); }

/* Trust strip — 3 inline reassurances */
.rb-product-trust-strip {
  list-style: none;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid hsl(var(--rb-border) / 0.3);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.rb-product-trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rb-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--rb-neutro-medio));
}
.rb-product-trust-strip .rb-icon { width: 14px; height: 14px; }

/* ============= Shared section primitives below the hero ============= */
.rb-product-section {
  padding: 4rem 0;
}
@media (min-width: 992px) {
  .rb-product-section { padding: 5rem 0; }
}
.rb-product-section--alt { background: hsl(var(--rb-pietra-chiaro) / 0.5); }
.rb-product-section--testimonials { background: hsl(var(--rb-ulivo-chiaro) / 0.25); }

.rb-product-section .rb-eyebrow {
  font-family: var(--rb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--rb-primary));
  margin: 0 0 0.75rem;
}
.rb-product-section h2.rb-display,
.rb-product-section h3.rb-display {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: hsl(var(--rb-foreground));
  margin: 0 0 1.5rem;
  line-height: 1.15;
}
.rb-product-section h2.rb-display { font-size: 2rem; }
.rb-product-section h3.rb-display { font-size: 1.25rem; }
@media (min-width: 992px) {
  .rb-product-section h2.rb-display { font-size: 2.25rem; }
}

/* Prose block — readable paragraphs */
.rb-product-prose p {
  font-family: var(--rb-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: hsl(var(--rb-foreground) / 0.85);
  margin: 0 0 1rem;
}
.rb-product-section--prose .rb-product-prose { max-width: 56rem; }

/* 2 / 3 column grids */
.rb-product-grid-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.rb-product-grid-3 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 992px) {
  .rb-product-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .rb-product-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* "Ideale per" badge grid */
.rb-product-ideal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .rb-product-ideal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .rb-product-ideal-grid { grid-template-columns: repeat(3, 1fr); } }
.rb-product-ideal-grid li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: hsl(var(--rb-pietra-chiaro) / 0.4);
  border: 1px solid hsl(var(--rb-border) / 0.3);
  border-radius: var(--rb-radius);
  font-family: var(--rb-font-body);
  font-size: 14px;
  color: hsl(var(--rb-foreground));
  transition: border-color 0.18s ease;
}
.rb-product-ideal-grid li:hover { border-color: hsl(var(--rb-primary) / 0.4); }
.rb-product-ideal-grid li .rb-icon { width: 16px; height: 16px; color: hsl(var(--rb-accent)); }

/* Spec list — borderless key/value rows inside a card */
.rb-product-spec-list {
  margin: 0;
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: var(--rb-radius);
  overflow: hidden;
  background: #fff;
}
.rb-product-spec-row {
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid hsl(var(--rb-border) / 0.4);
}
.rb-product-spec-row:last-child { border-bottom: 0; }
.rb-product-spec-row dt {
  font-family: var(--rb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--rb-foreground));
  margin: 0;
}
.rb-product-spec-row dd {
  font-family: var(--rb-font-body);
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--rb-primary));
  margin: 0;
}

/* Comparison table */
.rb-product-compare-table {
  width: 100%;
  border-collapse: separate;
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: var(--rb-radius);
  overflow: hidden;
  background: #fff;
}
.rb-product-compare-table th,
.rb-product-compare-table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid hsl(var(--rb-border) / 0.4);
  text-align: left;
  font-family: var(--rb-font-body);
  font-size: 13px;
  vertical-align: middle;
}
.rb-product-compare-table thead th {
  background: hsl(var(--rb-pietra-chiaro) / 0.6);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--rb-neutro-medio));
}
.rb-product-compare-table thead th:nth-child(2) { color: hsl(var(--rb-accent)); }
.rb-product-compare-table tbody tr:last-child td,
.rb-product-compare-table tbody tr:last-child th { border-bottom: 0; }
.rb-product-compare-table td:first-child { font-weight: 500; color: hsl(var(--rb-foreground)); }
.rb-product-compare-table .rb-product-compare-ours {
  color: hsl(var(--rb-accent));
  font-weight: 500;
}
.rb-product-compare-table .rb-product-compare-ours .rb-icon {
  width: 14px;
  height: 14px;
  margin-right: 0.3rem;
}

/* Check list */
.rb-product-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.rb-product-check-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--rb-font-body);
  font-size: 14px;
  color: hsl(var(--rb-foreground) / 0.85);
}
.rb-product-check-list li .rb-icon {
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 999px;
  background: hsl(var(--rb-ulivo-chiaro) / 0.4);
  color: hsl(var(--rb-accent));
  -webkit-mask-position: center;
          mask-position: center;
}
.rb-product-check-list--small li { font-size: 13px; }
.rb-product-check-list--small li .rb-icon { width: 16px; height: 16px; padding: 3px; }

/* Pill list — usage methods */
.rb-product-pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rb-product-pill-list li {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--rb-foreground));
  background: #fff;
  border: 1px solid hsl(var(--rb-border) / 0.5);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

/* Testimonials */
.rb-product-testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .rb-product-testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.rb-product-testimonial {
  background: hsl(var(--rb-background));
  border: 1px solid hsl(var(--rb-border) / 0.3);
  border-radius: var(--rb-radius);
  padding: 1.5rem;
  box-shadow: var(--rb-shadow-sm);
  position: relative;
}
.rb-product-testimonial > .rb-icon-quote {
  width: 22px;
  height: 22px;
  color: hsl(var(--rb-primary) / 0.35);
  margin-bottom: 0.5rem;
}
.rb-product-testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}
.rb-product-testimonial-stars .rb-icon {
  width: 14px; height: 14px;
  color: hsl(var(--rb-pietra-medio));
}
.rb-product-testimonial-stars .rb-icon.is-on { color: hsl(var(--rb-primary)); }
.rb-product-testimonial-text {
  font-family: var(--rb-font-body);
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  color: hsl(var(--rb-foreground) / 0.85);
  margin: 0 0 1rem;
}
.rb-product-testimonial-name {
  margin: 0;
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 14px;
  color: hsl(var(--rb-foreground));
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--rb-border) / 0.3);
}

/* Shipping reminder strip (bottom) */
.rb-product-shipping-reminder {
  background: hsl(var(--rb-grano-chiaro) / 0.4);
  padding: 2rem 0;
}
.rb-product-shipping-reminder .container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .rb-product-shipping-reminder .container {
    flex-direction: row;
    gap: 2rem;
  }
}
.rb-product-shipping-reminder-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rb-product-shipping-reminder-title {
  margin: 0;
  font-family: var(--rb-font-body);
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--rb-foreground));
}
.rb-product-shipping-reminder-sub {
  margin: 0;
  font-family: var(--rb-font-body);
  font-size: 12px;
  color: hsl(var(--rb-neutro-medio));
}

/* Final CTA */
.rb-product-final-cta {
  background: hsl(var(--rb-foreground));
  padding: 4rem 0;
  text-align: center;
}
.rb-product-final-cta-title {
  font-family: var(--rb-font-heading);
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: hsl(var(--rb-background));
  margin: 0 0 0.75rem;
}
@media (min-width: 768px) { .rb-product-final-cta-title { font-size: 2.25rem; } }
.rb-product-final-cta-lead {
  font-family: var(--rb-font-body);
  font-size: 15px;
  color: hsl(var(--rb-background) / 0.65);
  margin: 0 auto 2rem;
  max-width: 32rem;
}
.rb-product-final-cta-btn {
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 2.5rem;
}

/* Hide the legacy iqitthemeeditor breadcrumb background image on this page —
   the rebrand breadcrumb is intentionally plain. */
body#product #wrapper .breadcrumb {
  background-image: none !important;
  background-color: transparent !important;
}

/* Features that drive the rebrand sections are filtered out of the standard
   PS data-sheet in catalog/_partials/product-details.tpl. No CSS hook needed. */

/* Mobile tightening */
@media (max-width: 767px) {
  .rb-product-section { padding: 3rem 0; }
  .rb-product-shipping-reminder { padding: 1.5rem 0; }
  .rb-product-final-cta { padding: 3rem 0; }
  body#product .rb-product-eyebrow { font-size: 9px; padding: 0.2rem 0.6rem; }
}

/* =============================================================================
 * Section 13 — Hero parity with rebrand source
 * Tagline, rating row, highlight pills, multi-format price cards,
 * breadcrumb restyle, manufacturer-logo hide.
 * ========================================================================== */

/* ------- New mask icons used by highlights (wheat, award) ----------------- */
.rb-icon-wheat { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 22l10-10'/><path d='M16 8l-4 4-4-4'/><path d='M16 8c0-2.2 1.8-4 4-4'/><path d='M12 4c2.2 0 4 1.8 4 4'/><path d='M8 12c-2.2 0-4-1.8-4-4'/><path d='M12 8c0-2.2-1.8-4-4-4'/><path d='M20 12c-2.2 0-4 1.8-4 4'/><path d='M12 16c-2.2 0-4 1.8-4 4'/></svg>");
                       mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 22l10-10'/><path d='M16 8l-4 4-4-4'/><path d='M16 8c0-2.2 1.8-4 4-4'/><path d='M12 4c2.2 0 4 1.8 4 4'/><path d='M8 12c-2.2 0-4-1.8-4-4'/><path d='M12 8c0-2.2-1.8-4-4-4'/><path d='M20 12c-2.2 0-4 1.8-4 4'/><path d='M12 16c-2.2 0-4 1.8-4 4'/></svg>"); }
.rb-icon-award { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M8.21 13.89L7 22l5-3 5 3-1.21-8.11'/></svg>");
                       mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M8.21 13.89L7 22l5-3 5 3-1.21-8.11'/></svg>"); }


/* =============================================================================
 * Section 14 — Full product-page structural port (source-faithful)
 * Replaces the iqit product layout with the source composition:
 * announce → hero(gallery|sticky info) → editorial sections → trust → CTA → bar
 * ========================================================================== */

/* ---- Break the product page out of the iqit centered white container ----
   The theme wraps everything in #wrapper (max-width, white, centered) and
   #inner-wrapper.container. The source product page is full-bleed cream with
   content centered by our own .rb-container, and full-width section bands.
   Neutralise the theme wrappers on product pages only. */
body#product #wrapper,
body#product section#wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: hsl(var(--rb-neutro-chiaro)) !important;
  box-shadow: none !important;
  border: 0 !important;
}
body#product #inner-wrapper,
body#product #inner-wrapper.container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#product #content-wrapper { width: 100%; }
body#product #main-page-content { background: hsl(var(--rb-neutro-chiaro)); }

/* ---- Breadcrumb: full-bleed cream band, content aligned to .rb-container,
   plain title-case text (matches the source). ---- */
body#product nav.breadcrumb {
  background: hsl(var(--rb-neutro-chiaro)) !important;
  margin: 0 !important;
  padding: 1.25rem 0 0.25rem !important;
}
body#product nav.breadcrumb > .container,
body#product nav.breadcrumb > .container-fluid,
body#product .breadcrumb > .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  width: 100%;
}
body#product nav.breadcrumb ol { margin: 0; padding: 0; }
body#product .breadcrumb,
body#product .breadcrumb a,
body#product .breadcrumb li,
body#product .breadcrumb span {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 0.8rem;
  color: hsl(var(--rb-neutro-medio));
}
body#product .breadcrumb a span:hover { color: hsl(var(--rb-grano-scuro)); }
body#product .breadcrumb li:last-child span { color: hsl(var(--rb-neutro-scuro)); font-weight: 500; }

/* ---- Shared layout primitives ---- */
.rb-product-page { background: hsl(var(--rb-neutro-chiaro)); color: hsl(var(--rb-neutro-scuro)); }
.rb-product-page * { box-sizing: border-box; }
.rb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}
.rb-container--narrow { max-width: 880px; }
.rb-container--prose { max-width: 760px; }
.rb-product-page .rb-h2 {
  font-family: var(--rb-font-heading);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  color: hsl(var(--rb-neutro-scuro));
  margin: 0 0 1.25rem 0;
}
.rb-product-page .rb-h3 {
  font-family: var(--rb-font-heading);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.15;
  color: hsl(var(--rb-neutro-scuro));
  margin: 0 0 1.25rem 0;
}
.rb-product-page .rb-eyebrow {
  font-family: var(--rb-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--rb-grano-scuro));
  margin: 0 0 0.75rem 0;
}
.rb-product-page .rb-body {
  font-size: 1rem;
  line-height: 1.7;
  color: hsl(var(--rb-neutro-scuro) / 0.82);
  margin: 0 0 1.25rem 0;
}
.rb-product-page .rb-body--sm { font-size: 0.9rem; }
.rb-product-page .rb-note { font-size: 0.8rem; color: hsl(var(--rb-neutro-medio)); margin-top: 0.85rem; }

/* ---- 2. Announcement bar ---- */
.rb-announce {
  background: hsl(var(--rb-grano-chiaro) / 0.45);
  border-bottom: 1px solid hsl(var(--rb-grano-medio) / 0.25);
}
.rb-announce-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.rb-announce .rb-icon { width: 15px; height: 15px; color: hsl(var(--rb-grano-scuro)); }
.rb-announce-main { font-weight: 500; color: hsl(var(--rb-neutro-scuro)); }
.rb-announce-sep { color: hsl(var(--rb-neutro-medio)); }
.rb-announce-sub { color: hsl(var(--rb-neutro-medio)); }

/* ---- 4. Hero ---- */
.rb-hero { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 5rem; }
.rb-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
/* gallery */
.rb-hero-gallery { display: flex; flex-direction: column; gap: 0.75rem; }
.rb-hero-gallery-main {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: hsl(var(--rb-pietra-chiaro) / 0.4);
}
/* object-cover to match the React source gallery; transparent text + 0 font-size
   hides the broken-image alt bleed when the product image file is missing (dev),
   leaving a clean pietra square placeholder instead of dark alt text. */
.rb-hero-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;
  font-size: 0;
}
.rb-hero-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.rb-hero-thumb {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  background: hsl(var(--rb-pietra-chiaro) / 0.4);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.rb-hero-thumb:hover { opacity: 1; }
.rb-hero-thumb.is-selected { border-color: hsl(var(--rb-grano-medio)); opacity: 1; box-shadow: var(--rb-shadow-sm); }
.rb-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; font-size: 0; }

/* info column */
.rb-hero-info { position: sticky; top: 7rem; align-self: start; }
.rb-hero-eyebrow {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--rb-grano-scuro));
  background: hsl(var(--rb-grano-chiaro) / 0.5);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.rb-product-page .rb-hero-title {
  font-family: var(--rb-font-heading);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0 0 0.5rem 0;
  color: hsl(var(--rb-neutro-scuro));
}
.rb-hero-subtitle {
  font-family: var(--rb-font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: hsl(var(--rb-neutro-medio));
  margin: 0 0 1rem 0;
}
.rb-hero-rating { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.rb-hero-rating .rb-stars { display: inline-flex; gap: 1px; color: hsl(var(--rb-grano-medio)); }
.rb-hero-rating .rb-icon-star { width: 15px; height: 15px; }
.rb-hero-rating-caption { font-size: 0.78rem; color: hsl(var(--rb-neutro-medio)); }
.rb-hero-intro { font-size: 1rem; line-height: 1.7; color: hsl(var(--rb-neutro-scuro) / 0.8); margin-bottom: 2rem; }
.rb-hero-intro p { margin: 0 0 0.75rem 0; }
.rb-hero-intro strong { color: hsl(var(--rb-neutro-scuro)); }

/* hero feature grid (2x2) */
.rb-hero-features {
  list-style: none; margin: 0 0 2rem 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
.rb-hero-feature {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: hsl(var(--rb-pietra-chiaro) / 0.5);
  border-radius: 4px; padding: 0.75rem;
  font-size: 0.8rem; line-height: 1.35; color: hsl(var(--rb-neutro-scuro) / 0.85);
}
.rb-hero-feature .rb-icon { width: 16px; height: 16px; color: hsl(var(--rb-ulivo-medio)); margin-top: 1px; }

.rb-hero-buy { margin-bottom: 1rem; }
.rb-product-format-cards {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  border: 1px solid hsl(var(--rb-border) / 0.6) !important;
  border-radius: 4px !important;
  display: flex; flex-direction: column;
  background: #fbfbfa !important;
  overflow: hidden;
}
.rb-product-format-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid hsl(var(--rb-border) / 0.4) !important;
  padding: 1.25rem !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease;
}
.rb-product-format-card:last-child {
  border-bottom: 0 !important;
}
.rb-product-format-card.is-selected {
  background: #f5f3ee !important;
}
.rb-product-format-card.is-oos { opacity: 0.55; }
.rb-product-format-card-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; margin: 0; }
.rb-product-format-card-head { display: flex; flex-direction: column; gap: 0.15rem; }
.rb-product-format-card-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--rb-neutro-medio)); }
.rb-product-format-card-price { font-family: var(--rb-font-heading); font-size: 1.75rem; font-weight: 600; line-height: 1; color: hsl(var(--rb-neutro-scuro)); }
.rb-product-format-card-actions { display: flex; align-items: center; gap: 0.6rem; }
.rb-product-qty { display: inline-flex; align-items: stretch; border: 1px solid hsl(var(--rb-border) / 0.75); border-radius: 4px; overflow: hidden; background: #fff; }
.rb-product-qty-btn { background: none; border: 0; padding: 0 0.7rem; font-size: 1rem; line-height: 1; color: hsl(var(--rb-neutro-scuro)); cursor: pointer; }
.rb-product-qty-btn:hover { background: hsl(var(--rb-muted) / 0.25); }
.rb-product-qty-input { width: 2.2rem; border: 0; border-left: 1px solid hsl(var(--rb-border) / 0.75); border-right: 1px solid hsl(var(--rb-border) / 0.75); text-align: center; font-size: 0.9rem; font-weight: 600; padding: 0.5rem 0; background: transparent; -moz-appearance: textfield; }
.rb-product-qty-input::-webkit-outer-spin-button,
.rb-product-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 
/* gold buttons */
.rb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 0; border-radius: 4px; cursor: pointer;
  font-family: var(--rb-font-body); font-weight: 600; font-size: 0.85rem;
  padding: 0.7rem 1.1rem; text-decoration: none; transition: background-color 160ms ease;
}
.rb-btn .rb-icon { width: 16px; height: 16px; }
.rb-btn--gold { background: hsl(var(--rb-grano-medio)); color: hsl(var(--rb-neutro-scuro)); }
.rb-btn--gold:hover { background: hsl(var(--rb-grano-scuro)); color: #fff; }
.rb-btn--lg { padding: 0.85rem 2rem; font-size: 0.95rem; }
.rb-product-format-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: hsl(var(--rb-grano-medio)) !important;
  color: hsl(var(--rb-neutro-scuro)) !important;
  border: 1px solid hsl(var(--rb-grano-medio)) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.7rem 1.20rem !important;
  cursor: pointer !important;
  box-shadow: var(--rb-shadow-sm) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.rb-product-format-card-cta:hover:not(:disabled) { background: hsl(var(--rb-grano-scuro)) !important; border-color: hsl(var(--rb-grano-scuro)) !important; color: #fff !important; }
.rb-product-format-card-cta .rb-icon { width: 16px; height: 16px; }
.rb-product-format-card-cta:disabled { cursor: not-allowed !important; opacity: 0.6 !important; background: hsl(var(--rb-muted)) !important; border-color: hsl(var(--rb-muted)) !important; color: hsl(var(--rb-neutro-scuro)) !important; }r; justify-content: center; gap: 0.5rem; background: hsl(var(--rb-grano-medio)); color: hsl(var(--rb-neutro-scuro)); border: 0; border-radius: 4px; font-weight: 600; font-size: 0.85rem; padding: 0.7rem 1.2rem; cursor: pointer; }
.rb-product-format-card-cta:hover:not(:disabled) { background: hsl(var(--rb-grano-scuro)); color: #fff; }
.rb-product-format-card-cta .rb-icon { width: 16px; height: 16px; }
.rb-product-format-card-cta:disabled { cursor: not-allowed; opacity: 0.6; }

/* hero shipping callout / urgency / trust */
.rb-hero-shipping {
  display: flex; align-items: center; gap: 0.75rem;
  background: hsl(var(--rb-grano-chiaro) / 0.3);
  border: 1px solid hsl(var(--rb-grano-medio) / 0.2);
  border-radius: 4px; padding: 0.75rem; margin-top: 1rem;
}
.rb-hero-shipping .rb-icon { width: 18px; height: 18px; color: hsl(var(--rb-grano-scuro)); }
.rb-hero-shipping-title { font-size: 0.8rem; font-weight: 600; margin: 0; color: hsl(var(--rb-neutro-scuro)); }
.rb-hero-shipping-hint { font-size: 0.72rem; color: hsl(var(--rb-neutro-medio)); margin: 0.1rem 0 0; }
.rb-hero-urgency { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.72rem; color: hsl(var(--rb-neutro-medio)); }
.rb-hero-urgency .rb-icon { width: 13px; height: 13px; color: hsl(var(--rb-ulivo-medio)); }
.rb-hero-trust {
  list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid hsl(var(--rb-border) / 0.3);
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.rb-hero-trust li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--rb-neutro-medio)); }
.rb-hero-trust .rb-icon { width: 13px; height: 13px; }

/* ---- 5–13. Editorial sections ---- */
.rb-sec { padding: 4rem 0; }
.rb-sec--alt { background: hsl(var(--rb-pietra-chiaro)); }
.rb-sec--testimonials { background: hsl(var(--rb-ulivo-chiaro) / 0.25); }
.rb-sec-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.rb-sec-split--reverse .rb-sec-media { order: -1; }
.rb-sec-media { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: hsl(var(--rb-pietra-chiaro) / 0.6); }
.rb-sec-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-sec-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.rb-sec-head-intro { color: hsl(var(--rb-neutro-medio)); margin-top: 0.75rem; }
.rb-sec-center { text-align: center; }

/* checklists */
.rb-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.rb-checklist li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: hsl(var(--rb-neutro-scuro) / 0.85); }
.rb-checklist--sm li { font-size: 0.82rem; }
.rb-check { width: 1.25rem; height: 1.25rem; border-radius: 999px; background: hsl(var(--rb-ulivo-medio) / 0.12); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rb-check .rb-icon { width: 12px; height: 12px; color: hsl(var(--rb-ulivo-medio)); }
.rb-check--gold { background: hsl(var(--rb-grano-medio) / 0.15); }
.rb-check--gold .rb-icon { color: hsl(var(--rb-grano-scuro)); }

/* ideal grid */
.rb-ideal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rb-ideal-grid li { display: flex; align-items: center; gap: 0.75rem; background: hsl(var(--rb-neutro-chiaro)); border: 1px solid hsl(var(--rb-border) / 0.3); border-radius: 4px; padding: 1rem; font-size: 0.9rem; }
.rb-sec--alt .rb-ideal-grid li { background: hsl(0 0% 100% / 0.5); }
.rb-ideal-grid .rb-icon { width: 16px; height: 16px; color: hsl(var(--rb-ulivo-medio)); flex-shrink: 0; }

/* 2-col / 3-col */
.rb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.rb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

/* spec tables */
.rb-spec-table { border: 1px solid hsl(var(--rb-border) / 0.5); border-radius: 4px; overflow: hidden; background: hsl(var(--rb-neutro-chiaro)); }
.rb-spec-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; border-bottom: 1px solid hsl(var(--rb-border) / 0.4); }
.rb-spec-row:last-child { border-bottom: 0; }
.rb-spec-row--sub { padding-left: 2rem; }
.rb-spec-row--sub .rb-spec-k { color: hsl(var(--rb-neutro-medio)); }
.rb-spec-k { font-size: 0.9rem; font-weight: 500; color: hsl(var(--rb-neutro-scuro)); }
.rb-spec-v { font-size: 0.9rem; font-weight: 600; color: hsl(var(--rb-grano-scuro)); }
.rb-spec-v--muted { color: hsl(var(--rb-neutro-medio)); font-weight: 500; }
.rb-spec-table--plain .rb-spec-row { padding: 0.65rem 1rem; }

/* comparison table */
.rb-cmp-table { border: 1px solid hsl(var(--rb-border) / 0.5); border-radius: 4px; overflow: hidden; }
.rb-cmp-head, .rb-cmp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.rb-cmp-head { background: hsl(var(--rb-pietra-medio) / 0.4); padding: 0.7rem 1.25rem; }
.rb-cmp-head span { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rb-cmp-ours-h { color: hsl(var(--rb-ulivo-medio)); }
.rb-cmp-theirs-h { color: hsl(var(--rb-neutro-medio)); }
.rb-cmp-row { padding: 0.85rem 1.25rem; border-top: 1px solid hsl(var(--rb-border) / 0.4); align-items: center; }
.rb-cmp-k { font-size: 0.9rem; font-weight: 500; }
.rb-cmp-ours { font-size: 0.9rem; font-weight: 500; color: hsl(var(--rb-ulivo-medio)); display: inline-flex; align-items: center; gap: 0.35rem; }
.rb-cmp-ours .rb-icon { width: 13px; height: 13px; }
.rb-cmp-theirs { font-size: 0.9rem; color: hsl(var(--rb-neutro-medio)); }

/* pills */
.rb-pills { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rb-pills li { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: hsl(var(--rb-neutro-chiaro)); border: 1px solid hsl(var(--rb-border) / 0.5); padding: 0.5rem 1rem; border-radius: 999px; color: hsl(var(--rb-neutro-scuro)); }
.rb-sec--alt .rb-pills li { background: hsl(0 0% 100% / 0.6); }

/* prose */
.rb-prose p { font-size: 1rem; line-height: 1.7; color: hsl(var(--rb-neutro-scuro) / 0.82); margin: 0 0 1rem; }
.rb-prose--sm p { font-size: 0.85rem; }

/* testimonials */
.rb-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.rb-testimonial { background: hsl(var(--rb-neutro-chiaro)); border: 1px solid hsl(var(--rb-border) / 0.3); border-radius: 4px; padding: 1.5rem; box-shadow: var(--rb-shadow-sm); }
.rb-quote-ico { width: 20px; height: 20px; color: hsl(var(--rb-grano-medio) / 0.4); margin-bottom: 0.75rem; }
.rb-testimonial-stars { display: flex; gap: 1px; margin-bottom: 0.75rem; color: hsl(var(--rb-grano-medio)); }
.rb-testimonial-stars .rb-icon { width: 12px; height: 12px; color: hsl(var(--rb-pietra-medio)); }
.rb-testimonial-stars .rb-icon.is-on { color: hsl(var(--rb-grano-medio)); }
.rb-testimonial-text { font-size: 0.9rem; line-height: 1.6; font-style: italic; color: hsl(var(--rb-neutro-scuro) / 0.8); margin: 0 0 1.25rem; }
.rb-testimonial-name { font-size: 0.85rem; font-weight: 600; padding-top: 1rem; border-top: 1px solid hsl(var(--rb-border) / 0.3); margin: 0; }

/* ---- 15. Bottom trust reminder ---- */
.rb-product-shipping-reminder { background: hsl(var(--rb-grano-chiaro) / 0.4); padding: 2rem 0; }
.rb-product-shipping-reminder .rb-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; }
.rb-product-shipping-reminder-item { display: flex; align-items: center; gap: 0.85rem; }
.rb-trust-ico { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: hsl(var(--rb-grano-medio) / 0.12); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rb-trust-ico .rb-icon { width: 18px; height: 18px; color: hsl(var(--rb-grano-scuro)); }
.rb-product-shipping-reminder-title { font-size: 0.85rem; font-weight: 600; margin: 0; }
.rb-product-shipping-reminder-sub { font-size: 0.72rem; color: hsl(var(--rb-neutro-medio)); margin: 0.1rem 0 0; }

/* ---- 16. Final CTA (dark) ---- */
.rb-product-final-cta { background: hsl(var(--rb-neutro-scuro)); padding: 3.5rem 0; text-align: center; }
.rb-product-final-cta-title { font-family: var(--rb-font-heading); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); color: hsl(var(--rb-neutro-chiaro)); margin: 0 0 0.75rem; }
.rb-product-final-cta-lead { color: hsl(var(--rb-neutro-chiaro) / 0.6); margin: 0 auto 2rem; max-width: 28rem; }
.rb-product-final-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.rb-cta-form { margin: 0; }

/* ---- 17. Sticky bottom bar ---- */
.rb-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: hsl(var(--rb-neutro-chiaro) / 0.97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid hsl(var(--rb-border) / 0.5);
  box-shadow: 0 -4px 20px hsl(var(--rb-neutro-scuro) / 0.08);
  transform: translateY(110%);
  transition: transform 280ms ease;
}
.rb-sticky-bar.is-visible { transform: translateY(0); }
.rb-sticky-inner { max-width: 1200px; margin: 0 auto; padding: 0.6rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rb-sticky-product { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.rb-sticky-thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.rb-sticky-meta { display: flex; flex-direction: column; min-width: 0; }
.rb-sticky-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-sticky-sub { font-size: 0.72rem; color: hsl(var(--rb-neutro-medio)); }
.rb-sticky-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.rb-sticky-price { display: flex; flex-direction: column; align-items: flex-end; margin-right: 0.25rem; }
.rb-sticky-from { font-size: 0.62rem; color: hsl(var(--rb-neutro-medio)); }
.rb-sticky-amount { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.rb-sticky-form { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .rb-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .rb-hero-info { position: static; }
  .rb-sec-split { grid-template-columns: 1fr; gap: 2rem; }
  .rb-sec-split--reverse .rb-sec-media { order: 0; }
  .rb-grid-2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .rb-grid-3 { grid-template-columns: 1fr; gap: 2rem; }
  .rb-ideal-grid { grid-template-columns: 1fr 1fr; }
  .rb-testimonials { grid-template-columns: 1fr; }
  
  .rb-home-hero { height: auto !important; min-height: 500px; padding: 6rem 0; }
  .rb-home-hero-actions { flex-direction: column; align-items: stretch; }
  .rb-home-bundle-content { padding: 2rem !important; }
  .rb-home-bundle-media { min-height: 250px; }
}
@media (max-width: 575px) {
  .rb-sec { padding: 3rem 0; }
  .rb-hero-features { grid-template-columns: 1fr; }
  .rb-ideal-grid { grid-template-columns: 1fr; }
  .rb-product-format-card-form { flex-direction: column; align-items: stretch; }
  .rb-product-format-card-actions { justify-content: space-between; }
  .rb-sticky-name { max-width: 9rem; }
  .rb-sticky-btn-label { display: none; }
  .rb-sticky-price { display: none; }
}

/* ==========================================================================
 * 18. Homepage Redesign (Lovable layout overrides)
 * ========================================================================== */

.rb-home-hero {
  position: relative;
  width: 100%;
  min-height: 600px;
  height: calc(100vh - 2.5rem);
  max-height: 900px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.rb-home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(26, 23, 20, 0.95) 0%, rgba(26, 23, 20, 0.7) 50%, rgba(26, 23, 20, 0.1) 100%);
  z-index: 1;
}
.rb-home-hero-container {
  position: relative;
  z-index: 2;
}
.rb-home-hero-content {
  max-width: 640px;
  text-align: left;
}
.rb-home-hero-shipping {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 160, 23, 0.18);
  border: 1px solid rgba(212, 160, 23, 0.4);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
}
.rb-home-hero-shipping svg {
  color: hsl(var(--rb-primary));
  flex-shrink: 0;
}
.rb-home-hero-title {
  font-family: var(--rb-font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.rb-home-hero-title .italic {
  font-style: italic;
  font-family: var(--rb-font-heading);
}
.rb-home-hero-subtitle {
  font-family: var(--rb-font-body);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  line-height: 1.6;
  color: rgba(245, 243, 240, 0.85);
  margin-bottom: 2rem;
  max-width: 500px;
}
.rb-home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.rb-home-hero-actions .rb-btn {
  border-radius: var(--rb-radius);
}
.rb-home-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: hsl(var(--rb-ulivo-chiaro));
  font-weight: 600;
}
.rb-home-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.rb-home-hero-trust svg {
  color: hsl(var(--rb-ulivo-chiaro));
  flex-shrink: 0;
}

.rb-btn--outline-white {
  background: transparent;
  border: 1px solid rgba(245, 243, 240, 0.3);
  color: #fff !important;
}
.rb-btn--outline-white:hover {
  border-color: hsl(var(--rb-primary));
  color: hsl(var(--rb-primary)) !important;
}

/* Value Strip */
.rb-home-valuestrip {
  padding: 3.5rem 0;
  background: rgba(92, 122, 78, 0.15);
  border-bottom: 1px solid rgba(92, 122, 78, 0.12);
}
.rb-home-valuestrip-row {
  margin: 0 -0.5rem;
}
.rb-home-valuestrip-col {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem;
}
.rb-value-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: hsl(var(--rb-background));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: var(--rb-shadow-sm);
  color: hsl(var(--rb-accent));
}
.rb-home-valuestrip-col h3 {
  font-family: var(--rb-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--rb-foreground));
  margin-bottom: 0.5rem;
}
.rb-home-valuestrip-col p {
  font-size: 0.72rem;
  color: hsl(var(--rb-neutro-medio));
  line-height: 1.6;
  max-width: 210px;
  margin: 0;
}

/* Bestsellers and Product Cards */
.rb-prod-card {
  background: hsl(var(--rb-background));
  border: 1px solid rgba(41, 36, 32, 0.08);
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.rb-prod-card:hover {
  box-shadow: var(--rb-shadow-md);
  border-color: rgba(41, 36, 32, 0.15);
}
.rb-prod-img-link {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: hsl(var(--rb-pietra-chiaro) / 0.5);
  overflow: hidden;
  width: 100%;
}
.rb-prod-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.rb-prod-card:hover .rb-prod-img-link img {
  transform: scale(1.03);
}
.rb-prod-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: hsl(var(--rb-primary));
  color: hsl(var(--rb-neutro-scuro));
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  z-index: 2;
}
.rb-prod-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.rb-prod-info h3 {
  font-family: var(--rb-font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  line-height: 1.25;
}
.rb-prod-info h3 a {
  color: hsl(var(--rb-foreground)) !important;
  text-decoration: none !important;
}
.rb-prod-info h3 a:hover {
  color: hsl(var(--rb-primary)) !important;
}
.rb-prod-desc {
  font-size: 0.72rem;
  color: hsl(var(--rb-neutro-medio));
  line-height: 1.5;
  margin-bottom: 0.5rem;
  flex-grow: 1;
}
.rb-prod-weight {
  font-size: 0.72rem;
  color: hsl(var(--rb-neutro-medio));
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.rb-prod-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid rgba(41, 36, 32, 0.05);
  padding-top: 0.75rem;
}
.rb-prod-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--rb-foreground));
}
.rb-btn--outline-gold {
  border: 1px solid hsl(var(--rb-primary));
  color: hsl(var(--rb-primary)) !important;
  background: transparent;
}
.rb-btn--outline-gold:hover {
  background: hsl(var(--rb-primary));
  color: hsl(var(--rb-neutro-scuro)) !important;
}

/* Ancient Grains */
.rb-home-ancient {
  position: relative;
  width: 100%;
  padding: 6.5rem 0;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.rb-home-ancient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(26, 23, 20, 0.95) 0%, rgba(26, 23, 20, 0.75) 60%, rgba(26, 23, 20, 0.3) 100%);
  z-index: 1;
}
.rb-home-ancient-container {
  position: relative;
  z-index: 2;
}
.rb-home-ancient-content {
  max-width: 550px;
  text-align: left;
}
.rb-home-ancient-eyebrow {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: hsl(var(--rb-primary));
  margin-bottom: 1rem;
  font-weight: 600;
}
.rb-home-ancient-title {
  font-family: var(--rb-font-heading);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 500;
}
.rb-home-ancient-lead {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(245, 243, 240, 0.82);
  margin-bottom: 2rem;
}
.rb-home-ancient-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}
.rb-ancient-item {
  border-left: 2px solid hsl(var(--rb-primary) / 0.5);
  padding-left: 1.25rem;
}
.rb-ancient-item h3 {
  font-family: var(--rb-font-heading);
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.rb-ancient-item span {
  font-size: 0.78rem;
  color: rgba(245, 243, 240, 0.65);
}

/* Why Choose Us Comparison */
.rb-home-whyus {
  padding: 5.5rem 0;
  background: hsl(var(--rb-background));
}

/* Bundle Section */
.rb-home-bundle {
  padding: 5.5rem 0;
  background: hsl(var(--rb-background));
}
.rb-home-bundle-box {
  border: 1px solid rgba(41, 36, 32, 0.08);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(217, 202, 188, 0.2);
  box-shadow: var(--rb-shadow-sm);
}
.rb-home-bundle-content {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: left;
}
.rb-bundle-eyebrow {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--rb-primary));
  margin-bottom: 1rem;
  font-weight: 600;
}
.rb-home-bundle-content h2 {
  font-family: var(--rb-font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: hsl(var(--rb-foreground));
}
.rb-bundle-lead {
  font-size: 0.85rem;
  line-height: 1.65;
  color: hsl(var(--rb-neutro-medio));
  margin-bottom: 1.5rem;
}
.rb-bundle-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rb-bundle-list li {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: hsl(var(--rb-foreground));
}
.rb-bundle-check {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: rgba(212, 160, 23, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--rb-primary));
  flex-shrink: 0;
  margin-top: 1px;
}
.rb-bundle-price-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.rb-price-new {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--rb-foreground));
}
.rb-price-old {
  font-size: 0.95rem;
  text-decoration: line-through;
  color: hsl(var(--rb-neutro-medio));
}
.rb-price-badge {
  font-size: 0.62rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(212, 160, 23, 0.15);
  color: hsl(var(--rb-primary));
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
}
.rb-home-bundle-media {
  background-size: cover;
  background-position: center;
  width: 100%;
}

/* Seasonal Cards */
.rb-home-seasonal {
  padding: 5.5rem 0;
  background: hsl(var(--rb-background));
}
.rb-seasonal-card {
  background: hsl(var(--rb-background));
  border: 1px solid rgba(41, 36, 32, 0.08);
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.rb-seasonal-card:hover {
  box-shadow: var(--rb-shadow-md);
  border-color: rgba(41, 36, 32, 0.15);
}
.rb-seasonal-media {
  height: 240px;
  background-size: cover;
  background-position: center;
  width: 100%;
}
.rb-seasonal-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.rb-seasonal-tag {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(var(--rb-primary));
  margin-bottom: 0.5rem;
  display: block;
}
.rb-seasonal-content h3 {
  font-family: var(--rb-font-heading);
  font-size: 1.2rem;
  color: hsl(var(--rb-foreground));
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.rb-seasonal-content p {
  font-size: 0.75rem;
  line-height: 1.6;
  color: hsl(var(--rb-neutro-medio));
  margin: 0;
  flex-grow: 1;
}

/* Olio Section */
.bg-ulivo-chiaro-15 {
  background: rgba(92, 122, 78, 0.06);
}
.rb-olio-features {
  margin-top: 1.5rem;
  text-align: left;
}
.rb-olio-features h4 {
  font-family: var(--rb-font-body);
  font-weight: 600;
}
.rb-olio-features p {
  line-height: 1.5;
  margin: 0;
}

/* Reviews / Testimonials */
.rb-home-reviews {
  padding: 5.5rem 0;
  background: rgba(242, 234, 224, 0.4);
}
.rb-review-card {
  background: hsl(var(--rb-background));
  border: 1px solid rgba(41, 36, 32, 0.08);
  border-radius: 4px;
  padding: 1.75rem;
  height: 100%;
  box-shadow: var(--rb-shadow-sm);
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.25s ease;
}
.rb-review-card:hover {
  transform: translateY(-2px);
}
.rb-review-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 0.75rem;
  color: hsl(var(--rb-primary));
}
.rb-review-text {
  font-size: 0.78rem;
  line-height: 1.65;
  font-style: italic;
  color: hsl(var(--rb-neutro-scuro) / 0.8);
  flex-grow: 1;
  margin-bottom: 1.25rem;
}
.rb-review-author {
  padding-top: 1rem;
  border-top: 1px solid rgba(41, 36, 32, 0.08);
  display: flex;
  flex-direction: column;
}
.rb-author-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--rb-foreground));
}
.rb-author-type {
  font-size: 0.68rem;
  color: hsl(var(--rb-neutro-medio));
  margin-top: 1px;
}

/* ==========================================================================
 * 19. Header, Container, and Footer Redesign Overrides
 * ========================================================================== */

/* Header / Navigation Bar overrides */
#header {
  background: hsl(var(--rb-background)) !important;
  border-bottom: 1px solid rgba(41, 36, 32, 0.06);
}
#header .header-nav {
  background: hsl(var(--rb-neutro-scuro)) !important;
  color: #fff;
  font-size: 0.72rem;
}
#header .header-nav a {
  color: rgba(255, 255, 255, 0.85) !important;
}
#header .header-nav a:hover {
  color: hsl(var(--rb-primary)) !important;
}
#header .header-top {
  padding: 1rem 0;
}
.header-top .menu-link {
  font-family: var(--rb-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.01em;
  color: hsl(var(--rb-foreground)) !important;
  transition: color 150ms ease;
}
.header-top .menu-link:hover {
  color: hsl(var(--rb-primary)) !important;
}

/* Footer layout matching Lovable */
#footer {
  background: hsl(var(--rb-neutro-scuro)) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--rb-font-body);
  font-size: 0.8rem;
  padding-top: 4rem;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6,
#footer .block-footer-title {
  font-family: var(--rb-font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: 0;
}
#footer a {
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color 150ms ease;
}
#footer a:hover {
  color: hsl(var(--rb-primary)) !important;
  text-decoration: none;
}
#footer .footer-container {
  padding-bottom: 3rem;
}
#footer .footer-after {
  background: rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.5rem 0;
  font-size: 0.72rem;
}
#footer .footer-after .copyright {
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Category Page Story and Other Categories Sections
   ========================================================================== */

/* Spacing and helper utilities */
.py-20 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.py-28 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
.py-24 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.mb-5 {
  margin-bottom: 3rem !important;
}

.aspect-4-5 {
  aspect-ratio: 4 / 5;
}

.rounded-sm {
  border-radius: 0.25rem !important;
}

.border-top-light {
  border-top: 1px solid hsl(var(--rb-border) / 0.4) !important;
}

.text-uppercase-tracking {
  font-family: var(--rb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Story section split */
.rb-story-section {
  background-color: #f5f3ef !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}

.rb-story-section .container {
  max-width: 1140px !important;
}

.rb-story-section .row {
  margin-left: -2.5rem !important;
  margin-right: -2.5rem !important;
}

.rb-story-section [class*="col-"] {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.rb-story-section .text-uppercase-tracking.text-primary {
  color: hsl(var(--rb-primary)) !important;
  font-family: var(--rb-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
}

.rb-story-section .font-heading.h2 {
  font-family: var(--rb-font-heading) !important;
  font-size: 2.25rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: hsl(var(--rb-foreground)) !important;
  margin-bottom: 2rem !important;
}

.rb-story-section p.text-lg {
  font-family: var(--rb-font-body) !important;
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
  color: hsl(var(--rb-neutro-medio)) !important;
}

/* Story section pillars */
.rb-story-section svg.text-primary {
  color: hsl(var(--rb-primary)) !important;
}

.rb-story-section h3.font-heading.h6 {
  font-family: var(--rb-font-heading) !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: hsl(var(--rb-foreground)) !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
}

.rb-story-section p.text-xs {
  font-family: var(--rb-font-body) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: hsl(var(--rb-neutro-medio)) !important;
}

/* Other categories explorer grid */
.rb-other-categories {
  background-color: #f5f3ef !important;
  border-top: 1px solid hsl(var(--rb-border) / 0.4);
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}

.rb-other-categories .text-uppercase-tracking.text-primary {
  color: hsl(var(--rb-primary)) !important;
  font-family: var(--rb-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.rb-other-categories .font-heading.h2 {
  font-family: var(--rb-font-heading) !important;
  font-size: 2.25rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: hsl(var(--rb-foreground)) !important;
  margin-bottom: 3rem !important;
  text-align: center !important;
}

.rb-cat-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  aspect-ratio: 4 / 5;
  text-decoration: none !important;
  box-shadow: var(--rb-shadow-sm);
  transition: box-shadow 0.3s ease;
}

.rb-cat-card:hover {
  box-shadow: var(--rb-shadow-lg);
}

.rb-cat-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--rb-foreground) / 0.85) 0%, hsl(var(--rb-foreground) / 0.2) 60%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.rb-cat-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem !important;
  z-index: 3;
  text-align: left;
}

.transition-scale {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-cat-card:hover .transition-scale {
  transform: scale(1.05);
}

.rb-cat-card-tagline {
  font-family: var(--rb-font-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: hsl(var(--rb-grano-chiaro)) !important;
}

.rb-cat-card-title {
  font-family: var(--rb-font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: hsl(var(--rb-pietra-chiaro)) !important;
  margin: 0 !important;
}

@media (max-width: 991.98px) {
  .py-20 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .py-28 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .rb-story-section .font-heading.h2 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }
  .rb-story-section p.text-lg {
    font-size: 1rem;
    line-height: 1.6;
  }
  .rb-cat-card-content {
    padding: 1rem !important;
  }
  .rb-cat-card-title {
    font-size: 1rem;
  }
}

/* Product grid section background & full-bleed */
body[id^="category"] .rb-grid-header {
  background-color: #d8ccc04d !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  padding-top: 5rem !important;
  padding-bottom: 2rem !important;
  margin-bottom: 0 !important;
}

body[id^="category"] #products {
  background-color: #d8ccc04d !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  padding-top: 0 !important;
}

body[id^="category"] .rb-grid-header-inner {
  max-width: var(--rb-container-max);
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  body[id^="category"] .rb-grid-header {
    padding-top: 3rem !important;
    padding-bottom: 1.5rem !important;
  }
  body[id^="category"] #products {
    padding-bottom: 3rem !important;
  }
}

@media (max-width: 768px) {
  body[id^="category"] #products .products.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    padding: 0 1.25rem !important;
  }
  body[id^="category"] #products .products.row::before,
  body[id^="category"] #products .products.row::after {
    display: none !important;
  }
  body[id^="category"] #products .products.row .js-product-miniature-wrapper {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
@media (max-width: 480px) {
  body[id^="category"] #products .products.row {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}