/* ============================================================
   Absolute Aromas: shared mock design system
   Linked by every page mock so the visual language stays consistent.
   Mirrors assets/aa-brand.css in the theme. British English, no em dashes.
   ============================================================ */

:root {
  --aa-black:#000; --aa-white:#fff; --aa-soft:#fafafa;
  --aa-lavender:#A7ADD8; --aa-teal:#A5C4CB; --aa-sage-dark:#7F9778;
  --aa-sage-light:#A9BC9D; --aa-grey:#D9D9D9; --aa-muted:#5A5A5A;
  --aa-amber:#C9A96E;
  --aa-title:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --aa-body:'Open Sans Condensed','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --aa-ease:cubic-bezier(0.4,0,0.2,1);
  --aa-max:1400px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--aa-body); font-weight:300; color:var(--aa-black); background:var(--aa-white); -webkit-font-smoothing:antialiased; line-height:1.55; }
h1,h2,h3,h4 { font-family:var(--aa-title); font-weight:400; letter-spacing:0.01em; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { max-width:var(--aa-max); margin:0 auto; padding:0 32px; }
.section { padding:64px 0; }
.eyebrow { font-family:var(--aa-body); text-transform:uppercase; letter-spacing:0.2em; font-size:12px; font-weight:700; color:var(--aa-muted); }
.crumb { font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--aa-muted); padding:18px 0 6px; }
.crumb a:hover { opacity:0.6; }

/* Buttons */
.btn { display:inline-block; font-family:var(--aa-body); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; font-size:13px; border-radius:2px; padding:14px 30px; cursor:pointer; border:1px solid var(--aa-black); transition:all var(--aa-ease) 240ms; text-align:center; }
.btn--lav { background:var(--aa-lavender); border-color:var(--aa-lavender); color:var(--aa-black); }
.btn--lav:hover { filter:brightness(0.92); }
.btn--ghost { background:transparent; color:var(--aa-black); }
.btn--ghost:hover { background:var(--aa-black); color:var(--aa-white); }
.btn--block { display:block; width:100%; }

/* Announce + header */
.announce { background:var(--aa-black); color:var(--aa-white); text-align:center; font-size:13px; letter-spacing:0.07em; text-transform:uppercase; padding:9px 16px; font-weight:300; }
header { border-bottom:1px solid var(--aa-grey); position:sticky; top:0; background:rgba(255,255,255,0.96); z-index:50; }
.hbar { display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:var(--aa-max); margin:0 auto; }
.logo img { height:40px; }
.nav { display:flex; gap:24px; }
.nav a { font-family:var(--aa-body); text-transform:uppercase; letter-spacing:0.09em; font-weight:700; font-size:13px; transition:opacity var(--aa-ease) 240ms; }
.nav a:hover { opacity:0.55; }
.nav a.trade { color:var(--aa-sage-dark); }
.icons { display:flex; gap:16px; align-items:center; }
.icons i { width:21px; height:21px; stroke-width:1.5; cursor:pointer; }
.menu-toggle { display:none; }

