/* Burstlikes v7: product page. One coloured panel (like the home service panel): service pills on top, order card left, illustration right. */
.bx-hero--sub .bx-hero__sub { padding: 34px 0 40px; }
html body .bx-hero--sub h1 { font-size: clamp(2rem, 4vw, 3.6rem) !important; max-width: 22ch; line-height: 1.02; margin: 14px 0 10px; }
.bx-hero--sub p.bx-lead { max-width: 54ch; font-size: 1.1rem; }

.bx-order--prod { padding: 44px 0 10px; }
.bx-order--prod .otaley-about, .bx-order--prod #otaley-inner { background: transparent !important; padding: 0 !important; margin: 0 !important; }
html body section.bx-order--prod #backdrop_ .tab-container#cs-youtube {
  display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "pills pills" "form art";
  gap: 22px 28px !important; padding: 22px 26px 40px !important; border-radius: 56px !important; box-shadow: none !important; margin: 0 !important; width: 100% !important;
}
html body section.bx-order--prod.pp-c0 #backdrop_ .tab-container#cs-youtube { background: var(--bx-orange) !important; }
html body section.bx-order--prod.pp-c1 #backdrop_ .tab-container#cs-youtube { background: var(--bx-pink) !important; }
html body section.bx-order--prod.pp-c2 #backdrop_ .tab-container#cs-youtube { background: var(--bx-blue) !important; }
html body section.bx-order--prod.pp-c3 #backdrop_ .tab-container#cs-youtube { background: var(--bx-yellow) !important; }

/* service pills */
html body section.bx-order--prod #backdrop_ #Permotion { grid-area: pills; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; width: 100% !important; }
html body section.bx-order--prod #backdrop_ #Permotion h2 { display: none !important; }
html body section.bx-order--prod #backdrop_ #Permotion .tab__list { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
html body section.bx-order--prod #backdrop_ #Permotion .tab__list > div { flex: 0 0 auto; }
html body section.bx-order--prod #backdrop_ #Permotion .tab__item { width: auto !important; display: inline-flex !important; align-items: center; gap: 8px !important; margin: 0 !important; padding: 12px 18px !important; border-radius: 16px !important; background: rgba(255, 255, 255, .24) !important; border: 0 !important; color: #fff !important; font: 800 .82rem/1 var(--bx-body) !important; letter-spacing: .02em; text-transform: uppercase; }
html body section.bx-order--prod #backdrop_ #Permotion .tab__item .tab__item-icon, html body section.bx-order--prod #backdrop_ #Permotion .tab__item .tab__item-icon i { color: inherit !important; font-size: 1rem !important; }
html body section.bx-order--prod #backdrop_ #Permotion .tab__item:hover { background: rgba(255, 255, 255, .45) !important; }
html body section.bx-order--prod #backdrop_ #Permotion .tab__item.is--active { background: var(--bx-ink) !important; color: #fff !important; }
html body section.bx-order--prod.pp-c3 #backdrop_ #Permotion .tab__item:not(.is--active), html body section.bx-order--prod.pp-c1 #backdrop_ #Permotion .tab__item:not(.is--active) { color: var(--bx-ink) !important; background: rgba(20, 8, 31, .09) !important; }

/* order card */
html body section.bx-order--prod #backdrop_ #cs-youtube #wrapper { grid-area: form; background: #fff !important; border-radius: 38px !important; padding: 30px 32px 32px !important; box-shadow: none !important; width: 100% !important; }
html body .bx-order--prod #wrapper h3#order { font-size: 1.9rem !important; margin: 0 0 16px !important; }
html body .bx-order--prod #product-form .form-select, html body .bx-order--prod #product-form input[type="text"], html body .bx-order--prod #product-form select { background-color: var(--bx-lav) !important; border: 0 !important; border-radius: 16px !important; height: 54px !important; }
html body .bx-order--prod #product-form label { color: var(--bx-ink-2) !important; font-size: .76rem !important; }
html body .bx-order--prod .cart-price { padding-top: 18px !important; }
html body .bx-order--prod .cart-price button { height: 56px !important; padding: 0 34px !important; text-transform: uppercase; letter-spacing: .03em; }

/* illustration */
section.bx-order--prod #backdrop_ .tab-container#cs-youtube::after { content: ''; grid-area: art; background: url('../img/burst/svc-generic.svg') center / contain no-repeat; min-height: 300px; }
.bx-order--prod.sx-s-svc-followers .tab-container#cs-youtube::after { background-image: url('../img/burst/svc-followers.svg'); }
.bx-order--prod.sx-s-svc-likes .tab-container#cs-youtube::after { background-image: url('../img/burst/svc-likes.svg'); }
.bx-order--prod.sx-s-svc-views .tab-container#cs-youtube::after { background-image: url('../img/burst/svc-views.svg'); }

@media (max-width: 991.98px) {
  html body section.bx-order--prod #backdrop_ .tab-container#cs-youtube { grid-template-columns: 1fr; grid-template-areas: "pills" "form"; padding: 16px 14px 20px !important; border-radius: 34px !important; }
  section.bx-order--prod #backdrop_ .tab-container#cs-youtube::after { display: none; }
  html body section.bx-order--prod #backdrop_ #cs-youtube #wrapper { padding: 22px 18px 24px !important; border-radius: 28px !important; }
  html body section.bx-order--prod #backdrop_ #Permotion .tab__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html body section.bx-order--prod #backdrop_ #Permotion .tab__list::-webkit-scrollbar { display: none; }
}