/**
 * Arbor — Phase 2 WooCommerce shop styling (product cards + archive grid).
 *
 * Loaded + scoped under body.arbor-ds by inc/arbor-shop.php (only when the
 * rollout is active). Tokens from style.css. No borders/lines, no shadows.
 * Restyles the theme's existing card markup (tpls/shop/style/classic-grid.php);
 * the "AKCIJA" badge uses WooCommerce's own `.product.sale` class (no markup).
 * !important is used where needed to beat the compiled reeco.css.
 */

/* ---- Card container ----
   No `overflow: hidden` here. It was paired with the (disabled) panel background to
   clip the radius, but with no fill there is nothing to clip — and it silently shaved
   the descenders off the last line of text whenever that line ended flush with the
   card's bottom edge, which is exactly what happens on a card with a two-line title
   ("po meri" rendered as "ɔ meri"). The thumbnail keeps its own overflow for its
   rounding, so nothing is lost. */
body.arbor-ds .gs-product-item {
    /* background: var(--ds-surface); */
    border-radius: var(--ds-radius);
}
/* ---- Thumbnail container (card panel behind the image) ----
 * NOTE: the IMAGE sizing (fixed-height box, flex-centering, object-fit: contain —
 * i.e. "uniform box, centered, no side crop, space above/below") is owned by the
 * Customizer → Additional CSS snippet (<style id="wp-custom-css">, Serbian comments).
 * It targets body.post-type-archive-product / body.tax-product_cat .gs-product-thumbnail
 * with height: clamp(260px,22vw,380px) + display:flex center + object-fit: contain !important,
 * and loads AFTER this file. Do NOT set position / aspect-ratio / object-fit on
 * .entry-image-ratio or its <img> here — it fights that snippet (position:absolute on
 * the img pulls it OUT of the flex-centering) and breaks the centering. We only style
 * the surrounding container + a transform-only hover zoom. */
body.arbor-ds .gs-product-item .gs-product-thumbnail,
body.arbor-ds .gs-product-item .entry-thumbnail {
    position: relative;
    /* border-radius: calc(var(--ds-radius) - 12px); TODO: enable when photos do not have white background*/
    overflow: hidden;
    background: var(--ds-page);
}
body.arbor-ds .product-item--classic-grid .entry-thumbnail{
    margin-bottom: 0px;
}
/* Subtle hover zoom — transform only, compatible with the snippet's flex-centered
 * contained image (does not touch position/size/object-fit). */
/* No hover zoom. A `scale()` on a `contain`-fitted photo enlarges it past the box on
   whichever axis it was already flush with, and the box's overflow then clips it — so
   the zoom cropped the product on hover. Every photo must always be shown whole, so
   the cross-fade below is the only hover affordance. */

/* ---- Hover: cross-fade to the second gallery image ----
   Sits under the badges (z-index 2) and never intercepts the card link.

   The wrapper is painted opaque white. The two photos rarely share an aspect ratio, so
   the incoming one letterboxes differently from the outgoing one — without a fill, the
   primary photo showed through those bars as stray slivers of the product down each
   edge. White is the page colour, so the letterbox reads as empty space, not an image. */
body.arbor-ds .gs-product-thumbnail .arbor-card-alt {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-page);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
body.arbor-ds .gs-product-thumbnail .arbor-card-alt img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    display: block;
}
body.arbor-ds .gs-product-item:hover .arbor-card-alt { opacity: 1; }
/* Touch devices have no hover, so the same cross-fade is played once per card by
   arbor-card-peek.js — one card at a time, out and back. Same transition, so the
   two routes into the second photo look identical. */
body.arbor-ds .gs-product-item.is-peeking .arbor-card-alt { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    body.arbor-ds .gs-product-thumbnail .arbor-card-alt { transition: none; }
}

/* ---- Image box: one 6:5 frame for every product card, everywhere ----
   Applies wherever classic-grid.php renders — shop and tag archives, category and room
   grids, related products, cart cross-sells. It has to be universal: the template no
   longer prints the theme's inline `padding-bottom` hack while the rollout is active
   (it carried its own !important, which no stylesheet can override), so any surface
   NOT covered here would collapse the wrapper to zero height and lose its image.

   6:5 sits between the two source shapes in the library (1:1 and 1.25:1) so both nearly
   fill the frame without cropping — see arbor-category.css for the arithmetic. An
   aspect-ratio box also gives isotope a correct height before the photo loads, which
   the Customizer snippet's clamp height cannot.

   Three classes, so this outranks that snippet's `body.tax-product_cat ...` (0,2,1). */
