/* CertStash brand layer over Blocksy. Tokens: certstash_infra/brand/tokens.json */

:root {
  --cs-ground: #f6f5f0;
  --cs-surface: #ffffff;
  --cs-tint: #eef7f2;
  --cs-ink: #16213a;
  --cs-prose: #2c3445;
  --cs-secondary: #4a5263;
  --cs-muted: #5b6272;
  --cs-rule: #e3e5dc;
  --cs-rule-soft: #eceee7;
  --cs-green: #1e9e6a;
  --cs-green-dark: #177f55;
  --cs-green-mid: #6abc99;
  --cs-green-light: #aad7c1;
  --cs-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --cs-body: "Figtree", "Segoe UI", sans-serif;
  --cs-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Blocksy's palette slots */
  --theme-palette-color-1: var(--cs-green) !important;
  --theme-palette-color-2: var(--cs-green-dark) !important;
  --theme-palette-color-3: var(--cs-prose) !important;
  --theme-palette-color-4: var(--cs-ink) !important;
  --theme-palette-color-5: var(--cs-rule) !important;
  --theme-palette-color-6: var(--cs-tint) !important;
  --theme-palette-color-7: var(--cs-ground) !important;
  --theme-palette-color-8: var(--cs-surface) !important;
  --theme-button-border-radius: 10px;
}

body {
  --theme-font-family: var(--cs-body);
  font-family: var(--cs-body);
  background: var(--cs-ground);
  color: var(--cs-prose);
}
h1, h2, h3, h4, .product_title, .woocommerce-loop-product__title, .page-title {
  --theme-font-family: var(--cs-display);
  font-family: var(--cs-display) !important;
  color: var(--cs-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cs-mono, .cs-eyebrow, .price, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* header */
.ct-header { background: var(--cs-ground); border-bottom: 1px solid var(--cs-rule); }
.ct-header [data-row] { background: transparent !important; }
.site-logo-container img { max-height: 34px; width: auto; }
.site-title-container, .site-description { display: none !important; }
.single-product .product_meta { display: none !important; }

/* Blocksy's own footer is replaced by .cs-footer */
.ct-footer { display: none !important; }

/* shared */
.cs-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.cs-eyebrow { font-family: var(--cs-mono); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: var(--cs-green); }
.cs-mono { font-family: var(--cs-mono); }
.cs-btn, .single_add_to_cart_button, .checkout-button, #place_order {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 12px !important;
  background: var(--cs-green) !important; color: #fff !important;
  font-family: var(--cs-body); font-weight: 600; font-size: 17px; text-decoration: none; border: 0;
}
.cs-btn:hover, .single_add_to_cart_button:hover, #place_order:hover { background: var(--cs-green-dark) !important; }
.cs-btn--ghost { background: transparent !important; color: var(--cs-ink) !important; border: 1.5px solid var(--cs-ink) !important; }
.cs-btn--ghost:hover { background: var(--cs-ink) !important; color: #fff !important; }

/* homepage: hide the page title and let the shortcode own the layout */
.home .hero-section, .home .entry-header { display: none; }
.home .site-main > .ct-container, .home .ct-container-full { padding-top: 0; }
.home .entry-content > * { max-width: none; }
.cs-home { display: flex; flex-direction: column; gap: 88px; padding-block: 56px 96px; }

.cs-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.cs-hero__copy { display: flex; flex-direction: column; gap: 18px; }
.cs-hero__title { margin: 0; font-size: clamp(38px, 4.2vw, 52px); line-height: 1.04; font-weight: 800; letter-spacing: -1.5px; }
.cs-hero__lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--cs-secondary); max-width: 540px; }
.cs-search { display: flex; gap: 10px; background: var(--cs-surface); border: 1px solid #d9ddd3; border-radius: 12px; padding: 8px; max-width: 560px; box-shadow: 0 6px 24px rgba(22,33,58,.07); }
.cs-search input[type=search] { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; font-size: 16px; padding: 12px; color: var(--cs-ink); }
.cs-search button { border: 0; background: var(--cs-green); color: #fff; font-weight: 600; font-size: 15px; padding: 0 22px; border-radius: 8px; min-height: 46px; cursor: pointer; }
.cs-search button:hover { background: var(--cs-green-dark); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--cs-muted); }
.cs-chips a { font-family: var(--cs-mono); font-weight: 500; padding: 6px 10px; border-radius: 6px; background: var(--cs-tint); color: var(--cs-ink); text-decoration: none; }
.cs-chips a:hover { background: var(--cs-green-light); }

.cs-hero__art { position: relative; height: 520px; }
.cs-stack, .cs-stack__cover { position: absolute; width: min(340px, 72%); aspect-ratio: 612 / 792; border-radius: 18px; }
.cs-stack--3 { left: 22%; top: 0; background: var(--cs-green-light); }
.cs-stack--2 { left: 17%; top: 28px; background: var(--cs-green-mid); }
.cs-stack__cover { left: 12%; top: 56px; object-fit: cover; box-shadow: 0 18px 40px rgba(22,33,58,.22); }
.cs-hero__badge { position: absolute; left: min(62%, 390px); top: 410px; width: 92px; height: 92px; border-radius: 50%; background: var(--cs-green); border: 6px solid var(--cs-ground); display: flex; align-items: center; justify-content: center; }

.cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 36px; background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: 16px; }
.cs-stats div { display: flex; flex-direction: column; gap: 4px; }
.cs-stats b { font-family: var(--cs-display); font-size: 32px; font-weight: 800; color: var(--cs-ink); }
.cs-stats span { font-size: 14px; color: var(--cs-muted); }

.cs-section { display: flex; flex-direction: column; gap: 28px; }
.cs-section h2, .cs-guarantee h2 { margin: 0; font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.8px; }
.cs-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.cs-section__head a { font-weight: 600; color: var(--cs-green); text-decoration: none; }

.cs-vendors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cs-vendors a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: 12px; text-decoration: none; color: var(--cs-ink); font-weight: 600; font-size: 17px; }
.cs-vendors a:hover { border-color: var(--cs-green); }
.cs-vendors .cs-mono { font-size: 13px; font-weight: 500; color: var(--cs-muted); white-space: nowrap; }

.cs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cs-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: 14px; text-decoration: none; color: var(--cs-ink); }
.cs-card:hover { border-color: var(--cs-green); transform: translateY(-2px); transition: transform .15s, border-color .15s; }
.cs-card__vendor { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--cs-green); }
.cs-card__code { font-family: var(--cs-mono); font-size: 26px; font-weight: 600; overflow-wrap: anywhere; }
.cs-card__name { font-size: 15px; line-height: 1.4; min-height: 42px; color: var(--cs-prose); }
.cs-card__foot { display: flex; justify-content: space-between; border-top: 1px solid var(--cs-rule-soft); padding-top: 12px; font-size: 14px; color: var(--cs-muted); margin-top: auto; }
.cs-card__foot strong { color: var(--cs-ink); }

