/* ============================================================================
   GRAVIUS — PRODUCTS SHOWROOM + PRODUCT-DETAIL EDITORIAL LAYER  ·  v=SHOP-1
   Scoped to body.shop (products.html + product.html). Task-specific layouts —
   NOT a mechanical copy of the homepage. Reuses gravius.css tokens.
   Isolated from admin (admin never loads this file).
   ============================================================================ */

body.shop{ --sh-max:1180px; --sh-line:rgba(255,255,255,.10); --sh-line-soft:rgba(255,255,255,.06); }
body.shop main{ overflow-x:hidden; }
.sh-wrap{ width:100%; max-width:var(--sh-max); margin:0 auto; padding:0 clamp(18px,4vw,40px); }
body.shop [id]{ scroll-margin-top:100px; }

/* Breadcrumb */
.sh-crumb{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--silver); padding:clamp(96px,12vw,132px) 0 0; }
.sh-crumb a{ color:var(--silver); text-decoration:none; } .sh-crumb a:hover{ color:var(--mark); }
.sh-crumb .sep{ opacity:.5; }
.sh-crumb [aria-current]{ color:var(--silver); }

/* Section head (plain index, no capsule) */
.sh-index{ display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--silver); margin:0 0 20px; }
.sh-index::before{ content:""; width:26px; height:1px; background:var(--accent); opacity:.6; }
.sh-h1{ font-family:var(--font-sans); font-weight:600; letter-spacing:-.015em; line-height:1.05;
  font-size:clamp(2rem,4.5vw,3rem); color:var(--mark); margin:0; }
.sh-h2{ font-family:var(--font-sans); font-weight:600; letter-spacing:-.01em; line-height:1.1;
  font-size:clamp(1.5rem,2.8vw,2.1rem); color:var(--mark); margin:0; }
.sh-lead{ font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.6; color:var(--silver); margin:16px 0 0; max-width:62ch; }
.sh-p{ color:var(--silver); line-height:1.65; margin:12px 0 0; max-width:64ch; }

.sh-intro{ padding:14px 0 clamp(30px,5vw,54px); border-bottom:1px solid var(--sh-line); }

/* Concept media (honest, labelled) */
.sh-media{ position:relative; border:1px solid var(--sh-line); border-radius:12px; overflow:hidden;
  background:radial-gradient(120% 100% at 30% 0%, rgba(200,169,114,.09), transparent 55%), linear-gradient(135deg,#17171b,#0b0b0d 60%,#101014);
  display:flex; align-items:center; justify-content:center; }
.sh-media.ar-43{ aspect-ratio:4/3; } .sh-media.ar-11{ aspect-ratio:1/1; } .sh-media.ar-32{ aspect-ratio:3/2; }
.sh-media picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.sh-media picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.22));pointer-events:none}
.sh-media picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.sh-media__brush{ position:absolute; inset:0; opacity:.45; background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px); }
.sh-media__ico{ width:46px; height:36px; border:1.5px solid var(--steel); border-radius:6px; position:relative; opacity:.3; z-index:1; }
.sh-media__ico::after{ content:""; position:absolute; right:8px; top:7px; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--steel); }
.sh-media__label{ position:absolute; left:14px; right:14px; bottom:12px; display:flex; justify-content:space-between; gap:10px; z-index:1;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--steel); }
.sh-concept-note{ display:inline-flex; align-items:center; gap:6px; }
.sh-concept-note::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7; }
.sh-media-caption{ font-family:var(--font-mono); font-size:.7rem; color:var(--silver); margin:10px 0 0; }

/* Data rows (facts) */
.sh-facts{ margin:18px 0 0; border-top:1px solid var(--sh-line-soft); }
.sh-datarow{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--sh-line-soft); font-size:.88rem; }
.sh-datarow dt{ color:var(--silver); margin:0; } .sh-datarow dd{ color:var(--mark); margin:0; text-align:right; font-family:var(--font-mono); font-size:.83rem; }
.sh-datarow .price-mono, .sh-datarow [data-price-from], .sh-datarow [data-price-quote]{ color:var(--accent); }

/* Buttons */
.sh-btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:10px; font-family:var(--font-sans);
  font-size:.9rem; font-weight:500; text-decoration:none; cursor:pointer; transition:.22s var(--ease); border:1px solid transparent; }
.sh-btn--primary{ background:var(--mark); color:#0b0b0d; } .sh-btn--primary:hover{ opacity:.9; }
.sh-btn--ghost{ background:transparent; color:var(--mark); border-color:var(--sh-line); } .sh-btn--ghost:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.03); }

