/* Alita's illustrated world. Shared colors, with extra movement in the catalog. */
:root {
    --color-background: #fffcf5;
    --color-surface: #faf5ff;
    --color-text: #42284f;
    --color-text-muted: #726078;
    --color-primary-dark: #a62265;
    --color-primary-hover: #86174f;
    --color-teal-dark: #126d65;
    --color-border: #e8d9ed;
    --color-pink-light: #ffe5ef;
    --color-lavender: #eee3ff;
    --muted: #726078;
    --radius-small: 14px;
    --radius-medium: 24px;
    --radius-large: 36px;
    --outline: #56335f;
    --candy-pink: #ffdce9;
    --candy-yellow: #fff0b9;
    --candy-mint: #dff5eb;
    --candy-lilac: #eee3ff;
}

.storefront { background: #fffcf5; }
.storefront h1, .storefront h2, .storefront h3 { letter-spacing: -.045em; }
.storefront .announcement { background: #eee3ff; color: #56335f; border-bottom: 1px solid #dfcdeb; font-weight: 600; }
.storefront .announcement .icon { color: #a62265; }
.storefront .store-header { min-height: 100px; height: auto; padding-block: 15px; }
.storefront .store-header nav { gap: 7px; }
.storefront .store-header nav a { padding: 9px 15px; border-radius: 999px; transition: background .2s; }
.storefront .store-header nav a:hover, .storefront .store-header nav a[aria-current="page"] { background: var(--candy-pink); color: #8b1d54; }
.storefront .cart-link { border: 2px solid var(--outline); border-radius: 999px; background: #fff; box-shadow: 2px 3px var(--outline); }
.storefront .cart-count { background: var(--candy-yellow); color: var(--outline); }
.storefront .button {
    border: 2px solid var(--outline);
    border-radius: 999px;
    background: #a62265;
    box-shadow: 3px 4px var(--outline);
    padding: 13px 23px;
    font-weight: 700;
    transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s;
}
.storefront .button:hover { background: #86174f; border-color: var(--outline); }
.storefront .button.secondary { background: var(--candy-mint); color: #24534c; }
.storefront .button.secondary:hover { background: #c7eddd; }
.storefront .button.tertiary { background: #fffdf8; color: var(--outline); }
.storefront .button.tertiary:hover { background: var(--candy-yellow); }
.storefront .button:active { transform: translate(3px, 4px); box-shadow: 0 0 var(--outline); }
.storefront .button:disabled { transform: none; box-shadow: none; }
.storefront .button.small { padding: 8px 14px; }

.storefront .hero {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 28px;
    padding: clamp(25px, 4.2vw, 62px);
    margin-block: 12px 35px;
    border: 2px solid var(--outline);
    border-radius: 42px 42px 42px 12px;
    background: #fff0f3;
    box-shadow: 7px 8px #eee3ff;
}
.storefront .hero::after {
    content: "";
    position: absolute;
    inset: auto auto -10px 8%;
    width: 40%;
    height: 14px;
    z-index: -1;
    background: var(--candy-yellow);
    border-radius: 999px;
    transform: rotate(-2deg);
}
.storefront .hero-kicker { background: var(--candy-yellow); border: 1px solid #d8b665; border-radius: 999px; box-shadow: none; letter-spacing: .09em; font-size: .66rem; }
.storefront .hero h1 { color: #56335f; font-size: clamp(2.5rem, 5.05vw, 4.7rem); line-height: 1.09; letter-spacing: -.06em; max-width: 15ch; text-shadow: none; }
.storefront .hero .lead { color: #6d506c; max-width: 43ch; margin-bottom: 26px; }
.storefront .hero .button:not(.tertiary) { background: #a62265; box-shadow: 3px 4px var(--outline); }
.storefront .hero .button:not(.tertiary):hover { background: #86174f; }
.storefront .hero .button:not(.tertiary):active { box-shadow: none; }
.storefront .hero .actions { gap: 14px; }
.storefront .hero-how { margin: 24px 0 0; color: #755475; font-size: .84rem; }
.gift-scene { position: relative; width: min(100%, 460px); margin: 0 auto; padding: 25px 0 14px; }
.gift-scene::before { content: ""; position: absolute; inset: 16% 3% 10%; border-radius: 46% 54% 52% 48%; background: #e5d7f7; transform: rotate(-9deg); }
.gift-friend { display: block; position: relative; width: 100%; height: auto; overflow: visible; }
.scene-bubble { position: relative; z-index: 1; display: table; margin: 0 auto -18px; padding: 12px 20px; background: #fffdf8; border: 2px solid var(--outline); border-radius: 25px 25px 25px 4px; transform: rotate(-5deg); font: 700 clamp(.8rem, 1.2vw, 1rem)/1.3 Poppins, sans-serif; box-shadow: 3px 3px #56335f18; }
.scene-sticker { position: absolute; z-index: 1; }
.sticker-heart { top: 23%; right: 3%; font: 700 60px/1 Poppins, sans-serif; color: #b02c62; transform: rotate(16deg); }
.sticker-star { bottom: 15%; left: 1%; color: #ad7200; font-size: 45px; transform: rotate(-12deg); }
.sticker-note { right: 2%; bottom: 2%; background: var(--candy-mint); padding: 10px 17px; border: 2px solid var(--outline); border-radius: 5px 20px 20px 20px; font-size: .78rem; line-height: 1.6; transform: rotate(6deg); box-shadow: 3px 3px #56335f15; }
.sticker-note strong { font-family: Poppins, sans-serif; }
.friend-body { transform-origin: 240px 330px; }
.friend-wing-left { transform-origin: 160px 275px; }
.friend-wing-right { transform-origin: 320px 275px; }
.friend-sparkles { transform-origin: 240px 225px; }

.storefront .promise-strip { background: transparent; color: #56335f; border: none; padding-block: 14px; }
.storefront .promise-strip > .wrap { justify-content: center; gap: 35px; flex-wrap: wrap; }
.storefront .promise-strip span { font-size: .76rem; }
.storefront .promise-strip .icon { color: #a62265; }
.imagination.section { padding-block: 48px 30px; }
.imagination h2 { max-width: 22ch; }
.handwritten { color: #9b2663; font-size: .9rem; font-weight: 700; transform: rotate(-4deg); padding: 12px; }
.imagination-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; counter-reset: none; }
.imagination-steps li { position: relative; padding: 27px; border: 2px solid var(--outline); border-radius: 26px 26px 26px 8px; background: var(--candy-yellow); box-shadow: 3px 4px #56335f12; }
.imagination-steps li:nth-child(2) { background: var(--candy-lilac); border-radius: 26px 8px 26px 26px; }
.imagination-steps li:nth-child(3) { background: var(--candy-mint); }
.imagination-steps .icon { width: 33px; height: 33px; margin-bottom: 17px; }
.imagination-steps h3 { font-size: 1.12rem; margin-bottom: 10px; }
.imagination-steps p { font-size: .88rem; margin: 0; color: #604969; }
.step-number { position: absolute; top: 20px; right: 22px; font: 700 1.6rem/1 Poppins, sans-serif; opacity: .45; }

.storefront .section-heading h2 { color: #56335f; }
.storefront .category-list a { background: #fff; border: 2px solid #d7c4df; border-radius: 999px; font-weight: 600; }
.storefront .category-list a:nth-child(3n + 1) { background: var(--candy-yellow); }
.storefront .category-list a:nth-child(3n + 2) { background: var(--candy-lilac); }
.storefront .category-list a:nth-child(3n) { background: var(--candy-mint); }
.storefront .category-list a:hover { border-color: var(--outline); }
.storefront .product-card { background: #fff; border: 2px solid var(--outline); border-radius: 26px; box-shadow: 4px 5px #e9daef; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.storefront .product-card:focus-within { box-shadow: 5px 7px #d4bfdf; }
.storefront .product-photo { margin: 10px 10px 0; border-radius: 17px; background: var(--candy-lilac); overflow: hidden; }
.storefront .product-card:nth-child(3n + 2) .product-photo { background: var(--candy-yellow); }
.storefront .product-card:nth-child(3n) .product-photo { background: var(--candy-mint); }
.storefront .product-photo img { border-radius: 0; }
.storefront .badge { padding: 5px 10px; border: 1px solid #d8b7c8; border-radius: 999px; background: #fffbf2; font-size: .64rem; }
.storefront .stock-badge { color: #722943; background: #ffe5ed; }
.storefront .card-body { padding: 22px 20px; }
.storefront .card-bottom { gap: 10px; flex-wrap: wrap; }
.storefront .card-bottom strong { color: #6b285c; }
.storefront .card-bottom > a { font-size: .75rem; font-weight: 700; color: #245c53; }
.storefront .photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: .8rem; color: #6c5074; }
.storefront .photo-placeholder::before { content: "✧"; font-size: 3.8rem; line-height: 1; color: #8b5c9f; }
.storefront .pack-section { position: relative; background: #f1e9fc; border-block: 2px dashed #d3bce4; }
.storefront .personal-banner { background: var(--candy-yellow); border: 2px solid var(--outline); border-radius: 36px 12px 36px 36px; box-shadow: 5px 6px #eee3ff; }
.storefront .personal-banner h2 { font-weight: 700; }
.storefront .filter-bar, .storefront .cart-line, .storefront .cart-summary, .storefront .info-box { border: 2px solid #dcc9e3; border-radius: 22px; background: #fff; }
.storefront .empty { background: #f6effc; border: 2px dashed #b998cd; border-radius: 28px; }
.storefront .gallery-main { border-radius: 28px; border: 2px solid #dcc9e3; overflow: hidden; }
.storefront input, .storefront select, .storefront textarea { background: #fffdfa; border: 2px solid #d8c7df; border-radius: 13px; }
.storefront .store-footer { background: #4b3058; border-top: 5px solid #ddc7f2; }

/* The workshop uses the same palette with steady surfaces for reading amounts. */
.admin-body { background: #f8f3fc; }
.admin-body .sidebar { background: #fffdf8; border-right: 2px solid #e1d2e9; }
.admin-body .sidebar nav a { border-radius: 15px; }
.admin-body .sidebar nav a[aria-current="page"] { background: #eee3ff; color: #633777; box-shadow: inset 3px 0 #9363bd; }
.admin-body .brand-mark { border: 1px solid #dcc4e9; background: #eee3ff; }
.admin-body .admin-topbar { background: #fffdf8; border-bottom: 1px solid #e1d2e9; }
.admin-body .button { background: #a62265; border-radius: 13px; box-shadow: 0 3px #76204b; }
.admin-body .button.secondary { background: #126d65; box-shadow: 0 3px #164e49; }
.admin-body .button.tertiary { background: #fff; color: #56335f; box-shadow: none; }
.admin-body .button:hover { background: #86174f; }
.admin-body .button.secondary:hover { background: #105a54; }
.admin-body .button.tertiary:hover { background: #f6ecfc; }
.admin-body .button:active { transform: translateY(2px); box-shadow: none; }
.admin-body .metric, .admin-body .panel, .admin-body .table-wrap { border: 1px solid #e0d0e9; box-shadow: 0 4px 0 #ece2f2; }
.admin-body .metric.accent { background: #eee3ff; border-color: #d6bce7; }
.admin-body .metrics > .metric:nth-child(3n + 2) { background: #fff5d8; }
.admin-body .metrics > .metric:nth-child(3n) { background: #edf9f2; }
.admin-body .metric strong { font-variant-numeric: tabular-nums; }
.admin-body .status { background: #dff5eb; color: #245c53; border-radius: 999px; }
.admin-body table th { background: #f4edf9; color: #60446d; }
.admin-body input, .admin-body select, .admin-body textarea { border-radius: 12px; }

@media (hover: hover) and (pointer: fine) {
    .storefront .product-card:hover { transform: translateY(-5px); box-shadow: 5px 10px #decbe8; }
    .storefront .button:hover { transform: translateY(-2px); box-shadow: 3px 6px var(--outline); }
    .storefront .button:active { transform: translate(3px, 4px); box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .friend-body { animation: friend-bob 2.2s ease-in-out 2; }
    .friend-wing-left { animation: wing-left 1.1s ease-in-out 4; }
    .friend-wing-right { animation: wing-right 1.1s ease-in-out 4; }
    .friend-sparkles { animation: friendly-sparkle 2.2s ease-in-out 2; }
    .storefront .hero-copy { animation: friendly-arrival .65s ease-out both; }
    .storefront .gift-scene { animation: friendly-arrival .8s ease-out both; }
}
@keyframes friend-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes wing-left { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes wing-right { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes friendly-sparkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.94); } }
@keyframes friendly-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
    .storefront .hero { gap: 15px; padding: 30px; }
    .storefront .hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.8rem); }
    .storefront .hero .button { padding-inline: 15px; font-size: .8rem; }
    .imagination-steps { gap: 13px; }
    .imagination-steps li { padding: 22px; }
}
@media (max-width: 800px) {
    .storefront .hero { grid-template-columns: minmax(0, 1fr); }
    .storefront .hero-copy { max-width: 580px; }
    .storefront .hero h1 { max-width: 18ch; }
    .gift-scene { width: min(100%, 370px); }
    .imagination-steps { grid-template-columns: minmax(0, 1fr); }
    .imagination-steps li { padding: 25px 25px 25px 80px; }
    .imagination-steps .icon { position: absolute; left: 25px; top: 27px; width: 30px; height: 30px; }
    .imagination-steps h3 { padding-right: 35px; }
    .step-number { font-size: 1.3rem; }
    .handwritten { display: none; }
}
@media (max-width: 560px) {
    .storefront .store-header { gap: 12px; padding-block: 16px; }
    .storefront .store-header nav { justify-content: center; padding-top: 12px; }
    .storefront .store-header nav a { padding: 7px 16px; }
    .storefront .hero { padding: 24px; border-radius: 28px 28px 28px 8px; box-shadow: 4px 5px #eee3ff; }
    .storefront .hero h1 { font-size: clamp(2.05rem, 8.9vw, 3.1rem); }
    .storefront .hero-kicker { font-size: .56rem; padding-inline: 9px; letter-spacing: .05em; }
    .storefront .hero .actions { align-items: stretch; gap: 12px; }
    .storefront .hero .button { flex: 1 1 145px; font-size: .8rem; padding-inline: 12px; }
    .storefront .hero-how { margin-top: 20px; }
    .gift-scene { padding-top: 5px; }
    .scene-bubble { padding: 10px 14px; font-size: .8rem; }
    .sticker-heart { font-size: 45px; }
    .sticker-note { font-size: .65rem; padding: 7px 12px; }
    .storefront .promise-strip > .wrap { gap: 15px; }
    .storefront .promise-strip span { flex: 1 1 70px; align-items: center; text-align: center; font-size: .65rem; }
    .imagination.section { padding-block: 32px 15px; }
    .imagination-steps li { padding: 22px 20px 22px 66px; }
    .imagination-steps .icon { left: 20px; width: 25px; height: 25px; }
    .imagination-steps h3 { font-size: 1.02rem; }
    .imagination-steps p { font-size: .82rem; }
    .storefront .product-card { border-radius: 20px; box-shadow: 2px 3px #e9daef; }
    .storefront .product-photo { margin: 6px 6px 0; border-radius: 12px; }
    .storefront .card-body { padding: 15px 12px; }
    .storefront .card-body h3 { font-size: .93rem; }
    .storefront .badge { font-size: .56rem; padding: 3px 7px; }
    .storefront .photo-placeholder { font-size: .66rem; text-align: center; }
    .storefront .photo-placeholder::before { font-size: 2.8rem; }
    .storefront .buy-actions { flex-wrap: wrap; }
    .storefront .buy-actions > .button { flex: 1 1 160px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}