:root {
  --bg: #ffffff;
  --bg-panel: #f6f6f4;
  --fg: #141210;
  --fg-dim: #726a62;
  --accent: #e0201a;
  --accent-2: #ff8a3d;
  --line: rgba(20, 15, 10, 0.09);
  --line-strong: rgba(20, 15, 10, 0.20);
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-condensed: 'Bebas Neue', sans-serif;
  --container: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  background-color: var(--bg);
}

/* Diagonal linework — a constant premium texture across the whole page,
   echoing the logo's diagonal cut. Painted directly as the body's own
   background (not a pseudo-element) so it can never be hidden behind
   another element's stacking context. */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    115deg,
    rgba(20, 15, 10, 0.045) 0px,
    rgba(20, 15, 10, 0.045) 1px,
    transparent 1px,
    transparent 96px
  );
  background-attachment: fixed;
}

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

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* Scroll-reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.05s; }
[data-reveal-delay="2"] { transition-delay: 0.15s; }
[data-reveal-delay="3"] { transition-delay: 0.25s; }
[data-reveal-delay="4"] { transition-delay: 0.35s; }
[data-reveal-delay="5"] { transition-delay: 0.45s; }
[data-reveal-delay="6"] { transition-delay: 0.55s; }
[data-reveal-delay="7"] { transition-delay: 0.65s; }
[data-reveal-delay="8"] { transition-delay: 0.75s; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: 84px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* Mobile header: logo sits on its own row above the full-width search bar,
   with the account/cart/menu icons alongside the logo - grid-area reorders
   these regardless of their source order in the markup. */
@media (max-width: 640px) {
  .site-header__main {
    grid-template-columns: auto auto;
    grid-template-areas: "logo actions" "search search";
    height: auto;
    row-gap: 14px;
    padding: 16px 20px;
  }
  .site-logo { grid-area: logo; }
  .site-actions { grid-area: actions; justify-self: end; }
  .site-search { grid-area: search; width: 100%; }
}

.site-logo { position: relative; display: flex; align-items: center; flex-shrink: 0; }

.site-logo__img {
  position: relative;
  z-index: 1;
  height: 52px;
  width: auto;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-logo:hover .site-logo__img { opacity: 0.75; transform: scale(1.03); }

/* Soft feathered white sheen across the logo - a metallic-highlight streak,
   same band + blur technique as the hazard tape's sheen, visible at rest. */
.site-logo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 46px;
  transform: translateY(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55) 50%, transparent);
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

.site-logo__tag {
  position: absolute;
  z-index: 3;
  bottom: -6px;
  right: -6px;
  transform: rotate(-16deg);
  font-family: 'Permanent Marker', cursive;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.03em;
  text-shadow: 1.5px 1.5px 0 rgba(255,255,255,0.9), -1px -1px 0 rgba(255,255,255,0.5);
  pointer-events: none;
  transition: transform 0.25s var(--ease);
}
.site-logo:hover .site-logo__tag { transform: rotate(-16deg) scale(1.08); }
@media (max-width: 640px) {
  .site-logo__img { height: 42px; }
  .site-logo::after { height: 36px; }
  .site-logo__tag { font-size: 15px; bottom: -4px; right: -4px; }
}

.site-search {
  width: min(100%, 380px);
  height: 38px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-panel);
  padding: 0 6px 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color 0.2s var(--ease);
}
.site-search:focus-within { border-color: var(--line-strong); }

.site-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg);
}
.site-search input::placeholder { color: var(--fg-dim); }

.site-search button,
.site-search button[type=submit] {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: none !important;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.site-search button:hover,
.site-search button[type=submit]:hover {
  color: var(--accent);
  background: rgba(224, 32, 26, 0.08) !important;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 46px;
  border-top: 1px solid var(--line);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg);
  list-style: none;
}

/* Graffiti-marker flourish at the top of the Streetwear dropdown panel -
   echoes the logo's own handwritten "SHOP" tag, with room to breathe here
   instead of being cramped under the small nav label itself. */
.site-nav__panel-tag {
  display: block;
  text-align: center;
  margin: -2px 0 8px;
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--accent);
  transform: rotate(-3deg);
}

.site-nav a { position: relative; padding-bottom: 4px; white-space: nowrap; }
/* Top-level categories without subcategories yet - same look as a nav link,
   just not clickable until their dropdown content is ready. */
.site-nav__label { color: var(--fg); cursor: default; user-select: none; white-space: nowrap; }

/* Between the mobile-nav breakpoint (900px) and a full-width desktop, the
   6-7 top-level items no longer fit on one line at full size - shrinking
   gap/font here keeps them on a single row instead of wrapping mid-label
   (which used to break the "AKCIJA !" pill's shape in half). */
@media (max-width: 1020px) {
  .site-nav { gap: 22px; font-size: 11px; }
}

/* Editor-controlled "make this nav item stand out" flag (Settings -> Meni),
   used e.g. for a limited-time "Akcija" link - a solid accent pill instead
   of a plain text label. */
.site-nav__highlight {
  padding: 5px 12px !important;
  background: var(--accent);
  color: #fff !important;
  border-radius: 999px;
  animation: navHighlightPulse 1.8s ease-in-out infinite;
}
.site-nav__highlight::after { display: none; }
.site-nav__dropdown .site-nav__highlight { padding-bottom: 5px; }

@keyframes navHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 32, 26, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(224, 32, 26, 0); }
}

.mobile-nav .site-nav__highlight {
  display: inline-block;
  padding: 6px 14px !important;
  border-bottom: none;
  margin: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__highlight { animation: none; }
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right 0.3s var(--ease);
}
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after { right: 0; }

.site-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-actions .icon-btn {
  width: 24px;
  height: 24px;
  color: var(--fg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
/* Each icon renders at its own SVG's native pixel size (matching its
   viewBox 1:1) instead of being stretched to fill the button - a fractional
   scale factor (e.g. 21/22) forces sub-pixel stroke widths that anti-alias
   into soft/grainy edges at this size. */
.site-actions .icon-btn svg { flex-shrink: 0; }

.site-actions .icon-btn:hover { color: var(--accent); transform: translateY(-1px); }

.cart-count {
  position: absolute;
  top: -7px;
  right: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  width: 24px;
  height: 24px;
  padding: 0;
}

/* Announcement bar */
.announce-bar {
  background: var(--fg);
  color: var(--bg);
  overflow: hidden;
  padding: 8px 0;
}

.announce-bar__track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  width: max-content;
  animation: marquee 26s linear infinite;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.announce-bar__track .sep { color: var(--accent); }

/* Category dropdown (desktop) */
.site-nav__dropdown { position: relative; }

.site-nav__panel {
  position: absolute;
  top: 100%;
  left: -18px;
  /* Padding (not margin) keeps the visual gap to the nav bar INSIDE this
     element's hoverable box, so moving the cursor down to a menu item never
     crosses dead space that would drop the :hover and close the panel. */
  padding: 18px 10px 10px;
  min-width: 180px;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(20, 15, 10, 0.045) 0px,
    rgba(20, 15, 10, 0.045) 1px,
    transparent 1px,
    transparent 96px
  );
  box-shadow: 0 24px 48px -20px rgba(20, 15, 10, 0.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.site-nav__dropdown:hover .site-nav__panel,
.site-nav__dropdown:focus-within .site-nav__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav__panel a {
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
}
.site-nav__panel a::after { display: none; }
.site-nav__panel a:hover { background: var(--bg-panel); color: var(--accent); }

/* Optional bold "display" emphasis on part of a nav item's label (e.g. the
   "Frenkie" in "Frenkie x BE Shirt") - same treatment as the bold headings
   on the homepage, set per-item from the CMS (Settings -> Meni). */
.nav-emphasis {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 32px 20px;
  text-transform: uppercase;
  box-shadow: 0 24px 40px -20px rgba(20, 15, 10, 0.2);
}

.mobile-nav.is-open { display: flex; }

.mobile-nav__item { border-bottom: 1px solid var(--line); }
.mobile-nav__item:last-child { border-bottom: none; }

.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-nav__link {
  display: block;
  flex: 1;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mobile-nav__toggle {
  flex-shrink: 0;
  padding: 13px 2px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.mobile-nav__toggle svg { transition: transform 0.25s var(--ease); }
.mobile-nav__item.is-open .mobile-nav__toggle svg { transform: rotate(180deg); }

.mobile-nav__submenu {
  display: none;
  flex-direction: column;
  padding-bottom: 8px;
}
.mobile-nav__item.is-open .mobile-nav__submenu { display: flex; }

.mobile-nav__sublink {
  display: block;
  padding: 11px 0 11px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}

/* Search page */
.search-page {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 32px 24px;
}

/* #MITOTAKO page mascots - fixed size regardless of how many products (and
   therefore how tall the section is) - they sit near the top corner and
   don't stretch when a second row of products appears. */
.mitotako-peek {
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: 1;
}
.mitotako-peek img {
  display: block;
  width: 380px;
  height: auto;
  filter: drop-shadow(-10px 6px 16px rgba(20, 15, 10, 0.35));
  /* Softens the photo's hard cut-off at the bottom into a fade instead of an abrupt edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.mitotako-peek--right { right: -340px; }
/* Source photo has the same left-subject/right-transparent layout as the
   right-side one, so it's mirrored here to peek in the opposite direction -
   the transform flips the drop-shadow along with the image, which is correct. */
.mitotako-peek--left { left: -340px; }
@media (max-width: 900px) {
  .mitotako-peek img { width: 280px; }
  .mitotako-peek--right { right: -240px; }
  .mitotako-peek--left { left: -240px; }
}
@media (max-width: 560px) {
  .mitotako-peek { display: none; }
}

.search-page__head { margin-bottom: 32px; }

.search-page h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.24;
  white-space: nowrap;
  margin: 0 0 20px;
}

.search-page__form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  border-bottom: 2px solid var(--fg);
  padding-bottom: 10px;
}

.search-page__form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  background: transparent;
  color: var(--fg);
}

.search-page__form button,
.search-page__form button[type=submit] {
  border: none;
  background: none !important;
  padding: 0;
  cursor: pointer;
  color: var(--fg);
  display: flex;
}
.search-page__form button:hover,
.search-page__form button[type=submit]:hover { color: var(--accent); }

.search-page__empty { color: var(--fg-dim); font-size: 15px; }
.search-page__empty a { color: var(--accent); font-weight: 600; }

/* "Akcija" page: a faded "SALE" pattern tiled across the whole page behind
   the content, plus a playful quote - nudges people to buy while the
   discount lasts rather than just listing products flatly. */
.sale-page {
  position: relative;
  overflow: hidden;
  /* Stretch to fill .site-main's full height (definite, via body's flex
     layout) so the SALE pattern below covers the full height even when
     there are no sale products - min-height:100% instead of flex:1, so
     .site-main itself doesn't need to be display:flex (that would turn
     ALL its children, on every page, into flex items and disturb their
     normal centered-block sizing). */
  min-height: 100%;
}

/* Wraps the (oversized, rotated) pattern at exactly .sale-page's own visible
   box, so the fade mask below lines up with the real edge the user sees,
   regardless of how far .sale-page__pattern itself bleeds out to stay
   rotation-safe. Individual "SALE" rows getting sliced in half right at that
   edge is what a hard-cut diagonal tile always looks like - fading them out
   first hides the cut instead of chasing pixel-perfect row alignment. */
.sale-page__pattern-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

.sale-page__pattern {
  position: absolute;
  /* Fixed (not %) top/bottom bleed: the -6deg rotation needs vertical
     overflow roughly proportional to the section's WIDTH (width * sin(6°)),
     not its height - a %-of-height inset starves this on short, wide
     sections and leaves an uncovered wedge in two opposite corners. */
  top: -280px;
  bottom: -280px;
  left: -20%;
  right: -20%;
  display: flex;
  flex-direction: column;
  gap: 45px;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.sale-page__row {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.055;
  white-space: nowrap;
}

.sale-page > .search-page { position: relative; z-index: 1; }

.sale-page .search-page__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 26px;
}
.sale-page .search-page h1 { margin: 0; }

/* Graffiti-tag subtitle - reads as a spray-painted continuation of the
   giant "AKCIJA" outline text. Deliberately NOT the same red as the accent
   color used below (product badges, the quote) so the two don't compete for
   attention - fluorescent yellow instead, with a dark outline (a flat fill
   this bright is unreadable on the page's light background without one)
   plus a soft glow to sell the "neon spray" look. */
.sale-page__subtitle {
  position: relative;
  margin: 0;
  opacity: 0.65;
  white-space: nowrap;
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: #f5ff3d;
  -webkit-text-stroke: 1.4px var(--fg);
  text-shadow:
    0 0 8px rgba(245, 255, 61, 0.85),
    0 0 18px rgba(245, 255, 61, 0.5),
    0 0 32px rgba(245, 255, 61, 0.3);
}

/* Same feathered-band sheen technique used on the logo and the hazard tape -
   a soft blurred highlight streak through the middle, to sell "metallic". */
.sale-page__subtitle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 22px;
  transform: translateY(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7) 50%, transparent);
  filter: blur(4px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (max-width: 900px) {
  .sale-page__row { font-size: 26px; }
  .sale-page__subtitle { font-size: 20px; }
  .sale-page__subtitle::after { height: 18px; }
}
@media (max-width: 700px) {
  .sale-page .search-page__head { align-items: flex-start; }
  .sale-page__subtitle { font-size: 16px; }
  .sale-page__subtitle::after { height: 14px; }
}
@media (max-width: 560px) {
  .sale-page__subtitle { font-size: 13px; }
  .sale-page__subtitle::after { height: 11px; }
}

.sale-quote {
  margin: 0 0 40px;
  padding: 0;
  border: none;
  text-align: center;
}
.sale-quote p {
  margin: 0;
  font-family: 'Permanent Marker', cursive;
  font-size: 32px;
  font-weight: 400;
  color: var(--accent);
  transform: rotate(-2deg);
  line-height: 1.2;
}
.sale-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: 0.03em;
}

@media (max-width: 700px) {
  .sale-quote p { font-size: 24px; }
}

/* Trust strip (homepage, above the hero) */
/* Top/bottom padding is deliberately asymmetric (not a mistake) - it's
   compensating for the surrounding sections' own padding (.product-grid's
   56px bottom above, .shop-the-look's 32px top below) so the TOTAL visual
   gap on each side of this strip comes out equal (~70px), not just this
   section's own box. */
.trust-strip {
  margin: 0;
  padding: 14px 32px 38px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 56px;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
}

.trust-strip__item svg { flex-shrink: 0; width: 44px; height: 44px; color: var(--accent); }

.trust-strip__item div { display: flex; flex-direction: column; gap: 3px; }

.trust-strip__item strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--fg);
}

.trust-strip__item span { font-size: 13px; color: var(--fg-dim); }

@media (max-width: 900px) {
  .trust-strip { gap: 18px 28px; padding: 12px 32px 26px; justify-content: flex-start; }
  .trust-strip__item svg { width: 36px; height: 36px; }
}
@media (max-width: 560px) {
  .trust-strip__item strong { font-size: 12.5px; }
}

/* Hero */
.hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
}

.hero__blob {
  position: absolute;
  top: -240px;
  right: -120px;
  width: 760px;
  height: 760px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  opacity: 0.10;
  transform: rotate(28deg);
  border-radius: 90px;
  z-index: -1;
  pointer-events: none;
  animation: blobFloat 12s ease-in-out infinite;
}

.hero__rays {
  position: absolute;
  top: -120px;
  right: -160px;
  width: 640px;
  height: 640px;
  z-index: -1;
  pointer-events: none;
  transform: rotate(28deg);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 58px,
    rgba(224, 32, 26, 0.09) 58px,
    rgba(224, 32, 26, 0.09) 59px
  );
  -webkit-mask-image: radial-gradient(circle at 65% 35%, black 0%, transparent 65%);
  mask-image: radial-gradient(circle at 65% 35%, black 0%, transparent 65%);
}

.hero__ring {
  position: absolute;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.hero__ring--1 { width: 90px; height: 90px; left: 6%; top: 18%; animation: ringFloat 7s ease-in-out infinite; }
.hero__ring--2 { width: 46px; height: 46px; left: 14%; bottom: 12%; border-color: var(--accent); opacity: 0.4; animation: ringFloat 9s ease-in-out infinite reverse; }

@keyframes blobFloat {
  0%, 100% { transform: rotate(28deg) translate(0, 0); }
  50% { transform: rotate(32deg) translate(-20px, 20px); }
}

@keyframes ringFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 580px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
}

.hero__eyebrow-line {
  width: 30px;
  height: 2px;
  background: var(--accent);
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero h1 span { color: var(--accent); }

.hero p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--fg-dim);
  max-width: 460px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 28px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #c11a15; transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(224, 32, 26, 0.55); }

.btn-outline { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn-outline:hover { border-color: var(--fg); transform: translateY(-3px); }

/* Featured slider */
.featured-slider {
  position: relative;
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.featured-slider__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 14px;
}

.featured-slider__badge {
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.featured-slider__counter {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}

.featured-slider__stage {
  position: relative;
  height: 500px;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 22px rgba(20, 15, 10, 0.16));
}

.featured-slider__info {
  position: relative;
  min-height: 76px;
  margin-top: 18px;
  text-align: center;
}

.slide-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease) 0.1s, transform 0.4s var(--ease) 0.1s;
  pointer-events: none;
}
.slide-info.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.featured-slider__info .title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 25px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
}
.featured-slider__info .title:hover { color: var(--accent); }

.featured-slider__info .price {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.featured-slider__info .price::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--accent);
  transform: skewX(-20deg);
}

.featured-slider__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
}

.featured-slider__dots { display: flex; align-items: center; gap: 6px; }

.featured-slider__dots .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong);
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
  cursor: pointer;
}
.featured-slider__dots .dot.active { width: 18px; height: 5px; border-radius: 2.5px; background: var(--accent); }

.featured-slider__nav { display: flex; gap: 8px; }

.featured-slider__nav button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg); padding: 0;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.featured-slider__nav button:hover { transform: translateY(-2px); }

.featured-slider__nav button.next { background: var(--accent); border-color: var(--accent); color: #fff; }
.featured-slider__nav button.prev:hover { border-color: var(--fg); }
.featured-slider__nav button.next:hover { background: #c11a15; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Section heading */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 32px 0;
}

.section-heading h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  text-transform: uppercase;
  margin: 0;
}

.section-heading h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  transform: skewX(-20deg);
}

.section-heading a {
  font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em;
  transition: transform 0.2s var(--ease);
  display: inline-block;
}
.section-heading a:hover { transform: translateX(4px); }

/* Shop-the-look: one CMS-uploaded photo with a clickable product tag */
.shop-the-look {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 32px 0;
}

/* Match the gap below the photo (before the next heading) to the gap above it */
.shop-the-look + .section-heading { padding-top: 32px; }

.shop-the-look__frame {
  position: relative;
  aspect-ratio: 21 / 8;
  overflow: hidden;
  box-shadow: 0 26px 50px -22px rgba(20, 15, 10, 0.32);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.shop-the-look__frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 58px -20px rgba(20, 15, 10, 0.38);
}

.shop-the-look__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .shop-the-look__frame { aspect-ratio: 4 / 5; }
}

.shop-the-look__tag {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.shop-the-look__frame:hover .shop-the-look__tag,
.shop-the-look__frame:focus-within .shop-the-look__tag {
  opacity: 1;
}
@media (hover: none) {
  .shop-the-look__tag { opacity: 1; }
}

.shop-the-look__tag-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.92);
  border: 2px solid var(--accent);
  box-shadow: 0 6px 16px rgba(20, 15, 10, 0.3);
}
.shop-the-look__tag-dot::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(224, 32, 26, 0.55);
  animation: tagPulse 2.2s ease-out infinite;
}
.shop-the-look__tag-dot::after {
  content: '+';
  color: var(--accent);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

@keyframes tagPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

.shop-the-look__tag-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 18px);
  transform: translateX(-50%) translateY(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 260px;
  padding: 4mm;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    115deg,
    rgba(20, 15, 10, 0.045) 0px,
    rgba(20, 15, 10, 0.045) 1px,
    transparent 1px,
    transparent 96px
  );
  border: 1px solid var(--line);
  box-shadow: 0 28px 56px -16px rgba(20, 15, 10, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.shop-the-look__tag:hover .shop-the-look__tag-pop,
.shop-the-look__tag:focus-visible .shop-the-look__tag-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shop-the-look__tag-pop-image {
  display: block;
  width: 100%;
  height: 150px;
  overflow: hidden;
  flex-shrink: 0;
}
.shop-the-look__tag-pop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-the-look__tag-info { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.shop-the-look__tag-info strong { font-family: var(--font-condensed); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; font-size: 22px; line-height: 1.1; }
.shop-the-look__tag-info span { font-size: 15px; font-weight: 700; color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .shop-the-look__tag-dot::before { animation: none; }
}

/* Product grid */
.product-grid {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 24px 32px 56px;
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: 4px 4px 8px;
  gap: 14px;
  position: relative;
}
/* The [hidden] attribute is only a user-agent default - author rules like the
   display:flex above always win the cascade over it regardless of selector
   specificity, so it must be restated explicitly here to actually hide. */
.product-card[hidden] { display: none; }

.product-card.is-custom .product-card__title { color: var(--accent); }

.product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 5px;
  box-shadow: 0 6px 14px -4px rgba(20, 15, 10, 0.4);
  z-index: 1;
}

.product-card__badge.dark { background: var(--fg); color: var(--bg); }

.product-card__image {
  height: 320px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
  filter: drop-shadow(0 22px 18px rgba(20, 15, 10, 0.14));
}
.product-card:hover .product-card__image img {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 32px 24px rgba(20, 15, 10, 0.2));
}

.product-card__title {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__price {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.product-card__price s {
  color: var(--fg-dim);
  font-weight: 600;
  text-decoration-line: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2.5px;
}

.product-card__cta {
  margin-top: auto;
  padding: 11px 0;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--fg);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.product-card__cta.filled { background: var(--fg); color: #fff; border-color: var(--fg); font-weight: 800; }
.product-card:hover .product-card__cta.filled { background: var(--accent); border-color: var(--accent); }

/* Placeholder "no image yet" — soft panel with a simple garment glyph */
.noimage {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background:
    linear-gradient(135deg, rgba(224,32,26,0.06), rgba(255,138,61,0.06)),
    var(--bg-panel);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c9c2b8' stroke-width='2.2'%3E%3Cpath d='M32 14 L16 24 L23 38 L32 32 V86 H68 V32 L77 38 L84 24 L68 14 L59 21 H41 Z'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(224,32,26,0.05), rgba(255,138,61,0.05));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56px 56px, cover;
}

.noimage--slide { width: 220px; height: 220px; margin: 0 auto; }

/* Category grid link cards (homepage) */
.category-teaser-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 24px 32px 56px;
}

.external-shop-note {
  max-width: var(--container);
  margin: 0 auto;
  padding: 6px 32px 0;
  font-size: 13px;
  color: var(--fg-dim);
}

/* Reusable auto-rotating "3 at a time" product grid, shared by every cross-promoted
   external shop section (Frenkie, Nagradna Igra, ...). */
.shop-rotator { display: grid; }
.shop-rotator-page {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in-out;
}
.shop-rotator-page.active { opacity: 1; pointer-events: auto; }

/* Bigger product photos on cross-promo cards, proportional to the full-width CTA
   button underneath each one. */
.shop-rotator-page .product-card__image { height: 420px; }

/* Gaming Edition cross-promo: sits on the site's normal light background (no dark
   panel) - separated from the sections above/below by a yellow/black hazard-stripe
   band, like caution tape, echoing the campaign's own limited/urgent framing. */
.gaming-promo {
  position: relative;
  margin-top: 8px;
  padding-bottom: 8px;
}

/* Playful mascot: walks onto the top hazard tape once it scrolls into view,
   waves to grab attention, then points down at the products - and if the
   cursor gets too close he panics, hands in the air, and runs off for good. */
.hazard-guy {
  position: absolute;
  top: 0;
  left: -10%;
  z-index: 5;
  transform: translate(-50%, -100%);
  transition: left 2.6s cubic-bezier(0.3, 1.15, 0.4, 1);
  pointer-events: none;
  opacity: 1;
}
.hazard-guy.is-fleeing { transition-duration: 0.5s; }
.hazard-guy.is-gone { transition: opacity 0.4s ease; opacity: 0; }

.hazard-guy__svg { display: block; overflow: visible; }

.hazard-guy__leg, .hazard-guy__arm {
  transform-box: fill-box;
  transform-origin: top center;
  transition: transform 0.5s ease;
}

.hazard-guy.is-pointing .hazard-guy__arm--point { transform: rotate(48deg); }

.hazard-guy.is-waving .hazard-guy__arm--wave { animation: hazard-guy-wave 0.7s ease-in-out infinite; }
.hazard-guy.is-waving .hazard-guy__svg,
.hazard-guy.is-pointing .hazard-guy__svg { animation: hazard-guy-bob 1.8s ease-in-out infinite; }

@keyframes hazard-guy-wave {
  0%, 100% { transform: rotate(-70deg); }
  50% { transform: rotate(-130deg); }
}
@keyframes hazard-guy-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.hazard-guy.is-walking .hazard-guy__leg--left,
.hazard-guy.is-fleeing .hazard-guy__leg--left { animation: hazard-guy-leg-l 0.42s ease-in-out infinite; }
.hazard-guy.is-walking .hazard-guy__leg--right,
.hazard-guy.is-fleeing .hazard-guy__leg--right { animation: hazard-guy-leg-r 0.42s ease-in-out infinite; }
.hazard-guy.is-walking .hazard-guy__arm--wave,
.hazard-guy.is-walking .hazard-guy__arm--point { animation: hazard-guy-leg-r 0.42s ease-in-out infinite; }
.hazard-guy.is-fleeing .hazard-guy__leg--left,
.hazard-guy.is-fleeing .hazard-guy__leg--right { animation-duration: 0.18s; }

/* Fleeing: both arms fly straight up in a startled "hands up" panic */
.hazard-guy.is-fleeing .hazard-guy__arm--wave { animation: hazard-guy-panic-l 0.15s ease-in-out infinite; }
.hazard-guy.is-fleeing .hazard-guy__arm--point { animation: hazard-guy-panic-r 0.15s ease-in-out infinite; }

@keyframes hazard-guy-leg-l {
  0%, 100% { transform: rotate(26deg); }
  50% { transform: rotate(-26deg); }
}
@keyframes hazard-guy-leg-r {
  0%, 100% { transform: rotate(-26deg); }
  50% { transform: rotate(26deg); }
}
@keyframes hazard-guy-panic-l {
  0%, 100% { transform: rotate(-150deg); }
  50% { transform: rotate(-165deg); }
}
@keyframes hazard-guy-panic-r {
  0%, 100% { transform: rotate(150deg); }
  50% { transform: rotate(165deg); }
}

@media (max-width: 900px) {
  .hazard-guy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hazard-guy { transition: none; }
  .hazard-guy .hazard-guy__leg, .hazard-guy .hazard-guy__arm, .hazard-guy .hazard-guy__svg { animation: none !important; }
}
.gaming-promo__hazard {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  background: repeating-linear-gradient(45deg, #ffbf00, #ffbf00 18px, #08080c 18px, #08080c 36px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}
.gaming-promo__hazard span {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 14px;
  text-shadow:
    1px 1px 1px #08080c,
    -1px -1px 1px #08080c,
    1px -1px 1px #08080c,
    -1px 1px 1px #08080c;
}

/* Broad soft sheen through the middle of the tape, like light catching brushed metal */
.gaming-promo__hazard::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.65) 50%, transparent);
  filter: blur(6px);
  pointer-events: none;
}
.gaming-promo .section-heading { padding-top: 32px; }
.gaming-promo .section-heading a { color: #ff1ab3; }
.gaming-promo .product-card__badge.dark {
  background: linear-gradient(to right, #ff1ab3, #ffbf00);
  color: #08080c;
}
.gaming-promo .product-card__cta.filled {
  background: linear-gradient(to right, #ff1ab3, #00ffff);
  color: #08080c;
  border-color: transparent;
}
.gaming-promo .product-card:hover .product-card__cta.filled {
  background: linear-gradient(to right, #ffbf00, #ff1ab3);
}

.category-teaser {
  position: relative;
  background: var(--fg);
  background-size: cover;
  background-position: center;
  color: var(--bg);
  padding: 36px 26px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  gap: 6px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* With an editor-uploaded photo, swap the plain dark card for the photo plus
   a bottom-heavy dark gradient (keeps the title/count readable over any
   image) instead of the flat accent circle + texture. */
.category-teaser.has-image::before { display: none; }
.category-teaser.has-image::after {
  background-image: linear-gradient(to top, rgba(20, 15, 10, 0.8), rgba(20, 15, 10, 0.1) 60%, rgba(20, 15, 10, 0.3));
}

.category-teaser:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -20px rgba(20, 15, 10, 0.35);
}

.category-teaser::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  background: var(--accent);
  opacity: 0.35;
  border-radius: 50%;
  transition: transform 0.6s var(--ease);
}

.category-teaser:hover::before { transform: scale(1.4); }

.category-teaser::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.06) 0px,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px,
    transparent 34px
  );
}

.category-teaser__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 25px;
  text-transform: uppercase;
  position: relative;
}

