:root {
  --brown-950: #332117;
  --brown-900: #493124;
  --brown-800: #5b3c2a;
  --brown-700: #714c33;
  --brown-600: #8a6246;
  --brown-500: #a17a5c;

  --caramel-500: #c69264;
  --caramel-400: #d2a478;
  --caramel-300: #e1bc92;

  --cream-500: #ead4b9;
  --cream-400: #efddc6;
  --cream-300: #f4e3cc;
  --cream-200: #f8ecdc;
  --cream-100: #fcf5eb;

  --ivory: #fffaf3;
  --white: #fffdf9;

  --text: var(--brown-950);
  --text-muted: rgba(51, 33, 23, 0.72);
  --text-soft: rgba(51, 33, 23, 0.76);

  --line: rgba(51, 33, 23, 0.12);
  --line-strong: rgba(51, 33, 23, 0.22);

  --success: #42613b;
  --error: #8b3d35;

  --font-display:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  --font-body:
    "Manrope",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --header-height: 68px;
  --mobile-nav-height: 70px;

  --content-width: 1220px;
  --page-padding: clamp(18px, 4.5vw, 58px);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --shadow-xs:
    0 4px 14px rgba(51, 33, 23, 0.05);

  --shadow-small:
    0 8px 24px rgba(51, 33, 23, 0.08);

  --shadow-soft:
    0 20px 60px rgba(51, 33, 23, 0.09);

  --shadow-medium:
    0 26px 80px rgba(51, 33, 23, 0.14);

  --shadow-dialog:
    0 32px 110px rgba(25, 15, 10, 0.34);

  --ease-standard:
    cubic-bezier(0.2, 0.7, 0.2, 1);

  --transition-tap: 150ms;
  --transition-ui: 220ms;
  --transition-sheet: 260ms;
  --transition-reveal: 500ms;
}

/* ===== RESET ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--ivory);
  font-family: var(--font-body);
  overflow-x: clip;
  padding-bottom:
    calc(
      var(--mobile-nav-height) +
      env(safe-area-inset-bottom)
    );
}

body:has(dialog[open]) {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button:not(:disabled),
a[href] {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

textarea {
  resize: vertical;
}

figure,
blockquote {
  margin: 0;
}

address {
  font-style: normal;
}

dialog {
  padding: 0;
}

[hidden] {
  display: none;
}

::selection {
  color: var(--white);
  background: var(--brown-900);
}

/* ===== ACCESSIBILITY ===== */

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

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 3000;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  color: #fff;
  background: var(--brown-950);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition:
    transform
    var(--transition-ui)
    var(--ease-standard);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline:
    3px solid
    var(--brown-700);
  outline-offset: 3px;
}

/* ===== BASE ===== */

.container {
  width:
    min(
      100%,
      calc(
        var(--content-width) +
        var(--page-padding) * 2
      )
    );

  margin-inline: auto;
  padding-inline: var(--page-padding);
}

.section {
  position: relative;
  scroll-margin-top: var(--header-height);
}

.viewport-section {
  min-height:
    calc(
      100svh -
      var(--header-height) -
      var(--mobile-nav-height)
    );

  display: flex;
  align-items: center;
}

.display-title,
.section-title,
.dialog-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.display-title {
  max-width: 11ch;
  font-size: clamp(2.65rem, 11.5vw, 4.4rem);
  line-height: 1.02;
}

.section-title {
  font-size: clamp(2.15rem, 9vw, 3.55rem);
  line-height: 1.04;
}

.display-title em,
.section-title em {
  color: var(--brown-700);
  font-style: italic;
  font-weight: 500;
}

.eyebrow {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.body-copy,
.hero-description {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(0.94rem, 2.6vw, 1rem);
  line-height: 1.65;
}

.demo-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.67rem;
  line-height: 1.45;
}

/* ===== BUTTONS ===== */

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;

  transition:
    transform var(--transition-tap) var(--ease-standard),
    box-shadow var(--transition-ui) ease,
    background-color var(--transition-ui) ease,
    border-color var(--transition-ui) ease;
}

.button:active {
  transform: scale(0.985);
}

.button-primary {
  color: #fff;
  background: var(--brown-900);
  box-shadow:
    0 10px 24px rgba(73, 49, 36, 0.18);
}

.button-secondary {
  color: var(--brown-900);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.5);
}

.button-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--brown-900);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.text-link {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--brown-900);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

/* ===== HEADER ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  height:
    calc(
      var(--header-height) +
      env(safe-area-inset-top)
    );

  padding-top:
    env(safe-area-inset-top);

  border-bottom:
    1px solid transparent;

  background:
    rgba(255, 250, 243, 0.9);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  transition:
    border-color var(--transition-ui) ease,
    box-shadow var(--transition-ui) ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);

  box-shadow:
    0 8px 28px
    rgba(51, 33, 23, 0.06);
}

.header-inner {
  height: var(--header-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 42px;
}

.desktop-nav,
.desktop-cart-trigger {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-count {
  min-width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  padding-inline: 5px;

  border-radius:
    var(--radius-pill);

  color:
    var(--brown-900);

  background:
    var(--cream-200);

  font-size: 0.68rem;
}

.mobile-menu {
  position: absolute;

  top:
    calc(
      var(--header-height) +
      env(safe-area-inset-top)
    );

  left: 0;
  right: 0;

  padding:
    8px
    var(--page-padding)
    16px;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(255, 250, 243, 0.99);

  box-shadow:
    var(--shadow-soft);

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-8px);

  transition:
    opacity var(--transition-ui) ease,
    visibility var(--transition-ui) ease,
    transform var(--transition-ui) var(--ease-standard);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-menu-nav {
  display: grid;
}

.mobile-menu-nav a {
  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 12px;

  border-bottom:
    1px solid
    rgba(51, 33, 23, 0.07);

  color:
    var(--text-muted);

  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

/* ===== DECORATIONS ===== */

.pastry-decoration,
.team-decoration {
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.pastry-decoration-cup {
  top: 12%;
  left: 4%;
  color: rgba(113, 76, 51, 0.08);
  transform: rotate(-10deg);
}

.pastry-decoration-cake {
  right: 3%;
  bottom: 8%;
  color: rgba(113, 76, 51, 0.09);
  transform: rotate(7deg);
}

.pastry-decoration
.material-symbols-outlined {
  font-size: 76px;
}

/* ===== HERO ===== */

.hero {
  min-height:
    calc(
      100svh -
      var(--header-height)
    );

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      var(--ivory) 0%,
      var(--ivory) 63%,
      #f3e2ca 63%,
      #f3e2ca 100%
    );
}

.hero-grid {
  width: 100%;

  display: grid;

  grid-template-rows:
    minmax(260px, 48svh)
    auto;

  gap:
    clamp(
      18px,
      3vh,
      28px
    );

  padding-top: 18px;

  padding-bottom:
    calc(
      20px +
      var(--mobile-nav-height)
    );
}

