/* Variant 4 — "Cottage Kitchen": warm linen, gingham, handwritten notes, oven steam */
:root {
  --linen: #fdf9f3;
  --linen-2: #f2e8dc;
  --brown: #6b4a3a;
  --brown-deep: #503425;
  --butter: #f0d9a8;
}

/* The whole pink family derives from the brand pink (Chloe's cart, #E5427B — review Oct 12),
   so the admin color picker and the holiday themes below recolor everything at once. */
body.v-cottage {
  --rose: var(--brand-pink, #E5427B);
  --rose-deep: color-mix(in srgb, var(--rose) 82%, #2b0613);
  --rose-soft: color-mix(in srgb, var(--rose) 16%, #fff);
  --rose-tint: color-mix(in srgb, var(--rose) 14%, transparent);
  --logo-accent: var(--rose);
  --nav-bg: rgba(251, 232, 166, 0.96);   /* butter yellow */
  --nav-border: #ecd28a;
  --nav-ink: var(--brown);
  --nav-logo: var(--brown-deep);
}

/* bakery doodles (hero + down both sides of the page): flower + rolling pin, matching the logo.
   Each holiday theme swaps --doodle-a / --doodle-b below. */
body.v-cottage {
  --doodle-a-ink: var(--rose-deep);
  --doodle-b-ink: var(--brown);
  --doodle-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Cpath d='M50 36 C 62 33 66 47 55 52 M50 36 C 38 33 34 47 45 52 M45 52 C 47 58 53 58 55 52'/%3E%3Cpath d='M50 22 C 72 18 82 42 66 56 C 76 68 60 82 48 74 C 34 82 20 68 30 56 C 16 46 28 24 44 28'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' transform='rotate(-20 50 50)'%3E%3Crect x='22' y='42' width='56' height='16' rx='8'/%3E%3Crect x='8' y='45' width='11' height='10' rx='5'/%3E%3Crect x='81' y='45' width='11' height='10' rx='5'/%3E%3Cpath d='M30 47 H 70 M30 53 H 70' stroke-width='1.4' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
}

body.v-cottage {
  font-family: 'Lora', Georgia, serif;
  color: var(--brown);
  background: var(--linen);
}
.v-cottage h1, .v-cottage h2, .v-cottage h3 { font-family: 'Lora', Georgia, serif; font-weight: 600; }
.v-cottage h2 { font-size: 2.2rem; margin: 0 0 10px; color: var(--brown-deep); }
.v-cottage .section-head p { font-family: 'Caveat', cursive; font-size: 1.35rem; color: var(--rose-deep); opacity: 1; }

/* awning banner — flat high-contrast pink with a scalloped ruffle (from Retro Bakeshop) */
.v-cottage .announce {
  position: relative;
  z-index: 60;
  background: var(--rose);
  color: #fff;
  font-weight: 600;
  font-family: 'Lora', serif;
  letter-spacing: 0.02em;
  padding: 12px 16px 13px;
}
.v-cottage .announce strong { color: #ffeec9; }
.v-cottage .announce::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 13px;
  background: radial-gradient(circle at 50% 0, var(--rose) 71%, transparent 72%) 0 0 / 26px 13px repeat-x;
  transform: translateY(100%);
  pointer-events: none;
}
.v-cottage #special-notice { padding-top: 24px; }
.v-cottage .nav { background: var(--nav-bg); backdrop-filter: blur(6px); border-bottom: 2px solid var(--nav-border); }
.v-cottage .nav .logo-svg { height: 62px; color: var(--nav-logo); }
.v-cottage .nav-links a { color: var(--nav-ink); }
.v-cottage .nav-links a:hover { color: var(--nav-hover, var(--rose-deep)); }

/* Every button follows the theme color, a shade darker on hover (review Oct 12). The PayPal / Venmo /
   Cash App / Stripe buttons keep their own brand colors. */
.v-cottage .btn-primary, .v-cottage .cart-button { background: var(--rose); color: #fff; text-decoration: none; }
.v-cottage .btn-primary:hover, .v-cottage .cart-button:hover { background: var(--rose-deep); box-shadow: 0 8px 20px color-mix(in srgb, var(--rose-deep) 30%, transparent); }
.v-cottage .btn-ghost { background: transparent; color: var(--rose-deep); border: 1.5px solid var(--rose); text-decoration: none; }
.v-cottage .btn-ghost:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.v-cottage .cart-count { background: var(--brown-deep); color: #fff; }

/* hero: big badge logo + steam */
.v-cottage .hero { position: relative; text-align: center; padding: 64px 20px 96px; overflow: hidden;
  background: radial-gradient(ellipse 72% 62% at 50% 0%, #fff 0%, var(--linen) 80%); }
.v-cottage .hero-badge { display: inline-block; position: relative; z-index: 1; }
.v-cottage .hero-badge .logo-svg { height: 210px; width: auto; color: var(--brown-deep); }

/* floating bakery doodles behind the hero */
.v-cottage .hero-bakes { position: absolute; inset: 0; pointer-events: none; }
.v-cottage .hero-bakes i { position: absolute; width: 92px; height: 92px; opacity: 0.14;
  background: var(--doodle-ink, var(--brown));
  -webkit-mask: var(--doodle) center / contain no-repeat; mask: var(--doodle) center / contain no-repeat;
  animation: bake-float 9s ease-in-out infinite alternate; }
.v-cottage .hero-bakes i:nth-child(odd), .v-cottage .side-doodles i.sd-a { --doodle: var(--doodle-a); --doodle-ink: var(--doodle-a-ink); }
.v-cottage .hero-bakes i:nth-child(even), .v-cottage .side-doodles i.sd-b { --doodle: var(--doodle-b); --doodle-ink: var(--doodle-b-ink); }
.v-cottage .hero-bakes i:nth-child(1) { left: 6%;  top: 14%; animation-duration: 10s; }
.v-cottage .hero-bakes i:nth-child(2) { left: 16%; top: 62%; width: 70px; animation-duration: 13s; animation-delay: 1.5s; }
.v-cottage .hero-bakes i:nth-child(3) { right: 7%;  top: 18%; width: 76px; animation-duration: 11s; animation-delay: 0.8s; }
.v-cottage .hero-bakes i:nth-child(4) { right: 15%; top: 60%; animation-duration: 14s; animation-delay: 2.4s; }
.v-cottage .hero-bakes i:nth-child(5) { left: 30%;  top: 8%;  width: 58px; animation-duration: 12s; animation-delay: 3s; }
.v-cottage .hero-bakes i:nth-child(6) { right: 30%; top: 6%;  width: 62px; animation-duration: 15s; animation-delay: 1s; }
/* the same doodles stenciled down both sides of the page, below the hero (review Oct 12). shared.js
   places them in the side margins; they sit behind the content, so white strips and cards cover them. */
body.v-cottage { position: relative; }
.v-cottage .side-doodles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.v-cottage .side-doodles i { position: absolute; width: var(--sd-size, 84px); height: var(--sd-size, 84px); opacity: 0.13;
  background: var(--doodle-ink);
  -webkit-mask: var(--doodle) center / contain no-repeat; mask: var(--doodle) center / contain no-repeat;
  transform: rotate(var(--sd-rot, 0deg)); }
@media (max-width: 760px) { .v-cottage .side-doodles { display: none; } }
@keyframes bake-float {
  from { transform: translateY(-9px) rotate(-3deg); }
  to   { transform: translateY(9px) rotate(3deg); }
}
.v-cottage .steam { position: relative; height: 0; }
.v-cottage .steam span { position: absolute; bottom: 252px; left: calc(50% - 34px); width: 10px; height: 42px;
  border-radius: 50%; background: var(--rose-tint); filter: blur(5px);
  animation: steam-rise 3.6s ease-in-out infinite; }
.v-cottage .steam span:nth-child(2) { left: calc(50% - 4px); animation-delay: 1.2s; height: 34px; }
.v-cottage .steam span:nth-child(3) { left: calc(50% + 26px); animation-delay: 2.2s; height: 30px; }
@keyframes steam-rise {
  0% { transform: translateY(0) scaleX(1); opacity: 0; }
  25% { opacity: 0.8; }
  100% { transform: translateY(-70px) scaleX(1.7) translateX(6px); opacity: 0; }
}
.v-cottage .hero-eyebrow { font-family: 'Caveat', cursive; font-size: 1.5rem; color: var(--rose-deep); margin: 18px 0 4px; }
.v-cottage .hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); margin: 8px 0 16px; color: var(--brown-deep); }
.v-cottage .hero h1 em { color: var(--rose-deep); font-style: italic; }
.v-cottage .hero-sub { max-width: 470px; margin: 0 auto 28px; opacity: 0.85; font-style: italic; }
.v-cottage .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.v-cottage .hero-rose { display: none; }
.v-cottage .gingham-runner { position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background:
    repeating-linear-gradient(0deg, var(--rose-tint) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, var(--rose-tint) 0 8px, transparent 8px 16px),
    #fff; border-top: 1.5px solid var(--rose-soft); }

/* cards: recipe-card look */
.v-cottage .cookie-card { background: #fff; border: 1.5px solid var(--linen-2); border-radius: 14px;
  box-shadow: 0 3px 0 var(--linen-2), 0 10px 24px rgba(107, 74, 58, 0.08); transition: transform 0.25s, box-shadow 0.25s; }
.v-cottage .cookie-card:hover { transform: translateY(-5px) rotate(0.4deg); box-shadow: 0 3px 0 var(--linen-2), 0 18px 34px rgba(107, 74, 58, 0.14); }
.v-cottage .card-img-wrap { background: var(--linen); border-bottom: 2px dashed var(--linen-2); }
.v-cottage .card-top h3 { font-size: 1.2rem; margin: 0; }
.v-cottage .price { font-family: 'Caveat', cursive; font-size: 1.45rem; color: var(--rose-deep); }
.v-cottage .badge { font-family: 'Lora', serif; letter-spacing: 0.04em; }
.v-cottage .badge-week { background: var(--butter); color: var(--brown-deep); }
.v-cottage .badge-out { background: var(--brown-deep); color: #fff; }
.v-cottage .badge-past { background: #fff; color: var(--rose-deep); border: 1.5px solid var(--rose); }
.v-cottage .badge-future { background: var(--rose-soft); color: var(--rose-deep); }
.v-cottage .card-btn { background: var(--rose); color: #fff; }
.v-cottage .card-btn:not(:disabled):hover { background: var(--rose-deep); }
.v-cottage .card-btn:disabled { background: var(--linen-2); color: var(--brown); }
.v-cottage .vote-btn:not(:disabled):hover { background: var(--rose-soft); }
.v-cottage .vote-btn { background: #fffdf9; border: 1.5px solid var(--rose); color: var(--rose-deep); }
.v-cottage .vote-btn.voted { background: var(--rose); color: #fff; }
.v-cottage .vote-btn:not(:disabled):hover { animation: jar-wiggle 0.4s ease-in-out; }
@keyframes jar-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2.5deg); }
}
.v-cottage .vote-count { background: var(--rose-soft); color: var(--rose-deep); }

/* strips */
.v-cottage .how-strip { background: #fff; border-block: 2px dashed var(--linen-2); padding: 46px 0; }
.v-cottage .step { background: var(--linen); border-radius: 16px; border: 1.5px solid var(--linen-2); }
.v-cottage .step h3 { font-family: 'Caveat', cursive; font-size: 1.5rem; color: var(--rose-deep); }
.v-cottage .idea-section { background: #fff; border-block: 2px dashed var(--linen-2); }
.v-cottage .form-card { background: #fff; border: 1.5px solid var(--linen-2); border-radius: 16px;
  box-shadow: 0 3px 0 var(--linen-2), 0 12px 26px rgba(107, 74, 58, 0.08); }
.v-cottage .field label { font-family: 'Caveat', cursive; font-size: 1.15rem; font-weight: 600; color: var(--brown); letter-spacing: 0; }
.v-cottage .field input, .v-cottage .field select, .v-cottage .field textarea { border-color: var(--linen-2); background: #fff; border-radius: 8px; }
.v-cottage .field input:focus, .v-cottage .field select:focus, .v-cottage .field textarea:focus { outline: 2px solid var(--rose); border-color: transparent; }
.v-cottage .info-card { background: #fff; border: 1.5px solid var(--linen-2); border-radius: 16px;
  box-shadow: 0 3px 0 var(--linen-2); }
/* Pickup / policies / payment as stacked rows, not three columns */
.v-cottage .info-grid { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; gap: 22px; }
.v-cottage #hours-list li { border-bottom: 1px dashed var(--linen-2); }
.v-cottage .pay-chip { background: var(--rose-soft); color: var(--rose-deep); }
.v-cottage footer { background: var(--brown-deep); color: var(--linen); }
.v-cottage footer .logo-svg { height: 110px; color: var(--linen); }
.v-cottage #cottage-disclaimer { opacity: 0.55; }

/* ---------- holiday themes (Settings → Website theme; review Oct 12) ----------
   Each theme re-points the brand color + nav bar and swaps the hero doodles. Everything
   pink on the site derives from --brand-pink, so this is all a theme needs to set. */
body.v-cottage.theme-halloween {
  --brand-pink: #e2661b;                 /* pumpkin */
  --nav-bg: rgba(46, 31, 58, 0.96);      /* midnight purple */
  --nav-border: #e2661b;
  --nav-ink: #f6e7d2;
  --nav-logo: #f6e7d2;
  --nav-hover: #ffb067;
}
body.v-cottage.theme-thanksgiving {
  --brand-pink: #b4532a;                 /* rust */
  --nav-bg: rgba(243, 223, 180, 0.96);   /* wheat */
  --nav-border: #d9b679;
}
body.v-cottage.theme-christmas {
  --brand-pink: #b3262e;                 /* berry red */
  --nav-bg: rgba(31, 77, 58, 0.96);      /* evergreen */
  --nav-border: #b3262e;
  --nav-ink: #fbf3e4;
  --nav-logo: #fbf3e4;
  --nav-hover: #f5c6c9;
}
body.v-cottage.theme-halloween { --doodle-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='50' cy='60' rx='32' ry='24'/%3E%3Cpath d='M50 36 C 39 42 39 78 50 84 M50 36 C 61 42 61 78 50 84'/%3E%3Cpath d='M50 36 C 50 29 53 22 60 18'/%3E%3C/g%3E%3C/svg%3E"); }
body.v-cottage.theme-halloween { --doodle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='M50 46 C 47 40 42 40 40 45 C 32 38 19 40 10 50 C 19 50 25 54 27 61 C 31 55 37 56 39 61 C 43 57 47 58 50 63 C 53 58 57 57 61 61 C 63 56 69 55 73 61 C 75 54 81 50 90 50 C 81 40 68 38 60 45 C 58 40 53 40 50 46 Z'/%3E%3C/svg%3E"); }
body.v-cottage.theme-thanksgiving { --doodle-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 86 V 44'/%3E%3Cpath d='M50 18 L 58 34 L 74 28 L 68 44 L 84 50 L 66 58 L 70 72 L 50 64 L 30 72 L 34 58 L 16 50 L 32 44 L 26 28 L 42 34 Z'/%3E%3C/g%3E%3C/svg%3E"); }
body.v-cottage.theme-thanksgiving { --doodle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 64 H 86 V 76 H 14 Z'/%3E%3Cpath d='M14 64 C 30 46 60 34 86 30 V 64'/%3E%3Cpath d='M32 58 C 44 50 60 45 76 43' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
body.v-cottage.theme-christmas { --doodle-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 14 V 86 M19 32 L 81 68 M19 68 L 81 32'/%3E%3Cpath d='M42 20 L 50 28 L 58 20 M42 80 L 50 72 L 58 80 M20 41 L 30 38 L 27 28 M80 59 L 70 62 L 73 72 M20 59 L 30 62 L 27 72 M80 41 L 70 38 L 73 28'/%3E%3C/g%3E%3C/svg%3E"); }
body.v-cottage.theme-christmas { --doodle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 12 L 70 40 H 60 L 78 64 H 22 L 40 40 H 30 Z'/%3E%3Cpath d='M44 64 V 80 H 56 V 64'/%3E%3C/g%3E%3C/svg%3E"); }

/* checkout: handmade-variation note (review Oct 12) */
.v-cottage .handmade-note { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--linen); border: 1px dashed var(--linen-2);
  font-size: 0.9rem; font-style: italic; line-height: 1.45; color: var(--brown); }

/* Colorado Cottage Foods Act statement under the policies */
.v-cottage .compliance-note { font-size: 0.85rem; line-height: 1.5; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--linen-2); }
.v-cottage .compliance-note a { color: var(--rose-deep); font-weight: 600; }

/* holiday pre-order pop-up */
.v-cottage .holiday-pop .modal-card { text-align: center; border-top: 6px solid var(--rose); }
.v-cottage .holiday-pop h3 { font-size: 1.7rem; color: var(--brown-deep); margin: 4px 0 2px; }
.v-cottage .holiday-pop .holiday-pop-sub { font-family: 'Caveat', cursive; font-size: 1.45rem; color: var(--rose-deep); margin: 0 0 18px; }
.v-cottage .holiday-pop .hp-step[data-step="form"] { text-align: left; margin-top: 12px; }
.v-cottage .holiday-pop .hp-path { background: var(--linen); border-color: var(--linen-2); }
.v-cottage .holiday-pop .hp-path:hover, .v-cottage .holiday-pop .hp-path:focus-visible { border-color: var(--rose); background: var(--rose-soft); }
.v-cottage .holiday-pop .hp-path strong { color: var(--brown-deep); }
.v-cottage .holiday-pop .hp-note { background: var(--rose-soft); color: var(--brown-deep); text-align: left; }

/* reveal-on-scroll */
.v-cottage .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.v-cottage .reveal.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .v-cottage .steam span, .v-cottage .hero-bakes i { animation: none; }
  .v-cottage .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 720px) {
  .v-cottage .hero-badge .logo-svg { height: 160px; }
  .v-cottage .steam span { bottom: 200px; }
}