/* ==========================================================================
   Kagaz — warm-paper editorial. Square corners, hairline rules, monospace
   micro-labels under a large light serif. Painted only from --theme-* so the
   look survives the seller's own palette, light or dark.
   ========================================================================== */

[data-theme="kagaz"] {
  background-color: var(--theme-bg);
  color: var(--theme-ink);
  font-family: var(--theme-font-body);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Type — a large, light serif at tight leading is the whole voice
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] h1,
[data-theme="kagaz"] h2,
[data-theme="kagaz"] h3,
[data-theme="kagaz"] .font-heading,
[data-theme="kagaz"] .theme-hero-title,
[data-theme="kagaz"] .theme-section-heading h2,
[data-theme="kagaz"] .theme-section-heading h3,
[data-theme="kagaz"] .theme-product-grid-title,
[data-theme="kagaz"] .theme-rich-text-title,
[data-theme="kagaz"] .theme-faq-title,
[data-theme="kagaz"] .theme-contact-title,
[data-theme="kagaz"] .theme-policy-title,
[data-theme="kagaz"] .theme-header-name,
[data-theme="kagaz"] .theme-footer-name {
  font-family: var(--theme-font-heading);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--theme-ink);
}

/* The signature: every small label is monospace, wide-tracked and uppercase. */
[data-theme="kagaz"] .theme-hero-badge,
[data-theme="kagaz"] .theme-product-card-badge,
[data-theme="kagaz"] .theme-features-grid li h3,
[data-theme="kagaz"] .theme-reviews li p:last-child,
[data-theme="kagaz"] .theme-marquee,
[data-theme="kagaz"] .theme-footer-copy {
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Editorial headings sit left; sections with a seller alignment field keep theirs. */
[data-theme="kagaz"] .theme-product-grid-header,
[data-theme="kagaz"] .theme-faq-header,
[data-theme="kagaz"] .theme-features-grid .theme-section-heading,
[data-theme="kagaz"] .theme-reviews .theme-section-heading {
  text-align: left;
}

[data-theme="kagaz"] .theme-section-heading h2,
[data-theme="kagaz"] .theme-section-heading h3,
[data-theme="kagaz"] .theme-product-grid-title,
[data-theme="kagaz"] .theme-faq-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
}