.hero-copy {
  order: 2;
  align-self: center;
}

.hero-copy .eyebrow {
  margin-bottom: 10px;
}

.hero-description {
  max-width: 440px;
  margin-top: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 21px;
}

.hero-actions .button {
  flex: 1 1 145px;
}

.hero-tastes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.taste-item {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.42);
  font-size: 0.72rem;
  font-weight: 600;
}

.hero-visual {
  position: relative;
  order: 1;
  min-height: 0;
}

.hero-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--cream-300);
  box-shadow: var(--shadow-soft);
}

.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(45, 28, 18, 0.26),
      transparent 45%
    );
  pointer-events: none;
}

.hero-photo-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border:
    1px solid
    rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(49, 29, 18, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ===== ABOUT ===== */

.about-section {
  overflow: hidden;
  background: var(--white);
}

.about-grid {
  width: 100%;
  display: grid;
  grid-template-rows:
    minmax(250px, 48svh)
    auto;
  gap:
    clamp(
      20px,
      3vh,
      30px
    );
  padding-block: 22px;
}

.about-media {
  position: relative;
  min-height: 0;
}

.about-photo-main {
  width: 88%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--cream-300);
}

.about-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-dessert-stamp {
  position: absolute;
  top: 17px;
  right: 1%;
  width: 112px;
  min-height: 112px;
  height: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--brown-700);
  background: var(--ivory);
  box-shadow: var(--shadow-small);
}

.about-copy {
  align-self: center;
}

.about-copy .section-title {
  margin-top: 7px;
}

.about-copy .body-copy {
  max-width: 470px;
  margin-top: 16px;
}

.about-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.about-feature {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--cream-100);
  font-size: 0.76rem;
  font-weight: 600;
}

/* ===== TEAM — COLLAGE TIPO FOTOS IMPRESAS / POLAROID ===== */

.team-section {
  position: relative;
  overflow: hidden;
  min-height: auto;
  padding:
    clamp(
      56px,
      5vw,
      78px
    )
    0;
  background:
    linear-gradient(
      180deg,
      #f4dfc4 0%,
      #f7e8d5 48%,
      #fbf5ed 100%
    );
}

.team-layout {
  position: relative;
  z-index: 2;
  display: grid;
  gap:
    clamp(
      24px,
      3vw,
      36px
    );
}

.team-header {
  width:
    min(
      100%,
      760px
    );
  display: grid;
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.team-header .section-title {
  max-width: 11ch;
  margin: 5px auto 0;
}

.team-lead {
  max-width: 64ch;
  margin: 13px auto 0;
  color: var(--text-muted);
  font-size:
    clamp(
      0.84rem,
      2.2vw,
      0.98rem
    );
  line-height: 1.65;
}

.team-collage {
  position: relative;

  width:
    min(
      100%,
      1180px
    );

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  grid-template-areas:
    "portrait wide"
    "small detail"
    "secondary secondary";

  gap:
    14px;

  margin-inline: auto;

  padding:
    10px;
}

.team-photo {
  position: relative;
  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  overflow: visible;

  padding:
    9px 9px 0;

  border-radius:
    2px;

  background:
    #fffdf8;

  box-shadow:
    0 14px 30px
    rgba(62, 39, 24, 0.15);

  transform-origin:
    center;

  transition:
    transform
    380ms
    var(--ease-standard),
    box-shadow
    380ms
    ease;
}

.team-photo::after {
  display: none;
}

.team-photo > img {
  width: 100%;
  height: 100%;
  min-height: 0;

  object-fit: cover;

  border-radius: 1px;

  transition:
    transform
    480ms
    var(--ease-standard);
}

.team-photo[data-team-photo].is-missing::before {
  content:
    "Fotografía del equipo";

  position: absolute;
  inset: 9px 9px 64px;

  z-index: 4;

  display: grid;
  place-items: center;

  padding: 20px;

  color:
    var(--text-soft);

  background:
    var(--cream-200);

  font-size: 0.72rem;
  font-weight: 700;

  text-align: center;
}

.team-photo[data-team-photo].is-missing > img {
  visibility: hidden;
}

.team-photo--portrait {
  grid-area: portrait;

  aspect-ratio:
    1.3 / 1;

  transform:
    rotate(-1.4deg);
}

.team-photo--wide {
  grid-area: wide;

  aspect-ratio:
    1.3 / 1;

  transform:
    rotate(1.1deg)
    translateY(8px);
}

.team-photo--small {
  grid-area: small;

  aspect-ratio:
    1.3 / 1;

  transform:
    rotate(1.25deg);
}

.team-photo--detail {
  grid-area: detail;

  aspect-ratio:
    1.3 / 1;

  transform:
    rotate(-1deg)
    translateY(6px);
}

.team-photo--portrait-secondary {
  grid-area: secondary;

  width:
    min(
      72%,
      720px
    );

  justify-self: center;

  aspect-ratio:
    1.75 / 1;

  transform:
    rotate(-0.7deg);
}

.team-photo-caption {
  position: static;

  min-height: 58px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding:
    9px 7px 11px;

  color:
    var(--brown-900);
}

.team-photo-caption span {
  flex: 0 0 auto;

  color:
    var(--brown-600);

  font-size: 0.55rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.team-photo-caption strong {
  min-width: 0;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      1rem,
      3vw,
      1.35rem
    );

  font-weight: 600;

  line-height: 1;

  text-align: right;
}

.team-phrase {
  display: none;
}

.team-note {
  max-width: 650px;
  margin-inline: auto;
  text-align: center;
}

.team-decoration {
  color:
    rgba(73, 49, 36, 0.04);
}

.team-decoration-spoon {
  top: 7%;
  left: 1.5%;
  transform: rotate(-35deg);
}

.team-decoration-cup {
  right: 1.5%;
  bottom: 7%;
  transform: rotate(8deg);
}

.team-decoration
.material-symbols-outlined {
  font-size: 100px;
}

/* ===== MENU ===== */

.menu-section {
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      #f5e6d1,
      #fbf3e8
    );
}

.menu-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;
  gap:
    clamp(
      10px,
      1.5vh,
      16px
    );
  padding-block:
    clamp(
      16px,
      2.5vh,
      26px
    );
}

.menu-header {
  display: grid;
  gap: 14px;
}

.menu-header .section-title {
  margin-top: 5px;
}

.menu-controls {
  display: grid;
  gap: 9px;
}

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 5px;
  scrollbar-width: thin;
}



.category-tab,
.subfilter {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  transition:
    color
    var(--transition-ui)
    ease,
    background-color
    var(--transition-ui)
    ease,
    border-color
    var(--transition-ui)
    ease;
}

.category-tab.is-active {
  color: #fff;
  border-color: var(--brown-900);
  background: var(--brown-900);
}

