/* CPR Hybrid 2012 home page styles */

/* ============================================================
   Base / scene / chrome (originally inline <style>)
   ============================================================ */
html,
body {
  min-height: 100%;
}

body.legacy {
  background: #007bb8 url("/assets/img/sub_bg.jpg") 50% 90px no-repeat;
  overflow-x: hidden;
}

#nav .menu a,
#langdropdown a,
h1,
h2,
h3,
.myriadwebpro,
.face h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

/* Local CPR logo replaces the archived clubpenguin.com .logo background. */
#nav .logo,
#nav a.logo {
  display: block;
  width: 220px;
  height: 90px;
  background: transparent url("/assets/img/cpr-logo.png") no-repeat center center / contain !important;
  text-indent: -9999px;
  overflow: hidden;
}

#sceneCont.cpr-scene-blend {
  position: relative;
  width: 100%;
  min-height: 520px;
  height: 62vw;
  max-height: 760px;
  overflow: hidden;
  background: #0186b1;
  z-index: 0;
}

#sceneCont .video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0186b1 url("/assets/img/island-scene-default.jpg") top center / cover no-repeat;
}

#sceneCont #videoScene {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

#sceneCont .video-fix {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(1, 134, 177, 0) 0%, #007bb8 88%);
  pointer-events: none;
}

#centerWrap {
  position: relative;
  z-index: 2;
  margin-top: -235px;
}

#mobilecenterWrap,
#primary,
#secondary,
#ftrWrap,
#mobile-lang-select {
  position: relative;
  z-index: 2;
}

#masthead {
  position: relative;
  z-index: 5;
}

#langdropdown:hover ul.translate {
  display: block !important;
}

.rollover {
  cursor: pointer;
}

img {
  max-width: 100%;
}

/* ============================================================
   One-page layout fix: remove duplicate/mobile landing sections
   and shrink CPR hero.
   ============================================================ */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body.legacy {
  background: #007bb8 url("/assets/img/sub_bg.jpg") 50% 90px no-repeat;
}

#wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: #007bb8;
}

/* These 2012 mobile/secondary landing blocks were causing the extra page-height. */
#mobilecenterWrap,
#primary,
#slider,
#secondary,
#mobile-lang-select,
#modal-overlay,
#modal-loading,
#modal-window {
  display: none !important;
}

#masthead {
  position: relative;
  z-index: 20;
}

#sceneCont.cpr-scene-blend {
  position: relative;
  z-index: 1;
  height: clamp(330px, 46vh, 470px);
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: hidden;
  background: #0186b1;
}

#sceneCont .video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0186b1 url("/assets/img/island-scene-default.jpg") center 16% / cover no-repeat;
}

#sceneCont #videoScene {
  width: 100%;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

#sceneCont .video-fix {
  height: 110px;
  background: linear-gradient(to bottom, rgba(1, 134, 177, 0) 0%, #007bb8 92%);
}

#centerWrap {
  position: relative;
  z-index: 10;
  margin-top: clamp(-158px, -17vh, -118px);
}

#contentWrap {
  transform: scale(.88);
  transform-origin: top center;
}

#promoWrap {
  margin-bottom: 0 !important;
}

#promoWrap .inner {
  overflow: hidden;
}

#ftrWrap {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  transform: scale(.88);
  transform-origin: bottom center;
  pointer-events: auto;
}

#ftrBg,
#ftrContent {
  margin-top: 0 !important;
}

@media (max-height: 760px) {
  #sceneCont.cpr-scene-blend {
    height: 330px;
  }
  #centerWrap {
    margin-top: -135px;
  }
  #contentWrap {
    transform: scale(.82);
  }
  #ftrWrap {
    transform: scale(.82);
  }
}

@media (max-width: 900px) {
  html,
  body,
  #wrapper {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
  }
  #sceneCont.cpr-scene-blend {
    height: 360px;
  }
  #centerWrap {
    margin-top: -105px;
  }
  #contentWrap,
  #ftrWrap {
    transform: none;
  }
  #ftrWrap {
    position: relative !important;
    bottom: auto;
  }
}

