/* Puro Instinto brand page — PDF page 2, built step by step. */

.brand-page {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.brand-hero-white {
  width: 100%;
  margin: 0;
  padding: clamp(40px, 5.5vw, 88px) 0 0;
  background: #fff;
}

.brand-hero-orange {
  width: 100%;
  margin: 0;
  padding: clamp(40px, 5.5vw, 88px) 0 0;
  background: #ff931e;
  line-height: 0;
}

.brand-hero-orange.brand-hero-flush {
  padding: 0;
}

.brand-hero-white.brand-hero-flush {
  padding: 0;
}

/* Core / Ownat — the artwork's own teal starts at the very top edge, so the
   band sits flush under the (teal) site header instead of on a padded strip. */
.brand-hero-teal {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #4aa190;
  line-height: 0;
}

.brand-hero-white__band {
  display: block;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: auto;
  vertical-align: top;
}

@media (max-width: 768px) {
  .brand-hero-white {
    padding-top: clamp(28px, 4vw, 56px);
  }

  .brand-hero-orange {
    padding-top: clamp(28px, 4vw, 56px);
  }

  .brand-hero-orange.brand-hero-flush,
  .brand-hero-white.brand-hero-flush {
    padding: 0;
  }
}

.brand-story-band {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #ff992b;
  line-height: 0;
}

.brand-story-band > img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.brand-story-band--teal {
  background: #28c4b0;
}

.brand-story-band--c4p-teal {
  background: #4aa190;
}

.brand-story-band--wild-teal {
  background: #4aa190;
}

.brand-story-band--white {
  background: #fff;
}

.brand-story-band--orange {
  background: #ff992b;
}

/* Core / Ownat bands carry a horizontal glow, so letterboxing them past
   1920px would expose flat side bars that miss it — they stay full-bleed. */
.brand-hero-teal .brand-hero-white__band,
.brand-hero-flush .brand-hero-white__band,
.brand-hero-flush + .brand-story-band .brand-story-band__slice,
.brand-story-band--full .brand-story-band__slice {
  max-width: none;
  width: 100%;
}

.brand-story-band__slice {
  display: block;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: auto;
  vertical-align: top;
}

/* Product row — continues the orange band, no outer white panel. */
.brand-products {
  width: 100%;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background: #f58220;
}

.brand-products--orange {
  background-color: #ff992b;
  background-image: url("../images/brand-page/puro-instinto/products-row-bg.png?v=join");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.brand-products--white {
  background: #fff;
}

/* Closes a brand page whose last section is a product row (no trailing band). */
.brand-products--pad-bottom {
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Core / Ownat cat rows sit inside the orange half of the artwork, which is a
   glow rather than a flat fill. Each background is a two-pixel strip lifted
   from the neighbouring bands' touching edges and stretched over the row, so
   both seams line up exactly however tall the row grows. */
.brand-products--core-cats,
.brand-products--club4paws-cats,
.brand-products--ownat-cats,
.brand-products--profine-cats,
.brand-products--wild-cats,
.brand-products--orange {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.brand-products--core-cats {
  background-image: url("../images/brand-page/core/cats-row-bg.png");
}

.brand-products--club4paws-cats {
  background-color: #4aa190;
  background-image: url("../images/brand-page/club4paws/cats-row-bg.png?v=c4p-glow");
}

.brand-products--ownat-cats {
  background-image: url("../images/brand-page/ownat/cats-row-bg.png");
}

.brand-products--profine-cats {
  background-image: url("../images/brand-page/profine/cats-row-bg.png");
}

.brand-products--wild-cats {
  background-color: #5ca89a;
  background-image: url("../images/brand-page/wild-side/cats-row-bg.png");
}

/* Wild Side — breathing room between product row and cat intro (PDF mock carousel removed). */
.brand-products--wild-gap-before-cat {
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.brand-story-band--wild-cat-intro {
  padding-top: clamp(1.5rem, 3.5vw, 3rem);
}

.brand-products--teal {
  background: #28c4b0;
}

.brand-products--carnis-dogs {
  background-color: #4aa190;
  background-image: url("../images/brand-page/carnis/dogs-row-bg.png?v=fade");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.brand-products__row {
  display: flex;
  align-items: stretch;
  max-width: 1920px;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
}

.brand-products__track {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.brand-products__track::-webkit-scrollbar {
  display: none;
}

.brand-products__track > .product-browse-cell {
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.94);
  border-right: 1px solid rgba(255, 255, 255, 0.45);
}

.brand-products__track > .product-browse-cell:last-child {
  border-right: none;
}

.brand-products__nav {
  flex: none;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease;
}

.brand-products__nav:hover {
  color: #fff;
}

.brand-products__empty {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Core / Ownat card panel ───────────────────────────────────────────────
   CORE_SELIDA1.pdf and SEL1_OWNAT.pdf draw both product rows as one square
   white sheet inset to ~84.7% of the page, floating on a soft drop shadow,
   holding four cards separated by hairlines, with the carousel chevrons
   overlaid on the sheet's own edges. Every measurement below is that artwork
   divided by the 2667px render width, so the sheet keeps its proportions at
   any viewport — the neighbouring bands are full-bleed images that do the
   same. Live cards keep stock / unit-price lines (SKU is hidden), so the
   sheet ends up marginally taller than the mock-up's simplified cards. */
.brand-products--panel {
  overflow: visible;
}

.brand-products--panel .brand-products__row {
  position: relative;
  width: 84.75%;
  max-width: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* White sheet stops short of the row bottom so the buy pills can hang
   off the panel onto the band behind it, as in the mock-up. */
.brand-products--panel .brand-products__row::before {
  content: "";
  position: absolute;
  inset: 0 0 1.55rem 0;
  background: #fff;
  box-shadow: 0 1.35vw 3.4vw rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 0;
}

.brand-products--panel .brand-products__track {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.brand-products--panel .brand-products__track > .product-browse-cell {
  position: relative;
  overflow: visible;
  background: transparent;
  border-right: none;
}

.brand-products--panel .brand-products__track > .product-browse-cell::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 22%;
  right: 0;
  width: 1px;
  background: #cfd0d2;
}

.brand-products--panel .brand-products__track > .product-browse-cell:last-child::after {
  display: none;
}

.brand-products--panel .product-browse-cell .product-image-slot {
  max-height: 14.5rem;
  padding-top: 1.15rem;
}

.brand-products--panel .wishlist-toggle {
  display: none;
}

.brand-products--panel .product-card-info {
  min-height: 0;
}

.brand-products--panel .product-card-info > p:first-child {
  display: none;
}

.brand-products--panel .product-card-title {
  font-size: 0.9rem;
  line-height: 1.2;
  min-height: 0;
}

.brand-products--panel .product-card-price p:first-child {
  font-size: 1.3rem;
  line-height: 1.15;
}

/* The mock-up's buy pill is a little over half the card wide, centred,
   and straddles the sheet's bottom edge. */
.brand-products--panel .product-card-footer {
  width: 56%;
  margin-inline: auto;
  margin-bottom: 0.15rem;
}

.brand-products--panel .product-card-footer .cart-add {
  padding-block: 0.72rem;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Alternating teal / orange pills, but only where the pill already means
   "in stock" — the blue on-order and grey sold-out states must still read. */
.brand-products--panel
  .brand-products__track
  > .product-browse-cell:nth-child(even)
  .product-card-footer.bg-kokkoris-teal-dark {
  background-color: #f4780d;
}

.brand-products--panel
  .brand-products__track
  > .product-browse-cell:nth-child(even)
  .product-card-footer.bg-kokkoris-teal-dark
  .cart-add:hover {
  background-color: #d9690a;
}

.brand-products--panel .brand-products__nav {
  position: absolute;
  top: 0;
  bottom: 1.55rem;
  z-index: 2;
  width: 3rem;
  color: #d3d4d5;
}

.brand-products--panel .brand-products__nav:hover {
  color: #a9abae;
}

.brand-products--panel .brand-products__nav svg {
  width: 2.4rem;
  height: 2.4rem;
  stroke-width: 3;
  transform: scaleY(2.4);
}

.brand-products--panel .brand-products__nav--prev {
  left: 0.9rem;
}

.brand-products--panel .brand-products__nav--next {
  right: 0.9rem;
}

@media (min-width: 1024px) {
  .brand-products--panel .brand-products__track > .product-browse-cell {
    width: 25%;
  }
}

/* Sheet-to-band spacing, straight off the artwork: the dog sheet floats in
   the white half, the cat sheet butts against the wave band above it. These
   are percentages, not vw, so they track the section width the same way the
   band images do — vw would additionally pick up the site's 0.9 zoom. */
.brand-products--panel.brand-products--white {
  padding: 2.2% 0 4.6%;
}

/* Carnis cat list starts immediately under the cat — no inset white frame. */
.brand-products--panel.brand-products--carnis-cats {
  padding: 0 0 4.6%;
  margin-top: -3.2%;
}

.brand-products--carnis-cats .brand-products__row {
  width: 100%;
}

.brand-products--carnis-cats .brand-products__row::before {
  box-shadow: none;
}

.brand-products--carnis-cats .product-browse-cell .product-image-slot {
  padding-top: 0.2rem;
}

.brand-products--panel.brand-products--core-cats,
.brand-products--panel.brand-products--profine-cats,
.brand-products--panel.brand-products--wild-cats,
.brand-products--panel.brand-products--carnis-dogs,
.brand-products--panel.brand-products--orange,
.brand-products--panel.brand-products--teal {
  padding: 2.2% 0 4.6%;
}

/* Club4Paws: list sits in the PDF slot under the paw; glow continues in the outro. */
.brand-products--panel.brand-products--club4paws-cats {
  padding: 0 0 2.2%;
  margin-top: -2.4%;
}

.brand-products--panel.brand-products--orange {
  padding: 2.2% 0 6.2%;
}

/* Ownat has no outro band — the mock-up's orange glow continues under
   the hanging pills and then the site footer, so this row keeps a tail. */
.brand-products--panel.brand-products--ownat-cats {
  padding: 0 0 11.2%;
}

.brand-detail-white {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  line-height: 0;
}

.brand-detail-white__frame {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.brand-detail-white__slice {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* Reserved area for a real featured product (PDF bag sketch removed). */
.brand-product-slot {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(0.75rem, 2.5vw, 2rem);
  width: min(280px, 26vw);
  min-height: min(360px, 34vw);
  pointer-events: none;
}

@media (max-width: 768px) {
  .brand-product-slot {
    right: clamp(0.75rem, 3vw, 1.5rem);
    width: min(220px, 42vw);
    min-height: min(280px, 52vw);
  }
}