.subfilter.is-active {
  color: var(--brown-950);
  background: var(--white);
}

.menu-search {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
}

.menu-search input {
  width: 100%;
  min-height: 42px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

.menu-layout {
  min-height: 0;
  display: grid;
  grid-template-rows:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);
  gap: 12px;
}

.menu-browser {
  min-height: 0;
  display: grid;
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr);
}

.subfilter-bar {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr);
  align-items: center;
}

.subfilter-track {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 7px;
  scrollbar-width: thin;
}

.subfilter-arrow {
  display: none;
}

.menu-result-meta {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.72rem;
}

.product-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.product-row {
  min-height: 64px;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.product-row.is-selected {
  background: rgba(255, 255, 255, 0.56);
}

.product-select {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns:
    25px
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 0;
  background: transparent;
  text-align: left;
}

.product-number,
.product-meta {
  color: var(--text-soft);
  font-size: 0.66rem;
}

.product-copy {
  min-width: 0;
}

.product-title {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.product-add {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.quantity-control {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.quantity-control button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.quantity-control span {
  min-width: 22px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
}

.empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  font-size: 0.78rem;
  text-align: center;
}

.featured-product {
  min-height: 0;
  display: grid;
  grid-template-rows:
    minmax(0, 1fr)
    auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.featured-photo {
  position: relative;
  min-height: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--cream-300);
}

.featured-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-category,
.featured-number {
  position: absolute;
  top: 11px;
  z-index: 2;
}

.featured-category {
  left: 11px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 249, 0.92);
  font-size: 0.67rem;
  font-weight: 700;
}

.featured-number {
  right: 11px;
  color: #fff;
}

.photo-action {
  position: absolute;
  left: 11px;
  bottom: 11px;
  z-index: 2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(45, 27, 16, 0.55);
  font-size: 0.67rem;
  font-weight: 700;
}

.recipe-panel {
  position: absolute;
  inset: 9px;
  z-index: 4;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 243, 0.97);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity
    var(--transition-ui)
    ease,
    transform
    var(--transition-ui)
    var(--ease-standard);
}

.featured-photo[aria-expanded="true"]
.recipe-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.recipe-header {
  display: flex;
  justify-content: space-between;
}

.recipe-header strong {
  display: block;
  margin-top: 3px;
}

.recipe-grid {
  display: grid;
  gap: 6px;
}

.recipe-item {
  display: grid;
  grid-template-columns:
    74px
    minmax(0, 1fr);
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.62);
}

.recipe-item small {
  color: var(--text-soft);
}

.featured-info {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
}

.featured-subtype {
  margin: 0 0 3px;
  color: var(--text-soft);
  font-size: 0.68rem;
}

.featured-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.featured-copy > p:last-child {
  display: none;
}

.featured-order {
  text-align: right;
}

/* ===== MOMENTS ===== */

.moments-section {
  overflow: hidden;
  background: var(--ivory);
}

.moments-grid {
  width: 100%;
  display: grid;
  grid-template-rows:
    minmax(260px, 49svh)
    auto;
  gap:
    clamp(
      20px,
      3vh,
      32px
    );
  padding-block: 22px;
}

.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

#moment-count {
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.moment-tabs {
  display: grid;
  margin-top: 21px;
  border-top: 1px solid var(--line);
}

.moment-tab {
  min-height: 64px;
  display: grid;
  grid-template-columns:
    40px
    minmax(0, 1fr)
    28px;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  background: transparent;
  text-align: left;
}

.moment-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream-100);
}

.moment-tab.is-active
.moment-icon {
  color: #fff;
  background: var(--brown-900);
}

.moment-content strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.22rem;
}

.moment-content small {
  display: block;
  margin-top: 3px;
  color: var(--text-soft);
}

.moment-arrow {
  justify-self: end;
  opacity: 0;
}

.moment-tab.is-active
.moment-arrow {
  opacity: 1;
}

.moment-media {
  order: -1;
  min-height: 0;
}

.moment-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.moment-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== CAFE ===== */

.cafe-section {
  overflow: hidden;
  background:
    linear-gradient(
      120deg,
      #eedec7,
      #f8eddd
    );
}

.cafe-grid {
  width: 100%;
  display: grid;
  grid-template-rows:
    minmax(260px, 49svh)
    auto;
  gap:
    clamp(
      20px,
      3vh,
      32px
    );
  padding-block: 22px;
}

.cafe-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.cafe-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cafe-media-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(45, 27, 16, 0.55);
}

.cafe-copy {
  align-self: center;
}

.cafe-copy .section-title {
  margin-top: 6px;
}

.cafe-copy .body-copy {
  margin-top: 14px;
}

.cafe-pairings {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.pairing {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.36);
  font-size: 0.78rem;
  font-weight: 600;
}

.pairing-plus {
  color: var(--text-soft);
}

/* ===== GALLERY ===== */

.gallery-section {
  overflow: hidden;
  background: var(--white);
}

.gallery-shell {
  width: 100%;
  display: grid;
  gap: 16px;
  padding-block: 22px;
}

.gallery-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.gallery-grid {
  min-height: 0;
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  grid-auto-rows:
    minmax(150px, 28svh);
  gap: 10px;
}

.gallery-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--cream-300);
}

.gallery-item-main {
  grid-row: span 2;
}

.gallery-item-wide {
  grid-column: 1 / -1;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    500ms
    var(--ease-standard);
}

.gallery-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(45, 27, 16, 0.55);
  font-size: 0.68rem;
  font-weight: 700;
}

/* ===== REVIEWS ===== */

.reviews-section {
  overflow: hidden;
  padding:
    clamp(
      72px,
      8vw,
      112px
    )
    0;
  background:
    linear-gradient(
      180deg,
      #fbf0e3 0%,
      #f8e8d5 100%
    );
}

.reviews-layout {
  width: 100%;
  display: grid;
  gap:
    clamp(
      28px,
      4vw,
      44px
    );
}

.reviews-header {
  width:
    min(
      100%,
      700px
    );
  display: grid;
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.reviews-header .section-title {
  margin-top: 5px;
}

.reviews-lead {
  max-width: 58ch;
  margin: 13px auto 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.65;
}

.reviews-showcase {
  width:
    min(
      100%,
      1100px
    );
  margin-inline: auto;
}

.reviews-slider-toolbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.reviews-counter {
  color: var(--text-soft);
  font-size: 0.71rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reviews-navigation {
  display: flex;
  gap: 7px;
}

.slider-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--brown-900);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-xs);
}

.reviews-viewport {
  width: 100%;
  overflow: hidden;
}

.reviews-track {
  width: 100%;
  scroll-padding-inline: 4px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 1px 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}



