/* ============================================================
   ShifaStore — Storefront Theme Overrides
   Loaded after Storefront's style.css to neutralize clashes.
   ============================================================ */

/* ------------------------------------------------------------------ */
/*  Element-level margin/padding resets                                 */
/*  Storefront sets these on bare tags; we zero them here and re-add   */
/*  spacing only inside our own BEM components.                         */
/* ------------------------------------------------------------------ */
/* Storefront adds bottom margin to images and the site logo.
   We scope to the theme wrappers so we don't kill spacing
   inside our own BEM components.                                */
.site-header img,
.site-footer img,
.storefront-hero img,
figure img { margin-bottom: 0 !important; display: block; }

/* Images globally — Storefront sets img { margin: 0 0 24px } */
img { margin-bottom: 0; }

/* Storefront sets p { margin: 0 0 1.618em } on bare p tags.
   We scope the reset to areas Storefront owns; our component
   classes add their own margin without !important so they win. */
.site-header p,
.site-footer p,
.woocommerce-page > .site-main > p,
.entry-content > p { margin-top: 0; margin-bottom: 0; }

/* Headings — Storefront sets margin: 0 0 .5em.
   Our components set margins explicitly so we just zero
   the top here to avoid double-spacing.                        */
h1, h2, h3, h4, h5, h6 { margin-top: 0; }

/* li — Storefront adds padding-bottom: .25em */
.site-header li,
.site-footer li,
.widget li { padding-bottom: 0; }

/* inputs — Storefront adds margin-bottom: 1em.
   Scoped to WC forms so we don't hit our own form cards.       */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce-page input,
.woocommerce-page textarea { margin-bottom: 0 !important; }

/* ---- Layout wrappers ---- */
.storefront-full-width-content .entry-content,
.storefront-full-width-content .hentry,
.woocommerce-page .site-main,
.site-main,
.woocommerce-page .content-area { max-width: 100%; padding: 0; margin: 0; }

/* Remove Storefront's fixed top margin that pushes content down
   (we manage this ourselves via the sticky header offset)       */
.site-content { margin-top: 0 !important; padding-top: 0 !important; }

/* ---- Typography — let our font stack win ---- */
body {
    font-family: var(--font-body) !important;
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline) !important;
    line-height: 1.2;
    /* margin-top reset only — components add their own margin-bottom */
    margin-top: 0;
}

/* ---- Storefront / WooCommerce buttons — override blue/purple defaults.
   We target WC's own classes (.button, .wc-*) so we NEVER touch our
   own .btn-add-to-cart / .btn-primary / .btn-buy-now classes.         ---- */

/* WooCommerce generic .button class (links styled as buttons) */
.woocommerce a.button:not(.btn-add-to-cart):not(.btn-primary):not(.btn-buy-now),
.woocommerce button.button:not(.btn-add-to-cart):not(.btn-primary),
.woocommerce input.button {
    font-family: var(--font-headline) !important;
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    padding: 0.6875rem 1.5rem !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.woocommerce a.button:not(.btn-add-to-cart):not(.btn-primary):hover,
.woocommerce button.button:not(.btn-add-to-cart):not(.btn-primary):hover,
.woocommerce input.button:hover {
    background-color: var(--color-primary-container) !important;
    color: #fff !important;
}

/* Storefront's own alt button */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-full) !important;
}

/* Proceed to checkout button */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
    background-color: var(--color-primary) !important;
    border-radius: var(--radius-full) !important;
    color: #fff !important;
    font-family: var(--font-headline) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* General font-family on all buttons (safe, doesn't affect bg/gradient) */
button, input[type="button"], input[type="submit"] {
    font-family: var(--font-headline);
    text-shadow: none;
}

/* ---- Links ---- */
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-container); }

/* ---- Storefront header — we render our own, hide theirs ---- */
.storefront-handheld-footer-bar,
.site-header,
.storefront-sticky-add-to-cart { display: none !important; }

/* ---- Storefront footer — we render our own, hide theirs ---- */
.site-footer { display: none !important; }

/* ---- Breadcrumb (Storefront ships one, we ship our own) ---- */
.woocommerce-breadcrumb { display: none !important; }

/* ---- WooCommerce notices — restyle to match design ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--color-primary) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    font-family: var(--font-body) !important;
}

/* ---- Form inputs (checkout, account, etc.) ---- */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
    border: 1.5px solid var(--color-outline-variant) !important;
    border-radius: var(--radius-md) !important;
    background: #fff !important;
    color: var(--color-on-surface) !important;
    font-family: var(--font-body) !important;
    transition: border-color 0.15s !important;
    box-shadow: none !important;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    border-color: var(--color-primary) !important;
    outline: 2px solid rgba(10,100,57,.2) !important;
}

