/*
 * Premium sub pages (Productive 19721340), per Dylan's Claude Design export:
 * "Watch - Rolex" (brand pages), "Other Laptops" and "About". Body .cp-sub plus
 * .cp-watch / .cp-other / .cp-about (see inc/pages-premium.php); builds on the
 * tokens and block restyles in home-premium.css. Mobile-first, design values
 * from 992px.
 */

/* ---------- 1. Hero: grey band, copy left, photo right ---------- */
.cp-sub .block.header.header--split {
  background: var(--cp-grey) !important;
  padding: 24px var(--cp-gutter) 0 !important;
}

.cp-sub .block.header.header--split > .container {
  padding: 0;
}

.cp-sub .block.header.header--split .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-sub .block.header.header--split .breadcrumbs,
.cp-sub .block.header.header--split .breadcrumbs a {
  font-size: 12.5px;
  color: oklch(50% 0.015 260) !important;
}

.cp-sub .block.header.header--split .breadcrumbs {
  margin: 0 0 32px !important;
}

.cp-sub .block.header.header--split .breadcrumbs .breadcrumb_last {
  color: var(--cp-ink);
}

.cp-sub .block.header.header--split p.subtitle {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--cp-navy);
  margin: 0 0 20px;
}

.cp-sub .block.header.header--split h1 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.cp-sub .block.header.header--split p:not(.subtitle):not(.btn-text-p) {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--cp-muted);
  margin: 0 0 18px;
  max-width: 460px;
}

.cp-sub .block.header.header--split p:empty {
  display: none;
}

.cp-sub .header__checklist {
  display: grid;
  gap: 12px;
  /* 28px in the design; the flex column does not collapse the intro's 18px margin. */
  margin: 10px 0 36px;
  padding: 0;
  list-style: none;
}

.cp-sub .header__checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cp-ink);
}

/* Check mark from the design (M5 12l5 5L20 7, stroke 2.2). */
.cp-sub .header__checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--cp-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Buttons: solid ink "Find your MacBook", outlined "How it works". */
.cp-sub .block.header.header--split .btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 12px;
  margin: 0;
}

.cp-sub .block.header.header--split .btn {
  margin: 0 !important;
  padding: 16px 32px;
  min-height: 0;
  height: auto;
  border: 1px solid var(--cp-ink) !important;
  border-radius: 0 !important;
  background: var(--cp-ink) !important;
}

.cp-sub .block.header.header--split .btn + .btn {
  background: #fff !important;
}

.cp-sub .block.header.header--split .btn .btn__bg,
.cp-sub .block.header.header--split .btn .btn__circle-wrap,
.cp-sub .block.header.header--split .btn i {
  display: none;
}

.cp-sub .block.header.header--split .btn .btn__text,
.cp-sub .block.header.header--split .btn .btn-text-p {
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: #fff !important;
}

.cp-sub .block.header.header--split .btn + .btn .btn-text-p {
  color: var(--cp-ink) !important;
}

.cp-sub .block.header.header--split .btn:hover {
  opacity: 0.88;
}

.cp-sub .block.header.header--split .btn:focus-visible {
  outline: 2px solid var(--cp-navy);
  outline-offset: 3px;
}

.cp-sub .header__media {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 40px;
}

.cp-sub .header__image {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* ---------- 2. The problem: heading left, copy right, no photo ---------- */
.cp-sub .block.content-image.content-image--text {
  background: #fff !important;
  padding: 64px var(--cp-gutter) !important;
}

.cp-sub .block.content-image.content-image--text .row {
  align-items: start !important;
}

.cp-sub .block.content-image.content-image--text .row > div,
.cp-sub .block.content-image.content-image--text.bg-color-white .row > div:not(:has(.image)) {
  padding: 0 !important;
}

.cp-sub .block.content-image.content-image--text h2 {
  font-size: 32px;
  line-height: 1.12;
  margin: 0 0 24px;
  text-wrap: pretty;
}

.cp-sub .block.content-image.content-image--text .row > div p:not(.subtitle) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-muted);
  margin: 0 0 18px;
  max-width: 640px;
}

.cp-sub .cp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-navy);
  text-decoration: none;
}

.cp-sub .cp-link:hover {
  color: oklch(22% 0.08 258);
}

.cp-sub .cp-link i {
  font-size: 13px;
}

/* ---------- 3. Made for watch wearers: grey band, photo left in the gutter ---------- */
.cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) {
  padding: 64px var(--cp-gutter) !important;
}

.cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) .row > div,
.cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) .row > div:not(:has(.image)) {
  padding: 0 !important;
}

.cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) .image {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  margin-bottom: 40px;
}

.cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) h2 {
  font-size: 32px;
  line-height: 1.12;
  margin: 0 0 24px;
}

.cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) .row > div:not(:has(.image)) p:not(.subtitle) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-muted);
  max-width: none;
}

/* ---------- 4. FAQ: title left, six questions right ---------- */
.cp-sub .block.faq-section {
  padding: 64px var(--cp-gutter) 48px !important;
}

.cp-sub .block.faq-section > .container {
  max-width: none;
  padding: 0;
}

.cp-sub .block.faq-section .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-sub .block.faq-section .content h2 {
  font-size: 30px;
  line-height: 1.12;
  margin: 0 0 24px;
}

.cp-sub .block.faq-section .content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-muted);
  margin: 0 0 18px;
}

.cp-sub .block.faq-section .content .btn {
  display: inline-flex;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

.cp-sub .block.faq-section .content .btn .btn__bg,
.cp-sub .block.faq-section .content .btn .btn__circle-wrap {
  display: none;
}

.cp-sub .block.faq-section .content .btn .btn-text-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-navy) !important;
}

.cp-sub .block.faq-section .content .btn i {
  margin: 0;
  font-size: 13px;
  color: var(--cp-navy);
}

/* Six questions, as in the design; the rest is one click away on /faq/. */
.cp-sub .faq-accordion .accordion-item:nth-child(n+7) {
  display: none;
}

