/*
 * Cart page only -- enqueued conditionally on is_cart() in functions.php. v3 "Lusso italiano"
 * cart design (carrello.html handoff): paper background, white panels with a hairline border,
 * Playfair for titles and amounts, Jost for text, no radii/shadows. Desktop first, then
 * max-width:1023px (one column) and max-width:767px.
 */

.myc-cart a { text-decoration: none; }

.myc-cart { max-width: var(--myc-container-max); margin: 0 auto; padding: clamp(24px, 3vw, 40px) var(--myc-container-pad) clamp(56px, 7vw, 104px); }
/* WooCommerce core's breadcrumb (woocommerce_before_main_content, priority 20) prints before
   .myc-cart, outside its boxed container: same max-width and side padding so it lines up (DEVL-17). */
.myc-primary > .woocommerce-breadcrumb { max-width: var(--myc-container-max); margin: 0 auto; padding: 24px var(--myc-container-pad) 0; }
.myc-content:has(.myc-cart) { background: var(--myc-paper); }

.myc-cart-title.myc-cart-title { font: 400 clamp(2rem, 3.6vw, 3rem)/1.1 var(--myc-font-serif); color: var(--myc-ink); margin: 0; }
.myc-cart-count { font: 400 0.9375rem var(--myc-font-sans); color: var(--myc-grey-2); margin-left: 10px; }

.myc-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 3.5vw, 56px); align-items: start; padding-top: 24px; }
.myc-cart-sidebar { position: sticky; top: 84px; }

/* White panel: items list, upsells, summary */
.myc-cart-panel, .myc-cart-totals.myc-cart-totals { background: var(--myc-white); border: 1px solid var(--myc-line); padding: clamp(20px, 2.6vw, 32px); }
.myc-cart-panel h2, .myc-cart-totals-title.myc-cart-totals-title { font: 400 clamp(1.375rem, 2vw, 1.625rem)/1.2 var(--myc-font-serif); color: var(--myc-ink); margin: 0 0 14px; }

