/* ============================================================
   WooCommerce overrides — theme-specific only.
   Layout for cart/checkout/thankyou uses Tailwind utility classes.
   ============================================================ */

/* ── Shop ordering ─────────────────────────────────────────── */
.woocommerce-ordering {
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

.select2-results__option {
    padding: 6px 18px !important;
}

/* ── Price slider ───────────────────────────────────────────── */
.price_slider {
    width: 100%;
    height: 10px;
    background-color: var(--pco-surface-color);
    border-radius: 100px;
    margin-bottom: 24px;
    position: relative;
}

.price_slider .ui-slider-range {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--pco-primary-color);
    z-index: 1;
}

.price_slider .ui-slider-handle {
    position: absolute;
    top: -5.5px;
    z-index: 2;
    width: 20px;
    height: 20px;
    display: block;
    background-color: white;
    cursor: pointer;
    border: 2px solid var(--pco-primary-color);
}

.price_slider_amount .price_label {
    float: right;
}

/* ── Notices ────────────────────────────────────────────────── */
.woocommerce-notices-wrapper {
    margin-bottom: 24px;
}

/* WooCommerce prints the wrapper on every shop page whether or not it has a
   notice to put in it, so an empty one was still pushing 24px of margin under
   itself — a gap with nothing above it, on the pages a visitor sees most.
   `:empty` covers the usual case, where the div is printed with nothing at all
   between its tags; `:not(:has(*))` covers a template that leaves a newline in
   there, which is enough to defeat `:empty`. */
.woocommerce-notices-wrapper:empty,
.woocommerce-notices-wrapper:not(:has(*)),
.woocommerce-NoticeGroup:empty,
.woocommerce-NoticeGroup:not(:has(*)) {
    display: none;
}

.woocommerce-NoticeGroup {
    margin-bottom: 24px;
}
.woocommerce-no-js form.woocommerce-form-coupon,
.woocommerce-no-js form.woocommerce-form-login {
    display: block !important;
}

.woocommerce-no-js .showcoupon,
.woocommerce-no-js .woocommerce-form-coupon-toggle,
.woocommerce-no-js .woocommerce-form-login-toggle {
    display: none !important;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: 14px 16px 14px 48px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--pco-primary-color);
    background-color: #fff;
    position: relative;
    border-radius: 10px;
    margin: 0 0 24px;
    list-style: none;
    overflow: hidden;
    font-size: 14px;
}

.woocommerce-error:before,
.woocommerce-info:before,
.woocommerce-message:before {
    font-family: 'remixicon' !important;
    font-size: 1.1em;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Codepoints, not names, because the pseudo-element cannot take a class — so
   they have to be checked against the Remix Icon build that actually ships.
   \f294 and \f449 came from an older one and are not in 4.9.1: both rendered
   as the missing-glyph box. These are ri-error-warning-line and
   ri-information-line in the bundled font. */
.woocommerce-error:before {
    content: "\eca1";
    color: var(--pco-primary-color);
}

.woocommerce-info:before {
    content: "\ee59";
    color: #2087dc;
}

.woocommerce-message:before {
    content: "\eb81";
    color: #059669;
}

.woocommerce-message {
    border-left-color: #059669;
}

.woocommerce-info {
    border-left-color: #2087dc;
}

/* The prompts above the checkout form — "Returning customer? Log in" and
   "Have a coupon?" — are each a wrapper holding one notice. That makes every
   notice the last child of its parent, which `.post-content :last-child` in
   theme.css then strips the bottom margin from: a prose reset reaching a
   component it was never written for, and outranking the notice's own rule at
   one class and one pseudo-class against one class.

   So the spacing has to come from the rows. The coupon toggle carried `mb-5`
   from its template and the login toggle carried nothing, so the two notices
   sat 1px apart the moment the login prompt was switched on. Both are stated
   here, together, at the same value. */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
}

.woocommerce-notices-wrapper .button {
    float: right;
    margin-left: 12px;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 8px;
    background: var(--pco-primary-color);
    color: white;
}

.woocommerce-notices-wrapper .button:hover {
    background: color-mix(in srgb, var(--pco-primary-color) 90%, black 10%);
}

