/* =======================
   Catalog (page 2) — Sections 1–3
   Namespace: cl-
   ======================= */

.cl-visually-hidden{
  position:absolute!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  height:1px!important;width:1px!important;overflow:hidden!important;white-space:nowrap!important;
}

/* ---------- Sect.1: Hero (stair collage) ---------- */
.cl-hero{
  position:relative; padding:44px 0 28px;
  background:
    radial-gradient(1000px 420px at 6% 0%, color-mix(in oklab, var(--pl-powder) 34%, transparent), transparent 70%),
    radial-gradient(900px 420px at 100% 20%, color-mix(in oklab, var(--pl-peach) 36%, transparent), transparent 72%),
    var(--pl-oatmilk);
}
.cl-hero__grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-hero__title{
  font-family:"Fraunces", serif; font-size:38px; line-height:1.12; margin:0 0 8px;
}
.cl-hero__chips{ margin-top:10px }

.cl-stair{
  position:relative; display:grid; gap:12px;
  grid-template-columns:1fr 1fr; grid-template-areas:
  "a b"
  "a c";
  padding:14px; border-radius:18px;
  background:linear-gradient(180deg, #fff, color-mix(in oklab, var(--pl-oatmilk), white));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.cl-rail{
  position:absolute; left:-8px; top:0; bottom:0; width:8px; border-radius:8px;
  background: repeating-linear-gradient(180deg, var(--pl-champagne) 0 8px, transparent 8px 16px);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.06));
}
.cl-tile{ overflow:hidden; border-radius:16px }
.cl-tile img{ width:100%; max-width:350px; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.08); transition:transform var(--pl-d1) var(--pl-ease) }
.cl-tile:hover img{ transform:translateY(-3px) }
.cl-tile--a{ grid-area:a; transform:translateY(-6px) rotate(-1.5deg) }
.cl-tile--b{ grid-area:b; transform:rotate(1.5deg) }
.cl-tile--c{ grid-area:c; transform:translateY(6px) rotate(-1deg) }

.cl-zip{ height:18px; display:flex; align-items:center; justify-content:center }
.cl-zip__teeth{
  width:100%; height:10px; background:repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px); opacity:.65;
}

/* ---------- Sect.2: Filter runway ---------- */
.cl-filter{ padding:36px 0; background: var(--pl-oatmilk); }
.cl-filter__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-runway{
  position:relative; display:grid; gap:14px; grid-template-columns:1fr; width:min(100%, 360px);
  padding-left:14px;
}
.cl-pod{
  position:relative; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.05);
}
.cl-pod img{ width:100%; max-width:350px; border-radius:10px }
.cl-cap{ position:absolute; right:10px; bottom:8px; font-weight:700; background:var(--pl-celadon); padding:4px 8px; border-radius:999px }
.cl-pod--one{ transform:rotate(-2deg) }
.cl-pod--two{ transform:rotate( 1.5deg) translateX(8%) }
.cl-pod--three{ transform:rotate(-1deg) translateX(16%) }

/* ---------- Sect.3: Look builder (center text + side badges) ---------- */
.cl-look{ padding:40px 0; background:
  radial-gradient(900px 420px at 50% 100%, color-mix(in oklab, var(--pl-celadon) 34%, transparent), transparent 70%),
  var(--pl-oatmilk);
}
.cl-look__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns: 1fr 1.1fr 1fr;
}
.cl-badge img{ transition:transform var(--pl-d1) var(--pl-ease) }
.cl-badge--circle img{ border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.08) }
.cl-badge--diamond img{ clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow:0 10px 26px rgba(0,0,0,.08) }
.cl-badge:hover img{ transform:rotate(2deg) scale(1.02) }

