/* Shared visual rhythm for the public Kalimera pages.  The existing page
   styles keep their distinctive coffee/sea palette; these rules give every
   section the same surface treatment, borders, and responsive spacing. */
:root {
  --section-warm: #f7f2ea;
  --section-cool: #edf6f5;
  --section-ink: #163547;
  --section-border: rgba(22, 53, 71, .13);
}

/* Keep below-the-fold sections out of the initial style/layout/paint pass.
   The intrinsic block size reserves a stable scroll range until each section
   approaches the viewport, avoiding both wasted mobile work and layout jumps. */
@supports (content-visibility: auto) {
  body:not(.profile-page) main > .coffee-hub,
  body:not(.profile-page) main > .tips,
  body:not(.profile-page) main > .taste-section,
  body:not(.profile-page) main > .deals-section,
  body:not(.profile-page) main > .archive {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 760px;
  }
}

main > section[data-parallax],
main > .deals-page[data-parallax],
.legal-page[data-parallax] {
  position: relative;
  isolation: isolate;
  /* Section spacing and surface contrast do the grouping work. A raw border
     here reads as an accidental divider below the hero on some viewports. */
  border-top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Narrow .section-wrap elements still get a full-bleed background without
   adding horizontal scroll or changing their content width. */
main > section.section-wrap[data-parallax]::before,
.deals-page.section-wrap[data-parallax]::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc((100vw - 100%) / -2);
  background: inherit;
  border-top: inherit;
  pointer-events: none;
}

[data-parallax="surface"] {
  --surface-top: var(--section-warm);
  --surface-bottom: var(--section-cool);
  background-color: color-mix(in srgb, var(--surface-bottom) 92%, transparent);
  background-image:
    radial-gradient(circle at 9% calc(14% + var(--parallax-shift, 0px)), rgba(239, 170, 90, .13), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-top) 93%, transparent), color-mix(in srgb, var(--surface-bottom) 92%, transparent));
  background-position: center calc(50% + var(--parallax-shift, 0px)), center center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

[data-parallax="image"] {
  background-position: calc(50% + var(--parallax-shift, 0px)) calc(50% + var(--parallax-shift, 0px));
}

/* The light surface previously used by upload now frames the daily feed. It
   stays all-CSS, so desktop gets depth while mobile stays light to scroll. */
#today[data-parallax="surface"] {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  background-color: #f5ead8;
  background-image:
    radial-gradient(circle at 88% 16%, rgba(239,170,90,.2), transparent 34rem),
    radial-gradient(circle at 12% 88%, rgba(43,110,143,.12), transparent 28rem),
    linear-gradient(118deg, #fffdf9 0%, #f5ead8 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
}
#today[data-parallax="surface"]::before { display: none; }

#qa[data-parallax="surface"],
#tips[data-parallax="surface"],
#archive[data-parallax="surface"] {
  background-color: #f6f3eb;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(239,170,90,.14), transparent 27rem),
    linear-gradient(152deg, #fbf8f2 0%, #edf5f4 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
}

#today[data-parallax],
#archive[data-parallax],
#tips[data-parallax] {
  --surface-top: #fbf8f2;
  --surface-bottom: #f1f6f4;
}
#upload[data-parallax],
#deals[data-parallax] {
  --surface-top: #eef6f5;
  --surface-bottom: #f8f3eb;
}
#guides[data-parallax],
#qa[data-parallax],
#profile[data-parallax] {
  --surface-top: #f8f3eb;
  --surface-bottom: #edf5f4;
}

/* A common edge and shadow make the otherwise different card families read
   as one system on desktop and mobile. */
.featured,
.upload-card,
.deal-card,
.deals-page-card,
.gallery-item,
.bean-card,
.guide-card,
.calculator-card,
.freshness-card,
.tips-grid article,
.public-profile-card,
.profile-card,
.legal-card {
  border: 1px solid var(--section-border);
}

.section-heading {
  border-bottom-color: rgba(22, 53, 71, .2);
}

.section-heading h2,
.deals-page-hero h1,
.legal-header h1 {
  text-wrap: balance;
}

