/* ============================================================
   TESS Studio — site.css
   Header, footer, hero, services, location, catalog, detail,
   lightbox. Mobile-first; breakpoints at 480 / 768 / 900 / 1200.
   ============================================================ */

/* ---------------- top bar (delivery ribbon + header, sticky together) ---------------- */

.site-topbar {
  position: static;
}

@media (min-width: 768px) {
  .site-topbar {
    position: sticky;
    top: 0;
    z-index: 95;
  }
}

/* ---------------- delivery ribbon ---------------- */

.delivery-ribbon {
  background: var(--cyan);
  border-bottom: 2px solid var(--black);
}

.delivery-ribbon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-block: 7px;
  text-align: center;
}

.delivery-ribbon-inner span {
  color: var(--black);
  font-weight: 800;
  font-size: clamp(0.7rem, 2.6vw, 0.85rem);
  letter-spacing: 0.01em;
}

.ribbon-long {
  display: none;
}

@media (min-width: 480px) {
  .ribbon-short { display: none; }
  .ribbon-long { display: inline; }
}

.delivery-icon {
  flex: none;
  color: var(--black);
  animation: truck-drive 1.8s ease-in-out infinite;
}

@keyframes truck-drive {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ---------------- header ---------------- */

#site-header {
  background: var(--black);
  border-bottom: 1px solid var(--ink-line);
}

.site-nav {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: var(--sp-3);
}

.logo-link {
  display: flex;
  align-items: center;
}

/* Centering only applies to the nav's own logo (mobile: logo on its own
   row, centered above the nav links) — `justify-self` affects any block
   box, not just grid items, so it must stay scoped here or it also
   centers the footer's logo, which should stay flush left. */
.site-nav .logo-link {
  justify-self: center;
}

.logo-img,
.logo-svg {
  height: 52px;
  width: auto;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav-links a {
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--cyan);
  transition: right var(--dur-hover) var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  right: 0;
}

.nav-cakes-btn {
  position: relative;
  width: auto;
  height: auto;
  padding: 10px 16px;
  font-size: 0.85rem;
  justify-content: center;
  background: var(--cyan);
  border-color: var(--black);
  color: var(--black);
  box-shadow: none;
  overflow: visible;
}

.nav-cakes-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--cyan);
  animation: fab-pulse 2.6s var(--ease-out) infinite 1.3s;
  pointer-events: none;
}

.nav-cakes-btn svg {
  animation: nav-cake-wiggle 3.2s ease-in-out infinite;
}

@keyframes nav-cake-wiggle {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(-10deg); }
  92% { transform: rotate(8deg); }
  97% { transform: rotate(0deg); }
}

.nav-cakes-btn:hover {
  background: var(--cyan-bright);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--black);
}

.nav-cakes-btn[aria-current="page"] {
  background: var(--white);
}

/* Always visible — the label never shortens, on any device. */
.nav-cakes-label {
  display: inline;
}

.nav-cta {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  background: #25d366;
  border-color: var(--black);
  color: #0b0d0e;
  box-shadow: none;
  overflow: visible;
}

.nav-cta::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-pill);
  border: 2px solid #25d366;
  animation: fab-pulse 2.6s var(--ease-out) infinite;
  pointer-events: none;
}

.nav-cta:hover {
  background: #1fb959;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--black);
}

.nav-cta-label {
  display: none;
}

/* ---- Desktop: single row, logo left, nav centered, WhatsApp right ---- */
@media (min-width: 768px) {
  .site-nav {
    grid-template-columns: 1fr auto 1fr;
    justify-items: initial;
    align-items: center;
    padding: var(--sp-3) var(--gutter);
    row-gap: 0;
  }
  .site-nav .logo-link { justify-self: start; }
  .logo-img,
  .logo-svg { height: 40px; }
  .nav-row { display: contents; }
  .nav-center { grid-column: 2; justify-self: center; gap: var(--sp-6); }
  .nav-links a { font-size: 0.95rem; }
  .nav-cakes-btn { padding: 12px 18px; font-size: 0.95rem; }
  .nav-cta { grid-column: 3; justify-self: end; width: 48px; height: 48px; }
}

/* The header WhatsApp button stays icon-only at every size (it's the
   floating WhatsApp button's compact twin) so the Custom Cakes button
   next to it always has room to show its label. */

