:root {
      --forest: #2F3A2E;
      --forest-2: #243024;
      --sage: #8C9B7E;
      --mist: #EDEFE6;
      --petal: #E9CFCB;
      --rose: #B65F63;
      --ink: #1D241C;
      --paper: #F8F8F3;
      --head: "Reem Kufi", "Segoe UI", Tahoma, sans-serif;
      --body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    *,
    *::before,
    *::after {
      box-sizing: inherit
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 76px
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--body);
      font-size: 17px;
      line-height: 1.8
    }

    img {
      max-width: 100%;
      display: block
    }

    a { color: inherit }

    :focus-visible {
      outline: 3px solid var(--rose);
      outline-offset: 3px
    }

    .wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 22px
    }

    h1, h2, h3 {
      font-family: var(--head);
      font-weight: 600;
      line-height: 1.35;
      margin: 0
    }

    h2 { font-size: clamp(1.7rem, 4vw, 2.4rem) }

    .dia {
      display: inline-block;
      width: .5em;
      height: .5em;
      background: currentColor;
      transform: rotate(45deg)
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--forest);
      color: var(--mist);
      padding-top: env(safe-area-inset-top, 0px)
    }

    .bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      height: 68px
    }

    .brand img {
      height: 52px;
      width: 52px;
      border-radius: 50%;
      object-fit: cover
    }

    nav { display: flex; gap: 26px }

    nav a { text-decoration: none; font-weight: 500; opacity: .88 }

    nav a:hover { opacity: 1; color: var(--petal) }

    .cartbtn {
      background: var(--petal);
      color: var(--forest);
      border: 0;
      border-radius: 99px;
      padding: 8px 18px;
      font: 600 15px var(--body);
      cursor: pointer
    }

    @media(max-width:760px) { nav { display: none } }

    .hero {
      background: var(--forest);
      color: var(--mist);
      padding: 56px 0 84px;
      position: relative;
      overflow: hidden
    }

    .hero .wrap {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 40px;
      align-items: center
    }

    .hero h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); margin-bottom: 18px }

    .hero p { max-width: 30em; font-size: 1.1rem; opacity: .9; margin: 0 0 30px }

    .btns { display: flex; gap: 12px; flex-wrap: wrap }

    .btn {
      display: inline-block;
      text-decoration: none;
      font: 600 16px var(--body);
      padding: 13px 28px;
      border-radius: 99px;
      border: 2px solid var(--petal);
      cursor: pointer
    }

    .btn.fill { background: var(--petal); color: var(--forest) }

    .btn.line { color: var(--petal); background: transparent }

    .btn:hover { transform: translateY(-2px) }

    .logo-big { width: min(100%, 380px); margin-inline: auto; border-radius: 50% }

    .bar-line {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 10px;
      background: var(--petal)
    }

    @media(max-width:820px) {
      .hero .wrap { grid-template-columns: 1fr }
      .logo-big { width: 230px; order: -1 }
    }

    section { padding: 76px 0 }

    .lead { max-width: 34em; color: #4b5547; margin: 10px 0 0 }

    .rows { margin-top: 36px; border-top: 2px solid var(--forest) }

    .row {
      display: grid;
      grid-template-columns: 70px 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 26px 0;
      border-bottom: 1px solid #cfd4c4;
      text-decoration: none
    }

    .row .dia { color: var(--rose); justify-self: center; width: 18px; height: 18px }

    .row h3 { font-size: 1.6rem; margin-bottom: 2px }

    .row p { margin: 0; color: #4b5547 }

    .row span.go { font-weight: 600; color: var(--forest) }

    .row:hover { background: var(--mist) }

    @media(max-width:600px) {
      .row { grid-template-columns: 40px 1fr }
      .row span.go { display: none }
    }

    #shop { background: var(--mist) }

    .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 30px }

    .tab {
      border: 2px solid var(--forest);
      background: transparent;
      color: var(--forest);
      padding: 7px 22px;
      border-radius: 99px;
      font: 600 15px var(--body);
      cursor: pointer
    }

    .tab[aria-pressed="true"] { background: var(--forest); color: var(--mist) }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
      gap: 22px
    }

    .card {
      background: var(--paper);
      border-radius: 6px 6px 26px 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column
    }

    .thumb { height: 170px; display: grid; place-items: center }

    .thumb svg { width: 92px; height: 92px }

    .card .in {
      padding: 16px 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1
    }

    .card h3 { font-size: 1.15rem }

    .card small { color: #5b6656 }

    .price {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px
    }

    .price b { font-size: 1.15rem }

    .add {
      background: var(--forest);
      color: var(--mist);
      border: 0;
      border-radius: 99px;
      padding: 7px 16px;
      font: 600 14px var(--body);
      cursor: pointer
    }

    .add:hover { background: var(--rose) }

    .t-plant { background: #C9D3BB; color: var(--forest) }

    .t-flower { background: var(--petal); color: var(--rose) }

    .t-gift { background: var(--forest); color: var(--petal) }

    .chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }

    .chips span {
      background: var(--forest);
      color: var(--mist);
      padding: 9px 22px;
      border-radius: 99px;
      font-weight: 500
    }

    .chips span:nth-child(3n+2) { background: var(--petal); color: var(--forest) }

    .chips span:nth-child(3n) { background: #C9D3BB; color: var(--forest) }

    #branches { background: var(--forest); color: var(--mist) }

    #branches .lead { color: #c9d0c0 }

    .br {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 28px;
      margin-top: 34px
    }

    .br div { border-inline-start: 4px solid var(--petal); padding: 4px 20px }

    .br h3 { font-size: 1.35rem }

    .br p { margin: 4px 0; color: #d9ddd0 }

    .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 44px }

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

    form { display: grid; gap: 14px }

    label { display: grid; gap: 4px; font-weight: 500 }

    input, textarea, select {
      font: inherit;
      padding: 11px 14px;
      border: 2px solid #cfd4c4;
      border-radius: 8px;
      background: #fff;
      color: var(--ink)
    }

    textarea { min-height: 110px; resize: vertical }

    footer {
      background: var(--forest-2);
      color: #c9d0c0;
      padding: 28px 0 36px;
      text-align: center;
      font-size: .95rem
    }

    footer img { height: 70px; width: 70px; border-radius: 50%; margin: 0 auto 10px }

    dialog {
      border: 0;
      border-radius: 14px;
      padding: 0;
      width: min(440px, 92vw);
      background: var(--paper);
      color: var(--ink)
    }

    dialog::backdrop { background: rgba(20,28,20,.55) }

    .dh {
      background: var(--forest);
      color: var(--mist);
      padding: 16px 22px;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .dh h3 { font-size: 1.2rem }

    .dh button {
      background: none;
      border: 0;
      color: var(--mist);
      font-size: 26px;
      cursor: pointer;
      line-height: 1
    }

    .db { padding: 18px 22px 22px }

    .li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #dde1d3
    }

    .li button {
      border: 1px solid var(--forest);
      background: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      cursor: pointer;
      color: var(--forest);
      font-size: 16px
    }

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

    .tot {
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      font-size: 1.15rem;
      padding: 16px 0
    }

    .empty { color: #5b6656; text-align: center; padding: 20px 0 }

    @media(prefers-reduced-motion:reduce) {
      html { scroll-behavior: auto }
      .btn:hover { transform: none }
    }

    [hidden] { display: none !important }
    .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
    .skip-link { position: fixed; top: -100px; right: 20px; z-index: 100; background: var(--petal); color: var(--forest); padding: 12px 20px }
    .skip-link:focus { top: 12px }
    .preview-banner { background: #f9eac8; color: #493a1f; padding: 10px 20px; text-align: center; font-size: 14px }
    .preview-banner a { font-weight: 600; margin-inline-start: 12px }
    .header-actions { display: flex; align-items: center; gap: 12px }
    .menu-toggle { display: none; background: transparent; border: 1px solid var(--sage); border-radius: 20px; padding: 6px 15px; color: var(--mist); font: inherit; cursor: pointer }
    .thumb img { width: 100%; height: 100%; object-fit: cover }
    .logo-big { object-fit: contain; height: auto }
    .map-link { color: var(--petal); text-decoration: none }
    .order-button { width: 100% }
    button:disabled { opacity: .5; cursor: not-allowed }
    .hero p, .lead, .row p, .card h3, .br p, footer { overflow-wrap: anywhere }
    .brand img { flex-shrink: 0 }
    @media(max-width:760px) {
      .menu-toggle { display: inline-block }
      #mainNav.is-open { display: flex; position: absolute; top: 68px; inset-inline: 0; flex-direction: column; gap: 0; background: var(--forest-2); box-shadow: 0 12px 18px #0002; padding: 12px 22px }
      #mainNav a { padding: 10px 0 }
      .bar { gap: 10px }
    }