/*
Theme Name: Maruška
Theme URI: https://maruska.rs
Author: Studio Maruška
Description: Custom theme for Maruška silk scarves website
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: maruska
*/

/* ========================================
   CSS VARIABLES
======================================== */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray: #7e7e7e;
  --color-gray-light: #B5B5B5;
  --shadow-header: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.15);
  --font-primary: "Archivo", sans-serif;
  --font-heading: "Inria Serif", serif;
  /* `--font-body` is an alias used throughout the stylesheet; without it those rules silently fell back to inherit. */
  --font-body: var(--font-primary);

  /* Typography scale + tokens (quiet-luxury pass) */
  --fs-hero: 56px;
  --fs-h2: 40px;
  --fs-h3: 24px;
  --fs-eyebrow: 13px;
  --fs-body: 16px;
  --ls-tight: 0.02em;
  --ls-uppercase: 0.08em;
  --ls-button: 0.12em;
  --fw-heading: 400;

  --topbar-height: 100px;
  /* Shared horizontal padding/max-width so `.header-top-inner` and the
     submenu container produce identical content widths. 1920px covers
     standard full-HD laptops + most external monitors without stretching. */
  --header-container-max: 1920px;
  --header-container-pad: 100px;
}

/* ========================================
   RESET & BASE
======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* No grey/blue flash on tap in mobile Chrome/Safari. */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.125;
  color: var(--color-black);
  background-color: var(--color-white);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   HEADER
======================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-white);
  box-shadow: var(--shadow-header);
  /* Short, no-delay transition — used for fast scroll-triggered bg
     changes. Submenu close timing is handled in JS (the .is-light class
     is held until the wrapper has finished collapsing). */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Homepage: header overlays the hero video. Default transparent with white
   logo/icons/text; turns white with dark assets when a submenu trigger is
   hovered (.is-light class added by JS). */
body.home .site-header,
body.home .site-header .header-top,
body.has-hero .site-header,
body.has-hero .site-header .header-top {
  background-color: transparent;
  box-shadow: none;
  transition: background-color 0.3s ease;
}

body.home .site-header .header-logo img,
body.home .site-header .header-icon img,
body.home .site-header .header-search-btn svg,
body.home .site-header .header-search-btn svg circle,
body.home .site-header .header-search-btn svg line,
body.has-hero .site-header .header-logo img,
body.has-hero .site-header .header-icon img,
body.has-hero .site-header .header-search-btn svg,
body.has-hero .site-header .header-search-btn svg circle,
body.has-hero .site-header .header-search-btn svg line {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

body.home .site-header .header-nav-list li a,
body.home .site-header .header-lang-text,
body.home .site-header .header-search-input,
body.home .site-header .header-menu-toggle,
body.has-hero .site-header .header-nav-list li a,
body.has-hero .site-header .header-lang-text,
body.has-hero .site-header .header-search-input,
body.has-hero .site-header .header-menu-toggle {
  color: #fff;
  transition: color 0.3s ease;
}

body.home .site-header .header-search-input::placeholder,
body.has-hero .site-header .header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

body.home .site-header .header-search-input,
body.has-hero .site-header .header-search-input {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

/* Opening: header bg + filter + text colors use the base 0.3s transition
   — quick and clean. Submenu close timing held by JS, not CSS delay. */
body.home .site-header.is-light,
body.home .site-header.is-light .header-top,
body.has-hero .site-header.is-light,
body.has-hero .site-header.is-light .header-top {
  background-color: var(--color-white);
}
body.home .site-header.is-light,
body.has-hero .site-header.is-light {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

body.home .site-header.is-light .header-logo img,
body.home .site-header.is-light .header-icon img,
body.home .site-header.is-light .header-search-btn svg,
body.home .site-header.is-light .header-search-btn svg circle,
body.home .site-header.is-light .header-search-btn svg line,
body.has-hero .site-header.is-light .header-logo img,
body.has-hero .site-header.is-light .header-icon img,
body.has-hero .site-header.is-light .header-search-btn svg,
body.has-hero .site-header.is-light .header-search-btn svg circle,
body.has-hero .site-header.is-light .header-search-btn svg line {
  filter: none;
}

body.home .site-header.is-light .header-nav-list li a,
body.home .site-header.is-light .header-lang-text,
body.home .site-header.is-light .header-search-input,
body.home .site-header.is-light .header-menu-toggle,
body.has-hero .site-header.is-light .header-nav-list li a,
body.has-hero .site-header.is-light .header-lang-text,
body.has-hero .site-header.is-light .header-search-input,
body.has-hero .site-header.is-light .header-menu-toggle {
  color: var(--color-black);
}

body.home .site-header.is-light .header-search-input,
body.has-hero .site-header.is-light .header-search-input {
  border-color: var(--color-black);
}

/* ===== Compact sticky header on scroll =====
   When the user scrolls past the hero threshold, the header becomes a
   white compact bar: no logo, search-left, nav-center (overlaid in the
   logo's row), language+cart-right. */
body.scrolled .site-header,
body.scrolled .site-header .header-top {
  background-color: var(--color-white) !important;
}
body.scrolled .site-header {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Compact scrolled bar: shorter row so the page reads cleaner under it. */
body.scrolled .site-header .header-top-inner {
  height: 60px;
  transition: height 0.25s ease;
}

/* Reset the homepage transparent overlay assets when scrolled. */
body.home.scrolled .site-header .header-logo img,
body.home.scrolled .site-header .header-icon img,
body.home.scrolled .site-header .header-search-btn svg,
body.home.scrolled .site-header .header-search-btn svg circle,
body.home.scrolled .site-header .header-search-btn svg line,
body.has-hero.scrolled .site-header .header-logo img,
body.has-hero.scrolled .site-header .header-icon img,
body.has-hero.scrolled .site-header .header-search-btn svg,
body.has-hero.scrolled .site-header .header-search-btn svg circle,
body.has-hero.scrolled .site-header .header-search-btn svg line {
  filter: none !important;
}
body.home.scrolled .site-header .header-nav-list li a,
body.home.scrolled .site-header .header-lang-text,
body.home.scrolled .site-header .header-menu-toggle,
body.has-hero.scrolled .site-header .header-nav-list li a,
body.has-hero.scrolled .site-header .header-lang-text,
body.has-hero.scrolled .site-header .header-menu-toggle {
  color: var(--color-black) !important;
}
body.home.scrolled .site-header .header-nav-list li.menu-item-has-submenu a::after,
body.has-hero.scrolled .site-header .header-nav-list li.menu-item-has-submenu a::after {
  border-top-color: var(--color-black) !important;
}

/* Hide the logo and pull the nav into the top row so the bar is compact. */
body.scrolled .site-header .header-logo {
  visibility: hidden;
  width: 0;
  flex: 0 0 0;
  overflow: hidden;
}

body.scrolled .site-header .header-top {
  position: relative;
}

body.scrolled .site-header .header-nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* Chevrons (the small triangle next to DAME / GOSPODA / MODA I UMETNOST). */
body.home .site-header .header-nav-list li.menu-item-has-submenu a::after,
body.has-hero .site-header .header-nav-list li.menu-item-has-submenu a::after {
  border-top-color: #fff;
  transition: border-top-color 0.3s ease, transform 0.3s ease;
}

body.home .site-header.is-light .header-nav-list li.menu-item-has-submenu a::after,
body.has-hero .site-header.is-light .header-nav-list li.menu-item-has-submenu a::after {
  border-top-color: var(--color-black);
}

/* Header Top Section */
.header-top {
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
  z-index: 100;
  background-color: var(--color-white);
}

/* (Removed) Header used to expand on hover to reveal the nav. Nav is now
   always visible under the logo row, so the expand-on-hover is gone. */

.header-top-inner {
  max-width: var(--header-container-max);
  margin: 0 auto;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--header-container-pad);
}

/* ========================================
   SEARCH (Left side)
======================================== */
.header-search {
  flex: 0 0 auto;
  width: 250px;
}

.header-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--color-black);
  padding-bottom: 5px;
}

.header-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-gray-light);
  outline: none;
  padding: 0;
  line-height: 1.4;
}

.header-search-input::placeholder {
  color: #B5B5B5;
}

/* Closed: icon only. .is-open (icon click, or on the results page) shows the
   field + underline. */
.header-search:not(.is-open) .header-search-form {
  border-bottom-color: transparent;
}
.header-search:not(.is-open) .header-search-input {
  visibility: hidden;
}
.header-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.header-search-input:focus::placeholder {
  color: transparent;
}

.header-search-btn {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.header-search-btn svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-black);
}

/* ========================================
   LOGO (Center)
======================================== */
.header-logo {
  flex: 0 0 241px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo a {
  display: block;
}

.header-logo img {
  width: 241px;
  height: 79px;
  object-fit: contain;
}

/* ========================================
   HEADER ACTIONS (Right side)
======================================== */
.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 35px;
  min-width: 250px;
  justify-content: flex-end;
}

/* Language Switcher */
.header-lang {
  /* Hidden until the English version exists (client, Nov 2026).
     To bring it back: display: flex. */
  display: none;
  align-items: center;
}

.header-lang-text {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: var(--color-black);
  cursor: pointer;
}

/* Header Icons */
.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
          appearance: none;
}

.header-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-black);
}

.header-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.header-icon--profile svg {
  width: 36px;
  height: 30px;
}

.header-icon--profile img {
  width: 36px;
  height: 30px;
}

/* Cart count badge */
.header-cart-count {
  position: absolute;
  top: -5px;
  right: -8px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   MAIN NAVIGATION (always visible under logo row)
======================================== */
.header-nav {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 12px 0 16px;
}

.header-nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 45px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav-list li {
  margin: 0;
  padding: 0;
}

.header-nav-list li a {
  display: block;
  padding: 5px 10px;
  font-family: var(--font-primary);
  font-weight: 200;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--color-black);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: text-decoration 0.3s ease;
  white-space: nowrap;
}

.header-nav-list li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ========================================
   DIVIDER LINE (visible on hover)
======================================== */
.header-divider {
  display: none;
}

/* ========================================
   SUBMENUS (Dame / Gospoda)
======================================== */
/* The submenus container reveals via clip-path instead of max-height —
   that way the wrapper keeps its natural content height the whole time
   and the visible reveal sweeps from top to bottom at a constant rate,
   regardless of how tall the active panel is. Animatable clip-path is
   well supported in all modern browsers. */
.header-submenus {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--color-white);
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0);
  clip-path: inset(0 0 100% 0);
  /* Closing: bottom edge sweeps back up over 0.8s after a small lead so
     the panel can start fading out first. */
  transition:
    clip-path 0.8s cubic-bezier(0.45, 0, 0.55, 1) 0.15s,
    box-shadow 0.8s ease 0.15s;
}

.header-submenus.is-open {
  pointer-events: auto;
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.12);
  clip-path: inset(0 0 0 0);
  /* Subtle grey hairline separating the open submenu from the header
     row above. */
  border-top: 1px solid #E5E5E5;
  /* Opening: sweep down at a steady ease-in-out pace for 1.0s — you can
     still clearly see the bottom edge moving downward but without it
     feeling sluggish. */
  transition:
    clip-path 1s cubic-bezier(0.45, 0, 0.55, 1) 0.05s,
    box-shadow 1s ease 0.05s;
}

/* Each panel stacks at the same origin inside the open container.
   Very long, very gentle opacity transition so the items breathe into
   view inside the still-growing wrapper — no flashy fade-in. Closing
   fade-out is even gentler (0.8s) so it overlaps the wrapper sweep. */
.header-submenu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.45, 0, 0.55, 1), visibility 0s linear 0.5s;
}

.header-submenu.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

/* During the close animation, panel stays in layout (position: relative)
   so the wrapper retains its height while the clip-path sweeps up;
   only opacity fades. JS removes this class after the wrapper is done. */
.header-submenu.is-closing {
  position: relative;
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

.header-submenu-inner {
  max-width: var(--header-container-max);
  margin: 0 auto;
  /* Identical max-width + horizontal padding to `.header-top-inner` so the
     two containers produce exactly the same inner width. */
  padding: 45px var(--header-container-pad) 28px;
}

.header-submenu-list {
  display: flex;
  align-items: flex-start;
  /* Fixed gap, centred row — submenus with fewer items cluster in the
     middle instead of stretching to the container edges. Image sizes are
     identical across submenus (set on `.header-submenu-image`). */
  justify-content: center;
  flex-wrap: nowrap;
  gap: 32px 22px;
  max-width: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  border: none;
}

/* ── Submenu slider (active when items > 6) ── */
.header-submenu__slider-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.header-submenu__slider {
  overflow: hidden;
}

.header-submenu--has-slider .header-submenu-list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: none;
  transition: transform 0.3s ease;
  will-change: transform;
}

.header-submenu__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.header-submenu--has-slider .header-submenu__nav {
  display: flex;
}

.header-submenu__arrow {
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-submenu__arrow svg {
  width: 9px;
  height: 18px;
}

.header-submenu__arrow:hover {
  opacity: 0.6;
}

.header-submenu__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.header-submenu__progress {
  position: relative;
  width: 200px;
  height: 2px;
}

.header-submenu__progress-track {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
}

.header-submenu__progress-bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--color-black);
  transition: left 0.3s ease, width 0.3s ease;
}

.header-submenu-list::before,
.header-submenu-list::after {
  display: none;
}

/* Submenu Item */
.header-submenu-item {
  /* Fixed width matches the image dimensions below. Same width on every
     item, every submenu — DAME (6 items) and GOSPODA (4 items) show
     identically-sized tiles. */
  flex: 0 0 auto;
  width: auto;
  list-style: none;
  border: none;
  padding: 0;
  margin: 0;
}

.header-submenu-item::before {
  display: none;
}

.header-submenu-item a {
  display: block;
  text-decoration: none;
  color: var(--color-black);
  border: none;
}

/* Submenu Image — slightly wider than tall (was 190×207). */
.header-submenu-image {
  /* Sized to fit 6 items + 5×22px gaps in the available container width.
     Cap raised to 300px so the 6-item case fills the inner container on
     1920×1080 displays (inner = 1880, each = ~295px). Larger screens
     still clamp at 300px so cards don't become absurdly big on 4K. */
  width: calc((100vw - 2 * var(--header-container-pad) - 5 * 22px) / 6);
  max-width: 300px;
  min-width: 140px;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  margin-bottom: 12px;
}

.header-submenu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.header-submenu-item a:hover .header-submenu-image img {
  transform: scale(1.05);
}

/* Submenu Title */
.header-submenu-title {
  text-align: center;
  /* Reserve room for up to 2 wrapped lines so item heights stay even and
     the image is never pushed up when one tile has a long label. */
  min-height: 2.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.header-submenu-title span:first-child {
  /* inline-block + align-self center so the box hugs the text — this lets
     the hover underline match the label width exactly, not the 200px cell. */
  display: inline-block;
  align-self: center;
  position: relative;
  padding-bottom: 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2em;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-black);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

/* Hover underline: 1px line under the label, exactly as wide as the
   label box, spreading from center outward on hover and collapsing back
   to center on mouseout. */
.header-submenu-title span:first-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header-submenu-item a:hover .header-submenu-title span:first-child::after {
  transform: scaleX(1);
}

.header-submenu-line {
  display: none;
}

/* Nav item hover state for submenu trigger */
.header-nav-list li.menu-item-has-submenu {
  cursor: pointer;
}

.header-nav-list li.menu-item-has-submenu a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 8px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-black);
  transition: transform 0.3s ease;
}

.header-nav-list li.menu-item-has-submenu.is-active a::after {
  transform: rotate(180deg);
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1920px) {
  /* Shrink the shared header padding so both `.header-top-inner` and the
     submenu container stay aligned at smaller widths. */
  :root {
    --header-container-pad: 20px;
  }

  .header-search {
    width: 200px;
  }

  .header-actions {
    min-width: 200px;
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .header-search {
    width: 150px;
  }

  .header-search-input {
    font-size: 16px;
  }

  .header-actions {
    gap: 15px;
    min-width: auto;
  }

  .header-lang-text {
    font-size: 16px;
  }

  .header-icon svg {
    width: 26px;
    height: 24px;
  }

  .header-icon img {
    width: 26px;
    height: 24px;
  }

  .header-icon--profile svg {
    width: 28px;
    height: 24px;
  }

  .header-icon--profile img {
    width: 28px;
    height: 24px;
  }
}

/* Switch the main nav + image submenus to the hamburger drawer from
   tablet down. The image submenus can't fit comfortably below 1024px,
   and hover-triggered submenus don't work on touch tablets — so the
   whole nav system switches together at the same breakpoint. */
@media (max-width: 1023px) {
  .header-nav,
  body.scrolled .site-header .header-nav {
    display: none !important;
  }

  /* Keep the logo visible (instead of the desktop "hide logo + show nav"
     compact bar) when scrolled. */
  body.scrolled .site-header .header-logo {
    visibility: visible;
    width: auto;
    flex: 0 1 auto;
    overflow: visible;
  }

  /* Desktop forces the scrolled bar to 60px; on tablet/mobile we show the
     full logo + tagline (no nav row to compress against), so let height
     follow content with vertical padding instead. */
  body.scrolled .site-header .header-top-inner {
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .site-header:hover .header-top {
    padding-bottom: 0;
  }

  /* Hide desktop image submenus — replaced by the mobile drawer's
     accordion submenu. */
  .header-submenus {
    display: none;
  }

  .header-mobile.is-open {
    max-height: calc(100vh - var(--topbar-height));
  }
}

@media (max-width: 768px) {
  :root {
    --topbar-height: 70px;
  }

  .header-logo {
    flex: 0 0 137px;
  }

  .header-logo img {
    width: 137px;
    height: auto;
  }

  .header-search {
    display: none;
  }

  .header-actions {
    gap: 14px;
  }

  .header-lang {
    display: none;
  }

  .header-lang-text {
    font-size: 14px;
  }
}

/* ========================================
   Mobile Menu (hamburger + drawer)
======================================== */
.header-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  /* Nudge down so the 14px-tall icon optically centers with the 24×24 cart bag. */
  margin-top: 3px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-black);
}
.header-menu-toggle__line {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.header-menu-toggle.is-active .header-menu-toggle__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.header-menu-toggle.is-active .header-menu-toggle__line:nth-child(2) {
  opacity: 0;
}
.header-menu-toggle.is-active .header-menu-toggle__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.header-mobile {
  position: absolute;
  top: var(--topbar-height, 70px);
  left: 0;
  right: 0;
  background: #fff;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  z-index: 99;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overscroll-behavior: contain;
}

/* When scrolled the header collapses to 60px and becomes position:fixed —
   pin the drawer flush to its bottom so there's no gap showing hero behind. */
body.scrolled .header-mobile {
  top: 60px;
}
.header-mobile.is-open {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.header-mobile__nav {
  padding: 24px 30px 32px;
}
.header-mobile__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.header-mobile__item > a,
.header-mobile__row .header-mobile__link,
.header-mobile__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.header-mobile__item > a:hover,
.header-mobile__row .header-mobile__link:hover,
.header-mobile__toggle:hover {
  opacity: 0.7;
}
.header-mobile__row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
.header-mobile__row .header-mobile__link {
  /* Only as wide as the text, so the submenu arrow sits right next to it. */
  flex: 0 1 auto;
  width: auto;
  justify-content: flex-start;
}
.header-mobile__row .header-mobile__toggle {
  /* 44×44 tap target (touch guideline); the 14px chevron centred in it sits
     ~15px from the label. Negative margin keeps the row height unchanged. */
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px 0;
  justify-content: center;
}
.header-mobile__caret {
  width: 9px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 7.5,7.5 1.5,13.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease;
}
.header-mobile__chevron {
  width: 14px;
  height: 8px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 7,7 13,1'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease;
}
.header-mobile__item--has-submenu .header-mobile__toggle[aria-expanded="true"] .header-mobile__chevron {
  transform: rotate(180deg);
}
.header-mobile__submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.header-mobile__item--has-submenu:has(.header-mobile__toggle[aria-expanded="true"]) .header-mobile__submenu {
  max-height: 1400px;
  margin-top: 14px;
}
.header-mobile__submenu li {
  padding: 8px 0 8px 16px;
}
.header-mobile__submenu a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}
.header-mobile__submenu a:hover {
  opacity: 0.7;
}

/* Mobile submenu grid — image cards (Figma 1222:2661). */
.header-mobile__submenu--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  padding: 0 4px;
}
.header-mobile__submenu--grid li {
  padding: 0;
}
.header-mobile__submenu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--color-black);
}
.header-mobile__submenu-card:hover {
  opacity: 0.85;
}
.header-mobile__submenu-image {
  display: block;
  width: 100%;
  aspect-ratio: 135 / 150;
  overflow: hidden;
  background: #F7F7F7;
}
.header-mobile__submenu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.header-mobile__submenu-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 1023px) {
  .header-menu-toggle {
    display: inline-flex;
  }
}

