/* Barks n' Batter Bakery — homepage
   Layout is measured against the 1199px-wide design comp. Sizes use cqw
   (1cqw = 1% of .page width) so the desktop layout scales exactly with the art. */

:root {
  --pink: #e2185f;
  --pink-hi: #f23c7c;
  --pink-lo: #c80d50;
  --teal: #17969a;
  --teal-hi: #2bb0b2;
  --teal-lo: #0d7c80;
  --teal-line: #93c1bf;
  --gold: #e8a33a;
  --ink: #1d1410;
  --cream: #f8e7da;
  --paper: #fdeadb;
  --pill: #f8eadd;
  --blush: #f19fab;
  --font-ui: "Fredoka", system-ui, sans-serif;
  --font-brush: "Kaushan Script", cursive;
  --font-hand: "Caveat", cursive;
  --font-paint: "Kaushan Script", cursive;   /* accents: shares the "Shop Our Treats" brush */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* layout rules (grid/flex) must never un-hide */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #efd9cb;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.page {
  container-type: inline-size;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(120, 60, 40, .12);
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  height: 66.3cqw;
  background: url("../img/hero-scene.jpg") top center / 100% auto no-repeat;
}

.nav {
  position: absolute;
  top: 6.5cqw;
  height: 6cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.nav--left  { left: 3.34cqw;  width: 31.03cqw; }
.nav--right { left: 68.22cqw; width: 29.52cqw; padding: 0 0 0 .9cqw; }

.nav-div {
  width: 2px;
  height: 3.4cqw;
  background: var(--teal-line);
  border-radius: 2px;
  opacity: .8;
}

.nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .45cqw;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.7cqw;
  line-height: 1;
  letter-spacing: .01em;
  color: #3a2721;
  white-space: nowrap;
  transition: transform .15s ease;
}
.nav-item:hover,
.nav-item:focus-visible,
.nav-dropdown:hover > .nav-item,
.nav-item[aria-expanded="true"] { color: var(--teal); }
.nav-item:hover { transform: translateY(-2px); }
.nav-item { transition: transform .15s ease, color .15s ease; }
.nav-home { transition: background .15s ease, color .15s ease; }
.nav-home:hover,
.nav-home:focus-visible { color: var(--teal); background: rgba(23, 150, 154, .12); }
.nav-item svg { height: 2cqw; width: auto; aspect-ratio: 1; flex: none; }
.nav-item .ic-bone { aspect-ratio: 48 / 28; height: 2.3cqw; }
.nav-item .chev { display: inline-block; height: .8cqw; width: 1.15cqw; vertical-align: middle; margin-left: .1cqw; }
.ic-pink { color: var(--pink); }
.ic-gold { color: var(--gold); }

.nav-home {
  display: flex;
  align-items: center;
  gap: .4cqw;
  padding: .5cqw 1cqw .5cqw .8cqw;
  border-radius: 999px;
  color: var(--pink-lo);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.7cqw;
  line-height: 1;
  letter-spacing: .01em;
  background: rgba(242, 60, 124, .1);
}
.nav-home svg { width: 1.8cqw; height: 1.8cqw; flex: none; }

.cart-icon { position: relative; }
.cart-icon { flex: none; }
.cart-icon svg { aspect-ratio: 44 / 40; height: 2.1cqw; }
.cart-count {
  position: absolute;
  top: -1.3cqw;
  right: -1.4cqw;
  min-width: 2cqw;
  height: 2cqw;
  padding: 0 .4cqw;
  border-radius: 1cqw;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1.3cqw;
  line-height: 1;
  border: 2px solid #fff;
}

/* Shop Treats dropdown */
.nav-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 1.6cqw);
  left: 50%;
  translate: -50% 0;
  min-width: 15cqw;
  padding: .6cqw;
  background: #fffaf6;
  border-radius: 1.2cqw;
  box-shadow: 0 1cqw 2.5cqw rgba(90, 40, 30, .2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, visibility .15s;
}
.nav-dropdown:hover .dropdown,
.nav-dropdown:focus-within .dropdown,
.nav-dropdown [aria-expanded="true"] + .dropdown { opacity: 1; visibility: visible; }
.dropdown a {
  display: block;
  padding: .7cqw 1cqw;
  border-radius: .8cqw;
  font-size: 1.45cqw;
  white-space: nowrap;
}
.dropdown a:hover { background: #fde3ec; color: var(--pink-lo); }

/* The logo sits on top of the hero art (covering the mockup's lower-res copy) */
.logo-link {
  position: absolute;
  left: 33.53cqw;
  top: .33cqw;
  width: 34.36cqw;
  z-index: 2;
  transition: transform .2s ease;
}
.logo-link img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .3cqw .6cqw rgba(90, 40, 20, .18)); }
.logo-link:hover { transform: scale(1.02); }