/* ---------------- footer ---------------- */

#footer {
  background: var(--black);
  color: var(--white);
  padding-block: var(--sp-16) var(--sp-8);
}

.footer-grid {
  display: grid;
  gap: var(--sp-12);
  grid-template-columns: 1fr;
}

/* Below 900px the floating social stack sits fixed over the footer's
   right edge once the page is scrolled all the way down — keep footer
   text clear of it instead of letting it run underneath. */
@media (max-width: 899px) {
  .footer-grid {
    padding-right: 78px;
  }
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.footer-col p {
  color: #c7ced0;
  margin-top: var(--sp-4);
  max-width: 32ch;
}

.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-line);
  color: var(--cyan);
  transition: border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}

.footer-social a:hover {
  border-color: var(--cyan);
  color: var(--white);
  transform: translateY(-2px);
}

.footer-col h3 {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: var(--sp-4);
}

.footer-col ul {
  display: grid;
  gap: var(--sp-3);
}

.footer-col a {
  color: #e7ecee;
  font-weight: 500;
}

.footer-col a:hover {
  color: var(--cyan);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--cyan);
}

.footer-bottom {
  max-width: var(--content-max);
  margin: var(--sp-12) auto 0;
  padding: var(--sp-6) var(--gutter) 0;
  border-top: 1px solid var(--gold);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--grey-text-dark);
}

@media (max-width: 899px) {
  .footer-bottom {
    padding-right: calc(var(--gutter) + 66px);
  }
}

/* ---------------- floating social stack ---------------- */

.social-fab-stack {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.social-fab {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
  animation: fab-bob 3.4s ease-in-out infinite;
}

.social-fab:hover,
.social-fab:focus-visible {
  transform: translate(-2px, -4px) scale(1.06);
  box-shadow: 8px 10px 0 var(--black);
  animation-play-state: paused;
}

.social-fab svg {
  position: relative;
  z-index: 1;
}

.social-fab-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--black);
  color: var(--white);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out);
}

.social-fab:hover .social-fab-tooltip,
.social-fab:focus-visible .social-fab-tooltip {
  opacity: 1;
}

#fab-whatsapp.show-tip .social-fab-tooltip {
  opacity: 1;
}

/* Brand colors are used deliberately here (the one exception to the
   site's cyan/black/white palette) so each icon reads instantly. */
.social-fab-whatsapp {
  width: 58px;
  height: 58px;
  background: #25d366;
  color: #0b0d0e;
  animation-delay: 0s;
}

.social-fab-instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  animation-delay: 0.5s;
}

.social-fab-facebook {
  background: #1877f2;
  animation-delay: 1s;
}

.social-fab-tiktok {
  background: #010101;
  color: #fff;
  box-shadow: -3px 3px 0 #25f4ee, 3px -3px 0 #fe2c55, var(--shadow-pop);
  animation-delay: 1.5s;
}

.social-fab-tiktok:hover {
  box-shadow: -4px 4px 0 #25f4ee, 4px -4px 0 #fe2c55, 8px 10px 0 var(--black);
}

@keyframes fab-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.social-fab-whatsapp::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-pill);
  border: 2px solid #25d366;
  animation: fab-pulse 2.6s var(--ease-out) infinite;
}

@keyframes fab-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  75%, 100% { transform: scale(1.55); opacity: 0; }
}

/* ---------------- marquee ---------------- */

.marquee {
  background: var(--black);
  color: var(--cyan);
  overflow: hidden;
  border-block: 1px solid var(--ink-line);
  padding-block: var(--sp-3);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}

.marquee-track span {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: var(--sp-6);
}

.marquee-track span span.dot {
  color: var(--white);
  font-weight: 400;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-10%); }
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
  .marquee-track span:not(:first-child) {
    display: none;
  }
}

/* ---------------- scallop section divider ---------------- */

.scallop-divider {
  position: relative;
  z-index: 1;
  line-height: 0;
}

.scallop-divider svg {
  display: block;
  width: 100%;
  height: 22px;
}

@media (min-width: 768px) {
  .scallop-divider svg {
    height: 30px;
  }
}

/* ---------------- hero ---------------- */

#hero {
  position: relative;
  min-height: min(100svh, 820px);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 960px) {
  #hero {
    min-height: min(100svh, 760px);
  }
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(41, 169, 224, 0.28), transparent 62%);
  pointer-events: none;
}

