/* Extra styles loaded alongside main stylesheet */

/* ── WooCommerce Star Ratings ── */
.star-rating {
    display: inline-flex;
    align-items: center;
    font-size: .875rem;
    color: #ffb347;
}
.star-rating span { overflow: hidden; }

/* ── WooCommerce Quantity ── */
.woocommerce .quantity .qty {
    background: var(--clr-surface2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color: var(--clr-text);
    padding: 0.75rem;
    text-align: center;
    width: 80px;
    font-family: var(--ff-display);
    font-size: 1rem;
}

/* ── WooCommerce Notices ── */
.woocommerce-notices-wrapper { padding: 1rem 0; }

/* ── Cart Table Hover ── */
.woocommerce table.shop_table tbody tr:hover td { background: rgba(255,255,255,.015); }

/* ── WooCommerce Checkout Steps ── */
.woocommerce-checkout-payment {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}
.woocommerce-checkout-payment ul.payment_methods {
    list-style: none;
    margin-bottom: 1.5rem;
}
.woocommerce-checkout-payment ul.payment_methods li {
    border-bottom: 1px solid var(--clr-border);
    padding: 0.75rem 0;
    font-size: .9rem;
}

/* ── WooCommerce Account Pages ── */
.woocommerce-account .woocommerce { padding: 3rem 0; }
.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    list-style: none;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.85rem 1.25rem;
    font-size: .9rem;
    color: var(--clr-muted);
    border-bottom: 1px solid var(--clr-border);
    transition: all var(--transition);
    text-decoration: none;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a:hover { color: var(--clr-accent); padding-left: 1.6rem; }
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--clr-accent); border-left: 2px solid var(--clr-accent); }

/* ── Product Reviews ── */
#reviews { margin-top: 1rem; }
#reviews #comments .commentlist {
    list-style: none;
    padding: 0;
}
#reviews #comments .commentlist li.review {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
#reviews #comments .commentlist li.review .star-rating {
    margin-bottom: .5rem;
}
#reviews #comments .commentlist li.review .review__content p { color: var(--clr-muted); font-size: .9rem; }

/* ── Variable Product Swatches ── */
.woocommerce div.product table.variations {
    width: 100%;
    border: none;
}
.woocommerce div.product table.variations td,
.woocommerce div.product table.variations th {
    padding: .5rem 0;
    vertical-align: middle;
    border: none;
    background: none;
}
.woocommerce div.product table.variations td label { color: var(--clr-muted); font-size: .85rem; }
.woocommerce div.product table.variations select {
    background: var(--clr-surface2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color: var(--clr-text);
    padding: .6rem 1rem;
    font-family: var(--ff-body);
    width: 100%;
}

/* ── WordPress Core Blocks ── */
.wp-block-image { margin: 1.5rem 0; }
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-quote {
    border-left: 3px solid var(--clr-accent);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    color: var(--clr-muted);
    font-style: italic;
}
.wp-block-separator { border: none; border-top: 1px solid var(--clr-border); margin: 2rem 0; }

/* ── Gutenberg Alignment ── */
.alignleft  { float: left;  margin: 0 2rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 2rem; }
.aligncenter { display: block; margin: 1rem auto; }

/* ── Pagination ── */
.pagination .nav-links {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: 2rem 0;
}
.pagination .nav-links a,
.pagination .nav-links span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    font-family: var(--ff-mono);
    font-size: .8rem;
    color: var(--clr-muted);
    text-decoration: none;
    transition: all var(--transition);
}
.pagination .nav-links a:hover,
.pagination .nav-links span.current { background: var(--clr-accent); border-color: var(--clr-accent); color: white; }

/* ── Loading State ── */
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ── Smooth Transitions ── */
* { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }