/* ==========================================================================
   Content pages: policies (page-chinh-sach.php), Cộng tác viên
   (page-cong-tac-vien.php), Về chúng tôi (page-ve-chung-toi.php) and the
   homepage "Mua sắm an tâm" / CTV bands. Uses only the design tokens from
   base.css so every page stays on-brand.
   ========================================================================== */

/* ---------- Shared page head (same look as page.php / about) ---------- */
.cp-head { padding: 46px 0 8px; position: relative; isolation: isolate; overflow: hidden; }
.cp-head h1 { font-size: clamp(28px, 3.8vw, 44px); margin: 14px 0 12px; max-width: 820px; }
.cp-head .lead { color: var(--muted); font-size: 15.5px; max-width: 680px; }
.cp-head .updated { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---------- Policy layout: sidebar + content ---------- */
.policy-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 920px) { .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

.policy-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 920px) { .policy-nav { position: static; } }
.policy-nav__box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.policy-nav__title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.policy-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.policy-nav__box--links a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--fg); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.policy-nav__box--links a:hover { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); }
.policy-nav__box--links a[aria-current="page"] { background: var(--accent-deep); color: #FDF3E7; }
.policy-nav__box--links a .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.policy-nav__box--links a[aria-current="page"] .dot { background: #FDF3E7; }
@media (max-width: 920px) {
  .policy-nav__box--links { padding: 10px; }
  .policy-nav__box--links .policy-nav__title { display: none; }
  .policy-nav__box--links ul { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .policy-nav__box--links ul::-webkit-scrollbar { display: none; }
  .policy-nav__box--links a { white-space: nowrap; border: 1px solid var(--border); font-size: 13.5px; padding: 8px 12px; }
  .policy-nav__box--help { display: none; }
}
.policy-help p { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
.policy-help .btn-primary, .policy-help .btn-outline { width: 100%; justify-content: center; margin-top: 8px; gap: 8px; }
.policy-help .btn-primary svg { width: 16px; height: 16px; flex: none; }

/* ---------- Rich content (works on any page body) ---------- */
.policy-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow); min-width: 0; }
.policy-content { color: var(--fg); font-size: 15.5px; line-height: 1.75; }
/* Legacy pages were pasted with inline font sizes/families — let the theme win. */
.policy-content [style] { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; }
.policy-content > * + * { margin-top: 14px; }
.policy-content p { color: var(--fg); }
.policy-content h2 { font-size: clamp(20px, 2.4vw, 25px); margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; }
.policy-content h2:first-child, .policy-content .policy-highlights + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.policy-content h2 .n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-deep); color: #FDF3E7; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; transform: translateY(-3px); }
.policy-content h3 { font-size: 18px; margin-top: 24px; color: var(--accent-ink); }
.policy-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.policy-content ul, .policy-content ol { padding-left: 22px; }
.policy-content li + li { margin-top: 6px; }
.policy-content ul.check { list-style: none; padding-left: 0; }
.policy-content ul.check li { position: relative; padding-left: 30px; }
.policy-content ul.check li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 18%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5F26' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.policy-content ul.cross li::before { background-color: color-mix(in oklab, var(--accent-deep) 14%, var(--surface)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B1E24' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); }

.policy-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
@media (max-width: 720px) { .policy-highlights { grid-template-columns: minmax(0, 1fr); } }
.policy-highlights .hl { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: linear-gradient(160deg, var(--surface), var(--bg)); }
.policy-highlights .hl strong { display: block; font-family: 'Playfair Display', serif; font-size: 18px; color: var(--accent-deep); margin-bottom: 4px; line-height: 1.3; }
.policy-highlights .hl span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.policy-note { border-left: 4px solid var(--accent); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); border-radius: 0 12px 12px 0; padding: 14px 18px; }
.policy-note--warn { border-left-color: var(--accent-deep); background: color-mix(in oklab, var(--accent-deep) 7%, var(--surface)); }
.policy-note strong:first-child { color: var(--accent-deep); }

.policy-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .policy-methods { grid-template-columns: minmax(0, 1fr); } }
.policy-methods .m { border: 1px solid var(--border); border-radius: 12px; padding: 18px; background: var(--bg); }
.policy-methods .m .tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FDF3E7; background: var(--accent-ink); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.policy-methods .m h3 { margin-top: 0; color: var(--fg); font-size: 17px; }
.policy-methods .m p { font-size: 14.5px; margin-top: 8px; }

.policy-closing { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-style: italic; }

