/* Achoucha design v6, "Bab": the Moroccan doorway.
   Colours come from the product world: zellige wall, jar label, linen, toasted sellou. */
:root{
 --zellige:#0d4238;--green:#13564f;--deep:#0d4238;--teal:#13564f;
 --salmon:#f2a58e;--salmon-deep:#e88f75;--peach:#fbd3bd;--plaster:#f9ebdf;--cream:#fffaf4;--sand:#f9ebdf;
 --sellou:#c5935a;--ink:#12332c;--muted:#4c625a;--line:#e4d6c7;
 --arabic:'IBM Plex Sans Arabic',system-ui,sans-serif;
 --display:'Fraunces','Aref Ruqaa',serif;--latin:'IBM Plex Sans Arabic',system-ui,sans-serif;
 --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.075'%3E%3Cpath d='M36 6l9 21 21 9-21 9-9 21-9-21-21-9 21-9z'/%3E%3Cpath d='M15 15h42v42H15z'/%3E%3Cpath d='M0 0l15 15M72 0L57 15M0 72l15-15M72 72L57 57'/%3E%3C/g%3E%3C/svg%3E");
 --arch-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M8 125V64.800A46 46 0 1 1 92 64.800V125Z'/%3E%3C/svg%3E");
}
body{font:400 16px/1.85 var(--arabic);color:var(--ink);background:var(--cream)}
main{overflow-x:clip}
p{color:var(--muted)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.35;color:inherit}
h2 em,h1 em{font-style:normal;color:inherit}
html{scroll-padding-top:150px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.select2-selection:focus-visible{outline:3px solid var(--salmon-deep);outline-offset:3px}

/* Buttons */
.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{min-height:50px;padding:12px 30px;border-radius:999px;border:0;background:var(--green);color:var(--cream);font:600 16px/1.5 var(--arabic);gap:12px;transition:background-color .2s}
.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--zellige);color:#fff}
.button .icon{width:20px;height:20px}

/* Header and strip */
.announcement{background:var(--zellige);padding:8px 16px;gap:14px;font-size:14px;line-height:1.6}
.announcement-star{width:6px;height:6px;background:var(--salmon);transform:rotate(45deg);font-size:0}
.site-header{background:rgba(255,250,244,.97);border-bottom:1px solid var(--line)}
.main-nav{min-height:84px}
.navlinks{font-size:16px;gap:34px}
.brand small{font-size:12px}
.nav-tag{display:none}
.ach-order-nav{min-height:44px;padding:6px 20px;border:1.5px solid var(--green);border-radius:999px;font-size:15px;font-weight:500;color:var(--green);transition:background-color .2s,color .2s}
.ach-order-nav:hover{background:var(--green);color:var(--cream)}
.benefits-strip{font-size:15px}
.benefits-strip .icon{width:22px;height:22px;color:var(--sellou);margin-left:6px}

/* Home */
.campaign-hero h1{font-size:clamp(48px,6vw,92px);line-height:1.3}
.hero-word{color:inherit}
.hero-content>p{font-size:18px;color:var(--ink)}
.section-heading{align-items:end}
.section-heading h2{font-size:clamp(36px,4vw,60px)}
.section-heading>p{font-size:16px;max-width:none}
.universe-overlay b{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,34px)}
.filters .filter{min-height:44px;border-radius:999px;font-size:15px}
.filter.active{background:var(--green);color:var(--cream)}
.collection-section{background:var(--plaster)}
.product-visual{border-radius:999px 999px 0 0;overflow:hidden;position:relative}
.product-tag{top:auto;bottom:12px;right:50%;transform:translateX(50%);white-space:nowrap;border-radius:999px;padding:3px 14px;font-size:13px;left:auto}
.product-information h3{font-family:var(--display);font-size:24px;font-weight:500}
.product-price{font-weight:600;font-size:18px;color:var(--green)}
.product-card-bottom{font-size:14px}
.card-add.button,.woocommerce a.card-add.button{min-height:44px;padding:6px 16px;background:var(--green);color:var(--cream);border-radius:999px;font-size:14px;font-weight:500}
.card-add.button:hover,.woocommerce a.card-add.button:hover{background:var(--zellige);color:#fff}
.manifesto{background-color:var(--zellige);background-image:var(--tile)}
.manifesto p{font-family:var(--display)}
.manifesto p span{color:inherit}
.story-copy h2,.faq-title h2{font-size:clamp(36px,4vw,56px)}
.pack-title h3{font-family:var(--display)}
.step-number{font-family:var(--display);font-style:normal;color:var(--sellou)}
.how-grid h3{font-size:24px}
.faq-list summary{font-size:17px;font-weight:500;min-height:56px}
.faq-list details p{font-size:16px}

/* Footer */
.site-footer{background-color:var(--zellige);background-image:var(--tile)}
.site-footer p,.site-footer a{font-size:15px}
.footer-bottom{font-size:13px;flex-wrap:wrap;gap:6px 24px}
.footer-bottom span:last-child{white-space:normal;min-width:0;margin-right:0}
.footer-intro h2{font-size:clamp(32px,3.6vw,52px)}
.footer-columns h3{font:600 16px/1.6 var(--arabic)}
.round-link{transition:background-color .2s}
.pack-actions .text-link{white-space:nowrap}
.pack-actions{gap:14px;flex-wrap:wrap}

@media(max-width:760px){
 .announcement{font-size:13px;gap:8px;padding:7px 10px;text-align:center}
 .announcement>span:last-child,.announcement-star{display:none}
 .main-nav{min-height:68px}
 .brand{font-size:32px}
 .ach-order-nav{padding:4px 14px;font-size:14px}
 .section-heading{display:block}
 .section-heading>p{margin-top:6px;font-size:16px;max-width:none}
 .benefits-strip{font-size:14px}
 .product-card-bottom{gap:8px}
}
