/* ============================================================
   Zawaya Piano Box Wizard — wizard.css v7.1 (Figma-Accurate Rebuild)
   Font: Open Sans — Light 300, Regular 400, SemiBold 600
   All spacing matched to Figma nodes exactly
============================================================ */

/* ============================================================
   ROOT & RESET
============================================================ */

.zpb-wizard {
    --zpb-black:      #202020;
    --zpb-white:      #ffffff;
    --zpb-off-white:  #F8EFEB;
    --zpb-bg:         #ffffff;
    --zpb-muted:      #A0A0A1;
    --zpb-rose:       #DBBBAD;
    --zpb-done-label: #CBAFA2;
    --zpb-border:     #B7B7B7;
    --zpb-inactive-bg:#F0F0F0;
    --zpb-eyebrow-c:  rgba(0, 0, 0, 0.48);
    --zpb-card-text:  #3C3C3D;
    --zpb-font:       'Open Sans', sans-serif;
    --zpb-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --zpb-t:          0.3s var(--zpb-ease);
    --zpb-pad:        128px;

    font-family: var(--zpb-font);
    color: #000;
    background: var(--zpb-white);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.zpb-wizard *, .zpb-wizard *::before, .zpb-wizard *::after { box-sizing: border-box; }
.zpb-wizard img    { max-width: 100%; height: auto; display: block; }
.zpb-wizard button { cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.zpb-wizard a      { color: inherit; text-decoration: none; }

/* ============================================================
   HEADER — Figma: px-128, py-24, gap-24, centered
   Compact: reduced vertical padding
============================================================ */
.zpb-header {
    text-align: center;
    padding: 24px var(--zpb-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.zpb-eyebrow {
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    color: var(--zpb-eyebrow-c);
    text-transform: uppercase;
    margin: 0;
    line-height: normal;
}

.zpb-title {
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin: 0;
    line-height: 30px;
    color: #000;
}

.zpb-subtitle {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    max-width: 100%;
    margin: 0;
}

.zpb-subtitle strong {
    font-weight: 600;
    color: #000;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    display: block;
    margin-top: 16px;
}

/* ============================================================
   STEPPER — Figma: 40px circles, gap-8 to label
   Active = border #DBBBAD bg #F8EFEB
   Done = checkmark on rose bg
   Inactive = bg #F0F0F0
============================================================ */
.zpb-stepper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0 var(--zpb-pad);
    margin-bottom: 36px;
}

.zpb-step {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.zpb-step:last-child { flex: 0 0 auto; }

.zpb-step__num {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    padding: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s var(--zpb-ease);
    background: var(--zpb-inactive-bg);
    border: none;
    color: var(--zpb-muted);
}

.zpb-step__line {
    flex: 1;
    height: 2px;
    background: var(--zpb-border);
    transition: background 0.3s var(--zpb-ease);
}

.zpb-step__label {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    transform: translateX(calc(20px - 50%));
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s var(--zpb-ease);
    color: var(--zpb-muted);
}

/* Active step */
.zpb-step.is-active .zpb-step__num {
    background: var(--zpb-off-white);
    border: 1px solid var(--zpb-rose);
    color: #000;
}

.zpb-step.is-active .zpb-step__label {
    color: #000;
}

/* Done step */
.zpb-step.is-done .zpb-step__num {
    background: var(--zpb-rose);
    border: none;
    color: transparent;
    font-size: 0;
}

.zpb-step.is-done .zpb-step__num::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: -2px;
}

.zpb-step.is-done .zpb-step__line {
    background: var(--zpb-rose);
}

.zpb-step.is-done .zpb-step__label {
    color: var(--zpb-done-label);
}

/* ============================================================
   LOADING OVERLAY
============================================================ */
.zpb-loading {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.zpb-loading.is-active { display: flex; pointer-events: auto; }

.zpb-loading__spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--zpb-border);
    border-top-color: var(--zpb-black);
    border-radius: 50%;
    animation: zpb-spin 0.65s linear infinite;
}

@keyframes zpb-spin { to { transform: rotate(360deg); } }

/* ============================================================
   PANEL — content area for each step
============================================================ */
.zpb-panel {
    animation: zpb-in 0.35s ease;
    padding: 16px var(--zpb-pad);
}

@keyframes zpb-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BUTTONS — Figma: padding 48px×16px, border-radius 4px
============================================================ */
.zpb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    border-radius: 4px;
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 20px;
    transition: all 0.25s var(--zpb-ease);
    white-space: nowrap;
    min-width: 130px;
}

.zpb-btn--primary {
    background: var(--zpb-black) !important;
    color: var(--zpb-off-white) !important;
    border: 1px solid var(--zpb-black) !important;
}

.zpb-btn--primary:hover { opacity: 0.85; }
.zpb-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }

.zpb-btn--ghost {
    background: var(--zpb-white) !important;
    color: var(--zpb-black) !important;
    border: 1px solid var(--zpb-black) !important;
}

.zpb-btn--ghost:hover { opacity: 0.85; }

.zpb-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.zpb-actions .zpb-btn { flex: 1; min-width: 0; }

/* ============================================================
   NOTICE
============================================================ */
.zpb-notice {
    padding: 12px 20px;
    margin: 12px 0;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
}

.zpb-notice--error   { background: #fff8f8; color: #b00; border: 1px solid #f5c5c5; }
.zpb-notice--success { background: #f8fbf8; color: #2a6a2a; border: 1px solid #c5dcc5; }

/* ============================================================
   STEP 01 — BOX OVERVIEW
   Figma: flex row, image left (flex:1 aspect 568x568),
   aside right (thumbs 194x194 + price 346.67px)
============================================================ */
.zpb-s1-layout {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-bottom: 16px;
}

.zpb-s1-image {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.zpb-s1-image__wrap {
    position: relative;
    background: var(--zpb-white);
    line-height: 0;
}

.zpb-s1-image__wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* Step 1 photo container for hotspots */
.zpb-s1-box-photo {
    width: 100%;
    position: relative;
    line-height: 0;
}

.zpb-s1-box-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hotspots */
.zpb-hotspot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    z-index: 15;
    filter: drop-shadow(0px 4px 25px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s ease;
    cursor: pointer;
}

.zpb-hotspot:hover { transform: translate(-50%, -50%) scale(1.05); }

.zpb-hotspot__dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--zpb-off-white);
    border: none;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px rgba(248, 239, 235, 0.35), 0 4px 20px rgba(0, 0, 0, 0.20);
    animation: zpb-pulse 2.4s ease-in-out infinite;
}

@keyframes zpb-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(248, 239, 235, 0.35), 0 4px 20px rgba(0, 0, 0, 0.20); }
    50%      { box-shadow: 0 0 0 12px rgba(248, 239, 235, 0.18), 0 4px 20px rgba(0, 0, 0, 0.25); }
}

.zpb-hotspot__tag {
    background: var(--zpb-off-white);
    padding: 8px 24px;
    border-radius: 24px;
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #000;
    white-space: nowrap;
}

/* Hotspot positions — Figma absolute px on 568×568 box */
.zpb-hotspot--color {
    left: 84.5%;
    top: 34%;
    transform: translate(-50%, -50%);
}

.zpb-hotspot--frags {
    left: 53.3%;
    top: 71.5%;
    transform: translate(-50%, -50%);
}

.zpb-hotspot--engrave {
    left: 79.2%;
    top: 90.1%;
    transform: translate(-50%, -50%);
}

/* Sidebar — Figma shows thumbs + price on right */
.zpb-s1-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.zpb-s1-thumbs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zpb-sthumb {
    padding: 0;
    overflow: visible;
    transition: border-color 0.25s var(--zpb-ease);
    line-height: 0;
    background: var(--zpb-white);
    border: 2px solid transparent;
}

.zpb-sthumb img {
    width: 194px;
    height: 194px;
    object-fit: cover;
    display: block;
    background: var(--zpb-white);
}

.zpb-sthumb.is-active,
.zpb-sthumb:hover { border-color: var(--zpb-black); }

.zpb-s1-price {
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 8px 16px;
    border-bottom: 1px solid var(--zpb-muted);
    width: 346.67px;
    color: #000;
}

/* ============================================================
   FILTERS — Figma: 548px wide, centered
============================================================ */
.zpb-filters-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-top: 0;
}

.zpb-filters-header {
    width: 548px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid #000;
    height: 40px;
}

.zpb-filters-label {
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #000;
}

.zpb-filters-header svg { width: 24px; height: 24px; }

.zpb-filter-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    width: 548px;
    background: var(--zpb-off-white);
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-height: 122px;
}

.zpb-filter-row:first-of-type { min-height: 152px; }
.zpb-filter-row:hover { opacity: 0.85; }

.zpb-filter-row__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.zpb-filter-row__title {
    display: block;
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 20px;
    color: #000;
    margin: 0;
}

.zpb-filter-row__detail {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 16px;
    color: #000;
}

.zpb-filter-row__empty {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #000;
}

