/* =====================================================================
   ai-sns.io — mobile / responsive layer (loads LAST, after modern3d.css
   and commerce.css). Layout only: keeps the dark neon glass look.
   Breakpoints: 1024 (tablet), 860 (small tablet), 640 (phone), 400 / 340
   (narrow phones). LTR + RTL (/ar).
   Phone rules are prefixed with `html` because the homepage keeps its theme
   in an inline <style> inside <body>, which would otherwise win ties.
   ===================================================================== */

/* ---------- global: no sideways scroll, no clipped long words ---------- */
html,body{overflow-x:clip;max-width:100%}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
img,video,canvas,iframe{max-width:100%}
h1,h2,h3,h4,.section__title,.hero__title,.pdp__info h1,.c-hero h1,.acct-title,.modal__title{
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
p,li,dd,td,.rte{overflow-wrap:break-word}
/* CJK / Thai: wrap long runs instead of overflowing, never hyphenate */
:lang(ja) :is(h1,h2,h3,h4),:lang(zh) :is(h1,h2,h3,h4),:lang(ko) :is(h1,h2,h3,h4){
  line-break:strict;overflow-wrap:anywhere;hyphens:none}
:lang(th) :is(h1,h2,h3,h4,p,li){overflow-wrap:anywhere;hyphens:none}
.rte table,.shopify-policy__body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rte pre,.rte code{white-space:pre-wrap;overflow-wrap:anywhere}

/* the 1200px pointer spotlight only makes sense with a mouse; it also
   widened the mobile layout viewport to ~660px on inner pages */
@media (max-width:1024px),(hover:none){html .m3d-spot{display:none}}

/* modern3d.css gives .drawer position:relative (glass card rule), which drops
   the cart drawer into the page flow at the bottom; put it back on top */
html .drawer{position:fixed;top:0;bottom:0;right:0;border-radius:var(--m3d-radius,22px) 0 0 var(--m3d-radius,22px) !important}
html .modal__panel{position:relative}

/* homepage hero sits under the header (pulled up 72px) and is bottom-aligned:
   when its copy is taller than the screen (tablet portrait, phones, landscape)
   the headline ran up under the header. Reserve the header height. */
html .hero{padding-top:160px}

/* desktop header between 1101 and 1320px: links collided with Log in
   (worse in German / French) */
@media (min-width:1101px) and (max-width:1320px){
  html .site-header .nav__links{gap:clamp(14px,2vw,26px)}
  html .site-header .nav__right{gap:10px}
  html .site-header .sound__label{display:none}
}

/* ---------- tablet ---------- */
/* forms: >=16px stops iOS / iPadOS zoom-on-focus (theme uses 13-15px) */
html .qty input{font-size:16px}
@media (max-width:1024px),(pointer:coarse){
  :root body :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
}
/* touch screens of any width: 44px targets for the small pill / list links */
@media (pointer:coarse){
  html .m3d-family__links a{min-height:44px;display:inline-flex;align-items:center}
  html .footer__col a{min-height:44px;display:flex;align-items:center;margin-block:0}
  html .icon-btn,html .add-btn,html .drawer__close,html .modal__close{min-width:44px;min-height:44px}
  html .lang__btn,html .nav__right .acct,html .nav__right .acct-link,html .cart-btn,html .sound{min-height:44px}
  html .lang__menu li{min-height:44px;display:flex;align-items:center}
  html .m3d-try,html .linkarrow{min-height:44px;display:inline-flex;align-items:center}
  html .c-qty [data-q]{width:44px;height:44px}
}
/* the homepage keeps its desktop nav down to 680px and inner pages to 860px:
   links + sound + language + log in + cart overflow 768px and collide at
   1024px (German). Collapse to the menu button at 1100px everywhere. */
@media (max-width:1100px){
  html .scroll-cue{display:none}
  html .site-header .nav__links,html .site-header .sound{display:none}
  html .site-header .nav__toggle{display:flex}
  html .mobile-menu{display:flex}
}
@media (max-width:1024px){
  html .pdp{gap:clamp(24px,4vw,44px)}
}
@media (max-width:860px){
  html .pdp{grid-template-columns:minmax(0,1fr)}
  html .pdp__media{max-width:560px;width:100%;margin-inline:auto}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  :root{--gutter:16px}
  html body{font-size:16px}

  /* header: one row down to 320px, 44px targets */
  html .nav{height:64px;gap:8px}
  html .nav__right{gap:6px;flex:none;min-width:0}
  html .brand{flex:none;min-height:44px;align-items:center}
  html .site-header .brand__logo{height:40px !important}
  html .nav__right .acct,html .nav__right .acct-link{display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:0 10px;white-space:nowrap;font-size:11px;letter-spacing:.08em}
  html .lang__btn{min-height:44px;min-width:44px;justify-content:center;padding:0 8px}
  html .lang__chev{display:none}
  html .cart-btn{min-height:44px;min-width:44px;justify-content:center;padding:0 12px;white-space:nowrap;
    border:1px solid var(--line);border-radius:999px}
  html .nav__toggle{width:44px;height:44px;flex:none}
  html .lang__menu{max-height:min(70vh,460px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  html .lang__menu li{min-height:44px;display:flex;align-items:center}

  /* mobile menu: comfortable rows, safe areas */
  html .mobile-menu{padding:88px max(var(--gutter),env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}
  html .mobile-menu a{font-size:clamp(1.6rem,8vw,2.4rem);min-height:48px;display:flex;align-items:center;overflow-wrap:anywhere}

  /* hero: never slides under the fixed header, headline sized for phones */
  html .hero{padding-top:148px}
  html .hero__title{font-size:clamp(34px,10.5vw,46px);max-width:none}
  html .hero__for{font-size:clamp(18px,5.4vw,22px)}
  html .hero__row{gap:22px;margin-top:28px}
  html .hero__actions{width:100%}
  html .hero__actions .btn{flex:1 1 auto;justify-content:center}
  html .scroll-cue{display:none}

  html .section{padding-block:clamp(56px,10vh,96px)}
  html .section__title{font-size:clamp(1.9rem,8.4vw,2.6rem);line-height:1.08}
  html .page-hero h1,html .c-hero h1{font-size:clamp(1.9rem,9vw,2.6rem);line-height:1.08}

  /* buttons and link targets: 44px */
  html .btn{min-height:48px;max-width:100%}
  html .linkarrow{min-height:44px;display:inline-flex;align-items:center}
  html .icon-btn,html .add-btn{min-width:44px;min-height:44px}
  html .m3d-try{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  html .crumbs a{display:inline-block;padding:10px 6px;margin-inline:-6px}
  html .site-header .brand{min-width:44px}
  html .m3d-family__links{gap:8px}
  html .m3d-family__links a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;padding:0 16px}
  html .m3d-family__h{font-size:12px}

  /* small mono labels: readable floor */
  html .product-card__tag,html .per,html .acct-form label,html .c-trust,html .c-steps li,html .c-acct__tag,
  html .cta__note,html .hud-label,html .hud-trend,html .hud-core-read,html .hud-strip{font-size:12px}
  html .hud-log-win li,html .hud-status li{font-size:12.5px}
  html .price .per,html .trustbar p{font-size:12.5px}
  html .hud-chart-x span{font-size:10px}
  html .hud-grid > *,html .hud-row2 > *,html .hud-col > *{min-width:0}
  html .hud-label{overflow-wrap:anywhere}
  html .product-card__title a{display:inline-block;padding-block:10px;margin-block:-10px}
  html .c-fine{font-size:13px}

  /* product cards */
  html .products-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  html .product-card__foot{flex-wrap:wrap;gap:10px}

  /* product page: qty + Add to cart on one row, secondary CTA full width below */
  html .pdp{padding-top:88px;gap:24px}
  html .pdp__info h1{font-size:clamp(1.9rem,9vw,2.6rem);line-height:1.05}
  html .pdp__buy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:stretch}
  html .pdp__buy .qty{min-height:48px}
  html .pdp__buy .qty button{width:44px;height:48px}
  html .pdp__buy .qty input{width:40px;height:48px}
  html .pdp__buy > .btn,html .pdp__buy > a{justify-content:center;min-width:0}
  html .pdp__buy > :not(.qty):not(#pdp-add){grid-column:1 / -1}
  html .pdp__buy .m3d-chatapp{white-space:normal;text-align:center}


  /* cart / checkout */
  html .c-card{padding:18px}
  html .cart-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:start}
  html .cart-line .cart-line__media{width:56px;height:56px}
  html .cart-line > .price{white-space:nowrap;text-align:end}
  html .c-qty{flex-wrap:wrap;row-gap:4px}
  html .cart-line__rm{min-height:44px;font-size:12px;padding-inline:4px}
  html .c-qty [data-q]{width:44px;height:44px;font-size:18px}
  html .c-qty .cart-line__rm{min-height:44px;display:inline-flex;align-items:center}
  html .c-steps{flex-wrap:wrap;gap:8px}
  html .c-steps li{padding:8px 12px}
  html .c-row--total b{font-size:1.3rem}
  html .c-sum .btn,html .c-pay{min-height:52px}
  html .c-up{grid-template-columns:minmax(0,1fr)}
  html .c-upcard__act a{min-height:44px;display:inline-flex;align-items:center}
  html .c-fine a,html .c-row a{display:inline-block;padding-block:8px}

  /* search: input grows, button wraps under it when needed */
  html .c-search{flex-wrap:wrap}
  html .c-search input{flex:1 1 200px;min-width:0}
  html .c-search .btn{flex:1 0 auto;justify-content:center}
  html .c-hit{padding:14px 16px}

  /* account */
  html .c-accts{grid-template-columns:minmax(0,1fr)}
  html .acct-wrap{padding-inline:var(--gutter)}
  html .acct-head-row .btn{white-space:normal}
  html .acct-links a{min-height:44px;display:inline-flex;align-items:center}

  /* footer: two link columns, 44px rows */
  html .footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px}
  html .footer__brand{grid-column:1 / -1}
  html .footer__col a{display:flex;align-items:center;min-height:44px;padding:0;margin:0;overflow-wrap:anywhere}
  html .footer__col h4{margin-bottom:6px}
  html .footer__bottom{flex-direction:column;align-items:flex-start;gap:10px;font-size:12.5px}
  html .footer__bottom .addr{line-height:1.6}

  /* cart drawer: full-width sheet, safe areas, scrolls internally */
  html .drawer,html[dir] .drawer{width:100%;max-width:100%;border-radius:0 !important;border-inline:0 !important;height:100%;height:100dvh}
  html .drawer__head{padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left))}
  html .drawer__items{padding-inline:16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html .drawer__foot{padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  html .drawer__close,html .modal__close{width:44px;height:44px}

  /* quick-view modal: bottom sheet, scrollable */
  html .modal{padding:0;place-items:end stretch}
  html .modal__panel{width:100%;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
    grid-template-columns:minmax(0,1fr);border-radius:22px 22px 0 0 !important;border-bottom:0 !important}
  html .modal__media{height:auto;aspect-ratio:16/10}
  html .modal__body{padding:20px 18px max(20px,env(safe-area-inset-bottom))}
  html .modal__title{font-size:1.4rem}

  /* toast clear of the home indicator */
  html .c-toast{bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));max-width:calc(100vw - 32px);text-align:center}

  /* policy / text pages */
  html .section .rte,html .shopify-policy__container{padding:22px 18px !important}
  html .shopify-policy__container{margin-top:88px !important}

  [dir=rtl] .footer__bottom{align-items:flex-start}
}