.category-teaser__count { font-size: 12.5px; color: rgba(255, 255, 255, 0.65); position: relative; }

/* Generic content page */
.page-content {
  max-width: 840px;
  margin: 0 auto;
  padding: 64px 32px 80px;
}

.page-content h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 76px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.24;
  white-space: normal;
  margin: 0 0 28px;
}

/* Mobile: force-fitting a long title like "Majice kratkih rukava" onto one
   line at phone widths would need a font-size too small to read as the
   bold "watermark" statement this is meant to be - so it shrinks in steps
   and, on the narrowest phones, is allowed to wrap instead. */
@media (max-width: 900px) {
  .search-page h1, .page-content h1 { font-size: 48px; }
}
@media (max-width: 560px) {
  .search-page h1, .page-content h1 { font-size: 34px; white-space: normal; }
}

.page-content .typography p { line-height: 1.75; color: var(--fg-dim); font-size: 16.5px; }

/* Product category listing (SilverShop) */
#ProductGroup {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 32px 80px;
}

#ProductGroup .pageTitle {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  text-transform: uppercase;
  margin: 0 0 32px;
}

#ProductGroup ul.productList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.productItem {
  background: var(--bg-panel);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.productItem:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -24px rgba(20, 15, 10, 0.25); }

.productItem img { height: 170px; object-fit: contain; margin: 0 auto; transition: transform 0.5s var(--ease); }
.productItem:hover img { transform: scale(1.06); }
.productItem a.noimage { height: 170px; }

.productItem .productTitle {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
}
.productItem .productTitle a:hover { color: var(--accent); }

.productItem .price, .productItem .PriceTag {
  font-size: 17px;
  color: var(--fg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.productItem .add a, .productItem .view a {
  display: inline-block;
  margin-top: 6px;
  padding: 11px 20px;
  background: var(--fg);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.25s var(--ease);
}
.productItem .add a:hover, .productItem .view a:hover { background: var(--accent); }

/* Single product page (SilverShop) */
#Product {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 32px 80px;
}

.product-page__layout {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-gallery { flex: 1 1 420px; min-width: 280px; max-width: 520px; position: relative; }
.product-gallery__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.product-gallery__main {
  border-radius: 12px;
}
.product-gallery__main img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 26px rgba(20, 15, 10, 0.14));
  transition: transform 0.5s var(--ease);
}
.product-gallery__main:hover img { transform: translateY(-6px); }
.product-gallery__main .noimage { width: 100%; aspect-ratio: 1; }

.product-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.product-gallery__thumb {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: var(--bg-panel);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb.is-active { border-color: var(--accent); }
.product-gallery__thumb:hover { border-color: var(--line-strong); }

.product-main { flex: 1; min-width: 300px; }
.product-main__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
}

.product-main__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--fg-dim);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.product-main__rating .star-display { color: #f0b429; }
.product-main__rating:hover { color: var(--fg); }

.product-main__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--accent);
  margin: 0 0 18px;
}
.product-main__price s { color: var(--fg-dim); font-size: 0.6em; margin-right: 8px; }

/* Form fields — SilverStripe's default .field/.middleColumn markup,
   styled site-wide (product page, cart, checkout, account) so nothing
   ever falls back to bare browser chrome. */
form fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
form legend { display: none; }

.field {
  margin-bottom: 22px;
}

.field .form-label,
.field > label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 10px;
}

.field .middleColumn { position: relative; }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field textarea,
.field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field select { cursor: pointer; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 32, 26, 0.12);
}

.field.dropdown select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

#Product .field {
  max-width: 360px;
}
#Product .field.numeric { max-width: 140px; }
#Product .field.numeric input { cursor: text; text-align: center; }

/* JS progressively enhances the plain <select>/<input> the vendor form
   renders into pill buttons / a +/- stepper - the original field is kept in
   the DOM (just visually hidden) so the form still submits normally with no
   markup changes needed on the PHP side. */
.field.dropdown select.js-enhanced { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.pill-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill-select__option {
  padding: 10px 18px;
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pill-select__option:hover { border-color: var(--accent); }
.pill-select__option.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.field.numeric input.js-enhanced { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--fg);
  border-radius: 7px;
  overflow: hidden;
}
.qty-stepper__btn {
  width: 42px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.qty-stepper__btn:hover { background: var(--bg); color: var(--accent); }
.qty-stepper__value {
  min-width: 40px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
}

/* Description / Reviews / Delivery / Payment accordion */
.product-accordion { margin-top: 32px; border-top: 1px solid var(--line); }
.product-accordion--full { margin-top: 56px; }
.product-accordion__item { border-bottom: 1px solid var(--line); }
.product-accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 2px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  text-align: left;
  color: var(--fg);
  cursor: pointer;
  margin: 0;
}
.product-accordion__head svg { flex-shrink: 0; transition: transform 0.25s var(--ease); }
.product-accordion__item.is-open .product-accordion__head svg { transform: rotate(180deg); }
.product-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.product-accordion__body > * { overflow: hidden; }
.product-accordion__body > * > *:last-child { margin-bottom: 18px; }
.product-accordion__item.is-open .product-accordion__body { grid-template-rows: 1fr; }
.product-accordion__body p { margin: 0 0 16px; font-size: 14px; color: var(--fg-dim); line-height: 1.6; }
.product-accordion .productTrust { margin-top: 0; padding-top: 0; border-top: none; }

.product-reviews__list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; padding-bottom: 6px; }
.product-reviews__empty { color: var(--fg-dim); font-size: 14px; margin-bottom: 24px; }
.product-review { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.product-review:last-child { border-bottom: none; padding-bottom: 0; }
.product-review__stars { color: #f0b429; font-size: 13px; margin-bottom: 6px; letter-spacing: 1px; }
.product-review__author { margin: 0 0 4px; font-weight: 800; font-size: 14px; color: var(--fg); }
.product-review__comment { margin: 0; font-size: 13.5px; color: var(--fg-dim); line-height: 1.55; }

.product-review-form {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}
.product-review-form h4 { margin: 0; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; }
.product-review-form__stars { display: flex; gap: 4px; }
.product-review-form__stars button {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--line-strong);
  cursor: pointer;
  padding: 2px;
  margin: 0;
}
.product-review-form__stars button.is-active { color: #f0b429; }
.product-review-form__stars button:hover { background: none; padding: 2px; }
.product-review-form input[type="text"],
.product-review-form textarea {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  resize: vertical;
}
.product-review-form input:focus,
.product-review-form textarea:focus { outline: none; border-color: var(--accent); }
.product-review-form__submit { align-self: flex-start; }
.product-review-form__status { margin: 0; font-size: 13px; min-height: 1em; }
.product-review-form__status.is-error { color: var(--accent); }
.product-review-form__status.is-success { color: #1a9e4a; }

.star-display { color: #f0b429; letter-spacing: 1px; }

.product-payment-secure { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.product-payment-secure__heading { margin: 0 0 8px; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; color: var(--fg); }
.product-payment-secure p { margin: 0; }

.product-payment-cards {
  margin-top: 16px;
  opacity: 0.55;
}
.product-payment-cards__label { display: block; font-size: 12.5px; font-weight: 700; color: var(--fg-dim); margin-bottom: 8px; }
.product-payment-cards__label em { font-style: normal; color: var(--accent); }
.product-payment-cards__logos { display: flex; gap: 8px; flex-wrap: wrap; }
.product-payment-cards__logo {
  padding: 5px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--fg-dim);
}

.shipping-info__heading { margin: 0 0 8px; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; color: var(--fg); }
.shipping-info__heading--secondary { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.shipping-info p { margin: 0 0 12px; }
.shipping-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shipping-info__list li { font-size: 14px; color: var(--fg-dim); line-height: 1.55; }
.shipping-info__list li strong { color: var(--fg); }

.card-payment-info__heading { margin: 0 0 8px; font-family: var(--font-display); font-size: 15px; text-transform: uppercase; color: var(--fg); }
.card-payment-info__heading--secondary { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.card-payment-info__list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.card-payment-info__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--fg-dim); line-height: 1.55; }
.card-payment-info__icon { flex-shrink: 0; font-size: 15px; line-height: 1.5; }
.card-payment-info__supported { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); }
.card-payment-info__supported em { font-style: normal; color: var(--accent); }
.card-payment-info__logos { display: flex; gap: 8px; flex-wrap: wrap; }
.card-payment-info__logo {
  padding: 6px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--fg-dim);
}

form button,
form input[type=submit] {
  padding: 16px 30px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
form button:hover,
form input[type=submit]:hover {
  background: #c11a15;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(224, 32, 26, 0.5);
}

/* Product page share row - Facebook has a real share URL; Instagram/TikTok
   don't (no web share-intent exists for either), so those two trigger the
   device's native share sheet instead (where Instagram/TikTok/WhatsApp/etc.
   show up automatically if installed), falling back to copy-link on desktop. */
.product-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.product-share__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-right: 4px;
}
.product-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.product-share__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.share-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--fg);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  max-width: calc(100vw - 48px);
  text-align: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.share-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.productTrust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.productTrust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-dim);
}
.productTrust__item svg { color: var(--accent); flex-shrink: 0; }

/* Hometown signature - closes the homepage content before the footer */
.hometown {
  color: var(--fg);
  text-align: center;
  padding: 96px 32px;
  position: relative;
  overflow: hidden;
}

/* Faint watermarks: the Gradina fortress silhouette on the left, the year of its
   first historical mention on the right - the PNG is white-on-transparent, so
   brightness(0) recolours it dark before the low opacity fades it into the page. */
.hometown__gradina {
  position: absolute;
  right: calc(50% + 380px);
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  max-height: 320px;
  width: auto;
  filter: brightness(0);
  opacity: 0.05;
  pointer-events: none;
}

.hometown__year {
  position: absolute;
  left: calc(50% + 380px);
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 10vw, 150px);
  line-height: 0.8;
  color: var(--fg);
  opacity: 0.05;
  pointer-events: none;
  white-space: nowrap;
}
.hometown__year-row {
  display: flex;
}
.hometown__year-row span {
  display: inline-block;
  width: 1ch;
  text-align: center;
}

@media (max-width: 900px) {
  .hometown__gradina, .hometown__year { display: none; }
}

.hometown__pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 28px;
}
.hometown__pin svg { color: var(--accent); flex-shrink: 0; }

.hometown__statement {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 52px;
  line-height: 1.12;
  max-width: 820px;
  margin: 0 auto;
  text-transform: uppercase;
  color: var(--fg);
}
.hometown__statement span { color: var(--accent); }

.hometown__note {
  position: relative;
  max-width: 480px;
  margin: 22px auto 0;
  font-size: 15px;
  color: var(--fg-dim);
}

.hometown__coords {
  position: relative;
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-condensed);
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--fg-dim);
  opacity: 0.7;
}

@media (max-width: 700px) {
  .hometown { padding: 64px 24px; }
  .hometown__statement { font-size: 32px; }
}

/* Footer */
/* Sticky footer: .site-main grows to fill any leftover viewport height on
   short pages (e.g. an empty Akcija listing), pinning the footer to the
   bottom instead of leaving it floating with a gap below. Tall pages are
   unaffected - flex-grow only kicks in when there's spare room. */
.site-main { flex: 1 0 auto; }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-panel);
  margin-top: 48px;
}

/* Footer: the shop on the left (logo, one line about it, contact, networks), three short link lists on the right,
   and under a rule the copyright with the legal pages in one line. */
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) 2fr;
  gap: 48px 72px;
  align-items: start;
}

.site-footer__brand { max-width: 360px; }
.site-footer__logo-link { display: inline-block; }
.site-footer__logo { display: block; height: 52px; width: auto; }
.site-footer__about { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-dim); }

.site-footer__contact { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 0; font-size: 14px; }
.site-footer__contact a { color: var(--fg); font-weight: 600; transition: color 0.2s var(--ease); }
.site-footer__contact a:hover { color: var(--accent); }

.site-footer__social { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.site-footer__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-footer__social-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}

.site-footer__col h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--fg);
  margin: 6px 0 16px;
  text-transform: uppercase;
}

.site-footer__col a {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--fg-dim);
  transition: color 0.2s var(--ease);
}
.site-footer__col a:hover { color: var(--accent); }

.site-footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 32px 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 32px;
  align-items: center;
  font-size: 12.5px;
  color: var(--fg-dim);
}

.site-footer__copy { margin: 0; white-space: nowrap; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.site-footer__legal a, .site-footer__legal .site-footer__cookie { color: var(--fg-dim); font-size: 12.5px; transition: color 0.2s var(--ease); }
.site-footer__legal a:hover, .site-footer__legal .site-footer__cookie:hover { color: var(--accent); text-decoration: none; }
.site-footer__note { grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.5; opacity: 0.8; }

.site-footer__bottom-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s var(--ease); }
.site-footer__bottom-link:hover { color: var(--accent); }

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px 32px; }
  .site-footer__brand { max-width: 520px; }
  .site-footer__bottom { grid-template-columns: 1fr; padding: 20px 24px 28px; }
  .site-footer__copy { white-space: normal; }
  .site-footer__legal { justify-content: flex-start; }
}

/* SilverShop sidebar / sidecart (uses module's own base CSS, just spacing here) */
#Sidebar {
  position: relative;
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 40px 32px 48px;
}
/* Full-bleed divider line - spans the whole viewport width, not just the
   centered container, so decorative elements on either edge (e.g. the
   #MITOTAKO mascots) sit flush against it. */
#Sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 1px solid var(--line);
}

#ProductNavigation { margin-bottom: 24px; font-size: 13px; }
#ProductNavigation ul { list-style: none; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
#ProductNavigation a { color: var(--fg-dim); }
#ProductNavigation a:hover { color: var(--accent); }

.sidecart { background: var(--bg-panel); padding: 22px; font-size: 13px; }
.sidecart h3 { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; margin: 0 0 12px; }
.sidecart .itemcount { font-size: 13px; color: var(--fg-dim); margin: 20px 0; }
.sidecart .itemcount a { color: var(--accent); font-weight: 700; }
.sidecart .noItems { color: var(--fg-dim); font-size: 14px; }

/* Flexbox, not Grid: a grid track sized "auto" still stretches to fill any
   extra width the container has (max-width was capping the box, not the
   text), which kept stranding the remove button far from short titles.
   Flex children just size to their own content by default - no leftover
   space gets forced between them. */
.sidecart .item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 460px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sidecart .item .image { flex-shrink: 0; }
.sidecart .item .image img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(20,15,10,0.14)); }
.sidecart .item .item-details { flex: 0 1 auto; min-width: 0; }
.sidecart .item .title { margin: 0; font-weight: 800; font-size: 17px; color: var(--fg); }
.sidecart .item .title a:hover { color: var(--accent); }
.sidecart .item .subtitle { margin: 4px 0 0; font-size: 12px; color: var(--fg-dim); }
.sidecart .item .quantityprice { margin: 8px 0 0; font-size: 12.5px; color: var(--fg-dim); }
.sidecart .item .quantityprice .times { margin: 0 4px; }
.sidecart .item .remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.sidecart .item .remove:hover { color: var(--accent); }

.sidecart .checkout {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--fg);
}
.sidecart .checkout a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-align: center;
  border-radius: 7px;
  transition: background 0.2s var(--ease);
}
.sidecart .checkout a:hover { background: #c11a15; }

/* On product/category pages the SideCart sits full-width in #Sidebar (there's
   no narrow column wrapping it like in the header drawer). Two independent
   flex columns - items on the left, the heading/count/checkout button in a
   fixed-width column on the right - like a normal cart summary sidebar.
   (A CSS Grid version of this was tried first and looked broken: grid ROWS
   size to the tallest cell across BOTH columns, so the tall item row forced
   "itemcount"/"checkout" apart even though they're meant to sit right under
   the heading. Flexbox columns don't share row-height like that - each
   column's own children just stack in their own normal flow.) */
#Sidebar .sidecart {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
}
#Sidebar .sidecart__summary { order: 2; flex: 0 0 240px; }
#Sidebar .sidecart__items { order: 1; flex: 1 1 420px; min-width: 280px; }

@media (max-width: 700px) {
  #Sidebar .sidecart { flex-direction: column; gap: 0; max-width: none; }
  #Sidebar .sidecart__summary, #Sidebar .sidecart__items { flex: 1 1 auto; }
}

/* About page */
.about__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
}

.about__hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 32px 40px;
  overflow: hidden;
}

.about__hero-blob {
  position: absolute;
  top: -200px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  opacity: 0.10;
  transform: rotate(28deg);
  border-radius: 90px;
  z-index: -1;
  pointer-events: none;
}

.about__hero-ring {
  position: absolute;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.about__hero-ring--1 { width: 70px; height: 70px; left: 8%; top: 20%; }
.about__hero-ring--2 { width: 40px; height: 40px; right: 12%; bottom: 10%; border-color: var(--accent); opacity: 0.4; }

.about__hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 52px;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0;
  max-width: 780px;
}

.about__story {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px 56px;
}

.about__story .typography p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--fg-dim);
}

.about__founders {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.about__statement {
  position: relative;
  background: var(--fg);
  color: var(--bg);
  padding: 72px 32px;
  text-align: center;
  overflow: hidden;
}

.about__statement-ring {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 32, 26, 0.35);
  pointer-events: none;
}

.about__statement::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 46px
  );
}

.about__statement h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.about__statement h2 span { color: var(--accent); }

.about__statement > p {
  position: relative;
  font-size: 17px;
  color: rgba(250, 246, 240, 0.7);
  max-width: 480px;
  margin: 0 auto 48px;
}

.about__stats {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.about__stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.about__stat-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  color: var(--accent);
  line-height: 1;
}

.about__stat-label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 240, 0.65);
  max-width: 160px;
  text-align: center;
}

.about__statement .btn { position: relative; }

.about__vision {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 32px 88px;
  text-align: center;
}

.about__vision h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.about__vision .typography {
  text-align: left;
}
.about__vision .typography p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--fg-dim);
  margin-bottom: 20px;
}

/* DTF print (uslužna štampa) page */
.dtf-print__hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 32px 56px;
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.dtf-print__hero-text { flex: 1 1 420px; min-width: 280px; }

.dtf-print__hero-text h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.dtf-print__hero-text .typography p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--fg-dim);
  margin: 0 0 28px;
}

.dtf-print__hero-media {
  position: relative;
  flex: 0 0 540px;
}

.dtf-print__hero-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 760px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .dtf-print__hero { flex-direction: column; padding: 48px 24px 40px; gap: 32px; }
  .dtf-print__hero-media { flex: 0 0 auto; width: 100%; max-width: 320px; }
  .dtf-print__hero-text h1 { font-size: 36px; }
}

/* DTF sheet builder */
.dtf-builder {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 32px 80px;
}

.dtf-builder__head { max-width: 760px; margin: 0 auto 40px; text-align: center; }

.dtf-builder__head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.dtf-builder__head h2 span { color: var(--accent); }

.dtf-builder__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 560px;
  margin: 0 auto;
}

.dtf-builder__steps {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dtf-builder__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border: 2px solid var(--fg);
  border-radius: 6px;
  background: var(--bg);
}

.dtf-builder__step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}

.dtf-builder__step strong {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1.25;
}

.dtf-builder__step span:last-child { font-size: 13.5px; line-height: 1.55; color: var(--fg-dim); }

.dtf-builder__toolbar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.dtf-builder__upload-btn { cursor: pointer; }

.dtf-builder__autosave {
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-dim);
  margin: 0 0 20px;
}
.dtf-builder__autosave.is-warn { color: var(--accent); font-weight: 700; }

.dtf-builder__restored {
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 10px 16px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #1a9e4a;
  border: 2px solid #1a9e4a;
  border-radius: 6px;
}
.dtf-builder__toolbar .btn.is-active { background: var(--fg); border-color: var(--fg); color: #fff; }

.dtf-builder__workspace {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.dtf-builder__stage-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.dtf-builder__stage-label {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
}

.dtf-builder__stage {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(20, 18, 16, 0.04) 0, rgba(20, 18, 16, 0.04) 1px, transparent 1px, transparent 14px),
    var(--bg);
  border: 2px dashed var(--line-strong);
  border-radius: 4px;
  overflow: auto;
  transition: height 0.15s var(--ease);
  /* Lets touch scrolling work on the background (the roll can run much
     taller than the screen); a touch-drag that STARTS ON AN IMAGE still
     drags it, because that item's own touch-action: none takes over. Mouse
     drag-to-select on empty space is unaffected - touch-action only governs
     touch/pen gestures. */
  touch-action: pan-y;
}

.dtf-builder__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  margin: 0;
  color: var(--fg-dim);
  font-size: 14px;
  pointer-events: none;
}

.dtf-builder__item {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 0;
  /* Transparent PNGs must show the foil through them - no white plate, and the
     outline only appears on hover/selection so it never reads as part of the design. */
  background: transparent;
  outline: 1px dashed transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.dtf-builder__item:hover { outline-color: rgba(20, 18, 16, 0.35); }

.dtf-builder__item.is-dragging {
  cursor: grabbing;
  z-index: 5;
}
.dtf-builder__item.is-dragging img { filter: drop-shadow(0 10px 12px rgba(20, 18, 16, 0.35)); }

.dtf-builder__item.is-selected {
  outline: 2px dashed var(--accent);
  z-index: 4;
}

.dtf-builder__item img {
  display: block;
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}

.dtf-builder__item-delete {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtf-builder__item-resize {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--fg);
  cursor: nwse-resize;
  touch-action: none;
}

.dtf-builder__item-rotate {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--fg);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* data-reveal leaves a transform on the section, which would make the mobile
   bottom sheet (position: fixed) anchor to the section instead of the screen. */
.dtf-builder[data-reveal].is-visible { transform: none; }

/* Author display rules (flex/inline-flex on rows and buttons) beat the
   browser's [hidden] default, so state it explicitly for the builder. */
.dtf-builder [hidden] { display: none !important; }

/* .btn is inline-flex without horizontal centering - stretched buttons
   (align/arrange/actions) would otherwise leave their label hugging the left. */
.dtf-builder .btn {
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

/* Handles only show on the one selected image - unselected images stay clean,
   and with several selected the sidebar panel does the work. */
.dtf-builder__item:not(.is-selected) .dtf-builder__item-delete,
.dtf-builder__item:not(.is-selected) .dtf-builder__item-rotate,
.dtf-builder__item:not(.is-selected) .dtf-builder__item-resize,
.dtf-builder.has-multi .dtf-builder__item-delete,
.dtf-builder.has-multi .dtf-builder__item-rotate,
.dtf-builder.has-multi .dtf-builder__item-resize,
.dtf-builder__group:not(.is-selected) .dtf-builder__group-rotate,
.dtf-builder__group:not(.is-selected) .dtf-builder__group-resize { display: none; }

/* Grouped images are handled through their group frame (and the sidebar). */
.dtf-builder__item.is-grouped .dtf-builder__item-delete,
.dtf-builder__item.is-grouped .dtf-builder__item-rotate,
.dtf-builder__item.is-grouped .dtf-builder__item-resize { display: none; }

.dtf-builder__group {
  position: absolute;
  box-sizing: border-box;
  outline: 2px dashed var(--fg);
  outline-offset: 3px;
  pointer-events: none;
  z-index: 7;
}
.dtf-builder__group.is-selected { outline-color: var(--accent); }

.dtf-builder__group-label {
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg);
  padding: 1px 6px;
  border: 1px solid var(--fg);
}

.dtf-builder__group-rotate {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--fg);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtf-builder__group-resize {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.dtf-builder__group-row { display: flex; gap: 8px; margin-bottom: 12px; }
.dtf-builder__group-row .btn { flex: 1 1 0; font-size: 12px; padding: 10px 12px; }

.dtf-builder__hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--accent);
}

.dtf-builder__marquee {
  position: absolute;
  border: 1px dashed var(--accent);
  background: rgba(224, 32, 26, 0.08);
  pointer-events: none;
  z-index: 6;
}