.woocommerce-notices-wrapper a {
    font-weight: 600;
    color: var(--pco-primary-color);
}

.woocommerce-notices-wrapper li {
    width: 100%;
}

.woocommerce-error .restore-item,
.woocommerce-info .restore-item,
.woocommerce-message .restore-item {
    margin-left: 10px;
    float: right;
}

/* ── Course cards in the shop loop ───────────────────────────
   A product that sells a course renders the course card, the same one the
   course grid renders. There the card fills its grid cell; here WooCommerce's
   <li> is the cell, so it has to pass that height through — without this a
   course with a longer excerpt grows its own card and the Enroll buttons stop
   lining up across the row. */
.product__item--course {
    display: flex;
}

.product__item--course > .pcl-el-card {
    width: 100%;
}

/* ── Star rating ────────────────────────────────────────────── */
.star-rating {
    position: relative;
    white-space: nowrap;
}

.star-rating>span {
    font-size: 0;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.star-rating:before,
.star-rating>span:before {
    content: "★★★★★";
    font-family: 'remixicon' !important;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #FDB12E;
}

.star-rating:before {
    color: #acacac;
}

/* ── Quantity input ─────────────────────────────────────────── */
.quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: white;
}

.quantity button {
    border: none;
    background: none;
    color: var(--pco-primary-color);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}

.quantity button:hover {
    background: #f1f5f9;
}

.quantity .qty {
    border: none;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    background: none;
    text-align: center;
    width: 44px;
    height: 36px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.quantity input[type="number"]::-webkit-inner-spin-button,
.quantity input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity input[type="number"] {
    -moz-appearance: textfield;
}

/* ── Proceed-to-checkout button ─────────────────────────────── */
.wc-proceed-to-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .2s;
    border: none;
    cursor: pointer;
}

.wc-proceed-to-checkout .checkout-button:hover {
    background: #4338ca;
    color: #fff;
}

/* ── Checkout form fields ────────────────────────────────────── */
.woocommerce-checkout .form-row,
.woocommerce-billing-fields__field-wrapper>p,
.woocommerce-shipping-fields__field-wrapper>p,
.woocommerce-additional-fields__field-wrapper>p {
    margin-bottom: 14px;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.woocommerce-billing-fields__field-wrapper>p,
.woocommerce-shipping-fields__field-wrapper>p {
    width: 100%;
}

.woocommerce-checkout .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
    display: flex;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: white;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}

.woocommerce-checkout textarea {
    min-height: 90px;
    resize: vertical;
}

/* ── Invalid fields (empty required) ─────────────────────────── */
.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select,
.form-row.woocommerce-invalid textarea,
.form-row.woocommerce-invalid .select2-selection {
    border-color: #dc2626 !important;
    background-color: #fef2f2;
}

.form-row.woocommerce-invalid .input-text:focus,
.form-row.woocommerce-invalid select:focus,
.form-row.woocommerce-invalid textarea:focus,
.form-row.woocommerce-invalid .select2-selection:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.form-row.woocommerce-invalid label {
    color: #b91c1c;
}

.form-row.woocommerce-validated .input-text,
.form-row.woocommerce-validated select,
.form-row.woocommerce-validated textarea {
    border-color: #cbd5e1;
}

/* select2 to match */
.select2-container .select2-selection--single {
    height: auto !important;
    padding: 9px 14px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: auto;
    height: 100%;
    padding: 0 12px;
}

.select2-dropdown {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.select2-container--open .select2-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.select2-results__option {
    padding: 9px 14px !important;
    font-size: 14px;
}

/* 2-column billing fields on ≥768px */
@media (min-width: 768px) {

    .woocommerce-billing-fields__field-wrapper #billing_first_name_field,
    .woocommerce-billing-fields__field-wrapper #billing_last_name_field,
    .woocommerce-billing-fields__field-wrapper #billing_company_field,
    .woocommerce-billing-fields__field-wrapper #billing_phone_field,
    .woocommerce-billing-fields__field-wrapper #billing_city_field,
    .woocommerce-billing-fields__field-wrapper #billing_state_field,
    .woocommerce-billing-fields__field-wrapper #billing_postcode_field,
    .woocommerce-shipping-fields__field-wrapper #shipping_first_name_field,
    .woocommerce-shipping-fields__field-wrapper #shipping_last_name_field,
    .woocommerce-shipping-fields__field-wrapper #shipping_city_field,
    .woocommerce-shipping-fields__field-wrapper #shipping_state_field,
    .woocommerce-shipping-fields__field-wrapper #shipping_postcode_field {
        width: calc(50% - 10px);
    }
}

