/*
Theme Name: YERMEENI — E-Mobility Store
Theme URI: https://www.yermeeni.com
Description: Child theme for Storefront, purpose-built for an electric-bike & spare-parts shop aimed at delivery riders in Italy and across the EU. Charcoal + electric-green identity, rider-focused homepage, fast-reorder spare-parts layout. Built on the official WooCommerce Storefront theme.
Author: YERMEENI
Template: storefront
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: yermeeni
*/

/* ============================================================
   YERMEENI — design tokens
   ⚙️  CHANGE BRAND COLORS HERE
   ============================================================ */
:root{
  --rv-ink:        #0d1320;   /* near-black charcoal */
  --rv-ink-2:      #131c2e;   /* raised charcoal     */
  --rv-ink-3:      #1c2740;   /* cards / borders     */
  --rv-line:       rgba(255,255,255,.10);
  --rv-paper:      #f5f7fa;   /* light section bg    */
  --rv-white:      #ffffff;
  --rv-volt:       #25e06b;   /* electric green accent */
  --rv-volt-deep:  #14b557;
  --rv-volt-soft:  rgba(37,224,107,.14);
  --rv-text:       #e8edf5;   /* light text on dark  */
  --rv-text-dim:   #9fb0c6;
  --rv-text-dark:  #16202f;   /* dark text on light  */
  --rv-radius:     16px;
  --rv-radius-sm:  10px;
  --rv-shadow:     0 24px 60px -22px rgba(5,12,24,.55);
  --rv-font-head:  'Archivo', system-ui, sans-serif;
  --rv-font-body:  'Manrope', system-ui, sans-serif;
}