.review-slide {
  min-width:
    min(
      88vw,
      430px
    );

  flex:
    0 0
    min(
      88vw,
      430px
    );

  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.review-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  overflow: hidden;
  border:
    1px solid
    rgba(73, 49, 36, 0.1);
  border-radius: 22px;
  background: rgba(255, 253, 249, 0.84);
  box-shadow:
    0 10px 30px
    rgba(73, 49, 36, 0.055);
  text-decoration: none;
}

.review-card::before {
  content: "“";
  position: absolute;
  top: -12px;
  right: 15px;
  color: rgba(113, 76, 51, 0.055);
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  pointer-events: none;
}

.review-card-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-stars {
  color: #aa713a;
  font-size: 0.81rem;
  letter-spacing: 0.08em;
}

.review-source {
  color: var(--text-soft);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.review-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--brown-800);
  font-size: 0.72rem;
  font-weight: 800;
}

.review-author strong,
.review-author span {
  display: block;
}

.review-author strong {
  color: var(--brown-950);
  font-size: 0.75rem;
}

.review-author span {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.61rem;
}

.review-card blockquote {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0;
  color: var(--brown-900);
  font-family: var(--font-display);
  font-size:
    clamp(
      1.2rem,
      4.5vw,
      1.48rem
    );
  font-weight: 500;
  line-height: 1.28;
}

.review-demo-label,
.review-google-action {
  position: relative;
  z-index: 1;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: var(--brown-700);
  font-size: 0.61rem;
  font-weight: 800;
}

.review-demo-label {
  padding: 5px 8px;
  border:
    1px solid
    rgba(113, 76, 51, 0.13);
  border-radius: var(--radius-pill);
  background: rgba(244, 227, 204, 0.35);
}

.reviews-pagination {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
}

.review-dot {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.review-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(73, 49, 36, 0.24);
  transform: translate(-50%, -50%);
}

.review-dot.is-active::before {
  width: 20px;
  border-radius: var(--radius-pill);
  background: var(--brown-800);
}

.reviews-note {
  max-width: 650px;
  margin-inline: auto;
  text-align: center;
}

/* ===== CONTACT ===== */

.contact-section {
  overflow: hidden;

  padding:
    clamp(
      72px,
      8vw,
      112px
    )
    0;

  background:
    linear-gradient(
      180deg,
      #f1dcc1 0%,
      #edd4b5 100%
    );
}

.contact-shell {
  width: 100%;
  display: grid;
  gap:
    clamp(
      32px,
      4.5vw,
      52px
    );
}

.contact-heading {
  width:
    min(
      100%,
      760px
    );
  display: grid;
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.contact-heading .section-title {
  max-width: 13ch;
  margin-top: 5px;
}

.contact-lead {
  max-width: 62ch;
  margin: 14px auto 0;
  color: var(--text-muted);
  font-size:
    clamp(
      0.83rem,
      2.2vw,
      0.96rem
    );
  line-height: 1.7;
}

.contact-grid {
  width:
    min(
      100%,
      1080px
    );
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-inline: auto;
}

.contact-main {
  min-width: 0;
}

.contact-form {
  width: 100%;
  display: grid;
  gap: 20px;
  padding:
    clamp(
      22px,
      4vw,
      34px
    );
  border:
    1px solid
    rgba(73, 49, 36, 0.1);
  border-radius: 24px;
  background: rgba(255, 253, 249, 0.82);
  box-shadow:
    0 16px 48px
    rgba(73, 49, 36, 0.075);
}

.contact-form-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom:
    1px solid
    rgba(73, 49, 36, 0.09);
}

.contact-form-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brown-800);
  background: var(--cream-200);
}

.contact-form-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--brown-700);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-form-heading h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size:
    clamp(
      1.6rem,
      5vw,
      2rem
    );
  font-weight: 600;
  line-height: 1;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.form-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--brown-900);
  font-size: 0.68rem;
  font-weight: 800;
}

.form-field > span {
  padding-left: 2px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border:
    1px solid
    rgba(73, 49, 36, 0.16);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 253, 249, 0.96);
  outline: 0;
  transition:
    border-color
    var(--transition-ui)
    ease,
    box-shadow
    var(--transition-ui)
    ease,
    background-color
    var(--transition-ui)
    ease;
}

.form-field select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

.form-field textarea {
  min-height: 128px;
  line-height: 1.55;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(51, 33, 23, 0.39);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(113, 76, 51, 0.58);
  background: var(--white);
  box-shadow:
    0 0 0 3px
    rgba(198, 146, 100, 0.14);
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow:
    0 0 0 3px
    rgba(139, 61, 53, 0.1);
}

.contact-consent {
  display: grid;
  grid-template-columns:
    20px
    minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.5;
}

.contact-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--brown-800);
}

.contact-form-actions {
  display: grid;
  gap: 8px;
}

.contact-submit {
  width: 100%;
}

.contact-order-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.64rem;
  line-height: 1.45;
  text-align: center;
}

.status-message {
  min-height: 18px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.69rem;
  line-height: 1.4;
}

.contact-form-status {
  text-align: center;
}

.contact-form-status.is-error {
  color: var(--error);
}

.contact-form-status.is-success {
  color: var(--success);
}

.contact-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding:
    clamp(
      24px,
      4vw,
      32px
    );
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(
      155deg,
      #4c3225 0%,
      #2f1f17 100%
    );
  box-shadow:
    0 18px 50px
    rgba(51, 33, 23, 0.16);
}

.contact-card::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -100px;
  bottom: -110px;
  border:
    1px solid
    rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px
    rgba(255, 255, 255, 0.018);
}

.contact-card-top {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
}

.contact-card-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border:
    1px solid
    rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  color: #ead0ae;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-card-top h3 {
  margin: 7px 0 0;
  font-family: var(--font-display);
  font-size:
    clamp(
      2rem,
      6vw,
      2.6rem
    );
  font-weight: 600;
  line-height: 0.95;
}

.contact-card-top p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: 0.75rem;
  line-height: 1.55;
}

.contact-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.contact-row {
  display: grid;
  grid-template-columns:
    40px
    minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.contact-row > .material-symbols-outlined {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border:
    1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #e4c19a;
  background: rgba(255, 255, 255, 0.06);
  font-size: 19px;
}

.contact-row strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.71rem;
}

.contact-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.69);
  font-size: 0.75rem;
  line-height: 1.5;
}

.social-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 8px;
  margin-top: 28px;
  padding-top: 18px;
  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);
}

.social-button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 11px;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.68rem;
  font-weight: 700;
  transition:
    background-color
    var(--transition-ui)
    ease,
    transform
    var(--transition-tap)
    var(--ease-standard);
}

.social-button:active {
  transform: scale(0.98);
}

.contact-card-status {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
}

/* ===== FOOTER ===== */

.site-footer {
  padding:
    28px 0
    calc(
      28px +
      var(--mobile-nav-height)
    );
  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
  background: var(--brown-950);
  color: #fff;
}

.footer-inner {
  display: grid;
  gap: 18px;
}

