/* ==========================================================================
   product_card.css — THE product card (WS2 "p3--x", frozen 2026-07-14)
   White card, 16px radius, --sw-line border. Signals live on the photo:
   deal tag TL (orange), battery tag TR (solid teal), condition pill BL.
   Money footer: full-bleed white panel, hairline top separator, order =
   savings → вноска → struck old → PRICE LAST (orange 800).
   Color grammar (closed): teal = money you keep (savings, battery) ·
   orange = money you pay (price, deal tag) · ink = facts · grey = context.

   Used by: homepage Топ предложения (owl slider) + device listings
   (templates/phones/phones_new.php grid). Markup lives in ONE place:
   templates/partials/product_card_item.php.

   History: prototype variants V1-V5 stripped 2026-07-21 (git history has
   them). The dark "deal band" campaign card (V3 design B) was earmarked for
   promo/campaign pages — resurrect from git if a campaign needs it.
   ========================================================================== */

.pcard {
     display: block;
     text-decoration: none;
     color: var(--sw-ink, #1a1a1a);
}
.pcard:hover, .pcard:focus {
     text-decoration: none;
     color: var(--sw-ink, #1a1a1a);
}

/* ---- the card box */
.p3-in {
     display: flex;
     flex-direction: column;
     height: 100%;
     position: relative;
     background: var(--sw-bg, #fff);
     border: 1px solid var(--sw-line, #eaeaea);
     border-radius: var(--sw-r-card, 16px);
     overflow: hidden;
     transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
     .p3:hover .p3-in {
          transform: translateY(-4px);
          box-shadow: var(--sw-sh-lg, 0 16px 48px rgba(0,0,0,.10));
     }
}

/* ---- media: square reserved via aspect-ratio + width/height attrs = 0 CLS */
.p3-media { display: block; position: relative; }
.pcard-img {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 1 / 1;
     object-fit: contain;
     padding: 16px 16px 6px;
     box-sizing: border-box;
}

/* ---- photo tags: deal TL = orange (money you pay), battery TR = solid teal
   (money you keep — shows only on battery_type='full', so it stays a periodic
   accent, not wallpaper) */
.pcard-tag {
     position: absolute;
     top: 10px;
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 11.5px;
     font-weight: 700;
     line-height: 1.4;
     padding: 3px 10px;
     border-radius: var(--sw-r-pill, 100px);
     z-index: 2;
     white-space: nowrap;
}
.pcard-tag--promo {
     left: 10px;
     background: var(--sw-price, #fb7b24);
     color: #fff;
}
.p3-tag-batt {
     right: 10px;
     background: var(--sw-teal-ink, #2bbbbc);
     color: #fff;
     box-shadow: 0 2px 8px rgba(43,187,188,.35);
}
.p3-tag-batt i { color: #fff; }

/* ---- condition pill, frosted, overlaid bottom-left on the photo */
.p3c-cond {
     position: absolute;
     left: 10px;
     bottom: 10px;
     z-index: 2;
     background: rgba(255,255,255,.94);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     border: 1px solid var(--sw-line, #eaeaea);
     border-radius: var(--sw-r-pill, 100px);
     padding: 3px 10px;
     font-size: 11px;
     color: var(--sw-grey, #6b7280);
     box-shadow: 0 2px 8px rgba(0,0,0,.07);
     white-space: nowrap;
}
.p3c-cond b { font-weight: 700; color: var(--sw-ink, #1a1a1a); }

/* ---- text: title = MODEL only (2 lines reserved, never ellipsis — the
   suffix IS the identity); sub = storage · color, same size, one line */
.p3-body { display: block; padding: 8px 14px 10px; }
.p3-title {
     display: block;
     font-size: 14px;
     font-weight: 700;
     line-height: 1.3;
     color: var(--sw-ink, #1a1a1a);
}
.p3-sub {
     display: block;
     font-size: 14px;
     font-weight: 500;
     color: var(--sw-grey, #6b7280);
     padding-top: 1px;
     min-height: 20px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

/* ---- money footer: full-bleed white panel, the hairline top edge is the
   separator; everything sits on the shared 14px text edge with the title */
.p3a-plate {
     display: flex;
     flex-direction: column;
     margin: 10px 0 0;
     margin-top: auto;
     background: #fff;
     border-top: 1px solid #eaeaea;
     padding: 10px 14px 13px;
}
/* the value story, top-down: savings → вноска → was → OUR PRICE (last line) */
.p3a-plate .p3-save { order: 1; }
.p3a-plate .p3-credit { order: 2; margin-top: 2px; }
.p3a-plate .p3-old { order: 3; margin-top: 5px; display: block; min-height: 16px; }
.p3a-plate .p3-price { order: 4; margin-top: 1px; }

.p3-save {
     display: block;
     font-size: 11.5px;
     color: var(--sw-grey, #6b7280);
     min-height: 17px;
     line-height: 1.45;
}
.p3-save b { font-weight: 700; color: var(--sw-teal-ink, #2bbbbc); }
.p3-credit {
     display: block;
     font-size: 11px;
     color: var(--sw-grey, #6b7280);
}
.p3-credit b { font-weight: 700; color: var(--sw-ink, #1a1a1a); }
.p3-credit i { color: var(--sw-muted, #9ca3af); font-size: 10.5px; margin-right: 2px; }
.p3-old s {
     color: var(--sw-muted, #9ca3af);
     text-decoration: line-through;
     font-size: 11.5px;
}
.p3-price {
     font-weight: 800;
     font-size: 16.5px;
     line-height: 1.35;
     color: #0c0c0c;
     white-space: nowrap;
}
.p3-price--orange { color: var(--sw-price, #fb7b24); }

/* ==========================================================================
   Listing grid (device listings) — white cards sit directly on the soft-grey
   page. The body class is set server-side by the controller (no :has()).
   Row margins pull the grid out by the per-card padding so the OUTER card
   edges align with the banners/sort bar instead of sitting inset.
   ========================================================================== */
body.pc-soft { background: var(--sw-bg-soft, #f5f5f7); }
.row.pcgrid--v6 {
     margin-left: -6px;
     margin-right: -6px;
}
.pcgrid--v6 .pcard { padding: 6px 6px 10px; }

/* ---- mobile (col-6, ~175px cards) */
@media only screen and (max-width: 767px) {
     .row.pcgrid--v6 { margin-left: -4px; margin-right: -4px; }
     .pcgrid--v6 .pcard { padding: 4px 4px 8px; }
     .pcard-img { padding: 10px 10px 4px; }
     .pcard-tag { font-size: 10px; padding: 2px 8px; top: 8px; }
     .pcard-tag--promo { left: 8px; }
     .p3-body { padding: 8px 11px 10px; }
     .p3-title { font-size: 12.5px; }
     .p3-sub { font-size: 12.5px; min-height: 18px; }
     .p3a-plate { padding: 10px 11px 11px; }
     /* dual price can't fit one narrow line: wrap at the " / " separator */
     .p3-price { font-size: 13.5px; white-space: normal; }
     /* вноска line one notch smaller so it holds one row on 2-col cards */
     .p3-credit { font-size: 10px; }
     .p3-credit i { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
     .p3-in { transition: none; }
     .p3:hover .p3-in { transform: none; }
}