@media (max-width: 760px) {
  #sceneCont.cpr-scene-blend {
    min-height: 420px;
    height: 78vw;
  }
  #sceneCont #videoScene {
    width: 260%;
    max-width: none;
  }
  #centerWrap {
    margin-top: -165px;
  }
}

/* ============================================================
   Footer flow fix (originally inline <style id="footer-flow-fix">)
   Keep last so it overrides the layout block above for shared rules.
   ============================================================ */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#wrapper {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #007bb8;
}

#masthead {
  flex: 0 0 auto;
}

#sceneCont.cpr-scene-blend {
  flex: 0 0 clamp(315px, 43vh, 430px);
  height: clamp(315px, 43vh, 430px) !important;
}

#sceneCont #videoScene {
  object-position: center 18%;
}

#centerWrap {
  flex: 0 0 auto;
  margin-top: clamp(-35px, -27vh, -129px) !important;
  height: clamp(166px, 22vh, 210px);
  overflow: visible;
}

#contentWrap {
  transform: scale(.82) !important;
  transform-origin: top center !important;
}

#promoWrap {
  margin: 0 auto !important;
}

#promoWrap .inner {
  max-height: 205px;
  overflow: hidden;
}

#ftrWrap {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4;
  flex: 0 0 auto;
  width: 100%;
  transform: none !important;
  margin-top: auto !important;
}

#ftrBg,
#ftrContent {
  margin-top: 0 !important;
}

@media (max-height: 760px) {
  #sceneCont.cpr-scene-blend {
    flex-basis: 300px;
    height: 300px !important;
  }
  #centerWrap {
    margin-top: -118px !important;
    height: 158px;
  }
  #contentWrap {
    transform: scale(.74) !important;
  }
  #promoWrap .inner {
    max-height: 188px;
  }
}

@media (max-width: 760px) {
  html,
  body,
  #wrapper {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
  }
  #wrapper {
    display: block;
  }
  #sceneCont.cpr-scene-blend {
    height: 380px !important;
  }
  #centerWrap {
    height: auto;
    margin-top: -135px !important;
  }
  #contentWrap {
    transform: none !important;
  }
  #promoWrap .inner {
    max-height: none;
  }
}

/* ============================================================
   2012 sub-page layout (news, shop, contact, etc.)
   Scoped to .cp-subpage on <html> + <body> so the home is unaffected.

   <html> stays viewport-sized and is the scroll container.
   <body> grows with its content and overflows <html> when needed,
   triggering exactly one scrollbar on <html>.
   ============================================================ */
html.cp-subpage {
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.cp-subpage {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

body.cp-subpage #wrapper {
  display: block;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
}

body.cp-subpage #sceneCont.cpr-scene-blend {
  flex: none;
  height: clamp(70px, 10vh, 110px) !important;
  min-height: 0;
}

body.cp-subpage #sceneCont #videoScene {
  object-position: center 28%;
}

/* Shorter scene means a smaller fade band into the body color too. */
body.cp-subpage #sceneCont .video-fix {
  height: 60px;
}

body.cp-subpage #centerWrap {
  position: relative;
  z-index: 10;
  flex: none;
  height: auto !important;
  margin: -36px auto 0 !important;
  width: 100%;
  max-width: 980px;
  padding: 0 14px;
  overflow: visible;
}

body.cp-subpage #contentWrap {
  transform: none !important;
  width: 100%;
}

body.cp-subpage #ftrWrap {
  position: relative !important;
  margin-top: 32px !important;
  z-index: 4;
  transform: none !important;
}

/* Sub-page content card (the white-on-cyan rounded panel) */
.subpage-region {
  background: #03a0c3;
  padding: 18px 22px 24px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  position: relative;
  z-index: 4;
  top: -65px;
}

.subpage-region .padd {
  padding: 6px 4px 14px;
}

