/* =============================================================================
   gory-home.css — Homepage stylesheet for the sklep-gor theme
   Sections: hero, brand-carousel, tiles, product-card (shared),
             five-products, featured-carousel, eight-products, newsletter
   Naming: .gory-* BEM blocks
   All color values driven by CSS custom properties set in :root via PHP.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   0. BODY RESET — force full-width on home page (beat plugin padding)
   ───────────────────────────────────────────────────────────────────────────── */
body.page-template-page-home-php {
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPE SCALE (all sections)
   Font token : var(--gory-font)  → defined in gory-header.css :root
   Section h2 : clamp(22px, 2.2vw, 34px)  font-weight 700  uppercase
   Section p  : clamp(13px, .95vw, 15px)  line-height 1.6
   Card label : clamp(11px, 1vw, 14px)    font-weight 600  uppercase
   Hero h2    : clamp(28px, 4vw, 64px)    (intentionally larger)
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   1. HERO SLIDER (.gory-hero)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.gory-hero__track {
  display: flex;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 450ms ease;
  will-change: transform;
}

.gory-hero__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gory-hero__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gory-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  pointer-events: none;
}

.gory-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gory-hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5vw 8vh;
}

.gory-hero__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #fff;
}

.gory-hero__title {
  font-family: var(--gory-font);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 64px);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  line-height: 1.15;
  margin: 0;
}

.gory-hero__btn {
  display: inline-block;
  padding: 12px 28px;
  background: #fff;
  color: #000;
  font-family: var(--gory-font);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  margin-top: 16px;
  transition: background 150ms ease, color 150ms ease;
  border: 2px solid #fff;
  cursor: pointer;
}

.gory-hero__link:hover .gory-hero__btn,
.gory-hero__btn:hover {
  background: var(--gory-red, #d71d24);
  color: #fff;
  border-color: var(--gory-red, #d71d24);
}

/* Navigation arrows */
.gory-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .30);
  border: 0;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: background 150ms ease;
  outline: none;
}

.gory-hero__arrow--prev {
  left: 16px;
}

.gory-hero__arrow--next {
  right: 16px;
}

.gory-hero__arrow:hover {
  background: rgba(0, 0, 0, .55);
}

.gory-hero__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.gory-hero__arrow.is-disabled {
  opacity: .3;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .gory-hero__track {
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BRAND CAROUSEL (.gory-brandc)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-brandc {
  overflow: hidden;
  padding: 32px 2vw 0;
  background: #fff;
}

.gory-brandc__track {
  display: flex;
  gap: 32px;
  align-items: stretch;
  transform: translate3d(0, 0, 0);
}

.gory-brandc__item {
  flex: 0 0 144px;
  min-width: 0;
}

.gory-brandc__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.gory-brandc__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transform: scale(1);
  transition: filter 200ms ease, opacity 200ms ease, transform 200ms ease;
  display: block;
}

.gory-brandc__item:hover .gory-brandc__img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.12);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. CATEGORY TILES (.gory-tiles)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-tiles {
  padding: 32px 2vw;
}

.gory-tiles__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.gory-tiles__tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.gory-tiles__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}

.gory-tiles__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}

.gory-tiles__tile:hover .gory-tiles__img {
  transform: scale(1.05);
}

.gory-tiles__title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  font-family: var(--gory-font);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 20px);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. SHARED PRODUCT CARD (.gory-pc)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-pc {
  position: relative;
  overflow: hidden;
}

.gory-pc a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.gory-pc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}

.gory-pc:hover .gory-pc__img {
  transform: scale(1.04);
}

.gory-pc__overlay {
  position: absolute;
  inset: 0;
  background: var(--gory-section-overlay, rgba(255, 255, 255, .5));
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.gory-pc:hover .gory-pc__overlay {
  opacity: 1;
}

.gory-pc__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  pointer-events: none;
}

.gory-pc__name {
  font-family: var(--gory-font);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}

.gory-pc__price {
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 400;
  margin-top: 4px;
}

