/* Home page: hero, category grid, prescription panel. */

/* ---------- Hero ----------
   The hero slides up under the sticky header (negative margin equal to the
   header height) so its background runs to the top of the page, as in the
   mockup, with the header pill floating over it. */

.pp-hero {
  position: relative;
  isolation: isolate;
  margin-block-start: calc(-1 * var(--pp-header-h));
  padding-block: calc(var(--pp-header-h) + var(--pp-sp-5)) calc(var(--pp-section-gap) / 2);
}

/* Background, two layers. ::before is a soft pink haze that approximates
   the mockup; ::after is the uploaded image, if any. Both are drawn for RTL
   (artwork on the left) and mirrored for LTR, where text sits on the left. */
.pp-hero::before,
.pp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Fade into the page colour instead of ending on a hard edge. */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
}

.pp-hero::before {
  background:
    radial-gradient(42% 70% at 28% 52%, rgba(233, 10, 44, .10), transparent 70%),
    radial-gradient(30% 45% at 6% 18%, rgba(233, 10, 44, .08), transparent 70%),
    radial-gradient(35% 50% at 96% 4%, rgba(233, 10, 44, .07), transparent 70%),
    linear-gradient(180deg, #F6F7FC 0%, #F8F2F5 100%);
}

/* Anchored to the artwork side, so a narrower screen crops the empty text
   side of the image rather than the artwork. */
.pp-hero::after {
  background: var(--pp-hero-bg, none) left center / cover no-repeat;
}

[dir="ltr"] .pp-hero::before,
[dir="ltr"] .pp-hero::after { transform: scaleX(-1); }

.pp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--pp-sp-6);
}

.pp-hero__title {
  margin-block-end: var(--pp-sp-5);
  /* Capped at 4.2rem: the copy column stops growing at 598px from 1440px
     up, so a larger size only wrapped the first line onto a third. */
  font-size: clamp(2.5rem, 1.25rem + 3.4vw, 4.2rem);
  font-weight: 900;
  line-height: 1.08;
}

.pp-hero__title-line { display: block; }
.pp-hero__title-line--accent { color: var(--pp-red); }

.pp-hero__lead {
  max-width: 34ch;
  margin-block-end: var(--pp-sp-6);
  font-size: var(--pp-fs-xl);
  line-height: 1.55;
  color: var(--pp-ink-soft);
}

.pp-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pp-sp-6);
  margin-block-end: var(--pp-sp-7);
}

/* Secondary call to action: navy text, red arrow, as in the mockup. */
.pp-hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  font-size: var(--pp-fs-lg);
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-hero__link svg { color: var(--pp-red); }
.pp-hero__link:hover { color: var(--pp-red); }

[dir="rtl"] .pp-hero__link-arrow { transform: scaleX(-1); }

.pp-hero__link-wa { display: none; }

.pp-hero__trust .pp-trust__item { color: var(--pp-ink-soft); font-size: var(--pp-fs-md); font-weight: 500; }

.pp-hero__media { display: grid; place-items: center; }
.pp-hero__image { width: min(100%, 620px); height: auto; }
.pp-hero__image--placeholder { width: min(100%, 440px); }

/* ---------- Category grid ----------
   One tall feature tile, then beside it a row of two wide tiles over a row
   of three. The six-track subgrid lets both rows share one set of columns:
   the top tiles span three tracks, the bottom ones two. */

.pp-cats__grid {
  display: grid;
  grid-template-columns: 2.8fr repeat(6, 1fr);
  grid-template-rows: repeat(2, minmax(170px, 1fr));
  gap: var(--pp-sp-4);
}

.pp-cats__grid > .pp-cat-tile:nth-child(2) { grid-column: 2 / span 3; grid-row: 1; }
.pp-cats__grid > .pp-cat-tile:nth-child(3) { grid-column: 5 / span 3; grid-row: 1; }
.pp-cats__grid > .pp-cat-tile:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
.pp-cats__grid > .pp-cat-tile:nth-child(5) { grid-column: 4 / span 2; grid-row: 2; }
.pp-cats__grid > .pp-cat-tile:nth-child(6) { grid-column: 6 / span 2; grid-row: 2; }

