/* Shop /shop — Collection hero (1536×640 layered, standalone reference) */
/* No @import here: Odoo's asset bundler splits @import URLs on ";" and breaks the bundle. */

.gf-shop-hero-root {
  --gf-green-deep: #183524;
  --gf-green-mid: #225627;
  --gf-green: #2f5a38;
  --gf-cream: #f4ecd8;
  --gf-paper: #faf6ea;
  --gf-orange: #d36135;
  --gf-forge: #e25c2a;
  --gf-gold: #c9a962;
  --gf-grid-opacity: 0.55;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --font-body: Inter, system-ui, -apple-system, sans-serif;
  --leaves-right: -2%;
  --leaves-bottom: 10%;
  --leaves-width: 56%;
  --leaves-height: 100%;
  --leaves-z: 5;
  --leaves-scale: 0.853;
  --leaves-origin-x: 44%;
  background: #faf6ea;
  margin-bottom: 0;
  padding-bottom: 0;
}

.gf-shop-hero-root .gf-collection-hero {
  width: 100%;
  aspect-ratio: 1536 / 640;
  position: relative;
  container-type: inline-size;
}

.gf-shop-hero-root .gf-collection-hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 28%, rgba(91, 143, 90, 0.3) 0, transparent 30%),
    radial-gradient(circle at 16% 18%, rgba(218, 170, 81, 0.16) 0, transparent 24%),
    linear-gradient(145deg, #0f2e1e 0%, #143b27 46%, #0b281b 100%);
}

.gf-shop-hero-root .gf-collection-hero__bg-photo {
  position: absolute;
  inset: -4%;
  z-index: 0;
  background-image: url("/greenforge_plants/static/src/img/shop/collection-hero/collection-hero-bg.jpg");
  background-size: cover;
  background-position: center 55%;
  filter: blur(3px) saturate(0.95) brightness(0.74);
  transform: scale(1.035);
  opacity: 0.86;
  pointer-events: none;
}

.gf-shop-hero-root .gf-collection-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(10, 36, 24, 0.88) 0%,
      rgba(13, 48, 31, 0.76) 36%,
      rgba(13, 48, 31, 0.36) 62%,
      rgba(10, 36, 24, 0.18) 100%
    ),
    radial-gradient(circle at 74% 32%, rgba(218, 170, 81, 0.14), transparent 28%),
    radial-gradient(circle at 50% 120%, rgba(250, 246, 234, 0.08), transparent 32%);
}

.gf-shop-hero-root .gf-collection-hero__layers,
.gf-shop-hero-root .gf-collection-hero__motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.gf-shop-hero-root .gf-collection-hero__leaves {
  position: absolute;
  right: var(--leaves-right);
  bottom: var(--leaves-bottom);
  width: var(--leaves-width);
  height: var(--leaves-height);
  z-index: var(--leaves-z);
  pointer-events: none;
  overflow: visible;
  transform: scale(var(--leaves-scale));
  transform-origin: var(--leaves-origin-x) 100%;
}

.gf-shop-hero-root .gf-collection-hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gf-shop-hero-root .gf-collection-hero__layer img,
.gf-shop-hero-root .gf-collection-hero__layer object {
  width: 100%;
  height: 100%;
  display: block;
}

.gf-shop-hero-root .gf-layer--grid-fade {
  inset: auto;
  left: 0;
  top: 5px;
  width: 50%;
  height: 100%;
  opacity: var(--gf-grid-base-opacity, var(--gf-grid-opacity));
  -webkit-mask-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.82) 22%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.38) 58%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.04) 84%, rgba(0, 0, 0, 0) 94%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.58) 32%, rgba(0, 0, 0, 0.34) 46%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.04) 68%, rgba(0, 0, 0, 0) 78%);
  mask-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.82) 22%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.38) 58%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.04) 84%, rgba(0, 0, 0, 0) 94%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.58) 32%, rgba(0, 0, 0, 0.34) 46%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.04) 68%, rgba(0, 0, 0, 0) 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.gf-shop-hero-root .gf-layer--grid-fade img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top left;
}

.gf-shop-hero-root .gf-layer--sun-rise object {
  object-fit: cover;
  object-position: top right;
}

.gf-shop-hero-root .gf-layer--wave-in img,
.gf-shop-hero-root .gf-layer--wave-in object {
  object-fit: fill;
}

