@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@500;600;700;800&family=Jost:wght@400;500;600&display=swap");

/* AL FARMA PERFUMES v2 — base theme emulation (monarque, LIGHT variant, houseofem5-style).
   NOT published: this stands in for the Shoopy theme's own header, footer, banner,
   category, product-card and product-page rendering so the preview looks like the live store.
   Custom section CSS that IS published lives in theme.css. */

:root {
  --secondary-main: #1c1c1c; /* store primary = CTA (black, like the reference) */
  --gold: #8c6a2b; /* brand accent text (5.0:1 on white) */
  --gold-star: #c8962e; /* rating stars only */
  --bg: #ffffff;
  --surface: #f8f6f2; /* warm off-white panels */
  --line: #e6e1d8;
  --line-soft: #efefef;
  --text: #1c1c1c;
  --muted: #5c5f62; /* 6.4:1 on white */
  --deal: #c83e25; /* sale badge / save % — white text 4.9:1 */
  --wa: #25d366;
  --font-display: "Urbanist", system-ui, -apple-system, sans-serif;
  --font-body: "Jost", system-ui, -apple-system, sans-serif;
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(44px, 6vw, 84px);
  --radius: 6px;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.6 var(--font-body);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
}
p {
  margin: 0;
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- notice ---------- */
.notice {
  background: var(--text);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 9px 12px;
}
.notice b {
  font-weight: 600;
}
.notice .aux {
  display: none;
}
@media (min-width: 768px) {
  .notice .aux {
    display: inline;
  }
}

/* ---------- header: logo centred, search as icon only ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 76px;
}
.header__left,
.header__right {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header__right {
  justify-content: flex-end;
}
.header__nav {
  display: none;
  gap: 24px;
  font-size: 13.5px;
  font-weight: 500;
}
.header__nav a {
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s;
  white-space: nowrap;
}
.header__nav a:hover {
  border-color: var(--text);
}
.brand img {
  width: 64px;
  height: 64px;
}
.iconbtn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: relative;
}
.iconbtn svg {
  width: 22px;
  height: 22px;
}
.iconbtn .count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--text);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.hide-sm {
  display: none;
}
@media (min-width: 1200px) {
  .header__inner {
    height: 104px;
  }
  .brand img {
    width: 88px;
    height: 88px;
  }
  .header__nav {
    display: flex;
  }
  .burger {
    display: none;
  }
  .hide-sm {
    display: grid;
  }
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(84vw, 340px);
  background: #fff;
  z-index: 60;
  transform: translateX(-100%);
  transition: transform 0.3s;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: none;
}
.drawer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.drawer a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- hero (BannerCollection: copy panel + product image) ---------- */
.hero {
  background: var(--surface);
}
.hero__inner {
  display: grid;
}
.hero__copy {
  padding: 28px var(--gutter) 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.hero__sub {
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 17px);
  max-width: 40ch;
}
.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
}
.hero .btn {
  margin-top: 6px;
  min-width: 200px;
}
@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
  }
  .hero__copy {
    text-align: left;
    align-items: flex-start;
    padding: 40px clamp(24px, 5vw, 80px);
  }
  .hero__media img {
    aspect-ratio: 960 / 582;
    height: 100%;
  }
}
/* hero-1 banner (17/09): supplied desktop + portrait mobile banners carry their own headline
   + CTA, so the live copy stays for SEO/screen readers only and the image runs full width. */
.hero--banner {
  background: #0d0b09;
}
.hero--banner .hero__inner {
  display: block;
}
.hero--banner .hero__copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hero--banner .hero__media img {
  aspect-ratio: 900 / 1125;
  height: auto;
}
@media (min-width: 768px) {
  .hero--banner .hero__media img {
    aspect-ratio: 1920 / 698;
    max-width: 1920px;
    margin-inline: auto;
  }
}

/* ---------- section heads ---------- */
.section {
  padding: var(--section-y) 0;
}
.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 2.6vw, 32px);
}
.head--center {
  justify-content: center;
  text-align: center;
}
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.15;
}
.section-heading,
.heading-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.15;
}
.shop-all-link {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.head-link {
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
  white-space: nowrap;
}

/* ---------- categories (6 tiles) ---------- */
.cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cat {
  display: block;
}
.cat__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.cat__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.6s;
}
.cat:hover .cat__media img {
  transform: scale(1.04);
}
.cat__new {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #fff;
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.cat__name {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 16px);
}
@media (min-width: 640px) {
  .cats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .cats {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }
}

