/* ==========================================================================
   theme-presets.css — spec v3 shared layer
   Text Style classes (text_presets), the CSS-variable button, and small
   helpers shared by the v3 sections. Loaded once from layouts/theme.liquid.
   ========================================================================== */

/* ---------- Text Style presets (§3.3) ----------
   Each class reads the editor's per-preset variables first, then the theme
   font/weight it references, so repointing a preset moves every block. */
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
  margin: 0;
  letter-spacing: -0.025em;
}
.text-h1 { font-family: var(--font_size_h1_font_family, var(--ff-heading)); font-weight: var(--font_size_h1_font_weight, var(--fw-semibold)); font-size: var(--font_size_h1); line-height: 1.02; }
.text-h2 { font-family: var(--font_size_h2_font_family, var(--ff-heading)); font-weight: var(--font_size_h2_font_weight, var(--fw-semibold)); font-size: var(--font_size_h2); line-height: 1.05; }
.text-h3 { font-family: var(--font_size_h3_font_family, var(--ff-heading)); font-weight: var(--font_size_h3_font_weight, var(--fw-semibold)); font-size: var(--font_size_h3); line-height: 1.12; }
.text-h4 { font-family: var(--font_size_h4_font_family, var(--ff-heading)); font-weight: var(--font_size_h4_font_weight, var(--fw-semibold)); font-size: var(--font_size_h4); line-height: 1.2; }
.text-h5 { font-family: var(--font_size_h5_font_family, var(--ff-heading)); font-weight: var(--font_size_h5_font_weight, var(--fw-semibold)); font-size: var(--font_size_h5); line-height: 1.25; letter-spacing: -0.015em; }
.text-h6 { font-family: var(--font_size_h6_font_family, var(--ff-heading)); font-weight: var(--font_size_h6_font_weight, var(--fw-medium)); font-size: var(--font_size_h6); line-height: 1.4; letter-spacing: 0; }

.text-body-lg { font-family: var(--font_size_body_lg_font_family, var(--ff-body)); font-weight: var(--font_size_body_lg_font_weight, var(--fw-regular)); font-size: var(--font_size_body_lg); line-height: 1.5; }
.text-body    { font-family: var(--font_size_body_font_family, var(--ff-body)); font-weight: var(--font_size_body_font_weight, var(--fw-regular)); font-size: var(--font_size_body); line-height: 1.6; }
.text-body-sm { font-family: var(--font_size_body_sm_font_family, var(--ff-body)); font-weight: var(--font_size_body_sm_font_weight, var(--fw-regular)); font-size: var(--font_size_body_sm); line-height: 1.6; }
.text-eyebrow { font-family: var(--font_size_eyebrow_font_family, var(--ff-body)); font-weight: var(--font_size_eyebrow_font_weight, var(--fw-medium)); font-size: var(--font_size_eyebrow); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.14em; }
.text-label   { font-family: var(--font_size_label_font_family, var(--ff-body)); font-weight: var(--font_size_label_font_weight, var(--fw-medium)); font-size: var(--font_size_label); line-height: 1.2; }
.text-caption { font-family: var(--font_size_caption_font_family, var(--ff-body)); font-weight: var(--font_size_caption_font_weight, var(--fw-medium)); font-size: var(--font_size_caption); line-height: 1.4; }
.text-quote   { font-family: var(--font_size_quote_font_family, var(--ff-italic)); font-weight: var(--font_size_quote_font_weight, var(--fw-regular)); font-size: var(--font_size_quote); line-height: 1.4; }
.text-button  { font-family: var(--font_size_button_font_family, var(--ff-body)); font-weight: var(--font_size_button_font_weight, var(--fw-semibold)); font-size: var(--font_size_button); line-height: 1.2; }
.text-fine-print { font-family: var(--font_size_fine_print_font_family, var(--ff-body)); font-weight: var(--font_size_fine_print_font_weight, var(--fw-regular)); font-size: var(--font_size_fine_print); line-height: 1.5; }

/* Accent words: inline italic in a heading renders in the accent color, upright */
.v3-text em, .v3-text i { font-style: normal; color: var(--accent-color, var(--clr-accent)); }
.v3-text p { margin: 0; }
.v3-text p + p { margin-top: 0.75em; }
.v3-text a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* Manual override sizes (§18.5) */
.fs-override { font-size: var(--fs-d) !important; }
@media (max-width: 1023px) { .fs-override { font-size: var(--fs-t) !important; } }
@media (max-width: 767px)  { .fs-override { font-size: var(--fs-m) !important; } }