/* Product card */
.card { padding-top:18px; border-top:1px solid var(--aa-grey); display:block; }
.card__media { aspect-ratio:1/1; background:var(--aa-white); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.card__media img.shot { max-height:84%; width:auto; filter:drop-shadow(6px 9px 14px rgba(0,0,0,0.12)); transition:transform var(--aa-ease) 420ms; }
.card:hover .card__media img.shot { transform:translateY(-4px); }
.ph { width:100%; height:100%; background:linear-gradient(160deg,#f3f5f1,#eef0f5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.ph img { width:50px; opacity:0.16; }
.ph span { font-family:var(--aa-body); text-transform:uppercase; letter-spacing:0.16em; font-size:10px; color:#9a9a9a; }
.badge { position:absolute; top:8px; left:8px; font-family:var(--aa-body); text-transform:uppercase; letter-spacing:0.1em; font-size:10px; font-weight:700; border:1px solid var(--aa-black); padding:3px 8px; background:rgba(255,255,255,0.85); }
.badge.organic { border-color:var(--aa-sage-dark); color:var(--aa-sage-dark); }
.card__note { font-family:var(--aa-body); text-transform:uppercase; letter-spacing:0.12em; font-size:11px; color:var(--aa-muted); margin-top:14px; }
.card__name { font-family:var(--aa-title); font-size:23px; line-height:1.12; margin:3px 0 2px; }
.card__botanical { font-style:italic; font-size:14px; color:var(--aa-muted); }
.card__price { font-size:16px; margin-top:10px; }
.card__price .from { font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--aa-muted); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 26px; }

/* Section heading */
.shead { text-align:center; margin-bottom:40px; }
.shead h2 { font-size:42px; margin-top:8px; }

/* Range tiles (hub + home) */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tile { position:relative; height:240px; overflow:hidden; display:flex; align-items:flex-end; }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--aa-ease) 600ms; }
.tile::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 42%, transparent 66%); }
.tile:hover img { transform:scale(1.04); }
.tile__label { position:relative; z-index:2; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; width:100%; color:#fff; }
.tile__label h3 { font-size:28px; color:#fff; }
.tile__label .sub { font-size:13px; color:rgba(255,255,255,0.85); margin-top:2px; }
.tile__label i { width:24px; height:24px; stroke-width:1.5; }
.tile--finder::after { background:linear-gradient(to top, rgba(58,52,92,0.66) 0%, rgba(58,52,92,0.12) 44%, transparent 68%); }

/* Legibility, image-led: photos composed with a calm zone for text; type sits directly
   on the image (white or black, both on brand, chosen per image) with a gentle gradient
   scrim or a soft halo as a safety net. No solid blocks. */
.scrim { position:absolute; inset:0; z-index:1; }
.scrim--dark-bottom { background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 42%, transparent 66%); }
.scrim--dark-left { background:linear-gradient(100deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 40%, transparent 64%); }
.scrim--light-left { background:linear-gradient(100deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.32) 40%, transparent 64%); }
.on-photo-light, .on-photo-light .eyebrow, .on-photo-light h1, .on-photo-light h2 { color:#fff; }
.on-photo-dark, .on-photo-dark h1, .on-photo-dark h2 { color:#111; }
.on-photo-dark .eyebrow { color:#222; }
.halo { text-shadow:0 2px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4); }

/* Footer */
footer { background:var(--aa-black); color:var(--aa-white); padding:56px 0 36px; }
.fgrid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
footer .strap { font-family:var(--aa-title); font-size:24px; max-width:11em; line-height:1.2; }
footer h4 { font-family:var(--aa-body); text-transform:uppercase; letter-spacing:0.12em; font-size:12px; font-weight:700; color:#cfcfcf; margin-bottom:16px; }
footer ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
footer ul a { font-size:14px; color:#e6e6e6; }
footer ul a:hover { color:#fff; opacity:0.7; }
.fbase { border-top:1px solid #333; margin-top:40px; padding-top:22px; font-size:12.5px; letter-spacing:0.07em; text-transform:uppercase; color:#9a9a9a; }

.note-banner { background:var(--aa-soft); border:1px dashed var(--aa-grey); padding:9px 16px; font-size:12px; color:var(--aa-muted); text-align:center; letter-spacing:0.03em; }

@media (max-width:900px){
  .wrap { padding:0 18px; }
  .hbar { padding:14px 18px; }
  .nav { display:none; }
  .menu-toggle { display:inline-block; }
  .logo img { height:34px; }
  .section { padding:44px 0; }
  .shead h2 { font-size:32px; }
  .tiles { grid-template-columns:1fr; gap:10px; }
  .tile { height:150px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); gap:10px 14px; }
  .card__name { font-size:20px; }
  .fgrid { grid-template-columns:1fr 1fr; gap:28px; }
  footer .strap { grid-column:1 / -1; font-size:22px; }
}