/* ═══════════════════════════════════════════════════════════
   BRASS ART — catalog.css
   Category / catalog page — new styles only.

   Loads AFTER: header.css → collection.css
   Reuses ALL tokens from header.css :root.
   Does NOT repeat: reset, variables, buttons, .section-tag,
   .section-title, .container, .reveal-*, .breadcrumbs,
   .stats-strip, .cta, .footer.

   TABLE OF CONTENTS
   ──────────────────
   01  Breadcrumbs
   02  Category Hero
   03  Filter / Tab Nav
   04  Product Grid (pg__)
   05  Editorial Block
   06  Pagination
   07  Collection Highlight Strip (col-strip)
   08  Responsive
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   01  BREADCRUMBS
   Small type, top of page, sits between header and hero.
───────────────────────────────────────────────────────── */
.breadcrumbs {
  padding-top:    calc(var(--header-total-h) + 2.2rem);
  padding-bottom: 1.2rem;
  background:     var(--bg);
}

.breadcrumbs-list {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             0.25rem;
  list-style:      none;
  font-size:       0.58rem;
  letter-spacing:  0.28em;
  text-transform:  uppercase;
  color:           var(--text-faint);
}

.breadcrumbs-list li + li::before {
  content:      '/';
  margin-right: 0.25rem;
  opacity:      0.3;
}

.breadcrumbs-list a {
  color:      var(--text-muted);
  transition: color var(--t-fast);
}
.breadcrumbs-list a:hover { color: var(--gold); }

.breadcrumbs-list [aria-current="page"] { color: var(--gold); }


/* ─────────────────────────────────────────────────────────
   02  CATEGORY HERO
   Cinematic full-viewport intro.
   Similar architecture to homepage .hero, but tighter height
   and no grid split — full-bleed image with overlaid text.
───────────────────────────────────────────────────────── */
.cat-hero {
  position:    relative;
  min-height:  70vh;
  overflow:    hidden;
  display:     flex;
  align-items: flex-end;
  /* no padding-top needed — breadcrumbs above handle offset */
  padding:     0 0 5rem;
}

/* ── media ── */
.cat-hero__media {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.cat-hero__bg {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center 30%;
  filter:      brightness(0.42) saturate(0.9);
  transform:   scale(1.03);   /* room for parallax */
  will-change: transform;
  transition:  transform 0.1s linear; /* updated via JS on scroll */
}

.cat-hero__vignette {
  position:   absolute;
  inset:      0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%,
      transparent 30%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to bottom,
      rgba(13,12,10,0.6)   0%,
      transparent           30%,
      transparent           65%,
      rgba(13,12,10,0.92)  100%);
}

.cat-hero__glow {
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 55% 60% at 75% 40%,
    rgba(201,168,76,0.08), transparent 70%);
  pointer-events: none;
  animation:  glowBreath 8s ease-in-out infinite;
}

/* ── decorative branches (same SVG as homepage) ── */
.cat-hero__branches {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  opacity:        0.18;
}
.cat-hero__branches svg  { width: 100%; height: 100%; }
.cat-hero__branches path { fill: none; stroke: var(--gold); stroke-width: 0.7; }

/* ── floating label ── */
.cat-hero__label {

  top:             3rem;
  right:           var(--px);
  z-index:         3;
  writing-mode:    vertical-rl;
  text-orientation: mixed;
  font-size:        0.5rem;
  letter-spacing:   0.55em;
  text-transform:   uppercase;
  color:            rgba(201,168,76,0.45);
}

/* ── index number ── */
.cat-hero__index {
  position:       absolute;
  bottom:         5rem;
  left:           var(--px);
  z-index:        3;
  font-family:    var(--font-head);
  font-size:      0.5rem;
  letter-spacing: 0.6em;
  color:          rgba(230,222,208,0.15);
  writing-mode:   vertical-rl;
  transform:      rotate(180deg);
}

/* ── inner content ── */
.cat-hero__inner {
  position: relative;
  z-index:  3;
}