/* ---------- product row + card (TWO_CARD) ---------- */
.prow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.prow::-webkit-scrollbar {
  display: none;
}
.prow > * {
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .prow {
    grid-auto-columns: 38%;
    gap: 16px;
  }
}
@media (min-width: 768px) {
  .prow {
    grid-auto-columns: 31%;
  }
}
@media (min-width: 1024px) {
  .prow {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    overflow: visible;
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .prow.prow--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pcard {
  display: flex;
  flex-direction: column;
}
.pcard__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.pcard__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.6s;
}
.pcard:hover .pcard__media img {
  transform: scale(1.04);
}
.product-card-discount {
  position: absolute;
  top: 10px;
  right: 130px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--deal);
  padding: 3px 8px;
  border-radius: 3px;
}
.pcard__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #fff;
  color: var(--text);
  padding: 3px 8px;
  border-radius: 3px;
}
.pcard__body {
  padding: 12px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.pcard__fam {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-card-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
}
.pcard__insp {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
.rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.stars {
  color: var(--gold-star);
  letter-spacing: 1px;
  font-size: 12px;
}
.product-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
}
.product-card-price {
  font-size: 16.5px;
  font-weight: 600;
}
.product-card-mrp-price {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.btn--dark {
  background: var(--secondary-main);
  color: #fff;
  border: 1px solid var(--secondary-main);
}
.btn--dark:hover {
  background: #3a3a3a;
}
.btn--ghost {
  border: 1px solid var(--text);
  color: var(--text);
  background: #fff;
}
.btn--ghost:hover {
  background: var(--text);
  color: #fff;
}
.pcard .btn {
  margin-top: 10px;
  min-height: 42px;
  font-size: 12px;
  padding: 0 10px;
}

/* ---------- footer (4_column_premium, no address) ---------- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 52px 0 24px;
}
.footer__grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr;
}
.footer__brand,
.footer__contact {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  }
  .footer__brand,
  .footer__contact {
    grid-column: auto;
  }
}
.footer__logo {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
}
.footer p {
  color: var(--muted);
  font-size: 14px;
  max-width: 38ch;
}
.footer h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.footer ul a:hover {
  color: var(--text);
}
.footer__contact li a {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer__contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text);
}
.socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.socials a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.socials svg {
  width: 18px;
  height: 18px;
}
.footer__bar {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
}
.paychips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.paychip {
  border: 1px solid var(--line);
  background: #fff;
  padding: 3px 8px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  border-radius: 3px;
}

.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wa);
  display: grid;
  place-items: center;
  z-index: 40;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.wa-float svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

/* =================== PDP (houseofem5-style) =================== */
.crumbs {
  font-size: 12.5px;
  color: var(--muted);
  padding: 14px 0;
}
.crumbs a:hover {
  color: var(--text);
}
.pdp {
  display: grid;
  gap: 22px;
  padding-bottom: var(--section-y);
}
.gallery {
  display: grid;
  gap: 10px;
  align-self: start;
}
.gallery__main img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
}
.gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.gallery__thumbs button {
  flex: 0 0 68px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.6;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}
.gallery__thumbs button[aria-current="true"] {
  opacity: 1;
  border-color: var(--text);
}
.gallery__thumbs img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (min-width: 768px) {
  .pdp {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .gallery {
    position: sticky;
    top: 96px;
  }
}
@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
  }
  .gallery {
    grid-template-columns: 84px 1fr;
    top: 124px;
  }
  .gallery__main {
    order: 2;
  }
  .gallery__thumbs {
    order: 1;
    flex-direction: column;
    overflow: visible;
  }
  .gallery__thumbs button {
    flex: none;
    width: 84px;
  }
}
.info h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  margin: 2px 0 6px;
}
.inspired {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 10px;
}
.inspired b {
  color: var(--text);
  font-weight: 600;
}
.info .rating {
  font-size: 13.5px;
}
.info .rating u {
  text-underline-offset: 3px;
}
.info .stars {
  font-size: 14px;
}
.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0 16px;
  margin: 12px 0 18px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.pdp-price .price__now {
  font-size: 28px;
}
.pdp-price .price__mrp {
  font-size: 15px;
}
.save {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--deal);
  padding: 2px 8px;
  border-radius: 3px;
}
.tax {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--muted);
}
.opt-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.opt-label span {
  font-weight: 400;
  color: var(--muted);
}
.sizes {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.size {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  background: #fff;
}
.size[aria-pressed="true"] {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
  font-weight: 600;
}
.size[disabled] {
  color: #9a9a9a;
  text-decoration: line-through;
  background: #f6f6f6;
  cursor: not-allowed;
}
.buy {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}
.qty {
  display: flex;
  align-items: center;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qty button {
  width: 42px;
  height: 100%;
  font-size: 18px;
}
.qty output {
  min-width: 26px;
  text-align: center;
}
.buy .btn {
  min-height: 50px;
}
.buy .btn--ghost {
  grid-column: 1 / -1;
}
.offers {
  margin: 20px 0;
  border: 1px dashed #cdbf9f;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  background: #fbf8f1;
}
.offers__title {
  font-size: 13px;
  font-weight: 600;
}
.offer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
}
.offer b {
  color: var(--text);
  font-weight: 600;
}
.code {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border: 1px dashed var(--text);
  padding: 4px 10px;
  white-space: nowrap;
  border-radius: 3px;
  background: #fff;
}
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0 26px;
}
.trust div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  padding: 12px 6px;
  background: var(--surface);
  border-radius: var(--radius);
}
.trust svg {
  width: 24px;
  height: 24px;
  color: var(--text);
}
@media (min-width: 640px) {
  .trust {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Fragrance information (product attributes — shown on every product page) */
.fi {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 22px;
  overflow: hidden;
}
.fi__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.fi__head h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fi__gender {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--text);
  padding: 2px 10px;
  border-radius: 999px;
}
.fi__body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 18px;
}
.fi__label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.fi__fam {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fi__pill {
  font-size: 13px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 999px;
}
.fi__perf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fi__perf div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 4px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
.fi__perf svg {
  width: 24px;
  height: 24px;
  color: var(--text);
}
.fi__perf b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}
.fi__notes {
  display: grid;
  gap: 0;
}
.fi__note {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.fi__note:first-child {
  border-top: 0;
  padding-top: 0;
}
.fi__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
}
.fi__icon svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}
.fi__note h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fi__note p {
  font-size: 14px;
  color: var(--muted);
}

