:root{
    --green:#8CC63F;
    --green-dark:#6FA32F;
    --ink:#212529;
    --dark:#0E0E0E;
    --dark-2:#222222;
    --yellow:#FFDA0F;
    --gray-1:#F1F1F1;
    --gray-2:#F0F4F7;
    --amber:#E8A33D;
    --amber-dark:#B5651D;
    --slate:#3A3A3A;
    --slate-dark:#171717;
    --blue:#3E7CB1;
    --blue-dark:#1F4E79;
    --green-light:#A9D66B;
    --green-deep:#173B0E;
    --green-deeper:#0E1F08;
    --green-overlay:rgba(140,198,63,0.35);
  }
  *{font-family:'Readex Pro',sans-serif;}
  body{color:var(--ink);background:#fff;font-size:15px;line-height:22.5px;font-weight:400;}
  h1{font-size:30px;line-height:36px;font-weight:800;}
  h2{font-size:25px;line-height:30px;font-weight:600;}
  h3{font-size:20px;line-height:30px;font-weight:700;}
  h4{font-size:25px;font-weight:800;}
  /* Výchozí barva odkazů — v mockupu byla #007BFF (modrá), ale reálně ji
     vidíme jen tam, kde WooCommerce vykresluje vlastní odkazy bez naší
     vlastní třídy (např. štítek kategorie u produktu, "New in store" v
     košíku). Proto necháváme odkaz zdědit barvu okolního textu; všude,
     kde chceme jinou barvu (patička, tlačítka, navigace...), má prvek
     svoji vlastní třídu, která toto přebije. */
  a{text-decoration:none;color:inherit;}
  .lead-hero{font-size:18px;line-height:32.4px;color:#fff;}

  .btn-theme{
    border-radius:50px;padding:14px 30px;background:var(--green);color:#fff;font-weight:600;
    border:none;transition:0.4s;display:inline-block;cursor:pointer;
  }
  .btn-theme:hover{background:var(--green-dark);color:#fff;}
  .btn-theme-outline{
    border-radius:50px;padding:14px 30px;background:transparent;color:#fff;font-weight:600;
    border:1px solid #fff;transition:0.4s;display:inline-block;cursor:pointer;
  }
  .btn-theme-outline:hover{background:#fff;color:var(--dark);}
  .btn-sm-theme{border-radius:50px;padding:9px 20px;background:var(--green);color:#fff;font-weight:600;border:none;font-size:14px;transition:0.4s;cursor:pointer;}
  .btn-sm-theme:hover{background:var(--green-dark);}

  header.site{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:40;}

  /* Hlavička na desktopu — hamburger je schovaný, menu + ikony (jazyky,
     účet, košík) jedou v jednom panelu vpravo od loga. Na mobilu (viz
     media query níž) se ten panel místo toho rozbaluje po kliknutí na
     hamburger. */
  .nav-toggle{
    display:none;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:38px;height:38px;border:none;background:transparent;cursor:pointer;padding:0;flex-shrink:0;
  }
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s ease;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .site-nav{display:flex;align-items:center;justify-content:space-between;flex:1;gap:16px;margin-left:32px;}

  /* Odkaz "Poptat individuální odběr" na hlavní straně teď míří na kotvu
     #rfq-box na stránce Velkoobjem — díky sticky hlavičce by po skoku
     kus formuláře schovala pod sebou, tenhle odsazovací okraj to řeší. */
  #rfq-box{scroll-margin-top:96px;}
  .nav-link{font-size:14.5px;font-weight:500;color:var(--ink)!important;padding:9px 14px;border-radius:50px;cursor:pointer;}
  .nav-link:hover{background:var(--gray-1);}
  .nav-link.active-link{background:var(--gray-1);color:var(--green-dark)!important;font-weight:700;}
  .logo{font-size:20px;font-weight:800;color:var(--ink);cursor:pointer;}
  .logo span{color:var(--green);}

  /* Přepínač jazyků (Polylang) v hlavičce — vlaječky. */
  .lang-switch{position:relative;}
  .lang-switch-current{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--ink);padding:9px 12px;border-radius:50px;border:1px solid #eee;background:#fff;cursor:pointer;}
  .lang-switch-current:hover{background:var(--gray-1);}
  .lang-flag{font-size:16px;line-height:1;}
  .lang-switch-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:6px;min-width:120px;z-index:50;}
  .lang-switch.is-open .lang-switch-menu{display:block;}
  .lang-switch-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink)!important;text-decoration:none!important;}
  .lang-switch-item:hover{background:var(--gray-1);}
  .lang-switch-item.is-active{color:var(--green-dark)!important;font-weight:700;}

  .hero-dark{
    background:radial-gradient(circle at 25% 20%,#2C5E1A 0%,#173B0E 55%,#0E1F08 100%);
    padding:70px 0;position:relative;overflow:hidden;
  }
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
  .hero-text{min-height:230px;}
  .hero-text .heyb{display:inline-block;font-size:12.5px;font-weight:700;color:#c7ea9a;background:rgba(140,198,63,.18);padding:5px 14px;border-radius:50px;margin-bottom:14px;opacity:0;transform:translateY(6px);transition:opacity .35s ease, transform .35s ease;}
  .hero-text h1{color:#fff;max-width:520px;opacity:0;transform:translateY(6px);transition:opacity .35s ease .05s, transform .35s ease .05s;}
  .hero-text p{max-width:460px;opacity:0;transform:translateY(6px);transition:opacity .35s ease .1s, transform .35s ease .1s;}
  .hero-text .hero-actions{opacity:0;transform:translateY(6px);transition:opacity .35s ease .15s, transform .35s ease .15s;margin-top:6px;}
  .hero-text.in .heyb, .hero-text.in h1, .hero-text.in p, .hero-text.in .hero-actions{opacity:1;transform:translateY(0);}
  .hero-visual{
    aspect-ratio:4/3;border-radius:24px;position:relative;overflow:hidden;
    background:linear-gradient(135deg,rgba(140,198,63,.3),rgba(255,218,15,.12));
    border:1px solid rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
  }
  .hero-visual .hv-art{opacity:0;transition:opacity .4s ease;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  .hero-visual .hv-art.in{opacity:1;}
  .hero-dots{display:flex;gap:8px;padding-top:34px;}
  .hero-dot{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);border:none;cursor:pointer;transition:.2s;}
  .hero-dot.on{background:var(--green);width:40px;}
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} .hero-visual{display:none;} }

  /* Hlavička na mobilu — menu, jazyky, účet i košík se schovají za
     hamburger a rozbalí se jako panel pod hlavičkou, ať se nic nemačká
     do jednoho řádku. */
  @media (max-width:900px){
    .nav-toggle{display:flex;}
    .site-nav{
      display:none;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;margin-left:0;
      background:#fff;border-bottom:1px solid #eee;box-shadow:0 14px 28px rgba(0,0,0,.08);
      padding:8px 20px 20px;max-height:calc(100vh - 64px);overflow-y:auto;
    }
    .site-nav.is-open{display:flex;}
    .site-nav nav{flex-direction:column;align-items:stretch;width:100%;}
    .site-nav nav .nav-link{width:100%;padding:12px 14px;}
    .site-nav-actions{
      flex-direction:column;align-items:stretch;gap:4px;width:100%;
      margin-top:8px;padding-top:12px;border-top:1px solid #eee;
    }
    .site-nav-actions > a{padding:10px 4px;}
    /* Pilulka s vlaječkou ať má šířku podle svého obsahu (ne přes celý
       řádek) a zůstane zarovnaná vlevo jako ostatní odkazy — align-self
       přebije zděděné align-items:stretch z .site-nav-actions výše. */
    .site-nav-actions .lang-switch{align-self:flex-start;}
    .site-nav-actions .lang-switch-menu{
      position:static;display:block;box-shadow:none;border:none;padding:4px 0 0;
      min-width:160px;
    }
    .site-nav-actions .lang-switch:not(.is-open) .lang-switch-menu{display:none;}
  }
  .badge-note{background:var(--yellow);color:var(--dark);font-size:12px;text-align:center;padding:7px 10px;font-weight:600;}

  .card-shop{background:var(--gray-1);border-radius:16px;padding:16px;height:100%;transition:0.3s;border:none;display:flex;flex-direction:column;}
  .card-shop:hover{background:var(--gray-2);}
  .card-shop.compact{padding:12px;}
  .swatch{width:100%;aspect-ratio:3/4;border-radius:12px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;text-align:center;padding:10px;position:relative;overflow:hidden;cursor:pointer;}
  .swatch.compact{aspect-ratio:16/9;margin-bottom:10px;}
  .swatch small{display:block;font-weight:400;opacity:0.85;margin-top:4px;font-size:11px;}
  .card-title{font-size:16px;line-height:22px;font-weight:700;margin-bottom:2px;cursor:pointer;}
  .card-shop.compact .card-title{font-size:14.5px;line-height:19px;}
  .card-sub{font-size:12.5px;color:#777;margin-bottom:10px;}
  .card-shop.compact .card-sub{font-size:12px;margin-bottom:6px;}
  .card-shop.compact .variant-row{margin-bottom:6px;gap:4px;}
  .card-shop.compact .variant-pill{padding:4px 9px;font-size:11px;}
  .data-tag{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:50px;}
  .data-tag.novinka{background:var(--yellow);color:#3a2f00;}
  .data-tag.oblibene{background:var(--green);color:#fff;}

  .variant-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
  .variant-pill{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:50px;border:1.5px solid #dfe3e6;background:#fff;color:var(--ink);cursor:pointer;transition:.15s;}
  .variant-pill:hover{border-color:var(--green);}
  .variant-pill.active{background:var(--dark);border-color:var(--dark);color:#fff;}

  .color-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
  .color-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px #dfe3e6;transition:.15s;}
  .color-dot:hover{box-shadow:0 0 0 1.5px var(--green);}
  .color-dot.active{box-shadow:0 0 0 2px var(--dark);}
  .color-dot.sm{width:17px;height:17px;}

  .section-dark{background:var(--gray-2);color:var(--ink);padding:56px 0;}
  .section-dark h2{color:var(--ink);}
  .section-dark p{color:#667;}

  .cat-tile-big{border-radius:16px;padding:24px;color:#fff;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;transition:.25s;text-decoration:none;}
  .cat-tile-big:hover{transform:translateY(-3px);}
  .cat-tile-big h3{color:#fff;margin-bottom:2px;}
  .cat-tile-big p{color:rgba(255,255,255,.8);font-size:13.5px;margin-bottom:0;}
  .cat-tile-big.velkoobjem{background:linear-gradient(135deg,var(--green),var(--green-dark) 80%);}
  .cat-tile-big.kapaliny{background:linear-gradient(135deg,var(--amber),var(--amber-dark) 80%);}
  .cat-tile-big.filamenty{background:linear-gradient(135deg,var(--slate),var(--slate-dark) 80%);}
  .cat-tile-big.drte{background:linear-gradient(135deg,var(--blue),var(--blue-dark) 80%);}
  /* Zachováno kvůli zpětné kompatibilitě (stará jména kategorií) — nové
     dlaždice na homepage používají třídy výše (kapaliny/filamenty/drte). */
  .cat-tile-big.maloobchod{background:linear-gradient(135deg,var(--amber),var(--amber-dark) 80%);}
  .cat-tile-big.merch{background:linear-gradient(135deg,var(--slate),var(--slate-dark) 80%);}

  footer{background:#4F8A2E;color:#fff;padding:44px 0;font-size:14px;}
  footer .footer-logo{font-size:20px;font-weight:800;color:#fff;margin-bottom:12px;}
  footer a{color:#fff;text-decoration:underline;}
  footer h4.footer-head{font-size:16px;font-weight:700;color:#fff;margin-bottom:14px;}
  footer .footer-links a{display:block;margin-bottom:10px;font-size:14px;}
  footer .footer-bottom{background:#0E0E0E;padding:14px 0;font-size:13px;color:#aaa;}

  /* Patička na mobilu — sloupce se díky Bootstrap gridu (col-md-*) samy
     zalomí pod sebe, tady jen doladíme, ať to není nalepené k levému
     okraji a má to čitelné odsazení mezi bloky. */
  @media (max-width:767px){
    footer{padding:36px 0;text-align:center;}
    footer .row > [class*="col-"]{text-align:center;}
    footer .footer-logo{justify-content:center;}
    footer p{margin-left:auto;margin-right:auto;}
    footer .footer-links{display:flex;flex-direction:column;align-items:center;}
    .footer-bottom .container{justify-content:center;text-align:center;}
  }

  .price{font-size:26px;font-weight:800;color:var(--ink);}
  .price-unit{font-size:13px;color:#777;}
  .card-price{font-size:17px;font-weight:800;color:var(--ink);}
  /* V kartě v mřížce je na poznámku o DPH málo místa a láme řádek —
     zákon vyžaduje jen to, aby cena DPH obsahovala, ne aby to bylo
     ještě navíc napsané, takže ji tady radši úplně schováme. */
  .card-price .woocommerce-price-suffix{display:none;}
  .qty-box{display:flex;border:1px solid #ddd;border-radius:50px;overflow:hidden;width:fit-content;}
  .qty-box button{width:38px;border:none;background:#fff;font-size:16px;cursor:pointer;}
  .qty-box input{width:44px;text-align:center;border:none;font-size:14px;}

  .spec-table{width:100%;font-size:14px;}
  .spec-table tr{border-top:1px solid #eee;}
  .spec-table td{padding:10px 0;}
  .spec-table td:first-child{color:#777;width:46%;}
  .spec-table td:last-child{font-weight:600;}

  .rfq-box{background:var(--gray-2);border-radius:16px;padding:30px;}
  .field-err{color:#dc3545;font-size:13px;margin-top:6px;display:none;}

  .cart-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid #eee;}
  .cart-thumb{width:48px;height:48px;border-radius:10px;background:var(--gray-1);flex-shrink:0;}
  .empty-cart{padding:60px 0;text-align:center;color:#777;}

  /* ---------- stránka Košík (skutečný WooCommerce formulář, ne mockup JS) ----------
     Necháváme běžet standardní WooCommerce tabulku (funkční množství, kupón,
     doprava), jen ji přebarvujeme/zaoblujeme do stejného "vibu" jako zbytek webu. */
  .woocommerce-cart table.cart,
  .woocommerce-cart table.shop_table{border:none;border-collapse:collapse;width:100%;}
  .woocommerce-cart table.cart th{
    border:none;border-bottom:2px solid var(--gray-1);font-size:12.5px;text-transform:uppercase;
    letter-spacing:.03em;color:#888;font-weight:700;padding:0 0 12px;text-align:left;
  }
  .woocommerce-cart table.cart td{border:none;border-top:1px solid var(--gray-1);padding:16px 10px 16px 0;vertical-align:middle;}
  .woocommerce-cart table.cart td.product-remove{padding-right:4px;width:24px;}
  .woocommerce-cart table.cart td.product-remove a.remove{
    display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
    border-radius:50%;background:var(--gray-1);color:#dc3545!important;font-size:16px;line-height:1;
  }
  .woocommerce-cart table.cart td.product-remove a.remove:hover{background:#dc3545;color:#fff!important;}
  .woocommerce-cart table.cart img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--gray-1);}
  .woocommerce-cart table.cart td.product-name a{font-weight:600;color:var(--ink)!important;}
  .woocommerce-cart table.cart .quantity .qty{
    width:64px;height:40px;box-sizing:border-box;padding:0 8px;border:1px solid #ddd;
    border-radius:50px;text-align:center;font-size:14px;
  }
  /* Pozor: td.actions je buňka tabulky s colspan — na "display:flex"
     reagovalo rozhozením celé tabulky (posunuté sloupce v řádcích nad
     tím). Proto tu vlevo/vpravo řešíme přes float, ne přes flex. */
  .woocommerce-cart td.actions{overflow:hidden;}
  .woocommerce-cart .coupon{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;margin-left:14px;max-width:420px;float:left;}
  .woocommerce-cart .coupon label{margin:0;font-size:14px;color:var(--ink);white-space:nowrap;}
  .woocommerce-cart .coupon .input-text{
    flex:1 1 260px;min-width:140px;
    border:1px solid #ddd;border-radius:50px;padding:11px 16px;font-size:14px;line-height:1.2;box-sizing:border-box;
  }
  .woocommerce-cart .coupon button.button,
  .woocommerce-cart button[name="update_cart"]{
    flex:0 0 auto;white-space:nowrap;
    border-radius:50px;padding:10px 22px;background:#fff;color:var(--ink);font-weight:600;
    border:1.5px solid #ddd;font-size:14px;cursor:pointer;transition:.2s;
  }
  .woocommerce-cart button[name="update_cart"]{float:right;margin:0;}
  .woocommerce-cart .coupon button.button:hover,
  .woocommerce-cart button[name="update_cart"]:not([disabled]):hover{border-color:var(--green);color:var(--green-dark);}
  .woocommerce-cart button[name="update_cart"]:disabled{opacity:.4;cursor:not-allowed;}

  /* Košík na mobilu — tabulka o šesti sloupcích (odebrat/obrázek/název/
     cena/množství/mezisoučet) se na malou šířku vůbec nevejde a stránka
     se pak dala jen vodorovně rolovat. WooCommerce má na tohle vlastní
     řešení (shop_table_responsive + atributy data-title), ale jeho
     styly máme záměrně úplně vypnuté (woocommerce_enqueue_styles), takže
     si stejný "kartička na položku" přístup, jaký už máme u tabulky
     objednávek v Moje účet, doděláváme sami. */
  @media (max-width:700px){
    .woocommerce-cart table.cart thead{display:none;}
    .woocommerce-cart table.cart,
    .woocommerce-cart table.cart tbody,
    .woocommerce-cart table.cart tr{display:block;width:100%;}
    .woocommerce-cart table.cart tr.cart_item,
    .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item{
      display:flex;flex-wrap:wrap;position:relative;
      border:1px solid var(--gray-1);border-radius:14px;
      padding:14px 40px 12px 14px;margin-bottom:14px;
    }
    .woocommerce-cart table.cart td{border:none;padding:0;}
    .woocommerce-cart table.cart td.product-remove{
      order:1;position:absolute;top:10px;right:10px;width:auto;padding:0;
    }
    .woocommerce-cart table.cart td.product-thumbnail{
      order:2;flex:0 0 56px;margin-right:12px;
    }
    .woocommerce-cart table.cart td.product-name{
      order:3;flex:1 1 auto;min-width:0;align-self:center;
    }
    .woocommerce-cart table.cart td.product-price,
    .woocommerce-cart table.cart td.product-quantity,
    .woocommerce-cart table.cart td.product-subtotal{
      order:4;flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;
      padding:10px 0 0;margin-top:10px;border-top:1px solid var(--gray-1);
    }
    .woocommerce-cart table.cart td.product-price::before,
    .woocommerce-cart table.cart td.product-quantity::before,
    .woocommerce-cart table.cart td.product-subtotal::before{
      content:attr(data-title);font-size:12px;text-transform:uppercase;letter-spacing:.03em;
      color:#888;font-weight:600;
    }
    .woocommerce-cart table.cart td.product-subtotal{font-weight:700;}

    /* Řádek s kupónem a "Aktualizovat košík" — na desktopu vedle sebe
       přes float, na mobilu radši každé pod sebou na celou šířku. Sama
       <tr> je díky obecnému pravidlu výš už display:block bez rámečku;
       jen buňka .actions dostane trochu odsazení nahoře. */
    .woocommerce-cart td.actions{display:block;padding:18px 0 0!important;}
    .woocommerce-cart .coupon{
      float:none;max-width:100%;width:100%;flex-wrap:wrap;margin-left:0;margin-bottom:10px;
    }
    .woocommerce-cart .coupon .input-text{flex:1 1 100%;width:100%;margin-bottom:8px;}
    .woocommerce-cart .coupon button.button{flex:1 1 100%;width:100%;}
    .woocommerce-cart button[name="update_cart"]{float:none;width:100%;}
  }

  /* Tabulku "Celkem k platbě" na stránce Košíku jsme na přání schovali —
     zbytečně duplikovala to, co uvidí za chvíli na Pokladně, a bez pevného
     bočního sloupce vždy spadla pod produkty. Tlačítko "Přejít k pokladně"
     ale musí zůstat — bez něj by se zákazník neměl jak dostat dál! */
  .woocommerce-cart .cart_totals h2,
  .woocommerce-cart .cart_totals table.shop_table{display:none;}

  .woocommerce-cart-form{margin-bottom:24px;}
  .cart_totals{background:none;padding:0;}
  .wc-proceed-to-checkout a.checkout-button{
    display:block;width:100%;text-align:center;border-radius:50px;padding:14px 30px;
    background:var(--green)!important;color:#fff!important;font-weight:600;font-size:15px;
    border:none;transition:.3s;margin-top:6px;
  }
  .wc-proceed-to-checkout a.checkout-button:hover{background:var(--green-dark)!important;}
  .woocommerce-shipping-calculator .shipping-calculator-button{color:var(--green-dark);font-size:13.5px;}

  .toast-custom{
    position:fixed;bottom:22px;right:22px;background:var(--dark);color:#fff;padding:12px 20px;border-radius:50px;font-size:13px;
    opacity:0;transform:translateY(8px);transition:all .2s ease;pointer-events:none;z-index:50;
  }
  .toast-custom.show{opacity:1;transform:translateY(0);}

  .breadcrumb-link{font-size:13px;color:#777;cursor:pointer;}
  .cart-count{background:var(--green);color:#fff;font-weight:700;font-size:12px;line-height:1;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0;}

  .view{display:none;}
  .view.active{display:block;}

  .cat-intro{max-width:640px;color:#666;font-size:14.5px;}

  /* ---------- cookie lišta ---------- */
  .cookie-banner{
    position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:920px;margin:0 auto;
    background:var(--dark);color:#fff;border-radius:16px;padding:18px 22px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .cookie-banner[hidden]{display:none;}
  .cookie-banner p{margin:0;font-size:13.5px;color:rgba(255,255,255,.85);max-width:600px;}
  .cookie-banner a{color:#fff;text-decoration:underline;}
  .cookie-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .cookie-btn{font-size:13px;font-weight:600;padding:9px 16px;border-radius:50px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;}
  .cookie-btn.primary{background:var(--green);border-color:var(--green);}

  /* ---------- právní stránky ---------- */
  .legal-page{max-width:760px;margin:0 auto;padding:50px 24px 70px;}
  .legal-page h1{font-size:26px;margin-bottom:6px;}
  .legal-page h2{font-size:17px;font-weight:700;margin-top:28px;}
  .legal-page p, .legal-page li{font-size:14.5px;color:#444;}
  .legal-note{
    background:var(--gray-1);border-radius:10px;padding:12px 16px;font-size:13px;color:#555;
    margin:14px 0 24px;
  }

  .docs-block{margin-top:0;padding-top:16px;border-top:1px solid #eee;}
  .docs-title{font-size:16px;font-weight:700;margin-bottom:14px;}
  .docs-title span{font-weight:400;color:#999;font-size:14px;}
  .doc-row{
    display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--gray-1);
    border-radius:12px;margin-bottom:10px;
  }
  .doc-icon{
    width:38px;height:38px;border-radius:8px;background:var(--dark);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex-shrink:0;
  }
  .doc-name{font-size:14.5px;font-weight:600;margin-bottom:2px;}
  .doc-meta{font-size:12px;color:#888;}
  .doc-dl{
    margin-left:auto;border-radius:50px;padding:8px 18px;background:#fff;border:1.5px solid #ddd;
    font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;
    text-decoration:none;display:inline-block;transition:.15s;
  }
  .doc-dl:hover{border-color:var(--green);color:var(--ink);}
  .docs-empty{font-size:13px;color:#999;}

  /* ---------- přepis výchozího vzhledu WooCommerce na detailu produktu ---------- */

  /* Rámeček s fotkou na detailu — užší sloupec (ne přes celou šířku), ale bez
     vynuceného poměru stran, takže se fotka zobrazí celá, nic se neořízne.
     Vlastní izolovaná třída — nesdílí nic se .swatch (ten má svůj vlastní
     poměr stran určený pro mockupové ikonky, ne pro reálné fotky). */
  .ervo-gallery-swatch,
  .ervo-gallery-swatch *{border-radius:16px;}
  .ervo-gallery-swatch div,
  .ervo-gallery-swatch a{
    display:block!important;width:100%!important;max-width:100%!important;
  }
  .ervo-gallery-swatch{width:100%!important;max-width:400px!important;margin:0 auto;}
  /* Klik na fotku by jinak otevřel obrázek samotný na nové stránce — vypínáme. */
  .ervo-gallery-swatch a{pointer-events:none;cursor:default;}
  .ervo-gallery-swatch img{
    width:100%!important;height:auto!important;max-width:100%!important;
    display:block;margin:0!important;
  }
  /* Náhledy pod hlavní fotkou a lupu na zvětšení tu nepoužíváme. */
  .ervo-gallery-swatch .flex-control-thumbs,
  .ervo-gallery-swatch .woocommerce-product-gallery__trigger{display:none!important;}

  /* Cena na detailu — stejný vizuál jako .price v kartách. */
  .ervo-price-block .price{font-size:26px;font-weight:800;color:var(--ink);}
  .ervo-price-block .price del{font-size:16px;color:#999;font-weight:400;margin-right:6px;}

  /* Poznámka o DPH vedle ceny (např. "Včetně 21% DPH") — má být jen tichý
     doplněk, ne stejně výrazná jako cena samotná. */
  .ervo-price-block .woocommerce-price-suffix,
  .ervo-add-to-cart .woocommerce-price-suffix{
    font-size:12px!important;
    font-weight:400!important;
    color:#999!important;
    margin-left:6px;
  }

  /* Popisek vybrané varianty ("Velikost balení: 100 ml"). */
  .ervo-add-to-cart .variations > tbody > tr{display:block;margin-bottom:8px;}
  .ervo-add-to-cart .variations td.label{
    display:block;font-size:13px;color:#777;margin-bottom:8px;font-weight:600;
  }
  .ervo-add-to-cart .variations td.value{display:block;}
  .ervo-add-to-cart table.variations{width:auto;margin-bottom:0;}
  /* "Vyčistit" (reset vybrané velikosti) schováváme — u nás je vždy
     nějaká velikost přednastavená, takže "nic nevybráno" není stav,
     který bychom chtěli nabízet. */
  .ervo-add-to-cart a.reset_variations{display:none;}

  /* Tlačítka výběru varianty (plugin Variation Swatches) ve stylu .variant-pill. */
  .ervo-add-to-cart .variable-items-wrapper{display:flex;flex-wrap:wrap;gap:8px;}
  .ervo-add-to-cart .variable-items-wrapper .variable-item{
    font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:50px;
    border:1.5px solid #dfe3e6!important;background:#fff;color:var(--ink);cursor:pointer;
    transition:.15s;box-shadow:none!important;
  }
  .ervo-add-to-cart .variable-items-wrapper .variable-item:hover{border-color:var(--green)!important;}
  .ervo-add-to-cart .variable-items-wrapper .variable-item.selected,
  .ervo-add-to-cart .variable-items-wrapper .variable-item.selected *{
    background:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important;
  }

  /* Cena a dostupnost konkrétní vybrané varianty. */
  .ervo-add-to-cart .woocommerce-variation-price .price{font-size:20px;}
  .ervo-add-to-cart .woocommerce-variation{margin:14px 0;}

  /* Množství a tlačítko "Přidat do košíku" — na stejné výškové ose. */
  .ervo-add-to-cart form.cart,
  .ervo-add-to-cart .variations_button{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .ervo-add-to-cart .quantity{display:inline-block;margin:0;}
  .ervo-add-to-cart .quantity .qty{
    width:64px;height:44px;box-sizing:border-box;padding:0 10px;
    border:1px solid #ddd;border-radius:50px;text-align:center;font-size:14px;
  }
  .ervo-add-to-cart .single_add_to_cart_button{
    height:44px;box-sizing:border-box;display:inline-flex;align-items:center;
    border-radius:50px;padding:0 28px;background:var(--green)!important;color:#fff!important;
    font-weight:600;border:none;font-size:14px;transition:0.3s;margin:0;
  }
  .ervo-add-to-cart .single_add_to_cart_button:hover{background:var(--green-dark)!important;}
  .ervo-add-to-cart .single_add_to_cart_button.disabled{
    background:#ccc!important;cursor:not-allowed;
  }

  /* ---------- hlavička obchodu / kategorie (nadpis, počet výsledků, řazení) ---------- */
  /* Bez vlastního odsazení seděl text hned nad kartami, jako by je „tlačil“ —
     přidáváme mezeru pod celý blok hlavičky, než začne mřížka produktů. */
  .woocommerce-products-header{margin-bottom:6px;}
  .woocommerce-products-header__title.page-title{font-size:28px;font-weight:800;margin:0 0 6px;}
  .woocommerce-result-count{font-size:13px;color:#888;margin:0 0 28px;}
  .woocommerce-ordering{margin-bottom:28px;}
  .woocommerce-ordering select{
    border-radius:8px;padding:8px 12px;border:1px solid #ddd;font-size:13px;background:#fff;
  }

  /* Hláška "zatím žádné produkty" u prázdné kategorie — bez ikonky
     z pluginu (bez jeho stylů se vykreslovala jako prázdný čtvereček). */
  .woocommerce-info{
    background:var(--gray-1);border-radius:10px;padding:14px 18px;font-size:14px;
    color:#555;border:none;list-style:none;margin:0 0 20px;
  }
  .woocommerce-info::before{content:none;}

  /* Zelené potvrzovací hlášky ("Košík aktualizován.", "Produkt byl přidán
     do košíku."...) — dřív je stylovaly výchozí styly WooCommerce, které
     jsme vypnuli, tak jim dáváme vlastní vzhled ve stejném duchu. */
  .woocommerce-message{
    background:var(--gray-1);border-radius:10px;padding:14px 18px;font-size:14px;
    color:var(--ink);border:none;border-left:4px solid var(--green);list-style:none;
    margin:0 0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .woocommerce-message::before{content:none;}
  /* WooCommerce po přidání/aktualizaci košíku kvůli přístupnosti (čtečky
     obrazovky) na tuhle hlášku automaticky přesune focus, což v prohlížeči
     obvykle vykreslí tenký rámeček okolo — schováváme ho, ať to nepůsobí
     jako "vybraný" prvek. */
  .woocommerce-message:focus,
  .woocommerce-notices-wrapper:focus{outline:none;box-shadow:none;}
  .woocommerce-message a.button{
    border-radius:50px;padding:9px 20px;background:var(--green);color:#fff!important;
    font-weight:600;font-size:13.5px;border:none;text-decoration:none!important;white-space:nowrap;
  }
  .woocommerce-message a.button:hover{background:var(--green-dark);}

  /* Chybové hlášky (špatné heslo, e-mail už zaregistrovaný...) — stejný
     základ jako výše, jen v červeném provedení, ať se pozná, že jde
     o chybu, a ne aby to vypadalo jako obyčejný odrážkový seznam. */
  .woocommerce-error{
    background:#fdf1f1;border-radius:10px;padding:14px 18px;font-size:14px;
    color:#8a1f1f;border:none;border-left:4px solid #c0392b;list-style:none;margin:0 0 20px;
  }
  .woocommerce-error li{margin:0;}
  .woocommerce-error::before{content:none;}

  /* Úvodní text kategorie (Produkty → Kategorie → Popis) — stejný styl
     jako .cat-intro v návrhu. */
  .term-description{max-width:640px;color:#666;font-size:14.5px;margin:0 0 24px;}
  .term-description p:last-child{margin-bottom:0;}

  /* ---------- nouzová mřížka pro kartu produktů ---------- */
  /* Bootstrap se načítá z externí CDN, což může na lokálním vývojovém
     serveru chvíli trvat — do té doby karty vypadají neuspořádaně a pak
     "poskočí" do finální podoby. Tenhle soubor je menší a ze stejné
     domény, takže se stihne načíst dřív — proto sem dáváme vlastní kopii
     přesně těch tříd mřížky, které karta produktu používá (row/col-*),
     aby byla mřížka hotová hned, bez čekání na Bootstrap. */
  .row{display:flex;flex-wrap:wrap;}
  .row.g-3{margin-right:-8px;margin-left:-8px;}
  .row.g-3 > [class*="col-"]{padding-right:8px;padding-left:8px;margin-bottom:16px;}
  .row.g-4{margin-right:-12px;margin-left:-12px;}
  .row.g-4 > [class*="col-"]{padding-right:12px;padding-left:12px;margin-bottom:24px;}
  /* Karty produktů (col-6 col-md-4 col-lg-3) — na opravdu malém telefonu
     (pod 576px) je i "poloviční" karta (col-6 = 2 na řádek) moc úzká na
     obrázek + název + cenu, takže tam radši necháme jednu kartu na řádek
     přes celou šířku; od 576px výš zůstávají dvě karty vedle sebe jako
     dřív. */
  .col-6{flex:0 0 auto;width:100%;}
  @media (min-width:576px){ .col-6{width:50%;} }
  @media (min-width:768px){ .col-md-4{flex:0 0 auto;width:33.33333%;} }

  /* ---------- Pokladna (stránka Checkout, [woocommerce_checkout]) ----------
     Stejný přístup jako u Košíku: necháváme běžet skutečný WooCommerce
     formulář (funkční validace, výpočet dopravy, platební metody), jen ho
     stylujeme do stejného "vibu" jako zbytek webu. */
  .woocommerce-checkout h3{font-size:19px;font-weight:800;margin:0 0 18px;}
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields{margin-bottom:32px;}

  .woocommerce-checkout .form-row{margin:0 0 16px;}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
    display:grid;grid-template-columns:1fr 1fr;gap:0 20px;
  }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{width:auto;float:none;}
  .woocommerce-checkout .form-row-wide{width:auto;grid-column:1 / -1;}
  @media (max-width:640px){
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr;}
  }

  .woocommerce-checkout label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
  .woocommerce-checkout label .required{color:#dc3545;text-decoration:none;}
  .woocommerce-checkout label .optional{color:#999;font-weight:400;}

  .woocommerce-checkout .input-text,
  .woocommerce-checkout select,
  .woocommerce-checkout textarea,
  .woocommerce-checkout .select2-selection{
    width:100%;box-sizing:border-box;border:1px solid #ddd;border-radius:12px;
    padding:11px 14px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);
  }
  .woocommerce-checkout textarea{border-radius:14px;min-height:90px;}
  .woocommerce-checkout .select2-selection{height:auto!important;display:flex;align-items:center;}
  .woocommerce-checkout .select2-selection__rendered{padding:0!important;line-height:normal!important;}
  .woocommerce-checkout .select2-selection__arrow{height:100%!important;}

  .woocommerce-checkout #ship-to-different-address{list-style:none;margin:4px 0 20px;}
  .woocommerce-checkout #ship-to-different-address label{
    display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;margin:0;
  }
  .woocommerce-checkout #ship-to-different-address input[type="checkbox"]{width:16px;height:16px;margin:0;}

  /* Zaškrtávátko "Nakupuji na firmu" — stejný vzhled jako "Doručit na
     jinou adresu?" výše. Dokud není zaškrtnuté, pole Firma/IČO/DIČ jsou
     schované (assets/js/checkout-company.js přidává/odebírá
     .ervo-company-field--visible). */
  .woocommerce-checkout .ervo-company-toggle{margin:4px 0 4px;}
  .woocommerce-checkout .ervo-company-toggle label.checkbox{
    display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;margin:0;
  }
  .woocommerce-checkout .ervo-company-toggle input[type="checkbox"]{width:16px;height:16px;margin:0;}
  .woocommerce-checkout .ervo-company-field{display:none;margin-top:16px;}
  .woocommerce-checkout .ervo-company-field.ervo-company-field--visible{display:block;}
  .woocommerce-checkout .ervo-company-field .optional{display:none;}

  /* Souhrn "Vaše objednávka" — stejný "kartový" vzhled jako box na Košíku. */
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order{
    background:var(--gray-2);border-radius:16px;padding:38px 28px 26px;
  }
  /* Souhrn objednávky je v úzkém sloupci (380px) — klasická dvousloupcová
     tabulka se tam lámala do několika řádků a bylo to nepřehledné. Místo
     tabulkových sloupců proto každý řádek zobrazíme jako "štítek vlevo,
     hodnota vpravo", ať zbyde místo na delší název produktu i na cenu. */
  .woocommerce-checkout table.shop_table{width:100%;border-collapse:collapse;}
  .woocommerce-checkout table.shop_table tr{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border-top:1px solid #e3e3e3;padding:12px 0;
  }
  .woocommerce-checkout table.shop_table thead tr{border-top:none;padding:0 0 10px;}
  .woocommerce-checkout table.shop_table tbody tr:first-child{border-top:none;}
  .woocommerce-checkout table.shop_table th,
  .woocommerce-checkout table.shop_table td{
    display:block;border:none;padding:0;font-size:14.5px;text-align:left;
  }
  .woocommerce-checkout table.shop_table thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:#888;}
  .woocommerce-checkout table.shop_table .product-name{font-weight:600;min-width:0;}
  .woocommerce-checkout table.shop_table .product-name .product-quantity{
    color:#888;font-weight:500;
  }
  .woocommerce-checkout table.shop_table .product-total,
  .woocommerce-checkout table.shop_table thead th:last-child{
    flex:0 0 auto;text-align:right;white-space:nowrap;
  }
  .woocommerce-checkout table.shop_table tfoot th{flex:0 0 auto;white-space:nowrap;font-weight:600;color:#555;}
  .woocommerce-checkout table.shop_table tfoot td{text-align:right;}
  .woocommerce-checkout table.shop_table .order-total td,
  .woocommerce-checkout table.shop_table .order-total th{font-weight:800;font-size:17px;color:var(--ink);}
  .woocommerce-checkout table.shop_table .order-total .includes_tax{
    display:block;font-weight:400;font-size:12.5px;color:#888;margin-top:3px;
  }

  /* Výběr způsobu dopravy (radio přepínače u řádku "Doprava") — bez
     výchozích stylů WooCommerce to bylo jen odrážkami rozházené pod sebe. */
  .woocommerce-checkout ul#shipping_method{list-style:none;margin:0;padding:0;}
  .woocommerce-checkout ul#shipping_method li{
    display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 10px;
  }
  .woocommerce-checkout ul#shipping_method li:last-child{margin-bottom:0;}
  .woocommerce-checkout ul#shipping_method input[type="radio"]{margin:0;flex-shrink:0;width:16px;height:16px;}
  .woocommerce-checkout ul#shipping_method label{margin:0;font-weight:600;cursor:pointer;font-size:14px;}
  .woocommerce-checkout table.shop_table .woocommerce-Price-amount{font-weight:inherit;}

  /* Platební metody — vlastní nadpis a oddělovací linka nad seznamem, ať
     je na první pohled jasné, že jde o samostatný krok "Platba" a ne o
     pokračování souhrnu objednávky. */
  .woocommerce-checkout ul.wc_payment_methods{
    list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid #e3e3e3;
  }
  .woocommerce-checkout ul.wc_payment_methods::before{
    content:"Platba";display:block;font-size:15px;font-weight:800;margin-bottom:14px;
  }
  /* Tenhle nadpis je čistě dekorativní (vygenerovaný CSS, ne PHP), takže ho
     WordPress/Polylang samy o sobě nepřeloží — proto přepis podle jazyka
     stránky (html lang="en"/"de", který nastavuje Polylang). */
  html:lang(en) .woocommerce-checkout ul.wc_payment_methods::before{
    content:"Payment";
  }
  html:lang(de) .woocommerce-checkout ul.wc_payment_methods::before{
    content:"Zahlung";
  }
  .woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{
    border:1px solid #e3e3e3;border-radius:12px;padding:16px 18px;margin-bottom:14px;background:#fff;
    transition:border-color .2s;
  }
  .woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:last-child{margin-bottom:0;}
  .woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked){border-color:var(--green);}
  .woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label{
    display:inline;font-weight:600;font-size:14.5px;margin:0 0 0 8px;cursor:pointer;
  }
  .woocommerce-checkout ul.wc_payment_methods li.wc_payment_method input[type="radio"]{vertical-align:middle;}
  .woocommerce-checkout ul.wc_payment_methods .payment_box{
    background:var(--gray-1);border-radius:10px;padding:14px 16px;margin-top:12px;font-size:13.5px;color:#555;
  }
  .woocommerce-checkout ul.wc_payment_methods .payment_box::before{content:none;}

  .woocommerce-checkout .woocommerce-privacy-policy-text{font-size:12.5px;color:#888;margin:20px 0;}
  .woocommerce-checkout .woocommerce-privacy-policy-text a{text-decoration:underline;}

  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label{
    display:flex;align-items:flex-start;gap:8px;font-weight:400;font-size:13.5px;cursor:pointer;
  }
  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin-top:2px;}

  .woocommerce-checkout #place_order{
    display:block;width:100%;text-align:center;border-radius:50px;padding:15px 30px;
    background:var(--green)!important;color:#fff!important;font-weight:700;font-size:15.5px;
    border:none;cursor:pointer;transition:.3s;margin-top:10px;
  }
  .woocommerce-checkout #place_order:hover{background:var(--green-dark)!important;}

  /* Info hláška "Výše prosím vyplňte..." — bez ikony/odrážky, stejný styl
     jako ostatní informační hlášky na webu. */
  .woocommerce-checkout .woocommerce-notice,
  .woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-info{
    background:var(--gray-1);border-radius:10px;padding:14px 18px;font-size:14px;
    color:#555;border:none;list-style:none;margin:0 0 20px;
  }
  .woocommerce-checkout .woocommerce-notice::before{content:none;}

  /* Odkaz "Máte kupon? ..." — bez ikony/odrážky, decentní barva. */
  .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
    background:var(--gray-1);border-radius:10px;padding:14px 18px;font-size:14px;
    color:#555;border:none;list-style:none;margin:0 0 24px;
  }
  .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before{content:none;}
  .woocommerce-checkout .showcoupon{color:var(--green-dark);font-weight:600;text-decoration:underline;}
  .woocommerce-checkout .checkout_coupon{
    background:var(--gray-2);border-radius:16px;padding:24px 26px;margin:0 0 24px;
  }
  .woocommerce-checkout .checkout_coupon .form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0;}
  .woocommerce-checkout .checkout_coupon .form-row .input-text{flex:1 1 220px;width:auto!important;}
  .woocommerce-checkout .checkout_coupon button.button{
    border-radius:50px;padding:11px 24px;background:var(--green)!important;color:#fff!important;
    font-weight:600;font-size:14px;border:none;cursor:pointer;transition:.2s;white-space:nowrap;
    margin-top:10px;
  }
  .woocommerce-checkout .checkout_coupon button.button:hover{background:var(--green-dark)!important;}

  /* Rozložení pokladny do dvou sloupců — vlevo fakturační/dodací údaje,
     vpravo souhrn objednávky (stejné rozvržení jako u schváleného
     mockupu, aby to nebylo vše pod sebou). */
  .woocommerce-checkout form.checkout{
    display:grid;
    grid-template-columns:1fr 380px;
    grid-template-rows:min-content 1fr;
    grid-template-areas:
      "billing heading"
      "billing summary";
    gap:0 40px;
    align-items:start;
  }
  .woocommerce-checkout .col2-set{grid-area:billing;min-width:0;}

  /* Oprava: WooCommerce pojmenovává sloupce fakturace/dopravy "col-1" a
     "col-2", ale stejně se jmenují i třídy z Bootstrap gridu (širka
     8,33 %) — proto se formulář srážel do úzkého proužku. Zrušíme na
     nich veškerý vliv Bootstrapu. */
  .woocommerce-checkout .col2-set > .col-1,
  .woocommerce-checkout .col2-set > .col-2{
    width:100%!important;max-width:100%!important;flex:0 0 100%!important;
    float:none!important;padding:0!important;
  }
  .woocommerce-checkout #order_review_heading{grid-area:heading;margin-top:0;}
  .woocommerce-checkout #order_review{grid-area:summary;}

  @media (max-width:900px){
    .woocommerce-checkout form.checkout{
      grid-template-columns:1fr;
      grid-template-areas:"billing" "heading" "summary";
    }
  }
  @media (min-width:992px){ .col-lg-3{flex:0 0 auto;width:25%;} }

  /* ==========================================================
     Stránka "Objednávka přijata" a detail objednávky (Moje účet)
     ========================================================== */

  /* Souhrn nahoře ("Číslo objednávky", "Datum"...) a fakturační/doručovací
     adresa vedle sebe. Obal .ervo-order-top-grid si vytváříme sami v
     přepsané šabloně checkout/thankyou.php, takže tady už není co hádat. */
  body.ervo-order-summary-page .ervo-order-top-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-items:stretch;
  }
  body.ervo-order-summary-page .woocommerce-order-overview,
  body.ervo-order-summary-page .woocommerce-customer-details{box-sizing:border-box;}

  @media (max-width:900px){
    body.ervo-order-summary-page .ervo-order-top-grid{grid-template-columns:1fr;}
  }

  /* Souhrn "Číslo objednávky / Datum / E-mail / ..." jako přehledná
     dvousloupcová karta místo prosté odrážkové listiny. */
  body.ervo-order-summary-page .woocommerce-order-overview{
    list-style:none;margin:0 0 24px;padding:18px 26px;background:var(--gray-2);
    border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;
    align-content:start;
  }
  body.ervo-order-summary-page .woocommerce-order-overview li{
    border:none;padding:0;font-size:15px;font-weight:800;color:var(--ink);
  }
  body.ervo-order-summary-page .woocommerce-order-overview li strong{
    display:block;font-size:14px;font-weight:400;color:#666;margin-top:4px;
  }
  body.ervo-order-summary-page .woocommerce-order-overview .ervo-overview-note{
    display:block;font-size:12px;font-weight:400;color:#999;margin-top:2px;
  }

  /* Fakturační/doručovací adresa — stejný "kartový" box jako souhrn vlevo
     (šedé pozadí přímo na celé sekci, ať to sedí i kdyby se vnitřní
     WooCommerce sloupce .col-1/.col-2 chovaly nečekaně — stejný problém
     s kolizí Bootstrap tříd jsme řešily u pokladny). */
  body.ervo-order-summary-page .woocommerce-customer-details{
    background:var(--gray-2);border-radius:16px;padding:18px 26px;margin:0 0 24px;
  }
  body.ervo-order-summary-page .woocommerce-columns{
    display:block;margin:0;padding:0;list-style:none;
  }
  body.ervo-order-summary-page .woocommerce-columns > .col-1,
  body.ervo-order-summary-page .woocommerce-columns > .col-2{
    width:100%!important;max-width:100%!important;flex:none!important;
    float:none!important;padding:0!important;margin:0 0 20px;
  }
  body.ervo-order-summary-page .woocommerce-columns > .col-2:last-child,
  body.ervo-order-summary-page .woocommerce-columns > .col-1:last-child{margin-bottom:0;}
  body.ervo-order-summary-page .woocommerce-column__title{font-size:15px;font-weight:800;margin:0 0 10px;}
  body.ervo-order-summary-page .woocommerce-customer-details address{font-style:normal;font-size:14px;line-height:1.6;color:#444;}

  /* Tabulka "Podrobnosti o objednávce" — stejné přehledné řádky jako na
     pokladně, jen s viditelně odděleným blokem součtů (Mezisoučet,
     Doprava, Cena celkem) od jednotlivých položek. */
  body.ervo-order-summary-page .woocommerce-order-details{margin:0 0 24px;}
  body.ervo-order-summary-page .woocommerce-order-details__title{font-size:19px;font-weight:800;margin:0 0 16px;}
  body.ervo-order-summary-page table.shop_table{width:100%;border-collapse:collapse;}
  body.ervo-order-summary-page table.shop_table tr{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border-top:1px solid #e3e3e3;padding:12px 0;
  }
  body.ervo-order-summary-page table.shop_table thead tr{border-top:none;padding:0 0 10px;}
  body.ervo-order-summary-page table.shop_table tbody tr:first-child{border-top:none;}
  body.ervo-order-summary-page table.shop_table th,
  body.ervo-order-summary-page table.shop_table td{display:block;border:none;padding:0;font-size:14.5px;text-align:left;}
  body.ervo-order-summary-page table.shop_table thead th{
    font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:#888;
  }
  body.ervo-order-summary-page table.shop_table thead th:last-child{flex:0 0 auto;text-align:right;}
  body.ervo-order-summary-page table.shop_table .product-name{font-weight:600;min-width:0;}
  body.ervo-order-summary-page table.shop_table .product-name .product-quantity{color:#888;font-weight:500;}
  body.ervo-order-summary-page table.shop_table .product-name .ervo-unit-price{
    display:block;color:#999;font-weight:400;font-size:12.5px;margin-top:2px;
  }
  body.ervo-order-summary-page table.shop_table .product-total{flex:0 0 auto;text-align:right;white-space:nowrap;}
  body.ervo-order-summary-page table.shop_table tfoot th{flex:0 0 auto;white-space:nowrap;font-weight:600;color:#555;}
  body.ervo-order-summary-page table.shop_table tfoot td{text-align:right;}
  /* Vizuální předěl mezi řádky položek a bloku součtů. */
  body.ervo-order-summary-page table.shop_table tfoot tr:first-child{
    border-top:2px solid var(--ink);margin-top:10px;padding-top:20px;
  }
  body.ervo-order-summary-page table.shop_table .order-total td,
  body.ervo-order-summary-page table.shop_table .order-total th{font-weight:800;font-size:17px;color:var(--ink);}

  /* ==========================================================
     Stránka "Moje účet" — přihlášení a registrace
     ========================================================== */

  body.woocommerce-account h2{font-size:19px;font-weight:800;margin:0 0 20px;}

  /* Přihlášení a registrace vedle sebe ve dvou kartách — WooCommerce tu
     sloupce pojmenovává "col-1"/"col-2" (u-columns col2-set), což je
     stejná kolize s Bootstrap gridem jako jsme řešily u pokladny a
     adres na "Objednávka přijata" — zase je potřeba zrušit. */
  body.woocommerce-account .u-columns.col2-set{
    display:flex;flex-wrap:wrap;gap:28px;margin:0 0 24px;padding:0;list-style:none;
  }
  body.woocommerce-account .u-columns.col2-set > .col-1,
  body.woocommerce-account .u-columns.col2-set > .col-2{
    width:100%!important;max-width:100%!important;flex:1 1 320px!important;
    float:none!important;padding:0!important;
    background:var(--gray-2);border-radius:16px;padding:28px 30px!important;
  }

  body.woocommerce-account form .form-row{margin:0 0 16px;}
  body.woocommerce-account form label{
    display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px;
  }
  body.woocommerce-account form .woocommerce-Input,
  body.woocommerce-account form input[type="text"],
  body.woocommerce-account form input[type="email"],
  body.woocommerce-account form input[type="password"]{
    width:100%;box-sizing:border-box;border:1px solid #ddd;border-radius:12px;
    padding:11px 14px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);
  }

  /* Tlačítko "zobrazit heslo" (ikona oka), které přidává WooCommerce vlastním
     JS u pole s heslem. Normálně se styluje přes výchozí styly WooCommerce
     a ikonový font Dashicons — ty ale na webu záměrně nenačítáme, takže se
     bez úpravy zobrazuje jako prázdný šedý obdélník hned nad/pod polem
     s heslem. Skrýváme ho úplně, ať se tam žádný nestylovaný prvek neukazuje. */
  body.woocommerce-account form .show-password-input{
    display:none!important;
  }

  body.woocommerce-account .woocommerce-form-login__rememberme,
  body.woocommerce-account form label:has(input[type="checkbox"]){
    display:flex;align-items:center;gap:8px;font-weight:400;font-size:13.5px;
    color:#555;margin:2px 0 18px;cursor:pointer;
  }
  body.woocommerce-account form input[type="checkbox"]{
    width:16px;height:16px;margin:0;flex-shrink:0;
  }

  body.woocommerce-account form .button,
  body.woocommerce-account form button[type="submit"]{
    display:inline-block;border-radius:50px;padding:12px 30px;background:var(--green)!important;
    color:#fff!important;font-weight:600;font-size:14.5px;border:none;cursor:pointer;
    transition:.2s;text-decoration:none;
  }
  body.woocommerce-account form .button:hover,
  body.woocommerce-account form button[type="submit"]:hover{background:var(--green-dark)!important;}

  body.woocommerce-account .woocommerce-LostPassword{margin-top:14px;font-size:13.5px;}
  body.woocommerce-account .woocommerce-LostPassword a{color:var(--green-dark);text-decoration:underline;}

  /* Stránka "Zapomenuté heslo" nemá boční kartu jako přihlášení/registrace,
     takže pole na celou šířku obsahu bylo zbytečně dlouhé — omezíme šířku
     formuláře, ať je pole kratší a čitelnější. */
  body.woocommerce-account .woocommerce-ResetPassword{
    max-width:420px;
  }

  /* Stránka "Detaily účtu" — pole na celou šířku obsahu byla zbytečně
     dlouhá, zúžíme formulář. */
  body.woocommerce-account .woocommerce-EditAccountForm{
    max-width:480px;
  }

  body.woocommerce-account .woocommerce-privacy-policy-text{
    font-size:12px;color:#888;margin-top:16px;line-height:1.5;
  }
  body.woocommerce-account .woocommerce-privacy-policy-text a{text-decoration:underline;}

  /* Přihlášený "Můj účet" — postranní menu (Nástěnka/Objednávky/...) a
     obsah vedle sebe, menu jako karta se zaoblenými odkazy místo prostého
     seznamu s odrážkami. */
  body.woocommerce-account.logged-in .woocommerce{
    display:flex;gap:32px;align-items:flex-start;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation{
    flex:0 0 220px;background:var(--gray-2);border-radius:16px;padding:10px;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul{
    list-style:none;margin:0;padding:0;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li{margin-bottom:2px;}
  body.woocommerce-account .woocommerce-MyAccount-navigation li a{
    display:block;padding:8px 12px;border-radius:10px;color:var(--ink);
    text-decoration:none;font-weight:600;font-size:13.5px;line-height:1.3;transition:.15s;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:#fff;}
  body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
    background:var(--green);color:#fff;
  }
  body.woocommerce-account .woocommerce-MyAccount-content{flex:1 1 auto;min-width:0;}
  body.woocommerce-account .woocommerce-MyAccount-content p{line-height:1.6;color:#444;}
  body.woocommerce-account .woocommerce-MyAccount-content strong{color:var(--ink);}

  /* "Adresy" — hlavičky karet (Fakturační/Dodací adresa + odkaz "Upravit").
     Samotné rozložení karet vedle sebe (a jejich zalomení pod sebe na
     mobilu) řeší už výše .u-columns.col2-set — WooCommerce používá pro
     stránku Adresy stejné třídy jako pro přihlášení/registraci vedle sebe. */
  body.woocommerce-account .woocommerce-Address-title{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px;
  }
  body.woocommerce-account .woocommerce-Address-title h2{font-size:16px;margin:0;}
  body.woocommerce-account .woocommerce-Address-title .edit{
    font-size:13px;font-weight:600;color:var(--green-dark)!important;text-decoration:underline;white-space:nowrap;
  }
  body.woocommerce-account .woocommerce-Address address{font-style:normal;line-height:1.6;color:#444;font-size:14.5px;}

  /* "Objednávky" — přehledová tabulka (číslo, datum, stav, cena, tlačítka
     Zobrazit/Zaplatit/Zrušit). Bez vlastního stylu je to úplně holá
     HTML tabulka o pěti sloupcích, která se na mobilu nevejde na šířku —
     proto ji tam níž (media query) přeskládáme na kartičku na objednávku
     místo tabulkových řádků, s popiskem sloupce (WooCommerce dává na
     každou buňku atribut data-title, přeložený podle jazyka webu stejně
     jako "View basket") vlevo a hodnotou vpravo. */
  body.woocommerce-account table.woocommerce-orders-table{width:100%;border-collapse:collapse;font-size:14px;}
  body.woocommerce-account table.woocommerce-orders-table thead th{
    text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:#888;
    font-weight:600;padding:0 10px 10px 0;
  }
  body.woocommerce-account table.woocommerce-orders-table tbody tr{border-top:1px solid var(--gray-1);}
  body.woocommerce-account table.woocommerce-orders-table td,
  body.woocommerce-account table.woocommerce-orders-table th[scope="row"]{
    padding:14px 10px 14px 0;vertical-align:middle;font-weight:400;color:var(--ink);text-align:left;
  }
  body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a{
    font-weight:700;color:var(--ink)!important;text-decoration:none;
  }
  body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status{white-space:nowrap;}
  body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions{
    text-align:right;white-space:nowrap;
  }
  /* Cena + "za X položku/položek" (viz filtr ngettext_woocommerce ve
     functions.php) — částka a doplňující poznámka o počtu položek jako
     dvě samostatné, úmyslně oddělené řádky (místo ošklivého zalomení
     uprostřed věty). */
  .ervo-order-total-wrap{display:inline-block;text-align:right;}
  .ervo-order-item-count{display:block;font-size:11.5px;font-weight:500;color:#888;margin-top:2px;}
  body.woocommerce-account table.woocommerce-orders-table .button{
    display:inline-block;border-radius:50px;padding:7px 16px;font-size:13px;font-weight:600;
    text-decoration:none!important;margin:2px 0 2px 6px;border:1px solid #ddd;color:var(--ink)!important;
  }
  body.woocommerce-account table.woocommerce-orders-table .button:first-child{margin-left:0;}
  body.woocommerce-account table.woocommerce-orders-table .button.view{background:var(--gray-1);}
  body.woocommerce-account table.woocommerce-orders-table .button.view:hover{background:var(--gray-2);}
  body.woocommerce-account table.woocommerce-orders-table .button.pay{
    background:var(--green);border-color:var(--green);color:#fff!important;
  }
  body.woocommerce-account table.woocommerce-orders-table .button.pay:hover{
    background:var(--green-dark);border-color:var(--green-dark);
  }
  body.woocommerce-account table.woocommerce-orders-table .button.cancel{color:#c0392b!important;border-color:#f0d4d4;}
  body.woocommerce-account table.woocommerce-orders-table .button.cancel:hover{background:#fdf1f1;}

  @media (max-width:700px){
    body.woocommerce-account .u-columns.col2-set{flex-direction:column;}
    body.woocommerce-account.logged-in .woocommerce{flex-direction:column;gap:20px;}
    body.woocommerce-account .woocommerce-MyAccount-navigation{
      /* Na desktopu je "flex:0 0 220px" myšleno jako pevná ŠÍŘKA postranního
         panelu vedle obsahu. Na mobilu se ale .woocommerce přepíná na
         sloupcový flex (viz výš), takže hlavní osa je najednou svislá —
         a tahle stejná hodnota 220px se pak vynucuje jako minimální VÝŠKA
         boxu, i když samotné odkazy potřebují mnohem míň. Proto ji tu
         resetujeme zpátky na "auto", ať se box zmenší přesně na výšku
         svého obsahu. */
      flex:0 0 auto;
      width:100%;box-sizing:border-box;padding:8px;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul{
      display:flex;flex-wrap:wrap;gap:3px;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;}
    body.woocommerce-account .woocommerce-MyAccount-navigation li a{
      padding:6px 10px;font-size:13px;line-height:1.15;
    }
    /* Nadřazený .woocommerce má align-items:flex-start (kvůli zarovnání
       na desktopu, kde menu a obsah jedou vedle sebe) — na mobilu ale
       přepínáme na sloupec, a bez explicitní šířky by se obsah (tabulka
       objednávek, karty...) smrskl jen na šířku svého obsahu místo na
       celou dostupnou šířku, stejně jako menu o pár řádků výš. */
    body.woocommerce-account .woocommerce-MyAccount-content{
      width:100%;box-sizing:border-box;
    }

    /* Tabulka objednávek -> jedna kartička na objednávku. */
    body.woocommerce-account table.woocommerce-orders-table thead{display:none;}
    body.woocommerce-account table.woocommerce-orders-table,
    body.woocommerce-account table.woocommerce-orders-table tbody,
    body.woocommerce-account table.woocommerce-orders-table tr{display:block;width:100%;}
    body.woocommerce-account table.woocommerce-orders-table tbody tr{
      border:1px solid var(--gray-1);border-top:1px solid var(--gray-1);border-radius:14px;
      margin-bottom:14px;padding:6px 14px;
    }
    body.woocommerce-account table.woocommerce-orders-table td,
    body.woocommerce-account table.woocommerce-orders-table th[scope="row"]{
      display:flex;justify-content:space-between;align-items:center;gap:12px;
      padding:8px 0;border:none;text-align:right;
    }
    body.woocommerce-account table.woocommerce-orders-table td::before,
    body.woocommerce-account table.woocommerce-orders-table th[scope="row"]::before{
      content:attr(data-title);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;
      color:#888;font-weight:600;text-align:left;flex-shrink:0;
    }
    body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions{
      justify-content:flex-end;flex-wrap:wrap;
    }
    body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before{
      content:none;
    }
    body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total{
      align-items:flex-start;
    }
    body.woocommerce-account table.woocommerce-orders-table .button{margin:2px 0 2px 6px;}
  }