/*
 * Grina global components. Hand-authored; every value is a token from
 * design/tokens.json via assets/tokens.css. Linted by tools/lint-design.php.
 * tools/tests/test-patterns.php fails if a pattern uses a grina- class that
 * this file does not define.
 *
 * Specificity: Woodmart styles core blocks with single-class selectors
 * (.wp-block-button__link). Every rule here is at least two classes deep so
 * it wins without !important. Task 7 checks that in the browser.
 */

/* ── Base: every component root carries the Grina type ───────────────────── */
.grina-buttons,
.grina-fields,
.grina-badges,
.grina-card,
.grina-section,
.grina-header,
.grina-footer {
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
  color: var(--grina-color-body);
}

/* ── Buttons: 999 radius, calm = hairline, hover lifts 3px over 400ms ───── */
.grina-buttons.grina-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-md);
}

.grina-btn.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  padding: var(--grina-space-xs) var(--grina-space-md);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  transition: transform var(--grina-duration) ease;
}

.grina-btn.wp-block-button .wp-block-button__link:hover,
.grina-btn.wp-block-button .wp-block-button__link:focus-visible {
  transform: translateY(var(--grina-lift-hover));
}

.grina-btn.wp-block-button .wp-block-button__link:active {
  transform: translateY(0);
}

.grina-btn.wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* Leaf is a fill. Its text is Ink on Leaf (6.99), never white (2.05). */
.grina-btn.grina-btn--primary .wp-block-button__link {
  background: var(--grina-color-leaf);
  border-color: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
}

.grina-btn.grina-btn--secondary .wp-block-button__link {
  background: var(--grina-color-pine);
  border-color: var(--grina-color-pine);
  color: var(--grina-color-on-dark);
}

.grina-btn.grina-btn--outline .wp-block-button__link {
  background: transparent;
  border-color: var(--grina-color-pine);
  color: var(--grina-color-pine);
}

.grina-btn.grina-btn--disabled .wp-block-button__link {
  background: var(--grina-color-sage-2);
  border-color: var(--grina-color-sage-2);
  color: var(--grina-color-body);
  cursor: not-allowed;
  pointer-events: none;
}

/* Text link: Grove, 4.95 on Paper, 4.54 on Sage 1. */
.grina-link.grina-link a,
a.grina-link {
  color: var(--grina-color-grove);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.grina-link.grina-link a:hover,
a.grina-link:hover {
  color: var(--grina-color-pine);
}

@media (prefers-reduced-motion: reduce) {
  .grina-btn.wp-block-button .wp-block-button__link {
    transition: none;
  }
  .grina-btn.wp-block-button .wp-block-button__link:hover,
  .grina-btn.wp-block-button .wp-block-button__link:focus-visible {
    transform: none;
  }
}

/* ── Fields: 10 radius; Teal on focus, Clay on error, Grove on success ──── */
.grina-fields.grina-fields {
  display: grid;
  gap: var(--grina-space-md);
  max-width: var(--grina-content-width);
}

.grina-field__label {
  display: block;
  margin-bottom: var(--grina-space-3xs);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-field.grina-field input,
.wp-block-search.grina-field.grina-field .wp-block-search__input {
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
  color: var(--grina-color-pine);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  padding: var(--grina-space-xs) var(--grina-space-sm);
}

/* Quiet is 4.92 on Paper. opacity: 1 because Firefox dims placeholders. */
.grina-field.grina-field input::placeholder,
.grina-field.grina-field .wp-block-search__input::placeholder {
  color: var(--grina-color-quiet);
  opacity: 1;
}

.grina-field.grina-field input:focus-visible,
.grina-field.grina-field .wp-block-search__input:focus-visible,
.grina-field.is-focus input {
  border-color: var(--grina-color-teal);
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-field.grina-field input[aria-invalid="true"] {
  border-color: var(--grina-color-clay);
}

.grina-field.is-success input {
  border-color: var(--grina-color-grove);
}

/* ── Badges: 999 radius, Mono step. Information is Teal, urgency is Clay. ─ */
.grina-badges.grina-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-2xs);
}

.grina-badges .grina-badge {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: var(--grina-space-3xs) var(--grina-space-xs);
  border-radius: var(--grina-radius-action);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  line-height: var(--grina-leading-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

.grina-badges .grina-badge--neutral {
  background: var(--grina-color-sage-2);
  color: var(--grina-color-pine);
}

/* Paper on Teal 5.94, Paper on Clay 4.92. On-dark on Clay would be 4.40, a fail. */
.grina-badges .grina-badge--info {
  background: var(--grina-color-teal);
  color: var(--grina-color-paper);
}

.grina-badges .grina-badge--urgent {
  background: var(--grina-color-clay);
  color: var(--grina-color-paper);
}

.grina-badges .grina-badge--new {
  background: var(--grina-color-pine);
  color: var(--grina-color-on-dark);
}

/* ── Card: 16 radius, Sage 1 surface, calm hairline, hover lifts 3px ───── */
.grina-card.grina-card {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  transition: transform var(--grina-duration) ease;
}

.grina-card.grina-card:hover,
.grina-card.grina-card:focus-within {
  transform: translateY(var(--grina-lift-hover));
}

.grina-card .grina-card__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
}

.grina-card .grina-card__text {
  margin: 0;
  color: var(--grina-color-body);
}

@media (prefers-reduced-motion: reduce) {
  .grina-card.grina-card {
    transition: none;
  }
  .grina-card.grina-card:hover,
  .grina-card.grina-card:focus-within {
    transform: none;
  }
}

/* ── Site shell: the header (spec 2026-09-24 §3) ─────────────────────────
   One row, sticky under the admin bar. Panels stay hidden until shell.js adds
   .is-open; without JavaScript every trigger is a plain link, and the phone
   drawer opens through #grina-menu (:target). */
.grina-header.grina-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  margin: 0;
  padding: var(--grina-space-sm) var(--grina-gutter) 0;
  background: transparent;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
}

/* Out of the way while reading down, back the moment the reader scrolls up (2026-10-13). shell.js adds
   .is-tucked; never near the top, never with a panel open or focus inside. */
.grina-header.grina-header {
  transition: transform var(--grina-duration) ease;
}

.grina-header.grina-header.is-tucked {
  transform: translateY(-100%);
}

.grina-header.grina-header.is-tucked:focus-within {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .grina-header.grina-header {
    transition: none;
  }
}

/* The brand sheet's floating pill: Paper on whatever ground the page has. */
.grina-header .grina-header__bar {
  display: flex;
  align-items: center;
  gap: var(--grina-space-md);
  max-width: var(--grina-content-width);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 var(--grina-space-2xs) 0 var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
}

.grina-header .grina-header__logo {
  flex: 0 0 auto;
  margin: 0;
}

.grina-header .grina-header__logo img {
  display: block;
  width: auto;
  height: 36px;
}

.grina-header .grina-nav {
  display: flex;
  align-items: center;
  gap: var(--grina-space-lg);
  margin: 0 auto 0 var(--grina-space-xl);
}

.grina-header .grina-nav__group {
  position: relative;
  margin: 0;
}

/* The megamenu spans the header, so its group does not anchor it. */
.grina-header .grina-nav__group--shop {
  position: static;
}

.grina-header .grina-nav__item,
.grina-header .grina-nav__close,
.grina-header .grina-nav__contact {
  margin: 0;
}

/* Uppercase and letterspaced, as on the brand sheet's header. */
.grina-header .grina-nav__item a {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  padding: var(--grina-space-2xs) 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-mono);
  font-weight: 700;
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
}

.grina-header .grina-nav__item--shop a::after,
.grina-header .grina-nav__item--rituali a::after,
.grina-header .grina-nav__item--pomoc a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.grina-header .grina-nav__item a:hover,
.grina-header .grina-nav__item a[aria-expanded="true"] {
  color: var(--grina-color-grove);
}

.grina-header a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* Woodmart draws a dotted outline on every focused link, mouse clicks included. */
.grina-header a:focus:not(:focus-visible) {
  outline: none;
}

.grina-header .grina-nav__close,
.grina-header .grina-nav__contact,
.grina-header .grina-icon-link--menu {
  display: none;
}

/* Panels */
.grina-header .grina-mega {
  display: none;
  margin: 0;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
}

.grina-header .grina-mega--shop.is-open {
  display: grid;
}

/* Drops as a card the width of the pill, just under it. */
.grina-header .grina-mega--shop {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(calc(100% - 2 * var(--grina-gutter)), var(--grina-content-width));
  margin-top: var(--grina-space-2xs);
  grid-template-columns: 1.1fr 1.5fr 0.9fr;
  gap: var(--grina-space-xl);
  padding: var(--grina-space-lg);
  border-radius: var(--grina-radius-card);
  transform: translateX(-50%);
}

.grina-header .grina-mega--rituali,
.grina-header .grina-mega--pomoc,
.grina-header .grina-mega--account {
  position: absolute;
  top: 100%;
  margin-top: var(--grina-space-md);
  min-width: 240px;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  padding: var(--grina-space-sm) var(--grina-space-md);
  border-radius: var(--grina-radius-card);
}

.grina-header .grina-mega--rituali,
.grina-header .grina-mega--pomoc { left: 0; }
.grina-header .grina-mega--account { right: 0; }

.grina-header .grina-mega--rituali.is-open,
.grina-header .grina-mega--pomoc.is-open,
.grina-header .grina-mega--account.is-open {
  display: flex;
}

.grina-header .grina-mega__col,
.grina-header .grina-account__guest,
.grina-header .grina-account__member {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0;
}

.grina-header .grina-mega__title {
  margin: 0 0 var(--grina-space-2xs);
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
  font-weight: 700;
}

/* The one bold element: the four intentions as Sage tiles, the whole tile a link. */
.grina-header .grina-mega__col--intent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: var(--grina-space-xs);
}

.grina-header .grina-mega__col--intent .grina-mega__title,
.grina-header .grina-mega__col--cats > .grina-mega__title,
.grina-header .grina-mega__col--cats > .grina-mega__link {
  grid-column: 1 / -1;
}

.grina-header .grina-mega__col--intent .grina-mega__entry {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--grina-space-3xs);
  min-height: 96px;
  padding: var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
  transition: background var(--grina-duration) ease;
}

.grina-header .grina-mega__col--intent .grina-mega__entry:hover,
.grina-header .grina-mega__col--intent .grina-mega__entry:focus-within {
  background: var(--grina-color-sage-2);
}

/* Each intention's icon in Grove, at the top of its tile (2026-10-28). */
.grina-header .grina-mega__col--intent .grina-mega__entry::before {
  content: "";
  width: var(--grina-space-md);
  height: var(--grina-space-md);
  margin: 0 0 auto;
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-mega-icon) center / contain no-repeat;
  mask: var(--grina-mega-icon) center / contain no-repeat;
}

.grina-header .grina-mega__entry--jar { --grina-mega-icon: url("icons/jar.svg"); }
.grina-header .grina-mega__entry--bowl { --grina-mega-icon: url("icons/bowl.svg"); }
.grina-header .grina-mega__entry--flower { --grina-mega-icon: url("icons/flower.svg"); }
.grina-header .grina-mega__entry--box { --grina-mega-icon: url("icons/box.svg"); }

.grina-header .grina-mega__col--intent .grina-mega__link a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.grina-header .grina-mega__col--cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: var(--grina-space-sm) var(--grina-space-md);
}

.grina-header .grina-mega__col--cats > .grina-mega__link a {
  color: var(--grina-color-grove);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.grina-header .grina-mega__entry,
.grina-header .grina-mega__link,
.grina-header .grina-mega__hint {
  margin: 0;
}

.grina-header .grina-mega__link a {
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: none;
}

.grina-header .grina-mega__link a:hover {
  color: var(--grina-color-grove);
}

.grina-header .grina-mega__hint {
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

.grina-header .grina-header__account .grina-account__guest,
.grina-header .grina-header__account .grina-account__member {
  gap: var(--grina-space-2xs);
}

.grina-header .grina-mega__img {
  margin: 0;
  overflow: hidden;
  border-radius: var(--grina-radius-card);
}

/* The feature card is one link: the label's link covers the image too (2026-10-28, Igor: "image should be linked?"). */
.grina-header .grina-mega__col--feature {
  position: relative;
}

.grina-header .grina-mega__col--feature .grina-mega__link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.grina-header .grina-mega__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Guest and member lists: both rendered, WordPress's body class picks one (page-cache safe). */
body.logged-in .grina-header .grina-account__guest,
body:not(.logged-in) .grina-header .grina-account__member {
  display: none;
}

/* Icon links: the word stays for screen readers, the icon is a mask in Pine. */
.grina-header .grina-header__actions {
  display: flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  margin: 0 0 0 auto;
}

.grina-header .grina-header__account {
  position: relative;
  margin: 0;
}

.grina-header .grina-icon-link {
  margin: 0;
}

/* A paragraph's text baseline pushed its inline-flex icon 10px below the cart. */
.grina-header .grina-icon-link:not(.grina-icon-link--menu) {
  display: flex;
}

.grina-header .grina-icon-link a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--grina-radius-action);
  color: transparent;
  white-space: nowrap;
}

.grina-header .grina-icon-link a:hover,
.grina-header .grina-icon-link a[aria-expanded="true"] {
  background: var(--grina-color-sage-1);
}

/* Absolute: the visually hidden word is still laid out, and centring pushed the icon out. */
.grina-header .grina-icon-link a::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  margin: auto;
  background: var(--grina-color-pine);
}

.grina-header .grina-icon-link--search a::before {
  -webkit-mask: url("icons/search.svg") center / contain no-repeat;
  mask: url("icons/search.svg") center / contain no-repeat;
}

.grina-header .grina-icon-link--account a::before {
  -webkit-mask: url("icons/user.svg") center / contain no-repeat;
  mask: url("icons/user.svg") center / contain no-repeat;
}

.grina-header .grina-icon-link--menu a::before {
  -webkit-mask: url("icons/menu.svg") center / contain no-repeat;
  mask: url("icons/menu.svg") center / contain no-repeat;
}

.grina-header .grina-icon-link--menu a[aria-expanded="true"]::before {
  -webkit-mask-image: url("icons/close.svg");
  mask-image: url("icons/close.svg");
}

/* The search panel under the bar, holding core/search (styled by the field rules). */
.grina-header .grina-search-panel {
  display: none;
  max-width: var(--grina-content-width);
  margin: var(--grina-space-2xs) auto 0;
  padding: var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-header .grina-search-panel.is-open {
  display: block;
}

.grina-header .grina-search.wp-block-search {
  max-width: var(--grina-content-width);
  margin: 0 auto;
}

.grina-header .grina-search.wp-block-search .wp-block-search__inside-wrapper {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Icon buttons. Woodmart styles every <button> (#F3F3F3 fill, 42px min-height,
   5px 20px padding, its radius, uppercase, its own hover), so both declare the
   whole list, hover included. */
.grina-header .grina-search.wp-block-search .wp-block-search__button,
.grina-header .grina-cart .wc-block-mini-cart__button {
  margin: 0;
  min-height: 0;
  padding: var(--grina-space-2xs);
  background: transparent;
  color: var(--grina-color-pine);
  border: 0;
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  text-transform: none;
}

.grina-header .grina-search.wp-block-search .wp-block-search__button:hover,
.grina-header .grina-cart .wc-block-mini-cart__button:hover {
  background: var(--grina-color-sage-1);
  color: var(--grina-color-pine);
}

/* Woodmart gives the mini-cart block a 20px bottom margin, which lifted it 10px. */
.grina-header .grina-cart {
  margin: 0;
}

.grina-header .grina-cart .wc-block-mini-cart__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.grina-header .grina-cart .wc-block-mini-cart__button svg {
  width: 22px;
  height: 22px;
}

.grina-header .grina-cart .wc-block-mini-cart__badge {
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
}

/* Phone and tablet: logo, search, cart, menu; the nav becomes a drawer. */
@media (max-width: 1023px) {
  .grina-header .grina-header__account {
    display: none;
  }

  .grina-header .grina-icon-link--menu {
    display: flex;
  }

  .grina-header .grina-nav {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    right: 0;
    bottom: 0;
    z-index: 102;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--grina-space-md);
    width: min(360px, 100%);
    margin: 0;
    padding: var(--grina-space-md) var(--grina-gutter) var(--grina-space-xl);
    overflow-y: auto;
    background: var(--grina-color-paper);
  }

  .grina-header .grina-nav.is-open,
  .grina-header .grina-nav:target {
    display: flex;
  }

  .grina-header .grina-nav__close,
  .grina-header .grina-nav__contact {
    display: block;
  }

  /* Closing the drawer is a real control: a 44px pill with the cross, at the top right where the menu
     button was, not a line of small grey text (2026-10-14). */
  .grina-header .grina-nav__close {
    display: flex;
    justify-content: flex-end;
  }
  .grina-header .grina-nav__close a {
    display: inline-flex;
    align-items: center;
    gap: var(--grina-space-2xs);
    min-height: 44px;
    padding: 0 var(--grina-space-sm) 0 var(--grina-space-xs);
    border: var(--grina-border-calm);
    border-radius: var(--grina-radius-action);
    color: var(--grina-color-pine);
    font-weight: 700;
    text-decoration: none;
  }
  .grina-header .grina-nav__close a::before {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--grina-color-pine);
    -webkit-mask: url("icons/close.svg") center / contain no-repeat;
    mask: url("icons/close.svg") center / contain no-repeat;
  }
  /* The four intent tiles, compact in the drawer, and under the categories there (2026-10-28, Igor: "on mobile
     place this at the bottom"). */
  .grina-header .grina-mega__col--intent {
    order: 1;
  }
  .grina-header .grina-mega__col--intent .grina-mega__entry {
    min-height: 0;
    padding: var(--grina-space-xs) var(--grina-space-sm);
  }
  .grina-header .grina-mega__col--intent .grina-mega__entry::before {
    margin-bottom: var(--grina-space-2xs);
  }

  .grina-header .grina-nav__item--shop a::after,
  .grina-header .grina-nav__item--rituali a::after,
  .grina-header .grina-nav__item--pomoc a::after {
    content: none;
  }

  /* In the drawer the panels are simply the lists under their headings. */
  .grina-header .grina-mega--shop,
  .grina-header .grina-mega--rituali,
  .grina-header .grina-mega--pomoc {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--grina-space-md);
    width: auto;
    padding: 0 0 0 var(--grina-space-sm);
    border: 0;
    transform: none;
  }

  .grina-header .grina-mega__col--feature {
    display: none;
  }

  .grina-header .grina-mega__col--cats {
    grid-template-columns: 1fr;
  }

  .grina-header .grina-nav__contact a {
    color: var(--grina-color-pine);
  }

  html.grina-drawer-open {
    overflow: hidden;
  }

  /* The sticky header is a stacking context; while the drawer is open it must rise above
     Woodmart's fixed bars (the sticky add-to-cart sits at 340), under WordPress's admin bar. */
  html.grina-drawer-open .grina-header.grina-header {
    z-index: 1000;
  }

  html.grina-drawer-open .grina-header::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 101;
    background: var(--grina-color-pine);
    opacity: 0.4;
  }
}

/* ── Site shell: the footer (spec 2026-09-24 §4; on white since 2026-11-02) ──
   Grina's own card (owner, 2026-11-02: "HRANI ŽIVOT … ne vidljivo mi je i suviše stopljeno u futeru … na beloj pozadini,
   logo poravnat po levoj strani"): White ground, the logo, HRANI ŽIVOT. at display size with ŽIVOT in Leaf, a Leaf rule,
   "Prirodno. Čisto. Za tebe."; then the links, contact and legal lines in Pine and Body on white. */
.grina-footer.grina-footer {
  margin: 0;
  padding: 0 var(--grina-gutter) var(--grina-space-lg);
  background: var(--grina-color-white);
  border-top: 1px solid var(--grina-color-hairline);
  color: var(--grina-color-body);
  font-family: var(--wp--preset--font-family--grina);
}

.grina-footer .grina-footer__band,
.grina-footer .grina-footer__cols,
.grina-footer .grina-footer__contact,
.grina-footer .grina-footer__legal {
  max-width: var(--grina-content-width);
  margin: 0 auto;
}

/* The band sits on the link columns' own grid (2026-11-04, Igor: the button and a lone link floating at the right edge
   read as "shit"): the brand and its one action across the first three columns, the guides in the fourth, above
   "Grina". Bottom-aligned, so the button and the guides' link share a line. */
.grina-footer .grina-footer__band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--grina-space-lg);
  padding: var(--grina-space-3xl) 0 var(--grina-space-2xl);
  border-bottom: 1px solid var(--grina-color-hairline);
}

.grina-footer .grina-footer__band > .grina-footer__pitch-wrap {
  grid-column: 1 / 4;
}

.grina-footer .grina-footer__band > .grina-footer__guides {
  grid-column: 4;
}

.grina-footer .grina-footer__pitch-wrap {
  margin: 0;
}

.grina-footer .grina-footer__logo {
  margin: 0 0 var(--grina-space-lg);
}

.grina-footer .grina-footer__logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* The one loud thing: HRANI ŽIVOT. on one line, as on Grina's card. */
.grina-footer .grina-footer__brand.grina-footer__brand {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-display);
  letter-spacing: var(--grina-tracking-display);
  white-space: nowrap;
}

/* Grina's card has ŽIVOT in her green, Leaf, the rule's colour (Milica, 2026-11-04: "kao ova crtica"; Igor: "vratiću
   na onu svetlozelenu"). Grove (5.1:1) was our pick for contrast; Leaf is 2.05:1 on white, and the gate refuses Leaf as
   text. HRANI ŽIVOT. is Grina's wordmark, and WCAG 1.4.3 exempts text that is part of a logo, so this one line is
   allowed by name, at display size only. */
.grina-footer .grina-footer__accent {
  color: var(--grina-color-leaf); /* lint-allow leaf-misuse: the HRANI ŽIVOT. wordmark, WCAG 1.4.3 logotype exception (Igor, 2026-11-04) */
}

.grina-footer .grina-footer__brand.grina-footer__brand::after {
  content: "";
  display: block;
  width: 96px;
  height: 4px;
  margin: var(--grina-space-md) 0 var(--grina-space-md);
  background: var(--grina-color-leaf);
  border-radius: var(--grina-radius-action);
}

.grina-footer .grina-footer__pitch.grina-footer__pitch {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: 500;
  line-height: var(--grina-leading-sekcija);
}

.grina-footer .grina-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grina-space-lg);
  padding: var(--grina-space-xl) 0;
}

.grina-footer .grina-footer__col {
  margin: 0;
}

.grina-footer .grina-footer__heading {
  margin: 0 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  line-height: var(--grina-leading-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

.grina-footer .grina-footer__links {
  display: grid;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-footer .grina-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--grina-space-md);
  padding: var(--grina-space-md) 0;
  border-top: 1px solid var(--grina-color-hairline);
}

.grina-footer .grina-footer__address {
  margin: 0;
}

.grina-footer .grina-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--grina-space-md);
  padding-top: var(--grina-space-sm);
}

.grina-footer.grina-footer p {
  margin: 0;
  color: var(--grina-color-body);
}

.grina-footer.grina-footer a {
  color: var(--grina-color-body);
  text-decoration: none;
}

.grina-footer.grina-footer a:hover,
.grina-footer.grina-footer a:focus-visible {
  color: var(--grina-color-pine);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The band's button: Pine on white (a Leaf one beside the Leaf ŽIVOT and rule was too much green). */
.grina-footer.grina-footer .grina-btn--secondary .wp-block-button__link {
  color: var(--grina-color-paper);
  text-decoration: none;
}

/* The brand's one action, under its tagline. */
.grina-footer .grina-footer__shop.grina-footer__shop {
  margin: var(--grina-space-lg) 0 0;
}

/* The guides: what they are, then the way in. Quiet next to the wordmark; the footer's email sign-up. */
.grina-footer .grina-footer__guides {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
}

.grina-footer .grina-footer__guides p {
  margin: 0;
}

.grina-footer .grina-footer__guides .grina-footer__guides-title {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
}

.grina-footer .grina-footer__guides .grina-footer__guides-text {
  color: var(--grina-color-body);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
}

.grina-footer.grina-footer .grina-footer__guides-link a {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.grina-footer.grina-footer .grina-footer__guides-link a:hover,
.grina-footer.grina-footer .grina-footer__guides-link a:focus-visible {
  text-decoration-thickness: 2px;
}

.grina-footer .grina-footer__social {
  gap: var(--grina-space-sm);
  margin: 0;
  padding: 0;
}

/* Woodmart's list styles put a bullet before each icon. */
.grina-footer .grina-footer__social li {
  margin: 0;
  list-style: none;
}

/* Logos-only icons carry each network's brand colour; ours are Pine. */
.grina-footer .grina-footer__social.is-style-logos-only .wp-social-link {
  color: var(--grina-color-pine);
}

@media (max-width: 1023px) {
  .grina-footer .grina-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .grina-footer .grina-footer__cols {
    grid-template-columns: 1fr;
  }
}

/* ── Woodmart's list-item margin, and the tablet menu ─────────────────────
   Measured on staging: base.css gives every li a 10px bottom margin, which put
   the menu items at three heights and padded the footer lists. */
.grina-footer .grina-footer__links li {
  margin: 0;
}

/* ── Video facade: a thumbnail and a play button until someone asks ──────
   Served by inc/video-facade.php in place of every YouTube core/embed. */
.grina-video.grina-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-card);
}

.grina-video .grina-video__play {
  position: absolute;
  inset: 0;
  display: block;
}

.grina-video .grina-video__play:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: -4px;
}

.grina-video .grina-video__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The play control is an action, so Leaf is its correct fill. */
.grina-video .grina-video__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: var(--grina-color-leaf);
  border-radius: var(--grina-radius-action);
  transition: transform var(--grina-duration) ease;
}

.grina-video .grina-video__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grina-color-ink-on-leaf);
  clip-path: polygon(40% 30%, 40% 70%, 72% 50%);
}

.grina-video .grina-video__play:hover .grina-video__icon {
  transform: translate(-50%, calc(-50% + var(--grina-lift-hover)));
}

.grina-video .grina-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .grina-video .grina-video__icon {
    transition: none;
  }
}

/* ── Section shell: 1240 content width, 28 gutter, 44 vertical rhythm ──── */
.grina-section.grina-section {
  max-width: var(--grina-content-width);
  margin: 0 auto;
  padding: var(--grina-space-xl) var(--grina-gutter);
}

/* Headings break into even lines and paragraphs avoid a lone last word (2026-10-14: "vrata" and a
   trailing "i" sat alone in the hero). */
.grina-section.grina-section h1,
.grina-section.grina-section h2,
.grina-section.grina-section h3 {
  text-wrap: balance;
}

.grina-section.grina-section p {
  text-wrap: pretty;
}

/* Phones: Woodmart's container already adds 15px a side, so the full gutter
   left 304 of 390px for content (measured 2026-10-03). */
@media (max-width: 559px) {
  .grina-section.grina-section {
    padding: var(--grina-space-lg) var(--grina-space-sm);
  }
}

.grina-section .grina-section__head {
  align-items: baseline;
  gap: var(--grina-space-sm);
  margin: 0 0 var(--grina-space-md);
}

.grina-section .grina-section__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  line-height: var(--grina-leading-naslov);
  letter-spacing: var(--grina-tracking-naslov);
}

.grina-section .grina-section__more {
  margin: 0;
}

/* A section's "more" link repeated at its foot, for phones only; there the one in the head steps aside (2026-10-28). */
.grina-section .grina-section__more--end {
  display: none;
  margin: var(--grina-space-md) 0 0;
}

/* Under it, three benefits with the hero's sprout bullet (phones only, 2026-10-28). */
.grina-section .grina-benefits--end {
  display: none;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: var(--grina-space-sm) 0 0;
}

.grina-section .grina-benefits .grina-benefit {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--grina-space-md);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-section .grina-benefits .grina-benefit::before {
  content: "";
  position: absolute;
  top: var(--grina-space-3xs);
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--grina-color-grove);
  -webkit-mask: url("icons/sprout.svg") center / contain no-repeat;
  mask: url("icons/sprout.svg") center / contain no-repeat;
}

@media (max-width: 559px) {
  .grina-section:has(.grina-section__more--end) .grina-section__head .grina-section__more {
    display: none;
  }
  .grina-section .grina-section__more--end,
  .grina-section .grina-benefits--end {
    display: flex;
  }
}

.grina-section .grina-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  margin: 0;
  padding: var(--grina-space-2xs) var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-body);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

/* ── Hero (v2, 2026-10-03): what you buy in the h1, proof, the cutoff ticket ─ */
.grina-hero.grina-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--grina-space-2xl);
  align-items: center;
  padding-top: var(--grina-space-2xl);
}

.grina-hero .grina-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-md);
}

.grina-hero .grina-hero__title {
  margin: 0;
  max-width: 14ch;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-display);
  letter-spacing: var(--grina-tracking-display);
}

/* Green text is Grove (4.95 on Paper), never Leaf (1.99). */
.grina-hero .grina-hero__accent {
  color: var(--grina-color-grove);
}

.grina-hero .grina-hero__lead {
  margin: 0;
  max-width: 44ch;
  color: var(--grina-color-body);
  font-size: var(--grina-size-sekcija);
  font-weight: 400;
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
}

.grina-hero .grina-hero__media {
  position: relative;
  margin: 0;
}

.grina-hero .grina-hero__main {
  margin: 0;
  overflow: hidden;
  border-radius: var(--grina-radius-card);
}

.grina-hero .grina-hero__main img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* The cutoff ticket: a Teal produce tag pinned over the photo's corner. Teal is
   the information role ("delivery, deadlines, doses"); Paper on Teal is 5.94. */
.grina-hero .grina-ticket {
  position: absolute;
  bottom: var(--grina-space-xl);
  left: calc(var(--grina-space-lg) * -1);
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  width: min(320px, 85%);
  margin: 0;
  padding: var(--grina-space-md) var(--grina-space-md) var(--grina-space-md) var(--grina-space-xl);
  background: var(--grina-color-teal);
  border-radius: var(--grina-radius-card);
  transform: rotate(-2deg);
}

/* The tag's punched hole. */
.grina-hero .grina-ticket::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--grina-space-sm);
  width: 10px;
  height: 10px;
  background: var(--grina-color-paper);
  border-radius: var(--grina-radius-action);
  transform: translateY(-50%);
}

.grina-hero .grina-ticket p {
  margin: 0;
  color: var(--grina-color-paper);
}

.grina-hero .grina-ticket .grina-ticket__label,
.grina-hero .grina-ticket .grina-ticket__meta {
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  letter-spacing: var(--grina-tracking-mono);
  line-height: var(--grina-leading-mono);
  text-transform: uppercase;
}

.grina-hero .grina-ticket .grina-ticket__big {
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-naslov);
  letter-spacing: var(--grina-tracking-naslov);
  font-variant-numeric: tabular-nums;
}

.grina-hero .grina-ticket .grina-ticket__text {
  line-height: var(--grina-leading-sekcija);
}

.grina-hero .grina-ticket .grina-ticket__meta {
  margin: var(--grina-space-2xs) 0 0;
  padding: var(--grina-space-2xs) 0 0;
  border-top: 1px dashed var(--grina-color-paper);
}

@media (max-width: 1023px) {
  .grina-hero.grina-section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-xl);
    padding-top: var(--grina-space-xl);
  }
  .grina-hero .grina-hero__main img {
    aspect-ratio: 4 / 3;
  }
  .grina-hero .grina-ticket {
    left: var(--grina-space-sm);
    bottom: var(--grina-space-sm);
  }
}

@media (max-width: 559px) {
  /* The phone size comes from the scale (tokens.css); only the tighter leading stays here. */
  .grina-hero .grina-hero__title {
    line-height: var(--grina-leading-naslov);
    letter-spacing: var(--grina-tracking-naslov);
  }
  .grina-hero .grina-hero__lead {
    font-size: var(--grina-size-telo);
    line-height: var(--grina-leading-telo);
    letter-spacing: 0;
  }
  .grina-hero .grina-ticket {
    position: relative;
    bottom: 0;
    left: 0;
    width: auto;
    margin: calc(var(--grina-space-xl) * -1) var(--grina-space-sm) 0;
  }
}

/* ── Articles: the three newest posts as rows, as in the mockup ──────────── */
.grina-articles .grina-articles__list .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--grina-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-articles .grina-articles__list li.wp-block-post {
  margin: 0;
}

.grina-articles .grina-article.grina-article {
  align-items: center;
  gap: var(--grina-space-sm);
  height: 100%;
  padding: var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-articles .grina-article .grina-article__img {
  flex: 0 0 78px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--grina-radius-field);
}

.grina-articles .grina-article .grina-article__img img {
  display: block;
  width: 78px;
  height: 62px;
  object-fit: cover;
}

.grina-articles .grina-article .grina-article__body {
  display: grid;
  gap: var(--grina-space-3xs);
  min-width: 0;
}

.grina-articles .grina-article .grina-article__meta {
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

.grina-articles .grina-article .grina-article__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-sekcija);
}

.grina-articles .grina-article .grina-article__title a {
  color: var(--grina-color-pine);
  text-decoration: none;
}

.grina-articles .grina-article .grina-article__title a:hover {
  color: var(--grina-color-grove);
}

/* ── Products: the bestsellers, WooCommerce's Product Collection ────────── */
.grina-products .grina-products__grid .wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grina-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-products .grina-products__grid li.wc-block-product {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: 0 0 var(--grina-space-sm);
  overflow: hidden;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  text-align: left;
  transition: transform var(--grina-duration) ease;
}

.grina-products .grina-products__grid li.wc-block-product:hover,
.grina-products .grina-products__grid li.wc-block-product:focus-within {
  transform: translateY(var(--grina-lift-hover));
}

.grina-products .grina-products__grid li.wc-block-product .wc-block-components-product-image {
  margin: 0 0 var(--grina-space-2xs);
}

