/*
Theme Name: Lyza
Theme URI: https://beautysalonlyza.nl
Description: Child theme van Storefront voor Beauty Salon Lyza. Zet de typografie,
 het contrast en het productgrid naar de huisstijl van het beeldmerk. Alleen CSS
 plus een lokaal lettertype -- geen template-overrides, dus Storefront-updates
 blijven gewoon werken.
Author: Beauty Salon Lyza
Template: storefront
Version: 1.12.0
Text Domain: lyza
*/

/* ---------------------------------------------------------------------------
   Uitgangspunt: het beeldmerk. Dat is een dunne, geometrische, kleinletter
   tekening in zwart-wit. Daar is de hele opzet van afgeleid: geen kleuraccent,
   geen ronde hoeken, geen schaduwen. De producten -- kaarten, verpakkingen --
   leveren de kleur; de pagina is de lijst eromheen.
   --------------------------------------------------------------------------- */

/* Jost: geometrische kleinletter met een licht gewicht, het dichtst bij de
   tekening van het logo. Lokaal meegeleverd, dus geen verzoek naar Google. */
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  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, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --lyza-ink: #000;          /* zoals het logo: echt zwart */
  --lyza-body: #454545;      /* leestekst; Storefront had #6d6d6d (5,2:1 -- haalt AA net).
                                Dit is 9,6:1: rustiger te lezen bij langere teksten. */
  --lyza-paper: #fff;
  /* Warm gebroken wit, dezelfde familie als de studio-achtergrond in de
     hero-foto (#fdfaf7). Daardoor voelen de producttegels en de voorpagina als
     één geheel in plaats van koel grijs naast warm wit. */
  --lyza-wash: #f7f1ed;
  --lyza-rule: #e3e1de;      /* haarlijnen */
  /* Accent uit de foto zelf: de lipstick in de hero meet #d92756 (frambooskleur,
     4,80:1 op wit, dus ook goed voor tekst). Bewust uit het beeld gehaald en
     niet verzonnen, en spaarzaam gebruikt: alleen waar iets gebeurt of iets
     structureert. De producten leveren de rest van de kleur. */
  --lyza-accent: #d92756;
  --lyza-display: 'Jost', ui-sans-serif, system-ui, sans-serif;
  --lyza-text: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------- typografie */
body,
button, input, select, textarea {
  font-family: var(--lyza-text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--lyza-body);
}

h1, h2, h3, h4, h5, h6,
.site-title, .widget-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--lyza-display);
  font-weight: 300;
  color: var(--lyza-ink);
  letter-spacing: .02em;
}

/* Regellengte in lopende tekst; langer dan dit leest slecht. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 68ch; }

.entry-content a:not(.button) {
  color: var(--lyza-ink);
  text-decoration: underline;
  text-decoration-color: var(--lyza-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.entry-content a:not(.button):hover { color: var(--lyza-accent); }

/* --------------------------------------------------------------------- ruimte */
.col-full { max-width: 1180px; }

/* ------------------------------------------------- de ene nadruk: sectiekoppen
   Kleinletter, dun, ruim gespatieerd -- het beeldmerk nagetekend in tekst. Met
   een haarlijn eronder, die zegt "hier begint een nieuw blok". Bewust NIET op
   producttitels: die houden hun eigen spelling ("Snippers - Rum"). */
.storefront-product-section h2.section-title,
.storefront-product-section > h2,
.woocommerce-products-header__title.page-title,
.woocommerce-products-header__title,
.page-template-template-homepage .entry-title {
  position: relative;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 300;
  letter-spacing: .07em;
  text-transform: lowercase;
  text-align: left;
  color: var(--lyza-ink);
  border-bottom: 1px solid var(--lyza-rule);
  padding-bottom: .5em;
  margin-bottom: 1.5em;
}

/* Kort accentsegment op de haarlijn: markeert waar een blok begint. */
.storefront-product-section h2.section-title::after,
.woocommerce-products-header__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3.25rem;
  height: 2px;
  background-color: var(--lyza-accent);
}