/* Empty-cart state (woocommerce/cart/cart-empty.php) */
.myc-cart-empty { background: var(--myc-white); border: 1px solid var(--myc-line); padding: 40px 24px; margin-top: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.myc-cart-empty-icon { width: 48px; height: 48px; border: 1px solid var(--myc-ink); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.myc-cart-empty-title { font: 400 1.375rem var(--myc-font-serif); color: var(--myc-ink); }
.myc-cart-empty-subtitle { margin: 0; font-size: 0.875rem; color: var(--myc-grey-2); line-height: 1.5; }
.myc-cart-empty-cta.myc-cart-empty-cta { margin-top: 6px; }

/* Summer closure notice (inc/cart-features.php) */
.myc-cart-closure-notice { display: flex; gap: 8px; background: var(--myc-ink); padding: 12px 14px; margin: 16px 0 0; }
.myc-cart-closure-notice-icon { font-size: 0.875rem; }
.myc-cart-closure-notice p { margin: 0; font-size: 0.875rem; color: var(--myc-text-on-dark-2); line-height: 1.5; }

/* Compact .myc-btn--outline inside the bar (global.css's .myc-content .myc-btn sizes are !important) */
.myc-btn.myc-cart-prog-act { padding: 12px 20px !important; font-size: 0.75rem !important; }

/* Volume-discount bar: shirt icons | copy + bar | CTA */
.myc-cart-prog--volume { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
.myc-cart-prog--volume.is-ok p::before { content: none; }
.myc-cart-prog-body { display: grid; gap: 10px; }
.myc-cart-prog .myc-cart-prog-note { font-size: 0.8125rem; color: var(--myc-grey-2); }
.myc-cart-prog-icons { display: flex; gap: 6px; }
.myc-cart-prog-icons i { width: 26px; height: 26px; background: var(--myc-grey-2); opacity: .45; -webkit-mask: url(../images/icons/camicia-cravatta.png) center / contain no-repeat; mask: url(../images/icons/camicia-cravatta.png) center / contain no-repeat; }
.myc-cart-prog-icons i.is-in { background: var(--myc-blue); opacity: 1; }

/* Remove confirmation (assets/js/cart-quantity-stepper.js): appended to <body>, outside .myc-cart */
.myc-confirm { border: 1px solid var(--myc-line); border-radius: 0; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--myc-white); color: var(--myc-ink); }
.myc-confirm::backdrop { background: rgb(20 24 33 / .5); }
.myc-confirm form { padding: 28px; }
.myc-confirm-title { margin: 0 0 22px; font: 400 1.375rem/1.25 var(--myc-font-serif); }
.myc-confirm-config { margin: -10px 0 22px; font: 400 0.8125rem/1.55 var(--myc-font-sans); color: var(--myc-text-body); }
.myc-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Free-shipping bar at the top of the summary box (cart-totals.php) */
.myc-cart-totals > .myc-cart-prog { border: 0; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--myc-line); }

/* WPLoyalty points messages: under the total on desktop, above the cart below 1024px */
.myc-cart-totals-loyalty:empty { display: none; }
.myc-cart-totals-loyalty { margin-top: 16px; }
/* No side padding: the summary box already has its own. */
.myc-cart-totals-loyalty .wlr-message-info { margin: 0 0 2px !important; padding: 6px 0 !important; font-size: 0.875rem !important; }
.myc-cart-totals-loyalty .wlr-message-info i { margin: 0 12px 0 0 !important; font-size: 1.375rem !important; }
@media (min-width: 1024px) {
  .myc-cart > .wlr-message-info { display: none !important; }
}

/* Item list */
.myc-cart-items { margin-top: 16px; background: var(--myc-white); border: 1px solid var(--myc-line); }
.myc-volume-progress-slot:empty + .woocommerce-cart-form .myc-cart-items { margin-top: 0; }
.myc-cart-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 22px; border-top: 1px solid var(--myc-line); }
.myc-cart-item:first-child { border-top: 0; }
.myc-cart-item-image { aspect-ratio: 4 / 5; background: #f1efeb; overflow: hidden; }
.myc-cart-item-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.myc-cart-item-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.myc-cart-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.myc-cart-item-name { font: 400 1.1875rem/1.25 var(--myc-font-serif); color: var(--myc-ink); }
.myc-cart-item-name a { color: inherit; }
/* "Modifica" link the myc plugin appends to the shirt's name (CartHooks::cartItemName) */
.myc-cart-item-name .myc-cart-item-edit { display: block; width: fit-content; margin: -7px 0 -13px; padding: 13px 28px 13px 0; font: 400 0.78125rem var(--myc-font-sans); color: var(--myc-grey-2); text-decoration: underline; text-underline-offset: 3px; }
.myc-cart-item-name .myc-cart-item-edit:hover { color: var(--myc-ink); }
.myc-cart-item-price { text-align: right; white-space: nowrap; }
.myc-cart-item-price-was { display: block; font: 400 0.8125rem var(--myc-font-sans); color: var(--myc-grey-2); text-decoration: line-through; }
.myc-cart-item-price-now { font: 400 1.3125rem var(--myc-font-serif); color: var(--myc-ink); }
.myc-cart-item-meta { font-size: 0.84375rem; font-weight: 400; color: var(--myc-text-body); line-height: 1.5; }
.myc-cart-item-config { font-size: 0.84375rem; }
/* Spec sheet: small caps label above the value (inline pairs wrapped long values under the value column). */
.myc-cart-item-config dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 24px; margin: 4px 0 0; padding: 16px 0; border-block: 1px solid var(--myc-line); }
.myc-cart-item-config dl div { display: grid; gap: 3px; align-content: start; }
.myc-cart-item-config dt { font: 400 0.75rem/1.3 var(--myc-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--myc-grey-2); }
.myc-cart-item-config dd { margin: 0; font: 400 0.875rem/1.35 var(--myc-font-sans); color: var(--myc-ink); }
/* The initials' thread colour, when the item data carries its hex (boxer). Square like everything in .myc-cart. */
.myc-cart-item-config dd .dot { display: inline-block; width: .7em; height: .7em; margin-right: .4em; border: 1px solid rgba(24,32,45,0.2); }
.myc-cart-item-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }

.myc-qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid #c9c5be; height: 36px; }
.myc-qty-stepper .quantity { display: contents; }
.myc-qty-stepper input.qty { width: 32px; border: none; background: transparent; text-align: center; font: 400 0.875rem var(--myc-font-sans); color: var(--myc-ink); padding: 0; -moz-appearance: textfield; }
.myc-qty-stepper input.qty::-webkit-inner-spin-button,
.myc-qty-stepper input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.myc-qty-btn { width: 34px; background: none; border: none; padding: 0; font: 400 1rem var(--myc-font-sans); color: var(--myc-ink); cursor: pointer; }
.myc-qty-btn:hover { background: var(--myc-paper); }
/* Core styles ".woocommerce a.remove" as a red 1em circle with !important colours: undo it for the text link. */
.myc-cart a.remove.myc-cart-item-remove { display: inline; width: auto; height: auto; font: 400 0.78125rem var(--myc-font-sans); line-height: inherit; border-radius: 0; background: none !important; color: var(--myc-grey-2) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.myc-cart a.remove.myc-cart-item-remove:hover { background: none !important; color: var(--myc-ink) !important; }
/* Touch: 44x44 tap targets for -/+ and "Rimuovi" (NEW-27); the link keeps its text look, its box grows around it. */
@media (pointer: coarse) {
  .myc-qty-stepper { height: 46px; } /* border-box: 44px buttons inside the 1px border */
  .myc-qty-btn { width: 44px; }
  .myc-qty-stepper input.qty { width: 40px; }
  .myc-cart a.remove.myc-cart-item-remove { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; }
}

/* Notes under the items (template-parts/cart/measurements-help.php) */
.myc-cart-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 16px; }
.myc-cart-note { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 18px 20px; background: var(--myc-white); border: 1px solid var(--myc-line); font-size: 0.875rem; font-weight: 400; color: var(--myc-text-body); line-height: 1.5; }
.myc-cart-note b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--myc-ink); }
.myc-cart-note a { color: var(--myc-blue); font-weight: 500; }
.myc-cart-note-ic { font-size: 1.125rem; line-height: 1.2; }

