/* ============================================================
   PlantMyst v2 — design system
   Direction: Botanical editorial, made in Pakistan.
   Mobile-first, premium, modern. Avoids generic e-com aesthetics.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* palette */
  --ink:        #1A2E22;
  --forest:     #2E5D3F;
  --forest-d:   #173427;
  --moss:       #4A7C59;
  --sage:       #C5D4BC;
  --sage-l:     #D9E5DA;
  --terracotta: #D17A4A;
  --terracotta-d:#A95828;
  --bloom:      #E89A4F;
  --cream:      #F8F4ED;
  --cream-d:    #EFE7D6;
  --paper:      #FFFCF6;
  --line:       #E6DECD;
  --muted:      #6B7A6E;

  /* type */
  --f-display:  'Fraunces', ui-serif, Georgia, serif;
  --f-body:     'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  /* radius */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* shadow — botanical: warm, soft, layered */
  --shadow-sm: 0 1px 2px rgba(23,52,39,.05);
  --shadow-md: 0 4px 18px -8px rgba(23,52,39,.18), 0 1px 2px rgba(23,52,39,.04);
  --shadow-lg: 0 24px 48px -20px rgba(23,52,39,.28), 0 4px 10px -6px rgba(23,52,39,.08);

  /* layout */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 56px);

  /* type axis presets for Fraunces — gives the brand its personality */
  --fr-headline: "opsz" 144, "SOFT" 50, "WONK" 0;
  --fr-italic:   "opsz" 144, "SOFT" 100, "WONK" 1;
}

* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(1200px 600px at 100% -200px, rgba(46,93,63,.10), transparent 60%),
    radial-gradient(900px 500px at -200px 80%, rgba(209,122,74,.08), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* safety net for rogue absolute/SVG decos that escape their parents */
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* generic .i = inline icon, sized by parent or default 18px */
.i { width: 18px; height: 18px; flex: none; }

/* ---------- TYPE ---------- */
.pm-display, .pm-h1, .pm-h2, .pm-h3 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--forest-d);
  margin: 0;
  font-variation-settings: var(--fr-headline);
}
.pm-display { font-size: clamp(2.4rem, 8vw, 4.8rem); letter-spacing: -0.025em; }
.pm-h1      { font-size: clamp(1.9rem, 5.5vw, 3rem); }
.pm-h2      { font-size: clamp(1.5rem, 4.2vw, 2.25rem); line-height: 1.1; }
.pm-h3      { font-size: 1.25rem; line-height: 1.2; }

.pm-display em, .pm-h1 em, .pm-h2 em, .pm-h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terracotta);
  font-variation-settings: var(--fr-italic);
}

.pm-display--cream, .pm-display--cream em { color: var(--cream); }
.pm-display--cream em { color: var(--bloom); }
.pm-display--sm { font-size: clamp(1.8rem, 5.5vw, 3rem); }

.pm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
}
.pm-eyebrow--green {
  background: rgba(46,93,63,.08);
  padding: .5em .9em;
  border-radius: var(--r-pill);
}
.pm-eyebrow--cream { color: var(--sage); }

/* ---------- BUTTONS ---------- */
.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: .85em 1.4em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.pm-btn:hover { transform: translateY(-1px); }
.pm-btn:active { transform: translateY(0); }
.pm-btn--lg { padding: 1.05em 1.7em; font-size: 1rem; }
.pm-btn--block { width: 100%; }
.pm-btn--grow { flex: 1; min-width: 0; }
.pm-btn--icon { padding: .85em; width: 3em; height: 3em; }
.pm-btn .i { width: 18px; height: 18px; }
.pm-btn--lg .i { width: 20px; height: 20px; }

.pm-btn--primary {
  background: var(--forest-d);
  color: var(--cream);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.08);
}
.pm-btn--primary:hover { background: var(--forest); box-shadow: var(--shadow-md); }

.pm-btn--ghost {
  background: transparent;
  color: var(--forest-d);
  border-color: var(--forest-d);
}
.pm-btn--ghost:hover { background: var(--forest-d); color: var(--cream); }

.pm-btn--wa {
  background: #128C7E;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.pm-btn--wa:hover { background: #0e6f64; }

.pm-btn--cod {
  background: var(--bloom);
  color: var(--forest-d);
}
.pm-btn--cod:hover { background: var(--terracotta); color: var(--cream); }

.pm-btn--cream {
  background: var(--cream);
  color: var(--forest-d);
}
.pm-btn--cream:hover { background: var(--paper); }

.pm-btn--text {
  padding: .3em .1em;
  color: var(--forest-d);
  border-bottom: 1.5px solid var(--terracotta);
  border-radius: 0;
}
.pm-btn--text:hover { color: var(--terracotta); transform: none; }

/* ---------- NAV ---------- */
.pm-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,244,237,.85);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.pm-nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.pm-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
  font-weight: 500;
  justify-self: center;
}
.pm-logo__mark {
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: var(--forest-d);
  color: var(--cream);
  display: grid; place-items: center;
}
.pm-logo__mark .i { width: 18px; height: 18px; }
.pm-logo--light { color: var(--cream); }
.pm-logo--light .pm-logo__mark { background: var(--cream); color: var(--forest-d); }