.dtf-builder__sidebar {
  flex: 1 1 280px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dtf-builder__price-box {
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: 6px;
  padding: 24px;
}

.dtf-builder__price-box .dtf-builder__stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
}

.dtf-builder__stat-label {
  font-size: 12px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dtf-builder__stat strong { font-family: var(--font-display); font-size: 20px; color: var(--fg); }

.dtf-builder__stat--price {
  margin: 4px 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dtf-builder__stat--price .dtf-builder__stat-label { color: var(--accent); font-weight: 700; }
.dtf-builder__stat--price strong { font-size: 32px; color: var(--accent); }

.dtf-builder__price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dtf-builder__price-table td {
  padding: 6px 4px;
  color: var(--fg-dim);
  border-top: 1px solid var(--line);
}
.dtf-builder__price-table td:last-child { text-align: right; font-weight: 700; }

.dtf-builder__price-table tr.is-active td {
  color: var(--fg);
  font-weight: 700;
}
.dtf-builder__price-table tr.is-active td:last-child { color: var(--accent); }

.dtf-builder__item-panel {
  border: 2px solid var(--fg);
  border-radius: 6px;
  padding: 18px;
}

.dtf-builder__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dtf-builder__panel-close {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.dtf-builder__item-panel h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
}

.dtf-builder__item-panel-row { display: flex; gap: 10px; margin-bottom: 12px; }
.dtf-builder__item-panel-row label {
  flex: 1 1 0;
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dtf-builder__item-panel-row input {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  box-sizing: border-box;
}
.dtf-builder__item-panel-row input:focus { outline: none; border-color: var(--accent); }

.dtf-builder__item-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dtf-builder__item-panel-actions .btn { flex: 1 1 80px; font-size: 12px; padding: 10px 12px; }

.dtf-builder__align-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}

.dtf-builder__align-group { display: flex; flex-direction: column; gap: 6px; }

.dtf-builder__align-label {
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dtf-builder__align-btns { display: flex; gap: 6px; }

.dtf-builder__align-btns .btn {
  flex: 1 1 0;
  padding: 8px 4px;
  font-size: 12px;
}

.dtf-builder__align-distribute {
  width: 100%;
  font-size: 12px;
  padding: 8px 10px;
}
.dtf-builder__align-distribute:disabled { opacity: 0.4; cursor: not-allowed; }

.dtf-builder__form {
  max-width: 700px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dtf-builder__form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.dtf-builder__form-row input { flex: 1 1 140px; }

.dtf-builder__form input,
.dtf-builder__form textarea {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  resize: vertical;
  box-sizing: border-box;
}

.dtf-builder__form input:focus,
.dtf-builder__form textarea:focus { outline: none; border-color: var(--accent); }

.dtf-builder__form-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.dtf-builder__status { font-size: 13px; }
.dtf-builder__status.is-error { color: var(--accent); }
.dtf-builder__status.is-success { color: #1a9e4a; }

.dtf-builder__note { font-size: 12.5px; color: var(--fg-dim); margin: 0; }

/* DTF FAQ */
.dtf-faq {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 32px 96px;
}

.dtf-faq__head { text-align: center; margin-bottom: 32px; }

.dtf-faq__head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
}
.dtf-faq__head h2 span { color: var(--accent); }

.dtf-faq__list { display: flex; flex-direction: column; gap: 12px; }

.dtf-faq__item {
  border: 2px solid var(--fg);
  border-radius: 6px;
  background: var(--bg);
}

.dtf-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}
.dtf-faq__item summary::-webkit-details-marker { display: none; }

.dtf-faq__item summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fg);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.dtf-faq__item[open] summary::after { content: '–'; background: var(--accent); }
.dtf-faq__item[open] summary { color: var(--accent); }

.dtf-faq__item p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg-dim);
}
.dtf-faq__item p a { color: var(--accent); font-weight: 700; }

@media (max-width: 768px) {
  .dtf-faq { padding: 8px 16px 64px; }
  .dtf-faq__head h2 { font-size: 27px; }
  .dtf-faq__item summary { padding: 16px 16px; font-size: 13.5px; }
  .dtf-faq__item p { padding: 0 16px 18px; font-size: 14.5px; }
}

@media (max-width: 768px) {
  /* 16px stops iOS Safari zooming the page when a field is focused. */
  .dtf-builder input,
  .dtf-builder textarea { font-size: 16px; }
  .dtf-builder { padding: 40px 16px 56px; }

  /* The item panel becomes a bottom sheet while something is selected, so the
     size/rotate/group controls are always within thumb reach instead of far
     below a tall roll. */
  .dtf-builder.has-sheet { padding-bottom: calc(46vh + 32px); }

  .dtf-builder__item-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border: 0;
    border-top: 2px solid var(--fg);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 32px -14px rgba(20, 18, 16, 0.4);
  }

  .dtf-builder__panel-close { display: flex; align-items: center; justify-content: center; }

  .dtf-builder__align-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  .dtf-builder__align-row .dtf-builder__align-group:nth-of-type(3),
  .dtf-builder__align-row .dtf-builder__align-distribute { grid-column: 1 / -1; }
  .dtf-builder__item-panel-actions .btn,
  .dtf-builder__group-row .btn { padding: 12px 10px; }
  .dtf-builder__head h2 { font-size: 34px; }
  .dtf-builder__lead { font-size: 15px; }
  .dtf-builder__steps { grid-template-columns: repeat(2, 1fr); margin-bottom: 36px; }
  .dtf-builder__toolbar { flex-wrap: wrap; }
  .dtf-builder__toolbar .btn { flex: 1 1 140px; }
  .dtf-builder__workspace { gap: 24px; }
  .dtf-builder__sidebar { max-width: 100%; width: 100%; }

  /* Bigger touch targets - the desktop sizes (20px delete/rotate dots, a
     12px resize nub) are too small to reliably tap with a finger. */
  .dtf-builder__item-delete,
  .dtf-builder__item-rotate {
    width: 28px;
    height: 28px;
    font-size: 16px;
    top: -12px;
  }
  .dtf-builder__item-delete { right: -12px; }
  .dtf-builder__item-rotate { left: -12px; }
  .dtf-builder__item-resize { width: 20px; height: 20px; right: -8px; bottom: -8px; }
  .dtf-builder__group-rotate { width: 30px; height: 30px; top: -15px; left: -15px; font-size: 17px; }
  .dtf-builder__group-resize { width: 22px; height: 22px; right: -11px; bottom: -11px; }

  .dtf-builder__item-panel-row { flex-wrap: wrap; }
  .dtf-builder__align-btns .btn { padding: 10px 4px; font-size: 12.5px; }
}

@media (max-width: 560px) {
  .dtf-builder__head h2 { font-size: 27px; }
  .dtf-builder__steps { grid-template-columns: 1fr; }
  .dtf-builder__step { padding: 18px; }
  .dtf-builder__sidebar { max-width: 100%; }
  .dtf-builder__price-box { padding: 18px; }
  .dtf-builder__stat--price strong { font-size: 26px; }
}

@media (max-width: 700px) {
  .about__hero h1 { font-size: 36px; }
  .about__statement h2 { font-size: 30px; }
  .about__stat-number { font-size: 42px; }
  .about__stats { gap: 40px; }
}

/* Account pages (SilverShop AccountPage + sub-actions) */
.account-layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 32px 80px;
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.accountnav {
  flex: 0 0 220px;
}

.accountnav .nav h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.accountnav ul.nav-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.accountnav ul.nav-list li { border-bottom: 1px solid var(--line); }
.accountnav ul.nav-list li:first-child { border-top: 1px solid var(--line); }
.accountnav ul.nav-list a {
  display: block;
  padding: 12px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.accountnav ul.nav-list a:hover { color: var(--accent); padding-left: 6px; }
.accountnav ul.nav-list .icon { display: none; }

.memberdetails dl {
  margin: 0;
  padding-top: 20px;
  border-top: 2px solid var(--fg);
}
.memberdetails dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 16px;
}
.memberdetails dt:first-child { margin-top: 0; }
.memberdetails dd {
  margin: 3px 0 0;
  font-size: 14.5px;
  font-weight: 600;
}

#Account { flex: 1; min-width: 0; }

#Account .pagetitle {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  text-transform: uppercase;
  margin: 0 0 28px;
}

#Account .message,
#Account .alert {
  padding: 16px 20px;
  background: var(--bg-panel);
  border-left: 3px solid var(--accent);
  font-size: 14px;
  color: var(--fg-dim);
}
#Account .message.good { border-left-color: #1a9e4a; }

table.orderhistory {
  width: 100%;
  border-collapse: collapse;
}
table.orderhistory thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0 12px 12px 0;
  border-bottom: 2px solid var(--fg);
}
table.orderhistory tbody td {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
table.orderhistory .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--fg);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  transition: background 0.2s var(--ease);
}
table.orderhistory .btn:hover { background: var(--accent); }
table.orderhistory .icon { display: none; }

.address-panel {
  background: var(--bg-panel);
  padding: 22px;
  margin-bottom: 18px;
  position: relative;
}
.address-panel .tag {
  display: inline-block;
  padding: 5px 10px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  margin-right: 8px;
}
.address-panel .panel-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.address-panel .panel-footer .btn {
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.address-panel .panel-footer .btn:hover { border-color: var(--accent); color: var(--accent); }
.address-panel .remove-address {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.address-panel .remove-address:hover { color: var(--accent); background: var(--bg); }
.address-panel .remove-address img { display: none; }
.address-panel .remove-address::after { content: '✕'; font-size: 13px; }

@media (max-width: 800px) {
  .account-layout { flex-direction: column; gap: 32px; }
  .accountnav { flex: 1 1 auto; width: 100%; }
  table.orderhistory { display: block; overflow-x: auto; }
}

/* Checkout page */
.checkout-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.checkout-page .pageTitle {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.checkout-summary {
  position: sticky;
  top: 104px;
  padding: 28px;
  background: var(--bg-alt, #f8f5f0);
  border-radius: 18px;
}

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 32px; }
  .checkout-summary { position: static; padding: 0; background: none; border-radius: 0; order: 2; }
  .checkout-form { order: 1; }
}

/* Recipient toggle: JS hides .recipient-name-field when "same as buyer" is checked */
.field.recipient-name-field[hidden] { display: none; }
#RecipientSameAsBuyer_Holder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
#RecipientSameAsBuyer_Holder input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
#RecipientSameAsBuyer_Holder label { margin: 0; font-weight: 600; font-size: 13.5px; cursor: pointer; }

/* SilverShop's checkout.css (loaded after ours) uses an ID-selector
   float layout (#LeftOrder/#RightOrder 50/50 columns, label.left
   floated at 30%) - !important neutralises it in favour of a single
   clean stacked column, since that ID beats normal class specificity
   regardless of load order. */
#LeftOrder, #RightOrder {
  float: none !important;
  width: 100% !important;
  max-width: 520px;
}
#LeftOrder .CompositeField { margin-right: 0 !important; }
#OrderForm_OrderForm { clear: none !important; }
#BottomOrder { clear: both; margin-top: 8px; }

.recaptcha-field { clear: both; margin: 8px 0 20px; }
.recaptcha-field .g-recaptcha { display: inline-block; }

#Checkout form label.left {
  float: none !important;
  width: auto !important;
}
#Checkout form input.nolabel { margin-left: 0 !important; }
#Checkout form input.text { width: 100% !important; }

#Checkout table.cart { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
#Checkout table.cart thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0 16px 12px 0;
  border-bottom: 2px solid var(--fg);
}
#Checkout table.cart tbody td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
#Checkout table.cart .image img { width: 220px; height: 220px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(20,15,10,0.14)); }
#Checkout table.cart tfoot th, #Checkout table.cart tfoot td { padding: 10px 16px 10px 0; text-align: left; font-size: 13.5px; }
#Checkout table.cart tfoot tr.Total th, #Checkout table.cart tfoot tr.Total td {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  text-transform: uppercase;
  border-top: 2px solid var(--fg);
  padding-top: 14px;
}

#Checkout #PaymentMethod { list-style: none; padding: 0; margin: 8px 0 20px; }
#Checkout #PaymentMethod li { padding: 4px 0; }

#Checkout form button,
#Checkout form input[type=submit] {
  width: 100%;
  max-width: 320px;
  padding: 17px 30px;
  font-size: 14px;
}

/* Cart page (full /cart/ fallback for the slide-out drawer) */
.cart-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.cart-page .pagetitle {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  text-transform: uppercase;
  margin: 0 0 32px;
}

.cart-page table.cart {
  width: 100%;
  border-collapse: collapse;
}

.cart-page table.cart thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0 16px 14px 0;
  border-bottom: 2px solid var(--fg);
}

.cart-page table.cart tbody tr {
  border-bottom: 1px solid var(--line);
}

.cart-page table.cart tbody td {
  padding: 22px 16px 22px 0;
  vertical-align: top;
}

.cart-page table.cart .image img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(20, 15, 10, 0.16));
}

.cart-page table.cart h3 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}
.cart-page table.cart h3 a:hover { color: var(--accent); }

.cart-page table.cart .subtitle {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--fg-dim);
}

.cart-page table.cart td > span:not([class]) {
  font-weight: 600;
}

.cart-page table.cart tfoot th,
.cart-page table.cart tfoot td {
  padding: 18px 16px 18px 0;
  text-align: left;
  font-size: 14px;
}
.cart-page table.cart tfoot tr.subtotal th,
.cart-page table.cart tfoot tr.subtotal td {
  border-top: 2px solid var(--fg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12.5px;
}
.cart-page table.cart tfoot tr.Total th,
.cart-page table.cart tfoot tr.Total td {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
}

.cartfooter {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.cartfooter .button {
  display: inline-flex;
  align-items: center;
  padding: 15px 28px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-radius: 7px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.cartfooter .continuelink {
  border: 1px solid var(--line-strong);
  color: var(--fg);
}
.cartfooter .continuelink:hover { border-color: var(--fg); transform: translateY(-2px); }
.cartfooter .checkoutlink {
  background: var(--accent);
  color: #fff;
}
.cartfooter .checkoutlink:hover {
  background: #c11a15;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(224, 32, 26, 0.5);
}

@media (max-width: 700px) {
  .cart-page table.cart { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Slide-out cart drawer */
body.cart-drawer-locked { overflow: hidden; }

.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.5);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.cart-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--bg);
  z-index: 91;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  box-shadow: -20px 0 60px rgba(20, 15, 10, 0.25);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cart-drawer__head span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
}
.cart-drawer__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cart-drawer__close:hover { background: var(--bg-panel); color: var(--accent); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* The included SideCart partial is styled generically above (so it also looks
   right in #Sidebar on product pages) - here it's just re-themed to sit flush
   inside the drawer's own head/body chrome instead of having its own panel. */
.cart-drawer .sidecart { background: none; padding: 0; font-size: 14px; }
.cart-drawer .sidecart h3 { display: none; }
.cart-drawer .sidecart .item .remove:hover { background: var(--bg-panel); }

/* Account drawer - same slide-out mechanics as the cart drawer */
.account-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.5);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.account-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.account-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--bg);
  z-index: 91;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  box-shadow: -20px 0 60px rgba(20, 15, 10, 0.25);
}
.account-drawer.is-open { transform: translateX(0); }

.account-drawer__body { display: flex; flex-direction: column; align-items: flex-start; }

.account-drawer__greeting { font-size: 14.5px; color: var(--fg-dim); margin: 0 0 20px; }
.account-drawer__greeting strong { color: var(--fg); }

.account-drawer__link {
  display: block;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  transition: color 0.2s var(--ease);
}
.account-drawer__link:hover { color: var(--accent); }
.account-drawer__link--dim { color: var(--fg-dim); border-bottom: none; }
.account-drawer__link--dim:hover { color: var(--accent); }

.account-drawer__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 13px 26px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 7px;
  transition: background 0.25s var(--ease);
}
.account-drawer__cta:hover { background: #c11a15; }

.account-drawer__oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.account-drawer__oauth-btn:hover { border-color: var(--fg); background: var(--bg-panel); }
.account-drawer__oauth-btn + .account-drawer__oauth-btn { margin-top: 10px; }
.account-drawer__oauth-btn--facebook:hover { border-color: #1877F2; }

.account-drawer__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 16px 0;
  color: var(--fg-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.account-drawer__divider::before,
.account-drawer__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.account-drawer__body form { width: 100%; margin: 0; }
.account-drawer__body .field { margin-bottom: 16px; }
.account-drawer__body form button,
.account-drawer__body form input[type=submit] { width: 100%; text-align: center; }

/* Scroll to top */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--fg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.25s var(--ease);
}
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover { background: var(--accent); }

/* Wishlist heart */
.wishlist-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg);
  z-index: 2;
  box-shadow: 0 4px 14px rgba(20, 15, 10, 0.12);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.wishlist-btn:hover { transform: scale(1.1); }
.wishlist-btn svg { pointer-events: none; }
.wishlist-btn.is-active { color: var(--accent); }
.wishlist-btn.is-active svg path { fill: var(--accent); }

/* Responsive */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
  .hero { flex-direction: column; align-items: flex-start; padding-top: 40px; }
  .featured-slider { width: 100%; }
  .featured-slider__stage { height: 320px; }
  .hero h1 { font-size: 48px; }
  .product-grid, .category-teaser-grid, #ProductGroup ul.productList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-page__layout { flex-direction: column; }
  .product-gallery { max-width: none; }
  .product-main__title { font-size: 28px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 38px; }
  .product-grid, .category-teaser-grid, #ProductGroup ul.productList {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .slide, .slide-info, .hero__blob, .hero__ring, .marquee__track {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Login/register page (Security.ss) - a branded replacement for the
   generic silverstripe/login-forms page, used for both customer and any
   fallback admin login. */
.auth-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  font-family: var(--font-body);
  color: var(--fg);
  padding: 40px 20px;
}
.auth-box {
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  border-radius: 12px;
  padding: 40px 36px;
  box-shadow: 0 20px 50px -20px rgba(20, 15, 10, 0.18);
}
/* 2FA (silverstripe/mfa): its app wants 600px, so the box widens for it instead of the app spilling out of it */
.auth-box:has(.mfa-app) { max-width: 680px; }
.auth-box .mfa-app { min-width: 0; max-width: 100%; color: var(--fg); font-family: var(--font-body); }
.auth-box .mfa-app .mfa-app-title,
.auth-box .mfa-app .mfa-section-title,
.auth-box .mfa-app pre,
.auth-box .mfa-app .btn-secondary,
.auth-box .mfa-app .btn-link { color: var(--fg); }
.auth-box .mfa-app img { max-width: 100%; height: auto; }
.auth-box__logo { display: block; text-align: center; margin-bottom: 24px; }
.auth-box__logo img { height: 40px; width: auto; }
.auth-box__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px;
}
.auth-box__message {
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(224, 32, 26, 0.08);
  color: var(--accent);
  margin: 0 0 20px;
}
.auth-box__message--good { background: rgba(26, 158, 74, 0.1); color: #1a9e4a; }
.auth-box__content { font-size: 13.5px; color: var(--fg-dim); margin: 0 0 20px; }

.auth-box__oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.auth-box__oauth-btn:hover { border-color: var(--fg); background: var(--bg-panel); }
.auth-box__oauth-btn + .auth-box__oauth-btn { margin-top: 10px; }
.auth-box__oauth-btn--facebook:hover { border-color: #1877F2; }

.auth-box__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--fg-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-box__divider::before,
.auth-box__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-box form { margin: 0; }
.auth-box .field { margin-bottom: 18px; }
.auth-box form button,
.auth-box form input[type=submit] { width: 100%; text-align: center; }

@media (max-width: 480px) {
  .auth-box { padding: 32px 24px; }
}


/* Complaint / return request page (shop-wide form) */
.complaint [hidden] { display: none !important; }

.complaint__head { max-width: 760px; margin: 0 auto; padding: 64px 32px 16px; text-align: center; }
.complaint__head h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.complaint__head .typography p { font-size: 16.5px; line-height: 1.7; color: var(--fg-dim); margin: 0 0 12px; }

.complaint__panel { max-width: 760px; margin: 0 auto; padding: 16px 32px 96px; }

.complaint__form,
.complaint__done {
  border: 2px solid var(--fg);
  border-radius: 6px;
  background: var(--bg);
  padding: 28px;
}
.complaint__form { display: flex; flex-direction: column; gap: 18px; }

.complaint__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.complaint__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.complaint__field,
.complaint__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.complaint__label small { text-transform: none; letter-spacing: 0; font-weight: 400; }

.complaint__field input,
.complaint__field select,
.complaint__field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  border-radius: 0;
}
.complaint__field textarea { resize: vertical; }
.complaint__field input:focus,
.complaint__field select:focus,
.complaint__field textarea:focus { outline: none; border-color: var(--accent); }

.complaint__photos { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.complaint__upload { cursor: pointer; justify-content: center; text-align: center; }

.complaint__previews { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.complaint__preview { position: relative; width: 92px; height: 92px; border: 2px solid var(--fg); border-radius: 4px; }
.complaint__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.complaint__preview button {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.complaint__footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.complaint__footer .btn { justify-content: center; text-align: center; }
.complaint__status { font-size: 13.5px; }
.complaint__status.is-error { color: var(--accent); font-weight: 700; }
.complaint__note { margin: 0; font-size: 12.5px; color: var(--fg-dim); }
.complaint__note a { color: var(--accent); font-weight: 700; }

.complaint__done { text-align: center; }
.complaint__done h2 { font-family: var(--font-display); font-weight: 900; font-size: 26px; text-transform: uppercase; margin: 0 0 12px; }
.complaint__done p { color: var(--fg-dim); line-height: 1.7; margin: 0 0 20px; }
.complaint__done .btn { justify-content: center; }

@media (max-width: 768px) {
  .complaint__head { padding: 40px 16px 8px; }
  .complaint__head h1 { font-size: 30px; }
  .complaint__panel { padding: 8px 16px 64px; }
  .complaint__form, .complaint__done { padding: 20px 16px; }
  .complaint__grid { grid-template-columns: 1fr; }
  /* 16px stops iOS Safari zooming the page when a field is focused. */
  .complaint__field input,
  .complaint__field select,
  .complaint__field textarea { font-size: 16px; }
  .complaint__footer .btn { width: 100%; }
}


/* B2B / wholesale page (reuses the .complaint form styles) */
.b2b__steps {
  list-style: none;
  margin: 0 auto;
  padding: 16px 32px 8px;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.b2b__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 2px solid var(--fg);
  border-radius: 6px;
  background: var(--bg);
}
.b2b__step-num { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--accent); }
.b2b__step strong { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; line-height: 1.25; }
.b2b__step span:last-child { font-size: 13.5px; line-height: 1.55; color: var(--fg-dim); }

.b2b__form-title { font-family: var(--font-display); font-weight: 900; font-size: 22px; text-transform: uppercase; margin: 0; }

.b2b__catalog { max-width: var(--container); margin: 0 auto; padding: 24px 32px 96px; }
.b2b__catalog-head { text-align: center; margin-bottom: 8px; }
.b2b__catalog-head h2 { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1.1; text-transform: uppercase; margin: 0; }
.b2b__catalog-head h2 span { color: var(--accent); }
.b2b__locked { color: var(--fg-dim); font-size: 13px; }
.b2b__empty { text-align: center; color: var(--fg-dim); }

/* Wholesale block on product pages */
.wholesale-box {
  margin: 18px 0;
  padding: 16px 18px;
  border: 2px solid var(--fg);
  border-radius: 6px;
  background: var(--bg);
}
.wholesale-box__title { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; margin: 0 0 8px; }
.wholesale-box__rows { width: 100%; border-collapse: collapse; font-size: 14px; }
.wholesale-box__rows td { padding: 6px 0; border-top: 1px solid var(--line); }
.wholesale-box__rows td:last-child { text-align: right; font-weight: 700; color: var(--accent); }
.wholesale-box__note { margin: 10px 0 0; font-size: 12.5px; color: var(--fg-dim); line-height: 1.55; }
.wholesale-box__note a { color: var(--accent); font-weight: 700; }

.wholesale-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.wholesale-notice--info { border-color: var(--fg); color: var(--fg); font-weight: 400; }

@media (max-width: 900px) {
  .b2b__steps { grid-template-columns: repeat(2, 1fr); padding: 8px 16px; }
}
@media (max-width: 560px) {
  .b2b__steps { grid-template-columns: 1fr; }
  .b2b__catalog { padding: 16px 16px 64px; }
  .b2b__catalog-head h2 { font-size: 26px; }
}

.b2b__price-line { display: block; font-size: 13px; font-weight: 700; color: var(--accent); }

.b2b__step span:last-child strong { font-family: var(--font-body); font-size: inherit; text-transform: none; color: var(--fg); }
.complaint__done p strong { color: var(--fg); }

/* B2B page: status strip, category tiles, filters, pager */
.b2b__status {
  max-width: 1100px;
  margin: 8px auto 16px;
  padding: 16px 22px;
  border: 2px solid var(--fg);
  border-radius: 6px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.b2b__status--ok { border-color: #1a9e4a; }
.b2b__status-main { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--fg-dim); }
.b2b__status-main strong { color: var(--fg); font-size: 15px; }
.b2b__status-cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.b2b__status-cart .btn { padding: 12px 20px; justify-content: center; text-align: center; }

.b2b__tiles { margin: 24px 0 8px; }
.category-teaser.is-active { outline: 3px solid var(--accent); outline-offset: 2px; }

.b2b__filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; }
.b2b__filters input[type="search"],
.b2b__filters select {
  flex: 1 1 200px;
  min-width: 0;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg);
  border-radius: 0;
}
.b2b__filters .btn { justify-content: center; text-align: center; padding: 13px 22px; }
.b2b__count { margin: 12px 0 0; font-size: 13px; color: var(--fg-dim); }

.b2b__pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; font-size: 14px; }
.b2b__pager .btn { justify-content: center; }

@media (max-width: 768px) {
  .b2b__status { margin-left: 16px; margin-right: 16px; padding: 14px 16px; }
  .b2b__filters input[type="search"], .b2b__filters select { font-size: 16px; }
  .b2b__status-cart .btn { width: 100%; }
}


/* Firme i promo eventi: garment mockup builder (reuses .complaint form styles) */
.promo [hidden] { display: none !important; }
.promo .btn { justify-content: center; text-align: center; }

.promo-builder { max-width: 1180px; margin: 0 auto; padding: 24px 32px 96px; }
.promo-builder__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; margin-bottom: 32px; }

