:root {
  --color-primary: #392d32;
  --color-accent: #d9a6a7;
  --color-surface: #fcfaf8;
  --color-ink: #392d32;
  --color-ink-muted: #756a68;
  --font-sans: "Vazirmatn", "Estedad", Tahoma, Arial, sans-serif;
  --font-display: "Estedad", "Vazirmatn", Tahoma, Arial, sans-serif;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --shadow-sm: 0 8px 24px rgb(57 45 50 / 0.06);
  --shadow-lg: 0 20px 54px rgb(57 45 50 / 0.12);
  --shadow-xl: 0 32px 80px rgb(57 45 50 / 0.16);
  --color-card: #fffdfb;
  --color-line: #e8dfd9;
  --color-wash: #f4eeea;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
}

:root { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-surface); font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--color-surface); line-height: 1.85; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: #8d656b; }
:focus-visible { outline: 2px solid #80565e; outline-offset: 4px; }

.site-shell { min-height: 100dvh; overflow: clip; }
.site-header { position: sticky; inset-block-start: 0; z-index: 30; border-bottom: 1px solid rgb(57 45 50 / .09); background: rgb(252 250 248 / .92); backdrop-filter: blur(18px); }
.header-inner { width: min(100%, 1440px); min-height: 76px; margin-inline: auto; padding: 10px clamp(16px, 4vw, 60px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 38px; aspect-ratio: 1; border-radius: 50% 50% 48% 12%; display: grid; place-items: center; color: #fff; background: var(--color-primary); transform: rotate(-8deg); }
.brand-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; white-space: nowrap; }
.desktop-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); color: var(--color-ink-muted); font-size: .91rem; }
.desktop-nav a, .footer-links a { transition: color .2s ease; }
.desktop-nav a:hover, .footer-links a:hover { color: #a15f69; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.cart-trigger, .mobile-trigger { position: relative; border: 1px solid var(--color-line); border-radius: 999px; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--color-primary); cursor: pointer; transition: transform .2s, background .2s; }
.cart-trigger:hover, .mobile-trigger:hover { transform: translateY(-2px); background: #f7efed; }
.cart-count { min-width: 21px; height: 21px; padding-inline: 5px; border-radius: 99px; display: grid; place-items: center; color: #fff; background: #8d656b; font-size: .72rem; line-height: 1; }
.mobile-trigger, .mobile-menu { display: none; }
.cart-popover { position: absolute; inset-inline-end: clamp(12px, 4vw, 56px); inset-block-start: calc(100% + 8px); width: min(360px, calc(100vw - 24px)); padding: 20px; border: 1px solid var(--color-line); border-radius: 20px; background: #fffdfb; box-shadow: var(--shadow-lg); animation: pop-in .22s ease both; }
.cart-popover h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.15rem; }
.cart-lines { display: grid; gap: 10px; max-height: 260px; overflow: auto; }
.cart-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--color-line); font-size: .88rem; }
.cart-line-name { min-width: 0; }
.cart-line small { color: var(--color-ink-muted); }
.cart-footer { margin-block-start: 14px; display: grid; gap: 12px; }

.page-hero { padding: clamp(44px, 7vw, 92px) clamp(16px, 5vw, 72px) clamp(60px, 8vw, 112px); }
.hero-grid { width: min(100%, 1320px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(28px, 6vw, 88px); }
.hero-copy { position: relative; z-index: 1; padding-block: 14px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; color: #8d656b; font-size: .84rem; font-weight: 700; }
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.hero-title { margin: 14px 0 16px; max-width: 650px; font-family: var(--font-display); font-size: clamp(3.2rem, 8vw, 7.3rem); line-height: 1.12; letter-spacing: 0; font-weight: 850; overflow-wrap: anywhere; }
.hero-title em { color: #b17d83; font-style: normal; }
.hero-copy p { max-width: 470px; margin: 0; color: var(--color-ink-muted); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 28px; }
.hero-note { margin-block-start: 34px; display: flex; align-items: center; gap: 12px; color: var(--color-ink-muted); font-size: .84rem; }
.hero-note span:first-child { width: 34px; height: 1px; background: var(--color-accent); }
.hero-visual { position: relative; min-width: 0; }
.hero-image-frame { height: clamp(390px, 49vw, 670px); overflow: hidden; border-radius: 48% 48% 16px 16px; background: #e9ded2; box-shadow: var(--shadow-lg); }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; animation: drift 8s ease-in-out infinite alternate; }
.hero-stamp { position: absolute; inset-inline-start: -26px; inset-block-end: 30px; width: clamp(94px, 11vw, 142px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 14px; color: #fff; background: #75816c; font-size: .86rem; line-height: 1.7; transform: rotate(-9deg); box-shadow: var(--shadow-sm); }
.hero-number { position: absolute; inset-inline-end: -14px; inset-block-start: 36px; font-family: var(--font-display); font-size: clamp(5rem, 12vw, 10rem); line-height: 1; font-weight: 900; color: rgb(255 255 255 / .65); writing-mode: vertical-rl; pointer-events: none; }

.section-wrap { padding: clamp(62px, 8vw, 116px) clamp(16px, 5vw, 72px); }
.section-inner { width: min(100%, 1320px); margin-inline: auto; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-block-end: 34px; }
.section-head h2 { max-width: 640px; margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.25; font-weight: 800; }
.section-head p { max-width: 360px; margin: 0; color: var(--color-ink-muted); }
.story-band { background: #eee4dc; }
.story-grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: clamp(24px, 6vw, 90px); }
.story-photo { height: clamp(300px, 42vw, 540px); overflow: hidden; border-radius: 8px 150px 8px 8px; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-copy { padding: clamp(4px, 2vw, 20px); }
.story-copy h2 { max-width: 520px; margin: 12px 0 20px; font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 4.5rem); line-height: 1.3; }
.story-copy p { max-width: 560px; color: #625957; }
.story-quote { margin-block-start: 28px; padding-inline-start: 18px; border-inline-start: 2px solid #bd888d; color: #715b5c; font-size: .93rem; }

.category-strip { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 14px; }
.category-tile { min-height: 260px; position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; color: white; background: #79665e; }
.category-tile:first-child { min-height: 360px; }
.category-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.category-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(43 33 35 / .72), transparent 70%); }
.category-tile:hover img { transform: scale(1.045); }
.category-tile-content { position: absolute; inset-inline: 20px; inset-block-end: 20px; }
.category-tile h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.8rem); }
.category-tile p { margin: 4px 0 0; color: rgb(255 255 255 / .85); font-size: .85rem; }

.feature-product { background: #f8f1ef; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); align-items: center; gap: clamp(28px, 7vw, 100px); }
.feature-grid.reverse { grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); }
.feature-grid.reverse .feature-photo { order: 2; }
.feature-photo { height: clamp(340px, 49vw, 610px); position: relative; overflow: hidden; border-radius: 46% 46% 18px 18px; background: #e9ded2; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.feature-photo:hover img { transform: scale(1.04); }
.feature-copy { padding: clamp(2px, 2vw, 20px); }
.feature-copy h2 { margin: 12px 0; font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: 1.15; }
.feature-copy p { color: var(--color-ink-muted); max-width: 490px; }
.feature-price { margin-block: 18px; font-size: 1.1rem; font-weight: 700; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px 24px; }
.feature-tags span { border: 1px solid #d8c6bf; border-radius: 99px; padding: 5px 13px; color: #6f5b59; font-size: .8rem; }

.gallery { background: #f2ece7; }
.gallery-grid { display: grid; grid-template-columns: 1.1fr .78fr 1fr; grid-template-rows: 210px 210px; gap: 14px; }
.gallery-item { overflow: hidden; border-radius: 12px; }
.gallery-item:first-child { grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: 2; }
.gallery-item:nth-child(3) { grid-column: 3; grid-row: span 2; }
.gallery-item:nth-child(4) { grid-column: 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.04); }

.shop-top { padding: clamp(44px, 6vw, 84px) clamp(16px, 5vw, 72px) 30px; background: #f4eeea; }
.shop-title-row { width: min(100%, 1320px); margin-inline: auto; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.shop-title-row h1, .inner-title { margin: 8px 0; font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 6rem); line-height: 1.15; }
.shop-title-row p { max-width: 470px; color: var(--color-ink-muted); }
.shop-main { padding-block-start: 28px; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 36px; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-block-end: 24px; }
.filter-chip { border: 1px solid #d8cfc8; border-radius: 999px; padding: 8px 15px; color: var(--color-ink-muted); background: transparent; cursor: pointer; transition: .2s; }
.filter-chip[aria-pressed="true"], .filter-chip:hover { border-color: var(--color-primary); color: #fff; background: var(--color-primary); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
.product-card { min-width: 0; }
.product-card-image { position: relative; display: block; height: clamp(190px, 24vw, 300px); overflow: hidden; border-radius: 16px; background: #eee4dc; }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.product-card:hover .product-card-image img { transform: scale(1.04); }
.product-category { position: absolute; inset-inline-start: 12px; inset-block-start: 12px; padding: 4px 10px; border-radius: 99px; background: rgb(252 250 248 / .9); color: #755d5b; font-size: .73rem; }
.product-card-info { padding: 12px 3px; }
.product-title-line { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.product-card h3 { min-width: 0; margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.product-card p { min-height: 48px; margin: 6px 0 12px; color: var(--color-ink-muted); font-size: .84rem; line-height: 1.8; }
.product-price { white-space: nowrap; font-size: .9rem; font-weight: 800; }
.product-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.add-button { min-height: 40px; border: 1px solid var(--color-primary); border-radius: 999px; padding: 6px 13px; color: #fff; background: var(--color-primary); cursor: pointer; font-size: .84rem; transition: .2s; }
.add-button:hover { color: var(--color-primary); background: transparent; }
.text-link { color: #8d656b; font-weight: 700; font-size: .83rem; }
.shop-aside { position: sticky; inset-block-start: 94px; padding: 22px; border: 1px solid var(--color-line); border-radius: 20px; background: #fffdfb; box-shadow: var(--shadow-sm); }
.shop-aside h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: 1.25rem; }
.aside-empty { color: var(--color-ink-muted); font-size: .9rem; }
.aside-lines { display: grid; gap: 8px; }
.aside-line { display: flex; justify-content: space-between; gap: 8px; padding-block: 8px; border-bottom: 1px solid var(--color-line); font-size: .84rem; }
.quantity-controls { display: inline-flex; align-items: center; gap: 8px; direction: ltr; }
.quantity-controls button { width: 26px; height: 26px; border: 1px solid var(--color-line); border-radius: 50%; background: white; cursor: pointer; }
.aside-total { display: flex; justify-content: space-between; gap: 8px; padding-block: 14px 4px; font-weight: 800; }
.checkout-form { display: grid; gap: 12px; margin-block-start: 18px; padding-block-start: 18px; border-top: 1px solid var(--color-line); }
.checkout-form label { display: grid; gap: 5px; color: var(--color-ink-muted); font-size: .82rem; }
.checkout-form input, .checkout-form textarea { width: 100%; min-width: 0; border: 1px solid #dfd6d0; border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--color-ink); outline: none; }
.checkout-form input:focus, .checkout-form textarea:focus { border-color: #b17d83; box-shadow: 0 0 0 3px rgb(217 166 167 / .2); }
.checkout-form textarea { min-height: 74px; resize: vertical; }
.form-error { color: #a33a42; font-size: .82rem; }

.content-page { padding: clamp(40px, 6vw, 90px) clamp(16px, 5vw, 72px) clamp(70px, 9vw, 120px); }
.content-hero { width: min(100%, 1320px); margin-inline: auto; }
.content-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 6vw, 80px); align-items: center; margin-block-start: 34px; }
.content-image { height: clamp(300px, 42vw, 540px); overflow: hidden; border-radius: 20px; background: #eee4dc; }
.content-image img { width: 100%; height: 100%; object-fit: cover; }
.content-copy { color: var(--color-ink-muted); }
.content-copy h2 { color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.4; }
.usage-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-block-start: 40px; }
.usage-step { padding: 20px; border-radius: 16px; background: #f2ece7; }
.usage-step h3 { margin: 0 0 7px; font-family: var(--font-display); }
.usage-step p { margin: 0; color: var(--color-ink-muted); font-size: .9rem; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; margin-block-start: 36px; }
.contact-list { display: grid; gap: 12px; }
.contact-card { display: flex; align-items: start; gap: 14px; padding: 18px; border-radius: 15px; background: #f3ece7; }
.contact-card svg { flex: 0 0 auto; color: #966a70; margin-block-start: 4px; }
.contact-card small { display: block; color: var(--color-ink-muted); }
.contact-photo { height: 100%; min-height: 320px; overflow: hidden; border-radius: 18px 120px 18px 18px; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }

.site-footer { padding: 56px clamp(16px, 5vw, 72px) 22px; color: #f8f0ec; background: #392d32; }
.footer-inner { width: min(100%, 1320px); margin-inline: auto; display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 32px; }
.site-footer .brand-name { color: #fff; }
.site-footer p { max-width: 360px; color: #d6c9c7; font-size: .9rem; }
.footer-links { display: grid; align-content: start; gap: 8px; color: #e7dcda; font-size: .9rem; }
.footer-title { margin: 0 0 8px; color: #fff; font-family: var(--font-display); font-size: 1.1rem; }
.footer-bottom { width: min(100%, 1320px); margin: 38px auto 0; padding-block-start: 14px; border-top: 1px solid rgb(255 255 255 / .16); display: flex; justify-content: space-between; gap: 12px; color: #cbbdbb; font-size: .8rem; }

@keyframes drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.035) translateY(-6px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 960px) {
  .desktop-nav { display: none; }
  .mobile-trigger { display: inline-flex; width: 44px; padding: 0; }
  .mobile-menu { position: absolute; inset-inline: 12px; inset-block-start: calc(100% + 8px); display: grid; gap: 3px; padding: 12px; border: 1px solid var(--color-line); border-radius: 18px; background: #fffdfb; box-shadow: var(--shadow-lg); }
  .mobile-menu a { padding: 9px 12px; border-radius: 10px; color: var(--color-ink-muted); }
  .mobile-menu a:hover { background: #f4eeea; }
  .hero-grid { gap: 25px; }
  .shop-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .header-inner { min-height: 66px; gap: 10px; }
  .brand-name { font-size: 1.05rem; }
  .cart-trigger { width: 44px; padding: 0; }
  .cart-label { display: none; }
  .hero-grid, .story-grid, .feature-grid, .feature-grid.reverse, .content-split, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 24px; }
  .page-hero { padding-block-start: 36px; }
  .hero-title { font-size: clamp(3.2rem, 16vw, 5.2rem); }
  .hero-visual { grid-row: 1; }
  .hero-image-frame { height: min(112vw, 490px); border-radius: 46% 46% 12px 12px; }
  .hero-number { inset-inline-end: 4px; font-size: 6rem; }
  .hero-stamp { inset-inline-start: 0; width: 98px; }
  .section-head, .shop-title-row { align-items: start; flex-direction: column; }
  .category-strip { grid-template-columns: 1fr 1fr; }
  .category-tile:first-child { grid-column: span 2; min-height: 290px; }
  .category-tile { min-height: 210px; }
  .feature-grid.reverse .feature-photo { order: 0; }
  .feature-photo { height: min(108vw, 450px); }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 170px; }
  .gallery-item:first-child { grid-row: span 2; }
  .gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
  .gallery-item:nth-child(3) { grid-column: 2; grid-row: 2; }
  .gallery-item:nth-child(4) { display: none; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-aside { position: static; order: -1; }
  .product-grid { gap: 18px 12px; }
  .product-card-image { height: clamp(160px, 49vw, 260px); }
  .product-card h3 { font-size: .95rem; }
  .product-card p { min-height: 66px; font-size: .78rem; }
  .product-price { font-size: .79rem; }
  .add-button { padding-inline: 9px; font-size: .76rem; }
  .usage-steps { grid-template-columns: 1fr; }
  .contact-photo { min-height: 270px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > :first-child { grid-column: span 2; }
  .footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* SAZITO_PLATFORM_CONTAINER_FIX_SCRUM_4531 */
/* No author .container rule found; Tailwind's built-in .container
   utility never had a phone gutter in EITHER preview or a real build
   (width:100% + breakpoint max-width, no padding/margin, ever) — see
   platformContainerFix.ts for the full mechanism, verified both ways.
   Scoped to @layer components (not unlayered) so a REAL utility class the
   author DID apply — e.g. class="container px-8" — still wins: Tailwind's
   own @layer utilities (publish) and its unlayered runtime injection
   (preview) both outrank @layer components; this default only applies
   when nothing else sets padding/margin at all. */
@layer components {
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 640px) {
    .container {
      padding-inline: 1.5rem;
    }
  }
}