/* صفحة منتج مستقلة: تسعير واضح على الهاتف مع صورة توضيحية صغيرة. */
.serum-landing { padding: 1rem 0 2.7rem; }
.serum-breadcrumb { font-size: .74rem; color: var(--taupe); margin-bottom: .9rem; }
.serum-breadcrumb a { color: inherit; }
.serum-card { background: var(--surface, #FFFDFA); border: 1px solid var(--line, #E4DCD0); border-radius: 16px; padding: clamp(1rem, 3vw, 2rem); }
.serum-overview { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(110px, .82fr); gap: 1rem; align-items: start; }
.serum-heading .eyebrow { font-size: .75rem; letter-spacing: .04em; margin-bottom: .55rem; }
.serum-heading h1 { font-size: clamp(1.65rem, 5.6vw, 2.75rem); line-height: 1.27; margin: 0 0 .55rem; }
.serum-intro { color: var(--ink-soft); font-size: .85rem; line-height: 1.7; margin: 0 0 .7rem; }
.serum-available { font-size: .78rem; color: var(--brown); font-weight: 700; margin: 0; }
.serum-photo { margin: 0; min-width: 0; }
.serum-photo picture { display: block; }
.serum-photo img { width: 100%; height: auto; aspect-ratio: 1; display: block; object-fit: cover; border-radius: 10px; }
.serum-photo figcaption { color: var(--taupe); font-size: .68rem; line-height: 1.55; margin-top: .4rem; }
.serum-purchase { min-width: 0; margin-top: 1.1rem; }
/* الأسعار في خيارات الحجم، والتحديث الحي متاح لقارئ الشاشة دون تكرار بصري. */
.serum-purchase .product-hero-unit { margin: .65rem 0 0; padding-bottom: 0; }
.serum-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .85rem; }
.serum-actions .btn { width: 100%; text-align: center; font-size: .85rem; }
/* إجمالي عبوة واحدة قرب الشراء، مع تفاصيل الشروط دون مزاحمة الزر. */
.serum-estimate { min-height: 170px; margin-top: .8rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--ivory); }
.serum-estimate [hidden] { display: none; }
.serum-estimate h2 { margin: 0 0 .35rem; font-size: .84rem; line-height: 1.5; }
.serum-estimate-live { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; color: var(--ink-soft); font-size: .78rem; }
.serum-estimate-live strong { color: var(--ink); font-size: 1rem; white-space: nowrap; }
.serum-estimate-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: .78rem; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.serum-estimate-details summary::after { content: '+'; margin-inline-start: auto; font-size: 1.1rem; }
.serum-estimate-details[open] summary::after { content: '−'; }
.serum-estimate-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.serum-estimate-fields label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: .76rem; }
.serum-estimate-fields select { width: 100%; min-height: 44px; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; }
.serum-estimate-breakdown { display: grid; gap: .2rem; margin: .8rem 0 0; color: var(--ink-soft); font-size: .78rem; }
.serum-estimate-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; }
.serum-estimate-breakdown dd { margin: 0; font-weight: 700; }
.serum-estimate-note, .serum-estimate-fallback { margin: .3rem 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.65; }
@media (max-width: 420px) { .serum-estimate-fields { grid-template-columns: 1fr; } }
@media (min-width: 600px) { .serum-estimate { min-height: 151px; } }
.serum-order-note { font-size: .76rem; color: var(--ink-soft); line-height: 1.65; margin: .75rem 0 0; }
.serum-trust { list-style: none; border-top: 1px solid var(--line-soft); padding: .75rem 0 0; margin: .75rem 0 0; display: grid; gap: .2rem; color: var(--ink-soft); font-size: .75rem; }
.serum-trust li::before { content: '·'; color: var(--brown); font-weight: 700; padding-inline-end: .45rem; }
.serum-credentials { font-size: .75rem; color: var(--ink-soft); margin: .45rem 0 0; }
.serum-size-guide { border-bottom: 1px solid var(--line-soft); margin-top: .5rem; }
.serum-size-guide summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-size: .8rem; font-weight: 700; }
.serum-size-guide summary::after { content: '+'; margin-inline-start: auto; font-size: 1.15rem; color: var(--brown); }
.serum-size-guide[open] summary::after { content: '−'; }
.serum-size-guide ul { margin: 0 0 .5rem; padding-inline-start: 1.1rem; color: var(--ink-soft); font-size: .8rem; }
.serum-size-guide p { color: var(--ink-soft); font-size: .76rem; margin: 0 0 .9rem; }
.serum-benefits { background: var(--cream); }
.serum-benefits .section-head { max-width: 68ch; }
.serum-benefit-list { list-style: none; padding: 0; margin: 1.5rem 0 1rem; display: grid; gap: .75rem; }
.serum-benefit-list li { background: var(--surface, #FFFDFA); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.serum-benefit-list h3 { font-size: 1rem; margin: 0 0 .25rem; }
.serum-benefit-list p { color: var(--ink-soft); font-size: .88rem; margin: 0; }
.serum-benefits-note { color: var(--ink-soft); font-size: .8rem; margin: 0 0 1rem; }
.serum-benefits-cta { margin-top: .1rem; }
.serum-ritual-grid { display: grid; gap: 1.5rem; align-items: center; }
.serum-ritual-figure { margin: 0; }
.serum-ritual-figure picture { display: block; }
.serum-ritual-figure img { display: block; width: 100%; aspect-ratio: 1264 / 848; object-fit: cover; border-radius: 14px; }
.serum-ritual-figure figcaption { color: var(--taupe); font-size: .7rem; margin-top: .4rem; }
.serum-ritual-copy { max-width: 58ch; }
.serum-ritual-copy h2 { max-width: 22ch; }
.serum-ritual-copy > p:not(.eyebrow) { color: var(--ink-soft); }
.serum-ritual-steps { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; display: grid; gap: .75rem; }
.serum-ritual-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .65rem; align-items: start; }
.serum-ritual-steps li > span { color: var(--brown); font-size: .76rem; padding-top: .2rem; }
.serum-ritual-steps strong { font-size: .9rem; }
.serum-ritual-steps p { color: var(--ink-soft); font-size: .82rem; margin: .1rem 0 0; }
.serum-steps { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; counter-reset: steps; }
.serum-steps li { counter-increment: steps; background: var(--surface, #FFFDFA); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.serum-steps li::before { content: '0' counter(steps); color: var(--brown); display: block; font-size: .72rem; margin-bottom: .4rem; }
.serum-steps strong, .serum-steps span { display: block; }
.serum-steps span { margin-top: .3rem; color: var(--ink-soft); font-size: .85rem; }
.serum-delivery { background: var(--cream); }
.serum-delivery-inner { display: grid; gap: .4rem; }
.serum-delivery-inner p { margin: 0 0 .9rem; }
@media (max-width: 360px) {
  .serum-overview { grid-template-columns: minmax(0, 1.12fr) minmax(98px, .88fr); gap: .65rem; }
  .serum-heading h1 { font-size: 1.4rem; }
  .serum-actions .btn { font-size: .78rem; padding-inline: .55rem; }
}
@media (min-width: 700px) {
  .serum-benefit-list { grid-template-columns: repeat(3, 1fr); }
  .serum-steps { grid-template-columns: repeat(3, 1fr); }
  .serum-delivery-inner { grid-template-columns: 1fr 1.3fr; gap: 2rem; }
  .serum-ritual-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
}
@media (min-width: 900px) {
  .serum-landing { padding: 1.5rem 0 4rem; }
  .serum-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .serum-overview { display: contents; }
  .serum-heading { grid-column: 1; grid-row: 1; }
  .serum-photo { grid-column: 2; grid-row: 1 / span 2; }
  .serum-purchase { grid-column: 1; grid-row: 2; margin-top: .8rem; }
  .serum-heading h1 { font-size: clamp(2.3rem, 4vw, 3.5rem); }
  .serum-intro { font-size: 1rem; max-width: 42ch; }
}