/* =============================================================================
   BLACK SYMPHONY — WooCommerce (traditional Japanese specialty store)
   Inherits the design tokens declared in style.css (:root).
   The product grid + .bs-card are styled in style.css (so the homepage, which is
   NOT a WooCommerce context, renders them correctly). This file covers shop /
   single / cart / checkout / account chrome and the mobile sticky buy-bar.
   ========================================================================== */

/* ---------- Shop wrapper + toolbar ---------- */
.bs-shop { padding-bottom: 6px; }
.bs-shop::after { content: ""; display: table; clear: both; }

.woocommerce-result-count {
    margin: 0 0 0.8rem;
    color: var(--bs-muted);
    font-size: 11.5px;
}
.woocommerce-ordering { float: right; margin: 0 0 0.8rem; }
.woocommerce-ordering select { width: auto; padding: 0.45em 2em 0.45em 0.7em; font-size: 12px; }

/* =============================================================================
   SINGLE PRODUCT
   ========================================================================== */
.bs-product { background: #fff; border: 1px solid var(--bs-line-strong); padding: clamp(1rem, 3vw, 1.6rem); }
.bs-product__crumb { margin-bottom: 0.8rem; font-size: 11px; }

.bs-product__top {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.5rem);
    align-items: start;
}

/* Gallery */
.bs-product__gallery { position: relative; min-width: 0; }
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery img { border: 1px solid var(--bs-line-soft); }
.woocommerce-product-gallery__wrapper { margin: 0; }
.flex-control-thumbs { display: flex; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.flex-control-thumbs li { width: 56px; }
.flex-control-thumbs img { border: 1px solid var(--bs-line-soft); opacity: 0.7; cursor: pointer; transition: opacity 0.15s var(--ease), border-color 0.15s var(--ease); }
.flex-control-thumbs img:hover, .flex-control-thumbs .flex-active { opacity: 1; border-color: var(--bs-ink); }
.woocommerce-product-gallery__trigger {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 34px; height: 34px; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--bs-line-soft); color: var(--bs-ink);
    font-size: 0;
}
.woocommerce-product-gallery__trigger::after { content: "⤢"; font-size: 1rem; }

