/* ==========================================================================
   Her Peptides — commerce shell (shared by cart.html + checkout.html)
   Depends on style.css for the design tokens (--pink, --ink, --serif …), the
   shared header/footer and the .eyebrow / .btn-pink helpers, and on shop.css
   for .crumbs, .tag, .shop-trust, .shop-card and .add-btn.

   Everything here is keyed off the class names WooCommerce actually prints
   (.shop_table, .form-row, .input-text, .quantity, .woocommerce-message …)
   so the WP conversion needs no markup overrides — only the wrappers whose
   names start with .cm- are ours.
   ========================================================================== */

.cart-page,
.checkout-page,
.profile-page {
    background: #fff;
}

.cart-page .section,
.checkout-page .section,
.profile-page .section {
    padding: 48px 0 0;
    scroll-margin-top: 110px;
}

.cart-page:has(.woocommerce-notices-wrapper:not(:empty)) .section {
    padding-top: 24px !important;
}

/* shop.css already squares off the pill buttons for shop templates */
.cart-page .btn-pink,
.checkout-page .btn-pink,
.profile-page .btn-pink {
    border-radius: 10px;
}

/* ================================ page head ================================ */

.cm-head {
    position: relative;
    overflow: hidden;
    padding: 22px 0 30px;
    background: #fdeef4;
}

.cm-head::after {
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 92, 150, .10), transparent 68%);
    content: "";
    pointer-events: none;
}

.cm-head .container {
    position: relative;
    z-index: 2;
}

.cm-head .crumbs {
    margin-bottom: 16px;
}

.cm-head h1 {
    margin: 6px 0 4px;
    font-size: 40px;
    line-height: 1.12;
}

.cm-head h1 span {
    color: var(--pink);
}

.cm-head-sub {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
}

.cm-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

/* ============================== step indicator ============================== */

.cm-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a2969b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}

.cm-steps li::after {
    width: 26px;
    height: 1px;
    background: #eed7e2;
    content: "";
}

.cm-steps li:last-child::after {
    display: none;
}

.cm-steps .cm-step-num {
    display: grid;
    width: 26px;
    height: 26px;
    place-content: center;
    border: 1.5px solid #eed7e2;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    line-height: 1;
}

.cm-steps .is-done {
    color: var(--pink-dark);
}

.cm-steps .is-done .cm-step-num {
    border-color: var(--pink);
    color: var(--pink);
    background: var(--pink-tint);
}

.cm-steps .is-current {
    color: var(--ink);
}

.cm-steps .is-current .cm-step-num {
    border-color: var(--pink);
    color: #fff;
    background: var(--pink);
    box-shadow: 0 4px 12px rgba(224, 92, 150, .32);
}

/* ================================= notices ================================= */

.woocommerce-notices-wrapper:not(:empty) {
    margin-bottom: 22px;
}

.cart-page .woocommerce-notices-wrapper:not(:empty) {
    margin: 16px auto 0 auto;
}

.cart-page .woocommerce .woocommerce-message,
.cart-page .woocommerce .woocommerce-info,
.cart-page .woocommerce .woocommerce-error,
.cart-page .woocommerce-page .woocommerce-message {
    margin-bottom: 0;
}

/*
 * The single-product placement: .hp-notices is the theme's container around
 * Woo's own wrapper, which it prints itself. Spacing hangs off the inner
 * element so an empty queue leaves no gap between breadcrumbs and the product.
 */
.hp-notices .woocommerce-notices-wrapper:not(:empty) {
    margin-top: 18px;
}

.woocommerce-notices-wrapper {
    max-width: 1306px;
    margin: auto;
}

/*
 * A notice is a card, like everything else on these pages: white panel, soft
 * border, rounded corners, and the state carried by a circular icon badge rather
 * than by flooding the whole bar with colour. The badge palette is the one the
 * product page already uses for its stock pill, so a "added to cart" message and
 * the "In stock" chip beside it read as the same system.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(190, 130, 155, .08);
    padding: 14px 18px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    list-style: none;
}

/*
 * `nowrap` is load-bearing. The message text is an anonymous flex item, and a
 * wrapping flex line moves an item that does not fit onto its own row *before*
 * it shrinks it — so in a wide container this looked fine, while in the
 * checkout's 434px order column it put the icon on one line and the sentence on
 * the next. With nowrap the text shrinks and wraps inside itself instead, and
 * the badge stays beside its first line. A grid would fix that too, but these
 * notices carry a trailing <a> or <button> that has to sit next to the text,
 * and grid would give it a column of its own.
 */