.grina-products .grina-products__grid li.wc-block-product .wc-block-components-product-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Two lines kept for every name, so the prices and buttons line up across a row (2026-10-28). */
.grina-products .grina-products__grid li.wc-block-product .wp-block-post-title {
  min-height: 2lh;
  margin: 0;
  padding: 0 var(--grina-space-sm);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-sekcija);
  text-align: left;
}

.grina-products .grina-products__grid li.wc-block-product .wp-block-post-title a {
  color: var(--grina-color-pine);
  text-decoration: none;
}

/* Price in Pine. Woodmart colours the amount itself in its primary green
   (light green on Paper, measured on staging 2026-10-03), so the inner spans
   are named too. */
.grina-products .grina-products__grid li.wc-block-product .wc-block-components-product-price,
.grina-products .grina-products__grid li.wc-block-product .wc-block-components-product-price .amount,
.grina-products .grina-products__grid li.wc-block-product .wc-block-components-product-price bdi {
  margin: 0;
  padding: 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.grina-products .grina-products__grid li.wc-block-product .wc-block-components-product-price .amount,
.grina-products .grina-products__grid li.wc-block-product .wc-block-components-product-price bdi {
  padding: 0;
}

/* Add to cart: the whole width of the card, so a thumb finds it. */
.grina-products .grina-products__grid li.wc-block-product .wp-block-button {
  margin: auto var(--grina-space-sm) 0;
  text-align: left;
}

/* The primary button, Leaf fill with Ink on Leaf. Declares Woodmart's whole
   button property list, as the base button rule does. */
.grina-products .grina-products__grid li.wc-block-product .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: var(--grina-space-xs) var(--grina-space-md);
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
  border: var(--grina-border-calm);
  border-color: var(--grina-color-leaf);
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
}

.grina-products .grina-products__grid li.wc-block-product .wp-block-button__link:hover {
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
}

/* After an add, WooCommerce prints a "Pogledaj korpu" link under the button. */
.grina-products .grina-products__grid li.wc-block-product .added_to_cart {
  display: block;
  margin: var(--grina-space-2xs) 0 0;
  color: var(--grina-color-grove);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .grina-products .grina-products__grid li.wc-block-product {
    transition: none;
  }
  .grina-products .grina-products__grid li.wc-block-product:hover,
  .grina-products .grina-products__grid li.wc-block-product:focus-within {
    transform: none;
  }
}

/* Phones and tablets: the eight bestsellers become a shelf that scrolls
   sideways, the next card peeking in, instead of four rows to scroll past. */
@media (max-width: 1023px) {
  .grina-products .grina-products__grid .wc-block-product-template {
    display: flex;
    gap: var(--grina-space-sm);
    /* WooCommerce caps the list at max-width: 100%, which kept it inside the
       gutter and cancelled the bleed; the shelf runs to the screen's edges. */
    max-width: none;
    margin: 0 calc(var(--grina-gutter) * -1);
    padding: var(--grina-space-3xs) var(--grina-gutter) var(--grina-space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--grina-gutter);
    scrollbar-width: thin;
  }
  .grina-products .grina-products__grid li.wc-block-product {
    flex: 0 0 38%;
    scroll-snap-align: start;
  }
}

@media (max-width: 559px) {
  .grina-products .grina-products__grid .wc-block-product-template {
    margin: 0 calc(var(--grina-space-sm) * -1);
    padding: var(--grina-space-3xs) var(--grina-space-sm) var(--grina-space-sm);
    scroll-padding: 0 var(--grina-space-sm);
  }
  .grina-products .grina-products__grid li.wc-block-product {
    flex-basis: 78%;
  }
}

/* ── Today's homepage content, carried over (content/homepage/*) ──────────
   Converted core blocks inside <section class="grina-legacy grina-legacy--*">.
   Woodmart styles raw headings, paragraphs, lists and quotes, so every rule
   here is at least two classes deep and sets the font itself. */
.grina-legacy.grina-section h2,
.grina-legacy.grina-section h3 {
  margin: 0 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  text-transform: none;
}

.grina-legacy.grina-section h2 {
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  line-height: var(--grina-leading-naslov);
  letter-spacing: var(--grina-tracking-naslov);
}

.grina-legacy.grina-section h3 {
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
}

.grina-legacy.grina-section p,
.grina-legacy.grina-section li {
  margin: 0 0 var(--grina-space-xs);
  color: var(--grina-color-body);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
}

.grina-legacy.grina-section ul.wp-block-list {
  margin: 0 0 var(--grina-space-sm);
  padding-left: var(--grina-space-md);
}

.grina-legacy.grina-section a:not(.wp-block-button__link) {
  color: var(--grina-color-grove);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.grina-legacy.grina-section .wp-block-buttons {
  margin: var(--grina-space-xs) 0 var(--grina-space-md);
}

.grina-legacy.grina-section .wp-block-image,
.grina-legacy.grina-section .wp-block-video,
.grina-legacy.grina-section .wp-block-embed {
  margin: 0 0 var(--grina-space-md);
}

.grina-legacy.grina-section .wp-block-image img {
  border-radius: var(--grina-radius-card);
}

.grina-legacy.grina-section .wp-block-video video {
  display: block;
  width: 100%;
  border-radius: var(--grina-radius-card);
  background: var(--grina-color-pine);
}

.grina-legacy.grina-section .grina-words {
  color: var(--grina-color-grove);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
}

/* facts: today's "Činjenice" as a grid of Sage 1 cards */
.grina-legacy.grina-legacy--facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--grina-space-sm);
}

.grina-legacy.grina-legacy--facts > :not(.grina-card) {
  grid-column: 1 / -1;
}

.grina-legacy.grina-legacy--facts .grina-card .grina-card__title a {
  color: var(--grina-color-pine);
  text-decoration: none;
}

/* steps: the three how-tos, numbered 01/02/03 in the Numeral token (3.31 on
   Paper, judged at the large-text threshold, which Naslov is) */
.grina-legacy.grina-legacy--steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grina-space-lg);
  counter-reset: grina-step;
}

.grina-legacy.grina-legacy--steps > :not(.grina-step) {
  grid-column: 1 / -1;
}

.grina-legacy.grina-legacy--steps .grina-step {
  display: flex;
  flex-direction: column;
  counter-increment: grina-step;
}

.grina-legacy.grina-legacy--steps .grina-step::before {
  content: counter(grina-step, decimal-leading-zero);
  margin: 0 0 var(--grina-space-2xs);
  color: var(--grina-color-numeral);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-display);
  letter-spacing: var(--grina-tracking-display);
}

/* band: the quality standard on Pine, text left, video right */
.grina-legacy.grina-legacy--band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grina-space-lg);
  align-items: center;
  padding: var(--grina-space-xl) var(--grina-space-lg);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-card);
}

.grina-legacy.grina-legacy--band h2,
.grina-legacy.grina-legacy--band h3,
.grina-legacy.grina-legacy--band p {
  color: var(--grina-color-on-dark);
}

.grina-legacy.grina-legacy--band .grina-video,
.grina-legacy.grina-legacy--band .wp-block-embed {
  grid-column: -2 / -1;
  grid-row: 1 / span 6;
}

.grina-legacy.grina-legacy--band .grina-btn .wp-block-button__link {
  border-color: var(--grina-color-on-dark);
  color: var(--grina-color-on-dark);
}

/* experts: four quote cards */
.grina-legacy.grina-legacy--experts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grina-space-sm);
}

.grina-legacy.grina-legacy--experts > :not(.grina-quote) {
  grid-column: 1 / -1;
}

.grina-legacy.grina-legacy--experts .grina-quote {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-lg);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-legacy.grina-legacy--experts .grina-quote .wp-block-image {
  width: 56px;
  margin: 0;
}

.grina-legacy.grina-legacy--experts .grina-quote .wp-block-image img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--grina-radius-action);
}

.grina-legacy.grina-legacy--experts .grina-quote blockquote.wp-block-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
}

.grina-legacy.grina-legacy--experts .grina-quote blockquote.wp-block-quote cite {
  display: block;
  margin-top: var(--grina-space-xs);
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  font-style: normal;
  font-weight: 700;
}

/* deep: the long-form content, one reading column */
.grina-legacy.grina-legacy--deep.grina-section > * {
  max-width: 68ch;
}

.grina-legacy.grina-legacy--deep > .wp-block-image,
.grina-legacy.grina-legacy--deep > .wp-block-embed,
.grina-legacy.grina-legacy--deep > .grina-video,
.grina-legacy.grina-legacy--deep > .grina-card {
  max-width: 720px;
}

.grina-legacy.grina-legacy--deep > .grina-card {
  margin: 0 0 var(--grina-space-sm);
}

/* voices: client videos with their captions */
.grina-legacy.grina-legacy--voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grina-space-md);
}

.grina-legacy.grina-legacy--voices > :not(.grina-voice) {
  grid-column: 1 / -1;
}

.grina-legacy.grina-legacy--voices .grina-voice p {
  color: var(--grina-color-pine);
  font-weight: 700;
}

/* faq + accordions: core/details, hairline, 10 radius, a + that turns */
.grina-section details.grina-accordion {
  margin: 0 0 var(--grina-space-2xs);
  padding: 0;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
}

/* Woodmart gives every <summary> a 20px bottom margin (measured 2026-10-03):
   a closed question then sat in a box a third too tall. */
.grina-section details.grina-accordion summary {
  display: flex;
  justify-content: space-between;
  gap: var(--grina-space-sm);
  margin: 0;
  padding: var(--grina-space-sm) var(--grina-space-md);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.grina-section details.grina-accordion summary::-webkit-details-marker {
  display: none;
}

.grina-section details.grina-accordion summary::after {
  content: "+";
  color: var(--grina-color-grove);
  transition: transform var(--grina-duration) ease;
}

.grina-section details.grina-accordion[open] summary::after {
  transform: rotate(45deg);
}

.grina-section details.grina-accordion > :not(summary) {
  margin-left: var(--grina-space-md);
  margin-right: var(--grina-space-md);
}

.grina-section details.grina-accordion summary:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: -2px;
}

/* partners: the logos, quiet until hovered */
.grina-legacy.grina-section .grina-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--grina-space-md);
  align-items: center;
}

.grina-legacy.grina-section .grina-logos .wp-block-image {
  margin: 0;
}

.grina-legacy.grina-section .grina-logos img {
  display: block;
  max-height: 56px;
  width: auto;
  margin: 0 auto;
  border-radius: 0;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--grina-duration) ease, opacity var(--grina-duration) ease;
}

.grina-legacy.grina-section .grina-logos a:hover img,
.grina-legacy.grina-section .grina-logos a:focus-visible img {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .grina-section details.grina-accordion summary::after,
  .grina-legacy.grina-section .grina-logos img {
    transition: none;
  }
}

/* ══ Homepage v2 sections (2026-10-03) ═════════════════════════════════════ */

/* An in-page link ("Prvi put? Počni ovde" → #paketi) lands below Woodmart's sticky header (80px), not under it. */
.grina-section[id] {
  scroll-margin-top: var(--grina-space-3xl);
}

/* A section head with a short line under the title. */
.grina-section .grina-section__intro {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
}

.grina-section .grina-section__sub {
  margin: 0;
  color: var(--grina-color-quiet);
}

/* ── First order: three steps, then delivery by area, on one Sage 1 panel ── */
.grina-first .grina-first__panel {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xl);
  padding: var(--grina-space-2xl) var(--grina-space-xl);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-first .grina-first__head {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
}

.grina-first .grina-first__head .grina-eyebrow {
  background: var(--grina-color-paper);
}

.grina-first .grina-first__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grina-space-lg);
}

.grina-first .grina-first__step {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
}

.grina-first .grina-first__step p {
  margin: 0;
}

/* The route (2026-10-28): each step is a stop, an icon in a Paper disc, joined to the next by a dashed Grove path.
   The last stop, the table, is the one filled in Leaf. Decorative: the headings carry the steps. */
.grina-first .grina-first__step {
  position: relative;
}

.grina-first .grina-first__stop {
  position: relative;
  z-index: 1;
  width: var(--grina-space-2xl);
  height: var(--grina-space-2xl);
  margin: 0 0 var(--grina-space-xs);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
}

.grina-first .grina-first__stop::before {
  content: "";
  position: absolute;
  inset: var(--grina-space-sm);
  background: var(--grina-color-pine);
  -webkit-mask: var(--grina-first-icon) center / contain no-repeat;
  mask: var(--grina-first-icon) center / contain no-repeat;
}

.grina-first .grina-first__step:last-child .grina-first__stop {
  background: var(--grina-color-leaf);
  border-color: var(--grina-color-leaf);
}

.grina-first .grina-first__step:last-child .grina-first__stop::before {
  background: var(--grina-color-ink-on-leaf);
}

/* The path: from just past this stop to just short of the next, through the gap between columns. */
.grina-first .grina-first__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--grina-space-2xl) / 2);
  left: calc(var(--grina-space-2xl) + var(--grina-space-2xs));
  right: calc(var(--grina-space-lg) * -1 + var(--grina-space-2xs));
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--grina-color-grove) 0 6px, transparent 6px 12px);
  opacity: 0.5;
}

.grina-first .grina-first__stop--bag { --grina-first-icon: url("icons/bag.svg"); }
.grina-first .grina-first__stop--clock { --grina-first-icon: url("icons/clock.svg"); }
.grina-first .grina-first__stop--bowl { --grina-first-icon: url("icons/bowl.svg"); }

.grina-first .grina-first__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
  text-transform: none;
}

.grina-first .grina-first__text {
  max-width: 36ch;
  color: var(--grina-color-body);
}

/* Delivery by area: one Paper card, four columns split by hairlines. */
.grina-first .grina-zones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-first .grina-zone {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
  padding: var(--grina-space-md);
  border-left: var(--grina-border-calm);
}

.grina-first .grina-zone:first-child {
  border-left: 0;
}

.grina-first .grina-zone p {
  margin: 0;
}

/* Each area's icon in Grove: above its name in the four columns, beside it once the areas get wide (≤1023px). */
.grina-first .grina-zone .grina-zone__icon {
  width: var(--grina-space-md);
  height: var(--grina-space-md);
  margin: 0 0 var(--grina-space-2xs);
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-zone-icon) center / contain no-repeat;
  mask: var(--grina-zone-icon) center / contain no-repeat;
}

.grina-first .grina-zone__icon--pin { --grina-zone-icon: url("icons/pin.svg"); }
.grina-first .grina-zone__icon--home { --grina-zone-icon: url("icons/home.svg"); }
.grina-first .grina-zone__icon--truck { --grina-zone-icon: url("icons/truck.svg"); }
.grina-first .grina-zone__icon--sprout { --grina-zone-icon: url("icons/sprout.svg"); }

.grina-first .grina-zone .grina-zone__area {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-first .grina-zone .grina-zone__days {
  color: var(--grina-color-quiet);
  line-height: var(--grina-leading-sekcija);
}

/* The price is information about delivery: Teal (5.94 on Paper). */
.grina-first .grina-zone .grina-zone__price {
  margin: auto 0 0;
  padding: var(--grina-space-2xs) 0 0;
  color: var(--grina-color-teal);
  font-weight: 700;
}

.grina-first .grina-first__actions {
  gap: var(--grina-space-md);
  margin: 0;
}

.grina-first .grina-first__actions p {
  margin: 0;
}

/* The minimum order (alg_wc_oma_min_sum), stated before checkout does: urgency, so Clay. */
.grina-first .grina-first__minimum {
  display: flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  margin: 0;
  color: var(--grina-color-clay);
  font-weight: 700;
}

.grina-first .grina-first__minimum::before {
  content: "";
  flex: none;
  width: var(--grina-space-md);
  height: var(--grina-space-md);
  background: currentColor;
  -webkit-mask: url("icons/cash.svg") center / contain no-repeat;
  mask: url("icons/cash.svg") center / contain no-repeat;
}

@media (max-width: 1023px) {
  .grina-first .grina-first__panel {
    padding: var(--grina-space-xl) var(--grina-space-md);
  }
  .grina-first .grina-first__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-md);
  }
  /* Stacked, each step is its stop beside its words, and the path runs down from stop to stop. */
  .grina-first .grina-first__step {
    display: grid;
    grid-template-columns: var(--grina-space-2xl) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--grina-space-sm);
    row-gap: var(--grina-space-3xs);
  }
  .grina-first .grina-first__stop {
    grid-row: 1 / span 2;
    margin: 0;
  }
  .grina-first .grina-first__title {
    align-self: end;
    padding-top: var(--grina-space-2xs);
  }
  .grina-first .grina-first__step:not(:last-child)::after {
    top: calc(var(--grina-space-2xl) + var(--grina-space-2xs));
    right: auto;
    bottom: calc(var(--grina-space-md) * -1 + var(--grina-space-2xs));
    left: calc(var(--grina-space-2xl) / 2);
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, var(--grina-color-grove) 0 6px, transparent 6px 12px);
  }
  .grina-first .grina-zones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grina-first .grina-zone {
    display: grid;
    grid-template-columns: var(--grina-space-md) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--grina-space-xs);
  }
  .grina-first .grina-zone .grina-zone__icon {
    margin: 0;
  }
  .grina-first .grina-zone .grina-zone__days,
  .grina-first .grina-zone .grina-zone__price {
    grid-column: 2;
  }
  .grina-first .grina-zone:nth-child(3) {
    border-left: 0;
  }
  .grina-first .grina-zone:nth-child(n + 3) {
    border-top: var(--grina-border-calm);
  }
}

@media (max-width: 559px) {
  .grina-first .grina-zones {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-first .grina-zone {
    border-left: 0;
  }
  .grina-first .grina-zone:nth-child(n + 2) {
    border-top: var(--grina-border-calm);
  }
}

/* ── Why Grina: the one dark band. Photo left, the claim and four facts right ── */
.grina-why .grina-why__band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-card);
}

.grina-why .grina-why__img {
  margin: 0;
}

.grina-why .grina-why__img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.grina-why .grina-why__copy {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-md);
  margin: 0;
  padding: var(--grina-space-2xl);
}

.grina-why .grina-why__copy p {
  margin: 0;
}

.grina-why .grina-why__eyebrow {
  color: var(--grina-color-on-dark-quiet);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

.grina-why .grina-why__title {
  margin: 0;
  max-width: 16ch;
  color: var(--grina-color-on-dark);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-display);
  letter-spacing: var(--grina-tracking-display);
  text-transform: none;
}

.grina-why .grina-why__lead {
  max-width: 48ch;
  color: var(--grina-color-on-dark);
}

.grina-why .grina-why__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-sm);
  margin: var(--grina-space-xs) 0 0;
}

/* Each fact a quiet tile on the Pine panel, its Leaf icon first (third look, 2026-10-06). */
.grina-why .grina-why__fact {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
  padding: var(--grina-space-md);
  border: 1px solid var(--grina-color-on-dark-quiet);
  border-radius: var(--grina-radius-field);
  transition: transform var(--grina-duration);
}

.grina-why .grina-why__fact:hover {
  transform: translateY(-3px);
}

.grina-why .grina-why__fact::before {
  content: "";
  width: 28px;
  height: 28px;
  margin: 0 0 var(--grina-space-2xs);
  background: var(--grina-color-leaf);
}

.grina-why .grina-why__fact--seed::before {
  -webkit-mask: url("icons/sprout.svg") center / contain no-repeat;
  mask: url("icons/sprout.svg") center / contain no-repeat;
}

.grina-why .grina-why__fact--ready::before {
  -webkit-mask: url("icons/bowl.svg") center / contain no-repeat;
  mask: url("icons/bowl.svg") center / contain no-repeat;
}

.grina-why .grina-why__fact--glass::before {
  -webkit-mask: url("icons/jar.svg") center / contain no-repeat;
  mask: url("icons/jar.svg") center / contain no-repeat;
}

.grina-why .grina-why__fact--since::before {
  -webkit-mask: url("icons/leaf.svg") center / contain no-repeat;
  mask: url("icons/leaf.svg") center / contain no-repeat;
}

/* The place, pinned to the photo's corner like a produce label. */
.grina-why .grina-why__place {
  position: absolute;
  bottom: var(--grina-space-md);
  left: var(--grina-space-md);
  margin: 0;
  padding: var(--grina-space-2xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  letter-spacing: var(--grina-tracking-mono);
  line-height: var(--grina-leading-mono);
  text-transform: uppercase;
}

.grina-why .grina-why__fact .grina-why__label {
  color: var(--grina-color-on-dark);
  font-weight: 700;
}

.grina-why .grina-why__fact .grina-why__text {
  color: var(--grina-color-on-dark-quiet);
}

.grina-why .grina-why__more a {
  color: var(--grina-color-on-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.grina-why .grina-why__more a:focus-visible {
  outline: 2px solid var(--grina-color-on-dark);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .grina-why .grina-why__band {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-why .grina-why__place {
    top: var(--grina-space-md);
    bottom: auto;
  }
  .grina-why .grina-why__img img {
    aspect-ratio: 16 / 9;
  }
  .grina-why .grina-why__copy {
    padding: var(--grina-space-xl) var(--grina-space-md);
  }
}

@media (max-width: 559px) {
  /* The phone size comes from the scale (tokens.css); only the tighter leading stays here. */
  .grina-why .grina-why__title {
    line-height: var(--grina-leading-naslov);
    letter-spacing: var(--grina-tracking-naslov);
  }
  .grina-why .grina-why__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Reviews: the rating, three Google reviews, the client videos ────────── */
/* Reviews (third look, 2026-10-06): the title and a rating card head the section; three equal cards below. */
.grina-reviews.grina-section {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xl);
}

.grina-reviews .grina-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--grina-space-md) var(--grina-space-xl);
  margin: 0;
}

.grina-reviews .grina-reviews__head p {
  margin: 0;
}

.grina-reviews .grina-reviews__intro {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
}

.grina-reviews .grina-rating.grina-reviews__card {
  flex-direction: row;
  align-items: center;
  gap: var(--grina-space-md);
  padding: var(--grina-space-sm) var(--grina-space-lg);
  background: var(--grina-color-sage-1);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-reviews .grina-reviews__meta {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
}

.grina-reviews .grina-rating {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
}

.grina-reviews .grina-rating .grina-rating__score {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-display);
  letter-spacing: var(--grina-tracking-display);
  font-variant-numeric: tabular-nums;
}

/* The stars are drawn; the words beside them are read out (and hidden). */
.grina-reviews .grina-rating .grina-rating__stars {
  color: var(--grina-color-grove);
  font-size: var(--grina-size-sekcija);
  letter-spacing: 0.1em;
  line-height: var(--grina-leading-sekcija);
}

/* Google's yellow stars, as in the hero's rating (2026-10-13). */
.grina-reviews .grina-rating .grina-rating__stars::before {
  content: "";
  display: block;
  width: 120px;
  height: 24px;
  background: left center / contain no-repeat;
}

.grina-reviews .grina-rating .grina-rating__stars--5::before {
  background-image: url("icons/google-stars-5.svg");
}

.grina-reviews .grina-rating .grina-rating__stars--4::before {
  background-image: url("icons/google-stars-4.svg");
}

.grina-reviews .grina-rating .grina-rating__words {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.grina-reviews .grina-rating .grina-rating__count {
  color: var(--grina-color-quiet);
}

/* The themes (2026-10-13: "categorize the reviews by 3-4 most popular categories"): radios and :has(), no
   script; without :has() the first theme's reviews show. A review can sit under more than one theme. */
.grina-reviews .grina-reviews__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-2xs);
  min-width: 0;
  margin: calc(var(--grina-space-md) * -1) 0 0;
  padding: 0;
  border: 0;
}

.grina-reviews .grina-reviews__topics + .grina-reviews__list {
  margin-top: calc(var(--grina-space-md) * -1);
}

.grina-reviews .grina-reviews__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.grina-reviews .grina-reviews__topic {
  position: relative;
  padding: var(--grina-space-2xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-pine);
  font-weight: 700;
  cursor: pointer;
}

.grina-reviews .grina-reviews__topic:hover {
  background: var(--grina-color-sage-1);
}

.grina-reviews .grina-reviews__topic input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.grina-reviews .grina-reviews__topic:has(input:checked) {
  background: var(--grina-color-pine);
  border-color: var(--grina-color-pine);
  color: var(--grina-color-paper);
}

.grina-reviews .grina-reviews__topic:has(input:focus-visible) {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-reviews .grina-reviews__list .grina-review {
  display: none;
}

.grina-reviews .grina-reviews__list .grina-review.grina-review--ukus,
.grina-reviews:has(input[value="ljudi"]:checked) .grina-reviews__list .grina-review.grina-review--ljudi,
.grina-reviews:has(input[value="dostava"]:checked) .grina-reviews__list .grina-review.grina-review--dostava {
  display: flex;
}

.grina-reviews:has(input[value="ljudi"]:checked) .grina-reviews__list .grina-review.grina-review--ukus:not(.grina-review--ljudi),
.grina-reviews:has(input[value="dostava"]:checked) .grina-reviews__list .grina-review.grina-review--ukus:not(.grina-review--dostava) {
  display: none;
}

.grina-reviews .grina-reviews__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grina-space-md);
  align-items: stretch;
  margin: 0;
}

.grina-reviews .grina-review {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
  padding: var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

/* A large Grove quote mark opens each card; the reviewer sits at the foot, whatever the length. */
.grina-reviews .grina-review {
  position: relative;
  padding: var(--grina-space-lg);
  transition: transform var(--grina-duration);
}

.grina-reviews .grina-review:hover {
  transform: translateY(-3px);
}

.grina-reviews .grina-review::after {
  content: "\201E" / "";
  position: absolute;
  top: var(--grina-space-xs);
  right: var(--grina-space-md);
  color: var(--grina-color-on-dark-quiet);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: 1;
}

.grina-reviews .grina-review .grina-review__by {
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  margin: auto 0 0;
  padding: var(--grina-space-sm) 0 0;
  border-top: var(--grina-border-calm);
}

/* The reviewer's Google profile picture (2026-10-13), round, as Google shows it. */
.grina-reviews .grina-review .grina-review__photo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: var(--grina-color-sage-2);
  border-radius: var(--grina-radius-action);
}

.grina-reviews .grina-review .grina-review__photo img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.grina-reviews .grina-review .grina-review__who {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.grina-reviews .grina-review .grina-review__who .grina-review__name {
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* "Google recenzija" with Google's G, the way the hero's rating reads. */
.grina-reviews .grina-review .grina-review__source {
  display: flex;
  align-items: center;
  gap: var(--grina-space-3xs);
  color: var(--grina-color-quiet);
}

.grina-reviews .grina-review .grina-review__source::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("icons/google.svg") center / contain no-repeat;
}

.grina-reviews .grina-review p {
  margin: 0;
}

.grina-reviews .grina-review .grina-review__text {
  position: relative;
  color: var(--grina-color-pine);
}

/* Every review shown is a five-star one: the stars head the card (drawn, not read). */
.grina-reviews .grina-review .grina-review__text::before {
  content: "";
  display: block;
  width: 80px;
  height: 16px;
  margin: 0 0 var(--grina-space-xs);
  background: url("icons/google-stars-5.svg") left center / contain no-repeat;
}

.grina-reviews .grina-review .grina-review__name {
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

/* Below 1024px the three cards become a sideways row with the next one peeking in. */
@media (max-width: 1023px) {
  .grina-reviews .grina-reviews__list {
    display: flex;
    margin: 0 calc(var(--grina-space-sm) * -1);
    padding: 0 var(--grina-space-sm) var(--grina-space-2xs);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--grina-space-sm);
    scrollbar-width: none;
  }
  .grina-reviews .grina-review {
    flex: 0 0 min(80%, 360px);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-reviews .grina-review {
    transition: none;
  }
}

/* ── Experts: four quotes, two by two, no box (2026-10-31, Igor: "all 4 here and make font a bit smaller") ── */
.grina-experts .grina-experts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-xl) var(--grina-space-2xl);
  margin: var(--grina-space-md) 0 0;
}

.grina-experts .grina-expert {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--grina-space-md);
  margin: 0;
  padding: var(--grina-space-md) 0 0;
  border-top: 2px solid var(--grina-color-grove);
}

.grina-experts .grina-expert p {
  margin: 0;
}

.grina-experts .grina-expert .grina-expert__quote {
  color: var(--grina-color-pine);
  font-size: calc(var(--grina-size-sekcija) * 0.8);
  font-weight: 500;
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
}

.grina-experts .grina-expert__person {
  align-items: center;
  gap: var(--grina-space-sm);
  margin: 0;
}

.grina-experts .grina-expert__photo {
  flex: 0 0 auto;
  margin: 0;
}

.grina-experts .grina-expert__photo img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--grina-radius-action);
}

.grina-experts .grina-expert__who {
  margin: 0;
}

.grina-experts .grina-expert__who .grina-expert__name {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-experts .grina-expert__who .grina-expert__role {
  color: var(--grina-color-quiet);
}

@media (max-width: 1023px) {
  .grina-experts .grina-experts__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-xl);
  }
}

/* One expert at a time (assets/experts.js, 2026-11-01): a Paper card per quote. The four faces above the quote switch
   between them; beside the quote, past a hairline, who said it: their photo in a circle, name and role. (A portrait
   filling the card's start became a close-up of a face, on a phone and then on a desktop.) On a desktop the cards
   share one grid cell (the card holds the longest quote, a switch moves nothing); on a phone only the current card
   is in the flow, so a short quote leaves no empty card, and the faces above it stay where they were tapped. */
.grina-experts .grina-experts__list.is-one {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.grina-experts .is-one .grina-expert {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "faces person" "quote person";
  gap: var(--grina-space-md) var(--grina-space-xl);
  padding: var(--grina-space-lg) var(--grina-space-xl);
  background: var(--grina-color-paper);
  border: 0;
  border-radius: var(--grina-radius-card);
  visibility: hidden;
}

.grina-experts .is-one .grina-expert.is-current {
  visibility: visible;
}

.grina-experts .is-one .grina-expert__person {
  grid-area: person;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--grina-space-sm);
  padding-left: var(--grina-space-xl);
  border-left: var(--grina-border-calm);
}

.grina-experts .is-one .grina-expert__photo img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 50%;
}

.grina-experts .is-one .grina-experts__faces {
  grid-area: faces;
  display: flex;
  gap: var(--grina-space-xs);
}

.grina-experts .is-one .grina-expert .grina-expert__quote {
  grid-area: quote;
  align-self: start;
  max-width: 64ch;
  font-size: calc(var(--grina-size-sekcija) * 0.85);
}

/* A face: 48px round, the current one ringed in Grove; Woodmart's button chrome and dotted focus ring off. */
.grina-experts .grina-experts__face.grina-experts__face {
  --wd-otl-style: solid;
  --wd-otl-width: 2px;
  --wd-otl-color: var(--grina-color-teal);
  --wd-otl-offset: 3px;
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--grina-color-sage-1);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.grina-experts .grina-experts__face.grina-experts__face[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--grina-color-paper), 0 0 0 4px var(--grina-color-grove);
  cursor: default;
}

.grina-experts .grina-experts__face.grina-experts__face:not([aria-current="true"]):hover {
  box-shadow: 0 0 0 2px var(--grina-color-paper), 0 0 0 4px var(--grina-color-sage-2);
}

.grina-experts .grina-experts__face.grina-experts__face:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 4px;
}

.grina-experts .grina-experts__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

/* A tablet and a phone: who said it goes under the quote, without the photo (the ringed face above says it). */
@media (max-width: 1023px) {
  .grina-experts .is-one .grina-expert {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "faces" "quote" "person";
  }
  .grina-experts .is-one .grina-expert__person {
    padding-left: 0;
    border-left: 0;
  }
  .grina-experts .is-one .grina-expert__photo {
    display: none;
  }
}

/* A phone: only the current card is in the flow (2026-11-01, Igor: "mobile is good"). */
@media (max-width: 767px) {
  .grina-experts .is-one .grina-expert {
    gap: var(--grina-space-sm);
    padding: var(--grina-space-md);
  }
  .grina-experts .is-one .grina-expert:not(.is-current) {
    display: none;
  }
}

/* ── Guides: two how-to cards and the recipe books ───────────────────────── */
.grina-guides .grina-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grina-space-sm);
  margin: 0;
}

.grina-guides .grina-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  transition: transform var(--grina-duration) ease;
}

.grina-guides .grina-guide:hover,
.grina-guides .grina-guide:focus-within {
  transform: translateY(var(--grina-lift-hover));
}

.grina-guides .grina-guide .grina-guide__img {
  margin: 0;
}

.grina-guides .grina-guide .grina-guide__img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.grina-guides .grina-guide .grina-guide__body {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: var(--grina-space-md);
}

.grina-guides .grina-guide .grina-guide__body p {
  margin: 0;
}

.grina-guides .grina-guide .grina-guide__eyebrow {
  color: var(--grina-color-grove);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

.grina-guides .grina-guide .grina-guide__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
  text-transform: none;
}

.grina-guides .grina-guide .grina-guide__title a {
  color: var(--grina-color-pine);
  text-decoration: none;
}

/* The whole card is the link's hit area. */
.grina-guides .grina-guide .grina-guide__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.grina-guides .grina-guide .grina-guide__title a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-guides .grina-guide .grina-guide__text {
  color: var(--grina-color-body);
}

/* The recipe books: two covers fanned on Sage 2, cut by the card's top edge. */
.grina-guides .grina-guide--books {
  background: var(--grina-color-sage-2);
}

.grina-guides .grina-guide__covers {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: var(--grina-space-md) var(--grina-space-md) 0;
  overflow: hidden;
}

.grina-guides .grina-guide__covers .grina-guide__cover {
  flex: 0 0 40%;
  margin: 0;
  transform: rotate(-5deg) translateY(var(--grina-space-md));
  transition: transform var(--grina-duration) ease;
}