body.arbor-ds .gs-product-item .gs-product-thumbnail {
    position: relative;
    height: auto !important;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    background: var(--ds-page);     /* white behind every photo, including the letterbox */
}
body.arbor-ds .gs-product-item .gs-product-thumbnail .entry-image-ratio {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
body.arbor-ds .gs-product-item .gs-product-thumbnail .entry-image-ratio img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* never crop the product */
    object-position: center !important;
    display: block !important;
}

/* ---- Content-aware framing ----
   `contain` centres the canvas, not the product. Photos carry wildly different
   amounts of baked-in margin (one product fills 83% of its canvas, the next 34% and
   sits in the bottom half), so contained photos land at different heights and sizes
   across a row — and a product's hover photo rarely matches its primary.

   arbor_shop_frame_attrs() measures where the product actually is and emits three
   custom properties that place the image so THAT box is centred and scaled to a fixed
   share of the frame. Values come from inline style, but the declarations live here
   because they need !important to beat the compiled reeco.css — an inline `width`
   would lose to it, a var() read by an !important rule does not.

   Photos with no detectable content box simply never get the class and stay on the
   `contain` rule above.

   Five classes deep so this outranks the `.arbor-cat__grid ... img` rules in
   arbor-category.css (0,4,2), which would otherwise force width/height back to 100%. */
body.arbor-ds .gs-product-item .gs-product-thumbnail .entry-image-ratio img.arbor-framed,
body.arbor-ds .gs-product-item .gs-product-thumbnail .arbor-card-alt img.arbor-framed {
    position: absolute !important;
    left: var(--af-l, 0) !important;
    top: var(--af-t, 0) !important;
    width: var(--af-w, 100%) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;     /* the element already IS the photo's box */
}

/* ---- "AKCIJA" badge on sale products (CSS-only via WooCommerce's .sale) ---- */
body.arbor-ds .product.sale .gs-product-thumbnail::before {
    content: "AKCIJA";
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 14px;
    background: var(--ds-brand);
    color: var(--ds-on-brand);
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-body);
    font-size: 12px;
    font-weight: var(--ds-fw-button);
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Out-of-stock badge to match (dark pill) */
body.arbor-ds .gs-product-badge.out-of-stock {
    border-radius: var(--ds-radius-pill);
    background: var(--ds-ink) !important;
    color: var(--ds-on-dark) !important;
}

/* ---- Details: three distinct type tiers -------------------------------------
   Before this, the title (Outfit 700 / 20px / #181818) and the price (Jost 400 /
   20px / #181818) were the SAME size and the SAME colour in two different
   typefaces stacked on top of each other — two fonts competing at identical
   weight in the reader's eye, with no hierarchy to separate them. The tags added a
   third element in the same ink.

   Now they differ on size AND colour, so family alone never has to carry the
   distinction:
     title  Outfit 600 · 17px · --ds-ink
     price  Jost   500 · 16px · --ds-ink   ("od" prefix 13px · --ds-body)
     meta   Jost   400 · 13px · --ds-body
*/
body.arbor-ds .entry-details-title {
    margin: 0 0 6px;
    font-family: var(--ds-font-head) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -.005em !important;
    height: auto !important;       /* override reeco's fixed title height on archive/category pages */
    min-height: 0 !important;
}
body.arbor-ds .entry-details-title a { 
    color: var(--ds-ink) !important; 
    text-decoration: none;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
}
body.arbor-ds .entry-details-title a:hover { color: var(--ds-brand) !important; }

/* Categories: hidden on cards — the card says photo, name, price and nothing else. */
body.arbor-ds .gs-product-item .gs-product-cats { display: none !important; }

/* Price + sale price (crossed-out original grey, sale in crimson) */
body.arbor-ds .entry-details-price,
body.arbor-ds .entry-details-price .price,
body.arbor-ds .entry-details-price .amount {
    font-family: var(--ds-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: var(--ds-ink) !important;
    margin: 0;
}
/* "Od" prefix: a qualifier, not part of the number — demote it so the figure reads
   first. Lowercased in CSS (the plugin emits "Od "). */
body.arbor-ds .entry-details-price .price-prefix {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--ds-body) !important;
    text-transform: lowercase;
}
body.arbor-ds .entry-details-price del,
body.arbor-ds .entry-details-price del .amount {
    color: var(--ds-body) !important;
    font-weight: 400 !important;
    opacity: .75;
    margin-right: 8px;
}
body.arbor-ds .entry-details-price ins,
body.arbor-ds .entry-details-price ins .amount {
    color: var(--ds-brand) !important;
    text-decoration: none;
}

