/* =====================================================================
   HASAD — UX layer: clean global-style header, locale menu, sticky
   filters, simple product cards, order bar, quote steps
   ===================================================================== */

/* ---------- header ---------- */
.header .wrap { grid-template-columns: 1fr auto 1fr; }
.h-start { justify-content: flex-start; }
.h-end { gap: 8px; }
.header .logo { justify-self: start; }
.nav { gap: 28px; font-size: 13.5px; }
.nav a { color: var(--ink2); }
.nav a:hover { color: var(--g9); }
.menu-btn { display: none; }
.icon-pill { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--g8); background: rgba(255, 253, 248, .75); border: 1px solid rgba(207, 169, 104, .35); transition: border-color .25s, background .25s; }
.icon-pill:hover { border-color: var(--gold); background: var(--c0); }
.icon-pill .i { font-size: 17px; }

.locale { position: relative; }
.locale-btn { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding-inline: 12px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--g9);
  background: rgba(255, 253, 248, .75); border: 1px solid rgba(207, 169, 104, .35); transition: border-color .25s, background .25s; }
.locale-btn:hover, .locale.open .locale-btn { border-color: var(--gold); background: var(--c0); }
.locale-btn .sep { width: 1px; height: 14px; background: var(--c4); }
.locale-btn .i { font-size: 13px; color: var(--gold-d); transition: transform .3s; }
.locale.open .locale-btn .i { transform: rotate(180deg); }
.locale-pop { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 340px; padding: 16px; border-radius: 20px; background: var(--c0); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(31, 46, 23, .45); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top; pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.22, 1, .36, 1); z-index: 70; }
.locale.open .locale-pop { opacity: 1; transform: none; pointer-events: auto; }
.locale-pop > small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--gold-d); margin: 2px 4px 8px; }
.locale-pop > small:not(:first-child) { margin-top: 16px; }
.lang-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; }
.lang-seg button { height: 38px; }
.cur-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 290px; overflow-y: auto; padding: 2px; }
.cur-grid button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: start; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.cur-grid button span { grid-row: 1 / 3; font-size: 18px; }
.cur-grid button b { font-size: 12.5px; color: var(--g9); }
.cur-grid button small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cur-grid button:hover { background: var(--c1); }
.cur-grid button.active { background: var(--c1); border-color: var(--gold); }

.quote-pill { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 14px 6px; border-radius: 999px; background: var(--g9); color: var(--cream); font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(207, 169, 104, .35); transition: background .25s; }
.quote-pill:hover { background: var(--g8); }
.quote-pill .i { font-size: 16px; color: var(--gold); }
.quote-pill b { min-width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; padding-inline: 7px; background: var(--gold); color: var(--g9); font-size: 12px; }