/* Mobile header: hamburger left, logo centred, cart right. */
@media (max-width: 768px) {
  .header-top-inner {
    position: relative;
    justify-content: flex-end;
  }

  .header-logo,
  body.scrolled .site-header .header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .header-menu-toggle {
    position: absolute;
    left: var(--header-container-pad);
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 1200px) {
  .header-submenu-inner {
    /* Horizontal padding now comes from --header-container-pad (set in the
       1728px media query). Keep vertical adjustment + overflow override. */
    padding-top: 40px;
    padding-bottom: 40px;
    overflow-x: auto;
  }

  .header-submenu-list {
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }

  .header-submenu-item {
    flex-shrink: 0;
  }
}

/* ========================================
   BODY PADDING (fixed header)
======================================== */
body {
  padding-top: var(--topbar-height);
}

/* On the homepage (and hero landing pages) the header overlays the hero, so
   the body should NOT reserve space at the top — the hero starts at viewport
   top. The .entry-content/article wrapper used by page.php can also add a
   first-child top margin, so zero it for the hero on these pages. */
body.home,
body.has-hero {
  padding-top: 0;
}

body.has-hero .entry-content > .hero-section,
body.has-hero .site-main > .hero-section {
  margin-top: 0;
}

/* ========================================
   FOOTER
======================================== */
:root {
  --footer-shadow: 0px -4px 5.5px 0px rgba(0, 0, 0, 0.15);
  /* Footer width/padding follow the shared header vars so the entire site
     uses one consistent content container width. */
  --footer-max-width: var(--header-container-max);
  --footer-padding: var(--header-container-pad);
}

.site-footer {
  background-color: var(--color-white);
  box-shadow: var(--footer-shadow);
  width: 100%;
}

/* Single row: 4 columns (brand · informacije · kupovina · kontakt) */
.footer-upper {
  max-width: var(--footer-max-width);
  margin: 0 auto;
  padding: 60px var(--footer-padding) 50px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  justify-items: start;
  align-items: flex-start;
  gap: 60px;
}

/* Footer Headings */
.footer-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  line-height: 1em;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 20px;
}

/* Column 1: Brand + Contact */
.footer-brand__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 24px;
  line-height: 0.67em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 15px;
}

.footer-brand__description {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.29em;
  color: var(--color-black);
  max-width: 284px;
  margin-bottom: 25px;
}

.footer-brand__contact {
  font-style: normal;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-black);
}

.footer-brand__contact p {
  margin-bottom: 3px;
}

.footer-brand__contact a {
  color: var(--color-black);
  transition: opacity 0.3s ease;
}

.footer-brand__contact a:hover {
  opacity: 0.7;
}

/* Columns 2 & 3: Links */
.footer-links__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links__list li a {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.29em;
  color: var(--color-gray);
  transition: color 0.3s ease;
}

.footer-links__list li a:hover {
  color: var(--color-black);
}

.footer-copyright {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.29em;
  color: var(--color-gray);
}

.footer-credit {
  margin-top: 6px;
}
.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-logo {
  margin-bottom: 22px;
}

.footer-logo__img {
  max-width: 179px;
  height: auto;
  margin-left: -10px;
}

/* Column 4: Kontakt — social sits below the contact details. */
.footer-contact .footer-social {
  margin-top: 24px;
}

/* Social Icons */
.footer-social {
  display: flex;
  align-items: center;
  gap: 28px;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-black);
  transition: opacity 0.3s ease;
}

.footer-social__link:hover {
  opacity: 0.7;
}

.footer-social__link i {
  font-size: 18px;
}

/* ========================================
   FOOTER RESPONSIVE
======================================== */
@media (max-width: 1728px) {
  :root {
    --footer-padding: 20px;
  }
}

/* Desktop: equal 100px side margins, columns as wide as their content and
   evenly spread (client, Nov 2026). */
@media (min-width: 1201px) {
  .footer-upper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-left: 100px;
    padding-right: 100px;
  }
}

@media (max-width: 1200px) {
  .footer-upper {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .footer-upper {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 40px 20px;
    text-align: center;
    justify-items: center;
  }

  /* Full-width columns so all content (incl. copyright) centers cleanly. */
  .footer-brand,
  .footer-links,
  .footer-contact {
    width: 100%;
  }

  .footer-copyright {
    text-align: center;
  }

  .footer-brand__description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links__list {
    align-items: center;
  }

  .footer-social {
    display: inline-flex;
    justify-content: center;
    gap: 24px;
  }

  .footer-logo__img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================
   HOMEPAGE - HERO
======================================== */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 1200px;
  overflow: hidden;
}

.hero-section .hero-video,
.hero-section .wp-block-video.hero-video,
.hero-section .hero-image,
.hero-section .wp-block-image.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.hero-section .hero-video video,
.hero-section .wp-block-video.hero-video video,
.hero-section .hero-image img,
.hero-section .wp-block-image.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero dark overlay — lighter than original so the image breathes, but
   the top stays dark enough for the white menu/logo to read. */
.hero-section .hero-overlay,
.hero-section .wp-block-group.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.20) 35%,
    rgba(0, 0, 0, 0.30) 100%
  );
}

.hero-section .hero-content,
.hero-section .wp-block-group.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding-bottom: 165px;
}

.hero-section .hero-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 64px;
  line-height: 1;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}

/* Za nju / Za njega hero titles use the homepage hero-tagline typography
   (elegant, light weight, not uppercase) instead of the big bold title —
   matching "Stvaramo umetnost od 1992 godine." on the homepage. */
body.has-hero .hero-section .hero-title {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* New hero tagline + KUPI SADA CTA (replaces the bold heading). */
.hero-section .hero-tagline {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-white) !important;
  text-align: center;
  margin: 0 0 28px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.hero-section .hero-cta.wp-block-button {
  margin: 0;
}

.hero-section .hero-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 14px 28px;
  background: #fff !important;
  border: 1.5px solid #fff !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--color-black) !important;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero-section .hero-cta .wp-block-button__link:hover {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ========================================
   HOMEPAGE - CATEGORIES SHOWCASE
======================================== */
.categories-showcase {
  padding: 100px;
  background-color: var(--color-white);
}

.categories-showcase__container {
  max-width: 1527px;
  margin: 0 auto;
}

.categories-showcase__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.5em;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-black);
  margin-bottom: 85px;
}

.categories-showcase__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.categories-showcase__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: var(--color-black);
  transition: opacity 0.3s ease;
}

.categories-showcase__item:hover {
  opacity: 0.8;
}

.categories-showcase__image {
  position: relative;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 286 / 292;
  overflow: hidden;
  margin-bottom: 20px;
}

.categories-showcase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Kolekcije variant — only the homepage "Nova Kolekcija" showcase. Tighter
   gaps, near-square image tiles, and a center-out hover underline on the
   tile titles (same pattern as the header submenu).
   ========================================================================== */
/* Kolekcije section AND slider showcase (Akcije) both span the same
   container width as `.header-top-inner` so card edges line up with the
   search / cart icons in the header. Vertical padding stays inherited from
   `.categories-showcase`; only horizontal is overridden. */
.categories-showcase--kolekcije,
.categories-showcase[data-slider="true"] {
  padding-left: var(--header-container-pad);
  padding-right: var(--header-container-pad);
}
.categories-showcase--kolekcije .categories-showcase__container,
.categories-showcase[data-slider="true"] .categories-showcase__container {
  max-width: var(--header-container-max);
}

.categories-showcase--kolekcije .categories-showcase__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.categories-showcase--kolekcije .categories-showcase__image {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  aspect-ratio: 230 / 235;
}

.categories-showcase--kolekcije .categories-showcase__name {
  display: inline-block;
  align-self: center;
  position: relative;
  padding-bottom: 8px;
}

.categories-showcase--kolekcije .categories-showcase__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.categories-showcase--kolekcije .categories-showcase__item:hover .categories-showcase__name::after {
  transform: scaleX(1);
}

@media (max-width: 991px) {
  .categories-showcase--kolekcije .categories-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: tighter, smaller titles for the kolekcije variant only. */
@media (max-width: 768px) {
  .categories-showcase--kolekcije .categories-showcase__image {
    margin-bottom: 8px;
  }
  .categories-showcase--kolekcije .categories-showcase__name {
    font-size: 12px;
    line-height: 1.2;
    margin-top: 0;
    padding-bottom: 6px;
  }
}

.categories-showcase__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  line-height: 1em;
  letter-spacing: 0.075em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-black);
  /* center-out underline hover on every showcase/slider label */
  display: inline-block;
  align-self: center;
  position: relative;
  padding-bottom: 8px;
}

.categories-showcase__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.categories-showcase__item:hover .categories-showcase__name::after {
  transform: scaleX(1);
}

/* WooCommerce Product Categories Block - override styles */
.categories-showcase .wc-block-product-categories {
  margin: 0;
}

.categories-showcase .wc-block-product-categories-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-showcase .wc-block-product-categories-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-black);
  transition: opacity 0.3s ease;
}

.categories-showcase .wc-block-product-categories-list-item:hover {
  opacity: 0.8;
}

.categories-showcase .wc-block-product-categories-list-item__image {
  width: 100%;
  aspect-ratio: 286 / 292;
  overflow: hidden;
  margin-bottom: 20px;
}

.categories-showcase .wc-block-product-categories-list-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.categories-showcase .wc-block-product-categories-list-item__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  line-height: 1em;
  letter-spacing: 0.075em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-black);
}

/* WooCommerce categories responsive */
@media (max-width: 1200px) {
  .categories-showcase .wc-block-product-categories-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .categories-showcase .wc-block-product-categories-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Categories Showcase Responsive */
@media (max-width: 1200px) {
  .categories-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .categories-showcase {
    padding: 60px 20px;
  }

  .categories-showcase__title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .categories-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Categories Showcase - Slider Mode */
.categories-showcase__slider-wrapper {
  position: relative;
}

.categories-showcase__slider {
  overflow: hidden;
}

.categories-showcase__slider-track {
  display: flex;
  gap: 22px;
  transition: transform 0.3s ease;
}

.categories-showcase__slide {
  /* 5 per view on desktop. 22px track gap → 4 gaps total = 88px, divided
     across 5 slides = 17.6px each. Matches Kolekcije grid gap. */
  flex: 0 0 calc(20% - 17.6px);
  min-width: calc(20% - 17.6px);
}

/* Moda i umetnost museum slider: 4 per view on desktop (matches the homepage
   Kolekcije 4-up grid → same image size). Smaller breakpoints keep 3/2. */
@media (min-width: 1201px) {
  .categories-showcase--kolekcije[data-slider="true"] .categories-showcase__slide {
    flex: 0 0 calc(25% - 16.5px);
    min-width: calc(25% - 16.5px);
  }
}

/* Slider Navigation - Figma style */
.categories-showcase__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 60px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.categories-showcase__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  padding: 8px;
  transition: opacity 0.3s ease;
}

.categories-showcase__arrow:hover {
  opacity: 0.6;
}

.categories-showcase__arrow:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.categories-showcase__arrow svg {
  width: 13px;
  height: 27px;
}

.categories-showcase__progress {
  flex: 1;
  position: relative;
  height: 3px;
  margin: 0 16px;
}

.categories-showcase__progress-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #B5B5B5;
}

.categories-showcase__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 3px;
  background-color: var(--color-black);
  transition: left 0.3s ease, width 0.3s ease;
}

/* Sale badge */
.categories-showcase__badge {
  position: absolute;
  /* 10px in from the image's top-right corner (client, Oct 2026). */
  top: 10px;
  right: 10px;
  height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #B5B5B5;
  color: var(--color-black);
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  z-index: 2;
}

.categories-showcase__badge--novo {
  /* White pill (client, Oct 2026; was green). */
  background: var(--color-white);
  color: var(--color-black);
}

/* When both badges show, push the second one (AKCIJA/discount) below NOVO. */
.categories-showcase__badge--novo + .categories-showcase__badge {
  top: 43px; /* 10px + pill height + gap, below NOVO */
}

/* Price display */
.categories-showcase__price {
  font-family: var(--font-body);
  font-size: 14px;
  /* Same light price as the archive cards (client, Oct 2026). The sale
     price keeps its own black below. */
  color: #B5B5B5;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}

.categories-showcase__price--regular {
  text-decoration: line-through;
  color: #B5B5B5;
}

.categories-showcase__price--sale {
  color: var(--color-black);
  font-weight: 400;
}

.categories-showcase__slide .categories-showcase__image {
  /* Image fills the full slide width (no 80% centering like the non-slider
     variant). Aspect ratio dictates the height. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  aspect-ratio: auto;
  overflow: hidden;
}

/* Slider Responsive */
@media (max-width: 1200px) {
  .categories-showcase__slide {
    flex: 0 0 calc(33.333% - 16px);
    min-width: calc(33.333% - 16px);
  }
}

@media (max-width: 768px) {
  .categories-showcase__slider-track {
    gap: 10px;
  }

  /* Two products per view on mobile for every slider — matches the JS
     (getSlidesPerView = 2), so the last swipe ends flush, no empty gap.
     10px track gap shared across 2 slides = 5px each. */
  .categories-showcase__slide,
  .category-section .categories-showcase__slide {
    flex: 0 0 calc(50% - 5px);
    min-width: calc(50% - 5px);
  }

  .categories-showcase__slide .categories-showcase__name {
    font-size: 10px;
    line-height: 16px;
    margin-top: 6px;
  }

  .categories-showcase__slide .categories-showcase__price {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    font-size: 8px;
    line-height: 18px;
  }

  /* Labels (NOVO / -%) on mobile too (client, Nov 2026) — smaller, closer
     to the corner to fit the half-width cards. */
  .categories-showcase__slide .categories-showcase__badge {
    top: 4px;
    right: 4px;
    height: 18px;
    padding: 0 7px;
    font-size: 8px;
    border-radius: 9px;
  }
  .categories-showcase__slide .categories-showcase__badge--novo + .categories-showcase__badge {
    top: 26px; /* 4px + 18px + gap, below NOVO */
  }

  .categories-showcase__nav {
    max-width: 225px;
    margin-top: 20px;
  }

  .categories-showcase__arrow svg {
    width: 8px;
    height: 17px;
  }
}

/* ========================================
   HOMEPAGE - SPLIT SECTION (Za nju / Za njega)
======================================== */
.split-section {
  width: 100%;
  /* No vertical padding — gap above/below comes from the neighbouring
     categories-showcase (100px) so all section transitions feel even. */
  padding: 0 40px;
  box-sizing: border-box;
}

/* Override the inner columns' alignwide behaviour so the two big tiles
   sit narrower than the kolekcije showcase (1527px inner). */
.split-section .split-section__columns,
.split-section .wp-block-columns.alignwide.split-section__columns {
  /* Responsive width: ~80% of viewport on most laptops, capped at 1547px
     on full-HD displays. Avoids the section dominating the homepage on
     mid-size screens (e.g. 1530px laptops where fixed max felt too wide). */
  max-width: min(1547px, 80vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Caption (Jedinstveni proizvodi za nju/njega) — plain text under image, no link.
   Sentence case enforced via `text-transform: none` so the markup casing wins. */
.split-section .split-card__caption {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-black);
  margin: 20px 0 14px;
  text-transform: none !important;
}

/* POGLEDAJ OVDE link under the caption — uppercase, with center-out hover underline. */
.split-section .split-card__pogledaj {
  text-align: center;
  margin: 0 0 8px;
}
.split-section .split-card__pogledaj a {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}
.split-section .split-card__pogledaj a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.split-section .split-card__pogledaj a:hover::after {
  transform: scaleX(1);
}

/* Desktop: caption fits on one line — hide the explicit <br> in markup. */
.split-section .split-card__caption br {
  display: none;
}

/* Mobile: tighter caption + link sizes (user request 2026-05-13).
   `br` is shown again so both captions wrap consistently at "za nju" / "za njega". */
@media (max-width: 768px) {
  .split-section .split-card__caption {
    font-size: 14px;
    margin: 14px 0 8px;
  }
  .split-section .split-card__caption br {
    display: inline;
  }
  .split-section .split-card__pogledaj a {
    font-size: 12px;
  }
}

.split-section__columns {
  gap: 22px !important;
}

.split-section .wp-block-column {
  margin: 0;
  padding: 0;
}

.split-card {
  position: relative;
  min-height: 825px !important;
}

.split-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 54%,
    rgba(0, 0, 0, 0.5) 71%,
    rgba(0, 0, 0, 0.7) 89%
  );
  z-index: 1;
  pointer-events: none;
}

.split-card .wp-block-cover__inner-container {
  position: absolute;
  bottom: 65px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.split-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15em;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  color: var(--color-white);
  margin-bottom: 18px;
}

.split-card__button {
  width: 100px;
  height: 44px;
  border: 1.5px solid var(--color-white);
}

.split-card__button .wp-block-button__link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-white);
  background: transparent;
  border: none;
  border-radius: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-card__button .wp-block-button__link:hover,