/* ---------- Button component (§18.4) ---------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 44px; box-sizing: border-box;
  padding: var(--btn-pt, .875em) var(--btn-pr, 1.6em) var(--btn-pb, .875em) var(--btn-pl, 1.6em);
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--btn-bw, 0) solid var(--btn-bd);
  border-radius: var(--btn-radius, 10px);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, filter .2s;
}
.ui-btn svg { width: 1.15em; height: 1.15em; flex: none; }
.ui-btn--outline { background: transparent; }
.ui-btn--text { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }
.ui-btn--full { width: 100%; }
.ui-btn--hover-colors:hover { background: var(--btn-hbg); color: var(--btn-hfg); border-color: var(--btn-hbd); }
.ui-btn--hover-darken:hover { filter: brightness(.9); }
.ui-btn--hover-lighten:hover { filter: brightness(1.12); }
.ui-btn--hover-opacity:hover { opacity: .85; }
.ui-btn--hover-fill.ui-btn--outline:hover { background: var(--btn-bd); color: var(--btn-hfg); }
.ui-btn--hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ui-btn--hover-shadow:hover { box-shadow: var(--shadow-lg); }
.ui-btn--hover-scale-up:hover { transform: scale(1.04); }
@keyframes ui-btn-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.ui-btn--hover-pulse:hover { animation: ui-btn-pulse .9s ease-in-out infinite; }
.ui-btn--hover-underline:hover { text-decoration: underline; text-underline-offset: .2em; }
.ui-btn--text.ui-btn--hover-darken:hover, .ui-btn--text.ui-btn--hover-lighten:hover { filter: none; text-decoration: underline; text-underline-offset: .2em; }
.ui-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ui-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Shared section helpers ---------- */
.v3-section { position: relative; box-sizing: border-box; }
.v3-section *, .v3-section *::before, .v3-section *::after { box-sizing: border-box; }
.v3-section img { display: block; max-width: 100%; }
.v3-container { position: relative; margin-inline: auto; width: 100%; }
/* Page frame: when a container border is on, draw the side + bottom rules only,
   so stacked sections read as one continuous framed column (as on the source). */
.v3-container--framed { border-top: 0 !important; }
.v3-icon { display: inline-flex; width: var(--icon-size, 20px); height: var(--icon-size, 20px); flex: none; }
.v3-icon svg { width: 100%; height: 100%; }
.v3-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; border-color: var(--corner-color, currentColor); opacity: .5; }
.v3-corner--tl { top: 14px; left: 14px; border-top: 1px solid; border-left: 1px solid; }
.v3-corner--br { right: 14px; bottom: 14px; border-right: 1px solid; border-bottom: 1px solid; }
.v3-stripes { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(-58deg, transparent 0 46px, var(--stripe-color, rgba(255,255,255,.05)) 46px 47px); }
.v3-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ui-btn, .v3-section * { transition: none !important; animation: none !important; }
  .ui-btn--hover-lift:hover { transform: none; }
}

/* ---------- v3 intro blocks ---------- */
.v3-blk { margin: 0; }
.v3-link { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; min-height: 24px; color: var(--link-color, currentColor); transition: color .2s; }
.v3-link:hover { color: var(--link-hover, var(--link-color)); }
.v3-link span { text-underline-offset: .2em; }
.v3-link--u-always span, .v3-link--u-hover:hover span { text-decoration: underline; }
.v3-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.v3-link .v3-icon { --icon-size: 1.15em; transition: transform .2s; }
.v3-link:hover .v3-icon { transform: translateX(2px); }
.v3-badge { display: inline-flex; align-items: center; gap: .4em; padding: .4em .8em; border-radius: 999px; white-space: nowrap; }
.v3-intro { display: flex; flex-direction: column; gap: 16px; }
.v3-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- v3 section intro (stacked or split) ---------- */
.v3-head { display: grid; gap: 16px 48px; margin-bottom: var(--head-gap, 40px); }
.v3-head--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
.v3-head__main, .v3-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.v3-head__main > .v3-blk, .v3-head__aside > .v3-blk { max-width: 100%; }
.v3-head--split .v3-head__aside { align-items: flex-end; text-align: right; }
.v3-head--split.v3-head--aside-left .v3-head__aside { align-items: flex-start; text-align: left; }
.v3-head--center { text-align: center; justify-items: center; }
.v3-head--center .v3-head__main { align-items: center; }
@media (max-width: 1023px) {
  .v3-head--split { grid-template-columns: 1fr; }
  .v3-head--split .v3-head__aside { align-items: flex-start; text-align: left; }
}

/* ---------- v3 compact product card ---------- */
.v3-pc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.v3-pc__media { display: block; overflow: hidden; aspect-ratio: var(--pc-ratio, 4/3); border-radius: var(--pc-radius, 10px); background: var(--pc-media-bg, var(--clr-light)); }
.v3-pc__media img { width: 100%; height: 100%; object-fit: var(--pc-fit, cover); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.v3-pc:hover .v3-pc__media img { transform: scale(1.04); }
.v3-pc__cat { margin: 14px 0 0; color: var(--pc-muted, var(--clr-muted)); }
.v3-pc__title { margin: 12px 0 0; color: var(--pc-title, var(--clr-dark)); font-weight: var(--fw-medium); }
.v3-pc__cat + .v3-pc__title { margin-top: 4px; }
.v3-pc__title a { color: inherit; text-decoration: none; }
.v3-pc__title a:hover { text-decoration: underline; text-underline-offset: .2em; }
.v3-pc__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.v3-pc__price { margin: 0; color: var(--pc-price, var(--clr-dark)); font-weight: var(--fw-semibold); }
.v3-pc__cta { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--pc-btn-bg, var(--clr-primary)); color: var(--pc-btn-fg, var(--clr-white)); transition: filter .2s; text-decoration: none; }
.v3-pc__cta:hover { filter: brightness(.9); }
.v3-pc__cta:focus-visible { outline: 2px solid var(--pc-btn-bg, var(--clr-primary)); outline-offset: 2px; }
.v3-pc__cta .v3-icon { --icon-size: 16px; }
@media (prefers-reduced-motion: reduce) { .v3-pc__media img { transition: none; } }
.v3-pc--contain .v3-pc__media img, .v3-blend img { mix-blend-mode: multiply; padding: 6%; }