.acc {
  border-top: 1px solid var(--line);
}
.acc details {
  border-bottom: 1px solid var(--line);
}
.acc summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 600;
}
.acc summary::-webkit-details-marker {
  display: none;
}
.acc summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}
.acc details[open] summary::after {
  content: "\2013";
}
.acc__body {
  padding: 0 0 18px;
  color: var(--muted);
  font-size: 14.5px;
  display: grid;
  gap: 10px;
}
.acc__body ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.acc__body dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
}
.acc__body dt {
  color: var(--text);
  font-weight: 500;
}
.acc__body dd {
  margin: 0;
}

.reviews {
  display: grid;
  gap: 24px;
}
.rsum {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  align-self: start;
}
.rsum__score {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}
.bars {
  display: grid;
  gap: 6px;
  margin: 16px 0 20px;
  font-size: 12px;
  color: var(--muted);
}
.bar {
  display: grid;
  grid-template-columns: 24px 1fr 30px;
  gap: 8px;
  align-items: center;
}
.bar i {
  display: block;
  height: 5px;
  background: #e4e4e4;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
}
.bar i b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--text);
}
.rlist {
  display: grid;
  gap: 14px;
}
@media (min-width: 768px) {
  .rlist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .reviews {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }
}
.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
.sticky-buy .price__now {
  font-size: 18px;
}
.sticky-buy .btn {
  flex: 1;
}
.pdp-page .wa-float {
  bottom: 84px;
}
.pdp-page .footer {
  padding-bottom: 96px;
}
@media (min-width: 1024px) {
  .sticky-buy {
    display: none;
  }
  .pdp-page .wa-float {
    bottom: 16px;
  }
  .pdp-page .footer {
    padding-bottom: 24px;
  }
}

