/* AMP Studio: row alignment + mobile footer. Presentation only. */
/* Let each grid row determine its own height. Never pad names or size lists. */
:is(.amp-refined-shop,.amp-premium-home,.amp-refined-product,.mv-related) .ap-product-grid,
.amp-refined-shop .ap-shop-grid { align-items: stretch !important; }
:is(.amp-refined-shop,.amp-premium-home,.amp-refined-product,.mv-related) .ap-product-card {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}
.ap-product-card > .ap-card-image { flex: 0 0 auto !important; width: 100%; }
/* Only the space AFTER the complete title/variant group flexes. The final two
   rows share a baseline, including cards without a rating or 36% comparison. */
.ap-product-card > .amp-product-card-content.ap-card-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content max-content max-content minmax(0, 1fr) max-content max-content max-content max-content;
  align-content: stretch;
  column-gap: 0 !important;
  row-gap: 0 !important;
  flex: 1 0 auto !important;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
}
.ap-product-card > .ap-card-content > .ap-card-category { grid-row: 1; }
.ap-product-card > .ap-card-content > .ap-card-name { grid-row: 2; }
.ap-product-card > .ap-card-content > .amp-card-sizes { grid-row: 3; }
.ap-product-card > .ap-card-content > .ap-card-rating { grid-row: 5; }
.ap-product-card > .ap-card-content > .ap-card-offer { grid-row: 6; }
.ap-product-card > .ap-card-content > .amp-price-figure { grid-row: 7; }
.ap-product-card > .ap-card-content > .ap-card-add { grid-row: 8; align-self: end; }

/* Shared storefront footer: applies equally to initial HTML and the React
   footer. Do not target review-card footers, checkout totals or admin screens. */
@media (max-width: 1023px) {
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child {
    min-width: 0;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 24px 22px !important;
    width: 100%;
    min-width: 0;
  }
  /* Old enhancements limited these GRID items to max-width:34%. */
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap h3 {
    margin: 0 0 8px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    font: 700 11px/1.5 Inter, system-ui, sans-serif !important;
    letter-spacing: .065em !important;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap ul {
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap li > a {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 36px !important;
    padding: 6px 0 !important;
    font: 400 13px/1.5 Inter, system-ui, sans-serif !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
}
@media (max-width: 767px) {
  /* Compact three-column mobile footer; no product or checkout changes. */
  :is(footer.amp-premium-footer, footer.bg-amp-surface) {
    --amp-footer-gutter: clamp(16px, 4vw, 22px);
    background: #fff !important;
    border-top: 1px solid #dce6f3 !important;
    color: #152641;
    /* Keep content clear of the fixed mobile navigation and iPhone safe area. */
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div {
    padding: 20px var(--amp-footer-gutter) 0 !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child {
    gap: 18px !important;
    padding-bottom: 16px;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px !important;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap h3 {
    margin-bottom: 5px !important;
    font: 700 10px/1.4 Inter, system-ui, sans-serif !important;
    letter-spacing: .025em !important;
    overflow-wrap: normal;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap li > a {
    min-height: 24px !important;
    padding: 3px 0 !important;
    font: 400 12px/1.5 Inter, system-ui, sans-serif !important;
  }
  /* The seven existing groups stay in their original order. Research Tools
     uses a compact final row with three columns of links, not a long list. */
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap > div:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid #e0e7ef;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .flex-1.flex.flex-wrap > div:last-child:nth-child(3n + 1) ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 0;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child > div:first-child {
    width: 100%;
    min-width: 0;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child > div:first-child > a {
    margin-bottom: 10px !important;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child > div:first-child > p {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px !important;
    overflow-wrap: break-word;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child > div:first-child > div.mb-4 {
    margin-bottom: 10px !important;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child > div:first-child > div:last-child a {
    min-height: 24px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding-block: 3px;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:first-child > div:first-child > div:last-child a > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding-top: 12px;
    min-width: 0;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:nth-child(2) > div {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1 !important;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:nth-child(2) > div:first-child {
    align-items: flex-start;
    line-height: 1.5;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:nth-child(2) > div:first-child svg {
    margin-top: 2px;
    flex-shrink: 0;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > div > div:nth-child(2) > div:last-child {
    gap: 8px !important;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .amp-footer-payment-logos {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px !important;
    padding-top: 10px;
    margin-top: 0;
    border-top: 1px solid #e0e7ef;
    min-height: 34px;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) .amp-footer-payment-logos img {
    max-width: 64px;
    object-fit: contain;
    opacity: 1 !important;
    flex: 0 0 auto;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > nav {
    padding: 10px var(--amp-footer-gutter) 0 !important;
    margin-top: 12px;
    gap: 4px 12px;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) > nav a {
    min-height: 24px !important;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
  }
  :is(footer.amp-premium-footer, footer.bg-amp-surface) a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
    border-radius: 4px;
  }
}