/* ── Order review (checkout right column) ───────────────────── */
.woocommerce-checkout-review-order {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 12px 16px;
    font-size: 13px;
}

.woocommerce-checkout-review-order-table thead th {
    background: #f8fafc;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
    border-bottom: 1px solid #e2e8f0;
}

.woocommerce-checkout-review-order-table tbody tr {
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
}

.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .cart-subtotal th {
    padding-top: 12px;
}

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
    font-weight: 700;
    font-size: 15px;
}

.woocommerce-checkout-review-order-table tfoot tr:first-child td,
.woocommerce-checkout-review-order-table tfoot tr:first-child th {
    border-top: 1px solid #e2e8f0;
}

.product-quantity {
    color: #64748b;
}

/* ── Payment section ────────────────────────────────────────── */
#payment {
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 16px;
}

#payment .wc_payment_methods {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

#payment .wc_payment_method {
    margin-bottom: 8px;
}

#payment .wc_payment_method label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
}

#payment .payment_box {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 8px;
    font-size: 13px;
    color: #64748b;
}

/* "Save to account".

   The gateway prints this row itself, with `style="width:auto"` on the
   checkbox and `style="display:inline"` on the label — two inline boxes on a
   shared baseline. The checkbox is an 18px square sitting on that baseline
   while the label's text sits inside a ~20px line box, so the box rode 7px
   above the centre of the words it belongs to.

   Inline styles cannot be outranked from a stylesheet, so the row is made a
   flex container instead: a flex item is blockified whatever its own `display`
   says, and `align-items: center` then answers for both children. Margins go
   to `gap` so the spacing survives that. */
.form-row.woocommerce-SavedPaymentMethods-saveNew {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-row.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.form-row.woocommerce-SavedPaymentMethods-saveNew label {
    margin: 0;
    line-height: 1.3;
}

#payment .place-order {
    margin: 0;
}

#payment .place-order .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background: #4f46e5;
    color: white;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background .2s;
}

#payment .place-order .button:hover {
    background: #4338ca;
    color: white;
}

