/**
 * SOVRAN — WooCommerce supplemental CSS
 *
 * Loaded on WooCommerce pages only.
 * These styles EXTEND WooCommerce defaults, not replace them.
 * Class specificity is kept at the same level as WooCommerce's own.
 *
 * @package Sovran
 */

/* ============================================================
   WooCommerce main wrapper padding
   ============================================================ */
.sovran-wc-main {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-top: calc(var(--header-h) + var(--sp-12));
    padding-bottom: var(--sp-24);
}

/* ============================================================
   Shop archive grid
   ============================================================ */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce ul.products li.product {
    margin: 0;
    float: none;
    width: auto;
}

/* ============================================================
   WooCommerce product title
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 400;
    padding: var(--sp-3) 0 var(--sp-2);
    color: var(--c-text-primary);
}

/* ============================================================
   WooCommerce price
   ============================================================ */
.woocommerce .price {
    font-family: var(--font-display);
    color: var(--c-text-primary);
    font-size: var(--fs-md);
}
.woocommerce .price del {
    color: var(--c-text-muted);
    opacity: 1;
}
.woocommerce .price ins {
    text-decoration: none;
    font-weight: 500;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    color: var(--c-text-muted);
    margin-bottom: var(--sp-8);
}
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-8);
}
.breadcrumbs__item a { color: var(--c-text-muted); }
.breadcrumbs__item a:hover { color: var(--c-gold); }
.breadcrumbs__item [aria-current] { color: var(--c-text-primary); }
.breadcrumbs__sep { color: var(--c-text-muted); }

/* ============================================================
   WooCommerce notices
   ============================================================ */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    padding: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-6);
    border: none;
    list-style: none;
}
.woocommerce-error   { background: #fef2f2; color: #b91c1c; border-left: 3px solid #b91c1c; }
.woocommerce-info    { background: #eff6ff; color: #1d4ed8; border-left: 3px solid #1d4ed8; }
.woocommerce-message { background: #f0fdf4; color: #166534; border-left: 3px solid #166534; }

/* ============================================================
   Checkout
   ============================================================ */
#order_review_heading {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-6);
}
.woocommerce-checkout #payment .place-order .button {
    width: 100%;
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: var(--c-bg-dark);
    font-size: var(--fs-sm);
    padding: var(--sp-5) var(--sp-8);
    border-radius: var(--radius-sm);
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .3s;
}
.woocommerce-checkout #payment .place-order .button:hover {
    background: #b8942f;
    border-color: #b8942f;
}

/* ============================================================
   Account page
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-8);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--c-text-primary);
    border-bottom-color: var(--c-text-primary);
}

/* ============================================================
   Star ratings
   ============================================================ */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    font-size: .9rem;
    line-height: 1;
}
.star--full  { color: var(--c-gold); }
.star--half  { color: var(--c-gold); }
.star--empty { color: var(--c-border); }
.star-rating__count {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-left: .25rem;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: var(--sp-12) 0;
    justify-content: center;
}
.pagination .page-numbers li span,
.pagination .page-numbers li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    text-decoration: none;
    color: var(--c-text-primary);
    transition: background .2s, border-color .2s;
}
.pagination .page-numbers li span.current,
.pagination .page-numbers li a:hover {
    background: var(--c-text-primary);
    color: var(--c-text-inverse);
    border-color: var(--c-text-primary);
}