/* Jost, self-hosted from php/fonts/ (SIL Open Font Licence — see OFL.txt
   there). Served from our own domain on purpose: pulling it from Google's CDN
   would send every visitor's IP address to Google before they've agreed to
   anything. The two subsets mirror what Google's CSS serves; latin-ext is the
   one that carries č, š and ž. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1a1a1a;
  --ink-soft: #3a3a3a;
  --muted: #757575;
  --faint: #616060;
  --line: #ececec;
  --tint: #f6f5f3;
  --gutter: 40px;
}

* { box-sizing: border-box; }


body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Jost Light is the base weight throughout; 400/500 carry the wordmark
     and the few places that need to sit forward. */
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }

.caret { font-size: 9px; }

/* Shown only in a preview session — see preview_shop_slug(). Sits above the
   sticky header rather than over it, so it never covers the nav. */
.preview-bar {
  margin: 0;
  padding: 10px 24px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-align: center;
}

/* --- header ------------------------------------------------------------ */

/* The header follows the page down — it carries the nav, which is the only
   way around the catalogue. It needs its own background and stacking context
   so product tiles pass underneath it rather than through it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px var(--gutter) 22px;
}

.brand {
  display: block;
  text-align: center;
  text-transform: uppercase;
}

.brand:hover { color: var(--ink); }

.brand-name {
  display: block;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.1;
  /* The wordmark is letterspaced from the left edge of each glyph, which
     leaves a trailing gap; nudging it back keeps the lockup centred. */
  margin-right: -0.22em;
}

.brand-tagline {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.42em;
  margin: 4px -0.42em 0 0;
}

/* --- nav --------------------------------------------------------------- */

.mainnav ul {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0px;
}

.mainnav li { 
  position: relative; 
  padding: 0 18px;
}

.navlink {
  display: inline-block;
  font-size: 15px;
  letter-spacing: 0.09em;
  color: var(--ink);
  cursor: pointer;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.navlink:hover { color: var(--muted); }
.navlink.is-active { border-bottom-color: var(--ink); }

/* Hover-opened dropdowns — no JavaScript needed. */
.dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: 14px;
  z-index: 20;
}

.dropdown-right { left: auto; right: 0; }

.has-menu:hover .dropdown,
.has-menu:focus-within .dropdown { display: block; }