.woocommerce-message,
.woocommerce-info {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

/* the error notice is a <ul>: every <li> stacks in the second column */
.woocommerce-error {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
}

.woocommerce-error li {
    grid-column: 2;
    margin: 0;
}

/*
 * Woo adds a clearfix ::after to these. Inside a flex or grid container that
 * stops being a clearfix and becomes a stray item, taking a cell of its own.
 */
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
    display: none;
}

/*
 * Woo gives the error tabindex="-1" and focuses it so screen readers announce
 * it, which makes the browser paint its default focus ring — a hard dark
 * rectangle across the card.
 *
 * Suppressing it costs nothing: tabindex="-1" keeps the notice out of the tab
 * order, so no keyboard user can land here and need the ring to know where they
 * are. The announcement comes from role="alert", which is unaffected.
 */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
    outline: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    flex: none;
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pink-tint);
    color: var(--pink);
    font-family: icons;
    font-size: 16px;
    line-height: 1;
    content: "\f2e8"; /* info-circle */
}

.woocommerce-error::before {
    grid-column: 1;
    grid-row: 1;
}

.woocommerce-info {
    border-color: var(--pink-soft);
    background: #fdf8fa;
}

.woocommerce-message {
    border-color: #cfe8db;
    background: #f6fbf8;
}

.woocommerce-message::before {
    background: #e6f4ec;
    color: #3d8f68;
    content: "\f47d"; /* tick-circle */
}

.woocommerce-error {
    border-color: #f3d4d4;
    background: #fdf7f7;
}

.woocommerce-error::before {
    background: #fbeaea;
    color: #c8484c;
    content: "\f209"; /* danger */
}

/*
 * Woo prints the action after the message, so auto margin is what pins it to the
 * right edge — there is no element wrapping the text to give flex: 1 to.
 */
.woocommerce-message .button,
.woocommerce-info .button {
    flex: none;
    margin-left: auto;
    border-radius: 40px;
    padding: 9px 20px;
    font-size: 13.5px;
}

/* the error notice is a grid, so the button takes the message column */
.woocommerce-error .button {
    grid-column: 2;
    justify-self: start;
    border-radius: 40px;
    padding: 9px 20px;
    font-size: 13.5px;
}

/* Narrow: the action drops to its own full-width row instead of being squeezed. */
@media (max-width: 575.98px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        gap: 10px;
        padding: 13px 14px;
        font-size: 13.5px;
    }

    /* room is short enough that the action earns its own row again */
    .woocommerce-message,
    .woocommerce-info {
        flex-wrap: wrap;
    }

    .woocommerce-message .button,
    .woocommerce-info .button {
        width: 100%;
        margin-left: 0;
    }

    .woocommerce-error .button {
        justify-self: stretch;
        width: 100%;
    }
}

/* ================================== panels ================================== */

.cm-panel {
    border: 1px solid #f7e7ee;
    border-radius: 18px;
    background: #fff;
    padding: 22px 22px 24px;
}

.cm-panel + .cm-panel {
    margin-top: 20px;
}

.cm-panel--tint {
    background: #fdf9fb;
}

.cm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.cm-panel-head h2,
.cm-panel-head h3 {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}

.cm-panel-head .cm-step-badge,
.cm-panel-title .cm-step-badge {
    display: grid;
    flex: none;
    width: 26px;
    height: 26px;
    place-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--pink);
    font-size: 12px;
    font-weight: 700;
}

