/* ============================================================
   Modern System — Mobile responsive fixes (loaded after styles.css)
   Target: 360–430px phones (Samsung S21 FE etc.)
   ============================================================ */

/* ---------- Global safety ---------- */
html,body{max-width:100%;overflow-x:hidden}
img,video{max-width:100%}
.container{min-width:0}

/* ---------- Header: compact 2-row layout ---------- */
@media(max-width:900px){
  .topline .container{height:auto;min-height:30px;padding:5px 0;gap:8px;font-size:9px;line-height:1.7}
  .topline .container span:last-child{white-space:nowrap}
  .site-header .nav{display:grid!important;grid-template-columns:1fr auto auto auto;grid-template-areas:"brand cart menu theme" "search search search search";align-items:center;gap:8px 6px;min-height:0;padding:8px 0}
  .site-header .brand.brand-unified{grid-area:brand;justify-self:start;width:134px;height:38px;margin:0}
  .site-header .cart-button{grid-area:cart;padding:7px 9px;font-size:10px}
  .site-header .cart-button span{display:none}
  .site-header .mobile-menu-trigger{grid-area:menu;width:38px;height:38px}
  .site-header .theme-toggle,.site-header [data-theme-toggle],.site-header .nav-actions>button:not(.mobile-menu-trigger){grid-area:theme}
  .site-header .nav-actions{display:contents}
  .site-header .nav-actions .btn,.site-header .header-account-link,.site-header .header-logout-link{display:none!important}
  .site-header .header-notification{grid-area:theme;justify-self:end}
  .site-header .search-wrap{grid-area:search;order:0;flex:none;width:100%;margin:0}
  .site-header .shop-search input{height:38px;font-size:12px}
  .site-header .shop-search button{width:40px}
}
@media(max-width:400px){
  .site-header .brand.brand-unified{width:122px;height:34px}
}