.policy-cta { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 28px; border-radius: var(--radius); background: var(--fg); color: #F3E6C8; }
.policy-cta h3 { color: #F8EEDA; font-size: 19px; margin-bottom: 4px; }
.policy-cta p { color: #C9B896; font-size: 14px; }
.policy-cta .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.policy-cta .btn-outline { color: #F8EEDA; border-color: rgba(243, 230, 200, .45); }

/* ---------- Generic blocks shared by about / CTV ---------- */
.cp-grid { display: grid; gap: 18px; }
.cp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .cp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cp-grid--2, .cp-grid--3, .cp-grid--4 { grid-template-columns: minmax(0, 1fr); } }

.cp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); transition: transform 220ms ease, border-color 220ms ease; min-width: 0; }
.cp-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.cp-card .emoji { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font-size: 23px; background: color-mix(in oklab, var(--accent) 15%, var(--surface)); margin-bottom: 14px; }
.cp-card h3 { font-size: 18.5px; margin-bottom: 8px; }
.cp-card p { color: var(--muted); font-size: 14.5px; }
.cp-card ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-card ul li { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--fg); }
.cp-card ul.lines { flex-direction: column; gap: 6px; }
.cp-card ul.lines li { border: 0; background: none; padding: 0 0 0 18px; position: relative; font-size: 14px; color: var(--muted); }
.cp-card ul.lines li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cp-card .more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--accent-deep); text-decoration: none; }
.cp-card .more:hover { text-decoration: underline; }

.cp-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-deep); color: #FDF3E7; font-weight: 700; font-size: 16px; margin-bottom: 14px; }

/* Horizontal flow (CTV model / service chain) */
.cp-flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cp-flow .step { flex: 1 1 150px; max-width: 220px; text-align: center; padding: 18px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); position: relative; }
.cp-flow .step b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
.cp-flow .step span { font-size: 14.5px; font-weight: 600; color: var(--fg); line-height: 1.4; }
.cp-flow .step.is-key { background: var(--accent-deep); border-color: var(--accent-deep); }
.cp-flow .step.is-key b { color: #F3D8A6; }
.cp-flow .step.is-key span { color: #FDF3E7; }
.cp-flow .arrow { flex: none; align-self: center; color: var(--accent); font-size: 20px; }
@media (max-width: 720px) { .cp-flow { flex-direction: column; align-items: center; } .cp-flow .step { max-width: 420px; width: 100%; flex-basis: auto; } .cp-flow .arrow { transform: rotate(90deg); } }

.cp-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 640px) { .cp-checks { grid-template-columns: minmax(0, 1fr); } }
.cp-checks li { position: relative; padding-left: 32px; font-size: 15px; color: var(--fg); line-height: 1.5; }
.cp-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-deep); color: #FDF3E7; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cp-checks li small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }

