/* =========================================================
   ELWAN STORE — Product page
   (header, overlays and footer come from style.css)
   ========================================================= */
.page-product { background: #f6f1eb; font-variant-numeric: lining-nums; }
.page-product [hidden] { display: none !important; }
.page-product .header { background: rgba(246, 241, 235, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(90, 15, 23, .06); }

.pdp { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) 30px; }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 0 16px; font-size: 11.5px; color: #3d3431; }
.crumbs a { text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--burgundy); }
.crumbs svg { width: 11px; height: 11px; opacity: .6; }
.crumbs span:last-child { color: #1d1615; font-weight: 500; }

/* ---------- top: gallery + info ---------- */
.pdp-top { display: grid; gap: 22px; }

.gallery { display: grid; gap: 10px; min-width: 0; }
.gallery__main {
  position: relative;
  order: -1;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #2a0609;
  box-shadow: 0 20px 40px -28px rgba(60, 20, 15, .6);
}
.gallery__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.slide__bg { position: absolute; inset: 0; background: url("https://res.cloudinary.com/pocljzwl/image/upload/f_auto,q_auto/elwan/assets/images/ui/search-bg.webp") 30% 70% / cover no-repeat; filter: blur(2px) brightness(.85); transform: scale(1.05); }
.slide__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(240, 228, 214, 0) 0%, rgba(214, 196, 178, .55) 40%, rgba(196, 176, 158, .7) 100%); }
.slide img { position: relative; width: 66%; height: 78%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); transition: transform .8s var(--ease); }
.slide--zoom img { width: 120%; height: 120%; transform: translateY(6%); }
.slide--side img { transform: rotate(-14deg) scale(.95); }
.slide--wrist .slide__bg { background-position: 80% 30%; }
.gallery__main:hover .slide img { transform: scale(1.03); }
.gallery__main:hover .slide--side img { transform: rotate(-14deg) scale(.98); }
.gallery__zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1b1414; color: #fff; transition: transform .3s var(--ease); }
.gallery__zoom svg { width: 16px; height: 16px; }
.gallery__zoom:hover { transform: scale(1.08); }
.gallery__dots { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); display: flex; gap: 6px; }
.gallery__dots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: width .3s, background-color .3s; }
.gallery__dots button.is-active { width: 20px; border-radius: 4px; background: #fff; }

.gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.thumb { position: relative; flex: 0 0 68px; height: 68px; border-radius: 4px; overflow: hidden; border: 1px solid transparent; background: #2a0609; display: grid; place-items: center; opacity: .75; transition: opacity .25s, border-color .25s, box-shadow .25s; }
.thumb .slide__bg { filter: blur(1px) brightness(.85); }
.thumb img { position: relative; width: 70%; height: 80%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.thumb--zoom img { width: 120%; height: 120%; }
.thumb--side img { transform: rotate(-14deg); }
.thumb.is-active { opacity: 1; border-color: #c9a26e; box-shadow: 0 0 0 1px #c9a26e; }
.gallery__more { display: none; }

/* info */
.pinfo { min-width: 0; }
.pinfo__top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #efe1cf; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #3d2b1c; }
.pinfo__acts { display: flex; gap: 8px; margin-left: auto; }
.pinfo__act { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #1d1615; transition: background-color .25s, color .25s; }
.pinfo__act svg { width: 21px; height: 21px; }
.pinfo__act:hover { background: rgba(90, 15, 23, .07); }
.pinfo__act.is-on { color: var(--burgundy); }
.pinfo__act.is-on svg { fill: var(--burgundy); animation: favPop .45s var(--ease); }
.pinfo__brand { margin-top: 10px; font-size: 14px; letter-spacing: .5em; text-transform: uppercase; color: #1d1615; }
.pinfo__title { margin-top: 8px; font-family: "Cormorant Garamond", "Playfair Display", var(--font-serif); font-weight: 400; font-size: clamp(26px, 6.6vw, 36px); line-height: 1.15; letter-spacing: -.01em; color: #1d1615; }
.pinfo__meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; color: #4d4340; }
.pinfo__meta i { width: 1px; height: 12px; background: #b9aea7; }
.pinfo__meta .tag { padding: 3px 10px; border: 1px solid #d9cabb; border-radius: 999px; font-size: 11px; letter-spacing: .06em; }
.pinfo__price { margin-top: 16px; font-family: "Cormorant Garamond", "Playfair Display", var(--font-serif); font-size: clamp(25px, 6vw, 30px); letter-spacing: .01em; color: #1d1615; }
.pinfo__desc { margin-top: 12px; font-size: 13.5px; line-height: 1.75; letter-spacing: .02em; color: #4d4340; max-width: 520px; }
.pinfo__opt { margin-top: 20px; }
.pinfo__label { font-size: 13px; font-weight: 500; color: #1d1615; }
.swatches { display: flex; gap: 14px; margin-top: 12px; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .12); transition: transform .25s var(--ease), box-shadow .25s; }
.swatches button:hover { transform: scale(1.08); }
.swatches button.is-on { box-shadow: 0 0 0 3px #f6f1eb, 0 0 0 4.5px #b88a52; }
.pinfo__small { margin-top: 10px; font-size: 11.5px; color: #6d625c; }

.buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 22px; }
.pqty { display: flex; align-items: center; height: 50px; border: 1px solid #d9cabb; border-radius: 4px; background: rgba(255, 255, 255, .6); }
.pqty button { width: 40px; height: 100%; font-size: 18px; color: #3d3431; transition: background-color .2s; }
.pqty button:hover { background: rgba(90, 15, 23, .05); }
.pqty span { min-width: 30px; text-align: center; font-size: 14px; font-weight: 500; }
.btn-cart, .btn-buy { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 4px; font-size: 14px; font-weight: 500; letter-spacing: .03em; transition: background-color .3s var(--ease), color .3s var(--ease), transform .2s; }
.btn-cart { background: #3d070e; color: #fff; }
.btn-cart:hover { background: #5a0f17; }
.btn-cart:active, .btn-buy:active { transform: scale(.985); }
.btn-cart svg { width: 18px; height: 18px; }
.btn-cart.is-added { animation: cartPop .5s var(--ease); }
.btn-buy { grid-column: 1 / -1; border: 1px solid #3d070e; color: #1d1615; background: transparent; }
.btn-buy svg { width: 16px; height: 16px; }
.btn-buy:hover { background: #3d070e; color: #fff; }
.added { min-height: 18px; margin-top: 10px; font-size: 12.5px; color: #2f6b3d; }
.added a { color: inherit; font-weight: 500; }

/* perks */
.pperks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 30px; padding: 20px 0; border-top: 1px solid #e5dacf; border-bottom: 1px solid #e5dacf; }
.pperks li { display: flex; align-items: center; gap: 12px; }
.pperks__ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #f0e3d3; color: #3d070e; }
.pperks__ic svg { width: 26px; height: 24px; }
.pperks b { display: block; font-size: 12.5px; font-weight: 500; color: #1d1615; }
.pperks small { display: block; margin-top: 3px; font-size: 11.5px; color: #6d625c; }

/* tabs */
.ptabs { margin-top: 10px; }
.ptabs__bar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e5dacf; }
.ptabs__bar::-webkit-scrollbar { display: none; }
.ptabs__bar button { position: relative; flex: none; padding: 16px 14px 14px; font-size: 13.5px; color: #4d4340; transition: color .25s; }
.ptabs__bar button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: #5a0f17; transform: scaleX(0); transition: transform .35s var(--ease); }
.ptabs__bar button.is-active { color: #5a0f17; font-weight: 500; }
.ptabs__bar button.is-active::after { transform: scaleX(1); }
.ptab { padding: 24px 0 10px; animation: tabIn .45s var(--ease) both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } }

.story { display: grid; gap: 22px; }
.story__kicker { font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: #5a0f17; }
.story__title { margin-top: 10px; font-family: "Cormorant Garamond", "Playfair Display", var(--font-serif); font-weight: 400; font-size: clamp(32px, 8.5vw, 46px); line-height: 1.1; color: #3d070e; }
.story__p { margin-top: 16px; font-size: 14px; line-height: 1.75; color: #3d3431; max-width: 480px; }
.story__rule { display: block; width: 44px; height: 1px; margin: 22px 0; background: #5a0f17; }
.story__feats { display: grid; gap: 16px; }
.story__feats li { display: flex; gap: 12px; }
.story__feats svg { flex: none; width: 32px; height: 30px; color: #3d070e; }
.story__feats b { display: block; font-size: 13px; font-weight: 500; color: #1d1615; }
.story__feats small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: #6d625c; }
.story__media { position: relative; min-height: 280px; border-radius: 6px; overflow: hidden; background: radial-gradient(70% 70% at 60% 40%, #4a2a20 0%, #1c0f0c 70%); isolation: isolate; }
.story__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("https://res.cloudinary.com/pocljzwl/image/upload/f_auto,q_auto/elwan/assets/images/ui/search-bg.webp") 85% 40% / 240% auto no-repeat; filter: blur(3px) brightness(.55); }
.story__media img { position: absolute; left: 50%; top: 52%; width: 120%; height: 150%; max-width: none; object-fit: contain; transform: translate(-40%, -45%) rotate(-12deg); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .6)); transition: transform 1.2s var(--ease); }
.story__media:hover img { transform: translate(-40%, -45%) rotate(-10deg) scale(1.04); }

.specs { display: grid; border: 1px solid #e5dacf; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .5); max-width: 720px; }
.specs div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 14px 18px; font-size: 13.5px; }
.specs div + div { border-top: 1px solid #ece2d8; }
.specs dt { color: #6d625c; }
.specs dd { color: #1d1615; font-weight: 500; }
.shipinfo { display: grid; gap: 22px; max-width: 760px; }
.shipinfo h3 { font-family: "Cormorant Garamond", "Playfair Display", serif; font-weight: 500; font-size: 18px; color: #3d070e; }
.shipinfo p { margin-top: 8px; font-size: 14px; line-height: 1.75; color: #3d3431; }
.noreviews { padding: 30px 0; text-align: center; }
.noreviews p { font-family: "Cormorant Garamond", "Playfair Display", serif; font-size: 20px; color: #3d070e; }
.noreviews small { display: block; margin-top: 8px; font-size: 13px; color: #6d625c; }

/* you may also like */
.also { margin-top: 26px; padding-top: 26px; border-top: 1px solid #e5dacf; }
.also__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.also__head h2 { font-family: "Cormorant Garamond", "Playfair Display", var(--font-serif); font-weight: 400; font-size: clamp(24px, 6vw, 32px); color: #1d1615; }
.also__all { display: flex; align-items: center; gap: 8px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.also__all svg { width: 15px; height: 15px; }
.also .srow__track { grid-auto-columns: calc((100% - 10px) / 2.2); gap: 10px; }
.also .scard { padding: 0; overflow: hidden; border: 1px solid #ece2d8; }
.also .scard__img { position: relative; height: auto; aspect-ratio: 1 / .92; margin: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.also .scard__img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("https://res.cloudinary.com/pocljzwl/image/upload/f_auto,q_auto/elwan/assets/images/ui/search-bg.webp") 30% 70% / 300% auto no-repeat; filter: brightness(.8); }
.also .scard__img img { width: 72%; height: 86%; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .5)); }
.also .scard__fav { color: #fff; }
.also .scard__info { padding: 10px 50px 12px 10px; margin: 0; }
.also .scard__brand { font-size: 11px; }
.also .scard__model { font-size: 10.5px; }
.also .scard__price { font-size: 11.5px; margin-top: 6px; }
.also .scard__cart { width: 34px; height: 34px; border-radius: 4px; right: 10px; bottom: 14px; background: #4a0a12; }
.also .scard__cart svg { width: 16px; height: 16px; }

/* banner */
.pbanner { position: relative; overflow: hidden; isolation: isolate; color: #f4ebe2; }
.pbanner__bg { position: absolute; inset: 0; z-index: -1; background: url("https://res.cloudinary.com/pocljzwl/image/upload/f_auto,q_auto/elwan/assets/images/section-3/original-bg.webp") 20% 60% / cover no-repeat; }
.pbanner__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 4, 8, .92) 0%, rgba(30, 4, 8, .7) 55%, rgba(30, 4, 8, .25) 100%); }
.pbanner__inner { max-width: 1240px; margin: 0 auto; padding: 44px var(--gutter); }
.pbanner__kicker { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; opacity: .9; }
.pbanner__title { margin-top: 10px; font-family: "Cormorant Garamond", "Playfair Display", var(--font-serif); font-weight: 400; font-size: clamp(28px, 7vw, 46px); line-height: 1.1; }
.pbanner__sub { margin-top: 10px; font-size: 14px; letter-spacing: .03em; opacity: .9; }

/* zoom viewer */
.zoom { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: rgba(20, 6, 8, .92); animation: tabIn .3s var(--ease) both; cursor: zoom-out; }
.zoom img { width: min(92vw, 900px); height: 86vh; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.zoom__x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.zoom__x svg { width: 28px; height: 28px; }

/* ---------- laptop ---------- */
@media (min-width: 768px) {
  .pperks { grid-template-columns: repeat(4, 1fr); }
  .pperks li + li { border-left: 1px solid #e5dacf; padding-left: 16px; }
  .also .srow__track { grid-auto-columns: calc((100% - 3 * 14px) / 3.3); gap: 14px; }
  .story__media { min-height: 360px; }
}
@media (min-width: 1024px) {
  .pdp { padding: 0 32px 40px; }
  .crumbs { padding: 18px 0 20px; font-size: 12px; }
  .pdp-top { grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr); gap: 30px; align-items: start; }
  .gallery { grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 16px; }
  .gallery__main { order: 0; grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 1 / 1; }
  .gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; overflow: hidden; max-height: calc(100% - 4px); }
  .thumb { flex: 0 0 72px; height: 72px; width: 86px; cursor: pointer; }
  .thumb:hover { opacity: 1; }
  .gallery__more { display: grid; grid-column: 1; grid-row: 2; place-items: center; height: 54px; border-radius: 4px; background: #fbf8f4; color: #1d1615; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .3); }
  .gallery__more svg { width: 18px; height: 18px; }
  .gallery__dots { display: none; }
  .pinfo { padding-top: 4px; }
  .buy { grid-template-columns: auto 1fr; }
  .pperks { margin-top: 30px; padding: 26px 0; }
  .pperks li { justify-content: center; }
  .ptabs__bar button { padding: 18px 24px 16px; font-size: 14px; }
  .ptab { padding-top: 30px; }
  .story { grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
  .story__feats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .story__feats li + li { border-left: 1px solid #e5dacf; padding-left: 14px; }
  .story__media { min-height: 340px; }
  .also__head { margin-bottom: 20px; }
  .also .srow { padding: 0 52px; }
  .also .srow__track { grid-auto-columns: calc((100% - 4 * 14px) / 5); }
  .also .scard__brand { font-size: 12px; }
  .also .scard__model { font-size: 11.5px; }
  .also .scard__price { font-size: 13px; }
  .also .scard__cart { width: 38px; height: 38px; }
  .pbanner__inner { padding: 56px 32px; }
}

/* ---------- white product backgrounds ---------- */
.gallery__main, .thumb, .story__media { background: #fff; border: 1px solid #ece2d8; }
.slide__bg, .story__media::before, .also .scard__img::before { display: none; }
.slide img, .thumb img, .story__media img, .also .scard__img img { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .14)); }
.thumb img { filter: none; }
.gallery__main { box-shadow: 0 20px 40px -32px rgba(60, 20, 15, .35); }
.gallery__dots button { background: rgba(0, 0, 0, .18); }
.gallery__dots button.is-active { background: #3d070e; }
.also .scard__img { background: #fff; }
.also .scard__fav { color: #1d1615; }

/* no layout jumps while the product fills in */
.pdp { min-height: 100vh; }