/* ---------- Responsive: мобайл — сначала текст, затем изображения ---------- */
@media (max-width: 1020px){
  .cl-hero__grid,
  .cl-filter__grid,
  .cl-look__grid{ grid-template-columns:1fr }

  .cl-hero__content,
  .cl-filter__content,
  .cl-look__content{ order:1 }

  .cl-hero__media,
  .cl-runway,
  .cl-look__media{ order:2 }

  /* смягчаем углы и повороты на мобилке */
  .cl-tile--a, .cl-tile--b, .cl-tile--c,
  .cl-pod--one, .cl-pod--two, .cl-pod--three{ transform:none }
}
@media (prefers-reduced-motion: reduce){
  .cl-tile img, .cl-badge img{ transition:none }
}
/* ---------- Sect.4: Zig-zag vitrini ---------- */
.cl-zig{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 0% 20%, color-mix(in oklab, var(--pl-peach) 30%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-zig__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-zig__media{
  position:relative;
  display:grid; gap:12px;
  grid-template-columns:1fr 1fr;
}
.cl-zig__item img{
  width:100%; max-width:350px; border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition:transform var(--pl-d1) var(--pl-ease);
}
.cl-zig__a{ transform:translateY(-6px) rotate(-2deg) }
.cl-zig__b{ transform:translateY( 4px) rotate( 1deg) }
.cl-zig__c{ transform:translateY(-2px) rotate(-1deg) }
.cl-zig__d{ transform:translateY( 8px) rotate( 2deg) }
.cl-zig__item:hover img{ transform:translateY(-4px) }
.cl-zig__stitch{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-1px);
  background:repeating-linear-gradient(180deg, var(--pl-warmgray) 0 10px, transparent 10px 18px);
  opacity:.5;
}

/* ---------- Sect.5: Snap strip (scroll-snap) ---------- */
.cl-snap{ padding:36px 0; background:var(--pl-oatmilk) }
.cl-snap__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-snap__media{
  position:relative; display:flex; align-items:center; justify-content:center;
}
.cl-strip{
  width:min(100%, 360px);
  display:flex; gap:12px; overflow:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:8px 2px;
}
.cl-strip::-webkit-scrollbar{ height:6px }
.cl-strip::-webkit-scrollbar-thumb{ background:color-mix(in oklab, var(--pl-warmgray), white 30%); border-radius:6px }

.cl-chipfig{
  flex:0 0 auto; scroll-snap-align:center;
  background:#fff; border-radius:12px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.05);
}
.cl-chipfig img{ width:100%; max-width:330px; border-radius:8px }

.cl-snap__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  border:1px solid color-mix(in oklab, var(--pl-champagne), transparent 40%);
  background:#fff; cursor:pointer;
  transition:transform var(--pl-d1) var(--pl-ease), box-shadow var(--pl-d1) var(--pl-ease);
}
.cl-snap__btn:hover{ transform:translateY(-50%) scale(1.05); box-shadow:0 6px 14px rgba(0,0,0,.1) }
.cl-snap__btn--prev{ left:-8px }
.cl-snap__btn--next{ right:-8px }