.promo-builder__sides { display: flex; gap: 8px; margin: 0 auto 12px; max-width: 620px; }
.promo-builder__side {
  flex: 1 1 0;
  padding: 12px 10px;
  background: var(--bg);
  border: 2px solid var(--fg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.promo-builder__side.is-active { background: var(--fg); color: #fff; }

.promo-builder__stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background:
    repeating-linear-gradient(135deg, rgba(20, 18, 16, 0.035) 0, rgba(20, 18, 16, 0.035) 1px, transparent 1px, transparent 14px),
    #efece7;
  border: 2px solid var(--fg);
  border-radius: 6px;
  overflow: hidden;
  touch-action: pan-y;
}
.promo-builder__garment { position: absolute; inset: 0; width: 100%; height: 100%; }

.promo-builder__empty {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--fg-dim);
  pointer-events: none;
}

.promo-builder__legend { max-width: 620px; margin: 10px auto 0; font-size: 12.5px; color: var(--fg-dim); }
.promo-builder__legend-box { display: inline-block; width: 14px; height: 10px; border: 1.5px dashed var(--accent); vertical-align: -1px; margin-right: 4px; }

.promo-builder__item {
  position: absolute;
  top: 0; left: 0;
  box-sizing: border-box;
  outline: 1px dashed transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.promo-builder__item:hover { outline-color: rgba(20, 18, 16, 0.4); }
.promo-builder__item.is-selected { outline: 2px dashed var(--accent); z-index: 4; }
.promo-builder__item.is-dragging { cursor: grabbing; z-index: 5; }
.promo-builder__item img { position: absolute; display: block; object-fit: contain; pointer-events: none; }

.promo-builder__handle {
  position: absolute;
  display: none;
  border: none;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}
.promo-builder__item.is-selected .promo-builder__handle { display: flex; }
.promo-builder__handle--rotate,
.promo-builder__handle--delete { top: -11px; width: 24px; height: 24px; border-radius: 50%; font-size: 15px; }
.promo-builder__handle--rotate { left: -11px; background: var(--fg); }
.promo-builder__handle--delete { right: -11px; background: var(--accent); }
.promo-builder__handle--resize { right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 2px; background: var(--fg); cursor: nwse-resize; touch-action: none; }

.promo-builder__controls { display: flex; flex-direction: column; gap: 18px; }
.promo-builder__block { border: 2px solid var(--fg); border-radius: 6px; padding: 18px; background: var(--bg); }
.promo-builder__block h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 14px; text-transform: uppercase; }

.promo-builder__garments { display: flex; gap: 8px; margin-bottom: 14px; }
.promo-builder__garment-opt { flex: 1 1 0; cursor: pointer; position: relative; }
.promo-builder__garment-opt input { position: absolute; opacity: 0; pointer-events: none; }
.promo-builder__garment-opt span {
  display: block; text-align: center; padding: 11px 8px;
  border: 2px solid var(--line-strong);
  font-weight: 700; font-size: 14px;
}
.promo-builder__garment-opt input:checked + span { border-color: var(--accent); color: var(--accent); }

.promo-builder__colors { display: flex; flex-wrap: wrap; gap: 8px; }
.promo-builder__color { position: relative; cursor: pointer; }
.promo-builder__color input { position: absolute; opacity: 0; pointer-events: none; }
.promo-builder__color span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(20, 18, 16, 0.25); }
.promo-builder__color input:checked + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.promo-builder__color em { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-style: normal; font-size: 11px; white-space: nowrap; background: var(--fg); color: #fff; padding: 2px 6px; border-radius: 3px; opacity: 0; pointer-events: none; z-index: 3; }
.promo-builder__color:hover em { opacity: 1; }

.promo-builder__sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.promo-builder__sizes label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fg-dim); text-align: center; }
.promo-builder__sizes input,
.promo-builder__dims input {
  width: 100%; box-sizing: border-box; min-width: 0;
  background: var(--bg); border: 2px solid var(--fg);
  padding: 9px 6px; font-family: var(--font-body); font-size: 15px; color: var(--fg); text-align: center; border-radius: 0;
}
.promo-builder__sizes input:focus, .promo-builder__dims input:focus { outline: none; border-color: var(--accent); }
.promo-builder__total { margin: 10px 0 0; font-size: 14px; }

.promo-builder__upload { width: 100%; cursor: pointer; }
.promo-builder__hint { margin: 10px 0 0; font-size: 12.5px; color: var(--fg-dim); }

.promo-builder__panel { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.promo-builder__panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.promo-builder__panel-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-builder__class { color: var(--accent); font-weight: 700; white-space: nowrap; }
.promo-builder__dims { display: flex; gap: 10px; margin-bottom: 10px; }
.promo-builder__dims label { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-dim); }
.promo-builder__presets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.promo-builder__presets .btn, .promo-builder__actions .btn { padding: 9px 10px; font-size: 12px; }
.promo-builder__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.promo-builder__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.promo-builder__row { display: flex; align-items: center; gap: 10px; padding: 6px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; background: rgba(20, 18, 16, 0.03); }
.promo-builder__row.is-selected { border-color: var(--accent); }
.promo-builder__row img { width: 40px; height: 40px; object-fit: contain; background: #efece7; border-radius: 3px; flex: 0 0 auto; }
.promo-builder__row span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.promo-builder__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-builder__row em { font-style: normal; color: var(--fg-dim); }

.promo-builder__autosave { margin: 12px 0 0; font-size: 12px; color: var(--fg-dim); }
.promo-builder__autosave.is-warn { color: var(--accent); font-weight: 700; }
.promo-builder__restored { margin: 8px 0 0; padding: 8px 12px; border: 2px solid #1a9e4a; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: #1a9e4a; }

.promo-builder__form { max-width: 820px; margin: 0 auto; }
.promo-builder .complaint__done { max-width: 820px; margin: 0 auto; }

@media (max-width: 900px) {
  .promo-builder { padding: 16px 16px 64px; }
  .promo-builder__grid { grid-template-columns: 1fr; gap: 20px; }
  .promo-builder__handle--rotate, .promo-builder__handle--delete { width: 30px; height: 30px; top: -14px; font-size: 17px; }
  .promo-builder__handle--rotate { left: -14px; }
  .promo-builder__handle--delete { right: -14px; }
  .promo-builder__handle--resize { width: 22px; height: 22px; right: -9px; bottom: -9px; }
  .promo-builder__sizes input, .promo-builder__dims input { font-size: 16px; }
}

/* Promo builder: multiple colours, each with its own size quantities */
.promo-builder__hint--top { margin: 0 0 10px; }
.promo-builder__rows { display: grid; gap: 10px; margin-top: 12px; }
.promo-builder__crow { border: 1px solid rgba(20, 18, 16, 0.15); border-radius: 10px; padding: 10px; }
.promo-builder__crow.is-preview { border-color: var(--accent); }
.promo-builder__crow-name { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 0 8px; margin: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.promo-builder__crow-name .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(128,128,128,.6); flex: none; }
.promo-builder__crow-name em { margin-left: auto; font-style: normal; opacity: .7; font-size: .85em; }
.promo-builder__crow .promo-builder__sizes { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.promo-builder__both { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .9em; cursor: pointer; }

.promo-builder__dpi { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: rgba(224, 32, 26, 0.08); border: 1px solid var(--accent); color: var(--fg); font-size: 13px; line-height: 1.4; }
.promo-builder__dpi[hidden] { display: none; }

/* B2B quick-order grid (product page, approved members) */
.b2b-matrix { margin: 16px 0 20px; padding: 16px; border: 1px solid rgba(20, 18, 16, 0.15); border-radius: 10px; }
.b2b-matrix__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.b2b-matrix__table { border-collapse: collapse; width: 100%; min-width: 320px; }
.b2b-matrix__table th, .b2b-matrix__table td { padding: 6px 4px; text-align: center; font-size: 14px; }
.b2b-matrix__table thead th, .b2b-matrix__table tr:first-child th { font-weight: 700; }
.b2b-matrix__table th[scope="row"] { text-align: left; padding-right: 10px; white-space: nowrap; }
.b2b-matrix__table input { width: 100%; min-width: 46px; max-width: 72px; padding: 8px 4px; text-align: center; border: 1px solid rgba(20, 18, 16, 0.25); border-radius: 6px; background: #fff; color: var(--fg); font: inherit; }
.b2b-matrix__table input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.b2b-matrix__table .is-empty { opacity: 0.35; }
.b2b-matrix__rowsum { font-weight: 700; }
.b2b-matrix__summary { margin: 12px 0; font-size: 15px; }
.b2b-matrix__hint { display: block; margin-top: 4px; font-size: 12.5px; opacity: 0.7; }
.b2b-matrix__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b2b-matrix__status { font-size: 14px; }
.b2b-matrix__status.is-ok { color: #1a7f37; }
.b2b-matrix__status.is-error { color: var(--accent); }

/* Promo page: gallery of finished jobs */
.promo-gallery { margin: 8px 0 36px; }
.promo-gallery__title { margin: 0 0 16px; }
.promo-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.promo-gallery__item { margin: 0; }
.promo-gallery__item a { display: block; overflow: hidden; border-radius: 10px; background: rgba(20, 18, 16, 0.06); }
.promo-gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.35s ease; }
.promo-gallery__item a:hover img { transform: scale(1.04); }
.promo-gallery__item figcaption { margin-top: 8px; font-size: 14px; line-height: 1.35; opacity: 0.8; }
@media (max-width: 600px) {
  .promo-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Kontakt page */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.contact__title { margin: 0 0 16px; font-size: 22px; }
.contact__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.contact__list li { display: grid; gap: 2px; font-size: 16px; }
.contact__list li span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.6; }
.contact__list a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact__note { font-size: 14px; line-height: 1.5; opacity: 0.75; }
.contact__note a { color: var(--fg); text-decoration: underline; }
@media (max-width: 800px) { .contact__grid { grid-template-columns: 1fr; gap: 28px; } }

/* Floating Viber / WhatsApp buttons */
.chat-fab { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.chat-fab__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transition: transform 0.15s ease; }
.chat-fab__btn:hover { transform: translateY(-2px); }
.chat-fab__btn--wa { background: #1fa855; }
.chat-fab__btn--viber { background: #7360f2; }
@media (max-width: 600px) { .chat-fab__btn span { display: none; } .chat-fab__btn { padding: 13px; } }

/* Checkout: optional account creation */
.field.membership-field[hidden], .field.membership-email[hidden] { display: none; }
#CreateAccountToggle_Holder { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
#CreateAccountToggle_Holder input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
#CreateAccountToggle_Holder label { margin: 0; font-weight: 600; font-size: 13.5px; cursor: pointer; }

/* Order thank-you page and order overview (checkout + My Account) */
.order-thanks { max-width: 820px; margin: 0 auto; padding: 8px 16px 60px; }
.order-thanks__head { text-align: center; padding: 28px 0 8px; }
.order-thanks__check { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--fg); color: #fff; margin-bottom: 18px; box-shadow: 0 0 0 8px rgba(224, 32, 26, 0.12); }
.order-thanks__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.order-thanks__title { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(28px, 5vw, 42px); line-height: 1.1; }
.order-thanks__lead { max-width: 560px; margin: 0 auto; color: var(--fg-dim); font-size: 16px; line-height: 1.6; }
.order-thanks__lead strong { color: var(--fg); }

.order-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 30px 0 26px; padding: 0; }
.order-steps__item { border-top: 4px solid rgba(20, 15, 10, 0.12); padding-top: 10px; display: grid; gap: 2px; font-size: 13px; color: var(--fg-dim); }
.order-steps__item strong { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-dim); }
.order-steps__item.is-done { border-top-color: var(--accent); }
.order-steps__item.is-done strong { color: var(--fg); }

.order-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.order-card { background: var(--bg-panel); border-radius: 14px; padding: 16px 18px; }
.order-card__label, .order-items__label, .order-note span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 6px; }
.order-card__value { font-size: 15px; line-height: 1.55; }

.order-items { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 6px; }
.order-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.order-item:first-of-type { border-top: 0; }
.order-item__thumb { width: 64px; height: 64px; border-radius: 12px; background: var(--bg-panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.order-item__thumb img { width: 56px; height: auto; display: block; }
.order-item__info { display: grid; gap: 1px; line-height: 1.4; }
.order-item__info span { font-size: 13px; color: var(--fg-dim); }
.order-item__total { font-weight: 700; white-space: nowrap; }
.order-line { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-dim); }
.order-total { display: flex; justify-content: space-between; align-items: center; margin: 8px -20px 0; padding: 18px 22px; background: var(--fg); color: #fff; border-radius: 0 0 16px 16px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.order-total strong { font-size: 24px; letter-spacing: 0; }
.order-note { margin-top: 16px; padding: 14px 16px; background: var(--bg-panel); border-left: 4px solid var(--accent); border-radius: 8px; font-size: 14px; line-height: 1.5; }

.order-thanks__next { margin: 22px 0 0; text-align: center; color: var(--fg-dim); font-size: 14px; line-height: 1.6; }
.order-thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.order-thanks__cancel { margin-top: 26px; text-align: center; }
.order-thanks__cancel form { display: inline-block; }
.order-thanks__cancel .action, .order-thanks__cancel input[type="submit"], .order-thanks__cancel button { background: none !important; color: var(--fg-dim) !important; border: 0 !important; box-shadow: none !important; text-decoration: underline; font-size: 13px !important; padding: 6px 10px !important; cursor: pointer; }

.account-order__title { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); }
.account-order__status { margin: 0 0 20px; color: var(--fg-dim); }
.account-order__status strong { color: var(--fg); }

@media (max-width: 640px) {
  .order-cards { grid-template-columns: 1fr; }
  .order-steps { gap: 6px; }
  .order-steps__item span { display: none; }
  .order-item { grid-template-columns: 56px 1fr auto; gap: 10px; }
  .order-item__thumb { width: 56px; height: 56px; }
}

/* Kontakt page: contained width, card layout, optional map (overrides the first version above) */
.contact__grid { max-width: 1080px; margin: 0 auto; padding: 24px 32px 96px; gap: 44px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.contact__list { gap: 10px; }
.contact__list li { background: var(--bg-panel); border-radius: 12px; padding: 14px 18px; }
.contact__list li span { margin-bottom: 2px; }
.contact__map { margin: 0 0 18px; border-radius: 14px; overflow: hidden; background: var(--bg-panel); }
.contact__map iframe { display: block; width: 100%; height: 300px; border: 0; }
.contact__map-placeholder { display: grid; gap: 12px; justify-items: start; padding: 22px 18px; font-size: 14px; line-height: 1.5; color: var(--fg-dim); }
.contact__map-link { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
@media (max-width: 800px) { .contact__grid { padding: 16px 16px 72px; gap: 28px; } }

/* Kontakt: map is always visible */
.contact__map { margin: 0 0 10px; }
.contact__map iframe { height: 320px; }
.contact__map-link { display: inline-block; margin: 0 0 20px; }

/* Kontakt: both columns end on the same line */
.contact__grid { align-items: stretch; padding-bottom: 32px; }
.contact__details, .contact__form-wrap { display: flex; flex-direction: column; min-width: 0; }
.contact__details .contact__map { flex: 1 1 auto; min-height: 280px; margin: 0; display: flex; }
.contact__details .contact__map iframe { flex: 1 1 auto; height: auto; min-height: 280px; }
.contact__form-wrap .complaint__form { flex: 1 1 auto; }
.contact__form-wrap .complaint__field:has(textarea) { flex: 1 1 auto; display: flex; flex-direction: column; }
.contact__form-wrap textarea { flex: 1 1 auto; min-height: 120px; resize: vertical; }
.contact__list li .contact__map-link { display: inline-block; margin: 8px 0 0; }
.contact__note--center { max-width: 1080px; margin: 0 auto 80px; padding: 0 32px; text-align: center; }
@media (max-width: 800px) {
  .contact__details .contact__map { min-height: 260px; }
  .contact__note--center { padding: 0 16px; margin-bottom: 56px; }
}

/* Cookie consent banner + settings modal */
.product-main__orders { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--fg-dim); }
.cookie-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; width: min(880px, calc(100% - 32px)); display: flex; align-items: center; gap: 22px; padding: 18px 22px; background: var(--fg); color: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32); }
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-banner__text { flex: 1 1 auto; font-size: 14px; line-height: 1.55; color: #d9d3ca; }
.cookie-banner__text strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.cookie-banner__text p { margin: 0; }
.cookie-banner__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.cookie-banner .btn { padding: 11px 18px; font-size: 12.5px; }
.cookie-banner .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.cookie-banner .btn-outline:hover { border-color: #fff; }
.cookie-banner__link { background: none; border: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; }
body.cookie-open .chat-fab, body.cookie-open .scroll-top { display: none; }

.cookie-modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 15, 10, 0.55); }
.cookie-modal__box { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: var(--fg); border-radius: 18px; padding: 28px 28px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); }
.cookie-modal__box h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; }
.cookie-modal__lead { margin: 0 0 18px; color: var(--fg-dim); font-size: 14px; line-height: 1.55; }
.cookie-modal__x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--fg-dim); }
.cookie-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.cookie-opt strong { display: block; font-size: 15px; margin-bottom: 2px; }
.cookie-opt span { font-size: 13px; line-height: 1.5; color: var(--fg-dim); }
.cookie-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-switch i { position: absolute; inset: 0; border-radius: 999px; background: #cfc9c0; transition: background 0.2s ease; }
.cookie-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.cookie-switch input:checked + i { background: var(--accent); }
.cookie-switch input:checked + i::after { transform: translateX(20px); }
.cookie-switch input:disabled + i { background: var(--fg); opacity: 0.55; }
.cookie-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.cookie-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.cookie-modal__policy { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--fg-dim); text-decoration: underline; }
body.cookie-modal-open { overflow: hidden; }

@media (max-width: 720px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; bottom: 12px; padding: 16px; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
  .cookie-banner__link { width: 100%; text-align: center; }
}

/* Policy page table */
.cookie-table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 14px; }
.cookie-table th, .cookie-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie-table th { background: var(--bg-panel); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 700px) { .cookie-table { display: block; overflow-x: auto; } }

