/* ─── WooCommerce Overrides — Alkaline Care ──────────────────────────────── */

/* Hide default WC wrappers */
.woocommerce-page .woocommerce { width: 100%; }

/* Ancho máximo páginas WC (carrito, checkout, mi cuenta) */
.ac-wc-section .ac-container { max-width: 1100px; }

/* ─── Notices ────────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--font-size-sm) !important;
    margin-bottom: var(--space-4) !important;
}
.woocommerce-message { background: #E8F5E9; color: #1B5E20; border-left: 4px solid var(--color-primary) !important; }
.woocommerce-info    { background: #E3F2FD; color: #0D47A1; border-left: 4px solid #1976D2 !important; }
.woocommerce-error   { background: #FFEBEE; color: #B71C1C; border-left: 4px solid var(--color-red) !important; }
.woocommerce-message::before,
.woocommerce-info::before { display: none !important; }

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
    font-size: var(--font-size-xs) !important;
    color: var(--color-text-soft) !important;
    margin-bottom: var(--space-6) !important;
    padding: var(--space-3) 0 !important;
}
.woocommerce-breadcrumb a { color: var(--color-text-soft) !important; }
.woocommerce-breadcrumb a:hover { color: var(--color-primary) !important; }

/* ─── Product Loop ───────────────────────────────────────────────────────── */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-5) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce ul.products li.product {
    background: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--color-border-light) !important;
    transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 28px var(--color-shadow-md) !important;
    transform: translateY(-3px) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform var(--transition-slow) !important;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.05) !important; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-dark) !important;
    padding: var(--space-4) var(--space-4) var(--space-2) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.woocommerce ul.products li.product .price {
    padding: 0 var(--space-4) !important;
    font-weight: 800 !important;
    color: var(--color-primary-dark) !important;
    font-size: var(--font-size-lg) !important;
    display: block !important;
}
.woocommerce ul.products li.product .price del {
    color: var(--color-text-soft) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    font-weight: 800 !important;
}

/* Badge de descuento */
.woocommerce span.onsale {
    background: var(--color-red) !important;
    border-radius: var(--radius-full) !important;
    min-height: auto !important;
    min-width: auto !important;
    padding: var(--space-1) var(--space-3) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    top: var(--space-3) !important;
    left: var(--space-3) !important;
}

/* Add to cart button en loop */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    margin: var(--space-3) var(--space-4) var(--space-4) !important;
    padding: 0.6rem var(--space-4) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background var(--transition-fast) !important;
    display: block !important;
    text-align: center !important;
    width: calc(100% - var(--space-8)) !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--color-primary-dark) !important; color: #fff !important; }

/* ─── Single Product ─────────────────────────────────────────────────────── */
.woocommerce div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-12) !important;
    align-items: start !important;
}

/* Gallery */
.woocommerce div.product div.images {
    margin: 0 !important;
    width: auto !important;
    float: none !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper img {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border-light) !important;
}
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    gap: var(--space-3) !important;
    margin-top: var(--space-3) !important;
    padding: 0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 72px !important;
    float: none !important;
    padding: 0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs img {
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--color-border-light) !important;
    opacity: 1 !important;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
    border-color: var(--color-primary) !important;
}

/* Summary */
.woocommerce div.product div.summary {
    margin: 0 !important;
    width: auto !important;
    float: none !important;
}
.woocommerce div.product .product_title {
    font-size: var(--font-size-2xl) !important;
    font-weight: 800 !important;
    color: var(--color-text-dark) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--space-2) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--color-primary-dark) !important;
    font-size: var(--font-size-3xl) !important;
    font-weight: 800 !important;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: var(--color-text-soft) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Stars */
.woocommerce .star-rating { color: var(--color-gold) !important; }
.woocommerce .woocommerce-product-rating { margin-bottom: var(--space-4) !important; }

/* Stock */
.woocommerce div.product p.stock.in-stock {
    color: var(--color-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* Add to cart */
.woocommerce div.product form.cart { margin: var(--space-4) 0 !important; }
.woocommerce div.product form.cart .qty {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    height: 2.75rem !important;
    width: 5rem !important;
    text-align: center !important;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    color: var(--color-text-dark) !important;
    padding: 0 var(--space-2) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 0.75rem var(--space-8) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 2.75rem !important;
    transition: background var(--transition-fast), box-shadow var(--transition-fast) !important;
    box-shadow: 0 2px 8px rgba(75,132,7,.25) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--color-primary-dark) !important;
    box-shadow: 0 4px 14px rgba(75,132,7,.35) !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: 0 0 var(--space-6) !important;
    border-bottom: 2px solid var(--color-border-light) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-bottom: -2px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--color-primary) !important;
    background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-soft) !important;
    padding: var(--space-3) var(--space-5) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-primary) !important; }
