/* Reference-quality visual slice: shared shell, Today, upload and post view.
   This file deliberately owns only the components being migrated. */
:root {
  --slice-ink:#102f3f;
  --slice-muted:#58717d;
  --slice-blue:#246b8a;
  --slice-citrus:#d97945;
  --slice-paper:#fffdf9;
  --slice-border:rgba(16,47,63,.14);
  --slice-radius:18px;
  --slice-shadow:0 16px 42px rgba(16,47,63,.11);
}

html,body { max-width:100%; overflow-x:clip; }
.site-header>* { min-width:0; }
.site-header {
  background:linear-gradient(90deg,rgba(255,253,249,.94),rgba(244,249,247,.96))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
  border-block-end:1px solid var(--slice-border)!important;
  box-shadow:0 9px 28px rgba(16,47,63,.1)!important;
}
.site-header .brand { flex-shrink:1; }
.site-header nav { align-items:center; }
.site-header nav a { position:relative; padding-block:10px; }
.site-header nav a:not(.deals-fresh)::after {
  content:"";
  position:absolute;
  inset-inline:50% auto;
  inset-block-end:3px;
  width:0;
  height:2px;
  border-radius:2px;
  background:var(--slice-citrus);
  transition:width var(--motion-duration-feedback) var(--motion-ease-standard),inset-inline-start var(--motion-duration-feedback) var(--motion-ease-standard);
}
.site-header nav a:not(.deals-fresh):is(:hover,:focus-visible)::after { width:100%; inset-inline-start:0; }

/* The Deals marker owns its pseudo-element. Keeping it out of the generic
   navigation underline prevents a hover from stretching the dot into a line. */
.site-header nav a.deals-fresh::after {
  min-width:8px;
  max-width:8px;
  width:8px;
  min-height:8px;
  max-height:8px;
  height:8px;
  transition:none;
}

/* Daily note ---------------------------------------------------------------
   Use a compact editorial callout instead of a centred floating pill. The
   logical start edge is the right edge in Hebrew, so the layout will remain
   coherent when the locale layer is re-enabled later. */
#today > .daily-tip-inner {
  display:flex;
  justify-content:flex-start;
  width:min(var(--daily-feed-max,1120px),calc(100% - (var(--page-gutter,20px) * 2)));
  margin:0 auto 18px;
  padding:10px 0 0;
  direction:rtl;
}
#today > .daily-tip-inner .tip-of-day {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  width:fit-content;
  max-width:min(100%,720px);
  min-height:48px;
  margin:0!important;
  padding:12px 16px;
  border:1px solid rgba(36,107,138,.2);
  border-radius:16px;
  background:linear-gradient(120deg,rgba(255,253,249,.96),rgba(227,240,240,.9));
  color:var(--slice-ink)!important;
  box-shadow:0 8px 24px rgba(16,47,63,.1),inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  text-align:start;
  font:800 clamp(14px,1.35vw,16px)/1.45 Assistant,Arial,sans-serif;
}
#today > .daily-tip-inner .tip-of-day-title {
  display:block;
  color:#a34f35;
  font:850 12px/1.25 Rubik,Assistant,Arial,sans-serif;
}
#today > .daily-tip-inner .tip-of-day-copy {
  display:block;
  color:var(--slice-ink);
  font:750 clamp(14px,1.35vw,16px)/1.45 Assistant,Arial,sans-serif;
}

/* The tip starts the surface. Do not reserve an empty strip above it in
   either the loaded or skeleton-backed Today state. */
#today.today.section-wrap.site-skeleton-host {
  padding-block-start:0!important;
}

