/* CMT catalog pages. Inherits tokens from product-page.css. */
.catalog-hero{padding:40px 0 16px}
.catalog-hero.compact{padding-top:8px}
.catalog-hero h1{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3rem);margin:0 0 10px}
.catalog-hero .lead{max-width:62ch;color:var(--muted);margin:0 0 18px}
.platform-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem}
.platform-nav span{color:var(--muted);margin-right:4px}
.platform-link{border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--white);text-decoration:none}
.platform-link:hover,.platform-link:focus-visible{border-color:var(--bronze2)}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:16px 0 24px}
.category-tile{display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--white);text-decoration:none;min-height:110px}
.category-tile:hover,.category-tile:focus-visible{border-color:var(--bronze2)}
.category-tile-name{font-family:Georgia,serif;font-size:1.15rem;line-height:1.25;margin-bottom:2px}
.category-tile-copy{color:var(--muted);font-size:.86rem;line-height:1.4}
.category-tile-count{margin-top:auto;font-size:.78rem;color:var(--bronze2)}
.catalog-count{color:var(--muted);font-size:.85rem}
.catalog-layout{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start;padding-bottom:48px}
/* Handguards carries platform, attachment, profile and twelve lengths, which
   makes the rail taller than the viewport. A sticky element that overflows just
   clips, so the last facets were unreachable. */
.filters{position:sticky;top:88px;background:var(--panel);border:1px solid var(--line);border-radius:6px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain}
.filters::-webkit-scrollbar{width:10px}
.filters::-webkit-scrollbar-thumb{background:var(--cmt-line);border-radius:5px}
@media(max-width:900px){.filters{max-height:none;overflow:visible}}
.filters-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;position:sticky;top:0;background:var(--panel);padding-bottom:8px;z-index:1}
.filters .link{background:none;border:0;color:var(--bronze2);cursor:pointer;font-size:.82rem;padding:0}
.filter-group{border:0;border-top:1px solid var(--line);margin:0;padding:10px 0 4px}
.filter-group legend{font-size:.78rem;color:var(--muted);padding:0 0 6px}
.filter-group label{display:flex;gap:8px;align-items:center;font-size:.9rem;padding:3px 0;cursor:pointer;font-variant-numeric:tabular-nums}
.filters-count{font-size:.78rem;color:var(--muted);margin:10px 0 0}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.product-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
/* Anywhere on the card opens the product: the name's link is stretched across
   it. One link, one tab stop, and the name is still what a screen reader reads. */
