/*
 * Moaiven Commerce 2.5.5 — layout normalization layer
 * Purpose: keep page gutters, vertical rhythm and Gutenberg block spacing
 * consistent across information pages, WooCommerce views and standard posts.
 * Loaded after style.css and editorial.css so fixes stay isolated and auditable.
 */

:root {
  --mv2-layout-max: 1440px;
  --mv2-reading-max: 1180px;
  --mv2-layout-edge: var(--mv2-edge, clamp(18px, 4vw, 64px));
  --mv2-page-top: clamp(42px, 5vw, 76px);
  --mv2-page-bottom: clamp(64px, 7vw, 108px);
}

/* Prevent Gutenberg's generated block-gap margins from creating phantom bands
   between the authored full-width sections. */
.mv2-page,
.mv2-shop,
.mv2-product-page,
.mv2-account-page,
.mv2-404 {
  width: 100%;
  max-width: none;
  margin: 0 !important;
}

.mv2-page > *,
.mv2-shop > *,
.mv2-product-page > *,
.mv2-account-page > *,
.mv2-404 > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Shared authored containers: one gutter system, always centered. */
.mv2-container,
.mv2-page-content,
.mv2-shop-toolbar,
.mv2-shop-products,
.mv2-product-breadcrumb,
.mv2-product-stage,
.mv2-product-details,
.mv2-related,
.mv2-account-hero,
.mv2-account-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Informational pages. */
.mv2-page-content {
  width: min(calc(100% - (var(--mv2-layout-edge) * 2)), var(--mv2-reading-max)) !important;
  max-width: var(--mv2-reading-max) !important;
  padding-top: clamp(44px, 5vw, 72px) !important;
  padding-bottom: clamp(52px, 5.8vw, 86px) !important;
}

.mv2-page-content > .wp-block-post-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.mv2-page-content > .wp-block-post-content > :first-child {
  margin-block-start: 0 !important;
}

.mv2-page-content > .wp-block-post-content > :last-child {
  margin-block-end: 0 !important;
}

.mv2-page-extras {
  margin: 0 !important;
  padding: 0 0 clamp(62px, 6.5vw, 100px) !important;
}

.mv2-page-extras > .mv2-container {
  width: min(calc(100% - (var(--mv2-layout-edge) * 2)), var(--mv2-layout-max)) !important;
  max-width: var(--mv2-layout-max) !important;
}

/* Keep page-specific wide content deliberate rather than accidental. */
.moaiven-page-contacto .mv2-page-content,
.moaiven-page-preguntas-frecuentes .mv2-page-content,
.moaiven-page-seguimiento-de-pedido .mv2-page-content {
  width: min(calc(100% - (var(--mv2-layout-edge) * 2)), 1160px) !important;
  max-width: 1160px !important;
}

.moaiven-page-nosotros .mv2-page-content > .wp-block-post-content {
  max-width: 900px !important;
}

/* Catalogue / taxonomy / product search pages. */
.mv2-shop-toolbar,
.mv2-shop-products {
  width: min(calc(100% - (var(--mv2-layout-edge) * 2)), var(--mv2-layout-max)) !important;
  max-width: var(--mv2-layout-max) !important;
}

.mv2-shop-toolbar {
  padding-top: clamp(22px, 2.5vw, 32px) !important;
  padding-bottom: clamp(22px, 2.5vw, 32px) !important;
}

.mv2-shop-products {
  padding-top: clamp(34px, 4vw, 52px) !important;
  padding-bottom: clamp(68px, 7vw, 104px) !important;
}