/* ---------- Sect.6: Üçlü karşılaştırma ---------- */
.cl-compare{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 100% 80%, color-mix(in oklab, var(--pl-powder) 30%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-compare__grid{
  display:grid; gap:14px;
  grid-template-columns:1fr 1fr 1fr;
}
.cl-card{
  background:linear-gradient(180deg, #fff, color-mix(in oklab, var(--pl-oatmilk), white));
  border-radius:16px; padding:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.06);
}
.cl-card__media img{ width:100%; max-width:350px; border-radius:10px }
.cl-card__cap{ margin-top:8px; font-weight:700 }

/* ---------- Responsive (text → media) ---------- */
@media (max-width: 1020px){
  .cl-zig__grid,
  .cl-snap__grid{ grid-template-columns:1fr }
  .cl-zig__content,
  .cl-snap__content{ order:1 }
  .cl-zig__media,
  .cl-snap__media{ order:2 }

  .cl-compare__grid{ grid-template-columns:1fr }
  .cl-zig__a, .cl-zig__b, .cl-zig__c, .cl-zig__d{ transform:none }
}
/* ---------- Sect.7: Shelf (asymmetric) ---------- */
.cl-shelf{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 100% 10%, color-mix(in oklab, var(--pl-powder) 30%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-shelf__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-points{ list-style:disc; padding-left:18px; margin:8px 0 0 }
.cl-shelf__media{
  position:relative;
  display:grid; gap:12px;
  grid-template-areas:
    "wide tall"
    "mini tall";
  grid-template-columns:1fr 1fr;
}
.cl-shelf__tile img{
  width:100%; max-width:350px; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition:transform var(--pl-d1) var(--pl-ease);
}
.cl-shelf__tile:hover img{ transform:translateY(-3px) }
.cl-shelf__tile--wide{ grid-area:wide; transform:translateY(-6px) rotate(-1.5deg) }
.cl-shelf__tile--mini{ grid-area:mini; transform:translateY( 6px) rotate( 1deg) }
.cl-shelf__tile--tall{ grid-area:tall; transform:rotate(-.5deg) }
.cl-shelf__line{
  position:absolute; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg, var(--pl-warmgray) 0 10px, transparent 10px 18px);
  opacity:.5;
}
.cl-shelf__line--top{ top:36% }
.cl-shelf__line--mid{ top:74% }

/* ---------- Sect.8: Weave (stripe bg + shapes) ---------- */
.cl-weave{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 0% 100%, color-mix(in oklab, var(--pl-peach) 30%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-weave__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-weave__media{
  position:relative; display:grid; gap:12px;
  grid-template-columns:1fr 1fr; align-items:center;
}
.cl-weave__stripe{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image: repeating-linear-gradient(90deg, color-mix(in oklab, var(--pl-champagne), white 30%) 0 8px, transparent 8px 16px);
  mask: linear-gradient(#000 0 0);
}
.cl-weave__fig img{ width:100%; max-width:350px; box-shadow:0 10px 26px rgba(0,0,0,.08) }
.cl-weave__fig--hex img{
  clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
  border-radius:8px;
}
.cl-weave__fig--circle img{
  border-radius:999px;
}
.cl-weave__fig--bar{ grid-column:1 / -1 }
.cl-weave__fig--bar img{
  border-radius:12px;
}

/* ---------- Sect.9: Studio sets (T-shaped collage) ---------- */
.cl-studio{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 50% 0%, color-mix(in oklab, var(--pl-celadon) 30%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-studio__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-studio__media{
  position:relative; display:grid; gap:12px;
  grid-template-areas:
    "top top"
    "left right"
    "bottom bottom";
}
.cl-studio__tile img{ width:100%; max-width:350px; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.08); transition:transform var(--pl-d1) var(--pl-ease) }
.cl-studio__tile:hover img{ transform:translateY(-3px) }
.cl-studio__tile--top{ grid-area:top; transform:rotate(-1deg) }
.cl-studio__tile--left{ grid-area:left; transform:translateY(-4px) rotate(-1deg) }
.cl-studio__tile--right{ grid-area:right; transform:translateY( 4px) rotate( 1.5deg) }
.cl-studio__tile--bottom{ grid-area:bottom; transform:rotate(-.5deg) }

/* ---------- Responsive: мобайл — сначала текст, затем изображения ---------- */
@media (max-width: 1020px){
  .cl-shelf__grid,
  .cl-weave__grid,
  .cl-studio__grid{ grid-template-columns:1fr }

  .cl-shelf__content,
  .cl-weave__content,
  .cl-studio__content{ order:1 }
  .cl-shelf__media,
  .cl-weave__media,
  .cl-studio__media{ order:2 }

  .cl-shelf__tile--wide,
  .cl-shelf__tile--mini,
  .cl-shelf__tile--tall,
  .cl-studio__tile--top,
  .cl-studio__tile--left,
  .cl-studio__tile--right,
  .cl-studio__tile--bottom{ transform:none }
}
/* ===== Mobile polish (global) ===== */
@media (max-width: 1020px){
  body.pl-body{ overflow-x: hidden; }      /* защита от гор. скролла */
}
@media (max-width: 560px){
  .pl-main{ padding-top: 88px; }           /* запас под фикс-хедер */
  .pl-wrap{ padding: 0 12px; }             /* чуть уже поля */
  .pl-chip{ padding: 10px 12px; font-size: 14px; }
  .pl-btn{  padding: 12px 16px; }
}
@media (max-width: 420px){
  .pl-footer__grid{ grid-template-columns: 1fr; }
}
/* ===== Mobile/layout fixes for catalog ===== */

/* Общая логика: 1 колонка + текст выше медиа */
@media (max-width: 1020px){
  .cl-hero__grid,
  .cl-filter__grid,
  .cl-look__grid,
  .cl-zig__grid,
  .cl-snap__grid,
  .cl-compare__grid,
  .cl-shelf__grid,
  .cl-weave__grid,
  .cl-studio__grid{ grid-template-columns: 1fr; }

  .cl-hero__content,
  .cl-filter__content,
  .cl-look__content,
  .cl-zig__content,
  .cl-snap__content,
  .cl-shelf__content,
  .cl-weave__content,
  .cl-studio__content{ order: 1; }

  .cl-hero__media,
  .cl-runway,
  .cl-look__media,
  .cl-zig__media,
  .cl-snap__media,
  .cl-compare__grid,
  .cl-shelf__media,
  .cl-weave__media,
  .cl-studio__media{ order: 2; }
}

/* Секции с коллажами — убираем «зубцы»/повороты и принудительно в 1 колонку */
@media (max-width: 1020px){
  .cl-stair, .cl-zig__media, .cl-shelf__media, .cl-weave__media, .cl-studio__media{ grid-template-columns: 1fr; }
  .cl-tile--a, .cl-tile--b, .cl-tile--c,
  .cl-pod--one, .cl-pod--two, .cl-pod--three,
  .cl-zig__a, .cl-zig__b, .cl-zig__c, .cl-zig__d,
  .cl-shelf__tile--wide, .cl-shelf__tile--mini, .cl-shelf__tile--tall,
  .cl-studio__tile--top, .cl-studio__tile--left, .cl-studio__tile--right, .cl-studio__tile--bottom{
    transform: none !important;
  }
  .cl-rail, .cl-zig__stitch{ opacity: .35; } /* деликатнее на мобилке */
}

/* Секция 1 — заголовок меньше, медиа в рамках */
@media (max-width: 560px){
  .cl-hero__title{ font-size: 28px; }
  .cl-hero__media{ overflow: hidden; }
}

/* Секция 2 — runway: убираем левый отступ и скроллбар */
@media (max-width: 560px){
  .cl-runway{ padding-left: 0; }
}

/* Секция 5 — snap strip: стрелки внутрь, без переполнения */
@media (max-width: 560px){
  .cl-strip{ width: 100%; }
  .cl-strip::-webkit-scrollbar{ height: 0; } /* скрыть полосу на iOS/Chrome Mobile */
  .cl-snap__btn{ width: 26px; height: 26px; }
  .cl-snap__btn--prev{ left: 4px; }
  .cl-snap__btn--next{ right: 4px; }
}

/* Секция 6 — карточки в столбик, компактнее отступы */
@media (max-width: 1020px){
  .cl-compare__grid{ grid-template-columns: 1fr; gap: 12px; }
  .cl-card{ padding: 10px; }
}

/* Секции 7–9 — декоративные линии не мешают скроллу */
@media (max-width: 560px){
  .cl-shelf__line{ left: 6px; right: 6px; }
  .cl-weave__stripe{ opacity: .25; }
}
/* ==== Fix: Sect.5 Snap (mobile + arrows + no overflow) ==== */
.cl-snap__media{
  position:relative;
  overflow:hidden;          /* обрежем всё лишнее, чтобы не появлялся гор. скролл */
  padding:0 36px;           /* место для стрелок внутри контейнера */
}
.cl-strip{
  width:100%;               /* на мобилке растягиваемся по контейнеру */
  padding:8px 0;            /* контент не касается стрелок */
  -webkit-overflow-scrolling: touch;
  scroll-padding-left:12px; /* приятно «прилипает» к краю при снапе */
  scroll-padding-right:12px;
}

/* стрелки всегда внутри контейнера, без отрицательных значений */
.cl-snap__btn{ left:auto; right:auto; }
.cl-snap__btn--prev{ left:8px; }
.cl-snap__btn--next{ right:8px; }

/* рисуем чевроны из бордеров */
.cl-snap__btn::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:10px; height:10px;
  border-right:2px solid var(--pl-ink);
  border-bottom:2px solid var(--pl-ink);
  transform:translate(-50%, -50%) rotate(135deg);
}
.cl-snap__btn--next::before{
  transform:translate(-50%, -50%) rotate(-45deg);
}

/* компактнее на узких */
@media (max-width:560px){
  .cl-snap__media{ padding:0 30px; }
  .cl-snap__btn{ width:26px; height:26px; }
  .cl-strip::-webkit-scrollbar{ height:0; } /* скрыть полосу */
}
/* ---------- Sect.10: Sizes (center text, side images) ---------- */
.cl-size{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 50% 0%, color-mix(in oklab, var(--pl-powder) 28%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-size__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1fr 1.1fr 1fr;
}
.cl-bubble img{ width:100%; max-width:350px; transition:transform var(--pl-d1) var(--pl-ease) }
.cl-bubble--circle img{ border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.08) }
.cl-bubble--diamond img{ clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow:0 10px 26px rgba(0,0,0,.08) }
.cl-bubble:hover img{ transform:rotate(2deg) scale(1.02) }

/* ---------- Sect.11: Belt width (vertical ruler) ---------- */
.cl-width{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 0% 100%, color-mix(in oklab, var(--pl-peach) 28%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-width__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-steps{ padding-left:18px; margin:10px 0 0 }
.cl-ruler{
  position:relative; width:min(100%, 360px); margin-left:auto;
  display:grid; gap:12px;
}
.cl-ruler__rail{
  position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:6px;
  background:repeating-linear-gradient(180deg, var(--pl-warmgray) 0 10px, transparent 10px 18px);
  opacity:.5;
}
.cl-stripfig{ background:#fff; border-radius:12px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.05);
  margin-left:16px;
}
.cl-stripfig img{ width:100%; max-width:330px; border-radius:8px }

/* ---------- Sect.12: Order & delivery (accordion + stamp) ---------- */
.cl-order{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 100% 20%, color-mix(in oklab, var(--pl-celadon) 28%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-order__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-accord{ display:grid; gap:10px; margin-top:10px }
.cl-acc{ background:#fff; border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.05) }
.cl-acc > summary{
  cursor:pointer; padding:12px 14px; list-style:none; font-weight:700; position:relative;
}
.cl-acc > summary::marker{ display:none }
.cl-acc[open] > summary{ border-bottom:1px dashed color-mix(in oklab, var(--pl-warmgray), transparent 40%) }
.cl-acc > p{ padding:10px 14px 12px; margin:0 }

.cl-stamp img{
  width:100%; max-width:200px; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  outline:2px dashed var(--pl-champagne); outline-offset:6px;
}

/* ---------- Responsive: мобайл — текст выше медиа ---------- */
@media (max-width: 1020px){
  .cl-size__grid{ grid-template-columns:1fr }
  .cl-size__content{ order:1 }
  .cl-size__media--left{ order:2 }
  .cl-size__media--right{ order:3 }

  .cl-width__grid,
  .cl-order__grid{ grid-template-columns:1fr }
  .cl-width__content,
  .cl-order__content{ order:1 }
  .cl-width__media,
  .cl-order__media{ order:2 }

  .cl-ruler{ margin-left:0 }
}
/* ---------- Sect.13: Palette pairings ---------- */
.cl-pairs{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 50% 100%, color-mix(in oklab, var(--pl-peach) 28%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-pairs__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-pairs__media{
  position:relative; display:grid; gap:12px;
  grid-template-columns:1fr 1fr; align-items:start;
}
.cl-pairs__belt{
  position:absolute; left:-8%; right:-8%; top:38%; height:14px; opacity:.45;
  background:repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
  transform:rotate(-6deg);
}
.cl-pairs__tile img{
  width:100%; max-width:350px; border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition:transform var(--pl-d1) var(--pl-ease);
}
.cl-pairs__tile--a{ transform:translateY(-6px) rotate(-1.5deg) }
.cl-pairs__tile--b{ transform:translateY( 6px) rotate( 1deg) }
.cl-pairs__tile:hover img{ transform:translateY(-3px) }

/* ---------- Sect.14: Edge profiles ---------- */
.cl-edges{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 0% 0%, color-mix(in oklab, var(--pl-powder) 28%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-edges__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-edges__media{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
.cl-edge img{ width:100%; max-width:350px; box-shadow:0 10px 26px rgba(0,0,0,.08) }
.cl-edge--arc img{ border-radius:999px }
.cl-edge--flat img{ clip-path:polygon(6% 0, 100% 0, 94% 100%, 0 100%); border-radius:12px }

/* ---------- Sect.15: Contact card ---------- */
.cl-contactcard{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 100% 40%, color-mix(in oklab, var(--pl-celadon) 28%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-contactcard__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.cl-cardstamp img{
  width:100%; max-width:200px; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  outline:2px dashed var(--pl-champagne); outline-offset:6px;
}

/* ---------- Responsive: мобайл — текст выше медиа ---------- */
@media (max-width: 1020px){
  .cl-pairs__grid,
  .cl-edges__grid,
  .cl-contactcard__grid{ grid-template-columns:1fr }

  .cl-pairs__content,
  .cl-edges__content,
  .cl-contactcard__content{ order:1 }

  .cl-pairs__media,
  .cl-edges__media,
  .cl-contactcard__media{ order:2 }

  .cl-pairs__tile--a, .cl-pairs__tile--b{ transform:none }
  .cl-pairs__belt{ opacity:.3 }
}
/* ---------- Sect.16: Personalization notes (center + side notes) ---------- */
.cl-custom{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 50% 0%, color-mix(in oklab, var(--pl-peach) 26%, transparent), transparent 70%),
    var(--pl-oatmilk);
  position:relative;
}
.cl-custom__grid{
  display:grid; gap:24px; align-items:start;
  grid-template-columns: 1fr 1.4fr 1fr;
}
.cl-custom__side{ position:relative }
.cl-side__title{ font-weight:800; letter-spacing:.02em; margin:0 0 8px }
.cl-side__list{ list-style:disc; padding-left:18px; margin:0 }

.cl-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 }
.cl-badge{
  padding:8px 12px; border-radius:999px;
  background:var(--pl-powder);
  border:1px solid color-mix(in oklab, var(--pl-champagne), transparent 40%);
  font-weight:600;
}

.cl-checks{ display:grid; gap:12px; grid-template-columns:1fr 1fr 1fr; margin-top:10px }
.cl-check{
  background:linear-gradient(180deg, #fff, color-mix(in oklab, var(--pl-oatmilk), white));
  border-radius:16px; padding:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 8px 18px rgba(0,0,0,.06);
}
.cl-custom__stitch{
  position:absolute; left:0; right:0; bottom:0; height:14px; opacity:.7;
  background:repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
}

/* ---------- Sect.17: Policy ribbon ---------- */
.cl-policy{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 100% 100%, color-mix(in oklab, var(--pl-celadon) 26%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.cl-rules{
  counter-reset: rule;
  list-style:none; padding:0; margin:12px 0 0;
  position:relative;
}
.cl-rules li{
  counter-increment: rule;
  position:relative; padding:12px 12px 12px 44px; margin:10px 0;
  background:#fff; border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.05);
}
.cl-rules li::before{
  content: counter(rule);
  position:absolute; left:12px; top:12px;
  width:22px; height:22px; border-radius:999px;
  background:var(--pl-champagne);
  color:#000; display:flex; align-items:center; justify-content:center;
  font-weight:800;
}
.cl-rules li + li{ border-top:1px dashed color-mix(in oklab, var(--pl-warmgray), transparent 40%); }
.cl-rules header{ font-weight:800; margin:0 0 4px }

/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .cl-custom__grid{ grid-template-columns:1fr }
  .cl-custom__content{ order:1 }
  .cl-custom__side--left{ order:2 }
  .cl-custom__side--right{ order:3 }
  .cl-checks{ grid-template-columns:1fr }
}