.subpage-region .pageName {
  text-align: center;
  margin: 0 0 8px;
}

.subpage-region .pageName h1 {
  display: inline-block;
  margin: 0;
  padding: 8px 26px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #00659a;
  background: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff, #cfeaff);
  border: 2px solid #007bb8;
  border-radius: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}

.subpage-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #f3fbff;
  text-align: center;
}

/* News listing */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

.news-card .news-thumb {
  display: block;
  line-height: 0;
  background: #cfeaff;
}

.news-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  border: 0;
}

.news-card .news-meta {
  padding: 10px 12px 12px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.news-card .news-meta .date {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #f29400;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 4px;
}

.news-card .news-meta h3 {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.18;
  font-weight: 800;
}

.news-card .news-meta h3 a {
  color: #00659a;
  text-decoration: none;
}

.news-card .news-meta h3 a:hover {
  color: #ff8a00;
}

.news-card .news-meta p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #2e495c;
  flex: 1 1 auto;
}

.news-card .read-more {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  color: #ff8a00;
  text-transform: uppercase;
  text-decoration: none;
}

.news-card .read-more:hover {
  color: #00659a;
}

/* Shop grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.shop-product {
  background: #ffffff;
  border-radius: 8px;
  text-align: center;
  padding: 12px 10px 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
  color: #1f435c;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shop-product .shop-thumb {
  display: inline-block;
  line-height: 0;
}

.shop-product img {
  width: 100%;
  max-width: 130px;
  height: auto;
  display: inline-block;
  margin: 4px 0 8px;
  border: 0;
}

.shop-product h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #00659a;
}

.shop-product p {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.3;
  color: #2e495c;
  flex: 1 1 auto;
}

.shop-product .price {
  display: inline-block;
  background: #ffd900;
  color: #1f435c;
  font-weight: 800;
  font-size: 12px;
  padding: 2px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.shop-product .buy {
  display: inline-block;
  background: #ff8a00;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 7px 16px;
  border: 2px solid #fff;
  border-radius: 16px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.shop-product .buy:hover {
  background: #ffa733;
}

/* Section heading inside .subpage-region */
.subpage-region .section-heading {
  margin: 22px 0 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .8px;
  color: #ffffff;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, .35);
  padding-bottom: 6px;
}

/* Big variants of buy / price */
.buy.big {
  font-size: 13px;
  padding: 10px 24px;
  border-radius: 22px;
}

.price.big {
  font-size: 18px;
  padding: 4px 14px;
}

/* ============================================================
   News page: featured hero + sidebar + recent posts
   ============================================================ */
.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: start;
}

.news-hero {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
}

.news-hero .news-hero-thumb {
  position: relative;
  display: block;
  line-height: 0;
  background: #cfeaff;
}

.news-hero img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border: 0;
}

.news-hero .news-hero-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #ff8a00;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

.news-hero .news-hero-body {
  padding: 16px 20px 18px;
}

.news-hero .date {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #5e7e94;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}

.news-hero h2 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
}

.news-hero h2 a {
  color: #00659a;
  text-decoration: none;
}

.news-hero h2 a:hover {
  color: #ff8a00;
}

.news-hero p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #2e495c;
}

.news-hero .read-more {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #ff8a00;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .5px;
}

.news-hero .read-more:hover {
  color: #00659a;
}

/* Sidebar widgets */
.news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-widget {
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 16px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
  color: #1f435c;
}

.news-widget h3 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #00659a;
  border-bottom: 1px solid #cfeaff;
}

/* Poll widget */
.poll-widget .poll-question {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #1f435c;
}

