/* ==========================================================================
   TONE5 / LA ROSE — branded skin for Shop, Product, Cart, Checkout,
   My Account and Contacto. Loaded ONLY on these pages (see tone5-site.php),
   on top of tone5.css (shared design tokens + nav/footer bar).
   ========================================================================== */

body.tone5-shop-branded {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--c-white);
  color: var(--c-soft-black);
}

/* Hide the default block-theme header/footer chrome; our own bar replaces it. */
body.tone5-shop-branded header.wp-block-template-part,
body.tone5-shop-branded footer.wp-block-template-part {
  display: none !important;
}

/* ---- Branded top bar (injected via wp_body_open) ---- */
.t5-shopbar {
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--space-3) var(--space-4);
}
.t5-shopbar__row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.t5-shopbar__brand img { height: 122px !important; width: auto !important; filter: invert(1); }
.t5-shopbar__links { display: flex; align-items: center; gap: var(--space-4); }
.t5-shopbar__links a {
  color: var(--c-white);
  opacity: 0.85;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.t5-shopbar__links a:hover { opacity: 1; }
.t5-shopbar__cart { position: relative; opacity: 0.9; }
@media (max-width: 780px) {
  .t5-shopbar__brand img { height: 94px !important; }
  .t5-shopbar__links { display: none; }
}

/* ---- Branded footer bar (injected before wp_footer) ---- */
.t5-shopfooter {
  background: var(--c-soft-black);
  color: var(--c-white);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-7);
}
.t5-shopfooter img { height: 122px !important; width: auto !important; filter: invert(1); margin-bottom: var(--space-3); }
@media (max-width: 780px) {
  .t5-shopfooter img { height: 94px !important; }
}
.t5-shopfooter p { opacity: 0.5; font-size: 12px; letter-spacing: 0.06em; }
.t5-shopfooter nav { display: flex; justify-content: center; gap: var(--space-4); margin: var(--space-3) 0; flex-wrap: wrap; }
.t5-shopfooter nav a { color: var(--c-white); opacity: 0.7; text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.t5-shopfooter nav a:hover { opacity: 1; }

/* ---- Page container / headings ---- */
body.tone5-shop-branded .wp-block-woocommerce-breadcrumbs,
body.tone5-shop-branded nav.woocommerce-breadcrumb {
  max-width: 1280px;
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-4);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
}
body.tone5-shop-branded .woocommerce-products-header__title {
  max-width: 1280px;
  margin: var(--space-3) auto var(--space-4);
  padding: 0 var(--space-4);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* .wp-block-post-title is reused by the theme for BOTH the shop-archive H1 and the
   single-product title — the two sit in very different layout parents (full-width vs.
   a narrow flex column), so no width/margin here, only typography, kept safe everywhere. */
body.tone5-shop-branded .wp-block-post-title,
body.tone5-shop-branded h1.product_title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.woocommerce-shop.tone5-shop-branded .wp-block-post-title {
  max-width: 1280px;
  margin: var(--space-3) auto var(--space-4);
  padding: 0 var(--space-4);
}
body.single-product.tone5-shop-branded .wp-block-post-title {
  font-size: var(--fs-h2);
  width: 100%;
  margin: var(--space-4) 0 var(--space-2);
}

/* ---- Product image: show the FULL sachet, never cropped ---- */
body.tone5-shop-branded .wc-block-components-product-image img,
body.tone5-shop-branded .wp-block-woocommerce-product-image img,
body.tone5-shop-branded ul.products li.product img,
body.tone5-shop-branded .woocommerce-product-gallery img,
body.tone5-shop-branded [data-testid="product-image"] {
  object-fit: contain !important;
  background: var(--c-pearl);
}
body.tone5-shop-branded .wc-block-components-product-image,
body.tone5-shop-branded .wp-block-woocommerce-product-image {
  background: var(--c-pearl);
  border-radius: 4px;
  overflow: hidden;
  /* Light-toned packaging (e.g. Blanco Polar) nearly disappears against the
     page's own off-white background without this — a thin edge keeps every
     card readable as a distinct product at grid/thumbnail size. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
body.tone5-shop-branded .woocommerce-product-gallery__image,
body.tone5-shop-branded .woocommerce-product-gallery__wrapper {
  background: var(--c-pearl);
}

/* ---- My account: login/register forms currently used the theme's bare
   defaults everywhere else on the shop is branded ---- */
body.tone5-shop-branded.woocommerce-account .woocommerce > h2,
body.tone5-shop-branded .woocommerce-form-login > h2,
body.tone5-shop-branded .woocommerce-form-register > h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
body.tone5-shop-branded .woocommerce-form-row input.input-text,
body.tone5-shop-branded .woocommerce-form-row input[type="password"],
body.tone5-shop-branded .woocommerce-form-row input[type="email"] {
  border-radius: 4px;
  border-color: #E3DDD8;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}
body.tone5-shop-branded .woocommerce-form-row input.input-text:focus,
body.tone5-shop-branded .woocommerce-form-row input[type="password"]:focus,
body.tone5-shop-branded .woocommerce-form-row input[type="email"]:focus {
  border-color: var(--c-rose);
  outline: none;
}
body.tone5-shop-branded .woocommerce-form-login,
body.tone5-shop-branded .woocommerce-form-register {
  background: var(--c-pearl);
  border-radius: 8px;
  padding: var(--space-4);
}
body.tone5-shop-branded .woocommerce-LostPassword a,
body.tone5-shop-branded .woocommerce-form-login a,
body.tone5-shop-branded .u-column1 h2 + a {
  color: var(--c-rose-dark);
}
body.tone5-shop-branded .woocommerce-MyAccount-navigation ul,
body.tone5-shop-branded nav.woocommerce-MyAccount-navigation {
  border-bottom: 1px solid #E3DDD8;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}
body.tone5-shop-branded .woocommerce-MyAccount-navigation-link a {
  color: var(--c-ink, #1a1a1a);
  font-weight: 600;
  text-decoration: none;
}
body.tone5-shop-branded .woocommerce-MyAccount-navigation-link--is-active a {
  color: var(--c-rose-dark);
}

/* ---- Price + buttons everywhere in the shop context ---- */
body.tone5-shop-branded .price,
body.tone5-shop-branded .woocommerce-Price-amount {
  color: var(--c-rose-dark);
  font-weight: 700;
}
body.tone5-shop-branded del .woocommerce-Price-amount { color: inherit; opacity: 0.5; font-weight: 400; }

body.tone5-shop-branded .button,
body.tone5-shop-branded button.button,
body.tone5-shop-branded .wc-block-components-button,
body.tone5-shop-branded .wp-element-button,
body.tone5-shop-branded a.added_to_cart,
body.tone5-shop-branded .checkout-button,
body.tone5-shop-branded .wc-block-cart__submit-button,
body.tone5-shop-branded .wc-block-components-checkout-place-order-button {
  background: var(--c-black) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px !important;
  padding: 14px 30px !important;
  transition: opacity 0.25s ease;
}
body.tone5-shop-branded .button:hover,
body.tone5-shop-branded button.button:hover,
body.tone5-shop-branded .wc-block-components-button:hover,
body.tone5-shop-branded .wp-element-button:hover {
  opacity: 0.82;
}

/* ---- Shop grid (main shop archive AND "Productos relacionados" on a product page) ----
   Own CSS grid instead of the theme's float/percentage columns — those left no
   guaranteed gutter, so a full-width pill "SELECCIONAR OPCIONES" button and long
   tone names (e.g. "Chocolate Mocca") had no room and spilled into the next card. */
body.tone5-shop-branded ul.products,
body.tone5-shop-branded .wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: var(--space-5) var(--space-4) !important;
  max-width: 1280px;
  margin: var(--space-5) auto !important;
  padding: 0 var(--space-4);
  list-style: none;
}
body.tone5-shop-branded ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif;
}
/* "Productos relacionados" (product page) renders through the newer WooCommerce
   Blocks Product Collection markup (<li class="wc-block-product">), not the
   classic ul.products/li.product the shop archive uses — it needs its own
   width fix, the li was collapsing to ~28px (shrink-to-fit) inside its own
   248px grid track instead of filling it. */
body.tone5-shop-branded .wc-block-product-template .wc-block-product {
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  min-width: 0 !important;
}
body.tone5-shop-branded .wc-block-product-template .wc-block-product img {
  width: 100% !important;
  height: auto !important;
}
body.tone5-shop-branded ul.products li.product h2,
body.tone5-shop-branded ul.products li.product h3,
body.tone5-shop-branded .wc-block-components-product-name {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--c-soft-black) !important;
  overflow-wrap: normal;
  word-break: normal;
}
/* The "SELECCIONAR OPCIONES" / "AÑADIR AL CARRITO" pill in a grid card: fill the
   card's own column instead of sizing to its text, and let long labels wrap
   onto a second line rather than forcing the pill wider than the column. */
body.tone5-shop-branded ul.products li.product .button,
body.tone5-shop-branded ul.products li.product a.added_to_cart,
body.tone5-shop-branded .wc-block-product-template .wc-block-components-product-button .button {
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
  text-align: center;
}

/* ---- Single product ---- */
body.tone5-shop-branded div.product {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-7);
}
/* The theme wraps EVERY shop-context page's content in a bare
   <main class="...is-layout-constrained"> with its own max-width:640px (the
   "alignwide"/"alignfull" escape grid that class normally sets up never got
   wired into WooCommerce's templates, so nothing inside it — shop grid,
   product gallery, related products — ever gets past 640px total, regardless
   of any max-width set on content further in). Neutralize it site-wide across
   the shop context first; the more specific rules below then size things
   properly inside the now-unconstrained space. */
body.tone5-shop-branded main.is-layout-constrained {
  max-width: none !important;
  width: 100% !important;
}
body.single-product.tone5-shop-branded div.product .wp-block-columns {
  width: 100% !important;
  max-width: none !important;
}
body.single-product.tone5-shop-branded div.product .wp-block-column {
  flex-basis: 45% !important;
  min-width: 280px !important;
}
body.tone5-shop-branded .woocommerce-product-details__short-description,
body.tone5-shop-branded .woocommerce-Tabs-panel {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-soft-black);
  opacity: 0.85;
}
body.tone5-shop-branded table.variations select,
body.tone5-shop-branded .variations select {
  border-radius: 999px;
  border: 1.5px solid var(--c-warm-grey);
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}
body.tone5-shop-branded .quantity input.qty {
  border-radius: 999px;
  border: 1.5px solid var(--c-warm-grey);
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

/* ---- Cart & Checkout (WooCommerce Blocks) ---- */
body.tone5-shop-branded .wc-block-cart,
body.tone5-shop-branded .wc-block-checkout,
body.tone5-shop-branded .woocommerce-cart,
body.tone5-shop-branded .woocommerce-checkout {
  max-width: 1280px;
  margin: var(--space-5) auto !important;
  padding: 0 var(--space-4);
  font-family: 'Montserrat', sans-serif;
}
body.tone5-shop-branded .wc-block-components-panel,
body.tone5-shop-branded .wc-block-components-order-summary,
body.tone5-shop-branded .wc-block-components-totals-wrapper,
body.tone5-shop-branded .wc-block-cart-item,
body.tone5-shop-branded .wc-block-components-radio-control__input {
  font-family: 'Montserrat', sans-serif;
}
body.tone5-shop-branded input[type="text"],
body.tone5-shop-branded input[type="email"],
body.tone5-shop-branded input[type="tel"],
body.tone5-shop-branded input[type="search"],
body.tone5-shop-branded select,
body.tone5-shop-branded textarea,
body.tone5-shop-branded .wc-block-components-text-input input,
body.tone5-shop-branded .wc-block-components-combobox input {
  border-radius: 6px !important;
  border: 1.5px solid var(--c-warm-grey) !important;
  font-family: 'Montserrat', sans-serif !important;
}
body.tone5-shop-branded .wc-block-components-radio-control-accordion-option,
body.tone5-shop-branded .wc-block-components-radio-control__option {
  border-radius: 6px !important;
  border-color: var(--c-warm-grey) !important;
}
body.tone5-shop-branded .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.tone5-shop-branded .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--c-black);
  font-weight: 700;
}