/* --------------------------------------------------------------------- header */
/* De header was 314px hoog en de inhoud begon pas op 450px -- bijna de helft
   van het eerste scherm. Het logo is een bestand van 1240x862 dat op 230x160
   werd getoond; hieronder gaat het naar een hoogte die past bij de rest, en de
   navigatiebalk krijgt minder padding. */
.site-header {
  border-bottom: 1px solid var(--lyza-rule);
  padding-top: 1.75rem;
  padding-bottom: 0;
}
.site-header .custom-logo-link img,
.site-header .custom-logo {
  height: auto;
  max-height: 112px;
  width: auto;
}
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  padding-top: 1.15em;
  padding-bottom: 1.15em;
}
.site-header-cart { padding-top: .6em; }

@media (max-width: 767px) {
  .site-header { padding-top: 1.1rem; }
  .site-header .custom-logo-link img,
  .site-header .custom-logo { max-height: 88px; }
}
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-family: var(--lyza-display);
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--lyza-ink);
}
.site-header .site-search .widget_product_search input[type="text"],
.site-header .site-search input[type="search"] {
  border: 1px solid var(--lyza-rule);
  border-radius: 0;
  background: var(--lyza-paper);
}

/* ---------------------------------------------------------------- productgrid */
/* Het grootste verschil: de foto's kregen geen enkele grond en verschilden
   sterk in formaat. Een vast vierkant veld in --wash zet ze op één lijn. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  background-color: var(--lyza-wash);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 1.25rem;
  box-sizing: border-box;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.02rem;
  line-height: 1.35;
  margin: .9rem 0 .2rem;
  padding: 0;
}
.woocommerce ul.products li.product .price {
  font-family: var(--lyza-text);
  font-size: .95rem;
  color: var(--lyza-ink);
  margin-bottom: .75rem;
}
.woocommerce ul.products li.product .price del { color: var(--lyza-body); }

/* Sorteerbalk als haarlijn-strook in plaats van los zwevende elementen. */
.storefront-sorting {
  border-top: 1px solid var(--lyza-rule);
  border-bottom: 1px solid var(--lyza-rule);
  padding: .7rem 0;
  margin-bottom: 2.25rem;
}
.woocommerce-result-count { font-size: .9rem; color: var(--lyza-body); }

/* Aanbieding-label: plat en vierkant, in dezelfde taal als de rest. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--lyza-accent);
  color: var(--lyza-paper);
  border-radius: 0;
  font-family: var(--lyza-display);
  font-weight: 400;
  letter-spacing: .04em;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: .45em .7em;
}

/* -------------------------------------------------------------------- knoppen */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt,
a.button, button.button, input[type="submit"] {
  background-color: var(--lyza-ink);
  color: var(--lyza-paper);
  border: 0;
  border-radius: 0;
  font-family: var(--lyza-display);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: .85em 1.5em;
  text-shadow: none;
  transition: background-color .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
a.button:hover, button.button:hover, input[type="submit"]:hover {
  background-color: #333;
  color: var(--lyza-paper);
}

/* In het grid staan al snel twaalf knoppen naast elkaar. Massief zwart maakt ze
   luider dan de producten zelf, dus daar alleen een lijn; massief blijft voor de
   echte acties (in de winkelwagen op de productpagina, afrekenen). */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button.alt {
  background-color: transparent;
  color: var(--lyza-ink);
  box-shadow: inset 0 0 0 1px var(--lyza-ink);
  padding: .7em 1.2em;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button.alt:hover {
  background-color: var(--lyza-accent);
  color: var(--lyza-paper);
  box-shadow: inset 0 0 0 1px var(--lyza-accent);
}

/* Producttitel volgt de knop bij hover, zodat de hele tegel als één ding voelt. */
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
  color: var(--lyza-accent);
}

/* Sorteerkeuze meebewegen met de rest in plaats van de browserstandaard. */
.woocommerce .woocommerce-ordering select,
.storefront-sorting select {
  border: 1px solid var(--lyza-rule);
  border-radius: 0;
  background-color: var(--lyza-paper);
  color: var(--lyza-body);
  font-family: var(--lyza-text);
  font-size: .9rem;
  padding: .45em 2em .45em .6em;
}

/* De belangrijkste actie in accent. Zo loopt de reeks van stil naar luid:
   lijn in het grid, zwart voor gewone knoppen, accent voor "in winkelwagen" en
   afrekenen. */
.woocommerce div.product form.cart .button,
.woocommerce .single_add_to_cart_button,
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.button.alt,
.woocommerce #place_order {
  background-color: var(--lyza-accent);
  box-shadow: none;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.button.alt:hover,
.woocommerce #place_order:hover {
  background-color: #b01f40;
  color: var(--lyza-paper);
}

