/* ==========================================================================
   WooCommerce Components
   ========================================================================== */


/* ==========================================================================
   01 - Buttons
   ========================================================================== */

/* Base */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce .button.alt,
.woocommerce .woocommerce-button,
.wc-block-components-button,
.wc-block-components-button.wp-element-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        var(--wc-button-padding-y)
        var(--wc-button-padding-x);

    border: none;

    border-radius: var(--wc-button-radius);

    background: var(--wc-button-background);

    color: var(--wc-button-color);

    font-weight: var(--wc-button-font-weight);

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    box-shadow: var(--wc-button-shadow);

    transition:
        background var(--wc-transition),
        box-shadow var(--wc-transition),
        transform var(--wc-transition);

}


/* Hover */

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce .button.alt:hover,
.woocommerce .woocommerce-button:hover,
.wc-block-components-button:hover,
.wc-block-components-button.wp-element-button:hover {

    background: var(--wc-button-background-hover);

    box-shadow: var(--wc-button-shadow-hover);

}

/* ==========================================================================
   02 - Forms
   ========================================================================== */

.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    display: block;
    width: 100%;
    box-sizing: border-box;

    min-height: var(--wc-input-height);
    padding: var(--wc-input-padding-y) var(--wc-input-padding-x);

    font: inherit;
    color: var(--wc-input-color);

    background: var(--wc-input-background);

    border-width: var(--wc-input-border-width);
    border-style: var(--wc-input-border-style);
    border-color: var(--wc-input-border-color);
    border-radius: var(--wc-input-radius);

    box-shadow: var(--wc-input-shadow);

    margin: 0;
    line-height: normal;

    transition:
        border-color var(--wc-input-transition),
        box-shadow var(--wc-input-transition),
        background-color var(--wc-input-transition);
}

.woocommerce form .form-row textarea {
    min-height: 8rem;
    resize: vertical;
    line-height: 1.5;
}

.woocommerce form .form-row select {
    cursor: pointer;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;

    border-color: var(--wc-input-focus-border-color);
    box-shadow: var(--wc-input-focus-shadow);
}
/* ==========================================================================
   03 - Labels
   ========================================================================== */

.woocommerce form .form-row label {
    display: block;
    margin-bottom: var(--wc-label-margin-bottom);

    font-size: var(--wc-label-font-size);
    font-weight: var(--wc-label-font-weight);
    line-height: 1.4;
    color: var(--wc-label-color);
}

.woocommerce form .form-row label.inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.woocommerce form .form-row label.hidden {
    visibility: hidden;
}
/* ==========================================================================
   04 - Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;

    margin-bottom: var(--wc-space-lg);
    padding: var(--wc-notice-padding-y) var(--wc-notice-padding-x);

    border-left: 4px solid;
    border-radius: var(--wc-notice-radius);

    list-style: none;

    box-shadow: var(--wc-shadow-sm);
}

.woocommerce-message {
    background: var(--wc-notice-success-bg);
    border-color: var(--wc-notice-success-border);
    color: var(--wc-notice-success-color);
}

.woocommerce-info {
    background: var(--wc-notice-info-bg);
    border-color: var(--wc-notice-info-border);
    color: var(--wc-notice-info-color);
}

.woocommerce-error {
    background: var(--wc-notice-error-bg);
    border-color: var(--wc-notice-error-border);
    color: var(--wc-notice-error-color);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}
/* Notice actions */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-space-md);

    flex-wrap: wrap;

}

/* Notice button */

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {

    flex-shrink: 0;

}
/* ==========================================================================
   05 - Tables
   ========================================================================== */

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    border: var(--wc-table-border-width) solid var(--wc-table-border-color);
    border-radius: var(--wc-table-radius);

    overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: var(--wc-table-cell-padding-y) var(--wc-table-cell-padding-x);
    vertical-align: middle;
}