.cm-panel-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.cm-hint {
    margin: -8px 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ================================= buttons ================================= */

/* WooCommerce prints .button on nearly every submit — give it our primary look
   and let .cm-btn--ghost / --line opt out. */
.cart-page .button,
.checkout-page .button,
.profile-page .button,
.cm-btn {
    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-align: center;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.cart-page .button:hover,
.checkout-page .button:hover,
.profile-page .button:hover,
.cm-btn:hover {
    border-color: var(--pink-dark);
    color: #fff;
    background: var(--pink-dark);
}

.cart-page .button:disabled,
.checkout-page .button:disabled,
.profile-page .button:disabled,
.cm-btn:disabled {
    border-color: #e9dbe2;
    background: #e3d6dc;
    cursor: not-allowed;
}

.cm-btn--ghost,
.cart-page .button.cm-btn--ghost,
.checkout-page .button.cm-btn--ghost,
.profile-page .button.cm-btn--ghost {
    border-color: #eedbe4;
    color: var(--pink-dark);
    background: #fff;
}

.cm-btn--ghost:hover,
.cart-page .button.cm-btn--ghost:hover,
.checkout-page .button.cm-btn--ghost:hover,
.profile-page .button.cm-btn--ghost:hover {
    border-color: var(--pink);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

/* the ghost rules above reset background, so a disabled ghost needs its own */
.cm-btn--ghost:disabled,
.cart-page .button.cm-btn--ghost:disabled,
.checkout-page .button.cm-btn--ghost:disabled,
.profile-page .button.cm-btn--ghost:disabled {
    border-color: #f1e6ea;
    color: #c3b8bd;
    background: #fbf8f9;
    line-height: 23px;
}

.cm-btn--block {
    width: 100%;
}

.cm-btn--lg {
    padding: 14px 26px;
    font-size: 15.5px;
}

.cm-btn i {
    font-size: 17px;
    line-height: 1;
}

.cm-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pink-dark);
    font-size: 13.5px;
    font-weight: 600;
}

.cm-link:hover {
    color: var(--pink);
}

.cm-link i {
    font-size: 16px;
}

/* ================================ form fields ================================ */

/* WooCommerce lays checkout fields out with .form-row-first / -last / -wide;
   mirroring that on a 12-track grid means the WP build needs no field hacks. */
.cm-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px 16px;
}

/* The `.woocommerce` prefix is not decoration: woocommerce.css pads and spaces
   every row at `.woocommerce form .form-row`, one class deeper than a bare
   `.cm-fields .form-row`, so without it the plugin's 3px padding and 6px
   bottom margin land on top of the grid gap. Same reason for the field boxes
   and the label line-height further down. */
.cm-fields .form-row,
.woocommerce .cm-fields .form-row {
    grid-column: span 12;
    margin: 0;
    padding: 0;
}

.cm-fields .form-row-first,
.cm-fields .form-row-last,
.woocommerce .cm-fields .form-row-first,
.woocommerce .cm-fields .form-row-last {
    grid-column: span 6;
}

.cm-fields .form-row-wide,
.cm-fields .form-row-full,
.woocommerce .cm-fields .form-row-wide,
.woocommerce .cm-fields .form-row-full {
    grid-column: span 12;
}

.cm-fields .form-row-third,
.woocommerce .cm-fields .form-row-third {
    grid-column: span 4;
}

.form-row > label {
    display: block;
    margin-bottom: 7px;
    color: #4c4447;
    font-size: 13px;
    font-weight: 600;
}

/* woocommerce.css sets `line-height: 2` here — 26px against a 13px label. */
.woocommerce form .form-row label {
    line-height: 1.6;
}

.form-row .required,
.form-row abbr.required {
    border: 0;
    color: var(--pink);
    text-decoration: none;
}

.form-row .optional {
    color: #a2969b;
    font-weight: 500;
}

.woocommerce-input-wrapper {
    display: block;
    position: relative;
}

/* `input.` matters: WooCommerce puts the same `input-text` class on the
   quantity *wrapper* as on the field inside it, and a bare .input-text rule
   turns that wrapper into a full-width block, stacking the +/- buttons.

   The `.woocommerce form .form-row` variants matter for a different reason:
   woocommerce.css styles every checkout field at exactly that specificity
   (0,3,1) with its own 4px radius, .5em padding and near-black border. The
   theme's `.checkout-page input.input-text` is (0,2,1) and loses, which left
   every field on the checkout looking like an unstyled browser control. */
.cart-page input.input-text,
.checkout-page input.input-text,
.profile-page input.input-text,
.cart-page select,
.checkout-page select,
.profile-page select,
.cart-page textarea,
.checkout-page textarea,
.profile-page textarea,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.cm-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #f0d9e3;
    border-radius: 10px;
    color: var(--ink);
    background: #fff;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cart-page textarea,
.checkout-page textarea,
.profile-page textarea,
.woocommerce form .form-row textarea {
    min-height: 96px;
    resize: vertical;
}