#today>.today-content>.section-heading {
  position:relative;
  padding-block-end:14px;
  border-color:var(--slice-border);
}
#today>.today-content>.section-heading::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-end:-1px;
  width:clamp(52px,8vw,96px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--slice-citrus),#efb45f);
}
#today>.today-content>.section-heading h2 { color:var(--slice-ink); letter-spacing:-.045em; }
#todayDate { border-color:var(--slice-border); background:rgba(255,253,249,.9); }
.today-gallery { min-width:0; }
.today-coffee,.featured-loader-waiting {
  border:1px solid var(--slice-border);
  border-radius:var(--slice-radius)!important;
  background:rgba(255,253,249,.93)!important;
  box-shadow:0 22px 58px rgba(16,47,63,.15),0 2px 0 rgba(255,255,255,.8) inset!important;
  overflow:hidden;
}
.today-coffee { animation:slice-card-arrive var(--motion-duration-slow) var(--motion-ease-enter) both; }
.featured-loader-waiting { min-height:clamp(150px,20vw,210px)!important; }
.featured-loader-waiting::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block:22px;
  width:3px;
  border-radius:3px;
  background:var(--slice-citrus);
}
.featured-loader-failure {
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  min-height:190px;
  padding:26px;
  border:1px solid rgba(166,70,55,.25);
  border-radius:var(--slice-radius);
  background:#fff8f4;
  box-shadow:var(--slice-shadow);
  text-align:center;
}
.featured-loader-failure p { margin:0; color:#7f392f; font-weight:800; }
.featured-loader-failure button {
  min-height:42px;
  padding:9px 18px;
  border:1px solid rgba(16,47,63,.22);
  border-radius:999px;
  background:var(--slice-ink);
  color:#fff;
  font:800 15px Assistant,Arial,sans-serif;
  cursor:pointer;
}
#featuredCard:not(.has-multiple) .today-coffee-copy h3 { color:var(--slice-ink); line-height:1.08; }
#featuredCard:not(.has-multiple) .today-coffee-copy p { color:var(--slice-muted); line-height:1.55; }
#featuredCard:not(.has-multiple) .today-coffee-footer { border-color:var(--slice-border); }

#upload.upload-section { background:rgba(255,253,249,.72); }
#upload .upload-layout { gap:16px; }
#upload .upload-copy { display:grid; grid-template-columns:minmax(0,auto) minmax(260px,1fr); align-items:end; gap:22px; }
#upload .upload-copy h2 { margin:0; color:var(--slice-ink); font-size:clamp(38px,5vw,58px); line-height:.92; }
#upload .upload-copy p { max-width:48ch; margin:0; color:var(--slice-muted); font-size:17px; line-height:1.55; }
#uploadForm.upload-card {
  position:relative;
  padding:clamp(16px,2.4vw,26px);
  border:1px solid var(--slice-border);
  border-radius:var(--slice-radius);
  background:rgba(255,253,249,.96);
  box-shadow:0 24px 64px rgba(16,47,63,.14);
  overflow:hidden;
}
#uploadForm.upload-card::before {
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:4px;
  background:linear-gradient(180deg,var(--slice-citrus),var(--slice-blue));
}
#upload .drop-zone {
  min-height:clamp(210px,27vw,300px);
  border:1.5px dashed rgba(36,107,138,.44);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(217,237,241,.46),rgba(255,253,249,.78));
}
#upload .drop-zone:is(:hover,:focus-within,.dragover) { border-color:var(--slice-blue); box-shadow:inset 0 0 0 4px rgba(36,107,138,.07); }
#upload .upload-brew-details { border-color:var(--slice-border); border-radius:12px; background:#fff; }
#upload .upload-brew-details summary { min-height:50px; }
#upload .upload-account-status:not([hidden]) {
  padding:11px 14px;
  border-inline-start:3px solid var(--slice-blue);
  border-radius:10px;
  background:rgba(217,237,241,.55);
  color:var(--slice-muted);
}
#upload .upload-daily-locked:not([hidden]) {
  border:1px solid var(--slice-border);
  border-radius:var(--slice-radius);
  background:rgba(255,253,249,.95);
  box-shadow:var(--slice-shadow);
}
#upload .upload-message.is-success { color:#2f6b56; }
#upload .upload-message.is-error { color:#9a4033; }
#uploadForm[aria-busy="true"] { cursor:progress; }
#uploadForm[aria-busy="true"] :is(button,input,select,textarea) { cursor:progress; }