.woocommerce-terms-and-conditions-wrapper {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

.woocommerce-terms-and-conditions-wrapper a {
    color: #4f46e5;
    text-decoration: underline;
}

.woocommerce-privacy-policy-text {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

/* ── Shipping calculator ────────────────────────────────────── */
.woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-shipping-methods input {
    margin-right: 6px;
}

.woocommerce-shipping-destination {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.shipping-calculator-button {
    color: #4f46e5;
    text-decoration: underline;
    font-size: 13px;
}

/* ── Single product ─────────────────────────────────────────── */
.product-title a {
    color: var(--pco-primary-color);
}

.product-title a:hover {
    color: var(--pco-primary-color);
}

.variations_form .form-floating select {
    padding: 32px 0 12px !important;
    height: auto;
}

.variations_form .form-floating label {
    font-family: var(--pco-heading-font-family);
    color: var(--pco-primary-color);
    padding: 0;
}

/* `.button` and its added / loading states: see button.css. */

.onsale {
    position: absolute;
    left: 20px;
    top: 20px;
    border-radius: 0;
    width: auto;
    height: auto;
    min-height: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 8px 12px;
    background-color: var(--pco-surface-color);
    color: var(--pco-primary-color);
    z-index: 4;
}

.product__content {
    transition: .3s;
    text-align: center;
}

.product__title {
    font-size: var(--pco-h5-size);
    margin-bottom: 12px;
}

.product__title a {
    display: block;
    line-height: 1.2em;
    color: var(--pco-dark-color);
}

.product__thumb {
    overflow: hidden;
}

.product__item .product__thumb img {
    transform: scale(1);
    transition: .5s;
    width: 100%;
    filter: brightness(1);
}

.product__item:hover .product__thumb img {
    transform: scale(1.05);
    filter: brightness(.5);
}

.product__rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product__rating .star__rating {
    position: relative;
    text-align: left;
}

.product__rating .star {
    overflow: hidden;
    width: 100%;
}

.product__rating .star::before {
    content: "★★★★★";
    font-family: 'remixicon' !important;
    font-weight: normal;
    color: #FDA800;
    line-height: 14px;
    letter-spacing: 3px;
    display: block;
    white-space: nowrap;
}

.product__rating .back::before {
    font-weight: 300;
}

.product__rating .front {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.product__rating .rating_count {
    opacity: .6;
    color: var(--pco-text-color);
}

.product__item {
    position: relative;
    background-color: white;
}

.product__item .price {
    color: currentColor;
    letter-spacing: 0;
    line-height: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pco-heading-font-family);
    gap: 8px;
}

.product__item .price * {
    line-height: 1.2em;
}

.product__item .price ins .woocommerce-Price-amount {
    color: var(--pco-primary-color);
    font-weight: 600;
}

.product__item .rating__price {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: .3s;
}

.product__item .product__rating {
    margin-bottom: 16px;
    height: 14px;
}

.product__item .product_actions {
    display: flex;
    gap: 12px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    justify-content: center;
    transition: .3s;
    opacity: 0;
    visibility: hidden;
}

.product__item:hover .product_actions {
    opacity: 1;
    visibility: visible;
    bottom: 32px;
}

.product__item .product_actions .add_to_cart_button.added {
    display: none;
}

.product__item .product__thumb {
    position: relative;
    margin-bottom: 24px;
}

.woocommerce-product-gallery img,
.woocommerce-product-gallery__wrapper img {
    background-color: white;
}

.woocommerce-product-gallery__image {
    overflow: hidden;
    text-align: center;
}

.woocommerce-product-gallery {
    position: relative;
    z-index: 1;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 2;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger span {
    display: none;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
    content: "\f2db";
    font-family: 'remixicon' !important;
    font-size: var(--pco-h6-size);
    color: var(--pco-primary-color);
}

.woocommerce-product-gallery .flex-control-thumbs {
    list-style: none;
    margin: 5px -5px -5px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    width: calc(20% - 10px);
    overflow: hidden;
    margin: 5px;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    filter: brightness(1);
    transition: .3s;
    cursor: pointer;
}

.woocommerce-product-gallery .flex-control-thumbs li .flex-active {
    filter: brightness(.5);
}

.single-product-summary {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.single-product-summary .product_title {
    width: 100%;
    order: -3;
}

.single-product-summary .product__rating {
    width: 50%;
    justify-content: flex-start;
    margin-bottom: 16px;
    order: -2;
}

.single-product-summary .price {
    width: 100%;
    font-size: var(--pco-h4-size);
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--pco-primary-color);
    font-family: var(--pco-heading-font-family);
}

.single-product-summary .price del {
    color: var(--pco-primary-color);
}

.single-product-summary .woocommerce-product-details__short-description {
    width: 100%;
    margin-bottom: 24px;
}

.single-product-summary .stock {
    width: 50%;
    order: -1;
    text-align: center;
    color: var(--pco-primary-color);
}

.single-product-summary .cart {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.single-product-summary .cart .single_variation_wrap {
    width: 100%;
}

.single-product-summary .cart .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex;
    width: 100%;
}

.single-product-summary .cart .single_add_to_cart_button {
    display: flex;
    align-items: center;
}

.single-product-summary .cart .quantity {
    margin-right: 16px;
}

.single-product-summary .wishlist-button {
    padding: 0;
    width: 47px;
    height: 47px;
    margin-left: 16px;
}

.single-product-summary .product_meta {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-weight: 600;
}

.single-product-summary .product_meta span * {
    font-weight: 400;
}

.variations .form-floating label {
    text-transform: capitalize;
}

.form label {
    margin-bottom: 8px;
    color: var(--pco-primary-color);
}

.reset_variations {
    color: var(--pco-primary-color);
}

.required {
    color: red;
}

/* ── WC Tabs ────────────────────────────────────────────────── */
.wc-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #ececec;
}

.wc-tabs li {
    margin: 16px 32px 0 0;
}

.wc-tabs li a {
    display: block;
    padding-bottom: 16px;
    font-size: var(--pco-h4-size);
    color: var(--pco-primary-color);
    font-weight: 600;
    font-family: var(--pco-heading-font-family);
    position: relative;
}

.wc-tabs li.active a {
    color: var(--pco-primary-color);
}

.wc-tabs li a:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--pco-primary-color);
    border-radius: 100px;
    display: block;
    opacity: 0;
    transition: .3s;
}

.wc-tabs li.active a:before {
    opacity: 1;
}

.woocommerce-Tabs-panel h2 {
    display: none;
}

.related-products h2 {
    font-size: var(--pco-h4-size);
    margin-bottom: 24px;
}

/* ── Comments / Reviews ─────────────────────────────────────── */
.comment-form-rating .stars a {
    font-size: 0;
}

.comment-form-rating .stars a::before {
    content: "\f186";
    font-family: 'remixicon' !important;
    font-size: 16px;
    font-weight: normal;
    color: #FDB12E;
}

.comment-form-rating .stars a.active~a::before {
    font-weight: 300;
    color: #696969;
}

.commentlist {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}

.commentlist li:not(:last-child) {
    margin-bottom: 30px;
}

.commentlist .comment_container {
    padding-left: 60px;
    position: relative;
}

.commentlist .avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
}

