/* =============================================================
   WooCommerce — tabule-theme integration
   Uses CSS variables from customizer (--btn-*, --input-*, etc.)
   ============================================================= */

/* ----------------------------------------------------------
   Breadcrumb / page title
   No theme template hooks into shop/product pages, so WooCommerce's
   own breadcrumb and title markup needs baseline spacing here.
   ---------------------------------------------------------- */
.woocommerce-breadcrumb {
    margin: 0 0 1.5rem 0;
    color: var(--general-color);
    font-size: 0.875rem;
}

.woocommerce-breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--link-color-hover);
}

.woocommerce-products-header__title,
.woocommerce div.product .product_title {
    margin: 0 0 1rem 0;
}

/* ----------------------------------------------------------
   Buttons
   WooCommerce's own plugin stylesheet (still enqueued) declares the
   same selectors with equal specificity, so depending on load order
   it can win and silently ignore the Customizer's button settings.
   !important guarantees the theme's configured look always applies.
   ---------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
    background-color: var(--btn-bg-color) !important;
    color: var(--btn-text-color) !important;
    padding: var(--btn-padding-top-bottom) var(--btn-padding-left-right) !important;
    border-radius: var(--btn-border-radius) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover {
    background-color: var(--btn-bg-color-hov) !important;
    color: var(--btn-text-color-hov) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--btn-bg-color) !important;
    color: var(--btn-text-color) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--btn-bg-color-hov) !important;
    color: var(--btn-text-color-hov) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    font-size: 1.1rem;
    padding: 0.875rem 2rem;
    display: block;
    text-align: center;
}

/* ----------------------------------------------------------
   Forms / Inputs
   ---------------------------------------------------------- */
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce-checkout form .input-text,
.woocommerce-checkout form select {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    padding: var(--input-padding-top-bottom) var(--input-padding-left-right);
    width: 100%;
    box-sizing: border-box;
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
    border-color: var(--btn-bg-color);
    outline: none;
}

/* Quantity stepper is also matched by .input-text above — without this
   it stretches to 100% width like a normal text field. */
.woocommerce .quantity .qty {
    width: 4.5rem;
    text-align: center;
}

/* ----------------------------------------------------------
   Product grid
   WooCommerce's own plugin stylesheet (still enqueued — we never
   disabled it) hard-codes float + percentage widths on li.product,
   which wins over a plain grid/auto declaration and squashes every
   card down to a sliver. !important is the standard way themes
   override these specific WC defaults; Tailwind's preflight reset
   (margin/padding/list-style on ul/li) also strips the box model
   the float layout relied on, so the grid is rebuilt explicitly.
   ---------------------------------------------------------- */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    clear: both;
}

.woocommerce ul.products.columns-1 {
    grid-template-columns: repeat(1, 1fr);
}

/* Confirmed root cause of the blank first grid cell: WC's plugin CSS
   adds a float clearfix (content:" "; display:table;) on
   ul.products::before/::after. Under display:grid, any ::before/::after
   with real content is "blockified" into an actual grid item — so this
   invisible clearfix box was taking grid cell #1, pushing every real
   product one slot to the right. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after {
    content: none !important;
    display: none !important;
}

/* Respect the column count chosen in Customizer → WooCommerce →
   Product Catalog ("Products per row") — WC adds a .columns-N class to
   the <ul> based on it. The old fixed-breakpoint repeat(3)/repeat(4)
   ignored that class entirely, so the configured column count never
   matched what actually rendered. Below 600px it always collapses to
   2 regardless of N — cramming N columns onto a phone isn't usable no
   matter what N is set to. */
