/* =========================================================================
   pages.css — components that exist only on the five subpages.

   Kept out of the homepage sheets so the homepage does not download rules
   for a contact form it does not have.
   ========================================================================= */

/* =========================================================================
   MENI — search
   ========================================================================= */
.menu-page__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.menu-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}
.menu-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  color: rgba(var(--cocoa-rgb), .6);
  pointer-events: none;
}
.menu-search__input {
  width: 100%;
  padding: 13px 44px 13px 44px;
  border: 2px solid rgba(var(--cocoa-rgb), .18);
  background: var(--cream);
  color: var(--ink);
  transition: border-color var(--dur-control) var(--ease-out);
}
.menu-search__input:focus-visible { border-color: var(--teal); }
/* The browser's own clear affordance would sit beside ours. */
.menu-search__input::-webkit-search-cancel-button { display: none; }
.menu-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 30px;
  height: 30px;
  border: 0;
  background: rgba(var(--cocoa-rgb), .1);
  color: var(--cocoa);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.menu-search__clear:hover { background: rgba(var(--cocoa-rgb), .2); }

.menu-search__status {
  min-height: 1.4em;          /* reserved, so results never shift the grid */
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
  color: var(--cocoa);
  opacity: .8;
}

.link-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
}

.menu-page__bundles { background: var(--cream); }

/* =========================================================================
   UKUSI — full-viewport flavour panels
   ========================================================================= */
.flavours {
  position: relative;
  isolation: isolate;
}
/* THE SIGNATURE MOTION of this page: the field takes each flavour's own
   accent as its panel enters. JS writes --page-tint; this consumes it.
   Held at .18 because a full-strength accent behind body copy would take
   the text below AA — the colour is atmosphere, not a surface. */
.flavours::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--page-tint, transparent);
  opacity: .18;
  pointer-events: none;
  transition: background-color var(--dur-section) var(--ease-in-out);
}
.flavours > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  /* No colour changes driven by scroll position. */
  .flavours::before { display: none; }
}

.flavour {
  min-height: 86vh;
  display: grid;
  align-content: center;
  padding-block: clamp(var(--s-12), 6vw, var(--s-20));
}
.flavour__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--s-8), 5vw, var(--s-20));
  align-items: center;
}
.flavour__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: .2em;
  color: var(--cocoa);
  opacity: .6;
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.flavour__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 7.5vw, 116px);
  line-height: .92;
  letter-spacing: var(--track-hero);
  font-variation-settings: var(--wonk-hero);
  color: var(--teal-deep);
  text-wrap: balance;
  margin-bottom: var(--s-4);
}
.flavour__desc { margin-bottom: var(--s-5); color: var(--cocoa); }
.flavour__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.flavour__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.flavour__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-variation-settings: var(--wonk-sub);
}
.flavour__price small {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cocoa);
}

.flavour__frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--sand);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  -webkit-mask-image: radial-gradient(#fff, #fff);
          mask-image: radial-gradient(#fff, #fff);
}
.flavour__frame img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .flavour { min-height: 0; }
  .flavour__inner { grid-template-columns: 1fr; }
  .flavour__media { order: -1; }
  .flavour__frame { aspect-ratio: 4 / 3; }
}

/* The strip of remaining flavours — dragged, not gridded. */
.flavour-strip {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding: var(--s-2) var(--pad-gutter) var(--s-6);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.flavour-chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  border: 1px solid rgba(var(--cocoa-rgb), .16);
  background: var(--cream);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-control) var(--ease-out),
              border-color var(--dur-control) var(--ease-out);
}
.flavour-chip:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--cocoa-rgb), .3); }
.flavour-chip__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--chip-accent, var(--sand));
}
.flavours__rest-cta { margin-top: var(--s-6); }

/* =========================================================================
   O NAMA — alternating blocks along a vertical rule
   ========================================================================= */
.rail { position: relative; padding-left: clamp(var(--s-6), 4vw, var(--s-16)); }
.rail__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(var(--cocoa-rgb), .12);
  overflow: hidden;
}
.rail__line-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: top center;
}

