/* product.css — product card, two modes: tobacco / hookah-accessory-coal (019, build P6 → blue world P10). Language of the home:
   the product on its flavour or section plate, the text on the blue. */

.pd-head { padding-bottom: 8px; }
.pd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; padding-bottom: clamp(40px, 4vw, 90px); }
.pd__gallery { grid-column: 1 / span 7; position: sticky; top: calc(var(--hdr) + 20px); }
.pd__main { position: relative; aspect-ratio: 1 / 1; max-height: 78vh; border-radius: var(--r-xl); overflow: hidden; }
.pd__main:not(.pl) { background: var(--tile); }
.pd__main::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 7%; height: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 32, 43, .16), transparent); pointer-events: none; }
.pd__badges { position: absolute; left: 18px; top: 18px; z-index: 2; display: flex; gap: 8px; }
.pd__zoom { position: absolute; inset: 0; cursor: zoom-in; }
.pd__zoom img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform .6s var(--ease), opacity .3s var(--ease-h); }
.pd__zoom:hover img { transform: scale(1.03); }
.pd__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd__thumbs button { width: 84px; height: 84px; border-radius: var(--r-m); background: var(--tile); overflow: hidden; position: relative; }
.pd__thumbs button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ink); opacity: 0;
  transition: opacity var(--t-h) var(--ease-h); }
.pd__thumbs button.is-on::after { opacity: 1; }
.pd__thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pd__note { margin-top: 12px; max-width: 70ch; }

.pd__buy { grid-column: 8 / span 5; display: grid; gap: 16px; align-content: start; padding-top: 6px; }
.pd__brand { font: 600 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pd__name { font: 700 clamp(26px, 2vw, 48px)/1.1 var(--f-text); letter-spacing: -.02em; }
.pd__taste { font-size: var(--fs-2); color: var(--ink-2); line-height: 1.45; }
.pd__taste:empty { display: none; }
.pd__chips .chip { background: var(--card); }
.pd__chips .chip b { color: var(--ink); font-weight: 600; }
.pd__weights { display: grid; gap: 8px; }
.pd__weights .chip.is-on { pointer-events: none; }
.pd__stockrow { display: flex; gap: 16px; align-items: center; }
.pd__price { font-size: clamp(34px, 2.4vw, 58px); }
.pd__act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pd__act .qty { height: 60px; }
.pd__act .qty button { height: 60px; }
.pd__btn { flex: 1; min-width: 220px; }
.pd__out { display: grid; gap: 12px; justify-items: start; }
.pd__outt { font: 600 var(--fs-2)/1.2 var(--f-text); color: var(--ink-2); }
.pd__promise { padding: 16px 20px; border-radius: var(--r-l); background: var(--mist); }
.pd__under { display: grid; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.pd__under li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--fs-0); color: var(--ink-2); line-height: 1.45; }
.pd__under svg { width: 20px; height: 20px; color: var(--ink); margin-top: 1px; }

.pd-info { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block: clamp(30px, 3vw, 70px);
  border-top: 1px solid var(--line); }
.pd-info__col { grid-column: span 4; display: grid; gap: 14px; align-content: start; }
.pd-info__col[hidden] + .pd-info__col { grid-column: 1 / span 7; }
.pd-kit { display: grid; gap: 8px; }
.pd-kit li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.pd-kit li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--link); flex: none; }
.pd-desc { font-size: var(--fs-1); line-height: 1.6; max-width: 62ch; white-space: pre-line; }
.pd-spec summary { cursor: pointer; font-weight: 600; color: var(--link); }
.pd-spec__t { margin-top: 12px; border-collapse: collapse; width: 100%; max-width: 560px; font-size: var(--fs-0); }
.pd-spec__t td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pd-spec__t td:first-child { color: var(--ink-2); padding-right: 20px; width: 50%; }
.pd-ask { grid-column: 9 / span 4; padding: clamp(20px, 1.8vw, 36px); border-radius: var(--r-xl); background: var(--panel); justify-items: start; }
.pd-ask__t { font: 600 var(--fs-2)/1.3 var(--f-text); }

.pd-with { padding-top: clamp(40px, 4vw, 90px); }
.pd-with__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.pd-with__list { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gutter); }
.pwi { position: relative; display: grid; gap: 10px; cursor: pointer; }
.pwi__ph { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--r-l); overflow: hidden; }
.pwi__ph img { width: 86%; height: 86%; object-fit: contain; }
.pwi__role { font: 600 13px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pwi__n { font-weight: 500; line-height: 1.3; font-size: 15px; }
.pwi__p { font-weight: 700; color: var(--price); }
.pwi input { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; accent-color: var(--blue-d); z-index: 2; }
.pwi.is-off { opacity: .55; }
.pd-with__sum { grid-column: 9 / span 4; position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 14px; padding: clamp(22px, 2vw, 40px);
  border-radius: var(--r-xl); background: var(--panel); }
.pd-with__sum .price { font-size: clamp(30px, 2.2vw, 52px); }

.pd-rev { display: flex; justify-content: space-between; align-items: center; gap: var(--gutter); padding-block: clamp(30px, 3vw, 64px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pd-rev__none { margin-top: 8px; color: var(--ink-2); }

.zoom { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; background: rgba(12, 28, 52, .96); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-h); }
.zoom.is-open { opacity: 1; pointer-events: auto; }
.zoom img { max-width: 88vw; max-height: 88vh; object-fit: contain; transform: scale(.94); transition: transform .6s var(--ease); }
.zoom.is-open img { transform: none; }
.zoom__x { position: absolute; right: 28px; top: 28px; }

@media (min-width: 2200px) {
  .pd__gallery { grid-column: 1 / span 6; }
  .pd__buy { grid-column: 7 / span 5; }
}