/* Zichtbare toetsenbordfocus; Storefront laat dit grotendeels aan de browser. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .button:focus-visible {
  outline: 2px solid var(--lyza-accent);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------- voorpagina
   Storefront zet de uitgelichte afbeelding als achtergrond van het paginablok.
   Die foto is 1695x952 met het model gecentreerd op een warm gebroken wit
   (#fdfaf7, gemeten in de hoeken van het bestand). De blokkleur is diezelfde
   tint, zodat de randen van de foto in de pagina overlopen.

   De tekst stond eerst zwart over het bloemenpatroon van het shirt, op zijn
   plek gehouden door elf lege alinea's met rijen <br>. Die opvulling wordt
   hieronder geneutraliseerd; de pagina-inhoud zelf blijft ongemoeid.

   LET OP bij het aanpassen: eerst alle basisregels, daarna de media queries.
   Bij gelijke specificiteit wint de laatste regel, dus een media query die
   hierboven zou staan wordt overschreven door de basisregels eronder. */

.home.page-template-template-homepage .type-page.has-post-thumbnail {
  /* Eén hoogte voor zowel de foto als de ruimte die ervoor wordt vrijgehouden.
     Met 'cover' ging dat mis: dat vult het hele blok, dus ook het stuk waar de
     tekst staat, en dan loopt de foto achter de tekst door. */
  --lyza-hero-h: min(52vh, 340px);
  background-color: #fdfaf7;
  background-repeat: no-repeat;
  background-size: auto var(--lyza-hero-h);
  background-position: 50% 0;
  padding: var(--lyza-hero-h) 0 0;
  min-height: 0;
  display: block;
}

/* Alleen de verticale ruimte aanpassen. Een 'width: 100%' hier zorgde voor
   overloop: Storefront geeft .col-full horizontale padding, en die werd erbij
   opgeteld in plaats van erin. Een blok-element vult zijn ouder toch al. */
.home.page-template-template-homepage .type-page.has-post-thumbnail > .col-full {
  padding-top: clamp(1.5rem, 4vw, 2.75rem);
  padding-bottom: clamp(1.5rem, 5vw, 3.25rem);
  /* De auto-marges eruit en flex-grow erop: als flex-item kromp dit blok naar
     zijn inhoud en schoof 'margin: 0 auto' het naar het midden, waardoor de
     tekst 180px naar binnen lag. De zijpadding van Storefront blijft staan --
     die lijnt de tekst uit met het logo en de sectiekoppen. */
  margin-left: 0;
  margin-right: 0;
  flex-grow: 1;
}

.home.page-template-template-homepage .entry-content > p { margin: 0; }
.home.page-template-template-homepage .entry-content br { display: none; }

.home.page-template-template-homepage .type-page.has-post-thumbnail .entry-content {
  max-width: 44rem;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--lyza-ink);
  /* Storefront centreert de inhoud van dit template; links sluit aan bij de koppen. */
  text-align: left;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.6;
}
.home.page-template-template-homepage .type-page.has-post-thumbnail .entry-content a {
  color: var(--lyza-ink);
}

/* Kop van de voorpagina: de display-letter op formaat, met korte regelafstand
   en een maximum in tekens zodat hij netjes over twee regels valt. Bewust
   minder spatiëring dan de sectiekoppen -- op deze grootte wordt ruime
   spatiëring slap in plaats van luchtig. */
.home.page-template-template-homepage .type-page.has-post-thumbnail .entry-content h1 {
  font-family: var(--lyza-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: .01em;
  max-width: 22ch;
  margin: 0 0 .5em;
  color: var(--lyza-ink);
}

.home.page-template-template-homepage .type-page.has-post-thumbnail .entry-content > p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  max-width: 42ch;
  color: var(--lyza-body);
  margin: 0 0 1.75em;
}

