/* Home light refresh. Tokens live in phase1.css and style.css.
   This file loads last so layout wins over the older charcoal rules.
   Cream #F4EFE6 / sand #EDE4D3, copper fill #E6A23C, text copper #7A4A16. */

body {
  background: var(--paper, #F4EFE6);
  color: var(--ink, #1A1612);
  /* Inline head style only offsets the 38px trust bar. The navbar is fixed under it. */
  padding-top: calc(var(--trust-h, 38px) + var(--nav-h, 65px)) !important;
}
body.fb-banner-active { padding-top: calc(86px + var(--nav-h, 65px)) !important; }
body.fbia-active { padding-top: calc(96px + var(--nav-h, 65px)) !important; }
@media (max-width: 768px) {
  body.fb-banner-active { padding-top: calc(84px + var(--nav-h, 65px)) !important; }
  body.fbia-active { padding-top: calc(140px + var(--nav-h, 65px)) !important; }
}

/* Nothing the visitor needs waits at opacity 0. */
.fade-in-section,
.fade-in-section.visible,
.fade-in-section:not(.visible) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ===== Header ===== */
nav.navbar {
  background: rgba(244, 239, 230, 0.94) !important;
  color: var(--ink);
  backdrop-filter: saturate(1.2) blur(10px);
}
nav.navbar .nav-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  max-width: 1440px;
  height: var(--nav-h, 65px);
  padding: 0 16px;
}
nav.navbar .logo { flex: 0 0 auto; margin-inline-end: 0; }
nav.navbar .nav-panel {
  display: none;
  background: var(--paper);
}
nav.navbar .nav-panel.open { display: block; }
nav.navbar .nav-links { gap: 2px; }
nav.navbar .nav-links a {
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
nav.navbar .nav-links a:hover { color: var(--honey-ink, #7A4A16); }
nav.navbar .nav-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
nav.navbar .nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  flex: 0 0 auto;
}
nav.navbar .nav-tools .country-toggle,
nav.navbar .nav-tools .lang-toggle,
nav.navbar .nav-tools .account-btn,
nav.navbar .nav-actions .icon-btn,
nav.navbar .nav-actions .cart-btn,
nav.navbar .hamburger {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(26, 22, 18, 0.16);
  border-radius: 999px;
  box-shadow: none;
}
nav.navbar .nav-actions .icon-btn,
nav.navbar .nav-actions .cart-btn,
nav.navbar .hamburger {
  width: 44px;
  padding: 0;
  justify-content: center;
}
nav.navbar .hamburger span { background: var(--ink); width: 16px; }
nav.navbar .cart-btn { position: relative; background: var(--honey, #E6A23C); }
nav.navbar .country-toggle-label { color: var(--honey-ink, #7A4A16); }
nav.navbar .country-code-display { color: var(--ink); }
nav.navbar .country-toggle.country-detected,
nav.navbar .country-toggle.country-detected .country-toggle-label,
nav.navbar .country-toggle.country-detected .country-code-display {
  background: #7A4A16;
  color: #F4EFE6;
  border-color: #7A4A16;
}
nav.navbar .logo-text { color: var(--ink); }

/* Full-bleed hero. Text sits on a cream scrim. The photo fills the frame.
   Mobile height is a fixed px value (#103: no vh min-height). */
.hero-pin { background: var(--paper, #F4EFE6); }
.hero-pin .hero-sticky {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 220px 0 0;
  background: var(--paper, #F4EFE6);
}
.hero-pin .hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: 220px;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  background: #E4D5C0;
}
/* Blurred copy of the chosen photo fills the band. Only when the rotator set --hero-blur. */
.hero-pin .hero-photo::before,
.hero-pin .hero-photo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.hero-pin .hero-photo::before {
  inset: -14%;
  background-image: var(--hero-blur, none);
  background-size: cover;
  background-position: var(--hero-pos, center 40%);
  filter: blur(22px) saturate(0.75) brightness(0.78);
  z-index: 0;
}
.hero-pin .hero-photo::after {
  inset: 0;
  background: rgba(244, 239, 230, 0.32);
  z-index: 0;
}
.hero-pin .hero-photo[style*="--hero-blur"]::before,
.hero-pin .hero-photo[style*="--hero-blur"]::after {
  opacity: 1;
}
.hero-pin .hero-photo img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-pos, center 38%);
  background: #E4D5C0;
  border-radius: 0;
  z-index: 1;
}
.hero-pin .hero-scrim {
  display: none;
}
.hero-pin .hero-copy {
  position: relative;
  z-index: 2;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  width: auto;
  max-width: none;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 16px 12px;
  text-align: left;
  background: #F4EFE6;
}
[dir="rtl"] .hero-pin .hero-copy,
[dir="rtl"] .hero-pin .hero-joke,
[dir="rtl"] .hero-pin .hero-joke span {
  text-align: right;
}
[dir="rtl"] .hero-pin .hero-actions { justify-content: flex-end; }
.hero-pin .hero-kicker { margin: 0 0 2px; color: #7A4A16; }
.hero-pin .hero-joke {
  line-height: 0.96;
  overflow: visible;
  color: #1A1612;
  font-size: clamp(21px, 5.12vw, 26px);
}
.hero-pin .hero-joke .power { color: #7A4A16; }
.hero-pin .hero-sub {
  margin: 4px 0 8px;
  max-width: none;
  color: #1A1612;
  font-size: 13px;
  line-height: 1.3;
}
.hero-pin .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.hero-pin .hero-cta { display: inline-flex; }
.hero-pin .hero-shop-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #7A4A16;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 899px) {
  /* The sharp photo already fills this band. Skip the blur so it cannot become LCP. */
  .hero-pin .hero-photo::before,
  .hero-pin .hero-photo::after {
    content: none;
    display: none;
    background-image: none;
  }
  .hero-pin .hero-sticky {
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
  }
  nav.navbar .nav-panel.open {
    position: absolute;
    top: var(--nav-h, 65px);
    left: 0;
    right: 0;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--line, rgba(26, 22, 18, 0.14));
    box-shadow: 0 16px 32px rgba(26, 22, 18, 0.08);
    z-index: 40;
  }
  nav.navbar .nav-panel.open .nav-links {
    display: flex;
    flex-direction: column;
    position: static;
    background: transparent;
    padding: 0;
    gap: 0;
  }
  nav.navbar .nav-panel.open .nav-links a {
    padding: 0 4px;
    font-size: 18px;
    border-bottom: 1px solid rgba(26, 22, 18, 0.06);
  }
  nav.navbar .nav-panel.open .nav-tools { width: 100%; }
  nav.navbar .nav-tools .country-toggle,
  nav.navbar .nav-tools .lang-toggle,
  nav.navbar .nav-tools .account-btn {
    width: 100%;
    max-width: none;
    height: auto;
    justify-content: flex-start;
    gap: 8px;
  }
  nav.navbar .nav-tools .country-toggle .country-toggle-label,
  nav.navbar .nav-tools .account-btn span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

@media (min-width: 900px) {
  .hero-pin .hero-sticky {
    display: grid;
    /* Physical columns. RTL inherits direction and would mirror a swapped template back. */
    direction: ltr;
    grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
    grid-template-rows: 1fr;
    height: calc(100vw * 560 / 1800);
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
  }
  .hero-pin .hero-photo {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
  }
  .hero-pin .hero-photo { background: #E4D5C0; overflow: hidden; }
  .hero-pin .hero-scrim { display: none; }
  /* The crop is the head through the back print. Contain keeps both in frame. */
  .hero-pin .hero-photo img {
    position: relative;
    z-index: 1;
    width: auto;
    height: calc(100vw * 560 / 1800);
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
    align-self: stretch;
    inset: auto;
    aspect-ratio: 1200 / 712;
    object-fit: cover;
    object-position: var(--hero-pos, center 38%);
    z-index: 1;
  }
  [dir="rtl"] .hero-pin .hero-sticky {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  }
  [dir="rtl"] .hero-pin .hero-photo { grid-column: 1; justify-content: flex-end; }
  .hero-pin .hero-copy {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    min-height: 0;
    justify-content: center;
    padding: 20px 32px;
    text-align: left;
    background: #F4EFE6;
  }
  [dir="rtl"] .hero-pin .hero-copy { grid-column: 2; }
  [dir="rtl"] .hero-pin .hero-copy {
    direction: rtl;
    left: auto;
    right: 0;
    text-align: right;
  }
  [dir="rtl"] .hero-pin .hero-actions { justify-content: flex-end; }
  .hero-pin .hero-joke { font-size: clamp(42px, 3.52vw, 61px); }
  .hero-pin .hero-sub {
    margin: 8px 0 12px;
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
  }
  nav.navbar .hamburger { display: none; }
  nav.navbar .nav-panel,
  nav.navbar .nav-panel.open {
    display: flex;
    position: static;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  nav.navbar .nav-links {
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px 14px;
  }
  nav.navbar .nav-links a {
    font-size: 14px;
    padding: 0 2px;
    white-space: nowrap;
    min-height: 44px;
  }
  nav.navbar .nav-tools {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    flex: 0 0 auto;
  }
  nav.navbar .nav-tools .country-toggle {
    width: auto;
    max-width: none;
    padding: 0 12px;
    gap: 6px;
  }
  nav.navbar .nav-tools .lang-toggle,
  nav.navbar .nav-tools .account-btn {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  nav.navbar .nav-tools .country-toggle .country-toggle-label,
  nav.navbar .nav-tools .account-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media (min-width: 1280px) {
  nav.navbar .nav-links { gap: 4px 18px; }
  nav.navbar .nav-tools .country-toggle .country-toggle-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* ===== Hero hover, no scroll-driven hide ===== */
@media (prefers-reduced-motion: no-preference) {
  .hero-flip:hover,
  .hero-flip:focus-within { --flip: 1; }
  .hero-cta { transition: transform 0.2s ease; }
  .hero-cta:hover { transform: translateY(-2px); }
  .mood-card img { transition: transform 0.45s ease; }
  .mood-card:hover img { transform: scale(1.04); }
  .product-card { transition: transform 0.28s ease; }
  .product-card:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .hero-v2, .hero-pin, .hero-sticky, .hero-flip, .mood-band, .mood-strip {
    min-height: 0 !important;
  }
}

/* ===== Mood strip: one row of product cards ===== */
.mood-strip {
  background: var(--paper, #F4EFE6);
  padding: 16px 0 0;
  margin-top: 0;
}
.mood-strip-label {
  margin: 0 16px 10px;
  font-family: var(--font-sans, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey-ink, #7A4A16);
}
.mood-strip-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.mood-strip-track::-webkit-scrollbar { display: none; height: 0; }
.mood-card {
  flex: 0 0 148px;
  scroll-snap-align: start;
  position: relative;
  display: block;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--sand, #EDE4D3);
}
.mood-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.mood-card img.mood-onbody { object-position: center 22%; }
.mood-card-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(26, 22, 18, 0.72));
  color: #fff;
  font-family: var(--display, 'Anton Local', Impact, sans-serif);
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  direction: ltr;
}
@media (min-width: 900px) {
  .mood-strip { padding: 10px 24px 0; }
  .mood-strip-label { margin: 0 0 6px; }
  .mood-strip-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    mask-image: none;
    padding: 0;
    gap: 12px;
  }
  .mood-card { flex: none; height: 76px; }
  .mood-card-name { font-size: 18px; }
}

/* ===== Collection filters: wrap, no visible scrollbar ===== */
section#shop.shop { background: var(--paper, #F4EFE6); padding-top: 18px; }
section#shop .section-header {
  margin: 0 0 8px;
  max-width: none;
  width: auto;
  text-align: start;
  margin-left: 0;
  margin-right: 0;
}
section#shop .section-header h2 { font-size: 1.35rem; line-height: 1.15; margin: 0; }
section#shop .section-header p { font-size: 0.85rem; margin-left: 0; margin-right: 0; }
section#shop .gender-filter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(26, 22, 18, 0.35);
  border-radius: 999px;
  background: #fff;
}
section#shop .shop-bar { background: var(--paper, #F4EFE6); }
section#shop .mood-filters,
section#shop .filter-tabs,
section#shop .shop-bar {
  scrollbar-width: none;
}
section#shop .mood-filters::-webkit-scrollbar,
section#shop .filter-tabs::-webkit-scrollbar,
section#shop .shop-bar::-webkit-scrollbar { display: none; height: 0; width: 0; }
section#shop .filter-sort-btn { background: var(--ink); color: var(--paper, #F4EFE6); }
section#shop .shop-filters { background: var(--paper, #F4EFE6); }
section#shop .quick-add,
.btn-cookie-accept,
.add-to-cart {
  background: var(--honey, #E6A23C);
  color: var(--ink, #1A1612);
  min-height: 44px;
}
.btn-cookie-decline {
  color: var(--ink, #1A1612);
  border-color: rgba(26, 22, 18, 0.35);
  background: transparent;
}

@media (min-width: 900px) {
  section#shop .shop-bar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }
  section#shop .filter-tabs {
    order: 1;
    flex: 1 0 100%;
    flex-wrap: wrap;
    overflow: visible;
    min-width: 0;
    max-width: none;
    margin: 0;
    justify-content: flex-start;
  }
  section#shop.shop { padding-top: 28px; }
  section#shop .mood-filters,
  body[dir="rtl"] section#shop .mood-filters {
    order: 2;
    flex: 0 1 auto;
    flex-wrap: wrap;
    overflow: visible;
    max-width: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
  section#shop .gender-filter { order: 3; flex: 0 0 auto; flex-wrap: nowrap; margin: 0; }
  section#shop .ships-toggle { order: 4; flex: 0 0 auto; }
  section#shop .sort-label {
    order: 5;
    margin-inline-start: auto;
    flex: 0 0 auto;
  }
  section#shop .sort-label select {
    width: 168px;
    max-width: 168px;
  }
}
@media (min-width: 900px) and (max-width: 1180px) {
  section#shop .filter-btn,
  section#shop .mood-chip,
  section#shop .gender-btn,
  section#shop .ships-toggle { padding: 0 10px; font-size: 13px; }
  section#shop .section-header p { display: none; }
  .mood-strip { padding-bottom: 4px; }
  .mood-card { height: 68px; }
}
@media (min-width: 1280px) {
  section#shop .filter-tabs { flex: 1 0 100%; flex-wrap: wrap; overflow: visible; max-width: none; }
  section#shop .mood-filters { flex: 0 1 auto; max-width: none; overflow: visible; }
  section#shop .sort-label { margin-inline-start: auto; }
  section#shop .sort-label select { width: 168px; max-width: 168px; }
}

/* Print is the still. Hover shows the person when that photo exists. */
.product-image > .img-front,
.product-image > picture.img-front {
  opacity: 0;
  z-index: 2;
  transition: opacity 0.28s ease;
}
.product-card:hover .img-front,
.product-card:focus-within .img-front,
.product-card.is-swapped .img-front,
.product-card:hover picture.img-front,
.product-card:focus-within picture.img-front,
.product-card.is-swapped picture.img-front {
  opacity: 1;
}
.product-card .product-image { background: var(--sand, #EDE4D3); }
/* PDP photo well uses the same gray as the card behind the local mockup. */
.modal-image { background: var(--sand, #EDE4D3); }
/* Offscreen cards stay out of the first load. The first row always paints. */
#products-grid .product-card:nth-child(n + 3) {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.product-card-static .product-image img,
.product-card .product-image img.img-view,
.product-card .product-image picture.img-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.product-card .product-image picture.img-back img,
.product-card-static .product-image picture.img-back,
.product-card-static .product-image picture.img-back img {
  object-position: center 18%;
}
.product-card-static .product-image picture.img-back { opacity: 1; }
.product-card-static .product-image > .img-front { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .product-image > .img-front,
  .product-image > picture.img-front,
  .product-card,
  .mood-card img { transition: none; }
  .product-card:hover { transform: none; }
}

/* ===== Crew: on-body photos, sand ground ===== */
section#real-people.real-people {
  background: var(--sand, #EDE4D3);
  padding: 36px 16px 28px;
}
section#real-people .section-header { margin-bottom: 16px; }
section#real-people .section-header h2,
section#real-people .section-header p { color: var(--ink); }
.crew-carousel-wrapper .carousel-btn {
  background: var(--paper, #F4EFE6);
  color: var(--ink);
  border: 1px solid rgba(26, 22, 18, 0.16);
  width: 44px;
  height: 44px;
}
.avatar-card.avatar-quote { background: var(--honey, #E6A23C); }
.avatar-card.avatar-quote .quote-inner p,
.avatar-card.avatar-quote .quote-tag { color: var(--ink); }

/* Light page surfaces that used to be charcoal. */
.about {
  background: var(--paper, #F4EFE6);
  color: var(--ink);
}
.about-text h2,
.about-text p { color: var(--ink); }
.about-tagline { color: var(--honey-ink, #7A4A16) !important; }
.about-mark { color: var(--honey-ink, #7A4A16); opacity: 0.35; }
.footer {
  background: var(--sand, #EDE4D3);
  color: var(--ink);
}
.footer-links a,
.footer-links .footer-cookie-settings,
.footer-social-link { color: var(--ink); }
.footer-links a:hover,
.footer-links .footer-cookie-settings:hover,
.footer-social-link:hover { color: var(--honey-ink, #7A4A16); }
.footer-links span { color: rgba(26, 22, 18, 0.35); }
.footer-trust-strip { border-bottom-color: rgba(26, 22, 18, 0.12); }
.cookie-banner {
  background: var(--sand, #EDE4D3);
  color: var(--ink);
  border-top: 3px solid var(--honey, #E6A23C);
}
.cookie-link,
.privacy-container h3,
.privacy-container a,
.modal-price,
.logo-text { color: var(--honey-ink, #7A4A16); }
nav.navbar .logo-text { color: var(--ink); }
section.brand-strip { background: #E6A23C; }
section.brand-strip .marquee span { color: #1A1612; }
.quality-promise { background: var(--paper, #F4EFE6); }
.auth-modal,
.orders-modal,
.account-menu {
  background: var(--paper, #F4EFE6);
  color: var(--ink);
  border-color: rgba(26, 22, 18, 0.12);
}
.search-overlay input,
.search-results button { color: var(--ink); }

/* Headings and card titles are a system sans. Anton stays on the joke and wordmark. */
h1, h2, h3, h4,
.section-header h2,
.section-header p,
.product-phrase,
.product-price,
.product-card-static .product-meta-static,
.footer-tagline,
.promise-container h2,
.promise-container > p,
.contact h2,
.privacy-container h2,
.privacy-container h3 {
  font-family: var(--font-sans, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-style: normal;
}
.hero-pin .hero-joke,
.logo-text,
.footer-logo,
.mood-card-name,
.about-mark {
  font-family: var(--display, 'Anton Local', 'Anton', Impact, sans-serif);
}
.product-card .product-info,
.product-card-static .product-info {
  padding: 10px 12px 12px;
}
.product-card .product-phrase,
.product-card-static .product-phrase {
  color: #1A1612;
  font-weight: 650;
  letter-spacing: -0.011em;
  line-height: 1.3;
  margin: 0 0 4px;
}
.product-card .product-price {
  color: #1A1612;
  margin-top: 0;
  line-height: 1.2;
}
.product-card .product-bottom { margin-top: 2px; row-gap: 4px; }
.product-card-static .product-meta-static {
  padding: 0;
  margin-top: 2px;
  color: #3D3832;
  font-size: 0.9rem;
  line-height: 1.3;
}
section#shop .section-header p { color: #3D3832; }

/* Contrast and labels Lighthouse flagged on the cream page. */
.card-rating {
  color: #6B4E12;
  height: 1.2em;
  min-height: 1.2em;
  max-height: 1.2em;
}
.card-ship { color: #3D3832; }
section#shop .quick-add,
.btn-cookie-accept,
.add-to-cart {
  background: #E6A23C;
  color: #1A1612;
}
.avatar-card.avatar-quote .quote-tag { opacity: 1; color: #1A1612; }
.quality-promise { color: #1A1612; }
.promise-container h2,
.promise-container > p,
.promise-item p { color: #1A1612; }
.promise-container .section-eyebrow,
.promise-item h3 { color: #7A4A16; }
.promise-item {
  background: #fff;
  border-color: rgba(26, 22, 18, 0.12);
}
.contact p,
#slogan-box p,
#slogan-counter { color: #3D3832 !important; }
.privacy-section { background: #F4EFE6; color: #1A1612; }
.privacy-container p { color: #3D3832; }
.privacy-container a,
.privacy-container h3 { color: #7A4A16; }
.footer,
.footer-logo,
.footer-tagline,
.footer-trust-item,
.footer .footer-trust-item span,
.footer-links a,
.footer-links .footer-cookie-settings { color: #1A1612; }
.footer-links span { color: #5C564C; }
.carousel-dots { gap: 4px; }
.carousel-dot {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  position: relative;
  transform: none;
}
.carousel-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5C564C;
  display: block;
  margin: 8px auto 0;
}
.carousel-dot.active { transform: none; background: transparent; }
.carousel-dot.active::after { background: #1A1612; width: 10px; height: 10px; margin-top: 7px; }

/* Dim the photo, not the type. Opacity on the whole card drops the text under 4.5:1. */
.product-card.not-shippable,
.product-card.not-shippable:hover {
  opacity: 1;
  filter: none;
}
.product-card.not-shippable .product-image { opacity: 0.55; filter: grayscale(35%); }
.product-card.not-shippable:hover .product-image { opacity: 0.85; filter: grayscale(15%); }

section#privacy {
  content-visibility: visible;
  background: #F4EFE6;
  color: #1A1612;
}
section#privacy a {
  color: #7A4A16 !important;
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* Hebrew UI only. The file is a Hebrew subset, so English pages do not download it.
   The joke, wordmark, and mood names stay Anton. */
html[lang="he"],
[dir="rtl"] {
  --font-sans: "Heebo Local", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: "Heebo Local", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[lang="he"] body,
[dir="rtl"] body,
html[lang="he"] .trust-item,
[dir="rtl"] .trust-item {
  font-family: "Heebo Local", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
  .trust-bar-inner.is-rotating .trust-item { transition: opacity 0.35s linear; }
}
@media (max-width: 768px) {
  .trust-bar { overflow: hidden; }
}
/* 1024x768 keeps the landscape hero ratio. Tighten the mood row so the
   first product row still starts on that screen, with a real gap above the heading. */
@media (min-width: 900px) and (max-height: 800px) {
  .mood-strip { padding-top: 8px; padding-bottom: 0; }
  .mood-card { height: 56px; }
  section#shop.shop { padding-top: 24px; }
  section#shop .section-header { margin: 0 0 4px; }
  section#shop .section-header h2 { font-size: 1.15rem; }
}