/* Myles Hustler Store 21 · V34: Glotelho-style structure in black, gold #D4AF37 and white.
   Top bar · logo + big search + icons · category bar · ivory product cards · filters · tracking. Loaded after v33.css. */

/* ---------- Top bar (thin, black, gold text) */
.trust-bar { display: none; }
.topbar { background: #000; color: var(--gold); font-size: 12.5px; border-bottom: 1px solid rgba(212,175,55,.25); }
.topbar-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 30px; }
.tb-main, .tb-safe { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-safe { color: #f4efe4; opacity: .85; }
@media (max-width: 899px) { .tb-safe { display: none; } .topbar-row { justify-content: center; } .tb-main { white-space: normal; text-align: center; padding: 5px 0; line-height: 1.35; } }

/* ---------- Main row */
.hdr34 { background: rgba(0,0,0,.94); }
.hdr34 .hdr-main { display: flex; align-items: center; gap: 14px; min-height: 85px; }
.hdr34 .brand { flex: none; gap: 10px; }
.hdr34 .brand::after { display: none; }
.hdr34 .brand-logo { height: 58px; width: auto; filter: drop-shadow(0 2px 8px rgba(212,175,55,.3)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--serif); color: var(--gold); }
.brand-text b { font-size: 19px; letter-spacing: .08em; font-weight: 700; }
.brand-text small { font-size: 12px; letter-spacing: .42em; color: #f4efe4; }
.brand-text i { font-style: italic; color: var(--gold); letter-spacing: 0; font-size: 15px; }
.hdr34 .header-actions { margin-left: 0; gap: 6px; flex: none; }
.hdr34 .icon-btn { width: 46px; height: 46px; position: relative; }
.hdr34 .menu-btn { display: inline-grid; place-items: center; padding: 0; }
.hdr34 .icon-btn svg { display: block; margin: 0; }
.hdr34 .lang-switch { min-width: 46px; min-height: 46px; display: inline-grid; place-items: center; }

/* Big search with category dropdown (Glotelho pattern) */
.hs { position: relative; flex: 1; display: flex; align-items: stretch; min-width: 0; height: 48px; border: 2px solid var(--gold); border-radius: 999px; background: #0d0c0a; }
.hs-cat { flex: none; max-width: 170px; border: 0; border-right: 1px solid rgba(212,175,55,.35); background: transparent; color: var(--gold); font: 600 14px var(--font); padding: 0 12px 0 18px; border-radius: 999px 0 0 999px; cursor: pointer; }
.hs-cat option { background: #111; color: #f4efe4; }
.hs-q { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: 500 15px var(--font); padding: 0 14px; outline: none; }
.hs-q::placeholder { color: #9b9384; }
.hs:focus-within { box-shadow: 0 0 0 4px rgba(212,175,55,.25); }
.hs-go { flex: none; width: 56px; border: 0; border-radius: 0 999px 999px 0; background: var(--gold); color: #000; cursor: pointer; display: grid; place-items: center; }
.hs-go:hover { background: var(--gold-hover); }
.hs-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; list-style: none; margin: 0; padding: 6px; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 24px 50px rgba(0,0,0,.45); max-height: 70vh; overflow: auto; }
.hs-list a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: #111; text-decoration: none; min-height: 48px; }
.hs-list a:hover, .hs-list a[aria-selected="true"] { background: #f6f0de; }
.hs-list img { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.hs-list .hs-name { flex: 1; font-weight: 600; font-size: 14px; }
.hs-list .hs-price { font-weight: 800; white-space: nowrap; }
.hs-list .hs-empty { padding: 12px; color: #555; font-size: 14px; }

@media (max-width: 899px) {
  .hdr34 .hdr-main { flex-wrap: wrap; min-height: 65px; gap: 8px; padding-top: 6px; padding-bottom: 8px; }
  .hdr34 .brand { order: 1; margin-right: auto; }
  .hdr34 .menu-btn { order: 0; }
  .hdr34 .header-actions { order: 2; gap: 2px; }
  .hdr34 .hs { order: 3; flex-basis: 100%; height: 46px; }
  .hs-cat { max-width: 112px; font-size: 13px; padding-left: 14px; }
  .hdr34 .brand-logo { height: 44px; }
  .brand-text b { font-size: 15px; }
  .brand-text small { font-size: 10px; letter-spacing: .3em; }
  .hdr34 .icon-btn, .hdr34 .lang-switch { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 0; }
}
@media (max-width: 419px) { .brand-text { display: none; } }
@media (max-width: 359px) { .hdr34 .hdr-wish { display: none; } }
@media (min-width: 900px) and (max-width: 1099px) { .brand-text { display: none; } }

/* ---------- Category bar: only shop categories, scrolls sideways on phones */
.cat-bar.main-nav { display: block !important; position: static; margin: 0; background: #0a0907; border-top: 1px solid rgba(212,175,55,.18); border-bottom: 1px solid rgba(212,175,55,.18); }
.cat-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-bar.main-nav a, .cat-bar.main-nav .cat-row > a { display: inline-flex !important; align-items: center; flex: none; min-height: 44px; padding: 0 14px; border-radius: 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #e9e2d2; background: none; border-bottom: 2px solid transparent; }
.cat-bar.main-nav a:hover, .cat-bar.main-nav a.is-active { color: var(--gold); background: none; border-bottom-color: var(--gold); }

/* "More" drawer (story pages + fun hub), opened by the menu button on every screen size */
.more-drawer { background: #0d0c0a; border-bottom: 1px solid rgba(212,175,55,.25); }
.more-drawer[hidden] { display: none; }
.more-row { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-top: 8px; padding-bottom: 10px; }
.more-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: #e9e2d2; text-decoration: none; border-radius: 10px; }
.more-row a:hover { background: rgba(212,175,55,.1); color: var(--gold); }
.more-row .nav-fun { color: var(--gold); }
@media (max-width: 599px) { .more-row { flex-direction: column; } }

/* ---------- Product cards: warm ivory surface, black text, gold accents */
.product-grid .pc-li { display: flex; flex-direction: column; background: #fbf8f1; border-radius: 16px; overflow: hidden; border: 1px solid #ece4cf; box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: box-shadow .25s, transform .25s; }
.product-grid .pc-li:hover { box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px var(--gold); transform: translateY(-3px); }
.product-grid .product-card { background: transparent; border: 0; padding: 0; gap: 6px; color: #121212; flex: 1; transform: none !important; box-shadow: none !important; }
.product-grid .product-card:hover { color: #000; }
.product-grid .product-media { border-radius: 0; background: #fff; }
.product-grid .product-name { color: #1a1a1a; margin: 6px 12px 0; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-grid .price { margin: 0 12px; font-family: var(--font); color: #000; font-size: 17px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.price-was { color: #8a8170; font-weight: 500; font-size: 13px; }
.pc-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pc-badge { padding: 3px 9px; border-radius: 6px; font: 800 11.5px/1.5 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.pc-promo { background: #c0392b; color: #fff; }
.pc-low { background: #000; color: var(--gold); }
.pc-out { background: #6b6b6b; color: #fff; }
.pc-top { background: var(--gold); color: #000; }
.pc-add { margin: 10px 12px 12px; }
.pc-add-btn { width: 100%; min-height: 44px; border-radius: 10px; background: #000; color: #fff; border: 1px solid #000; font-weight: 700; letter-spacing: .02em; transition: background .2s, color .2s; }
.pc-add-btn:hover:not([disabled]) { background: var(--gold); color: #000; border-color: var(--gold); }
.pc-add-btn[disabled] { background: #d8d2c4; border-color: #d8d2c4; color: #555; cursor: not-allowed; }
.product-grid .wish { background: rgba(255,255,255,.92); color: #111; border-color: #e5dcc4; }
@media (hover: hover) and (pointer: fine) {
  .product-grid .pc-li:hover .product-media img { transform: scale(1.15); transition: transform 8s ease-out; }
}

/* ---------- Shop filters */
.shop-filter { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 24px; }
.shop-filter .shop-search { display: flex; gap: 8px; }
.shop-filter .shop-search .input { flex: 1; min-width: 0; }
.sf-drawer > summary { list-style: none; display: inline-flex; min-height: 44px; cursor: pointer; }
.sf-drawer > summary::-webkit-details-marker { display: none; }
.sf-grid { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (min-width: 900px) { .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; } .sf-actions { grid-column: auto; } }

/* ---------- Quick-add toast */
.toast34 { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); z-index: 120; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 14px; background: #000; color: #fff; border: 1px solid var(--gold); box-shadow: 0 18px 40px rgba(0,0,0,.5); opacity: 0; transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); }
.toast34.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast34 a { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* ---------- Order tracking */
.narrow { max-width: 680px; }
.track-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 0; }
.track-steps li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--muted); padding-left: 2px; }
.track-steps li:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 34px; height: calc(100% - 20px); width: 2px; background: var(--line-strong); }
.ts-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; background: var(--bg); }
.track-steps li.is-done { color: var(--ivory); }
.track-steps li.is-done .ts-dot { background: var(--gold); border-color: var(--gold); }
.track-steps li.is-done::before { background: var(--gold) !important; }
.track-steps li.is-now { color: var(--gold); font-weight: 700; }
.track-steps li.is-now .ts-dot { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(212,175,55,.2); }

@media (prefers-reduced-motion: reduce) {
  .product-grid .pc-li, .product-grid .pc-li:hover .product-media img, .toast34 { transition: none; transform: none; }
}
.wish-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #111; font: 700 11px/20px var(--font); text-align: center; }
.wish-count[hidden] { display: none; }
.shop-filter.shop-tools { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.shop-filter .shop-search { width: 100%; max-width: none; }

/* Wide hero banners (1920x600): keep their shape on tablets and computers, crop the centre on phones */
@media (min-width: 768px) {
  .pb-track { aspect-ratio: 1920 / 600; min-height: 0; }
  .pb-slide.is-on, .pb-slide { height: 100%; }
  .pb-copy { min-height: 0; height: 100%; justify-content: center; max-width: 48%; padding-left: 48px; background: none; }
}
.pb-media img { object-position: 65% center; }
@media (max-width: 399px) { .topbar { font-size: 11px; } .tb-main { padding: 4px 0; } }