.cat-hero__title {
  font-family:  var(--font-head);
  font-size:    clamp(3.5rem, 8vw, 4.5rem);
  font-weight:  400;
  line-height:  0.94;
  margin-bottom: 1.6rem;
  /* cinematic glow matching homepage hero */
  text-shadow:
    0 0 12px rgba(201,162,74,0.22),
    0 0 30px rgba(201,162,74,0.12);
}

.cat-hero__sub {
  max-width:    38rem;
  font-size:    1rem;
  font-weight:  300;
  line-height:  1.85;
  color:        var(--text-secondary);
  margin-bottom: 2.5rem;
}

/* ── meta row ── */
.cat-hero__meta {
  display:     flex;
  align-items: center;
  gap:         0;
  flex-wrap:   wrap;
}

.cat-hero__meta-item {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
  padding:        0 2rem;
}
.cat-hero__meta-item:first-child { padding-left: 0; }

.cat-hero__meta-item dt {
  font-size:       0.52rem;
  letter-spacing:  0.35em;
  text-transform:  uppercase;
  color:           var(--text-faint);
}
.cat-hero__meta-item dd {
  font-family: var(--font-head);
  font-size:   0.85rem;
  color:       var(--text-primary);
}

.cat-hero__meta-sep {
  width:      1px;
  height:     2.5rem;
  background: var(--border);
  flex-shrink: 0;
}

.catalog-divider {
  padding: 2.5rem 0 4rem;
}

.catalog-divider__line {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin-bottom: 1.5rem;
}

.catalog-divider__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;

  font-size: 0.58rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;

  color: var(--text-faint);
}

.catalog-divider__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-dim);
}
/* ─────────────────────────────────────────────────────────
   03  FILTER / TAB NAV
   Sticky on scroll, elegant underline, no pill aesthetics.
───────────────────────────────────────────────────────── */
.cat-filter {
  position: relative;
  z-index: 10;

  background: transparent;
  border-bottom: 1px solid transparent;

  padding: 0.85rem 0;

  transition:
    background 0.4s ease,
    border-color 0.4s ease;
}

/* class toggled by JS when hero scrolls out */
.cat-filter--stuck {
  background:       rgba(13, 12, 10, 0.92);
  backdrop-filter:  blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom-color: var(--border);
}

.cat-filter__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
  flex-wrap:       wrap;
}

/* ── tabs ── */
.cat-filter__tabs {
  display:     flex;
  align-items: center;
  gap:         0;
  overflow-x:  auto;
  scrollbar-width: none;
}
.cat-filter__tabs::-webkit-scrollbar { display: none; }

.cat-filter__tab {
  position:        relative;
  padding:         0.5rem 1.4rem;
  font-family:     var(--font-head);
  font-size:       0.72rem;
  letter-spacing:  0.24em;
  text-transform:  uppercase;
  color:           var(--text-secondary);
  white-space:     nowrap;
  transition:      color var(--t-fast);
}

/* underline animation */
.cat-filter__tab::after {
  content:          '';
  position:         absolute;
  bottom:           -0.85rem; /* flush with filter bottom border */
  left:             1.4rem;
  right:            1.4rem;
  height:           1px;
  background:       var(--gold);
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform 0.3s var(--ease);
}

.cat-filter__tab:hover { color: var(--text-primary); }
.cat-filter__tab:hover::after { transform: scaleX(0.6); }

.cat-filter__tab--active {
  color: var(--gold);
}
.cat-filter__tab--active::after {
  transform: scaleX(1);
}

/* ── sort ── */
.cat-filter__sort {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-shrink: 0;
}

.cat-filter__sort-label {
  font-size:      0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--text-faint);
}

.cat-filter__sort-wrap {
  position:    relative;
  display:     flex;
  align-items: center;
}

.cat-filter__sort-select {
  appearance:      none;
  -webkit-appearance: none;
  background:      transparent;
  border:          none;
  border-bottom:   1px solid var(--border);
  color:           var(--text-muted);
  font-family:     var(--font-body);
  font-size:       0.65rem;
  letter-spacing:  0.12em;
  padding:         0.25rem 1.8rem 0.25rem 0.4rem;
  outline:         none;
  cursor:          pointer;
  transition:      border-color var(--t-fast), color var(--t-fast);
}
.cat-filter__sort-select:focus { border-bottom-color: var(--gold); color: var(--text-primary); }

