/* Phone layouts are kept separate from the desktop design. */
@media (max-width: 767px) {
  html { scrollbar-gutter: auto; scroll-padding-top: 120px; }
  #hero {
    height: calc(100svh - var(--announcement-height) - 80px);
    min-height: 520px;
    max-height: 760px;
    align-items: flex-end;
  }
  #hero video { object-position: 50% center; }
  #hero .hero-shade {
    background: linear-gradient(to top, #050505 0%, rgba(5,5,5,.7) 20%, rgba(5,5,5,.12) 50%, transparent 82%);
  }
  #hero .hero-content { padding: 24px 20px max(36px, env(safe-area-inset-bottom)); }
  #hero .hero-copy { max-width: 540px; }
  #hero .hero-title { font-size: clamp(24px, 6.5vw, 38px); margin-bottom: 10px; }
  #hero .hero-ornament { width: 88%; margin-bottom: 10px; }
  #hero .hero-description { max-width: 34ch; font-size: 13px; line-height: 1.85; margin-bottom: 22px; }
  #hero .hero-actions { display: flex; flex-wrap: nowrap; gap: 14px; margin-inline: auto; }
  #hero .hero-actions a { flex: 1; min-width: 0; min-height: 48px; padding: 10px 10px; gap: 6px; border-radius: 9px; font-size: 11px; white-space: nowrap; }
  #main-content > section:not(#hero):not(#story) { padding-top: 56px; padding-bottom: 56px; }
  #main-content h2 { font-size: 26px; line-height: 1.4; }
  #story { height: 480px; }
  #search-modal > div { padding: 28px 20px max(24px, env(safe-area-inset-bottom)); }
  #search-input { font-size: 16px; min-width: 0; }
  #search-modal button[aria-label], #cart-drawer button[aria-label] { min-width: 44px; min-height: 44px; }
  #cart-drawer, .premium-drawer-right { height: 100dvh; bottom: auto; }
  #cart-items-container, #wishlist-items-container, #mobile-menu-drawer nav { min-height: 0; overscroll-behavior: contain; }
  #cart-drawer > div:last-child { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  #toast { left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; }
  footer { padding-top: 48px; }
}
@media (max-width: 639px) {
  #announcement-bar { font-size: 10px; padding: 8px 10px; }
  #announcement-track p { white-space: nowrap; }
  .header-main-inner { height: 80px; padding-inline: 12px; gap: 8px; }
  .site-logo { width: 102px; height: 68px; }
  .header-brand-main { white-space: nowrap; }
  .header-brand-main > span:first-child { font-size: 23px; }
  .header-brand-main > span:last-child { font-size: 8px; letter-spacing: .19em; }
  .header-main-inner > div:last-child { gap: 0; }
  #main-header button { min-width: 44px; min-height: 44px; display: inline-flex; justify-content: center; align-items: center; }
  #main-header button[aria-label="المفضلة"] { display: none; }
  .product-grid-2026 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
  #new-collection .product-grid-2026 h4 { font-size: 12px; line-height: 1.6; }
  #new-collection .product-grid-2026 > .group > div:last-child { padding: 10px; }
  #newsletter-email { min-width: 0; font-size: 16px; }
  footer .flex.items-center.gap-3.opacity-70 { flex-wrap: wrap; justify-content: center; }
  .product-grid-2026 [data-quick-add] { left: 8px; right: 8px; bottom: 8px; }
  .product-grid-2026 [data-quick-add] button { min-height: 40px; }
}
@media (max-width: 359px) {
  #hero .hero-content { padding-inline: 18px; }
  #hero .hero-actions a { font-size: 11px; }
  .header-brand-main > span:first-child { font-size: 21px; }
  .header-brand-main > span:last-child { font-size: 7px; }
  .header-main-inner { padding-inline: 6px; }
}
@media (max-width: 767px) and (max-height: 500px) {
  #hero { min-height: 480px; }
}
.mobile-menu-link.active-nav{color:#e3bd70;background:rgba(198,161,91,.08)}
/* Wathba mobile navigation and shared WhatsApp contact. */
#mobile-menu-drawer.luxury-mobile-menu{width:min(410px,94vw);background:radial-gradient(ellipse at 100% 0,#88682c19,transparent 45%),linear-gradient(125deg,#101313,#070909);border:1px solid #7e6439;border-right:0;border-radius:22px 0 0 22px;box-shadow:-15px 0 70px #0009;overflow:hidden}
.luxury-menu-head{display:flex;justify-content:space-between;align-items:center;padding:19px 22px;border-bottom:1px solid #8e6b342b;flex:none;background:linear-gradient(150deg,#ab87451a,transparent 65%)}.luxury-menu-head img{width:140px;height:88px;object-fit:contain}.luxury-menu-head>button{height:43px;width:43px;border:1px solid #75603b;border-radius:11px;background:linear-gradient(135deg,#3f3423,#101311);color:#e8c585;font-size:31px;line-height:1;cursor:pointer}.luxury-menu-scroll{overflow-y:auto;overscroll-behavior:contain;padding:13px 15px max(22px,env(safe-area-inset-bottom));flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#75582d #0b1010}
#mobile-menu-drawer .mobile-menu-link{display:flex;width:100%;align-items:center;gap:13px;text-align:right;min-height:66px;padding:9px 11px;border:1px solid transparent;border-bottom-color:#ffffff09;color:#eee9df;font-size:16px;background:transparent;border-radius:10px;transition:background-color .15s,color .15s}.luxury-mobile-menu .menu-icon{display:grid;place-items:center;width:43px;height:43px;flex:none;border:1px solid #6d60413d;border-radius:11px;background:linear-gradient(135deg,#52472e35,#080c0b);color:#e9c98c}.menu-icon svg{width:25px;height:25px}.luxury-mobile-menu .menu-label{flex:1;min-width:0}.menu-label small{display:block;color:#aaa99f;font-size:10px;margin-top:4px}.luxury-mobile-menu .menu-chevron{font-size:26px;color:#c6c3b9;font-weight:300}.luxury-mobile-menu .menu-badge{display:grid;place-items:center;background:linear-gradient(120deg,#ecc779,#b88e40);color:#0c0c09;border-radius:50%;min-width:25px;height:25px;font-size:12px;padding:0 5px}
#mobile-menu-drawer .mobile-menu-link.active-nav{color:#f5d599;border-color:#b28e4e;background:linear-gradient(110deg,#8b6e3c88,#342a1944);box-shadow:inset 0 1px #e5bd6830}#mobile-menu-drawer .mobile-menu-link:hover{padding-right:11px;background-color:#b78c2e10;color:#f6d293}.menu-divider{display:flex;align-items:center;gap:12px;color:#c3ad7d;font-size:13px;margin:24px 12px 11px}.menu-divider:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#9e7e45)}
.menu-help{display:flex;align-items:center;gap:13px;border:1px solid #9b793d;border-radius:13px;padding:17px 14px;margin:22px 0 0;background:radial-gradient(ellipse at 0 100%,#b98b3326,transparent 65%),linear-gradient(125deg,#2c251866,#0b0f0f);color:#dec189}.menu-help-icon{width:43px;height:43px;flex:none;color:#ebc277}.menu-help-icon svg{width:100%;height:100%}.menu-help strong{display:block;font-size:17px;margin-bottom:6px}.menu-help small{display:block;color:#b8b8ad;line-height:1.8;font-size:11px}.menu-help .menu-help-pending{color:#d4ae68;font-size:10px;margin-top:5px}
.whatsapp-float{position:fixed;left:auto;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;justify-content:center;gap:0;padding:0;width:56px;height:56px;box-sizing:border-box;border-radius:50%;border:1px solid #f2d086;background:linear-gradient(130deg,#ffe2a0,#c3994c 65%,#98702e);color:#181409;box-shadow:0 6px 24px #0007,inset 0 1px #fff6;text-decoration:none;min-height:54px}.whatsapp-float svg{width:28px;height:28px}.whatsapp-float span{display:none}.whatsapp-float:hover{background:linear-gradient(130deg,#ffe8b0,#d3aa5c)}body.layer-open .whatsapp-float,html.account-modal-open .whatsapp-float{visibility:hidden;pointer-events:none}.whatsapp-float[aria-disabled=true]{cursor:default}.whatsapp-float:focus-visible,.luxury-mobile-menu a:focus-visible,.luxury-mobile-menu button:focus-visible{outline:2px solid #ffda8d;outline-offset:3px}
@media(max-width:700px){.whatsapp-float{left:auto;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));padding:0;min-height:50px;width:50px;height:50px}.whatsapp-float span{display:none}.luxury-menu-head{padding:12px 18px}.luxury-menu-head img{height:76px;width:125px}#mobile-menu-drawer .mobile-menu-link{font-size:15px;min-height:61px}.luxury-mobile-menu .menu-icon{width:39px;height:39px}.luxury-menu-scroll{padding-inline:13px}}