.hero-shape {
  position: absolute;
  stroke: var(--cyan);
  fill: none;
  pointer-events: none;
}

.hero-shape-whisk {
  top: 18px;
  left: -50px;
  width: 130px;
  opacity: 0.28;
}

/* ---------------- hero layout ---------------- */

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-12) var(--gutter);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--sp-8);
}

@media (min-width: 640px) {
  .hero-inner {
    padding-block: var(--sp-16);
  }
}

@media (min-width: 960px) {
  .hero-inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-12);
  }
}

/* ---------------- hero cake illustration ---------------- */
/* Wrapper owns position + the GSAP scroll parallax transform;
   the svg inside owns the idle float animation — two separate
   elements so the two transforms never fight each other.
   Below 960px it's a quiet backdrop behind the text; at 960px+
   it gets its own grid column, full size, no overlap with text. */

.hero-illustration-wrap {
  position: absolute;
  z-index: 0;
  top: -8px;
  right: -18px;
  width: 150px;
  pointer-events: none;
}

.hero-illustration-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(41, 169, 224, 0.35) 0%, rgba(41, 169, 224, 0.12) 45%, transparent 72%);
  z-index: -1;
}

.hero-illustration {
  display: block;
  width: 100%;
  height: auto;
  color: var(--cyan);
  opacity: 0.32;
}

.hero-illustration-structural :is(ellipse, rect, path) {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 480ms var(--ease-out);
}

.hero-illustration-structural > *:nth-child(1) { transition-delay: 0ms; }
.hero-illustration-structural > *:nth-child(2) { transition-delay: 45ms; }
.hero-illustration-structural > *:nth-child(3) { transition-delay: 90ms; }
.hero-illustration-structural > *:nth-child(4) { transition-delay: 135ms; }
.hero-illustration-structural > *:nth-child(5) { transition-delay: 180ms; }
.hero-illustration-structural > *:nth-child(6) { transition-delay: 225ms; }
.hero-illustration-structural > *:nth-child(7) { transition-delay: 270ms; }
.hero-illustration-structural > *:nth-child(8) { transition-delay: 315ms; }

.cake-drawn .hero-illustration-structural :is(ellipse, rect, path) {
  stroke-dashoffset: 0;
}

.hero-illustration-decorative {
  opacity: 0;
  transform: scale(0.7);
  transform-origin: 170px 260px;
  transition: opacity 400ms var(--ease-out) 420ms, transform 400ms var(--ease-out) 420ms;
}

.cake-drawn .hero-illustration-decorative {
  opacity: 1;
  transform: scale(1);
}

.cake-drawn .hero-illustration {
  animation: hero-cake-float 4.5s ease-in-out 0.8s infinite;
}

@keyframes hero-cake-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (min-width: 960px) {
  .hero-illustration-wrap {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    width: min(100%, 380px);
    max-width: 380px;
    margin: 0 auto;
  }

  .hero-illustration {
    opacity: 0.92;
  }
}

.hero-eyebrow {
  color: var(--cyan);
}

.hero-title {
  margin-top: var(--sp-4);
  font-size: var(--fs-hero);
  font-weight: 800;
}

/* The two-column layout (text | cake) narrows the text column, so the
   headline needs a size tuned to that column instead of the full-width
   clamp — otherwise long words wrap repeatedly and the hero balloons
   far past the viewport. */
@media (min-width: 960px) {
  .hero-title {
    font-size: clamp(2.5rem, 3.6vw, 4.25rem);
  }
}

.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.word {
  display: inline-block;
  will-change: transform;
}

.hero-title .grad {
  color: var(--cyan);
  position: relative;
}

.doodle-draw {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
}

.doodle-draw path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 700ms var(--ease-out) 900ms;
}

.hero-drawn .word-mask {
  overflow: visible;
}

.hero-drawn .doodle-draw path {
  stroke-dashoffset: 0;
}

.hero-sub {
  margin-top: var(--sp-6);
  max-width: 56ch;
  font-size: 1.15rem;
  color: #d6dcde;
}

.hero-rotator {
  margin-top: var(--sp-4);
  font-weight: 600;
  color: #d6dcde;
  height: 1.6em;
  overflow: hidden;
}