/* Brand logo image uploaded via Customizer.
   The uploaded JPG has a white background (JPGs can't be transparent), which
   would render as an awkward white box. `mix-blend-mode: multiply` makes white
   pixels blend into the cream nav background so only the green leaf icon shows.
   The footer uses the SVG mark instead — multiply doesn't drop white cleanly
   against the dark forest bg, so footer.php skips the JPG there. */
.pm-logo__img {
  max-height: 32px;
  width: auto;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  flex: none;
}
@media (min-width: 720px) { .pm-logo__img { max-height: 38px; } }

.pm-nav__menu, .pm-icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  position: relative;
}
.pm-icon-btn:hover, .pm-nav__menu:hover { background: rgba(46,93,63,.08); }
.pm-nav__actions { display: flex; gap: 4px; justify-self: end; }
.pm-icon-btn__badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--terracotta); color: #fff;
  font-size: .65rem; font-weight: 700;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  line-height: 1;
}

/* ticker */
.pm-ticker {
  background: var(--forest-d);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  overflow: hidden;
  border-bottom: 1px solid var(--forest);
}
.pm-ticker__track {
  display: flex;
  gap: 22px;
  padding: 8px 0;
  white-space: nowrap;
  width: max-content;
  animation: tickerSlide 32s linear infinite;
}
.pm-ticker__track span:nth-child(even) { color: var(--bloom); }
@keyframes tickerSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* drawer */
.pm-drawer {
  position: fixed; inset: 0 30% 0 0;
  background: var(--paper);
  z-index: 80;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.65,0,.35,1);
  padding: 18px var(--gutter);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.pm-drawer[data-open] { transform: translateX(0); }
.pm-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.pm-drawer__nav { display: flex; flex-direction: column; gap: 2px; padding: 24px 0; flex: 1; }
.pm-drawer__nav a {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--forest-d);
  padding: 10px 0;
  font-variation-settings: var(--fr-headline);
}
.pm-drawer__nav a:hover { color: var(--terracotta); }
.pm-drawer__foot { padding-top: 16px; border-top: 1px solid var(--line); }
.pm-scrim {
  position: fixed; inset: 0; background: rgba(23,52,39,.4); z-index: 70;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.pm-scrim[data-open] { opacity: 1; pointer-events: auto; }

/* ---------- DESIGN TOKENS PANEL ---------- */
.pm-tokens {
  max-width: var(--container);
  margin: 24px auto;
  padding: 0 var(--gutter);
}
.pm-tokens > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.pm-tokens > summary::-webkit-details-marker { display: none; }
.pm-tokens__hint { font-size: .8rem; color: var(--muted); }
.pm-tokens__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
.pm-tokens__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.pm-tokens__title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 14px;
  font-variation-settings: var(--fr-headline);
  color: var(--forest-d);
}
.pm-tokens__note { font-size: .78rem; color: var(--muted); margin: 12px 0 0; }
.pm-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pm-swatch {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem;
}
.pm-swatch::before {
  content: "";
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--c);
  border: 1px solid rgba(0,0,0,.06);
  flex: none;
}
.pm-swatch span { font-weight: 600; }
.pm-swatch code { color: var(--muted); font-size: .72rem; }
.pm-type-row { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.pm-type-row:last-child { border: 0; }
.pm-type-label { font-size: .7rem; color: var(--muted); width: 70px; flex: none; letter-spacing: .1em; text-transform: uppercase; }
.pm-type-sample { font-size: .95rem; }
.pm-type-sample.pm-display { font-size: 1.6rem; }
.pm-type-sample.pm-h1 { font-size: 1.3rem; }
.pm-type-sample.pm-h2 { font-size: 1.1rem; }
.pm-btn-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pm-icons span {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--forest-d);
  background: var(--cream);
}
.pm-icons .i { width: 22px; height: 22px; }

@media (min-width: 720px) {
  .pm-tokens__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pm-tokens__grid { grid-template-columns: repeat(4, 1fr); }
  .pm-icons { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- HERO ---------- */
.pm-hero {
  position: relative;
  overflow: hidden;
  padding: 36px var(--gutter) 56px;
}
.pm-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.pm-hero__copy { order: 1; }
.pm-hero__viz  { order: 2; }
.pm-hero__copy .pm-display { margin: 16px 0 14px; }
.pm-hero__sub {
  font-size: 1.05rem;
  color: var(--ink);
  max-width: 38ch;
  margin: 0 0 24px;
  line-height: 1.55;
}
.pm-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pm-hero__cta .pm-btn { flex: 1 1 auto; min-width: 160px; }
.pm-hero__trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pm-hero__trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--forest-d); font-weight: 500;
}
.pm-hero__trust .i { color: var(--terracotta); }

.pm-hero__deco { position: absolute; opacity: .14; pointer-events: none; }
.pm-hero__deco--leaf {
  width: 280px; height: 280px;
  top: -40px; right: -80px;
  color: var(--forest);
  transform: rotate(18deg);
}
.pm-hero__deco--branch {
  width: 240px; height: 240px;
  bottom: -30px; left: -40px;
  color: var(--terracotta);
  transform: rotate(-12deg);
}

