/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status / -badges),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* cherchip: Terms page + per-product terms (plain HTML from tos.html) */
.sa-page-terms-body h2 { font-family: var(--ff-heading); font-weight: 600; font-size: 1.5rem; margin: 2rem 0 .75rem; }
.sa-page-terms-body h2:first-child { margin-top: 0; }
.sa-page-terms-body h3, .sa-product-tos h3 { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.sa-product-tos h3 { margin-top: .25rem; }
.sa-page-terms-body h4, .sa-product-tos h4 { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin: 1rem 0 .4rem; color: rgb(var(--cl-success)); }
.sa-page-terms-body h3 img, .sa-page-terms-body h4 img, .sa-product-tos h3 img, .sa-product-tos h4 img { display: inline-block; margin: 0; }
.sa-page-terms-body p { margin: .5rem 0; }
.sa-page-terms-body ul, .sa-product-tos ul { list-style: disc; padding-left: 1.25rem; margin: .4rem 0 .9rem; }
.sa-page-terms-body li, .sa-product-tos li { margin: .3rem 0; }

/* cherchip preview look */
.cc-card, .sa-cherchip-grid .sa-product-card, .sa-product-how { background: rgb(var(--cl-surface)); border: 2px solid #F1E6CC; border-radius: 28px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.cc-card:hover, .sa-cherchip-grid .sa-product-card:hover { transform: translateY(-3px); border-color: #F6BE4F; box-shadow: 0 10px 0 -2px #F6E2A8; }
details.cc-card:hover { transform: none; }
.sa-product-card--padded-detail { padding: .75rem; }
.sa-product-card--padded-detail img { background: #EAF6DC; border-radius: 20px; }
.sa-announcement, .sa-announcement-bar { background: #8FCF6B !important; color: #5A3E2B !important; font-weight: 600; }
[data-scheme="dark"] .cc-card, [data-scheme="dark"] .sa-cherchip-grid .sa-product-card { border-color: rgb(var(--cl-t-primary) / .12); }
[data-scheme="dark"] .sa-announcement { background: #2E4423 !important; color: #D8EFC4 !important; }
.sa-tos-tabs button[aria-pressed="true"] { background: rgb(var(--cl-accent)); color: rgb(var(--cl-on-accent)); border-color: rgb(var(--cl-accent)); }