/* ===================================================
   ふわころ FUWAKORO - Baby & Kids Wear Boutique
   Design Concept: クレヨン絵本 × 貼り絵 × もこもこ
   Aesthetic: Hand-drawn sticker pop, chunky outlines, candy pastels
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Fredoka:wght@400;500;600;700&family=Yusei+Magic&family=Zen+Maru+Gothic:wght@400;500;700;900&family=Rampart+One&display=swap');

:root {
    /* ---- Candy palette ---- */
    --cream:        #fff8ec;
    --cream-deep:   #fdecd2;
    --strawberry:   #ff5a7a;
    --strawberry-d: #e93f5e;
    --pink-soft:    #ffd1d4;
    --pink-bubble:  #ffc1d8;
    --sky:          #6cc4f5;
    --sky-soft:     #c8e7ff;
    --mint:         #6cc472;
    --mint-soft:    #d6f5c8;
    --lemon:        #ffc843;
    --lemon-soft:   #ffe7a8;
    --grape:        #a78bfa;
    --grape-soft:   #e2d4ff;
    --peach:        #ffb088;
    --peach-soft:   #ffd2bb;

    --ink:          #241a2c;        /* near-black, warmer than pure black */
    --ink-soft:     #4a3b54;
    --gray-2:       #6b5d6e;
    --gray-3:       #a89aa8;
    --line:         #ecdfe9;

    /* ---- Sticker shadow (hard, no blur) ---- */
    --hard-1:       3px 3px 0 var(--ink);
    --hard-2:       5px 5px 0 var(--ink);
    --hard-3:       7px 7px 0 var(--ink);
    --hard-color:   5px 5px 0 var(--strawberry);

    --shadow-soft:  0 8px 24px rgba(36,26,44,0.08);
    --shadow-puff:  0 14px 40px rgba(255,90,122,0.18);

    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-xl: 42px;
    --r-pill: 999px;

    --tx: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    --tx-slow: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);

    --font-display: 'Bagel Fat One', 'Rampart One', 'Zen Maru Gothic', system-ui, sans-serif;
    --font-handwrite: 'Yusei Magic', 'Zen Maru Gothic', sans-serif;
    --font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
    --font-en: 'Fredoka', 'Bagel Fat One', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background-color: var(--cream);
    background-image:
        radial-gradient(circle at 12% 8%,  var(--pink-soft) 0,  transparent 12%),
        radial-gradient(circle at 88% 22%, var(--sky-soft) 0,  transparent 14%),
        radial-gradient(circle at 18% 92%, var(--lemon-soft) 0, transparent 14%),
        radial-gradient(circle at 92% 78%, var(--mint-soft) 0,  transparent 14%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* faint paper grain */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.14, 0 0 0 0 0.10, 0 0 0 0 0.17, 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; transition: all var(--tx); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

.container {
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ============================================
   TICKER STRIP
============================================ */
.top-ticker {
    background: var(--ink);
    color: var(--cream);
    overflow: hidden;
    border-bottom: 3px solid var(--ink);
    font-family: var(--font-en);
    letter-spacing: 1px;
    font-size: 13px;
    position: relative;
    z-index: 100;
}
.ticker-track {
    display: flex;
    gap: 36px;
    padding: 8px 0;
    animation: ticker 28s linear infinite;
    white-space: nowrap;
    width: max-content;
}
.ticker-track span {
    color: var(--lemon-soft);
}
.ticker-track span:nth-child(2n) { color: var(--pink-soft); }
.ticker-track span:nth-child(3n) { color: var(--mint-soft); }
.ticker-track span:nth-child(4n) { color: var(--sky-soft); }
@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================
   HEADER
============================================ */
.site-header {
    background: var(--cream);
    border-bottom: 3px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 4px 0 var(--ink);
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 4%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 18px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform var(--tx);
}
.logo:hover { transform: rotate(-3deg) scale(1.04); }

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--tx);
}
.logo:hover .logo-mark { transform: rotate(8deg); }

.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-en {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--strawberry);
    -webkit-text-stroke: 1px var(--ink);
    letter-spacing: 1px;
}
.logo-ja {
    font-family: var(--font-handwrite);
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
    letter-spacing: 2px;
}

.main-nav { margin-left: auto; }
.main-nav > ul {
    display: flex;
    gap: 24px;
    align-items: center;
}
.main-nav a {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    position: relative;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    transition: all var(--tx);
}
.main-nav a:hover {
    background: var(--lemon-soft);
    transform: translateY(-2px) rotate(-2deg);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.action-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cream);
    border: 2.5px solid var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    box-shadow: var(--hard-1);
    position: relative;
    transition: all var(--tx);
}
.action-btn:hover {
    background: var(--lemon);
    transform: translate(-2px,-2px) rotate(-6deg);
    box-shadow: 5px 5px 0 var(--ink);
}
.cart-link .cart-count {
    position: absolute;
    top: -7px; right: -7px;
    width: 22px; height: 22px;
    background: var(--strawberry);
    color: #fff;
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-family: var(--font-en);
}

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--cream);
    border: 2.5px solid var(--ink);
    box-shadow: var(--hard-1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.nav-toggle span {
    width: 20px; height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
}
.nav-close {
    display: none;
    position: absolute;
    top: 18px; right: 22px;
    width: 40px; height: 40px;
    background: var(--strawberry);
    border: 2.5px solid var(--ink);
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: #fff;
}
.nav-overlay {
    position: fixed; inset: 0;
    background: rgba(36,26,44,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--tx);
    z-index: 200;
}
.nav-overlay.show { opacity: 1; pointer-events: auto; }

/* ===== Category Strip ===== */
.category-strip {
    background:
        repeating-linear-gradient(
            45deg,
            var(--cream) 0,
            var(--cream) 14px,
            var(--cream-deep) 14px,
            var(--cream-deep) 28px
        );
    border-top: 2.5px dashed var(--ink);
    overflow: hidden;
}
.cat-strip-inner {
    display: flex;
    gap: 8px;
    padding: 12px 2%;
    flex-wrap: nowrap;            /* 大屏：一行排列 */
    justify-content: center;
    max-width: 1600px;
    margin: 0 auto;
    scrollbar-width: none;
}
.cat-strip-inner::-webkit-scrollbar { display: none; }
.cat-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px 7px 10px;
    background: var(--chip-bg, var(--pink-soft));
    border: 2.5px solid var(--ink);
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    box-shadow: var(--hard-1);
    transition: all var(--tx);
    white-space: nowrap;
}
.cat-chip:hover {
    transform: translate(-2px,-3px) rotate(-3deg);
    box-shadow: 5px 5px 0 var(--ink);
}
.cat-emoji {
    font-size: 14px;
    line-height: 1;
    filter: saturate(1.1);
}