.pm-hero__viz {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}
.pm-disc {
  width: 88%;
  max-width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--sage), var(--moss));
  display: grid; place-items: center;
  position: relative;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.pm-disc::before {
  content: "";
  position: absolute; inset: 14px;
  border: 1px dashed rgba(248,244,237,.45);
  border-radius: 50%;
}
.pm-bottle { width: 55%; filter: drop-shadow(0 18px 24px rgba(23,52,39,.35)); animation: float 6s ease-in-out infinite; }
.pm-bottle--lg { width: 70%; max-width: 280px; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.pm-disc__price {
  position: absolute;
  top: 12%; right: 8%;
  background: var(--paper);
  color: var(--forest-d);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 12px 14px;
  border-radius: var(--r-pill);
  font-variation-settings: var(--fr-headline);
  box-shadow: var(--shadow-md);
  transform: rotate(8deg);
  z-index: 2;
}

.pm-hero__badge {
  position: absolute;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.pm-hero__badge--rating {
  bottom: 6%; left: 0%;
  flex-direction: column; align-items: flex-start; gap: 2px;
}
.pm-hero__badge--rating strong { font-family: var(--f-display); font-size: 1.3rem; color: var(--forest-d); font-variation-settings: var(--fr-headline); }
.pm-hero__badge--rating small { color: var(--muted); font-size: .68rem; }
.pm-hero__badge--bestseller {
  top: 18%; left: -2%;
  background: var(--terracotta);
  color: var(--cream);
  font-weight: 600;
}
.pm-hero__badge--bestseller .i { color: var(--cream); }

@media (min-width: 720px) {
  .pm-hero { padding: 56px var(--gutter) 80px; }
  .pm-hero__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .pm-hero__copy { order: 1; }
  .pm-hero__viz  { order: 2; }
  .pm-hero__deco--leaf  { width: 420px; height: 420px; right: -120px; top: -80px; }
  .pm-hero__deco--branch{ width: 320px; height: 320px; left: -60px; bottom: -60px; }
}

/* stars */
.pm-stars {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--bloom);
}
.pm-stars .i { width: 16px; height: 16px; }
.pm-stars--sm .i { width: 13px; height: 13px; }
.pm-stars--sm em { color: var(--muted); font-style: normal; font-size: .8rem; margin-left: 6px; }
.pm-stars--big .i { width: 20px; height: 20px; }
.pm-stars--big strong { font-family: var(--f-display); font-size: 1.6rem; color: var(--forest-d); margin-left: 10px; font-variation-settings: var(--fr-headline); }
.pm-stars--big em { color: var(--muted); font-style: normal; font-size: .85rem; margin-left: 8px; }

/* ---------- TRUST STRIP ---------- */
.pm-trust {
  padding: 12px var(--gutter) 32px;
}
.pm-trust__scroll {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.pm-trust__scroll::-webkit-scrollbar { display: none; }
.pm-trust__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 6px 14px;
}
.pm-trust__icon {
  grid-row: 1 / span 2;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--sage-l);
  color: var(--forest-d);
}
.pm-trust__icon .i { width: 22px; height: 22px; }
.pm-trust__item h4 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
}
.pm-trust__item p { margin: 0; font-size: .85rem; color: var(--muted); }

@media (min-width: 720px) {
  .pm-trust__scroll {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: unset;
    overflow: visible;
  }
}

/* ---------- GENERIC SECTION ---------- */
.pm-section {
  padding: 56px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.pm-section--cream {
  background: var(--cream-d);
  border-radius: var(--r-xl);
  margin-top: 24px;
  max-width: calc(var(--container) - 0px);
}
.pm-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pm-section__sub { color: var(--muted); font-size: 1rem; margin: 4px 0 0; max-width: 50ch; }
.pm-section__foot { text-align: center; margin-top: 32px; }

/* ---------- PRODUCT CARDS ---------- */
.pm-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) { .pm-products { grid-template-columns: repeat(3, 1fr); } }

.pm-product-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pm-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.pm-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--card-1), color-mix(in srgb, var(--card-2) 20%, var(--card-1)));
  overflow: hidden;
  display: block;
}
.pm-product-card__media::after {
  content: "";
  position: absolute; bottom: -40%; left: -10%;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--card-2) 0%, transparent 60%);
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}
.pm-product-card__bottle {
  position: absolute; top: 50%; left: 50%;
  width: 42%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 16px rgba(23,52,39,.25));
  transition: transform .4s ease;
  z-index: 1;
}
.pm-product-card:hover .pm-product-card__bottle { transform: translate(-50%, -50%) scale(1.06) rotate(-2deg); }

.pm-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--forest-d); color: var(--cream);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  z-index: 2; /* stays above the full-bleed product image */
}
.pm-tag--bestseller { background: var(--terracotta); }

.pm-product-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.pm-product-card__body p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.pm-product-card__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.pm-price { display: inline-flex; align-items: baseline; gap: 8px; }
.pm-price__num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
}
.pm-price__num--xl { font-size: 2.1rem; }
.pm-price__old {
  font-size: .85rem;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--terracotta);
}

/* ---------- CATEGORIES ---------- */
.pm-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 1024px) { .pm-cats { grid-template-columns: repeat(4, 1fr); } }

.pm-cat {
  background: var(--cat-bg, var(--sage-l));
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
  color: var(--forest-d);
  transition: transform .3s ease;
}
.pm-cat:hover { transform: translateY(-4px); }
.pm-cat__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--paper);
  display: grid; place-items: center;
  color: var(--forest-d);
  margin-bottom: auto;
}
.pm-cat__icon .i { width: 22px; height: 22px; }
.pm-cat h4 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 500;
  font-variation-settings: var(--fr-headline);
}
.pm-cat p { margin: 0; font-size: .82rem; color: var(--forest-d); opacity: .75; }
.pm-cat__arrow {
  position: absolute; bottom: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--forest-d);
  color: var(--cream);
  display: grid; place-items: center;
  transition: transform .3s ease;
}
.pm-cat:hover .pm-cat__arrow { transform: translateX(4px) rotate(-12deg); }