.cp-sub .faq-accordion {
  border-bottom: 1px solid var(--cp-line-strong);
}

.cp-sub .faq-accordion .accordion-item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-top: 1px solid var(--cp-line-strong);
  border-radius: 0 !important;
  background: transparent;
}

.cp-sub .faq-accordion .accordion-header {
  margin: 0;
}

.cp-sub .faq-accordion .accordion-button {
  margin: 0;
  padding: 22px 0 !important;
  font-weight: 500 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 17px;
  line-height: 1.4;
  color: var(--cp-ink);
}

.cp-sub .faq-accordion .accordion-button .faq-icon {
  display: none;
}

.cp-sub .faq-accordion .accordion-button::after {
  content: "+";
  width: auto;
  height: auto;
  margin-left: 20px;
  background: none !important;
  transform: none !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--cp-ink);
}

.cp-sub .faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\2212";
}

.cp-sub .faq-accordion .accordion-button:focus-visible {
  outline: 2px solid var(--cp-navy);
  outline-offset: 4px;
}

.cp-sub .faq-accordion .accordion-body {
  padding: 0 0 22px;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cp-muted);
}

/* ---------- 5. Disclaimer (raw HTML in the page content, inline styles) ---------- */
.cp-sub .entry-content > div.container {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding: 0 var(--cp-gutter) 56px !important;
}

.cp-sub .entry-content > div.container .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-sub .entry-content > div.container .col-12 {
  padding: 0;
}

.cp-sub .entry-content > div.container p {
  max-width: 820px !important;
  margin: 0;
  padding-top: 24px !important;
  border-top: 1px solid var(--cp-line-strong) !important;
  font-size: 12.5px !important;
  line-height: 1.6;
  color: oklch(55% 0.015 260);
  opacity: 1 !important;
}

@media (min-width: 992px) {
  .cp-sub .block.header.header--split {
    padding: 32px 56px 0 !important;
  }

  .cp-sub .block.header.header--split .breadcrumbs {
    margin-bottom: 40px !important;
  }

  .cp-sub .block.header.header--split .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 72px;
    align-items: end;
  }

  .cp-sub .block.header.header--split .row > div {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 0 96px;
  }

  .cp-sub .block.header.header--split .row > .header__media {
    padding: 0;
    margin-top: 0;
  }

  .cp-sub .block.header.header--split h1 {
    font-size: 52px;
  }

  .cp-sub .block.content-image.content-image--text {
    padding: 110px 56px !important;
  }

  .cp-sub .block.content-image.content-image--text .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 72px;
  }

  .cp-sub .block.content-image.content-image--text .row > div,
  .cp-sub .block.faq-section .row > div {
    width: auto;
    max-width: none;
    margin: 0 !important;
  }

  .cp-sub .block.content-image.content-image--text h2,
  .cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) h2 {
    font-size: 40px;
  }

  .cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) {
    padding: 110px 56px !important;
  }

  .cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center !important;
  }

  .cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) .row > div {
    width: auto;
    max-width: none;
    margin: 0 !important;
  }

  .cp-sub .block.content-image.bg-color-light-gray:not(.content-image--text) .image {
    height: auto !important;
    margin: 0;
  }

  .cp-sub .block.faq-section {
    padding: 110px 56px 72px !important;
  }

  .cp-sub .block.faq-section .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 72px;
  }

  .cp-sub .block.faq-section .content h2 {
    font-size: 36px;
  }

  .cp-sub .entry-content > div.container {
    padding: 0 56px 72px !important;
  }
}

/* ================= Other laptops (.cp-other), design "ChronoPad Other Laptops" ================= */

/* ---------- Size finder in the "Measure your palm rest" style ---------- */
.cp-other .block.size-finder {
  background: #fff !important;
  padding: 64px var(--cp-gutter) !important;
}

.cp-other .block.size-finder > .container {
  max-width: none;
  padding: 0;
}

.cp-other .block.size-finder > .container > .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-other .size-finder__content h2 {
  font-size: 32px;
  line-height: 1.12;
  margin: 0 0 24px;
}

.cp-other .size-finder__lead p,
.cp-other .size-finder__note {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-muted);
}

.cp-other .size-finder__figure-wrap {
  margin: 32px 0;
  border: 1px solid var(--cp-line-strong);
  border-radius: 0 !important;
  background: #fff !important;
}

.cp-other .size-finder__steps {
  display: grid;
  gap: 20px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: cp-step !important;
}

.cp-other .size-finder__steps li {
  position: relative;
  min-height: 44px;
  padding-left: 64px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cp-muted);
  counter-increment: cp-step !important;
}

.cp-other .size-finder__steps li::before {
  /* !important: a global "ol li::before" rule sets a blue counter(ordered-list) ".". */
  content: counter(cp-step) !important;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cp-ink);
  border-radius: 0;
  background: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-ink) !important;
}

.cp-other .size-finder__steps li strong {
  font-weight: 600;
  color: var(--cp-ink);
}

.cp-other .size-finder__panel {
  padding: 32px 24px;
  border: 1px solid var(--cp-line-strong);
  border-radius: 0 !important;
  background: var(--cp-grey);
  box-shadow: none;
}

.cp-other .size-finder__panel-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--cp-ink);
}

.cp-other .size-finder__panel-text {
  font-size: 15px;
  color: var(--cp-muted);
}

.cp-other .size-finder__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-ink);
}

.cp-other .size-finder__control {
  border: 1px solid var(--cp-line-strong) !important;
  border-radius: 0 !important;
  background: #fff;
}

.cp-other .size-finder__input {
  border-radius: 0 !important;
}

.cp-other .size-finder__actions .btn {
  margin: 0 !important;
  padding: 16px 32px;
  min-height: 0;
  height: auto;
  border: 1px solid var(--cp-ink) !important;
  border-radius: 0 !important;
  background: var(--cp-ink) !important;
}

