/* =============================================================
   Taste of Galina — Inner Pages Responsive CSS
   Covers: Cart, Checkout, Product, Dashboard, Contact,
           Blog, Recipes, About, Offerings
   ============================================================= */

/* ── Shared sticky sidebar fix ──────────────────────────────── */
/* Offset sticky sidebars below the 90px navbar — but NOT the navbar itself,
   which is also .sticky-top and must stay flush at top:0. */
.sticky-top:not(#mainNav) { top: 90px; }

/* ── Quantity input ─────────────────────────────────────────── */
.tog-qty-group { width: 110px; }


/* =============================================================
   TABLET (max 991px)
   ============================================================= */
@media (max-width: 991px) {

    /* Sticky sidebars — disable sticky on tablet/mobile so they stack naturally */
    .sticky-top { position: static !important; top: auto !important; }

    /* ── CART ─────────────────────────────────────── */
    .cart-item .col-6.col-md-3 { width: 50%; }
    .tog-qty-group { width: 100px; }

    /* ── CHECKOUT ─────────────────────────────────── */
    /* Summary moves below form on tablet */
    .col-lg-4 .sticky-top.p-4 { margin-top: 1.5rem; }

    /* ── PRODUCT DETAIL ───────────────────────────── */
    .product-thumbnails .col-3 { width: 25%; }

    /* ── BLOG ─────────────────────────────────────── */
    .post-card { padding: 2rem 1.5rem !important; }
    .post-hero  { padding: 3rem 0 2rem !important; }

    /* ── ABOUT ────────────────────────────────────── */
    .about-stats .col-4 { text-align: center; }

    /* ── FOOTER newsletter ────────────────────────── */
    footer .col-md-3 { margin-bottom: 1.5rem; }
}


/* =============================================================
   MOBILE (max 767px)
   ============================================================= */
@media (max-width: 767px) {

    /* ── CART PAGE ────────────────────────────────── */
    .cart-item { padding: 0.75rem 0; }
    .cart-item .col-3 { width: 20%; }           /* image column slightly smaller */
    .cart-item .col-9 { width: 80%; }            /* name takes full remaining */
    .cart-item .col-6.col-md-3 {                 /* qty row — full width */
        width: 50%;
        margin-top: 0.5rem;
    }
    .cart-item .col-4.col-md-2 { width: 35%; margin-top: 0.5rem; }
    .cart-item .col-2.col-md-1 { width: 15%; margin-top: 0.5rem; }
    .tog-qty-group { width: 95px; }

    /* Cart summary sticky → static */
    .col-lg-4 .sticky-top { position: static !important; }

    /* Checkout button full width */
    .btn-lg.w-100 { font-size: 0.9rem; padding: 0.75rem !important; }

    /* ── CHECKOUT PAGE ────────────────────────────── */
    #step1 .border.rounded-4.p-3 { padding: 0.75rem !important; }
    #step1 .d-flex.gap-3 { gap: 0.75rem !important; }
    #step1 img[style*="width:50px"] { width: 42px !important; height: 42px !important; }

    /* Checkout form col-md-3 / col-md-6 — stack on mobile */
    #checkoutDetailsForm .col-md-6,
    #checkoutDetailsForm .col-md-3 { width: 100%; }

    /* ── PRODUCT DETAIL ───────────────────────────── */
    .product-thumbnails { flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; }
    .product-thumbnails .col-3 { flex: 0 0 72px; width: 72px; }
    .product-thumbnails img { width: 72px; height: 72px; object-fit: cover; }

    /* Quantity input on product page */
    input[type="number"].qty-input,
    input[name="quantity"] { width: 56px !important; }

    /* ── DASHBOARD ────────────────────────────────── */
    /* Order history table already has table-responsive wrapper */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Dashboard profile / password forms */
    .dashboard-form .col-md-6 { width: 100%; }

    /* Avatar */
    .dashboard-avatar { width: 52px !important; height: 52px !important; }

    /* ── BLOG INDEX ───────────────────────────────── */
    /* Featured post — remove fixed height */
    .blog-featured-img { max-height: 240px !important; }
    /* Card bodies */
    .blog-card .card-body,
    .blog-card .p-5 { padding: 1.25rem !important; }

    /* ── BLOG POST ────────────────────────────────── */
    .post-card { padding: 1.25rem !important; }
    .post-hero  { padding: 2.5rem 0 1.5rem !important; }
    .post-hero h1 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }

    /* ── CONTACT PAGE ─────────────────────────────── */
    .contact-form .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .contact-form .py-3 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }

    /* ── ABOUT PAGE ───────────────────────────────── */
    /* Stats — 3 col-4 is too narrow on mobile, allow wrapping */
    .about-stats .col-4 { width: 100%; margin-bottom: 1rem; }
    /* Break tags in headings */
    .about-heading br { display: none; }

    /* ── OFFERINGS PAGE ───────────────────────────── */
    /* Sidebar filter goes full width above grid */
    .tog-offerings-sidebar { margin-bottom: 1.5rem; }

    /* ── RECIPES PAGE ─────────────────────────────── */
    .tog-filter-bar { padding: 1rem !important; }
    .tog-select { width: 100%; }

    /* ── FOOTER ───────────────────────────────────── */
    footer .col-md-3 { width: 50%; margin-bottom: 1.25rem; }
    footer .newsletter-text { width: 100% !important; }
    footer .display-6 { font-size: 1.5rem !important; }
    footer .col-md-7,
    footer .col-lg-5 { width: 100%; }
    .bottomfooter .d-flex { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}


/* =============================================================
   SMALL MOBILE (max 575px)
   ============================================================= */
@media (max-width: 575px) {

    /* Container padding */
    .container { padding-left: 1rem; padding-right: 1rem; }

    /* ── CART ─────────────────────────────────────── */
    /* Stack cart row into 2-line layout */
    .cart-item.row { display: block !important; position: relative; }
    .cart-item .col-3  { display: inline-block; width: 72px; vertical-align: top; }
    .cart-item .col-9  { display: inline-block; width: calc(100% - 80px); vertical-align: top; padding-left: 0.5rem; }
    .cart-item .col-6.col-md-3 { display: inline-block; width: auto; margin-top: 0.5rem; }
    .cart-item .col-4.col-md-2 { display: inline-block; width: auto; margin-top: 0.5rem; margin-left: 0.5rem; }
    .cart-item .col-2.col-md-1 { display: inline-block; width: auto; margin-top: 0.5rem; }

    /* ── CHECKOUT ─────────────────────────────────── */
    .checkout-step h5 { font-size: 1rem; }

    /* ── DASHBOARD ────────────────────────────────── */
    /* Order ref may be long — allow wrap */
    .table td, .table th { white-space: normal; font-size: 0.8rem; }
    .table .btn-sm { font-size: 0.7rem; padding: 0.2rem 0.4rem; }

    /* Address cards — stack */
    .col-md-6 { width: 100%; }

    /* ── ABOUT stats — single column ─────────────── */
    .about-stats .col-4 { width: 100%; }

    /* ── FOOTER — single column links ────────────── */
    footer .col-md-3 { width: 100%; }

    /* ── PRODUCT PAGE ─────────────────────────────── */
    .product-variant-btns .btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; }

    /* ── BLOG ─────────────────────────────────────── */
    .blog-card { margin-bottom: 1rem; }
    .post-card { padding: 1rem !important; }
}