.footer-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.footer-copy {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  text-decoration: none;
}

/* ===== MOBILE BOTTOM NAV ===== */

.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  min-height: var(--mobile-nav-height);
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: rgba(255, 250, 243, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 -8px 30px
    rgba(51, 33, 23, 0.07);
}

.mobile-nav-item {
  min-width: 0;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 3px;
  border: 0;
  color: var(--text-soft);
  background: transparent;
  font-size: 0.62rem;
  font-weight: 700;
  text-decoration: none;
}

.mobile-nav-item
.material-symbols-outlined {
  font-size: 22px;
}

.mobile-nav-item.is-active {
  color: var(--brown-900);
}

.mobile-cart-icon {
  position: relative;
}

.mobile-cart-count {
  position: absolute;
  top: -8px;
  right: -12px;
}

/* ===== TOAST ===== */

.toast {
  position: fixed;
  left: 50%;

  bottom:
    calc(
      var(--mobile-nav-height) +
      14px +
      env(safe-area-inset-bottom)
    );

  z-index: 2500;

  min-height: 44px;

  display: flex;
  align-items: center;

  gap: 8px;

  max-width:
    calc(
      100vw -
      32px
    );

  padding:
    10px 15px;

  border-radius:
    var(--radius-pill);

  color: #fff;

  background:
    var(--brown-950);

  box-shadow:
    var(--shadow-medium);

  font-size: 0.76rem;
  font-weight: 600;

  opacity: 0;
  visibility: hidden;

  transform:
    translate(-50%, 12px);

  transition:
    opacity
    var(--transition-ui)
    ease,
    transform
    var(--transition-ui)
    var(--ease-standard);
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, 0);
}

/* ===== DIALOG COMMON ===== */

dialog {
  border: 0;
  color: var(--text);
  background: var(--white);
  box-shadow: var(--shadow-dialog);
}

dialog::backdrop {
  background:
    rgba(31, 19, 12, 0.5);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);
}

/* ===== CART ===== */

.cart-dialog {
  width:
    min(
      100%,
      430px
    );

  height:
    min(
      90dvh,
      760px
    );

  margin:
    auto 0 0 auto;

  border-radius:
    var(--radius-lg)
    var(--radius-lg)
    0
    0;
}

.cart-shell {
  height: 100%;
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.cart-header h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 2rem;
}

.cart-header-meta {
  margin: 3px 0 0;
  color: var(--text-soft);
  font-size: 0.7rem;
}

.cart-body {
  overflow-y: auto;
  padding: 4px 18px;
}

.cart-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  text-align: center;
}

.cart-item {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
}

.cart-item-price {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.cart-footer {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid var(--line);
}

.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-total-row strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.cart-comment {
  width: 100%;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--cream-100);
}

.cart-actions {
  display: grid;
  gap: 8px;
}

.cart-secondary-actions {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    44px;
  gap: 8px;
}

/* ===== PRODUCT DIALOG ===== */

.product-dialog {
  width:
    min(
      92vw,
      860px
    );

  max-height:
    90dvh;

  margin: auto;

  border-radius:
    var(--radius-lg);

  overflow: hidden;
}

.product-dialog-grid {
  display: grid;
}

.product-dialog-media {
  height:
    min(
      40dvh,
      320px
    );

  background:
    var(--cream-300);
}

.product-dialog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-dialog-content {
  position: relative;
  padding: 24px;
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 253, 249, 0.8);
}

.product-dialog-description {
  margin-top: 14px;
}

.product-dialog-meta {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 0.75rem;
}

.product-dialog-action {
  margin-top: 20px;
}

/* ===== LIGHTBOX ===== */

.lightbox-dialog {
  width:
    min(
      94vw,
      1100px
    );

  max-height:
    92dvh;

  margin: auto;

  border-radius:
    var(--radius-lg);

  overflow: hidden;

  background:
    #1c120d;
}

.lightbox-content {
  position: relative;
  display: grid;
  place-items: center;

  min-height:
    min(
      80dvh,
      760px
    );
}

.lightbox-content img {
  max-width: 100%;
  max-height: 86dvh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  color: #fff;
  background: rgba(0, 0, 0, 0.34);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 10px;
}

.lightbox-next {
  right: 10px;
}

/* ===== REVEAL ===== */

