/* ============================================================================
   Imperial Steaks - components.css
   REUSABLE COMPONENT CLASSES
   ----------------------------------------------------------------------------
   One block per component, one flat class per element. Each block is written
   so the matching Elementor widget can reproduce it from its own style tab
   (see docs/ELEMENTOR_MIGRATION.md). No deep selector nesting, no inline
   styles, no absolute-positioning tricks.
   ========================================================================== */

/* ============================================================================
   1. SITE HEADER + PRIMARY NAVIGATION
   Elementor: Theme Builder > Header template
   (Container > Site Logo widget + Nav Menu widget)
   ========================================================================== */

.imperial-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--is-black-onyx);
  border-bottom: 2px solid var(--is-red);
}

.imperial-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--is-space-sm);
  padding-block: var(--is-space-sm);
}

.imperial-header__brand { display: block; line-height: 0; }

.imperial-header__logo { width: 150px; height: auto; }

/* Mobile menu button - hidden on desktop, shown under 1024px. */
.imperial-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background-color: transparent;
  border: var(--is-border-width) solid var(--is-hairline);
  border-radius: var(--is-radius-sm);
  cursor: pointer;
}

.imperial-nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--is-white);
}

.imperial-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--is-space-md);
}

/* The second selector matches WordPress: wp_nav_menu() emits plain <a> tags
   with no custom class, so the WP theme needs this to style its nav at all. */
.imperial-nav__link,
.imperial-nav__list a {
  display: inline-block;
  padding-block: var(--is-space-xs);
  color: var(--is-white);
  font-family: var(--is-font-body);
  font-size: var(--is-size-small);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.imperial-nav__link:hover,
.imperial-nav__link:focus-visible,
.imperial-nav__list a:hover,
.imperial-nav__list a:focus-visible { color: var(--is-red-bright); }

/* Current page: .is-current in the static prototype, WordPress's own
   current-menu-item / current_page_item classes in the theme. */
.imperial-nav__link.is-current,
.imperial-nav__list .current-menu-item > a,
.imperial-nav__list .current_page_item > a {
  color: var(--is-white);
  border-bottom: 2px solid var(--is-red);
}

@media (max-width: 1024px) {
  .imperial-nav-toggle { display: flex; }

  .imperial-nav {
    flex-basis: 100%;
    display: none;
  }

  .imperial-nav.is-open { display: block; }

  .imperial-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--is-space-sm);
  }

  .imperial-nav__item,
  .imperial-nav__list > li { border-top: var(--is-border-width) solid var(--is-hairline); }

  .imperial-nav__link,
  .imperial-nav__list a {
    display: block;
    padding-block: var(--is-space-sm);
  }

  .imperial-nav__link.is-current,
  .imperial-nav__list .current-menu-item > a,
  .imperial-nav__list .current_page_item > a { border-bottom: 0; color: var(--is-red-bright); }
}

/* ============================================================================
   2. BUTTONS
   Elementor: Button widget (Normal / Hover style tabs)
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 12px 30px;
  border: 2px solid transparent;
  border-radius: var(--is-radius-pill);
  font-family: var(--is-font-body);
  font-size: var(--is-size-small);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--is-transition), color var(--is-transition),
              border-color var(--is-transition);
}

/* Primary: white pill with dark label - matches the original DOWNLOAD GUIDE. */
.btn--primary {
  background-color: var(--is-white);
  border-color: var(--is-white);
  color: var(--is-black-onyx);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--is-red);
  border-color: var(--is-red);
  color: var(--is-white);
}

/* Accent: solid brand red. */
.btn--accent {
  background-color: var(--is-red);
  border-color: var(--is-red);
  color: var(--is-white);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  background-color: var(--is-red-dark);
  border-color: var(--is-red-dark);
  color: var(--is-white);
}

/* Outline: transparent with white hairline - matches the original About CTA. */
.btn--outline {
  background-color: transparent;
  border-color: var(--is-white);
  color: var(--is-white);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--is-white);
  color: var(--is-black-onyx);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-space-sm);
  justify-content: center;
}

/* Left-aligned variant, for a button row that sits under left-aligned copy
   rather than in a centred section. Elementor: Button widget > Alignment. */
.btn-row--start { justify-content: flex-start; }