.cart-page select,
.checkout-page select,
.profile-page select,
.woocommerce form .form-row select {
    padding-right: 38px;
    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 13 6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
    appearance: none;
}

.cart-page input.input-text:focus,
.checkout-page input.input-text:focus,
.profile-page input.input-text:focus,
.cart-page select:focus,
.checkout-page select:focus,
.profile-page select:focus,
.cart-page textarea:focus,
.checkout-page textarea:focus,
.profile-page textarea:focus,
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.cm-input:focus {
    border-color: var(--pink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(224, 92, 150, .13);
}

.cart-page input.input-text::placeholder,
.checkout-page input.input-text::placeholder,
.profile-page input.input-text::placeholder,
.cart-page textarea::placeholder,
.checkout-page textarea::placeholder,
.profile-page textarea::placeholder {
    color: #b8adb2;
    font-weight: 500;
}

/*
 * Woo's select2 for country/state, sized to match a native field exactly:
 * 26px line + 2 × 8px padding + 2 × 1px border = the 44px the inputs get.
 * It lives here rather than in checkout.css because the account's address form
 * prints the same control.
 */
.cart-page .select2-container--default .select2-selection--single,
.checkout-page .select2-container--default .select2-selection--single,
.profile-page .select2-container--default .select2-selection--single {
    height: auto;
    border: 1px solid #f0d9e3;
    border-radius: 10px;
    background: #fff;
    padding: 8px 4px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cart-page .select2-container--default.select2-container--focus .select2-selection--single,
.cart-page .select2-container--default.select2-container--open .select2-selection--single,
.checkout-page .select2-container--default.select2-container--focus .select2-selection--single,
.checkout-page .select2-container--default.select2-container--open .select2-selection--single,
.profile-page .select2-container--default.select2-container--focus .select2-selection--single,
.profile-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(224, 92, 150, .13);
}

/* select2 pads this itself, which would stack on the container's own padding */
.cart-page .select2-container--default .select2-selection--single .select2-selection__rendered,
.checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered,
.profile-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 34px 0 10px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
}

/* swap select2's grey triangle for the chevron the native selects carry */
.cart-page .select2-container--default .select2-selection--single .select2-selection__arrow,
.checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow,
.profile-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 8px;
    width: 14px;
    height: 100%;
    background: 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") center / 14px no-repeat;
}

.cart-page .select2-container--default .select2-selection--single .select2-selection__arrow b,
.checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow b,
.profile-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

/* Woo's own validation classes */
.form-row.woocommerce-invalid input.input-text,
.form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: #d97078;
    background: #fffafa;
}

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

/* Order item meta on the thank-you page and account order view. Same shape as
   the cart's dl.variation, same wpautop <p> inside each value. */
.wc-item-meta {
    margin: 6px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
}

.wc-item-meta li {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 10px;
}

.wc-item-meta .wc-item-meta-label {
    font-weight: 600;
}

.wc-item-meta p {
    margin: 0;
    font-weight: 500;
}

/* ------------------------- order-details line item ------------------------- */

/*
 * woocommerce/order/order-details-item.php wraps the product cell in this, so
 * the row reads as thumbnail + name the way the design draws it. Scoped to the
 * table rather than to a page, because `.acc-item` is also the mobile
 * navigation drawer's accordion row (navigation.css) — unscoped, a flex row
 * here lays every open drawer sub-menu out beside its own button.
 */