/* De twee wegen die een bezoeker heeft: boeken of winkelen. Eén gevuld in het
   accent, één met alleen een lijn -- dezelfde reeks als in de rest van de shop. */
.home.page-template-template-homepage .entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0;
}
.home.page-template-template-homepage .entry-content .wp-block-button__link {
  background-color: var(--lyza-accent);
  color: var(--lyza-paper);
  border: 0;
  border-radius: 0;
  font-family: var(--lyza-display);
  font-weight: 400;
  font-size: .98rem;
  letter-spacing: .04em;
  padding: .85em 1.6em;
  transition: background-color .15s ease;
}
.home.page-template-template-homepage .entry-content .wp-block-button__link:hover {
  background-color: #b01f40;
  color: var(--lyza-paper);
}
.home.page-template-template-homepage .entry-content .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--lyza-ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--lyza-ink);
}
.home.page-template-template-homepage .entry-content .is-style-outline .wp-block-button__link:hover {
  background-color: var(--lyza-ink);
  color: var(--lyza-paper);
  box-shadow: inset 0 0 0 1px var(--lyza-ink);
}

/* Middenmaat: de foto compleet in beeld, tekst eronder. */
@media (min-width: 768px) {
  .home.page-template-template-homepage .type-page.has-post-thumbnail {
    background-size: contain;
    background-position: 50% 0;
    /* 952 / 1695 = 56.17%: exact de verhouding van de foto, dus geen uitsnede. */
    padding-top: 56.17%;
  }
}

/* Breed: naast elkaar. Ze kijkt naar links en beneden, dus de tekst staat in de
   richting waar ze naar kijkt en de lege ruimte in de foto wordt gebruikt.
   42% + 55% = 97%, dus de twee kolommen raken elkaar niet. */
@media (min-width: 992px) {
  .home.page-template-template-homepage .type-page.has-post-thumbnail {
    /* Het model beslaat 27%-74% van de fotobreedte; de rest is lege studio-wit.
       Met 70% grootte en 161% positie valt die lege rechtermarge buiten het
       blok, zodat het model tegen de rechterkant staat in plaats van met een
       gat ernaast. De formule: p = (1 - 0.74s) / (1 - s). */
    background-size: 70% auto;
    background-position: 161% 50%;
    padding: 0;
    min-height: min(74vh, 600px);
    display: flex;
    align-items: center;
  }
  .home.page-template-template-homepage .type-page.has-post-thumbnail .entry-content {
    max-width: 30rem;
    /* Niet tegen de rand geplakt: een inzet leest als een kolom in plaats van
       als tekst die is blijven hangen. */
    padding-left: clamp(0rem, 3vw, 3rem);
  }
}

/* Wat meer lucht tussen de blokken op de voorpagina. */
.storefront-product-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Categorie-tegels krijgen hetzelfde veld als de producten. */
.woocommerce ul.products li.product-category a img,
.woocommerce-page ul.products li.product-category a img {
  background-color: var(--lyza-wash);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 1.25rem;
  box-sizing: border-box;
  margin-bottom: 0;
}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: .03em;
  margin: .9rem 0 0;
  padding: 0;
}
.woocommerce ul.products li.product-category h2 .count {
  background: none;
  color: var(--lyza-body);
  font-size: .85em;
  padding: 0 0 0 .35em;
}

/* Aantal artikelen in de kop: het enige getal dat verandert, dus in accent. */
.site-header-cart .count,
.storefront-handheld-footer-bar .count {
  color: var(--lyza-accent);
}

/* ------------------------------------------------------------------ zijbalk/voet */
.widget-area .widget { border-top: 1px solid var(--lyza-rule); padding-top: 1.5rem; }
.widget-area .widget:first-child { border-top: 0; padding-top: 0; }
.widget-area .widget-title { font-size: 1.05rem; letter-spacing: .05em; text-transform: lowercase; }

.site-footer {
  /* Zelfde frambooskleur als het accent, maar zo licht dat het als warmte
     leest en niet als vlak. */
  background-color: #fdf5f7;
  border-top: 1px solid var(--lyza-rule);
  color: var(--lyza-body);
}
.site-footer a { color: var(--lyza-ink); }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer .widget-title { color: var(--lyza-ink); }