/* ---------- FEATURED FLAGSHIP ---------- */
.sh-featured{ padding:clamp(40px,6vw,72px) 0; border-bottom:1px solid var(--sh-line); }
.sh-featured__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,60px); align-items:center; }
.sh-featured .sh-media{ min-height:300px; }
.sh-featured h2{ margin:14px 0 0; }
.sh-featured .sh-kicker{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

/* ---------- SECONDARY PRODUCT ROWS (asymmetric) ---------- */
.sh-rows{ padding:clamp(40px,6vw,72px) 0; }
.sh-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,52px); align-items:center; }
.sh-row + .sh-row{ margin-top:clamp(38px,6vw,64px); padding-top:clamp(38px,6vw,64px); border-top:1px solid var(--sh-line-soft); }
.sh-row--flip .sh-row__media{ order:2; }
.sh-row .sh-kicker{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.sh-row h3{ font-family:var(--font-sans); font-size:clamp(1.25rem,2.3vw,1.65rem); font-weight:600; color:var(--mark); margin:10px 0 0; }
.sh-row__cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- SUBORDINATE SERVICE ---------- */
.sh-sub{ padding:clamp(32px,5vw,56px) 0 clamp(56px,8vw,90px); border-top:1px solid var(--sh-line); }
.sh-sub__card{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(16px,3vw,28px);
  border:1px solid var(--sh-line); border-radius:12px; padding:20px 22px; background:rgba(255,255,255,.015); }
/* Plain editorial label — no pill, sentence-case (mono reserved for measurements/prices) */
.sh-sub__label{ font-family:var(--font-sans); font-size:.82rem; color:var(--silver); white-space:nowrap; align-self:start; }
.sh-sub__card h3{ margin:0; font-size:1.05rem; color:var(--mark); font-weight:600; }
.sh-sub__card p{ margin:4px 0 0; font-size:.86rem; color:var(--silver); }
@media(max-width:640px){ .sh-sub__card{ grid-template-columns:1fr; gap:12px; text-align:left; } }

/* ============================ PRODUCT DETAIL ============================ */
.sh-detail{ padding:clamp(8px,2vw,20px) 0 0; }
.sh-detail__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(28px,4vw,56px); align-items:start; }
/* Left media column sticks so the taller config form never leaves a dead column. */
.sh-detail__media{ position:sticky; top:100px; align-self:start; }
.sh-detail__media .prod-media,.sh-detail__media [data-shop-media]{ border-radius:12px; }
.sh-detail__caption{ font-family:var(--font-mono); font-size:.7rem; color:var(--silver); margin:10px 0 0; display:flex; align-items:center; gap:6px; }
.sh-detail__caption::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7; flex:none; }
.sh-detail__form{ min-width:0; }
/* Remove the redundant "Produkto informacija" pill above the title (hook kept for shop.js). */
.sh-detail__form .eyebrow[data-shop-eyebrow]{ display:none; }

/* Sticky estimate + action inside the form column */
.sh-detail__form [data-shop-product-estimate]{ position:sticky; bottom:0; z-index:5;
  background:linear-gradient(180deg,rgba(11,11,13,0),#0b0b0d 30%); padding-top:10px; }
@media(max-width:900px){
  .sh-detail__grid{ grid-template-columns:1fr; }
  .sh-detail__media{ position:static; top:auto; }
}

/* Below-the-fold editorial sections (static, translated) */
.sh-below{ margin-top:clamp(48px,7vw,88px); border-top:1px solid var(--sh-line); }
.sh-block{ padding:clamp(36px,5vw,64px) 0; border-top:1px solid var(--sh-line-soft); }
.sh-block:first-child{ border-top:0; }
/* Process as a plain vertical sequence — no cards, no numbers, no rounded containers */
.sh-seq{ margin-top:20px; }
.sh-seq__row{ padding:16px 0; border-top:1px solid var(--sh-line-soft); }
.sh-seq__row:first-child{ border-top:0; padding-top:4px; }
.sh-seq__row b{ display:block; color:var(--mark); font-size:.98rem; font-weight:600; }
.sh-seq__row p{ margin:5px 0 0; color:var(--silver); font-size:.86rem; line-height:1.55; }
.sh-limits{ margin-top:16px; }
.sh-limits li{ color:var(--silver); font-size:.88rem; line-height:1.7; }
/* Delivery as label/value data rows with dividers */
.sh-deliver{ margin-top:16px; }
.sh-deliver__row{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:8px 28px; padding:14px 0; border-top:1px solid var(--sh-line-soft); }
.sh-deliver__row:first-child{ border-top:0; }
.sh-deliver__row dt{ margin:0; color:var(--silver); font-size:.9rem; }
.sh-deliver__row dd{ margin:0; color:var(--mark); font-size:.9rem; line-height:1.55; }
@media(max-width:760px){ .sh-deliver__row{ grid-template-columns:1fr; gap:4px; } }

/* Related routes — plain list, name left / action right, dividing lines only */
.sh-related{ margin-top:18px; }
.sh-related a{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:15px 0;
  border-top:1px solid var(--sh-line-soft); text-decoration:none; transition:.2s var(--ease); }
.sh-related a:first-child{ border-top:0; }
.sh-related .t{ color:var(--mark); font-weight:600; font-size:1rem; }
.sh-related .go{ font-family:var(--font-mono); color:var(--accent); font-size:.84rem; white-space:nowrap; transition:color .2s var(--ease); }
.sh-related a:hover .go{ color:var(--mark); }

/* Motion */
@media(prefers-reduced-motion:no-preference){
  html.js body.shop .sh-reveal{ opacity:0; transform:translateY(10px); transition:opacity .3s var(--ease),transform .3s var(--ease); }
  html.js body.shop .sh-reveal.in{ opacity:1; transform:none; }
}

@media(max-width:860px){
  .sh-featured__grid,.sh-row{ grid-template-columns:1fr; }
  .sh-row--flip .sh-row__media{ order:0; }
}