.grina-guides .grina-guide__covers .grina-guide__cover + .grina-guide__cover {
  margin: 0 0 0 calc(var(--grina-space-lg) * -1);
  transform: rotate(4deg) translateY(var(--grina-space-sm));
}

.grina-guides .grina-guide--books:hover .grina-guide__cover {
  transform: rotate(-7deg) translateY(var(--grina-space-2xs));
}

.grina-guides .grina-guide--books:hover .grina-guide__cover + .grina-guide__cover {
  transform: rotate(6deg) translateY(0);
}

.grina-guides .grina-guide__covers .grina-guide__cover img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
}

@media (prefers-reduced-motion: reduce) {
  .grina-guides .grina-guide,
  .grina-guides .grina-guide__covers .grina-guide__cover {
    transition: none;
  }
  .grina-guides .grina-guide:hover,
  .grina-guides .grina-guide:focus-within {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .grina-guides .grina-guides__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grina-guides .grina-guide--books {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }
  .grina-guides .grina-guide--books .grina-guide__covers {
    flex: 0 0 45%;
  }
}

@media (max-width: 559px) {
  .grina-guides .grina-guides__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-guides .grina-guide--books {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── FAQ: the question list beside a heading that stays in view ─────────── */
.grina-faq.grina-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--grina-space-xl) var(--grina-space-2xl);
  align-items: start;
}

.grina-faq .grina-faq__intro {
  position: sticky;
  top: var(--grina-space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
}

.grina-faq .grina-faq__intro p {
  margin: 0;
}

.grina-faq .grina-faq__intro .grina-faq__text {
  color: var(--grina-color-body);
}

.grina-faq .grina-faq__intro .grina-faq__contact a {
  color: var(--grina-color-grove);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.grina-faq .grina-faq__list {
  margin: 0;
}

.grina-faq .grina-faq__list details.grina-accordion p {
  margin: 0 var(--grina-space-md) var(--grina-space-md);
  color: var(--grina-color-body);
  line-height: var(--grina-leading-telo);
}

@media (max-width: 1023px) {
  .grina-faq.grina-section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-lg);
  }
  .grina-faq .grina-faq__intro {
    position: static;
  }
}

/* goals: six tiles; the icon in a Sage 2 disc, drawn as a Pine mask (Grove may not be a fill); the label's link covers the tile. */
.grina-goals .grina-goals__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grina-space-sm);
  margin: 0;
}

.grina-goals .grina-goal {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "img label price" "img name name";
  align-content: center;
  align-items: center;
  gap: 0 var(--grina-space-sm);
  margin: 0;
  padding: var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  transition: transform var(--grina-duration) ease;
}

.grina-goals .grina-goal:hover,
.grina-goals .grina-goal:focus-within {
  transform: translateY(var(--grina-lift-hover));
}

.grina-goals .grina-goal p {
  margin: 0;
}

/* 2026-10-28: the package's own photo where the icon disc was (Igor: photos instead of icons). */
.grina-goals .grina-goal .grina-goal__img {
  grid-area: img;
  width: 64px;
  height: 64px;
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-sage-2);
  border-radius: var(--grina-radius-card);
}

.grina-goals .grina-goal .grina-goal__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grina-goals .grina-goal .grina-goal__label {
  grid-area: label;
  margin: 0;
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
  text-transform: none;
}

.grina-goals .grina-goal .grina-goal__label a {
  color: var(--grina-color-pine);
  text-decoration: none;
}

.grina-goals .grina-goal .grina-goal__label a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.grina-goals .grina-goal .grina-goal__label a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-goals .grina-goal .grina-goal__name {
  grid-area: name;
  color: var(--grina-color-quiet);
}

.grina-goals .grina-goal .grina-goal__price {
  grid-area: price;
  color: var(--grina-color-pine);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 2026-10-13: "Gotovi paketi" merged in. Two groups under one title, each a small heading over its tiles,
   every tile the same: icon, what it is for, the package's name, the price. */
.grina-goals .grina-goals__group {
  margin: var(--grina-space-lg) 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: 1.4;
  text-transform: none;
}

.grina-goals .grina-section__head + .grina-goals__group {
  margin-top: 0;
}

.grina-goals .grina-goals__note {
  margin: var(--grina-space-md) 0 0;
  color: var(--grina-color-quiet);
}

@media (prefers-reduced-motion: reduce) {
  .grina-goals .grina-goal {
    transition: none;
  }
  .grina-goals .grina-goal:hover,
  .grina-goals .grina-goal:focus-within {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .grina-goals .grina-goals__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .grina-goals .grina-goals__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-xs);
  }
  .grina-goals .grina-goal {
    padding: var(--grina-space-sm);
  }
}

/* baskets: three receipts. Lines in tabular figures, a dashed rule, the total in Pine, a Teal stamp. */
.grina-baskets .grina-baskets__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grina-space-sm);
  margin: var(--grina-space-md) 0 0;
}

.grina-baskets .grina-basket {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  transition: transform var(--grina-duration);
}

.grina-baskets .grina-basket:hover {
  transform: translateY(-3px);
}

/* The package's own photo on top (real packages, 2026-10-06). */
.grina-baskets .grina-basket .grina-basket__img {
  margin: 0;
}

.grina-baskets .grina-basket .grina-basket__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  object-fit: cover;
}

.grina-baskets .grina-basket .grina-basket__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0;
  padding: var(--grina-space-md);
}

.grina-baskets .grina-basket p {
  margin: 0;
}

.grina-baskets .grina-basket .grina-basket__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-baskets .grina-basket .grina-basket__line {
  color: var(--grina-color-quiet);
}

.grina-baskets .grina-basket .grina-basket__items {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: var(--grina-space-2xs) 0 0;
  padding: var(--grina-space-sm) 0;
  border-top: 1px dashed var(--grina-color-hairline);
  border-bottom: 1px dashed var(--grina-color-hairline);
}

.grina-baskets .grina-basket .grina-basket__total {
  display: flex;
  gap: var(--grina-space-2xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--grina-leading-sekcija);
}

/* What is inside, one line each, a Grove sprout as the bullet. */
.grina-baskets .grina-basket .grina-basket__item {
  position: relative;
  padding: 0 0 0 var(--grina-space-md);
  color: var(--grina-color-body);
  line-height: var(--grina-leading-sekcija);
}

.grina-baskets .grina-basket .grina-basket__item::before {
  content: "";
  position: absolute;
  top: var(--grina-space-3xs);
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--grina-color-grove);
  -webkit-mask: url("icons/sprout.svg") center / contain no-repeat;
  mask: url("icons/sprout.svg") center / contain no-repeat;
}

.grina-baskets .grina-basket .grina-basket__more {
  text-align: center;
}

.grina-baskets .grina-basket .grina-basket__total-sum {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

.grina-baskets .grina-basket .grina-basket__total {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
}

.grina-baskets .grina-basket .grina-basket__total-label {
  flex: 1 1 auto;
}

.grina-baskets .grina-basket .grina-basket__free {
  align-self: flex-start;
  padding: var(--grina-space-3xs) var(--grina-space-xs);
  background: var(--grina-color-teal);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

/* The add button: the primary action, Leaf fill with Ink on Leaf; Woodmart styles every <button>. */
.grina-baskets .grina-basket button.grina-basket__add {
  width: 100%;
  min-height: 0;
  margin: auto 0 0;
  padding: var(--grina-space-xs) var(--grina-space-md);
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
  border: 0;
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
  text-transform: none;
  cursor: pointer;
}

.grina-baskets .grina-basket button.grina-basket__add:hover {
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
}

.grina-baskets .grina-basket button.grina-basket__add:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-baskets .grina-basket button.grina-basket__add[aria-busy="true"],
.grina-baskets .grina-basket button.grina-basket__add:disabled {
  cursor: default;
  opacity: 0.6;
}

.grina-baskets .grina-basket .grina-basket__status {
  color: var(--grina-color-clay);
}

/* Empty, it is collapsed but stays in the accessibility tree, so what is written into it later is announced. */
.grina-baskets .grina-basket {
  position: relative;
}

.grina-baskets .grina-basket .grina-basket__status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 1023px) {
  .grina-baskets .grina-baskets__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* After an AJAX add, until the mini-cart has the new cart (assets/cart-progress.js): the old lines dimmed,
   an empty cart's "prazna" hidden, and a line saying it is on its way. */
.grina-cart-updating .wc-block-mini-cart__drawer .wc-block-mini-cart__items,
.grina-cart-updating .wc-block-mini-cart__drawer .grina-cart-progress,
.grina-cart-updating .wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s;
}

.grina-cart-updating .wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper > * {
  visibility: hidden;
}

.grina-cart-updating .wc-block-mini-cart__drawer .wc-block-mini-cart__title::after,
.grina-cart-updating .wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper::before {
  content: "Dodajemo u korpu…";
  display: block;
  margin-top: var(--grina-space-2xs);
  color: var(--grina-color-teal);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-align: center;
}

.grina-cart-updating .wc-block-mini-cart__drawer .wc-block-mini-cart__title::after {
  text-align: left;
}

/* The mini-cart line: the minimum (Clay, it blocks the order) or the free-delivery progress (Teal). Since
   2026-10-29 (Igor: the bottom half "a bit weird and too big") it is the footer's first row, not a card above it:
   the footer's rule moves over it, and the footer drops its own. */
.wc-block-mini-cart__drawer .grina-cart-progress {
  margin: 0;
  padding: var(--grina-space-xs) var(--grina-space-sm) 0;
  border-top: var(--grina-border-calm);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-sekcija);
}

.wc-block-mini-cart__drawer .grina-cart-progress + .wc-block-mini-cart__footer.wc-block-mini-cart__footer {
  padding-top: var(--grina-space-sm);
  border-top: 0;
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__text {
  margin: 0;
  color: var(--grina-color-teal);
  font-weight: 700;
}

.wc-block-mini-cart__drawer .grina-cart-progress[data-kind="min"] .grina-cart-progress__text {
  color: var(--grina-color-clay);
}

/* "Prodavnica" at the end of the sentence while the line asks for more (Grove, 4.95 on Paper): the text runs
   inline so the link costs no row of its own. */
.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__text,
.grina-summary .grina-cart-progress .grina-cart-progress__text {
  display: inline;
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__link,
.grina-summary .grina-cart-progress .grina-cart-progress__link {
  margin-left: var(--grina-space-3xs);
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__bar {
  position: relative;
  height: 6px;
  overflow: hidden;
  background: var(--grina-color-sage-3);
  border-radius: var(--grina-radius-action);
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--grina-cart-fill, 0%);
  background: var(--grina-color-teal);
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--grina-cart-mark, 0%);
  width: 2px;
  background: var(--grina-color-pine);
}

/* ══ Homepage hero v3 (2026-10-06): copy, showcase, then proof ══════════════
   Scoped to .grina-hero--home: /v2/'s hero-shop shares the base .grina-hero rules.
   DOM order is the phone order (copy, showcase, proof); on desktop, grid areas put
   the proof back under the copy, beside the showcase. */
.grina-hero.grina-hero--home {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: ". media" "copy media" "proof media" ". media";
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--grina-space-2xl);
  row-gap: var(--grina-space-md);
  align-items: start;
  padding-top: var(--grina-space-lg);
}

.grina-hero--home .grina-hero__copy {
  grid-area: copy;
  margin: 0;
}

/* One button, alone (2026-10-13: Igor disliked the video faces beside it; the videos have their own section).
   The copy column's own 24px gap spaces it; a margin here doubled it (mobile pass). */
.grina-hero--home .grina-hero__copy > .grina-buttons {
  margin: 0;
}

.grina-hero--home .grina-hero__media {
  grid-area: media;
}

.grina-hero--home .grina-hero__proof {
  grid-area: proof;
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-md);
  margin: 0;
}

.grina-hero--home .grina-hero__title {
  max-width: 17ch;
}

.grina-hero--home .grina-btn--outline.wp-block-button .wp-block-button__link {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Two perks, a Grove sprout as the bullet: the motif, kept small. */
.grina-hero--home .grina-hero__perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-2xs) var(--grina-space-lg);
  margin: 0;
}

.grina-hero--home .grina-perk {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--grina-space-md);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-hero--home .grina-perk::before {
  content: "";
  position: absolute;
  top: var(--grina-space-3xs);
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--grina-color-grove);
  -webkit-mask: url("icons/sprout.svg") center / contain no-repeat;
  mask: url("icons/sprout.svg") center / contain no-repeat;
}

/* The Google rating above the headline, read the way Google shows it: the G, the score, yellow stars,
   the count (Igor, 2026-10-13: "make it resemble more to Google Reviews"). The G and the stars are
   Google's own colours, so they live in the SVGs, outside the palette. */
.grina-hero--home .grina-hero__google {
  display: flex;
  width: fit-content;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: var(--grina-space-2xs) var(--grina-space-sm) var(--grina-space-2xs) var(--grina-space-xs);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-body);
  line-height: 1.3;
}

.grina-hero--home .grina-hero__google::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("icons/google.svg") center / contain no-repeat;
}

.grina-hero--home .grina-hero__score {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-hero--home .grina-hero__stars {
  width: 90px;
  height: 18px;
  background: center / contain no-repeat;
}

.grina-hero--home .grina-hero__google--5 .grina-hero__stars {
  background-image: url("icons/google-stars-5.svg");
}

.grina-hero--home .grina-hero__google--4 .grina-hero__stars {
  background-image: url("icons/google-stars-4.svg");
}

.grina-hero--home .grina-hero__count {
  color: var(--grina-color-body);
}

.grina-hero--home .grina-hero__sr,
.grina-hero--home .grina-showcase__steps a span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The showcase: slides stack in one grid cell and crossfade; only .is-active is shown.
   Without JS the first one is. The cell is as tall as the tallest slide. */
.grina-hero--home .grina-showcase {
  position: relative;
  margin: 0;
}

.grina-hero--home .grina-showcase__slides {
  position: relative;
  display: grid;
  overflow: hidden;
  margin: 0;
  border-radius: var(--grina-radius-card);
  touch-action: pan-y;
}

/* Drag (2026-10-13: "ideally you can drag and move to the next section"): the photo follows the pointer
   and its neighbour comes in beside it (.is-peek); showcase.js settles it. */
.grina-hero--home .grina-showcase__slides.is-ready {
  cursor: grab;
}

.grina-hero--home .grina-showcase__slides.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.grina-hero--home .grina-showcase__slide.is-peek {
  opacity: 1;
  visibility: visible;
}

.grina-hero--home .grina-showcase__slide {
  position: relative;
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--grina-duration), visibility 0s linear var(--grina-duration);
}

.grina-hero--home .grina-showcase__slides:not(.is-ready) .grina-showcase__slide:first-child,
.grina-hero--home .grina-showcase__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--grina-duration);
}

.grina-hero--home .grina-showcase__photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--grina-color-sage-2);
  border-radius: var(--grina-radius-card);
}

.grina-hero--home .grina-showcase__slide img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transform: scale(1);
  transition: transform 6s linear;
}

.grina-hero--home .grina-showcase__slide.is-active img {
  transform: scale(1.06);
}

/* The produce label: Paper card, mono line, hairline rules. Its name's link covers the card. */
.grina-hero--home .grina-showcase__label {
  position: absolute;
  right: var(--grina-space-md);
  bottom: var(--grina-space-md);
  left: var(--grina-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
  padding: var(--grina-space-sm) var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
}

.grina-hero--home .grina-showcase__label p {
  margin: 0;
}

/* The card asks, then answers: the question stays put while the answers turn. */
.grina-hero--home .grina-showcase__ask {
  color: var(--grina-color-quiet);
  font-weight: 600;
}

.grina-hero--home .grina-showcase__answer {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
}

/* The card's call to action: an underlined Grove text link (2026-10-28, Igor: "styled differently - underlined"),
   so it no longer competes with the hero's Leaf button; its link still covers the whole card. */
.grina-hero--home .grina-showcase__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-xs) var(--grina-space-sm);
  margin: var(--grina-space-xs) 0 0;
}

.grina-hero--home .grina-showcase__cta {
  margin: 0;
}

.grina-hero--home .grina-showcase__cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  color: var(--grina-color-grove);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.grina-hero--home .grina-showcase__cta a:hover {
  color: var(--grina-color-pine);
}

.grina-hero--home .grina-showcase__cta a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.grina-hero--home .grina-showcase__cta a::before {
  content: "→";
  order: 2;
}

.grina-hero--home .grina-showcase__line {
  color: var(--grina-color-body);
}

.grina-hero--home .grina-showcase__meta {
  color: var(--grina-color-teal);
  font-weight: 700;
}

/* The subtle slide: when an answer comes in, its words move in from the right as the photo crossfades. */
.grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__answer,
.grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__line,
.grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__buy {
  animation: grina-card-in 0.6s ease-out both;
}

.grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__line {
  animation-delay: 0.06s;
}

.grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__buy {
  animation-delay: 0.12s;
}

@keyframes grina-card-in {
  from { opacity: 0; transform: translateX(var(--grina-space-md)); }
  to { opacity: 1; transform: none; }
}

/* The six answers as dots under the photo (2026-10-13: "add additional carousel indicator dots at the
   bottom"); the current one is a pill that fills over the 5 s, and showcase.js moves on when the fill
   ends (animationend), so the two never drift apart. Each dot is a switch; without JS they are hidden
   and the first answer shows. */
.grina-hero--home .grina-showcase__steps {
  display: flex;
  justify-content: center;
  margin: var(--grina-space-xs) 0 0;
}

.grina-hero--home .grina-showcase__slides:not(.is-ready) + .grina-showcase__steps {
  display: none;
}

.grina-hero--home .grina-showcase__steps a {
  position: relative;
  display: block;
  width: var(--grina-space-sm);
  height: var(--grina-space-md);
  transition: width var(--grina-duration);
}

.grina-hero--home .grina-showcase__steps a[aria-pressed="true"] {
  width: var(--grina-space-xl);
}

.grina-hero--home .grina-showcase__steps a::before,
.grina-hero--home .grina-showcase__steps a::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--grina-space-3xs);
  bottom: 0;
  left: var(--grina-space-3xs);
  height: var(--grina-space-2xs);
  margin: auto 0;
  border-radius: var(--grina-radius-action);
}

.grina-hero--home .grina-showcase__steps a::before {
  background: var(--grina-color-sage-3);
}

.grina-hero--home .grina-showcase__steps a:hover::before {
  background: var(--grina-color-body);
}

.grina-hero--home .grina-showcase__steps a::after {
  background: var(--grina-color-pine);
  transform: scaleX(0);
  transform-origin: left;
}

.grina-hero--home .grina-showcase__steps a[aria-pressed="true"]::after {
  transform: scaleX(1);
}

.grina-hero--home .grina-showcase.is-run .grina-showcase__steps a[aria-pressed="true"]::after {
  animation: grina-chip-fill 5s linear forwards;
}

.grina-hero--home .grina-showcase.is-paused .grina-showcase__steps a::after {
  animation-play-state: paused;
}

.grina-hero--home .grina-showcase__steps a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

@keyframes grina-chip-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1023px) {
  .grina-hero.grina-hero--home {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "media" "proof";
    grid-template-rows: auto;
    row-gap: var(--grina-space-xl);
  }
  .grina-hero--home .grina-showcase__photo {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 559px) {
  .grina-hero--home .grina-showcase__label {
    position: static;
    margin: var(--grina-space-xs) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-hero--home .grina-showcase__slide img,
  .grina-hero--home .grina-showcase__slide.is-active img {
    transform: none;
    transition: none;
  }
  .grina-hero--home .grina-showcase__slide,
  .grina-hero--home .grina-showcase__steps a {
    transition: none;
  }
  .grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__answer,
  .grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__line,
  .grina-hero--home .grina-showcase__slides.is-ready .grina-showcase__slide.is-active .grina-showcase__buy {
    animation: none;
  }
}

/* ══ The client-video popup (video-popup.js), shared by the hero and the video section ══ */
.grina-popup {
  width: min(420px, 92vw);
  max-height: 92vh;
  margin: auto;
  padding: var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  color: var(--grina-color-pine);
}

.grina-popup::backdrop {
  background: var(--grina-color-pine);
  opacity: 0.85;
}

.grina-popup .grina-popup__video {
  display: block;
  width: 100%;
  max-height: 72vh;
  aspect-ratio: 9 / 16;
  margin: 0;
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-field);
  object-fit: cover;
}

.grina-popup .grina-popup__caption {
  margin: var(--grina-space-xs) 0 0;
  font-weight: 700;
}

.grina-popup .grina-popup__name {
  margin: 0;
  color: var(--grina-color-quiet);
}

.grina-popup .grina-popup__close {
  position: absolute;
  top: var(--grina-space-xs);
  right: var(--grina-space-xs);
  z-index: 1;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  line-height: 1;
  text-transform: none;
}

.grina-popup .grina-popup__close:hover {
  background: var(--grina-color-sage-1);
  color: var(--grina-color-pine);
}

/* ══ Partner strip under the homepage hero (2026-10-06) ══════════════════════
   Small, muted logos; full colour on hover. partners.js duplicates the row and
   adds .is-moving so it loops; without JS or under reduced motion it is a wrapped row. */
.grina-logostrip.grina-section {
  display: flex;
  align-items: center;
  gap: var(--grina-space-md);
  padding-top: var(--grina-space-md);
  padding-bottom: var(--grina-space-md);
  border-top: var(--grina-border-calm);
  border-bottom: var(--grina-border-calm);
}

.grina-logostrip .grina-logostrip__label {
  flex: 0 0 auto;
  margin: 0;
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  letter-spacing: var(--grina-tracking-mono);
  line-height: var(--grina-leading-mono);
  text-transform: uppercase;
}

.grina-logostrip .grina-logostrip__viewport {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.grina-logostrip .grina-logostrip__track {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--grina-space-2xl);
  margin: 0;
  padding: 0 var(--grina-space-2xl) 0 0;
}

.grina-logostrip .grina-logostrip__viewport:not(.is-moving) .grina-logostrip__track {
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--grina-space-sm) var(--grina-space-lg);
  padding: 0;
}

.grina-logostrip .grina-logostrip__viewport.is-moving .grina-logostrip__track {
  flex-wrap: nowrap;
  animation: grina-marquee 40s linear infinite;
}

.grina-logostrip .grina-logostrip__viewport:hover .grina-logostrip__track,
.grina-logostrip .grina-logostrip__viewport:focus-within .grina-logostrip__track {
  animation-play-state: paused;
}

@keyframes grina-marquee {
  to { transform: translateX(-100%); }
}

.grina-logostrip .grina-logostrip__logo {
  margin: 0;
}

.grina-logostrip .grina-logostrip__logo img {
  display: block;
  width: auto;
  height: 36px;
  max-width: 180px;
  margin: 0;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--grina-duration), opacity var(--grina-duration);
}

.grina-logostrip .grina-logostrip__logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 559px) {
  .grina-logostrip.grina-section {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--grina-space-xs);
  }
  /* Phones: a row to swipe, one card per logo, snapping; the third card shows at the edge so the row reads as more
     (2026-11-04, Igor: "on phone should be a slider, now they're mumbled together"). partners.js starts no marquee
     here, so the viewport is the scroller, as wide as the screen (it was 1747 px, the marquee's track). */
  .grina-logostrip .grina-logostrip__viewport {
    align-self: stretch;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: none;
  }
  .grina-logostrip .grina-logostrip__viewport::-webkit-scrollbar {
    display: none;
  }
  .grina-logostrip .grina-logostrip__viewport:not(.is-moving) .grina-logostrip__track {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--grina-space-sm);
    padding: 0;
  }
  .grina-logostrip .grina-logostrip__logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 72px;
    padding: var(--grina-space-sm);
    border: var(--grina-border-calm);
    border-radius: var(--grina-radius-card);
    scroll-snap-align: start;
  }
  /* 2026-10-28, Igor: "logos a bit bigger on mobile" (desktop stays 36); in colour, as there is no hover on a phone. */
  .grina-logostrip .grina-logostrip__logo img {
    height: 40px;
    max-width: 100%;
    filter: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-logostrip .grina-logostrip__viewport:not(.is-moving) .grina-logostrip__track {
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--grina-space-sm) var(--grina-space-lg);
  padding: 0;
}

.grina-logostrip .grina-logostrip__viewport.is-moving .grina-logostrip__track {
    animation: none;
  }
}

/* ══ The voices panel (2026-10-13): the nutritionists, then the customers' videos, on one Sage 1 panel.
   Igor: "wrap these two a bit better into a coherent view". Each stays its own section with its h2; when
   the videos follow the experts directly, the two halves join. */
.grina-experts.grina-section:has(+ .grina-videos) {
  padding-bottom: var(--grina-space-lg);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card) var(--grina-radius-card) 0 0;
}

.grina-experts + .grina-videos.grina-section {
  align-items: start;
  padding-top: var(--grina-space-lg);
  background: var(--grina-color-sage-1);
  border-radius: 0 0 var(--grina-radius-card) var(--grina-radius-card);
}

/* Inside the panel the videos are a second voice, not a second hero: smaller covers. */
.grina-experts + .grina-videos .grina-videos__track {
  grid-auto-columns: 220px;
}

.grina-experts + .grina-videos .grina-videos__arrow {
  background: var(--grina-color-paper);
}

@media (max-width: 767px) {
  .grina-experts + .grina-videos .grina-videos__track {
    grid-auto-columns: min(60%, 240px);
  }
}

/* ══ "Video utisci kupaca" (2026-10-06): portrait covers that open the popup ══ */
/* A carousel (third look): the intro and the arrows on the left, the row slides on the right. */
.grina-videos.grina-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--grina-space-2xl);
  align-items: center;
}

.grina-videos .grina-videos__intro {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
}

.grina-videos .grina-videos__intro p {
  margin: 0;
}

/* The shop, right after the customers' words (2026-10-13). */
.grina-videos .grina-videos__shop {
  margin: var(--grina-space-2xs) 0 0;
}

.grina-videos .grina-videos__arrows {
  display: flex;
  gap: var(--grina-space-2xs);
  margin: var(--grina-space-xs) 0 0;
}

.grina-videos .grina-videos__arrows[hidden] {
  display: none;
}

.grina-videos .grina-videos__arrow {
  width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  line-height: 1;
  text-transform: none;
}

.grina-videos .grina-videos__arrow:hover {
  background: var(--grina-color-pine);
  color: var(--grina-color-paper);
}

.grina-videos .grina-videos__arrow[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.grina-videos .grina-videos__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: var(--grina-space-md);
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* The quote and the name sit on the cover's foot (2026-10-14): every card is exactly its cover's
   height, so a three-line quote no longer leaves an empty band under the one-line ones. One grid
   cell for the cover, two rows at its foot for the words; the words let a tap through to the video. */
.grina-videos .grina-videos__card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  margin: 0;
  overflow: hidden;
  border-radius: var(--grina-radius-card);
  scroll-snap-align: start;
}

.grina-videos .grina-videos__card > .grina-videos__poster {
  z-index: 0;
  grid-area: 1 / 1 / -1 / 2;
}

.grina-videos .grina-videos__card::after {
  content: "";
  z-index: 1;
  grid-area: 1 / 1 / -1 / 2;
  align-self: end;
  height: 55%;
  background: linear-gradient(to bottom, transparent, var(--grina-color-pine));
  opacity: 0.9;
  pointer-events: none;
}

.grina-videos .grina-videos__card > .grina-videos__caption,
.grina-videos .grina-videos__card > .grina-videos__name {
  z-index: 2;
  grid-column: 1;
  padding: 0 var(--grina-space-sm);
  pointer-events: none;
}

.grina-videos .grina-videos__card p {
  margin: 0;
}

.grina-videos .grina-videos__poster a {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border-radius: var(--grina-radius-card);
}

.grina-videos .grina-videos__poster img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0;
  object-fit: cover;
  transition: transform var(--grina-duration);
}

.grina-videos .grina-videos__poster a:hover img,
.grina-videos .grina-videos__poster a:focus-visible img {
  transform: scale(1.03);
}

.grina-videos .grina-videos__poster a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 64px;
  height: 64px;
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  opacity: 0.8;
  transform: translate(-50%, -50%);
}

.grina-videos .grina-videos__poster a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: var(--grina-color-paper);
  -webkit-mask: url("icons/play.svg") center / contain no-repeat;
  mask: url("icons/play.svg") center / contain no-repeat;
  transform: translate(-45%, -50%);
}

.grina-videos .grina-videos__card > .grina-videos__caption {
  grid-row: 2;
  color: var(--grina-color-paper);
  font-weight: 700;
  line-height: var(--grina-leading-sekcija);
}

.grina-videos .grina-videos__card > .grina-videos__name {
  grid-row: 3;
  padding-top: var(--grina-space-3xs);
  padding-bottom: var(--grina-space-sm);
  color: var(--grina-color-paper);
  opacity: 0.85;
}

.grina-videos .grina-videos__dots {
  display: none;
}

@media (max-width: 1023px) {
  .grina-videos.grina-section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-md);
  }
}

@media (max-width: 767px) {
  .grina-videos .grina-videos__track {
    grid-auto-columns: 72%;
  }
  .grina-videos .grina-videos__arrows {
    display: none;
  }
  .grina-videos .grina-videos__dots {
    display: flex;
    justify-content: center;
    gap: var(--grina-space-2xs);
    margin: var(--grina-space-sm) 0 0;
  }
  .grina-videos .grina-videos__dots span {
    width: 8px;
    height: 8px;
    background: var(--grina-color-sage-3);
    border-radius: var(--grina-radius-action);
  }
  .grina-videos .grina-videos__dots span.is-active {
    background: var(--grina-color-pine);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-videos .grina-videos__poster img {
    transition: none;
  }
}

/* ══ The live cutoff status in the bestsellers' head (moved from the hero, 2026-10-06) ══
   cutoff.js writes the label and the time (Belgrade, working days, holidays). A Sage pill,
   a Grove dot that pulses, the mono label and the time; the sentence and the delivery days
   stay in the DOM, visually quiet. */
.grina-shop .grina-shop__head .grina-ticket,
.grina-products .grina-ticket {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--grina-space-2xs) var(--grina-space-xs);
  margin: var(--grina-space-sm) 0 0;
  padding: var(--grina-space-2xs) var(--grina-space-sm) var(--grina-space-2xs) var(--grina-space-lg);
  background: var(--grina-color-sage-1);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
}

.grina-shop .grina-shop__head .grina-ticket::before,
.grina-products .grina-ticket::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--grina-space-sm);
  width: 8px;
  height: 8px;
  background: var(--grina-color-grove);
  border-radius: var(--grina-radius-action);
  transform: translateY(-50%);
  animation: grina-pulse 2s ease-in-out infinite;
}

@keyframes grina-pulse {
  50% { opacity: 0.25; }
}

.grina-shop .grina-shop__head .grina-ticket p,
.grina-products .grina-ticket p {
  margin: 0;
  color: var(--grina-color-pine);
}

.grina-shop .grina-shop__head .grina-ticket .grina-ticket__label,
.grina-products .grina-ticket .grina-ticket__label {
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  letter-spacing: var(--grina-tracking-mono);
  line-height: var(--grina-leading-mono);
  text-transform: uppercase;
}