.reveal {
  opacity: 1;

  transform: none;

  transition:
    opacity
    var(--transition-reveal)
    ease,
    transform
    var(--transition-reveal)
    var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== 640+ ===== */

@media (min-width: 640px) {
  .contact-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .form-field--full {
    grid-column:
      1 / -1;
  }

  .contact-submit {
    width: fit-content;
    min-width: 220px;
  }

  .contact-form-actions {
    justify-items: start;
  }

  .contact-order-note {
    text-align: left;
  }
}

/* ===== TABLET / DESKTOP ===== */

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }

  .viewport-section {
    min-height:
      calc(
        100dvh -
        var(--header-height)
      );

    height:
      calc(
        100dvh -
        var(--header-height)
      );
  }

  .team-section,
  .reviews-section,
  .contact-section {
    min-height:
      calc(
        100dvh -
        var(--header-height)
      );

    height: auto;
  }

  .team-section {
    min-height: auto;
  }

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

  .desktop-nav {
    display: flex;
    align-items: center;

    gap:
      clamp(
        10px,
        1.4vw,
        22px
      );
  }

  .nav-link {
    position: relative;

    min-height: 44px;

    display: inline-flex;
    align-items: center;

    color:
      var(--text-muted);

    font-size: 0.69rem;
    font-weight: 700;

    text-decoration: none;
  }

  .nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 5px;

    height: 2px;

    border-radius:
      var(--radius-pill);

    background:
      var(--brown-700);

    opacity: 0;

    transform:
      scaleX(0.5);

    transition:
      opacity
      var(--transition-ui)
      ease,
      transform
      var(--transition-ui)
      ease;
  }

  .nav-link.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .desktop-cart-trigger {
    display: inline-flex;
  }

  .hero-grid {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(360px, 1.08fr);

    grid-template-rows:
      minmax(0, 1fr);

    align-items: center;

    gap:
      clamp(
        50px,
        7vw,
        90px
      );

    padding:
      28px
      var(--page-padding);
  }

  .hero-copy {
    order: 1;
  }

  .hero-visual {
    order: 2;

    height:
      min(
        72vh,
        650px
      );
  }

  .hero-actions .button {
    flex:
      0 0 auto;
  }

  .about-grid,
  .moments-grid,
  .cafe-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-template-rows:
      minmax(0, 1fr);

    align-items: center;

    gap:
      clamp(
        50px,
        7vw,
        90px
      );

    padding-block:
      clamp(
        28px,
        4vh,
        44px
      );
  }

  .about-media,
  .moment-media,
  .cafe-media {
    height:
      min(
        100%,
        570px
      );
  }

  .moment-media {
    order: initial;
  }

  /* ===== TEAM ===== */

  .team-collage {
    max-width: 1180px;

    grid-template-columns:
      repeat(
        12,
        minmax(0, 1fr)
      );

    grid-template-rows:
      repeat(
        2,
        clamp(
          215px,
          22vw,
          290px
        )
      );

    grid-template-areas: none;

    align-items: stretch;

    gap:
      clamp(
        14px,
        1.4vw,
        20px
      );

    padding:
      18px 14px 12px;
  }

  .team-photo {
    height: 100%;
    aspect-ratio: auto;
    padding:
      10px 10px 0;
  }

  .team-photo--portrait {
    grid-column:
      1 / 5;

    grid-row:
      1;

    transform:
      rotate(-1.25deg);
  }

  .team-photo--wide {
    grid-column:
      5 / 9;

    grid-row:
      1;

    transform:
      rotate(0.8deg)
      translateY(7px);
  }

  .team-photo--small {
    grid-column:
      9 / 13;

    grid-row:
      1;

    transform:
      rotate(-0.75deg);
  }

  .team-photo--detail {
    grid-column:
      1 / 7;

    grid-row:
      2;

    transform:
      rotate(0.65deg);
  }

  .team-photo--portrait-secondary {
    grid-column:
      7 / 13;

    grid-row:
      2;

    width: 100%;
    height: 100%;

    transform:
      rotate(-0.8deg)
      translateY(-2px);
  }

  .team-photo-caption {
    min-height: 62px;

    padding:
      10px 9px 12px;
  }

  .team-photo-caption strong {
    font-size:
      clamp(
        1.05rem,
        1.8vw,
        1.4rem
      );
  }

  /* ===== MENU ===== */

  .menu-header {
    grid-template-columns:
      minmax(230px, 0.75fr)
      minmax(0, 1.25fr);

    align-items: end;

    gap: 32px;
  }

  .menu-search {
    width: 270px;
    justify-self: end;
  }

  .menu-layout {
    grid-template-columns:
      minmax(0, 0.94fr)
      minmax(340px, 1.06fr);

    grid-template-rows:
      minmax(0, 1fr);

    gap:
      clamp(
        18px,
        2vw,
        30px
      );
  }

  .subfilter-bar {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      44px;

    gap: 4px;
  }

  .subfilter-arrow {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;

    background:
      transparent;
  }

  /* ===== GALLERY ===== */

  .gallery-grid {
    grid-template-columns:
      1.3fr
      0.8fr
      0.8fr;

    grid-template-rows:
      repeat(
        2,
        minmax(0, 1fr)
      );

    height:
      min(
        62vh,
        540px
      );
  }

  .gallery-item-main {
    grid-row:
      1 / 3;
  }

  .gallery-item-wide {
    display: block;

    grid-column:
      2 / 4;
  }

  /* ===== REVIEWS ===== */

  .reviews-slider-toolbar,
  .reviews-pagination {
    display: none;
  }

  .reviews-viewport {
    overflow: visible;
  }

  .reviews-track {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 16px;

    overflow: visible;

    padding: 0;

    scroll-snap-type: none;
  }

  .review-slide {
    min-width: 0;
    flex: none;
  }

  .review-card {
    min-height: 230px;
  }

  /* ===== CONTACT ===== */

  .contact-grid {
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(270px, 0.75fr);

    align-items: stretch;

    gap:
      clamp(
        18px,
        2.5vw,
        28px
      );
  }

  .contact-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .social-actions {
    margin-top: auto;
  }

  /* ===== FOOTER ===== */

  .site-footer {
    padding: 28px 0;
  }

  .footer-inner {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items: center;
  }

  /* ===== CART ===== */

  .cart-dialog {
    inset:
      0 0 0 auto;

    height: 100dvh;

    margin: 0;

    border-radius: 0;
  }

  /* ===== PRODUCT ===== */

  .product-dialog-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, 0.85fr);
  }

  .product-dialog-media {
    height: auto;
    min-height: 520px;
  }
}

/* ===== 900+ ===== */

