/* Casablanca product presentation and payment states. The existing hero is untouched. */

.store .store-wrap { width: min(1320px,100%); }
.store-head { max-width: 860px; }
.store-head .store-title { font-size: clamp(32px,4.2vw,58px); letter-spacing: -.035em; }
.store-grid { grid-template-columns: minmax(0,1.92fr) minmax(250px,.82fr); gap: 20px; }
.store-grid .store-card { min-height: 535px; border: 0; border-radius: 22px; transform: none; }
.store-grid .store-card--featured { grid-column: 1; grid-row: 1; grid-template-columns: 47% 53%; background: #123a2d; color: #fff; }
.store-grid .store-card--featured .store-card__visual { background: radial-gradient(circle at 48% 56%,#3f7354 0%,#204b3a 54%,#123a2d 100%); padding: 30px 22px 0; }
.store-grid .store-card--featured .store-card__visual img { max-height: 480px; mix-blend-mode: normal; filter: drop-shadow(0 24px 19px rgba(2,24,13,.22)); }
.store-grid .store-card--featured .store-card__copy { justify-content: center; padding: clamp(26px,4vw,56px); }
.store-grid .store-card--featured .store-kicker,
.store-grid .store-card--featured .store-card__copy>p { color: rgba(255,255,255,.78); }
.store-grid .store-card--featured .store-pack { color: #fff; border-color: rgba(255,255,255,.42); background: transparent; }
.store-grid .store-card--featured .store-pack[aria-pressed="true"] { border-color: #fff; background: rgba(255,255,255,.16); }
.store-grid .store-card--featured .store-cta:not(.product-action) { background: transparent; border: 1px solid rgba(255,255,255,.65); color: #fff; }
.store-grid .store-card--featured .product-action { background: #f1f4e8; color: #123a2d; }
.store-grid .store-card--featured .product-action:hover { background: #fff; }
.store-grid .store-card h2 { font-size: clamp(32px,3vw,46px); line-height: 1.04; letter-spacing: -.04em; margin: 15px 0 18px; }
.store-grid .store-card__copy>p { max-width: 42ch; font-size: 15px; line-height: 1.5; }
.store-grid .store-packs { margin: 10px 0 24px; }
.store-grid .store-pack { min-width: 64px; padding: 10px 15px; border-radius: 100px; text-align: center; }
.store-card__actions { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; width: 100%; }
.store-card__actions .store-cta { width: auto; min-height: 48px; border-radius: 100px; white-space: nowrap; }
.store-card__actions .product-action { flex: 1 1 180px; }
.store-card__actions .store-cta:not(.product-action) { flex: 0 0 auto; }
.store-card__image-note { display: block; margin-bottom: 15px; color: #607465; font: 400 11px/1.4 "Instrument Sans",sans-serif; }
.store-grid .store-card--featured .store-card__image-note { color: rgba(255,255,255,.65); }
.store-story { position: relative; grid-column: 2; grid-row: 1; min-height: 535px; overflow: hidden; border-radius: 22px; background: #214536; }
.store-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 33% center; }
.store-story::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,rgba(8,32,22,.78)); }
.store-story p { position: absolute; z-index: 1; left: 28px; right: 25px; bottom: 26px; margin: 0; color: #fff; font: 400 clamp(19px,2vw,27px)/1.18 "Instrument Sans",sans-serif; letter-spacing: -.026em; }
.store-grid .store-card--secondary { grid-column: 1/-1; grid-row: 2; grid-template-columns: 42% 58%; min-height: 460px; background: #e8ece3; }
.store-grid .store-card--secondary .store-card__visual { min-height: 460px; background: #dde5d7 url('../img/casablanca-domates-serasi-v2.webp') center/cover; padding: 24px 38px 0; }
.store-grid .store-card--secondary .store-card__visual::before { content: ""; position: absolute; inset: 0; background: rgba(225,234,222,.68); }
.store-grid .store-card--secondary .store-card__visual img { z-index: 1; width: min(66%,300px); height: 100%; max-height: 420px; object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 20px 18px rgba(25,50,33,.22)); }
.store-grid .store-card--secondary .store-card__copy { justify-content: center; padding: clamp(28px,5vw,64px); }
.store-grid .store-card--secondary .store-card__copy>p { color: #445a49; }
.store-grid .store-card--secondary .store-pack[aria-pressed="true"] { border-color: #28583d; background: #f7faf4; }
.store-grid .store-card--secondary .store-cta:not(.product-action) { border: 1px solid #28583d; background: transparent; color: #28583d; }
.store-grid .store-card--secondary .store-cta:not(.product-action):hover { background: #d7e2d5; }
.store-grid .store-card:hover { border-color: transparent; }
.store-grid .store-card:hover .store-card__visual img { transform: scale(1.025); }

.store-card__visual { position: relative; }
.store-card[data-product="znwater"] .store-card__visual img { mix-blend-mode: normal; }
.store-head--editorial { max-width: 830px; margin-inline: 0; text-align: left; }
.store-head--editorial .store-intro { margin-inline: 0; max-width: 67ch; }
.shop-kicker { display: flex; align-items: center; gap: 12px; color: #365b45; font: 600 12px/1.3 "Instrument Sans",sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.shop-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.shop-help { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: clamp(36px,5vw,70px); padding: clamp(25px,4vw,48px); background: #e9eee7; }
.shop-help h2 { margin: 0 0 9px; color: #153b2b; font: 500 clamp(25px,3vw,36px)/1.12 "Instrument Sans",sans-serif; letter-spacing: -.045em; }
.shop-help p { max-width: 62ch; margin: 0; color: #4a5f51; font: 400 15px/1.6 "Instrument Sans",sans-serif; }
.shop-help .store-cta { flex: none; min-width: 180px; }
.shop-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px max(22px,calc((100vw - 1220px)/2)); border-top: 1px solid rgba(25,49,38,.14); background: #f7f5ef; color: #4e6153; font: 400 12px/1.5 "Instrument Sans",sans-serif; }
.shop-footer nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.shop-footer a { color: #28583d; text-underline-offset: 3px; }

.product-page { background: #f8f7f2; }
.product-page .product-layout { grid-template-columns: minmax(0,1.48fr) minmax(330px,.78fr); gap: clamp(30px,4.5vw,68px); align-items: start; }
.product-page .product-gallery { min-width: 0; }
.product-page .product-visual { position: relative; overflow: hidden; min-height: 620px; margin: 0; border-radius: 21px; background: radial-gradient(circle at 50% 53%,#7a9c78 0,#3b6c4b 48%,#1c4834 100%); }
.product-page .product-visual img { height: min(55vw,570px); max-height: 570px; width: min(72%,480px); mix-blend-mode: normal; filter: drop-shadow(0 30px 23px rgba(7,30,19,.28)); }
.product-gallery__note { margin: 10px 2px 12px; color: #637468; font: 400 11px/1.4 "Instrument Sans",sans-serif; }
.product-page[data-product-page="znwater"] .product-visual { background: linear-gradient(rgba(32,81,48,.68),rgba(27,68,45,.73)),url('../img/casablanca-domates-serasi-v2.webp') center/cover; }
.product-page[data-product-page="znwater"] .product-visual img { width: min(70%,480px); height: min(55vw,570px); max-height: 570px; object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 27px 22px rgba(5,27,13,.36)); }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 0; }
.product-gallery__thumbs figure { position: relative; height: 180px; overflow: hidden; margin: 0; border-radius: 15px; background: #e7eee3; }
.product-gallery__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-page .product-copy { padding-top: clamp(10px,2vw,32px); }
.product-page .product-copy .store-title { font-size: clamp(40px,4.3vw,60px); letter-spacing: -.045em; line-height: 1.03; }
.product-page .product-copy .store-intro { max-width: 55ch; }
.product-page .product-form { max-width: 500px; margin-top: 31px; padding-top: 24px; }
.product-page .product-sizes { gap: 12px; margin-bottom: 20px; }
.product-page .store-pack--select { border-radius: 100px; }
.product-page .product-action { min-height: 56px; border-radius: 100px; font-size: 15px; }
.product-page .product-legal { max-width: 55ch; font-size: 12px; line-height: 1.6; }
.product-page .store-columns { margin-top: clamp(44px,6vw,90px); }
.product-page .store-columns > div { max-width: 58ch; }
.product-page .store-columns h2 { font-size: clamp(25px,2.7vw,34px); }
.product-page .store-columns p { font-size: 15px; }
.product-page .store-columns .store-cta { margin-top: 16px; border-radius: 100px; }
.product-page .product-details { border-top: 1px solid rgba(25,49,38,.14); margin-top: 54px; }
.product-page .product-details details { border-bottom: 1px solid rgba(25,49,38,.14); }
.product-page .product-details summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; cursor: pointer; list-style: none; font: 500 17px/1.3 "Instrument Sans",sans-serif; }
.product-page .product-details summary::-webkit-details-marker { display: none; }
.product-page .product-details summary::after { content: "+"; font-size: 22px; font-weight: 400; }
.product-page .product-details details[open] summary::after { content: "−"; }
.product-page .product-details p { max-width: 67ch; margin: 0 0 24px; color: #506655; font: 400 14px/1.65 "Instrument Sans",sans-serif; }
.product-page .store-columns a:not(.store-cta) { color: #28583d; text-underline-offset: 3px; }
.product-support { margin-top: 70px; }
.product-support__links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.product-support__links a { color: #24543a; font: 600 13px/1.4 "Instrument Sans",sans-serif; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.product-support__links a:hover { color: #113a28; }

.payment-result { width: min(760px,100%); margin: 0 auto; padding: clamp(28px,5vw,54px); background: #fff; border: 1px solid rgba(25,49,38,.14); }
.payment-result__mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border: 1px solid #9cb49d; border-radius: 50%; color: #28583d; font: 500 26px/1 "Instrument Sans",sans-serif; }
.payment-result[data-state="paid"] .payment-result__mark { border-color: #3b8057; background: #e7f2e8; }
.payment-result[data-state="failed"] .payment-result__mark { border-color: #ac7e73; background: #f5e8e4; color: #843e34; }
.payment-result .store-title { font-size: clamp(32px,4vw,50px); text-align: left; margin-bottom: 16px; }
.payment-result__body { color: #4a6052; font: 400 16px/1.65 "Instrument Sans",sans-serif; }
.payment-result__order { display: inline-flex; margin-top: 20px; padding: 9px 12px; background: #eef2eb; color: #244333; font: 600 12px/1.4 "Instrument Sans",sans-serif; font-variant-numeric: tabular-nums; }
.payment-result__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }
.payment-result__actions .store-cta { min-width: 170px; }
.payment-result__actions .store-cta--outline { background: transparent; color: #28583d; border: 1px solid rgba(40,88,61,.35); }
.payment-result__actions .store-cta--outline:hover { background: #eef2eb; transform: none; }
.payment-result__status { margin-top: 18px; color: #526559; font: 400 12px/1.5 "Instrument Sans",sans-serif; }

@media (max-width: 1050px) {
  .store-grid { grid-template-columns: 1fr; }
  .store-grid .store-card--featured,
  .store-grid .store-card--secondary,
  .store-story { grid-column: 1; grid-row: auto; }
  .store-story { min-height: 250px; }
  .store-story img { max-height: none; }
  .store-story p { max-width: 33ch; }
}
@media (max-width: 760px) {
  .store { padding: 52px 16px 72px; }
  .store-list { padding-top: 26px; }
  .store-head { text-align: left; margin-bottom: 28px; }
  .store-head .store-title { font-size: clamp(32px,8vw,42px); }
  .store-head .store-intro { margin-left: 0; font-size: 15px; }
  .store-grid { gap: 16px; }
  .store-grid .store-card--featured,
  .store-grid .store-card--secondary { display: flex; flex-direction: column; min-height: 0; border-radius: 18px; }
  .store-grid .store-card--featured .store-card__visual,
  .store-grid .store-card--secondary .store-card__visual { width: 100%; min-height: 320px; height: 320px; padding: 13px 20px 0; }
  .store-grid .store-card--featured .store-card__visual img,
  .store-grid .store-card--secondary .store-card__visual img { width: min(68%,240px); height: 310px; max-height: none; }
  .store-grid .store-card--featured .store-card__copy,
  .store-grid .store-card--secondary .store-card__copy { padding: 28px 24px 30px; }
  .store-grid .store-card h2 { font-size: clamp(32px,8vw,42px); }
  .store-grid .store-card__copy>p { font-size: 14px; }
  .store-grid .store-packs { margin: 7px 0 22px; }
  .store-card__actions { gap: 9px; }
  .store-card__actions .store-cta { min-width: 0; flex: 1 1 100%!important; }
  .store-story { min-height: 215px; border-radius: 18px; }
  .store-story img { height: 100%; }
  .store-story p { left: 22px; right: 22px; bottom: 22px; font-size: 21px; }
  .store-head--editorial { margin-bottom: 21px; }
  .shop-help { display: block; }
  .shop-help .store-cta { margin-top: 22px; width: 100%; }
  .shop-footer { padding: 28px 16px; }
  .product-page[data-product-page="znwater"] .product-visual,
  .product-page[data-product-page="znwater"] .product-visual img { min-height: 0; }
  .product-page .product-layout { grid-template-columns: 1fr; gap: 28px; }
  .product-page .product-visual { min-height: 410px; border-radius: 16px; }
  .product-page .product-visual img,
  .product-page[data-product-page="znwater"] .product-visual img { height: 380px; width: min(70%,285px); }
  .product-gallery__thumbs figure { height: 105px; }
  .product-page .product-copy .store-title { font-size: clamp(38px,10vw,48px); }
  .product-page .store-columns { margin-top: 45px; }
  .product-page .product-details { margin-top: 34px; }
  .product-support { margin-top: 45px; }
  .payment-result { padding: 28px 22px; }
  .payment-result__actions .store-cta { width: 100%; }
}