/*
Theme Name:   Cielo Store
Theme URI:    https://www.cielo.co.za/
Description:  A Storefront child theme styled after cielo.co.za — light grey canvas, white rounded cards, uppercase navigation and red accents. Requires the free Storefront theme.
Author:       Cielo Style Store
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  cielo-store
*/

/* ============================================================
   CIELO-STYLE CUSTOMISATIONS (Storefront child theme)
   Palette: canvas #ECECEC · cards #FFFFFF · ink #1D1D1F
            muted #6E6E73 · accent red #C8102E
   ============================================================ */

:root {
  --cielo-canvas: #ececec;
  --cielo-card:   #ffffff;
  --cielo-ink:    #1d1d1f;
  --cielo-muted:  #6e6e73;
  --cielo-accent: #c8102e;
  --cielo-radius: 18px;
}

body {
  background-color: var(--cielo-canvas);
  color: var(--cielo-ink);
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--cielo-ink);
}

/* ---------- Header ---------- */
.site-header {
  background-color: var(--cielo-card);
  border-bottom: 1px solid #e2e2e2;
  padding-top: 20px;
  padding-bottom: 20px;
}
.site-branding .site-title a,
.site-logo-anchor .site-logo-link {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cielo-ink) !important;
}

/* Main navigation — uppercase, letter-spaced like Cielo */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  font-weight: 500;
  color: var(--cielo-muted);
  padding: 12px 18px;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a {
  color: var(--cielo-accent);
}
.main-navigation {
  background-color: var(--cielo-card) !important;
}
.handheld-navigation,
.main-navigation.toggled .handheld-navigation {
  background-color: var(--cielo-card);
}

/* ---------- Buttons — rounded pill style ---------- */
.button,
button,
input[type="submit"],
a.button,
.added_to_cart,
.checkout-button,
#place_order {
  border-radius: 999px !important;
  background-color: var(--cielo-ink) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 14px 30px;
  transition: background-color .2s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
a.button:hover, .checkout-button:hover, #place_order:hover {
  background-color: var(--cielo-accent) !important;
  color: #fff !important;
}

/* ---------- Product cards — white, rounded, Cielo style ---------- */
ul.products li.product,
.wc-block-grid__product {
  background: var(--cielo-card);
  border-radius: var(--cielo-radius);
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
ul.products li.product img {
  border-radius: calc(var(--cielo-radius) - 8px);
  margin-bottom: 14px;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 500;
}
ul.products li.product .price {
  color: var(--cielo-ink);
  font-weight: 600;
}
ul.products li.product .button {
  padding: 10px 22px;
  font-size: 13px;
}

/* Sale badge in Cielo red */
.onsale {
  background-color: var(--cielo-accent) !important;
  border-radius: 999px;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Single product page ---------- */
.single-product div.product {
  background: var(--cielo-card);
  border-radius: var(--cielo-radius);
  padding: 30px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.single-product div.product .price {
  color: var(--cielo-ink);
  font-weight: 700;
}

/* ---------- Storefront notices & breadcrumbs ---------- */
.woocommerce-breadcrumb {
  color: var(--cielo-muted);
  font-size: 13px;
}
.woocommerce-breadcrumb a { color: var(--cielo-accent); }

/* ---------- Cart & checkout panels ---------- */
.cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #payment {
  background: var(--cielo-card);
  border-radius: var(--cielo-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.woocommerce-checkout #payment { border: none; }

/* ---------- Widgets & footer ---------- */
.widget-area .widget {
  background: var(--cielo-card);
  border-radius: var(--cielo-radius);
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.site-footer {
  background-color: #111113;
  color: #a1a1a6;
  padding: 40px 0;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--cielo-accent); }
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
}

/* ---------- Storefront hand-held (mobile) menu ---------- */
button.menu-toggle,
button.menu-toggle:hover {
  border-radius: 999px;
  background-color: var(--cielo-ink);
  color: #fff;
}

/* ---------- Rounded hero / page intro blocks ---------- */
.home .site-main .page-header,
.home .storefront-product-section,
.page .entry-header {
  border-radius: var(--cielo-radius);
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
  border-radius: 12px !important;
  border: 1px solid #d6d6d6 !important;
  background-color: #fff;
  padding: 12px 16px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cielo-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}

/* ---------- Pagination ---------- */
.woocommerce-pagination ul.page-numbers li .page-numbers {
  border-radius: 999px;
}
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background: var(--cielo-ink);
  color: #fff;
}