/* ============================================================
   PrudBuy — спільна база дизайн-системи
   Бренд #ED1C24 і графіт #484B58 — з dynamic_stylesheet_0.css сайту
   ============================================================ */
:root{
  --paper:#FFFFFF; --raised:#FFFFFF; --mist:#F4F6F9;
  --ink:#14141C; --ink-2:#3D4152; --muted:#6C7285;
  --line:#E4E8EF; --line-soft:#EEF1F6;
  --brand:#ED1C24; --brand-deep:#C41219; --brand-wash:#FEF0F0;
  --ok:#0E9C72; --ok-wash:#E9F7F2;
  --warn:#B26A00; --warn-wash:#FFF6E6;
  --info:#2563C7; --info-wash:#EAF1FC;
  --media:#FFFFFF;
  --slab:#14141C; --slab-ink:rgba(255,255,255,.66);
  --slab-line:rgba(255,255,255,.11);

  --r-card:20px; --r-btn:12px; --r-chip:999px; --r-in:12px;
  --sh-1:0 1px 2px rgba(20,20,28,.05), 0 1px 3px rgba(20,20,28,.04);
  --sh-2:0 4px 12px rgba(20,20,28,.07), 0 12px 28px rgba(20,20,28,.06);
  --sh-3:0 8px 20px rgba(20,20,28,.09), 0 20px 44px rgba(20,20,28,.09);

  --ease:cubic-bezier(.2,.8,.2,1); --fast:170ms; --mid:260ms;
  --maxw:1240px; --gut:clamp(14px,3.4vw,28px);
  --font-d:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-b:system-ui,-apple-system,'Segoe UI Variable Text','Segoe UI',
           'Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0F0F15; --raised:#17171F; --mist:#15151C;
    --ink:#F1F2F6; --ink-2:#C6C9D6; --muted:#9297A9;
    --line:#272733; --line-soft:#1F1F29;
    --brand:#FF4D54; --brand-deep:#FF6B71; --brand-wash:#2A1518;
    --ok:#3DBF97; --ok-wash:#12241E;
    --warn:#E0A33C; --warn-wash:#2A2114;
    --info:#6EA4F5; --info-wash:#141E2E;
    --slab:#17171F; --slab-ink:rgba(255,255,255,.62);
    --slab-line:rgba(255,255,255,.09);
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 4px 12px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
    --sh-3:0 8px 20px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#0F0F15; --raised:#17171F; --mist:#15151C;
  --ink:#F1F2F6; --ink-2:#C6C9D6; --muted:#9297A9;
  --line:#272733; --line-soft:#1F1F29;
  --brand:#FF4D54; --brand-deep:#FF6B71; --brand-wash:#2A1518;
  --ok:#3DBF97; --ok-wash:#12241E;
  --warn:#E0A33C; --warn-wash:#2A2114;
  --info:#6EA4F5; --info-wash:#141E2E;
  --slab:#17171F; --slab-ink:rgba(255,255,255,.62);
  --slab-line:rgba(255,255,255,.09);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 12px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
  --sh-3:0 8px 20px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --paper:#FFFFFF; --raised:#FFFFFF; --mist:#F4F6F9;
  --ink:#14141C; --ink-2:#3D4152; --muted:#6C7285;
  --line:#E4E8EF; --line-soft:#EEF1F6;
  --brand:#ED1C24; --brand-deep:#C41219; --brand-wash:#FEF0F0;
  --ok:#0E9C72; --ok-wash:#E9F7F2;
  --warn:#B26A00; --warn-wash:#FFF6E6;
  --info:#2563C7; --info-wash:#EAF1FC;
  --slab:#14141C; --slab-ink:rgba(255,255,255,.66);
  --slab-line:rgba(255,255,255,.11);
  --sh-1:0 1px 2px rgba(20,20,28,.05), 0 1px 3px rgba(20,20,28,.04);
  --sh-2:0 4px 12px rgba(20,20,28,.07), 0 12px 28px rgba(20,20,28,.06);
  --sh-3:0 8px 20px rgba(20,20,28,.09), 0 20px 44px rgba(20,20,28,.09);
}