.mv2-shop > .wp-block-woocommerce-store-notices,
.mv2-shop > .wc-block-store-notices,
.mv2-product-page > .wp-block-woocommerce-store-notices,
.mv2-product-page > .wc-block-store-notices {
  width: min(calc(100% - (var(--mv2-layout-edge) * 2)), var(--mv2-layout-max));
  max-width: var(--mv2-layout-max);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Product page: align breadcrumb, gallery/buy-box and lower sections to one grid. */
.mv2-product-page {
  padding-top: 0 !important;
}

.mv2-product-breadcrumb,
.mv2-product-stage,
.mv2-product-details,
.mv2-related {
  width: min(calc(100% - (var(--mv2-layout-edge) * 2)), var(--mv2-layout-max)) !important;
  max-width: var(--mv2-layout-max) !important;
}

.mv2-product-breadcrumb {
  padding-top: clamp(18px, 2.2vw, 30px) !important;
  padding-bottom: clamp(12px, 1.8vw, 22px) !important;
}

.mv2-product-stage {
  padding-top: clamp(12px, 2vw, 26px) !important;
  padding-bottom: clamp(62px, 7vw, 108px) !important;
}

.mv2-product-details,
.mv2-related {
  padding-top: clamp(58px, 6.5vw, 96px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

/* Account page. */
.mv2-account-hero,
.mv2-account-content {
  width: min(calc(100% - (var(--mv2-layout-edge) * 2)), 1100px) !important;
  max-width: 1100px !important;
}

.mv2-account-hero {
  padding-top: clamp(54px, 7vw, 104px) !important;
  padding-bottom: clamp(26px, 3vw, 40px) !important;
}

.mv2-account-content {
  padding-top: 0 !important;
  padding-bottom: clamp(68px, 8vw, 112px) !important;
}

/* Legacy/standard templates (blog, archive, cart, checkout, confirmation).
   style.css previously forced zero top padding here, which made these pages
   visually collide with the header. */
.moaiven-store-main {
  width: 100% !important;
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--mv2-page-top) !important;
  padding-right: var(--mv2-layout-edge) !important;
  padding-bottom: var(--mv2-page-bottom) !important;
  padding-left: var(--mv2-layout-edge) !important;
}

.moaiven-store-main > .alignwide,
.moaiven-store-main > .wp-block-query,
.moaiven-store-main > .wp-block-post-content,
.moaiven-store-main > .wp-block-woocommerce-cart,
.moaiven-store-main > .wp-block-woocommerce-checkout,
.moaiven-store-main > .wp-block-woocommerce-order-confirmation-status,
.moaiven-store-main > .wp-block-woocommerce-order-confirmation-summary,
.moaiven-store-main > .wp-block-woocommerce-order-confirmation-totals-wrapper,
.moaiven-store-main > .wp-block-woocommerce-order-confirmation-downloads-wrapper,
.moaiven-store-main > .wc-block-order-confirmation-address-wrapper,
.moaiven-store-main > .wp-block-woocommerce-order-confirmation-additional-fields-wrapper,
.moaiven-store-main > .wp-block-woocommerce-order-confirmation-additional-information {
  width: min(100%, var(--mv2-layout-max)) !important;
  max-width: var(--mv2-layout-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Standard article text remains readable even while media can use the wide grid. */
.single-post .moaiven-store-main > .wp-block-post-content,
.blog .moaiven-store-main > .wp-block-query,
.archive:not(.post-type-archive-product) .moaiven-store-main > .wp-block-query {
  max-width: 980px !important;
}

/* Avoid collapsed/oversized first and last margins inside standard screens. */
.moaiven-store-main > :first-child {
  margin-block-start: 0 !important;
}

.moaiven-store-main > :last-child {
  margin-block-end: 0 !important;
}

/* Checkout is intentionally a little tighter below its dedicated header. */
.woocommerce-checkout .moaiven-store-main {
  padding-top: clamp(28px, 4vw, 54px) !important;
}

/* Responsive spacing. */
@media (max-width: 900px) {
  :root {
    --mv2-page-top: clamp(34px, 6vw, 54px);
    --mv2-page-bottom: clamp(54px, 8vw, 82px);
  }

  .mv2-page-content {
    padding-top: 40px !important;
    padding-bottom: 54px !important;
  }

  .mv2-product-details,
  .mv2-related {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

@media (max-width: 782px) {
  :root {
    --mv2-layout-edge: 18px;
  }

  .mv2-page-content,
  .moaiven-page-contacto .mv2-page-content,
  .moaiven-page-preguntas-frecuentes .mv2-page-content,
  .moaiven-page-seguimiento-de-pedido .mv2-page-content {
    width: calc(100% - 36px) !important;
  }

  .mv2-shop-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .mv2-product-stage {
    padding-top: 8px !important;
    padding-bottom: 58px !important;
  }

  .mv2-account-content .woocommerce {
    padding: clamp(18px, 5vw, 28px);
  }
}

@media (max-width: 560px) {
  :root {
    --mv2-layout-edge: 16px;
    --mv2-page-top: 32px;
    --mv2-page-bottom: 58px;
  }

  .mv2-page-content,
  .moaiven-page-contacto .mv2-page-content,
  .moaiven-page-preguntas-frecuentes .mv2-page-content,
  .moaiven-page-seguimiento-de-pedido .mv2-page-content {
    width: calc(100% - 32px) !important;
    padding-top: 34px !important;
    padding-bottom: 46px !important;
  }

  .mv2-page-extras {
    padding-bottom: 58px !important;
  }

  .mv2-shop-toolbar {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .mv2-shop-products {
    padding-top: 28px !important;
    padding-bottom: 64px !important;
  }

  .mv2-product-breadcrumb {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  .mv2-product-stage {
    padding-bottom: 50px !important;
  }

  .mv2-account-hero {
    padding-top: 44px !important;
    padding-bottom: 24px !important;
  }

  .mv2-account-content {
    padding-bottom: 64px !important;
  }
}

/* ========================================================================== 
   2.5.6 — Catalogue hero / responsive collage refinement
   Keeps the catalogue introduction compact, balanced and predictable across
   desktop, tablet and mobile. Explicit grid placement avoids implicit-layout
   drift when product titles or image proportions change.
   ========================================================================== */
.mv2-shop-hero {
  padding: clamp(48px, 4.6vw, 72px) 0 !important;
  background: linear-gradient(135deg, #f8fbfd 0%, #eef7fa 48%, #e8f3f7 100%);
}

.mv2-shop-hero-grid {
  grid-template-columns: minmax(360px, .9fr) minmax(560px, 1.1fr) !important;
  gap: clamp(40px, 4.2vw, 68px) !important;
  align-items: center !important;
}

.mv2-shop-hero-copy {
  width: 100%;
  max-width: 570px !important;
}

.mv2-shop-hero-copy h1 {
  margin: 14px 0 18px !important;
  font-size: clamp(4.25rem, 5vw, 6.15rem) !important;
  line-height: .86 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}

.mv2-shop-hero-copy p {
  max-width: 540px !important;
  margin: 0 !important;
  font-size: clamp(.98rem, 1vw, 1.06rem) !important;
  line-height: 1.68 !important;
}

.mv2-shop-tags {
  gap: 9px !important;
  margin-top: 24px !important;
}

.mv2-shop-tags a,
.mv2-shop-tags span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px !important;
  white-space: nowrap;
}

.mv2-shop-collage {
  width: 100%;
  max-width: none !important;
  min-width: 0;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
  grid-template-rows: repeat(2, clamp(188px, 11vw, 214px)) !important;
  gap: 14px !important;
  align-self: center;
}

.mv2-shop-collage-item {
  min-width: 0;
  min-height: 0;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(4, 35, 58, .07);
  isolation: isolate;
}

.mv2-shop-collage-item--1 {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

.mv2-shop-collage-item--2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.mv2-shop-collage-item--3 {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.mv2-shop-collage-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .35s ease;
}

.mv2-shop-collage-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(2, 17, 28, .2));
  z-index: 1;
}

.mv2-shop-collage-item span {
  z-index: 2;
  left: 14px !important;
  right: auto !important;
  bottom: 14px !important;
  width: auto;
  max-width: calc(100% - 28px);
  padding: 9px 13px !important;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px !important;
  background: rgba(4, 24, 38, .82) !important;
  box-shadow: 0 8px 20px rgba(1, 14, 23, .14);
  font-size: .73rem !important;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .mv2-shop-collage-item:hover img {
    transform: scale(1.025);
  }
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .mv2-shop-hero-grid {
    grid-template-columns: minmax(330px, .88fr) minmax(500px, 1.12fr) !important;
    gap: 36px !important;
  }

  .mv2-shop-hero-copy h1 {
    font-size: clamp(4rem, 5.5vw, 5.25rem) !important;
  }
}

@media (max-width: 1024px) {
  .mv2-shop-hero {
    padding: 46px 0 54px !important;
  }

  .mv2-shop-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .mv2-shop-hero-copy {
    max-width: 760px !important;
  }

  .mv2-shop-hero-copy h1 {
    max-width: 700px;
    font-size: clamp(4rem, 9vw, 5.6rem) !important;
  }

  .mv2-shop-collage {
    width: min(100%, 860px);
    margin-inline: auto;
    grid-template-rows: repeat(2, clamp(190px, 21vw, 240px)) !important;
  }
}

@media (max-width: 781px) {
  .mv2-shop-hero {
    padding: 36px 0 44px !important;
  }

  .mv2-shop-hero-grid {
    gap: 30px !important;
  }

  .mv2-shop-hero-copy h1 {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    font-size: clamp(3.35rem, 12vw, 4.9rem) !important;
    line-height: .88 !important;
  }

  .mv2-shop-hero-copy p {
    max-width: 620px !important;
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }

  .mv2-shop-tags {
    margin-top: 20px !important;
  }

  .mv2-shop-collage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: clamp(230px, 48vw, 320px) clamp(145px, 29vw, 190px) !important;
    gap: 12px !important;
  }

  .mv2-shop-collage-item--1 {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }

  .mv2-shop-collage-item--2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .mv2-shop-collage-item--3 {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .mv2-shop-collage-item span {
    left: 12px !important;
    bottom: 12px !important;
    max-width: calc(100% - 24px);
    padding: 8px 11px !important;
    font-size: .7rem !important;
  }
}

@media (max-width: 560px) {
  .mv2-shop-hero {
    padding: 30px 0 38px !important;
  }

  .mv2-shop-hero-grid {
    gap: 26px !important;
  }

  .mv2-shop-hero-copy h1 {
    font-size: clamp(3rem, 15vw, 4.15rem) !important;
    letter-spacing: -.06em !important;
  }

  .mv2-shop-tags {
    width: calc(100vw - 32px);
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 1px 0 5px;
    margin-bottom: -5px;
  }

  .mv2-shop-tags::-webkit-scrollbar {
    display: none;
  }

  .mv2-shop-tags a,
  .mv2-shop-tags span {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 7px 12px !important;
    font-size: .72rem !important;
  }

  .mv2-shop-collage {
    grid-template-rows: clamp(205px, 59vw, 245px) clamp(132px, 38vw, 158px) !important;
    gap: 10px !important;
  }

  .mv2-shop-collage-item {
    border-radius: 18px !important;
  }

  .mv2-shop-collage-item span {
    left: 9px !important;
    right: 9px !important;
    bottom: 9px !important;
    width: auto;
    max-width: none;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    font-size: .66rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .mv2-shop-hero-copy h1 {
    font-size: clamp(2.85rem, 14.2vw, 3.45rem) !important;
  }

  .mv2-shop-collage {
    grid-template-rows: 200px 126px !important;
  }
}

/* Moaiven Commerce 2.5.7.3 — remove the Gutenberg root block-gap seam
   between page content and the footer without changing section spacing. */
.wp-site-blocks > main + .wp-block-template-part,
.wp-site-blocks > main + footer.mv2-footer,
.wp-site-blocks > main + .mv2-footer,
main + footer.mv2-footer,
main + .mv2-footer {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

.mv2-footer {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}


/* Moaiven Commerce 2.6.2 — single product desktop spacing
   WooCommerce's gallery renders at roughly 640px on large screens. The former
   1.42fr gallery track was much wider than the rendered gallery, leaving a
   large empty strip before the buy box. Keep the media size stable and size
   the desktop tracks around the actual gallery and readable buy-box widths. */
@media (min-width: 1281px) {
  .mv2-product-stage {
    grid-template-columns: minmax(0, 640px) minmax(420px, 680px) !important;
    column-gap: clamp(36px, 3vw, 56px) !important;
    justify-content: center !important;
  }

  .mv2-product-stage > .wp-block-column {
    width: 100% !important;
    max-width: none !important;
    flex-basis: auto !important;
  }

  .mv2-product-gallery,
  .mv2-product-gallery .wp-block-woocommerce-product-image-gallery,
  .mv2-product-gallery .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 640px !important;
  }

  .mv2-product-buybox {
    width: 100% !important;
    max-width: 680px !important;
  }
}