:root {
       --primary: #00768f;
       --primary2: #008da8;
       --bg: #f5f6f8;
       --card: #fff;
       --text: #252525;
       --muted: #777;
       --border: #e8e8ee;
       --success: #13a085;
   }

   * {
       box-sizing: border-box
   }

   body {
       margin: 0;
       background: var(--bg);
       color: var(--text);
       font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif
   }

   button,
   input {
       font: inherit
   }

   button {
       cursor: pointer
   }

   .container {
       max-width: 1540px;
       margin: auto;
       padding: 18px
   }

   .topbar {
       background: #fff;
       border-bottom: 1px solid var(--border);
       position: sticky;
       top: 0;
       z-index: 20
   }

   .topbar-promo {
       height: 58px;
       width: 100%;
       max-width: none;
       margin: 0;
       position: relative;
       overflow: hidden;
       background: #00768f
   }

   .topbar-promo img {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       opacity: 1
   }

   .topbar-inner {
       max-width: 1540px;
       margin: auto;
       padding: 10px 36px;
       display: grid;
       grid-template-columns: 220px minmax(260px, 600px) 220px;
       grid-template-areas: "login search logo";
       direction: ltr;
       align-items: center;
       justify-content: space-between;
       gap: 18px;
       min-height: 68px
   }

   .logo {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       gap: 0;
       font-size: 24px;
       font-weight: 900;
       color: #00768f;
       white-space: nowrap
   }

   .logo {
       grid-area: logo;
       justify-self: end
   }

   .topbar-inner>.btn:not(.primary) {
       grid-area: login;
       justify-self: start;
       width: 150px;
       max-width: 150px;
       background: var(--primary);
       color: #fff;
       border-color: var(--primary);
       white-space: nowrap
   }

   .logo img {
       width: 150px;
       height: 44px;
       object-fit: contain
   }

   .logo-tagline {
       font-size: 10px;
       font-weight: 500;
       color: #5f6f78;
       line-height: 1.4;
       white-space: nowrap
   }

   .search {
       grid-area: search;
       max-width: 600px;
       width: 100%;
       margin: auto;
       position: relative
   }

   .search input {
       width: 100%;
       border: 1px solid #e5e5ea;
       border-radius: 9px;
       padding: 13px 18px;
       outline: none;
       background: #fff;
       direction: rtl !important;
       text-align: right !important;
   }

   .btn {
       border: 1px solid var(--border);
       background: #fff;
       border-radius: 9px;
       padding: 11px 17px
   }

   .btn.primary {
       background: var(--primary);
       color: #fff;
       border-color: var(--primary)
   }

   .layout {
       display: grid;
       grid-template-columns: 270px minmax(0, 1fr) 390px;
       gap: 20px;
       align-items: start
   }

   .sidebar,
   .cart,
   .product {
       background: var(--card);
       border: 1px solid var(--border);
       border-radius: 18px
   }

   .sidebar {
       padding: 20px;
       position: sticky;
       top: 90px
   }

   .cart {
       padding: 20px;
       position: sticky;
       top: 90px;
       min-height: 350px
   }

   .side-title {
       font-weight: 800;
       margin: 0 0 18px
   }

   .chips {
       display: flex;
       flex-wrap: wrap;
       gap: 8px
   }

   .brand-icons {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin: -4px 0 20px
   }

   .brand-icon-btn {
       width: 46px;
       height: 46px;
       padding: 7px;
       border: 1px solid var(--border);
       background: #fff;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center
   }

   .brand-icon-btn.active {
       border-color: var(--primary);
       background: #e6f5f8
   }

   .brand-icon-btn img {
       width: 30px;
       height: 30px;
       object-fit: contain
   }

   .chip {
       border: 1px solid #ddd;
       background: #fff;
       border-radius: 8px;
       padding: 8px 11px;
       display: inline-flex;
       align-items: center;
       gap: 6px
   }

   .chip-icon {
       width: 22px;
       height: 22px;
       object-fit: contain;
       vertical-align: middle
   }

   .chip-icon-text {
       font-size: 18px;
       line-height: 1
   }

   .chip.active {
       border-color: var(--primary);
       color: var(--primary);
       background: #e6f5f8
   }

   .switch-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 15px 0;
       border-bottom: 1px solid #eee
   }

   .switch {
       width: 43px;
       height: 24px;
       background: #aaa;
       border-radius: 20px;
       padding: 3px
   }

   .switch i {
       display: block;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: #fff;
       transition: .2s
   }

   .switch.on {
       background: #00768f
   }

   .switch.on i {
       transform: translateX(-19px)
   }

   .toolbar {
       background: #fff;
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 12px;
       display: flex;
       gap: 10px;
       align-items: center;
       margin-bottom: 14px
   }

   .category-toolbar {
       width: 100%;
       border-radius: 0;
       margin: 0 0 18px;
       padding: 10px 18px
   }

   .hero-slider {
       width: 100%;
       height: 300px;
       margin: 0 0 14px;
       position: relative;
       overflow: hidden;
       border-radius: 0;
       background: #eef3f5;
       box-shadow: 0 8px 22px #00768f1c
   }

   .hero-slide {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       opacity: 0;
       transition: opacity .5s ease
   }

   .hero-slide.active {
       opacity: 1
   }

   .slider-nav {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 12px;
       pointer-events: none
   }

   .slider-arrow {
       pointer-events: auto;
       width: 34px;
       height: 34px;
       border: 0;
       border-radius: 50%;
       background: #ffffffd9;
       color: #00768f;
       font-size: 24px;
       line-height: 1
   }

   .slider-dots {
       position: absolute;
       bottom: 10px;
       left: 0;
       right: 0;
       display: flex;
       justify-content: center;
       gap: 7px
   }

   .slider-dot {
       width: 8px;
       height: 8px;
       padding: 0;
       border: 0;
       border-radius: 50%;
       background: #ffffffaa
   }

   .slider-dot.active {
       width: 22px;
       border-radius: 8px;
       background: #00768f
   }

   .promo-banner {
       height: 200px;
       border-radius: 18px;
       overflow: hidden;
       margin-bottom: 14px;
       background: linear-gradient(120deg, #00596b, #00768f, #008da8);
       box-shadow: 0 10px 24px #00768f33;
       position: relative;
       color: #fff;
       padding: 28px 34px
   }

   .promo-banner img {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       opacity: .04
   }

   .promo-copy {
       position: relative;
       display: flex;
       flex-direction: column;
       gap: 8px;
       max-width: 480px
   }

   .promo-copy span {
       color: #ffd166;
       font-weight: 700
   }

   .promo-copy strong {
       font-size: 28px
   }

   .promo-copy small {
       opacity: .85
   }

   .categories {
       display: flex;
       gap: 18px;
       overflow: auto;
       flex: 1
   }

   .category-chip {
       position: relative;
       min-width: 96px;
       width: 96px;
       min-height: 94px;
       height: 94px;
       padding: 8px 4px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       background: transparent;
       border: 1px solid transparent;
       border-radius: 16px;
       outline: none;
       cursor: pointer;
       gap: 6px;
       transition: all 0.25s ease;
       box-shadow: none;
   }

   .category-chip .chip-icon-wrap {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.25s ease;
   }

   .category-chip .chip-icon {
       width: 44px;
       height: 44px;
       display: block;
       object-fit: contain;
       transition: all 0.25s ease;
       filter: none;
   }

   .category-chip .chip-icon-text {
       font-size: 28px;
       line-height: 1;
       color: #00768f;
       transition: all 0.25s ease;
   }

   .category-chip span {
       font-size: 11px;
       font-weight: 600;
       color: #17324d;
       white-space: nowrap;
       transition: all 0.25s ease;
   }

   /* Active / Selected Category State: Green Fill + White Icon & White Text */
   .category-chip.active {
       background: #00768f !important;
       border-color: #00768f !important;
       border-radius: 16px !important;
       box-shadow: 0 4px 14px rgba(0, 118, 143, 0.35) !important;
       transform: translateY(-2px);
   }

   .category-chip.active .chip-icon-wrap {
       background: transparent !important;
       border: 0 !important;
   }

   .category-chip.active .chip-icon {
       filter: brightness(0) invert(1) !important;
       /* Turns cyan/green SVG vectors to solid crisp WHITE */
   }

   .category-chip.active .chip-icon-text {
       color: #ffffff !important;
   }

   .category-chip.active span {
       color: #ffffff !important;
       font-weight: 700 !important;
   }

   .category-chip:hover:not(.active) {
       background: #f0f7f9;
       border-color: #d0e7ed;
       border-radius: 16px;
   }







   .products {
       display: flex;
       flex-direction: column;
       gap: 18px
   }

   .product {
       padding: 15px
   }

   .product-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 15px;
       position: relative;
       padding-bottom: 8px;
   }

   .product-title {
       font-size: 17px;
       font-weight: 700;
       flex: 1;
   }

   .thumb-box {
       width: 220px !important;
       height: 220px !important;
       min-width: 220px !important;
       min-height: 220px !important;
       flex-shrink: 0 !important;
       position: relative;
       z-index: 2;
       overflow: visible !important;
   }

   .product-thumb {
       width: 220px !important;
       height: 220px !important;
       border-radius: 16px !important;
       object-fit: contain !important;
       background: #ffffff !important;
       border: 1.5px solid #d5e1ea !important;
       padding: 6px !important;
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
       transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
       cursor: zoom-in !important;
       display: block !important;
       position: relative !important;
       z-index: 2 !important;
   }

   .product-thumb:hover {
       transform: scale(1.6) !important;
       z-index: 9999 !important;
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32) !important;
       border-color: #00768f !important;
       background: #ffffff !important;
   }

   .variant-head {
       margin-top: 12px;
       border: 1px solid var(--border);
       border-bottom: 0;
       border-radius: 12px 12px 0 0;
       padding: 15px;
       font-weight: 800
   }

   .variant {
       width: calc(100% - 150px) !important;
       margin-left: auto !important;
       margin-right: 0 !important;
       border: 1px solid #dce5ec !important;
       border-radius: 12px !important;
       margin-top: 10px !important;
       padding: 12px 18px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: flex-start !important;
       gap: 32px !important;
       position: relative;
       background: #fafcfd !important;
   }

   .variant:last-child {
       border-radius: 12px !important;
   }

   .variant-info {
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .color-title {
       font-weight: 700;
       font-size: 15px;
       display: flex;
       align-items: center;
   }

   .price {
       font-weight: 900;
       font-size: 16px;
       white-space: nowrap;
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       gap: 2px;
       margin: 0 !important;
   }

   .current-price {
       font-size: 16px;
       font-weight: 900;
       color: #17324d;
   }

   .add {
       width: 38px;
       height: 38px;
       border-radius: 50%;
       border: 1px solid #66b8c7;
       background: #e6f5f8;
       color: var(--primary);
       font-size: 24px;
       flex-shrink: 0;
       margin-left: auto;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 0.2s ease, background 0.2s ease;
   }

   .add:hover {
       background: #00768f;
       color: #ffffff;
       border-color: #00768f;
       transform: scale(1.08);
   }

   .color-dot {
       width: 17px;
       height: 17px;
       border-radius: 50%;
       display: inline-block;
       border: 1px solid #bbb;
       vertical-align: middle;
       margin-left: 7px
   }

   .meta {
       color: #777;
       font-size: 12px;
       display: flex;
       gap: 14px;
       flex-wrap: wrap
   }




   .old {
       text-decoration: line-through;
       color: #999;
       font-size: 12px;
       margin-left: 7px
   }

   .discount {
       background: #e53935;
       color: #fff;
       border-radius: 10px;
       padding: 3px 7px;
       font-size: 11px
   }

   .cart-empty {
       text-align: center;
       color: #aaa;
       padding: 100px 10px
   }

   .cart-item {
       border-bottom: 1px solid #eee;
       padding: 12px 0
   }

   .qty {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-top: 7px
   }

   .qty button {
       border: 1px solid #ddd;
       background: #fff;
       border-radius: 6px;
       width: 27px;
       height: 27px
   }

   .total {
       display: flex;
       justify-content: space-between;
       font-weight: 900;
       font-size: 18px;
       padding-top: 18px
   }

   .checkout {
       width: 100%;
       margin-top: 15px;
       padding: 14px
   }

   .loading {
       text-align: center;
       padding: 60px;
       color: #777
   }

   .modal {
       display: none;
       position: fixed;
       inset: 0;
       background: #0006;
       z-index: 50;
       align-items: center;
       justify-content: center;
       padding: 20px
   }

   .modal.open {
       display: flex
   }

   .modal-box {
       background: #fff;
       border-radius: 18px;
       padding: 22px;
       max-width: 500px;
       width: 100%
   }

   .modal-box input,
   .modal-box textarea {
       width: 100%;
       margin: 7px 0;
       padding: 12px;
       border: 1px solid #ddd;
       border-radius: 9px
   }

   .form-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0 10px
   }

   .form-grid .full {
       grid-column: 1/-1
   }

   /* ---------- OTP login / registration ---------- */

   .auth-box {
       position: relative;
       max-width: 460px
   }

   .auth-box h3 {
       margin: 0 0 8px
   }

   .auth-close {
       position: absolute;
       top: 12px;
       left: 14px;
       width: 32px;
       height: 32px;
       border: 0;
       border-radius: 50%;
       background: #f1f5f7;
       color: #56707a;
       font-size: 20px;
       line-height: 1
   }

   .auth-close:hover {
       background: #e2ebef
   }

   .auth-hint {
       margin: 0 0 12px;
       color: var(--muted);
       font-size: 13px;
       line-height: 1.9
   }

   .link-btn {
       border: 0;
       background: none;
       padding: 0;
       color: var(--primary);
       font-weight: 700;
       font-size: 13px;
       text-decoration: underline;
       text-underline-offset: 4px
   }

   .ltr-field {
       direction: ltr;
       text-align: left
   }

   .ltr-inline {
       direction: ltr;
       display: inline-block;
       unicode-bidi: isolate
   }

   .otp-field {
       text-align: center !important;
       letter-spacing: 12px;
       font-size: 22px;
       font-weight: 800
   }

   .modal-box input.invalid,
   .modal-box textarea.invalid {
       border-color: #e53935;
       background: #fff7f7
   }

   .auth-msg {
       min-height: 18px;
       font-size: 13px;
       line-height: 1.7;
       margin: 4px 2px 0
   }

   .auth-msg.error {
       color: #d32f2f
   }

   .auth-msg.ok {
       color: var(--success)
   }

   .auth-phone-chip {
       background: #e6f5f8;
       border: 1px solid #bfe2ea;
       border-radius: 9px;
       padding: 9px 12px;
       margin-bottom: 10px;
       font-size: 13px;
       color: #0d5a6b
   }

   .account-card {
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 4px 14px;
       margin-top: 6px
   }

   .account-status {
       margin: 12px 0 4px;
       font-size: 13px;
       font-weight: 700
   }

   .account-status.active {
       color: var(--success)
   }

   .account-status.pending {
       color: #c2410c
   }

   .account-row {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
       gap: 14px;
       padding: 10px 0;
       border-top: 1px solid #f0f2f5;
       font-size: 13px
   }

   .account-row span {
       color: var(--muted);
       flex-shrink: 0
   }

   .account-row b {
       text-align: left
   }

   .profile-notice {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
       gap: 14px;
       background: #fff4e5;
       border-bottom: 1px solid #f5d9b0;
       color: #8a5300;
       padding: 11px 18px;
       font-size: 13px;
       font-weight: 600
   }

   .profile-notice[hidden] {
       display: none
   }

   .profile-notice .btn {
       background: #b45309;
       border-color: #b45309;
       color: #fff;
       padding: 7px 15px;
       font-size: 13px
   }

   #toastBox {
       position: fixed;
       bottom: 22px;
       left: 22px;
       z-index: 80;
       display: flex;
       flex-direction: column;
       gap: 9px
   }

   .toast {
       background: #17324d;
       color: #fff;
       border-radius: 11px;
       padding: 13px 18px;
       font-size: 13.5px;
       max-width: 340px;
       box-shadow: 0 10px 26px #0000002e;
       animation: toast-in .25s ease
   }

   .toast.error {
       background: #c62828
   }

   @keyframes toast-in {
       from {
           opacity: 0;
           transform: translateY(10px)
       }
   }

   .site-footer {
       margin-top: 28px;
       background: #073f4b;
       color: #fff;
       padding: 30px 6%;
       display: grid;
       grid-template-columns: 1.2fr 1fr 1.8fr 180px;
       gap: 28px;
       align-items: start
   }

   .footer-title {
       margin: 0 0 14px;
       font-size: 18px
   }

   .footer-text {
       margin: 7px 0;
       color: #d9edf0;
       line-height: 1.9;
       font-size: 14px
   }

   .footer-benefits .footer-text {
       display: flex;
       align-items: flex-start;
       gap: 6px;
       font-size: 13px;
       line-height: 1.8
   }

   .footer-benefits strong {
       color: #fff
   }

   .footer-logo img {
       width: 150px;
       height: auto;
       filter: brightness(0) invert(1);
       opacity: .95
   }

   .enamad-box {
       height: 115px;
       border: 1px dashed #8bc4cc;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #d9edf0;
       font-size: 13px;
       text-align: center;
       padding: 10px
   }

   @media(max-width:760px) {
       .site-footer {
           grid-template-columns: 1fr;
           text-align: center
       }

       .footer-benefits {
           text-align: right;
           max-width: 460px;
           margin: auto
       }

       .footer-logo img {
           margin: auto
       }

       .enamad-box {
           max-width: 180px;
           margin: auto
       }
   }

   @media(max-width:1150px) {
       .layout {
           grid-template-columns: 230px minmax(0, 1fr)
       }

       .cart {
           grid-column: 1/-1;
           position: static
       }

       .cart-empty {
           padding: 35px
       }
   }

   @media(max-width:760px) {
       .layout {
           grid-template-columns: 1fr
       }

       .sidebar {
           position: static
       }

       .topbar-inner {
           grid-template-columns: 1fr auto;
           grid-template-areas: "login logo" "search search";
           gap: 10px;
           padding: 10px 12px
       }

       .logo {
           justify-self: end
       }

       .logo img {
           width: 128px;
           height: 38px
       }

       .logo-tagline {
           font-size: 8px
       }

       .topbar-inner>.btn:not(.primary) {
           width: 132px;
           max-width: 132px
       }

       .search {
           max-width: none
       }

       .variant {
           grid-template-columns: 45px 1fr
       }

       .variant .price {
           grid-column: 2
       }

       .categories {
           order: 2
       }

       .toolbar {
           flex-wrap: wrap
       }
   }

   @media(max-width:760px) {
       .hero-slider {
           height: 170px
       }

       .categories {
           gap: 12px
       }

       .category-chip {
           min-width: 92px;
           width: 92px;
           min-height: 84px;
           height: 84px
       }

       .category-chip .chip-icon {
           width: 50px;
           height: 50px
       }

       .category-chip>span:not(.chip-icon-text) {
           font-size: 9px
       }
   }