/* ---- Contact form (Contact Form 7) ---- */
body.tone5-shop-branded .wpcf7-form input[type="text"],
body.tone5-shop-branded .wpcf7-form input[type="email"],
body.tone5-shop-branded .wpcf7-form textarea {
  width: 100%;
  border-radius: 6px;
  border: 1.5px solid var(--c-warm-grey);
  padding: 14px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  margin-bottom: var(--space-2);
}
body.tone5-shop-branded .wpcf7-form input[type="submit"] {
  background: var(--c-black);
  color: var(--c-white);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
}
body.tone5-shop-branded .wpcf7-form input[type="submit"]:hover { opacity: 0.85; }
body.tone5-shop-branded main .wp-block-post-content,
body.tone5-shop-branded main.wp-block-group {
  max-width: 640px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-4);
}

/* ---- Free-shipping progress bar (Cart + Checkout) ----
   Rendered via `wp_body_open` (see inc/free-shipping-bar.php), so it sits as
   a full-width announcement bar above the nav, not inside the page's content
   column — styled deliberately as a top banner, not a card. */
.t5-freeship-bar {
  background: var(--c-pearl);
  border-bottom: 1px solid var(--c-warm-grey);
  padding: var(--space-2) var(--space-4);
}
.t5-freeship-bar__inner {
  max-width: 480px;
  margin: 0 auto;
}
.t5-freeship-bar__text {
  margin: 0 0 var(--space-1);
  font-size: 14px;
  text-align: center;
  color: var(--c-soft-black);
}
.t5-freeship-bar__text strong { color: var(--c-rose-dark); }
.t5-freeship-bar__track {
  height: 8px;
  border-radius: 999px;
  background: var(--c-warm-grey);
  overflow: hidden;
}
.t5-freeship-bar__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--c-rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.t5-freeship-bar.is-complete {
  background: var(--c-rose);
  border-bottom-color: var(--c-rose);
}
.t5-freeship-bar.is-complete .t5-freeship-bar__text {
  color: var(--c-white);
  margin-bottom: 0;
}
.t5-freeship-bar.is-complete .t5-freeship-bar__text strong { color: var(--c-white); }
.t5-freeship-bar.is-complete .t5-freeship-bar__track { display: none; }

/* ---- Checkout "Ciudad de destino" picker (see inc/checkout-city-select.php) ---- */
.t5-city-picker {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-warm-grey);
  padding: var(--space-3) var(--space-4);
}
.t5-city-picker__inner {
  max-width: 480px;
  margin: 0 auto;
}
.t5-city-picker label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
  color: var(--c-soft-black);
}
.t5-city-picker select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--c-warm-grey);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  background: var(--c-white);
  color: var(--c-soft-black);
}
.t5-city-picker__hint {
  margin: var(--space-1) 0 0;
  font-size: 12px;
  color: var(--c-graphite);
}
.t5-city-picker__confirm {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-rose-dark);
}