/* Allure (Aurelle) - PRODUCT page styles (owner: al-product.js). Every class is prefixed `al-pp-`.
   Measurements follow the Prestige "Allure" reference (SPEC section 6 / 10): container 1260, columns 767 | 413, gap 5rem,
   56px thumbnail strip + 631px stacked gallery, sticky info (header + 20px), 44px buttons, sticky bar 97px.
   Logical properties only (RTL mirrors automatically). */

.al-pp-page { padding-block: 1.25rem 0; }
.al-pp { max-width: calc(1260px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

/* breadcrumb */
.al-pp-crumbs { margin-bottom: 1rem; color: var(--muted); }
.al-pp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.al-pp-crumbs li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.al-pp-crumbs li + li::before { content: '/'; opacity: .5; }
.al-pp-crumbs a { transition: color .2s ease-in-out; } .al-pp-crumbs a:hover { color: var(--fg); }
.al-pp-crumbs [aria-current] { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; display: inline-block; }

/* grid: gallery | info (+ content below the gallery); mobile: single column */
.al-pp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; grid-template-areas: "gal" "info" "below"; align-items: start; }
.al-pp-below:not(:has(*)) { display: none; }
@media (min-width: 1000px) {
  .al-pp-page { padding-top: 1.5rem; }
  .al-pp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 413px); column-gap: 5rem; row-gap: 0; grid-template-areas: "gal info" "below info"; }
  .al-pp-info { position: sticky; top: var(--pp-top, calc(var(--al-header-h) + 20px)); align-self: start; }
}

/* ------------------------------------------------------------ gallery */
.al-pp-gal { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.al-pp-stage { position: relative; min-width: 0; }
.al-pp-thumbs { display: none; }
.al-pp-track { position: relative; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); overscroll-behavior-x: contain; outline-offset: -2px; }
.al-pp-track::-webkit-scrollbar { display: none; }
.al-pp-slide { flex: 0 0 100%; margin: 0; aspect-ratio: 1; scroll-snap-align: center; background: var(--al-bg2); overflow: hidden; }
.al-pp-open { display: block; width: 100%; height: 100%; cursor: zoom-in; padding: 0; }
.al-pp-open img { width: 100%; height: 100%; object-fit: var(--al-card-fit); user-select: none; transition: transform .6s var(--al-ease); }
@media (hover: hover) { .al-pp-open:hover img { transform: scale(1.03); } }
.al-pp-zoom { position: absolute; top: 1.25rem; inset-inline-end: 1.25rem; z-index: 2; width: 36px; height: 36px; display: none; }
.al-pp-count { position: absolute; top: .75rem; inset-inline-start: .75rem; z-index: 2; padding: .0625rem .5rem; background: var(--al-bg2); color: var(--fg); }
.al-pp-arrow { position: absolute; top: 50%; margin-top: -22px; z-index: 2; display: none; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.al-pp-prev { inset-inline-start: 1rem; } .al-pp-next { inset-inline-end: 1rem; }
.al-pp-stage:hover .al-pp-arrow, .al-pp-arrow:focus-visible { opacity: 1; transform: none; }
.al-pp-dots { display: flex; justify-content: center; gap: .5rem; padding-top: .875rem; }
.al-pp-dots button { width: .5rem; height: .5rem; padding: 0; border-radius: 50%; background: currentColor; opacity: .35; transition: opacity .2s, transform .2s; position: relative; }
.al-pp-dots button::after { content: ''; position: absolute; inset: -.5rem -.25rem; }
.al-pp-dots button.is-on { opacity: 1; transform: scale(1.1); }

@media (min-width: 700px) { .al-pp-zoom { display: inline-grid; } }
@media (min-width: 1000px) {
  .al-pp-gal[data-multi]:not([data-pp-layout="carousel"]) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 80px; }
  .al-pp-gal[data-multi]:not([data-pp-layout="carousel"]) .al-pp-thumbs {
    display: grid; align-content: start; gap: 1rem; position: sticky; top: calc(var(--al-header-h) + 20px); align-self: start; height: max-content; }
  .al-pp-thumb { width: 56px; height: 56px; padding: 1px; border: 1px solid transparent; transition: border-color .1s; background: var(--al-bg2); }
  .al-pp-thumb.is-on { border-color: currentColor; }
  .al-pp-thumb img { width: 100%; height: 100%; object-fit: var(--al-card-fit); }
  .al-pp-track { margin-inline: 0; }
  /* grid: long stacked column of 24px-spaced squares, thumbnails scroll to them */
  .al-pp-gal[data-pp-layout="grid"] .al-pp-track { display: grid; gap: 1.5rem; overflow: visible; scroll-snap-type: none; }
  .al-pp-gal[data-pp-layout="grid"] .al-pp-slide { scroll-margin-top: calc(var(--al-header-h) + 20px); }
  .al-pp-gal[data-pp-layout="grid"] .al-pp-dots, .al-pp-gal[data-pp-layout="grid"] .al-pp-count,
  .al-pp-gal[data-pp-layout="thumbs"] .al-pp-dots, .al-pp-gal[data-pp-layout="thumbs"] .al-pp-count { display: none; }
  /* thumbs: one large picture, cross-fading */
  .al-pp-gal[data-pp-layout="thumbs"] .al-pp-track { display: grid; overflow: hidden; scroll-snap-type: none; }
  .al-pp-gal[data-pp-layout="thumbs"] .al-pp-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s var(--al-ease), visibility 0s .3s; }
  .al-pp-gal[data-pp-layout="thumbs"] .al-pp-slide.is-on { opacity: 1; visibility: visible; transition: opacity .3s var(--al-ease); }
  /* carousel: slider with arrows */
  .al-pp-gal[data-pp-layout="carousel"] .al-pp-arrow { display: inline-grid; }
}
@media (max-width: 699px) { .al-pp-count { display: none; } }

