/* ============================================================
   PRODUCT DETAIL — scheda Su Misura /prodotti/<slug>/
   Estetica HAY/Flos: ultra-minimal, Inter + Onest
   ============================================================ */

.pd-page {
    background: transparent;
    padding-top: 16px;
}

/* ============ 1. BREADCRUMB ============ */

.pd-crumb-bar {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 32px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.pd-crumb {
    font-family: var(--font-uppercase);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 0;
}
.pd-crumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pd-crumb a:hover { color: var(--text); }
.pd-crumb span { color: var(--text-muted); margin: 0 6px; }

/* ============ 2. HERO: GALLERIA + INFO ============ */

.pd-hero {
    max-width: 1320px;
    margin: 0 auto;
    padding: 56px 32px 96px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
    align-items: start;
}

/* --- Galleria --- */
.pd-gallery {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    position: sticky;
    top: 32px;
    align-items: start;
}
.pd-gallery-main {
    aspect-ratio: 3 / 4;
    background: var(--bg-soft);
    overflow: hidden;
    grid-column: 2;
    grid-row: 1;
}
.pd-gallery-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.25s ease;
}
.pd-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: 1;
    grid-row: 1;
}
.pd-gallery-thumb {
    aspect-ratio: 1 / 1;
    background: var(--bg-soft);
    border: none;
    outline: 1px solid transparent;
    outline-offset: -1px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: outline-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}
.pd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pd-gallery-thumb:hover { opacity: 0.9; }
.pd-gallery-thumb.is-active {
    outline-color: var(--text);
    opacity: 1;
}
.pd-gallery-empty {
    aspect-ratio: 3 / 4;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 13px;
}

/* --- Info --- */
.pd-info {
    padding-top: 8px;
}
.pd-kicker {
    font-family: var(--font-uppercase);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 0 0 18px;
}
.pd-title {
    font-family: var(--font-uppercase);
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 500;
    letter-spacing: -0.6px;
    line-height: 0.95;
    color: var(--text);
    text-transform: uppercase;
    margin: 0 0 28px;
}
.pd-desc {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-soft);
    margin: 0 0 36px;
    max-width: 520px;
}

/* --- Configurazione --- */
.pd-config {
    margin: 0 0 32px;
    padding: 24px 0;
    border-top: 0.5px solid rgba(0,0,0,0.12);
    border-bottom: 0.5px solid rgba(0,0,0,0.12);
}
.pd-config-label {
    font-family: var(--font-uppercase);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 0 0 16px;
}
.pd-config-list {
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-config-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.6;
}
.pd-config-row dt {
    color: var(--text-muted);
    font-weight: 400;
    margin: 0;
}
.pd-config-row dd {
    color: var(--text);
    font-weight: 400;
    margin: 0;
    text-align: right;
}
.pd-config-note {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
    margin: 16px 0 0;
    line-height: 1.6;
    font-style: italic;
}

/* --- Tempi produzione --- */
.pd-lead-time {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 36px;
}
.pd-lead-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c9a66b;
    flex-shrink: 0;
}
.pd-lead-text {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-soft);
    letter-spacing: 0.2px;
}
.pd-lead-text strong {
    color: var(--text);
    font-weight: 500;
}