.deals-page[data-parallax] {
  --surface-top: #fbf8f2;
  --surface-bottom: #edf6f5;
  width: min(var(--page-content-max), calc(100% - (var(--page-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(18px, 3vw, 38px);
  border-radius: 0 0 22px 22px;
}

.deals-layout-control {
  display: none;
}

.legal-page[data-parallax] {
  --surface-top: #f8f2e8;
  --surface-bottom: #edf6f5;
}

@media (max-width: 700px) {
  main > section[data-parallax],
  main > .deals-page[data-parallax],
  .legal-page[data-parallax] {
    border-top-color: rgba(22, 53, 71, .1);
  }
  .deals-page[data-parallax] {
    width: min(var(--page-content-max), calc(100% - (var(--page-gutter) * 2)));
    padding-inline: 16px;
    border-radius: 0;
  }
  .deals-layout-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: -8px 0 18px;
    padding: 5px;
    border: 1px solid rgba(22, 53, 71, .16);
    border-radius: 999px;
    background: rgba(255, 253, 249, .78);
    box-shadow: 0 5px 14px rgba(22, 53, 71, .07);
  }
  .deals-layout-label {
    padding: 0 6px 0 3px;
    color: #55707d;
    font: 800 13px Assistant, Arial, sans-serif;
  }
  .deals-layout-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #55707d;
    cursor: pointer;
    transition:
      transform var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
      background-color var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
      color var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease);
  }
  .deals-layout-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  .deals-layout-button[aria-pressed="true"] {
    background: var(--blue);
    color: #fff;
  }
  .deals-layout-button:active {
    transform: scale(.94);
  }
  .deals-page-grid[data-mobile-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .deals-page-grid[data-mobile-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .deals-page-grid[data-mobile-columns="2"] .deals-page-copy {
    padding: 12px;
  }
  .deals-page-grid[data-mobile-columns="2"] .deals-page-copy h2 {
    margin: 9px 0 7px;
    font-size: 18px;
    letter-spacing: -.04em;
  }
  .deals-page-grid[data-mobile-columns="2"] .deal-page-meta {
    align-items: flex-start;
  }
  .deals-page-grid[data-mobile-columns="2"] .deal-page-category,
  .deals-page-grid[data-mobile-columns="2"] .deal-page-description,
  .deals-page-grid[data-mobile-columns="2"] .deal-page-updated {
    display: none;
  }
  .deals-page-grid[data-mobile-columns="2"] .deal-page-price {
    font-size: 21px;
  }
  .deals-page-grid[data-mobile-columns="2"] .deal-page-original {
    font-size: 12px;
  }
  .deals-page-grid[data-mobile-columns="2"] .deal-page-saving {
    margin: 0 0 8px;
    font-size: 13px;
  }
  .deals-page-grid[data-mobile-columns="2"] .deal-page-coupon {
    margin: 0 0 8px;
    padding: 7px;
    font-size: 12px;
  }
  .deals-page-grid[data-mobile-columns="2"] .deal-page-link {
    margin-top: 10px;
    padding: 9px 6px;
    font-size: 13px;
  }
  .section-heading {
    padding-bottom: 13px;
    margin-bottom: 18px;
  }
  .featured,
  .upload-card,
  .deal-card,
  .deals-page-card,
  .gallery-item,
  .bean-card,
  .guide-card,
  .calculator-card,
  .freshness-card,
  .tips-grid article,
  .public-profile-card,
  .profile-card,
  .legal-card {
    border-color: rgba(22, 53, 71, .11);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    background-position: center center, center;
  }
}

/* Keep the main feed continuous. The content itself supplies the visual
   spacing, so these outer bands do not need a blank lead-in or tail. */
#today.today { padding-top: 0 !important; }
#upload.upload-section { padding-top: 0 !important; }
#guides,
#deals.deals-section { padding-top: 0 !important; }
#archive.archive { padding-bottom: 0 !important; }

/* Keep the main-page rhythm compact without changing the full-bleed section
   surfaces. Individual section content retains the shared page gutter. */
#guides > .coffee-hub { padding-top: 20px !important; }
#beans.taste-section { padding-top: 20px !important; }
#archive.archive { padding-bottom: 20px !important; }
#deals.deals-section { padding-bottom: 20px !important; }
#qa.troubleshooting { padding-bottom: 20px !important; }

/* Deals feel interactive on a mouse/trackpad without adding movement to
   touch scrolling. The same treatment is used for homepage, catalogue, and
   bean-specific deal cards. */
@media (hover: hover) and (pointer: fine) {
  :is(.deal-card, .deals-page-card, .bean-deal-card) {
    transition:
      transform var(--motion-duration-menu, .22s) var(--motion-ease-enter, cubic-bezier(.2,.75,.15,1)),
      box-shadow var(--motion-duration-menu, .22s) var(--motion-ease-standard, ease),
      border-color var(--motion-duration-menu, .22s) var(--motion-ease-standard, ease),
      background-color var(--motion-duration-menu, .22s) var(--motion-ease-standard, ease);
  }

  :is(.deal-card, .deals-page-card, .bean-deal-card):is(:hover, :focus-within) {
    transform: translateY(-6px);
    border-color: rgba(43, 110, 143, .46);
    box-shadow: 0 16px 27px rgba(22, 53, 71, .18), 7px 8px 0 rgba(43, 110, 143, .13);
  }

  .bean-deal-card:is(:hover, :focus-within) {
    border-color: rgba(255, 253, 249, .62);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 16px 27px rgba(6, 24, 32, .28), 7px 8px 0 rgba(239, 170, 90, .18);
  }

  :is(.deal-card, .deals-page-card) :is(.deal-image-link img, .deals-page-image-link > img),
  .bean-deal-card .bean-deal-image-link img {
    transition:
      transform var(--motion-duration-surface, .3s) var(--motion-ease-enter, cubic-bezier(.2,.75,.15,1)),
      filter var(--motion-duration-surface, .3s) var(--motion-ease-standard, ease);
  }

  :is(.deal-card, .deals-page-card, .bean-deal-card):is(:hover, :focus-within) :is(.deal-image-link img, .deals-page-image-link > img, .bean-deal-image-link img) {
    transform: scale(1.035);
    filter: saturate(1.06) contrast(1.02);
  }

  :is(.deal-card, .deals-page-card):is(:hover, :focus-within) :is(.deal-link, .deal-page-link) {
    background: var(--terracotta);
  }

  :is(.deal-card, .deals-page-card, .bean-deal-card):focus-within {
    outline: 3px solid rgba(239, 170, 90, .62);
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.deal-card, .deals-page-card, .bean-deal-card),
  :is(.deal-card, .deals-page-card, .bean-deal-card) :is(.deal-image-link img, .deals-page-image-link > img, .bean-deal-image-link img) {
    transition: none;
    will-change: auto;
  }
}

/* -------------------------------------------------------------------------
   Kalimera app surfaces
   A deliberately small design-system layer that sits after the legacy page
   CSS.  It makes the public templates feel like one responsive product while
   leaving the existing content and RTL structure intact. */
:root {
  --app-glass: rgba(255, 253, 249, .72);
  --app-glass-strong: rgba(255, 253, 249, .88);
  --app-elevation: var(--motion-shadow-2, 0 16px 38px rgba(22, 53, 71, .12));
  --app-elevation-hover: var(--motion-shadow-3, 0 23px 46px rgba(22, 53, 71, .18));
  --app-radius: 18px;
  --app-radius-sm: 13px;
  --app-focus: 0 0 0 4px rgba(239, 170, 90, .32);
  --page-content-max: 1120px;
  /* Keep the feed comfortably bounded, while letting daily coffee cards use
     enough room for their image, title and reactions on a wide desktop. */
  --daily-feed-max: 1120px;
  --page-gutter: clamp(16px, 4vw, 52px);
  --page-header-gutter: max(var(--page-gutter), calc((100vw - var(--page-content-max)) / 2));
}

/* Layout containment belongs to the entire app, not just individual cards.
   Pseudo backgrounds are allowed to paint full width inside main, but cannot
   enlarge the page itself or create a second horizontal/left-side scrollbar. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  max-width: 100vw;
  /* `hidden` makes the other axis compute to `auto`, silently turning body
     into a second scroll container and breaking `position: sticky`. `clip`
     contains decorative overflow without becoming a scrolling ancestor. */
  overflow-x: clip !important;
}
/* Keep a single document scroller. In RTL Chromium layouts, letting both
   roots become scroll containers can draw a scrollbar at each edge. */
html {
  /* Keep the one document scrollbar on the conventional right edge. RTL
     belongs to the application canvas below, not the scrolling viewport. */
  direction: ltr;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scroll-padding-top: 96px;
}
body { min-height: 100%; overflow-y: visible; direction: rtl; position: relative; }
html[data-locale="en"] body { direction: ltr; }
html:has(body.popup-scroll-locked) { overflow-y: hidden; }
body > :is(.site-header, main, footer),
main {
  width: 100%;
  max-width: 100%;
}
main {
  /* clip avoids creating a nested scroll container while safely containing
     full-bleed pseudo background paint from narrow section wrappers. */
  overflow-x: clip;
}
main > :is(section, .deals-page, .legal-page) {
  box-sizing: border-box;
}
main,
main > :is(section, .deals-page, .legal-page) {
  min-width: 0;
  max-width: 100%;
}
.section-wrap {
  width: min(var(--page-content-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
body {
  text-rendering: optimizeLegibility;
}

.site-header {
  position: sticky !important;
  top: 0;
  z-index: var(--layer-sticky, 1200);
  isolation: isolate;
  min-height: 82px;
  padding-inline: var(--page-header-gutter) !important;
  background: var(--app-glass) !important;
  -webkit-backdrop-filter: blur(var(--motion-blur-menu, 12px)) saturate(1.12);
  backdrop-filter: blur(var(--motion-blur-menu, 12px)) saturate(1.12);
  box-shadow: 0 6px 26px rgba(22, 53, 71, .07);
}
.site-header + main { margin-top: 0; }

.site-header nav a,
.site-header .header-actions > a,
.site-header .header-actions > button,
.site-header .notifications-link {
  transition:
    color var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
    background-color var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
    border-color var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
    transform var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease);
}

.site-header nav a:is(:hover, :focus-visible) { color: var(--blue); }
.site-header :is(a, button):focus-visible { outline: none; box-shadow: var(--app-focus); }

.tip-of-day {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(100%, 620px);
  margin: 0;
  padding: 9px 11px 9px 9px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #1E293B !important;
  box-shadow: 0 10px 24px rgba(22,53,71,.12), inset 0 1px 0 rgba(255,255,255,.7);
  text-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 800 clamp(14px, 1.45vw, 16px)/1.35 Assistant, Arial, sans-serif;
}
#today > .daily-tip-inner,
#today > .today-content {
  width: min(var(--daily-feed-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
#today > .daily-tip-inner {
  margin: 0 0 18px;
  /* Keep a deliberate breathing edge on the physical left of the tip card.
     This is physical rather than logical padding so the Hebrew RTL text
     stays anchored to the right while the card never feels flush on its left. */
  padding-left: 10%;
  display: grid;
  justify-items: end;
  gap: 9px;
}
#today > .daily-tip-inner .tip-of-day { pointer-events: auto; }
.tip-day-text { min-width: 0; }
.section-heading h2,
.deals-page-hero h1,
.legal-header h1 { color: var(--ink); }
.section-heading p { text-wrap: balance; }

/* Daily coffee keeps its time marker with the title and uses the remaining
   width for a deliberately RTL reading line instead of a floating timestamp. */
#today > .today-content > .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#today:not(.is-empty-today) {
  /* Keep the daily feature compact within the page. A multi-photo day is not
     capped: every submitted photo remains reachable in the normal document flow. */
  padding-block: clamp(34px, 4vw, 48px);
}
#today {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
#today > .today-content > .section-heading h2 { margin-block: 0; }
#todayDate {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(22,53,71,.14);
  border-radius: 999px;
  background: rgba(255,253,249,.72);
  color: #55707d;
  font: 800 14px/1 Assistant, Arial, sans-serif;
  white-space: nowrap;
}

/* One daily photo is a balanced split card. The image has its own column;
   title, description and author/actions have a clear RTL reading edge. */
#featuredCard:not(.has-multiple) .today-coffee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* The image and its RTL reading column are the two actual grid items. The
     reactions live directly below the author inside that column. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'media copy';
  gap: 0;
  column-gap: 0;
  align-content: start;
  /* A single post should feel like a compact daily feature, not expand with a
     wide monitor. Multiple daily posts intentionally keep their natural flow. */
  min-height: 0;
  height: clamp(360px, 34vw, 440px);
  max-height: 440px;
  text-align: start;
}
#featuredCard:not(.has-multiple) .today-coffee-media { grid-area: media; min-width: 0; min-height: 0; margin: 0; }
#featuredCard:not(.has-multiple) .today-coffee-photo { height: 100%; min-height: 0; aspect-ratio: auto; }
#featuredCard:not(.has-multiple) .today-coffee-photo img { width: 100%; height: 100%; object-fit: cover !important; object-position: center; }
#featuredCard:not(.has-multiple) .today-coffee-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  /* This direct split deliberately has no horizontal gutter. The text's
     image-facing edge meets the photograph exactly on desktop. */
  margin: 0;
  padding: 24px clamp(24px, 3vw, 48px);
  text-align: start;
  cursor: default;
}
#featuredCard:not(.has-multiple) .today-coffee-copy h3 { max-width: 18ch; margin: 0; text-align: start; }
#featuredCard:not(.has-multiple) .today-coffee-copy p { min-height: 0; max-width: 38ch; margin: 16px 0 0; text-align: start; }
#featuredCard:not(.has-multiple) .today-coffee-copy .today-coffee-author {
  display: block;
  margin: 14px 0 0;
  color: var(--terracotta);
  text-align: start;
}
#featuredCard:not(.has-multiple) .today-coffee-footer {
  grid-area: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 59px;
  margin: 16px 0 0;
  padding: 10px 0;
  border-top: 1px solid rgba(22,53,71,.14);
}
#featuredCard:not(.has-multiple) .today-coffee-footer .photo-actions {
  position: static !important;
  inset: auto !important;
  display: flex;
  flex: 0 0 auto;
  width: auto !important;
  margin-inline-start: auto;
  padding: 0 !important;
  direction: ltr;
}