/* ------------------------------------------------------------ info column */
.al-pp-info-in { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.al-pp-title { overflow-wrap: anywhere; margin-top: .25rem; }
.al-pp-pricerow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: -.5rem; }
.al-pp-price { display: flex; align-items: center; flex-wrap: wrap; column-gap: 1rem; row-gap: .25rem; }
.al-pp-now { color: rgba(28, 28, 28, .65); line-height: 1.6; }
.al-pp-now.is-sale { color: var(--al-sale); }
.al-pp-was { color: var(--muted); font: 400 .875rem/1.6 var(--al-font-b); }
.al-pp-unit { color: var(--muted); font-size: .8125rem; }
.al-pp-sale-badge { padding: .0625rem .3125rem; font: 400 .6875rem/1.7 var(--al-font-h); letter-spacing: var(--al-ls-h); text-transform: var(--al-h-upper); background: var(--al-sale); color: #fff; }
.al-pp-rating, .al-pp-rating-slot a { display: inline-flex; align-items: center; gap: .125rem; }
.al-pp-rating span:not(.al-smallcaps) { opacity: .25; display: inline-grid; } .al-pp-rating span.on { opacity: 1; }
.al-pp-rating .al-smallcaps { margin-inline-start: .4rem; color: var(--muted); font-size: .6875rem; opacity: 1; }
.al-pp-rating .al-star { width: 14px; height: 14px; }
.al-pp-status { display: flex; align-items: center; gap: .5rem; margin-top: -.5rem; font-size: .8125rem; color: var(--muted); }
.al-pp-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #307A07; flex: none; } .al-pp-dot.no { background: #CB2B2B; }
.al-pp-hr { border: 0; border-top: 1px solid var(--bd); margin: .5rem 0; width: 100%; }

/* variant pickers */
.al-pp-opts { display: grid; gap: 1.5rem; }
.al-pp-opt { display: grid; gap: .75rem; transition: outline-color .2s; outline: 1px solid transparent; outline-offset: 6px; }
.al-pp-opt-l { color: var(--muted); } .al-pp-opt-l b { color: var(--fg); font-weight: 400; }
.al-pp-swatches, .al-pp-pills { display: flex; flex-wrap: wrap; gap: .625rem; }
.al-pp-swatch { position: relative; width: 2.125rem; height: 2.125rem; padding: 2px; border: 1px solid transparent; transition: border-color .1s; cursor: pointer; }
.al-pp-swatch > span { display: block; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.al-pp-swatch:hover { border-color: var(--bd); } .al-pp-swatch.is-on { border-color: currentColor; }
.al-pp-pill > span { display: inline-block; padding: .4rem 1rem; border: 1px solid var(--bd); font-size: .8125rem; line-height: 1.65; transition: border-color .15s, background-color .15s, color .15s; }
.al-pp-pill:hover > span { border-color: var(--fg); }
.al-pp-pill.is-on > span { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.al-pp-opt.is-need { animation: al-pp-nudge .45s ease-in-out; outline-color: var(--al-sale); }
@keyframes al-pp-nudge { 20%, 60% { transform: translateX(calc(-5px * var(--al-dx, 1))); } 40%, 80% { transform: translateX(calc(5px * var(--al-dx, 1))); } }

.al-pp-prose { font-size: .875rem; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }

/* buy buttons */
.al-pp-buy { display: grid; gap: 1rem; margin-top: .5rem; }
.al-pp-qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.al-pp-qty-l { color: var(--muted); }
.al-pp-qty { display: inline-grid; grid-template-columns: 2.75rem minmax(2.5rem, auto) 2.75rem; align-items: center; border: 1px solid var(--bd); text-align: center; transition: border-color .1s; }
.al-pp-qty:focus-within { border-color: currentColor; }
.al-pp-qty button { height: 2.75rem; display: grid; place-items: center; }
.al-pp-qty button .al-ic { width: 12px; height: 12px; transition: opacity .2s; } .al-pp-qty button:hover .al-ic { opacity: .65; }
.al-pp-qty output { font-size: .875rem; min-width: 2.5rem; font-variant-numeric: tabular-nums; }

/* feature badges, meta */
.al-pp-feats { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.al-pp-feat { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .5rem; border: 1px solid var(--bd); font-size: .75rem; line-height: 1.4; color: rgb(107, 107, 107); }
a.al-pp-feat { transition: color .2s, border-color .2s; } a.al-pp-feat:hover { color: var(--fg); border-color: var(--fg); }
.al-pp-feat-ic { display: inline-grid; } .al-pp-feat-ic svg { width: 16px; height: 16px; }
.al-pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: .5rem; }
.al-pp-meta-btn { display: inline-flex; align-items: center; gap: .5rem; }
.al-pp-fav .al-ic { width: 18px; height: 18px; transition: transform .2s; } .al-pp-fav:hover .al-ic { transform: scale(1.12); }
.al-pp-fav.on .al-ic { fill: currentColor; }
.al-pp-more { display: inline-flex; align-items: center; gap: .5rem; margin-inline-start: auto; }

/* ------------------------------------------------------------ content below the gallery */
.al-pp-below { min-width: 0; margin-top: 3.5rem; }
.al-pp-accs { border-top: 1px solid var(--bd); }
.al-pp-acc { border-bottom: 1px solid var(--bd); }
.al-pp-acc-h { margin: 0; font: inherit; }
.al-pp-acc-t { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; padding-block: 1.5rem; text-align: start; cursor: pointer; }
@media (min-width: 1000px) { .al-pp-acc-t { padding-block: 2rem; } }
.al-pp-plus { position: relative; width: 10px; height: 10px; flex: none; }
.al-pp-plus::before, .al-pp-plus::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline: 0; height: 1px; background: currentColor; transition: transform .25s ease-in-out, opacity .25s ease-in-out; }
.al-pp-plus::after { transform: rotate(90deg); }
.al-pp-acc-t[aria-expanded="true"] .al-pp-plus::before { opacity: 0; } .al-pp-acc-t[aria-expanded="true"] .al-pp-plus::after { transform: rotate(180deg); }
.al-pp-acc-b { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .25s ease-in-out, visibility 0s .25s; }
.al-pp-acc.is-open .al-pp-acc-b { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .25s ease-in-out; }
.al-pp-acc-in { overflow: hidden; min-height: 0; }
.al-pp-acc-in > .al-pp-prose { padding-bottom: 2rem; }

/* "Combine with" horizontal cards */
.al-pp-combo:empty { display: none; }
.al-pp-combo { margin-top: 3rem; display: grid; gap: 1.5rem; }
.al-pp-combo-h { text-align: center; }
.al-pp-combo-list { display: grid; gap: 1.5rem; }
.al-pp-hcard { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; }
.al-pp-hcard-img { display: block; aspect-ratio: 1; background: var(--al-bg2); overflow: hidden; }
.al-pp-hcard-img img { width: 100%; height: 100%; object-fit: var(--al-card-fit); }
.al-pp-hcard-b { display: grid; gap: .25rem; min-width: 0; }
.al-pp-sub { color: var(--muted); }
.al-pp-hcard-btn { min-width: 10.6875rem; color: var(--muted); border-color: var(--bd); padding-inline: 1rem; }
@media (max-width: 699px) {
  .al-pp-hcard { grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .75rem; }
  .al-pp-hcard-btn { grid-column: 1 / -1; min-width: 0; width: 100%; }
}

/* reviews, related */
.al-pp-reviews:empty { display: none; }
.al-pp-reviews { padding-block: 4rem 0; }
.al-pp-rev-in { display: grid; gap: 1rem; max-width: 52rem; }
.al-pp-review { padding-block: 1rem; border-bottom: 1px solid var(--bd); display: grid; gap: .4rem; }
.al-pp-starpick { display: flex; gap: .25rem; } .al-pp-starpick button { opacity: .3; } .al-pp-starpick button.on { opacity: 1; } .al-pp-starpick .al-star { width: 22px; height: 22px; }
.al-pp-revform { display: grid; gap: 1rem; margin-top: 1rem; max-width: 32rem; justify-items: start; }
.al-pp-revform .al-field { width: 100%; }
.al-pp-related { padding-block: 3rem 4rem; }
.al-pp-related:empty { display: none; }
@media (min-width: 1000px) { .al-pp-related { padding-block: 5rem 5rem; } }
.al-pp-rel-head { text-align: center; margin-bottom: 2.5rem; } @media (min-width: 1000px) { .al-pp-rel-head { margin-bottom: 3rem; } }
.al-pp-rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.1875rem .625rem; }
@media (min-width: 700px) { .al-pp-rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; } }
@media (min-width: 1000px) { .al-pp-rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3rem; } }