.split-card__button .wp-block-button__link.has-white-color:hover,
.split-card__button .wp-block-button__link.has-text-color:hover {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
}

/* Split Section Responsive — keep Za nju / Za njega side-by-side on mobile per Figma 1073:2217 */
@media (max-width: 1200px) {
  .split-section {
    padding: 40px 32px;
  }
}

@media (max-width: 1023px) {
  /* Tablet + mobile: tiles span full viewport width edge-to-edge, no padding, no gap. */
  .split-section {
    padding: 24px 0;
  }
  .split-section .split-section__columns,
  .split-section .wp-block-columns.alignwide.split-section__columns {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .split-section .wp-block-columns {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .split-section .wp-block-column {
    flex-basis: 50% !important;
    flex-grow: 1 !important;
    min-width: 0;
  }

  /* Reduced card height for tablet — desktop's 825px is too tall once the
     padding goes and the tiles span edge-to-edge. The 768 block below
     reduces further for mobile. */
  .split-card {
    min-height: 500px !important;
  }
}

@media (max-width: 768px) {
  /* Mobile: Za nju / Za njega side by side (client, Oct 2026), aligned with
     the mobile content width (header padding) and a 15px gap; cards keep
     the desktop proportion (same images). */
  .split-section {
    padding-left: var(--header-container-pad);
    padding-right: var(--header-container-pad);
  }
  .split-section .wp-block-columns {
    flex-direction: row !important;
    gap: 15px !important;
  }
  .split-section .wp-block-column {
    flex-basis: 50% !important;
    width: auto !important;
  }

  .split-card {
    min-height: 0 !important;
    aspect-ratio: 4 / 5; /* client: everything 4:5 */
  }

  .split-card__title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .split-card__button {
    width: 60px;
    height: 30px;
    border-width: 1px;
  }

  .split-card__button .wp-block-button__link {
    font-size: 12px;
    line-height: 1;
    padding: 0;
    white-space: nowrap;
  }

  .split-card .wp-block-cover__inner-container {
    bottom: 30px;
  }
}

/* ========================================
   HOMEPAGE - CATEGORIES GRID
======================================== */
.categories-section {
  padding: 80px 0;
  background-color: var(--color-white);
}

.container {
  max-width: 1528px;
  margin: 0 auto;
  padding: 0 100px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: var(--fw-heading);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 50px;
  color: var(--color-black);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.category-card__link {
  display: block;
}

.category-card__image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.category-card:hover .category-card__image img {
  transform: scale(1.05);
}

.category-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: var(--color-white);
}

.category-card__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.category-card__cta {
  font-family: var(--font-primary);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.category-card:hover .category-card__cta {
  opacity: 1;
}

/* ========================================
   HOMEPAGE - SPLIT SECTION (Za nju / Za njega)
======================================== */
/* No own margin-bottom — vertical rhythm between sections is owned by the
   adjacent showcase blocks' 100px padding (60px on mobile). */

.split-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.split-card {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.split-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.split-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.split-card:hover .split-card__image img {
  transform: scale(1.03);
}

.split-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: var(--color-white);
}

/* ========================================
   HOMEPAGE - PROMO BLOCKS
======================================== */
.promo-block {
  width: 100%;
  margin-bottom: 80px;
}
.promo-block:last-of-type {
  margin-bottom: 0;
}

.promo-block .wp-block-columns.promo-block__row {
  gap: 0;
  flex-wrap: nowrap;
}

.promo-block__row .wp-block-column {
  margin: 0;
  padding: 0;
}

/* Image column — 2/3 of the row. */
.promo-block__image {
  flex-basis: 66.6667% !important;
  width: 66.6667% !important;
}

.promo-block__image figure,
.promo-block__image .wp-block-image {
  margin: 0;
  height: 100%;
}

.promo-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* +10% height vs 15/8 (client request). */
  aspect-ratio: 15 / 8.8;
}

/* Content column — 1/3 of the row. Selector includes `.promo-block__row`
   so it wins over the `.promo-block__row .wp-block-column { padding: 0 }`
   reset above. */
.promo-block .promo-block__content,
.promo-block__row .promo-block__content {
  flex-basis: 33.3333% !important;
  width: 33.3333% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 25px !important;
}

.promo-block__label {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 20px;
}

.promo-block__title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  margin-bottom: 30px;
}

.promo-block__description {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857em;
  color: var(--color-gray);
  margin-bottom: 40px;
  max-width: 500px;
  text-align: center;
}

/* Promo button */
.promo-block__button {
  width: 140px;
  height: 70px;
}

.promo-block__button .wp-block-button__link {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6em;
  color: var(--color-black);
  background: transparent;
  border: 2px solid var(--color-black);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.promo-block__button .wp-block-button__link:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* Editor compatibility */
.promo-block .wp-block-buttons {
  justify-content: center;
}

/* POGLEDAJ KOLEKCIJU link — replaces the VIŠE button in the HILANDAR
   promo block. Same center-out hover underline as split-card__pogledaj. */
.promo-block .promo-block__pogledaj {
  text-align: center;
  margin: 8px 0 0;
}
.promo-block .promo-block__pogledaj a {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}
.promo-block .promo-block__pogledaj a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.promo-block .promo-block__pogledaj a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 768px) {
  .promo-block .promo-block__pogledaj a {
    font-size: 12px;
  }
}

/* POGLEDAJ KOLEKCIJU link — replaces the old VIŠE outlined button. Same
   center-out hover underline as the split-section's POGLEDAJ OVDE link. */
.promo-block .promo-block__pogledaj {
  text-align: center;
  margin: 8px 0 0;
}
.promo-block .promo-block__pogledaj a {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}
.promo-block .promo-block__pogledaj a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.promo-block .promo-block__pogledaj a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 768px) {
  .promo-block .promo-block__pogledaj a {
    font-size: 12px;
  }
}

/* ========================================
   BUTTONS
======================================== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn--primary {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.btn--primary:hover {
  background-color: transparent;
  color: var(--color-black);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* ========================================
   PROMO BLOCKS - Shortcode (standalone)
======================================== */
.promo-block__row-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
}

.promo-block__image-col {
  flex: 0 0 50%;
  max-width: 50%;
}

.promo-block__image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
  display: block;
}

.promo-block__content-col {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
}

.promo-block--reverse .promo-block__row-inner {
  flex-direction: row-reverse;
}

/* Marker class on the inner columns block — flips image / content order
   while keeping markup unchanged (used for the HILANDAR top promo). */
.promo-block .wp-block-columns.promo-block__row--reverse,
.promo-block__row.promo-block__row--reverse {
  flex-direction: row-reverse;
}

.promo-block__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 70px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-black);
  background: transparent;
  border: 2px solid var(--color-black);
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.promo-block__btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

@media (max-width: 768px) {
  .promo-block__row-inner {
    flex-direction: column !important;
  }

  .promo-block--reverse .promo-block__row-inner {
    flex-direction: column !important;
  }

  .promo-block__image-col,
  .promo-block__content-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .promo-block__image-col img {
    aspect-ratio: 16/9;
  }

  .promo-block__content-col {
    padding: 40px 20px;
  }
}

/* Subcategory sections (Za nju / Za njega): give the first section breathing
   room from the hero above it. Matches the homepage section rhythm (the
   showcase that follows the hero uses 100px top spacing). */
.category-section:first-of-type {
  margin-top: 150px;
}

@media (max-width: 768px) {
  .category-section:first-of-type {
    margin-top: 80px;
  }

  /* The carousel keeps a large desktop padding (100px) on mobile, which
     leaves too big a gap between the text and the slider. Tighten it. */
  .category-section .categories-showcase {
    padding: 24px 20px 40px;
  }

  /* Slightly larger separation between consecutive sections on mobile. */
  .category-section + .category-section {
    margin-top: 40px;
  }
}

/* Center the section title so long names (e.g. "Kožna galanterija") that wrap
   to two lines stay centered. */
.category-section .promo-block__title {
  text-align: center;
}

/* Match the homepage promo proportion: image 2/3, text 1/3, wide image.
   Desktop only — mobile keeps the stacked full-width layout below. */
@media (min-width: 769px) {
  .category-section .promo-block__image-col {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .category-section .promo-block__content-col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .category-section .promo-block__image-col img {
    aspect-ratio: 15 / 8.8;
  }
}

/* ========================================
   HOMEPAGE RESPONSIVE
======================================== */
@media (max-width: 1728px) {
  .container {
    padding: 0 20px;
  }
}

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

  .promo-block__title {
    font-size: 32px;
  }
}

/* Tablet + mobile promo layout: stack image on top of text and force a
   fixed aspect ratio on the image so two side-by-side promo blocks always
   render at identical heights (previously the image stretched to match
   the text column height, which varied between blocks). */
@media (max-width: 1023px) {
  .promo-block .wp-block-columns.promo-block__row,
  .promo-block .wp-block-columns.promo-block__row--reverse {
    flex-direction: column !important;
    flex-wrap: wrap;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .promo-block .promo-block__image,
  .promo-block .promo-block__content,
  .promo-block__row .promo-block__image,
  .promo-block__row .promo-block__content {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center;
    text-align: center;
  }

  .promo-block .promo-block__image,
  .promo-block__row .promo-block__image {
    padding: 0 !important;
    order: 1;
  }

  .promo-block .promo-block__content,
  .promo-block__row .promo-block__content {
    order: 2;
    padding: 30px 20px 0 !important;
  }

  .promo-block__image .wp-block-image,
  .promo-block__image figure {
    width: 100%;
    margin: 0;
  }

  /* Locked aspect ratio = consistent height between the two promo blocks.
     16/9 keeps tablet/mobile images low-profile (~half the height of 4/3). */
  .promo-block__image img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 568px;
  }

  .hero-section .hero-content,
  .hero-section .wp-block-group.hero-content {
    padding-bottom: 91px;
  }

  .hero-section .hero-title {
    font-size: 40px;
    line-height: 42px;
    max-width: none;
    padding: 0 20px;
  }

  /* Keep the za-nju / za-njega hero title matched to the tagline size. */
  body.has-hero .hero-section .hero-title {
    font-size: 18px;
    line-height: 1.2;
    padding: 0 20px;
  }

  .hero-section .hero-tagline {
    font-size: 18px;
    margin-bottom: 20px;
    padding: 0 20px;
  }

  .hero-section .hero-cta .wp-block-button__link {
    min-width: 140px;
    padding: 11px 22px;
    font-size: 12px;
  }

  .categories-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .split-section__grid {
    grid-template-columns: 1fr;
  }

  .promo-block .wp-block-columns.promo-block__row,
  .promo-block .wp-block-columns.promo-block__row--reverse {
    flex-direction: column !important;
    flex-wrap: wrap;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Need to match the desktop rules' specificity (`.promo-block .promo-block__content`)
     or the desktop 33.3% width keeps winning even on mobile. */
  .promo-block .promo-block__image,
  .promo-block .promo-block__content,
  .promo-block__row .promo-block__image,
  .promo-block__row .promo-block__content {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center;
    text-align: center;
    padding: 32px 16px !important;
  }

  /* Image column shouldn't have content-padding. */
  .promo-block .promo-block__image,
  .promo-block__row .promo-block__image {
    padding: 0 !important;
  }

  .promo-block__image .wp-block-image,
  .promo-block__image figure {
    width: 100%;
    margin: 0;
  }

  /* Mobile: square image full-width on top, text content stacked underneath. */
  .promo-block__image {
    order: 1;
  }

  .promo-block__content {
    order: 2;
  }

  .promo-block__image img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  .promo-block__row .promo-block__content {
    padding: 40px 20px;
  }

  .promo-block__label {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .promo-block__title {
    font-size: 24px;
    line-height: 44px;
    margin-bottom: 15px;
  }

  .promo-block__description {
    font-size: 12px;
    line-height: 18px;
    max-width: 267px;
    margin-bottom: 19px;
  }

  .promo-block__button {
    width: 60px;
    height: 30px;
  }

  .promo-block__button .wp-block-button__link {
    font-size: 12px;
    line-height: 1;
    border-width: 1px;
    padding: 0;
    white-space: nowrap;
  }

  .section-title {
    font-size: 24px;
  }
}

/* ========================================
   CATEGORY ARCHIVE PAGE
======================================== */
.category-archive {
  padding-top: 40px;
  padding-bottom: 80px;
  background-color: var(--color-white);
}

.category-archive__container {
  max-width: 1528px;
  margin: 0 auto;
  padding: 0 100px;
}

/* Header */
.category-archive__header {
  text-align: center;
  margin-bottom: 34px;
  max-width: 549px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0;
}

.category-archive__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 48px;
  line-height: 1.2em;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 20px;
}

.category-archive__description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3em;
  color: var(--color-black);
  max-width: 520px;
  margin: 0 auto;
}

/* Empty / no-results state for product search */
.category-archive__empty {
  max-width: 520px;
  margin: 60px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-archive__empty-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  margin: 0;
}

.category-archive__empty-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gray);
  margin: 0;
}

.category-archive__empty-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.category-archive__empty-form input[type="search"] {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid #CCCCCC;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
}

.category-archive__empty-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-black);
}

.category-archive__empty-form button {
  padding: 12px 24px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.category-archive__empty-form button:hover {
  opacity: 0.85;
}

.category-archive__empty-link {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-black);
  text-decoration: underline;
  margin-top: 8px;
}

.category-archive__empty-link:hover {
  opacity: 0.7;
}

/* Breadcrumbs */
.category-archive__breadcrumb {
  margin-bottom: 30px;
}

.category-archive__breadcrumb .woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 14px;
  color: #B5B5B5;
  padding: 0;
  margin: 0;
}

.category-archive__breadcrumb .woocommerce-breadcrumb a {
  color: #B5B5B5;
  text-decoration: none;
  transition: color 0.3s ease;
}

.category-archive__breadcrumb .woocommerce-breadcrumb a:hover {
  color: var(--color-black);
}

/* Filter/Sort Controls */
.category-archive__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 82px;
}

.category-archive__filter-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-black);
}

.category-archive__filter-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.category-archive__filter-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
}

.category-archive__filter-line {
  display: block;
  width: 150px;
  height: 0;
  border-top: 2px solid var(--color-black);
  margin-top: 10px;
}

.category-archive__filter-arrow {
  width: 27px;
  height: 13px;
  margin-left: 30px;
  margin-top: 16px;
  transition: transform 0.3s ease;
}

/* Filter dropdown */
.category-archive__filter-wrap {
  position: relative;
}

.category-archive__filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--color-white);
  min-width: 250px;
  padding: 20px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-archive__filter-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-dropdown__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-dropdown__item {
  position: relative;
}

.filter-dropdown__link {
  display: block;
  padding: 10px 30px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-black);
  text-decoration: none;
  transition: background 0.2s;
}

.filter-dropdown__link:hover {
  background: #F5F5F5;
}

.filter-dropdown__item.is-active > .filter-dropdown__link {
  font-weight: 300;
}

.filter-dropdown__sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.filter-dropdown__item.has-children > .filter-dropdown__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-dropdown__item.has-children > .filter-dropdown__link::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-black);
  border-top: 2px solid var(--color-black);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 12px;
}

.filter-dropdown__item.has-children.is-expanded .filter-dropdown__sublist {
  max-height: 800px;
  overflow-y: auto;
}

.filter-dropdown__item.has-children.is-expanded > .filter-dropdown__link::after {
  transform: rotate(-45deg);
}

/* Checkbox label row */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.filter-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  border: 0.5px solid var(--color-black);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  margin: 0;
}

/* Figma: checked = solid black fill (no checkmark). */
.filter-checkbox input[type="checkbox"]:checked {
  background: var(--color-black);
}

/* Section heading (Muzej / Kolekcija) — Inria Serif, uppercase, like Figma. */
.filter-dropdown__section-toggle {
  background: none;
  border: none;
  width: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  text-align: left;
  cursor: pointer;
}

/* Actions row (Apply + Clear) */
.filter-dropdown__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 30px;
}

.filter-dropdown__apply {
  padding: 10px 22px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.filter-dropdown__apply:hover {
  opacity: 0.85;
}

.filter-dropdown__clear-link {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: #B5B5B5;
  text-decoration: none;
}

.filter-dropdown__clear-link:hover {
  color: var(--color-black);
}

.filter-dropdown__subitem .filter-dropdown__link {
  padding-left: 50px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 15px;
  color: var(--color-black);
}

.filter-dropdown__subitem .filter-dropdown__link:hover {
  color: var(--color-black);
}

.filter-dropdown__subitem.is-active .filter-dropdown__link {
  color: var(--color-black);
  font-weight: 700;
}

.filter-dropdown__clear .filter-dropdown__link {
  color: var(--color-gray);
  font-size: 14px;
  border-top: 1px solid #eee;
  margin-top: 8px;
  padding-top: 16px;
}

.category-archive__filter-toggle.is-active .category-archive__filter-arrow {
  transform: rotate(180deg);
}

.category-archive__sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 70px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: var(--color-black);
  background: transparent;
  border: 1px solid var(--color-black);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-archive__sort-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.category-archive__sort-wrap {
  position: relative;
}

.category-archive__sort-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  background: var(--color-white);
  min-width: 200px;
  padding: 16px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-archive__sort-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sort-dropdown__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sort-dropdown__link {
  display: block;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black);
  text-decoration: none;
  transition: background 0.2s;
}

.sort-dropdown__link:hover {
  background: #F5F5F5;
}

.sort-dropdown__item.is-active .sort-dropdown__link {
  font-weight: 700;
}

.sort-dropdown__clear .sort-dropdown__link {
  color: var(--color-gray);
  border-top: 1px solid #eee;
  margin-top: 8px;
  padding-top: 16px;
}

/* Product Grid */
.category-archive__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 24px;
}