.commentlist .comment-text {
    border: 1px solid var(--pco-surface-color);
    padding: 12px 22px;
    position: relative;
    margin-left: 20px;
}

.commentlist .comment-text:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 18px;
    width: 20px;
    height: 20px;
    background-color: white;
    display: block;
    border-top: 1px solid var(--pco-surface-color);
    border-left: 1px solid var(--pco-surface-color);
    transform: rotate(-45deg);
    border-radius: 2px 0 0 0;
}

.commentlist .woocommerce-review__author {
    font-family: var(--pco-heading-font-family);
}

.woocommerce-noreviews {
    margin-bottom: 16px;
}

.woocommerce-Reviews .comment-form {
    margin-top: 10px;
}

.woocommerce-Reviews .comment-form>* {
    width: 100%;
}

/* ── My Account ─────────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
}

/* WooCommerce prints the action *before* the sentence explaining it, which
   reads backwards: "Confirm email address  Confirm your email address to…".
   `order` puts the message first and parks the button at the end without
   touching the markup, so the DOM order WooCommerce ships — and the order a
   screen reader announces — is unchanged. */
.woocommerce-MyAccount-content .woocommerce-info .button {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1.4;
}

/* Under ~520px the button drops to its own line; full width beats a stray
   pill floated against the right edge. */
@media (max-width: 520px) {
    .woocommerce-MyAccount-content .woocommerce-info .button {
        width: 100%;
        margin-left: 0;
    }
}

/* ── Password input ─────────────────────────────────────────── */
.password-input {
    position: relative;
    width: 100%;
}

.password-input .show-password-input {
    border: none;
    background: none;
    position: absolute;
    right: 6px;
    top: calc(50% - 12px);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pco-primary-color);
    font-size: 16px;
    cursor: pointer;
}

.password-input .show-password-input:before {
    content: "\ecb5";
    font-family: 'remixicon' !important;
}

/* Our own auth templates ship a toggle button (.pc-auth-eye) in the markup, so
   WooCommerce's injected one is a second eye stacked on the first.
   The templates no longer carry the .woocommerce-Input class that triggers the
   injection, which is the actual fix; this is the belt to that pair of braces,
   for a plugin or a WooCommerce update that wraps the field by another route. */
#pc-auth .show-password-input,
#pc-thankyou-auth .show-password-input,
.pc-auth-field .show-password-input {
    display: none !important;
}

/* Same reasoning: if the wrapper does appear, it must not change the layout.
   As an inline element it adds a baseline gap under the input, which grew the
   field and left the lock icon centred against empty space below the text. */
#pc-auth .password-input,
#pc-thankyou-auth .password-input,
.pc-auth-field .password-input {
    display: block;
    position: static;
    width: 100%;
}

/* ── Password strength meter ─────────────────────────────────── */
/* WooCommerce injects this after the field with one of four state classes and
   no styling of its own. Unstyled, it inherited the surrounding prose sizing
   and rendered as a large dark "Strong" under the input. */