/* WooCommerce price amount inherits section color */
.gory-fp .gory-pc__price .woocommerce-Price-amount,
.gory-ep .gory-pc__price .woocommerce-Price-amount,
.gory-fc .gory-pc__price .woocommerce-Price-amount {
  color: inherit;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. FIVE PRODUCTS BENTO (.gory-fp)
   ─────────────────────────────────────────────────────────────────────────────
   4-col × 2-row, fixed 65vh. Images fill cells (cover). Info on hover overlay.

   col 1 (1fr)     │ col 2 (1fr)  │ col 3 (2fr)         │ col 4 (1fr)
   ────────────────┼──────────────┼─────────────────────┼─────────────
   intro [col 1–2] │              │ p1 hero [rows 1–2]  │ p2 [row 1]
   p3    [row 2]   │ p4 [row 2]   │                     │ p5 [row 2]
   ─────────────────────────────────────────────────────────────────── */
.gory-fp {
  background: var(--gory-fp-bg, #5f6f63);
  padding: 0;
}

/* ── White product card ── */
.gory-fp .gory-pc {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
  transition: transform 280ms ease, box-shadow 280ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gory-fp .gory-pc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .20);
}

.gory-fp .gory-pc a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  min-height: 0;
}

/* Contain — show full product, no cropping, align bottom */
.gory-fp .gory-pc__img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 0;
  object-fit: contain;
  object-position: center bottom;
  padding: 12px;
}

.gory-fp .gory-pc:hover .gory-pc__img {
  transform: none;
}

/* Overlay hidden — info bar is always visible */
.gory-fp .gory-pc__overlay {
  display: none;
}