/* "Completa il look" (woocommerce/cart/cross-sells.php) */
.myc-cart-upsells { margin-top: 16px; }
.myc-cart-upsells-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.myc-cart-upsell, .myc-cart-upsell-form { display: grid; gap: 8px; align-content: start; font-size: 0.84375rem; }
.myc-cart-upsell-image { display: block; aspect-ratio: 1; background: #f1efeb; overflow: hidden; }
.myc-cart-upsell-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.myc-cart-upsell-name { line-height: 1.3; color: var(--myc-ink); }
.myc-cart-upsell-form select { width: 100%; font: 400 0.84375rem var(--myc-font-sans); color: var(--myc-ink); background: var(--myc-white); border: 1px solid #c9c5be; padding: 8px 10px; }
.myc-cart-upsell-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.myc-cart-upsell-price { color: var(--myc-ink); }
.myc-cart-upsell-add { border: 1px solid var(--myc-ink); background: none; color: var(--myc-ink); font: 500 0.75rem var(--myc-font-sans); letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; cursor: pointer; }
.myc-cart-upsell-add:hover { background: var(--myc-ink); color: var(--myc-white); }
/* "Aggiungi" only once a size is chosen: the select is required, so the browser blocks the submit too. */
.myc-cart-upsell-form:has(select:invalid) .myc-cart-upsell-add { opacity: .35; pointer-events: none; }

/* Summary (woocommerce/cart/cart-totals.php) */
/* WooCommerce core's frontend CSS floats .cart_totals right at ~53% (>=768px), a leftover of its
   own layout; ancestor-chain selector (0,3,0) beats core's (0,2,0) regardless of enqueue order. */
.myc-cart-sidebar .cart-collaterals .cart_totals,
.myc-cart-sidebar .cart-collaterals .shipping_calculator { width: 100%; float: none; }
/* (0,3,x): beats core's ".woocommerce table.shop_table" box (border, radius, separate borders, cell border-top). */
.myc-cart .cart_totals table.myc-cart-totals-table { width: 100%; border: 0; border-collapse: collapse; margin: 0; }
.myc-cart .cart_totals table.myc-cart-totals-table th, .myc-cart .cart_totals table.myc-cart-totals-table td { border: 0; }
.myc-cart-totals-table tr { display: flex; justify-content: space-between; gap: 12px; }
/* Core ships a bare "th { background: rgba(0,0,0,.025) }" site-wide: reset both cells. */
.myc-cart-totals-table th, .myc-cart-totals-table td { border: none; padding: 0 0 10px; background: none; text-align: left; font: 400 0.90625rem var(--myc-font-sans); color: var(--myc-text-body); }
.myc-cart-totals-table td { font-weight: 400; color: var(--myc-ink); text-align: right; }
/* The label keeps its width and wraps only past 55% of the row; the value takes the rest and wraps
   instead ("already included in the prices", shipping methods), so short labels stay on one line.
   width:auto undoes core's ".woocommerce-cart .cart-collaterals .cart_totals table th { width: 35% }",
   which flex would otherwise take as every label's size; (0,4,2) beats its (0,3,2). */
.myc-cart .cart-collaterals .cart_totals table.myc-cart-totals-table th { flex: 0 0 auto; width: auto; max-width: 55%; }
.myc-cart-totals-table td { flex: 1 1 0; min-width: 0; }
.myc-cart-totals-table .shipping .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.myc-cart-totals-table .shipping .woocommerce-shipping-methods li { margin: 0; }
.myc-cart-shipping-note td { display: block; width: 100%; text-align: left; font-size: 0.8125rem; color: var(--myc-grey-2); }
.myc-volume-discount-savings__note { display: block; font-size: 0.75rem; color: var(--myc-grey-2); }
.myc-cart-totals-table .order-total { align-items: baseline; border-top: 1px solid var(--myc-ink); margin-top: 6px; padding-top: 16px; }
.myc-cart-totals-table .order-total th { font: 500 0.75rem var(--myc-font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--myc-ink); }
.myc-cart-totals-table .order-total td { font: 400 2.125rem/1 var(--myc-font-serif); color: var(--myc-ink); padding-bottom: 0; }
.myc-cart-totals-vat-note { margin: 4px 0 0; text-align: right; font-size: 0.78125rem; font-weight: 400; color: var(--myc-grey-2); }
.myc-cart-totals-points { margin: 14px 0 0; padding: 10px 12px; background: var(--myc-paper); font-size: 0.8125rem; font-weight: 400; color: var(--myc-text-body); }

.myc-cart-totals .wc-proceed-to-checkout { padding: 0; margin-top: 18px; display: grid; gap: 8px; }
.myc-cart-express-title { order: 2; margin: 10px 0 0; display: flex; align-items: center; gap: 12px; font-size: 0.75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--myc-grey-2); }
.myc-cart-express-title::before, .myc-cart-express-title::after { content: ''; flex: 1; height: 1px; background: var(--myc-line); }
.myc-cart-totals .wc-proceed-to-checkout > :not(.myc-cart-checkout-btn):not(.myc-cart-express-title) { order: 3; }
/* Shown only while Stripe (or PayPal) actually renders a wallet button. */
.wc-proceed-to-checkout:not(:has(#wc-stripe-express-checkout-element:not([style*="none"]), [id^="ppc-button"]:not(:empty))) .myc-cart-express-title { display: none; }
.myc-cart-checkout-btn.myc-cart-checkout-btn { display: block; width: 100%; box-sizing: border-box; font-size: 0.8125rem; padding: 19px 20px; }
/* Payment-plan message a gateway plugin injects (e.g. Klarna's "3 rate"): just spacing. */
.cart_totals #payment-method-message { padding: .25em 0; }

.myc-cart-bnpl { margin: 10px 0 0; text-align: center; font-size: 0.8125rem; font-weight: 400; color: var(--myc-text-body); }
.myc-cart-bnpl b { font-weight: 500; }
/* Core cart-shipping.php "Shipping to …" line: myc_v3_cart_shipping_destination_note() already shows the destination in Italian. */
.woocommerce-shipping-destination { display: none; }

/* ===== One column (<1024px) ===== */
@media (max-width: 1023px) {
  .myc-cart-layout { grid-template-columns: minmax(0, 1fr); } /* minmax(0,…): a plain 1fr grows to the cart lines' min-content (page wider than the phone) */
  .myc-cart-sidebar { position: static; }
  .myc-cart-totals-loyalty { display: none; }
}

/* ===== Mobile (<768px) ===== */
@media (max-width: 767px) {
  .myc-cart .myc-stepper { display: none; }
  /* Narrower gutter: the token also drives the breadcrumb and the sticky bar's negative margins. */
  .myc-content:has(.myc-cart) { margin-left: 0; margin-right: 0; --myc-container-pad: 12px; }
  .myc-cart-panel, .myc-cart-totals.myc-cart-totals { padding-left: 16px; padding-right: 16px; }
  .myc-cart-item { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .myc-cart-prog--volume { grid-template-columns: minmax(0, 1fr); }
  .myc-cart-prog--volume .myc-cart-prog-act { justify-self: start; }
  /* Photo | name, "Modifica" and price below it; options and quantity full width under the photo:
     the body's children become cells of the item grid. */
  .myc-cart-item-body { display: contents; }
  .myc-cart-item-body > * { grid-column: 1 / -1; }
  .myc-cart-item-body > .myc-cart-item-head { grid-column: 2; flex-direction: column; justify-content: flex-start; gap: 8px; }
  .myc-cart-item-price { text-align: left; }
  .myc-cart-item-price-was { display: inline; margin-right: 6px; }
  .myc-cart-item-name { font-size: 1.0625rem; }
  .myc-cart-item-price-now { font-size: 1.125rem; }
  .myc-cart-item-config dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .myc-cart-upsells-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 6px; }

  /* WooCommerce's shop_table_responsive turns th/td into stacked blocks with a data-title
     pseudo-label below 768px: keep this table's label-left/value-right rows. */
  .myc-cart-totals-table tr { display: flex !important; justify-content: space-between !important; }
  .myc-cart-totals-table th, .myc-cart-totals-table td { display: inline !important; float: none !important; width: auto !important; padding-left: 0 !important; }
  .myc-cart-totals-table td { text-align: right !important; }
  .myc-cart-totals-table td::before { content: none !important; }
}

/* v3 (formerly v3-reskin.css): serif title; body copy and headings keep the site-wide 1.6 / 1.1
   (global.css's .myc-content rules load before this file and would lose at equal specificity). */
.myc-cart h1 { font-family: var(--myc-font-serif) !important; font-weight: 400 !important; }
.myc-cart p, .myc-cart li { font-weight: 400; line-height: 1.6; }
.myc-cart :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.1; }
.myc-cart * { border-radius: 0 !important; box-shadow: none !important; }