@media (min-width: 900px) {
  .reviews-track {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .review-card {
    min-height: 250px;
  }
}

/* ===== DESKTOP ===== */

@media (min-width: 1024px) {
  .team-section {
    padding:
      66px 0 76px;
  }

  .team-layout {
    gap: 28px;
  }

  .team-collage {
    max-width: 1180px;

    grid-template-columns:
      repeat(
        12,
        minmax(0, 1fr)
      );

    grid-template-rows:
      265px
      265px;

    gap:
      18px;

    padding:
      18px 12px 14px;
  }

  .team-photo--portrait {
    grid-column:
      1 / 5;

    grid-row:
      1;

    transform:
      rotate(-1.35deg)
      translateY(2px);
  }

  .team-photo--wide {
    grid-column:
      5 / 9;

    grid-row:
      1;

    transform:
      rotate(1deg)
      translateY(10px);
  }

  .team-photo--small {
    grid-column:
      9 / 13;

    grid-row:
      1;

    transform:
      rotate(-0.9deg)
      translateY(1px);
  }

  .team-photo--detail {
    grid-column:
      1 / 7;

    grid-row:
      2;

    transform:
      rotate(0.75deg)
      translateY(-2px);
  }

  .team-photo--portrait-secondary {
    grid-column:
      7 / 13;

    grid-row:
      2;

    transform:
      rotate(-0.75deg)
      translateY(2px);
  }

  .team-photo-caption {
    min-height: 66px;
  }

  .reviews-section {
    padding:
      86px 0 96px;
  }

  .reviews-layout {
    gap: 38px;
  }

  .reviews-track {
    gap: 18px;
  }

  .review-card {
    min-height: 248px;
    padding: 23px;
  }

  .contact-section {
    padding:
      84px 0 96px;
  }

  .contact-grid {
    grid-template-columns:
      minmax(0, 1.36fr)
      minmax(300px, 0.64fr);

    gap: 24px;
  }
}

/* ===== LARGE DESKTOP ===== */

@media (min-width: 1200px) {
  .display-title {
    font-size:
      clamp(
        3.65rem,
        4.5vw,
        5rem
      );
  }

  .section-title {
    font-size:
      clamp(
        2.75rem,
        3.5vw,
        3.9rem
      );
  }

  .team-collage {
    max-width: 1200px;

    grid-template-rows:
      285px
      285px;
  }

  .reviews-track {
    gap: 20px;
  }

  .contact-grid {
    gap: 28px;
  }
}

/* ===== EXTRA LARGE ===== */

@media (min-width: 1440px) {
  .team-collage {
    max-width: 1220px;

    grid-template-rows:
      300px
      300px;
  }
}

@media (min-width: 1600px) {
  :root {
    --content-width: 1280px;
  }

  .reviews-showcase,
  .contact-grid {
    max-width: 1120px;
  }

  .team-collage {
    max-width: 1240px;
  }
}

/* ===== SHORT DESKTOP HEIGHT ===== */

@media
  (min-width: 768px)
  and
  (max-height: 760px) {

  .display-title {
    font-size:
      clamp(
        3rem,
        4vw,
        4.15rem
      );
  }

  .section-title {
    font-size:
      clamp(
        2.3rem,
        3vw,
        3rem
      );
  }

  .hero-grid,
  .about-grid,
  .moments-grid,
  .cafe-grid {
    padding-block: 12px;
  }

  .moment-tab {
    min-height: 52px;
  }

  .moment-content small {
    display: none;
  }

  .team-section {
    padding:
      38px 0 44px;
  }

  .reviews-section,
  .contact-section {
    padding:
      46px 0;
  }

  .team-layout {
    gap: 18px;
  }

  .reviews-layout,
  .contact-shell {
    gap: 22px;
  }

  .team-collage {
    grid-template-rows:
      215px
      215px;
  }

  .team-photo-caption {
    min-height: 54px;
    padding:
      7px 7px 9px;
  }

  .team-photo-caption strong {
    font-size: 1rem;
  }

  .review-card {
    min-height: 200px;
    padding: 17px;
  }

  .review-card blockquote {
    font-size: 1.1rem;
  }

  .contact-form {
    gap: 12px;
    padding: 18px 20px;
  }

  .contact-form-heading {
    padding-bottom: 11px;
  }

  .contact-form-grid {
    gap: 9px 12px;
  }

  .form-field {
    gap: 4px;
  }

  .form-field input,
  .form-field select {
    min-height: 42px;
    padding: 8px 11px;
  }

  .form-field textarea {
    min-height: 90px;
  }

  .contact-card {
    padding: 20px;
  }

  .contact-list {
    gap: 12px;
    margin-top: 18px;
  }

  .social-actions {
    margin-top: auto;
    padding-top: 12px;
  }
}

/* ===== MOBILE ===== */

@media (max-width: 767px) {
  .team-section,
  .reviews-section,
  .contact-section {
    min-height: auto;
  }

  .team-section {
    padding:
      52px 0 58px;
  }

  .team-layout {
    gap: 24px;
  }

  .team-header {
    padding-inline: 4px;
  }

  .team-collage {
    max-width: 620px;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-template-areas:
      "portrait wide"
      "small detail"
      "secondary secondary";

    gap:
      12px;

    padding:
      8px 4px;
  }

  .team-photo--portrait,
  .team-photo--wide,
  .team-photo--small,
  .team-photo--detail {
    width: 100%;
    aspect-ratio:
      1.05 / 1;
  }

  .team-photo--portrait-secondary {
    width: 78%;
    aspect-ratio:
      1.55 / 1;
  }

  .team-photo {
    padding:
      7px 7px 0;
  }

  .team-photo-caption {
    min-height: 50px;

    display: grid;

    align-content: center;

    gap: 2px;

    padding:
      7px 5px 9px;
  }

  .team-photo-caption strong {
    text-align: left;
  }

  .reviews-section {
    padding:
      56px 0 62px;
  }

  .reviews-layout {
    gap: 28px;
  }

  .reviews-showcase {
    overflow: visible;
  }

  .reviews-track {
    margin-right:
      calc(
        var(--page-padding) * -1
      );

    padding-right:
      var(--page-padding);
  }

  .contact-section {
    padding:
      58px 0 64px;
  }

  .contact-shell {
    gap: 30px;
  }

  .contact-grid {
    gap: 16px;
  }
}

/* ===== SMALL MOBILE ===== */

@media (max-width: 479px) {
  .halloween-toggle-label {
    display: none;
  }

  .halloween-toggle {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }

  .header-actions {
    gap: 2px;
  }

  .brand img {
    max-width: 126px;
    height: auto;
  }

  .team-collage {
    gap: 9px;
  }

  .team-photo {
    padding:
      6px 6px 0;

    box-shadow:
      0 8px 18px
      rgba(62, 39, 24, 0.13);
  }

  .team-photo--portrait,
  .team-photo--wide,
  .team-photo--small,
  .team-photo--detail {
    aspect-ratio:
      0.96 / 1;
  }

  .team-photo--portrait-secondary {
    width: 82%;
    aspect-ratio:
      1.45 / 1;
  }

  .team-photo-caption {
    min-height: 48px;
    padding:
      6px 4px 8px;
  }

  .team-photo-caption span {
    font-size: 0.46rem;
  }

  .team-photo-caption strong {
    font-size:
      clamp(
        0.86rem,
        4vw,
        1rem
      );

    line-height: 1;
  }

  .contact-form,
  .contact-card {
    border-radius: 20px;
  }

  .social-actions {
    grid-template-columns: 1fr;
  }
}

/* ===== VERY SMALL MOBILE ===== */

@media (max-width: 390px) {
  :root {
    --page-padding: 16px;
  }

  .display-title {
    font-size:
      clamp(
        2.45rem,
        12vw,
        3.3rem
      );
  }

  .team-collage {
    grid-template-columns: 1fr;

    grid-template-areas:
      "portrait"
      "wide"
      "small"
      "detail"
      "secondary";

    gap: 14px;

    padding-inline: 18px;
  }

  .team-photo--portrait,
  .team-photo--wide,
  .team-photo--small,
  .team-photo--detail,
  .team-photo--portrait-secondary {
    width: 100%;
    aspect-ratio:
      1.28 / 1;
  }

  .team-photo--portrait {
    transform:
      rotate(-1deg);
  }

  .team-photo--wide {
    transform:
      rotate(0.7deg);
  }

  .team-photo--small {
    transform:
      rotate(-0.5deg);
  }

  .team-photo--detail {
    transform:
      rotate(0.55deg);
  }

  .team-photo--portrait-secondary {
    transform:
      rotate(-0.65deg);
  }

  .review-slide {
    min-width:
      calc(
        100vw -
        44px
      );

    flex-basis:
      calc(
        100vw -
        44px
      );
  }

  .review-card {
    padding: 19px;
  }

  .contact-form,
  .contact-card {
    padding:
      20px 17px;
  }

  .contact-form-heading {
    gap: 10px;
  }

  .contact-form-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}

/* ===== HOVER ===== */

@media
  (hover: hover)
  and
  (pointer: fine) {

  .button-primary:hover {
    background: var(--brown-800);

    box-shadow:
      0 14px 32px
      rgba(73, 49, 36, 0.22);
  }

  .button-secondary:hover {
    background:
      rgba(255, 255, 255, 0.72);
  }

  .nav-link:hover {
    color:
      var(--brown-900);
  }

  .category-tab:hover,
  .subfilter:hover {
    border-color:
      rgba(73, 49, 36, 0.26);
  }

  .product-row:hover {
    background:
      rgba(255, 255, 255, 0.36);
  }

  .gallery-item:hover
  .gallery-image {
    transform:
      scale(1.035);
  }

  .team-photo:hover {
    z-index: 8;

    box-shadow:
      0 22px 50px
      rgba(62, 39, 24, 0.2);
  }

  .team-photo:hover > img {
    transform:
      scale(1.025);
  }

  .team-photo--portrait:hover {
    transform:
      rotate(-0.6deg)
      translateY(-5px);
  }

  .team-photo--wide:hover {
    transform:
      rotate(0.45deg)
      translateY(3px);
  }

  .team-photo--small:hover {
    transform:
      rotate(-0.35deg)
      translateY(-4px);
  }

  .team-photo--detail:hover {
    transform:
      rotate(0.2deg)
      translateY(-4px);
  }

  .team-photo--portrait-secondary:hover {
    transform:
      rotate(-0.25deg)
      translateY(-4px);
  }

  .review-card:hover {
    border-color:
      rgba(113, 76, 51, 0.18);

    box-shadow:
      0 18px 42px
      rgba(73, 49, 36, 0.1);

    transform:
      translateY(-3px);
  }

  .social-button:hover {
    background:
      rgba(255, 255, 255, 0.11);
  }

  .slider-arrow:hover {
    background:
      rgba(255, 255, 255, 0.9);
  }

  .footer-links a:hover {
    color: #fff;
  }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none;
    transition: none;

    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .reviews-track {
    scroll-behavior: auto;
  }

  .gallery-image,
  .team-photo > img {
    transform: none;
  }

  .team-photo--portrait,
  .team-photo--wide,
  .team-photo--small,
  .team-photo--detail,
  .team-photo--portrait-secondary {
    transform: none;
  }
}
/* ===== ICONOS Y CONTENIDO FLEXIBLE ===== */

.material-symbols-outlined {
  display: inline-block;
  flex-shrink: 0;
  inline-size: 1em;
  block-size: 1em;
  overflow: hidden;
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.container > *,
.header-inner > *,
.contact-grid > *,
.featured-info > *,
.product-row > * {
  min-inline-size: 0;
}

p, h1, h2, h3, h4, label {
  overflow-wrap: break-word;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .desktop-cart-trigger {
    display: none;
  }
}

/* ===== ACCESIBILIDAD DEL SISTEMA ===== */

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
  }

  .button,
  .category-tab,
  .subfilter,
  .reviews-arrow,
  .pagination-dot {
    border: 1px solid ButtonText;
  }

  .category-tab.is-active,
  .subfilter.is-active {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }
}

