/*
===============================================================================
  Mansy Store - Hybrid theme: dark hero over a light catalogue
  Loaded last so it wins over delta-style.css and slider-tabs.css without
  editing the minified sources. Hero only: the shelves, cards and footer below
  keep the light canvas.
===============================================================================
*/

/* The mat is the navy frame the artwork sits in. clamp() scales it with the
   viewport, so the arrows and the mobile hero shrink together without a
   second breakpoint. It sits on the border box and box-sizing is border-box,
   so the outer hero stays 1518x490 at this width - measured, not assumed -
   and nothing below it shifts. The artwork itself is inset by the mat. */
:root{--hero-mat:clamp(10px,1.3vw,18px);--hero-idle:#a9c6e0;--hero-line:#bde4ff}

/* One dark panel: banner on top, its named tabs welded to the bottom edge.
   Previously the two were separate rectangles - white card + 8px gap + bare
   tabs on the canvas - so the hero read as a placeholder, not a designed band. */
.banner-slider{padding:var(--hero-mat) var(--hero-mat) 0;background:var(--gc-section-ink);border-radius:18px 18px 0 0;box-shadow:none}
.slider-tabs{margin:0;padding:12px 0 16px;background:var(--gc-section-ink);border-radius:0 0 18px 18px;box-shadow:0 16px 34px #12304f2b}

/* Slides are inset by the mat, so each carries its own rounded corners.
   The gaming slide deliberately keeps its own #12304f fill even though it now
   matches the panel: clearing it removes the backdrop its >img
   mix-blend-mode:screen needs, and the artwork's dark box composites as
   charcoal instead of screening into the navy. Slide 2 carries graphic-slide
   *and* light-slide, so rules aimed at the first must exclude the second. */
.banner-slide{border-radius:10px}

/* Tab text on #12304f, measured: idle --hero-idle 7.58:1, active white 13.45:1.
   The base underline was --gc-blue-dark #0b63ce, which is 2.36:1 on navy - below
   the 3:1 bar WCAG 1.4.11 sets for a state indicator. --hero-line gives 10.06:1. */
.slider-tabs button{color:var(--hero-idle)}
.slider-tabs button:hover,.slider-tabs button.active{color:var(--gc-footer-white)}
.slider-tabs button.active{border-bottom-color:var(--hero-line)}

/* Arrows were #ffffffb3 discs holding var(--accent) #0787ea. Composited over
   navy the disc lands near #b3c0ca, putting the glyph at ~2.4:1. Solid white
   with the hero ink is 13.45:1 and reads the same over artwork and over the mat.
   Offsets add the mat so the discs stay inside the artwork instead of straddling it. */
.slide-arrow{background:var(--gc-footer-white);color:var(--gc-section-ink)}
.slide-arrow:hover{background:#e8f3ff}
.previous{left:calc(var(--hero-mat) + 10px)}
.next{right:calc(var(--hero-mat) + 10px)}

@media(max-width:600px){
  .banner-slider{border-radius:12px 12px 0 0}
  .slider-tabs{border-radius:0 0 12px 12px;padding:10px 0 14px}
  .banner-slide{border-radius:7px}
}