/* =============================================================================
Varied Cozy Shop – Universal Theme Styles (SmartersWEB Tech, v1.4.0, 2025-11-23)
============================================================================= */
/* ========================= UNIVERSAL DESIGN TOKENS ========================= */
/* =========================================================================== */

/* ========================= CSS RESET & BASE ================================ */
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
body {
  background: var(--color-warm-white);
  color: var(--color-dark-green);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  overflow-x: hidden;
}
a {
  color: var(--color-orange-accent);
  transition: color 0.2s, text-decoration 0.2s;
  text-decoration: none;
}
a:hover, a:focus { color: var(--color-deep-green); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--color-orange-accent); outline-offset: 2px; }
/* =========================================================================== */

/* ========================= TYPOGRAPHY SYSTEM =============================== */
h1, h2, h3, h4, h5, h6,
.section-title, .elementor-heading-title, .woocommerce .product-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-orange-accent);
  line-height: 1.25;
}
h1 { font-size: 2.6rem; letter-spacing: -0.02em; }
h2 { font-size: 2.1rem; letter-spacing: -0.015em; }
h3 { font-size: 1.5rem; letter-spacing: -0.01em; }
h4 { font-size: 1.2rem; }
.section-title { margin-bottom: 1.2em; }
p, li, input, select, textarea, .woocommerce, .elementor, .wp-block, .vcs-best-sellers .vcs-product {
  font-family: var(--font-body);
  color: var(--color-dark-green);
  font-size: 1rem;
}

/* ========================= LAYOUT & UTILITY CLASSES ========================= */
.u-bg-accent     { background: var(--color-orange-accent) !important; color: #fff !important; }
.u-bg-success    { background: var(--color-green-accent) !important; color: #fff !important; }
.u-bg-cream      { background: var(--color-warm-white) !important; }
.u-bg-newsletter { background: var(--color-newsletter-bg) !important; }
.u-txt-accent    { color: var(--color-orange-accent) !important; }
.u-txt-success   { color: var(--color-green-accent) !important; }
.u-txt-dark      { color: var(--color-dark-green) !important; }
.u-txt-serif     { font-family: var(--font-heading) !important; }
.u-shadow-sm     { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md     { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg     { box-shadow: var(--shadow-lg) !important; }
.u-radius-sm     { border-radius: var(--radius-sm) !important; }
.u-radius-md     { border-radius: var(--radius-md) !important; }
.u-radius-lg     { border-radius: var(--radius-lg) !important; }
.u-radius-xl     { border-radius: var(--radius-xl) !important; }
.u-py-section    { padding: var(--space-xl) 0 var(--space-lg); }
.u-nowrap        { white-space: nowrap; }
.u-flex-center   { display: flex; align-items: center; justify-content: center; }
/* =========================================================================== */

/* ========================= UNIVERSAL BUTTON SYSTEM ========================= */
.u-btn, button, .button, input[type=submit], input[type=button], input[type=reset],
.woocommerce button, .woocommerce input[type=submit], .elementor-button, .elementor-button-link, .wp-block-button__link, .yith-wcwl-add-to-wishlist {
  background: var(--color-orange-accent);
  color: #fff !important;
  font-family: var(--font-body);
  padding: 0.8em 1.9em;
  border-radius: var(--radius-xl);
  border: none;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  display: inline-block;
}
.u-btn:hover, button:hover, .button:hover, input[type=submit]:hover, input[type=button]:hover, .woocommerce button:hover, 
.woocommerce input[type=submit]:hover, .elementor-button:hover, .elementor-button-link:hover, .wp-block-button__link:hover {
  background: var(--color-deep-green);
  color: #fff !important; transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.button-secondary, .wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--color-peach-accent);
  color: var(--color-dark-green) !important;
  border: 2px solid var(--color-orange-accent);
}
.button-secondary:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-orange-accent); color: #fff !important;
}
/* =========================================================================== */

/* ========================= FORM + INPUTS UNIVERSAL ========================= */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), textarea, select {
  border: 2px solid rgba(28,64,46,0.2);
  border-radius: var(--radius-md);
  padding: 0.9em 1.2em;
  background: #fff;
  color: var(--color-dark-green);
  font-family: var(--font-body);
  font-size: 1em;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-orange-accent); box-shadow: 0 0 0 3px rgba(245,91,22,0.1); outline: none;
}
input::placeholder, textarea::placeholder { color: rgba(28,64,46,0.5); opacity: 0.8; }
/* =========================================================================== */

