/* ================================================================
   HAFEZ MUSTAFA — FINAL MOBILE TARGETED POLISH
   Scope: mobile storefront presentation only.
   Preserve all existing business logic, Firebase, Admin and desktop rules.
   ================================================================ */
@media (max-width: 640px){
  /* Announcement bar: single authoritative implementation lives in main.css. */


  /* 4. Benefits under hero — real 2×2 cells, compact and scannable. */
  .trust{border-top:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;background:var(--bg)!important;}
  .trust-in{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
    padding:0!important;
    width:100%!important;
    max-width:none!important;
  }
  .ti{
    min-width:0!important;
    min-height:84px!important;
    height:auto!important;
    padding:11px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    flex-direction:column!important;
    gap:6px!important;
    border:0!important;
    color:var(--tx)!important;
    font-family:'Noto Naskh Arabic',serif!important;
    font-size:14px!important;
    line-height:1.4!important;
    letter-spacing:0!important;
  }
  .ti:nth-child(odd){border-inline-end:1px solid var(--border)!important}
  .ti:nth-child(-n+2){border-bottom:1px solid var(--border)!important}
  .ti svg{width:22px!important;height:22px!important;stroke:var(--burg)!important;flex:none!important}

  /* 5. Products — no search UI; always 2 compact columns, even on 360–380px phones. */
  .search-wrap{display:none!important}
  .prod-sec{padding:28px 16px 34px!important;}
  .prod-sec .sec-hd{max-width:100%!important;margin:0 auto 18px!important;text-align:center!important}
  .prod-sec .sec-title{font-size:2rem!important;line-height:1.15!important}
  .prod-sec .sec-sub{font-size:.98rem!important;line-height:1.7!important;max-width:100%!important}
  .filter-bar{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:0 0 14px!important;}
  .fpills{display:flex!important;flex-wrap:wrap!important;gap:6px!important;}
  body.ar .fpill{font-size:13px!important;padding:6px 10px!important;}
  body.ar .fcount{font-size:13px!important;white-space:nowrap!important;}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:stretch!important;align-items:start!important;gap:10px!important;}
  .pc{min-width:0!important;height:auto!important;}
  .pc-body{padding:11px 9px 10px!important;}
  .p-stars{gap:3px!important;margin-bottom:5px!important;}
  body.ar .p-name{font-size:1.02rem!important;line-height:1.25!important;margin-bottom:4px!important;}
  body.ar .p-desc{font-size:.8rem!important;line-height:1.55!important;margin-bottom:7px!important;}
  .p-stock-low{font-size:.66rem!important;padding:2px 5px!important;margin-bottom:5px!important;}
  .sel-group{margin-bottom:6px!important;display:block!important;}
  .sel-glbl,body.ar .sel-glbl{display:block!important;font-size:.72rem!important;line-height:1.2!important;margin-bottom:4px!important;}
  .sel-pills{display:flex!important;flex-wrap:wrap!important;gap:4px!important;min-width:0!important;}
  .spill,body.ar .spill{font-size:.72rem!important;padding:4px 6px!important;line-height:1.2!important;white-space:nowrap!important;}
  .p-price-row{margin:8px 0!important;}
  body.ar .p-price{font-size:1.3rem!important;line-height:1.15!important;}
  .atc{width:100%!important;min-height:42px!important;padding:8px 5px!important;font-size:.88rem!important;}

  /* 6. Why Us — 2×2 compact cards. Prevent a single-card-per-screen scroll. */
  #why.sec{padding:30px 16px 32px!important;}
  #why .sec-hd{max-width:100%!important;margin:0 auto 18px!important;text-align:center!important;}
  #why .sec-title{font-size:2rem!important;line-height:1.15!important;}
  .why-grid{grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0!important;background:none!important;border:0!important;}
  .wi{min-width:0!important;padding:16px 10px!important;border:1px solid var(--border)!important;background:var(--surf)!important;}
  .w-ico{width:48px!important;height:48px!important;margin:0 auto 9px!important;}
  .w-ico svg{width:20px!important;height:20px!important;}
  body.ar .wi h3{font-size:1rem!important;line-height:1.35!important;margin-bottom:5px!important;text-align:center!important;}
  body.ar .wi p{font-size:.76rem!important;line-height:1.55!important;text-align:center!important;}

  /* 7. Reviews — same site surface, compact cards, clearly separated from footer. */
  .test-sec{
    background:var(--bg)!important;
    color:var(--tx)!important;
    border-top:1px solid var(--border)!important;
    border-bottom:1px solid var(--border)!important;
    padding:30px 16px 32px!important;
    content-visibility:visible!important;
  }
  .test-sec .sec-hd{max-width:100%!important;margin:0 auto 18px!important;text-align:center!important;}
  .test-sec .sec-title{color:var(--tx)!important;font-size:2rem!important;line-height:1.15!important;}
  .test-sec .kicker{color:var(--burg)!important;}
  .test-sec .sec-div{background:var(--gold)!important;margin:10px auto!important;}
  .test-grid{grid-template-columns:1fr!important;gap:10px!important;margin:0!important;background:none!important;border:0!important;}
  .test-sec .tc{
    background:var(--surf)!important;
    color:var(--tx)!important;
    border:1px solid var(--border)!important;
    padding:14px 14px 13px!important;
    box-shadow:none!important;
    min-height:0!important;
  }
  .test-sec .t-stars{font-size:.78rem!important;margin-bottom:7px!important;}
  .test-sec .t-text{color:var(--tx2)!important;font-size:.94rem!important;line-height:1.65!important;margin-bottom:10px!important;}
  .test-sec .t-auth{gap:8px!important;}
  .test-sec .t-av{width:34px!important;height:34px!important;}
  .test-sec .t-nm{color:var(--tx)!important;font-size:.88rem!important;}
  .test-sec .t-lc{color:var(--tx3)!important;font-size:.75rem!important;}

  /* 8. Footer — larger brand mark, readable links, controlled vertical rhythm. */
  footer{padding:30px 16px 18px!important;background:var(--black-deep)!important;}
  .ft-in{padding:0!important;max-width:none!important;}
  .ft-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px 18px!important;margin-bottom:22px!important;}
  .ft-grid>div:first-child{grid-column:1/-1!important;text-align:center!important;}
  .ft-logo-mark{height:60px!important;width:auto!important;max-width:210px!important;object-fit:contain!important;margin:0 auto 10px!important;}
  .ft-logo-en{display:block!important;font-size:10px!important;letter-spacing:.08em!important;margin-bottom:8px!important;color:var(--gold-light)!important;}
  body.ar .ft-desc{font-size:1rem!important;line-height:1.7!important;max-width:30rem!important;margin:0 auto 12px!important;color:rgba(240,226,196,.82)!important;}
  .ft-soc{justify-content:center!important;gap:7px!important;}
  .ft-s{width:40px!important;height:40px!important;}
  .ft-s svg{width:16px!important;height:16px!important;}
  .ft-col h4,body.ar .ft-col h4{font-size:1rem!important;line-height:1.3!important;margin-bottom:8px!important;color:var(--gold-light)!important;}
  .ft-col ul li{margin-bottom:5px!important;}
  .ft-col ul li a,body.ar .ft-col ul li a{font-size:.98rem!important;line-height:1.7!important;color:rgba(240,226,196,.8)!important;}
  .ft-bot{padding-top:16px!important;padding-inline:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:9px!important;}
  .ft-copy,body.ar .ft-copy{font-size:.84rem!important;line-height:1.7!important;color:rgba(240,226,196,.68)!important;max-width:32rem!important;}
  .pay-icons{justify-content:center!important;}
  .pi{font-size:.7rem!important;padding:5px 8px!important;color:var(--gold-light)!important;border-color:rgba(200,165,106,.24)!important;background:transparent!important;}
  body.ar .pi{font-size:0!important;}
  body.ar .pi::after{content:'الدفع عند الاستلام';font-size:.82rem!important;}

  /* 9. Toast — when checkout is open, keep it at viewport top, never over submit CTA. */
  .toast{inset-inline-start:12px!important;inset-inline-end:12px!important;bottom:18px!important;top:auto!important;max-width:none!important;text-align:center!important;z-index:99999!important;}
  .co-ov.open ~ .toast{top:10px!important;bottom:auto!important;}

  /* Remove accidental one-column mobile overrides from earlier passes. */
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .cat-grid{grid-template-columns:1fr 1fr!important;}
  .cred-grid{grid-template-columns:1fr 1fr!important;}
  .why-grid{grid-template-columns:1fr 1fr!important;}

  /* Keep all post-product sections compact at small widths. */
  #why.sec,.test-sec{scroll-margin-top:110px!important;}
}