.cp-other .size-finder__actions .btn .btn__bg,
.cp-other .size-finder__actions .btn .btn__circle-wrap,
.cp-other .size-finder__actions .btn i {
  display: none;
}

.cp-other .size-finder__actions .btn .btn-text-p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff !important;
}

/* ---------- Size cards: "Which one fits your laptop best?" ---------- */
.cp-other .block.size-cards {
  padding: 0 var(--cp-gutter) 64px;
}

.cp-other .block.size-cards > .container {
  max-width: none;
  padding: 0;
}

.cp-other .size-cards__title {
  margin: 0 0 36px;
  font-size: 32px;
  line-height: 1.12;
}

.cp-other .size-cards__grid {
  display: grid;
  gap: 16px;
}

.cp-other .size-cards__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cp-line-strong);
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-other .size-cards__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--cp-line-strong);
}

.cp-other .size-cards__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
}

.cp-other .size-cards__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
}

.cp-other .size-cards__name {
  font-size: 22px;
  font-weight: 600;
}

.cp-other .size-cards__badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--cp-navy);
}

.cp-other .size-cards__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cp-muted);
}

.cp-other .size-cards__spec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--cp-line-strong);
  border-bottom: 1px solid var(--cp-line-strong);
  font-size: 14px;
}

.cp-other .size-cards__spec span:first-child {
  color: var(--cp-muted);
}

.cp-other .size-cards__spec span:last-child {
  font-weight: 600;
  white-space: nowrap;
}

.cp-other .size-cards__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cp-navy);
}

.cp-other .size-cards__cta .woocommerce-Price-amount {
  color: inherit;
}

.cp-other .size-cards__card:hover .size-cards__cta {
  color: oklch(22% 0.08 258);
}

.cp-other .size-cards__card:focus-visible {
  outline: 2px solid var(--cp-navy);
  outline-offset: 3px;
}

/* Hero without checklist: the intro sits right above the button. */
.cp-other .block.header.header--split p:not(.subtitle):not(.btn-text-p) {
  margin-bottom: 36px;
}

@media (min-width: 992px) {
  .cp-other .block.size-finder {
    padding: 110px 56px !important;
  }

  .cp-other .size-finder__content h2,
  .cp-other .size-cards__title {
    font-size: 40px;
  }

  .cp-other .size-finder__panel {
    padding: 40px;
  }

  .cp-other .block.size-cards {
    padding: 0 56px 110px;
  }

  .cp-other .size-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ================= About (.cp-about), design "ChronoPad About" ================= */

/* ---------- Hero: white, title left, intro right, 21:9 video below ---------- */
.cp-sub .block.header.header--media {
  background: #fff !important;
  padding: 24px var(--cp-gutter) 0 !important;
}

.cp-sub .block.header.header--media > .container {
  max-width: none;
  padding: 0;
}

.cp-sub .block.header.header--media .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-sub .block.header.header--media .row > div {
  padding: 0;
}

.cp-sub .block.header.header--media .breadcrumbs,
.cp-sub .block.header.header--media .breadcrumbs a {
  font-size: 12.5px;
  color: oklch(50% 0.015 260) !important;
}

.cp-sub .block.header.header--media .breadcrumbs {
  margin: 0 0 32px !important;
}

.cp-sub .block.header.header--media .breadcrumbs .breadcrumb_last {
  color: var(--cp-ink);
}

.cp-sub .block.header.header--media h1 {
  max-width: 760px;
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
  text-wrap: pretty;
}

.cp-sub .block.header.header--media p:empty {
  display: none;
}

.cp-sub .block.header.header--media p:not(.subtitle):not(.btn-text-p) {
  max-width: 420px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cp-muted);
}

.cp-sub .header__video {
  margin-top: 48px;
}

.cp-sub .header__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--cp-grey);
}

/* ---------- Designed in Eindhoven: three figures under the copy ---------- */
.cp-sub .cp-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 32px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.cp-sub .cp-stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  font-size: 13px;
  color: var(--cp-muted);
}

.cp-sub .cp-stats li::before {
  display: none;
}

.cp-sub .cp-stats strong {
  display: block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cp-ink);
}

/* ---------- In use: photo grid ---------- */
.cp-sub .block.image-carousel--grid {
  padding: 64px var(--cp-gutter) !important;
}

.cp-sub .block.image-carousel--grid > .container {
  max-width: none;
  padding: 0;
}

.cp-sub .block.image-carousel--grid h2 {
  margin: 0 0 32px;
  font-size: 32px;
  line-height: 1.12;
}

.cp-sub .image-carousel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 160px;
  gap: 12px;
}

.cp-sub .image-carousel__cell {
  display: block;
  /* !important: main.css gives ".site a:not(.btn)" width: fit-content. */
  width: 100% !important;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.cp-sub .image-carousel__cell:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.cp-sub .image-carousel__cell img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
}

@media (min-width: 992px) {
  .cp-sub .block.header.header--media {
    padding: 32px 56px 0 !important;
  }

  .cp-sub .block.header.header--media .breadcrumbs {
    margin-bottom: 40px !important;
  }

  .cp-sub .block.header.header--media .row > .col-lg-12:not(.header__video) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: end;
  }

  .cp-sub .block.header.header--media .breadcrumbs,
  .cp-sub .block.header.header--media p.subtitle {
    grid-column: 1 / -1;
  }

  .cp-sub .block.header.header--media h1 {
    margin: 0;
    font-size: 64px;
  }

  .cp-sub .header__video {
    margin-top: 72px;
  }

  .cp-sub .header__video video {
    aspect-ratio: 21 / 9;
  }

  .cp-sub .cp-stats {
    gap: 40px;
  }

  .cp-sub .cp-stats strong {
    font-size: 32px;
  }

  .cp-sub .block.image-carousel--grid {
    padding: 110px 56px !important;
  }

  .cp-sub .block.image-carousel--grid h2 {
    margin-bottom: 40px;
    font-size: 40px;
  }

  .cp-sub .image-carousel__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 260px;
  }
}

