/* ==========================================================================
   WooCommerce Notices
   ========================================================================== */

.woocommerce-info {
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
    border-radius: var(--wp--custom--border-radius);
    padding: 12px 20px;
}

.woocommerce-info::before {
    color: var(--wp--preset--color--base);
}

.woocommerce-info a {
    color: var(--wp--preset--color--base);
    text-decoration: underline;
}

.woocommerce-message {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    border-radius: var(--wp--custom--border-radius);
    padding: 14px 20px;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.woocommerce-message::before {
    display: none;
}

.woocommerce-message a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--base);
}

.woocommerce-message a.button {
    background: rgba(255, 255, 255, 0.25);
    color: var(--wp--preset--color--base);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    min-height: auto;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    order: 2;
    margin-left: 16px;
    transition: background 0.15s;
}

.woocommerce-message a.button:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--wp--preset--color--base);
}

.woocommerce-error {
    background: #e2401c;
    color: var(--wp--preset--color--base);
    border-radius: var(--wp--custom--border-radius);
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.woocommerce-error a {
    color: var(--wp--preset--color--base);
    text-decoration: underline;
}

.woocommerce-error li {
    list-style: none;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb {
    font-size: 16px;
    font-weight: 700;
    color: var(--wp--preset--color--contrast-muted);
    margin-top: 10px;
    margin-bottom: 36px;
}

.woocommerce-breadcrumb a {
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.woocommerce-breadcrumb a:hover {
    color: var(--wp--preset--color--primary);
}

/* Hide the breadcrumb on mobile across all WooCommerce surfaces — the native
   breadcrumbs block (archive/single) and the classic nav (account/order-pay).
   Single source: category-pills.css no longer duplicates this. */
@media (max-width: 991px) {
    .woocommerce-breadcrumb,
    .wc-block-breadcrumbs {
        display: none;
    }
}

/* ==========================================================================
   Single Product
   Built from native blocks: product-image-gallery, post-title, product-price,
   post-excerpt (short description) and the add-to-cart-form block (WCPA add-ons
   and variations render inside the form). The hoezoschattig/product-content
   block renders the description, reviews and suggestions below the summary by
   firing woocommerce_after_single_product_summary. The gallery and add-to-cart
   form keep WooCommerce's classic markup, so those component styles are
   unchanged from the previous classic template.
   ========================================================================== */

/* Two-column layout: gallery (40%, set on the column) + summary. */
.hs-product-layout {
    column-gap: 40px;
    row-gap: 24px;
    margin-bottom: 32px;
    align-items: flex-start;
}

/* Gallery */
.single-product .woocommerce-product-gallery {
    max-width: 100%;
    /* Clip the flexslider track (.__wrapper is width:600%) so a slider that
       hasn't sized its viewport can't blow out the page width on mobile. */
    overflow: hidden;
}

.single-product .woocommerce-product-gallery__image img,
.single-product .flex-viewport img {
    border-radius: var(--wp--custom--border-radius);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Never let a gallery image exceed its column — guards against flexslider
   sizing a slide wider than the viewport on mobile (horizontal overflow). */
.single-product .woocommerce-product-gallery img {
    max-width: 100%;
    height: auto;
}

/* Thumbnail strip: 4 per row, wrapping to new rows. */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
}

/* Breathing room below the main image. WooCommerce ships
   `.woocommerce div.product div.images .flex-control-thumbs { margin: 0 }`
   (specificity 0,4,2), which beats a plain override. The gallery div carries
   both `images` and `woocommerce-product-gallery`, so stacking them under
   div.product gives 0,5,2 — winning cleanly without !important. */
.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    margin-top: 22px;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    /* 4 per row: flex-basis overrides flexslider's `width: 25%` (flex-basis wins
       over the width property regardless of specificity), and float is ignored
       on a flex item. The gap is accounted for so exactly 4 fit per row. */
    flex: 0 0 calc(25% - 7px);
    min-width: 0;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background: var(--wp--preset--color--base);
    padding: 3px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
    opacity: 1;
}

/* Title */
.single-product h1.wp-block-post-title {
    margin-bottom: 8px;
}

/* Price (native product-price block) — colour + weight come from theme.json. */
.single-product .hs-product-summary-col .wp-block-woocommerce-product-price {
    font-size: 1.7em;
    margin-bottom: 16px;
}

.single-product .hs-product-summary-col .wp-block-woocommerce-product-price del {
    color: var(--wp--preset--color--contrast-light);
    font-weight: 400;
    font-size: 0.75em;
}

.single-product .hs-product-summary-col .wp-block-woocommerce-product-price ins {
    text-decoration: none;
}

/* Short description (native post-excerpt block) */
.single-product .wp-block-post-excerpt {
    margin-bottom: 20px;
}

.single-product .wp-block-post-excerpt p {
    margin-bottom: 1em;
}

/* Add-to-cart form (classic markup rendered by the add-to-cart-form block) */
.single-product .single_add_to_cart_button {
    border-radius: var(--wp--custom--border-radius);
    min-height: 50px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: 10px;
}

.single-product .single_add_to_cart_button:hover {
    animation: gelatine 0.5s;
}

.single-product .variations td {
    padding: 8px 0;
    flex: 1;
}

.single-product .variations th.label {
    padding: 8px 12px 8px 0;
}

.single-product .single_variation_wrap {
    margin-top: 10px;
}

.single-product .variations select {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--wp--custom--border-radius);
    padding: 10px 14px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}

.single-product .variations select:focus {
    border-color: var(--wp--preset--color--primary);
}

/* Description / reviews / suggestions (hoezoschattig/product-content block) */
.single-product .hs-product-description {
    max-width: 800px;
}

.single-product .hs-product-description h2,
.single-product .hs-product-description h3,
.single-product .hs-product-description h4 {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

.single-product .hs-product-description h2:first-child,
.single-product .hs-product-description h3:first-child,
.single-product .hs-product-description h4:first-child {
    margin-top: 0;
}

.single-product .hs-product-description p {
    margin-bottom: 1em;
}

.single-product .hs-product-description ul,
.single-product .hs-product-description ol {
    margin-bottom: 1em;
}

/* Vertical rhythm between the stacked sections below the summary (description,
   reviews, suggestions) — the product-content block renders them in normal flow.
   woocommerce-reset.css zeroes the related/up-sells top margin (to strip
   blocktheme's 5em); restore the gap by mirroring that selector — woocommerce.css
   loads after the reset, so the equal-specificity rule wins. */
.single-product .hs-reviews-section,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells {
    margin-top: 40px;
}

.single-product .hs-product-description > h2:first-child,
.single-product .hs-reviews-section > h2,
.single-product .related > h2,
.single-product .up-sells > h2 {
    margin-top: 0;
    margin-bottom: 16px;
}

@media (max-width: 992px) {
    /* Stack the gallery above the summary (flex-direction beats the inline
       40% flex-basis without needing !important). */
    .hs-product-layout {
        flex-direction: column;
    }

    .single-product .hs-product-summary-col .wp-block-woocommerce-product-price {
        font-size: 1.4em;
    }
}

/* Cart/checkout block styles live in cart-blocks.css / checkout-blocks.css
   (conditionally loaded where those blocks render). The classic rules below
   only serve the still-classic order-pay endpoint (form-pay.php). */

/* ==========================================================================
   Checkout (order-pay endpoint)
   ========================================================================== */

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="url"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--wp--custom--border-radius);
    padding: 10px 14px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--wp--preset--color--primary);
}