.lightbox:not(.image-fullscreen) { background:rgba(7,25,34,.94); }
.lightbox:not(.image-fullscreen)>.lightbox-image-frame>img { box-shadow:0 18px 58px rgba(0,0,0,.35); }
.lightbox-caption { text-align:start; }
.lightbox :is(button,a):focus-visible { outline:3px solid #efaa5a; outline-offset:3px; }

.profile-login-dialog.kalimera-responsive-overlay {
  width:min(440px,calc(100vw - 32px));
  border-radius:22px;
  box-shadow:none;
}
.profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-card {
  display:block;
  padding:30px 26px 24px;
  border:1px solid var(--slice-border);
  border-radius:inherit;
  background:radial-gradient(circle at 86% 0,rgba(233,185,100,.2),transparent 34%),linear-gradient(150deg,#fffdf9,#edf6f4);
  box-shadow:0 30px 90px rgba(7,25,34,.34);
  overflow:visible;
}
.profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-card::after {
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin:20px auto 0;
  border-radius:999px;
  background:rgba(36,107,138,.2);
}
.profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-card h2 { padding-inline:42px; }
.profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-close {
  inset-block-start:14px;
  inset-inline-start:14px;
  inset-inline-end:auto;
  width:38px;
  height:38px;
  border-color:var(--slice-border);
  box-shadow:none;
}

@media(max-width:700px) {
  .site-header { width:100%; max-width:100vw; padding-inline:12px!important; }
  .site-header .brand { max-width:126px; overflow:visible; }
  .site-header .brand>strong { white-space:normal; }
  .site-header .header-actions { min-width:0; }
  #today>.daily-tip-inner,#today>.today-content { width:calc(100% - 24px); }
  #today>.today-content>.section-heading { gap:10px; }
  #today>.today-content>.section-heading h2 { font-size:clamp(27px,8vw,34px); }
  .today-coffee,.featured-loader-waiting { border-radius:15px!important; }
  #featuredCard:not(.has-multiple) .today-coffee { height:auto; max-height:none; grid-template-columns:1fr; grid-template-areas:"media" "copy"; }
  #featuredCard:not(.has-multiple) .today-coffee-photo { aspect-ratio:4/3; }
  #featuredCard:not(.has-multiple) .today-coffee-copy { padding:20px 18px 14px; }
  #upload .upload-layout { width:calc(100% - 24px); }
  #upload .upload-copy { grid-template-columns:1fr; gap:10px; }
  #upload .upload-copy h2 { font-size:39px; }
  #upload .upload-copy p { font-size:15px; }
  #uploadForm.upload-card { padding:13px; border-radius:15px; }
  #upload .drop-zone { min-height:190px; }
  .profile-login-dialog.kalimera-responsive-overlay {
    position:fixed;
    inset:auto 0 0;
    width:100%;
    max-height:min(92dvh,calc(var(--overlay-viewport-height) - 8px));
    margin:0;
    border-radius:26px 26px 0 0;
  }
  .profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-card {
    padding:34px 18px max(20px,env(safe-area-inset-bottom));
    max-height:min(92dvh,calc(var(--overlay-viewport-height) - 8px));
    border-block-end:0;
    border-radius:26px 26px 0 0;
  }
  .profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-card::after {
    content:none;
    display:none;
  }
  .profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-card h2 { padding-inline:34px; font-size:22px; }
  .profile-login-dialog.kalimera-responsive-overlay .profile-login-dialog-close { inset-block-start:14px; inset-inline-start:14px; }
  #uploadAuth.upload-auth {
    border-inline:0;
  }
}

@keyframes slice-card-arrive {
  from { opacity:0; transform:translate3d(0,18px,0) scale(.985); }
  to { opacity:1; transform:none; }
}

@media(prefers-reduced-motion:reduce) {
  .site-header nav a::after { transition:none; }
  .today-coffee { animation:none; }
}

/* Shared floating controls use one readable translucent surface. The alpha is
   on the surface rather than the icon, preserving contrast over photography. */
:is(.scroll-to-top,.bug-report-menu-trigger,.profile-section-nav-trigger,.lightbox-close,.lightbox-image-action,.lightbox-navigation .lightbox-nav,.lightbox-social-actions .lightbox-controls button,.lightbox-post-action) {
  background-color:rgba(18,42,53,.5)!important;
  border-color:rgba(255,255,255,.55)!important;
  color:#fffdf9!important;
  box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  backdrop-filter:blur(10px) saturate(1.08);
}

/* The two global utility controls use the same softened backdrop as the post
   viewer. Keeping this scoped avoids changing profile and post action icons. */
:is(.scroll-to-top,.bug-report-menu-trigger){
  background:rgba(10,28,37,.52)!important;
  border-color:rgba(255,255,255,.5)!important;
  box-shadow:0 8px 24px rgba(5,20,28,.2)!important;
  -webkit-backdrop-filter:blur(10px) saturate(.9)!important;
  backdrop-filter:blur(10px) saturate(.9)!important;
  opacity:.72;
}
:is(.scroll-to-top,.bug-report-menu-trigger):is(:hover,:focus-visible){opacity:1}
:is(.scroll-to-top,.bug-report-menu-trigger,.profile-section-nav-trigger,.lightbox-close,.lightbox-image-action,.lightbox-navigation .lightbox-nav,.lightbox-social-actions .lightbox-controls button,.lightbox-post-action):is(:hover,:focus-visible) {
  background-color:rgba(18,42,53,.68)!important;
}

/* Post controls all inherit the close button's matte surface. State is shown
   through the icon colour rather than replacing the control background. */
.lightbox-social-actions .lightbox-controls .like-control.active{
  background-color:rgba(18,42,53,.5)!important;
  color:#efaa5a!important;
}
.lightbox-social-actions .lightbox-controls .share-control.copied{
  background-color:rgba(18,42,53,.5)!important;
  color:#b9dc8f!important;
}

/* Photo viewers use the same calm veil as the private calendar. Keeping the
   opacity on the backdrop preserves image contrast while the blur separates
   the viewer from the page below. */
.lightbox:not(.image-fullscreen):not([hidden]){
  background:rgba(10,28,37,.52)!important;
  -webkit-backdrop-filter:blur(10px) saturate(.9);
  backdrop-filter:blur(10px) saturate(.9);
}
.lightbox.image-fullscreen:not([hidden]){
  background:rgba(10,28,37,.52)!important;
  -webkit-backdrop-filter:blur(10px) saturate(.9);
  backdrop-filter:blur(10px) saturate(.9);
}
.lightbox.image-fullscreen .lightbox-close{
  top:20px!important;
  right:20px!important;
  left:auto!important;
}
.lightbox.image-fullscreen .lightbox-image-exit{
  top:73px!important;
  right:20px!important;
  left:auto!important;
}
@media(max-width:700px){
  .lightbox.image-fullscreen .lightbox-close{top:12px!important;right:12px!important}
  .lightbox.image-fullscreen .lightbox-image-exit{top:65px!important;right:12px!important}
}
#profileAvatarDialog::backdrop,
#profileCoverDialog::backdrop{
  background:rgba(10,28,37,.36)!important;
  -webkit-backdrop-filter:blur(10px) saturate(.9);
  backdrop-filter:blur(10px) saturate(.9);
}