/* ================= Custom for Business (.cp-business), design "ChronoPad For Business" ================= */

/* ---------- Hero: white, photo 4:5, two-column checklist, orange button ---------- */
.cp-business .block.header.header--split {
  background: #fff !important;
  padding-bottom: 64px !important;
}

.cp-business .block.header.header--split .row > div {
  padding-bottom: 0;
}

.cp-business .header__checklist {
  gap: 14px 24px;
  margin-bottom: 40px;
}

.cp-business .header__checklist li {
  gap: 10px;
  font-size: 14.5px;
}

.cp-business .block.header.header--split .btn {
  border-color: #f26a1b !important;
  background: #f26a1b !important;
}

.cp-business .block.header.header--split .btn i {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: #fff;
}

.cp-business .header__image {
  aspect-ratio: 4 / 5;
  max-width: none;
}

/* ---------- Choose your route: three white cards on grey ---------- */
/* home-premium.css styles .usp-section with !important, hence .cp-sub.cp-business + !important. */
.cp-sub.cp-business .block.usp-section {
  display: block;
  background: var(--cp-grey) !important;
  padding: 64px var(--cp-gutter) !important;
  color: var(--cp-ink);
}

.cp-sub.cp-business .block.usp-section::after {
  display: none !important;
}

.cp-sub.cp-business .block.usp-section > .container {
  display: block;
  max-width: none;
  padding: 0;
}

.cp-sub.cp-business .block.usp-section .section-head {
  max-width: 640px;
  margin: 0 0 36px !important;
}

.cp-sub.cp-business .block.usp-section h2 {
  margin: 0 !important;
  font-size: 32px !important;
  line-height: 1.12;
  color: var(--cp-ink) !important;
}

.cp-sub.cp-business .block.usp-section .feature-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.cp-sub.cp-business .block.usp-section .feature {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 36px 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--cp-ink);
}

.cp-sub.cp-business .block.usp-section .feature__highlight {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--cp-navy) !important;
}

.cp-sub.cp-business .block.usp-section .feature h3 {
  margin: 0 !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  color: var(--cp-ink) !important;
}

.cp-sub.cp-business .block.usp-section .feature p.m-0 {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--cp-muted) !important;
}

/* ---------- More than a giveaway: tags ---------- */
.cp-sub .block .cp-tags {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.cp-sub .block .cp-tags li {
  padding: 8px 14px;
  border: 1px solid var(--cp-line-strong);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cp-ink);
}

.cp-sub .cp-tags li::before {
  display: none;
}

/* ---------- Quote: facts left, grey form right ---------- */
.cp-sub .block.contact-form {
  padding: 64px var(--cp-gutter) !important;
}

.cp-sub .block.contact-form > .container {
  max-width: none;
  padding: 0;
}

.cp-sub .block.contact-form > .container > .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-sub .block.contact-form .sticky-gsap {
  display: flex;
  flex-direction: column;
}

.cp-sub .block.contact-form .sticky-gsap h2 {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.12;
}

.cp-sub .contact-form__info {
  display: contents;
}

.cp-sub .contact-form__info p.subtitle {
  order: -1;
}

.cp-sub .contact-form__info p:not(.subtitle) {
  margin: 0 0 36px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-muted);
}

.cp-sub .block .cp-facts {
  display: grid !important;
  width: 100%;
  align-self: stretch;
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid var(--cp-line-strong);
  list-style: none;
}

.cp-sub .block .cp-facts li {
  display: flex !important;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cp-line-strong);
  font-size: 14.5px;
  color: var(--cp-muted);
}

.cp-sub .cp-facts li::before {
  display: none;
}

.cp-sub .block .cp-facts strong {
  display: block !important;
  font-weight: 600;
  text-align: right;
  color: var(--cp-ink);
}

.cp-sub .block.contact-form .form {
  padding: 32px 24px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--cp-grey) !important;
  box-shadow: none !important;
}

.cp-sub .block.contact-form .gform_wrapper .gfield_label,
.cp-sub .block.contact-form .gform_wrapper .gform-field-label {
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cp-ink);
}

.cp-sub .block.contact-form .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.cp-sub .block.contact-form .gform_wrapper textarea {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--cp-line-strong) !important;
  border-radius: 0 !important;
  background: #fff !important;
  font-size: 15px;
  color: var(--cp-ink);
  box-shadow: none !important;
}

.cp-sub .block.contact-form .gform_wrapper textarea {
  height: auto;
  min-height: 130px;
  padding: 14px;
}

.cp-sub .block.contact-form .gform_wrapper input:focus-visible,
.cp-sub .block.contact-form .gform_wrapper textarea:focus-visible {
  outline: 2px solid var(--cp-navy);
  outline-offset: 0;
}

.cp-sub .block.contact-form .gform_wrapper .gform_drop_area {
  padding: 28px;
  border: 1px dashed oklch(78% 0.005 260) !important;
  border-radius: 0 !important;
  background: #fff !important;
  text-align: center;
}

.cp-sub .block.contact-form .gform_wrapper .gfield--type-fileupload legend,
.cp-sub .block.contact-form .gform_wrapper .gfield--type-fileupload .gfield_label {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.cp-sub .block.contact-form .gform_wrapper .gfield_consent_label,
.cp-sub .block.contact-form .gform_wrapper .gchoice label {
  font-size: 13.5px;
  line-height: 1.5;
}

.cp-sub .block.contact-form .gform_wrapper input[type="checkbox"] {
  accent-color: var(--cp-navy);
}

.cp-sub .block.contact-form .gform_footer .btn,
.cp-sub .block.contact-form .gform_footer button,
.cp-sub .block.contact-form .gform_footer input[type="submit"] {
  width: 100%;
  height: 54px;
  margin: 6px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f26a1b !important;
}

.cp-sub .block.contact-form .gform_footer .btn .btn__bg,
.cp-sub .block.contact-form .gform_footer .btn .btn__circle-wrap,
.cp-sub .block.contact-form .gform_footer .btn i {
  display: none;
}

.cp-sub .block.contact-form .gform_footer .btn-text-p,
.cp-sub .block.contact-form .gform_footer button {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff !important;
}

/* Upload section of form 5 at label size; its confirmation note repeats the copy on the left. */
.cp-sub .block.contact-form .gform_wrapper .gsection_title {
  margin: 0 0 4px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cp-ink);
}

