/*
 * The DabzPark navbar, Cheat Showcase, FAQ, product page, footer and
 * downloads page on this theme. This theme's <body> doesn't carry the
 * dz-body class (that would restyle every page), so these sections set
 * their own text base here.
 */
.dz-nav.dz-scope,
.dz-vshow.dz-scope,
.dz-fq.dz-scope,
.dz-pdp-page.dz-scope,
.dz-foot.dz-scope,
.dz-portal.dz-scope {
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Prices in green on the product page. */
.dz-pdp-page { --dz-price: #4ade80; }

/*
 * Navbar: floats over the top of the page, transparent until you scroll
 * (then the dark blur from dabz.css comes in), and a little taller.
 * --dzp-nav-h is the navbar's height; the navbar script sets the exact
 * value, these are the fallbacks.
 */
:root { --dzp-nav-h: 65px; }
@media (min-width: 1024px) { :root { --dzp-nav-h: 130px; } }
.dzp-body .dz-nav { position: fixed; top: 0; left: 0; right: 0; }
.dzp-body .dz-nav__bar { min-height: 64px; }
@media (min-width: 1024px) {
  .dzp-body .dz-nav__bar { min-height: 66px; }
  .dzp-body .dz-nav__bar2 { min-height: 62px; }
}

/* Homepage: the hero starts at the very top, behind the navbar, and its
   text sits a little higher than before. Other pages: content starts
   right under the navbar. */
.dzp-body:not(.dzp-home) .flex-wrapper > div:first-child { padding-top: var(--dzp-nav-h); }
.dzp-home .dshero { padding-top: calc(var(--dzp-nav-h) + clamp(24px, 4vw, 60px)); }
@media (max-width: 767px) {
  .dzp-home .dshero { padding-top: calc(var(--dzp-nav-h) + 22px); }
}

/* Homepage: the hero and Products section use the navbar's width (1248px,
   the same as the Cheat Showcase and FAQ), so every section starts and
   ends on the same line as the navbar. On wide screens the hero's menu
   preview keeps a 600px column; below that it would switch to its
   stacked phone layout. */
.dzp-home .dshero-in,
.dzp-home [data-component-id="products"] .products-content { max-width: 1248px; }
@media (min-width: 1280px) {
  .dzp-home .dshero-in { grid-template-columns: minmax(0, 1fr) 600px; gap: 28px; }
}
/* Products section: 3 groups per row in that width, so the cards keep
   their size (2 per row and 1 per row on smaller screens are unchanged). */
@media (min-width: 901px) {
  .dzp-home [data-component-id="products"] .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Product page: Bundle & Save (the add-ons), in the left column where the
   status card was. Tiles with the add-on's picture, name, green price and
   an Add / Added button in the Purchase button's colour. */
.dz-xtra { margin-top: 24px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: #0d0e11; }
.dz-xtra__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dz-xtra__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; color: var(--btn-mint-hi); background: rgba(var(--btn-mint-rgb), .1); border: 1px solid rgba(var(--btn-mint-rgb), .25); }
.dz-xtra__hd { flex: 1 1 auto; min-width: 0; }
.dz-scope .dz-xtra__title { margin: 0; font-family: var(--font); font-size: .98rem; font-weight: 700; color: #fff; letter-spacing: 0; }
.dz-xtra__sub { margin: 2px 0 0; font-size: .8rem; line-height: 1.4; color: #8d909a; }
.dz-xtra__total { flex: none; padding: 5px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--dz-price); background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25); }
.dz-xtra__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 10px; }
.dz-xtra__item { position: relative; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: #15161c; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.dz-xtra__item:hover { border-color: rgba(var(--btn-mint-rgb), .4); }
.dz-xtra__item.is-on { border-color: rgba(var(--btn-mint-rgb), .7); background: rgba(var(--btn-mint-rgb), .06); box-shadow: 0 0 0 1px rgba(var(--btn-mint-rgb), .25), 0 8px 24px rgba(var(--btn-mint-rgb), .08); }
.dz-xtra__item:has(.dz-xtra__check:focus-visible) { outline: 2px solid var(--btn-mint-hi); outline-offset: 2px; }
.dz-xtra__item.is-out { opacity: .5; }
.dz-xtra__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; margin: 0; cursor: pointer; }
.dz-xtra__item.is-out .dz-xtra__row { cursor: not-allowed; }
.dz-xtra__check { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dz-xtra__img { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 9px; overflow: hidden; color: var(--btn-mint-hi); background: #0b0c10; border: 1px solid rgba(255,255,255,.06); }
.dz-xtra__img img { width: 100%; height: 100%; object-fit: cover; }
.dz-xtra__text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.dz-xtra__name { font-size: .88rem; font-weight: 600; line-height: 1.3; color: #e8e9ee; overflow-wrap: anywhere; }
.dz-xtra__name::first-letter { text-transform: uppercase; }
.dz-xtra__price { font-size: .92rem; font-weight: 700; color: var(--dz-price); }
.dz-xtra__item.is-out .dz-xtra__price { color: #8d909a; }
.dz-xtra__btn { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 32px; padding: 0 12px; border-radius: 8px; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background-color .2s, color .2s, border-color .2s; }
.dz-xtra__item:hover .dz-xtra__btn { border-color: rgba(var(--btn-mint-rgb), .5); }
.dz-xtra__item.is-on .dz-xtra__btn { color: var(--btn-ink); background: linear-gradient(180deg, var(--btn-mint-hi), var(--btn-mint)); border-color: transparent; }
.dz-xtra__item.is-out .dz-xtra__btn { display: none; }
.dz-xtra__tick, .dz-xtra__item.is-on .dz-xtra__plus { display: none; }
.dz-xtra__item.is-on .dz-xtra__tick { display: block; }

/* Bottom line: the add-ons end where the buy panel ends (wide screens);
   on phones they follow the buy panel. */
@media (min-width: 960px) {
  .dz-pdp__media > .dz-xtra { margin-top: auto; }
  .dz-pdp__media > .dz-pdp__gallery:has(~ .dz-xtra) { margin-bottom: 24px; }
}
@media (max-width: 959px) {
  .dz-pdp__media > .dz-xtra { order: 3; margin-top: 0; }
}

/* Product page: the breadcrumb sits close under the navbar. */
.dzp-body .dz-pdp-crumbs { margin-top: 14px; }
@media (min-width: 1024px) { .dzp-body .dz-pdp-crumbs { margin-top: 20px; } }