@media(max-width:360px){
    .prod-grid{gap:8px!important;}
    .pc-body{padding:9px 8px!important;}
    body.ar .p-name{font-size:.96rem!important;}
    body.ar .p-desc{font-size:.75rem!important;}
    .spill,body.ar .spill{font-size:.68rem!important;padding:3px 5px!important;}
    .atc{font-size:.82rem!important;}
}


/* ================================================================
   FINAL MOBILE DARK POLISH
   ================================================================ */
@media(max-width:640px){

  [data-theme=dark] .why-grid,
  [data-theme=dark] .test-grid{
    gap:.7rem!important;
  }
  [data-theme=dark] .wi,
  [data-theme=dark] .tc,
  [data-theme=dark] .pc{
    border-color:#342F2A!important;
  }
  [data-theme=dark] .w-ico svg{stroke:var(--gold-light)!important;}

  /* Don't let the two redundant labels compete with the section headline. */
  .prod-sec #prodKick,
  .test-sec #tKick{display:none!important;}


}

/* FINAL MOBILE + ADMIN POLISH */
@media(max-width:640px){
  #footerLogo{height:60px!important;max-width:220px!important;}
  /* Root cause of "footer logo turns black/invisible in dark mode" (English,
     mobile): this rule used to invert #footerLogo whenever its src contained
     "logo-english" — but the footer's English asset is logo-english-white.png,
     which also contains that substring, so the already-white footer logo was
     being inverted straight to black against the dark footer. main.css has
     three separate rules that correctly guard this with
     :not([src*="white"]) (and a later filter:none!important fix at
     #footerLogo[data-active-logo="enSrc"]), but none of them could win here:
     this rule's selector — [data-theme="dark"] #footerLogo[src*="logo-english"]
     — carries one more attribute selector than any of them, so it always won
     the cascade on specificity alone regardless of source order. Removed
     rather than patched again; the footer's English logo asset is always the
     white variant and never needs a dark-mode invert (see main.css's
     "#footerLogo's English asset... is already white" comment nearby its own
     #footerLogo[data-active-logo="enSrc"]{filter:none!important} rule, which
     now applies unopposed in both themes). */
  .prod-sec{padding-top:26px!important;padding-bottom:30px!important;}
  #why.sec{padding-top:28px!important;padding-bottom:30px!important;}
  .test-sec{padding-top:28px!important;padding-bottom:30px!important;}
  .prod-sec .sec-hd,#why .sec-hd,.test-sec .sec-hd{margin-bottom:18px!important;text-align:center!important;}
  .prod-sec .sec-title,#why .sec-title,.test-sec .sec-title{font-size:2rem!important;line-height:1.18!important;}
  [data-theme=dark] .trust,[data-theme=dark] #why,[data-theme=dark] .test-sec,[data-theme=dark] .prod-sec{border-color:#3A332D!important;}
  [data-theme=dark] .why-grid,[data-theme=dark] .test-grid{gap:8px!important;}
  [data-theme=dark] .wi,[data-theme=dark] .tc,[data-theme=dark] .pc{border-color:#3A332D!important;}
  [data-theme=dark] .wi p,[data-theme=dark] .sec-sub,[data-theme=dark] .p-desc,[data-theme=dark] .ft-copy,[data-theme=dark] .ft-col ul li a{color:#D6CDC2!important;}
  /* Footer direction: no override — inherits from <html dir> like the
     rest of the page (see main.css for the full explanation). The old
     unconditional `direction:rtl!important` here mirrored .ft-grid/
     .ft-in/.ft-bot for English visitors too; removed rather than patched
     further. */
  .ft-grid>div:first-child{text-align:center!important;}
  .ft-logo-mark{height:60px!important;max-width:220px!important;}
  .ft-logo-en{font-size:10px!important;}.ft-desc{font-size:1rem!important;}.ft-col h4{font-size:1rem!important;}.ft-col ul li a{font-size:.98rem!important;}.ft-copy{font-size:.84rem!important;}
  body.ar .pi{font-size:.82rem!important;font-family:'IBM Plex Sans Arabic','Noto Naskh Arabic',sans-serif!important;direction:rtl!important;unicode-bidi:isolate!important;}
  body.ar .pi::after{content:none!important;}
  html.admin-route #adminPortal{min-height:100dvh!important;}
  #adminLogin{padding:1rem!important;}
  #adminLogin > div{width:min(100%,380px)!important;padding:1.8rem 1.25rem!important;}
  .admin-login-logo{width:min(230px,88%)!important;max-height:66px!important;}
}


/* Mobile header: single authoritative implementation is "FINAL V10" below.
   (Two earlier competing implementations, "V7" and "V8", were removed here
   during consolidation — they were always overridden by V10.) */

/* Dark-theme reviews remain visibly dark even where older mobile rules use --surf. */
[data-theme="dark"] .test-sec .tc{background:#211A15!important;color:#F7F3EC!important;border-color:#40352D!important;}
[data-theme="dark"] .test-sec .t-text{color:#E6DED5!important;}
[data-theme="dark"] .test-sec .t-nm{color:#FFF8EE!important;}
[data-theme="dark"] .test-sec .t-lc{color:#BEB2A6!important;}

/* Product selection dark-theme state consolidated into main.css (single
   authoritative implementation for .spill.on/.vchip.on). */
@media(max-width:640px){
  .spill{min-height:30px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
  .vchip{min-height:38px!important;}
}


/* Two real footer link columns exist in the current markup. Never hide the
   second column because an old 4-column footer used nth-of-type selectors. */
@media(max-width:640px){
  footer .ft-grid>.ft-col{display:block!important;min-width:0!important;}
  footer .ft-grid>.ft-col:nth-of-type(n+3){display:block!important;}
  footer .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}
}

/* Final dark review surface, independent of inherited theme variables. */
[data-theme="dark"] .test-sec{background:#17130F!important;color:#F7F3EC!important;}
[data-theme="dark"] .test-sec .tc{background:#211A15!important;color:#F7F3EC!important;border:1px solid #40352D!important;}
[data-theme="dark"] .test-sec .t-text{color:#E6DED5!important;}
[data-theme="dark"] .test-sec .t-nm{color:#FFF8EE!important;}
[data-theme="dark"] .test-sec .t-lc{color:#BEB2A6!important;}

/* Announcement bar: single authoritative implementation lives in main.css
   (see main.css "SINGLE authoritative implementation" comment). Do not add
   another competing .ann/.ann-track/.ann-seg block here. */

/* Product-card photography: show the complete supplied image inside the 4:5 frame. */
.pc-img .img-a,.pc-img .img-b{
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  visibility:visible!important;
}
.pc-img .img-b{opacity:0!important;}
.pc:hover .img-a{opacity:0!important;}
.pc:hover .img-b{opacity:1!important;}

/* Mobile Hero: compact 3:2 presentation using the approved mobile asset. */
@media(max-width:640px){
  .hero-img{
    width:100%!important;
    aspect-ratio:3 / 2!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  #hs0 .hbg{
    background-image:var(--hero-image-mobile,var(--hero-image-desktop,none))!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }

  /* Compact trust strip: preserve all four benefits without turning them
     into a tall secondary section. */
  .trust-in{
    grid-template-columns:1fr 1fr!important;
  }
  .ti{
    min-height:64px!important;
    padding:7px 8px!important;
    flex-direction:row!important;
    gap:7px!important;
    font-size:12px!important;
    line-height:1.25!important;
  }
  .ti svg{
    width:19px!important;
    height:19px!important;
  }
}


/* FINAL V10 — single authoritative mobile header implementation (the
   competing "V7"/"V8" grid/absolute layouts, and main.css's own dead
   @media(max-width:900px) header attempt, were removed during
   consolidation; this is the only remaining implementation). These rules
   deliberately come last in the stylesheet load order so nothing after
   them can re-center the logo or re-enable an old layout. */
@media (max-width:900px){
  /* Storefront header: logo is physically right; controls are physically left. */
  #mainHdr .hdr{
    display:flex!important;
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 10px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    direction:ltr!important;
    overflow:visible!important;
  }
  #mainHdr .logo{
    position:absolute!important;
    left:auto!important;
    right:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:clamp(96px,30vw,122px)!important;
    max-width:122px!important;
    margin:0!important;
    z-index:25!important;
    direction:ltr!important;
  }
  #mainHdr .logo-mark{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:50px!important;object-fit:contain!important;}
  #mainHdr #deskNav{display:none!important;}
  #mainHdr .hdr-r{
    position:absolute!important;
    left:10px!important;
    right:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    flex-direction:row!important;
    direction:ltr!important;
    align-items:center!important;
    gap:6px!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(50% - 16px)!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    z-index:30!important;
    overflow:visible!important;
  }
  #mainHdr .hdr-r [data-mobile-control="menu"]{order:1!important;}
  #mainHdr .hdr-r [data-mobile-control="cart"]{order:2!important;}
  #mainHdr .hdr-r [data-mobile-control="theme"]{order:3!important;}
  #mainHdr .hdr-r .lang-sw{order:4!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;direction:ltr!important;visibility:visible!important;opacity:1!important;}
  #mainHdr .hdr-r > .ibtn{display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;flex:0 0 30px!important;padding:0!important;margin:0!important;visibility:visible!important;opacity:1!important;color:var(--tx2)!important;}
  /* WhatsApp icon: root cause of "not green on mobile" — this file's own
     generic `.hdr-r > .ibtn{color:var(--tx2)!important}` rule immediately
     above shares its exact selector specificity with the base
     `.ibtn[data-control="whatsapp"]{color:#25D366}` rule in main.css, so
     at ≤900px the generic later-loaded rule always won the color, no
     matter what value the base rule had. (A `[data-control="whatsapp"]
     {display:none!important}` line used to sit here too, meant to hide
     the icon below 900px, but it tied on specificity with the .ibtn
     display:flex rule right after it and lost every time — so the icon
     was already being shown, just in the wrong color. Removed that dead
     rule rather than leave a hide-intent that never actually fired next
     to the fix, and kept the icon visible + green to match.) One rule,
     scoped to the WhatsApp icon only via its existing data-control
     attribute, with higher specificity (adds the attribute selector on
     top of the same ID+2-classes) so it wins on its own merits rather
     than by cascade order — every other .ibtn property (size, padding,
     position) still comes from the shared rule above. */
  #mainHdr .hdr-r > .ibtn[data-control="whatsapp"]{color:#25D366!important;}
  #mainHdr .hdr-r > .ibtn svg{display:block!important;width:20px!important;height:20px!important;}
  #mainHdr .hdr-r .burger{display:flex!important;visibility:visible!important;opacity:1!important;}
  #mainHdr .hdr-r .ic-badge{display:flex!important;visibility:visible!important;opacity:1!important;}
  #mainHdr .lbtn{display:flex!important;align-items:center!important;justify-content:center!important;min-width:21px!important;min-height:25px!important;font-size:10px!important;line-height:1!important;padding:.12rem .28rem!important;visibility:visible!important;opacity:1!important;}
  #mainHdr .mob-nav{display:none;width:100%!important;direction:rtl!important;position:relative!important;z-index:40!important;}
  #mainHdr .mob-nav.open{display:flex!important;}
}
@media (max-width:420px){
  #mainHdr .hdr{height:72px!important;min-height:72px!important;padding:0 8px!important;}
  #mainHdr .logo{right:8px!important;width:clamp(88px,28vw,108px)!important;max-width:108px!important;}
  #mainHdr .hdr-r{left:8px!important;gap:5px!important;max-width:calc(50% - 12px)!important;}
  #mainHdr .hdr-r > .ibtn{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;flex-basis:28px!important;}
  #mainHdr .hdr-r > .ibtn svg{width:18px!important;height:18px!important;}
  #mainHdr .hdr-r .lang-sw{height:27px!important;min-height:27px!important;}
  #mainHdr .lbtn{min-width:19px!important;min-height:23px!important;font-size:9px!important;}
}
@media (max-width:760px){
  /* Restore the known-good mobile Admin drawer. */
  #adminPortal{height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;touch-action:pan-y!important;}
  #adminPortal .admin-topbar{min-height:60px!important;padding:.65rem .75rem!important;gap:.55rem!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;position:sticky!important;top:0!important;z-index:100!important;}
  #adminPortal .admin-mobile-menu-btn{display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:1px solid #D8CDBE!important;border-radius:8px!important;background:#FFFFFF!important;color:#2A1A14!important;font:700 24px/1 Arial,sans-serif!important;cursor:pointer!important;z-index:105!important;}
  #adminPortal .admin-brand-row{min-width:0!important;overflow:hidden!important;}
  #adminPortal .admin-top-logo{width:150px!important;max-width:42vw!important;height:auto!important;max-height:42px!important;}
  #adminPortal .admin-brand-row > div{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:.58rem!important;}
  #adminPortal .admin-top-actions{min-width:0!important;gap:.4rem!important;justify-content:flex-end!important;}
  #adminPortal .admin-top-actions #adminEmailDisplay{display:none!important;}
  #adminPortal .admin-top-actions #adminSaveStatus{max-width:94px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.68rem!important;}
  #adminPortal .admin-top-actions button[onclick="adminSignOut()"]{min-height:38px!important;padding:.35rem .55rem!important;font-size:.68rem!important;white-space:nowrap!important;}
  #adminPortal .admin-shell{display:block!important;min-height:calc(100dvh - 60px)!important;position:relative!important;}
  #adminPortal #adminSidebar{display:none!important;position:fixed!important;top:60px!important;left:0!important;bottom:0!important;width:min(82vw,300px)!important;max-width:300px!important;height:calc(100dvh - 60px)!important;padding:1rem 0!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:90!important;background:#FFFFFF!important;border:0!important;border-right:1px solid #D8CDBE!important;box-shadow:12px 0 32px rgba(42,26,20,.16)!important;}
  #adminPortal #adminSidebar.is-open{display:block!important;}
  #adminPortal #adminNav .a-nav-btn{min-height:50px!important;padding:.72rem 1rem!important;font-size:.9rem!important;gap:.7rem!important;border-inline-start-width:3px!important;color:#5E5147!important;}
  #adminPortal #adminNav .a-nav-icon{font-size:1.05rem!important;width:1.4rem!important;text-align:center!important;}
  #adminPortal #adminNav .a-nav-btn.active{color:#2A1A14!important;background:#F3EBDD!important;border-inline-start-color:#C8A56A!important;}
  #adminPortal .admin-main{width:100%!important;min-width:0!important;padding:1rem!important;overflow-x:auto!important;}
  #adminPortal #adminContent{width:100%!important;min-height:calc(100dvh - 120px)!important;scroll-margin-top:118px!important;overflow-x:auto!important;}
  #adminPortal .a-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;}
  #adminPortal .a-tab{flex:0 0 auto!important;min-height:40px!important;}
}
@media (min-width:761px){#adminPortal .admin-mobile-menu-btn{display:none!important;}}

/* Dark reviews: explicit surface/text colors, independent from earlier
   --surf and .test-sec overrides. */
html[data-theme="dark"] .test-sec{background:#17130F!important;color:#F7F3EC!important;}
html[data-theme="dark"] .test-sec .tc{background:#211A15!important;color:#F7F3EC!important;border:1px solid #40352D!important;box-shadow:none!important;}
html[data-theme="dark"] .test-sec .t-text{color:#E6DED5!important;}
html[data-theme="dark"] .test-sec .t-nm{color:#FFF8EE!important;}
html[data-theme="dark"] .test-sec .t-lc{color:#BEB2A6!important;}
html[data-theme="dark"] .test-sec .t-stars{color:#C8A56A!important;}


/* FINAL — footer English logo (announcement marquee consolidated into main.css). */
@media(max-width:760px){
  #footerLogo[src*="logo-english-white"],#footerLogo[data-active-logo="enSrc"]{filter:none!important;opacity:1!important;visibility:visible!important;}
}
@media(prefers-reduced-motion:reduce){
  #footerLogo[src*="logo-english-white"],#footerLogo[data-active-logo="enSrc"]{filter:none!important;opacity:1!important;visibility:visible!important;}
}


/* FINAL v13 — compact mobile trust strip only; preserve desktop unchanged. */
@media(max-width:640px){
  .trust{width:100%!important;}
  .trust-in{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
    gap:0!important;
  }
  .trust-in .ti{
    min-height:54px!important;
    padding:5px 8px!important;
    gap:6px!important;
    justify-content:center!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    letter-spacing:0!important;
  }
  body.ar .trust-in .ti{font-size:11px!important;}
  .trust-in .ti svg{width:17px!important;height:17px!important;}
}