/* ==========================================================================
   flexx — product detail + bag page
   ========================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr); gap: 0 clamp(20px, 3vw, 48px); padding: 0 var(--gutter); }
.pdp__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdp__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--card-core); }
.pdp[data-line="cult"] .pdp__img { background: var(--card-cult); }
.pdp__img--hero { grid-column: 1 / -1; }
.pdp__img img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.2s var(--ease-out); }
.pdp__img:hover img { transform: scale(1.04); }
.pdp__dots { display: none; }
.pdp__panel { position: sticky; top: calc(var(--sticky-top, 0px) + 20px); display: grid; gap: 18px; padding: 26px 0 40px; transition: top .6s var(--ease-out); }
.pdp__top { display: flex; align-items: center; gap: 10px; }
.pdp__badges { display: flex; gap: 4px; flex: 1; }
.pdp__name { font-size: clamp(40px, 4.2vw, 68px); }
.pdp__pricebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pdp__rating { display: inline-flex; align-items: center; gap: 10px; }
.pdp__swatches { display: flex; gap: 14px; flex-wrap: wrap; padding: 4px; }
.pdp__opt .field__label b { color: var(--fg); font-weight: 500; }
.pdp__fit, .pdp__stock { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; color: var(--fg-2); }
.pdp__fit .ico, .pdp__stock .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pdp__stock { color: var(--accent-text); }
.pdp__buy { display: grid; grid-template-columns: 1fr 60px; gap: 8px; }
.pdp__add { justify-content: space-between; }
.pdp__add-price { letter-spacing: 0; font-weight: 400; }
.pdp__add.is-added { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.pdp__wish { display: grid; place-items: center; height: 60px; border: 1px solid var(--line-2); border-radius: var(--radius); transition: border-color .3s; }
.pdp__wish:hover { border-color: var(--fg); }
.pdp__wish[aria-pressed="true"] svg { fill: currentColor; }
.pdp[data-line="cult"] .pdp__wish[aria-pressed="true"] { color: var(--blood-hot); }
.pin { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 14px; border: 1px solid var(--line-2); }
.pin__ico .ico { width: 18px; height: 18px; }
.pin__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; }
.pin__btn { padding: 0 12px; height: 38px; }
.pin__out { margin-top: 8px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.pin__out .ico { width: 16px; height: 16px; }
.pin__out.is-err { color: var(--danger); }
.pdp__perks { display: grid; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--fg-2); }
.pdp__perks li { display: flex; gap: 10px; align-items: center; }
.pdp__share { display: flex; justify-content: space-between; align-items: center; }
.ctl__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.ctl__tag { margin-bottom: 10px; color: var(--muted); }
.rev { display: grid; grid-template-columns: 340px 1fr; gap: clamp(24px, 4vw, 70px); }
.rev__avg { font-size: clamp(70px, 8vw, 120px); }
.rev__sum { display: grid; gap: 10px; align-content: start; }
.rev__bars { display: grid; gap: 6px; margin-top: 10px; }
.rev__bar { display: grid; grid-template-columns: 30px 1fr 36px; align-items: center; gap: 10px; }
.rev__bar i { height: 4px; background: var(--line); }
.rev__bar b { display: block; height: 100%; background: var(--fg); }
.fitmeter { margin-top: 18px; }
.fitmeter__track { position: relative; height: 4px; margin: 12px 0 8px; background: var(--line); }
.fitmeter__track i { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--fg); }
.fitmeter__lbl { display: flex; justify-content: space-between; }
.rev__list { display: grid; border-top: 1px solid var(--line); }
.rev__item { display: grid; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rev__t { font: 700 17px/1.3 var(--f-body); }
.rev__b { color: var(--fg-2); max-width: 62ch; }
.rate { display: flex; gap: 6px; }
.rate button { font-size: 28px; color: var(--line-2); transition: color .2s, transform .3s var(--ease-back); }
.rate button[aria-checked="true"] { color: var(--fg); transform: scale(1.1); }
.pdpbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--bg); border-top: 1px solid var(--line); transform: translateY(105%); transition: transform .6s var(--ease-out); }
.pdpbar.is-on { transform: none; }
.pdpbar__in { display: flex; align-items: center; gap: 16px; height: 76px; }
.pdpbar__img { width: 46px; height: 56px; background: var(--card-core); flex: none; }
.pdpbar__img[data-line="cult"] { background: var(--card-cult); }
.pdpbar__img img { width: 100%; height: 100%; object-fit: contain; }
.pdpbar__txt { flex: 1; min-width: 0; }
.pdpbar__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoom { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--card-core); opacity: 0; transition: opacity .4s; }
.zoom[data-line="cult"] { background: #0e0d0d; color: var(--bone); }
.zoom.is-open { opacity: 1; }
.zoom__stage { position: absolute; inset: 0; overflow: hidden; cursor: zoom-in; }
.zoom__stage img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease-out); }
.zoom__stage.is-z { cursor: zoom-out; }
.zoom__stage.is-z img { transform: scale(2.3); }
.zoom__close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.zoom__nav { position: absolute; left: 50%; bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 14px; transform: translateX(-50%); }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; padding: 0; }
  .pdp__imgs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
  .pdp__img { flex: 0 0 100%; scroll-snap-align: start; }
  .pdp__dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 0; }
  .pdp__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
  .pdp__dots i.is-on { background: var(--fg); }
  .pdp__panel { position: static; padding: 18px var(--gutter) 30px; }
  .ctl__grid { grid-template-columns: 1fr 1fr; }
  .rev { grid-template-columns: 1fr; }
}

/* bag page */
.bag { display: grid; grid-template-columns: 1fr 400px; gap: clamp(24px, 4vw, 64px); align-items: start; }
.bag__sum { position: sticky; top: calc(var(--sticky-top, 0px) + 20px); display: grid; gap: 12px; padding: 24px; background: var(--bg-2); }
.bag__sum .drawer__row { margin: 0; }
.bag__promo { display: flex; gap: 8px; }
.bag__promo .input { height: 44px; }
.bag__total { padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 16px; }
@media (max-width: 900px) { .bag { grid-template-columns: 1fr; } .bag__sum { position: static; } }