.hero-rotator-word {
  display: inline-block;
  color: var(--cyan);
  transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out);
}

.hero-buttons {
  margin-top: var(--sp-6);
}

.hero-info {
  margin-top: var(--sp-6);
  padding-right: 74px;
  color: var(--grey-text-dark);
  font-size: var(--fs-small);
  font-weight: 600;
}

@media (min-width: 640px) {
  .hero-buttons {
    margin-top: var(--sp-8);
  }
  .hero-info {
    margin-top: var(--sp-8);
    padding-right: 0;
  }
}

.hero-info span {
  color: var(--cyan);
  margin: 0 var(--sp-2);
}

/* ---------------- services ---------------- */

.services-section {
  background: var(--off-white);
}

.services-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

.service-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius-card);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

/* Makes the whole "Custom Cakes" card clickable to the catalog page, while
   the WhatsApp button and the inline text link stay independently clickable
   on top of it (both get their own stacking context below). */
.card-stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.service-card-linked .btn,
.service-card-linked .text-link {
  position: relative;
  z-index: 2;
}

.service-card-linked:hover {
  cursor: pointer;
}

.service-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--black);
}

.service-card[data-reveal] {
  transform: translateY(24px) scale(0.94) rotate(-1.2deg);
}

.service-card[data-reveal].is-visible {
  transform: translateY(0) scale(1) rotate(0deg);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--cyan-050);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  margin-bottom: var(--sp-2);
}

.service-icon svg {
  width: 26px;
  height: 26px;
}

.service-card p {
  color: var(--grey-text);
  flex: 1;
}

.service-card .btn-row {
  margin-top: var(--sp-4);
}

/* ---------------- location ---------------- */

.location-section {
  background: var(--black);
  color: var(--white);
}

.location-grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .location-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.location-copy h2 {
  margin-top: var(--sp-2);
}

.location-address {
  margin-top: var(--sp-4);
  color: #d6dcde;
  max-width: 48ch;
}

.location-links {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
}

.location-links .text-link svg {
  width: 16px;
  height: 16px;
}

.map-frame {
  border: 2px solid var(--cyan);
  border-radius: var(--radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .map-frame {
    aspect-ratio: 16 / 10;
  }
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------------- catalog masthead (shared: home hero uses #hero, inner pages use this) ---------------- */

.page-masthead {
  background: var(--black);
  color: var(--white);
  padding-block: var(--sp-16) var(--sp-12);
}

.page-masthead h1 {
  margin-top: var(--sp-2);
  font-size: clamp(2.25rem, 6vw, 4rem);
}

.page-masthead .section-sub {
  max-width: 60ch;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--grey-text-dark);
  margin-bottom: var(--sp-4);
}

.breadcrumb a {
  color: var(--cyan);
  font-weight: 600;
}

/* ---------------- catalog toolbar (mobile: category <select>, tablet+: filter chips) ---------------- */

.catalog-toolbar-bar {
  background: var(--black);
  padding-block: var(--sp-6) var(--sp-8);
}

.catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .catalog-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

.filter-select-wrap {
  display: block;
}

.filter-select-wrap select {
  width: 100%;
}

@media (min-width: 768px) {
  .filter-select-wrap {
    display: none;
  }
}

.toolbar-count {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--grey-text-dark);
  font-weight: 600;
}

@media (min-width: 768px) {
  .toolbar-count {
    order: 3;
    width: 100%;
  }
}

/* ---------------- filter chips (tablet+) ---------------- */

.filter-row {
  display: none;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .filter-row {
    display: flex;
  }
}

.filter-chip {
  flex: none;
  scroll-snap-align: start;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--grey-text-dark);
  color: var(--white);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: border-color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}

.filter-chip[aria-pressed="true"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--black);
}

.filter-chip:hover {
  border-color: var(--cyan);
}

/* ---------------- catalog sort ---------------- */

.catalog-sort {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.catalog-sort label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--grey-text-dark);
}

.select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--grey-text-dark);
  border-radius: var(--radius-pill);
  padding: 10px 38px 10px 18px;
  font-weight: 600;
  font-size: var(--fs-small);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out);
}

.select-wrap select:hover,
.select-wrap select:focus-visible {
  border-color: var(--cyan);
}

.select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  pointer-events: none;
}

/* ---------------- custom order banner ---------------- */

