/* ═══════════════════════════════════════════════════════════
   SCENSORA · FRAGRANCE OILS  (catalog + product pages)
   Mobile-first. Reads brand tokens from tokens.css.
═══════════════════════════════════════════════════════════ */

.oils-page{background:var(--color-cream);min-height:100vh}
.oils-wrap{max-width:1180px;margin:0 auto;padding:0 16px 80px}

/* ── Breadcrumb ── */
.oil-crumb{font-family:var(--font-body);font-size:12px;letter-spacing:.03em;color:var(--text-muted);padding:22px 0 0}
.oil-crumb a{color:var(--text-muted);text-decoration:none}
.oil-crumb a:hover{color:var(--color-red)}
.oil-crumb span{color:var(--color-black)}

/* ── Intro band ── */
.oil-intro{text-align:center;padding:30px 0 26px;border-bottom:1px solid var(--line)}
.oil-intro__eyebrow{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.28em;color:var(--color-red);text-transform:uppercase}
.oil-intro h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.05;margin:.3em 0 .2em;color:var(--color-black)}
.oil-intro p{font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--text-body);max-width:720px;margin:0 auto}
.oil-intro__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.oil-intro__stat{font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-black);background:var(--color-white);border:1px solid var(--line);border-radius:40px;padding:8px 16px}

/* ── Toolbar / search ── */
.oil-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:22px 0 18px;position:sticky;top:0;background:var(--color-cream);z-index:5}
.oil-search{flex:1 1 240px;position:relative}
.oil-search input{width:100%;font-family:var(--font-body);font-size:14px;padding:12px 16px 12px 42px;border:1px solid var(--line);border-radius:40px;background:var(--color-white);color:var(--text-body)}
.oil-search input:focus{outline:none;border-color:var(--color-gold)}
.oil-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-faint)}
.oil-count{font-family:var(--font-body);font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.oil-count b{color:var(--color-black)}

/* ── Catalog grid ── */
.oil-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
.oil-card{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.oil-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.09);border-color:var(--line-gold)}
.oil-card__img{aspect-ratio:1/1;background:var(--color-white);display:flex;align-items:center;justify-content:center;overflow:hidden}
.oil-card__img img{width:100%;height:100%;object-fit:cover}
.oil-card__body{padding:12px 12px 14px;text-align:center;border-top:1px solid var(--line-soft)}
.oil-card__name{font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-black);line-height:1.3}
.oil-card__fam{font-family:var(--font-body);font-size:10.5px;letter-spacing:.06em;color:var(--color-red);margin-top:5px;text-transform:uppercase}
.oil-empty{text-align:center;color:var(--text-muted);font-family:var(--font-body);padding:50px 0;display:none}

/* ── Catalog footer blurb ── */
.oil-seo{margin-top:46px;padding:30px;background:var(--color-white);border:1px solid var(--line);border-radius:16px}
.oil-seo h2{font-family:var(--font-display);font-size:1.7rem;color:var(--color-black);margin:0 0 .4em}
.oil-seo p{font-family:var(--font-body);font-size:13.5px;line-height:1.8;color:var(--text-body);margin:0 0 1em}
.oil-seo p:last-child{margin-bottom:0}

/* ═══ PRODUCT PAGE ═══ */
.oilp{max-width:1080px;margin:0 auto;padding:0 16px 90px}
.oilp-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:18px}
.oilp-hero{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--color-white)}
.oilp-hero img{width:100%;height:auto;display:block}
.oilp-head h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,6vw,2.9rem);line-height:1.04;color:var(--color-black);margin:.1em 0 .3em}
.oilp-head h1 small{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--color-red);margin-bottom:.8em}
.oilp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.oilp-chip{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-black);background:var(--color-warm-2);border-radius:40px;padding:7px 14px}
.oilp-desc{font-family:var(--font-body);font-size:15px;line-height:1.8;color:var(--text-body);margin:0 0 22px}

/* specs */
.oilp-specs{width:100%;border-collapse:collapse;margin:0 0 24px;font-family:var(--font-body)}
.oilp-specs tr{border-bottom:1px solid var(--line-soft)}
.oilp-specs th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:11px 0;width:38%;vertical-align:top}
.oilp-specs td{font-size:13.5px;color:var(--text-body);padding:11px 0}