.woocommerce table.shop_table th {
    background: var(--wc-table-header-bg);
    color: var(--wc-table-header-color);

    font-weight: 600;
    text-align: left;
}

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

.woocommerce table.shop_table tbody tr:hover {
    background: var(--wc-table-row-hover);
}
/* Responsive content */

.woocommerce table.shop_table td {

    vertical-align: middle;

}

/* Order numbers */

.woocommerce-orders-table__cell-order-number a {

    font-weight: var(--wc-font-weight-semibold);

    text-decoration: none;

}

.woocommerce-orders-table__cell-order-number a:hover {

    text-decoration: underline;

}

/* Actions */

.woocommerce-orders-table__cell-order-actions {

    white-space: nowrap;

}

.woocommerce-orders-table__cell-order-actions .button {

    margin: 0;

}
/* ==========================================================================
   06 - Quantity
   ========================================================================== */

.woocommerce .quantity .qty {
    width: var(--wc-quantity-width);

    min-height: var(--wc-input-height);

    padding: var(--wc-input-padding-y)
             var(--wc-input-padding-x);

    text-align: var(--wc-quantity-text-align);

    border-width: var(--wc-input-border-width);
    border-style: var(--wc-input-border-style);
    border-color: var(--wc-input-border-color);
    border-radius: var(--wc-input-radius);

    background: var(--wc-input-background);
    color: var(--wc-input-color);

    box-shadow: var(--wc-input-shadow);

    transition:
        border-color var(--wc-input-transition),
        box-shadow var(--wc-input-transition);
}

.woocommerce .quantity .qty:focus {
    outline: none;

    border-color: var(--wc-input-focus-border-color);
    box-shadow: var(--wc-input-focus-shadow);
}
/* ==========================================================================
   07 - Panels (WooCommerce Blocks)
   ========================================================================== */

.wc-block-components-panel {
    background: var(--wc-panel-background);

    border:
        var(--wc-panel-border-width)
        var(--wc-panel-border-style)
        var(--wc-panel-border-color);

    border-radius: var(--wc-panel-radius);

    overflow: hidden;
}

.wc-block-components-panel__button {
    padding:
        var(--wc-panel-header-padding-y)
        var(--wc-panel-header-padding-x);

    font-weight: var(--wc-panel-header-font-weight);
}

.wc-block-components-panel__content {
    padding:
        var(--wc-panel-content-padding-y)
        var(--wc-panel-content-padding-x);
}
/* ==========================================================================
   08 - Text Inputs (WooCommerce Blocks)
   ========================================================================== */

/* Input */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="number"] {

    height: var(--wc-input-height);

    padding:
        var(--wc-input-padding-y)
        var(--wc-input-padding-x);

    border-width: var(--wc-input-border-width);
    border-style: var(--wc-input-border-style);
    border-color: var(--wc-input-border-color);

    border-radius: var(--wc-input-radius);

    background: var(--wc-input-background);

    color: var(--wc-input-color);

    box-shadow: var(--wc-input-shadow);

    transition:
        border-color var(--wc-input-transition),
        box-shadow var(--wc-input-transition);
}


/* Focus */

.wc-block-components-text-input input:focus {

    border-color: var(--wc-input-focus-border-color);

    box-shadow: var(--wc-input-focus-shadow);

}


/* Floating label */

.wc-block-components-text-input label {

    color: var(--wc-block-input-label-color);

    font-size: var(--wc-block-input-label-size);

    font-weight: var(--wc-label-font-weight);

}
/* ==========================================================================
   09 - Totals (WooCommerce Blocks)
   ========================================================================== */

/* Totals container */

.wc-block-components-totals-wrapper {

    border-top: var(--wc-border-width) var(--wc-border-style) var(--wc-border-color);

    margin-top: var(--wc-space-lg);

    padding-top: var(--wc-space-md);

}


/* Total rows */

.wc-block-components-totals-item {

    padding-block: var(--wc-space-xs);

}


/* Labels */