.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-steps li { display: flex; flex-direction: column; gap: 10px; padding: 24px 4px 0; border-top: 3px solid var(--cs-green); }
.cs-steps .cs-mono { font-size: 14px; font-weight: 600; color: var(--cs-green); }
.cs-steps h3 { margin: 0; font-size: 22px; font-weight: 700; }
.cs-steps p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cs-secondary); }

.cs-inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.cs-inside img { width: 100%; border-radius: 12px; border: 1px solid var(--cs-rule); box-shadow: 0 18px 40px rgba(22,33,58,.12); }
.cs-inside > div { display: flex; flex-direction: column; gap: 20px; }
.cs-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.5; }
.cs-ticks li { display: flex; gap: 12px; }
.cs-tick { flex-shrink: 0; margin-top: 2px; color: var(--cs-green); }

.cs-guarantee { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 52px 56px; background: var(--cs-ink); border-radius: 20px; }
.cs-guarantee h2 { color: #fff !important; }
.cs-guarantee p { margin: 12px 0 0; font-size: 18px; line-height: 1.55; color: #cfd5df; max-width: 700px; }
.cs-guarantee .cs-btn { flex-shrink: 0; }

/* shop and category grids */
.woocommerce ul.products li.product, [data-products] .product {
  background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: 14px; padding: 14px 14px 18px !important;
}
[data-products] .product figure img, ul.products li.product img { border-radius: 10px; }
/* card images (brand/card_images.py style B) are square: show them whole */
[data-products] .product .ct-media-container, [data-products] .product figure { aspect-ratio: 1 / 1 !important; }
[data-products] .product .ct-media-container img { aspect-ratio: 1 / 1 !important; width: 100%; height: 100%; object-fit: contain; }
.woocommerce-loop-product__title { font-size: 16px !important; line-height: 1.35 !important; }
.cs-loop-count { display: block; font-size: 13px; color: var(--cs-muted); margin: 2px 0 6px; }
[data-products] .price, ul.products .price { color: var(--cs-ink) !important; font-weight: 700; }

/* single product */
.single-product .product_title { font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -0.8px; }
.single-product .summary .cs-eyebrow { margin-bottom: 10px; }
.cs-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.cs-pills span { padding: 6px 12px; border-radius: 999px; background: var(--cs-surface); border: 1px solid var(--cs-rule); font-size: 14px; color: var(--cs-prose); }
.single-product .summary .price { font-family: var(--cs-display); font-size: 40px !important; font-weight: 800; color: var(--cs-ink) !important; }
.single-product form.cart { margin-bottom: 12px !important; }
.single-product form.cart .quantity { display: none !important; }
.single-product .single_add_to_cart_button { width: 100%; font-size: 18px; min-height: 58px; }
.cs-sample-btn { width: 100%; min-height: 50px; }
.cs-paypal-slot { margin: 10px 0; }
.cs-paypal-slot:empty { display: none; }
.cs-paynote { font-size: 14px; color: var(--cs-muted); margin: 12px 0 18px; }
.cs-guarantee-box { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 12px; background: var(--cs-tint); color: var(--cs-green); }
.cs-guarantee-box div { display: flex; flex-direction: column; gap: 2px; color: var(--cs-secondary); font-size: 14px; }
.cs-guarantee-box strong { color: var(--cs-ink); font-size: 16px; }
.cs-guarantee-box a { color: var(--cs-green); }
.single-product .woocommerce-product-gallery img { border-radius: 16px; box-shadow: 0 18px 40px rgba(22,33,58,.16); }
.single-product .woocommerce-tabs { width: min(1200px, 100% - 32px); margin-inline: auto; }
.woocommerce-tabs .panel, .woocommerce-Tabs-panel { font-size: 17px; line-height: 1.65; color: var(--cs-prose); max-width: 760px; margin-inline: auto; }
.woocommerce-Tabs-panel h2 { font-size: 24px; line-height: 1.3; }
.woocommerce-Tabs-panel h3 { font-size: 22px; margin-top: 1.6em; }
.woocommerce-Tabs-panel .cs-sample a { font-weight: 600; }

/* free practice questions (practice pages and the product-page "try 3") */
.cs-practice-page .entry-content, .cs-try { max-width: 780px; margin-inline: auto; }
.cs-try { padding-block: 64px 24px; }
.cs-practice__intro { font-size: 18px; line-height: 1.6; color: var(--cs-secondary); }
.cs-practice__links { font-weight: 600; }
.cs-q { background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: 14px; padding: 24px 26px; margin: 22px 0; }
.cs-q h2 { font-family: var(--cs-mono) !important; font-size: 13px !important; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cs-green); margin: 0 0 10px; }
.cs-q__stem { font-size: 17px; line-height: 1.55; color: var(--cs-ink); font-weight: 500; margin: 0 0 12px; }
.cs-q__options { margin: 0 0 14px; padding-left: 28px; font-size: 16px; line-height: 1.5; }
.cs-q__options li { padding: 4px 0; }
.cs-q img { max-width: 100%; height: auto; border: 1px solid var(--cs-rule); border-radius: 8px; }
.cs-q__answer summary { cursor: pointer; font-weight: 600; color: var(--cs-green); padding: 10px 14px; background: var(--cs-tint); border-radius: 8px; display: inline-block; list-style: none; }
.cs-q__answer summary::-webkit-details-marker { display: none; }
.cs-q__answer[open] summary { margin-bottom: 12px; }
.cs-q__answer p, .cs-q__answer ul { font-size: 16px; line-height: 1.6; }
.cs-q__answer h3 { font-size: 15px !important; margin: 14px 0 6px; }
.cs-q__correct { color: var(--cs-ink); }
.cs-q__case { margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; background: var(--cs-ground); border: 1px solid var(--cs-rule); }
.cs-q__case summary { cursor: pointer; font-weight: 600; color: var(--cs-secondary); list-style: none; }
.cs-q__case summary::-webkit-details-marker { display: none; }
.cs-q__case summary::before { content: "+ "; color: var(--cs-green); }
.cs-q__case[open] summary::before { content: "−  "; }
.cs-q__case .cs-q__stem { font-size: 15px; font-weight: 400; color: var(--cs-prose); margin: 10px 0; }
.cs-q__h { font-size: 14px !important; margin: 16px 0 4px; letter-spacing: .02em; text-transform: uppercase; color: var(--cs-muted); }
.cs-practice__cta { margin-top: 36px; padding: 32px; border-radius: 16px; background: var(--cs-ink); color: #cfd5df; }
.cs-practice__cta h2 { color: #fff !important; margin: 0 0 10px; font-size: 28px !important; }
.cs-practice__cta p { font-size: 16px; line-height: 1.6; }
.page-practice-hub .entry-content { max-width: 1000px; margin-inline: auto; }
.page-practice-hub .entry-content h2 { font-size: 22px !important; margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--cs-rule); }
/* practice hub: a plain text directory, three narrow columns, code first (owner 25 Sep 2026: text, not chips) */
.cs-practice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; list-style: none; margin: 0; padding: 0; }
.cs-practice-list li { margin: 0; min-width: 0; }
.cs-practice-list a { display: flex; gap: 10px; align-items: baseline; min-width: 0; padding: 6px 6px; border-radius: 6px; color: var(--cs-ink); font-size: 14px; line-height: 1.4; text-decoration: none; }
.cs-practice-list a:hover { background: var(--cs-surface); }
.cs-practice-list a:hover .cs-code { color: var(--cs-green); }
.cs-practice-list .cs-code { flex: 0 0 auto; min-width: 76px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-practice-list .cs-code:only-child { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cs-practice-list .cs-name { flex: 1 1 auto; min-width: 0; color: var(--cs-muted, #5B6570); font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .cs-practice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-try__more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
@media (max-width: 460px) { .cs-practice-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .cs-q { padding: 18px; } }

/* FAQ and Popular badge */
.cs-faq { max-width: 780px; margin-inline: auto; padding-block: 40px 56px; }
.cs-faq h2 { font-size: 28px !important; margin: 0 0 16px; }
.cs-faq__item { border-top: 1px solid var(--cs-rule); padding: 14px 0; }
.cs-faq__item summary { cursor: pointer; font-weight: 600; font-size: 17px; color: var(--cs-ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.cs-faq__item summary::-webkit-details-marker { display: none; }
.cs-faq__item summary::after { content: "+"; color: var(--cs-green); font-weight: 700; }
.cs-faq__item[open] summary::after { content: "−"; }
.cs-faq__item p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--cs-prose); }
.cs-badge { position: absolute; top: 22px; left: 22px; z-index: 2; background: var(--cs-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; padding: 5px 10px; border-radius: 999px; }
[data-products] .product { position: relative; }
.cs-badge--inline { position: static; display: inline-block; margin-bottom: 10px; }

/* footer */
.cs-footer { background: var(--cs-ink); color: #cfd5df; padding-block: 56px; font-size: 14px; }
.cs-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.cs-footer__grid > div { display: flex; flex-direction: column; gap: 10px; }
.cs-footer strong { color: #fff; font-size: 15px; }
.cs-footer a { color: #cfd5df; text-decoration: none; }
.cs-footer a:hover { color: #fff; }
.cs-footer__brand img { width: 170px !important; height: auto !important; max-width: 100%; aspect-ratio: 888 / 203; object-fit: contain; align-self: flex-start; }
.cs-footer__brand p, .cs-footer__small { margin: 0; line-height: 1.6; color: #9fb0c8; }

/* cs-compact-hero: Blocksy's archive title banner is a full screen on phones */
.woocommerce-shop .hero-section, .tax-product_cat .hero-section, .search .hero-section { --container-padding: 28px 0; }
.woocommerce-shop .hero-section .page-title, .tax-product_cat .hero-section .page-title { font-size: clamp(30px, 4vw, 44px) !important; }

/* phone and tablet */
@media (max-width: 980px) {
  .cs-hero, .cs-inside { grid-template-columns: minmax(0, 1fr); }
  .cs-hero__art { height: 420px; max-width: 420px; }
  .cs-hero__badge { top: 330px; }
  .cs-vendors, .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .woocommerce-shop .hero-section [class*="ct-container"], .tax-product_cat .hero-section [class*="ct-container"] { min-height: 0 !important; padding-block: 22px !important; }
  [data-products] .product { padding: 8px 8px 12px !important; }
  [data-products] .product .woocommerce-loop-product__title { font-size: 14px !important; }
  [data-products] .product .entry-meta, [data-products] .product .ct-woo-card-extra { display: none !important; }
  [data-products] .product .button { min-height: 40px; padding: 0 12px; font-size: 14px; width: 100%; justify-content: center; }
  .cs-home { gap: 64px; padding-block: 28px 72px; }
  .cs-hero__art { display: none; }
  .cs-search { flex-direction: column; }
  .cs-search button { min-height: 48px; }
  .cs-steps, .cs-vendors { grid-template-columns: minmax(0, 1fr); }
  .cs-cards { grid-template-columns: minmax(0, 1fr); }
  .cs-stats { padding: 22px; }
  .cs-guarantee { flex-direction: column; align-items: flex-start; padding: 36px 24px; }
  .cs-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .cs-card:hover { transform: none; } }

/* updated date, exam facts, honest stats (23 Sep 2026) */
.cs-pills .cs-pill--rate { background: var(--cs-green); border-color: var(--cs-green); color: #fff; font-weight: 700; }
.cs-pills .cs-pill--updated { display: inline-flex; align-items: center; gap: 6px; background: var(--cs-tint); border-color: var(--cs-green-light); color: var(--cs-green-dark); font-weight: 600; }
.cs-card__updated, .cs-loop-count em { display: block; font-style: normal; font-size: 12.5px; color: var(--cs-green-dark); margin-top: 2px; }
.cs-honest { font-size: 13.5px; color: var(--cs-muted); margin: 12px 0 0; line-height: 1.5; }
.cs-honest a { color: var(--cs-green); }
.cs-guarantee__honest { font-size: 15px; opacity: .85; margin-top: 10px; }
.cs-facts { max-width: 780px; margin-inline: auto; padding-block: 48px 8px; }
.cs-facts h2 { font-family: var(--cs-display); font-size: 28px; margin: 6px 0 20px; color: var(--cs-ink); }
.cs-facts h3 { font-size: 18px; margin: 28px 0 12px; color: var(--cs-ink); }
.cs-facts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.cs-facts__grid div { background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: 12px; padding: 14px 16px; }
.cs-facts__grid dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-muted); margin: 0 0 4px; }
.cs-facts__grid dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--cs-ink); line-height: 1.3; }
.cs-facts__domains { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-facts__domains li { display: grid; grid-template-columns: 1fr 160px 60px; gap: 12px; align-items: center; font-size: 15px; color: var(--cs-prose); }
.cs-facts__domains li:has(> .cs-facts__dname:only-child) { grid-template-columns: 1fr; }
.cs-facts__bar { height: 8px; background: var(--cs-rule-soft); border-radius: 999px; overflow: hidden; }
.cs-facts__bar i { display: block; height: 100%; background: var(--cs-green); border-radius: 999px; }
.cs-facts__domains b { text-align: right; color: var(--cs-ink); }
.cs-facts__note { font-size: 13px; color: var(--cs-muted); margin-top: 18px; }
.cs-facts__domains b { white-space: nowrap; }
@media (max-width: 640px) { .cs-facts__domains li { grid-template-columns: 1fr 70px 72px; gap: 8px; font-size: 14px; } .cs-facts h2 { font-size: 24px; } }

/* audit fixes, 23 Sep 2026 */
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .ct-woo-card-actions, .woocommerce ul.products li.product > .button, .woocommerce ul.products li.product .cs-view-pack { margin-top: auto; }
.cs-try__more { justify-content: center; }
.cs-practice-page .hero-section > .ct-container, .cs-practice-page .hero-section .page-title { max-width: 780px; margin-inline: auto; }
.page-practice-hub .hero-section > .ct-container, .page-practice-hub .hero-section .page-title { max-width: 1000px; margin-inline: auto; }
.single-product .woocommerce-tabs ul.tabs { justify-content: center; }
@media (max-width: 689px) { .single-product .woocommerce-tabs ul.tabs li { width: auto; } }

/* exam guides (blog), 23 Sep 2026 */
.cs-guide-link { margin: 10px 0 0; font-size: 14px; } .cs-guide-link a { color: var(--cs-green); font-weight: 600; }
.cs-guide-page .entry-content, .cs-guide-page .hero-section > .ct-container, .cs-guide-page .entry-header { max-width: 780px; margin-inline: auto; }
.cs-guide-page .entry-content h2 { font-family: var(--cs-display); font-size: 26px; margin: 40px 0 14px; color: var(--cs-ink); }
.cs-guide-page .entry-content h3 { font-size: 18px; margin: 26px 0 10px; color: var(--cs-ink); }
.cs-guide-page .entry-content p, .cs-guide-page .entry-content li { font-size: 17px; line-height: 1.65; color: var(--cs-prose); }
.cs-guide-page .entry-content ol li, .cs-guide-page .entry-content ul li { margin-bottom: 8px; }
.cs-guide-table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 16px; }
.cs-guide-table th, .cs-guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cs-rule); vertical-align: top; }
.cs-guide-table th { color: var(--cs-muted); font-weight: 600; width: 38%; }
.cs-guide-cta { margin-top: 28px; font-weight: 600; } .cs-guide-cta a { color: var(--cs-green); }
.cs-guide-pack { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; margin: 40px 0 10px; padding: 24px; background: var(--cs-surface); border: 1px solid var(--cs-rule); border-radius: 16px; }
.cs-guide-pack__img img { width: 100%; height: auto; border-radius: 12px; }
.cs-guide-pack h3 { margin: 6px 0 8px; font-family: var(--cs-display); font-size: 22px; }
.cs-guide-pack p { margin: 0 0 12px; font-size: 15px; color: var(--cs-secondary); }
.cs-guide-pack__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-guide-page .ct-featured-image, .cs-guide-page .entry-meta, .cs-guide-page .ct-share-box, .cs-guide-page .author-box, .cs-guide-page .ct-related-posts { display: none !important; }
.cs-guides-index .entry-card .entry-meta, .cs-guides-index .entry-card .entry-excerpt { font-size: 14px; }
.cs-guides-index .hero-section .page-title { font-size: clamp(30px, 4vw, 44px) !important; }
@media (max-width: 640px) { .cs-guide-pack { grid-template-columns: 1fr; } .cs-guide-pack__img { max-width: 220px; } .cs-guide-page .entry-content h2 { font-size: 23px; } }

.cs-guides-head { max-width: 780px; margin: 8px auto 36px; }
.cs-guides-head h1 { font-family: var(--cs-display); font-size: clamp(30px, 4vw, 44px); margin: 6px 0 12px; color: var(--cs-ink); }
.cs-guides-head p { font-size: 17px; color: var(--cs-secondary); }
.cs-guides-index .entry-card .ct-media-container, .cs-guides-index .entry-card .ct-media-container img { aspect-ratio: 1 / 1 !important; object-fit: cover; }
.cs-guides-index .entry-card .entry-title { font-size: 21px; }
@media (max-width: 640px) { .cs-guide-page .entry-header .page-title, .cs-guide-page h1.entry-title { font-size: 28px !important; line-height: 1.2; } }

/* vendors page: same header band and toolbar as the shop */
.cs-vendors-index .hero-section { background: var(--cs-tint); text-align: center; width: 100vw; max-width: none !important; margin-left: calc(50% - 50vw); margin-top: -60px; margin-bottom: 40px; padding: 74px 0; --container-padding: 0; }
.cs-vendors-index .site-main > .ct-container[data-vertical-spacing] { padding-top: 60px !important; }
.cs-vendors-index .hero-section [class*="ct-container"] { min-height: 0 !important; padding-block: 0 !important; }
.cs-vendors-index .hero-section .page-title { font-size: clamp(30px, 4vw, 44px) !important; margin: 0 auto; }
.cs-vendors-index .entry-content { max-width: 1290px; margin-inline: auto; padding-top: 8px; }
.cs-vendors-page__search { margin: 0 0 26px; max-width: 640px; }
.cs-vendors-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.cs-vendors-toolbar .woocommerce-result-count { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.cs-vendors-toolbar .woocommerce-ordering { margin: 0; }
.cs-vendors-toolbar select.orderby { appearance: auto; min-width: 200px; padding: 10px 14px; border: 1px solid var(--cs-rule); border-radius: 8px; background: var(--cs-surface); font-size: 15px; color: var(--cs-ink); }
@media (max-width: 900px) { .cs-vendors--all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cs-vendors--all { grid-template-columns: minmax(0, 1fr); } }

/* search results: type badge replaces the category line */
.search .entry-card { position: relative; }
.search .entry-card .cs-result-type { display: inline-block; margin: 22px 0 0 22px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--cs-tint); color: var(--cs-green-dark); }
.search .entry-card .cs-result-type--pack { background: var(--cs-green); color: #fff; }
.search .entry-card .cs-result-type--guide { background: var(--cs-ink); color: #fff; }
.search .entry-card .entry-meta:first-of-type, .search .entry-card .ct-meta-element-categories, .search .entry-card .entry-meta[data-type="simple:slash"] { display: none !important; }
.search .entry-card .cs-result-type + .card-content, .search .entry-card .cs-result-type ~ .entry-title { margin-top: 10px; }

.search .entry-card .cs-result-type { width: max-content; align-self: center; margin-left: auto; margin-right: auto; }
.search .entry-card .ct-media-container, .search .entry-card .ct-media-container img { aspect-ratio: 1 / 1 !important; object-fit: cover; }

/* header live search: one column, uniform rows */
.ct-search-results { display: flex !important; flex-direction: column; gap: 4px; }
.ct-search-results .ct-search-item { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; }
.ct-search-results .ct-search-item .ct-media-container { flex: 0 0 56px; width: 56px; }
.ct-search-results .ct-search-item .ct-media-container img { border-radius: 8px; }

.ct-search-results .ct-search-item > span:last-of-type { flex: 1; }
.ct-search-results .ct-search-item::after { content: "Page"; margin-left: auto; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--cs-tint); color: var(--cs-green-dark); }
.ct-search-results .ct-search-item[href*="/product/"]::after { content: "Practice pack"; background: var(--cs-green); color: #fff; }
.ct-search-results .ct-search-item[href*="/practice/"]::after { content: "Free questions"; }
.ct-search-results .ct-search-item[href*="/guides/"]::after { content: "Guide"; background: var(--cs-ink); color: #fff; }

/* the short description exists for search cards only */
.single-product .woocommerce-product-details__short-description { display: none !important; }

/* Reviews tab (25 Sep 2026): Woo splits #reviews into two columns, and for guests the right one held only the
   "Only logged in customers..." line, leaving half the page empty. Reviews now use the full width (one column,
   newest first via option comment_order=desc) and that line sits underneath as a small note. */
.woocommerce-Reviews{display:block!important}
.woocommerce-Reviews>#comments{width:100%!important;max-width:none!important;float:none!important}
.woocommerce-Reviews .woocommerce-Reviews-title{margin-bottom:8px}
.woocommerce-Reviews .woocommerce-verification-required{width:100%!important;float:none!important;margin:24px 0 0;padding-top:16px;border-top:1px solid var(--cs-rule);font-size:14px;color:var(--cs-muted)}

/* Header (25 Sep 2026): slimmer desktop row so the Exams dropdown opens right under the menu (it opened at the bottom of a
   120px row, ~60px below the label), plus a sticky header that hides while scrolling down and returns on scroll up
   (JS toggles .cs-hdr-hide / .cs-hdr-scrolled in certstash-storefront.php). */
@media (min-width:1000px){ #header [data-device="desktop"] [data-row*="middle"]{--height:78px} }
#header.ct-header{position:sticky;top:var(--admin-bar,0px);z-index:60;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
#header.ct-header.cs-hdr-scrolled{box-shadow:0 1px 0 var(--cs-rule),0 8px 24px rgba(22,33,58,.06)}
#header.ct-header.cs-hdr-hide{transform:translateY(calc(-100% - var(--admin-bar,0px)))}
#header .sub-menu{border-radius:0 0 10px 10px;overflow:hidden}
html{scroll-padding-top:96px}

/* how much is free: the tier ladder on product pages (25 Sep 2026) */
.cs-ladder { border: 1px solid var(--cs-rule); border-radius: 14px; padding: 22px 24px; background: #fff; margin: 8px auto 36px; }
.cs-ladder__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.cs-ladder__head h2 { margin: 0 !important; font-size: 20px !important; }
.cs-ladder__head span { font-size: 13px; color: var(--cs-muted); }
.cs-ladder__rule { margin: 0 0 16px; font-size: 14px; color: var(--cs-muted); }
.cs-ladder__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cs-ladder__steps li { margin: 0; border: 1px solid var(--cs-rule); border-radius: 10px; padding: 16px 14px 12px; background: #fff; position: relative; min-width: 0; }
.cs-ladder__steps li.is-on { border-color: var(--cs-green); background: #EEF7F2; }
.cs-ladder__steps li.is-buy { background: var(--cs-ink); border-color: var(--cs-ink); color: #fff; }
.cs-ladder__steps b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cs-ladder__steps small { display: block; font-size: 12px; color: var(--cs-muted); margin-top: 2px; }
.cs-ladder__steps li.is-buy small, .cs-ladder__steps li.is-buy em { color: #C9CCD2; }
.cs-ladder__steps strong { display: block; font-size: 13.5px; margin-top: 8px; }
.cs-ladder__steps em { display: block; font-style: normal; font-size: 12.5px; color: var(--cs-muted); margin-top: 3px; line-height: 1.4; }
.cs-ladder__steps a { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--cs-green); text-decoration: none; }
.cs-ladder__steps li.is-buy a { color: #fff; background: var(--cs-green); padding: 7px 12px; border-radius: 6px; }
.cs-ladder__tag { position: absolute; top: -9px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--cs-green); color: #fff; padding: 2px 7px; border-radius: 999px; }
@media (max-width: 640px) { .cs-ladder { padding: 18px 16px; } .cs-ladder__steps { grid-template-columns: minmax(0, 1fr); } }

/* ===== Motion and responsive polish (25 Sep 2026) =====
   Calm and short: 150 to 250 ms for hover and press, 500 ms for scroll reveals, nothing loops.
   Scroll reveal only hides elements that start BELOW the fold (script in certstash-storefront.php adds .cs-reveal),
   so nothing visible on load ever blinks and the page is complete without JavaScript.
   Does not touch #header: its hide-on-scroll uses transform (see the sticky header rules above). */
:root { --cs-ease: cubic-bezier(.2, .7, .2, 1); }

/* hover and press feedback */
.cs-btn, .single_add_to_cart_button, #place_order, .cs-search button, .button.cs-view-pack {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.cs-btn:active, .single_add_to_cart_button:active, #place_order:active, .cs-search button:active { transform: translateY(1px); }
.cs-card { transition: transform .2s var(--cs-ease), border-color .2s ease, box-shadow .2s ease; }
.cs-card:hover { box-shadow: 0 10px 24px -14px rgba(22, 33, 58, .28); }
.woocommerce ul.products li.product, .cs-guides-index .entry-card {
  transition: transform .2s var(--cs-ease), box-shadow .2s ease;
}
@media (hover: hover) {
  .woocommerce ul.products li.product:hover, .cs-guides-index .entry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -18px rgba(22, 33, 58, .35);
  }
}
.woocommerce ul.products li.product img, .cs-guides-index .entry-card .ct-media-container img { transition: transform .35s var(--cs-ease); }
@media (hover: hover) {
  .cs-guides-index .entry-card:hover .ct-media-container img { transform: scale(1.02); }
}
.cs-guides-index .entry-card .ct-media-container { overflow: hidden; }
.cs-vendors a, .cs-chips a, .cs-pills a, .cs-practice-list a, .cs-footer a {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* links in articles: a quiet underline that firms up on hover */
.entry-content a:not(.cs-btn):not(.button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.entry-content a:not(.cs-btn):not(.button):hover { text-decoration-color: currentColor; }

/* FAQ answers ease in when opened */
@keyframes cs-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cs-faq__item[open] > :not(summary), .entry-content details[open] > :not(summary) { animation: cs-fade-up .25s var(--cs-ease); }

/* keyboard focus that is visible but not loud */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cs-green);
  outline-offset: 2px;
}

/* scroll reveal (class added by script only to below-the-fold elements) */
.cs-reveal { opacity: 0; transform: translateY(-16px) scale(.985); transition: opacity .55s var(--cs-ease), transform .55s var(--cs-ease); }
.cs-reveal--rise { transform: translateY(14px); }
.cs-reveal.is-in { opacity: 1; transform: none; }

/* responsive: wide tables scroll sideways instead of being cut off, long code wraps */
.cs-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-block: 1.2em;
}
.cs-table-scroll > table { margin-block: 0; min-width: 100%; }
.entry-content :not(pre) > code { overflow-wrap: anywhere; }
.entry-content img, .entry-content video, .entry-content iframe { max-width: 100%; height: auto; }


/* Landing hero entrance (owner asked for visible motion on the first screen, 25 Sep 2026). Runs once on load, using the
   independent translate/scale properties so it never fights the existing transforms. */
@keyframes cs-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes cs-cover-in { from { opacity: 0; translate: 0 34px; scale: .94; } }
@keyframes cs-stack2-in { from { opacity: 0; translate: -28px 28px; } }
@keyframes cs-stack3-in { from { opacity: 0; translate: -56px 56px; } }
@keyframes cs-badge-pop { 0% { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.08; } 100% { scale: 1; } }
@keyframes cs-float { to { translate: 0 -8px; } }
.cs-home .cs-hero .cs-eyebrow, .cs-hero__title, .cs-hero__lead, .cs-hero .cs-search, .cs-hero .cs-chips { animation: cs-rise .7s var(--cs-ease) backwards; }
.cs-hero__title { animation-delay: .08s; }
.cs-hero__lead { animation-delay: .16s; }
.cs-hero .cs-search { animation-delay: .24s; }
.cs-hero .cs-chips { animation-delay: .32s; }
.cs-stack__cover { animation: cs-cover-in .9s .1s var(--cs-ease) backwards; }
.cs-stack--2 { animation: cs-stack2-in .9s .4s var(--cs-ease) backwards; }
.cs-stack--3 { animation: cs-stack3-in .9s .5s var(--cs-ease) backwards; }
.cs-hero__badge { animation: cs-badge-pop .6s 1s var(--cs-ease) backwards; }
.cs-hero__art { animation: cs-float 5s 1.8s ease-in-out infinite alternate; }
.cs-home .cs-stats { animation: cs-rise .7s .45s var(--cs-ease) backwards; }


/* Page entrances on every page type (25 Sep 2026): the first screen settles in once on load, then the scroll
   reveals take over. Same independent-translate technique, so hover lifts (transform) still work. */
@keyframes cs-rise-sm { from { opacity: 0; translate: 0 12px; } }
@keyframes cs-drop { from { opacity: 0; translate: 0 -14px; scale: .985; } }
.woocommerce ul.products li.product:nth-child(-n+12), .cs-guides-index .entries > .entry-card:nth-child(-n+12), .cs-vendors > a:nth-child(-n+12) { animation-name: cs-drop !important; }
.hero-section .page-title, .cs-guides-head, .woocommerce-products-header { animation: cs-rise .7s var(--cs-ease) backwards; }
.hero-section .page-description { animation: cs-rise .7s .1s var(--cs-ease) backwards; }
.woocommerce-product-gallery { animation: cs-cover-in .8s var(--cs-ease) backwards; }
.summary.entry-summary > *, .woocommerce ul.products li.product:nth-child(-n+12), .cs-guides-index .entries > .entry-card:nth-child(-n+12),
.cs-vendors > a:nth-child(-n+12) { animation: cs-rise-sm .6s .05s var(--cs-ease) backwards; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(2) { animation-delay: 0.11s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(3) { animation-delay: 0.17s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(4) { animation-delay: 0.23s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(5) { animation-delay: 0.29s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(6) { animation-delay: 0.35s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(7) { animation-delay: 0.41s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(8) { animation-delay: 0.47s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(9) { animation-delay: 0.53s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(10) { animation-delay: 0.59s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(11) { animation-delay: 0.65s; }
:is(.woocommerce ul.products li.product, .cs-guides-index .entries > .entry-card, .cs-vendors > a, .summary.entry-summary > *):nth-child(12) { animation-delay: 0.71s; }
.cs-vendors-toolbar, .cs-practice__intro, .cs-practice__links { animation: cs-rise-sm .6s .12s var(--cs-ease) backwards; }
.cs-practice-page .cs-q:first-of-type, .cs-guide-page .entry-content > :nth-child(-n+3) { animation: cs-rise-sm .6s .2s var(--cs-ease) backwards; }


/* Hover details on the homepage stats and steps (owner request, 25 Sep 2026; mirrors DailyDebian) */
.cs-stats > div { transition: transform .25s var(--cs-ease); }
.cs-stats b { transition: color .25s ease; }
.cs-stats > div::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 6px; border-radius: 3px; background: var(--cs-green); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--cs-ease); }
.cs-steps li { transition: transform .25s var(--cs-ease); }
.cs-steps h3, .cs-steps .cs-mono { transition: color .25s ease, letter-spacing .25s ease; }
@media (hover: hover) {
  .cs-stats > div:hover { transform: translateY(-3px); }
  .cs-stats > div:hover b { color: var(--cs-green); }
  .cs-stats > div:hover::after { transform: scaleX(1); }
  .cs-steps li:hover { transform: translateY(-4px); }
  .cs-steps li:hover h3 { color: var(--cs-green); }
  .cs-steps li:hover .cs-mono { letter-spacing: .06em; }
}


/* Pop on everything clickable (owner request, 25 Sep 2026; mirrors DailyDebian). Tiles, cards and buttons lift; dense
   lists nudge instead of lifting; nothing that is not clickable pops. */
.cs-vendors a, .cs-guarantee, .cs-guarantee .cs-btn, .cs-chips a, .cs-pills a, .cs-practice-list a, .cs-btn {
  transition: transform .22s var(--cs-ease), box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
}
@media (hover: hover) {
  .cs-vendors a:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 26px -16px rgba(22, 33, 58, .3); }
  .cs-guarantee:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(22, 33, 58, .55); }
  .cs-guarantee .cs-btn:hover { transform: scale(1.04); }
  .cs-chips a:hover, .cs-pills a:hover { transform: translateY(-2px); }
  .cs-practice-list a:hover { transform: translateX(3px); }
}


/* Stats bar cells are links (25 Sep 2026): same layout as before, each cell leads somewhere */
.cs-stats a { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.cs-stats__cta { font-style: normal; font-weight: 700; font-size: 14px; color: var(--cs-green); margin-top: 6px; }


/* Store audit (25 Sep 2026): practice "Show answer" toggles react like every other control, and answers ease in */
.cs-q summary { transition: transform .22s var(--cs-ease), color .22s ease, background-color .22s ease, box-shadow .22s ease; }
@media (hover: hover) { .cs-q summary:hover { transform: translateY(-1px); background: var(--cs-green-light); box-shadow: 0 8px 18px -12px rgba(22, 33, 58, .35); } }
@media (hover: none) { .cs-q summary:active { transform: scale(.98); } }
.cs-q details[open] > :not(summary) { animation: cs-fade-up .25s var(--cs-ease); }


/* ===== Everything enters and responds (owner, 25 Sep 2026; mirrors DailyDebian) =====
   Sections drop in on scroll (script in certstash-storefront.php); once a section has been seen (.cs-seen, which
   stays on) its contents cascade in one by one. Every card, row, option, tick and pill reacts to hover, and to a tap on
   touch screens. Independent translate/scale properties, so hover transforms never fight the entrances. */
@keyframes cs-drop-sm { from { opacity: 0; translate: 0 -10px; } }
@keyframes cs-pop { from { opacity: 0; scale: .85; } }
@keyframes cs-float-sm { to { translate: 0 -8px; } }
@keyframes cs-bar-grow { from { transform: scaleX(0); } }
.cs-seen .cs-ticks li, .cs-seen .cs-q__options li, .cs-q.cs-seen .cs-q__options li, .cs-seen .cs-facts__grid > div,
.cs-seen .cs-facts__domains li { animation: cs-drop-sm .45s var(--cs-ease) backwards; }
.cs-seen .cs-ticks li:nth-child(2) { animation-delay: 0.07s; }
.cs-seen .cs-ticks li:nth-child(3) { animation-delay: 0.14s; }
.cs-seen .cs-ticks li:nth-child(4) { animation-delay: 0.21s; }
.cs-seen .cs-ticks li:nth-child(5) { animation-delay: 0.28s; }
.cs-seen .cs-ticks li:nth-child(6) { animation-delay: 0.35s; }
.cs-seen .cs-ticks li:nth-child(7) { animation-delay: 0.42s; }
.cs-seen .cs-ticks li:nth-child(8) { animation-delay: 0.49s; }
.cs-seen .cs-facts__grid > div:nth-child(2) { animation-delay: 0.07s; }
.cs-seen .cs-facts__grid > div:nth-child(3) { animation-delay: 0.14s; }
.cs-seen .cs-facts__grid > div:nth-child(4) { animation-delay: 0.21s; }
.cs-seen .cs-facts__grid > div:nth-child(5) { animation-delay: 0.28s; }
.cs-seen .cs-facts__grid > div:nth-child(6) { animation-delay: 0.35s; }
.cs-seen .cs-facts__grid > div:nth-child(7) { animation-delay: 0.42s; }
.cs-seen .cs-facts__grid > div:nth-child(8) { animation-delay: 0.49s; }
.cs-seen .cs-facts__domains li:nth-child(2) { animation-delay: 0.07s; }
.cs-seen .cs-facts__domains li:nth-child(3) { animation-delay: 0.14s; }
.cs-seen .cs-facts__domains li:nth-child(4) { animation-delay: 0.21s; }
.cs-seen .cs-facts__domains li:nth-child(5) { animation-delay: 0.28s; }
.cs-seen .cs-facts__domains li:nth-child(6) { animation-delay: 0.35s; }
.cs-seen .cs-facts__domains li:nth-child(7) { animation-delay: 0.42s; }
.cs-seen .cs-facts__domains li:nth-child(8) { animation-delay: 0.49s; }
.cs-q.cs-seen .cs-q__options li:nth-child(2) { animation-delay: 0.07s; }
.cs-q.cs-seen .cs-q__options li:nth-child(3) { animation-delay: 0.14s; }
.cs-q.cs-seen .cs-q__options li:nth-child(4) { animation-delay: 0.21s; }
.cs-q.cs-seen .cs-q__options li:nth-child(5) { animation-delay: 0.28s; }
.cs-q.cs-seen .cs-q__options li:nth-child(6) { animation-delay: 0.35s; }
.cs-q.cs-seen .cs-q__options li:nth-child(7) { animation-delay: 0.42s; }
.cs-q.cs-seen .cs-q__options li:nth-child(8) { animation-delay: 0.49s; }
.cs-seen .cs-facts__bar i { display: block; transform-origin: left center; animation: cs-bar-grow .9s .2s var(--cs-ease) backwards; }
.cs-pills > *, .summary .cs-badge { animation: cs-pop .45s var(--cs-ease) backwards; }
.cs-pills > :nth-child(1) { animation-delay: .35s; } .cs-pills > :nth-child(2) { animation-delay: .43s; } .cs-pills > :nth-child(n+3) { animation-delay: .51s; }
/* the "Inside a pack" page image floats, and tilts toward you on hover */
.cs-inside > img { animation: cs-float-sm 6s 1s ease-in-out infinite alternate; transition: transform .45s var(--cs-ease), box-shadow .45s ease; }

.cs-ticks li, .cs-tick, .cs-q__options li, .cs-facts__grid > div, .cs-facts__domains li, .cs-facts__dname, .cs-ladder__steps li,
.cs-ladder__steps li b, .cs-faq__item, .cs-faq__item summary, .cs-guarantee-box, .cs-guide-pack, .cs-pills > *, .cs-badge,
.cs-stats > div, .woocommerce-review-link, .cs-q {
  transition: transform .22s var(--cs-ease), box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
.cs-ladder__steps li b { display: inline-block; }
.cs-q__options li { border-radius: 6px; }
@media (hover: hover) {
  .cs-inside > img:hover { transform: perspective(1400px) rotateY(-1.5deg) rotateX(.5deg) translateY(-4px); box-shadow: 0 30px 60px -30px rgba(22, 33, 58, .45); }
  .cs-ticks li:hover { transform: translateX(4px); }
  .cs-ticks li:hover .cs-tick { transform: scale(1.25); }
  .cs-q__options li:hover { background: var(--cs-tint); transform: translateX(4px); }
  .cs-q:hover { transform: translateY(-2px); }
  .cs-facts__grid > div:hover { background: var(--cs-tint); transform: translateY(-2px); }
  .cs-facts__domains li:hover { transform: translateX(3px); }
  .cs-facts__domains li:hover .cs-facts__dname { color: var(--cs-green); }
  .cs-ladder__steps li:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(22, 33, 58, .4); }
  .cs-ladder__steps li:hover b { color: var(--cs-green); transform: scale(1.08); }
  .cs-faq__item:hover { transform: translateX(3px); }
  .cs-faq__item summary:hover { color: var(--cs-green); }
  .cs-guarantee-box:hover, .cs-guide-pack:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(22, 33, 58, .4); }
  .cs-pills > *:hover, .cs-badge:hover { transform: translateY(-2px) scale(1.04); }
}
@media (hover: none) {
  .cs-q__options li:active, .cs-ladder__steps li:active, .cs-facts__grid > div:active, .cs-faq__item:active, .cs-pills > *:active { transform: scale(.98); }
}


/* hero pack: hovering adds motion on top of the float instead of freezing it (owner, 25 Sep 2026) */
.cs-stack__cover, .cs-stack--2, .cs-stack--3, .cs-hero__badge { transition: transform .5s var(--cs-ease), box-shadow .5s ease; }
@media (hover: hover) {
  .cs-hero__art:hover .cs-stack__cover { transform: perspective(1100px) rotateY(-2.5deg) rotateX(1deg) translateY(-6px); box-shadow: 0 34px 60px -26px rgba(22, 33, 58, .45); }
  .cs-hero__art:hover .cs-stack--2 { transform: translate(14px, -8px) rotate(2deg); }
  .cs-hero__art:hover .cs-stack--3 { transform: translate(28px, -14px) rotate(4deg); }
  .cs-hero__art:hover .cs-hero__badge { transform: rotate(-12deg) scale(1.1); }
}
/* with JS the pack follows the pointer and keeps drifting while hovered; --cs-h (hover amount) and --cs-px/--cs-py (pointer, -1 to 1) are eased every frame */
.cs-hero__art.cs-tilt .cs-stack__cover { transition: box-shadow .5s ease; transform: perspective(1100px) rotateY(calc(var(--cs-h, 0) * -2.5deg + var(--cs-px, 0) * 3deg)) rotateX(calc(var(--cs-h, 0) * 1deg - var(--cs-py, 0) * 2deg)) translateY(calc(var(--cs-h, 0) * -6px)); }
.cs-hero__art.cs-tilt .cs-stack--2 { transition: none; transform: translate(calc(var(--cs-h, 0) * 14px + var(--cs-px, 0) * 5px), calc(var(--cs-h, 0) * -8px + var(--cs-py, 0) * 3px)) rotate(calc(var(--cs-h, 0) * 2deg)); }
.cs-hero__art.cs-tilt .cs-stack--3 { transition: none; transform: translate(calc(var(--cs-h, 0) * 28px + var(--cs-px, 0) * 10px), calc(var(--cs-h, 0) * -14px + var(--cs-py, 0) * 6px)) rotate(calc(var(--cs-h, 0) * 4deg)); }
.cs-hero__art.cs-tilt .cs-hero__badge { transition: none; transform: translate(calc(var(--cs-px, 0) * -8px), calc(var(--cs-py, 0) * -6px)) rotate(calc(var(--cs-h, 0) * -12deg + var(--cs-px, 0) * 8deg)) scale(calc(1 + var(--cs-h, 0) * .1)); }
.cs-inside > img.cs-tilt { transition: box-shadow .45s ease; transform: perspective(1400px) rotateY(calc(var(--cs-px, 0) * 1.6deg)) rotateX(calc(var(--cs-py, 0) * -1.2deg)) translateY(calc(var(--cs-h, 0) * -4px)); }
/* cards tilt toward the pointer, small things lean toward it; only while the pointer is on them (.cs-live), so reveal and hover transforms are untouched */
.cs-persp { perspective: 1600px; }
.cs-f-tilt.cs-live { rotate: calc(var(--cs-py, 0) * -1) var(--cs-px, 0) .001 var(--cs-a, 0deg); }
.cs-f-mag.cs-live { translate: calc(var(--cs-px, 0) * 2px) calc(var(--cs-py, 0) * 1.5px); }
/* product images tilt toward the pointer as a whole; no zoom on any product image (owner, 25 Sep 2026) */
.cs-f-img { overflow: hidden; }
.cs-f-img.cs-live { box-shadow: 0 30px 60px -30px rgba(22, 33, 58, calc(var(--cs-h, 0) * .45)); }
.cs-practice-list a.cs-live, .cs-ticks li.cs-live, .cs-q__options li.cs-live, .cs-faq__item.cs-live, .cs-facts__domains li.cs-live, .cs-q summary.cs-live { translate: calc(var(--cs-px, 0) * 1.5px) calc(var(--cs-py, 0) * 1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .cs-reveal { opacity: 1 !important; transform: none !important; }
}

/* Final audit (26 Sep 2026) */
.cs-nw { white-space: nowrap; }
/* page titles were 30px under 35px section headings: the title now leads, the content headings step down */
.entry-header .page-title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -.02em; }
.page .entry-content > h2 { font-size: clamp(22px, 2.2vw, 26px); }
.page .entry-content > h3 { font-size: 19px; }

/* lean product page (26 Sep 2026): About tab uses the full width, pack on the left, exam facts card on the right */
.woocommerce-Tabs-panel--description:has(.cs-about) { max-width: none; }
.cs-about { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.cs-about__main > :first-child { margin-top: 0; }
.cs-about__guide { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--cs-rule); font-size: 16px; }
.cs-about__guide a { color: var(--cs-green); font-weight: 600; }
.cs-about__side { position: sticky; top: 96px; }
.cs-facts--card { max-width: none; padding: 24px 26px; margin: 0; border: 1px solid var(--cs-rule); border-radius: 16px; background: var(--cs-surface); }
.cs-facts--card .cs-facts__h { font-family: var(--cs-display); font-size: 20px; margin: 0 0 14px; color: var(--cs-ink); }
.cs-facts--card .cs-facts__grid { display: block; }
.cs-facts--card .cs-facts__grid div { display: flex; justify-content: space-between; gap: 16px; background: none; border: 0; border-bottom: 1px solid var(--cs-rule); border-radius: 0; padding: 9px 0; }
.cs-facts--card .cs-facts__grid div:last-child { border-bottom: 0; }
.cs-facts--card .cs-facts__grid dt { font-size: 14px; text-transform: none; letter-spacing: 0; margin: 0; }
.cs-facts--card .cs-facts__grid dd { font-size: 14.5px; text-align: right; }
.cs-facts--card h3:not(.cs-facts__h) { font-size: 15px; margin: 22px 0 10px; }
.cs-facts--card .cs-facts__domains li { grid-template-columns: minmax(0, 1fr) 70px auto; gap: 10px; font-size: 14px; line-height: 1.35; }
.cs-facts--card .cs-facts__note { font-size: 12.5px; margin-top: 14px; }
@media (max-width: 900px) {
  .cs-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cs-about__side { position: static; }
}
/* product page FAQ spans the same width as the About tab and the ladder (owner, 26 Sep 2026) */
.single-product .cs-faq { max-width: none; }
/* every product-page tab panel (About, Reviews) spans the full width too (owner, 26 Sep 2026) */
.single-product .woocommerce-tabs .panel, .single-product .woocommerce-Tabs-panel { max-width: none; }
/* the product page "try before you buy" questions match the other sections' full width (owner, 26 Sep 2026) */
.single-product .cs-try { max-width: none; }
/* product page: every section uses the theme's container (the header, image + buy box and related packs), so all edges line up */
.single-product .cs-wrap, .single-product .woocommerce-tabs { width: var(--theme-container-width, min(1290px, 100% - 32px)); max-width: var(--theme-normal-container-max-width, 1290px); margin-inline: auto; }

/* lean product page order (26 Sep 2026): About and Reviews as sections instead of tabs; one sample question on phones */
.cs-about-sec, .cs-reviews-sec { padding-block: 48px 8px; font-size: 17px; line-height: 1.65; color: var(--cs-prose); }
.cs-about-sec > h2 { font-family: var(--cs-display); font-size: 28px; margin: 6px 0 22px; color: var(--cs-ink); }
.cs-about-sec h3 { font-size: 22px; margin-top: 1.6em; }
.cs-about-sec .cs-about__main > ul:first-child { margin-top: 0; }
.cs-reviews-sec .woocommerce-Reviews-title { font-family: var(--cs-display); font-size: 28px !important; margin: 6px 0 18px; color: var(--cs-ink); }
.cs-try__toggle { display: none; width: 100%; margin-top: 4px; }
@media (max-width: 700px) {
  .cs-try--lean:not(.is-open) .cs-q--more { display: none; }
  .cs-try--lean .cs-try__toggle { display: block; }
  .cs-about-sec > h2, .cs-reviews-sec .woocommerce-Reviews-title { font-size: 24px !important; }
}