/* ---- Product card — neutralise ALL Storefront bleed-through ---- */

/* All p/span margin inside any product card — prevents Storefront's
   global p { margin-bottom: 1.618em } from breaking card layout      */
.product-card p,
.product-card span { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Brand label */
.product-card .product-card__brand {
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--color-on-surface-variant) !important;
    margin-bottom: 0.25rem !important;
    line-height: 1 !important;
}

/* Product title — covers both the archive (ul.products li.product) and
   the homepage featured grid (div.featured-products__grid article)     */
.woocommerce-loop-product__title,
.product-card__title {
    font-family: var(--font-headline) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--color-on-surface) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}
.woocommerce-loop-product__title a,
.product-card__title a {
    color: var(--color-on-surface) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
.woocommerce-loop-product__title a:hover,
.product-card__title a:hover { color: var(--color-primary) !important; }

/* Price */
.product-card .product-card__price,
.woocommerce ul.products li.product .price {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    font-family: var(--font-headline) !important;
    margin-bottom: 1rem !important;
    margin-top: auto !important;
}

/* ---- Rating stars ---- */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: #F59E0B !important; }

/* ---- WooCommerce pagination ---- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border-color: var(--color-outline-variant) !important;
    color: var(--color-on-surface) !important;
    border-radius: var(--radius-sm) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}

/* ---- Account / My Account page ---- */

/* Remove Storefront's floated content-area so the footer doesn't
   appear beside the page content on account/login pages. */
.woocommerce-account #primary.content-area,
.woocommerce-account .content-area {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Push the entire content area below the fixed header.
   The announcement bar (~2rem) + nav bar (~4.5rem) = ~6.5rem.
   We use 7rem so there's a small breathing gap. */
.woocommerce-account #primary.content-area {
    padding-top: 7rem !important;
}

/* Hide Storefront's auto-generated page title ("My Account") —
   our hero block renders its own heading. */
.woocommerce-account .entry-header,
.woocommerce-account h1.entry-title,
.woocommerce-account .page-title {
    display: none !important;
}

/* Constrain and space the entry-content like a Bootstrap container */
.woocommerce-account article.page {
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-account .entry-content {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 1.5rem 4rem !important;
}

/* Contain the floated .col-1 / .col-2 inside the WooCommerce
   login/register form so they don't bleed outside their wrapper. */
.woocommerce-account .col2-set,
.woocommerce-account #customer_login {
    display: flow-root;
}

/* Ensure the col-full wrapper clears any remaining floats. */
.woocommerce-account .col-full {
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    /* Keep the tab nav but restyle it */
    float: none !important;
    width: 100% !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem !important;
    border-bottom: 1.5px solid var(--color-outline-variant) !important;
    padding-bottom: 1rem !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: .5rem 1.125rem !important;
    border-radius: var(--radius-pill) !important;
    color: var(--color-on-surface-variant) !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    text-decoration: none !important;
    background: var(--color-surface-container-low) !important;
    transition: background .15s, color .15s !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--color-secondary-container) !important;
    color: var(--color-primary) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
    background: var(--color-primary) !important;
    color: #fff !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
}

/* ---- Checkout ---- */
.woocommerce-checkout .col2-set { gap: 2rem; }
.woocommerce #payment #place_order {
    background: var(--color-primary) !important;
    border-radius: var(--radius-pill) !important;
}

/* ---- Widget area inside WC pages — hide Storefront's default sidebar ---- */
.woocommerce-account .widget-area,
.woocommerce-account aside.widget-area,
.woocommerce-page aside.col-2 { display: none !important; }

/* ---- Page titles ---- */
.woocommerce-products-header__title.page-title,
h1.entry-title,
h1.page-title {
    font-family: var(--font-headline) !important;
    font-weight: 800 !important;
    color: var(--color-on-surface) !important;
    letter-spacing: -0.03em !important;
}

/* ---- Remove default Storefront product archive wrapper padding ---- */
.woocommerce ul.products li.product { margin: 0 !important; }
.woocommerce ul.products { margin: 0 !important; }

/* ---- Remove inner-container max-width Storefront adds around WC pages ---- */
.storefront-full-width-content .site-main .woocommerce { max-width: 100%; }