.cat-filter__sort-arrow {
  position:       absolute;
  right:          0.2rem;
  pointer-events: none;
  color:          var(--text-faint);
  width:          10px; height: 8px;
}


/* ─────────────────────────────────────────────────────────
   04  PRODUCT GRID  (pg__)
   3-column asymmetric feel with luxury spacing.
   BEM: .pg (block) → .pg__card (element).
───────────────────────────────────────────────────────── */
.catalog-section { padding: 4rem 0 6rem; }

.catalog-count {
  font-size:      0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--text-faint);
  margin-bottom:  3rem;
}
.catalog-count strong { color: var(--gold); font-weight: 400; }

/* =========================
   PRODUCT GRID
========================= */

.pg{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4.5rem 2.6rem;

  margin-bottom:7rem;
}

/* =========================
   CARD
========================= */

.pg__card{
  position:relative;

  display:flex;
  flex-direction:column;

  height:100%;
}

/* =========================
   IMAGE
========================= */

.pg__card-media{
  position:relative;

  overflow:hidden;

  aspect-ratio:4 / 5;


  margin-bottom:1.8rem;

  border-radius:2px;

  isolation:isolate;
}

.pg__card-media::after{
  content:"";

  position:absolute;
  inset:0;

 

  opacity:.8;

  transition:opacity .6s ease;

  z-index:1;
}

.pg__card:hover .pg__card-media::after{
  opacity:1;
}

.pg__card-img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transform:scale(1);

  transition:
    transform 1.4s cubic-bezier(.19,1,.22,1),
    filter .8s ease;

  will-change:transform;
}

.pg__card:hover .pg__card-img{
  transform:scale(1.08);

  filter:brightness(1.03);
}

/* =========================
   OVERLAY
========================= */

.pg__card-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:flex-end;
  justify-content:flex-start;

  padding:2rem;

  z-index:2;
}

.pg__card-cta{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:.9rem;

  padding:.95rem 1.5rem;

  background:rgba(17,17,17,.58);

  backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.14);

  color:#f4f1eb;

  font-size:.62rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;

  opacity:0;

  transform:
    translateY(18px)
    scale(.96);

  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.19,1,.22,1),
    border-color .35s ease,
    background .35s ease;

  overflow:hidden;
}

.pg__card-cta::after{
  content:"→";

  font-size:.8rem;

  opacity:.75;
}

.pg__card:hover .pg__card-cta{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}

.pg__card-cta:hover{
  border-color:rgba(201,162,75,.5);

  background:rgba(24,24,24,.74);
}

/* =========================
   TAG
========================= */

.pg__card-tag{
  position:absolute;
  top:1.2rem;
  left:1.2rem;

  z-index:3;

  padding:.45rem .8rem;

  background:rgba(11,11,11,.62);

  backdrop-filter:blur(10px);

  border:1px solid rgba(201,162,75,.28);

  color:#d7b067;

  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* =========================
   WISHLIST
========================= */
.pg__card-wish {
  position:        absolute;
  top:             1rem;
  right:           1rem;
  width:           38px;
  height:          38px;

  display:         flex;
  align-items:     center;
  justify-content: center;

  background:      rgba(15, 15, 15, 0.68);
  backdrop-filter: blur(8px);

  border:          1px solid rgba(255,255,255,0.08);
  border-radius:   50%;

  color:           rgba(255,255,255,0.72);

  opacity:         0;
  transform:       translateY(-6px);

  transition:
    opacity .35s ease,
    transform .35s ease,
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

  z-index: 5;
}

/* появление при hover */
.pg__card:hover .pg__card-wish {
  opacity: 1;
  transform: translateY(0);
}

/* hover */
.pg__card-wish:hover {
  color: #d4af37;
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.4);
  box-shadow: 0 0 18px rgba(212,175,55,0.18);
}