.gf-shop-hero-root .gf-collection-hero__leaf {
  position: absolute;
  height: auto;
  transform-origin: 50% 100%;
  transform: rotate(var(--leaf-rotate));
  will-change: transform;
  filter: drop-shadow(0 14px 22px rgba(10, 28, 18, 0.28));
}

.gf-shop-hero-root .gf-collection-hero__leaf img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.gf-shop-hero-root .gf-collection-hero__leaf[data-leaf="tomato"] {
  left: 37%;
  bottom: 2%;
  width: 26%;
  z-index: 6;
  --leaf-rotate: -26deg;
  --sway-duration: 8s;
  --sway-delay: 0ms;
}

.gf-shop-hero-root .gf-collection-hero__leaf[data-leaf="basil"] {
  left: 40%;
  bottom: 6%;
  width: 20%;
  z-index: 7;
  --leaf-rotate: 4deg;
  --sway-duration: 7.5s;
  --sway-delay: 200ms;
}

.gf-shop-hero-root .gf-collection-hero__leaf[data-leaf="pepper"] {
  left: 37%;
  bottom: 2%;
  width: 26%;
  z-index: 8;
  --leaf-rotate: -10deg;
  --sway-duration: 9s;
  --sway-delay: 350ms;
}

.gf-shop-hero-root .gf-collection-hero__leaf[data-leaf="zucchini"] {
  left: 32%;
  bottom: 0%;
  width: 36%;
  z-index: 9;
  --leaf-rotate: 16deg;
  --sway-duration: 8.5s;
  --sway-delay: 500ms;
}

.gf-shop-hero-root .gf-collection-hero__leaf[data-leaf="strawberry"] {
  left: 39%;
  bottom: 6%;
  width: 22%;
  z-index: 10;
  --leaf-rotate: 32deg;
  --sway-duration: 7s;
  --sway-delay: 650ms;
}

.gf-shop-hero-root .gf-collection-hero__copy {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(48%, 40rem);
  max-width: 40rem;
  padding: clamp(2.75rem, 9vw, 4.5rem) 1.25rem clamp(2.75rem, 9vw, 4.5rem) clamp(1rem, 3.8%, 3.75rem);
  color: var(--gf-paper);
  pointer-events: none;
}

.gf-shop-hero-root .gf-collection-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gf-gold);
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(1.25rem);
}

.gf-shop-hero-root .gf-collection-hero__eyebrow-line {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.gf-shop-hero-root .gf-collection-hero__eyebrow-text {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.gf-shop-hero-root .gf-collection-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3.95rem);
  font-weight: 500;
  line-height: 1.02;
  margin: 0 0 1.25rem;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(1.25rem);
}

.gf-shop-hero-root .gf-collection-hero__title-line {
  display: block;
}

.gf-shop-hero-root .gf-collection-hero__title-em {
  position: relative;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  display: inline-block;
  text-shadow: 0 0 18px rgba(250, 246, 234, 0.2);
}

.gf-shop-hero-root .gf-collection-hero__title-em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.055em;
  border-radius: 2px;
  background: var(--gf-gold);
  transform-origin: left;
  transform: scaleX(0);
}

.gf-shop-hero-root .gf-collection-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 32rem;
  color: rgba(250, 246, 234, 0.92);
  opacity: 0;
  transform: translateY(1.25rem);
}

.gf-shop-hero-root .gf-collection-hero__num-wrap {
  color: var(--gf-cream);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.18em;
  font-variant-numeric: tabular-nums;
}

.gf-shop-hero-root .gf-collection-hero__num-wrap .plus {
  color: var(--gf-forge);
  font-weight: 700;
  margin-left: 1px;
}

.gf-shop-hero-root .gf-collection-hero__cats {
  margin-top: calc(100cqw * 16 / 1536);
  font-family: var(--font-body);
  font-size: clamp(0.5625rem, calc(100cqw * 10.5 / 1536), 0.6875rem);
  font-weight: 500;
  color: rgba(244, 236, 216, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(calc(100cqw * 16 / 1536));
}

.gf-shop-hero-root .gf-collection-hero__cat:not(:last-child)::after {
  content: " ·";
  color: rgba(201, 168, 91, 0.45);
  margin-right: 6px;
}

/* Bullets — même layout que home hero badges */
.gf-shop-hero-root .gf-collection-hero__props {
  list-style: none;
  margin: 0 0 1.55rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.8rem;
  max-width: 40rem;
  opacity: 0;
  transform: translateY(1.25rem);
}

.gf-shop-hero-root .gf-collection-hero__prop {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.72rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 700;
  line-height: 1.25;
  color: rgba(250, 246, 234, 0.96);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.gf-shop-hero-root .gf-collection-hero__prop-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  margin-top: 0.02rem;
  border-radius: 0;
  background: transparent;
  line-height: 0;
}

.gf-shop-hero-root .gf-collection-hero__prop-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.24));
}