.cp-sub .block.contact-form .gform_wrapper .gsection_description {
  padding: 0;
  font-size: 12.5px;
  color: var(--cp-muted);
}

.cp-sub .block.contact-form .gform_wrapper .gsection {
  padding: 0;
  border: 0;
}

.cp-sub .block.contact-form .gform_wrapper .gform_drop_area {
  min-height: 0 !important;
  height: auto !important;
}

.cp-sub .block.contact-form .gform_wrapper .gform_drop_instructions {
  font-size: 14px;
  font-weight: 600;
}

/* Form 5 field 14 = "After sending this form…" (shown on the left already); field 3 = upload heading. */
.cp-sub .block.contact-form .gform_wrapper #field_5_14 {
  display: none;
}

.cp-sub .block.contact-form .gform_wrapper #field_5_3,
.cp-sub .block.contact-form .gform_wrapper #field_5_3 * {
  margin: 0;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  color: var(--cp-ink);
}

/* ---------- SEO text under the form ---------- */
.cp-business .block.text-area {
  padding: 0 var(--cp-gutter) 64px !important;
}

.cp-business .block.text-area > .container {
  max-width: none;
  padding: 0;
}

.cp-business .block.text-area p {
  max-width: 820px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cp-muted);
}

@media (min-width: 992px) {
  .cp-business .block.header.header--split {
    padding-bottom: 110px !important;
  }

  .cp-business .block.header.header--split .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .cp-business .header__checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-sub.cp-business .block.usp-section {
    padding: 110px 56px !important;
  }

  .cp-sub.cp-business .block.usp-section > .container {
    display: block;
    padding: 0;
  }

  .cp-sub.cp-business .block.usp-section .section-head {
    margin-bottom: 48px !important;
  }

  .cp-sub.cp-business .block.usp-section h2 {
    font-size: 40px !important;
  }

  .cp-sub.cp-business .block.usp-section .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .cp-business .block.content-image.bg-color-white .row > div:not(:has(.image)) {
    padding: 96px 80px;
  }

  .cp-business .block.content-image.bg-color-white .image {
    height: 100% !important;
    min-height: 520px;
  }

  .cp-sub .block.contact-form {
    padding: 110px 56px !important;
  }

  .cp-sub .block.contact-form > .container > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 72px;
    align-items: start;
  }

  .cp-sub .block.contact-form > .container > .row > div {
    width: auto;
    max-width: none;
    margin: 0 !important;
  }

  .cp-sub .block.contact-form .sticky-gsap h2 {
    font-size: 40px;
  }

  .cp-sub .block.contact-form .form {
    padding: 40px;
  }

  .cp-business .block.text-area {
    padding: 0 56px 110px !important;
  }
}

/* ================= Contact (.cp-contact), design "ChronoPad Contact" ================= */
/* Form panel and fields: shared .cp-sub .block.contact-form rules above (For Business). */
.cp-contact .block.contact-form {
  padding-top: 24px !important;
}

.cp-contact .block.contact-form .breadcrumbs,
.cp-contact .block.contact-form .breadcrumbs a {
  font-size: 12.5px;
  color: oklch(50% 0.015 260) !important;
}

.cp-contact .block.contact-form .breadcrumbs {
  margin: 0 0 32px;
}

.cp-contact .block.contact-form .breadcrumbs .breadcrumb_last {
  color: var(--cp-ink);
}

.cp-contact .block.contact-form .sticky-gsap h1 {
  margin: 0 0 22px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
  text-wrap: pretty;
}

.cp-contact .contact-form__info p {
  max-width: 420px;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-muted);
}

.cp-contact .cp-contact-details__list {
  display: grid;
  width: 100%;
  gap: 18px;
  margin: 32px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--cp-line-strong);
  list-style: none;
}

.cp-contact .cp-contact-details__list li::before {
  display: none;
}

.cp-contact .cp-contact-details__list a {
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto !important;
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-contact .cp-contact-details__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cp-line-strong);
  font-size: 15px;
  color: var(--cp-navy);
}

.cp-contact .cp-contact-details__list a > span:last-child {
  display: grid;
  gap: 2px;
}

.cp-contact .cp-contact-details__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-muted);
}

.cp-contact .cp-contact-details__value {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.cp-contact .block .cp-contact-details .cp-contact-details__heading {
  margin: 36px 0 10px;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-muted) !important;
}

.cp-contact .cp-contact-details__text {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cp-ink);
}

.cp-contact .cp-contact-details__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cp-contact .cp-contact-details__links .cp-link {
  margin: 0;
}

.cp-sub .block .cp-facts--compact {
  margin: 0;
}

.cp-sub .block .cp-facts--compact li {
  padding: 9px 0 !important;
  font-size: 14px !important;
  line-height: 1.5;
}

.cp-contact .block.contact-form .gform_footer .btn,
.cp-contact .block.contact-form .gform_footer button,
.cp-contact .block.contact-form .gform_footer input[type="submit"] {
  width: auto;
  height: auto;
  padding: 16px 32px !important;
  background: var(--cp-ink) !important;
}

@media (min-width: 992px) {
  .cp-contact .block.contact-form {
    padding-top: 32px !important;
  }

  .cp-contact .block.contact-form .breadcrumbs {
    margin-bottom: 40px;
  }

  /* Breadcrumb sits above both columns in the design: start the form level with the H1. */
  .cp-contact .block.contact-form > .container > .row > div:last-child {
    margin-top: 56px !important;
  }

  .cp-contact .block.contact-form .sticky-gsap h1 {
    font-size: 52px;
  }
}

