﻿/* =============================================================
   BYTORA — COMPREHENSIVE RESPONSIVE FIXES v1.0
   Covers: Desktop, Tablet (1024px), Mobile (768px), Small (480px)
   ============================================================= */

/* ============================================================
   GLOBAL LAYOUT FIXES
   ============================================================ */

/* Prevent horizontal overflow on all pages */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fix container padding on small screens */
.bytora-container,
.woocommerce,
.woocommerce-page .woocommerce {
    padding-left: var(--bytora-space-4);
    padding-right: var(--bytora-space-4);
}

@media (min-width: 768px) {
    .bytora-container,
    .woocommerce {
        padding-left: var(--bytora-space-6);
        padding-right: var(--bytora-space-6);
    }
}

/* ============================================================
   HEADER FIXES
   ============================================================ */

/* Ensure header stays on top */
.bytora-header {
    z-index: 200;
    width: 100%;
}

/* Top bar — hide on very small screens */
@media (max-width: 480px) {
    .bytora-topbar { display: none; }
}

/* Logo text sizing */
.bytora-header__logo-text {
    font-size: var(--bytora-text-lg);
    white-space: nowrap;
}

/* Mobile header spacing */
@media (max-width: 768px) {
    .bytora-header__inner {
        padding: 0 var(--bytora-space-4);
        height: 60px;
    }
    .bytora-header__action-btn {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   HOMEPAGE HERO FIXES
   ============================================================ */

.bytora-hero__title {
    font-size: clamp(var(--bytora-text-3xl), 5vw, var(--bytora-text-6xl));
}

@media (max-width: 768px) {
    .bytora-hero__inner { padding: var(--bytora-space-12) var(--bytora-space-4); }
    .bytora-hero__subtitle { font-size: var(--bytora-text-base); }
    .bytora-hero__stats { gap: var(--bytora-space-5); flex-wrap: wrap; }
    .bytora-hero__stat strong { font-size: var(--bytora-text-xl); }
    .bytora-hero__actions { flex-direction: column; gap: var(--bytora-space-3); }
    .bytora-hero__actions .bytora-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .bytora-hero { min-height: 480px; }
    .bytora-hero__title { font-size: var(--bytora-text-2xl); }
    .bytora-hero__badge { font-size: 10px; }
}

/* ============================================================
   TRUST STRIP FIXES
   ============================================================ */

@media (max-width: 1200px) {
    .bytora-feature-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .bytora-feature-cards__grid { grid-template-columns: repeat(2, 1fr); gap: var(--bytora-space-3); }
    .bytora-feature-card { padding: var(--bytora-space-4); gap: var(--bytora-space-3); }
}

@media (max-width: 480px) {
    .bytora-feature-cards__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CATEGORIES GRID FIXES
   ============================================================ */

@media (max-width: 1200px) {
}

@media (max-width: 768px) {
}

@media (max-width: 360px) {
}

@media (max-width: 1200px) {
    .bytora-products-grid,
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
    .bytora-products-grid,
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--bytora-space-3) !important; }
}

@media (max-width: 360px) {
    .bytora-products-grid,
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* Product card responsive */
@media (max-width: 768px) {
    .bytora-product-card__title a,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
    }
    .bytora-product-card__price,
    .woocommerce ul.products li.product .price {
        font-size: var(--bytora-text-base);
    }
}

/* ============================================================
   SHOP PAGE LAYOUT FIXES
   ============================================================ */

/* Desktop: sidebar left, products right */
.bytora-shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--bytora-space-8);
    max-width: var(--bytora-container-xl);
    margin: var(--bytora-space-6) auto;
    padding: 0 var(--bytora-space-6);
    align-items: start;
}

/* Tablet: sidebar collapses to accordion */
@media (max-width: 1024px) {
    .bytora-shop-layout {
        grid-template-columns: 1fr;
        padding: 0 var(--bytora-space-4);
    }
    .bytora-shop-layout__sidebar {
        order: -1; /* Filter above products */
        width: 100%;
        position: static;
    }
    .bytora-shop-layout__main { order: 1; }
    .bytora-filter-sidebar { position: static; box-shadow: none; }
    .bytora-filter-sidebar__mobile-toggle { display: flex; }
    .bytora-filter-sidebar__body { display: none; }
    .bytora-filter-sidebar__body.open { display: block; }
    /* Remove duplicate toggle */
    .bytora-filter-sidebar > .bytora-filter-sidebar__mobile-toggle ~ .bytora-filter-sidebar__mobile-toggle {
        display: none !important;
    }
}