/* AL FARMA PERFUMES v2 (light) — generated section CSS (Tier-B HtmlRenderer blocks).
   Uploaded to site_settings.sx_css_location. Every selector is namespaced under .sx;
   the CTA colour comes from the theme variable --secondary-main. */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-cta: var(--secondary-main, #1c1c1c);
  --sx-gold: #8c6a2b;
  --sx-star: #c8962e;
  --sx-bg: #ffffff;
  --sx-surface: #f8f6f2;
  --sx-text: #1c1c1c;
  --sx-muted: #5c5f62;
  --sx-line: #e6e1d8;
  --sx-display: "Urbanist", system-ui, sans-serif;
  --sx-radius: 6px;
  --sx-gutter: clamp(16px, 4vw, 48px);
  --sx-pad: clamp(44px, 6vw, 84px);
  width: 100%;
  box-sizing: border-box;
  color: var(--sx-text);
  background: var(--sx-bg);
}
.sx img {
  max-width: 100%;
  height: auto;
  display: block;
}
.sx h2,
.sx h3,
.sx p {
  margin: 0;
}
.sx .sx-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--sx-gutter);
}
.sx.sx-pad {
  padding-top: var(--sx-pad);
  padding-bottom: var(--sx-pad);
}
.sx .sx-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sx-gold);
  margin-bottom: 6px;
}
.sx .sx-h2 {
  font-family: var(--sx-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
}
.sx .sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--sx-radius);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.sx .sx-btn--dark {
  background: var(--sx-cta);
  color: #fff;
}
.sx .sx-btn--dark:hover {
  background: #3a3a3a;
}
.sx .sx-btn--ghost {
  border: 1px solid var(--sx-text);
  color: var(--sx-text);
  background: #fff;
}
.sx .sx-btn--ghost:hover {
  background: var(--sx-text);
  color: #fff;
}
.sx .sx-stars {
  color: var(--sx-star);
  letter-spacing: 2px;
}

/* review card (shared with the PDP) */
.sx .sx-review {
  background: #fff;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sx .sx-review p {
  font-size: 15px;
  line-height: 1.6;
}
.sx .sx-review-by {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sx-muted);
  border-top: 1px solid var(--sx-line);
  padding-top: 12px;
}
.sx .sx-review-by b {
  color: var(--sx-text);
  font-weight: 600;
}
.sx .sx-verified {
  color: #1e7a46;
  font-size: 11.5px;
  font-weight: 600;
}
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
.sx-usp {
  border-bottom: 1px solid var(--sx-line);
}
.sx-usp .sx-usp-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.sx-usp .sx-usp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(12px, 2vw, 28px);
}
.sx-usp .sx-usp-item svg {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--sx-text);
}
.sx-usp .sx-usp-item h3 {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.sx-usp .sx-usp-item p {
  font-size: 12.5px;
  color: var(--sx-muted);
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .sx-usp .sx-usp-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .sx-usp .sx-usp-item {
    justify-content: center;
    padding: 20px 16px;
  }
}
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:offer-1 */
.sx-offer {
  background: var(--sx-surface);
}
.sx-offer .sx-offer-inner {
  display: grid;
  gap: 24px;
  align-items: center;
}
.sx-offer .sx-offer-copy p {
  color: var(--sx-muted);
  margin-top: 12px;
  max-width: 44ch;
}
.sx-offer .sx-tickets {
  display: grid;
  gap: 14px;
}
.sx-offer .sx-ticket {
  border: 1.5px dashed #cdbf9f;
  background: #fff;
  padding: 22px;
  border-radius: var(--sx-radius);
  display: grid;
  gap: 6px;
}
.sx-offer .sx-ticket-qty {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-muted);
}
.sx-offer .sx-ticket-off {
  font-family: var(--sx-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
}
.sx-offer .sx-ticket-code {
  justify-self: start;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  border: 1px dashed var(--sx-text);
  padding: 5px 12px;
  border-radius: 3px;
}
.sx-offer .sx-ticket-code b {
  font-weight: 700;
}
.sx-offer .sx-offer-foot {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 13.5px;
  color: var(--sx-muted);
}
@media (min-width: 640px) {
  .sx-offer .sx-tickets {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .sx-offer .sx-offer-inner {
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
  }
}
/* END shoopy-gen:offer-1 */

/* BEGIN shoopy-gen:signature-1 */
.sx-sig .sx-sig-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}
.sx-sig .sx-sig-media {
  position: relative;
  border-radius: var(--sx-radius);
  overflow: hidden;
}
.sx-sig .sx-sig-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.sx-sig .sx-sig-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--sx-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
}
.sx-sig .sx-sig-title {
  font-family: var(--sx-display);
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.05;
}
.sx-sig .sx-sig-insp {
  font-size: 15px;
  color: var(--sx-muted);
  margin-top: 6px;
}
.sx-sig .sx-sig-insp b {
  color: var(--sx-text);
  font-weight: 600;
}
.sx-sig .sx-sig-rating {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13.5px;
  color: var(--sx-muted);
  margin-top: 10px;
}
.sx-sig .sx-sig-sub {
  color: var(--sx-muted);
  font-size: 16px;
  margin: 14px 0 22px;
  max-width: 46ch;
}
.sx-sig .sx-sig-notes {
  display: grid;
  border-top: 1px solid var(--sx-line);
}
.sx-sig .sx-sig-note {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sx-line);
  font-size: 14.5px;
}
.sx-sig .sx-sig-note span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sx-gold);
  padding-top: 2px;
}
.sx-sig .sx-sig-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 24px;
}
.sx-sig .sx-sig-price b {
  font-size: 26px;
  font-weight: 600;
}
.sx-sig .sx-sig-price s {
  color: var(--sx-muted);
}
.sx-sig .sx-sig-price span {
  font-size: 12.5px;
  color: var(--sx-muted);
}
.sx-sig .sx-sig-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .sx-sig .sx-sig-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
@media (min-width: 1024px) {
  .sx-sig .sx-sig-grid {
    gap: 72px;
  }
}
/* END shoopy-gen:signature-1 */

