/*
 * New-design ("v2") product page (templates/default/product_v2.php).
 * Loaded in <head> by product::productV2() after destination_v2.css, whose
 * shared .dest-v2 components (cards, buttons, FAQ, flags, answers) it uses.
 * Everything here is scoped to .prod-v2. Pink only on Add to basket.
 */

.prod-v2 {
   padding-top: 16px;
   padding-bottom: 96px;
}

/* Layout: phone = title, then the side cards (buy, plan choice, upgrades,
   calculator), then details. Desktop = title and details left, the side
   cards stacked right in normal page flow (no sticky column, no inner
   scroll). The buy bar (.pv2-sticky) keeps Add reachable. */
.prod-v2 .pv2-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas: "hero" "side" "details";
   gap: 24px;
}

.prod-v2 .pv2-hero { grid-area: hero; min-width: 0; }
.prod-v2 .pv2-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.prod-v2 .pv2-details { grid-area: details; min-width: 0; }

@media (min-width: 960px) {
   .prod-v2 {
      padding-top: 24px;
      padding-bottom: 48px;
   }

   .prod-v2 .pv2-layout {
      grid-template-columns: minmax(0, 1fr) 400px;
      grid-template-areas: "hero side" "details side";
      grid-template-rows: auto 1fr;
      column-gap: 40px;
      row-gap: 32px;
   }

   .prod-v2 .pv2-side {
      align-self: start;
      gap: 24px;
   }
}

/* Right column cards */
.prod-v2 .pv2-side-card {
   box-sizing: border-box;
   padding: 24px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 24px;
   box-shadow: var(--dv2-shadow);
}

.prod-v2 .pv2-side-card .pv2-h2 {
   font-size: 18px;
}

/* Title */
.prod-v2 .pv2-title {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 14px;
}

.prod-v2 .pv2-flag {
   flex: 0 0 56px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 6px 18px rgba(20, 24, 58, 0.16);
   background: #fff;
}

.prod-v2 .pv2-flag-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--dv2-slate);
   font-size: 24px;
}

.prod-v2 .pv2-title h1 {
   margin: 0;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.2;
}

.prod-v2 .pv2-raw {
   margin: 4px 0 0;
   font-size: 12.5px;
   color: var(--dv2-muted);
}

@media (min-width: 768px) {
   .prod-v2 .pv2-flag {
      flex-basis: 64px;
      width: 64px;
      height: 64px;
   }

   .prod-v2 .pv2-title h1 {
      font-size: 32px;
   }
}

.prod-v2 .pv2-note {
   margin-top: 16px;
   padding: 16px 18px;
   background: var(--dv2-neutral);
   box-shadow: none;
   font-size: 14px;
   line-height: 1.55;
}

.prod-v2 .pv2-note h2 {
   margin: 0 0 4px;
   font-size: 15px;
   font-weight: 600;
}

.prod-v2 .pv2-note p {
   margin: 0;
}

/* Country notice (admin HTML from simply_country_info, printed raw). Only
   the wrapper is styled; the content is left exactly as entered. A small
   notice, not a hero. */
.prod-v2 .pv2-notice {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   box-sizing: border-box;
   max-width: 100%;
   margin-top: 16px;
   padding: 14px 16px;
   border: 1px solid #E3E6EE;
   border-radius: 14px;
   background: #F7F8FB;
   font-size: 14px;
   line-height: 1.55;
   color: #4A4F63;
   overflow-wrap: anywhere;
}

.prod-v2 .pv2-notice-icon {
   flex: 0 0 16px;
   margin-top: 2px;
   font-size: 16px;
   color: var(--dv2-slate);
}

.prod-v2 .pv2-notice-body {
   flex: 1 1 auto;
   min-width: 0;
}

.prod-v2 .pv2-notice-body > :first-child {
   margin-top: 0;
}

.prod-v2 .pv2-notice-body > :last-child {
   margin-bottom: 0;
}