.nav-menu-btn, .mobile-menu { display: none; }

/* Trust bar sits on the cleared pill painted into the hero art */
.trust {
  position: absolute;
  left: 9.34cqw;
  top: 59.38cqw;
  width: 84.4cqw;
  height: 6.17cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  font-size: 1.72cqw;
  line-height: 1.12;
  text-align: center;
  padding: 0 1.4cqw;
}
.trust li + li { border-left: 2px solid var(--teal-line); }
.trust li:first-child { padding-left: 1cqw; }
.trust svg { width: 4.8cqw; height: 4.8cqw; flex: none; }

/* ---------------- Shop ---------------- */
.shop {
  position: relative;
  padding: .4cqw 3.2cqw 1.8cqw;
  background:
    radial-gradient(60% 80% at 0% 20%, rgba(236, 160, 170, .25), transparent 70%),
    linear-gradient(180deg, #f5e0d2 0%, var(--cream) 30%);
}
.shop::before {
  /* soften the seam between the hero art and the cream section */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3cqw;
  height: 3cqw;
  background: linear-gradient(180deg, transparent, #f5e0d2);
  pointer-events: none;
}

.shop-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  margin: 0 0 1.6cqw;
  font-weight: 400;
}
.brush {
  display: inline-block;
  padding: .4cqw 4.2cqw 1cqw 3.6cqw;
  font-family: var(--font-brush);
  font-size: 4.6cqw;
  line-height: 1.15;
  color: #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath fill='%2317969a' d='M14 9C90 3 300 1 392 6l-8 7 12 5-9 6 13 7-11 6 9 7-14 9C300 58 110 59 8 55l9-7-13-6 10-6-12-7 11-6-9-6z'/%3E%3Cpath fill='%2317969a' opacity='.55' d='M30 2h120l-2 3H34zM250 56h110l-4 3H254zM2 30h8l-3 4H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(-1.5deg);
}
.slashes {
  width: 4.6cqw;
  height: auto;
  fill: none;
  stroke: var(--pink);
  stroke-width: 5;
  stroke-linecap: round;
}
.slashes--r { transform: scaleX(-1); }

.cards {
  display: grid;
  grid-template-columns: repeat(5, 16.4cqw);
  justify-content: center;
  gap: 1.2cqw;
}
.card a {
  display: block;
  padding: .45cqw .45cqw .55cqw;
  background: #fff;
  border-radius: 1.5cqw;
  box-shadow: 0 .4cqw 1.2cqw rgba(120, 60, 40, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card a:hover { transform: translateY(-4px); box-shadow: 0 .8cqw 1.8cqw rgba(120, 60, 40, .25); }
.card img {
  width: 100%;
  height: 9cqw;
  object-fit: cover;
  border-radius: 1.1cqw 1.1cqw .5cqw .5cqw;
}
.card-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8cqw;
  margin-top: -.9cqw;
  height: 3.6cqw;
  border-radius: .9cqw;
  color: #fff;
  font-size: 1.65cqw;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 .2cqw .5cqw rgba(90, 30, 30, .15);
}
.card-btn svg { width: 1.9cqw; height: 1.9cqw; flex: none; }
.card-btn--pink { background: linear-gradient(180deg, var(--pink-hi), var(--pink-lo)); }
.card-btn--pink svg { color: var(--pink); }
.card-btn--teal { background: linear-gradient(180deg, var(--teal-hi), var(--teal-lo)); }
.card-btn--teal svg { color: var(--teal); }

/* ---------------- Batter Box ---------------- */
.batter-box { position: relative; background: var(--cream); padding-top: 1cqw; }

.bb-strip {
  position: relative;
  display: grid;
  grid-template-columns: 19.6cqw 20.6cqw auto 21cqw 1fr;
  align-items: center;
  height: 15.5cqw;
  padding: 0 2.3cqw 0 1.8cqw;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5), transparent 40%),
    var(--paper);
  /* torn paper edges */
  clip-path: polygon(0 6%, 4% 3%, 9% 7%, 15% 2%, 21% 6%, 27% 1%, 33% 5%, 40% 2%, 46% 6%, 53% 1%, 60% 5%, 66% 2%, 72% 6%, 79% 2%, 85% 5%, 91% 1%, 96% 5%, 100% 2%,
                     100% 95%, 95% 99%, 89% 95%, 83% 100%, 77% 96%, 70% 99%, 64% 94%, 57% 98%, 50% 95%, 43% 100%, 37% 96%, 30% 99%, 23% 94%, 16% 98%, 10% 95%, 4% 100%, 0 96%);
}
.bb-gift {
  width: 19cqw;
  height: auto;
  margin-top: -.5cqw;
}
.bb-title { margin: 0; }
.bb-title img { width: 19.8cqw; height: auto; }
.bb-div {
  width: 2px;
  height: 8.4cqw;
  background: var(--ink);
  margin: 0 1.4cqw 0 .6cqw;
}
.bb-tagline {
  position: relative;
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 2.3cqw;
  line-height: 1.12;
  text-align: center;
  transform: rotate(-4deg);
}
.bb-heart {
  position: absolute;
  right: .2cqw;
  top: -1.6cqw;
  width: 3.6cqw;
  height: 3.6cqw;
  color: var(--pink);
  transform: rotate(10deg);
}
.bb-swoosh {
  width: 16cqw;
  height: auto;
  margin: .5cqw auto 0;
  fill: none;
  stroke: var(--pink);
  stroke-width: 3;
  stroke-linecap: round;
}
.bb-btn {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  width: 34cqw;
  height: 6.7cqw;
  padding: 0 2.2cqw 0 2.6cqw;
  border-radius: 3.4cqw;
  color: #fff;
  font-size: 2.2cqw;
  font-weight: 600;
  background: linear-gradient(180deg, var(--pink-hi), var(--pink-lo));
  box-shadow: 0 .5cqw 1.2cqw rgba(200, 13, 80, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bb-btn:hover { transform: translateY(-3px); box-shadow: 0 .8cqw 1.6cqw rgba(200, 13, 80, .4); }
.bb-btn-gift { width: 3.6cqw; height: 3.6cqw; flex: none; }
.bb-btn span { flex: 1; text-align: center; white-space: nowrap; }
.bb-btn-arrow { width: 2.4cqw; height: 2.4cqw; flex: none; }


/* ---------------- Mobile ---------------- */
@media (max-width: 720px) {
  .hero { height: auto; padding-top: 58.4cqw; }

  .nav { height: 6cqw; }
  .nav--left { width: auto; gap: 8px; }
  .nav--left > .nav-div,
  .nav--left > .nav-dropdown,
  .nav--left > .nav-item,
  .nav-hide-sm,
  .nav-cart > span:last-child { display: none; }

  .nav-home { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 8px; }
  .nav-home svg { width: 17px; height: 17px; }
  .nav-home span { display: none; }

  .nav-menu-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  }
  .nav-menu-btn svg { width: 17px; height: 17px; }

  .nav--right { left: auto; right: 4.5cqw; width: auto; padding: 0; }
  .cart-icon svg { height: 22px; }
  .cart-count { top: -9px; right: -11px; min-width: 18px; height: 18px; font-size: 11px; border-radius: 9px; padding: 0 4px; }

  .mobile-menu {
    position: absolute;
    top: 17cqw;
    left: 3.3cqw;
    right: 3.3cqw;
    z-index: 5;
    padding: 6px;
    background: #fffaf6;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(90, 40, 30, .25);
  }
  .mobile-menu.is-open { display: block; }
  .mobile-menu a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 17px; }
  .mobile-menu a:hover { background: #fde3ec; }

  .trust {
    position: static;
    width: auto;
    height: auto;
    margin: 0 16px;
    padding: 12px 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 0;
    background: var(--pill);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(120, 60, 40, .12);
  }
  .trust li, .trust li:first-child { padding: 0 8px; gap: 8px; font-size: 13px; text-align: left; }
  .trust li + li { border-left: 0; }
  .trust li:nth-child(even) { border-left: 2px solid var(--teal-line); }
  .trust svg { width: 30px; height: 30px; }
  .trust br { display: none; }

  .shop { padding: 22px 16px 18px; }
  .shop::before { display: none; }
  .shop-title { gap: 8px; margin-bottom: 18px; }
  .brush { font-size: 30px; padding: 4px 26px 8px 22px; }
  .slashes { width: 28px; }

  .cards { grid-template-columns: repeat(2, minmax(0, 150px)); gap: 10px; }
  .card a { padding: 5px 5px 6px; border-radius: 16px; }
  .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
  .card img { height: 100px; border-radius: 12px 12px 6px 6px; }
  .card-btn { height: 34px; margin-top: -8px; border-radius: 10px; border-width: 2px; font-size: 13.5px; gap: 5px; }
  .card-btn svg { width: 16px; height: 16px; }

  .batter-box { padding-top: 8px; }
  .bb-strip {
    height: auto;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    row-gap: 10px;
    padding: 28px 16px 30px;
    clip-path: polygon(0 2%, 8% 1%, 17% 2.5%, 27% .5%, 38% 2%, 50% .5%, 62% 2%, 73% .5%, 84% 2.5%, 93% 1%, 100% 2%,
                       100% 98%, 92% 99.5%, 82% 98%, 71% 100%, 60% 98%, 49% 99.5%, 38% 98%, 26% 100%, 15% 98%, 6% 99.5%, 0 98%);
  }
  .bb-gift { width: 130px; margin: 0; }
  .bb-title img { width: 150px; }
  .bb-div { display: none; }
  .bb-tagline { grid-column: 1 / -1; font-size: 22px; margin-top: 4px; }
  .bb-heart { width: 26px; height: 26px; top: -14px; right: -18px; }
  .bb-swoosh { width: 150px; margin-top: 6px; }
  .bb-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
    height: 56px;
    padding: 0 20px;
    border-radius: 28px;
    border-width: 3px;
    font-size: 19px;
    gap: 10px;
  }
  .bb-btn-gift { width: 26px; height: 26px; }
  .bb-btn-arrow { width: 20px; height: 20px; }
}