/* 中型屏（笔记本/小桌面）：自动换行，不被裁切 */
@media (max-width: 1280px) and (min-width: 721px) {
    .cat-strip-inner { flex-wrap: wrap; gap: 8px; }
}

/* 小屏：横向滚动（手机滑动体验） */
@media (max-width: 720px) {
    .cat-strip-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 12px 4%;
        gap: 8px;
    }
    .cat-chip { font-size: 11.5px; padding: 7px 12px 7px 10px; }
}

/* ============================================
   HERO BANNER (kept structure, restyled)
============================================ */
.hero-section {
    position: relative;
    margin: 26px 4% 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    z-index: 5;
}
.hero-slider {
    height: clamp(420px, 64vh, 620px);
    position: relative;
}
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
}
.hero-slide.active { opacity: 1; }

.slide-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 8s ease-out;
}
.hero-slide.active .slide-bg { transform: scale(1); }

.slide-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(255,193,216,0.42), transparent 55%),
        linear-gradient(180deg, rgba(36,26,44,0.05) 0%, rgba(36,26,44,0.45) 75%, rgba(36,26,44,0.55) 100%);
}

.hero-content {
    position: absolute;
    bottom: 12%;
    left: 7%;
    max-width: 620px;
    color: #fff;
    z-index: 4;
}
.hero-content .tag {
    display: inline-block;
    background: var(--lemon);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    padding: 6px 18px;
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 13px;
    letter-spacing: 1.5px;
    margin-bottom: 22px;
    box-shadow: var(--hard-1);
    transform: rotate(-3deg);
}
.hero-content h1 {
    font-family: var(--font-handwrite);
    font-size: clamp(34px, 5.4vw, 64px);
    line-height: 1.18;
    margin-bottom: 18px;
    text-shadow: 4px 4px 0 var(--ink), 0 4px 22px rgba(36,26,44,0.4);
    letter-spacing: 1px;
}
.hero-content p {
    font-size: clamp(14px, 1.3vw, 17px);
    margin-bottom: 28px;
    max-width: 480px;
    line-height: 1.85;
    text-shadow: 0 2px 10px rgba(36,26,44,0.55);
    color: #fff;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--strawberry);
    color: #fff;
    padding: 14px 30px;
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 3px solid var(--ink);
    box-shadow: var(--hard-2);
    transition: all var(--tx);
}
.btn-hero:hover {
    transform: translate(-3px,-3px) rotate(-3deg);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--lemon);
    color: var(--ink);
}
.btn-hero .arrow { font-size: 18px; transition: transform var(--tx); }
.btn-hero:hover .arrow { transform: translateX(4px); }

.slider-controls {
    position: absolute;
    bottom: 22px;
    right: 32px;
    display: flex;
    gap: 16px;
    align-items: center;
    z-index: 6;
}
.slider-dots {
    display: flex;
    gap: 8px;
}
.slider-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: 2px solid var(--ink);
    transition: all var(--tx);
}
.slider-dot.active {
    background: var(--lemon);
    width: 32px;
    border-radius: var(--r-pill);
}
.slider-arrows { display: flex; gap: 8px; }
.slider-arrow {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--cream);
    border: 2.5px solid var(--ink);
    box-shadow: var(--hard-1);
    color: var(--ink);
    font-size: 14px;
    transition: all var(--tx);
}
.slider-arrow:hover {
    background: var(--lemon);
    transform: translate(-2px,-2px);
    box-shadow: 5px 5px 0 var(--ink);
}

/* ============================================
   AGE PICKER (Unique feature)
============================================ */
.age-picker {
    padding: 80px 0 50px;
    text-align: center;
}
.age-picker .section-header { margin-bottom: 36px; }
.age-bubbles {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.age-bubble {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--bubble-bg, var(--pink-soft));
    border: 3px solid var(--ink);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-family: var(--font-handwrite);
    box-shadow: var(--hard-2);
    transition: all var(--tx);
    position: relative;
}
.age-bubble::after {
    content: '';
    position: absolute;
    top: 14px; left: 22px;
    width: 26px; height: 12px;
    background: rgba(255,255,255,0.55);
    border-radius: 50%;
    transform: rotate(-30deg);
}
.age-bubble:hover {
    transform: translate(-4px,-4px) rotate(-6deg) scale(1.05);
    box-shadow: 9px 9px 0 var(--ink);
}
.age-bubble .age-num {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--ink);
    line-height: 1;
}
.age-bubble .age-label {
    font-size: 13px;
    margin-top: 6px;
    letter-spacing: 1px;
}
.age-bubble:nth-child(1) { background: var(--pink-soft); }
.age-bubble:nth-child(2) { background: var(--sky-soft); }
.age-bubble:nth-child(3) { background: var(--mint-soft); }
.age-bubble:nth-child(4) { background: var(--lemon-soft); }
.age-bubble:nth-child(5) { background: var(--grape-soft); }
.age-bubble:nth-child(6) { background: var(--peach-soft); }