.rail__block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 4vw, var(--s-16));
  align-items: center;
  padding-block: clamp(var(--s-10), 5vw, var(--s-20));
  border-bottom: 1px solid rgba(var(--cocoa-rgb), .1);
}
.rail__block:last-child { border-bottom: 0; }
.rail__block--flip .rail__media { order: -1; }

html.js:not(.no-gsap) .rail__block { opacity: 0; transform: translateY(24px); }
html.js .rail__block.is-in { opacity: 1; transform: none; }

.rail__text h3 { color: var(--teal-deep); margin-bottom: var(--s-3); }
.rail__text p { margin-bottom: var(--s-5); }

.rail__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.rail__media--empty { display: grid; }

@media (max-width: 900px) {
  .rail__block, .rail__block--flip { grid-template-columns: 1fr; }
  .rail__block--flip .rail__media { order: 0; }
}

/* Process list, shared language with the homepage §7. */
.process__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--s-6), 3vw, var(--s-12));
}
.process__step { padding-top: var(--s-5); border-top: 2px solid var(--teal); }
.process__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: .2em;
  color: var(--teal-deep);
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.process__title { color: var(--teal-deep); margin-bottom: var(--s-2); }
@media (max-width: 900px) { .process__list { grid-template-columns: 1fr; } }

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

   align-items:start is the load-bearing line. Each tile carries its own
   --tile-ratio, and grid items stretch by default — a stretched item
   ignores its aspect-ratio and takes the row height instead, which is
   exactly how six tiles with four different ratios end up looking like six
   identical rectangles again.
   ========================================================================= */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--s-4);
}
.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: var(--tile-ratio, 4 / 3);
  background: var(--sand);
  /* Clipping a scaling child on a rounded box leaks a square corner in
     Safari; the mask is what actually holds the radius there. */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  box-shadow: var(--shadow-sm);
}

/* THE BUG THIS FIXES: <picture> is display:inline by default, so the img's
   height:100% had no definite containing block to resolve against and fell
   back to the intrinsic ratio. The photograph then sat in the top of the
   card with a band of the card's own background showing beneath it — which
   is what the client screenshotted. Making the picture a block that fills
   the figure gives the percentage something to resolve against. */
.gallery__item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: 1;
  transition: scale var(--dur-card) var(--ease-out);
}
.gallery__item:hover img,
.gallery__item:focus-within img { scale: 1.06; }

/* Caption reveal. The text is in the DOM and readable to a screen reader at
   all times — this only controls whether it is painted, so hiding it is a
   visual decision and not an informational one. */
.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-8) var(--s-4) var(--s-3);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream);
  background: linear-gradient(to top,
    rgba(var(--ink-rgb), .86) 0%,
    rgba(var(--ink-rgb), .62) 45%,
    rgba(var(--ink-rgb), 0) 100%);
  opacity: 0;
  translate: 0 8px;
  transition: opacity var(--dur-card) var(--ease-out),
              translate var(--dur-card) var(--ease-out);
}
.gallery__item:hover .gallery__cap,
.gallery__item:focus-within .gallery__cap { opacity: 1; translate: 0 0; }

/* No hover on touch: a caption that only appears on hover is a caption a
   phone never shows, so there it is simply always on. */
