/* BloomBox promo spaces (update_promos): top bar, strip under the hero, tile in the product grid, category banner.
   Own file + own class names (pm-*), so later theme/tailwind refreshes cannot break it.
   Rules: space is reserved (no layout shift), images lazy, no pop-ups, works from 320px up, light + dark theme. */

#promo-bar[hidden], #promo-strip[hidden], #promo-cat[hidden] { display: none; }

/* ---------------------------------------------------------------- top bar */
#promo-bar { position: relative; z-index: 41; background: linear-gradient(90deg, #44573f, #6d826a 50%, #44573f); color: #fff; }
.pb-reserve #promo-bar[hidden] { display: block; min-height: 2.5rem; }
.pm-bar-in { display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: 80rem; margin: 0 auto; padding: .3rem 2.75rem .3rem 1rem; min-height: 2.5rem; text-align: center; font-size: .84rem; line-height: 1.3; }
.pm-bar-txt { color: inherit; text-decoration: none; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .15rem .6rem; }
.pm-bar-txt b { font-weight: 700; letter-spacing: .01em; }
.pm-bar-txt span.pm-bar-sub { opacity: .92; }
.pm-bar-txt .pm-bar-cta { color: #f6e3a1; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
a.pm-bar-txt:hover .pm-bar-cta { color: #fff; }
.pm-x { position: absolute; right: .35rem; top: 50%; translate: 0 -50%; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 999px; border: 0; background: transparent; color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; opacity: .85; }
.pm-x:hover { opacity: 1; background: rgb(255 255 255 / .16); }
.pm-x:focus-visible, .pm-card:focus-visible, .pm-bar-txt:focus-visible { outline: 3px solid #f6e3a1; outline-offset: 2px; }

/* ---------------------------------------------------------------- shared card */
.pm-card { position: relative; display: block; overflow: hidden; border-radius: 1.25rem; color: #fff; text-decoration: none; isolation: isolate;
  background: linear-gradient(135deg, #52684f, #2f3d2f 70%); border: 1px solid rgb(var(--stone-200)); box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.pm-card.pm-noimg { background: linear-gradient(135deg, #5d7459 0%, #35452f 62%, #7a6a2a 130%); }
.pm-card picture, .pm-card img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pm-card img { object-fit: cover; transition: transform .8s var(--ease-out); }
.pm-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(14 20 14 / .78) 0%, rgb(14 20 14 / .38) 46%, rgb(14 20 14 / 0) 78%); }
.pm-body { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem 1.1rem 1.05rem; }
.pm-title { font-family: "Noto Serif Georgian", "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(1.05rem, 1rem + .6vw, 1.45rem); line-height: 1.2; text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.pm-text { font-size: .86rem; line-height: 1.4; opacity: .95; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 34rem; text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.pm-cta { margin-top: .2rem; display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .95rem; border-radius: 999px; background: linear-gradient(180deg, #f1dc8f, #d4af37); color: #3a3010; font-size: .8rem; font-weight: 700; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .6); }
.pm-cta::after { content: "→"; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.pm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  a.pm-card:hover img { transform: scale(1.05); }
  a.pm-card:hover .pm-cta::after { transform: translateX(3px); }
}

/* ---------------------------------------------------------------- strip under the hero
   Until the real cards arrive, empty placeholder cards of the SAME size are shown (count remembered from the last visit),
   so nothing below jumps when the promos load. */
#promo-strip { padding: 1.25rem 1rem 0; }
html.ps-0 #promo-strip { display: none; }
.pm-strip { display: grid; gap: 1rem; max-width: 80rem; margin: 0 auto; grid-template-columns: 1fr; }
.pm-strip .pm-card { aspect-ratio: 16 / 10; }
.pm-skel .pm-card { background: rgb(var(--stone-100)); border-color: rgb(var(--stone-200)); box-shadow: none; }
html.ps-1 .pm-skel .pm-card:nth-child(n+2), html.ps-2 .pm-skel .pm-card:nth-child(n+3) { display: none; }
/* phones: cards slide sideways (the next one peeks out) instead of a very long stack */
@media (max-width: 639px) {
  .pm-strip.pm-n2, .pm-strip.pm-n3, html.ps-2 .pm-skel, html.ps-3 .pm-skel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; padding: .25rem .25rem 1rem; margin: 0 -.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pm-strip.pm-n2::-webkit-scrollbar, .pm-strip.pm-n3::-webkit-scrollbar { display: none; }
  .pm-strip.pm-n2 .pm-card, .pm-strip.pm-n3 .pm-card, html.ps-2 .pm-skel .pm-card, html.ps-3 .pm-skel .pm-card { flex: 0 0 84%; scroll-snap-align: center; }
}
@media (min-width: 640px) {
  #promo-strip { padding-top: 1.75rem; }
  .pm-strip.pm-n2, html.ps-2 .pm-skel { grid-template-columns: repeat(2, 1fr); }
  .pm-strip.pm-n3, html.ps-3 .pm-skel { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .pm-strip.pm-n3 .pm-card, html.ps-3 .pm-skel .pm-card { aspect-ratio: 4 / 5; }
}
@media (min-width: 768px) {
  .pm-strip.pm-n1 .pm-card, html.ps-1 .pm-skel .pm-card { aspect-ratio: 3 / 1; }
  .pm-strip.pm-n1 .pm-body { padding: 1.6rem 2rem; max-width: 46rem; }
}
@media (min-width: 1024px) {
  .pm-strip.pm-n3 .pm-card, html.ps-3 .pm-skel .pm-card { aspect-ratio: 4 / 3; }
  .pm-strip.pm-n2 .pm-card, html.ps-2 .pm-skel .pm-card { aspect-ratio: 2 / 1; }
}

/* ---------------------------------------------------------------- tile inside the product grid */
.pm-tile.pm-card { min-height: 21rem; height: 100%; }
.pm-tile .pm-body { padding: 1.1rem 1.1rem 1.2rem; }
.pm-tile .pm-title { font-size: 1.3rem; }

/* ---------------------------------------------------------------- category banner */
#promo-cat { margin-bottom: 1.25rem; }
.pm-catbox .pm-card { aspect-ratio: 16 / 9; }
@media (min-width: 640px) { .pm-catbox .pm-card { aspect-ratio: 3 / 1; } }
@media (min-width: 1024px) { .pm-catbox .pm-card { aspect-ratio: 4 / 1; } .pm-catbox .pm-body { padding: 1.4rem 2rem; max-width: 46rem; } }

@media (prefers-reduced-motion: reduce) {
  .pm-card, .pm-card img, .pm-cta::after { transition: none !important; }
  a.pm-card:hover, a.pm-card:hover img { transform: none; }
}
@media print { #promo-bar, #promo-strip, #promo-cat, .pm-tile { display: none !important; } }

/* ---------------------------------------------------------------- layout stability
   The category menu is filled in after the categories arrive; reserve its height meanwhile so the hero and the
   catalog do not jump (Google measures this as "layout shift"). */
#category-pills:empty { min-height: 50px; }
@media (min-width: 1024px) { #category-pills:empty { min-height: 85px; } }
@media (min-width: 1280px) { #category-pills:empty { min-height: 46px; } }
/* very narrow phones (320-359px): the header icons were 8px wider than the screen */
@media (max-width: 359px) { header .ml-auto.flex { gap: .25rem; } }