/* =====================================================================
   AndroMedia QA visual fixes, 27 Oct 2026 (qa-visual worker)
   Loaded from functions.php after the inline #andromedia-obsidian style (wp_head 100).
   Context: the child header.php/footer.php do not output Storefront's
   #content > .col-full wrapper, so #primary/#secondary sit directly in #page at x=0.
   ===================================================================== */

/* ---------- A. Container for every inner page (not the home page) ---------- */
body:not(.home) #page > #primary.content-area,
body:not(.home) #page > #secondary.widget-area { box-sizing: border-box; }

/* Full-width templates (product, cart, checkout, contact, account, legal pages) */
body.storefront-full-width-content:not(.home) #page > #primary.content-area {
  float: none; width: 100%; margin: 0; padding: 28px 20px 56px;
}
body.storefront-full-width-content:not(.home) #page > #primary.content-area > .site-main {
  max-width: 1280px; margin: 0 auto;
}

/* Catalog templates with the offers sidebar (shop, categories, tags, search) */
@media (min-width: 768px) {
  body.right-sidebar:not(.storefront-full-width-content):not(.home) #page > #primary.content-area {
    float: left; margin: 0;
    width: calc(100% - 300px - max(20px, calc((100% - 1280px) / 2)));
    padding: 28px 28px 56px max(20px, calc((100% - 1280px) / 2));
  }
  body.right-sidebar:not(.storefront-full-width-content):not(.home) #page > #secondary.widget-area {
    float: right; margin: 0;
    width: calc(300px + max(20px, calc((100% - 1280px) / 2)));
    padding: 28px max(20px, calc((100% - 1280px) / 2)) 56px 0;
  }
}
@media (max-width: 767px) {
  body:not(.home) #page > #primary.content-area,
  body:not(.home) #page > #secondary.widget-area { float: none; width: 100%; margin: 0; padding: 20px 16px 40px; }
}
/* Footer must clear the floated content/sidebar (shop: footer rendered beside the sidebar and caused a 1786px scroll width at 1440px) */
#page > footer.am-footer { clear: both; }
#page::after { content: ""; display: table; clear: both; }

/* ---------- B. Single product gallery ---------- */
/* Main image: fill the gallery column in a square, centered, no left-glued letterbox strip */
.single-product div.product .woocommerce-product-gallery { opacity: 1 !important; }
.single-product div.product .woocommerce-product-gallery__image > a { display: block; }
.single-product div.product .woocommerce-product-gallery__image img.wp-post-image,
.single-product div.product .woocommerce-product-gallery .flex-viewport img.wp-post-image {
  display: block; width: 100% !important; height: auto !important; max-height: none !important;
  aspect-ratio: 1 / 1; object-fit: contain !important; background: #101013; border-radius: 12px;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { width: calc(20% - 7px) !important; margin: 0 !important; float: none !important; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: contain; background: #101013; border-radius: 6px; }
.single-product div.product .woocommerce-product-gallery__trigger { z-index: 9; }
/* Storefront prev/next product tabs were fixed to the screen edges, half off-screen ("cut-off thumbnail") */
.storefront-product-pagination { display: none !important; }
@media (max-width: 767px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary { width: 100% !important; float: none !important; margin-right: 0 !important; }
  .single-product div.product .product_title { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.2; word-break: break-word; }
}
/* Related / up-sell product grids stay inside the container */
.single-product .related.products, .single-product .up-sells { clear: both; }

/* ---------- C. Cart / checkout ---------- */
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide { margin-left: 0; margin-right: 0; max-width: 100%; }
.woocommerce-cart .entry-header, .woocommerce-checkout .entry-header { margin-bottom: 20px; }
body.page-id-101 .entry-header,
body.page-id-102 .entry-header,
body.woocommerce-account .entry-header { margin: 0 0 20px; }
body.page-id-101 .entry-title,
body.page-id-102 .entry-title,
body.woocommerce-account .entry-title { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; margin: 0; }
body.page-id-101 .entry-content > p,
body.page-id-102 .entry-content > p { max-width: 700px; margin: 0 0 16px; line-height: 1.6; }

/* ---------- 2. Contact form: max 700 px, textarea 200 px ----------
   Fixes: textarea stretched to 1440 px wide x 281 px tall, inputs 390 px, default WP look. */
body.page-id-101 .wpcf7,
body.page-id-102 .wpcf7 {
  max-width: 700px;
  margin: 24px 0 0;
  padding: 28px;
  background: #16161A;
  border: 1px solid rgba(201, 162, 39, .25);
  border-radius: 14px;
  box-sizing: border-box;
}
body.page-id-101 .wpcf7-form p,
body.page-id-102 .wpcf7-form p { margin: 0 0 18px; }
body.page-id-101 .wpcf7-form label,
body.page-id-102 .wpcf7-form label { display: block; font-size: 14px; font-weight: 600; }
body.page-id-101 .wpcf7-form-control-wrap,
body.page-id-102 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
body.page-id-101 .wpcf7-form input[type="text"],
body.page-id-101 .wpcf7-form input[type="email"],
body.page-id-101 .wpcf7-form textarea,
body.page-id-102 .wpcf7-form input[type="text"],
body.page-id-102 .wpcf7-form input[type="email"],
body.page-id-102 .wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
}
body.page-id-101 .wpcf7-form textarea,
body.page-id-102 .wpcf7-form textarea { height: 200px; min-height: 160px; resize: vertical; }
body.page-id-101 .wpcf7-submit,
body.page-id-102 .wpcf7-submit { min-width: 180px; padding: 12px 28px !important; font-size: 15px; }