/* ============================================
   SECTION HEADER
============================================ */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}
.en-title {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    background: var(--ink);
    color: var(--lemon);
    padding: 4px 18px;
    border-radius: var(--r-pill);
    letter-spacing: 3px;
    margin-bottom: 14px;
    transform: rotate(-2deg);
}
.section-header h2 {
    font-family: var(--font-handwrite);
    font-size: clamp(28px, 4vw, 44px);
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.section-header h2 strong {
    color: var(--strawberry);
    font-style: normal;
    text-decoration: underline wavy var(--lemon) 4px;
    text-underline-offset: 6px;
}
.section-header p {
    color: var(--ink-soft);
    font-size: 15px;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   CATEGORY SHOWCASE (Bubble grid)
============================================ */
.category-showcase {
    padding: 30px 0 70px;
}
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.category-card {
    position: relative;
    aspect-ratio: 1 / 1.05;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 3px solid var(--ink);
    box-shadow: var(--hard-2);
    background: var(--cream);
    transition: all var(--tx);
    isolation: isolate;
}
.category-card:nth-child(odd) { transform: rotate(-1.5deg); }
.category-card:nth-child(even) { transform: rotate(1.5deg); }
.category-card:hover {
    transform: rotate(0) translate(-3px,-5px) scale(1.02);
    box-shadow: 9px 10px 0 var(--ink);
}
.category-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--tx-slow);
}
.category-card:hover img { transform: scale(1.08); }
.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: linear-gradient(180deg, transparent 30%, rgba(36,26,44,0.7) 100%);
    color: #fff;
}
.card-overlay h3 {
    font-family: var(--font-handwrite);
    font-size: 22px;
    margin-bottom: 4px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--ink);
}
.card-overlay span {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--lemon-soft);
}
.category-card .age-tag {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--lemon);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    box-shadow: var(--hard-1);
    transform: rotate(8deg);
    z-index: 2;
}

/* ============================================
   FEATURED PRODUCTS (Sticker cards)
============================================ */
.featured-section, .new-arrivals {
    padding: 70px 0;
    position: relative;
}
.featured-section { background: linear-gradient(180deg, transparent 0, var(--cream-deep) 100%); }
.new-arrivals { background: var(--sky-soft); border-top: 3px dashed var(--ink); border-bottom: 3px dashed var(--ink); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.product-card {
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all var(--tx);
    box-shadow: var(--hard-2);
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-card:nth-child(4n+1) { transform: rotate(-0.8deg); }
.product-card:nth-child(4n+2) { transform: rotate(0.6deg); }
.product-card:nth-child(4n+3) { transform: rotate(-0.4deg); }
.product-card:nth-child(4n+4) { transform: rotate(1.2deg); }

.product-card:hover {
    transform: rotate(0) translate(-3px,-6px) scale(1.02);
    box-shadow: 9px 10px 0 var(--ink);
}
.product-card .image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--pink-soft);
    border-bottom: 2.5px dashed var(--ink);
}
.product-card .image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--tx-slow);
}
.product-card:hover .image-wrap img { transform: scale(1.07) rotate(2deg); }

.product-card .badge {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--strawberry);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 1.5px;
    border: 2.5px solid var(--ink);
    box-shadow: var(--hard-1);
    transform: rotate(-6deg);
}
.product-card .badge.sale { background: var(--lemon); color: var(--ink); }

.product-card .quick-view {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translate(-50%, 18px);
    background: var(--ink);
    color: var(--cream);
    padding: 8px 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 1px;
    border: 2.5px solid var(--ink);
    opacity: 0;
    transition: all var(--tx);
}
.product-card:hover .quick-view {
    transform: translate(-50%, 0);
    opacity: 1;
}

.product-card .card-body {
    padding: 18px 18px 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background:
        repeating-linear-gradient(
            transparent 0,
            transparent 27px,
            rgba(255,193,216,0.18) 27px,
            rgba(255,193,216,0.18) 28px
        );
}
.card-category {
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--strawberry);
    margin-bottom: 4px;
    font-weight: 600;
}
.product-card h4 {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 10px;
    font-weight: 700;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.price-area {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}
.price-area .price {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--strawberry);
    -webkit-text-stroke: 0.5px var(--ink);
}
.price-area .original-price {
    font-size: 13px;
    color: var(--gray-3);
    text-decoration: line-through;
}
.price-area .tax-label {
    font-size: 10px;
    color: var(--gray-2);
}

/* ============================================
   BRAND STORY (Cloud-shaped block)
============================================ */
.brand-story {
    padding: 110px 0 100px;
    position: relative;
}
.brand-story::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 80px;
    background: var(--sky-soft);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0 80 Q100 30 200 50 T400 50 T600 30 T800 60 T1000 40 T1200 55 V0 H0 Z' fill='black'/></svg>");
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0 80 Q100 30 200 50 T400 50 T600 30 T800 60 T1000 40 T1200 55 V0 H0 Z' fill='black'/></svg>");
    -webkit-mask-size: cover;
    mask-size: cover;
}

.brand-story-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.brand-story-text {
    position: relative;
}
.brand-story-text .en-title {
    background: var(--strawberry);
    color: #fff;
}
.brand-story-text h2 {
    font-family: var(--font-handwrite);
    font-size: clamp(30px, 4vw, 48px);
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 22px;
    letter-spacing: 1px;
}
.brand-story-text p {
    color: var(--ink-soft);
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 2;
}
.brand-story-image {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--ink);
    box-shadow: 12px 12px 0 var(--ink);
    transform: rotate(-3deg);
    background: var(--mint-soft);
}
.brand-story-image::after {
    content: '';
    position: absolute;
    top: 8%; left: 16%;
    width: 28%; height: 12%;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transform: rotate(-30deg);
    z-index: 2;
}
.brand-story-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.brand-decorations {
    position: absolute;
    width: 110%; height: 110%;
    top: -5%; left: -5%;
    pointer-events: none;
}