/* The single desktop feature reads from the image edge inward. Keep the copy
   pane physically attached to the photo, while the footer uses the remaining
   column height so its separator retains a calm 10px button inset. */
@media (min-width: 701px) {
  #featuredCard:not(.has-multiple) .today-coffee-copy {
    direction: rtl;
    align-items: stretch;
    justify-content: flex-start;
    padding-block: 24px;
    padding-inline-start: 0;
    padding-inline-end: clamp(24px, 3vw, 48px);
    text-align: right;
  }

  #featuredCard:not(.has-multiple) .today-coffee-copy :is(h3, p, .today-coffee-author) {
    text-align: right;
  }

  #featuredCard:not(.has-multiple) .today-coffee-footer {
    margin-top: auto;
    margin-bottom: 0;
    padding-block: 10px;
  }
}

/* A multi-coffee day deliberately uses image-first cards.  The previous
   equal-height grid stretched every card to the height of its tallest sibling
   while each card's image only occupied its natural row; that left the large
   empty lower panels visible in the daily feed.  Let each card keep its
   natural height instead: media fills the card width, then its own compact
   caption and reaction footer follow beneath it. */
.today-gallery.has-multiple {
  grid-auto-rows: auto;
  align-items: start;
}
.today-gallery.has-multiple .today-coffee {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-height: 0;
  height: auto;
}
.today-gallery.has-multiple .today-coffee-media {
  flex: 0 0 auto;
  width: 100%;
}
.today-gallery.has-multiple .today-coffee-photo {
  min-height: 250px;
  aspect-ratio: 4 / 3 !important;
}
.today-gallery.has-multiple .today-coffee-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}
.today-gallery.has-multiple .today-coffee-copy {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 18px 0;
}
.today-gallery.has-multiple .today-coffee-copy h3 {
  display: -webkit-box;
  min-height: 2.24em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.today-gallery.has-multiple .today-coffee-copy p {
  display: -webkit-box;
  min-height: 2.9em;
  margin-block: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.today-gallery.has-multiple .today-coffee-footer {
  min-height: 59px;
  margin-top: 10px;
  padding: 10px 0;
}

@media (max-width: 700px) {
  /* A daily coffee should retain its natural tones on touch screens. The
     action controls already have their own translucent background, so the
     photo itself does not need a dark gradient veil. */
  .today-coffee-photo::after { content: none; display: none; }
  #today { width: 100%; max-width: none; margin-inline: 0; }
  #today > .today-content { width: 100%; max-width: none; margin-inline: 0; }
  #today > .daily-tip-inner { width: 90vw; margin: 0 auto 16px; padding-left: 10%; }
  #today > .daily-tip-inner .tip-of-day {
    width: 100%;
    max-width: 100%;
    padding: 8px 9px 8px 8px;
    border-radius: 15px;
    font-size: 13px;
    line-height: 1.3;
    direction: rtl;
    text-align: right;
    white-space: normal;
  }
  #today:not(.is-empty-today) { padding-block: 28px 32px; }
  #today > .section-heading { gap: 10px; }
  #todayDate { padding: 6px 9px; font-size: 13px; }
  #featuredCard:not(.has-multiple) .today-coffee {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 'media' 'copy' 'footer';
    min-height: 0;
    /* The desktop feature has a deliberate fixed height. On a phone the
       stacked image, caption and actions need their natural height; otherwise
       overflow:hidden clips the caption below the square image. */
    height: auto;
    max-height: none;
  }
  #featuredCard:not(.has-multiple) .today-coffee-photo {
    height: auto;
    min-height: calc(100vw - 24px);
    aspect-ratio: 1;
  }
  #featuredCard:not(.has-multiple) .today-coffee-copy { padding: 23px 22px 15px; }
  #featuredCard:not(.has-multiple) .today-coffee-copy h3 { max-width: none; }
  #featuredCard:not(.has-multiple) .today-coffee-footer { padding: 10px 22px; }
  .today-gallery.has-multiple { grid-auto-rows: auto; }
  .today-gallery.has-multiple .today-coffee-photo { min-height: 0; }
  .today-gallery.has-multiple .today-coffee-copy { padding: 18px 16px 0; }
  .today-gallery.has-multiple .today-coffee-footer { padding: 10px 0; }
}

/* Mobile keeps the subject framed without the desktop crop. The page texture
   scrolls normally here to avoid the fixed-background jank seen on Android. */
@media (max-width: 767px) {
  /* Sections are true edge-to-edge mobile surfaces; their content retains the
     shared safe gutter rather than relying on an outer margin. */
  main > section.section-wrap {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--page-gutter);
  }
  main.deals-page.section-wrap[data-parallax] {
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--page-gutter);
  }
}

.featured,
.today-coffee,
.gallery-item,
.upload-card,
.guide-card,
.calculator-card,
.freshness-card,
.tips-grid article,
.qa-question,
.bean-card,
.profile-card,
.public-profile-card,
.legal-card,
.deals-page-card {
  border-radius: var(--app-radius);
  box-shadow: var(--app-elevation);
}

/* The daily feature uses the same crisp, offset elevation as the Gallery
   cards. Keeping the rule on the rendered card (rather than the full-width
   section) preserves the edge-to-edge section background. */
#featuredCard > .today-coffee {
  border: 1px solid rgba(22, 53, 71, .13);
  background: #fff;
  box-shadow: 8px 9px 0 rgba(22, 53, 71, .1);
}

.featured,
.today-coffee,
.gallery-item,
.upload-card,
.calculator-card,
.freshness-card,
.tips-grid article,
.qa-question,
.deals-page-card,
.legal-card,
.profile-card,
.public-profile-card {
  background: var(--app-glass-strong);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
}

.today-coffee,
.gallery-item,
.deal-card,
.deals-page-card,
.tips-grid article,
.qa-question,
.bean-card { overflow: hidden; }

.today-coffee-photo img,
.gallery-image img,
.featured-photo img { transition: transform .42s cubic-bezier(.2,.75,.15,1), filter .35s ease; }
.today-coffee-photo::after,
.gallery-image::after,
.featured-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(9, 30, 39, .22));
  opacity: .46;
  transition: opacity .24s ease;
}

.drop-zone {
  min-height: 300px;
  border-style: dashed;
  border-width: 2px;
  border-radius: var(--app-radius-sm);
  background: rgba(255, 253, 249, .6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.52);
}
.drop-zone .drop-icon { animation: app-upload-float 2.2s ease-in-out infinite; }
.drop-zone:is(:hover, :focus-within, .dragover) {
  border-color: var(--terracotta);
  background: rgba(237, 246, 245, .86);
  box-shadow: 0 0 0 5px rgba(43,110,143,.11), inset 0 0 0 1px rgba(255,255,255,.7);
}
.drop-zone.has-preview { min-height: 112px; }
.drop-zone.has-preview .drop-icon { animation: none; }
.preview { box-shadow: 0 10px 26px rgba(22,53,71,.14); }
.upload-message.is-success {
  padding: 10px 13px;
  border: 1px solid rgba(58, 113, 81, .24);
  border-radius: 11px;
  background: rgba(228, 243, 222, .8);
  color: #24633d;
  animation: app-success-in .28s ease both;
}
/* The live status node is intentionally always present for screen readers.
   It must not reserve a blank 24px line before it contains an actual status. */