.dropdown:not(.dropdown-wide) > a {
  display: block;
  width: 15rem;
  padding: 10px 16px;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.06em;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.dropdown:not(.dropdown-wide) > a:last-of-type { border-bottom: 1px solid var(--line); }
.dropdown:not(.dropdown-wide) > a:hover { background: var(--tint); color: var(--ink); }
.dropdown a.is-active { color: var(--ink); font-weight: 400; }
.dropdown-clear { color: var(--muted); }

/* The shop filter is a small form rather than a list of links, so several
   shops can be ticked before the page reloads once. Same box as the plain
   menus above: one column, hairline border, rows of the same height. */
.filter-form {
  width: 15rem;
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.filter-option:hover { background: var(--tint); }

.filter-option input {
  flex: none;
  width: 14px;
  height: 14px;
  accent-color: var(--ink);
}

/* Read out by a screen reader and counted by a crawler, never drawn: the
   labels on the two price boxes, and the page's own h1, which the design
   says through the breadcrumb and the carousel instead.

   The clip and the 1px box are what keep it out of the layout. display: none
   would not do — that takes it out of the accessibility tree as well, and
   out of what a crawler treats as a heading. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.filter-price {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.filter-price-label { margin-right: auto; }
.filter-price-dash, .filter-price-unit { color: var(--muted); }

.filter-price input {
  width: 4.2rem;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}

.filter-price input:focus { outline: 0; border-color: var(--ink); }

.filter-apply {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Only needed where the parent link opens a panel instead of navigating,
   i.e. on touch screens — see the media query at the end of this file. The
   selector carries enough weight to beat the column-heading rules below,
   which also match this link. */
.mainnav .dropdown a.dropdown-all { display: none; }

/* On desktop a menu is not a box floating under one item — it is the header
   continuing downward: a full-width band, hairline top and bottom, with its
   contents lined up against the same gutter as the rest of the page.
   Below 861px these become the tap panel instead (media query at the end). */
@media (min-width: 861px) {
  /* The panel is positioned against the header, not the <li>, which is what
     lets it span the full width. */
  .mainnav li { position: static; }

  /* Each item's hover area has to reach the bottom of the header, or the
     pointer crosses dead space on its way down and the panel closes before
     you get there. Moving the nav's bottom padding onto the links makes them
     full-height tabs, which also puts the underline on the separator line. */
  .mainnav ul { padding-bottom: 0; }

  .navlink {
    padding-bottom: 20px;
    border-bottom-width: 2px;
  }

  .mainnav .has-menu:hover .dropdown,
  .mainnav .has-menu:focus-within .dropdown,
  .mainnav .has-menu:hover .dropdown-wide,
  .mainnav .has-menu:focus-within .dropdown-wide {
    left: 0;
    right: 0;
    top: 100%;
    /* Pull up over the header's own hairline: the panel's border-top takes its
       place, leaving no 1px strip for the pointer to fall through on its way
       into the menu. */
    margin-top: -1px;
    width: auto;
    min-width: 0;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    /* Content sits in the page's 1520px column, with the usual gutter on
       narrower screens — so the menu lines up with the grid below it. */
    padding: 44px max(var(--gutter), calc((100% - 1520px) / 2)) 52px;
  }

  /* Which item opened it: without this the band appears with nothing tying
     it to the word you are pointing at. */
  .mainnav .has-menu:hover > .navlink,
  .mainnav .has-menu:focus-within > .navlink {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }

  .mainnav .has-menu:hover .dropdown:not(.dropdown-wide),
  .mainnav .has-menu:focus-within .dropdown:not(.dropdown-wide) {
    display: block;
  }

  /* :not(.dropdown-all) so this doesn't override the rule hiding the phone-only
     "Vse: …" row, which it would otherwise outrank. */
  .mainnav .dropdown:not(.dropdown-wide) > a:not(.dropdown-all) {
    display: block;
    width: auto;
    padding: 5px 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--muted);
  }

  .mainnav .dropdown:not(.dropdown-wide) > a:not(.dropdown-all):hover {
    background: none;
    color: var(--ink);
  }
}

/* A childless subcategory inside a mega-menu (e.g. Kozmetika › Dodatki)
   is its own column heading, not a full-width row. */
.dropdown-wide { display: none; }

.has-menu:hover .dropdown-wide,
.has-menu:focus-within .dropdown-wide {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px 20px;
}

@media (min-width: 861px) {
  /* Columns of a fixed width rather than stretched thirds, so a category with
     two subcategories and one with five look like the same menu. */
  .mainnav .has-menu:hover .dropdown-wide,
  .mainnav .has-menu:focus-within .dropdown-wide {
    display: grid;
    grid-template-columns: repeat(auto-fill, 13rem);
    justify-content: start;
    gap: 28px 56px;
  }

  .mainnav .dropdown-wide > a,
  .mainnav .dropdown-col { width: auto; }
}

/* A childless subcategory sits in the top row as its own heading, so it
   takes the column-head treatment rather than looking like a leaf. */
.dropdown-wide > a {
  display: block;
  width: 11rem;
  align-self: flex-start;
  padding: 5px 0 9px;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dropdown-col { width: 11rem; text-align: left; }

.dropdown-head {
  display: block;
  padding: 5px 0 9px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dropdown-leaf {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.dropdown-leaf:hover { color: var(--ink); }

/* --- intro ------------------------------------------------------------- */

.lede {
  max-width: 1080px;
  margin: 0 auto;
  padding: 62px var(--gutter) 54px;
  text-align: center;
}

.lede p {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.lede p + p { margin-top: 22px; }

.lede-toggle {
  margin-top: 32px;
  padding: 0 0 3px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font: inherit;
  font-size: 18px;
  letter-spacing: 0.09em;
  color: var(--ink);
  cursor: pointer;
}

.lede-toggle:hover { border-bottom-color: var(--ink); }

/* --- sort / filter bar -------------------------------------------------- */

/* Stays in view while the grid scrolls past it: on a category of 350 products
   the trail and the two menus are exactly what you want to reach after
   scrolling, and they were at the top of a very long page.

   It sticks UNDER the header, which is sticky itself and whose height changes
   with the viewport - hence --header-h, measured by the script in
   partials/foot.php rather than guessed at here. The fallback matters: if that
   script never runs, a toolbar stuck at top: 0 would sit behind the header
   instead of below it.

   z-index 40 puts it over the page but under the header (50), so the nav's own
   menus still open across it. */
.toolbar {
  position: sticky;
  top: var(--header-h, 160px);
  z-index: 40;
  /* Opaque, or the products would scroll through it. */
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.toolbar-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  /* Slimmer than the 22px it started at: the toolbar is sticky, so its height
     is spent on every screen of every category rather than once at the top. */
  padding: 14px var(--gutter);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.crumbs .sep { margin: 0 8px; opacity: 0.6; }
.crumb-current { color: var(--ink); }

/* The current crumb is an h1 on a category page. Inline and font: inherit so
   it sits in the trail exactly as the span it replaced did — a heading's own
   size, weight and margins would break the row in three places. */
h1.crumb-current {
  display: inline;
  margin: 0;
  font: inherit;
}
.count { color: var(--faint); }

.toolbar-menu { position: relative; border-left: 1px solid var(--line); }

.toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 14px 54px;
  font-size: 15px;
  letter-spacing: 0.09em;
  color: var(--muted);
  cursor: pointer;
}

.toolbar-menu:hover .toolbar-button,
.toolbar-menu:focus-within .toolbar-button,
.toolbar-button.is-active { color: var(--ink); }

.toolbar-menu .dropdown { padding-top: 0; }

/* --- hero carousel ------------------------------------------------------ */

.hero-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 32px var(--gutter) 110px;
}

.hero { position: relative; }

.hero-slide {
  display: none;
  /* The containing block for the stretched link below. Without it the hit
     area would resolve against .hero and cover the arrows too. */
  position: relative;
  /* stretch, not center: the picture is one half of the panel and runs its
     full height. The text is re-centred on its own below. */
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  min-height: 400px;
  /* No padding here — it would show as tint around the picture. It belongs
     to the text, which is the only half that wants breathing room. */
  padding: 0;
  background: var(--tint);
  overflow: hidden;
  animation: heroFade 0.45s ease;
}

.hero-slide.is-current { display: flex; }

@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-text {
  /* 672 rather than 520: box-sizing is border-box everywhere on this site,
     so the padding counts against the width and the line length would
     otherwise shrink by exactly the padding added. */
  max-width: 672px;
  padding: 64px 56px 64px 96px;
  align-self: center;
}

.hero-eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero-title {
  margin: 0 0 26px;
  font-size: 38px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-wrap: pretty;
}

/* The link is the whole block of words now, not just the last line of it, so
   it carries no styling of its own - the eyebrow, headline and cue inside it
   keep looking exactly as they did. */
.hero-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* What used to be the link itself: still the one underlined thing on the
   slide, and still what tells you there is somewhere to go. */
.hero-cue {
  /* Left inline, exactly as the <a> it replaces: on an inline box the
     padding below pushes the rule down without growing the line, which is
     what set the gap under these words before. */
  font-size: 16px;
  letter-spacing: 0.09em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

.hero-link:hover .hero-cue { color: var(--muted); border-bottom-color: var(--muted); }

/* The whole slide is the click target, not just the words. The link already
   covers the text; this stretches its hit area over the rest of the panel,
   so the slide is one anchor rather than three and still reads as one link.

   Hovering anywhere on the slide now greys the underline, which is what tells
   you the picture and the tint are clickable too.

   The arrows and dots sit after the slides in the markup and are positioned,
   so they keep painting above this and stay clickable. */
.hero-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* No background of its own: a white box around the picture would draw a
   square on the slide's tint. The picture sits on the slide itself. */
.hero-image {
  /* Half the panel, flush to its top, bottom and outer edge. Change this one
     number to give the picture more or less of the slide. */
  position: relative;
  /* It is positioned and comes after the text, so it would otherwise paint
     over the stretched link and swallow every click on the picture half. */
  pointer-events: none;
  flex: 0 0 50%;
  max-width: 50%;
  overflow: hidden;
}

/* cover, not contain: the picture now has a fixed box to fill, and a slide
   photo is one you choose rather than one a shop's feed happens to send —
   so it can be picked to crop well. Landscape suits this shape best.
   
   Absolutely positioned, which is what makes the cropping work: an in-flow
   image still reports its natural height while the browser measures the row,
   so a tall photo grew the whole slide instead of being cut to fit it. Out
   of the flow it contributes no height, the slide is sized by the text and
   its min-height, and the picture fills whatever that comes to. */
.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #5a5a5a;
  cursor: pointer;
}

.hero-nav:hover { color: var(--ink); }
.hero-prev { left: 26px; }
.hero-next { right: 26px; }

/* Under the text rather than centred on the slide: dead centre is now the
   seam between the tint and the picture, which is the one place they would
   be half on each. */
.hero-dots {
  position: absolute;
  bottom: 26px;
  left: 96px;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 26px;
  height: 1px;
  padding: 0;
  border: 0;
  background: #cfcdc9;
  cursor: pointer;
  transition: background 0.2s ease;
}

.hero-dot.is-current { background: #2a2a2a; }

/* --- product grid ------------------------------------------------------ */

/* Category shortcuts under the carousel on the front page. Squares rather
   than circles: everything else on the page is a rectangle, and a row of
   bubbles would be the only round thing on it. */
.cat-tiles {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 var(--gutter) 110px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

/* The carousel's own 110px below it is the gap between two sections; with the
   tiles directly underneath it only needs to be a break between them. A
   browser without :has simply keeps the roomier version. */
.hero-wrap:has(+ .cat-tiles) { padding-bottom: 56px; }

.cat-tile { display: block; }

.cat-tile-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  /* The tint shows while the picture loads, and stands in for a category
     that has no product to borrow one from. */
  background: var(--tint);
}

.cat-tile-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cat-tile:hover .cat-tile-img img { transform: scale(1.03); }

.cat-tile-name {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.cat-tile:hover .cat-tile-name { color: var(--muted); }

.catalogue {
  max-width: 1520px;
  margin: 0 auto;
  padding: 64px var(--gutter) 110px;
}

.grid {
  display: grid;
  /* minmax(0, …) so a tile can never be widened by its own image's
     intrinsic size; every column stays exactly equal. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 26px;
}

.card-img {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tint);
  overflow: hidden;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

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

.card-body { padding: 22px 8px 0; text-align: center; }

.card-shop {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Inherited rather than the link colour: the name should look exactly as it
   did, a quiet line above the product, not a second thing competing with it.
   Darkening on hover is what says it can be clicked. */
.card-shop a { color: inherit; }
.card-shop a:hover { color: var(--ink); }

.card-name {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: #2a2a2a;
  text-wrap: pretty;
}

.card-price {
  margin: 10px 0 0;
  font-size: 15px;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.card-updated {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.empty { margin: 0; color: var(--muted); font-size: 17px; }

/* --- footer ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--tint);
  padding: 64px var(--gutter) 32px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.footer-columns {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  /* The middle column is wider: the shop list flows into sub-columns and
     needs the room, while the other two are single files of links. */
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 48px 40px;
}

.footer-block + .footer-block { margin-top: 44px; }

.footer-head {
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  display: grid;
  gap: 10px;
}

.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

/* The shop list can run long, so it flows into columns rather than standing
   as one very tall row beside a short one. */
.footer-shops {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 24px;
}

.footer-base {
  max-width: 1520px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  letter-spacing: 0.09em;
  color: var(--faint);
}

.footer-brand { text-transform: uppercase; letter-spacing: 0.2em; }

/* --- contact form ------------------------------------------------------- */

.contact-form {
  display: grid;
  gap: 22px;
  max-width: 32rem;
  margin-top: 40px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.contact-form textarea { resize: vertical; line-height: 1.6; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--ink); }

.btn-dark {
  justify-self: start;
  padding: 14px 34px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-dark:hover { background: #000; }

.form-note {
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.form-note.is-ok { color: var(--ink); }
.form-note.is-error { color: #a2382f; border-color: #a2382f; }

/* --- narrower screens --------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --gutter: 28px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-text { padding: 56px 40px 56px 64px; }
  .hero-dots { left: 64px; }
  /* Narrower sides at this width; the height matches the rule above. */
  .toolbar-button { padding: 14px 32px; }
}

@media (max-width: 860px) {
  /* Still the grid, just tighter: a tablet has room for all five across and
     fills the line with them. Phones wrap to three in the rule below. */
  .cat-tiles { gap: 16px 12px; padding-bottom: 72px; }
  .cat-tile-name { margin-top: 10px; font-size: 11px; letter-spacing: 0.12em; }
  .header-top { grid-template-columns: 1fr; gap: 14px; padding: 18px var(--gutter) 14px; }
  .header-side { display: none; }
  /* A sticky header can't afford a nav that wraps to three lines on a phone,
     so the categories become one swipeable row instead. */
  .mainnav ul {
    gap: 24px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 14px;
  }
  .mainnav ul::-webkit-scrollbar { display: none; }
  .mainnav li { flex: none; }
  .navlink { white-space: nowrap; }

  /* Hover means nothing on a touch screen, and the scrolling nav row above
     would clip a panel positioned inside it. So the panel is taken out of
     that container with position: fixed and opened by tap (.is-open). */
  .has-menu:hover .dropdown,
  .has-menu:focus-within .dropdown,
  .has-menu:hover .dropdown-wide,
  .has-menu:focus-within .dropdown-wide { display: none; }

  .has-menu .dropdown {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h, 160px);
    padding-top: 0;
    max-height: calc(100vh - var(--header-h, 160px));
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(26, 26, 26, 0.06);
  }

  /* The toolbar's own menus open below the toolbar, not below the header:
     it is sticky, so a panel at the header's edge would cover the button that
     opened it. --toolbar-h is measured in partials/foot.php; the fallback of
     zero simply puts them back where the nav's panels are. */
  .toolbar-menu.has-menu .dropdown {
    top: calc(var(--header-h, 160px) + var(--toolbar-h, 0px));
    max-height: calc(100vh - var(--header-h, 160px) - var(--toolbar-h, 0px));
  }

  .has-menu.is-open .dropdown { display: block; }

  .has-menu.is-open .dropdown-wide {
    display: block;
    padding: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Where the menu ends, in ink rather than the hairline grey used elsewhere.
     On a phone the panel opens below the header and drops straight into the
     product grid; at #ececec nothing marked the seam, so a tap on a category
     looked like it had done nothing. Phone only — on desktop the band is
     obviously a band. */
  .has-menu.is-open .dropdown,
  .has-menu.is-open .dropdown-wide {
    border-bottom: 1px solid var(--ink);
  }

  /* Full-width rows rather than desktop's fixed-width columns. */
  .dropdown:not(.dropdown-wide) > a,
  .dropdown-wide > a,
  .dropdown-col,
  .dropdown-head,
  .dropdown-leaf {
    width: auto;
    display: block;
    text-align: left;
  }

  /* Single-level menus (Obleke, Hrana in pijača, Trgovine) match the
     third-level items of the mega-menu here too: grey, no dividers. Roomier
     padding than the desktop list keeps each row a comfortable tap target. */
  .mainnav .dropdown:not(.dropdown-wide) > a:not(.dropdown-all) {
    padding: 14px 24px;
    border: 0;
    background: none;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--muted);
  }

  .filter-form { width: auto; border: 0; }
  .filter-option { padding: 14px 24px; }
  .filter-apply { padding: 16px 24px; }
  .filter-price { padding: 14px 24px; }
  .filter-price input { width: 5rem; padding: 8px; }

  .dropdown-col { padding: 6px 0; border-bottom: 1px solid var(--line); }
  .dropdown-head { padding: 14px 24px 6px; }
  .dropdown-leaf { padding: 10px 24px 10px 40px; }
  .dropdown-wide > a { padding: 16px 24px; border-bottom: 1px solid var(--line); }

  .mainnav .dropdown a.dropdown-all {
    display: block;
    padding: 16px 24px;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
  }
  .lede { padding: 44px var(--gutter) 38px; }
  .lede p { font-size: 17px; }
  /* Two rows on a phone: the trail across the top, the two menus under it.
     Both are tighter than on a desktop because the toolbar is sticky, so
     every pixel it takes is a pixel of products permanently off screen - at
     the desktop padding the header and this row together held a quarter of
     the display. */
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar-context {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter);
    font-size: 14px;
    /* No wrapping onto a second line: a deep trail plus the count would
       otherwise make this row taller than the two menus below it, and the
       toolbar is sticky, so that height is paid for on every screen. A long
       trail scrolls sideways within its own row instead - the longest in the
       catalogue runs 215px past the edge and still costs the page nothing. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .toolbar-context::-webkit-scrollbar { display: none; }
  .crumbs { white-space: nowrap; }
  .toolbar-menu:first-of-type { border-left: 0; }
  .toolbar-button { padding: 13px 16px; font-size: 15px; }
  .hero-wrap { padding: 16px var(--gutter) 72px; }
  /* Stacked: the text on the tint, the picture full width underneath and
     still flush to the edges. */
  .hero-slide { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-text { max-width: none; padding: 40px 32px 44px; align-self: auto; }
  .hero-image { flex: none; max-width: 100%; height: 260px; }
  .hero-dots { left: var(--gutter); }
  .hero-title { font-size: 30px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .catalogue { padding: 44px var(--gutter) 72px; }
  .footer-columns { grid-template-columns: 1fr; gap: 40px; }
  .footer-shops { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .site-footer { padding: 44px var(--gutter) 28px; }
}

/* Below this, five across would be 50px squares. They wrap to three instead —
   two rows with one empty cell at the end — which reads far better on a phone
   than a row that scrolls sideways and hides half the categories off-screen. */
@media (max-width: 620px) {
  .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  /* The lockup has to clear the burger now. The tagline is the wide part —
     it is mostly letter-spacing — so that comes down furthest, and the
     negative margins follow it, since each one only cancels the trailing
     gap its own spacing leaves behind. */
  .brand-name {
    font-size: 20px;
    letter-spacing: 0.18em;
    margin-right: -0.18em;
  }

  .brand-tagline {
    font-size: 10px;
    letter-spacing: 0.3em;
    margin: 3px -0.3em 0 0;
  }
  .hero-text { padding: 32px 24px 40px; }
  .hero-image { height: 220px; }
  .hero-nav { display: none; }
}

/* An older phone — 320px — leaves the tagline touching the burger even at
   the size above, so it steps down once more. */
@media (max-width: 360px) {
  .brand-name { font-size: 18px; }

  .brand-tagline {
    font-size: 9px;
    letter-spacing: 0.24em;
    margin-right: -0.24em;
  }
}

/* --- newsletter pop-up -------------------------------------------------- */

/* Without this the `hidden` attribute does nothing: an author `display: flex`
   overrides the browser's own [hidden] { display: none }, and the pop-up sits
   open on every page load. */
.np-backdrop[hidden] { display: none; }

.np-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 26, 26, 0.45);
  animation: npFade 0.25s ease;
}

@keyframes npFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.np {
  display: grid;
  grid-template-columns: 45fr 55fr;
  width: min(880px, 100%);
  max-height: min(560px, 90vh);
  background: #fff;
  overflow: hidden;
}


.np-media { background: var(--tint); overflow: hidden; }

.np-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stand-in until a real image is dropped into php/images/. */
.np-placeholder {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    135deg, var(--tint), var(--tint) 10px, #efeeeb 10px, #efeeeb 20px
  );
}

.np-placeholder span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.np-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 64px 56px;
  text-align: center;
}

.np-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.np-close:hover { color: var(--ink); }

.np-title {
  margin: 0;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Same trailing-space trim as the wordmark. */
  margin-right: -0.22em;
}

.np-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Without this the form stays on screen after a successful sign-up: an author
   `display` beats the browser's [hidden] { display: none }, so setting the
   attribute in JavaScript would have no effect. Same trap as .np-backdrop. */
.np-form[hidden] { display: none; }

.np-form { display: flex; flex-direction: column; gap: 14px; }

.np-form input[type="email"] {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.09em;
  text-align: center;
  border-radius: 0;
}

.np-form input[type="email"]::placeholder { color: var(--muted); }
.np-form input[type="email"]:focus { outline: none; border-color: var(--ink); }

.np-form button {
  padding: 15px 16px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

.np-form button:hover { background: #000; }
.np-form button:disabled { opacity: 0.5; cursor: default; }

.np-note {
  margin: 0;
  min-height: 1.2em;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.np-note.is-ok { color: var(--ink); }
.np-note.is-error { color: #a2382f; }

@media (max-width: 860px) {
  .np { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .np-media { max-height: 34vh; }
  .np-placeholder { min-height: 180px; }
  .np-body { padding: 40px 28px 44px; gap: 18px; }
  .np-title { font-size: 22px; }
}

/* --- content pages ------------------------------------------------------ */

.post,
.post-index {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px var(--gutter) 110px;
}

.post-head { margin-bottom: 44px; }

.post-date {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.post-title {
  margin: 0;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-wrap: pretty;
}

.post-teaser {
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.post-draft {
  margin: 22px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* The body is hand-written HTML, so these style plain tags rather than
   classes — whatever you type comes out looking like the rest of the site. */
.post-body { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.post-body p { margin: 0 0 22px; text-wrap: pretty; }

.post-body h2 {
  margin: 48px 0 16px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.post-body h3 {
  margin: 36px 0 12px;
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.post-body a { border-bottom: 1px solid var(--line); }
.post-body a:hover { border-bottom-color: var(--ink); }
.post-body img { width: 100%; height: auto; display: block; margin: 32px 0; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }

.post-body blockquote {
  margin: 32px 0;
  padding-left: 22px;
  border-left: 1px solid var(--line);
  color: var(--muted);
}

/* A product strip inside a post. The reading column is 640px wide once its
   gutters are taken off, so 146px is what lets four sit on one line; a tag
   asking for more tiles per row sets --tile-min to a smaller width. */
.grid-inline {
  margin: 36px 0 44px;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min, 146px), 1fr));
  gap: 24px 18px;
}

/* In a post the products sit in the text, not in a catalogue grid: the
   pictures are shown whole, on the page itself, so each one is the shape the
   shop photographed rather than a row of identical tinted squares. The
   catalogue keeps its cropped tiles, where equal sizes are what makes the
   grid read as a grid. */
.grid-inline .card-img {
  aspect-ratio: 3 / 4;
  background: transparent;
}

/* Width, height and margin repeated on purpose: a post's own pictures are
   styled by .post-body img, which otherwise wins here and stretches a tile's
   photo past its box, where overflow: hidden crops it again. */
.grid-inline .card-img img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

/* Five or six across: catalogue-sized type would be all wrapping and no
   product name. */
.grid-tight .card-shop { font-size: 10px; letter-spacing: 0.14em; }
.grid-tight .card-name { margin-top: 8px; font-size: 14px; line-height: 1.35; }
.grid-tight .card-price { margin-top: 7px; font-size: 13px; }
.grid-tight .card-updated { display: none; }

/* Whatever a post asks for, a tile on a phone stays big enough to see. This
   sits after the rule above rather than up in the phone block, because both
   are .grid-inline and the later one is the one that counts. */
@media (max-width: 860px) {
  .grid-inline {
    grid-template-columns: repeat(auto-fit, minmax(max(var(--tile-min, 146px), 130px), 1fr));
  }
}

.post-back { margin: 56px 0 0; font-size: 15px; letter-spacing: 0.09em; }

/* --- the list of content pages ------------------------------------------ */

.post-list { display: grid; gap: 8px; margin-top: 40px; }

.post-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

/* Without a hero image there is no first column to fill. */
.post-card-plain { grid-template-columns: 1fr; }

.post-card:first-child { border-top: 1px solid var(--line); }
.post-card:hover { color: var(--ink); }
.post-card:hover .post-card-title { color: var(--muted); }

.post-card-img { display: block; background: var(--tint); aspect-ratio: 4 / 3; overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body { display: grid; gap: 6px; }
.post-card-title { font-size: 19px; letter-spacing: 0.03em; }
.post-card-teaser { font-size: 15px; color: var(--muted); text-wrap: pretty; }

@media (max-width: 860px) {
  .post, .post-index { padding: 40px var(--gutter) 72px; }
  .post-title { font-size: 26px; }
  .post-teaser { font-size: 17px; }
  .post-card { grid-template-columns: 96px 1fr; gap: 16px; }
}

/* --- Consent bar ----------------------------------------------------------
   Injected by the Google Ads script in partials/analytics.php, so it exists
   only where there is something to consent to — and never for a visitor
   without JavaScript, who loads nothing from Google in the first place.
   Below the newsletter pop-up (z-index 100) on purpose: the two never show
   at once, but if they ever did, the pop-up is the one being answered. */
.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px var(--gutter);
  background: #fff;
  border-top: 1px solid var(--line);
}

.consent-text {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.consent-text a { text-decoration: underline; }

.consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

.consent-button {
  padding: 5px 9px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.consent-accept {
  border-color: var(--ink-soft);
  background: var(--ink-soft);
  color: #fff;
}

.consent-accept:hover { border-color: var(--ink); background: var(--ink); }
.consent-decline:hover { border-color: var(--muted); color: var(--muted); }

@media (max-width: 860px) {
  .consent-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .consent-button { flex: 1; }
}

/* --- Phone menu -----------------------------------------------------------
   A drawer from the left, one level at a time. The nav row that used to carry
   the categories on a phone scrolled sideways and opened a panel underneath,
   which made the second and third levels of the tree nearly unreachable —
   this replaces it below 861px. Above that the header's own nav is unchanged. */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 1px;
  background: var(--ink);
}

.drawer { display: none; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(26, 26, 26, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.drawer.is-open .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 121;
  display: flex;
  flex-direction: column;
  width: min(86vw, 380px);
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}

.drawer.is-open .drawer-panel { transform: none; }

.drawer-head { padding: 12px var(--gutter) 4px; }

.drawer-close {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

/* The panels are stacked in here and slid across one at a time. */
.drawer-body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.drawer-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 6px 0 24px;
  list-style: none;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  /* The slide is animated; the visibility is not. Interpolating it is what
     made the swap blink: the browser has to decide which frame counts as
     visible, and Safari gives up a frame to it. Instead it is switched at a
     fixed moment — off only once the panel has finished sliding away. */
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.drawer-list.is-current {
  transform: none;
  visibility: visible;
  /* On the way in, the opposite: visible before the first frame of movement,
     with no delay at all. */
  transition: transform 0.25s ease, visibility 0s linear 0s;
}

/* A level you have come through waits on the LEFT, not the right. Without
   this, going deeper slid the parent out the same side the child arrived
   from and the two crossed over each other. Panels you have not opened stay
   on the right, so going back returns them there. */
.drawer-list.is-past { transform: translateX(-100%); }

.drawer-list li + li { border-top: 1px solid var(--line); }

.drawer-list a,
.drawer-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px var(--gutter);
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.drawer-chevron {
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}

/* "Nazaj" and "poglej vse" are ways out of the level, not items in it. The
   list's own selector is two classes deep, so these have to match it. */
.drawer-list .drawer-back {
  justify-content: flex-start;
  gap: 8px;
  color: var(--muted);
}

.drawer-list .drawer-all { color: var(--muted); }

.drawer-foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px var(--gutter) 26px;
  border-top: 1px solid var(--line);
}

.drawer-foot a {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 860px) {
  .burger { display: flex; }
  .drawer { display: block; }
  .drawer[hidden] { display: none; }

  /* The categories live in the drawer now. */
  .mainnav { display: none; }

  /* Taken out of the grid rather than given a column: the wordmark and its
     tagline already use the full width of a phone, and a column for the
     burger would push them off centre and wrap the tagline. */
  .header-top { position: relative; }

  .header-top > .header-side:first-child {
    display: block;
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- The pager ------------------------------------------------------------
   48 tiles to a page. The whole category used to arrive in one response —
   355 tiles and 355 image requests for Kozmetika — which is what the page
   was slow for. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 56px;
}

.pager-count {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.pager-prev,
.pager-next {
  padding: 13px 26px;
  border: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pager-next { background: var(--ink); color: #fff; }
.pager-next:hover { background: #000; color: #fff; }
.pager-prev:hover { border-color: var(--muted); color: var(--muted); }

/*
Vsi butiki
*/

h2[id^="crka-"] {
  scroll-margin-top: calc(var(--header-h, 160px) + 24px);
}
a[href^="#crka-"] {
  text-decoration: underline;
  font-weight: bold;
}
/* --- "Vsi butiki" menu -----------------------------------------------------
   A row of letters, and under it the boutiques of whichever letter the
   pointer is on. Laying all fourteen letters out as columns would be 2620px
   wide and mostly empty — thirty boutiques spread over fourteen letters.

   Which letter is showing is held as data-letter on the panel, set by the
   script in foot.php. Without JavaScript the first letter stays on screen and
   every letter is still a link to its section on /vsi-butiki, so nothing is
   unreachable. */
.butiki-menu {
  display: none;
  flex-direction: column;
  gap: 0;
}

.has-menu:hover .butiki-menu,
.has-menu:focus-within .butiki-menu { display: flex; }

/* The category mega-menu turns .dropdown-wide into a grid of 13rem columns on
   a wide screen. This panel shares that class but is not that shape: left as a
   grid, its letter row and its boutique list become two 13rem columns side by
   side, which is the letters squashed into a sixth of the panel with the shops
   beside them. Same selector weight as that rule, and later in the file. */
@media (min-width: 861px) {
  .mainnav .has-menu:hover .butiki-menu,
  .mainnav .has-menu:focus-within .butiki-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

/* One row, never two: the alphabet reads as an index only while it is a
   single line. space-between spreads the letters across the full width of the
   panel instead of bunching them at the left, which is also what stops them
   needing a gap of their own. */
.butiki-letters {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.butiki-letter {
  display: block;
  /* min-width: 0 so a letter can shrink rather than force the row to wrap;
     the padding is what keeps them apart now that the gap is gone. */
  min-width: 0;
  padding: 5px 4px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

/* A letter nobody is filed under: still printed, so the row does not change
   width as boutiques are added, but plainly not a link. */
.butiki-letter.is-empty { color: #cfcdc9; }

.butiki-letter.is-current,
.butiki-letter:hover { background: var(--tint); color: var(--ink); }

.butiki-all {
  /* Last in the row and never squeezed: it is words, not a single character,
     so it is the one thing that would wrap if the row ran short. */
  flex: none;
  margin-left: 20px;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.butiki-all:hover { color: var(--ink); }

.butiki-shops {
  /* A fixed minimum, so the panel does not jump as the pointer crosses a
     letter with one boutique and then one with five. */
  min-height: 108px;
  padding-top: 18px;
}

.butiki-group { display: none; }

.butiki-group.is-current {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 24px;
}

@media (max-width: 1180px) {
  .butiki-group.is-current { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- one product's page ------------------------------------------------- */

/* The toolbar row exists for the breadcrumb alone here, so it drops the grid
   that holds a category page's sort and filter menus. */
.toolbar-plain { display: block; }

.product {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 0 110px;
}

/* Thirty shops photograph their products in every shape from 2:3 to 7:4, and
   thirteen of them shoot square. There is no one frame that suits them: a 4:5
   box left a 2:3 dress with a band down each side, and chicatella's 7:4 tiles
   floating in a box that was 54% empty.
   
   So the frame is not fixed at all. The photograph is given a height and a
   width to stay within and sizes itself inside them, keeping its own shape;
   the column it sits in is what stays the same from page to page. Nothing is
   cropped, and there is no empty frame left over to look wrong. */
.product-main {
  display: grid;
  /* The words have a floor, so that between the one-column breakpoint and a
     full-width screen it is the picture that gives up room rather than the
     text being squeezed into a ribbon. */
  grid-template-columns: minmax(0, 420px) minmax(360px, 1fr);
  gap: 64px;
  align-items: start;
  /* The picture's column, the gap, and a fixed 560 for the words - so the
     text block is the same width whichever column the picture gets. */
  max-width: 1044px;
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
}

/* A shop that shoots landscape gets a wider column. In the ordinary one a 7:4
   photograph could only be 420 wide and so 240 tall, which read as a thumbnail
   beside a full-height block of text.
   
   Only where there is room for both. Widening the picture on a 1024 screen
   took the difference straight out of the words, which left the text at its
   floor and the button wrapping - a worse trade than a smaller photograph. */
@media (min-width: 1200px) {
  .product-main.is-wide {
    grid-template-columns: minmax(0, 560px) minmax(360px, 1fr);
    max-width: 1184px;
  }
}

/* Shrink-wraps the photograph, so the thumbnails below line up with the
   picture's edges rather than with a frame that is wider than it. */
.product-gallery {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.product-photo img {
  display: block;
  /* auto both ways, bounded: the image keeps its own proportions and settles
     at whichever limit it meets first. No object-fit, because the box is the
     photograph - there is nothing for it to fit inside.
     
     Deliberately not stretched up to the limits. Some shops' originals are
     barely larger than this, and enlarging those would only make them soft. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
}

.product-thumbs {
  display: flex;
  flex-wrap: wrap;
  /* Centred under the photograph rather than ranged left, which matters now
     that the strip is exactly as wide as the picture. */
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  /* Takes its width from the photograph above instead of giving the shrink-
     wrapped gallery a width of its own. Eight thumbnails in a row are wider
     than a 2:3 photograph, and without this they, not the picture, decided
     how wide the gallery was - which put the strip back out of line with it. */
  width: 0;
  min-width: 100%;
}

.product-thumb {
  --thumb: 62px;
  width: var(--thumb);
  /* An explicit height rather than aspect-ratio. These are <button> elements,
     and Safari does not apply aspect-ratio to a form control the way it does
     to an ordinary box - on an iPhone the buttons came out about two pixels
     tall, so the whole strip rendered as four thin lines under the photo. */
  height: calc(var(--thumb) * 1.25);
  /* Never shrink to fit the row either; they wrap onto a second line. */
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  /* White for the same reason as the photograph above it. */
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.72;
}

.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb:hover { opacity: 1; }
.product-thumb.is-current { border-color: var(--ink); opacity: 1; }

.product-info { padding-top: 6px; }

.product-shop {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

.product-name {
  margin: 0 0 20px;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-wrap: pretty;
}

.product-price {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
}

.product-checked {
  margin: 0 0 28px;
  font-size: 13px;
  color: var(--faint);
}

.product-excerpt {
  margin: 0 0 32px;
  max-width: 54ch;
  color: var(--ink-soft);
  line-height: 1.65;
  text-wrap: pretty;
}

/* The one thing this page is for. Filled rather than underlined, which is the
   only place on the site that treats a link as a button — it is also the only
   link that leaves. */
.product-buy {
  display: inline-block;
  padding: 16px 38px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

.product-buy:hover { background: #3a3a3a; color: #fff; }

.product-more {
  margin: 16px 0 0;
  font-size: 14px;
}

.product-more a {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.product-more a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* A product the shop has delisted. Said plainly rather than dressed as an
   error: the page is still worth reading, the thing is simply gone. */
.product-gone {
  margin: 0 0 4px;
  padding: 16px 20px;
  background: var(--tint);
  color: var(--ink-soft);
  font-size: 15px;
}

/* Deliberately quiet. This is a footnote to the product above it, so it is one
   row of small tiles that scrolls sideways rather than a grid - a grid of
   full-size tiles read as a second catalogue and took the eye off the thing
   the page is about. */
.product-related {
  /* The tile width, in one place: the arrows are centred on the photographs
     rather than on the whole tile, and a photograph is 5/4 of a tile wide. */
  --tile: 168px;
  padding: 72px var(--gutter) 0;
  margin-top: 64px;
  border-top: 1px solid var(--line);
}

.product-related-title {
  margin: 0 0 28px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
}

/* What the arrows are positioned against. It runs past the gutter so the strip
   can bleed off the page edge, while the arrows stay on the content's edges. */
.related-viewport {
  position: relative;
  margin-right: calc(-1 * var(--gutter));
}

.related-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  /* proximity, not mandatory: a flick that lands between two tiles is left
     where it was put rather than being dragged to the nearest edge. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* The strip is the one thing on the page that scrolls sideways; its bar
     would sit under the tiles and read as a page-width scrollbar. The arrows
     and a touch drag are how it moves. */
  scrollbar-width: none;
  /* Keeps the last tile off the window edge while the row still runs to it. */
  padding-right: var(--gutter);
}

.related-strip::-webkit-scrollbar { display: none; }

.related-strip .card {
  flex: 0 0 var(--tile);
  scroll-snap-align: start;
}

/* Over the row and level with the middle of the photographs, the way the hero
   carousel's arrows sit on a slide - rather than in the heading, where they
   read as part of the title. Centred on the picture and not on the whole tile,
   which would put them over the price. */
.related-arrow {
  position: absolute;
  top: calc(var(--tile) * 1.25 / 2);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #5a5a5a;
  cursor: pointer;
}

.related-arrow:hover { color: var(--ink); }
.related-arrow[disabled] { opacity: 0.25; cursor: default; }

.related-prev { left: 0; }
.related-next { right: var(--gutter); }

@media (max-width: 860px) {
  .product-related { --tile: 136px; }
  /* Fingers scroll the strip; the arrows are for a pointer. */
  .related-nav { display: none; }
}

@media (max-width: 860px) {
  .product-main,
  .product-main.is-wide {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px var(--gutter) 0;
  }

  /* On a phone the photograph simply takes the width it is given, whatever
     shape it is - a height limit here would leave it small in the middle of
     an empty screen. */
  .product-gallery { width: auto; }
  .product-photo img { width: 100%; max-height: none; }

  .product-name { font-size: 26px; }
  .product-buy { display: block; text-align: center; }

  .product-related {
    padding: 48px var(--gutter) 0;
    margin-top: 40px;
  }
}

/* --- a boutique's own page ---------------------------------------------- */

/* Who the shop is, between the toolbar and its products. Narrower than the
   grid and left-ranged like the rest of the page: this is something to read,
   not a banner. */
.shop-about-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--gutter) 0;
}

.shop-about-name {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
}

.shop-about-intro p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.shop-about-intro p + p { margin-top: 16px; }

@media (max-width: 860px) {
  .shop-about-intro { padding-top: 32px; }
  .shop-about-intro p { font-size: 16px; }
}