/* =====================================================
   KTS Custom Theme CSS
   Theme Base: SHOPLINE Elegant 0.0.3
   Purpose: KTS brand layer / typography / layout overrides
   Path: public/kts/custom-kts.css
===================================================== */

/* =====================================================
   1. KTS Design Tokens
   Typography / color / spacing / breakpoint variables
   Declared but NOT applied yet — safe to add at any time.
   Apply by referencing var(--kts-*) in later sections.
===================================================== */

:root {
  /* ---- Typography: Font Families ---- */
  --kts-font-heading: "Cormorant Garamond", serif;
  --kts-font-body: "Mulish", sans-serif;
  --kts-font-ui: "Space Grotesk", sans-serif;

  /* ---- Typography: Font Weights ---- */
  --kts-heading-weight: 600;
  --kts-body-weight: 300;
  --kts-ui-weight: 600;

  /* ---- Typography: Letter Spacing ---- */
  --kts-heading-letter-spacing: -0.02em;
  --kts-ui-letter-spacing: 0.08em;
}

/* =====================================================
   2. KTS Typography Theme Variable Mapping
   Map KTS design tokens to existing theme typography CSS variables.
   Only font-family / font-weight / letter-spacing are set here.
   font-size / line-height / margin / padding are NOT modified.
===================================================== */

/* ---- Title System: title1–6 ---- */
:root {
  --sort-title1-font: var(--kts-font-heading);
  --sort-title1-font-weight: var(--kts-heading-weight);
  --sort-title1-letter-spacing: var(--kts-heading-letter-spacing);

  --sort-title2-font: var(--kts-font-heading);
  --sort-title2-font-weight: var(--kts-heading-weight);
  --sort-title2-letter-spacing: var(--kts-heading-letter-spacing);

  --sort-title3-font: var(--kts-font-heading);
  --sort-title3-font-weight: var(--kts-heading-weight);
  --sort-title3-letter-spacing: var(--kts-heading-letter-spacing);

  --sort-title4-font: var(--kts-font-heading);
  --sort-title4-font-weight: var(--kts-heading-weight);
  --sort-title4-letter-spacing: var(--kts-heading-letter-spacing);

  --sort-title5-font: var(--kts-font-heading);
  --sort-title5-font-weight: var(--kts-heading-weight);
  --sort-title5-letter-spacing: var(--kts-heading-letter-spacing);

  --sort-title6-font: var(--kts-font-heading);
  --sort-title6-font-weight: var(--kts-heading-weight);
  --sort-title6-letter-spacing: var(--kts-heading-letter-spacing);
}

/* ---- Body System: body1–6 & default body font ---- */
:root {
  /* Body default font (affects body element and .button via --sort-body-font) */
  --sort-body-font: var(--kts-font-body);

  /* Body class system body1–6 */
  --sort-body1-font: var(--kts-font-body);
  --sort-body1-font-weight: var(--kts-body-weight);

  --sort-body2-font: var(--kts-font-body);
  --sort-body2-font-weight: var(--kts-body-weight);

  --sort-body3-font: var(--kts-font-body);
  --sort-body3-font-weight: var(--kts-body-weight);

  --sort-body4-font: var(--kts-font-body);
  --sort-body4-font-weight: var(--kts-body-weight);

  --sort-body5-font: var(--kts-font-body);
  --sort-body5-font-weight: var(--kts-body-weight);

  --sort-body6-font: var(--kts-font-body);
  --sort-body6-font-weight: var(--kts-body-weight);
}

/* =====================================================
    3. Advanced Gallery
       Apply App body color variable to gallery description text.
       The Gallery App outputs --advc-body-color but does not
       reliably apply it to the description element's color.
       This keeps backend color settings effective across original,
       copied, and future Gallery sections without hardcoding a color.
===================================================== */

.advc-gallery__wall-item--desc.advc-richtext.advc-body {
  color: var(--advc-body-color, inherit) !important;
}

/* =====================================================
    4. Text Columns with Images
       App outputs --advc-btn-font-weight: 500 but does not
       reliably apply it to the button element. Fix font-weight
       only; other properties (font-family, font-size, line-height,
       color) are already correctly applied by the App.
===================================================== */