.upload-message:empty {
  display: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.deals-filters,
.qa-filters,
.machine-picker,
.taste-picker,
.guide-level-picker {
  scrollbar-width: none;
}
.deals-filters::-webkit-scrollbar,
.qa-filters::-webkit-scrollbar,
.machine-picker::-webkit-scrollbar,
.taste-picker::-webkit-scrollbar,
.guide-level-picker::-webkit-scrollbar { display: none; }
.swipe-scroll-shell {
  position: relative;
  isolation: isolate;
  margin: 0 0 18px;
  min-width: 0;
}
.swipe-scroll-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.swipe-scroll-controls[hidden] { display: none; }
.swipe-scroll-shell > :is(.machine-picker, .guide-level-picker, .qa-filters, .deals-filters, .taste-picker) {
  min-width: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  padding-inline: 16px;
  scroll-padding-inline: 16px;
  scroll-snap-type: inline proximity;
}
.swipe-scroll-shell.has-swipe-overflow > :is(.machine-picker, .guide-level-picker, .qa-filters, .deals-filters, .taste-picker) {
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.swipe-scroll-shell > :is(.machine-picker, .guide-level-picker, .qa-filters, .deals-filters, .taste-picker) > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.swipe-scroll-button {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(43,110,143,.32);
  border-radius: 50%;
  background: rgba(255,253,249,.88);
  color: var(--blue);
  box-shadow: 0 5px 13px rgba(22,53,71,.12);
  font: 900 25px/.8 Assistant,Arial,sans-serif;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.swipe-scroll-previous { inset-inline-start: 3px; transform: translateY(-50%); }
.swipe-scroll-next { inset-inline-end: 3px; transform: translateY(-50%); }
.swipe-scroll-button:disabled { cursor: default; opacity: .34; transform: none; }
.swipe-scroll-button.swipe-scroll-previous:disabled { transform: translateY(-50%); }
.swipe-scroll-button.swipe-scroll-next:disabled { transform: translateY(-50%); }
.swipe-scroll-button:disabled:hover { border-color: rgba(43,110,143,.32); background: rgba(255,253,249,.88); color: var(--blue); }
.swipe-scroll-button:is(:hover, :focus-visible) { transform: translateY(calc(-50% - 2px)); border-color: var(--blue); background: var(--blue); color: #fffdf9; }
.taste-section .swipe-scroll-button { border-color: rgba(255,255,255,.48); background: rgba(22,53,71,.58); color: #fffdf9; }
.taste-section .swipe-scroll-button:is(:hover, :focus-visible):not(:disabled) { border-color: #efaa5a; background: #efaa5a; color: var(--ink); }
.taste-section .swipe-scroll-button:disabled:hover { border-color: rgba(255,255,255,.48); background: rgba(22,53,71,.58); color: #fffdf9; }
@media (max-width: 767px) {
  .swipe-scroll-controls { display: none !important; }
}
/* The troubleshooting search and filters already explain the available
   choices. Keep their desktop row uncluttered; it still has native scroll and
   the edge fade whenever it overflows. */
@media (min-width: 768px) {
  .swipe-scroll-shell[data-desktop-controls="false"] .swipe-scroll-controls { display: none !important; }
}
@media (min-width: 768px) and (pointer: fine) {
  .swipe-scroll-shell.has-swipe-overflow > :is(.machine-picker, .guide-level-picker, .qa-filters, .deals-filters, .taste-picker) {
    cursor: grab;
  }
  .swipe-scroll-shell > :is(.machine-picker, .guide-level-picker, .qa-filters, .deals-filters, .taste-picker).is-pointer-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}
.deals-filters,
.qa-filters { gap: 9px; padding-block: 3px 10px; }
.deals-filter,
.qa-filter,
.machine-choice,
.taste-choice,
.guide-level-choice {
  min-height: 40px;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease;
}
.deals-filter.active,
.qa-filter.active,
.machine-choice.active,
.taste-choice.active,
.guide-level-choice.active {
  box-shadow: 0 7px 18px rgba(22,53,71,.14);
}
.deal-coupon {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.deal-coupon:active { transform: scale(.97); }
.skeleton-deal-card { border-color: transparent; box-shadow: none; }

.guide-card { position: relative; overflow: hidden; }
.guide-card::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  top: -140px;
  left: -84px;
  border: 1px solid rgba(239,170,90,.35);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(239,170,90,.06), 0 0 0 56px rgba(239,170,90,.035);
}
.guide-card > * { position: relative; z-index: 1; }
.guide-steps li::before { box-shadow: 0 4px 9px rgba(0,0,0,.14); }
.calculator-card,
.freshness-card { min-height: 100%; }
.calculator-card { background: linear-gradient(135deg, rgba(217,237,241,.94), rgba(255,253,249,.92)); }
.freshness-card { background: linear-gradient(135deg, rgba(243,223,197,.93), rgba(255,253,249,.93)); }
.upload-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The local vector artwork stays static here, avoiding scroll-time raster
     repainting on Android and iOS. */
  background-color: #f7f0e4;
  background-image:
    linear-gradient(112deg, rgba(255,253,249,.38), rgba(247,240,228,.34)),
    url('/greek-coffee-morning-vector.svg');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
}
.upload-section::before,
.upload-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(34vw, 410px);
  aspect-ratio: 1;
  border: 1px solid rgba(43,110,143,.12);
  border-radius: 50%;
  pointer-events: none;
}
.upload-section::before { top: -22%; right: -9%; box-shadow: 0 0 0 28px rgba(43,110,143,.028), 0 0 0 56px rgba(43,110,143,.018); }
.upload-section::after { bottom: -30%; left: -9%; border-color: rgba(201,110,77,.13); box-shadow: 0 0 0 32px rgba(201,110,77,.03); }
@media (max-width: 700px) {
  .upload-section {
    background-image:
      linear-gradient(112deg, rgba(255,253,249,.38), rgba(247,240,228,.34)),
      url('/greek-coffee-morning-vector.svg');
    background-position: center center, center center;
  }
  .upload-section::before { width: 62vw; top: -14%; right: -24%; }
  .upload-section::after { width: 65vw; bottom: -29%; left: -30%; }
}
.calculator-sliders {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.calculator-milk-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid rgba(43,110,143,.17);
  border-radius: 13px;
  background: rgba(255,253,249,.68);
}
.calculator-milk-options[hidden],
#calculatorMilkControl[hidden],
#calculatorMilkRecipeValue[hidden],
#calculatorFoamRecipeValue[hidden] { display: none !important; }
.calculator-milk-options label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font: 800 13px/1.2 Assistant, Arial, sans-serif;
}
.calculator-milk-options select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 7px 30px 7px 10px;
  border: 1px solid rgba(22,53,71,.18);
  border-radius: 9px;
  background: #fffdf9;
  color: #163547;
  font: 700 14px Assistant, Arial, sans-serif;
}
.calculator-slider-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
  padding: 11px 13px 10px;
  border: 1px solid rgba(43,110,143,.17);
  border-radius: 13px;
  background: rgba(255,253,249,.68);
  color: var(--ink);
  font: 800 14px Assistant, Arial, sans-serif;
}
.calculator-slider-control output { color: var(--terracotta); font: 900 15px Rubik, Arial, sans-serif; direction: rtl; white-space: nowrap; }
.calculator-slider-control input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: var(--terracotta);
  cursor: ew-resize;
}
.calculator-slider-control input[type="range"]:focus-visible { outline: 3px solid rgba(239,170,90,.55); outline-offset: 3px; border-radius: 999px; }
.calculator-recipe {
  --cup-water-fill: 52%;
  --cup-coffee-fill: 18%;
  --cup-milk-fill: 0%;
  --cup-foam-fill: 0%;
  display: grid;
  grid-template-columns: minmax(92px, .65fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 150px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(43,110,143,.17);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,253,249,.78), rgba(201,110,77,.08));
}
.calculator-recipe-cup {
  position: relative;
  justify-self: center;
  width: 86px;
  height: 108px;
  overflow: hidden;
  border: 4px solid rgba(22,53,71,.72);
  border-radius: 10px 10px 24px 24px;
  background: rgba(255,255,255,.66);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.64), 0 8px 16px rgba(22,53,71,.13);
}
.calculator-recipe-cup::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 39px;
  top: 28px;
  left: -27px;
  border: 4px solid rgba(22,53,71,.72);
  border-right: 0;
  border-radius: 18px 0 0 18px;
}
.calculator-cup-water,
.calculator-cup-coffee,
.calculator-cup-milk,
.calculator-cup-foam {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.calculator-cup-water::after,
.calculator-cup-coffee::after,
.calculator-cup-milk::after,
.calculator-cup-foam::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 3px;
  font: 900 10px/1 Assistant, Arial, sans-serif;
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
}
.calculator-cup-water::after { content: 'מים'; color: #fff; text-shadow: 0 1px 2px rgba(22,53,71,.45); }
.calculator-cup-coffee::after { content: 'קפה'; color: #fffaf2; text-shadow: 0 1px 2px rgba(22,53,71,.45); }
.calculator-cup-milk::after { content: 'חלב'; color: #6b4a35; text-shadow: 0 1px 1px rgba(255,255,255,.7); }
.calculator-cup-foam::after { content: 'קצף'; color: #6b4a35; text-shadow: 0 1px 1px rgba(255,255,255,.8); }
.calculator-cup-water {
  z-index: 1;
  bottom: var(--cup-coffee-fill);
  height: calc(var(--cup-water-fill) - var(--cup-coffee-fill));
  border-radius: 0;
  background: linear-gradient(180deg, rgba(126,189,211,.84), rgba(47,117,150,.92));
  box-shadow: inset 0 6px 10px rgba(226,250,255,.36);
  transition: bottom .25s ease, height .25s ease;
}
.calculator-cup-coffee {
  z-index: 2;
  height: var(--cup-coffee-fill);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #9b5935, #613d2e);
  box-shadow: inset 0 5px 7px rgba(255,211,159,.22);
  transition: height .25s ease;
}
.calculator-cup-milk,
.calculator-cup-foam { display: none; }
.calculator-recipe[data-kind="milk"] .calculator-cup-coffee { z-index: 2; }
.calculator-recipe[data-kind="milk"] .calculator-cup-water {
  display: block;
  z-index: 3;
  bottom: var(--cup-coffee-fill);
  height: var(--cup-water-fill);
  background: linear-gradient(180deg, #c78448, #70442e);
  box-shadow: inset 0 5px 7px rgba(255,211,159,.22);
}
.calculator-recipe[data-kind="milk"] .calculator-cup-milk {
  display: block;
  z-index: 4;
  bottom: calc(var(--cup-coffee-fill) + var(--cup-water-fill));
  height: var(--cup-milk-fill);
  background: linear-gradient(180deg, #fffdf7 0%, #f2e6d2 100%);
  box-shadow: inset 0 5px 7px rgba(255,255,255,.75);
  transition: bottom .25s ease, height .25s ease;
}
.calculator-recipe[data-kind="milk"] .calculator-cup-foam {
  display: block;
  z-index: 5;
  bottom: calc(var(--cup-coffee-fill) + var(--cup-water-fill) + var(--cup-milk-fill));
  height: var(--cup-foam-fill);
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8efe3 100%);
  box-shadow: inset 0 4px 7px rgba(255,255,255,.95);
  transition: bottom .25s ease, height .25s ease;
}
.calculator-recipe[data-kind="beverage"] .calculator-cup-water,
.calculator-recipe[data-kind="capsule"] .calculator-cup-water { background: linear-gradient(180deg, #c78448, #70442e); }
.calculator-recipe-values { display: grid; gap: 11px; }
.calculator-recipe-values p { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; color:#55707d; font:800 15px/1.35 Assistant,Arial,sans-serif; }
.calculator-recipe-values strong { color:var(--ink); font:900 21px/1 Rubik,Arial,sans-serif; direction:rtl; white-space:nowrap; }
@media(max-width:420px) {
  .calculator-recipe { grid-template-columns:86px minmax(0,1fr); gap:12px; padding:14px; }
  .calculator-recipe-cup { width:74px; height:94px; }
  .calculator-recipe-cup::after { top:24px; }
  .calculator-recipe-values p { font-size:14px; }
  .calculator-recipe-values strong { font-size:18px; }
}
@media(max-width:700px) {
  .calculator-milk-options { grid-template-columns: 1fr; }
  .calculator-milk-options label { font-size: 14px; }
}

.qa-tools { gap: 12px; }
.qa-search input {
  min-height: 48px;
  border-radius: 14px;
  box-shadow: 0 7px 16px rgba(22,53,71,.06);
}
.qa-question { border: 1px solid rgba(22,53,71,.12); }
.qa-question[open] { border-color: rgba(43,110,143,.32); box-shadow: 0 18px 34px rgba(22,53,71,.11); }
.qa-question summary { cursor: pointer; }

.taste-section {
  position: relative;
  overflow: clip;
  /* A dark CSS surface keeps the coffee-picker atmosphere without a second
     full-screen bitmap competing with touch scrolling. */
  background-color: #163547;
  background-image:
    radial-gradient(circle at 82% 16%, rgba(239,170,90,.2), transparent 30rem),
    linear-gradient(135deg, #204b5d 0%, #163547 56%, #102f3d 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
}
.taste-section::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  left: -180px;
  bottom: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,170,90,.24), transparent 68%);
  transform: translate3d(0, var(--parallax-depth, 0px), 0);
}
.taste-section .section-wrap { position: relative; z-index: 1; }
.bean-card { border-color: rgba(255,255,255,.26); box-shadow: 0 18px 42px rgba(0,0,0,.16); }
.taste-picker { scroll-snap-type: inline mandatory; }
.taste-choice { scroll-snap-align: start; }
.bean-visual { overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.bean-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .36s ease, opacity .2s ease; }
.bean-visual img.changing { opacity: .3; transform: scale(.94); }

.featured-loader-skeleton {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(220px, .84fr);
  align-items: stretch;
  gap: 22px;
  padding: 16px;
  text-align: initial;
}
.featured-loader-skeleton .featured-skeleton-photo,
.featured-loader-skeleton .featured-skeleton-line {
  display: block;
  border-radius: 13px;
  background: linear-gradient(105deg, rgba(118,174,184,.26) 20%, rgba(255,255,255,.8) 44%, rgba(118,174,184,.26) 68%);
  background-size: 280% 100%;
  animation: app-skeleton-shimmer 1.22s linear infinite;
}
.featured-loader-skeleton .featured-skeleton-photo { min-height: 310px; }
.featured-loader-skeleton .featured-skeleton-copy { display: grid; align-content: center; gap: 13px; padding: 22px 12px; }
.featured-loader-skeleton .featured-skeleton-line { height: 16px; width: 76%; }
.featured-loader-skeleton .featured-skeleton-line.wide { width: 94%; height: 34px; }
.featured-loader-skeleton .featured-skeleton-line.short { width: 46%; }

/* A new Kalimera day has no post until somebody shares the first cup. Keep
   that state intentional and branded instead of rendering an unlabeled box. */
.featured-loader-waiting {
  display: grid;
  min-height: clamp(235px, 27vw, 330px);
  place-content: center;
  gap: 16px;
  padding: 28px;
  border: 1px solid rgba(43,110,143,.2);
  border-radius: var(--app-radius);
  background: linear-gradient(135deg, rgba(217,237,241,.9), rgba(255,253,249,.92));
  box-shadow: var(--app-elevation);
  color: var(--ink);
  text-align: center;
}
.featured-loader-waiting .featured-loader-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.featured-loader-waiting .featured-loader-logo img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.featured-loader-waiting .featured-loader-logo strong {
  color: var(--ink);
  font: 900 25px/.88 Rubik, Arial, sans-serif;
  letter-spacing: -.055em;
  text-align: right;
}
.featured-loader-waiting .featured-loader-logo i { color: var(--blue); font-style: normal; }
.featured-loader-waiting p { margin: 0; color: #55707d; font: 800 16px/1.4 Assistant, Arial, sans-serif; }

/* Daily and upload are a single visual rhythm: do not draw a rule between
   them, and do not add decorative cup-ring marks over the upload photograph. */
#upload[data-parallax],
.morning-surface #upload { border-top: 0; }
.upload-section::before,
.upload-section::after { content: none; display: none; }

/* Deals and guides inherit the rich, translucent coffee surface used by the
   beans area while their cards stay bright enough to scan quickly. */
#guides[data-parallax],
#deals[data-parallax] {
  color: #fffdf9;
  background-color: #163547;
  background-image:
    radial-gradient(circle at 82% 16%, rgba(239,170,90,.22), transparent 28rem),
    linear-gradient(112deg, #1d4658 0%, #163547 62%, #12303e 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
}
/* Guides are a full-bleed, contained surface.  Keep its depth entirely CSS
   based: an earlier inherited layer could show a cropped edge when a guide
   card changed height, especially on narrow screens. */
#guides[data-parallax] {
  isolation: isolate;
  overflow: hidden;
  background-color: #163547;
  background-image:
    radial-gradient(ellipse 66% 58% at 92% -10%, rgba(239,170,90,.24), transparent 72%),
    radial-gradient(ellipse 54% 46% at 4% 108%, rgba(79,145,164,.2), transparent 74%),
    linear-gradient(128deg, #214d60 0%, #163547 54%, #102f3d 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
}
#guides[data-parallax] .section-heading,
#deals[data-parallax] .section-heading { border-bottom-color: rgba(255,255,255,.25); }
#guides[data-parallax] :is(.section-heading h2, .hub-intro),
#deals[data-parallax] :is(.section-heading h2, .deals-summary, .deals-caveat) { color: #fffdf9; }
#guides[data-parallax] .hub-intro,
#deals[data-parallax] :is(.deals-summary, .deals-caveat) { color: #d5e8ea; }
#guides[data-parallax] :is(.machine-choice, .guide-level-choice),
#deals[data-parallax] .deals-filter {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.11);
  color: #fffdf9;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
#guides[data-parallax] :is(.machine-choice, .guide-level-choice):is(:hover, .active),
#deals[data-parallax] .deals-filter:is(:hover, .active) { border-color: #efaa5a; background: #efaa5a; color: #163547; }
#guides[data-parallax] .guide-card { border-color: rgba(255,255,255,.25); background: rgba(22,53,71,.76); box-shadow: 0 18px 42px rgba(0,0,0,.22); }
#guides[data-parallax] :is(.calculator-card, .freshness-card) { border-color: rgba(255,255,255,.24); box-shadow: 0 18px 42px rgba(0,0,0,.16); }
#deals[data-parallax] .deal-card { border-color: rgba(255,255,255,.24); background: rgba(255,253,249,.94); box-shadow: 0 18px 42px rgba(0,0,0,.2); }
#deals[data-parallax] :is(.deals-loading, .deals-empty) { border-color: rgba(255,255,255,.3); background: rgba(22,53,71,.42); color: #fffdf9; }

/* Troubleshooting sits directly on the page canvas, while each answer keeps
   the same self-contained card language used by the deals catalogue. */
#qaGrid {
  padding-inline: 8px;
  padding-block-end: 9px;
  background: transparent !important;
  box-shadow: none !important;
}
#qaGrid > .qa-question {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(22, 53, 71, .13);
  border-radius: 14px;
  background: #fff;
  box-shadow: 8px 9px 0 rgba(22, 53, 71, .1);
}
#qaGrid > .qa-question[open] {
  background: #fff;
  border-color: rgba(43, 110, 143, .46);
  box-shadow: 0 16px 27px rgba(22, 53, 71, .18), 7px 8px 0 rgba(43, 110, 143, .13);
}
#qaGrid > .qa-load-more,
body:not(.gallery-page) #archive > .all-gallery-link {
  margin-top: 10px;
  min-height: 44px;
  min-width: 0;
  padding: 11px 20px;
  border: 1px solid #2b6e8f;
  border-radius: 999px;
  background: #fffdf9;
  color: #2b6e8f;
  font: 800 15px/1 Assistant, Arial, sans-serif;
  box-shadow: 6px 7px 0 rgba(22, 53, 71, .1);
}
#qaGrid > .qa-load-more:hover,
#qaGrid > .qa-load-more:focus-visible,
body:not(.gallery-page) #archive > .all-gallery-link:hover,
body:not(.gallery-page) #archive > .all-gallery-link:focus-visible {
  background: #2b6e8f;
  color: #fff;
  transform: none;
  box-shadow: 8px 9px 0 rgba(22, 53, 71, .14);
}

/* Dark home surfaces need a little reflected light so cards and controls
   remain tactile without a harsh or neon effect. */
#guides[data-parallax] :is(.guide-card, .calculator-card, .freshness-card),
#deals[data-parallax] .deal-card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14),
    0 0 26px rgba(255, 255, 255, .14),
    0 18px 42px rgba(0, 0, 0, .22);
}
#guides[data-parallax] :is(.machine-choice, .guide-level-choice, .calculator-range-step),
#deals[data-parallax] :is(.deals-filter, .deal-link, .deal-share, .deal-coupon) {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14),
    0 6px 16px rgba(255, 255, 255, .16),
    0 9px 19px rgba(0, 0, 0, .18);
}

