/* ==========================================================
   Green Jofiyat — Conflict normalization + Responsive layer
   Loaded LAST so it wins over WooCommerce / Dokan / module CSS.
   ========================================================== */

/* ----------------------------------------------------------
   1) Un-reset: our global *{margin:0;padding:0} reset is great for
   custom components but strips spacing WooCommerce/Dokan expect.
   Restore sensible flow inside plugin + editor content only.
   ---------------------------------------------------------- */
.woocommerce p,
.woocommerce-page p,
.dokan-dashboard p,
.entry-content p,
.gj-prose p { margin-bottom: 1em; }

.entry-content ul, .entry-content ol,
.woocommerce-Tabs-panel ul, .woocommerce-Tabs-panel ol,
.dokan-dashboard ul:not(.dokan-store-tabs):not(.dokan-dashboard-menu) {
    list-style: revert; padding-inline-start: 1.4em; margin-bottom: 1em;
}
.woocommerce form .form-row { margin-bottom: 1.1em; }
.woocommerce .quantity, .woocommerce table td, .woocommerce table th { vertical-align: middle; }
.woocommerce ul.products, .woocommerce-page ul.products { padding: 0 !important; }

/* ----------------------------------------------------------
   2) Global overflow + media guards (no horizontal scroll on mobile)
   ---------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, iframe, table, .wp-block-image { max-width: 100%; }
.gj-prose img, .entry-content img { height: auto; border-radius: var(--radius-md); }

/* Wide tables (cart, account, orders) scroll inside their own box */
.woocommerce table.shop_table,
.woocommerce-cart-form,
.woocommerce-orders-table,
.woocommerce-MyAccount-content table { display: block; max-width: 100%; overflow-x: auto; }
@media (min-width: 768px) {
    .woocommerce table.shop_table { display: table; }
}

/* ----------------------------------------------------------
   3) Consistent buttons / price / forms over WooCommerce defaults
   ---------------------------------------------------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button {
    border-radius: var(--radius-pill); font-weight: 600; line-height: 1.4;
}
.woocommerce .price, .woocommerce-Price-amount { color: var(--gj-primary-dark); font-weight: 700; }
.woocommerce-error, .woocommerce-info, .woocommerce-message {
    border-radius: var(--radius-md); border-top: 3px solid var(--gj-primary); background: var(--gj-bg-alt);
}

/* ==========================================================
   RESPONSIVE — ≤1024
   ========================================================== */
@media (max-width: 1024px) {
    .single-product div.product { grid-template-columns: 1fr; gap: var(--space-xl); }
    .single-product .woocommerce-product-gallery { position: static; }
    .gj-shop__inner.has-sidebar { grid-template-columns: 1fr; }
}

/* ==========================================================
   RESPONSIVE — ≤768 (tablet / large phone)
   ========================================================== */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
    .section { padding: var(--space-3xl) 0; }

    /* Homepage */
    .gj-hero { min-height: 64vh; text-align: center; }
    .gj-hero__content { margin-inline: auto; }
    .gj-hero__actions { justify-content: center; }
    .gj-mission__grid, .gj-about__grid, .gj-contact__grid { grid-template-columns: 1fr !important; }
    .gj-mission__media { min-height: 260px; order: -1; }
    .gj-cta__box { flex-direction: column; text-align: center; padding: var(--space-xl); }

    /* Stats: 2×2 grid on mobile (not 1 column) */
    .gj-stats .grid, .gj-stats .grid--4 { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-md) !important; }
    .gj-stat { padding: var(--space-lg) var(--space-sm); }
    .gj-stat__num { font-size: var(--text-4xl); }
    .gj-stat__icon { width: 52px; height: 52px; }

    /* Checkout: stack billing + review */
    .woocommerce-checkout #customer_details.col2-set,
    .woocommerce-checkout #customer_details .col-1,
    .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
    .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: 100%; float: none; }

    /* My account: nav above content */
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; margin-bottom: var(--space-lg); }

    /* Dokan store: stack header + tabs scroll */
    .dokan-store-tabs ul { flex-wrap: nowrap; overflow-x: auto; }
    .dokan-single-store .dokan-store-sidebar { width: 100% !important; float: none !important; }

    /* Single product summary spacing */
    .single-product .product_title { font-size: var(--text-3xl); }
    .single-product form.cart { gap: var(--space-sm); }
}

/* ==========================================================
   RESPONSIVE — ≤480 (small phone)
   ========================================================== */
@media (max-width: 480px) {
    :root { --container-padding: 16px; }
    .section { padding: var(--space-2xl) 0; }
    ul.products, .woocommerce ul.products { grid-template-columns: 1fr 1fr !important; gap: var(--space-md) !important; }
    .gj-product-card__title { font-size: var(--text-sm); }
    .gj-product-card__body { padding: var(--space-sm); }
    /* Hero CTAs stay side-by-side on mobile */
    .gj-hero__actions { flex-direction: row; flex-wrap: nowrap; gap: var(--space-sm); justify-content: center; }
    .gj-hero__actions .btn { flex: 1 1 0; min-width: 0; padding: 0.7rem 0.6rem; font-size: var(--text-sm); white-space: nowrap; }
    .gj-page__title { font-size: clamp(1.6rem, 8vw, 2rem); }
    .gj-stats .grid, .gj-stats .grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
    .gj-header__inner { gap: var(--space-sm); }
    .gj-action { width: 38px; height: 38px; }
    .gj-footer__partner img { height: 42px; }
    .gj-search__panel { margin: 0; height: 100dvh; border-radius: 0; }
    .gj-qv { grid-template-columns: 1fr; }
}

/* Keep 2-up product grid readable on very small phones, 1-up under 360 */
@media (max-width: 360px) {
    ul.products, .woocommerce ul.products { grid-template-columns: 1fr !important; }
}