/* ============================================
   PROMISE (4-feature grid)
============================================ */
.promise-section {
    padding: 80px 0;
    background: var(--mint-soft);
    border-top: 3px dashed var(--ink);
    border-bottom: 3px dashed var(--ink);
    position: relative;
    overflow: hidden;
}
.promise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.promise-card {
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--hard-2);
    transition: all var(--tx);
    position: relative;
}
.promise-card:nth-child(1) { transform: rotate(-1deg); }
.promise-card:nth-child(2) { transform: rotate(0.8deg); }
.promise-card:nth-child(3) { transform: rotate(-0.5deg); }
.promise-card:nth-child(4) { transform: rotate(1.2deg); }
.promise-card:hover {
    transform: rotate(0) translate(-3px,-5px);
    box-shadow: 9px 10px 0 var(--ink);
}
.promise-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ink);
    box-shadow: var(--hard-1);
    background: var(--lemon);
    font-size: 32px;
}
.promise-card:nth-child(1) .promise-icon { background: var(--pink-soft); }
.promise-card:nth-child(2) .promise-icon { background: var(--sky-soft); }
.promise-card:nth-child(3) .promise-icon { background: var(--lemon); }
.promise-card:nth-child(4) .promise-icon { background: var(--grape-soft); }

.promise-card h4 {
    font-family: var(--font-handwrite);
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.promise-card p {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.8;
}

/* ============================================
   TESTIMONIALS
============================================ */
.testimonials {
    padding: 80px 0;
}
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 40px;
}
.testi-card {
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    padding: 28px 26px;
    box-shadow: var(--hard-2);
    position: relative;
    transition: all var(--tx);
}
.testi-card:nth-child(1) { transform: rotate(-1.5deg); background: var(--pink-soft); }
.testi-card:nth-child(2) { transform: rotate(0.8deg); background: var(--sky-soft); }
.testi-card:nth-child(3) { transform: rotate(-0.5deg); background: var(--lemon-soft); }
.testi-card:hover {
    transform: rotate(0) translate(-3px,-4px);
    box-shadow: 9px 10px 0 var(--ink);
}
.testi-card::before {
    content: '"';
    position: absolute;
    top: -22px; left: 16px;
    font-family: var(--font-display);
    font-size: 90px;
    color: var(--strawberry);
    -webkit-text-stroke: 2px var(--ink);
    line-height: 1;
}
.testi-stars {
    color: var(--strawberry);
    font-size: 16px;
    letter-spacing: 4px;
    margin-bottom: 12px;
}
.testi-card p {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 16px;
}
.testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 2px dashed var(--ink);
}
.testi-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2.5px solid var(--ink);
    background: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.testi-meta {
    line-height: 1.3;
}
.testi-meta strong {
    font-family: var(--font-handwrite);
    font-size: 15px;
    color: var(--ink);
}
.testi-meta span {
    font-size: 11px;
    color: var(--ink-soft);
    display: block;
}

/* ============================================
   NEWSLETTER
============================================ */
.newsletter {
    padding: 100px 0;
    text-align: center;
    background:
        radial-gradient(circle at 20% 30%, var(--pink-bubble) 0, transparent 25%),
        radial-gradient(circle at 80% 70%, var(--mint-soft) 0, transparent 25%),
        var(--cream-deep);
    position: relative;
}
.newsletter-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-xl);
    padding: 60px 40px;
    box-shadow: 9px 9px 0 var(--ink);
    position: relative;
}
.newsletter-card h3 {
    font-family: var(--font-handwrite);
    font-size: clamp(26px, 3.4vw, 38px);
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: 1px;
}
.newsletter-card p {
    color: var(--ink-soft);
    margin-bottom: 30px;
    font-size: 14px;
}
.newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.newsletter-form input {
    flex: 1 1 220px;
    padding: 14px 22px;
    border: 3px solid var(--ink);
    border-radius: var(--r-pill);
    background: var(--cream);
    font-size: 14px;
    box-shadow: var(--hard-1);
    outline: none;
    transition: all var(--tx);
}
.newsletter-form input:focus {
    transform: translate(-2px,-2px);
    box-shadow: 5px 5px 0 var(--ink);
    background: #fff;
}
.newsletter-form button {
    padding: 14px 30px;
    background: var(--strawberry);
    color: #fff;
    border: 3px solid var(--ink);
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: var(--hard-1);
    transition: all var(--tx);
}
.newsletter-form button:hover {
    transform: translate(-2px,-2px) rotate(-3deg);
    box-shadow: 5px 5px 0 var(--ink);
    background: var(--lemon);
    color: var(--ink);
}

/* ============================================
   FOOTER
============================================ */
.site-footer {
    background: var(--ink);
    color: var(--cream);
    padding: 70px 0 0;
    border-top: 3px solid var(--ink);
    position: relative;
    z-index: 2;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: -22px; left: 0; width: 100%; height: 24px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0 24 L40 0 L80 24 L120 0 L160 24 L200 0 L240 24 L280 0 L320 24 L360 0 L400 24 L440 0 L480 24 L520 0 L560 24 L600 0 L640 24 L680 0 L720 24 L760 0 L800 24 L840 0 L880 24 L920 0 L960 24 L1000 0 L1040 24 L1080 0 L1120 24 L1160 0 L1200 24 Z' fill='black'/></svg>");
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0 24 L40 0 L80 24 L120 0 L160 24 L200 0 L240 24 L280 0 L320 24 L360 0 L400 24 L440 0 L480 24 L520 0 L560 24 L600 0 L640 24 L680 0 L720 24 L760 0 L800 24 L840 0 L880 24 L920 0 L960 24 L1000 0 L1040 24 L1080 0 L1120 24 L1160 0 L1200 24 Z' fill='black'/></svg>");
    -webkit-mask-size: cover;
    mask-size: cover;
}