/* Footer: cookie settings link looks like the other links */
.site-footer__cookie { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.site-footer__cookie:hover { text-decoration: underline; }

/* Dokumenti page */
.docs__grid { max-width: 1000px; margin: 8px auto 0; padding: 16px 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.docs__card { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: var(--bg-panel); border: 1px solid transparent; border-radius: 16px; color: var(--fg); text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.docs__card:hover { transform: translateY(-3px); border-color: var(--fg); box-shadow: 0 12px 30px rgba(20, 15, 10, 0.08); }
.docs__num { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent); }
.docs__title { font-family: var(--font-display); font-size: 18px; line-height: 1.25; }
.docs__desc { font-size: 14px; line-height: 1.55; color: var(--fg-dim); flex: 1 1 auto; }
.docs__open { margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.docs__firm { max-width: 1000px; margin: 8px auto 90px; padding: 0 32px; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--fg-dim); }
.docs__firm a { color: var(--fg); text-decoration: underline; }
@media (max-width: 700px) { .docs__grid { grid-template-columns: 1fr; padding: 16px; } .docs__firm { padding: 0 16px; } }

/* Discount game (MAHMIĆMANIA) */

.mg { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgba(10, 12, 20, 0.86); overflow-y: auto; }
.mg[hidden] { display: none; }
html.mg-open { overflow: hidden; }
.mg__box { position: relative; width: 100%; max-width: 640px; max-height: 100%; overflow-y: auto; padding: 22px 18px 20px; border-radius: 22px; background: #fff; text-align: center; }
.mg__close { position: absolute; top: 8px; right: 10px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(20, 15, 10, 0.08); color: var(--fg); font-size: 26px; line-height: 1; cursor: pointer; }
.mg__close:hover { background: rgba(20, 15, 10, 0.16); }
.mg__screen[hidden] { display: none; }
.mg__screen h2 { margin: 6px 0 10px; font-family: var(--font-display); font-size: clamp(20px, 5vw, 28px); line-height: 1.15; }
.mg__heads { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; }
.mg__heads img { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); }
.mg__heads span { font-family: var(--font-display); font-weight: 900; color: var(--accent); }
.mg__lead { max-width: 460px; margin: 0 auto 14px; color: var(--fg-dim); font-size: 15px; line-height: 1.6; }
.mg__rules { display: inline-block; margin: 0 0 16px; padding: 0 0 0 18px; text-align: left; font-size: 15px; line-height: 1.7; }
.mg__msg { max-width: 460px; margin: 0 auto 14px; padding: 10px 14px; border-radius: 12px; background: #fff3e6; color: #8a3b00; font-size: 14px; }
.mg__go { min-width: 200px; }
.mg__go:disabled { opacity: 0.6; cursor: wait; }
.mg__hud { display: flex; align-items: center; justify-content: space-between; margin: 0 auto 8px; padding: 0 44px 0 4px; font-size: 15px; }
.mg__shirts { display: inline-flex; gap: 6px; }
.mg__shirts i { width: 22px; height: 22px; border-radius: 6px; background: #ddd; }
.mg__shirts i.on { background: var(--accent); }
.mg__canvas { display: block; margin: 0 auto; border-radius: 16px; touch-action: none; cursor: crosshair; background: #37a049; }
.mg__quote { margin: 0 0 14px; font-family: var(--font-display); font-size: 16px; color: var(--fg); }
.mg__percent { margin: 0 auto 16px; padding: 18px 10px; border-radius: 18px; background: var(--fg); color: #fff; }
.mg__percent span { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 12vw, 72px); line-height: 1; color: #ffe066; }
.mg__percent small { display: block; margin-top: 6px; color: #d9d3ca; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.mg__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }


/* ===== Collaboration page (MAHMIĆMANIA x BE SHIRT) ===== */
.cm { --cm-yellow: #ffd21f; --cm-dark: #0f0e0d; --cm-cream: #f6f1ea; overflow-x: clip; }
.cm h1, .cm h2 { font-variant-ligatures: none; }
.cm-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.cm-kicker { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.cm-kicker--yellow { color: var(--cm-yellow); }
.cm-h2 { margin: 0 0 18px; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: 0.02em; }
.cm-h2--light { color: #fff; }
.cm-placeholder { display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 24px; border: 2px dashed rgba(128, 128, 128, 0.5); border-radius: 20px; text-align: center; font-size: 14px; opacity: 0.7; }

.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border: 1.5px solid transparent; border-radius: 999px; font-family: var(--font-body); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, box-shadow 0.25s; }
.cm-btn--yellow { background: var(--cm-yellow); color: #141210; }
.cm-btn--yellow:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(255, 210, 31, 0.6); }
.cm-btn--ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.cm-btn--ghost:hover { background: #fff; color: #141210; }
.cm-btn--lg { padding: 20px 44px; font-size: 16px; }
.cm-btn__badge { padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; letter-spacing: 0.04em; }

/* hero */
.cm-hero { position: relative; overflow: hidden; background: var(--cm-dark); color: #fff; }
.cm-hero__glow { position: absolute; top: 50%; right: -140px; width: 760px; height: 760px; transform: translateY(-50%); background: radial-gradient(circle, rgba(255, 210, 31, 0.4) 0%, rgba(255, 210, 31, 0.12) 42%, transparent 68%); pointer-events: none; }
.cm-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.cm-title { margin: 0 0 20px; font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 5vw, 64px); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: #fff; }
.cm-tagline { max-width: 480px; margin: 0 0 32px; font-size: 19px; line-height: 1.6; color: #cfc7bd; }
.cm-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.cm-hero__art { display: flex; justify-content: center; }
.cm-hero__art img { display: block; width: auto; max-width: 100%; max-height: 460px; height: auto; transform: rotate(3deg); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); transition: transform 0.5s var(--ease); }
.cm-hero__art img:hover { transform: rotate(0deg) scale(1.03); }

.cm-marquee { overflow: hidden; background: var(--cm-yellow); color: #141210; }
.cm-marquee__track { display: flex; width: max-content; align-items: center; padding: 14px 0; animation: cm-scroll 42s linear infinite; }
.cm-marquee__track span { flex: none; font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: 0.12em; white-space: nowrap; }
.cm-marquee__track i { flex: none; margin: 0 26px; font-style: normal; font-size: 12px; }
@keyframes cm-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cm-marquee__track { animation: none; } }

/* about Aldin */
.cm-about { padding: 96px 0; background: var(--cm-cream); }
.cm-about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.cm-about__photo { position: relative; display: flex; align-items: flex-end; width: 100%; max-width: 460px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 32px; background: linear-gradient(160deg, #ffe066 0%, #ffbf00 100%); box-shadow: 0 30px 60px -30px rgba(120, 80, 0, 0.55); }
.cm-about__photo::before { content: ''; position: absolute; top: 4%; left: 50%; width: 78%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 68%); }
.cm-about__photo img { position: relative; display: block; width: 100%; height: auto; }
.cm-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.cm-roles li { padding: 7px 16px; border: 1.5px solid #141210; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cm-prose { max-width: 540px; font-size: 18px; line-height: 1.75; color: #3a352f; }
.cm-prose p { margin: 0 0 14px; }
.cm-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.cm-social__label { margin-right: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6259; }
.cm-social__link { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #141210; color: #fff; transition: transform 0.25s var(--ease), background 0.25s, color 0.25s; }
.cm-social__link:hover { background: var(--accent); transform: translateY(-3px); }

/* story */
.cm-story { padding: 104px 0; background: #fff; }
.cm-story__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.cm-story__head { position: sticky; top: 120px; }
.cm-story__head::before { content: '\201C'; display: block; margin-bottom: -6px; font-family: Georgia, serif; font-size: 150px; line-height: 0.8; color: var(--cm-yellow); }
.cm-story__body p { margin: 0 0 22px; font-size: 18px; line-height: 1.8; color: #3a352f; }
.cm-story__body p:first-child { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.5; font-weight: 600; color: #141210; }
.cm-story__body p:last-child { margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.cm-story__body p:last-child strong { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--accent); }

/* game */
.cm-game { padding: 0 0 96px; background: #fff; }
.cm-game__card { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 56px; overflow: hidden; border-radius: 36px; background: linear-gradient(135deg, #1f1b17 0%, #0f0e0d 70%); color: #fff; }
.cm-game__card::after { content: ''; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 32, 26, 0.45), transparent 68%); pointer-events: none; }
.cm-game__card > * { position: relative; z-index: 1; }
.cm-game__art { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #ffe066, #ffb400); }
.cm-game__art img { position: absolute; bottom: 0; height: auto; -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); }
.cm-game__art img:first-child { left: 2%; width: 60%; }
.cm-game__art img:last-child { right: 0; width: 56%; }
.cm-game__intro { max-width: 560px; margin: 0 0 22px; font-size: 17px; line-height: 1.7; color: #cfc7bd; }
.cm-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.cm-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); font-size: 14px; font-weight: 600; }
.cm-steps b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cm-yellow); color: #141210; font-size: 13px; }
.cm-game__result { display: inline-block; margin: 0 0 20px; padding: 14px 20px; border-radius: 14px; background: rgba(255, 210, 31, 0.14); font-size: 15px; line-height: 1.6; }
.cm-game__result strong { color: var(--cm-yellow); }
.cm-game__note { margin: 16px 0 0; font-size: 13px; color: #ffcf8a; }
.cm-soon { display: inline-block; padding: 14px 30px; border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.2em; }

/* products */
.cm-products { padding: 8px 0 120px; background: #fff; scroll-margin-top: 90px; }
.cm-products__head { margin-bottom: 30px; }
.cm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 24px; border: 2px dashed var(--line-strong); border-radius: 24px; text-align: center; }
.cm-empty strong { font-family: var(--font-display); font-size: 20px; }
.cm-empty span { color: var(--fg-dim); }

@media (max-width: 900px) {
  .cm-inner { padding: 0 20px; }
  .cm-hero__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; padding-bottom: 48px; }
  .cm-hero__glow { top: auto; bottom: -160px; right: 50%; transform: translateX(50%); width: 560px; height: 560px; }
  .cm-hero__art img { max-height: 320px; }
  .cm-cta .cm-btn { flex: 1 1 auto; }
  .cm-about { padding: 56px 0; }
  .cm-about__grid, .cm-story__grid { grid-template-columns: 1fr; gap: 32px; }
  .cm-about__photo { max-width: 380px; margin: 0 auto; }
  .cm-story { padding: 60px 0; }
  .cm-story__head { position: static; }
  .cm-story__head::before { font-size: 100px; }
  .cm-game { padding-bottom: 56px; }
  .cm-game__card { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px; border-radius: 26px; text-align: center; }
  .cm-game__art { max-width: 260px; }
  .cm-game__intro { margin-left: auto; margin-right: auto; }
  .cm-steps { justify-content: center; }
  .cm-products { padding-bottom: 72px; }
}
.cm-hero__glow { background: radial-gradient(closest-side, rgba(255, 210, 31, 0.38) 0%, rgba(255, 210, 31, 0.12) 55%, rgba(255, 210, 31, 0) 100%); }
.cm-story__head .cm-h2 { font-size: clamp(24px, 2.7vw, 36px); overflow-wrap: anywhere; }
.cm-game__art img:first-child { left: 6%; width: 52%; bottom: -2%; }
.cm-game__art img:last-child { right: 4%; width: 48%; bottom: -2%; }
.cm-steps { gap: 8px; }
.cm-steps li { gap: 8px; padding: 8px 14px 8px 8px; font-size: 13px; }
.cm-story__head .cm-h2 { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 900px) {
  .cm-story__head .cm-h2 { font-size: clamp(20px, 7.4vw, 36px); }
}
/* the yellow glow now belongs to the artwork and moves with it */
.cm-hero__glow { display: none; }
.cm-hero__art { position: relative; }
.cm-hero__art::before { content: ''; position: absolute; top: 50%; left: 50%; width: 125%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 31, 0.42) 0%, rgba(255, 210, 31, 0.14) 55%, rgba(255, 210, 31, 0) 100%); pointer-events: none; }
.cm-hero__art img { position: relative; }

/* creator credit under the hero title */
.cm-creator { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 8px 22px 8px 8px; border: 1.5px solid rgba(255, 210, 31, 0.55); border-radius: 999px; background: rgba(255, 210, 31, 0.1); }
.cm-creator__avatar { position: relative; flex: none; width: 58px; height: 58px; overflow: hidden; border-radius: 50%; background: linear-gradient(160deg, #ffe066, #ffbf00); }
.cm-creator__avatar img { position: absolute; top: -4px; left: -22px; width: 102px; height: auto; max-width: none; }
.cm-creator__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.cm-creator__text small { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cm-yellow); }
.cm-creator__text strong { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 0.02em; }
@media (max-width: 900px) { .cm-creator__text strong { font-size: 15px; } }

/* ===== game teaser: a live little scene from the game + prize ladder ===== */
.cm-game__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 40px 48px 40px 40px; }
.cm-arena { position: relative; width: 100%; max-width: 460px; aspect-ratio: 5 / 6; margin: 0 auto; overflow: hidden; border-radius: 28px; background: #37a049; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); transform: rotate(-1.5deg); }
.cm-arena__stands { position: absolute; inset: 0 0 auto 0; height: 26%; background: radial-gradient(circle at 10px 10px, #ffd21f 4px, transparent 5px) 0 0 / 28px 22px, radial-gradient(circle at 24px 20px, #e0201a 4px, transparent 5px) 0 0 / 28px 22px, radial-gradient(circle at 17px 5px, #f4f0ea 4px, transparent 5px) 0 0 / 28px 22px, linear-gradient(#1b2a4a, #34528a); }
.cm-arena__board { position: absolute; top: 26%; left: 0; right: 0; display: flex; align-items: center; justify-content: space-around; height: 7%; background: #12233f; }
.cm-arena__board img { height: 46%; width: auto; }
.cm-arena__pitch { position: absolute; inset: 33% 0 0 0; background: repeating-linear-gradient(#37a049 0 12.5%, #2f8a3f 12.5% 25%); }
.cm-arena__pitch::after { content: ''; position: absolute; left: 50%; top: 55%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, 0.45); border-radius: 50%; }
.cm-arena__runner { position: absolute; top: 34%; left: 6%; width: 30%; height: auto; animation: cm-run 7s linear infinite; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3)); }
@keyframes cm-run {
  0% { left: 6%; transform: scaleX(1); }
  48% { left: 62%; transform: scaleX(1); }
  50% { left: 62%; transform: scaleX(-1); }
  98% { left: 6%; transform: scaleX(-1); }
  100% { left: 6%; transform: scaleX(1); }
}
.cm-arena__aldin { position: absolute; bottom: 2%; left: 50%; width: 36%; height: auto; transform: translateX(-50%); animation: cm-bob 1.2s ease-in-out infinite; }
@keyframes cm-bob { 50% { transform: translateX(-50%) translateY(-5px); } }
.cm-arena__bubble { position: absolute; bottom: 42%; left: 4%; max-width: 62%; padding: 9px 14px; border: 3px solid #141210; border-radius: 16px; background: #fff; color: #141210; font-size: clamp(11px, 1.5vw, 15px); font-weight: 800; line-height: 1.2; }
.cm-arena__bubble::after { content: ''; position: absolute; bottom: -12px; left: 62%; width: 14px; height: 14px; transform: rotate(45deg); border-right: 3px solid #141210; border-bottom: 3px solid #141210; background: #fff; }

.cm-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.cm-tiers li { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
.cm-tiers b { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; color: var(--cm-yellow); }
.cm-tiers span { font-size: 12px; line-height: 1.35; color: #cfc7bd; }
.cm-tiers li:nth-child(3) { border-color: rgba(255, 210, 31, 0.4); }
.cm-tiers li:last-child { position: relative; border-color: var(--cm-yellow); background: linear-gradient(160deg, rgba(255, 210, 31, 0.22), rgba(224, 32, 26, 0.2)); box-shadow: 0 0 30px -8px rgba(255, 210, 31, 0.6); }
.cm-tiers li:last-child b { color: #fff; }
.cm-tiers li:last-child::after { content: 'LEGENDA'; position: absolute; top: -9px; right: 10px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }

@media (prefers-reduced-motion: reduce) {
  .cm-arena__runner, .cm-arena__ring, .cm-arena__shot, .cm-arena__lift, .cm-arena__lift svg, .cm-arena__pop, .cm-arena__aldin { animation: none; }
  .cm-arena__shot, .cm-arena__ring { opacity: 0; }
  .cm-arena__pop--hit { opacity: 1; top: 40%; left: 26%; }
}
@media (max-width: 900px) {
  .cm-game__card { grid-template-columns: 1fr; gap: 28px; padding: 22px 20px 30px; text-align: center; }
  .cm-arena { max-width: 380px; transform: none; }
  .cm-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
}
.cm-arena__stands { background: radial-gradient(circle at 7px 7px, #ffd21f 2.6px, transparent 3.4px) 0 0 / 20px 16px, radial-gradient(circle at 17px 14px, #e0201a 2.6px, transparent 3.4px) 0 0 / 20px 16px, radial-gradient(circle at 12px 3px, #f4f0ea 2.6px, transparent 3.4px) 0 0 / 20px 16px, linear-gradient(#1b2a4a, #34528a); }
.cm-arena__runner { top: 31%; width: 25%; }
.cm-arena__aldin { width: 31%; bottom: 1%; }
.cm-arena__bubble { bottom: 24%; left: 3%; max-width: 34%; }
.cm-arena__bubble::after { left: auto; right: 16%; }

/* teaser loop (7s): first shirt misses ("Promaši ga, brete!"), second one catches him ("UHVAĆEN!") */
.cm-arena__ring { position: absolute; top: 41%; width: 16%; aspect-ratio: 0.5; border: 3px solid #ffe066; border-radius: 50%; opacity: 0; }
.cm-arena__ring--a { left: 22%; animation: cm-ring-a 7s linear infinite; }
.cm-arena__ring--b { left: 29%; animation: cm-ring-b 7s linear infinite; }
.cm-arena__shot { position: absolute; bottom: 20%; width: 15%; opacity: 0; }
.cm-arena__shot--a { left: 47%; animation: cm-shot-a 7s linear infinite; }
.cm-arena__shot--b { left: 47%; animation: cm-shot-b 7s linear infinite; }
.cm-arena__shot--a .cm-arena__lift { animation: cm-lift-a 7s infinite; }
.cm-arena__shot--b .cm-arena__lift { animation: cm-lift-b 7s infinite; }
.cm-arena__lift svg { display: block; width: 100%; height: auto; }
.cm-arena__shot--a svg { animation: cm-spin-a 7s linear infinite; }
.cm-arena__shot--b svg { animation: cm-spin-b 7s linear infinite; }
.cm-arena__pop { position: absolute; font-family: var(--font-display); font-weight: 900; font-size: clamp(16px, 2.4vw, 24px); -webkit-text-stroke: 5px #141210; paint-order: stroke fill; opacity: 0; }
.cm-arena__pop--miss { top: 43%; left: 12%; color: #fff; animation: cm-pop-a 7s ease-out infinite; }
.cm-arena__pop--hit { top: 40%; left: 26%; color: #ffe066; animation: cm-pop-b 7s ease-out infinite; }

@keyframes cm-ring-a { 0%, 1% { opacity: 0; transform: scale(1.5); } 4% { opacity: 1; transform: scale(1.5); } 32% { opacity: 1; transform: scale(1); } 34%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cm-ring-b { 0%, 51% { opacity: 0; transform: scale(1.5); } 54% { opacity: 1; transform: scale(1.5); } 82% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cm-shot-a { 0%, 1% { left: 47%; opacity: 0; } 2% { left: 47%; opacity: 1; } 32% { left: 22.5%; opacity: 1; } 35%, 100% { left: 22.5%; opacity: 0; } }
@keyframes cm-shot-b { 0%, 51% { left: 47%; opacity: 0; } 52% { left: 47%; opacity: 1; } 82% { left: 29.5%; opacity: 1; } 84%, 100% { left: 29.5%; opacity: 0; } }
@keyframes cm-lift-a { 0%, 2% { transform: translateY(0); animation-timing-function: ease-out; } 17% { transform: translateY(-330%); animation-timing-function: ease-in; } 32%, 100% { transform: translateY(-190%); } }
@keyframes cm-lift-b { 0%, 52% { transform: translateY(0); animation-timing-function: ease-out; } 67% { transform: translateY(-330%); animation-timing-function: ease-in; } 82%, 100% { transform: translateY(-190%); } }
@keyframes cm-spin-a { 0%, 2% { transform: rotate(0deg) scale(1); } 32%, 100% { transform: rotate(360deg) scale(0.6); } }
@keyframes cm-spin-b { 0%, 52% { transform: rotate(0deg) scale(1); } 82%, 100% { transform: rotate(360deg) scale(0.6); } }
@keyframes cm-pop-a { 0%, 32% { opacity: 0; transform: translateY(8px) scale(0.6); } 37% { opacity: 1; transform: scale(1.1); } 46% { opacity: 1; transform: translateY(-10px) scale(1); } 52%, 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes cm-pop-b { 0%, 82% { opacity: 0; transform: translateY(8px) scale(0.6); } 87% { opacity: 1; transform: scale(1.15); } 96% { opacity: 1; transform: translateY(-12px) scale(1); } 100% { opacity: 0; transform: translateY(-22px); } }
/* speech bubble sits beside Aldin's head with its tail pointing at his mouth */
.cm-arena__bubble { top: 63%; bottom: auto; left: 2.5%; max-width: 31%; }
.cm-arena__bubble::after { top: 50%; bottom: auto; left: auto; right: -10px; margin-top: -7px; transform: rotate(-45deg); border-right: 3px solid #141210; border-bottom: 3px solid #141210; }
.mg [hidden] { display: none !important; }

/* game card proportions: a calmer title, daily note */
.cm-game__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.cm-game__body .cm-h2 { font-size: clamp(24px, 2.7vw, 36px); line-height: 1.15; letter-spacing: 0.01em; margin-bottom: 14px; }
.cm-game__intro { font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.cm-game__daily { margin: 0 0 20px; padding: 10px 16px; border-left: 3px solid var(--cm-yellow); background: rgba(255, 210, 31, 0.08); border-radius: 0 12px 12px 0; font-size: 14px; color: #f3ece0; }
.cm-game__daily b { color: var(--cm-yellow); }
@media (max-width: 900px) { .cm-game__daily { text-align: left; } }
.mg__go, .mg__actions .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.order-thanks__change { max-width: 640px; margin: 22px auto 0; padding: 14px 18px; border-radius: 14px; background: var(--bg-panel); text-align: center; font-size: 14px; line-height: 1.6; color: var(--fg-dim); }
.order-thanks__change a { color: var(--fg); font-weight: 700; }

/* game card on phones: one column (must come after the desktop proportions above) */
@media (max-width: 900px) {
  .cm-game__card { grid-template-columns: 1fr; gap: 26px; padding: 22px 18px 28px; text-align: center; }
  .cm-arena { max-width: 360px; width: 100%; }
  .cm-game__body .cm-h2 { font-size: clamp(22px, 6.4vw, 30px); }
  .cm-game__daily { text-align: left; }
  .cm-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
  .cm-tiers span { font-size: 12.5px; }
}

/* Subcategory chips on a main category page (Odjeća → Majice, Hoodies, ...) */
.subcat-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 32px; }
.subcat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg); font-weight: 600; font-size: 14px; text-decoration: none; background: var(--bg); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.subcat-chip span { font-size: 12px; color: var(--fg-dim); font-weight: 500; }
.subcat-chip:hover { background: var(--fg); border-color: var(--fg); color: #fff; }
.subcat-chip:hover span { color: rgba(255, 255, 255, 0.7); }

/* Discount code box and free delivery progress (cart and checkout) */
.coupon-box { margin: 24px 0; padding: 20px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg-panel); }
.coupon-box p { margin: 0; }
.ship-progress { margin-bottom: 18px; }
.ship-progress p { font-size: 14px; margin-bottom: 8px; }
.ship-progress__bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ship-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .4s var(--ease); }
.ship-progress.is-done .ship-progress__bar span { background: #1f9d55; }
.coupon-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.coupon-form__row { display: flex; gap: 10px; }
.coupon-form__row input[type=text] { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; text-transform: uppercase; background: var(--bg); }
.coupon-form__row button, .coupon-remove { padding: 12px 20px; border: 0; border-radius: 10px; background: var(--fg); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.coupon-remove { background: transparent; color: var(--fg-dim); text-decoration: underline; padding: 6px 4px; }
.coupon-flash { font-size: 13.5px; margin-top: 10px !important; }
.coupon-flash--error { color: #c11a15; }
.coupon-flash--ok { color: #1f7a45; margin: 0 0 12px !important; }
.coupon-note { font-size: 13px; color: var(--fg-dim); margin-top: 8px !important; }

/* Size guide ("Vodič za veličine") on the product page */
.size-guide-link { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0; background: none; border: 0; color: var(--fg); font: inherit; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.size-guide-link:hover { color: var(--accent); }
.size-guide { border: 0; padding: 0; border-radius: 18px; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--bg); color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.size-guide::backdrop { background: rgba(20, 18, 16, 0.6); }
.size-guide__box { position: relative; padding: 28px 24px 24px; }
.size-guide__box h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 20px; }
.size-guide__close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--fg-dim); cursor: pointer; }
.size-guide__intro, .size-guide__how { font-size: 14px; color: var(--fg-dim); margin: 0 0 16px; }
.size-guide__how { margin: 16px 0 0; }
.size-guide__scroll { overflow-x: auto; }
.size-guide__table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; }
.size-guide__table th, .size-guide__table td { padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.size-guide__table thead th { background: var(--fg); color: #fff; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.size-guide__table tbody th { font-weight: 700; }
.size-guide__table tbody tr:nth-child(even) { background: var(--bg-panel); }
@media (max-width: 520px) {
  .size-guide__box { padding: 24px 16px 20px; }
  .size-guide__table th, .size-guide__table td { padding: 10px 6px; }
  .size-guide__table thead th { white-space: normal; font-size: 11px; }
}

.checkout-reminder-note { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-dim); }

/* Blog */
.blog-page__intro { text-align: center; max-width: 640px; margin: -8px auto 36px; color: var(--fg-dim); font-size: 17px; line-height: 1.6; }
.blog-page__content { max-width: 760px; margin: 0 auto 36px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 48px; }
.blog-card { display: flex; flex-direction: column; color: var(--fg); text-decoration: none; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 15, 10, 0.12); }
.blog-card__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-panel); }
.blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card__image img { transform: scale(1.04); }
.blog-card__noimage { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #141210, #3a2a22); }
.blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.blog-card__meta { font-size: 12.5px; color: var(--fg-dim); letter-spacing: 0.02em; }
.blog-card__title { font-family: var(--font-display); font-size: 18px; line-height: 1.3; font-weight: 600; }
.blog-card__teaser { font-size: 14.5px; line-height: 1.6; color: var(--fg-dim); }
.blog-card__more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14px; color: var(--accent); }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin: -8px 0 48px; }
.blog-pagination__link { font-weight: 700; color: var(--fg); text-decoration: none; padding: 10px 20px; border: 1px solid var(--line-strong); border-radius: 999px; }
.blog-pagination__link:hover { background: var(--fg); color: #fff; }
.blog-pagination__pages { font-size: 14px; color: var(--fg-dim); }

.blog-post { max-width: 820px; margin: 0 auto; }
.blog-post__head { text-align: center; padding: 8px 0 28px; }
.blog-post__back { display: inline-block; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--fg-dim); text-decoration: none; }
.blog-post__back:hover { color: var(--accent); }
.blog-post__head h1 { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 46px); line-height: 1.15; margin: 0 0 16px; }
.blog-post__meta { margin: 0; font-size: 14px; color: var(--fg-dim); }
.blog-post__cover { margin: 0 -60px 36px; }
.blog-post__cover img { display: block; width: 100%; height: auto; border-radius: 20px; }
.blog-post__content { font-size: 18px; line-height: 1.8; }
.blog-post__content img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-post__content h2, .blog-post__content h3 { font-family: var(--font-display); line-height: 1.25; margin: 1.8em 0 0.6em; }
.blog-post__content blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--accent); font-size: 1.1em; color: var(--fg); }
.blog-post__products { margin: 56px 0 8px; padding: 32px 0 0; border-top: 1px solid var(--line); }
.blog-post__products h2, .blog-post__more h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 24px; }
.blog-post__share { margin: 40px 0 8px; }
.blog-post__more { margin: 56px -120px 0; padding-top: 32px; border-top: 1px solid var(--line); }
.blog-post__more h2 { padding-left: 120px; }
@media (max-width: 1100px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-post__cover { margin-left: 0; margin-right: 0; }
  .blog-post__more { margin-left: 0; margin-right: 0; }
  .blog-post__more h2 { padding-left: 0; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .blog-post__content { font-size: 17px; }
}
.blog-grid--home { max-width: var(--container); margin: 0 auto; padding: 24px 32px 56px; }
@media (max-width: 640px) { .blog-grid--home { padding: 20px 16px 40px; } }
.blog-post { padding: 8px 20px 0; }
.blog-page .blog-grid { padding: 0; }

/* Mobile fixes: no sideways scroll, readable section headings, one-column complaint form, no iOS zoom on inputs */
.shop-rotator { grid-template-columns: minmax(0, 1fr); }
.complaint__grid > * { min-width: 0; }
@media (max-width: 640px) {
  .section-heading { flex-wrap: wrap; gap: 6px 16px; padding: 40px 16px 0; }
  .section-heading h2 { font-size: 22px; gap: 10px; }
  .section-heading h2::before { width: 26px; }
  .complaint__grid { grid-template-columns: 1fr; }
  .complaint__head { padding: 40px 16px 8px; }
  .complaint__panel { padding: 8px 16px 64px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px; }
}
.shop-rotator-page { min-width: 0; width: 100%; }
@media (max-width: 640px) {
  .shop-rotator-page.product-grid { grid-template-columns: minmax(0, 1fr); padding-left: 16px; padding-right: 16px; }
  .shop-rotator-page .product-card { min-width: 0; }
  .shop-rotator-page .product-card__image img { max-width: 100%; }
}
.complaint__head h1 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 640px) { .complaint__head h1 { font-size: clamp(24px, 7.4vw, 40px); } }
main h2, main h1 { overflow-wrap: break-word; }
@media (max-width: 400px) { .about h2, .about__vision h2, .about__statement h2 { font-size: clamp(22px, 6.6vw, 30px); } }
.product-main, .product-gallery, .product-gallery__main, .product-main > * { min-width: 0; }
.product-gallery__main img { max-width: 100%; height: auto; }

/* Closed slide-out drawers must not leak their shadow into the page (a grey band on the right edge) */
.cart-drawer, .account-drawer { box-shadow: none; visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s linear 0.4s; }
.cart-drawer.is-open, .account-drawer.is-open { box-shadow: -20px 0 60px rgba(20, 15, 10, 0.25); visibility: visible; transition: transform 0.4s var(--ease), visibility 0s; }

/* Collaboration title: the name is never split inside the word ("ZMAJOMANI / JA"); "x BE SHIRT" drops to the next line instead */
.cm-title { font-size: clamp(26px, 4.3vw, 54px); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media (max-width: 900px) { .cm-title { font-size: clamp(26px, 8.4vw, 52px); } }

/* Nine top-level menu items: shrink the spacing step by step so the row never runs wider than the screen */
@media (max-width: 1280px) { .site-nav { gap: clamp(14px, 2.2vw, 30px); padding: 0 16px; } }
@media (max-width: 1100px) { .site-nav { font-size: 11.5px; } }
@media (max-width: 1020px) { .site-nav { font-size: 11px; gap: clamp(10px, 1.5vw, 16px); padding: 0 10px; } }
@media (max-width: 1020px) { .site-nav { font-size: 10.5px; gap: clamp(8px, 1.1vw, 12px); letter-spacing: 0.01em; padding: 0 8px; } .site-nav__highlight { padding: 5px 9px !important; } }
@media (min-width: 1021px) and (max-width: 1100px) { .site-nav { font-size: 11px; gap: clamp(10px, 1.5vw, 16px); letter-spacing: 0.03em; padding: 0 10px; } }

/* Homepage category tiles: slimmer, with room around the text */
.category-teaser-grid { gap: 20px; }
.category-teaser { min-height: 112px; padding: 26px 30px; justify-content: center; gap: 8px; }
.category-teaser::before { top: -70px; right: -60px; width: 150px; height: 150px; }
@media (max-width: 640px) { .category-teaser { min-height: 96px; padding: 22px 24px; } }

/* Free delivery bar: slower fill, a stronger message when the customer is close, and the note on product pages */
.ship-progress__bar span { transition: width 1s var(--ease); }
.ship-progress.is-near { padding: 12px 14px; border-radius: 12px; background: #fff4e6; border: 1px solid #ffd7a8; }
.ship-progress.is-near p { color: var(--fg); font-weight: 500; }
.ship-progress.is-near .ship-progress__bar span { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.ship-progress.is-done { padding: 12px 14px; border-radius: 12px; background: #eaf7ef; border: 1px solid #bfe6cd; }
.sidecart__summary .ship-progress { margin: 0 0 16px; }
.free-ship-note { margin: 12px 0 0; font-size: 14px; color: var(--fg-dim); }
.free-ship-note::before { content: '🚚 '; }

/* Live delivery-zone hint under the checkout's postal code field */
.ship-zone-hint { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--fg-dim); min-height: 1em; }
.ship-zone-hint.is-shown { color: var(--fg); }

/* Product page: more room between the menu and the product */
#Product { padding-top: 56px; }
@media (max-width: 900px) { #Product { padding-top: 32px; } }

/* Third menu level: a menu item whose page has subcategories opens a flyout to its right */
.site-nav__item { position: relative; }
.site-nav__item > a { display: block; }
.site-nav__caret { float: right; margin-left: 14px; opacity: 0.6; }
.site-nav__sub {
  position: absolute; top: -10px; left: calc(100% - 4px);
  display: flex; flex-direction: column; gap: 2px; padding: 10px; min-width: 190px;
  background: #fff; box-shadow: 0 24px 48px -20px rgba(20, 15, 10, 0.3);
  opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-nav__item:hover > .site-nav__sub, .site-nav__item:focus-within > .site-nav__sub { opacity: 1; transform: translateX(0); pointer-events: auto; }
.site-nav__dropdown:nth-last-child(-n+2) .site-nav__sub { left: auto; right: calc(100% - 4px); }
.mobile-nav__sublink--child { padding-left: 34px; font-weight: 500; }

/* Flyout polish: same look as the main panel, arrow on the same line, parent row stays highlighted */
.site-nav__panel .site-nav__item > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-nav__caret { float: none; margin: 0; font-size: 18px; line-height: 1; opacity: 0.5; transition: transform 0.2s var(--ease), opacity 0.2s; }
.site-nav__item:hover > a { background: var(--bg-panel); color: var(--accent); }
.site-nav__item:hover > a .site-nav__caret { opacity: 1; transform: translateX(3px); }
.site-nav__sub {
  top: -10px; left: calc(100% + 2px); padding: 10px; min-width: 210px;
  background-color: #fff;
  background-image: repeating-linear-gradient(115deg, rgba(20, 15, 10, 0.045) 0px, rgba(20, 15, 10, 0.045) 1px, transparent 1px, transparent 96px);
  box-shadow: 0 24px 48px -20px rgba(20, 15, 10, 0.3), 0 0 0 1px rgba(20, 15, 10, 0.05);
}
/* invisible bridge so the cursor can cross the gap between panel and flyout without closing it */
.site-nav__sub::before { content: ''; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px; }
.site-nav__dropdown:nth-last-child(-n+2) .site-nav__sub { left: auto; right: calc(100% + 2px); }
.site-nav__dropdown:nth-last-child(-n+2) .site-nav__sub::before { left: auto; right: -14px; }
/* Flyout sits flush against the outer edge of the main panel (the panel has 10px side padding) */
.site-nav__sub { left: calc(100% + 9px); }
.site-nav__sub::before { left: -12px; width: 12px; }
.site-nav__dropdown:nth-last-child(-n+2) .site-nav__sub { left: auto; right: calc(100% + 9px); }
.site-nav__dropdown:nth-last-child(-n+2) .site-nav__sub::before { left: auto; right: -12px; }

/* Colour attributes as circles on the product page */
.pill-select--colors { gap: 12px; }
.pill-select__option.pill-select__swatch {
  width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%;
  background: var(--swatch); border: 2px solid rgba(20, 15, 10, 0.18);
  box-shadow: inset 0 0 0 2px #fff; position: relative;
}
.pill-select__option.pill-select__swatch:hover { border-color: var(--fg); }
.pill-select__option.pill-select__swatch.is-selected { border-color: var(--fg); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #fff, 0 0 0 4px var(--fg); background: var(--swatch); color: transparent; }
.swatch-current { text-transform: none; font-weight: 600; letter-spacing: 0; color: var(--fg); }

/* Keep "FRENKIE x BE SHIRT" as one piece of text: the arrow is placed at the right edge, not as a flex column */
.site-nav__panel .site-nav__item > a { display: block; position: relative; }
.site-nav__item.has-children > a { padding-right: 34px; }
.site-nav__caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.site-nav__item:hover > a .site-nav__caret { transform: translateY(-50%) translateX(3px); }

/* Gallery thumbnails show the whole picture (never cropped): fixed height, width follows the picture */
.product-gallery__thumb { width: auto; height: 62px; background: transparent; }
.product-gallery__thumb img { width: auto; height: 100%; max-width: 110px; object-fit: contain; }
@media (max-width: 560px) { .product-gallery__thumb { height: 54px; } }

/* Colour circles: snappy hover, and the selection ring is an outline so no white ring cuts across the page texture */
.pill-select__option.pill-select__swatch {
  transition: transform 0.12s ease-out, border-color 0.1s ease-out, outline-color 0.1s ease-out;
  outline: 2px solid transparent; outline-offset: 3px;
}
.pill-select__option.pill-select__swatch:hover { transform: scale(1.12); }
.pill-select__option.pill-select__swatch.is-selected {
  box-shadow: inset 0 0 0 2px #fff; outline-color: var(--fg); transform: none;
}

/* The whole product card (picture, name, price) opens the product, not only the POGLEDAJ button: the button's link is
   stretched over the card. The wishlist heart sits above it (z-index) and keeps working. */
.product-card { cursor: pointer; }
.product-card__cta::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.product-card .wishlist-btn { z-index: 3; }

/* Bigger picture on click (product page) */
.product-gallery__main.is-zoomable { cursor: zoom-in; }
.has-lightbox { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 12, 10, 0.92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox__pic { width: min(94vw, 1100px); height: 90vh; background: center / contain no-repeat; cursor: default; }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(255, 255, 255, 0.14); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2; transition: background 0.15s ease-out; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) { .lightbox { padding: 8px; } .lightbox__pic { width: 100vw; height: 82vh; } .lightbox__nav { width: 40px; height: 40px; } }

/* Pictures cannot be selected, dragged or long-pressed to save (deterrent only, see image-protect.js) */
.product-gallery img, .product-card__image img, .product-gallery__thumb img {
  -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Faint BE SHIRT logo watermark (images/watermark-tile.svg, made from the logo) over the enlarged picture; stronger for a moment when a screenshot is likely (see product-lightbox.js) */
.lightbox__pic { position: relative; }
.lightbox__pic::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.1; transition: opacity 0.15s ease-out;
  background: url('/_resources/themes/beshirt/images/watermark-tile.svg') repeat;
}
.lightbox--guard .lightbox__pic::after { opacity: 0.65; }
.lightbox__note { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; padding: 0 16px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.6); pointer-events: none; }

/* Product page: the payment note sits under both columns (full width) so the right column is no taller than the picture
   column and there is no big empty space below the gallery; on a desktop the gallery also stays in view while scrolling */
.product-payment-secure--wide {
  margin-top: 36px; padding-top: 22px; display: flex; gap: 40px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.product-payment-secure--wide > .product-payment-secure__heading { flex: 0 0 100%; margin-bottom: 0; }
.product-payment-secure--wide > p { flex: 1 1 420px; max-width: 640px; }
.product-payment-secure--wide .product-payment-cards { flex: 0 1 auto; margin-top: 0; }
@media (min-width: 901px) {
  .product-gallery { position: sticky; top: 96px; align-self: flex-start; }
}
@media (min-width: 1100px) {
  .product-gallery { flex-basis: 480px; max-width: 600px; }
}

/* Checkout on a phone: the order table was wider than the screen (220px picture + 4 columns), which stretched the whole
   page, so the header, menu, form and footer no longer fitted. The grid column may now shrink, the picture is smaller. */
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  #Checkout table.cart .image img { width: 84px; height: 84px; }
  #Checkout table.cart thead th,
  #Checkout table.cart tbody td,
  #Checkout table.cart tfoot th,
  #Checkout table.cart tfoot td { padding-right: 8px; }
}
/* safety net: nothing may widen the page sideways */
html, body { max-width: 100%; overflow-x: clip; }

/* Collaboration page: the articles come right after the hero, then the story and the game */
.cm-marquee + .cm-products { padding: 72px 0 88px; }
.cm-endcta { padding: 0 0 96px; background: #fff; text-align: center; }
.cm-endcta .cm-btn--yellow { background: #141210; color: #fff; }
.cm-endcta .cm-btn--yellow:hover { box-shadow: 0 16px 30px -12px rgba(20, 18, 16, 0.5); }
@media (max-width: 760px) { .cm-marquee + .cm-products { padding: 48px 0 56px; } .cm-endcta { padding-bottom: 64px; } }

/* B2B quick order: pick type and colour, then one row of sizes (no giant table) */
.b2b-pick { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 16px; }
.b2b-pick__group { display: flex; flex-direction: column; gap: 8px; }
.b2b-pick__label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.b2b-pick__chosen { font-size: 13px; color: var(--fg-dim, #726a62); }
.b2b-pick__hint { margin: 6px 0 12px; font-size: 13.5px; opacity: 0.75; }
.b2b-sizes { margin: 6px 0 14px; }
.b2b-sizes__grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.b2b-sizes__cell { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 58px; }
.b2b-sizes__size { font-size: 13px; font-weight: 700; }
.b2b-sizes__cell input { width: 62px; padding: 9px 4px; text-align: center; border: 1px solid rgba(20, 18, 16, 0.25); border-radius: 6px; background: #fff; color: var(--fg); font: inherit; }
.b2b-sizes__cell input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.b2b-sizes__cell.is-empty { opacity: 0.35; }
.b2b-list { margin: 14px 0 6px; border-top: 1px solid var(--line, rgba(20, 18, 16, 0.12)); padding-top: 12px; }
.b2b-list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line, rgba(20, 18, 16, 0.12)); font-size: 14px; }
.b2b-list__remove { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(20, 18, 16, 0.08); font-size: 18px; line-height: 1; cursor: pointer; }
.b2b-list__remove:hover { background: var(--accent); color: #fff; }

/* link between the retail page of an article and its B2B order page (only shown to approved B2B members) */
.b2b-switch { margin: 6px 0 14px; font-size: 14px; font-weight: 700; }
.b2b-switch a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* the colour circles' selection ring and hover zoom must not be cut off at the edge of the quick-order box */
.b2b-pick__pills { padding: 6px 8px 4px; }
.b2b-pick__group { overflow: visible; }
.b2b-matrix__scroll { overflow: visible; }
.b2b-list__text { display: flex; flex-direction: column; gap: 2px; }
.b2b-list__price { font-size: 13px; font-weight: 700; color: var(--accent); }

/* Home slider caption: label, name, price, colours and a button - compact, the name and the price are the big things */
.featured-slider__info { min-height: 168px; margin-top: 12px; }
.slide-info { gap: 7px; }
.slide-info__kicker { display: inline-block; padding: 4px 11px; border-radius: 999px; background: rgba(20, 18, 16, 0.07); color: var(--fg-dim); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.slide-info__kicker.is-sale { background: var(--accent); color: #fff; }
.slide-info__text { display: none; }
.featured-slider__info .title { font-size: 31px; }
.featured-slider__info .price { font-size: 21px; font-weight: 900; }
.slide-info__colors { display: inline-flex; gap: 7px; align-items: center; }
.slide-info__colors i { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(20, 18, 16, 0.25); box-shadow: inset 0 0 0 2px #fff; }
.slide-info__cta { margin-top: 2px; padding: 11px 26px; font-size: 12.5px; }
@media (max-width: 560px) { .featured-slider__info .title { font-size: 26px; } .featured-slider__info .price { font-size: 19px; } }

/* Home slider, bolder: a big red disc behind the article (it breaks out of the disc), a ring around it, a round
   price sticker, and a larger picture. The left text part of the hero is not touched. */
.featured-slider__stage { height: 540px; }
.featured-slider__stage::before {
  content: ''; position: absolute; left: 50%; top: 47%; width: 400px; height: 400px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0;
  background: url('/_resources/themes/beshirt/images/logo-mark.svg') center 52% / 68% auto no-repeat, radial-gradient(circle at 32% 26%, #ff6a5e 0%, var(--accent) 48%, #9c120d 100%);
  box-shadow: 0 40px 70px -30px rgba(224, 32, 26, 0.6);
}
.featured-slider__stage::after {
  content: ''; position: absolute; left: 50%; top: 47%; width: 470px; height: 470px; transform: translate(-50%, -50%) rotate(-12deg); border-radius: 50%; z-index: 0;
  border: 2px dashed rgba(20, 18, 16, 0.22); animation: slider-ring 40s linear infinite;
}
@keyframes slider-ring { to { transform: translate(-50%, -50%) rotate(348deg); } }
.slide { z-index: 1; padding: 6px; }
.slide img { filter: drop-shadow(0 30px 26px rgba(20, 15, 10, 0.35)); }
.slide__sticker {
  position: absolute; right: -10px; top: 10px; z-index: 2; width: 158px; height: 158px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: radial-gradient(circle at 35% 28%, #ffe55c 0%, #ffd21f 55%, #f2b800 100%); color: #141210; text-align: center; transform: rotate(10deg);
  border: 4px solid #141210; box-shadow: 6px 8px 0 #141210, 0 18px 30px rgba(20, 15, 10, 0.35); animation: sticker-pop 3.2s ease-in-out infinite;
}
.slide__sticker::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed rgba(20, 18, 16, 0.55); pointer-events: none; }
.slide__sticker small { background: #141210; color: #ffd21f; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; line-height: 1; padding: 4px 9px 4px 11px; border-radius: 999px; }
.slide__sticker b { font-family: var(--font-display); font-weight: 900; font-size: 60px; line-height: 0.9; letter-spacing: -0.04em; max-width: 132px; text-shadow: 3px 3px 0 rgba(224, 32, 26, 0.45); }
.slide__sticker b.is-long { font-size: 42px; }
.slide__sticker em { font-style: normal; background: #141210; color: #ffd21f; font-weight: 900; font-size: 15px; letter-spacing: 0.16em; line-height: 1; padding: 4px 10px 4px 12px; border-radius: 999px; }
@keyframes sticker-pop { 0%, 100% { transform: rotate(10deg) scale(1); } 50% { transform: rotate(7deg) scale(1.05); } }
.featured-slider__info .price { display: none; }
.featured-slider__info { min-height: 134px; }
@media (max-width: 900px) { .featured-slider__stage { height: 460px; } .featured-slider__stage::before { width: 330px; height: 330px; } .featured-slider__stage::after { width: 390px; height: 390px; } .slide__sticker { width: 124px; height: 124px; top: 8px; right: -4px; border-width: 3px; box-shadow: 4px 6px 0 #141210, 0 12px 22px rgba(20, 15, 10, 0.35); } .slide__sticker::before { inset: 5px; } .slide__sticker b { font-size: 46px; max-width: 100px; } .slide__sticker b.is-long { font-size: 32px; } .slide__sticker em { font-size: 12px; padding: 3px 8px 3px 10px; } .slide__sticker small { font-size: 10px; padding: 3px 7px 3px 9px; } }
@media (prefers-reduced-motion: reduce) { .featured-slider__stage::after, .slide__sticker { animation: none; } }

/* Checkout order summary as cards: picture tile + name/size + amount per article, then the lines and a bold black total.
   Only #Checkout: the cart page keeps its own table. */
.item-meta { display: none; }
#Checkout .checkout-summary { padding: 22px; }
#Checkout table.cart, #Checkout table.cart tbody, #Checkout table.cart tfoot { display: block; width: 100%; margin: 0; }
#Checkout table.cart thead, #Checkout table.cart colgroup { display: none; }
#Checkout table.cart tbody tr {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  padding: 14px; margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px -16px rgba(20, 15, 10, 0.35);
}
#Checkout table.cart tbody td { display: block; padding: 0; border: 0; }
#Checkout table.cart tbody td.c-unit, #Checkout table.cart tbody td.c-qty { display: none; }
#Checkout table.cart .image { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt, #f8f5f0); border-radius: 12px; }
#Checkout table.cart .image img { width: 84px; height: 84px; object-fit: contain; }
#Checkout table.cart h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; }
#Checkout table.cart h3 a { color: var(--fg); text-decoration: none; }
#Checkout table.cart .subtitle { margin: 0 0 6px; font-size: 12.5px; color: var(--fg-dim); line-height: 1.35; }
#Checkout table.cart .item-meta { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #141210; color: #fff; }
#Checkout table.cart tbody td.c-total { font-family: var(--font-display); font-weight: 900; font-size: 17px; white-space: nowrap; text-align: right; }
#Checkout table.cart tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 4px; border-top: 1px solid var(--line); }
#Checkout table.cart tfoot tr.subtotal { border-top: 0; }
#Checkout table.cart tfoot th, #Checkout table.cart tfoot td { display: block; padding: 0; border: 0; font-size: 13.5px; font-weight: 600; text-align: left; }
#Checkout table.cart tfoot td { white-space: nowrap; text-align: right; }
#Checkout table.cart tfoot tr.Total {
  margin-top: 12px; padding: 16px 20px; border: 0; border-radius: 16px; background: #141210; color: #fff; align-items: center;
  box-shadow: 0 16px 30px -16px rgba(20, 18, 16, 0.6);
}
#Checkout table.cart tfoot tr.Total th, #Checkout table.cart tfoot tr.Total td { border: 0; padding: 0; color: #fff; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
#Checkout table.cart tfoot tr.Total th { font-size: 17px; letter-spacing: 0.04em; }
#Checkout table.cart tfoot tr.Total td { font-size: 30px; line-height: 1; color: #ffd21f; white-space: nowrap; }
@media (max-width: 560px) {
  #Checkout .checkout-summary { padding: 0; }
  #Checkout table.cart tbody tr { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 10px; padding: 10px; }
  #Checkout table.cart .image { width: 76px; height: 76px; }
  #Checkout table.cart .image img { width: 70px; height: 70px; }
  #Checkout table.cart h3 { font-size: 13.5px; }
  #Checkout table.cart tfoot tr.Total td { font-size: 26px; }
}

/* Collaboration page: "see all" button under the six articles, and the two photoshoot pictures */
.cm-btn--dark { background: #141210; color: #fff; }
.cm-btn--dark:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(20, 18, 16, 0.55); }
.cm-more { display: flex; justify-content: center; margin-top: 40px; }
.cm-shoot { position: relative; isolation: isolate; padding: 72px 0; background: var(--cm-dark); overflow: hidden; }
.cm-shoot__bg { position: absolute; inset: 0; z-index: -1; }
.cm-shoot__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(46px) brightness(0.5) saturate(1.35); transform: scale(1.35); }
.cm-shoot__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cm-dark) 0%, rgba(15, 14, 13, 0) 22%, rgba(15, 14, 13, 0) 78%, var(--cm-dark) 100%); }
.cm-shoot__grid { display: flex; justify-content: center; align-items: center; gap: 36px; }
.cm-shoot__photo { position: relative; flex: 0 1 auto; margin: 0; height: min(78vh, 700px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 26px; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cm-shoot__photo:nth-child(odd):not(:only-child) { transform: translateY(-18px) rotate(-1.5deg); }
.cm-shoot__photo:nth-child(even) { transform: translateY(22px) rotate(1.5deg); }
.cm-shoot__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .cm-shoot { padding: 44px 0; }
  .cm-shoot__grid { flex-direction: column; gap: 22px; }
  .cm-shoot__photo { width: 100%; height: auto; max-width: 420px; }
  .cm-shoot__photo:nth-child(odd):not(:only-child), .cm-shoot__photo:nth-child(even) { transform: none; }
  .cm-more .cm-btn { width: 100%; }
}

/* Collaboration page: the light sections let the site's diagonal linework (painted on the body) show through, like every other page */
.cm-products, .cm-story, .cm-game, .cm-endcta { background: transparent; }
.cm-about {
  background-color: var(--cm-cream);
  background-image: repeating-linear-gradient(115deg, rgba(20, 15, 10, 0.045) 0px, rgba(20, 15, 10, 0.045) 1px, transparent 1px, transparent 96px);
  background-attachment: fixed;
}

/* Suggestions under the header search box (search-suggest.js) */
.site-search { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: max(100%, 440px); max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -18px rgba(20, 15, 10, 0.45); overflow: hidden;
}
.search-suggest[hidden] { display: none; }
.search-suggest__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); }
.search-suggest__item:hover, .search-suggest__item.is-active { background: var(--bg-alt, #f8f5f0); }
.search-suggest__pic { display: flex; align-items: center; justify-content: center; width: 48px; height: 60px; border-radius: 8px; background: var(--bg-alt, #f8f5f0); overflow: hidden; }
.search-suggest__pic img { width: 100%; height: 100%; object-fit: contain; }
.search-suggest__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-suggest__text strong { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; line-height: 1.2; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest__text small { font-size: 12px; color: var(--fg-dim); }
.search-suggest__price { font-size: 13.5px; font-weight: 700; white-space: nowrap; text-align: right; }
.search-suggest__price s { display: block; font-weight: 500; font-size: 12px; color: var(--fg-dim); }
.search-suggest__price .b2b__price-line { display: none; }
.search-suggest__all { display: block; padding: 13px 16px; background: #141210; color: #fff; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-decoration: none; }
.search-suggest__all:hover { background: var(--accent); }
.search-suggest__empty { padding: 18px 16px; font-size: 14px; color: var(--fg-dim); }
@media (max-width: 760px) { .search-suggest { width: 100%; max-width: none; } }
/* Checkout: the "I agree to the terms" box as a proper card with a large custom checkbox */
#Checkout [id$="ReadTermsAndConditions_Holder"] {
  display: flex; align-items: flex-start; gap: 14px; margin: 20px 0; padding: 16px 18px;
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
#Checkout [id$="ReadTermsAndConditions_Holder"]:hover { border-color: #141210; }
#Checkout [id$="ReadTermsAndConditions_Holder"]:has(input:checked) { border-color: #141210; box-shadow: 4px 5px 0 #141210; }
#Checkout [id$="ReadTermsAndConditions_Holder"] input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: 0 0 26px; width: 26px; height: 26px; margin: 1px 0 0; padding: 0; cursor: pointer;
  background: #fff; border: 2px solid #141210; border-radius: 8px; transition: background 0.15s;
}
#Checkout [id$="ReadTermsAndConditions_Holder"] input[type=checkbox]:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
#Checkout [id$="ReadTermsAndConditions_Holder"] input[type=checkbox]:focus-visible { outline: 3px solid rgba(224, 32, 26, 0.35); outline-offset: 2px; }
#Checkout [id$="ReadTermsAndConditions_Holder"] label {
  margin: 0; float: none; width: auto; cursor: pointer; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--fg);
}
#Checkout [id$="ReadTermsAndConditions_Holder"] label a { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Pop-ups (popups.js): the light-hearted notice and the advert */
body.be-pop-open { overflow: hidden; }
.be-pop {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 28px 18px;
  background: rgba(15, 14, 13, 0.66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.25s ease;
}
.be-pop.is-open { opacity: 1; }
.be-pop__card {
  position: relative; width: min(100%, 500px); max-height: calc(100vh - 56px); overflow-y: auto; padding: 44px 34px 30px; border-radius: 28px;
  transform: translateY(22px) scale(0.96); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.be-pop.is-open .be-pop__card { transform: none; }
.be-pop__close {
  position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(20, 18, 16, 0.09); color: inherit; cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.be-pop__close:hover { background: var(--accent); color: #fff; transform: rotate(90deg); }
.be-pop__kicker { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.be-pop__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 900; font-size: clamp(25px, 5.4vw, 34px); line-height: 1.08; text-transform: uppercase; letter-spacing: 0.01em; }
.be-pop__text { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.be-pop__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.be-pop__btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: 15px; font-weight: 800; letter-spacing: 0.03em;
  text-decoration: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.be-pop__btn--primary { background: var(--accent); color: #fff; box-shadow: 0 14px 26px -12px rgba(224, 32, 26, 0.7); }
.be-pop__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(224, 32, 26, 0.85); }
.be-pop__later { padding: 8px 2px; border: 0; background: none; color: inherit; opacity: 0.65; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.be-pop__later:hover { opacity: 1; }

/* notice: cream card, yellow hard shadow, a coffee cup badge hanging off the corner */
.be-pop--notice .be-pop__card { margin-top: 26px; background: #f6f1ea; color: #141210; border: 3px solid #141210; box-shadow: 10px 12px 0 #ffd21f; }
.be-pop__badge {
  position: absolute; top: -34px; left: 28px; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%;
  background: #ffd21f; border: 3px solid #141210; font-size: 34px; line-height: 1; transform: rotate(-9deg); box-shadow: 3px 4px 0 #141210; animation: pop-wobble 3.6s ease-in-out infinite;
}
.be-pop--notice .be-pop__kicker { margin-top: 14px; }
@keyframes pop-wobble { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(7deg) scale(1.06); } }

/* advert: dark card with a yellow glow behind the picture */
.be-pop--ad .be-pop__card { background: #0f0e0d; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7); padding-top: 34px; }
.be-pop--ad .be-pop__close { background: rgba(255, 255, 255, 0.14); }
.be-pop--ad .be-pop__kicker { color: #ffd21f; }
.be-pop__art { display: flex; align-items: center; justify-content: center; margin: 0 -34px 18px; padding: 8px 0 0; background: radial-gradient(closest-side, rgba(255, 210, 31, 0.5) 0%, rgba(255, 210, 31, 0.12) 62%, rgba(255, 210, 31, 0) 100%); }
.be-pop__art img { display: block; width: auto; max-width: 78%; max-height: 250px; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.5)); }

@media (max-width: 520px) {
  .be-pop { padding: 18px 12px; }
  .be-pop__card { padding: 40px 22px 24px; border-radius: 24px; }
  .be-pop--ad .be-pop__card { padding-top: 30px; }
  .be-pop__art { margin-left: -22px; margin-right: -22px; }
  .be-pop__actions { flex-direction: column; align-items: stretch; text-align: center; }
  .be-pop__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .be-pop, .be-pop__card { transition: none; } .be-pop__badge { animation: none; } }

/* ===== Phones and tablets =====
   Two articles per row on phones, a cart and checkout built as cards, big enough touch targets, no stuck hover effects,
   and a tablet product page with picture and details side by side. */

/* decorative rings drift over the slider caption on narrow screens */
@media (max-width: 900px) { .hero__ring { display: none; } }

/* --- articles two per row on phones --- */
@media (max-width: 640px) {
  .product-grid, .category-teaser-grid, #ProductGroup ul.productList, .shop-rotator-page.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding-left: 14px; padding-right: 14px;
  }
  .product-card { gap: 8px; padding: 2px 0 6px; min-width: 0; }
  .product-card__image { height: 200px; }
  .product-card__title { font-size: 17px; }
  .product-card__price { font-size: 13.5px; line-height: 1.3; }
  .product-card__cta { padding: 11px 0; font-size: 10px; }
  .product-card__badge { top: 6px; left: 6px; padding: 4px 8px; font-size: 8.5px; }
  .product-card .wishlist-btn { top: 4px; right: 4px; width: 38px; height: 38px; }
}

/* --- touch targets: the visible icon stays the same size, the tappable area grows --- */
@media (pointer: coarse) {
  .site-actions .icon-btn, .menu-toggle, .site-search button, .product-share__btn { position: relative; }
  .site-actions .icon-btn::after, .menu-toggle::after, .site-search button::after { content: ''; position: absolute; inset: -10px; }
  .wishlist-btn { width: 40px; height: 40px; }
  .product-share__btn { width: 42px; height: 42px; }
  .product-review-form__stars button { min-width: 40px; min-height: 40px; }
  .size-guide-link { min-height: 44px; display: inline-flex; align-items: center; }
  .featured-slider .prev, .featured-slider .next { width: 44px; height: 44px; }
  .site-footer__col a { display: block; padding: 8px 0; }
  .site-footer__social-btn { width: 44px; height: 44px; }
}

/* --- no stuck hover effects on touch screens --- */
@media (hover: none) {
  .product-card:hover .product-card__image img { transform: none; filter: drop-shadow(0 22px 18px rgba(20, 15, 10, 0.14)); }
  .product-card:hover .product-card__cta.filled { background: var(--fg); border-color: var(--fg); }
  .site-actions .icon-btn:hover, .wishlist-btn:hover, .site-footer__col a:hover, .cm-btn:hover, .be-pop__btn--primary:hover, .be-pop__close:hover { transform: none; }
  .site-actions .icon-btn:hover { color: var(--fg); }
}

/* --- product page --- */
@media (max-width: 700px) {
  .product-main__price { font-size: clamp(20px, 6.2vw, 28px); white-space: nowrap; }
  .addproductform .btn-toolbar {
    position: sticky; bottom: 10px; z-index: 30; margin-top: 16px; padding: 10px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 30px -10px rgba(20, 15, 10, 0.45), 0 0 0 1px var(--line);
  }
  .addproductform .btn-toolbar .action, .addproductform .btn-toolbar input[type=submit] { width: 100%; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .product-page__layout { flex-direction: row; gap: 28px; flex-wrap: nowrap; }
  .product-gallery { flex: 1 1 340px; max-width: 400px; position: sticky; top: 96px; align-self: flex-start; }
  .product-main { flex: 1 1 300px; min-width: 0; }
}

/* --- cart page as cards on phones (the table used to scroll sideways and hide quantity, total and remove) --- */
.remove-line { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--fg-dim); }
.remove-line input { margin: 0; }
@media (max-width: 700px) {
  .cart-page table.cart, .cart-page table.cart tbody, .cart-page table.cart tfoot { display: block; width: 100%; overflow: visible; white-space: normal; }
  .cart-page table.cart thead, .cart-page table.cart colgroup { display: none; }
  .cart-page table.cart tbody tr {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "img title title" "img qty total" "rem rem rem"; column-gap: 14px; row-gap: 8px; align-items: center;
    margin-bottom: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px -16px rgba(20, 15, 10, 0.35);
  }
  .cart-page table.cart tbody td { display: block; padding: 0; border: 0; }
  .cart-page table.cart td.c-img { grid-area: img; }
  .cart-page table.cart td.c-title { grid-area: title; }
  .cart-page table.cart td.c-qty { grid-area: qty; }
  .cart-page table.cart td.c-total { grid-area: total; font-family: var(--font-display); font-weight: 900; font-size: 18px; white-space: nowrap; text-align: right; }
  .cart-page table.cart td.c-remove { grid-area: rem; padding-top: 8px; border-top: 1px solid var(--line); }
  .cart-page table.cart td.c-unit { display: none; }
  .cart-page table.cart .image { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt, #f8f5f0); border-radius: 12px; overflow: hidden; }
  .cart-page table.cart .image img { width: 100%; height: 100%; object-fit: contain; }
  .cart-page table.cart h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 1.15; text-transform: uppercase; }
  .cart-page table.cart .subtitle { margin: 0 0 6px; font-size: 12.5px; color: var(--fg-dim); }
  .cart-page table.cart .item-meta { display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; background: #141210; color: #fff; font-size: 12px; font-weight: 700; }
  .cart-page table.cart td.c-title select { display: block; width: 100%; max-width: 100%; margin-top: 4px; font-size: 14px; }
  .cart-page table.cart td.c-qty input { width: 78px; height: 46px; text-align: center; font-size: 16px; }
  .cart-page table.cart tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 4px; border-top: 1px solid var(--line); }
  .cart-page table.cart tfoot th, .cart-page table.cart tfoot td { display: block; padding: 0; border: 0; font-size: 13.5px; font-weight: 600; text-align: left; }
  .cart-page table.cart tfoot td { white-space: nowrap; text-align: right; }
  .cart-page table.cart tfoot tr.Total { margin-top: 12px; padding: 16px 20px; border: 0; border-radius: 16px; background: #141210; align-items: center; }
  .cart-page table.cart tfoot tr.Total th, .cart-page table.cart tfoot tr.Total td { color: #fff; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
  .cart-page table.cart tfoot tr.Total td { font-size: 26px; color: #ffd21f; }
  .cartfooter { display: flex; flex-direction: column; gap: 12px; }
  .cartfooter .button { width: 100%; text-align: center; }
  .cart-page form .action, .cart-page form input[type=submit] { width: 100%; }
}

/* --- checkout: order summary first (the customer sees what they pay), form below; custom tick boxes everywhere --- */
@media (max-width: 900px) {
  .checkout-summary { order: 1; }
  .checkout-form { order: 2; }
  .checkout-grid { max-width: 680px; margin-left: auto; margin-right: auto; }
}
#Checkout #CreateAccountToggle_Holder, #Checkout #RecipientSameAsBuyer_Holder {
  display: flex; align-items: flex-start; gap: 14px; margin: 14px 0; padding: 14px 16px; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 14px;
}
#Checkout #CreateAccountToggle_Holder input[type=checkbox], #Checkout #RecipientSameAsBuyer_Holder input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: 0 0 26px; width: 26px; height: 26px; margin: 1px 0 0; padding: 0; cursor: pointer; background: #fff; border: 2px solid #141210; border-radius: 8px;
}
#Checkout #CreateAccountToggle_Holder input[type=checkbox]:checked, #Checkout #RecipientSameAsBuyer_Holder input[type=checkbox]:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
#Checkout #CreateAccountToggle_Holder label, #Checkout #RecipientSameAsBuyer_Holder label {
  margin: 0; float: none; width: auto; cursor: pointer; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--fg);
}

/* phones/tablets: fixes after the first real-screen review */
#Checkout .coupon-form__row button { width: auto; flex: 0 0 auto; margin: 0; padding: 12px 18px; font-size: 14px; letter-spacing: 0; text-transform: none; }
#Checkout .coupon-form__row input[type=text] { height: 48px; }
@media (max-width: 700px) {
  .cart-page table.cart tfoot th, .cart-page table.cart tfoot td { border-top: 0 !important; }
  .cart-page table.cart tfoot td:nth-child(3) { display: none; }
  .cartfooter .button { display: flex; align-items: center; justify-content: center; }
}
@media (min-width: 701px) and (max-width: 900px) { .product-main__price { font-size: 24px; white-space: nowrap; } }
@media (min-width: 901px) and (max-width: 1200px) { .hero h1 { font-size: clamp(52px, 6.6vw, 76px); } }

/* Gaming shop cards on phones: the picture box was still 420px tall (its own rule is more specific than the phone card rule), so the picture floated far below the badge */
@media (max-width: 640px) {
  .shop-rotator-page .product-card__image { height: 200px; }
}

/* Home category tiles on phones: back to one per row (two per row cut the long names such as KOLABORACIJE), a little lower, and a title that always fits */
@media (max-width: 640px) {
  .category-teaser-grid, #ProductGroup ul.productList { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .category-teaser { min-height: 84px; padding: 16px 22px; }
  .category-teaser__title { font-size: clamp(18px, 6vw, 24px); overflow-wrap: anywhere; }
}

/* ===== Phone fixes from real-phone screenshots ===== */
/* Product page: in the stacked layout the gallery's "flex: 1 1 420px" made the gallery at least 420px TALL, which left a huge blank gap between the thumbnails and the title */
@media (max-width: 700px) {
  .product-page__layout { gap: 18px; }
  .product-gallery, .product-main { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; position: static; }
}

/* Footer on phones: the link lists side by side, links tall enough for a thumb */
@media (max-width: 640px) {
  .site-footer__inner { padding: 36px 16px 28px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .site-footer__col h4 { margin: 0 0 6px; }
  .site-footer__col a { margin: 0; padding: 9px 0; line-height: 1.3; }
  .site-footer__bottom { padding: 18px 16px 28px; }
  .site-footer__legal { gap: 0 18px; }
  .site-footer__legal a, .site-footer__legal .site-footer__cookie { padding: 9px 0; font-size: 13px; }
}

/* the floating chat buttons and the back-to-top button must not sit on top of the sticky "Dodaj u korpu" bar */
@media (max-width: 700px) {
  body:has(.addproductform) .chat-fab, body:has(.addproductform) .scroll-top { bottom: 96px; }
}

/* "Novo u ponudi": four articles on phones and tablets (2 x 2, no lonely card), the usual three on wide screens */
@media (min-width: 901px) { .product-grid--new .product-card:nth-child(n+4) { display: none; } }

/* ---- Pager under a product grid: count, "PRIKAŽI JOŠ ARTIKALA", page numbers (Includes/ProductGroupPagination.ss) ---- */
.pager {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: var(--container);
  margin: -24px auto 0;
  padding: 0 32px 64px;
  text-align: center;
}

.pager__count { margin: 0; font-size: 14px; color: var(--fg-dim); }

/* drawn by js/load-more.js, which knows how much is on screen */
.pager__bar { display: none; width: 220px; max-width: 70%; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.pager.has-bar .pager__bar { display: block; }
.pager__bar span { display: block; height: 100%; width: 0; background: var(--fg); border-radius: 3px; transition: width 0.5s var(--ease); }

.pager__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 52px;
  padding: 16px 32px;
  background: var(--fg);
  border: 1px solid var(--fg);
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.pager__more:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.pager__more.is-loading { opacity: 0.6; pointer-events: none; }
.pager__more.is-loading::after {
  content: '';
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pager-spin 0.7s linear infinite;
}

@keyframes pager-spin { to { transform: rotate(360deg); } }

.pager__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.pager__pages[hidden] { display: none; }

.pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

a.pager__page:hover { border-color: var(--fg); }
.pager__page.is-current { background: var(--fg); border-color: var(--fg); color: #fff; }
.pager__page--step { font-size: 16px; }
.pager__gap { display: inline-flex; align-items: flex-end; height: 42px; padding: 0 4px; color: var(--fg-dim); }

@media (max-width: 640px) {
  .pager { padding: 0 16px 48px; }
  .pager__more { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pager__more, .pager__bar span { transition: none; }
  .pager__more.is-loading::after { animation: none; }
}

/* ---- Homepage "Kupuj po kategorijama": one row of circles with the category's picture and its name (Layout/Page.ss) ---- */
.cat-circles {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 22px 28px;
  padding: 20px 32px 52px;
}

.cat-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 112px;
  color: var(--fg);
  text-align: center;
}

.cat-circle__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.cat-circle__pic img { width: 100%; height: 100%; object-fit: cover; }
/* the picture is shown whole, on white, a little smaller than the circle (uploaded or taken from an article) */
.cat-circle__pic:has(img.is-article) { background: #fff; }
.cat-circle__pic img.is-article { width: 86%; height: 86%; object-fit: contain; }

/* no picture and no article yet: the first letter of the name */
.cat-circle__pic span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  color: var(--fg-dim);
  text-transform: uppercase;
}

.cat-circle__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.cat-circle:hover .cat-circle__pic, .cat-circle:focus-visible .cat-circle__pic { border-color: var(--fg); transform: translateY(-3px); }
.cat-circle:hover .cat-circle__name { color: var(--accent); }

/* phones: still one row, pulled sideways with a finger */
@media (max-width: 640px) {
  .cat-circles {
    flex-wrap: nowrap;
    gap: 14px;
    padding: 14px 14px 36px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cat-circles::-webkit-scrollbar { display: none; }
  .cat-circle { flex: none; width: 84px; gap: 8px; scroll-snap-align: start; }
  .cat-circle__pic { width: 76px; height: 76px; }
  .cat-circle__pic span { font-size: 26px; }
  .cat-circle__name { font-size: 10.5px; letter-spacing: 0.03em; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-circle__pic { transition: none; }
  .cat-circle:hover .cat-circle__pic { transform: none; }
}

/* ---- Product page: the note of a chosen option (js/variation-note.js), e.g. "skupi se za jedan broj nakon pranja" ---- */
.variation-note {
  margin: 4px 0 18px;
  padding: 12px 14px 12px 16px;
  background: #fff7ec;
  border: 1px solid #f3d6ae;
  border-left: 4px solid var(--accent-2);
  border-radius: 6px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}
.variation-note[hidden] { display: none; }
.variation-note p { margin: 0; }
.variation-note p + p { margin-top: 6px; }

/* ---- "Dostava" page: the price table (App/PageTypes/Layout/DeliveryPage.ss) ---- */
.delivery-page__prices { width: 100%; max-width: 560px; margin: 0 0 18px; border-collapse: collapse; }
.delivery-page__prices th, .delivery-page__prices td { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; text-align: left; }
.delivery-page__prices th { font-weight: 500; }
.delivery-page__prices td { font-weight: 800; text-align: right; white-space: nowrap; }
.delivery-page__prices .is-free td { color: var(--accent); }
.free-ship-note a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* size chart: the sizes it has no row for yet */
.size-guide__missing { margin: 12px 0 0; padding: 10px 12px; background: #fff7ec; border: 1px solid #f3d6ae; border-radius: 6px; font-size: 13.5px; line-height: 1.5; }

/* "Majica s tvojim tekstom ili slikom" (/custom-print): a landing page of its own - dark hero with the shirt, prices,
   steps, gallery, size chart and a closing call to order. Classes start with co-. */
.co { overflow: hidden; }
.co-hero { position: relative; background: #141210; color: #fff; }
.co-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 78% 42%, rgba(224, 32, 26, 0.42), rgba(20, 18, 16, 0) 58%); pointer-events: none; }
.co-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.co-hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 72px 32px 84px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.co-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); }
.co-eyebrow i { display: block; width: 36px; height: 3px; background: var(--accent); transform: skewX(-20deg); }
.co-hero h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; text-transform: uppercase; letter-spacing: -0.01em; margin: 18px 0 20px; color: #fff; }
.co-hero h1 span { color: var(--accent); }
.co-hero__intro { font-size: 18px; line-height: 1.6; color: #d9d3cc; max-width: 520px; margin: 0 0 22px; }
.co-hero__price { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 6px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; }
.co-hero__price span { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #a39b91; }
.co-hero__facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: #cfc8c0; }
.co-hero__facts li { position: relative; padding-left: 22px; }
.co-hero__facts li::before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 7px; border-left: 2.5px solid var(--accent-2); border-bottom: 2.5px solid var(--accent-2); transform: translateY(-70%) rotate(-45deg); }

.co-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.co-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 26px; font-size: 15.5px; color: #fff; border: 0; }
.co-btn svg { flex: none; }
.co-btn--wa { background: #1faa59; }
.co-btn--wa:hover { background: #17924b; transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(31, 170, 89, 0.7); }
.co-btn--viber { background: #7360f2; }
.co-btn--viber:hover { background: #5f4de0; transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(115, 96, 242, 0.7); }

.co-hero__visual { position: relative; display: flex; justify-content: center; }
.co-hero__photo { width: min(100%, 400px); border-radius: 22px; overflow: hidden; transform: rotate(3deg); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9); border: 6px solid #fff; }
.co-hero__photo img { display: block; width: 100%; height: auto; }
.co-shirt { position: relative; width: min(100%, 380px); transform: rotate(-4deg); filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.55)); }
.co-shirt svg { display: block; width: 100%; height: auto; }
.co-shirt__print { position: absolute; left: 30%; right: 30%; top: 34%; height: 34%; }
.co-shirt__print span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(17px, 2.3vw, 27px); line-height: 1.05; color: #141210; opacity: 0; animation: co-print 9s infinite; }
.co-shirt__print span:nth-child(2) { color: var(--accent); animation-delay: 3s; }
.co-shirt__print span:nth-child(3) { animation-delay: 6s; }
@keyframes co-print { 0%, 4% { opacity: 0; transform: scale(0.9); } 9%, 30% { opacity: 1; transform: scale(1); } 34%, 100% { opacity: 0; transform: scale(1.04); } }
.co-hero__tag { position: absolute; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; background: #fff; color: #141210; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.8); }
.co-hero__tag--a { left: 2%; top: 12%; transform: rotate(-8deg); }
.co-hero__tag--b { right: 0; bottom: 14%; transform: rotate(6deg); background: var(--accent); color: #fff; }

.co-section { max-width: 1040px; margin: 0 auto; padding: 64px 32px 0; }
.co-section:last-of-type { padding-bottom: 88px; }
.co-title { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-weight: 900; font-size: 28px; text-transform: uppercase; margin: 0 0 26px; }
.co-title::before { content: ''; display: block; flex: none; width: 40px; height: 3px; background: var(--accent); transform: skewX(-20deg); }

.co-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.co-price { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 150px; padding: 24px 24px 22px; background: #fff; border: 1px solid var(--line-strong); border-radius: 18px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.co-price:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(20, 15, 10, 0.5); }
.co-price--main { background: #141210; border-color: #141210; color: #fff; }
.co-price__label { font-size: 15.5px; line-height: 1.45; color: var(--fg-dim); }
.co-price--main .co-price__label { color: #cfc8c0; }
.co-price__amount { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1; color: var(--fg); }
.co-price--main .co-price__amount { color: #fff; }
.co-delivery { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 0; padding: 14px 18px; background: var(--bg-panel); border-radius: 12px; font-size: 15px; line-height: 1.55; color: var(--fg-dim); }
.co-delivery svg { flex: none; margin-top: 2px; color: var(--accent); }
.co-delivery a { color: var(--fg); font-weight: 600; white-space: nowrap; }

.co-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.co-step { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; background: var(--bg-panel); border-radius: 18px; }
.co-step__num { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--accent); margin-bottom: 8px; }
.co-step strong { font-size: 18px; line-height: 1.3; color: var(--fg); }
.co-step > span:last-child { font-size: 15.5px; line-height: 1.55; color: var(--fg-dim); }

.co-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.co-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; background: var(--bg-panel); }

.co-sizes { padding: 22px 24px; border: 1px solid var(--line-strong); border-radius: 18px; }
.co-sizes__note { font-size: 15px; line-height: 1.6; color: var(--fg-dim); margin: 0 0 14px; }
.co-sizes .size-guide__scroll + .co-sizes__note { margin: 14px 0 0; }

.co-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 38px 40px; border-radius: 22px; background: #141210; color: #fff; }
.co-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 12% 0%, rgba(224, 32, 26, 0.4), rgba(20, 18, 16, 0) 55%); pointer-events: none; }
.co-cta > * { position: relative; }
.co-cta h2 { font-family: var(--font-display); font-weight: 900; font-size: 26px; text-transform: uppercase; margin: 0 0 8px; color: #fff; }
.co-cta p { margin: 0; font-size: 16px; color: #cfc8c0; }
.co-cta .co-buttons { margin-top: 0; }

.co-sticky { display: none; }
@media (max-width: 900px) {
  .co-hero__inner { grid-template-columns: 1fr; gap: 36px; padding: 48px 20px 60px; }
  .co-hero__visual { order: -1; }
  .co-shirt { width: min(64%, 260px); }
  .co-hero__photo { width: min(70%, 300px); }
  .co-section { padding: 48px 20px 0; }
  .co-steps { grid-template-columns: 1fr; }
  .co-title { font-size: 22px; }
}
@media (max-width: 720px) {
  .co-buttons { flex-direction: column; }
  .co-btn { width: 100%; }
  .co-gallery { grid-template-columns: repeat(2, 1fr); }
  .co-cta { padding: 28px 22px; }
  .co-section:last-of-type { padding-bottom: 110px; }
  .co-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, 0.5); }
  .co-sticky .co-btn { padding: 15px 20px; }
  /* the floating chat buttons would sit on top of the bar, and say the same thing */
  body:has(.co) .chat-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .co-shirt__print span { animation: none; }
  .co-shirt__print span:first-child { opacity: 1; }
}

/* size charts by shirt (JHK / PAYPER): tabs on the "majica po želji" page, a second table in the article's size guide */
.co-sizes__tabs { display: inline-flex; gap: 6px; padding: 5px; margin: 0 0 18px; background: var(--bg-panel); border-radius: 999px; }
.co-sizes__tab { padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--fg-dim); cursor: pointer; }
.co-sizes__tab.is-active { background: #141210; color: #fff; }
.co-sizes__panel { display: none; }
.co-sizes__panel.is-active { display: block; }
.size-guide__extra-title { margin: 26px 0 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; text-transform: uppercase; }

/* "Komplet": the same design as a shirt and a sweatshirt (note under the buy button, suggestion in the cart) */
.set-offer { margin: 14px 0 4px; padding: 12px 14px; border: 1px dashed var(--accent); border-radius: 12px; font-size: 14px; line-height: 1.5; }
.set-offer strong { display: block; margin-bottom: 2px; color: var(--accent); }
.set-offer a { text-decoration: underline; }
.set-suggest { display: grid; gap: 8px; margin: 0 0 18px; }
.set-suggest__item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 12px; font-size: 13px; line-height: 1.4; color: inherit; text-decoration: none; }
.set-suggest__item:hover { border-style: solid; }
.set-suggest__item img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.set-suggest__item strong { display: block; color: var(--accent); }

/* Kolo sreće (js/wheel.js): the wheel in a pop-up card, and the countdown bar of the won code at the top of the page */
.be-pop--wheel .be-pop__card { background: #f6f1ea; color: #141210; border: 3px solid #141210; box-shadow: 10px 12px 0 #ffd21f; text-align: center; padding-top: 34px; }
.be-pop--wheel .be-pop__title { margin-bottom: 8px; }
.be-wheel { position: relative; width: min(100%, 280px); margin: 6px auto 14px; }
.be-wheel__disc { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(20, 18, 16, 0.3)); }
.be-wheel__spin { transform-box: view-box; transform-origin: 0 0; transition: transform 4.6s cubic-bezier(0.12, 0.6, 0.1, 1); }
.be-wheel__label { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.02em; }
.be-wheel__pointer { position: absolute; top: -6px; left: 50%; z-index: 1; width: 0; height: 0; margin-left: -13px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 26px solid #141210; filter: drop-shadow(0 2px 0 #ffd21f); }
.be-wheel__form { display: grid; gap: 10px; }
.be-wheel__email { width: 100%; padding: 14px 16px; border: 2px solid #141210; border-radius: 999px; font-size: 16px; background: #fff; color: #141210; }
.be-wheel__consent { display: flex; gap: 8px; align-items: flex-start; justify-content: center; font-size: 13px; text-align: left; }
.be-wheel__go { width: 100%; }
.be-wheel__go[disabled] { opacity: 0.7; cursor: default; transform: none; }
.be-wheel__note { margin: 0; font-size: 12px; line-height: 1.5; opacity: 0.75; }
.be-wheel__note a { color: inherit; text-decoration: underline; }
.be-wheel__message { margin: 0; min-height: 1em; font-size: 14px; font-weight: 700; color: var(--accent); }
.be-wheel__win { display: grid; gap: 10px; justify-items: center; }
.be-wheel__prize { font-family: var(--font-display); font-size: 24px; font-weight: 900; text-transform: uppercase; }
.be-wheel__code { padding: 10px 18px; border: 2px dashed var(--accent); border-radius: 12px; background: #fff; font-size: 22px; font-weight: 800; letter-spacing: 0.12em; }
.be-pop--wheel .be-pop__later { margin-top: 12px; }
.wheel-timer { position: sticky; top: 0; z-index: 350; padding: 9px 16px; background: #141210; color: #fff; font-size: 14px; text-align: center; }
.wheel-timer strong { color: #ffd21f; }
.wheel-timer__left { display: inline-block; min-width: 4.2em; font-variant-numeric: tabular-nums; }
.wheel-timer.is-last { background: var(--accent); }
.wheel-timer.is-last strong { color: #fff; }
@media (prefers-reduced-motion: reduce) { .be-wheel__spin { transition-duration: 0.8s; } }

/* Choices that do not exist with what is already picked (js/variation-availability.js): greyed, still clickable */
.pill-select__option.is-unavailable { opacity: 0.38; border-style: dashed; }
.pill-select__option.pill-select__swatch.is-unavailable { opacity: 0.4; border-style: solid; }
.pill-select__option.pill-select__swatch.is-unavailable::after {
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--fg); transform: rotate(45deg); border-radius: 2px;
}
.variation-avail { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--fg-dim); }

/* "Status narudžbe" (OrderStatusPage): the result above the look-up form */
.order-status__result { padding-bottom: 24px; }
.order-status__ref { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.order-status__title { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(24px, 5vw, 32px); text-transform: uppercase; }
.order-status__steps { grid-template-columns: repeat(4, 1fr); }
.order-steps__item.is-current strong { color: var(--accent); }
.order-status__ship { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.order-status__ship div { padding: 12px 14px; border-radius: 12px; background: var(--bg-alt, #f4f2ee); }
.order-status__ship span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); }
.order-status__ship strong { font-size: 16px; }
.order-status__note { margin: 0 0 14px; font-size: 14px; color: var(--fg-dim); }
.order-status__items { margin: 0 0 10px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.order-status__items li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-status__items span { display: block; font-size: 13px; color: var(--fg-dim); }
.order-status__total { margin: 0; font-size: 15px; }
.order-status__error { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fde3e2; color: #a5120e; font-weight: 600; }
@media (max-width: 560px) { .order-status__steps { gap: 6px; } .order-status__ship { grid-template-columns: 1fr; } }

/* Footer sign-up for news and offers (js/newsletter.js): a dark band of its own at the top of the footer, the text on
   the left and the field with its button on the right (one under the other on phones); the footer columns below keep
   their own layout (logo left, links right) */
.footer-news-band { max-width: var(--container); margin: 0 auto; padding: 40px 32px 0; }
.footer-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); gap: 18px 48px; align-items: center; padding: 28px 32px; border-radius: 20px; background: #141210; color: #fff; }
.footer-news h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; }
.footer-news p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #c9c2b8; }
.footer-news strong { color: #ffd21f; }
.footer-news__form { display: grid; gap: 8px; }
.footer-news__row { display: flex; align-items: stretch; gap: 8px; }
.footer-news__row[hidden] { display: none; }
.footer-news__row input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #141210; font-size: 15px; }
.footer-news__row button { flex: none; height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform 0.15s; }
.footer-news__row button:hover { transform: translateY(-1px); }
.footer-news__row button[disabled] { opacity: 0.6; }
.footer-news small { font-size: 12px; color: #8d857b; }
.footer-news small a { color: inherit; text-decoration: underline; }
.footer-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.footer-news__msg { margin: 0; font-weight: 700; }
.footer-news__msg:empty { display: none; }
.footer-news__msg.is-ok { color: #6fdc8c; }
.footer-news__msg.is-error { color: #ff8a80; }
@media (max-width: 860px) { .footer-news { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .footer-news-band { padding: 28px 16px 0; } .footer-news { padding: 22px 18px; } .footer-news__row { flex-direction: column; } .footer-news__row input, .footer-news__row button { width: 100%; flex: none; } }

/* Checkout: the newsletter tick (NewsletterComponent) looks like the terms box under it */
#Checkout [id$="NewsletterOptIn_Holder"] {
  display: flex; align-items: flex-start; gap: 14px; margin: 20px 0; padding: 16px 18px;
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
#Checkout [id$="NewsletterOptIn_Holder"]:hover { border-color: #141210; }
#Checkout [id$="NewsletterOptIn_Holder"]:has(input:checked) { border-color: #141210; box-shadow: 4px 5px 0 #141210; }
#Checkout [id$="NewsletterOptIn_Holder"] input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: 0 0 26px; width: 26px; height: 26px; margin: 1px 0 0; padding: 0; cursor: pointer;
  background: #fff; border: 2px solid #141210; border-radius: 8px; transition: background 0.15s;
}
#Checkout [id$="NewsletterOptIn_Holder"] input[type=checkbox]:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
#Checkout [id$="NewsletterOptIn_Holder"] input[type=checkbox]:focus-visible { outline: 3px solid rgba(224, 32, 26, 0.35); outline-offset: 2px; }
#Checkout [id$="NewsletterOptIn_Holder"] label {
  margin: 0; float: none; width: auto; cursor: pointer; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--fg);
}
#Checkout [id$="NewsletterOptIn_Holder"] { margin-bottom: 10px; }

/* ==== Checkout "Narudžba" (PDF ispravke, Oct 2026): form first; the order list as one line on phones; code box below ==== */
.checkout-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "form summary" "form extras"; gap: 24px 56px; }
.checkout-form { grid-area: form; }
.checkout-summary { grid-area: summary; }
.checkout-extras { grid-area: extras; }
.checkout-summary__toggle { list-style: none; display: flex; align-items: baseline; gap: 8px; cursor: pointer; font-weight: 700; font-size: 15px; }
.checkout-summary__toggle::-webkit-details-marker { display: none; }
.checkout-summary__toggle strong { font-family: var(--font-display); font-weight: 900; font-size: 18px; }
.checkout-summary__toggle svg { margin-left: auto; align-self: center; transition: transform 0.2s var(--ease); }
.checkout-summary[open] .checkout-summary__toggle svg { transform: rotate(180deg); }
.checkout-summary__body { margin-top: 16px; }
@media (min-width: 901px) {
  .checkout-summary { position: sticky; top: 104px; }
  .checkout-summary__toggle { cursor: default; margin-bottom: 4px; }
  .checkout-summary__toggle svg { display: none; }
  .checkout-extras { position: relative; }
}
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "form" "extras"; gap: 18px; }
  #Checkout .checkout-summary, .checkout-summary { position: static; padding: 14px 16px; background: var(--bg-alt, #f8f5f0); border-radius: 14px; }
}
.checkout-page .pageTitle { margin-bottom: 18px; }

/* the fields: one column, name and surname side by side */
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.checkout-fields > * { grid-column: 1 / -1; min-width: 0; }
.checkout-fields > .field--half { grid-column: auto; }
.checkout-fields .field { margin-bottom: 14px; }
.checkout-fields .description { display: block; margin-top: 5px; font-size: 12.5px; color: var(--fg-dim); }
.checkout-guard { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkout-note-link { grid-column: 1 / -1; justify-self: start; margin: 2px 0 14px; padding: 6px 0; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.field.field--error input, .field.field--error textarea, .field.field--error select { border-color: #e0201a !important; box-shadow: 0 0 0 3px rgba(224, 32, 26, 0.14); }
.field-error { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #e0201a; }
.checkout-cod { grid-column: 1 / -1; margin: 6px 0 16px; padding: 14px 16px; border-radius: 14px; background: #fff7d6; border: 1.5px solid #f1d36b; font-size: 14px; line-height: 1.5; }
.checkout-cod strong { display: block; margin-bottom: 2px; font-size: 15px; }
.checkout-cod p { margin: 0; }
.checkout-form .Actions, .checkout-form .btn-toolbar { margin-top: 4px; }
.checkout-form .checkout-submit { width: 100%; padding: 18px 20px; font-size: 16px; white-space: normal; line-height: 1.3; }
.checkout-terms { margin: 10px 0 0; font-size: 12.5px; color: var(--fg-dim); text-align: center; }
.checkout-terms a { color: inherit; text-decoration: underline; }
@media (max-width: 380px) { .checkout-fields { grid-template-columns: 1fr; } .checkout-fields > .field--half { grid-column: 1 / -1; } }

/* "Imaš kod za popust?": a link that opens the field (cart and checkout) */
.coupon-toggle > summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.coupon-toggle > summary::-webkit-details-marker { display: none; }
.coupon-toggle[open] > summary { margin-bottom: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==== Cart (PDF ispravke): saves by itself, totals with delivery, one red "Završi narudžbu" right under the articles ==== */
.cart-page form.is-live [name="action_updatecart"], .cart-page form.is-live .btn-toolbar { display: none; }
.cart-page form.is-saving { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }
.cart-page table.cart tfoot tr.subtotal { display: none; }
.cart-change { margin-top: 6px; font-size: 13px; }
.cart-variation { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cart-variation__pick { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
.cart-variation__pick select { min-width: 92px; padding: 8px 30px 8px 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); border: 1.5px solid var(--line-strong); border-radius: 10px; background-color: #fff; }
.cart-totals { margin: 18px 0 0; padding: 16px 18px; background: var(--bg-alt, #f8f5f0); border-radius: 16px; }
.cart-totals__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14.5px; font-weight: 600; }
.cart-totals__row span:last-child { text-align: right; white-space: nowrap; }
.cart-totals__row--minor { color: var(--fg-dim); }
.cart-totals__row--total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 900; font-size: 20px; text-transform: uppercase; }
.cart-page .cartfooter { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 16px 0 22px; }
.cart-page .cartfooter .cart-checkout { display: block; width: 100%; padding: 18px 20px; text-align: center; font-size: 16px; background: var(--accent); border-color: var(--accent); color: #fff; }
.cart-page .cartfooter .continuelink:not(.button) { align-self: center; padding: 8px 4px; font-weight: 700; font-size: 14px; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 701px) { .cart-page .cartfooter, .cart-page .cart-totals { max-width: 460px; margin-left: auto; } }
.cart-page .cartfooter .continuelink:not(.button) { border: 0; background: none; box-shadow: none; }

/* ==== "Dodaj u korpu" without a reload: drawer with the added article (right on wide screens, from the bottom on phones) ==== */
.atc-message { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #e0201a; font-weight: 700; font-size: 14px; }
.atc-message[hidden] { display: none; }
.addproductform.is-adding [name="action_addtocart"] { opacity: 0.6; cursor: progress; }
.sidecart__added { margin-bottom: 18px; }
.sidecart__added-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 800; font-size: 16px; color: #1a9e4a; }
.sidecart__total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.sidecart__total strong { font-family: var(--font-display); font-weight: 900; font-size: 20px; }
.sidecart .checkout a { display: block; text-align: center; }
.sidecart__more { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 18px; }
.sidecart__continue { padding: 8px 0; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sidecart__cartlink { font-size: 13.5px; color: var(--fg-dim); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .cart-drawer { top: auto; left: 0; width: 100vw; max-height: 86vh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
  .cart-drawer.is-open { transform: translateY(0); box-shadow: 0 -20px 60px rgba(20, 15, 10, 0.3); }
  .cart-drawer__body { overflow-y: auto; }
  .sidecart--added .item .image img { width: 84px; height: 84px; }
}

/* ==== Floating buttons (PDF ispravke): one round chat button, no "na vrh" on phones, none in the cart and checkout ==== */
.chat-fab { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
.chat-fab__toggle { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #141210; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); cursor: pointer; transition: transform 0.15s ease; }
.chat-fab__toggle:hover { transform: translateY(-2px); }
.chat-fab__icon-close { display: none; }
.chat-fab.is-open .chat-fab__icon-open { display: none; }
.chat-fab.is-open .chat-fab__icon-close { display: block; }
.chat-fab__menu { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.chat-fab__menu[hidden] { display: none; }
.chat-fab__menu .chat-fab__btn span { display: inline !important; }
.chat-fab__menu .chat-fab__btn { padding: 11px 16px !important; }
body:has(.cart-page) .chat-fab, body:has(.cart-page) .scroll-top,
body:has(.checkout-page) .chat-fab, body:has(.checkout-page) .scroll-top { display: none !important; }
@media (max-width: 768px) { .scroll-top { display: none !important; } }

/* ==== Product page (PDF ispravke) ==== */
.product-main__price-note { margin: 4px 0 10px; font-size: 13px; color: var(--fg-dim); }
.product-trust-lines { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.product-trust-lines li { position: relative; padding-left: 24px; }
.product-trust-lines li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 2.5px solid #1a9e4a; border-bottom: 2.5px solid #1a9e4a; transform: rotate(-45deg); }
.product-trust-lines a { color: var(--fg-dim); text-decoration: underline; }
.atc-price { display: none; }
[data-reviews-empty][hidden] { display: none; }
@media (max-width: 700px) {
  /* picture, then name and price at once: the thumbnails are one row that scrolls sideways */
  .product-gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-top: 10px; padding-bottom: 2px; }
  .product-gallery__thumbs::-webkit-scrollbar { display: none; }
  .product-gallery__thumb { flex: 0 0 56px; width: 56px; height: 56px; }
  .product-main__title { margin-top: 4px; }
  /* the bottom bar: price of the chosen variation + the button */
  .addproductform .btn-toolbar { display: flex; align-items: center; gap: 12px; }
  .addproductform .btn-toolbar .atc-price { display: block; flex: 0 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .addproductform .btn-toolbar .atc-price del, .addproductform .btn-toolbar .atc-price s { display: none; }
  .addproductform .btn-toolbar .action, .addproductform .btn-toolbar input[type=submit] { flex: 1 1 auto; width: auto; }
  /* the round chat button sits above that bar */
  body:has(.addproductform) .chat-fab { bottom: 104px; }
  /* article names in lists: two lines instead of "…" */
  .product-card__title { -webkit-line-clamp: 2; }
}
@media (max-width: 700px) {
  .addproductform .btn-toolbar .atc-price { flex: 1 0 auto; overflow: visible; font-size: 16px; }
  .addproductform .btn-toolbar .action, .addproductform .btn-toolbar input[type=submit] { flex: 0 1 auto; padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 901px) {
  .checkout-grid { grid-template-rows: auto 1fr; }
  .checkout-extras { align-self: start; }
}
.checkout-form input.checkout-submit, .checkout-form button.checkout-submit { display: block; width: 100% !important; max-width: none; }
.checkout-note-link { margin-left: 0; margin-right: auto; }
#Checkout form input.checkout-submit { max-width: none; padding: 18px 20px; font-size: 16px; }
#Checkout form button.checkout-note-link { width: auto; max-width: none; padding: 6px 0; font-size: 14px; }

/* Narudžba on phones: the opened order list compact (small picture, name on two lines at most, plain total line:
   the amount is already in "Tvoja narudžba: X KM"), so the form is not pushed far down */
@media (max-width: 900px) {
  #Checkout .checkout-summary__body { margin-top: 12px; }
  #Checkout .checkout-summary table.cart tbody tr { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; padding: 8px; margin-bottom: 8px; border-radius: 12px; box-shadow: none; }
  #Checkout .checkout-summary table.cart .image { width: 52px; height: 52px; border-radius: 8px; }
  #Checkout .checkout-summary table.cart .image img { width: 48px; height: 48px; }
  #Checkout .checkout-summary table.cart h3 { margin: 0 0 2px; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; line-height: 1.25; text-transform: none; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #Checkout .checkout-summary table.cart .subtitle { margin: 0; font-size: 12px; line-height: 1.3; }
  #Checkout .checkout-summary table.cart .item-meta { display: block; margin-top: 2px; padding: 0; background: none; color: var(--fg-dim); font-size: 12px; font-weight: 600; border-radius: 0; }
  #Checkout .checkout-summary table.cart tbody td.c-total { font-family: var(--font-body); font-weight: 800; font-size: 14px; }
  #Checkout .checkout-summary table.cart tfoot tr { padding: 6px 2px; }
  #Checkout .checkout-summary table.cart tfoot th, #Checkout .checkout-summary table.cart tfoot td { font-size: 13px; font-weight: 600; }
  #Checkout .checkout-summary table.cart tfoot tr.Total { margin-top: 4px; padding: 10px 2px 2px; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  #Checkout .checkout-summary table.cart tfoot tr.Total th, #Checkout .checkout-summary table.cart tfoot tr.Total td { color: var(--fg); font-family: var(--font-body); font-weight: 800; text-transform: none; letter-spacing: 0; }
  #Checkout .checkout-summary table.cart tfoot tr.Total th { font-size: 14px; }
  #Checkout .checkout-summary table.cart tfoot tr.Total td { font-size: 16px; }
  .checkout-summary__toggle { font-size: 14px; }
  .checkout-summary__toggle strong { font-size: 17px; }
  .checkout-page .pageTitle { font-size: 30px; margin-bottom: 14px; }
}

/* Home slider: the captions are stacked in one grid cell instead of absolutely placed in a fixed-height box, so the box
   is as tall as the longest caption (a name on three lines on a phone pushed the button over the dots and arrows) */
.featured-slider__info { display: grid; min-height: 0 !important; }
.featured-slider__info .slide-info { position: relative; inset: auto; grid-area: 1 / 1; }
.featured-slider__footer { position: relative; z-index: 2; }
@media (max-width: 560px) {
  .featured-slider__info .title { font-size: 22px; line-height: 1.1; }
  .featured-slider__footer { padding-top: 14px; }
}

/* Phones: the round chat button right down in the bottom right corner (where "na vrh" used to be); lifted only while the
   "Dodaj u korpu" bar of a product page is actually on screen (body.atc-bar-visible, set in Page.ss) */
@media (max-width: 768px) {
  .chat-fab, body:has(.addproductform) .chat-fab { left: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; transition: bottom 0.25s ease; }
  .chat-fab__menu { align-items: flex-end; }
  .chat-fab__toggle { width: 48px; height: 48px; }
  body.atc-bar-visible .chat-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ==== Cart on wide screens: article cards on the left, the totals in a card on the right that stays in view ==== */
.cart-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #fff; }
.cart-qty__btn { width: 38px; height: 42px; padding: 0; border: 0; background: none; font-size: 20px; font-weight: 600; line-height: 1; color: var(--fg); cursor: pointer; }
.cart-qty__btn:hover { background: var(--bg-alt, #f8f5f0); }
.cart-page table.cart td.c-qty .cart-qty input { width: 44px !important; height: 42px !important; padding: 0; border: 0 !important; border-radius: 0; text-align: center; font-size: 16px; font-weight: 700; -moz-appearance: textfield; box-shadow: none; }
.cart-qty input::-webkit-outer-spin-button, .cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 700px) {
  .cart-page table.cart .subtitle { display: none; }
}
@media (min-width: 701px) {
  .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
  .cart-layout__side { position: sticky; top: 110px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 40px -28px rgba(20, 15, 10, 0.45); }
  .cart-layout__side .cart-totals { margin: 0; padding: 0; background: none; }
  .cart-layout__side .cartfooter, .cart-layout__side .cart-totals { max-width: none; margin-left: 0; }
  .cart-layout__side .cartfooter { margin: 18px 0 10px; }
  .cart-layout__side .coupon-box { margin-top: 8px; }

  .cart-page table.cart, .cart-page table.cart tbody { display: block; width: 100%; }
  .cart-page table.cart thead, .cart-page table.cart colgroup, .cart-page table.cart tfoot { display: none; }
  .cart-page table.cart tbody tr {
    display: grid; grid-template-columns: 116px minmax(0, 1fr) auto 110px; grid-template-areas: "img title qty total" "img title rem rem";
    column-gap: 20px; row-gap: 6px; align-items: start;
    margin-bottom: 16px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 30px -24px rgba(20, 15, 10, 0.4);
  }
  .cart-page table.cart tbody td { display: block; padding: 0; border: 0; }
  .cart-page table.cart td.c-img { grid-area: img; }
  .cart-page table.cart td.c-title { grid-area: title; min-width: 0; }
  .cart-page table.cart td.c-qty { grid-area: qty; }
  .cart-page table.cart td.c-total { grid-area: total; align-self: center; text-align: right; font-family: var(--font-display); font-weight: 900; font-size: 19px; white-space: nowrap; }
  .cart-page table.cart td.c-remove { grid-area: rem; justify-self: end; align-self: end; }
  .cart-page table.cart td.c-unit { display: none; }
  .cart-page table.cart .image { width: 116px; height: 116px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt, #f8f5f0); border-radius: 14px; overflow: hidden; }
  .cart-page table.cart .image img { width: 100%; height: 100%; object-fit: contain; }
  .cart-page table.cart h3 { margin: 4px 0 4px; font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 1.15; text-transform: uppercase; }
  .cart-page table.cart h3 a { color: var(--fg); text-decoration: none; }
  .cart-page table.cart .subtitle { display: none; }
  .cart-page table.cart .item-meta { display: block; font-size: 13px; font-weight: 600; color: var(--fg-dim); }
  .cart-page table.cart .cart-change { margin-top: 10px; }
  .cart-page table.cart td.c-qty { align-self: center; }
}
/* "Ukloni": a small link with a bin, the tick box behind it */
.cart-page .remove-line { position: relative; gap: 6px; padding: 6px 2px; font-size: 13px; color: var(--fg-dim); text-decoration: underline; text-underline-offset: 3px; }
.cart-page .remove-line input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cart-page .remove-line::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.cart-page .remove-line:hover { color: var(--accent); }
@media (max-width: 700px) {
  .cart-page table.cart tbody tr { grid-template-areas: "img title title" "qty qty total" "rem rem rem"; }
  .cart-page table.cart td.c-qty { justify-self: start; }
  .cart-page table.cart td.c-total { align-self: center; }
  .cart-page table.cart .item-meta { display: block; padding: 0; background: none; color: var(--fg-dim); font-size: 12.5px; font-weight: 600; border-radius: 0; }
}
@media (min-width: 701px) {
  .cart-page table.cart tbody tr { padding-right: 22px; }
}

/* ==== Cart on phones, compact: picture | name + the size / colour lists; quantity and price below; a bin in the corner ==== */
@media (max-width: 700px) {
  .cart-page h1.pagetitle { font-size: 32px; margin-bottom: 16px; }
  .cart-page table.cart tbody tr {
    position: relative; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "img title title" "qty qty total";
    column-gap: 12px; row-gap: 12px; align-items: start; margin-bottom: 12px; padding: 12px; border-radius: 16px;
  }
  .cart-page table.cart .image { width: 76px; height: 76px; border-radius: 12px; }
  .cart-page table.cart td.c-title { padding-right: 30px; }
  .cart-page table.cart h3 { margin: 2px 0 2px; font-family: var(--font-body); font-weight: 800; font-size: 14.5px; line-height: 1.25; text-transform: none; letter-spacing: 0; }
  .cart-page table.cart .item-meta { display: none; }
  .cart-page table.cart .cart-change { margin-top: 8px; }
  .cart-variation { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
  .cart-variation__pick { gap: 2px; font-size: 10px; letter-spacing: 0.05em; }
  .cart-variation__pick select { width: 100%; min-width: 0; padding: 7px 24px 7px 9px; font-size: 13.5px; border-radius: 9px; background-position: right 7px center; }
  .cart-page table.cart td.c-qty { align-self: center; }
  .cart-page table.cart td.c-total { align-self: center; font-size: 18px; }
  .cart-page table.cart td.c-remove { position: absolute; top: 8px; right: 8px; padding: 0; border: 0; }
  .cart-page table.cart td.c-remove .remove-line { width: 32px; height: 32px; justify-content: center; padding: 0; border-radius: 50%; font-size: 0; text-decoration: none; }
  .cart-page table.cart td.c-remove .remove-line::before { width: 17px; height: 17px; }
  .cart-page table.cart td.c-remove .remove-line:active { background: var(--bg-alt, #f8f5f0); }
  .cart-qty__btn { width: 36px; height: 38px; }
  .cart-page table.cart td.c-qty .cart-qty input { width: 38px !important; height: 38px !important; }
  .cart-totals { margin-top: 6px; padding: 14px 16px; }
  .cart-totals__row--total { font-size: 18px; }
}
@media (max-width: 700px) {
  .cart-variation__pick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cart-variation { align-items: end; }
}

/* ==== Cart on phones like the checkout's order list: one beige panel with compact white article cards, then
   Međuzbroj / Dostava / Ukupno in the same panel; quantity − 1 + and a bin on each card, size/colour behind "Promijeni" ==== */
.cart-variation-toggle { display: none; }
@media (max-width: 700px) {
  .cart-layout__items { padding: 12px 12px 4px; background: var(--bg-alt, #f8f5f0); border-radius: 16px 16px 0 0; }
  .cart-layout__side .cart-totals { margin-top: 0; padding: 4px 16px 14px; border-radius: 0 0 16px 16px; background: var(--bg-alt, #f8f5f0); }
  .cart-page table.cart tbody tr {
    grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img title total" "img qty rem";
    column-gap: 12px; row-gap: 8px; align-items: center; margin-bottom: 10px; padding: 12px; border-radius: 14px; box-shadow: none;
  }
  .cart-page table.cart .image { width: 56px; height: 56px; border-radius: 10px; }
  .cart-page table.cart td.c-img { align-self: start; }
  .cart-page table.cart td.c-title { padding-right: 0; }
  .cart-page table.cart h3 { margin: 0 0 2px; font-family: var(--font-body); font-weight: 800; font-size: 14px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.01em; }
  .cart-page table.cart .subtitle { display: block; margin: 0; font-size: 12.5px; color: var(--fg-dim); line-height: 1.35; }
  .cart-page table.cart .item-meta { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--fg-dim); }
  .cart-page table.cart td.c-total { align-self: start; font-family: var(--font-body); font-weight: 800; font-size: 15px; }
  .cart-page table.cart td.c-qty { grid-area: qty; align-self: center; }
  .cart-page table.cart td.c-remove { position: static; grid-area: rem; justify-self: end; align-self: center; }
  .cart-page table.cart .cart-change { margin-top: 4px; }
  .cart-variation-toggle { display: inline-block; padding: 2px 0; background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .cart-variation { display: none; margin-top: 8px; }
  .cart-variation.is-open { display: grid; }
  .cart-qty { border-radius: 10px; }
  .cart-qty__btn { width: 32px; height: 32px; font-size: 17px; }
  .cart-page table.cart td.c-qty .cart-qty input { width: 32px !important; height: 32px !important; font-size: 14px; }
  .cart-totals__row { font-size: 14px; }
  .cart-totals__row--total { margin-top: 4px; padding-top: 10px; font-family: var(--font-body); font-weight: 800; font-size: 16px; text-transform: none; }
}
/* phones: the cart is only a list like the checkout's (no quantity, size, colour or remove there; that is on a computer) */
@media (max-width: 700px) {
  .cart-page table.cart tbody tr { grid-template-areas: "img title total"; }
  .cart-page table.cart td.c-qty, .cart-page table.cart td.c-remove, .cart-page table.cart .cart-change { display: none !important; }
  .cart-page table.cart td.c-img { align-self: center; }
}
@media (max-width: 700px) {
  .cart-layout__items form, .cart-layout__items table.cart, .cart-layout__items fieldset { margin: 0 !important; padding: 0; border: 0; }
  .cart-layout__items .Actions, .cart-layout__items .btn-toolbar { display: none; }
  .cart-layout__items { padding-bottom: 2px; }
}

/* Narudžba: the order list and the delivery/code box are one column; on wide screens that whole column stays in view
   (the list alone used to stay while the box scrolled over it), on phones its parts keep their places in the grid */
.checkout-side { display: contents; }
@media (min-width: 901px) {
  .checkout-grid { grid-template-areas: "form side"; grid-template-rows: auto; }
  .checkout-side { display: block; grid-area: side; position: sticky; top: 104px; align-self: start; }
  .checkout-side .checkout-summary { position: static; }
  .checkout-side .checkout-extras { margin-top: 16px; }
}

/* Enlarged picture: on a white card (the pictures are see-through; a black hoodie vanished on the dark overlay) */
.lightbox__pic {
  background-color: #fff; background-origin: content-box; padding: clamp(14px, 3vw, 36px); box-sizing: border-box;
  border-radius: 22px; box-shadow: inset 0 0 140px rgba(120, 105, 90, 0.16), 0 30px 80px rgba(0, 0, 0, 0.45);
}
.lightbox__pic::after { border-radius: 22px; }
.lightbox__note { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 560px) { .lightbox__pic { width: calc(100vw - 16px); border-radius: 16px; } }

/* Enlarged picture on a grey "studio" background: a light behind the article that fades to darker grey at the edges */
.lightbox__pic {
  background-color: #b8b2aa;
  background-image: var(--pic), radial-gradient(ellipse 70% 62% at 50% 46%, #fbfaf8 0%, #ebe7e1 38%, #cfc9c1 72%, #aaa39a 100%);
  background-size: contain, cover; background-repeat: no-repeat, no-repeat; background-position: center, center;
  background-origin: content-box, border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* SilverShop's own sidecart.css (was a separate blocking file, required by SideCart.ss); at the end, where it used to
   win over equal rules above */
.sidecart .item { clear: both; position: relative; padding-right: 16px; }
.sidecart .image { float: left; margin-right: 1em; }
.sidecart .remove { position: absolute; top: 0; right: 0; }
.sidecart p { margin-bottom: 0.1em; }
.sidecart .quantity { font-weight: bold; }

/* ==== Product page: description, payment, material and delivery under the picture on wide screens ====
   (the buy box is the tall column; the space under the picture stayed empty and the description was far down) */
.product-page__layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "main" "info"; gap: 18px; align-items: start; }
.product-page__layout > .product-gallery { grid-area: gallery; }
.product-page__layout > .product-main { grid-area: main; }
.product-page__layout > .product-info { grid-area: info; min-width: 0; }
.product-info .product-payment-secure--wide { margin-top: 8px; }
.product-info .product-accordion--full { margin-top: 24px; }
@media (min-width: 701px) {
  .product-page__layout { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); grid-template-areas: "gallery main" "info main"; column-gap: 28px; row-gap: 24px; }
  .product-page__layout > .product-gallery, .product-page__layout > .product-main { position: static; flex: none; width: auto; max-width: none; min-width: 0; }
  .product-info .product-payment-secure--wide { margin-top: 0; padding-top: 0; gap: 10px 24px; }
  .product-info .product-payment-secure--wide > p { flex: 1 1 100%; }
  .product-info .product-accordion--full { margin-top: 18px; }
}
@media (min-width: 901px) {
  .product-page__layout { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: 56px; }
}
@media (min-width: 1100px) {
  .product-page__layout { grid-template-columns: minmax(0, 580px) minmax(0, 1fr); }
}

/* "Plaćanje pouzećem" under the picture: a small card with room around the text and a cash icon */
.product-info .product-payment-secure--wide {
  display: block; position: relative; margin-top: 8px; padding: 18px 20px 18px 64px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg-alt, #f8f5f0);
}
.product-info .product-payment-secure--wide::before {
  content: ''; position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%; background: #1a9e4a;
  -webkit-mask: none; mask: none;
}
.product-info .product-payment-secure--wide::after {
  content: ''; position: absolute; left: 27px; top: 27px; width: 16px; height: 16px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.product-info .product-payment-secure--wide > .product-payment-secure__heading { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.02em; }
.product-info .product-payment-secure--wide > p { max-width: none; font-size: 14.5px; line-height: 1.55; color: var(--fg-dim); }
.product-info .product-payment-secure--wide .product-payment-cards { margin-top: 12px; }
.product-info .product-accordion--full { margin-top: 22px; }