/* ==========================================================================
   ChicoCharm — the boutique layer.
   Loaded LAST, after sticker.css. It calms the cartoon sticker treatment
   into a tailored look: hairlines, no offset shadows, no tilts, lighter
   weights, and a serif display face. Colours come from the tokens in site.css.
   ========================================================================== */

/* ---------------------------------------------------------- type -------- */

h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; }
h1, h2, h3 { letter-spacing: 0.005em; }

.wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.utility-nav a,
.dept-rail .dept-item > a,
.dept-scroller a,
.pagination a, .pagination span,
.chip, .badge, .icon-badge,
.pin-strip, .pin-strip button { font-weight: 500; }

.chip-label, .pin-pop-status, .pin-pop-row .input { font-weight: 500; }
.input, .select, .textarea { font-weight: 400; }

.announcement {
    background: var(--rosewood);
    color: var(--on-dark);
    font-weight: 500;
    letter-spacing: 0.18em;
}

/* ------------------------------------------------------- buttons -------- */

.btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-weight: 500;
    letter-spacing: 0.06em;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover, .btn:active { transform: none; box-shadow: none; }

.btn-primary { background: var(--rosewood); color: var(--on-dark); }
.btn-primary:hover { background: var(--rose-deep); }

.btn-accent { background: var(--ink); color: var(--on-dark); }
.btn-accent:hover { background: var(--rosewood); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--on-dark); }

.btn-quiet:hover { background: var(--ink-06); }

/* --------------------------------------------------------- cards -------- */

.card, .stat-card, .testimonial, .order-row, .admin-card,
.product-card-media, .cat-tile-media, .cat-chip-media, .gallery-main,
.journal-media, .reel-card, .order-thumb, .queue-thumb,
.dept-rail, .dept-menu, .pin-pop-card, .pin-pop-icon, .pin-strip {
    border: 1px solid var(--hairline);
    box-shadow: none;
}

.product-card:hover .product-card-media,
.cat-tile:hover .cat-tile-media,
.cat-chip:hover .cat-chip-media { box-shadow: var(--shadow-lift); }

/* One quiet background for every product and category tile. */
.product-card-media,
.grid > * .product-card-media,
.product-rail > * .product-card-media,
.cat-chip .cat-chip-media { background: var(--cream) !important; }

/* No tilts anywhere. */
.cat-chip .cat-chip-media,
.cat-chip:hover .cat-chip-media,
.testimonial { transform: none !important; }

/* ------------------------------------------------- badges and chips ----- */

.badge { border: 0; border-radius: var(--radius-sm); letter-spacing: 0.06em; }
.badge-sale { background: var(--rosewood); color: var(--on-dark); }
.badge-new { background: var(--ink); color: var(--on-dark); }
.badge-low { background: var(--blush-soft); color: var(--rosewood); }
.badge-success { background: var(--success-10); color: var(--success); }

.chip {
    border: 1px solid var(--hairline);
    background: var(--paper);
    box-shadow: none;
}
.chip-swatch { border: 1px solid var(--hairline); }

/* ----------------------------------------------------------- forms ------ */

.input, .select, .textarea, .qty { border: 1px solid var(--ink-35); border-radius: var(--radius-sm); }
.input:focus, .select:focus, .textarea:focus {
    box-shadow: 0 0 0 3px var(--brass-12);
    border-color: var(--rosewood);
}

/* ---------------------------------------------------------- header ------ */

.site-header { border-bottom: 1px solid var(--hairline); }
.site-footer { border-top: 1px solid var(--hairline); }
.tab-bar { border-top: 1px solid var(--hairline); }

.dept-rail { background: var(--paper); border-radius: var(--radius-pill); }
.dept-rail .dept-item > a.is-active,
.dept-scroller a.is-active,
.pagination .is-current { background: var(--rosewood); color: var(--on-dark); border-color: var(--rosewood); }
.dept-scroller a { border: 1px solid var(--hairline); }

.icon-btn svg { stroke-width: 1.6; }
.icon-badge { border: 0; background: var(--rosewood); }
.tab-badge { border: 0; background: var(--rosewood); }