.grina-shop .grina-shop__head .grina-ticket .grina-ticket__big,
.grina-products .grina-ticket .grina-ticket__big {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grina-shop .grina-shop__head .grina-ticket .grina-ticket__text,
.grina-products .grina-ticket .grina-ticket__text {
  color: var(--grina-color-quiet);
}

.grina-shop .grina-shop__head .grina-ticket .grina-ticket__meta,
.grina-products .grina-ticket .grina-ticket__meta {
  display: none;
}

@media (max-width: 559px) {
  .grina-shop .grina-shop__head .grina-ticket .grina-ticket__text,
  .grina-products .grina-ticket .grina-ticket__text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-shop .grina-shop__head .grina-ticket::before,
  .grina-products .grina-ticket::before {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-why .grina-why__fact {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-baskets .grina-basket {
    transition: none;
  }
}

/* ══ Sideways rows: a soft fade at the edge with more to show (scroll-fade.js, 2026-10-08) ══ */
.grina-section.grina-section [data-grina-fade="end"] {
  -webkit-mask-image: linear-gradient(to right, var(--grina-color-pine) calc(100% - var(--grina-space-xl)), transparent);
  mask-image: linear-gradient(to right, var(--grina-color-pine) calc(100% - var(--grina-space-xl)), transparent);
}

.grina-section.grina-section [data-grina-fade="start"] {
  -webkit-mask-image: linear-gradient(to left, var(--grina-color-pine) calc(100% - var(--grina-space-xl)), transparent);
  mask-image: linear-gradient(to left, var(--grina-color-pine) calc(100% - var(--grina-space-xl)), transparent);
}

.grina-section.grina-section [data-grina-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--grina-color-pine) var(--grina-space-xl), var(--grina-color-pine) calc(100% - var(--grina-space-xl)), transparent);
  mask-image: linear-gradient(to right, transparent, var(--grina-color-pine) var(--grina-space-xl), var(--grina-color-pine) calc(100% - var(--grina-space-xl)), transparent);
}

/* ══ Phones (Igor, 2026-10-08: "mobile padding is really rough") ═════════════
   Woodmart's container already gives 15px a side, so our sections add none; cards are 16-24px inside;
   sideways rows run to the screen edge, their first card in line with the text. */
@media (max-width: 559px) {
  .grina-section.grina-section {
    padding-left: 0;
    padding-right: 0;
  }
  .grina-products .grina-products__grid .wc-block-product-template,
  .grina-reviews .grina-reviews__list,
  .grina-videos .grina-videos__track {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: var(--grina-space-sm);
    padding-right: var(--grina-space-sm);
    scroll-padding-left: var(--grina-space-sm);
    scroll-padding-right: var(--grina-space-sm);
  }
  .grina-baskets .grina-basket .grina-basket__body {
    padding: var(--grina-space-sm);
  }
  .grina-reviews .grina-review {
    padding: var(--grina-space-md) var(--grina-space-sm);
  }
  .grina-first .grina-first__panel {
    padding: var(--grina-space-md) var(--grina-space-sm);
  }
  .grina-why .grina-why__copy {
    padding: var(--grina-space-md) var(--grina-space-sm);
  }
}

/* ══ The mobile pass (Igor, 2026-10-13: "elements arent positioned intuitively, some are too big, some are too
   small, fonts are also very inconsistent"). Type comes from one scale (tokens.css sets the tablet and phone
   steps); this block only places and sizes things. One rhythm on phones: 32px between sections, 24px
   between a section's head and its content, 12-16px inside cards; collections of cards scroll sideways. */
@media (max-width: 1023px) {
  /* Hero: the reassurance sits under the button it reassures, then the slider. */
  .grina-hero.grina-hero--home {
    grid-template-areas: "copy" "proof" "media";
    row-gap: var(--grina-space-md);
  }

  /* Woodmart's 40px above the content stacked on the hero's own 32px, a blank band under the header. */
  .home .wd-page-content > .wd-content-layout {
    padding-top: 0;
  }
}

@media (max-width: 559px) {
  /* The voices panel keeps its own inner margin (sections have none on phones), and its videos stay inside it. */
  .grina-experts.grina-section:has(+ .grina-videos),
  .grina-experts + .grina-videos.grina-section {
    padding-right: var(--grina-space-sm);
    padding-left: var(--grina-space-sm);
  }
  .grina-experts + .grina-videos .grina-videos__track {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    scroll-padding: 0;
  }
  .grina-experts .grina-experts__list {
    gap: var(--grina-space-lg);
  }
  /* 2026-10-28, Igor: "downscale this copy a bit on mobile"; 2026-10-31 "a bit smaller" again: 85% of Sekcija (19px → ~16px). */
  .grina-experts .grina-expert .grina-expert__quote {
    font-size: calc(var(--grina-size-sekcija) * 0.85);
  }

  /* Gotovi paketi: slim rows, one per package, so nine read as a list rather than nine cards. */
  .grina-goals .grina-goals__grid {
    gap: var(--grina-space-2xs);
  }
  .grina-goals .grina-goal {
    gap: 0 var(--grina-space-xs);
    padding: var(--grina-space-xs) var(--grina-space-sm);
  }
  .grina-goals .grina-goal .grina-goal__img {
    width: 48px;
    height: 48px;
  }

  /* "Zašto Grina": the four facts as a quiet list, icon beside the words, not four bordered boxes. */
  .grina-why .grina-why__facts {
    gap: 0;
  }
  .grina-why .grina-why__fact {
    display: grid;
    grid-template-columns: var(--grina-space-md) minmax(0, 1fr);
    column-gap: var(--grina-space-sm);
    padding: var(--grina-space-sm) 0;
    border: 0;
    border-top: 1px solid var(--grina-color-on-dark-quiet);
    border-radius: 0;
  }
  .grina-why .grina-why__fact:hover {
    transform: none;
  }
  .grina-why .grina-why__fact::before {
    grid-row: span 2;
    width: var(--grina-space-md);
    height: var(--grina-space-md);
    margin: 0;
  }

  /* The Google badge, small and on two lines (Igor, 2026-10-14): the G beside the score and stars, the count
     under them, as Google sets a rating. */
  .grina-hero--home .grina-hero__google {
    display: grid;
    grid-template-areas: "g score stars" "g count count";
    grid-template-columns: auto auto 1fr;
    justify-content: start;
    align-items: center;
    gap: 0 var(--grina-space-2xs);
    padding: var(--grina-space-2xs) var(--grina-space-sm) var(--grina-space-2xs) var(--grina-space-xs);
  }
  .grina-hero--home .grina-hero__google::before {
    grid-area: g;
    width: var(--grina-space-md);
    height: var(--grina-space-md);
  }
  .grina-hero--home .grina-hero__score {
    grid-area: score;
  }
  .grina-hero--home .grina-hero__stars {
    grid-area: stars;
    justify-self: start;
    width: 72px;
    height: 14px;
  }
  .grina-hero--home .grina-hero__count {
    grid-area: count;
    font-size: var(--grina-size-mono);
  }

  /* Header: the pill takes the page's own side margin, so its edges line up with the text under it, and sits
     slimmer (56px holds the 44px icons). Woodmart's 15px container follows the same 16px gutter. */
  .grina-header.grina-header {
    padding-top: var(--grina-space-xs);
  }
  .grina-header .grina-header__bar {
    gap: var(--grina-space-xs);
    min-height: 56px;
    padding: 0 var(--grina-space-3xs) 0 var(--grina-space-sm);
  }
  .grina-header .grina-header__logo img {
    height: 32px;
  }
  .grina-header .grina-header__actions {
    gap: 0;
  }
  .wd-page-content > .wd-content-layout.wd-content-layout {
    padding-right: var(--grina-gutter);
    padding-left: var(--grina-gutter);
  }

  /* The rating box spans the column like every box under it; each review card is as tall as its own
     words, not the longest review's (one left 250px blank). */
  .grina-reviews .grina-rating {
    flex: 1 1 100%;
  }
  .grina-reviews .grina-reviews__list {
    align-items: flex-start;
  }

  /* The slider's card under the photo takes the photo box's corner, so its border is not clipped. */
  .grina-hero--home .grina-showcase__label {
    border-radius: var(--grina-radius-card);
  }

  /* Review themes: one row that scrolls, never two lines of pills. */
  .grina-reviews .grina-reviews__topics {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .grina-reviews .grina-reviews__topic {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Guides: a sideways row like the reviews and videos, not three tall cards. */
  .grina-guides .grina-guides__grid {
    display: flex;
    gap: var(--grina-space-sm);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: 0 var(--grina-space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--grina-space-sm);
    scrollbar-width: none;
  }
  .grina-guides .grina-guide,
  .grina-guides .grina-guide--books {
    flex: 0 0 78%;
    flex-direction: column;
    scroll-snap-align: start;
  }
  .grina-guides .grina-guide .grina-guide__body {
    padding: var(--grina-space-sm);
  }

  /* "Od porudžbine do tvog stola": 24px between its parts, not 44 plus a margin. */
  .grina-first .grina-first__panel {
    gap: var(--grina-space-md);
  }
  .grina-first .grina-first__head,
  .grina-first .grina-first__steps {
    margin-bottom: 0;
  }
  .grina-first .grina-zone {
    padding: var(--grina-space-sm);
  }

  /* Footer: the four link lists in two columns. */
  .grina-footer .grina-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grina-space-lg) var(--grina-space-md);
    padding: var(--grina-space-lg) 0;
  }
}

/* ══ The package page: Početak · Ritam · Užitak (2026-10-08) ═════════════════ */
.grina-paket .grina-paket__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grina-space-2xl);
  align-items: start;
}

.grina-paket .grina-paket__media {
  position: sticky;
  top: var(--grina-space-3xl);
  margin: 0;
  overflow: hidden;
  border-radius: var(--grina-radius-card);
  background: var(--grina-color-sage-2);
}

.grina-paket .grina-paket__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  object-fit: cover;
}

.grina-paket .grina-paket__intro {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
}

.grina-paket .grina-paket__intro p,
.grina-paket .grina-paket__card p,
.grina-paket .grina-paket__block p,
.grina-paket .grina-paket__next p,
.grina-paket .grina-paket__final p {
  margin: 0;
}

.grina-paket .grina-paket__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-display);
  letter-spacing: var(--grina-tracking-display);
}

.grina-paket .grina-paket__subtitle {
  color: var(--grina-color-grove);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-paket .grina-paket__short {
  color: var(--grina-color-body);
}

.grina-paket .grina-paket__price {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  font-variant-numeric: tabular-nums;
}

.grina-paket .grina-paket__peek .grina-paket__more {
  align-self: flex-start;
  margin-top: var(--grina-space-3xs);
  color: var(--grina-color-grove);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grina-paket .grina-paket__peek .grina-paket__more:hover {
  color: var(--grina-color-pine);
}

.grina-paket .grina-paket__peek .grina-paket__more:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* The contents section, reached from "Pogledaj šta je u paketu": clear of the sticky header. */
.grina-paket .grina-paket__content {
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--grina-space-3xl) + var(--grina-space-sm));
}

.grina-paket .grina-paket__choose {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-lg);
}

.grina-paket .grina-paket__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A legend is never a grid item, so the cards get their own grid. */
.grina-paket .grina-paket__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--grina-space-2xs);
}

.grina-paket .grina-paket__label {
  margin: 0 0 var(--grina-space-2xs);
  padding: 0;
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  font-weight: var(--grina-weight-mono);
  letter-spacing: var(--grina-tracking-mono);
  line-height: var(--grina-leading-mono);
  text-transform: uppercase;
}

/* Radio cards: a native radio (keyboard, arrows, no-JS state) inside a label; Woodmart styles labels,
   so the whole list is declared, hover included. */
.grina-paket .grina-paket__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--grina-space-3xs);
  min-height: 0;
  margin: 0;
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  box-shadow: none;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 400;
  line-height: var(--grina-leading-telo);
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: background var(--grina-duration), border-color var(--grina-duration);
}

/* The radio itself is invisible but stays focusable and in the accessibility tree. */
.grina-paket .grina-paket__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.grina-paket .grina-paket__option:hover {
  background: var(--grina-color-sage-1);
  color: var(--grina-color-pine);
}

.grina-paket .grina-paket__option:has(.grina-paket__radio:checked) {
  background: var(--grina-color-sage-1);
  border-color: var(--grina-color-grove);
  box-shadow: inset 0 0 0 1px var(--grina-color-grove);
}

.grina-paket .grina-paket__option-name {
  font-weight: 700;
}

.grina-paket .grina-paket__option-line {
  color: var(--grina-color-quiet);
}

/* What the chosen option puts in the box, under the options; it changes with the choice (grina_paket_peek()). */
.grina-paket .grina-paket__peek {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: var(--grina-space-xs) 0 0;
  padding: var(--grina-space-sm) var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-body);
}

.grina-paket .grina-paket__peek[hidden] {
  display: none;
}

.grina-paket .grina-paket__peek b {
  color: var(--grina-color-pine);
}

/* Wide, the cards carry the option's line: the peek shows the plants only, and a juice or cheese none. */
.grina-paket .grina-paket__peek .grina-paket__peek-line,
.grina-paket .grina-paket__peek--line {
  display: none;
}

.grina-paket .grina-paket__choice {
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-weight: 700;
}

/* WooCommerce's selects stay in the page (they carry the choice) but hide once paket.js is running. */
.grina-paket.is-ready .variations,
.grina-paket.is-ready .reset_variations {
  display: none;
}

.grina-paket .grina-paket__form .woocommerce-variation-price {
  display: none;
}

.grina-paket .grina-paket__option:has(.grina-paket__radio:focus-visible) {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* An option WooCommerce has dropped (its combination is missing) cannot be chosen. */
.grina-paket .grina-paket__option:has(.grina-paket__radio:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.grina-paket .grina-paket__option-flag {
  padding: 0 var(--grina-space-2xs);
  background: var(--grina-color-clay);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-size: var(--grina-size-mono);
  font-weight: 700;
}

.grina-paket .grina-paket__unavailable {
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-paket .grina-paket__form .single_add_to_cart_button.button,
.grina-paket .grina-paket__again,
.grina-paket .grina-paket__sticky-add {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--grina-space-sm) var(--grina-space-md);
  background: var(--grina-color-leaf);
  border: 0;
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  color: var(--grina-color-ink-on-leaf);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
}

.grina-paket .grina-paket__form .single_add_to_cart_button.button:hover,
.grina-paket .grina-paket__again:hover,
.grina-paket .grina-paket__sticky-add:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-paket .grina-paket__form .single_add_to_cart_button.button:focus-visible,
.grina-paket .grina-paket__again:focus-visible,
.grina-paket .grina-paket__sticky-add:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* The quantity stepper beside the button, one row (Igor 2026-11-01: "a bit condensed and clunky"). Woodmart's
   stepper is <button>s, which Woodmart styles as buttons: every property is restated. */
.grina-paket .grina-paket__form {
  margin-top: var(--grina-space-sm);
}

.grina-paket .grina-paket__form .woocommerce-variation-add-to-cart.variations_button {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--grina-space-xs);
}

.grina-paket .grina-paket__form .quantity.quantity {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
}

.grina-paket .grina-paket__form .quantity.quantity .minus,
.grina-paket .grina-paket__form .quantity.quantity .plus,
.grina-paket .grina-paket__form .quantity.quantity input.qty {
  min-width: 36px;
  min-height: 52px;
  margin: 0;
  padding: 0;
  background: var(--grina-color-paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-align: center;
  text-transform: none;
}

.grina-paket .grina-paket__form .quantity.quantity input.qty {
  width: 34px;
  min-width: 34px;
  -moz-appearance: textfield;
}

.grina-paket .grina-paket__form .quantity.quantity input.qty::-webkit-inner-spin-button,
.grina-paket .grina-paket__form .quantity.quantity input.qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.grina-paket .grina-paket__form .quantity.quantity .minus:hover,
.grina-paket .grina-paket__form .quantity.quantity .plus:hover {
  background: var(--grina-color-sage-1);
  color: var(--grina-color-pine);
}

.grina-paket .grina-paket__form .quantity.quantity .minus:focus-visible,
.grina-paket .grina-paket__form .quantity.quantity .plus:focus-visible,
.grina-paket .grina-paket__form .quantity.quantity input.qty:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: -2px;
}

.grina-paket .grina-paket__form .single_add_to_cart_button.button {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 52px;
  padding-inline: var(--grina-space-sm);
  line-height: 1.25;
  text-wrap: balance; /* a long choice breaks into two even lines, not "… u / korpu" */
}

/* WooCommerce marks the button .disabled while no variation matches; it still answers with a notice. */
.grina-paket .grina-paket__form .single_add_to_cart_button.button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.grina-paket .grina-paket__form .single_add_to_cart_button.button.disabled:hover {
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
}

.grina-paket .grina-paket__content,
.grina-paket .grina-paket__next,
.grina-paket .grina-paket__final {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
}

/* The content blocks set display, which beats the browser's own [hidden] rule: restate it. */
.grina-paket [data-paket-show][hidden] {
  display: none;
}

.grina-paket .grina-paket__block {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0;
  padding: var(--grina-space-lg);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-paket .grina-paket__block-title {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
}

.grina-paket .grina-paket__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-md);
  margin: 0;
}

.grina-paket .grina-paket__list-title {
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-mono);
  letter-spacing: var(--grina-tracking-mono);
  text-transform: uppercase;
}

.grina-paket .grina-paket__list ul,
.grina-paket .grina-paket__ticks {
  margin: var(--grina-space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.grina-paket .grina-paket__list li,
.grina-paket .grina-paket__ticks li {
  position: relative;
  margin: 0 0 var(--grina-space-3xs);
  padding: 0 0 0 var(--grina-space-md);
  color: var(--grina-color-body);
}

.grina-paket .grina-paket__list li::before,
.grina-paket .grina-paket__ticks li::before {
  content: "";
  position: absolute;
  top: var(--grina-space-3xs);
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--grina-color-grove);
  -webkit-mask: url("icons/sprout.svg") center / contain no-repeat;
  mask: url("icons/sprout.svg") center / contain no-repeat;
}

.grina-paket .grina-paket__micro {
  color: var(--grina-color-teal);
  font-weight: 700;
}

/* "Šta je …?" under the hero (brief, Igor 2026-11-01): the question beside its answer, no card; the brief's two
   short lines close it in grove. */
.grina-paket .grina-paket__about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grina-space-sm);
}

.grina-paket .grina-paket__about .grina-section__title {
  margin: 0;
}

.grina-paket .grina-paket__about-text {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  max-width: 62ch;
}

.grina-paket .grina-paket__about-text p {
  margin: 0;
  color: var(--grina-color-body);
}

.grina-paket .grina-paket__about-text .grina-paket__about-line {
  color: var(--grina-color-grove);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .grina-paket .grina-paket__about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--grina-space-xl);
    align-items: start;
  }
}

/* The karakter block: the second sentence, then how it feels beside who it suits, under a hairline. */
.grina-paket .grina-paket__block-more {
  color: var(--grina-color-body);
}

.grina-paket .grina-paket__block .grina-paket__lists {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grina-paket .grina-paket__fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-md);
  margin-top: var(--grina-space-2xs);
  padding-top: var(--grina-space-sm);
  border-top: 1px solid var(--grina-color-hairline);
}

.grina-paket .grina-paket__fit p {
  color: var(--grina-color-body);
}

.grina-paket .grina-paket__fit-h {
  margin: 0 0 var(--grina-space-2xs);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
}

.grina-paket .grina-paket__fit .grina-paket__ticks {
  margin-top: 0;
}

.grina-paket .grina-paket__why-lead {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-paket .grina-paket__ticks--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-3xs) var(--grina-space-lg);
  margin-top: 0;
}

/* "Uporedi pakete" (brief §5.2): a table, with what each package holds as the homepage ladder's layers, one more per
   step; this package's row on Sage. On a phone each row stands as a block, its labels in front of the values. */
.grina-paket .grina-paket__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--grina-color-body);
}

.grina-paket .grina-paket__table th,
.grina-paket .grina-paket__table td {
  font-family: var(--wp--preset--font-family--grina); /* Woodmart sets th in its title font, upper case */
  letter-spacing: normal;
  text-transform: none;
  padding: var(--grina-space-sm);
  border: 0;
  border-bottom: 1px solid var(--grina-color-hairline);
  text-align: left;
  vertical-align: top;
}

.grina-paket .grina-paket__table thead th {
  padding-block: var(--grina-space-2xs);
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-telo);
  font-weight: 600;
}

.grina-paket .grina-paket__table .grina-paket__row.is-here > * {
  background: var(--grina-color-sage-1);
}

.grina-paket .grina-paket__table .grina-paket__row.is-here > :first-child {
  border-radius: var(--grina-radius-field) 0 0 var(--grina-radius-field);
}

.grina-paket .grina-paket__table .grina-paket__row.is-here > :last-child {
  border-radius: 0 var(--grina-radius-field) var(--grina-radius-field) 0;
}

.grina-paket .grina-paket__row-name {
  display: block;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-paket a.grina-paket__row-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.grina-paket a.grina-paket__row-name:hover {
  color: var(--grina-color-grove);
}

.grina-paket a.grina-paket__row-name:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-paket .grina-paket__here {
  display: inline-block;
  margin-top: var(--grina-space-3xs);
  color: var(--grina-color-grove);
  font-weight: 700;
}

.grina-paket .grina-paket__layers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-3xs);
  margin: 0 0 var(--grina-space-2xs);
}

.grina-paket .grina-paket__layer {
  padding: var(--grina-space-3xs) var(--grina-space-xs);
  border-radius: var(--grina-radius-field);
  font-weight: 600;
  line-height: 1.4;
}

.grina-paket .grina-paket__layer--klice {
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
}

.grina-paket .grina-paket__layer--sok {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-paket .grina-paket__layer--sir {
  background: var(--grina-color-pine);
  color: var(--grina-color-on-dark);
}

.grina-paket .grina-paket__has {
  display: block;
  color: var(--grina-color-quiet);
}

.grina-paket .grina-paket__row-price {
  color: var(--grina-color-pine);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .grina-paket .grina-paket__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .grina-paket .grina-paket__table,
  .grina-paket .grina-paket__table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--grina-space-xs);
  }
  .grina-paket .grina-paket__table .grina-paket__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--grina-space-2xs) var(--grina-space-sm);
    padding: var(--grina-space-sm);
    border: var(--grina-border-calm);
    border-radius: var(--grina-radius-card);
  }
  .grina-paket .grina-paket__table .grina-paket__row.is-here {
    background: var(--grina-color-sage-1);
    border-color: var(--grina-color-grove);
  }
  .grina-paket .grina-paket__table .grina-paket__row > *,
  .grina-paket .grina-paket__table .grina-paket__row.is-here > * {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .grina-paket .grina-paket__table .grina-paket__row > td:nth-child(2),
  .grina-paket .grina-paket__table .grina-paket__row > td:nth-child(3) {
    grid-column: 1 / -1;
  }
  .grina-paket .grina-paket__table .grina-paket__row > .grina-paket__row-price {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
  }
  .grina-paket .grina-paket__fit {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The brief's food note (§5.5), at the foot: quiet, behind a hairline, not a card. */
.grina-paket .grina-paket__note {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  max-width: 70ch;
  padding-top: var(--grina-space-lg);
  border-top: 1px solid var(--grina-color-hairline);
}

.grina-paket .grina-paket__note p {
  margin: 0;
  color: var(--grina-color-quiet);
}

.grina-paket .grina-paket__note-h {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
}

.grina-paket .grina-paket__facts {
  color: var(--grina-color-quiet);
}

.grina-paket .grina-paket__gluten {
  align-self: flex-start;
  padding: var(--grina-space-3xs) var(--grina-space-xs);
  background: var(--grina-color-clay);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-weight: 700;
}

.grina-paket .grina-paket__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-sm);
}

.grina-paket .grina-paket__card {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0;
  padding: var(--grina-space-lg);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-paket .grina-paket__card--wide {
  grid-column: 1 / -1;
}

.grina-paket .grina-paket__h {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-paket .grina-paket__sticky {
  position: fixed;
  right: var(--grina-space-sm);
  bottom: var(--grina-space-sm);
  left: var(--grina-space-sm);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  padding: var(--grina-space-xs) var(--grina-space-xs) var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
}

.grina-paket .grina-paket__sticky[hidden] {
  display: none;
}

.grina-paket .grina-paket__sticky-choice {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--grina-color-pine);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grina-paket .grina-paket__sticky-add {
  width: auto;
  flex: 0 0 auto;
}

.grina-paket .grina-paket__sticky-price {
  flex: 0 0 auto;
  white-space: nowrap; /* "2.960 rsd" never breaks before "rsd" */
}

@media (min-width: 1024px) {
  .grina-paket .grina-paket__sticky {
    display: none;
  }
}

/* While the bar shows, the page ends above it instead of under it. */
@media (max-width: 1023px) {
  .grina-paket.has-sticky {
    padding-bottom: var(--grina-space-3xl);
  }
}

@media (max-width: 1023px) {
  .grina-paket .grina-paket__hero,
  .grina-paket .grina-paket__details {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-md);
  }
  .grina-paket .grina-paket__media {
    position: static;
  }
  .grina-paket .grina-paket__media img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 559px) {
  /* The phone size comes from the scale (tokens.css); only the tighter leading stays here. */
  .grina-paket .grina-paket__title {
    line-height: var(--grina-leading-naslov);
    letter-spacing: var(--grina-tracking-naslov);
  }
  .grina-paket .grina-paket__block,
  .grina-paket .grina-paket__card {
    padding: var(--grina-space-sm);
  }
  .grina-paket .grina-paket__lists {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The options as a row of pills (sideways if they do not fit), the chosen one's contents right under them
     (Igor 2026-11-01: "x scroll pills + closer bottom content"). */
  .grina-paket .grina-paket__options {
    display: flex;
    gap: var(--grina-space-2xs);
    margin: 0 calc(-1 * var(--grina-space-sm));
    padding: var(--grina-space-3xs) var(--grina-space-sm);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--grina-space-sm); /* a snapped pill keeps the page's gutter */
    scrollbar-width: none;
  }
  .grina-paket .grina-paket__options::-webkit-scrollbar {
    display: none;
  }
  .grina-paket .grina-paket__option {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--grina-space-sm);
    border-radius: var(--grina-radius-action);
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .grina-paket .grina-paket__option-line {
    display: none;
  }
  .grina-paket .grina-paket__peek .grina-paket__peek-line {
    display: block;
    color: var(--grina-color-pine);
    font-weight: 700;
  }
  .grina-paket .grina-paket__peek--line {
    display: flex;
  }
  .grina-paket .grina-paket__peek--line[hidden] {
    display: none;
  }
}

/* The choice line: the chosen cards and the cart button say it already; it stays for screen readers (aria-live). */
.grina-paket .grina-paket__choice.grina-paket__choice {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .grina-paket .grina-paket__option {
    transition: none;
  }
}

/* ══ "Prvi put? Počni od paketa" on the homepage (2026-10-12) ═════════════════
   Under the hero. Left, the ladder: one row per package, its bar showing what is inside, one layer more
   per step. Right, the chosen package: photo, karakter, its plants, the button to its page. No script:
   the rows are radios and :has() picks the panel; without :has() Početak's panel stays shown. */
.grina-paketi .grina-starter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--grina-space-md);
  align-items: start;
  margin: var(--grina-space-lg) 0 0;
}

.grina-paketi .grina-starter fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grina-paketi .grina-starter .grina-starter__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.grina-paketi .grina-starter .grina-starter__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The ladder */
.grina-paketi .grina-starter .grina-starter__ladder {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
}

.grina-paketi .grina-starter .grina-starter__rung {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--grina-space-3xs) var(--grina-space-sm);
  padding: var(--grina-space-sm) var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  cursor: pointer;
}

.grina-paketi .grina-starter .grina-starter__rung:hover {
  background: var(--grina-color-sage-1);
}

.grina-paketi .grina-starter .grina-starter__rung:has(.grina-starter__radio:checked) {
  background: var(--grina-color-sage-1);
  border-color: var(--grina-color-grove);
  box-shadow: inset 0 0 0 1px var(--grina-color-grove);
}

.grina-paketi .grina-starter .grina-starter__rung:has(.grina-starter__radio:focus-visible),
.grina-paketi .grina-starter .grina-starter__chip:has(.grina-starter__radio:focus-visible) {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-paketi .grina-starter .grina-starter__name {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  letter-spacing: var(--grina-tracking-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-paketi .grina-starter .grina-starter__price {
  align-self: baseline;
  color: var(--grina-color-teal);
  font-weight: 700;
  white-space: nowrap;
}

.grina-paketi .grina-starter .grina-starter__sub {
  grid-column: 1 / -1;
  color: var(--grina-color-body);
  line-height: 1.45;
}

/* The bar: what is inside, one layer more per step. Quiet until its row is chosen. */
.grina-paketi .grina-starter .grina-starter__layers {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--grina-space-3xs);
  margin: var(--grina-space-2xs) 0 0;
}

.grina-paketi .grina-starter .grina-starter__layer {
  padding: var(--grina-space-3xs) var(--grina-space-xs);
  background: var(--grina-color-sage-2);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-body);
  font-weight: 600;
  line-height: 1.4;
  transition: background-color var(--grina-duration), color var(--grina-duration);
}

.grina-paketi .grina-starter .grina-starter__rung:has(.grina-starter__radio:checked) .grina-starter__layer--klice {
  background: var(--grina-color-leaf);
  color: var(--grina-color-ink-on-leaf);
}

.grina-paketi .grina-starter .grina-starter__rung:has(.grina-starter__radio:checked) .grina-starter__layer--sok {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-paketi .grina-starter .grina-starter__rung:has(.grina-starter__radio:checked) .grina-starter__layer--sir {
  background: var(--grina-color-pine);
  color: var(--grina-color-on-dark);
}

/* The chosen package */
.grina-paketi .grina-starter .grina-starter__detail {
  min-width: 0;
}

.grina-paketi .grina-starter .grina-starter__panel {
  display: none;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-paketi .grina-starter .grina-starter__panel[data-paket="pocetak"],
.grina-paketi .grina-starter:has(input[name="grina-paket-start"][value="pocetak"]:checked) .grina-starter__panel[data-paket="pocetak"],
.grina-paketi .grina-starter:has(input[name="grina-paket-start"][value="ritam"]:checked) .grina-starter__panel[data-paket="ritam"],
.grina-paketi .grina-starter:has(input[name="grina-paket-start"][value="uzitak"]:checked) .grina-starter__panel[data-paket="uzitak"] {
  display: grid;
}

.grina-paketi .grina-starter:has(input[name="grina-paket-start"]:not([value="pocetak"]):checked) .grina-starter__panel[data-paket="pocetak"] {
  display: none;
}

.grina-paketi .grina-starter .grina-starter__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  margin: 0;
  object-fit: cover;
}

.grina-paketi .grina-starter .grina-starter__body {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-md);
}

.grina-paketi .grina-starter .grina-starter__body p {
  margin: 0;
}

.grina-paketi .grina-starter .grina-starter__inside {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-paketi .grina-starter .grina-starter__taste {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
}

/* Woodmart sets legends as headings; this one is a quiet label. */
.grina-paketi .grina-starter .grina-starter__taste-legend {
  margin: 0 0 var(--grina-space-2xs);
  padding: 0;
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--grina-leading-telo);
  text-transform: none;
}

.grina-paketi .grina-starter .grina-starter__chip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; /* name, line, the sprout level: the level never drops a row */
  align-items: baseline;
  gap: 0 var(--grina-space-2xs);
  padding: var(--grina-space-2xs) var(--grina-space-xs);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  cursor: pointer;
}

.grina-paketi .grina-starter .grina-starter__chip:hover {
  background: var(--grina-color-sage-1);
}

.grina-paketi .grina-starter .grina-starter__chip:has(.grina-starter__radio:checked) {
  background: var(--grina-color-sage-1);
  border-color: var(--grina-color-grove);
  box-shadow: inset 0 0 0 1px var(--grina-color-grove);
}

.grina-paketi .grina-starter .grina-starter__chip-name {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-paketi .grina-starter .grina-starter__chip-line {
  color: var(--grina-color-quiet);
  line-height: 1.35;
}

/* 2026-10-28 (Igor: "some sort of icons here"): the karakter as a level, 1 to 3 sprouts, Nežni → Snažniji. Decorative;
   the words carry it. */
.grina-paketi .grina-starter .grina-starter__level {
  display: inline-flex;
  align-self: center;
}

.grina-paketi .grina-starter .grina-starter__level i {
  width: 18px;
  height: 18px;
  background: var(--grina-color-pine);
  opacity: 0.2;
  -webkit-mask: url("icons/sprout.svg") center / contain no-repeat;
  mask: url("icons/sprout.svg") center / contain no-repeat;
}

.grina-paketi .grina-starter .grina-starter__level--1 i:nth-child(-n+1),
.grina-paketi .grina-starter .grina-starter__level--2 i:nth-child(-n+2),
.grina-paketi .grina-starter .grina-starter__level--3 i {
  background: var(--grina-color-grove);
  opacity: 1;
}

/* The plants of the chosen karakter; Nežni's without :has(). */
.grina-paketi .grina-starter .grina-starter__plants {
  display: none;
  color: var(--grina-color-body);
}

.grina-paketi .grina-starter .grina-starter__plants[data-karakter="nezni"],
.grina-paketi .grina-starter .grina-starter__panel:has(input[value="nezni"]:checked) .grina-starter__plants[data-karakter="nezni"],
.grina-paketi .grina-starter .grina-starter__panel:has(input[value="zivlji"]:checked) .grina-starter__plants[data-karakter="zivlji"],
.grina-paketi .grina-starter .grina-starter__panel:has(input[value="snazniji"]:checked) .grina-starter__plants[data-karakter="snazniji"] {
  display: block;
}

.grina-paketi .grina-starter .grina-starter__panel:has(input[name="attribute_pa_karakter"]:not([value="nezni"]):checked) .grina-starter__plants[data-karakter="nezni"] {
  display: none;
}

.grina-paketi .grina-starter .grina-starter__go {
  align-self: flex-start;
  margin: auto 0 0;
  padding: var(--grina-space-xs) var(--grina-space-md);
  background: var(--grina-color-leaf);
  border: 0;
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-ink-on-leaf);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--grina-duration);
}

.grina-paketi .grina-starter .grina-starter__go:hover,
.grina-paketi .grina-starter .grina-starter__go:focus-visible {
  transform: translateY(var(--grina-lift-hover));
}

.grina-paketi .grina-starter .grina-starter__go:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .grina-paketi .grina-starter {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones and small tablets: the ladder becomes three tabs right above the panel, so a tap shows its
   result on the same screen. The bar stays, as a thin stripe that grows from tab to tab; its words are
   kept for screen readers, and the panel's first line says what is inside. */
@media (max-width: 767px) {
  .grina-paketi .grina-starter .grina-starter__ladder {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grina-space-2xs);
  }
  .grina-paketi .grina-starter .grina-starter__rung {
    display: flex;
    flex-direction: column;
    gap: var(--grina-space-3xs);
    padding: var(--grina-space-xs);
  }
  /* "od" on its own quiet line, so every tab reads the same and no amount breaks before "rsd" (2026-10-14). */
  .grina-paketi .grina-starter .grina-starter__from {
    display: block;
    color: var(--grina-color-quiet);
    font-weight: 400;
  }
  .grina-paketi .grina-starter .grina-starter__sub {
    display: none;
  }
  .grina-paketi .grina-starter .grina-starter__layers {
    flex-wrap: nowrap;
    gap: var(--grina-space-3xs);
    margin: auto 0 0;
    padding: var(--grina-space-2xs) 0 0;
  }
  .grina-paketi .grina-starter .grina-starter__layer {
    height: 6px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--grina-radius-action);
    color: transparent;
  }
  .grina-paketi .grina-starter .grina-starter__layer--klice {
    flex: 0 0 46%;
  }
  .grina-paketi .grina-starter .grina-starter__layer--sok {
    flex: 0 0 20%;
  }
  .grina-paketi .grina-starter .grina-starter__layer--sir {
    flex: 0 0 30%;
  }
  .grina-paketi .grina-starter .grina-starter__rung:has(.grina-starter__radio:checked) .grina-starter__layer {
    color: transparent;
  }
}

