/* ==========================================================================
   Her Peptides — WooCommerce bridge

   The theme overrides only the templates whose structure the design genuinely
   changes (product card, cart, checkout). Everything else — the product
   gallery, variation form, tabs, account pages, order tables — keeps
   WooCommerce's own markup so its JavaScript and every gateway or add-on
   plugin keeps working. This file maps that markup onto the design.

   Loaded after shop.css and commerce.css, so it wins ties.
   ========================================================================== */

/* ============================== product grid ============================== */

/* loop-start.php sets --hp-shop-columns from Woo's own column setting. */
.woocommerce ul.products.shop-grid {
    grid-template-columns: repeat(var(--hp-shop-columns, 3), minmax(0, 1fr));
}

.woocommerce ul.products.shop-grid::before,
.woocommerce ul.products.shop-grid::after {
    display: none;
}

/* Woo's float grid rules would fight CSS grid. */
.woocommerce ul.products li.product {
    float: none;
    width: auto;
    margin: 0;
    clear: none;
}

@media (max-width: 991.98px) {
    .woocommerce ul.products.shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Phones get two cards to a row. That leaves a card about 170px wide, so it
 * tightens to the same compact scale as the front page's .hp-slide-grid
 * (style.css). The `ul.products.shop-grid li.product` prefix is needed:
 * woocommerce.css and the rules below style the title, price and button at
 * (0,4,2).
 */
@media (max-width: 575.98px) {
    .woocommerce ul.products.shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .woocommerce ul.products.shop-grid li.product .product-body {
        padding: 0 10px 12px 10px;
    }

    .woocommerce ul.products.shop-grid li.product .woocommerce-loop-product__title {
        margin: 0 0 6px;
        padding: 0;
        font-size: 14px;
        line-height: 1.35;
    }

    .woocommerce ul.products.shop-grid li.product .shop-desc {
        display: -webkit-box;
        overflow: hidden;
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.45;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .woocommerce ul.products.shop-grid li.product .tag-row {
        gap: 4px;
        margin-bottom: 10px;
    }

    .woocommerce ul.products.shop-grid li.product .tag {
        padding: 3px 8px;
        font-size: 10px;
    }

    .woocommerce ul.products.shop-grid li.product .price {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .woocommerce ul.products.shop-grid li.product .add-btn {
        gap: 6px;
        padding: 8px 6px;
        font-size: 12.5px;
    }

    .woocommerce ul.products.shop-grid li.product .add-btn i {
        font-size: 15px;
    }

    .woocommerce ul.products.shop-grid li.product .badge-seller {
        top: 8px;
        left: 8px;
        width: 42px;
        height: 42px;
        font-size: 7px;
    }

    .woocommerce ul.products.shop-grid li.product .wish-btn {
        top: 6px;
        right: 6px;
    }
}

/* Woo's general stylesheet paints every price #77a464 (green); the design uses
   ink for the current price and grey for the struck-through one. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .woocommerce-variation-price .price {
    color: var(--ink);
    font-weight: 700;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
    margin-right: 6px;
    color: #b0a4a9;
    font-weight: 500;
    opacity: 1;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
    background: none;
    color: var(--ink);
    text-decoration: none;
}

.shop-card .woocommerce-loop-product__title {
    margin: 0 0 8px;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
}

.shop-card .product-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.shop-card .product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Woo's own sale flash sits behind our .badge-seller. */
.woocommerce span.onsale {
    display: none;
}

/* ============================== result toolbar ============================== */

.woocommerce .shop-toolbar .woocommerce-result-count {
    margin: 0;
    color: #6d6367;
    font-size: 14px;
}

.woocommerce .shop-toolbar .woocommerce-ordering {
    margin: 0;
}

.woocommerce .shop-toolbar select {
    padding: 10px 38px 10px 16px;
    border: 1px solid #f0d9e3;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2382797c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    appearance: none;
}

/* =============================== filter rail =============================== */

.filter-panel .widget_block h2,
.filter-panel .widget-title,
.filter-panel .filter-group-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: none;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.filter-panel .widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter-panel .widget li {
    padding: 5px 0;
    color: #574f52;
    font-size: 14px;
}

.filter-panel .widget li a {
    color: #574f52;
}

.filter-panel .widget li a:hover,
.filter-panel .widget li.chosen > a {
    color: var(--pink-dark);
}

.filter-panel .widget li .count {
    color: #a2969b;
}

.filter-panel .price_slider_wrapper .ui-slider {
    height: 4px;
    border: 0;
    border-radius: 2px;
    background: #f8e4ec;
}

.filter-panel .price_slider_wrapper .ui-slider-range {
    background: var(--pink);
}

.filter-panel .price_slider_wrapper .ui-slider-handle {
    width: 15px;
    height: 15px;
    margin-top: -1px;
    border: 2.5px solid var(--pink);
    border-radius: 50%;
    background: #fff;
}

.filter-panel .price_slider_amount .button {
    float: none;
    margin-top: 12px;
}

/* below 992px the rail is behind a toggle */
@media (max-width: 991.98px) {
    .filter-panel {
        display: none;
    }

    .filter-panel.is-open {
        display: block;
    }
}

/* ============================== single product ============================== */

/*
 * The layout, gallery and summary are the theme's own markup
 * (woocommerce/content-single-product.php), styled by product.css. What is left
 * here is the WooCommerce output that lands *inside* that markup: the price
 * HTML, the stock line, the add-to-cart form and the product meta.
 */

.product-page .pd-main {
    padding: 24px 0 0;
}

.product-page .pd-product {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px 8px;
}

/* From 992px the .row inside is g-lg-5, which pulls itself out by half its 3rem
   gutter (24px). 16px of padding let it run 8px past the viewport until the
   1320px cap took over (~1336px), and the page scrolled sideways. Padding by the
   same half gutter keeps the row inside the wrapper. */
@media (min-width: 992px) {
    .product-page .pd-product {
        padding-right: 24px;
        padding-left: 24px;
    }
}

/* ---------------------------- price + stock ---------------------------- */

/* Woo prints the price as its own markup; the design wants one bold figure
   with the old price struck through beside it. */
.product-page .pd-price-row .price {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    margin: 0;
    color: var(--ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.product-page .pd-price-row .price del {
    order: 2;
    color: #b0a4a9;
    font-size: 18px;
    font-weight: 500;
    opacity: 1;
}

.product-page .pd-price-row .price ins {
    order: 1;
    background: none;
    color: var(--ink);
    text-decoration: none;
}

.product-page .pd-price-row .price .woocommerce-Price-currencySymbol {
    font-size: .8em;
}

.product-page .pd-summary > .stock {
    display: none; /* the design shows stock in .pd-price-row instead */
}

.product-page form.cart .stock {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}

.product-page form.cart .stock.in-stock {
    color: #3d8f68;
}

.product-page form.cart .stock.out-of-stock {
    color: #c8484c;
}

/* ----------------------------- buy controls ----------------------------- */

/* quantity-input.php emits .quantity.qty-control everywhere; on the product
   page it has to take the taller .pd-qty proportions. */
.product-page .pd-buy .quantity {
    flex: none;
    border: 1.5px solid #eedbe4;
    border-radius: 10px;
}

.product-page .pd-buy .qty-btn {
    width: 42px;
    height: 48px;
}

.product-page .pd-buy .quantity input.qty {
    width: 52px;
    height: 48px;
    font-size: 15px;
}

.product-page .pd-buy .pd-add {
    display: inline-flex;
    flex: 1;
    min-width: 190px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--pink);
    padding: 11px 24px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(224, 92, 150, .28);
    transition: background .2s ease;
}

.product-page .pd-buy .pd-add:hover {
    background: var(--pink-dark);
}

.product-page .pd-buy .pd-add.loading {
    opacity: .75;
}

.product-page .pd-buy .pd-wish {
    display: grid;
    flex: none;
    width: 48px;
    height: 48px;
    place-content: center;
    border: 1.5px solid #eedbe4;
    border-radius: 10px;
    color: #6f6569;
    background: #fff;
    font-size: 19px;
}

.product-page .pd-buy .pd-wish:hover {
    border-color: var(--pink-soft);
    color: var(--pink);
    background: var(--pink-tint);
}

/* grouped, external and variable products keep Woo's own form */
.product-page form.cart.variations_form,
.product-page form.cart.grouped_form {
    display: block;
    margin-top: 20px;
}

.product-page .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* the .pd-buy row (variation-add-to-cart-button.php) takes the full width, as
   it does on a simple product */
.product-page .woocommerce-variation-add-to-cart .pd-buy {
    flex: 1 1 100%;
    margin-top: 0;
}

/* until a size is chosen Woo marks the button .disabled rather than :disabled */
.product-page .pd-buy .pd-add.disabled,
.product-page .pd-buy .pd-add.disabled:hover {
    box-shadow: none;
    background: #e3d6dc;
    cursor: not-allowed;
}

.product-page .woocommerce-variation-price {
    margin: 14px 0 0;
}

.product-page .woocommerce-variation-price .price {
    font-size: 22px;
    font-weight: 700;
}

/* --------------------------------- meta --------------------------------- */

.product-page .product_meta {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f2dbe4;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.product-page .product_meta > span {
    display: block;
}

/* already shown beside the rating */
.product-page .product_meta .sku_wrapper {
    display: none;
}

/* tabs, up-sells and related sit outside .pd-product, so they get their own
   centred container (opened by hp_after_summary_open) */
.pd-after {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
}

.product-page .product_meta a {
    color: var(--pink-dark);
}

/* ---------------------------- variations form ---------------------------- */

.product-page .variations {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: collapse;
}

.product-page .variations th,
.product-page .variations td {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
}

.product-page .variations th.label label {
    display: block;
    margin: 14px 0 7px;
    color: #4c4447;
    font-size: 13px;
    font-weight: 600;
}

.product-page .variations select {
    width: 100%;
    padding: 11px 38px 11px 14px;
    border: 1.5px solid #eedbe4;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2382797c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    appearance: none;
}

.product-page .reset_variations {
    display: inline-block;
    margin-top: 10px;
    color: var(--pink-dark);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-page .woocommerce-variation-price {
    margin-bottom: 14px;
}

.pd-assure {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f2dbe4;
}

/* ---------------------------------- tabs ---------------------------------- */

.woocommerce-tabs {
    margin-top: 46px;
}

/*
 * Woo's own tab markup restyled as the design's .pd-tabs underline strip. The
 * class names stay core's so single-product.js keeps switching panels; only
 * the appearance changes. woocommerce.css draws the pill borders and the two
 * ::before/::after "curl" pseudo-elements, so both are reset here.
 */
.woocommerce-tabs ul.tabs {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    margin: 0 0 24px;
    padding: 0 0 2px;
    border-bottom: 1px solid #f2dbe4;
    list-style: none;
    scrollbar-width: none;
}

.woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
    display: none;
}

.woocommerce-tabs ul.tabs li {
    position: relative;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px 10px 0 0;
    color: #6f6569;
    background: none;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}

.woocommerce-tabs ul.tabs li a:hover {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--pink-dark);
    background: none;
}

.woocommerce-tabs ul.tabs li.active a::after {
    position: absolute;
    right: 12px;
    bottom: -3px;
    left: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--pink);
    content: "";
}

.woocommerce-tabs .panel {
    color: #6d6367;
    font-size: 14.5px;
    line-height: 1.8;
}

.woocommerce-tabs .panel > h2:first-child {
    display: none;
}

.woocommerce-tabs table.shop_attributes th {
    width: 200px;
    padding: 12px 0;
    border-bottom: 1px solid #f7ecf1;
    color: var(--ink);
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: 0;
}

.woocommerce-tabs table.shop_attributes td {
    padding: 12px 0;
    border-bottom: 1px solid #f7ecf1;
    font-style: normal;
}

/* --------------------------------- reviews --------------------------------- */

#reviews .commentlist {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

#reviews .commentlist li {
    margin: 0 0 16px;
    border: 1px solid #f7e7ee;
    border-radius: 14px;
    padding: 18px 20px;
}

#reviews .comment-text {
    margin: 0;
    padding: 0;
    border: 0;
}

#reviews .comment_container img.avatar {
    position: static;
    float: left;
    width: 48px;
    margin: 0 14px 8px 0;
    border: 0;
    border-radius: 50%;
    padding: 0;
}

