/* PME — Pro Medical Essentials. Editorial medical brand. */
:root {
  /* Brand greens — pulled from logo */
  --pme-forest: #1F7A3A;       /* deep, the cross */
  --pme-forest-deep: #155427;
  --pme-green: #2EAE3F;        /* the M */
  --pme-lime: #C8F050;         /* the E */
  --pme-lime-soft: #DBF581;

  /* Neutrals — bright, paper-white, soft ink */
  --pme-bg: #FBFAF7;          /* near-white page background */
  --pme-bg-elev: #FFFFFF;     /* lifted surfaces flush to white */
  --pme-paper: #FFFFFF;
  --pme-ink: #1A2620;         /* slightly softer than before */
  --pme-ink-2: #3D4A42;
  --pme-ink-3: #7A857F;
  --pme-rule: #ECEAE2;        /* lighter rule lines */
  --pme-rule-2: #F4F1E8;

  /* Density (driven by tweak) */
  --pme-pad: 24px;
  --pme-gap: 24px;
  --pme-radius: 14px;

  --serif: "Fraunces", "Noto Serif Lao", "Source Serif Pro", Georgia, serif;
  --sans: "Inter", "Phetsarath", "Noto Serif Lao", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

[data-density="compact"]    { --pme-pad: 16px; --pme-gap: 16px; }
[data-density="comfortable"]{ --pme-pad: 24px; --pme-gap: 24px; }
[data-density="spacious"]   { --pme-pad: 36px; --pme-gap: 36px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--pme-bg);
  color: var(--pme-ink);
  font-family: var(--sans);
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pme-ink);
  color: #fff;
  transform: translateY(-72px);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible {
  outline: 3px solid var(--pme-forest);
  outline-offset: 3px;
}

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.mono  { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px){ .container{ padding: 0 20px; } }

/* ================== NAV ================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  background: rgba(251,250,247,0.82);
  border-bottom: 1px solid var(--pme-rule);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-link {
  position: relative; padding: 8px 14px; border-radius: 999px; font-size: 14px;
  color: var(--pme-ink-2); transition: color .2s ease, background .2s ease;
}
.nav-link:hover { color: var(--pme-ink); background: rgba(31,122,58,0.06); }
.nav-link.active { color: var(--pme-forest-deep); }
.nav-link.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background: var(--pme-forest); border-radius: 2px;
}
.nav-side { display: flex; align-items: center; gap: 10px; }
.lang-toggle{
  display:inline-flex; align-items:center; padding:4px; gap:2px;
  background: rgba(14,26,20,0.05); border-radius:999px;
}
.lang-toggle button{
  border:0; background:transparent; padding:6px 10px; font-size:12px; color:var(--pme-ink-3);
  border-radius:999px; letter-spacing:.04em;
}
.lang-toggle button.on{ background: var(--pme-ink); color: #fff; }

/* logo lockup */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -0.01em;
  color: var(--pme-forest-deep);
}
.logo-glyph { width: 36px; height: 36px; display:block; }
.logo small { display:block; font-family: var(--mono); font-size: 9px; color: var(--pme-ink-3); margin-top: 2px; letter-spacing: .14em; }

/* ================== BUTTONS ================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; font-size: 14px; letter-spacing: .01em;
  border: 1px solid transparent; transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--pme-forest); color: #fff; }
.btn-primary:hover { background: var(--pme-forest-deep); transform: translateY(-1px); }
.btn-primary .arrow { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn-primary:hover .arrow { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--pme-ink); border-color: var(--pme-ink); }
.btn-ghost:hover { background: var(--pme-ink); color: #fff; transform: translateY(-1px); }
.btn-lime { background: var(--pme-lime); color: var(--pme-forest-deep); }
.btn-lime:hover { background: var(--pme-lime-soft); }

/* ================== TYPOGRAPHY ================== */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--pme-forest); text-transform: uppercase; display:inline-flex; align-items:center; gap:8px; }
.eyebrow::before { content:""; width:24px; height:1px; background: var(--pme-forest); display:inline-block; }
h1.editorial {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 7.4vw, 116px);
  line-height: 0.96; letter-spacing: -0.025em;
  color: var(--pme-ink);
  text-wrap: balance;
}
h1.editorial em { font-style: italic; color: var(--pme-forest); font-weight: 300; }
h2.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1; letter-spacing: -0.02em; margin: 0;
}
.section-eyebrow-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom: 28px; flex-wrap:wrap; }