@media (min-width: 600px) {
    .woocommerce ul.products.columns-1 { grid-template-columns: repeat(1, 1fr); }
    .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
    .woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Safety net: covers any non-.product <li> WooCommerce may place in the
   loop (e.g. a category card when "Shop page display" includes
   categories) so it still sizes/positions like the rest instead of
   leaving a blank-looking grid cell. */
.woocommerce ul.products > li {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product {
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #cfd6e5;
    border-radius: 8px;
    box-shadow: 4px 4px 12px rgba(114, 124, 149, 0.12);
    transition: box-shadow 0.2s, transform 0.2s;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 4px 8px 20px rgba(114, 124, 149, 0.18);
    transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--general-color);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.woocommerce ul.products li.product .price {
    display: block;
    color: var(--btn-bg-color);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
    display: block !important;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   Sale badge
   ---------------------------------------------------------- */
.woocommerce span.onsale {
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    border-radius: 50%;
    min-height: 2.5em;
    min-width: 2.5em;
    line-height: 2.5em;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0;
    text-align: center;
}

/* ----------------------------------------------------------
   Star ratings
   ---------------------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: #f0b429;
}

/* ----------------------------------------------------------
   Prices
   ---------------------------------------------------------- */
.woocommerce .price ins {
    color: var(--btn-bg-color);
    text-decoration: none;
    font-weight: 700;
}

.woocommerce .price del {
    color: #999;
    opacity: 0.75;
}

/* ----------------------------------------------------------
   Notices
   ---------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--btn-bg-color);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--btn-bg-color);
}

.woocommerce-error {
    border-top-color: #cc1818;
}

/* ----------------------------------------------------------
   Tables (cart, order review)
   ---------------------------------------------------------- */
.woocommerce table.shop_table {
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    border-collapse: separate;
    border-spacing: 0;
}

.woocommerce table.shop_table th {
    color: var(--general-color);
    font-weight: 600;
}

.woocommerce table.shop_table td {
    border-top-color: var(--input-border-color);
}

/* ----------------------------------------------------------
   Pagination
   ---------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    border: none;
    padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    list-style: none;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--input-border-color);
    border-radius: var(--btn-border-radius);
    color: var(--link-color);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    border-color: var(--btn-bg-color);
}

/* ----------------------------------------------------------
   Single product
   ---------------------------------------------------------- */
.woocommerce div.product .product_title {
    color: var(--h1-color);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--btn-bg-color);
    font-size: 1.5rem;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 1.5rem;
}

.woocommerce div.product .woocommerce-product-gallery img {
    border-radius: 8px;
}

.woocommerce div.product .flex-control-thumbs li img {
    border-radius: 6px;
    transition: opacity 0.2s;
}

.woocommerce div.product .flex-control-thumbs li img:hover,
.woocommerce div.product .flex-control-thumbs li img.flex-active {
    opacity: 0.7;
}

.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}

.woocommerce div.product form.cart .quantity {
    margin: 0;
}

.woocommerce div.product p.stock {
    font-weight: 600;
}

.woocommerce div.product p.in-stock {
    color: #2e7d32;
}

.woocommerce div.product p.out-of-stock {
    color: #cc1818;
}

/* Smaller, muted meta block (SKU/categories/tags), separated from the
   short description above it with a top divider. Font-size is set on
   the links too — WC's own stylesheet sets an explicit size on
   .product_meta a that otherwise wins over the inherited value. */
.woocommerce div.product .product_meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--input-border-color);
    font-size: 0.8125rem;
    color: var(--general-color);
    opacity: 0.85;
}

.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a,
.woocommerce div.product .product_meta span {
    font-size: 0.8125rem;
}

.woocommerce div.product .product_meta a {
    color: var(--link-color);
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    color: var(--h2-color);
    margin: 2.5rem 0 1.25rem 0;
    font-size: 1.5rem;
}

/* Tabs — underline style instead of WC's boxed default.
   The divider lives on the wrapper (a single stable line); each tab's
   own border-bottom sits exactly on top of it via negative margin.
   Putting the divider on ul.tabs itself caused it to render thinner
   than 2px and show a stray rounded corner left over from WC's
   default boxed-tab styling (border-radius on li), so li/background/
   border are force-reset with !important. */
.woocommerce div.product .woocommerce-tabs {
    margin-top: 2rem;
    border-bottom: 2px solid var(--input-border-color);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 -2px 0;
    padding: 0;
    border: none !important;
}

/* WC's own .clearfix-style ::before/::after (content:" "; display:table;)
   on ul.products and ul.tabs is harmless (just a float clearfix) but
   gets removed here for the tabs list too since display:flex makes it
   unnecessary and it shows up as a stray mark when inspecting. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    content: none !important;
    display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    list-style: none;
    margin: 0;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li a::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
    content: none !important;
    display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 0.75rem 1rem;
    color: var(--general-color);
    font-weight: 600;
    text-decoration: none;
    border: none !important;
    transition: color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover {
    border-bottom-color: var(--link-color) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--btn-bg-color) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--btn-bg-color);
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: 1.5rem 0 0 0;
    color: var(--general-color);
    border: none;
}

.woocommerce-Reviews ol.commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------
   My Account navigation
   ---------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li a {
    color: var(--general-color);
    display: block;
    padding: 0.5rem 0;
    text-decoration: none;
    border-bottom: 1px solid var(--input-border-color);
    transition: color 0.2s;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--btn-bg-color);
    font-weight: 600;
}

/* ----------------------------------------------------------
   Checkout — order review
   ---------------------------------------------------------- */
#order_review_heading,
.woocommerce-checkout h3 {
    color: var(--general-color);
}

#order_review .shop_table tfoot tr:last-child th,
#order_review .shop_table tfoot tr:last-child td {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--general-color);
}

/* ----------------------------------------------------------
   Widget — product list / categories
   ---------------------------------------------------------- */
.woocommerce ul.product_list_widget li {
    border-bottom: 1px solid var(--input-border-color);
    padding: 0.5rem 0;
}

.woocommerce ul.product_list_widget li a {
    color: var(--general-color);
    font-weight: 500;
}

.woocommerce ul.product_list_widget li a:hover {
    color: var(--btn-bg-color);
}

.woocommerce ul.product_list_widget .amount {
    color: var(--btn-bg-color);
    font-weight: 600;
}

/* Price filter widget */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background-color: var(--input-border-color);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider-range {
    background-color: var(--btn-bg-color);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider-handle {
    background-color: var(--btn-bg-color);
}