/* --- CTA --- */
.pd-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.pd-cta {
    background: var(--text);
    color: var(--bg);
    border: 0.5px solid var(--text);
    padding: 18px 36px;
    font-family: var(--font-uppercase);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: letter-spacing 0.3s ease, background 0.25s ease, color 0.25s ease;
}
.pd-cta:hover {
    letter-spacing: 2.8px;
    background: transparent;
    color: var(--text);
}
.pd-cta-sub {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* ============ 3. PROCESSO ============ */
/* ============ 4. PROGETTI (vuoto, future cross-link) ============ */
/* ============ 5. CORRELATI ============ */
.pd-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.pd-modal.is-open { display: block; }

.pd-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 16, 0.6);
    cursor: pointer;
    animation: pdFade 0.25s ease;
}
@keyframes pdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdScale { from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.pd-modal-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 920px;
    max-height: calc(100vh - 48px);
    background: var(--bg);
    box-shadow: 0 24px 60px rgba(20, 18, 16, 0.25);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    overflow: hidden;
    animation: pdScale 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(255,255,255,0.85);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.pd-modal-close:hover { background: var(--bg); }

/* --- Aside SX --- */
.pd-modal-aside {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #2a2826;
    min-height: 320px;
    overflow: hidden;
    margin: -1px 0;
}
.pd-modal-aside-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(20, 18, 16, 0.88) 0%,
        rgba(20, 18, 16, 0.55) 26%,
        rgba(20, 18, 16, 0.55) 74%,
        rgba(20, 18, 16, 0.88) 100%);
}
.pd-modal-aside-body {
    position: relative;
    z-index: 1;
    padding: 40px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    color: #f4ede1;
}
.pd-modal-aside-kicker {
    font-family: var(--font-uppercase);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.8;
}
.pd-modal-aside-title {
    font-family: var(--font-uppercase);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
}
.pd-modal-aside-text {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    opacity: 0.85;
    max-width: 320px;
}

/* --- Form DX --- */
.pd-modal-form-wrap {
    padding: 40px 36px;
    overflow-y: auto;
    max-height: calc(100vh - 48px);
}
.pd-modal-form-header {
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e2ded5;
}
.pd-modal-form-kicker {
    font-family: var(--font-uppercase);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    color: #aaa6a0;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.pd-modal-form-name {
    font-family: var(--font-uppercase);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text);
    text-transform: uppercase;
    margin: 0 0 4px;
    line-height: 1.1;
}
.pd-modal-form-detail {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 4px;
}
.pd-modal-form-sub {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #7a776f;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

.pd-modal-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pd-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pd-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pd-form-label {
    font-family: var(--font-uppercase);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.4px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.pd-req { color: #9b2a1f; margin-left: 2px; }
.pd-form-opt {
    color: var(--text-tertiary, #9a948a);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.2px;
    font-size: 10px;
}
.pd-form-field input,
.pd-form-field textarea {
    background: transparent;
    border: none;
    border-bottom: 0.5px solid rgba(0,0,0,0.2);
    padding: 8px 0;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease;
    resize: vertical;
}
.pd-form-field input:focus,
.pd-form-field textarea:focus {
    border-bottom-color: #9b2a1f;
}
.pd-form-field textarea {
    border: 0.5px solid rgba(0,0,0,0.2);
    padding: 10px 12px;
    line-height: 1.5;
    font-family: var(--font-ui);
}
.pd-form-field textarea:focus {
    border-color: #9b2a1f;
}

.pd-form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pd-form-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 9px 16px;
    border: 0.5px solid rgba(0,0,0,0.2);
    font-family: var(--font-uppercase);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--text-muted);
    text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.pd-form-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pd-form-radio:hover { border-color: var(--text); color: var(--text); }
.pd-form-radio:has(input:checked) {
    background: #9b2a1f;
    border-color: #9b2a1f;
    color: #fff;
}

.pd-form-submit {
    margin-top: 8px;
    padding: 16px 28px;
    background: var(--text);
    border: none;
    color: #fff;
    font-family: var(--font-uppercase);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
    align-self: flex-start;
}
.pd-form-submit:hover:not(:disabled) {
    opacity: 0.85;
}
.pd-form-submit:disabled {
    opacity: 0.5;
    cursor: wait;
}

.pd-form-feedback {
    margin-top: 12px;
    padding: 12px 16px;
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.5;
}
.pd-form-feedback.is-success {
    background: rgba(154, 184, 146, 0.18);
    color: #4a6a3e;
    border-left: 2px solid #9ab892;
}
.pd-form-feedback.is-error {
    background: rgba(212, 147, 138, 0.18);
    color: #8a3c34;
    border-left: 2px solid #d4938a;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 960px) {
    .pd-hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 32px 24px 64px;
    }
    .pd-gallery { position: static; }
    .pd-modal-panel { grid-template-columns: 1fr; max-height: 92vh; }
    .pd-modal-aside { min-height: 180px; }
    .pd-modal-aside-body { padding: 28px 24px; }
    .pd-modal-form-wrap { padding: 28px 24px; }
}

@media (max-width: 640px) {
    .pd-form-row-2col { grid-template-columns: 1fr; }
    .pd-form-radio-group { flex-direction: column; }
    .pd-form-radio { width: 100%; justify-content: center; }
}


/* === STEP D: hero raffinata === */

/* Kicker arricchito (tipologia · stile) */
.pd-kicker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}
.pd-kicker-row .pd-kicker {
    margin: 0;
}
.pd-kicker-dot {
    width: 3px;
    height: 3px;
    background: #c4c0b8;
    border-radius: 50%;
    flex-shrink: 0;
}
.pd-kicker-stile {
    font-family: var(--font-uppercase);
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Cross-link fratelli */
.pd-fratelli {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
    margin: -24px 0 36px;
}
.pd-fratelli a {
    color: #9b2a1f;
    text-decoration: none;
    border-bottom: 1px solid #9b2a1f;
    padding-bottom: 1px;
    margin: 0 2px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 500;
}
.pd-fratelli a:hover {
    color: #1a1815;
    border-bottom-color: #1a1815;
}

/* Configuratore: pillole no-box con underline */
#pdConfig .pd-config-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
}
#pdConfig .pd-config-pill {
    padding: 6px 0;
    margin: 0;
    font-size: 16px;
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    font-family: inherit;
    color: #7a776f;
    line-height: 1.2;
    transition: color 0.12s ease, border-color 0.12s ease;
    border-bottom: 1.5px solid transparent !important;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
#pdConfig .pd-config-pill[data-axis="luci"] {
    min-width: 32px;
    text-align: center;
}
#pdConfig .pd-config-pills[id="pdPillsLuci"] {
    gap: 0 18px;
}
#pdConfig .pd-config-pill:hover {
    color: var(--text);
    background: transparent !important;
}
#pdConfig .pd-config-pill.is-selected {
    color: #9b2a1f !important;
    background: transparent !important;
    border-bottom-color: #9b2a1f !important;
    font-weight: 500;
}
#pdConfig .pd-config-pill.is-disabled {
    color: #d8d3c8 !important;
    border-style: solid !important;
    border-bottom: 1.5px solid transparent !important;
    cursor: pointer;
}
#pdConfig .pd-config-pill.is-disabled:hover {
    color: #aaa6a0 !important;
}