.woocommerce-password-strength {
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.woocommerce-password-strength.short {
    color: #8a1c1c;
    background: #fdecec;
    border-color: rgba(200, 45, 45, .25);
}

.woocommerce-password-strength.bad {
    color: #8a4b06;
    background: #fdf3e7;
    border-color: rgba(217, 135, 11, .25);
}

.woocommerce-password-strength.good {
    color: #1e5b8a;
    background: #eaf4fb;
    border-color: rgba(30, 110, 170, .25);
}

.woocommerce-password-strength.strong {
    color: #12694a;
    background: #e9f7f1;
    border-color: rgba(16, 145, 100, .25);
}

/* The hint WooCommerce shows alongside a weak password. */
.woocommerce-password-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

/* ── Account fields ─────────────────────────────────────────── */
.woocommerce-account-fields {
    margin-top: 24px;
}

/* ── Cart item misc ─────────────────────────────────────────── */
/* The drawer's footer keeps a fixed floor and hangs its contents from the
   bottom of it, so the subtotal and the two buttons sit in the same place
   whether the cart holds one line or ten — the list above scrolls instead. */
.cart_footer {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Wishlist ───────────────────────────────────────────────── */
.remove-from-wishlist {
    border: none;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: var(--pco-primary-color);
    color: white;
}

/* ── Shop table (order details etc.) ───────────────────────── */
.woocommerce td,
.woocommerce th {
    padding: 8px 12px;
}

.shop_table .product-total {
    text-align: left;
}

.shop_table th,
.shop_table td {
    color: var(--pco-dark-color);
}

.shop_table .order-total>* {
    border-top: 1px solid var(--pco-surface-color);
    font-weight: 600;
}

.shop_table .product-name .product-quantity {
    float: right;
    color: var(--pco-primary-color);
}

.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent !important;
}

/* ── Product list widget ────────────────────────────────────── */
.product_list_widget li img {
    border-radius: 0;
}

.product_list_widget li .star-rating {
    margin-bottom: 6px;
}

/* My Account nav styling lives on the template itself via Tailwind */

/* ── My Account general form fields ────────────────────────── */
.woocommerce-EditAccountForm .input-text,
.woocommerce-address-fields .input-text,
.woocommerce-address-fields select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: white;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.woocommerce-EditAccountForm .input-text:focus,
.woocommerce-address-fields .input-text:focus,
.woocommerce-address-fields select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}

.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
    margin-bottom: 14px;
}

.woocommerce-EditAccountForm .form-row label,
.woocommerce-address-fields .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

.woocommerce-address-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.woocommerce-address-fields__field-wrapper>p {
    width: 100%;
}

@media (min-width: 768px) {

    .woocommerce-address-fields__field-wrapper #billing_first_name_field,
    .woocommerce-address-fields__field-wrapper #billing_last_name_field,
    .woocommerce-address-fields__field-wrapper #billing_city_field,
    .woocommerce-address-fields__field-wrapper #billing_state_field,
    .woocommerce-address-fields__field-wrapper #billing_postcode_field,
    .woocommerce-address-fields__field-wrapper #billing_phone_field,
    .woocommerce-address-fields__field-wrapper #shipping_first_name_field,
    .woocommerce-address-fields__field-wrapper #shipping_last_name_field,
    .woocommerce-address-fields__field-wrapper #shipping_city_field,
    .woocommerce-address-fields__field-wrapper #shipping_state_field,
    .woocommerce-address-fields__field-wrapper #shipping_postcode_field {
        width: calc(50% - 10px);
    }
}

/* ── Shop loop product card ─────────────────────────────────── */
.product__item .product__thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    margin: 0;
}

.product__item .product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.product__item:hover .product__thumb img {
    transform: scale(1.05);
    filter: none;
}

.product__item .product__content {
    text-align: left;
}

.product__item h4.product__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.product__item h4.product__title a {
    color: #1e293b;
    text-decoration: none;
}

.product__item h4.product__title a:hover {
    color: #4f46e5;
}

.product__item .rating__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.product__item .product__rating {
    height: auto;
    margin-bottom: 0;
}

.product__item .product_actions {
    position: static;
    opacity: 1;
    visibility: visible;
    justify-content: flex-start;
}