/* активное избранное */
.pg__card-wish.active,
.pg__card-wish.to-desire.active {
  opacity: 1;

  color: #fff;

  background: linear-gradient(
    135deg,
    #d4af37 0%,
    #b9922f 100%
  );

  border-color: #d4af37;

  box-shadow:
    0 0 0 1px rgba(212,175,55,0.25),
    0 10px 24px rgba(212,175,55,0.22);
}

/* иконка внутри */
.pg__card-wish i,
.pg__card-wish svg {
  transition:
    transform .25s ease,
    fill .25s ease,
    color .25s ease;
}

/* эффект при активном */
.pg__card-wish.active i,
.pg__card-wish.active svg,
.pg__card-wish.to-desire.active i,
.pg__card-wish.to-desire.active svg {
  color: #fff;
  fill: #fff;
  transform: scale(1.08);
}
/* =========================
   BODY
========================= */

.pg__card-body{
  position:relative;

  display:flex;
  flex-direction:column;
  flex:1 1 auto;

  padding:0 .4rem;
}

/* title */

.pg__card-name{
  display:inline-block;

  margin-bottom:.7rem;

  color:#f4f1eb;

  text-decoration:none;

  font-family:var(--font-head);
  font-style:normal;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;

  font-size:1.05rem;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.01em;
text-transform: none;
  transition:
    color .35s ease,
    transform .35s ease;
}

.pg__card:hover .pg__card-name{
  color:#d4ab5c;

  transform:translateX(3px);
}

/* material */

.pg__card-material {
  max-width: 92%;
  margin-bottom: 1.8rem;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.pg__card-spec {
  display: flex;
  justify-content: space-between; /* Разносит влево и вправо */
  align-items: center;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(244, 241, 235, .05); /* Тонкая декоративная линия */
  padding-bottom: 0.2rem;
}

.spec-label {
  color: rgba(244, 241, 235, .35);
}

.spec-value {
  color: rgba(244, 241, 235, .7);
  text-align: right;
}
/* icons */

.pg__card-icons{
  display:flex;
  align-items:center;
  gap:.8rem;

  margin-bottom:1.6rem;
}

/* фон под иконкой */
.pg__card-icons span,
.pg__card-icons a,
.pg__card-icons .icon-item{
  display:flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;

  background:#e3c47fde;

  border:1px solid rgba(201,162,75,.18);

  border-radius:50%;

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}

.pg__card-icons span:hover,
.pg__card-icons a:hover,
.pg__card-icons .icon-item:hover{
  transform:translateY(-2px);

  background:#fff;

  border-color:rgba(201,162,75,.45);
}

/* SVG */
.pg__card-icons img,
.pg__card-icons svg{
  width:18px;
  height:18px;

  object-fit:contain;

  opacity:.9;
}

.pg__card:hover .pg__card-icons img{
  opacity:.95;
}

.pg__card-icons img:hover{
  transform:translateY(-2px);
}
.pg__series-thumbs{
  display:flex;
  gap:10px;

  margin-top:18px;
}

.pg__series-thumb{
  position:relative;

  width:58px;
  height:58px;

  border-radius:14px;
  overflow:hidden;

  border:1px solid var(--border);

  background: var(--card);

  transition:.35s ease;
}

.pg__series-thumb:hover{
  transform:translateY(-2px);
  border-color:#c9a24b;
}

.pg__series-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* =========================
   FOOTER
========================= */

/* FOOT */

.pg__card-foot{
  margin-top:auto;
  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.06);
}

/* LINK — styled as a clickable price button */

.pg__card-series-link[data-price=""]{
  display:none;
}

.pg__card-series-link{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  width:100%;
  padding:.7rem .8rem .7rem 1rem;

  border-radius:14px;

  background:rgba(201,168,76,.05);
  border:1px solid rgba(201,168,76,.16);

  text-decoration:none;

  transition:
    background .35s ease,
    border-color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}

/* TEXT */

.pg__card-series-text{
  display:flex;
  flex-direction:column;
  gap:.3rem;

  flex:1 1 auto;
  min-width:0;
}

.product-price-label{
  display:block;

  color:rgba(240,236,228,.5);

  font-family:var(--font-body);
  font-size:.62rem;
  font-weight:500;

  letter-spacing:.2em;
  text-transform:uppercase;
}