.pp-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--pp-sp-5);
  overflow: hidden;
  /* White fading to a faint pink behind the artwork, which sits at the
     inline end: left in RTL, right in LTR. */
  background: linear-gradient(to right, #FCEFF1 0%, var(--pp-box) 62%);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
  color: var(--pp-navy);
  transition: transform var(--pp-transition), box-shadow var(--pp-transition);
}

[dir="ltr"] .pp-cat-tile { background: linear-gradient(to left, #FCEFF1 0%, var(--pp-box) 62%); }

.pp-cat-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow);
  color: var(--pp-red);
}

/* The feature tile spans both rows in the first column. */
.pp-cat-tile--feature,
[dir="ltr"] .pp-cat-tile--feature {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: linear-gradient(180deg, #F4F3F8 0%, #FBE8EC 100%);
}

/* Category artwork is a transparent cut-out anchored to the bottom of the
   inline-end side, filling most of the tile height. */
.pp-cat-tile__media {
  position: absolute;
  inset-block: var(--pp-sp-3);
  inset-inline-end: var(--pp-sp-3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 58%;
  pointer-events: none;
}

/* The feature tile image is a scene filling the tile below the title, so
   the product sits under the heading and arrow rather than behind them. Its
   top edge fades into the tile so the start of the image does not show. */
.pp-cat-tile--feature .pp-cat-tile__media {
  inset: 20% 0 0;
  width: auto;
}

.pp-cat-tile--feature .pp-cat-tile__media img {
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}

.pp-cat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* 70% keeps two-word names such as "Medical supplies" on one line in the
   narrower bottom tiles, so their arrows line up across the row. */
.pp-cat-tile__name {
  position: relative;
  z-index: 1;
  max-width: 70%;
  font-size: var(--pp-fs-lg);
  font-weight: 800;
  line-height: 1.25;
}

.pp-cat-tile--feature .pp-cat-tile__name { font-size: var(--pp-fs-2xl); }

.pp-cat-tile__go {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block-start: var(--pp-sp-4);
  /* Pure white, an edge and a firmer shadow: on the near-white tile the
     box colour alone left the button barely visible. */
  border: 1px solid var(--pp-edge);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-white);
  box-shadow: 0 2px 8px rgba(10, 37, 71, .10);
  color: var(--pp-navy);
  transition: background var(--pp-transition), color var(--pp-transition), box-shadow var(--pp-transition);
}

[dir="rtl"] .pp-cat-tile__go svg { transform: scaleX(-1); }
.pp-cat-tile:hover .pp-cat-tile__go { border-color: transparent; background: var(--pp-red); color: var(--pp-white); }

/* ---------- Prescription panel ----------
   Copy and steps on the reading-start side, phone artwork on the other,
   standing on the bottom edge of the panel as in the mockup. */

.pp-rx__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--pp-sp-6);
  min-height: 320px;
  padding: 0 var(--pp-sp-7);
  overflow: hidden;
  border-radius: var(--pp-radius);
  /* Pink behind the artwork (inline end), clean behind the copy. */
  background: linear-gradient(to right, #FBE6EA 0%, #FDF3F5 38%, var(--pp-box) 70%);
  box-shadow: var(--pp-shadow-sm);
}

