/* ==========================================================================
   Make My Theme — woocommerce.css
   WooCommerce overrides to match the Make My design system.
   ========================================================================== */

/* ── General resets ─────────────────────────────────────────────────────────── */

.woocommerce,
.woocommerce-page {
    font-family: var(--font-sans);
}

/* WooCommerce's `.button` markup is comma-joined into design-base.css's
   canonical `.btn` / `.btn--primary` rules (efficiency #229) — there is no
   button body in this sheet. Only placement stays here (the products-grid
   button below). */


/* ── Notices ───────────────────────────────────────────────────────────────────
   ONE notice design, everywhere WooCommerce prints one — the basket and
   checkout, the account pages, a product page's "added to basket" (Design.md
   §7.11, 2026-09-29): a 2px left edge in the signal colour on a 6% wash of
   the same colour, Ink text, square corners, no box. An info notice has no
   signal colour, so it is the Pebble notice (§14.4) with a Rule Strong edge.
   journey.css adds only the journey's page-width placement. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 0 0 var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border: 0;
    border-left: 2px solid var(--rule-strong);
    border-radius: 0;
    background: var(--paper-soft);
    font-size: var(--fs-14);
    line-height: var(--lh-body);
    color: var(--ink);
    list-style: none;
}

.woocommerce-error {
    border-left-color: var(--err);
    background: color-mix(in oklch, var(--err) 6%, var(--paper));
}

.woocommerce-message {
    border-left-color: var(--ok);
    background: color-mix(in oklch, var(--ok) 6%, var(--paper));
}


/* ── Shop archive ────────────────────────────────────────────────────────────── */

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    border: 1px solid var(--rule);
    overflow: hidden;
    transition: box-shadow var(--dur-base) var(--ease);
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-3);
}

.woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    padding: var(--sp-5) var(--sp-5) var(--sp-2);
    margin: 0;
}

.woocommerce ul.products li.product .price {
    padding: 0 var(--sp-5) var(--sp-4);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.woocommerce ul.products li.product .button {
    margin: 0 var(--sp-5) var(--sp-5);
    width: calc(100% - var(--sp-10));
    text-align: center;
}

/* Filter / orderby bar */
.woocommerce-ordering select {
    border: 1px solid var(--rule-interactive);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-14);
    border-radius: var(--r-sm);
    background: var(--paper);
}

.woocommerce-result-count {
    font-size: var(--fs-14);
    color: var(--ink-muted);
}


/* ── Single product ──────────────────────────────────────────────────────────── */

.woocommerce div.product {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--sp-12);
    align-items: start;
}

.woocommerce div.product div.images {
    position: sticky;
    top: calc(var(--mm-header-h) + var(--sp-4));
}

.woocommerce div.product div.images img {
    width: 100%;
    height: auto;
}

.woocommerce div.product div.summary {
    padding-top: var(--sp-4);
}

.woocommerce div.product .product_title {
    font-size: clamp(1.5rem, 3vw, var(--fs-36));
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--sp-4);
}

.woocommerce div.product .price {
    font-size: var(--fs-28);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    margin-bottom: var(--sp-6);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--ink-muted);
    line-height: var(--lh-body);
    margin-bottom: var(--sp-8);
    font-size: var(--fs-14);
}

/* Quantity */
.woocommerce div.product form.cart .qty {
    width: 70px;
    padding: 0.75rem;
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    text-align: center;
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
}

.woocommerce div.product form.cart {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
    margin-top: var(--sp-12);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    list-style: none;
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin: 0;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--accent);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: var(--sp-8) 0;
    color: var(--ink-muted);
    line-height: var(--lh-body);
}

/* Sale badge */
.woocommerce span.onsale {
    background-color: var(--accent);
    color: var(--accent-fg);
    border-radius: 0;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    min-width: auto;
    min-height: auto;
    line-height: 1;
    padding: var(--sp-1) var(--sp-3);
}