/* ================= FAQ (.cp-faq), design "ChronoPad FAQ" ================= */

/* ---------- Header: grey, title left, search right ---------- */
.cp-sub .block.header.header--search {
  background: var(--cp-grey) !important;
  padding: 24px var(--cp-gutter) 56px !important;
}

.cp-sub .block.header.header--search > .container {
  max-width: none;
  padding: 0;
}

.cp-sub .block.header.header--search .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-sub .block.header.header--search .row > div {
  padding: 0;
}

.cp-sub .block.header.header--search .breadcrumbs,
.cp-sub .block.header.header--search .breadcrumbs a {
  font-size: 12.5px;
  color: oklch(50% 0.015 260) !important;
}

.cp-sub .block.header.header--search .breadcrumbs {
  margin: 0 0 32px !important;
}

.cp-sub .block.header.header--search .breadcrumbs .breadcrumb_last {
  color: var(--cp-ink);
}

.cp-sub .block.header.header--search h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
}

.cp-sub .header__search {
  position: relative;
  margin-top: 28px;
}

.cp-faq-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--cp-line-strong);
  background: #fff;
}

.cp-faq-search i {
  font-size: 15px;
  color: var(--cp-muted);
}

.cp-faq-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--cp-ink);
  outline: none;
}

.cp-faq-search:focus-within {
  outline: 2px solid var(--cp-navy);
  outline-offset: 2px;
}

.cp-faq-search__results {
  position: absolute;
  z-index: 5;
  top: 100%;
  right: 0;
  left: 0;
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid var(--cp-line-strong);
  background: #fff;
  list-style: none;
}

.cp-faq-search__results li::before {
  display: none;
}

.cp-faq-search__results a,
.cp-faq-search__empty {
  display: block;
  width: auto !important;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cp-line);
  font-size: 14.5px;
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-faq-search__results a:hover,
.cp-faq-search__results a:focus-visible {
  background: var(--cp-grey);
}

.cp-faq-search__empty {
  color: var(--cp-muted);
}

/* ---------- Category cards ---------- */
.cp-faq .block.faq {
  padding: 64px var(--cp-gutter) !important;
}

.cp-faq .block.faq > .container {
  max-width: none;
  padding: 0;
}

.cp-faq .block.faq > .container > .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}

.cp-faq .block.faq > .container > .row > div {
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}

.cp-faq .block.faq .card.faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 36px 32px;
  border: 1px solid var(--cp-line-strong) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.cp-faq .block.faq .card.faq .icon {
  display: none;
}

.cp-faq .block.faq .card.faq h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--cp-ink);
}

.cp-faq .block.faq .card.faq > p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cp-muted);
}

.cp-faq .block.faq .read-more-links {
  width: 100%;
  margin: 0 0 22px !important;
  padding: 0;
  border-top: 1px solid var(--cp-line-strong);
  list-style: none;
}

.cp-faq .block.faq .read-more-links li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--cp-line-strong);
}

.cp-faq .block.faq .read-more-links li::before {
  display: none;
}

.cp-faq .block.faq .read-more-links a.read-more {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100% !important;
  padding: 14px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-faq .block.faq .read-more-links a.read-more::after {
  content: "\2192" !important;
  flex-shrink: 0;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 14px;
  color: var(--cp-navy);
}

.cp-faq .block.faq .faq__all {
  position: relative;
  z-index: 2;
  margin-top: auto;
}

/* ---------- Support: grey band, white form panel ---------- */
.cp-faq .block.contact-form {
  background: var(--cp-grey) !important;
}

.cp-faq .block.contact-form .form {
  background: #fff !important;
}

.cp-faq .block.contact-form .gform_footer .btn,
.cp-faq .block.contact-form .gform_footer button,
.cp-faq .block.contact-form .gform_footer input[type="submit"] {
  width: auto;
  height: auto;
  padding: 16px 32px !important;
  background: var(--cp-ink) !important;
}

@media (min-width: 992px) {
  .cp-sub .block.header.header--search {
    padding: 32px 56px 80px !important;
  }

  .cp-sub .block.header.header--search .breadcrumbs {
    margin-bottom: 40px !important;
  }

  .cp-sub .block.header.header--search .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: end;
  }

  .cp-sub .block.header.header--search .row > div {
    width: auto;
    max-width: none;
  }

  .cp-sub .block.header.header--search h1 {
    font-size: 52px;
  }

  .cp-sub .header__search {
    max-width: 520px;
    margin: 0;
  }

  .cp-faq .block.faq {
    padding: 96px 56px !important;
  }

  .cp-faq .block.faq > .container > .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-faq .block.contact-form .row > div:last-child {
    margin-top: 0 !important;
  }
}

/* ================= Blog (.cp-blog), design "ChronoPad Blog" ================= */
.cp-blog .block.post-loop--page {
  /* Full bleed out of the page container, like the .width-100 blocks. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 24px var(--cp-gutter) 64px !important;
}

.cp-blog .block.post-loop--page > .container {
  max-width: none;
  padding: 0;
}

.cp-blog .block.post-loop--page > .container > .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.cp-blog .post-loop--page .breadcrumbs,
.cp-blog .post-loop--page .breadcrumbs a {
  font-size: 12.5px;
  color: oklch(50% 0.015 260) !important;
}

.cp-blog .post-loop--page .breadcrumbs {
  margin: 0 0 32px;
}

.cp-blog .post-loop--page .breadcrumbs .breadcrumb_last {
  color: var(--cp-ink);
}

.cp-blog .post-loop__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
  margin-bottom: 40px;
}

.cp-blog .post-loop__head h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
}

.cp-blog .post-loop__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-blog .cp-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--cp-line-strong);
  border-radius: 0;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cp-ink);
  cursor: pointer;
}

.cp-blog .cp-pill:has(input:checked),
.cp-blog .cp-pill--all.d-none {
  /* "All" is active while the script hides the reset button (no filter set). */
  display: inline-flex !important;
  border-color: var(--cp-ink);
  background: var(--cp-ink);
  color: #fff;
}