/* The Greek-morning vector is attached to upload when it renders outside the
   shared morning surface. */
#upload[data-parallax="static"] {
  background-color: #f7f0e4;
  background-image:
    linear-gradient(112deg, rgba(255,253,249,.38), rgba(247,240,228,.34)),
    url('/greek-coffee-morning-vector.svg');
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center center, center center;
  background-attachment: scroll, scroll;
}
@media (max-width: 767px) {
  #upload[data-parallax="static"] {
    background-image:
      linear-gradient(112deg, rgba(255,253,249,.38), rgba(247,240,228,.34)),
      url('/greek-coffee-morning-vector.svg');
    background-position: center center, center center;
  }
}

/* Global translucent scroll-to-top control. It stays out of the way until
   the visitor has actually moved down the page, and never sits above a modal. */
.scroll-to-top {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  left: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: var(--layer-floating, 1190);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,253,249,.62);
  border-radius: 50%;
  background: rgba(22,53,71,.58);
  color: #fffdf9;
  box-shadow: 0 10px 24px rgba(22,53,71,.18);
  -webkit-backdrop-filter: blur(var(--motion-blur-control, 10px));
  backdrop-filter: blur(var(--motion-blur-control, 10px));
  cursor: pointer;
  opacity: var(--motion-opacity-muted, .72);
  transition:
    opacity var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
    transform var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease),
    background-color var(--motion-duration-feedback, .18s) var(--motion-ease-standard, ease);
}
.scroll-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-to-top:hover,
.scroll-to-top:focus-visible { opacity: 1; transform: translateY(-3px); background: rgba(22,53,71,.58); outline: 0; }
.scroll-to-top:active { background: rgba(22,53,71,.58); color: #fffdf9; }
.scroll-to-top[hidden] { display: none !important; }
body.popup-scroll-locked .scroll-to-top { visibility: hidden; pointer-events: none; }
@media (max-width: 700px) { .scroll-to-top { right: 12px; left: auto; bottom: max(14px, env(safe-area-inset-bottom)); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .scroll-to-top { transition: none; } .scroll-to-top:hover,.scroll-to-top:focus-visible { transform: none; } }

/* Empty fields should look unmistakably empty. Keep this last in the shared
   visual layer so it wins over older component-specific placeholder colors,
   while the actual input value keeps its normal high-contrast ink color. */
:root { --field-placeholder-ink: #9aa8ad; }
body :where(input, textarea)::placeholder {
  color: var(--field-placeholder-ink) !important;
  -webkit-text-fill-color: var(--field-placeholder-ink) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* These browsing surfaces should sit directly on the site canvas. Their
   cards retain their own contrast; a second pale section panel only made the
   deals catalogue, full gallery and troubleshooting area feel boxed-in. */
.deals-page[data-parallax],
body.gallery-page #archive[data-parallax],
#qa[data-parallax] {
  background: transparent;
}
.deals-page[data-parallax]::before,
body.gallery-page #archive[data-parallax]::before,
#qa[data-parallax]::before {
  display: none;
}

/* The homepage Gallery and troubleshooting sections intentionally sit on the
   page canvas. Keep this separate from the dedicated Gallery page so its
   catalogue layout can continue to own its surface treatment. */
body:not(.gallery-page) #archive,
#qa {
  background-color: transparent !important;
  background-image: none !important;
}
body:not(.gallery-page) #archive::before,
#qa::before {
  display: none !important;
}

