/* ============================================================
   مناحل الدر | Arabic-first, mobile-first storefront | stage 1
   ============================================================ */
:root {
    --cream: #faf5ec;
    --cream-2: #f2e9d8;
    --white: #fffdf8;
    --brown: #42250f;
    --brown-2: #69431e;
    --gold: #bb872c;
    --gold-light: #f2c96d;
    --green: #3d6240;
    --muted: #806d5b;
    --border: #e9ddc9;
    --shadow: 0 16px 45px rgba(72, 43, 18, .085);
    --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--brown); background: var(--white); font-family: 'Cairo', Tahoma, Arial, sans-serif; line-height: 1.7; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
.page-container { width: min(1160px, calc(100% - 36px)); margin-inline: auto; }
.topline { background: #3e2413; color: #fff4d9; text-align: center; font-size: 11px; font-weight: 700; padding: 6px 10px; letter-spacing: .1px; }
.topline span { color: var(--gold-light); padding: 0 10px; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,253,248,.97); backdrop-filter: blur(16px); border-bottom: 1px solid #eadfcb; }
.header-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; gap: 10px; align-items: center; min-width: 0; }
.brand-symbol { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; color: #fff8df; font-size: 23px; background: linear-gradient(145deg, #d5a549, #9d6413); border-radius: 13px 13px 17px 17px; box-shadow: 0 3px 9px #a4722338; }
.brand-copy strong { display: block; font-size: 19px; line-height: 1.25; font-weight: 900; letter-spacing: -.5px; }
.brand-copy small { display: block; color: var(--muted); font-size: 9px; font-weight: 700; }
.desktop-nav { display: none; gap: 36px; font-weight: 700; }
.desktop-nav a:hover, .text-link:hover { color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-contact { display: none; color: var(--brown); font-weight: 800; border: 1px solid var(--border); border-radius: 30px; padding: 7px 19px; }
.cart-button { width: 39px; height: 39px; display: grid; place-items: center; position: relative; }
.cart-button svg { height: 25px; width: 25px; }
.cart-count { position: absolute; top: -2px; right: -5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #c29036; color: #fff; font-size: 10px; font-weight: 800; }
main { min-height: 52vh; }
.eyebrow { display: inline-block; color: #a67222; font-weight: 800; letter-spacing: .2px; font-size: 12px; }
.eyebrow.light { color: #eccc83; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 51px; padding: 9px 25px; border: 0; border-radius: 13px; font-weight: 900; font-size: 14px; transition: transform .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.045); }
.btn-gold { background: linear-gradient(135deg, #f1c56b, #ca9538); color: #352010; }
.btn-brown { background: linear-gradient(135deg, #63391a, #38200e); color: #fff9e9; }
.btn.full { display: flex; width: 100%; }

/* Home: hero */
.hero { background: radial-gradient(circle at 78% 12%, #9c6936 0, transparent 38%), linear-gradient(118deg, #23170d 0, #523116 58%, #6c401b 100%); color: white; overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr; min-height: 510px; position: relative; }
.hero-copy { padding: 35px 2px 0; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(32px, 8.3vw, 60px); line-height: 1.37; font-weight: 900; letter-spacing: -1.2px; margin: 13px 0 12px; }
.hero h1 em { color: #f1c973; font-style: normal; }
.hero-copy p { max-width: 460px; color: #eee0c9; font-size: 13px; line-height: 2; margin-bottom: 20px; }
.hero-mini-proof { display: flex; gap: 16px; margin-top: 15px; font-size: 11px; font-weight: 700; color: #efdcb2; }
.hero-art { height: 253px; margin-top: -32px; position: relative; align-self: end; display: flex; justify-content: center; align-items: flex-end; }
.hero-art img { position: relative; z-index: 2; height: 295px; max-width: unset; filter: drop-shadow(18px 16px 15px rgba(12,8,2,.39)); }
.hero-circle { position: absolute; z-index: 1; left: 50%; bottom: 15px; width: 310px; height: 250px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle, #f9d08570 0%, #b98b4350 45%, transparent 70%); }
.art-stamp { z-index: 3; position: absolute; top: 4px; right: 10%; width: 68px; height: 68px; border-radius: 50%; background: #f1c875; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--brown); font-weight: 900; box-shadow: 0 8px 35px #0004; transform: rotate(10deg); }
.art-stamp small { font-size: 9px; }
.hero-wave { height: 28px; background: var(--white); border-radius: 46% 46% 0 0/100% 100% 0 0; margin-top: -10px; position: relative; }
.benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; background: var(--cream); border: 1px solid #f0e3cd; padding: 16px 7px; border-radius: 18px; margin-top: 20px; }
.benefits>div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; position: relative; }
.benefits>div:not(:last-child)::after { content: ''; position: absolute; top: 15%; bottom: 15%; left: -3px; width: 1px; background: #e5d7c2; }
.benefit-icon { font-size: 24px; color: var(--gold); line-height: 1.3; }
.benefits strong { font-size: 11px; line-height: 1.6; }
.benefits small { font-size: 9px; color: var(--muted); }

/* Home: products */
.products-section { text-align: center; padding-block: 62px 55px; scroll-margin-top: 93px; }
.products-section h2, .nature-text h2 { font-size: clamp(25px,5vw,37px); line-height: 1.4; margin: 5px 0 8px; }
.section-subtitle { font-size: 12px; color: var(--muted); max-width: 620px; margin: 0 auto 28px; }
.products-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; text-align: right; }
.product-card { background: #fff; overflow: hidden; border: 1px solid var(--border); border-radius: 17px; box-shadow: 0 5px 20px #46300f09; }
.product-image { display: block; height: 180px; position: relative; overflow: hidden; background: #f1e6d5; }
.product-image-jar { background: radial-gradient(circle at 50% 80%, #ffe5aa, #f4e8d6 65%); display: flex; align-items: center; justify-content: center; }
.product-image-jar img { height: 180px; width: auto; margin-top: 17px; filter: drop-shadow(8px 9px 8px #6c411b35); }
.product-image-tree img { height: 100%; width: 100%; object-fit: cover; }
.product-chip { position: absolute; top: 10px; right: 9px; z-index: 1; background: rgba(255,253,244,.93); color: var(--green); border-radius: 30px; padding: 3px 9px; font-size: 8px; font-weight: 800; }
.product-content { padding: 13px 11px 15px; }
.product-content h3 { font-size: 16px; margin: 0 0 4px; }
.product-content p { color: var(--muted); font-size: 10px; line-height: 1.7; min-height: 44px; margin-bottom: 7px; }
.product-price { font-size: 10px; color: var(--muted); margin-bottom: 13px; }
.product-price strong { font-size: 13px; color: #a26c1a; display: block; }
.product-content .btn { font-size: 11px; min-height: 39px; border-radius: 9px; padding: 8px; }
.nature-banner { display: grid; grid-template-columns: 1fr; background: #f3ebdf; border-radius: var(--radius); overflow: hidden; margin-bottom: 65px; }
.nature-photo { min-height: 220px; }
.nature-photo img { width: 100%; height: 100%; min-height: 220px; max-height: 320px; object-fit: cover; }
.nature-text { padding: 26px 24px 32px; }
.nature-text p { color: #776655; font-size: 12px; }
.text-link { font-weight: 800; color: #9d6c20; }

/* Product details */
.product-page { padding-top: 18px; padding-bottom: 70px; }
.breadcrumb { display: flex; gap: 10px; align-items: center; color: #917a62; font-size: 11px; margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb strong { color: var(--brown); }
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; }
.detail-primary-image { height: 350px; border-radius: 23px; overflow: hidden; position: relative; }
.detail-jar { background: radial-gradient(circle at 50% 75%, #f3ce82, #f9efdb 52%, #ece0cd 100%); display: grid; place-items: center; }
.detail-jar img { height: 320px; width: auto; object-fit: contain; filter: drop-shadow(15px 14px 15px #75513044); }
.detail-tree { background: #f1e8d8; }
.detail-tree img { height: 100%; width: 100%; object-fit: cover; }
.photo-pill { position: absolute; right: 16px; top: 16px; background: #fff9e6; border-radius: 40px; padding: 5px 12px; font-size: 11px; color: var(--green); font-weight: 900; }
.detail-thumbnails { display: flex; gap: 10px; margin-top: 12px; }
.thumbnail { border: 2px solid transparent; background: #f5eee1; border-radius: 12px; height: 76px; width: 76px; padding: 4px; overflow: hidden; }
.thumbnail.selected { border-color: var(--gold); }
.thumbnail img { height: 100%; width: 100%; object-fit: contain; border-radius: 8px; }
.detail-info { padding-top: 8px; }
.detail-info h1 { font-size: clamp(30px,6.8vw,43px); line-height: 1.3; margin: 6px 0 7px; }
.detail-tagline { color: #a67928; font-weight: 800; font-size: 12px; margin-bottom: 16px; }
.detail-description { color: #766450; font-size: 13px; line-height: 2.2; }
.info-points { display: flex; gap: 9px; flex-wrap: wrap; margin: 18px 0 23px; }
.info-points span { background: #f4eee4; color: #5d513c; padding: 6px 11px; font-size: 10px; border-radius: 25px; font-weight: 800; }
.order-panel { padding: 19px 15px; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 27px #5c381b0b; }
.order-panel h2 { font-size: 18px; margin: 0 0 12px; }
.variant-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.variant-option { background: var(--white); border: 1.5px solid #e4d4ba; border-radius: 12px; padding: 13px 9px; display: grid; justify-items: center; gap: 2px; text-align: center; position: relative; cursor: pointer; }
.variant-option:has(input:checked) { border-color: var(--gold); background: #fff8eb; box-shadow: 0 0 0 1px var(--gold) inset; }
.variant-option input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.variant-option strong { font-size: 14px; }
.variant-option span:last-child { font-size: 18px; font-weight: 900; color: #a7741f; }
.variant-option small { font-size: 12px; }
.radio-dot { position: absolute; top: 10px; right: 10px; width: 13px; height: 13px; border: 1.5px solid #c7af8d; border-radius: 50%; }
.variant-option:has(input:checked) .radio-dot { border: 4px solid #af7b2a; background: #fff; }
.qty-price-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 20px 0 16px; }
.qty-price-row h3 { font-size: 12px; margin-bottom: 7px; }
.qty-control { border: 1px solid #e8dac4; border-radius: 10px; display: flex; align-items: center; height: 41px; background: #fff; }
.qty-control button { width: 38px; height: 39px; background: transparent; border: none; font-size: 20px; color: var(--brown); }
.qty-control input { width: 43px; text-align: center; border: none; outline: 0; font-weight: 900; -moz-appearance: textfield; }
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.total-price small { display: block; color: var(--muted); }
.total-price strong { font-size: 20px; color: #93641e; }
.order-panel>.btn { margin-top: 9px; }
.inquiry-panel p { color: var(--muted); }
.notice { padding: 12px 17px; background: #eaf5e8; color: #33623a; border-radius: 13px; margin-bottom: 18px; font-weight: 700; }
.notice a { margin-right: 12px; text-decoration: underline; }
.tree-story { margin-top: 60px; background: #f5eee3; border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1fr; }
.tree-story-image img { width: 100%; height: 235px; object-fit: cover; }
.tree-story-copy { padding: 25px 22px; }
.tree-story-copy h2 { font-size: 26px; margin: 7px 0 11px; }
.tree-story-copy p { color: #776553; font-size: 13px; line-height: 2; }
.tree-story-copy small { color: #998570; font-size: 10px; }

/* Cart */
.cart-page { padding: 20px 0 78px; }
.cart-page>h1 { font-size: 31px; margin-bottom: 23px; }
.empty-cart { background: var(--cream); text-align: center; padding: 75px 15px; border-radius: 22px; }
.empty-cart>span { font-size: 63px; }
.empty-cart h2 { margin-bottom: 0; }
.empty-cart p { color: var(--muted); margin-bottom: 23px; }
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 25px; align-items: start; }
.cart-line { display: flex; gap: 16px; align-items: flex-start; padding: 15px; border: 1px solid var(--border); border-radius: 17px; margin-bottom: 12px; background: #fff; position: relative; }
.cart-line-img { width: 93px; height: 114px; flex: 0 0 93px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: #f4ebda; }
.cart-line-img img { width: 90%; height: 95%; object-fit: contain; }
.cart-line-details { flex: 1; }
.cart-line-details h2 { margin-bottom: 0; font-size: 17px; }
.cart-line-details p { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.cart-line-details strong { color: #9c6d20; }
.cart-update-form { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 10px; }
.cart-update-form label { color: var(--muted); font-size: 10px; }
.cart-update-form input { width: 52px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; margin-right: 5px; }
.small-btn { background: var(--brown); color: #fff; border: none; border-radius: 7px; padding: 4px 10px; font-size: 10px; }
.remove-line { position: absolute; left: 12px; top: 7px; }
.remove-line button { background: transparent; border: 0; color: #9f8668; font-size: 26px; }
.cart-summary { padding: 24px; border-radius: 18px; background: var(--cream); border: 1px solid var(--border); }
.cart-summary h2 { font-size: 20px; }
.summary-row { display: flex; justify-content: space-between; gap: 15px; padding: 13px 0; color: #74614e; font-size: 13px; border-bottom: 1px solid var(--border); }
.summary-row.final { color: var(--brown); font-weight: 900; margin-bottom: 17px; font-size: 15px; }
.cart-summary .small-note { color: var(--muted); font-size: 11px; margin: 14px 0 0; }
.editorial-page { padding: 58px 0 90px; max-width: 830px; }
.editorial-page h1 { font-size: 38px; }
.editorial-page p { color: #766452; line-height: 2.1; }
.editorial-page a:not(.btn) { color: #976b2a; text-decoration: underline; }

/* Footer and mobile navigation */
.site-footer { background: #322011; color: #f1e5d3; padding: 48px 0 100px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-grid>div:first-child { grid-column: span 2; }
.footer-grid strong { display: block; color: #f5d490; font-size: 13px; margin-bottom: 9px; }
.footer-grid a { display: block; font-size: 12px; margin-bottom: 8px; color: #e9d9c1; }
.footer-brand { font-size: 22px; font-weight: 900; color: #f2ca74; margin-bottom: 5px; }
.footer-grid p { color: #dfcebb; font-size: 12px; max-width: 430px; }
.footer-small { margin-top: 30px; border-top: 1px solid #5d432d; padding-top: 16px; font-size: 10px; text-align: center; color: #c9b59e; }
.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 101; display: grid; grid-template-columns: repeat(4,1fr); background: rgba(255,253,248,.98); border-top: 1px solid #e5d8c6; box-shadow: 0 -5px 30px #49351617; padding-bottom: max(env(safe-area-inset-bottom), 5px); }
.mobile-bottom-nav a { display: grid; justify-items: center; padding: 7px 3px 2px; color: #735b47; font-weight: 800; }
.mobile-bottom-nav a.active { color: #b18029; }
.mobile-bottom-nav span { font-size: 24px; line-height: 1.1; }
.mobile-bottom-nav small { font-size: 10px; }

@media (min-width: 600px) {
    .page-container { width: min(1160px, calc(100% - 52px)); }
    .hero-grid { grid-template-columns: 1fr 1fr; min-height: 500px; align-items: center; }
    .hero-copy { padding-block: 50px; }
    .hero-art { margin: 0; height: 450px; align-items: center; }
    .hero-art img { height: 420px; }
    .hero-circle { width: 410px; height: 350px; bottom: 70px; }
    .art-stamp { right: 15%; top: 50px; }
    .products-grid { gap: 25px; }
    .product-image { height: 290px; }
    .product-image-jar img { height: 305px; }
    .product-content { padding: 20px; }
    .product-content h3 { font-size: 23px; }
    .product-content p { font-size: 13px; min-height: 48px; }
    .product-price strong { font-size: 18px; }
    .product-content .btn { min-height: 46px; font-size: 13px; }
    .detail-primary-image { height: 490px; }
    .detail-jar img { height: 435px; }
    .tree-story { grid-template-columns: 1fr 1fr; }
    .tree-story-image img { height: 100%; min-height: 290px; }
    .tree-story-copy { padding: 40px; }
    .nature-banner { grid-template-columns: 1fr 1fr; }
    .nature-text { display: flex; flex-direction: column; justify-content: center; padding: 35px 40px; }
    .benefits { padding: 22px; }
    .benefits strong { font-size: 15px; }
    .benefits small { font-size: 12px; }
}
@media (min-width: 900px) {
    body { font-size: 15px; }
    .header-inner { height: 85px; }
    .brand-copy strong { font-size: 23px; }
    .brand-symbol { width: 51px; height: 51px; }
    .desktop-nav { display: flex; }
    .header-contact { display: inline-block; }
    .hero-grid { min-height: 550px; }
    .hero h1 { font-size: 59px; }
    .hero-copy p { font-size: 16px; }
    .hero-art { height: 510px; }
    .hero-art img { height: 510px; }
    .products-section { padding-block: 85px; }
    .products-grid { max-width: 850px; margin: auto; }
    .detail-grid { grid-template-columns: 1fr 1fr; gap: 55px; }
    .detail-primary-image { height: 510px; }
    .detail-jar img { height: 455px; }
    .cart-layout { grid-template-columns: 1fr 380px; }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
    .footer-grid>div:first-child { grid-column: span 1; }
    .site-footer { padding-bottom: 32px; }
    .mobile-bottom-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
}

/* Admin management screens */
.admin-wrap{max-width:850px;margin:40px auto 90px;padding:0 18px;direction:rtl}
.admin-wrap h1{font-size:1.8rem;margin:0 0 22px;color:#3b2a18}.admin-wrap h2{font-size:1.25rem;color:#3b2a18}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.admin-form,.admin-panel{background:#fffdf9;border:1px solid #e5d8be;border-radius:16px;padding:20px;margin:18px 0}
.admin-form{display:grid;gap:16px}.admin-form label{display:grid;gap:5px;font-weight:700}
.admin-form input:not([type=checkbox]),.admin-form textarea{padding:12px;border:1px solid #c8bba4;border-radius:9px;max-width:100%;font:inherit;width:100%;background:#fff}
.admin-form textarea{min-height:88px}.admin-form .admin-inline{display:flex;align-items:center;gap:10px}
.admin-form button,.admin-action,.admin-secondary{background:#6f4816;color:#fff;border:0;border-radius:9px;padding:11px 18px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
.admin-secondary{background:#e6ddcc;color:#352717}.admin-table{width:100%;border-collapse:collapse;text-align:right;margin-top:18px}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid #e8decd}.admin-panel{overflow-x:auto}
.admin-notice{padding:12px;background:#f0e3bd;border-radius:8px}.validation{color:#9e2626}

/* Step 5 checkout */
.checkout-page{padding-bottom:4rem}.checkout-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:24px;align-items:start}.checkout-card{background:#fffdf8;border:1px solid #eaddc6;border-radius:20px;padding:26px;box-shadow:0 8px 30px #38240009}.checkout-card label{display:block;font-weight:700;margin:14px 0;color:#4b331e}.checkout-card input,.checkout-card textarea{display:block;width:100%;box-sizing:border-box;padding:12px 14px;margin-top:6px;border:1px solid #cfbea5;border-radius:10px;background:white;font:inherit;direction:rtl}.checkout-errors{color:#aa2626}.checkout-errors ul{padding-right:18px}.checkout-success{padding:3rem 0}@media(max-width:720px){.checkout-grid{grid-template-columns:1fr}.checkout-card{padding:18px}.checkout-page{padding-bottom:6rem}}

/* Step 7 payment options */
.payment-options {border:1px solid #d5c5a1;border-radius:14px;padding:14px;margin:15px 0;}
.payment-option {display:flex;align-items:center;gap:10px;margin:10px 0;cursor:pointer;}
.payment-option input {width:auto;}

/* Step 8: admin dashboard */
.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin:20px 0 25px}.dashboard-tile{border:1px solid #e8dbbd;border-radius:16px;padding:18px;background:#fffaf1;display:flex;flex-direction:column;gap:10px;min-width:0}.dashboard-tile span{font-size:13px;color:#6d5e49}.dashboard-tile strong{font-size:24px;color:#573719;overflow-wrap:anywhere}.dashboard-tile small{font-size:12px}.dashboard-scroll{overflow-x:auto}.dashboard-scroll .admin-table{width:100%;min-width:540px}.dashboard-note{font-size:12px;color:#675e50;line-height:1.9;margin-top:12px}@media(max-width:500px){.dashboard-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dashboard-tile{padding:12px}.dashboard-tile strong{font-size:19px}}

/* Step 12 branding */
.brand-logo-img{width:48px;height:48px;object-fit:contain;border-radius:10px;flex-shrink:0}
.branding-preview-logo{max-width:150px;max-height:120px;object-fit:contain;background:#f5eddf;padding:10px;border-radius:12px}
.branding-preview-banner{width:100%;max-height:240px;object-fit:cover;border-radius:12px}
.hero-art .hero-banner-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;border-radius:22px;z-index:0}
.hero-art>img:not(.hero-banner-image){position:relative;z-index:1}
.hero-art .art-stamp{z-index:2}


/* =====================================================
   Step 13 — Premium storefront refresh (mobile first)
   Scoped to the public home page and shared header.
   ===================================================== */
:root { --gold: #b98428; --brown: #3b2414; --white:#fffcf7; }
body { background:#fffcf7; }
.site-header { box-shadow:0 6px 32px rgba(45,28,10,.045); }
.brand-copy strong { letter-spacing:-.7px; }
.hero { background:radial-gradient(ellipse at 65% 32%,rgba(198,134,57,.24),transparent 43%),linear-gradient(120deg,#211609 0%,#462911 50%,#845126 100%); }
.hero-grid { isolation:isolate; }
.hero-grid::before { content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#f6ce7b .7px,transparent .7px);background-size:21px 21px; }
.hero-copy { z-index:4; }
.hero .eyebrow.light { color:#f8d99b; }
.hero h1 { max-width:640px; text-wrap:balance; text-shadow:0 3px 16px rgba(0,0,0,.1); }
.hero-copy p { max-width:485px;color:#fff2d9; }
.hero-art { isolation:isolate; }
.hero-art::before { content:"";position:absolute;bottom:0;width:75%;height:18%;border-radius:50%;filter:blur(24px);background:#110b0680; }
.hero-art>img:not(.hero-banner-image) { object-fit:contain; filter:drop-shadow(15px 24px 19px #10090094); }
.hero-circle { background:radial-gradient(ellipse,rgba(255,218,137,.58),rgba(198,131,36,.22) 55%,transparent 74%); }
.hero-product-caption { display:none;position:absolute;z-index:3;bottom:25px;left:14px;padding:12px 20px;border:1px solid #f9d99765;border-radius:15px;background:rgba(44,27,12,.78);box-shadow:0 10px 26px #10090038;backdrop-filter:blur(12px); }
.hero-product-caption span { display:block;font-size:11px;color:#f5ce85; }
.hero-product-caption strong { font-size:15px;color:#fff7e8; }
.benefits { position:relative;z-index:3;box-shadow:0 12px 42px #57320f13;background:linear-gradient(120deg,#fff9ed,#f5ecdb); }
.products-section { padding-top:70px; }
.products-section h2 { font-weight:900; }
.product-card { transition:transform .25s,box-shadow .25s;border-color:#e8d9bb;box-shadow:0 14px 33px #59360c0e; }
.product-card:hover { transform:translateY(-4px);box-shadow:0 20px 46px #59360c20; }
.product-image-jar { background:radial-gradient(ellipse at 50% 70%,#f6d798,#f5e7d0 68%); }
.product-image-tree { background:#d6e4cd; }
.product-image img { transition:transform .3s ease; }
.product-card:hover .product-image img { transform:scale(1.035); }
.product-content { background:linear-gradient(#fffefb,#fffaf1); }
.product-card-kicker { font-size:10px;font-weight:800;color:#a87b39;margin-bottom:5px; }
.product-content h3 { font-weight:900; }
.product-chip { box-shadow:0 3px 11px #331a0d21; }
.nature-banner { box-shadow:0 16px 40px #42280812; }
.nature-photo img { object-position:center 60%; }
@media(max-width:599px) {
  .topline { font-size:10px;padding:5px; }
  .header-inner { height:64px; }
  .brand-copy strong { font-size:18px; }
  .hero-grid { min-height:630px;align-content:start; }
  .hero-copy { text-align:center;padding:42px 10px 0; }
  .hero h1 { font-size:clamp(31px,9vw,43px);line-height:1.3;margin:10px 0; }
  .hero-copy p { font-size:12px;line-height:1.9;margin:0 auto 16px; }
  .hero-mini-proof { justify-content:center;flex-wrap:wrap; }
  .hero-art { height:300px;margin-top:4px; }
  .hero-art>img:not(.hero-banner-image) { height:317px; }
  .art-stamp { top:20px;right:13%; }
  .hero-circle { bottom:10px;height:225px; }
  .hero-product-caption { display:block;bottom:10px;left:3px;padding:7px 10px; }
  .hero-product-caption strong { font-size:11px; }
  .hero-product-caption span { font-size:9px; }
  .benefits { margin-top:12px; }
  .products-section { padding-block:52px; }
  .products-grid { gap:10px; }
  .product-image { height:175px; }
  .product-image-jar img { height:173px; }
  .product-content { padding:12px 9px; }
  .product-content h3 { font-size:15px; }
  .product-card-kicker { font-size:8px; }
  .product-content .btn { font-size:10px; }
  .nature-banner { margin-bottom:45px; }
}
@media(min-width:600px) {
 .hero-product-caption { display:block; }
 .hero-grid { min-height:570px; }
 .hero-art { height:490px; }
 .hero-art>img:not(.hero-banner-image) { height:450px; }
 .products-grid { max-width:940px; }
}
@media(min-width:900px) {
 .hero-grid { min-height:600px; }
 .hero-art { height:560px; }
 .hero-art>img:not(.hero-banner-image) { height:525px; }
 .hero h1 { font-size:clamp(52px,4.5vw,72px); }
 .product-image { height:320px; }
 .product-image-jar img { height:320px; }
}