.order_details .acc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.order_details .acc-item-thumb {
    flex: none;
    width: 54px;
    height: 54px;
    padding: 5px;
    border: 1px solid #f7e7ee;
    border-radius: 11px;
    background: linear-gradient(170deg, #fdeaf2 0%, #fbdfe9 58%, #f7d3e1 100%);
    object-fit: contain;
}

.order_details .acc-item-body {
    min-width: 0;
}

.order_details .acc-item-body > a {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.order_details .acc-item-body > a:hover {
    color: var(--pink-dark);
}

.order_details .acc-item-body .product-quantity {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.cm-field-note {
    display: block;
    margin-top: 6px;
    color: #a2969b;
    font-size: 12px;
    font-weight: 500;
}

/* ---------------------------- checkbox / radio ---------------------------- */

.cm-check,
    /* .form-row > label is display:block for field labels — a check inside a
       form row (Woo's terms + save-card rows) has to win that back */
.form-row > label.cm-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 0;
    color: #574f52;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    cursor: pointer;
}

.cm-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cm-box {
    position: relative;
    display: block;
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1.5px solid #d9c7d0;
    border-radius: 5px;
    background: #fff;
    transition: border-color .2s ease, background .2s ease;
}

.cm-box::after {
    position: absolute;
    top: 3px;
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    content: "";
    transform: rotate(45deg);
}

.cm-check input:checked + .cm-box {
    border-color: var(--pink);
    background: var(--pink);
}

.cm-check input:checked + .cm-box::after {
    opacity: 1;
}

.cm-check input:focus-visible + .cm-box {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}

.cm-radio-dot {
    position: relative;
    display: block;
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1.5px solid #d9c7d0;
    border-radius: 50%;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cm-radio-dot::after {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pink);
    opacity: 0;
    content: "";
    transform: scale(.4);
    transition: opacity .2s ease, transform .2s ease;
}

input:checked + .cm-radio-dot {
    border-color: var(--pink);
}

input:checked + .cm-radio-dot::after {
    opacity: 1;
    transform: scale(1);
}

input:focus-visible + .cm-radio-dot {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}

/* ============================= quantity stepper ============================= */

.quantity,
.qty-control {
    display: inline-flex;
    flex: none;
    align-items: center;
    overflow: hidden;
    border: 1.5px solid #eedbe4;
    border-radius: 10px;
    background: #fff;
}

.qty-btn {
    display: grid;
    width: 36px;
    height: 40px;
    padding: 0;
    border: 0;
    place-content: center;
    color: var(--pink-dark);
    background: #fff;
    font-size: 15px;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}

.qty-btn:hover:not(:disabled) {
    background: var(--pink-tint);
}

.qty-btn:disabled {
    color: #d5c8ce;
    cursor: not-allowed;
}

.qty-btn:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: -2px;
}

.quantity input.qty,
.qty-control input.qty {
    width: 46px;
    height: 40px;
    padding: 0;
    border: 0;
    border-right: 1.5px solid #f5e9ee;
    border-left: 1.5px solid #f5e9ee;
    border-radius: 0;
    color: var(--ink);
    background: #fff;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.quantity input.qty:focus,
.qty-control input.qty:focus {
    outline: none;
    background: var(--pink-tint);
    box-shadow: none;
}

.qty-control.is-busy {
    opacity: .55;
    pointer-events: none;
}

/* ================================ price bits ================================ */

.woocommerce-Price-amount {
    font-weight: 600;
    white-space: nowrap;
}

.woocommerce-Price-currencySymbol {
    margin-right: 1px;
}

del .woocommerce-Price-amount,
.cm-was {
    color: #b0a4a9;
    font-weight: 500;
    text-decoration: line-through;
}

ins,
.cm-now {
    color: var(--ink);
    text-decoration: none;
}

.cm-save {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 30px;
    color: #3d7f61;
    background: #e6f4ec;
    font-size: 11px;
    font-weight: 700;
}

/* ================================ shop tables ================================ */

/*
 * `.woocommerce table.shop_table` in the plugin's stylesheet — the same (0,2,1)
 * the cell rules below have to match — draws a 1px box with a 5px radius around
 * every shop table, switches to `border-collapse: separate` and adds
 * `margin: 0 -1px 24px 0`. That is what boxed the checkout's order review in an
 * outlined grid and pushed it 1px off its card. cart.css already undid it for
 * the two cart tables; doing it here covers the review order table and any shop
 * table an extension prints.
 */
.shop_table,
.woocommerce table.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
}

/*
 * The `.woocommerce table.shop_table th/td` pair in the plugin's stylesheet
 * carries one class more than a bare `.shop_table th` would, so its padding and
 * line-height win outright. Every rule in this file that dresses a shop table
 * cell therefore matches the plugin selector for selector; the theme's styles
 * print after the plugin's, so an equal-specificity rule takes the tie.
 */
.shop_table th,
.woocommerce table.shop_table th {
    padding: 0 0 12px;
    border-bottom: 1px solid #f2dbe4;
    color: #6d6367;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
    text-align: left;
    text-transform: uppercase;
}

.shop_table td,
.woocommerce table.shop_table td {
    padding: 16px 0;
    border-top: 0;
    border-bottom: 1px solid #f7ecf1;
    vertical-align: middle;
}

.shop_table tr:last-child td {
    border-bottom: 0;
}

/* ============================== coupon control ============================== */

.coupon,
.cm-coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.coupon > label,
.cm-coupon > label {
    flex: none;
    margin: 0;
    color: #4c4447;
    font-size: 13px;
    font-weight: 600;
}

.coupon input.input-text,
.cm-coupon input.input-text {
    flex: 1 1 170px;
    width: auto;
    min-width: 0;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.coupon input.input-text::placeholder {
    letter-spacing: normal;
    text-transform: none;
}

.coupon .button,
.cm-coupon .button {
    flex: none;
}

.cm-coupon-msg {
    flex: 1 0 100%;
    margin: 0;
    color: #3d8f68;
    font-size: 13px;
    font-weight: 600;
}

.cm-coupon-msg:empty {
    display: none;
}

.cm-coupon-msg.is-error {
    color: #c8484c;
}

/* applied coupon chips (mirrors the .cart-discount rows Woo renders) */
.cm-coupon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.cm-coupon-chips:empty {
    display: none;
}

.cm-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border: 1px dashed var(--pink);
    border-radius: 30px;
    color: var(--pink-dark);
    background: var(--pink-tint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.woocommerce-remove-coupon {
    place-content: center;
    border: 0;
    color: #fff;
    background: var(--pink);
    font-size: 11px;
    line-height: 1;
    width: auto;
    border-radius: 12px;
    height: auto;
    padding: 4px 6px;
    max-width: 80px;
    display: inline-block;
    text-align: center;
    float: right;
    margin-left: 4px;
}

.woocommerce-remove-coupon:hover {
    color: #fff;
    background: var(--pink-dark);
}

/* =========================== shipping method list =========================== */

.woocommerce-shipping-methods,
.cm-ship-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-shipping-methods li + li,
.cm-ship-list li + li {
    margin-top: 8px;
}

/* ------------------------- woocommerce's own markup ------------------------- */

/*
 * woocommerce.css styles this list through its id —
 * `.woocommerce ul#shipping_method li label { display: inline }` at (1,1,3) —
 * and an id beats any number of classes. So the theme's rules carry the id too:
 * the `ul#shipping_method … label.cm-ship-opt` form ties at (1,1,3) and wins on
 * source order, and the `.woocommerce`-prefixed form wins outright at (1,2,3)
 * wherever that wrapper class is present. Both are listed so the picker looks
 * the same in the cart and in the checkout's order review.
 */
ul#shipping_method.cm-ship-list,
.woocommerce ul#shipping_method.cm-ship-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#shipping_method.cm-ship-list li,
.woocommerce ul#shipping_method.cm-ship-list li {
    margin: 0;
    padding: 0;
    line-height: inherit;
    list-style: none;
}

ul#shipping_method.cm-ship-list li + li,
.woocommerce ul#shipping_method.cm-ship-list li + li {
    margin-top: 8px;
}

ul#shipping_method.cm-ship-list li input.shipping_method,
.woocommerce ul#shipping_method.cm-ship-list li input.shipping_method {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

ul#shipping_method li label.cm-ship-opt,
.woocommerce ul#shipping_method li label.cm-ship-opt {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 11px 13px;
    border: 1.5px solid #f2dbe4;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

ul#shipping_method li label.cm-ship-opt:hover,
.woocommerce ul#shipping_method li label.cm-ship-opt:hover {
    border-color: var(--pink-soft);
    background: #fffafc;
}