.gf-shop-hero-root .gf-collection-hero__mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gf-gold);
  opacity: 0;
  z-index: 12;
  filter: blur(0.3px);
  box-shadow: 0 0 6px rgba(216, 128, 54, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
  /* Pas de fade-in : grille + butte blanche uniquement */
  .gf-shop-hero-root .gf-collection-hero--animate .gf-layer--sun-rise {
    animation: gf-shop-sun-rise 1400ms var(--ease-out) both;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-layer--sun-rise object {
    transform-origin: 74.8% 43.3%;
    animation: gf-shop-sun-breathe 7s var(--ease-in-out) 1400ms infinite;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__leaf {
    opacity: 0;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__leaf--sway-a {
    animation:
      gf-shop-leaf-fade 550ms var(--ease-out) forwards,
      gf-shop-leaf-sway-a var(--sway-duration, 8s) var(--ease-in-out) infinite;
    animation-delay:
      var(--sway-delay, 0ms),
      calc(180ms + var(--sway-delay, 0ms));
    animation-direction: normal, var(--sway-direction, normal);
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__leaf--sway-b {
    animation:
      gf-shop-leaf-fade 550ms var(--ease-out) forwards,
      gf-shop-leaf-sway-b var(--sway-duration, 8s) var(--ease-in-out) infinite;
    animation-delay:
      var(--sway-delay, 0ms),
      calc(180ms + var(--sway-delay, 0ms));
    animation-direction: normal, var(--sway-direction, normal);
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__leaf--sway-reverse {
    --sway-direction: reverse;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__eyebrow {
    animation: gf-shop-rise 800ms var(--ease-out) both;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__title {
    animation: gf-shop-rise 800ms var(--ease-out) both;
    animation-delay: 120ms;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__subtitle {
    animation: gf-shop-rise 800ms var(--ease-out) both;
    animation-delay: 240ms;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__props {
    animation: gf-shop-rise 800ms var(--ease-out) both;
    animation-delay: 360ms;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__title-em::after {
    animation: gf-shop-underline-in 850ms 1150ms var(--ease-out) forwards;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__mote--1 {
    left: 55%; top: 70%;
    animation: gf-shop-mote-float 9s 1.4s linear infinite;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__mote--2 {
    left: 62%; top: 90%; width: 3px; height: 3px;
    animation: gf-shop-mote-float 11s 2.2s linear infinite;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__mote--3 {
    left: 78%; top: 80%;
    animation: gf-shop-mote-float 13s 3.8s linear infinite;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__mote--4 {
    left: 70%; top: 65%; width: 5px; height: 5px;
    animation: gf-shop-mote-float 10s 0.6s linear infinite;
  }

  .gf-shop-hero-root .gf-collection-hero--animate .gf-collection-hero__mote--5 {
    left: 85%; top: 88%; width: 2px; height: 2px;
    animation: gf-shop-mote-float 14s 5s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-shop-hero-root .gf-collection-hero__leaf,
  .gf-shop-hero-root .gf-collection-hero__eyebrow,
  .gf-shop-hero-root .gf-collection-hero__title,
  .gf-shop-hero-root .gf-collection-hero__subtitle,
  .gf-shop-hero-root .gf-collection-hero__props,
  .gf-shop-hero-root .gf-collection-hero__cats {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .gf-shop-hero-root .gf-collection-hero__title-em::after {
    transform: scaleX(1);
  }
}

@media (min-width: 992px) {
  .gf-shop-hero-root .gf-collection-hero__copy {
    padding: 4rem 2rem 4rem clamp(2rem, 5vw, 4.5rem);
  }
}

@media (max-width: 767.98px) {
  .gf-shop-hero-root {
    --gf-visual-h: calc(100vw * 640 / 1536);
    --leaves-scale: 0.76;
  }

  /* Copy en haut + calques visuels 1536×640 calés en bas (butte intacte) */
  .gf-shop-hero-root .gf-collection-hero {
    aspect-ratio: auto;
    min-height: calc(var(--gf-visual-h) + 15.5rem);
    height: auto;
    overflow: hidden;
  }

  /* Stage en flux : la hauteur du hero suit le contenu du copy (textes longs) */
  .gf-shop-hero-root .gf-collection-hero__stage {
    position: relative;
    min-height: inherit;
  }

  /* Fond vert sur tout le hero ; liseret masqué par le filet crème en bas */
  .gf-shop-hero-root .gf-collection-hero__bg {
    clip-path: none;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
  }

  .gf-shop-hero-root .gf-collection-hero__layers {
    inset: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
  }

  .gf-shop-hero-root .gf-collection-hero__motes {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--gf-visual-h);
    width: 100%;
  }

  /* Grille moitié gauche — planche native 768×640, pas d'étirement */
  .gf-shop-hero-root .gf-layer--grid-fade {
    inset: auto;
    left: 0;
    top: 5px;
    width: 50%;
    height: auto;
    aspect-ratio: 768 / 640;
  }

  .gf-shop-hero-root .gf-layer--grid-fade img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: top left;
  }

  /* Soleil + vague dans la bande 1536×640 en bas */
  .gf-shop-hero-root .gf-layer--sun-rise,
  .gf-shop-hero-root .gf-layer--wave-in {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--gf-visual-h);
    width: 100%;
  }

  .gf-shop-hero-root .gf-layer--wave-in {
    inset: auto 0 0 0;
  }

  .gf-shop-hero-root .gf-layer--wave-in img {
    object-fit: fill;
    height: calc(100% + 2px);
    width: 100%;
    display: block;
    margin-bottom: -2px;
  }

  .gf-shop-hero-root .gf-collection-hero__stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #faf6ea;
    z-index: 15;
    pointer-events: none;
  }

  /* Bouquet : mêmes coords manifest, calé sur la bande visuelle (droite) */
  .gf-shop-hero-root .gf-collection-hero__leaves {
    top: auto;
    bottom: 0;
    left: auto;
    right: var(--leaves-right);
    width: var(--leaves-width);
    height: var(--gf-visual-h);
    transform: scale(var(--leaves-scale)) translateY(-36px);
    transform-origin: var(--leaves-origin-x) 100%;
  }

  .gf-shop-hero-root .gf-collection-hero__copy {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    padding: 2.35rem 1.1rem calc(var(--gf-visual-h) + 1rem);
    justify-content: flex-start;
  }

  .gf-shop-hero-root .gf-collection-hero__eyebrow {
    margin-bottom: 1rem;
  }

  .gf-shop-hero-root .gf-collection-hero__eyebrow-line {
    width: 1.75rem;
  }

  .gf-shop-hero-root .gf-collection-hero__eyebrow-text {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }

  .gf-shop-hero-root .gf-collection-hero__title {
    font-size: clamp(2.05rem, 12vw, 3.05rem);
    margin-bottom: 1.25rem;
  }

  .gf-shop-hero-root .gf-collection-hero__subtitle {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    max-width: 32rem;
  }

  .gf-shop-hero-root .gf-collection-hero__props {
    gap: 0.65rem;
    margin-bottom: 1.2rem;
  }

  .gf-shop-hero-root .gf-collection-hero__prop {
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .gf-shop-hero-root .gf-collection-hero__prop-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    min-height: 1.6rem;
    margin-top: 0.04rem;
  }

  .gf-shop-hero-root .gf-collection-hero__cats {
    margin-top: 0.9rem;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    line-height: 1.5;
  }

  .gf-shop-hero-root .gf-collection-hero__cat:not(:last-child)::after {
    content: none;
  }
}

@keyframes gf-shop-leaf-sway-a {
  0%, 100% { transform: rotate(var(--leaf-rotate)); }
  50%      { transform: rotate(calc(var(--leaf-rotate) + 1.6deg)); }
}

@keyframes gf-shop-leaf-sway-b {
  0%, 100% { transform: rotate(var(--leaf-rotate)); }
  50%      { transform: rotate(calc(var(--leaf-rotate) - 1.4deg)); }
}

@keyframes gf-shop-sun-rise {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes gf-shop-leaf-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gf-shop-sun-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

@keyframes gf-shop-mote-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translateY(-120px) translateX(20px); opacity: 0.6; }
  90%  { opacity: 0; }
  100% { transform: translateY(-220px) translateX(-10px); opacity: 0; }
}

@keyframes gf-shop-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gf-shop-underline-in {
  to { transform: scaleX(1); }
}