/* ==========================================================================
   JOYZIO - Kids Stationery theme
   Baby-pink, candy-coloured, cartoon "sticker book" look.
   Every class used by the views is kept (btn-saji, product-card, eyebrow...)
   so all storefront pages pick the theme up automatically.
   ========================================================================== */

:root {
    /* Pink palette */
    --jz-bg: #FFE6F0;          /* baby pink page background   */
    --jz-bg-deep: #FFD6E7;     /* polka dots / bands          */
    --jz-cream: #FFF8FB;       /* card & panel surfaces       */
    --jz-blush: #FFC2D9;
    --jz-bubble: #FF9EC4;
    --jz-pink: #FF5C9A;        /* bright candy pink           */
    --jz-hot: #E0307A;         /* button pink (white text AA) */
    --jz-hot-dark: #C21E64;
    --jz-ink: #6B1D45;         /* plum - text & outlines      */
    --jz-muted: #9A4F77;
    --jz-line: #F6B3CE;
    --jz-butter: #FFE08A;      /* tiny star accents only      */
    --jz-shadow: #F59CC2;

    --jz-radius: 22px;
    --jz-radius-sm: 14px;
    --jz-font-display: 'Fredoka', 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
    --jz-font-body: 'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Legacy variable names still referenced inline by some views */
    --saji-ink: var(--jz-ink);
    --saji-muted: var(--jz-muted);
    --saji-rose: var(--jz-hot);
    --saji-rose-dark: var(--jz-hot-dark);
    --saji-gold: var(--jz-pink);
    --saji-gold-dark: var(--jz-hot);
    --saji-ivory: var(--jz-cream);
    --saji-soft: #FFEFF6;
    --saji-line: var(--jz-line);
    --saji-font-display: var(--jz-font-display);
    --saji-font-body: var(--jz-font-body);

    /* Bootstrap hooks */
    --bs-body-color: var(--jz-ink);
    --bs-body-bg: var(--jz-bg);
    --bs-border-color: var(--jz-line);
    --bs-secondary-color: var(--jz-muted);
    --bs-link-color: var(--jz-hot);
    --bs-link-color-rgb: 224, 48, 122;
    --bs-link-hover-color: var(--jz-hot-dark);
    --bs-link-hover-color-rgb: 194, 30, 100;
    --bs-primary: var(--jz-hot);
    --bs-primary-rgb: 224, 48, 122;
    --bs-border-radius: var(--jz-radius-sm);
    --bs-border-radius-lg: var(--jz-radius);
    --bs-focus-ring-color: rgba(255, 92, 154, .35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    color: var(--jz-ink);
    font-family: var(--jz-font-body);
    font-weight: 500;
    background-color: var(--jz-bg);
    background-image:
        radial-gradient(var(--jz-bg-deep) 2.2px, transparent 2.6px),
        radial-gradient(var(--jz-bg-deep) 2.2px, transparent 2.6px);
    background-size: 34px 34px;
    background-position: 0 0, 17px 17px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.brand-mark, .price, .stat-value,
.display-6, .display-5, .display-4 {
    font-family: var(--jz-font-display);
    color: var(--jz-ink);
    letter-spacing: 0;
}

h1, h2, .display-6, .display-5, .display-4 { font-weight: 700 !important; }

a { color: inherit; }
::selection { background: var(--jz-pink); color: #fff; }

.text-muted, .text-body-secondary, .form-text { color: var(--jz-muted) !important; }
.text-warning { color: #F7A700 !important; }

/* ---------- Eyebrow tag ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    border: 2px dashed var(--jz-bubble);
    color: var(--jz-hot);
    font-family: var(--jz-font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
}

.eyebrow::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--jz-pink);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: jz-spin 6s linear infinite;
}

.eyebrow.text-white-50 { color: var(--jz-hot) !important; }

/* Squiggle under section titles */
.section-title h2,
.jz-squiggle {
    position: relative;
    display: table;           /* shrink-wraps like inline-block but stays on its own line */
    padding-bottom: 14px;
}

.text-center .section-title h2,
.section-title.text-center h2,
.text-center > .jz-squiggle { margin-left: auto; margin-right: auto; }

.section-title h2::after,
.jz-squiggle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 6 Q 12 0 22 6 T 42 6 T 62 6 T 82 6 T 102 6 T 118 6' fill='none' stroke='%23FF5C9A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}

.text-center .section-title h2::after,
.text-center > .jz-squiggle::after,
.section-title.text-center h2::after { left: 50%; transform: translateX(-50%); }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-family: var(--jz-font-display); font-weight: 600; letter-spacing: .01em; }

.btn-saji {
    --bs-btn-bg: var(--jz-hot);
    --bs-btn-border-color: var(--jz-ink);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--jz-pink);
    --bs-btn-hover-border-color: var(--jz-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--jz-hot-dark);
    --bs-btn-active-border-color: var(--jz-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #F4B6CF;
    --bs-btn-disabled-border-color: #E9A3C1;
    --bs-btn-disabled-color: #fff;
    border-width: 2.5px;
    box-shadow: 0 4px 0 var(--jz-ink);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn-saji:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--jz-ink); }
.btn-saji:active, .btn-saji.active { transform: translateY(3px); box-shadow: 0 1px 0 var(--jz-ink); }

.btn-saji-outline,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-primary {
    --bs-btn-color: var(--jz-hot);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--jz-hot);
    --bs-btn-hover-bg: var(--jz-hot);
    --bs-btn-hover-border-color: var(--jz-hot);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--jz-hot-dark);
    --bs-btn-active-border-color: var(--jz-hot-dark);
    --bs-btn-active-color: #fff;
    border-width: 2.5px;
    border-style: solid;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.btn-saji-outline:hover { transform: translateY(-2px) rotate(-1deg); }

