:root {
 --cream: #FFF8F0;
 --blush: #FFD6E0;
 --pink: #FF6B9D;
 --hot-pink: #FF3B7F;
 --yellow: #FFD93D;
 --mint: #6BCB77;
 --sky: #4D96FF;
 --coral: #FF8C61;
 --ink: #2A1A2E;
 --soft-ink: #5C4A6B;
 --shadow: rgba(255, 107, 157, 0.18);
 }

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

 html {
 scroll-behavior: smooth;
 color-scheme: light;
 /* Match body color so any horizontal-overflow gap that escapes body shows
    cream, not browser-default white. Pair with overflow-x: clip below. */
 background: var(--cream);
 /* clip (vs hidden) doesn't break position:sticky on descendants like the nav */
 overflow-x: clip;
 }

 body {
 font-family: 'DM Sans', sans-serif;
 background: var(--cream) !important;
 color: var(--ink) !important;
 overflow-x: hidden;
 line-height: 1.5;
 }

 /* ---------- NAV ---------- */
 nav {
 position: sticky;
 top: 0;
 z-index: 100;
 background: rgba(255, 248, 240, 0.92);
 backdrop-filter: blur(12px);
 border-bottom: 1px solid rgba(42, 26, 46, 0.06);
 padding: 1rem 2rem;
 }
 .nav-inner {
 max-width: 1300px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 }
 .logo {
 font-family: 'Caveat', cursive;
 font-size: 2rem;
 font-weight: 700;
 color: var(--ink);
 text-decoration: none;
 }
 .logo span { color: var(--hot-pink); }
 .nav-links {
 display: flex;
 gap: 2.2rem;
 list-style: none;
 }
 .nav-links a {
 color: var(--soft-ink);
 text-decoration: none;
 font-weight: 500;
 font-size: 0.95rem;
 transition: color 0.2s;
 }
 .nav-links a:hover { color: var(--hot-pink); }
 .nav-actions {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 }
 .cart-btn {
 background: var(--ink);
 color: var(--cream);
 border: none;
 padding: 0.6rem 1.2rem;
 border-radius: 999px;
 font-family: 'DM Sans', sans-serif;
 font-weight: 500;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.9rem;
 transition: transform 0.2s;
 min-height: 44px;
 }
 .cart-btn:hover { transform: translateY(-2px); }
 .cart-count {
 background: var(--hot-pink);
 color: white;
 border-radius: 999px;
 padding: 0.1rem 0.5rem;
 font-size: 0.75rem;
 font-weight: 700;
 }
 .hamburger {
 display: none;
 background: transparent;
 border: none;
 width: 44px;
 height: 44px;
 cursor: pointer;
 padding: 0;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 5px;
 }
 .hamburger span {
 display: block;
 width: 24px;
 height: 2px;
 background: var(--ink);
 border-radius: 2px;
 transition: transform 0.3s, opacity 0.2s;
 transform-origin: center;
 }
 .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
 .hamburger.open span:nth-child(2) { opacity: 0; }
 .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

 /* ---------- HERO ---------- */
 .hero {
 position: relative;
 padding: 5rem 2rem 6rem;
 overflow: hidden;
 }
 .hero-inner {
 max-width: 1300px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1.1fr 1fr;
 gap: 4rem;
 align-items: center;
 }
 .hero-eyebrow {
 font-family: 'Caveat', cursive;
 font-size: 1.6rem;
 color: var(--hot-pink);
 margin-bottom: 1rem;
 transform: rotate(-2deg);
 display: inline-block;
 }
 .hero h1 {
 font-family: 'Fraunces', serif;
 font-size: clamp(3rem, 6vw, 5.5rem);
 font-weight: 800;
 line-height: 0.95;
 letter-spacing: -0.02em;
 margin-bottom: 1.5rem;
 }
 .hero h1 em {
 font-style: italic;
 color: var(--hot-pink);
 font-weight: 400;
 }
 .hero p {
 font-size: 1.15rem;
 color: var(--soft-ink);
 max-width: 480px;
 margin-bottom: 2rem;
 }
 .hero-ctas {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
 }
 .btn {
 padding: 1rem 1.8rem;
 border-radius: 999px;
 font-weight: 600;
 text-decoration: none;
 font-size: 0.95rem;
 transition: all 0.2s;
 border: none;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-family: 'DM Sans', sans-serif;
 }
 .btn-primary {
 background: var(--hot-pink);
 color: white;
 box-shadow: 0 8px 24px var(--shadow);
 }
 .btn-primary:hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 32px var(--shadow);
 }
 .btn-secondary {
 background: transparent;
 color: var(--ink);
 border: 2px solid var(--ink);
 }
 .btn-secondary:hover {
 background: var(--ink);
 color: var(--cream);
 }

 /* Cookie collage in hero */
 .hero-collage {
 position: relative;
 height: 520px;
 }
 .cookie-tile {
 position: absolute;
 border-radius: 24px;
 overflow: hidden;
 box-shadow: 0 12px 40px rgba(42, 26, 46, 0.12);
 background-size: cover;
 background-position: center;
 animation: float 6s ease-in-out infinite;
 }
 .tile-1 {
 width: 240px; height: 240px;
 top: 0; left: 20px;
 background: linear-gradient(135deg, var(--blush), var(--pink));
 transform: rotate(-4deg);
 }
 .tile-2 {
 width: 200px; height: 280px;
 top: 60px; right: 20px;
 background: linear-gradient(135deg, var(--yellow), var(--coral));
 transform: rotate(3deg);
 animation-delay: -2s;
 }
 .tile-3 {
 width: 220px; height: 220px;
 bottom: 0; left: 80px;
 background: linear-gradient(135deg, var(--sky), var(--mint));
 transform: rotate(2deg);
 animation-delay: -4s;
 }
 .tile-4 {
 width: 160px; height: 160px;
 bottom: 40px; right: 60px;
 background: linear-gradient(135deg, var(--mint), var(--yellow));
 transform: rotate(-6deg);
 animation-delay: -1s;
 }
 .cookie-emoji {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 5rem;
 }
 @keyframes float {
 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
 50% { transform: translateY(-12px) rotate(var(--r, 0deg)); }
 }
 .tile-1 { --r: -4deg; }
 .tile-2 { --r: 3deg; }
 .tile-3 { --r: 2deg; }
 .tile-4 { --r: -6deg; }

 /* Decorative blobs */
 .blob {
 position: absolute;
 border-radius: 50%;
 filter: blur(60px);
 opacity: 0.4;
 z-index: -1;
 }
 .blob-1 {
 width: 400px; height: 400px;
 background: var(--blush);
 top: -100px; left: -100px;
 }
 .blob-2 {
 width: 300px; height: 300px;
 background: var(--yellow);
 bottom: -50px; right: -80px;
 opacity: 0.3;
 }

 /* ---------- TICKER ---------- */
 .ticker {
 background: var(--ink);
 color: var(--cream);
 padding: 1.2rem 0;
 overflow: hidden;
 border-top: 4px solid var(--hot-pink);
 border-bottom: 4px solid var(--hot-pink);
 }
 .ticker-track {
 display: flex;
 gap: 3rem;
 animation: scroll 14s linear infinite;
 white-space: nowrap;
 font-family: 'Fraunces', serif;
 font-style: italic;
 font-size: 1.4rem;
 }
 .ticker-track span {
 display: flex;
 align-items: center;
 gap: 3rem;
 }
 .ticker-dot {
 color: var(--hot-pink);
 font-size: 2rem;
 }
 @keyframes scroll {
 from { transform: translateX(0); }
 /* The duplicated content has 2N items but only 2N-1 gaps between them,
    so a literal -50% translate is short by half a gap (1.5rem). Adding
    that half-gap manually puts item N+1 exactly where item 1 started,
    and the loop reset becomes invisible. */
 to { transform: translateX(calc(-50% - 1.5rem)); }
 }

 /* ---------- SECTION HEADERS ---------- */
 section {
 padding: 6rem 2rem;
 position: relative;
 }
 .section-inner {
 max-width: 1300px;
 margin: 0 auto;
 }
 .section-header {
 text-align: center;
 margin-bottom: 4rem;
 }
 .section-eyebrow {
 font-family: 'Caveat', cursive;
 font-size: 1.5rem;
 color: var(--hot-pink);
 margin-bottom: 0.5rem;
 }
 .section-title {
 font-family: 'Fraunces', serif;
 font-size: clamp(2.2rem, 4vw, 3.5rem);
 font-weight: 800;
 letter-spacing: -0.02em;
 margin-bottom: 1rem;
 }
 .section-title em {
 font-style: italic;
 color: var(--hot-pink);
 font-weight: 400;
 }
 .section-sub {
 color: var(--soft-ink);
 font-size: 1.1rem;
 max-width: 560px;
 margin: 0 auto;
 }

 /* ---------- SEASONAL SHOP ---------- */
 #shop {
 background: linear-gradient(180deg, var(--cream) 0%, #FFF0F5 100%);
 }
 .product-card {
 background: white;
 border-radius: 28px;
 overflow: hidden;
 transition: transform 0.3s, box-shadow 0.3s, outline-color 0.3s;
 box-shadow: 0 4px 20px rgba(42, 26, 46, 0.06);
 border: 2px solid transparent;
 scroll-margin-top: 100px;
 outline: 3px solid transparent;
 outline-offset: 4px;
 /* Flex column so the body can grow to fill the grid-cell height,
    keeping the price/Add row aligned across cards regardless of
    description length. */
 display: flex;
 flex-direction: column;
 }
 .product-card.is-spotlight {
 outline-color: var(--hot-pink);
 box-shadow: 0 20px 50px rgba(255, 59, 127, 0.25);
 }
 .product-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 20px 50px rgba(42, 26, 46, 0.12);
 border-color: var(--blush);
 }
 .product-img {
 height: 240px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 5rem;
 position: relative;
 overflow: hidden;
 }
 /* <picture> is a transparent wrapper, but make it explicitly fill the flex
    cell so the inner <img>'s width/height: 100% resolve against the 240px box,
    not against picture's intrinsic content. Without this, a portrait PNG with
    edge-to-edge subject (like mothers_day_mini.png) could render at native
    height and overflow into the title row below. */
 .product-img picture {
 display: flex;
 width: 100%;
 height: 100%;
 align-items: center;
 justify-content: center;
 }
 .product-img.mothers { background: linear-gradient(135deg, #FFD6E0, #FF6B9D); }
 .product-img.minis { background: linear-gradient(135deg, #FFE8F0, #FFB8D1); }
 .product-img.july { background: linear-gradient(135deg, #4D96FF, #FF6B9D); }
 .product-img.summer { background: linear-gradient(135deg, #FFD93D, #FF8C61); }
 .product-img.fall { background: linear-gradient(135deg, #FF8C61, #C71F37); }
 .product-img.cakepops {
 background: linear-gradient(135deg, #FFD6E0, #FFD93D, #6BCB77, #4D96FF);
 background-size: 200% 200%;
 animation: gradientShift 8s ease infinite;
 }

 /* Real product photo (used when a product has a `photo` field defined).
  object-fit: contain preserves the photo's aspect ratio; transparent areas
  let the parent's brand gradient show through. Container-specific padding
  scales the image for each context (large card vs cart thumbnail). */
 img.product-photo {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
 padding: 0.75rem;
 box-sizing: border-box;
 }
 .addon-img img.product-photo { padding: 0.4rem; }
 .cart-item-img img.product-photo { padding: 0.15rem; }
 .product-img-compact img.product-photo { padding: 0.3rem; }
 .product-img.ricecrispies { background: linear-gradient(135deg, #FFF0E5, #FFD6E0); }
 .product-img.pretzels { background: linear-gradient(135deg, #E8C9A0, #8B5A3C); }
 @keyframes gradientShift {
 0%, 100% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 }
 .product-tag {
 position: absolute;
 top: 1rem;
 left: 1rem;
 background: white;
 padding: 0.3rem 0.8rem;
 border-radius: 999px;
 font-size: 0.75rem;
 font-weight: 700;
 color: var(--hot-pink);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 }
 .tag-open { background: var(--mint); color: white; }
 .tag-pickup { background: var(--coral); color: white; }
 .tag-soon { background: var(--ink); color: var(--cream); }
 .tag-closed { background: #C0B8C8; color: white; }
 .tag-yearround { background: var(--hot-pink); color: white; }

 .product-window {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 font-size: 0.82rem;
 color: var(--soft-ink);
 background: #FFF4F8;
 padding: 0.5rem 0.75rem;
 border-radius: 10px;
 margin-bottom: 1rem;
 }
 .window-icon { font-size: 0.95rem; }

 .product-card.is-unavailable {
 opacity: 0.75;
 }
 .product-card.is-unavailable .product-img {
 filter: grayscale(0.4);
 }

 .add-btn.disabled {
 background: #C0B8C8;
 cursor: not-allowed;
 }
 .add-btn.disabled:hover {
 background: #C0B8C8;
 }

 /* Add-on section header */
 .addon-header {
 text-align: center;
 margin-top: 3.5rem;
 margin-bottom: 1.5rem;
 }
 .addon-header h3 {
 font-family: 'Fraunces', serif;
 font-size: 1.6rem;
 font-weight: 600;
 color: var(--ink);
 margin-bottom: 0.3rem;
 }
 .addon-header h3 em {
 font-style: italic;
 color: var(--hot-pink);
 font-weight: 400;
 }
 .addon-header p {
 color: var(--soft-ink);
 font-size: 0.95rem;
 }

 /* Horizontal add-on grid */
 .addon-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 1rem;
 max-width: 900px;
 margin: 0 auto;
 }
 .addon-card {
 background: white;
 border-radius: 20px;
 overflow: hidden;
 display: flex;
 transition: transform 0.3s, box-shadow 0.3s;
 box-shadow: 0 4px 16px rgba(42, 26, 46, 0.05);
 border: 2px solid transparent;
 min-height: 120px;
 }
 .addon-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 12px 30px rgba(42, 26, 46, 0.1);
 border-color: var(--blush);
 }
 .addon-img {
 width: 120px;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 3rem;
 }
 .addon-img.cakepops {
 background: linear-gradient(135deg, #FFD6E0, #FFD93D, #6BCB77, #4D96FF);
 background-size: 200% 200%;
 animation: gradientShift 8s ease infinite;
 }
 .addon-img.ricecrispies { background: linear-gradient(135deg, #FFF0E5, #FFD6E0); }
 .addon-img.pretzels { background: linear-gradient(135deg, #E8C9A0, #8B5A3C); }

 .addon-body {
 flex: 1;
 padding: 1rem 1.2rem;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 min-width: 0;
 }
 .addon-name {
 font-family: 'Fraunces', serif;
 font-size: 1.1rem;
 font-weight: 600;
 margin-bottom: 0.15rem;
 }
 .addon-desc {
 color: var(--soft-ink);
 font-size: 0.78rem;
 margin-bottom: 0.6rem;
 line-height: 1.35;
 }
 .addon-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.5rem;
 }
 .addon-price {
 font-family: 'Fraunces', serif;
 font-size: 1.15rem;
 font-weight: 700;
 }
 .addon-price small {
 font-size: 0.7rem;
 color: var(--soft-ink);
 font-weight: 400;
 }
 .addon-btn {
 background: var(--ink);
 color: var(--cream);
 border: none;
 padding: 0.5rem 0.95rem;
 border-radius: 999px;
 cursor: pointer;
 font-weight: 600;
 font-family: 'DM Sans', sans-serif;
 font-size: 0.78rem;
 transition: background 0.2s;
 white-space: nowrap;
 }
 .addon-btn:hover { background: var(--hot-pink); }
 .addon-btn.added { background: var(--mint); }

 /* Featured grid: 2 columns on desktop for prominent display */
 .product-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 2rem;
 max-width: 760px;
 margin: 0 auto;
 }

 /* Upcoming holidays section */
 .upcoming-header {
 text-align: center;
 margin-top: 5rem;
 margin-bottom: 2rem;
 padding-top: 3rem;
 border-top: 1px dashed #E8DDD4;
 }
 .upcoming-header h3 {
 font-family: 'Fraunces', serif;
 font-size: 1.5rem;
 font-weight: 600;
 color: var(--ink);
 margin-bottom: 0.4rem;
 }
 .upcoming-header p {
 color: var(--soft-ink);
 font-size: 0.95rem;
 }
 .upcoming-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 0.85rem;
 max-width: 680px;
 margin: 0 auto;
 }

 /* Compact card styling */
 .product-card-compact {
 display: flex;
 flex-direction: column;
 text-align: center;
 padding: 0;
 opacity: 0.85;
 }
 .product-img-compact {
 height: 72px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.9rem;
 border-radius: 18px 18px 0 0;
 filter: grayscale(0.3);
 }
 .product-img-compact.mothers { background: linear-gradient(135deg, #FFD6E0, #FF6B9D); }
 .product-img-compact.july { background: linear-gradient(135deg, #4D96FF, #FF6B9D); }
 .product-img-compact.summer { background: linear-gradient(135deg, #FFD93D, #FF8C61); }
 .product-img-compact.fall { background: linear-gradient(135deg, #FF8C61, #C71F37); }

 .product-body-compact {
 padding: 0.65rem 0.85rem 0.85rem;
 }
 .product-name-compact {
 font-family: 'Fraunces', serif;
 font-size: 0.9rem;
 font-weight: 600;
 margin-bottom: 0.2rem;
 color: var(--ink);
 line-height: 1.2;
 }
 .product-window-compact {
 font-size: 0.72rem;
 color: var(--soft-ink);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 }
 .product-body {
 padding: 1.5rem;
 display: flex;
 flex-direction: column;
 flex: 1;
 }
 /* Window-status pill (e.g., "Order by May 6 for pickup") gets margin-top:
    auto so it floats to the bottom of the body, dragging the price row
    with it. Any extra vertical space lands between the description and
    the pill, keeping the call-to-action group locked to the card bottom. */
 .product-body .product-window { margin-top: auto; }
 .product-name {
 font-family: 'Fraunces', serif;
 font-size: 1.4rem;
 font-weight: 600;
 margin-bottom: 0.4rem;
 }
 .product-desc {
 color: var(--soft-ink);
 font-size: 0.9rem;
 margin-bottom: 1rem;
 min-height: 2.5rem;
 }
 .product-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 }
 .product-price {
 font-family: 'Fraunces', serif;
 font-size: 1.6rem;
 font-weight: 700;
 }
 .product-price small {
 font-size: 0.85rem;
 color: var(--soft-ink);
 font-weight: 400;
 }
 .add-btn {
 background: var(--ink);
 color: var(--cream);
 border: none;
 padding: 0.6rem 1.2rem;
 border-radius: 999px;
 cursor: pointer;
 font-weight: 600;
 font-family: 'DM Sans', sans-serif;
 font-size: 0.85rem;
 transition: background 0.2s;
 }
 .add-btn:hover { background: var(--hot-pink); }
 .add-btn.added { background: var(--mint); }

 /* ---------- CUSTOM ---------- */
 #custom { background: var(--ink); color: var(--cream); }
 #custom .section-title { color: var(--cream); }
 #custom .section-title em { color: var(--yellow); }
 #custom .section-eyebrow { color: var(--yellow); }
 #custom .section-sub { color: rgba(255, 248, 240, 0.7); }


 /* ---------- PORTFOLIO GALLERY (in dark Custom Orders section) ---------- */
 .portfolio {
 margin: 0 auto 5rem;
 max-width: 1100px;
 }

 .portfolio-filters {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.5rem;
 margin-bottom: 1.5rem;
 }
 .portfolio-filter {
 background: transparent;
 color: var(--cream);
 border: 1px solid rgba(255, 248, 240, 0.25);
 padding: 0.5rem 1rem;
 border-radius: 999px;
 font-family: 'DM Sans', sans-serif;
 font-weight: 600;
 font-size: 0.85rem;
 cursor: pointer;
 transition: all 0.2s;
 white-space: nowrap;
 }
 .portfolio-filter:hover {
 border-color: var(--yellow);
 color: var(--yellow);
 }
 .portfolio-filter.active {
 background: var(--yellow);
 color: var(--ink);
 border-color: var(--yellow);
 }
 .portfolio-filter-count {
 opacity: 0.6;
 font-weight: 400;
 margin-left: 0.4rem;
 font-size: 0.78rem;
 }
 .portfolio-filter.active .portfolio-filter-count { opacity: 0.7; }

 /* CSS columns give a clean masonry layout that handles photos of any aspect ratio */
 .portfolio-grid {
 column-count: 3;
 column-gap: 1rem;
 }
 .portfolio-tile {
 display: block;
 width: 100%;
 margin: 0 0 1rem 0;
 border-radius: 16px;
 overflow: hidden;
 cursor: pointer;
 border: none;
 background: rgba(255, 248, 240, 0.04);
 padding: 0;
 break-inside: avoid;
 transition: transform 0.25s, box-shadow 0.25s;
 }
 .portfolio-tile:hover {
 transform: translateY(-3px);
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
 }
 .portfolio-tile img {
 width: 100%;
 height: auto;
 display: block;
 }

 @media (max-width: 900px) {
 .portfolio-grid { column-count: 2; column-gap: 0.75rem; }
 .portfolio-tile { margin-bottom: 0.75rem; }
 }
 @media (max-width: 480px) {
 .portfolio-grid { column-count: 1; }
 }

 /* "Show more" button — sits below the masonry grid, lets customers reach
  the contact form quickly while still offering full portfolio depth */
 .portfolio-more-wrap {
 text-align: center;
 margin-top: 1.25rem;
 }
 .portfolio-more-btn {
 background: transparent;
 color: var(--cream);
 border: 1px solid rgba(255, 248, 240, 0.35);
 padding: 0.7rem 1.4rem;
 border-radius: 999px;
 font-family: 'DM Sans', sans-serif;
 font-weight: 600;
 font-size: 0.9rem;
 cursor: pointer;
 transition: all 0.2s;
 }
 .portfolio-more-btn:hover {
 background: var(--yellow);
 color: var(--ink);
 border-color: var(--yellow);
 transform: translateY(-2px);
 }

 /* ---------- LIGHTBOX ---------- */
 .lightbox {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.94);
 z-index: 300;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 2rem;
 cursor: zoom-out;
 }
 .lightbox[hidden] { display: none; }
 .lightbox-content {
 max-width: 100%;
 max-height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1rem;
 cursor: default;
 }
 .lightbox-img {
 max-width: 100%;
 max-height: calc(100vh - 7rem);
 object-fit: contain;
 border-radius: 8px;
 box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
 }
 .lightbox-caption {
 color: rgba(255, 255, 255, 0.85);
 font-family: 'DM Sans', sans-serif;
 font-size: 0.9rem;
 text-align: center;
 max-width: 800px;
 padding: 0 1rem;
 }
 .lightbox-close,
 .lightbox-prev,
 .lightbox-next {
 position: absolute;
 background: rgba(255, 255, 255, 0.12);
 color: white;
 border: none;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s;
 z-index: 1;
 backdrop-filter: blur(4px);
 }
 .lightbox-close { top: 1.5rem; right: 1.5rem; font-size: 1.3rem; }
 .lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
 .lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
 .lightbox-close:hover,
 .lightbox-prev:hover,
 .lightbox-next:hover {
 background: rgba(255, 255, 255, 0.28);
 }
 @media (max-width: 600px) {
 .lightbox { padding: 1rem; }
 .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.6rem; }
 .lightbox-close { width: 40px; height: 40px; top: 1rem; right: 1rem; font-size: 1.1rem; }
 .lightbox-prev { left: 0.5rem; }
 .lightbox-next { right: 0.5rem; }
 }

 .request-box {
 background: var(--cream);
 color: var(--ink);
 border-radius: 32px;
 padding: 3rem;
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 gap: 3rem;
 align-items: start;
 /* When the nav links jump here via #reserve, leave room for the fixed nav. */
 scroll-margin-top: 90px;
 }
 /* Pitch column follows scroll so it stays visible while filling the long form,
    eliminating the dead cream space the form column otherwise leaves on the left.
    Disabled below at the 900px breakpoint where the grid collapses to 1 column. */
 .request-pitch {
 position: sticky;
 top: 6rem;
 }
 .request-pitch h3 {
 font-family: 'Fraunces', serif;
 font-size: 2rem;
 font-weight: 700;
 margin-bottom: 1rem;
 line-height: 1.1;
 }
 .request-pitch p {
 color: var(--soft-ink);
 margin-bottom: 1.5rem;
 }
 .request-pitch-aside { font-size: 0.92rem; }
 .request-pitch .btn-primary {
 margin-right: 0.5rem;
 }
 /* "How it works" steps — fills the empty left column with content that
    earns its place at the moment of payment. White card matches the
    tier-card visual language used in the form. */
 .request-steps {
 list-style: none;
 margin: 2rem 0 1.25rem;
 padding: 1.5rem;
 background: white;
 border: 2px solid #E8DDD4;
 border-radius: 16px;
 display: grid;
 gap: 1.1rem;
 }
 .request-steps li {
 display: grid;
 grid-template-columns: 36px 1fr;
 gap: 0.85rem;
 align-items: start;
 }
 .step-num {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: var(--hot-pink);
 color: white;
 font-family: 'Fraunces', serif;
 font-weight: 700;
 font-size: 1.05rem;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 line-height: 1;
 }
 .step-name {
 font-weight: 700;
 color: var(--ink);
 font-size: 0.97rem;
 line-height: 1.25;
 margin-bottom: 0.2rem;
 }
 .step-desc {
 color: var(--soft-ink);
 font-size: 0.85rem;
 line-height: 1.5;
 }
 /* Reassurance band beneath the steps. Soft yellow tint = the brand's
    "trustworthy / homey" accent without competing with the pink CTA. */
 .request-promise {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 0.75rem;
 align-items: start;
 padding: 0.95rem 1.1rem;
 background: #FFF8E5;
 border: 1px solid #F5E5A3;
 border-radius: 12px;
 color: var(--soft-ink);
 font-size: 0.88rem;
 line-height: 1.5;
 }
 .request-promise strong { color: var(--ink); }
 .request-promise-icon {
 width: 26px;
 height: 26px;
 border-radius: 50%;
 background: var(--yellow);
 color: var(--ink);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 0.85rem;
 flex-shrink: 0;
 }
 .text-link {
 color: var(--ink);
 text-decoration: none;
 font-weight: 600;
 border-bottom: 2px solid var(--yellow);
 padding-bottom: 2px;
 }

 form {
 display: grid;
 gap: 1rem;
 }
 .form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
 }
 label {
 display: block;
 font-size: 0.85rem;
 font-weight: 600;
 margin-bottom: 0.4rem;
 color: var(--soft-ink);
 }
 input, select, textarea {
 width: 100%;
 padding: 0.85rem 1rem;
 border: 2px solid #E8DDD4;
 border-radius: 12px;
 font-family: 'DM Sans', sans-serif;
 font-size: 0.95rem;
 background: white;
 transition: border-color 0.2s;
 }
 input:focus, select:focus, textarea:focus {
 outline: none;
 border-color: var(--hot-pink);
 }
 textarea { resize: vertical; min-height: 100px; }
 input[type="file"] {
 padding: 0.5rem;
 font-size: 0.85rem;
 background: #FFF8F0;
 cursor: pointer;
 }
 input[type="file"]::file-selector-button {
 background: var(--ink);
 color: var(--cream);
 border: none;
 padding: 0.5rem 0.9rem;
 border-radius: 999px;
 font-family: 'DM Sans', sans-serif;
 font-weight: 600;
 font-size: 0.82rem;
 cursor: pointer;
 margin-right: 0.6rem;
 }
 .label-hint {
 color: var(--soft-ink);
 font-weight: 400;
 font-size: 0.78rem;
 }
 .photo-preview {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin-top: 0.5rem;
 }
 .photo-preview img {
 width: 64px;
 height: 64px;
 object-fit: cover;
 border-radius: 10px;
 border: 2px solid #E8DDD4;
 }
 .form-error {
 background: #FFE4E8;
 color: #B91C3D;
 padding: 0.7rem 0.9rem;
 border-radius: 10px;
 font-size: 0.88rem;
 line-height: 1.4;
 }

 /* ---------- CUSTOM TIER PICKER (paid custom orders) ---------- */
 /* Lives inside the custom-order form. Two cards (Signature / Showstopper),
    a 1–10 dozens stepper, and a live total. Tier change OR qty change
    triggers a recalc of #reqTotal and the Pay & Reserve button label. */
 .tier-picker {
 background: #FFF8F0;
 border: 1px solid #F0E2D2;
 border-radius: 16px;
 padding: 1.25rem;
 display: grid;
 gap: 1rem;
 }
 .tier-picker-heading { display: grid; gap: 0.25rem; }
 .tier-picker-label {
 font-family: 'Fraunces', serif;
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--ink);
 margin: 0;
 }
 .tier-picker-hint {
 color: var(--soft-ink);
 font-size: 0.82rem;
 line-height: 1.45;
 }
 .tier-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.75rem;
 }
 .tier-card {
 position: relative;
 background: white;
 border: 2px solid #E8DDD4;
 border-radius: 14px;
 padding: 0.85rem;
 cursor: pointer;
 display: grid;
 grid-template-columns: 88px 1fr;
 gap: 0.85rem;
 align-items: start;
 transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
 }
 .tier-card:hover { border-color: #D9C9B8; }
 .tier-card.is-selected {
 border-color: var(--hot-pink);
 background: #FFF5F8;
 box-shadow: 0 6px 18px rgba(255, 59, 127, 0.12);
 }
 /* The native radio is hidden; the whole card is the click target. */
 .tier-radio {
 position: absolute;
 opacity: 0;
 pointer-events: none;
 width: 1px;
 height: 1px;
 }
 /* Tier thumb is a <button> so it's keyboard-focusable and opens a lightbox.
    Reset all native button styling, then style as a clickable image tile. */
 .tier-card-thumb {
 width: 88px;
 height: 88px;
 border-radius: 10px;
 overflow: hidden;
 background: #FFF8F0;
 padding: 0;
 border: 0;
 cursor: zoom-in;
 position: relative;
 display: block;
 }
 .tier-card-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 0.25s ease;
 }
 .tier-card-thumb:hover img,
 .tier-card-thumb:focus-visible img { transform: scale(1.06); }
 /* Subtle zoom-in cue, only visible on hover/focus to keep the card clean. */
 .tier-card-thumb-zoom {
 position: absolute;
 right: 4px;
 bottom: 4px;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: rgba(42, 26, 46, 0.78);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.75rem;
 line-height: 1;
 opacity: 0;
 transition: opacity 0.15s ease;
 pointer-events: none;
 }
 .tier-card-thumb:hover .tier-card-thumb-zoom,
 .tier-card-thumb:focus-visible .tier-card-thumb-zoom { opacity: 1; }
 .tier-card-thumb:focus-visible {
 outline: 2px solid var(--hot-pink);
 outline-offset: 2px;
 }
 .tier-card-body { display: grid; gap: 0.15rem; min-width: 0; }
 .tier-card-name {
 font-family: 'Fraunces', serif;
 font-size: 1rem;
 font-weight: 700;
 color: var(--ink);
 line-height: 1.2;
 }
 .tier-card-price {
 font-family: 'Fraunces', serif;
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--hot-pink);
 line-height: 1;
 margin: 0.15rem 0 0.35rem;
 }
 .tier-card-unit {
 font-size: 0.7rem;
 font-weight: 600;
 color: var(--soft-ink);
 margin-left: 0.15rem;
 }
 .tier-card-desc {
 color: var(--soft-ink);
 font-size: 0.8rem;
 line-height: 1.4;
 }
 .tier-card-desc strong { color: var(--ink); }

 .tier-qty-row {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 flex-wrap: wrap;
 padding-top: 0.25rem;
 }
 .tier-qty-label {
 font-size: 0.95rem;
 font-weight: 600;
 margin: 0;
 color: var(--ink);
 }
 .tier-qty-stepper {
 display: inline-flex;
 align-items: center;
 background: white;
 border: 2px solid #E8DDD4;
 border-radius: 12px;
 overflow: hidden;
 }
 .tier-qty-btn {
 width: 40px;
 height: 40px;
 border: none;
 background: transparent;
 font-size: 1.3rem;
 font-weight: 700;
 color: var(--ink);
 cursor: pointer;
 transition: background 0.15s;
 padding: 0;
 line-height: 1;
 }
 .tier-qty-btn:hover:not(:disabled) { background: rgba(42, 26, 46, 0.05); }
 .tier-qty-btn:disabled { color: #C0B8C8; cursor: not-allowed; }
 .tier-qty-stepper input {
 width: 56px;
 border: none;
 border-left: 1px solid #E8DDD4;
 border-right: 1px solid #E8DDD4;
 border-radius: 0;
 text-align: center;
 font-size: 1rem;
 font-weight: 700;
 color: var(--ink);
 padding: 0.5rem 0;
 background: white;
 -moz-appearance: textfield;
 }
 .tier-qty-stepper input::-webkit-outer-spin-button,
 .tier-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 .tier-qty-stepper input:focus { outline: none; }
 .tier-total-row {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 padding-top: 0.85rem;
 border-top: 1px dashed #F0E2D2;
 }
 .tier-total-label {
 font-family: 'DM Sans', sans-serif;
 font-size: 0.85rem;
 font-weight: 700;
 color: var(--soft-ink);
 letter-spacing: 0.06em;
 text-transform: uppercase;
 }
 .tier-total-amount {
 font-family: 'Fraunces', serif;
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--ink);
 line-height: 1;
 }

 @media (max-width: 600px) {
 .tier-grid { grid-template-columns: 1fr; }
 .tier-card { grid-template-columns: 72px 1fr; gap: 0.7rem; padding: 0.75rem; }
 .tier-card-thumb { width: 72px; height: 72px; }
 .tier-card-price { font-size: 1.15rem; }
 .tier-total-amount { font-size: 1.5rem; }
 }

 /* ---------- CUSTOM ADD-ONS PICKER ---------- */
 /* Lives below the tier picker in the custom-order form. Three optional
    add-ons (cake pops with flavor dropdown, rice krispies, pretzel rods).
    Selected add-ons reveal their qty stepper and contribute to the total. */
 .addons-picker {
 background: #FFF8F0;
 border: 1px solid #F0E2D2;
 border-radius: 16px;
 padding: 1.25rem;
 display: grid;
 gap: 0.75rem;
 }
 .addons-picker-heading { display: grid; gap: 0.25rem; }
 .addons-picker-label {
 font-family: 'Fraunces', serif;
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--ink);
 }
 .addons-picker-hint {
 color: var(--soft-ink);
 font-size: 0.85rem;
 font-weight: 400;
 font-family: 'DM Sans', sans-serif;
 font-style: italic;
 margin-left: 0.25rem;
 }
 .addon-row {
 background: white;
 border: 2px solid #E8DDD4;
 border-radius: 14px;
 padding: 0.85rem 1rem;
 display: grid;
 grid-template-columns: 64px 1fr;
 gap: 0.85rem;
 align-items: start;
 transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
 }
 /* Inner column that holds the toggle row + qty controls so they stack
    vertically next to the thumbnail, instead of all 3 stacking row-style. */
 .addon-row-body {
 display: grid;
 gap: 0.7rem;
 min-width: 0;
 }
 /* Add-on thumbnail. Same lightbox behavior as the tier-card-thumb but a bit
    smaller so the row stays compact. Reuses the .tier-card-thumb-zoom hover hint. */
 .addon-thumb {
 width: 64px;
 height: 64px;
 border-radius: 10px;
 overflow: hidden;
 background: #FFF8F0;
 padding: 0;
 border: 0;
 cursor: zoom-in;
 position: relative;
 display: block;
 flex-shrink: 0;
 }
 .addon-thumb img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 padding: 0.25rem;
 box-sizing: border-box;
 display: block;
 transition: transform 0.25s ease;
 }
 .addon-thumb:hover img,
 .addon-thumb:focus-visible img { transform: scale(1.06); }
 .addon-thumb:hover .tier-card-thumb-zoom,
 .addon-thumb:focus-visible .tier-card-thumb-zoom { opacity: 1; }
 .addon-thumb:focus-visible {
 outline: 2px solid var(--hot-pink);
 outline-offset: 2px;
 }
 .addon-row.is-active {
 border-color: var(--hot-pink);
 background: #FFF5F8;
 box-shadow: 0 4px 14px rgba(255, 59, 127, 0.10);
 }
 .addon-toggle {
 display: flex;
 align-items: center;
 gap: 0.7rem;
 cursor: pointer;
 margin: 0;
 }
 .addon-check {
 width: 20px;
 height: 20px;
 accent-color: var(--hot-pink);
 margin: 0;
 flex-shrink: 0;
 cursor: pointer;
 }
 .addon-name {
 font-family: 'DM Sans', sans-serif;
 font-weight: 600;
 font-size: 0.95rem;
 color: var(--ink);
 flex: 1;
 }
 .addon-price {
 font-family: 'Fraunces', serif;
 font-size: 1rem;
 font-weight: 700;
 color: var(--hot-pink);
 white-space: nowrap;
 }
 .addon-controls {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 flex-wrap: wrap;
 padding-left: 1.7rem; /* aligns with text past the checkbox */
 }
 .addon-flavor {
 flex: 1;
 min-width: 140px;
 width: auto;
 padding: 0.6rem 0.8rem;
 font-size: 0.9rem;
 }
 .addon-qty-input {
 /* Inherits from .tier-qty-stepper input — but we add data-key marker
    so JS can target add-on inputs distinctly from the tier dozens input. */
 }

 @media (max-width: 600px) {
 .addon-controls { padding-left: 0; }
 .addon-flavor { min-width: 0; flex: 1 1 100%; }
 }

 /* ---------- ABOUT STRIP ---------- */
 #about {
 background: var(--blush);
 padding: 5rem 2rem;
 }
 .about-inner {
 max-width: 1100px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1.4fr;
 gap: 3rem;
 align-items: center;
 }
 .about-photo {
 aspect-ratio: 1;
 background: linear-gradient(135deg, var(--pink), var(--hot-pink));
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 20px 60px rgba(255, 59, 127, 0.25);
 position: relative;
 padding: 8px; /* creates a pink-gradient ring around the photo */
 }
 .about-photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 50%;
 display: block;
 }
 .about-photo::after {
 content: '✨';
 position: absolute;
 top: -10px;
 right: 20px;
 font-size: 3rem;
 animation: twinkle 2s ease-in-out infinite;
 }
 @keyframes twinkle {
 0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
 50% { transform: scale(1.2) rotate(15deg); opacity: 0.7; }
 }
 .about-text h2 {
 font-family: 'Fraunces', serif;
 font-size: 2.6rem;
 font-weight: 800;
 margin-bottom: 1rem;
 line-height: 1.05;
 }
 .about-text h2 em {
 font-style: italic;
 color: var(--hot-pink);
 font-weight: 400;
 }
 .about-text p {
 color: var(--soft-ink);
 margin-bottom: 1rem;
 font-size: 1.05rem;
 }
 .signature {
 font-family: 'Caveat', cursive;
 font-size: 2rem;
 color: var(--hot-pink);
 margin-top: 1rem;
 }
 /* Two-CTA pair under Maddie's signature: re-engages visitors who scrolled
    here looking for a next step instead of forcing a scroll back to nav. */
 .about-ctas {
 display: flex;
 gap: 0.85rem;
 flex-wrap: wrap;
 margin-top: 1.5rem;
 }

 /* ---------- REVIEWS ---------- */
 .reviews-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 1.5rem;
 }
 .review-card {
 background: white;
 border-radius: 24px;
 padding: 2rem;
 border: 2px solid #F5E8DC;
 position: relative;
 }
 .review-card::before {
 content: '"';
 position: absolute;
 top: -10px;
 left: 20px;
 font-family: 'Fraunces', serif;
 font-size: 5rem;
 color: var(--hot-pink);
 line-height: 1;
 }
 .review-stars {
 color: var(--yellow);
 margin-bottom: 0.8rem;
 font-size: 1.1rem;
 letter-spacing: 2px;
 }
 .review-text {
 color: var(--ink);
 margin-bottom: 1.2rem;
 font-style: italic;
 }
 .review-author {
 font-weight: 700;
 font-size: 0.95rem;
 }
 .review-date {
 color: var(--soft-ink);
 font-size: 0.8rem;
 }

 /* ---------- FAQ ---------- */
 #faq {
 background: linear-gradient(180deg, var(--cream) 0%, #FFF0F5 100%);
 }
 .faq-list {
 max-width: 760px;
 margin: 0 auto;
 display: grid;
 gap: 1rem;
 }
 .faq-item {
 background: white;
 border-radius: 20px;
 border: 2px solid transparent;
 overflow: hidden;
 transition: border-color 0.2s, box-shadow 0.2s;
 }
 .faq-item:hover {
 border-color: var(--blush);
 }
 .faq-item[open] {
 border-color: var(--blush);
 box-shadow: 0 8px 30px rgba(255, 107, 157, 0.1);
 }
 .faq-q {
 padding: 1.4rem 1.8rem;
 cursor: pointer;
 list-style: none;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 1rem;
 font-family: 'Fraunces', serif;
 font-size: 1.15rem;
 font-weight: 600;
 color: var(--ink);
 }
 .faq-q::-webkit-details-marker { display: none; }
 .faq-toggle {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--blush);
 color: var(--hot-pink);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 1.2rem;
 flex-shrink: 0;
 transition: transform 0.3s;
 }
 .faq-item[open] .faq-toggle {
 transform: rotate(45deg);
 background: var(--hot-pink);
 color: white;
 }
 .faq-a {
 padding: 0 1.8rem 1.6rem;
 color: var(--soft-ink);
 line-height: 1.6;
 font-size: 1rem;
 }
 .faq-a strong { color: var(--ink); }

 /* ---------- FOOTER ---------- */
 footer {
 background: var(--ink);
 color: var(--cream);
 padding: 4rem 2rem 2rem;
 }
 .footer-inner {
 max-width: 1300px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr;
 gap: 3rem;
 margin-bottom: 3rem;
 }
 .footer-logo {
 font-family: 'Caveat', cursive;
 font-size: 2.5rem;
 margin-bottom: 1rem;
 }
 .footer-logo span { color: var(--pink); }
 .footer-tagline {
 color: rgba(255, 248, 240, 0.6);
 margin-bottom: 1.5rem;
 max-width: 320px;
 }
 .social-links {
 display: flex;
 gap: 1rem;
 }
 .social-link {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: rgba(255, 248, 240, 0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--cream);
 text-decoration: none;
 transition: background 0.2s;
 }
 .social-link:hover { background: var(--hot-pink); }
 .footer-col h4 {
 font-family: 'Fraunces', serif;
 margin-bottom: 1rem;
 font-size: 1.1rem;
 }
 .footer-col ul { list-style: none; }
 .footer-col li { margin-bottom: 0.5rem; }
 .footer-col a {
 color: rgba(255, 248, 240, 0.7);
 text-decoration: none;
 font-size: 0.9rem;
 }
 .footer-col a:hover { color: var(--pink); }
 .footer-bottom {
 border-top: 1px solid rgba(255, 248, 240, 0.1);
 padding-top: 2rem;
 text-align: center;
 color: rgba(255, 248, 240, 0.5);
 font-size: 0.85rem;
 }

 /* ---------- CART DRAWER ---------- */
 .cart-drawer {
 position: fixed;
 top: 0;
 /* Use translateX off-screen instead of negative `right` so the drawer never
    extends the document beyond viewport width (which can cause iOS Safari
    horizontal-overflow issues). transform doesn't affect layout. */
 right: 0;
 transform: translateX(100%);
 width: 400px;
 max-width: 90vw;
 height: 100vh;
 background: var(--cream);
 box-shadow: -10px 0 40px rgba(0,0,0,0.15);
 z-index: 200;
 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 display: flex;
 flex-direction: column;
 }
 .cart-drawer.open { transform: translateX(0); }
 .cart-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.4);
 z-index: 199;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s;
 }
 .cart-overlay.open { opacity: 1; pointer-events: all; }
 .cart-header {
 padding: 1.5rem 2rem;
 border-bottom: 1px solid #E8DDD4;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .cart-header h3 {
 font-family: 'Fraunces', serif;
 font-size: 1.6rem;
 }
 .close-cart {
 background: none;
 border: none;
 font-size: 1.5rem;
 cursor: pointer;
 color: var(--ink);
 }
 .cart-items {
 flex: 1;
 overflow-y: auto;
 padding: 1.5rem 2rem;
 }
 .cart-empty {
 text-align: center;
 color: var(--soft-ink);
 padding: 3rem 0;
 }
 .cart-empty-icon {
 font-size: 4rem;
 margin-bottom: 1rem;
 }
 .cart-group {
 background: white;
 border-radius: 18px;
 padding: 1rem 1.1rem 1.1rem;
 margin-bottom: 1.25rem;
 border: 1px solid #F0E2D2;
 box-shadow: 0 2px 10px rgba(42, 26, 46, 0.04);
 }
 .cart-group:last-child { margin-bottom: 0.5rem; }
 .cart-group-header {
 padding-bottom: 0.6rem;
 margin-bottom: 0.4rem;
 border-bottom: 1px dashed #EFE0CE;
 }
 .cart-group-title {
 font-family: 'Fraunces', serif;
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--ink);
 }
 .cart-group-range {
 font-size: 0.8rem;
 color: var(--soft-ink);
 margin-top: 0.15rem;
 }
 .cart-group-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.75rem;
 margin-top: 0.8rem;
 padding-top: 0.8rem;
 border-top: 1px dashed #EFE0CE;
 flex-wrap: wrap;
 }
 .cart-group-subtotal {
 font-size: 0.95rem;
 color: var(--soft-ink);
 }
 .cart-group-subtotal strong {
 font-family: 'Fraunces', serif;
 font-size: 1.15rem;
 color: var(--ink);
 margin-left: 0.25rem;
 }
 .checkout-group-btn {
 background: var(--hot-pink);
 color: white;
 border: none;
 padding: 0.7rem 1.2rem;
 border-radius: 999px;
 font-family: 'DM Sans', sans-serif;
 font-weight: 700;
 font-size: 0.85rem;
 cursor: pointer;
 box-shadow: 0 6px 18px var(--shadow);
 transition: transform 0.2s;
 }
 .checkout-group-btn:hover { transform: translateY(-2px); }

 .cart-item {
 display: flex;
 gap: 1rem;
 padding: 0.7rem 0;
 border-bottom: 1px solid #F5E8DC;
 }
 .cart-item:last-of-type { border-bottom: none; }
 .cart-item-img {
 width: 60px;
 height: 60px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.8rem;
 flex-shrink: 0;
 }
 .cart-item-info { flex: 1; }
 .cart-item-name { font-weight: 600; margin-bottom: 0.2rem; font-size: 0.95rem; }
 .cart-item-price { color: var(--soft-ink); font-size: 0.85rem; }
 .qty-controls {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin-top: 0.4rem;
 }
 .qty-btn {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 border: 1px solid #E8DDD4;
 background: white;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 }
 .qty-num { font-size: 0.9rem; min-width: 20px; text-align: center; }
 .cart-footer {
 padding: 1.5rem 2rem;
 border-top: 1px solid #E8DDD4;
 background: white;
 }
 .cart-total {
 display: flex;
 justify-content: space-between;
 margin-bottom: 1rem;
 font-size: 1.2rem;
 font-weight: 700;
 }
 .checkout-btn {
 width: 100%;
 background: var(--hot-pink);
 color: white;
 border: none;
 padding: 1rem;
 border-radius: 999px;
 font-weight: 700;
 font-size: 1rem;
 cursor: pointer;
 font-family: 'DM Sans', sans-serif;
 box-shadow: 0 8px 24px var(--shadow);
 }
 .checkout-note {
 text-align: center;
 color: var(--soft-ink);
 font-size: 0.8rem;
 margin-top: 0.8rem;
 }

 /* ---------- FLAVOR PICKER MODAL ---------- */
 .flavor-modal {
 position: fixed;
 inset: 0;
 background: rgba(42, 26, 46, 0.6);
 backdrop-filter: blur(8px);
 z-index: 250;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 }
 .flavor-modal.open { display: flex; }
 .flavor-box {
 background: var(--cream);
 border-radius: 28px;
 padding: 2.5rem 2rem;
 max-width: 480px;
 width: 100%;
 text-align: center;
 box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
 }
 .flavor-box h3 {
 font-family: 'Fraunces', serif;
 font-size: 1.8rem;
 margin-bottom: 0.4rem;
 }
 .flavor-box .flavor-sub {
 color: var(--soft-ink);
 margin-bottom: 1.5rem;
 font-size: 0.95rem;
 }
 .flavor-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.7rem;
 margin-bottom: 1.5rem;
 }
 .flavor-chip {
 padding: 0.85rem 1rem;
 border: 2px solid #E8DDD4;
 border-radius: 14px;
 background: white;
 cursor: pointer;
 font-family: 'DM Sans', sans-serif;
 font-weight: 600;
 color: var(--ink);
 transition: all 0.2s;
 font-size: 0.95rem;
 }
 .flavor-chip:hover {
 border-color: var(--hot-pink);
 transform: translateY(-2px);
 }
 .flavor-chip.selected {
 background: var(--hot-pink);
 color: white;
 border-color: var(--hot-pink);
 }
 .flavor-actions {
 display: flex;
 gap: 0.75rem;
 justify-content: center;
 }
 .flavor-cancel {
 background: transparent;
 border: 2px solid var(--ink);
 color: var(--ink);
 padding: 0.85rem 1.5rem;
 border-radius: 999px;
 cursor: pointer;
 font-weight: 600;
 font-family: 'DM Sans', sans-serif;
 }
 .flavor-confirm {
 background: var(--hot-pink);
 color: white;
 border: none;
 padding: 0.85rem 1.8rem;
 border-radius: 999px;
 cursor: pointer;
 font-weight: 600;
 font-family: 'DM Sans', sans-serif;
 box-shadow: 0 8px 24px var(--shadow);
 }
 .flavor-confirm:disabled {
 background: #C0B8C8;
 cursor: not-allowed;
 box-shadow: none;
 }

 /* ---------- CHECKOUT MODAL ---------- */
 .checkout-modal {
 position: fixed;
 inset: 0;
 z-index: 260;
 display: none;
 align-items: flex-start;
 justify-content: center;
 padding: 2rem 1rem;
 overflow-y: auto;
 }
 .checkout-modal.open { display: flex; }
 .checkout-overlay {
 position: fixed;
 inset: 0;
 background: rgba(42, 26, 46, 0.55);
 backdrop-filter: blur(6px);
 z-index: -1;
 }
 .checkout-box {
 background: var(--cream);
 border-radius: 28px;
 padding: 2rem 2rem 1.5rem;
 max-width: 560px;
 width: 100%;
 box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
 position: relative;
 margin: auto;
 }
 .checkout-close {
 position: absolute;
 top: 1rem;
 right: 1rem;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: rgba(42, 26, 46, 0.06);
 border: none;
 cursor: pointer;
 font-size: 1rem;
 color: var(--ink);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s;
 }
 .checkout-close:hover { background: rgba(42, 26, 46, 0.12); }

 .checkout-banner {
 background: var(--yellow);
 color: var(--ink);
 padding: 0.6rem 0.9rem;
 border-radius: 12px;
 font-size: 0.82rem;
 margin-bottom: 1.2rem;
 text-align: center;
 }
 .checkout-banner strong { font-family: 'DM Sans', monospace; letter-spacing: 0.04em; }

 .checkout-eyebrow {
 font-family: 'Caveat', cursive;
 font-size: 1.2rem;
 color: var(--hot-pink);
 line-height: 1;
 }
 .checkout-title {
 font-family: 'Fraunces', serif;
 font-size: 1.6rem;
 font-weight: 700;
 margin: 0.2rem 0 0.15rem;
 color: var(--ink);
 }
 .checkout-pickup-range {
 color: var(--soft-ink);
 font-size: 0.9rem;
 margin-bottom: 1.2rem;
 }

 .checkout-summary {
 background: white;
 border: 1px solid #F0E2D2;
 border-radius: 14px;
 padding: 0.85rem 1rem;
 margin-bottom: 1.4rem;
 }
 .checkout-summary-row {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 padding: 0.3rem 0;
 font-size: 0.92rem;
 color: var(--ink);
 }
 .checkout-summary-row + .checkout-summary-row { border-top: 1px dashed #F0E2D2; }
 .checkout-summary-row .item-qty { color: var(--soft-ink); }

 .checkout-section-title {
 font-family: 'Fraunces', serif;
 font-size: 1rem;
 font-weight: 700;
 margin: 1rem 0 0.6rem;
 color: var(--ink);
 }

 .checkout-card-container {
 background: white;
 border: 2px solid #E8DDD4;
 border-radius: 12px;
 padding: 0.85rem 1rem;
 min-height: 56px;
 transition: border-color 0.2s;
 }
 .checkout-card-container.is-focused { border-color: var(--hot-pink); }

 /* Wallet payment methods (Apple Pay, Google Pay) */
 .checkout-wallets {
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
 margin-bottom: 0.5rem;
 }
 .checkout-wallets > button:not([hidden]),
 .checkout-wallets > div:not([hidden]) { width: 100%; }

 /* Apple Pay button — Safari renders this via the -apple-pay-button
  appearance pseudo-element. Other browsers see nothing useful, which
  is fine because we hide the button via JS unless Square confirms
  Apple Pay is available on this device. */
 .apple-pay-button {
 -webkit-appearance: -apple-pay-button;
 -apple-pay-button-type: pay;
 -apple-pay-button-style: black;
 display: block;
 width: 100%;
 height: 48px;
 border-radius: 12px;
 border: none;
 cursor: pointer;
 padding: 0;
 background: transparent;
 }

 /* Google Pay container — Square's SDK renders the official Google Pay
  button into this div. We just give it the right size/border-radius. */
 .google-pay-button {
 width: 100%;
 min-height: 48px;
 border-radius: 12px;
 overflow: hidden;
 }
 .google-pay-button > div { border-radius: 12px !important; }

 .checkout-wallet-divider {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin: 0.6rem 0;
 color: var(--soft-ink);
 font-size: 0.82rem;
 }
 .checkout-wallet-divider::before,
 .checkout-wallet-divider::after {
 content: '';
 flex: 1;
 height: 1px;
 background: #E8DDD4;
 }

 .checkout-error {
 background: #FFE4E8;
 color: #B91C3D;
 padding: 0.7rem 0.9rem;
 border-radius: 10px;
 font-size: 0.88rem;
 margin-top: 0.8rem;
 line-height: 1.4;
 }

 .checkout-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 margin-top: 1.4rem;
 padding-top: 1.2rem;
 border-top: 1px dashed #EFE0CE;
 flex-wrap: wrap;
 }
 .checkout-total-row {
 font-family: 'DM Sans', sans-serif;
 font-size: 0.95rem;
 color: var(--soft-ink);
 }
 .checkout-total-row strong {
 font-family: 'Fraunces', serif;
 font-size: 1.5rem;
 color: var(--ink);
 margin-left: 0.4rem;
 }
 .checkout-pay-btn {
 background: var(--hot-pink);
 color: white;
 border: none;
 padding: 0.95rem 1.6rem;
 border-radius: 999px;
 font-family: 'DM Sans', sans-serif;
 font-weight: 700;
 font-size: 0.95rem;
 cursor: pointer;
 box-shadow: 0 8px 24px var(--shadow);
 transition: transform 0.2s, opacity 0.2s;
 min-width: 140px;
 }
 .checkout-pay-btn:hover:not(:disabled) { transform: translateY(-2px); }
 .checkout-pay-btn:disabled {
 background: #C0B8C8;
 cursor: not-allowed;
 box-shadow: none;
 opacity: 0.7;
 }
 .checkout-pay-btn.is-loading .pay-btn-label::after {
 content: ' ···';
 }

 .checkout-secure-note {
 text-align: center;
 color: var(--soft-ink);
 font-size: 0.78rem;
 margin-top: 1rem;
 line-height: 1.4;
 }

 /* Success state */
 .checkout-success-view {
 text-align: center;
 padding: 1rem 0;
 }
 .checkout-success-icon {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 background: var(--mint);
 color: white;
 font-size: 2.4rem;
 line-height: 72px;
 margin: 0.5rem auto 1.2rem;
 box-shadow: 0 12px 32px rgba(107, 203, 119, 0.3);
 }
 .checkout-success-view h3 {
 font-family: 'Fraunces', serif;
 font-size: 1.8rem;
 margin-bottom: 0.6rem;
 color: var(--ink);
 }
 .checkout-success-msg {
 color: var(--soft-ink);
 margin-bottom: 0.8rem;
 line-height: 1.5;
 }
 .checkout-success-meta {
 color: var(--soft-ink);
 font-size: 0.82rem;
 margin-bottom: 1.5rem;
 }
 .checkout-success-meta code {
 font-family: 'DM Sans', monospace;
 background: rgba(42, 26, 46, 0.06);
 padding: 0.15rem 0.5rem;
 border-radius: 6px;
 font-size: 0.78rem;
 letter-spacing: 0.02em;
 }
 .checkout-success-sandbox-note {
 background: #FFF8DC;
 border: 1px solid #F5E6A3;
 color: #6B5500;
 padding: 0.75rem 1rem;
 border-radius: 12px;
 font-size: 0.82rem;
 line-height: 1.5;
 margin-bottom: 1.2rem;
 text-align: left;
 }
 .checkout-success-sandbox-note a {
 color: #6B5500;
 font-weight: 700;
 text-decoration: underline;
 }
 .checkout-success-actions {
 display: flex;
 gap: 0.75rem;
 justify-content: center;
 flex-wrap: wrap;
 }

 /* Shown only on the custom-order success view when the server reports
    that Maddie's notification email failed. Tells the customer the
    payment is safe and asks them to text the order ID directly. */
 .custom-success-fallback {
 background: #FFF8DC;
 border: 1px solid #F5E6A3;
 color: #6B5500;
 padding: 0.75rem 1rem;
 border-radius: 12px;
 font-size: 0.85rem;
 line-height: 1.5;
 text-align: left;
 margin-bottom: 1.2rem;
 }
 .custom-success-fallback a {
 color: #6B5500;
 font-weight: 700;
 text-decoration: underline;
 }

 @media (max-width: 600px) {
 .checkout-modal { padding: 0; }
 .checkout-box {
 border-radius: 0;
 padding: 1.5rem 1.25rem;
 max-width: none;
 min-height: 100vh;
 }
 .checkout-foot { flex-direction: column; align-items: stretch; }
 .checkout-pay-btn { width: 100%; }
 }

 /* ---------- TOAST ---------- */
 .toast {
 position: fixed;
 bottom: 30px;
 left: 50%;
 transform: translateX(-50%) translateY(100px);
 background: var(--ink);
 color: var(--cream);
 padding: 1rem 1.5rem;
 border-radius: 999px;
 font-weight: 600;
 z-index: 300;
 transition: transform 0.3s;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .toast.show { transform: translateX(-50%) translateY(0); }

 /* ---------- RESPONSIVE ---------- */
 @media (max-width: 900px) {
 .hero-inner, .request-box, .about-inner, .footer-inner {
 grid-template-columns: 1fr;
 }
 .hero { padding: 3rem 1.5rem 4rem; }
 .hero h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); }
 .hero p { font-size: 1.05rem; }
 .hero-collage { height: 320px; }
 .tile-1 { width: 180px; height: 180px; }
 .tile-2 { width: 150px; height: 200px; }
 .tile-3 { width: 160px; height: 160px; }
 .tile-4 { width: 120px; height: 120px; }
 .cookie-emoji { font-size: 3.5rem; }

 nav { padding: 0.85rem 1.25rem; }
 .hamburger { display: flex; }
 .nav-links {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 flex-direction: column;
 gap: 0;
 background: var(--cream);
 padding: 0.5rem 1.5rem;
 border-bottom: 1px solid rgba(42, 26, 46, 0.06);
 box-shadow: 0 12px 32px rgba(42, 26, 46, 0.08);
 }
 .nav-links.open { display: flex; }
 .nav-links li { border-bottom: 1px solid rgba(42, 26, 46, 0.06); }
 .nav-links li:last-child { border-bottom: none; }
 .nav-links a {
 display: block;
 padding: 1rem 0;
 font-size: 1rem;
 min-height: 44px;
 }

 section { padding: 4rem 1.5rem; }
 .section-header { margin-bottom: 2.5rem; }
 .form-row { grid-template-columns: 1fr; }
 .request-box { padding: 2rem 1.5rem; }
 .request-pitch { position: static; top: auto; }
 .about-photo { max-width: 240px; margin: 0 auto; }
 .about-text h2 { font-size: 2rem; }

 .footer-inner { gap: 2rem; margin-bottom: 2rem; }
 footer { padding: 3rem 1.5rem 1.5rem; }

 .qty-btn { width: 32px; height: 32px; }
 .cart-drawer { width: 100vw; max-width: 100vw; }
 .cart-header, .cart-items, .cart-footer { padding-left: 1.5rem; padding-right: 1.5rem; }

 .flavor-box { padding: 2rem 1.5rem; }
 .flavor-grid { grid-template-columns: 1fr; }
 }

 @media (max-width: 480px) {
 .cart-btn-label { display: none; }
 .cart-btn { padding: 0.6rem 0.9rem; }
 .logo { font-size: 1.7rem; }
 .hero-ctas .btn { width: 100%; justify-content: center; }
 }

 @media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.001ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.001ms !important;
 scroll-behavior: auto !important;
 }
 }