/* Mobile: compact toolbar */
@media (max-width: 768px) {
    .bytora-shop-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--bytora-space-2);
        padding: var(--bytora-space-3);
    }
    .bytora-shop-toolbar__count { width: 100%; font-size: 12px; }
    .bytora-shop-toolbar__controls { width: 100%; justify-content: space-between; }
}

/* ============================================================
   SINGLE PRODUCT PAGE FIXES
   ============================================================ */

/* Desktop: 2 column */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bytora-space-10);
    max-width: var(--bytora-container-xl);
    margin: var(--bytora-space-6) auto;
    padding: 0 var(--bytora-space-6);
    align-items: start;
}

/* Full-width elements */
.woocommerce div.product .woocommerce-notices-wrapper,
.woocommerce div.product .woocommerce-breadcrumb,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product #reviews { grid-column: 1 / -1; }

/* Tablet/Mobile: stack */
@media (max-width: 1024px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        gap: var(--bytora-space-6);
        padding: 0 var(--bytora-space-4);
    }
    .woocommerce div.product div.images { position: static; }
}

@media (max-width: 768px) {
    .woocommerce div.product .product_title { font-size: var(--bytora-text-xl); }
    .woocommerce div.product p.price { font-size: var(--bytora-text-2xl); }
    .bytora-info-badges { grid-template-columns: 1fr; gap: var(--bytora-space-2); }
    .woocommerce div.product form.cart .cart-wrapper { flex-direction: column; }
    .woocommerce div.product form.cart .single_add_to_cart_button,
    .bytora-buy-now-btn { width: 100%; }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .woocommerce div.product .related ul.products,
    .woocommerce div.product .upsells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Product gallery thumbnails */
.woocommerce div.product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--bytora-space-2);
    margin-top: var(--bytora-space-3);
    list-style: none;
    padding: 0;
}

.woocommerce div.product .flex-control-thumbs li { flex: 0 0 calc(20% - 8px); }

.woocommerce div.product .flex-control-thumbs li img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--bytora-radius-sm);
    border: 2px solid var(--bytora-gray-200);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
    border-color: #2E7D32;
}

/* ============================================================
   CART PAGE FIXES
   ============================================================ */

.woocommerce-cart .woocommerce {
    max-width: var(--bytora-container-xl);
    margin: 0 auto;
    padding: 0 var(--bytora-space-6);
}

@media (max-width: 768px) {
    .woocommerce-cart .woocommerce { padding: 0 var(--bytora-space-4); }

    /* Responsive cart table */
    .woocommerce-cart table.cart thead { display: none; }
    .woocommerce-cart table.cart tbody tr {
        display: flex;
        flex-wrap: wrap;
        padding: var(--bytora-space-4) 0;
        border-bottom: 1px solid var(--bytora-gray-200);
        position: relative;
    }
    .woocommerce-cart table.cart td { border: none; padding: var(--bytora-space-1) 0; }
    .woocommerce-cart table.cart td.product-thumbnail { width: 70px; }
    .woocommerce-cart table.cart td.product-name { flex: 1; padding-left: var(--bytora-space-3); }
    .woocommerce-cart table.cart td.product-quantity,
    .woocommerce-cart table.cart td.product-subtotal {
        width: 50%;
        display: flex;
        align-items: center;
    }
    .woocommerce-cart table.cart td.product-remove {
        position: absolute;
        top: var(--bytora-space-4);
        right: 0;
    }
    .woocommerce-cart table.cart td.product-price { display: none; }
    .woocommerce-cart .cart_totals { max-width: 100%; }
    .woocommerce-cart table.cart td.actions { display: block; width: 100%; }
    .woocommerce-cart table.cart td.actions .coupon { flex-direction: column; }
    .woocommerce-cart table.cart td.actions .coupon #coupon_code { width: 100%; }
}

/* ============================================================
   CHECKOUT PAGE FIXES
   ============================================================ */

.woocommerce-checkout .woocommerce {
    max-width: var(--bytora-container-xl);
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .bytora-checkout-layout { grid-template-columns: 1fr; padding: 0 var(--bytora-space-4); }
    .bytora-checkout-layout__summary { position: static; order: -1; }
}

@media (max-width: 768px) {
    .bytora-checkout-steps__list { gap: 0; }
    .bytora-checkout-step__label { display: none; }
    .bytora-checkout-step.active .bytora-checkout-step__label { display: block; font-size: 11px; }
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
    #place_order { font-size: var(--bytora-text-base); height: 48px; }
}

