/*
Theme Name: Stylclo Child
Theme URI: https://stylclo.in
Description: Child theme for Stylclo based on Blocksy.
Author: Stylclo
Template: blocksy
Version: 1.0.0
Text Domain: stylclo-child
*/

/* =========================================================
   STYLCLO GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
  --stc-bg: #FAF6EF;
  --stc-surface: #FFFFFF;
  --stc-soft: #F3E7DA;
  --stc-text: #2B211C;
  --stc-muted: #6F625B;
  --stc-primary: #4A2F24;
  --stc-primary-hover: #2F1E18;
  --stc-accent: #C77B6A;
  --stc-accent-soft: #E9C9BF;
  --stc-border: #E5D8CD;
  --stc-success: #4F7A57;
  --stc-error: #B84A3A;
}

/* Base */
body {
  background: var(--stc-bg);
  color: var(--stc-text);
  font-size: 16px;
  line-height: 1.65;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--stc-text);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(34px, 5vw, 48px);
}

h2 {
  font-size: clamp(28px, 4vw, 36px);
}

h3 {
  font-size: clamp(22px, 3vw, 26px);
}

a {
  color: var(--stc-primary);
}

a:hover {
  color: var(--stc-accent);
}

/* Buttons */
button,
.button,
.wp-element-button,
input[type="submit"],
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--stc-primary);
  color: var(--stc-bg);
  border-radius: 999px;
  border: 1px solid var(--stc-primary);
  padding: 13px 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

button:hover,
.button:hover,
.wp-element-button:hover,
input[type="submit"]:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--stc-primary-hover);
  border-color: var(--stc-primary-hover);
  color: #FFFFFF;
}

/* Forms */
input,
textarea,
select,
.woocommerce input.input-text,
.woocommerce textarea {
  border: 1px solid var(--stc-border);
  border-radius: 10px;
  min-height: 46px;
  background: #FFFFFF;
  color: var(--stc-text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--stc-accent);
  outline: none;
}

/* WooCommerce product cards */
.woocommerce ul.products li.product {
  text-align: left;
}

.woocommerce ul.products li.product a img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  background: var(--stc-soft);
  margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--stc-text);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  padding: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--stc-primary);
  font-size: 15px;
  font-weight: 700;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--stc-accent);
  color: #FFFFFF;
  border-radius: 999px;
  min-height: auto;
  line-height: 1;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

/* Single product */
.single-product div.product .product_title {
  color: var(--stc-text);
}

.single-product div.product p.price,
.single-product div.product span.price {
  color: var(--stc-primary);
  font-weight: 700;
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--stc-accent);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--stc-accent);
}

/* Footer */
.site-footer,
footer {
  border-top: 1px solid var(--stc-border);
}

/* Mobile */
@media (max-width: 768px) {
  body {
    font-size: 15.5px;
  }

  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 48%;
    margin-right: 4%;
  }

  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
  .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
    margin-right: 0;
  }
}