@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&family=Bodoni+Moda:opsz,wght@6..96,500;6..96,600;6..96,700&family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

html {
  scroll-behavior: smooth;
}

.premium-home {
  --pi-ink: #160706;
  --pi-ink-soft: #2a1510;
  --pi-paper: #efe6d3;
  --pi-paper-deep: #e7ded3;
  --pi-pomegranate: #8c161c;
  --pi-red-deep: #4a080a;
  --pi-olive: #6b7355;
  --pi-gold: #c8a155;
  --pi-line: rgba(248, 245, 241, 0.18);
  --pi-dark-line: rgba(22, 7, 6, 0.14);
  background: var(--pi-ink);
  color: var(--pi-paper);
  font-family: "Jost", system-ui, sans-serif;
  line-height: 1.55;
}

.premium-page {
  --pi-ink: #160706;
  --pi-ink-soft: #2a1510;
  --pi-paper: #efe6d3;
  --pi-paper-deep: #e7ded3;
  --pi-pomegranate: #8c161c;
  --pi-red-deep: #4a080a;
  --pi-olive: #6b7355;
  --pi-gold: #c8a155;
  --pi-line: rgba(248, 245, 241, 0.18);
  --pi-dark-line: rgba(22, 7, 6, 0.14);
  background: var(--pi-paper);
  color: var(--pi-ink);
  font-family: "Jost", system-ui, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}

.premium-home *,
.premium-home *::before,
.premium-home *::after,
.premium-page *,
.premium-page *::before,
.premium-page *::after {
  box-sizing: border-box;
}

.premium-home img,
.premium-page img {
  display: block;
  max-width: 100%;
}

.premium-home h1,
.premium-home h2,
.premium-home h3,
.premium-home p,
.premium-page h1,
.premium-page h2,
.premium-page h3,
.premium-page p {
  margin-top: 0;
}

.premium-home h1,
.premium-home h2,
.premium-page h1,
.premium-page h2 {
  color: inherit;
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1;
  text-wrap: balance;
}

.premium-home p,
.premium-page p {
  color: inherit;
  text-wrap: pretty;
}

.premium-home .container,
.premium-page .container {
  max-width: 1180px;
}

.premium-home #mainNav.premium-nav,
.premium-home #mainNav.premium-nav.navbar-shrink,
.premium-page #mainNav,
.premium-page #mainNav.navbar-shrink {
  background: rgba(22, 7, 6, 0.88);
  border-bottom: 1px solid var(--pi-line);
  backdrop-filter: blur(18px);
  color: var(--pi-paper);
  font-size: 0.95rem;
  padding: 0.75rem 0;
}

.premium-home #mainNav.premium-nav .premium-nav__inner,
.premium-page #mainNav .container {
  align-items: center;
  max-width: 1240px;
}

.premium-brand {
  color: var(--pi-paper) !important;
  display: inline-flex;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  gap: 0.65rem;
  letter-spacing: -0.015em;
}

.premium-page #mainNav .navbar-brand {
  color: var(--pi-paper) !important;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  gap: 0.6rem;
  letter-spacing: -0.015em;
}

.premium-page #mainNav .navbar-brand span {
  font-size: inherit !important;
}

.premium-page #mainNav .navbar-nav {
  align-items: center;
  gap: clamp(0.15rem, 1vw, 0.55rem);
  padding-top: 0 !important;
}

.premium-brand img {
  height: 34px;
  object-fit: contain;
  width: 34px;
}

.premium-nav__links {
  align-items: center;
  gap: clamp(0.15rem, 1vw, 0.7rem);
}

.premium-nav .nav-link {
  color: rgba(248, 245, 241, 0.76) !important;
  font-weight: 600;
  padding: 0.35rem 0.45rem;
  text-decoration: none;
}

.premium-page #mainNav .nav-link {
  color: rgba(248, 245, 241, 0.76) !important;
  font-family: "Jost", system-ui, sans-serif !important;
  font-weight: 700;
  padding: 0.35rem 0.45rem !important;
  text-decoration: none;
}

.premium-page #mainNav .nav-link:hover,
.premium-page #mainNav .nav-link:focus,
.premium-page #mainNav .nav-link.active {
  color: #fff !important;
}

.premium-page #mainNav .navbar-toggler {
  border-color: rgba(248, 245, 241, 0.42);
}

.premium-page #mainNav .navbar-toggler-icon {
  filter: invert(1);
}

.premium-nav .nav-link:hover,
.premium-nav .nav-link:focus {
  color: #fff !important;
}

.premium-cart {
  border: 1px solid rgba(194, 154, 83, 0.55);
  border-radius: 999px;
  color: var(--pi-paper);
  display: inline-flex;
  font-weight: 700;
  min-height: 38px;
  padding: 0.42rem 0.85rem;
}

.premium-page [data-reflow-type="view-cart"] {
  border: 1px solid rgba(194, 154, 83, 0.55);
  border-radius: 999px;
  color: var(--pi-paper);
  display: inline-flex;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 800;
  min-height: 38px;
  padding: 0.42rem 0.85rem;
}

.premium-toggler {
  border-color: rgba(248, 245, 241, 0.35);
}

