/* ==========================================================================
   Little Wardrobe — the sticker layer.
   Loaded last. Everything here is the outline-and-shadow treatment that
   turns the shared components into stickers.
   ========================================================================== */

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

.btn {
    border: var(--outline);
    font-weight: 800;
    box-shadow: var(--shadow-sticker);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-sticker-lg); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn-primary { background: var(--pop); color: var(--on-dark); }
.btn-primary:hover { background: #ff4a81; }

.btn-accent { background: var(--lemon); color: var(--ink); }
.btn-accent:hover { background: #ffdc85; }

.btn-outline { background: var(--page); color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--sky); }

.btn-quiet { border-color: transparent; box-shadow: none; }
.btn-quiet:hover { transform: none; box-shadow: none; background: var(--ink-06); }

.btn-danger { background: var(--alert); color: var(--on-dark); }

.btn:disabled, .btn.is-disabled { box-shadow: none; transform: none; }

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

.card, .stat-card, .testimonial, .order-row, .admin-card {
    border: var(--outline);
    box-shadow: var(--shadow-sticker);
}

.product-card-media,
.cat-tile-media,
.cat-chip-media,
.gallery-main,
.journal-media,
.reel-card,
.order-thumb,
.queue-thumb {
    border: var(--outline);
    box-shadow: var(--shadow-sticker);
}

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

/* Product cards sit on rotating pastels so a grid reads as a sticker sheet. */
.product-card-media { background: var(--sky); }
.grid > *:nth-child(5n+2) .product-card-media,
.product-rail > *:nth-child(5n+2) .product-card-media { background: var(--bubblegum); }
.grid > *:nth-child(5n+3) .product-card-media,
.product-rail > *:nth-child(5n+3) .product-card-media { background: var(--lemon); }
.grid > *:nth-child(5n+4) .product-card-media,
.product-rail > *:nth-child(5n+4) .product-card-media { background: var(--mint); }
.grid > *:nth-child(5n+5) .product-card-media,
.product-rail > *:nth-child(5n+5) .product-card-media { background: var(--grape); }

/* Category tiles get the same treatment, so an empty catalogue still looks alive. */
.cat-chip:nth-child(4n+1) .cat-chip-media { background: var(--sky); }
.cat-chip:nth-child(4n+2) .cat-chip-media { background: var(--bubblegum); }
.cat-chip:nth-child(4n+3) .cat-chip-media { background: var(--lemon); }
.cat-chip:nth-child(4n+4) .cat-chip-media { background: var(--mint); }

/* ----------------------------------------------------------- badges ----- */

.badge {
    border: var(--outline-thin);
    font-weight: 800;
    padding: 3px 11px;
}

.badge-sale { background: var(--pop); color: var(--on-dark); }
.badge-new { background: var(--lemon); color: var(--ink); }
.badge-low { background: var(--sky); color: var(--ink); }
.badge-success { background: var(--mint); color: var(--ink); }
.badge-out { background: var(--alert-10); color: var(--alert); }

/* ---------------------------------- the age pill (signature element) ---- */

/* Parents shop by age before anything else, so it is the loudest thing on
   a card after the picture. Built on the material chip, so every screen that
   already showed a chip shows the age instead. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 6px;
    border: var(--outline);
    border-radius: var(--radius-pill);
    background: var(--lemon);
    color: var(--ink);
    font-weight: 800;
    font-size: var(--step--1);
    box-shadow: 2px 2px 0 var(--ink);
}

.chip-swatch {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: var(--outline-thin);
    border-radius: 50%;
    box-shadow: none;
}

.chip-label { color: var(--ink); opacity: 0.6; font-weight: 700; }
.chip-lg { font-size: var(--step-0); padding: 6px 16px 6px 8px; }
.chip-lg .chip-swatch { width: 22px; height: 22px; flex-basis: 22px; }

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

.input, .select, .textarea {
    border: var(--outline);
    font-family: var(--font-body);
    font-weight: 600;
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--pop);
    border-color: var(--ink);
}

.qty { border: var(--outline); }

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

.site-header { border-bottom: var(--outline); }
.announcement { background: var(--pop); color: var(--on-dark); font-weight: 800; }

.dept-rail { border: var(--outline); box-shadow: var(--shadow-sticker); background: var(--page); }
.dept-rail .dept-item > a { font-weight: 800; }
.dept-rail .dept-item > a.is-active { background: var(--pop); color: var(--on-dark); }
.dept-menu { border: var(--outline); box-shadow: var(--shadow-sticker); }

.dept-scroller a { border: var(--outline-thin); background: var(--page); font-weight: 800; }
.dept-scroller a.is-active { background: var(--pop); color: var(--on-dark); border-color: var(--ink); }

.utility-nav a { font-weight: 800; }
.wordmark { font-weight: 800; }

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

.site-footer { border-top: var(--outline); }
.footer-bottom-bar { background: var(--ink); }

/* ------------------------------------------------------- tab bar -------- */

.tab-bar { border-top: var(--outline); }
.tab-bar a.is-active { color: var(--pop); }
.tab-badge { border: var(--outline-thin); background: var(--pop); color: var(--on-dark); }

/* -------------------------------------------------------- empty state --- */

.empty { border: 2px dashed var(--ink-35); background: var(--mist); }

/* --------------------------------------------------------- pagination --- */

.pagination a, .pagination span { border: var(--outline-thin); font-weight: 800; }
.pagination .is-current { background: var(--pop); color: var(--on-dark); border-color: var(--ink); }

/* --------------------------------------------------------- the mascot --- */

.mascot { display: block; margin-inline: auto; width: 140px; height: auto; }
.mascot-sm { width: 84px; }

/* ------------------------------------------------------------ motion ---- */

@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover, .btn:active { transform: none; transition: none; }
}