.zpb-filter-row__thumb {
    width: 128px;
    height: 128px;
    object-fit: cover;
    flex-shrink: 0;
    background: transparent;
    border-radius: 2px;
}

.zpb-filter-row__arrow {
    color: #000;
    flex-shrink: 0;
    padding: 0 7px;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* ============================================================
   STEP 02 — COLORS
   Figma: swatches at top-right (right:~38px, top:~37px in 800px box)
   Box image centered, max 568px (inset ~3% inside 800px frame)
============================================================ */
.zpb-s2-swatches-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 16px;
}

.zpb-swatches {
    display: flex;
    align-items: center;
    gap: 11px;
}

.zpb-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.25s var(--zpb-ease);
    outline: none;
    opacity: 0.5;
}

.zpb-swatch:hover { opacity: 0.75; }

.zpb-swatch.is-selected {
    opacity: 1;
    width: 35px;
    height: 35px;
    border-color: var(--zpb-rose);
}

.zpb-s2-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    max-width: 568px;
    margin: 0 auto;
    background: var(--zpb-white);
    overflow: visible;
    position: relative;
}

.zpb-s2-image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.25s var(--zpb-ease);
    margin-top: 0;
    margin-bottom: 0;
}

/* ============================================================
   STEP 03 — ITEMS
   Figma: flex row, image left (flex:1), aside right
   3 thumbs (194×194) + price (346.67px)
============================================================ */
.zpb-s3-layout {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-bottom: 16px;
}

.zpb-s3-image {
    flex: 1;
    line-height: 0;
    background: var(--zpb-white);
    min-width: 0;
}

.zpb-s3-image__wrap {
    position: relative;
    line-height: 0;
    background: var(--zpb-white);
}

.zpb-s3-image__wrap img,
.zpb-s3-image img {
    width: 100%;
    height: auto;
    display: block;
}

.zpb-s3-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.zpb-s3-thumbs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zpb-s3-price {
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    margin: 0;
    padding: 8px 16px;
    border-bottom: 1px solid var(--zpb-muted);
    width: 346.67px;
    text-align: center;
}

/* ============================================================
   FRAGRANCE CAROUSEL — horizontal slider at all breakpoints
============================================================ */
.zpb-carousel-outer {
    position: relative;
    padding: 0 24px;
    margin-bottom: 8px;
}

.zpb-frag-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 8px 0 16px;
}

.zpb-frag-carousel::-webkit-scrollbar { display: none; }

.zpb-carr-btn {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 34px;
    height: 34px;
    border: 1px solid var(--zpb-black);
    background: var(--zpb-black);
    color: var(--zpb-white);
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 50%;
    cursor: pointer;
}

.zpb-carr-btn--prev { left: -4px; }
.zpb-carr-btn--next { right: -4px; }

.zpb-frag-card {
    flex-shrink: 0;
    width: 228px;
    min-width: 228px;
    scroll-snap-align: start;
    border: 1px solid var(--zpb-border);
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    position: relative;
    background: var(--zpb-white);
    transition: border-color 0.25s var(--zpb-ease);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.zpb-frag-card:hover        { border-color: #888; }
.zpb-frag-card.is-selected  { border-color: var(--zpb-black); }
.zpb-frag-card.is-oos       { opacity: 0.35; cursor: not-allowed; }

.zpb-frag-card__radio {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--zpb-border);
    background: var(--zpb-white);
    transition: all 0.2s var(--zpb-ease);
    z-index: 2;
}

.zpb-frag-card.is-selected .zpb-frag-card__radio {
    background: var(--zpb-black);
    border-color: var(--zpb-black);
}

.zpb-frag-card.is-selected .zpb-frag-card__radio::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zpb-white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zpb-frag-card__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border-radius: 0;
    margin-bottom: 0;
    display: block;
}

.zpb-frag-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.zpb-frag-card__collection {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 8px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #3C3C3D;
    text-align: center;
    line-height: 16px;
    width: 100%;
}

.zpb-frag-card__name {
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 20px;
    color: #3C3C3D;
    text-align: center;
    width: 100%;
}

