/* Custom overrides layered on top of Tailwind for mobile ergonomics */

html, body { overflow-x: hidden; }

/* Collection page banner: when a promo banner has an image, its text sits
   over the photo + dark shade instead of the plain light gradient, so it
   needs to switch to white. The #id + .has-image combination outranks the
   Tailwind text-color utility classes already on these elements, so no JS
   class-juggling is needed beyond toggling `.has-image` itself. */
#collection-banner.has-image #collection-eyebrow,
#collection-banner.has-image #collection-title,
#collection-banner.has-image #collection-subtitle {
    color: #fff;
}

/* Banner artwork is designed wide (~2048x768, a "billboard" strip). With an
   image, the header switches from padding-based sizing to that exact
   aspect ratio (capped so it can't take over the whole screen on very wide
   viewports) and centers its text over it with flex instead of padding —
   the image/shade layers are absolutely positioned so they ignore the flex
   context, while the text content block is a normal flex item. */
#collection-banner.has-image {
    aspect-ratio: 2048 / 768;
    max-height: 420px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flex/grid children default to a content-based (not 0) automatic minimum
   width in browsers, which can silently force a whole row/column wider
   than the viewport on narrow screens instead of wrapping its text — the
   overflow-x:hidden above then clips it rather than fixing it. Resetting
   the floor to 0 on direct flex/grid children lets text wrap normally at
   every nesting level (body's own flex-col layout, the hero grid, the
   stats grid, the stacked CTA buttons, etc.) without affecting sizing
   anywhere there's already enough room. */
.flex > *, .grid > * { min-width: 0; }

.flame {
    background: radial-gradient(circle, #ffeaa7 0%, #ffb703 50%, #d4a373 100%);
    box-shadow: 0 0 20px #ffb703, 0 0 40px #ffb703;
    border-radius: 50% 50% 20% 20%;
}
.glass-panel {
    background: rgba(255, 251, 245, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(238, 220, 201, 0.6);
}
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f7eee3; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d1a480; border-radius: 10px; }

/* Mobile nav dropdown: plain CSS (not Tailwind utility classes) for the
   open/closed state, so the transition starts the instant the class is
   toggled — Tailwind's CDN build JIT-compiles CSS at runtime and only knows
   about classes already present somewhere in the static HTML, so utility
   classes added purely via JS have to be detected and compiled on the fly
   first, showing up as a beat of lag before the animation visibly starts.

   The reveal itself uses the CSS grid-template-rows 0fr->1fr trick instead
   of animating max-height to an arbitrary guessed value: it tracks the
   panel's real content height exactly, so it can't finish growing (or look
   "done") before the height actually matches the content, and it needs
   only one property — no separate opacity/transform fade competing with
   the height change and making the reveal look laggy or out of sync with
   the backdrop dimming next to it. Both the panel and the backdrop share
   the same duration so they finish together. */
#mobile-menu {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows 0.3s ease-out;
}
#mobile-menu.mobile-menu-open {
    grid-template-rows: minmax(0, 1fr);
}
#mobile-menu-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}
#mobile-menu-backdrop.mobile-menu-backdrop-open {
    opacity: 1;
    pointer-events: auto;
}
#mobile-menu-icon {
    transition: transform 0.25s ease-out;
}
#mobile-menu-icon.mobile-menu-icon-open {
    transform: rotate(90deg);
}

/* Prevent iOS input zoom-on-focus by keeping inputs >=16px on small screens */
@media (max-width: 640px) {
    input, select, textarea { font-size: 16px !important; }

    #cart-drawer { width: 100%; }

    .customize-opt-btn { padding: 1rem 0.75rem; }
}

/* Larger tap targets on touch devices */
button, a { touch-action: manipulation; }

/* Candle Customize wizard */
.customize-step-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: #eedcc9;
    color: #a56847;
    transition: all 0.2s ease;
}
.customize-step-dot.active { background: #58352b; color: #fff; }
.customize-step-dot.done { background: #bd835c; color: #fff; }
.customize-step-line { width: 2.5rem; height: 2px; background: #eedcc9; }

.customize-opt-btn.selected {
    border-color: #58352b !important;
    background: #fdf6ec;
}

.customize-opt-card {
    border: 2px solid #eedcc9;
    border-radius: 1rem;
    padding: 0.65rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
}
.customize-opt-card:hover { border-color: #bd835c; }
.customize-opt-card.selected { border-color: #58352b; background: #fdf6ec; box-shadow: 0 0 0 2px rgba(88,53,43,0.15); }
.customize-opt-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.6rem;
    margin-bottom: 0.5rem;
    background: #f7eee3;
}
.customize-opt-card .name { font-size: 0.8rem; font-weight: 600; color: #58352b; }
.customize-opt-card .price { font-size: 0.7rem; color: #a56847; margin-top: 0.15rem; }

/* Toast notifications */
#toast-container {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: calc(100% - 2rem);
    max-width: 380px;
    pointer-events: none;
}
.toast {
    background: #58352b;
    color: #fffbf5;
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    font-size: 0.8rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: toast-in 0.25s ease-out;
}
.toast.error { background: #b91c1c; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading state for product grid */
.skeleton-card {
    background: #f7eee3;
    border-radius: 1.5rem;
    overflow: hidden;
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.btn-disabled { opacity: 0.6; pointer-events: none; }