/* ===== ICONOS GENERADOS ===== */

.material-symbols-outlined[data-icon]::before {
  content: attr(data-icon);
}

/* ===== TEXTOS DENTRO DE SUS CONTENEDORES ===== */

:where(.header-actions, .hero-copy, .about-copy, .featured-copy, .product-copy, .review-slide, .contact-card, .contact-form-grid, .footer-inner) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.product-row, .featured-info, .review-slide, .contact-card, .contact-form, .dialog-title) :where(p, h2, h3, h4, small, strong, label) {
  overflow-wrap: anywhere;
}

:where(.button, .product-select, .moment-tab, .contact-row) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.product-select, .moment-content, .contact-row) > span {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* ===== NOMBRE DE LA MARCA EN DISTINTIVOS ===== */

.about-dessert-stamp > span:last-child {
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.hero-photo-tag {
  max-inline-size: calc(100% - 24px);
}

.hero-photo-tag > span:last-child {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* ===== BARRAS DE DESPLAZAMIENTO ===== */

:root {
  --scrollbar-track: var(--cream-100);
  --scrollbar-thumb: var(--brown-600);
  --scrollbar-thumb-hover: var(--brown-900);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html {
  scrollbar-width: auto;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid var(--scrollbar-track);
  border-radius: var(--radius-pill);
  min-height: 36px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
}

/* Carta móvil: miniaturas y detalle al frente; escritorio sin cambios. */
.product-mobile-thumbnail,
.mobile-product-composition { display:none; }
@media (max-width:767px) {
  .menu-layout .featured-product { display:none; }
  .menu-layout, .menu-browser, .product-list { height:auto; max-height:none; }
  .product-list { overflow:visible; }
  .product-row { min-height:88px; gap:4px; }
  .product-select { grid-template-columns:64px minmax(0,1fr); gap:10px; padding:10px 6px; }
  .product-mobile-thumbnail { display:block; grid-row:1 / 3; width:64px; height:64px; border-radius:10px; object-fit:cover; }
  .product-select .product-number { display:none; }
  .product-select .product-copy { grid-column:2; align-self:end; }
  .product-select .product-price { grid-column:2; align-self:start; }
  .product-select .product-title { white-space:normal; overflow:visible; font-size:1.05rem; line-height:1.2; }
  .product-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; }
  .product-dialog-grid { display:flex; flex-direction:column; }
  .product-dialog-media { height:clamp(140px,28dvh,240px); flex-shrink:0; }
  .product-dialog-content { padding:18px; }
  .product-dialog-content .dialog-title { padding-right:36px; font-size:1.65rem; line-height:1.1; }
  .product-dialog-description { margin-top:10px; font-size:.9rem; }
  .product-dialog-meta { margin-top:10px; }
  .mobile-product-composition { display:block; margin-top:14px; border-block:1px solid var(--line); padding:10px 0; font-size:.85rem; }
  .mobile-product-composition summary { cursor:pointer; min-height:32px; font-weight:600; }
  .mobile-product-composition p { margin-top:8px; color:var(--text-soft); }
  .product-dialog-action { width:100%; min-height:48px; margin-top:14px; }
}

/* Redes sociales: solo logos, sin destinos externos. */
.social-icons-float { position:fixed; right:20px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:950; color:var(--cream-100,#fffaf3); }
.social-icons-float summary { display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--brown-500); border-radius:50%; background:var(--brown-900); cursor:pointer; list-style:none; box-shadow:0 6px 22px #33211733; }
.social-icons-float summary::-webkit-details-marker { display:none; }
.social-icons-float svg { width:23px; height:23px; }
.social-icons-panel { position:absolute; right:0; bottom:calc(100% + 10px); display:grid; gap:8px; }
.social-icons-panel button { display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid var(--brown-500); border-radius:50%; background:var(--cream-100,#fffaf3); color:var(--brown-900); box-shadow:0 4px 15px #33211722; cursor:pointer; }
.social-icons-float button:hover { background:var(--cream-300); }
.social-icons-float summary:hover { background:var(--brown-800); }
.social-icons-float :focus-visible { outline:3px solid var(--brown-500); outline-offset:4px; }
@media(max-width:767px) { .social-icons-float { bottom:calc(100px + env(safe-area-inset-bottom,0px)); right:16px; } }
@media(prefers-reduced-motion:no-preference) { .social-icons-float summary,.social-icons-panel button { transition:background 160ms ease; } }