/* فونت ایران‌سنس: فایل‌های دارای مجوز را در پوشه fonts قرار دهید. */
/* فونت وزیرمتن به‌طور کامل از این قالب حذف شده است. */
@font-face {
  font-family: 'IRANSansCustom';
  src: url('fonts/IRANSansWeb_UltraLight.woff') format('woff');
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansCustom';
  src: url('fonts/IRANSansWeb_Light.woff') format('woff');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansCustom';
  src: url('fonts/IRANSansWeb.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansCustom';
  src: url('fonts/IRANSansWeb_Medium.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansCustom';
  src: url('fonts/IRANSansWeb_Bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --accent:#783b69;
  --accent-dark:#58284b;
  --ink:#202024;
  --muted:#726d73;
  --line:#eee8ec;
  --pale:#f8f4f7;
  --off:#fcfbfb;
  --shadow:0 12px 38px rgba(47,26,40,.10)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font-family:'IRANSansCustom',Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.8
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  width:100%
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid #a97f9e;
  outline-offset:3px
}
::selection {
  background:#f2ddeb
}
.container {
  max-width:1430px;
  margin:auto;
  padding-inline:clamp(16px,4.5vw,64px)
}
header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #f1edf0;
  backdrop-filter:blur(10px)
}
.header-row {
  height:84px;
  display:flex;
  align-items:center;
  gap:28px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}
.brand-icon {
  width:43px;
  height:43px;
  color:var(--accent)
}
.brand strong {
  font-size:24px;
  white-space:nowrap;
  letter-spacing:-.4px
}
.brand small {
  display:block;
  color:#666;
  font-size:11px;
  line-height:1.5
}
nav {
  display:flex;
  align-items:center;
  gap:clamp(14px,2.5vw,35px);
  margin-inline:auto
}
.nav-link {
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  background:transparent;
  border:0;
  padding:12px 0;
  position:relative
}
.nav-link:hover,.nav-link.active {
  color:var(--accent)
}
.nav-link.active::after {
  position:absolute;
  content:"";
  height:2px;
  right:0;
  left:0;
  bottom:5px;
  background:var(--accent)
}
.has-sub {
  position:relative
}
.subnav {
  position:absolute;
  right:-18px;
  top:100%;
  background:white;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  min-width:165px;
  display:none
}
.subnav button {
  background:none;
  border:0;
  width:100%;
  text-align:right;
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  white-space:nowrap
}
.subnav button:hover {
  background:var(--pale);
  color:var(--accent)
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.open .subnav {
  display:block
}
.search {
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:25px;
  padding:9px 17px;
  background:#f5f3f5;
  max-width:255px;
  min-width:150px
}
.search svg {
  flex-shrink:0
}
.search input {
  border:0;
  outline:0;
  width:100%;
  background:transparent;
  font-size:12px;
  color:var(--ink)
}
.search input::placeholder {
  color:#827d82
}
.menu-toggle {
  display:none;
  background:none;
  border:none;
  color:var(--accent);
  font-size:28px
}
.hero-shell {
  padding-top:24px
}
.hero {
  height:clamp(340px,31vw,490px);
  position:relative;
  overflow:hidden;
  border-radius:14px;
  isolation:isolate;
  background:#e8e1de
}
.hero-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:30% center;
  z-index:-2;
  transition:opacity .35s ease,transform .8s ease
}
.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(270deg,rgba(245,240,239,.96) 0%,rgba(248,243,240,.91) 29%,rgba(248,242,239,.18) 54%,transparent 78%);
  z-index:-1
}
.hero-copy {
  max-width:560px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:15px;
  padding:30px clamp(55px,7.4vw,118px)
}
.pill {
  color:var(--accent-dark);
  background:#efdce5;
  border-radius:20px;
  padding:4px 16px;
  font-size:13px;
  font-weight:700
}
.hero h1 {
  font-size:clamp(26px,3vw,46px);
  line-height:1.5;
  letter-spacing:-.5px;
  margin:0
}
.hero p {
  font-size:16px;
  color:#474349;
  margin:0
}
.primary {
  background:var(--accent);
  color:white;
  border:0;
  border-radius:12px;
  padding:10px 26px;
  font-size:14px;
  font-weight:bold;
  transition:background .2s,transform .2s
}
.primary:hover {
  background:var(--accent-dark);
  transform:translateY(-1px)
}
.arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.94);
  border:none;
  border-radius:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  font-size:28px;
  line-height:1;
  box-shadow:0 4px 14px #0001
}
.arrow:hover {
  background:white
}
.next {
  left:20px
}
.prev {
  right:20px
}
.dots {
  position:absolute;
  bottom:17px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  direction:ltr
}
.dot {
  height:10px;
  width:10px;
  background:#fff9;
  border-radius:50%;
  border:none;
  padding:0
}
.dot.active {
  background:var(--accent);
  width:12px;
  height:12px
}
.benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  background:#faf9fa;
  border-bottom:1px solid var(--line)
}
.benefit {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px 10px
}
.benefit+.benefit {
  border-right:1px solid #e8e2e5
}
.benefit svg {
  height:32px;
  width:32px;
  stroke:var(--accent);
  stroke-width:1.8;
  fill:none;
  flex:none
}
.benefit strong {
  display:block;
  font-size:14px
}
.benefit span {
  display:block;
  font-size:11px;
  color:var(--muted)
}
section {
  scroll-margin-top:100px
}
.gallery-section {
  padding-block:44px 55px
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:22px
}
.section-head h2 {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(19px,2vw,27px);
  margin:0
}
.section-head h2:before {
  content:"";
  display:inline-block;
  width:4px;
  height:28px;
  border-radius:2px;
  background:var(--accent)
}
.section-head .hint {
  color:var(--accent);
  font-size:12px
}
.grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:17px
}
.card {
  background:white;
  text-align:right;
  border:1px solid #f0ebee;
  border-radius:13px;
  overflow:hidden;
  padding:0;
  transition:transform .2s,box-shadow .2s
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow)
}
.card:focus-visible {
  outline-offset:4px
}
.card img {
  height:clamp(190px,21vw,280px);
  object-fit:cover;
  object-position:center 24%
}
.card .caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:13px 12px;
  background:#f9f3f6
}
.card strong {
  font-size:13px
}
.card small {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap
}
.card[hidden] {
  display:none
}
.empty {
  padding:25px;
  text-align:center;
  background:#fbf6fa;
  border-radius:12px;
  color:var(--muted)
}
/* بخش کارت‌های آشنایی با پارچه‌ها: مطابق نمونه تصویری تأیید شده */
.fabric-showcase {
  background:linear-gradient(180deg,#fff 0%,#fcfafb 100%);
  border-top:1px solid var(--line);
  padding-block:50px 54px
}
.fabric-intro {
  text-align:center;
  margin:0 auto 28px
}
.fabric-intro h2 {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  font-size:clamp(23px,2.7vw,35px);
  font-weight:800;
  line-height:1.5;
  margin:0 0 8px
}
.fabric-intro h2::before,.fabric-intro h2::after {
  content:"";
  width:clamp(32px,6vw,90px);
  height:2px;
  background:#9b658e;
  display:block
}
.fabric-intro p {margin:0;color:#514a50;font-size:14px}
.fabric-cards {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px
}
.fabric-card {
  position:relative;
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:20px;
  background:#f4f0f1;
  color:var(--ink);
  text-align:center;
  box-shadow:0 7px 18px #40223b0a;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.fabric-card:hover,.fabric-card.is-selected {
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 10px 22px #592a531d
}
.fabric-photo {display:block;position:relative;height:170px;overflow:hidden}
.fabric-photo::after {content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0003,transparent 65%)}
.fabric-photo img {width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .25s ease}
.fabric-card:hover .fabric-photo img {transform:scale(1.05)}
.fabric-photo svg {position:absolute;z-index:1;left:50%;bottom:24px;transform:translateX(-50%);width:43px;height:43px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px #0006)}
.fabric-caption {display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:75px;padding:12px 8px;background:linear-gradient(180deg,#fffdfd,#f1edef)}
.fabric-caption strong {font-size:18px;font-weight:800;line-height:1.35}
.fabric-caption small {font-size:12px;line-height:1.5;color:#625b61}
.fabric-placeholder-note {text-align:center;margin:23px 0 0;color:#877e85;font-size:11px}
/* پنجره نمایش نمای نزدیک پارچه و توضیحات */
.fabric-overlay {position:fixed;inset:0;z-index:130;background:rgba(25,19,24,.66);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
.fabric-overlay.show {display:flex}
.fabric-dialog {position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px;width:min(1040px,100%);max-height:min(700px,94vh);overflow:auto;padding:36px;background:#fff;border-radius:25px;box-shadow:0 26px 70px #13091855}
.fabric-dialog-image {order:-1;min-height:400px;overflow:hidden;border-radius:24px;background:#ddd1da}
.fabric-dialog-image img {height:100%;width:100%;min-height:400px;object-fit:cover}
.fabric-dialog-content {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:right;padding:14px 5px 14px 0}
.fabric-dialog-eyebrow {color:var(--accent);font-weight:700;font-size:12px;margin:0 0 6px}
.fabric-dialog-content h2 {font-size:clamp(26px,3vw,34px);color:var(--accent-dark);margin:0 0 18px;line-height:1.55}
.fabric-dialog-content h2::after {content:"";display:block;width:55px;height:4px;background:var(--accent);margin:12px 0 0;border-radius:4px}
.fabric-dialog-content>p#fabric-modal-description {font-size:16px;line-height:2.1;color:#363035;margin:0 0 25px}
.fabric-features-title {margin:0 0 14px;padding:4px 19px;border-radius:25px;background:#f2e8ed;color:var(--accent-dark);font-size:16px;font-weight:800}
.fabric-features-title span {font-size:11px;font-weight:500;color:#8c7b87}
.fabric-feature-list {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;margin:5px 0 18px}
.fabric-feature {min-height:75px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:3px 6px;text-align:center;font-size:12px;line-height:1.4;border-left:1px solid #eadfe6}
.fabric-feature:last-child {border-left:0}
.fabric-feature-icon {font-family:serif;font-weight:normal;color:var(--accent);font-size:28px;line-height:1.2}
.fabric-modal-disclaimer {color:#8b7b85;font-size:11px;line-height:1.9;margin:0!important}
.fabric-dialog-close {position:absolute;top:14px;left:14px;z-index:2;width:41px;height:41px;border-radius:50%;border:none;background:#fff;color:#181519;box-shadow:0 3px 13px #0002;font-size:29px;line-height:1}
.fabric-dialog-close:hover {background:#f3e7ed}

footer {
  border-top:1px solid #eee;
  padding:30px 0 40px;
  background:#fff;
  color:#645c63
}
.footer-row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
  font-size:12px
}
.footer-row strong {
  color:var(--accent);
  font-size:16px
}
.demo-note {
  color:#827582;
  font-size:11px;
  margin-top:10px
}
.overlay {
  position:fixed;
  inset:0;
  background:#191118a8;
  z-index:100;
  display:none;
  justify-content:center;
  align-items:center;
  padding:18px
}
.overlay.show {
  display:flex
}
.dialog {
  width:min(800px,100%);
  background:white;
  border-radius:19px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  box-shadow:0 20px 70px #0003;
  max-height:90vh;
  overflow-y:auto
}
.product-gallery-view {position:relative;min-height:420px;background:#f5f0f3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-gallery-view>img {display:block;width:100%;height:100%;min-height:420px;max-height:620px;object-fit:contain;object-position:center;background:#f5f0f3}
.gallery-arrow {position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:#fffE;color:var(--accent-dark);font-size:30px;line-height:1;box-shadow:0 3px 14px #0002;display:grid;place-items:center}
.gallery-prev {right:12px}.gallery-next {left:12px}.gallery-arrow[hidden],.gallery-count[hidden],.gallery-dots[hidden]{display:none}
.gallery-count {position:absolute;top:12px;left:12px;background:#211721a8;color:#fff;border-radius:20px;padding:4px 10px;font-size:12px;direction:ltr}
.gallery-dots {position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center;justify-content:center;max-width:80%;flex-wrap:wrap}
.gallery-dot {width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#fff9;box-shadow:0 1px 5px #0004}.gallery-dot.active {background:#fff;transform:scale(1.25)}
.details {
  padding:45px 35px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.details small {
  color:var(--accent);
  font-size:12px
}
.details h2 {
  font-size:25px;
  margin:8px 0 10px
}
.details p {
  color:#6c626b;
  font-size:14px;
  margin:0 0 19px
}
.spec {
  display:flex;
  gap:12px;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #eee;
  font-size:14px
}
.spec span {
  color:var(--muted)
}
.spec strong {
  font-weight:700
}
.spec-list {display:flex;flex-direction:column;width:100%;max-height:42vh;overflow-y:auto;padding-inline-end:2px;overscroll-behavior:contain}
.spec-list:empty {display:none}
.spec-note {
  margin-top:23px!important;
  font-size:12px!important;
  color:#8a8088!important
}
.close {
  position:absolute;
  left:14px;
  top:14px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:white;
  box-shadow:0 2px 12px #0002;
  font-size:22px;
  z-index:1
}
@media(max-width:1100px) {
  .header-row {
    gap:13px
  }
  .brand strong {
    font-size:20px
  }
  nav {
    gap:16px
  }
  .search {
    max-width:190px
  }
  .grid {
    grid-template-columns:repeat(3,1fr)
  }
  .card img {
    height:300px
  }
  .hero-copy {
    padding-right:8%
  }
}
@media(max-width:740px) {
  .header-row {
    height:68px;
    flex-wrap:wrap
  }
  .brand-icon {
    height:35px;
    width:35px
  }
  .brand strong {
    font-size:18px
  }
  .brand small {
    font-size:9px
  }
  .menu-toggle {
    display:block;
    margin-right:auto
  }
  .search {
    flex:1;
    max-width:none;
    min-width:90px;
    margin-right:auto;
    padding:8px 10px
  }
  .search input {
    font-size:11px
  }
  nav {
    display:none;
    position:absolute;
    top:68px;
    right:0;
    left:0;
    background:#fff;
    padding:10px 18px 18px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:3px
  }
  nav.show {
    display:flex
  }
  .nav-link {
    text-align:right
  }
  .subnav {
    position:static;
    box-shadow:none;
    border:0;
    background:#faf7fa
  }
  .hero-shell {
    padding-top:12px
  }
  .hero {
    height:420px;
    border-radius:12px
  }
  .hero-img {
    object-position:29% center
  }
  .hero:after {
    background:linear-gradient(270deg,rgba(248,243,241,.97),rgba(247,241,239,.75) 55%,rgba(248,243,240,.10))
  }
  .hero-copy {
    padding:30px 48px
  }
  .hero h1 {
    font-size:28px
  }
  .hero p {
    font-size:13px
  }
  .hero .pill {
    font-size:11px
  }
  .arrow {
    height:34px;
    width:34px;
    font-size:22px
  }
  .prev {
    right:6px
  }
  .next {
    left:6px
  }
  .benefits {
    grid-template-columns:1fr 1fr
  }
  .benefit {
    padding:14px 8px;
    gap:6px
  }
  .benefit:nth-child(3) {
    grid-column:1/-1;
    border-top:1px solid #eee
  }
  .benefit svg {
    width:26px;
    height:26px
  }
  .benefit strong {
    font-size:12px
  }
  .benefit span {
    font-size:10px
  }
  .gallery-section {
    padding-block:30px
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .card img {
    height:240px
  }
  .card .caption {
    display:block;
    padding:9px
  }
  .card strong {
    font-size:12px;
    display:block
  }
  .card small {
    font-size:10px
  }
  .dialog {
    grid-template-columns:1fr;
    max-width:420px
  }
  .product-gallery-view {min-height:240px;height:clamp(260px,46vh,420px)}
  .product-gallery-view>img {width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}
  .details {
    padding:24px
  }
  .details h2 {
    font-size:21px
  }
  .close {
    right:12px;
    left:auto
  }
}
@media(max-width:420px) {
  .search {
    width:100%;
    order:5;
    flex-basis:100%;
    margin:-8px 0 8px
  }
  .header-row {
    height:auto;
    min-height:68px
  }
  .header-row .brand {
    margin:8px 0
  }
  nav {
    top:104px
  }
  .hero h1 {
    font-size:24px
  }
  .hero-copy {
    padding-right:40px
  }
  .grid {
    gap:10px
  }
  .card img {
    height:200px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}

@media(max-width:1050px) {
  .fabric-cards {grid-template-columns:repeat(3,minmax(0,1fr))}
  .fabric-dialog {gap:18px;padding:26px}
  .fabric-dialog-image,.fabric-dialog-image img {min-height:330px}
  .fabric-feature-list {grid-template-columns:repeat(2,1fr)}
  .fabric-feature:nth-child(2) {border-left:0}
  .fabric-feature:nth-child(-n+2) {border-bottom:1px solid #eadfe6}
}
@media(max-width:740px) {
  .fabric-showcase {padding-block:34px 39px}
  .fabric-intro {margin-bottom:20px}
  .fabric-intro h2 {gap:12px;font-size:22px}
  .fabric-intro h2::before,.fabric-intro h2::after {width:18px}
  .fabric-intro p {font-size:12px;padding:0 8px}
  .fabric-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fabric-photo {height:155px}
  .fabric-caption {min-height:72px}
  .fabric-caption strong {font-size:16px}
  .fabric-caption small {font-size:11px}
  .fabric-dialog {grid-template-columns:1fr;gap:0;width:min(470px,100%);padding:12px;border-radius:19px;max-height:92vh}
  .fabric-dialog-image {order:0;min-height:0;border-radius:15px}
  .fabric-dialog-image img {min-height:0;height:205px;object-fit:cover}
  .fabric-dialog-content {padding:18px 15px;align-items:stretch}
  .fabric-dialog-content h2 {font-size:23px;margin-bottom:10px}
  .fabric-dialog-content h2::after {margin-top:8px}
  .fabric-dialog-content>p#fabric-modal-description {font-size:13px;line-height:1.9;margin-bottom:16px}
  .fabric-features-title {font-size:13px;align-self:flex-start}
  .fabric-feature {font-size:11px;min-height:57px}
  .fabric-feature-icon {font-size:22px}
  .fabric-dialog-close {top:18px;left:18px}
}
@media(max-width:410px) {
  .fabric-photo {height:127px}
  .fabric-caption {padding:9px 4px}
  .fabric-caption strong {font-size:15px}
}


/* بنر اطلاع‌رسانی خرید تکی و عمده — افزوده‌شده بدون تغییر در چیدمان قبلی */
.contact-banner {
  margin-top: 12px;
  margin-bottom: 14px;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 13px;
  padding-inline: clamp(16px, 2.4vw, 30px);
  border: 1px solid #eadce7;
  border-radius: 14px;
  background: linear-gradient(100deg, #f8f0f6 0%, #f1e5ef 100%);
  color: var(--accent-dark);
}
.contact-banner-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: #fff;
}
.contact-banner-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.contact-banner-copy strong {font-size: 16px; font-weight: 800;}
.contact-banner-copy span {font-size: 13px; color: #65545f;}
.contact-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 17px;
  border-radius: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: background .2s, transform .2s;
}
.contact-banner-link:hover {background: var(--accent-dark); transform: translateY(-1px);}

/* فوتر کامل مانتو اتوسا */
.site-footer {
  margin-top: 8px;
  padding: 42px 0 18px;
  color: #f8f1f6;
  background: linear-gradient(115deg, #35152f 0%, #54254a 55%, #3c1936 100%);
  border-top: 1px solid #eadce7;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1.25fr 1fr;
  gap: 28px;
  padding-bottom: 30px;
}
.footer-brand-block, .footer-column {min-width: 0;}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.footer-brand-icon {width: 47px; height: 47px; color: #e6c6dd; flex: 0 0 auto;}
.footer-brand strong {display: block; font-size: 22px; line-height: 1.5;}
.footer-brand small {display: block; color: #e0cbd9; font-size: 10px;}
.footer-brand-block>p, .footer-column>p {
  margin: 12px 0 0;
  color: #e3d5df;
  font-size: 12px;
  line-height: 2;
}
.footer-column {padding-right: 22px; border-right: 1px solid #ffffff2b;}
.footer-column h3 {margin: 0 0 13px; color: #fff; font-size: 15px; font-weight: 800;}
.footer-column>p {display: flex; align-items: flex-start; gap: 9px; margin: 7px 0;}
.footer-column b {font-weight: 500; color: #fff;}
.footer-icon {display: inline-grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; color: #f4d6e9; background: #ffffff18; font-size: 14px; line-height: 1;}
.map-link {display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #f2d7e9; font-size: 11px; border-bottom: 1px solid #d6afca; padding-bottom: 3px;}
.social-links {display: flex; align-items: center; gap: 10px; margin-top: 16px;}
.social-links a {width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #ffffff72; border-radius: 50%; color: #fff; transition: background .2s, border-color .2s, transform .2s;}
.social-links a:hover {background: #ffffff20; border-color: #fff; transform: translateY(-2px);}
.social-links svg {width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
.footer-bottom {display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid #ffffff35; padding-top: 15px; color: #e4d4df; font-size: 11px;}
.footer-bottom a {color: #f5ddec; white-space: nowrap;}
.site-footer .demo-note {margin-top: 12px; color: #cbb8c7; font-size: 10px; line-height: 1.9;}

@media(max-width: 900px) {
  .footer-main {grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 26px;}
  .footer-column:nth-child(3) {border-right: 0; padding-right: 0;}
}
@media(max-width: 600px) {
  .contact-banner {align-items: flex-start; flex-wrap: wrap; gap: 10px 12px; padding: 13px;}
  .contact-banner-icon {width: 40px; height: 40px; flex-basis: 40px;}
  .contact-banner-copy {flex-basis: calc(100% - 55px);}
  .contact-banner-copy strong {font-size: 14px;}
  .contact-banner-copy span {font-size: 11px; line-height: 1.8;}
  .contact-banner-link {margin-right: 52px; padding: 7px 14px; font-size: 11px;}
  .site-footer {padding-top: 30px;}
  .footer-main {grid-template-columns: 1fr; gap: 22px; padding-bottom: 22px;}
  .footer-column, .footer-column:nth-child(3) {border-right: 0; border-top: 1px solid #ffffff2b; padding: 18px 0 0;}
  .footer-brand-block {padding-bottom: 2px;}
  .footer-bottom {align-items: flex-start; flex-direction: column; font-size: 10px;}
}

/* اصلاحات تکمیلی واکنش‌گرایی و جلوگیری از به‌هم‌ریختگی در عرض‌های میانی */
@media (max-width: 950px) {
  .header-row {
    height: 72px;
    gap: 14px;
  }

  .menu-toggle {
    display: block;
    flex: 0 0 auto;
    margin-right: 0;
  }

  .search {
    flex: 0 1 240px;
    min-width: 120px;
    max-width: 260px;
  }

  header nav {
    display: none;
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    z-index: 60;
    margin: 0;
    padding: 12px clamp(16px, 4vw, 40px) 18px;
    background: #fff;
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }

  header nav.show {
    display: flex;
  }

  header nav .has-sub {
    width: 100%;
  }

  header nav .has-sub > .nav-link {
    width: 100%;
    text-align: right;
  }

  header nav .subnav {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 3px;
    box-shadow: none;
    border: 0;
    background: #faf7fa;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }

  .footer-column,
  .footer-column:nth-child(3) {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 740px) {
  .header-row {
    height: 68px;
  }

  header nav {
    top: 68px;
  }
}

@media (max-width: 600px) {
  .contact-banner {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 9px 12px;
    padding: 13px;
  }

  .contact-banner-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    grid-column: 1;
    grid-row: 1;
  }

  .contact-banner-copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    flex: initial;
    flex-basis: auto;
  }

  .contact-banner-link {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 0;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .section-head h2 {
    font-size: 20px;
  }

  .section-head .hint {
    font-size: 11px;
    line-height: 1.8;
  }

  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .footer-column,
  .footer-column:nth-child(3) {
    border-right: 0;
    border-top: 1px solid #ffffff2b;
    padding: 17px 0 0;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .fabric-intro h2 {
    gap: 8px;
    font-size: 19px;
  }

  .fabric-intro h2::before,
  .fabric-intro h2::after {
    width: 12px;
  }

  .contact-banner-copy span {
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   اصلاح نهایی هدر موبایل — سازگار با Safari در iOS
   مشکل قبلی: ارتفاع ثابت هدر باعث می‌شد ردیف جستجو روی اسلایدر بیفتد.
   ========================================================= */
@media screen and (max-width: 740px) {
  header {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "brand menu"
      "search search";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    flex-wrap: initial !important;
  }

  .header-row > .brand {
    grid-area: brand;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    justify-self: start;
  }

  .header-row > .brand span {
    min-width: 0;
  }

  .header-row > .brand strong {
    display: block;
    font-size: 18px;
    line-height: 1.5;
  }

  .header-row > .brand small {
    font-size: 10px;
    line-height: 1.5;
  }

  .header-row > .brand .brand-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .header-row > .menu-toggle {
    grid-area: menu;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 !important;
    justify-self: end;
    align-self: center;
    line-height: 1;
    flex: none;
  }

  .header-row > .search {
    grid-area: search;
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 46px;
    margin: 0 !important;
    padding: 8px 14px;
    flex: none;
    order: initial;
    justify-self: stretch;
    box-sizing: border-box;
  }

  .header-row > .search input {
    min-width: 0;
    width: 100%;
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
  }

  .header-row > nav {
    top: 100% !important;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hero-shell {
    padding-top: 12px;
  }
}

/* دستگاه‌های بسیار باریک */
@media screen and (max-width: 380px) {
  .header-row {
    column-gap: 8px;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header-row > .brand strong {
    font-size: 16px;
  }

  .header-row > .brand small {
    font-size: 9px;
  }

  .header-row > .brand .brand-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}


/* Theme colors controlled from the admin appearance panel */
body{background:var(--theme-page,#fff);color:var(--ink)}
header{background:var(--theme-header,#fff);border-bottom-color:var(--line)}
.search{background:var(--theme-soft,#f5f3f5)}
.hero{background:var(--theme-surface,#e8e1de)}
.primary,.contact-banner-link{color:var(--theme-button-text,#fff)}
.benefits{background:var(--theme-surface,#faf9fa)}
.benefit+.benefit{border-color:var(--line)}
.card{background:var(--theme-surface,#fff);border-color:var(--line)}
.card .caption{background:var(--theme-card,#f9f3f6)}
.empty{background:var(--theme-soft,#fbf6fa)}
.fabric-showcase{background:linear-gradient(180deg,var(--theme-page,#fff),var(--theme-surface,#fcfafb));border-color:var(--line)}
.fabric-card{background:var(--theme-card,#f4f0f1);color:var(--ink)}
.fabric-caption{background:var(--theme-surface,#fff)}
.fabric-dialog,.dialog{background:var(--theme-surface,#fff);color:var(--ink)}
.fabric-overlay,.overlay{background:var(--theme-overlay,rgba(25,19,24,.68))}
footer{background:var(--theme-surface,#fff);color:var(--muted);border-color:var(--line)}
.site-footer{background:var(--theme-footer,#35152f);color:var(--theme-footer-text,#f8f1f6)}
.site-footer .footer-brand,.site-footer .footer-column h3,.site-footer .footer-column b{color:var(--theme-footer-text,#fff)}
.site-footer .footer-brand small,.site-footer .footer-brand-block>p,.site-footer .footer-column>p,.site-footer .footer-bottom{color:var(--theme-footer-text,#e3d5df)}
.contact-banner{background:var(--theme-banner,#f2e8ed);color:var(--theme-banner-text,var(--accent-dark));border-color:var(--line)}
.contact-banner-copy span{color:var(--theme-banner-text,var(--muted))}
.contact-banner-icon{color:var(--theme-icon,var(--accent))}
.footer-brand-icon,.footer-icon,.social-links a{color:var(--theme-footer-text,#fff)}
.spec-icon{width:19px;height:19px;flex:0 0 19px;background:var(--theme-icon,var(--accent));-webkit-mask:var(--icon-mask) center/contain no-repeat;mask:var(--icon-mask) center/contain no-repeat;opacity:.9}
.spec{align-items:center;border-color:var(--line)}

/* Product detail popup: centered, with a fixed gallery and independently scrollable details */
.overlay{padding:clamp(10px,2.5vw,24px)}
.dialog{width:min(900px,100%);max-height:88vh;max-height:88dvh;overflow:hidden;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
.product-gallery-view{height:min(72vh,650px);min-height:0;align-self:stretch}
.product-gallery-view>img{height:100%;min-height:0;max-height:none;object-fit:contain}
.details{min-height:0;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;padding:38px 30px}
.spec-list{max-height:none;overflow:visible}
@media(max-width:700px){
  .overlay{padding:12px}
  .dialog{width:min(520px,100%);max-height:88vh;max-height:88dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,38vh) minmax(0,1fr);overflow:hidden;border-radius:20px}
  .product-gallery-view{height:100%;min-height:0;max-height:none}
  .product-gallery-view>img{height:100%;width:100%;min-height:0;max-height:none;object-fit:contain}
  .details{max-height:none;height:100%;overflow-y:auto;padding:22px 22px 28px;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .details h2{margin-top:6px}
  .spec-list{max-height:none;overflow:visible}
}
.subnav{background:var(--theme-surface,#fff);border-color:var(--line)}
.pill{background:var(--pale);color:var(--accent-dark)}
.hero p{color:var(--muted)}
.fabric-intro h2::before,.fabric-intro h2::after{background:var(--accent)}
.fabric-intro p,.fabric-caption small,.fabric-placeholder-note{color:var(--muted)}
.fabric-feature{border-color:var(--line)}
.fabric-features-title{background:var(--pale);color:var(--accent-dark)}
.fabric-dialog-close{background:var(--theme-surface,#fff);color:var(--ink)}
.fabric-dialog-close:hover{background:var(--pale)}
.close{background:var(--theme-surface,#fff);color:var(--ink)}
.search input::placeholder{color:var(--muted)}


/* Product specifications: fixed RTL columns keep labels and values aligned,
   even when a row has no icon. */
.spec-list .spec {
  display: grid !important;
  grid-template-columns: 30px minmax(130px, .9fr) minmax(0, 1.1fr);
  direction: rtl;
  align-items: center;
  justify-content: initial;
  column-gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 0;
  text-align: initial;
}
.spec-list .spec-icon {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  justify-self: center;
}
.spec-list .spec-icon.is-empty { visibility: hidden; }
.spec-list .spec-label {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  text-align: right;
  direction: rtl;
  overflow-wrap: anywhere;
  line-height: 1.8;
  white-space: normal;
}
.spec-list .spec-value {
  grid-column: 3;
  grid-row: 1;
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  text-align: left;
  direction: rtl;
  overflow-wrap: anywhere;
  line-height: 1.8;
  font-weight: 700;
  white-space: normal;
}
@media (max-width: 700px) {
  .spec-list .spec {
    grid-template-columns: 22px minmax(100px, .9fr) minmax(0, 1.1fr);
    column-gap: 9px;
    padding: 13px 0;
  }
  .spec-list .spec-label, .spec-list .spec-value {
    font-size: clamp(13px, 3.6vw, 16px);
  }
}

/* Product category filters */
.gallery-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;justify-content:flex-start}.gallery-filters button{border:1px solid var(--line);background:var(--theme-surface);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.gallery-filters button:hover,.gallery-filters button.active{background:var(--accent);border-color:var(--accent);color:var(--theme-button-text)}@media(max-width:600px){.gallery-filters{gap:6px}.gallery-filters button{padding:7px 10px;font-size:11px}}


/* Uploaded Atousa brand assets: preserve the original 137x70 logo ratio. */
.brand-logo-img{display:block;width:137px;height:70px;max-width:min(137px,32vw);object-fit:contain;border-radius:0;flex:0 0 auto}
.brand.brand-image-only{gap:0;min-width:0}
.footer-logo-img{display:block;width:137px;height:70px;max-width:100%;object-fit:contain;border-radius:0;flex:0 0 auto}
.footer-brand.footer-brand-image-only{gap:0}
@media(max-width:740px){.brand-logo-img{width:auto;height:auto;max-width:120px;max-height:56px}.footer-logo-img{width:auto;height:auto;max-width:137px;max-height:60px}}


/* Atousa mobile header: centered logo, menu on the right, contact on the left. */
@media screen and (max-width: 740px) {
  header.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--theme-header, rgba(255,255,255,.97)) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .header-row {
    display: grid !important;
    direction: rtl;
    grid-template-columns: minmax(56px,1fr) auto minmax(56px,1fr) !important;
    grid-template-areas: "menu brand contact" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    width: 100%;
    height: auto !important;
    min-height: max(82px, calc(var(--mobile-logo-height,70px) + 16px)) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    position: relative !important;
    flex-wrap: initial !important;
  }
  .header-row > .brand {
    grid-area: brand !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0;
    max-width: min(48vw, 260px);
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .brand-desktop-content { display: none !important; }
  .brand-mobile-content {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    color: var(--accent);
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
  }
  .brand-logo-mobile-img {
    display: block !important;
    width: var(--mobile-logo-width,137px) !important;
    height: var(--mobile-logo-height,70px) !important;
    max-width: min(48vw,260px) !important;
    max-height: calc(100vw * .24) !important;
    object-fit: contain !important;
    flex: 0 1 auto;
  }
  .header-row > .menu-toggle {
    grid-area: menu !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    justify-self: start !important;
    gap: 7px;
    width: auto !important;
    min-width: 56px;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    background: transparent;
    color: var(--accent-dark, #34243b);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  .menu-toggle-icon {
    display: block;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }
  .header-row > .mobile-contact-link {
    grid-area: contact !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    justify-self: end !important;
    width: 48px;
    height: 48px;
    color: var(--accent-dark, #243653);
    text-decoration: none;
  }
  .mobile-contact-link svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .header-row > .search { display: none !important; }
  .header-row > nav {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-height: min(70vh,520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--theme-header,#fff);
    padding: 10px 16px 16px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 14px 28px rgba(30,20,30,.12);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    z-index: 1001;
  }
  .header-row > nav.show { display: flex !important; }
  .header-row > nav .nav-link { text-align: right; padding: 10px 8px; }
  .hero-shell { padding-top: 12px !important; }
  #contact { scroll-margin-top: 96px; }
}
@media screen and (max-width: 380px) {
  .header-row { column-gap: 4px !important; padding-inline: 12px !important; }
  .header-row > .menu-toggle { gap: 4px; font-size: 12px; }
  .menu-toggle-icon { width: 25px; height: 25px; }
  .header-row > .mobile-contact-link { width: 40px; }
  .mobile-contact-link svg { width: 30px; height: 30px; }
}
@media screen and (min-width: 741px) {
  .brand-desktop-content { display: flex; align-items: center; gap: 10px; }
  .brand-mobile-content, .mobile-contact-link { display: none !important; }
}

/* Atousa mobile header: capsule frame, centered logo, and precisely aligned actions. */
@media screen and (max-width: 740px) {
  header.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 9px 0 7px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  header.site-header > .container.header-row {
    width: calc(100% - 56px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 8px 18px !important;
    min-height: max(88px, calc(var(--mobile-logo-height, 70px) + 18px)) !important;
    height: auto !important;
    display: grid !important;
    direction: rtl !important;
    grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr) !important;
    grid-template-areas: "menu brand contact" !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    position: relative !important;
    border: 1px solid rgba(70, 48, 65, .10) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 9px 28px rgba(45, 30, 42, .09) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    flex-wrap: initial !important;
  }

  .header-row > .menu-toggle,
  .header-row > .mobile-contact-link {
    align-self: center !important;
    justify-self: center !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .header-row > .menu-toggle {
    grid-area: menu !important;
    width: 100% !important;
    min-width: 58px !important;
    gap: 7px !important;
    white-space: nowrap !important;
  }

  .header-row > .menu-toggle .menu-toggle-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: block !important;
  }

  .header-row > .menu-toggle span {
    display: inline-block !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-row > .brand {
    grid-area: brand !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: min(46vw, 260px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .brand-mobile-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1 !important;
  }

  .brand-logo-mobile-img {
    display: block !important;
    width: var(--mobile-logo-width, 137px) !important;
    height: var(--mobile-logo-height, 70px) !important;
    max-width: min(46vw, 260px) !important;
    max-height: 72px !important;
    object-fit: contain !important;
    object-position: center !important;
    flex: 0 1 auto !important;
    margin: 0 auto !important;
  }

  .header-row > .mobile-contact-link {
    grid-area: contact !important;
    width: 58px !important;
    min-width: 58px !important;
    justify-self: center !important;
  }

  .mobile-contact-link svg {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  .header-row > .search { display: none !important; }
  .header-row > nav {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 28px rgba(30,20,30,.12) !important;
  }

  #contact { scroll-margin-top: 112px !important; }
}

@media screen and (max-width: 380px) {
  header.site-header > .container.header-row {
    width: calc(100% - 40px) !important;
    padding-inline: 10px !important;
    grid-template-columns: minmax(52px, 1fr) auto minmax(52px, 1fr) !important;
    column-gap: 4px !important;
  }
  .header-row > .menu-toggle { gap: 4px !important; font-size: 12px !important; }
  .header-row > .menu-toggle .menu-toggle-icon { width: 27px !important; height: 27px !important; flex-basis: 27px !important; }
  .header-row > .mobile-contact-link { width: 52px !important; min-width: 52px !important; }
  .mobile-contact-link svg { width: 33px !important; height: 33px !important; }
}

/* Per-slide plain-image mode: image + navigation arrows only. */
.hero.hero--plain::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}
.hero.hero--plain .hero-copy,
.hero.hero--plain .dots,
.hero .dots[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero.hero--plain .hero-img {
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.hero.hero--plain .arrow {
  z-index: 3;
}


/* Atousa Stories: compact rail directly under the mobile capsule header. */
.stories-strip{padding-top:5px;padding-bottom:3px;margin-top:0;margin-bottom:0;overflow:hidden}
.stories-track{display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stories-track::-webkit-scrollbar{display:none}
.story-item{flex:0 0 80px;width:80px;min-width:80px;padding:0;border:0;background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;cursor:pointer}
.story-ring{width:76px;height:76px;padding:3px;border-radius:50%;display:block;background:linear-gradient(135deg,#e6b85c,#9c477e,#783b69);box-shadow:0 2px 9px rgba(74,38,66,.12)}
.story-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid #fff;background:#f6f0f4}
.story-title{display:block;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.7;color:var(--muted)}
.story-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.story-viewer{position:fixed;inset:0;z-index:2200;background:rgba(15,10,15,.92);display:flex;align-items:center;justify-content:center;padding:18px}
.story-viewer[hidden]{display:none!important}
.story-viewer-dialog{position:relative;width:min(420px,100%);height:min(780px,88vh);min-height:320px;border-radius:18px;overflow:hidden;background:#171217;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.story-viewer-dialog>img{width:100%;height:100%;object-fit:contain;background:#171217}
.story-viewer-progress{position:absolute;z-index:5;top:10px;right:12px;left:12px;display:flex;gap:4px}
.story-progress-segment{height:3px;flex:1;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.38)}
.story-progress-segment::after{content:"";display:block;width:0;height:100%;border-radius:inherit;background:#fff}
.story-progress-segment.done::after{width:100%}
.story-progress-segment.active::after{width:100%;animation:story-progress-fill var(--story-duration,5s) linear forwards}
@keyframes story-progress-fill{from{width:0}to{width:100%}}
.story-viewer-close{position:absolute;z-index:6;top:20px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(20,15,20,.48);color:#fff;font-size:27px;line-height:1;cursor:pointer}
.story-viewer-caption{position:absolute;z-index:4;right:16px;left:16px;bottom:15px;display:flex;flex-direction:column;gap:5px;padding:24px 10px 8px;color:#fff;font-size:14px;text-align:right;background:linear-gradient(transparent,rgba(0,0,0,.56));pointer-events:none}
.story-viewer-caption strong{font-weight:700}.story-viewer-caption span{white-space:pre-line;line-height:1.8}.story-viewer-caption[hidden]{display:none!important}.story-viewer-dialog.has-link .story-viewer-caption{bottom:76px}
.story-viewer-link{position:absolute;z-index:5;right:24px;bottom:22px;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 18px;border-radius:999px;background:var(--accent,#783b69);color:#fff;text-decoration:none;font:inherit;font-size:13px;font-weight:700;box-shadow:0 5px 18px rgba(0,0,0,.22)}
.story-viewer-link[hidden]{display:none!important}
.story-viewer-nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:38px;height:48px;border:0;border-radius:22px;background:rgba(255,255,255,.84);color:#542e4e;font-size:30px;line-height:1;cursor:pointer}
.story-viewer-prev{right:10px}.story-viewer-next{left:10px}
.story-only-mobile{display:none!important}.story-only-desktop,.story-all{display:flex}
@media(max-width:740px){.stories-strip{padding-top:2px;padding-bottom:0;margin:0 auto}.stories-track{gap:4px;padding:1px 2px 2px}.story-only-mobile,.story-all{display:flex!important}.story-only-desktop{display:none!important}.story-item{flex-basis:76px;width:76px;min-width:76px;gap:4px}.story-ring{width:72px;height:72px}.story-title{max-width:76px;font-size:10px}.hero-shell{padding-top:0!important}.story-viewer{padding:0}.story-viewer-dialog{width:100%;height:100%;max-height:100vh;border-radius:0}.story-viewer-nav{width:34px;height:42px}.story-viewer-link{bottom:24px}}


/* Atousa modal stacking fix: product/fabric dialogs must sit above the sticky header
   (including iOS Safari, where the mobile header uses z-index: 1000). */
.overlay {
  z-index: 5000 !important;
  isolation: isolate;
}
.overlay .dialog {
  position: relative;
  z-index: 1;
}
.overlay .close {
  z-index: 30 !important;
  pointer-events: auto;
}
.fabric-overlay {
  z-index: 5100 !important;
  isolation: isolate;
}
.fabric-overlay .fabric-dialog {
  position: relative;
  z-index: 1;
}
.fabric-overlay .fabric-dialog-close {
  z-index: 30 !important;
  pointer-events: auto;
}
.story-viewer {
  z-index: 5200 !important;
}

/* Atousa mobile capsule header: compact proportions matching the approved reference. */
@media screen and (max-width: 740px) {
  header.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 8px 0 6px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  header.site-header > .container.header-row {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: 680px !important;
    height: 66px !important;
    min-height: 66px !important;
    margin: 0 auto !important;
    padding: 5px 14px !important;
    display: grid !important;
    direction: rtl !important;
    grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr) !important;
    grid-template-areas: "menu brand contact" !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    position: relative !important;
    overflow: visible !important;
    border: 1px solid rgba(70, 48, 65, .10) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 24px rgba(45, 30, 42, .08) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    flex-wrap: initial !important;
  }

  .header-row > .menu-toggle,
  .header-row > .mobile-contact-link {
    align-self: center !important;
    justify-self: center !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .header-row > .menu-toggle {
    grid-area: menu !important;
    width: 100% !important;
    min-width: 48px !important;
    gap: 7px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  .header-row > .menu-toggle .menu-toggle-icon {
    display: block !important;
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
  }

  .header-row > .brand {
    grid-area: brand !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: min(44vw, 180px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .brand-mobile-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1 !important;
  }

  .brand-logo-mobile-img {
    display: block !important;
    width: var(--mobile-logo-width, 137px) !important;
    height: var(--mobile-logo-height, 70px) !important;
    max-width: min(44vw, 180px) !important;
    max-height: 52px !important;
    object-fit: contain !important;
    object-position: center !important;
    flex: 0 1 auto !important;
    margin: 0 auto !important;
  }

  .header-row > .mobile-contact-link {
    grid-area: contact !important;
    width: 48px !important;
    min-width: 48px !important;
    justify-self: center !important;
  }

  .mobile-contact-link svg {
    display: block !important;
    width: 35px !important;
    height: 35px !important;
    margin: 0 !important;
  }

  .header-row > .search { display: none !important; }
  .header-row > nav {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
  }
}

@media screen and (max-width: 380px) {
  header.site-header > .container.header-row {
    width: calc(100% - 32px) !important;
    height: 64px !important;
    min-height: 64px !important;
    padding-inline: 10px !important;
    grid-template-columns: minmax(46px, 1fr) auto minmax(46px, 1fr) !important;
    column-gap: 3px !important;
  }
  .header-row > .menu-toggle { gap: 5px !important; font-size: 13px !important; }
  .header-row > .menu-toggle .menu-toggle-icon { width: 27px !important; height: 27px !important; flex-basis: 27px !important; }
  .header-row > .mobile-contact-link { width: 46px !important; min-width: 46px !important; }
  .mobile-contact-link svg { width: 33px !important; height: 33px !important; }
  .brand-logo-mobile-img { max-width: 42vw !important; max-height: 50px !important; }
}

/* Atousa product cards: edge-to-edge image, rounded top corners, compact horizontal caption. */
.card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  box-sizing: border-box;
}
.card img {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(210px, 24vw, 310px);
  margin: 0;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 13px 13px 0 0;
}
.card .caption {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
}
.card strong {
  min-width: 0;
  text-align: right;
}
.card small {
  flex: 0 0 auto;
  text-align: left;
}
@media (max-width: 740px) {
  .card img {
    width: 100%;
    height: clamp(220px, 58vw, 300px);
    object-fit: cover;
    object-position: center 20%;
    border-radius: 12px 12px 0 0;
  }
  .card .caption {
    display: flex;
    min-height: 48px;
    padding: 10px 11px;
    flex-direction: row;
    align-items: center;
  }
  .card strong {
    display: block;
    font-size: 12px;
    line-height: 1.5;
  }
  .card small {
    display: block;
    font-size: 10px;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .card img { height: 220px; }
  .card .caption { gap: 5px; padding-inline: 8px; }
  .card strong { font-size: 11px; }
  .card small { font-size: 9px; }
}

/* Fine alignment: move the mobile contact icon closer to the left edge of the capsule. */
@media screen and (max-width: 740px) {
  header.site-header > .container.header-row > .mobile-contact-link {
    transform: translateX(calc(-1 * clamp(20px, 6vw, 42px))) !important;
  }
}

/* Final mobile header alignment: right-align menu control and lift logo/actions slightly. */
@media screen and (max-width: 740px) {
  header.site-header > .container.header-row > .menu-toggle {
    justify-self: start !important; /* inline-start is the right edge in RTL */
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 2px !important;
    margin: 0 !important;
    transform: translateY(-2px) !important;
  }

  header.site-header > .container.header-row > .menu-toggle .menu-toggle-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: block !important;
    align-self: center !important;
    stroke-width: 2.5 !important;
  }

  header.site-header > .container.header-row > .menu-toggle span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  header.site-header > .container.header-row > .brand {
    transform: translateY(-4px) !important;
  }

  header.site-header > .container.header-row > .mobile-contact-link {
    transform: translateX(calc(-1 * clamp(20px, 6vw, 42px))) translateY(-2px) !important;
  }
}


/* Trust badges replacing the social-follow block in the footer */
.footer-trust .trust-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.footer-trust .trust-badge{width:auto;min-width:112px;max-width:180px;min-height:112px;padding:9px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid #ffffff55;border-radius:14px;background:#ffffff0d;text-align:center;overflow:hidden}
.footer-trust .trust-badge img{display:block;max-width:100%;width:auto;height:auto;max-height:180px;object-fit:contain;background:#fff;border-radius:7px}
.footer-trust .trust-badge small{display:block;color:var(--theme-footer-text,#f8f1f6);font-size:9px;line-height:1.6;opacity:.82}
.footer-trust .trust-badge a{display:flex;align-items:center;justify-content:center;max-width:100%}
.footer-trust .trust-badge script{display:none}
@media(max-width:760px){.footer-trust .trust-badges{gap:10px}.footer-trust .trust-badge{min-width:104px;max-width:160px;min-height:106px}}


/* Mobile horizontal overflow guard — keep all page sections inside viewport.
   Inner horizontal scrollers (stories) remain independently scrollable. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

.container,
.header-row,
main,
section,
.hero-shell,
.gallery-section,
.fabric-showcase,
.contact-banner,
.site-footer,
.footer-main,
.footer-bottom {
  min-width: 0;
  max-width: 100%;
}

.grid,
.fabric-cards,
.footer-main,
.benefits,
.header-row,
.contact-banner,
.footer-bottom {
  min-width: 0;
}

.grid > *,
.fabric-cards > *,
.footer-main > *,
.benefits > *,
.header-row > *,
.contact-banner > *,
.footer-bottom > * {
  min-width: 0;
}

@media screen and (max-width: 740px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  .gallery-section,
  .fabric-showcase,
  .hero-shell,
  .stories-strip,
  .contact-banner,
  .site-footer {
    width: 100%;
    max-width: 100%;
  }

  .grid,
  .fabric-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .card,
  .fabric-card,
  .contact-banner,
  .footer-main > * {
    min-width: 0;
    max-width: 100%;
  }

  .card .caption,
  .contact-banner-copy,
  .footer-bottom {
    overflow-wrap: anywhere;
  }

  /* Preserve horizontal scrolling only inside the stories rail. */
  .stories-track {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}