/* ============================================================================
   3. HOMEPAGE HERO
   Elementor: Container (min-height 60vh, flex row) + 2 child Containers
   + Heading widgets + Image widget
   ========================================================================== */

.imperial-hero {
  background-color: var(--is-black-onyx);
  background-image: linear-gradient(180deg, var(--is-black-matte) 0%, var(--is-black-onyx) 100%);
  border-bottom: var(--is-border-width) solid var(--is-hairline);
}

.imperial-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--is-space-lg);
  min-height: 60vh;
  padding-block: var(--is-space-xl);
}

.imperial-hero__copy { flex: 1 1 420px; min-width: 0; }

.imperial-hero__media {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.imperial-hero__image {
  width: 100%;
  max-width: 420px;
  border-radius: var(--is-radius-media);
}

.imperial-hero__title {
  margin: 0 0 var(--is-space-md);
}

/* Tagline line 1: "Quality you can" - Oswald 300, wide tracking. */
.imperial-hero__kicker {
  display: block;
  margin: 0;
  color: var(--is-grey-muted);
  font-family: var(--is-font-condensed);
  font-size: var(--is-size-hero-kicker);
  font-weight: 300;
  letter-spacing: 6.2px;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Tagline line 2: "taste." - Aleo 800, heavy slab. */
.imperial-hero__lead {
  display: block;
  margin: 0;
  color: var(--is-white);
  font-family: var(--is-font-slab);
  font-size: var(--is-size-hero-lead);
  font-weight: 800;
  letter-spacing: 6.5px;
  line-height: 1;
  text-transform: uppercase;
}

/* Brand values - white Bodoni Moda, one per line, as on the original. */
.imperial-values { display: block; }

.imperial-values__item {
  margin: 0;
  color: var(--is-white);
  font-family: var(--is-font-display);
  font-size: var(--is-size-values);
  font-weight: 800;
  letter-spacing: 10px;
  line-height: 1.25;
  text-transform: uppercase;
}

.imperial-values--right { text-align: right; }

/* ============================================================================
   4. PAGE BANNER (inner pages)
   Elementor: Container with background colour + Heading widget
   ========================================================================== */

.imperial-banner {
  padding-block: var(--is-space-xl);
  background-color: var(--is-black-matte);
  border-bottom: 2px solid var(--is-red);
}

.imperial-banner__title {
  margin: 0;
  font-size: var(--is-size-h1);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.imperial-banner__subtitle {
  margin-top: var(--is-space-xs);
  color: var(--is-grey-text);
  font-size: var(--is-size-small);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============================================================================
   5. INTRO / TEXT + IMAGE BLOCK
   Elementor: Container (flex row) + Heading + Text Editor + Image widgets
   ========================================================================== */

.imperial-intro { background-color: var(--is-black-matte); }

.imperial-intro__title {
  margin-bottom: var(--is-space-md);
  font-family: var(--is-font-body);
  font-size: var(--is-size-h2);
  font-weight: 600;
  text-transform: uppercase;
}

.imperial-intro__text {
  color: var(--is-white);
  font-weight: 300;
}

.imperial-intro__image { border-radius: var(--is-radius-media); }

/* Variant for a feature slot holding a certification mark rather than
   photography. The artwork is black on transparent, so it sits on a white
   plate and is contained rather than cropped.
   Elementor: Image widget > Background colour White + Padding + Border radius. */
.imperial-intro__image--mark {
  padding: var(--is-space-lg);
  background-color: var(--is-white);
  object-fit: contain;
}

/* Short red rule used under headings instead of a decorative divider image. */
.imperial-rule {
  width: 72px;
  height: 3px;
  margin: 0 0 var(--is-space-md);
  background-color: var(--is-red);
  border: 0;
}

.imperial-rule--center { margin-inline: auto; }

.imperial-rule--white { background-color: var(--is-white); }

/* ============================================================================
   6. CATEGORY CARDS (Beef / Chicken / Halal)
   Elementor: Container (grid, 3 columns) + Image Box widgets
   ========================================================================== */

.imperial-categories__title { color: var(--is-white); }

.imperial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--is-black-charcoal);
  border: var(--is-border-width) solid var(--is-hairline);
  border-radius: var(--is-radius-card);
  overflow: hidden;
  text-align: center;
  transition: border-color var(--is-transition), transform var(--is-transition);
}

.imperial-card:hover { border-color: var(--is-red); }

.imperial-card__media { background-color: var(--is-black-onyx); }

.imperial-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Variant for a card whose "image" is a certification seal rather than
   photography (the Halal category, as on the reference site). Contained on a
   white plate so the mark is never cropped and stays legible. */
.imperial-card__image--mark {
  padding: var(--is-space-md);
  background-color: var(--is-white);
  object-fit: contain;
}

.imperial-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--is-space-xs);
  flex-grow: 1;
  padding: var(--is-space-md);
}