#review_form .comment-form {
    display: grid;
    gap: 14px;
}

#review_form .comment-form-rating .stars a {
    color: var(--pink);
}

/* ------------------------- related & cross-sells ------------------------- */

.related,
.upsells,
.cross-sells {
    margin-top: 52px;
}

.related > h2,
.upsells > h2,
.cross-sells > h2 {
    margin: 0 0 22px;
    font-size: 27px;
}

.cross-sells ul.products {
    display: grid;
    grid-template-columns: repeat(var(--hp-shop-columns, 3), minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =============================== pagination =============================== */

/* .hp-pager (used by the blog templates) is styled in the theme's style.css,
   which loads everywhere; these are Woo's own pagination selectors only. */
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 34px 0 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    border: 0;
    overflow: visible;
}

/* Child combinators: the prev/next links carry a .screen-reader-text span,
   which must not pick up the page box. */
.woocommerce nav.woocommerce-pagination ul li > a,
.woocommerce nav.woocommerce-pagination ul li > span {
    display: grid;
    min-width: 40px;
    height: 40px;
    place-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #574f52;
    background: #fff;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

/* :focus is listed because woocommerce.css gives it its own grey-lilac fill. */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
    border-color: var(--pink);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    border-color: var(--pink);
    color: #fff;
    background: var(--pink);
}

/*
 * My Account had a placeholder block here — a grid, a nav and a login card,
 * enough to keep the unported page legible. profile.css now owns those screens
 * in full, and two stylesheets styling the same elements is how a change in one
 * quietly stops mattering, so the placeholder is gone rather than merged.
 */

/* =============================== order tables =============================== */

.woocommerce table.shop_table.order_details,
.woocommerce table.shop_table.woocommerce-orders-table,
.woocommerce table.shop_table.customer_details {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.woocommerce table.shop_table.order_details th,
.woocommerce table.shop_table.woocommerce-orders-table th {
    padding: 0 0 12px;
    border-bottom: 1px solid #f2dbe4;
    color: #6d6367;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.woocommerce table.shop_table.order_details td,
.woocommerce table.shop_table.woocommerce-orders-table td {
    padding: 14px 0;
    border-bottom: 1px solid #f7ecf1;
    font-size: 14px;
}

.woocommerce ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.woocommerce ul.order_details li {
    flex: 1 1 160px;
    margin: 0;
    border: 1px solid #f7e7ee;
    border-right-width: 1px;
    border-radius: 14px;
    background: #fdf9fb;
    padding: 14px 16px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.woocommerce ul.order_details li strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.woocommerce-order .woocommerce-thankyou-order-received {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 28px;
}

/* ============================ notices, buttons ============================ */

/* commerce.css styles these; Woo prints them on every shop page, so make sure
   the plugin's own defaults never win. Woo's own rules are `.woocommerce
   .woocommerce-message` (two classes), which beats commerce.css's single class —
   so anything Woo sets that the design replaces has to be undone here. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
    border-width: 1px;
    border-style: solid;
    padding: 14px 18px;
    background-image: none;
}

/*
 * Woo positions its ::before absolutely and hangs a tick glyph off it. The badge
 * is a real flex/grid item here, so the positioning is reset and the size the
 * plugin sets is replaced rather than inherited.
 */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before {
    position: static;
    top: auto;
    left: auto;
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-error .button {
    float: none;
    border-radius: 40px;
    padding: 9px 20px;
    font-size: 13.5px;
}

@media (max-width: 575.98px) {
    .woocommerce .woocommerce-message .button,
    .woocommerce .woocommerce-info .button,
    .woocommerce .woocommerce-error .button,
    .woocommerce-page .woocommerce-message .button,
    .woocommerce-page .woocommerce-info .button,
    .woocommerce-page .woocommerce-error .button {
        width: 100%;
    }
}

/* Woo's default button, wherever the theme has not already claimed it */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--pink);
    border-radius: 10px;
    color: #fff;
    background: var(--pink);
    padding: 11px 22px;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    border-color: var(--pink-dark);
    color: #fff;
    background: var(--pink-dark);
}

.woocommerce a.button.wc-backward {
    background: var(--pink);
}

/* the loop's add-to-cart keeps the shop card's full-width shape */
.woocommerce ul.products li.product .add-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--pink);
    padding: 8px 16px;
    font-size: 14.5px;
    font-weight: 600;
}

.woocommerce ul.products li.product .add-btn.loading {
    opacity: .7;
}

.woocommerce ul.products li.product .added_to_cart {
    display: block;
    margin-top: 8px;
    color: var(--pink-dark);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

/* =============================== cart table =============================== */

/* Woo's general stylesheet pins cart thumbnails to 32px and paints the remove
   link red !important — both need answering here rather than in cart.css,
   which loads before woocommerce.css. */
.woocommerce table.cart img,
.woocommerce #content table.cart img {
    width: 100%;
    height: 100%;
    padding: 8%;
    box-shadow: none;
    object-fit: contain;
}

.woocommerce table.cart td.product-thumbnail a,
.woocommerce table.cart td.product-thumbnail img {
    display: block;
}

.woocommerce a.remove,
.woocommerce table.cart a.remove {
    display: grid;
    width: 30px;
    height: 30px;
    margin-left: auto;
    place-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: #9a8f93 !important;
    background: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

.woocommerce a.remove:hover,
.woocommerce table.cart a.remove:hover {
    border-color: #e8a9b4;
    color: #c8484c !important;
    background: #fdf3f3 !important;
}

/* the quantity cell keeps the stepper on one line */
.woocommerce table.cart td.product-quantity .quantity,
.woocommerce .quantity.qty-control {
    display: inline-flex;
    align-items: center;
    width: auto;
}

.woocommerce .quantity.qty-control input.qty {
    width: 46px;
    padding: 0;
    text-align: center;
}

/* ================================ checkout ================================ */

/* Woo paints #payment grey with a triangle pointer on the open panel. The
   design uses white cards, so both are unwound here — checkout.css loads
   before woocommerce.css and would lose the tie. */
.woocommerce-checkout #payment,
.woocommerce-page .woocommerce-checkout #payment {
    border-radius: 0;
    background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 0;
    padding: 0;
}

.woocommerce-checkout #payment div.payment_box {
    border-radius: 0;
    background: transparent;
    color: #6d6367;
    font-size: 13px;
    line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

.woocommerce-checkout #payment div.form-row {
    padding: 0;
}