@media (max-width: 559px) {
  .grina-paketi .grina-starter .grina-starter__panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-paketi .grina-starter .grina-starter__photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .grina-paketi .grina-starter .grina-starter__body {
    padding: var(--grina-space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-paketi .grina-starter .grina-starter__layer,
  .grina-paketi .grina-starter .grina-starter__go {
    transition: none;
  }
}

/* ══ Woodmart's scroll-to-top (2026-10-14) ════════════════════════════════════
   The sections run to within 16-28px of the window up to about 1400px wide, so the 40px button had
   nowhere to sit but on their right edge, and on a product page over the phone's cart bar. The
   header comes back as soon as you scroll up (assets/shell.js, every page with our shell), so the
   button goes everywhere. */
body .scrollToTop.scrollToTop {
  display: none;
}

/* ══ The shop, its categories and the product page (launch plan, 2026-10-14) ════════
   templates/shop.php and templates/product.php. Product cards are the homepage's (.grina-products);
   a category's list is a grid of them (.grina-products--grid) instead of the phone shelf. */
.grina-shop .grina-shop__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grina-space-md);
  padding-bottom: var(--grina-space-md);
}

.grina-shop .grina-shop__intro {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
}

.grina-shop .grina-shop__title,
.grina-product .grina-product__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-display);
  letter-spacing: var(--grina-tracking-display);
}

.grina-product .grina-product__title {
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  line-height: var(--grina-leading-naslov);
  letter-spacing: var(--grina-tracking-naslov);
}

.grina-shop .grina-shop__line,
.grina-product .grina-product__line {
  margin: 0;
  color: var(--grina-color-grove);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-shop .grina-shop__line--lead {
  max-width: 60ch;
  color: var(--grina-color-body);
  font-size: var(--grina-size-telo);
  font-weight: var(--grina-weight-telo);
  line-height: var(--grina-leading-telo);
}

.grina-shop .grina-crumbs,
.grina-product .grina-crumbs {
  margin: 0;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

.grina-shop .grina-crumbs a,
.grina-product .grina-crumbs a {
  color: var(--grina-color-quiet);
  text-decoration: none;
}

.grina-shop .grina-crumbs a:hover,
.grina-product .grina-crumbs a:hover {
  color: var(--grina-color-pine);
}

/* The category pills: one line that scrolls sideways on a phone. */
.grina-shop .grina-shop-pills ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-shop .grina-shop-pills li {
  margin: 0;
}

.grina-shop .grina-shop-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.grina-shop .grina-shop-pills a:hover {
  background: var(--grina-color-sage-1);
}

.grina-shop .grina-shop-pills a[aria-current="page"] {
  background: var(--grina-color-pine);
  border-color: var(--grina-color-pine);
  color: var(--grina-color-paper);
}

.grina-shop .grina-shop-pills a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* ── The shop's front page (2026-10-28, third pass: every product on one page, filtered in place) ──
   The head: the intro, the order deadline as a badge beside it, then the shelf across the page. */
.grina-shop .grina-shop__head--shelf {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--grina-space-xl);
}

.grina-shop .grina-shop__head--shelf .grina-ticket {
  margin: 0;
}

/* The badge: the label and the time; the sentence stays for screen readers. */
.grina-shop .grina-shop__head--shelf .grina-ticket .grina-ticket__text,
.grina-shop .grina-shop-browse .grina-shop-browse__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.grina-shop .grina-shop__head--shelf .grina-shop-shelf {
  grid-column: 1 / -1;
}

/* The shelf: every category as its own photo, name and count; it is the category filter (shop-filter.js marks
   the chosen ones). The one bold element of the page. */
.grina-shop .grina-shop-shelf ul {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--grina-space-sm);
  margin: var(--grina-space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.grina-shop .grina-shop-shelf li {
  margin: 0;
}

.grina-shop .grina-shop-shelf__tile {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  color: var(--grina-color-pine);
  text-decoration: none;
}

.grina-shop .grina-shop-shelf__photo {
  display: block;
  margin: 0 0 var(--grina-space-2xs);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-shop .grina-shop-shelf__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--grina-duration) ease;
}

.grina-shop .grina-shop-shelf__tile:hover .grina-shop-shelf__img {
  transform: scale(1.05);
}

.grina-shop .grina-shop-shelf__tile:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 4px;
  border-radius: var(--grina-radius-card);
}

.grina-shop .grina-shop-shelf__name {
  font-weight: 700;
  line-height: var(--grina-leading-sekcija);
}

.grina-shop .grina-shop-shelf__tile:hover .grina-shop-shelf__name {
  color: var(--grina-color-grove);
}

.grina-shop .grina-shop-shelf__count {
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

/* A chosen category: its photo ringed in Pine with a tick in the corner (the filter options' tick), its
   name in Grove. With a mouse, an empty circle in that corner says the tile can be picked. */
.grina-shop .grina-shop-shelf__photo {
  position: relative;
}

.grina-shop .grina-shop-shelf__photo::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grina-color-pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FBFCF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 0 0 2px var(--grina-color-paper);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--grina-duration) ease, transform var(--grina-duration) ease;
}

@media (hover: hover) {
  .grina-shop .grina-shop-shelf__tile[role="button"]:hover .grina-shop-shelf__photo::after {
    background: var(--grina-color-paper);
    box-shadow: inset 0 0 0 2px var(--grina-color-pine);
    opacity: 1;
    transform: none;
  }
}

.grina-shop .grina-shop-shelf__tile[aria-pressed="true"] .grina-shop-shelf__photo {
  box-shadow: inset 0 0 0 3px var(--grina-color-pine);
}

.grina-shop .grina-shop-shelf__tile[aria-pressed="true"] .grina-shop-shelf__photo::after,
.grina-shop .grina-shop-shelf__tile[aria-pressed="true"]:hover .grina-shop-shelf__photo::after {
  background: var(--grina-color-pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FBFCF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 0 0 2px var(--grina-color-paper);
  opacity: 1;
  transform: none;
}

.grina-shop .grina-shop-shelf__tile[aria-pressed="true"] .grina-shop-shelf__img {
  transform: scale(0.94);
  border-radius: var(--grina-radius-field);
}

.grina-shop .grina-shop-shelf__tile[aria-pressed="true"] .grina-shop-shelf__name {
  color: var(--grina-color-grove);
}

/* Every product: a bar (filters on a phone, the count, the order) over the filters and the grid. */
.grina-shop .grina-shop-browse.grina-section {
  padding-top: var(--grina-space-md);
}

.grina-shop .grina-shop-browse__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-sm);
  margin: 0 0 var(--grina-space-md);
  padding: 0 0 var(--grina-space-sm);
  border-bottom: var(--grina-border-calm);
}

.grina-shop .grina-shop-browse__filters {
  display: none;
}

.grina-shop .grina-shop-browse__count {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: var(--grina-space-sm);
  margin: 0;
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-shop .grina-shop-filter__reset {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--grina-color-grove);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-transform: none;
  cursor: pointer;
}

.grina-shop .grina-shop-filter__reset[hidden] {
  display: none;
}

.grina-shop .grina-shop-browse__sort {
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  margin: 0;
  color: var(--grina-color-quiet);
  font-weight: 700;
}

.grina-shop .grina-shop-browse__sort select {
  min-height: 44px;
  margin: 0;
  padding: 0 var(--grina-space-lg) 0 var(--grina-space-sm);
  background-color: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
}

/* WooCommerce's notices box sits above the cards even when empty; its margin doubled the bar's gap. */
.grina-shop .grina-shop-browse__grid .wc-block-components-notices:empty {
  margin: 0;
}

.grina-shop .grina-shop-browse__body {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  align-items: start;
  gap: var(--grina-space-xl);
}

/* The filters: a quiet column of option lists, each option a row with its count; sticky while the grid scrolls. */
.grina-shop .grina-shop-filter {
  position: sticky;
  top: var(--grina-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-lg);
}

.grina-shop .grina-shop-filter[hidden] {
  display: none;
}

.grina-shop .grina-shop-filter__group ul {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: var(--grina-space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.grina-shop .grina-shop-filter__group li {
  margin: 0;
}

.grina-shop .grina-shop-filter__label {
  margin: 0;
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-shop .grina-shop-filter__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--grina-space-xs) 0 var(--grina-space-xl);
  background: transparent;
  border: 0;
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-body);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 400;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

/* The box: a rounded square, filled Pine with a Paper tick when chosen. */
.grina-shop .grina-shop-filter__option::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--grina-space-xs);
  width: 18px;
  height: 18px;
  background: var(--grina-color-paper);
  border: 2px solid var(--grina-color-sage-3);
  border-radius: var(--grina-radius-field);
  transform: translateY(-50%);
}

.grina-shop .grina-shop-filter__option:hover {
  background: var(--grina-color-sage-1);
}

.grina-shop .grina-shop-filter__option[aria-pressed="true"] {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-shop .grina-shop-filter__option[aria-pressed="true"]::before {
  background: var(--grina-color-pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FBFCF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--grina-color-pine);
}

.grina-shop .grina-shop-filter__option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.grina-shop .grina-shop-filter__option:disabled:hover {
  background: transparent;
}

.grina-shop .grina-shop-filter__name::first-letter {
  text-transform: uppercase;
}

.grina-shop .grina-shop-filter__count {
  margin-left: auto;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
  font-variant-numeric: tabular-nums;
}

.grina-shop .grina-shop-filter__done {
  display: none;
}

.grina-shop .grina-shop-filter__option:focus-visible,
.grina-shop .grina-shop-filter__reset:focus-visible,
.grina-shop .grina-shop-filter__done:focus-visible,
.grina-shop .grina-shop-browse__filters:focus-visible,
.grina-shop .grina-shop-browse__sort select:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* The grid beside the filters: three cards a row; filtered-out cards leave no gap. */
.grina-shop .grina-shop-browse .grina-products__grid .wc-block-product-template.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grina-space-md) var(--grina-space-sm);
  margin: 0;
}

.grina-shop .grina-shop-browse .grina-products__grid li.wc-block-product.wc-block-product {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
}

.grina-shop .grina-shop-browse .grina-products__grid li.wc-block-product.wc-block-product[hidden] {
  display: none;
}

.grina-shop .grina-shop-browse__empty {
  margin: 0;
  color: var(--grina-color-pine);
}

.grina-shop .grina-shop-browse__empty[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .grina-shop .grina-shop__head--shelf {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-shop .grina-shop__head--shelf .grina-ticket {
    justify-self: start;
  }
  /* The shelf becomes a row that scrolls sideways, edge to edge. */
  .grina-shop .grina-shop-shelf ul {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 136px;
    margin-right: calc(var(--grina-gutter) * -1);
    margin-left: calc(var(--grina-gutter) * -1);
    padding: 0 var(--grina-gutter);
    overflow-x: auto;
    scroll-padding: 0 var(--grina-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .grina-shop .grina-shop-shelf li {
    scroll-snap-align: start;
  }
  /* The filters go behind "Filteri" in the bar; open, they sit under it as a Sage panel. */
  .grina-shop .grina-shop-browse__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .grina-shop .grina-shop-browse__filters {
    display: inline-flex;
    align-items: center;
    gap: var(--grina-space-2xs);
    order: -1;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--grina-space-sm);
    background: var(--grina-color-pine);
    border: 0;
    border-radius: var(--grina-radius-action);
    color: var(--grina-color-paper);
    font-family: var(--wp--preset--font-family--grina);
    font-size: var(--grina-size-telo);
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
  }
  .grina-shop .grina-shop-browse__filters[hidden] {
    display: none;
  }
  .grina-shop .grina-shop-browse__badge {
    min-width: 20px;
    padding: 0 var(--grina-space-3xs);
    background: var(--grina-color-leaf);
    border-radius: var(--grina-radius-action);
    color: var(--grina-color-ink-on-leaf);
    font-size: var(--grina-size-mono);
    line-height: 20px;
    text-align: center;
  }
  .grina-shop .grina-shop-browse__badge[hidden] {
    display: none;
  }
  .grina-shop .grina-shop-filter {
    position: static;
    display: none;
    gap: var(--grina-space-md);
    margin: 0 0 var(--grina-space-md);
    padding: var(--grina-space-md);
    background: var(--grina-color-sage-1);
    border-radius: var(--grina-radius-card);
  }
  .grina-shop .grina-shop-filter.is-open {
    display: flex;
  }
  .grina-shop .grina-shop-filter__group ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grina-shop .grina-shop-filter__option:hover {
    background: var(--grina-color-sage-2);
  }
  .grina-shop .grina-shop-filter__done {
    display: block;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--grina-space-md);
    background: var(--grina-color-leaf);
    border: 0;
    border-radius: var(--grina-radius-action);
    color: var(--grina-color-ink-on-leaf);
    font-family: var(--wp--preset--font-family--grina);
    font-size: var(--grina-size-telo);
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
  }
}

@media (max-width: 767px) {
  .grina-shop .grina-shop-browse .grina-products__grid .wc-block-product-template.wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grina-space-sm) var(--grina-space-xs);
  }
}

@media (max-width: 559px) {
  .grina-shop .grina-shop-shelf ul {
    grid-auto-columns: 112px;
    gap: var(--grina-space-xs);
    margin-right: calc(var(--grina-space-sm) * -1);
    margin-left: calc(var(--grina-space-sm) * -1);
    padding: 0 var(--grina-space-sm);
    scroll-padding: 0 var(--grina-space-sm);
  }
  .grina-shop .grina-shop-browse__count {
    order: 2;
    flex-basis: 100%;
  }
  /* One line: "Filteri" and the order beside it (its label for screen readers only); the count under them. */
  .grina-shop .grina-shop-browse__sort {
    flex: 1 1 0;
    min-width: 0;
  }
  .grina-shop .grina-shop-browse__sort-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .grina-shop .grina-shop-browse__sort select {
    width: 100%;
  }
  .grina-shop .grina-shop-filter {
    padding: var(--grina-space-sm);
  }
  .grina-shop .grina-shop-filter__group ul {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The guides panel is a card: it keeps its own inside margin where sections drop theirs. */
  .grina-shop-guide.grina-shop-guide.grina-section {
    padding: var(--grina-space-md) var(--grina-space-sm);
  }
  .grina-shop-guide .grina-shop-guide__cover {
    width: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-shop .grina-shop-shelf__img,
  .grina-shop .grina-shop-shelf__photo::after {
    transition: none;
  }
  .grina-shop .grina-shop-shelf__tile:hover .grina-shop-shelf__img {
    transform: none;
  }
}

/* "Lakše u paketu": the package that makes the choice easier (2026-11-01: led by its photo). It sizes to its own box
   (product page, cart, account): photo beside the text from 560px of card, else a small photo beside the name. */
.grina-shop-paket.grina-shop-paket {
  container-type: inline-size;
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-shop-paket .grina-shop-paket__in {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--grina-space-sm);
  padding: var(--grina-space-sm);
}

.grina-shop-paket .grina-shop-paket__photo {
  display: block;
  align-self: start;
  overflow: hidden;
  border-radius: var(--grina-radius-field);
}

.grina-shop-paket .grina-shop-paket__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Grina paket dobrodošlice's photo has the box's printed name along its top: the crop keeps the products, not a cut line. */
.grina-shop-paket.grina-shop-paket--welcome .grina-shop-paket__img {
  object-position: center 80%;
}

.grina-shop-paket .grina-shop-paket__body {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  min-width: 0;
}

.grina-shop-paket .grina-shop-paket__label,
.grina-shop-paket .grina-shop-paket__title,
.grina-shop-paket .grina-shop-paket__text,
.grina-shop-paket .grina-shop-paket__foot {
  margin: 0;
}

.grina-shop-paket .grina-shop-paket__label {
  color: var(--grina-color-grove);
  font-weight: 700;
}

.grina-shop-paket .grina-shop-paket__title {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-shop-paket .grina-shop-paket__text {
  max-width: 60ch;
  color: var(--grina-color-body);
}

.grina-shop-paket .grina-shop-paket__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-xs) var(--grina-space-md);
  margin-top: var(--grina-space-2xs);
}

.grina-shop-paket .grina-shop-paket__price {
  color: var(--grina-color-pine);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@container (min-width: 560px) {
  .grina-shop-paket .grina-shop-paket__in {
    grid-template-columns: minmax(200px, 2fr) minmax(0, 5fr);
    gap: var(--grina-space-xl);
    padding: 0 var(--grina-space-xl) 0 0;
  }
  /* The photo lies over its column, so the text sets the card's height (a 768 px square stretched it to 1,500). */
  .grina-shop-paket .grina-shop-paket__photo {
    position: relative;
    align-self: stretch;
    min-height: 240px;
    border-radius: 0;
  }
  .grina-shop-paket .grina-shop-paket__img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .grina-shop-paket .grina-shop-paket__body {
    align-self: center;
    padding: var(--grina-space-lg) 0;
  }
}

/* A narrow card: the price above the button, not left under it on a line of its own. */
@container (max-width: 559px) {
  .grina-shop-paket .grina-shop-paket__foot {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--grina-space-xs);
  }
}

/* A very narrow card: the text under the name goes; the name, price and button stay. */
@container (max-width: 359px) {
  .grina-shop-paket .grina-shop-paket__text {
    display: none;
  }
}

.grina-shop-paket .grina-shop-paket__link,
.grina-shop-guide .grina-shop-guide__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-weight: 700;
  text-decoration: none;
}

.grina-shop-paket .grina-shop-paket__link:hover,
.grina-shop-guide .grina-shop-guide__button:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-shop-paket .grina-shop-paket__link:focus-visible,
.grina-shop-guide .grina-shop-guide__button:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* A category's list: result count and sort above a grid of cards. */
.grina-shop .grina-shop-list.grina-section {
  padding-top: 0;
}

.grina-shop .grina-shop-list__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--grina-space-sm);
  margin: 0 0 var(--grina-space-md);
}

.grina-shop .grina-shop-list__bar .woocommerce-result-count,
.grina-shop .grina-shop-list__bar .woocommerce-ordering {
  float: none;
  margin: 0;
  color: var(--grina-color-quiet);
}

.grina-shop .grina-shop-list__bar .woocommerce-ordering select.orderby {
  min-height: 44px;
  padding: 0 var(--grina-space-md) 0 var(--grina-space-sm);
  background-color: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
}

.grina-shop .grina-shop-list__empty {
  margin: 0;
  color: var(--grina-color-body);
}

.grina-shop .grina-shop-list .woocommerce-pagination {
  margin: var(--grina-space-md) 0 0;
}

/* The bar reuses the shop's (count, then the order); WooCommerce's form sits inside its label. */
.grina-shop .grina-shop-list__bar .woocommerce-ordering {
  margin: 0;
}

/* The three packages under a category's pills (2026-10-30): a quiet row of photo, name and price, each a link,
   "Svi paketi" at its end. On a phone the row scrolls sideways under its label. */
.grina-shop .grina-shop-paketi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-xs) var(--grina-space-sm);
  margin: 0;
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-shop .grina-shop-paketi__label {
  margin: 0;
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-shop .grina-shop-paketi ul {
  display: flex;
  flex: 1 1 auto;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-shop .grina-shop-paketi li {
  margin: 0;
}

.grina-shop .grina-shop-paketi__item {
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  min-height: 44px;
  padding: var(--grina-space-3xs) var(--grina-space-sm) var(--grina-space-3xs) var(--grina-space-3xs);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-pine);
  text-decoration: none;
  white-space: nowrap;
}

.grina-shop .grina-shop-paketi__item:hover {
  border-color: var(--grina-color-grove);
}

.grina-shop .grina-shop-paketi__item:focus-visible,
.grina-shop .grina-shop-paketi__all:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-shop .grina-shop-paketi .grina-shop-paketi__img {
  display: block;
  flex: none;
  width: var(--grina-space-lg);
  height: var(--grina-space-lg);
  object-fit: cover;
  border-radius: var(--grina-radius-action);
}

.grina-shop .grina-shop-paketi__name {
  font-weight: 700;
}

.grina-shop .grina-shop-paketi__price {
  color: var(--grina-color-body);
  font-variant-numeric: tabular-nums;
}

.grina-shop .grina-shop-paketi__all {
  white-space: nowrap;
}

/* "Najpopularniji proizvodi": on a desktop four cards across in a row that scrolls sideways (a phone gets the
   homepage's shelf), the arrows beside the title. */
.grina-shop .grina-shop-picks.grina-section {
  padding-top: var(--grina-space-lg);
}

.grina-shop .grina-shop-picks .grina-shop-picks__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
}

.grina-shop .grina-shop-picks .grina-shop-picks__line {
  margin: var(--grina-space-3xs) 0 0;
  color: var(--grina-color-body);
}

.grina-shop .grina-shop-picks .grina-shop-picks__arrows {
  display: flex;
  gap: var(--grina-space-2xs);
}

.grina-shop .grina-shop-picks .grina-shop-picks__arrows[hidden] {
  display: none;
}

.grina-shop .grina-shop-picks .grina-shop-picks__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

.grina-shop .grina-shop-picks .grina-shop-picks__arrow:hover {
  background: var(--grina-color-pine);
  color: var(--grina-color-paper);
}

.grina-shop .grina-shop-picks .grina-shop-picks__arrow:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-shop .grina-shop-picks .grina-shop-picks__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

@media (min-width: 1024px) {
  .grina-shop .grina-shop-picks .grina-products__grid .wc-block-product-template {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 3 * var(--grina-space-sm)) / 4);
    grid-auto-flow: column;
    padding: var(--grina-space-3xs) 0 var(--grina-space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .grina-shop .grina-shop-picks .grina-products__grid li.wc-block-product {
    scroll-snap-align: start;
  }
}

/* About the category, in its head (2026-10-31): Grina's text under the title; how to use and keep it beside
   the title on a desktop, under the text on a phone, each fact with its icon. On a phone the text folds to
   four lines (assets/shop-about.js). */
.grina-shop .grina-shop-about {
  max-width: 65ch;
  margin-top: var(--grina-space-2xs);
  line-height: var(--grina-leading-telo);
}

.grina-shop .grina-shop-about > :first-child {
  margin-top: 0;
}

.grina-shop .grina-shop-about > :last-child {
  margin-bottom: 0;
}

/* A button that reads as the shop's links ("Svi paketi"); Woodmart styles every button white on colour. */
.grina-shop .grina-shop-about__more.grina-shop-about__more {
  align-self: flex-start;
  min-height: 44px;
  margin: calc(-1 * var(--grina-space-xs)) 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--grina-color-grove);
  font: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-decoration: underline;
  text-transform: none;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.grina-shop .grina-shop-about__more.grina-shop-about__more:hover {
  color: var(--grina-color-pine);
}

.grina-shop .grina-shop-about__more.grina-shop-about__more[hidden] {
  display: none;
}

.grina-shop .grina-shop-about__more:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-shop .grina-shop-facts {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
}

/* Each fact with its icon (2026-10-30, Igor: "add icons"): a bowl for using, a snowflake for keeping. */
.grina-shop .grina-shop-facts__fact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--grina-space-sm);
}

.grina-shop .grina-shop-facts__fact::before {
  content: "";
  grid-area: 1 / 1 / span 2 / 2;
  width: 44px;
  height: 44px;
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-action);
}

.grina-shop .grina-shop-facts__fact::after {
  content: "";
  grid-area: 1 / 1 / span 2 / 2;
  align-self: start;
  width: 44px;
  height: 44px;
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-fact-icon) center / 24px no-repeat;
  mask: var(--grina-fact-icon) center / 24px no-repeat;
}

.grina-shop .grina-shop-facts__fact--use { --grina-fact-icon: url("icons/bowl.svg"); }
.grina-shop .grina-shop-facts__fact--keep { --grina-fact-icon: url("icons/cold.svg"); }

.grina-shop .grina-shop-facts__fact dt,
.grina-shop .grina-shop-facts__fact dd {
  grid-column: 2;
}

.grina-shop .grina-shop-facts__fact dt {
  align-self: end;
  margin: 0 0 var(--grina-space-3xs);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-shop .grina-shop-facts__fact dd {
  margin: 0;
  color: var(--grina-color-body);
  line-height: var(--grina-leading-telo);
}

/* A desktop: the title and text on the left, the facts on the right, ending with the text; pills and packages across. */
@media (min-width: 1024px) {
  .grina-shop .grina-shop__head--facts {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--grina-space-xl);
  }
  .grina-shop .grina-shop__head--facts > :not(.grina-shop__intro):not(.grina-shop-facts) {
    grid-column: 1 / -1;
  }
  .grina-shop .grina-shop__head--facts .grina-shop-facts {
    align-self: end;
  }
}

@media (max-width: 559px) {
  .grina-shop .grina-shop-paketi {
    padding: var(--grina-space-xs) 0 var(--grina-space-xs) var(--grina-space-sm);
  }
  .grina-shop .grina-shop-paketi ul {
    flex-basis: 100%;
    order: 2;
    padding-right: var(--grina-space-sm);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .grina-shop .grina-shop-paketi__all {
    margin-left: auto;
    padding-right: var(--grina-space-sm);
  }
  .grina-shop .grina-shop-about.is-folded:not(.is-open) {
    max-height: 4lh;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, var(--grina-color-pine) 60%, transparent);
    mask-image: linear-gradient(to bottom, var(--grina-color-pine) 60%, transparent);
  }
  /* A category's bar has no "Filteri": the count, then the order across the whole width under it. */
  .grina-shop .grina-shop-list__bar .grina-shop-browse__count {
    order: 0;
  }
  .grina-shop .grina-shop-list__bar .grina-shop-browse__sort,
  .grina-shop .grina-shop-list__bar .woocommerce-ordering {
    flex: 1 1 100%;
  }
}

/* The guides, on categories they help with (Vodiči copy deck §15 C): a Sage panel, the two covers
   fanned at its start (2026-10-28). */
.grina-shop-guide.grina-shop-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--grina-space-md) var(--grina-space-xl);
  margin-top: var(--grina-space-lg);
  margin-bottom: var(--grina-space-xl);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-shop-guide .grina-shop-guide__covers {
  display: flex;
  flex: none;
  padding: 0 var(--grina-space-sm) 0 0;
}

.grina-shop-guide .grina-shop-guide__cover {
  display: block;
  width: 88px;
  height: auto;
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  transform: rotate(-4deg);
}

.grina-shop-guide .grina-shop-guide__cover + .grina-shop-guide__cover {
  margin-left: calc(var(--grina-space-lg) * -1);
  transform: rotate(5deg) translateY(var(--grina-space-2xs));
}

.grina-shop-guide .grina-shop-guide__text {
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  gap: var(--grina-space-xs);
}

.grina-shop-guide .grina-shop-guide__text p,
.grina-shop-guide .grina-shop-guide__cta {
  margin: 0;
}

/* Its own font: Woodmart's title font otherwise sets this h2 in Arial (seen 2026-10-28). */
.grina-shop-guide .grina-shop-guide__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  letter-spacing: var(--grina-tracking-sekcija);
  text-transform: none;
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

/* A product's description, open under its heading (2026-11-01). */
.grina-product .grina-product__about .grina-section__title {
  margin: 0 0 var(--grina-space-md);
}

.grina-product .grina-product__about .grina-prose {
  max-width: 72ch;
}

.grina-product .grina-product__about .grina-prose > :first-child {
  margin-top: 0;
}

.grina-product .grina-product__about .grina-prose > :last-child {
  margin-bottom: 0;
}

/* The package card follows the description at the section's own gap, not two of them (2026-11-01, Igor: "fix padding"). */
.grina-product .grina-product__about + .grina-product__paket.grina-section {
  padding-top: 0;
}

.grina-prose.grina-prose p,
.grina-prose.grina-prose li {
  color: var(--grina-color-body);
  line-height: var(--grina-leading-telo);
}

/* Woodmart's title font puts any heading without its own family in Arial (docs/CLAUDE.md); Grina's product
   descriptions carry h2–h6 once demoted (2026-10-16: visible once Elementor no longer styled them). */
.grina-prose.grina-prose h2,
.grina-prose.grina-prose h3 {
  margin: var(--grina-space-md) 0 var(--grina-space-xs);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-prose.grina-prose h4,
.grina-prose.grina-prose h5,
.grina-prose.grina-prose h6 {
  margin: var(--grina-space-sm) 0 var(--grina-space-2xs);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
  text-transform: none;
}

/* The product page. */
.grina-product .grina-product__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grina-space-2xl);
  align-items: start;
}

.grina-product .grina-product__media {
  position: sticky;
  top: var(--grina-space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
}

.grina-product .grina-product__frame {
  overflow: hidden;
  background: var(--grina-color-sage-2);
  border-radius: var(--grina-radius-card);
}

.grina-product .grina-product__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  object-fit: cover;
}

.grina-product .grina-product__thumbs {
  display: flex;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-product .grina-product__thumbs li {
  margin: 0;
}

.grina-product .grina-product__thumb {
  width: 72px;
  height: 72px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--grina-color-sage-2);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  box-shadow: none;
}

.grina-product .grina-product__thumb[aria-current="true"] {
  border-color: var(--grina-color-pine);
  box-shadow: inset 0 0 0 1px var(--grina-color-pine);
}

.grina-product .grina-product__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grina-product .grina-product__summary {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
}

.grina-product .grina-product__summary > p,
.grina-product .grina-product__short p {
  margin: 0;
}

.grina-product .grina-product__price,
.grina-product .grina-product__price .amount,
.grina-product .grina-product__price bdi {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  font-variant-numeric: tabular-nums;
}

.grina-product .grina-product__short {
  color: var(--grina-color-body);
}

/* WooCommerce's form: the quantity stepper beside a full-width button. */
.grina-product .grina-product__form form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-xs);
  margin: 0;
}

.grina-product .grina-product__form form.cart .quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  overflow: hidden;
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
}

.grina-product .grina-product__form form.cart .quantity input {
  min-width: 44px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  background: var(--grina-color-paper);
  border: 0;
  box-shadow: none;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-align: center;
}

.grina-product .grina-product__form form.cart .quantity input.qty {
  width: 48px;
}

/* Woodmart 8.6 (2026-11-05) gives the stepper's − and + (its <button class="btn">) the system font at 400 through
   `div.quantity .btn { --btn-font-family; --btn-font-weight }` (woo-mod-quantity.css); 8.5.7 left both to inherit,
   so they read in Manrope at 600 (measured: computed-style diff, live 8.5.7 vs staging 8.6.6). Back to that. */
.grina-product div.quantity .btn,
.grina-paket div.quantity .btn,
.grina-cart-page div.quantity .btn {
  --btn-font-family: inherit;
  --btn-font-weight: 600;
}

.grina-product .grina-product__form .single_add_to_cart_button.button,
.grina-product .grina-product__sticky-add {
  flex: 1 1 200px;
  min-height: 48px;
  margin: 0;
  padding: var(--grina-space-xs) var(--grina-space-md);
  background: var(--grina-color-leaf);
  border: 0;
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  color: var(--grina-color-ink-on-leaf);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
}

.grina-product .grina-product__form .single_add_to_cart_button.button:hover,
.grina-product .grina-product__sticky-add:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-product .grina-product__form .single_add_to_cart_button.button:focus-visible,
.grina-product .grina-product__sticky-add:focus-visible,
.grina-product .grina-product__thumb:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* Woodmart's compare link rides along on the form's hooks (the wishlist button is printed below the form). */
.grina-product .grina-product__form .wd-wishlist-btn,
.grina-product .grina-product__form .wd-compare-btn {
  display: none;
}

/* "Dodaj na listu": Woodmart's wishlist button, as on live (Igor 2026-10-15: back for now, to build on). */
.grina-product .grina-product__summary > .wd-wishlist-btn.wd-action-btn {
  display: flex;
  margin: 0;
}

.grina-product .grina-product__summary > .wd-wishlist-btn.wd-action-btn > a {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  min-height: 44px;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grina-product .grina-product__summary > .wd-wishlist-btn.wd-action-btn > a:hover {
  color: var(--grina-color-grove);
}

.grina-product .grina-product__summary > .wd-wishlist-btn.wd-action-btn > a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-product .grina-product__unavailable {
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-product .grina-product__perks {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-product .grina-product__perks .grina-product__perk {
  margin: 0;
  padding: 0 0 0 var(--grina-space-lg);
  background: left center / 20px no-repeat;
  color: var(--grina-color-body);
}

.grina-product .grina-product__perks .grina-product__perk--sprout {
  background-image: url("icons/sprout.svg");
}

.grina-product .grina-product__perks .grina-product__perk--cash {
  background-image: url("icons/cash.svg");
}

.grina-product .grina-product__perks .grina-product__perk--shield {
  background-image: url("icons/shield.svg");
}

/* What to know (2026-11-01, third pass): how to use and keep it, each with its icon, on a Sage band; beside them a
   label-like Paper panel of the product's own facts, one row each under a hairline. */
.grina-product .grina-product__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grina-space-md);
  padding: var(--grina-space-lg) var(--grina-space-xl);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-product .grina-product__details--both {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--grina-space-xl);
}

.grina-product .grina-product__know {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-content: start;
  gap: var(--grina-space-md) var(--grina-space-xl);
  margin: 0;
}

.grina-product .grina-product__details--both .grina-product__know {
  grid-template-columns: minmax(0, 1fr);
}

.grina-product .grina-product__fact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  column-gap: var(--grina-space-sm);
}

.grina-product .grina-product__fact::before {
  content: "";
  grid-area: 1 / 1 / span 2 / 2;
  width: 44px;
  height: 44px;
  background: var(--grina-color-paper);
  border-radius: var(--grina-radius-action);
}

.grina-product .grina-product__fact::after {
  content: "";
  grid-area: 1 / 1 / span 2 / 2;
  align-self: start;
  width: 44px;
  height: 44px;
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-fact-icon) center / 24px no-repeat;
  mask: var(--grina-fact-icon) center / 24px no-repeat;
}

.grina-product .grina-product__fact--use { --grina-fact-icon: url("icons/bowl.svg"); }
.grina-product .grina-product__fact--keep { --grina-fact-icon: url("icons/cold.svg"); }

.grina-product .grina-product__fact dt,
.grina-product .grina-product__fact dd {
  grid-column: 2;
  margin: 0;
}