.pi-hero {
  align-items: center;
  background:
    radial-gradient(circle at 76% 16%, rgba(194, 154, 83, 0.18), transparent 26%),
    linear-gradient(135deg, #160706 0%, #240907 42%, #4a080a 100%);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(7rem, 12vw, 10rem) clamp(1.25rem, 5vw, 5.5rem) clamp(3rem, 7vw, 6rem);
  position: relative;
}

.pi-hero::before {
  background: linear-gradient(90deg, transparent, rgba(248, 245, 241, 0.14), transparent);
  content: "";
  height: 1px;
  left: 5vw;
  position: absolute;
  right: 5vw;
  top: 92px;
}

.pi-hero__copy {
  max-width: 680px;
  position: relative;
  z-index: 2;
}

.pi-kicker {
  color: var(--pi-gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}

.pi-hero h1 {
  font-size: clamp(3.4rem, 8.3vw, 6rem);
  margin-bottom: 1.3rem;
  max-width: 9.5ch;
}

.pi-hero__lead {
  color: rgba(248, 245, 241, 0.84);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.62;
  max-width: 62ch;
}

.pi-actions,
.pi-retail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.pi-button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 0.78rem 1.2rem;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.pi-button:hover,
.pi-button:focus {
  transform: translateY(-2px);
}

.pi-button--primary {
  background: var(--pi-gold);
  color: #1b0d09;
}

.pi-button--primary:hover,
.pi-button--primary:focus {
  background: #d6b06a;
  color: #1b0d09;
}

.pi-button--ghost {
  border: 1px solid rgba(248, 245, 241, 0.42);
  color: var(--pi-paper);
}

.pi-button--ghost:hover,
.pi-button--ghost:focus {
  border-color: var(--pi-paper);
  color: #fff;
}

.pi-trust {
  border-top: 1px solid var(--pi-line);
  color: rgba(248, 245, 241, 0.72);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  margin-top: 2.25rem;
  padding-top: 1.05rem;
}

.pi-trust span {
  align-items: center;
  display: inline-flex;
  font-size: 0.96rem;
  gap: 0.5rem;
}

.pi-trust span::before {
  background: var(--pi-olive);
  border-radius: 50%;
  content: "";
  height: 0.42rem;
  width: 0.42rem;
}

.pi-hero__visual {
  aspect-ratio: 1 / 1.02;
  min-height: 520px;
  position: relative;
}

.pi-photo {
  margin: 0;
  overflow: hidden;
  position: absolute;
}

.pi-photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pi-photo--large {
  border-radius: 8px;
  inset: 4% 0 14% 14%;
}

.pi-photo--small {
  border-radius: 8px;
  bottom: 0;
  box-shadow: 0 12px 8px rgba(0, 0, 0, 0.18);
  height: 42%;
  left: 0;
  width: 42%;
}

.pi-seal {
  align-items: center;
  background: var(--pi-paper);
  border-radius: 50%;
  bottom: 11%;
  color: var(--pi-ink);
  display: flex;
  flex-direction: column;
  height: clamp(118px, 12vw, 156px);
  justify-content: center;
  position: absolute;
  right: 6%;
  text-align: center;
  width: clamp(118px, 12vw, 156px);
}

.pi-seal span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  max-width: 7ch;
}

.pi-seal strong {
  color: var(--pi-pomegranate);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.pi-marquee {
  background: var(--pi-paper);
  border-bottom: 1px solid var(--pi-dark-line);
  border-top: 1px solid var(--pi-dark-line);
  color: var(--pi-ink);
  overflow: hidden;
  padding: 1rem 0;
}

.pi-marquee div {
  animation: pi-drift 26s linear infinite;
  display: flex;
  gap: 2.4rem;
  white-space: nowrap;
  width: max-content;
}

.pi-marquee span {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.7rem);
  font-weight: 700;
}

.pi-section {
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-section--light {
  background: var(--pi-paper);
  color: var(--pi-ink);
}

.pi-section--dark {
  background: linear-gradient(160deg, #170706 0%, #2d0d09 52%, #170706 100%);
  color: var(--pi-paper);
}

.pi-section__header {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  max-width: 1160px;
}

.pi-section__header h2,
.pi-story h2,
.pi-featured-copy h2,
.pi-notes h2,
.pi-retail h2 {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  margin-bottom: 1rem;
}

.pi-section__header p:not(.pi-kicker),
.pi-story__copy p,
.pi-featured-copy p,
.pi-notes p,
.pi-retail p {
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.62;
}

.pi-collection-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1180px;
}

.pi-collection {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  color: var(--pi-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  overflow: hidden;
  text-decoration: none;
}

.pi-collection:hover,
.pi-collection:focus {
  color: var(--pi-ink);
}

.pi-collection img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.pi-collection:hover img,
.pi-collection:focus img {
  transform: scale(1.045);
}

.pi-collection span,
.pi-collection strong {
  padding-inline: 1rem;
}

.pi-collection span {
  color: var(--pi-pomegranate);
  font-weight: 800;
  padding-top: 1rem;
}

.pi-collection strong {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.05;
  padding-bottom: 1.15rem;
  padding-top: 0.45rem;
}

.pi-story {
  align-items: center;
  background: var(--pi-red-deep);
  color: var(--pi-paper);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-story__image {
  border-radius: 8px;
  min-height: 520px;
  overflow: hidden;
}

.pi-story__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pi-story__copy {
  max-width: 620px;
}

.pi-text-link {
  color: var(--pi-gold);
  display: inline-flex;
  font-weight: 800;
  margin-top: 1rem;
  text-decoration: none;
}

.pi-text-link:hover,
.pi-text-link:focus {
  color: #e4c27d;
}

.pi-featured-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  margin: 0 auto;
  max-width: 1180px;
}

.pi-featured-copy {
  align-self: start;
  position: sticky;
  top: 110px;
}

.pi-live-products {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

.pi-live-products > div {
  background: var(--pi-paper);
  border-radius: 8px;
  color: var(--pi-ink);
  overflow: hidden;
  padding: 0.8rem;
}

/* Keep Reflow product imagery square & tidy instead of tall */
.pi-live-products img,
.pi-shop-panel img,
.pi-product-embeds img {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  width: 100% !important;
}

.pi-notes {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin: 0 auto;
  max-width: 1120px;
}

.pi-note-list {
  border-top: 1px solid var(--pi-dark-line);
}

.pi-note-list a {
  align-items: center;
  border-bottom: 1px solid var(--pi-dark-line);
  color: var(--pi-ink);
  display: flex;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-weight: 700;
  justify-content: space-between;
  line-height: 1.05;
  padding: 1.1rem 0;
  text-decoration: none;
}

.pi-note-list a::after {
  content: "->";
  font-family: "Jost", system-ui, sans-serif;
  font-size: 1.05rem;
  margin-left: 1rem;
}

.pi-retail {
  align-items: center;
  background: var(--pi-olive);
  color: #fff;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-retail h2 {
  margin: 0;
  max-width: 13ch;
}

.pi-page-main {
  background: var(--pi-paper);
  color: var(--pi-ink);
  min-height: 70vh;
}

.pi-page-hero {
  align-items: end;
  background:
    linear-gradient(90deg, rgba(22, 7, 6, 0.78), rgba(22, 7, 6, 0.38)),
    var(--hero-image, url("../img/zaatar.jpeg")) center / cover no-repeat;
  color: var(--pi-paper);
  display: grid;
  min-height: clamp(440px, 64vh, 620px);
  padding: clamp(8rem, 13vw, 11rem) clamp(1.25rem, 5vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}

.pi-page-hero__inner {
  max-width: 980px;
}

.pi-page-hero h1 {
  font-size: clamp(3rem, 7.5vw, 6rem);
  margin-bottom: 1.2rem;
  max-width: 11ch;
}

.pi-page-hero p {
  color: rgba(248, 245, 241, 0.84);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.62;
  max-width: 62ch;
}

.pi-page-strip {
  background: var(--pi-ink);
  color: rgba(248, 245, 241, 0.78);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  padding: 1rem clamp(1.25rem, 5vw, 5.5rem);
}

.pi-page-strip span {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  font-weight: 700;
}

.pi-page-strip span::before {
  background: var(--pi-gold);
  border-radius: 50%;
  content: "";
  height: 0.4rem;
  width: 0.4rem;
}

.pi-shop-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-shop-aside {
  align-self: start;
  border-top: 1px solid var(--pi-dark-line);
  position: sticky;
  top: 96px;
}

.pi-shop-aside h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  margin: 1.1rem 0;
}

.pi-shop-aside a {
  border-bottom: 1px solid var(--pi-dark-line);
  color: var(--pi-ink);
  display: block;
  font-weight: 800;
  padding: 0.75rem 0;
  text-decoration: none;
}

.pi-shop-aside a:hover,
.pi-shop-aside a:focus {
  color: var(--pi-pomegranate);
}

.pi-shop-panel {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.pi-search-shell {
  background: var(--pi-paper-deep);
  border-bottom: 1px solid var(--pi-dark-line);
  padding: 1rem clamp(1.25rem, 5vw, 5.5rem);
}

.pi-category-intro {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  padding: clamp(8rem, 12vw, 10rem) clamp(1.25rem, 5vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
}

.pi-category-intro h1 {
  font-size: clamp(3rem, 7vw, 5.6rem);
  margin-bottom: 1rem;
  max-width: 11ch;
}

.pi-category-intro p {
  color: rgba(22, 7, 6, 0.72);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.62;
  max-width: 62ch;
}

.pi-category-stage {
  align-items: stretch;
  background: var(--pi-ink);
  color: var(--pi-paper);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  min-height: clamp(620px, 92vh, 820px);
  padding: clamp(7rem, 11vw, 10rem) clamp(1.25rem, 5vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}

.pi-category-stage__copy {
  align-self: end;
  max-width: 650px;
}

.pi-category-stage h1 {
  font-size: clamp(3rem, 7.6vw, 6rem);
  margin-bottom: 1.15rem;
  max-width: 10.5ch;
}

.pi-category-stage p:not(.pi-kicker) {
  color: rgba(248, 245, 241, 0.82);
  font-size: clamp(1.08rem, 1.9vw, 1.32rem);
  line-height: 1.66;
}

.pi-category-proof {
  border-top: 1px solid var(--pi-line);
  display: grid;
  gap: 0.8rem;
  margin-top: 2rem;
  padding-top: 1.1rem;
}

.pi-category-proof span {
  color: rgba(248, 245, 241, 0.78);
  font-weight: 800;
}

.pi-stage-gallery {
  align-self: stretch;
  border-radius: 8px;
  min-height: 520px;
  overflow: hidden;
  position: relative;
}

.pi-stage-gallery .simple-slider,
.pi-stage-gallery .swiper-container,
.pi-stage-gallery .swiper-wrapper,
.pi-stage-gallery .swiper-slide {
  height: 100%;
}

.pi-stage-gallery .simple-slider {
  background: #1f0b08;
  border: 1px solid rgba(248, 245, 241, 0.16);
}

.pi-stage-gallery .swiper-slide {
  background-color: #1f0b08 !important;
}

.pi-category-products {
  margin: 0 auto;
  max-width: 1180px;
}

.pi-product-embeds {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pi-product-embeds > div,
.pi-category-products > [data-reflow-type="product-list"] {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  overflow: hidden;
  padding: clamp(0.8rem, 2vw, 1.25rem);
}

.pi-category-story {
  align-items: center;
  background: var(--pi-red-deep);
  color: var(--pi-paper);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-category-story h2 {
  font-size: clamp(2.3rem, 4.6vw, 4.4rem);
  margin: 0;
}

.pi-category-story p {
  color: rgba(248, 245, 241, 0.82);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.65;
  margin-bottom: 0.8rem;
}

.pi-video-feature {
  background: linear-gradient(160deg, #170706 0%, #2d0d09 54%, #170706 100%);
  color: var(--pi-paper);
  padding: clamp(7rem, 11vw, 10rem) clamp(1.25rem, 5vw, 5.5rem) clamp(4rem, 8vw, 7rem);
}

.pi-video-feature__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  margin: 0 auto;
  max-width: 1180px;
}

.pi-video-feature h1 {
  font-size: clamp(3rem, 7vw, 5.8rem);
  margin-bottom: 1rem;
}

.pi-video-feature p {
  color: rgba(248, 245, 241, 0.82);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.65;
}

.pi-video-frame {
  aspect-ratio: 16 / 9;
  background: #080302;
  border-radius: 8px;
  overflow: hidden;
}

.pi-video-frame iframe {
  border: 0;
  height: 100%;
  width: 100%;
}

.pi-admin-main {
  background: var(--pi-paper);
  color: var(--pi-ink);
  min-height: 100vh;
  padding: clamp(7rem, 11vw, 9rem) clamp(1.25rem, 5vw, 5.5rem) clamp(4rem, 8vw, 7rem);
}

.pi-admin-shell {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1180px;
}

.pi-admin-intro h1 {
  color: var(--pi-ink);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  margin-bottom: 1rem;
}

.pi-admin-intro p {
  color: rgba(22, 7, 6, 0.72);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.62;
}

.pi-admin-panel {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  padding: clamp(1rem, 2.6vw, 2rem);
}

.pi-admin-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pi-admin-grid .wide {
  grid-column: 1 / -1;
}

.pi-admin-actions,
.pi-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pi-admin-status {
  background: var(--pi-paper-deep);
  border-radius: 8px;
  color: var(--pi-ink-soft);
  font-weight: 700;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
}

.pi-event-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.pi-event-item {
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  padding: 1rem;
}

.pi-event-item h3 {
  color: var(--pi-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.1;
}

.pi-public-events {
  display: grid;
  gap: 0.8rem;
  margin: 0 auto 1.5rem;
  max-width: 1180px;
}

.premium-page > section:first-of-type {
  background: var(--pi-paper);
  color: var(--pi-ink);
  padding-top: clamp(7rem, 11vw, 9rem) !important;
}

.premium-page > section:first-of-type h1 {
  color: var(--pi-ink);
  font-size: clamp(2.7rem, 7vw, 5rem);
  margin-bottom: 0.6rem;
}

.premium-page .underline::after {
  display: none;
}

.premium-page .simple-slider {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  overflow: hidden;
}

.premium-page .simple-slider .swiper-slide {
  background-color: var(--pi-paper-deep) !important;
  height: clamp(340px, 52vw, 620px);
}

.premium-page .swiper-button-next,
.premium-page .swiper-button-prev {
  color: var(--pi-gold);
}

.premium-page [data-reflow-type="product-list"],
.premium-page [data-reflow-type="product"] {
  color: var(--pi-ink) !important;
  font-family: "Jost", system-ui, sans-serif !important;
}

.premium-page .reflow-product-list.ref-cards .ref-product,
.pi-live-products .reflow-product,
.pi-shop-panel .reflow-product {
  border-radius: 8px !important;
}

.premium-page .ref-button,
.premium-page button.ref-button {
  border-radius: 999px !important;
}

.pi-form-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pi-form-card,
.pi-info-card {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.premium-page .form-control {
  border: 1px solid rgba(22, 7, 6, 0.22);
  border-radius: 8px;
  box-shadow: none !important;
  color: var(--pi-ink);
  min-height: 48px;
}

.premium-page .btn,
.premium-page button.btn {
  border-radius: 999px;
  font-weight: 800;
}

.premium-page .btn-primary {
  background: var(--pi-gold);
  border-color: var(--pi-gold);
  color: var(--pi-ink);
}

.premium-page .btn-primary:hover,
.premium-page .btn-primary:focus {
  background: #d6b06a;
  border-color: #d6b06a;
  color: var(--pi-ink);
}

.pi-retailer-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0 auto;
  max-width: 1180px;
}

.pi-retailer-card {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  color: var(--pi-ink);
  padding: 1.2rem;
}

.pi-retailer-card h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.05;
}

.pi-calendar-shell {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 8px;
  margin: 0 auto;
  max-width: 1180px;
  overflow: hidden;
}

.pi-calendar-shell iframe {
  display: block;
  min-height: 620px;
  width: 100%;
}

.premium-home footer {
  background: #130504 !important;
  border-top: 1px solid var(--pi-line);
}

.premium-home footer .container,
.premium-page footer .container {
  max-width: 1180px;
}

.premium-page footer {
  background: #130504 !important;
  border-top: 1px solid var(--pi-line);
}

.premium-home footer h3,
.premium-home footer span,
.premium-home footer p,
.premium-home footer a,
.premium-page footer h3,
.premium-page footer span,
.premium-page footer p,
.premium-page footer a {
  font-family: "Jost", system-ui, sans-serif !important;
}

.premium-home .link-secondary,
.premium-page .link-secondary {
  color: rgba(248, 245, 241, 0.76) !important;
}

.premium-home .link-secondary:hover,
.premium-home .link-secondary:focus,
.premium-page .link-secondary:hover,
.premium-page .link-secondary:focus {
  color: var(--pi-gold) !important;
}

/* ============================================================
   ELEVATED / ARTISTIC ADDITIONS — cultural storytelling layer
   ============================================================ */

/* Scroll-reveal — elements rise & fade in as they enter view */
.pi-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.pi-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pi-reveal--d1 { transition-delay: 0.08s; }
.pi-reveal--d2 { transition-delay: 0.16s; }
.pi-reveal--d3 { transition-delay: 0.24s; }
.pi-reveal--d4 { transition-delay: 0.32s; }

/* Refined hero eyebrow with arabic flourish */
.pi-hero__arabic {
  color: rgba(194, 154, 83, 0.92);
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
  direction: rtl;
}

/* ---- Numbered editorial heritage chapters ---- */
.pi-chapters {
  background: var(--pi-paper);
  color: var(--pi-ink);
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-chapters__head {
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  max-width: 1180px;
}

.pi-chapters__head h2 {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  margin: 0.8rem 0 1rem;
  max-width: 16ch;
}

.pi-chapters__head p {
  color: rgba(22, 7, 6, 0.7);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.62;
  max-width: 60ch;
}

.pi-chapter {
  align-items: center;
  border-top: 1px solid var(--pi-dark-line);
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.pi-chapter:nth-child(even) .pi-chapter__media {
  order: -1;
}

.pi-chapter__media {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 5 / 4;
}

.pi-chapter__media img {
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.pi-chapter:hover .pi-chapter__media img {
  transform: scale(1.05);
}

.pi-chapter__num {
  color: var(--pi-pomegranate);
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  opacity: 0.4;
}

.pi-chapter__copy h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0.5rem 0 0.4rem;
}

.pi-chapter__arabic {
  color: var(--pi-olive);
  direction: rtl;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}

.pi-chapter__copy p {
  color: rgba(22, 7, 6, 0.74);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.66;
  margin-bottom: 1rem;
}

/* ---- Full-bleed cultural quote / land statement ---- */
.pi-statement {
  background:
    linear-gradient(180deg, rgba(22, 7, 6, 0.72), rgba(74, 8, 10, 0.72)),
    var(--pi-statement-img, url("../img/oil.jpeg")) center / cover no-repeat;
  color: var(--pi-paper);
  padding: clamp(6rem, 14vw, 11rem) clamp(1.25rem, 5vw, 5.5rem);
  text-align: center;
}

.pi-statement blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}

.pi-statement cite {
  color: var(--pi-gold);
  display: block;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-top: 1.8rem;
  text-transform: uppercase;
}

/* ---- FAQ / answer-engine block ---- */
.pi-faq {
  background: var(--pi-paper);
  color: var(--pi-ink);
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-faq__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  margin: 0 auto;
  max-width: 1120px;
}

.pi-faq__intro {
  align-self: start;
  position: sticky;
  top: 110px;
}

.pi-faq__intro h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  margin: 0.8rem 0 1rem;
}

.pi-faq__intro p {
  color: rgba(22, 7, 6, 0.7);
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.62;
}

.pi-faq__list {
  border-top: 1px solid var(--pi-dark-line);
}

.pi-faq__item {
  border-bottom: 1px solid var(--pi-dark-line);
}

.pi-faq__q {
  align-items: center;
  background: none;
  border: 0;
  color: var(--pi-ink);
  cursor: pointer;
  display: flex;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.15;
  padding: 1.3rem 0;
  text-align: left;
  width: 100%;
}

.pi-faq__icon {
  color: var(--pi-pomegranate);
  flex: 0 0 auto;
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 300ms ease;
}

.pi-faq__item.is-open .pi-faq__icon {
  transform: rotate(45deg);
}

.pi-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pi-faq__a p {
  color: rgba(22, 7, 6, 0.74);
  font-size: 1.08rem;
  line-height: 1.66;
  margin: 0;
  padding: 0 0 1.4rem;
}

/* ---- GEO / local presence band ---- */
.pi-local {
  background: var(--pi-ink);
  color: var(--pi-paper);
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-local__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1180px;
}

.pi-local h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  margin: 0.8rem 0 1rem;
}

.pi-local p {
  color: rgba(248, 245, 241, 0.8);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.64;
}

.pi-local__stats {
  align-content: center;
  display: grid;
  gap: 1px;
  background: var(--pi-line);
  border: 1px solid var(--pi-line);
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.pi-local__stat {
  background: #170706;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.pi-local__stat strong {
  color: var(--pi-gold);
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
}

.pi-local__stat span {
  color: rgba(248, 245, 241, 0.72);
  display: block;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* ---- Newsletter strip ---- */
.pi-newsletter {
  background: var(--pi-gold);
  color: #1b0d09;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-newsletter__inner {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  margin: 0 auto;
  max-width: 1120px;
}

.pi-newsletter h2 {
  color: #1b0d09;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0 0 0.6rem;
}

.pi-newsletter p {
  color: rgba(27, 13, 9, 0.78);
  font-size: 1.08rem;
  margin: 0;
}

.pi-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pi-newsletter__form input {
  background: #fff;
  border: 1px solid rgba(27, 13, 9, 0.25);
  border-radius: 999px;
  color: #1b0d09;
  flex: 1 1 220px;
  font-family: inherit;
  font-size: 1rem;
  min-height: 52px;
  padding: 0 1.3rem;
}

.pi-newsletter__form input:focus {
  border-color: #1b0d09;
  outline: none;
}

.pi-newsletter__form button {
  background: #1b0d09;
  border: 0;
  border-radius: 999px;
  color: var(--pi-gold);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  min-height: 52px;
  padding: 0 1.6rem;
  transition: transform 180ms ease;
}

.pi-newsletter__form button:hover {
  transform: translateY(-2px);
}

@media (max-width: 1100px) {
  .pi-chapter,
  .pi-faq__inner,
  .pi-local__inner,
  .pi-newsletter__inner {
    grid-template-columns: 1fr;
  }

  .pi-chapter:nth-child(even) .pi-chapter__media {
    order: 0;
  }

  .pi-faq__intro {
    position: static;
  }

  .pi-statement {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pi-chapter__media img,
  .pi-newsletter__form button {
    transition: none;
  }
}

/* ============================================================
   HERITAGE GALLERY DIRECTION
   Collected, editorial, and product-led. This final layer keeps
   the existing storefront behavior while changing the visual
   language across home, catalog, category, content, and checkout.
   ============================================================ */

.premium-home,
.premium-page {
  --pi-ink: oklch(22% 0.04 350);
  --pi-ink-soft: oklch(31% 0.045 350);
  --pi-paper: oklch(99% 0 0);
  --pi-paper-deep: oklch(97% 0.012 350);
  --pi-surface: oklch(100% 0 0);
  --pi-burgundy: oklch(37% 0.12 350);
  --pi-burgundy-deep: oklch(26% 0.085 350);
  --pi-burgundy-bright: oklch(48% 0.14 350);
  --pi-olive: oklch(46% 0.075 125);
  --pi-copper: oklch(67% 0.13 57);
  --pi-cobalt: var(--pi-burgundy);
  --pi-cobalt-bright: var(--pi-burgundy-bright);
  --pi-gold: var(--pi-copper);
  --pi-pomegranate: var(--pi-burgundy);
  --pi-red-deep: var(--pi-burgundy-deep);
  --pi-line: oklch(22% 0.04 350 / 0.16);
  --pi-dark-line: oklch(22% 0.04 350 / 0.18);
  --pi-shadow: oklch(22% 0.04 350 / 0.2);
  color: var(--pi-ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.premium-home {
  background: var(--pi-burgundy-deep);
  color: var(--pi-paper);
}

.premium-page {
  background: var(--pi-paper);
  background-image: none;
  color: var(--pi-ink);
  min-height: 100vh;
}

.premium-home h1,
.premium-home h2,
.premium-page h1,
.premium-page h2,
.premium-brand,
.premium-page #mainNav .navbar-brand,
footer .fw-bold span:last-child,
.pi-collection strong,
.pi-card__title,
.pi-chapter__title,
.pi-evt__title,
.pi-rec__title,
.pi-vid__title,
.pi-blog__title {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.premium-home h1,
.premium-page h1 {
  max-width: 12ch;
}

.premium-home h2,
.premium-page h2 {
  max-width: 15ch;
}

.premium-home h1,
.premium-home h2,
.premium-page h1,
.premium-page h2 {
  line-height: 0.92;
  text-shadow: none;
}

.premium-home h3,
.premium-page h3,
.premium-home h4,
.premium-page h4,
.premium-home label,
.premium-page label,
.premium-home button,
.premium-page button {
  font-family: "Manrope", system-ui, sans-serif;
}

.premium-home p,
.premium-page p {
  max-width: 68ch;
  text-wrap: pretty;
}

.pi-kicker {
  color: var(--pi-burgundy) !important;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.premium-home .pi-kicker,
.pi-cinema--center .pi-kicker {
  color: var(--pi-burgundy) !important;
}

.pi-kicker::before,
.pi-kicker::after,
.pi-section__header .pi-kicker::before,
.pi-section__header .pi-kicker::after,
.pi-cinema--center .pi-kicker::before,
.pi-cinema--center .pi-kicker::after {
  display: none !important;
}

.pi-button,
.premium-page .btn-primary,
.premium-home .btn-primary,
.pi-cat-chip,
.premium-cart,
.premium-page [data-reflow-type="view-cart"] {
  align-items: center;
  border-radius: 3px;
  display: inline-flex;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 0.82rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: 44px;
  text-decoration: none !important;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.pi-button:hover,
.premium-page .btn-primary:hover,
.premium-home .btn-primary:hover,
.pi-cat-chip:hover,
.premium-cart:hover,
.premium-page [data-reflow-type="view-cart"]:hover {
  transform: translateY(-2px);
}

.pi-button--primary,
.premium-page .btn-primary,
.premium-home .btn-primary {
  background: var(--pi-burgundy);
  border: 1px solid var(--pi-burgundy);
  color: #fff !important;
  padding: 0.78rem 1.18rem;
}

.pi-button--primary:hover,
.premium-page .btn-primary:hover,
.premium-home .btn-primary:hover {
  background: var(--pi-burgundy-deep);
  border-color: var(--pi-burgundy-deep);
  color: #fff !important;
}

.pi-button--ghost {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit !important;
  padding: 0.72rem 1.14rem;
}

.pi-button--ghost:hover {
  background: var(--pi-olive);
  border-color: var(--pi-olive);
  color: #fff !important;
}

.premium-home #mainNav.premium-nav,
.premium-home #mainNav.premium-nav.navbar-shrink,
.premium-page #mainNav,
.premium-page #mainNav.navbar-shrink {
  background: var(--pi-burgundy-deep) !important;
  border-bottom: 1px solid oklch(100% 0 0 / 0.2);
  box-shadow: none;
  color: #fff;
  padding: 0.82rem 0;
}

.premium-home #mainNav.premium-nav .premium-nav__inner,
.premium-page #mainNav .container {
  max-width: 1320px;
}

.premium-brand,
.premium-page #mainNav .navbar-brand {
  color: #fff !important;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  gap: 0.62rem;
  white-space: nowrap;
}

.premium-brand img,
.premium-page #mainNav .navbar-brand::before {
  background: #fff !important;
  border-radius: 2px !important;
  height: 36px !important;
  padding: 3px;
  width: 36px !important;
}

.premium-page #mainNav .navbar-brand::before {
  background-image: url("../img/logo-3.png") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 82% auto;
  content: "";
  display: inline-block;
  flex: 0 0 36px;
}

.premium-nav__links,
.premium-page #mainNav .navbar-nav {
  gap: clamp(0.12rem, 0.7vw, 0.5rem);
}

.premium-nav .nav-link,
.premium-page #mainNav .nav-link {
  background: transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: oklch(100% 0 0 / 0.78) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.5rem !important;
}

.premium-nav .nav-link:hover,
.premium-nav .nav-link:focus,
.premium-nav .nav-link.active,
.premium-page #mainNav .nav-link:hover,
.premium-page #mainNav .nav-link:focus,
.premium-page #mainNav .nav-link.active {
  background: transparent;
  border-bottom-color: var(--pi-copper);
  color: #fff !important;
}

.premium-cart,
.premium-page [data-reflow-type="view-cart"] {
  background: #fff;
  border: 1px solid #fff;
  color: var(--pi-burgundy-deep) !important;
  min-height: 39px;
  padding: 0.45rem 0.9rem;
}

.premium-toggler,
.premium-page #mainNav .navbar-toggler {
  border: 1px solid oklch(100% 0 0 / 0.4);
  border-radius: 2px;
}

.premium-toggler:focus,
.premium-page #mainNav .navbar-toggler:focus {
  box-shadow: 0 0 0 0.18rem oklch(67% 0.13 57 / 0.4);
}

.premium-page #mainNav .navbar-toggler-icon,
.premium-home #mainNav .navbar-toggler-icon {
  filter: invert(1);
}

.pi-cinema.pi-cinema--center {
  align-items: end;
  background: var(--pi-paper) !important;
  color: var(--pi-ink);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  min-height: clamp(680px, 88svh, 900px);
  padding: clamp(8rem, 12vw, 10rem) clamp(1.25rem, 6vw, 6rem) clamp(3.4rem, 7vw, 6rem);
  place-items: end start;
  text-align: left;
}

.pi-cinema.pi-cinema--center::before {
  background: var(--cinema-img) center / cover no-repeat;
  content: "";
  inset: 0 0 0 45%;
  opacity: 1;
  position: absolute;
  transform: none;
  z-index: 0;
}

.pi-cinema--center .pi-cinema__scrim {
  background: linear-gradient(90deg, var(--pi-paper) 0%, oklch(99% 0 0 / 0.94) 30%, oklch(99% 0 0 / 0.35) 61%, transparent 100%);
  inset: 0;
  position: absolute;
  z-index: 1;
}

.pi-cinema--center .pi-cinema__copy {
  grid-column: 1 / 2;
  margin: 0;
  max-width: 620px;
  position: relative;
  z-index: 2;
}

.pi-cinema--center .pi-kicker {
  margin-bottom: 1.2rem;
}

.pi-cinema--center h1 {
  color: var(--pi-burgundy);
  font-size: clamp(3.7rem, 7.2vw, 6.8rem);
  margin: 0;
  max-width: 7.8ch;
}

.pi-cinema--center .pi-cinema__lead {
  color: var(--pi-ink-soft);
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  line-height: 1.65;
  margin: 1.4rem 0 0;
  max-width: 48ch;
}

.pi-cinema--center .pi-actions {
  justify-content: flex-start;
  margin-top: 1.9rem;
}

.pi-cinema--center .pi-trust {
  border-top-color: var(--pi-dark-line);
  color: var(--pi-ink-soft);
  justify-content: flex-start;
  margin-top: 1.9rem;
}

.pi-cinema--center .pi-trust span::before {
  background: var(--pi-olive);
}

.pi-marquee {
  background: var(--pi-olive);
  border: 0;
  color: #fff;
}

.pi-marquee span {
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18em;
  font-weight: 600;
}

.pi-showcase {
  background:
    linear-gradient(90deg, oklch(26% 0.085 350 / 0.86), oklch(26% 0.085 350 / 0.32)),
    url("../img/baladna-lineup.jpg") center / cover no-repeat !important;
  min-height: clamp(540px, 70vh, 780px);
}

.pi-showcase__scrim {
  background: transparent;
}

.pi-showcase__copy {
  background: oklch(100% 0 0 / 0.94);
  border: 1px solid oklch(22% 0.04 350 / 0.14);
  border-radius: 2px;
  color: var(--pi-ink);
  margin-left: clamp(1rem, 6vw, 6rem);
  max-width: 560px;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.pi-showcase__copy h2,
.pi-showcase__copy p {
  color: var(--pi-ink);
}

.pi-showcase__copy p {
  font-size: 1.02rem;
}

.pi-section,
.pi-catalog,
.pi-section--light,
.premium-home .pi-section--light,
.premium-page .pi-section--light,
.pi-category-stage,
.pi-story,
.pi-notes,
.pi-faq,
.pi-featured,
.pi-chapters {
  background: var(--pi-paper);
  color: var(--pi-ink);
}

.pi-section--dark,
.premium-home .pi-section--dark {
  background: var(--pi-burgundy-deep);
  color: #fff;
}

.pi-section__header,
.pi-chapters__head {
  border-bottom: 1px solid var(--pi-dark-line);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.pi-section__header h2,
.pi-chapters__head h2,
.pi-category-story h2,
.pi-retail h2,
.pi-form-card h2 {
  color: var(--pi-burgundy);
}

.pi-section__header p:not(.pi-kicker),
.pi-chapters__head p,
.pi-story__copy p,
.pi-featured-copy p,
.pi-notes p,
.pi-retail p {
  color: var(--pi-ink-soft);
}

.pi-collection-grid {
  gap: 1rem;
}

.pi-collection {
  background: var(--pi-surface) !important;
  border: 1px solid var(--pi-dark-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--pi-ink) !important;
}

.pi-collection:hover,
.pi-collection:focus {
  border-color: var(--pi-burgundy) !important;
  color: var(--pi-ink) !important;
}

.pi-collection img {
  aspect-ratio: 4 / 4.6;
}

.pi-collection span {
  color: var(--pi-burgundy) !important;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pi-collection strong {
  color: var(--pi-ink) !important;
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
}

.pi-catalog {
  border-top: 1px solid var(--pi-dark-line);
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

.pi-catalog__bar {
  border-bottom: 1px solid var(--pi-dark-line);
  padding-bottom: 1rem;
}

.pi-catalog__bar h1,
.pi-catalog__bar h2 {
  color: var(--pi-burgundy);
}

.pi-cat-chip {
  background: transparent;
  border: 1px solid var(--pi-dark-line);
  color: var(--pi-ink);
  min-height: 38px;
  padding: 0.45rem 0.8rem;
}

.pi-cat-chip:hover,
.pi-cat-chip.is-active,
.pi-cat-chip[aria-pressed="true"] {
  background: var(--pi-burgundy);
  border-color: var(--pi-burgundy);
  color: #fff;
}

.pi-card,
.pi-retailer-card,
.pi-evt,
.pi-rec,
.pi-vid,
.pi-blog,
.pi-form-card,
.pi-info-card {
  background: var(--pi-surface) !important;
  border: 1px solid var(--pi-dark-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--pi-ink) !important;
}

.pi-card:hover,
.pi-retailer-card:hover,
.pi-evt:hover,
.pi-rec:hover,
.pi-vid:hover,
.pi-blog:hover {
  border-color: var(--pi-burgundy) !important;
  box-shadow: 0 10px 24px -18px var(--pi-shadow) !important;
  transform: translateY(-3px);
}

.pi-card__media {
  background: var(--pi-paper-deep);
  border-bottom: 1px solid var(--pi-dark-line);
}

.pi-card__media img {
  object-fit: contain;
  padding: 0.6rem;
}

.pi-card__body {
  padding: 1rem 1rem 1.2rem;
}

.pi-card__cat {
  color: var(--pi-burgundy) !important;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.pi-card__title {
  color: var(--pi-ink) !important;
  font-size: 1.35rem;
  line-height: 1;
}

.pi-card__price,
.pi-card__price-new {
  color: var(--pi-burgundy) !important;
}

.pi-card__price-orig {
  color: var(--pi-ink-soft) !important;
  text-decoration-color: var(--pi-copper);
}

.pi-card__oos {
  color: var(--pi-burgundy) !important;
}

.pi-page-hero {
  background:
    linear-gradient(90deg, oklch(26% 0.085 350 / 0.88), oklch(26% 0.085 350 / 0.48)),
    var(--hero-image, url("../img/zaatar.jpeg")) center / cover no-repeat;
  color: #fff;
  min-height: clamp(400px, 52vh, 580px);
}

.pi-page-hero h1,
.pi-page-hero p {
  color: #fff;
}

.pi-page-hero h1 {
  font-size: clamp(3.4rem, 7.2vw, 6rem);
}

.pi-category-story,
.pi-form-card,
.pi-info-card {
  color: var(--pi-ink);
}

.pi-category-story p,
.pi-form-card p,
.pi-info-card p,
.pi-evt__desc,
.pi-rec__desc,
.pi-vid__desc,
.pi-blog__excerpt,
.pi-evt__loc,
.pi-rec__det p,
.pi-rec__det ul {
  color: var(--pi-ink-soft) !important;
}

.pi-rec__det {
  border-top-color: var(--pi-dark-line);
}

.pi-rec__det summary {
  color: var(--pi-burgundy);
}

.pi-retail {
  background: var(--pi-olive);
  color: #fff;
}

.pi-retail .pi-kicker,
.pi-retail h2,
.pi-retail p {
  color: #fff !important;
}

.premium-page [data-reflow-type="shopping-cart"] {
  background: var(--pi-surface);
  border: 1px solid var(--pi-dark-line);
  border-radius: 2px;
  box-shadow: none;
  color: var(--pi-ink) !important;
}

footer {
  background: var(--pi-burgundy-deep) !important;
  color: #fff;
}

footer h3,
footer .fw-bold,
footer .fw-bold span,
footer p,
footer .text-muted {
  color: #fff !important;
}

footer a,
footer .link-secondary {
  color: oklch(100% 0 0 / 0.78) !important;
  text-decoration: none;
}

footer a:hover,
footer .link-secondary:hover {
  color: var(--pi-copper) !important;
}

footer hr {
  border-color: oklch(100% 0 0 / 0.2);
}

footer .bs-icon {
  background: var(--pi-copper) !important;
  color: var(--pi-burgundy-deep);
}

.premium-home a:focus-visible,
.premium-page a:focus-visible,
.premium-home button:focus-visible,
.premium-page button:focus-visible,
.premium-home input:focus-visible,
.premium-page input:focus-visible,
.premium-home textarea:focus-visible,
.premium-page textarea:focus-visible,
.premium-home summary:focus-visible,
.premium-page summary:focus-visible {
  outline: 3px solid var(--pi-copper);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .premium-home #mainNav .navbar-collapse,
  .premium-page #mainNav .navbar-collapse {
    background: var(--pi-burgundy-deep);
    border: 1px solid oklch(100% 0 0 / 0.18);
    border-radius: 2px;
    margin-top: 0.8rem;
    padding: 0.75rem;
  }

  .premium-home #mainNav .navbar-nav,
  .premium-page #mainNav .navbar-nav {
    align-items: stretch;
    gap: 0.2rem;
  }

  .premium-home #mainNav .nav-link,
  .premium-page #mainNav .nav-link {
    display: block;
    text-align: left;
  }

  .pi-cinema.pi-cinema--center {
    align-items: end;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 760px;
    padding: 25rem 1.25rem 2.6rem;
  }

  .pi-cinema.pi-cinema--center::before {
    inset: 0 0 38% 0;
  }

  .pi-cinema--center .pi-cinema__scrim {
    background: linear-gradient(180deg, oklch(99% 0 0 / 0.08) 0%, oklch(99% 0 0 / 0.14) 26%, var(--pi-paper) 66%, var(--pi-paper) 100%);
  }

  .pi-cinema--center .pi-cinema__copy {
    grid-column: 1;
  }

  .pi-cinema--center h1,
  .pi-page-hero h1,
  .pi-category-stage h1 {
    max-width: 11.5ch;
  }
}

@media (max-width: 767px) {
  .premium-home,
  .premium-page {
    font-size: 16px;
  }

  .pi-cinema.pi-cinema--center {
    min-height: 760px;
    padding: 22rem 1.05rem 2.4rem;
  }

  .pi-cinema--center h1 {
    font-size: clamp(3.1rem, 14vw, 4.3rem);
    max-width: 8.4ch;
  }

  .pi-cinema--center .pi-actions,
  .pi-actions,
  .pi-retail__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pi-button,
  .premium-page .btn-primary,
  .premium-home .btn-primary {
    width: 100%;
  }

  .pi-section,
  .pi-catalog,
  .pi-category-stage,
  .pi-page-hero {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }

  .pi-section__header h2,
  .pi-chapters__head h2,
  .pi-form-card h2,
  .pi-retail h2,
  .pi-category-story h2 {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .pi-catalog__bar {
    align-items: stretch;
    flex-direction: column;
  }

  .pi-cat-filters {
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .pi-cat-chip {
    white-space: nowrap;
  }

  .pi-showcase__copy {
    margin: 1rem;
  }

  footer .d-flex.justify-content-between {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================================
   SUQ NOCTURNE — homepage flagship (scoped to .premium-home)
   Dark cinematic canvas, spotlit objects, gold discipline.
   Other pages (.premium-page) are untouched.
   ============================================================ */

.premium-home {
  background:
    radial-gradient(120% 80% at 50% -10%, #240a08 0%, transparent 55%),
    var(--pi-ink);
}

/* --- Hero: spotlit rotating object on a pedestal --- */
.premium-home .pi-hero {
  background:
    radial-gradient(60% 55% at 76% 36%, rgba(194, 154, 83, 0.22), transparent 60%),
    radial-gradient(90% 90% at 50% 120%, #26090a, var(--pi-ink) 62%);
}

.pi-spotstage {
  align-self: center;
  display: grid;
  min-height: 540px;
  place-items: center;
  position: relative;
  z-index: 2;
}

.pi-spotglow {
  background: radial-gradient(circle, rgba(194, 154, 83, 0.42), transparent 64%);
  border-radius: 50%;
  height: 70%;
  position: absolute;
  width: 78%;
}

.pi-spotshadow {
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.62), transparent 70%);
  border-radius: 50%;
  bottom: 11%;
  height: 7%;
  position: absolute;
  width: 62%;
}

.pi-spotobj {
  aspect-ratio: 3 / 4.1;
  border: 1px solid rgba(194, 154, 83, 0.4);
  border-radius: 16px;
  height: min(76%, 460px);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 60px 90px -30px rgba(0, 0, 0, 0.8),
    0 0 70px -12px rgba(194, 154, 83, 0.3);
  transform: perspective(1300px) rotateY(-13deg) rotateX(4deg);
}

.pi-spotobj img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pi-spotobj::after {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 42%);
  content: "";
  inset: 0;
  position: absolute;
}

.pi-spotseal {
  align-items: center;
  background: var(--pi-gold);
  border-radius: 50%;
  bottom: 4%;
  color: #1b0d09;
  display: flex;
  flex-direction: column;
  font-family: "Fraunces", Georgia, serif;
  height: clamp(104px, 11vw, 136px);
  justify-content: center;
  left: 2%;
  line-height: 1.15;
  position: absolute;
  text-align: center;
  width: clamp(104px, 11vw, 136px);
  z-index: 3;
  box-shadow: 0 24px 44px -18px rgba(194, 154, 83, 0.8);
}

.pi-spotseal strong {
  color: #7a1410;
  font-size: 0.78rem;
  margin-top: 0.3rem;
}

@media (prefers-reduced-motion: no-preference) {
  .pi-spotobj {
    animation: pi-turn 8s ease-in-out infinite alternate;
  }
}

@keyframes pi-turn {
  from { transform: perspective(1300px) rotateY(-13deg) rotateX(4deg); }
  to   { transform: perspective(1300px) rotateY(13deg) rotateX(2deg); }
}

/* --- Full-bleed product-family showcase (Baladna lineup) --- */
.pi-showcase {
  align-items: end;
  background: #160706 var(--pi-showcase-img, url("../img/baladna-lineup.jpg")) center / cover no-repeat;
  display: grid;
  min-height: clamp(460px, 70vh, 760px);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5.5rem);
  position: relative;
}

.pi-showcase__scrim {
  background: linear-gradient(90deg, rgba(15, 5, 4, 0.88) 0%, rgba(15, 5, 4, 0.5) 38%, transparent 64%);
  inset: 0;
  position: absolute;
}

.pi-showcase__copy {
  max-width: 520px;
  position: relative;
  z-index: 2;
}

.pi-showcase__copy h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  margin: 0.6rem 0 1rem;
}

.pi-showcase__copy p {
  color: rgba(248, 245, 241, 0.84);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

/* --- Darken the marquee into the nocturne world --- */
.premium-home .pi-marquee {
  background: #0c0403;
  border-color: rgba(194, 154, 83, 0.18);
  color: var(--pi-gold);
}

.premium-home .pi-marquee span {
  color: var(--pi-gold);
}

/* --- Convert the light sections to dark surfaces --- */
.premium-home .pi-section--light,
.premium-home .pi-chapters,
.premium-home .pi-faq {
  background: linear-gradient(180deg, var(--pi-ink) 0%, #1d0807 100%);
  color: var(--pi-paper);
}

.premium-home .pi-chapters__head p,
.premium-home .pi-faq__intro p,
.premium-home .pi-section__header p:not(.pi-kicker),
.premium-home .pi-notes p {
  color: rgba(248, 245, 241, 0.74);
}

.premium-home .pi-chapter,
.premium-home .pi-faq__list,
.premium-home .pi-note-list {
  border-color: var(--pi-line);
}

.premium-home .pi-faq__item {
  border-color: var(--pi-line);
}

.premium-home .pi-faq__q,
.premium-home .pi-note-list a {
  color: var(--pi-paper);
}

.premium-home .pi-faq__a p {
  color: rgba(248, 245, 241, 0.76);
}

.premium-home .pi-chapter__copy p {
  color: rgba(248, 245, 241, 0.78);
}

.premium-home .pi-chapter__media,
.premium-home .pi-collection,
.premium-home .pi-story__image {
  border: 1px solid rgba(194, 154, 83, 0.28);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, 0.9),
    0 0 50px -22px rgba(194, 154, 83, 0.22);
}

/* --- Collection cards: dark gallery tiles with tilt-on-hover --- */
.premium-home .pi-collection {
  background: #1f0b08;
  color: var(--pi-paper);
  transform: perspective(900px) rotateX(0) rotateY(0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease, border-color 320ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.premium-home .pi-collection:hover,
.premium-home .pi-collection:focus {
  border-color: rgba(194, 154, 83, 0.6);
  color: var(--pi-paper);
}

.premium-home .pi-collection strong {
  color: var(--pi-paper);
}

.premium-home .pi-collection span {
  color: var(--pi-gold);
}

/* --- Parallax depth inside story chapters --- */
.pi-chapter__media img,
.pi-story__image img {
  will-change: transform;
}

/* --- Recurring quote band (already .pi-statement) tuned for nocturne --- */
.premium-home .pi-statement {
  background:
    linear-gradient(180deg, rgba(22, 7, 6, 0.82), rgba(74, 8, 10, 0.78)),
    var(--pi-statement-img, url("../img/oil.jpeg")) center / cover no-repeat;
}

/* ============================================================
   CATALOG — renders from products.json (backend-agnostic)
   Dark Suq Nocturne grid, controllable image crops.
   ============================================================ */
.pi-catalog {
  background: linear-gradient(180deg, var(--pi-ink) 0%, #1d0807 100%);
  color: var(--pi-paper);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 5.5rem) clamp(4rem, 8vw, 7rem);
}

.pi-catalog__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  max-width: 1240px;
}

.pi-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pi-cat-chip {
  background: transparent;
  border: 1px solid rgba(194, 154, 83, 0.4);
  border-radius: 999px;
  color: rgba(248, 245, 241, 0.82);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.pi-cat-chip:hover {
  border-color: var(--pi-gold);
  color: #fff;
}

.pi-cat-chip.is-active {
  background: var(--pi-gold);
  border-color: var(--pi-gold);
  color: #1b0d09;
}

.pi-cat-search {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(194, 154, 83, 0.35);
  border-radius: 999px;
  color: var(--pi-paper);
  font-family: inherit;
  font-size: 0.95rem;
  min-height: 44px;
  min-width: 220px;
  padding: 0 1.1rem;
}

.pi-cat-search::placeholder { color: rgba(248, 245, 241, 0.5); }
.pi-cat-search:focus { border-color: var(--pi-gold); outline: none; }

.pi-cat-count {
  color: rgba(248, 245, 241, 0.6);
  font-size: 0.9rem;
  margin: 0 auto 1.5rem;
  max-width: 1240px;
}

.pi-card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0 auto;
  max-width: 1240px;
}

.pi-card {
  background: #1f0b08;
  border: 1px solid rgba(194, 154, 83, 0.22);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms ease, box-shadow 280ms ease;
}

.pi-card:hover {
  border-color: rgba(194, 154, 83, 0.6);
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9),
    0 0 40px -20px rgba(194, 154, 83, 0.3);
}

.pi-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  background: #160706;
}

.pi-card__media img {
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.pi-card:hover .pi-card__media img { transform: scale(1.06); }

.pi-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  left: 0.6rem;
  position: absolute;
  top: 0.6rem;
}

.pi-badge {
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.6rem;
  text-transform: uppercase;
}

.pi-badge--baladna { background: var(--pi-gold); color: #1b0d09; }
.pi-badge--palestine { background: rgba(140, 22, 28, 0.9); color: #fff; }
.pi-badge--sale { background: #c29a53; color: #1b0d09; animation: pi-pulse-sale 2s ease-in-out infinite; }

@keyframes pi-pulse-sale {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.pi-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem 1.1rem;
}

.pi-card__cat {
  color: var(--pi-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pi-card__title {
  color: var(--pi-paper);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pi-card__price {
  color: var(--pi-paper);
  font-weight: 700;
  margin-top: auto;
  padding-top: 0.4rem;
}

.pi-card__price-sale {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.pi-card__price-orig {
  color: rgba(248, 245, 241, 0.6);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pi-gold);
}

.pi-card__price-new {
  color: var(--pi-gold);
  font-size: 1.15rem;
  font-weight: 800;
}

.pi-card__oos { color: #d98b8b; font-size: 0.8rem; font-weight: 700; }

.pi-card__ph {
  align-items: center;
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(194, 154, 83, 0.16), transparent 70%),
    #170706;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  justify-content: center;
}
.pi-card__ph-mark {
  color: var(--pi-gold);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  opacity: 0.85;
}
.pi-card__ph-note {
  color: rgba(248, 245, 241, 0.5);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Detail modal --- */
.pi-modal {
  background: rgba(8, 3, 2, 0.82);
  display: none;
  inset: 0;
  padding: clamp(1rem, 4vw, 3rem);
  position: fixed;
  z-index: 2000;
  overflow-y: auto;
}

.pi-modal.is-open { display: grid; place-items: start center; }

.pi-modal__panel {
  background: #1a0a08;
  border: 1px solid rgba(194, 154, 83, 0.3);
  border-radius: 14px;
  display: grid;
  gap: 0;
  grid-template-columns: 1.1fr 1fr;
  max-width: 1000px;
  overflow: hidden;
  width: 100%;
  margin: auto;
}

.pi-modal__media { background: #0c0403; min-height: 320px; }
.pi-modal__media img { height: 100%; max-height: 560px; object-fit: cover; width: 100%; }

.pi-modal__body { padding: clamp(1.4rem, 3vw, 2.4rem); }
.pi-modal__body h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.05;
  margin: 0.4rem 0 0.6rem;
}
.pi-modal__price { color: var(--pi-gold); font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.pi-modal__desc {
  color: rgba(248, 245, 241, 0.8);
  font-size: 0.98rem;
  line-height: 1.6;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-line;
}
.pi-modal__thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.pi-modal__thumbs img {
  border: 1px solid rgba(194, 154, 83, 0.3); border-radius: 6px;
  cursor: pointer; height: 56px; object-fit: cover; width: 56px;
}
.pi-modal__note {
  background: rgba(194, 154, 83, 0.12); border-radius: 8px; color: var(--pi-gold);
  font-size: 0.85rem; font-weight: 600; margin-top: 1.2rem; padding: 0.7rem 0.9rem;
}
.pi-modal__close {
  background: rgba(255,255,255,0.1); border: 0; border-radius: 50%; color: #fff;
  cursor: pointer; font-size: 1.4rem; height: 40px; line-height: 1; position: absolute;
  right: 1rem; top: 1rem; width: 40px; z-index: 2;
}

@media (max-width: 720px) {
  .pi-modal__panel { grid-template-columns: 1fr; }
  .pi-modal__media { min-height: 240px; }
}

@keyframes pi-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-45%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pi-photo--large {
    animation: pi-breathe 8s ease-in-out infinite alternate;
  }

  .pi-photo--small {
    animation: pi-breathe 9s ease-in-out infinite alternate-reverse;
  }
}

@keyframes pi-breathe {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -10px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pi-marquee div,
  .pi-photo--large,
  .pi-photo--small {
    animation: none;
  }

  .pi-button,
  .pi-collection img {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .pi-hero,
  .pi-story,
  .pi-featured-layout,
  .pi-notes,
  .pi-retail,
  .pi-shop-layout,
  .pi-category-stage,
  .pi-category-story,
  .pi-video-feature__inner,
  .pi-admin-shell {
    grid-template-columns: 1fr;
  }

  .pi-hero__visual {
    min-height: 460px;
  }

  .pi-collection-grid,
  .pi-live-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pi-featured-copy {
    position: static;
  }

  .pi-retail__actions {
    margin-top: 0;
  }

  .pi-shop-aside {
    position: static;
  }

  .pi-category-stage {
    min-height: auto;
  }

  .pi-stage-gallery {
    min-height: 440px;
  }
}

@media (max-width: 767px) {
  .premium-nav {
    padding: 0.6rem 0;
  }

  .premium-nav .navbar-collapse {
    background: rgba(22, 7, 6, 0.96);
    border: 1px solid var(--pi-line);
    border-radius: 8px;
    margin-top: 0.8rem;
    padding: 0.9rem;
  }

  .premium-nav__links {
    align-items: flex-start;
  }

  .premium-cart {
    margin-top: 0.8rem;
  }

  .pi-hero {
    min-height: auto;
    padding-top: 6.5rem;
  }

  .pi-hero h1 {
    font-size: clamp(2.75rem, 13vw, 3.45rem);
    line-height: 1.02;
  }

  .pi-hero__visual {
    min-height: 380px;
  }

  .pi-photo--large {
    inset: 0 0 18% 0;
  }

  .pi-photo--small {
    height: 38%;
    width: 50%;
  }

  .pi-section__header,
  .pi-collection-grid,
  .pi-live-products,
  .pi-product-embeds,
  .pi-admin-grid {
    grid-template-columns: 1fr;
  }

  .pi-admin-grid .wide {
    grid-column: auto;
  }

  .pi-category-stage h1,
  .pi-video-feature h1 {
    font-size: clamp(2.6rem, 12vw, 3.6rem);
    line-height: 1.02;
  }

  .pi-stage-gallery {
    min-height: 360px;
  }

  .pi-story__image {
    min-height: 360px;
  }

  .pi-note-list a {
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .pi-actions,
  .pi-retail__actions {
    display: grid;
  }

  .pi-button {
    width: 100%;
  }

  .pi-seal {
    height: 106px;
    width: 106px;
  }
}

/* ===== Public content sections (events / recipes / videos / blogs) ===== */
.pi-content-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.pi-content-grid--vid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pi-content-empty {
  color: rgba(22, 7, 6, 0.55);
  font-size: 1.05rem;
  font-style: italic;
  padding: 2rem 0;
  text-align: center;
}
.premium-home .pi-content-empty { color: rgba(248, 245, 241, 0.6); }

/* Shared card shell */
.pi-evt, .pi-rec, .pi-vid, .pi-blog {
  background: #1f0b08;
  border: 1px solid rgba(194, 154, 83, 0.22);
  border-radius: 12px;
  color: var(--pi-paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.pi-evt:hover, .pi-rec:hover, .pi-vid:hover, .pi-blog:hover {
  border-color: rgba(194, 154, 83, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
}
.pi-evt--featured { border-color: var(--pi-gold); }

.pi-evt__media, .pi-rec__media, .pi-blog__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #160706;
}
.pi-evt__media img, .pi-rec__media img, .pi-blog__media img {
  height: 100%; width: 100%; object-fit: cover;
}
.pi-rec__media--ph { align-items: center; display: flex; justify-content: center; font-size: 2.6rem; opacity: 0.5; }

.pi-evt__body, .pi-rec__body, .pi-vid__body, .pi-blog__body { padding: 1.1rem 1.2rem 1.3rem; }

.pi-evt__date, .pi-blog__date {
  color: var(--pi-gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pi-evt__title, .pi-rec__title, .pi-vid__title, .pi-blog__title {
  color: var(--pi-paper);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  margin: 0.4rem 0 0.5rem;
}
.pi-evt__loc { color: rgba(248, 245, 241, 0.75); font-size: 0.9rem; margin: 0 0 0.4rem; }
.pi-evt__desc, .pi-rec__desc, .pi-vid__desc, .pi-blog__excerpt {
  color: rgba(248, 245, 241, 0.78);
  font-size: 0.95rem;
  margin: 0;
}

/* Recipe / blog expandable details */
.pi-rec__det { margin-top: 0.7rem; border-top: 1px solid rgba(194, 154, 83, 0.18); padding-top: 0.6rem; }
.pi-rec__det summary {
  color: var(--pi-gold);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.pi-rec__det ul { margin: 0.6rem 0 0; padding-left: 1.1rem; color: rgba(248, 245, 241, 0.85); font-size: 0.92rem; }
.pi-rec__det li { margin-bottom: 0.25rem; }
.pi-rec__det p { color: rgba(248, 245, 241, 0.85); font-size: 0.92rem; margin: 0.6rem 0 0; white-space: pre-line; }

/* Videos */
.pi-vid__thumb {
  border: 0; cursor: pointer; display: block; padding: 0; position: relative; width: 100%;
  aspect-ratio: 16 / 9; background: #000; overflow: hidden;
}
.pi-vid__thumb img { height: 100%; width: 100%; object-fit: cover; opacity: 0.9; transition: opacity 240ms ease, transform 600ms ease; }
.pi-vid__thumb:hover img { opacity: 1; transform: scale(1.05); }
.pi-vid__play {
  align-items: center; background: rgba(194, 154, 83, 0.92); border-radius: 50%;
  color: #160706; display: flex; font-size: 1.4rem; height: 64px; justify-content: center;
  left: 50%; padding-left: 4px; position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 64px; transition: transform 220ms ease;
}
.pi-vid__thumb:hover .pi-vid__play { transform: translate(-50%, -50%) scale(1.1); }
.pi-vid__frame { aspect-ratio: 16 / 9; border: 0; display: block; width: 100%; }

/* ============================================================
   NOIR & EMBER — warm gold-bordered shop grid (Option 2)
   Upgrades the shared .pi-card so every category page + the
   homepage featured row reads like a premium menu: warm ember
   tones, a thin gold frame on every card, price as a gold chip,
   and flanking-line section headings.
   ============================================================ */

/* Warmer ember card with a permanent gold hairline frame */
.pi-card {
  background: linear-gradient(180deg, #241712 0%, #18100c 100%);
  border: 1px solid rgba(194, 154, 83, 0.42);
  border-radius: 14px;
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.85);
}

.pi-card:hover {
  border-color: rgba(194, 154, 83, 0.95);
  box-shadow:
    0 34px 64px -34px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(194, 154, 83, 0.35),
    0 0 46px -18px rgba(194, 154, 83, 0.38);
}

/* Inset the image so the gold frame wraps a rounded photo (menu-card look) */
.pi-card__media {
  aspect-ratio: 1 / 1;
  margin: 0.55rem 0.55rem 0;
  border-radius: 10px;
  border: 1px solid rgba(194, 154, 83, 0.18);
}

.pi-card__body {
  gap: 0.45rem;
  padding: 0.75rem 0.9rem 0.95rem;
}

/* Category as a gold flanked eyebrow */
.pi-card__cat {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}
.pi-card__cat::after {
  background: linear-gradient(90deg, rgba(194, 154, 83, 0.6), transparent);
  content: "";
  flex: 1;
  height: 1px;
}

/* Price becomes a solid gold chip, pinned to the row end */
.pi-card__price {
  align-self: flex-start;
  background: var(--pi-gold);
  border-radius: 999px;
  color: #1b0d09;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-top: auto;
  padding: 0.28rem 0.72rem;
}

.pi-card__price-sale {
  align-items: center;
  gap: 0.55rem;
}
.pi-card__price-new {
  background: var(--pi-gold);
  border-radius: 999px;
  color: #1b0d09;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.28rem 0.72rem;
}

/* Flanking-line section headings on category/shop pages */
.premium-page .pi-section__header .pi-kicker,
.pi-category-products + * .pi-kicker {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
}
.premium-page .pi-section__header .pi-kicker::before {
  background: linear-gradient(90deg, transparent, rgba(194, 154, 83, 0.7));
  content: "";
  height: 1px;
  width: 32px;
}
.premium-page .pi-section__header .pi-kicker::after {
  background: linear-gradient(90deg, rgba(194, 154, 83, 0.7), transparent);
  content: "";
  height: 1px;
  width: 32px;
}

/* Make category product sections sit on the warm ember canvas */
.premium-page #food-products.pi-section--light,
.premium-page .pi-category-products {
  background: radial-gradient(120% 90% at 50% -10%, #2a160f 0%, transparent 55%),
    linear-gradient(180deg, #160d09 0%, #1d0f0a 100%);
  color: var(--pi-paper);
}
.premium-page #food-products.pi-section--light .pi-section__header h2 {
  color: var(--pi-paper);
}
.premium-page #food-products.pi-section--light .pi-section__header p:not(.pi-kicker) {
  color: rgba(248, 245, 241, 0.74);
}

/* ============================================================
   UNIFIED NOCTURNE — every inner page joins the same warm
   ember, cinematic, gold-disciplined world as the homepage.
   This single block flips .premium-page from the old light
   "paper" theme to the dark luxury system, so all pages share
   one consistent UI (Options 2 + 3 blended).
   ============================================================ */

.premium-page {
  background:
    radial-gradient(120% 80% at 50% -8%, #2a130d 0%, transparent 52%),
    #160d09;
  color: var(--pi-paper);
}

/* Main wrapper + first-section: drop the forced paper, go ember */
.premium-page .pi-page-main {
  background: transparent;
  color: var(--pi-paper);
}

.premium-page > section:first-of-type,
.premium-page .pi-section--light,
.premium-page .pi-category-intro,
.premium-page .pi-search-shell {
  background:
    radial-gradient(120% 90% at 50% -10%, #2a160f 0%, transparent 55%),
    linear-gradient(180deg, #160d09 0%, #1d0f0a 100%) !important;
  color: var(--pi-paper) !important;
}

.premium-page > section:first-of-type h1,
.premium-page .pi-section--light h2,
.premium-page .pi-section--light h3,
.premium-page .pi-category-intro h1,
.premium-page .pi-page-strip,
.premium-page .pi-notes h2 {
  color: var(--pi-paper) !important;
}

.premium-page .pi-section--light p:not(.pi-kicker),
.premium-page .pi-category-intro p,
.premium-page .pi-notes p {
  color: rgba(248, 245, 241, 0.76) !important;
}

/* Note-list links to gold-on-dark */
.premium-page .pi-note-list,
.premium-page .pi-note-list a {
  border-color: var(--pi-line);
  color: var(--pi-paper);
}
.premium-page .pi-note-list a:hover {
  color: var(--pi-gold);
}

/* --- Cinematic page hero (Option 3): deeper scrim, gold serif --- */
.premium-page .pi-page-hero {
  background:
    linear-gradient(180deg, rgba(15, 8, 6, 0.18) 0%, rgba(15, 8, 6, 0.55) 52%, #160d09 100%),
    linear-gradient(90deg, rgba(22, 7, 6, 0.7), rgba(22, 7, 6, 0.2)),
    var(--hero-image, url("../img/zaatar.jpeg")) center / cover no-repeat;
  align-items: end;
  min-height: clamp(480px, 72vh, 700px);
}
.premium-page .pi-page-hero .pi-kicker {
  color: var(--pi-gold);
}
.premium-page .pi-page-hero h1 {
  color: #f3ead9 !important;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

/* --- Light surfaces → ember cards with gold hairline --- */
.premium-page .pi-collection,
.premium-page .pi-form-card,
.premium-page .pi-info-card,
.premium-page .pi-retailer-card,
.premium-page .pi-calendar-shell,
.premium-page .pi-shop-panel,
.premium-page .pi-shop-aside,
.premium-page .simple-slider {
  background: linear-gradient(180deg, #241712 0%, #18100c 100%) !important;
  border-color: rgba(194, 154, 83, 0.32) !important;
  color: var(--pi-paper) !important;
}

.premium-page .pi-collection span { color: var(--pi-gold); }
.premium-page .pi-collection strong,
.premium-page .pi-retailer-card h3,
.premium-page .pi-shop-aside h2 { color: var(--pi-paper); }
.premium-page .pi-shop-aside a {
  border-color: var(--pi-line);
  color: var(--pi-paper);
}
.premium-page .pi-shop-aside a:hover { color: var(--pi-gold); }

/* --- Forms on dark: ember fields, gold focus --- */
.premium-page .form-control {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(194, 154, 83, 0.3);
  color: var(--pi-paper);
}
.premium-page .form-control::placeholder { color: rgba(248, 245, 241, 0.45); }
.premium-page .form-control:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--pi-gold);
}
.premium-page label,
.premium-page .form-label { color: rgba(248, 245, 241, 0.85); }

/* --- Category intro flank kicker on inner pages too --- */
.premium-page .pi-category-intro .pi-kicker,
.premium-page .pi-notes .pi-kicker {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
}
.premium-page .pi-category-intro .pi-kicker::after,
.premium-page .pi-notes .pi-kicker::after {
  background: linear-gradient(90deg, rgba(194, 154, 83, 0.7), transparent);
  content: "";
  height: 1px;
  width: 32px;
}

/* ============================================================
   CINEMATIC HERO (Option 3) — full-bleed photographed homepage
   opener: a darkened food image, gold spotlight, cream-gold
   serif headline on the left, the hero bottle floating right.
   ============================================================ */
.pi-cinema {
  align-items: center;
  background: #0f0805;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(8rem, 12vw, 11rem) clamp(1.25rem, 5vw, 5.5rem) clamp(4rem, 8vw, 7rem);
  position: relative;
}

.pi-cinema::before {
  background: var(--cinema-img) center / cover no-repeat;
  content: "";
  inset: 0;
  opacity: 0.55;
  position: absolute;
  transform: scale(1.04);
}

.pi-cinema__scrim {
  inset: 0;
  position: absolute;
  background:
    radial-gradient(64% 58% at 74% 42%, rgba(194, 154, 83, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(15, 8, 5, 0.5) 0%, rgba(15, 8, 5, 0.3) 38%, #160d09 100%),
    linear-gradient(90deg, rgba(15, 8, 5, 0.9) 0%, rgba(15, 8, 5, 0.45) 52%, transparent 100%);
}

.pi-cinema__copy {
  max-width: 680px;
  position: relative;
  z-index: 2;
}

.pi-cinema h1 {
  color: #f3ead9;
  font-size: clamp(3.2rem, 7.6vw, 6rem);
  margin: 1rem 0 1.4rem;
  text-shadow: 0 4px 50px rgba(0, 0, 0, 0.55);
}

.pi-cinema__lead {
  color: rgba(248, 245, 241, 0.86);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.62;
  max-width: 60ch;
}

.pi-cinema .pi-trust {
  border-top-color: rgba(248, 245, 241, 0.2);
  color: rgba(248, 245, 241, 0.78);
}

/* Floating hero object — bottle on a gold pool of light */
.pi-cinema__stage {
  align-self: center;
  display: grid;
  min-height: 540px;
  place-items: center;
  position: relative;
  z-index: 2;
}

.pi-cinema__glow {
  background: radial-gradient(circle, rgba(194, 154, 83, 0.45), transparent 64%);
  border-radius: 50%;
  filter: blur(6px);
  height: 76%;
  position: absolute;
  width: 80%;
}

.pi-cinema__object {
  aspect-ratio: 3 / 4.1;
  border: 1px solid rgba(194, 154, 83, 0.45);
  border-radius: 16px;
  box-shadow:
    0 70px 100px -34px rgba(0, 0, 0, 0.85),
    0 0 80px -14px rgba(194, 154, 83, 0.34);
  height: min(78%, 470px);
  margin: 0;
  overflow: hidden;
  position: relative;
}

.pi-cinema__object img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pi-cinema__object::after {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 44%);
  content: "";
  inset: 0;
  position: absolute;
}

.pi-cinema__seal {
  align-items: center;
  background: var(--pi-gold);
  border-radius: 50%;
  bottom: 4%;
  box-shadow: 0 24px 44px -18px rgba(194, 154, 83, 0.8);
  color: #1b0d09;
  display: flex;
  flex-direction: column;
  font-family: "Fraunces", Georgia, serif;
  height: clamp(104px, 11vw, 138px);
  justify-content: center;
  left: 2%;
  line-height: 1.15;
  position: absolute;
  text-align: center;
  width: clamp(104px, 11vw, 138px);
  z-index: 3;
}

.pi-cinema__seal strong {
  color: #7a1410;
  font-size: 0.78rem;
  margin-top: 0.3rem;
}

@media (prefers-reduced-motion: no-preference) {
  .pi-cinema__object { animation: pi-turn 9s ease-in-out infinite alternate; }
}

/* --- Centered editorial hero (Olive Nocturne layout) --- */
.pi-cinema--center {
  display: block;
  min-height: clamp(640px, 94vh, 900px);
  padding: clamp(9rem, 16vw, 12.5rem) clamp(1.25rem, 5vw, 5.5rem) clamp(5rem, 9vw, 8rem);
  place-items: unset;
  text-align: center;
}
.pi-cinema--center .pi-cinema__copy {
  margin: 0 auto;
  max-width: 900px;
}
.pi-cinema--center .pi-kicker {
  align-items: center;
  display: inline-flex;
  gap: 0.85rem;
  justify-content: center;
}
.pi-cinema--center .pi-kicker::before,
.pi-cinema--center .pi-kicker::after {
  background: var(--pi-gold);
  content: "";
  height: 1px;
  opacity: 0.6;
  width: 46px;
}
.pi-cinema--center h1 {
  font-size: clamp(3.4rem, 8.4vw, 6.6rem);
  margin-inline: auto;
}
.pi-cinema--center .pi-cinema__lead {
  margin: 1.6rem auto 0;
  max-width: 56ch;
}
.pi-cinema--center .pi-actions {
  justify-content: center;
  margin-top: 2.4rem;
}
.pi-cinema--center .pi-trust {
  border-top: 0;
  color: rgba(239, 230, 211, 0.7);
  justify-content: center;
  margin-top: 2.4rem;
}
/* Even, readable scrim for centred text over the full-bleed photo */
.pi-cinema--center .pi-cinema__scrim {
  background:
    radial-gradient(70% 62% at 50% 42%, rgba(194, 154, 83, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(13, 9, 5, 0.74) 0%, rgba(13, 9, 5, 0.6) 46%, #160d09 100%);
}
.pi-cinema--center::before { opacity: 0.6; }

@media (max-width: 1100px) {
  .pi-cinema {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(7rem, 16vw, 9rem);
  }
  .pi-cinema__stage { min-height: 420px; order: -1; }
  .pi-cinema__scrim {
    background:
      linear-gradient(180deg, rgba(15, 8, 5, 0.55), rgba(15, 8, 5, 0.35) 40%, #160d09 100%);
  }
}

@media (max-width: 767px) {
  .pi-cinema h1 { font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .pi-cinema__stage { min-height: 340px; }
}

/* ============================================================
   PREMIUM POLISH — the details that read as "expensive":
   centered headings flanked by gold rules (like the refs),
   a richer hero photo, deeper card depth, refined spacing.
   ============================================================ */

/* 1. Centered section headers with gold flanking lines — the
      single most "reference-like" signature across all 3 looks. */
.pi-section__header {
  grid-template-columns: 1fr;
  justify-items: center;
  margin-inline: auto;
  max-width: 780px;
  text-align: center;
}
.pi-section__header > div { max-width: 700px; }

.pi-section__header .pi-kicker {
  align-items: center;
  display: inline-flex;
  gap: 0.8rem;
}
.pi-section__header .pi-kicker::before,
.pi-section__header .pi-kicker::after {
  background: var(--pi-gold);
  content: "";
  height: 1px;
  opacity: 0.55;
  width: 44px;
}

/* 2. Hero photo reads richer — less crushing scrim on the left */
.pi-cinema::before { opacity: 0.64; }
.pi-cinema__scrim {
  background:
    radial-gradient(64% 58% at 74% 42%, rgba(194, 154, 83, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(15, 8, 5, 0.42) 0%, rgba(15, 8, 5, 0.26) 38%, #160d09 100%),
    linear-gradient(90deg, rgba(15, 8, 5, 0.82) 0%, rgba(15, 8, 5, 0.34) 54%, transparent 100%);
}

/* 3. Cards: more breathing room + deeper, softer depth */
.pi-card-grid {
  gap: clamp(1.25rem, 2.2vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.pi-card { box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.9); }

/* 4. A hairline gold rule under the marquee/world transitions for rhythm */
.premium-home .pi-section--light,
.premium-page .pi-section--light,
.pi-category-products {
  position: relative;
}

/* 5. Slightly larger, more confident body lead spacing */
.pi-section {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5.5rem);
}

/* 6. Collection tiles: richer caption spacing + gold hover frame */
.premium-home .pi-collection,
.premium-page .pi-collection {
  border-radius: 12px;
}
.pi-collection strong { letter-spacing: -0.01em; }

/* 7. Gold focus discipline — refined link underlines on text links */
.pi-text-link {
  letter-spacing: 0.01em;
  padding-bottom: 2px;
  position: relative;
}
.pi-text-link::after {
  background: var(--pi-gold);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 0;
}
.pi-text-link:hover::after { width: 100%; }

/* ============================================================
   REFERENCE-GRADE PASS — candlelit warmth, cohesive imagery,
   composed spacing. Targets all four felt gaps at once:
   photos · layout · colour richness · type.
   ============================================================ */

/* ---------- (1) PHOTOS: unify a mixed catalogue ----------
   A consistent vignette + warm wash over every product image
   so white-background shots, lifestyle photos and placeholders
   read as one cohesive, lit collection. */
.pi-card__media { background: #1a0f0a; }
.pi-card__badges { z-index: 3; }
.pi-card__media::after {
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(22, 9, 6, 0.42) 100%),
    linear-gradient(180deg, rgba(22, 9, 6, 0) 62%, rgba(22, 9, 6, 0.5) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  box-shadow: inset 0 0 50px -12px rgba(0, 0, 0, 0.55);
}
/* White-background product shots: warm them slightly so they
   don't glare against the dark cards. */
.pi-card__media img { filter: saturate(1.04) contrast(1.02) brightness(0.98); }

/* Collection + chapter imagery gets the same cohesive vignette */
.pi-collection,
.pi-chapter__media,
.pi-story__image { position: relative; }
.pi-collection img { position: relative; }
.pi-chapter__media::after,
.pi-story__image::after {
  background: linear-gradient(180deg, transparent 58%, rgba(22, 9, 6, 0.55));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* ---------- (3) COLOUR & RICHNESS: candlelit depth ----------
   A soft fixed vignette gives the whole page a lit-from-within,
   shot-in-a-dark-room feel without touching readability. */
.premium-home::before,
.premium-page::before {
  background:
    radial-gradient(100% 60% at 50% -8%, rgba(194, 154, 83, 0.10), transparent 60%),
    radial-gradient(120% 90% at 50% 120%, rgba(74, 8, 10, 0.45), transparent 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}
.premium-home > nav,
.premium-home > main,
.premium-home > footer,
.premium-page > nav,
.premium-page > main,
.premium-page > footer { position: relative; z-index: 1; }

/* Warm, layered transitions between the dark worlds + a gold
   hairline at every section seam for editorial rhythm. */
.pi-section--dark,
.pi-catalog,
.pi-video-feature,
.premium-home .pi-section--light,
.premium-page .pi-section--light {
  border-top: 1px solid rgba(194, 154, 83, 0.14);
}
.pi-section--dark {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(194, 154, 83, 0.08), transparent 55%),
    linear-gradient(160deg, #190907 0%, #320f0b 52%, #190907 100%);
}

/* ---------- (2) LAYOUT & SPACING: composed, generous ----------
   More air around headings, a touch more scale to the canvas. */
.pi-section__header { margin-bottom: clamp(2.75rem, 6vw, 5rem); }
.pi-collection-grid,
.pi-card-grid { gap: clamp(1.4rem, 2.4vw, 2.1rem); }
.pi-card-grid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

/* ---------- (4) TYPOGRAPHY: editorial refinement ----------
   High-contrast serif already; add depth on dark + finesse. */
.premium-home h1,
.premium-home h2,
.premium-page h1,
.premium-page h2 {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.pi-section__header h2 { letter-spacing: -0.02em; }
.pi-kicker { color: #d3ad63; }

/* Olive Nocturne — italic display accent + refined large-display weight */
.premium-home h1 em,
.premium-page h1 em,
.pi-cinema h1 em {
  font-style: italic;
  font-weight: 400;
}
.pi-cinema h1,
.pi-category-stage h1,
.pi-page-hero h1 {
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ============================================================
   2026 STOREFRONT REBUILD
   A sharper, product-first palette and interface pass for the
   whole static site. Kept as final overrides so existing pages,
   catalog data, checkout, forms, and public content keep working.
   ============================================================ */

.premium-home,
.premium-page {
  --pi-ink: oklch(17% 0.045 218);
  --pi-ink-soft: oklch(24% 0.052 205);
  --pi-paper: oklch(98% 0.004 210);
  --pi-paper-deep: oklch(92% 0.018 190);
  --pi-surface: oklch(99% 0.003 210);
  --pi-cobalt: oklch(42% 0.13 230);
  --pi-cobalt-bright: oklch(61% 0.13 218);
  --pi-olive: oklch(44% 0.086 132);
  --pi-gold: oklch(75% 0.118 76);
  --pi-pomegranate: oklch(48% 0.152 27);
  --pi-red-deep: oklch(28% 0.104 28);
  --pi-line: oklch(96% 0.008 210 / 0.2);
  --pi-dark-line: oklch(17% 0.045 218 / 0.14);
  --pi-shadow: oklch(14% 0.036 218 / 0.24);
  color: var(--pi-ink);
  font-family: "Afacad", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.56;
}

.premium-home {
  background: var(--pi-ink);
  color: var(--pi-paper);
}

.premium-page {
  background:
    linear-gradient(180deg, var(--pi-paper) 0%, var(--pi-paper-deep) 54%, var(--pi-paper) 100%);
}

.premium-home::before,
.premium-page::before {
  display: none;
}

.premium-home h1,
.premium-home h2,
.premium-page h1,
.premium-page h2,
.premium-brand,
.premium-page #mainNav .navbar-brand,
footer .fw-bold span:last-child {
  font-family: "Bodoni Moda", Georgia, "Times New Roman", serif !important;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.premium-home h1,
.premium-page h1 {
  max-width: 12ch;
}

.premium-home h2,
.premium-page h2 {
  max-width: 14ch;
}

.premium-home h1,
.premium-home h2,
.premium-page h1,
.premium-page h2 {
  line-height: 0.95;
  text-shadow: none;
}

.premium-home h3,
.premium-page h3 {
  color: inherit;
  font-family: "Afacad", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}

.premium-home p,
.premium-page p {
  max-width: 68ch;
}

.pi-kicker {
  align-items: center;
  color: var(--pi-cobalt-bright);
  display: inline-flex;
  font-family: "Afacad", system-ui, sans-serif;
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  font-weight: 700;
  gap: 0.55rem;
  letter-spacing: 0.025em;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-transform: none;
}

.pi-kicker::before,
.pi-kicker::after,
.pi-section__header .pi-kicker::before,
.pi-section__header .pi-kicker::after,
.pi-cinema--center .pi-kicker::before,
.pi-cinema--center .pi-kicker::after {
  display: none;
}

.pi-kicker::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 0.55rem;
  width: 0.55rem;
}

.pi-button,
.premium-page .btn-primary,
.premium-home .btn-primary,
.pi-cat-chip,
.premium-cart,
.premium-page [data-reflow-type="view-cart"] {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-family: "Afacad", system-ui, sans-serif !important;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0;
  min-height: 44px;
  text-decoration: none !important;
  transition:
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pi-button:hover,
.premium-page .btn-primary:hover,
.premium-home .btn-primary:hover,
.pi-cat-chip:hover,
.premium-cart:hover,
.premium-page [data-reflow-type="view-cart"]:hover {
  transform: translateY(-2px);
}

.pi-button--primary,
.premium-page .btn-primary,
.premium-home .btn-primary {
  background: var(--pi-gold);
  border: 0;
  color: var(--pi-ink) !important;
  padding: 0.78rem 1.18rem;
}

.pi-button--primary:hover,
.premium-page .btn-primary:hover,
.premium-home .btn-primary:hover {
  background: var(--pi-cobalt);
  color: white !important;
}

.pi-button--ghost {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit !important;
  padding: 0.72rem 1.14rem;
}

.pi-button--ghost:hover {
  background: var(--pi-cobalt);
  border-color: var(--pi-cobalt);
  color: white !important;
}

.premium-home #mainNav.premium-nav,
.premium-home #mainNav.premium-nav.navbar-shrink,
.premium-page #mainNav,
.premium-page #mainNav.navbar-shrink {
  background: oklch(17% 0.045 218 / 0.92) !important;
  border-bottom: 1px solid oklch(95% 0.01 210 / 0.16);
  box-shadow: none;
  color: var(--pi-paper);
  padding: 0.78rem 0;
}

.premium-home #mainNav.premium-nav .premium-nav__inner,
.premium-page #mainNav .container {
  max-width: 1320px;
}

.premium-brand,
.premium-page #mainNav .navbar-brand {
  color: var(--pi-paper) !important;
  font-size: clamp(1.02rem, 1.8vw, 1.36rem);
  gap: 0.62rem;
  white-space: nowrap;
}

.premium-brand img {
  background: var(--pi-paper);
  border-radius: 999px;
  height: 38px;
  padding: 3px;
  width: 38px;
}

.premium-page #mainNav .navbar-brand::before {
  background: var(--pi-paper) url("../img/logo-3.png") center / 82% auto no-repeat;
  border-radius: 999px;
  content: "";
  display: inline-block;
  flex: 0 0 36px;
  height: 36px;
  width: 36px;
}

.premium-nav__links,
.premium-page #mainNav .navbar-nav {
  gap: clamp(0.12rem, 0.7vw, 0.5rem);
}

.premium-page #mainNav .nav-item:empty {
  display: none;
}

.premium-nav .nav-link,
.premium-page #mainNav .nav-link {
  border-radius: 999px;
  color: oklch(96% 0.006 210 / 0.76) !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.38rem 0.62rem !important;
}

.premium-nav .nav-link:hover,
.premium-nav .nav-link:focus,
.premium-nav .nav-link.active,
.premium-page #mainNav .nav-link:hover,
.premium-page #mainNav .nav-link:focus,
.premium-page #mainNav .nav-link.active {
  background: oklch(42% 0.13 230 / 0.38);
  color: white !important;
}

.premium-cart,
.premium-page [data-reflow-type="view-cart"] {
  background: var(--pi-paper);
  border: 0;
  color: var(--pi-ink) !important;
  min-height: 40px;
  padding: 0.45rem 0.9rem;
}

.premium-toggler,
.premium-page #mainNav .navbar-toggler {
  border: 1px solid oklch(96% 0.006 210 / 0.36);
  border-radius: 999px;
}

.premium-toggler:focus,
.premium-page #mainNav .navbar-toggler:focus {
  box-shadow: 0 0 0 0.18rem oklch(75% 0.118 76 / 0.4);
}

.premium-page #mainNav .navbar-toggler-icon,
.premium-home #mainNav .navbar-toggler-icon {
  filter: invert(1);
}

.pi-cinema.pi-cinema--center {
  background:
    linear-gradient(90deg, oklch(17% 0.045 218 / 0.9) 0%, oklch(17% 0.045 218 / 0.62) 38%, oklch(17% 0.045 218 / 0.18) 74%),
    var(--cinema-img) center bottom / cover no-repeat;
  display: grid;
  min-height: clamp(720px, 94svh, 980px);
  padding: clamp(7.4rem, 11vw, 10rem) clamp(1.25rem, 6vw, 6rem) clamp(2.8rem, 7vw, 6rem);
  place-items: end start;
  text-align: left;
}

.pi-cinema.pi-cinema--center::before {
  display: none;
}

.pi-cinema--center .pi-cinema__scrim {
  background:
    linear-gradient(180deg, oklch(17% 0.045 218 / 0.28) 0%, transparent 32%, oklch(17% 0.045 218 / 0.88) 100%);
}

.pi-cinema--center .pi-cinema__copy {
  margin: 0;
  max-width: min(720px, 94vw);
}

.pi-cinema--center h1 {
  font-size: clamp(3rem, 7.4vw, 6rem);
  margin-inline: 0;
  max-width: 10.5ch;
}

.pi-cinema--center .pi-cinema__lead {
  color: oklch(97% 0.004 210 / 0.9);
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  line-height: 1.62;
  margin: 1.35rem 0 0;
  max-width: 56ch;
}

.pi-cinema--center .pi-actions {
  justify-content: flex-start;
  margin-top: 2rem;
}

.pi-cinema--center .pi-trust {
  color: oklch(96% 0.004 210 / 0.82);
  justify-content: flex-start;
  margin-top: 2rem;
}

.pi-trust {
  border-top: 1px solid oklch(96% 0.006 210 / 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  padding-top: 1rem;
}

.pi-trust span {
  align-items: center;
  display: inline-flex;
  gap: 0.48rem;
}

.pi-trust span::before {
  background: var(--pi-gold);
  border-radius: 999px;
  content: "";
  height: 0.42rem;
  width: 0.42rem;
}

.pi-marquee {
  background: var(--pi-cobalt);
  border: 0;
  color: white;
}

.pi-marquee span {
  color: white;
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
}

.pi-showcase {
  background:
    linear-gradient(90deg, oklch(17% 0.045 218 / 0.86), oklch(17% 0.045 218 / 0.42)),
    url("../img/baladna-lineup.jpg") center / cover no-repeat !important;
  min-height: clamp(560px, 76vh, 820px);
}

.pi-showcase__scrim {
  background: transparent;
}

.pi-showcase__copy {
  background: oklch(17% 0.045 218 / 0.78);
  border-radius: 8px;
  margin-left: clamp(1rem, 6vw, 6rem);
  max-width: 560px;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.pi-section,
.pi-catalog {
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5.5rem);
}

.pi-section--light,
.premium-home .pi-section--light,
.premium-page .pi-section--light,
.pi-catalog {
  background: var(--pi-paper);
  color: var(--pi-ink);
}

.pi-section--dark,
.premium-home .pi-section--dark,
.premium-page .pi-section--dark,
.pi-video-feature {
  background:
    linear-gradient(145deg, var(--pi-ink) 0%, var(--pi-cobalt) 58%, var(--pi-ink-soft) 100%);
  color: var(--pi-paper);
}

.pi-section--dark .pi-kicker,
.pi-video-feature .pi-kicker,
.premium-home .pi-kicker {
  color: var(--pi-gold);
}

.pi-section__header {
  align-items: end;
  display: grid;
  gap: clamp(1rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.88fr) minmax(260px, 0.52fr);
  justify-items: start;
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
  max-width: 1180px;
  text-align: left;
}

.pi-section__header > div {
  max-width: 760px;
}

.pi-section__header h2 {
  font-size: clamp(2.35rem, 5.4vw, 5.1rem);
  letter-spacing: -0.018em;
  margin-bottom: 0;
}

.pi-section__header > p,
.pi-section__header div + p {
  color: inherit;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.62;
  margin: 0;
  max-width: 44ch;
  opacity: 0.82;
}

.pi-collection-grid,
.pi-card-grid,
.pi-retailer-grid,
.pi-content-grid {
  gap: clamp(1rem, 2.3vw, 1.75rem);
}

.pi-collection,
.pi-card,
.pi-retailer-card,
.pi-form-card,
.pi-evt,
.pi-rec,
.pi-vid,
.pi-blog {
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 18px -16px var(--pi-shadow);
  overflow: hidden;
}

.pi-collection,
.pi-retailer-card,
.pi-form-card,
.pi-evt,
.pi-rec,
.pi-vid,
.pi-blog {
  background: var(--pi-surface);
  color: var(--pi-ink);
}

.pi-collection:hover,
.pi-card:hover,
.pi-retailer-card:hover,
.pi-evt:hover,
.pi-rec:hover,
.pi-vid:hover,
.pi-blog:hover {
  box-shadow: 0 12px 22px -18px oklch(14% 0.036 218 / 0.4);
  transform: translateY(-3px);
}

.pi-collection img,
.pi-chapter__media img,
.pi-story__image img,
.pi-evt__media img,
.pi-rec__media img,
.pi-blog__media img {
  filter: saturate(1.05) contrast(1.03);
}

.pi-collection span,
.pi-card__cat,
.pi-evt__date,
.pi-blog__date {
  color: var(--pi-cobalt);
  font-family: "Afacad", system-ui, sans-serif;
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.pi-collection strong {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.03;
}

.pi-chapters {
  background: var(--pi-ink);
  color: var(--pi-paper);
}

.pi-chapters__head {
  align-items: end;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.5fr);
  max-width: 1180px;
}

.pi-chapters__head h2 {
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
  max-width: 11ch;
}

.pi-chapters__head p {
  color: oklch(96% 0.006 210 / 0.78);
}

.pi-chapter {
  background: transparent;
  border-bottom: 1px solid oklch(96% 0.006 210 / 0.15);
  border-radius: 0;
  display: grid;
  gap: clamp(1.2rem, 4vw, 4rem);
  grid-template-columns: minmax(280px, 0.74fr) minmax(0, 0.66fr);
  padding: clamp(2.4rem, 5vw, 4.6rem) 0;
}

.pi-chapter__media {
  border-radius: 8px;
  overflow: hidden;
}

.pi-chapter__num {
  background: var(--pi-gold);
  border-radius: 999px;
  color: var(--pi-ink);
  display: inline-flex;
  font-family: "Afacad", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  height: 2.3rem;
  justify-content: center;
  line-height: 1;
  margin-bottom: 1rem;
  min-width: 2.3rem;
  padding-top: 0.68rem;
}

.pi-statement {
  background: var(--pi-gold);
  color: var(--pi-ink);
}

.pi-statement blockquote {
  color: var(--pi-ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.4rem, 6.5vw, 5.7rem);
  line-height: 0.98;
}

.pi-featured-layout,
.pi-notes,
.pi-local__inner,
.pi-faq__inner {
  max-width: 1180px;
}

.pi-note-list,
.pi-faq__list {
  border-radius: 8px;
}

.pi-page-main {
  background: var(--pi-paper);
  color: var(--pi-ink);
}

.pi-page-hero {
  background:
    linear-gradient(90deg, oklch(17% 0.045 218 / 0.86), oklch(17% 0.045 218 / 0.52), oklch(17% 0.045 218 / 0.18)),
    var(--hero-image) center / cover no-repeat !important;
  color: var(--pi-paper);
  min-height: clamp(520px, 72vh, 760px);
  padding: clamp(8rem, 14vw, 12rem) clamp(1.25rem, 5vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
}

.pi-page-hero__inner {
  margin: 0;
  max-width: 760px;
}

.pi-page-hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 5.7rem);
  max-width: 11ch;
}

.pi-page-hero p {
  color: oklch(97% 0.004 210 / 0.88);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.pi-page-strip {
  background: var(--pi-cobalt);
  color: white;
}

.pi-category-stage {
  background:
    linear-gradient(135deg, var(--pi-ink) 0%, var(--pi-cobalt) 58%, var(--pi-olive) 100%);
  color: var(--pi-paper);
  gap: clamp(2rem, 5vw, 5rem);
  min-height: clamp(640px, 92vh, 900px);
  padding: clamp(8rem, 13vw, 11rem) clamp(1.25rem, 5vw, 5.5rem) clamp(4rem, 7vw, 6rem);
}

.pi-category-stage h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.9rem);
  max-width: 11ch;
}

.pi-category-stage p:not(.pi-kicker),
.pi-video-feature p {
  color: oklch(97% 0.004 210 / 0.86);
}

.pi-category-proof {
  border-left: 0;
  display: grid;
  gap: 0.55rem;
  margin: 1.6rem 0 1.9rem;
  padding: 0;
}

.pi-category-proof span {
  align-items: start;
  color: oklch(97% 0.004 210 / 0.88);
  display: flex;
  gap: 0.55rem;
}

.pi-category-proof span::before {
  background: var(--pi-gold);
  border-radius: 999px;
  content: "";
  flex: 0 0 0.48rem;
  height: 0.48rem;
  margin-top: 0.55rem;
}

.pi-stage-gallery .simple-slider,
.pi-stage-gallery .swiper-container {
  background: oklch(98% 0.004 210 / 0.1);
  border-radius: 8px;
}

.pi-stage-gallery .swiper-slide {
  background-size: contain !important;
}

.pi-catalog__bar {
  align-items: center;
  background: var(--pi-surface);
  border-radius: 8px;
  box-shadow: 0 8px 18px -16px var(--pi-shadow);
  gap: 1rem;
  padding: 0.85rem;
}

.pi-cat-filters {
  gap: 0.45rem;
}

.pi-cat-chip {
  background: var(--pi-paper-deep);
  border: 0;
  color: var(--pi-ink);
  min-height: 38px;
  padding: 0.5rem 0.84rem;
}

.pi-cat-chip.is-active {
  background: var(--pi-cobalt);
  color: white;
}

.pi-cat-search,
.premium-page .form-control,
.premium-home .form-control {
  background: var(--pi-surface);
  border: 1px solid oklch(17% 0.045 218 / 0.16);
  border-radius: 8px;
  color: var(--pi-ink);
  font-family: "Afacad", system-ui, sans-serif;
  min-height: 46px;
}

.pi-cat-search::placeholder,
.premium-page .form-control::placeholder,
.premium-home .form-control::placeholder {
  color: oklch(34% 0.05 218 / 0.82);
}

.pi-cat-search:focus,
.premium-page .form-control:focus,
.premium-home .form-control:focus {
  border-color: var(--pi-cobalt);
  box-shadow: 0 0 0 0.18rem oklch(42% 0.13 230 / 0.18);
}

.pi-cat-count {
  color: oklch(31% 0.045 218 / 0.82);
  font-weight: 700;
  margin: 1rem 0 1.2rem;
}

.pi-card {
  background: var(--pi-surface);
  color: var(--pi-ink);
  text-align: left;
}

.pi-card__media {
  background:
    linear-gradient(145deg, var(--pi-paper-deep), white);
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
}

.pi-card__media::after,
.pi-chapter__media::after,
.pi-story__image::after {
  display: none;
}

.pi-card__media img {
  filter: saturate(1.03) contrast(1.02);
  object-fit: cover;
}

.pi-card__body {
  padding: 1rem 1rem 1.1rem;
}

.pi-card__title {
  color: var(--pi-ink);
  font-size: clamp(1.05rem, 1.45vw, 1.24rem);
  margin: 0.28rem 0 0.7rem;
}

.pi-card__price,
.pi-card__price-new,
.pi-modal__price {
  color: var(--pi-pomegranate);
  font-size: 1.08rem;
  font-weight: 900;
}

.pi-card__price-orig {
  color: oklch(35% 0.04 218 / 0.62);
}

.pi-badge {
  border-radius: 999px;
  font-family: "Afacad", system-ui, sans-serif;
  font-weight: 900;
}

.pi-badge--baladna {
  background: var(--pi-gold);
  color: var(--pi-ink);
}

.pi-badge--palestine {
  background: var(--pi-cobalt);
  color: white;
}

.pi-badge--sale {
  background: var(--pi-pomegranate);
  color: white;
}

.pi-modal {
  background: oklch(12% 0.04 218 / 0.78);
}

.pi-modal__panel {
  background: var(--pi-paper);
  border-radius: 8px;
  color: var(--pi-ink);
}

.pi-modal__body h2 {
  color: var(--pi-ink);
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.pi-modal__desc,
.pi-modal__note {
  color: oklch(28% 0.045 218 / 0.86);
}

.pi-modal__close {
  background: var(--pi-gold);
  color: var(--pi-ink);
}

.pi-form-grid {
  gap: clamp(1rem, 3vw, 1.6rem);
  max-width: 1180px;
}

.pi-form-card {
  padding: clamp(1.2rem, 3vw, 2rem);
}

.pi-form-card h2,
.pi-retail h2,
.pi-category-story h2 {
  color: var(--pi-ink);
  font-size: clamp(2rem, 4vw, 3.7rem);
}

.premium-page label,
.premium-home label {
  color: var(--pi-ink);
  font-weight: 800;
}

.pi-retail {
  background: var(--pi-cobalt);
  color: white;
}

.pi-retail .pi-kicker,
.pi-retail h2,
.pi-retail p {
  color: white;
}

.pi-retail__actions {
  align-items: center;
}

.pi-retailer-card h3,
.pi-evt__title,
.pi-rec__title,
.pi-vid__title,
.pi-blog__title {
  color: var(--pi-ink);
}

.pi-evt__desc,
.pi-rec__desc,
.pi-vid__desc,
.pi-blog__excerpt,
.pi-evt__loc,
.pi-rec__det p,
.pi-rec__det ul {
  color: oklch(28% 0.045 218 / 0.82);
}

.pi-rec__det {
  border-top-color: oklch(17% 0.045 218 / 0.14);
}

.pi-rec__det summary {
  color: var(--pi-cobalt);
}

.pi-video-feature {
  min-height: clamp(540px, 72vh, 760px);
}

.pi-video-feature h1 {
  font-size: clamp(2.8rem, 6.6vw, 5.8rem);
}

.pi-video-frame {
  border-radius: 8px;
  box-shadow: 0 12px 24px -20px oklch(0% 0 0 / 0.8);
}

.pi-content-empty {
  color: inherit;
  opacity: 0.78;
}

.premium-page [data-reflow-type="shopping-cart"] {
  background: var(--pi-surface);
  border-radius: 8px;
  box-shadow: 0 8px 18px -16px var(--pi-shadow);
  color: var(--pi-ink) !important;
  margin: 6rem auto 2rem;
  max-width: 1100px;
  padding: clamp(1rem, 3vw, 2rem);
}

footer {
  background:
    linear-gradient(135deg, var(--pi-ink) 0%, var(--pi-cobalt) 62%, var(--pi-ink-soft) 100%) !important;
  color: var(--pi-paper);
}

footer h3,
footer .fw-bold,
footer .fw-bold span,
footer p,
footer .text-muted {
  color: var(--pi-paper) !important;
}

footer a,
footer .link-secondary {
  color: oklch(96% 0.006 210 / 0.78) !important;
  text-decoration: none;
}

footer a:hover,
footer .link-secondary:hover {
  color: white !important;
}

footer hr {
  border-color: oklch(96% 0.006 210 / 0.2);
}

footer .bs-icon {
  background: var(--pi-gold) !important;
  color: var(--pi-ink);
}

.pi-text-link {
  color: inherit;
  font-weight: 800;
}

.pi-text-link::after {
  background: currentColor;
}

.premium-home a:focus-visible,
.premium-page a:focus-visible,
.premium-home button:focus-visible,
.premium-page button:focus-visible,
.premium-home input:focus-visible,
.premium-page input:focus-visible,
.premium-home textarea:focus-visible,
.premium-page textarea:focus-visible,
.premium-home summary:focus-visible,
.premium-page summary:focus-visible {
  outline: 3px solid var(--pi-gold);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .premium-home #mainNav .navbar-collapse,
  .premium-page #mainNav .navbar-collapse {
    background: oklch(17% 0.045 218 / 0.97);
    border-radius: 8px;
    margin-top: 0.8rem;
    padding: 0.75rem;
  }

  .premium-home #mainNav .navbar-nav,
  .premium-page #mainNav .navbar-nav {
    align-items: stretch;
    gap: 0.2rem;
  }

  .premium-home #mainNav .nav-link,
  .premium-page #mainNav .nav-link {
    display: block;
    text-align: left;
  }

  .pi-section__header,
  .pi-chapters__head,
  .pi-category-stage,
  .pi-chapter {
    grid-template-columns: 1fr;
  }

  .pi-section__header {
    max-width: 760px;
  }

  .pi-stage-gallery {
    order: -1;
  }

  .pi-cinema.pi-cinema--center {
    min-height: 780px;
    padding-top: 7.5rem;
  }

  .pi-cinema--center h1,
  .pi-page-hero h1,
  .pi-category-stage h1 {
    max-width: 11.5ch;
  }
}

@media (max-width: 767px) {
  .premium-home,
  .premium-page {
    font-size: 16px;
  }

  .pi-cinema.pi-cinema--center {
    background:
      linear-gradient(180deg, oklch(17% 0.045 218 / 0.38) 0%, oklch(17% 0.045 218 / 0.58) 44%, oklch(17% 0.045 218 / 0.96) 100%),
      var(--cinema-img) center top / auto 56% no-repeat,
      var(--pi-ink);
    min-height: 760px;
    padding: 24rem 1.1rem 2.4rem;
  }

  .pi-cinema--center h1 {
    font-size: clamp(2.8rem, 14vw, 4.1rem);
    max-width: 10ch;
  }

  .pi-cinema--center .pi-actions,
  .pi-actions,
  .pi-retail__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pi-button,
  .premium-page .btn-primary,
  .premium-home .btn-primary {
    width: 100%;
  }

  .pi-section,
  .pi-catalog,
  .pi-category-stage,
  .pi-page-hero {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }

  .pi-section__header h2,
  .pi-chapters__head h2,
  .pi-form-card h2,
  .pi-retail h2,
  .pi-category-story h2 {
    font-size: clamp(2.25rem, 13vw, 3.7rem);
  }

  .pi-catalog__bar {
    align-items: stretch;
    flex-direction: column;
  }

  .pi-cat-filters {
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .pi-cat-chip {
    white-space: nowrap;
  }

  .pi-showcase__copy {
    margin: 1rem;
  }

  .pi-chapter__num {
    margin-bottom: 0.8rem;
  }

  footer .d-flex.justify-content-between {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-button,
  .premium-page .btn-primary,
  .premium-home .btn-primary,
  .pi-cat-chip,
  .premium-cart,
  .premium-page [data-reflow-type="view-cart"],
  .pi-collection,
  .pi-card,
  .pi-retailer-card,
  .pi-evt,
  .pi-rec,
  .pi-vid,
  .pi-blog {
    transition: none !important;
  }

  .pi-button:hover,
  .premium-page .btn-primary:hover,
  .premium-home .btn-primary:hover,
  .pi-cat-chip:hover,
  .premium-cart:hover,
  .premium-page [data-reflow-type="view-cart"]:hover,
  .pi-collection:hover,
  .pi-card:hover,
  .pi-retailer-card:hover,
  .pi-evt:hover,
  .pi-rec:hover,
  .pi-vid:hover,
  .pi-blog:hover {
    transform: none;
  }
}

/* Heritage Gallery activation: final cascade layer */
body.premium-home,
body.premium-page {
  --pi-ink: oklch(22% 0.04 350);
  --pi-ink-soft: oklch(31% 0.045 350);
  --pi-paper: oklch(99% 0 0);
  --pi-paper-deep: oklch(97% 0.012 350);
  --pi-surface: oklch(100% 0 0);
  --pi-burgundy: oklch(37% 0.12 350);
  --pi-burgundy-deep: oklch(26% 0.085 350);
  --pi-burgundy-bright: oklch(48% 0.14 350);
  --pi-olive: oklch(46% 0.075 125);
  --pi-copper: oklch(67% 0.13 57);
  --pi-cobalt: var(--pi-burgundy);
  --pi-cobalt-bright: var(--pi-burgundy-bright);
  --pi-gold: var(--pi-copper);
  --pi-pomegranate: var(--pi-burgundy);
  --pi-red-deep: var(--pi-burgundy-deep);
  --pi-line: oklch(22% 0.04 350 / 0.16);
  --pi-dark-line: oklch(22% 0.04 350 / 0.18);
  --pi-shadow: oklch(22% 0.04 350 / 0.2);
  background: var(--pi-paper);
  color: var(--pi-ink);
  font-family: "Manrope", system-ui, sans-serif;
}

body.premium-home {
  background: var(--pi-burgundy-deep);
  color: var(--pi-paper);
}

body.premium-page {
  background: var(--pi-paper);
  background-image: none;
}

body.premium-home h1,
body.premium-home h2,
body.premium-page h1,
body.premium-page h2,
body.premium-home .premium-brand,
body.premium-page #mainNav .navbar-brand,
body.premium-home footer .fw-bold span:last-child,
body.premium-page footer .fw-bold span:last-child,
body.premium-home .pi-collection strong,
body.premium-page .pi-collection strong,
body.premium-home .pi-card__title,
body.premium-page .pi-card__title {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 0.92;
  text-shadow: none;
}

body.premium-home h3,
body.premium-page h3,
body.premium-home h4,
body.premium-page h4,
body.premium-home label,
body.premium-page label,
body.premium-home button,
body.premium-page button {
  font-family: "Manrope", system-ui, sans-serif;
}

body.premium-home .pi-kicker,
body.premium-page .pi-kicker {
  color: var(--pi-burgundy) !important;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.premium-home .pi-button,
body.premium-page .pi-button,
body.premium-home .btn-primary,
body.premium-page .btn-primary,
body.premium-home .pi-cat-chip,
body.premium-page .pi-cat-chip,
body.premium-home .premium-cart,
body.premium-page [data-reflow-type="view-cart"] {
  border-radius: 3px;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 44px;
}

body.premium-home .pi-button--primary,
body.premium-page .pi-button--primary,
body.premium-home .btn-primary,
body.premium-page .btn-primary {
  background: var(--pi-burgundy) !important;
  border: 1px solid var(--pi-burgundy) !important;
  color: #fff !important;
}

body.premium-home .pi-button--primary:hover,
body.premium-page .pi-button--primary:hover,
body.premium-home .btn-primary:hover,
body.premium-page .btn-primary:hover {
  background: var(--pi-burgundy-deep) !important;
  border-color: var(--pi-burgundy-deep) !important;
}

body.premium-home #mainNav.premium-nav,
body.premium-home #mainNav.premium-nav.navbar-shrink,
body.premium-page #mainNav,
body.premium-page #mainNav.navbar-shrink {
  background: var(--pi-burgundy-deep) !important;
  border-bottom: 1px solid oklch(100% 0 0 / 0.2);
  box-shadow: none;
}

body.premium-home .premium-brand,
body.premium-page #mainNav .navbar-brand {
  color: #fff !important;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
}

body.premium-home .premium-brand img,
body.premium-page #mainNav .navbar-brand::before {
  background-color: #fff !important;
  border-radius: 2px !important;
  height: 36px !important;
  width: 36px !important;
}

body.premium-home .premium-nav .nav-link,
body.premium-page #mainNav .nav-link {
  background: transparent !important;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: oklch(100% 0 0 / 0.78) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 0.82rem;
}

body.premium-home .premium-nav .nav-link:hover,
body.premium-home .premium-nav .nav-link:focus,
body.premium-page #mainNav .nav-link:hover,
body.premium-page #mainNav .nav-link:focus {
  border-bottom-color: var(--pi-copper);
  color: #fff !important;
}

body.premium-home .premium-cart,
body.premium-page [data-reflow-type="view-cart"] {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: var(--pi-burgundy-deep) !important;
}

body.premium-home .pi-cinema.pi-cinema--center {
  align-items: end;
  background: var(--pi-paper) !important;
  color: var(--pi-ink);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  min-height: clamp(680px, 88svh, 900px);
  place-items: end start;
  text-align: left;
}

body.premium-home .pi-cinema.pi-cinema--center::before {
  background: var(--cinema-img) center / cover no-repeat;
  display: block !important;
  inset: 0 0 0 45%;
  opacity: 1;
  transform: none;
}

body.premium-home .pi-cinema--center .pi-cinema__scrim {
  background: linear-gradient(90deg, var(--pi-paper) 0%, oklch(99% 0 0 / 0.94) 30%, oklch(99% 0 0 / 0.35) 61%, transparent 100%);
  z-index: 1;
}

body.premium-home .pi-cinema--center .pi-cinema__copy {
  grid-column: 1;
  margin: 0;
  max-width: 620px;
}

body.premium-home .pi-cinema--center h1 {
  color: var(--pi-burgundy);
  font-size: clamp(3.7rem, 7.2vw, 6.8rem);
  max-width: 7.8ch;
}

body.premium-home .pi-cinema--center .pi-cinema__lead {
  color: var(--pi-ink-soft);
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  max-width: 48ch;
}

body.premium-home .pi-cinema--center .pi-trust {
  border-top-color: var(--pi-dark-line);
  color: var(--pi-ink-soft);
  justify-content: flex-start;
}

body.premium-home .pi-cinema--center .pi-trust span::before {
  background: var(--pi-olive);
}

body.premium-home .pi-marquee {
  background: var(--pi-olive);
  color: #fff;
}

body.premium-home .pi-marquee span {
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
}

body.premium-home .pi-showcase {
  background:
    linear-gradient(90deg, oklch(26% 0.085 350 / 0.86), oklch(26% 0.085 350 / 0.32)),
    url("../img/baladna-lineup.jpg") center / cover no-repeat !important;
}

body.premium-home .pi-showcase__copy {
  background: oklch(100% 0 0 / 0.94);
  border: 1px solid var(--pi-dark-line);
  border-radius: 2px;
  color: var(--pi-ink);
}

body.premium-home .pi-showcase__copy h2,
body.premium-home .pi-showcase__copy p {
  color: var(--pi-ink);
}

body.premium-home .pi-section--light,
body.premium-home .pi-section,
body.premium-page .pi-section,
body.premium-page .pi-catalog,
body.premium-page .pi-category-stage,
body.premium-page .pi-form-card,
body.premium-page .pi-info-card {
  background: var(--pi-paper) !important;
  color: var(--pi-ink);
}

body.premium-home .pi-section--dark {
  background: var(--pi-burgundy-deep) !important;
  color: #fff;
}

body.premium-home .pi-section__header,
body.premium-page .pi-section__header,
body.premium-home .pi-chapters__head {
  border-bottom: 1px solid var(--pi-dark-line);
  padding-bottom: 1.6rem;
}

/* Give homepage section headers a clear editorial rhythm: label first,
   then a wide headline paired with its supporting copy. */
body.premium-home .pi-section__header,
body.premium-home .pi-chapters__head {
  align-items: start;
  column-gap: clamp(1.5rem, 5vw, 5rem);
  grid-template-areas:
    "kicker kicker"
    "title body";
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  row-gap: 0.8rem;
}

body.premium-home .pi-section__header > .pi-kicker,
body.premium-home .pi-chapters__head > .pi-kicker {
  grid-area: kicker;
  margin: 0 0 0.5rem;
}

body.premium-home .pi-section__header > h2,
body.premium-home .pi-chapters__head > h2 {
  grid-area: title;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}

body.premium-home .pi-section__header > p:not(.pi-kicker),
body.premium-home .pi-chapters__head > p:not(.pi-kicker) {
  align-self: end;
  grid-area: body;
  margin: 0;
  max-width: 42ch;
  padding-bottom: 0.2rem;
  text-wrap: pretty;
}

body.premium-home .pi-section__header > p:not(.pi-kicker) {
  color: var(--pi-ink-soft);
}

body.premium-home .pi-chapters__head > p:not(.pi-kicker) {
  color: oklch(96% 0.006 210 / 0.78);
}

@media (max-width: 1100px) {
  body.premium-home .pi-section__header,
  body.premium-home .pi-chapters__head {
    grid-template-areas:
      "kicker"
      "title"
      "body";
    grid-template-columns: 1fr;
  }
}

body.premium-home .pi-section__header h2,
body.premium-page .pi-section__header h2,
body.premium-page .pi-category-story h2,
body.premium-page .pi-form-card h2 {
  color: var(--pi-burgundy);
}

body.premium-home .pi-collection,
body.premium-page .pi-card,
body.premium-page .pi-retailer-card,
body.premium-page .pi-evt,
body.premium-page .pi-rec,
body.premium-page .pi-vid,
body.premium-page .pi-blog,
body.premium-page .pi-form-card,
body.premium-page .pi-info-card {
  background: var(--pi-surface) !important;
  border: 1px solid var(--pi-dark-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--pi-ink) !important;
}

body.premium-home .pi-collection span,
body.premium-page .pi-card__cat {
  color: var(--pi-burgundy) !important;
}

body.premium-home .pi-collection strong,
body.premium-page .pi-card__title {
  color: var(--pi-ink) !important;
}

body.premium-page .pi-card__media {
  background: var(--pi-paper-deep);
  border-bottom: 1px solid var(--pi-dark-line);
}

/* Reflow catalog cards: keep the storefront presentation stable and
   make the purchase action visible without requiring a hover. */
body.premium-page .reflow-product-list.ref-cards .ref-products {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.premium-page .reflow-product-list.ref-cards .ref-product {
  background: var(--pi-surface);
  border: 1px solid var(--pi-dark-line);
  border-radius: 2px !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

body.premium-page .reflow-product-list.ref-cards .ref-media {
  aspect-ratio: 1 / 1;
  background: var(--pi-paper-deep);
  overflow: hidden;
}

body.premium-page .reflow-product-list.ref-cards .ref-image {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

body.premium-page .reflow-product-list.ref-cards .ref-product-data {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1rem 0;
}

body.premium-page .reflow-product-list.ref-cards .ref-addons {
  opacity: 1 !important;
  padding: 1rem;
  transform: none !important;
  visibility: visible !important;
}

body.premium-page .reflow-product-list.ref-cards .ref-button {
  display: inline-flex !important;
  justify-content: center;
  width: 100%;
}

@media (max-width: 767px) {
  body.premium-page .reflow-product-list.ref-cards .ref-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body.premium-page .reflow-product-list.ref-cards .ref-products {
    grid-template-columns: 1fr;
  }
}

/* Live Reflow API catalog: the richer card experience remains backed by
   Reflow while keeping gallery and quantity controls on the storefront. */
.pi-live-card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pi-live-card {
  background: var(--pi-surface);
  border: 1px solid var(--pi-dark-line);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.pi-live-card__media {
  aspect-ratio: 1 / 1;
  background: var(--pi-paper-deep);
  border: 0;
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.pi-live-card__media img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.pi-live-card__gallery-controls {
  align-items: center;
  background: oklch(10% 0.02 20 / 0.76);
  bottom: 0.7rem;
  color: #fff;
  display: flex;
  gap: 0.4rem;
  left: 50%;
  padding: 0.2rem 0.35rem;
  position: absolute;
  transform: translateX(-50%);
}

.pi-live-card__gallery-controls button {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
}

.pi-live-card__badge {
  background: var(--pi-gold);
  color: var(--pi-ink);
  font-size: 0.75rem;
  font-weight: 800;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  position: absolute;
  top: 0.75rem;
}

.pi-live-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
}

.pi-live-card__category {
  color: var(--pi-burgundy);
  font-size: 0.76rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.pi-live-card__heading {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.pi-live-card__heading h2 {
  color: var(--pi-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0;
  min-height: 2lh;
  overflow: hidden;
  text-align: left;
}

.pi-live-price {
  align-items: flex-end;
  color: var(--pi-burgundy);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.1rem;
  white-space: nowrap;
}

.pi-live-price__original {
  color: var(--pi-ink-muted, #706762);
  font-size: 0.8rem;
  text-decoration: line-through;
}

.pi-live-card__excerpt {
  color: var(--pi-ink-muted, #706762);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.4;
  margin: 0.65rem 0 1rem;
  min-height: 2lh;
  overflow: hidden;
}

.pi-live-card__purchase {
  margin-top: auto;
}

.pi-live-variant {
  display: block;
  margin: 0 0 0.65rem;
}

.pi-live-variant span {
  color: var(--pi-ink);
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.pi-live-variant select {
  background: #fff;
  border: 1px solid var(--pi-dark-line);
  border-radius: 4px;
  color: var(--pi-ink);
  font-size: 0.95rem;
  padding: 0.55rem 0.6rem;
  width: 100%;
}

.pi-live-card__purchase .pi-live-quantity-repair {
  display: flex;
  justify-content: center;
}

.pi-live-card__purchase .ref-quantity-widget,
.pi-live-card__purchase .pi-live-quantity-repair {
  display: none !important;
}

.pi-live-card__purchase input[type="number"] {
  -moz-appearance: textfield;
  background: #fff !important;
  color: var(--pi-ink) !important;
  font-size: 1rem !important;
  height: 2.45rem;
  min-width: 2.75rem !important;
  opacity: 1 !important;
  text-align: center;
}

.pi-live-card__purchase input[type="number"]::-webkit-inner-spin-button,
.pi-live-card__purchase input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pi-live-card__purchase .ref-button {
  background: var(--pi-burgundy) !important;
  border: 1px solid var(--pi-burgundy) !important;
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.pi-live-card__purchase .pi-live-fallback-button {
  align-items: center;
  background: var(--pi-burgundy-deep, #741747);
  border: 0;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  width: 100%;
}

.pi-live-card__purchase .pi-live-fallback-button:hover {
  background: var(--pi-burgundy, #8b1e52);
  color: #fff;
}

.pi-live-card__purchase .pi-live-fallback-button:disabled {
  cursor: wait;
  opacity: 0.78;
}

.pi-live-card__purchase .ref-button:hover,
.pi-live-card__purchase .ref-button:focus-visible {
  background: var(--pi-burgundy-deep) !important;
  border-color: var(--pi-burgundy-deep) !important;
  color: #fff !important;
}

/* Reflow cart controls: keep quantity values readable in both the header
   dropdown and the full shopping cart view. */
body.premium-page .ref-quantity-widget {
  color: var(--pi-ink) !important;
}

body.premium-page .ref-quantity-widget input[type="number"] {
  -moz-appearance: textfield;
  background: #fff !important;
  color: var(--pi-ink) !important;
  font-size: 1rem !important;
  height: 2.75rem;
  min-width: 3.25rem !important;
  opacity: 1 !important;
  text-align: center !important;
  width: 3.25rem !important;
}

body.premium-page .ref-quantity-widget input[type="number"]::-webkit-inner-spin-button,
body.premium-page .ref-quantity-widget input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.premium-page .reflow-shopping-cart .ref-standard-checkout-button,
body.premium-page .reflow-shopping-cart .ref-checkout-buttons a.ref-button,
body.premium-page .reflow-shopping-cart .ref-summary-footer a.ref-button {
  background: var(--pi-burgundy) !important;
  border: 1px solid var(--pi-burgundy) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 800;
}

body.premium-page .ref-summary .ref-button,
body.premium-page .ref-summary a[href*="checkout"],
body.premium-page .ref-summary button {
  background: var(--pi-burgundy) !important;
  border: 1px solid var(--pi-burgundy) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 800;
}

body.premium-page .reflow-shopping-cart .ref-standard-checkout-button:hover,
body.premium-page .reflow-shopping-cart .ref-checkout-buttons a.ref-button:hover,
body.premium-page .reflow-shopping-cart .ref-summary-footer a.ref-button:hover {
  background: var(--pi-burgundy-deep) !important;
  border-color: var(--pi-burgundy-deep) !important;
  color: #fff !important;
}

body.premium-page .ref-summary .ref-button:hover,
body.premium-page .ref-summary a[href*="checkout"]:hover,
body.premium-page .ref-summary button:hover {
  background: var(--pi-burgundy-deep) !important;
  border-color: var(--pi-burgundy-deep) !important;
  color: #fff !important;
}

.pi-live-pagination {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.pi-live-pagination a {
  color: var(--pi-burgundy);
  font-weight: 800;
}

.pi-live-empty {
  padding: 2rem 0;
}

.pi-live-detail-shell {
  align-items: center;
  background: oklch(10% 0.02 20 / 0.72);
  display: grid;
  inset: 0;
  overflow: auto;
  padding: 2rem;
  place-items: center;
  position: fixed;
  z-index: 2000;
}

.pi-live-detail {
  background: var(--pi-surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  max-width: 980px;
  padding: 1.25rem;
  position: relative;
  width: min(100%, 980px);
}

.pi-live-detail__media {
  aspect-ratio: 1 / 1;
  background: var(--pi-paper-deep);
  overflow: hidden;
}

.pi-live-detail__media img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.pi-live-detail__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 1;
  padding-top: 0.75rem;
}

.pi-live-detail__thumbs button {
  background: var(--pi-paper-deep);
  border: 1px solid var(--pi-dark-line);
  height: 60px;
  padding: 0;
  width: 60px;
}

.pi-live-detail__thumbs img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.pi-live-detail__body {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 2rem 1.5rem;
}

.pi-live-detail__body h2 {
  color: var(--pi-ink);
  margin: 0 0 0.75rem;
  text-align: left;
}

.pi-live-detail__description {
  margin: 1rem 0 1.5rem;
}

.pi-live-detail__close {
  background: var(--pi-surface);
  border: 1px solid var(--pi-dark-line);
  color: var(--pi-ink);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 1;
}

@media (max-width: 767px) {
  .pi-live-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-live-detail { grid-template-columns: 1fr; }
  .pi-live-detail__body { grid-column: 1; grid-row: auto; padding: 1.25rem 0 0; }
  .pi-live-detail__thumbs { grid-column: 1; }
}

@media (max-width: 480px) {
  .pi-live-card-grid { grid-template-columns: 1fr; }
  .pi-live-detail-shell { padding: 0.75rem; }
}

/* Keep the Reflow cart dropdown above the hero and page content. */
body.premium-page > nav#mainNav {
  overflow: visible !important;
  z-index: 1100 !important;
}

body.premium-page > nav#mainNav .navbar-collapse,
body.premium-page > nav#mainNav .container,
body.premium-page > nav#mainNav .navbar-nav {
  overflow: visible !important;
}

body.premium-page > nav#mainNav .ref-summary,
body.premium-page > nav#mainNav .ref-product-preview {
  z-index: 1200 !important;
}

body.premium-home > nav#mainNav {
  overflow: visible !important;
  z-index: 1100 !important;
}

body.premium-home > nav#mainNav .navbar-collapse,
body.premium-home > nav#mainNav .container,
body.premium-home > nav#mainNav .navbar-nav {
  overflow: visible !important;
}

body.premium-home > nav#mainNav .ref-summary,
body.premium-home > nav#mainNav .ref-product-preview {
  z-index: 1200 !important;
}

/* The homepage cart uses premium-home rather than premium-page. */
body.premium-home .ref-summary .ref-quantity-widget {
  color: var(--pi-ink) !important;
}

body.premium-home .ref-summary .ref-quantity-widget input[type="number"] {
  -moz-appearance: textfield !important;
  background: #fff !important;
  color: var(--pi-ink) !important;
  display: inline-block !important;
  font-size: 1rem !important;
  height: 2.75rem !important;
  min-width: 3.25rem !important;
  opacity: 1 !important;
  text-align: center !important;
  visibility: visible !important;
  width: 3.25rem !important;
}

body.premium-home .ref-summary .ref-summary-footer .ref-button {
  background: var(--pi-burgundy) !important;
  border: 1px solid var(--pi-burgundy) !important;
  border-radius: 999px !important;
  color: #fff !important;
  display: inline-flex !important;
  font-weight: 800 !important;
  justify-content: center;
  min-height: 42px;
  opacity: 1 !important;
  visibility: visible !important;
}

body.premium-home .ref-summary .ref-summary-footer .ref-button:hover,
body.premium-home .ref-summary .ref-summary-footer .ref-button:focus-visible {
  background: var(--pi-burgundy-deep) !important;
  border-color: var(--pi-burgundy-deep) !important;
  color: #fff !important;
}

/* Checkout uses the brighter site accent for reliable text contrast. */
body.premium-home .ref-summary .ref-summary-footer .ref-button,
body.premium-page .ref-summary .ref-summary-footer .ref-button,
body.premium-home .reflow-shopping-cart .ref-standard-checkout-button,
body.premium-page .reflow-shopping-cart .ref-standard-checkout-button,
body.premium-home .reflow-shopping-cart .ref-checkout-buttons a.ref-button,
body.premium-page .reflow-shopping-cart .ref-checkout-buttons a.ref-button {
  background: var(--pi-gold) !important;
  border-color: var(--pi-gold) !important;
  color: var(--pi-ink) !important;
}

body.premium-home .ref-summary .ref-summary-footer .ref-button:hover,
body.premium-page .ref-summary .ref-summary-footer .ref-button:hover,
body.premium-home .reflow-shopping-cart .ref-standard-checkout-button:hover,
body.premium-page .reflow-shopping-cart .ref-standard-checkout-button:hover,
body.premium-home .reflow-shopping-cart .ref-checkout-buttons a.ref-button:hover,
body.premium-page .reflow-shopping-cart .ref-checkout-buttons a.ref-button:hover {
  background: var(--pi-copper) !important;
  border-color: var(--pi-copper) !important;
  color: var(--pi-ink) !important;
}

/* Final checkout treatment: exact Reflow selectors win over its default
   olive/blue button theme. */
body.premium-home .ref-summary .ref-summary-footer .ref-button,
body.premium-page .ref-summary .ref-summary-footer .ref-button,
body.premium-home .reflow-shopping-cart .ref-cart .ref-checkout-buttons .ref-standard-checkout-button,
body.premium-page .reflow-shopping-cart .ref-cart .ref-checkout-buttons .ref-standard-checkout-button {
  background: var(--pi-burgundy) !important;
  border-color: var(--pi-burgundy) !important;
  color: #fff !important;
}

body.premium-home .ref-summary .ref-summary-footer .ref-button:hover,
body.premium-page .ref-summary .ref-summary-footer .ref-button:hover,
body.premium-home .reflow-shopping-cart .ref-cart .ref-checkout-buttons .ref-standard-checkout-button:hover,
body.premium-page .reflow-shopping-cart .ref-cart .ref-checkout-buttons .ref-standard-checkout-button:hover {
  background: var(--pi-burgundy-deep) !important;
  border-color: var(--pi-burgundy-deep) !important;
  color: #fff !important;
}

body.checkout-page {
  background: var(--pi-paper-deep) !important;
}

body.checkout-page::before {
  background: linear-gradient(135deg, oklch(98% 0.015 350), oklch(94% 0.035 57)) !important;
  opacity: 1 !important;
}

body.premium-page.checkout-page,
body.premium-page.checkout-page::before {
  background: #f5ece8 !important;
}

html.checkout-page,
html.checkout-page body {
  background: #f5ece8 !important;
  background-image: none !important;
}

html.checkout-page .ref-summary .ref-summary-footer .ref-button {
  background: var(--pi-burgundy) !important;
  border-color: var(--pi-burgundy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html.checkout-page body.checkout-page > section.py-5.my-5 {
  background: #f5ece8 !important;
  background-image: none !important;
}

body.premium-page.checkout-page .ref-summary .ref-summary-footer .ref-button {
  background: var(--pi-burgundy) !important;
  border-color: var(--pi-burgundy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.premium-page .pi-card__media img {
  object-fit: contain;
  padding: 0.6rem;
}

body.premium-page .pi-card__price,
body.premium-page .pi-card__price-new,
body.premium-page .pi-rec__det summary {
  color: var(--pi-burgundy) !important;
}

body.premium-page .pi-card__price-orig,
body.premium-page .pi-evt__desc,
body.premium-page .pi-rec__desc,
body.premium-page .pi-vid__desc,
body.premium-page .pi-blog__excerpt,
body.premium-page .pi-evt__loc,
body.premium-page .pi-rec__det p,
body.premium-page .pi-rec__det ul {
  color: var(--pi-ink-soft) !important;
}

body.premium-page .pi-cat-chip {
  background: transparent;
  border: 1px solid var(--pi-dark-line);
  color: var(--pi-ink);
}

body.premium-page .pi-cat-chip:hover,
body.premium-page .pi-cat-chip.is-active,
body.premium-page .pi-cat-chip[aria-pressed="true"] {
  background: var(--pi-burgundy);
  border-color: var(--pi-burgundy);
  color: #fff;
}

body.premium-page .pi-page-hero {
  background:
    linear-gradient(90deg, oklch(26% 0.085 350 / 0.88), oklch(26% 0.085 350 / 0.48)),
    var(--hero-image, url("../img/zaatar.jpeg")) center / cover no-repeat;
  color: #fff;
}

body.premium-page .pi-page-hero h1,
body.premium-page .pi-page-hero p {
  color: #fff;
}

body.premium-page .pi-retail {
  background: var(--pi-olive);
  color: #fff;
}

body.premium-page .pi-retail .pi-kicker,
body.premium-page .pi-retail h2,
body.premium-page .pi-retail p {
  color: #fff !important;
}

body.premium-home footer,
body.premium-page footer {
  background: var(--pi-burgundy-deep) !important;
}

body.premium-home footer a:hover,
body.premium-page footer a:hover {
  color: var(--pi-copper) !important;
}

body.premium-home a:focus-visible,
body.premium-page a:focus-visible,
body.premium-home button:focus-visible,
body.premium-page button:focus-visible,
body.premium-home input:focus-visible,
body.premium-page input:focus-visible,
body.premium-home textarea:focus-visible,
body.premium-page textarea:focus-visible {
  outline: 3px solid var(--pi-copper);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  body.premium-home #mainNav .navbar-collapse,
  body.premium-page #mainNav .navbar-collapse {
    background: var(--pi-burgundy-deep);
    border: 1px solid oklch(100% 0 0 / 0.18);
    border-radius: 2px;
  }

  body.premium-home .pi-cinema.pi-cinema--center {
    grid-template-columns: 1fr;
    min-height: 760px;
    padding: 25rem 1.25rem 2.6rem;
  }

  body.premium-home .pi-cinema.pi-cinema--center::before {
    inset: 0 0 38% 0;
  }

  body.premium-home .pi-cinema--center .pi-cinema__scrim {
    background: linear-gradient(180deg, oklch(99% 0 0 / 0.08) 0%, oklch(99% 0 0 / 0.14) 26%, var(--pi-paper) 66%, var(--pi-paper) 100%);
  }
}

@media (max-width: 767px) {
  body.premium-home .pi-cinema.pi-cinema--center {
    min-height: 760px;
    padding: 22rem 1.05rem 2.4rem;
  }

  body.premium-home .pi-cinema--center h1 {
    font-size: clamp(3.1rem, 14vw, 4.3rem);
  }

  body.premium-home .pi-cinema--center .pi-actions,
  body.premium-home .pi-actions,
  body.premium-page .pi-retail__actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.premium-home .pi-button,
  body.premium-page .pi-button,
  body.premium-home .btn-primary,
  body.premium-page .btn-primary {
    width: 100%;
  }
}

/* Keep content visible when the optional reveal script is unavailable. */
body.premium-home .pi-reveal,
body.premium-page .pi-reveal {
  opacity: 1;
  transform: none;
}

body.premium-home,
body.premium-page {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body.premium-home .pi-featured-layout,
  body.premium-page .pi-featured-layout,
  body.premium-home .pi-shop-layout,
  body.premium-page .pi-shop-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
  }

  body.premium-home .pi-featured-copy,
  body.premium-page .pi-featured-copy,
  body.premium-home .pi-live-products,
  body.premium-page .pi-live-products,
  body.premium-home .pi-product-embeds,
  body.premium-page .pi-product-embeds,
  body.premium-home .pi-card-grid,
  body.premium-page .pi-card-grid {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  body.premium-home .pi-live-products,
  body.premium-page .pi-live-products,
  body.premium-home .pi-product-embeds,
  body.premium-page .pi-product-embeds,
  body.premium-home .pi-card-grid,
  body.premium-page .pi-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.premium-home .pi-live-products > *,
  body.premium-page .pi-live-products > *,
  body.premium-home .pi-card,
  body.premium-page .pi-card {
    min-width: 0;
    width: 100%;
  }
}

html {
  overflow-x: hidden;
}

body.premium-home .pi-live-products,
body.premium-page .pi-live-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  min-width: 0;
  width: 100%;
}

@media (max-width: 767px) {
  body.premium-home .pi-live-products,
  body.premium-page .pi-live-products {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The homepage now renders a catalog inside this wrapper. Let the catalog
   own its three-card grid instead of squeezing the catalog into one grid cell. */
body.premium-home .pi-live-products:has(> [data-reflow-catalog]) {
  display: block;
}

body.premium-home .pi-live-products:has(> [data-reflow-catalog]) > [data-reflow-catalog] {
  min-width: 0;
  width: 100%;
}

body.premium-home .pi-live-products .pi-live-card-grid {
  align-items: stretch;
}

body.premium-home .pi-live-products .pi-live-card {
  height: auto;
}

body.premium-home .pi-live-products .pi-live-card__body {
  flex: 1 1 auto;
}

body.premium-home .pi-live-products .pi-live-card__purchase {
  margin-top: auto;
}

body.premium-home .pi-live-products .pi-live-card__heading {
  display: block;
}

body.premium-home .pi-live-products .pi-live-card__heading h2 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

body.premium-home .pi-live-products .pi-live-price {
  align-items: flex-start;
  margin-top: 0.45rem;
}

body.premium-home .pi-live-products .pi-live-card__heading h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.premium-home .pi-live-products .pi-live-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.4;
  overflow: hidden;
}

body.premium-home .pi-live-products .pi-live-card__purchase .ref-quantity-widget {
  border-color: var(--pi-dark-line) !important;
}

body.premium-home .pi-live-products .pi-live-card__purchase .ref-decrease,
body.premium-home .pi-live-products .pi-live-card__purchase .ref-increase {
  align-items: center;
  color: var(--pi-ink) !important;
  justify-content: center;
}

body.premium-home .pi-live-products .pi-live-card__purchase .ref-decrease span::before,
body.premium-home .pi-live-products .pi-live-card__purchase .ref-increase span::before {
  content: none !important;
}

body.premium-home .pi-live-products .pi-live-card__purchase .ref-decrease span,
body.premium-home .pi-live-products .pi-live-card__purchase .ref-increase span {
  color: var(--pi-ink) !important;
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  min-width: 1rem;
  text-align: center;
  width: auto !important;
}

body.premium-home .pi-live-products .pi-live-card__purchase .ref-quantity-widget input,
body.premium-home .pi-live-products .pi-live-card__purchase select {
  color: var(--pi-ink) !important;
}

body.premium-home .pi-live-products .pi-live-card__purchase a.ref-button {
  color: #fff !important;
}