/* ---- Whole photo is the link --------------------------------------------
   classic-grid.php ends the thumbnail with an empty <a class="gs-product-link">
   meant to stretch over the photo, but reeco.css only positions it under
   `.gs-woo-page .product-holder ...` — the legacy shop archive's wrapper. The
   category scaffold, the room landings, related products and cross-sells have no
   .gs-woo-page, so there the anchor rendered as a zero-size inline element and
   only the title was clickable. Position it here for every card instead.

   z-index 3 puts it above the hover photo (1) and the AKCIJA badge (2): nothing
   in the thumbnail is interactive, so the entire frame — badge included — is a
   click target. The anchor is aria-hidden + tabindex="-1" in the template: the
   title link is the accessible one, this is a pointer convenience. */
body.arbor-ds .gs-product-item .gs-product-thumbnail .gs-product-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: auto;
    height: auto;
    cursor: pointer;
}

/* ---- Name and price centred under the photo, at every width --------------
   The Customizer's Additional CSS (the DB block grep never finds — see
   arbor-category.css for the story) ships
   `body.tax-product_cat .entry-details { display: block !important;
   text-align: left !important }` at (0,2,1). It was written for phones, but the
   media-query wrapper around it was stripped when the block was saved, so it
   applies at every width and on the shop archive too. The legacy archive still
   centred because reeco.css centres the title and price elements themselves
   under .gs-woo-page; the category grid has no such rule, so its type sat
   flush-left under a centred photo.

   Three classes + !important outrank that block everywhere the card renders. */
body.arbor-ds .gs-product-item .entry-details,
body.arbor-ds .gs-product-item .entry-details__inner,
body.arbor-ds .gs-product-item .entry-details-title,
body.arbor-ds .gs-product-item .entry-details-price {
    text-align: center !important;
}
body.arbor-ds .gs-product-item .entry-details-title,
body.arbor-ds .gs-product-item .entry-details-price {
    justify-content: center !important;   /* when the Customizer block makes them flex */
}

/* ---- Card rhythm ---- */
body.arbor-ds .gs-product-item { margin-bottom: var(--ds-space-4); }

/* ---- Loop add-to-cart (if rendered): pill button, design language ---- */
body.arbor-ds .products .add_to_cart_button,
body.arbor-ds .products .button.product_type_simple,
body.arbor-ds .products .button.add_to_cart_button {
    display: inline-block;
    margin-top: var(--ds-space-2);
    padding: 12px 22px !important;
    background: var(--ds-ink) !important;
    color: var(--ds-on-dark) !important;
    border: 0 !important;
    border-radius: var(--ds-radius-pill) !important;
    font-family: var(--ds-font-body) !important;
    font-size: var(--ds-fs-button) !important;
    font-weight: var(--ds-fw-button) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.arbor-ds .products .add_to_cart_button:hover { background: var(--ds-brand) !important; }

/* ---- Shop header (result count / ordering), light cleanup ---- */
body.arbor-ds .woocommerce-result-count,
body.arbor-ds .woocommerce-result-count { font-family: var(--ds-font-body); color: var(--ds-body); }

/* ---- Catalogue sort control (woocommerce/loop/orderby.php) ----------------
   Our own markup, not WooCommerce's `.woocommerce-ordering` form — see the
   header comment on that template for why (select2 hijacked both the look and
   the change event). Self-scoped rather than body.arbor-ds: the classes can only
   ever be ours, and the control has to look right wherever the template renders.

   One pill: a grey "SORTIRAJ" prefix, the current value in ink, a chevron at the
   trailing edge. The <label> wraps the <select> so the whole pill is a hit
   target, and on a phone tapping it opens the native picker — which is the best
   sort UI on mobile and the thing select2 was taking away. */
.arbor-sort { display: flex; justify-content: flex-end; margin: 0; }
.arbor-sort__control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 20px;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-pill);
    line-height: 1;
    cursor: pointer;
}
.arbor-sort__label {
    position: relative;
    z-index: 1;
    pointer-events: none;
    flex: 0 0 auto;
    font-family: var(--ds-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-body);
    white-space: nowrap;
}
/* Resets: the theme's bare `select` rule (reeco.css) gives every select a white
   fill, a hairline border, a 4.33rem height, its own background-image chevron
   and width:100%. All of it has to go for the select to read as plain text
   inside the pill.

   Hit area: a click on a <label> only FOCUSES its <select>, it never opens the
   list — so with the select sized to its text, a click on "SORTIRAJ", the
   chevron or the pill's padding did nothing visible and only a second click on
   the value opened it. The select is therefore stretched under the whole pill:
   negative margins pull it out to both pill edges and matching padding puts its
   text back where it was, so the layout is unchanged. The label and chevron sit
   above it with pointer-events:none, so every click lands on the select itself.
   --arbor-sort-lead = pill padding (20) + label width (62, measured: "SORTIRAJ"
   at 12px/600/.08em) + gap (10); --arbor-sort-trail = gap + chevron + padding. */