[data-theme="kagaz"] .theme-section-heading p,
[data-theme="kagaz"] .theme-product-grid-subtitle {
  color: var(--theme-muted) !important;
  font-size: 0.875rem;
  line-height: 1.7;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Header — hairline rule, serif wordmark, monospace nav
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-header {
  border-bottom: 1px solid var(--theme-border);
  background-color: color-mix(in srgb, var(--theme-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}

[data-theme="kagaz"] .theme-header-name {
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-header-cart {
  background-color: transparent !important;
  color: var(--theme-ink) !important;
  border: 1px solid var(--theme-ink) !important;
  padding: 0.5rem 1rem !important;
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.6875rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

[data-theme="kagaz"] .theme-header-cart:hover {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

/* --------------------------------------------------------------------------
   Hero — mono eyebrow, oversized serif, outlined CTA
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-hero-badge {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--theme-accent) !important;
}

[data-theme="kagaz"] .theme-hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4.75rem) !important;
  line-height: 0.98 !important;
  margin-top: 1.25rem !important;
}

[data-theme="kagaz"] .theme-hero-desc {
  color: var(--theme-muted) !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  max-width: 22rem !important;
}

/* Outlined, not filled: the seller's colour reads as the line, and fills on hover. */
[data-theme="kagaz"] .theme-hero-cta {
  background-color: transparent !important;
  color: var(--theme-ink) !important;
  border: 1px solid var(--theme-primary) !important;
  box-shadow: none !important;
  padding: 0.9375rem 2rem !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="kagaz"] .theme-hero-cta:hover {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  opacity: 1;
}

[data-theme="kagaz"] .theme-hero-media {
  background: color-mix(in srgb, var(--theme-ink) 7%, var(--theme-surface)) !important;
}

/* --------------------------------------------------------------------------
   Product cards — 3:4 crop, no frame, quiet prices
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-product-grid-header {
  border-bottom: 1px solid var(--theme-border);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

[data-theme="kagaz"] .theme-product-card-media {
  aspect-ratio: 3 / 4 !important;
  border: 0 !important;
  background-color: color-mix(in srgb, var(--theme-ink) 6%, var(--theme-surface)) !important;
}

[data-theme="kagaz"] .theme-product-card-media img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="kagaz"] .theme-product-card:hover .theme-product-card-media img {
  transform: scale(1.03);
}

[data-theme="kagaz"] .theme-product-card-badge {
  background-color: color-mix(in srgb, var(--theme-bg) 85%, transparent);
}

[data-theme="kagaz"] .theme-product-card-name {
  font-family: var(--theme-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-product-card-price {
  font-family: var(--theme-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--theme-muted) !important;
}

[data-theme="kagaz"] .theme-product-card-wishlist {
  border-radius: var(--theme-radius) !important;
  border: 1px solid var(--theme-border);
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Gallery — staggered plates with serif captions ("shop by piece")
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-image-gallery figure > div {
  aspect-ratio: 3 / 4 !important;
}

@media (min-width: 768px) {
  [data-theme="kagaz"] .theme-image-gallery figure:nth-child(even) {
    margin-top: 1.75rem;
  }
}

[data-theme="kagaz"] .theme-image-gallery figcaption {
  font-family: var(--theme-font-heading);
  font-size: 1.25rem;
  opacity: 1;
  color: var(--theme-ink) !important;
}

/* --------------------------------------------------------------------------
   Image with text — a paper band, and a rule instead of a button
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-image-with-text {
  background-color: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
  border-bottom: 1px solid var(--theme-border);
}

[data-theme="kagaz"] .theme-image-with-text h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.05;
}

[data-theme="kagaz"] .theme-image-with-text a {
  background: transparent !important;
  color: var(--theme-ink) !important;
  border-bottom: 1px solid var(--theme-ink);
  padding: 0 0 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Text banner — the pull quote
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-text-banner > div {
  max-width: 46rem;
  margin-inline: auto;
}

[data-theme="kagaz"] .theme-text-banner h2 {
  font-family: var(--theme-font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem) !important;
  line-height: 1.4;
}

[data-theme="kagaz"] .theme-text-banner p:first-child {
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   Features — spec rows on hairlines, not cards
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-features-grid ul {
  display: block;
}

[data-theme="kagaz"] .theme-features-grid li {
  display: flex;
  /* The renderer's own class is flex-col, so the row direction has to be stated or the value wraps under the label. */
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--theme-border) !important;
  padding: 0.875rem 0 !important;
}

/* The glyph is card furniture; a rule-and-value row does not need it. */
[data-theme="kagaz"] .theme-features-grid li > span[aria-hidden="true"] {
  display: none;
}

[data-theme="kagaz"] .theme-features-grid li h3 {
  flex-shrink: 0;
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-features-grid li p {
  margin-left: auto;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--theme-muted) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Reviews — italic serif under a full-strength rule
   -------------------------------------------------------------------------- */
/* Stats line follows the left-aligned editorial heading, not the component's centre. */
[data-theme="kagaz"] .theme-reviews > div > p {
  text-align: left;
}

/* One rule above the whole set, so a single review does not leave a third-width stray line. */
[data-theme="kagaz"] .theme-reviews ul {
  border-top: 1px solid var(--theme-ink);
  padding-top: 1.5rem;
  gap: 2rem;
}

[data-theme="kagaz"] .theme-reviews li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

[data-theme="kagaz"] .theme-reviews li p:first-of-type {
  font-family: var(--theme-font-heading);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
}

[data-theme="kagaz"] .theme-reviews li p:last-child {
  color: var(--theme-muted) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   FAQ — uppercase questions on hairlines
   -------------------------------------------------------------------------- */
/* Full container width so the hairline rows share the page's left edge; the measure is capped on the answer instead. */
[data-theme="kagaz"] .theme-faq-section > div {
  max-width: 72rem;
}

[data-theme="kagaz"] .theme-faq-answer {
  max-width: 42rem;
}

[data-theme="kagaz"] .theme-faq-list {
  border-top: 1px solid var(--theme-border);
}

[data-theme="kagaz"] .theme-faq-item {
  border: 0 !important;
  border-bottom: 1px solid var(--theme-border) !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  padding: 1rem 0 !important;
  background: transparent !important;
}

[data-theme="kagaz"] .theme-faq-question {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-faq-answer {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--theme-muted) !important;
}

/* --------------------------------------------------------------------------
   Rich text, contact, policy
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-rich-text-section {
  border-top: 1px solid var(--theme-border);
  border-bottom: 1px solid var(--theme-border);
}

[data-theme="kagaz"] .theme-rich-text-content {
  color: var(--theme-muted) !important;
  font-size: 0.9375rem;
  line-height: 1.8;
}

[data-theme="kagaz"] .theme-contact-card {
  border: 1px solid var(--theme-border) !important;
  background-color: var(--theme-surface) !important;
}

/* --------------------------------------------------------------------------
   Footer — hairline, serif wordmark, sentence-case links
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-footer {
  border-top: 1px solid var(--theme-border);
  background-color: var(--theme-bg) !important;
  padding-top: 3.5rem;
  padding-bottom: 1.75rem;
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-footer-name {
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-footer-link {
  color: var(--theme-muted) !important;
  font-family: var(--theme-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

[data-theme="kagaz"] .theme-footer-link:hover {
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-footer-copy {
  color: var(--theme-muted) !important;
}

/* --------------------------------------------------------------------------
   Trust row — hairline ledger rows, no chips
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-trust-badges ul {
  gap: 0;
  border-top: 1px solid var(--theme-border);
}

[data-theme="kagaz"] .theme-trust-badge {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--theme-border) !important;
  border-radius: 0 !important;
  padding: 0.875rem 0 !important;
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-theme="kagaz"] .theme-trust-badge span[aria-hidden="true"] {
  color: var(--theme-accent) !important;
}

/* --------------------------------------------------------------------------
   Promo band — paper, not a filled slab
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-promo-inner {
  background: var(--theme-surface) !important;
  color: var(--theme-ink) !important;
  border: 1px solid var(--theme-ink);
  border-radius: 0 !important;
}

[data-theme="kagaz"] .theme-promo-eyebrow {
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--theme-accent) !important;
  opacity: 1;
}

[data-theme="kagaz"] .theme-promo-title {
  font-family: var(--theme-font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
}

[data-theme="kagaz"] .theme-promo-desc {
  color: var(--theme-muted) !important;
  opacity: 1;
}

/* The outlined CTA the rest of the theme uses, rather than an inverted fill. */
[data-theme="kagaz"] .theme-promo-cta {
  background: transparent !important;
  color: var(--theme-ink) !important;
  border: 1px solid var(--theme-ink);
  border-radius: 0 !important;
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

[data-theme="kagaz"] .theme-promo-cta:hover {
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Bento — square plates on the paper grid
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-bento-tile {
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--theme-ink) 6%, var(--theme-surface)) !important;
}

[data-theme="kagaz"] .theme-bento-tile img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Marquee — already monospace above; keep it a hairline strip, not a filled bar
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-marquee {
  background-color: var(--theme-surface) !important;
  color: var(--theme-ink) !important;
  border-top: 1px solid var(--theme-border);
  border-bottom: 1px solid var(--theme-border);
}

/* --------------------------------------------------------------------------
   Hero background — the seller's "solid vs soft gradient" choice, in paper tones
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-hero-bg-gradient {
  background: linear-gradient(180deg, var(--theme-bg) 0%, color-mix(in srgb, var(--theme-ink) 4%, var(--theme-bg)) 100%);
}

[data-theme="kagaz"] .theme-hero-bg-solid {
  background: var(--theme-bg);
}

/* Over a photo the forced-white copy needs the accent eyebrow to go white too. */
[data-theme="kagaz"] .theme-hero-bg-image .theme-hero-badge {
  color: #ffffff !important;
}

[data-theme="kagaz"] .theme-hero-bg-image .theme-hero-title,
[data-theme="kagaz"] .theme-hero-bg-image .theme-hero-desc {
  color: #ffffff !important;
}

/* The outlined CTA is invisible against a dark photo without a light line. */
[data-theme="kagaz"] .theme-hero-bg-image .theme-hero-cta {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* --------------------------------------------------------------------------
   Track order — paper cards, square corners, monospace labels
   -------------------------------------------------------------------------- */
[data-theme="kagaz"] .theme-track-title {
  font-family: var(--theme-font-heading);
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--theme-ink) !important;
}

[data-theme="kagaz"] .theme-track-subtitle {
  font-family: var(--theme-font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

/* Hairline paper panels, not lifted cards — the same treatment as the rest of the theme. */
[data-theme="kagaz"] .theme-track-form,
[data-theme="kagaz"] .theme-track-card {
  border-radius: 0 !important;
  border: 1px solid var(--theme-border) !important;
  background-color: var(--theme-surface) !important;
  box-shadow: none !important;
}

/* The theme's signature: every small label is monospace and wide-tracked. */
[data-theme="kagaz"] .theme-track-form label,
[data-theme="kagaz"] .theme-track-card h3 {
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Outlined, not filled — matching the hero and image-with-text CTAs. */
[data-theme="kagaz"] .theme-track-cta {
  background-color: transparent !important;
  color: var(--theme-ink) !important;
  border: 1px solid var(--theme-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-weight: 400;
  letter-spacing: 0.1em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

[data-theme="kagaz"] .theme-track-cta:hover {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  opacity: 1;
}

/* Square step markers: a circle is the one shape this theme never uses. */
[data-theme="kagaz"] .theme-track-step {
  border-radius: 0 !important;
}

[data-theme="kagaz"] .theme-track-timeline span {
  font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: 0.1em;
}