.hpa-cat-content{height: 100%;}

.blockquote-footer{
    color: #fff;
    background: rgba(50,50,50,.3);
    border-top: 1px solid rgba(68,68,68,.3);
}

.prodreview_quot {
  position: relative;
  font-size: .9em;
  line-height: 1.5em;
  color: #fff;
}

.prodreview_quot cite {
  font-size: 1em;
  font-weight: 700;
  color: #ccc;
  float: right;
}

.prodreview_quot:after {
  content: '\201d';
  position: absolute;
  top: -0em;
  right: 0px;
  font-size: 6em;
  font-style: italic;
  color: #fff;
  z-index: 1;
}

/* ─── Mobile stacked logo (V2c) — loaded by every page-path, so this
       also reaches PDPs which use style_tiles_bs3.css + custom.css and
       don't load the duplicate rules in style_tiles.css. ─────────────── */
@media (max-width: 991px) {
    header .top .logo {
        max-width: 110px !important;
    }
    header .top .logo a .logo-stack {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 32px;
        line-height: 1;
        color: #fff;
        vertical-align: middle;
    }
    header .top .logo a .logo-stack-mark {
        font-size: 24px !important;
        line-height: 1;
        color: #fff;
        flex-shrink: 0;
    }
    header .top .logo a .logo-stack-words {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        line-height: 0.85;
    }
    header .top .logo a .logo-stack-words > span {
        display: block;
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: -0.015em;
        color: #fff;
        text-transform: lowercase;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE DRILLDOWN DRAWER (2026-07-24) — same-DOM transform of header nav.
   Spec: docs/seo/mobile-menu-build-2026-07-23/BUILD-KICKOFF.md §4.C + G1/G4/G5
   gate facts. EVERY rule is gated on html.sc-mnav-live (added ONLY by
   initMobileMenuV2 after feature-detecting nav[data-nav-viewall] at ≤991px),
   so old cached HTML can never meet this CSS. The single unscoped rule below
   targets .sc-mnav-chrome, a class that exists ONLY on JS-injected nodes —
   it keeps injected drawer chrome invisible in the ≥992px desktop dropdowns
   after a rotation, and is inert on any HTML the new JS never touched.
   ═══════════════════════════════════════════════════════════════════════════ */
.sc-mnav-chrome{display:none}

@media (max-width:991px){

/* ── drawer chassis — containing block = viewport (G4-verified) ─────────── */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav{
  position:fixed;top:0;bottom:0;left:0;width:min(88vw,400px);
  display:flex !important;flex-direction:column;overflow:visible;
  /* z:10921 — the header's .searchBar/.submitByEnter (z:10910/10920) otherwise paint
     THROUGH the drawer (live-verified 2026-07-24); internal anchor(auto)<panel(5)
     stacking is unaffected. max-height:none kills the legacy 100vh-120px flat-menu cap
     that stopped the drawer 120px short of the viewport bottom. */
  z-index:10921;max-height:none !important;
  background:#fff;border:0;border-top:2px solid #D72680;
  box-shadow:24px 0 64px -16px rgba(32,29,51,.30);
  transform:translateX(-103%);
  transition:transform .22s cubic-bezier(.25,.7,.3,1);
}
html.sc-mnav-live body.sc-mnav-open header.hidden-print nav{transform:none}
/* clear the #sc-smartbar z:1000 later-in-DOM tie (header is position:relative z:1000) */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print{z-index:1001}
/* deterministic rest state (legacy enquire hide() also applies inline display:none) */
html.sc-mnav-live body:not(.sc-mnav-anim) header.hidden-print nav{display:none !important}

/* scrim — JS-appended to body; below smartbar z:1000 and header z:1001
   (display:block re-enables it past the root .sc-mnav-chrome guard) */
html.sc-mnav-live .sc-mnav-scrim{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(32,29,51,.42);z-index:999;opacity:0;transition:opacity .22s;pointer-events:none}
html.sc-mnav-live body.sc-mnav-open .sc-mnav-scrim{opacity:1;pointer-events:auto}
/* PDP/hotdeals pinned tab bar (z:2999) must not paint over the drawer/scrim (review #2).
   TWO separate rules — a Selectors-4 :not() inside a comma list would invalidate the
   whole rule on pre-2021 engines (sc_smartbar.js precedent). */
html.sc-mnav-live body.sc-mnav-anim .fixedTabNav.fixItTop{z-index:998}
html.sc-mnav-live body.sc-mnav-anim .bs3 .fixedTabNav.fixItTop:not(.bs5 *){z-index:998}

/* CRITICAL (G4): climb the panels' containing block from UL to NAV —
   header nav>ul{position:relative} exists at ROOT level in BOTH stylesheet
   families (style_tiles.css AND custom.css/PDP twin) */
html.sc-mnav-live header nav>ul{position:static}

/* ── L0: the existing UL is the root scroll container ───────────────────── */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul{
  flex:1 1 auto;min-height:0;display:flex !important;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:0 !important;padding:6px 10px 12px !important;background:#fff !important;
  width:100% !important;
}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li{
  position:static !important;display:block;flex:none;width:100% !important;
  margin:0 !important;padding:0 !important;list-style:none;
  border:0 !important;background:none !important;float:none !important;
}
/* utility rows are .hidden-md-up (display:none!important at ≥768px) — unhide in drawer */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li.hidden-md-up{display:block !important}

/* L0 order (both device branches, no positional holes — G5):
   Outlet first, wishlist/login last; categories keep DOM order */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li.outlet-nav{order:-10}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li.hidden-md-up{order:90}

/* L0 rows */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li>a{
  display:flex !important;align-items:center;gap:12px;min-height:52px;width:100%;
  padding:4px 10px !important;margin:0 !important;border:0 !important;border-radius:9px;
  font-size:14px !important;font-weight:600;color:#201D33 !important;line-height:1.3;
  text-align:left;text-transform:none !important;text-shadow:none !important;
  text-decoration:none !important;background:none;position:relative;
  /* legacy header nav>ul>li>a{z-index:99990!important} (BOTH families) would paint
     parked L0 rows OVER the open panel (z:5) — neutralize (review blocker #0) */
  z-index:auto !important;
  transition:transform .22s cubic-bezier(.25,.7,.3,1),opacity .22s,background .12s linear;
}
html.sc-mnav-live body.sc-mnav-open header.hidden-print nav>ul>li>a:active{background:#F7F6FA;color:#B01560 !important}
/* drill chevron ONLY on rows with a panel; kill any legacy generated arrows */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li>a:after{content:none}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li>a[data-child-id]:after{
  /* display re-declared: legacy mobile `header nav>ul>li>a:after{display:none}` (both
     families, ≤991px) would otherwise suppress the chevron (review #1) */
  content:'\203A';display:inline-block;margin-left:auto;color:#D72680;font-weight:700;font-size:17px;
}
/* parked L0 at level 1 — transform the ANCHORS, never the UL (the UL contains
   the absolute panels; transforming it would drag them and become their CB) */
html.sc-mnav-live header.hidden-print nav[data-sc-level="1"]>ul>li>a{
  transform:translateX(-28%);opacity:.35;pointer-events:none;
}

/* L0 chips / badge / glyph discs */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav img.sc-mnav-chip{
  display:block;width:42px;height:42px;object-fit:contain;flex:none;
  background:#fff;border:1px solid #E7E4EF;border-radius:50%;padding:3px;mix-blend-mode:multiply;
}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav img.sc-mnav-badge{display:inline-block;height:20px;flex:none;width:auto;border:0;background:none}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li.outlet-nav>a{color:#a06a00 !important}
/* the injected SVG badge replaces the legacy CSS-background badge span */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li.outlet-nav>a .small-outlet-badge{display:none}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li>a>i.fa{
  width:28px;height:28px;border-radius:50%;background:#FBE9F3;color:#D72680;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none;
}
/* utility rows (wishlist / login-profil) — quieter, separated by a top rule */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li.hidden-md-up>a{font-weight:400;font-size:13.5px !important;min-height:44px;color:#3d3852 !important}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li.hidden-md-up:first-child{border-top:1px solid #E7E4EF !important;margin-top:8px !important;padding-top:6px !important}

/* ── L1 panels — absolute against the fixed nav, own scroll container (G4) ── */
html.sc-mnav-live header nav>ul>li>div.topMenu_sub{
  position:absolute;top:calc(48px + env(safe-area-inset-top,0px));right:0;bottom:0;left:0;width:auto;
  margin:0 !important;z-index:5;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#fff !important;border-top:0 !important;border-radius:0 !important;box-shadow:none !important;
  display:none !important;padding:0 0 20px !important;
  transform:translateX(102%);
  transition:transform .22s cubic-bezier(.25,.7,.3,1);
  pointer-events:none;
}
/* !important pair (armed rule is strictly more specific, so it wins the pair):
   belt-and-braces vs hoverIntent's inline fadeIn/fadeOut display residue (review #3/#7;
   primary fix = resetPanels() clears inline display) */
html.sc-mnav-live header nav>ul>li>div.topMenu_sub.sc-mnav-armed{display:block !important}
html.sc-mnav-live header nav>ul>li>div.topMenu_sub.sc-mnav-in{transform:none;pointer-events:auto}
/* initTopMenu defensive override — !important REQUIRED (G1); margin:0 also re-asserted
   (legacy root `.topMenu_sub>div{margin:24px}` applies once .hidden swaps the inline
   scnav2 `:not(.hidden)` margin rule out — review #5) */
html.sc-mnav-live .topMenu_sub.scnav2>div.hidden{display:block !important;margin:0 !important}

/* linearize the desktop grid; display:contents on cols exposes sections as
   flex items so per-panel order is tunable in CSS (register #22) */
html.sc-mnav-live .topMenu_sub.scnav2 .scn-cols{display:flex !important;flex-direction:column;padding:0 10px}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-col{display:contents;animation:none}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-sec{margin:16px 0 4px !important}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-sec.scn-flat{margin:2px 0 !important}

/* featured rows */
html.sc-mnav-live .topMenu_sub.scnav2 ul.scn-fstack{display:flex;flex-direction:column;margin:6px 0 0 !important}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-frow{min-height:50px;border-radius:9px}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-frow:active{background:#F7F6FA !important;color:#B01560 !important}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-frow:active img{border-color:#D72680;box-shadow:0 2px 8px rgba(215,38,128,.18)}

/* section headers — 44px targets; linked headers show a resting chevron */
html.sc-mnav-live .topMenu_sub.scnav2 .scn-sech{min-height:44px;border-radius:7px}
html.sc-mnav-live .topMenu_sub.scnav2 a.scn-sech:after{opacity:.5;transform:none}
html.sc-mnav-live .topMenu_sub.scnav2 a.scn-sech:active{background:#F7F6FA !important;color:#B01560 !important}
html.sc-mnav-live .topMenu_sub.scnav2 span.scn-sech{min-height:38px}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-rule{margin:4px 10px 8px}

/* item rows */
html.sc-mnav-live .topMenu_sub.scnav2 .scn-row{
  display:flex !important;align-items:center;min-height:44px;
  padding:11px 10px 11px 20px !important;border-radius:7px;line-height:1.35;
}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-flat .scn-row{padding-left:10px !important}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-row:active{background:#F7F6FA !important;color:#B01560 !important}

/* Ghiduri band — stacked full-width pills */
html.sc-mnav-live .topMenu_sub.scnav2 .scn-guides{
  display:block !important;animation:none;margin:16px 0 0 !important;
  padding:14px 16px 18px !important;background:#F7F6FA;border-top:1px solid #E7E4EF;
}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-gkick{display:block;margin:0 0 10px}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-gcard{display:flex !important;align-items:center;min-height:44px;margin:0 0 8px;border-radius:99px}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-gcard:active{border-color:#D72680;color:#B01560 !important}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-gcard:active .scn-bk{background:#D72680}
html.sc-mnav-live .topMenu_sub.scnav2 .scn-gcard:active .scn-bk svg{fill:#fff}

/* ── JS-injected chrome (every node also carries .sc-mnav-chrome) ─────────── */
/* drawer header */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-dhead{
  display:flex;align-items:center;gap:10px;flex:none;min-height:48px;
  padding:env(safe-area-inset-top) 8px 0 16px;border-bottom:1px solid #E7E4EF;background:#fff;
}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-dhead img{height:26px;width:auto;display:block}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-dclose{
  margin-left:auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#6b6580;border-radius:10px;border:0;background:none;cursor:pointer;font-family:inherit;
}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-dclose:active{background:#F7F6FA}
/* drawer footer — contact row (C6 reversal; R1 phone via data-nav-contact-tel) */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-dfoot{
  display:block;flex:none;border-top:1px solid #E7E4EF;background:#fff;
  padding:2px 10px calc(12px + env(safe-area-inset-bottom));
}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-contact{
  display:block;width:100%;text-align:center;font-size:12.5px;color:#6b6580 !important;
  min-height:44px;padding:12px 0 0;text-decoration:none !important;
}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-contact b{color:#201D33;font-weight:700}
/* Task #17 — language row in the drawer footer (2026-07-27): mirrors the header
   langSwitcher toggle; tap opens the existing country modal over the drawer. */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langslot{display:block;padding:10px 0 0}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langslot:empty{display:none;padding:0}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langbtn{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;
  background:#F7F6FA;border:1px solid #E7E4EF;border-radius:9px;font-family:inherit;
  font-size:14px;color:#201D33;cursor:pointer;text-align:left;
}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langbtn:active{background:#EFEDF5}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langflag{font-size:19px;line-height:1}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langname{font-weight:600}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langcurr{margin-left:auto;font-size:12px;color:#6b6580;letter-spacing:.04em}
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav .sc-mnav-langcaret{color:#6b6580;font-size:17px;line-height:1}
/* panel back header — sticky inside the panel's own scroller (G4-verified) */
html.sc-mnav-live .topMenu_sub.scnav2 .sc-mnav-phead{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:4px;width:100%;
  min-height:48px;padding:0 12px 0 0;background:#fff;border-bottom:1px solid #E7E4EF;
  border-radius:0;text-align:left;color:#201D33;cursor:pointer;border-top:0;border-left:0;border-right:0;font-family:inherit;
}
html.sc-mnav-live .topMenu_sub.scnav2 .sc-mnav-phead:active{background:#F7F6FA}
html.sc-mnav-live .topMenu_sub.scnav2 .sc-mnav-pback{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#D72680;font-size:21px;font-weight:700;flex:none;pointer-events:none}
html.sc-mnav-live .topMenu_sub.scnav2 .sc-mnav-ptitle{font-size:15.5px;font-weight:800;letter-spacing:-.01em;pointer-events:none}
/* view-all row — accent pill, parent chip, 600 weight, NO arrow (B7) */
html.sc-mnav-live .topMenu_sub.scnav2 .sc-mnav-viewall{
  display:flex;align-items:center;gap:11px;min-height:48px;margin:8px 10px 2px;
  padding:5px 14px 5px 8px;border-radius:9px;font-size:14px !important;font-weight:600;
  color:#B01560 !important;background:#FBE9F3;text-decoration:none !important;text-shadow:none !important;
}
html.sc-mnav-live .topMenu_sub.scnav2 .sc-mnav-viewall img{width:32px;height:32px;object-fit:contain;flex:none;background:#fff;border-radius:50%;padding:2px;mix-blend-mode:multiply;border:0}
html.sc-mnav-live .topMenu_sub.scnav2 .sc-mnav-viewall:active{background:#f7d3e6}

/* ── merchandising: mobile-scoped order only (register #22) ──────────────── */
/* Q3 — Clape: view-all → Piane digitale → chips trio → Piane acustice →
   Sintetizatoare → Accesorii → Ghiduri */
html.sc-mnav-live #topMenu_keys .scn-col:nth-child(1) .scn-sec:nth-of-type(1){order:1}
html.sc-mnav-live #topMenu_keys .scn-fstack{order:2}
html.sc-mnav-live #topMenu_keys .scn-col:nth-child(1) .scn-sec:nth-of-type(2){order:3}
html.sc-mnav-live #topMenu_keys .scn-col:nth-child(2) .scn-sec{order:4}
html.sc-mnav-live #topMenu_keys .scn-col:nth-child(3) .scn-sec{order:5}
/* Corzi chip swap (gitar) — JS classifies, CSS styles; desktop untouched.
   The injected clone li needs an explicit display past the root chrome guard. */
html.sc-mnav-live #topMenu_gitar .scn-fstack li.sc-mnav-chrome{display:block}
html.sc-mnav-live .sc-mnav-hide{display:none !important}
html.sc-mnav-live #topMenu_gitar li.sc-mnav-demote{order:2}
html.sc-mnav-live #topMenu_gitar li.sc-mnav-demote .scn-frow{font-weight:400;font-size:13.5px !important;min-height:44px;padding:11px 10px !important;border-radius:7px}
html.sc-mnav-live #topMenu_gitar li.sc-mnav-demote .scn-frow img{display:none}
/* DJ — desktop's duplicate "Accesorii de pickup" section deduped on mobile */
html.sc-mnav-live #topMenu_dj .scn-col:nth-child(3) .scn-sec:nth-child(2){display:none}

/* header burger ≥44px target (register #10, review #11) — min-size lever, not padding
   (the legacy ≤543px `padding:.85rem .3rem!important` stays untouched) */
html.sc-mnav-live header a.mobileMenuToggle{min-width:44px;min-height:44px;display:inline-flex !important;align-items:center;justify-content:center;box-sizing:border-box}

/* Front chat launcher hidden while the drawer is open (Tibor obs. 2026-07-27): it sits
   at z:9999, above the scrim (z:999) beside the 330px drawer, so it stayed bright and
   tappable and visitors feared mis-tapping it. sc-mnav-anim spans the drawer's whole
   open lifetime incl. both animations; the launcher returns on teardown. visibility
   (not display) so Front's own inline styles/layout are never fought. */
html.sc-mnav-live body.sc-mnav-anim #frontchat_launcher{visibility:hidden !important}

/* ── a11y + motion ───────────────────────────────────────────────────────── */
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav a:focus-visible,
html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav button:focus-visible{outline:2px solid #D72680;outline-offset:2px}

}/* end @media max-width:991px */

@media (max-width:991px) and (prefers-reduced-motion:reduce){
  html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav,
  html.sc-mnav-live .sc-mnav-scrim,
  html.sc-mnav-live body.sc-mnav-anim header.hidden-print nav>ul>li>a,
  html.sc-mnav-live header nav>ul>li>div.topMenu_sub{transition-duration:.08s}
}

/* SITE-WIDE FRAME — promoted from the sc_frame_preview cookie to permanent (2026-07-24).
   White page sides + full-bleed dark header, wide desktop (>=1441px) only. Hosted here
   because add_on.css loads on EVERY page (incl. PDPs, after tiles/bs3), and its <link>
   is already in every cached page's HTML, so this reaches new/incognito visitors
   immediately regardless of the SWR HTML cache. Byte-identical CSS to the old preview
   injection; rollback = delete this block. */
@media (min-width:1441px){
  body.bg-main{background-color:#fff}
  header.hidden-print{max-width:none;background:#0e0208}
  header.hidden-print>*{max-width:1440px;margin-left:auto;margin-right:auto}
}