/* BEGIN shoopy-gen:story-1 */
.sx-story {
  background: var(--sx-surface);
}
.sx-story .sx-story-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}
.sx-story .sx-story-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--sx-radius);
}
.sx-story .sx-quote {
  font-family: var(--sx-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.2;
}
.sx-story .sx-quote em {
  font-style: normal;
  color: var(--sx-gold);
}
.sx-story .sx-story-copy p {
  color: var(--sx-muted);
  margin-top: 16px;
  max-width: 52ch;
}
.sx-story .sx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  border-top: 1px solid var(--sx-line);
}
.sx-story .sx-stat {
  padding: 18px 8px 0 0;
}
.sx-story .sx-stat b {
  display: block;
  font-family: var(--sx-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
}
.sx-story .sx-stat span {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sx-muted);
}
@media (min-width: 768px) {
  .sx-story .sx-story-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
  }
  .sx-story .sx-story-media {
    order: 2;
  }
}
@media (min-width: 1024px) {
  .sx-story .sx-story-grid {
    gap: 72px;
  }
  .sx-story .sx-story-media {
    order: 2;
  }
}
/* END shoopy-gen:story-1 */

/* BEGIN shoopy-gen:reviews-1 */
.sx-reviews .sx-rev-head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.sx-reviews .sx-rev-score {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  color: var(--sx-muted);
}
.sx-reviews .sx-rev-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 768px) {
  .sx-reviews .sx-rev-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
/* END shoopy-gen:reviews-1 */

.section {
  padding: 2px !important;
}
.store-logo img {
  border-radius: 50% !important;
}
@media (min-width: 768px) {
  .product-image-container {
    margin: 0;
    width: 50% !important;
  }
}
.product-image-container {
  margin: 0;
  width: 50% !important;
}
@media (min-width: 768px) {
  .product-info-container {
    width: 50%;
  }
}
.product-info-container {
  width: 50%;
}
@media (max-width: 768px) {
  .product-info-container {
    width: 100%;
  }
  .product-image-container {
    width: 100% !important;
  }
}
@media (max-width: 1024px) {
  .main-header {
    justify-content: space-between;
  }
  .lucide-search {
    color: #fff !important;
  }
}
.logo {
  border-radius: 50% !important;
}
.utility-bar {
  background-color: white !important;
  color: #000 !important;
}
:root {
  --header-accent: #000000 !important;
}
.main-header,
.nav-link {
  background-color: #fff !important;
  color: #000 !important;
  justify-content: center !important;
}

@media (max-width: 1023px) {
  .main-header,
  .nav-link {
    justify-content: space-between !important;
  }
}
.nav-link:hover {
  border-bottom: 2px solid var(--ap-line);
  color: var(--ap-brand-dark);
  border-bottom-color: var(--secondary-main);
}
.product-card-action-btn,
.product-card-action-btn:active,
.product-card-action-btn:focus,
.product-card-action-btn:hover {
  margin-top: 10px;
  min-height: 42px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
  background: var(--secondary-main) !important;
  color: #fff !important;
  border: 1px solid var(--secondary-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;

  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius) !important;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s !important;
}

/* AL-FARMA PERFUMES — local store CSS (new / working sheet).
   ------------------------------------------------------------------
   This file holds NEW store-level CSS and local overrides. The base
   theme emulation (header, footer, cards, product page) lives in the
   maintained sheet `al-farma-perfumes.css`; update that one for
   existing styles, and add new/override rules here so they win by
   load order.

   Both sheets are loaded, in this order, by the nextron layout for the
   `al-farma-perfumes` slug (see app/(root)/nextron/layout.jsx):
     1) al-farma-perfumes.css        (base — defines brand tokens)
     2) al-farma-perfumes.local.css  (this file — overrides last)
*/

/* --- Bind the shared `alfarma` PDP preset to the store brand ---------
   The code-defined PDP preset (components/common/pdpTemplate/presets/
   alfarma.js + ALFARMA_CSS) is store-agnostic and reads generic tokens
   `--brand`, `--text-color`, `--muted`. The base sheet defines the
   store palette as `--gold`, `--text`, `--muted`, so map them here.
   CSS custom properties resolve at use-site, so defining them at :root
   feeds the preset's `var(--brand, …)` fallbacks the real brand colors. */
:root {
  --brand: var(--gold, #8c6a2b);
  --text-color: var(--text, #1c1c1c);
  /* --muted is already defined by al-farma-perfumes.css (#5c5f62). */
}

/* Use the store display/body fonts inside the PDP preset so it matches
   the rest of the storefront (preset CSS only sets sizes/weights, not
   the family, so this cascades in cleanly). */
.pdp-preset-alfarma .af-name,
.pdp-preset-alfarma .af-notes-title,
.pdp-preset-alfarma .af-overview-title,
.pdp-preset-alfarma .af-brand {
  font-family: var(--font-display, "Urbanist", system-ui, sans-serif);
}
.pdp-preset-alfarma {
  font-family: var(--font-body, "Jost", system-ui, sans-serif);
}

/* Star colour to the store's dedicated rating gold. */
.pdp-preset-alfarma .af-stars__fg {
  color: var(--gold-star, #c8962e);
}

/* --- Add new store-level overrides below --------------------------- */

/* --- Header: single-row layout to match the design reference --------
   Reference (al-farma-perfumes-v2/pdp.html) header is ONE row:
     [ nav menus — left ] [ circular logo — centre ] [ icons — right ]
   The storefront renders the logo + icons on the top row and the nav on
   a SEPARATE row below, and can also show the store name as a text title
   (headerInfo.title_show -> .logo-heading-block). To match the design we:
     1) hide the text title so only the circular logo mark shows, and
     2) on desktop, make the top row a 3-column grid (so the logo is truly
        centred and icons sit right) and lift the nav row up onto it,
        pinned to the left.
   Desktop only — the mobile hamburger header is left untouched. */

/* 1) Show only the circular logo mark — hide the store-name title + punchline. */
.luxury-header .logo-heading-block {
  display: none !important;
}

/* Left-align the menu in EVERY layout. The theme centres the menu row
   (nav.desktop-nav uses justify-content:center); this flushes the menu to
   the left both in the single-row layout (>=1280px) and in the two-row
   fallback below it, and aligns its left edge with the page gutter. */
.luxury-header .desktop-nav {
  justify-content: flex-start !important;
}
.luxury-header .desktop-nav-wrapper {
  padding-left: 40px;
  padding-right: 40px;
}

/* Header menu links — match the reference nav: the store body font (Jost),
   13.5px, medium weight, no extra letter-spacing, ink colour (the theme
   defaults them to Noto Sans 14px / weight 400 / 1px tracking). */
.luxury-header .desktop-menu-container .nav-link {
  font-family: var(--font-body, "Jost", system-ui, -apple-system, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: normal;
  /* the theme sets .nav-link colour with !important, so match it here too */
  color: var(--text, #1c1c1c) !important;
}

/* Single-row layout needs room for the menu on the left AND a centred logo;
   with this store's 7 menu items that only fits on wider desktops. Below
   1280px the storefront keeps its original two-row header (logo row + nav
   row), which avoids the menu colliding with the centred logo. */
@media (min-width: 1280px) {
  /* Tighten the menu-item spacing so all seven items clear the centred logo. */
  .luxury-header .desktop-menu-container .nav-item {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* 2a) Top row -> 3 columns: [flexible | logo | flexible], logo centred,
         utility icons pinned to the right edge. */
  .luxury-header .header-desktop-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
  }
  .luxury-header .main-header {
    grid-column: 2;
    justify-content: center !important;
  }
  .luxury-header .utility-bar {
    grid-column: 3;
    justify-self: end;
    width: auto;
  }

  /* 2b) Lift the separate nav row up onto the logo row and pin the menu
         left. pointer-events keep the empty overlap area click-through so
         the centred logo and right-side icons stay clickable underneath. */
  .luxury-header .header-desktop-wrapper + div {
    margin-top: -94px;
    position: relative;
    z-index: 3;
    pointer-events: none;
    /* The nav row has its own white background; once lifted onto the logo
       row it would paint over the centred logo and the right-side icons, so
       keep the overlay (and its chain) transparent. */
    background: transparent !important;
  }
  .luxury-header .header-desktop-wrapper + div .desktop-nav-wrapper,
  .luxury-header .header-desktop-wrapper + div .desktop-nav {
    background: transparent !important;
  }
  .luxury-header .desktop-nav-wrapper {
    min-height: 94px;
    display: flex;
    align-items: center;
    pointer-events: none;
  }
  /* Only the menu items themselves capture clicks; the rest of the lifted
     nav row stays click-through so the centred logo underneath is usable. */
  .luxury-header .desktop-menu-container > * {
    pointer-events: auto;
  }
  .luxury-header .desktop-menu-container {
    justify-content: flex-start !important;
  }
}

/* --- Brand-promise / USP strip: full-bleed band --------------------------
   The strip HTML (admin "Brand promise strip" HTML collection) wraps the band
   in `.sx-import-wrap { max-width:1320px; padding:0 16px }`, which caps the
   whole band — its top/bottom hairline included — at 1320px centred. On wide
   screens that makes the strip look indented while every other homepage
   section runs edge-to-edge.
   The design reference (al-farma-perfumes-v2/index.html) instead lets the
   `.sx-usp` band span the full viewport and centres only the inner 4-item grid
   at 1320px. Match that here with store CSS (no admin/HTML edit needed):
     1) drop the wrapper cap — scoped with :has(.sx-usp) so any OTHER HTML
        collection using .sx-import-wrap keeps its own width, and
     2) centre the inner grid (it already caps at 1320px via the strip's own
        <style>; auto margins centre it once the band is full width). */
.sx-import-wrap:has(.sx-usp) {
  /* !important: the admin HTML sets these as INLINE styles on the wrap div
     (max-width:1320px; padding-left/right:16px), which a stylesheet rule can
     only beat with !important. */
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Band stays full-bleed (border edge-to-edge); the content gutter is handled
   by the grid so it aligns with the rest of the page. */
.sx-usp {
  padding-left: 0;
  padding-right: 0;
}
/* Align the strip's CONTENT with every other homepage section. Those sit in
   `.page-container` (max-width 1440px, padding px-4 md:px-10 = 16/40px,
   centred), so give the USP grid the same box. This makes the four items line
   up with the category tiles, Best Sellers, etc. instead of sitting ~24px
   further out (it previously capped at the reference's 1320px with no gutter). */
.sx-usp .sx-usp-grid {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .sx-usp .sx-usp-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- Shop By Categories (LargeCategoriesCardV1) — match the reference ------
   Reference (al-farma-perfumes-v2/index.html "Shop by Category"): a centred
   Urbanist 36/700 heading, portrait 4:5 category images (square corners) and
   Urbanist 16/600 labels. The theme defaults render a Noto-Sans 28/600
   heading, square (1:1) images and a Noto-Sans 14/400 label, so restyle the
   three to match. Scoped to the component, so no other store is affected. */
.LargeCategoriesCardV1-component .category-header {
  font-family: var(--font-display, "Urbanist", system-ui, sans-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--text, #1c1c1c);
}
/* Eyebrow above the heading — the reference renders a <span class="eyebrow">
   "Find your signature"</span> before the "Shop by Category" h2 (Jost 11/600,
   uppercase, 2.2px tracking, gold). The theme's component has no eyebrow
   element, so inject the same label via ::before on the (centred) heading. */
.LargeCategoriesCardV1-component .category-header::before {
  content: "Find your signature";
  display: block;
  font-family: var(--font-body, "Jost", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold, #8c6a2b);
  margin-bottom: 6px;
}
/* Portrait 4:5 tiles like the reference (the theme renders them 1:1). The
   image sits inside .cat-card-img-container > .cat-card-img-root > img; give
   the outer box the ratio and let the inner wrapper + image fill it. */
.LargeCategoriesCardV1-component .cat-card-img-container {
  aspect-ratio: 4 / 5;
  height: auto;
}
.LargeCategoriesCardV1-component .cat-card-img-root {
  height: 100%;
}
.LargeCategoriesCardV1-component .cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Category label — Urbanist, 16/600, matching the reference. */
.LargeCategoriesCardV1-component .cat-card-title {
  font-family: var(--font-display, "Urbanist", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #1c1c1c);
}
/* Space above the eyebrow/heading — match the reference, which gives the
   "Shop by Category" section ~72px of top breathing room above the eyebrow
   (the theme default is `.cat-section.py-6` = 24px). Reduce it on phones. */
.LargeCategoriesCardV1-component .cat-section {
  padding-top: 72px;
}
@media (max-width: 767px) {
  .LargeCategoriesCardV1-component .cat-section {
    padding-top: 40px;
  }
}

/* Scale the heading down on phones (36px is oversized at 375px). */
@media (max-width: 767px) {
  .LargeCategoriesCardV1-component .category-header {
    font-size: 26px;
  }
}

/* --- Home section order: brand-promise strip ABOVE categories ------------
   The design reference orders the homepage: hero -> USP/brand-promise strip
   -> Shop by Category -> Best Sellers. The storefront's built-in blocks render
   in a fixed sequence (Banner -> Categories -> HTML collections -> Products),
   so the brand-promise strip (an HTML collection) lands just BELOW the
   built-in Categories block. There is no admin control to move a collection
   above a built-in block, so re-order them here with flex `order`.
   Scoped with :has(.hero-banner-root) so ONLY the homepage <main> becomes a
   flex column (other pages keep their normal block layout). The top four
   blocks get explicit negative orders in the target sequence; every other
   section keeps the default order:0, so it stays in DOM order after them. */
main:has(.hero-banner-root) {
  display: flex;
  flex-direction: column;
}
main:has(.hero-banner-root) > .hero-banner-root {
  order: -5;
}
main:has(.hero-banner-root) > div.section:has(.StoreBanner-component) {
  order: -4;
}
main:has(.hero-banner-root) > div.section:has(.sx-usp) {
  order: -3;
}
main:has(.hero-banner-root)
  > div.section:has(.LargeCategoriesCardV1-component) {
  order: -2;
}

/* --- Best Sellers header — match the reference ---------------------------
   Reference header is a flex row: a left column with the eyebrow
   "Loved by 220+ customers" (Jost 11/600, uppercase, gold) above the Urbanist
   36/700 "Best Sellers" title, and the "Shop All" link on the right, aligned
   to the title's baseline. The theme instead stacks a 24px title with a small
   "Shop All" beneath it. Scoped to the Best Sellers collection via its
   shop-all href (`/collections/bestsellers-1`) so other product grids on the
   page keep their own header. */
.ProductGridCollection-component
  .collection-header:has(.shop-all-link[href*="bestsellers"]) {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
/* Title up to the reference's 36px (26px on phones). */
.collection-header:has(.shop-all-link[href*="bestsellers"]) .heading-title {
  font-size: 36px;
}
@media (max-width: 767px) {
  .collection-header:has(.shop-all-link[href*="bestsellers"]) .heading-title {
    font-size: 26px;
  }
}
/* Eyebrow before the title (the component has no eyebrow element). */
.collection-header:has(.shop-all-link[href*="bestsellers"])
  .heading-title::before {
  content: "Loved by 220+ customers";
  display: block;
  font-family: var(--font-body, "Jost", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold, #8c6a2b);
  margin-bottom: 6px;
}
/* Keep the right-hand link on one line as it sits at the row's baseline. */
.collection-header:has(.shop-all-link[href*="bestsellers"]) .shop-all-link {
  white-space: nowrap;
  flex: none;
}
/* Space below Best Sellers, before the cream combo band. The reference gives
   the Best Sellers section ~6vw (≈72–77px at desktop) of bottom padding so the
   combo band sits well clear of the product cards; the theme leaves almost
   none (the band butts against the ADD-TO-CART buttons). Match the design. */
.ProductGridCollection-component:has(.shop-all-link[href*="bestsellers"]) {
  padding-bottom: clamp(40px, 6vw, 80px);
}

/* Mobile header (<=1023px): centre the logo. The theme lays the mobile bar out
   as space-between, which pushes the logo up next to the back button; a
   3-column grid (back left | logo centre | icons right) centres it instead. */
@media (max-width: 1023px) {
  .luxury-header .main-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .luxury-header .main-header .desk-hide {
    grid-column: 1;
    justify-self: start;
  }
  .luxury-header .main-header .beauty-link {
    grid-column: 2;
    justify-self: center;
  }
  .luxury-header .main-header .mobile-header-icons {
    grid-column: 3;
    justify-self: end;
  }
}
.mobile-menu-button {
  width: fit-content;
}