.essentials-section { background:#f4f0df; }
.essentials-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:28px; }.essentials-heading h2 { margin:10px 0 0; color:var(--brown); font-family:Candara,Calibri,Arial,sans-serif; font-size:clamp(2.5rem,5vw,4.4rem); line-height:1; letter-spacing:-.05em; }.essentials-heading h2 em { color:var(--saffron); }.essentials-heading > p { max-width:440px; margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.essentials-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.essential-card { min-width:0; overflow:hidden; border:1px solid rgba(73,38,19,.16); border-radius:18px; background:#fffdf8; box-shadow:0 15px 35px rgba(61,40,17,.08); transition:transform .22s ease, box-shadow .22s ease; }.essential-card:hover { transform:translateY(-5px); box-shadow:0 22px 44px rgba(61,40,17,.15); }.essential-art { position:relative; display:flex; align-items:center; justify-content:center; min-height:128px; overflow:hidden; color:#fff; }.essential-art::before,.essential-art::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.22); border-radius:50%; }.essential-art::before { width:145px; height:145px; right:-30px; bottom:-80px; }.essential-art::after { width:90px; height:90px; left:-25px; top:-35px; }.essential-art i { position:relative; z-index:1; font-size:52px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.22)); }.essential-art span { position:absolute; top:15px; left:16px; font-size:11px; font-weight:800; letter-spacing:.12em; opacity:.85; }.essential-art-gold { background:linear-gradient(135deg,#d99c29,#8d4f13); }.essential-art-orange { background:linear-gradient(135deg,#f26722,#8d290c); }.essential-art-green { background:linear-gradient(135deg,#3e8e52,#0b3f24); }.essential-art-brown { background:linear-gradient(135deg,#8b4a21,#3a1609); }.essential-card-body { padding:19px 18px 13px; }.essential-card-body h3 { margin:0 0 5px; color:var(--brown); font-size:18px; line-height:1.2; }.essential-card-body p { min-height:45px; margin:0 0 13px; color:var(--muted); font-size:13px; line-height:1.5; }.essential-card-body strong { color:var(--forest-deep); font-size:18px; }.essential-card-body small { color:var(--muted); font-size:12px; font-weight:700; }.essential-controls { display:flex; align-items:center; gap:9px; padding:0 18px 18px; }.essential-controls button,.essential-controls output { display:grid; min-width:33px; height:33px; place-items:center; border:1px solid #ead4bf; border-radius:9px; color:var(--brown); background:#fff; font-size:18px; font-weight:800; }.essential-controls button { cursor:pointer; transition:.2s ease; }.essential-controls button:hover { border-color:var(--saffron); color:#fff; background:var(--saffron); }.essential-controls output { border-color:var(--forest); color:var(--forest); font-size:14px; }.essentials-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding:20px 22px; border:1px solid rgba(73,38,19,.16); border-radius:17px; background:rgba(255,253,248,.78); }.essentials-summary > div { display:grid; gap:1px; }.essentials-summary span { color:var(--muted); font-size:13px; font-weight:800; }.essentials-summary strong { color:var(--brown); font-size:25px; }.essentials-summary .button { min-height:46px; font-size:13px; }.essentials-summary p { margin:0; color:var(--forest); font-size:13px; font-weight:800; }.essentials-summary p:empty { display:none; }
@media (max-width:980px) { .essentials-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .essentials-heading,.essentials-summary { align-items:flex-start; flex-direction:column; }.essentials-grid { grid-template-columns:1fr; }.essentials-summary { gap:15px; }.essentials-summary .button { width:100%; } }