/* ===== Cyber Forge - soft, rounded, clean ===== */

:root {
  --accent: #e11d48;          /* changed by shop-settings.js */
  --radius: 18px;             /* soft rounded corners everywhere */
  /* "white-hot metal" look for boxes that used to be white */
  --fire-card: linear-gradient(160deg, #fff9ee 0%, #ffeecd 55%, #ffd89c 100%);
  --fire-border: #ff9a2e;
  --fire-glow: 0 0 16px rgba(255,120,0,0.5);
}

* { box-sizing: border-box; }

/* ===== Seasonal campaign banner ===== */
.campaign-banner {
  text-align: center;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(90deg, #7b2ff7, #ff7a18);
  border-bottom: 2px solid #ffb703;
}

/* ===== HALLOWEEN THEME =====
   Only applies when campaign is "halloween" (set in shop-settings.js).
   Your normal design is untouched otherwise. */
:root[data-campaign="halloween"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.22) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #2a0a45 0%, #c2410c 50%, #2a0a45 100%);
  border-bottom-color: #ff7a18;
  text-shadow: 0 0 8px rgba(255, 140, 0, 0.85), 0 1px 2px rgba(0,0,0,0.6);
}
:root[data-campaign="halloween"] .info-bar {
  background: linear-gradient(180deg, #3d1566, #1a0a2e);
  border-bottom-color: #7b2ff7;
}
:root[data-campaign="halloween"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(255, 120, 0, 0.28), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(123, 47, 247, 0.32), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(60, 220, 90, 0.10), transparent 45%);
}
:root[data-campaign="halloween"] #shop-name,
:root[data-campaign="halloween"] .drip {
  background: linear-gradient(180deg, #b4ff3a 0%, #ff9a1e 50%, #b14bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ===== EASTER THEME =====
   Only applies when campaign is "easter" (set in shop-settings.js).
   Same ideas as Christmas & Halloween, in soft spring pastels. */
:root[data-campaign="easter"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #e85d9b 0%, #9b6bff 50%, #3fbf8f 100%);
  border-bottom-color: #fff3a0;
  text-shadow: 0 1px 3px rgba(80, 0, 60, 0.55);
}
:root[data-campaign="easter"] .info-bar {
  background: linear-gradient(180deg, #4fae78, #2e8b57);
  border-bottom-color: #fff3a0;
  text-shadow: 0 1px 2px rgba(0, 50, 20, 0.55);
}
:root[data-campaign="easter"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(255, 150, 200, 0.26), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(160, 230, 190, 0.22), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(255, 240, 150, 0.08), transparent 45%);
}
:root[data-campaign="easter"] {
  --fire-border: #ff9cc7;
  --fire-glow: 0 0 14px rgba(255, 156, 199, 0.5);
}
/* Pastel shop name with a soft pink glow; the O and Y drip little eggs */
:root[data-campaign="easter"] #shop-name,
:root[data-campaign="easter"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #ffe4f0 30%, #ffb6d2 58%, #c9b8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="easter"] #shop-name { animation: springGlow 2.8s ease-in-out infinite; }
@keyframes springGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 1px 0 rgba(90, 20, 70, 0.45)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 156, 199, 0.95)) drop-shadow(0 1px 0 rgba(90, 20, 70, 0.45)); }
}
:root[data-campaign="easter"] .drip::after {
  width: 6px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #fff3a0, #ffd166);
  box-shadow: 0 0 6px rgba(255, 220, 120, 0.9);
}
:root[data-campaign="easter"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(255, 150, 200, 0.36), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(140, 220, 170, 0.32), transparent 42%);
}
/* A warm spring sun in the sky (behind everything) */
:root[data-campaign="easter"] body::after {
  content: "";
  position: fixed;
  top: 150px; right: 6%;
  width: 140px; height: 140px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 45% 42%, #fffbe0, #ffe680 55%, #ffcc4d 100%);
  box-shadow: 0 0 40px 14px rgba(255, 220, 110, 0.4), 0 0 120px 50px rgba(255, 190, 120, 0.15);
  opacity: 0.9;
}
@media (max-width: 560px) {
  :root[data-campaign="easter"] body::after { width: 86px; height: 86px; top: 110px; right: 4%; }
}
/* Pastel stripes under the shelf headings */
:root[data-campaign="easter"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #ffb6d2 0 8px, #fff3a0 8px 16px, #b8f0d0 16px 24px, #c9b8ff 24px 32px)
    bottom left / 100% 5px no-repeat;
}
/* Easter items: a pink edge and daisies in the corner */
:root[data-campaign="easter"] .card.season-card { border-color: #ff9cc7; }
:root[data-campaign="easter"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23ffffff' stroke='%23f4d6e4' stroke-width='0.6'%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(0 46 16) translate(0 -6)'/%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(45 46 16) translate(0 -6)'/%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(90 46 16) translate(0 -6)'/%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(135 46 16) translate(0 -6)'/%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(180 46 16) translate(0 -6)'/%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(225 46 16) translate(0 -6)'/%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(270 46 16) translate(0 -6)'/%3E%3Cellipse cx='46' cy='16' rx='3.4' ry='7' transform='rotate(315 46 16) translate(0 -6)'/%3E%3C/g%3E%3Ccircle cx='46' cy='16' r='4' fill='%23ffcc33'/%3E%3Cg fill='%23ffd1e6' stroke='%23ff9cc7' stroke-width='0.5'%3E%3Cellipse cx='26' cy='10' rx='2.2' ry='4.6' transform='rotate(0 26 10) translate(0 -4)'/%3E%3Cellipse cx='26' cy='10' rx='2.2' ry='4.6' transform='rotate(60 26 10) translate(0 -4)'/%3E%3Cellipse cx='26' cy='10' rx='2.2' ry='4.6' transform='rotate(120 26 10) translate(0 -4)'/%3E%3Cellipse cx='26' cy='10' rx='2.2' ry='4.6' transform='rotate(180 26 10) translate(0 -4)'/%3E%3Cellipse cx='26' cy='10' rx='2.2' ry='4.6' transform='rotate(240 26 10) translate(0 -4)'/%3E%3Cellipse cx='26' cy='10' rx='2.2' ry='4.6' transform='rotate(300 26 10) translate(0 -4)'/%3E%3C/g%3E%3Ccircle cx='26' cy='10' r='2.6' fill='%23ffcc33'/%3E%3Cpath d='M58 4 q-4 10 -14 14' stroke='%235aa84f' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
/* Pink "Add to basket" buttons with a mint edge */
:root[data-campaign="easter"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #ff9cc7 0%, #e85d9b 50%, #c2407e 100%);
  text-shadow: 0 1px 2px rgba(90, 0, 50, 0.5);
  box-shadow: 0 2px 0 #b8f0d0 inset, 0 3px 10px rgba(232, 93, 155, 0.45);
}
:root[data-campaign="easter"] .toast {
  background: linear-gradient(180deg, #4fd18f, #2e9b63);
  box-shadow: 0 4px 16px rgba(40, 160, 100, 0.55);
}
:root[data-campaign="easter"] .modal { box-shadow: 0 0 30px rgba(255, 156, 199, 0.6); }
/* Footer: a spring meadow with eggs, flowers and a bunny */
:root[data-campaign="easter"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q40 32 80 40 T160 38 T240 42 T320 40 L320 60 L0 60 Z' fill='%234f9d4a'/%3E%3Cpath d='M0 52 Q60 46 120 50 T240 50 T320 50 L320 60 L0 60 Z' fill='%233d7f3a'/%3E%3Cg stroke='rgba(255,255,255,0.8)' stroke-width='1.2'%3E%3Cellipse cx='34' cy='38' rx='6' ry='8' fill='%23ffb6d2'/%3E%3Cpath d='M28.5 37 h11' /%3E%3Cellipse cx='150' cy='36' rx='5.5' ry='7.5' fill='%23fff3a0'/%3E%3Cpath d='M145 35 h10'/%3E%3Cellipse cx='262' cy='38' rx='6' ry='8' fill='%23a8dcff'/%3E%3Cpath d='M256.5 37 h11'/%3E%3Cellipse cx='206' cy='41' rx='4.5' ry='6' fill='%23c9b8ff'/%3E%3Cpath d='M202 40.5 h8'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='66' cy='38' r='2.2'/%3E%3Ccircle cx='70' cy='38' r='2.2'/%3E%3Ccircle cx='68' cy='35.8' r='2.2'/%3E%3Ccircle cx='68' cy='40.2' r='2.2'/%3E%3Ccircle cx='298' cy='37' r='2.2'/%3E%3Ccircle cx='302' cy='37' r='2.2'/%3E%3Ccircle cx='300' cy='34.8' r='2.2'/%3E%3Ccircle cx='300' cy='39.2' r='2.2'/%3E%3Ccircle cx='176' cy='37' r='1.8'/%3E%3Ccircle cx='179.4' cy='37' r='1.8'/%3E%3Ccircle cx='177.7' cy='35.2' r='1.8'/%3E%3Ccircle cx='177.7' cy='38.8' r='1.8'/%3E%3C/g%3E%3Cg fill='%23ffcc33'%3E%3Ccircle cx='68' cy='38' r='1.4'/%3E%3Ccircle cx='300' cy='37' r='1.4'/%3E%3Ccircle cx='177.7' cy='37' r='1.1'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M118 40 v-8' stroke='%232f6b2c' stroke-width='1.4'/%3E%3Cpath d='M114 31 q4 -8 8 0 q-4 4 -8 0z' fill='%23ff7eb3'/%3E%3Cpath d='M232 41 v-8' stroke='%232f6b2c' stroke-width='1.4'/%3E%3Cpath d='M228 32 q4 -8 8 0 q-4 4 -8 0z' fill='%23ffd166'/%3E%3C/g%3E%3Cg fill='%23f6f1ea'%3E%3Cellipse cx='94' cy='38' rx='7' ry='5.5'/%3E%3Ccircle cx='100' cy='33' r='3.6'/%3E%3Cellipse cx='99' cy='26.5' rx='1.3' ry='4.2' transform='rotate(-10 99 26.5)'/%3E%3Cellipse cx='102' cy='26.8' rx='1.3' ry='4.2' transform='rotate(12 102 26.8)'/%3E%3Ccircle cx='87.5' cy='37' r='2.2' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* The same meadow along the bottom of the top bar (topScene: true) */
:root[data-campaign="easter"].top-scene .topbar { padding-bottom: 46px; }
:root[data-campaign="easter"].top-scene .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 44 Q40 32 80 40 T160 38 T240 42 T320 40 L320 60 L0 60 Z' fill='%234f9d4a'/%3E%3Cpath d='M0 52 Q60 46 120 50 T240 50 T320 50 L320 60 L0 60 Z' fill='%233d7f3a'/%3E%3Cg stroke='rgba(255,255,255,0.8)' stroke-width='1.2'%3E%3Cellipse cx='34' cy='38' rx='6' ry='8' fill='%23ffb6d2'/%3E%3Cpath d='M28.5 37 h11' /%3E%3Cellipse cx='150' cy='36' rx='5.5' ry='7.5' fill='%23fff3a0'/%3E%3Cpath d='M145 35 h10'/%3E%3Cellipse cx='262' cy='38' rx='6' ry='8' fill='%23a8dcff'/%3E%3Cpath d='M256.5 37 h11'/%3E%3Cellipse cx='206' cy='41' rx='4.5' ry='6' fill='%23c9b8ff'/%3E%3Cpath d='M202 40.5 h8'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='66' cy='38' r='2.2'/%3E%3Ccircle cx='70' cy='38' r='2.2'/%3E%3Ccircle cx='68' cy='35.8' r='2.2'/%3E%3Ccircle cx='68' cy='40.2' r='2.2'/%3E%3Ccircle cx='298' cy='37' r='2.2'/%3E%3Ccircle cx='302' cy='37' r='2.2'/%3E%3Ccircle cx='300' cy='34.8' r='2.2'/%3E%3Ccircle cx='300' cy='39.2' r='2.2'/%3E%3Ccircle cx='176' cy='37' r='1.8'/%3E%3Ccircle cx='179.4' cy='37' r='1.8'/%3E%3Ccircle cx='177.7' cy='35.2' r='1.8'/%3E%3Ccircle cx='177.7' cy='38.8' r='1.8'/%3E%3C/g%3E%3Cg fill='%23ffcc33'%3E%3Ccircle cx='68' cy='38' r='1.4'/%3E%3Ccircle cx='300' cy='37' r='1.4'/%3E%3Ccircle cx='177.7' cy='37' r='1.1'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M118 40 v-8' stroke='%232f6b2c' stroke-width='1.4'/%3E%3Cpath d='M114 31 q4 -8 8 0 q-4 4 -8 0z' fill='%23ff7eb3'/%3E%3Cpath d='M232 41 v-8' stroke='%232f6b2c' stroke-width='1.4'/%3E%3Cpath d='M228 32 q4 -8 8 0 q-4 4 -8 0z' fill='%23ffd166'/%3E%3C/g%3E%3Cg fill='%23f6f1ea'%3E%3Cellipse cx='94' cy='38' rx='7' ry='5.5'/%3E%3Ccircle cx='100' cy='33' r='3.6'/%3E%3Cellipse cx='99' cy='26.5' rx='1.3' ry='4.2' transform='rotate(-10 99 26.5)'/%3E%3Cellipse cx='102' cy='26.8' rx='1.3' ry='4.2' transform='rotate(12 102 26.8)'/%3E%3Ccircle cx='87.5' cy='37' r='2.2' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="easter"].top-scene .topbar { padding-bottom: 40px; }
  :root[data-campaign="easter"].top-scene .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="easter"] #shop-name { animation: none; }
}

/* ===== MOTHER'S DAY THEME =====
   Only applies when campaign is "mothersday" (set in shop-settings.js).
   Same ideas as the other core themes, in rose pinks and gold. */
:root[data-campaign="mothersday"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.16) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #ad1457 0%, #e91e63 50%, #9c4dcc 100%);
  border-bottom-color: #ffd27a;
  text-shadow: 0 1px 3px rgba(70, 0, 30, 0.6);
}
:root[data-campaign="mothersday"] .info-bar {
  background: linear-gradient(180deg, #c2185b, #880e4f);
  border-bottom-color: #ffd27a;
  text-shadow: 0 1px 2px rgba(60, 0, 25, 0.6);
}
:root[data-campaign="mothersday"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(255, 80, 140, 0.26), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(200, 140, 255, 0.24), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(255, 210, 122, 0.08), transparent 45%);
}
:root[data-campaign="mothersday"] {
  --fire-border: #ff8fb8;
  --fire-glow: 0 0 14px rgba(255, 111, 165, 0.5);
}
/* Rose-and-gold shop name with a warm glow; the O and Y drip little hearts */
:root[data-campaign="mothersday"] #shop-name,
:root[data-campaign="mothersday"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #ffe0ec 28%, #ff8fb8 58%, #ffd27a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="mothersday"] #shop-name { animation: loveGlow 2.8s ease-in-out infinite; }
@keyframes loveGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 1px 0 rgba(90, 0, 40, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 111, 165, 0.95)) drop-shadow(0 1px 0 rgba(90, 0, 40, 0.5)); }
}
:root[data-campaign="mothersday"] .drip::after {
  width: 7px; height: 7px; border-radius: 0;
  background: #ff3d7f;
  clip-path: path("M3.5 7 C-1 3.5 0.5 0 3.5 2 C6.5 0 8 3.5 3.5 7 Z");
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 61, 127, 0.9));
}
:root[data-campaign="mothersday"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(255, 80, 140, 0.38), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(255, 210, 122, 0.30), transparent 42%);
}
/* Rose, white and gold stripes under the shelf headings */
:root[data-campaign="mothersday"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #ff3d7f 0 8px, #ffffff 8px 16px, #ffd27a 16px 24px)
    bottom left / 100% 5px no-repeat;
}
/* Mother's Day items: a rose edge and a rose with hearts in the corner */
:root[data-campaign="mothersday"] .card.season-card { border-color: #ff6fa5; }
:root[data-campaign="mothersday"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M60 2 Q48 14 40 24' stroke='%235aa84f' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='50' cy='14' rx='5' ry='2.4' fill='%235aa84f' transform='rotate(-40 50 14)'/%3E%3Ccircle cx='44' cy='22' r='7' fill='%23ff3d7f'/%3E%3Cpath d='M40.5 22 a3.5 3.5 0 1 1 7 0' fill='none' stroke='%23b3124f' stroke-width='1'/%3E%3Cpath d='M24 13.4 c-5.44 -3.74 -2.72 -7.48 0 -4.76 c2.72 -2.72 5.44 3.74 0 4.76 z' fill='%23ff6fa5'/%3E%3Cpath d='M56 36.4 c-3.84 -2.64 -1.92 -5.28 0 -3.36 c1.92 -1.92 3.84 2.64 0 3.36 z' fill='%23ffb6d2'/%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
:root[data-campaign="mothersday"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #ff6fa5 0%, #d63c78 50%, #a8205a 100%);
  text-shadow: 0 1px 2px rgba(70, 0, 30, 0.55);
  box-shadow: 0 2px 0 #ffd27a inset, 0 3px 10px rgba(214, 60, 120, 0.45);
}
:root[data-campaign="mothersday"] .toast {
  background: linear-gradient(180deg, #e8559a, #a8205a);
  box-shadow: 0 4px 16px rgba(200, 40, 110, 0.55);
}
:root[data-campaign="mothersday"] .modal { box-shadow: 0 0 30px rgba(255, 111, 165, 0.6); }
/* Footer: a flower garden with roses, tulips and little hearts */
:root[data-campaign="mothersday"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 38 80 44 T160 42 T240 45 T320 43 L320 60 L0 60 Z' fill='%234f9d4a'/%3E%3Cpath d='M0 53 Q60 48 120 52 T240 52 T320 52 L320 60 L0 60 Z' fill='%233d7f3a'/%3E%3Cpath d='M20 46 v-14' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M16 26 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23ff6fa5'/%3E%3Cpath d='M30 46 v-10' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M26 30 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23d63c78'/%3E%3Ccircle cx='60' cy='38' r='5' fill='%23ff3d7f'/%3E%3Cpath d='M57.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23b3124f' stroke-width='1'/%3E%3Cpath d='M60 43 v4' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M104 44 v-12' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M100 26 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23c9a0ff'/%3E%3Cpath d='M114 44 v-15' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M110 23 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23ff6fa5'/%3E%3Ccircle cx='150' cy='36' r='5.5' fill='%23ffb6d2'/%3E%3Cpath d='M147.25 36 a2.75 2.75 0 1 1 5.5 0' fill='none' stroke='%23e85d9b' stroke-width='1'/%3E%3Cpath d='M150 41.5 v4' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M196 45 v-13' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M192 26 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23ff3d7f'/%3E%3Cpath d='M206 45 v-9' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M202 30 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23fff3a0'/%3E%3Ccircle cx='244' cy='38' r='5' fill='%23ffffff'/%3E%3Cpath d='M241.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23e8a0c0' stroke-width='1'/%3E%3Cpath d='M244 43 v4' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M284 45 v-14' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M280 25 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23d63c78'/%3E%3Cpath d='M296 45 v-11' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M292 28 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23c9a0ff'/%3E%3Cpath d='M84 25 c-4.800000000000001 -3.3000000000000003 -2.4000000000000004 -6.6000000000000005 0 -4.199999999999999 c2.4000000000000004 -2.4000000000000004 4.800000000000001 3.3000000000000003 0 4.199999999999999 z' fill='%23ff6fa5'/%3E%3Cpath d='M176 20.6 c-4.16 -2.8600000000000003 -2.08 -5.720000000000001 0 -3.6399999999999997 c2.08 -2.08 4.16 2.8600000000000003 0 3.6399999999999997 z' fill='%23ff3d7f'/%3E%3Cpath d='M268 27 c-4.800000000000001 -3.3000000000000003 -2.4000000000000004 -6.6000000000000005 0 -4.199999999999999 c2.4000000000000004 -2.4000000000000004 4.800000000000001 3.3000000000000003 0 4.199999999999999 z' fill='%23ffb6d2'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='130' cy='43' r='1.8'/%3E%3Ccircle cx='133' cy='43' r='1.8'/%3E%3Ccircle cx='131.5' cy='41.4' r='1.8'/%3E%3Ccircle cx='131.5' cy='44.6' r='1.8'/%3E%3C/g%3E%3Ccircle cx='131.5' cy='43' r='1.1' fill='%23ffcc33'/%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* The same garden along the bottom of the top bar (topScene: true) */
:root[data-campaign="mothersday"].top-scene .topbar { padding-bottom: 46px; }
:root[data-campaign="mothersday"].top-scene .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 38 80 44 T160 42 T240 45 T320 43 L320 60 L0 60 Z' fill='%234f9d4a'/%3E%3Cpath d='M0 53 Q60 48 120 52 T240 52 T320 52 L320 60 L0 60 Z' fill='%233d7f3a'/%3E%3Cpath d='M20 46 v-14' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M16 26 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23ff6fa5'/%3E%3Cpath d='M30 46 v-10' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M26 30 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23d63c78'/%3E%3Ccircle cx='60' cy='38' r='5' fill='%23ff3d7f'/%3E%3Cpath d='M57.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23b3124f' stroke-width='1'/%3E%3Cpath d='M60 43 v4' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M104 44 v-12' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M100 26 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23c9a0ff'/%3E%3Cpath d='M114 44 v-15' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M110 23 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23ff6fa5'/%3E%3Ccircle cx='150' cy='36' r='5.5' fill='%23ffb6d2'/%3E%3Cpath d='M147.25 36 a2.75 2.75 0 1 1 5.5 0' fill='none' stroke='%23e85d9b' stroke-width='1'/%3E%3Cpath d='M150 41.5 v4' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M196 45 v-13' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M192 26 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23ff3d7f'/%3E%3Cpath d='M206 45 v-9' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M202 30 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23fff3a0'/%3E%3Ccircle cx='244' cy='38' r='5' fill='%23ffffff'/%3E%3Cpath d='M241.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23e8a0c0' stroke-width='1'/%3E%3Cpath d='M244 43 v4' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M284 45 v-14' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M280 25 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23d63c78'/%3E%3Cpath d='M296 45 v-11' stroke='%232f6b2c' stroke-width='1.5'/%3E%3Cpath d='M292 28 q-2 6 4 8 q6 -2 4 -8 l-2 3 l-2 -4 l-2 4 z' fill='%23c9a0ff'/%3E%3Cpath d='M84 25 c-4.800000000000001 -3.3000000000000003 -2.4000000000000004 -6.6000000000000005 0 -4.199999999999999 c2.4000000000000004 -2.4000000000000004 4.800000000000001 3.3000000000000003 0 4.199999999999999 z' fill='%23ff6fa5'/%3E%3Cpath d='M176 20.6 c-4.16 -2.8600000000000003 -2.08 -5.720000000000001 0 -3.6399999999999997 c2.08 -2.08 4.16 2.8600000000000003 0 3.6399999999999997 z' fill='%23ff3d7f'/%3E%3Cpath d='M268 27 c-4.800000000000001 -3.3000000000000003 -2.4000000000000004 -6.6000000000000005 0 -4.199999999999999 c2.4000000000000004 -2.4000000000000004 4.800000000000001 3.3000000000000003 0 4.199999999999999 z' fill='%23ffb6d2'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='130' cy='43' r='1.8'/%3E%3Ccircle cx='133' cy='43' r='1.8'/%3E%3Ccircle cx='131.5' cy='41.4' r='1.8'/%3E%3Ccircle cx='131.5' cy='44.6' r='1.8'/%3E%3C/g%3E%3Ccircle cx='131.5' cy='43' r='1.1' fill='%23ffcc33'/%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="mothersday"].top-scene .topbar { padding-bottom: 40px; }
  :root[data-campaign="mothersday"].top-scene .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="mothersday"] #shop-name { animation: none; }
}

/* ===== VALENTINE'S THEME =====
   Only applies when campaign is "valentines" (set in shop-settings.js).
   Same ideas as the other core themes, in ruby red, pink and gold. */
:root[data-campaign="valentines"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.14) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #7a0b33 0%, #e0115f 50%, #ff5c8a 100%);
  border-bottom-color: #ffd1dc;
  text-shadow: 0 1px 3px rgba(70, 0, 25, 0.6);
}
:root[data-campaign="valentines"] .info-bar {
  background: linear-gradient(180deg, #c2133f, #7a0b26);
  border-bottom-color: #ffd1dc;
  text-shadow: 0 1px 2px rgba(60, 0, 20, 0.6);
}
:root[data-campaign="valentines"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(224, 17, 95, 0.28), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(255, 92, 138, 0.24), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(255, 210, 122, 0.07), transparent 45%);
}
:root[data-campaign="valentines"] {
  --fire-border: #ff7a9c;
  --fire-glow: 0 0 14px rgba(224, 17, 95, 0.45);
}
/* Ruby-and-pink shop name with a warm glow; the O and Y drip little hearts */
:root[data-campaign="valentines"] #shop-name,
:root[data-campaign="valentines"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #ffd1dc 28%, #ff5c8a 58%, #e0115f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="valentines"] #shop-name { animation: valentineGlow 2.8s ease-in-out infinite; }
@keyframes valentineGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 1px 0 rgba(90, 0, 30, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 92, 138, 0.95)) drop-shadow(0 1px 0 rgba(90, 0, 30, 0.5)); }
}
:root[data-campaign="valentines"] .drip::after {
  width: 7px; height: 7px; border-radius: 0;
  background: #e0115f;
  clip-path: path("M3.5 7 C-1 3.5 0.5 0 3.5 2 C6.5 0 8 3.5 3.5 7 Z");
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(224, 17, 95, 0.9));
}
:root[data-campaign="valentines"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(224, 17, 95, 0.40), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(255, 146, 178, 0.30), transparent 42%);
}
/* Ruby, white and pink stripes under the shelf headings */
:root[data-campaign="valentines"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #e0115f 0 8px, #ffffff 8px 16px, #ffb3c6 16px 24px)
    bottom left / 100% 5px no-repeat;
}
/* Valentine's items: a pink edge and a heart with Cupid's arrow in the corner */
:root[data-campaign="valentines"] .card.season-card { border-color: #ff5c8a; }
:root[data-campaign="valentines"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 2 L19 6 L14 12' stroke='%23ff8fb8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 4 L52 30' stroke='%23ffd24a' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M56 33 L46 31 L50 24 Z' fill='%23ffd24a'/%3E%3Cpath d='M44 29.2 C32.8 21.2 38.4 12.4 44 18.4 C49.6 12.4 55.2 21.2 44 29.2 Z' fill='%23e0115f' stroke='rgba(0,0,0,0.12)' stroke-width='0.8'/%3E%3Ccircle cx='41' cy='19' r='1.6' fill='rgba(255,255,255,0.7)'/%3E%3Cpath d='M24 17.6 C18.4 13.6 21.2 9.2 24 12.2 C26.8 9.2 29.6 13.6 24 17.6 Z' fill='%23ff6fa5'/%3E%3Cpath d='M56 46.9 C51.5 43.7 53.8 40.2 56 42.6 C58.2 40.2 60.5 43.7 56 46.9 Z' fill='%23ffb6d2'/%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
:root[data-campaign="valentines"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #ff5c8a 0%, #e0115f 50%, #a30b45 100%);
  text-shadow: 0 1px 2px rgba(70, 0, 25, 0.55);
  box-shadow: 0 2px 0 #ffd1dc inset, 0 3px 10px rgba(224, 17, 95, 0.45);
}
:root[data-campaign="valentines"] .toast {
  background: linear-gradient(180deg, #e84a76, #a30b45);
  box-shadow: 0 4px 16px rgba(200, 30, 90, 0.55);
}
:root[data-campaign="valentines"] .modal { box-shadow: 0 0 30px rgba(255, 92, 138, 0.6); }
/* Footer: a love scene — heart flowers, roses, a love letter and Cupid's arrow */
:root[data-campaign="valentines"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 38 80 44 T160 42 T240 45 T320 43 L320 60 L0 60 Z' fill='%23a8205a'/%3E%3Cpath d='M0 53 Q60 48 120 52 T240 52 T320 52 L320 60 L0 60 Z' fill='%237a0b33'/%3E%3Cpath d='M20 46 v-14' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M20 32.5 C13 27.5 16.5 22 20 25.8 C23.5 22 27 27.5 20 32.5 Z' fill='%23ff6fa5'/%3E%3Cpath d='M30 46 v-10' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M30 36.6 C24.4 32.6 27.2 28.2 30 31.2 C32.8 28.2 35.6 32.6 30 36.6 Z' fill='%23e0115f'/%3E%3Crect x='52' y='30' width='26' height='17' rx='2' fill='%23fff7f9' stroke='%23e8a0b8' stroke-width='1'/%3E%3Cpath d='M52 31 L65 41 L78 31' fill='none' stroke='%23e8a0b8' stroke-width='1.2'/%3E%3Cpath d='M65 38.3 C61.5 35.8 63.3 33 65 34.9 C66.8 33 68.5 35.8 65 38.3 Z' fill='%23e0115f'/%3E%3Cpath d='M84 27.2 C79.1 23.7 81.6 19.8 84 22.4 C86.5 19.8 88.9 23.7 84 27.2 Z' fill='%23ff6fa5'/%3E%3Ccircle cx='100' cy='38' r='5' fill='%23ff3d7f'/%3E%3Cpath d='M97.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23b3124f' stroke-width='1'/%3E%3Cpath d='M100 43 v4' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M122 44 v-14' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M122 30.5 C115 25.5 118.5 20 122 23.8 C125.5 20 129 25.5 122 30.5 Z' fill='%23ffd1dc'/%3E%3Cpath d='M134 45 v-10' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M134 34.6 C128.4 30.6 131.2 26.2 134 29.2 C136.8 26.2 139.6 30.6 134 34.6 Z' fill='%23ff8fb8'/%3E%3Cpath d='M152 38 L148 45 M158 36 L154 43' stroke='%23ff8fb8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M150 44 L190 32' stroke='%23ffd24a' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M195 30 L185 31 L189 38 Z' fill='%23ffd24a'/%3E%3Cpath d='M210 26.7 C205.8 23.7 207.9 20.4 210 22.7 C212.1 20.4 214.2 23.7 210 26.7 Z' fill='%23ff3d7f'/%3E%3Cpath d='M232 45 v-12' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M232 33.5 C225 28.5 228.5 23 232 26.8 C235.5 23 239 28.5 232 33.5 Z' fill='%23ff3d7f'/%3E%3Cpath d='M242 46 v-9' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M242 37.6 C236.4 33.6 239.2 29.2 242 32.2 C244.8 29.2 247.6 33.6 242 37.6 Z' fill='%23ffffff'/%3E%3Ccircle cx='262' cy='38' r='5' fill='%23ffffff'/%3E%3Cpath d='M259.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23e8a0c0' stroke-width='1'/%3E%3Cpath d='M262 43 v4' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M284 45 v-13' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M284 31.5 C277 26.5 280.5 21 284 24.8 C287.5 21 291 26.5 284 31.5 Z' fill='%23e0115f'/%3E%3Cpath d='M296 45 v-9' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M296 36.6 C290.4 32.6 293.2 28.2 296 31.2 C298.8 28.2 301.6 32.6 296 36.6 Z' fill='%23ff8fb8'/%3E%3Cpath d='M308 24.7 C303.8 21.7 305.9 18.4 308 20.7 C310.1 18.4 312.2 21.7 308 24.7 Z' fill='%23ffd1dc'/%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* The same love scene along the bottom of the top bar (topScene: true) */
:root[data-campaign="valentines"].top-scene .topbar { padding-bottom: 46px; }
:root[data-campaign="valentines"].top-scene .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 38 80 44 T160 42 T240 45 T320 43 L320 60 L0 60 Z' fill='%23a8205a'/%3E%3Cpath d='M0 53 Q60 48 120 52 T240 52 T320 52 L320 60 L0 60 Z' fill='%237a0b33'/%3E%3Cpath d='M20 46 v-14' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M20 32.5 C13 27.5 16.5 22 20 25.8 C23.5 22 27 27.5 20 32.5 Z' fill='%23ff6fa5'/%3E%3Cpath d='M30 46 v-10' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M30 36.6 C24.4 32.6 27.2 28.2 30 31.2 C32.8 28.2 35.6 32.6 30 36.6 Z' fill='%23e0115f'/%3E%3Crect x='52' y='30' width='26' height='17' rx='2' fill='%23fff7f9' stroke='%23e8a0b8' stroke-width='1'/%3E%3Cpath d='M52 31 L65 41 L78 31' fill='none' stroke='%23e8a0b8' stroke-width='1.2'/%3E%3Cpath d='M65 38.3 C61.5 35.8 63.3 33 65 34.9 C66.8 33 68.5 35.8 65 38.3 Z' fill='%23e0115f'/%3E%3Cpath d='M84 27.2 C79.1 23.7 81.6 19.8 84 22.4 C86.5 19.8 88.9 23.7 84 27.2 Z' fill='%23ff6fa5'/%3E%3Ccircle cx='100' cy='38' r='5' fill='%23ff3d7f'/%3E%3Cpath d='M97.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23b3124f' stroke-width='1'/%3E%3Cpath d='M100 43 v4' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M122 44 v-14' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M122 30.5 C115 25.5 118.5 20 122 23.8 C125.5 20 129 25.5 122 30.5 Z' fill='%23ffd1dc'/%3E%3Cpath d='M134 45 v-10' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M134 34.6 C128.4 30.6 131.2 26.2 134 29.2 C136.8 26.2 139.6 30.6 134 34.6 Z' fill='%23ff8fb8'/%3E%3Cpath d='M152 38 L148 45 M158 36 L154 43' stroke='%23ff8fb8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M150 44 L190 32' stroke='%23ffd24a' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M195 30 L185 31 L189 38 Z' fill='%23ffd24a'/%3E%3Cpath d='M210 26.7 C205.8 23.7 207.9 20.4 210 22.7 C212.1 20.4 214.2 23.7 210 26.7 Z' fill='%23ff3d7f'/%3E%3Cpath d='M232 45 v-12' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M232 33.5 C225 28.5 228.5 23 232 26.8 C235.5 23 239 28.5 232 33.5 Z' fill='%23ff3d7f'/%3E%3Cpath d='M242 46 v-9' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M242 37.6 C236.4 33.6 239.2 29.2 242 32.2 C244.8 29.2 247.6 33.6 242 37.6 Z' fill='%23ffffff'/%3E%3Ccircle cx='262' cy='38' r='5' fill='%23ffffff'/%3E%3Cpath d='M259.5 38 a2.5 2.5 0 1 1 5 0' fill='none' stroke='%23e8a0c0' stroke-width='1'/%3E%3Cpath d='M262 43 v4' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M284 45 v-13' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M284 31.5 C277 26.5 280.5 21 284 24.8 C287.5 21 291 26.5 284 31.5 Z' fill='%23e0115f'/%3E%3Cpath d='M296 45 v-9' stroke='%235c0a26' stroke-width='1.5'/%3E%3Cpath d='M296 36.6 C290.4 32.6 293.2 28.2 296 31.2 C298.8 28.2 301.6 32.6 296 36.6 Z' fill='%23ff8fb8'/%3E%3Cpath d='M308 24.7 C303.8 21.7 305.9 18.4 308 20.7 C310.1 18.4 312.2 21.7 308 24.7 Z' fill='%23ffd1dc'/%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="valentines"].top-scene .topbar { padding-bottom: 40px; }
  :root[data-campaign="valentines"].top-scene .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="valentines"] #shop-name { animation: none; }
}

/* ===== NEW YEAR THEME =====
   Only applies when campaign is "newyear" (set in shop-settings.js).
   Same ideas as the other core themes, in midnight navy and gold. */
:root[data-campaign="newyear"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #0d1033 0%, #343097 50%, #0d1033 100%);
  border-bottom-color: #e3b341;
  text-shadow: 0 1px 3px rgba(0, 0, 25, 0.7);
}
:root[data-campaign="newyear"] .info-bar {
  background: linear-gradient(180deg, #1c1f4a, #0b0d2a);
  border-bottom-color: #e3b341;
  text-shadow: 0 1px 2px rgba(0, 0, 20, 0.7);
}
:root[data-campaign="newyear"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(227, 179, 65, 0.22), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(70, 64, 200, 0.26), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(255, 92, 138, 0.07), transparent 45%);
}
:root[data-campaign="newyear"] {
  --fire-border: #d9b24a;
  --fire-glow: 0 0 14px rgba(227, 179, 65, 0.45);
}
/* Champagne-gold shop name with a sparkling glow; the O and Y drip little stars */
:root[data-campaign="newyear"] #shop-name,
:root[data-campaign="newyear"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #ffe9a8 30%, #ffcf4d 60%, #d99a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="newyear"] #shop-name { animation: sparkGlow 2.8s ease-in-out infinite; }
@keyframes sparkGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 1px 0 rgba(40, 25, 0, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 207, 77, 0.95)) drop-shadow(0 1px 0 rgba(40, 25, 0, 0.5)); }
}
:root[data-campaign="newyear"] .drip::after {
  width: 7px; height: 7px; border-radius: 0;
  background: #ffd24a;
  clip-path: polygon(50% 0%, 63% 33%, 98% 35%, 71% 56%, 81% 91%, 50% 72%, 19% 91%, 29% 56%, 2% 35%, 37% 33%);
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 210, 74, 0.9));
}
:root[data-campaign="newyear"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(227, 179, 65, 0.32), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(70, 64, 200, 0.34), transparent 42%);
}
/* Gold, white and midnight stripes under the shelf headings */
:root[data-campaign="newyear"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #e3b341 0 8px, #ffffff 8px 16px, #343097 16px 24px)
    bottom left / 100% 5px no-repeat;
}
/* New Year items: a gold edge and a firework bursting in the corner */
:root[data-campaign="newyear"] .card.season-card { border-color: #e3b341; }
:root[data-campaign="newyear"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%23ffd24a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M44 18 L44 6 M44 18 L54 10 M44 18 L56 18 M44 18 L54 26 M44 18 L44 30 M44 18 L34 26 M44 18 L32 18 M44 18 L34 10'/%3E%3C/g%3E%3Ccircle cx='44' cy='18' r='3' fill='%23fff3b0'/%3E%3Cg fill='%23ff5c8a'%3E%3Ccircle cx='44' cy='3' r='1.6'/%3E%3Ccircle cx='57' cy='8' r='1.6'/%3E%3Ccircle cx='59' cy='18' r='1.6'/%3E%3Ccircle cx='57' cy='28' r='1.6'/%3E%3C/g%3E%3Cpath d='M18 10 l1.8 3.7 4 .5 -2.9 2.8 .7 4 -3.6 -1.9 -3.6 1.9 .7 -4 -2.9 -2.8 4 -.5 z' fill='%2322d3ee'/%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
:root[data-campaign="newyear"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #4a43c9 0%, #2d2a8f 50%, #1a1860 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 30, 0.6);
  box-shadow: 0 2px 0 #ffd24a inset, 0 3px 10px rgba(45, 42, 143, 0.5);
}
:root[data-campaign="newyear"] .toast {
  background: linear-gradient(180deg, #3f39b5, #1a1860);
  box-shadow: 0 4px 16px rgba(60, 50, 180, 0.6);
}
:root[data-campaign="newyear"] .modal { box-shadow: 0 0 30px rgba(227, 179, 65, 0.55); }
/* Footer: a midnight city skyline with fireworks bursting above it */
:root[data-campaign="newyear"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Crect x='0' y='34' width='18' height='26' fill='%2311143a'/%3E%3Crect x='22' y='24' width='14' height='36' fill='%230b0d2a'/%3E%3Crect x='40' y='38' width='20' height='22' fill='%2311143a'/%3E%3Crect x='70' y='28' width='16' height='32' fill='%230b0d2a'/%3E%3Crect x='100' y='40' width='22' height='20' fill='%2311143a'/%3E%3Crect x='130' y='32' width='12' height='28' fill='%230b0d2a'/%3E%3Crect x='150' y='26' width='16' height='34' fill='%2311143a'/%3E%3Crect x='176' y='40' width='18' height='20' fill='%230b0d2a'/%3E%3Crect x='210' y='28' width='16' height='32' fill='%2311143a'/%3E%3Crect x='240' y='38' width='20' height='22' fill='%230b0d2a'/%3E%3Crect x='272' y='30' width='14' height='30' fill='%2311143a'/%3E%3Crect x='295' y='40' width='25' height='20' fill='%230b0d2a'/%3E%3Crect x='0' y='54' width='320' height='6' fill='%230b0d2a'/%3E%3Cg fill='%23ffd24a'%3E%3Crect x='5' y='38' width='2.4' height='3'/%3E%3Crect x='11' y='44' width='2.4' height='3'/%3E%3Crect x='26' y='28' width='2.4' height='3'/%3E%3Crect x='30' y='36' width='2.4' height='3'/%3E%3Crect x='75' y='33' width='2.4' height='3'/%3E%3Crect x='81' y='41' width='2.4' height='3'/%3E%3Crect x='155' y='31' width='2.4' height='3'/%3E%3Crect x='160' y='39' width='2.4' height='3'/%3E%3Crect x='215' y='33' width='2.4' height='3'/%3E%3Crect x='245' y='42' width='2.4' height='3'/%3E%3Crect x='277' y='35' width='2.4' height='3'/%3E%3C/g%3E%3Cg stroke='%23ffd24a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M60 14 L60 4 M60 14 L67 7 M60 14 L70 14 M60 14 L67 21 M60 14 L60 24 M60 14 L53 21 M60 14 L50 14 M60 14 L53 7'/%3E%3C/g%3E%3Ccircle cx='60' cy='14' r='2' fill='%23fff3b0'/%3E%3Cg stroke='%23ff5c8a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M140 10 L140 2 M140 10 L146 4 M140 10 L148 10 M140 10 L146 16 M140 10 L140 18 M140 10 L134 16 M140 10 L132 10 M140 10 L134 4'/%3E%3C/g%3E%3Ccircle cx='140' cy='10' r='1.8' fill='%23ffd1dc'/%3E%3Cg stroke='%2322d3ee' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M250 13 L250 4 M250 13 L257 6 M250 13 L259 13 M250 13 L257 20 M250 13 L250 22 M250 13 L243 20 M250 13 L241 13 M250 13 L243 6'/%3E%3C/g%3E%3Ccircle cx='250' cy='13' r='2' fill='%23c9f6ff'/%3E%3Cg stroke='%23ffd24a' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M300 8 L300 2 M300 8 L305 4 M300 8 L306 8 M300 8 L305 12 M300 8 L300 14 M300 8 L295 12 M300 8 L294 8 M300 8 L295 4'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='8' r='1'/%3E%3Ccircle cx='100' cy='6' r='1'/%3E%3Ccircle cx='180' cy='8' r='1'/%3E%3Ccircle cx='225' cy='5' r='1'/%3E%3Ccircle cx='290' cy='20' r='0.8'/%3E%3Ccircle cx='115' cy='18' r='0.8'/%3E%3C/g%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* The same skyline along the bottom of the top bar (topScene: true) */
:root[data-campaign="newyear"].top-scene .topbar { padding-bottom: 46px; }
:root[data-campaign="newyear"].top-scene .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Crect x='0' y='34' width='18' height='26' fill='%2311143a'/%3E%3Crect x='22' y='24' width='14' height='36' fill='%230b0d2a'/%3E%3Crect x='40' y='38' width='20' height='22' fill='%2311143a'/%3E%3Crect x='70' y='28' width='16' height='32' fill='%230b0d2a'/%3E%3Crect x='100' y='40' width='22' height='20' fill='%2311143a'/%3E%3Crect x='130' y='32' width='12' height='28' fill='%230b0d2a'/%3E%3Crect x='150' y='26' width='16' height='34' fill='%2311143a'/%3E%3Crect x='176' y='40' width='18' height='20' fill='%230b0d2a'/%3E%3Crect x='210' y='28' width='16' height='32' fill='%2311143a'/%3E%3Crect x='240' y='38' width='20' height='22' fill='%230b0d2a'/%3E%3Crect x='272' y='30' width='14' height='30' fill='%2311143a'/%3E%3Crect x='295' y='40' width='25' height='20' fill='%230b0d2a'/%3E%3Crect x='0' y='54' width='320' height='6' fill='%230b0d2a'/%3E%3Cg fill='%23ffd24a'%3E%3Crect x='5' y='38' width='2.4' height='3'/%3E%3Crect x='11' y='44' width='2.4' height='3'/%3E%3Crect x='26' y='28' width='2.4' height='3'/%3E%3Crect x='30' y='36' width='2.4' height='3'/%3E%3Crect x='75' y='33' width='2.4' height='3'/%3E%3Crect x='81' y='41' width='2.4' height='3'/%3E%3Crect x='155' y='31' width='2.4' height='3'/%3E%3Crect x='160' y='39' width='2.4' height='3'/%3E%3Crect x='215' y='33' width='2.4' height='3'/%3E%3Crect x='245' y='42' width='2.4' height='3'/%3E%3Crect x='277' y='35' width='2.4' height='3'/%3E%3C/g%3E%3Cg stroke='%23ffd24a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M60 14 L60 4 M60 14 L67 7 M60 14 L70 14 M60 14 L67 21 M60 14 L60 24 M60 14 L53 21 M60 14 L50 14 M60 14 L53 7'/%3E%3C/g%3E%3Ccircle cx='60' cy='14' r='2' fill='%23fff3b0'/%3E%3Cg stroke='%23ff5c8a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M140 10 L140 2 M140 10 L146 4 M140 10 L148 10 M140 10 L146 16 M140 10 L140 18 M140 10 L134 16 M140 10 L132 10 M140 10 L134 4'/%3E%3C/g%3E%3Ccircle cx='140' cy='10' r='1.8' fill='%23ffd1dc'/%3E%3Cg stroke='%2322d3ee' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M250 13 L250 4 M250 13 L257 6 M250 13 L259 13 M250 13 L257 20 M250 13 L250 22 M250 13 L243 20 M250 13 L241 13 M250 13 L243 6'/%3E%3C/g%3E%3Ccircle cx='250' cy='13' r='2' fill='%23c9f6ff'/%3E%3Cg stroke='%23ffd24a' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M300 8 L300 2 M300 8 L305 4 M300 8 L306 8 M300 8 L305 12 M300 8 L300 14 M300 8 L295 12 M300 8 L294 8 M300 8 L295 4'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='8' r='1'/%3E%3Ccircle cx='100' cy='6' r='1'/%3E%3Ccircle cx='180' cy='8' r='1'/%3E%3Ccircle cx='225' cy='5' r='1'/%3E%3Ccircle cx='290' cy='20' r='0.8'/%3E%3Ccircle cx='115' cy='18' r='0.8'/%3E%3C/g%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="newyear"].top-scene .topbar { padding-bottom: 40px; }
  :root[data-campaign="newyear"].top-scene .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="newyear"] #shop-name { animation: none; }
}

/* ===== BONFIRE NIGHT THEME =====
   Only applies when campaign is "bonfire" (set in shop-settings.js).
   Same ideas as the other core themes, in smoky night & blazing orange. */
:root[data-campaign="bonfire"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #2b0e00 0%, #c43c00 50%, #2b0e00 100%);
  border-bottom-color: #ffb400;
  text-shadow: 0 1px 3px rgba(25, 5, 0, 0.7);
}
:root[data-campaign="bonfire"] .info-bar {
  background: linear-gradient(180deg, #4a1800, #200a00);
  border-bottom-color: #ff7a18;
  text-shadow: 0 1px 2px rgba(20, 5, 0, 0.7);
}
:root[data-campaign="bonfire"] body::before {
  background:
    radial-gradient(circle at 50% 108%, rgba(255, 90, 0, 0.30), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(255, 180, 0, 0.14), transparent 38%),
    radial-gradient(circle at 85% 6%, rgba(180, 40, 0, 0.18), transparent 42%);
}
:root[data-campaign="bonfire"] {
  --fire-border: #ff7a18;
  --fire-glow: 0 0 14px rgba(255, 69, 0, 0.5);
}
/* White-hot shop name with a flickering ember glow; the O and Y drip flames */
:root[data-campaign="bonfire"] #shop-name,
:root[data-campaign="bonfire"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #ffd24a 30%, #ff7a18 62%, #ff2d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="bonfire"] #shop-name { animation: bonfireGlow 2.4s ease-in-out infinite; }
@keyframes bonfireGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 180, 0, 0.4)) drop-shadow(0 1px 0 rgba(40, 10, 0, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 100, 0, 0.95)) drop-shadow(0 1px 0 rgba(40, 10, 0, 0.5)); }
}
:root[data-campaign="bonfire"] .drip::after {
  width: 8px; height: 10px; border-radius: 0;
  background: #ff7a18;
  clip-path: path("M4 0 C5.5 2.5 7 4.5 7 6.5 C7 8.6 5.7 10 4 10 C2.3 10 1 8.6 1 6.5 C1 4.5 2.5 2.5 4 0 Z");
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 180, 0, 0.9));
}
:root[data-campaign="bonfire"] .topbar::before {
  background:
    radial-gradient(circle at 30% 135%, rgba(255, 110, 0, 0.35), transparent 45%),
    radial-gradient(circle at 75% -30%, rgba(150, 30, 0, 0.3), transparent 42%);
}
/* Flame-orange, gold and charcoal stripes under the shelf headings */
:root[data-campaign="bonfire"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #ff4500 0 8px, #ffd24a 8px 16px, #2b1a0f 16px 24px)
    bottom left / 100% 5px no-repeat;
}
/* Bonfire items: a flame-orange edge and a sparkler fizzing in the corner */
:root[data-campaign="bonfire"] .card.season-card { border-color: #ff7a18; }
:root[data-campaign="bonfire"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 58 L46 22' stroke='%238d8d8d' stroke-width='3' stroke-linecap='round'/%3E%3Cg stroke='%23ffd24a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M46 22 L46 10 M46 22 L55 14 M46 22 L58 22 M46 22 L55 30 M46 22 L46 34 M46 22 L37 30 M46 22 L34 22 M46 22 L37 14'/%3E%3C/g%3E%3Ccircle cx='46' cy='22' r='3' fill='%23fff3b0'/%3E%3Cg fill='%23ff4500'%3E%3Ccircle cx='46' cy='6' r='1.6'/%3E%3Ccircle cx='60' cy='12' r='1.6'/%3E%3Ccircle cx='61' cy='26' r='1.6'/%3E%3C/g%3E%3Cg fill='%23ff7a18'%3E%3Ccircle cx='52' cy='34' r='1.4'/%3E%3Ccircle cx='33' cy='13' r='1.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
:root[data-campaign="bonfire"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #ff7a18 0%, #e03e00 50%, #8a1e00 100%);
  text-shadow: 0 1px 2px rgba(40, 10, 0, 0.6);
  box-shadow: 0 2px 0 #ffd24a inset, 0 3px 10px rgba(224, 62, 0, 0.5);
}
:root[data-campaign="bonfire"] .toast {
  background: linear-gradient(180deg, #e05200, #7a2500);
  box-shadow: 0 4px 16px rgba(224, 82, 0, 0.6);
}
:root[data-campaign="bonfire"] .modal { box-shadow: 0 0 30px rgba(255, 122, 24, 0.55); }
/* Footer: a roaring bonfire on dark ground with fireworks in the sky */
:root[data-campaign="bonfire"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Crect x='0' y='52' width='320' height='8' fill='%23140800'/%3E%3Cpolygon points='36,52 80,44 82,48 38,56' fill='%234a2c14'/%3E%3Cpolygon points='38,44 82,52 80,56 36,48' fill='%233a2210'/%3E%3Cpath d='M58 14 C66 25 74 33 74 43 C74 51 67 55 58 55 C49 55 42 51 42 43 C42 33 50 25 58 14 Z' fill='%23e03e00'/%3E%3Cpath d='M58 23 C64 30 69 36 69 43 C69 49 64 53 58 53 C52 53 47 49 47 43 C47 36 52 30 58 23 Z' fill='%23ff7a18'/%3E%3Cpath d='M58 31 C62 36 64 40 64 44 C64 48 61 51 58 51 C55 51 52 48 52 44 C52 40 54 36 58 31 Z' fill='%23ffd24a'/%3E%3Cg fill='%23ffd24a'%3E%3Ccircle cx='50' cy='10' r='1.4'/%3E%3Ccircle cx='66' cy='6' r='1.2'/%3E%3Ccircle cx='72' cy='13' r='1.4'/%3E%3C/g%3E%3Cg fill='%23ff7a18'%3E%3Ccircle cx='44' cy='15' r='1.2'/%3E%3Ccircle cx='61' cy='3' r='1.1'/%3E%3C/g%3E%3Cg stroke='%23ffd24a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M160 12 L160 3 M160 12 L167 5 M160 12 L169 12 M160 12 L167 19 M160 12 L160 21 M160 12 L153 19 M160 12 L151 12 M160 12 L153 5'/%3E%3C/g%3E%3Ccircle cx='160' cy='12' r='2' fill='%23fff3b0'/%3E%3Cg stroke='%23ff4500' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M248 15 L248 6 M248 15 L255 8 M248 15 L257 15 M248 15 L255 22 M248 15 L248 24 M248 15 L241 22 M248 15 L239 15 M248 15 L241 8'/%3E%3C/g%3E%3Ccircle cx='248' cy='15' r='1.8' fill='%23ffd1a3'/%3E%3Cg stroke='%23ffb400' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M300 8 L300 2 M300 8 L305 4 M300 8 L306 8 M300 8 L305 12 M300 8 L300 14 M300 8 L295 12 M300 8 L294 8 M300 8 L295 4'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='110' cy='7' r='1'/%3E%3Ccircle cx='200' cy='5' r='1'/%3E%3Ccircle cx='285' cy='22' r='0.8'/%3E%3Ccircle cx='135' cy='18' r='0.8'/%3E%3C/g%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* The same bonfire scene along the bottom of the top bar (topScene: true) */
:root[data-campaign="bonfire"].top-scene .topbar { padding-bottom: 46px; }
:root[data-campaign="bonfire"].top-scene .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Crect x='0' y='52' width='320' height='8' fill='%23140800'/%3E%3Cpolygon points='36,52 80,44 82,48 38,56' fill='%234a2c14'/%3E%3Cpolygon points='38,44 82,52 80,56 36,48' fill='%233a2210'/%3E%3Cpath d='M58 14 C66 25 74 33 74 43 C74 51 67 55 58 55 C49 55 42 51 42 43 C42 33 50 25 58 14 Z' fill='%23e03e00'/%3E%3Cpath d='M58 23 C64 30 69 36 69 43 C69 49 64 53 58 53 C52 53 47 49 47 43 C47 36 52 30 58 23 Z' fill='%23ff7a18'/%3E%3Cpath d='M58 31 C62 36 64 40 64 44 C64 48 61 51 58 51 C55 51 52 48 52 44 C52 40 54 36 58 31 Z' fill='%23ffd24a'/%3E%3Cg fill='%23ffd24a'%3E%3Ccircle cx='50' cy='10' r='1.4'/%3E%3Ccircle cx='66' cy='6' r='1.2'/%3E%3Ccircle cx='72' cy='13' r='1.4'/%3E%3C/g%3E%3Cg fill='%23ff7a18'%3E%3Ccircle cx='44' cy='15' r='1.2'/%3E%3Ccircle cx='61' cy='3' r='1.1'/%3E%3C/g%3E%3Cg stroke='%23ffd24a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M160 12 L160 3 M160 12 L167 5 M160 12 L169 12 M160 12 L167 19 M160 12 L160 21 M160 12 L153 19 M160 12 L151 12 M160 12 L153 5'/%3E%3C/g%3E%3Ccircle cx='160' cy='12' r='2' fill='%23fff3b0'/%3E%3Cg stroke='%23ff4500' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M248 15 L248 6 M248 15 L255 8 M248 15 L257 15 M248 15 L255 22 M248 15 L248 24 M248 15 L241 22 M248 15 L239 15 M248 15 L241 8'/%3E%3C/g%3E%3Ccircle cx='248' cy='15' r='1.8' fill='%23ffd1a3'/%3E%3Cg stroke='%23ffb400' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M300 8 L300 2 M300 8 L305 4 M300 8 L306 8 M300 8 L305 12 M300 8 L300 14 M300 8 L295 12 M300 8 L294 8 M300 8 L295 4'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='110' cy='7' r='1'/%3E%3Ccircle cx='200' cy='5' r='1'/%3E%3Ccircle cx='285' cy='22' r='0.8'/%3E%3Ccircle cx='135' cy='18' r='0.8'/%3E%3C/g%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="bonfire"].top-scene .topbar { padding-bottom: 40px; }
  :root[data-campaign="bonfire"].top-scene .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="bonfire"] #shop-name { animation: none; }
}

/* ===== BLACK FRIDAY THEME =====
   Only applies when campaign is "blackfriday" (set in shop-settings.js).
   Same ideas as the other core themes, in jet black & deal-tag gold. */
:root[data-campaign="blackfriday"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255, 212, 0, 0.14) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #000000 0%, #2e2a14 50%, #000000 100%);
  border-bottom-color: #ffd400;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
:root[data-campaign="blackfriday"] .info-bar {
  background: linear-gradient(180deg, #1f1d12, #000000);
  border-bottom-color: #ffd400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
:root[data-campaign="blackfriday"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(255, 212, 0, 0.16), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(255, 212, 0, 0.10), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(255, 77, 77, 0.06), transparent 45%);
}
:root[data-campaign="blackfriday"] {
  --fire-border: #e3c23c;
  --fire-glow: 0 0 14px rgba(255, 212, 0, 0.45);
}
/* Gleaming gold shop name; the O and Y drip little price tags */
:root[data-campaign="blackfriday"] #shop-name,
:root[data-campaign="blackfriday"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #ffe97a 30%, #ffd400 60%, #a87900 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="blackfriday"] #shop-name { animation: saleGlow 2.6s ease-in-out infinite; }
@keyframes saleGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 230, 120, 0.4)) drop-shadow(0 1px 0 rgba(30, 25, 0, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 212, 0, 0.95)) drop-shadow(0 1px 0 rgba(30, 25, 0, 0.5)); }
}
:root[data-campaign="blackfriday"] .drip::after {
  width: 9px; height: 7px; border-radius: 0;
  background: #ffd400;
  clip-path: polygon(0% 50%, 32% 0%, 100% 0%, 100% 100%, 32% 100%);
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 212, 0, 0.9));
}
:root[data-campaign="blackfriday"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(255, 212, 0, 0.22), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(255, 212, 0, 0.14), transparent 42%);
}
/* Gold, charcoal and white stripes under the shelf headings */
:root[data-campaign="blackfriday"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #ffd400 0 8px, #111111 8px 16px, #ffffff 16px 24px)
    bottom left / 100% 5px no-repeat;
}
/* Deal items: a gold edge and a SALE tag swinging in the corner */
:root[data-campaign="blackfriday"] .card.season-card { border-color: #ffd400; }
:root[data-campaign="blackfriday"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(14 40 24)'%3E%3Cpath d='M26 12 L52 12 Q56 12 56 16 L56 32 Q56 36 52 36 L26 36 L16 24 Z' fill='%23ffd400' stroke='%23b8860b' stroke-width='2'/%3E%3Ccircle cx='24' cy='24' r='2.5' fill='%23fff8d8' stroke='%23b8860b' stroke-width='1.2'/%3E%3Ctext x='40' y='29' text-anchor='middle' font-family='Arial, sans-serif' font-weight='bold' font-size='11' fill='%23201a00'%3ESALE%3C/text%3E%3C/g%3E%3Cg fill='%23ff4d4d'%3E%3Ccircle cx='14' cy='44' r='1.6'/%3E%3Ccircle cx='50' cy='48' r='1.6'/%3E%3C/g%3E%3Cg fill='%23ffd400'%3E%3Ccircle cx='22' cy='52' r='1.4'/%3E%3Ccircle cx='42' cy='54' r='1.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
:root[data-campaign="blackfriday"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #ffe97a 0%, #ffd400 50%, #c9a500 100%);
  color: #201a00;
  text-shadow: none;
  box-shadow: 0 2px 0 #ffffff inset, 0 3px 10px rgba(255, 212, 0, 0.4);
}
:root[data-campaign="blackfriday"] .toast {
  background: linear-gradient(180deg, #2e2a14, #000000);
  box-shadow: 0 4px 16px rgba(255, 212, 0, 0.45);
}
:root[data-campaign="blackfriday"] .modal { box-shadow: 0 0 30px rgba(255, 212, 0, 0.5); }
/* Footer: a row of shopping bags with deal tags floating above them */
:root[data-campaign="blackfriday"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Crect x='0' y='52' width='320' height='8' fill='%230d0c06'/%3E%3Cpath d='M30 30 L62 30 L58 54 L34 54 Z' fill='%23ffd400'/%3E%3Cpath d='M38 30 Q46 18 54 30' stroke='%23b8860b' stroke-width='2.5' fill='none'/%3E%3Cpath d='M90 34 L116 34 L113 54 L93 54 Z' fill='%23ff4d4d'/%3E%3Cpath d='M96 34 Q103 24 110 34' stroke='%23a82b2b' stroke-width='2.2' fill='none'/%3E%3Cpath d='M150 32 L178 32 L175 54 L153 54 Z' fill='%23f0f0f0'/%3E%3Cpath d='M156 32 Q164 22 172 32' stroke='%239a9a9a' stroke-width='2.2' fill='none'/%3E%3Cpath d='M215 30 L245 30 L242 54 L218 54 Z' fill='%233a3a3a'/%3E%3Cpath d='M222 30 Q230 19 238 30' stroke='%23ffd400' stroke-width='2.4' fill='none'/%3E%3Cpath d='M280 36 L302 36 L300 54 L282 54 Z' fill='%23ffd400'/%3E%3Cpath d='M285 36 Q291 27 297 36' stroke='%23b8860b' stroke-width='2' fill='none'/%3E%3Cg transform='rotate(-14 135 16)'%3E%3Cpath d='M128 12 L144 12 Q146 12 146 14 L146 20 Q146 22 144 22 L128 22 L123 17 Z' fill='%23ffd400' stroke='%23b8860b' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='rotate(12 262 14)'%3E%3Cpath d='M255 10 L271 10 Q273 10 273 12 L273 18 Q273 20 271 20 L255 20 L250 15 Z' fill='%23ff4d4d' stroke='%23a82b2b' stroke-width='1.2'/%3E%3C/g%3E%3Cg fill='%23ffd400' font-family='Arial, sans-serif' font-weight='bold' font-size='10'%3E%3Ctext x='72' y='18'%3E%25%3C/text%3E%3Ctext x='196' y='14'%3E%25%3C/text%3E%3Ctext x='305' y='22'%3E%25%3C/text%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='10' r='1'/%3E%3Ccircle cx='108' cy='8' r='1'/%3E%3Ccircle cx='185' cy='24' r='0.8'/%3E%3Ccircle cx='232' cy='7' r='1'/%3E%3Ccircle cx='296' cy='6' r='0.8'/%3E%3C/g%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* The same bag-and-bargains scene along the bottom of the top bar (topScene: true) */
:root[data-campaign="blackfriday"].top-scene .topbar { padding-bottom: 46px; }
:root[data-campaign="blackfriday"].top-scene .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Crect x='0' y='52' width='320' height='8' fill='%230d0c06'/%3E%3Cpath d='M30 30 L62 30 L58 54 L34 54 Z' fill='%23ffd400'/%3E%3Cpath d='M38 30 Q46 18 54 30' stroke='%23b8860b' stroke-width='2.5' fill='none'/%3E%3Cpath d='M90 34 L116 34 L113 54 L93 54 Z' fill='%23ff4d4d'/%3E%3Cpath d='M96 34 Q103 24 110 34' stroke='%23a82b2b' stroke-width='2.2' fill='none'/%3E%3Cpath d='M150 32 L178 32 L175 54 L153 54 Z' fill='%23f0f0f0'/%3E%3Cpath d='M156 32 Q164 22 172 32' stroke='%239a9a9a' stroke-width='2.2' fill='none'/%3E%3Cpath d='M215 30 L245 30 L242 54 L218 54 Z' fill='%233a3a3a'/%3E%3Cpath d='M222 30 Q230 19 238 30' stroke='%23ffd400' stroke-width='2.4' fill='none'/%3E%3Cpath d='M280 36 L302 36 L300 54 L282 54 Z' fill='%23ffd400'/%3E%3Cpath d='M285 36 Q291 27 297 36' stroke='%23b8860b' stroke-width='2' fill='none'/%3E%3Cg transform='rotate(-14 135 16)'%3E%3Cpath d='M128 12 L144 12 Q146 12 146 14 L146 20 Q146 22 144 22 L128 22 L123 17 Z' fill='%23ffd400' stroke='%23b8860b' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='rotate(12 262 14)'%3E%3Cpath d='M255 10 L271 10 Q273 10 273 12 L273 18 Q273 20 271 20 L255 20 L250 15 Z' fill='%23ff4d4d' stroke='%23a82b2b' stroke-width='1.2'/%3E%3C/g%3E%3Cg fill='%23ffd400' font-family='Arial, sans-serif' font-weight='bold' font-size='10'%3E%3Ctext x='72' y='18'%3E%25%3C/text%3E%3Ctext x='196' y='14'%3E%25%3C/text%3E%3Ctext x='305' y='22'%3E%25%3C/text%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='10' r='1'/%3E%3Ccircle cx='108' cy='8' r='1'/%3E%3Ccircle cx='185' cy='24' r='0.8'/%3E%3Ccircle cx='232' cy='7' r='1'/%3E%3Ccircle cx='296' cy='6' r='0.8'/%3E%3C/g%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="blackfriday"].top-scene .topbar { padding-bottom: 40px; }
  :root[data-campaign="blackfriday"].top-scene .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="blackfriday"] #shop-name { animation: none; }
}

/* ===== FATHER'S DAY THEME =====
   Only applies when campaign is "fathersday" (set in shop-settings.js).
   Same ideas as the other core themes, in navy, bold blue and gold. */
:root[data-campaign="fathersday"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #1e3a8a 0%, #2563eb 50%, #0e7490 100%);
  border-bottom-color: #ffd24a;
  text-shadow: 0 1px 3px rgba(0, 10, 40, 0.6);
}
:root[data-campaign="fathersday"] .info-bar {
  background: linear-gradient(180deg, #1d4ed8, #172554);
  border-bottom-color: #ffd24a;
  text-shadow: 0 1px 2px rgba(0, 10, 40, 0.6);
}
:root[data-campaign="fathersday"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(37, 99, 235, 0.28), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(255, 210, 74, 0.18), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(14, 116, 144, 0.10), transparent 45%);
}
:root[data-campaign="fathersday"] {
  --fire-border: #60a5fa;
  --fire-glow: 0 0 14px rgba(59, 130, 246, 0.45);
}
/* Silver-blue-gold shop name; the O and Y drip little blue drops */
:root[data-campaign="fathersday"] #shop-name,
:root[data-campaign="fathersday"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 30%, #60a5fa 58%, #ffd24a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="fathersday"] #shop-name { animation: dadGlow 2.8s ease-in-out infinite; }
@keyframes dadGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 1px 0 rgba(0, 20, 60, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.95)) drop-shadow(0 1px 0 rgba(0, 20, 60, 0.5)); }
}
:root[data-campaign="fathersday"] .drip::after {
  background: linear-gradient(180deg, #93c5fd, #2563eb);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
}
:root[data-campaign="fathersday"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(37, 99, 235, 0.40), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(255, 210, 74, 0.26), transparent 42%);
}
/* Navy, gold and white stripes under the shelf headings */
:root[data-campaign="fathersday"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #1e3a8a 0 8px, #ffd24a 8px 16px, #ffffff 16px 24px)
    bottom left / 100% 5px no-repeat;
}
/* Father's Day items: a blue edge and a gold No.1 medal in the corner */
:root[data-campaign="fathersday"] .card.season-card { border-color: #3b82f6; }
:root[data-campaign="fathersday"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M38 2 l5 13 M54 2 l-5 13' stroke='%232563eb' stroke-width='4'/%3E%3Cpath d='M38 2 l5 13 M54 2 l-5 13' stroke='%231e3a8a' stroke-width='1.2'/%3E%3Ccircle cx='46' cy='24' r='10' fill='%23ffd24a' stroke='%23c99a00' stroke-width='1.6'/%3E%3Ctext x='46' y='28.5' text-anchor='middle' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='11' fill='%231e3a8a'%3E1%3C/text%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
:root[data-campaign="fathersday"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 50%, #1e3a8a 100%);
  text-shadow: 0 1px 2px rgba(0, 10, 40, 0.55);
  box-shadow: 0 2px 0 #ffd24a inset, 0 3px 10px rgba(37, 99, 235, 0.45);
}
:root[data-campaign="fathersday"] .toast {
  background: linear-gradient(180deg, #3b82f6, #1e3a8a);
  box-shadow: 0 4px 16px rgba(30, 58, 138, 0.6);
}
:root[data-campaign="fathersday"] .modal { box-shadow: 0 0 30px rgba(59, 130, 246, 0.55); }
/* Footer: a weekend scene — BBQ, football, golf, toolbox, tie and a medal */
:root[data-campaign="fathersday"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 38 80 44 T160 42 T240 45 T320 43 L320 60 L0 60 Z' fill='%234f9d4a'/%3E%3Cpath d='M0 53 Q60 48 120 52 T240 52 T320 52 L320 60 L0 60 Z' fill='%233d7f3a'/%3E%3Cg%3E%3Cpath d='M18 30 h22 a11 11 0 0 1 -22 0 z' fill='%231f2937'/%3E%3Crect x='16' y='27' width='26' height='3' rx='1.5' fill='%23374151'/%3E%3Cpath d='M22 40 l-3 6 M36 40 l3 6' stroke='%23374151' stroke-width='2'/%3E%3Cpath d='M24 24 q2 -4 0 -7 M29 24 q2 -4 0 -7 M34 24 q2 -4 0 -7' stroke='%23cbd5e1' stroke-width='1.2' fill='none' opacity='0.8'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='78' cy='38' r='6' fill='%23ffffff' stroke='%231f2937' stroke-width='1'/%3E%3Cpath d='M78 34.5 l2.8 2 -1 3.3 h-3.6 l-1 -3.3 z' fill='%231f2937'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M130 42 v-20' stroke='%23e5e7eb' stroke-width='1.4'/%3E%3Cpath d='M130 22 l10 4 -10 4 z' fill='%23ef4444'/%3E%3Cellipse cx='130' cy='42.5' rx='4' ry='1.2' fill='%231f2937'/%3E%3Ccircle cx='137' cy='41' r='1.6' fill='%23ffffff'/%3E%3C/g%3E%3Cg%3E%3Crect x='182' y='32' width='20' height='11' rx='1.5' fill='%23dc2626'/%3E%3Crect x='182' y='35' width='20' height='2' fill='%23991b1b'/%3E%3Cpath d='M188 32 v-3 h8 v3' stroke='%23374151' stroke-width='1.6' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M244 24 h6 l-1 3 l3 12 l-5 5 l-5 -5 l3 -12 z' fill='%232563eb'/%3E%3Cpath d='M244 24 h6 l-1 3 h-4 z' fill='%231e3a8a'/%3E%3Cpath d='M245.5 31 l4 2 M245 35 l5 2.4' stroke='%23ffd24a' stroke-width='1'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M288 22 l3 8 M296 22 l-3 8' stroke='%232563eb' stroke-width='2.4'/%3E%3Ccircle cx='292' cy='36' r='6' fill='%23ffd24a' stroke='%23c99a00' stroke-width='1'/%3E%3Cpath d='M292 32.4 l1.1 2.3 2.5 .3 -1.8 1.7 .5 2.5 -2.3 -1.2 -2.3 1.2 .5 -2.5 -1.8 -1.7 2.5 -.3 z' fill='%23c99a00'/%3E%3C/g%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* The same scene along the bottom of the top bar (topScene: true) */
:root[data-campaign="fathersday"].top-scene .topbar { padding-bottom: 46px; }
:root[data-campaign="fathersday"].top-scene .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 38 80 44 T160 42 T240 45 T320 43 L320 60 L0 60 Z' fill='%234f9d4a'/%3E%3Cpath d='M0 53 Q60 48 120 52 T240 52 T320 52 L320 60 L0 60 Z' fill='%233d7f3a'/%3E%3Cg%3E%3Cpath d='M18 30 h22 a11 11 0 0 1 -22 0 z' fill='%231f2937'/%3E%3Crect x='16' y='27' width='26' height='3' rx='1.5' fill='%23374151'/%3E%3Cpath d='M22 40 l-3 6 M36 40 l3 6' stroke='%23374151' stroke-width='2'/%3E%3Cpath d='M24 24 q2 -4 0 -7 M29 24 q2 -4 0 -7 M34 24 q2 -4 0 -7' stroke='%23cbd5e1' stroke-width='1.2' fill='none' opacity='0.8'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='78' cy='38' r='6' fill='%23ffffff' stroke='%231f2937' stroke-width='1'/%3E%3Cpath d='M78 34.5 l2.8 2 -1 3.3 h-3.6 l-1 -3.3 z' fill='%231f2937'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M130 42 v-20' stroke='%23e5e7eb' stroke-width='1.4'/%3E%3Cpath d='M130 22 l10 4 -10 4 z' fill='%23ef4444'/%3E%3Cellipse cx='130' cy='42.5' rx='4' ry='1.2' fill='%231f2937'/%3E%3Ccircle cx='137' cy='41' r='1.6' fill='%23ffffff'/%3E%3C/g%3E%3Cg%3E%3Crect x='182' y='32' width='20' height='11' rx='1.5' fill='%23dc2626'/%3E%3Crect x='182' y='35' width='20' height='2' fill='%23991b1b'/%3E%3Cpath d='M188 32 v-3 h8 v3' stroke='%23374151' stroke-width='1.6' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M244 24 h6 l-1 3 l3 12 l-5 5 l-5 -5 l3 -12 z' fill='%232563eb'/%3E%3Cpath d='M244 24 h6 l-1 3 h-4 z' fill='%231e3a8a'/%3E%3Cpath d='M245.5 31 l4 2 M245 35 l5 2.4' stroke='%23ffd24a' stroke-width='1'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M288 22 l3 8 M296 22 l-3 8' stroke='%232563eb' stroke-width='2.4'/%3E%3Ccircle cx='292' cy='36' r='6' fill='%23ffd24a' stroke='%23c99a00' stroke-width='1'/%3E%3Cpath d='M292 32.4 l1.1 2.3 2.5 .3 -1.8 1.7 .5 2.5 -2.3 -1.2 -2.3 1.2 .5 -2.5 -1.8 -1.7 2.5 -.3 z' fill='%23c99a00'/%3E%3C/g%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="fathersday"].top-scene .topbar { padding-bottom: 40px; }
  :root[data-campaign="fathersday"].top-scene .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="fathersday"] #shop-name { animation: none; }
}

/* ======= HALLOWEEN EXTRAS (match the Christmas treatment) ======= */
/* Orange & purple glow on the cards and boxes */
:root[data-campaign="halloween"] {
  --fire-border: #ff7a18;
  --fire-glow: 0 0 14px rgba(177, 75, 255, 0.45);
}
/* Spooky green-and-purple glow pulsing on the shop name */
:root[data-campaign="halloween"] #shop-name { animation: spookyGlow 2.6s ease-in-out infinite; }
@keyframes spookyGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(125, 255, 58, 0.45)) drop-shadow(0 1px 0 rgba(40, 0, 60, 0.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(177, 75, 255, 0.95)) drop-shadow(0 1px 0 rgba(40, 0, 60, 0.5)); }
}
/* The O and Y drip green slime */
:root[data-campaign="halloween"] .drip::after {
  background: linear-gradient(180deg, #c6ff6b, #4fd61a);
  box-shadow: 0 0 8px rgba(125, 255, 58, 0.9);
}
/* Orange and purple glow behind the top bar */
:root[data-campaign="halloween"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(255, 122, 24, 0.40), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(177, 75, 255, 0.36), transparent 42%);
}
/* A big glowing full moon in the sky (behind everything) */
:root[data-campaign="halloween"] body::after {
  content: "";
  position: fixed;
  top: 150px; right: 6%;
  width: 150px; height: 150px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 38%, rgba(0,0,0,0.10) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 58%, rgba(0,0,0,0.08) 0 12%, transparent 13%),
    radial-gradient(circle at 55% 28%, rgba(0,0,0,0.07) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #fff8dc, #ffe39a 60%, #f6c453 100%);
  box-shadow: 0 0 40px 12px rgba(255, 214, 120, 0.35), 0 0 120px 40px rgba(255, 160, 60, 0.15);
  opacity: 0.9;
}
@media (max-width: 560px) {
  :root[data-campaign="halloween"] body::after { width: 90px; height: 90px; top: 110px; right: 4%; }
}
/* Orange-and-black stripe under the shelf headings */
:root[data-campaign="halloween"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #ff7a18 0 8px, #1a0a2e 8px 16px)
    bottom left / 100% 5px no-repeat;
}
/* Halloween items: an orange edge and a spider's web in the corner */
:root[data-campaign="halloween"] .card.season-card { border-color: #ff7a18; }
:root[data-campaign="halloween"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23555' stroke-width='1'%3E%3Cpath d='M64 0 L0 0 M64 0 L10 30 M64 0 L30 52 M64 0 L64 64'/%3E%3Cpath d='M52 0 Q55 6 64 10'/%3E%3Cpath d='M40 0 Q46 13 64 22'/%3E%3Cpath d='M27 0 Q36 21 64 36'/%3E%3Cpath d='M14 0 Q26 30 64 50'/%3E%3Cpath d='M44 12 L41 30 L58 34'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M47 22 L47 31' stroke='%23444' stroke-width='0.8'/%3E%3Ccircle cx='47' cy='34' r='3.2' fill='%231a1a1a'/%3E%3Cg stroke='%231a1a1a' stroke-width='0.9' fill='none'%3E%3Cpath d='M44.5 33 l-3 -2 M44.5 35 l-3 1 M49.5 33 l3 -2 M49.5 35 l3 1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat top right / 64px 64px;
}
/* Pumpkin-orange to purple "Add to basket" buttons */
:root[data-campaign="halloween"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #ffa64d 0%, #ff7a18 45%, #c2410c 100%);
  text-shadow: 0 1px 2px rgba(60, 0, 60, 0.6);
  box-shadow: 0 2px 0 #b14bff inset, 0 3px 10px rgba(177, 75, 255, 0.45);
}
/* Purple "Added!" message */
:root[data-campaign="halloween"] .toast {
  background: linear-gradient(180deg, #8b3dff, #4b1a8f);
  box-shadow: 0 4px 16px rgba(120, 50, 220, 0.6);
}
:root[data-campaign="halloween"] .modal { box-shadow: 0 0 30px rgba(177, 75, 255, 0.55); }
/* Footer: a spooky graveyard on a hill */
:root[data-campaign="halloween"] .footer {
  position: relative;
  padding-top: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 30 80 40 T160 38 T240 42 T320 40 L320 60 L0 60 Z' fill='%232a1145'/%3E%3Cg fill='%23443060'%3E%3Cpath d='M30 44 v-14 a8 8 0 0 1 16 0 v14 z'/%3E%3Cpath d='M118 40 v-18 a9 9 0 0 1 18 0 v18 z'/%3E%3Crect x='206' y='26' width='4' height='18'/%3E%3Crect x='200' y='31' width='16' height='4'/%3E%3Cpath d='M268 42 v-12 a7 7 0 0 1 14 0 v12 z'/%3E%3C/g%3E%3Cg fill='%23ff7a18'%3E%3Cellipse cx='86' cy='38' rx='7' ry='5.5'/%3E%3Cellipse cx='244' cy='40' rx='5.5' ry='4.5'/%3E%3C/g%3E%3Cg fill='%23ffd24a'%3E%3Cpath d='M83 37 l1.5 -2 l1.5 2 z M88 37 l1.5 -2 l1.5 2 z M83 40 h7 l-1 1.5 h-5 z'/%3E%3C/g%3E%3C/svg%3E") top left / 320px 60px repeat-x;
}
/* A graveyard along the bottom of the top bar (turned on by
   topGraveyard: true in CAMPAIGNS.halloween — shop.js adds the class) */
:root[data-campaign="halloween"].top-graveyard .topbar { padding-bottom: 46px; }
:root[data-campaign="halloween"].top-graveyard .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60' preserveAspectRatio='none'%3E%3Cpath d='M0 46 Q40 30 80 40 T160 38 T240 42 T320 40 L320 60 L0 60 Z' fill='%232a1145'/%3E%3Cg fill='%23443060'%3E%3Cpath d='M30 44 v-14 a8 8 0 0 1 16 0 v14 z'/%3E%3Cpath d='M118 40 v-18 a9 9 0 0 1 18 0 v18 z'/%3E%3Crect x='206' y='26' width='4' height='18'/%3E%3Crect x='200' y='31' width='16' height='4'/%3E%3Cpath d='M268 42 v-12 a7 7 0 0 1 14 0 v12 z'/%3E%3C/g%3E%3Cg fill='%23ff7a18'%3E%3Cellipse cx='86' cy='38' rx='7' ry='5.5'/%3E%3Cellipse cx='244' cy='40' rx='5.5' ry='4.5'/%3E%3C/g%3E%3Cg fill='%23ffd24a'%3E%3Cpath d='M83 37 l1.5 -2 l1.5 2 z M88 37 l1.5 -2 l1.5 2 z M83 40 h7 l-1 1.5 h-5 z'/%3E%3C/g%3E%3C/svg%3E") bottom left / 320px 44px repeat-x;
}
@media (max-width: 560px) {
  :root[data-campaign="halloween"].top-graveyard .topbar { padding-bottom: 40px; }
  :root[data-campaign="halloween"].top-graveyard .topbar::after { height: 36px; background-size: 260px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="halloween"] #shop-name { animation: none; }
}

/* ===== CHRISTMAS THEME =====
   Only applies when campaign is "christmas" (set in shop-settings.js). */
:root[data-campaign="christmas"] .campaign-banner {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #0f5a2c 0%, #b3121f 50%, #0f5a2c 100%);
  border-bottom-color: #f4c542;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
:root[data-campaign="christmas"] .info-bar {
  background: linear-gradient(180deg, #1c7a3e, #0d4a24);
  border-bottom-color: #f4c542;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
:root[data-campaign="christmas"] body::before {
  background:
    radial-gradient(circle at 18% 95%, rgba(220, 30, 45, 0.26), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(30, 160, 80, 0.26), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(244, 197, 66, 0.08), transparent 45%);
}
:root[data-campaign="christmas"] #shop-name {
  background: linear-gradient(180deg, #ffffff 0%, #ffe9a8 30%, #f4c542 55%, #e2333f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Gold edges and glow on the cards and boxes instead of fiery orange */
:root[data-campaign="christmas"] {
  --fire-border: #d9ab35;
  --fire-glow: 0 0 14px rgba(244, 197, 66, 0.45);
}
/* Shop name: snowy white-to-gold-to-red with a soft golden glow */
:root[data-campaign="christmas"] #shop-name,
:root[data-campaign="christmas"] .drip {
  background: linear-gradient(180deg, #ffffff 0%, #fff3c4 30%, #f4c542 58%, #e2333f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-campaign="christmas"] #shop-name { animation: xmasGlow 2.6s ease-in-out infinite; }
@keyframes xmasGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45)) drop-shadow(0 1px 0 rgba(90, 0, 0, 0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(244, 197, 66, 0.9)) drop-shadow(0 1px 0 rgba(90, 0, 0, 0.4)); }
}
/* The dripping O and Y drop snowflakes instead of lava */
:root[data-campaign="christmas"] .drip::after {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.95);
}
/* Red and green glow behind the top bar */
:root[data-campaign="christmas"] .topbar::before {
  background:
    radial-gradient(circle at 28% 130%, rgba(226, 51, 63, 0.38), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(30, 160, 80, 0.34), transparent 42%);
}
/* ✨ Strings of fairy lights — drawn by shop.js (addFairyLights).
   Each bulb glows and twinkles on its own. Where they hang is set by
   "lights" in CAMPAIGNS.christmas in shop-settings.js. */
.fairy-lights {
  position: absolute;
  left: 0; right: 0;
  height: 34px;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
/* (the top bar makes its children sit in a row — keep the lights out of it) */
.topbar > .fairy-lights { position: absolute; z-index: 0; }
.fairy-lights svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fairy-lights.at-top    { bottom: -2px; }        /* along the bottom of the top bar */
.fairy-lights.at-info   { top: calc(100% - 6px); } /* hanging under the green strip */
.fairy-lights.at-footer { top: -10px; }           /* above the snowy footer */
:root[data-campaign="christmas"] .info-bar,
:root[data-campaign="halloween"] .info-bar,
:root[data-campaign="easter"] .info-bar,
:root[data-campaign="mothersday"] .info-bar,
:root[data-campaign="fathersday"] .info-bar,
:root[data-campaign="valentines"] .info-bar,
:root[data-campaign="newyear"] .info-bar,
:root[data-campaign="bonfire"] .info-bar,
:root[data-campaign="blackfriday"] .info-bar { position: relative; z-index: 3; }
.fl-bulb { animation: flTwinkle var(--fl-speed, 1.6s) ease-in-out var(--fl-delay, 0s) infinite; }
.fl-flag { transform-box: fill-box; transform-origin: 50% 0%; animation: flSway var(--fl-speed, 2.6s) ease-in-out var(--fl-delay, 0s) infinite; }
@keyframes flSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes flTwinkle {
  0%, 100% { opacity: 1; }
  45%      { opacity: 1; }
  60%      { opacity: 0.35; }
  75%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .fl-bulb, .fl-flag { animation: none; } }
/* On phones the top bar isn't sticky, so anchor the lights to it */
@media (max-width: 560px) {
  :root[data-campaign="christmas"] .topbar,
  :root[data-campaign="halloween"] .topbar,
  :root[data-campaign="easter"] .topbar,
  :root[data-campaign="mothersday"] .topbar,
  :root[data-campaign="fathersday"] .topbar,
  :root[data-campaign="valentines"] .topbar,
  :root[data-campaign="newyear"] .topbar,
  :root[data-campaign="bonfire"] .topbar,
  :root[data-campaign="blackfriday"] .topbar { position: relative; }
}
/* 🎅 Santa hat perched on the logo */
.logo-wrap { position: relative; display: inline-block; line-height: 0; }
.santa-hat {
  position: absolute;
  top: -4%;
  left: 8%;
  width: 48%;
  transform: rotate(-18deg);
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.santa-hat svg { width: 100%; height: auto; display: block; }
.santa-hat.witch-hat { top: -9%; left: 16%; width: 40%; transform: rotate(-10deg); }
.santa-hat.bunny-ears { top: -8%; left: 20%; width: 40%; transform: rotate(-6deg); }
.santa-hat.flower-crown { top: 0%; left: 18%; width: 56%; transform: rotate(-4deg); }
.santa-hat.dad-cap { top: -6%; left: 16%; width: 52%; transform: rotate(-8deg); }
.santa-hat.heart-crown { top: -1%; left: 17%; width: 56%; transform: rotate(-4deg); }
.santa-hat.party-hat { top: -11%; left: 24%; width: 38%; transform: rotate(8deg); }
.santa-hat.guy-hat { top: -12%; left: 17%; width: 42%; transform: rotate(-8deg); }
.santa-hat.sale-tag { top: -8%; left: 34%; width: 52%; transform: rotate(4deg); }

/* A "was" price shown crossed out next to a deal price (wasPrice on an item) */
.price .was-price {
  color: #8a7f74;
  font-weight: 600;
  font-size: 0.82em;
  margin-right: 3px;
  text-decoration-color: #d4442e;
  text-decoration-thickness: 2px;
}
.santa-hat.heart-boppers { top: -13%; left: 22%; width: 40%; transform: rotate(-5deg); }

/* Candy-cane stripe under the shelf headings */
:root[data-campaign="christmas"] .section-title {
  border-bottom: none;
  padding-bottom: 9px;
  background:
    repeating-linear-gradient(135deg, #e2333f 0 8px, #ffffff 8px 16px)
    bottom left / 100% 5px no-repeat;
}

/* Christmas items: a "snow on top" edge */
:root[data-campaign="christmas"] .card.season-card { border-color: #e2333f; }
:root[data-campaign="christmas"] .card.season-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 10px 0, #fff 9px, transparent 10px) 0 0 / 20px 14px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* Footer: a Christmas message on a snowy bank */
.footer-campaign { font-size: 17px; font-weight: 700; color: #ffe9a8; margin: 0 0 6px; }
:root[data-campaign="christmas"] .footer {
  position: relative;
  padding-top: 44px;
  background:
    radial-gradient(ellipse 52px 16px at 40px 22px, #f3f7ff 97%, transparent 100%) 0 0 / 80px 30px repeat-x,
    radial-gradient(ellipse 40px 12px at 0px 24px, #f3f7ff 97%, transparent 100%) 0 0 / 80px 30px repeat-x,
    linear-gradient(#f3f7ff, #f3f7ff) 0 22px / 100% 8px no-repeat;
}

/* 🎁 Gift message link + box on each item */
.gift-msg { margin: 2px 0 8px; }
.gift-toggle {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #b3121f;
  text-decoration: underline; text-underline-offset: 3px;
}
.gift-toggle:hover { color: #7a0c15; }
.gift-input {
  display: block; width: 100%; margin-top: 6px; padding: 8px 10px;
  border: 1px solid #d9ab35; border-radius: 10px; font: inherit; font-size: 13px;
  resize: vertical; background: #fff;
}
.gift-input.hidden { display: none; }
.gift-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Christmas red "Add to basket" buttons (sold-out items stay grey) */
:root[data-campaign="christmas"] .card:not(.sold-out) .add-btn {
  background: linear-gradient(180deg, #ff5a63 0%, #e2333f 45%, #b3121f 100%);
  text-shadow: 0 1px 2px rgba(80, 0, 0, 0.55);
  box-shadow: 0 2px 0 #f4c542 inset, 0 3px 10px rgba(179, 18, 31, 0.45);
}

/* Christmas-green "Added!" message */
:root[data-campaign="christmas"] .toast {
  background: linear-gradient(180deg, #22a35a, #126332);
  box-shadow: 0 4px 16px rgba(20, 120, 60, 0.6);
}
:root[data-campaign="christmas"] .modal { box-shadow: 0 0 30px rgba(244, 197, 66, 0.55); }
@media (prefers-reduced-motion: reduce) {
  :root[data-campaign="christmas"] .topbar::after,
  :root[data-campaign="christmas"] #shop-name { animation: none; }
}
/* Real falling snow: drawn by shop.js (startSnow) on this layer.
   It sits over the page but never blocks taps or clicks. */
#snow-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;            /* behind the shop, so it never covers the items */
  pointer-events: none;
}
/* The shop sits in front of the snow; the snow shows in the gaps */
:root[data-campaign="christmas"] main,
:root[data-campaign="christmas"] .footer,
:root[data-campaign="halloween"] main,
:root[data-campaign="halloween"] .footer,
:root[data-campaign="easter"] main,
:root[data-campaign="easter"] .footer,
:root[data-campaign="mothersday"] main,
:root[data-campaign="mothersday"] .footer,
:root[data-campaign="fathersday"] main,
:root[data-campaign="fathersday"] .footer,
:root[data-campaign="valentines"] main,
:root[data-campaign="valentines"] .footer,
:root[data-campaign="newyear"] main,
:root[data-campaign="newyear"] .footer,
:root[data-campaign="bonfire"] main,
:root[data-campaign="bonfire"] .footer,
:root[data-campaign="blackfriday"] main,
:root[data-campaign="blackfriday"] .footer { position: relative; z-index: 1; }

/* ===== Size option buttons (e.g. Small / Big) ===== */
.size-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.size-btn {
  flex: 1;
  min-width: 92px;
  padding: 9px 10px;
  border: 2px solid var(--fire-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  color: #222;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.size-btn:hover { background: rgba(255, 255, 255, 0.9); }
.size-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  color: #222;
  /* dark 'forge' background with glowing coals */
  background:
    radial-gradient(circle at 50% 120%, rgba(255,140,0,0.30), transparent 45%),
    linear-gradient(160deg, #241a14 0%, #14100d 60%, #0d0a08 100%);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* flickering embers layer that sits behind the content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 95%, rgba(255,120,0,0.28), transparent 38%),
    radial-gradient(circle at 82% 8%, rgba(255,60,0,0.20), transparent 38%);
  animation: forgeFlicker 4s ease-in-out infinite;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  /* dark 'forge' background with glowing embers */
  background: linear-gradient(160deg, #241a14 0%, #14100d 100%);
  border-bottom: 2px solid #3a2a1e;
  position: sticky;
  top: 0;
  z-index: 5;
  overflow: hidden;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 28% 130%, rgba(255,120,0,0.40), transparent 42%),
    radial-gradient(circle at 72% -30%, rgba(255,70,0,0.32), transparent 42%);
  animation: forgeFlicker 3.5s ease-in-out infinite;
}
@keyframes forgeFlicker {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}
.topbar > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 16px; }
.logo { height: 175px; width: auto; }
.topbar h1 { margin: 0; font-size: 30px; color: var(--accent); letter-spacing: 0.5px; }

/* "Fresh out of the forge" glowing hot-metal text */
#shop-name {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(180deg,
      #fff6c9 0%,    /* white-hot core */
      #ffd24a 22%,   /* bright yellow */
      #ff9a1e 50%,   /* orange */
      #ff4d00 78%,   /* red-orange */
      #c81e1e 100%); /* cooling red */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: emberGlow 2.4s ease-in-out infinite;
}
@keyframes emberGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,120,0,0.55)) drop-shadow(0 1px 0 rgba(120,20,0,0.4)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,90,0,0.95)) drop-shadow(0 1px 0 rgba(120,20,0,0.4)); }
}

/* Lava-drip letters (the O and Y) */
.drip {
  position: relative;
  /* give each dripping letter its own hot-metal colour */
  background: linear-gradient(180deg, #fff6c9 0%, #ffd24a 22%, #ff9a1e 50%, #ff4d00 78%, #c81e1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.drip::after {
  content: "";
  position: absolute;
  left: 52%;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-radius: 0 0 60% 60%;
  background: linear-gradient(180deg, #ffb347, #ff4d00);
  box-shadow: 0 0 8px rgba(255,90,0,0.9);
  transform: translateX(-50%);
  animation: lavaDrip 3.2s ease-in infinite;
}
.drip:nth-of-type(2)::after { left: 46%; animation-delay: 1.6s; }
.drip:nth-of-type(3)::after { left: 50%; animation-delay: 0.8s; }

@keyframes lavaDrip {
  0%   { height: 4px;  transform: translateX(-50%) translateY(0);   opacity: 0; }
  25%  { height: 10px; transform: translateX(-50%) translateY(2px); opacity: 1; }
  70%  { height: 8px;  transform: translateX(-50%) translateY(10px); opacity: 1; }
  100% { height: 5px;  transform: translateX(-50%) translateY(20px); opacity: 0; }
}

.slogan { margin: 2px 0 0; color: #e8c9a8; font-size: 15px; }

.basket-button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 13px 20px;
  border-radius: 999px;      /* pill shape = extra rounded */
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.basket-button:hover { filter: brightness(0.92); }

/* Top-right stack: share button above basket */
.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.share-btn {
  background: rgba(255,150,40,0.15);
  border: 1px solid var(--fire-border);
  color: #ffd9a0;
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  max-width: 240px; text-align: center; line-height: 1.25;
}
.share-btn:hover { background: rgba(255,150,40,0.35); }
.basket-button.bump { animation: bump 0.4s ease; }
@keyframes bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
#basket-total-badge { font-weight: 800; }

/* ---- Info bar ---- */
.info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  padding: 12px 20px;
  /* fiery strip */
  background: linear-gradient(180deg, #ffb347 0%, #ff7a18 45%, #e23b1e 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120,20,0,0.6);
  font-size: 15px;
  font-weight: 600;
  border-bottom: 2px solid #b3140c;
}
.info-bar span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Sections & product shelf ---- */
main { max-width: 1050px; margin: 0 auto; padding: 24px; }

.section-title {
  font-size: 22px;
  margin: 28px 0 14px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
  color: #ffedd8;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.card {
  background: var(--fire-card);
  border: 1px solid var(--fire-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--fire-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 26px rgba(255,90,0,0.75);
}
.card.sold-out {
  background: linear-gradient(160deg, #7a0d0d 0%, #4a0505 100%);
  border-color: #8b0000;
  box-shadow: none;
}
.card.sold-out:hover { transform: none; box-shadow: none; }
.card.sold-out .name { color: #ffffff; }
.card.sold-out .desc { color: #ffcccc; }
.card.sold-out .price { color: #ff9a9a; }
.card.sold-out .picture { background: rgba(0,0,0,0.25) !important; }
.card .picture {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  overflow: hidden;
  background: transparent !important;
}
/* show the WHOLE photo, fitted inside the box (never cropped) */
.card .product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.card .info { padding: 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card .name { font-weight: 700; font-size: 16px; }
.card .desc { font-size: 13px; line-height: 1.35; color: #2a2a2a; }
.card .name { color: #141414; }
.card .price { color: var(--accent); font-weight: 800; font-size: 19px; }

/* colour swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc; cursor: pointer; padding: 0;
}
.swatch.selected { box-shadow: 0 0 0 3px var(--accent); }
.chosen-colour { font-size: 13px; color: #333333; min-height: 16px; }

/* "Your choice" box (letters / puppies / sports) */
.choice-field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 700; color: #333333;
}
.choice-input {
  padding: 9px 11px; border: 1px solid #c98a4a; border-radius: 10px;
  font-size: 14px; font-family: inherit; background: #fff; color: #222;
}
.choice-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.card .add-btn {
  margin-top: auto;
  /* fiery flame gradient */
  background: linear-gradient(180deg, #ffd24a 0%, #ff9a1e 40%, #ff4d00 74%, #c81e1e 100%);
  background-size: 100% 220%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(120,20,0,0.55);
  border: none;
  padding: 11px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255,90,0,0.45);
  animation: fireFlicker 2s ease-in-out infinite;
}
@keyframes fireFlicker {
  0%, 100% { background-position: 0% 0%;  box-shadow: 0 0 8px rgba(255,90,0,0.40); }
  50%      { background-position: 0% 70%; box-shadow: 0 0 18px rgba(255,150,0,0.85); }
}
.card .add-btn:hover { filter: brightness(1.1); transform: scale(1.03); }

/* If someone's device asks for less motion, the forge holds still too
   (the falling snow/petals/bats already stop — this covers the glows).
   This sits AFTER the rules it calms, so it always wins. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .topbar::before,
  #shop-name,
  .drip::after,
  .card .add-btn { animation: none; }
}

/* sold out */
.card.sold-out .picture, .card.sold-out .info { opacity: 0.92; }
.card.sold-out .soon { color: #ffd0d0; }
/* ⭐ "Most popular" badge */
.popular-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: linear-gradient(180deg, #ffe27a, #f4b400);
  color: #3a2600; font-size: 12px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  pointer-events: none;
}
.card.is-popular { box-shadow: 0 0 0 2px #f4b400, var(--fire-glow); }

/* ⭐ "Please leave a review" box in the order popup */
.review-nudge {
  margin-top: 16px; padding: 14px 14px 12px;
  border-radius: 12px; border: 2px dashed #f4b400;
  background: rgba(255, 226, 122, 0.25);
}
.review-nudge p { margin: 6px 0 10px; font-size: 14px; }
.review-nudge-stars { font-size: 20px; letter-spacing: 2px; }
.review-nudge-btn { font-size: 14px; }

.sold-badge {
  position: absolute; top: 10px; right: 10px;
  background: #8b0000; color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
}
.card.sold-out .add-btn { background: #bbb; cursor: not-allowed; }
.soon { font-size: 13px; color: #8b0000; font-weight: 700; text-align: center; margin-top: auto; }

/* ---- About ---- */
.about {
  margin-bottom: 10px; background: var(--fire-card); border: 1px solid var(--fire-border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--fire-glow);
}
.about h2 { margin: 0 0 8px; color: #b3140c; }
.about p { margin: 0; color: #222222; }

/* ---- Search box ---- */
.searchbar { margin: 4px 0 20px; }
.searchbar input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--fire-border);
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  background: var(--fire-card);
  color: #3a1600;
  box-shadow: var(--fire-glow);
}
.searchbar input::placeholder { color: #7a4416; }
.searchbar input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* ---- Questions & Answers (FAQ) ---- */
.faq { margin-top: 36px; }
.faq h2 { text-align: center; color: var(--accent); margin: 0 0 18px; font-size: 24px; }
.faq details {
  background: var(--fire-card); border: 1px solid var(--fire-border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--fire-glow);
}
.faq summary { color: #141414; }
.faq .answer { color: #333333 !important; }
.faq summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--accent); font-size: 20px; }
.faq details[open] summary::after { content: "－"; }
.faq .answer { margin-top: 10px; color: #555; font-size: 14px; }

/* ---- Thank-you popup ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 20;
}
.modal {
  background: var(--fire-card); border: 1px solid var(--fire-border); border-radius: var(--radius);
  padding: 24px; max-width: 440px; width: 100%;
  max-height: 90vh; overflow-y: auto; position: relative; text-align: center;
  box-shadow: 0 0 30px rgba(255,90,0,0.6);
}
.modal .party { font-size: 46px; }
.modal h3 { margin: 6px 0 4px; }
.modal .ref {
  font-size: 24px; font-weight: 800; letter-spacing: 1px;
  background: #fff4f6; border: 2px dashed var(--accent); border-radius: 12px;
  padding: 10px; margin: 10px 0;
}
.modal .amount { font-size: 20px; font-weight: 800; color: var(--accent); }
.modal ol { text-align: left; padding-left: 20px; }
.modal a.pay-link, .modal a.email-link {
  display: block; text-align: center; text-decoration: none;
  padding: 14px; border-radius: 14px; margin: 8px 0; font-weight: 700;
}
.modal a.pay-link { background: var(--accent); color: #fff; }
.order-status { margin: 8px 0; font-weight: 700; font-size: 14px; }
.order-status.ok { color: #128a3e; }
.order-status.warn { color: #b3140c; }
.order-status a { color: var(--accent); }
.modal a.email-link { background: #fff; color: var(--accent); border: 2px solid var(--accent); }

/* ---- Custom request box ---- */
.custom {
  margin-top: 34px;
  background: var(--fire-card);
  border: 1px solid var(--fire-border);
  border-radius: var(--radius);
  box-shadow: var(--fire-glow);
  padding: 24px;
  text-align: center;
}
.custom h2 { margin: 0 0 8px; color: #b3140c; }
.custom p { margin: 0 auto 14px; color: #333333; max-width: 560px; }
.custom input, .custom textarea {
  display: block; width: 100%; max-width: 560px; margin: 0 auto 10px;
  padding: 12px; border: 1px solid #c98a4a; border-radius: 12px;
  font-size: 15px; font-family: inherit; background: #fff; color: #222;
}
.custom input:focus, .custom textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.custom .big-button { max-width: 300px; margin: 12px auto 0; display: block; }

/* ---- Reviews ---- */
.reviews { margin-top: 36px; }
.reviews h2 { text-align: center; color: var(--accent); margin: 0 0 8px; font-size: 24px; }
#reviews-average { text-align: center; color: #ffedd8; font-weight: 700; margin-bottom: 14px; }
#reviews-average .stars { color: #FFC72C; letter-spacing: 2px; }
.no-reviews { text-align: center; color: #f3e6d8; }

.review {
  background: var(--fire-card); border: 1px solid var(--fire-border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--fire-glow); max-width: 700px; margin-left: auto; margin-right: auto;
}
.review .stars { color: #e07800; font-size: 18px; letter-spacing: 2px; }
.review-text { color: #2a2a2a; margin: 6px 0; font-size: 14px; }
.review-name { color: #5a2c0e; font-size: 13px; font-weight: 700; }
.review.pending { border-style: dashed; }
.pending-badge {
  background: #fff; border-radius: 999px; padding: 2px 8px;
  font-size: 11px; color: #b3140c; font-weight: 700;
}

.review-form {
  background: var(--fire-card); border: 1px solid var(--fire-border);
  border-radius: var(--radius); box-shadow: var(--fire-glow);
  padding: 22px; margin-top: 16px; text-align: center;
}
.review-form h3 { margin: 0 0 10px; color: #b3140c; }
.review-form input[type="text"], .review-form textarea {
  display: block; width: 100%; max-width: 560px; margin: 0 auto 10px;
  padding: 12px; border: 1px solid #c98a4a; border-radius: 12px;
  font-size: 15px; font-family: inherit; background: #fff; color: #222;
}
.review-form input:focus, .review-form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.review-form .big-button { max-width: 300px; margin: 10px auto 8px; display: block; }

.star-picker { display: flex; gap: 6px; justify-content: center; margin: 2px 0 10px; }
.star-btn { background: none; border: none; font-size: 32px; line-height: 1; cursor: pointer; color: #c98a4a; padding: 2px; }
.star-btn.on { color: #e07800; }
.star-picker-label { text-align: center; font-size: 13px; font-weight: 700; color: #8a5a2b; margin: -4px 0 10px; min-height: 1em; }

/* ⭐ Half stars: an empty star with the left half filled in */
.star-row { white-space: nowrap; letter-spacing: 0; }
.star { position: relative; display: inline-block; margin-right: 2px; }
.star-btn .star { margin-right: 0; pointer-events: none; }
.star.half::before {
  content: "★"; position: absolute; left: 0; top: 0;
  width: 50%; overflow: hidden; white-space: nowrap;
}
.star-btn:not(.on) .star.half::before { color: #e07800; }

.bot-check { display: block; font-size: 14px; font-weight: 700; color: #333; margin: 4px 0 6px; }
.bot-check input {
  width: 80px; padding: 8px; border: 1px solid #c98a4a; border-radius: 8px;
  text-align: center; font-size: 15px; margin-left: 8px; background: #fff; color: #222;
}

/* the hidden bot-trap box: real people never see this */
.trap { position: absolute; left: -5000px; top: -5000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- Quality promises blurb ---- */
.promises { margin-top: 36px; }
.promises h2 {
  text-align: center; color: var(--accent); margin: 0 0 18px; font-size: 24px;
}
.promises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.promise {
  background: var(--fire-card); border: 1px solid var(--fire-border); border-radius: var(--radius);
  padding: 22px; text-align: center; box-shadow: var(--fire-glow);
}
.promise-icon { font-size: 40px; margin-bottom: 8px; }
.promise-title { font-weight: 800; font-size: 17px; margin-bottom: 6px; color: #141414; }
.promise-text { font-size: 14px; color: #333333; }

/* ---- Basket drawer ---- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: none; z-index: 8; }
.overlay.show { display: block; }

.basket {
  position: fixed; top: 0; right: -440px;
  width: 420px; max-width: 92vw; height: 100%;
  background: var(--fire-card); box-shadow: -4px 0 22px rgba(0,0,0,0.3);
  transition: right 0.25s ease; z-index: 9;
  display: flex; flex-direction: column; padding: 20px; overflow-y: auto;
}
.basket.open { right: 0; }

.basket-header { display: flex; justify-content: space-between; align-items: center; }
.basket-header h2 { margin: 0; }
.close-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; }

/* Saved "waiting to be paid" orders in the basket drawer */
.pending-title { margin: 14px 0 8px; font-size: 16px; color: #3a1600; }
.pending-order {
  background: rgba(255,255,255,0.6);
  border: 2px dashed var(--accent);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  text-align: center;
}
.pending-order .pending-ref {
  font-size: 18px; font-weight: 800; letter-spacing: 1px; color: #3a1600;
}
.pending-order .pending-note { font-size: 12px; color: #5a2c0e; margin: 4px 0 6px; }
.pending-order a.pay-link, .pending-order a.email-link {
  display: block; text-align: center; text-decoration: none;
  padding: 10px; border-radius: 10px; margin: 6px 0; font-weight: 700;
}
.pending-order a.pay-link { background: var(--accent); color: #fff; }
.pending-order a.email-link { background: #fff; color: var(--accent); border: 2px solid var(--accent); }
.pending-order .ghost-btn { width: 100%; margin-top: 4px; }

.basket-items { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.basket-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--fire-border); border-radius: 12px; padding: 8px 10px;
}
.basket-row .emoji { font-size: 26px; }
.basket-row .grow { flex: 1; }
.basket-row .variant { font-size: 13px; color: #333333; }
.basket-row .qty-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #ccc; background: #f2f2f2; cursor: pointer; font-size: 17px;
}
.basket-row .qty { min-width: 22px; text-align: center; }
.basket-row .remove-btn {
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 4px; border-radius: 6px;
}
.basket-row .remove-btn:hover { background: rgba(255,255,255,0.6); }
.empty-msg { color: #444444; text-align: center; padding: 24px 0; }

/* Bigger tap targets on phones — small fingers, small screens! */
@media (max-width: 640px) {
  .swatches { gap: 8px; }
  .swatch { width: 32px; height: 32px; }
  .basket-row .qty-btn { width: 38px; height: 38px; font-size: 19px; }
  .basket-row .remove-btn { padding: 10px; font-size: 18px; }
  .close-x { padding: 8px 14px; }
}

.basket-totals { border-top: 2px solid #eee; padding-top: 12px; font-size: 15px; }
.basket-totals .line { display: flex; justify-content: space-between; margin: 4px 0; }
.basket-totals .total { font-weight: 800; font-size: 21px; color: var(--accent); }
.basket-totals .deliver-note { margin-top: 10px; font-size: 13px; color: #333333; text-align: center; }

/* Keep shopping / empty basket buttons */
.basket-actions { display: flex; gap: 10px; margin-top: 14px; }
.ghost-btn {
  flex: 1; background: rgba(255,255,255,0.6); border: 1px solid var(--fire-border);
  color: #5a2c0e; padding: 10px; border-radius: 10px; cursor: pointer; font-weight: 600;
}
.ghost-btn:hover { background: rgba(255,255,255,0.85); }
.ghost-btn.danger { color: #b3140c; }

/* ---- Order form ---- */
.order-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.order-form h3 { margin: 6px 0 0; }
.order-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.order-form input, .order-form textarea {
  padding: 11px; border: 1px solid #ccc; border-radius: 12px; font-size: 15px; font-family: inherit;
  background: #fff; color: #222;
}
.big-button {
  background: var(--accent); color: #fff; border: none;
  padding: 15px; border-radius: 14px; font-size: 17px; font-weight: 700; cursor: pointer;
}
.big-button:hover { filter: brightness(0.92); }
.tiny { font-size: 13px; color: #555; text-align: center; margin: 0; }

/* ---- Pay panel ---- */
.pay-panel {
  margin-top: 18px; border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 16px; background: #fff4f6;
}
.pay-panel h3 { margin: 0 0 8px; }
.pay-panel .ref {
  font-size: 24px; font-weight: 800; letter-spacing: 1px;
  background: #fff; border: 2px dashed var(--accent); border-radius: 12px;
  padding: 10px; text-align: center; margin: 8px 0;
}
.pay-panel .amount { font-size: 20px; font-weight: 800; color: var(--accent); }
.pay-panel ol { padding-left: 20px; }
.pay-panel a.pay-link, .pay-panel a.email-link {
  display: block; text-align: center; text-decoration: none;
  padding: 14px; border-radius: 14px; margin: 8px 0; font-weight: 700;
}
.pay-panel a.pay-link { background: var(--accent); color: #fff; }
.pay-panel a.email-link { background: #fff; color: var(--accent); border: 2px solid var(--accent); }

/* ---- Dual payment buttons: Revolut (purple) + Stripe (blue) ---- */
a.pay-link.revolut-btn { background: #7c3aed; }
a.pay-link.stripe-btn  { background: #1a56db; }
.pay-options { display: flex; flex-direction: column; }
.pay-hint    { font-size: 13px; color: #5a2c0e; margin: 6px 0 2px; text-align: center; }

/* ---- Add-on option (e.g. add a bird to the sunflower) ---- */
.addon-row    { margin: 8px 0 2px; }
.addon-label  { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #5a2c0e; cursor: pointer; }
.addon-check  { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.addon-colours { margin-top: 6px; padding: 8px 8px 4px; background: rgba(255,150,0,0.10); border-radius: 10px; border: 1px solid #ffd89c; }

.hidden { display: none; }

/* "Added!" toast message */
.toast {
  position: fixed; top: 90px; right: 24px; z-index: 30;
  background: linear-gradient(180deg, #ff9a1e, #e23b1e); color: #fff;
  padding: 12px 18px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(255,90,0,0.6);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

#sections .empty-msg { color: #f3e6d8; }
.footer { text-align: center; color: #ddc9b6; padding: 24px; font-size: 14px; }
.footer a { color: var(--accent); font-weight: 600; }

/* ================= RESPONSIVE ================= */

/* Tablets */
@media (max-width: 820px) {
  .topbar { padding: 16px 18px; }
  .logo { height: 130px; }
  #shop-name { font-size: 34px; }
  main { padding: 18px; }
}

/* Phones */
@media (max-width: 560px) {
  .topbar {
    position: static;                 /* don't eat the screen on small phones */
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .brand { flex-direction: column; text-align: center; gap: 8px; }
  .logo { height: 96px; }
  #shop-name { font-size: 30px; }
  .slogan { font-size: 14px; }
  .header-right { align-items: stretch; width: 100%; }
  .share-btn { max-width: 100%; }
  .basket-button { width: 100%; }

  main { padding: 14px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .section-title { font-size: 20px; }
  .about, .custom, .promise, .faq details { padding: 18px; }
  .info-bar { font-size: 13px; gap: 6px 14px; padding: 10px 14px; }
  .basket { width: 100%; max-width: 100%; }
}

/* Tiny phones: 1 column so text isn't cramped */
@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* =======================================================================
   COLOUR PREVIEW ("see it in your colour")
   ======================================================================= */
.card .picture.clickable { cursor: zoom-in; }

.see-colour-btn {
  width: 100%;
  margin-top: 6px;
  font-size: 13px;
  padding: 8px 10px;
}

.colour-modal {
  max-width: 620px;
  width: 94vw;
  text-align: center;
}
.cp-title { margin: 0 0 10px; font-size: 19px; }

.cp-stage {
  position: relative;
  background: #f4f1ec;
  border-radius: 12px;
  overflow: hidden;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-stage canvas,
.cp-stage .cp-photo {
  max-width: 100%;
  max-height: 52vh;
  width: auto;
  height: auto;
  display: block;
}
.cp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6a6a6a;
}

.cp-chosen {
  margin: 12px 0 8px;
  font-weight: 700;
  font-size: 16px;
  min-height: 20px;
}

.cp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-bottom: 10px;
}
.cp-swatches .swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 0;
}
.cp-swatches .swatch.selected {
  outline: 3px solid var(--accent, #ff7a2f);
  outline-offset: 2px;
}
.cp-note { opacity: 0.75; margin-top: 4px; }

@media (max-width: 520px) {
  .cp-stage canvas, .cp-stage .cp-photo { max-height: 42vh; }
  .cp-swatches .swatch { width: 26px; height: 26px; }
}

/* Two-colour items: prompt until BOTH colours have been picked */
.card .chosen-colour.needed {
  color: #b00020;
  font-weight: 700;
}

/* =======================================================================
   EXTRA PHOTOS — thumbnails under the picture
   ======================================================================= */
.card .thumbs {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 6px 10px 0;
  flex-wrap: wrap;
}
.card .thumb {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  line-height: 0;
}
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card .thumb.selected {
  border-color: var(--accent, #ff7a2f);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

/* About the Maker: "\n\n" in aboutText makes a new paragraph */
#about-text { white-space: pre-line; }