/* Loading overlay — shown for any link that lands on this page */
.wizard-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
}

.wizard-loader--hide {
    opacity: 0;
    pointer-events: none;
}

.wizard-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.wizard-loader__logo {
    width: 120px;
    height: auto;
}

.wizard-loader__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e4e4ef;
    border-top-color: var(--roxo-vivo);
    border-radius: 50%;
    animation: wizard-spin 0.7s linear infinite;
}

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

/* ==========================================================================
   Cap Wizard — Pick Style / Select Color / Choose Your Cap / Personalize
   Uses the theme's existing --roxo-* tokens (already reserved for the
   "Customization" feature on the homepage) so this page reads as the same
   product, not a bolted-on one.
   ========================================================================== */

.wizard-hero {
    text-align: center;
    padding: 60px 0 40px;
}

.wizard-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--roxo-acento);
    margin-bottom: 12px;
}

.wizard-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--roxo-vivo);
    margin-bottom: 14px;
}

.wizard-subtitle {
    font-size: 17px;
    color: #555;
    max-width: 560px;
    margin: 0 auto 40px;
}

.wizard-subtitle strong,
.wizard-subtitle b {
    color: #222;
}

/* Progress bar */
.wizard-progress {
    max-width: 900px;
    margin: 0 auto;
}

.wizard-progress__track {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.wizard-progress__step {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: #e4e4ef;
    transition: background 0.25s ease;
}

.wizard-progress__step.active {
    background: var(--roxo-acento);
}

.wizard-progress__status {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
}

.wizard-progress__count {
    color: var(--roxo-acento);
    font-weight: bold;
    letter-spacing: 0.5px;
}

.wizard-progress__count b {
    color: var(--roxo-vivo);
}

.wizard-progress__summary {
    color: #8a8a99;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Reserves the space the wizard occupies once fully open (all steps
   visible, no scroll-jump between steps 2/3) right from first paint, so
   the footer's photo mosaic doesn't sit too close while only step 1 is
   showing and doesn't jump around as later steps appear. */
.wizard-body {
    min-height: 1200px;
}

/* Sections */
.wizard-section {
    padding: 50px 0;
    text-align: center;
    /* The site header becomes position:fixed on scroll (~120px tall) —
       without this, scrollIntoView({block:'start'}) on step-advance lands
       the section's top edge (title + step text) right behind it, cutting
       the "SELECT A COLOR" / "SELECT BRIM COLOR" headings off from view. */
    scroll-margin-top: 130px;
}

.wizard-section[hidden] {
    display: none;
}

.wizard-section__title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2b2b40;
    margin-bottom: 30px;
}

.wizard-section__num {
    color: var(--roxo-acento);
}

/* Step 1 — Pick Your Style */
.wizard-style-grid {
    display: grid;
    /* auto-fit instead of a fixed column count — with fewer styles than the
       grid was sized for (e.g. today's 5), fixed columns left the cards
       small and bunched to one side with empty space beside them. This lets
       each card grow to fill the row instead, and still wraps cleanly if
       the catalog grows back up toward 8 styles. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.wizard-style-card {
    position: relative;
    background: #fff;
    border: 2px solid #e4e4ef;
    border-radius: 14px;
    padding: 30px 16px 24px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.wizard-style-card:hover {
    border-color: var(--roxo-acento);
    transform: translateY(-2px);
}

.wizard-style-card.active {
    border-color: var(--roxo-vivo);
    box-shadow: 0 0 0 1px var(--roxo-vivo);
}

.wizard-style-card img,
.wizard-style-card__placeholder {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.wizard-style-card__label {
    font-size: 15px;
    font-weight: 600;
    color: #2b2b40;
}

.wizard-style-card__check {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--roxo-vivo);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.wizard-style-card.active .wizard-style-card__check {
    display: flex;
}

/* Step 2 — Select a Color */
.wizard-color-row {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.wizard-color-swatch {
    --swatch-color: #ccc;
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--swatch-color);
    border: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wizard-color-swatch:hover {
    transform: translateY(-2px);
}

.wizard-color-swatch.active {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--roxo-vivo);
}

.wizard-color-swatch__check {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--roxo-vivo);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.wizard-color-swatch.active .wizard-color-swatch__check {
    display: flex;
}

/* Step 3 — Choose Your Cap */
.wizard-caps__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 24px;
}