/* Fixes: style for the new data-protection notice (contact-privacy-notice.html). */
.am-form-privacy {
  max-width: 700px;
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #C9C5BB; /* 11.3:1 on #0D0D0F, 10.5:1 on #16161A */
}
.am-form-privacy p, .am-form-privacy li { color: #C9C5BB; margin: 0 0 6px; }
.am-form-privacy ul { margin: 0 0 8px 18px; padding: 0; }
.am-form-privacy a { color: #E3C45C; text-decoration: underline; }

/* ---------- 3. My account: login/register forms ----------
   Fixes: username/password inputs 1440 px wide, form glued left. */
body.woocommerce-account .woocommerce {
  max-width: 1150px;
  margin: 0 auto;
}
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword {
  max-width: 700px;
  margin: 0;
  padding: 28px;
  background: #16161A;
  border: 1px solid rgba(201, 162, 39, .25);
  border-radius: 14px;
  box-sizing: border-box;
}
body.woocommerce-account .woocommerce-form-row { margin: 0 0 18px; }
body.woocommerce-account .woocommerce-form-row .input-text { width: 100%; box-sizing: border-box; padding: 12px 14px; }
/* Logged-in dashboard: nav + content side by side inside the container */
@media (min-width: 768px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation { width: 26%; }
  body.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }
}

/* ---------- 4. Contrast: text forced near-white inside white cards ----------
   Cause: obsidian block sets h1-h4 / p / span / li / label to #EDEAE2 (some with !important)
   and .price/.woocommerce-Price-amount to gold !important; these leak into white cards.
   Fixes: services strip titles "Envío 24/48h", "Garantía 3 años"... #EDEAE2 on #fff = 1.20:1. */
.am-svc b,
.am-svc div b { color: #17171d !important; }          /* 17.9:1 on #fff */
.am-svc span { color: #5c5c66 !important; }            /* 6.6:1 on #fff */
.am-card h2, .am-card h3, .am-card h4,
.am-card p, .am-card li, .am-card label { color: #17171d !important; } /* any heading/text inside white cards */

/* Fixes: prices inside white cards gold on white, 2.42:1 (#C9A227) and 1.91:1 (#DBB93A sale price). */
.am-card .price,
.am-card .woocommerce-Price-amount,
.am-card .woocommerce-Price-currencySymbol,
.am-card ins .woocommerce-Price-amount { color: #0b0b10 !important; } /* 19.6:1 */
.am-card del .woocommerce-Price-amount,
.am-card del .woocommerce-Price-currencySymbol { color: #5c5c66 !important; } /* 6.6:1 */

/* Fixes: "Ver catálogo completo" / "View full catalogue" link #0b0b10 on page bg #0D0D0F = 1.01:1 (invisible). */
.am-sec-link { color: #E3C45C !important; }            /* 11.4:1 on #0D0D0F */
.am-sec-link:hover { color: #F5D76E !important; }

/* Fixes: "Oferta"/"¡Oferta!" sale labels: keep dark text on gold everywhere (8.0:1),
   including Woo blocks labels not covered by the obsidian rule. */
.onsale,
.wc-block-grid__product-onsale,
.wc-block-components-product-sale-badge {
  background: #C9A227 !important;
  color: #0D0D0F !important;
  border-color: #C9A227 !important;
}
/* Gold text badges on white (e.g. .am-badge-top: gold on #0b0b10 is fine, 9:1). Kicker "OFERTA" labels on dark cards are #F5D76E, fine. */

/* ---------- 5. Contrast: gold logo text on white header ----------
   Fixes: "Media" in the logo is inline color var(--gold-3) #9a7b1f on #fff = 4.02:1, and the
   mobile menu "Mi cuenta / My account" link #C9A227 on #fff = 2.42:1. */
.am-header .am-logo strong span { color: #7a5f10 !important; }  /* 6.0:1 on #fff, still gold-brown */
.am-logo-sub { color: #5c5c66 !important; }                      /* 6.6:1 on #fff (was #6b6b76, 5.3:1, kept AA with margin) */
.am-mobile-menu .am-mob-actions a { color: #7a5f10 !important; } /* 6.0:1 on #fff */

/* ---------- 6. Contrast: brand strip small text ----------
   Fixes: .am-brand has opacity .8 so brand name #6b6b76 renders 3.49:1 and the small gold line #9a7b1f renders 2.90:1 on #fff. */
.am-brands .am-brand { opacity: 1; }
.am-brand-name { color: #4a4a54 !important; }        /* 8.7:1 */
.am-brand-name small { color: #7a5f10 !important; }  /* 6.0:1 */

/* ---------- 7. Accessibility: mobile account link without accessible name ----------
   Fixes: on mobile .am-hact-label is display:none, leaving the "Mi cuenta"/"Carrito" links with only an SVG.
   Hide visually but keep it for screen readers. */
@media (max-width: 768px) {
  .am-hact span.am-hact-label {
    display: block !important;
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* Contact + My account: narrower 1150 px container (site-agent pack, adapted to the container above) */
body.page-id-101 #page > #primary.content-area > .site-main,
body.page-id-102 #page > #primary.content-area > .site-main,
body.woocommerce-account #page > #primary.content-area > .site-main { max-width: 1150px; }

/* ---------- D. Mobile cookie bar compact + chat bubble never over it ---------- */
@media (max-width: 600px) {
  #am-cookie-bar { padding: 10px 12px !important; font-size: 12.5px !important; line-height: 1.4 !important; }
  #am-cookie-bar > div { gap: 8px !important; }
  #am-cookie-bar > div > span { flex: 1 1 100% !important; min-width: 0 !important; }
  #am-cookie-bar button { flex: 1 1 0 !important; padding: 9px 10px !important; font-size: 13px !important; min-width: 0 !important; }
}
/* --am-cb-h is set by andro-qa-fixes.php JS to the visible cookie bar height (0 when hidden) */
#amchat-bubble { bottom: calc(var(--am-cb-h, 0px) + 18px) !important; transition: bottom .2s, transform .2s; }
#amchat-panel { bottom: calc(var(--am-cb-h, 0px) + 88px) !important; max-height: calc(100vh - var(--am-cb-h, 0px) - 120px) !important; }
@media (max-width: 600px) { #amchat-bubble { width: 50px !important; height: 50px !important; right: 14px !important; } }

/* ---------- G. Title -> price spacing (owner complaint 27 Oct: big empty gap between title and price) ----------
   Causes: (1) home cards: .am-card-price{margin-top:auto} pushed the price to the bottom of equal-height cards;
   (2) 5 grey "empty" stars printed for products with no reviews; (3) shop/related grids: Storefront prints the
   "¡Oferta!" badge between the title and the price; (4) single product: .price margin-top ~32px. */
.am-card-body { gap: 6px; }
.am-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-height: 2.7em; }
.am-card-price { margin-top: 2px !important; }
.am-card-cta { margin-top: auto !important; }
.am-card-body > .am-card-price + .am-card-cta { margin-top: auto !important; }
.am-stars:not(:has(.am-star-fill:not([style="width:0%"]))) { display: none !important; } /* no reviews -> no empty stars */

ul.products li.product { position: relative; }
ul.products li.product .woocommerce-LoopProduct-link { display: flex !important; flex-direction: column; gap: 8px; }
ul.products li.product .onsale {
  position: absolute !important; top: 10px; left: 10px; right: auto; margin: 0 !important; z-index: 3;
  min-height: 0; line-height: 1.3;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  margin: 0 !important; padding: 0 !important; line-height: 1.35 !important; min-height: 2.7em;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
ul.products li.product .woocommerce-LoopProduct-link > .price,
ul.products li.product .price { margin-top: 0 !important; }
ul.products li.product .star-rating:empty { display: none; }

.single-product div.product .summary .product_title { margin: 0 0 10px !important; }
.single-product div.product .summary .product_title + .woocommerce-product-rating { margin: 0 0 8px; }
.single-product div.product .summary > .price,
.single-product div.product .summary p.price { margin: 0 0 18px !important; }
.single-product div.product .summary .woocommerce-product-details__short-description:empty { display: none; }
/* Home "Novedades" launch-banner cards (CSS override only; the banner mu-plugin is not touched):
   strong{min-height:36px} left an empty line under 1-line titles. */
.am-hero-card strong { min-height: 0 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-hero-card .am-hero-old { margin-top: 8px !important; }
.am-hero-card strong + .am-hero-price { margin-top: 8px !important; }

/* ---------- H. Order received / view-order / order tables: contrast (owner complaint 27 Oct "no se ve el texto") ----------
   Cause: Storefront paints the order overview, table th and tbody td light (#f8f8f8/#fdfdfd) while the obsidian theme
   makes all text #EDEAE2 -> light text on light grey (~1.1:1). Dark cards + light text, like the block checkout. */
.woocommerce-order,
.woocommerce-order p, .woocommerce-order li, .woocommerce-order address, .woocommerce-order th, .woocommerce-order td,
.woocommerce-MyAccount-content, .woocommerce-MyAccount-content th, .woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content address, .woocommerce-MyAccount-content mark { color: #EDEAE2 !important; }
.woocommerce-MyAccount-content mark { background: transparent !important; font-weight: 700; }

/* Overview list (order no., date, total, payment method) */
ul.woocommerce-order-overview,
ul.order_details {
  background: #16161A !important; color: #EDEAE2 !important;
  border: 1px solid rgba(201,162,39,.35) !important; border-radius: 10px; padding: 6px 18px !important; margin: 0 0 1.5em !important;
}
ul.order_details::before, ul.order_details::after { display: none !important; content: none !important; }
ul.order_details li {
  color: #9a958a !important; border-color: rgba(201,162,39,.18) !important; background: transparent !important;
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px; padding: 12px 0 !important; margin: 0 !important;
}
ul.order_details li strong { color: #EDEAE2 !important; font-size: 15px; text-transform: none; letter-spacing: 0; margin-top: 4px; }
ul.order_details li .woocommerce-Price-amount, ul.order_details li .woocommerce-Price-currencySymbol { color: #E3C45C !important; }

/* Notices: "Gracias. Tu pedido ha sido recibido." + order-request notice */
.woocommerce-order .woocommerce-notice,
.woocommerce-order .woocommerce-thankyou-order-received {
  background: #16161A !important; color: #EDEAE2 !important; border-left: 4px solid #C9A227 !important;
  padding: 14px 18px !important; border-radius: 8px; font-size: 16px; font-weight: 600;
}
.woocommerce-order .woocommerce-thankyou-order-failed { border-left-color: #e4002b !important; }
.am-order-request { background: #16161A !important; border-color: #C9A227 !important; border-radius: 10px !important; padding: 16px 18px !important; }
.am-order-request, .am-order-request p, .am-order-request strong { color: #F5EFDF !important; }
.am-order-request p { margin: 0 !important; line-height: 1.55; }
.woocommerce-order .woocommerce-bacs-bank-details,
.woocommerce-order .wc-bacs-bank-details,
.woocommerce-order section > p:not([class]) { color: #EDEAE2 !important; }
.woocommerce-order .wc-bacs-bank-details { background: #16161A !important; border: 1px solid rgba(201,162,39,.35) !important; border-radius: 10px; padding: 12px 18px !important; }
.woocommerce-order .wc-bacs-bank-details li, .woocommerce-order .wc-bacs-bank-details li strong { color: #EDEAE2 !important; }

/* Order details table + My Account orders table */
.woocommerce-order table.shop_table,
.woocommerce-MyAccount-content table.shop_table,
table.woocommerce-table--order-details,
table.woocommerce-orders-table {
  background: #16161A !important; border: 1px solid rgba(201,162,39,.35) !important; border-radius: 10px; overflow: hidden; border-collapse: separate !important;
}
.woocommerce-order table.shop_table th, .woocommerce-order table.shop_table td,
.woocommerce-MyAccount-content table th, .woocommerce-MyAccount-content table td,
table.woocommerce-table--order-details th, table.woocommerce-table--order-details td,
table.woocommerce-orders-table th, table.woocommerce-orders-table td {
  background: #16161A !important; color: #EDEAE2 !important; border-color: rgba(201,162,39,.18) !important;
}
table.woocommerce-table--order-details thead th,
table.woocommerce-orders-table thead th,
.woocommerce-MyAccount-content table thead th { background: #1E1E24 !important; color: #E3C45C !important; text-transform: uppercase; font-size: 12px; letter-spacing: .6px; }
table.woocommerce-table--order-details tfoot th { color: #9a958a !important; font-weight: 600; }
table.woocommerce-table--order-details tfoot tr:last-child th, table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0 !important; }
table.woocommerce-table--order-details .woocommerce-Price-amount,
table.woocommerce-table--order-details .woocommerce-Price-currencySymbol,
table.woocommerce-orders-table .woocommerce-Price-amount { color: #E3C45C !important; }
table.woocommerce-table--order-details small, table.woocommerce-table--order-details .wc-item-meta,
table.woocommerce-table--order-details .wc-item-meta li, table.woocommerce-table--order-details .product-quantity { color: #B8B3A7 !important; }
table.woocommerce-table--order-details small .woocommerce-Price-amount, table.woocommerce-table--order-details small .woocommerce-Price-currencySymbol { color: #B8B3A7 !important; }
table.woocommerce-table--order-details a, table.woocommerce-orders-table a:not(.button),
.woocommerce-order a:not(.button), .woocommerce-customer-details a { color: #E3C45C !important; }
table.woocommerce-orders-table a.button, .woocommerce-MyAccount-content a.button { background: #C9A227 !important; color: #0D0D0F !important; }

/* Customer details / addresses */
.woocommerce-customer-details address {
  background: #16161A !important; color: #EDEAE2 !important; font-style: normal;
  border: 1px solid rgba(201,162,39,.35) !important; border-radius: 10px; padding: 14px 18px !important; line-height: 1.6;
}
.woocommerce-customer-details address p { color: #EDEAE2 !important; margin: 6px 0 0 !important; }
.woocommerce-customer-details h2, .woocommerce-order-details h2, .woocommerce-order h2 { color: #F5EFDF !important; }
.woocommerce-customer-details .woocommerce-customer-details--email::before,
.woocommerce-customer-details .woocommerce-customer-details--phone::before { color: #C9A227 !important; }