/* ---------- PDP (single product page preview) ---------- */
.pm-pdp {
  padding: 40px var(--gutter) 80px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 24px;
}
.pm-pdp__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) { .pm-pdp__inner { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } }

/* ---------- PDP gallery ----------
   Rendered by WC's native woocommerce_show_product_images().
   When the theme declares wc-product-gallery-* supports, WC also injects
   an inline `opacity: 0` style on the gallery container that's only removed
   once FlexSlider finishes booting. If LiteSpeed defers/minifies the JS and
   the slider doesn't initialize, the gallery stays invisible forever.
   We forcibly override that opacity so images render regardless of slider
   state, and keep our CSS simple enough not to fight FlexSlider's own
   width/height calculations on the viewport + figure. */
.pm-pdp__gallery { position: relative; }

.pm-pdp__gallery .woocommerce-product-gallery {
  position: relative !important;
  opacity: 1 !important;             /* override WC inline opacity:0 */
  visibility: visible !important;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--sage-l), var(--sage));
  margin-bottom: 0;
}

/* Don't constrain figure/viewport with aspect-ratio — FlexSlider sets these
   inline. Just style the slide containers. */
.pm-pdp__gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}
.pm-pdp__gallery .woocommerce-product-gallery__image {
  position: relative;
}
.pm-pdp__gallery .woocommerce-product-gallery__image a {
  display: block;
  line-height: 0; /* removes the descender gap under the inline image */
}
.pm-pdp__gallery .woocommerce-product-gallery__image img,
.pm-pdp__gallery .woocommerce-product-gallery__image .wp-post-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* parent container already clips with border-radius */
}

/* Fullscreen lightbox trigger (the small magnifier icon WC adds) */
.pm-pdp__gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--forest-d);
  display: grid;
  place-items: center;
  text-indent: -9999px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  transition: background .2s, color .2s, transform .2s;
}
.pm-pdp__gallery .woocommerce-product-gallery__trigger::before {
  content: "";
  width: 18px; height: 18px;
  /* inline SVG magnifier in currentColor */
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="m20 20-4.3-4.3"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="m20 20-4.3-4.3"/></svg>') center/contain no-repeat;
}
.pm-pdp__gallery .woocommerce-product-gallery__trigger:hover {
  background: var(--forest-d);
  color: var(--cream);
  transform: scale(1.05);
}

/* Thumbnail strip — flexslider injects an <ol class="flex-control-thumbs"> */
.pm-pdp__gallery .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  position: static !important;
}
.pm-pdp__gallery .flex-control-thumbs li {
  width: 100% !important;
  margin: 0 !important;
}
.pm-pdp__gallery .flex-control-thumbs li img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  cursor: pointer;
  opacity: 1;
  transition: border-color .2s, transform .2s;
}
.pm-pdp__gallery .flex-control-thumbs li img:hover {
  border-color: var(--moss);
  transform: translateY(-1px);
}
.pm-pdp__gallery .flex-control-thumbs li img.flex-active {
  border-color: var(--forest-d) !important;
  border-width: 2px !important;
}

/* Hide the bullet-nav row that FlexSlider may add */
.pm-pdp__gallery .flex-direction-nav { display: none; }

/* EasyZoom container needs a position context */
.pm-pdp__gallery .easyzoom { position: relative; display: block; }
.pm-pdp__gallery .easyzoom img { cursor: zoom-in; }
.pm-pdp__gallery .easyzoom-flyout {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}

/* Sale / Bestseller tag floats above the gallery */
.pm-pdp__tag {
  position: absolute; top: 18px; left: 18px; z-index: 6;
  background: var(--terracotta); color: var(--cream);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 12px; border-radius: var(--r-pill);
}

/* Placeholder (no image uploaded) */
.pm-pdp__main--placeholder {
  background: linear-gradient(160deg, var(--sage-l), var(--sage));
  border-radius: var(--r-lg);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}

.pm-crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.pm-crumbs a { color: var(--moss); }
.pm-crumbs .i { width: 12px; height: 12px; }
.pm-crumbs span { color: var(--ink); font-weight: 600; }

.pm-pdp__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
  letter-spacing: -0.02em;
}
.pm-pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.pm-pdp__sku { font-size: .78rem; color: var(--muted); }
.pm-pdp__pitch { font-size: 1rem; color: var(--ink); margin: 0 0 18px; max-width: 50ch; }

.pm-pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pm-pdp__save {
  background: var(--bloom);
  color: var(--forest-d);
  font-weight: 700;
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  letter-spacing: .05em;
}