/* Summary */
.bs-product__summary { min-width: 0; }
.bs-product__summary .product_title {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
    line-height: 1.35; font-weight: 700;
    margin: 0 0 0.6rem; color: var(--bs-ink);
}
.bs-product__summary .price {
    display: block;
    color: var(--bs-ink);
    font-size: 1.7rem; font-weight: 700;
    margin: 0 0 0.3rem;
}
.bs-product__summary .price .woocommerce-Price-currencySymbol { font-size: 1rem; }
.bs-product__summary .price del { color: var(--bs-faint); font-size: 1rem; font-weight: 400; margin-right: 0.4rem; }
.bs-product__summary .price ins { text-decoration: none; color: var(--bs-red); }
.bs-product__tax-note, .bs-product__summary .price + .tax_label { font-size: 11px; color: var(--bs-muted); }
.bs-product__summary .woocommerce-product-rating { margin-bottom: 0.6rem; }
.bs-product__summary .woocommerce-product-details__short-description {
    color: var(--bs-ink-2);
    border-top: 1px solid var(--bs-line-soft);
    border-bottom: 1px solid var(--bs-line-soft);
    padding: 0.8rem 0; margin-bottom: 1rem;
    font-size: 12.5px;
}
.bs-product__summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Quantity + add to cart */
.bs-product__summary form.cart { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 1rem; }
.quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--bs-line-strong); }
.quantity .qty { width: 3.5rem; text-align: center; border: 0; background: #fff; -moz-appearance: textfield; font-weight: 700; }
.quantity input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
.bs-product__summary form.cart .button { flex: 1 1 auto; min-width: 10rem; }
.bs-product__summary .single_add_to_cart_button { padding: 0.8em 1.2em; font-size: 13px; }

/* Variations */
.variations { width: 100%; border-collapse: collapse; margin-bottom: 0.8rem; }
.variations th { text-align: left; padding: 0.4rem 0.8rem 0.4rem 0; vertical-align: middle; font-weight: 700; }
.variations td { padding: 0.3rem 0; }
.variations select { width: 100%; }
.woocommerce-variation-price .price { font-size: 1.3rem; }
.reset_variations { color: var(--bs-muted); font-size: 11px; }

/* Trust line (added via inc/woocommerce.php) */
.bs-product__trust { list-style: none; margin: 1rem 0; padding: 10px 12px; display: grid; gap: 6px; background: var(--bs-surface-2); border: 1px solid var(--bs-line-soft); }
.bs-product__trust li { display: flex; align-items: center; gap: 7px; color: var(--bs-ink-2); font-size: 11.5px; }
.bs-product__trust svg { color: var(--bs-red); flex: none; }

/* Meta */
.bs-product__summary .product_meta {
    border-top: 1px solid var(--bs-line-soft);
    padding-top: 0.8rem; font-size: 11.5px; color: var(--bs-muted);
}
.bs-product__summary .product_meta > span { display: block; margin-bottom: 0.25rem; }
.bs-product__summary .product_meta a { color: var(--bs-ink); }

/* ---------- Tabs ---------- */
.bs-product__detail { margin-top: clamp(1.4rem, 3vw, 2rem); }
.woocommerce-tabs ul.tabs {
    list-style: none; margin: 0 0 1.2rem; padding: 0;
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 2px solid var(--bs-ink);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
    display: block; padding: 8px 14px;
    background: var(--bs-surface-2); border: 1px solid var(--bs-line-soft); border-bottom: 0;
    font-size: 12px; font-weight: 700; color: var(--bs-ink-2);
}
.woocommerce-tabs ul.tabs li.active a { background: var(--bs-ink); color: #fff; border-color: var(--bs-ink); }
.woocommerce-tabs .panel { color: var(--bs-ink-2); max-width: 62rem; font-size: 13px; }
.woocommerce-tabs .panel h2 { font-size: 1.1rem; }
#reviews .comment-text { border: 1px solid var(--bs-line-soft); padding: 0.8rem; background: #fff; }
#reviews .commentlist { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.8rem; }

/* ---------- Related / upsells ---------- */
.related.products, .upsells.products { margin-top: clamp(1.6rem, 4vw, 2.6rem); border-top: 1px solid var(--bs-line-soft); padding-top: clamp(1.2rem, 3vw, 2rem); }
.related.products > h2, .upsells.products > h2, .cross-sells > h2 {
    font-size: 1.1rem; margin-bottom: 1rem;
    border-left: 4px solid var(--bs-red); padding-left: 8px;
}

/* =============================================================================
   MOBILE STICKY BUY-BAR
   ========================================================================== */
.bs-buybar { display: none; }
.bs-buybar[hidden] { display: none !important; }

/* =============================================================================
   CART
   ========================================================================== */
.bs-wc-page { width: min(100% - 24px, 1100px); }
.woocommerce-cart .bs-wc-page, .woocommerce-checkout .bs-wc-page { width: min(100% - 24px, 1100px); }

.woocommerce table.shop_table {
    border: 1px solid var(--bs-line-soft); border-collapse: collapse;
    background: #fff; border-radius: 0; width: 100%; margin-bottom: 1.4rem;
}
.woocommerce table.shop_table th {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    color: #fff; padding: 0.8rem 0.8rem;
    background: var(--bs-ink); text-align: left;
    border-bottom: 1px solid #000;
}
.woocommerce table.shop_table td { padding: 0.8rem 0.8rem; border-top: 1px solid var(--bs-line-soft); vertical-align: middle; }
.woocommerce table.shop_table img { width: 56px; border: 1px solid var(--bs-line-soft); }
.woocommerce .cart .product-name a { color: var(--bs-ink); font-weight: 500; }
.woocommerce .cart .product-name a:hover { color: var(--bs-red); }
.woocommerce .cart .amount, .woocommerce .amount { color: var(--bs-ink); font-weight: 700; }
.woocommerce .order-total .amount, td.product-subtotal .amount { color: var(--bs-red); }
.woocommerce a.remove {
    color: var(--bs-red) !important; border: 1px solid var(--bs-line-soft);
    width: 22px; height: 22px; line-height: 20px; text-align: center; font-size: 0.9rem;
}
.woocommerce a.remove:hover { background: var(--bs-red); color: #fff !important; }

.woocommerce .cart-collaterals, .woocommerce-cart .cart-collaterals { width: 100%; display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 0.4rem; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; border: 1px solid var(--bs-line-soft); background: #fff; padding: 1.2rem; }
.woocommerce .cart_totals h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.woocommerce .cart_totals table { border: 0; background: transparent; }
.woocommerce .cart_totals table th { border: 0; background: transparent; color: var(--bs-ink-2); font-weight: 500; }
.woocommerce .cart_totals table td { border-top: 1px solid var(--bs-line-soft); }
.woocommerce .cart_totals .order-total .amount { font-size: 1.2rem; }
.wc-proceed-to-checkout { padding-top: 0.8rem; }
.wc-proceed-to-checkout a.checkout-button { width: 100%; }

.cart input.button[name="update_cart"], .coupon .button { white-space: nowrap; }
.woocommerce .coupon { display: flex; gap: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.cross-sells { margin-top: 1.6rem; }

/* =============================================================================
   CHECKOUT
   ========================================================================== */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); align-items: start; }
.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce-checkout #order_review_heading { margin: 0 0 0.6rem; font-size: 1.1rem; }
.woocommerce form .form-row { margin-bottom: 0.8rem; padding: 0; }
.woocommerce form .form-row label { display: block; }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 1rem; margin-bottom: 0.8rem; }
#order_review { border: 1px solid var(--bs-line-soft); background: #fff; padding: 1.2rem; position: sticky; top: 0.8rem; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 0.8rem; }
.woocommerce-checkout #payment div.payment_box { background: var(--bs-surface-2); color: var(--bs-ink-2); border: 1px solid var(--bs-line-soft); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bs-line-soft); }
.woocommerce-checkout #payment .place-order { padding: 0.8rem 0 0; }
.woocommerce-checkout #payment .button#place_order { width: 100%; font-size: 14px; padding: 0.85em 1.2em; }
.select2-container--default .select2-selection--single { height: auto; }
.select2-dropdown { background: #fff; border-color: var(--bs-line-soft); color: var(--bs-ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--bs-ink); }

/* =============================================================================
   ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bs-line-soft); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--bs-line-soft); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 0.7rem 0.8rem; font-size: 12px; font-weight: 500; color: var(--bs-ink); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--bs-ink); color: #fff; text-decoration: none; }
.woocommerce-account .addresses .title h3 { font-size: 1rem; }

.woocommerce-form-login, .woocommerce-form-register, .woocommerce form.lost_reset_password {
    border: 1px solid var(--bs-line-soft); background: #fff; padding: 1.4rem; max-width: 28rem;
}
.woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.woocommerce-form-login__rememberme { display: inline-flex; gap: 0.4rem; align-items: center; }

/* =============================================================================
   NOTICES
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
    border: 1px solid var(--bs-line-soft); border-left: 4px solid var(--bs-ok);
    background: #fff; color: var(--bs-ink); padding: 0.7rem 1rem; margin: 0 0 1.2rem;
    list-style: none; border-radius: 0; font-size: 12.5px;
}
.woocommerce-info { border-left-color: var(--bs-ink); }
.woocommerce-error { border-left-color: var(--bs-red); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: 0.8rem; padding: 0.35em 0.8em; font-size: 11px; }
.demo_store, .woocommerce-store-notice { background: var(--bs-ink); color: #fff; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .bs-product__top { grid-template-columns: 1fr; }
    .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
    .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review, .woocommerce-checkout #customer_details { grid-column: 1; }
    #order_review { position: static; }
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
    .woocommerce .col2-set { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .bs-product { padding: 10px; }

    .bs-buybar:not([hidden]) {
        display: flex; align-items: center; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
        background: #fff; border-top: 2px solid var(--bs-ink);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    .bs-buybar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
    .bs-buybar__name { font-size: 10.5px; color: var(--bs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bs-buybar__price { font-size: 16px; font-weight: 700; color: var(--bs-ink); }
    .bs-buybar__price small { font-size: 9px; color: var(--bs-muted); font-weight: 400; }
    .bs-buybar__btn {
        flex: none; padding: 0.75em 1.2em; font-size: 13px; font-weight: 700;
        color: #fff; background: var(--bs-red);
        border: 1px solid var(--bs-red-dark); cursor: pointer;
    }
    .single-product .bs-main { padding-bottom: 70px; }
}

@media (max-width: 520px) {
    .woocommerce table.shop_table, .woocommerce table.shop_table tbody,
    .woocommerce table.shop_table th, .woocommerce table.shop_table td, .woocommerce table.shop_table tr { display: block; }
    .woocommerce table.shop_table thead { display: none; }
    .woocommerce table.shop_table tr { border-bottom: 1px solid var(--bs-line-soft); }
    .woocommerce table.shop_table td { border: 0; text-align: right; padding: 0.4rem 0.8rem; }
    .woocommerce table.shop_table td::before { content: attr(data-title); float: left; color: var(--bs-muted); font-size: 11px; font-weight: 700; }
    .woocommerce table.shop_table td.product-remove { text-align: left; }
}