.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0 !important;
    padding: var(--space-6) !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md) !important;
}

/* Related products */
.woocommerce div.product .related h2,
.woocommerce div.product .upsells h2 {
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
    color: var(--color-text-dark) !important;
    margin-bottom: var(--space-6) !important;
}
.woocommerce div.product .related,
.woocommerce div.product .upsells {
    grid-column: 1 / -1 !important;
    margin-top: var(--space-10) !important;
    padding-top: var(--space-10) !important;
    border-top: 1px solid var(--color-border-light) !important;
    clear: both !important;
    float: none !important;
    width: 100% !important;
}

/* ─── Cart ───────────────────────────────────────────────────────────────── */
.woocommerce table.shop_table {
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    border-collapse: separate !important;
}
.woocommerce table.shop_table th {
    background: var(--color-cream) !important;
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--color-text-soft) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}
.woocommerce table.shop_table td {
    padding: var(--space-5) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    vertical-align: middle !important;
    font-size: var(--font-size-sm) !important;
}
.woocommerce table.shop_table .product-thumbnail img {
    width: 72px !important;
    height: 72px !important;
    border-radius: var(--radius-md) !important;
    object-fit: cover !important;
}
.woocommerce table.shop_table .product-name a { color: var(--color-text-dark) !important; font-weight: 600 !important; }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal { color: var(--color-primary-dark) !important; font-weight: 700 !important; }
.woocommerce a.remove {
    color: var(--color-text-soft) !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    transition: color var(--transition-fast) !important;
}
.woocommerce a.remove:hover { color: var(--color-red) !important; background: transparent !important; }

/* Cart totals */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    width: 100% !important;
    float: none !important;
}
.woocommerce .cart_totals h2 {
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    color: var(--color-text-dark) !important;
    margin-bottom: var(--space-4) !important;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--font-size-sm) !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
    font-weight: 800 !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text-dark) !important;
    border-bottom: none !important;
}
.woocommerce .cart_totals .order-total td .amount { color: var(--color-primary-dark) !important; }

/* Proceed to checkout */
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce .wc-proceed-to-checkout a.button {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: 1rem !important;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    display: block !important;
    transition: background var(--transition-fast) !important;
}
.woocommerce .wc-proceed-to-checkout .checkout-button:hover { background: var(--color-primary-dark) !important; }

/* Coupon */
.woocommerce .coupon { display: flex !important; gap: var(--space-2) !important; margin-bottom: var(--space-4) !important; }
.woocommerce .coupon input#coupon_code {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.625rem var(--space-4) !important;
    font-size: var(--font-size-sm) !important;
    height: auto !important;
    flex: 1 !important;
}
.woocommerce .coupon .button {
    background: var(--color-dark) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    padding: 0.625rem var(--space-5) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    border: none !important;
    text-transform: none !important;
}

/* ─── Checkout ───────────────────────────────────────────────────────────── */
.woocommerce form .form-row {
    padding: 0 !important;
    margin: 0 0 var(--space-4) !important;
}
.woocommerce form .form-row label {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-dark) !important;
    margin-bottom: var(--space-2) !important;
    display: block !important;
}
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.75rem var(--space-4) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-dark) !important;
    background: var(--color-white) !important;
    width: 100% !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(75,132,7,.1) !important;
    outline: none !important;
}
#place_order {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: 1rem !important;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    width: 100% !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgba(75,132,7,.25) !important;
    transition: background var(--transition-fast), box-shadow var(--transition-fast) !important;
}
#place_order:hover {
    background: var(--color-primary-dark) !important;
    box-shadow: 0 4px 14px rgba(75,132,7,.35) !important;
}

/* Order review — ocultamos el h3 nativo porque nuestro ac-box__title lo reemplaza */
#order_review_heading { display: none !important; }

.woocommerce-checkout-review-order-table {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-collapse: collapse !important;
    border-radius: 0 !important;
    margin-bottom: var(--space-4) !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: .625rem .25rem !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-mid) !important;
    border-bottom: 1px solid var(--color-border) !important;
    vertical-align: middle !important;
}
.woocommerce-checkout-review-order-table thead th {
    font-weight: 700 !important;
    color: var(--color-text-dark) !important;
    border-bottom-color: var(--color-border) !important;
}
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
    font-weight: 700 !important;
    color: var(--color-primary-dark) !important;
    font-size: var(--font-size-base) !important;
    border-bottom: none !important;
}
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .shipping td { border-bottom: none !important; }

/* Payment methods */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
    padding: var(--space-4) 0 0 !important;
    margin-top: var(--space-2) !important;
}
.woocommerce-checkout #payment .payment_methods {
    border: none !important;
    padding: 0 !important;
    margin-bottom: var(--space-3) !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-dark) !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-dark) !important;
}

/* ─── My Account ─────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    width: 220px !important;
    float: left !important;
    margin-right: var(--space-8) !important;
}
.woocommerce-MyAccount-navigation ul { padding: var(--space-2) 0 !important; list-style: none !important; }
.woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: var(--space-3) var(--space-5) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-mid) !important;
    font-weight: 500 !important;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--color-cream) !important;
    color: var(--color-primary) !important;
}
.woocommerce-MyAccount-content {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
}

/* ─── Responsive WooCommerce ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 768px) {
    .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; gap: var(--space-3) !important; }
    .woocommerce div.product { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
    .woocommerce div.product .related,
    .woocommerce div.product .upsells { grid-column: 1 !important; }
    .woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; margin-right: 0 !important; margin-bottom: var(--space-4) !important; }
}
@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
}

/* ─── Thank You page ─────────────────────────────────────────────────────── */
.ac-thankyou-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}
.ac-thankyou-banner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: linear-gradient(90deg, #e8f5e9 0%, #f1f8e9 100%);
  border-color: #a5d6a7;
  margin-bottom: 1.5rem;
}
.ac-thankyou-icon {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ac-thankyou-banner__title { font-weight: 700; font-size: 1rem; color: var(--color-text-dark); margin-bottom: .25rem; }
.ac-thankyou-banner__sub   { font-size: .875rem; color: var(--color-text-mid); }

.ac-order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.ac-order-meta__item { display: flex; flex-direction: column; gap: .2rem; }
.ac-order-meta__label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-soft); }
.ac-order-meta__val   { font-size: .875rem; font-weight: 600; color: var(--color-text-dark); }
.ac-order-status { display: inline-block; padding: .2rem .65rem; border-radius: var(--radius-full); font-size: .75rem; font-weight: 700; }
.ac-order-status--processing { background: #e3f2fd; color: #1565c0; }
.ac-order-status--pending    { background: #fff8e1; color: #f57f17; }
.ac-order-status--completed  { background: #e8f5e9; color: #2e7d32; }
.ac-order-status--on-hold    { background: #f3e5f5; color: #6a1b9a; }

.ac-order-items { width: 100%; border-collapse: collapse; }
.ac-order-items thead th {
  padding: .625rem 0;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-text-soft);
  border-bottom: 2px solid var(--color-border);
  text-align: left;
}
.ac-order-items thead th.col-right,
.ac-order-items td.col-right { text-align: right; }
.ac-order-items tbody td { padding: .875rem 0; border-bottom: 1px solid var(--color-border); vertical-align: middle; font-size: .875rem; }
.ac-order-items tbody td.col-thumb { width: 64px; padding-right: .75rem; }
.ac-order-items tfoot td { padding: .5rem 0; font-size: .85rem; }
.ac-order-total td { font-size: 1rem !important; font-weight: 800 !important; color: var(--color-text-dark) !important; border-top: 2px solid var(--color-border); padding-top: .875rem !important; }

.ac-next-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.ac-next-step  { display: flex; align-items: flex-start; gap: .875rem; font-size: .875rem; }
.ac-next-step__num {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  flex-shrink: 0;
  margin-top: .1rem;
}
.ac-next-step strong { display: block; font-weight: 700; color: var(--color-text-dark); margin-bottom: .2rem; }
.ac-next-step p { color: var(--color-text-mid); margin: 0; line-height: 1.5; }

@media (max-width: 900px) {
  .ac-thankyou-layout { grid-template-columns: 1fr; }
  .ac-order-meta { grid-template-columns: 1fr; }
}

/* ─── My Account responsive ──────────────────────────────────────────────── */
.ac-myaccount-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .ac-myaccount-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .ac-myaccount-nav {
    border-radius: var(--radius-lg) !important;
    padding: .75rem !important;
  }
}

/* ─── Cart & Checkout page layout ───────────────────────────────────────── */
.ac-page-header {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2.5rem;
}
.ac-page-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0;
}
.ac-page-header__title span { color: var(--color-primary); }

/* Checkout steps */
.ac-checkout-steps {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
}
.ac-checkout-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-soft);
  white-space: nowrap;
}
.ac-checkout-step--active { color: var(--color-primary); }
.ac-checkout-step--done   { color: var(--color-text-mid); }
.ac-checkout-step__num {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ac-checkout-step--active .ac-checkout-step__num { background: var(--color-primary); color: #fff; }
.ac-checkout-step--done   .ac-checkout-step__num { background: #8dc95a; color: #fff; }
.ac-checkout-step__divider {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 .75rem;
  min-width: 2rem;
}
.ac-checkout-step--done + .ac-checkout-step__divider,
.ac-checkout-step__divider--done { background: #8dc95a; }

/* Two-col page layout */
.ac-cart-layout,
.ac-checkout-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}
.ac-cart-layout     { grid-template-columns: 1fr 360px; }
.ac-checkout-layout { grid-template-columns: 1fr 380px; }

.ac-cart-sidebar,
.ac-checkout-sidebar { position: sticky; top: calc(var(--total-header, 9rem) + 1rem); }

/* Section boxes */
.ac-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.ac-box--cream { background: var(--color-cream); border-color: transparent; }
.ac-box:last-child { margin-bottom: 0; }
.ac-box__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ac-box__title::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.125rem;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Cart empty state */
.ac-cart-empty {
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.ac-cart-empty svg { opacity: .35; }
.ac-cart-empty p { font-size: 1rem; color: var(--color-text-mid); }

/* Cart list rows */
.ac-cart-list { margin-bottom: 1rem; }

.ac-cart-row {
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border-light);
}
.ac-cart-row:first-child { border-top: 1px solid var(--color-border-light); }

/* Image */
.ac-cart-row__img {
  width: 88px; height: 88px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream);
  flex-shrink: 0;
}
.ac-cart-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Info */
.ac-cart-row__info { min-width: 0; }
.ac-cart-row__name {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.35;
  margin-bottom: .3rem;
  transition: color var(--transition-fast);
}
a.ac-cart-row__name:hover { color: var(--color-primary); }
.ac-cart-row__unit {
  display: block;
  font-size: .8rem;
  color: var(--color-text-soft);
  margin-bottom: .45rem;
}
.ac-cart-row__remove {
  font-size: .75rem;
  color: var(--color-text-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: color var(--transition-fast);
}
.ac-cart-row__remove:hover { color: var(--color-red); }

/* Qty */
.ac-cart-row__qty { display: flex; align-items: center; }

/* Total */
.ac-cart-row__total {
  text-align: right;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-primary);
  white-space: nowrap;
  min-width: 5rem;
}
.ac-cart-row__total .amount { color: var(--color-primary); }

/* CTA buttons in sidebar */
.ac-cart-cta { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.25rem; }

/* Trust block (outside ac-box, below it) */
.ac-cart-trust {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* Qty stepper */
.ac-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ac-qty-btn {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-mid);
  font-size: 1.1rem;
  font-weight: 600;
  transition: color .15s;
}
.ac-qty-btn:hover { color: var(--color-primary); }
.ac-qty-input {
  width: 2.5rem;
  text-align: center;
  border: none;
  outline: none;
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-text-dark);
  background: transparent;
}

/* Cart footer row */
.ac-cart-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0 0;
}
.ac-coupon-row { display: flex; gap: .5rem; }
.ac-coupon-row input {
  height: 2.5rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 1rem;
  font-size: .875rem;
  outline: none;
  width: 180px;
  transition: border-color .15s;
}
.ac-coupon-row input:focus { border-color: var(--color-primary); }