[dir="ltr"] .pp-rx__panel { background: linear-gradient(to left, #FBE6EA 0%, #FDF3F5 38%, var(--pp-box) 70%); }

.pp-rx__copy { padding-block: var(--pp-sp-6); }

/* The last block (button, or the steps when there is no WhatsApp number)
   carries no bottom margin, so the copy stays truly centred. */
.pp-rx__copy > :last-child { margin-block-end: 0; }

.pp-rx__title {
  margin-block-end: var(--pp-sp-3);
  font-size: var(--pp-fs-3xl);
  font-weight: 900;
}

.pp-rx__lead {
  max-width: 52ch;
  margin-block-end: var(--pp-sp-6);
  font-size: var(--pp-fs-lg);
  color: var(--pp-ink-soft);
}

/* Three steps with an arrow between each, reading start to end. */
.pp-rx__steps {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--pp-sp-4) var(--pp-sp-5);
  margin: 0 0 var(--pp-sp-6);
  padding: 0;
  list-style: none;
}

.pp-rx__step {
  display: grid;
  justify-items: center;
  gap: var(--pp-sp-2);
  text-align: center;
}

.pp-rx__step-head {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-3);
}

.pp-rx__step-icon { display: inline-flex; color: var(--pp-navy); }

.pp-rx__step-num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-soft);
  color: var(--pp-red);
  font-size: var(--pp-fs-lg);
  font-weight: 800;
}

.pp-rx__step-label {
  font-size: var(--pp-fs-md);
  font-weight: 500;
  color: var(--pp-ink-soft);
}

.pp-rx__arrow {
  display: inline-flex;
  margin-block-start: 10px;
  color: var(--pp-muted);
}

[dir="rtl"] .pp-rx__arrow svg { transform: scaleX(-1); }

.pp-rx__cta { min-width: 280px; }

.pp-rx__media {
  display: flex;
  align-self: end;
  align-items: flex-end;
  justify-content: center;
}

/* The supplied artwork is a wide strip with the phone at its left edge and
   transparent space elsewhere; show the phone end of it. */
.pp-rx__image {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 320px;
  object-fit: cover;
  object-position: left bottom;
  /* Feather the sides so the edge of the crop never shows as a seam. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 72%, transparent 100%);
}

.pp-rx__glyph {
  align-self: center;
  color: var(--pp-red);
  opacity: .25;
}


/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .pp-hero__inner { grid-template-columns: 1fr; }
  .pp-hero__media { order: -1; }
  .pp-hero__image { width: min(100%, 320px); }

  .pp-cats__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  /* Drop the desktop placements and let tiles flow two per row. */
  .pp-cats__grid > .pp-cat-tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .pp-cats__grid > .pp-cat-tile--feature:nth-child(n),
  .pp-cat-tile--feature {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 220px;
  }

  /* Artwork moves below the copy, smaller, still standing on the edge. */
  .pp-rx__panel,
  [dir="ltr"] .pp-rx__panel {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--pp-sp-6) var(--pp-sp-5) 0;
    background: linear-gradient(180deg, var(--pp-box) 40%, #FBE6EA 100%);
  }

  /* The panel already pads the top here; the copy only needs space below. */
  .pp-rx__copy { padding-block: 0 var(--pp-sp-5); }
  .pp-rx__media { min-height: 0; }
  .pp-rx__image { height: 240px; }
  .pp-rx__glyph { display: none; }
}

@media (max-width: 600px) {
  .pp-cats__grid { grid-template-columns: 1fr; }
  .pp-cat-tile { min-height: 140px; }
  .pp-cat-tile__name { max-width: 70%; }

  .pp-hero__actions { gap: var(--pp-sp-4); }
  .pp-hero__actions .pp-btn { width: 100%; }

  .pp-trust { gap: var(--pp-sp-3); }

  .pp-trust__item + .pp-trust__item {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* Phones: the three steps become a vertical list (no arrows), and the
   call to action spans the panel so its label stays on one line. */
@media (max-width: 600px) {
  .pp-rx__steps {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pp-sp-3);
  }

  .pp-rx__arrow { display: none; }

  .pp-rx__step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: var(--pp-sp-3);
    text-align: start;
  }

  .pp-rx__step-label { font-size: var(--pp-fs-md); }

  .pp-rx__cta {
    width: 100%;
    min-width: 0;
    padding-inline: var(--pp-sp-5);
    white-space: nowrap;
  }

  .pp-rx__title { font-size: var(--pp-fs-2xl); }
}