.woocommerce-checkout #payment .place-order {
    margin-top: 12px;
    padding: 0;
}

/* ---------------------------- static currency ---------------------------- */

/* One store currency: a label, not a dropdown that cannot drop. */
.cur-switch--static .cur-btn {
    cursor: default;
    pointer-events: none;
}

/* ============================== lean checkout ============================== */

.hp-lean-header .header-inner {
    justify-content: space-between;
}

.hp-lean-header .header-secure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.hp-lean-header .header-secure i {
    color: var(--pink);
    font-size: 16px;
}


/* ============================== wishlist (YITH) ============================== */

/*
 * The heart is emitted as the card's first child, outside the product link —
 * anchors cannot nest — so the card is what it positions against.
 */
.shop-card {
    position: relative;
}

/*
 * The plugin wraps every button in two divs. `display: contents` takes them out
 * of the box model so the anchor itself is the only thing laying out, which is
 * what .wish-btn's absolute positioning already expects.
 */
.shop-card > .yith-wcwl-add-to-wishlist,
.shop-card > .yith-wcwl-add-to-wishlist .yith-wcwl-add-button,
.product-media .yith-wcwl-add-to-wishlist,
.product-media .yith-wcwl-add-button,
.pd-stage > .yith-wcwl-add-to-wishlist,
.pd-stage > .yith-wcwl-add-to-wishlist .yith-wcwl-add-button {
    display: contents;
}