.custom-order-banner {
  background: var(--cyan);
  border-bottom: 2px solid var(--black);
}

.custom-order-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}

@media (min-width: 560px) {
  .custom-order-banner-inner {
    flex-direction: row;
    text-align: left;
  }
}

.custom-order-banner p {
  color: var(--black);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
}

.custom-order-banner svg {
  flex: none;
}

.custom-order-banner .btn-small {
  padding: 10px 20px;
  font-size: 0.85rem;
  background: var(--black);
  color: var(--cyan);
  border-color: var(--black);
  box-shadow: none;
}

.custom-order-banner .btn-small:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--black);
}

/* ---------------- product grid + cards ---------------- */

.catalog-section {
  background: var(--off-white);
  padding-block: var(--sp-16);
}

/* ---------------- FAQ (catalog page) ---------------- */

.faq-section {
  background: var(--white);
  border-top: 1px solid var(--grey-line);
}

.faq-section h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-6);
}

.faq-list {
  max-width: 70ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-item {
  border: 2px solid var(--black);
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-5);
  background: var(--off-white);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  position: relative;
  padding-right: var(--sp-8);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--cyan-ink);
  transition: transform var(--dur-hover) var(--ease-out);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: var(--sp-3);
  color: var(--grey-text);
  line-height: 1.6;
}

.product-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
}

@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
}

.product-card {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-pop-sm);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

.product-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-pop);
}

.product-card[data-reveal] {
  transform: translateY(24px) scale(0.94) rotate(1.2deg);
}

.product-card[data-reveal].is-visible {
  transform: translateY(0) scale(1) rotate(0deg);
}

.product-card:nth-child(3n+2)[data-reveal] {
  transform: translateY(24px) scale(0.94) rotate(-1.2deg);
}

.product-card:nth-child(3n+2)[data-reveal].is-visible {
  transform: translateY(0) scale(1) rotate(0deg);
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  display: block;
  overflow: hidden;
  border-bottom: 2px solid var(--black);
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms;
  transform: scale(1.08);
}

.product-card.is-visible .product-media img {
  transform: scale(1);
}

.product-card.is-visible .product-media:hover img {
  transform: scale(1.06);
}

.product-body {
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.product-body h2 {
  font-size: 1.2rem;
}

.product-body p {
  color: var(--grey-text);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rating-star {
  color: var(--cyan-ink);
}

.rating-value {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--black);
}

.rating-count {
  font-size: 0.85rem;
  color: var(--grey-text);
}

.product-price {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  font-size: 0.9rem;
  color: var(--grey-text);
}

.product-price strong {
  color: var(--black);
  font-size: 1.05rem;
}

.product-price-lg {
  font-size: 1.05rem;
  margin-top: var(--sp-2);
}

.product-price-lg strong {
  font-size: 1.3rem;
  color: var(--cyan-ink);
}

.product-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------------- detail page ---------------- */

.detail-section {
  background: var(--off-white);
  padding-block: var(--sp-16);
}

.detail-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.detail-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.zoom-trigger {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--ink);
  border: 2px solid var(--black);
  border-radius: var(--radius-media);
  overflow: hidden;
  cursor: zoom-in;
  padding: 0;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

.zoom-trigger:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-pop);
}

.zoom-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms, filter var(--dur-hover) var(--ease-out);
  transform: scale(1.08);
}

.zoom-trigger.is-visible img {
  transform: scale(1);
}

.zoom-trigger:hover img {
  filter: brightness(1.05);
}

.detail-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

@media (max-width: 639px) {
  .detail-gallery-main {
    aspect-ratio: 4 / 3;
  }

  .detail-gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
  }
}

.detail-gallery-thumb {
  border-radius: var(--radius-card);
}