.pm-pdp__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--cream);
  border: 1px solid var(--line);
  font-weight: 500;
  white-space: nowrap;       /* keep each pill on one line */
  max-width: 100%;           /* but never overflow the row */
  flex-shrink: 1;
}
.pm-pill .i { width: 14px; height: 14px; }
.pm-pill--cod { background: rgba(232,154,79,.18); border-color: rgba(209,122,74,.4); color: #7a3a1f; }
.pm-pill--ship { background: rgba(74,124,89,.12); border-color: rgba(74,124,89,.3); color: var(--forest-d); }
.pm-pill--guarantee { background: rgba(46,93,63,.08); border-color: rgba(46,93,63,.2); color: var(--forest-d); }

.pm-pdp__detail { min-width: 0; } /* prevent flex children from pushing column wider than viewport */
.pm-pdp__buy {
  display: flex;
  flex-wrap: wrap;        /* qty + "Buy now — Rs X" stack vertically on phones */
  gap: 10px;
  margin-bottom: 12px;
}
.pm-pdp__buy .pm-qty { flex: 0 0 auto; }
.pm-pdp__buy .pm-btn--grow {
  flex: 1 1 100%;        /* full-width on its own line on phones */
  min-width: 0;
  white-space: normal;   /* allow "Buy now — Rs 999.00" to wrap if it must */
}
@media (min-width: 480px) {
  .pm-pdp__buy .pm-btn--grow {
    flex: 1 1 0;          /* same row as qty stepper on slightly-bigger screens */
    white-space: nowrap;
  }
}

.pm-qty {
  display: inline-flex; align-items: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  height: 52px;
}
.pm-qty__btn {
  width: 38px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--r-pill);
  color: var(--forest-d);
}
.pm-qty__btn:hover { background: var(--paper); }
.pm-qty__input {
  width: 36px; text-align: center; font-weight: 600; color: var(--forest-d);
  background: transparent; border: 0; font-family: var(--f-display);
  font-size: 1.1rem; font-variation-settings: var(--fr-headline);
}
.pm-qty__input:focus { outline: 0; }

.pm-pdp__bullets {
  list-style: none; padding: 0; margin: 22px 0 8px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: .9rem;
}
.pm-pdp__bullets li { display: inline-flex; gap: 8px; align-items: flex-start; }
.pm-pdp__bullets .i { color: var(--moss); flex: none; margin-top: 2px; }

/* accordion */
.pm-acc {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.pm-acc:last-of-type { border-bottom: 1px solid var(--line); }
.pm-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600;
  color: var(--forest-d);
  font-family: var(--f-body);
  padding: 6px 0;
}
.pm-acc summary::-webkit-details-marker { display: none; }
.pm-acc__chev { transition: transform .25s; }
.pm-acc[open] .pm-acc__chev { transform: rotate(180deg); }
.pm-acc__body { padding: 8px 0 4px; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.pm-acc--lg summary {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 500;
  font-variation-settings: var(--fr-headline);
  padding: 12px 0;
}
.pm-acc--lg .pm-acc__chev {
  background: var(--cream);
  border-radius: var(--r-pill);
  padding: 6px;
  width: 32px; height: 32px;
  color: var(--forest-d);
}

/* ---------- REVIEWS ---------- */
.pm-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) { .pm-reviews { grid-template-columns: repeat(3, 1fr); } }
.pm-review {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 22px;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.pm-review p {
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--forest-d);
  margin: 0;
  font-variation-settings: var(--fr-headline);
  font-weight: 400;
}
.pm-review footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); }
.pm-review footer strong { display: block; font-size: .9rem; color: var(--ink); }
.pm-review footer em { font-style: normal; font-size: .75rem; color: var(--muted); }
.pm-avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--avatar-bg, var(--sage-l));
  display: grid; place-items: center;
  font-weight: 700;
  font-size: .75rem;
  color: var(--forest-d);
  letter-spacing: .04em;
}

/* ---------- STORY ---------- */
.pm-story {
  background: var(--forest-d);
  color: var(--cream);
  margin-top: 24px;
  padding: 56px var(--gutter);
  position: relative;
  overflow: hidden;
}
.pm-story::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(800px 400px at 100% 0%, rgba(232,154,79,.15), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(197,212,188,.1), transparent 60%);
  pointer-events: none;
}
.pm-story__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
}
@media (min-width: 900px) { .pm-story__inner { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; } }

.pm-story__viz { position: relative; }
.pm-story__photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--moss), var(--forest-d));
  position: relative;
}
.pm-story__photo svg { width: 100%; height: 100%; display: block; }
.pm-story__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Dark moody gradient over the photo so it reads as "atmospheric" rather
   than competing with the product grid above it. */
.pm-story__overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 80% 10%, rgba(232,154,79,.22), transparent 65%),
    linear-gradient(180deg, rgba(23,52,39,.35) 0%, rgba(23,52,39,.7) 80%);
  mix-blend-mode: normal;
}
.pm-story__photo--has-image::after {
  /* very subtle film grain — only on photo mode */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,252,246,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
}
.pm-story__caption {
  position: absolute; bottom: -16px; right: -8px;
  background: var(--bloom);
  color: var(--forest-d);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .9rem;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-variation-settings: var(--fr-headline);
  box-shadow: var(--shadow-md);
}
.pm-story__copy p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--sage);
  max-width: 50ch;
}
.pm-story__copy p:first-of-type { color: var(--cream); }
.pm-story__copy .pm-display { margin: 14px 0 16px; }

/* ---------- FAQ ---------- */
.pm-faq {
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- NEWSLETTER ---------- */
.pm-news {
  padding: 72px var(--gutter);
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(46,93,63,.12), transparent 60%),
    var(--cream);
  position: relative;
  overflow: hidden;
}
.pm-news__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.pm-news__deco {
  position: absolute;
  width: 240px; height: 240px;
  top: -80px; left: -120px;
  opacity: .15;
  color: var(--forest);
  pointer-events: none;
}
.pm-news .pm-display { margin: 12px 0 14px; }
.pm-news p { color: var(--muted); max-width: 48ch; margin: 0 auto 24px; }
.pm-news__form {
  display: flex;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}