.pg__card-price{
  display:block;

  color:var(--gold);

  font-family:var(--font-head);
  font-size:1.2rem;
  font-weight:500;
  letter-spacing:.01em;

  transition:color .35s ease;
}

/* ARROW */

.pg__card-arrow{
  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;

  border-radius:50%;

  background:rgba(0,0,0,.25);

  border:1px solid rgba(201,168,76,.24);

  color:var(--gold);

  font-size:.95rem;

  transition:
    transform .45s cubic-bezier(.19,1,.22,1),
    background .35s ease,
    border-color .35s ease,
    color .35s ease;
}

/* HOVER — whole card focuses the button; direct link hover intensifies it */

.pg__card:hover .pg__card-series-link,
.pg__card-series-link:hover{
  background:rgba(201,168,76,.12);
  border-color:rgba(201,168,76,.45);

  transform:translateY(-2px);

  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.pg__card:hover .pg__card-price,
.pg__card-series-link:hover .pg__card-price{
  color:var(--gold-hover);
}

.pg__card:hover .pg__card-arrow,
.pg__card-series-link:hover .pg__card-arrow{
  background:var(--gold);
  border-color:var(--gold);

  color:#171310;

  transform:translateX(4px);
}
.pg__series-block{
  margin-top:18px;
}

/* CAPTION — the explicit "go to series page" link, styled as a pill button */

.pg__series-caption{
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  margin-bottom:12px;
  padding:.42rem .85rem .42rem .95rem;

  border-radius:999px;

  background:rgba(201,168,76,.06);
  border:1px solid rgba(201,168,76,.22);

  color:rgba(240,236,228,.78);

  font-family:var(--font-body);
  font-size:.64rem;
  font-weight:600;

  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;

  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.pg__series-caption-arrow{
  display:inline-block;
  transition:transform .35s cubic-bezier(.19,1,.22,1);
}

.pg__series-caption:hover{
  color:var(--gold-hover);

  background:rgba(201,168,76,.14);
  border-color:rgba(201,168,76,.55);

  transform:translateY(-1px);
}

.pg__series-caption:hover .pg__series-caption-arrow{
  transform:translateX(3px);
}

.pg__series-slider{
  display:flex;
  align-items:center;
  gap:6px;
}

.pg__series-thumbs{
  display:flex;
  align-items:center;
  gap:16px;

  flex:1 1 auto;
  min-width:0;

  padding-bottom:4px;

  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}

.pg__series-thumbs::-webkit-scrollbar{
  display:none;
}

/* NAV ARROWS */

.pg__series-nav{
  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border-radius:50%;

  background:rgba(0,0,0,.25);
  border:1px solid rgba(201,168,76,.2);

  color:var(--gold);

  font-size:1rem;
  line-height:1;

  cursor:pointer;

  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease,
    opacity .3s ease;
}

.pg__series-nav:hover{
  background:var(--gold);
  border-color:var(--gold);

  color:#171310;
}

.pg__series-nav:disabled{
  opacity:.25;

  cursor:default;
}

.pg__series-nav:disabled:hover{
  background:rgba(0,0,0,.25);
  border-color:rgba(201,168,76,.2);

  color:var(--gold);
}

/* THUMB — image + lamp-count caption stacked underneath */

.pg__series-thumb{
  position:relative;

  flex:0 0 auto;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;

  width:72px;
  height:89px;

  border-radius:14px;

  overflow:hidden;

  border:1px solid var(--border);
  background:var(--card);

  font-size:1.0rem;

  text-decoration:none;

  transition:.35s ease;
}

.pg__series-thumb-img{
  position:relative;

  display:block;

  width:84px;
  height:84px;

  border-radius:18px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.06);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.pg__series-thumb-img::after{
  content:'';

  position:absolute;
  inset:0;

  background:rgba(9,9,9,.32);

  opacity:0;

  transition:opacity .3s ease;
}

.pg__series-thumb-img img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}

.pg__series-thumb-count{
  color:rgba(240,236,228,.55);

  font-family:var(--font-body);
  font-size:.6rem;
  font-weight:500;

  letter-spacing:.02em;
  white-space:nowrap;

  transition:color .3s ease;
}

.pg__series-thumb:hover .pg__series-thumb-img{
  transform:translateY(-3px);

  border-color:var(--gold);

  box-shadow:0 6px 16px rgba(0,0,0,.3);
}

.pg__series-thumb:hover .pg__series-thumb-img::after{
  opacity:1;
}

.pg__series-thumb:hover .pg__series-thumb-count{
  color:var(--gold-hover);
}
.product-gallery-main{
    position:relative;
    overflow:hidden;
    border-radius:28px;

    min-height:720px;
}
.product-gallery-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    filter:
        brightness(.45)
        blur(2px);

    transform:scale(1.04);

    transition:
        background-image .5s ease,
        opacity .4s ease,
        transform .7s ease;
}
.product-gallery-bg::after{
    content:"";

    position:absolute;
    inset:0;


    pointer-events:none;
}
.product-gallery-img{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    object-fit:contain;

    transition:opacity .35s ease;

    filter:
        drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

  .pg{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:768px){

  .pg{
    grid-template-columns:minmax(0,1fr);
    gap:3rem;
  }

  .pg__card-name{
    font-size:.9rem;
  }

  .pg__card-overlay{
    padding:1.2rem;
  }

}
/* ─────────────────────────────────────────────────────────
   05  EDITORIAL BLOCK
   Magazine-spread feeling between product rows.
───────────────────────────────────────────────────────── */
.editorial {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           5rem;
  align-items:   center;
  margin:        0 0 5rem;
  padding:       5rem 0;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── image ── */
.editorial__media {
  position:    relative;
  overflow:    hidden;
  aspect-ratio: 4 / 5;
  background:  var(--card);
}

.editorial__img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center;
  filter:         brightness(0.88) saturate(0.85);
  transition:     transform 0.9s var(--ease);
}
.editorial:hover .editorial__img { transform: scale(1.03); }

.editorial__media-vignette {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    transparent 50%,
    rgba(13,12,10,0.35) 100%
  );
}

