/* Royal Collection Group — stile comune */
body { font-family: Inter, system-ui, sans-serif; color: #0a2540; }
.font-display { font-family: 'DM Sans', sans-serif; }

/* ============================================================
   HEADING HELPER (h2/h3/h4/h5/h6 -> div)
   Le utility Tailwind già presenti sui blocchi coprono lo stile
   visivo; questa classe è solo un aggancio semantico/di stile
   condiviso per i "titoli" resi come <div>.
   ============================================================ */
.heading-lg,
.heading-md,
.heading-sm { display: block; }

/* ============================================================
   CARD CATEGORIE (swiper-slide)
   ============================================================ */
.cat-card { display: flex; flex: 0 0 78%; min-height: 430px; }
@media (min-width: 640px) { .cat-card { flex-basis: calc((100% - 16px) / 2); min-height: 460px; } }
@media (min-width: 1024px) { .cat-card { flex-basis: calc((100% - 48px) / 4); min-height: 480px; } }
@media (min-width: 1280px) { .cat-card { flex-basis: calc((100% - 64px) / 5); min-height: 500px; } }

/* ============================================================
   SLIDE PRODOTTI NEI TAB (swiper-slide)
   ============================================================ */
.tab-slide { flex: 0 0 calc((100% - 4rem) / 5); }
@media (max-width: 1024px) { .tab-slide { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 640px) { .tab-slide { flex-basis: calc((100% - 1rem) / 2); } }

/* ============================================================
   TAB PANELS (mostra/nasconde il pannello attivo — lo scorrimento
   orizzontale è gestito da Swiper dentro ciascun pannello)
   ============================================================ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* dropdown menu */
.has-dropdown > .dropdown { visibility: hidden; opacity: 0; transform: translateY(-4px); transition: all .15s ease; }
.has-dropdown:hover > .dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
.has-dropdown:hover > a .chev { transform: rotate(180deg); }
.chev { transition: transform .2s; }

/* favorite button */
.fav-btn.is-active { color: #e11d48; }
.fav-btn.is-active svg { fill: #e11d48; }

/* product tabs (Ultimi arrivi / Più venduti / Stagionali) */
.tab-btn { color: #6b7280; }
.tab-btn:hover { color: #0a2540; }
.tab-btn.active { color: #154592; }
.tab-underline { display: none; }
.tab-btn.active .tab-underline { display: block; }

/* dual range price slider (catalogo) */
.range-wrap { position: relative; height: 36px; }
.range-wrap input[type=range] { position: absolute; left: 0; right: 0; top: 14px; width: 100%; height: 4px; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #154592; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; }
.range-wrap input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #154592; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; }
.range-track { position: absolute; left: 0; right: 0; top: 24px; height: 4px; background: #e6e8ec; border-radius: 9999px; }
.range-fill { position: absolute; top: 24px; height: 4px; background: #154592; border-radius: 9999px; }

/* ============================================================
   REVEAL ON SCROLL — classe riutilizzabile, agganciata via
   IntersectionObserver in script.js (mai direttamente sui tag)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   SWIPER — hero
   ============================================================ */
.hero-dot { height: 8px; width: 8px; border-radius: 9999px; background: rgba(21,69,146,.3); transition: all .2s ease; border: 0; padding: 0; cursor: pointer; }
.hero-dot:hover { background: rgba(21,69,146,.5); }
.hero-dot-active { height: 12px; width: 12px; background: #154592; }

/* ============================================================
   SWIPER — categorie
   ============================================================ */
.cat-dot { height: 8px; width: 8px; border-radius: 9999px; background: rgba(21,69,146,.25); transition: all .2s ease; border: 0; padding: 0; cursor: pointer; }
.cat-dot:hover { background: rgba(21,69,146,.6); }
.cat-dot-active { background: #154592; }