.pm-news__form input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 0 16px;
  font-family: var(--f-body);
  font-size: .95rem;
  color: var(--ink);
}
.pm-news__form input:focus { outline: 0; }

/* ---------- FOOTER ---------- */
.pm-foot {
  background: var(--forest-d);
  color: var(--sage);
  padding: 56px var(--gutter) 24px;
}
.pm-foot__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) { .pm-foot__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }

.pm-foot__brand p { color: var(--sage); margin: 14px 0 18px; font-size: .9rem; max-width: 32ch; }
.pm-foot__social { display: flex; gap: 8px; }
.pm-foot__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--moss);
  color: var(--sage);
  transition: background .2s, color .2s, border-color .2s;
}
.pm-foot__social a:hover { background: var(--cream); color: var(--forest-d); border-color: var(--cream); }

.pm-foot__col { border-bottom: 1px solid var(--moss); }
.pm-foot__col summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--cream);
  font-variation-settings: var(--fr-headline);
  display: flex; align-items: center; justify-content: space-between;
}
.pm-foot__col summary::-webkit-details-marker { display: none; }
.pm-foot__col .pm-acc__chev { color: var(--sage); }
.pm-foot__col[open] .pm-acc__chev { transform: rotate(180deg); }
.pm-foot__col ul { list-style: none; padding: 0 0 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pm-foot__col a { color: var(--sage); font-size: .9rem; }
.pm-foot__col a:hover { color: var(--bloom); }

@media (min-width: 720px) {
  .pm-foot__col { border: 0; }
  .pm-foot__col summary { cursor: default; pointer-events: none; padding: 0 0 14px; }
  .pm-foot__col summary .pm-acc__chev { display: none; }
  .pm-foot__col ul { padding: 0; }
  .pm-foot__col[open] ul, .pm-foot__col ul { display: flex; }
}

.pm-foot__base {
  max-width: var(--container);
  margin: 32px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--moss);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .78rem;
  color: var(--sage);
}
@media (min-width: 720px) { .pm-foot__base { flex-direction: row; justify-content: space-between; align-items: center; } }

/* ---------- STICKY BUY BAR (mobile) ---------- */
.pm-buy-bar {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  padding: 8px 10px 8px 8px;
  transform: translateY(140%);
  transition: transform .3s cubic-bezier(.65,0,.35,1);
}
.pm-buy-bar[data-show] { transform: translateY(0); }
.pm-buy-bar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0;
}
.pm-buy-bar__product { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.pm-buy-bar__thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--sage-l);
  display: grid; place-items: center;
  flex: none;
  overflow: hidden;
}
.pm-buy-bar__thumb svg, .pm-buy-bar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-buy-bar__product > div { min-width: 0; overflow: hidden; }
.pm-buy-bar__product strong {
  display: block;
  font-size: .82rem;
  color: var(--forest-d);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-buy-bar__product .pm-price__num { font-size: .95rem; }
.pm-buy-bar .pm-btn {
  padding: .75em 1.1em;
  flex: none;             /* never shrinks — always shows full "Buy now" */
  white-space: nowrap;
}
@media (min-width: 1024px) { .pm-buy-bar { display: none; } }

/* ---------- WHATSAPP FLOATER ---------- */
.pm-wa-floater {
  position: fixed;
  right: 16px;
  bottom: 76px; /* sits above buy bar */
  z-index: 70;
  background: #128C7E;
  color: #fff;
  padding: 12px 18px 12px 14px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 12px 28px -10px rgba(18,140,126,.55), 0 2px 6px rgba(0,0,0,.1);
  transition: transform .2s ease;
}
.pm-wa-floater:hover { transform: translateY(-2px); }
.pm-wa-floater .i { width: 20px; height: 20px; }
@media (max-width: 460px) {
  .pm-wa-floater span { display: none; }
  .pm-wa-floater { padding: 12px; border-radius: 50%; }
}
@media (min-width: 1024px) { .pm-wa-floater { bottom: 24px; } }

/* ---------- FOCUS / ACCESS ---------- */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ============================================================
   WORDPRESS THEME EXTENSIONS — page templates, article, shop
   toolbar, 404, contact, policy tiles, prose styles, etc.
   ============================================================ */

/* skip link */
.pm-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--forest-d); color: var(--cream);
  padding: 10px 16px; border-radius: var(--r-pill);
  z-index: 200;
}
.pm-skip:focus { left: 16px; top: 12px; }

/* generic page wrapper */
.pm-page { max-width: 920px; }
.pm-page--narrow { max-width: 720px; }

/* article prose — sets typography for any Gutenberg block content */
.pm-prose {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
}
.pm-prose > * + * { margin-top: 1.1em; }
.pm-prose h2 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 500;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
  margin-top: 1.6em;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.pm-prose h3 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
  margin-top: 1.4em;
}
.pm-prose h2 em, .pm-prose h3 em { color: var(--terracotta); font-variation-settings: var(--fr-italic); }
.pm-prose a {
  color: var(--forest-d);
  border-bottom: 1.5px solid var(--terracotta);
  padding-bottom: 1px;
}
.pm-prose a:hover { color: var(--terracotta); }
.pm-prose blockquote {
  border-left: 3px solid var(--terracotta);
  padding: 6px 0 6px 20px;
  margin: 1.5em 0;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--forest-d);
  font-variation-settings: var(--fr-italic);
}
.pm-prose ul, .pm-prose ol { padding-left: 1.4em; }
.pm-prose ul li::marker { color: var(--terracotta); }
.pm-prose img {
  border-radius: var(--r-lg);
  margin: 1.6em 0;
  box-shadow: var(--shadow-md);
}
.pm-prose code {
  background: var(--cream-d);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
}