/* Asse label più discreta */
#pdConfig .pd-config-axis-label {
    font-family: var(--font-uppercase);
    font-size: 10px;
    letter-spacing: 1.4px;
    color: #aaa6a0;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 12px;
}
#pdConfig .pd-config-axis-hint {
    text-transform: none;
    letter-spacing: 0;
    color: #c4c0b8;
    font-size: 11px;
    font-weight: 400;
}
#pdConfig .pd-config-label {
    font-family: var(--font-uppercase);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: var(--text);
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 22px;
}

/* Riepilogo "Stai componendo" — bordi top + bottom, no fill */
#pdConfig .pd-config-summary {
    background: transparent !important;
    border-top: 1px solid #e2ded5;
    /* border-bottom rimosso per evitare doppia linea */
    border-radius: 0 !important;
    padding: 18px 0 !important;
    margin: 24px 0 22px !important;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: baseline;
}
.pd-config-summary-main { min-width: 0; }
.pd-config-summary-label {
    font-family: var(--font-uppercase);
    font-size: 10px;
    letter-spacing: 1.4px;
    color: #aaa6a0;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 6px;
}
.pd-config-summary-value {
    font-family: var(--font-ui);
    font-size: 18px;
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: uppercase;
}
.pd-config-summary-value-sub {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #7a776f;
    font-weight: 400;
    margin: 6px 0 0;
}
.pd-config-summary-aside p {
    font-family: var(--font-ui);
    font-size: 11px;
    color: #7a776f;
    text-align: right;
    margin: 0;
    line-height: 1.5;
}

