/* ============================================================
   MACRO MARKET — Información de envío
   Rendered under the cart and the checkout, and reused as the
   body of the Políticas de Envío page. Tokens come from
   theme assets/macromarket/css/tokens.css; the fallbacks after
   each var() keep the block honest if it is ever rendered on a
   page that does not load tokens.css.
   ============================================================ */

.mm-shipinfo {
  --shipinfo-line: var(--mm-line, rgba(30, 42, 58, 0.12));
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: clamp(24px, 4vw, 40px);
  background: var(--bg1, #fff);
  border: 1px solid var(--shipinfo-line);
  border-top: 3px solid var(--mm-deep-navy, #1e2a3a);
  border-radius: var(--r-3, 8px);
  box-shadow: var(--shadow-2, 0 6px 16px -4px rgba(30, 42, 58, 0.1));
  color: var(--fg2, #2b3340);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--t-small, 14px);
  line-height: var(--lh-body, 1.55);
}

/* On the policies page the section is the page body, so it drops the card. */
.mm-shipinfo--page {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Head ---------- */

.mm-shipinfo__head { margin-bottom: 16px; }

.mm-shipinfo__eyebrow {
  display: block;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: var(--t-micro, 11px);
  letter-spacing: var(--track-eyebrow, 0.28em);
  text-transform: uppercase;
  color: var(--fg3, #5b6472);
  margin-bottom: 10px;
}

.mm-shipinfo__title {
  margin: 0;
  font-family: var(--font-display, 'Brunson', 'Anton', 'Arial Narrow', sans-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: var(--w-bold, 700);
  line-height: var(--lh-heading, 1.12);
  color: var(--fg1, #1e2a3a);
}

.mm-shipinfo__lede {
  margin: 0 0 24px;
  max-width: 68ch;
  color: var(--fg2, #2b3340);
}

.mm-shipinfo__subhead {
  margin: 0 0 14px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: var(--t-micro, 11px);
  font-weight: var(--w-semi, 600);
  letter-spacing: var(--track-caps, 0.14em);
  text-transform: uppercase;
  color: var(--fg3, #5b6472);
}

/* ---------- Rate tiles ---------- */

.mm-shipinfo__rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  background: var(--shipinfo-line);
  border: 1px solid var(--shipinfo-line);
  border-radius: var(--r-2, 4px);
  overflow: hidden;
}

.mm-shipinfo__rate {
  background: var(--bg2, #faf6ef);
  padding: 16px 18px;
}

.mm-shipinfo__rate--free { background: rgba(201, 162, 74, 0.12); }

.mm-shipinfo__rate-label {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t-micro, 11px);
  letter-spacing: var(--track-caps, 0.14em);
  text-transform: uppercase;
  color: var(--fg3, #5b6472);
  margin-bottom: 6px;
}

.mm-shipinfo__rate-value {
  display: block;
  font-family: var(--font-display, 'Brunson', 'Anton', sans-serif);
  font-size: 22px;
  font-weight: var(--w-bold, 700);
  color: var(--fg1, #1e2a3a);
}

/* WooCommerce wraps prices in its own spans; keep them inheriting. */
.mm-shipinfo .woocommerce-Price-amount,
.mm-shipinfo .woocommerce-Price-currencySymbol {
  font: inherit;
  color: inherit;
}

/* ---------- Couriers ---------- */

.mm-shipinfo__couriers { margin-bottom: 28px; }

.mm-shipinfo__courier-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.mm-shipinfo__courier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg2, #faf6ef);
  border: 1px solid var(--shipinfo-line);
  border-radius: var(--r-2, 4px);
}

.mm-shipinfo__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--shipinfo-line);
  border-radius: var(--r-2, 4px);
}

/* C807 and friends only publish a white wordmark, so those tiles go navy. */
.mm-shipinfo__logo--dark {
  background: var(--mm-deep-navy, #1e2a3a);
  border-color: var(--mm-deep-navy, #1e2a3a);
}

.mm-shipinfo__logo img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mm-shipinfo__logo-fallback {
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: var(--w-bold, 700);
  color: var(--fg1, #1e2a3a);
}

.mm-shipinfo__courier-name {
  margin: 0 0 6px;
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: var(--w-bold, 700);
  line-height: 1.2;
  color: var(--fg1, #1e2a3a);
}

.mm-shipinfo__courier-name a { color: inherit; }
.mm-shipinfo__courier-name a:hover,
.mm-shipinfo__courier-name a:focus-visible { color: var(--accent-primary, #2f588c); }

.mm-shipinfo__courier-desc {
  margin: 0;
  font-size: 13px;
  color: var(--fg3, #5b6472);
}

.mm-shipinfo__note {
  margin: 0;
  max-width: 72ch;
  font-size: 13px;
  color: var(--fg3, #5b6472);
}

/* ---------- Islas de la Bahía notice ---------- */

.mm-shipinfo__island {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 28px;
  padding: 16px 18px;
  background: rgba(201, 162, 74, 0.14);
  border: 1px solid rgba(201, 162, 74, 0.5);
  border-left: 4px solid var(--mm-gold, #c9a24a);
  border-radius: var(--r-2, 4px);
}

.mm-shipinfo__island[hidden] { display: none; }

.mm-shipinfo__island p {
  margin: 0;
  color: var(--fg1, #1e2a3a);
}

.mm-shipinfo__island-flag {
  flex: none;
  margin-top: 2px;
  padding: 3px 10px;
  background: var(--mm-deep-navy, #1e2a3a);
  color: var(--mm-warm-sand, #e7d8c4);
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t-micro, 11px);
  letter-spacing: var(--track-caps, 0.14em);
  text-transform: uppercase;
}

/* Slide the notice in rather than popping it, since it appears mid-form. */
.mm-shipinfo__island.is-visible { animation: mm-shipinfo-in var(--dur-med, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }

@keyframes mm-shipinfo-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-shipinfo__island.is-visible { animation: none; }
}

/* ---------- Policies ---------- */

.mm-shipinfo__policies {
  padding-left: 18px;
  border-left: 2px solid var(--shipinfo-line);
}

.mm-shipinfo__policies p {
  margin: 0 0 10px;
  max-width: 74ch;
  color: var(--fg2, #2b3340);
}

.mm-shipinfo__policies p:last-child { margin-bottom: 0; }

/* ---------- Link out ---------- */

.mm-shipinfo__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t-caption, 12px);
  font-weight: var(--w-semi, 600);
  letter-spacing: var(--track-caps, 0.14em);
  text-transform: uppercase;
  color: var(--mm-deep-navy, #1e2a3a);
  border-bottom: 2px solid var(--mm-gold, #c9a24a);
  padding-bottom: 3px;
  text-decoration: none;
}

.mm-shipinfo__link:hover,
.mm-shipinfo__link:focus-visible {
  color: var(--accent-primary, #2f588c);
  border-bottom-color: var(--accent-primary, #2f588c);
}

.mm-shipinfo__link-arrow { transition: transform var(--dur-fast, 120ms) var(--ease-standard, ease); }
.mm-shipinfo__link:hover .mm-shipinfo__link-arrow { transform: translateX(3px); }

/* ---------- Políticas de Envío page ----------
   The page drops the card chrome (above) but its sections sit on sand and on
   navy, so the courier tiles and the policy copy need their own footing. */

.mm-section--sand .mm-shipinfo--page .mm-shipinfo__courier {
  background: var(--bg1, #fff);
}

.mm-policy-text p {
  color: var(--fg-on-dark-2, rgba(231, 216, 196, 0.72));
  margin: 0 0 12px;
  max-width: 74ch;
}

.mm-policy-text p:last-child { margin-bottom: 0; }

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
  .mm-shipinfo { padding: 20px 16px; }
  .mm-shipinfo__rates { grid-template-columns: 1fr; }
  .mm-shipinfo__island { flex-direction: column; gap: 10px; }
}