/* Upload is intentionally a single reading column. Earlier desktop rules
   divided the outer section and then re-divided the form, which could push
   fields outside of the available inline space at common laptop widths. */
#upload.upload-section {
  direction: rtl;
  overflow: hidden;
}
#upload .upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  /* Keep the upload form on the same responsive content rail as the deals
     section.  A narrower one-off cap made the upload card visibly inset on
     desktop even though the surrounding sections shared the wider rail. */
  width: min(var(--page-content-max), calc(100% - (var(--page-gutter) * 2)));
  max-width: 100%;
  margin-inline: auto;
}
#upload .upload-copy,
#upload .upload-card,
#upload #uploadAuth,
#upload .upload-account-status,
#upload .upload-daily-locked {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  grid-column: 1;
}
/* The status paragraph is conditionally hidden, so relying on implicit grid
   placement can put the form in the narrow first column on desktop. Keep the
   form on the full upload rail regardless of which sibling is visible. */
#upload .upload-layout > #uploadForm {
  grid-column: 1 / -1;
}
#upload #uploadAuth {
  /* The signed-out login surface follows the same full content rail as the
     upload form and deals section, rather than keeping a narrower card cap. */
  box-sizing: border-box;
}
#upload .upload-copy {
  text-align: start;
}
#upload .upload-copy :is(h2, p) {
  max-width: 100%;
  text-align: start;
  overflow-wrap: anywhere;
}
#uploadForm.upload-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  direction: rtl;
  text-align: start;
}
#uploadForm.upload-card > * {
  grid-column: 1 !important;
  min-width: 0;
  max-width: 100%;
}
#upload :is(.drop-zone, .preview, .upload-brew-details, .upload-brew-details-content, .brew-details-fields, .taste-fields) {
  min-width: 0;
  max-width: 100%;
}
#upload :is(.upload-brew-details-content, .brew-details-fields, .taste-fields) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
}
#upload :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
  direction: rtl;
  text-align: start;
}
#upload .upload-daily-locked {
  grid-column: 1;
  justify-self: stretch;
}

@media (max-width: 700px) {
  #upload .upload-layout {
    gap: 16px;
    width: min(100%, calc(100% - (var(--page-gutter) * 2)));
  }
}