/* ============================================================
   MY ACCOUNT PAGE FIXES
   ============================================================ */

/* Logged in: sidebar + content */
.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--bytora-space-8);
    max-width: var(--bytora-container-xl);
    margin: var(--bytora-space-8) auto;
    padding: 0 var(--bytora-space-6);
    align-items: start;
}

@media (max-width: 1024px) {
    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: 1fr;
        padding: 0 var(--bytora-space-4);
    }
    .woocommerce-MyAccount-navigation { position: static; }
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--bytora-space-1);
    }
}

/* Not logged in: center login/register */
.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: 900px;
    margin: var(--bytora-space-10) auto;
    padding: 0 var(--bytora-space-6);
}

.woocommerce-account:not(.logged-in) .u-columns.col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bytora-space-8);
    align-items: start;
}

.woocommerce-account:not(.logged-in) .col-1,
.woocommerce-account:not(.logged-in) .col-2 {
    background: #fff;
    border: 1px solid var(--bytora-gray-200);
    border-radius: var(--bytora-radius-xl);
    padding: var(--bytora-space-8);
    box-shadow: var(--bytora-shadow-card);
}

.woocommerce-account:not(.logged-in) .col-1 h2,
.woocommerce-account:not(.logged-in) .col-2 h2 {
    font-size: var(--bytora-text-xl);
    font-weight: var(--bytora-font-bold);
    margin-bottom: var(--bytora-space-6);
    padding-bottom: var(--bytora-space-4);
    border-bottom: 2px solid var(--bytora-gray-200);
}

/* Register link text */
.woocommerce-account:not(.logged-in) .col-2 > p:first-of-type {
    font-size: var(--bytora-text-sm);
    color: var(--bytora-gray-500);
    margin-bottom: var(--bytora-space-5);
}

/* Buttons */
.woocommerce-account:not(.logged-in) button[type="submit"],
.woocommerce-account:not(.logged-in) input[type="submit"],
.woocommerce-account:not(.logged-in) .woocommerce-Button {
    width: 100%;
    background: #2E7D32 !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--bytora-radius-md) !important;
    padding: var(--bytora-space-3) !important;
    font-weight: var(--bytora-font-bold) !important;
    font-size: var(--bytora-text-sm) !important;
    cursor: pointer;
    margin-top: var(--bytora-space-3);
    transition: background 0.15s ease !important;
    display: block;
}

.woocommerce-account:not(.logged-in) button[type="submit"]:hover,
.woocommerce-account:not(.logged-in) input[type="submit"]:hover {
    background: #1B5E20 !important;
}

/* Remember me + lost password */
.woocommerce-account:not(.logged-in) .lost_password,
.woocommerce-account:not(.logged-in) .woocommerce-form__label-for-checkbox {
    font-size: var(--bytora-text-xs);
    color: var(--bytora-gray-500);
}

.woocommerce-account:not(.logged-in) .lost_password a {
    color: #1B5E20;
}

@media (max-width: 768px) {
    .woocommerce-account:not(.logged-in) .u-columns.col2-set {
        grid-template-columns: 1fr;
    }
    .woocommerce-account:not(.logged-in) .woocommerce,
    .woocommerce-account.logged-in .woocommerce {
        padding: 0 var(--bytora-space-4);
    }
}

/* ============================================================
   FOOTER FIXES
   ============================================================ */

@media (max-width: 1024px) {
    .bytora-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--bytora-space-8); }
    .bytora-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .bytora-footer__grid { grid-template-columns: 1fr 1fr; }
    .bytora-footer__main { padding: var(--bytora-space-10) 0 var(--bytora-space-6); }
    .bytora-footer__bottom-inner { flex-direction: column; gap: var(--bytora-space-3); }
    .bytora-footer__tagline { max-width: 100%; }
}

@media (max-width: 480px) {
    .bytora-footer__grid { grid-template-columns: 1fr; }
    .bytora-footer__col--brand { grid-column: 1; }
}

/* ============================================================
   ABOUT, CONTACT, FAQ PAGE FIXES
   ============================================================ */

@media (max-width: 768px) {
    .bytora-about-grid { grid-template-columns: 1fr; }
    .bytora-about-image-placeholder { display: none; }
    .bytora-contact-grid { grid-template-columns: 1fr; }
    .bytora-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .bytora-values-grid { grid-template-columns: 1fr; }
    .bytora-page-hero h1 { font-size: var(--bytora-text-2xl); }
}

@media (max-width: 480px) {
    .bytora-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .bytora-404__btns { flex-direction: column; align-items: center; }
    .bytora-404__number { font-size: 5rem; }
}