.cp-dark { background: var(--fg); border-radius: 20px; padding: clamp(34px, 5vw, 56px) clamp(22px, 5vw, 50px); color: #F3E6C8; text-align: center; position: relative; overflow: hidden; }
.cp-dark .eyebrow { color: var(--accent); }
.cp-dark h2 { color: #F8EEDA; font-size: clamp(24px, 3.2vw, 34px); margin: 10px auto 18px; max-width: 760px; }
.cp-dark p { color: #C9B896; font-size: 15px; max-width: 720px; margin: 0 auto 12px; }
.cp-dark .motto { margin-top: 18px; font-family: 'Playfair Display', serif; font-size: clamp(18px, 2.2vw, 23px); color: #F8EEDA; font-style: italic; }
.cp-dark .actions { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cp-dark .btn-outline { color: #F8EEDA; border-color: rgba(243, 230, 200, .45); }
.cp-dark .cp-checks { text-align: left; max-width: 760px; margin: 22px auto 0; }
.cp-dark .cp-checks li { color: #F3E6C8; }
.cp-dark .cp-checks li::before { background: var(--accent); color: var(--fg); }

.cp-company { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
@media (max-width: 860px) { .cp-company { grid-template-columns: minmax(0, 1fr); } }
.cp-company h3 { font-size: 22px; margin-bottom: 6px; }
.cp-company .sub { color: var(--accent-ink); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.cp-company dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 0; font-size: 14.5px; }
.cp-company dt { color: var(--muted); }
.cp-company dd { margin: 0; color: var(--fg); font-weight: 500; }
.cp-company dd a { color: var(--accent-deep); }
.cp-company .actions { display: flex; flex-direction: column; gap: 10px; }
.cp-company .actions > * { justify-content: center; }

.cp-occasions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cp-occasions span { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }

.cp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .cp-two { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.cp-two .frame { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.cp-two .frame img { display: block; width: 100%; border-radius: 8px; aspect-ratio: 4/3; object-fit: cover; }
.cp-two .copy p { color: var(--muted); font-size: 15px; margin-top: 12px; }

/* ---------- Homepage: "Mua sắm an tâm" policy cards ---------- */
.shop-policy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .shop-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shop-policy-grid { grid-template-columns: minmax(0, 1fr); } }
.shop-policy { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-decoration: none; transition: transform 220ms ease, border-color 220ms ease; }
.shop-policy:hover { transform: translateY(-4px); border-color: var(--accent); }
.shop-policy .emoji { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.shop-policy strong { font-family: 'Playfair Display', serif; font-size: 18px; }
.shop-policy span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.shop-policy em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }

/* ---------- Homepage: CTV band ---------- */
.ctv-band { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; padding: clamp(28px, 4vw, 46px); border-radius: 20px; background: linear-gradient(135deg, var(--accent-deep), var(--accent-deep-dark)); color: #F8EEDA; }
@media (max-width: 860px) { .ctv-band { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.ctv-band .eyebrow { color: #F3D8A6; }
.ctv-band h2 { color: #FFF7E6; font-size: clamp(24px, 3vw, 34px); margin: 10px 0 12px; }
.ctv-band p { color: #F1DCC0; font-size: 15px; }
.ctv-band .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.ctv-band .btn-gold { background: #F3D8A6; color: var(--fg); }
.ctv-band .btn-outline { color: #FFF7E6; border-color: rgba(255, 247, 230, .5); }
.ctv-band ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ctv-band li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 247, 230, .09); border: 1px solid rgba(255, 247, 230, .16); font-size: 15px; color: #FFF7E6; }
.ctv-band li span { flex: none; font-size: 20px; }

/* A check list placed inside a card must not inherit the card's chip style. */
.cp-card ul.cp-checks { display: grid; flex-wrap: nowrap; gap: 12px; margin-top: 0; }
.cp-card ul.cp-checks li { padding: 0 0 0 32px; border: 0; border-radius: 0; background: none; font-size: 15px; font-weight: 600; color: var(--fg); }
.cp-card ul.cp-checks li small { font-weight: 400; }

/* Page heads set `padding: 46px 0 8px` on an element that is also .wrap,
   which wiped .wrap's side gutter — text touched the screen edge on phones
   (pre-existing on about / đặt hàng / danh mục / set pages too). Two-class
   selector wins over those single-class rules, including the inline ones. */
.wrap.page-head, .wrap.cp-head { padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) { .wrap.page-head, .wrap.cp-head { padding-left: 20px; padding-right: 20px; } .cp-head h1 { font-size: 27px; } }

/* ---------- Single product: purchase policies (inc/woocommerce.php) ---------- */
.buy-policy { display: grid; gap: 8px; margin-top: 18px; }
.buy-policy a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 13.5px; line-height: 1.45; text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; }
.buy-policy a:hover { border-color: var(--accent); transform: translateX(2px); }
.buy-policy a > span:first-child { flex: none; font-size: 18px; line-height: 1.2; }
.buy-policy b { display: block; color: var(--fg); font-size: 14px; }
.buy-policy-note { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--accent-deep); border-radius: 0 12px 12px 0; background: color-mix(in oklab, var(--accent-deep) 7%, var(--surface)); font-size: 13.5px; line-height: 1.55; color: var(--fg); }
.buy-policy-note b { color: var(--accent-deep); }
.buy-policy-note a { color: var(--accent-deep); font-weight: 600; }

/* ---------- Pagination (WooCommerce shop/category + blog/search) ----------
   Selectors are deliberately as specific as woocommerce.css's own
   (.woocommerce nav.woocommerce-pagination ul li …) so the theme wins. */
body nav.woocommerce-pagination, body .navigation.pagination { margin-top: 44px; text-align: center; }
body nav.woocommerce-pagination ul.page-numbers,
body .navigation.pagination .nav-links {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  border: 0; margin: 0; padding: 0; list-style: none;
}
body nav.woocommerce-pagination ul.page-numbers li { border: 0; float: none; overflow: visible; margin: 0; }
body nav.woocommerce-pagination ul.page-numbers li .page-numbers,
body .navigation.pagination .nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg);
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1; text-decoration: none;
  box-shadow: 0 6px 16px -10px rgba(58, 38, 24, .35);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible,
body .navigation.pagination .nav-links a.page-numbers:hover {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface)); border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px);
}
body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
body .navigation.pagination .nav-links .page-numbers.current {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #FFF9EE;
  box-shadow: 0 10px 22px -10px rgba(139, 30, 36, .65);
}
body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
body .navigation.pagination .nav-links .page-numbers.dots {
  background: none; border-color: transparent; box-shadow: none; min-width: 24px; padding: 0; color: var(--muted);
}
body nav.woocommerce-pagination ul.page-numbers li .page-numbers.next,
body nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev,
body .navigation.pagination .nav-links .page-numbers.next,
body .navigation.pagination .nav-links .page-numbers.prev {
  background: var(--fg); border-color: var(--fg); color: #F3E6C8; font-size: 16px;
}
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover,
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #FFF9EE;
}
@media (max-width: 520px) {
  body nav.woocommerce-pagination ul.page-numbers, body .navigation.pagination .nav-links { gap: 6px; }
  body nav.woocommerce-pagination ul.page-numbers li .page-numbers,
  body .navigation.pagination .nav-links .page-numbers { min-width: 36px; height: 36px; padding: 0 9px; font-size: 13.5px; }
}

/* Pagination icons: leaf-sprout arrows (inline SVG) and a ginseng-berry
   cluster in place of the "…" gap. */
body nav.woocommerce-pagination ul.page-numbers li .page-numbers .csk-pager-arrow,
body .navigation.pagination .nav-links .page-numbers .csk-pager-arrow { display: block; width: 22px; height: 22px; }
.csk-pager-arrow--prev { transform: scaleX(-1); }
body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
body .navigation.pagination .nav-links .page-numbers.dots {
  font-size: 0; color: transparent; min-width: 26px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2212.5%22%20r%3D%222.5%22%20fill%3D%22%238B1E24%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.6%22%20r%3D%222.5%22%20fill%3D%22%23B3262E%22/%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2212.5%22%20r%3D%222.5%22%20fill%3D%22%238B1E24%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214.8%22%20r%3D%222.5%22%20fill%3D%22%23A8242A%22/%3E%3Ccircle%20cx%3D%226.8%22%20cy%3D%2211.8%22%20r%3D%22.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.75%22/%3E%3Ccircle%20cx%3D%2211.3%22%20cy%3D%228.9%22%20r%3D%22.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.75%22/%3E%3Ccircle%20cx%3D%2215.8%22%20cy%3D%2211.8%22%20r%3D%22.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.75%22/%3E%3Ccircle%20cx%3D%2211.3%22%20cy%3D%2214.1%22%20r%3D%22.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.75%22/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body nav.woocommerce-pagination ul.page-numbers li .page-numbers.next,
body nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev,
body .navigation.pagination .nav-links .page-numbers.next,
body .navigation.pagination .nav-links .page-numbers.prev { width: 44px; min-width: 44px; height: 44px; padding: 0; }
body nav.woocommerce-pagination ul.page-numbers li .page-numbers .csk-pager-arrow,
body .navigation.pagination .nav-links .page-numbers .csk-pager-arrow { width: 26px; height: 26px; }
body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
body .navigation.pagination .nav-links .page-numbers.dots { min-width: 32px; background-size: 28px 28px; }
@media (max-width: 520px) {
  body nav.woocommerce-pagination ul.page-numbers li .page-numbers.next,
  body nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev { width: 38px; min-width: 38px; height: 38px; }
  body nav.woocommerce-pagination ul.page-numbers li .page-numbers .csk-pager-arrow { width: 22px; height: 22px; }
}
@media (max-width: 520px) {
  body nav.woocommerce-pagination ul.page-numbers, body .navigation.pagination .nav-links { gap: 5px; flex-wrap: nowrap; }
  body nav.woocommerce-pagination ul.page-numbers li .page-numbers,
  body .navigation.pagination .nav-links .page-numbers { min-width: 34px; height: 34px; padding: 0 7px; font-size: 13px; }
  body nav.woocommerce-pagination ul.page-numbers li .page-numbers.next,
  body nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev,
  body .navigation.pagination .nav-links .page-numbers.next,
  body .navigation.pagination .nav-links .page-numbers.prev { width: 36px; min-width: 36px; height: 36px; padding: 0; }
  body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
  body .navigation.pagination .nav-links .page-numbers.dots { min-width: 24px; padding: 0; background-size: 22px 22px; }
}

/* ---------- Theme line icons (csk_theme_icon) in place of emoji ---------- */
.cp-card .emoji { color: var(--accent-deep); font-size: 0; }
.cp-card .emoji .csk-theme-icon { width: 26px; height: 26px; }
.shop-policy .emoji { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font-size: 0; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 15%, var(--surface)); margin-bottom: 10px; transition: background-color 220ms ease, color 220ms ease, transform 220ms ease; }
.shop-policy:hover .emoji { background: var(--accent-deep); color: #FDF3E7; transform: rotate(-6deg) scale(1.05); }
.cp-card:hover .emoji { background: var(--accent-deep); color: #FDF3E7; }
.cp-card .emoji { transition: background-color 220ms ease, color 220ms ease; }
.buy-policy a > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); font-size: 0; }
.buy-policy a > span:first-child .csk-theme-icon { width: 20px; height: 20px; }
.ctv-band li span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #F3D8A6; background: rgba(255, 247, 230, .12); font-size: 0; }
.ctv-band li span .csk-theme-icon { width: 21px; height: 21px; }
.cp-card .emoji { width: 52px; height: 52px; }
.cp-card .emoji .csk-theme-icon { width: 30px; height: 30px; }
.shop-policy .emoji .csk-theme-icon { width: 27px; height: 27px; }