/* Fonts — must stay at the very top (@import precedes all style rules).
   Cormorant Garamond = headings/product titles (incl. italic for testimonials);
   Jost = body text / product price. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Jost:wght@300;400;500;600;700&display=swap");

/* Generated CSS — uploaded to site_settings.sx_css_location (dedicated slot).
   Bright/light variant. Per-segment blocks, concatenated (no @import / minify).
   Every selector namespaced under .sx; brand colour via --secondary-main;
   other tokens namespaced --sx-* so blocks are self-contained on any theme. */

/* custome css  */

.search-container {
  padding: 0px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}
.search-container .input-container {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  width: 300px !important;
}

.input-container .search-box {
  border-bottom: none !important;
}

@media (min-width: 960px) {
  .app-bar .logo {
    height: 80px;
  }
}

.cat-card {
  padding: 20px 56px !important;
}

.cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px !important;
}

.cat-card-img:hover {
  border: 1px solid var(--gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 30px rgba(176, 138, 52, 0.2) !important;
}
@media (max-width: 600px) {
  .cat-card {
    padding: 12px 20px !important;
  }
}

.app-bar {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--line) !important;
}

.section-heading-container .section-heading {
  font-size: clamp(2rem, 5vw, 2.9rem);
  margin: 8px 0 6px;
  color: var(--ink);
  font-weight: 400 !important;
}

.universal-btn-style {
  border-radius: 999px !important;
  height: 40px !important;
}

.pr-outlined-button:hover {
  background: var(--gold-deep) !important;
  color: var(--cream) !important;
}

/* .ProductGridCollection-component .section-heading-container {
  display:none !important

} */

.section-heading-viewall {
  color: var(--gold-deep) !important;
  border-bottom: 1px solid var(--line);
  top: 20px !important;
}

.section-heading-viewall:hover {
  color: var(--gold-hi) !important;
  text-decoration: none !important;
}

/* BEGIN shoopy-gen:base */
.sx {
  --sx-gold: var(--secondary-main, #b08a34);
  --sx-gold-deep: #8a6c22;
  --sx-bg: #ffffff;
  --sx-bg2: #faf6ee;
  --sx-ink: #241d16;
  --sx-muted: #7a6e5a;
  --sx-line: #ece2cf;
  --sx-line-soft: #f2ebdc;
  --sx-maxw: 1600px;
  --sx-head: "Cormorant Garamond", Georgia, serif;
  --sx-body: "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.sx,
.sx * {
  box-sizing: border-box;
}

.sx-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 30px;
}

.sx-head__k {
  display: inline-block;
  font-family: var(--sx-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sx-gold-deep);
}

.sx-head__h {
  font-family: var(--sx-head);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.08;
  margin: 8px 0 6px;
  color: var(--sx-ink);
}

.sx-head__s {
  font-family: var(--sx-body);
  margin: 0;
  color: var(--sx-muted);
  font-weight: 300;
  font-size: 1rem;
}

.sx-btn {
  display: inline-block;
  font-family: var(--sx-body);
  padding: 13px 30px;
  border-radius: 999px;
  background: var(--sx-ink);
  color: #f7f0e0;
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.25s;
}

.sx-btn:hover {
  background: var(--sx-gold-deep);
}

/* END shoopy-gen:base */

/* BEGIN shoopy-gen:trust-1 */
.sx-trust {
  background: #f3ead6;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 16px;
  padding: 26px 18px;
  max-width: none;
}

.sx-trust__item {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  max-width: 1240px;
}

.sx-trust__ic {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--sx-line);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--sx-gold-deep);
}

.sx-trust__ic svg {
  width: 22px;
  height: 22px;
}

.sx-trust__t {
  font-family: var(--sx-body);
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0;
  color: var(--sx-ink);
  letter-spacing: 0.02em;
}

.sx-trust__d {
  font-family: var(--sx-body);
  font-weight: 300;
  font-size: 0.78rem;
  margin: 2px 0 0;
  color: var(--sx-muted);
}

@media (min-width: 768px) {
  .sx-trust {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    justify-items: center;
    padding: 30px 18px;
  }
}

