/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Sections, snippets and key elements carry stable `sa-` classes 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
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-cart .sa-footer-link
 *              .sa-announcement .sa-scheme-toggle
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-faq, .sa-steps
 * Primitives   .sa-btn, .sa-product-card (+ .sa-product-card--horizontal),
 *              .sa-searchbar, .sa-pagination, .sa-breadcrumbs, .sa-coupon,
 *              .sa-social-proof
 *
 * Example — bigger hero heading only on the shop page:
 *   .sa-tpl-shop .sa-hero h1 { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/