.wc-block-components-totals-item__label {

    color: var(--wc-color-text);

    font-weight: var(--wc-font-weight-medium);

}


/* Values */

.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {

    color: var(--wc-color-text);

    font-weight: var(--wc-font-weight-semibold);

}


/* Final total */

.wc-block-components-totals-footer-item {

    margin-top: var(--wc-space-md);

    padding-top: var(--wc-space-md);

    border-top: var(--wc-border-width) var(--wc-border-style) var(--wc-border-color);

}

.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {

    font-size: var(--wc-font-size-lg);

    font-weight: var(--wc-font-weight-bold);

}
/* ==========================================================================
   10 - Checkboxes (WooCommerce Blocks)
   ========================================================================== */

/* Checkbox */

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {

    border: var(--wc-border-width) var(--wc-border-style) var(--wc-border-color);

    border-radius: var(--wc-radius-sm);

    background-color: var(--wc-color-surface);

    transition:
        border-color var(--wc-transition-fast),
        background-color var(--wc-transition-fast),
        box-shadow var(--wc-transition-fast);

}


/* Hover */

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:hover {

    border-color: var(--wc-color-primary);

}


/* Focus */

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus {

    border-color: var(--wc-color-primary);

    box-shadow: var(--wc-input-focus-shadow);

}


/* Checked */

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {

    background-color: var(--wc-color-primary);

    border-color: var(--wc-color-primary);

}


/* Label */

.wc-block-components-checkbox label {

    color: var(--wc-color-text);

}
/* ==========================================================================
   11 - Radio Buttons (WooCommerce Blocks)
   ========================================================================== */

/* Radio */

.wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"] {

    border: var(--wc-border-width) var(--wc-border-style) var(--wc-border-color);

    background-color: var(--wc-color-surface);

    transition:
        border-color var(--wc-transition-fast),
        background-color var(--wc-transition-fast),
        box-shadow var(--wc-transition-fast);

}


/* Hover */

.wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]:hover {

    border-color: var(--wc-color-primary);

}


/* Focus */

.wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]:focus {

    border-color: var(--wc-color-primary);

    box-shadow: var(--wc-input-focus-shadow);

}


/* Checked */

.wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]:checked {

    border-color: var(--wc-color-primary);

}


/* Labels */

.wc-block-components-radio-control__option {

    color: var(--wc-color-text);

}
/* ========================================
   SHOP TOOLBAR
======================================== */

.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 1rem 0;

    border-bottom: 1px solid var(--wc-border-color);
}

.shop-toolbar__left,
.shop-toolbar__center,
.shop-toolbar__right {
    display: flex;
    align-items: center;
}

.shop-toolbar__center {
    flex: 1;
    justify-content: center;
}

.shop-toolbar__right {
    gap: 1rem;
}

.shop-toolbar a {
    text-decoration: none;
    color: inherit;
    transition: opacity .2s ease;
}

.shop-toolbar a:hover {
    opacity: .7;
}

.shop-toolbar__count {
    margin-left: .35rem;
    font-size: .85rem;
    font-weight: 600;
}
/* ========================================
   ICONS
======================================== */

.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon * {
    stroke: currentColor;
}
.shop-toolbar__back,
.shop-toolbar__account,
.shop-toolbar__cart {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
}

.shop-toolbar__left,
.shop-toolbar__right {
    display: flex;
    align-items: center;
}

.shop-toolbar__center {
    flex: 1;
}
.ebooks-page > .shop-toolbar {
    text-align: initial;
}
.shop-toolbar__cart {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-toolbar__cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-toolbar__count {
    position: absolute;
    top: -6px;
    right: -8px;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    background: var(--wc-color-accent);
    color: #fff;
}
.shop-toolbar__count:empty,
.shop-toolbar__count:not(:empty):where(:has(+ *)) {
    /* ne rien mettre ici */
}
.shop-toolbar__count.is-empty {
    display: none;
}