/* ------------------------------------------------------------ sticky add-to-cart bar */
.al-pp-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 35; background: var(--al-bg1); color: var(--al-text); border-top: 1px solid var(--bd); padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity .2s, transform .25s ease, visibility 0s .25s; }
.al-pp-bar.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s ease; }
.al-pp-bar-in { display: grid; grid-template-columns: 1fr; max-width: calc(1260px + 2 * var(--gutter)); margin-inline: auto; }
.al-pp-bar-in img, .al-pp-bar-t { display: none; }
.al-pp-bar .al-btn { width: 100%; }
body.has-bottombar .al-pp-bar { bottom: 56px; }
@media (min-width: 700px) {
  .al-pp-bar { top: var(--al-header-h); bottom: auto; border-top: 0; border-bottom: 1px solid var(--bd); padding-block: 1.125rem; transform: translateY(-100%); }
  .al-pp-bar-in { grid-template-columns: 60px minmax(0, 1fr) max-content; gap: 1rem; align-items: center; }
  .al-pp-bar-in img, .al-pp-bar-t { display: block; } .al-pp-bar-in img { width: 60px; height: 60px; object-fit: cover; background: var(--al-bg2); }
  .al-pp-bar-t { min-width: 0; } .al-pp-bar-t p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .al-pp-bar-p { color: var(--muted); }
  .al-pp-bar .al-btn { width: auto; min-width: 12rem; }
  body.has-bottombar .al-pp-bar { bottom: auto; }
}

/* ------------------------------------------------------------ entrance animation */
.al-pp-rise { animation: al-pp-rise .5s var(--al-ease) both; animation-delay: var(--pp-d, 0s); }
@keyframes al-pp-rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .al-pp-rise, .al-pp-opt.is-need { animation: none; }
  .al-pp-open img, .al-pp-acc-b, .al-pp-plus::before, .al-pp-plus::after, .al-pp-bar, .al-pp-arrow, .al-pp-slide { transition: none !important; }
  .al-pp-open:hover img { transform: none; }
}