.arbor-sort__select {
    --arbor-sort-lead: 92px;
    --arbor-sort-trail: 45px;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0 calc(-1 * var(--arbor-sort-trail)) 0 calc(-1 * var(--arbor-sort-lead));
    padding: 0 var(--arbor-sort-trail) 0 var(--arbor-sort-lead);
    border-radius: var(--ds-radius-pill);
    border: 0;
    background: none;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--ds-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-ink);
    text-overflow: ellipsis;
    cursor: pointer;
}
.arbor-sort__select:focus { outline: none; }
/* Focus cue is a fill, not a ring: Chrome matches :focus-visible on a select even
   after a mouse click, so an outline here drew a black border on every click.
   The darker surface still shows keyboard users where they are, with no line. */
.arbor-sort__control:hover,
.arbor-sort__control:focus-within { background: var(--ds-surface-overlay); }
.arbor-sort__chevron { position: relative; z-index: 1; pointer-events: none; flex: 0 0 auto; display: inline-flex; width: 15px; height: 15px; color: var(--ds-ink); }
.arbor-sort__chevron svg { display: block; width: 100%; height: 100%; }
/* No-JS floor only (inside <noscript>), so it never competes with the pill. */
.arbor-sort__go {
    margin-left: var(--ds-space-1);
    padding: 0 20px;
    min-height: 46px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-ink);
    color: var(--ds-on-dark);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-button);
    font-weight: var(--ds-fw-button);
}
/* Full-width on a phone: at 390px the pill would otherwise crowd the right edge
   and clip a long option label. */
@media (max-width: 600px) {
    .arbor-sort__control { width: 100%; }
    .arbor-sort__chevron { margin-left: auto; }
}

/* =========================================================================
   FILTER SIDEBAR (price range + category checkboxes + "Primeni")
   Injected into the theme's shop-sidebar slot by inc/arbor-shop.php.
   Layout: filter on the LEFT (theme renders products first, so reverse the row).
   ========================================================================= */
body.arbor-ds .gs-woo-page > .row:has(.sidebar-container) {
    flex-direction: row-reverse;
    align-items: flex-start;
}
body.arbor-ds .gs-woo-page .sidebar-container { margin: 0; }

/* Panel: rounded light surface, no borders/shadows — separation via fill + radius */
body.arbor-ds .arbor-filters__panel {
    background: var(--ds-surface);
    border-radius: var(--ds-radius);
    padding: 36px 30px;
    position: sticky;
    top: 120px;
}
body.arbor-ds .arbor-filter { margin: 0 0 28px; }
body.arbor-ds .arbor-filter:last-of-type { margin-bottom: 0; }
body.arbor-ds .arbor-filter__title {
    margin: 0 0 18px;
    font-family: var(--ds-font-head);
    font-size: 16px;
    font-weight: var(--ds-fw-heading);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-ink);
}

/* ---- Dual-handle price range slider ---- */
body.arbor-ds .arbor-range {
    position: relative;
    height: 28px;
    margin: 8px 0 4px;
}
body.arbor-ds .arbor-range__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: var(--ds-surface-overlay);
    border-radius: var(--ds-radius-pill);
}
body.arbor-ds .arbor-range__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ds-brand);
    border-radius: var(--ds-radius-pill);
}
/* Both inputs overlap and span the full track; only their thumbs are interactive. */
body.arbor-ds .arbor-range__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
body.arbor-ds .arbor-range__input::-webkit-slider-runnable-track { background: transparent; border: 0; }
body.arbor-ds .arbor-range__input::-moz-range-track { background: transparent; border: 0; }
body.arbor-ds .arbor-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ds-brand);
    border: 0;
    box-shadow: none;
    cursor: pointer;
    pointer-events: all;
}
body.arbor-ds .arbor-range__input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ds-brand);
    border: 0;
    box-shadow: none;
    cursor: pointer;
    pointer-events: all;
}
body.arbor-ds .arbor-range__values {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--ds-font-body);
    font-size: 14px;
    color: var(--ds-body);
}