/* Trust signals */
.ac-trust-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.ac-trust-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .78rem;
  color: var(--color-text-mid);
  line-height: 1.4;
}
.ac-trust-item svg { color: var(--color-primary); flex-shrink: 0; }

/* Responsive cart/checkout */
@media (max-width: 900px) {
  .ac-cart-layout,
  .ac-checkout-layout { grid-template-columns: 1fr; }
  .ac-cart-sidebar,
  .ac-checkout-sidebar { position: static; }
}
@media (max-width: 600px) {
  /* Cart rows: imagen a la izquierda ocupa 2 filas, info arriba, qty+total abajo */
  .ac-cart-row {
    grid-template-columns: 72px 1fr 1fr;
    grid-template-rows: auto auto;
    gap: .625rem 1rem;
  }
  .ac-cart-row__img   { grid-column: 1; grid-row: 1 / 3; }
  .ac-cart-row__info  { grid-column: 2 / 4; grid-row: 1; }
  .ac-cart-row__qty   { grid-column: 2; grid-row: 2; }
  .ac-cart-row__total { grid-column: 3; grid-row: 2; text-align: right; }
  /* Steps: ocultar etiquetas en pantallas pequeñas */
  .ac-checkout-steps { gap: 0; }
  .ac-checkout-step__label { display: none; }
}