/* =====================================================================
   Cart page — krepselis-2.html (filled) and krepselis-tuscias.html (empty).
   Task 124cwve82nu. Loaded on the cart page only.

   The layout's .citem rules are scoped to .cart-list: the header's cart
   drawer (main.css) uses the same class on this very page, and unscoped
   rules would restyle it. A few drawer rules reach into the scoped rows
   anyway (.citem .pr / .nm); they are reset right below.

   #cTotal / #cDiscLine of the layout became classes (.tot-v, .disc): the
   summary is redrawn by AJAX and ids inside it would only invite clashes.
   ===================================================================== */

  /* the layout's display:flex rules would otherwise beat the hidden attribute */
  .cart [hidden]{display:none !important}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cart-list .citem .pr{margin-top:0; font-family:inherit; font-weight:inherit; font-size:inherit}
  .cart-list .citem .nm{padding-right:0}

  /* ===== KREPŠELIS (2 variantas: be dešiniojo bloko, kompaktiškos eilutės) ===== */
  .cart{display:grid; grid-template-columns:1fr 360px; gap:26px; align-items:start; padding:6px 0 56px}
  .cart-list{border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden}
  .cart-list .citem{display:grid; grid-template-columns:84px 1fr auto; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line)}
  .cart-list .citem:last-child{border-bottom:none}
  .cart-list .citem .ph{background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; aspect-ratio:1/1}
  .cart-list .citem .ph img{width:100%; height:100%; object-fit:contain; padding:5px}
  .cart-list .citem .nm{font-size:15px; font-weight:600; line-height:1.25}
  .cart-list .citem .nm a:hover{color:var(--brand-d)}
  .cart-list .citem .sub{margin-top:3px; font-size:12.5px; color:var(--mut)}
  .cart-list .citem .paint{margin-top:7px; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px;
               background:var(--soft); border-radius:8px; padding:5px 10px; max-width:100%}
  .cart-list .citem .paint .sw{width:20px; height:20px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--line) inset; flex:0 0 20px}
  .cart-list .citem .paint .sw img{width:100%; height:100%; object-fit:cover; display:block}
  .cart-list .citem .paint .p-title{font-weight:600}
  .cart-list .citem .paint .p-val::before{content:"· "; color:var(--mut)}
  .cart-list .citem .paint .edit{margin-left:6px; font-size:12.5px; font-weight:600; color:var(--brand-d);
                     background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
  .cart-list .citem .paint .edit:hover{color:var(--ink)}
  .cart-list .citem .right{display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:8px; min-width:150px}
  /* сумма и цена за единицу в одну строку: минус ещё одна строка высоты */
  .cart-list .citem .pr{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; justify-content:flex-end}
  .cart-list .citem .sum{font-family:"Anybody",sans-serif; font-weight:700; font-size:18px; white-space:nowrap}
  .cart-list .sample-row .ph img{opacity:.9}
  /* eilutėse be kiekio (pavyzdžiai) kaina ir šalinimas telpa į vieną eilutę */
  .cart-list .sample-row .right{flex-direction:row; align-items:center; gap:14px}
  .cart-list .citem .old{font-size:13px; color:var(--mut); text-decoration:line-through; white-space:nowrap}
  .cart-list .citem .sale-badge{background:#fbeeea; color:#b0442f; font-weight:600; font-size:12.5px; padding:4px 9px}
  .cart-list .citem .per{font-size:12.5px; color:var(--mut); white-space:nowrap; text-align:right}
  /* удаление: значок без слова, в одной строке с количеством */
  .qrow{display:flex; align-items:center; gap:8px}
  .cart-list .citem .del{color:var(--mut); background:none; border:1.5px solid transparent; border-radius:8px; cursor:pointer;
              width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0}
  .cart-list .citem .del:hover{color:#b0442f; border-color:#eddcd6; background:#fdf6f4}
  .cart-list .citem .del svg{width:16px; height:16px}
  /* переключатель единиц: выбранный вариант с зелёной рамкой, чтобы сразу было видно, что считаем */
  .cqty .cu{display:inline-flex; gap:3px; background:var(--soft); border-radius:8px; padding:3px; margin:0 2px}
  .cqty .cu label{cursor:pointer}
  .cqty .cu input{position:absolute; opacity:0; width:0; height:0}
  /* одинаковая ширина обеих меток: при переключении жирный шрифт не двигает соседние кнопки */
  .cqty .cu span{display:inline-block; min-width:44px; text-align:center; padding:4px 8px; border-radius:6px;
                 font-size:12.5px; color:var(--mut); border:1.5px solid transparent; transition:.15s}
  .cqty .cu label:hover span{color:var(--ink)}
  .cqty .cu input:checked + span{background:#fff; color:var(--brand-d); font-weight:700; border-color:var(--brand)}
  .cqty .cu input:focus-visible + span{outline:2px solid var(--brand); outline-offset:2px}
  .cqty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:8px; overflow:hidden}
  .cqty button{width:34px; height:36px; border:none; background:#fff; font-size:17px; cursor:pointer}
  .cqty button:hover{color:var(--brand-d)}
  .cqty input{width:58px; border:none; text-align:center; font:inherit; font-size:14px; font-weight:600}
  .cqty .u{padding-right:11px; font-size:12.5px; color:var(--mut)}
  /* примечание к списку - подвалом внутри той же карточки, а не висящей строкой */
  .cfees{border-top:1px solid var(--line); padding:14px 16px 4px}
  .cfee-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:14px; color:var(--mut)}
  .cfee-row b{font-weight:600; color:var(--ink); white-space:nowrap}
  .cfee-row s{color:var(--mut); font-weight:400}
  .cfee-hint{margin:4px 0 10px; font-size:11.5px; line-height:1.45; color:var(--mut)}
  .cart-note{margin:0; padding:12px 16px; font-size:11.5px; line-height:1.45; color:var(--mut);
             background:var(--cream); border-top:1px solid var(--line)}
  /* итоги: колонка справа от списка, липнет к верху. Иерархия: главное - сумма и кнопка */
  .csum{position:sticky; top:90px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:18px 20px 20px}
  /* заголовки набраны плотным Anybody, служебные строки - обычным шрифтом помельче */
  .csum h2{font-family:"Anybody",sans-serif; font-size:17px; font-weight:600; color:var(--ink); margin-bottom:14px}
  .csum .deliv-pick{margin-bottom:12px}
  .csum .deliv-pick .lbl{display:none}          /* подпись дублировала строку "Pristatymas" ниже */
  .csum .deliv-hint{font-size:11.5px; line-height:1.4; margin-top:6px}
  /* служебные строки приглушены: рядом с чёрным итогом они читаются как второй план */
  /* строки сумм: подпись приглушённая, цифра тёмная. Не заголовки */
  /* весь блок набран одной плотной гарнитурой: строки не выпадают из заголовка */
  /* подпись и сумма одного кегля, разница только в насыщенности */
  .csum .sline{padding:4px 0; font-family:"Anybody",sans-serif; font-size:13px; font-weight:700; color:var(--ink)}
  .csum .sline .mut{font-family:"Anybody",sans-serif; font-size:13px; font-weight:500; color:var(--ink)}
  .csum .sline s{font-size:12px; font-weight:500}
  .csum .sline s{font-size:12px}
  .csum .fee-hint{font-size:11.5px; margin:-3px 0 9px}
  .csum .sline.tot{border-top:1px solid var(--line); margin-top:10px; padding-top:13px; align-items:baseline}
  .csum .sline.tot > span:first-child{font-family:"Anybody",sans-serif; font-weight:700; font-size:17px}
  .csum .sline.tot .tot-v{font-family:"Anybody",sans-serif; font-weight:700; font-size:23px; letter-spacing:-.01em}
  .csum .sline.tot .vat{font-size:11.5px}
  @media(max-width:1000px){
    .cart{grid-template-columns:1fr}
    /* порядок на узком экране: список, суммы, кнопка возврата, "часто покупают" */
    .csum{position:static; margin-top:18px; order:1}
    .cart .cart-bottom{order:2; margin-top:18px}
    .cart .also{order:3}
  }
  .sline{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px}
  .sline .mut{color:var(--mut)}
  .sline.tot{border-top:1px solid var(--line); margin-top:9px; padding-top:12px; font-size:18px; font-weight:700}
  .sline.tot .vat{font-size:12px; font-weight:500; color:var(--mut)}
  .deliv-pick{margin:14px 0 4px}
  .deliv-pick .lbl{font-size:12px; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.06em; margin-bottom:7px}
  .deliv-pick select{width:100%; font:inherit; font-size:14px; padding:10px 30px 10px 12px; appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365695c' stroke-width='2.2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center; background-size:13px; background-color:#fff;
    border:1.5px solid var(--line); border-radius:8px; color:var(--ink)}
  .deliv-pick select:focus{outline:none; border-color:var(--brand)}
  .deliv-hint{margin-top:7px; font-size:12.5px; color:var(--mut)}
  /* подсказка относится к строке выше: прижата к ней, отделена от следующей */
  .fee-hint{font-size:11.5px; color:var(--mut); margin:-4px 0 10px; line-height:1.35}
  .fee-line s{color:var(--mut); font-size:12.5px; margin-right:5px}
  .fee-bar{margin-top:14px; background:var(--soft); border-radius:10px; padding:11px 13px 12px}
  .fee-bar .fb-track{height:6px; border-radius:4px; background:#e2ded1; overflow:hidden}
  .fee-bar .fb-track span{display:block; height:100%; background:var(--brand); border-radius:4px; transition:width .3s}
  .fee-bar p{margin:8px 0 0; font-size:12.5px; color:#3d4136; line-height:1.35}
  .fee-bar b{font-weight:700}
  .fee-bar .fb-now{display:block; margin-top:3px; color:var(--mut); font-size:12px}
  .csum .btn{width:100%; justify-content:center; margin-top:16px}
  /* промокод спрятан за ссылкой: поле появляется, только если код есть */
  .promo-toggle{display:inline-block; margin-top:14px; padding:0; background:none; border:none; cursor:pointer;
                font:inherit; font-size:13px; color:var(--mut); text-decoration:underline; text-underline-offset:3px}
  .promo-toggle:hover{color:var(--ink)}
  .csum .promo-code{margin:14px 0 0; margin-left:0}
  .promo-msg{margin:8px 0 0; font-size:12px; line-height:1.4; display:flex; align-items:flex-start; gap:7px}
  .promo-msg.ok{color:var(--brand-d)}
  .promo-msg.err{color:#b0442f}
  .promo-msg .rm{background:none; border:none; padding:0; margin-left:auto; font:inherit; font-size:12px;
                 color:var(--mut); text-decoration:underline; cursor:pointer; white-space:nowrap}
  .promo-msg .rm:hover{color:var(--ink)}
  .csum .sline.disc span:last-child{color:var(--brand-d)}
  .csum .promo-code input{max-width:none; min-width:0}
  .csum .promo-code button{flex:0 0 auto; white-space:nowrap}
  .cart-bottom{grid-column:1; display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:16px}
  .cart-bottom .btn{flex:0 0 auto}
  .cart-bottom .btn svg{width:15px; height:15px}
  .promo-code{display:flex; gap:8px; margin-left:auto}
  .promo-code input{max-width:220px}
  /* dažnai perkama kartu */
  .also{grid-column:1; margin-top:22px; padding-top:26px; border-top:1px solid var(--line)}
  .also h2{font-size:18px; margin-bottom:14px}
  .also-list{display:grid; gap:10px}
  .also-row{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:11px;
            background:#fff; padding:11px 14px}
  .also-row .ph{width:56px; height:56px; flex:0 0 56px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff}
  .also-row .ph img{width:100%; height:100%; object-fit:contain; padding:4px}
  .also-row .tx{display:block}
  .also-row .tx b{display:block; font-size:15px}
  .also-row .tx span{display:block; font-size:12.5px; color:var(--mut); margin-top:3px}
  .also-row .pr{margin-left:auto; font-weight:600; font-size:15px; white-space:nowrap}
  .also-row .btn{padding:9px 16px; font-size:14px}
  @media(max-width:1000px){
    .also-row{display:grid; grid-template-columns:48px 1fr auto; gap:6px 10px; padding:10px 12px}
    .also-row .ph{grid-row:1 / span 2; width:48px; height:48px; flex:0 0 48px}
    .also-row .tx{grid-column:2; grid-row:1}
    .also-row .tx b{font-size:14px; line-height:1.25}
    .also-row .tx span{font-size:12.5px; margin-top:2px}
    .also-row .pr{grid-column:2; grid-row:2; margin:0; font-size:14px}
    .also-row .btn{grid-column:3; grid-row:1 / span 2; align-self:center; padding:8px 14px; font-size:14px}
    .also{margin-top:22px}
    .also h2{font-size:17px; margin-bottom:10px}
    .also-list{gap:8px}
  }
  @media(max-width:640px){
    .cart-bottom{flex-direction:column; align-items:stretch}
    .promo-code{margin-left:0} .promo-code input{max-width:none}
    .also-row{flex-wrap:wrap} .also-row .pr{margin-left:0} .also-row .btn{margin-left:auto}
  }
  .promo-code input{flex:1; font:inherit; font-size:14px; padding:10px 12px; border:1.5px solid var(--line); border-radius:8px; min-width:0}
  .promo-code input:focus{outline:none; border-color:var(--brand)}
  .promo-code button{font:inherit; font-size:14px; font-weight:600; padding:10px 15px; border:1.5px solid var(--line);
                border-radius:8px; background:#fff; cursor:pointer; white-space:nowrap}
  .pcode button:hover{border-color:var(--brand); color:var(--brand-d)}
  /* пустая корзина */
  .empty{text-align:center; padding:60px 20px 70px; border:1px solid var(--line); border-radius:12px; background:#fff}
  .empty svg{width:54px; height:54px; color:var(--line2, #ddd8c9)}
  .empty h2{margin-top:16px; font-size:23px}
  .empty p{margin-top:9px; color:var(--mut); font-size:15px}
  .empty .btn{margin-top:20px}
  /* мобильная карточка корзины: количество и сумма в одной строке, удаление значком рядом */
  @media(max-width:640px){
    .cart-list .citem{grid-template-columns:72px 1fr; gap:11px; padding:12px 13px; align-items:start}
    .cart-list .citem .ph{aspect-ratio:1/1}
    .cart-list .citem .right{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between;
                  min-width:0; gap:10px; margin-top:2px; padding-top:9px; border-top:1px solid var(--line)}
    .cart-list .citem .pr{justify-content:flex-end; flex-direction:column; align-items:flex-end; gap:1px}
    .cart-list .citem .paint{width:100%; display:grid; grid-template-columns:20px 1fr auto;
                  gap:4px 9px; align-items:center; padding:7px 10px; margin-top:7px}
    .cart-list .citem .paint .sw{grid-column:1; grid-row:1}
    .cart-list .citem .paint .p-title{grid-column:2 / span 2; grid-row:1}
    .cart-list .citem .paint .p-val{grid-column:1 / span 2; grid-row:2}
    .cart-list .citem .paint .p-val::before{content:none}
    .cart-list .citem .paint .edit{grid-column:3; grid-row:2; justify-self:end; margin:0}
  }
  @media(max-width:420px){
    .cqty input{width:46px}
    .cqty button{width:30px}
    .cqty .cu span{padding:4px 7px}
  }
  /* на широком экране сумма и кнопка всегда видны в липкой колонке справа, полоса внизу не нужна */
  .mob-bar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:150; background:#fff;
           border-top:1px solid var(--line); padding:11px 40px calc(11px + env(safe-area-inset-bottom));
           align-items:center; gap:16px; box-shadow:0 -6px 20px rgba(20,30,15,.10)}
  .mob-bar .back{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink)}
  .mob-bar .back svg{width:15px; height:15px}
  .mob-bar .back:hover{color:var(--brand-d)}
  .mob-bar .tot{margin-left:auto; display:flex; align-items:baseline; gap:8px}
  .mob-bar .t{font-size:12.5px; color:var(--mut)}
  .mob-bar .v{font-family:"Anybody",sans-serif; font-weight:700; font-size:19px}
  .mob-bar .btn{padding:12px 24px; flex:0 0 auto}
  @media(max-width:1000px){
    .mob-bar{display:flex; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); gap:12px}
    .mob-bar .back{display:none}
    /* содержимое собрано к центру: на телефонах со скруглёнными углами края обрезаются */
    .mob-bar{justify-content:center; gap:18px;
             padding:11px calc(24px + env(safe-area-inset-right)) calc(11px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left))}
    .mob-bar .tot{flex-direction:column; align-items:flex-start; gap:0; margin:0; min-width:0}
    .mob-bar .v{font-size:17px; white-space:nowrap}
    .mob-bar .btn{margin:0; padding:12px 24px}
    body:has(.mob-bar){padding-bottom:78px}
  }
  body{overflow-x:clip}               /* страховка от горизонтального выезда; на html не ставим: ломает липкие блоки в webview */

  /* AJAX regions: wrappers the layout does not have, placed as its blocks were */
  .cfees:empty{display:none}
  #cAlso{grid-column:1; min-width:0}
  .cart > div:first-child{min-width:0}
  @media(max-width:1000px){
    #cAlso{order:3}
  }
  /* the layout's mobile grid for the paint line also caught the sale badge
     (it shares the .paint class) and stacked "Akcija" over "-22%" */
  @media(max-width:640px){
    .cart-list .citem .paint.sale-badge{display:inline-flex; width:auto; padding:4px 9px}
  }
  /* busy state while a request is in flight: rows keep their height */
  .cart.busy .cart-list, .cart.busy .csum{opacity:.6; transition:opacity .15s}
  .cart.busy .cqty button, .cart.busy .del{pointer-events:none}
  .also-row button.btn{font:inherit; font-size:14px; font-weight:600; cursor:pointer}

  /* ===== Empty cart (krepselis-tuscias.html) ===== */
  .pgrid{grid-template-columns:repeat(4,1fr); gap:22px 18px}
  .empty{text-align:center; padding:60px 20px 70px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:44px}
  .empty svg{width:54px; height:54px; color:#ddd8c9}
  .empty h2{margin-top:16px; font-size:23px}
  .empty p{margin-top:9px; color:var(--mut); font-size:15px; max-width:52ch; margin-left:auto; margin-right:auto}
  .empty .hints{margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

  @media(max-width:760px){
    .pgrid{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
           margin:0 -18px; padding:0 18px 6px}
    .pgrid .prod{flex:0 0 82%; scroll-snap-align:center}
    .pgrid .prod .btn{opacity:1}
  }