/* Static info bar at card bottom */
.gory-fp .gory-pc__info {
  position: static;
  padding: 8px 12px 10px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.gory-fp .gory-pc__name {
  color: #01172f;
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
}

.gory-fp .gory-pc__price {
  color: var(--gory-red, #d71d24);
  font-size: clamp(11px, .8vw, 13px);
  margin-top: 2px;
}

/* ── Grid: 4 cols × 2 rows, auto height from square cards ── */
.gory-fp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 32px;
}

/* Intro text — sits on section background, no card */
.gory-fp__intro {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 32px 12px 10px 24px;
  overflow: hidden;
}

.gory-fp__intro h1,
.gory-fp__intro h2 {
  font-family: var(--gory-font);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  color: var(--gory-fp-title, #fff);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
}

.gory-fp__intro p {
  color: var(--gory-fp-text, rgba(255, 255, 255, .80));
  margin: 12px 0 0;
  max-width: calc(100% - 12px);
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.5;
  text-align: justify;
}

/* Cell positions */
.gory-fp__p1 { grid-column: 3; grid-row: 1 / span 2; } /* hero  — full column height  */
.gory-fp__p2 { grid-column: 4; grid-row: 1; }           /* small — top right           */
.gory-fp__p3 { grid-column: 1; grid-row: 2; }           /* small — bottom left         */
.gory-fp__p4 { grid-column: 2; grid-row: 2; }           /* small — bottom centre-left  */
.gory-fp__p5 { grid-column: 4; grid-row: 2; }           /* small — bottom right        */

/* Square cards (not hero) */
.gory-fp__p2,
.gory-fp__p3,
.gory-fp__p4,
.gory-fp__p5 {
  aspect-ratio: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. FEATURED CAROUSEL (.gory-fc)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-fc {
  background: var(--gory-fc-bg, #fff);
  padding: 0;
}

.gory-fc .gory-pc__name {
  color: var(--gory-fc-prod-title, #00172f);
}

.gory-fc .gory-pc__price {
  color: var(--gory-fc-price, #ff621f);
}

.gory-fc .gory-pc__overlay {
  background: var(--gory-fc-overlay, rgba(255, 255, 255, .5));
}

/* ── White product card ── */
.gory-fc .gory-pc {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
  transition: transform 280ms ease, box-shadow 280ms ease;
  display: flex;
  flex-direction: column;
}

.gory-fc .gory-pc:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

/* ── Transparent cards for products with built-in shadows (e.g. Lyommy) ── */
.gory-fc--transparent .gory-pc {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.gory-fc--transparent .gory-pc:hover {
  box-shadow: none;
}

.gory-fc--transparent .gory-pc__info {
  border-top: none;
  padding: 8px 0 0;
}

.gory-fc--transparent .gory-pc__img {
  padding: 0;
}

.gory-fc .gory-pc a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.gory-fc .gory-pc__img {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 12px 12px 0;
}

.gory-fc .gory-pc:hover .gory-pc__img {
  transform: none;
}

.gory-fc .gory-pc__overlay {
  display: none;
}

.gory-fc .gory-pc__info {
  position: static;
  padding: 8px 12px 10px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.gory-fc .gory-pc__name {
  color: #01172f;
  font-size: clamp(10px, .75vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
}

.gory-fc .gory-pc__price {
  color: var(--gory-red, #d71d24);
  font-size: clamp(11px, .75vw, 13px);
  margin-top: 2px;
}

.gory-fc__inner {
  padding: 32px 40px;
}

.gory-fc__intro {
  margin-bottom: 20px;
}

.gory-fc__intro h2 {
  font-family: var(--gory-font);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  color: var(--gory-fc-title, #00172f);
  text-transform: uppercase;
  margin: 0;
}

.gory-fc__intro p {
  color: var(--gory-fc-text, #00172f);
  margin: 12px 0 0;
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.5;
}

.gory-fc__viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gory-fc__viewport::-webkit-scrollbar {
  display: none;
}

.gory-fc__track {
  display: flex;
  gap: 12px;
}

.gory-fc__track .gory-pc {
  flex: 0 0 18.5vw;
  aspect-ratio: 1;
  min-width: 160px;
}

/* ── Full-width image for Lyommy (no carousel) ── */
.gory-fc--transparent .gory-fc__viewport {
  overflow-x: visible;
}

.gory-fc--transparent .gory-fc__track {
  gap: 0;
}

.gory-fc--transparent .gory-fc__track .gory-pc {
  flex: 1;
  aspect-ratio: auto;
  min-width: auto;
}

.gory-fc--transparent a img {
  width: 100%;
  height: auto;
  display: block;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. EIGHT PRODUCTS GRID (.gory-ep)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-ep {
  background: var(--gory-ep-bg, #45462a);
  padding: 0;
}

.gory-ep .gory-pc__name {
  color: var(--gory-ep-prod-title, #00172f);
}

.gory-ep .gory-pc__price {
  color: var(--gory-ep-price, #ff621f);
}

.gory-ep .gory-pc__overlay {
  background: var(--gory-ep-overlay, rgba(255, 255, 255, .5));
}

/* ── White product card ── */
.gory-ep .gory-pc {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
  transition: transform 280ms ease, box-shadow 280ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gory-ep .gory-pc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .20);
}

.gory-ep .gory-pc a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.gory-ep .gory-pc__img {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 10px 10px 0;
}

.gory-ep .gory-pc:hover .gory-pc__img {
  transform: none;
}

.gory-ep .gory-pc__overlay {
  display: none;
}

.gory-ep .gory-pc__info {
  position: static;
  padding: 6px 10px 8px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.gory-ep .gory-pc__name {
  color: #01172f;
  font-size: clamp(9px, .7vw, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
}

.gory-ep .gory-pc__price {
  color: var(--gory-red, #d71d24);
  font-size: clamp(10px, .7vw, 12px);
  margin-top: 2px;
}

.gory-ep__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 12px;
  padding: 24px;
}

.gory-ep__intro {
  grid-column: 5;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 40px;
  background: var(--gory-ep-bg, #45462a);
}

.gory-ep__intro h1,
.gory-ep__intro h2 {
  font-family: var(--gory-font);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  color: var(--gory-ep-title, #00172f);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
}

.gory-ep__intro p {
  color: var(--gory-ep-text, #00172f);
  margin-top: 12px;
  margin-bottom: 0;
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.5;
  text-align: justify;
  text-align-last: right;
}

/* Grid cell positions */
.gory-ep__p1 { grid-column: 1; grid-row: 1; }
.gory-ep__p2 { grid-column: 2; grid-row: 1; }
.gory-ep__p3 { grid-column: 3; grid-row: 1; }
.gory-ep__p4 { grid-column: 4; grid-row: 1; }
.gory-ep__p5 { grid-column: 1; grid-row: 2; }
.gory-ep__p6 { grid-column: 2; grid-row: 2; }
.gory-ep__p7 { grid-column: 3; grid-row: 2; }
.gory-ep__p8 { grid-column: 4; grid-row: 2; }

/* Square cards */
.gory-ep__p1, .gory-ep__p2, .gory-ep__p3, .gory-ep__p4,
.gory-ep__p5, .gory-ep__p6, .gory-ep__p7, .gory-ep__p8 {
  aspect-ratio: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. NEWSLETTER (.gory-nl)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-nl {
  background: #102a40;
  padding: 48px 2.5vw;
  text-align: center;
}

.gory-nl__title {
  font-family: var(--gory-font);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  color: #d71d24;
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1.2;
}

.gory-nl__text1 {
  color: #fff;
  max-width: 520px;
  margin: 0 auto 20px;
  font-size: clamp(12px, .9vw, 14px);
  line-height: 1.55;
}

.gory-nl__text2 {
  color: rgba(255, 255, 255, .6);
  font-size: clamp(11px, .75vw, 12px);
  max-width: 440px;
  margin: 12px auto 0;
  line-height: 1.45;
}

/* Pill form */
.gory-nl__form {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 420px;
  border: none;
  border-radius: 50px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.gory-nl__form:focus-within {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

.gory-nl__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0 20px;
  font-family: var(--gory-font);
  font-size: 13px;
  color: #333;
  appearance: none;
  /* vertically center placeholder and input text via line-height */
  line-height: 44px;
  /* keep typed text left-aligned */
  text-align: left;
  box-sizing: border-box;
}

/* Keep placeholder color and ensure it's vertically centered */
.gory-nl__input::placeholder {
  color: #888;
  opacity: 1; /* ensure consistent rendering across browsers */
}

/* Center placeholder horizontally when the input is empty, nudge it slightly lower;
   when the user types, keep the input text left-aligned and vertically centered. */
.gory-nl__input:placeholder-shown {
  text-align: center;
  /* nudge placeholder slightly less low on desktop */
  padding-top: 9px;
  padding-bottom: 0;
  line-height: normal; /* allow padding to control vertical position */
}
.gory-nl__input:not(:placeholder-shown) {
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 44px; /* vertical center for typed text */
}

/* Mobile-specific tweak: input height is 40px, nudge placeholder slightly less */
@media (max-width: 768px) {
  .gory-nl__input:placeholder-shown {
    padding-top: 6px;
    line-height: normal;
  }
  .gory-nl__input:not(:placeholder-shown) {
    line-height: 40px;
  }
}

.gory-nl__input:focus {
  outline: none;
}

.gory-nl__btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 24px;
  background: #d71d24;
  color: #fff;
  border: none;
  border-radius: 50px;
  margin: 3px;
  font-family: var(--gory-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  white-space: nowrap;
}

.gory-nl__btn:hover {
  background: #b8171d;
  transform: scale(1.02);
}

.gory-nl__msg {
  font-size: 12px;
  margin: 12px 0 0;
  line-height: 1.4;
}

.gory-nl__msg--ok   { color: #4ade80; }
.gory-nl__msg--err  { color: #f87171; }
.gory-nl__msg--warn { color: #fbbf24; }


/* ─────────────────────────────────────────────────────────────────────────────
   9. MOBILE BREAKPOINTS (@media max-width: 768px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Hero ── */
  .gory-hero {
    height: 50vh;
  }

  /* ── Brand carousel ── */
  .gory-brandc__item {
    flex: 0 0 calc((100vw - 16px) / 3);
    max-width: 144px;
  }

  .gory-brandc__track {
    gap: 16px;
  }

  /* ── Tiles: horizontal scroll strip ── */
  .gory-tiles {
    padding: 20px 0 20px 4vw;
  }

  .gory-tiles__grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .gory-tiles__grid::-webkit-scrollbar {
    display: none;
  }

  .gory-tiles__tile {
    flex: 0 0 45vw;
    scroll-snap-align: start;
    aspect-ratio: 1;
  }

  /* ── Five Products: bento → 2-col stacked on mobile ── */
  .gory-fp__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    padding: 20px 16px;
  }

  /* Hero keeps 4:3 ratio on mobile (full width), others stay square */
  .gory-fp__p1 {
    aspect-ratio: 4 / 3;
  }

  .gory-fp__intro {
    grid-column: 1 / span 2;
    grid-row: 1;
    padding: 24px 0;
    overflow: visible;
  }

  .gory-fp__p1 { grid-column: 1 / span 2; grid-row: 2; } /* hero  — full width */
  .gory-fp__p2 { grid-column: 1;           grid-row: 3; }
  .gory-fp__p3 { grid-column: 2;           grid-row: 3; }
  .gory-fp__p4 { grid-column: 1;           grid-row: 4; }
  .gory-fp__p5 { grid-column: 2;           grid-row: 4; }

  /* ── Featured carousel: wider cards ── */
  .gory-fc__track .gory-pc {
    flex: 0 0 42vw;
    aspect-ratio: 1;
  }

  /* ── Full-width image for Lyommy on mobile ── */
  .gory-fc--transparent .gory-fc__track .gory-pc {
    flex: 1;
    aspect-ratio: auto;
  }

  .gory-fc__inner {
    padding: 24px 16px;
  }

  /* ── Eight Products: 2-col grid ── */
  .gory-ep__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 8px;
    padding: 16px;
  }

  .gory-ep__intro {
    grid-column: 1 / span 2;
    grid-row: 1;
    height: auto;
    padding: 24px 0;
  }

  .gory-ep__p1 { grid-column: 1; grid-row: 2; }
  .gory-ep__p2 { grid-column: 2; grid-row: 2; }
  .gory-ep__p3 { grid-column: 1; grid-row: 3; }
  .gory-ep__p4 { grid-column: 2; grid-row: 3; }
  .gory-ep__p5 { grid-column: 1; grid-row: 4; }
  .gory-ep__p6 { grid-column: 2; grid-row: 4; }
  .gory-ep__p7 { grid-column: 1; grid-row: 5; }
  .gory-ep__p8 { grid-column: 2; grid-row: 5; }

  /* ── Newsletter ── */
  .gory-nl {
    padding: 36px 4vw;
  }

  .gory-nl__form {
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .gory-nl__input {
    height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }

  .gory-nl__btn {
    height: 40px;
    padding: 0 16px;
    font-size: 11px;
  }

  /* ── Hero arrows: smaller on mobile ── */
  .gory-hero__arrow {
    width: 36px;
    height: 36px;
  }

  .gory-hero__arrow--prev {
    left: 8px;
  }

  .gory-hero__arrow--next {
    right: 8px;
  }

  .gory-hero__content {
    padding: 0 4vw 5vh;
  }

  /* Reduce hero headline + button on mobile for tighter layout */
  .gory-hero__slide .gory-hero__title,
  .gory-hero__link .gory-hero__title {
    font-size: 20px !important;
    line-height: 1.05;
  }

  .gory-hero__link .gory-hero__btn {
    font-size: 12px !important;
    padding: 8px 18px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Unified spacing between homepage sections
   Ensure consistent vertical gutters between homepage blocks (non-hero)
   ───────────────────────────────────────────────────────────────────────────── */
.gory-tiles,
.gory-fc {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Brand carousel: keep top spacing but remove bottom padding */
.gory-brandc {
  padding-top: 40px;
  padding-bottom: 0;
}

/* Smaller gutter for eight-products section only */
.gory-ep {
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (max-width: 768px) {
  .gory-tiles,
  .gory-fc,
  .gory-ep {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  /* Brand carousel mobile: keep top spacing, remove bottom padding, match tiles side padding */
  .gory-brandc {
    padding-top: 24px;
    padding-bottom: 0;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  /* keep tiles horizontal padding on mobile */
  .gory-tiles { padding-left: 4vw; padding-right: 4vw; }
}

/* Ensure hero bottom spacing matches other section gutters */
section.gory-hero .gory-hero__content {
  padding-bottom: 40px !important; /* match other sections' 40px desktop gutter */
}
@media (max-width: 768px) {
  section.gory-hero .gory-hero__content {
    padding-bottom: 24px !important; /* match mobile gutter */
  }
}