/* Upload stays a blue primary action. On mobile the existing element opacity
   still softens the floating button without muddying the brand colour. */
.site-header .upload-link {
  background-color:var(--blue,#2b6e8f)!important;
  color:#fff!important;
}
.site-header .upload-link:is(:hover,:focus-visible) {
  background-color:#245f7b!important;
}

@media(max-width:700px){
  /* Final mobile cascade: preserve the floating upload affordance's blue
     identity while allowing the page behind it to soften through the blur. */
  .site-header .upload-link{
    background-color:rgba(43,110,143,.58)!important;
    border-color:rgba(255,253,249,.58)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
    backdrop-filter:blur(10px) saturate(1.08)!important;
    opacity:.72;
  }
}

/* The login card is not draggable. Remove the shared overlay accent rule and
   mobile drag affordance so the dialog has one clean uninterrupted surface. */
.profile-login-dialog-card.kalimera-overlay-surface::before,
.profile-login-dialog-card.kalimera-overlay-surface::after,
.profile-login-dialog-card .kalimera-overlay-handle {
  content:none!important;
  display:none!important;
}

/* Global button minimums must never stretch compact circular controls. */
#lightboxEditDetails.lightbox-summary-edit,
#lightboxEditTaste.lightbox-summary-edit,
.profile-preset-delete-close.motion-interactive {
  box-sizing:border-box!important;
  padding:0!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
}
#lightboxEditDetails.lightbox-summary-edit,
#lightboxEditTaste.lightbox-summary-edit {
  flex:0 0 22px!important;
  inline-size:22px!important;
  block-size:22px!important;
  min-inline-size:22px!important;
  min-block-size:22px!important;
  max-inline-size:22px!important;
  max-block-size:22px!important;
}
.profile-preset-delete-close.motion-interactive {
  inline-size:32px!important;
  block-size:32px!important;
  min-inline-size:32px!important;
  min-block-size:32px!important;
  max-inline-size:32px!important;
  max-block-size:32px!important;
}

/* Mobile header follows the requested RTL reading order: menu, Deals,
   wordmark, account. Logical text alignment also remains correct in LTR. */