/* ── content ── */
.editorial__content {}

.editorial__rule {
  width:         80px;
  height:        1px;
  background:    var(--gold);
  margin-bottom: 2rem;
  opacity:       0.6;
}

.editorial__title {
  font-family:   var(--font-head);
  font-size:     clamp(2.2rem, 4vw, 3.8rem);
  font-weight:   400;
  line-height:   1.1;
  margin:        1rem 0 2rem;
}
.editorial__title em { font-style: italic; color: var(--gold); }

.editorial__body {
  font-size:    0.9rem;
  font-weight:  300;
  line-height:  1.95;
  color:        var(--text-muted);
  max-width:    42ch;
  margin-bottom: 2.5rem;
}

.editorial__link {
  display:        inline-flex;
  align-items:    center;
  gap:            0;
  font-size:      0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  transition:     color var(--t-fast);
}
.editorial__link:hover { color: var(--gold); }
.editorial__link:hover .editorial__link-line { width: 80px; }

.editorial__link-line {
  display:     inline-block;
  width:       60px;
  height:      1px;
  background:  var(--gold-dim);
  margin-left: 1rem;
  transition:  width 0.3s var(--ease);
}


/* ─────────────────────────────────────────────────────────
   06  PAGINATION
   Minimal, refined. No bootstrap look.
───────────────────────────────────────────────────────── */
.pager {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.35rem;
  padding:         3rem 0 5rem;
}

.pager__item,
.pager__prev,
.pager__next {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  font-size:       0.65rem;
  letter-spacing:  0.12em;
  color:           var(--text-muted);
  border:          1px solid var(--border);
  transition:
    color        var(--t-fast),
    border-color var(--t-fast),
    background   var(--t-fast);
}
.pager__item:hover,
.pager__prev:hover,
.pager__next:hover {
  color:        var(--gold);
  border-color: var(--gold-dim);
}

.pager__item--active {
  color:        var(--gold);
  border-color: var(--gold);
  background:   rgba(201, 168, 76, 0.06);
  pointer-events: none;
}

.pager__ellipsis {
  font-size: 0.65rem;
  color:     var(--text-faint);
  padding:   0 0.35rem;
}