@media (hover: hover) and (pointer: fine) {
  :is(.today-coffee, .gallery-item, .tips-grid article, .qa-question, .bean-card, .featured, .calculator-card, .freshness-card, .upload-card, .profile-card, .public-profile-card, .legal-card) {
    transition:
      transform var(--motion-duration-menu, .24s) var(--motion-ease-enter, cubic-bezier(.2,.75,.15,1)),
      box-shadow var(--motion-duration-menu, .24s) var(--motion-ease-standard, ease),
      border-color var(--motion-duration-menu, .24s) var(--motion-ease-standard, ease),
      background-color var(--motion-duration-menu, .24s) var(--motion-ease-standard, ease);
  }
  :is(.today-coffee, .gallery-item, .tips-grid article, .qa-question, .bean-card, .featured, .calculator-card, .freshness-card, .upload-card, .profile-card, .public-profile-card, .legal-card):is(:hover, :focus-within) {
    transform: translateY(-4px);
    border-color: rgba(43,110,143,.37);
    box-shadow: var(--app-elevation-hover);
  }
  :is(.today-coffee, .gallery-item, .featured):is(:hover, :focus-within) :is(.today-coffee-photo img, .gallery-image img, .featured-photo img) { transform: scale(1.045); }
  :is(.today-coffee, .gallery-item, .featured):is(:hover, :focus-within) :is(.today-coffee-photo::after, .gallery-image::after, .featured-photo::after) { opacity: .72; }
  :is(.deals-filter, .qa-filter, .machine-choice, .taste-choice, .guide-level-choice):is(:hover, :focus-visible) { transform: translateY(-2px); }
}

@keyframes app-skeleton-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes app-upload-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes app-success-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* The mobile upload affordance floats over content, so keep it readable while
   letting the page show through.  The 50% opacity is intentionally shared by
   the control background and the element itself; reduced-motion handling is
   still owned by the existing motion system. */
@media (max-width:700px){
  .site-header .upload-link,
  .floating-upload-button,
  #floatingUploadButton{
    opacity:.5!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.05)!important;
    backdrop-filter:blur(12px) saturate(1.05)!important;
  }
  .site-header .upload-link:is(:hover,:focus-visible),
  .floating-upload-button:is(:hover,:focus-visible),
  #floatingUploadButton:is(:hover,:focus-visible){opacity:.62!important}
}

@media (max-width: 700px) {
  :root { --page-gutter: 16px; }
  html { scroll-padding-top: 82px; }
  .site-header { min-height: 70px; }
  .drop-zone { min-height: 225px; }
  .deals-filters,
  .qa-filters,
  .machine-picker,
  .taste-picker,
  .guide-level-picker { flex-wrap: nowrap; overflow-x: auto; padding-inline: 16px; scroll-snap-type: inline proximity; }
  .swipe-scroll-shell { margin-bottom: 18px; }
  .swipe-scroll-controls { display: none !important; }
  .deals-filter,
  .qa-filter,
  .machine-choice,
  .taste-choice,
  .guide-level-choice { flex: 0 0 auto; scroll-snap-align: start; }
  .featured-loader-skeleton { grid-template-columns: 1fr; gap: 12px; padding: 11px; }
  .featured-loader-skeleton .featured-skeleton-photo { min-height: 190px; aspect-ratio: 1; }
  .featured-loader-skeleton .featured-skeleton-copy { gap: 10px; padding: 6px 4px; }
  .featured-loader-skeleton .featured-skeleton-line.wide { height: 25px; }
  .featured-loader-waiting { min-height: 205px; padding: 24px 18px; }
  .featured-loader-waiting .featured-loader-logo img { width: 50px; height: 50px; }
  .featured-loader-waiting .featured-loader-logo strong { font-size: 22px; }

  /* These sections stay fully measurable on phones.  `content-visibility`
     looked attractive for paint savings, but on Chrome for Android it can
     repeatedly correct the page height as a section enters view.  That makes
     a normal vertical swipe appear to travel only a few pixels. */
  :is(#guides, #qa, #tips, #deals, #archive, .taste-section) {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
  .drop-zone .drop-icon,
  .featured-loader-skeleton :is(.featured-skeleton-photo, .featured-skeleton-line),
  .upload-message.is-success { animation: none; }
  :is(.today-coffee, .gallery-item, .tips-grid article, .qa-question, .bean-card, .featured, .calculator-card, .freshness-card, .upload-card, .profile-card, .public-profile-card, .legal-card),
  :is(.today-coffee, .gallery-item, .featured) :is(.today-coffee-photo img, .gallery-image img, .featured-photo img) { transition: none; transform: none; }
}

/* The home preview and the full catalogue intentionally use the same deal-card
   system. Their markup differs slightly, but their media, metadata, price and
   merchant action share one visual rhythm. */
#dealsGrid .deal-card,
.deals-page-grid .deals-page-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(22, 53, 71, .13);
  border-radius: 14px;
  background: rgba(255, 253, 249, .96);
  box-shadow: 8px 9px 0 rgba(22, 53, 71, .1);
}
#dealsGrid .deal-image-link,
.deals-page-grid .deals-page-image-link {
  display: block;
  overflow: hidden;
  background: #fff;
}
#dealsGrid .deal-image-link > img,
.deals-page-grid .deals-page-image-link > img {
  display: block;
  width: 100%;
  aspect-ratio: 1.34 / 1;
  object-fit: contain;
  background: #fff;
}
#dealsGrid .deal-copy,
.deals-page-grid .deals-page-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}
#dealsGrid .deal-meta-row,
.deals-page-grid .deal-page-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 25px;
}
#dealsGrid .deal-store,
.deals-page-grid .deal-page-store {
  color: var(--terracotta);
  font: 900 13px Rubik, sans-serif;
}
#dealsGrid .deal-category,
.deals-page-grid .deal-page-category {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f3dfc5;
  color: var(--ink);
  font: 800 12px Assistant, sans-serif;
}
#dealsGrid .deal-share,
.deals-page-grid .deal-share {
  margin-inline-start: auto;
}
#dealsGrid .deal-title,
.deals-page-grid .deals-page-copy h2 {
  min-height: 50px;
  margin: 0;
  color: var(--ink);
  font: 800 23px / 1.12 Rubik, sans-serif;
  letter-spacing: -.05em;
}
#dealsGrid .deal-price,
.deals-page-grid .deal-page-price {
  color: var(--ink);
  font: 900 26px Rubik, sans-serif;
}
#dealsGrid .deal-link,
.deals-page-grid .deal-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  margin-top: auto;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font: 900 15px Assistant, sans-serif;
  text-align: center;
  text-decoration: none;
}
.deals-page-grid .deal-page-updated {
  margin-top: 15px;
}
@media (max-width: 700px) {
  #dealsGrid .deal-copy,
  .deals-page-grid .deals-page-copy { padding: 14px; }

  #dealsGrid .deal-title,
  .deals-page-grid .deals-page-copy h2 {
    min-height: 42px;
    font-size: 18px;
  }

  #dealsGrid .deal-price,
  .deals-page-grid .deal-page-price { font-size: 22px; }
}

/* The renderer is shared by both grids. Scope these rules above legacy page
   and mobile selectors so compact cards retain the same structure. */