.advc-text-columns-with-images-item__button .advc-btn.advc-btn-arrow-link {
  font-weight: var(--advc-btn-font-weight, inherit) !important;
}

/* =====================================================
    5. Header
===================================================== */


/* =====================================================
    6. Announcement Bar
===================================================== */


/* =====================================================
    7. Collection Page
===================================================== */


/* =====================================================
    8. Product Page
===================================================== */
/* =====================================================
    9. Product Card
   Product card title / App product card title
   Uses Mulish 500 for readability (not 300 body weight)
===================================================== */

.block-product-title,
.block-product-title span,
.advc-product-item-title {
  font-family: var(--kts-font-body);
  font-weight: 500;
  text-transform: none;
}




/* =====================================================
    10. Blog / Article
   Article content link styles (migrated from templates/article.json custom_css)
   Scope limited to text container selectors (p, li, blockquote, td) to avoid
   matching Pinterest browser extension injected "Pin it" buttons.
   Does NOT affect product descriptions, FAQ content, or other RTE areas.
===================================================== */

.main-article .rte p a,
.main-article .rte li a,
.main-article .rte blockquote a,
.main-article .rte td a {
  color: rgb(var(--color-button-background));
  font-weight: var(--kts-ui-weight);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s ease;
}

.main-article .rte p a:hover,
.main-article .rte li a:hover,
.main-article .rte blockquote a:hover,
.main-article .rte td a:hover {
  opacity: 0.8;
}


/* =====================================================
    11. FAQ / SEO Content
===================================================== */

/* Hide FAQ content initially to prevent FOUC before JS moves it */
.my-seo-faq-content {
  display: none;
}

/* KTS FAQ / Vajra collection legacy description hiding */
body[data-collection-handle="vajra-dorje"] .collection-hero__description,
body[data-collection-handle="vajra-dorje"] .product-category-description,
body[data-collection-handle="vajra-dorje"] .collection-description,
body[data-collection-handle="vajra-dorje"] .section-collection-header .rte {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* FAQ Typography — with !important to override theme.config.json h2/p global rules */
body #faq-destination-target h2 {
  font-family: var(--kts-font-heading) !important;
  font-weight: var(--kts-heading-weight) !important;
  font-size: 20px !important;
  letter-spacing: var(--kts-heading-letter-spacing) !important;
  text-align: left;
  margin-bottom: 13px;
  color: #ffffff !important;
}

body #faq-destination-target summary {
  font-family: var(--kts-font-body) !important;
  font-weight: var(--kts-ui-weight) !important;
}

body #faq-destination-target p {
  font-family: var(--kts-font-body) !important;
  font-weight: var(--kts-body-weight) !important;
}

/* FAQ Container Layout & Interaction — migrated from section inline <style> */
body #faq-destination-target {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 25px;
  padding: 0 20px;
  color: #ffffff;
}

body #faq-destination-target details {
  margin-bottom: 0;
}

body #faq-destination-target summary {
  cursor: pointer;
  font-size: 15px;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  list-style: none;
}

body #faq-destination-target summary::-webkit-details-marker {
  display: none;
}

/* V-shaped arrow */
body #faq-destination-target summary::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-right: 5px;
  margin-bottom: 2px;
}

body #faq-destination-target details[open] > summary::after {
  transform: rotate(225deg);
  margin-bottom: -2px;
}

body #faq-destination-target p {
  margin-top: 12px;
  margin-bottom: 12px;
  color: #ffffff !important;
  line-height: 1.6 !important;
  opacity: 0.9;
  font-size: 14px !important;
}


/* =====================================================
    12. Buttons / Forms
   UI font: Space Grotesk for buttons, CTA, form elements.
===================================================== */

.button,
.shopline-element-buy-now {
  font-family: var(--kts-font-ui);
  font-weight: var(--kts-ui-weight);
  letter-spacing: var(--kts-ui-letter-spacing);
}
/* =====================================================
    13. Mobile Responsive
===================================================== */


/* =====================================================
    14. Temporary Overrides
   TODO: remove after migration
===================================================== */


/* =====================================================
    15. Deprecated / To Remove
===================================================== */