/* 
// Created :: 2025-10-30
// Responsive CSS - Unified breakpoints
// Two main breakpoints: 768px (tablet/mobile) and 480px (small mobile)
*/

/* ===== BASE (desktop) ===== */
#zahlavi #menu { display: block; }
.nav_toggle { display: none; }

/* ============================================
   TABLET & MOBILE (≤768px)
   ============================================ */
@media (max-width: 768px) {
    
    /* HEADER - Menu */
    #zahlavi #menu { display: none; }
    .nav_toggle { display: inline-flex; align-items: center; justify-content: center; }
    
    #zahlavi {
        max-width: 100%;
        border-radius: 0;
        padding: 15px 20px;
    }
    
    #zahlavi .logo img {
        max-width: 180px;
    }
    
    /* HEADER - Top section */
    #zahlavi_top {
        max-width: 95%;
        padding: 20px 0;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    #box_kontakty {
        flex: 1 1 100%;
        order: 3;
        justify-content: center;
        font-size: 13px;
    }
    
    #actions_right {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 8px;
    }
    
    #currency_switch {
        margin-right: 12px;
        gap: 6px;
    }
    
    #lang_switch {
        gap: 6px;
    }
    
    #currency_switch .cur,
    #lang_switch .lang {
        padding: 4px 10px;
        font-size: 13px;
    }
    
    #cart {
        margin-left: 12px;
    }
    
    #cart a {
        padding: 5px 12px;
    }
    
    #cart svg {
        width: 20px;
        height: 20px;
    }
    
    #cart .cart_count {
        font-size: 10px;
        padding: 2px 5px;
    }
    
    #cart .cart_popup {
        left: 8px;
        right: 8px;
        min-width: 0;
        max-width: none;
    }
    
    /* OBECNÉ */
    .respobr { display: block; }
    #copyright hr.respobr + span::before { content: none !important; }
    .obsah_uvod { max-width: 90%; }
    
    /* HP BOXES */
    #box_header_1 .container { 
        text-align: center; 
        margin: 0 auto; 
        max-width: 90%; 
        padding-bottom: 40px;
    }
    #box_header_1 .containerl { 
        max-width: 100%; 
        float: none; 
    }
    #box_header_1 .containerr { 
        display: none; 
    }
    #box_header_1 img.respo { 
        display: block; 
        margin-bottom: 20px; 
    }
    #box_header_1 ul li:nth-child(2) { 
        font-size: 30px; 
        margin-bottom: 20px; 
    }
    #box_header_1 p { 
        border-left: 0 solid #4fad4a; 
        line-height: 150%; 
        padding-left: 0; 
    }
    
    #header_icons {
        max-width: 100%;
    }
    
    #header_icons .container {
        flex-direction: column;
    }
    
    #header_icons .box {
        padding: 0 10px 30px 10px;
    }
    
    #box_header_2 { 
        padding: 40px 25px; 
        margin: 0 auto; 
        max-width: 90%; 
    }
    #box_header_2 .containerl { 
        max-width: 100%; 
        float: none; 
        padding-top: 30px; 
    }
    #box_header_2 .containerr { 
        max-width: 100%; 
        float: none; 
        padding-top: 0; 
    }
    #box_header_2 ul.labels li:nth-child(2) { 
        font-weight: bold; 
        font-size: 30px; 
        margin-bottom: 20px; 
        line-height: 125%; 
    }
    
    /* PRODUKTY - LISTING */
    .next_products {
        max-width: 95%;
        gap: 12px;
    }
    
    .next_products .vypis_box.products { 
        grid-template-columns: 120px 1fr; 
        align-items: start;
        gap: 16px;
        padding: 16px;
    }
    .next_products .vypis_box.products .thumb { 
        width: 120px; 
    }
    .next_products .vypis_box.products > img { 
        width: 120px; 
    }
    .next_products .vypis_box.products .actions { 
        grid-column: 1 / -1; 
        justify-content: center;
        margin-top: 10px; 
        min-width: 0; 
    }
    
    /* PRODUKT DETAIL */
    .produkt.pd { 
        grid-template-columns: 1fr;
        max-width: 95%;
        gap: 30px;
        margin: 40px auto;
    }
    .produkt.pd .prod_long { 
        max-width: 100%; 
    }
    
    /* KOŠÍK - STEPS */
    .cart-steps {
        margin: 30px 0;
    }
    
    .cart-steps__list {
        gap: 10px;
    }
    
    .cart-steps__item {
        max-width: 120px;
    }
    
    .cart-steps__circle {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    
    .cart-steps__label {
        font-size: 11px;
    }
    
    /* KOŠÍK - LAYOUT */
    .cart-layout {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 15px;
    }
    
    .cart-right {
        position: static;
    }
    
    .cart-heading {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .cart-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
        background-color: #faf9f7;
        border-radius: 12px;
        margin-bottom: 12px;
        border: 1px solid #e5e5e5;
    }
    
    .cart-row--head {
        display: none;
    }
    
    .cart-col {
        justify-content: space-between;
    }
    
    .cart-col--img {
        justify-content: flex-start;
    }
    
    .cart-img {
        width: 60px;
        height: 60px;
    }
    
    .cart-box {
        padding: 16px;
    }
    
    .cart-box__title {
        font-size: 15px;
    }
    
    /* FORMULÁŘE - POKLADNA */
    .box {
        padding: 24px;
    }
    
    .box legend {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    /* Label nad inputem na mobilu */
    .box-person .form_line,
    .box-billing .form_line,
    .box-country .form_line {
        grid-template-columns: 1fr;
        gap: 8px;
        max-width: 100%;
    }
    
    .box-person .form_line > label,
    .box-billing .form_line > label,
    .box-country .form_line > label {
        margin-bottom: 4px;
    }
    
    .box input[type="text"],
    .box input[type="email"],
    .box input[type="tel"],
    .box select,
    .box textarea {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .box-more .form_line {
        max-width: 100%;
    }
    
    .btn--primary {
        padding: 14px 24px;
        font-size: 15px;
    }
    
    /* THANK YOU PAGE */
    .order-summary {
        padding: 20px 15px;
        max-width: 100%;
    }
    
    .order-summary h2 {
        font-size: 20px;
    }
    
    .order-head-table .label {
        width: 100px;
        font-size: 13px;
    }
    
    .order-head-table .value {
        font-size: 13px;
    }
    
    .order-items th,
    .order-items td {
        padding: 10px 8px;
        font-size: 13px;
    }
    
    .totals-table {
        width: 100%;
    }
    
    .confirmation-note {
        padding: 16px;
        font-size: 14px;
    }
    
    /* FOOTER */
    #paticka {
        padding: 50px 0;
    }
    
    #paticka .paticka_obsah {
        max-width: 95%;
        flex-direction: column;
    }
    
    #paticka .column {
        flex: 1 1 100%;
    }
    
    #paticka .column_popisek {
        flex: 1 1 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }
}