*,*::before,*::after{box-sizing:border-box;}
/* власний display на елементі перебиває [hidden] з UA-стилів — повертаємо */
[hidden]{display:none !important;}
body{
  margin:0;background:var(--mist);color:var(--ink);
  font-family:var(--font-b);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,.dsp{font-family:var(--font-d);text-wrap:balance;margin:0;letter-spacing:-.025em;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
img{max-width:100%;display:block;}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px;}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}
.tnum{font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------- ЛОГО
   Справжній знак магазину (image/catalog/prudbuy/logo.png).
   Білий текст на червоній плямі — читається і на світлому, і на темному. */
.logo{display:inline-flex;align-items:center;flex:none;}
.logo img{height:32px;width:auto;display:block;}
@media (min-width:900px){.logo img{height:38px;}}

/* ---------------------------------------------------------- КНОПКИ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 22px;border-radius:var(--r-btn);
  font-family:var(--font-d);font-weight:700;font-size:14.5px;
  transition:transform var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease),
             background var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.btn:active{transform:scale(.98);}
.btn[disabled]{opacity:.45;pointer-events:none;}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-1);}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:var(--sh-2);}
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{background:var(--brand);transform:translateY(-2px);}
.btn-ghost{background:var(--mist);color:var(--ink);}
.btn-ghost:hover{background:var(--line-soft);}
.btn-out{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-out:hover{border-color:var(--ink);}
.btn-sm{height:38px;padding:0 15px;font-size:13px;border-radius:10px;}
.btn-block{width:100%;}

/* ---------------------------------------------------------- ПОЛЯ */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field > label{
  font-size:12px;font-weight:700;color:var(--muted);
  letter-spacing:.03em;font-family:var(--font-d);
}
.input{
  height:48px;padding:0 14px;width:100%;
  font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--raised);border:1.5px solid var(--line);
  border-radius:var(--r-in);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
textarea.input{height:auto;padding:12px 14px;resize:vertical;min-height:88px;}
.input::placeholder{color:var(--muted);}
.input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent);
}
.input[readonly]{background:var(--mist);color:var(--muted);cursor:not-allowed;}
.hint{font-size:12px;color:var(--muted);}

/* ---------------------------------------------------------- КАРТКИ */
.panel{
  background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(15px,2.2vw,24px);
}
.panel-hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:16px;
}
.panel-hd h2,.panel-hd h3{font-size:clamp(16px,2vw,19px);font-weight:800;}

/* ---------------------------------------------------------- БЕЙДЖІ */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-chip);
  font-family:var(--font-d);font-weight:700;font-size:11.5px;
  letter-spacing:.02em;white-space:nowrap;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-ok{background:var(--ok-wash);color:var(--ok);}
.pill-warn{background:var(--warn-wash);color:var(--warn);}
.pill-info{background:var(--info-wash);color:var(--info);}
.pill-brand{background:var(--brand-wash);color:var(--brand);}
.pill-mute{background:var(--mist);color:var(--muted);}
.pill-flat::before{display:none;}

/* ---------------------------------------------------------- РЯДОК ТОВАРУ */
.thumb{
  width:72px;height:72px;flex:none;border-radius:14px;
  background:var(--media);border:1px solid var(--line);
  display:grid;place-items:center;padding:6px;overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:contain;}

/* степер кількості */
.qty{
  display:inline-flex;align-items:center;
  border:1.5px solid var(--line);border-radius:10px;overflow:hidden;height:38px;
}
.qty button{
  width:34px;height:100%;display:grid;place-items:center;
  font-size:17px;font-weight:700;color:var(--ink-2);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.qty button:hover{background:var(--brand-wash);color:var(--brand);}
.qty b{
  min-width:34px;text-align:center;font-family:var(--font-d);
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------- ПОЯВА */
.rise{opacity:0;transform:translateY(16px);}
.rise.in{
  opacity:1;transform:none;
  transition:opacity 440ms var(--ease),transform 440ms var(--ease);
  transition-delay:var(--d,0ms);
}

/* ---------------------------------------------------------- ТОСТ */
.toast{
  position:fixed;z-index:95;left:50%;bottom:26px;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);
  padding:12px 19px;border-radius:var(--r-btn);
  font-family:var(--font-d);font-weight:600;font-size:13.5px;
  box-shadow:var(--sh-3);white-space:nowrap;
  transition:transform 380ms var(--ease),opacity 260ms var(--ease);
}
.toast.show{transform:translate(-50%,0);opacity:1;}

/* демо-плашка: прототип, не робочий платіж */
.demo-note{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--warn-wash);color:var(--warn);
  border-radius:14px;padding:12px 14px;font-size:12.5px;line-height:1.45;
}
.demo-note svg{flex:none;margin-top:1px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rise{opacity:1;transform:none;}
}