.footer-features {
    padding-bottom: 50px;
    border-bottom: 1px dashed rgba(255,248,236,0.2);
    margin-bottom: 50px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.feature-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--strawberry);
    color: #fff;
    border: 2.5px solid var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.feature-text h5 {
    font-family: var(--font-handwrite);
    color: var(--lemon);
    font-size: 15px;
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.feature-text p {
    color: rgba(255,248,236,0.7);
    font-size: 12px;
    line-height: 1.6;
}

.footer-grid-5 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 38px;
}
.footer-brand .logo-text {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--strawberry);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.footer-brand p {
    color: rgba(255,248,236,0.7);
    font-size: 13px;
    line-height: 1.85;
}
.footer-sns {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.footer-sns a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cream);
    transition: all var(--tx);
}
.footer-sns a:hover {
    background: var(--lemon);
    transform: rotate(-8deg) scale(1.08);
}

.footer-col h4 {
    font-family: var(--font-handwrite);
    font-size: 16px;
    color: var(--lemon);
    margin-bottom: 18px;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
}
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 30px; height: 2.5px;
    background: var(--strawberry);
    border-radius: 2px;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col ul a {
    color: rgba(255,248,236,0.7);
    font-size: 13px;
    transition: all var(--tx);
}
.footer-col ul a:hover {
    color: var(--lemon);
    padding-left: 6px;
}

.footer-payments {
    padding: 30px 0;
    border-top: 1px dashed rgba(255,248,236,0.2);
    margin-top: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.payments-label {
    font-family: var(--font-en);
    color: rgba(255,248,236,0.6);
    font-size: 12px;
    letter-spacing: 2px;
}
.payments-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pay-chip {
    padding: 5px 14px;
    border: 1.5px solid rgba(255,248,236,0.3);
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 11px;
    color: var(--cream);
    letter-spacing: 1px;
}
.pay-chip.pay-paypay { background: #ff0033; border-color: #ff0033; }

.footer-bottom {
    text-align: center;
    padding: 24px 0;
    border-top: 1px dashed rgba(255,248,236,0.2);
    color: rgba(255,248,236,0.4);
    font-size: 12px;
    letter-spacing: 1px;
    font-family: var(--font-en);
}

.back-to-top {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--strawberry);
    color: #fff;
    border: 3px solid var(--ink);
    box-shadow: var(--hard-2);
    opacity: 0; pointer-events: none;
    transform: translateY(12px);
    transition: all var(--tx);
    z-index: 90;
}
.back-to-top.visible {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--lemon);
    color: var(--ink);
    transform: rotate(-10deg) scale(1.08);
    box-shadow: 8px 8px 0 var(--ink);
}

/* ============================================
   SEARCH OVERLAY
============================================ */
.search-overlay {
    position: fixed; inset: 0;
    background: rgba(36,26,44,0.85);
    z-index: 300;
    opacity: 0; pointer-events: none;
    transition: opacity var(--tx);
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-overlay.active { opacity: 1; pointer-events: auto; }
.search-overlay-inner { position: relative; width: 90%; max-width: 600px; }
.search-form-overlay {
    display: flex;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-pill);
    overflow: hidden;
    box-shadow: 8px 8px 0 var(--strawberry);
}
.search-form-overlay input {
    flex: 1;
    border: none;
    padding: 18px 28px;
    font-size: 16px;
    background: transparent;
    outline: none;
    color: var(--ink);
}
.search-form-overlay input::placeholder { color: var(--gray-3); }
.search-form-overlay button {
    background: var(--strawberry);
    color: #fff;
    border: none;
    padding: 0 26px;
    border-left: 3px solid var(--ink);
    transition: all var(--tx);
}
.search-form-overlay button:hover { background: var(--lemon); color: var(--ink); }
.search-close {
    position: absolute;
    top: -50px; right: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--cream);
    border: 2.5px solid var(--ink);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
}

/* ============================================
   PRODUCT DETAIL PAGE
============================================ */
.product-detail { padding: 50px 0 80px; }
.breadcrumb {
    margin-bottom: 30px;
    font-size: 12px;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-family: var(--font-en);
    letter-spacing: 1px;
}
.breadcrumb a {
    background: var(--cream);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 2px solid var(--ink);
    font-size: 11px;
}
.breadcrumb a:hover { background: var(--lemon); }
.breadcrumb span { color: var(--gray-3); }

.product-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
}
.gallery-section {
    position: sticky;
    top: 180px;
    align-self: start;
}
.gallery-main {
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--pink-soft);
    box-shadow: var(--hard-3);
    transform: rotate(-1deg);
}
.gallery-main img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.gallery-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.gallery-thumbs img {
    width: 84px; height: 84px;
    border: 2.5px solid var(--ink);
    border-radius: var(--r-md);
    object-fit: cover;
    cursor: pointer;
    transition: all var(--tx);
    box-shadow: var(--hard-1);
}
.gallery-thumbs img:hover, .gallery-thumbs img.active {
    transform: rotate(-3deg) translate(-2px,-2px);
    box-shadow: 5px 5px 0 var(--strawberry);
}