/* ======================================================= cartoon extras == */

/* Headings sit slightly tighter and heavier than the body. */
h1, h2, h3 { letter-spacing: -0.015em; }

/* Stickers are never perfectly straight. A degree is enough — more than that
   and it stops looking deliberate. */
.cat-chip:nth-child(odd) .cat-chip-media { transform: rotate(-1.4deg); }
.cat-chip:nth-child(even) .cat-chip-media { transform: rotate(1.4deg); }
.cat-chip:hover .cat-chip-media { transform: rotate(0) scale(1.02); }
.cat-chip-media { transition: transform 0.18s ease, box-shadow 0.18s ease; }

.testimonial:nth-child(odd) { transform: rotate(-0.8deg); }
.testimonial:nth-child(even) { transform: rotate(0.8deg); }

/* Scalloped top edge on the coloured bands — a cut-paper look, done with a
   repeating gradient so it costs nothing. */
.band-sand, .band-paper, .band-tint { position: relative; }

.band-sand::before,
.band-paper::before,
.band-tint::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    height: 14px;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    pointer-events: none;
}

.band-sand::before { background-image: radial-gradient(circle at 15px 15px, var(--sand) 14px, transparent 15px); }
.band-paper::before { background-image: radial-gradient(circle at 15px 15px, var(--mist) 14px, transparent 15px); }
.band-tint::before { background-image: radial-gradient(circle at 15px 15px, var(--paper) 14px, transparent 15px); }

/* The section heading gets a highlighter swipe behind it. */
.section-head h2 {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.section-head h2::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 2px;
    height: 10px;
    background: var(--lemon);
    border-radius: 6px;
    z-index: -1;
}

/* ========================================== delivery pincode popup ====== */

.pin-pop {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.pin-pop[hidden] { display: none; }

.pin-pop-scrim { position: absolute; inset: 0; background: rgba(42, 33, 64, 0.55); }

.pin-pop-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--page);
    border: var(--outline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sticker-lg);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    text-align: center;
    animation: pin-pop-in 0.28s ease;
}

@keyframes pin-pop-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.pin-pop-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 34px;
    height: 34px;
    border: var(--outline-thin);
    border-radius: var(--radius-pill);
    background: var(--page);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-pop-close svg { width: 15px; height: 15px; }
.pin-pop-close:hover { background: var(--bubblegum); }

.pin-pop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 0 auto var(--sp-4);
    border: var(--outline);
    border-radius: var(--radius-pill);
    background: var(--sky);
    box-shadow: var(--shadow-sticker);
}

.pin-pop-icon svg { width: 32px; height: 32px; }

.pin-pop-card h2 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.pin-pop-card > p { color: var(--ink-70); margin-bottom: var(--sp-5); font-size: var(--step--1); }

.pin-pop-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pin-pop-row .input { flex: 1; text-align: center; font-weight: 700; letter-spacing: 0.08em; }
.pin-pop-row .btn { white-space: nowrap; }

.pin-pop-status { min-height: 22px; font-size: var(--step--1); font-weight: 700; margin-bottom: var(--sp-3); }
.pin-pop-status.is-ok { color: var(--success); }
.pin-pop-status.is-bad { color: var(--alert); }
.pin-pop-status.is-neutral { color: var(--ink-55); }

/* The little reminder afterwards. */
.pin-strip {
    position: fixed;
    left: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 8px 14px;
    background: var(--page);
    border: var(--outline-thin);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sticker);
    font-size: var(--step--1);
    font-weight: 700;
}

.pin-strip[hidden] { display: none; }