/* ---------- global typography over Storefront ---------- */
body,
button, input, select, textarea,
.site-title, p, li, .price{
  font-family: var(--rv-font-body);
}
h1,h2,h3,h4,h5,h6,
.site-title, .storefront-product-section-title,
.rv-h{
  font-family: var(--rv-font-head);
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* ---------- WooCommerce buttons → brand ---------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
button.single_add_to_cart_button,
.rv-btn{
  background: var(--rv-volt);
  color: #06210f !important;
  font-family: var(--rv-font-head);
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: 999px;
  border: 0;
  padding: .82em 1.6em;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  text-shadow: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.rv-btn:hover{
  background: var(--rv-volt-deep);
  color: #06210f !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(20,181,87,.7);
}

/* secondary / ghost button */
.rv-btn--ghost{
  background: transparent;
  color: var(--rv-white) !important;
  border: 1.5px solid var(--rv-line);
}
.rv-btn--ghost:hover{
  background: rgba(255,255,255,.06);
  color: var(--rv-white) !important;
  border-color: var(--rv-volt);
  box-shadow: none;
}

/* sale price highlight */
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins{ color: var(--rv-volt-deep); font-weight: 800; }

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */
.rv-section{ padding: clamp(56px,8vw,104px) 0; }
.rv-wrap{ width: min(1180px, 92vw); margin-inline: auto; }
.rv-eyebrow{
  font-family: var(--rv-font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rv-volt);
  margin: 0 0 .6rem;
}
.rv-section-title{
  font-family: var(--rv-font-head);
  font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.04;
  margin: 0 0 .4rem;
}
.rv-lede{ color: var(--rv-text-dim); font-size: 1.06rem; max-width: 56ch; }

/* ---------- HERO ---------- */
.rv-hero{
  position: relative;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(37,224,107,.20), transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(37,224,107,.08), transparent 50%),
    linear-gradient(160deg, var(--rv-ink) 0%, var(--rv-ink-2) 100%);
  color: var(--rv-text);
  overflow: hidden;
  border-bottom: 1px solid var(--rv-line);
}
.rv-hero::after{ /* subtle grid texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--rv-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rv-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%);
          mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%);
}
.rv-hero-inner{
  position: relative; z-index: 2;
  width: min(1180px, 92vw); margin-inline: auto;
  padding: clamp(64px,10vw,128px) 0 clamp(48px,7vw,88px);
}
.rv-hero h1{
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: .98;
  font-weight: 900;
  margin: .2em 0 .35em;
  max-width: 16ch;
}
.rv-hero h1 .rv-mark{ color: var(--rv-volt); }
.rv-hero p.rv-sub{ color: var(--rv-text-dim); font-size: 1.18rem; max-width: 52ch; margin: 0 0 2rem; }
.rv-cta-row{ display:flex; gap: .9rem; flex-wrap: wrap; }

/* hero trust strip */
.rv-trust{
  display:flex; flex-wrap:wrap; gap: 1.4rem 2.2rem;
  margin-top: clamp(36px,5vw,60px);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rv-line);
}
.rv-trust span{
  display:inline-flex; align-items:center; gap:.55rem;
  color: var(--rv-text); font-weight: 600; font-size: .98rem;
}
.rv-trust span svg{ width:20px; height:20px; flex:none; color: var(--rv-volt); }

/* ---------- CATEGORY GRID ---------- */
.rv-cats{ background: var(--rv-paper); color: var(--rv-text-dark); }
.rv-cat-grid{
  display:grid; gap: 1.1rem;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2.4rem;
}
.rv-cat{
  position:relative; display:block;
  background: var(--rv-white);
  border: 1px solid #e6ebf2;
  border-radius: var(--rv-radius);
  padding: 1.6rem 1.4rem 1.4rem;
  text-decoration:none; color: var(--rv-text-dark);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.rv-cat::before{
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background: var(--rv-volt); transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.rv-cat:hover{ transform: translateY(-4px); box-shadow: var(--rv-shadow); border-color: transparent; }
.rv-cat:hover::before{ transform: scaleX(1); }
.rv-cat-ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background: var(--rv-volt-soft); color: var(--rv-volt-deep); margin-bottom:1rem;
}
.rv-cat-ico svg{ width:24px; height:24px; }
.rv-cat h3{ margin:0 0 .25rem; font-size:1.18rem; font-weight:800; }
.rv-cat p{ margin:0; color:#6c7a8c; font-size:.92rem; }
.rv-cat-go{ margin-top:.9rem; font-family:var(--rv-font-head); font-weight:700; color: var(--rv-volt-deep); font-size:.9rem; }

/* ---------- VALUE PROPS ---------- */
.rv-why{ background: var(--rv-ink); color: var(--rv-text); }
.rv-why-grid{
  display:grid; gap: 1.4rem 2rem;
  grid-template-columns: repeat(4,1fr);
  margin-top: 2.6rem;
}
.rv-why-card{ }
.rv-why-card .rv-num{
  font-family: var(--rv-font-head); font-weight:900; font-size:1.1rem;
  color: var(--rv-volt); display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.7rem;
}
.rv-why-card .rv-num svg{ width:26px; height:26px; }
.rv-why-card h3{ font-size:1.12rem; margin:0 0 .35rem; font-weight:800; }
.rv-why-card p{ color: var(--rv-text-dim); margin:0; font-size:.96rem; line-height:1.55; }

/* ---------- PRODUCTS SHELF ---------- */
.rv-shelf{ background: var(--rv-paper); color: var(--rv-text-dark); }
.rv-shelf .woocommerce ul.products li.product .price{ color: var(--rv-text-dark); font-weight:800; }
.rv-shelf .woocommerce ul.products li.product h2,
.rv-shelf .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family: var(--rv-font-head); font-weight:700; }
.rv-shelf-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---------- SPARE-PARTS BAND ---------- */
.rv-parts{
  background:
    radial-gradient(100% 130% at 100% 0%, rgba(37,224,107,.16), transparent 55%),
    linear-gradient(135deg, var(--rv-ink-2), var(--rv-ink));
  color: var(--rv-text);
}
.rv-parts-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 2.4rem; align-items:center; }
.rv-parts h2{ font-size: clamp(1.7rem,3.6vw,2.5rem); margin:.3rem 0 .6rem; font-weight:900; }
.rv-parts p{ color: var(--rv-text-dim); margin:0 0 1.6rem; max-width:46ch; }
.rv-chiplist{ display:flex; flex-wrap:wrap; gap:.6rem; }
.rv-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(255,255,255,.05); border:1px solid var(--rv-line);
  border-radius:999px; padding:.55rem 1rem; font-weight:600; font-size:.92rem; color: var(--rv-text);
  text-decoration:none; transition: all .18s ease;
}
.rv-chip:hover{ border-color: var(--rv-volt); color:#fff; background: var(--rv-volt-soft); }
.rv-chip svg{ width:16px; height:16px; color: var(--rv-volt); }

/* ---------- FINAL CTA ---------- */
.rv-final{ background: var(--rv-volt); color:#06210f; text-align:center; }
.rv-final h2{ font-size: clamp(1.8rem,4.4vw,3rem); font-weight:900; margin:0 0 .5rem; }
.rv-final p{ font-size:1.1rem; margin:0 0 1.8rem; font-weight:600; opacity:.85; }
.rv-final .rv-btn{ background:#06210f; color: var(--rv-volt) !important; }
.rv-final .rv-btn:hover{ background:#0d1320; box-shadow:none; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .rv-cat-grid{ grid-template-columns: repeat(2,1fr); }
  .rv-why-grid{ grid-template-columns: repeat(2,1fr); }
  .rv-parts-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .rv-cat-grid{ grid-template-columns: 1fr; }
  .rv-why-grid{ grid-template-columns: 1fr; }
  .rv-cta-row .rv-btn{ width:100%; text-align:center; }
}