/* blends-well-with */
.oilp-pairs{margin:0 0 26px}
.oilp-pairs h3,.oilp-buy h3,.oilp-uses h3{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-black);margin:0 0 12px}
.oilp-pairs__list{display:flex;flex-wrap:wrap;gap:8px}
.oilp-pairs__list a{font-family:var(--font-body);font-size:12.5px;color:var(--color-black);text-decoration:none;background:var(--color-white);border:1px solid var(--line);border-radius:40px;padding:8px 15px;transition:all var(--transition)}
.oilp-pairs__list a:hover{border-color:var(--color-gold);color:var(--color-red)}
.oilp-pairs__list span{font-family:var(--font-body);font-size:12.5px;color:var(--text-body);background:var(--color-white);border:1px solid var(--line);border-radius:40px;padding:8px 15px}

/* buy / sizes */
.oilp-buy{background:var(--color-white);border:1px solid var(--line);border-radius:16px;padding:22px}
.oilp-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.oilp-size{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--color-black);background:var(--color-cream);border:1.5px solid var(--line);border-radius:10px;padding:14px 6px;cursor:pointer;text-align:center;transition:all var(--transition)}
.oilp-size:hover{border-color:var(--color-gold)}
.oilp-size.is-active{border-color:var(--color-red);background:#fff;box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.oilp-size small{display:block;font-size:10px;font-weight:500;color:var(--text-muted);margin-top:3px;letter-spacing:.04em}
.oilp-price{font-family:var(--font-body);font-size:12.5px;color:var(--text-muted);margin:0 0 14px}
.oilp-cta{display:flex;flex-direction:column;gap:9px}
.oilp-btn{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-size:13.5px;font-weight:600;letter-spacing:.04em;padding:15px;border-radius:10px;text-decoration:none;cursor:pointer;border:none;transition:all var(--transition)}
.oilp-btn--wa{background:#25D366;color:#fff}
.oilp-btn--wa:hover{background:#1faa52}
.oilp-btn--mail{background:var(--color-black);color:#fff}
.oilp-btn--mail:hover{background:#000}
.oilp-note{font-family:var(--font-body);font-size:11px;color:var(--text-faint);text-align:center;margin:12px 0 0;line-height:1.6}

/* uses */
.oilp-uses{margin:30px 0 0;padding:24px;background:var(--color-warm);border-radius:16px}
.oilp-uses ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:9px}
.oilp-uses li{font-family:var(--font-body);font-size:13px;color:var(--text-body);padding-left:22px;position:relative;line-height:1.6}
.oilp-uses li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--color-gold)}

/* related */
.oilp-related{margin-top:44px}
.oilp-related h2{font-family:var(--font-display);font-size:1.6rem;color:var(--color-black);margin:0 0 16px;text-align:center}

/* back link */
.oilp-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:12.5px;color:var(--text-muted);text-decoration:none;margin-top:30px}
.oilp-back:hover{color:var(--color-red)}

/* ── Coming soon (aroma molecules) ── */
.oil-soon{text-align:center;max-width:620px;margin:0 auto;padding:60px 16px 90px}
.oil-soon h1{font-family:var(--font-display);font-size:clamp(2rem,6vw,3rem);color:var(--color-black);margin:.2em 0}
.oil-soon p{font-family:var(--font-body);font-size:14.5px;line-height:1.8;color:var(--text-body);margin:0 0 1.2em}
.oil-soon__tag{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--color-red)}

/* ── Responsive up-scaling ── */
@media(min-width:600px){
  .oil-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .oilp-uses ul{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .oil-grid{grid-template-columns:repeat(4,1fr)}
  .oilp-grid{grid-template-columns:1.05fr .95fr;align-items:start}
  .oilp-hero{position:sticky;top:20px}
}
@media(min-width:1100px){
  .oil-grid{grid-template-columns:repeat(5,1fr)}
}

/* ── FAQ (catalog) ── */
.oil-faq{margin:40px 0 0;padding:34px 30px;background:var(--color-white);border:1px solid var(--line);border-radius:16px}
.oil-faq h2{font-family:var(--font-display);font-size:1.7rem;color:var(--color-black);margin:0 0 .6em;text-align:center}
.oil-faq__item{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.oil-faq__item:last-child{border-bottom:none;padding-bottom:0}
.oil-faq__item h3{font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--color-black);margin:0 0 8px}
.oil-faq__item p{font-family:var(--font-body);font-size:13.5px;line-height:1.75;color:var(--text-body);margin:0}