/* Pokloni — 2×2 big card; side alternates via PHP-applied class */
@media (min-width: 1201px) {
  .product-card--poklon {
    grid-row: span 2;
  }
  .product-card--poklon.product-card--feat-right {
    grid-column: 3 / span 2;
  }
  .product-card--poklon.product-card--feat-left {
    grid-column: 1 / span 2;
  }
}

/* Pokloni — gradient overlay + overlaid title button (Figma "Rectangle 9") */
.product-card--poklon .product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card--poklon .product-card__image {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.product-card--poklon .product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card--poklon .product-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 54.33%,
    rgba(0, 0, 0, 0.5) 71.15%,
    rgba(0, 0, 0, 0.7) 89.42%
  );
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.product-card__overlay {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  background: var(--color-white);
  color: var(--color-black);
  text-align: center;
  z-index: 2;
}

.product-card__overlay-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-black);
}

.product-card__overlay-price {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-black);
  line-height: 1;
  display: flex;
  gap: 6px;
  align-items: center;
}

.product-card__overlay-price .product-card__price--old {
  color: #B5B5B5;
  text-decoration: line-through;
}

/* Product Card */
.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-black);
  transition: opacity 0.3s ease;
  position: relative;
}

.product-card__link:hover {
  opacity: 0.8;
}

.product-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: visible;
  margin-bottom: 12px;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card__link:hover .product-card__image img {
  transform: scale(1.05);
}

/* Sale / new-collection badges — positioned relative to card link, over the image */
.product-card__badge {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #B5B5B5;
  color: var(--color-black);
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  z-index: 3;
}

.product-card__badge--novo {
  /* White pill (client, Oct 2026; was green). */
  background: var(--color-white);
  color: var(--color-black);
}

/* When both badges show, push the second one (AKCIJA) below NOVO. */
.product-card__badge--novo + .product-card__badge {
  top: 33px;
}

/* Hide product catalog sorting dropdown — sorting disabled site-wide. */
.woocommerce-ordering,
form.woocommerce-ordering,
.woocommerce-products-header__filter,
.wc-block-product-collection-sort-by,
nav.woocommerce-pagination + form.woocommerce-ordering,
.category-archive__sort-wrap {
  display: none !important;
}

/* Product Title */
.product-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1.2px;
  color: var(--color-black);
  margin-bottom: 8px;
}

/* Price */
.product-card__price {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #B5B5B5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.product-card__price--old {
  text-decoration: line-through;
  color: #B5B5B5;
}

.product-card__price--sale {
  color: var(--color-black);
  font-weight: 400;
}

.product-card__price--regular {
  color: #B5B5B5;
}

/* Load More Button */
.category-archive__load-more {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 70px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-black);
  background: transparent;
  border: 2px solid var(--color-black);
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-more-btn:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================
   CATEGORY ARCHIVE RESPONSIVE
======================================== */
@media (max-width: 1728px) {
  .category-archive__container {
    padding: 0 20px;
  }
}

@media (max-width: 1200px) {
  .category-archive__grid {
    grid-template-columns: repeat(3, 1fr);
  }


  .category-archive__title {
    font-size: 36px;
  }

  .category-archive__filter-title {
    font-size: 30px;
  }

  .category-archive__filter-line {
    width: 80px;
  }
}

@media (max-width: 768px) {
  .category-archive {
    padding-top: 20px;
    padding-bottom: 50px;
  }

  .category-archive__container {
    padding: 0 20px;
  }

  .category-archive__header {
    margin-bottom: 30px;
  }

  .category-archive__title {
    font-size: 28px;
  }

  .category-archive__description {
    font-size: 13px;
    /* Inset from screen edges to match the header upper width on mobile. */
    padding-left: var(--header-container-pad);
    padding-right: var(--header-container-pad);
    box-sizing: border-box;
  }

  .category-archive__controls {
    gap: 15px;
  }

  .category-archive__filter-title {
    font-size: 24px;
  }

  .category-archive__filter-line {
    width: 40px;
  }

  .category-archive__sort-btn {
    width: 120px;
    height: 50px;
    font-size: 14px;
  }

  .category-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Pokloni on mobile — full-width tile spanning 4 rows. Each
     featured product gets a unique grid-row computed in PHP from its global
     tile index (page 1 poklons → rows 5 & 13; page 2 poklons → rows 21 & 29;
     etc.) via the --poklon-mobile-row custom property set inline. This avoids
     row collisions when page-2 cards are appended via AJAX Load More. */
  .product-card--poklon {
    grid-column: 1 / -1;
    grid-row: var(--poklon-mobile-row, auto) / span 4;
  }

  .product-card__title {
    font-size: 14px;
  }

  .product-card__price {
    font-size: 12px;
  }

  .category-archive__load-more {
    margin-top: 30px;
  }

  .load-more-btn {
    width: 160px;
    height: 50px;
    font-size: 16px;
  }
}

/* ========================================
   SINGLE PRODUCT PAGE
======================================== */
body.single-product .site-main.single-product {
  padding-bottom: 80px;
}

.single-product__container {
  max-width: 1729px;
  margin: 0 auto;
  padding: 100px 150px;
}

.single-product__wrapper {
  width: 100%;
}

.single-product__breadcrumb {
  margin-bottom: 40px;
}

.single-product__breadcrumb .woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: #7E7E7E;
  padding: 0;
  margin: 0;
}

.single-product__breadcrumb .woocommerce-breadcrumb a {
  color: #7E7E7E;
  text-decoration: none;
  transition: color 0.3s ease;
}

.single-product__breadcrumb .woocommerce-breadcrumb a:hover {
  color: var(--color-black);
}

.single-product__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ── Product Gallery ── */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-gallery__main-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-gallery__arrow {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  padding: 8px;
  transition: opacity 0.3s ease;
}

.product-gallery__arrow:hover {
  opacity: 0.6;
}

.product-gallery__arrow svg {
  width: 13px;
  height: 27px;
}

.product-gallery__main {
  flex: 1;
  position: relative;
}

.product-gallery__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.product-gallery__thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex-shrink: 0;
  /* Fixed-size thumbs centered under the main image — keeps distribution
     consistent regardless of each thumbnail's / the main image's content. */
  justify-content: center;
}

.product-gallery__thumb {
  width: 120px;
  height: 150px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
  overflow: hidden;
}

.product-gallery__thumb:hover {
  opacity: 0.8;
}

.product-gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--color-black);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery video ("Video proizvoda") — plays in the main frame, over the image */
.product-gallery__video,
.product-gallery__video-toggle,
.product-gallery__video-progress {
  display: none;
}

.product-gallery__main.is-video .product-gallery__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-black);
}

.product-gallery__main.is-video .product-gallery__video-toggle {
  position: absolute;
  right: 12px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-black);
  cursor: pointer;
}

.product-gallery__video-toggle .icon-play,
.product-gallery__main.is-paused .product-gallery__video-toggle .icon-pause {
  display: none;
}

.product-gallery__main.is-paused .product-gallery__video-toggle .icon-play {
  display: block;
}

.product-gallery__main.is-video .product-gallery__video-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.product-gallery__video-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-white);
}

/* Video thumbnail — first frame + round play icon */
.product-gallery__thumb--video {
  position: relative;
}

.product-gallery__thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.product-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.product-gallery__play > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.product-gallery__play svg {
  width: 11px;
  height: 12px;
  margin-left: 2px;
}

/* ── Product Info ── */
.single-product__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.single-product__subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--color-gray);
  margin: 0 0 8px;
}

.single-product__info .product_title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: var(--fw-heading);
  line-height: 44px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-black);
  margin: 0 0 4px;
}

.single-product__material {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: #B5B5B5;
  margin: 0 0 40px;
}

.single-product__info .woocommerce-product-details__short-description {
  margin: 0 0 50px;
}

.single-product__info .woocommerce-product-details__short-description p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  margin: 0;
}

.single-product__separator {
  border: none;
  border-top: 1px solid #B5B5B5;
  margin: 0 0 30px;
  width: 480px;
  max-width: 100%;
}

/* ── Gift set (Poklon) components ── */
.single-product__poklon {
  margin: 0 0 30px;
}
.single-product__poklon-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--fw-heading);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0 0 16px;
}
.single-product__poklon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.single-product__poklon-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-black);
  transition: opacity 0.2s ease;
}
.single-product__poklon-item a:hover {
  opacity: 0.7;
}
.single-product__poklon-thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
.single-product__poklon-name {
  font-family: var(--font-body);
  font-size: 14px;
}

/* ── Size selection + Quantity on one horizontal line ── */
.single-product__selectors {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* Keep sizes (left) and quantity (right) on ONE line. The Veličine chips
     block is wide, so it shrinks and wraps its chips internally rather than
     pushing Količina to the next row. */
  flex-wrap: nowrap;
  gap: 24px 24px;
  /* Match the price + add-to-cart row below (240px + 240px) so the right
     edge of the quantity aligns with the right edge of "Dodaj u korpu". */
  width: 480px;
  max-width: 100%;
  margin-bottom: 30px;
}

/* Left side (size chips / variations) takes the free space and may wrap its
   chips; the quantity block keeps its natural width, pinned to the right. */
.single-product__selectors > .single-product__sizes,
.single-product__selectors > .variations {
  flex: 1 1 auto;
  min-width: 0;
}
.single-product__selectors > .single-product__qty-block {
  flex: 0 0 auto;
}

.single-product__selectors .variations {
  margin-bottom: 0;
}

/* Veličine chips sit on the same row as Količina — drop the standalone margin
   so the "Veličine" and "Količina" labels line up at the top. */
.single-product__selectors .single-product__sizes {
  margin: 0;
}

.single-product__qty-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Give the stepper the same box height as a size button and center it, so the
   quantity number sits on the same level as the Veličine numbers. */
.single-product__qty-block .quantity {
  min-height: 39px;
}

/* ── Variations / Sizes ── */
.single-product__info .variations_form.cart {
  margin: 0;
}

.single-product__info .variations {
  border: none;
  border-collapse: collapse;
  margin-bottom: 30px;
  width: auto;
}

.single-product__info .variations td,
.single-product__info .variations th {
  padding: 0;
  vertical-align: top;
  border: none;
  display: block;
  text-align: left;
}

.single-product__info .variations tr {
  display: block;
  margin-bottom: 16px;
}

.single-product__info .variations .label {
  display: block;
  margin-bottom: 16px;
}

.single-product__info .variations .label label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-heading);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
}

.single-product__info .variations .value {
  display: block;
}

.single-product__info .variations .value select {
  display: none;
}

.reset_variations {
  display: none !important;
}

/* Veličine (dimensions) display block — reuses the size-button chip styles */
.single-product__sizes {
  margin: 26px 0 20px;
}
.single-product__sizes-label {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 20px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
}

/* Size Buttons */
.variation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.variation-button {
  padding: 8px 16px;
  border: 2px solid #B5B5B5;
  border-radius: 5px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  color: #B5B5B5;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.variation-button:hover {
  border-color: var(--color-black);
  color: var(--color-black);
}

.variation-button.is-selected {
  border-color: var(--color-black);
  color: var(--color-black);
}

/* Out-of-stock size — visible but unselectable, marked with diagonal slash. */
.variation-button.is-out-of-stock {
  position: relative;
  cursor: not-allowed;
  pointer-events: auto; /* allow tooltip via title attr */
  color: #B5B5B5;
  border-color: #DCDCDC;
  background: var(--color-white);
  overflow: hidden;
}
.variation-button.is-out-of-stock::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    #B5B5B5 calc(50% - 0.5px),
    #B5B5B5 calc(50% + 0.5px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}
.variation-button.is-out-of-stock:hover {
  border-color: #DCDCDC;
  color: #B5B5B5;
}

/* When every size is OOS — disable the cart row and show a red warning. */
body.is-all-variations-out-of-stock .single-product__info .quantity,
body.is-all-variations-out-of-stock .single-product__info .quantity-label,
body.is-all-variations-out-of-stock .single-product__total-amount {
  display: none !important;
}
body.is-all-variations-out-of-stock .single-product__add-to-cart {
  background: #B5B5B5;
  border-color: #B5B5B5;
  color: var(--color-white);
  pointer-events: none;
  cursor: not-allowed;
}
.single-product__stock-warning {
  display: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C53030;
  margin-top: 8px;
}
/* The stock line above now says "Nema na stanju" itself — keep this old
   uppercase warning hidden so it isn't shown twice. */
body.is-all-variations-out-of-stock .single-product__stock-warning {
  display: none;
}

/* Single Variation Form */
.single-product__info .single_variation_wrap {
  margin-bottom: 0;
}

.single-product__info .single_variation {
  display: none;
}

.single-product__info .woocommerce-variation-description {
  display: none;
}

.single-product__info .woocommerce-variation-price {
  display: none;
}

/* ── Quantity + Price + Cart row ── */
.single-product__info .cart {
  display: flex;
  flex-direction: column;
}

.single-product__info .quantity-label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-heading);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 16px;
}

.single-product__info .quantity-cart-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.single-product__cart-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.single-product__info .quantity {
  display: flex;
  align-items: center;
  gap: 0;
  float: none !important;
  margin: 0;
}

.single-product__info .quantity input.qty {
  width: 28px;
  min-width: 28px;
  flex: 0 0 28px;
  height: 22px;
  text-align: center;
  border: none;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 0;
  background: transparent;
  color: var(--color-black);
  opacity: 1;
  visibility: visible;
  display: inline-block;
  -moz-appearance: textfield;
}

.single-product__info .quantity input.qty::-webkit-outer-spin-button,
.single-product__info .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-button {
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  font-size: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-button::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 0;
  border-top: 1px solid var(--color-black);
}

.quantity-button.quantity-plus::after {
  content: "";
  position: absolute;
  width: 0;
  height: 16px;
  border-left: 1px solid var(--color-black);
}

.quantity-button.is-disabled,
.quantity-button[disabled] {
  cursor: not-allowed;
  opacity: 0.3;
  pointer-events: none;
}

.single-product__low-stock {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #C77B27;
  margin: 6px 0 0;
}

/* Inline add-to-cart notices (single product page) — rendered next to the
   cart button so a "stock ran out while you were on the page" error can't
   be missed. */
.single-product__notices {
  margin: 0 0 16px;
}
.single-product__notices .woocommerce-notices-wrapper {
  margin: 0;
}
.single-product__notices .woocommerce-error,
.single-product__notices .woocommerce-info,
.single-product__notices .woocommerce-message {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  border-radius: 3px;
}
.single-product__notices .woocommerce-error {
  background: #FDECEC;
  border: 1px solid #E5A0A0;
  color: #8B1F1F;
}
.single-product__notices .woocommerce-info {
  background: #FFF7E5;
  border: 1px solid #E5C77B;
  color: #6E4F0E;
}
.single-product__notices .woocommerce-message {
  background: #ECF7EF;
  border: 1px solid #94C9A4;
  color: #1F5A30;
}
.single-product__notices ul,
.single-product__notices li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.single-product__notices a {
  color: inherit;
  text-decoration: underline;
}

/* Price + Add to Cart side by side */
.single-product__info .single_add_to_cart_button,
.single-product__info .price {
  display: none;
}

.single-product__cart-row {
  display: flex;
  align-items: stretch;
}

.single-product__price-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 240px;
  flex: 0 0 240px;
  padding: 0 14px;
  height: 47px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-black);
  white-space: nowrap;
}

.single-product__price-display del {
  color: var(--color-gray);
  text-decoration: line-through;
  font-weight: 300;
}

.single-product__price-display ins {
  text-decoration: none;
  color: var(--color-black);
  font-weight: 500;
}

.single-product__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Match the 480px content width (selectors + price/add-to-cart row) so the
     Ukupno divider and price align with the right edge of Količina / Dodaj u
     korpu instead of stretching to the full container. */
  width: 480px;
  max-width: 100%;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-black);
  font-family: var(--font-body);
  color: var(--color-black);
}

.single-product__total-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.single-product__total-amount {
  font-size: 18px;
  font-weight: 500;
}

.single-product__total-amount .woocommerce-Price-amount {
  font-weight: inherit;
}

.single-product__add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 47px;
  background: transparent;
  border: 1.5px solid var(--color-black);
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  text-transform: uppercase;
}

.single-product__add-to-cart:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* Shipping Info */
.single-product__shipping {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray);
  margin-top: 0;
  line-height: 18px;
}

.single-product__shipping strong {
  font-weight: 700;
}

/* ── Design Story Section ── */
.single-product__story {
  width: 100%;
  margin-top: 80px;
}

/* Span the container content box (no own max-width/padding — the
   .single-product__container already provides them) and use the SAME grid as
   .single-product__main, so the image column lines up under the info
   (price/quantity) column and the text under the gallery (carousel) column. */
.single-product__story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Image box = left column; image centered inside it. */
.single-product__story-image {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.single-product__story-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5; /* client's images are 4:5 */
  object-fit: cover;
  display: block;
}

/* Text box = right column; text centered inside it. */
.single-product__story-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.single-product__story-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  margin: 0 0 12px;
  text-align: center;
}

.single-product__story-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: var(--fw-heading);
  line-height: 44px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0 0 30px;
  text-align: center;
}

.single-product__story-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
}

.single-product__story-text p {
  margin: 0 0 16px;
}

.single-product__story-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  /* Match .single-product__main gap at this breakpoint so the columns stay
     aligned (container provides the horizontal padding). */
  .single-product__story-inner {
    gap: 40px;
  }

  .single-product__story-title {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .single-product__story-inner {
    grid-template-columns: 1fr;
  }

  .single-product__story-image {
    max-width: 100%;
  }

  /* 4:5 like everywhere else (client, Oct 2026; was a square crop). */
  .single-product__story-image img {
    aspect-ratio: 4 / 5;
    min-height: 0;
    object-fit: cover;
  }

  .single-product__story-content {
    padding: 30px 0 0;
    text-align: center;
  }

  .single-product__story-title {
    font-size: 24px;
  }

  .single-product__story-text,
  .single-product__story-text p {
    text-align: center;
  }
}

/* ── Related Products Slider ── */
.single-product__related {
  margin-top: 80px;
  padding: 60px 100px 0;
}

.single-product__related-container {
  max-width: 1527px;
  margin: 0 auto;
}

.single-product__related-title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
  margin-bottom: 60px;
}

.single-product__related .categories-showcase__slide {
  flex: 0 0 calc(20% - 19.2px);
  min-width: calc(20% - 19.2px);
}