/* ── Cart & checkout ──────────────────────────────────────────────────────────
   The basket and checkout are the Theme's own templates (Theme/woocommerce/
   cart/ and checkout/), styled by journey.css — enqueued only on the journey
   pages; see Theme/inc/enqueue.php. What stays here is the generic
   WooCommerce form-row / notice / order-review-table / #payment styling,
   which the order-pay endpoint still needs because it prints WooCommerce's
   own markup. */

/* Form rows — stack label above input */
.woocommerce form .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    padding: 0;
    width: 100%;
}

/* Form-row widths — fields WooCommerce marks as `form-row-wide` (company,
   country, address lines, email, phone, notes) span the full width of any
   grid they sit in. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-half {
    width: 100%;
}
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes {
    grid-column: 1 / -1;
}

.woocommerce form .form-row label {
    display: block;
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink-muted);
}
.woocommerce form .form-row label .required {
    color: var(--err);
    text-decoration: none;
}
.woocommerce form .form-row label .optional {
    color: var(--ink-faint);
    font-weight: var(--fw-regular);
}

.woocommerce form .form-row .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-selection,
.woocommerce form .form-row select {
    display: flex;
    align-items: center;
    height: var(--h-control);
    width: 100%;
    padding: 0 var(--sp-3);
    background: var(--paper);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    color: var(--ink);
    transition: border var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.woocommerce form .form-row textarea {
    height: auto;
    min-height: 88px;
    padding-block: var(--sp-2);
    line-height: var(--lh-body);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: 0;
    border-color: var(--ink);
    box-shadow: var(--focus-ring);
}

/* Select2 container — align height/border with native input.-text */
.woocommerce form .form-row .select2-container--default .select2-selection--single {
    height: var(--h-control);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    background: var(--paper);
}
.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: var(--sp-3);
    color: var(--ink);
}
.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

/* Validation states */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: var(--err);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
    border-color: var(--rule-interactive);
}

/* Order review table inside the sticky card */
.woocommerce-checkout #order_review table.shop_table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    background: transparent;
    margin: 0;
}
.woocommerce-checkout #order_review table.shop_table thead {
    display: none;
}
.woocommerce-checkout #order_review table.shop_table tbody tr,
.woocommerce-checkout #order_review table.shop_table tfoot tr {
    border: 0;
}
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
    padding: var(--sp-2) 0;
    border: 0;
    font-size: var(--fs-14);
    background: transparent;
    color: var(--ink-soft);
}
.woocommerce-checkout #order_review table.shop_table tbody td.product-name {
    color: var(--ink);
    font-weight: var(--fw-regular);
}
.woocommerce-checkout #order_review table.shop_table tbody td.product-name .variation {
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-normal);
    color: var(--ink-muted);
}
.woocommerce-checkout #order_review table.shop_table tbody td.product-total,
.woocommerce-checkout #order_review table.shop_table tfoot td {
    text-align: right;
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
    color: var(--ink);
    white-space: nowrap;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

/* Payment methods */
.woocommerce-checkout #payment {
    background: transparent;
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
    border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
    padding: 0;
    margin: 0 0 var(--sp-4);
    border: 0;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: var(--paper);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

/* Place order carries no rule here (efficiency #229). The checkout's own button
   is theme markup — `makemy_checkout_place_order_button()` renders it as
   `.btn .btn--primary .btn--full .btn--stacked`, and `journey.css` owns its §11.4
   treatment — so this sheet's `#place_order` body was overriding nothing on the
   checkout. The one surface that still prints WooCommerce's own
   `<button class="button alt" id="place_order">` is the order-pay endpoint,
   which the `.button` join in design-base.css now covers. */


/* ── My Account ──────────────────────────────────────────────────────────────── */

/* Two-column grid only when the MyAccount navigation actually renders.
   Logged-out account surfaces (login, lost-password, reset form) share the
   woocommerce-account body class but have no nav, so an unconditional grid
   drops their content into the 220px nav track. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--sp-10);
    align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    border: 1px solid var(--rule);
    padding: var(--sp-5);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--rule);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--fs-14);
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a {
    color: var(--accent);
    padding-left: var(--sp-2);
}


/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .woocommerce div.product {
        grid-template-columns: 1fr;
    }

    .woocommerce div.product div.images {
        position: static;
    }

    .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}