/* Link "Servono altre misure?" */
.pd-altre-misure {
    text-align: center;
    margin: 12px 0 36px;
}
.pd-altre-misure a {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #7a776f;
    text-decoration: none;
    border-bottom: 0.5px solid #d6d2c8;
    padding-bottom: 1px;
}
.pd-altre-misure a:hover {
    color: #9b2a1f;
    border-bottom-color: #9b2a1f;
}

/* Sezione Dettagli tecnici */
.pd-details {
    border-top: 1px solid #e2ded5;
    padding-top: 22px;
    margin-top: 0;
}
.pd-details-label {
    font-family: var(--font-uppercase);
    font-size: 10px;
    letter-spacing: 1.4px;
    color: #aaa6a0;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 16px;
}
.pd-details-list {
    margin: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px 16px;
    font-family: var(--font-ui);
    font-size: 14px;
}
.pd-details-list dt {
    color: #7a776f;
    margin: 0;
    font-weight: 400;
}
.pd-details-list dd {
    color: var(--text);
    margin: 0;
}


/* ============================================== */
/* === SEZIONE 002: IL PROCESSO (Timeline C) === */
/* ============================================== */
.pd-process {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 32px 96px;
}
.pd-process-header {
    margin: 0 0 56px;
}
.pd-process-kicker {
    font-family: var(--font-uppercase);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #aaa6a0;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
}
.pd-process-title {
    font-family: var(--font-uppercase);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.005em;
    color: var(--text);
    text-transform: uppercase;
    margin: 0;
}
.pd-process-timeline {
    position: relative;
}
.pd-process-line {
    position: absolute;
    top: 11px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: #e2ded5;
    z-index: 0;
}
.pd-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    z-index: 1;
}
.pd-process-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pd-process-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid #9b2a1f;
    margin: 0 0 26px;
    position: relative;
    flex-shrink: 0;
}
.pd-process-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9b2a1f;
}
.pd-process-num {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #9b2a1f;
    margin: 0 0 12px;
}
.pd-process-step-title {
    font-family: var(--font-uppercase);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text);
    text-transform: uppercase;
    margin: 0 0 14px;
}
.pd-process-step-text {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #6d6862;
    line-height: 1.7;
    margin: 0;
}

/* ====================================================== */
/* === SEZIONE 003: PROGETTI REALIZZATI === */
/* ====================================================== */
.pd-projects {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 32px 96px;
}
.pd-projects-header {
    margin: 0 0 32px;
}
.pd-projects-kicker {
    font-family: var(--font-uppercase);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #aaa6a0;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
}
.pd-projects-title {
    font-family: var(--font-uppercase);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.005em;
    color: var(--text);
    text-transform: uppercase;
    margin: 0;
}