/* De voet was 790px hoog voor twee kolommen met samen een menu van drie items
   en een adres. Storefront zet daar marges van 63px tussen en 63px onderaan.
   Hieronder een strakker ritme, en de kolommen als grid zodat ze meebewegen met
   het aantal widgets in plaats van vast op 48% te staan.

   LET OP: Storefront geeft .footer-widgets de clearfix-klasse 'fix', en die
   ::before/::after worden in een grid zelf rasteritems -- vandaar dat ze hier
   uitgezet worden. */
.site-footer {
  padding-top: 2.75rem;
  padding-bottom: 2.5rem;
}
.site-footer .footer-widgets {
  display: grid;
  /* max-content in plaats van 1fr: de kolommen worden zo breed als hun inhoud
     en niet uitgerekt tot de halve pagina met een gat erachter. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, max-content));
  justify-content: space-between;
  gap: 1.75rem 3rem;
  margin-bottom: 0;
}
.site-footer .footer-widgets::before,
.site-footer .footer-widgets::after { display: none; }
/* Storefront hangt hier ook nog padding onder. */
.site-footer .footer-widgets { padding: 0; }
.site-footer .footer-widgets .block {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
.site-footer .widget { margin-bottom: 1.5rem; }
.site-footer .widget:last-child { margin-bottom: 0; }

.site-footer .widget-title {
  display: block;
  font-family: var(--lyza-display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: lowercase;
  /* Storefront zet hier padding-bottom: 1em op, waardoor een titel van één
     regel 53px kostte. */
  padding-bottom: 0;
  margin-bottom: .6rem;
}

/* Het adres stond regel voor regel in <strong>, dus alles woog even zwaar en
   het las als een blok. Normaal gewicht maakt er weer een adres van; de
   widgetkop draagt de nadruk. */
.site-footer .textwidget strong { font-weight: 400; }
.site-footer .textwidget p { margin-bottom: .7rem; line-height: 1.5; }
.site-footer .textwidget p:last-child { margin-bottom: 0; }
.site-footer ul { margin-bottom: 0; }
.site-footer ul li { margin-bottom: .35rem; }
.site-footer ul li:last-child { margin-bottom: 0; }

/* De salon werkt op afspraak op vaste dagen, zonder tijden. Eerst stond hier
   een twee-koloms dag/tijd-lijst, gebaseerd op de dump van 2021 -- maar de
   live site heeft geen tijden. Dus: een eenvoudige dagenlijst zonder bolletjes,
   plus de definitielijst-variant voor het geval er ooit wel tijden bijkomen. */
.lyza-uren-kop {
  font-family: var(--lyza-display);
  letter-spacing: .04em;
  color: var(--lyza-ink);
  margin: 1.1rem 0 .4rem;
}
.site-footer .lyza-dagen,
.widget-area .lyza-dagen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .lyza-dagen li,
.widget-area .lyza-dagen li {
  margin-bottom: .2rem;
  line-height: 1.5;
}
.lyza-uren {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 1.5rem;
  row-gap: .2rem;
  margin: 0;
}
.lyza-uren dt,
.lyza-uren dd {
  margin: 0;
  line-height: 1.5;
}
.lyza-uren dd {
  margin: 0;
  line-height: 1.5;
}
.lyza-uren dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--lyza-body);
}

/* De regel met copyright en 'Built with WooCommerce' hoort niet even zwaar te
   wegen als de inhoud erboven. */
.site-footer .site-info {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lyza-rule);
  font-size: .85rem;
  color: var(--lyza-body);
}

/* --------------------------------------------------------------------- mobiel */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .woocommerce ul.products li.product a img { padding: .75rem; }
  /* Tikdoelen groot genoeg om met een duim te raken. */
  .woocommerce a.button, .woocommerce button.button, a.button, button.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .storefront-product-section h2.section-title,
  .woocommerce-products-header__title { letter-spacing: .05em; }
}

/* Geen bewegingen toegevoegd; deze regel dekt wat Storefront zelf meebrengt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}