.woocommerce-checkout #place_order {
    display: block;
    width: 100%;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: var(--wp--custom--border-radius);
    padding: 16px 24px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.woocommerce-checkout #place_order:hover {
    animation: gelatine 0.5s;
    background: var(--wp--preset--color--primary-light);
}

/* ==========================================================================
   Classic product loop (ul.products)
   The shop archive now uses the Product Collection block (styled below), but
   WooCommerce still renders ul.products for related products and up-sells on the
   single-product page. These rules style that grid + pagination.
   ========================================================================== */

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

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

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

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

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .woocommerce ul.products,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.woocommerce ul.products li.product {
    min-width: 0;
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.woocommerce-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 20px 0;
}

.woocommerce-pagination ul {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}

.woocommerce-pagination ul li {
    border: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
    text-decoration: none;
    font-weight: 700;
    border: none;
    transition: background 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

.woocommerce-pagination .page-numbers:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    animation: gelatine 0.5s;
}

.woocommerce-pagination .page-numbers.current {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

.woocommerce-result-count,
.woocommerce-ordering {
    display: none;
}

/* ==========================================================================
   Custom Product Card — WooCommerce Overrides
   Reset handles float/width/font stripping. These rules handle
   card-specific overrides that go beyond what the reset covers.
   ========================================================================== */

.woocommerce ul.products li.product.hs-card {
    text-align: left;
}

/* Hide WooCommerce's default sale flash — card renders its own badge */
.woocommerce ul.products li.product.hs-card span.onsale {
    display: none;
}

/* ==========================================================================
   Product Archive — Product Collection Block
   The shop/category/tag archives render the native Product Collection block;
   each product is the hoezoschattig/product-card block (.hs-card). These rules
   replace WooCommerce's flex layout with the original CSS grid (4/3/2 columns)
   and brand-style the pagination. The .hs-card visuals live in components.css.
   ========================================================================== */

/* The native breadcrumbs and store-notices blocks both default to alignwide;
   constrain them to the content width so they line up with the title and
   product grid. */
.wp-block-group > .wc-block-breadcrumbs.alignwide,
.wp-block-group > .wc-block-store-notices.alignwide {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

/* The collection uses shrinkColumns, so WooCommerce renders the product
   template as a CSS grid (.wc-block-product-template__responsive) with no
   per-item width rules — letting us set the exact original column counts and
   20px gutter. Plain class chains (≥ 0,2,0) override WC's grid rules without
   !important. */
.wp-block-woocommerce-product-collection .wc-block-product-template__responsive {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .wp-block-woocommerce-product-collection .wc-block-product-template__responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .wp-block-woocommerce-product-collection .wc-block-product-template__responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Grid items stretch to the row height; let .hs-card fill it so cards align
   (equal heights), matching the classic li.product.hs-card behaviour. */
.wp-block-woocommerce-product-collection .wc-block-product > .hs-card {
    height: 100%;
}

/* Pagination — circular page numbers (matches the classic .woocommerce-pagination). */
:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination {
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination .page-numbers,
:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination-previous,
:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
    text-decoration: none;
    font-weight: 700;
    transition: background 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination .page-numbers:hover,
:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination-previous:hover,
:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination-next:hover {
    background: var(--wp--preset--color--primary);
    animation: gelatine 0.5s;
}

:root :where(.wp-block-woocommerce-product-collection) .wp-block-query-pagination .page-numbers.current {
    background: var(--wp--preset--color--primary);
}

/* ==========================================================================
   WooCommerce Blocks — Stable Component Overrides
   Uses shallow, stable selectors on block wrappers and documented
   component classes. Avoids deeply nested internal DOM targeting.
   ========================================================================== */

/* Cart/checkout CTA buttons are styled in cart-blocks.css / checkout-blocks.css
   (those always load where the buttons exist and win the cascade). */

/* Block form inputs */
:root :where(.wc-block-components-text-input) input,
:root :where(.wc-block-components-combobox) input,
:root :where(.wc-block-components-textarea) textarea {
    border-radius: var(--wp--custom--border-radius);
}

:root :where(.wc-block-components-text-input) input:focus,
:root :where(.wc-block-components-combobox) input:focus,
:root :where(.wc-block-components-textarea) textarea:focus {
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

/* Block product images */
:root :where(.wc-block-components-product-image) img {
    border-radius: var(--wp--custom--border-radius);
}

/* Block notices */
:root :where(.wc-block-components-notice-banner).is-info {
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: var(--wp--custom--border-radius);
}

:root :where(.wc-block-components-notice-banner).is-info .wc-block-components-notice-banner__content a {
    color: var(--wp--preset--color--base);
}

:root :where(.wc-block-components-notice-banner).is-success {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: var(--wp--custom--border-radius);
    padding: 14px 20px;
}

:root :where(.wc-block-components-notice-banner).is-success > svg {
    display: none;
}

:root :where(.wc-block-components-notice-banner).is-success .wc-block-components-notice-banner__content {
    color: var(--wp--preset--color--base);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content a.wc-forward {
    color: var(--wp--preset--color--base);
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 16px;
    transition: background 0.15s;
}

.wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content a.wc-forward:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--wp--preset--color--base);
}

:root :where(.wc-block-components-notice-banner).is-error {
    background: #e2401c;
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: var(--wp--custom--border-radius);
    padding: 14px 20px;
    font-weight: 600;
}

:root :where(.wc-block-components-notice-banner).is-error > svg {
    display: none;
}

:root :where(.wc-block-components-notice-banner).is-error .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content a {
    color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Quantity Controls
   ========================================================================== */

.quantity .qty {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--wp--custom--border-radius);
    padding: 8px 12px;
    width: 70px;
    text-align: center;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.quantity .qty:focus {
    border-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Star Rating (global)
   Reviews render via the custom .hs-review-* components (reviews.css); the
   classic .woocommerce-Reviews tab + #review_form no longer exist. This rule
   still serves third-party DOM (e.g. FiboSearch suggestion ratings).
   ========================================================================== */

.star-rating {
    color: #FFB800;
    font-size: 14px;
}

/* ==========================================================================
   Sale Flash
   ========================================================================== */

.woocommerce span.onsale {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    border-radius: var(--wp--custom--border-radius);
    font-size: 14px;
    font-weight: 700;
    padding: 10px;
    line-height: 1.3;
    text-align: center;
}

.woocommerce .woocommerce-product-gallery span.onsale {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;
}

/* ==========================================================================
   Stock Status
   ========================================================================== */

.single-product .stock {
    font-size: 16px;
    font-weight: 700;
}

.single-product .stock.in-stock {
    color: var(--wp--preset--color--primary);
}

.single-product .stock.out-of-stock {
    color: var(--wp--preset--color--contrast);
}