.pager__prev,
.pager__next {
  font-size: 0.9rem;
  letter-spacing: 0;
}


/* ─────────────────────────────────────────────────────────
   07  COLLECTION HIGHLIGHT STRIP  (col-strip)
   Horizontal 4-column visual showcase.
───────────────────────────────────────────────────────── */
.col-strip {
  padding-bottom: 8rem;
  overflow: hidden;
}

.col-strip .section-header {
  margin-bottom: 3rem;
}

.col-strip__all {
  font-size:      0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--gold);
  border-bottom:  1px solid var(--gold-dim);
  padding-bottom: 0.15rem;
  transition:     border-color var(--t-fast);
  white-space:    nowrap;
  align-self:     flex-end;
}
.col-strip__all:hover { border-bottom-color: var(--gold); }

/* ── track ── */
.col-strip__track {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:                   1.2rem;
  padding:               0 var(--px);
  max-width:             var(--header-max);
  margin:                0 auto;
}

/* ── item ── */
.col-strip__item {
  position:  relative;
  overflow:  hidden;
  display:   block;
  aspect-ratio: 3 / 4;
  background: var(--card);
}

.col-strip__item-media {
  position: absolute;
  inset:    0;
}

.col-strip__item-media img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  filter:          brightness(0.65) saturate(0.8);
  will-change:     transform;
  transition:      transform 0.9s var(--ease), filter 0.6s;
}
.col-strip__item:hover .col-strip__item-media img {
  transform: scale(1.06);
  filter:    brightness(0.5) saturate(0.9);
}

/* dark overlay on hover */
.col-strip__item-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(13, 12, 10, 0);
  transition: background 0.5s;
}
.col-strip__item:hover .col-strip__item-overlay {
  background: rgba(13, 12, 10, 0.3);
}

/* body */
.col-strip__item-body {
  position: absolute;
  inset:    0;
  padding:  1.8rem;
  display:  flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index:  1;
}

.col-strip__item-num {
  font-size:       0.5rem;
  letter-spacing:  0.5em;
  text-transform:  uppercase;
  color:           rgba(201,168,76,0.45);
  margin-bottom:   0.5rem;
  opacity:         0;
  transform:       translateY(0.4rem);
  transition:
    opacity   0.35s,
    transform 0.35s;
}
.col-strip__item:hover .col-strip__item-num { opacity: 1; transform: none; }

.col-strip__item-title {
  font-family:  var(--font-head);
  font-size:    1.3rem;
  font-weight:  400;
  color:        var(--text-primary);
  margin-bottom: 0.35rem;
  transition:   color var(--t-fast);
}
.col-strip__item:hover .col-strip__item-title { color: #fff; }

.col-strip__item-count {
  font-size:      0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--text-muted);
  opacity:        0;
  transform:      translateY(0.3rem);
  transition:
    opacity   0.35s 0.06s,
    transform 0.35s 0.06s;
}
.col-strip__item:hover .col-strip__item-count { opacity: 1; transform: none; }


/* ─────────────────────────────────────────────────────────
   KEYFRAME (catalog-specific only)
   glowBreath used by cat-hero__glow.
   All other keyframes live in header.css.
───────────────────────────────────────────────────────── */
@keyframes glowBreath {
  0%,  100% { opacity: 0.6; transform: scale(1);    }
  50%        { opacity: 1;   transform: scale(1.08); }
}


/* ─────────────────────────────────────────────────────────
   08  RESPONSIVE
───────────────────────────────────────────────────────── */