/* ============================================================
   BLOG PAGE FIXES
   ============================================================ */

@media (max-width: 1024px) {
    .bytora-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .bytora-blog-grid { grid-template-columns: 1fr; }
    .bytora-post-title { font-size: var(--bytora-text-2xl); }
    .bytora-post-img { height: 240px; }
    .bytora-post-nav { grid-template-columns: 1fr; }
}

/* ============================================================
   DASHBOARD FIXES
   ============================================================ */

@media (max-width: 768px) {
    .bytora-dashboard__welcome { flex-direction: column; text-align: center; }
    .bytora-dashboard__stats { grid-template-columns: repeat(3, 1fr); gap: var(--bytora-space-3); }
    .bytora-dashboard-stat { padding: var(--bytora-space-4); }
    .bytora-dashboard-stat__value { font-size: var(--bytora-text-2xl); }
    .bytora-quick-links { grid-template-columns: 1fr; }
    .bytora-orders-table-wrap { overflow-x: auto; }
}

@media (max-width: 480px) {
    .bytora-dashboard__stats { grid-template-columns: 1fr; }
}

/* ============================================================
   ORDERS TABLE RESPONSIVE
   ============================================================ */

@media (max-width: 480px) {
    .woocommerce-orders-table {
        display: block;
        overflow-x: auto;
    }
    .woocommerce-orders-table thead { display: none; }
    .woocommerce-orders-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--bytora-gray-200);
        padding: var(--bytora-space-3) 0;
    }
    .woocommerce-orders-table tbody td {
        width: 50%;
        border: none;
        padding: var(--bytora-space-1) var(--bytora-space-2);
        font-size: var(--bytora-text-xs);
    }
    .woocommerce-orders-table tbody td::before {
        content: attr(data-title) ": ";
        font-weight: var(--bytora-font-semibold);
        color: var(--bytora-gray-500);
        display: block;
        font-size: 10px;
    }
}

/* ============================================================
   NEWSLETTER SECTION FIXES
   ============================================================ */

@media (max-width: 1024px) {
    .bytora-newsletter__inner { flex-direction: column; text-align: center; gap: var(--bytora-space-6); }
    .bytora-newsletter__content h2 { font-size: var(--bytora-text-xl); }
}

@media (max-width: 480px) {
    .bytora-newsletter__input-wrap { flex-direction: column; border-radius: var(--bytora-radius-md); overflow: visible; gap: var(--bytora-space-2); }
    .bytora-newsletter__input-wrap input { border-radius: var(--bytora-radius-md); }
    .bytora-newsletter__input-wrap .bytora-btn { border-radius: var(--bytora-radius-md); width: 100%; justify-content: center; }
}

/* ============================================================
   TESTIMONIALS FIXES
   ============================================================ */

@media (max-width: 768px) {
    .bytora-testimonials__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WHY CHOOSE US FIXES
   ============================================================ */

@media (max-width: 1024px) {
    .bytora-why-us__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .bytora-why-us__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OFFER BANNER FIXES
   ============================================================ */

@media (max-width: 768px) {
    .bytora-offer-banner { padding: var(--bytora-space-10) 0; }
    .bytora-offer-banner__title { font-size: var(--bytora-text-2xl); }
    .bytora-offer-banner__content p { font-size: var(--bytora-text-base); }
    .bytora-offer-banner__decoration { display: none; }
}

/* ============================================================
   MINI CART DRAWER FIXES
   ============================================================ */

@media (max-width: 480px) {
    .bytora-mini-cart { width: 100vw; border-radius: 0; }
}

/* ============================================================
   WOOCOMMERCE NOTICES
   ============================================================ */

.woocommerce-notices-wrapper { max-width: var(--bytora-container-xl); margin: 0 auto; padding: 0 var(--bytora-space-6); }

@media (max-width: 768px) {
    .woocommerce-notices-wrapper { padding: 0 var(--bytora-space-4); }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Focus visible — keyboard navigation */
*:focus-visible {
    outline: 3px solid #2E7D32;
    outline-offset: 2px;
    border-radius: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid #2E7D32;
    outline-offset: 2px;
}

/* Skip link */
.bytora-skip-link:focus {
    top: 0;
    z-index: 9999;
    background: #2E7D32;
    color: #fff;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    .bytora-header,
    .bytora-footer,
    .bytora-mini-cart,
    .bytora-floating-cart,
    .bytora-feature-cards,
    #wpadminbar { display: none !important; }
    body { font-size: 12pt; color: #000; }
}
