/* App Marketplace v4 — HostGraber Dark #00FF41
   NO external font imports — uses WordPress/system stack
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --hg-acc:   #00FF41;
  --hg-acc-d: rgba(0,255,65,.1);
  --hg-acc-g: 0 0 22px rgba(0,255,65,.4);
  --hg-acc-b: rgba(0,255,65,.22);
  --hg-bg:    #070707;
  --hg-c1:    #0d0d0d;
  --hg-c2:    #131313;
  --hg-bdr:   #1e1e1e;
  --hg-txt:   #cccccc;
  --hg-mut:   #555555;
  --hg-dim:   #888888;
  --hg-r:     12px;
  --hg-t:     .18s cubic-bezier(.4,0,.2,1);
  /* System font stack — NO Google Fonts */
  --hg-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --hg-mono: ui-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
}

.hg-wrap { font-family:var(--hg-font); color:var(--hg-txt); background:var(--hg-bg); padding:28px 28px 36px; border-radius:16px; position:relative; }
.hg-wrap * { box-sizing:border-box; }
.hg-error-msg { background:rgba(255,60,60,.08); border:1px solid rgba(255,60,60,.25); border-radius:var(--hg-r); padding:18px 22px; color:#ff6464; display:flex; align-items:center; gap:10px; font-size:14px; }

/* ── Header ─────────────────────────────────────────────────── */
.hg-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--hg-bdr); margin-bottom:22px; flex-wrap:wrap; }
.hg-header-title { font-size:clamp(20px,3.5vw,30px); font-weight:800; letter-spacing:-.025em; line-height:1.15; color:#fff; margin:0 0 6px; background:linear-gradient(130deg,#fff 55%,var(--hg-acc)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hg-header-sub { font-size:14px; color:var(--hg-mut); margin:0 0 10px; max-width:520px; line-height:1.6; }
.hg-header-stats { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--hg-mut); }
.hg-header-stats strong { color:var(--hg-acc); font-family:var(--hg-mono); font-size:14px; }
.hg-stat-dot { color:#2a2a2a; }

/* ── Currency Toggle ────────────────────────────────────────── */
.hg-currency-toggle { display:flex; align-items:center; gap:10px; flex-shrink:0; background:#101010; border:1px solid var(--hg-bdr); border-radius:100px; padding:7px 14px; }
.hg-tog-lbl { font-size:12px; font-weight:700; cursor:pointer; color:var(--hg-mut); transition:color var(--hg-t); letter-spacing:.06em; user-select:none; }
.hg-tog-lbl.is-active { color:#fff; }
.hg-tog-track { position:relative; width:44px; height:24px; border-radius:100px; cursor:pointer; transition:background var(--hg-t); flex-shrink:0; background:#1e1e1e; }
.hg-tog-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4); transition:transform var(--hg-t); }
.hg-tog-track.is-right .hg-tog-knob { transform:translateX(20px); }

/* ── Toolbar ─────────────────────────────────────────────────── */
.hg-toolbar { display:flex; gap:10px; margin-bottom:16px; align-items:stretch; }
.hg-search-box-wrap { flex:1; min-width:0; }
.hg-search-box {
  position: relative;
}

/* ICON */
.hg-search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2; /* 🔥 keep above input */
}

/* INPUT */
.hg-search {
  width: 100%;
  height: 47px !important;

  padding-left: 50px !important; /* 🔥 force override */
  padding-right: 40px;

  background: #111;
  border: 1.5px solid var(--hg-bdr);
  border-radius: 10px;

  position: relative;
  z-index: 1;
}
.hg-search:focus { border-color:var(--hg-acc); box-shadow:0 0 0 3px var(--hg-acc-d); background:#141414; }
.hg-search::placeholder { color:var(--hg-mut); }
.hg-search-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:22px; height:22px; background:transparent; border:none; cursor:pointer; color:var(--hg-mut); padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all var(--hg-t); }
.hg-search-clear:hover { color:#fff; background:rgba(255,255,255,.1); }
.hg-search-clear svg { width:13px; height:13px; }
.hg-sort-wrap { flex-shrink:0; }
.hg-sort { height:100%; min-height:44px; background:#111; border:1.5px solid var(--hg-bdr); border-radius:10px; padding:10px 32px 10px 14px; color:var(--hg-txt); font-size:13px; font-family:var(--hg-font); outline:none; cursor:pointer; transition:border-color var(--hg-t); -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.hg-sort:focus { border-color:var(--hg-acc); }
.hg-sort option { background:#141414; }

/* ── Billing Cycle Selector ─────────────────────────────────── */
.hg-cycle-switcher { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; align-items:center; }
.hg-cycle-switcher:not(:empty)::before { content:'Billing:'; font-size:11px; font-weight:700; color:var(--hg-mut); text-transform:uppercase; letter-spacing:.09em; margin-right:2px; flex-shrink:0; }
.hg-cycle-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; background:#111; border:1.5px solid var(--hg-bdr); border-radius:50px; color:var(--hg-mut); font-size:12px; font-weight:600; font-family:var(--hg-font); cursor:pointer; transition:all var(--hg-t); white-space:nowrap; }
.hg-cycle-chip:hover { border-color:var(--hg-acc-b); color:#ccc; }
.hg-cycle-chip.is-active { background:var(--hg-acc-d); border-color:var(--hg-acc); color:var(--hg-acc); font-weight:700; box-shadow:0 0 10px rgba(0,255,65,.12); }
.hg-cycle-save-pill { background:var(--hg-acc); color:#000; font-size:9px; font-weight:900; padding:1px 6px; border-radius:50px; letter-spacing:.03em; }

/* ── Filters ─────────────────────────────────────────────────── */
.hg-filters { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
.hg-filter-btn { display:inline-flex; align-items:center; gap:6px; background:#111; border:1.5px solid var(--hg-bdr); border-radius:100px; padding:7px 16px; color:var(--hg-mut); font-size:12px; font-weight:600; font-family:var(--hg-font); cursor:pointer; transition:all var(--hg-t); white-space:nowrap; }
.hg-filter-btn:hover { border-color:var(--hg-acc-b); color:#ccc; }
.hg-filter-btn.is-active { background:var(--hg-acc-d); border-color:var(--hg-acc); color:var(--hg-acc); font-weight:700; }
.hg-filter-ico { font-size:1em; line-height:1; }
.hg-filter-count { background:rgba(255,255,255,.07); border-radius:100px; padding:1px 7px; font-size:10px; font-family:var(--hg-mono); min-width:18px; text-align:center; }
.hg-filter-btn.is-active .hg-filter-count { background:rgba(0,255,65,.2); color:var(--hg-acc); }

/* ── Grid & Card ─────────────────────────────────────────────── */
.hg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hg-grid[data-layout="list"] { grid-template-columns:1fr; }
.hg-card { background:var(--hg-c1); border:1px solid var(--hg-bdr); border-radius:var(--hg-r); display:flex; flex-direction:column; overflow:hidden; position:relative; transition:border-color var(--hg-t),transform var(--hg-t),box-shadow var(--hg-t),background var(--hg-t); animation:hgFadeUp .35s ease both; }
@keyframes hgFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.hg-card::before { content:''; position:absolute; left:0; top:0; width:2px; height:100%; background:var(--hg-bdr); transition:background var(--hg-t),box-shadow var(--hg-t); z-index:1; }
.hg-hover-glow .hg-card:hover { background:var(--hg-c2); border-color:rgba(0,255,65,.22); transform:translateY(-4px); box-shadow:0 0 28px rgba(0,255,65,.07),0 12px 40px rgba(0,0,0,.6); }
.hg-hover-glow .hg-card:hover::before { background:var(--hg-acc); box-shadow:var(--hg-acc-g); }
.hg-hover-lift .hg-card:hover { transform:translateY(-8px); box-shadow:0 24px 56px rgba(0,0,0,.7); }
.hg-hover-border .hg-card:hover { border-color:var(--hg-acc); }
.hg-card.is-featured { border-color:rgba(0,255,65,.22); background:#0a110b; }
.hg-card.is-featured::before { background:var(--hg-acc); box-shadow:0 0 12px rgba(0,255,65,.35); }
.hg-card.is-popular { border-color:rgba(255,160,0,.22); }

/* Badges */
.hg-discount-badge { position:absolute; top:12px; right:12px; background:var(--hg-acc); color:#000; font-size:10px; font-weight:900; letter-spacing:.04em; padding:3px 8px; border-radius:6px; z-index:4; }
.hg-ribbon { position:absolute; top:16px; right:-28px; background:#ffa500; color:#000; font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; padding:5px 38px; transform:rotate(45deg); z-index:3; white-space:nowrap; }
.hg-badge { position:absolute; top:12px; left:14px; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:100px; padding:3px 9px; z-index:2; }
.hg-badge-feat { background:rgba(0,255,65,.12); color:var(--hg-acc); border:1px solid rgba(0,255,65,.3); }
.hg-badge-new  { background:rgba(80,180,255,.1); color:#50b4ff; border:1px solid rgba(80,180,255,.25); }
.hg-badge-hot,.hg-badge-popular { background:rgba(255,140,0,.1); color:#ffa040; border:1px solid rgba(255,140,0,.25); }
.hg-badge-sale { background:rgba(255,60,120,.1); color:#ff3c78; border:1px solid rgba(255,60,120,.25); }
.hg-badge-custom { border:1px solid var(--hg-acc); color:var(--hg-acc); background:var(--hg-acc-d); }

/* Card sections */
.hg-card-img { height:160px; background-size:cover; background-position:center; position:relative; flex-shrink:0; }
.hg-img-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.9)); }
.hg-card-body { padding:18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.hg-card-top { display:flex; align-items:center; gap:12px; }
.hg-icon-wrap { flex-shrink:0; }
.hg-app-icon { width:52px; height:52px; border-radius:11px; object-fit:cover; border:1px solid var(--hg-bdr); background:#111; display:block; }
.hg-icon-fallback { width:52px; height:52px; border-radius:11px; background:linear-gradient(135deg,#0e1d10,#102514); border:1px solid rgba(0,255,65,.2); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:var(--hg-acc); letter-spacing:.04em; }
.hg-card-title { font-size:14px; font-weight:700; color:#fff; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.hg-ver { display:block; font-size:10px; color:var(--hg-mut); font-family:var(--hg-mono); margin-bottom:3px; }
.hg-cat-tag { font-size:10px; color:var(--hg-acc); background:var(--hg-acc-d); border:1px solid rgba(0,255,65,.2); border-radius:4px; padding:2px 6px; display:inline-block; font-weight:600; }
.hg-custom-html { font-size:12.5px; color:var(--hg-mut); line-height:1.65; }
.hg-custom-html a { color:var(--hg-acc); }
.hg-custom-html strong { color:#fff; }
.hg-card-desc { font-size:12.5px; color:var(--hg-mut); line-height:1.65; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hg-card-desc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.hg-card-desc-list li { font-size:12px; color:var(--hg-mut); line-height:1.55; }
.hg-specs { display:flex; flex-wrap:wrap; gap:5px; }
.hg-spec { display:inline-flex; align-items:center; gap:4px; background:#111; border:1px solid var(--hg-bdr); border-radius:5px; padding:3px 8px; font-size:11px; color:var(--hg-dim); font-family:var(--hg-mono); }
.hg-spec-ico { font-size:10px; }
.hg-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.hg-features li { font-size:12px; color:var(--hg-dim); display:flex; align-items:flex-start; gap:6px; line-height:1.5; }
.hg-chk { color:var(--hg-acc); font-weight:700; font-size:11px; flex-shrink:0; margin-top:1px; }
.hg-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 18px; border-top:1px solid var(--hg-bdr); flex-wrap:wrap; background:rgba(0,0,0,.2); }
.hg-pricing { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.hg-price-row { display:flex; align-items:baseline; gap:2px; }
.hg-price-sym { font-size:13px; color:var(--hg-acc); font-family:var(--hg-mono); font-weight:600; }
.hg-price { font-size:22px; font-weight:700; color:var(--hg-acc); font-family:var(--hg-mono); line-height:1; transition:all .22s; }
.hg-price-per { font-size:11px; color:var(--hg-mut); margin-left:1px; }
.hg-price-cycle { font-size:11px; color:var(--hg-mut); }
.hg-deploys { font-size:11px; color:var(--hg-mut); }

/* Deploy button */
.hg-btn { display:inline-flex; align-items:center; gap:6px; background:var(--hg-acc); color:#000; font-family:var(--hg-font); font-size:12px; font-weight:800; text-decoration:none; border-radius:8px; padding:10px 18px; letter-spacing:.02em; transition:all var(--hg-t); border:none; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.hg-btn:hover { filter:brightness(1.1); box-shadow:var(--hg-acc-g); transform:translateX(2px); color:#000; }
.hg-btn-arr { width:14px; height:14px; transition:transform var(--hg-t); }
.hg-btn:hover .hg-btn-arr { transform:translateX(4px); }

/* List layout */
.hg-grid[data-layout="list"] .hg-card { flex-direction:row; flex-wrap:wrap; }
.hg-grid[data-layout="list"] .hg-card-img { width:200px; height:auto; flex-shrink:0; }
.hg-grid[data-layout="list"] .hg-card-body { flex:1; flex-direction:row; flex-wrap:wrap; align-items:center; }
.hg-grid[data-layout="list"] .hg-card-top { flex:0 0 220px; }
.hg-grid[data-layout="list"] .hg-card-footer { width:100%; }

/* Empty / pagination */
.hg-empty { text-align:center; padding:60px 20px; }
.hg-empty-ico { font-size:44px; margin-bottom:14px; opacity:.35; }
.hg-empty p { color:var(--hg-mut); font-size:14px; }
.hg-pagination { display:flex; justify-content:center; gap:6px; margin-top:28px; flex-wrap:wrap; }
.hg-page-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#111; border:1.5px solid var(--hg-bdr); border-radius:8px; color:var(--hg-mut); font-size:13px; font-family:var(--hg-mono); cursor:pointer; transition:all var(--hg-t); }
.hg-page-btn:hover,.hg-page-btn.is-active { background:var(--hg-acc-d); border-color:var(--hg-acc); color:var(--hg-acc); }
.hg-card.hg-hidden { display:none !important; }

/* ════════════════════════════════════════════════════════════
   CONFIGURATOR MODAL
   ════════════════════════════════════════════════════════════ */
.hg-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:999999; display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:hgFadeIn .18s ease; }
@keyframes hgFadeIn { from{opacity:0} to{opacity:1} }
.hg-modal-inner { background:#0d0d0d; border:1px solid rgba(0,255,65,.18); border-radius:16px; width:100%; max-width:75%; max-height:80%; overflow-y:auto; position:relative; animation:hgSlideUp .22s ease; scrollbar-width:thin; scrollbar-color:#222 transparent; }
.hg-modal-inner::-webkit-scrollbar { width:4px; }
.hg-modal-inner::-webkit-scrollbar-thumb { background:#222; border-radius:4px; }
@keyframes hgSlideUp { from{transform:translateY(18px);opacity:0} to{transform:none;opacity:1} }
.hg-modal-close { position:absolute; top:14px; right:14px; width:32px; height:32px; background:#181818; border:1px solid #222; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--hg-mut); transition:all var(--hg-t); z-index:2; }
.hg-modal-close svg { width:16px; height:16px; }
.hg-modal-close:hover { border-color:#ff6464; color:#ff6464; background:rgba(255,80,80,.1); }
.hg-modal-head { display:flex; align-items:center; gap:16px; padding:22px 24px 18px; border-bottom:1px solid #1e1e1e; }
.hg-modal-icon-wrap { position:relative; flex-shrink:0; }
.hg-modal-icon { width:60px; height:60px; border-radius:13px; border:1px solid #1e1e1e; object-fit:cover; background:#111; display:block; }
.hg-modal-icon-fb { display:none; width:60px; height:60px; border-radius:13px; background:linear-gradient(135deg,#0e1d10,#102514); border:1px solid rgba(0,255,65,.2); align-items:center; justify-content:center; font-size:20px; font-weight:800; color:var(--hg-acc); }
.hg-modal-app-name { font-size:20px; font-weight:700; color:#fff; line-height:1.2; margin-bottom:6px; }
.hg-modal-cat-tag { font-size:11px; color:var(--hg-acc); background:var(--hg-acc-d); border:1px solid rgba(0,255,65,.2); border-radius:4px; padding:2px 8px; display:inline-block; font-weight:600; }

/* Domain field */
.hg-domain-row { padding:14px 24px; border-bottom:1px solid #1a1a1a; background:rgba(0,255,65,.03); }
.hg-domain-label { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--hg-acc); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }
.hg-domain-input { width:100%; background:#111; border:1.5px solid #222; border-radius:8px; color:#fff; padding:10px 14px; font-size:13px; font-family:var(--hg-font); outline:none; transition:border-color var(--hg-t),box-shadow var(--hg-t); }
.hg-domain-input:focus { border-color:var(--hg-acc); box-shadow:0 0 0 3px var(--hg-acc-d); }
.hg-domain-input::placeholder { color:#444; }
.hg-domain-hint { font-size:11px; color:var(--hg-mut); margin-top:5px; }

/* Modal body */
.hg-modal-body { padding:20px 24px; }
.hg-modal-loading { text-align:center; padding:36px 0; color:var(--hg-mut); font-size:13px; }
.hg-spinner { width:32px; height:32px; border:2px solid #1e1e1e; border-top-color:var(--hg-acc); border-radius:50%; animation:hgSpin .7s linear infinite; margin:0 auto 12px; }
@keyframes hgSpin { to{transform:rotate(360deg)} }
.hg-opt-group { margin-bottom:24px; }
.hg-opt-group:last-child { margin-bottom:0; }
.hg-opt-group-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--hg-acc); margin-bottom:12px; }
.hg-opt-option { margin-bottom:14px; }
.hg-opt-option:last-child { margin-bottom:0; }
.hg-opt-option-title { font-size:11px; color:var(--hg-mut); font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em; }

/* Billing cycle list in modal */
.hg-cycle-group .hg-opt-items { flex-direction:column; }
.hg-cycle-group .hg-opt-item { flex-direction:row; justify-content:space-between; align-items:center; min-width:0; text-align:left; padding:11px 16px; }
.hg-cycle-save-badge { font-size:10px; font-weight:900; background:var(--hg-acc); color:#000; padding:2px 7px; border-radius:50px; }

/* Option items */
.hg-opt-items { display:flex; flex-wrap:wrap; gap:8px; }
.hg-opt-item { background:#111; border:1.5px solid #1e1e1e; border-radius:8px; padding:9px 14px; cursor:pointer; transition:all var(--hg-t); font-size:13px; color:var(--hg-dim); display:flex; flex-direction:column; align-items:center; gap:3px; min-width:80px; text-align:center; }
.hg-opt-item:hover { border-color:rgba(0,255,65,.35); color:#fff; }
.hg-opt-item.is-selected { background:var(--hg-acc-d); border-color:var(--hg-acc); color:#fff; font-weight:600; box-shadow:0 0 10px rgba(0,255,65,.1); }
.hg-opt-price { font-size:11px; color:var(--hg-acc); font-family:var(--hg-mono); margin-top:2px; font-weight:600; }

/* Qty slider */
.hg-qty-field { padding:12px 16px; border:1.5px solid #1e1e1e; border-radius:10px; background:#111; }
.hg-qty-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.hg-qty-label { font-size:13px; color:#fff; font-weight:600; }
.hg-qty-control { display:flex; align-items:center; gap:10px; }
.hg-qty-slider { flex:1; -webkit-appearance:none; appearance:none; height:4px; background:#222; border-radius:4px; outline:none; cursor:pointer; }
.hg-qty-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--hg-acc); cursor:pointer; box-shadow:0 0 0 3px rgba(0,255,65,.15); }
.hg-qty-value { font-family:var(--hg-mono); font-size:16px; font-weight:700; color:var(--hg-acc); min-width:32px; text-align:center; }

/* Modal footer — sticky */
.hg-modal-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid #1a1a1a; background:rgba(0,0,0,.3); flex-wrap:wrap; position:sticky; bottom:0; backdrop-filter:blur(8px); }
.hg-modal-price-label { font-size:11px; color:var(--hg-mut); text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.hg-modal-total { display:flex; align-items:baseline; gap:2px; }
.hg-modal-sym { font-size:14px; color:var(--hg-acc); font-family:var(--hg-mono); font-weight:700; }
.hg-modal-total-val { font-size:28px; font-weight:800; color:var(--hg-acc); font-family:var(--hg-mono); line-height:1; transition:all .2s; }
.hg-modal-period { font-size:12px; color:var(--hg-mut); margin-left:2px; }
.hg-modal-proceed { font-size:13px; padding:12px 28px; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hg-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .hg-wrap{padding:16px 14px 24px;}
  .hg-grid{grid-template-columns:1fr;gap:14px;}
  .hg-header{flex-direction:column;align-items:flex-start;gap:12px;}
  .hg-currency-toggle{align-self:flex-start;}
  .hg-toolbar{flex-direction:column;gap:8px;}
  .hg-search-box-wrap,.hg-sort-wrap{width:100%;}
  .hg-sort{width:100%;}
  .hg-btn .hg-btn-text{display:none;}
  .hg-btn::after{content:attr(data-mobile-text);font-weight:800;}
  .hg-btn-arr{display:none;}
  .hg-cycle-switcher{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:3px;}
  .hg-cycle-switcher::-webkit-scrollbar{display:none;}
  .hg-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:3px;}
  .hg-filters::-webkit-scrollbar{display:none;}
  .hg-grid[data-layout="list"] .hg-card{flex-direction:column;}
  .hg-grid[data-layout="list"] .hg-card-img{width:100%;height:160px;}
  .hg-grid[data-layout="list"] .hg-card-body{flex-direction:column;}
  /* Modal full bottom sheet on mobile */
  .hg-modal-overlay{align-items:flex-end;padding:0; z-index:2147483647 !important; overflow: hidden;}
  .hg-modal-inner{max-width:100%;max-height:99%;border-radius:20px 20px 0 0;}
  .hg-modal-head{padding:18px 18px 14px;}
  .hg-modal-body{padding:14px 18px;}
  .hg-modal-footer{padding:12px 18px;}
  .hg-opt-items{gap:6px;}
  .hg-opt-item{min-width:68px;padding:8px 10px;font-size:12px;}
  .hg-cycle-group .hg-opt-item{padding:10px 14px;}
}
@media(max-width:480px){
  .hg-header-title{font-size:20px;}
  .hg-price{font-size:20px;}
  .hg-btn{padding:9px 14px;}
  /* 2-col micro grid on small phones */
  .hg-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .hg-card-body{padding:12px;gap:8px;}
  .hg-app-icon,.hg-icon-fallback{width:38px;height:38px;}
  .hg-card-title{font-size:12px;}
  .hg-card-footer{padding:10px 12px;}
}
body.hg-modal-open{overflow:hidden;}