.zoom-badge {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: var(--black);
  border: 2px solid var(--black);
  animation: badge-tick 2.8s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.zoom-badge svg {
  width: 18px;
  height: 18px;
}

@keyframes badge-tick {
  0%, 70%, 100% { transform: scale(1); }
  85% { transform: scale(1.15); }
}

.detail-masthead-sub {
  margin-top: var(--sp-2);
  color: var(--grey-text-dark);
  font-size: var(--fs-small);
  font-weight: 600;
}

.detail-copy {
  display: flex;
  flex-direction: column;
}

/* Below the 2-column breakpoint, put the WhatsApp CTA right after the
   price instead of making people scroll past the facts list to find it. */
@media (max-width: 899px) {
  .detail-copy .detail-facts {
    order: 1;
  }
}

.detail-copy .eyebrow {
  margin-bottom: var(--sp-2);
}

.detail-lead {
  margin-top: var(--sp-3);
  font-size: 1.1rem;
  color: var(--grey-text);
}

.size-range-badge {
  margin-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: var(--black);
  font-weight: 600;
  font-size: 0.95rem;
}

.size-range-badge svg {
  flex: none;
}

.size-range-badge strong {
  font-weight: 800;
}

.detail-facts {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  border-top: 1px solid var(--grey-line);
  padding-top: var(--sp-6);
}

.detail-fact dt {
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan-ink);
}

.detail-fact dd {
  margin: var(--sp-1) 0 0;
  color: var(--black);
}

.detail-copy .btn-row {
  margin-top: var(--sp-8);
}

@media (max-width: 639px) {
  .detail-facts {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    gap: var(--sp-3);
  }

  .detail-copy .btn-row {
    margin-top: var(--sp-4);
  }

  .detail-copy .btn-row .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}

/* ---------------- related cakes slider ---------------- */

.related-cakes {
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--grey-line);
}

@media (max-width: 639px) {
  .related-cakes {
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
  }
}

.related-cakes h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-5);
}

.related-cakes-wrap {
  position: relative;
}

.related-cakes-row {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}

.related-cakes-row::-webkit-scrollbar {
  display: none;
}

.related-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: var(--shadow-pop-sm);
  transition: opacity var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}

.related-nav:hover {
  background: var(--cyan);
}

.related-prev {
  left: -8px;
}

.related-next {
  right: -8px;
}

/* Desktop mouse: buttons reveal on hover, like a carousel control.
   Touch devices (no hover) keep them always visible since swipe alone
   isn't discoverable, and phones hide them — the row is narrow enough
   there that swiping is the natural gesture. */
@media (hover: hover) and (pointer: fine) {
  .related-nav {
    opacity: 0;
    pointer-events: none;
  }

  .related-cakes-wrap:hover .related-nav {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 639px) {
  .related-nav {
    display: none;
  }
}

.related-cake-card {
  flex: none;
  scroll-snap-align: start;
  width: clamp(140px, 42vw, 200px);
  display: block;
  transition: transform var(--dur-hover) var(--ease-out);
}

.related-cake-card:hover {
  transform: translateY(-3px);
}

.related-cake-media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 2px solid var(--black);
  background: var(--ink);
}

.related-cake-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-hover) var(--ease-out);
}

.related-cake-card:hover .related-cake-media img {
  transform: scale(1.06);
}

.related-cake-name {
  display: block;
  margin-top: var(--sp-2);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--black);
}

.related-cake-price {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan-ink);
}

.related-cake-price small {
  font-weight: 400;
  color: var(--grey-text);
}

.related-strip {
  margin-top: var(--sp-24);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--grey-line);
}

.related-strip h2 {
  font-size: var(--fs-h3);
}

.related-list {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.related-list a {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--black);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}

.related-list a:hover {
  background: var(--black);
  color: var(--white);
}

/* ---------------- lightbox ---------------- */

dialog#lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}

dialog#lightbox::backdrop {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
}

.lightbox-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

.lightbox-stage {
  max-width: min(90vw, 900px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-media);
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.lightbox-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lightbox-reset {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: var(--black);
  font-weight: 700;
  font-size: var(--fs-small);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out);
  z-index: 2;
}

.lightbox-reset.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lightbox-nav:hover {
  background: var(--cyan);
  color: var(--black);
}

.lightbox-prev {
  left: var(--sp-4);
}

.lightbox-next {
  right: var(--sp-4);
}

@media (max-width: 639px) {
  .lightbox-nav {
    top: auto;
    bottom: var(--sp-4);
    transform: none;
    width: 40px;
    height: 40px;
  }

  .lightbox-reset {
    bottom: calc(var(--sp-4) + 56px);
  }
}

.lightbox-caption {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* ---------------- 404 ---------------- */

.notfound-section {
  min-height: 100svh;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-8) var(--gutter);
}

.notfound-section h1 {
  font-size: clamp(3rem, 12vw, 8rem);
  color: var(--cyan);
}