/* Responsive - Single Product */
@media (max-width: 1200px) {
  .single-product__container {
    padding: 60px 40px;
  }

  .single-product__main {
    gap: 40px;
  }

  .single-product__related {
    padding: 60px 40px 0;
  }

  .single-product__related .categories-showcase__slide {
    flex: 0 0 calc(33.333% - 16px);
    min-width: calc(33.333% - 16px);
  }
}

@media (max-width: 768px) {
  body.single-product .site-main.single-product {
    padding-bottom: 50px;
  }

  .single-product__container {
    padding: 30px 20px;
  }

  /* Section reorder per Figma 1073:2596:
     1. title block (subtitle, title, material, description)
     2. gallery (image + thumbnails)
     3. form.cart (sizes + qty + price + DODAJ U KORPU)
     4. separator (visually placed via order between gallery and form)
     5. total (Ukupno) + shipping note
     Done by flattening .single-product__info via display:contents and
     assigning order to each child. */
  .single-product__main {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .single-product__info {
    display: contents;
  }

  /* Mobile stack: breadcrumbs (outside this flex container), title, price,
     gallery, then the rest. Every child needs an order or it defaults to 0
     and jumps above the title. */
  .single-product__subtitle                          { order: 1; }
  .single-product__info .product_title               { order: 2; }
  .single-product__info .woocommerce-product-details__short-description { order: 3; }
  .single-product__gallery                           { order: 4; }
  .single-product__material                          { order: 5; }
  .single-product__separator                         { order: 6; }
  .single-product__price-block                       { order: 7; }
  /* Simple products: JS wraps the static size chips in .single-product__selectors
     outside the form — keep that wrapper right after the price. */
  .single-product__info > .single-product__sizes,
  .single-product__info > .single-product__selectors { order: 7; }
  .single-product__info form.cart                    { order: 8; }
  .single-product__info > .single-product__stock      { order: 8; } /* sold-out simple product: no form */
  .single-product__usp                               { order: 9; }
  .single-product__accordion                         { order: 10; }
  .single-product__total                             { order: 11; }
  .single-product__shipping                          { order: 12; }

  /* Title block — centred on mobile (client request, Oct 2026). Each child
     re-asserts it so a stray inherited rule can't pull it back. */
  body.single-product .single-product__subtitle,
  body.single-product .single-product__info .product_title,
  body.single-product .single-product__material,
  body.single-product .single-product__info .woocommerce-product-details__short-description,
  body.single-product .single-product__info .woocommerce-product-details__short-description p,
  body.single-product .single-product__info .woocommerce-product-details__short-description * {
    text-align: center !important;
  }

  .single-product__subtitle {
    font-size: 12px;
    line-height: 18px;
    margin: 0 0 6px;
  }

  .single-product__info .product_title {
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 6px;
  }

  .single-product__material {
    font-size: 12px;
    line-height: 18px;
    margin: 0 0 14px;
  }

  .single-product__info .woocommerce-product-details__short-description {
    margin: 0 0 24px;
  }

  .single-product__info .woocommerce-product-details__short-description p {
    font-size: 12px;
    line-height: 18px;
  }

  /* Gallery — smaller thumbs in a horizontal scroller */
  .product-gallery {
    gap: 16px;
    margin-bottom: 24px;
  }

  .product-gallery__thumbnails {
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    /* Centered while the thumbs fit; auto margins on the first/last thumb (not
       justify-content: center) keep the first thumb reachable when they scroll. */
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .product-gallery__thumb:first-child {
    margin-left: auto;
  }

  .product-gallery__thumb:last-child {
    margin-right: auto;
  }

  .product-gallery__thumb {
    width: 63px;
    height: 79px;
    flex: 0 0 auto;
  }

  .product-gallery__play > span {
    width: 24px;
    height: 24px;
  }

  .product-gallery__play svg {
    width: 8px;
    height: 9px;
    margin-left: 1px;
  }

  /* Variations / sizes — smaller label + buttons per Figma */
  .single-product__info .variations .label label {
    font-size: 14px;
    line-height: 16px;
  }

  .variation-button {
    padding: 4px 10px;
    font-size: 10px;
    border-width: 1px;
    border-radius: 3px;
  }

  .single-product__separator {
    width: 100%;
  }

  /* Quantity row */
  .single-product__info .quantity-label {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .single-product__info .quantity input.qty {
    font-size: 16px;
    width: 28px;
    height: 22px;
  }

  .quantity-button {
    width: 16px;
    height: 16px;
  }
  .quantity-button::before {
    width: 16px;
  }
  .quantity-button.quantity-plus::after {
    height: 16px;
  }

  /* Price + Add-to-cart row stays side-by-side, compact buttons (147×30) */
  .single-product__cart-row {
    flex-direction: row;
    gap: 12px;
  }

  .single-product__price-display,
  .single-product__add-to-cart {
    flex: 1 1 0;
    width: auto;
    height: 30px;
    font-size: 10px;
    font-weight: 300;
    border-radius: 3px;
  }

  .single-product__price-display {
    padding: 0 12px;
  }

  .single-product__add-to-cart {
    padding: 0 16px;
    letter-spacing: 0.05em;
  }

  /* Shipping note 10px on mobile */
  .single-product__shipping {
    font-size: 10px;
    line-height: 18px;
  }

  /* Related slider title smaller */
  .single-product__related-title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 30px;
  }

  .single-product__related {
    padding: 40px 20px 0;
  }

  .single-product__related .categories-showcase__slide {
    flex: 0 0 calc(50% - 12px);
    min-width: calc(50% - 12px);
  }

  .single-product__related-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

}

/* ========================================
   CHECKOUT PAGE
======================================== */
.wc-block-checkout {
  font-family: var(--font-body);
}

/* Checkout - Blocks styling */
.wc-block-checkout {
  font-family: var(--font-body);
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
}

.wc-block-checkout .wc-block-components-checkout-step__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea {
  font-family: var(--font-body);
  font-size: 14px;
  border-radius: 0 !important;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 32px;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
  background: #333 !important;
}

.wc-block-checkout .wc-block-components-product-name {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 20px;
}

@media (max-width: 768px) {
  .wc-block-checkout {
    padding: 30px 20px;
  }
}

/* ========================================
   CART DRAWER
======================================== */
.cart-drawer__overlay {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100vw;
  height: calc(100% - 100px);
  background: rgba(0, 0, 0, 0.3);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cart-drawer__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* While the cart drawer is open, freeze the header in its default (collapsed)
   state — main nav stays hidden and submenus stay closed even on hover. */
body.is-cart-open .site-header:hover .header-top {
  padding-bottom: 0;
}
body.is-cart-open .site-header:hover .header-nav {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
body.is-cart-open .header-submenus {
  pointer-events: none;
}
body.is-cart-open .header-submenu.is-active {
  max-height: 0;
  opacity: 0;
  box-shadow: none;
}

/* ── Cart drawer (desktop = full-width dropdown below header) ── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 480px;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  background: var(--color-white);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  /* clip-path keeps the drawer fully inside the viewport bounding box (no
     translateX off-screen), so it never contributes to documentElement
     scrollWidth — fixes the mobile horizontal-scroll bug. */
  clip-path: inset(0 0 0 100%);
  transition: opacity 0.3s ease, clip-path 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  padding: 80px 32px 32px;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
}

.cart-drawer.is-open {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0);
}

.cart-drawer__close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  padding: 8px;
  z-index: 2;
}

.cart-drawer__close:hover {
  opacity: 0.6;
}

.cart-drawer__empty {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-gray);
  text-align: center;
  padding: 40px 0;
}

.cart-drawer__layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: none;
  margin: 0;
  align-items: stretch;
}

.cart-drawer__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cart-drawer__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.cart-drawer__item-image {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
}

.cart-drawer__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-drawer__item-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
  z-index: 1;
}

.cart-drawer__item-remove:hover {
  opacity: 0.7;
}

.cart-drawer__item-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  max-width: none;
  align-items: stretch;
  gap: 6px;
}

.cart-drawer__item-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-gray);
  margin: 0 0 8px;
}

.cart-drawer__item-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0 0 6px;
  text-align: center;
}

.cart-drawer__item-variation {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 12px;
}

.cart-drawer__item-variation-label {
  color: var(--color-black);
}

.cart-drawer__item-variation-value {
  color: var(--color-gray);
}

.cart-drawer__item-qty {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}

.cart-drawer__qty-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
}

.cart-drawer__qty-controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cart-drawer__qty-btn {
  /* Round, like the checkout − / + (client, Oct 2026). */
  position: relative;
  width: 28px;
  height: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  color: var(--color-black);
}

.cart-drawer__qty-btn::before,
.cart-drawer__qty-btn::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.cart-drawer__qty-btn::before {
  /* horizontal line — present on both + and − (centred inside the circle) */
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.cart-drawer__qty-btn::after {
  /* vertical line — only on + */
  left: 50%;
  top: 50%;
  width: 1px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.cart-drawer__qty-minus::after {
  display: none;
}

.cart-drawer__qty-btn:hover {
  opacity: 0.6;
}

.cart-drawer__qty-value {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
}

.cart-drawer__item-price {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black);
}

.cart-drawer__toolbar {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
}

.cart-drawer__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
  cursor: pointer;
  transition: color 0.2s ease;
}

.cart-drawer__clear:hover {
  color: var(--color-black);
}

.cart-drawer__clear svg {
  flex-shrink: 0;
}

.cart-drawer__summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

.cart-drawer__summary-shipping {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  margin: 0;
}

.cart-drawer__summary-shipping strong {
  font-weight: 700;
}

.cart-drawer__summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-body);
  color: var(--color-black);
}

.cart-drawer__summary-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cart-drawer__summary-amount {
  font-size: 20px;
  font-weight: 500;
}

.cart-drawer__summary-amount .woocommerce-Price-amount {
  font-weight: inherit;
}

.cart-drawer__summary-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 47px;
  padding: 0 32px;
  background: var(--color-black);
  border: 2px solid var(--color-black);
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-white);
  text-decoration: none;
  transition: background 0.2s;
}

.cart-drawer__summary-checkout:hover {
  background: #333;
  color: var(--color-white);
}

.cart-drawer__item-shipping {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black);
  line-height: 18px;
}

.cart-drawer__item-shipping strong {
  font-weight: 700;
}

@media (max-width: 700px) {
  .cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    padding: 64px 16px 24px;
  }
  .cart-drawer__layout {
    gap: 24px;
  }
  .cart-drawer__items {
    gap: 24px;
  }
  .cart-drawer__item-image {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  /* Title left-aligned to match the rest of the item meta on mobile. */
  .cart-drawer__item-title {
    font-size: 18px;
    line-height: 1.2;
    text-align: left;
  }
  /* Smaller × close button, vertically aligned with the ISPRAZNI KORPU row. */
  .cart-drawer__close {
    top: 30px;
    right: 16px;
    padding: 4px;
  }
  .cart-drawer__close svg {
    width: 16px;
    height: 16px;
  }
  .cart-drawer__toolbar {
    top: 24px;
    left: 16px;
  }
  /* Per-item × button — sits over the image, top-right corner. */
  .cart-drawer__item-remove {
    top: 10px;
    right: 10px;
  }
}

/* ========================================
   ORDER RECEIVED (Thank You) PAGE
======================================== */
.woocommerce-order {
  max-width: 960px;
  margin: 60px auto;
  padding: 0 24px;
  font-family: var(--font-body);
  color: var(--color-black);
}

.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  margin: 0 0 32px;
  padding: 0 0 20px;
  border-bottom: 1px solid #E5E5E5;
}

.woocommerce-order ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}

/* Total + Payment method are duplicated under the items table — hide here. */
.woocommerce-order ul.woocommerce-order-overview .woocommerce-order-overview__total,
.woocommerce-order ul.woocommerce-order-overview .woocommerce-order-overview__payment-method {
  display: none;
}

.woocommerce-order ul.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
  border: none;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
  font-size: 16px;
  color: var(--color-black);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  margin: 0 0 20px;
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  margin-bottom: 48px;
}

.woocommerce-order table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 24px;
}

.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td {
  padding: 18px 0;
  text-align: left;
  border-bottom: 1px solid #E5E5E5;
  vertical-align: top;
}

.woocommerce-order .maruska-order-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.woocommerce-order .maruska-order-item__image {
  display: block;
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
  background: #F7F7F7;
}

.woocommerce-order .maruska-order-item__image img,
.woocommerce-order .maruska-order-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.woocommerce-order .maruska-order-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 4px;
}

.woocommerce-order .maruska-order-item__price {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-black);
}

.woocommerce-order .maruska-order-item__variation {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--color-gray);
}

.woocommerce-order .maruska-order-item__variation-label,
.woocommerce-order .maruska-order-item__variation-value {
  display: inline !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.woocommerce-order .maruska-order-item__variation-label {
  color: var(--color-black);
  margin-right: 4px;
}

.woocommerce-order .maruska-order-item__variation-value {
  color: var(--color-gray);
}

.woocommerce-order .maruska-order-item__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
  line-height: 1.25;
}

.woocommerce-order .maruska-order-item__name a {
  color: inherit;
  text-decoration: none;
}

.woocommerce-order .maruska-order-item__name a:hover {
  text-decoration: underline;
}

.woocommerce-order .maruska-order-item__body .wc-item-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--color-gray);
}

.woocommerce-order .maruska-order-item__body .wc-item-meta li {
  margin: 0;
  padding: 0;
}

.woocommerce-order .maruska-order-item__body .wc-item-meta strong {
  font-weight: 400;
  color: var(--color-black);
}

.woocommerce-order .maruska-order-item__qty {
  font-size: 13px;
  color: var(--color-black);
}

.woocommerce-order table.woocommerce-table--order-details th {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
}

.woocommerce-order table.woocommerce-table--order-details td:last-child,
.woocommerce-order table.woocommerce-table--order-details th:last-child {
  text-align: right;
}

.woocommerce-order table.woocommerce-table--order-details tfoot th {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-black);
  font-size: 14px;
}

.woocommerce-order table.woocommerce-table--order-details tfoot td,
.woocommerce-order table.woocommerce-table--order-details tfoot td bdi,
.woocommerce-order table.woocommerce-table--order-details tfoot td .woocommerce-Price-amount,
.woocommerce-order table.woocommerce-table--order-details tfoot td .woocommerce-Price-currencySymbol {
  font-weight: 700 !important;
  color: var(--color-black) !important;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 16px;
  border-bottom: none;
  padding-top: 18px;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th {
  font-weight: 400;
}

.woocommerce-order .woocommerce-customer-details .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* CSS-side belt for the COD "Plaćanje prilikom preuzimanja." paragraph
   that WC prints after the overview list — the unhook in PHP usually
   removes it, but if a future change reintroduces it this hides it. */
.woocommerce-order > p,
.woocommerce-order > .woocommerce-thankyou-order-received + p {
  display: none;
}

/* Order received page — mobile sizing matched to checkout. */
@media (max-width: 768px) {
  .woocommerce-order {
    max-width: none;
    margin: 24px 0 60px;
    padding: 0 20px;
  }

  .woocommerce-order .woocommerce-thankyou-order-received {
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 20px;
    padding: 0 0 14px;
  }

  .woocommerce-order ul.woocommerce-order-overview {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
    margin: 0 0 30px;
  }

  .woocommerce-order ul.woocommerce-order-overview li {
    font-size: 12px;
  }

  .woocommerce-order ul.woocommerce-order-overview li strong {
    font-size: 14px;
  }

  .woocommerce-order .woocommerce-order-details__title,
  .woocommerce-order .woocommerce-column__title {
    font-size: 18px;
    margin: 0 0 14px;
  }

  .woocommerce-order .woocommerce-order-details,
  .woocommerce-order .woocommerce-customer-details {
    margin-bottom: 30px;
  }

  .woocommerce-order table.woocommerce-table--order-details {
    font-size: 13px;
  }

  .woocommerce-order table.woocommerce-table--order-details th,
  .woocommerce-order table.woocommerce-table--order-details td {
    padding: 14px 0;
  }

  .woocommerce-order .maruska-order-item__name {
    font-size: 14px;
  }

  .woocommerce-order .maruska-order-item__image {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
  }

  .woocommerce-order .woocommerce-customer-details .col2-set {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Match the home-link container's horizontal bounds to the page +
     header (20px) instead of 24, and left-align the button. */
  .maruska-order-home-link {
    max-width: none;
    padding: 0 20px;
    margin: 24px 0 0;
    text-align: left;
  }

  .maruska-order-home-link__btn {
    font-size: 12px;
    padding: 10px 16px;
  }
}

/* ========================================
   CHECKOUT (classic [woocommerce_checkout])
======================================== */
body.woocommerce-checkout .site-main {
  max-width: 1729px;
  margin: 0 auto;
  padding: 100px 60px 80px;
}

body.woocommerce-checkout form.checkout,
form.checkout.woocommerce-checkout,
.woocommerce form.checkout {
  display: block !important;
}

body.woocommerce-checkout .checkout-grid,
.woocommerce .checkout-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 80px !important;
  align-items: start !important;
}

/* Checkout validation errors — distributed under each field by JS. The
   top-of-form notice block is hidden so the user only sees per-field
   feedback in red right below the offending input. */
body.woocommerce-checkout > .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-NoticeGroup,
body.woocommerce-checkout form.checkout > .woocommerce-error,
body.woocommerce-checkout form.checkout > .woocommerce-message,
body.woocommerce-checkout main > .woocommerce-error,
body.woocommerce-checkout main > .woocommerce-message,
body.woocommerce-checkout main > ul.woocommerce-error,
body.woocommerce-checkout .site-main > .woocommerce-error,
body.woocommerce-checkout .site-main > .woocommerce-notices-wrapper {
  display: none !important;
}

body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid textarea,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-container .select2-selection {
  border-color: #E53935 !important;
  background-color: #FFFAFA;
}

/* Inline error text under the field — matches our injected span and any
   native WC inline error variants. NOTE: do NOT include `span.required`
   here — that selector also matches the asterisk next to required labels
   and would render as a red dot. */
body.woocommerce-checkout .form-row .maruska-field-error,
body.woocommerce-checkout .form-row .checkout-inline-error-message,
body.woocommerce-checkout .form-row > .woocommerce-error,
body.woocommerce-checkout .form-row > .woocommerce-error[role="alert"],
body.woocommerce-checkout .form-row > ul.woocommerce-error,
body.woocommerce-checkout .form-row > ul.woocommerce-error li,
body.woocommerce-checkout .form-row .wc_error_tip {
  display: block !important;
  color: #E53935 !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  list-style: none !important;
}

/* ========================================
   404 page
======================================== */
.error-404 {
  max-width: 1729px;
  margin: 0 auto;
  padding: 120px 20px 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 520px;
}
.error-404__code {
  font-family: var(--font-heading);
  font-size: 96px;
  line-height: 1;
  font-weight: var(--fw-heading);
  letter-spacing: 0.04em;
  color: var(--color-black);
  margin: 0;
}
.error-404__title {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.2;
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
  margin: 0;
}
.error-404__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gray);
  margin: 0;
}
.error-404__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.error-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  padding: 0 28px;
  background: var(--color-black);
  border: 2px solid var(--color-black);
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-decoration: none;
  transition: background 0.2s;
}
.error-404__btn:hover {
  background: #333;
}
.error-404__link {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.error-404__link:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .error-404 {
    padding: 60px 20px 90px;
    min-height: 50vh;
  }
  .error-404__code {
    font-size: 72px;
  }
  .error-404__title {
    font-size: 22px;
  }
  .error-404__text {
    font-size: 13px;
  }
}

