/* Активный пункт меню (общий вид; можно перенести в style.css) */
.nav-link[aria-current="page"]{
  background: linear-gradient(180deg, rgba(103,167,255,.22), rgba(46,125,233,.12));
  border: 1px solid rgba(103,167,255,.45);
}

/* ===== Секция 1: Витрина-лента ===== */
.ribbon-section{ position: relative; padding: clamp(28px,4vw,56px) 0; overflow: hidden; }
.ribbon-lane{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px); align-items: start;
}
.ribbon-card{
  grid-column: span 4;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
  transform: rotate(var(--rot, 0deg));
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ribbon-card:hover{ transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 42px rgba(46,125,233,.25); }
.ribbon-card.r1{ --rot: -1.4deg; }
.ribbon-card.r2{ --rot: .8deg; }
.ribbon-card.r3{ --rot: -0.6deg; }

.ribbon-bg{
  position: absolute; inset: auto 0 -10% 0; height: 36%;
  background:
    radial-gradient(50% 50% at 20% 0%, rgba(103,167,255,.12), transparent 60%),
    radial-gradient(50% 50% at 80% 100%, rgba(46,125,233,.10), transparent 60%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px);
  pointer-events: none; z-index: -1;
}

/* ===== Секция 2: Темы ===== */
.themes-section{ position: relative; padding: clamp(24px,4vw,50px) 0; }
.themes-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.theme-card{
  grid-column: span 6;
  border: 1px solid rgba(210,180,140,.28);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(180deg, rgba(210,180,140,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
}
.arc{ position: relative; }
.arc::after{
  content:""; position:absolute; inset:-1px; border-radius: inherit;
  mask: radial-gradient(160px 80px at 10% 0%, #000 20%, transparent 60%) subtract,
        radial-gradient(140px 60px at 90% 100%, #000 20%, transparent 60%);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events:none;
}
.themes-bg{
  position:absolute; inset:auto 0 -12% 0; height: 34%;
  background: radial-gradient(60% 40% at 50% 0%, rgba(103,167,255,.12), transparent 60%);
  z-index:-1; pointer-events:none;
}

/* ===== Секция 3: Быстрый отбор ===== */
.quickpick-section{ padding: clamp(24px,4vw,50px) 0; }
.qp-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 8px;
}
.chip-btn{
  padding: 10px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(103,167,255,.28);
  background: linear-gradient(180deg, rgba(46,125,233,.14), rgba(46,125,233,.06));
  color: #fff; font-size: 14px;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.chip-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46,125,233,.25); }
.chip-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(103,167,255,.28), rgba(46,125,233,.12));
  border-color: rgba(103,167,255,.6);
}

.qp-mini{ color: var(--ink-dim); margin-bottom: 6px; }
.qp-gallery{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.qp-card{
  grid-column: span 6;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
}

@media (max-width: 960px){
  .ribbon-card{ grid-column: span 6; }
  .theme-card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .ribbon-card, .theme-card, .qp-card{ grid-column: 1 / -1; }
}

/* Эффект «tilt» для карточек (деликатный) */
.tilt{ will-change: transform; transform-style: preserve-3d; }
/* =============== СЕКЦИЯ 4: Кольца =============== */
.rings-section{ padding: clamp(28px,4vw,56px) 0; }
.rings-head{ max-width: 900px; margin-bottom: 10px; }
.rings-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.ring-card{
  grid-column: span 4;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ring-card:hover{ transform: translateY(-4px) rotate3d(0,1,0,6deg); filter: saturate(1.05); }
.rings-bullets{
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-dim);
}
.rings-bullets li{
  border: 1px solid rgba(210,180,140,.28);
  border-radius: 999px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(210,180,140,.12), rgba(46,125,233,.06));
  font-size: 13px;
}
@media (max-width: 960px){ .ring-card{ grid-column: span 6; } }
@media (max-width: 640px){ .ring-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 5: Подвесы и пусеты =============== */
.pendants-section{ padding: clamp(28px,4vw,56px) 0; }
.pendants-wrap{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(16px,2vw,24px); align-items: start;
}
.pendants-copy{ grid-column: 1 / span 6; }
.pendants-gallery{
  grid-column: 7 / span 6;
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.pend-card{
  grid-column: span 6;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  padding: 12px; box-shadow: var(--shadow);
}
.pendant-bullets{
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-dim);
}
.pendant-bullets li{
  border: 1px solid rgba(103,167,255,.24);
  border-radius: 999px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(46,125,233,.12), rgba(46,125,233,.04));
  font-size: 13px;
}
@media (max-width: 1024px){
  .pendants-copy{ grid-column: 1 / -1; }
  .pendants-gallery{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .pend-card{ grid-column: 1 / -1; }
}

/* =============== СЕКЦИЯ 6: Стеки и комплекты =============== */
.stacks-section{ padding: clamp(28px,4vw,56px) 0; }
.stacks-head{ max-width: 900px; margin-bottom: 8px; }

.bundle-chips{
  display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 6px;
}
.bundle-chip{
  padding: 10px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(103,167,255,.28);
  background: linear-gradient(180deg, rgba(46,125,233,.14), rgba(46,125,233,.06));
  color: #fff; font-size: 14px;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.bundle-chip:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46,125,233,.25); }
.bundle-chip[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(103,167,255,.28), rgba(46,125,233,.12));
  border-color: rgba(103,167,255,.6);
}
.bundle-mini{ color: var(--ink-dim); margin-bottom: 6px; }

.stacks-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.stack-card{
  grid-column: span 6;
  border: 1px solid rgba(210,180,140,.28);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(210,180,140,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
}
@media (max-width: 720px){
  .stack-card{ grid-column: 1 / -1; }
}
/* =============== СЕКЦИЯ 7: Браслеты и манжеты =============== */
.bracelets-section{ position: relative; padding: clamp(28px,4vw,56px) 0; overflow: hidden; }
.bracelets-head{ max-width: 900px; margin-bottom: 10px; }

.bracelets-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.br-card{
  grid-column: span 4;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.br-card:hover{ transform: translateY(-4px) rotate3d(0,1,0,6deg); filter: saturate(1.05); }

.bracelets-bg{
  position: absolute; inset: auto 0 -12% 0; height: 34%;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(103,167,255,.12), transparent 60%),
    radial-gradient(60% 40% at 85% 100%, rgba(46,125,233,.10), transparent 60%);
  pointer-events: none; z-index: -1;
}

@media (max-width: 960px){ .br-card{ grid-column: span 6; } }
@media (max-width: 640px){ .br-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 8: Мини-коллекции (flip) =============== */
.littoral-section{ padding: clamp(28px,4vw,56px) 0; }
.littoral-head{ max-width: 900px; margin-bottom: 8px; }
.littoral-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.flip-card{
  grid-column: span 6;
  position: relative;
  perspective: 1200px;
  border-radius: var(--radius);
}
.flip-inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  border: 1px solid rgba(210,180,140,.28);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(210,180,140,.10), rgba(46,125,233,.06));
  padding: 12px; box-shadow: var(--shadow);
}
.flip-front, .flip-back{
  backface-visibility: hidden;
  min-height: 100%;
}
.flip-front figcaption{ margin-top: 8px; }
.flip-back{
  position: absolute; inset: 12px; border-radius: calc(var(--radius) - 12px);
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(200px 160px at 50% 30%, rgba(103,167,255,.16), rgba(46,125,233,.08));
  color: var(--ink-dim);
  transform: rotateY(180deg);
  padding: 8px;
}
.flip-card.flipped .flip-inner{ transform: rotateY(180deg); }

.flip-btn{
  margin-top: 8px; padding: 8px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(103,167,255,.28);
  background: linear-gradient(180deg, rgba(46,125,233,.14), rgba(46,125,233,.06));
  color: #fff;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.flip-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46,125,233,.25); }

@media (max-width: 720px){ .flip-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 9: Макро-галерея =============== */
.macro-section{ padding: clamp(28px,4vw,56px) 0; }
.macro-head{ max-width: 900px; margin-bottom: 8px; }
.macro-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.macro-card{
  grid-column: span 6;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.macro-card::after{
  content:""; position:absolute; inset:-20% -40% auto auto; width: 60%; height: 200%;
  background: radial-gradient(240px 80px at 30% 40%, rgba(255,255,255,.20), rgba(255,255,255,0));
  transform: translateX(-140%) rotate(18deg);
  transition: transform .9s ease;
  pointer-events: none;
}
.macro-card:hover::after{ transform: translateX(0) rotate(18deg); }

@media (max-width: 720px){ .macro-card{ grid-column: 1 / -1; } }
/* =============== СЕКЦИЯ 10: Дуэты =============== */
.duos-section{ padding: clamp(28px,4vw,56px) 0; }
.duos-head{ max-width: 900px; margin-bottom: 10px; }

.duos-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.duo-card{
  grid-column: span 4;
  border: 1px solid rgba(210,180,140,.28);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(180deg, rgba(210,180,140,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.duo-card:hover{ transform: translateY(-4px) rotate3d(0,1,0,6deg); filter: saturate(1.05); }
@media (max-width: 960px){ .duo-card{ grid-column: span 6; } }
@media (max-width: 640px){ .duo-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 11: Размерная шпаргалка (табы) =============== */
.size-section{ padding: clamp(28px,4vw,56px) 0; }
.size-head{ max-width: 900px; margin-bottom: 8px; }

.tabs{ display: inline-flex; gap: 8px; margin-bottom: 8px; }
.tab-btn{
  padding: 10px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(103,167,255,.28);
  background: linear-gradient(180deg, rgba(46,125,233,.14), rgba(46,125,233,.06));
  color: #fff; font-size: 14px;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.tab-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46,125,233,.25); }
.tab-btn[aria-selected="true"]{
  background: linear-gradient(180deg, rgba(103,167,255,.28), rgba(46,125,233,.12));
  border-color: rgba(103,167,255,.6);
}

.tab-panels{ margin-bottom: 6px; }
.tab-panel{ color: var(--ink-dim); }

.size-gallery{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.size-card{
  grid-column: span 6;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
}
@media (max-width: 720px){ .size-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 12: Подарочные сеты =============== */
.gsets-section{ padding: clamp(28px,4vw,56px) 0; }
.gsets-head{ max-width: 900px; margin-bottom: 8px; }

.gset-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.gset-card{
  grid-column: span 6;
  border: 1px solid rgba(210,180,140,.28);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(210,180,140,.10), rgba(46,125,233,.06));
  padding: 12px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}

/* Эффект «shine» (локальная версия) */
.gset-card.shine::after{
  content: ""; position: absolute; inset: -20% -60% auto auto; height: 200%; width: 30%;
  transform: translateX(-140%) rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
  transition: transform .8s ease;
  pointer-events: none;
}
.gset-card.shine:hover::after{ transform: translateX(40%) rotate(20deg); }

@media (max-width: 720px){ .gset-card{ grid-column: 1 / -1; } }
/* =============== СЕКЦИЯ 13: Сертификаты =============== */
.certs-section{ padding: clamp(28px,4vw,56px) 0; }
.certs-head{ max-width: 900px; margin-bottom: 8px; }
.certs-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.cert-card{
  grid-column: span 6;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
}
.certs-bullets{
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-dim);
}
.certs-bullets li{
  border: 1px solid rgba(210,180,140,.28);
  border-radius: 999px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(210,180,140,.12), rgba(46,125,233,.06));
  font-size: 13px;
}
@media (max-width: 720px){ .cert-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 14: Свет и оттенок =============== */
.lighting-section{ padding: clamp(28px,4vw,56px) 0; }
.lighting-head{ max-width: 900px; margin-bottom: 8px; }

.light-toggle{ display: inline-flex; gap: 8px; margin-bottom: 8px; }
.light-btn{
  padding: 10px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(103,167,255,.28);
  background: linear-gradient(180deg, rgba(46,125,233,.14), rgba(46,125,233,.06));
  color: #fff; font-size: 14px;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.light-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46,125,233,.25); }
.light-btn[aria-selected="true"]{
  background: linear-gradient(180deg, rgba(103,167,255,.28), rgba(46,125,233,.12));
  border-color: rgba(103,167,255,.6);
}

.light-gallery{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.light-card{
  grid-column: span 6;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
  transition: filter .25s ease, opacity .25s ease;
}
.light-card.dimmed{ opacity: .35; filter: grayscale(.15) contrast(.95); }
@media (max-width: 720px){ .light-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 15: Доставка =============== */
.shipping-section{ padding: clamp(28px,4vw,56px) 0; }
.shipping-head{ max-width: 900px; margin-bottom: 8px; }
.shipping-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.ship-card{
  grid-column: span 6;
  border: 1px solid rgba(210,180,140,.28);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(210,180,140,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
}
.shipping-bullets{
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-dim);
}
.shipping-bullets li{
  border: 1px solid rgba(103,167,255,.24);
  border-radius: 999px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(46,125,233,.12), rgba(46,125,233,.04));
  font-size: 13px;
}
@media (max-width: 720px){ .ship-card{ grid-column: 1 / -1; } }

/* =============== СЕКЦИЯ 16: Лимитированные выпуски =============== */
.limited-section{ padding: clamp(28px,4vw,56px) 0; }
.limited-head{ max-width: 900px; margin-bottom: 8px; }
.limited-grid{
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,22px);
}
.lim-card{
  grid-column: span 6;
  border: 1px solid rgba(103,167,255,.25);
  border-radius: var(--radius);
  padding: 12px; background: linear-gradient(180deg, rgba(46,125,233,.10), rgba(46,125,233,.06));
  box-shadow: var(--shadow);
}
.limited-badges{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lbadge{
  border: 1px solid rgba(210,180,140,.32);
  border-radius: 999px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(210,180,140,.12), rgba(46,125,233,.06));
  font-size: 13px; color: #fff;
}
@media (max-width: 720px){ .lim-card{ grid-column: 1 / -1; } }