@media (hover: none) {
  .gallery__cap { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item img { transition: none; }
  .gallery__item:hover img { scale: 1; }
  .gallery__cap { transition: none; }
}

@media (max-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gallery__grid { grid-template-columns: 1fr; }
}

.gallery__ig {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: var(--teal);
  color: var(--cream);
  box-shadow: var(--shadow-md);
  transition: background-color var(--dur-control) var(--ease-out);
}
.gallery__ig:hover { background: var(--teal-deep); }
.gallery__ig-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.gallery__ig-icon svg { width: 100%; height: 100%; }
.gallery__ig strong { display: block; }
.gallery__ig small { opacity: .86; }
.gallery__ig .btn__arrow { margin-left: auto; }

/* =========================================================================
   LOKACIJE
   ========================================================================= */
.loc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: center;
}
.loc__address {
  font-style: normal;
  display: grid;
  gap: 2px;
  margin: var(--s-5) 0;
  font-size: var(--fs-lead);
  color: var(--cocoa);
}
.loc__street { font-weight: 700; color: var(--ink); }
.loc__facts { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.loc__fact { display: flex; justify-content: space-between; gap: var(--s-4);
             padding-bottom: var(--s-3); border-bottom: 1px solid rgba(var(--cocoa-rgb), .12); }
.loc__fact dt { font-weight: 700; color: var(--ink); }
.loc__fact dd { color: var(--cocoa); }
.loc__pending {
  font-size: var(--fs-small);
  background: rgba(var(--cocoa-rgb), .1);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}
.loc__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.loc__map { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.loc-map { width: 100%; height: auto; display: block; }

.loc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: clamp(var(--s-6), 3vw, var(--s-10));
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--cocoa-rgb), .14);
  background: var(--cream);
  box-shadow: var(--shadow-sm);
}
.loc-card--pending { border-style: dashed; }
.loc-card__badge {
  font-size: var(--fs-small);
  font-weight: 700;
  background: var(--sand);
  color: var(--cocoa);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.loc-card h2 { color: var(--teal-deep); }

.loc-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.loc-how__item h3 { color: var(--teal-deep); margin-bottom: var(--s-2); }
@media (max-width: 900px) {
  .loc__grid, .loc-how__grid { grid-template-columns: 1fr; }
}

.loc-delivery__tiles { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.loc-tile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  border: 2px solid rgba(var(--cocoa-rgb), .16);
  background: var(--cream);
  min-width: 220px;
  transition: border-color var(--dur-control) var(--ease-out),
              box-shadow var(--dur-control) var(--ease-out);
}
.loc-tile:hover:not([aria-disabled='true']) {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}
.loc-tile strong { color: var(--ink); }
.loc-tile span { color: var(--cocoa); font-size: var(--fs-small); }
.loc-tile .btn__arrow { margin-left: auto; }
.loc-tile--disabled { opacity: .55; border-style: dashed; cursor: not-allowed; }

/* =========================================================================
   KONTAKT — form left, image right
   ========================================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: start;
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.cform { display: grid; gap: var(--s-5); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .cform__row { grid-template-columns: 1fr; } }

/* The field component itself now lives in shop.css and is shared by the
   newsletter, the contact form, the cart request and both auth forms. What
   stays here is only what is specific to THIS form's layout — the two-up
   row. Four near-identical field implementations was the thing that made
   the site read as assembled. */
.cform__submit { justify-self: start; }

.contact__side { display: grid; gap: var(--s-6); }
.contact__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.contact__media img { width: 100%; height: auto; display: block; }

.contact__list { list-style: none; display: grid; gap: var(--s-3); }
.contact__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(var(--cocoa-rgb), .12);
}
.contact__label { font-weight: 700; color: var(--ink); }
.contact__row a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   FAQ — native <details>, so it works without JavaScript
   ========================================================================= */
.faq__list { display: grid; gap: var(--s-3); max-width: 76ch; }
.faq__item {
  border: 1px solid rgba(var(--cocoa-rgb), .14);
  border-radius: var(--r-md);
  background: var(--cream);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: rgba(var(--cocoa-rgb), .04); }
.faq__icon {
  position: relative;
  width: 14px; height: 14px;
  flex: 0 0 auto;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--teal-deep);
  transition: transform var(--dur-control) var(--ease-out);
}
.faq__icon::before { inset: 6px 0; height: 2px; }
.faq__icon::after  { inset: 0 6px; width: 2px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__a {
  padding: 0 var(--s-6) var(--s-6);
  color: var(--cocoa);
  max-width: 62ch;
}
.faq__a a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .faq__icon::before, .faq__icon::after { transition: none; }
}