.imperial-card__title {
  margin: 0;
  color: var(--is-white);
  font-family: var(--is-font-body);
  font-size: var(--is-size-h3);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.imperial-card__text {
  margin: 0;
  color: var(--is-grey-text);
  font-size: var(--is-size-small);
}

/* Card variant used on the red accent band, so contrast stays AA. */
.imperial-card--on-red {
  background-color: var(--is-black-onyx);
  border-color: rgba(0, 0, 0, 0.25);
}

.imperial-card--on-red:hover { border-color: var(--is-white); }

/* ============================================================================
   7. FOODSERVICE / CHANNEL BLOCK
   Elementor: Container (grid) + Icon Box or Image Box widgets
   ========================================================================== */

.imperial-foodservice { background-color: var(--is-black-charcoal); }

.imperial-feature {
  display: flex;
  flex-direction: column;
  gap: var(--is-space-xs);
  height: 100%;
  padding: var(--is-space-lg) var(--is-space-md);
  background-color: var(--is-black-onyx);
  border: var(--is-border-width) solid var(--is-hairline);
  border-left: 3px solid var(--is-red);
  border-radius: var(--is-radius-sm);
}

.imperial-feature__title {
  margin: 0;
  color: var(--is-white);
  font-size: var(--is-size-h3);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.imperial-feature__text {
  margin: 0;
  color: var(--is-grey-text);
}

/* ============================================================================
   8. PRODUCTS - carousel-free horizontal scroller (homepage)
   Elementor: Image Carousel widget, 3 slides, 20px radius, white captions
   ========================================================================== */

.imperial-products { background-color: var(--is-black-onyx); }

/* Carousel shell: a right-aligned control row plus the scroll-snap track.
   Elementor's Image Carousel widget draws its own arrows, so none of this
   needs reproducing at migration. */

.imperial-products__scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--is-gap-grid);
  padding-bottom: var(--is-space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--is-red) transparent;
}

.imperial-products__scroller:focus-visible {
  outline: 2px solid var(--is-red-bright);
  outline-offset: 4px;
}

/* Arrows sit in their own right-aligned row ABOVE the track, never on top of
   the product photography. Overlaid arrows looked like smudges over the outer
   images - and a disabled one over a photo reads as a defect. This also keeps
   the whole carousel free of absolute positioning. */
.imperial-products__controls {
  display: flex;
  gap: var(--is-space-xs);
  justify-content: flex-end;
  margin-bottom: var(--is-space-md);
}

.imperial-products__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: var(--is-border-width) solid var(--is-hairline);
  border-radius: 50%;
  color: var(--is-white);
  cursor: pointer;
  transition: background-color var(--is-transition), color var(--is-transition),
              border-color var(--is-transition), opacity var(--is-transition);
}

.imperial-products__arrow:hover,
.imperial-products__arrow:focus-visible {
  background-color: var(--is-red);
  border-color: var(--is-red);
  color: var(--is-white);
}

/* Disabled at the start/end of the track, and hidden when nothing can scroll. */
.imperial-products__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.imperial-products__arrow[hidden] { display: none; }

.imperial-products__slide { scroll-snap-align: start; }

.imperial-product-tile {
  display: block;
  text-align: center;
}

.imperial-product-tile__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--is-radius-media);
  object-fit: cover;
}

.imperial-product-tile__caption {
  display: block;
  margin-top: var(--is-space-sm);
  color: var(--is-white);
  font-family: var(--is-font-body);
  font-size: var(--is-size-h3);
  font-weight: 600;
}

/* ============================================================================
   9. PRODUCT DETAIL ROWS (products page)
   Elementor: one Container per product (flex row, alternating direction)
   + Heading + Icon List + Image widgets
   ========================================================================== */

.imperial-product-row { padding-block: var(--is-space-xl); }