.product-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.product-card:hover{border-color:var(--cmt-accent,#a81f33)}
.product-card .product-card-image{position:relative;z-index:0}
.product-card[hidden]{display:none}
.product-card-image{display:block;aspect-ratio:1;background:var(--panel2)}
.product-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.image-placeholder{width:100%;height:100%;background:repeating-linear-gradient(135deg,var(--panel2) 0 12px,var(--panel) 12px 24px)}
.image-placeholder.large{aspect-ratio:1;border-radius:6px}
.product-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;row-gap:4px;flex-wrap:wrap;font-size:.74rem;color:var(--muted)}
.product-card h3{font-size:1rem;margin:0;font-weight:600;line-height:1.3}
.product-card h3 a{color:var(--white);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:.72rem;border:1px solid var(--line);border-radius:3px;padding:2px 6px;color:var(--muted);font-variant-numeric:tabular-nums}
.product-card-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:6px}
.price{font-weight:600;font-variant-numeric:tabular-nums}
.msrp{color:var(--muted);font-weight:400;margin-right:4px}
.stock{font-size:.74rem}.stock.in{color:#9fd8a4}.stock.out{color:var(--muted)}
.badge{font-size:.7rem;border-radius:3px;padding:2px 6px;font-weight:600}
.badge-blem{background:#5a3d1a;color:#f2c98b}
.badge-ffl{background:#2d3a4a;color:#bcd4ee}
.empty{color:var(--muted);grid-column:1/-1}
/* product page */
.price-row{display:flex;gap:8px;align-items:baseline;font-size:1.4rem;margin:8px 0 14px}
.notice{border-left:3px solid var(--bronze2);background:var(--panel);padding:10px 14px;margin:12px 0;font-size:.9rem;line-height:1.5}
.notice-ffl{border-left-color:#7fa6d6}
.limit{color:var(--muted);font-size:.85rem}
.quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.quantity button{background:var(--panel);border:0;color:var(--white);width:36px;height:40px;cursor:pointer;font-size:1.1rem}
.quantity input{width:52px;height:40px;text-align:center;background:var(--black);color:var(--white);border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.quantity input::-webkit-inner-spin-button{appearance:none}
.sku-line{color:var(--muted);font-size:.8rem;margin-top:14px}
.catalog-gallery{display:grid;gap:10px}
.catalog-gallery img{width:100%;height:auto;border-radius:6px;display:block}
.product-detail{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;padding:16px 0 56px;align-items:start}
.detail-copy{line-height:1.65;max-width:70ch}
.specs{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.specs th,.specs td{text-align:left;padding:10px 14px;border-top:1px solid var(--line)}
.specs tr:first-child th,.specs tr:first-child td{border-top:0}
.specs th{color:var(--muted);font-weight:500;width:42%;text-transform:capitalize}
.specs td{font-variant-numeric:tabular-nums}
@media(max-width:900px){.catalog-layout{grid-template-columns:1fr}.filters{position:static}.product-detail{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.category-tile,.product-card,.platform-link{transition:border-color .15s}}

.category-tile.has-art{padding:0;overflow:hidden}
.category-tile-art{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--panel2)}
.category-tile-art img{width:100%;height:100%;object-fit:cover;display:block}
.category-tile.has-art .category-tile-name{padding:14px 18px 0}
.category-tile.has-art .category-tile-copy{padding:0 18px}
.category-tile.has-art .category-tile-count{padding:0 18px 14px}

.catalog-banner{max-height:420px;overflow:hidden;background:var(--black)}
.catalog-banner img{width:100%;height:420px;object-fit:cover;object-position:center 40%;display:block}

/* faded full-bleed hero with overlaid copy */
.catalog-hero-overlay{position:relative;background:#2b2b2b;color:#fff;overflow:hidden;isolation:isolate;display:block}
.catalog-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.66;filter:saturate(.81);z-index:0}
.catalog-hero-overlay::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(43,43,43,.86) 0%,rgba(43,43,43,.62) 38%,rgba(43,43,43,.30) 70%,rgba(43,43,43,.18) 100%)}
.catalog-hero-copy{position:relative;z-index:2;padding:64px 0 56px;min-height:340px;display:flex;flex-direction:column;justify-content:center}
.catalog-hero-copy h1{font-size:clamp(2rem,4.2vw,3rem);margin:8px 0 10px;color:#fff!important;max-width:20ch;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.catalog-hero-copy .lead{color:#ffffff;max-width:60ch;margin:0 0 18px}
.catalog-hero-copy .crumbs{color:#d5d5d5;padding:0;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.catalog-hero-copy .crumbs a{color:#e6e6e6}
.catalog-hero-copy .platform-nav span{color:#bdbdbd}
.catalog-hero-copy .platform-link{color:#fff;background:transparent;border-color:rgba(255,255,255,.4)}
.catalog-hero-copy .platform-link:hover{border-color:#fff}
.catalog-hero-copy .button.secondary{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.65)!important}
.home-hero-copy{padding:96px 0 80px;min-height:440px}
.home-hero-copy h1{font-size:clamp(2.4rem,5vw,3.6rem);max-width:16ch}
.home-hero-copy .actions{display:flex;gap:10px;flex-wrap:wrap}
.home-facts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 0 6px;border-bottom:1px solid var(--cmt-line);margin-bottom:8px}
.home-facts-row div{display:grid;gap:3px;font-size:.9rem}
.home-facts-row strong{color:var(--cmt-ink)}
.home-facts-row span{color:var(--cmt-muted)}
@media(max-width:860px){.catalog-hero-copy{padding:40px 0 34px}.home-hero-copy{padding:56px 0 44px}.home-facts-row{grid-template-columns:1fr 1fr}}
.catalog-hero-overlay .actions a.button.secondary,.catalog-hero-overlay a.button.secondary{background:transparent!important;background-image:none!important;color:#fff!important;border:1px solid rgba(255,255,255,.65)!important}
.catalog-hero-overlay a.button.secondary:hover{background:rgba(255,255,255,.12)!important}
.catalog-hero-copy .lead{color:#ffffff;text-shadow:0 1px 12px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.5)}

.engraving{border:1px solid var(--cmt-line);border-radius:6px;padding:12px 14px;margin:14px 0;background:var(--cmt-surface)}
.engraving legend{font-weight:600;padding:0 6px}
.engraving-price{color:var(--cmt-accent);font-weight:600;margin-left:6px}
.engraving-toggle{display:flex;gap:8px;align-items:center;cursor:pointer}
.engraving-text{display:grid;gap:4px;margin-top:10px}
.engraving-text small{color:var(--cmt-muted);font-weight:400;margin-left:6px}
.engraving-text input{height:38px;border:1px solid var(--cmt-line);border-radius:4px;padding:0 10px;font:inherit;text-transform:uppercase;letter-spacing:.06em}
.engraving-note{color:var(--cmt-muted);font-size:.82rem;margin:8px 0 0}
.catalog-layout.no-filters{grid-template-columns:1fr}
.product-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.catalog-hero-art[data-focus="top"]{object-position:center 22%}
.catalog-hero-art[data-focus="upper"]{object-position:center 40%}
.catalog-hero-art[data-focus="center"]{object-position:center 50%}
.catalog-hero-art[data-focus="lower"]{object-position:center 60%}
.catalog-hero-art[data-focus="bottom"]{object-position:center 78%}
.catalog-hero-art[data-focus="right"]{object-position:65% 50%}
.catalog-hero-art[data-focus="left"]{object-position:35% 50%}

/* Phone layout. auto-fill with a 240px minimum keeps two columns alive on a
   narrow viewport only when the container is wider than the screen, which is
   exactly the state a horizontal scrollbar comes from. */
@media(max-width:560px){
  .category-grid{grid-template-columns:1fr;gap:12px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .catalog-hero-copy .lead{max-width:none}
}

/* product-page.css sets a poster-scale uppercase h1 (clamp(3rem,6vw,6rem),
   line-height .84) for the nine Plan B landing pages, where the product name is
   two short words. Catalog names are long - "UHPR-15.0 MOD 2 HDX Rail" wrapped
   to three lines at 64px - so catalog product pages get a heading sized for a
   catalogue rather than a poster. */
[data-catalog-page="product"] .product-copy h1{
  font-size:clamp(1.85rem,3.1vw,2.7rem);
  line-height:1.1;
  letter-spacing:-.02em;
  text-transform:none;
  margin:4px 0 12px;
}
@media(max-width:560px){
  [data-catalog-page="product"] .product-copy h1{font-size:clamp(1.6rem,6.5vw,2.1rem)}
}

/* Shop index: every top-level category on one row on desktop. The tile count is
   published as data-tiles by the renderer, so this adapts if a category is
   added or retired rather than hard-coding today's eight. Below 1080px the grid
   falls back to the auto-fill rule above. */
@media(min-width:1080px){
  .category-grid-top{gap:10px}
  .category-grid-top[data-tiles="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .category-grid-top[data-tiles="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
  .category-grid-top[data-tiles="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .category-grid-top[data-tiles="7"]{grid-template-columns:repeat(7,minmax(0,1fr))}
  .category-grid-top[data-tiles="8"]{grid-template-columns:repeat(8,minmax(0,1fr))}
  .category-grid-top[data-tiles="9"]{grid-template-columns:repeat(9,minmax(0,1fr))}
  .category-grid-top[data-tiles="10"]{grid-template-columns:repeat(10,minmax(0,1fr))}
  /* At eight across a tile is ~140px, so the blurb cannot read. Name, art and
     line count only; the description still ships in the DOM for crawlers. */
  .category-grid-top .category-tile{padding:10px;min-height:0;gap:4px}
  .category-grid-top .category-tile-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .category-grid-top .category-tile-name{font-size:.9rem;line-height:1.15}
  .category-grid-top .category-tile-count{font-size:.7rem}
  .category-grid-top .category-tile-art{aspect-ratio:1.3}
}

/* Category pages stack the lines within a category above every product in it.
   These two bands were previously unlabelled and adjacent, so the product grid
   read as a continuation of the line tiles. */
.catalog-group { margin-top: 6px; }
.catalog-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.catalog-group-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cmt-ink);
}
.catalog-group-head span { color: var(--cmt-muted); font-size: .85rem; }
.catalog-group-divider {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--cmt-line);
}
@media (max-width: 560px) {
  .catalog-group-divider { margin-top: 18px; padding-top: 16px; }
}

/* A category small enough to show in one desktop row does so, rather than
   leaving a ragged second row of one or two cards. Scoped to unfiltered
   categories: with the 240px filter rail alongside, seven columns would leave
   each card too narrow to read. Below 1080px the auto-fill rule above applies. */
@media (min-width: 1080px) {
  .catalog-layout.no-filters .product-grid[data-products="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-layout.no-filters .product-grid[data-products="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-layout.no-filters .product-grid[data-products="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-layout.no-filters .product-grid[data-products="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .catalog-layout.no-filters .product-grid[data-products="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .catalog-layout.no-filters .product-grid[data-products="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .catalog-layout.no-filters .product-grid[data-products="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
  /* At seven and eight across the card body has to give up some padding. */
  .catalog-layout.no-filters .product-grid[data-products="7"] .product-card-body,
  .catalog-layout.no-filters .product-grid[data-products="8"] .product-card-body { padding: 10px; gap: 5px; }
  .catalog-layout.no-filters .product-grid[data-products="7"] .product-card h3,
  .catalog-layout.no-filters .product-grid[data-products="8"] .product-card h3 { font-size: .9rem; line-height: 1.2; }
  .catalog-layout.no-filters .product-grid[data-products="7"] .chips,
  .catalog-layout.no-filters .product-grid[data-products="8"] .chips { display: none; }
}

/* Filter sidebar: the sticky header has to cover the whole width of the panel.
   It was laid out inside the panel's content box, so it stopped 16px short on
   each side and started 14px down from the top — and product filters scrolling
   underneath showed through in that border of uncovered panel. The header now
   bleeds out to the panel edges and carries the top padding itself, so there is
   no strip of scrollable content above or beside it. */
.filters { padding: 0 16px 14px; }
.filters-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -16px 10px;
  padding: 14px 16px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
/* Rounded panel corners would otherwise show the list through the two top
   corners of the header. */
.filters { border-radius: 6px; }
.filters-head { border-radius: 6px 6px 0 0; }

/* The filter panel head doubles as a heading and, on a phone, as the control
   that opens the panel. The button is styled to read as the heading it replaces
   so nothing changes on a wide screen. */
.filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: default;
  text-align: left;
}
.filters-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: transform .15s ease;
}
@media (max-width: 900px) {
  .filters-toggle { cursor: pointer; }
  .filters-toggle::after { opacity: .55; }
  /* Closed: the caret points down at the list it will reveal. */
  .filters.is-collapsed .filters-toggle::after { transform: rotate(45deg); }
  .filters:not(.is-collapsed) .filters-toggle::after { transform: rotate(-135deg); margin-top: 2px; }
  .filters.is-collapsed .filter-group,
  .filters.is-collapsed .filters-count { display: none; }
  .filters.is-collapsed .filters-head { margin-bottom: 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .filters-toggle::after { transition: none; } }

/* -------------------------------------------- category banner with its lines

   A customer arriving on Handguards is choosing a line before they are choosing
   a rail, so the lines sit inside the banner instead of under it: the banner
   grows to hold them, and the first screen carries the choice rather than a
   photograph the customer has to scroll past to reach it. */
.catalog-hero-overlay.has-lines .catalog-hero-copy {
  min-height: 0;
  padding: 44px 0 22px;
}
.catalog-hero-lines {
  position: relative;
  z-index: 2;
  padding-bottom: 46px;
}
/* The heading sits on the photograph now, so it takes the banner's colours. */
.catalog-hero-lines .catalog-group-head h2 { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.catalog-hero-lines .catalog-group-head span { color: #d9d9d9; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
/* Cards over a photograph need their own edge, or they float. */
.catalog-hero-lines .category-tile {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
.catalog-hero-lines .category-tile:hover,
.catalog-hero-lines .category-tile:focus-visible { border-color: var(--cmt-accent, #a81f33); }

/* The scrim is tuned for a heading in the left third. With a full-width row of
   cards over it, it has to darken the whole frame instead. */
.catalog-hero-overlay.has-lines::after {
  background:
    linear-gradient(90deg, rgba(43, 43, 43, .88) 0%, rgba(43, 43, 43, .66) 40%, rgba(43, 43, 43, .46) 100%),
    linear-gradient(180deg, rgba(43, 43, 43, 0) 30%, rgba(43, 43, 43, .42) 100%);
}

@media (max-width: 560px) {
  .catalog-hero-overlay.has-lines .catalog-hero-copy { padding: 26px 0 16px; }
  .catalog-hero-lines { padding-bottom: 26px; }
}

/* ---------------------------------- products inside the category banner

   A category with lines puts the lines on the photograph; one without has
   nothing else to show, so its products go there instead. Either way the banner
   reaches down to the cards rather than stopping above them. */
.catalog-hero-products {
  position: relative;
  z-index: 2;
  padding-top: 4px;
}
.catalog-hero-products .catalog-group-head h2 { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.catalog-hero-products .catalog-group-head span { color: #d9d9d9; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.catalog-layout.in-hero {
  position: relative;
  z-index: 2;
  padding-bottom: 46px;
}
/* Cards and the filter panel need their own edge over a photograph, or they
   float on it. */
.catalog-layout.in-hero .product-card,
.catalog-layout.in-hero .filters {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
.catalog-layout.in-hero .product-card:hover { border-color: var(--cmt-accent, #a81f33); }
.catalog-layout.in-hero .filters,
.catalog-layout.in-hero .filters label,
.catalog-layout.in-hero .filters legend,
.catalog-layout.in-hero .filters-toggle,
.catalog-layout.in-hero .filters-count { color: var(--cmt-ink, #222); }
.catalog-layout.in-hero .filters legend,
.catalog-layout.in-hero .filters-count { color: var(--cmt-muted, #49515b); }
@media (max-width: 560px) {
  .catalog-layout.in-hero { padding-bottom: 26px; }
}

/* The product count sits with the tiles it counts, on the photograph. */
.catalog-hero-lines .catalog-count {
  margin: 12px 0 0;
  color: #d9d9d9;
  font-size: .82rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

/* Catalogue photographs are product cut-outs shot square on white; the
   photography in /assets/cmt/ is composed to be cropped. Cropping a cut-out to
   a 16:9 tile slices the part in half — the J.A.G. gas block showed as a band
   through its middle — so a catalogue image is fitted whole and the tile
   supplies the white around it. */
.category-tile-art img[src^="/assets/catalog/"] {
  box-sizing: border-box;
  object-fit: contain;
  padding: 8px;
  background: #fff;
}

/* J.A.G. Gas Blocks is four near-identical parts the size of a wedding ring,
   and the card gave each one a square photograph as tall as it was wide: a
   small black part adrift in a field of white, and a card taller than the hero
   above it. The row keeps its four columns and its full width; the photograph
   gives back the height instead: at 2:1 the card comes out 30% shorter. The part
   is fitted rather than cropped, so a shorter frame shows all of it, not a band
   through its middle. Scoped by category: nothing else moves. */
.catalog-layout[data-category="gas-blocks"] .product-card-image {
  aspect-ratio: 2 / 1;
  /* The card is a column flex container, so this block is a flex item and its
     min-height resolves to the photograph own 600px-square intrinsic size —
     which silently wins over the ratio. */
  min-height: 0;
}
.catalog-layout[data-category="gas-blocks"] .product-card-image img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 6px;
  background: #fff;
}