.grina-product .grina-product__fact dt {
  align-self: end;
  margin-bottom: var(--grina-space-3xs);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-product .grina-product__fact dd {
  max-width: 62ch;
  color: var(--grina-color-body);
  line-height: var(--grina-leading-telo);
}

.grina-product .grina-product__tip {
  display: block;
  margin-top: var(--grina-space-2xs);
  color: var(--grina-color-quiet);
}

/* The category's own article under "Kako se koristi" (2026-11-05), on product and category pages. */
.grina-product .grina-product__read,
.grina-shop .grina-shop-facts__read {
  display: inline-block;
  margin-top: var(--grina-space-2xs);
  color: var(--grina-color-grove); /* the site's text link (.grina-link) */
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.grina-product .grina-product__read:hover,
.grina-shop .grina-shop-facts__read:hover {
  color: var(--grina-color-pine);
}

/* The label: Paper, a title, then label and value per row under hairlines, as on a food's own label. */
.grina-product .grina-product__label {
  align-self: start;
  padding: var(--grina-space-md);
  background: var(--grina-color-paper);
  border-radius: var(--grina-radius-field);
}

.grina-product .grina-product__label .grina-product__label-title {
  margin: 0 0 var(--grina-space-xs);
  padding-bottom: var(--grina-space-xs);
  border-bottom: 2px solid var(--grina-color-pine);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
}

.grina-product .grina-product__label dl {
  margin: 0;
}

.grina-product .grina-product__label dl > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--grina-space-sm);
  padding: var(--grina-space-xs) 0;
  border-bottom: var(--grina-border-calm);
}

.grina-product .grina-product__label dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.grina-product .grina-product__label dt,
.grina-product .grina-product__label dd {
  margin: 0;
  line-height: var(--grina-leading-telo);
}

.grina-product .grina-product__label dt {
  color: var(--grina-color-quiet);
}

.grina-product .grina-product__label dd {
  color: var(--grina-color-pine);
}

/* Delivery as information: the title and "Sve o dostavi" on one line, then a Paper panel under a hairline frame,
   one column per question (when it is processed, how it arrives, how it is paid), each with its icon. */
.grina-product .grina-product__h {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-product .grina-product__delivery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grina-space-2xs) var(--grina-space-md);
  margin-bottom: var(--grina-space-md);
}

.grina-product .grina-product__delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

/* Without "Obrada porudžbine" (the cutoff switch, inc/features.php, 2026-11-04): two columns. */
@media (min-width: 1024px) {
  .grina-product .grina-product__delivery-grid:not(:has(.grina-product__step--clock)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grina-product .grina-product__step {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  padding: var(--grina-space-md) var(--grina-space-lg);
}

.grina-product .grina-product__step + .grina-product__step {
  border-left: var(--grina-border-calm);
}

.grina-product .grina-product__step h3 {
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  margin: 0 0 var(--grina-space-3xs);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
}

.grina-product .grina-product__step h3::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-step-icon) center / 24px no-repeat;
  mask: var(--grina-step-icon) center / 24px no-repeat;
}

.grina-product .grina-product__step--clock { --grina-step-icon: url("icons/clock.svg"); }
.grina-product .grina-product__step--truck { --grina-step-icon: url("icons/truck.svg"); }
.grina-product .grina-product__step--cash { --grina-step-icon: url("icons/cash.svg"); }

.grina-product .grina-product__step p {
  margin: 0;
  color: var(--grina-color-body);
  line-height: var(--grina-leading-telo);
}

/* The cutoff status (assets/cutoff.js) inside the first column: the status on one line, a pulsing dot before it. */
.grina-product .grina-product__step .grina-ticket {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--grina-space-3xs) var(--grina-space-2xs);
  margin: 0;
  padding: 0 0 0 var(--grina-space-sm);
}

.grina-product .grina-product__step .grina-ticket::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--grina-color-grove);
  border-radius: var(--grina-radius-action);
  animation: grina-pulse 2s ease-in-out infinite;
}

.grina-product .grina-product__step .grina-ticket .grina-ticket__label {
  color: var(--grina-color-body);
}

.grina-product .grina-product__step .grina-ticket .grina-ticket__label::after {
  content: ":";
}

.grina-product .grina-product__step .grina-ticket .grina-ticket__big {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-product .grina-product__step .grina-ticket .grina-ticket__text {
  flex-basis: 100%;
  color: var(--grina-color-quiet);
}

.grina-product .grina-product__sticky {
  position: fixed;
  right: var(--grina-space-sm);
  bottom: var(--grina-space-sm);
  left: var(--grina-space-sm);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  padding: var(--grina-space-xs) var(--grina-space-xs) var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  transform: translateY(calc(100% + var(--grina-space-md)));
  transition: transform var(--grina-duration) ease;
}

.grina-product .grina-product__sticky.is-shown {
  transform: none;
}

.grina-product .grina-product__sticky[hidden] {
  display: none;
}

.grina-product .grina-product__sticky-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--grina-color-pine);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grina-product .grina-product__sticky-price {
  --wd-primary-color: var(--grina-color-pine); /* Woodmart colours the price amount with its primary green (2:1 on white, audit 2026-11-04) */
  color: var(--grina-color-pine);
  font-variant-numeric: tabular-nums;
}

.grina-product .grina-product__sticky-price .woocommerce-Price-amount {
  color: inherit;
}

/* The mini-cart drawer's prices too (the same Woodmart green); doubled to beat Woodmart's (0,2,0). */
.wc-block-mini-cart__drawer.wc-block-mini-cart__drawer.wc-block-mini-cart__drawer {
  --wd-primary-color: var(--grina-color-pine);
}

.wc-block-mini-cart__drawer.wc-block-mini-cart__drawer .wc-block-components-product-price,
.wc-block-mini-cart__drawer.wc-block-mini-cart__drawer .wc-block-formatted-money-amount {
  color: var(--grina-color-pine);
}

.grina-product .grina-product__sticky-add {
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .grina-product .grina-product__sticky {
    display: none;
  }
}

/* While the bar shows, the page ends above it instead of under it. */
@media (max-width: 1023px) {
  .grina-product.has-sticky {
    padding-bottom: var(--grina-space-3xl);
  }
}

@media (max-width: 1023px) {
  .grina-product .grina-product__hero,
  .grina-product .grina-product__details--both {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-md);
  }
  .grina-product .grina-product__details {
    padding: var(--grina-space-md);
  }
  .grina-product .grina-product__delivery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-product .grina-product__step + .grina-product__step {
    border-top: var(--grina-border-calm);
    border-left: 0;
  }
  .grina-product .grina-product__media {
    position: static;
  }
  .grina-product .grina-product__frame img {
    aspect-ratio: 4 / 3;
  }
  /* A category's cards stay a grid on a phone (the homepage's become a shelf). */
  /* The shelf's bleed and side padding go too, so the grid lines up with the bar above it. */
  .grina-products--grid .grina-products__grid .wc-block-product-template.wc-block-product-template {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .grina-products--grid .grina-products__grid li.wc-block-product.wc-block-product {
    flex: none;
    width: auto;
  }
}

@media (max-width: 767px) {
  .grina-products--grid .grina-products__grid .wc-block-product-template.wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  /* Two cards across: the name, price and button keep one 12px inset, and the button stays a 44px target. */
  .grina-products--grid .grina-products__grid li.wc-block-product.wc-block-product {
    padding-bottom: var(--grina-space-xs);
  }
  .grina-products--grid .grina-products__grid li.wc-block-product .wc-block-components-product-image {
    margin-bottom: var(--grina-space-3xs);
  }
  .grina-products--grid .grina-products__grid li.wc-block-product .wp-block-post-title,
  .grina-products--grid .grina-products__grid li.wc-block-product .wc-block-components-product-price {
    padding: 0 var(--grina-space-xs);
  }
  .grina-products--grid .grina-products__grid li.wc-block-product .wp-block-woocommerce-product-price {
    margin-bottom: 0;
  }
  .grina-products--grid .grina-products__grid li.wc-block-product .wp-block-button {
    margin: auto var(--grina-space-xs) 0;
    padding-top: var(--grina-space-3xs);
  }
  .grina-products--grid .grina-products__grid li.wc-block-product .wp-block-button__link {
    min-height: 44px;
    padding: var(--grina-space-2xs);
    white-space: nowrap;
  }
  .grina-shop .grina-shop-pills ul {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--grina-space-sm));
    padding: 0 var(--grina-space-sm);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .grina-shop .grina-shop__title {
    line-height: var(--grina-leading-naslov);
    letter-spacing: var(--grina-tracking-naslov);
  }
  .grina-product .grina-product__details {
    padding: var(--grina-space-sm);
  }
  .grina-product .grina-product__step {
    padding: var(--grina-space-sm);
  }
  .grina-product .grina-product__label dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .grina-products--grid .grina-products__grid .wc-block-product-template.wc-block-product-template {
    gap: var(--grina-space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-product .grina-product__sticky {
    transition: none;
  }
  .grina-product .grina-product__step .grina-ticket::before {
    animation: none;
  }
}

/* ══ The cart, the checkout and the order-received page (launch plan, 2026-10-15) ══════════
   templates/checkout.php around WooCommerce's own forms; markup in woocommerce/cart/ and
   woocommerce/checkout/. Doubled classes: Woodmart styles the same forms at (0,2,0) and more. */
.grina-checkout-page .grina-checkout-page__head.grina-section {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  padding-bottom: 0;
}

.grina-checkout-page .grina-checkout-page__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  line-height: var(--grina-leading-naslov);
  letter-spacing: var(--grina-tracking-naslov);
}

.grina-checkout-page .grina-checkout-page__body.grina-section {
  padding-top: var(--grina-space-md);
  scroll-margin-top: 96px;
}

/* Phones (2026-11-02, Igor: "clunky layout a bit"): the head sits under the header's own space, the lines right under
   the title. */
@media (max-width: 767px) {
  .grina-checkout-page .grina-checkout-page__head.grina-section {
    padding-top: 0;
  }

  .grina-checkout-page .grina-checkout-page__body.grina-section {
    padding-top: var(--grina-space-sm);
  }

  .grina-checkout-page .grina-fill {
    margin-top: var(--grina-space-md);
  }
}

/* Wide screens: the head (steps, title) is taller above the lines; land with the title still under the header. */
@media (min-width: 768px) {
  .grina-checkout-page .grina-checkout-page__body.grina-section {
    scroll-margin-top: 180px;
  }
}

/* The line "Dodaj" just added (?grina_added): marked once, then plain. */
.grina-checkout-page .grina-cart-page__item.is-added {
  animation: grina-added 2.4s ease-out 1;
}

@keyframes grina-added {
  0%, 40% { background: var(--grina-color-sage-1); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .grina-checkout-page .grina-cart-page__item.is-added {
    animation: none;
    background: var(--grina-color-sage-1);
  }
}

/* The header's cart stays on the cart and the checkout, as a link to the cart (inc/checkout.php,
   grina_mini_cart_as_link; 2026-11-02, Igor: hiding it "moving forward the purchase flow … is a complication"). */
.grina-header .grina-cart a.wc-block-mini-cart__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

/* Three steps, a real sequence: Korpa, Podaci i dostava, Potvrda. */
.grina-checkout-page .grina-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-2xs) var(--grina-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: grina-step;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

.grina-checkout-page .grina-steps .grina-steps__step {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  margin: 0;
  counter-increment: grina-step;
}

.grina-checkout-page .grina-steps .grina-steps__step::before {
  content: counter(grina-step);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-quiet);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grina-checkout-page .grina-steps .grina-steps__step.is-done::before {
  background: var(--grina-color-sage-2);
  border-color: var(--grina-color-sage-2);
  color: var(--grina-color-pine);
}

.grina-checkout-page .grina-steps .grina-steps__step[aria-current="step"] {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-checkout-page .grina-steps .grina-steps__step[aria-current="step"]::before {
  background: var(--grina-color-pine);
  border-color: var(--grina-color-pine);
  color: var(--grina-color-paper);
}

.grina-checkout-page .grina-steps a {
  color: var(--grina-color-pine);
}

/* Notices: WooCommerce's and the plugins', in the page's voice. */
.grina-checkout-page .woocommerce .woocommerce-notices-wrapper:empty {
  display: none;
}

/* The checkout's note under "Ukupno" where the courier charges the delivery at the door (2026-11-01). It beats Woodmart's
   inline ".shop_table tr :is(td, th):last-child" and the review table's own "tfoot td" (both right-align). */
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tfoot tr.grina-courier-note td {
  padding-top: 0;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-telo);
  font-weight: 400;
  text-align: left;
}

.grina-checkout-page .woocommerce .woocommerce-message,
.grina-checkout-page .woocommerce .woocommerce-info,
.grina-checkout-page .woocommerce .woocommerce-error {
  margin: 0 0 var(--grina-space-sm);
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border: 0;
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  list-style: none;
}

.grina-checkout-page .woocommerce .woocommerce-error {
  color: var(--grina-color-clay);
}

.grina-checkout-page .woocommerce .woocommerce-message::before,
.grina-checkout-page .woocommerce .woocommerce-info::before,
.grina-checkout-page .woocommerce .woocommerce-error::before {
  display: none;
}

.grina-checkout-page .woocommerce .woocommerce-info a,
.grina-checkout-page .woocommerce .woocommerce-message a {
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: underline;
}

/* ── The cart: the lines beside the summary ── */
.grina-checkout-page--cart .grina-checkout-page__body > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: start;
  gap: var(--grina-space-lg);
}

.grina-checkout-page--cart .grina-checkout-page__body > .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

/* The grid's gap is the space under a notice; its own margin would double it. */
.grina-checkout-page--cart .woocommerce-notices-wrapper > :last-child {
  margin-bottom: 0;
}

/* Woodmart's 65 px notice inset for an icon we hide (!important there, so here; see the account pages). */
.grina-checkout-page .woocommerce .woocommerce-message,
.grina-checkout-page .woocommerce .woocommerce-info,
.grina-checkout-page .woocommerce .woocommerce-error {
  padding-inline: var(--grina-space-sm) !important;
}

.grina-cart-page.grina-cart-page {
  margin: 0;
}

.grina-cart-page .grina-cart-page__items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--grina-border-calm);
}

.grina-cart-page .grina-cart-page__item.grina-cart-page__item {
  display: grid;
  /* Every line is its own grid: the total column's floor keeps the steppers in one line. */
  grid-template-columns: 88px minmax(0, 1fr) auto minmax(10ch, auto);
  grid-template-areas:
    "media main qty total"
    "media main qty remove";
  align-items: center;
  gap: var(--grina-space-2xs) var(--grina-space-md);
  margin: 0;
  padding: var(--grina-space-sm) 0;
  border-bottom: var(--grina-border-calm);
}

.grina-cart-page .grina-cart-page__media {
  grid-area: media;
  align-self: start;
}

.grina-cart-page .grina-cart-page__media img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--grina-radius-field);
  background: var(--grina-color-sage-1);
}

.grina-cart-page .grina-cart-page__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  min-width: 0;
}

.grina-cart-page .grina-cart-page__main p,
.grina-cart-page .grina-cart-page__main dl {
  margin: 0;
}

.grina-cart-page .grina-cart-page__name a {
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: none;
}

.grina-cart-page .grina-cart-page__name a:hover {
  text-decoration: underline;
}

.grina-cart-page .grina-cart-page__main dl.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--grina-space-2xs);
  color: var(--grina-color-body);
  font-size: var(--grina-size-mono);
}

.grina-cart-page .grina-cart-page__main dl.variation dt,
.grina-cart-page .grina-cart-page__main dl.variation dd,
.grina-cart-page .grina-cart-page__main dl.variation dd p {
  margin: 0;
  float: none;
}

.grina-cart-page .grina-cart-page__unit,
.grina-cart-page .grina-cart-page__unit .amount.amount {
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.grina-cart-page .grina-cart-page__qty {
  grid-area: qty;
}

.grina-cart-page .grina-cart-page__total .amount.amount {
  color: var(--grina-color-pine);
}

.grina-cart-page .grina-cart-page__total {
  grid-area: total;
  margin: 0;
  color: var(--grina-color-pine);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.grina-cart-page .grina-cart-page__remove {
  grid-area: remove;
  margin: 0;
  text-align: right;
}

.grina-cart-page .grina-cart-page__remove a.remove.remove {
  display: inline;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
  font-weight: 400;
  line-height: var(--grina-leading-telo);
  text-decoration: underline;
}

.grina-cart-page .grina-cart-page__remove a.remove.remove:hover {
  background: none;
  color: var(--grina-color-clay);
}

/* The quantity stepper, Woodmart's markup (− input +) in the site's field shape. */
.grina-checkout-page .grina-cart-page__qty .quantity.quantity {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  margin: 0;
  overflow: hidden;
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-action);
}

.grina-checkout-page .grina-cart-page__qty .quantity.quantity input.minus,
.grina-checkout-page .grina-cart-page__qty .quantity.quantity input.plus {
  width: 40px;
  min-width: 40px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  cursor: pointer;
}

.grina-checkout-page .grina-cart-page__qty .quantity.quantity input.minus:hover,
.grina-checkout-page .grina-cart-page__qty .quantity.quantity input.plus:hover {
  background: var(--grina-color-sage-1);
}

.grina-checkout-page .grina-cart-page__qty .quantity.quantity input.qty {
  width: 40px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.grina-checkout-page .grina-cart-page__qty .quantity.quantity input.qty::-webkit-inner-spin-button,
.grina-checkout-page .grina-cart-page__qty .quantity.quantity input.qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.grina-checkout-page .grina-cart-page__qty .quantity.quantity input:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: -2px;
}

/* Under the lines: the coupon, folded, and "Osveži korpu" (the cart also updates by itself). */
.grina-cart-page .grina-cart-page__actions.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-sm) 0 0;
}

.grina-cart-page .grina-cart-page__coupon > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.grina-cart-page .grina-cart-page__coupon > summary::-webkit-details-marker {
  display: none;
}

.grina-cart-page .grina-cart-page__coupon .coupon.coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-2xs);
  margin: var(--grina-space-2xs) 0 0;
  float: none;
}

.grina-checkout-page .grina-cart-page__coupon .coupon input.input-text,
.grina-checkout-page .checkout_coupon.checkout_coupon input.input-text {
  min-height: 44px;
  width: 220px;
  max-width: 100%;
  padding: 0 var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
}

.grina-checkout-page .grina-cart-page__actions .button.button,
.grina-checkout-page .checkout_coupon.checkout_coupon .button.button {
  min-height: 44px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-paper);
  border: 1px solid var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
  box-shadow: none;
}

.grina-checkout-page .grina-cart-page__actions .button.button:hover,
.grina-checkout-page .checkout_coupon.checkout_coupon .button.button:hover {
  background: var(--grina-color-sage-1);
}

.grina-checkout-page .grina-cart-page__actions .button.button:disabled,
.grina-checkout-page .grina-cart-page__actions .button.button[disabled] {
  border-color: var(--grina-color-hairline);
  color: var(--grina-color-quiet);
  opacity: 1;
  cursor: default;
}

/* ── The summary card: the cart's, beside the lines; sticky while the lines scroll ── */
/* Woodmart wraps the totals in .cart-totals-inner (woocommerce_before_cart_totals); its children join the card's flow. */
.grina-checkout-page .grina-summary .cart-totals-inner.cart-totals-inner {
  display: contents;
}

.grina-checkout-page .grina-cart-page__aside.cart-collaterals {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--grina-space-3xl)); /* below the sticky header (audit 2026-10-18) */
  width: auto;
  margin: 0;
  float: none;
}

.grina-checkout-page .grina-summary.cart_totals {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  width: auto;
  margin: 0;
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
  float: none;
}

.grina-checkout-page .grina-summary .grina-summary__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-checkout-page .grina-summary .grina-summary__table,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

.grina-checkout-page .grina-summary .grina-summary__table th,
.grina-checkout-page .grina-summary .grina-summary__table td,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table th,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table td {
  padding: var(--grina-space-2xs) 0;
  background: none;
  border: 0;
  border-bottom: var(--grina-border-calm);
  color: var(--grina-color-body);
  font-size: var(--grina-size-telo);
  font-weight: 400;
  text-align: left;
  text-transform: none;
  vertical-align: top;
}

.grina-checkout-page .grina-summary .grina-summary__table td,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table td.product-total,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tfoot td {
  color: var(--grina-color-pine);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.grina-checkout-page .grina-summary .grina-summary__table tr.order-total th,
.grina-checkout-page .grina-summary .grina-summary__table tr.order-total td,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tr.order-total td {
  border-bottom: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: 700;
}

.grina-checkout-page .grina-summary tr.order-total small {
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
  font-weight: 400;
}

.grina-checkout-page .grina-summary .grina-summary__table .amount,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .amount {
  color: inherit;
}

.grina-checkout-page .grina-summary .wc-proceed-to-checkout {
  margin: 0;
  padding: 0;
}

.grina-checkout-page .grina-summary .wc-proceed-to-checkout a.checkout-button.checkout-button,
.grina-checkout-page .grina-checkout #place_order.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-pine);
  border: 0;
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
  box-shadow: none;
}

.grina-checkout-page .grina-summary .wc-proceed-to-checkout a.checkout-button.checkout-button:hover,
.grina-checkout-page .grina-checkout #place_order.button:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-checkout-page .grina-summary .wc-proceed-to-checkout a.checkout-button:focus-visible,
.grina-checkout-page .grina-checkout #place_order.button:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* The minimum-order and free-delivery line, as in the mini-cart, on the summary's Sage. */
.grina-summary .grina-cart-progress,
.wc-block-mini-cart__drawer .grina-cart-progress {
  font-family: var(--wp--preset--font-family--grina);
}

.grina-summary .grina-cart-progress {
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border-radius: var(--grina-radius-field);
  line-height: var(--grina-leading-sekcija);
}

.grina-summary .grina-cart-progress .grina-cart-progress__text {
  margin: 0 0 var(--grina-space-2xs);
  color: var(--grina-color-teal);
  font-weight: 700;
}

.grina-summary .grina-cart-progress[data-kind="min"] .grina-cart-progress__text {
  color: var(--grina-color-clay);
}

.grina-summary .grina-cart-progress .grina-cart-progress__bar {
  position: relative;
  height: 6px;
  overflow: hidden;
  background: var(--grina-color-sage-3);
  border-radius: var(--grina-radius-action);
}

.grina-summary .grina-cart-progress .grina-cart-progress__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--grina-cart-fill, 0%);
  background: var(--grina-color-teal);
}

.grina-summary .grina-cart-progress .grina-cart-progress__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--grina-cart-mark, 0%);
  width: 2px;
  background: var(--grina-color-pine);
}

/* The minimum, both places (Igor, 2026-10-29: "the limit line isn't as visible"): a Pine post taller than the
   bar, ringed in the box's own colour so it stays clear over the Teal fill, with "min. 1.500 rsd" under it.
   The bar lets it stand out (no overflow: hidden), so the fill carries the rounding itself. */
.wc-block-mini-cart__drawer .grina-cart-progress,
.grina-summary .grina-cart-progress {
  --grina-cart-ring: var(--grina-color-paper);
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__bar,
.grina-summary .grina-cart-progress .grina-cart-progress__bar {
  height: 8px;
  margin-top: var(--grina-space-2xs);
  overflow: visible;
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__bar:has(.grina-cart-progress__min),
.grina-summary .grina-cart-progress .grina-cart-progress__bar:has(.grina-cart-progress__min) {
  margin-bottom: var(--grina-space-md);
}

/* Free delivery reached: a full bar; the minimum's mark has nothing left to say. */
.wc-block-mini-cart__drawer .grina-cart-progress[data-kind="done"] .grina-cart-progress__bar,
.grina-summary .grina-cart-progress[data-kind="done"] .grina-cart-progress__bar {
  margin-bottom: 0;
}

.wc-block-mini-cart__drawer .grina-cart-progress[data-kind="done"] .grina-cart-progress__mark,
.wc-block-mini-cart__drawer .grina-cart-progress[data-kind="done"] .grina-cart-progress__min,
.grina-summary .grina-cart-progress[data-kind="done"] .grina-cart-progress__mark,
.grina-summary .grina-cart-progress[data-kind="done"] .grina-cart-progress__min {
  display: none;
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__fill,
.grina-summary .grina-cart-progress .grina-cart-progress__fill {
  border-radius: var(--grina-radius-action);
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__mark,
.grina-summary .grina-cart-progress .grina-cart-progress__mark {
  top: calc(var(--grina-space-3xs) * -1);
  bottom: calc(var(--grina-space-3xs) * -1);
  width: 4px;
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  box-shadow: 0 0 0 2px var(--grina-cart-ring);
  transform: translateX(-50%);
}

.wc-block-mini-cart__drawer .grina-cart-progress .grina-cart-progress__min,
.grina-summary .grina-cart-progress .grina-cart-progress__min {
  position: absolute;
  top: calc(100% + 8px);
  left: var(--grina-cart-mark, 0%);
  color: var(--grina-color-pine);
  font-size: var(--grina-size-mono);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* "Dostava i plaćanje": the rules, then cash on delivery, the deadline and the guarantee. */
/* The order-received page (woocommerce/checkout/thankyou.php, 2026-11-01): what happens next on the left, three
   steps in a framed panel; the order on Sage on the right; the account invitation under both. */
.grina-checkout-page .grina-thanks .grina-thanks__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--grina-space-xl);
}

.grina-checkout-page .grina-thanks .grina-thanks__lead {
  margin: 0 0 var(--grina-space-lg);
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  line-height: var(--grina-leading-sekcija);
  overflow-wrap: anywhere; /* a long email address on a phone */
}

.grina-checkout-page .grina-thanks .grina-thanks__h {
  margin: 0 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
}

.grina-checkout-page .grina-thanks .grina-thanks__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-checkout-page .grina-thanks .grina-thanks__step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--grina-space-sm);
  row-gap: var(--grina-space-3xs);
  margin: 0;
  padding: var(--grina-space-md);
}

.grina-checkout-page .grina-thanks .grina-thanks__step + .grina-thanks__step {
  border-top: var(--grina-border-calm);
}

.grina-checkout-page .grina-thanks .grina-thanks__step::before {
  content: "";
  grid-row: 1 / span 3;
  width: 24px;
  height: 24px;
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-step-icon) center / 24px no-repeat;
  mask: var(--grina-step-icon) center / 24px no-repeat;
}

.grina-checkout-page .grina-thanks .grina-thanks__step--clock { --grina-step-icon: url("icons/clock.svg"); }
.grina-checkout-page .grina-thanks .grina-thanks__step--truck { --grina-step-icon: url("icons/truck.svg"); }
.grina-checkout-page .grina-thanks .grina-thanks__step--cash { --grina-step-icon: url("icons/cash.svg"); }

.grina-checkout-page .grina-thanks .grina-thanks__step > * {
  grid-column: 2;
  margin: 0;
}

.grina-checkout-page .grina-thanks .grina-thanks__step h3 {
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: 24px;
}

.grina-checkout-page .grina-thanks .grina-thanks__step p {
  color: var(--grina-color-body);
  line-height: var(--grina-leading-telo);
}

.grina-checkout-page .grina-thanks .grina-thanks__address {
  color: var(--grina-color-quiet);
}

/* The cutoff status (assets/cutoff.js), as on a product page: "Sledeća obrada: Sutra", the rule under it. */
.grina-checkout-page .grina-thanks .grina-ticket {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--grina-space-3xs) var(--grina-space-2xs);
  padding: 0 0 0 var(--grina-space-sm);
}

.grina-checkout-page .grina-thanks .grina-ticket::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--grina-color-grove);
  border-radius: var(--grina-radius-action);
  animation: grina-pulse 2s ease-in-out infinite;
}

.grina-checkout-page .grina-thanks .grina-ticket p {
  margin: 0;
}

.grina-checkout-page .grina-thanks .grina-ticket .grina-ticket__label::after {
  content: ":";
}

.grina-checkout-page .grina-thanks .grina-ticket .grina-ticket__big {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-checkout-page .grina-thanks .grina-ticket .grina-ticket__text {
  flex-basis: 100%;
  color: var(--grina-color-quiet);
}

.grina-checkout-page .grina-thanks .grina-thanks__help {
  margin: var(--grina-space-md) 0 0;
  color: var(--grina-color-body);
}

.grina-checkout-page .grina-thanks .grina-thanks__help a {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-checkout-page .grina-thanks .grina-thanks__order {
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-checkout-page .grina-thanks .grina-thanks__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-checkout-page .grina-thanks .grina-thanks__items li,
.grina-checkout-page .grina-thanks .grina-thanks__total {
  display: flex;
  justify-content: space-between;
  gap: var(--grina-space-sm);
  margin: 0;
  padding: var(--grina-space-xs) 0;
  border-bottom: var(--grina-border-calm);
}

.grina-checkout-page .grina-thanks .grina-thanks__name {
  color: var(--grina-color-pine);
}

.grina-checkout-page .grina-thanks .grina-thanks__qty {
  color: var(--grina-color-quiet);
  white-space: nowrap;
}

.grina-checkout-page .grina-thanks .grina-thanks__price,
.grina-checkout-page .grina-thanks .grina-thanks__total dd {
  margin: 0;
  color: var(--grina-color-pine);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grina-checkout-page .grina-thanks .grina-thanks__totals {
  margin: 0;
}

/* The page's full width, aligned with its title (Woodmart centres .woocommerce-order at a narrower width). */
.grina-checkout-page--received .woocommerce-order.grina-thanks {
  max-width: none;
  margin: 0;
}

/* Woodmart paints every price in its primary green: here they are Pine, as the rest of the order. */
.grina-checkout-page .grina-thanks .grina-thanks__order .amount,
.grina-checkout-page .grina-thanks .grina-thanks__order bdi {
  color: inherit;
  font-weight: inherit;
}

.grina-checkout-page .grina-thanks .grina-thanks__total small {
  color: var(--grina-color-quiet);
}

.grina-checkout-page .grina-thanks .grina-thanks__total dt {
  margin: 0;
  color: var(--grina-color-body);
}

.grina-checkout-page .grina-thanks .grina-thanks__total--order_total {
  border-bottom: 0;
}

.grina-checkout-page .grina-thanks .grina-thanks__total--order_total dt,
.grina-checkout-page .grina-thanks .grina-thanks__total--order_total dd {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: 700;
}

.grina-checkout-page .grina-thanks .grina-thanks__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-sm) var(--grina-space-md);
  margin: var(--grina-space-md) 0 var(--grina-space-lg); /* under the confirmation, before "Šta sledi" */
  padding: var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-checkout-page .grina-thanks .grina-thanks__account p {
  flex: 1 1 360px;
  margin: 0;
  color: var(--grina-color-body);
}

.grina-checkout-page .grina-thanks .grina-thanks__account strong {
  color: var(--grina-color-pine);
}

.grina-checkout-page .grina-thanks .grina-thanks__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-weight: 700;
  text-decoration: none;
}

.grina-checkout-page .grina-thanks .grina-thanks__button:hover {
  background: var(--grina-color-grove);
}

.grina-checkout-page .grina-thanks a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .grina-checkout-page .grina-thanks .grina-thanks__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grina-checkout-page .grina-thanks .grina-ticket::before {
    animation: none;
  }
}

/* "Dopuni korpu" (2026-11-01): under the cart's lines while it is below the minimum; the bestsellers that make up
   the gap, each with a small photo, its price and "Dodaj". */
.grina-checkout-page .grina-fill {
  margin: var(--grina-space-lg) 0 0;
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
  scroll-margin-top: 120px;
}

.grina-checkout-page .grina-fill .grina-fill__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-checkout-page .grina-fill .grina-fill__line {
  margin: var(--grina-space-2xs) 0 var(--grina-space-sm);
  color: var(--grina-color-body);
}

.grina-checkout-page .grina-fill .grina-fill__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-checkout-page .grina-fill .grina-fill__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "photo name add" "photo price add";
  align-items: center;
  column-gap: var(--grina-space-sm);
  margin: 0;
  padding: var(--grina-space-2xs);
  background: var(--grina-color-paper);
  border-radius: var(--grina-radius-field);
}

.grina-checkout-page .grina-fill .grina-fill__photo {
  grid-area: photo;
  display: block;
  overflow: hidden;
  border-radius: var(--grina-radius-field);
}

.grina-checkout-page .grina-fill .grina-fill__photo img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.grina-checkout-page .grina-fill .grina-fill__name {
  grid-area: name;
  align-self: end;
  color: var(--grina-color-pine);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.grina-checkout-page .grina-fill .grina-fill__price {
  grid-area: price;
  align-self: start;
  color: var(--grina-color-body);
  font-variant-numeric: tabular-nums;
}

.grina-checkout-page .grina-fill .grina-fill__add {
  grid-area: add;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--grina-space-sm);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-weight: 700;
  text-decoration: none;
}

.grina-checkout-page .grina-fill .grina-fill__add:hover {
  background: var(--grina-color-grove);
}

.grina-checkout-page .grina-fill .grina-fill__shop {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--grina-space-sm);
  padding: 0 var(--grina-space-md);
  border: 1.5px solid var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: none;
}

.grina-checkout-page .grina-fill .grina-fill__shop:hover {
  background: var(--grina-color-paper);
}

.grina-checkout-page .grina-fill a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .grina-checkout-page .grina-fill .grina-fill__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The Google rating under the cart's and the checkout's button (2026-11-01): score, five stars, the count. */
.grina-checkout-page .grina-trust {
  margin: var(--grina-space-xs) 0 0;
  text-align: center;
}

.grina-checkout-page .grina-trust a {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-2xs);
  color: var(--grina-color-body);
  text-decoration: none;
}

.grina-checkout-page .grina-trust .grina-trust__score {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-checkout-page .grina-trust .grina-trust__stars {
  width: 76px;
  height: 14px;
  background: url("icons/google-stars-5.svg") left center / contain no-repeat;
}

.grina-checkout-page .grina-trust a:hover .grina-trust__count {
  text-decoration: underline;
}

.grina-delivery-box.grina-delivery-box {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0;
  color: var(--grina-color-body);
  font-size: var(--grina-size-mono);
  line-height: var(--grina-leading-telo);
}

.grina-delivery-box .grina-delivery-box__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  font-weight: 700;
}

