/* The website's look and navigation (owner, 1 Nov 2026), loaded after store.css. */

/* the bottom bar: one equal column per tab shown, the bar centred on the screen and as wide as it allows (an iPhone Pro Max showed five tabs in six
   columns: the tabs to one side and an empty column on the other) */
@media (max-width:760px){
  .bottom-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));max-width:560px;margin-inline:auto}
  .bottom-nav a,.bottom-nav button{min-width:0}
  .bottom-nav span:not(.cart-count){white-space:nowrap;font-size:clamp(9px,2.75vw,11px);letter-spacing:-.1px}
}

/* no floating buttons over the page any more: the assistant opens from the header, WhatsApp is on «تواصل معنا» */
.wa-fab,.as-fab{display:none!important}
.as-btn{color:var(--brand)}
@media (min-width:761px){.as-panel{top:auto;bottom:24px}}

/* the header: the round emblem and the name larger, the name always «Holistic Corner» in English, no slogan line */
.brand{gap:12px}
.top-inner .brand img{width:76px;height:76px}
.brand-name{font-family:"Merriweather Sans",Tajawal,serif;font-weight:800;font-size:23px;line-height:1.1;color:#5c3a23;letter-spacing:.2px;white-space:nowrap}
@media (min-width:761px) and (max-width:1100px){.top-inner .brand img{width:60px;height:60px}.brand-name{font-size:18px}}
@media (max-width:760px){
  .ah-brand{gap:10px}
  .ah-brand img{width:clamp(44px,13vw,56px);height:clamp(44px,13vw,56px)}
  .ah-brand b{font-size:clamp(16px,5vw,21px);line-height:1.05;white-space:normal;overflow-wrap:normal}
}
@media (max-width:360px){.app-head{gap:6px}.app-head .ah-btn{width:40px;height:40px}}

/* the Wall of Love's cards: one size in a strip and on the wall, the start of the conversation with «… اقرأ المزيد», the whole card opening it */
.lv-card{--lv-h:340px}
.love-rail>.lv-card,.love-wall .lv-card{height:var(--lv-h)}
.love-rail>.lv-card{flex:0 0 260px}
.love-rail{align-items:stretch}
.lv-card .lv-convo{flex:1 1 auto;min-height:0;overflow:hidden}.lv-card .lv-convo>*{flex-shrink:0}
.lv-card.lv-clamp .lv-convo{max-height:none;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.lv-card .lv-pic img{aspect-ratio:auto;height:130px;object-fit:cover}
.lv-card .lv-pic figcaption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lv-card .love-prods{flex-wrap:nowrap;overflow:hidden;flex:none}
.lv-card .lv-foot{flex:none}
.lv-card .lv-more{flex:none;text-decoration:none;margin-top:-4px}
.lv-card[tabindex]{cursor:pointer;transition:transform .15s,box-shadow .15s}
.lv-card[tabindex]:hover{box-shadow:0 6px 18px rgba(90,58,30,.12)}
.lv-card[tabindex]:focus-visible{outline:2px solid var(--lv-deep);outline-offset:2px}
.lv-card[tabindex]:active{transform:scale(.99)}
@media (max-width:760px){.love-wall .lv-card{--lv-h:300px}.love-wall .lv-card .lv-pic img{height:120px}}
@media (min-width:1000px){.love-wall .lv-card{--lv-h:360px}}
/* the small ornament in the other top corner, in the card's own colours */
.lv-orn{position:absolute;top:9px;width:26px;height:26px;color:var(--lv-leaf);stroke:var(--lv-stem);fill:var(--lv-leaf);opacity:.72;pointer-events:none}
.lv-orn.at-l{left:11px}.lv-orn.at-r{right:11px}
.lv-orn-hearts{color:#985850;width:24px;height:24px;opacity:.8}.lv-t-brick .lv-orn-hearts{color:#7D4038}
.lv-orn-flower{color:#A56B43;stroke:#A56B43}.lv-t-brown .lv-orn-flower{color:#7A4A2B;stroke:#7A4A2B}
.lv-orn-anise{color:#985850;stroke:#7A4A2B}.lv-orn-cinnamon{color:#A56B43;stroke:#7A4A2B}.lv-orn-rosemary{color:#508263;stroke:#508263}
.lv-t-green .lv-orn-rosemary{color:#3D6650;stroke:#3D6650}
/* the whole conversation in a window */
.love-modal{position:fixed;inset:0;z-index:90;background:rgba(42,37,34,.45);display:grid;place-items:center;padding:16px}
.lm-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;border-radius:20px;box-shadow:0 18px 50px rgba(42,37,34,.25)}
.lm-box .lv-card{border-radius:20px;padding:16px 16px 14px;min-height:200px}
.lv-full .lv-convo{overflow:visible}
.lv-full .lv-pic img{height:auto;max-height:70vh;object-fit:contain;aspect-ratio:auto}
.lv-full .lv-b p{font-size:15.5px}
.lm-x{position:absolute;top:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#7A4A2B;font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(42,37,34,.15)}
.lm-box .lv-orn{display:none}
html.lm-open{overflow:hidden}

/* the wholesale request's form: the country list drawn as the other boxes */
.ws-q select{font:inherit;font-weight:400;color:inherit;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px 14px;outline:none;min-height:48px}
.ws-q select:focus{border-color:var(--brand)}
#wsLead .grid2 .ws-q{align-content:start}

/* «حمّل التطبيق»: the app's picture, what it gives and the way to it (hidden until the console has a store's link) */
.apx{max-width:1200px;margin:24px auto 30px;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;padding:28px 34px;border-radius:26px;background:linear-gradient(135deg,#F8F1E4 0%,#EFE2CC 100%);border:1px solid rgba(165,107,67,.18);overflow:hidden}
.apx-body{min-width:0}.apx h2{margin:2px 0 6px;font-size:28px;color:#5c3a23}.apx .eyebrow{margin:0;color:#508263;font-weight:800;letter-spacing:.3px}
.apx-sub{margin:0 0 12px;color:#4a4039;font-size:16px;line-height:1.7}
.apx-perks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.apx-perks li{display:flex;align-items:center;gap:10px;font-weight:700;color:#2A2522}.apx-perks li span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;flex:none;font-size:16px}
.apx-desk{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.apx-qr{margin:0;display:grid;justify-items:center;gap:6px;padding:10px;background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(90,58,30,.1)}
.apx-qr img{width:132px;height:132px;display:block}.apx-qr figcaption{font-size:12px;color:#7B7B7B;max-width:140px;text-align:center;line-height:1.4}
.apx-stores{display:flex;flex-direction:column;gap:10px}.apx-stores.sm{flex-direction:row;flex-wrap:wrap;gap:8px}
.apx-store{display:inline-flex;align-items:center;gap:10px;min-width:170px;padding:9px 16px;border-radius:14px;background:#5c3a23;color:#fff;text-decoration:none;direction:ltr}
.apx-store svg{flex:none;color:#fff}.apx-store span{display:grid;line-height:1.15;text-align:left}.apx-store small{font-size:11px;opacity:.85}.apx-store b{font-size:17px}
.apx-store:hover{background:#7A4A2B}
.apx-stores.sm .apx-store{min-width:0;padding:6px 12px}.apx-stores.sm .apx-store b{font-size:14px}
.apx-go{min-width:220px}
/* the phone's picture, drawn: the emblem, an order on its way, the points, an offer */
.apx-phone{width:170px;height:330px;border-radius:34px;background:#2A2522;padding:9px;box-shadow:0 18px 40px rgba(42,37,34,.25);transform:rotate(-4deg)}
[dir=rtl] .apx-phone{transform:rotate(4deg)}
.apx-screen{position:relative;height:100%;border-radius:26px;background:#F8F1E4;display:flex;flex-direction:column;align-items:center;gap:9px;padding:28px 12px 12px;overflow:hidden}
.apx-notch{position:absolute;top:8px;left:50%;width:54px;height:14px;margin-left:-27px;border-radius:9px;background:#2A2522}
.apx-screen>img{width:44px;height:44px;border-radius:50%}.apx-screen>b{font-family:"Merriweather Sans",Tajawal,serif;font-size:12px;color:#5c3a23;direction:ltr}
.apx-card{display:flex;align-items:center;gap:7px;width:100%;padding:8px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(90,58,30,.08)}
.apx-card>i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#DCE4DA;font-size:12px;flex:none}
.apx-card.off>i{background:#E8D3D0;color:#985850;font-weight:800}
.apx-card>span:not(.apx-steps){flex:1;display:grid;gap:4px}.apx-card em{display:block;height:5px;border-radius:3px;background:#E4D1BD}.apx-card em.s{width:60%;background:#EFE2CC}
.apx-steps{display:flex;gap:3px}.apx-steps i{width:7px;height:7px;border-radius:50%;background:#E4D1BD}.apx-steps i.on{background:#508263}
.apx-pts{font-size:11px;color:#A56B43}
.apx-wrap{padding:10px 0 20px}.apx-page{margin-top:10px}
/* the footer's line */
.apx-foot{max-width:1280px;margin:22px auto 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.apx-foot img{border-radius:12px;flex:none}.apx-ft{flex:1;min-width:160px;display:grid}.apx-ft b{color:#5c3a23}.apx-ft small{color:#7B7B7B}
@media (max-width:760px){
  .apx{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;margin:18px 16px 26px;padding:22px 18px}
  .apx-phone{width:140px;height:270px;border-radius:28px}.apx-screen{border-radius:21px;padding-top:24px;gap:7px}
  .apx h2{font-size:23px}.apx-perks{justify-items:start;max-width:300px;margin-inline:auto;text-align:start}
  .apx-foot{margin:18px 0 0}
}