/* END shoopy-gen:trust-1 */

/* BEGIN shoopy-gen:why-choose-1 */
/* dark feature band — the dramatic mid-page contrast moment */
.sx-why {
  background: radial-gradient(120% 130% at 70% 0%, #241f17 0%, #16120d 70%);
  padding: 58px 18px;
}

.sx-why .sx-head__k {
  color: var(--sx-gold-hi, #caa248);
}

.sx-why .sx-head__h {
  color: #f3efe6;
}

.sx-why .sx-head__s {
  color: #b3a892;
}

.sx-why__grid {
  max-width: var(--sx-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.sx-why__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.015)
  );
  border: 1px solid rgba(201, 162, 75, 0.2);
  border-radius: 10px;
  transition: 0.25s;
}

.sx-why__item:hover {
  border-color: rgba(201, 162, 75, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.sx-why__ic {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background: rgba(201, 162, 75, 0.08);
  display: grid;
  place-items: center;
  color: var(--sx-gold-hi, #caa248);
}

.sx-why__ic svg {
  width: 24px;
  height: 24px;
}

.sx-why__t {
  font-family: var(--sx-head);
  font-weight: 600;
  font-size: 1.32rem;
  margin: 2px 0 6px;
  color: #f3efe6;
}

.sx-why__d {
  font-family: var(--sx-body);
  font-weight: 300;
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
  color: #a89c88;
}

@media (min-width: 640px) {
  .sx-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .sx-why__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

/* END shoopy-gen:why-choose-1 */

/* BEGIN shoopy-gen:our-story-1 */
.sx-story {
  background: #f4ebda;
  padding: 0;
}

.sx-story__in {
  max-width: var(--sx-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.sx-story__media {
  position: relative;
  min-height: 280px;
}

.sx-story__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.sx-story__body {
  padding: 42px 24px 48px;
}

.sx-story__body .sx-head__k {
  display: block;
  text-align: left;
  margin-bottom: 10px;
}

.sx-story__body .sx-head__h {
  text-align: left;
  font-size: clamp(2rem, 5vw, 2.7rem);
}

.sx-story__p {
  font-family: var(--sx-body);
  font-weight: 300;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--sx-muted);
  margin: 16px 0 0;
}

.sx-story__stats {
  display: flex;
  gap: 30px;
  margin: 26px 0 28px;
  flex-wrap: wrap;
}

.sx-story__n {
  display: block;
  font-family: var(--sx-head);
  font-weight: 600;
  font-size: 2rem;
  color: var(--sx-gold-deep);
  line-height: 1;
}

.sx-story__l {
  display: block;
  font-family: var(--sx-body);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-muted);
  margin-top: 6px;
}

@media (min-width: 860px) {
  .sx-story__in {
    grid-template-columns: 1fr 1.05fr;
  }

  .sx-story__media {
    height: 100%;
  }

  .sx-story__body {
    padding: 56px 56px 56px 48px;
  }
}

/* END shoopy-gen:our-story-1 */

/* BEGIN shoopy-gen:testimonials-1 */
.sx-tm {
  background: var(--sx-bg);
  padding: 2px 2px 2px;
}

.sx-tm__grid {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sx-tm__card {
  background: #faf4e8;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  padding: 28px 26px;
  box-shadow: 0 8px 22px rgba(60, 48, 28, 0.06);
}

.sx-tm__stars {
  color: var(--sx-gold);
  letter-spacing: 0.18em;
  font-size: 0.9rem;
}

.sx-tm__q {
  font-family: var(--sx-head);
  font-style: italic;
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--sx-ink);
  margin: 14px 0 20px;
}

.sx-tm__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sx-tm__av {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sx-gold);
  color: #fff;
  font-family: var(--sx-head);
  font-weight: 600;
  font-size: 1.1rem;
}

.sx-tm__name {
  font-family: var(--sx-body);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--sx-ink);
}

.sx-tm__meta {
  font-family: var(--sx-body);
  font-weight: 300;
  font-size: 0.74rem;
  color: var(--sx-muted);
  margin-top: 2px;
}

@media (min-width: 760px) {
  .sx-tm__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* END shoopy-gen:testimonials-1 */

/* BEGIN shoopy-gen:reels-1 */
.sx-reels {
  background: #f4ebda;
  padding: 52px 0 56px;
}

.sx-reels .sx-head {
  padding: 0 18px;
}

.sx-reels__row {
  display: flex;
  gap: 14px;
  max-width: var(--sx-maxw);
  margin: 0 auto;
  overflow-x: auto;
  padding: 6px 18px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.sx-reels__card {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 10px 26px rgba(60, 48, 28, 0.12);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.sx-reels__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sx-reels__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(60, 48, 28, 0.2);
}

.sx-reels__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  display: grid;
  place-items: center;
  color: #1c1712;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.sx-reels__play svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.sx-reels__tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 26px 12px 11px;
  color: #fff;
  font-family: var(--sx-body);
  font-size: 0.78rem;
  font-weight: 500;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

.sx-reels__tag svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.sx-reels__cta {
  text-align: center;
  margin-top: 22px;
}

@media (min-width: 1024px) {
  .sx-reels__row {
    overflow: visible;
    justify-content: center;
  }

  .sx-reels__card {
    width: auto;
    flex: 1 1 0;
    max-width: 230px;
  }
}

/* END shoopy-gen:reels-1 */

/* Extracted from index.html */

:root {
  --secondary-main: #b08a34;
  --gold: #b08a34;
  --gold-deep: #8a6c22;
  --gold-hi: #caa248;
  --gold-soft: #f3e9d2;
  --bg: #ffffff;
  --bg-soft: #faf6ee;
  --sand: #f4ebd9;
  --sand-deep: #efe3cb;
  --surface: #fcfaf4;
  --card: #ffffff;
  --ink: #241d16;
  --cream: #f7f0e0;
  --muted: #7a6e5a;
  --line: #ece2cf;
  --line-soft: #f2ebdc;
  --green: #5c7d54;
  --maxw: 1600px;
  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --typography-font-family:
    "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* --typography-font-family: "Cormorant Garamond", Georgia, serif; */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  margin: 0;
  line-height: 1.08;
  font-weight: 600;
}

.wrap {
  max-width: auto;
  margin: 0 auto;
  padding: 0 0px;
}

.sec {
  padding: 46px 0;
}

.sec--soft {
  background: var(--sand);
}

.seclabel {
  font: 500 10px/1.4 monospace;
  color: #cdbf9f;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 12px 0 0;
}

.head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}

.head__k {
  display: inline-block;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.head__k::before,
.head__k::after {
  content: "—";
  margin: 0 0.55em;
  color: var(--line);
}

.head__h {
  font-size: clamp(2rem, 5vw, 2.9rem);
  margin: 8px 0 6px;
  color: var(--ink);
}

.head__s {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  font-size: 1rem;
}

.head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--maxw);
  text-align: left;
  gap: 16px;
}

.head--row .head__h {
  margin-bottom: 0;
}

.head__cta {
  text-align: center;
  margin-top: 24px;
}

.viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-deep);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  white-space: nowrap;
}

.viewall:hover {
  color: var(--gold-hi);
}

/* Notice (C) — slim charcoal announcement for premium contrast */
.notice {
  background: #1c1712;
  color: var(--gold-soft);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 9px 14px;
}

/* Header (C) */

.nav-link {
  gap: 22px;
  margin-left: 6px;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.82;
}

.nav-link:hover {
  color: var(--gold-deep) !important;
  opacity: 1;
}

.nav-link--trade {
  color: var(--gold-deep) !important;
  opacity: 1 !important;
}

/* Hero (A) — photo + crisp HTML text overlay */
.hero {
  position: relative;
  background: var(--bg);
}

.hero__link {
  display: block;
  position: relative;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 7%;
  background: linear-gradient(
    90deg,
    rgba(250, 246, 238, 0.94) 0%,
    rgba(250, 246, 238, 0.7) 30%,
    rgba(250, 246, 238, 0) 56%
  );
}

.hero__kick {
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.hero__h {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.04;
  margin: 0.32em 0 0;
  letter-spacing: 0.005em;
}

.hero__h em {
  font-style: italic;
  color: var(--gold-deep);
}

.hero__sub2 {
  color: var(--muted);
  font-size: clamp(0.9rem, 1.3vw, 1.08rem);
  font-weight: 300;
  margin: 1em 0 0;
  max-width: 30ch;
}

.hero__cta {
  margin-top: 1.5em;
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__sub {
  text-align: center;
  font-size: 0.74rem;
  color: #b6a886;
  padding: 10px 16px 0;
  letter-spacing: 0.02em;
}

/* Banner (A) — photo + crisp HTML text overlay */
.ban__wrap {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(60, 48, 28, 0.08);
}

.ban img {
  width: 100%;
  height: auto;
  display: block;
}

.ban__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 7%;
  background: linear-gradient(
    90deg,
    rgba(249, 244, 235, 0.93) 0%,
    rgba(249, 244, 235, 0.6) 34%,
    rgba(249, 244, 235, 0) 60%
  );
}

.ban__kick {
  font-size: clamp(0.66rem, 0.9vw, 0.82rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.ban__h {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.06;
  margin: 0.3em 0 0;
}

.ban__sub {
  color: var(--muted);
  font-weight: 300;
  font-size: clamp(0.86rem, 1.1vw, 1rem);
  margin: 0.7em 0 0;
  max-width: 30ch;
}

.ban__cta {
  margin-top: 1.2em;
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  padding: 11px 26px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Footer (C) — deep charcoal anchors the bright page & suits the dark logo */
.ft {
  background: #1c1712;
  color: #cabfa9;
  margin-top: 10px;
}

.ft__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 46px 44px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 18px;
}

.ft__brand {
  grid-column: 1 / -1;
}

.ft__brand img {
  height: 88px;
  width: auto;
}

.ft__brand p {
  color: #9a907e;
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 32ch;
}

.ft h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-hi);
  margin: 0 0 14px;
  font-weight: 500;
}

.ft a,
.ft li {
  color: #b3a892;
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 2.1;
  list-style: none;
}

.ft ul {
  margin: 0;
  padding: 0;
}

.ft a:hover {
  color: var(--gold-hi);
}

.ft__soc {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.ft__soc a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(202, 162, 72, 0.12);
  border: 1px solid rgba(202, 162, 72, 0.18);
  display: grid;
  place-items: center;
}

.ft__soc a:hover {
  background: rgba(202, 162, 72, 0.22);
}

.ft__soc svg {
  width: 18px;
  height: 18px;
  fill: var(--gold-soft);
}

.ft__pay {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ft__pay span {
  background: rgba(255, 255, 255, 0.06);
  color: #cabfa9;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ft__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  padding: 16px;
  font-size: 0.74rem;
  color: #7d7363;
  font-weight: 300;
}

.wafloat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.4);
}

.wafloat svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

@media (min-width: 600px) {
  .prow {
    grid-auto-columns: 44%;
  }

  .pgrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cats {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
}

@media (min-width: 768px) {
  .hdr__burger {
    display: none;
  }

  .hdr__nav {
    display: flex;
  }

  .hdr__search {
    display: flex;
  }

  .cat__ic {
    width: 96px;
    height: 96px;
  }

  .ft__in {
    grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
    gap: 26px 28px;
  }

  .ft__brand {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  .cats {
    grid-template-columns: repeat(5, 1fr);
  }

  .prow {
    grid-auto-columns: calc((100% - 64px) / 5);
  }

  .pgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* hero/banner text -> top-centered on portrait phones */
@media (max-width: 767px) {
  .hero__overlay {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 9% 8% 0;
    background: linear-gradient(
      180deg,
      rgba(250, 246, 238, 0.96) 0%,
      rgba(250, 246, 238, 0.62) 30%,
      rgba(250, 246, 238, 0) 52%
    );
  }

  .hero__sub2 {
    display: none;
  }

  .ban__overlay {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 8% 8% 0;
    background: linear-gradient(
      180deg,
      rgba(249, 244, 235, 0.96) 0%,
      rgba(249, 244, 235, 0.6) 32%,
      rgba(249, 244, 235, 0) 54%
    );
  }

  .ban__sub {
    display: none;
  }
}

.notice {
  padding-top: 5px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 5px !important;
  background-color: #000 !important;
}

.section-heading {
  text-align: center !important;
  font-size: clamp(2rem, 5vw, 2.9rem);
  margin: 8px 0 6px;
  color: var(--ink);
}

.section-heading-container {
  align-items: center !important;
}

/* =========================================================
   Mobile Testimonial Scroll Fix
   - Desktop remains unchanged
   - Mobile testimonials scroll horizontally
   - Heading keeps desktop-style center alignment
   ========================================================= */
@media (max-width: 767px) {
  .sx-tm {
    overflow: hidden !important;
    padding: 40px 0 46px !important;
  }

  .sx-tm .sx-head {
    text-align: center !important;
    max-width: 640px !important;
    margin: 0 auto 30px !important;
    padding: 0 18px !important;
  }

  .sx-tm .sx-head__k {
    display: inline-block !important;
    font-family: var(--sx-body) !important;
    font-weight: 500 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: var(--sx-gold-deep) !important;
  }

  .sx-tm .sx-head__h {
    font-family: var(--sx-head) !important;
    font-weight: 600 !important;
    font-size: clamp(2rem, 5vw, 2.9rem) !important;
    line-height: 1.08 !important;
    margin: 8px 0 6px !important;
    color: var(--sx-ink) !important;
    text-align: center !important;
  }

  .sx-tm__grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 18px 16px !important;
  }

  .sx-tm__grid::-webkit-scrollbar {
    display: none !important;
  }

  .sx-tm__card {
    flex: 0 0 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start !important;
    padding: 26px 22px !important;
  }
}

@media (max-width: 430px) {
  .sx-tm__card {
    flex-basis: 88% !important;
    min-width: 88% !important;
    max-width: 88% !important;
  }
}

@media screen and (max-width: 600px) {
  .cat-card-img {
    border: 1px solid rgb(255, 255, 255) !important;
  }
}

/* =========================================================
   Roazbling — Product card (classic theme)
   Match the "bright" preview product card.
   Targets the live classic-theme markup:
     .pr-long-card  → card shell (MUI Card)
     .pr-image-ctn  → image panel   .pr-image → img
     .pr-discount   → OFF badge      .pr-wishlist → heart
     .pr-card-content → body
     .pr-title / .pr-price / .pr-sale-price / .pr-mrp-price
     .pr-outlined-button → ADD TO BAG
   NOTE: earlier blocks used element selectors (pr-title{})
   which never matched the .pr-title class — these class-based
   rules are the ones that actually apply.
   ========================================================= */

/* Card shell — soft cream border, larger radius, gentle lift */
.pr-long-card.sh-product-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(60, 48, 28, 0.06) !important;
  padding: 0 !important;
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}

.pr-long-card.sh-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 38px rgba(60, 48, 28, 0.14) !important;
  border-color: var(--line-soft) !important;
}

/* Image panel — warm cream backdrop, full-bleed to the card edges
   (card overflow:hidden + 20px radius rounds the top corners) */
.pr-long-card .pr-image-ctn {
  background: linear-gradient(160deg, #f8f3ea 0%, #f1e8d8 100%) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.pr-long-card .pr-image {
  border-radius: 0 !important;
}

/* OFF badge — white pill, top-right (e.g. "30% OFF") */
.pr-long-card .pr-discount {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Wishlist — clean white circle */
.pr-long-card .pr-wishlist {
  background: rgba(255, 255, 255, 0.92) !important;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Body spacing — card padding is 0, so content carries its own gutter */
.pr-long-card .pr-card-content {
  padding: 16px 18px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Title — serif, lighter weight (elegant, not bold) */
/* Title — exact preview values: Cormorant 1.12rem / 600 / lh 1.2 */
.pr-long-card .pr-title {
  font-family: var(--font-head) !important;
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 2px !important;
}

/* Price row */
.pr-long-card .pr-price {
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap;
  margin-top: 2px !important;
}

/* Sale price — exact preview values: Jost (body) 1.05rem / 600 */
.pr-long-card .pr-sale-price {
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* MRP — exact preview values: Jost (body) 0.82rem / 400 */
.pr-long-card .pr-mrp-price {
  font-family: var(--font-body) !important;
  color: #b3a892 !important;
  text-decoration: line-through !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
}

/* =========================================================
   BUTTONS — one consistent system
   • Solid/outlined CTA  (.pr-outlined-button  → Add / Buy now)
   • Plus-minus stepper  (.pr-plus-minus-button)
   • Variant selector    (.pr-var-btn)
   • Home-section CTA     (.sx-btn)
   Height: 40px everywhere.  Hover: same gold-deep fill.
   ========================================================= */

/* --- Variant / quantity selector: light outlined pill, 40px --- */
.pr-long-card .pr-var-btn {
  min-height: 30px !important;
  height: 30px !important;
  margin-top: 8px !important;
  padding: 0 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  text-transform: none !important;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease !important;
}

/* Consistent hover for the outlined selector (accent, not a jarring fill) */
.pr-long-card .pr-var-btn:hover {
  border-color: var(--gold-deep) !important;
  color: var(--gold-deep) !important;
  background: var(--bg-soft) !important;
}

/* =========================================================
   "Select Variant" modal — Add / Enquire button fix
   ---------------------------------------------------------
   Each variant row (.pr-var-card) is: image | title+price+grams,
   with the CTA block (.action) pinned position:absolute bottom-right.
   Because the app markup reserves only a small strip for those
   absolute buttons, the (oversized) Add + Enquire pills spilled
   upward and overlapped the product title on longer names.

   Fix (CSS only, scoped to the modal via .pr-var-card):
   • un-pin the CTA block so it flows *below* the title/price
   • collapse the reserved-space gap left over from the old layout
   • give both CTAs one calm, consistent height
   ========================================================= */

/* Stack title + CTAs vertically, centred against the thumbnail */
.pr-var-card .MuiGrid-item + .MuiGrid-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Trim the content padding so the block sits tight to the thumbnail */
.pr-var-card .MuiCardContent-root.product {
  padding: 4px 10px 0 6px !important;
}

/* The grams/attributes row carries an inline margin-bottom:32px that
   used to reserve room for the absolute buttons — collapse it now
   that the buttons flow in normal order. */
.pr-var-card .MuiCardContent-root.product > div:last-child {
  margin-bottom: 6px !important;
}

/* Un-pin the CTA block: let Add + Enquire flow under the details */
.pr-var-card .action {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  width: 100% !important;
  padding: 0 10px 10px 6px !important;
  margin: 0 !important;
}

/* Lay Add + Enquire out side by side (single row) instead of stacked */
.pr-var-card .action > div {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

/* Each CTA row shares the width equally in the row */
.pr-var-card .action > div > div {
  flex: 1 1 0 !important;
  width: auto !important;
  min-height: 0 !important;
}

/* One consistent, not-oversized height for both CTAs */
.pr-var-card .action .pr-outlined-button,
.pr-var-card .action .pr-card-action-enquiry {
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* =========================================================
   Product card CTAs (grid) — slimmer, balanced height
   The Add / Enquire pills sat at 40px while the variant
   selector pill is 30px, so they read as too tall. Bring
   them down to a calmer 34px across breakpoints.
   ========================================================= */
.pr-long-card .pr-outlined-button,
.pr-long-card .pr-card-action-enquiry {
  min-height: 34px !important;
  height: 34px !important;
}

features-container,
features-container + hr {
  display: none !important;
}


.MuiTypography-root.MuiTypography-body1.pr-two-col-vatext.mui-9l3uo3 {
    text-transform: uppercase !important;
}

p.MuiTypography-root.MuiTypography-body1.mui-9l3uo3{
    text-transform: uppercase !important;
}