populated from $product.description (admin-authored HTML, typically

). Same class also styles a legacy ul-as-wrapper used by the mockup (apple-client-area/store.html) for backward compatibility. Variants B + G use the same pattern at smaller scale so a single bit of HTML in the description renders consistently regardless of which variant is active. */ .st-plan-features { flex: 1; margin: 0 0 22px; font-size: 13px; color: var(--color-text-secondary); letter-spacing: -0.008em; line-height: 1.45; } .st-plan-features, .st-plan-features ul, .st-plan-features ol { list-style: none; padding: 0; } .st-plan-features ul, .st-plan-features ol { margin: 0; display: flex; flex-direction: column; gap: 9px; } .st-plan-features li { display: flex; align-items: flex-start; gap: 9px; margin: 0; } .st-plan-features li > svg { width: 14px; height: 14px; color: var(--color-green-text); flex-shrink: 0; margin-top: 1px; } /* Green checkmark bullet for plain-text

(no inline svg). Mask-image lets the bullet color follow --color-green-text in light + dark mode. */ .st-plan-features li:not(:has(> svg))::before { content: ''; display: block; width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; background-color: var(--color-green-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain; } .st-plan-features li strong, .st-plan-features li b { color: var(--color-text-primary); font-weight: 500; } .st-plan-features li.muted { color: var(--color-text-tertiary); } .st-plan-features li.muted > svg { color: var(--color-text-quaternary); } .st-plan-features li.muted:not(:has(> svg))::before { background-color: var(--color-text-quaternary); } /* Graceful fallback if admin pastes paragraphs / headings into the description. */ .st-plan-features p { margin: 0 0 8px; } .st-plan-features p:last-child { margin-bottom: 0; } .st-plan-features h1, .st-plan-features h2, .st-plan-features h3, .st-plan-features h4, .st-plan-features h5, .st-plan-features h6 { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 6px; } .st-plan-cta { height: 40px; border-radius: var(--radius-pill); background: var(--color-accent); color: #fff; border: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.008em; cursor: pointer; font-family: inherit; transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; width: 100%; } .st-plan-cta:hover { background: var(--color-accent-hover); color: #fff; } .st-plan-cta.secondary { background: transparent; color: var(--color-text-primary); border: 0.5px solid var(--color-border); } .st-plan-cta.secondary:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-light); } /* -- Compare bar (fine print under the grid) -------------- */ .st-compare { margin-top: 16px; padding: 14px 20px; border-top: 0.5px solid var(--color-border); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--color-surface-tertiary); font-size: 12px; color: var(--color-text-tertiary); letter-spacing: -0.004em; } .st-compare .spacer { flex: 1; } .st-compare a { color: var(--color-accent); text-decoration: none; font-weight: 500; } /* -- Guarantees strip (3 trust cards below the grid) ------ */ .st-guarantees { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 720px) { .st-guarantees { grid-template-columns: 1fr; } } .st-guarantee { padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; } .st-guarantee-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--color-accent-light); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .st-guarantee-ico svg { width: 15px; height: 15px; } .st-guarantee-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.008em; } .st-guarantee-sub { font-size: 11.5px; color: var(--color-text-tertiary); margin-top: 2px; line-height: 1.4; } /* -- Empty state -- used inside the main card when the selected category has no purchasable packages --------- */ .st-empty { padding: 72px 24px 64px; text-align: center; color: var(--color-text-secondary); } .st-empty-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--color-surface-secondary); color: var(--color-text-tertiary); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .st-empty-ico svg { width: 26px; height: 26px; } .st-empty-title { font-size: 17px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.014em; margin: 0 0 8px; } .st-empty-desc { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.55; letter-spacing: -0.008em; max-width: 380px; margin: 0 auto 22px; } .st-empty-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .st-empty-actions a { height: 34px; padding: 0 16px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; letter-spacing: -0.008em; transition: all var(--transition-fast); } .st-empty-actions .btn-primary { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); } .st-empty-actions .btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; } .st-empty-actions .btn-secondary { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border); } .st-empty-actions .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); } .st-empty-actions svg { width: 13px; height: 13px; } /* -- Plan variant switching (All / A / B / C / D / E / F / G / H) -- When a specific plan is chosen via the state-chip (`data-plan` set on ), every other .plan-variant AND every .st-variant-label is hidden, leaving only the selected block visible. When no data-plan is set (i.e., the state-chip "All" mode used for dev preview only), the cart wrapper falls back to Variant A -- stacking all 8 variants for one product is overwhelming for end users and was leaving the visible viewport empty after the category header. The per-wrapper fallback uses #order-standard_cart so it only applies inside the cart-flow page, not in apple-client-area mockups where stacking all variants is the intended dev behavior. */ .plan-variant { display: block; } body[data-plan="a"] .plan-variant:not(.v-a), body[data-plan="b"] .plan-variant:not(.v-b), body[data-plan="c"] .plan-variant:not(.v-c), body[data-plan="d"] .plan-variant:not(.v-d), body[data-plan="e"] .plan-variant:not(.v-e), body[data-plan="f"] .plan-variant:not(.v-f), body[data-plan="g"] .plan-variant:not(.v-g), body[data-plan="h"] .plan-variant:not(.v-h) { display: none; } /* Default-to-Variant-A when state-chip is in "All" mode (no data-plan attribute on body). The mutually-exclusive [data-plan] selectors above take precedence when the chip picks a specific variant. */ body:not([data-plan]) #order-standard_cart .plan-variant:not(.v-a) { display: none; } body:not([data-plan]) #order-standard_cart .st-variant-label { display: none; } .st-variant-label { display: flex; align-items: center; gap: 10px; padding: 10px 24px; font-size: 11px; font-weight: 600; color: var(--color-accent); letter-spacing: 0.06em; text-transform: uppercase; background: var(--color-accent-light); border-top: 0.5px solid var(--color-border); } .st-variant-label svg { width: 12px; height: 12px; } /* Hide every variant-label when a specific variant is picked */ body[data-plan] .st-variant-label { display: none; } /* -- Variant B -- 4 minimal packages ------------------------- 4-column default with :has() collapses to 3 / 2 / 1 columns when fewer packages exist (same pattern as .st-pricing for Variant A). Without this a single-product category renders as a narrow 1/4-width card with three empty grid tracks beside it. */ .st-pricing-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 20px 24px; justify-content: center; } .st-pricing-b:has(.st-plan-b:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 280px)); } .st-pricing-b:has(.st-plan-b:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 320px)); } .st-pricing-b:has(.st-plan-b:only-child) { grid-template-columns: minmax(0, 360px); } @media (max-width: 1040px) { .st-pricing-b, .st-pricing-b:has(.st-plan-b:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 320px)); } } @media (max-width: 540px) { .st-pricing-b, .st-pricing-b:has(.st-plan-b:only-child), .st-pricing-b:has(.st-plan-b:nth-child(2):last-child), .st-pricing-b:has(.st-plan-b:nth-child(3):last-child) { grid-template-columns: minmax(0, 360px); } } .st-plan-b { padding: 20px 18px 18px; border: 0.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); display: flex; flex-direction: column; transition: all var(--transition-fast); position: relative; } .st-plan-b:hover { border-color: var(--color-accent); background: var(--color-accent-light); } .st-plan-b.featured { border-color: var(--color-accent); background: var(--color-accent-light); } .st-plan-b-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.008em; margin-bottom: 4px; } .st-plan-b-tag { font-size: 11.5px; color: var(--color-text-tertiary); letter-spacing: -0.004em; margin-bottom: 12px; min-height: 16px; } .st-plan-b-price { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; margin-bottom: 12px; } .st-plan-b-price .currency { font-size: 14px; color: var(--color-text-secondary); margin-top: 2px; } .st-plan-b-price .amount { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; color: var(--color-text-primary); line-height: 1; } .st-plan-b-price .period { font-size: 11.5px; color: var(--color-text-tertiary); margin-left: 2px; } /* Description body for Variant B — same admin-authored HTML as Variant A, smaller scale to suit the denser 4-up card chrome. See .st-plan-features for the full pattern. */ .st-plan-b-specs { flex: 1; margin: 0 0 14px; font-size: 12px; color: var(--color-text-secondary); letter-spacing: -0.004em; line-height: 1.45; } .st-plan-b-specs, .st-plan-b-specs ul, .st-plan-b-specs ol { list-style: none; padding: 0; } .st-plan-b-specs ul, .st-plan-b-specs ol { margin: 0; display: flex; flex-direction: column; gap: 6px; } .st-plan-b-specs li { display: flex; align-items: flex-start; gap: 7px; margin: 0; } .st-plan-b-specs li > svg { width: 12px; height: 12px; color: var(--color-green-text); flex-shrink: 0; margin-top: 2px; } .st-plan-b-specs li:not(:has(> svg))::before { content: ''; display: block; width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; background-color: var(--color-green-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain; } .st-plan-b-specs li strong, .st-plan-b-specs li b { color: var(--color-text-primary); font-weight: 500; } .st-plan-b-specs p { margin: 0 0 6px; } .st-plan-b-specs p:last-child { margin-bottom: 0; } .st-plan-b-specs h1, .st-plan-b-specs h2, .st-plan-b-specs h3, .st-plan-b-specs h4, .st-plan-b-specs h5, .st-plan-b-specs h6 { font-size: 12px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; } .st-plan-b-cta { height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: transparent; border: 0.5px solid var(--color-border); color: var(--color-text-primary); font-size: 12.5px; font-weight: 500; letter-spacing: -0.008em; cursor: pointer; font-family: inherit; transition: all var(--transition-fast); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .st-plan-b-cta:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .st-plan-b.featured .st-plan-b-cta { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .st-plan-b.featured .st-plan-b-cta:hover { background: var(--color-accent-hover); } /* -- Variant C -- 5 horizontal rows ------------------------- */ .st-rows { padding: 0; } .st-row { display: grid; grid-template-columns: 180px 1fr auto auto; align-items: center; gap: 20px; padding: 16px 24px; border-bottom: 0.5px solid var(--color-border); transition: background var(--transition-fast); } .st-row:last-child { border-bottom: 0; } .st-row:hover { background: rgba(0, 0, 0, 0.02); } @media (max-width: 720px) { .st-row { grid-template-columns: 1fr; gap: 10px; } } .st-row.featured { background: var(--color-accent-light); position: relative; } .st-row.featured::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); } .st-row-name { display: flex; flex-direction: column; gap: 2px; } .st-row-name strong { font-size: 14px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.012em; } .st-row-name span { font-size: 11.5px; color: var(--color-text-tertiary); letter-spacing: -0.004em; } .st-row-specs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--color-text-secondary); letter-spacing: -0.004em; } .st-row-spec { display: inline-flex; align-items: center; gap: 5px; } .st-row-spec svg { width: 12px; height: 12px; color: var(--color-green-text); flex-shrink: 0; } .st-row-spec strong { color: var(--color-text-primary); font-weight: 500; } .st-row-price { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; } .st-row-price .currency { font-size: 13px; color: var(--color-text-secondary); } .st-row-price .amount { font-size: 22px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.02em; } .st-row-price .period { font-size: 11.5px; color: var(--color-text-tertiary); margin-left: 2px; } .st-row-cta { height: 32px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--color-surface); border: 0.5px solid var(--color-border); color: var(--color-text-primary); font-size: 12.5px; font-weight: 500; letter-spacing: -0.008em; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .st-row-cta:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .st-row.featured .st-row-cta { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } /* -- Variant D -- comparison table --------------------------- */ .st-compare-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .st-compare-tbl th, .st-compare-tbl td { padding: 14px 18px; border-bottom: 0.5px solid var(--color-border); text-align: center; letter-spacing: -0.008em; } .st-compare-tbl th:first-child, .st-compare-tbl td:first-child { text-align: left; font-weight: 500; color: var(--color-text-secondary); width: 30%; } .st-compare-tbl thead th { padding: 20px 18px 16px; font-weight: 600; border-bottom: 0.5px solid var(--color-border); background: var(--color-surface-tertiary); vertical-align: top; } .st-compare-tbl thead th.featured { background: var(--color-accent-light); position: relative; } .st-compare-tbl thead th.featured::before { content: "Most popular"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .st-compare-plan-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.012em; margin-top: 8px; } .st-compare-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: 6px; font-variant-numeric: tabular-nums; } .st-compare-plan-price .currency { font-size: 12px; color: var(--color-text-secondary); } .st-compare-plan-price .amount { font-size: 24px; font-weight: 600; letter-spacing: -0.022em; color: var(--color-text-primary); } .st-compare-plan-price .period { font-size: 11px; color: var(--color-text-tertiary); margin-left: 2px; } .st-compare-tbl tbody tr:last-child td { border-bottom: 0; } .st-compare-tbl td.featured { background: var(--color-accent-light); } .st-compare-val { font-weight: 500; color: var(--color-text-primary); } .st-compare-val.muted { color: var(--color-text-quaternary); font-weight: 400; } .st-compare-check { color: var(--color-green-text); } .st-compare-x { color: var(--color-text-quaternary); } .st-compare-check svg, .st-compare-x svg { width: 14px; height: 14px; } .st-compare-footer { padding: 18px; display: grid; grid-template-columns: 30% 1fr 1fr 1fr; gap: 0; } .st-compare-footer > * { padding: 0 18px; } .st-compare-footer-cta { display: flex; justify-content: center; } /* -- Variant E -- Bento asymmetric --------------------------- */ .st-bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; padding: 0 20px 24px; } @media (max-width: 720px) { .st-bento { grid-template-columns: 1fr; } } .st-bento-hero { grid-column: 1 / -1; padding: 28px 28px 24px; border: 0.5px solid var(--color-accent); border-radius: var(--radius-lg, 14px); background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-surface) 70%); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; position: relative; } @media (max-width: 600px) { .st-bento-hero { grid-template-columns: 1fr; } } .st-bento-hero .st-plan-badge { position: absolute; top: -10px; left: 28px; } .st-bento-hero-name { font-size: 22px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.02em; margin: 0 0 4px; } .st-bento-hero-tag { font-size: 13.5px; color: var(--color-text-secondary); letter-spacing: -0.008em; margin: 0 0 14px; } .st-bento-hero-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--color-text-secondary); letter-spacing: -0.004em; } .st-bento-hero-specs span { display: inline-flex; align-items: center; gap: 5px; } .st-bento-hero-specs span::before { content: "\2713"; color: var(--color-accent); font-weight: 700; } .st-bento-hero-specs strong { color: var(--color-text-primary); font-weight: 500; } .st-bento-hero-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } @media (max-width: 600px) { .st-bento-hero-right { text-align: left; align-items: flex-start; } } .st-bento-hero-price { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; } .st-bento-hero-price .currency { font-size: 20px; color: var(--color-text-secondary); } .st-bento-hero-price .amount { font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--color-text-primary); } .st-bento-hero-price .period { font-size: 14px; color: var(--color-text-tertiary); margin-left: 4px; } .st-bento-hero-cta { height: 40px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--color-accent); color: #fff; border: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.008em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .st-bento-hero-cta:hover { background: var(--color-accent-hover); color: #fff; } .st-bento-mini { padding: 20px 20px 18px; border: 0.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); display: flex; flex-direction: column; } .st-bento-mini-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.012em; } .st-bento-mini-tag { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; } .st-bento-mini-price { margin-top: 14px; display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; } .st-bento-mini-price .currency { font-size: 14px; color: var(--color-text-secondary); } .st-bento-mini-price .amount { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.028em; color: var(--color-text-primary); } .st-bento-mini-price .period { font-size: 12px; color: var(--color-text-tertiary); margin-left: 2px; } .st-bento-mini-specs { margin: 14px 0 16px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-secondary); flex: 1; } .st-bento-mini-specs strong { color: var(--color-text-primary); font-weight: 500; } .st-bento-mini-cta { height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: transparent; border: 0.5px solid var(--color-border); color: var(--color-text-primary); font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .st-bento-mini-cta:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* -- Variant F -- Segmented bar ------------------------------ */ .st-seg { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 20px 24px; border: 0.5px solid var(--color-border); border-radius: var(--radius-lg, 14px); overflow: hidden; background: var(--color-surface); } @media (max-width: 720px) { .st-seg { grid-template-columns: 1fr; } } .st-seg-col { padding: 24px 22px 22px; display: flex; flex-direction: column; border-right: 0.5px solid var(--color-border); position: relative; } .st-seg-col:last-child { border-right: 0; } @media (max-width: 720px) { .st-seg-col { border-right: 0; border-bottom: 0.5px solid var(--color-border); } .st-seg-col:last-child { border-bottom: 0; } } .st-seg-col.featured { background: var(--color-accent-light); } .st-seg-col.featured::before { content: "Most popular"; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .st-seg-col.featured .st-seg-name { margin-top: 14px; } .st-seg-name { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--color-text-primary); } .st-seg-tag { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; min-height: 32px; } .st-seg-price { display: flex; align-items: baseline; gap: 3px; margin: 14px 0 14px; font-variant-numeric: tabular-nums; } .st-seg-price .currency { font-size: 16px; color: var(--color-text-secondary); } .st-seg-price .amount { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--color-text-primary); } .st-seg-price .period { font-size: 12px; color: var(--color-text-tertiary); margin-left: 3px; } .st-seg-specs { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--color-text-secondary); flex: 1; } .st-seg-specs strong { color: var(--color-text-primary); font-weight: 500; } .st-seg-cta { height: 34px; padding: 0 16px; border-radius: var(--radius-pill); background: transparent; border: 0.5px solid var(--color-border); color: var(--color-text-primary); font-size: 12.5px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .st-seg-cta:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .st-seg-col.featured .st-seg-cta { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .st-seg-col.featured .st-seg-cta:hover { background: var(--color-accent-hover); } /* -- Variant G -- Spec matrix (label/value rows) ------------- 3-column default with :has() collapses for groups with fewer packages -- same pattern as Variants A and B. */ .st-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 20px 24px; justify-content: center; } .st-matrix:has(.st-matrix-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 380px)); } .st-matrix:has(.st-matrix-card:only-child) { grid-template-columns: minmax(0, 420px); } @media (max-width: 900px) { .st-matrix, .st-matrix:has(.st-matrix-card:only-child), .st-matrix:has(.st-matrix-card:nth-child(2):last-child) { grid-template-columns: minmax(0, 420px); } } .st-matrix-card { border: 0.5px solid var(--color-border); border-radius: var(--radius-lg, 14px); background: var(--color-surface); display: flex; flex-direction: column; overflow: hidden; } .st-matrix-card.featured { border-color: var(--color-accent); background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-surface) 80px); box-shadow: 0 4px 20px rgba(0,113,227,0.08); } .st-matrix-head { padding: 22px 22px 18px; border-bottom: 0.5px solid var(--color-border); text-align: center; } .st-matrix-card.featured .st-matrix-head { border-bottom-color: rgba(0,113,227,0.2); } .st-matrix-eyebrow { font-size: 10.5px; font-weight: 600; color: var(--color-accent); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .st-matrix-name { font-size: 17px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.014em; margin: 0; } /* Description body for Variant G — same admin-authored HTML as Variants A and B. Was previously a label/value matrix sourced from $product.features; now mirrors A/B so admins write one set of

and it renders consistently across all three variants. */ .st-matrix-specs { padding: 14px 22px; flex: 1; font-size: 12.5px; color: var(--color-text-secondary); letter-spacing: -0.004em; line-height: 1.45; } .st-matrix-specs, .st-matrix-specs ul, .st-matrix-specs ol { list-style: none; } .st-matrix-specs ul, .st-matrix-specs ol { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .st-matrix-specs li { display: flex; align-items: flex-start; gap: 8px; margin: 0; } .st-matrix-specs li > svg { width: 13px; height: 13px; color: var(--color-green-text); flex-shrink: 0; margin-top: 1px; } .st-matrix-specs li:not(:has(> svg))::before { content: ''; display: block; width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; background-color: var(--color-green-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain; } .st-matrix-specs li strong, .st-matrix-specs li b { color: var(--color-text-primary); font-weight: 500; } .st-matrix-specs p { margin: 0 0 6px; } .st-matrix-specs p:last-child { margin-bottom: 0; } .st-matrix-specs h1, .st-matrix-specs h2, .st-matrix-specs h3, .st-matrix-specs h4, .st-matrix-specs h5, .st-matrix-specs h6 { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 6px; } .st-matrix-foot { padding: 18px 22px 22px; border-top: 0.5px solid var(--color-border); display: flex; flex-direction: column; align-items: center; gap: 14px; } .st-matrix-card.featured .st-matrix-foot { border-top-color: rgba(0,113,227,0.2); } .st-matrix-price { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; } .st-matrix-price .currency { font-size: 15px; color: var(--color-text-secondary); } .st-matrix-price .amount { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.028em; color: var(--color-text-primary); } .st-matrix-price .period { font-size: 12px; color: var(--color-text-tertiary); margin-left: 3px; } .st-matrix-cta { height: 36px; padding: 0 22px; width: 100%; border-radius: var(--radius-pill); background: transparent; border: 0.5px solid var(--color-border); color: var(--color-text-primary); font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .st-matrix-cta:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .st-matrix-card.featured .st-matrix-cta { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .st-matrix-card.featured .st-matrix-cta:hover { background: var(--color-accent-hover); } /* -- Variant H -- Addon card with radio tiers ---------------- */ .st-addon-wrap { padding: 0 20px 24px; } .st-addon-wrap + .st-addon-wrap { padding-top: 0; } .st-addon { border: 0.5px solid var(--color-border); border-radius: var(--radius-lg, 14px); background: var(--color-surface); overflow: hidden; } .st-addon-head { display: grid; grid-template-columns: 1fr 200px; gap: 22px; align-items: center; padding: 24px 28px; border-bottom: 0.5px solid var(--color-border); } @media (max-width: 640px) { .st-addon-head { grid-template-columns: 1fr; } } .st-addon-title { font-size: 17px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.014em; margin: 0 0 6px; } .st-addon-desc { font-size: 13px; color: var(--color-text-secondary); letter-spacing: -0.008em; line-height: 1.55; margin: 0; } .st-addon-desc a { color: var(--color-accent); text-decoration: none; } .st-addon-desc a:hover { text-decoration: underline; } .st-addon-illus { display: flex; align-items: center; justify-content: center; height: 100px; background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-surface-secondary) 100%); border-radius: var(--radius-md); color: var(--color-accent); } .st-addon-illus svg { width: 48px; height: 48px; } .st-addon-tier { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center; padding: 16px 28px; border-bottom: 0.5px solid var(--color-border); cursor: pointer; transition: background var(--transition-fast); } .st-addon-tier:last-child { border-bottom: 0; } .st-addon-tier:hover { background: rgba(0, 0, 0, 0.02); } .st-addon-tier input { position: absolute; opacity: 0; pointer-events: none; } .st-addon-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-fast); } .st-addon-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--transition-fast); } .st-addon-tier:has(input:checked) .st-addon-radio { border-color: var(--color-accent); background: var(--color-accent); } .st-addon-tier:has(input:checked) .st-addon-radio::after { transform: scale(1); } .st-addon-tier:has(input:checked) { background: var(--color-accent-light); } .st-addon-tier-label { font-size: 14px; font-weight: 500; color: var(--color-text-primary); letter-spacing: -0.008em; } .st-addon-tier-sub { font-size: 12px; color: var(--color-text-tertiary); margin-top: 1px; letter-spacing: -0.004em; } .st-addon-tier-price { font-size: 13.5px; font-weight: 500; color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.008em; text-align: right; white-space: nowrap; } .st-addon-tier-price.muted { color: var(--color-text-tertiary); font-weight: 400; } .st-addon-tier-price.free { color: var(--color-green-text); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 11px; } .st-addon-tier-price .period { font-size: 11px; color: var(--color-text-tertiary); font-weight: 400; letter-spacing: -0.004em; } /* -- "Pick a category" landing -- shown in the right column when no productgroup is selected. Replaces the awkward category-card + empty-state combo that was rendering whenever a visitor hit /cart.php without a ?gid. ------------------------- */ .st-pick { padding: 56px 32px 60px; text-align: center; } .st-pick-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--color-accent-light); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .st-pick-ico svg { width: 28px; height: 28px; } .st-pick-title { font-size: 22px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; } .st-pick-desc { font-size: 14px; color: var(--color-text-secondary); letter-spacing: -0.008em; line-height: 1.5; max-width: 460px; margin: 0 auto 28px; } .st-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; text-align: left; } .st-pick-tile { display: flex; flex-direction: column; padding: 18px; border: 0.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none; transition: all var(--transition-fast); min-height: 124px; } .st-pick-tile:hover { border-color: var(--color-accent); background: var(--color-accent-light); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.04); } .st-pick-tile-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--color-accent-light); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: all var(--transition-fast); } .st-pick-tile:hover .st-pick-tile-ico { background: var(--color-accent); color: #fff; } .st-pick-tile-ico svg { width: 16px; height: 16px; } .st-pick-tile-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.012em; margin-bottom: 4px; } .st-pick-tile-tag { font-size: 12.5px; color: var(--color-text-tertiary); letter-spacing: -0.004em; line-height: 1.45; flex: 1; margin-bottom: 12px; } .st-pick-tile-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--color-accent); letter-spacing: -0.008em; margin-top: auto; } .st-pick-tile-cta svg { width: 12px; height: 12px; } /* -- Bootstrap modal + helper-hidden safety net ------------------ The standard_cart recommendations-modal.tpl uses Bootstrap 4 modal markup (.modal.fade + .modal-dialog) which relies on Bootstrap's CSS to keep it invisible until JS adds .show. If Bootstrap CSS isn't loaded on the cart page (or loads late), the modal contents leak into the page as raw stacked HTML. .modal:not(.show):not(.in) keeps the scaffolding hidden until Bootstrap drops in. `.w-hidden` is a WHMCS utility class that scripts.min.js and the gateway scripts (Stripe etc.) toggle via jQuery slideDown / slideUp / show / hide. Those use INLINE styles to override the class -- which only works when our class rule is NOT !important. The earlier `.w-hidden { display: none !important }` rule silently broke the entire error-feedback path: .gateway-errors never became visible on a Stripe failure, so the user saw "click button -> nothing happens" instead of "Remote Transaction Failure. Please Contact Support." Keep this rule plain `display: none` (matches standard_cart's own .w-hidden in standard_cart/css/all.css:1864). */ .modal:not(.show):not(.in) { display: none !important; } .hidden { display: none !important; } .w-hidden { display: none; } /* `.w-hidden.w-hidden` doubles the specificity to (0,2,0) without changing the matched set. Needed so `.btn { display: inline-flex }` (defined later in this file at (0,1,0)) doesn't outrank `.w-hidden`'s display: none and leave the inactive Already-Registered / Create-Account button visible. We don't use !important here because scripts.min.js + gateway scripts toggle visibility via inline styles (see note above). */ .w-hidden.w-hidden { display: none; } /* -- Bootstrap modal base positioning ------------------------------ mytheme_cart's common.tpl deliberately doesn't pull in standard_cart's bulky all.min.css, so Bootstrap 4's own .modal / .modal-dialog / .modal-content base rules never reach the cart pages. Without them Bootstrap's .modal('show') just removes our .w-hidden / display:none safety net and the modal HTML cascades inline at the end of the page ("Generate Password" form rendering below the cart instead of floating over it). Restate the minimum Bootstrap modal scaffolding here so .modal.show / .modal.in render as a real centred overlay with a backdrop -- works for every modal the cart loads (#modalRemoveItem, #modalEmptyCart, #recommendationsModal, #modalGeneratePassword). Individual modals can still override the chrome via their own selector (e.g. .modal-generate-password). */ .modal.show, .modal.in { display: block !important; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow-x: hidden; overflow-y: auto; outline: 0; background: rgba(0, 0, 0, 0.45); -webkit-overflow-scrolling: touch; } .modal-dialog { position: relative; width: auto; margin: 1.75rem auto; max-width: 500px; pointer-events: none; } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; } .modal-header, .modal-body, .modal-footer { padding: 1rem; } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #dee2e6; } .modal-body { position: relative; flex: 1 1 auto; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid #dee2e6; } .modal-footer > :not(:last-child) { margin-right: 0.25rem; } .modal-footer > :not(:first-child) { margin-left: 0.25rem; } .modal-title { margin: 0; line-height: 1.5; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show, .modal-backdrop.in { opacity: 0.5; } .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); } .modal.show .modal-dialog, .modal.in .modal-dialog { transform: none; } body.modal-open { overflow: hidden; } /* =============================================================== DOMAIN PICKER (.dp-*) -- configureproductdomain.tpl layout. Source: apple-client-area/configureproductdomain.html inline