/*
Theme Name: TokyoTreasures (Astra Child)
Theme URI: https://tokyotreasures.nl
Template: astra
Author: TokyoTreasures
Description: Child-thema van Astra met de TokyoTreasures-huisstijl: een op Japan/Tokyo gebaseerd kleurenpalet (kon-iro indigo, shu-iro vermiljoen, kin-iro goud, sakura roze, washi-crème) plus losse hulp-klassen om in Elementor te gebruiken. Vereist dat het gratis Astra-thema is geïnstalleerd.
Version: 1.0
Text Domain: tokyotreasures-child
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --tt-ink: #1B2A4A;      /* Kon-iro (紺色) — traditioneel Japans diep indigoblauw */
  --tt-ink-2: #24365F;    /* iets lichtere indigo, voor panelen/kaarten op donker */
  --tt-paper: #F5EEDD;    /* Washi-iro — kleur van traditioneel Japans papier */
  --tt-shu: #E1523D;      /* Shu-iro (朱色) — vermiljoenrood van torii-poorten */
  --tt-sakura: #F3AFC4;   /* Sakura-iro (桜色) — kersenbloesem roze, zachte accent */
  --tt-gold: #D4A63A;     /* Kin-iro (金色) — goud, voor limited-edition/foil-accenten */
  --tt-cyan: #45E0D6;     /* moderne Tokyo neon-accent (Shibuya-signage), spaarzaam gebruiken */
  --tt-text-dark: #23231F;
}

/* ---- Sitebrede typografie ---- */
body, p, li, a, span, div{
  font-family: 'Work Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title{
  font-family: 'Baloo 2', cursive !important;
  font-weight: 800;
}

/* ---- Hulp-klassen: voeg toe via Elementor > Geavanceerd > CSS-klassen ---- */

/* Donkere sectie-achtergrond (zet op een Sectie/Container) */
.tt-bg-ink{ background-color: var(--tt-ink) !important; color: var(--tt-paper); }

/* Lichte "papieren" kaart-achtergrond (zet op een Sectie/Container of Widget) */
.tt-bg-paper{
  background-color: var(--tt-paper) !important;
  color: var(--tt-text-dark) !important;
  border-radius: 14px;
  padding: 20px;
}

/* Gouden "schaprand"-lijn onder een sectie of productrij */
.tt-shelf-edge{
  position: relative;
  padding-bottom: 14px;
}
.tt-shelf-edge::after{
  content: "";
  display: block;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tt-gold), rgba(212,166,58,0));
}

/* Ronde "LIMITED"-sticker — zet op een Text- of Icon Box-widget */
.tt-sticker{
  display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tt-sakura), var(--tt-shu));
  color: var(--tt-ink) !important; font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: 13px; text-align: center; line-height: 1.1;
  transform: rotate(12deg);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

/* Prijs-label in monospace, zoals een echt prijskaartje — zet op een Text-widget */
.tt-price{
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600; font-size: 14px;
  background: var(--tt-ink); color: var(--tt-gold) !important;
  padding: 6px 12px; border-radius: 6px;
}

/* Pil-knop met warme gloed — zet op een Knop-widget (in plaats van Elementor's eigen stijl) */
.tt-pill-btn, .tt-pill-btn.elementor-button{
  border-radius: 999px !important;
  border: 1px solid rgba(225,82,61,0.4) !important;
  background: rgba(255,255,255,0.03) !important;
  color: var(--tt-paper) !important;
  font-weight: 600 !important;
  transition: all .2s ease;
}
.tt-pill-btn:hover, .tt-pill-btn.elementor-button:hover{
  border-color: var(--tt-shu) !important;
  color: var(--tt-shu) !important;
  box-shadow: 0 0 0 1px var(--tt-shu), 0 0 18px rgba(225,82,61,0.4);
}

/* Alternatieve pil-knop met de moderne neon-accent (spaarzaam gebruiken, bijv. voor "Nieuw") */
.tt-pill-btn-neon:hover, .tt-pill-btn-neon.elementor-button:hover{
  border-color: var(--tt-cyan) !important;
  color: var(--tt-cyan) !important;
  box-shadow: 0 0 0 1px var(--tt-cyan), 0 0 18px rgba(69,224,214,0.45);
}

/* Zacht kersenbloesem-accent (bijv. voor een subtiele highlight of underline) */
.tt-bg-sakura{ background-color: var(--tt-sakura) !important; color: var(--tt-text-dark) !important; }

/* Vermiljoenrood accentvlak (bijv. voor een "Nieuw"-badge of highlight-sectie) */
.tt-bg-shu{ background-color: var(--tt-shu) !important; color: var(--tt-paper) !important; }

/* Aankondigingsbalk-look — zet op een Sectie bovenaan de pagina */
.tt-banner-strip{
  background: var(--tt-gold) !important; color: var(--tt-ink) !important;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px;
  text-align: center;
}

/* ---- Klassieke widgets (Astra widget-gebieden/zijbalk/footer) ---- */
.widget{
  margin-bottom: 22px; padding: 20px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(20,20,43,0.08);
}
.widget-title{
  font-family: 'Baloo 2', cursive; font-size: 15px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--tt-gold); display: inline-block;
}
.widget ul{ list-style: none; padding-left: 0; }
.widget ul li{ margin-bottom: 10px; padding-left: 16px; position: relative; font-size: 14px; }
.widget ul li::before{
  content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--tt-cyan);
}