/*
Theme Name: BestValuePhones
Theme URI: https://bestvaluephones.nl
Description: Huisstijl van BestValuePhones bovenop Storefront. Zelfde kleuren en
             hetzelfde lettertype als de zelfgebouwde site, zodat de winkel en
             de kassa er niet uitzien alsof ze van twee verschillende bedrijven zijn.
Author: BestValuePhones
Template: storefront
Version: 1.0
Text Domain: bvp
*/

/* ── Huisstijlkleuren ───────────────────────────────────────────────────────
   Overgenomen uit gereedschap/site-stukken/geraamte.html, regel 42-44.
   Verandert daar een kleur, verander hem hier ook.                          */
:root{
  --bvp-paars:        #332D82;
  --bvp-paars-licht:  #F5EBFF;
  --bvp-paars-link:   #593BCE;
  --bvp-groen:        #0E8663;
  --bvp-wit:          #FFFFFF;
  --bvp-zacht:        #F9F9F7;
  --bvp-rand:         #E5E6E3;
  --bvp-inkt:         #151514;
  --bvp-gedempt:      #72746B;
  --bvp-oker:         #A76101;
}

/* ── Lettertype ─────────────────────────────────────────────────────────────
   Het bestand staat in dit thema, niet bij Google. Reden: de site haalt met
   opzet niets van buitenaf op (AVG), en dat houden we hier vol.              */
@font-face{
  font-family:'Readex Pro';
  src:url('fonts/readex-pro-latin.woff2') format('woff2');
  font-weight:200 700;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

body,
button, input, select, textarea,
.site-title, .site-description,
h1, h2, h3, h4, h5, h6{
  font-family:'Readex Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body{ color:var(--bvp-inkt); background:var(--bvp-wit); }

/* ── Koppen en links ───────────────────────────────────────────────────────*/
h1,h2,h3,h4,h5,h6{ color:var(--bvp-paars); }
a{ color:var(--bvp-paars-link); }
a:hover, a:focus{ color:var(--bvp-paars); }

/* ── Knoppen ───────────────────────────────────────────────────────────────*/
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .widget a.button, .woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background-color:var(--bvp-paars);
  color:var(--bvp-wit);
  border-radius:8px;
  font-weight:600;
}
button:hover, .button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover{
  background-color:var(--bvp-paars-link);
  color:var(--bvp-wit);
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt{
  background-color:var(--bvp-groen);
  color:var(--bvp-wit);
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
  background-color:#0b6d51;
}

/* ── Prijzen en etiketten ──────────────────────────────────────────────────*/
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{ color:var(--bvp-paars); font-weight:600; }

.woocommerce span.onsale{
  background-color:var(--bvp-oker);
  color:var(--bvp-wit);
  border-radius:6px;
  font-weight:600;
}

/* ── Kopbalk en voet ───────────────────────────────────────────────────────*/
.site-header{ background-color:var(--bvp-paars); }
.site-header, .site-header a, .site-header .site-title a{ color:var(--bvp-wit); }
.site-footer{ background-color:var(--bvp-zacht); color:var(--bvp-inkt); }
.site-footer a{ color:var(--bvp-paars-link); }

/* ── Meldingen ─────────────────────────────────────────────────────────────*/
.woocommerce-message, .woocommerce-info{ border-top-color:var(--bvp-groen); }
.woocommerce-error{ border-top-color:#B3261E; }

/* ── Grotere raakvlakken: de site moet met dikke vingers te bedienen zijn ──*/
.woocommerce .quantity .qty{ min-height:44px; }
.woocommerce a.button, .woocommerce button.button{ min-height:44px; }