/* ========================= SECTION & BLOCK STYLE =========================== */
.section { padding: var(--space-xl) 0 var(--space-lg); }
.section-title { font-size: 2.2rem; font-family: var(--font-heading); letter-spacing: -0.01em; color: var(--color-dark-green); margin-bottom: 1.1em; }
.magazine-collage { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2em; }
/* =========================================================================== */

/* ===================== WOOCOMMERCE & SHOP COMPONENTS ======================= */
.woocommerce, .yith-wcwl-add-to-wishlist, .yith_wcwl_wishlistaddedbrowse, .yith_wcwl_wishlistexistsbrowse {
  font-family: var(--font-body);
}
.woocommerce .product-title, .woocommerce .woocommerce-loop-product__title {
  color: var(--color-dark-green);
  font-family: var(--font-heading);
}
.woocommerce .price, .woocommerce ul.products li.product .price {
  color: var(--color-orange-accent); font-weight:700;
}
.woocommerce .star-rating span { color: var(--color-green-accent);}
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-notice, .woocommerce .notice {
  background: var(--color-newsletter-bg);
  color: var(--color-dark-green);
  border-left: 5px solid var(--color-orange-accent);
  border-radius: var(--radius-md);
  padding: 1.2em 1.8em;
  font-size: 1.08em;
  margin: 1.2em 0;
  font-family: var(--font-body);
}
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:2em; margin-bottom:2em; list-style:none; padding:0;
}
.woocommerce ul.products li.product {
  background:#fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border:1.5px solid rgba(28,64,46,0.1);
  display:flex; flex-direction:column; transition:box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-lg); border-color:var(--color-peach-accent); transform:translateY(-4px);
}
.woocommerce ul.products li.product .ajax_add_to_cart,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button
{
  background:var(--color-green-accent);
  color:#fff !important;
  border-radius: var(--radius-xl);
  font-size:1.1em;
  font-weight:700;
  transition: background 0.2s;
  margin:1em auto;
}
.woocommerce ul.products li.product .ajax_add_to_cart:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--color-deep-green);
}
.woocommerce div.product { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding:2.2em 2em; margin-bottom:2em; }
/* ===================== YITH PLUGINS ============================ */
.yith-wcwl-add-to-wishlist,
.yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-wishlistexistsbrowse {
  background: var(--color-warm-yellow) !important;
  color: var(--color-dark-green) !important;
  font-family: var(--font-heading);
  border-radius: var(--radius-md);
  margin: 0.5em 0.8em!important;
  padding: .7em 1.3em !important;
}
.yith-wcwl-add-to-wishlist:hover {
  background: var(--color-peach-accent) !important; color: var(--color-dark-green) !important;
}
.ywgc_gift_card_container {
  background: var(--color-newsletter-bg);
  border: 2px solid var(--color-green-accent);
  border-radius: var(--radius-lg);
  padding: 2em;
  font-family: var(--font-body);
}
/* ====================== SCROLLBAR, PRINT, RESPONSIVE ===================== */
::-webkit-scrollbar        { width:12px; height:12px; }
::-webkit-scrollbar-track  { background:var(--color-newsletter-bg);}
::-webkit-scrollbar-thumb  { background:var(--color-green-accent); border-radius:var(--radius-lg);}
::-webkit-scrollbar-thumb:hover { background:var(--color-orange-accent);}
.u-scrollbar               { scrollbar-width: thin; scrollbar-color: var(--color-green-accent) var(--color-newsletter-bg); }

@media (max-width: 900px) { .section { padding: var(--space-lg) 0; } }
@media (max-width: 600px) { .section-title { font-size: 1.6rem; } }
/* Print mode: hide UI clutter */
/* =========================================================================== */