/* YITH ships its own button skin; the design's heart is the one that wins. */
a.wish-btn,
a.wish-btn:hover,
a.wish-btn:focus {
    box-shadow: none;
    text-decoration: none;
}

/* "+ Show more" is a <button> here, not the design's <a>. */
button.filter-more {
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--sans);
    cursor: pointer;
}

.wish-btn > span,
.wish-btn .yith-wcwl-icon-svg,
.yith-wcwl-add-to-wishlist .feedback,
.yith-wcwl-add-to-wishlist .separator,
.yith-wcwl-add-to-wishlist .view-wishlist {
    display: none;
}

/* Mid-request the plugin marks the button; keep the heart from jumping. */
.wish-btn.loading,
.wish-btn.added {
    opacity: .55;
}

/* The wishlist page itself: Woo table styling already covers most of it, this
   just stops the plugin's buttons clashing with the design's. */
.wishlist_table .product-add-to-cart a,
.yith-wcwl-share ul {
    font-family: var(--sans);
}

.woocommerce .wishlist-title h2 {
    font-family: var(--serif);
}

/* =========================== category chip rail =========================== */

/*
 * owl's own CSS hides .owl-carousel until it initialises. If the script never
 * runs, that would take the whole category rail with it — so the row stays a
 * plain scrollable strip until owl actually takes over.
 */