.poll-widget .poll-options {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poll-widget .poll-options li {
  display: grid;
  grid-template-columns: 60px 1fr 38px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #1f435c;
}

.poll-widget .poll-label {
  font-weight: 700;
}

.poll-widget .poll-bar-track {
  height: 12px;
  background: #e7f4fb;
  border-radius: 6px;
  overflow: hidden;
}

.poll-widget .poll-bar {
  display: block;
  height: 100%;
  background: linear-gradient(to bottom, #5cc6f5, #1894d6);
}

.poll-widget .poll-pct {
  text-align: right;
  font-weight: 800;
  color: #00659a;
}

.poll-widget .poll-meta {
  margin: 0;
  font-size: 10px;
  color: #6f8da3;
}

/* Categories widget */
.categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.categories-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dotted #cfeaff;
  font-size: 12px;
}

.categories-list li:last-child {
  border-bottom: 0;
}

.categories-list a {
  color: #00659a;
  text-decoration: none;
  font-weight: 700;
}

.categories-list a:hover {
  color: #ff8a00;
}

.categories-list .count {
  background: #cfeaff;
  color: #00659a;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 10px;
}

/* ============================================================
   Shop page: hero product + categories + where-to-buy
   ============================================================ */
.shop-hero {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .22);
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 0;
  margin-bottom: 6px;
}

.shop-hero .shop-hero-img {
  position: relative;
  background: #cfeaff;
  line-height: 0;
}

.shop-hero .shop-hero-img img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 260px;
  object-fit: cover;
  display: block;
  border: 0;
}

.shop-hero .shop-hero-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ffd900;
  color: #1f435c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

.shop-hero .shop-hero-body {
  padding: 18px 22px 20px;
  color: #1f435c;
}

.shop-hero .shop-hero-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #f29400;
  margin-bottom: 4px;
}

.shop-hero h2 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #00659a;
  line-height: 1.15;
}

.shop-hero p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #2e495c;
}

.shop-hero .shop-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.shop-hero .shop-hero-sub {
  font-size: 11px;
  color: #5e7e94;
  font-weight: 700;
}

/* Category pills */
.shop-categories {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-categories li a {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  color: #f0fbff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.shop-categories li a:hover {
  background: rgba(255, 255, 255, .28);
  color: #ffffff;
}

.shop-categories li a.active {
  background: #ffffff;
  color: #00659a;
  border-color: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}

/* Where to buy */
.where-to-buy {
  margin-top: 18px;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
  color: #1f435c;
}

.where-to-buy .wtb-icon img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.where-to-buy h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #00659a;
}

.where-to-buy p {
  margin: 0 0 6px;
  font-size: 12px;
  color: #2e495c;
}

.wtb-retailers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #5e7e94;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.wtb-retailers li:not(:last-child)::after {
  content: "·";
  margin-left: 12px;
  color: #cfeaff;
}

/* ============================================================
   Contact page: 2011-inspired support center styling
   ============================================================ */