/* Title: a heading, or a bold first line. */
.prod-v2 .pv2-notice-body h1,
.prod-v2 .pv2-notice-body h2,
.prod-v2 .pv2-notice-body h3,
.prod-v2 .pv2-notice-body h4,
.prod-v2 .pv2-notice-body > strong:first-child,
.prod-v2 .pv2-notice-body > b:first-child,
.prod-v2 .pv2-notice-body > p:first-child > strong:first-child:not(:only-child) {
   display: block;
   margin: 0 0 4px;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.4;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-notice-body p,
.prod-v2 .pv2-notice-body ul,
.prod-v2 .pv2-notice-body ol {
   margin: 0 0 6px;
}

/* Breaks stay plain line breaks; the break after the title collapses
   (doubled breaks are collapsed in the template). */
.prod-v2 .pv2-notice-body > strong:first-child + br,
.prod-v2 .pv2-notice-body > b:first-child + br {
   display: none;
}

.prod-v2 .pv2-notice-body strong,
.prod-v2 .pv2-notice-body b {
   color: var(--dv2-navy);
}

/* !important: the admin HTML may carry inline colours. */
.prod-v2 .pv2-notice-body a,
.prod-v2 .pv2-notice-body a * {
   color: var(--dv2-navy) !important;
   text-decoration: underline !important;
   text-underline-offset: 2px;
}

/* Buy box */
.prod-v2 .pv2-buy-card {
   padding: 24px 24px 22px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 24px;
   box-shadow: 0 10px 32px rgba(20, 24, 58, 0.08);
}

.prod-v2 .pv2-buy-for {
   margin: 0 0 4px;
   font-size: 13px;
   font-weight: 500;
   color: var(--dv2-slate);
}

.prod-v2 .pv2-price {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 4px 10px;
}

.prod-v2 .pv2-price strong {
   font-size: 34px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-price s {
   order: -1;
   width: 100%;
   font-size: 14px;
   color: var(--dv2-muted);
}

.prod-v2 .pv2-save {
   padding: 3px 10px;
   border-radius: 999px;
   background: var(--dv2-neutral);
   border: 1px solid var(--dv2-border);
   font-size: 12px;
   font-weight: 600;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-facts {
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
}

.prod-v2 .pv2-facts li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin: 0;
   padding: 12px 0;
   border-top: 1px solid var(--dv2-border);
   font-size: 15px;
   line-height: 1.5;
   color: var(--dv2-body);
}

.prod-v2 .pv2-facts li:first-child {
   border-top: 0;
}

.prod-v2 .pv2-facts i {
   flex: 0 0 18px;
   margin-top: 2px;
   color: var(--dv2-slate);
   text-align: center;
}

.prod-v2 .pv2-facts strong {
   color: var(--dv2-navy);
}

.prod-v2 .pv2-facts a {
   color: var(--dv2-navy);
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* Plan selector */
.prod-v2 .pv2-plans {
   margin-top: 4px;
}

.prod-v2 .pv2-facts {
   margin-top: 0;
}

.prod-v2 .pv2-label {
   margin: 0 0 8px;
   font-size: 14px;
   font-weight: 600;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-opts {
   list-style: none;
   margin: 0;
   padding: 0;
}

.prod-v2 .pv2-opt-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.prod-v2 .pv2-opts li {
   margin: 0 0 10px;
}

.prod-v2 .pv2-opts:not(.is-open) .pv2-opt-extra {
   display: none;
}

/* Plan family header (e.g. TikTok and ChatGPT access): same style as the
   country page family sections, one step smaller. */
.prod-v2 .pv2-fam {
   margin: 32px 0 12px;
   padding-top: 20px;
   border-top: 1px solid var(--dv2-border);
   min-width: 0;
}

/* The standard group heads the list: no divider above it. */
.prod-v2 .pv2-fam-standard {
   margin-top: 4px;
   padding-top: 0;
   border-top: 0;
}

.prod-v2 .pv2-fam-head {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   gap: 6px 12px;
   min-width: 0;
}

.prod-v2 .pv2-fam-icon {
   flex: 0 0 32px;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--dv2-neutral);
   color: var(--dv2-slate);
   font-size: 13px;
}

.prod-v2 .pv2-fam-title {
   margin: 0;
   min-width: 0;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.25;
   color: var(--dv2-navy);
   overflow-wrap: anywhere;
}

.prod-v2 .pv2-fam-name {
   flex: 1 1 0;
   min-width: 0;
}

.prod-v2 .pv2-fam-name .pv2-fam-title {
   display: inline;
}

.prod-v2 .pv2-fam-name .pv2-fam-count {
   margin-left: 8px;
   white-space: nowrap;
}

.prod-v2 .pv2-fam-count {
   font-size: 13px;
   color: var(--dv2-muted);
}

.prod-v2 .pv2-fam-short {
   margin: 6px 0 0;
   font-size: 14px;
   line-height: 1.55;
   color: var(--dv2-body);
   overflow-wrap: anywhere;
}

.prod-v2 .pv2-fam-more {
   margin-top: 6px;
   font-size: 14px;
   color: var(--dv2-body);
}

.prod-v2 .pv2-fam-more summary {
   cursor: pointer;
   font-weight: 600;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-fam-more p {
   margin: 4px 0 0;
   line-height: 1.5;
}

.prod-v2 .pv2-opt {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 56px;
   box-sizing: border-box;
   padding: 8px 16px;
   border: 1.5px solid var(--dv2-border);
   border-radius: 14px;
   background: #fff;
   color: var(--dv2-navy);
   text-decoration: none;
   transition: border-color .15s ease, background-color .15s ease;
}

.prod-v2 .pv2-opt:hover {
   border-color: #C9CFDB;
   color: var(--dv2-navy);
   text-decoration: none;
}

.prod-v2 .pv2-opt.is-current {
   border-color: var(--dv2-navy);
   background: #F7F8FB;
}

.prod-v2 .pv2-opt-radio {
   flex: 0 0 18px;
   width: 18px;
   height: 18px;
   box-sizing: border-box;
   border-radius: 50%;
   border: 2px solid #C9CFDB;
}

.prod-v2 .pv2-opt.is-current .pv2-opt-radio {
   border: 5px solid var(--dv2-navy);
}

.prod-v2 .pv2-opt-main {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   font-size: 14px;
   line-height: 1.3;
   color: var(--dv2-body);
}

.prod-v2 .pv2-opt-diff {
   font-size: 12px;
   color: var(--dv2-slate);
}

.prod-v2 .pv2-opt-main strong {
   color: var(--dv2-navy);
}

.prod-v2 .pv2-opt-price {
   flex: 0 0 auto;
   font-size: 14px;
   font-weight: 600;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-opt-price s {
   font-size: 12px;
   font-weight: 400;
   color: var(--dv2-muted);
}

.prod-v2 .pv2-tag {
   flex: 0 0 auto;
   padding: 2px 8px;
   border-radius: 999px;
   background: var(--dv2-navy);
   font-size: 10.5px;
   font-weight: 600;
   color: #fff;
   white-space: nowrap;
}

.prod-v2 .pv2-more {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   height: 44px;
   margin-top: 4px;
   padding: 0 16px;
   border: 1px solid var(--dv2-border);
   border-radius: 999px;
   background: var(--dv2-neutral);
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;
   color: var(--dv2-navy);
   cursor: pointer;
}

.prod-v2 .pv2-more:hover {
   border-color: #C9CFDB;
}

.prod-v2 .pv2-more i {
   font-size: 11px;
   color: var(--dv2-slate);
}

.prod-v2 .pv2-more[aria-expanded="true"] i {
   transform: rotate(180deg);
}

/* Upgrade tiles (Better value, Unlimited) and the calculator / VPN rows */
.prod-v2 .pv2-tile,
.prod-v2 .pv2-row-link {
   display: flex;
   align-items: center;
   gap: 14px;
   color: var(--dv2-body);
   text-decoration: none;
}

.prod-v2 .pv2-tile {
   margin-top: 12px;
   padding: 16px;
   border-radius: 16px;
   border: 1.5px solid var(--dv2-border);
   background: #fff;
   transition: border-color .15s ease;
}

.prod-v2 .pv2-tile:hover,
.prod-v2 .pv2-row-link:hover {
   border-color: #C9CFDB;
   color: var(--dv2-body);
   text-decoration: none;
}

.prod-v2 .pv2-tile-body {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   font-size: 14px;
   line-height: 1.5;
}

.prod-v2 .pv2-tile-body strong {
   font-size: 16px;
   font-weight: 700;
   line-height: 1.3;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-tile-icon {
   flex: 0 0 40px;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--dv2-neutral);
   color: var(--dv2-slate);
   font-size: 16px;
}

.prod-v2 .pv2-tile > .fa-chevron-right,
.prod-v2 .pv2-row-link > .fa-chevron-right {
   flex: 0 0 auto;
   font-size: 12px;
   color: var(--dv2-slate);
}

.prod-v2 .pv2-row-link {
   padding: 18px 24px;
}

.prod-v2 .pv2-row-link .pv2-tile-body strong {
   font-size: 15px;
}

/* Call to action */
.prod-v2 .pv2-cta {
   display: flex;
   gap: 10px;
   margin-top: 14px;
}

.prod-v2 .pv2-qty {
   flex: 0 0 72px;
   width: 72px;
   height: 52px;
   padding: 0 8px;
   border: 1.5px solid var(--dv2-border);
   border-radius: 12px;
   text-align-last: center;
   background: #fff;
   font-family: inherit;
   font-size: 16px;
   color: var(--dv2-navy);
   text-align: center;
}

.prod-v2 .pv2-add {
   flex: 1 1 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 52px;
   padding: 0 22px;
   border-radius: 999px;
   background: var(--dv2-pink);
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   text-decoration: none;
   white-space: nowrap;
   transition: background-color .15s ease;
}

.prod-v2 .pv2-add:hover {
   background: var(--dv2-pink-dark);
   color: #fff;
   text-decoration: none;
}

.prod-v2 .pv2-buy-top {
   container-type: inline-size;
}

.prod-v2 .pv2-trust {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 8px;
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
}

.prod-v2 .pv2-trust li {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin: 0;
   font-size: 13.5px;
   line-height: 1.4;
   color: #4A4F63;
}

.prod-v2 .pv2-trust li > i {
   flex: 0 0 16px;
   width: 16px;
   margin-top: 2px;
   font-size: 14px;
   color: var(--dv2-slate);
   text-align: center;
}

.prod-v2 .pv2-trust a {
   color: var(--dv2-slate);
   text-decoration: none;
}

.prod-v2 .pv2-trust-info {
   font-size: 12px;
}

.prod-v2 .pv2-pay {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 14px;
   padding-top: 14px;
   border-top: 1px solid #EEF0F4;
}

/* Trustpilot row after the payment logos (styles: css/v2_shared.css) */
.prod-v2 .pv2-pay + .ss-tp-row {
   margin-top: 14px;
}

/* Every logo gets the same 44x28 frame (the card-style logos fill it; Apple
   Pay, which has no background, sits on white), so the row reads evenly. */
.prod-v2 .pv2-pay img {
   box-sizing: border-box;
   width: 44px;
   height: 28px;
   padding: 0;
   border: 1px solid #E3E6EE;
   border-radius: 6px;
   background: #fff;
   object-fit: cover;
}

.prod-v2 .pv2-promo {
   margin: 12px 0 0;
   font-size: 13px;
   color: var(--dv2-body);
}

/* Details */
.prod-v2 .pv2-section {
   margin-top: 32px;
}

.prod-v2 .pv2-details .dv2-card {
   padding: 24px;
}

.prod-v2 .pv2-details > .pv2-section:first-child {
   margin-top: 0;
}

.prod-v2 .pv2-section h2,
.prod-v2 .pv2-h2 {
   margin: 0 0 12px;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.25;
}

.prod-v2 .pv2-h3 {
   margin: 22px 0 0;
   font-size: 16px;
   font-weight: 600;
}

.prod-v2 .pv2-small {
   margin: 12px 0 0;
   font-size: 13px;
   line-height: 1.55;
   color: var(--dv2-body);
}

.prod-v2 .pv2-small a,
.prod-v2 .pv2-section p a {
   color: var(--dv2-navy);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.prod-v2 .pv2-two {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
}

@media (min-width: 640px) {
   .prod-v2 .pv2-two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.prod-v2 .pv2-two h3 {
   margin: 0 0 8px;
   font-size: 15px;
   font-weight: 600;
}

.prod-v2 .pv2-crosses i {
   color: var(--dv2-slate);
}

.prod-v2 .pv2-steps {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   list-style: none;
   margin: 0;
   padding: 0;
}

@media (min-width: 768px) {
   .prod-v2 .pv2-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

.prod-v2 .pv2-steps li {
   display: flex;
   gap: 12px;
   margin: 0;
   padding: 16px;
   border-radius: 18px;
   background: #fff;
   border: 1px solid var(--dv2-border);
}

.prod-v2 .pv2-step-n {
   flex: 0 0 30px;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--dv2-navy);
   font-size: 14px;
   font-weight: 700;
   color: #fff;
}

.prod-v2 .pv2-steps h3 {
   margin: 2px 0 4px;
   font-size: 15px;
   font-weight: 600;
}

.prod-v2 .pv2-steps p {
   margin: 0;
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--dv2-body);
}

.prod-v2 .pv2-help {
   margin-top: 16px;
}

.prod-v2 .pv2-help .dv2-card {
   padding: 18px 20px;
}

.prod-v2 .pv2-help h3 {
   display: flex;
   align-items: center;
   gap: 8px;
}

.prod-v2 .pv2-help h3 i {
   color: var(--dv2-slate);
}

.prod-v2 .pv2-help p {
   margin: 0 0 12px;
   font-size: 13.5px;
   line-height: 1.55;
}

.prod-v2 .pv2-why {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 14px 24px;
   list-style: none;
   margin: 0;
   padding: 0;
}

@media (min-width: 640px) {
   .prod-v2 .pv2-why {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.prod-v2 .pv2-why li {
   display: flex;
   gap: 12px;
   margin: 0;
}

.prod-v2 .pv2-why i {
   flex: 0 0 36px;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: var(--dv2-neutral);
   color: var(--dv2-slate);
}

.prod-v2 .pv2-why h3 {
   margin: 0 0 2px;
   font-size: 15px;
   font-weight: 600;
}

.prod-v2 .pv2-why p {
   margin: 0;
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--dv2-body);
}

.prod-v2 .pv2-tp {
   margin-top: 16px;
   min-height: 24px;
}

.prod-v2 .pv2-table-wrap {
   overflow-x: auto;
}

.prod-v2 .pv2-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13.5px;
}

.prod-v2 .pv2-table th {
   padding: 8px 10px;
   border-bottom: 1px solid var(--dv2-border);
   font-size: 12px;
   font-weight: 600;
   color: var(--dv2-muted);
   text-align: left;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.prod-v2 .pv2-table td {
   padding: 9px 10px;
   border-bottom: 1px solid var(--dv2-border);
   color: var(--dv2-body);
   vertical-align: top;
}

.prod-v2 .pv2-country {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--dv2-navy);
   font-weight: 500;
}

.prod-v2 .pv2-country img {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   object-fit: cover;
}

.prod-v2 .pv2-country a {
   color: var(--dv2-navy);
}

.prod-v2 .dv2-faq .uk-accordion {
   margin: 0;
}

.prod-v2 .pv2-regions {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
}

@media (min-width: 640px) {
   .prod-v2 .pv2-regions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.prod-v2 .pv2-region {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 18px;
   color: var(--dv2-navy);
   text-decoration: none;
}

.prod-v2 .pv2-region:hover {
   color: var(--dv2-navy);
   text-decoration: none;
   border-color: #C9CFDB;
}

.prod-v2 .pv2-region > span:nth-child(2) {
   flex: 1 1 auto;
   min-width: 0;
}

.prod-v2 .pv2-region strong {
   display: block;
   font-size: 15px;
}

.prod-v2 .pv2-region span span {
   display: block;
   font-size: 13px;
   color: var(--dv2-body);
}

.prod-v2 .pv2-region-icon {
   flex: 0 0 40px;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: var(--dv2-neutral);
   color: var(--dv2-slate);
}

.prod-v2 .pv2-region .fa-chevron-right {
   color: var(--dv2-slate);
   font-size: 12px;
}

.prod-v2 .pv2-share {
   margin: 24px 0 0;
}

.prod-v2 .pv2-share-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 0;
   border: 0;
   background: none;
   font-family: inherit;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--dv2-navy);
   cursor: pointer;
}

.pv2-modal-list {
   margin: 0 0 12px;
   padding-left: 18px;
   font-size: 14px;
   line-height: 1.55;
}

/* Phone sticky buy bar */
.prod-v2 .pv2-sticky {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 990;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
   background: #fff;
   border-top: 1px solid var(--dv2-border);
   box-shadow: 0 -8px 24px rgba(20, 24, 58, 0.10);
   transform: translateY(110%);
   transition: transform .2s ease;
}

.prod-v2 .pv2-sticky.is-on {
   transform: none;
}

.prod-v2 .pv2-sticky-price {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   line-height: 1.2;
}

.prod-v2 .pv2-sticky-price span {
   font-size: 12px;
   color: var(--dv2-muted);
}

.prod-v2 .pv2-sticky-price strong {
   font-size: 19px;
   font-weight: 700;
   color: var(--dv2-navy);
}

.prod-v2 .pv2-sticky-cta {
   flex: 0 0 auto;
}

.prod-v2 .pv2-sticky .pv2-add {
   flex: 0 0 auto;
   height: 46px;
   font-size: 15px;
}

/* Quantity sits in the bar on desktop only; on phone the bar keeps the
   quantity chosen in the buy card (the hidden select stays in sync). */
.prod-v2 .pv2-sticky-cta {
   align-items: center;
   gap: 8px;
}

.prod-v2 .pv2-qty-mini,
.prod-v2 .pv2-sticky-place {
   display: none;
}

/* Desktop: a slim bar fixed under the site header. */
@media (min-width: 960px) {
   .prod-v2 .pv2-sticky {
      top: 0;
      bottom: auto;
      padding: 10px max(24px, calc((100vw - 1200px) / 2));
      border-top: 0;
      border-bottom: 1px solid var(--dv2-border);
      box-shadow: 0 8px 24px rgba(20, 24, 58, 0.08);
      /* Fully above the viewport, clear of the site header, when hidden. */
      transform: translateY(calc(-100% - 160px));
   }

   .prod-v2 .pv2-sticky-price {
      flex-direction: row;
      align-items: baseline;
      gap: 14px;
   }

   .prod-v2 .pv2-sticky-price span {
      font-size: 14px;
   }

   .prod-v2 .pv2-sticky-place {
      display: inline;
   }

   .prod-v2 .pv2-sticky .pv2-qty-mini {
      display: block;
      flex: 0 0 64px;
      width: 64px;
      height: 40px;
   }

   .prod-v2 .pv2-sticky .pv2-add {
      height: 40px;
      padding: 0 24px;
      font-size: 15px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .prod-v2 .pv2-sticky,
   .prod-v2 .pv2-opt,
   .prod-v2 .pv2-add {
      transition: none;
   }
}

/* Room for the phone buy bar so it never covers the footer for good. */
@media (max-width: 959px) {
   body.pv2-has-bar {
      padding-bottom: calc(72px + env(safe-area-inset-bottom));
   }

   /* While the buy bar is up it takes the floating nav pill's place. */
   body:has(.pv2-sticky.is-on) .mobile-bottom-nav {
      transform: translateY(calc(100% + 22px + env(safe-area-inset-bottom, 0px)));
      opacity: 0;
      pointer-events: none;
   }
}