/* ---------- Home hero slider (the card after header) ---------- */
@media(max-width:850px){
  .home-page .front-showcase-slider{padding:12px 0 0}
  .front-showcase-frame{border-radius:16px}
  .front-showcase-slider .hero-slide:not([hidden]){display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;min-height:0!important}
  .front-showcase-slider .slide-copy{grid-row:1!important;min-height:0!important;padding:20px 18px 16px!important;align-items:flex-start!important}
  .front-showcase-slider .slide-copy span{font-size:10px;padding:5px 9px}
  .front-showcase-slider .slide-copy h1,.front-showcase-slider .slide-copy h1.hero-title-long{width:100%!important;max-width:none!important;margin:10px 0 6px!important;font-size:clamp(17px,5.6vw,22px)!important;line-height:1.5!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word;direction:rtl;unicode-bidi:plaintext;text-align:right!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important}
  .front-showcase-slider .slide-copy p{font-size:12px!important;line-height:1.9!important;margin:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .front-showcase-slider .slide-copy .btn-primary{min-height:40px;margin-top:14px;padding:0 18px;font-size:12px}
  .front-showcase-slider .slide-visual{position:relative!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-height:0!important;height:200px!important;padding:8px 16px 44px!important;background:linear-gradient(110deg,#0d6970,#0a394d)!important;overflow:hidden!important}
  .front-showcase-slider .slide-product-art{width:auto!important;max-width:88%!important;height:100%!important;max-height:150px!important;object-fit:contain!important;transform:none!important}
  .front-showcase-slider .hero-slider-controls{right:auto!important;left:50%!important;transform:translateX(-50%);bottom:10px!important}
  .front-showcase-slider .hero-slider-controls button{width:28px;height:28px;font-size:16px}
}
@media(max-width:400px){
  .front-showcase-slider .slide-copy h1,.front-showcase-slider .slide-copy h1.hero-title-long{font-size:18px!important}
  .front-showcase-slider .slide-visual{height:180px!important}
  .front-showcase-slider .slide-product-art{max-height:132px!important}
}

/* ---------- Service strip under hero ---------- */
@media(max-width:850px){
  .front-service-strip .container{grid-template-columns:1fr 1fr 1fr;gap:0}
  .front-service-strip article{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 6px;border-bottom:0;border-left:1px solid #e9eff2}
  .front-service-strip article:last-child{border-left:0}
  .front-service-strip article i{width:30px;height:30px;font-size:13px}
  .front-service-strip article b{font-size:10px;line-height:1.5}
  .front-service-strip article span{font-size:8.5px;line-height:1.5}
}

/* ---------- Categories (circles) ---------- */
@media(max-width:700px){
  .category-circles{grid-template-columns:repeat(4,1fr)!important;gap:14px 8px}
  .category-circles .category-card img{width:64px;height:64px}
  .category-circles .category-card b{font-size:9.5px}
  .category-circles .category-card span{display:none}
}
@media(max-width:380px){
  .category-circles .category-card img{width:58px;height:58px}
}

/* ---------- Stories: cards + viewer (no more full-screen overflow) ---------- */
@media(max-width:700px){
  .story-luxe-section{padding:22px 0 12px}
  .story-luxe-head h2{font-size:18px}
  .story-luxe-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .story-luxe-row::-webkit-scrollbar{display:none}
  .story-luxe-card{flex:0 0 74px}
  .story-ring{width:68px;height:68px;border-radius:50%;padding:3px}
  .story-ring img,.story-ring video{border-radius:50%}
  .story-luxe-card b{font-size:9px;margin-top:6px}
}
/* Viewer: fit inside the viewport with room for the bottom nav */
@media(max-width:600px){
  .story-modal{z-index:1200;align-items:center;justify-content:center}
  .story-modal.is-open{display:flex}
  .story-viewer{width:min(100vw - 20px,420px)!important;height:min(calc(100dvh - 24px),calc(100vh - 24px))!important;max-height:calc(100svh - 24px);aspect-ratio:auto;border-radius:18px;margin:0;animation:none!important}
  .story-viewer>img,.story-viewer>video{width:100%;height:100%;object-fit:contain;background:#050d16}
  .story-viewer-copy{padding:40px 16px calc(18px + env(safe-area-inset-bottom))}
  .story-viewer-copy h3{font-size:16px;margin:5px 0 10px}
  .story-viewer-copy .btn-primary{min-height:40px;font-size:12px}
  .story-viewer .story-progress{top:10px;right:12px;left:56px}
  .story-viewer .story-close{top:8px;left:10px;width:34px;height:34px;font-size:22px}
  .story-nav{width:38px;height:38px;font-size:22px}
  /* hide the bottom nav while the viewer is open */
  html.story-open .mobile-bottom-nav{display:none!important}
  html.story-open,html.story-open body{overflow:hidden}
}

/* ---------- Product cards & grids ---------- */
@media(max-width:560px){
  .products-grid,.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .product-card{min-width:0}
  .product-card h3{font-size:11px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .product-card p{display:none}
  .product-card .price-row{flex-wrap:wrap;gap:6px}
  .product-card .price-row strong{font-size:11px}
  .product-card .price-row del{font-size:9px}
  .product-card .price-row button,.product-card .price-row .btn{padding:6px 10px;font-size:10px;min-height:34px}
  .flash-shell{flex-direction:column}
  .flash-side{width:auto;flex-direction:row;align-items:center;gap:10px;padding:12px 14px}
  .flash-side a{margin-right:auto}
  .product-track{grid-auto-columns:minmax(0,72%)!important;grid-template-columns:none!important}
  .import-showcase{grid-template-columns:1fr}
  .import-cards{grid-template-columns:1fr 1fr}
  .import-cards a img{height:110px}
  .banner-grid{grid-template-columns:1fr;gap:12px}
  .store-banner{min-height:180px}
  .store-banner h2{font-size:17px}
  .promo{grid-template-columns:1fr}
  .promo-image{order:-1}
  .promo h2{font-size:20px}
  .journal-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr;gap:10px}
  .trust-card{padding:14px 10px}
  .trust-card strong{font-size:18px}
  .prefooter-card{padding:22px 18px;text-align:center}
  .prefooter-actions{flex-direction:column}
  .prefooter-actions .btn{width:100%}
  .section-head h2{font-size:19px;line-height:1.5}
  .section-head p{font-size:11px}
  .eyebrow{font-size:10px}
  .brand-item{font-size:11px;padding:8px 12px}
  .custom-landing{grid-template-columns:1fr}
  .custom-landing img{order:-1;height:160px}
}

/* ---------- Product page ---------- */
@media(max-width:700px){
  .breadcrumb{font-size:10px;flex-wrap:wrap;gap:4px}
  .product-hero,.product-layout,.product-page-grid{grid-template-columns:1fr!important}
  .product-gallery-main,.gallery-main{height:auto;max-height:280px}
  .product-gallery-main img,.gallery-main img{max-height:260px;object-fit:contain}
  .product-gallery-row .gallery-thumb{width:48px;height:48px}
  .product-title,.product-page h1{font-size:18px;line-height:1.6}
  .product-price-box,.product-buy-box{position:static;width:auto}
  .spec-grid,.product-spec-grid{grid-template-columns:1fr!important}
  .spec-table td,.spec-table th{font-size:11px;padding:8px}
}

/* ---------- Forms, cart, checkout, auth ---------- */
@media(max-width:560px){
  .auth{padding:0}
  .auth-card{padding:20px 16px;border-radius:14px}
  .form-grid,.checkout-grid,.cart-layout{grid-template-columns:1fr!important}
  .cart-summary{position:static}
  .input,select,textarea{font-size:13px!important}
  .table{font-size:10px}
  .table th,.table td{padding:8px 6px;white-space:nowrap}
}

/* ---------- Footer ---------- */
@media(max-width:560px){
  .footer{padding:26px 0 24px}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:18px 12px}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer h4{font-size:12px}
  .footer a,.footer p{font-size:10px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;font-size:9px}
  body{padding-bottom:88px}
}

/* ---------- Bottom navigation ---------- */
@media(max-width:900px){
  .mobile-bottom-nav{height:58px;border-radius:16px}
  .mobile-bottom-nav a,.mobile-bottom-nav button{font-size:9px}
}

/* ---------- Admin panel on phones ---------- */
@media(max-width:950px){
  .admin-shell{display:block}
  .admin-side{position:static!important;height:auto!important;max-height:none!important;overflow:visible;padding:0}
  .admin-mobile-nav-head{position:sticky;top:0;z-index:20;background:#10223e;cursor:pointer}
  .admin-mobile-nav-head span{display:inline-flex;align-items:center;gap:6px}
  .admin-mobile-nav-head span:after{content:"▾";font-size:12px;transition:transform .2s}
  .admin-side.is-collapsed .admin-mobile-nav-head span:after{transform:rotate(-90deg)}
  .admin-side.is-collapsed .admin-navigation-scroll{display:none}
  .admin-navigation-scroll{padding:8px 10px 10px}
  .admin-menu{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .admin-menu li{min-width:0}
  .admin-menu a{justify-content:flex-start;min-height:36px;padding:7px 10px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .admin-menu a span{overflow:hidden;text-overflow:ellipsis}
  .admin-top{flex-wrap:wrap;gap:8px;min-height:0;padding:10px 14px}
  .admin-top b{font-size:13px}
  .tehran-dashboard-clock{font-size:10px}
  .admin-content{padding:14px 12px}
  .toolbar{flex-wrap:wrap;gap:8px;align-items:center}
  .toolbar h1{font-size:17px;margin:0}
  .toolbar p{font-size:11px;margin:4px 0 0}
  .admin-card{padding:14px 12px;border-radius:12px}
  .admin-card h2{font-size:14px}
  .admin-grid,.admin-stats{grid-template-columns:1fr 1fr}
  .admin-order-status-summary{grid-template-columns:1fr}
  .product-form-grid,.form-grid{grid-template-columns:1fr!important}
  .field label{font-size:11px}
  .product-manager-list-head{flex-direction:column;align-items:stretch;gap:10px}
  .product-manager-search>div{flex-wrap:wrap}
  .product-manager-search .input{flex:1 1 100%;min-width:0}
  .product-manager-search .btn{flex:1 1 auto}
  .table{font-size:10px}
  .mini-product img{width:34px;height:34px}
}
@media(max-width:560px){
  .admin-stats{grid-template-columns:1fr 1fr}
  .admin-grid{grid-template-columns:1fr}
  .admin-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Admin: Google search helper next to product search ---------- */
.product-manager-search .btn-google{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;color:#1f3b52;border:1px solid #dbe6ec;border-radius:10px;background:#fff;font-size:11px;font-weight:800;white-space:nowrap;text-decoration:none;cursor:pointer}
.product-manager-search .btn-google:hover{border-color:#19a18f;color:#0f766e}
.product-manager-search .btn-google svg{width:16px;height:16px}
.dark .product-manager-search .btn-google{color:#e5f3f6;border-color:#2c5563;background:#123a47}

/* admin: hide duplicate desktop brand/user block on phones */
@media(max-width:950px){
  .admin-side .admin-side-brand,.admin-side .admin-user{display:none!important}
  .admin-top{display:flex;align-items:center;justify-content:space-between}
  .admin-top .btn,.admin-top a{font-size:11px}
}

/* ---------- FIX: hero dots inflated by the touch-target rule ---------- */
@media(pointer:coarse){
  .hero-slider-controls [data-hero-dots] button{min-width:0!important;min-height:0!important;width:8px;height:8px;padding:0}
  .hero-slider-controls [data-hero-dots] button.active{width:20px}
  .hero-slider-controls>button{min-width:30px;min-height:30px}
}
@media(max-width:850px){
  .front-showcase-slider .hero-slider-controls{left:50%!important;right:auto!important;transform:translateX(-50%);bottom:10px!important;gap:8px;padding:5px 9px;border-radius:99px;background:rgba(4,20,30,.42);backdrop-filter:blur(6px)}
  .front-showcase-slider .hero-slider-controls [data-hero-dots]{gap:5px}
  .front-showcase-slider .hero-slider-controls [data-hero-dots] button{width:7px;height:7px;min-width:0!important;min-height:0!important;padding:0;border-radius:99px}
  .front-showcase-slider .hero-slider-controls [data-hero-dots] button.active{width:18px}
}

/* ---------- FIX: "پیشنهادهای ویژه" → one full card per swipe on phones ---------- */
@media(max-width:700px){
  .home-feature-section .flash-shell{display:block;overflow:hidden}
  .home-feature-section .flash-side{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:16px 16px 10px}
  .home-feature-section .flash-side strong{flex:1 1 100%;margin:0;font-size:18px}
  .home-feature-section .flash-side small{font-size:10px}
  .home-feature-section .flash-side a{margin:0 auto 0 0;padding:6px 12px}
  .home-feature-section .flash-products{padding:0 12px 14px}
  .home-feature-section .flash-track,.product-track.flash-track{display:flex!important;grid-template-columns:none!important;grid-auto-columns:auto!important;gap:12px;overflow-x:auto!important;overflow-y:hidden;padding:2px 2px 6px;scroll-snap-type:x mandatory;scroll-padding:0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y}
  .home-feature-section .flash-track::-webkit-scrollbar{display:none}
  .home-feature-section .flash-track .product-card{flex:0 0 100%;width:100%;min-width:0;max-width:none;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;border-radius:14px}
  .home-feature-section .flash-track .product-image{height:190px}
  .home-feature-section .flash-track .product-info{padding:12px 14px}
  .home-feature-section .flash-track .product-info h3{font-size:13px;-webkit-line-clamp:2}
  .home-feature-section .flash-track .product-info p{display:block;font-size:10px;color:#6a7f90;-webkit-line-clamp:1}
  .home-feature-section .flash-track .price-row strong{font-size:13px}
  .home-feature-section .flash-track .price-row button{padding:8px 16px;font-size:11px}
  .home-feature-section .slider-controls{display:flex;justify-content:center;gap:8px;margin-top:8px}
  .home-feature-section .slider-controls button{width:34px;height:34px;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.14);font-size:18px}
  /* dots under the flash slider */
  .flash-dots{display:flex;justify-content:center;gap:5px;margin-top:8px}
  .flash-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.4);transition:width .2s}
  .flash-dots i.active{width:16px;background:#fff}
}

/* ---------- FIX: white gap above footer ---------- */
main,.home-main{flex:1 0 auto}
.footer,.site-footer{margin-top:0!important}
.home-main>*:last-child,.home-main>section:last-of-type{margin-bottom:0}
@media(max-width:900px){
  body{padding-bottom:0!important}
  .footer,.site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
}

/* ---------- FIX: brand marquee — seamless infinite loop, no reset jump ---------- */
.brand-marquee{direction:ltr;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.brand-track{display:flex!important;align-items:center;gap:0!important;width:max-content;will-change:transform;animation:brandFlowPx var(--brand-speed,22s) linear infinite!important}
.brand-set{display:flex;flex:0 0 auto;align-items:center;gap:12px;padding-right:12px;padding-left:0}
.brand-item{font-family:ModernVazirmatn,"Segoe UI",Arial,sans-serif!important;font-weight:700!important;letter-spacing:.2px;white-space:nowrap}
@keyframes brandFlowPx{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--brand-shift,50%)),0,0)}}
.brand-marquee:hover .brand-track,.brand-marquee:focus-within .brand-track{animation-play-state:paused!important}
@media(max-width:600px){.brand-set{gap:8px;padding-right:8px}.brand-item{min-width:112px;height:46px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none!important}}
@media(max-width:700px){
  .home-feature-section .flash-track .product-card{color:#1d3854}
  .home-feature-section .flash-track .product-info h3{display:-webkit-box!important;-webkit-box-orient:vertical;color:#17324d!important;line-height:1.7}
  .home-feature-section .flash-track .product-info small{color:#0f766e}
}
.brand-section{overflow:hidden}
@media(max-width:700px){
  .home-brand-section{padding:26px 0 22px}
  .home-brand-section .section-head{margin-bottom:14px}
  .home-brand-section .section-head h2{font-size:17px}
  .brand-item{min-width:104px;height:44px;font-size:11px}
}