ul#shipping_method li label.cm-ship-opt:has(input:checked),
.woocommerce ul#shipping_method li label.cm-ship-opt:has(input:checked) {
    border-color: var(--pink);
    background: var(--pink-tint);
}

.cm-ship-opt .cm-radio-dot {
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* A single available method is printed as a hidden input — no picker needed. */
.cm-ship-opt:has(input[type="hidden"]) .cm-radio-dot {
    display: none;
}

.cm-ship-body {
    flex: 1;
    min-width: 0;
}

.cm-ship-name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
}

.cm-ship-eta {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.cm-ship-price {
    flex: none;
    color: var(--pink-dark);
    font-weight: 700;
    white-space: nowrap;
}

.cm-ship-free {
    color: #3d8f68;
}

.woocommerce-shipping-destination {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/*
 * The design runs "Shipping to ON, Canada. Change address" as one sentence,
 * but core prints the destination in a <p> and the toggle inside the calculator
 * <form> that follows it. Both are made inline so the two read as one line; the
 * panel the toggle opens is still a block, and still starts hidden.
 */
.cart_totals .woocommerce-shipping-destination,
.cart_totals .woocommerce-shipping-calculator {
    display: inline;
}

/*
 * The plugin styles this button — and hangs a WooCommerce-font arrow off its
 * ::after — through `.woocommerce-cart .cart-collaterals
 * .shipping-calculator-button` at (0,3,0), so the theme's selectors carry the
 * same ancestors plus .cart_totals to land at (0,4,0) and win.
 */
.cart-collaterals .cart_totals .shipping-calculator-button {
    display: inline;
    margin-top: 0;
    color: var(--pink-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cart-collaterals .cart_totals .shipping-calculator-button::after {
    content: none;
    margin-left: 0;
}

.cart-collaterals .cart_totals .shipping-calculator-form {
    display: block;
    margin: 12px 0 0;
}

.woocommerce-shipping-destination strong {
    color: var(--ink);
}

.shipping-calculator-button {
    color: var(--pink-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.shipping-calculator-form {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

/* ============================== reassurance bits ============================== */

.cm-secure {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.cm-secure i {
    flex: none;
    margin-top: 1px;
    color: var(--pink);
    font-size: 16px;
}

.cm-paycards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.cm-paycards li {
    display: grid;
    min-width: 46px;
    height: 28px;
    place-content: center;
    border: 1px solid #f2dbe4;
    border-radius: 6px;
    background: #fff;
    padding: 0 8px;
    color: #7a7075;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
}

.cm-assure {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.cm-assure li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-assure i {
    display: grid;
    flex: none;
    width: 38px;
    height: 38px;
    place-content: center;
    border-radius: 50%;
    color: var(--pink);
    background: var(--pink-tint);
    font-size: 18px;
    line-height: 1;
}

.cm-assure strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.cm-assure span {
    color: #8b8085;
    font-size: 12px;
}

/* ================================= a11y bits ================================= */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

#coupon-error-notice {
    color: #e05c96;
    font-size: 13px;
    font-style: italic;
}

/* ================================ responsive ================================ */

@media (max-width: 991.98px) {
    .cm-head h1 {
        font-size: 33px;
    }

    .cm-head-top {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .cm-head {
        padding-bottom: 24px;
    }

    .cm-head h1 {
        font-size: 28px;
    }

    .cm-panel {
        padding: 18px 16px 20px;
        border-radius: 14px;
    }

    .cm-fields .form-row-first,
    .cm-fields .form-row-last,
    .cm-fields .form-row-third,
    .woocommerce .cm-fields .form-row-first,
    .woocommerce .cm-fields .form-row-last,
    .woocommerce .cm-fields .form-row-third {
        grid-column: span 12;
    }

    /* the rail collapses to labels only so the row still fits a phone */
    .cm-steps li span:not(.cm-step-num) {
        display: none;
    }

    .cm-steps li.is-current span:not(.cm-step-num) {
        display: inline;
    }

    .cm-steps li::after {
        width: 16px;
    }

    #cart .cm-panel {
        padding: 12px;
    }

    #cart {
        padding: 12px 0;
    }

    .cart-foot {
        margin-top: 8px;
    }

    .cart-collaterals {
        margin-top: 0 !important;
    }

    .cart-collaterals .cart_totals h2 {
        margin-bottom: 4px;
    }

    .cart-collaterals .wc-proceed-to-checkout {
        padding: 0 !important;
        margin: 0 !important;
    }

    .cm-secure {
        margin-top: 0;
    }

    .cm-panel + .cm-panel {
        margin-top: 12px;
    }
}

@media (max-width: 575.98px) {
    .coupon input.input-text,
    .cm-coupon input.input-text {
        flex: 1 0 100%;
    }

    .coupon .button,
    .cm-coupon .button {
        width: 100%;
    }

    .woocommerce-dashboard .cm-head {
        display: none;
    }

    .woocommerce-dashboard #account {
        padding-top: 24px;
    }

    .woocommerce-dashboard #account .col-lg-9 {
        margin-top: 0;
    }
}