.btn-primary, .btn-dark {
    --bs-btn-bg: var(--jz-hot);
    --bs-btn-border-color: var(--jz-hot);
    --bs-btn-hover-bg: var(--jz-hot-dark);
    --bs-btn-hover-border-color: var(--jz-hot-dark);
    --bs-btn-active-bg: var(--jz-hot-dark);
    --bs-btn-color: #fff;
}

.btn-outline-light {
    --bs-btn-color: var(--jz-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--jz-ink);
    --bs-btn-hover-bg: var(--jz-blush);
    --bs-btn-hover-border-color: var(--jz-ink);
    --bs-btn-hover-color: var(--jz-ink);
    border-width: 2.5px;
    box-shadow: 0 4px 0 var(--jz-ink);
}

.btn-whatsapp {
    --bs-btn-bg: #25d366;
    --bs-btn-border-color: var(--jz-ink);
    --bs-btn-color: #0b2515;
    --bs-btn-hover-bg: #3ee07c;
    --bs-btn-hover-border-color: var(--jz-ink);
    --bs-btn-hover-color: #0b2515;
    --bs-btn-active-bg: #1ebd5a;
    --bs-btn-active-border-color: var(--jz-ink);
    border-width: 2.5px;
    box-shadow: 0 4px 0 var(--jz-ink);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--jz-ink); }

.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--jz-line); --bs-btn-color: var(--jz-ink); }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
    border: 2px solid var(--jz-line);
    border-radius: var(--jz-radius-sm);
    color: var(--jz-ink);
    background-color: #fff;
}

.input-group-text { background: var(--jz-cream); font-weight: 700; }

.form-control::placeholder { color: #C487A6; }

.form-control:focus, .form-select:focus {
    border-color: var(--jz-pink);
    box-shadow: 0 0 0 .25rem rgba(255, 92, 154, .22);
    color: var(--jz-ink);
}

.form-check-input { border: 2px solid var(--jz-bubble); }
.form-check-input:checked { background-color: var(--jz-hot); border-color: var(--jz-hot); }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(255, 92, 154, .22); border-color: var(--jz-pink); }
.form-range::-webkit-slider-thumb { background: var(--jz-hot); }
.form-label { font-weight: 700; color: var(--jz-ink); }

/* ---------- Generic bootstrap pieces ---------- */
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--jz-line) !important; }
.rounded-3 { border-radius: var(--jz-radius) !important; }
.bg-white, .bg-light, .bg-body { background-color: var(--jz-cream) !important; }

.card {
    border: 2.5px solid var(--jz-line);
    border-radius: var(--jz-radius);
    background: var(--jz-cream);
    box-shadow: 6px 6px 0 var(--jz-blush);
}