/* ====================================================== */
/* === SEZIONE 004: POTREBBE INTERESSARTI (Layout H) === */
/* ====================================================== */
.pd-related {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 32px 96px;
    border-top: 1px solid #e2ded5;
}
.pd-related-kicker {
    font-family: var(--font-uppercase);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #aaa6a0;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
}
.pd-related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 56px;
}
.pd-related-title {
    font-family: var(--font-uppercase);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.005em;
    color: var(--text);
    text-transform: uppercase;
    margin: 0;
}
.pd-related-link {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9b2a1f;
    text-decoration: none;
    border-bottom: 1px solid #9b2a1f;
    padding-bottom: 2px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.pd-related-link:hover {
    color: var(--text);
    border-bottom-color: var(--text);
}
.pd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.pd-related-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.pd-related-photo-wrap {
    aspect-ratio: 1 / 1;
    background: #ede8df;
    overflow: hidden;
    margin: 0 0 16px;
}
.pd-related-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.pd-related-card:hover .pd-related-photo {
    transform: scale(1.04);
}
.pd-related-meta-row {
    margin: 0 0 6px;
}
.pd-related-meta {
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 1.6px;
    color: #aaa6a0;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
}
.pd-related-name {
    font-family: var(--font-uppercase);
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.2;
}

/* Responsive */
@media (max-width: 900px) {
    .pd-process { padding: 56px 24px 64px; }
    .pd-process-header { margin-bottom: 40px; }
    .pd-process-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .pd-process-line { display: none; }
    .pd-projects { padding: 56px 24px 64px; }
    .pd-related { padding: 56px 24px 72px; }
    .pd-related-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .pd-related-header { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; }
}
@media (max-width: 560px) {
    .pd-process-grid { grid-template-columns: 1fr; gap: 28px; }
    .pd-related-grid { grid-template-columns: 1fr; gap: 28px; }
}


/* === IN AMBIENTE - griglia progetti realizzati (20260610) === */
.pd-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pd-projects-card { display: block; text-decoration: none; color: inherit; }
.pd-projects-photo-wrap { aspect-ratio: 4 / 3; background: #ede8df; overflow: hidden; margin: 0 0 16px; }
.pd-projects-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.pd-projects-card:hover .pd-projects-photo { transform: scale(1.04); }
.pd-projects-meta { font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.6px; color: #aaa6a0; text-transform: uppercase; margin: 0 0 6px; font-weight: 500; }
.pd-projects-name { font-family: var(--font-uppercase); font-size: 18px; font-weight: 500; letter-spacing: 0.2px; color: var(--text); text-transform: uppercase; margin: 0; }
@media (max-width: 720px) { .pd-projects-grid { grid-template-columns: 1fr; gap: 24px; } }

/* === IN AMBIENTE - layout singolo: card + testo (20260610) === */
.pd-projects-solo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.55fr); gap: 48px; align-items: center; }
.pd-projects-aside-kicker { font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #aaa6a0; font-weight: 500; margin: 0 0 14px; }
.pd-projects-aside-lead { font-family: var(--font-uppercase); font-size: clamp(24px, 2.8vw, 34px); font-weight: 500; line-height: 1.08; letter-spacing: -0.005em; text-transform: uppercase; color: var(--text); margin: 0 0 18px; }
.pd-projects-aside-body { font-family: var(--font-ui); font-size: 16px; line-height: 1.7; color: #6b675f; margin: 0 0 30px; max-width: none; }
.pd-projects-aside-cta { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--text); padding-bottom: 3px; transition: color 0.2s, border-color 0.2s; }
.pd-projects-aside-cta:hover { color: #9b2a1f; border-color: #9b2a1f; }
@media (max-width: 720px) { .pd-projects-solo { grid-template-columns: 1fr; gap: 28px; } }

/* === IN AMBIENTE - riempi altezza colonna testo (20260610_152838) === */
.pd-projects-solo { align-items: stretch; }
.pd-projects-aside { display: flex; flex-direction: column; }
.pd-projects-aside-cta { align-self: flex-start; margin-top: auto; }

/* === IN AMBIENTE - manifesto compatto centrato (20260610_153209) === */
.pd-projects-solo { align-items: center; }
.pd-projects-aside { display: block; max-width: 460px; margin: 0 auto; padding: 0 20px; text-align: center; }
.pd-projects-aside-lead { font-size: clamp(22px, 2.4vw, 30px); }
.pd-projects-aside-body { font-size: 15px; max-width: none; margin: 0 0 26px; }
.pd-projects-aside-cta { margin-top: 0; }

/* === IN AMBIENTE - alza + titolo piu grande (20260610_153732) === */
.pd-projects-aside-lead { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; margin: 0 0 18px; }
@media (min-width: 721px) { .pd-projects-aside { transform: translateY(-26px); } }

/* === FINITURE (sotto la scheda) — fin_block v3 grid colori === */
.pd-finiture{max-width:1320px;margin:0 auto;padding:80px 32px 0;}
.pd-fin-header{margin:0 0 26px;}
.pd-fin-kicker{font-family:var(--font-uppercase);font-size:11px;letter-spacing:1.8px;color:#aaa6a0;text-transform:uppercase;margin:0 0 14px;}
.pd-fin-title{font-family:var(--font-uppercase);font-size:clamp(28px,3vw,44px);font-weight:500;line-height:.95;letter-spacing:-0.005em;color:var(--text);margin:0;}
.pd-fin-intro{max-width:560px;font-size:16px;line-height:1.6;color:#5b584f;margin:0 0 40px;}
.pd-fin-grouplabel{font-family:var(--font-uppercase);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#9a978d;margin:0 0 16px;}
.pd-fin-grouplabel--vetro{margin-top:36px;}
.pd-fin-panels{display:flex;gap:7px;height:260px;border-radius:4px;overflow:hidden;}
.pd-fin-panel{flex:1;position:relative;background-size:cover;background-position:center;cursor:pointer;transition:flex .4s cubic-bezier(.4,0,.2,1);}
.pd-fin-panels:hover .pd-fin-panel{flex:.7;}
.pd-fin-panels .pd-fin-panel:hover{flex:2.6;}
.pd-fin-panel-name{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-size:13px;letter-spacing:.05em;background:linear-gradient(to top,rgba(0,0,0,.45),transparent);}
.pd-fin-panel--light .pd-fin-panel-name{color:#2b2b2b;background:linear-gradient(to top,rgba(255,255,255,.6),transparent);}
.pd-fin-dots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:28px 10px;justify-items:center;}
.pd-fin-dot-item{display:flex;flex-direction:column;align-items:center;gap:9px;}
.pd-fin-dot{width:42px;height:42px;border-radius:50%;border:0.5px solid rgba(0,0,0,.14);display:block;}
.pd-fin-name{font-size:12px;color:#46443d;text-align:center;line-height:1.2;}
.pd-fin-vetro-note{font-size:12.5px;line-height:1.5;color:#9a978d;margin:12px 0 0;}
.pd-fin-foot{margin-top:44px;}
.pd-fin-foot-line{display:block;height:1px;background:#e6e2d8;margin:0 0 20px;}
.pd-fin-note{font-size:13.5px;color:#8a877d;margin:0;}
.pd-fin-disclaimer{font-size:12.5px;line-height:1.5;color:#9a978d;margin:8px 0 0;}
.pd-fin-link{font:inherit;color:#9b2a1f;background:none;border:none;border-bottom:1px solid #d8b6ae;padding:0 0 1px;cursor:pointer;}
.pd-fin-link:hover{border-bottom-color:#9b2a1f;}
@media (max-width:900px){.pd-finiture{padding:64px 24px 0;}.pd-fin-panels:not(.pd-fin-panels--vetro){display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:auto;}.pd-fin-panels:not(.pd-fin-panels--vetro) .pd-fin-panel{aspect-ratio:1/1;}.pd-fin-dots{grid-template-columns:repeat(6,1fr);}}
@media (max-width:600px){.pd-finiture{padding:52px 20px 0;}.pd-fin-intro{font-size:15px;}.pd-fin-panels:not(.pd-fin-panels--vetro){grid-template-columns:1fr 1fr;gap:8px;}.pd-fin-dots{grid-template-columns:repeat(4,1fr);max-width:none;gap:20px 8px;}}

/* vetro-strip */
.pd-fin-panels--vetro{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;height:auto;overflow:visible;margin-bottom:22px;}
.pd-fin-vetro-grp{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a09a8e;margin:0 0 10px;}
.pd-fin-panels.pd-fin-panels--vetro .pd-fin-panel{width:auto;flex:none;aspect-ratio:1/1;height:auto;border-radius:6px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;}
.pd-fin-panels.pd-fin-panels--vetro .pd-fin-panel:hover{transform:scale(1.18);box-shadow:0 10px 26px rgba(0,0,0,.25);z-index:3;}
.pd-fin-panels--vetro .pd-fin-panel-name{font-size:10.5px;padding:6px 7px;line-height:1.25;letter-spacing:.03em;opacity:0;transition:opacity .25s ease;}
.pd-fin-panels--vetro .pd-fin-panel:hover .pd-fin-panel-name{opacity:1;}
@media (hover:none){.pd-fin-panels--vetro .pd-fin-panel-name{opacity:1;}}
@media (max-width:1100px){.pd-fin-panels.pd-fin-panels--vetro .pd-fin-panel{flex:0 0 86px;}}
@media (max-width:760px){.pd-fin-panels.pd-fin-panels--vetro .pd-fin-panel{flex:0 0 78px;}.pd-fin-panels--vetro .pd-fin-panel-name{opacity:1;}}
@media (max-width:480px){.pd-fin-panels.pd-fin-panels--vetro .pd-fin-panel{flex:0 0 calc((100% - 16px)/3);}}

@media (max-width:420px){.pd-fin-panels--vetro{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));}}

/* modale su-misura bvm3 (23/09/2026) */
.bvm3{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px;overflow:auto} .bvm3.is-open{display:flex} .bvm3-ov{position:absolute;inset:0;background:rgba(20,14,8,.62);animation:bvm3fade .3s} .bvm3-md{position:relative;width:min(1100px,100%);display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.6);animation:bvm3up .6s cubic-bezier(.2,.7,.2,1);font-family:'Space Grotesk',system-ui,sans-serif;color:#3a2f22;max-height:calc(100vh - 48px)} .bvm3-x{position:absolute;right:16px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(28,22,16,.13);background:#fff;cursor:pointer;z-index:3} .bvm3-x::before,.bvm3-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.3px;background:#1c1610;transform:translate(-50%,-50%) rotate(45deg)} .bvm3-x::after{transform:translate(-50%,-50%) rotate(-45deg)} .bvm3 .k{font-family:'Archivo';font-weight:700;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#9a3a2e;display:block;margin:0 0 12px} .bvm3-L{position:relative;background:#1c1610;color:#f4efe7;padding:40px 40px 34px;display:flex;flex-direction:column;overflow:hidden} .bvm3-L img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:sepia(.2) saturate(.9)} .bvm3-L::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,14,8,.95) 0,rgba(20,14,8,.5) 60%,rgba(20,14,8,.35) 100%)} .bvm3-L>*{position:relative;z-index:2} .bvm3-L .k{color:#e6b8a7} .bvm3-L h2{font-family:'Space Grotesk';font-weight:500;font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.025em;line-height:1.08;color:#f4efe7;max-width:16ch;margin:0} .bvm3-L p{margin:14px 0 0;color:rgba(244,239,231,.85);max-width:36ch;font-size:.98rem;line-height:1.5} .bvm3-L .steps{margin-top:auto;padding-top:26px;border-top:1px solid rgba(244,239,231,.2);display:grid;gap:10px} .bvm3-L .steps div{display:grid;grid-template-columns:34px 1fr;gap:10px;font-size:.88rem;color:rgba(244,239,231,.85)} .bvm3-L .steps b{font-family:'Archivo';font-weight:700;font-size:.56rem;letter-spacing:.18em;color:#e6b8a7;padding-top:4px} .bvm3-R{padding:40px 44px 36px;position:relative;overflow:auto} .bvm3-R h3{font-family:'Space Grotesk';font-weight:500;font-size:1.4rem;letter-spacing:-.02em;color:#1c1610;margin:0} .bvm3-R .sub{color:#8a8074;font-size:.92rem;margin-top:4px} .bvm3-R .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px} .bvm3-R .row.one{grid-template-columns:1fr} .bvm3-R .f label{display:block;font-family:'Archivo';font-weight:700;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#8a8074;margin-bottom:6px} .bvm3-R .f input,.bvm3-R .f textarea{width:100%;border:0;border-bottom:1px solid rgba(28,22,16,.13);padding:9px 0;outline:none;background:none;font:inherit;font-size:1rem;color:#1c1610;border-radius:0;transition:border-color .2s} .bvm3-R .f input:focus,.bvm3-R .f textarea:focus{border-color:#1c1610} .bvm3-R .f textarea{min-height:92px;resize:vertical} .bvm3-R .f .opt{font-weight:400;font-size:.56rem;letter-spacing:.14em;text-transform:none} .bvm3-R .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .bvm3-R .pills button{padding:9px 14px;border-radius:999px;border:1px solid rgba(28,22,16,.13);background:none;font:inherit;font-size:.86rem;color:#1c1610;cursor:pointer;transition:all .2s} .bvm3-R .pills button.on{background:#1c1610;color:#f4efe7;border-color:#1c1610} .bvm3-R .help{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .bvm3-R .help button{padding:6px 10px;border-radius:999px;border:1px dashed rgba(28,22,16,.25);background:none;font:inherit;font-size:.76rem;color:#5a4f42;cursor:pointer} .bvm3-R .help button:hover{border-style:solid;border-color:#1c1610;color:#1c1610} .bvm3-R .drop{margin-top:22px;border:1px dashed rgba(28,22,16,.3);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .2s,border-color .2s} .bvm3-R .drop:hover{background:#faf7f2;border-color:#1c1610} .bvm3-R .drop .ic{width:38px;height:38px;border-radius:50%;border:1px solid rgba(28,22,16,.13);display:grid;place-items:center;font-size:1.1rem;color:#1c1610;flex:0 0 auto} .bvm3-R .drop b{display:block;font-weight:500;color:#1c1610;font-size:.95rem} .bvm3-R .drop small{color:#8a8074;font-size:.8rem} .bvm3-R .drop .files{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .bvm3-R .drop .files span{padding:4px 8px;border-radius:6px;background:#efe8dc;font-size:.72rem} .bvm3-R .bt{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .bvm3-R .bt button{padding:16px 26px;border-radius:999px;background:#1c1610;color:#f4efe7;border:0;font-family:'Archivo';font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .2s} .bvm3-R .bt button:hover{background:#9a3a2e} .bvm3-R .bt button:disabled{opacity:.6;cursor:wait} .bvm3-R .bt small{font-size:.76rem;color:#8a8074;max-width:34ch;line-height:1.35} .bvm3-R .fb{margin-top:12px;font-size:.88rem;color:#9a3a2e;min-height:1.2em} .bvm3-R .ok{display:none;position:absolute;inset:0;background:#fff;padding:60px 44px;flex-direction:column;justify-content:center} .bvm3-md.sent .ok{display:flex} .bvm3-R .ok h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.1} .bvm3-R .ok p{margin:14px 0 0;color:#4a4034;max-width:40ch} .bvm3-R .ok .next{margin-top:26px;display:grid;gap:10px;font-size:.92rem;color:#4a4034} .bvm3-R .ok .next b{font-family:'Archivo';font-weight:700;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:#9a3a2e;margin-right:10px} .bvm3-R .ok .more{display:inline-block;width:max-content;margin-top:26px;font-family:'Archivo';font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#1c1610;border-bottom:1px solid #1c1610;padding-bottom:4px;text-decoration:none} @keyframes bvm3fade{from{opacity:0}to{opacity:1}} @keyframes bvm3up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} 
.bvm3{--cream:#f4efe7;--ink:#1c1610;--rose:#e6b8a7;--key:#9a3a2e}
@media(max-width:760px){.bvm3{padding:0;align-items:flex-end}.bvm3-md{grid-template-columns:1fr;border-radius:22px 22px 0 0;max-height:100vh}.bvm3-L{padding:28px 24px}.bvm3-L .steps{display:none}.bvm3-R{padding:28px 24px}.bvm3-R .row{grid-template-columns:1fr}}