@media (max-width:700px) {
  .site-header>.menu-toggle{order:1}
  .site-header>.deals-header-link{order:2;margin-inline:0!important}
  .site-header>.brand{order:3}
  .site-header>.header-actions{order:4}
  .site-header nav a,.site-header nav .bug-report-menu-trigger{
    justify-content:flex-start!important;
    text-align:start!important;
  }
  .site-header nav{
    align-items:stretch!important;
    gap:0!important;
    padding:0!important;
    text-align:start!important;
  }
  .site-header nav>a,
  .site-header nav>.bug-report-menu-trigger,
  .site-header nav>.i18n-language-menu{
    box-sizing:border-box!important;
    width:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .site-header nav.is-open>*+*{
    border-block-start:1px solid rgba(22,53,71,.15)!important;
  }
  .site-header nav>a::after{display:none!important}
  .site-header nav>a:is(:hover,:focus-visible),
  .site-header nav>.bug-report-menu-trigger:is(:hover,:focus-visible){
    background:#e6f2f1!important;
    transform:none!important;
  }

  body.profile-page #profileCoverEditAction,
  body.profile-page #profileAvatarEdit{
    box-sizing:border-box!important;
    inline-size:36px!important;
    block-size:36px!important;
    min-inline-size:36px!important;
    min-block-size:36px!important;
    max-inline-size:36px!important;
    max-block-size:36px!important;
    aspect-ratio:1!important;
    padding:0!important;
  }

  .daily-streak-calendar-dialog[open]{
    box-sizing:border-box;
    inset-block-start:0!important;
    inset-inline:0!important;
    inline-size:100vw!important;
    block-size:100dvh!important;
    max-block-size:none!important;
    margin:0!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  .daily-streak-calendar-card{
    box-sizing:border-box;
    max-block-size:calc(100dvh - 16px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .daily-streak-calendar-close{
    box-sizing:border-box!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 36px!important;
    inline-size:36px!important;
    block-size:36px!important;
    min-inline-size:36px!important;
    min-block-size:36px!important;
    max-inline-size:36px!important;
    max-block-size:36px!important;
    aspect-ratio:1!important;
    padding:0!important;
    border-radius:50%!important;
    line-height:1!important;
  }

  .notifications-panel .notifications-panel-list.kalimera-overlay-body{align-content:start}
  .notifications-panel-item{
    box-sizing:border-box;
    min-block-size:72px;
    block-size:auto!important;
    grid-auto-rows:max-content;
    align-items:start;
    padding-block:12px!important;
    overflow:visible;
    white-space:normal;
  }
  .notifications-panel-body{align-content:start;min-block-size:100%}
  .notifications-panel-body :is(strong,.notifications-panel-message,.notifications-panel-meta){
    display:block;
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* Notification cards must grow with their content on narrow screens.  Keep
   both grid tracks shrinkable and allow mixed Hebrew/Latin text to wrap rather
   than clipping inside a fixed-height row. */
@media (max-width:700px){
  .notifications-panel .notifications-panel-list{
    min-width:0;
    overflow-x:hidden;
  }
  .notifications-panel-item{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    align-items:start!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  .notifications-panel-item > .notifications-panel-type{
    inline-size:28px;
    block-size:28px;
    flex:none;
  }
  .notifications-panel-item .notifications-panel-body,
  .notifications-panel-item .notifications-panel-body > *{
    min-width:0!important;
    max-width:100%;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    word-break:break-word;
  }
  .notifications-panel-item .notifications-panel-body strong{
    align-items:flex-start;
    line-height:1.4;
  }
  .notifications-panel-item .notifications-panel-meta{
    line-height:1.35;
  }
}

/* Selective control-surface rollout -----------------------------------------
   The profile section navigator established a useful Kalimera pattern: one
   translucent ink surface for a related set of compact actions. Reuse it for
   navigation/filter clusters, never for content cards or ordinary forms. */
:root {
  --kalimera-control-surface:rgba(18,42,53,.5);
  --kalimera-control-surface-hover:rgba(18,42,53,.68);
  --kalimera-control-border:rgba(255,255,255,.42);
  --kalimera-control-item:rgba(255,255,255,.12);
  --kalimera-control-item-active:rgba(255,255,255,.25);
}

/* The rail itself is deliberately invisible. Its clipped content and overlay
   controls provide the swipe affordance without adding another card frame. */
.swipe-scroll-shell {
  border:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

@media(max-width:700px) {
  #today > .daily-tip-inner {
    width:calc(100% - 24px);
    margin-block-end:14px;
  }
  #today > .daily-tip-inner .tip-of-day {
    width:100%;
    max-width:none;
    min-height:46px;
    padding:11px 13px;
    border-radius:14px;
    font-size:13px;
  }
  #today > .daily-tip-inner .tip-of-day-title { font-size:11px; }
  #today > .daily-tip-inner .tip-of-day-copy { font-size:13px; }
}

/* Homepage cards are a compact discovery preview. The full catalogue keeps
   its richer store, description, verification and freshness metadata. */
#dealsGrid .deal-card.deals-page-card
  :is(.deal-page-description,.deal-promotion-status,.deal-page-updated,.deal-store.deal-page-store) {
  display:none!important;
}

#dealsGrid .deal-card.deals-page-card .deal-page-meta {
  justify-content:flex-start;
}

#dealsGrid .deal-card.deals-page-card .deal-category.deal-page-category {
  order:0;
  margin-inline:0;
  text-align:start;
}

@media (min-width:768px) {
  .profile-analytics-controls,
  .daily-streak-calendar-toolbar {
    padding:8px!important;
    border:1px solid var(--kalimera-control-border)!important;
    border-radius:14px!important;
    background:var(--kalimera-control-surface)!important;
    box-shadow:0 10px 24px rgba(10,28,37,.18)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.08);
    backdrop-filter:blur(12px) saturate(1.08);
  }

  .profile-analytics-controls :is(.profile-analytics-toggle,.profile-analytics-range-button),
  .daily-streak-calendar-toolbar .daily-streak-calendar-nav {
    border-color:rgba(255,255,255,.28)!important;
    background:var(--kalimera-control-item)!important;
    color:#fffdf9!important;
    box-shadow:none!important;
  }

  .profile-analytics-controls :is(.profile-analytics-toggle,.profile-analytics-range-button):is(:hover,:focus-visible,[aria-pressed="true"]),
  .daily-streak-calendar-toolbar .daily-streak-calendar-nav:is(:hover,:focus-visible) {
    border-color:rgba(255,255,255,.82)!important;
    background:var(--kalimera-control-item-active)!important;
    color:#fff!important;
  }

  .profile-analytics-controls { border-block:0!important; }
  .daily-streak-calendar-toolbar strong { color:#fffdf9!important; }
}

/* Deals search is an editorial utility bar, not another dark navigation rail.
   Its quiet paper surface belongs to the product grid and keeps the query and
   result count readable at a glance. */
.deals-page-tools{
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:14px!important;
  margin-block-end:22px!important;
  padding:14px 16px!important;
  border:1px solid rgba(22,53,71,.14)!important;
  border-radius:16px!important;
  background:rgba(255,253,249,.94)!important;
  box-shadow:6px 7px 0 rgba(22,53,71,.08)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.deals-page-tools .deals-search{
  min-width:0;
  color:#163547!important;
  font-size:13px;
  line-height:1.25;
  letter-spacing:.01em;
}
.deals-page-tools .deals-search input{
  min-height:48px;
  margin-block-start:7px!important;
  border:1px solid rgba(22,53,71,.18)!important;
  border-radius:11px!important;
  background:#f7f3ed!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82)!important;
}
.deals-page-tools .deals-search input:is(:focus,:focus-visible){
  border-color:#2b6e8f!important;
  outline:3px solid rgba(43,110,143,.13)!important;
  outline-offset:1px;
}
.deals-page-tools .deals-count{
  align-self:center;
  margin:0!important;
  padding:8px 11px;
  border-radius:999px;
  background:#e7f0ef;
  color:#315563!important;
  font-size:13px;
  line-height:1.2;
}
@media(max-width:600px){
  .deals-page-tools{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
  }
  .deals-page-tools .deals-count{
    justify-self:start;
  }
}

.deals-error-state {
  display:grid;
  justify-items:center;
  gap:12px;
}
.deals-error-state p { margin:0; }
.deals-retry-button {
  min-height:40px;
  padding:9px 18px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(18,42,53,.88);
  color:#fffdf9;
  font:800 14px/1 Assistant,Arial,sans-serif;
  cursor:pointer;
  transition:transform .18s ease,background-color .18s ease;
}
.deals-retry-button:is(:hover,:focus-visible) {
  background:#2b6e8f;
  transform:translateY(-1px);
}

/* Keep compact mobile actions on one intentional line. The legacy header uses
   space-between, which makes Deals drift away from the menu as adjacent
   content changes width. */
@media (max-width:700px) {
  .site-header {
    --mobile-header-action-size:40px;
    justify-content:flex-start!important;
    column-gap:8px!important;
  }
  .site-header>.menu-toggle,
  .site-header>.deals-header-link,
  .site-header>.header-actions>.profile-menu,
  .site-header #profileNavButton {
    box-sizing:border-box!important;
    flex:0 0 var(--mobile-header-action-size)!important;
    inline-size:var(--mobile-header-action-size)!important;
    block-size:var(--mobile-header-action-size)!important;
    min-inline-size:var(--mobile-header-action-size)!important;
    min-block-size:var(--mobile-header-action-size)!important;
    max-inline-size:var(--mobile-header-action-size)!important;
    max-block-size:var(--mobile-header-action-size)!important;
    aspect-ratio:1!important;
    margin:0!important;
    padding:0!important;
  }
  .site-header>.menu-toggle,
  .site-header>.deals-header-link,
  .site-header #profileNavButton {
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
  }
  .site-header>.brand {
    flex:0 1 124px!important;
    margin:0!important;
  }
  .site-header>.header-actions {
    flex:0 0 auto!important;
    margin-inline-start:auto!important;
    margin-inline-end:0!important;
  }
  .site-header>.header-actions>.profile-menu {
    order:100!important;
  }
}

/* Preserve the menu surface's lower silhouette after its individual actions
   are reset to square rows on mobile. */
@media(max-width:700px){
  .site-header nav{
    overflow:hidden!important;
    border-radius:14px!important;
  }
  .site-header nav.is-open>:last-child{
    border-end-start-radius:13px!important;
    border-end-end-radius:13px!important;
  }
}

/* Calendar month navigation remains a true circle even when shared motion or
   translated button rules try to stretch the control. */
.daily-streak-calendar-nav.motion-interactive{
  box-sizing:border-box!important;
  inline-size:38px!important;
  block-size:38px!important;
  min-inline-size:38px!important;
  min-block-size:38px!important;
  max-inline-size:38px!important;
  max-block-size:38px!important;
  aspect-ratio:1/1!important;
  flex:0 0 38px!important;
  padding:0!important;
  border-radius:50%!important;
}

/* Profiles begin with their cover immediately after the sticky header. The
   quick-navigation rail overlays that cover, so it must not reserve a strip
   of page background before the image. */
body.profile-page main,
body.profile-page #profile,
body.profile-page #profileContent,
.public-profile-page{
  margin-block-start:0!important;
  padding-block-start:0!important;
  border-block-start:0!important;
}
@media(min-width:701px){
  body.profile-page #profileContent>.profile-section-quick-nav{
    /* The sticky navigation and identity share the first grid row. This keeps
       the rail on the cover without reserving any page background above it. */
    grid-row:1!important;
    align-self:start!important;
    margin-block:8px 0!important;
  }
  body.profile-page #profileContent>.profile-identity-card{
    grid-row:1!important;
    margin-block-start:0!important;
  }
}