.cp-blog .cp-pill:focus-within,
.cp-blog .cp-pill:focus-visible {
  outline: 2px solid var(--cp-navy);
  outline-offset: 2px;
}

/* Side filter card and mobile filter button replaced by the pills. */
.cp-blog .post-loop--page > .container > .row > .col-lg-3,
.cp-blog .post-loop--page .d-lg-none.mb-3 {
  display: none !important;
}

.cp-blog .post-loop--page > .container > .row > .col-lg-9 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.cp-blog .post-loop--page .js-blog-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 40px 24px !important;
}

/* ---------- Cards ---------- */
.cp-blog .post-loop--page .card.news {
  display: grid;
  gap: 16px;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.cp-blog .post-loop--page .card.news .image,
.cp-blog .post-loop--page .card.news .image a {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  border-radius: 0 !important;
  overflow: hidden;
}

.cp-blog .post-loop--page .card.news .image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 !important;
}

.cp-blog .post-loop--page .card.news .content {
  display: grid !important;
  gap: 10px;
  padding: 0 !important;
}

.cp-blog .post-loop--page .card.news .info {
  display: block;
  margin: 0;
}

.cp-blog .post-loop--page .card.news .info > span {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-navy);
}

.cp-blog .post-loop--page .card.news .info > span + span {
  display: none;
}

.cp-blog .post-loop--page .card.news h3,
.cp-blog .post-loop--page .card.news h3 a {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cp-ink);
  text-decoration: none;
  text-wrap: pretty;
}

.cp-blog .post-loop--page .news__excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cp-muted);
}

.cp-blog .post-loop--page .card.news .btn {
  display: none;
}

/* ---------- Featured: first post of each page ---------- */
.cp-blog .post-loop--page .is-featured .card.news {
  gap: 0;
  background: var(--cp-grey) !important;
}

.cp-blog .post-loop--page .is-featured .card.news .content {
  gap: 18px;
  padding: 32px 24px !important;
}

.cp-blog .post-loop--page .card.news .info .news__featured {
  display: none;
}

.cp-blog .post-loop--page .is-featured .card.news .info .news__featured {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.cp-blog .post-loop--page .is-featured .card.news h3,
.cp-blog .post-loop--page .is-featured .card.news h3 a {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cp-blog .post-loop--page .is-featured .news__excerpt {
  font-size: 15.5px;
  line-height: 1.65;
}

.cp-blog .post-loop--page .is-featured .card.news .btn {
  display: inline-flex;
  width: fit-content;
  margin: 8px 0 0;
  padding: 0;
  min-height: 0;
  height: auto;
  border: 0 !important;
  background: none !important;
}

.cp-blog .post-loop--page .is-featured .card.news .btn .btn__bg,
.cp-blog .post-loop--page .is-featured .card.news .btn .btn__circle-wrap {
  display: none;
}

.cp-blog .post-loop--page .is-featured .card.news .btn .btn-text-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-navy) !important;
}

.cp-blog .post-loop--page .is-featured .card.news .btn i {
  margin: 0;
  font-size: 13px;
  color: var(--cp-navy);
}

.cp-blog .post-loop--page .pagination {
  margin-top: 56px;
}

@media (min-width: 992px) {
  .cp-blog .block.post-loop--page {
    padding: 32px 56px 110px !important;
  }

  .cp-blog .post-loop--page .breadcrumbs {
    margin-bottom: 40px;
  }

  .cp-blog .post-loop__head {
    margin-bottom: 56px;
  }

  .cp-blog .post-loop__head h1 {
    font-size: 52px;
  }

  .cp-blog .post-loop--page .js-blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-blog .post-loop--page .is-featured {
    grid-column: 1 / -1;
    margin-bottom: 56px;
  }

  .cp-blog .post-loop--page .is-featured .card.news {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .cp-blog .post-loop--page .is-featured .card.news .image,
  .cp-blog .post-loop--page .is-featured .card.news .image a {
    height: 100% !important;
    max-height: none !important;
  }

  .cp-blog .post-loop--page .is-featured .card.news .image img {
    height: 100%;
    min-height: 460px;
    aspect-ratio: auto;
  }

  .cp-blog .post-loop--page .is-featured .card.news .content {
    align-content: center;
    padding: 56px !important;
  }

  .cp-blog .post-loop--page .is-featured .card.news h3,
  .cp-blog .post-loop--page .is-featured .card.news h3 a {
    font-size: 34px;
  }
}

/* ================= Cart, checkout, account (.cp-shop), designs "Cart" / "Checkout" / "Account" ================= */
/* Restyle only: square, flat, Manrope, grey summary panel. Header and footer stay hidden here. */
.cp-shop .site,
.cp-shop .site *:not(i):not([class*="fa-"]) {
  font-family: "Manrope", sans-serif;
}

.cp-shop .cp-shop__title {
  margin: 16px 0 32px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
}

.cp-shop .breadcrumbs,
.cp-shop .breadcrumbs a {
  font-size: 12.5px;
  color: oklch(50% 0.015 260) !important;
}

.cp-shop .breadcrumbs .breadcrumb_last {
  color: var(--cp-ink) !important;
}

/* ---------- Cards → flat ---------- */
.cp-shop .woocommerce-cart-form__cart-item,
.cp-shop .cart-sidebar__inner,
.cp-shop .checkout-main,
.cp-shop .checkout-sidebar__inner,
.cp-shop .secure-payment-block,
.cp-shop .chronopad-login__card,
.cp-shop .woocommerce-checkout-review-order-table tr.cart_item {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cp-shop .checkout-main {
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: none !important;
}

.cp-shop .woocommerce-cart-form__cart-item {
  border: 0 !important;
  border-bottom: 1px solid var(--cp-line-strong) !important;
  background: none !important;
}

.cp-shop .woocommerce-cart-form__contents {
  border-top: 1px solid var(--cp-line-strong);
}

.cp-shop .product-name__thumb img,
.cp-shop .woocommerce-checkout-review-order-table img {
  border-radius: 0 !important;
  background: var(--cp-grey) !important;
}

.cp-shop .product-name-link,
.cp-shop .product-name-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--cp-ink);
  text-decoration: none;
}