.chip-row.owl-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.chip-row.owl-carousel::-webkit-scrollbar {
    display: none;
}

.chip-row.owl-carousel.owl-loaded {
    display: block;
    overflow: visible;
}

.chip-row.owl-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.chip-row.owl-carousel .owl-item {
    display: flex;
}

/* Room for the arrows to sit over the ends of the rail. */
.chip-bar .container {
    position: relative;
}

.chip-row.owl-carousel .owl-nav {
    margin: 0;
}

.chip-row.owl-carousel .owl-nav button.owl-prev,
.chip-row.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    display: grid;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 1px solid var(--pink-soft);
    border-radius: 50%;
    place-content: center;
    color: var(--pink-dark);
    background: #fff;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(200, 120, 160, .18);
    transform: translateY(-50%);
    transition: opacity .2s ease, border-color .2s ease;
}

.chip-row.owl-carousel .owl-nav button.owl-prev {
    left: -14px;
}

.chip-row.owl-carousel .owl-nav button.owl-next {
    right: -14px;
}

.chip-row.owl-carousel .owl-nav button:hover {
    border-color: var(--pink);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

/* Nothing left to scroll to on that side — the arrow goes rather than greys. */
.chip-row.owl-carousel .owl-nav button.disabled {
    opacity: 0;
    pointer-events: none;
}

/*
 * Below the desktop breakpoint the container runs to the viewport edge, so an
 * arrow hung 14px outside it pushes the page 2px wide. Touch drags the rail
 * anyway, so the arrows go rather than the gutter growing to fit them.
 */
@media (max-width: 991.98px) {
    .chip-row.owl-carousel .owl-nav {
        display: none;
    }
}

/* ============================ shop filter rail ============================ */

/* Collapsed groups and the "show more" tail rely on [hidden], which the design
   never needed because it toggled inline styles. */
.filter-panel [hidden] {
    display: none;
}

/* The apply button only exists for unscripted visitors; script hides it. */
.filter-apply {
    width: 100%;
    margin-top: 20px;
    padding: 11px 18px;
    border: 0;
    border-radius: 40px;
    color: #fff;
    background: var(--pink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
}

.filter-apply:hover {
    background: var(--pink-dark);
}

/* The empty-result line carries a "clear all" link the design did not have. */
.shop-empty .filter-clear {
    margin-left: 6px;
}