/* ---- Category checkboxes ---- */
body.arbor-ds .arbor-checks { list-style: none; margin: 0; padding: 0; }
body.arbor-ds .arbor-checks li { margin: 0; }
body.arbor-ds .arbor-check {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    cursor: pointer;
    font-family: var(--ds-font-body);
    font-size: 18px;
    color: var(--ds-ink);
}
body.arbor-ds .arbor-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
body.arbor-ds .arbor-check__box {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--ds-page);          /* white square on the grey panel — fill, no border */
    transition: background .15s ease;
}
body.arbor-ds .arbor-check__box::after {       /* checkmark */
    content: "";
    position: absolute;
    top: 5px;
    left: 9px;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--ds-on-brand);
    border-bottom: 2px solid var(--ds-on-brand);
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}
body.arbor-ds .arbor-check input:checked + .arbor-check__box { background: var(--ds-brand); }
body.arbor-ds .arbor-check input:checked + .arbor-check__box::after { transform: rotate(45deg) scale(1); }
body.arbor-ds .arbor-check:hover .arbor-check__box { background: var(--ds-surface-overlay); }
body.arbor-ds .arbor-check input:checked:hover + .arbor-check__box,
body.arbor-ds .arbor-check input:checked + .arbor-check__box { background: var(--ds-brand); }

/* ---- "Primeni" apply button (full-width crimson pill) ---- */
body.arbor-ds .arbor-filters__apply {
    display: block;
    width: 100%;
    margin-top: 28px;
    padding: 16px 24px;
    background: var(--ds-brand);
    color: var(--ds-on-brand);
    border: 0;
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-button, 16px);
    font-weight: var(--ds-fw-button);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease;
}
body.arbor-ds .arbor-filters__apply:hover { background: var(--ds-ink); }

/* ---- Mobile: collapse filters behind a "Filteri" toggle ---- */
body.arbor-ds .arbor-filters__toggle {
    display: none;
    width: 100%;
    padding: 14px 22px;
    background: var(--ds-surface);
    color: var(--ds-ink);
    border: 0;
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-body);
    font-size: 16px;
    font-weight: var(--ds-fw-button);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
@media (max-width: 991px) {
    /* column-reverse: sidebar is 2nd in the DOM → its "Filteri" toggle sits above the grid */
    body.arbor-ds .gs-woo-page > .row:has(.sidebar-container) { flex-direction: column-reverse; }
    body.arbor-ds .arbor-filters__toggle { display: block; margin-bottom: 16px; }
    body.arbor-ds .arbor-filters__panel { display: none; position: static; }
    body.arbor-ds .arbor-filters.is-open .arbor-filters__panel { display: block; }
}

/* =========================================================================
   PAGINATION — circular page numbers, crimson active, bare chevrons
   ========================================================================= */
body.arbor-ds ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
}
body.arbor-ds ul.page-numbers li { margin: 0; }
body.arbor-ds .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-ink) !important;
    font-family: var(--ds-font-body);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
body.arbor-ds a.page-numbers:hover { background: var(--ds-surface-overlay); }
body.arbor-ds .page-numbers.current {
    background: var(--ds-brand);
    color: var(--ds-on-brand) !important;
}
body.arbor-ds .page-numbers.dots {
    background: transparent;
    min-width: 24px;
}
body.arbor-ds .page-numbers.prev,
body.arbor-ds .page-numbers.next {
    background: transparent;
    color: var(--ds-ink) !important;
}
body.arbor-ds .page-numbers.prev:hover,
body.arbor-ds .page-numbers.next:hover { color: var(--ds-brand) !important; }
body.arbor-ds .page-numbers .material-icons { font-size: 26px; line-height: 1; }

/* =========================================================================
   RELATED PRODUCTS — "Slični proizvodi" on single-product pages.
   Cards reuse the shop .gs-product-item card (rendered via content-product.php),
   so they match the category/shop grids. Only the section + heading need styling.
   ========================================================================= */
/* Compact: this recommendation section is secondary to the product content
   above it, so it uses tight spacing and a lighter, left-aligned heading that
   pairs with the "Često se kupuje zajedno" (FBT) block just above. */
body.arbor-ds .arbor-related { padding: 28px 0 var(--ds-space-4); }
body.arbor-ds .arbor-related__title {
    font-family: var(--ds-font-head);
    font-weight: var(--ds-fw-heading);
    font-size: 20px;
    line-height: var(--ds-lh-tight);
    text-align: left;
    color: var(--ds-ink);
    margin: 0 0 var(--ds-space-3);
}