/* Product page: photo left, buying panel right (sticky on desktop), care + delivery under the photo, related plants. */
.pp { padding-block: clamp(40px, 8vh, 96px) clamp(56px, 9vh, 112px); }
.pp__crumbs { margin-block-end: 22px; }
.pp__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); grid-template-areas: "gal buy" "more buy"; gap: 0 clamp(36px, 4.6vw, 88px); align-items: start; }
.pp__gal { grid-area: gal; display: grid; gap: 12px; }
.pp__buy { grid-area: buy; position: sticky; top: 24px; display: grid; gap: 28px; }
.pp__more { grid-area: more; display: grid; gap: clamp(48px, 7vh, 80px); padding-block-start: clamp(48px, 8vh, 96px); }

/* gallery: two stacked photos that crossfade */
.pp__stage { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; }
.pp__stage img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-reveal), scale 1.2s var(--ease-reveal); scale: 1.015; }
.pp__stage img.is-on { opacity: 1; scale: 1; }
.pp__views { display: flex; gap: 10px; }
.pp__views button { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--encre); cursor: pointer; font: 500 14px/1 var(--font-text); transition: border-color .2s, background-color .2s; }
.pp__views button:hover { border-color: rgba(18,20,18,.4); }
.pp__views button[aria-selected="true"] { border-color: var(--zellige); box-shadow: inset 0 0 0 1px var(--zellige); background: #fff; }
.pp__views img { inline-size: 40px; block-size: 50px; object-fit: cover; border-radius: 4px; }

/* head */
.pp__head { display: grid; gap: 10px; }
.pp__name { margin: 0; font: 400 clamp(44px, 4.4vw, 72px)/.98 var(--font-serif); letter-spacing: -.035em; }
.pp__ar { font: 400 .42em/1 "IBM Plex Sans Arabic", var(--font-text); letter-spacing: 0; opacity: .5; white-space: nowrap; vertical-align: .35em; }
.pp__latin { margin: 0; font: italic 400 18px/1.3 var(--font-serif); opacity: .6; }
.pp__latin[hidden] { display: none; }
.pp__why { margin: 6px 0 0; max-inline-size: 30em; font: 400 17px/1.55 var(--font-text); color: var(--encre-soft); text-wrap: pretty; }

/* buying form */
.buy { display: grid; gap: 22px; }
.buy__group { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.buy__group[hidden] { display: none; }
.buy__group .legend { padding: 0; margin-block-end: 10px; }
.buy__sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.opt.size { display: grid; justify-items: start; align-content: start; gap: 2px; padding: 12px 16px 14px; }
.size__h { font: 400 30px/1 var(--font-serif); letter-spacing: -.02em; }
.opt.size small { margin-block-end: 6px; }
.size__h.is-label { font-size: 22px; line-height: 1.15; margin-block-end: 6px; }
.opt.size b { font: 500 15px/1.2 var(--font-text); }
.is-one .buy__sizes { grid-auto-columns: minmax(0, 220px); }
.buy__pots { grid-template-columns: 1fr 1fr; }
.buy__pots .opt { align-items: flex-start; padding: 13px 14px; }
.buy__pots .opt__end { font-weight: 400; font-size: 14px; }
.buy__adds { display: grid; border-block-start: 1px solid var(--line); }
.add { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px; padding: 13px 2px; border-block-end: 1px solid var(--line); cursor: pointer; }
.add input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.add__box { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border: 1.5px solid var(--field-border); border-radius: 5px; background: #fff; transition: background-color .2s, border-color .2s; }
.add__box svg { inline-size: 16px; block-size: 16px; fill: none; stroke: #f6f6f2; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale: .6; transition: opacity .2s, scale .25s var(--ease-out); }
.add input:checked + .add__box { background: var(--zellige); border-color: var(--zellige); }
.add input:checked + .add__box svg { opacity: 1; scale: 1; }
.add input:focus-visible + .add__box { outline: 2px solid var(--zellige); outline-offset: 2px; }
.add__txt b { display: block; font: 500 15px/1.3 var(--font-text); }
.add__txt small { display: block; margin-block-start: 2px; font: 400 13px/1.35 var(--font-text); opacity: .65; }
.add__price { font: 400 14px/1 var(--font-text); white-space: nowrap; }
.add:hover .add__box { border-color: var(--encre); }
.add.is-off { cursor: default; } .add.is-off .add__txt b, .add.is-off .add__price, .add.is-off .add__box { opacity: .45; }
.buy__trees { margin-block-start: 6px; }
.buy__trees[hidden] { display: none; }
.buy__trees a { color: var(--zellige); font-weight: 500; }
.buy__total { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block-start: 4px; }
.buy__total .qty { margin: 0; }
.buy__total p { margin: 0; }
.buy__price { font: 400 clamp(32px, 2.6vw, 40px)/1 var(--font-serif); letter-spacing: -.02em; }
.buy__add { min-block-size: 56px; transition: background-color .25s var(--ease-out), transform .25s var(--ease-out); }
.buy__add.is-done { background: var(--encre); }
.buy__city { display: grid; grid-template-columns: 20px auto; justify-content: start; align-items: start; gap: 4px 10px; margin: -6px 0 0; font: 400 14px/1.4 var(--font-text); color: var(--encre-soft); }
.buy__city svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.buy__city .link-btn { grid-column: 2; justify-self: start; color: var(--encre); font-weight: 500; }
@media (min-width: 1200px) { .buy__city { grid-template-columns: 20px auto auto; } .buy__city .link-btn { grid-column: auto; } }

/* care + delivery */
.pp__care, .pp__ship { display: grid; gap: 22px; align-content: start; }
.care__lvl { margin: -8px 0 0; font: 400 16px/1.5 var(--font-text); color: var(--encre-soft); }
.care { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.care li { display: grid; gap: 14px; align-content: start; padding-block-start: 18px; border-block-start: 1px solid rgba(18,20,18,.2); }
.care svg, .ship svg { inline-size: 28px; block-size: 28px; fill: none; stroke: var(--zellige); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.care p, .ship p { margin: 0; display: grid; gap: 4px; font: 400 15px/1.5 var(--font-text); }
.care b, .ship b { font-weight: 600; }
.care span, .ship span { color: var(--encre-soft); }
.care__pet { padding: 14px 16px; border-radius: 10px; background: var(--menthe); }
.ship { list-style: none; margin: 0; padding: 0; display: grid; }
.ship li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; padding-block: 18px; border-block-end: 1px solid var(--line); }
.ship li:first-child { border-block-start: 1px solid var(--line); }
.pp__ship-link { justify-self: start; color: var(--encre); font: 500 15px/1 var(--font-text); text-underline-offset: 4px; }

/* not found */
.pp__none { display: grid; justify-items: start; gap: 18px; padding-block: clamp(40px, 10vh, 120px); max-inline-size: 40em; }
.pp__none[hidden] { display: none; }
.pp__none-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* related */
.pp-rel { display: grid; gap: 32px; padding-block: clamp(56px, 9vh, 104px); border-block-start: 1px solid var(--line); }
.pp-rel[hidden] { display: none; }

/* phone bar */
.pp-bar { display: none; }

@media (max-width: 900px) {
  .pp__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gal" "buy" "more"; }
  .pp__buy { position: static; padding-block-start: 28px; }
  .pp__stage { margin-inline: -20px; border-radius: 0; aspect-ratio: 4 / 4.6; }
  .pp__more { padding-block-start: 56px; }
  .care { grid-template-columns: 1fr; gap: 0; }
  .care li { grid-template-columns: 28px 1fr; gap: 16px; padding-block: 18px; }
  .pp-bar { position: fixed; z-index: 40; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -1px 0 rgba(18,20,18,.08), 0 -16px 40px -24px rgba(18,20,18,.3); translate: 0 110%; transition: translate .45s var(--ease-reveal); }
  .pp-bar.is-on { translate: 0 0; }
  .pp-bar__txt { display: grid; gap: 2px; min-inline-size: 0; }
  .pp-bar__txt b { font: 400 20px/1.1 var(--font-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pp-bar__txt span { font: 500 14px/1 var(--font-text); }
  .pp-bar .b { flex: none; padding: 14px 22px; }
}
@media (max-width: 480px) {
  .buy__pots { grid-template-columns: 1fr; }
  .pp__name { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp__stage img, .pp-bar { transition: none; }
}