/* ---------- narrow phones: icon-only Log in + Cart so the header fits 320px ---------- */
@media (max-width:400px){
  html .nav__right{gap:4px}
  html .nav__right .acct,html .nav__right .acct-link,html .nav__right .cart-btn{
    font-size:0;letter-spacing:0;width:44px;min-width:44px;padding:0;gap:0;position:relative;border-radius:999px}
  html .nav__right .acct::before,html .nav__right .acct-link::before,html .nav__right .cart-btn::before{
    content:"";width:20px;height:20px;flex:none;background:currentColor;
    -webkit-mask:var(--m-ico) center/contain no-repeat;mask:var(--m-ico) center/contain no-repeat}
  html .nav__right .acct,html .nav__right .acct-link{
    --m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E")}
  html .nav__right .cart-btn{
    --m-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12H6.2z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")}
  html .nav__right .cart-btn .count{position:absolute;top:-3px;inset-inline-end:-3px;font-size:10px;min-width:17px;height:17px;padding:0 4px;
    border-radius:999px;display:inline-grid;place-items:center;background:var(--accent,#1fe3ff);color:var(--accent-ink,#05121a);line-height:1}
  html .lang__btn{padding:0;width:44px}
  html .hud-row2{grid-template-columns:minmax(0,1fr)}
  html .site-header .brand__logo{height:36px !important}
  html .pdp__buy{grid-template-columns:minmax(0,1fr)}
  html .pdp__buy .qty{justify-self:start}
}
@media (max-width:340px){
  :root{--gutter:12px}
  html .hero__title{font-size:32px}
}

/* ---------- RTL (/ar) ---------- */
[dir=rtl] .mobile-menu a .idx{margin-right:0;margin-left:10px}
[dir=rtl] .pdp__desc li{padding:7px 22px 7px 0}
[dir=rtl] .pdp__desc li::before{left:auto;right:0;content:"\2190"}
[dir=rtl] .c-next ol{padding-left:0;padding-right:1.2em}
[dir=rtl] .linkarrow svg,[dir=rtl] .btn svg{transform:scaleX(-1)}
[dir=rtl] .c-hit:hover{transform:translate3d(-4px,0,0)}
[dir=rtl] .drawer{right:auto;left:0;border-left:0;border-right:1px solid var(--line);transform:translate(-100%)}
[dir=rtl] .drawer.is-open{transform:none}
[dir=rtl] .drawer{border-radius:0 var(--m3d-radius,22px) var(--m3d-radius,22px) 0 !important}
[dir=rtl] .modal__close{right:auto;left:14px}