/**
 * 18+ Comic v2.6.1 — Header Full-Bleed Fix
 *
 * Legacy css/custom.css sets `body { padding: 0 80px; }`, which leaves
 * visible gutters around every child of the page, including the header.
 * This override removes that legacy page padding only for Comic Library
 * screens. Main content keeps its own stable .container sizing.
 */

html:has(body.vtt-comic-library-v260),
body.vtt-comic-library-v260{
  width:100%;
  max-width:100%;
}

body.vtt-comic-library-v260{
  margin:0!important;
  padding:0!important;
  overflow-x:clip;
}

body.vtt-comic-library-v260 #page,
body.vtt-comic-library-v260 .site{
  width:100%;
  max-width:none!important;
  min-width:0;
  margin:0!important;
  padding:0!important;
}

/* Full-bleed chrome. These strips touch both viewport edges. */
body.vtt-comic-library-v260 .vtt-site-header,
body.vtt-comic-library-v260 .vtt-header-primary,
body.vtt-comic-library-v260 .vtt-desktop-nav,
body.vtt-comic-library-v260 .vtt-comic-breadcrumb-bar{
  width:100%;
  max-width:none!important;
  margin:0!important;
}

/* Header content receives its own responsive gutter rather than a .container cap. */
body.vtt-comic-library-v260 .vtt-header-primary > .container,
body.vtt-comic-library-v260 .vtt-desktop-nav > .container,
body.vtt-comic-library-v260 .vtt-header-search > .container{
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-inline:clamp(20px,4.2vw,96px)!important;
}

body.vtt-comic-library-v260 .vtt-header-primary__inner{
  width:100%;
  max-width:none!important;
}

/* The main canvas stays deliberately constrained, matching v2.5.1 proportions. */
body.vtt-comic-library-v260 .vtt-site-content > .container,
body.vtt-comic-library-v260 .vtt-library-stage > .container,
body.vtt-comic-library-v260 .vtt-comic-breadcrumb-bar > .container,
body.vtt-comic-library-v260 .vtt-site-footer > .container,
body.vtt-comic-library-v260 .vtt-single-top-ad > .container{
  width:min(1360px,calc(100% - 48px))!important;
  max-width:1360px!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

/* Breadcrumb uses the same stable reading line as page content, but keeps full-width color. */
body.vtt-comic-library-v260 .vtt-comic-breadcrumb-bar > .container{
  min-height:32px;
}

@media (min-width:1720px){
  body.vtt-comic-library-v260 .vtt-header-primary > .container,
  body.vtt-comic-library-v260 .vtt-desktop-nav > .container,
  body.vtt-comic-library-v260 .vtt-header-search > .container{
    padding-inline:clamp(72px,6vw,136px)!important;
  }
}

@media (max-width:1023px){
  body.vtt-comic-library-v260 .vtt-header-primary > .container,
  body.vtt-comic-library-v260 .vtt-desktop-nav > .container,
  body.vtt-comic-library-v260 .vtt-header-search > .container{
    padding-inline:20px!important;
  }

  body.vtt-comic-library-v260 .vtt-site-content > .container,
  body.vtt-comic-library-v260 .vtt-library-stage > .container,
  body.vtt-comic-library-v260 .vtt-comic-breadcrumb-bar > .container,
  body.vtt-comic-library-v260 .vtt-site-footer > .container,
  body.vtt-comic-library-v260 .vtt-single-top-ad > .container{
    width:min(960px,calc(100% - 32px))!important;
  }
}

@media (max-width:767px){
  body.vtt-comic-library-v260 .vtt-header-primary > .container,
  body.vtt-comic-library-v260 .vtt-header-search > .container{
    padding-inline:14px!important;
  }

  body.vtt-comic-library-v260 .vtt-site-content > .container,
  body.vtt-comic-library-v260 .vtt-library-stage > .container,
  body.vtt-comic-library-v260 .vtt-comic-breadcrumb-bar > .container,
  body.vtt-comic-library-v260 .vtt-site-footer > .container,
  body.vtt-comic-library-v260 .vtt-single-top-ad > .container{
    width:calc(100% - 24px)!important;
  }
}