.contact-shell {
  background: linear-gradient(to bottom, #edf9ff 0%, #d5f0ff 100%);
  border: 3px solid #0a85bf;
  border-radius: 18px;
  padding: 14px 14px 18px;
  box-shadow: inset 0 0 0 2px #ffffff, 0 4px 10px rgba(0, 0, 0, .2);
}

.support-tabs {
  display: flex;
  gap: 8px;
  margin: 0 2px 12px;
  flex-wrap: wrap;
}

.support-tab {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 14px 14px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #00659a;
  background: #bfe9ff;
  border: 2px solid #0a85bf;
  border-bottom: 0;
}

.support-tab.active {
  color: #ffffff;
  background: linear-gradient(to bottom, #2fb6ed 0%, #0f8fcc 100%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}

.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.help-card {
  background: #ffffff;
  border: 2px solid #86caeb;
  border-radius: 14px;
  padding: 11px 10px 12px;
  text-align: center;
  text-decoration: none;
  color: #1f435c;
  box-shadow: 0 2px 0 rgba(3, 109, 161, .2);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.help-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(3, 109, 161, .24);
  border-color: #36a9de;
}

.help-card .help-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #cfeaff;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  margin-bottom: 8px;
  display: inline-block;
  line-height: 0;
}

.help-card .help-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.help-card h3 {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 800;
  color: #00659a;
}

.help-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #2e495c;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: start;
}

.contact-form {
  background: #ffffff;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 2px 0 rgba(4, 102, 150, .22);
  color: #1f435c;
  overflow: hidden;
  border: 2px solid #7cc4e6;
}

.contact-form h3 {
  margin: 0;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(to bottom, #30b8ee 0%, #108ecb 100%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  border-bottom: 1px solid #0b79ab;
}

.contact-form-intro {
  margin: 0;
  padding: 10px 14px 0;
  color: #4f6f84;
  font-size: 11px;
  font-style: italic;
}

.form-row {
  margin: 0;
  padding: 10px 14px 0;
}

.form-row.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-row label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #5b7b90;
  margin-bottom: 4px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 8px 9px;
  font: 13px Arial, Helvetica, sans-serif;
  color: #1f435c;
  background: #f8fdff;
  border: 1px solid #9fcee6;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: #1894d6;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(24, 148, 214, .2);
}

.form-row textarea {
  resize: vertical;
  min-height: 110px;
  margin-bottom: 2px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  flex-wrap: wrap;
}

.form-actions button {
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  border: 2px solid #fff;
}

.form-actions .form-hint {
  font-size: 11px;
  color: #5e7e94;
  font-weight: 700;
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-widget {
  background: #ffffff;
  border-radius: 12px;
  padding: 11px 12px 13px;
  box-shadow: 0 2px 0 rgba(4, 102, 150, .22);
  color: #1f435c;
  border: 2px solid #8ecdea;
}

.contact-widget h3 {
  margin: -11px -12px 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(to bottom, #3cbdef 0%, #0f8dcc 100%);
  border-radius: 10px 10px 0 0;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}

.contact-widget p {
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.4;
}

.contact-widget p:last-of-type {
  margin-bottom: 0;
}

.contact-widget a {
  color: #147eb4;
  font-weight: 700;
  text-decoration: none;
}

.contact-widget a:hover {
  color: #ff8a00;
}

.quick-help-links,
.community-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-help-links a,
.community-links a {
  display: block;
  background: linear-gradient(to bottom, #ffaf33 0%, #ff8a00 100%);
  color: #fff !important;
  text-align: center;
  padding: 7px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
  border: 2px solid #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.quick-help-links a:hover,
.community-links a:hover {
  background: linear-gradient(to bottom, #ffbe52 0%, #ff9b25 100%);
  color: #fff !important;
}

.contact-widget.community {
  background: #fff8e1;
  border-color: #ffd900;
}

/* ============================================================
   "Coming Soon" placeholder card (used by news / shop right now).
   ============================================================ */
.coming-soon {
  text-align: center;
  padding: 28px 12px 36px;
}

.coming-soon-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border-radius: 14px;
  padding: 28px 36px 30px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  color: #1f435c;
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
}

.coming-soon-card .coming-soon-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #cfeaff;
  border: 4px solid #ffd900;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}

.coming-soon-card .coming-soon-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coming-soon-card h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #00659a;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.coming-soon-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #2e495c;
}

/* ============================================================
   Sub-page responsive tweaks
   ============================================================ */
@media (max-width: 920px) {
  .news-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .shop-hero {
    grid-template-columns: 1fr;
  }
  .shop-hero .shop-hero-img img {
    max-height: 220px;
  }

  .where-to-buy {
    grid-template-columns: 64px 1fr;
  }
  .where-to-buy > .buy {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  body.cp-subpage #sceneCont.cpr-scene-blend {
    height: 90px !important;
  }
  body.cp-subpage #centerWrap {
    margin-top: -28px !important;
    padding: 0 8px;
  }
  .subpage-region {
    padding: 14px 14px 18px;
  }
  .subpage-region .pageName h1 {
    font-size: 18px;
    padding: 6px 18px;
  }
  .news-hero img {
    height: 180px;
  }
  .news-hero h2,
  .shop-hero h2 {
    font-size: 18px;
  }
  .help-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-row.two-up {
    grid-template-columns: 1fr;
  }
}