@font-face {
      font-family: 'MyCustomFont';
      src: url('../../../fonts/YekanBakh-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    :root{
      --ink:#241B23;
      --ink-soft:#6b5c68;
      --ink-faint:#9c8d97;
      --canvas:#F5F1E9;
      --canvas-alt:#ECE4D6;
      --panel:#FFFFFF;
      --plum:#4A2545;
      --plum-deep:#2A1329;
      --plum-mid:#6b3c63;
      --gold:#B08A4E;
      --gold-soft:#E7D3AD;
      --rose:#B97D8E;
      --teal:#2F5D57;
      --teal-soft:#DCEAE6;
      --line:#DED2BF;
      --line-soft:#EAE1D2;
      --danger:#A23E3E;
      --radius-s:3px;
      --radius-m:8px;
      --shadow-1:0 1px 3px rgba(42,19,41,.08);
      --shadow-2:0 8px 24px rgba(42,19,41,.14);
      --font: 'MyCustomFont', 'Tahoma', 'Segoe UI', sans-serif;
      --toman-color:#6b3c63; --toman-bg:#F7EFF5; --toman-border:#DEC4D9;
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
    body{
      margin:0; font-family:var(--font); background:var(--canvas); color:var(--ink);
      direction:rtl; text-align:right; line-height:1.7; font-size:15.5px;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden; width:100%; max-width:100vw; position:relative;
    }
    img,svg{display:block; max-width:100%;}
    a{color:inherit; text-decoration:none;}
    ul{margin:0; padding:0; list-style:none;}
    button{font-family:inherit; cursor:pointer;}
    h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em;}
    :focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
    .container{max-width:1240px; margin:0 auto; padding:0 28px;}
    @media (max-width:760px){ .container{padding:0 18px;} }

    /* ---------- utility bar ---------- */
    .utility-bar{background:var(--plum-deep); color:#E9DCE7; font-size:12.5px;}
    .utility-bar .container{display:flex; justify-content:space-between; align-items:center; height:36px;}
    .utility-bar .u-links{display:flex; gap:22px;}
    .utility-bar .u-links a:hover{color:var(--gold-soft);}
    .utility-bar .u-badge{display:flex; align-items:center; gap:6px; color:var(--gold-soft);}
    @media (max-width:760px){ .utility-bar .u-links span:nth-child(2){display:none;} }

    /* ---------- header ---------- */
    header.site{background:var(--panel); border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:40;}
    .nav-row{display:flex; align-items:center; gap:32px; height:78px;}
    .brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
    .brand-mark{width:38px; height:38px;}
    .brand-name{font-size:21px; font-weight:800; color:var(--plum-deep); letter-spacing:.01em;}
    .brand-sub{display:block; font-size:10.5px; color:var(--ink-faint); font-weight:400; margin-top:-2px;}
    nav.main-links{display:flex; gap:26px; flex:1;}
    nav.main-links a{font-size:14.5px; color:var(--ink); padding:6px 2px; border-bottom:2px solid transparent; white-space:nowrap;}
    nav.main-links a:hover, nav.main-links a.active{border-bottom-color:var(--gold); color:var(--plum-deep);}
    .nav-actions{display:flex; align-items:center; gap:18px; flex-shrink:0;}
    .search-box{display:flex; align-items:center; background:var(--canvas); border:1px solid var(--line); border-radius:999px; padding:8px 14px; width:220px; gap:8px;}
    .search-box input{border:none; background:none; outline:none; font-family:inherit; font-size:13.5px; width:100%; color:var(--ink);}
    .icon-btn{position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid transparent; background:none;}
    .icon-btn:hover{background:var(--canvas);}
    .icon-btn .badge{position:absolute; top:-2px; left:-2px; background:var(--gold); color:var(--plum-deep); font-size:10px; font-weight:800; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
    .burger{display:none; width:38px; height:38px; border:none; background:none; align-items:center; justify-content:center; flex-shrink:0;}
    @media (max-width:980px){
      nav.main-links{display:none;}
      .search-box{display:none;}
      .burger{display:flex; margin-inline-start:auto;}
    }
    .mobile-drawer{position:fixed; top:0; right:0; bottom:0; left:auto; width:82%; max-width:320px; background:var(--panel); z-index:60; transform:translateX(100%); transition:transform .3s ease, visibility .3s; visibility:hidden; box-shadow:var(--shadow-2); padding:22px; overflow-y:auto;}
    .mobile-drawer.open{transform:translateX(0); visibility:visible;}
    .drawer-backdrop{position:fixed; inset:0; background:rgba(42,19,41,.45); z-index:59; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s;}
    .drawer-backdrop.open{opacity:1; visibility:visible; pointer-events:auto;}
    .mobile-drawer a{display:block; padding:13px 4px; border-bottom:1px solid var(--line-soft); font-size:15px;}
    .mobile-drawer .close-drawer{margin-bottom:14px; background:none; border:none; font-size:22px; color:var(--ink-faint);}

    /* ---------- buttons ---------- */
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:var(--radius-s); font-size:14.5px; font-weight:700; border:1.5px solid transparent; transition:transform .15s ease, background .15s ease, border-color .15s ease;}
    .btn:active{transform:scale(.98);}
    .btn-primary{background:var(--plum-deep); color:#fff;}
    .btn-primary:hover{background:var(--plum);}
    .btn-gold{background:var(--gold); color:var(--plum-deep);}
    .btn-gold:hover{background:#9c7940;}
    .btn-outline{background:none; border-color:var(--plum-deep); color:var(--plum-deep);}
    .btn-outline:hover{background:var(--plum-deep); color:#fff;}
    .btn-ghost{background:none; color:var(--ink); border-color:var(--line);}
    .btn-ghost:hover{border-color:var(--ink);}
    .btn-teal{background:var(--teal); color:#fff;}
    .btn-teal:hover{background:#254b46;}
    .btn-block{width:100%;}
    .btn-sm{padding:9px 16px; font-size:13px;}

    /* ---------- badges / tags ---------- */
    .tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
    .tag-wholesale{background:var(--teal-soft); color:var(--teal);}
    .tag-retail{background:var(--gold-soft); color:#7a5c2c;}
    .tag-sale{background:#F3DCDC; color:var(--danger);}
    .tag-new{background:var(--plum-deep); color:#fff;}

    /* ---------- product/photo frame (real photos, object-fit cover) ---------- */
    .swatch-art{position:relative; width:100%; aspect-ratio:3/4; border-radius:var(--radius-m); overflow:hidden; background:var(--canvas-alt); display:flex; align-items:center; justify-content:center;}
    .swatch-art img{width:100%; height:100%; object-fit:cover; display:block;}

    /* ---------- product card ---------- */
    .p-card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:box-shadow .2s ease, border-color .2s ease;}
    .p-card:hover{box-shadow:var(--shadow-2); border-color:var(--line);}
    .p-card .thumb-wrap{position:relative;}
    .p-card .corner-tag{position:absolute; top:10px; right:10px; z-index:2;}
    .p-card .fav{position:absolute; top:10px; left:10px; z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; border:none;}
    .p-card .body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
    .p-card .cat{font-size:11.5px; color:var(--ink-faint);}
    .p-card .name{font-size:15px; font-weight:700; color:var(--plum-deep);}
    .p-card .swatches{display:flex; gap:6px; margin-top:2px;}
    .swatch-dot{width:16px; height:16px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 0 1px var(--line);}
    .price-row{margin-top:auto; padding-top:10px; border-top:1px dashed var(--line-soft); display:flex; flex-direction:column; gap:3px;}
    .price-line{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--ink-soft);}
    .price-line b{font-size:16.5px; color:var(--plum-deep); font-weight:800;}
    .price-line.wholesale b{color:var(--teal);}
    .price-old{text-decoration:line-through; color:var(--ink-faint); font-size:12px;}

    /* ---------- section titles ---------- */
    .section{padding:64px 0;}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:30px; gap:20px;}
    .section-head h2{font-size:26px; color:var(--plum-deep);}
    .section-head p{margin:6px 0 0; color:var(--ink-soft); font-size:14px;}
    .section-head .see-all{font-size:13.5px; font-weight:700; color:var(--plum); border-bottom:1.5px solid var(--gold); padding-bottom:2px; flex-shrink:0;}
    .section-head-actions{display:flex; align-items:center; gap:16px; flex-shrink:0;}
    .grid{display:grid; gap:22px;}
    .grid-4{grid-template-columns:repeat(4,1fr);}
    .grid-3{grid-template-columns:repeat(3,1fr);}
    .grid-2{grid-template-columns:repeat(2,1fr);}
    @media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
    @media (max-width:560px){ .grid-4,.grid-3,.grid-2{grid-template-columns:repeat(2,1fr); gap:14px;} }

    /* ---------- footer ---------- */
    footer.site{background:var(--plum-deep); color:#E9DEE6; padding-top:56px;}
    footer.site .f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
    footer.site h4{font-size:14px; color:#fff; margin-bottom:16px;}
    footer.site .f-desc{font-size:13px; color:#C8B7C6; line-height:1.9;}
    footer.site ul li{margin-bottom:10px;}
    footer.site ul a{font-size:13.5px; color:#D9C9D6;}
    footer.site ul a:hover{color:var(--gold-soft);}
    .newsletter-row{display:flex; gap:0; margin-top:6px;}
    .newsletter-row input{flex:1; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; padding:11px 14px; border-radius:var(--radius-s) 0 0 var(--radius-s); font-family:inherit; font-size:13px;}
    .newsletter-row input::placeholder{color:#B7A5B5;}
    .newsletter-row button{border-radius:0 var(--radius-s) var(--radius-s) 0;}
    .f-bottom{display:flex; justify-content:space-between; align-items:center; padding:20px 0; font-size:12.5px; color:#B7A5B5; flex-wrap:wrap; gap:10px;}
    .trust-icons{display:flex; gap:10px;}
    .trust-icons span{width:52px; height:32px; border:1px solid rgba(255,255,255,.18); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#C8B7C6;}
    @media (max-width:900px){ footer.site .f-grid{grid-template-columns:1fr 1fr; } }

    /* ---------- breadcrumb ---------- */
    .crumb{padding:16px 0; font-size:13px; color:var(--ink-faint); display:flex; gap:6px; align-items:center;}
    .crumb a:hover{color:var(--plum);}
    .crumb .sep{color:var(--line);}

    /* ---------- misc shared ---------- */
    .stat-strip{display:flex; justify-content:space-between; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:26px 34px; margin-top:-46px; position:relative; z-index:5; box-shadow:var(--shadow-2);}
    .stat-strip .stat{text-align:center;}
    .stat-strip .stat b{display:block; font-size:24px; color:var(--plum-deep);}
    .stat-strip .stat span{font-size:12.5px; color:var(--ink-soft);}
    @media (max-width:760px){ .stat-strip{flex-wrap:wrap; gap:18px; margin-top:20px;} .stat-strip .stat{width:45%;} }

    .price-toggle{display:inline-flex; background:var(--canvas-alt); border-radius:999px; padding:4px; gap:2px;}
    .price-toggle button{border:none; background:none; padding:8px 18px; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink-soft);}
    .price-toggle button.active{background:var(--plum-deep); color:#fff;}

    .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

    /* ---------- number inputs (quantity fields) ---------- */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
    input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

    /* ---------- quantity stepper (shared, used in product + cart) ---------- */
    .qty-stepper{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; background:#fff; transition:border-color .15s ease;}
    .qty-stepper:focus-within{border-color:var(--plum-mid);}
    .qty-stepper button{width:38px; height:40px; background:var(--canvas); border:none; font-size:17px; color:var(--plum-deep); display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;}
    .qty-stepper button:hover{background:var(--plum-deep); color:#fff;}
    .qty-stepper button:active{transform:scale(.94);}
    .qty-stepper input{width:44px; height:40px; text-align:center; border:none; border-inline:1px solid var(--line-soft); font-family:inherit; font-size:14.5px; font-weight:700; color:var(--ink); background:#fff;}
    .qty-stepper input:focus{outline:none;}
    .qty-stepper.sm button{width:30px; height:32px; font-size:14px;}
    .qty-stepper.sm input{width:38px; height:32px; font-size:13px;}

    /* ---------- multi-size bulk quantity grid ---------- */
    .bulk-grid input[type=number]{transition:border-color .15s ease, box-shadow .15s ease;}
    .bulk-grid input[type=number]:focus{outline:none; border-color:var(--plum-mid); box-shadow:0 0 0 3px rgba(74,37,69,.1);}
    @media (max-width:640px){
      .bulk-grid{grid-template-columns:repeat(3,1fr) !important; gap:10px !important;}
    }

    /* ---------- toast notifications (in-page, not browser alerts) ---------- */
    #toastStack{position:fixed; z-index:999; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; gap:10px; width:calc(100% - 32px); max-width:380px; pointer-events:none;}
    .toast{pointer-events:auto; background:var(--plum-deep); color:#fff; border-radius:12px; padding:13px 16px; font-size:13.5px; line-height:1.6; box-shadow:var(--shadow-2); display:flex; align-items:flex-start; gap:10px; opacity:0; transform:translateY(14px); transition:opacity .25s ease, transform .25s ease;}
    .toast.show{opacity:1; transform:translateY(0);}
    .toast .toast-icon{flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px;}
    .toast.toast-success .toast-icon{background:var(--teal);}
    .toast .toast-text{flex:1;}
    @media (max-width:600px){ #toastStack{bottom:calc(14px + env(safe-area-inset-bottom, 0px));} }

    /* ---------- responsive: utility bar / header on very small screens ---------- */
    @media (max-width:420px){
      .utility-bar .u-links span:first-child{font-size:11px;}
      .utility-bar .u-badge{display:none;}
      .brand-sub{display:none;}
      .nav-row{gap:14px;}
    }

    /* ---------- hero ---------- */
    .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px; padding:64px 28px 90px;}
    @media (max-width:760px){
      .hero-grid{grid-template-columns:1fr; padding:40px 18px 46px; gap:0;}
      .hero-art{display:none;}
      .hero-title{font-size:28px !important; max-width:100% !important;}
    }
    @media (max-width:420px){
      .hero-title{font-size:24px !important;}
    }

    /* ---------- responsive: section head with toggle/see-all (e.g. "پرفروش‌ترین‌های فصل") ---------- */
    @media (max-width:640px){
      .section-head{flex-wrap:wrap;}
      .section-head-actions{width:100%; justify-content:space-between; flex-wrap:wrap; gap:10px;}
      .section-head .price-toggle{flex:1;}
      .section-head .price-toggle button{width:50%;}
    }

    /* ---------- close buttons for drawers / off-canvas panels ---------- */
    .close-drawer{margin-bottom:14px; background:none; border:none; font-size:22px; color:var(--ink-faint); cursor:pointer; line-height:1;}

    /* ---------- responsive: footer ---------- */
    @media (max-width:560px){ footer.site .f-grid{grid-template-columns:1fr;} }

    /* ---------- table helpers ---------- */
    .table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

    /* ---------- responsive card-style tables (cart / orders) ---------- */
    @media (max-width:700px){
      .cart-table, .orders-table{width:100%;}
      .cart-table thead, .orders-table thead{display:none;}
      .cart-table, .cart-table tbody, .cart-table tr,
      .orders-table, .orders-table tbody, .orders-table tr{display:block; width:100%;}
      .cart-table tr{border:1px solid var(--line-soft); border-radius:var(--radius-m); margin-bottom:14px; padding:6px 14px; background:var(--panel);}
      .orders-table tr{border-bottom:1px solid var(--line-soft);}
      .cart-table td, .orders-table td{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line-soft); border-top:none !important; text-align:left;}
      .cart-table td:last-child, .orders-table td:last-child{border-bottom:none;}
      .cart-table td::before, .orders-table td::before{content:attr(data-label); font-size:11.5px; color:var(--ink-faint); font-weight:700; flex-shrink:0;}
      .cart-table td .cart-item{width:100%;}
      .orders-table{border:none;}
    }