.product-info { padding-top: 10px; }
.product-info .sku {
    font-family: var(--font-en);
    font-size: 11px;
    color: var(--strawberry);
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.product-info h1 {
    font-family: var(--font-handwrite);
    font-size: clamp(26px, 3vw, 36px);
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.price-block {
    background: var(--lemon-soft);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    padding: 18px 24px;
    margin-bottom: 26px;
    box-shadow: var(--hard-1);
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.price-block .current-price {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--strawberry);
    -webkit-text-stroke: 1px var(--ink);
}
.price-block .tax-note {
    font-size: 12px;
    color: var(--ink-soft);
}
.price-block .original {
    font-size: 16px;
    color: var(--gray-3);
    text-decoration: line-through;
}

.short-desc {
    background: var(--cream);
    border: 2.5px dashed var(--ink);
    padding: 16px 22px;
    border-radius: var(--r-md);
    margin-bottom: 26px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.85;
}

.qty-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}
.qty-row label {
    font-weight: 700;
    color: var(--ink);
    font-size: 14px;
}
.qty-input {
    width: 80px;
    padding: 10px 16px;
    border: 2.5px solid var(--ink);
    border-radius: var(--r-pill);
    background: var(--cream);
    font-size: 16px;
    text-align: center;
    box-shadow: var(--hard-1);
    outline: none;
}

.btn-add-cart {
    width: 100%;
    padding: 18px;
    background: var(--strawberry);
    color: #fff;
    border: 3px solid var(--ink);
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: var(--hard-2);
    transition: all var(--tx);
}
.btn-add-cart:hover {
    transform: translate(-3px,-3px) rotate(-1deg);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--lemon);
    color: var(--ink);
}

.spec-table {
    width: 100%;
    margin-top: 28px;
    border: 2.5px solid var(--ink);
    border-radius: var(--r-md);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cream);
}
.spec-table tr:not(:last-child) th,
.spec-table tr:not(:last-child) td { border-bottom: 1.5px dashed var(--ink); }
.spec-table th {
    background: var(--mint-soft);
    color: var(--ink);
    font-family: var(--font-handwrite);
    padding: 12px 18px;
    text-align: left;
    width: 30%;
    font-size: 14px;
    border-right: 1.5px dashed var(--ink);
}
.spec-table td {
    padding: 12px 18px;
    color: var(--ink-soft);
    font-size: 13px;
}

.product-long-desc {
    margin-top: 70px;
    padding-top: 50px;
    border-top: 3px dashed var(--ink);
}
.product-long-desc h3 {
    font-family: var(--font-handwrite);
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 22px;
    letter-spacing: 1px;
}
.product-long-desc .desc-body {
    color: var(--ink-soft);
    line-height: 2;
    font-size: 14.5px;
}

/* ============================================
   CART PAGE
============================================ */
.cart-page { padding: 60px 0 80px; }
.cart-page h2 {
    font-family: var(--font-handwrite);
    font-size: clamp(28px, 3.6vw, 42px);
    color: var(--ink);
    margin-bottom: 36px;
    letter-spacing: 1px;
    text-align: center;
}
.cart-empty {
    text-align: center;
    padding: 80px 0;
    background: var(--cream);
    border: 3px dashed var(--ink);
    border-radius: var(--r-lg);
}
.cart-empty p {
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 22px;
    font-family: var(--font-handwrite);
}
.btn-continue {
    display: inline-block;
    background: var(--strawberry);
    color: #fff;
    padding: 14px 36px;
    border-radius: var(--r-pill);
    border: 3px solid var(--ink);
    box-shadow: var(--hard-2);
    font-family: var(--font-en);
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: all var(--tx);
}
.btn-continue:hover {
    transform: translate(-3px,-3px) rotate(-2deg);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--lemon);
    color: var(--ink);
}

.cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--hard-2);
}
.cart-table thead {
    background: var(--lemon-soft);
}
.cart-table th {
    padding: 16px;
    font-family: var(--font-handwrite);
    color: var(--ink);
    border-bottom: 2.5px solid var(--ink);
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
}
.cart-table td {
    padding: 18px 14px;
    border-bottom: 1.5px dashed var(--ink);
    font-size: 14px;
    color: var(--ink);
}
.cart-table tr:last-child td { border-bottom: none; }
.cart-product-cell {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cart-product-cell img {
    width: 76px; height: 76px;
    border-radius: var(--r-md);
    border: 2.5px solid var(--ink);
    object-fit: cover;
    box-shadow: var(--hard-1);
}
.cart-product-cell .name {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
}
.cart-remove {
    color: var(--strawberry);
    font-size: 12px;
    border: 2px solid var(--strawberry);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--cream);
    transition: all var(--tx);
}
.cart-remove:hover { background: var(--strawberry); color: #fff; }

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 18px;
}
.cart-summary {
    background: var(--mint-soft);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    padding: 22px 30px;
    box-shadow: var(--hard-2);
    transform: rotate(-1deg);
}
.cart-summary .summary-label {
    font-family: var(--font-handwrite);
    color: var(--ink-soft);
    font-size: 14px;
    margin-right: 16px;
}
.cart-summary .summary-total {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--strawberry);
    -webkit-text-stroke: 0.5px var(--ink);
}

.btn-checkout {
    background: var(--strawberry);
    color: #fff;
    padding: 16px 38px;
    border-radius: var(--r-pill);
    border: 3px solid var(--ink);
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: var(--hard-2);
    transition: all var(--tx);
    text-decoration: none;
    display: inline-block;
}
.btn-checkout:hover {
    transform: translate(-3px,-3px) rotate(-2deg);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--lemon);
    color: var(--ink);
}

.btn-update {
    padding: 12px 28px;
    background: var(--cream);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: var(--hard-1);
    transition: all var(--tx);
}
.btn-update:hover { background: var(--lemon); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }

/* ============================================
   CHECKOUT PAGE
============================================ */
.checkout-page { padding: 60px 0 80px; }
.checkout-page h2 {
    font-family: var(--font-handwrite);
    font-size: clamp(28px, 3.6vw, 42px);
    color: var(--ink);
    margin-bottom: 36px;
    letter-spacing: 1px;
    text-align: center;
}
.checkout-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
}
.checkout-form {
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    padding: 36px;
    box-shadow: var(--hard-2);
}
.checkout-form h3 {
    font-family: var(--font-handwrite);
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2.5px dashed var(--ink);
    letter-spacing: 1px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 1px;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 18px;
    border: 2.5px solid var(--ink);
    border-radius: var(--r-md);
    background: var(--cream);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: all var(--tx);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    background: #fff;
    border-color: var(--strawberry);
    box-shadow: var(--hard-color);
    transform: translate(-1px,-1px);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.checkout-summary {
    background: var(--lemon-soft);
    border: 3px solid var(--ink);
    border-radius: var(--r-lg);
    padding: 30px;
    box-shadow: var(--hard-2);
    align-self: start;
    position: sticky;
    top: 200px;
}
.checkout-summary h3 {
    font-family: var(--font-handwrite);
    font-size: 18px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2.5px dashed var(--ink);
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--ink-soft);
}
.summary-row.total {
    border-top: 2.5px dashed var(--ink);
    margin-top: 14px;
    padding-top: 14px;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--strawberry);
}