.imperial-product-row--alt { background-color: var(--is-black-matte); }

.imperial-product-row__title {
  margin-bottom: var(--is-space-sm);
  font-family: var(--is-font-body);
  font-size: var(--is-size-h2);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.imperial-product-row__code {
  display: inline-block;
  margin-bottom: var(--is-space-sm);
  padding: 4px 12px;
  background-color: var(--is-red);
  border-radius: var(--is-radius-sm);
  color: var(--is-white);
  font-size: var(--is-size-eyebrow);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.imperial-product-row__text {
  margin-bottom: var(--is-space-md);
  color: var(--is-grey-text);
}

.imperial-product-row__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--is-radius-media);
  object-fit: cover;
}

/* Spec list - Elementor Icon List widget with a check/square icon. */
.imperial-speclist { display: grid; gap: var(--is-space-xs); }

.imperial-speclist__item {
  display: flex;
  align-items: baseline;
  gap: var(--is-space-xs);
  color: var(--is-white);
  font-size: var(--is-size-small);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.imperial-speclist__marker {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background-color: var(--is-red);
  transform: translateY(-2px);
}

/* Shared statement callout (3-8 oz / double paper). */
.imperial-callout {
  padding: var(--is-space-md) var(--is-space-lg);
  background-color: var(--is-black-charcoal);
  border: var(--is-border-width) solid var(--is-hairline);
  border-left: 4px solid var(--is-red);
  border-radius: var(--is-radius-sm);
}

.imperial-callout__text {
  margin: 0;
  color: var(--is-white);
  font-size: var(--is-size-h3);
  font-weight: 500;
}

.imperial-callout--center { text-align: center; }

/* ============================================================================
   10. ICON BOX LIST (About page "ideal for your establishment" points)
   Elementor: Icon Box widgets inside a grid Container
   ========================================================================== */

.imperial-pointlist { display: grid; gap: var(--is-gap-grid); }

.imperial-point {
  display: flex;
  gap: var(--is-space-sm);
  align-items: flex-start;
}

.imperial-point__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: var(--is-white);
  border-radius: 50%;
  color: var(--is-red);
  font-family: var(--is-font-body);
  font-size: var(--is-size-small);
  font-weight: 600;
}

.imperial-point__body { min-width: 0; }

.imperial-point__title {
  margin: 0 0 4px;
  color: var(--is-white);
  font-size: 18px;
  font-weight: 500;
}

.imperial-point__text {
  margin: 0;
  color: var(--is-grey-text);
  font-size: var(--is-size-small);
  font-weight: 500;
}

/* ============================================================================
   11. BADGE / CERTIFICATION STRIP
   Elementor: Container (grid, 3 columns) + Image widgets
   ========================================================================== */

.imperial-badges { background-color: var(--is-black-charcoal); }

.imperial-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--is-space-xs);
  text-align: center;
}

/* The certification marks are dark artwork (navy/green/blue) on transparent
   backgrounds - on the reference site they sat on a white band. On Imperial
   Steaks' dark sections they would be close to invisible, so each one is given
   a white plate and is contained rather than cropped. This keeps the supplied
   artwork untouched, which matters for marks that are owned by third parties.
   Elementor: Image widget > Background colour White + padding + Max Width. */
.imperial-badge__image {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 3 / 2;
  padding: var(--is-space-sm);
  background-color: var(--is-white);
  border-radius: var(--is-radius-sm);
  object-fit: contain;
}

.imperial-badge__label {
  margin: 0;
  color: var(--is-white);
  font-size: var(--is-size-eyebrow);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.imperial-badge__note {
  margin: 0;
  color: var(--is-grey-text);
  font-size: var(--is-size-eyebrow);
}

/* ============================================================================
   12. CONTACT DETAIL CARDS
   Elementor: Icon List widget, or Icon Box widgets in a grid Container
   ========================================================================== */

.imperial-contact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: var(--is-space-md);
  background-color: var(--is-black-charcoal);
  border: var(--is-border-width) solid var(--is-hairline);
  border-top: 3px solid var(--is-red);
  border-radius: var(--is-radius-sm);
}

