/* ==========================================================
   Green Jofiyat — WooCommerce (shop, cart, checkout, account)
   ========================================================== */

/* Shop hero */
.gj-shop__hero {
    background: var(--gradient-hero), var(--gj-primary-dark);
    color: #fff; padding: var(--space-3xl) 0; text-align: center;
}
.gj-shop__hero .gj-breadcrumbs { justify-content: center; color: rgba(255,255,255,0.75); }
.gj-shop__hero .gj-breadcrumbs a:hover { color: #fff; }
.gj-shop__title { color: #fff; margin-bottom: var(--space-sm); }
.gj-shop__lead { color: rgba(255,255,255,0.85); max-width: 640px; margin-inline: auto; }

.gj-shop__layout { padding-block: var(--space-3xl); }

/* Layout with optional sidebar */
.gj-shop__inner { display: block; }
.gj-shop__inner.has-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-2xl); align-items: start; }
.gj-shop__sidebar { position: sticky; top: calc(var(--header-height) + 16px); }
.gj-shop__sidebar .widget { margin-bottom: var(--space-xl); }
.gj-shop__filter-close, .gj-shop__filter-open { display: none; }

/* Result count + ordering */
.woocommerce-result-count { color: var(--gj-text-muted); font-size: var(--text-sm); }
.woocommerce-ordering select {
    padding: 0.5rem 1rem; border: 1.5px solid var(--gj-border);
    border-radius: var(--radius-pill); background: #fff;
}

/* (Product grid + product card moved to components.css — they render on the
   homepage featured-products section too, where woocommerce.css does not load.) */

/* ── Generic WC buttons ── */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button {
    background: var(--gradient-primary); color: #fff; border: none;
    border-radius: var(--radius-pill); padding: 0.8rem 1.6rem; font-weight: 600;
    transition: var(--transition-base); text-decoration: none;
}
.woocommerce .button:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: #fff; }
.woocommerce .button.alt { background: var(--gradient-gold); }

/* ── Cart + checkout + account: light styling on WC defaults ── */
.woocommerce table.shop_table { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gj-border); }
.woocommerce table.shop_table th { background: var(--gj-bg-alt); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-account .woocommerce form input, .select2-container .select2-selection {
    border: 1.5px solid var(--gj-border); border-radius: var(--radius-md); padding: 0.7rem 1rem;
}
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--gj-bg-alt); border-radius: var(--radius-lg); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--gj-primary); }
.woocommerce-error { border-top-color: var(--gj-danger); }

/* My account: nav + content as cards */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); padding: var(--space-sm); box-shadow: var(--shadow-card);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-weight: 600; color: var(--gj-text-secondary); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--gj-bg-alt); color: var(--gj-primary); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--gradient-primary); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-card);
}
/* Login / register forms — centered cards when logged out */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 920px; margin-inline: auto; }
.woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register {
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-card); margin-top: var(--space-md);
}

/* (Mini-cart drawer styles moved to floating.css — the drawer markup renders on
   every page via wp_footer, so its CSS must load globally, not only on shop pages.) */

/* ============================================================
   Cart page
   ============================================================ */
.woocommerce-cart table.cart { background: var(--gj-bg-white); }
.woocommerce-cart table.cart th { font-weight: 700; }
.woocommerce-cart table.cart td { padding: 16px 14px; vertical-align: middle; }
.woocommerce-cart table.cart .product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md); }
.woocommerce-cart table.cart .product-name a { font-weight: 600; color: var(--gj-text); }
.woocommerce-cart table.cart .product-name a:hover { color: var(--gj-primary); }
.woocommerce-cart .product-remove a.remove {
    width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%;
    background: var(--gj-bg-alt); color: var(--gj-danger) !important; font-size: 16px;
}
.woocommerce-cart .product-remove a.remove:hover { background: var(--gj-danger); color: #fff !important; }
.woocommerce-cart .quantity input.qty { width: 64px; text-align: center; border: 1.5px solid var(--gj-border); border-radius: var(--radius-md); padding: 0.5rem; }
.woocommerce-cart .actions .coupon { display: flex; gap: 8px; }
.woocommerce-cart .actions .coupon input { border: 1.5px solid var(--gj-border); border-radius: var(--radius-pill); padding: 0.6rem 1rem; }
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card);
}
.woocommerce-cart .cart_totals h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); color: var(--gj-primary-dark); }
.woocommerce-cart .cart_totals .order-total .amount { color: var(--gj-primary-dark); font-size: var(--text-lg); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; font-size: var(--text-lg); padding: 0.9rem; }

/* ============================================================
   Checkout page
   ============================================================ */
.woocommerce-checkout #customer_details .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-lg);
}
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-size: var(--text-xl); color: var(--gj-primary-dark); margin-bottom: var(--space-md); }
.woocommerce-checkout #order_review {
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card);
}
.woocommerce-checkout #order_review table.shop_table { border: none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { color: var(--gj-primary-dark); font-size: var(--text-lg); }
.woocommerce-checkout #payment { background: var(--gj-bg-alt); border-radius: var(--radius-lg); padding: var(--space-md); }
.woocommerce-checkout #payment ul.payment_methods { border: none; }
.woocommerce-checkout #payment div.payment_box { background: var(--gj-bg-white); border-radius: var(--radius-md); }
.woocommerce-checkout #place_order { width: 100%; padding: 1rem; font-size: var(--text-lg); margin-top: var(--space-md); }

/* ── Quick view modal ── */
.gj-qv-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.gj-qv-modal.is-open { display: block; }
.gj-qv-modal__backdrop { position: absolute; inset: 0; background: rgba(26,74,48,.55); }
.gj-qv-modal__panel {
    position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%);
    max-width: 860px; margin-inline: auto; background: #fff; border-radius: var(--radius-xl);
    max-height: 90dvh; overflow: auto; box-shadow: var(--shadow-xl);
}
.gj-qv-modal__close { position: absolute; top: 10px; inset-inline-end: 10px; font-size: 24px; z-index: 2; background: #fff; }
.gj-qv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); padding: var(--space-xl); }
.gj-qv__media img { border-radius: var(--radius-lg); }
.gj-qv__vendor { color: var(--gj-olive); font-weight: 600; font-size: var(--text-sm); }
.gj-qv__price { font-size: var(--text-2xl); font-weight: 800; color: var(--gj-primary-dark); margin: var(--space-sm) 0; }
.gj-qv-loading { height: 300px; background: linear-gradient(90deg,var(--gj-bg-alt) 25%,var(--gj-sand-light) 50%,var(--gj-bg-alt) 75%); background-size: 200% 100%; animation: gj-shimmer 1.2s infinite; border-radius: var(--radius-lg); }
@keyframes gj-shimmer { to { background-position: -200% 0; } }

@media (max-width: 767px) {
    .gj-qv { grid-template-columns: 1fr; }
    .gj-shop__inner.has-sidebar { grid-template-columns: 1fr; }
    .gj-shop__filter-open { display: inline-flex; margin-bottom: var(--space-md); }
    .gj-shop__sidebar {
        position: fixed; top: 0; left: 0; right: auto; height: 100dvh; width: min(320px,88vw);
        background: #fff; z-index: var(--z-mobile-menu); transform: translateX(-100%);
        transition: transform var(--transition-base); padding: var(--space-lg); overflow-y: auto; box-shadow: var(--shadow-xl);
    }
    html[dir="rtl"] .gj-shop__sidebar { left: auto; right: 0; transform: translateX(100%); }
    .gj-shop__sidebar.is-open { transform: translateX(0); }
    .gj-shop__filter-close { display: inline-flex; margin-bottom: var(--space-md); }
}