/* Small screens, when the artwork is part of the hero background: show the
   art as a band across the top instead of behind the stacked text, and push
   the text below it. 300px tall keeps both the bottle and the cross on a
   375px-wide phone, since the image is anchored to its artwork side. */
@media (max-width: 1024px) {
  .pp-hero--art-in-bg::after {
    background-size: auto 300px;
    background-position: left 56px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 270px, transparent 360px);
    mask-image: linear-gradient(180deg, #000 0, #000 270px, transparent 360px);
  }

  .pp-hero--art-in-bg .pp-hero__media { min-height: 220px; }
}

/* On narrower screens the feature tile is landscape, so the title sits
   beside the product rather than above it: the scene can fill the tile. */
@media (max-width: 1024px) {
  .pp-cat-tile--feature .pp-cat-tile__media { inset: 0; }

  .pp-cat-tile--feature .pp-cat-tile__media img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- English ----------
   Inter sets wider than Heebo, so the same copy took extra lines: three
   hero headline lines instead of two, a wrapped badge row, and a two-line
   prescription title. These sizes, measured against the rendered text,
   bring English to the same line count as Hebrew at 1280px and up. */

html[lang^="en"] .pp-hero__title {
  font-size: clamp(2.25rem, 1.1rem + 3.15vw, 4rem);
  font-weight: 800;
}

html[lang^="en"] .pp-hero__lead { max-width: 24em; }

html[lang^="en"] .pp-hero__trust { gap: var(--pp-sp-4) 14px; }
html[lang^="en"] .pp-hero__trust .pp-trust__item + .pp-trust__item { padding-inline-start: 14px; }

@media (min-width: 1025px) {
  html[lang^="en"] .pp-rx__panel { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  html[lang^="en"] .pp-rx__title { font-size: 29px; }
  html[lang^="en"] .pp-rx__lead { max-width: none; }
  html[lang^="en"] .pp-rx__steps { column-gap: 20px; }
}

html[lang^="en"] .pp-rx__title { font-weight: 800; }

/* ---------- Phones: type scale and hero ----------
   Desktop sizes read as shouting on a 375px screen, and the artwork band
   pushed the headline below the fold. On phones the band is dropped (the
   pink haze stays) and the copy steps down to a phone-sized scale. */
@media (max-width: 600px) {
  .pp-hero--art-in-bg::after { display: none; }
  .pp-hero--art-in-bg .pp-hero__media { display: none; }
  .pp-hero__image--placeholder { display: none; }

  .pp-hero { padding-block-start: calc(var(--pp-header-h) + var(--pp-sp-3)); }

  .pp-hero__title,
  html[lang^="en"] .pp-hero__title {
    margin-block-end: var(--pp-sp-3);
    font-size: 2rem;
    line-height: 1.15;
  }

  .pp-hero__lead {
    margin-block-end: var(--pp-sp-5);
    font-size: var(--pp-fs-md);
    line-height: 1.6;
  }

  .pp-hero__actions { margin-block-end: var(--pp-sp-5); }
  .pp-hero__actions .pp-btn--lg { padding-block: var(--pp-sp-3); font-size: var(--pp-fs-md); }
  .pp-hero__link { font-size: var(--pp-fs-md); }

  .pp-hero__trust { gap: var(--pp-sp-2) var(--pp-sp-4); }
  .pp-hero__trust .pp-trust__item { font-size: var(--pp-fs-xs); }

  .pp-section__title { font-size: 1.25rem; }
  .pp-section__link { font-size: var(--pp-fs-xs); }

  .pp-cat-tile { padding: var(--pp-sp-4); min-height: 120px; }
  .pp-cat-tile__name { font-size: var(--pp-fs-md); }
  .pp-cat-tile--feature .pp-cat-tile__name { font-size: var(--pp-fs-xl); }
  .pp-cat-tile__go { width: 36px; height: 36px; margin-block-start: var(--pp-sp-3); }
  .pp-cat-tile--feature { min-height: 180px; }

  .pp-rx__panel,
  [dir="ltr"] .pp-rx__panel { padding: var(--pp-sp-5) var(--pp-sp-4) 0; }
  .pp-rx__title,
  html[lang^="en"] .pp-rx__title { font-size: var(--pp-fs-xl); }
  .pp-rx__lead { margin-block-end: var(--pp-sp-4); font-size: var(--pp-fs-sm); }
  .pp-rx__step-label { font-size: var(--pp-fs-sm); }
  .pp-rx__step-num { width: 34px; height: 34px; font-size: var(--pp-fs-md); }
  .pp-rx__cta.pp-btn--lg { padding-block: var(--pp-sp-3); font-size: var(--pp-fs-md); }
  .pp-rx__image { height: 200px; }
}

@media (max-width: 600px) {
  /* Badges wrap freely, without the desktop dividers. The English rule
     above is more specific, so it is matched here explicitly. */
  .pp-hero__trust .pp-trust__item + .pp-trust__item,
  html[lang^="en"] .pp-hero__trust .pp-trust__item + .pp-trust__item {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  /* Keep a section title and its "view all" link on one line. */
  .pp-section__head { gap: var(--pp-sp-2); }
}

/* Phones: the two calls to action stack as a matched pair (the secondary
   link becomes an outline button with the WhatsApp mark), and the badges
   sit in an even three-column card instead of wrapping unevenly. */
@media (max-width: 600px) {
  .pp-hero__actions { gap: var(--pp-sp-3); }

  .pp-hero__link {
    justify-content: center;
    width: 100%;
    padding: var(--pp-sp-3) var(--pp-sp-5);
    background: var(--pp-white);
    border: 1.5px solid var(--pp-line);
    border-radius: var(--pp-radius-pill);
    box-shadow: var(--pp-shadow);
  }

  .pp-hero__link:hover { border-color: var(--pp-red); }
  .pp-hero__link .pp-hero__link-wa { display: block; color: var(--pp-success); }
  .pp-hero__link-wa ~ .pp-hero__link-arrow { display: none; }

  .pp-hero__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--pp-sp-2);
    padding: var(--pp-sp-4) var(--pp-sp-2);
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--pp-edge);
    border-radius: var(--pp-radius-sm);
    box-shadow: var(--pp-shadow);
  }

  .pp-hero__trust .pp-trust__item {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--pp-sp-2);
    color: var(--pp-navy);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
  }

  .pp-hero__trust .pp-trust__item svg {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: var(--pp-red-soft);
    border-radius: 50%;
  }
}

/* English names run longer ("Perfume & beauty"); a point smaller keeps
   them on one line in the bottom tiles on desktop. */
@media (min-width: 1025px) {
  html[lang^="en"] .pp-cat-tile:not(.pp-cat-tile--feature) .pp-cat-tile__name { font-size: 17px; }
}

/* English only: badges and step labels stay at 14px. At the 16px used for
   Hebrew and Arabic the longer English wording wraps to a second row at
   every desktop width. */
@media (min-width: 601px) {
  html[lang^="en"] .pp-hero__trust .pp-trust__item,
  html[lang^="en"] .pp-rx__step-label { font-size: var(--pp-fs-sm); }
}

/* Desktop hero height, from the mockup: the hero (header included) is half
   as tall as the mockup is wide, about 723px at our 1320px container. The
   copy is centred vertically within it. */
@media (min-width: 1025px) {
  .pp-hero__inner { min-height: calc(724px - var(--pp-header-h) - var(--pp-sp-5) - var(--pp-section-gap) / 2); }
}