.menu-toggle { border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: none; }
.menu-toggle:hover { background: var(--blush-soft); }
.menu-toggle:active { transform: none; box-shadow: none; }

.pin-pop-close { border: 1px solid var(--hairline); }
.pin-pop-close:hover { background: var(--blush-soft); }
.pin-pop-icon { background: var(--blush-soft); }
.pin-pop-scrim { background: rgba(43, 30, 34, 0.5); }

/* ------------------------------------------------- remove kids' extras -- */

/* No scalloped band edges, no highlighter swipe, no mascot. */
.band-sand::before, .band-paper::before, .band-tint::before { content: none !important; }

.section-head h2::after { content: none; }
.section-head h2::before {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    margin: 0 0 var(--sp-3);
    background: var(--gold);
}

.mascot { display: none !important; }

.empty { border: 1px dashed var(--ink-35); }

/* ------------------------------------------------------- footer -------- */

.footer-bottom-bar { background: var(--ink); }
.footer-legal { line-height: 1.7; }

/* ------------------------------------------------------- phones -------- */

@media (max-width: 640px) {
    :root {
        --shadow-sticker: none;
        --shadow-sticker-lg: none;
        --outline: 1px solid var(--hairline);
    }
}

@media (max-width: 900px) {
    .buy-row { border-top: 1px solid var(--hairline); box-shadow: 0 -4px 18px rgba(43, 30, 34, 0.06); }
}

/* ======================================================= hero carousel ==
   Slides are stacked in one grid cell and cross-fade, so there is no jump
   or flash between them. The incoming image eases in from a slight zoom.
   ====================================================================== */

.hero { background: var(--page); }
.hero-slides { display: grid; }

.hero-slide {
    display: block !important;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .9s;
}

.hero-slide.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.hero-slide picture { display: block; overflow: hidden; }
.hero-slide img {
    width: 100%;
    height: auto;
    transform: scale(1.045);
    transition: transform 3.6s ease-out;
}
.hero-slide.is-visible img { transform: scale(1); }

/* text banners */
.hero-copy-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-inline: max(var(--sp-5), calc((100% - var(--container)) / 2 + var(--sp-4)));
    pointer-events: none;
}

.hero-text {
    max-width: 520px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease .25s, transform .6s ease .25s;
}
.hero-slide.is-visible .hero-text { opacity: 1; transform: none; }

.hero-eyebrow {
    margin: 0 0 var(--sp-3);
    font-size: var(--step--1);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--rosewood);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.3rem, 4.6vw, 4.4rem);
    line-height: 1.05;
    margin: 0 0 var(--sp-5);
    color: var(--ink);
}

.hero-cta .btn { box-shadow: none; }

/* arrows and dots */
.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease, background .2s ease;
}
.hero:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: #fff; }
.hero-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hero-prev { left: var(--sp-4); }
.hero-next { right: var(--sp-4); }

.hero-dots { z-index: 3; bottom: var(--sp-4); gap: 10px; }
.hero-dots button {
    position: relative;
    width: 34px;
    height: 3px;
    border: 0;
    border-radius: 2px;
    background: var(--ink-12);
    overflow: hidden;
}
.hero-dots button span {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--rosewood);
}
.hero-dots button.is-active { background: var(--ink-12); }
.hero-dots button.is-active span { animation: hero-progress 3s linear forwards; }

@keyframes hero-progress { from { width: 0; } to { width: 100%; } }

@media (max-width: 700px) {
    .hero-copy-wrap { align-items: flex-end; justify-content: center; text-align: center; padding: 0 var(--sp-4) var(--sp-7); }
    .hero-title { font-size: 2.1rem; margin-bottom: var(--sp-4); }
    .hero-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-slide img, .hero-text { transition: none; }
    .hero-slide img { transform: none; }
    .hero-dots button.is-active span { animation: none; width: 100%; }
}

/* ------------------------------------------------------ sign-in pages --- */
.auth-tabs { gap: var(--sp-4); }
.auth-tabs .tab-btn { text-decoration: none; }
.auth-tabs .tab-btn.is-active { color: var(--rosewood); border-bottom-color: var(--rosewood); }
.otp-input {
    font-size: 1.6rem;
    letter-spacing: 0.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}