.pin-strip button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--pop);
    font-weight: 800;
    font-size: var(--step--1);
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 900px) {
    /* Clear of the fixed bottom tab bar. */
    .pin-strip { bottom: 72px; left: var(--sp-3); right: var(--sp-3); justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .pin-pop-card { animation: none; }
    .cat-chip:nth-child(odd) .cat-chip-media,
    .cat-chip:nth-child(even) .cat-chip-media,
    .testimonial:nth-child(odd),
    .testimonial:nth-child(even) { transform: none; }
}

/* ==========================================================================
   Phone first. Most of these customers are shopping one-handed on mobile
   data, so this block is the one that matters most.
   ========================================================================== */

@media (max-width: 640px) {

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

    /* Two columns, so the footer is half as tall. The brand block and the
       legal list each run the full width. */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5) var(--sp-4);
    }

    .footer-grid > div:nth-child(1) { grid-column: 1 / -1; }   /* brand */
    .footer-grid > div:nth-child(4) { grid-column: 1 / -1; }   /* legal */

    /* The legal list is the longest, so it runs in two columns of its own. */
    .footer-grid > div:nth-child(4) .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2) var(--sp-4);
    }

    .footer-brand p { margin-top: var(--sp-3); font-size: 0.82rem; }
    .site-footer { padding-block: var(--sp-6) var(--sp-4); margin-top: var(--sp-7); }
    .footer-grid h4 { margin-bottom: var(--sp-2); font-size: 0.72rem; }
    .footer-links { font-size: 0.85rem; gap: var(--sp-2); }

    .footer-bottom { flex-direction: column; gap: var(--sp-1); text-align: center; }

    /* ------------------------------------------- reach and comfort ----- */

    /* Nothing important sits in the top third, where a thumb cannot reach. */
    .section { padding-block: var(--sp-6); }
    .section-tight { padding-block: var(--sp-5); }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }

    /* Lighter shadows on small screens — 4px offsets look clumsy at this size. */
    :root {
        --shadow-sticker: 3px 3px 0 var(--ink);
        --shadow-sticker-lg: 4px 4px 0 var(--ink);
        --outline: 2.5px solid var(--ink);
    }

    /* The tilt reads as a mistake on a narrow screen. */
    .cat-chip:nth-child(odd) .cat-chip-media,
    .cat-chip:nth-child(even) .cat-chip-media,
    .testimonial:nth-child(odd),
    .testimonial:nth-child(even) { transform: none; }

    /* One testimonial at a time, swiped, rather than three stacked. */
    .band-sand .grid-3 {
        display: flex;
        gap: var(--sp-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--sp-4) * -1);
        padding-inline: var(--sp-4);
    }

    .band-sand .grid-3::-webkit-scrollbar { display: none; }
    .band-sand .grid-3 > * { flex: 0 0 84vw; scroll-snap-align: center; }

    /* Scallops scale down with everything else. */
    .band-sand::before, .band-paper::before, .band-tint::before {
        top: -9px;
        height: 10px;
        background-size: 22px 22px;
    }

    .band-sand::before { background-image: radial-gradient(circle at 11px 11px, var(--sand) 10px, transparent 11px); }
    .band-paper::before { background-image: radial-gradient(circle at 11px 11px, var(--mist) 10px, transparent 11px); }
    .band-tint::before { background-image: radial-gradient(circle at 11px 11px, var(--paper) 10px, transparent 11px); }
}

@media (max-width: 900px) {

    /* ------------------------------------ add to cart, always reachable */

    /* Sticks above the tab bar while the buying section is on screen, so a
       long product page never means scrolling back up to buy. */
    .buy-row {
        position: sticky;
        bottom: 70px;
        z-index: 45;
        margin-inline: calc(var(--sp-4) * -1);
        padding: var(--sp-3) var(--sp-4);
        background: var(--page);
        border-top: var(--outline-thin);
        box-shadow: 0 -4px 18px rgba(42, 33, 64, 0.10);
    }

    .buy-row .btn-lg { flex: 1 1 auto; }

    /* Same idea for the cart: the checkout button stays put. */
    .cart-summary .btn-lg {
        position: sticky;
        bottom: 74px;
        z-index: 45;
    }

    /* Rails get proper momentum scrolling and a hint of the next card. */
    .product-rail, .cat-rail, .reel-rail { scroll-padding-inline: var(--sp-4); }

    /* Forms: one field per row beats two cramped ones. */
    .grid-2, .grid-3 { grid-template-columns: 1fr; }

    /* The drawer covers more of the screen, which makes it easier to hit. */
    .drawer { width: min(360px, 92vw); }
}

/* Momentum scrolling on iOS for every horizontal strip. */
.product-rail, .cat-rail, .reel-rail, .cat-picker, .dept-scroller, .marquee {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Stop a double-tap zooming the page when someone taps a button quickly. */
.btn, .icon-btn, .tab-bar a, .cat-picker a, .dept-scroller a { touch-action: manipulation; }

/* ===================================================== header icons ===== */

/* Stated on the element as well as here, so an icon can never come out blank
   if another rule wins the cascade. Thicker than the Domy original, to match
   the outlines everywhere else. */
.icon-btn svg {
    width: 22px;
    height: 22px;
    stroke: var(--ink);
    fill: none;
    stroke-width: 2.4;
}

.menu-toggle {
    border: var(--outline-thin);
    border-radius: var(--radius);
    background: var(--page);
    box-shadow: 2px 2px 0 var(--ink);
}

.menu-toggle:hover { background: var(--lemon); }
.menu-toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

/* The cart count sits on the ink outline like everything else. */
.icon-badge { border: 2px solid var(--ink); background: var(--pop); color: var(--on-dark); font-weight: 800; }