.cp-shop .cart-item-attribute__label {
  color: var(--cp-muted);
}

.cp-shop .woocommerce-cart-form__cart-item .remove {
  border-radius: 0 !important;
}

.cp-shop .actions .btn,
.cp-shop .actions button {
  border-radius: 0 !important;
}

/* Summary panels: grey, no border. */
.cp-shop .cart-sidebar__inner,
.cp-shop .checkout-sidebar__inner {
  border: 0 !important;
  background: var(--cp-grey) !important;
}

.cp-shop .cart-overview__title,
.cp-shop .checkout-sidebar__inner h2,
.cp-shop .checkout-main h2,
.cp-shop .checkout-main h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cp-ink);
}

.cp-shop .cart_totals th,
.cp-shop .cart_totals td,
.cp-shop .woocommerce-checkout-review-order-table th,
.cp-shop .woocommerce-checkout-review-order-table td {
  border-color: var(--cp-line-strong) !important;
}

.cp-shop .woocommerce-checkout-review-order-table tr.cart_item {
  border: 0 !important;
  background: none !important;
}

.cp-shop .secure-payment-block {
  border-color: var(--cp-line-strong) !important;
  background: #fff !important;
}

/* ---------- Fields: square, 48px ---------- */
.cp-shop .site-main input.input-text,
.cp-shop .site-main input.form-control,
.cp-shop .site-main select,
.cp-shop .site-main textarea,
.cp-shop .site-main .select2-container .select2-selection {
  min-height: 48px;
  border: 1px solid var(--cp-line-strong) !important;
  border-radius: 0 !important;
  background-color: #fff;
  box-shadow: none !important;
  font-size: 15px;
  color: var(--cp-ink);
}

.cp-shop .site-main input.input-text:focus-visible,
.cp-shop .site-main input.form-control:focus-visible,
.cp-shop .site-main select:focus-visible,
.cp-shop .site-main textarea:focus-visible {
  outline: 2px solid var(--cp-navy);
  outline-offset: 0;
}

.cp-shop .site-main .form-row label,
.cp-shop .site-main .woocommerce-form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-ink);
}

.cp-shop .site-main input[type="checkbox"],
.cp-shop .site-main input[type="radio"] {
  accent-color: var(--cp-navy);
}

/* Coupon apply: black square button (cart and checkout). */
.cp-shop .coupon__field .button-apply-coupon,
.cp-shop .coupon__field button,
.cp-shop .coupon .button {
  border-radius: 0 !important;
  background: var(--cp-ink) !important;
  border-color: var(--cp-ink) !important;
  color: #fff !important;
}

/* ---------- Payment methods: square tiles, navy when selected ---------- */
.cp-shop.woocommerce-checkout .checkout-main .woocommerce-checkout-payment li.wc_payment_method,
.cp-shop .site-main li.wc_payment_method {
  border: 1px solid var(--cp-line-strong) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.cp-shop.woocommerce-checkout .checkout-main .woocommerce-checkout-payment li.wc_payment_method.is-selected,
.cp-shop.woocommerce-checkout .checkout-main .woocommerce-checkout-payment li.wc_payment_method:has(input:checked),
.cp-shop.woocommerce-checkout .checkout-main .woocommerce-checkout-payment li.wc_payment_method:has(> input.input-radio:checked),
.cp-shop .site-main li.wc_payment_method:has(input:checked) {
  border-radius: 0 !important;
  border-color: var(--cp-ink) !important;
  background: #fff !important;
}

/* ---------- Primary buttons: square orange ---------- */
.cp-shop .checkout-button,
.cp-shop .wc-proceed-to-checkout .btn,
.cp-shop #place_order,
.cp-shop .place-order .btn,
.cp-shop .woocommerce-form-login__submit,
.cp-shop .woocommerce-form-register__submit {
  border-radius: 0 !important;
}

.cp-shop .wc-proceed-to-checkout .btn .btn__bg,
.cp-shop .place-order .btn .btn__bg {
  border-radius: 0 !important;
}

/* ---------- Account: plain white title area, sign in grey, register outlined ---------- */
.cp-shop .block.header {
  background: #fff !important;
}

.cp-shop .block.header .header-shape-line {
  display: none;
}

.cp-shop .block.header h1 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
}

.cp-shop .chronopad-login__card {
  border: 0 !important;
  background: var(--cp-grey) !important;
}

.cp-shop .chronopad-login__card + .chronopad-login__card,
.cp-shop .chronopad-register__card,
.cp-shop .u-column2 .chronopad-login__card {
  border: 1px solid var(--cp-line-strong) !important;
  background: #fff !important;
}

.cp-shop .chronopad-login__card [class*="icon"]:not(input):not(button) {
  display: none;
}

.cp-shop .woocommerce-form-login__submit,
.cp-shop .woocommerce-form-register__submit {
  width: 100%;
  min-height: 54px;
  border: 0 !important;
  background: #f26a1b !important;
  color: #fff !important;
  justify-content: center;
}

.cp-shop .woocommerce-form-register__submit {
  background: var(--cp-ink) !important;
}

.cp-shop .woocommerce-form-login__submit .btn__bg,
.cp-shop .woocommerce-form-register__submit .btn__bg,
.cp-shop .woocommerce-form-login__submit .btn__circle-wrap,
.cp-shop .woocommerce-form-register__submit .btn__circle-wrap {
  display: none;
}

@media (min-width: 992px) {
  .cp-shop .block.header h1 {
    font-size: 52px;
  }
}

@media (min-width: 992px) {
  .cp-shop .cp-shop__title {
    margin: 24px 0 40px;
    font-size: 52px;
  }
}