/* The Tips illustration is a full-bleed background layer while its actual
   content remains aligned to the standard section rail. */
#tips.kalimera-vector-parallax{
  overflow:visible;
}
#tips.kalimera-vector-parallax>.kalimera-vector-parallax-layer{
  inset-inline:auto!important;
  inset-block:-104px!important;
  left:50%!important;
  width:100vw!important;
  min-width:100vw!important;
  transform:translate3d(-50%,var(--parallax-depth,0),0) scale(1.025)!important;
}
@media(max-width:767px){
  #tips.kalimera-vector-parallax>.kalimera-vector-parallax-layer{
    inset-block:0!important;
    transform:translate3d(-50%,0,0)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #tips.kalimera-vector-parallax>.kalimera-vector-parallax-layer{
    transform:translate3d(-50%,0,0)!important;
  }
}

/* The calendar and its translucent veil sit above the sticky header. */
.site-header{
  z-index:1200!important;
}
.daily-streak-calendar-dialog[open]{
  z-index:1300!important;
}

/* Comments are part of the post experience, so their complete palette now
   follows the deep-blue profile information surface. Nested messages remain
   visually distinct through translucent layers without losing contrast. */
.lightbox-comments{
  background:linear-gradient(135deg,#0a1c25 0%,#163547 50%,#28627d 100%)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#fffdf9!important;
  box-shadow:0 18px 44px rgba(5,20,28,.35)!important;
}
.lightbox-comments :is(h3,.comment-form-title){color:#fffdf9!important}
.lightbox-comments :is(.comments-empty,.comment-meta time){color:#c9e0e3!important}
.lightbox-comments .comment-item{
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#fffdf9!important;
}
.lightbox-comments .comment-item.comment-reply{
  background:rgba(224,160,111,.14)!important;
  border-color:rgba(224,160,111,.34)!important;
}
.lightbox-comments :is(.comment-meta strong,.comment-item p){color:#fffdf9!important}
.lightbox-comments :is(.comment-reply-button,.comment-cancel-reply){color:#f1bd91!important}
.lightbox-comments .comment-form{border-top-color:rgba(255,255,255,.2)!important}
.lightbox-comments :is(.comment-form input,.comment-form textarea){
  background:rgba(255,255,255,.95)!important;
  border-color:rgba(255,255,255,.3)!important;
  color:#163547!important;
}
.lightbox-comments :is(.comment-form input,.comment-form textarea)::placeholder{color:#71848b!important}
.lightbox-comments .comment-form button[type="submit"],
.lightbox-comments .comment-sign-in{
  border-color:rgba(255,255,255,.28)!important;
  background:#d9782b!important;
  color:#fffdf9!important;
}
.lightbox-comments :is(.comment-form button[type="submit"],.comment-sign-in):is(:hover,:focus-visible){background:#bd6424!important}
.lightbox-comments :is(.comment-emoji-button,.comments-toggle){
  border-color:rgba(255,255,255,.25)!important;
  background:rgba(255,255,255,.12)!important;
  color:#fffdf9!important;
}
.lightbox-comments .comment-status{color:#ffd3ad!important}

/* Final post/image-view surface pass. This stylesheet is loaded after older
   visual layers, so keep the canonical profile-navigation glass palette here
   as well. Direct selectors cover current and legacy lightbox markup. */
.lightbox:not([hidden]),
.lightbox.image-fullscreen:not([hidden]){
  background:rgba(18,42,53,.5)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
}
.lightbox :is(.lightbox-brew-details,.lightbox-taste,.lightbox-comments,.lightbox-related,.lightbox-related-posts,.lightbox-navigation){
  background:rgba(18,42,53,.5)!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:0 10px 24px rgba(10,28,37,.18)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
  color:#fffdf9!important;
}
.lightbox :is(.lightbox-brew-details,.lightbox-taste,.lightbox-comments,.lightbox-related,.lightbox-related-posts) :is(h3,h4,.lightbox-brew-details-title,.lightbox-taste-title,.lightbox-brew-details-list,.lightbox-taste-rows,.lightbox-brew-value,.lightbox-taste-row span,.comment-item p,.comment-meta strong,.comments-empty){color:#fffdf9!important}
.lightbox :is(.lightbox-brew-key,.lightbox-taste-row strong,.comment-meta time,.lightbox-related-meta,.lightbox-related-date){color:#d6e6e7!important}
.lightbox .comment-item{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.28)!important;color:#fffdf9!important}
.lightbox .comment-item.comment-reply{background:rgba(217,120,43,.2)!important;border-color:rgba(255,210,155,.34)!important}
.lightbox :is(.lightbox-navigation .lightbox-nav,.lightbox-close,.lightbox-image-action,.lightbox-social-actions .lightbox-controls button,.lightbox-post-action){
  border-color:rgba(255,255,255,.42)!important;
  background:rgba(255,255,255,.12)!important;
  color:#fffdf9!important;
  box-shadow:0 10px 24px rgba(10,28,37,.18)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
}
.lightbox :is(.lightbox-navigation .lightbox-nav,.lightbox-close,.lightbox-image-action,.lightbox-social-actions .lightbox-controls button,.lightbox-post-action):is(:hover,:focus-visible){background:rgba(255,255,255,.25)!important;border-color:rgba(255,255,255,.82)!important}
.lightbox .lightbox-social-actions .lightbox-controls .like-control.active{background:#c96e4d!important;border-color:#ffd7cb!important;color:#fff!important}
.lightbox .lightbox-social-actions .lightbox-controls .share-control.copied{background:#48711f!important;border-color:#d9f0bd!important;color:#fff!important}

/* Guides and troubleshooting controls no longer carry the reflected aura used
   for cards on dark surfaces. Focus remains visible through their borders. */
#guides :is(button,.machine-choice,.guide-level-choice,.calculator-range-step),
#qa :is(button,.qa-filter,.qa-load-more){
  box-shadow:none!important;
}
#guides :is(button,.machine-choice,.guide-level-choice,.calculator-range-step):is(:hover,:focus-visible),
#qa :is(button,.qa-filter,.qa-load-more):is(:hover,:focus-visible){
  box-shadow:none!important;
}

/* The deals route uses the exact shared mobile-header geometry. In RTL the
   auto logical-start margin keeps the profile action pinned to the physical
   left edge, matching Today, Gallery and Profile. */
@media(max-width:700px){
  body.deals-route .site-header>.header-actions{
    margin-inline-start:auto!important;
    margin-inline-end:0!important;
  }
  body.deals-route .site-header>.header-actions>.profile-menu{
    order:100!important;
  }
}