/* article (single post) */
.pm-article { max-width: 760px; }
.pm-article__head { text-align: center; margin-bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pm-article__meta { font-size: .85rem; color: var(--muted); margin: 4px 0 0; }
.pm-article__hero {
  margin: 0 calc(var(--gutter) * -0.5) 32px;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.pm-article__hero img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* blog list */
.pm-posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) { .pm-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pm-posts { grid-template-columns: repeat(3, 1fr); } }

.pm-post-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pm-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pm-post-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pm-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.pm-post-card:hover .pm-post-card__media img { transform: scale(1.04); }
.pm-post-card__media--placeholder {
  background: linear-gradient(135deg, var(--sage-l), var(--sage));
  display: grid; place-items: center;
}
.pm-post-card__icon { width: 64px; height: 64px; color: var(--forest-d); }
.pm-post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.pm-post-card__body p { color: var(--muted); font-size: .9rem; margin: 0; }
.pm-post-card__body .pm-h3 a { color: var(--forest-d); }
.pm-post-card__body .pm-h3 a:hover { color: var(--terracotta); }

/* pagination */
.pm-pagination { margin-top: 40px; display: flex; justify-content: center; }
.pm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin: 0 4px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: .9rem;
  color: var(--forest-d);
}
.pm-pagination .page-numbers.current,
.pm-pagination .page-numbers:hover {
  background: var(--forest-d);
  color: var(--cream);
  border-color: var(--forest-d);
}

/* 404 */
.pm-404 { text-align: center; max-width: 720px; position: relative; }
.pm-404 .pm-eyebrow { background: var(--terracotta); color: var(--cream); padding: 4px 10px; border-radius: var(--r-pill); }
.pm-404__deco {
  position: absolute;
  width: 240px; height: 240px;
  top: -60px; right: -40px;
  color: var(--sage);
  opacity: .35;
  pointer-events: none;
}
.pm-404 .pm-display { margin: 20px 0; }

/* about — value tiles */
.pm-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 32px 0 48px;
}
@media (min-width: 720px) { .pm-values { grid-template-columns: repeat(3, 1fr); } }
.pm-value {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.pm-value__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--sage-l);
  color: var(--forest-d);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.pm-value__icon .i { width: 22px; height: 22px; }
.pm-value .pm-h3 { margin: 0 0 6px; }
.pm-value p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* contact channels */
.pm-contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 40px;
}
@media (min-width: 720px) { .pm-contacts { grid-template-columns: repeat(3, 1fr); } }
.pm-contact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
  color: var(--forest-d);
}
.pm-contact:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pm-contact__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--sage-l);
  display: grid; place-items: center;
}
.pm-contact__icon .i { width: 22px; height: 22px; }
.pm-contact strong { display: block; font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; color: var(--forest-d); font-variation-settings: var(--fr-headline); }
.pm-contact p { margin: 2px 0; font-size: .95rem; color: var(--ink); }
.pm-contact .pm-eyebrow { color: var(--muted); }

/* policy tiles */
.pm-policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 32px 0 48px;
}
@media (min-width: 720px) { .pm-policy-grid { grid-template-columns: repeat(3, 1fr); } }
.pm-policy-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.pm-policy-tile__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--cream-d);
  color: var(--forest-d);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.pm-policy-tile h3 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
}
.pm-policy-tile p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* shop toolbar (WC result count + ordering) */
.pm-shop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  flex-wrap: wrap;
}
.pm-shop__toolbar .woocommerce-result-count {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}
.pm-shop__toolbar .woocommerce-ordering { margin: 0; }
.pm-shop__toolbar .orderby {
  border: 1px solid var(--line);
  background: var(--cream);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--forest-d);
}
.pm-shop__empty { text-align: center; padding: 40px 0; color: var(--muted); }

/* shop grid — slightly more dense than the trio */
.pm-products--shop {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pm-products--shop { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pm-products--shop { grid-template-columns: repeat(3, 1fr); } }

/* product card image — full-bleed inside the square media area. */
.pm-product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .5s ease;
}
.pm-product-card:hover .pm-product-card__img { transform: scale(1.04); }
.pm-product-card__placeholder {
  position: absolute; top: 50%; left: 50%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  color: var(--forest-d);
  opacity: .4;
  z-index: 1;
}

/* PDP main image */
.pm-pdp__image {
  width: 80%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(23,52,39,.25));
}
.pm-pdp__oos {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(209,122,74,.12);
  color: var(--terracotta-d);
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  margin: 16px 0;
}

/* care list (PDP accordion) */
.pm-care-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pm-care-list li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .92rem;
}
.pm-care-list .i { color: var(--moss); }