/* ── Shop loop add-to-cart button ───────────────────────────── */
.product__item .add_to_cart_button,
.product__item .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #4f46e5;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}

.product__item .add_to_cart_button:hover,
.product__item .button:hover {
    background: #4338ca;
}

.product__item .button:after {
    display: none;
}

/* ── Pagination ─────────────────────────────────────────────── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.nav-links a,
.nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    color: #374151;
    transition: all .2s;
}

.nav-links a:hover {
    background: #f1f5f9;
    border-color: #c7d2fe;
    color: #4f46e5;
}

.nav-links .current {
    background: #4f46e5;
    border-color: #4f46e5;
    color: white;
}

.nav-links .prev,
.nav-links .next {
    width: auto;
    padding: 0 12px;
}

/* ── Shop toolbar ───────────────────────────────────────────── */
.woocommerce-result-count {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Sized down from the base select — this one sits beside the result count,
   not in a form. `background-color`, never the `background` shorthand: the
   shorthand resets background-image, which is where the arrow is, and the
   control loses the only sign that it opens. The right padding is the room
   that arrow needs. */
.woocommerce-ordering select {
    padding: 8px 34px 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    background-color: #fff;
    color: #374151;
    outline: none;
}

/* ── Ordering / filter ───────────────────────────────────────
   The sort control is a <select> and is left to look like one: the base rule
   in theme.css already gives it the border, the radius, the padding that
   reserves room for the arrow, and the arrow itself — a chevron drawn as a
   background image, because `appearance: none` removes the native one.

   This block used to restate all of that and set `background: white`. The
   shorthand resets background-image, so the chevron went with it and the
   select rendered as a plain box with no affordance that it opens. */
.woocommerce-ordering {
    display: inline-block;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 992px) {
    .woocommerce-MyAccount-navigation li {
        width: auto;
        min-width: 70px;
    }

    .woocommerce-MyAccount-navigation li a .icon {
        margin: 0;
    }

    .woocommerce-MyAccount-navigation li a .text {
        display: none;
    }
}

@media (max-width: 768px) {
    .woocommerce-order-overview li {
        width: 50%;
        padding: 4px 10px;
    }
}

@media (max-width: 576px) {
    .wc-tabs li a {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .wc-tabs li {
        margin-right: 16px;
    }

    .onsale {
        left: 12px;
        top: 12px;
        font-size: 10px;
        padding: 5px 8px;
    }

    .product__title {
        font-size: 16px;
    }

    .single-product-summary .product_title {
        font-size: var(--pco-h4-size);
        margin-bottom: 4px;
    }

    .single-product-summary .price {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .single-product-summary .product__rating {
        margin-bottom: 10px;
    }

    .single-product-summary .woocommerce-product-details__short-description {
        margin-bottom: 12px;
    }

    .single-product-summary .cart {
        margin-bottom: 12px;
        align-items: center;
    }

    .single-product-summary .cart .single_add_to_cart_button {
        width: calc(100% - 128px - 16px);
        padding: 6px 16px;
    }

    .single-product-summary .cart .single_add_to_cart_button .icon {
        display: none;
    }

    .single-product-summary .wishlist-button {
        width: 32px;
        height: 32px;
    }

    .woocommerce td,
    .woocommerce th {
        padding: 4px 10px;
    }

    .quantity {
        border-radius: 8px;
    }

    .quantity button {
        width: 30px;
        height: 30px;
    }

    .quantity .qty {
        width: 36px;
        height: 30px;
    }
}

.form-row {
    width: 100%;
}

.woocommerce-input-wrapper {
    display: flex;
    width: 100%;
}

/* Remove all default borders */
table.woocommerce-checkout-review-order-table,
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td,
table.woocommerce-checkout-review-order-table tr {
    border: none;
    text-align: left;
}

/* Add border right + bottom to td and th */
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
    border-right: 1px solid #e5e7eb;
    /* adjust color */
    border-bottom: 1px solid #e5e7eb;
}

/* Remove right border from last column */
table.woocommerce-checkout-review-order-table tr>*:last-child {
    border-right: none;
}

.wc-empty-cart-message {
    margin-bottom: 16px;
}