/*
Theme Name: Yuva Woofy Clone
Theme URI: https://example.com/yuva-woofy-clone
Author: ChatGPT
Description: A lightweight WooCommerce child theme for the Storefront parent theme designed to emulate the playful look and feel of the Yuva Woofy Shopify preset.  It includes a pastel gradient hero section, pet‑inspired color palette and modern typography.
Version: 1.0.0
Template: storefront
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, responsive-layout, woo‑commerce, e-commerce, custom-colors, custom-logo

This stylesheet is loaded after the Storefront theme’s styles.  It defines custom
CSS variables to replicate the Yuva Woofy color palette and typography and
provides example styles for a hero banner and category grid.  You can add
additional rules here to further refine your design.
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap');

/* --------------------------------------------------------------------------
 * Theme Variables
 *
 * These variables mirror the colours found in the Yuva Woofy Shopify preset.
 * Feel free to tweak them to suit your brand.
 */
:root {
    /* Base palette */
    --body-background: #ffffff;
    --gray: #cfcbcb;
    --dark-gray: #747474;
    --green: #6cad61;
    --red: #ec7c7c;
    --theme-color: #2b2b2b;
    --theme-light-color: rgba(43, 43, 43, 0.1);
    --color-text-body: #000000;
    --color-light-text-body: rgba(0, 0, 0, 0.5);
    --cart-dot-color: #efb34c;
    --sale-badge-bg: #efb34c;
    --sold-badge-bg: #E22120;
    --preorder-badge-bg: #E22120;
    --custom-badge-bg: #0e0e0e;
    --secondary-color-body: #f5f5f5;
    --primary-border-color: #000000;
    --input-radius: 10px;
    --heading-color: #000000;
    --subheading-color: #181818;
    --gradient-color-body: linear-gradient(180deg, rgba(255,145,129,1), rgba(254,91,124,1) 49%, rgba(255,140,162,1) 100%);
}

/* --------------------------------------------------------------------------
 * Base styles
 *
 * Set up consistent typography and element colours across your site.
 */
body,
button,
input,
select,
textarea {
    font-family: 'DM Sans', sans-serif;
    color: var(--color-text-body);
    background-color: var(--body-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
    color: var(--heading-color);
    margin-top: 0;
}

a {
    color: var(--theme-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--red);
}

/* Navigation */
.site-header {
    background-color: var(--body-background);
    border-bottom: 1px solid var(--gray);
}

.site-header .main-navigation ul li a {
    padding: 1rem;
    color: var(--theme-color);
    font-weight: 600;
}

.site-header .main-navigation ul li a:hover {
    color: var(--red);
}

/* WooCommerce product grid */
.woocommerce ul.products li.product {
    border-radius: var(--input-radius);
    background-color: var(--body-background);
    border: 1px solid var(--gray);
    overflow: hidden;
}

.woocommerce ul.products li.product .onsale {
    background-color: var(--sale-badge-bg);
    color: #fff;
}

/* Buttons */
.button, .wp-block-button__link {
    background-color: var(--theme-color);
    color: #fff;
    border-radius: var(--input-radius);
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--theme-color);
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button:hover, .wp-block-button__link:hover {
    background-color: var(--red);
    border-color: var(--red);
}

/* Footer */
.site-footer {
    background: var(--theme-color);
    color: #ffffff;
    padding: 2rem 1rem;
}

.site-footer a {
    color: #ffffff;
}

.site-footer a:hover {
    color: var(--cart-dot-color);
}

/* --------------------------------------------------------------------------
 * Hero section and category grid
 *
 * These examples illustrate how to create the playful hero banner and category
 * icons section reminiscent of the Yuva Woofy preset.  Use them in your page
 * builder or templates by applying the corresponding classes to your elements.
 */
.hero-section {
    background: var(--gradient-color-body) url('assets/hero-bg.png') center/cover;
    color: #ffffff;
    padding: 4rem 2rem;
    text-align: center;
    border-radius: var(--input-radius);
    overflow: hidden;
}

.hero-section h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-section .subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.hero-section .cta-button {
    display: inline-block;
    background: var(--cart-dot-color);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: var(--input-radius);
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
}

.category-grid .category-item {
    width: 150px;
    text-align: center;
}

.category-grid .category-item img {
    width: 80px;
    height: 80px;
    margin-bottom: 0.5rem;
}

.category-grid .category-item span {
    display: block;
    color: var(--subheading-color);
    font-weight: 600;
}