/* ---------------- Inner pages ---------------- */
.hero--inner {
  height: 24.5cqw;
  /* the real top of the homepage art (drips + cream bar), fading into the page */
  background: url("../img/header-top.jpg") top center / 100% auto no-repeat, var(--cream);
}

/* ---------------- Shop page ---------------- */
.shop-page {
  padding: 0 3.2cqw 4cqw;
  min-height: 40vh;
}
.shop-page .shop-title { margin: -.5cqw 0 1.4cqw; }

.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cat-tab {
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--pink-lo);
  font-size: 16px;
  border: 2px solid #f6c3d4;
  transition: background .15s, color .15s, border-color .15s;
}
.cat-tab:hover { border-color: var(--pink); }
.cat-tab[aria-current="page"] {
  background: linear-gradient(180deg, var(--pink-hi), var(--pink-lo));
  border-color: transparent;
  color: #fff;
}
.cat-desc {
  margin: 14px auto 26px;
  max-width: 560px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 24px;
  line-height: 1.2;
}
.shop-status { text-align: center; font-size: 17px; color: #7a5a4c; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.product {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(120, 60, 40, .15);
}
.product-media { position: relative; }
.product-media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 15px;
}
.product-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.product-badge--soldout { background: var(--ink); }
.product-badge--local { background: var(--teal); }
.product-badge[hidden] { display: none; }
.product-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 10px 8px;
}
.product-name { margin: 0 0 4px; font-size: 19px; line-height: 1.2; }
.product-desc { margin: 0 0 14px; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #6b4f43; }
.product-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.product-price { margin: 0; font-size: 14px; color: #7a5a4c; white-space: nowrap; }
.product-price b { font-size: 21px; color: var(--pink-lo); }
.product-add {
  padding: 9px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  background: var(--teal);
  box-shadow: none;
  transition: transform .15s;
  white-space: nowrap;
}
.product-add:hover:not(:disabled) { background: var(--teal-lo); }
.product-add.is-added { background: var(--pink); }
.product-add:disabled { background: #cbbab1; box-shadow: none; cursor: not-allowed; }

@media (max-width: 720px) {
  .hero.hero--inner { padding-top: 24.5cqw; }
  .shop-page { padding: 4px 16px 28px; }
  .shop-page .shop-title { margin: 4px 0 16px; }
  .cat-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
  }
  .cat-tab { flex: none; font-size: 15px; padding: 8px 14px; }
  .cat-desc { font-size: 21px; margin: 10px auto 18px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product { padding: 4px; border-radius: 16px; }
  .product-media img { height: 120px; border-radius: 12px; }
  .product-badge { font-size: 10.5px; padding: 3px 7px; left: 6px; top: 6px; }
  .product-body { padding: 8px 6px 6px; }
  .product-name { font-size: 15.5px; }
  .product-desc { font-size: 12.5px; margin-bottom: 10px; }
  .product-foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .product-price b { font-size: 18px; }
  .product-add { font-size: 14px; padding: 8px; }
}

/* ---------------- Cart & order pages ---------------- */
.cart-cta {
  display: inline-flex;
  width: auto;
  height: 54px;
  padding: 0 34px;
  border-width: 3px;
  border-radius: 27px;
  font-size: 19px;
}
.cart-empty, .order-card { text-align: center; }
.cart-empty p { font-family: var(--font-hand); font-size: 28px; margin: 10px 0 22px; }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 26px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
.cart-lines { display: grid; gap: 14px; }
.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr auto 86px auto;
  align-items: center;
  gap: 16px;
  padding: 10px 16px 10px 10px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(120, 60, 40, .12);
}
.cart-line img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; }
.cart-line h3 { margin: 0 0 2px; font-size: 17px; }
.cart-line-unit { margin: 0; font-size: 14px; font-weight: 500; color: #7a5a4c; }
.cart-line-warn { margin: 4px 0 0; font-size: 13.5px; color: var(--pink-lo); }
.cart-line.is-unavailable img { filter: grayscale(1); opacity: .6; }
.cart-line-total { margin: 0; font-size: 18px; text-align: right; color: var(--pink-lo); }
.cart-line-remove { font-size: 13.5px; color: #8a6b5e; text-decoration: underline; }
.cart-line-remove:hover { color: var(--pink-lo); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid #f6c3d4;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.qty button { width: 34px; height: 34px; font-size: 20px; color: var(--pink-lo); }
.qty button:hover:not(:disabled) { background: #fde3ec; }
.qty button:disabled { color: #d8c8c0; cursor: not-allowed; }
.qty output { min-width: 30px; text-align: center; font-size: 16px; }

.cart-summary {
  position: sticky;
  top: 16px;
  padding: 22px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 16px rgba(120, 60, 40, .15);
}
.cart-summary h2 { margin: 0 0 14px; font-size: 21px; }
.cart-summary dl { margin: 0 0 16px; }
.cart-summary dl div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 16px; }
.cart-summary dd { margin: 0; }
.cart-subtotal { border-top: 2px dashed #f2d3c4; margin-top: 6px; padding-top: 12px !important; font-size: 19px !important; }
.cart-subtotal dd { color: var(--pink-lo); }
.cart-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fde3ec;
  color: var(--pink-lo);
  font-size: 14.5px;
}
.cart-checkout {
  width: 100%;
  height: 54px;
  border-radius: 27px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  background: var(--pink);
  box-shadow: 0 6px 16px rgba(200, 13, 80, .22);
  transition: background .15s, transform .15s;
}
.cart-checkout:hover:not(:disabled) { background: var(--pink-lo); transform: translateY(-1px); }
.cart-checkout:disabled { background: #cbbab1; box-shadow: none; cursor: not-allowed; }
.cart-secure { margin: 10px 0 4px; text-align: center; font-size: 13px; font-weight: 500; color: #8a6b5e; }
.cart-continue { display: block; text-align: center; font-size: 15px; color: var(--teal-lo); }

.order-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 26px 26px 30px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(120, 60, 40, .15);
}
.order-status { margin: 0 0 16px; font-family: var(--font-hand); font-size: 28px; line-height: 1.15; }
.order-number { margin: 0 0 14px; font-size: 17px; }
.order-number b { color: var(--pink-lo); }
.order-items { text-align: left; border-top: 2px dashed #f2d3c4; border-bottom: 2px dashed #f2d3c4; padding: 10px 0; }
.order-items li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15.5px; }
.order-total { display: flex; justify-content: space-between; margin: 12px 0 8px; font-size: 19px; }
.order-total b { color: var(--pink-lo); }
.order-note { margin: 0 0 22px; font-size: 14.5px; font-weight: 500; color: #7a5a4c; }

@media (max-width: 820px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-line {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas: "img info total" "img qty remove";
    gap: 6px 12px;
  }
  .cart-line img { grid-area: img; width: 72px; height: 72px; }
  .cart-line-info { grid-area: info; }
  .cart-line .qty { grid-area: qty; justify-self: start; }
  .cart-line-total { grid-area: total; font-size: 16px; }
  .cart-line-remove { grid-area: remove; justify-self: end; }
  .cart-line h3 { font-size: 15.5px; }
}
@media (max-width: 720px) {
  .cart-cta { grid-column: auto; height: 50px; font-size: 17px; }
  .order-card { padding: 20px 16px 24px; }
}


/* ---------------- Meet the Baker (same torn-paper strip as the Batter Box) ---------------- */
.baker-strip { padding-top: 2.4cqw; }

.baker-snap {
  justify-self: center;
  width: 14.5cqw;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: .55cqw solid #fff;
  border-radius: .4cqw;
  rotate: -5deg;
  box-shadow: 0 .4cqw 1cqw rgba(90, 40, 20, .25);
}
.baker-script {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 18cqw;
  height: 12.6cqw;
  margin: 0;
  font-family: var(--font-paint);
  font-weight: 400;
  font-size: 3.9cqw;
  line-height: .88;
  text-align: center;
  color: var(--pink-lo);
}
.baker-script span { rotate: -7deg; }
.baker-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--pink);
  stroke-width: 2.6;
  stroke-linecap: round;
  rotate: -6deg;
}
.baker-strip .bb-heart { right: -3cqw; top: 1.2cqw; }
/* centred group with a wide, growing text column */
.baker-strip .bb-tagline { text-align: left; }
.baker-hi { display: block; margin-bottom: .3cqw; font-size: 1.2em; color: var(--pink-lo); }
.baker-strip .bb-swoosh { margin-left: 0; }
@media (min-width: 721px) {
  .baker-strip .bb-strip {
    grid-template-columns: auto auto auto minmax(0, 36cqw);
    justify-content: center;
    column-gap: 2.4cqw;
    height: auto;
    min-height: 15.5cqw;
    padding-top: 2cqw;
    padding-bottom: 2cqw;
  }
  .baker-strip .bb-tagline { rotate: -2deg; transform: none; }
  .baker-strip .bb-div { margin: 0; }
}

@media (max-width: 720px) {
  .baker-strip { padding-top: 14px; }
  .baker-snap { width: 120px; border-width: 5px; }
  .baker-strip .bb-tagline { text-align: center; font-size: 20px; padding: 0 6px; }
  .baker-strip .bb-swoosh { margin: 6px auto 0; }
  .baker-script { width: 150px; height: 106px; font-size: 32px; }
}

/* Draft text the owner still needs to fill in */
.placeholder {
  color: #a08a80;
  font-style: italic;
  text-decoration: underline dotted #d9b8a8;
  text-underline-offset: .25em;
}

/* ---------------- Cart: pickup / delivery / shipping ---------------- */
.cart-main { display: grid; gap: 22px; }
.fulfill {
  padding: 20px 22px 22px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(120, 60, 40, .12);
}
.fulfill h2 { margin: 0 0 14px; font-size: 20px; }
.fulfill-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.method { position: relative; cursor: pointer; }
.method input { position: absolute; opacity: 0; }
.method-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 12px 14px;
  border: 2px solid #f2d3c4;
  border-radius: 14px;
  transition: border-color .15s, background .15s;
}
.method-card b { font-size: 16.5px; }
.method-card small { font-size: 13.5px; font-weight: 500; color: #7a5a4c; }
.method:hover .method-card { border-color: var(--pink); }
.method input:checked + .method-card { border-color: var(--pink); background: #fff1f6; box-shadow: inset 0 0 0 1px var(--pink); }
.method input:focus-visible + .method-card { outline: 3px solid var(--teal); outline-offset: 2px; }
.method input:disabled + .method-card { opacity: .45; cursor: not-allowed; border-color: #eadbd3; }

.fulfill-panel { margin-top: 16px; padding-top: 14px; border-top: 2px dashed #f2d3c4; }
.fulfill-note { margin: 0 0 12px; font-size: 14.5px; font-weight: 500; color: #6b4f43; }
.fulfill-note b { color: var(--ink); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid .span2 { grid-column: 1 / -1; }
.field-grid label { display: grid; gap: 5px; font-size: 13.5px; color: #6b4f43; }
.field-grid input, .field-grid select {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 2px solid #f2d3c4;
  border-radius: 12px;
  background: #fffaf6;
  font: 500 15.5px var(--font-ui);
  color: var(--ink);
}
.field-grid input:focus, .field-grid select:focus { outline: none; border-color: var(--teal); }
.fulfill-msg { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 14px; background: #e3f5f4; color: var(--teal-lo); }
.fulfill-msg.is-bad { background: #fde3ec; color: var(--pink-lo); }
.fulfill > .fulfill-msg { background: #fff5e0; color: #8a5a10; }
.ship-rates { display: grid; gap: 8px; margin-bottom: 12px; }
.ship-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid #f2d3c4;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
}
.ship-rate span { flex: 1; }
.ship-rate input { accent-color: var(--pink); width: 18px; height: 18px; }
.ship-rate:has(input:checked) { border-color: var(--pink); background: #fff1f6; }

@media (max-width: 720px) {
  .fulfill { padding: 16px 14px 18px; }
  .fulfill-methods { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr 1fr; }
}
.order-fulfill { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #e3f5f4; color: var(--teal-lo); font-size: 15.5px; }
.order-items .order-fee { color: #7a5a4c; }

/* ---------------- Footer ---------------- */
.site-footer {
  position: relative;
  padding: 30px 6% 18px;
  border-top: 2px solid var(--teal-line);
  background: linear-gradient(180deg, #f3ddd0, #efd3c4);
  color: #5a4038;
  font-weight: 500;
}
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* logo | links | contact, spread edge to edge */
  align-items: center;
  column-gap: 40px;
  padding-left: max(6%, calc((100% - 1080px) / 2));
  padding-right: max(6%, calc((100% - 1080px) / 2));
}
.footer-logo { justify-self: start; display: block; transition: transform .2s ease; }
.footer-logo:hover { transform: scale(1.03); }
.footer-logo img { display: block; width: 170px; height: auto; }

.footer-middle { text-align: center; }
.footer-tagline {
  margin: 0 0 10px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 22px;
  color: var(--pink-lo);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  font-size: 15.5px;
  font-weight: 600;
  color: #3a2721;
}
.footer-links a:hover { color: var(--teal); }

.footer-contact {
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 10px;
}
.footer-social { display: flex; gap: 6px; }
.footer-social a, .footer-email {
  color: #3a2721;                       /* same ink as the header links */
  transition: color .15s ease, transform .15s ease;
}
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; }
.footer-social a:hover, .footer-email:hover { color: var(--teal); transform: translateY(-2px); }
.footer-email { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }
.footer-email:hover { transform: none; }

/* footer icons drawn like the header's: one rounded pen line, same weight */
.doodle { width: 26px; height: 26px; flex: none; overflow: visible; }
.doodle g { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-email .doodle { width: 22px; height: 22px; }

.footer-bottom {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e6c8b9;
  text-align: center;
  font-size: 13px;
  color: #8a6b5e;
}
.footer-bottom a:hover { color: var(--pink-lo); }

@media (max-width: 760px) {
  .site-footer { grid-template-columns: 1fr; justify-items: center; row-gap: 16px; padding: 24px 20px 16px; text-align: center; }
  .footer-logo, .footer-contact { justify-self: center; }
  .footer-logo img { width: 150px; }
  .footer-contact { justify-items: center; }
  .footer-links { gap: 8px 20px; }
  .footer-bottom { margin-top: 4px; }
}


/* ---------------- Custom Orders page ---------------- */
.custom-form { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.form-card {
  margin: 0;
  padding: 18px 22px 22px;
  border: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(120, 60, 40, .12);
  min-width: 0;
}
.form-card legend {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  font-size: 19px;
  font-weight: 700;
}
.form-card legend + * { clear: both; }
.field-grid textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #f2d3c4;
  border-radius: 12px;
  background: #fffaf6;
  font: 500 15.5px/1.45 var(--font-ui);
  color: var(--ink);
  resize: vertical;
}
.field-grid textarea:focus { outline: none; border-color: var(--teal); }
.optional { font-weight: 500; color: #a08a80; }
.form-hint { margin: 10px 0 0; font-size: 13.5px; color: #8a6b5e; }
.form-label { margin: 0 0 8px; font-size: 13.5px; color: #6b4f43; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; border-radius: 14px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip span {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid #f2d3c4;
  border-radius: 999px;
  background: #fffaf6;
  font-size: 14.5px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover span { border-color: var(--pink); }
.chip input:checked + span { background: var(--pink); border-color: var(--pink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }

.photo-field { position: relative; }
.photo-field input[type="file"] {
  position: absolute; inset: auto 0 0 0; height: 42px; opacity: 0; cursor: pointer;
}
.photo-name {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 2px dashed #e7bfae;
  border-radius: 12px;
  background: #fffaf6;
  font-size: 14px;
  color: #8a6b5e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-field.has-file .photo-name { border-style: solid; border-color: var(--teal); color: var(--teal-lo); }
.photo-field:focus-within .photo-name { border-color: var(--teal); }

.is-invalid,
.field-grid .is-invalid { border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(226, 24, 95, .15); }
.chips.is-invalid { box-shadow: 0 0 0 3px rgba(226, 24, 95, .25); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.custom-submit { max-width: 360px; justify-self: center; }
.custom-form .cart-secure { margin-top: -6px; }
.custom-form .cart-error { margin: 0; }
.custom-done { margin-top: 10px; }

@media (max-width: 720px) {
  .form-card { padding: 16px 14px 18px; }
  .custom-page .field-grid { grid-template-columns: 1fr; }
}
.custom-page .field-grid { align-items: end; }

/* ---------------- Info pages (FAQs, Our Story, Batter Box) ---------------- */
.info-page { max-width: 820px; margin: 0 auto; }
.faq-group { margin-bottom: 26px; }
.faq-group h2 { margin: 0 0 12px; font-size: 21px; color: var(--teal-lo); }
.faq {
  margin-bottom: 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(120, 60, 40, .08);
}
.faq summary {
  position: relative;
  padding: 15px 48px 15px 20px;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%;
  translate: 0 -50%;
  font-size: 24px;
  color: var(--pink);
  transition: rotate .2s ease;
}
.faq[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--pink-lo); }
.faq-a { padding: 0 20px 16px; font-size: 15.5px; line-height: 1.55; color: #5a4038; }
.faq-a p { margin: 0; }
.faq-a a { color: var(--teal-lo); font-weight: 600; }
.info-cta { margin: 34px 0 10px; text-align: center; }
.info-cta p { margin: 0 0 12px; font-family: var(--font-hand); font-weight: 700; font-size: 24px; color: var(--pink-lo); }
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 34px; }

@media (max-width: 720px) {
  .faq summary { padding: 14px 44px 14px 16px; font-size: 15.5px; }
  .faq-a { padding: 0 16px 14px; font-size: 15px; }
}

/* Our Story */
.story-intro {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  align-items: center;
  margin-bottom: 34px;
}
.story-photo {
  margin: 0;
  padding: 10px 10px 36px;
  background: #fff;
  rotate: -3deg;
  box-shadow: 0 8px 22px rgba(90, 40, 20, .2);
}
.story-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.story-text p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: #5a4038; }
.story-text .story-hello { font-family: var(--font-hand); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--pink-lo); }
.story-text .story-sign { font-family: var(--font-paint); font-size: 24px; color: var(--teal-lo); }
.promises { padding: 24px; background: #fff; border-radius: 22px; box-shadow: 0 3px 14px rgba(120, 60, 40, .1); }
.promises h2 { margin: 0 0 18px; text-align: center; font-size: 21px; color: var(--teal-lo); }
.promises ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.promises li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.promises svg { width: 44px; height: 44px; }
.promises b { font-size: 16px; }
.promises span { font-size: 14px; font-weight: 500; line-height: 1.4; color: #7a5a4c; }
.info-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.info-btn--teal { background: var(--teal); box-shadow: 0 6px 16px rgba(13, 124, 128, .22); }
.info-btn--teal:hover:not(:disabled) { background: var(--teal-lo); }

@media (max-width: 720px) {
  .story-intro { grid-template-columns: 1fr; justify-items: center; gap: 26px; text-align: center; }
  .story-photo { width: min(260px, 72vw); }
  .promises { padding: 20px 16px; }
  .promises ul { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
}

/* The Batter Box */
.box-page { max-width: 980px; }
.box-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 28px;
  margin: 4px 0 30px;
  padding: 22px 30px;
  background: var(--paper);
  border-radius: 24px;
  box-shadow: 0 3px 14px rgba(120, 60, 40, .1);
}
.box-hero-gift { width: 100%; height: auto; }
.box-hero-title { margin: 0 0 6px; }
.box-hero-title img { width: 240px; height: auto; }
.box-hero-tag { margin: 0; max-width: 460px; font-family: var(--font-hand); font-weight: 700; font-size: 25px; line-height: 1.2; color: #5a4038; }
.box-section-title { margin: 0 0 16px; text-align: center; font-size: 22px; color: var(--teal-lo); }
.box-grid { margin-bottom: 34px; }
.box-grid .product-name { font-size: 19px; }
.box-steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.box-steps li {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 18px;
  text-align: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(120, 60, 40, .08);
  counter-increment: step;
}
.box-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
}
.box-steps b { font-size: 16px; }
.box-steps span { font-size: 14.5px; font-weight: 500; color: #7a5a4c; }

@media (max-width: 720px) {
  .box-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px 16px; gap: 10px; }
  .box-hero-gift { width: 160px; }
  .box-hero-title img { width: 200px; margin: 0 auto; }
  .box-hero-tag { font-size: 21px; }
  .box-steps ol { grid-template-columns: 1fr; }
}