.grina-delivery-box .grina-delivery-box__rules,
.grina-delivery-box .grina-delivery-box__perks {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-delivery-box .grina-delivery-box__rules li {
  margin: 0;
  padding-left: var(--grina-space-sm);
  position: relative;
}

.grina-delivery-box .grina-delivery-box__rules li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--grina-color-grove);
  border-radius: var(--grina-radius-action);
}

.grina-delivery-box .grina-delivery-box__perks {
  gap: var(--grina-space-2xs);
  padding-top: var(--grina-space-xs);
  border-top: var(--grina-border-calm);
}

.grina-delivery-box .grina-delivery-box__perk {
  margin: 0;
  padding: 0 0 0 var(--grina-space-lg);
  background: left 1px / 20px no-repeat;
}

.grina-delivery-box .grina-delivery-box__perk--cash {
  color: var(--grina-color-pine);
  font-weight: 700;
  background-image: url("icons/cash.svg");
}

.grina-delivery-box .grina-delivery-box__perk--truck {
  background-image: url("icons/truck.svg");
}

.grina-delivery-box .grina-delivery-box__perk--shield {
  background-image: url("icons/shield.svg");
}

/* The empty cart: Woodmart's block (icon, title, line, button) in the site's type and button. */
.grina-checkout-page .woocommerce .cart-empty.wc-empty-cart-message {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-checkout-page .woocommerce .return-to-shop a.button.wc-backward {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
  box-shadow: none;
}

.grina-checkout-page .woocommerce .return-to-shop a.button.wc-backward:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

/* ── The checkout: the details, and the order with the button beside them ── */
.grina-checkout-page--checkout .grina-checkout-page__body > .woocommerce {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
}

/* "Već imaš nalog? Prijavi se" and "Imaš kod za popust? Unesi ga ovde": two quiet lines, not boxes. */
.grina-checkout-page .woocommerce-form-login-toggle .woocommerce-info.woocommerce-info,
.grina-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info.woocommerce-info {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--grina-color-body);
}

/* Woodmart colours these two links with !important through its primary colour; scoped here to Pine. */
.grina-checkout-page .woocommerce-form-login-toggle.woocommerce-form-login-toggle,
.grina-checkout-page .woocommerce-form-coupon-toggle.woocommerce-form-coupon-toggle {
  --wd-primary-color: var(--grina-color-pine);
}

.grina-checkout-page .woocommerce-form-login-toggle .woocommerce-info a.showlogin,
.grina-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: underline;
}

.grina-checkout-page .grina-checkout .form-row label .required.required {
  color: var(--grina-color-clay);
  text-decoration: none;
}

.grina-checkout-page .woocommerce form.woocommerce-form-login.login,
.grina-checkout-page .woocommerce form.checkout_coupon.checkout_coupon {
  margin: 0;
  padding: var(--grina-space-sm);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
}

.grina-checkout-page .grina-checkout.grina-checkout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--grina-space-lg);
  margin-top: var(--grina-space-sm);
}

/* The errors after "Poruči" (2026-11-02, Igor: "error screen is broken"): WooCommerce puts them first in the form, so
   they took the details' column and pushed the form and the order a row down. Across both columns, a quiet list: each
   field's name links to it, and the field itself says it again. */
.grina-checkout-page .grina-checkout.grina-checkout > .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
}

.grina-checkout-page .grina-checkout .woocommerce-NoticeGroup .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grina-space-3xs) var(--grina-space-md);
  margin: 0;
  padding-block: var(--grina-space-sm);
  color: var(--grina-color-clay);
}

.grina-checkout-page .grina-checkout .woocommerce-NoticeGroup .woocommerce-error li {
  margin: 0;
  padding: 0;
}

.grina-checkout-page .grina-checkout .woocommerce-NoticeGroup .woocommerce-error a {
  color: var(--grina-color-clay);
  font-weight: 400;
  text-decoration: none;
}

.grina-checkout-page .grina-checkout .woocommerce-NoticeGroup .woocommerce-error a strong {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grina-checkout-page .grina-checkout .grina-checkout__aside {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--grina-space-3xl)); /* below the sticky header (audit 2026-10-18) */
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-checkout-page .grina-checkout h3,
.grina-checkout-page .grina-checkout .grina-checkout__heading {
  margin: 0 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-checkout-page .grina-checkout .grina-checkout__heading {
  margin: 0;
}

.grina-checkout-page .grina-checkout .grina-checkout__customer {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-md);
}

.grina-checkout-page .grina-checkout .woocommerce-billing-fields__field-wrapper,
.grina-checkout-page .grina-checkout .woocommerce-shipping-fields__field-wrapper,
.grina-checkout-page .grina-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-sm);
}

.grina-checkout-page .grina-checkout .form-row.form-row {
  grid-column: 1 / -1;
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}

.grina-checkout-page .grina-checkout .form-row.form-row-first,
.grina-checkout-page .grina-checkout .form-row.form-row-last {
  grid-column: auto;
}

.grina-checkout-page .grina-checkout .form-row.grina-field--hidden {
  display: none;
}

.grina-checkout-page .grina-checkout .form-row label {
  display: block;
  margin: 0 0 var(--grina-space-3xs);
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  line-height: var(--grina-leading-telo);
}

.grina-checkout-page .grina-checkout .form-row label .optional {
  color: var(--grina-color-quiet);
  font-weight: 400;
}

.grina-checkout-page .grina-checkout .form-row label abbr.required {
  color: var(--grina-color-clay);
  text-decoration: none;
}

.grina-checkout-page .grina-checkout .form-row .input-text.input-text,
.grina-checkout-page .grina-checkout .form-row textarea.input-text {
  width: 100%;
  min-height: 48px;
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  box-shadow: none;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
}

/* The delivery note: about four lines (Igor 2026-11-01: "bigger in height, but not too big"). The doubled class
   outranks the field rule above, which held it at 48 px. */
.grina-checkout-page .grina-checkout .form-row textarea.input-text.input-text {
  height: 120px;
  min-height: 120px;
  resize: vertical;
}

.grina-checkout-page .grina-checkout .form-row .input-text::placeholder {
  color: var(--grina-color-quiet);
  opacity: 1;
}

.grina-checkout-page .grina-checkout .form-row .input-text:focus,
.grina-checkout-page .grina-checkout .form-row .input-text:focus-visible {
  border-color: var(--grina-color-teal);
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-checkout-page .grina-checkout .form-row.woocommerce-invalid .input-text {
  border-color: var(--grina-color-clay);
}

.grina-checkout-page .grina-checkout .form-row.woocommerce-validated .input-text {
  border-color: var(--grina-color-grove);
}

.grina-checkout-page .grina-checkout .form-row .description {
  display: block;
  position: static;
  margin: var(--grina-space-3xs) 0 0;
  padding: 0;
  background: none;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

.grina-checkout-page .grina-checkout .form-row .description::before {
  display: none;
}

.grina-checkout-page .grina-checkout #ship-to-different-address {
  margin: 0;
  font-size: var(--grina-size-telo);
}

.grina-checkout-page .grina-checkout .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-xs);
  min-height: 44px;
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  cursor: pointer;
}

.grina-checkout-page .grina-checkout input[type="checkbox"].input-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--grina-color-pine);
}

.grina-checkout-page .grina-checkout .shipping_address {
  padding-top: var(--grina-space-sm);
}

/* The order beside the form: lines, totals, then payment and the button. */
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table td.product-name {
  color: var(--grina-color-pine);
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .product-quantity {
  color: var(--grina-color-quiet);
  font-weight: 400;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table dl.variation {
  margin: var(--grina-space-3xs) 0 0;
  color: var(--grina-color-body);
  font-size: var(--grina-size-mono);
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table dl.variation dt,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table dl.variation dd,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table dl.variation p {
  display: inline;
  margin: 0;
  float: none;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table #shipping_method li {
  margin: 0;
  text-align: right;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table #shipping_method label {
  display: inline;
  color: var(--grina-color-pine);
  font-weight: 400;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table #shipping_method label p {
  display: inline;
  margin: 0;
}

/* "Tvoja porudžbina" (2026-11-02): Woodmart makes each row a flex box centred on its cells, so a taller cell (the
   delivery's list) dropped "Dostava" below its price and left that cell's border as a short stray line. One baseline
   per row, and the row draws the line. */
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tfoot tr {
  align-items: baseline;
  border-bottom: var(--grina-border-calm);
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tfoot tr th,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tfoot tr td {
  border-bottom: 0;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tfoot tr.grina-courier-note {
  border-bottom: 0;
}

/* Its lines: photo, name with the quantity, price under them, remove at the end; one compact row each. */
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table td.wd-checkout-prod {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "img cont remove";
  align-items: center;
  gap: var(--grina-space-xs);
  padding: var(--grina-space-xs) 0;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-prod-img {
  grid-area: img;
  width: 56px;
  margin: 0;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-prod-img img {
  display: block;
  width: 56px;
  min-width: 0;
  max-width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--grina-radius-field);
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-prod-cont {
  grid-area: cont;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--grina-space-3xs);
  min-width: 0;
  margin: 0;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-prod-title {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-prod-title .cart-product-label {
  font-weight: 600;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-prod-title .product-quantity {
  color: var(--grina-color-quiet);
  font-weight: 400;
  white-space: nowrap;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-prod-total {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-align: left;
}

.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table .wd-checkout-remove-btn-wrapp {
  grid-area: remove;
  margin: 0;
}

.grina-checkout-page .grina-checkout .grina-delivery-box {
  padding: var(--grina-space-sm);
  background: var(--grina-color-paper);
  border-radius: var(--grina-radius-field);
}

.grina-checkout-page .grina-checkout #payment.woocommerce-checkout-payment {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* One way to pay: the method reads as a fact, not as a choice with one option. */
.grina-checkout-page .grina-checkout #payment ul.payment_methods {
  margin: 0 0 var(--grina-space-sm);
  padding: 0;
  border: 0;
  list-style: none;
}

.grina-checkout-page .grina-checkout #payment ul.payment_methods li.wc_payment_method {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.grina-checkout-page .grina-checkout #payment ul.payment_methods li:only-child > input.input-radio {
  display: none;
}

.grina-checkout-page .grina-checkout #payment ul.payment_methods li > label {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-checkout-page .grina-checkout #payment ul.payment_methods div.payment_box {
  margin: var(--grina-space-3xs) 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--grina-color-body);
  font-size: var(--grina-size-mono);
}

.grina-checkout-page .grina-checkout #payment ul.payment_methods div.payment_box::before {
  display: none;
}

.grina-checkout-page .grina-checkout #payment ul.payment_methods div.payment_box p {
  margin: 0;
}

.grina-checkout-page .grina-checkout #payment .place-order.place-order {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
  padding: 0;
}

.grina-checkout-page .grina-checkout .woocommerce-privacy-policy-text p {
  margin: 0;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

.grina-checkout-page .grina-checkout .woocommerce-privacy-policy-text a,
.grina-checkout-page .grina-checkout .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--grina-color-pine);
  text-decoration: underline;
}

.grina-checkout-page .grina-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
  padding: 0;
}

.grina-checkout-page .grina-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-weight: 400;
}

/* ── The order-received page ── */
.grina-checkout-page--received .woocommerce-order.woocommerce-order:not(.grina-thanks) {
  max-width: 760px;
  font-family: var(--wp--preset--font-family--grina);
}

.grina-checkout-page--received .woocommerce-order .woocommerce-thankyou-order-received.woocommerce-thankyou-order-received {
  margin: 0 0 var(--grina-space-md);
  padding: 0;
  border: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-align: left;
}

.grina-checkout-page--received .woocommerce-order .woocommerce-order-details,
.grina-checkout-page--received .woocommerce-order .woocommerce-customer-details {
  margin: 0 0 var(--grina-space-lg);
}

.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details th,
.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details td,
.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details td a {
  font-family: var(--wp--preset--font-family--grina);
}

.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details th,
.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details td {
  padding: var(--grina-space-xs) 0;
  border: 0;
  border-bottom: var(--grina-border-calm);
  color: var(--grina-color-body);
  font-size: var(--grina-size-telo);
  text-align: left;
  text-transform: none;
}

.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details td:last-child,
.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details th:last-child {
  text-align: right;
}

.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details .amount.amount {
  color: var(--grina-color-pine);
}

.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.grina-checkout-page--received .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-checkout-page--received .woocommerce-order .woocommerce-customer-details.woocommerce-customer-details address {
  padding: var(--grina-space-sm);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-body);
  font-style: normal;
}

.grina-checkout-page--received .woocommerce-order ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--grina-space-sm);
  margin: 0 0 var(--grina-space-lg);
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
  list-style: none;
}

.grina-checkout-page--received .woocommerce-order ul.woocommerce-order-overview li {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--grina-color-body);
  font-size: var(--grina-size-mono);
  text-align: left;
  text-transform: none;
}

.grina-checkout-page--received .woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-telo);
}

.grina-checkout-page--received .woocommerce-order h2.h2,
.grina-checkout-page--received .woocommerce-order h2.woocommerce-column__title,
.grina-checkout-page--received .woocommerce-order h2.woocommerce-order-details__title {
  margin: 0 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  text-transform: none;
}

/* ── The mini-cart drawer: the site's typeface and buttons, and only what a shopper needs ── */
body .wc-block-mini-cart__drawer.wc-block-mini-cart__drawer,
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-button {
  font-family: var(--wp--preset--font-family--grina);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title.wc-block-mini-cart__title {
  margin-top: var(--grina-space-sm); /* WooCommerce 11.2 moved it to -2px (mini-cart-contents.css); 11.0's 16px */
  color: var(--grina-color-pine);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  letter-spacing: var(--grina-tracking-naslov);
}

/* The line's − 1 + box. WooCommerce 11.2 draws its border from a :where() rule (no specificity), and Woodmart's
   reset (`div { border: 0 }`) wins, so the stepper lost its outline (measured 2026-11-05, staging). The site's
   field shape (11.0 drew 1px of currentColor at 30% with a 4px radius, which are not tokens). */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
}

/* "(stavki: 1)": the list right under it already shows how many. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block.wp-block-woocommerce-mini-cart-title-items-counter-block {
  display: none;
}

/* The short description (Grina's, with claims) and "Dostupno za avansnu kupovinu" (everything is made to order). */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description.wc-block-components-product-metadata__description,
.wc-block-mini-cart__drawer .wc-block-components-product-backorder-badge.wc-block-components-product-backorder-badge {
  display: none;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name.wc-block-components-product-name {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button.wc-block-components-button {
  min-height: 48px;
  border-radius: var(--grina-radius-action);
  font-size: var(--grina-size-telo);
  font-weight: 700;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout.wc-block-components-button {
  background: var(--grina-color-pine);
  border-color: var(--grina-color-pine);
  color: var(--grina-color-paper);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout.wc-block-components-button:hover {
  background: var(--grina-color-grove);
  border-color: var(--grina-color-grove);
}

/* One row (2026-10-29): "Pogledaj korpu" as an underlined link, then the one button that moves the order on. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-subtotal.wc-block-mini-cart__footer-subtotal {
  margin-bottom: var(--grina-space-xs);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions.wc-block-mini-cart__footer-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--grina-space-sm);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button {
  flex: none;
  width: auto;
  min-height: 44px;
  padding: 0 var(--grina-space-3xs);
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--grina-color-grove);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button:hover {
  background: transparent;
  color: var(--grina-color-pine);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout.wc-block-components-button {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}

/* A change inside the drawer shows at once (assets/cart-progress.js): the removed row fades, and the subtotal
   and the line dim until WooCommerce answers. */
.wc-block-mini-cart__drawer .wc-block-cart-items__row.grina-cart-row--leaving {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s;
}

.grina-cart-saving .wc-block-mini-cart__drawer .grina-cart-progress,
.grina-cart-saving .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
  opacity: 0.45;
  transition: opacity 0.2s;
}

/* WooCommerce moves focus to the row after a change, and the browser drew its blue box round it; the row is no
   control. The drawer's buttons trade WooCommerce's blue focus ring (body:not(.woocommerce-block-theme-has-button-
   styles) … :focus, hence `body` here) for the site's Teal one, shown to the keyboard only. */
.wc-block-mini-cart__drawer .wc-block-cart-items__row:focus {
  outline: none;
}

body .wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-drawer__close:focus,
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button.wc-block-components-button:focus {
  outline: none;
  box-shadow: none;
}

body .wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-drawer__close:focus-visible,
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button.wc-block-components-button:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-mini-cart__drawer .wc-block-cart-items__row.grina-cart-row--leaving,
  .grina-cart-saving .wc-block-mini-cart__drawer .grina-cart-progress,
  .grina-cart-saving .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .grina-checkout-page--cart .grina-checkout-page__body > .woocommerce,
  .grina-checkout-page .grina-checkout.grina-checkout {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-checkout-page .grina-cart-page__aside.cart-collaterals,
  .grina-checkout-page .grina-checkout .grina-checkout__aside {
    position: static;
  }
}

@media (max-width: 559px) {
  .grina-cart-page .grina-cart-page__item.grina-cart-page__item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "media main main"
      "media qty total"
      "media qty remove";
    gap: var(--grina-space-2xs) var(--grina-space-sm);
  }
  .grina-cart-page .grina-cart-page__media img {
    width: 72px;
    height: 72px;
  }
  .grina-checkout-page .grina-summary.cart_totals,
  .grina-checkout-page .grina-checkout .grina-checkout__aside {
    padding: var(--grina-space-sm);
  }
  .grina-checkout-page .grina-checkout .woocommerce-billing-fields__field-wrapper,
  .grina-checkout-page .grina-checkout .woocommerce-shipping-fields__field-wrapper {
    gap: var(--grina-space-xs);
  }
}

/* ══ Moja platforma: the account pages, the email-link login, the orders (launch plan, 2026-10-15) ══
   templates/account.php around WooCommerce's account shortcode; markup in woocommerce/myaccount/
   and inc/portal.php. */
.grina-account-page .grina-account-page__head.grina-section {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  padding-bottom: 0;
}

.grina-account-page .grina-account-page__kicker {
  margin: 0;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

.grina-account-page .grina-account-page__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  line-height: var(--grina-leading-naslov);
  letter-spacing: var(--grina-tracking-naslov);
}

.grina-account-page .grina-account-page__body.grina-section {
  padding-top: var(--grina-space-md);
}

.grina-account-page .woocommerce .woocommerce-notices-wrapper:empty {
  display: none;
}

.grina-account-page .woocommerce .woocommerce-message,
.grina-account-page .woocommerce .woocommerce-info,
.grina-account-page .woocommerce .woocommerce-error {
  margin: 0 0 var(--grina-space-sm);
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border: 0;
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  list-style: none;
}

.grina-account-page .woocommerce .woocommerce-error {
  color: var(--grina-color-clay);
}

/* Woodmart keeps 65 px on the left of every notice for an icon we hide, with !important
   (mod-notices-general.css: padding-inline: 65px 30px !important); only !important answers it. */
.grina-account-page .woocommerce .woocommerce-message,
.grina-account-page .woocommerce .woocommerce-info,
.grina-account-page .woocommerce .woocommerce-error {
  padding-inline: var(--grina-space-sm) !important;
}

.grina-account-page .woocommerce .woocommerce-info.woocommerce-info:has(> a.wc-forward) {
  padding-inline: var(--grina-space-md) !important;
}

.grina-account-page .woocommerce .woocommerce-message::before,
.grina-account-page .woocommerce .woocommerce-info::before,
.grina-account-page .woocommerce .woocommerce-error::before {
  display: none;
}

/* WooCommerce's "Potvrdi email" prompt on "Moje porudžbine": the sentence first, the button under it, left-aligned
   (it printed button, then text, centred and wrapped round it). The sentence is a bare text node, so the link moves. */
.grina-account-page .woocommerce .woocommerce-info.woocommerce-info:has(> a.wc-forward) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-md);
  text-align: left;
}

.grina-account-page .woocommerce .woocommerce-info > a.button.wc-forward {
  order: 1;
  margin: 0;
}

/* The menu beside the page; a row of tabs on a phone. */
.grina-account.grina-account {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: var(--grina-space-xl);
}

.grina-account .grina-account__nav.woocommerce-MyAccount-navigation {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--grina-space-3xl)); /* below the sticky header (audit 2026-10-18) */
  width: auto;
  float: none;
}

.grina-account .grina-account__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-account .grina-account__nav li {
  margin: 0;
  padding: 0;
  border: 0;
}

.grina-account .grina-account__nav li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--grina-space-sm);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-body);
  font-weight: 400;
  text-decoration: none;
}

.grina-account .grina-account__nav li a:hover {
  background: var(--grina-color-sage-1);
  color: var(--grina-color-pine);
}

.grina-account .grina-account__nav li a[aria-current="page"],
.grina-account .grina-account__nav li.woocommerce-MyAccount-navigation-link.is-active > a {
  background: var(--grina-color-sage-1);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-account .grina-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: var(--grina-space-sm);
  padding-top: var(--grina-space-sm);
  border-top: var(--grina-border-calm);
}

.grina-account .grina-account__nav li a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-account .grina-account__content.woocommerce-MyAccount-content {
  width: auto;
  min-width: 0;
  float: none;
}

/* ── Moj ritam ── */
.grina-ritam.grina-ritam {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-lg);
}

.grina-ritam .grina-ritam__hello {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-ritam .grina-ritam__line {
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-telo);
  font-weight: 400;
}

.grina-ritam .grina-ritam__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grina-space-xs);
  margin: 0 0 var(--grina-space-sm);
}

.grina-ritam .grina-ritam__title,
.grina-account-page .grina-ritam__empty .grina-ritam__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-ritam .grina-ritam__next .grina-ritam__title {
  margin: 0 0 var(--grina-space-sm);
}

.grina-ritam .grina-ritam__all {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-ritam .grina-ritam__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--grina-space-sm);
}

/* With the cutoff ticket off (inc/features.php, 2026-11-04) the package card is alone: it takes the row. */
.grina-ritam .grina-ritam__cards > :only-child {
  grid-column: 1 / -1;
}

.grina-account-page .grina-ritam__empty.grina-ritam__empty {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-account-page .grina-ritam__empty p {
  margin: 0;
}

.grina-account-page .grina-ritam__empty a.grina-ritam__shop,
.grina-account-page .grina-order-card a.grina-order-card__again,
.grina-account-page .grina-login .grina-login__button,
.grina-thanks-portal .grina-thanks-portal__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-pine);
  border: 0;
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}

.grina-account-page .grina-ritam__empty a.grina-ritam__shop:hover,
.grina-account-page .grina-order-card a.grina-order-card__again:hover,
.grina-account-page .grina-login .grina-login__button:hover,
.grina-thanks-portal .grina-thanks-portal__cta a:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-account-page .grina-ritam__empty a.grina-ritam__shop:focus-visible,
.grina-account-page .grina-order-card a.grina-order-card__again:focus-visible,
.grina-account-page .grina-login .grina-login__button:focus-visible,
.grina-thanks-portal .grina-thanks-portal__cta a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* Today's order deadline beside the next package (the product page's ticket, as a card; cutoff.js fills it). */
.grina-ritam .grina-ritam__ticket.grina-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: var(--grina-space-md) var(--grina-space-md) var(--grina-space-md) var(--grina-space-xl);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-ritam .grina-ritam__ticket.grina-ticket::before {
  content: "";
  position: absolute;
  top: calc(var(--grina-space-md) + 0.45em);
  left: var(--grina-space-md);
  width: 8px;
  height: 8px;
  background: var(--grina-color-grove);
  border-radius: var(--grina-radius-action);
}

.grina-ritam .grina-ritam__ticket p {
  margin: 0;
  color: var(--grina-color-quiet);
}

.grina-ritam .grina-ritam__ticket .grina-ticket__label {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-ritam .grina-ritam__ticket .grina-ticket__big {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  line-height: var(--grina-leading-naslov);
  letter-spacing: var(--grina-tracking-naslov);
}

/* The welcome code: 10% on the next purchase, until it is used. */
.grina-account-page .grina-welcome.grina-welcome {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: var(--grina-space-md);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-card);
  color: var(--grina-color-on-dark);
}

.grina-account-page .grina-welcome p {
  margin: 0;
}

.grina-account-page .grina-welcome .grina-welcome__title {
  color: var(--grina-color-on-dark);
  font-weight: 700;
}

.grina-account-page .grina-welcome .grina-welcome__code {
  color: var(--grina-color-on-dark);
  font-family: var(--wp--preset--font-family--grina-mono);
  font-size: var(--grina-size-naslov);
  font-weight: 700;
  user-select: all;
}

.grina-account-page .grina-welcome .grina-welcome__text {
  color: var(--grina-color-on-dark-quiet);
}

/* ── An order as a card (Moj ritam and Moje porudžbine) ── */
.grina-account-page .grina-orders.grina-orders {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
}

.grina-account-page .grina-order-card.grina-order-card {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
  padding: var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-account-page .grina-order-card.grina-order-card--lead {
  background: var(--grina-color-sage-1);
  border-color: var(--grina-color-sage-1);
}

.grina-account-page .grina-order-card .grina-order-card__head,
.grina-account-page .grina-order-card .grina-order-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--grina-space-xs);
}

.grina-account-page .grina-order-card p {
  margin: 0;
}

.grina-account-page .grina-order-card .grina-order-card__date {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-account-page .grina-order-card .grina-order-card__number {
  color: var(--grina-color-quiet);
  font-weight: 400;
}

.grina-account-page .grina-order-card .grina-order-card__status {
  padding: var(--grina-space-3xs) var(--grina-space-xs);
  background: var(--grina-color-paper);
  border: 1px solid var(--grina-color-clay);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-clay);
  font-size: var(--grina-size-mono);
}

.grina-account-page .grina-order-card .grina-order-card__items {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-account-page .grina-order-card .grina-order-card__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--grina-space-sm);
  margin: 0;
}

.grina-account-page .grina-order-card .grina-order-card__item img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--grina-radius-field);
  background: var(--grina-color-sage-1);
}

.grina-account-page .grina-order-card .grina-order-card__name {
  color: var(--grina-color-body);
}

.grina-account-page .grina-order-card .grina-order-card__qty,
.grina-account-page .grina-order-card .grina-order-card__more {
  color: var(--grina-color-quiet);
  font-variant-numeric: tabular-nums;
}

.grina-account-page .grina-order-card .grina-order-card__total {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grina-account-page .grina-order-card .grina-order-card__total .amount.amount {
  color: inherit;
}

.grina-account-page .grina-order-card .grina-order-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grina-space-sm);
}

.grina-account-page .grina-order-card a.grina-order-card__details,
.grina-account-page .grina-order-card a.grina-order-card__action {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-account-page .grina-orders__pages.woocommerce-pagination {
  display: flex;
  gap: var(--grina-space-sm);
  margin: var(--grina-space-md) 0 0;
}

/* An order's page: "Kupi ponovo" first, then WooCommerce's details in the site's type. */
.grina-account-page .grina-order-again.grina-order-again {
  margin: 0 0 var(--grina-space-md);
}

.grina-account-page .woocommerce-MyAccount-content table.woocommerce-table--order-details,
.grina-account-page .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
.grina-account-page .woocommerce-MyAccount-content table.woocommerce-table--order-details td {
  font-family: var(--wp--preset--font-family--grina);
  text-transform: none;
}

.grina-account-page .woocommerce-MyAccount-content table.woocommerce-table--order-details .amount.amount {
  color: var(--grina-color-pine);
}

.grina-account-page .woocommerce-MyAccount-content h2.woocommerce-order-details__title,
.grina-account-page .woocommerce-MyAccount-content h2.woocommerce-column__title {
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  text-transform: none;
}

.grina-account-page .woocommerce-MyAccount-content .woocommerce-customer-details.woocommerce-customer-details address {
  font-style: normal;
}

/* ── The login: the email link first, the password folded; what an account gives beside it (2026-11-01) ── */
.grina-account-page .grina-login-wrap {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: start;
  gap: var(--grina-space-xl);
}

.grina-account-page .grina-login-perks {
  padding: var(--grina-space-lg) 0 0;
}

.grina-account-page .grina-login-perks .grina-login-perks__title {
  margin: 0 0 var(--grina-space-sm);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-account-page .grina-login-perks ul {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each with its icon on a Sage circle, as a category's facts: the circle and the icon share the first cell. */
.grina-account-page .grina-login-perks .grina-login-perks__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--grina-space-sm);
  margin: 0;
  color: var(--grina-color-body);
}

.grina-account-page .grina-login-perks .grina-login-perks__item::before,
.grina-account-page .grina-login-perks .grina-login-perks__item::after {
  content: "";
  grid-area: 1 / 1;
  width: 44px;
  height: 44px;
}

.grina-account-page .grina-login-perks .grina-login-perks__item::before {
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-action);
}

.grina-account-page .grina-login-perks .grina-login-perks__item::after {
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-perk-icon) center / 22px no-repeat;
  mask: var(--grina-perk-icon) center / 22px no-repeat;
}

@media (max-width: 1023px) {
  .grina-account-page .grina-login-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-lg);
  }
  .grina-account-page .grina-login-perks {
    padding-top: 0;
  }
}

.grina-account-page .grina-login.grina-login {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-md);
  max-width: 520px;
}

.grina-account-page .grina-login .grina-login__card {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-lg);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-account-page .grina-login .grina-login__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-account-page .grina-login .grina-login__text,
.grina-account-page .grina-login .grina-login__again,
.grina-account-page .grina-login .grina-login__warn {
  margin: 0;
  color: var(--grina-color-body);
}

.grina-account-page .grina-login .grina-login__warn {
  color: var(--grina-color-clay);
  font-weight: 700;
}

.grina-account-page .grina-login .grina-login__again a {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-account-page .grina-login .grina-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: 0;
  padding: 0;
  border: 0;
}

.grina-account-page .grina-login .grina-login__button {
  width: 100%;
}

/* The honeypot: out of sight and out of the tab order, still in the form. */
.grina-account-page .grina-login .grina-login__trap.grina-login__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.grina-account-page .grina-login .grina-login__password > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--grina-color-pine);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.grina-account-page .grina-login .grina-login__password > summary::-webkit-details-marker {
  display: none;
}

.grina-account-page .grina-login .grina-login__password form.woocommerce-form-login {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  margin: var(--grina-space-xs) 0 0;
  padding: var(--grina-space-md);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

/* Fields across the account pages (login, addresses, details): the checkout's shape. */
.grina-account-page .woocommerce .form-row.form-row {
  width: auto;
  margin: 0 0 var(--grina-space-sm);
  padding: 0;
  float: none;
}

.grina-account-page .grina-login .form-row.form-row {
  margin: 0;
}

.grina-account-page .woocommerce .form-row label {
  display: block;
  margin: 0 0 var(--grina-space-3xs);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-account-page .woocommerce .form-row label.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-xs);
}

.grina-account-page .woocommerce .form-row .input-text.input-text,
.grina-account-page .woocommerce .form-row select {
  width: 100%;
  min-height: 48px;
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  box-shadow: none;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
}

.grina-account-page .woocommerce .form-row .input-text:focus-visible,
.grina-account-page .woocommerce .form-row select:focus-visible {
  border-color: var(--grina-color-teal);
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-account-page .woocommerce .form-row label .required.required {
  color: var(--grina-color-clay);
}

.grina-account-page .woocommerce .woocommerce-form-login__submit.button,
.grina-account-page .woocommerce-MyAccount-content .button.button {
  min-height: 48px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-paper);
  border: 1px solid var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
  box-shadow: none;
}

.grina-account-page .woocommerce .woocommerce-form-login__submit.button:hover,
.grina-account-page .woocommerce-MyAccount-content .button.button:hover {
  background: var(--grina-color-sage-1);
}

.grina-account-page .woocommerce .lost_password a {
  color: var(--grina-color-pine);
}

/* ── The thank-you page's way into Moja platforma ── */
.grina-thanks-portal.grina-thanks-portal {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0 0 var(--grina-space-md);
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-thanks-portal .grina-thanks-portal__title,
.grina-thanks-portal .grina-thanks-portal__text,
.grina-thanks-portal .grina-thanks-portal__cta {
  margin: 0;
}

.grina-thanks-portal .grina-thanks-portal__title {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-thanks-portal .grina-thanks-portal__text {
  color: var(--grina-color-body);
}

@media (max-width: 1023px) {
  .grina-account.grina-account {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-md);
  }
  .grina-account .grina-account__nav.woocommerce-MyAccount-navigation {
    position: static;
  }
  .grina-account .grina-account__nav ul {
    flex-direction: row;
    margin: 0 calc(-1 * var(--grina-space-sm));
    padding: 0 var(--grina-space-sm);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .grina-account .grina-account__nav li a {
    border: var(--grina-border-calm);
    border-radius: var(--grina-radius-action);
    white-space: nowrap;
  }
  .grina-account .grina-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .grina-ritam .grina-ritam__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559px) {
  .grina-account-page .grina-order-card.grina-order-card,
  .grina-account-page .grina-login .grina-login__card {
    padding: var(--grina-space-sm);
  }
  .grina-account-page .grina-order-card .grina-order-card__actions {
    width: 100%;
  }
  .grina-account-page .grina-order-card a.grina-order-card__again {
    flex: 1 1 auto;
  }
}

/* ══ The content pages off Elementor (launch plan, 2026-10-15) ═══════════════════════════════
   templates/pages/*.php. Igor: the content identical to live, only the layout ours. The words arrive as
   Grina's own HTML (inc/page-copy/, generated), so these rules style plain p, h4, ul and strong inside. */
.grina-page .grina-page__head.grina-section {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  padding-bottom: 0;
}

.grina-page .grina-page__head .grina-crumbs {
  margin: 0;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-mono);
}

.grina-page .grina-page__head .grina-crumbs a {
  color: var(--grina-color-quiet);
  text-decoration: none;
}

.grina-page .grina-page__head .grina-crumbs a:hover {
  color: var(--grina-color-pine);
}

.grina-page .grina-page__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-display);
  font-weight: var(--grina-weight-display);
  line-height: var(--grina-leading-display);
  letter-spacing: var(--grina-tracking-display);
}