.summary-items {
    margin-bottom: 16px;
    max-height: 240px;
    overflow-y: auto;
}
.summary-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1.5px dashed rgba(36,26,44,0.2);
    font-size: 13px;
}
.summary-item img {
    width: 50px; height: 50px;
    border: 2px solid var(--ink);
    border-radius: var(--r-sm);
    object-fit: cover;
}

/* ============================================
   CATEGORY PAGE
============================================ */
.category-page { padding: 50px 0 80px; }
.category-hero {
    background: var(--pink-soft);
    border: 3px solid var(--ink);
    border-radius: var(--r-xl);
    padding: 60px 50px;
    margin-bottom: 50px;
    box-shadow: var(--hard-3);
    position: relative;
    overflow: hidden;
}
.category-hero::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: var(--lemon-soft);
    border: 3px solid var(--ink);
    opacity: 0.4;
}
.category-hero .age-tag-big {
    display: inline-block;
    background: var(--lemon);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    padding: 6px 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 18px;
    box-shadow: var(--hard-1);
    transform: rotate(-3deg);
    position: relative;
    z-index: 2;
}
.category-hero h1 {
    font-family: var(--font-handwrite);
    font-size: clamp(34px, 4.6vw, 54px);
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}
.category-hero p {
    color: var(--ink-soft);
    font-size: 15px;
    max-width: 560px;
    line-height: 1.85;
    position: relative;
    z-index: 2;
}

.category-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 14px;
}
.category-count {
    color: var(--ink-soft);
    font-family: var(--font-handwrite);
    font-size: 16px;
}
.category-count strong {
    color: var(--strawberry);
    font-family: var(--font-display);
    font-size: 22px;
    -webkit-text-stroke: 0.5px var(--ink);
    margin: 0 4px;
}
.sort-select {
    padding: 10px 22px;
    border: 2.5px solid var(--ink);
    border-radius: var(--r-pill);
    background: var(--cream);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    box-shadow: var(--hard-1);
    cursor: pointer;
}

/* ============================================
   PAGINATION (sticker-style)
============================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 60px;
    flex-wrap: wrap;
}
.pg-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    background: var(--cream);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: var(--hard-1);
    transition: all var(--tx);
    text-decoration: none;
}
.pg-btn:hover:not(.pg-disabled) {
    background: var(--lemon);
    transform: translate(-2px,-2px) rotate(-3deg);
    box-shadow: 5px 5px 0 var(--ink);
}
.pg-prev:hover { transform: translate(-3px,-2px) rotate(-3deg); }
.pg-next:hover { transform: translate(3px,-2px) rotate(3deg); }
.pg-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--line);
}

.pg-numbers {
    display: flex;
    gap: 6px;
    align-items: center;
}
.pg-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    background: var(--cream);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 16px;
    box-shadow: var(--hard-1);
    transition: all var(--tx);
    text-decoration: none;
}
.pg-num:not(.pg-current):hover {
    background: var(--sky-soft);
    transform: translate(-2px,-2px) rotate(-6deg);
    box-shadow: 5px 5px 0 var(--ink);
}
.pg-num.pg-current {
    background: var(--strawberry);
    color: #fff;
    transform: rotate(-4deg) scale(1.08);
    box-shadow: 4px 4px 0 var(--ink);
    cursor: default;
}
.pg-ellipsis {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 18px;
    padding: 0 4px;
    letter-spacing: 2px;
}

.pagination-info {
    text-align: center;
    margin-top: 18px;
    color: var(--ink-soft);
    font-family: var(--font-handwrite);
    font-size: 14px;
    letter-spacing: 1px;
}

@media (max-width: 720px) {
    .pagination { gap: 8px; }
    .pg-btn { padding: 10px 16px; font-size: 12px; }
    .pg-num { min-width: 38px; height: 38px; font-size: 14px; }
}

/* ============================================
   STATIC PAGES (legal, privacy, etc)
============================================ */
.static-page { padding: 60px 0 90px; }
.static-page-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-xl);
    padding: 60px 50px;
    box-shadow: var(--hard-3);
}
.static-page-card h1 {
    font-family: var(--font-handwrite);
    font-size: clamp(28px, 3.6vw, 40px);
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: 1px;
}
.static-page-card .lead {
    color: var(--ink-soft);
    font-size: 15px;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 2.5px dashed var(--ink);
}
.static-page-card h2 {
    font-family: var(--font-handwrite);
    font-size: 20px;
    color: var(--strawberry);
    margin: 36px 0 14px;
    letter-spacing: 1px;
}
.static-page-card h3 {
    font-family: var(--font-handwrite);
    font-size: 17px;
    color: var(--ink);
    margin: 24px 0 10px;
}
.static-page-card p, .static-page-card li {
    color: var(--ink-soft);
    line-height: 2;
    margin-bottom: 12px;
    font-size: 14.5px;
}
.static-page-card ul, .static-page-card ol {
    margin-left: 22px;
    margin-bottom: 16px;
}
.static-page-card ul li { list-style: '✿  '; }
.static-page-card ol li { list-style: decimal; }
.static-page-card table {
    width: 100%;
    border: 2.5px solid var(--ink);
    border-radius: var(--r-md);
    border-collapse: separate;
    border-spacing: 0;
    margin: 18px 0;
    overflow: hidden;
}
.static-page-card table th,
.static-page-card table td {
    padding: 12px 18px;
    border-bottom: 1.5px dashed var(--ink);
    font-size: 14px;
    text-align: left;
}
.static-page-card table th {
    background: var(--mint-soft);
    color: var(--ink);
    font-family: var(--font-handwrite);
    width: 30%;
    border-right: 1.5px dashed var(--ink);
}