:is(#dealsGrid, #dealsPageGrid) {
  align-items: stretch;
  grid-auto-rows: auto;
  gap: 20px;
}
:is(#dealsGrid, #dealsPageGrid) .deals-page-card {
  min-width: 0;
  container-type: inline-size;
}
:is(#dealsGrid, #dealsPageGrid) .deals-page-card:is(.deal-card, .deals-page-card) {
  background: #fff;
  border-color: rgba(22, 53, 71, .13);
  box-shadow: 8px 9px 0 rgba(22, 53, 71, .1);
}
:is(#dealsGrid, #dealsPageGrid) .deals-page-image-link {
  flex: 0 0 auto;
  aspect-ratio: 1.34 / 1;
  padding-top: 10px;
}
:is(#dealsGrid, #dealsPageGrid) .deals-page-image-link > img {
  height: 100%;
}
:is(#dealsGrid, #dealsPageGrid) .deals-page-copy {
  min-width: 0;
  background: #fff;
  flex: 1 0 auto;
  gap: 10px;
  padding: 16px;
}
:is(#dealsGrid, #dealsPageGrid) .deal-page-meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
:is(#dealsGrid, #dealsPageGrid) .deal-page-store {
  flex: 0 1 auto;
  max-width: 40%;
  line-height: 1.4;
}
:is(#dealsGrid, #dealsPageGrid) .deal-page-category {
  display: block;
  flex: 0 1 auto;
  margin: 0;
  line-height: 1.4;
}
:is(#dealsGrid, #dealsPageGrid) :is(.deal-page-store, .deal-page-category, .deal-title, .deal-page-description, .deal-page-saving, .deal-page-updated, .deal-coupon-code) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:is(#dealsGrid, #dealsPageGrid) .deal-share {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 6px;
  margin: 0;
  margin-inline-start: auto;
}
:is(#dealsGrid, #dealsPageGrid) .deal-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
:is(#dealsGrid, #dealsPageGrid) .deal-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
  min-height: 2.8em;
  max-height: 2.8em;
  margin: 0;
  font: 800 20px / 1.4 Rubik, sans-serif;
  letter-spacing: -.025em;
}
:is(#dealsGrid, #dealsPageGrid) .deal-page-description {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
  min-height: 0;
  margin: 0;
  color: #55707d;
  font: 400 15px / 1.5 Assistant, sans-serif;
}
:is(#dealsGrid, #dealsPageGrid) .deal-price-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  min-width: 0;
}
:is(#dealsGrid, #dealsPageGrid) .deal-page-price {
  white-space: nowrap;
  font: 900 clamp(14px, 7cqi, 26px) / 1.3 Rubik, sans-serif;
}
:is(#dealsGrid, #dealsPageGrid) .deal-page-original {
  min-width: 0;
  white-space: nowrap;
  color: #71848b;
  font: 700 clamp(9px, 3.5cqi, 14px) / 1.3 Assistant, sans-serif;
  text-decoration: line-through;
}
:is(#dealsGrid, #dealsPageGrid) .deal-page-saving { margin: 0; color: #48711f; font: 700 14px / 1.4 Assistant, sans-serif; }
:is(#dealsGrid, #dealsPageGrid) .deal-page-coupon {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 7px;
  border: 1px dashed rgba(22,53,71,.35);
  border-radius: 7px;
  background: #fff9ef;
  color: var(--ink);
  font: 700 14px / 1.4 Assistant, sans-serif;
}
:is(#dealsGrid, #dealsPageGrid) .deal-coupon-code { flex: 1; }
:is(#dealsGrid, #dealsPageGrid) .deal-page-coupon button {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: 800 13px Assistant, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
:is(#dealsGrid, #dealsPageGrid) .deal-promotion-status { margin: 0; font: 400 13px / 1.45 Assistant, sans-serif; }
:is(#dealsGrid, #dealsPageGrid) .deal-page-updated { display: block; margin: 0; color: #71848b; font: 700 12px / 1.4 Assistant, sans-serif; }
:is(#dealsGrid, #dealsPageGrid) .deal-page-link {
  flex: 0 0 auto;
  margin-top: auto;
  min-width: 0;
  min-height: 43px;
  padding: 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 800 15px / 1.4 Assistant, sans-serif;
}
@media (max-width: 700px) {
  :is(#dealsGrid, #dealsPageGrid) { gap: 12px; }
}
@container (max-width: 220px) {
  :is(#dealsGrid, #dealsPageGrid) .deals-page-copy { padding: 10px; gap: 8px; }
  :is(#dealsGrid, #dealsPageGrid) .deal-page-meta { gap: 4px; }
  :is(#dealsGrid, #dealsPageGrid) .deal-page-store { font-size: 11px; }
  :is(#dealsGrid, #dealsPageGrid) .deal-page-category { padding: 3px 5px; font-size: 11px; }
  :is(#dealsGrid, #dealsPageGrid) .deal-title { font-size: 16px; }
  :is(#dealsGrid, #dealsPageGrid) .deal-page-link { font-size: 13px; padding-inline: 4px; }
}

#dealsGrid > .deals-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  height: 44px;
  min-height: 44px;
  padding: 10px 22px;
  line-height: 22px;
  text-decoration: none;
}

/* One continuous Greek-morning vector frames the daily tip, featured coffees
   and upload form. Keeping the artwork on their shared parent means
   it is painted once (rather than restarting on each section) and prevents a
   visible seam when the daily feed height changes. */
.morning-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f7f0e4;
}
.morning-surface::before {
  content: '';
  position: absolute;
  z-index: 0;
  /* Extra bleed means the composited desktop movement can never expose an
     artwork edge above, below, or beside the three morning areas. */
  inset: -150px -24px;
  pointer-events: none;
  background-image:
    linear-gradient(112deg, rgba(255,253,249,.18), rgba(247,240,228,.12)),
    url('/greek-coffee-morning-vector.svg');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  /* This is a transform-only layer, so desktop parallax stays smooth even as
     a daily post changes height. */
  transform: translate3d(0, var(--parallax-shift, 0px), 0) scale(1.035);
  will-change: transform;
}
.morning-surface > * { position: relative; z-index: 1; }
.morning-surface :is(#today.today, #upload.upload-section) {
  background-color: transparent !important;
  background-image: none !important;
}
.morning-surface > section {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 700px) {
  /* Keep the morning surfaces full bleed. The daily feed gets its gutter on
     its content wrapper below, rather than on the background-owning section. */
  .morning-surface > section.section-wrap {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  /* The photo cards must never touch a phone's physical edges. Applying this
     to the feed wrapper also survives the full-width daily-surface rules. */
  #today > .today-content {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: none;
    margin-inline: auto;
  }
  .morning-surface {
    /* Phones deliberately keep the same artwork without per-scroll movement:
       fixed/background-position animation is expensive on Android and iOS. */
    background-color: #f7f0e4;
  }
  .morning-surface::before {
    inset: 0;
    background-image:
      linear-gradient(112deg, rgba(255,253,249,.18), rgba(247,240,228,.12)),
      url('/greek-coffee-morning-vector.svg');
    background-position: center center, center center;
    background-size: auto 100%, auto 100%;
    transform: none;
    will-change: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .morning-surface::before { transform: none; will-change: auto; }
}

/* Site-wide vector parallax -----------------------------------------------
   Each major surface receives one of three lightweight Kalimera drawings.
   The drawings are deliberately translucent so headings and controls remain
   the visual foreground. A real child layer avoids competing with component
   pseudo-elements such as the Coffee Journey rings. */
.kalimera-vector-parallax {
  position: relative;
  isolation: isolate;
}
.kalimera-vector-parallax > .kalimera-vector-parallax-layer {
  position: absolute;
  z-index: 0;
  inset: -104px 0;
  display: block;
  min-width: 100%;
  pointer-events: none;
  opacity: .16;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0,var(--parallax-depth,0),0) scale(1.025);
  transform-origin: center;
  will-change: transform;
}
.kalimera-vector-parallax > :not(.kalimera-vector-parallax-layer) {
  position: relative;
  z-index: 1;
}
.kalimera-vector-parallax[data-vector-pattern="rings"] > .kalimera-vector-parallax-layer {
  background-image: url('/kalimera-vector-rings.svg');
}
.kalimera-vector-parallax[data-vector-pattern="olive"] > .kalimera-vector-parallax-layer {
  background-image: url('/kalimera-vector-olive.svg');
}
.kalimera-vector-parallax[data-vector-pattern="sunrise"] > .kalimera-vector-parallax-layer {
  background-image: url('/kalimera-vector-sunrise.svg');
}

/* The existing morning illustration is intentionally stronger than the
   secondary motifs. A warm veil keeps its rings and waves from competing with
   the date, daily title and upload instructions. */
.morning-surface::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: rgba(255,253,249,.3);
}

@media (max-width:767px) {
  .kalimera-vector-parallax > .kalimera-vector-parallax-layer {
    inset: 0;
    opacity: .13;
    background-size: auto 100%;
    transform: none;
    will-change: auto;
  }
  .morning-surface::after { background: rgba(255,253,249,.34); }
}
@media (prefers-reduced-motion:reduce) {
  .kalimera-vector-parallax > .kalimera-vector-parallax-layer {
    transform: none;
    will-change: auto;
  }
}

/* Gallery request failure -------------------------------------------------
   Keep failure distinct from a genuinely empty community. The layout mirrors
   a gallery card rather than joining a sentence and a browser-default button
   on one line. */
.empty-state.gallery-error-state {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 104px;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid rgba(22, 53, 71, .14);
  border-radius: 16px;
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 10px 24px rgba(22, 53, 71, .09);
  color: #163547;
  text-align: start;
}
.gallery-error-icon {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e7f1ef;
  color: #2b6e6b;
}
.gallery-error-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-error-copy {
  display: block;
  min-width: 0;
  color: #294c5b;
  font: 750 17px/1.55 Assistant, Arial, sans-serif;
}
.gallery-retry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 116px;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid #163547;
  border-radius: 999px;
  background: #163547;
  color: #fffdf9;
  font: 800 15px/1 Assistant, Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(22, 53, 71, .16);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.gallery-retry-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-retry-button:hover { background: #2b6e6b; box-shadow: 0 7px 18px rgba(22, 53, 71, .2); transform: translateY(-1px); }
.gallery-retry-button:focus-visible { outline: 3px solid rgba(201, 110, 77, .34); outline-offset: 3px; }
.gallery-retry-button:disabled { opacity: .56; cursor: wait; transform: none; }
@media (max-width: 700px) {
  .empty-state.gallery-error-state {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 18px;
    border-radius: 14px;
  }
  .gallery-error-icon { width: 44px; }
  .gallery-error-icon svg { width: 23px; height: 23px; }
  .gallery-error-copy { font-size: 15px; line-height: 1.45; }
  .gallery-retry-button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-retry-button { transition: none; }
}