.imperial-contact-card__label {
  margin: 0;
  color: var(--is-grey-muted);
  font-size: var(--is-size-eyebrow);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.imperial-contact-card__value {
  margin: 0;
  color: var(--is-white);
  font-size: 17px;
  font-weight: 500;
  overflow-wrap: break-word;
}

.imperial-contact-card__value a { color: var(--is-white); }

.imperial-contact-card__value a:hover,
.imperial-contact-card__value a:focus-visible { color: var(--is-red-bright); }

.imperial-contact-card__note {
  margin: 0;
  color: var(--is-grey-text);
  font-size: var(--is-size-eyebrow);
}

/* ============================================================================
   13. CTA BAND
   Elementor: Container with red background + Heading + Button widgets
   ========================================================================== */

.imperial-cta { background-color: var(--is-red); }

.imperial-cta__title {
  margin-bottom: var(--is-space-xs);
  color: var(--is-white);
  font-size: var(--is-size-h2);
  font-weight: 600;
  letter-spacing: 2px;
}

.imperial-cta__text {
  margin-bottom: var(--is-space-md);
  color: var(--is-white);
}

/* ============================================================================
   14. SITE FOOTER
   Elementor: Theme Builder > Footer template
   (Container grid + Site Logo + 2 Nav Menu + Icon List + Social Icons)
   ========================================================================== */

.imperial-footer {
  background-color: var(--is-black-matte);
  border-top: 2px solid var(--is-red);
}

.imperial-footer__top { padding-block: var(--is-space-xl); }

.imperial-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: var(--is-gap-grid);
}

.imperial-footer__logo {
  width: 150px;
  height: auto;
  margin-bottom: var(--is-space-sm);
}

.imperial-footer__blurb {
  color: var(--is-grey-text);
  font-size: var(--is-size-small);
}

.imperial-footer__title {
  margin-bottom: var(--is-space-sm);
  color: var(--is-white);
  font-family: var(--is-font-body);
  font-size: var(--is-size-h3);
  font-weight: 600;
  letter-spacing: 3.9px;
  text-transform: uppercase;
}

.imperial-footer__list { display: grid; gap: 6px; }

/* Second selector again covers WordPress's own menu markup. */
.imperial-footer__link,
.imperial-footer__list a {
  color: var(--is-white);
  font-size: var(--is-size-small);
}

.imperial-footer__link:hover,
.imperial-footer__link:focus-visible,
.imperial-footer__list a:hover,
.imperial-footer__list a:focus-visible { color: var(--is-red-bright); }

/* wp_nav_menu() renders <li> children; keep the same rhythm as the prototype. */
.imperial-footer__list li { margin-bottom: 6px; }

.imperial-footer__contact { display: grid; gap: var(--is-space-xs); }

.imperial-footer__contact-item {
  display: flex;
  gap: var(--is-space-xs);
  align-items: baseline;
  color: var(--is-white);
  font-size: var(--is-size-small);
}

.imperial-footer__contact-item a { color: var(--is-white); }

.imperial-footer__contact-label {
  flex: 0 0 auto;
  color: var(--is-grey-muted);
  font-size: var(--is-size-eyebrow);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Social row: non-interactive until client supplies profile URLs. */
.imperial-social {
  display: flex;
  gap: var(--is-space-xs);
  margin-top: var(--is-space-md);
}

.imperial-social__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: transparent;
  border: 2px dashed var(--is-white);
  border-radius: 50%;
  color: var(--is-white);
  font-size: var(--is-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0;
}

.imperial-footer__bottom {
  padding-block: var(--is-space-sm);
  background-color: var(--is-black-onyx);
  border-top: var(--is-border-width) solid var(--is-hairline);
  text-align: center;
}

.imperial-footer__copyright {
  margin: 0;
  color: var(--is-white);
  font-size: var(--is-size-small);
  font-weight: 400;
}

/* ============================================================================
   15. RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 1024px) {
  .imperial-footer__grid { grid-template-columns: repeat(2, 1fr); }

  .imperial-values--right { text-align: left; }

  .imperial-hero__inner { min-height: 0; }
}

@media (max-width: 767px) {
  .imperial-header__logo { width: 120px; }

  .imperial-footer__grid { grid-template-columns: 1fr; }

  .imperial-product-row { padding-block: var(--is-space-lg); }

  .imperial-products__scroller { grid-auto-columns: minmax(240px, 1fr); }

  .btn { width: 100%; }

  .btn-row { flex-direction: column; }
}