.card-header { background: #FFEFF6; border-bottom: 2px dashed var(--jz-line); }

aside .border.rounded-3,
.jz-panel {
    background: var(--jz-cream);
    border: 2.5px solid var(--jz-line) !important;
    border-radius: var(--jz-radius) !important;
    box-shadow: 6px 6px 0 var(--jz-blush);
}

.breadcrumb {
    display: inline-flex;
    padding: 7px 16px;
    background: rgba(255, 255, 255, .75);
    border: 2px solid var(--jz-line);
    border-radius: 999px;
    font-weight: 700;
    font-size: .86rem;
}

.breadcrumb-item a { color: var(--jz-hot); text-decoration: none; }
.breadcrumb-item.active { color: var(--jz-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "\2665"; color: var(--jz-bubble); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--jz-ink); --bs-table-border-color: var(--jz-line); }
.table thead th { font-family: var(--jz-font-display); font-weight: 600; color: var(--jz-hot); background: #FFEFF6; }
.table-responsive { border-radius: var(--jz-radius-sm); }

.badge.bg-success, .text-bg-success { background-color: #34C38F !important; }
.badge.bg-secondary, .text-bg-secondary { background-color: var(--jz-bubble) !important; color: var(--jz-ink) !important; }
.badge.bg-dark, .text-bg-dark, .badge.bg-primary, .text-bg-primary { background-color: var(--jz-hot) !important; color: #fff !important; }
.badge { border-radius: 999px; font-family: var(--jz-font-display); font-weight: 600; }

.alert { border-radius: var(--jz-radius-sm); border-width: 2px; font-weight: 600; }
.alert-success { background: #E8FFF4; border-color: #9DE6C2; color: #145C3D; }
.alert-danger { background: #FFE9EE; border-color: #FF9FB6; color: #A3123F; }
.alert-secondary, .alert-info, .alert-light, .alert-warning { background: #FFF1F7; border-color: var(--jz-line); color: var(--jz-ink); }

.pagination { --bs-pagination-color: var(--jz-hot); --bs-pagination-active-bg: var(--jz-hot); --bs-pagination-active-border-color: var(--jz-hot); --bs-pagination-border-color: var(--jz-line); --bs-pagination-hover-bg: #FFEFF6; --bs-pagination-hover-color: var(--jz-hot-dark); gap: 6px; }
.page-link { border-radius: 999px !important; border-width: 2px; font-weight: 700; min-width: 40px; text-align: center; }

.dropdown-menu { border: 2.5px solid var(--jz-line); border-radius: var(--jz-radius-sm); box-shadow: 6px 6px 0 var(--jz-blush) !important; padding: 8px; }
.dropdown-item { border-radius: 10px; font-weight: 600; color: var(--jz-ink); }
.dropdown-item:hover, .dropdown-item:focus { background: #FFEFF6; color: var(--jz-hot); }
.dropdown-item:active { background: var(--jz-hot); color: #fff; }
.dropdown-header { font-family: var(--jz-font-display); color: var(--jz-hot); }

.modal-content { border: 3px solid var(--jz-ink); border-radius: var(--jz-radius); background: var(--jz-cream); box-shadow: 8px 8px 0 var(--jz-pink); }
.modal-header { border-bottom: 2px dashed var(--jz-line); }
.modal-footer { border-top: 2px dashed var(--jz-line); }
.modal-title { font-family: var(--jz-font-display); color: var(--jz-hot); }

.offcanvas { background: var(--jz-cream); border-right: 3px solid var(--jz-ink) !important; }
.offcanvas-body a { color: var(--jz-ink); text-decoration: none; border-color: var(--jz-line) !important; font-family: var(--jz-font-display); font-weight: 500; }
.offcanvas-body a:hover { color: var(--jz-hot); }

.list-group-item { border-color: var(--jz-line); background: var(--jz-cream); color: var(--jz-ink); }
.list-group-item.active { background: var(--jz-hot); border-color: var(--jz-hot); }
.nav-tabs .nav-link, .nav-pills .nav-link { border-radius: 999px; color: var(--jz-hot); font-weight: 700; }
.nav-pills .nav-link.active { background: var(--jz-hot); }
hr { border-color: var(--jz-line); opacity: 1; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
    background: var(--jz-hot);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    position: relative;
}

.topbar a { text-decoration: none; color: #fff; }
.topbar a:hover { text-decoration: underline wavy; }
.topbar .jz-topbar-hello { display: inline-flex; align-items: center; gap: 8px; }
.topbar .jz-topbar-hello svg { width: 18px; height: 18px; animation: jz-spin 5s linear infinite; }

.navbar-main {
    background: var(--jz-cream);
    border-bottom: 0;
    position: sticky;
    z-index: 1020;
}

/* scalloped bottom edge, like a cake doily */
.navbar-main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 12px;
    background: radial-gradient(circle at 12px 0, var(--jz-cream) 11px, transparent 12px) repeat-x;
    background-size: 24px 12px;
    filter: drop-shadow(0 3px 0 var(--jz-line));
    pointer-events: none;
}

.brand-mark,
.jz-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
}

.jz-brand-icon { width: 38px; height: 58px; flex: 0 0 auto; transform-origin: 50% 90%; animation: jz-wiggle 3.2s ease-in-out infinite; }

.jz-brand-text {
    font-family: var(--jz-font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--jz-hot);
    letter-spacing: .01em;
    text-shadow: 2px 2px 0 var(--jz-blush);
    display: inline-flex;
}

.jz-brand-text span { display: inline-block; transition: transform .2s ease; }
.jz-brand:hover .jz-brand-text span { animation: jz-letter-hop .6s ease both; }
.jz-brand-text span:nth-child(2) { animation-delay: .05s !important; color: var(--jz-pink); }
.jz-brand-text span:nth-child(3) { animation-delay: .10s !important; }
.jz-brand-text span:nth-child(4) { animation-delay: .15s !important; color: var(--jz-pink); }
.jz-brand-text span:nth-child(5) { animation-delay: .20s !important; }
.jz-brand-text span:nth-child(6) { animation-delay: .25s !important; color: var(--jz-pink); }
.jz-brand-text span:nth-child(7) { animation-delay: .30s !important; }
.jz-brand-text span:nth-child(8) { animation-delay: .35s !important; color: var(--jz-pink); }

.jz-brand-words { display: inline-flex; flex-direction: column; align-items: flex-start; }

.jz-brand small {
    display: block;
    margin-top: 4px;
    font-family: var(--jz-font-body);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jz-muted);
}

.jz-brand-sm .jz-brand-icon { width: 28px; height: 42px; }
.jz-brand-sm .jz-brand-text { font-size: 1.55rem; }
.jz-brand-lg .jz-brand-icon { width: 52px; height: 78px; }
.jz-brand-lg .jz-brand-text { font-size: 2.6rem; color: #fff; text-shadow: 3px 3px 0 var(--jz-ink); }
.jz-brand-lg .jz-brand-text span:nth-child(even) { color: var(--jz-blush); }
.jz-brand-lg small { color: rgba(255, 255, 255, .85); }

.nav-search-form { position: relative; }

.nav-search-form .form-control {
    border-radius: 999px 0 0 999px;
    border: 2.5px solid var(--jz-ink);
    border-right: 0;
    padding-left: 20px;
    font-weight: 600;
    background: #fff;
}

.nav-search-form .btn {
    border-radius: 0 999px 999px 0;
    box-shadow: none !important;
    transform: none !important;
    padding-left: 20px !important;
    padding-right: 22px !important;
}

.nav-icon-btn {
    position: relative;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2.5px solid var(--jz-ink);
    color: var(--jz-ink);
    text-decoration: none;
    background: #fff;
    font-size: 1.15rem;
    box-shadow: 0 3px 0 var(--jz-ink);
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.nav-icon-btn:nth-child(3n+1) { background: #FFEFF6; }
.nav-icon-btn:nth-child(3n+2) { background: #FFE0EC; }

.nav-icon-btn:hover {
    background: var(--jz-pink);
    color: #fff;
    animation: jz-jelly .5s ease;
}

.nav-icon-btn.dropdown-toggle-no-caret::after { display: none; }

.cart-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--jz-ink);
    background: var(--jz-butter);
    color: var(--jz-ink);
    font-family: var(--jz-font-display);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-badge.jz-bump { animation: jz-bump .55s cubic-bezier(.3, 1.6, .5, 1); }

.jz-menu-btn { width: 46px; height: 46px; border-radius: 14px !important; border: 2.5px solid var(--jz-ink) !important; background: #fff; color: var(--jz-ink) !important; padding: 0; box-shadow: 0 3px 0 var(--jz-ink); }

/* ---------- Category strip ---------- */
.category-strip {
    background: transparent;
    border-bottom: 0;
    padding-top: 22px;
    padding-bottom: 6px;
    position: relative;
    z-index: 2;
}

.category-scroll { overflow-x: auto; scrollbar-width: none; display: flex; gap: 10px; padding: 4px 4px 8px; }
.category-scroll::-webkit-scrollbar { display: none; }

.category-strip .nav-link-pill {
    display: inline-block;
    padding: 7px 16px;
    font-family: var(--jz-font-display);
    font-size: .92rem;
    font-weight: 500;
    color: var(--jz-ink);
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    border: 2px solid var(--jz-line);
    border-radius: 999px;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.category-strip .nav-link-pill:hover {
    color: var(--jz-hot);
    border-color: var(--jz-pink);
    transform: translateY(-3px) rotate(-2deg);
}

.category-strip .nav-link-pill.active {
    color: #fff;
    background: var(--jz-hot);
    border-color: var(--jz-ink);
    box-shadow: 0 3px 0 var(--jz-ink);
}

.category-strip .nav-link-pill-deal {
    color: var(--jz-ink);
    background: var(--jz-butter);
    border-color: var(--jz-ink);
    font-weight: 600;
    box-shadow: 0 3px 0 var(--jz-ink);
}

.category-strip .nav-link-pill-deal:hover { color: var(--jz-ink); background: #FFEAAA; border-color: var(--jz-ink); }
.category-strip .nav-link-pill-deal i { display: inline-block; animation: jz-wiggle 1.6s ease-in-out infinite; }

/* ==========================================================================
   Floating background doodles (fixed layer)
   ========================================================================== */
.jz-sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.jz-sky .jz-cartoon { position: absolute; opacity: .55; }
.jz-sky .s1 { width: 34px; top: 22%; left: 2.5%; animation: jz-float 7s ease-in-out infinite; }
.jz-sky .s2 { width: 26px; top: 64%; left: 4%; animation: jz-float 9s ease-in-out infinite reverse; }
.jz-sky .s3 { width: 30px; top: 38%; right: 2.5%; animation: jz-float 8s ease-in-out infinite; }
.jz-sky .s4 { width: 22px; top: 82%; right: 5%; animation: jz-spin 12s linear infinite; }
.jz-sky .s5 { width: 20px; top: 12%; right: 12%; animation: jz-twinkle 3s ease-in-out infinite; }
body > *:not(.jz-sky):not(.whatsapp-float):not(.toast-lite):not(.modal):not(.offcanvas):not(.navbar-main):not(.offcanvas-backdrop):not(.modal-backdrop):not(script) { position: relative; z-index: 1; }

@media (max-width: 991.98px) { .jz-sky { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-carousel { margin: 18px auto 0; max-width: 1320px; padding: 0 12px; }

.hero-carousel .carousel-inner {
    border-radius: 34px;
    border: 3px solid var(--jz-ink);
    box-shadow: 10px 10px 0 var(--jz-pink);
    overflow: hidden;
}

.hero-carousel .carousel-item {
    min-height: 560px;
    background-size: cover;
    background-position: center;
    align-items: center;
    color: var(--jz-ink);
}

.hero-carousel .carousel-item.active,
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev { display: flex; }

.hero-carousel .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 230, 240, .97) 0%, rgba(255, 230, 240, .88) 36%, rgba(255, 230, 240, .25) 66%, rgba(255, 230, 240, 0) 100%);
}

.hero-carousel .hero-slide-content { position: relative; z-index: 2; padding: 0 40px; }
.hero-carousel .hero-slide-content h1 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); line-height: 1.04; color: var(--jz-ink); }
.hero-carousel .hero-slide-content p { color: var(--jz-muted); max-width: 560px; font-weight: 600; }

.hero-carousel .carousel-indicators { bottom: 18px; }

.hero-carousel .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--jz-ink);
    background: #fff;
    margin: 0 5px;
    opacity: 1;
    transition: width .25s ease, background-color .25s ease;
}

.hero-carousel .carousel-indicators .active { background: var(--jz-pink); width: 32px; border-radius: 8px; }

.hero-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--jz-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--jz-ink);
    box-shadow: 0 4px 0 var(--jz-ink);
}

.carousel-control-prev, .carousel-control-next { width: 7%; opacity: 1; z-index: 3; }
.carousel-control-prev:hover .hero-nav-btn,
.carousel-control-next:hover .hero-nav-btn { background: var(--jz-pink); color: #fff; animation: jz-jelly .5s ease; }

.jz-hero-decor { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.jz-hero-decor .jz-cartoon { position: absolute; }
.jz-hero-decor .d-star { width: 46px; top: 26px; right: 30%; animation: jz-twinkle 2.6s ease-in-out infinite; }
.jz-hero-decor .d-heart { width: 40px; bottom: 34px; left: 44%; animation: jz-float 4s ease-in-out infinite; }
.jz-hero-decor .d-sparkle { width: 30px; top: 40px; left: 46%; animation: jz-twinkle 3.2s ease-in-out infinite .6s; }

/* Illustrated hero (shown when no banners are uploaded) */
.jz-hero {
    position: relative;
    margin: 18px auto 0;
    max-width: 1320px;
    padding: 0 12px;
}

.jz-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: 34px;
    border: 3px solid var(--jz-ink);
    box-shadow: 10px 10px 0 var(--jz-pink);
    background:
        radial-gradient(circle at 78% 40%, #FFF8FB 0, #FFF8FB 18%, transparent 46%),
        linear-gradient(160deg, #FFD0E3 0%, #FFE6F0 55%, #FFC6DD 100%);
    display: flex;
    align-items: center;
}

.jz-hero-card::before { /* soft polka dots */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .8) 3px, transparent 3.5px);
    background-size: 42px 42px;
    opacity: .6;
}

.jz-hero h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.02; }
.jz-hero h1 .jz-pop { color: var(--jz-hot); display: inline-block; animation: jz-wiggle 2.8s ease-in-out infinite; transform-origin: 50% 80%; }
.jz-hero .lead { color: var(--jz-muted); font-weight: 600; max-width: 540px; }

.jz-scene { position: relative; height: 470px; }
.jz-scene .jz-cartoon { position: absolute; }
.jz-scene .sc-rainbow { width: 380px; left: 50%; top: 40px; transform: translateX(-50%); }
.jz-scene .sc-cloud1 { width: 160px; left: 2%; top: 26px; animation: jz-drift 9s ease-in-out infinite; }
.jz-scene .sc-cloud2 { width: 120px; right: 0; top: 150px; animation: jz-drift 11s ease-in-out infinite reverse; }
.jz-scene .sc-pencil { width: 150px; left: 40%; top: 160px; animation: jz-bob 3.4s ease-in-out infinite; }
.jz-scene .sc-notebook { width: 150px; left: 8%; top: 250px; animation: jz-bob 4s ease-in-out infinite .4s; transform-origin: bottom; }
.jz-scene .sc-crayon { width: 50px; right: 22%; top: 230px; animation: jz-tilt 3s ease-in-out infinite; }
.jz-scene .sc-eraser { width: 130px; right: 2%; top: 360px; animation: jz-bob 3.8s ease-in-out infinite .8s; }
.jz-scene .sc-star1 { width: 48px; left: 22%; top: 150px; animation: jz-twinkle 2.4s ease-in-out infinite; }
.jz-scene .sc-star2 { width: 34px; right: 8%; top: 70px; animation: jz-twinkle 3s ease-in-out infinite .8s; }
.jz-scene .sc-heart { width: 38px; right: 34%; top: 120px; animation: jz-float 3.6s ease-in-out infinite; }
.jz-scene .sc-sparkle { width: 28px; left: 34%; top: 410px; animation: jz-twinkle 2.8s ease-in-out infinite .3s; }
.jz-scene .sc-ground {
    position: absolute; left: 6%; right: 6%; bottom: 0; height: 30px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(224, 48, 122, .22) 0, transparent 70%);
}

.jz-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.jz-hero-badges span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #fff; border: 2px solid var(--jz-line);
    font-weight: 800; font-size: .82rem; color: var(--jz-ink);
}
.jz-hero-badges i { color: var(--jz-hot); }

.jz-hero .btn-lg { font-size: 1.1rem; padding: .62rem 1.35rem; }

@media (max-width: 991.98px) {
    .jz-scene { width: 560px; left: 50%; margin-left: -280px; transform: scale(.8); transform-origin: top center; margin-bottom: -94px; }
    .jz-hero-card { padding: 40px 6px 10px; }
}

@media (max-width: 767.98px) {
    .hero-carousel .carousel-item { min-height: 500px; }
    .hero-carousel .hero-overlay { background: linear-gradient(180deg, rgba(255, 230, 240, .94) 0%, rgba(255, 230, 240, .82) 60%, rgba(255, 230, 240, .5) 100%); }
    .hero-carousel .hero-slide-content { padding: 0 18px; }
    .hero-carousel .carousel-inner, .jz-hero-card { border-radius: 24px; box-shadow: 6px 6px 0 var(--jz-pink); }
    .hero-nav-btn { width: 40px; height: 40px; font-size: 1rem; }
    .jz-scene { transform: scale(.6); margin-bottom: -188px; }
    .jz-hero-decor { display: none; }
}

/* ==========================================================================
   Feature stickers
   ========================================================================== */
.jz-features { padding: 46px 0 20px; }

.jz-feature {
    height: 100%;
    background: var(--jz-cream);
    border: 2.5px solid var(--jz-line);
    border-radius: var(--jz-radius);
    padding: 20px 14px;
    text-align: center;
    transition: transform .2s ease;
}

.jz-feature:hover { transform: translateY(-5px) rotate(-1.5deg); }
.jz-feature:nth-child(even):hover { transform: translateY(-5px) rotate(1.5deg); }

.jz-feature-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fff;
    background: var(--jz-pink);
    border: 2.5px solid var(--jz-ink);
    border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
    box-shadow: 0 4px 0 var(--jz-ink);
    animation: jz-blob 6s ease-in-out infinite;
}

.jz-feature:nth-child(2) .jz-feature-icon { background: var(--jz-bubble); animation-delay: -1.5s; }
.jz-feature:nth-child(3) .jz-feature-icon { background: var(--jz-hot); animation-delay: -3s; }
.jz-feature:nth-child(4) .jz-feature-icon { background: #FF7FB0; animation-delay: -4.5s; }
.jz-feature-title { font-family: var(--jz-font-display); font-weight: 600; font-size: 1rem; }
.jz-feature-sub { font-size: .8rem; color: var(--jz-muted); font-weight: 600; }

/* ==========================================================================
   Sections, bands & wavy dividers
   ========================================================================== */
.section-pad { padding: 72px 0; }
.section-pad-sm { padding: 40px 0; }

.band, .soft-band, .jz-band {
    background: #FFD3E4;
    position: relative;
    margin: 30px 0;
}

.band::before, .band::after,
.soft-band::before, .soft-band::after,
.jz-band::before, .jz-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    background-repeat: repeat-x;
    background-size: 120px 28px;
    pointer-events: none;
}

.band::before, .soft-band::before, .jz-band::before {
    top: -27px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 V14 Q30 0 60 14 T120 14 V28 Z' fill='%23FFD3E4'/%3E%3C/svg%3E");
}

.band::after, .soft-band::after, .jz-band::after {
    bottom: -27px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V14 Q30 28 60 14 T120 14 V0 Z' fill='%23FFD3E4'/%3E%3C/svg%3E");
}

.jz-section-doodle { position: absolute; pointer-events: none; z-index: 0; }
.jz-section-doodle.left { left: 2%; top: 40px; width: 70px; animation: jz-float 6s ease-in-out infinite; }
.jz-section-doodle.right { right: 2%; top: 30px; width: 60px; animation: jz-tilt 4s ease-in-out infinite; }
.band > .container, section > .container { position: relative; z-index: 1; }
@media (max-width: 1199.98px) { .jz-section-doodle { display: none; } }

/* ==========================================================================
   Cards: product, category, review
   ========================================================================== */
.product-card,
.review-card,
.category-tile {
    border: 2.5px solid var(--jz-line);
    border-radius: var(--jz-radius);
    overflow: hidden;
    background: var(--jz-cream);
    box-shadow: 6px 6px 0 var(--jz-blush);
    transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), box-shadow .22s ease, border-color .22s ease;
}

.product-card:hover,
.category-tile:hover {
    transform: translateY(-7px) rotate(-1deg);
    border-color: var(--jz-pink);
    box-shadow: 9px 11px 0 var(--jz-shadow);
}

.col-6:nth-child(even) > .product-card:hover,
.col-6:nth-child(even) .category-tile:hover { transform: translateY(-7px) rotate(1deg); }

.product-card h3, .product-card .h6 { font-family: var(--jz-font-display); font-weight: 600; font-size: 1.02rem; }
.product-card .fw-semibold { font-family: var(--jz-font-display); color: var(--jz-hot); font-size: 1.08rem; font-weight: 700 !important; }

.product-media,
.category-image {
    background:
        radial-gradient(#FFD6E7 2px, transparent 2.5px) 0 0 / 18px 18px,
        #FFF1F7;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    border-bottom: 2.5px dashed var(--jz-line);
}

.product-media img,
.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.product-card:hover .product-media img { transform: scale(1.07) rotate(1deg); }

.category-tile h3 { font-family: var(--jz-font-display); font-weight: 600 !important; font-size: 1.1rem; }

.jz-cat-cartoon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: radial-gradient(circle at 50% 55%, #fff 0 30%, transparent 62%);
}

.jz-cat-cartoon .jz-cartoon { height: 62%; width: auto; transition: transform .3s ease; }
.category-tile:hover .jz-cat-cartoon .jz-cartoon { animation: jz-jelly .7s ease; }

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--jz-butter);
    color: var(--jz-ink);
    border: 2px solid var(--jz-ink);
    font-family: var(--jz-font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
    transform: rotate(-7deg);
    box-shadow: 0 3px 0 var(--jz-ink);
    animation: jz-badge 2.4s ease-in-out infinite;
}

.price, .price-strike { font-family: var(--jz-font-display); }
.price { color: var(--jz-hot); }
.price-strike { color: var(--jz-muted); text-decoration: line-through; text-decoration-color: var(--jz-pink); text-decoration-thickness: 2px; }

.review-card { position: relative; padding-top: 34px !important; }
.review-card .text-warning { font-size: 1.25rem; letter-spacing: 3px; color: var(--jz-pink) !important; }
.review-card::before {
    content: "\201C";
    position: absolute;
    top: -6px;
    right: 18px;
    font-family: var(--jz-font-display);
    font-size: 5.5rem;
    line-height: 1;
    color: var(--jz-blush);
}
.review-card .fw-semibold { font-family: var(--jz-font-display); color: var(--jz-hot); }
.jz-review-avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--jz-ink); background: var(--jz-blush); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.jz-review-avatar .jz-cartoon { width: 30px; height: 30px; }

.empty-strip {
    border: 3px dashed var(--jz-bubble);
    border-radius: var(--jz-radius);
    padding: 36px;
    color: var(--jz-muted);
    background: var(--jz-cream);
    font-weight: 700;
}

.empty-strip > i.bi { color: var(--jz-pink); display: inline-block; animation: jz-bob 2.6s ease-in-out infinite; }

/* ---------- Wishlist / compare round buttons ---------- */
.wishlist-heart-btn,
.compare-toggle-btn {
    position: absolute;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--jz-ink);
    background: #fff;
    color: var(--jz-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 3px 0 var(--jz-ink);
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}

.wishlist-heart-btn { top: 12px; }
.compare-toggle-btn { top: 58px; font-size: .96rem; }
.wishlist-heart-btn:hover, .compare-toggle-btn:hover { transform: scale(1.12) rotate(-6deg); }
.wishlist-heart-btn.is-active { color: #fff; background: var(--jz-pink); animation: jz-heartbeat 1.2s ease-in-out 1; }
.wishlist-heart-btn .bi-heart-fill { display: none; }
.wishlist-heart-btn.is-active .bi-heart { display: none; }
.wishlist-heart-btn.is-active .bi-heart-fill { display: inline-block; }

.wishlist-heart-btn.wishlist-heart-btn-static,
.compare-toggle-btn.compare-toggle-btn-static {
    position: static;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border: 2.5px solid var(--jz-ink);
    background: #fff;
    box-shadow: 0 4px 0 var(--jz-ink);
}

.wishlist-heart-btn.wishlist-heart-btn-static.is-active { background: var(--jz-pink); color: #fff; }
.compare-toggle-btn.is-active,
.compare-toggle-btn.compare-toggle-btn-static.is-active { background: var(--jz-hot); border-color: var(--jz-ink); color: #fff; }
.compare-toggle-btn.compare-toggle-btn-top { top: 12px; }

/* Product detail gallery (inline styles in the view use the legacy vars) */
#zoomArea { border: 3px solid var(--jz-ink) !important; border-radius: var(--jz-radius) !important; box-shadow: 8px 8px 0 var(--jz-pink); }
.thumb-button { border: 2.5px solid var(--jz-line) !important; border-radius: var(--jz-radius-sm) !important; transition: transform .15s ease, border-color .15s ease; }
.thumb-button:hover { transform: translateY(-3px) rotate(-2deg); }
.thumb-button.active { border-color: var(--jz-hot) !important; box-shadow: 0 3px 0 var(--jz-hot); }

/* ==========================================================================
   WhatsApp CTA band
   ========================================================================== */
.jz-cta {
    position: relative;
    overflow: hidden;
    margin: 70px auto 0;
    max-width: 1100px;
    padding: 64px 28px;
    border-radius: 36px;
    border: 3px solid var(--jz-ink);
    background: linear-gradient(135deg, var(--jz-pink) 0%, var(--jz-hot) 100%);
    box-shadow: 10px 10px 0 var(--jz-ink);
    color: #fff;
    text-align: center;
}

.jz-cta h2 { color: #fff !important; text-shadow: 3px 3px 0 var(--jz-hot-dark); }
.jz-cta p { color: rgba(255, 255, 255, .95); font-weight: 700; max-width: 560px; margin-inline: auto; }
.jz-cta .eyebrow { border-color: #fff; }
.jz-cta .jz-cartoon { position: absolute; pointer-events: none; }
.jz-cta .c-cloud1 { width: 150px; left: -20px; top: 18px; opacity: .9; animation: jz-drift 10s ease-in-out infinite; }
.jz-cta .c-cloud2 { width: 120px; right: -10px; bottom: 16px; opacity: .9; animation: jz-drift 12s ease-in-out infinite reverse; }
.jz-cta .c-star { width: 42px; right: 16%; top: 22px; animation: jz-twinkle 2.6s ease-in-out infinite; }
.jz-cta .c-heart { width: 36px; left: 14%; bottom: 26px; animation: jz-float 3.6s ease-in-out infinite; }
.jz-cta .c-pencil { width: 62px; right: 5%; bottom: -14px; transform: rotate(16deg); }
@media (max-width: 767.98px) { .jz-cta { margin: 50px 12px 0; border-radius: 26px; box-shadow: 6px 6px 0 var(--jz-ink); } .jz-cta .c-pencil { display: none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer {
    position: relative;
    background: linear-gradient(180deg, #E8458A 0%, #C9216A 100%);
    color: rgba(255, 255, 255, .92);
    margin-top: 110px !important;
    padding-top: 70px !important;
    font-weight: 600;
}

.jz-footer-wave { position: absolute; left: 0; right: 0; top: -58px; height: 60px; width: 100%; display: block; }

.jz-footer-mascot {
    position: absolute;
    top: -128px;
    right: 7%;
    width: 92px;
    animation: jz-bob 3.4s ease-in-out infinite;
    z-index: 2;
}

.jz-footer-mascot-2 { right: auto; left: 6%; top: -86px; width: 110px; animation-delay: .8s; }

footer.site-footer h3 {
    color: #fff !important;
    font-family: var(--jz-font-display);
    font-weight: 600;
    font-size: 1.15rem !important;
}

footer.site-footer a { color: rgba(255, 255, 255, .92); text-decoration: none; transition: transform .15s ease, color .15s ease; display: inline-block; }
footer.site-footer a.d-block { display: block !important; }
footer.site-footer a.jz-brand { display: inline-flex; }
footer.site-footer a.jz-brand:hover { transform: none; }
footer.site-footer a:hover { color: #fff; transform: translateX(4px); }
footer.site-footer a.d-block:hover::before { content: "\2665  "; color: var(--jz-blush); }
footer.site-footer hr { border-color: rgba(255, 255, 255, .4) !important; border-style: dashed; }
footer.site-footer .bi-1-circle, footer.site-footer .bi-2-circle, footer.site-footer .bi-3-circle { color: var(--jz-butter); }

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1040;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    border: 3px solid var(--jz-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 5px 0 var(--jz-ink);
    text-decoration: none;
    animation: jz-bob 2.8s ease-in-out infinite;
}

.whatsapp-float::after {
    content: "Hi!";
    position: absolute;
    top: -30px;
    right: 40px;
    padding: 3px 10px;
    border-radius: 14px 14px 2px 14px;
    background: #fff;
    border: 2px solid var(--jz-ink);
    color: var(--jz-ink);
    font-family: var(--jz-font-display);
    font-size: .8rem;
    font-weight: 600;
    animation: jz-twinkle 3s ease-in-out infinite;
}

.whatsapp-float:hover { color: #fff; filter: brightness(1.06); }

.toast-lite {
    position: fixed;
    right: 18px;
    bottom: 100px;
    z-index: 1050;
    max-width: min(360px, calc(100vw - 36px));
    border: 2.5px solid var(--jz-ink) !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 0 var(--jz-ink) !important;
    font-family: var(--jz-font-display);
    font-weight: 500;
    padding-left: 48px;
    animation: jz-pop-in .45s cubic-bezier(.3, 1.6, .5, 1);
}

.toast-lite::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L62 36 L92 38 L69 58 L77 88 L50 72 L23 88 L31 58 L8 38 L38 36 Z' fill='%23FFE08A' stroke='%236B1D45' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.toast-lite.alert-success { background: #fff; color: var(--jz-ink); }
.toast-lite.alert-danger { background: #FFE9EE; color: #A3123F; }

/* ==========================================================================
   Effects (JS-driven) - burst particles & scroll reveal
   ========================================================================== */
.jz-burst {
    position: fixed;
    pointer-events: none;
    z-index: 2000;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    animation: jz-burst .9s cubic-bezier(.2, .7, .3, 1) forwards;
}

.jz-burst svg { width: 100%; height: 100%; }

.jz-js .jz-reveal { opacity: 0; transform: translateY(26px) scale(.96); }
.jz-js .jz-reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.3, 1.4, .5, 1); }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes jz-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes jz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes jz-tilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes jz-wiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-7deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(-4deg); } 60% { transform: rotate(2deg); } 75% { transform: rotate(0); } }
@keyframes jz-spin { to { transform: rotate(360deg); } }
@keyframes jz-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.72) rotate(18deg); opacity: .75; } }
@keyframes jz-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@keyframes jz-jelly { 0% { transform: scale(1, 1); } 30% { transform: scale(1.22, .82); } 50% { transform: scale(.88, 1.12); } 70% { transform: scale(1.06, .95); } 100% { transform: scale(1, 1); } }
@keyframes jz-bump { 0% { transform: scale(1); } 40% { transform: scale(1.55) rotate(-12deg); } 100% { transform: scale(1); } }
@keyframes jz-heartbeat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.3); } 40% { transform: scale(.95); } 60% { transform: scale(1.18); } }
@keyframes jz-badge { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.07); } }
@keyframes jz-blob { 0%, 100% { border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; } 50% { border-radius: 58% 42% 45% 55% / 45% 55% 45% 55%; } }
@keyframes jz-letter-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px) rotate(-6deg); } }
@keyframes jz-pop-in { 0% { transform: scale(.4) translateY(20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes jz-burst { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; } }
@keyframes jz-blink-kf { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes jz-wave-kf { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-10deg); } }

/* Character part animations (inline SVG) */
.jz-cartoon .jz-blink { animation: jz-blink-kf 4.5s ease-in-out infinite; transform-box: view-box; }
.jz-cartoon .jz-wave { animation: jz-wave-kf 2.2s ease-in-out infinite; transform-box: view-box; }
.jz-cartoon-notebook .jz-blink { animation-delay: 1.2s; }
.jz-cartoon-eraser .jz-blink { animation-delay: 2.1s; }
.jz-cartoon-backpack .jz-blink { animation-delay: .6s; }
.jz-cartoon-sharpener .jz-blink { animation-delay: 3s; }

/* Hover helpers */
.jz-float { animation: jz-float 5s ease-in-out infinite; }
.jz-bob { animation: jz-bob 3.2s ease-in-out infinite; }

@media (max-width: 575.98px) {
    .navbar-main > .container:first-child { gap: 8px !important; }
    .navbar-main .ms-auto { gap: 6px !important; }
    .nav-icon-btn { width: 38px; height: 38px; font-size: 1rem; box-shadow: 0 2px 0 var(--jz-ink); border-width: 2px; }
    .navbar-main .nav-icon-btn[title="Chat on WhatsApp"] { display: none; }
    .jz-menu-btn { width: 38px; height: 38px; }
    .navbar-main .jz-brand small { display: none; }
    .cart-badge { min-width: 19px; height: 19px; font-size: .66rem; top: -6px; right: -6px; }
}

@media (max-width: 767.98px) {
    .section-pad { padding: 50px 0; }
    .jz-brand-text { font-size: 1.6rem; }
    .jz-brand-icon { width: 30px; height: 46px; }
    .jz-footer-mascot { width: 70px; top: -100px; }
    .jz-footer-mascot-2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .jz-js .jz-reveal { opacity: 1; transform: none; }
}

/* Product detail action row: the rounded display font is wider than the old
   serif, so let the two main buttons share a line and the round buttons wrap. */
@media (min-width: 768px) {
    .d-md-flex:has(> .js-add-to-cart-qty) { flex-wrap: wrap; }
}
.d-md-flex > .js-add-to-cart-qty,
.d-md-flex > .js-add-to-cart-qty + .btn-whatsapp { flex: 1 1 40%; white-space: nowrap; padding-left: 1rem !important; padding-right: 1rem !important; }

/* ==========================================================================
   Custom store logo (uploaded from Admin -> Settings)
   ========================================================================== */
.jz-custom-logo { display: block; width: auto; object-fit: contain; }
.jz-custom-logo-header { height: 56px; max-width: 240px; transition: transform .2s ease; }
.jz-custom-logo-header.jz-logo-sm { height: 42px; }
.jz-custom-logo-header.jz-logo-lg { height: 72px; }
.jz-brand:hover .jz-custom-logo-header { transform: rotate(-3deg) scale(1.04); }
.jz-custom-logo-menu { height: 40px; max-width: 170px; }

.jz-logo-sticker {
    display: inline-flex;
    background: #fff;
    border: 3px solid var(--jz-ink);
    border-radius: 20px;
    padding: 10px 16px;
    box-shadow: 5px 5px 0 var(--jz-ink);
}

.jz-logo-sticker img { max-height: 80px; max-width: 240px; width: auto; }

@media (max-width: 575.98px) {
    .jz-custom-logo-header,
    .jz-custom-logo-header.jz-logo-lg { height: 44px; max-width: 150px; }
    .jz-custom-logo-header.jz-logo-sm { height: 36px; }
}

/* ==========================================================================
   Footer contact details (from Admin -> Settings)
   ========================================================================== */
.jz-contact-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.jz-contact-list small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.jz-contact-list a, .jz-contact-list address { color: #fff; font-weight: 700; font-style: normal; word-break: break-word; }
.jz-contact-list address { margin: 2px 0 4px; line-height: 1.45; font-weight: 600; }
.jz-contact-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--jz-hot);
    border: 2px solid var(--jz-ink);
    box-shadow: 0 3px 0 var(--jz-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.jz-contact-list li:hover .jz-contact-icon { animation: jz-jelly .5s ease; }
footer.site-footer .jz-contact-list a.jz-directions { display: inline-flex; align-items: center; font-size: .82rem; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1.5px dashed rgba(255, 255, 255, .7); }
footer.site-footer .jz-contact-list a.jz-directions:hover { background: rgba(255, 255, 255, .3); }

.jz-order-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .14);
    border: 2px dashed rgba(255, 255, 255, .45);
    font-size: .9rem;
}
.jz-order-steps span { display: inline-flex; align-items: center; gap: 6px; }
.jz-order-steps i { color: var(--jz-butter); font-size: 1.1rem; }
.jz-order-steps-title { font-family: var(--jz-font-display); font-weight: 600; font-size: 1rem; color: #fff; margin-right: 6px; }