/* ==========================================================================
   Dahab v24 storefront: layout.css (owner LAYOUT)
   Header (inner = solid, home = transparent/absolute; never sticky), mobile menu sheet, footer.
   Final cascade of spec 01 §4-§6 / §9. Desktop/mobile switch of the header at 900px.
   ========================================================================== */

/* ---------- Header ---------- */
.site-header{z-index:30;position:relative;display:flex;justify-content:space-between;align-items:center;gap:22px;height:110px;padding:0 4%;
  color:#542039;background:#fffaf8;border-bottom:1px solid #581d3710}
.immersive-home{position:relative}
.immersive-home .site-header{position:absolute;inset:0 0 auto;background:0 0;border:0}

.logo-link{flex-direction:column;flex-shrink:0;align-items:center;line-height:1;display:flex}

.desktop-nav{align-items:center;gap:clamp(16px,2vw,30px);display:flex}
.desktop-nav a{position:relative;padding:14px 0;font-size:16px;font-weight:500;white-space:nowrap}
.desktop-nav a:after{content:"";background:#963e67;width:0;height:2px;transition:width .25s;position:absolute;bottom:5px;right:0}
.immersive-home .desktop-nav a:after{background:#8e3c62}
.desktop-nav a.active:after,.desktop-nav a:hover:after{width:100%}

.shop-header-actions{align-items:center;gap:8px;display:flex}
.language-form{display:contents}
.language-toggle{padding:8px!important;font:600 14px Damas,Arial,sans-serif!important}
.cart-trigger{position:relative}
.cart-trigger>span{color:#fff;top:-2px;background:#72284b;border-radius:50%;place-items:center;min-width:19px;height:19px;font-size:12px;
  display:grid;position:absolute;inset-inline-end:-3px}
.mobile-menu{display:none}

@media (max-width:1150px){
  .site-header{gap:16px}
  .desktop-nav a{font-size:15px}
}
@media (max-width:900px){
  .site-header,.immersive-home .site-header{height:90px}
  .desktop-nav{display:none}
  .mobile-menu{display:inline-flex!important}
  .shop-header-actions{gap:5px}
}

/* ---------- Mobile menu (Radix Sheet "dahab-menu"; side right in AR, left in EN) ---------- */
.menu-overlay{position:fixed;inset:0;z-index:50;background-color:#00000080;background-color:color-mix(in oklab,#000 50%,transparent)}
.dahab-menu{position:fixed;z-index:50;top:0;bottom:0;right:0;height:100%;width:88vw!important;display:flex;flex-direction:column;gap:16px;
  padding:45px 25px!important;background-color:var(--background);border-left:1px solid;
  box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:none}
.dahab-menu[data-side=left]{right:auto;left:0;border-left:0;border-right:1px solid}
@media (min-width:640px){.dahab-menu{max-width:24rem}}
.menu-title{justify-content:space-between;align-items:center;display:flex}
.menu-title h2{font-weight:600;color:var(--foreground)}
.dahab-menu .brand-logo{width:100px;height:100px}
.dahab-menu nav{margin-top:40px;display:grid}
.dahab-menu nav a{border-bottom:1px solid var(--border);justify-content:space-between;padding:22px 0;font-size:21px;display:flex}

/* open 500ms / close 300ms cubic-bezier(.4,0,.2,1); overlay fades 150ms ease (tw-animate-css enter/exit) */
@keyframes dahab-menu-in-right{from{transform:translate3d(100%,0,0)}}
@keyframes dahab-menu-out-right{to{transform:translate3d(100%,0,0)}}
@keyframes dahab-menu-in-left{from{transform:translate3d(-100%,0,0)}}
@keyframes dahab-menu-out-left{to{transform:translate3d(-100%,0,0)}}
@keyframes dahab-menu-fade-in{from{opacity:0}}
@keyframes dahab-menu-fade-out{to{opacity:0}}
.dahab-menu[data-state=open]{animation:dahab-menu-in-right .5s cubic-bezier(.4,0,.2,1)}
.dahab-menu[data-state=closed]{animation:dahab-menu-out-right .3s cubic-bezier(.4,0,.2,1) forwards}
.dahab-menu[data-side=left][data-state=open]{animation-name:dahab-menu-in-left}
.dahab-menu[data-side=left][data-state=closed]{animation-name:dahab-menu-out-left}
.menu-overlay[data-state=open]{animation:dahab-menu-fade-in .15s ease}
.menu-overlay[data-state=closed]{animation:dahab-menu-fade-out .15s ease forwards}

/* ---------- Footer ---------- */
.site-footer{background:#f6ebe9;padding:65px 5.2% 25px}
.footer-top{grid-template-columns:1fr 1fr 1fr;align-items:start;gap:40px;display:grid}
.footer-top>p{font-size:24px;line-height:1.6}
.site-footer .brand-logo{width:150px;height:150px}
.footer-top nav{flex-direction:column;flex-wrap:wrap;align-items:start;gap:16px;font-size:15px;display:flex}
.footer-top nav a:hover{text-decoration:underline}

.footer-social{border-top:1px solid #d4aebe;flex-wrap:wrap;align-items:center;gap:24px;padding:28px 0;display:flex}
.footer-social>span{margin-inline-end:auto;font-size:17px}
.footer-social>a{align-items:center;gap:9px;min-height:44px;font-size:16px;display:flex}
.footer-social>a:hover{text-underline-offset:5px;text-decoration:underline}

.footer-bottom{color:#8a6b78;border-top:1px solid #75415a25;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;
  margin-top:60px;padding-top:24px;font-size:13px;line-height:1.9;display:flex}
.footer-bottom>span:first-child{max-width:650px;font-size:14px}
.footer-bottom>span[dir]{letter-spacing:.5px;max-width:none;font:13px Damas,Arial,sans-serif}
.footer-admin{opacity:.75;text-underline-offset:4px;font-size:12px;text-decoration:underline}

@media (max-width:800px){
  .site-footer{padding:50px 6% 25px}
  .footer-top{grid-template-columns:1fr 1fr;gap:35px}
  .footer-top>p{font-size:20px}
  .footer-top nav{flex-flow:wrap;grid-column:1/-1;gap:25px}
  .footer-bottom{align-items:flex-start;gap:20px;margin-top:35px;font-size:12px}
  .footer-bottom>span[dir]{text-align:left;line-height:1.6}
}
@media (max-width:700px){
  .footer-social{gap:14px 24px}
  .footer-social>span{width:100%}
}
@media (max-width:600px){.storefront .footer-top nav{gap:14px}}
@media (max-width:480px){.footer-top nav{gap:20px;font-size:14px}}