.wizard-caps__count {
    font-size: 14px;
    color: #8a8a99;
}

.wizard-change-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d7d7e4;
    border-radius: 30px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #2b2b40;
    cursor: pointer;
}

.wizard-change-btn:hover {
    border-color: var(--roxo-acento);
    color: var(--roxo-vivo);
}

/* "Change selections" sits in its own strip between step 3 (brim color)
   and step 4 (the CTA) — centered, shown only once a cap has actually been
   picked (toggled together with the CTA section in cap-wizard.js). */
.wizard-change-wrap {
    text-align: center;
    padding: 0 0 40px;
}

.wizard-change-wrap[hidden] {
    display: none;
}

.wizard-caps-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    text-align: left;
}

.wizard-cap-card {
    position: relative;
    width: 100%;
    background: #fff;
    border: 2px solid #e4e4ef;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.wizard-cap-card:hover {
    border-color: var(--roxo-acento);
    transform: translateY(-2px);
}

.wizard-cap-card.active {
    border-color: var(--roxo-vivo);
    box-shadow: 0 0 0 1px var(--roxo-vivo);
}

.wizard-cap-card__check {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--roxo-vivo);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.wizard-cap-card.active .wizard-cap-card__check {
    display: flex;
}

.wizard-cap-card img,
.wizard-cap-card__placeholder {
    width: 100%;
    height: 110px;
    object-fit: contain;
    margin-bottom: 14px;
}

.wizard-cap-card__body h3 {
    font-size: 14px;
    font-weight: bold;
    color: #2b2b40;
    margin-bottom: 4px;
}

.wizard-cap-card__sku {
    display: block;
    font-size: 12px;
    color: #8a8a99;
    margin-bottom: 10px;
}

/* Step 4 — Personalize CTA */
.wizard-section--cta {
    /* Extra room below the wizard's last section so the site footer starts
       further down the page instead of crowding right up against the CTA
       and competing for attention on load. */
    padding-bottom: 140px;
}

.wizard-section--cta .wizard-section__title {
    text-align: left;
    max-width: 1140px;
    margin: 0 auto 24px;
}

.wizard-cta {
    background: linear-gradient(90deg, #efedfe 0%, #f7f2fb 100%);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
}

.wizard-cta__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--roxo-vivo);
    font-size: 18px;
    flex-shrink: 0;
}

.wizard-cta__text {
    flex: 1;
    min-width: 200px;
}

.wizard-cta__text h3 {
    font-size: 18px;
    font-weight: bold;
    color: #2b2b40;
    margin-bottom: 4px;
}

.wizard-cta__text p {
    font-size: 14px;
    color: #666;
}

.wizard-cta__image {
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
}

.wizard-cta__action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.wizard-cta__button {
    background: var(--roxo-vivo);
}

.wizard-cta__button:hover {
    background: var(--roxo-medio);
}

.wizard-cta__note {
    font-size: 12px;
    color: #8a8a99;
}

/* Responsive */
@media (max-width: 992px) {
    /* .wizard-style-grid no longer needs an override here — auto-fit already
       adapts its column count to the viewport. */
    .wizard-caps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .wizard-hero {
        padding: 30px 0 24px;
    }
    .wizard-title {
        font-size: 28px;
    }
    .wizard-subtitle {
        font-size: 15px;
        margin-bottom: 24px;
    }
    .wizard-progress__status {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .wizard-body {
        min-height: 1600px;
    }
    .wizard-section {
        padding: 34px 0;
    }
    .wizard-style-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .wizard-color-row {
        gap: 14px;
    }
    .wizard-color-swatch {
        width: 40px;
        height: 40px;
    }
    .wizard-caps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .wizard-caps__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .wizard-change-btn {
        width: 100%;
        justify-content: center;
    }
    .wizard-section--cta {
        padding-bottom: 70px;
    }
    .wizard-section--cta .wizard-section__title {
        padding: 0 4px;
    }
    .wizard-cta {
        flex-wrap: wrap;
        padding: 22px 20px;
    }
    .wizard-cta__image {
        order: -1;
        margin: 0 auto;
    }
    .wizard-cta__action {
        width: 100%;
        align-items: stretch;
    }
    .wizard-cta__button {
        justify-content: center;
    }
}