/* Mobile: single column with form on top, summary + PLATI at the bottom. */
@media (max-width: 768px) {
  html,
  body.woocommerce-checkout {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* The .header-top-inner expands past viewport on the checkout page when the
     payment radio cards (Karticom / Pouzećem) push the layout — force the
     header-level wrappers to clamp at viewport width. NOTE: no overflow-x
     here — the .header-mobile drawer lives inside .site-header and would be
     clipped (overflow-x:hidden + overflow-y:visible is treated as auto/clip
     in both axes). */
  body.woocommerce-checkout .site-header,
  body.woocommerce-checkout .header-top,
  body.woocommerce-checkout .header-top-inner {
    max-width: 100vw !important;
    width: 100vw !important;
  }
  /* Apply the horizontal clip only to the inner row, which doesn't host the
     mobile drawer. */
  body.woocommerce-checkout .header-top-inner {
    overflow-x: hidden;
  }
  /* Likewise for content-side wrappers — the form, summary, payment list
     mustn't be allowed to grow wider than the viewport. */
  body.woocommerce-checkout #payment,
  body.woocommerce-checkout #payment ul.payment_methods,
  body.woocommerce-checkout #payment ul.payment_methods li,
  body.woocommerce-checkout .checkout-grid__form,
  body.woocommerce-checkout .checkout-grid__summary,
  body.woocommerce-checkout #order_review {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.woocommerce-checkout .site-main {
    padding: 45px 20px 60px !important;
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Hard cap to stop any descendant from busting the viewport width. */
  body.woocommerce-checkout .site-main * {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Tables and inputs sometimes render with min-content widths > viewport. */
  body.woocommerce-checkout .site-main table,
  body.woocommerce-checkout .site-main img,
  body.woocommerce-checkout .site-main input,
  body.woocommerce-checkout .site-main select,
  body.woocommerce-checkout .site-main textarea {
    max-width: 100%;
  }
  body.woocommerce-checkout .checkout-grid,
  .woocommerce .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  body.woocommerce-checkout .checkout-grid__form,
  body.woocommerce-checkout .checkout-grid__summary {
    width: 100% !important;
    gap: 20px;
  }
  body.woocommerce-checkout .checkout-grid__summary {
    gap: 12px;
  }
  /* Some narrow devices can't fit two side-by-side inputs comfortably; the
     standard pairs (Ime/Prezime, Postanski broj/Grad) stay 2-col but the gap
     tightens. */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    gap: 12px 12px !important;
  }
  body.woocommerce-checkout #customer_details h3,
  body.woocommerce-checkout .checkout-cross-sells__title {
    font-size: 22px;
  }
  /* Compact summary items on mobile: smaller image + tighter spacing. */
  body.woocommerce-checkout .checkout-summary__item {
    gap: 12px;
  }
  body.woocommerce-checkout .checkout-summary__item-image {
    width: 96px;
    flex: 0 0 96px;
  }
  body.woocommerce-checkout .checkout-summary__item-title {
    font-size: 16px;
    line-height: 1.2;
  }
  body.woocommerce-checkout .checkout-summary__item-price {
    margin-right: 0;
    margin-top: 12px;
  }
  /* Cross-sells row — shrink the 130px image so the row fits on narrow phones
     and avoids horizontal overflow. */
  body.woocommerce-checkout .checkout-cross-sells__item {
    grid-template-columns: 80px minmax(0, 1fr) auto !important;
    gap: 12px;
  }
  body.woocommerce-checkout .checkout-cross-sells__item-image {
    width: 80px;
    height: 80px;
  }
  /* Total row, PLATI button, dostava note all full-width in flow. */
  body.woocommerce-checkout #place_order,
  body.woocommerce-checkout button#place_order {
    width: 100% !important;
  }
  /* Drop the gap between PLATI and Dostava — was 20px flex-gap + 16px margin
     + 24px slot margin = ~36px combined on mobile. */
  body.woocommerce-checkout .checkout-place-order-slot {
    margin: 0;
  }
  body.woocommerce-checkout .checkout-shipping-note {
    margin: -12px 0 0 !important;
    font-size: 13px;
    line-height: 18px;
  }
}

body.woocommerce-checkout .checkout-grid__form,
body.woocommerce-checkout .checkout-grid__summary,
.woocommerce .checkout-grid__form,
.woocommerce .checkout-grid__summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* The "Your order" h3 is blanked by gettext — hide it. */
body.woocommerce-checkout #order_review_heading {
  display: none !important;
}

body.woocommerce-checkout #customer_details {
  grid-column: 1;
  display: block;
  width: 100% !important;
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px 24px !important;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}

body.woocommerce-checkout .form-row-wide {
  grid-column: 1 / -1 !important;
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select:not(.select2-hidden-accessible) {
  width: 100% !important;
}

/* Defensive: select2's hidden <select> must stay clipped to 1px so it
   doesn't push the page's scrollWidth past the viewport. */
body.woocommerce-checkout .form-row select.select2-hidden-accessible {
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review {
  grid-column: 2;
}

body.woocommerce-checkout #order_review_heading {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-black);
}

body.woocommerce-checkout #customer_details h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-black);
  margin: 0 0 16px;
}

body.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout .form-row label {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
  margin: 0;
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-selection {
  height: 47px;
  padding: 12px 14px;
  border: 1px solid #CCCCCC !important;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
  border-radius: 0;
  box-sizing: border-box;
}

body.woocommerce-checkout .form-row textarea {
  height: auto;
  min-height: 100px;
}

body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
  outline: none;
  border-color: var(--color-black) !important;
}

body.woocommerce-checkout #order_review {
  background: transparent;
  padding: 0;
}

body.woocommerce-checkout #payment {
  background: transparent;
  padding: 0;
  margin: 0;
}

body.woocommerce-checkout #payment ul.payment_methods::before {
  content: 'Plaćanje';
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-black);
  margin: 0 0 12px;
}

/* Custom checkout summary (right column) */
body.woocommerce-checkout .checkout-summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.woocommerce-checkout .checkout-summary__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.woocommerce-checkout .checkout-summary__item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}

body.woocommerce-checkout .checkout-summary__item-image {
  position: relative;
  width: 180px;
  height: 180px;
  background: linear-gradient(180deg, rgba(232,232,232,0.6) 0%, rgba(255,255,255,0.6) 100%);
  overflow: visible;
}

body.woocommerce-checkout .checkout-summary__item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Shown after the last item is removed at checkout. */
body.woocommerce-checkout .checkout-empty {
  padding: 80px 0;
  text-align: center;
}
body.woocommerce-checkout .checkout-empty__title {
  margin: 0 0 24px;
  font-size: 22px;
}
body.woocommerce-checkout .checkout-empty__link {
  display: inline-block;
  padding: 16px 40px;
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Remove (×) — same black circle as the cart drawer. */
body.woocommerce-checkout .checkout-summary__item-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s;
}
body.woocommerce-checkout .checkout-summary__item-remove:hover {
  opacity: 0.7;
}

body.woocommerce-checkout .checkout-summary__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.woocommerce-checkout .checkout-summary__item-qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  user-select: none;
}

body.woocommerce-checkout .checkout-summary__item-qty-controls.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

body.woocommerce-checkout .checkout-summary__item-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

body.woocommerce-checkout .checkout-summary__item-qty-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

body.woocommerce-checkout .checkout-summary__item-qty-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  min-width: 16px;
  text-align: center;
}

body.woocommerce-checkout .checkout-summary__item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 20px;
}

body.woocommerce-checkout .checkout-summary__item-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}

body.woocommerce-checkout .checkout-summary__item-variation {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
}

body.woocommerce-checkout .checkout-summary__item-variation-label {
  color: var(--color-black);
}

body.woocommerce-checkout .checkout-summary__item-variation-value {
  color: var(--color-gray);
}

body.woocommerce-checkout .checkout-summary__item-price {
  align-self: flex-end;
  margin-top: 24px;
  margin-right: 60px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
  white-space: nowrap;
}

body.woocommerce-checkout .checkout-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 24px;
  margin-top: 8px;
  border-top: none;
}

body.woocommerce-checkout .checkout-summary__total-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--color-black);
}

body.woocommerce-checkout .checkout-summary__total-amount {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  color: var(--color-black);
}

body.woocommerce-checkout .checkout-summary__total-amount .woocommerce-Price-amount {
  font-weight: inherit;
}

body.woocommerce-checkout .checkout-summary__shipping {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  margin: 0;
}

body.woocommerce-checkout .checkout-summary__shipping strong {
  font-weight: 700;
}

/* Cross-sells (right column, after order review) */
body.woocommerce-checkout .checkout-cross-sells {
  grid-column: 2;
  margin-top: 24px;
}

body.woocommerce-checkout .checkout-cross-sells__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-black);
  margin: 0 0 16px;
}

body.woocommerce-checkout .checkout-cross-sells__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.woocommerce-checkout .checkout-cross-sells__item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  text-decoration: none;
}

body.woocommerce-checkout .checkout-cross-sells__item-image {
  width: 130px;
  height: 130px;
  background: linear-gradient(180deg, rgba(232,232,232,0.6) 0%, rgba(255,255,255,0.6) 100%);
  overflow: hidden;
}

body.woocommerce-checkout .checkout-cross-sells__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.woocommerce-checkout .checkout-cross-sells__item-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}

body.woocommerce-checkout .checkout-cross-sells__item-price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-black);
  white-space: nowrap;
}

body.woocommerce-checkout table.shop_table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 0 0 16px;
  background: transparent;
}

body.woocommerce-checkout table.shop_table thead {
  display: none;
}

body.woocommerce-checkout table.shop_table tbody td {
  padding: 14px 0;
  border-bottom: 1px solid #E5E5E5;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
}

body.woocommerce-checkout table.shop_table .product-name {
  width: 70%;
}

body.woocommerce-checkout table.shop_table .product-name strong {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-black);
  display: block;
  margin-bottom: 4px;
}

body.woocommerce-checkout table.shop_table .product-name .product-quantity {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gray);
}

body.woocommerce-checkout table.shop_table .product-total {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

body.woocommerce-checkout table.shop_table tfoot th {
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-black);
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid #E5E5E5;
  font-weight: 400;
}

body.woocommerce-checkout table.shop_table tfoot td {
  text-align: right;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid #E5E5E5;
}

body.woocommerce-checkout table.shop_table tfoot .order-total th,
body.woocommerce-checkout table.shop_table tfoot .order-total td {
  font-size: 18px;
  font-weight: 700;
  border-bottom: none;
  padding-top: 16px;
}

body.woocommerce-checkout #payment {
  background: transparent;
  padding: 0;
  margin-top: 16px;
}

body.woocommerce-checkout #payment ul.payment_methods {
  border: none;
  padding: 0;
  margin: 0 0 16px;
  background: transparent;
  list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 18px;
  margin: 0 0 8px;
  background: var(--color-white);
  border: 1px solid #B5B5B5;
  border-radius: 4px;
  list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) {
  border-color: var(--color-black);
  border-width: 2px;
  padding: 13px 17px;
}

body.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-gray);
  cursor: pointer;
}

body.woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) label {
  color: var(--color-black);
}

body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #B5B5B5;
  border-radius: 50%;
  background: var(--color-white);
  margin: 0;
  position: relative;
  cursor: pointer;
}

body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked {
  border-color: var(--color-black);
}

body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--color-black);
}

/* "Plaćanje karticom (uskoro)" — disabled placeholder until the bank plugin. */
body.woocommerce-checkout #payment ul.payment_methods li.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
body.woocommerce-checkout #payment ul.payment_methods li.is-disabled label,
body.woocommerce-checkout #payment ul.payment_methods li.is-disabled input[type="radio"] {
  cursor: not-allowed;
}

/* Hide payment description text + privacy policy text */
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment .terms-and-conditions-wrapper {
  display: none !important;
}

body.woocommerce-checkout #payment .place-order {
  padding: 0;
  margin: 0;
}

/* Remember-me checkbox under payment methods (left col) */
body.woocommerce-checkout .checkout-remember {
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout .checkout-remember__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-black);
}

body.woocommerce-checkout .checkout-remember__input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-black);
  border-radius: 2px;
  background: var(--color-white);
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

body.woocommerce-checkout .checkout-remember__input:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--color-black);
  border-radius: 1px;
}

body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order {
  width: 33%;
  height: 47px;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-black) !important;
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s;
  text-transform: none;
  display: block;
  margin-left: 0;
  margin-right: auto;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button#place_order:hover {
  background: #333 !important;
}

body.woocommerce-checkout .place-order {
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout .checkout-place-order-slot {
  margin: 24px 0 0;
}

body.woocommerce-checkout .checkout-place-order-slot:empty {
  display: none;
}

body.woocommerce-checkout .checkout-shipping-note {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}

body.woocommerce-checkout .checkout-shipping-note strong {
  color: var(--color-black);
  font-weight: 700;
  margin-right: 4px;
}

body.woocommerce-checkout .checkout-shipping-note span {
  color: var(--color-gray);
}

@media (max-width: 1000px) {
  body.woocommerce-checkout .site-main {
    padding: 60px 24px 60px;
  }
  body.woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #order_review_heading,
  body.woocommerce-checkout #order_review {
    grid-column: 1;
  }
}

@media (max-width: 600px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

.woocommerce-order .woocommerce-customer-details address {
  font-style: normal;
  line-height: 1.6;
  color: var(--color-black);
  padding: 20px;
  background: #F7F7F7;
  border: 1px solid #E5E5E5;
}

.woocommerce-order .woocommerce-customer-details address p {
  margin: 0;
}

@media (max-width: 768px) {
  .woocommerce-order {
    margin: 30px auto;
  }
  .woocommerce-order .woocommerce-thankyou-order-received {
    font-size: 24px;
  }
  .woocommerce-order ul.woocommerce-order-overview {
    gap: 20px;
  }
  .woocommerce-order .woocommerce-customer-details .col2-set {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ========================================
   O NAMA Page
======================================== */
.onama-page {
  color: var(--color-black);
}

/* Hero */
.onama-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #F5F1EC;
}
.onama-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.onama-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onama-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.onama-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px;
}
.onama-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 64px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Split sections — 730px fixed row height, no vertical gap between rows. DOM order drives image/text placement. */
.onama-split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  max-width: 1920px;
  margin: 0 auto;
  height: 730px;
}
.onama-split__image {
  flex: 0 0 50%;
  width: 50%;
  align-self: stretch;
  overflow: hidden;
}
.onama-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* "Fokus slike" (O nama sections): which part stays visible when cropped. */
.onama-split__image--top img {
  object-position: center top;
}
.onama-split__image--bottom img {
  object-position: center bottom;
}
.onama-split__content {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.onama-split__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}
.onama-split__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  max-width: 559px;
}
.onama-split__text p {
  margin: 0 0 1em;
}
.onama-split__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .onama-hero__title {
    font-size: 36px;
  }
  .onama-hero {
    min-height: 50vh;
  }
  .onama-split,
  .onama-split--image-left {
    flex-direction: column;
    gap: 32px;
    padding: 40px 20px;
    height: auto;
  }
  .onama-split__image {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 864 / 730;
  }
  .onama-split__content {
    flex: 1 1 auto;
    width: 100%;
  }
  .onama-split__title {
    font-size: 32px;
    line-height: 36px;
  }
}

/* O nama / Svet Maruške — mobile (Figma 1073:2443).
   Shared template for both pages: 568px hero, then 5 vertical split rows
   with content (250px) on top and image (426px) below, regardless of the
   desktop alternation. */
@media (max-width: 768px) {
  .onama-hero {
    min-height: 0;
    height: 568px;
  }
  .onama-hero__title {
    font-size: 40px;
    line-height: 42px;
    padding: 0 20px;
  }
  .onama-hero__content {
    padding-bottom: 91px;
  }

  .onama-split,
  .onama-split--image-left {
    padding: 0;
    gap: 0;
  }
  .onama-split__content {
    order: 1;
    padding: 50px 20px;
    gap: 14px;
  }
  .onama-split__image {
    order: 2;
    aspect-ratio: 395 / 426;
  }
  .onama-split__title {
    font-size: 24px;
    line-height: 1.2;
  }
  .onama-split__text {
    font-size: 12px;
    line-height: 18px;
  }

  /* Awards (Nagrade) section. */
  .onama-nagrade {
    padding: 30px 20px 40px;
    gap: 24px;
  }
  .onama-nagrade__title {
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 4px;
  }
  .onama-nagrade__items {
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 16px;
  }
  .onama-nagrade__item {
    flex: 0 0 calc(33.333% - 12px);
    max-width: 110px;
    gap: 8px;
  }
  .onama-nagrade__item img {
    max-height: 80px;
  }
  .onama-nagrade__label {
    font-size: 8px;
    line-height: 12px;
  }
}

/* Svet Maruške — hero + post list mobile (Figma 1073:2443). Match the
   o-nama / homepage hero shape: 568px tall, title 40/42 anchored bottom. */
@media (max-width: 768px) {
  .svet-hero {
    height: 568px !important;
    aspect-ratio: auto !important;
    align-items: flex-end;
  }
  .svet-hero__content {
    padding: 0 20px 91px;
  }
  .svet-hero__title {
    font-size: 40px;
    line-height: 42px;
    padding: 0 20px;
  }
  .svet-post__more {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.05em;
  }
}

/* Nagrade (awards gallery) — Figma node 1013:1915 */
.onama-nagrade {
  max-width: 1525px;
  margin: 0 auto;
  padding: 50px 20px;
  min-height: 730px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.onama-nagrade__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 48px;
  line-height: 72px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-black);
  margin: 0;
}
.onama-nagrade__items {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 23px;
  width: 100%;
}
.onama-nagrade__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 144px;
  flex: 0 1 auto;
  margin: 0;
}
.onama-nagrade__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 196px;
  object-fit: contain;
}
.onama-nagrade__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black);
}

