/* ===== Catalogo: home (categorie-macro) e shop (catalogo) ===== */

/* --- Box macrocategorie --- */
.macro-box { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #3A4A58; margin-bottom: 30px; }
.macro-box__immagine, .macro-box__immagine img, .macro-box__segnaposto { position: absolute; inset: 0; width: 100%; height: 100%; }
.macro-box__immagine img { object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.macro-box__segnaposto { background: linear-gradient(135deg, #3A4A58 0%, #6B7D52 100%); }
.macro-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,23,0) 35%, rgba(23,23,23,.72) 100%); transition: background .5s; }
.macro-box__contenuto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 38px; color: #fff; }
.macro-box__titolo { font-family: "Playfair Display", serif; font-size: 46px; font-weight: 600; line-height: 1.05; color: #fff; margin: 0 0 8px; }
.macro-box__sottotitolo { font-size: 16px; color: rgba(255,255,255,.9); margin: 0; }
.macro-box__bottone { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 22px; border: 1px solid #fff; color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s, background-color .3s, border-color .3s; }
.macro-box:hover .macro-box__immagine img { transform: scale(1.06); }
.macro-box:hover::after { background: linear-gradient(180deg, rgba(23,23,23,.15) 0%, rgba(23,23,23,.8) 100%); }
.macro-box:hover .macro-box__bottone { opacity: 1; transform: translateY(0); }
.macro-box__bottone:hover { background-color: #d68d67; border-color: #d68d67; }

/* titolo sezione in home sopra i box */
.macro-box-lista { margin-top: 44px; }

/* --- Intestazione shop --- */
.catalogo-intestazione { margin-bottom: 36px; }
.catalogo-briciole { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: #707070; }
.catalogo-briciole li + li::before { content: "›"; margin-right: 6px; color: #b5b5b5; }
.catalogo-briciole a { color: #707070; }
.catalogo-briciole a:hover { color: #d68d67; }
.catalogo-titolo { font-family: "Playfair Display", serif; font-size: 42px; font-weight: 600; color: #3A4A58; line-height: 1.1; margin: 0 0 6px; }
.catalogo-conteggio { color: #707070; margin: 0; }

/* --- Selettore macro (Ceramiche / Terracotta) --- */
.macro-switch { display: inline-flex; border: 1px solid #dedede; margin-bottom: 30px; }
.macro-switch a { padding: 12px 28px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #494949; transition: background-color .3s, color .3s; }
.macro-switch a + a { border-left: 1px solid #dedede; }
.macro-switch a:hover { color: #d68d67; }
.macro-switch a.active { background: #3A4A58; color: #fff; }

/* --- Card categorie / sottocategorie --- */
.categoria-card { display: block; margin-bottom: 30px; }
.categoria-card__immagine { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #f3efe9; }
.categoria-card__immagine img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.categoria-card__segnaposto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f3efe9 0%, #e6ddd1 100%); font-family: "Playfair Display", serif; font-size: 64px; color: rgba(58,74,88,.35); }
.categoria-card__conteggio { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.95); border: 1px solid #e6ddd1; box-shadow: 0 2px 8px rgba(23,23,23,.08); color: #3A4A58; font-size: 12px; padding: 4px 10px; letter-spacing: .03em; }
.categoria-card__nome { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 2px 0; font-family: "Playfair Display", serif; font-size: 20px; font-weight: 600; color: #171717; line-height: 1.25; }
.categoria-card__nome i { font-size: 14px; color: #d68d67; transition: transform .3s; }
.categoria-card:hover .categoria-card__immagine img { transform: scale(1.06); }
.categoria-card:hover .categoria-card__nome { color: #d68d67; }
.categoria-card:hover .categoria-card__nome i { transform: translateX(4px); }

/* --- Elenco categorie laterale --- */
.catalogo-menu { position: sticky; top: 110px; border: 1px solid #ebe6df; background: #fbf9f6; padding: 24px 22px; }
.catalogo-menu__titolo { font-family: "Playfair Display", serif; font-size: 22px; font-weight: 600; color: #3A4A58; margin: 0 0 14px; }
.catalogo-menu__lista { list-style: none; padding: 0; margin: 0; }
.catalogo-menu__lista a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 -12px; color: #494949; font-size: 15px; border-left: 2px solid transparent; transition: background-color .25s, color .25s, border-color .25s; }
.catalogo-menu__lista a span { font-size: 12px; color: #9a9a9a; min-width: 28px; text-align: right; }
.catalogo-menu__lista a:hover { background: #fff; color: #d68d67; }
.catalogo-menu__lista a.active { background: #fff; color: #171717; font-weight: 600; border-left-color: #d68d67; }

/* --- Filtro sottocategorie (chip) --- */
.catalogo-chip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.catalogo-chip a { padding: 8px 16px; border: 1px solid #dedede; color: #494949; font-size: 14px; white-space: nowrap; transition: border-color .25s, color .25s, background-color .25s; }
.catalogo-chip a:hover { border-color: #d68d67; color: #d68d67; }
.catalogo-chip a.active { background: #171717; border-color: #171717; color: #fff; }

.catalogo-sezione-titolo { font-family: "Playfair Display", serif; font-size: 26px; font-weight: 600; color: #3A4A58; margin: 10px 0 24px; padding-top: 24px; border-top: 1px solid #ebe6df; }
.catalogo-vuoto { padding: 40px; text-align: center; background: #fbf9f6; color: #707070; }

/* --- Responsive --- */
@media (hover: none), (max-width: 767px) {
    .macro-box__bottone { opacity: 1; transform: none; }
}
@media (max-width: 991px) {
    .catalogo-menu { position: static; padding: 0; border: 0; background: transparent; margin-bottom: 24px; }
    .catalogo-menu__titolo { font-size: 18px; margin-bottom: 10px; }
    .catalogo-menu__lista { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .catalogo-menu__lista a { margin: 0; padding: 8px 14px; border: 1px solid #dedede; border-left-width: 1px; white-space: nowrap; background: #fff; }
    .catalogo-menu__lista a.active { border-color: #171717; background: #171717; color: #fff; }
    .catalogo-menu__lista a.active span { color: rgba(255,255,255,.7); }
}
@media (max-width: 767px) {
    .macro-box { aspect-ratio: 4 / 3.4; margin-bottom: 20px; }
    .macro-box-lista { margin-top: 28px; }
    .macro-box__contenuto { padding: 22px; }
    .macro-box__titolo { font-size: 34px; }
    .macro-box__sottotitolo { font-size: 14px; }
    .macro-box__bottone { margin-top: 14px; padding: 9px 16px; font-size: 12px; }
    .catalogo-titolo { font-size: 30px; }
    .macro-switch { display: flex; }
    .macro-switch a { flex: 1; text-align: center; padding: 11px 10px; }
    .categoria-card { margin-bottom: 22px; }
    .categoria-card__nome { font-size: 16px; }
    .catalogo-chip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
}