/* ============================================
   SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {
    
    /* HEADER - Top section kompaktní */
    #zahlavi_top {
        max-width: 100%;
        padding: 12px 15px;
    }
    
    #box_kontakty {
        font-size: 12px;
    }
    
    #box_kontakty ul li.email a {
        font-size: 12px;
    }
    
    #actions_right {
        gap: 6px;
    }
    
    /* Měna a jazyk velmi kompaktně */
    #currency_switch {
        margin-right: 4px;
        gap: 4px;
    }
    
    #lang_switch {
        gap: 4px;
    }
    
    #currency_switch .cur,
    #lang_switch .lang {
        padding: 3px 6px;
        font-size: 11px;
    }
    
    #cart {
        margin-left: 6px;
    }
    
    #cart a {
        padding: 4px 8px;
    }
    
    #cart svg {
        width: 18px;
        height: 18px;
    }
    
    #cart .cart_count {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    /* KOŠÍK - STEPS menší */
    .cart-steps {
        margin: 20px 0;
    }
    
    .cart-steps__list {
        gap: 8px;
    }
    
    .cart-steps__item {
        max-width: 100px;
    }
    
    .cart-steps__circle {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .cart-steps__label {
        font-size: 10px;
    }
    
    /* KOŠÍK - LAYOUT */
    .cart-layout {
        padding: 0 10px;
        gap: 20px;
    }
    
    .cart-heading {
        font-size: 18px;
    }
    
    .cart-row {
        padding: 12px;
    }
    
    /* PRODUKTY - LISTING */
    .next_products .vypis_box.products {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .next_products .vypis_box.products .thumb {
        margin: 0 auto;
        max-width: 200px;
    }
    
    .next_products .vypis_box.products .info h2 {
        font-size: 16px;
    }
    
    /* PRODUKT DETAIL */
    .produkt.pd .prod_buy .prod_buy_row { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 12px; 
    }
    .produkt.pd .btn_buy { 
        width: 100%; 
    }
    .produkt.pd .prod_variants .variant_item { 
        grid-template-columns: auto 1fr; 
        grid-template-areas: "radio label" "price avail"; 
    }
    .produkt.pd .prod_variants .variant_item input[type="radio"] { 
        grid-area: radio; 
    }
    .produkt.pd .prod_variants .variant_item .v_label { 
        grid-area: label; 
    }
    .produkt.pd .prod_variants .variant_item .v_price { 
        grid-area: price; 
        text-align: left; 
    }
    .produkt.pd .prod_variants .variant_item .v_avail { 
        grid-area: avail; 
        text-align: left; 
    }
    .produkt.pd #widget_kupon .wk_head { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 6px; 
    }
    .produkt.pd #widget_kupon .wk_head_right { 
        gap: 8px; 
    }
    
    /* FORMULÁŘE */
    fieldset.standard { 
        padding: 24px 18px; 
        margin: 24px 0; 
    }
    
    .btn_form { 
        width: 100%; 
        text-align: center; 
    }
    
    .box {
        padding: 16px;
        border-radius: 8px;
    }
    
    .box legend {
        font-size: 15px;
        padding: 0 8px;
    }
    
    .box input[type="text"],
    .box input[type="email"],
    .box input[type="tel"],
    .box select,
    .box textarea {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    /* THANK YOU PAGE */
    .order-summary {
        padding: 15px 10px;
    }
    
    .order-summary h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    .order-head-table td {
        padding: 8px;
        font-size: 12px;
    }
    
    .order-items {
        font-size: 12px;
    }
    
    .order-items th,
    .order-items td {
        padding: 8px 6px;
    }
    
    /* Skryjeme sloupec s kódem na velmi malých mobilech */
    .order-items th:first-child,
    .order-items td:first-child {
        display: none;
    }
}