@media (max-width: 900px) {
  .onama-nagrade {
    min-height: 0;
    padding: 40px 20px;
    gap: 24px;
  }
  .onama-nagrade__title {
    font-size: 32px;
    line-height: 40px;
  }
  .onama-nagrade__items {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .onama-nagrade__item {
    flex: 0 0 calc(33.333% - 20px);
    max-width: none;
  }
  .onama-nagrade__item img {
    max-height: 120px;
  }
}

/* ========================================
   LOKACIJE — Locations page
======================================== */
.lokacije-page {
  color: var(--color-black);
}
.lokacije-hero {
  /* ~80px visible above and below: the 154px header covers 54px of the top. */
  padding: 134px 20px 80px;
  text-align: center;
}
.lokacije-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 48px;
  line-height: 72px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}
.lokacije-split .lokacije-split__content {
  gap: 24px;
}
.lokacije-split__details {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  max-width: 549px;
}
.lokacije-split__city {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}
.lokacije-split__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 70px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--color-black);
  background: #ffffff;
  border: 1px solid var(--color-black);
  transition: background-color 0.2s, color 0.2s;
}
.lokacije-split__cta:hover {
  background: var(--color-black);
  color: #ffffff;
}

/* Tablet: the header is no taller than the space reserved for it. */
@media (max-width: 1023px) {
  .lokacije-hero {
    padding: 80px 20px;
  }
}

@media (max-width: 900px) {
  .lokacije-hero {
    padding: 80px 20px;
  }
  .lokacije-hero__title {
    font-size: 36px;
    line-height: 1.2;
  }
}

/* Lokacije — mobile (Figma 1073:2536). Each location is a vertical card
   matching the homepage promo blocks: content on top, image on bottom. */
@media (max-width: 768px) {
  .lokacije-hero {
    padding: 32px 20px 32px;
    min-height: 0;
  }
  .lokacije-hero__title {
    font-size: 24px;
    line-height: 1.4;
  }

  /* Force content above image regardless of the desktop alternation. */
  .lokacije-split.onama-split,
  .lokacije-split.onama-split--image-left {
    padding: 0;
    gap: 0;
  }
  .lokacije-split .onama-split__content {
    order: 1;
    padding: 60px 20px;
    gap: 14px;
  }
  .lokacije-split .onama-split__image {
    order: 2;
    aspect-ratio: 395/426;
  }

  /* Per-card typography per Figma. */
  .lokacije-split .onama-split__title {
    font-size: 24px;
    line-height: 1.2;
  }
  .lokacije-split__details {
    font-size: 12px;
    line-height: 18px;
  }
  .lokacije-split__city {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  .lokacije-split__cta {
    width: 60px;
    height: 30px;
    font-size: 12px;
    border-width: 1px;
    line-height: 1;
    white-space: nowrap;
    padding: 0;
  }
}

/* ========================================
   SVET MARUŠKE — Blog archive page
======================================== */
.svet-page {
  color: var(--color-black);
}
.svet-hero {
  position: relative;
  width: 100%;
  height: 730px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.svet-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svet-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svet-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.svet-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 20px 140px;
}
.svet-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 64px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.svet-post .onama-split__title a,
.svet-post .onama-split__image a {
  color: inherit;
  text-decoration: none;
}
.svet-post .onama-split__title a:hover {
  text-decoration: underline;
}
.svet-post__more {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  margin-top: 8px;
}
.svet-post__more:hover {
  opacity: 0.7;
}

@media (max-width: 900px) and (min-width: 769px) {
  .svet-hero {
    height: auto;
    aspect-ratio: 1728 / 730;
  }
  .svet-hero__title {
    font-size: 36px;
  }
}

/* ========================================
   MODA I UMETNOST — Landing Page
======================================== */
.moda-umetnost-page {
  color: var(--color-black);
}

/* Hero */
.moda-umetnost-hero {
  padding: 100px 20px 80px;
  background: #F5F1EC;
  text-align: center;
}
.moda-umetnost-hero__inner {
  max-width: 800px;
  margin: 0 auto;
}
.moda-umetnost-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 56px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  margin: 0 0 16px;
}
.moda-umetnost-hero__tagline {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray);
  margin: 0;
}

/* Museum carousel */
.moda-umetnost-museums {
  padding: 80px 20px;
}
.moda-umetnost-museums__container {
  max-width: 1440px;
  margin: 0 auto;
}
.moda-umetnost-museums__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 40px;
}

/* Split sections (Marame / Esarpe) */
.moda-umetnost-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  min-height: 594px;
}
.moda-umetnost-split__content {
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.moda-umetnost-split__kicker {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-black);
}
.moda-umetnost-split__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 64px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--color-black);
}
.moda-umetnost-split__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gray);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}
.moda-umetnost-split__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 16px 32px;
  margin-top: 16px;
  border: 2px solid var(--color-black);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.moda-umetnost-split__btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}
.moda-umetnost-split__image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.moda-umetnost-split__image img {
  width: 100%;
  height: 100%;
  min-height: 594px;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .moda-umetnost-hero {
    padding: 60px 20px 40px;
  }
  .moda-umetnost-hero__title {
    font-size: 36px;
  }
  .moda-umetnost-split,
  .moda-umetnost-split--image-left {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .moda-umetnost-split--image-left .moda-umetnost-split__image {
    order: 1;
  }
  .moda-umetnost-split--image-left .moda-umetnost-split__content {
    order: 2;
  }
  .moda-umetnost-split__content {
    padding: 40px 20px;
  }
  .moda-umetnost-split__title {
    font-size: 40px;
  }
  .moda-umetnost-split__image img {
    min-height: 300px;
  }
}

/* VIŠE button on Moda i umetnost — match the home/Za-nju 60×30 size on mobile. */
@media (max-width: 768px) {
  .moda-umetnost-split__btn {
    min-width: 0;
    width: 60px;
    height: 30px;
    padding: 0;
    margin-top: 12px;
    border-width: 1px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* ========================================
   MY ACCOUNT PAGE (Maruška custom)
======================================== */
.maruska-account {
  max-width: 960px;
  margin: 60px auto;
  padding: 0 24px;
  font-family: var(--font-body);
  color: var(--color-black);
}

.maruska-account__section {
  margin-bottom: 48px;
}

.maruska-account__toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid var(--color-black);
}

.maruska-account__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-black);
  display: block;
}

.maruska-account__toggle .maruska-account__heading {
  border: none;
  padding-bottom: 0;
  margin: 0;
}

.maruska-account__chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.maruska-account__section[data-expanded="true"] .maruska-account__chevron {
  transform: rotate(180deg);
}

.maruska-account__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.maruska-account__section[data-expanded="true"] .maruska-account__content {
  max-height: 3000px;
  padding-top: 24px;
}

.maruska-account__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.maruska-account__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.maruska-account__group-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-black);
  margin: 0 0 4px;
}

.maruska-account__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.maruska-account__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
}

.maruska-account__form input,
.maruska-account__form select {
  padding: 12px 14px;
  border: 1px solid #CCCCCC;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
  text-transform: none;
  letter-spacing: 0;
}

.maruska-account__form input:focus,
.maruska-account__form select:focus {
  outline: none;
  border-color: var(--color-black);
}

.maruska-account__form small {
  font-size: 12px;
  color: var(--color-gray);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}

.maruska-account__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

.maruska-account__submit {
  padding: 14px 32px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.maruska-account__submit:hover {
  opacity: 0.85;
}

.maruska-account__history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 24px;
}

.maruska-account__history-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-black);
  transition: opacity 0.2s ease;
}

.maruska-account__history-item:hover {
  opacity: 0.85;
}

.maruska-account__history-image {
  aspect-ratio: 286 / 292;
  overflow: hidden;
  margin-bottom: 16px;
}

.maruska-account__history-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maruska-account__history-name {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 4px;
}

.maruska-account__history-price {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-gray);
  text-align: center;
}

.maruska-account__empty {
  color: var(--color-gray);
  margin-top: 16px;
}

/* ── Logged-out my-account: style WooCommerce default login form ── */
.woocommerce-account .woocommerce {
  max-width: 520px;
  margin: 60px auto;
  padding: 0 20px;
}

.woocommerce-account .woocommerce > h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-black);
}

.woocommerce-account .woocommerce-form-login {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.woocommerce-account .woocommerce-form-login p,
.woocommerce-account .woocommerce-form-row {
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
}

.woocommerce-account .woocommerce-form-login label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
  margin-bottom: 6px;
}

.woocommerce-account .woocommerce-Input--text,
.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="password"],
.woocommerce-account .woocommerce-form-login input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #CCCCCC;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
}

.woocommerce-account .woocommerce-Input--text:focus,
.woocommerce-account .woocommerce-form-login input:focus {
  outline: none;
  border-color: var(--color-black);
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-button.button {
  padding: 14px 32px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-button.button:hover {
  opacity: 0.85;
}

.woocommerce-account .lost_password {
  margin-top: 8px;
  font-size: 13px;
}

.woocommerce-account .lost_password a {
  color: var(--color-gray);
  text-decoration: underline;
}

.woocommerce-account .lost_password a:hover {
  color: var(--color-black);
}

@media (max-width: 768px) {
  .maruska-account {
    margin: 30px auto;
  }
  .maruska-account__heading {
    font-size: 20px;
  }
  .maruska-account__row {
    grid-template-columns: 1fr;
  }
  .maruska-account__history-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .woocommerce-account .woocommerce {
    margin: 30px auto;
  }
  .woocommerce-account .woocommerce > h2 {
    font-size: 20px;
  }
}

/* Back-to-home link on order received page */
.maruska-order-home-link {
  max-width: 960px;
  margin: 40px auto 0;
  padding: 0 24px;
}

.maruska-order-home-link__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.maruska-order-home-link__btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* ========================================
   POST-PURCHASE ACCOUNT PROMPT
======================================== */
.maruska-account-prompt {
  max-width: 560px;
  margin: 40px auto;
  padding: 32px 36px;
  background: #F7F7F7;
  border: 1px solid #E5E5E5;
}

.maruska-account-prompt__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0 0 8px;
}

.maruska-account-prompt__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gray);
  margin: 0 0 24px;
}

.maruska-account-prompt__row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 14px;
  margin-bottom: 16px;
}

.maruska-account-prompt__label {
  color: var(--color-gray);
}

.maruska-account-prompt__email {
  color: var(--color-black);
  font-weight: 500;
}

.maruska-account-prompt__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.maruska-account-prompt__field label {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
  margin-bottom: 6px;
}

.maruska-account-prompt__field input[type="password"] {
  padding: 12px 14px;
  border: 1px solid #CCCCCC;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
}

.maruska-account-prompt__field small {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-gray);
  margin-top: 4px;
}

.maruska-account-prompt__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.maruska-account-prompt__submit {
  padding: 12px 24px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.maruska-account-prompt__submit:hover {
  opacity: 0.85;
}

.maruska-account-prompt__dismiss {
  padding: 12px 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-gray);
  cursor: pointer;
  text-decoration: underline;
}

.maruska-account-prompt__dismiss:hover {
  color: var(--color-black);
}

/* ==========================================================================
   Homepage — "Jedinstveni kao i vi" 3-column section
   ========================================================================== */
.jedinstveni-section {
  width: 100%;
  /* Horizontal padding aligned to `.header-top-inner` so the section spans
     the same container width as Kolekcije / Akcije above. */
  padding: 60px var(--header-container-pad);
  box-sizing: border-box;
  margin-bottom: 80px;
  background: var(--color-white);
}

.jedinstveni-section__inner {
  max-width: var(--header-container-max);
  margin: 0 auto;
}

.jedinstveni-section__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  text-transform: capitalize;
  text-align: center;
  margin: 0 0 48px;
  color: var(--color-black);
}

.jedinstveni-section__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.jedinstveni-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.jedinstveni-card__image {
  width: 100%;
  aspect-ratio: 440 / 320;
  overflow: hidden;
  margin-bottom: 34px;
  background: #f5f5f5;
}

.jedinstveni-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jedinstveni-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 22px;
  text-transform: capitalize;
  margin: 0 0 22px;
  /* Horizontal padding so the text doesn't span the full image width below. */
  padding: 0 36px;
  color: var(--color-black);
}

.jedinstveni-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gray, #666);
  margin: 0 0 28px;
  padding: 0 36px;
}

.jedinstveni-card__link {
  display: inline-block;
  align-self: center;
  position: relative;
  padding-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}

.jedinstveni-card__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jedinstveni-card__link:hover::after {
  transform: scaleX(1);
}

@media (max-width: 1023px) {
  .jedinstveni-section {
    padding: 0 40px 50px;
  }
  .jedinstveni-section__title {
    font-size: 30px;
    margin-bottom: 36px;
  }
  /* Tablet + mobile: stack cards vertically (single column). */
  .jedinstveni-section__columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .jedinstveni-card__title {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  /* Mobile: drop horizontal section padding so card images span edge-to-edge.
     Title/text inside each card keep their own padding (36px) and the
     section title gets its own horizontal padding back. */
  .jedinstveni-section {
    padding: 0 0 40px;
    margin-bottom: 60px;
  }
  .jedinstveni-section__title {
    font-size: 26px;
    margin-bottom: 28px;
    padding: 0 20px;
  }
  /* All three cards in one row (client, Oct 2026): title + link only, same
     5px gap / side padding as the Za nju / Za njega cards above. */
  .jedinstveni-section__columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 0 5px;
  }
  .jedinstveni-card__image {
    margin-bottom: 12px;
  }
  .jedinstveni-card__title {
    font-size: 14px;
    margin: 0 0 8px;
    padding: 0 4px;
  }
  .jedinstveni-card__text {
    display: none;
  }
  .jedinstveni-card__link {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

/* ============================================================
   Products filter — trigger + left slide-in panel (Tiffany-style)
   ============================================================ */
.filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 36px;
  background: none;
  border: 1px solid #dcdcdc;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 20px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-black);
  transition: border-color 0.15s ease;
}
.filter-trigger:hover {
  border-color: var(--color-black);
}
.filter-trigger__icon {
  display: inline-flex;
  color: var(--color-black);
}

/* Overlay (white, semi-transparent) */
.filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.filter-overlay.is-open {
  opacity: 1;
}

/* Panel — slides in from the LEFT, full height */
.filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  width: 30vw;
  min-width: 380px;
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.14);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overscroll-behavior: contain;
}
.filter-panel.is-open {
  transform: translateX(0);
}

.filter-panel__head {
  position: relative;
  flex: 0 0 auto;
  padding: 26px 40px 6px;
}
.filter-panel__close {
  position: absolute;
  top: 20px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f3f3f3;
  border: 0;
  border-radius: 50%;
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.15s ease;
}
.filter-panel__close:hover {
  background: #e8e8e8;
}
.filter-panel__title {
  margin: 30px 0 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 28px;
  color: var(--color-black);
}

.filter-panel__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.filter-panel__sections {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 40px 20px;
}

/* Collapsible section */
.filter-section {
  border-top: 1px solid #ededed;
}
.filter-section:first-child {
  border-top: 0;
}
.filter-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.filter-section__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 19px;
  color: var(--color-black);
}
.filter-section__chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border-right: 1.5px solid var(--color-black);
  border-bottom: 1.5px solid var(--color-black);
  transform: rotate(45deg);
  transition: transform 0.45s ease, margin-top 0.45s ease;
}
.filter-section.is-open .filter-section__chevron {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.filter-section__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-section.is-open .filter-section__body {
  max-height: 600px;
}
.filter-section__body > .filter-chips {
  padding-bottom: 22px;
}

/* Chips */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-chip {
  position: relative;
  cursor: pointer;
}
.filter-chip input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.filter-chip span {
  display: inline-block;
  padding: 12px 18px;
  background: #f3f3f3;
  color: var(--color-black);
  font-size: 14px;
  line-height: 1.1;
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-chip:hover span {
  background: #e8e8e8;
}
.filter-chip input:checked + span {
  background: var(--color-black);
  color: #fff;
}

/* Footer */
.filter-panel__footer {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  padding: 18px 40px 26px;
  border-top: 1px solid #ededed;
  background: #fff;
}
.filter-panel__clear,
.filter-panel__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 12px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.filter-panel__clear {
  flex: 1 1 0;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  text-decoration: none;
}
.filter-panel__clear:hover {
  background: #f3f3f3;
}
.filter-panel__apply {
  flex: 1.4 1 0;
  background: var(--color-black);
  color: #fff;
  border: 0;
}
.filter-panel__apply:hover {
  opacity: 0.9;
}

body.filter-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .filter-panel {
    width: 100vw;
    min-width: 0;
    max-width: none;
  }
  .filter-panel__head,
  .filter-panel__sections,
  .filter-panel__footer {
    padding-left: 24px;
    padding-right: 24px;
  }
  .filter-trigger {
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Single product — page top per client design (price, stock, buy now,
   service lines, accordion). Order: title → price → sizes → stock →
   qty + add to cart → buy now → service lines → accordion.
   ───────────────────────────────────────────────────────────────────────── */

/* Price sits between the short description and the hairline, with equal
   breathing room on both sides (the description's own 50px bottom margin
   dates from when the hairline followed it directly). */
.single-product__info .woocommerce-product-details__short-description {
  margin-bottom: 26px;
}

.single-product__price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 26px;
}

.single-product__price-block .single-product__price-display {
  /* Reset the old cart-row pill styling (240px wide, centred, padded) so the
     price sits flush with the title and short description. */
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  height: auto;
  padding: 0;
  justify-content: flex-start;
  white-space: nowrap;
}

.single-product__price-block .single-product__price-display {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 34px;
  line-height: 1.1;
  color: var(--color-black);
}

.single-product__price-note {
  font-size: 14px;
  color: var(--color-gray);
}

.single-product__stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

.single-product__stock-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  align-self: center;
  /* The descenders in "isporuka"/"janu" pull the text's optical centre down,
     so the dot needs a 1px nudge to read as centred against it. */
  position: relative;
  top: 1px;
  border-radius: 50%;
  background: #2e9e4f;
}

.single-product__stock.is-out .single-product__stock-dot {
  background: #C53030;
}
/* Sold out (Gospoda only): red text too (client, Oct 2026). */
.single-product__stock.is-out {
  color: #C53030;
}

/* Quantity + DODAJ U KORPU share one line; KUPI ODMAH sits under them. */
.single-product__cart-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.single-product__cart-row > .single-product__qty-block {
  flex: 0 0 auto;
  margin: 0;
}

.single-product__cart-row .single-product__add-to-cart {
  flex: 1 1 auto;
}

.single-product__buy-now {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-primary);
  font-size: 14px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.single-product__buy-now:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* Veličina selector — equal-width chips, filled black when active.
   The native <select> stays in the form (the chips write to it and it still
   submits while hidden); nothing was hiding it, so it left an empty strip
   under the chips. */
.single-product__info .variations select {
  display: none;
}

/* th/td were already display:block, but the table/tbody/tr around them still
   used table layout, which left phantom space under the chips. */
.single-product__info .variations,
.single-product__info .variations tbody,
.single-product__info .variations tr {
  display: block;
  width: 100%;
}

.single-product__info .variations tr {
  margin: 0;
}

.single-product__info .variations td.value {
  padding: 0;
  line-height: 0;
}

.single-product__info .variations .label {
  margin-bottom: 10px;
}

/* Veličina selector — equal-width chips, filled black when active */
.single-product__info .variation-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  /* 4+ sizes (slike): the row swipes sideways, no arrows. */
  overflow-x: auto;
  scrollbar-width: none;
}
.single-product__info .variation-buttons::-webkit-scrollbar {
  display: none;
}