/* ============================================
   THANK YOU PAGE
============================================ */
.thankyou-page {
    padding: 80px 0;
    text-align: center;
}
.thankyou-card {
    max-width: 620px;
    margin: 0 auto;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: var(--r-xl);
    padding: 70px 50px;
    box-shadow: 9px 9px 0 var(--ink);
    position: relative;
}
.thankyou-emoji {
    font-size: 80px;
    margin-bottom: 18px;
    display: inline-block;
    animation: bouncy 2.4s ease-in-out infinite;
}
@keyframes bouncy {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
}
.thankyou-card h1 {
    font-family: var(--font-handwrite);
    font-size: clamp(28px, 4vw, 42px);
    color: var(--strawberry);
    margin-bottom: 14px;
    letter-spacing: 1px;
}
.thankyou-card p {
    color: var(--ink-soft);
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.9;
}
.order-num {
    display: inline-block;
    background: var(--lemon);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    padding: 10px 24px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 18px;
    box-shadow: var(--hard-1);
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* ============================================
   SEARCH RESULTS
============================================ */
.search-results { padding: 60px 0; }
.search-results h2 {
    font-family: var(--font-handwrite);
    font-size: 30px;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.search-results .count {
    color: var(--ink-soft);
    margin-bottom: 30px;
    font-size: 14px;
}

/* ============================================
   ANIMATIONS
============================================ */
@keyframes float-y {
    0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.float { animation: float-y 4s ease-in-out infinite; }
.float-d2 { animation-delay: 1.2s; }
.float-d3 { animation-delay: 2.1s; }

@keyframes wobble {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}
.wobble { animation: wobble 3.5s ease-in-out infinite; }

/* ============================================
   DECORATIVE FLOATING STICKERS
============================================ */
.sticker {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

.jp-divider {
    height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30' stroke='%23241a2c' stroke-width='3' fill='none' stroke-linecap='round'/><circle cx='150' cy='15' r='5' fill='%23ff5a7a'/><circle cx='450' cy='45' r='5' fill='%236cc4f5'/><circle cx='750' cy='15' r='5' fill='%236cc472'/><circle cx='1050' cy='45' r='5' fill='%23ffc843'/></svg>") center/contain repeat-x;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1024px) {
    .product-grid, .category-grid { grid-template-columns: repeat(3, 1fr); }
    .promise-grid, .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid-5 { grid-template-columns: 1fr 1fr; }
    .testi-grid { grid-template-columns: 1fr 1fr; }
    .brand-story-flex { grid-template-columns: 1fr; gap: 40px; }
    .checkout-grid, .product-detail-grid { grid-template-columns: 1fr; }
    .gallery-section, .checkout-summary { position: static; }
}

@media (max-width: 720px) {
    .hero-section { margin: 14px 3% 0; border-radius: var(--r-lg); }
    .hero-content { left: 5%; right: 5%; bottom: 8%; }
    .hero-content h1 { font-size: clamp(26px, 8vw, 38px); }
    .product-grid, .category-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .promise-grid, .features-grid, .testi-grid { grid-template-columns: 1fr; }
    .footer-grid-5 { grid-template-columns: 1fr; gap: 24px; }
    .form-row { grid-template-columns: 1fr; }
    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed; top: 0; right: 0;
        height: 100%; width: 86%; max-width: 360px;
        background: var(--cream);
        border-left: 3px solid var(--ink);
        padding: 70px 30px 30px;
        transform: translateX(105%);
        transition: transform var(--tx);
        z-index: 250;
        overflow-y: auto;
    }
    .main-nav.open { transform: translateX(0); }
    .main-nav > ul { flex-direction: column; gap: 6px; align-items: stretch; }
    .main-nav a { display: block; padding: 12px 16px; }
    .nav-close { display: flex; align-items: center; justify-content: center; }
    .nav-mobile-cats { margin-top: 24px; padding-top: 22px; border-top: 2.5px dashed var(--ink); }
    .nav-mobile-cats .nav-mobile-label {
        font-family: var(--font-handwrite);
        color: var(--strawberry);
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }
    .nav-mobile-cats a {
        display: block;
        padding: 8px 14px;
        font-size: 13px;
        color: var(--ink-soft);
        border-radius: var(--r-pill);
    }
    .static-page-card { padding: 40px 26px; }
    .newsletter-card { padding: 40px 26px; }
    .age-bubble { width: 110px; height: 110px; }
    .age-bubbles { gap: 12px; }
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table tr { padding: 16px; border-bottom: 2.5px dashed var(--ink); }
    .cart-table td { padding: 6px 0; border: none; text-align: left !important; }
    .cart-product-cell { margin-bottom: 8px; }
    .checkout-summary { position: static; }
    .gallery-section { position: static; }
}

@media (min-width: 720px) {
    .nav-mobile-cats { display: none; }
}

/* ============================================
   UTILITY
============================================ */
.btn-ghost {
    display: inline-block;
    padding: 12px 26px;
    background: var(--cream);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: var(--r-pill);
    font-family: var(--font-en);
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: var(--hard-1);
    transition: all var(--tx);
    text-decoration: none;
}
.btn-ghost:hover {
    background: var(--lemon);
    transform: translate(-2px,-2px) rotate(-3deg);
    box-shadow: 5px 5px 0 var(--ink);
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
.gap-12 { gap: 12px; }
.mt-30 { margin-top: 30px; }
.text-center { text-align: center; }