.zpb-frag-card__oos {
    font-size: 12px;
    color: var(--zpb-muted);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.zpb-frag-loading {
    padding: 40px;
    color: var(--zpb-muted);
    font-size: 16px;
    text-align: center;
    width: 100%;
}

/* ============================================================
   BOX IMAGE & BOTTLE OVERLAYS
============================================================ */
.zpb-slot-overlays {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.zpb-slot-bottle {
    position: absolute;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    padding: 0;
    margin: 0;
    line-height: 0;
}

.zpb-slot-bottle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
    line-height: 0;
}

@keyframes zpb-bottle-in {
    from { opacity: 0; transform: translateY(10px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   STEP 04 — ENGRAVING
============================================================ */
.zpb-s4-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 24px;
    background: var(--zpb-white);
    max-width: 568px;
    margin: 0 auto;
    overflow: visible;
}

.zpb-s4-image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 0;
    margin-bottom: 0;
}

.zpb-s4-form {
    max-width: 752px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.zpb-s4-input-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zpb-s4-input-wrap { width: 100%; }

.zpb-s4-input-wrap input {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 4px;
    background: var(--zpb-inactive-bg);
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 16px;
    color: #000;
    padding: 16px 24px;
    outline: none;
    transition: background 0.25s var(--zpb-ease);
}

.zpb-s4-input-wrap input:focus { background: #e8e4df; }

.zpb-s4-input-wrap input::placeholder {
    color: var(--zpb-muted);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.zpb-s4-hint-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.zpb-s4-hint {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: var(--zpb-muted);
    margin: 0;
}

.zpb-s4-counter {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: var(--zpb-muted);
}

.zpb-s4-cta {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 752px;
}

.zpb-s4-cta .zpb-btn { flex: 1; }

.zpb-s4-returns {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #000;
    text-decoration: none;
    text-align: center;
    transition: color 0.2s var(--zpb-ease);
}

.zpb-s4-returns:hover { color: var(--zpb-muted); }

/* ============================================================
   STEP 05 — SUMMARY (same layout as Step 1, closed box)
============================================================ */
.zpb-s5-layout {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-bottom: 16px;
}

.zpb-s5-image {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.zpb-s5-image__wrap {
    position: relative;
    background: var(--zpb-white);
    line-height: 0;
    overflow: visible;
}

.zpb-s5-image__wrap img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}

.zpb-s5-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.zpb-s5-thumbs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zpb-s5-price {
    font-family: var(--zpb-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 8px 16px;
    border-bottom: 1px solid var(--zpb-muted);
    width: 346.67px;
    color: #000;
}

/* ============================================================
   DISCLAIMER — Figma: px-128, py-48
============================================================ */
.zpb-disclaimer {
    font-family: var(--zpb-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--zpb-muted);
    padding: 48px var(--zpb-pad);
    margin: 0;
}

/* ============================================================
   THEME OVERRIDES — prevent WP themes from hijacking styles
============================================================ */
.zpb-wizard .zpb-btn,
.zpb-wizard .zpb-btn.zpb-btn--primary,
.zpb-wizard .zpb-btn.zpb-btn--ghost,
body .zpb-wizard .zpb-btn {
    border-radius: 4px !important;
    line-height: 20px !important;
    height: auto !important;
    font-family: var(--zpb-font) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    padding: 16px 48px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body .zpb-wizard .zpb-btn--ghost {
    background: var(--zpb-white) !important;
    color: var(--zpb-black) !important;
    border: 1px solid var(--zpb-black) !important;
}

body .zpb-wizard .zpb-btn--primary {
    background: var(--zpb-black) !important;
    color: var(--zpb-off-white) !important;
    border: 1px solid var(--zpb-black) !important;
}

/* Fragrance card theme overrides */
body .zpb-wizard .zpb-frag-card {
    border-radius: 4px !important;
    padding: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body .zpb-wizard .zpb-frag-card__img {
    background: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    margin-bottom: 4px !important;
    box-shadow: none !important;
}

body .zpb-wizard .zpb-frag-card__radio {
    width: 24px !important;
    height: 24px !important;
    top: 16px !important;
    right: 16px !important;
    border-radius: 50% !important;
}

body .zpb-wizard .zpb-frag-card__collection {
    font-size: 8px !important;
    letter-spacing: 0.8px !important;
    font-weight: 400 !important;
    color: #3C3C3D !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 16px !important;
    font-family: var(--zpb-font) !important;
    font-style: normal !important;
    width: 100% !important;
}

body .zpb-wizard .zpb-frag-card__name {
    font-size: 16px !important;
    letter-spacing: 1.6px !important;
    font-weight: 600 !important;
    color: #3C3C3D !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 20px !important;
    font-family: var(--zpb-font) !important;
    font-style: normal !important;
    width: 100% !important;
}

/* ============================================================
   RESPONSIVE — Tablet
============================================================ */
@media (max-width: 1200px) {
    .zpb-wizard { --zpb-pad: 64px; }
}

@media (max-width: 900px) {
    .zpb-wizard { --zpb-pad: 24px; }

    .zpb-s1-layout,
    .zpb-s3-layout,
    .zpb-s5-layout { flex-direction: column; gap: 24px; }

    .zpb-s1-aside  { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .zpb-s5-aside  { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .zpb-s1-thumbs { flex-direction: row; gap: 16px; }
    .zpb-sthumb img { width: 120px; height: 120px; }

    .zpb-s3-aside  { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .zpb-s3-thumbs { flex-direction: row; gap: 16px; }

    .zpb-s1-price,
    .zpb-s3-price,
    .zpb-s5-price { width: 100%; }

    .zpb-filter-row,
    .zpb-filters-header { width: 100%; }

    .zpb-frag-card { width: 180px; min-width: 180px; }

    .zpb-s2-image-wrap { max-width: 100%; }
    .zpb-s4-image-wrap { max-width: 100%; }
    .zpb-s4-form { max-width: 100%; }

    .zpb-actions { max-width: 100%; }
    .zpb-btn { min-width: unset; }
}

/* ============================================================
   MOBILE — Figma 430px breakpoint
============================================================ */
@media (max-width: 600px) {
    .zpb-wizard { --zpb-pad: 16px; }

    /* Header */
    .zpb-header { gap: 12px; padding: 16px; }
    .zpb-title { font-size: 20px; }

    /* Stepper — hide labels on mobile */
    .zpb-stepper { padding: 16px 16px 0; margin-bottom: 16px; }
    .zpb-step__label { display: none; }

    .zpb-panel { padding: 16px; }

    /* Step 1 & 5 layout */
    .zpb-s1-layout { gap: 16px; }
    .zpb-s5-layout { gap: 16px; }
    .zpb-sthumb img { width: 160px; height: 160px; }

    /* Hotspots smaller on mobile */
    .zpb-hotspot { padding: 6px; gap: 6px; }
    .zpb-hotspot__dot { width: 24px; height: 24px; }
    .zpb-hotspot__tag {
        font-size: 9px;
        letter-spacing: 0.9px;
        padding: 5px 14px;
        border-radius: 14px;
    }

    /* Price */
    .zpb-s1-price { width: 100%; max-width: 346px; }
    .zpb-s5-price { width: 100%; max-width: 346px; }

    /* Filter rows */
    .zpb-filter-row__thumb { display: none; }
    .zpb-filter-row { min-height: auto; padding: 16px 24px; }
    .zpb-filter-row:first-of-type { min-height: auto; }
    .zpb-filters-header { width: 100%; }

    /* Buttons — full width stacked */
    .zpb-actions {
        max-width: 100%;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
    }

    body .zpb-wizard .zpb-btn {
        width: 100% !important;
        min-width: unset !important;
        padding: 16px 24px !important;
    }

    /* Step 2 */
    .zpb-s2-image-wrap { max-width: 100%; }
    .zpb-swatches { gap: 16px; }
    .zpb-swatch { width: 32px; height: 32px; }
    .zpb-swatch.is-selected { width: 40px; height: 40px; }

    /* Step 3 */
    .zpb-s3-layout { gap: 16px; }

    /* Fragrance cards — smaller on mobile */
    .zpb-frag-carousel { gap: 12px; }
    .zpb-frag-card { width: 160px; min-width: 160px; }
  /* Hide Step 3 sidebar on mobile */
    .zpb-s3-aside { display: none; }
    /* Step 4 */
    .zpb-s4-image-wrap { max-width: 100%; padding: 0 0 16px; }
    .zpb-s4-form { max-width: 100%; gap: 12px; }
    .zpb-s4-cta { flex-direction: column; }
    .zpb-s4-cta .zpb-btn { max-width: 100%; }

    /* Disclaimer */
    .zpb-disclaimer { padding: 32px 16px; }
}
/* ============================================================
   CAROUSEL FORCE FIX — override any theme conflicts
============================================================ */
body .zpb-wizard .zpb-frag-carousel,
.zpb-wizard .zpb-frag-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
    grid-template-columns: unset !important;
}

body .zpb-wizard .zpb-frag-carousel::-webkit-scrollbar {
    display: none !important;
}

body .zpb-wizard .zpb-frag-card,
.zpb-wizard .zpb-frag-card {
    flex-shrink: 0 !important;
    width: 228px !important;
    min-width: 228px !important;
    scroll-snap-align: start !important;
}

body .zpb-wizard .zpb-carousel-outer,
.zpb-wizard .zpb-carousel-outer {
    position: relative !important;
    padding: 0 24px !important;
}

body .zpb-wizard .zpb-carr-btn,
.zpb-wizard .zpb-carr-btn {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-60%) !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #202020 !important;
    background: #202020 !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}