/* ================== CARD ================== */
.product-card {
  position: relative; background: var(--pme-paper); border: 1px solid var(--pme-rule);
  border-radius: var(--pme-radius); overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(14,26,20,0.25); border-color: rgba(31,122,58,0.35); }
.product-media {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(135deg, #F4F2EC 0%, #E8E5D8 100%);
}
.product-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.product-card:hover .product-media img { transform: scale(1.06); }
.product-media .accent-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--pme-lime); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .accent-line { transform: scaleX(1); }
.product-tag {
  position:absolute; top:12px; left:12px; background:#0E1A14; color:#fff;
  padding:5px 9px; border-radius: 999px; font-family: var(--mono); font-size:9px; letter-spacing:.12em;
}
.product-tag.lime { background: var(--pme-lime); color: var(--pme-forest-deep); }
.product-meta { padding: 16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.product-cat { font-family: var(--mono); font-size:10px; color: var(--pme-ink-3); letter-spacing:.12em; }
.product-name { font-family: var(--serif); font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.product-row { display:flex; justify-content:space-between; align-items:flex-end; margin-top: 8px; gap: 12px; }
.product-price { font-size: 13px; color: var(--pme-ink-2); }
.product-price b { color: var(--pme-ink); font-weight: 600; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--pme-rule);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.icon-btn:hover { background: var(--pme-forest); border-color: var(--pme-forest); transform: rotate(-8deg); }
.icon-btn:hover svg { stroke: #fff; }
.icon-btn svg { width: 14px; height: 14px; stroke: var(--pme-ink); stroke-width: 1.6; fill: none; transition: stroke .2s; }

/* placeholder image */
.placeholder-img {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(31,122,58,0.06) 14px 15px),
    linear-gradient(135deg, #EEEAD9 0%, #E0DAC2 100%);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.placeholder-img .ph-text {
  font-family: var(--mono); font-size: 10px; color: var(--pme-ink-3);
  text-align: center; letter-spacing: .14em;
}
.placeholder-img .ph-svg { position:absolute; opacity:.18; color: var(--pme-forest-deep); }

/* ================== CHIPS ================== */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--pme-rule);
  background: var(--pme-paper); color: var(--pme-ink-2); font-size: 13px; letter-spacing: 0;
  transition: all .2s ease;
}
.chip:hover { border-color: var(--pme-ink); }
.chip.on { background: var(--pme-ink); color: #fff; border-color: var(--pme-ink); }

/* ================== UTIL ================== */
.divider { height: 1px; background: var(--pme-rule); margin: 0; }
.kbd { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border:1px solid var(--pme-rule); border-radius: 4px; color: var(--pme-ink-3); }
.bg-ink { background: var(--pme-ink); color: #fff; }
.bg-forest { background: var(--pme-forest-deep); color: #fff; }
.bg-paper { background: var(--pme-paper); }

footer.pme-foot {
  background: var(--pme-ink); color: #c8d0cb;
  padding: 80px 0 32px; margin-top: 100px;
}
.pme-foot h4 { font-family: var(--serif); color:#fff; font-weight: 400; font-size: 18px; margin: 0 0 14px; }
.pme-foot a { color: #c8d0cb; opacity: .8; transition: opacity .2s, color .2s; font-size: 14px; }
.pme-foot a:hover { opacity: 1; color: var(--pme-lime); }
.pme-foot .grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.pme-foot .legal { display:flex; justify-content: space-between; padding-top: 32px; margin-top: 64px; border-top: 1px solid #1f2a23; font-size: 12px; opacity: .6; }
@media (max-width: 800px){ .pme-foot .grid{ grid-template-columns: 1fr 1fr; } }

/* fade-in */
.reveal { opacity:0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* small helper */
::selection { background: var(--pme-lime); color: var(--pme-forest-deep); }


/* ================== MOTION TWEAK ================== */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
[data-motion="lively"] {
  /* shorten transitions globally */
}
[data-motion="lively"] * {
  transition-duration: 0.18s !important;
}