/* ── 1200px ── */
@media (max-width: 1200px) {
  .pg,
  .pg--second { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .col-strip__track { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
  .editorial { grid-template-columns: 1fr; gap: 3rem; }

  .cat-hero { min-height: 60vh; }
  .cat-hero__meta { gap: 0; row-gap: 1.2rem; }
  .cat-hero__meta-sep { display: none; }
  .cat-hero__meta-item { padding: 0 1.2rem 0 0; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  /* hero */
  .cat-hero { min-height: 55vh; padding-bottom: 3.5rem; }
  .cat-hero__title   { font-size: 3rem; }
  .cat-hero__sub     { font-size: 0.9rem; }
  .cat-hero__label,
  .cat-hero__index   { display: none; }

  /* filter */
  .cat-filter__inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.75rem;
  }
  .cat-filter__tabs { width: 100%; }
  .cat-filter__tab  { padding: 0.5rem 0.8rem; font-size: 0.65rem; }

  /* grid */
  .pg,
  .pg--second { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.8rem 1rem; }

  /* editorial */
  .editorial { padding: 3rem 0; }

  /* collection strip */
  .col-strip__track { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0.8rem; }
  .col-strip__item  { aspect-ratio: 1 / 1; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .pg,
  .pg--second { grid-template-columns: minmax(0,1fr); }

  .col-strip__track { grid-template-columns: minmax(0,1fr); }
  .col-strip__item  { aspect-ratio: 4 / 3; }

  .pager__item:not(.pager__item--active):not(:first-child):not(:last-child) {
    display: none; /* show only active + neighbours on very small screens */
  }
}

/* ═══════════════════════════════════════════════
   SERIES STRIP
   Slider linking to other series — used both on
   /kollekcii/* (other series in this collection) and
   on series landing pages (other series in this category).
   Round "cursor ring" thumbnails, no center dot.
═══════════════════════════════════════════════ */

.series-strip {
  padding-bottom: 6rem;
}

.series-strip__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;

  max-width: var(--header-max);
  margin: 4rem auto 0;
  padding: 0 var(--px);
}

.series-strip__track {
  display: flex;
  gap: 2.5rem;

  flex: 1 1 auto;
  min-width: 0;

  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;

  padding: 0.5rem 0.25rem 1rem;
}

.series-strip__track::-webkit-scrollbar {
  display: none;
}

.series-strip__card {
  flex: 0 0 auto;
  width: 168px;

  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;

  scroll-snap-align: start;
}

.series-strip__media {
  position: relative;

  width: 168px;
  height: 168px;
  margin: 0 auto 1.5rem;

  border-radius: 50%;
  overflow: hidden;

  border: 1px solid var(--border);
  background: var(--card);

  transition:
    border-color var(--t-base) var(--ease),
    transform    var(--t-base) var(--ease),
    box-shadow   var(--t-base) var(--ease);
}

/* cursor-ring halo — a plain circle outline, no center dot */
.series-strip__media::before {
  content: '';
  position: absolute;
  inset: -10px;

  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 50%;

  transition:
    transform    var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.series-strip__card:hover .series-strip__media {
  border-color: rgba(201, 168, 76, 0.4);
  transform: scale(1.04);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.series-strip__card:hover .series-strip__media::before {
  transform: scale(1.12);
  border-color: var(--gold);
}

.series-strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-spring);
}

.series-strip__card:hover .series-strip__media img {
  transform: scale(1.08);
}

.series-strip__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background var(--t-base);
}

.series-strip__card:hover .series-strip__overlay {
  background: rgba(0, 0, 0, 0);
}

.series-strip__name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 400;
  transition: color 0.3s;
}

.series-strip__card:hover .series-strip__name {
  color: var(--gold);
}

/* NAV ARROWS — same visual language as .pg__series-nav, bigger */

.series-strip__nav {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(201, 168, 76, .2);
  color: var(--gold);
  font-size: 1.4rem;

  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}

.series-strip__nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #171310;
}

.series-strip__nav:disabled {
  opacity: .25;
  cursor: default;
}

.series-strip__nav:disabled:hover {
  background: rgba(0, 0, 0, .25);
  border-color: rgba(201, 168, 76, .2);
  color: var(--gold);
}

@media (max-width: 640px) {

  .series-strip__row {
    gap: 0.75rem;
  }

  .series-strip__card,
  .series-strip__media {
    width: 128px;
  }

  .series-strip__media {
    height: 128px;
  }

  .series-strip__nav {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }

}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .cat-hero__bg,
  .cat-hero__glow,
  .pg__card-img,
  .col-strip__item-media img,
  .editorial__img,
  .series-strip__media img {
    transition: none;
    animation:  none;
  }
}