/* quiet hero (about/contact use it) */
.pm-hero--quiet { padding-bottom: 24px; }
.pm-hero--quiet .pm-hero__deco--branch { display: none; }
.pm-hero__inner--single {
  grid-template-columns: 1fr;
  max-width: 760px;
  text-align: center;
}
.pm-hero__inner--single .pm-hero__sub { margin-left: auto; margin-right: auto; }

/* free-shipping banner on checkout */
.pm-ship-banner {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream-d);
  border: 1px dashed var(--terracotta);
  color: var(--forest-d);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: .9rem;
  margin: 0 0 18px;
}
.pm-ship-banner--qualified {
  background: rgba(74,124,89,.12);
  border-style: solid;
  border-color: var(--moss);
}
.pm-ship-banner .i { color: var(--terracotta); }
.pm-ship-banner--qualified .i { color: var(--moss); }

/* wc price html wrap — Fraunces numbers */
.pm-price-html {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.pm-price-html .amount {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--forest-d);
  font-variation-settings: var(--fr-headline);
}
.pm-pdp__price .pm-price-html .amount { font-size: 2.1rem; }
/* Browser default draws line-through on <del>; we only re-color it terracotta.
   We deliberately DO NOT add another text-decoration on the inner .amount span
   — that produces a double strikethrough line. */
.pm-pdp__price del {
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 1.5px;
  opacity: .75;
}
.pm-pdp__price del .amount {
  font-size: 1rem;
  color: var(--muted);
  font-family: var(--f-body);
  font-weight: 500;
  text-decoration: none; /* let the <del> wrapper own the line-through */
}
.pm-pdp__price ins { background: transparent; text-decoration: none; }

/* ---------- WC cart / checkout / account pages ----------
   WC Blocks have their own grid math (floating labels, gap rules).
   Don't restyle internal form fields here — that's how the country/region
   field ended up overlapping the name row. Only do the outer shell. */
.pm-page--wc {
  max-width: 1180px;
}

/* article wrapper for WC pages — no prose margins so block grids stay clean */
.pm-wc-page > * + * { margin-top: 0; }
.pm-wc-page { font-family: var(--f-body); color: var(--ink); }

/* Brand-match the place-order button without changing geometry */
.pm-wc-page .wc-block-components-checkout-place-order-button,
body.pm-is-cart .wc-block-cart__submit-button,
body.pm-is-checkout .wc-block-components-checkout-place-order-button {
  background: var(--forest-d) !important;
  color: var(--cream) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--f-body) !important;
  font-weight: 600 !important;
}
.pm-wc-page .wc-block-components-checkout-place-order-button:hover {
  background: var(--forest) !important;
}

/* Brand-match section titles in the order summary + steps */
.pm-wc-page .wc-block-components-title,
.pm-wc-page .wc-block-components-checkout-step__title,
.pm-wc-page .wc-block-components-totals-wrapper--with-vertical-rule h2,
.pm-wc-page .wc-block-components-checkout-step__heading-content,
.pm-wc-page h2.wc-block-cart__totals-title {
  font-family: var(--f-display) !important;
  font-weight: 500 !important;
  font-variation-settings: var(--fr-headline);
  color: var(--forest-d) !important;
  letter-spacing: -0.01em;
}

/* Order summary card — subtle treatment, breathe a bit */
.pm-wc-page .wc-block-components-sidebar-layout__sidebar,
.pm-wc-page .wp-block-woocommerce-checkout-totals-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}

/* ---------- Order summary line items ----------
   Layout: image (with qty bubble at top-right) | description column
   The .wc-block-components-product-sale-badge ("Save Rs X.XX") inside line
   items is hidden — the strikethrough + sale price already convey the
   discount, and the badge was overlapping the title + description. */
.pm-wc-page .wc-block-components-order-summary-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding-block: 14px;
  align-items: start;
}
.pm-wc-page .wc-block-components-order-summary-item__image {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-d);
}
.pm-wc-page .wc-block-components-order-summary-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-wc-page .wc-block-components-order-summary-item__quantity {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--cream);
  font-weight: 700;
  font-size: .7rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
  line-height: 1;
}

.pm-wc-page .wc-block-components-order-summary-item__description {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pm-wc-page .wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-weight: 600;
  color: var(--forest-d);
  font-size: .95rem;
  line-height: 1.25;
}
.pm-wc-page .wc-block-components-order-summary-item__total-price {
  font-weight: 600;
  color: var(--forest-d);
  font-size: .9rem;
}
.pm-wc-page .wc-block-components-order-summary-item__individual-prices {
  font-size: .8rem;
  color: var(--muted);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.pm-wc-page .wc-block-components-order-summary-item__regular-individual-price {
  text-decoration-color: var(--terracotta);
}

/* HIDE the sale badge inside summary items — redundant with the strikethrough.
   The badge floats absolutely on top of the description column and was the
   source of the "Save Rs 1,602" overlay covering the title. */
.pm-wc-page .wc-block-components-order-summary-item .wc-block-components-product-sale-badge,
.pm-wc-page .wc-block-components-order-summary-item .wc-block-components-sale-badge {
  display: none !important;
}

/* Strikethrough — single line, terracotta, no double-strike */
.pm-wc-page del { text-decoration-color: var(--terracotta); }
.pm-wc-page del .wc-block-formatted-money-amount,
.pm-wc-page del * { text-decoration: none; }

/* ============================================================
   END WORDPRESS THEME EXTENSIONS
   ============================================================ */

/* ---------- REVEAL ANIMATIONS ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal][data-in] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}