.single-product__info .variation-button {
  /* Always a third of the row, so 1–2 sizes don't stretch. */
  flex: 0 0 calc((100% - 24px) / 3);
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid #B5B5B5;
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* 4+ sizes. Phone: narrower chips so part of the next one shows at the edge. */
.single-product__info .variation-buttons:has(> :nth-child(4)) .variation-button {
  flex-basis: 27%;
}
/* Larger screens may have no swipe: 4 sizes share the row. */
@media (min-width: 769px) {
  .single-product__info .variation-buttons:has(> :nth-child(4)) .variation-button {
    flex: 1 1 0;
  }
}

.single-product__info .variation-button.is-selected {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}

/* Quantity stepper sits in its own bordered box beside a filled black
   DODAJ U KORPU (client design) — no "Količina" label. */
.single-product__cart-row > .single-product__qty-block {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0 6px;
  border: 1px solid #B5B5B5;
}

.single-product__cart-row .single-product__qty-block .quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Even spacing either side of the number */
  gap: 14px;
  min-height: 0;
}

.single-product__cart-row .single-product__qty-block .quantity input.qty {
  width: 24px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.single-product__cart-row .single-product__add-to-cart {
  width: auto;
  height: auto;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--color-black);
  border-radius: 0;
  background: var(--color-black);
  color: var(--color-white);
  letter-spacing: var(--ls-button);
}

.single-product__cart-row .single-product__add-to-cart:hover {
  background: #222222;
  border-color: #222222;
  color: var(--color-white);
}

/* Four service lines — identical on every product */
.single-product__usp {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.single-product__usp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-black);
}

.single-product__usp-icon {
  flex: 0 0 auto;
  color: var(--color-black);
}

/* Accordion — Detalji / Održavanje / Korporativni poklon / Priča */
.single-product__accordion {
  margin-top: 32px;
  border-top: 1px solid #e0e0e0;
}

.accordion-item {
  border-bottom: 1px solid #e0e0e0;
}

.accordion-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-black);
}

.accordion-item__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
}

.accordion-item__icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--color-black);
  transition: transform 0.25s ease;
}

.accordion-item__header[aria-expanded="true"] .accordion-item__icon {
  transform: rotate(90deg);
}

/* The JS toggles .is-open on the panel */
.accordion-item__content {
  display: none;
  padding: 0 2px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-black);
}

.accordion-item__content.is-open {
  display: block;
}

.accordion-item__content p {
  margin: 0 0 12px;
}

.accordion-item__content p:last-child {
  margin-bottom: 0;
}

.single-product__details {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.single-product__detail-row {
  display: flex;
  gap: 12px;
}

.single-product__detail-row dt {
  flex: 0 0 150px;
  color: var(--color-gray);
}

.single-product__detail-row dd {
  margin: 0;
}

@media (max-width: 768px) {
  .single-product__price-block .single-product__price-display {
    font-size: 28px;
  }

  .accordion-item__title {
    font-size: 16px;
  }

  /* Label and value stay on one line on mobile too */
  .single-product__detail-row {
    flex-direction: row;
    gap: 12px;
  }

  .single-product__detail-row dt {
    flex: 0 0 120px;
  }
}

/* Tighter vertical rhythm through the buy area (client feedback): the old
   30px gaps were set when the price and "Ukupno" rows still sat in here. */
.single-product__info .variations {
  margin-bottom: 12px;
}

.single-product__selectors {
  margin-bottom: 12px;
}

.single-product__cart-col {
  gap: 12px;
}

.single-product__buy-now {
  margin-top: 12px;
}

.single-product__usp {
  margin-top: 18px;
}

@media (max-width: 768px) {
  /* Prica section on mobile: title and text first, image below. */
  .single-product__story-content {
    order: 1;
  }

  .single-product__story-image {
    order: 2;
  }

  /* Tighter on mobile: the 80px top margin and 40px grid gap are desktop
     values, and the content's 30px top padding stacked on top of them. */
  .single-product__story {
    margin-top: 32px;
  }

  .single-product__story-inner {
    /* Small gap: the photo carries its own white margin, but the client
       wants the scarf a bit further from the text. */
    gap: 20px;
  }

  .single-product__story-content {
    padding: 0;
  }

  .single-product__story-title {
    margin-bottom: 16px;
  }

  /* Preporucujemo: the 80px top margin is a desktop value and stacked on top
     of the section's own 40px padding. */
  .single-product__related {
    margin-top: 24px;
    padding: 16px 20px 0;
  }

  .single-product__related-title {
    margin-bottom: 22px;
  }
}

/* The gap below the Za nju / Za njega cards normally comes from the Akcije
   showcase that sits between them and the promo blocks. That section hides
   itself when no product is on sale, leaving the two stuck together — so give
   the gap back only when they actually end up adjacent. */
.split-section + .promo-block {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .split-section + .promo-block {
    margin-top: 60px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Homepage rows (Za nju / Za njega cards, promo blocks)

   These used to be Columns blocks, so WordPress printed its own layout CSS
   (.is-layout-flex { display: flex }) for them. The homepage now renders from
   fields with an empty editor, and that CSS is only emitted when blocks are
   actually present — so the rows need their own layout here. Widths, gaps and
   direction are still handled by the rules above.
   ───────────────────────────────────────────────────────────────────────── */

.split-section__columns,
.promo-block__row {
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.split-section__columns > .wp-block-column,
.promo-block__row > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
}

/* Cover image inside the Za nju / Za njega cards. Core's cover-block CSS
   stretched this; with the homepage rendered from fields that CSS is no longer
   on the page, so the image needs sizing here. */
.split-card {
  overflow: hidden;
}

.split-card .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: 0;
}

/* ========================================
   HEROES — mobile full screen + <picture> (desktop/mobile image)
======================================== */
/* <picture> must not become a box between the frame and the img
   (the img fills its frame with height: 100%). */
.hero-image picture,
.onama-hero__image picture,
.svet-hero__image picture {
  display: contents;
}

@media (max-width: 768px) {
  /* Under the transparent header (Početna, Za nju/njega, Moda i umetnost). */
  .hero-section {
    height: 100vh;
    height: 100svh;
    max-height: none;
  }
  /* iPhone Safari: hero runs on under the glass address bar (no white strip);
     the extra padding keeps the text + button where they were, above the bar. */
  @supports (height: 100lvh) {
    .hero-section {
      height: 100lvh;
    }
    .hero-section .hero-content,
    .hero-section .wp-block-group.hero-content {
      padding-bottom: calc(91px + 100lvh - 100svh);
    }
  }
  /* Safari (iOS 26) tints the status bar from the body background: black over
     the hero instead of a white strip. Content keeps white via main/footer;
     flow-root stops child margins leaking out as black gaps. Once scrolled,
     the white fixed header takes over the tint. */
  html:has(body.home),
  html:has(body.has-hero),
  body.home,
  body.has-hero {
    background-color: var(--color-black);
  }
  body.home .site-main,
  body.has-hero .site-main {
    display: flow-root;
    background-color: var(--color-white);
  }
  /* Below the header (O nama, Svet Maruške): screen minus header bar. */
  .onama-hero {
    height: calc(100vh - var(--topbar-height));
    height: calc(100svh - var(--topbar-height));
  }
  .svet-hero {
    height: calc(100vh - var(--topbar-height)) !important;
    height: calc(100svh - var(--topbar-height)) !important;
  }
}

/* Info pages: space between the last block and the footer (client, Nov 2026). */
.info-page {
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .info-page {
    padding-bottom: 50px;
  }
}

/* Sideways swipes belong to the slider, up/down still scrolls the page. Without
   this iPhone Safari can take over the gesture and cancel the touch, so the
   slider never moves (client, Nov 2026). No long-press preview or image drag. */
.categories-showcase__slider,
.categories-showcase__slider-track,
.header-submenu-list,
.product-gallery__main {
  touch-action: pan-y;
}
.categories-showcase__slider-track a,
.categories-showcase__slider-track img,
.product-gallery__main img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Split-layout pages (O nama, Svet Maruške, info pages): full-screen hero under
   the transparent header, same size and title as the homepage / Za nju hero
   (client, Nov 2026). */
.onama-page .onama-hero,
.svet-page .svet-hero {
  height: 100vh;
  min-height: 0;
  max-height: 1200px;
  aspect-ratio: auto;
  align-items: flex-end;
}
.onama-page .onama-hero__content,
.svet-page .svet-hero__content {
  padding: 0 20px 165px;
}
.onama-page .onama-hero__title,
.svet-page .svet-hero__title {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
  .onama-page .onama-hero,
  .svet-page .svet-hero {
    height: 100vh !important;
    height: 100svh !important;
    max-height: none;
    aspect-ratio: auto !important;
  }
  .onama-page .onama-hero__content,
  .svet-page .svet-hero__content {
    padding: 0 20px 91px;
  }
  .onama-page .onama-hero__title,
  .svet-page .svet-hero__title {
    font-size: 18px;
    padding: 0;
  }
  /* Runs on under Safari's glass address bar, like the other heroes. */
  @supports (height: 100lvh) {
    .onama-page .onama-hero,
    .svet-page .svet-hero {
      height: 100lvh !important;
    }
    .onama-page .onama-hero__content,
    .svet-page .svet-hero__content {
      padding-bottom: calc(91px + 100lvh - 100svh);
    }
  }
}

/* ========================================
   ARCHIVE FILTERS — desktop bar (≥1024px) + active tags (all sizes)
   Mobile/tablet keep the FILTERI button + panel. Markup: inc/archive-filters.php
======================================== */
.filter-bar,
.filter-bar-label {
  display: none;
}

@media (min-width: 1024px) {
  .category-archive__controls {
    justify-content: center;
  }
  .category-archive__filter-wrap {
    display: none;
  }
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .filter-bar.is-loading {
    opacity: 0.5;
    pointer-events: none;
  }
}

.filter-dd {
  position: relative;
}
.filter-dd__toggle,
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid #dcdcdc;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.filter-dd__toggle::-webkit-details-marker {
  display: none;
}
.filter-dd__toggle:hover,
.filter-toggle:hover,
.filter-dd[open] .filter-dd__toggle {
  border-color: var(--color-black);
}
/* Active filter: black (client, Oct 2026). */
.filter-dd.is-active .filter-dd__toggle,
.filter-toggle.is-active {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.filter-dd__chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.filter-dd[open] .filter-dd__chevron {
  transform: translateY(2px) rotate(-135deg);
}
.filter-dd__count {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
}
.filter-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  padding: 10px 0;
  background: var(--color-white);
  border: 1px solid #dcdcdc;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.filter-dd__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
  cursor: pointer;
  white-space: nowrap;
}
.filter-dd__option:hover {
  background: #f5f5f5;
}
.filter-dd__option input {
  accent-color: var(--color-black);
  width: 16px;
  height: 16px;
  margin: 0;
}
.filter-dd__option:has(input:checked) {
  font-weight: 500;
}
/* Akcija / Novo: the whole pill is the checkbox. */
.filter-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Active filters — removable tags under the controls. */
.filter-active {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -58px 0 58px;
}
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--color-black);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-black);
  text-decoration: none;
}
.filter-tag:hover {
  background: var(--color-black);
  color: var(--color-white);
}
.filter-tag--clear {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-tag--clear:hover {
  background: none;
  color: var(--color-black);
  opacity: 0.7;
}
@media (max-width: 1023px) {
  .filter-active {
    justify-content: flex-start;
  }

  /* Mobile/tablet (client, Nov 2026): the desktop row instead of the FILTERI
     panel — one line that scrolls sideways. Dropdown menus open full width
     under the row: they are positioned on .category-archive__controls (outside
     the scrolling bar), so the bar's overflow doesn't clip them. */
  .category-archive__controls {
    position: relative;
    z-index: 30; /* own layer: iPhone Safari drew products over the dropdown */
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .category-archive__filter-wrap {
    display: none;
  }
  .filter-bar-label {
    display: block;
    flex: 0 0 100%;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-black);
  }
  .filter-bar {
    display: flex;
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar {
    display: none;
  }
  .filter-bar.is-loading {
    opacity: 0.5;
    pointer-events: none;
  }
  .filter-dd {
    position: static;
    flex: 0 0 auto;
  }
  .filter-toggle {
    position: relative;
    flex: 0 0 auto;
  }
  .filter-dd__toggle,
  .filter-toggle {
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    letter-spacing: 0.8px;
    white-space: nowrap;
  }
  .filter-dd__menu {
    right: 0;
    min-width: 0;
    max-height: 50vh;
  }
  .filter-dd__option {
    padding: 11px 16px;
    white-space: normal;
  }
}

/* "Pogledaj celu novu kolekciju" under the Nova kolekcija slider on Za nju /
   Za njega. Same link style as the homepage promo blocks. Pulled up into the
   showcase's 100px bottom padding so it reads as part of the slider. */
.page-collection__more {
  position: relative;
  z-index: 1;
  /* ~20px under the slider arrows (showcase has 100px bottom padding), and a
     clear gap before the first category section below. */
  margin: -80px 0 100px;
  text-align: center;
}
.page-collection__more a {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}
.page-collection__more a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.page-collection__more a:hover::after {
  transform: scaleX(1);
}
@media (max-width: 768px) {
  /* Showcase padding is 60px here. */
  .page-collection__more {
    margin: -45px 0 60px;
  }
  .page-collection__more a {
    font-size: 12px;
  }
}

/* ========================================
   Product page + cart corrections (client review, Oct 2026)
======================================== */
/* #18 — product images are 4:5 everywhere; square frames zoomed them in. */
.cart-drawer__item-image {
  aspect-ratio: 4 / 5;
}
body.woocommerce-checkout .checkout-summary__item-image {
  height: auto;
  aspect-ratio: 4 / 5;
}

@media (max-width: 768px) {
  /* #17 — no arrows on the mobile gallery (swipe + thumbnails instead),
     so the image gets the full column width. */
  .product-gallery__arrow {
    display: none;
  }
  .product-gallery__main-wrap {
    gap: 0;
  }

  /* #19 — Preporučujemo: exactly two slides; the old width let ~14px of
     the third slide show at the edge. 10px track gap shared by 2 slides. */
  .single-product__related .categories-showcase__slide {
    flex: 0 0 calc(50% - 5px);
    min-width: calc(50% - 5px);
  }

  /* #20 — DODAJ U KORPU: bigger, heavier label on mobile (was 10px / 300). */
  .single-product__cart-row .single-product__add-to-cart {
    font-size: 14px;
    font-weight: 500;
  }
}

/* ========================================
   CHECKOUT — "Kupujem kao firma" + PIB, delivery address (inc/checkout-company.php)
======================================== */
/* PIB only when buying as a company (main.js shows it). */
body.woocommerce-checkout #billing_pib_field {
  display: none;
}
/* WooCommerce's own "ship to a different address" checkbox is driven by our
   "Adresa za dostavu ista kao za naplatu" checkbox — hide WC's. */
body.woocommerce-checkout #ship-to-different-address {
  display: none;
}
body.woocommerce-checkout .maruska-same-address {
  margin: 24px 0 16px;
}
body.woocommerce-checkout .woocommerce-shipping-fields .shipping_address {
  margin-top: 8px;
}
/* Same look as the "Zapamti moje podatke" checkbox. */
body.woocommerce-checkout .maruska-company-toggle label,
body.woocommerce-checkout .maruska-same-address label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-black);
}
body.woocommerce-checkout .maruska-company-toggle input[type="checkbox"],
body.woocommerce-checkout .maruska-same-address input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--color-black);
  border-radius: 2px;
  background: var(--color-white);
  cursor: pointer;
}
body.woocommerce-checkout .maruska-company-toggle input[type="checkbox"]:checked::after,
body.woocommerce-checkout .maruska-same-address input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--color-black);
  border-radius: 1px;
}

/* ========================================
   THANK-YOU / ORDER VIEW — ordered products in 2 columns (client, Oct 2026)
   One <tr> per product (woocommerce/order/order-details-item.php); totals in
   <tfoot> stay full width below.
======================================== */
.woocommerce-order table.woocommerce-table--order-details {
  display: block;
}
.woocommerce-order table.woocommerce-table--order-details thead {
  display: none; /* "Proizvod / Ukupno" header means nothing in a grid */
}
.woocommerce-order table.woocommerce-table--order-details tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.woocommerce-order table.woocommerce-table--order-details tbody tr,
.woocommerce-order table.woocommerce-table--order-details tbody td {
  display: block;
  width: auto;
}
.woocommerce-order table.woocommerce-table--order-details tfoot {
  display: table;
  width: 100%;
}

@media (max-width: 600px) {
  /* Half-width cells: image on top (4:5), text under it. */
  .woocommerce-order table.woocommerce-table--order-details tbody {
    column-gap: 12px;
  }
  .woocommerce-order .maruska-order-item {
    flex-direction: column;
    gap: 10px;
  }
  .woocommerce-order .maruska-order-item__image {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

/* O nama — optional link under a section's text (admin: Tekst linka + Link).
   Same look as the homepage promo-block links. */
.onama-split__link {
  margin: 24px 0 0;
}
.onama-split__link a {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}
.onama-split__link a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.onama-split__link a:hover::after {
  transform: scaleX(1);
}