/* ---------- hero ---------- */
.btn-lg { height: 52px; padding-inline: 28px; font-size: 14.5px; }
.hero-actions .btn-primary .i { font-size: 17px; }
.trust { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12.5px; color: var(--ink2); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust .i { font-size: 16px; color: var(--gold-d); }
.hero-cards { justify-content: space-between; }

/* ---------- shop by category ---------- */
.range-kicker { display: block; margin-top: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
[dir='rtl'] .range-kicker { letter-spacing: .04em; font-size: 13px; }
.range-card h2.lux { margin-top: 6px; }
.vcard { cursor: pointer; }
.vcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vcard-count { display: inline-block !important; font-size: 11px !important; opacity: 1 !important; padding: 3px 10px; border-radius: 99px; background: rgba(207, 169, 104, .25); border: 1px solid rgba(207, 169, 104, .45); color: #f6ecd5; margin: 0 0 8px !important; }
.vcard h3 { font-size: 26px; }
.vcard .circle-btn { transition: background .3s, transform .3s; }
.vcard:hover .circle-btn { background: var(--gold); border-color: var(--gold); color: var(--g9); transform: translateX(calc(var(--dirx) * -4px)); }

/* ---------- sticky filter bar ---------- */
.toolbar { position: sticky; top: 64px; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 -12px 6px; padding: 10px 12px;
  border-radius: 20px; background: rgba(250, 247, 239, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid transparent; transition: box-shadow .3s, border-color .3s; }
.toolbar.stuck { border-color: var(--line); box-shadow: 0 18px 34px -26px rgba(31, 46, 23, .55); }
.toolbar .chips { flex: none; padding: 2px; }
.chip { height: 38px; }
.tb-right { display: flex; gap: 8px; align-items: center; }
.tb-right .search { flex: none; width: 230px; }
.tb-right .search .input { height: 40px; }
.tb-right .select { width: auto; min-width: 0; height: 40px; border-radius: 999px; font-size: 13px; padding-inline: 14px; }
.result-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 2px 18px; min-height: 22px; font-size: 13px; color: var(--muted); }
.link-btn { color: var(--gold-d); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.link-btn:hover { color: var(--g9); }
.more-wrap { display: flex; justify-content: center; margin-top: 30px; }
.more-wrap .btn { min-width: 240px; background: var(--c0); }

/* ---------- simple product card ---------- */
.pcard { cursor: pointer; }
.pcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pcard-img { aspect-ratio: 4 / 3; }
.tag-season { background: var(--g1); color: var(--g7); }
.pcard-body { padding: 14px 16px 16px; gap: 0; }
.pcard-top { align-items: flex-start; }
.pcard-name { min-width: 0; }
.pcard-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.pcard-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--c4); }
.pcard-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); }
.avail { display: inline-flex; align-items: center; gap: 6px; color: var(--g7); font-weight: 500; }
.avail i { width: 7px; height: 7px; border-radius: 50%; background: var(--g5); box-shadow: 0 0 0 3px rgba(110, 142, 83, .18); }
.avail.low { color: #8a5a10; }
.avail.low i { background: var(--amber); box-shadow: 0 0 0 3px rgba(217, 138, 61, .2); }
.pcard-foot { padding-top: 14px; cursor: default; }

/* ---------- order bar ---------- */
.fab { inset-inline: auto; left: 50%; right: auto; bottom: 18px; width: min(580px, calc(100% - 32px)); height: 66px; padding: 9px; padding-inline-start: 10px; gap: 14px; border-radius: 22px;
  transform: translate(-50%, 150%); justify-content: flex-start; }
.fab.show { transform: translate(-50%, 0); }
.fab-ico { position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(207, 169, 104, .16); color: var(--gold); flex: none; }
.fab-ico .i { font-size: 20px; }
.fab-ico b { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding-inline: 5px; border-radius: 99px; display: grid; place-items: center; background: var(--gold); color: var(--g9); font-size: 11px; }
.fab-txt { display: flex; flex-direction: column; text-align: start; line-height: 1.25; min-width: 0; }
.fab-txt small { font-size: 11px; color: rgba(239, 232, 214, .65); white-space: nowrap; }
.fab-txt strong { font-family: 'Readex Pro', sans-serif; font-size: 18px; font-weight: 600; color: #fff; direction: ltr; unicode-bidi: isolate; text-align: start; }
.fab-go { margin-inline-start: auto; height: 48px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 20px; border-radius: 15px; background: var(--cream); color: var(--g9); font-weight: 600; font-size: 13.5px; transition: background .25s; }
.fab:hover .fab-go { background: #fff; }
.fab-go .i { font-size: 16px; }

/* ---------- toast with action ---------- */
.toast { bottom: 100px; max-width: calc(100% - 32px); }
.toast.show { pointer-events: auto; }
.toast > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast button { margin-inline-start: 6px; padding: 6px 14px; border-radius: 99px; background: var(--gold); color: var(--g9); font-size: 12px; font-weight: 700; white-space: nowrap; }
.toast .i { color: var(--gold); flex: none; }

/* ---------- quote steps ---------- */
.q-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 12px; color: var(--muted); }
.q-steps span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.q-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c3); font-size: 11px; color: var(--muted); }
.q-steps b .i { font-size: 13px; }
.q-steps .on { color: var(--g9); font-weight: 600; }
.q-steps .on b { background: var(--g9); color: var(--gold); }
.q-steps .done { color: var(--g7); }
.q-steps .done b { background: var(--g1); color: var(--g7); }
.q-steps i { flex: 1; height: 1px; background: var(--line); min-width: 12px; }
.drawer-head h3 { font-family: var(--lux); font-size: 26px; font-weight: 600; }
[dir='rtl'] .drawer-head h3 { font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 18px; font-size: 13px; }
  .tb-right .search { width: 190px; }
}
@media (max-width: 1100px) {
  .toolbar { grid-template-columns: 1fr; }
  .tb-right .search { flex: 1; width: auto; }
}
@media (max-width: 1020px) {
  .menu-btn { display: grid; }
  .header .wrap { grid-template-columns: auto 1fr; }
}
@media (max-width: 680px) {
  .header .wrap { grid-template-columns: auto 1fr; }
  .header .logo { justify-self: start; }
  .h-end { gap: 6px; }
  .icon-pill { display: none; }
  .qp-label, .locale-btn .sep, #localeLang, .locale-btn .i { display: none; }
  .quote-pill { padding-inline: 10px 5px; gap: 6px; }
  .locale-btn { padding-inline: 10px; }
  .locale-pop { position: fixed; top: 64px; inset-inline: 12px; width: auto; }
  .trust { gap: 8px 16px; font-size: 12px; }
  .hero-actions .btn-lg { width: 100%; }
  .toolbar { position: static; margin: 0 0 6px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .tb-right { flex-wrap: wrap; }
  .tb-right .search { flex: 1 1 100%; }
  .tb-right .select { flex: 1; }
  .fab { bottom: 10px; width: calc(100% - 20px); height: 62px; }
  .fab-txt small { font-size: 10px; }
  .fab-go { padding-inline: 14px; }
  .toast { bottom: 84px; }
  .vcard h3 { font-size: 22px; }
}