@font-face {
    font-family: 'MyFont';
    src: url('../font/vazir/Vazir-Medium.woff') format('woff'),
      url('../font/vazir/Vazir-Medium.eot') format('embedded-opentype'),
      url('../font/vazir/Vazir-Medium.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --panel: #fff7f0;
    --page-bg: #f5f3f1;
    --card-bg: #ffffff;
    --text-main: #18212f;
    --text-muted: #667085;
    --brand-orange: #ff7a0c;
    --brand-orange-dark: #d95f00;
    --brand-green:#137e20;
    --brand-perple:#004b78;
    --brand-blue:#00618f;
    --border-soft: rgba(17, 24, 39, .10);
    --shadow-soft: 0 14px 35px rgba(16,24,40,.10);
    --shadow-hover: 0 22px 50px rgba(16,24,40,.16);
    --radius-xl: 24px;
    --radius-lg: 18px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: MyFont, Tahoma, Arial, sans-serif;
    min-height: 100vh;
    color: var(--text-main);
    background:
      radial-gradient(circle at top right, rgba(255,122,12,.13), transparent 32%),
      radial-gradient(circle at left 25%, rgba(0,75,120,.09), transparent 28%),
      linear-gradient(180deg, #fffaf5 0%, var(--page-bg) 45%, #eef2f5 100%);
    padding-bottom: 84px;
  }

  a { transition: all .2s ease; }
  a:hover { color: var(--brand-orange-dark); }
  p { margin-bottom: 0; }

  /* Navbar */
  .topbar {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,122,12,.25);
    box-shadow: 0 10px 30px rgba(16,24,40,.08);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    min-height: 76px;
  }

  .topbar .container { position: relative; min-height: 76px; }

  .navbar-toggler {
    border: 1px solid rgba(0,75,120,.18);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(16,24,40,.07);
  }

  .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,122,12,.18); }

  .nav-link {
    color: var(--brand-perple) !important;
    font-weight: 800;
    padding: .65rem 1rem !important;
    border-radius: 999px;
  }

  .nav-link:hover, .nav-link:focus {
    background: rgba(255,122,12,.12);
    color: var(--brand-orange-dark) !important;
  }

  .brand-logo {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 4px solid #fff;
    outline: 4px solid rgba(255,122,12,.85);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 14px;
    z-index: 3;
    box-shadow: 0 14px 32px rgba(0,0,0,.13);
  }

  .brand-logo img { width: 82px; height: 82px; object-fit: contain; }

  .cover-box{
    margin-top: 118px;
    position: relative;
  }

  .cover-box::before {
    content: "به فروشگاه دنسی هوم خوش آمدید";
    display: none;
    max-width: 760px;
    margin: 0 auto 18px;
    padding: 16px 22px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(0,75,120,.95), rgba(0,97,143,.86));
    color: #fff;
    text-align: center;
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 900;
    box-shadow: var(--shadow-soft);
  }

  /* Floating CTA */
  .filter-button, .back-button {
    color: #fff !important;
    text-decoration: none !important;
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 13px 22px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 900;
    border: 0;
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
    box-shadow: 0 16px 32px rgba(255,122,12,.32);
  }
  .filter-button::before { content: "📐"; }
  .back-button { background: linear-gradient(135deg, #00618f, #004b78); }
  .filter-button:hover, .back-button:hover { transform: translateY(-2px); filter: brightness(1.03); }

  /* Summary box */
  .summary {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,122,12,.24);
    border-radius: var(--radius-xl);
    padding: 18px;
    max-width: 760px;
    margin: 22px auto 22px;
    box-shadow: var(--shadow-soft);
  }

  .summary .row>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-weight: 800;
    padding: 0;
  }

  .summary .row>div>div {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--text-muted);
  }

  .summary .val {
    display: block;
    margin-top: 6px;
    font-weight: 900;
    color: var(--brand-perple);
    direction: rtl;
    text-align: right;
    min-width: 90px;
    font-size: 16px;
  }

  /* Product section */
  #productsGrid { row-gap: 12px; }

  .products-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-perple);
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 950;
    margin: 2.1rem 0 1rem;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(0,75,120,.14);
  }
  .products-section-title::after {
    content: "";
    height: 3px;
    flex: 1;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(255,122,12,.0), rgba(255,122,12,.8));
  }

  /* Product card */
  .btn-spec {
    margin-top: auto;
    margin-bottom: 10px;
    font-weight: 300;
    border-radius: var(--radius-xl);
    padding: 0;
    width: 100%;
    align-self: center;
    border: 0;
    text-align: inherit;
  }
  .btn-spec:focus { box-shadow: 0 0 0 .25rem rgba(255,122,12,.20); }

  .p-card {
    background: rgba(255,255,255,.92);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(16,24,40,.08);
    overflow: hidden;
    min-height: 230px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .btn-spec:hover .p-card {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(255,122,12,.45);
  }

  .part { display: none; }
  .improtant-color{
    display: inline-block;
    color: var(--brand-orange-dark);
    background: rgba(255,122,12,.12);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 16px;
    font-weight: 950;
  }

  .p-img-wrap {
    background: linear-gradient(180deg, #fff, #f6f7f9);
    border-radius: 20px;
    border: 1px solid rgba(16,24,40,.08);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 42%;
    min-width: 185px;
    margin: 14px;
  }
  .p-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
  .btn-spec:hover .p-img-wrap img { transform: scale(1.04); }

  .box-title-view {
    text-align: right;
    padding: 18px 18px 18px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 1;
  }

  .p-placeholder { font-weight: 900; font-size: 25px; color: #98a2b3; }
  .p-desc { font-size: clamp(15px, 1.55vw, 21px); color: var(--text-main); font-weight: 950; line-height: 1.75; }
  .p-long-title { color: var(--text-muted); margin-top: 0; font-size: 13px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .p-price-title { font-size: 13px; color: var(--text-muted); line-height: 1.9; }
  .p-price {
    align-self: flex-start;
    text-align: right;
    font-size: 18px;
    margin-top: 4px;
    direction: rtl;
    min-width: 150px;
    color: var(--brand-green);
    background: rgba(19,126,32,.09);
    border: 1px solid rgba(19,126,32,.12);
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: 950;
  }

  /* banners */
  .banner-large, .banner-small { margin: 22px auto 28px; text-align: center; }
  .banner-large img, .banner-small img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255,255,255,.7);
  }
  .banner-large{ display: block; }
  .banner-small{ display: none; }

  /* Samples */
  .samples-section {
    margin: 46px 0 18px;
    padding: 20px;
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(16,24,40,.08);
    box-shadow: var(--shadow-soft);
  }
  .samples-title { font-size: 23px; font-weight: 950; margin-bottom: 15px; color: var(--brand-perple); }
  .samples-scroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; }
  .samples-scroll::-webkit-scrollbar { height: 7px; }
  .samples-scroll::-webkit-scrollbar-thumb { background: rgba(0,75,120,.28); border-radius: 10px; }
  .samples-scroll img { width: 230px; height: 165px; object-fit: cover; border-radius: 18px; scroll-snap-align: start; flex-shrink: 0; box-shadow: 0 10px 22px rgba(0,0,0,0.16); transition: transform .25s, box-shadow .25s; }
  .samples-scroll img:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.20); }
  .samples-scroll img:active { transform: scale(0.98); }
  .classlinklists{ color: var(--brand-perple); text-decoration: none; }
  .classlinklists:hover{ color: var(--brand-perple); }

  .btn-show-more { display: none; }

  /* Modal polish */
  .modal-content { box-shadow: 0 25px 80px rgba(16,24,40,.25); }
  .modal-header.bg-primary { background: linear-gradient(135deg, var(--brand-perple), var(--brand-blue)) !important; }
  .form-control { border-radius: 16px; border: 1px solid rgba(16,24,40,.14); }
  .form-control:focus { border-color: var(--brand-orange); box-shadow: 0 0 0 .25rem rgba(255,122,12,.18); }
  .btn-primary { background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark)); border: 0; border-radius: 16px; font-weight: 900; }

  @media (max-width: 991.98px) {
    body { font-size: 15px; }
    .nav-item-hide{ display: none; }
    .brand-logo { width: 82px; height: 82px; top: 16px; outline-width: 3px; transform: translateX(-50%); }
    .brand-logo img { width: 74px; height: 74px; }
    .cover-box{ margin-top: 108px; }
    .summary { margin-top: 18px; font-size: 12px; }
    .banner-large{ display: none; }
    .banner-small{ display: block; margin: 20px auto; text-align: center; }
    .banner-small img { width: 100% !important; max-width: 430px; }
  }

  @media (max-width: 767px) {
    .topbar { min-height: 68px; }
    .topbar .container { min-height: 68px; }
    .cover-box { margin-top: 100px; }
    .cover-box::before { border-radius: 20px; padding: 14px 16px; }
    .summary .row>div { grid-template-columns: 1fr; }
    .p-card { min-height: 176px; border-radius: 20px; }
    .p-img-wrap { min-width: 128px; width: 38%; margin: 10px; border-radius: 16px; }
    .box-title-view { padding: 12px 12px 12px 4px; gap: 7px; }
    .p-desc { font-size: 13px; line-height: 1.65; }
    .p-long-title { display: none; }
    .p-price-title { font-size: 12px; line-height: 1.7; }
    .improtant-color { font-size: 12px; padding: 1px 7px; }
    .p-price { font-size: 14px; min-width: auto; padding: 7px 10px; }

    .btn-show-more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--brand-perple), var(--brand-blue));
      border: none;
      color: #fff;
      padding: 11px 24px;
      border-radius: 999px;
      margin: 12px auto 30px;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 12px 25px rgba(0,75,120,.20);
    }
    .btn-show-more::after { content: ""; font-size: 18px; line-height: 1; }
    .group-items { overflow: hidden; max-height: 565px; transition: max-height 0.5s ease-in-out; position: relative; }
    .group-items.expanded { max-height: 10000px; }
    .group-items:not(.expanded) { mask-image: linear-gradient(to bottom, black 82%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%); }
  }

  @media (max-width:575.98px) {
    body { padding-bottom: 78px; }
    .filter-button, .back-button {
      width: calc(100% - 22px);
      right: 11px;
      left: 11px;
      text-align: center;
      z-index: 120;
      font-size: 17px;
      bottom: 10px;
      border-radius: 18px;
    }
    .brand-logo { width: 74px; height: 74px; top: 18px; }
    .brand-logo img { width: 66px; height: 66px; }
    .samples-section { padding: 16px 12px; }
    .samples-scroll img { width: 190px; height: 135px; }
  }