.grina-page .grina-page__lead {
  max-width: 60ch;
  margin: 0;
  color: var(--grina-color-body);
  font-size: var(--grina-size-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-page.grina-page .grina-page__kicker {
  margin: 0;
  color: var(--grina-color-grove);
  font-weight: 700;
}

.grina-page .grina-page__section.grina-section {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  padding-top: var(--grina-space-lg);
  padding-bottom: 0;
}

.grina-page > .grina-page__section.grina-section:last-child {
  padding-bottom: var(--grina-space-xl);
}

.grina-page .grina-page__h2 {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-page h3.grina-page__h2 {
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-telo);
  font-weight: 700;
}

/* Grina's own text: paragraphs, h4 labels, lists. */
.grina-page .grina-page-text.grina-prose {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  color: var(--grina-color-body);
}

.grina-page .grina-page-text.grina-prose p,
.grina-page .grina-page-text.grina-prose ul,
.grina-page .grina-page-text.grina-prose ol,
.grina-page .grina-page-text.grina-prose h4 {
  margin: 0;
}

.grina-page .grina-page-text.grina-prose h4 {
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
}

.grina-page .grina-page-text.grina-prose strong,
.grina-page .grina-page-text.grina-prose b {
  color: var(--grina-color-pine);
}

.grina-page .grina-page-text.grina-prose a {
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-page .grina-page-text.grina-prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-2xs);
  padding-left: var(--grina-space-md);
}

.grina-page .grina-page-text.grina-prose li {
  margin: 0;
}

/* Two columns on a wide screen, one on a phone. */
.grina-page .grina-page-split.grina-page-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--grina-space-md);
}

.grina-page .grina-page-split--form.grina-page-split--form {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.grina-page .grina-page-card {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-md);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
  color: var(--grina-color-body);
}

.grina-page .grina-page-card--sage.grina-page-card--sage {
  background: var(--grina-color-sage-1);
  border-color: var(--grina-color-sage-1);
}

.grina-page .grina-page-figure {
  margin: 0;
}

.grina-page .grina-page-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--grina-radius-card);
}

.grina-page.grina-page .grina-page-buttons {
  margin: 0;
}

.grina-page a.grina-page__button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-weight: 700;
  text-decoration: none;
}

.grina-page a.grina-page__button:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-page a:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

/* Dostava: Grina's four numbered steps with her icons. */
.grina-page .grina-page-steps.grina-page-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grina-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-page .grina-page-steps .grina-page-steps__step {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0;
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
  color: var(--grina-color-pine);
  font-weight: 700;
}

.grina-page .grina-page-steps .grina-page-figure img {
  width: 48px;
  height: 48px;
  border-radius: 0;
}

/* Reading pages: the story, Naučni radovi, O nama. One column, aligned with the title. */
.grina-page .grina-page-story-text,
.grina-page .grina-page-reading {
  gap: var(--grina-space-md);
}

.grina-page.grina-page .grina-page-story-text > *,
.grina-page.grina-page .grina-page-reading > * {
  max-width: 68ch;
}

.grina-page .grina-page-story-text .grina-page-figure img {
  max-height: 560px;
  object-fit: cover;
}

/* O nama: the way to the founder's story. */
.grina-page a.grina-page-story {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--grina-space-sm) var(--grina-space-md);
  padding: var(--grina-space-lg);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-card);
  color: var(--grina-color-on-dark);
  text-decoration: none;
}

.grina-page .grina-page-story .grina-page-story__title {
  color: var(--grina-color-on-dark);
  font-size: var(--grina-size-naslov);
  font-weight: var(--grina-weight-naslov);
  line-height: var(--grina-leading-naslov);
}

.grina-page .grina-page-story .grina-page-story__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-leaf);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-ink-on-leaf);
  font-weight: 700;
}

/* Vodiči: the covers, the five "what is inside" boxes, the two guide cards. */
.grina-page .grina-page-covers.grina-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: var(--grina-space-md);
}

.grina-page .grina-page-benefits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grina-space-sm);
}

.grina-page .grina-page-benefits .grina-page-iconbox {
  padding: var(--grina-space-sm);
  color: var(--grina-color-pine);
}

.grina-page .grina-page-iconbox .grina-prose {
  margin: 0;
}

.grina-page .grina-guides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grina-space-md);
}

.grina-page .grina-guides .grina-guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
  padding: var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-card);
}

.grina-page .grina-guide-card h3.grina-page__h2 {
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
}

/* Kontakt: the details stacked beside Grina's WPForms form, in the site's fields. */
.grina-page .grina-page-contact {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-sm);
}

.grina-page .grina-page-form .wpforms-container.wpforms-container {
  margin: 0;
}

.grina-page .grina-page-form .wpforms-form .wpforms-field.wpforms-field {
  padding: 0 0 var(--grina-space-sm);
}

.grina-page .grina-page-form .wpforms-form .wpforms-field-label.wpforms-field-label {
  margin: 0 0 var(--grina-space-3xs);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
}

.grina-page .grina-page-form .wpforms-form input[type="text"].wpforms-field-large,
.grina-page .grina-page-form .wpforms-form input[type="email"].wpforms-field-large,
.grina-page .grina-page-form .wpforms-form textarea.wpforms-field-large,
.grina-page .grina-page-form .wpforms-form .wpforms-field-row input {
  width: 100%;
  max-width: none;
  min-height: 48px;
  padding: var(--grina-space-xs) var(--grina-space-sm);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-field);
  box-shadow: none;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
}

.grina-page .grina-page-form .wpforms-form textarea.wpforms-field-large {
  min-height: 140px;
}

.grina-page .grina-page-form .wpforms-form .wpforms-field-medium.wpforms-field-medium,
.grina-page .grina-page-form .wpforms-form .wpforms-field-row.wpforms-field-medium {
  max-width: none;
}

.grina-page .grina-page-form .wpforms-form input:focus-visible,
.grina-page .grina-page-form .wpforms-form textarea:focus-visible {
  border-color: var(--grina-color-teal);
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-page .grina-page-form .wpforms-form .wpforms-submit-container button.wpforms-submit {
  min-height: 48px;
  padding: 0 var(--grina-space-lg);
  background: var(--grina-color-pine);
  border: 0;
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
}

.grina-page .grina-page-form .wpforms-form .wpforms-submit-container button.wpforms-submit:hover {
  background: var(--grina-color-grove);
}

.grina-page .grina-page-form .wpforms-confirmation-container-full.wpforms-confirmation-container-full {
  margin: 0;
  padding: var(--grina-space-sm);
  background: var(--grina-color-sage-1);
  border: 0;
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
}

/* The thank-you was pasted from Google Translate as a <pre>: body text, not code. */
.grina-page .grina-page-form .wpforms-confirmation-container-full pre {
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  white-space: normal;
}

/* Spisak, empty: Woodmart's block with its own words, in the site's type and button. */
.grina-page .grina-page-wishlist .wd-empty-wishlist.wd-empty-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--grina-space-sm);
  text-align: left;
}

.grina-page .grina-page-wishlist .wd-empty-wishlist.wd-empty-block::before,
.grina-page .grina-page-wishlist .wd-empty-wishlist .wd-empty-block-title::before {
  display: none;
}

.grina-page .grina-page-wishlist .wd-empty-wishlist .wd-empty-block-title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
}

.grina-page .grina-page-wishlist .wd-empty-wishlist .wd-empty-block-text {
  margin: 0;
  color: var(--grina-color-body);
  text-align: left;
}

.grina-page .grina-page-wishlist .wd-empty-wishlist a.wd-empty-block-btn.button {
  min-height: 48px;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-paper);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
}

@media (max-width: 1023px) {
  .grina-page .grina-page-steps.grina-page-steps,
  .grina-page .grina-page-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grina-page .grina-page-split.grina-page-split,
  .grina-page .grina-page-split--form.grina-page-split--form,
  .grina-page .grina-guides {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559px) {
  .grina-page .grina-page__title {
    font-size: var(--grina-size-naslov);
    line-height: var(--grina-leading-naslov);
    letter-spacing: var(--grina-tracking-naslov);
  }
  .grina-page .grina-page-steps.grina-page-steps,
  .grina-page .grina-page-benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grina-space-xs);
  }
  /* Grina's icon beside her words: four steps in half a screen. */
  .grina-page .grina-page-steps .grina-page-steps__step {
    flex-direction: row;
    align-items: center;
    padding: var(--grina-space-sm);
  }
  .grina-page .grina-page-steps .grina-page-figure img {
    width: 40px;
    height: 40px;
  }
  .grina-page .grina-page-card,
  .grina-page .grina-guides .grina-guide-card,
  .grina-page a.grina-page-story {
    padding: var(--grina-space-sm);
  }
  .grina-page .grina-page-covers.grina-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The guides' landings and thank-you pages (templates/pages/vodic.php, vodic-hvala.php). */
.grina-page .grina-page__section .grina-page__head.grina-section {
  max-width: none;
  margin: 0;
  padding: 0;
}

.grina-page .grina-page-hero.grina-page__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: center;
  gap: var(--grina-space-xl);
}

.grina-page .grina-page-hero .grina-page-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--grina-space-sm);
}

.grina-page .grina-page-hero .grina-page-figure img {
  border-radius: var(--grina-radius-card);
}

.grina-page.grina-page .grina-page-note {
  margin: 0;
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-telo);
}

.grina-page button.grina-page__button.grina-page__button--guide {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-leaf);
  border: 0;
  border-radius: var(--grina-radius-action);
  box-shadow: none;
  color: var(--grina-color-ink-on-leaf);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
}

.grina-page button.grina-page__button.grina-page__button--guide:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-page button.grina-page__button.grina-page__button--guide:focus-visible {
  outline: 2px solid var(--grina-color-teal);
  outline-offset: 2px;
}

.grina-page .grina-page-list.grina-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grina-page .grina-page-list.grina-page-list > li {
  position: relative;
  margin: 0;
  padding-left: var(--grina-space-md);
  color: var(--grina-color-body);
}

.grina-page .grina-page-list.grina-page-list > li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: var(--grina-space-3xs);
  width: 8px;
  height: 8px;
  background: var(--grina-color-leaf);
  border-radius: 50%;
}

.grina-page .grina-page-list.grina-page-list--numbered {
  counter-reset: grina-list;
}

.grina-page .grina-page-list.grina-page-list--numbered > li {
  counter-increment: grina-list;
  padding: var(--grina-space-sm) var(--grina-space-sm) var(--grina-space-sm) var(--grina-space-2xl);
  background: var(--grina-color-paper);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-page .grina-page-list.grina-page-list--numbered > li::before {
  content: counter(grina-list);
  top: var(--grina-space-sm);
  left: var(--grina-space-sm);
  width: auto;
  height: auto;
  background: none;
  color: var(--grina-color-grove);
  font-weight: 700;
}

.grina-page .grina-page-list li p,
.grina-page .grina-page-faq .grina-prose p {
  margin: 0;
}

.grina-page .grina-page-faq {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-xs);
}

.grina-page .grina-page-define .grina-page-iconbox__title,
.grina-page .grina-page-help .grina-page-iconbox__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

.grina-page .grina-page-define .grina-page-iconbox.grina-page-card,
.grina-page .grina-page-help .grina-page-iconbox.grina-page-card {
  padding: 0;
  background: none;
  border: 0;
}

.grina-page .grina-page-card.grina-page-get {
  align-items: flex-start;
}

/* Icons on the guides and on Kontakt (Igor 2026-11-01: "add some icons, pretty it up a bit"; live had icon boxes there,
   which the rebuild had left as text). One line icon per card, in grove, from assets/icons; the words stay live's. */
.grina-page .grina-page-benefits .grina-page-iconbox::before,
.grina-page .grina-guides .grina-guide-card::before,
.grina-page.grina-page--vodici .grina-page-card--sage::before,
.grina-page .grina-page-card.grina-page-define::before,
.grina-page .grina-page-card.grina-page-get::before,
.grina-page .grina-page-card.grina-page-help::before,
.grina-page .grina-page-contact .grina-page-card::before,
.grina-page .grina-page-card.grina-page-contact-form::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-ico) center / contain no-repeat;
  mask: var(--grina-ico) center / contain no-repeat;
}

.grina-page .grina-page-benefits .grina-page-iconbox:nth-child(1) { --grina-ico: url("icons/book.svg"); }
.grina-page .grina-page-benefits .grina-page-iconbox:nth-child(2) { --grina-ico: url("icons/sprout.svg"); }
.grina-page .grina-page-benefits .grina-page-iconbox:nth-child(3) { --grina-ico: url("icons/bowl.svg"); }
.grina-page .grina-page-benefits .grina-page-iconbox:nth-child(4) { --grina-ico: url("icons/star.svg"); }
.grina-page .grina-page-benefits .grina-page-iconbox:nth-child(5) { --grina-ico: url("icons/clock.svg"); }
.grina-page .grina-guides .grina-guide-card:nth-child(1) { --grina-ico: url("icons/leaf.svg"); }
.grina-page .grina-guides .grina-guide-card:nth-child(2) { --grina-ico: url("icons/bowl.svg"); }
.grina-page.grina-page--vodici .grina-page-card--sage { --grina-ico: url("icons/clipboard.svg"); }
.grina-page .grina-page-card.grina-page-define { --grina-ico: url("icons/leaf.svg"); }
.grina-page .grina-page-card.grina-page-get { --grina-ico: url("icons/mail.svg"); }
.grina-page .grina-page-card.grina-page-help { --grina-ico: url("icons/chat.svg"); }
.grina-page .grina-page-contact .grina-page-card:nth-child(1) { --grina-ico: url("icons/pin.svg"); }
.grina-page .grina-page-contact .grina-page-card:nth-child(2) { --grina-ico: url("icons/phone.svg"); }
.grina-page .grina-page-contact .grina-page-card:nth-child(3) { --grina-ico: url("icons/mail.svg"); }
.grina-page .grina-page-card.grina-page-contact-form { --grina-ico: url("icons/chat.svg"); }

/* Kontakt's details: the icon beside the label and the value. */
.grina-page .grina-page-contact .grina-page-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: var(--grina-space-3xs) var(--grina-space-sm);
}

.grina-page .grina-page-contact .grina-page-card::before {
  grid-row: 1 / span 2;
}

.grina-page .grina-page-contact .grina-page-card > * {
  grid-column: 2;
  margin: 0;
}

/* The guides' lists: Grina's sprout instead of a dot; "for whom" was numbered though it is no sequence: a check. */
.grina-page.grina-page--vodic .grina-page-list.grina-page-list > li,
.grina-page .grina-guide-card ul > li {
  position: relative;
  padding-left: var(--grina-space-md);
  list-style: none;
}

.grina-page .grina-guide-card ul {
  margin: 0;
  padding: 0;
}

.grina-page .grina-guide-card ul > li {
  margin: 0 0 var(--grina-space-3xs);
}

.grina-page.grina-page--vodic .grina-page-list.grina-page-list > li::before,
.grina-page .grina-guide-card ul > li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--grina-color-grove);
  border-radius: 0;
  -webkit-mask: url("icons/sprout.svg") center / contain no-repeat;
  mask: url("icons/sprout.svg") center / contain no-repeat;
}

.grina-page.grina-page--vodic .grina-page-list.grina-page-list--numbered > li {
  padding-left: var(--grina-space-2xl);
}

.grina-page.grina-page--vodic .grina-page-list.grina-page-list--numbered > li::before {
  content: "";
  top: var(--grina-space-sm);
  left: var(--grina-space-sm);
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("icons/check.svg");
  mask-image: url("icons/check.svg");
}

@media (min-width: 1024px) {
  .grina-page.grina-page--vodic .grina-page-list.grina-page-list--numbered {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The family photo on O nama and the story (live's page-title photo), at its own wide ratio: never cropped. */
.grina-page .grina-page-photo {
  margin: 0;
}

.grina-page .grina-page-photo .grina-page-photo__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--grina-radius-card);
  /* The file was darkened on live to sit under a white title (mean luminance 48 of 255): shown as a photo, lifted back. */
  filter: brightness(1.6) saturate(1.05);
}

/* "Šta je … ishrana?": a long paragraph, held to a reading measure. */
.grina-page .grina-page-define .grina-prose {
  max-width: 72ch;
}

.grina-page .grina-page-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grina-space-md);
}

.grina-page .grina-page-next .grina-page-next__card {
  justify-content: space-between;
}

.grina-page .grina-page-next .grina-page-iconbox.grina-page-card {
  gap: var(--grina-space-2xs);
  padding: 0;
  border: 0;
}

.grina-page .grina-page-next .grina-page-iconbox__title {
  margin: 0;
  color: var(--grina-color-pine);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
}

@media (max-width: 1023px) {
  .grina-page .grina-page-hero.grina-page__section,
  .grina-page .grina-page-next {
    grid-template-columns: minmax(0, 1fr);
  }
  .grina-page .grina-page-hero .grina-page-figure {
    max-width: 280px;
  }
}

/* Upitnik and the hidden coupon (templates/pages/upitnik.php, skriveni-kupon.php). */
.grina-page .grina-page-quiz .grina-page-figure img {
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--grina-radius-card);
}

.grina-page .grina-page-quiz .grina-page-quiz__form {
  max-width: 760px;
}

.grina-page .grina-page-card.grina-page-reward {
  align-items: flex-start;
  max-width: 760px;
}

.grina-page .grina-page-reward .grina-page-reward__text {
  margin: 0;
  color: var(--grina-color-body);
}

.grina-page .grina-page-reward .grina-page-reward__code {
  margin: 0;
  padding: var(--grina-space-xs) var(--grina-space-md);
  background: var(--grina-color-paper);
  border: 2px dashed var(--grina-color-grove);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* The cookie notice (inc/cookie-notice.php): bottom left on a wide screen; on a phone a slim bar on the bottom edge,
   lifted only where the cart bar sits there (Igor 2026-11-01: "too big on mobile and placement is bad"). */
.grina-cookie.grina-cookie {
  position: fixed;
  bottom: var(--grina-space-sm);
  left: var(--grina-space-sm);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--grina-space-sm);
  max-width: 520px;
  padding: var(--grina-space-sm) var(--grina-space-md);
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-card);
  color: var(--grina-color-on-dark);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
}

.grina-cookie.grina-cookie[hidden] {
  display: none;
}

.grina-cookie .grina-cookie__text {
  margin: 0;
  color: var(--grina-color-on-dark);
}

.grina-cookie .grina-cookie__text a {
  color: var(--grina-color-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grina-cookie button.grina-cookie__ok {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--grina-space-md);
  background: var(--grina-color-leaf);
  border: 0;
  border-radius: var(--grina-radius-action);
  color: var(--grina-color-ink-on-leaf);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
}

.grina-cookie button.grina-cookie__ok:hover {
  background: var(--grina-color-grove);
  color: var(--grina-color-paper);
}

.grina-cookie button.grina-cookie__ok:focus-visible,
.grina-cookie .grina-cookie__text a:focus-visible {
  outline: 2px solid var(--grina-color-leaf);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .grina-cookie.grina-cookie {
    right: var(--grina-space-2xs);
    bottom: calc(var(--grina-space-2xs) + env(safe-area-inset-bottom, 0px));
    left: var(--grina-space-2xs);
    gap: var(--grina-space-xs);
    max-width: none;
    padding: var(--grina-space-2xs) var(--grina-space-2xs) var(--grina-space-2xs) var(--grina-space-sm);
    border-radius: var(--grina-radius-action);
    outline: 1px solid var(--grina-color-on-dark-quiet); /* its edge over the pine footer */
  }

  .grina-cookie .grina-cookie__text {
    line-height: 1.4;
  }

  .grina-cookie button.grina-cookie__ok {
    padding: 0 var(--grina-space-sm);
  }

  /* Above the product and package cart bars, which show up to 1023 px (audit 2026-10-18). */
  body:has(.grina-product__sticky, .grina-paket__sticky) .grina-cookie.grina-cookie {
    bottom: calc(var(--grina-space-3xl) + var(--grina-space-lg));
  }
}

/* The footer is white since 2026-11-02: its button keeps the site's own focus ring (was the light one on Pine). */


/* ══ The account menu's icons (2026-11-02, Igor: "add some descriptive icons in this nav") ══ */
.grina-header .grina-mega__link--ico a {
  display: inline-flex;
  align-items: center;
  gap: var(--grina-space-xs);
}

.grina-header .grina-mega__link--ico a::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: var(--grina-color-grove);
  -webkit-mask: var(--grina-ico) center / contain no-repeat;
  mask: var(--grina-ico) center / contain no-repeat;
}

.grina-header .grina-ico--user   { --grina-ico: url("icons/user.svg"); }
.grina-header .grina-ico--sprout { --grina-ico: url("icons/sprout.svg"); }
.grina-header .grina-ico--box    { --grina-ico: url("icons/box.svg"); }
.grina-header .grina-ico--repeat { --grina-ico: url("icons/repeat.svg"); }
.grina-header .grina-ico--heart  { --grina-ico: url("icons/heart.svg"); }
.grina-header .grina-ico--truck  { --grina-ico: url("icons/truck.svg"); }
.grina-header .grina-ico--chat   { --grina-ico: url("icons/chat.svg"); }
.grina-header .grina-ico--logout { --grina-ico: url("icons/logout.svg"); }

/* ══ Spisak (Woodmart's wishlist page): its head in the site's type, not Arial capitals ══ */
/* Woodmart's fonts are its variables: here they are the site's (titles were Arial capitals). */
.grina-account-page--wishlist,
.grina-page--spisak {
  --wd-title-font: var(--wp--preset--font-family--grina);
  --wd-entities-title-font: var(--wp--preset--font-family--grina);
  --wd-text-font: var(--wp--preset--font-family--grina);
}

.grina-account-page--wishlist .wd-wishlist-head h4.title,
.grina-page--spisak .wd-wishlist-head h4.title {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  text-transform: none;
}

.grina-account-page--wishlist .wd-wishlist-head .wd-label.share-title,
.grina-page--spisak .wd-wishlist-head .wd-label.share-title {
  color: var(--grina-color-quiet);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 400;
}

/* ══ Adrese and Detalji naloga (2026-11-02): their headings and the password box in the site's type, not Arial ══ */
.grina-account-page .woocommerce-Addresses h2,
.grina-account-page .woocommerce-Address-title h2,
.grina-account-page .woocommerce-address-fields h2,
.grina-account-page .woocommerce-EditAccountForm legend {
  margin: 0;
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-sekcija);
  font-weight: var(--grina-weight-sekcija);
  line-height: var(--grina-leading-sekcija);
  text-transform: none;
}

.grina-account-page .woocommerce-Address-title a.edit {
  color: var(--grina-color-pine);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grina-account-page .woocommerce-Address address {
  color: var(--grina-color-body);
  font-style: normal;
}

.grina-account-page .woocommerce-EditAccountForm em,
.grina-account-page .woocommerce-EditAccountForm #account_display_name_description {
  color: var(--grina-color-quiet);
  font-size: var(--grina-size-telo);
  font-style: normal;
}

.grina-account-page .woocommerce-EditAccountForm fieldset {
  margin: var(--grina-space-lg) 0 var(--grina-space-md);
  padding: var(--grina-space-md);
  border: var(--grina-border-calm);
  border-radius: var(--grina-radius-card);
}

.grina-account-page .woocommerce-EditAccountForm legend {
  padding: 0 var(--grina-space-2xs);
}

/* A coupon the cart refused, under its field (assets/cart-coupon.js). */
.grina-cart-page .grina-cart-page__coupon .grina-coupon-note,
.grina-cart-page .grina-cart-page__coupon .coupon-error-notice {
  flex-basis: 100%;
  margin: var(--grina-space-2xs) 0 0;
  color: var(--grina-color-clay);
  font-size: var(--grina-size-telo);
}

/* Detalji naloga for an account opened by the email link: how they sign in, where the password box was. */
.grina-account-page .woocommerce-EditAccountForm .grina-account-note {
  margin: var(--grina-space-md) 0;
  padding: var(--grina-space-sm) var(--grina-space-md);
  background: var(--grina-color-sage-1);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-body);
  font-size: var(--grina-size-telo);
}

/* An applied coupon stands out (2026-11-02, Igor: "a bit more visible"): the notice in pine with a tag, the totals'
   line in grove. */
/* The banner while a code is in the cart (cart: over the lines; checkout: over "Tvoja porudžbina"). */
.grina-checkout-page .grina-coupon-banner {
  display: flex;
  flex-direction: column;
  gap: var(--grina-space-3xs);
  margin: 0 0 var(--grina-space-sm);
  padding: var(--grina-space-sm) var(--grina-space-md) var(--grina-space-sm) var(--grina-space-2xl);
  position: relative;
  background: var(--grina-color-pine);
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-paper);
  font-size: var(--grina-size-telo);
}

.grina-checkout-page .grina-coupon-banner::before {
  content: "";
  position: absolute;
  top: var(--grina-space-sm);
  left: var(--grina-space-md);
  width: 22px;
  height: 22px;
  background: var(--grina-color-leaf);
  -webkit-mask: url("icons/tag.svg") center / contain no-repeat;
  mask: url("icons/tag.svg") center / contain no-repeat;
}

.grina-checkout-page .grina-coupon-banner .grina-coupon-banner__line {
  margin: 0;
  color: var(--grina-color-paper);
}

.grina-checkout-page .grina-coupon-banner strong {
  color: var(--grina-color-paper);
  font-weight: 700;
}

.grina-checkout-page .grina-coupon-slot:empty {
  display: none;
}

.grina-checkout-page .woocommerce .woocommerce-message:has(.grina-coupon-ok) {
  display: flex;
  align-items: center;
  gap: var(--grina-space-xs);
  padding-block: var(--grina-space-sm);
  background: var(--grina-color-pine);
  color: var(--grina-color-paper);
  font-size: var(--grina-size-telo);
}

.grina-checkout-page .woocommerce .woocommerce-message:has(.grina-coupon-ok)::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  position: static; /* Woodmart's icon slot is absolute, at the left padding */
  width: 22px;
  height: 22px;
  margin: 0;
  transform: none;
  background: var(--grina-color-leaf);
  -webkit-mask: url("icons/tag.svg") center / contain no-repeat;
  mask: url("icons/tag.svg") center / contain no-repeat;
}

.grina-checkout-page .woocommerce .woocommerce-message .grina-coupon-ok strong {
  color: var(--grina-color-paper);
  font-weight: 700;
}

.grina-checkout-page .grina-summary .grina-summary__table tr.cart-discount th,
.grina-checkout-page .grina-summary .grina-summary__table tr.cart-discount td,
.grina-checkout-page .grina-summary .grina-summary__table tr.cart-discount td .amount,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tr.cart-discount th,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tr.cart-discount td,
.grina-checkout-page .grina-checkout .woocommerce-checkout-review-order-table tr.cart-discount td .amount {
  color: var(--grina-color-grove);
  font-weight: 700;
}

/* The amount and its × on one line (WooCommerce wraps the amount in a <p>). */
.grina-checkout-page tr.cart-discount td {
  white-space: nowrap;
}

.grina-checkout-page tr.cart-discount td p {
  display: inline;
  margin: 0;
}

.grina-checkout-page tr.cart-discount td a.woocommerce-remove-coupon {
  margin-left: var(--grina-space-2xs);
  vertical-align: middle;
}

/* Tablets and phones: one column, the brand and its button, then the guides. HRANI ŽIVOT. stays one line (display
   size is 34px on phones). */
@media (max-width: 1023px) {
  .grina-footer .grina-footer__band {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--grina-space-xl);
  }
  .grina-footer .grina-footer__band > .grina-footer__pitch-wrap,
  .grina-footer .grina-footer__band > .grina-footer__guides {
    grid-column: 1;
  }
  .grina-footer .grina-footer__guides {
    max-width: 360px;
  }
}

@media (max-width: 559px) {
  .grina-footer .grina-footer__band {
    padding: var(--grina-space-2xl) 0 var(--grina-space-xl);
  }
}

/* ══ The offer bar (inc/offer-bar.php, 2026-11-03): one slim Pine line above the header while the offer runs ══ */
.grina-offer.grina-offer {
  position: relative;
  margin: 0;
  padding: var(--grina-space-2xs) calc(var(--grina-gutter) + var(--grina-space-lg));
  background: var(--grina-color-pine);
  color: var(--grina-color-on-dark);
  font-family: var(--wp--preset--font-family--grina);
  font-size: var(--grina-size-telo);
  line-height: var(--grina-leading-telo);
  text-align: center;
}

.grina-offer[hidden] {
  display: none;
}

.grina-offer .grina-offer__link {
  display: block;
  color: var(--grina-color-on-dark);
  text-decoration: none;
}

.grina-offer .grina-offer__text {
  display: inline;
  margin: 0;
  color: var(--grina-color-on-dark);
}

.grina-offer .grina-offer__text[hidden] {
  display: none;
}

.grina-offer .grina-offer__cta {
  margin-left: var(--grina-space-3xs);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grina-offer .grina-offer__link:hover .grina-offer__cta {
  text-decoration-thickness: 2px;
}

.grina-offer .grina-offer__text strong {
  color: var(--grina-color-on-dark);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Woodmart styles every <button>: the close declares all it needs. */
.grina-offer button.grina-offer__close {
  position: absolute;
  top: 50%;
  right: var(--grina-gutter);
  min-height: 0;
  margin: 0;
  padding: var(--grina-space-3xs) var(--grina-space-2xs);
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  border-radius: var(--grina-radius-field);
  color: var(--grina-color-on-dark-quiet);
  font-size: var(--grina-size-sekcija);
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

/* Until the code is taken there is no close (offer-bar.js, 2026-11-04); Woodmart's button display must not undo hidden. */
.grina-offer button.grina-offer__close[hidden] {
  display: none;
}

.grina-offer button.grina-offer__close:hover,
.grina-offer button.grina-offer__close:focus-visible {
  background: transparent;
  color: var(--grina-color-on-dark);
}

.grina-offer button.grina-offer__close:focus-visible,
.grina-offer .grina-offer__link:focus-visible {
  outline: 2px solid var(--grina-color-on-dark);
  outline-offset: 2px;
}

/* ══ The drawer's hierarchy (2026-11-03, Igor: "parent nav item vs. sub-items on mobile aren't clear enough") ══
   Parents are the drawer's largest words, in sentence case, each section closed by a hairline; their items hang off a
   thin Sage stem, smaller and in Body. Childless parents (Upitnik, O nama) read as the same rows. The account menu is
   a section of its own (desktop keeps its dropdown under the person icon). */
.grina-header .grina-nav__group--account {
  display: none;
}

@media (max-width: 1023px) {
  .grina-header .grina-nav.grina-nav {
    gap: 0;
  }

  .grina-header .grina-nav > .grina-nav__group,
  .grina-header .grina-nav > .grina-nav__item {
    padding: var(--grina-space-sm) 0;
    border-bottom: var(--grina-border-calm);
  }

  .grina-header .grina-nav > .grina-nav__close {
    padding-bottom: var(--grina-space-xs);
  }

  .grina-header .grina-nav__group--account {
    display: block;
  }

  /* Moj nalog is a parent like the others; its items carry the icons. */
  .grina-header .grina-nav .grina-nav__item--account a {
    align-items: center;
  }

  .grina-header .grina-nav .grina-nav__item a {
    display: flex;
    min-height: 44px;
    padding: 0;
    color: var(--grina-color-pine);
    font-size: var(--grina-size-sekcija);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--grina-leading-sekcija);
    text-transform: none;
  }

  /* The items under a parent: on a stem. */
  .grina-header .grina-nav .grina-mega--rituali,
  .grina-header .grina-nav .grina-mega--pomoc,
  .grina-header .grina-nav .grina-mega--drawer-account {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    margin: var(--grina-space-3xs) 0 0 var(--grina-space-3xs);
    padding: 0 0 0 var(--grina-space-sm);
    background: transparent;
    border: 0;
    border-left: 2px solid var(--grina-color-sage-3);
    border-radius: 0;
    box-shadow: none;
  }

  .grina-header .grina-nav .grina-mega--drawer-account .grina-account__guest,
  .grina-header .grina-nav .grina-mega--drawer-account .grina-account__member {
    gap: 0;
  }

  .grina-header .grina-nav .grina-mega--rituali .grina-mega__link a,
  .grina-header .grina-nav .grina-mega--pomoc .grina-mega__link a,
  .grina-header .grina-nav .grina-mega--drawer-account .grina-mega__link a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    color: var(--grina-color-body);
    font-size: var(--grina-size-telo);
    font-weight: 500;
    line-height: var(--grina-leading-telo);
  }

  .grina-header .grina-nav .grina-mega__link a:hover {
    color: var(--grina-color-pine);
  }

  /* Prodavnica's categories on the same stem, a size under the parent; their one-line hints stay. */
  .grina-header .grina-nav .grina-mega__col--cats {
    gap: var(--grina-space-2xs);
    padding-left: var(--grina-space-sm);
    border-left: 2px solid var(--grina-color-sage-3);
  }

  .grina-header .grina-nav .grina-mega--shop.grina-mega--shop {
    padding-left: var(--grina-space-3xs);
  }

  .grina-header .grina-nav .grina-mega__col--cats .grina-mega__entry .grina-mega__link a {
    font-size: var(--grina-size-telo);
    font-weight: 700;
  }

  .grina-header .grina-nav .grina-nav__contact {
    padding-top: var(--grina-space-md);
    color: var(--grina-color-quiet);
    font-size: var(--grina-size-telo);
    line-height: var(--grina-leading-telo);
  }
}