/*
Theme Name: GeneratePress Child — SVG Shop
Theme URI: https://generatepress.com
Description: Child theme for the SVG/PNG digital download shop. Craft-market styling on top of GeneratePress.
Author: SVG Shop
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/* ---------------------------------------------------------------------
 * Palette & base
 * ------------------------------------------------------------------- */
:root {
    --svg-primary: #d6336c;      /* raspberry — buttons, accents */
    --svg-primary-dark: #b02458;
    --svg-secondary: #0ca678;    /* teal — badges, checkmarks */
    --svg-dark: #212529;
    --svg-muted: #6c757d;
    --svg-bg-soft: #faf7f9;
    --svg-border: #eceff1;
}

body {
    color: var(--svg-dark);
}

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

a:hover {
    color: var(--svg-primary-dark);
}

/* ---------------------------------------------------------------------
 * Announcement bar (above header)
 * ------------------------------------------------------------------- */
.svg-announce {
    background: var(--svg-dark);
    color: #fff;
    text-align: center;
    font-size: 0.82rem;
    padding: 8px 16px;
}

.svg-announce a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.svg-announce a:hover {
    color: #ffe3ec;
}

/* ---------------------------------------------------------------------
 * Header (sticky on desktop for quicker nav on long pages)
 * ------------------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--svg-border);
}

@media (min-width: 769px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .admin-bar .site-header {
        top: 32px;
    }
}

.main-title a {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.main-navigation .main-nav ul li a {
    font-weight: 600;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li:hover > a {
    color: var(--svg-primary);
}

/* ---------------------------------------------------------------------
 * Trust bar (hooked after header in functions.php)
 * ------------------------------------------------------------------- */
.svg-trust-bar {
    background: var(--svg-bg-soft);
    border-bottom: 1px solid var(--svg-border);
    font-size: 0.82rem;
    color: var(--svg-muted);
}

.svg-trust-bar .svg-trust-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.svg-trust-bar span::before {
    content: "\2713\00a0";
    color: var(--svg-secondary);
    font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Breadcrumbs
 * ------------------------------------------------------------------- */
.svg-breadcrumbs {
    font-size: 0.82rem;
    color: var(--svg-muted);
    margin-bottom: 18px;
}

.svg-breadcrumbs a {
    color: var(--svg-muted);
    text-decoration: none;
}

.svg-breadcrumbs a:hover {
    color: var(--svg-primary);
}

.svg-breadcrumbs .separator {
    margin: 0 6px;
    opacity: 0.6;
}

/* ---------------------------------------------------------------------
 * Homepage hero
 * ------------------------------------------------------------------- */
.svg-hero {
    background: linear-gradient(135deg, #fdf2f6 0%, #f3fbf8 100%);
    border-radius: 12px;
    padding: 64px 32px;
    text-align: center;
    margin-bottom: 48px;
}

.svg-hero h1 {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.svg-hero p {
    color: var(--svg-muted);
    font-size: 1.08rem;
    max-width: 560px;
    margin: 0 auto 24px;
}

.svg-hero .svg-hero-btn {
    display: inline-block;
    background: var(--svg-primary);
    color: #fff;
    font-weight: 700;
    padding: 13px 34px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.svg-hero .svg-hero-btn:hover {
    background: var(--svg-primary-dark);
    color: #fff;
}

.svg-home-section-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 48px 0 8px;
}

.svg-home-section-sub {
    text-align: center;
    color: var(--svg-muted);
    margin-bottom: 28px;
}

/* Value-props row under the hero */
.svg-props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 48px;
}

.svg-prop {
    background: var(--svg-bg-soft);
    border: 1px solid var(--svg-border);
    border-radius: 10px;
    padding: 22px 24px;
    text-align: center;
}

.svg-prop strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 6px;
}

.svg-prop p {
    color: var(--svg-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* "From the blog" — latest posts on the homepage */
.svg-latest.wp-block-latest-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    list-style: none;
}

.svg-latest.wp-block-latest-posts > li {
    background: #fff;
    border: 1px solid var(--svg-border);
    border-radius: 10px;
    padding: 22px 24px;
    margin: 0;
}

.svg-latest.wp-block-latest-posts > li > a {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--svg-dark);
    text-decoration: none;
}

.svg-latest.wp-block-latest-posts > li > a:hover {
    color: var(--svg-primary);
}

.svg-latest .wp-block-latest-posts__post-date {
    display: block;
    color: var(--svg-muted);
    font-size: 0.8rem;
    margin: 6px 0 8px;
}

.svg-latest .wp-block-latest-posts__post-excerpt {
    color: var(--svg-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Closing CTA band */
.svg-cta {
    background: linear-gradient(135deg, #fdf2f6 0%, #f3fbf8 100%);
    border-radius: 12px;
    padding: 44px 32px;
    text-align: center;
    margin: 48px 0 16px;
}

.svg-cta h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.svg-cta p {
    color: var(--svg-muted);
    max-width: 520px;
    margin: 0 auto 20px;
}

/* ---------------------------------------------------------------------
 * WooCommerce — product grid (shop / category / homepage shortcodes)
 *
 * Rebuilt as CSS Grid so the column count responds properly on every
 * device (GP's stock WooCommerce CSS collapses to 1 column on mobile,
 * which wastes space for an image-driven catalog).
 * ------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Woo's clearfix pseudo-elements would become stray grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

@media (max-width: 1099px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce ul.products.columns-3,
    .woocommerce-page ul.products.columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce ul.products.columns-3,
    .woocommerce-page ul.products.columns-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid var(--svg-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    text-align: center;
    padding-bottom: 16px;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(33, 37, 41, 0.09);
    transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
    margin-bottom: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 12px 14px 4px;
    color: var(--svg-dark);
}

.woocommerce ul.products li.product .price {
    color: var(--svg-primary);
    font-weight: 700;
    font-size: 1rem;
}

.woocommerce ul.products li.product .button {
    background: var(--svg-primary);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 10px;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--svg-primary-dark);
}

/* Category grid tiles */
.woocommerce ul.products li.product-category h2 {
    font-size: 1rem;
    font-weight: 700;
    padding: 12px;
}

.woocommerce ul.products li.product-category h2 .count {
    background: none;
    color: var(--svg-muted);
    font-weight: 400;
}

/* ---------------------------------------------------------------------
 * WooCommerce — single product page
 * ------------------------------------------------------------------- */
.svg-download-badge {
    display: inline-block;
    background: #e6f7f1;
    color: var(--svg-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.woocommerce div.product .product_title {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.woocommerce div.product p.price {
    color: var(--svg-primary);
    font-size: 1.5rem;
    font-weight: 800;
}

.woocommerce div.product form.cart .button {
    background: var(--svg-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 36px;
    border-radius: 8px;
}

.woocommerce div.product form.cart .button:hover {
    background: var(--svg-primary-dark);
}

.svg-product-trust {
    list-style: none;
    margin: 18px 0 0;
    padding: 14px 16px;
    background: var(--svg-bg-soft);
    border-radius: 8px;
    font-size: 0.88rem;
}

.svg-product-trust li {
    margin: 0 0 6px;
}

.svg-product-trust li:last-child {
    margin-bottom: 0;
}

.svg-product-trust li::before {
    content: "\2713\00a0\00a0";
    color: var(--svg-secondary);
    font-weight: 700;
}

/* Specs table (Additional information) */
.woocommerce table.shop_attributes th {
    font-weight: 600;
    color: var(--svg-dark);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--svg-primary);
}

/* ---------------------------------------------------------------------
 * Cart / checkout buttons
 * ------------------------------------------------------------------- */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
    background: var(--svg-primary);
    border-radius: 8px;
    font-weight: 700;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
    background: var(--svg-primary-dark);
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */
.svg-footer {
    background: var(--svg-bg-soft);
    border-top: 1px solid var(--svg-border);
}

.svg-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 44px 20px 36px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
}

.svg-footer-brand {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.svg-footer-about p {
    color: var(--svg-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.svg-footer-heading {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.svg-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.svg-footer-col ul li {
    margin-bottom: 8px;
}

.svg-footer-col ul li a {
    color: var(--svg-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.svg-footer-col ul li a:hover {
    color: var(--svg-primary);
}

.site-footer {
    border-top: none;
}

.site-info {
    font-size: 0.85rem;
    color: var(--svg-muted);
    background: var(--svg-bg-soft);
    border-top: 1px solid var(--svg-border);
}

/* ---------------------------------------------------------------------
 * Blog — archive cards & single-post readability
 * ------------------------------------------------------------------- */
.blog .site-main,
.category .site-main,
.tag .site-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog .site-main > *,
.category .site-main > *,
.tag .site-main > * {
    margin-bottom: 0;
}

.blog .site-main article,
.category .site-main article,
.tag .site-main article {
    border: 1px solid var(--svg-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog .site-main article:hover,
.category .site-main article:hover,
.tag .site-main article:hover {
    box-shadow: 0 8px 24px rgba(33, 37, 41, 0.09);
    transform: translateY(-2px);
}

.blog .site-main .entry-title,
.category .site-main .entry-title,
.tag .site-main .entry-title {
    font-size: 1.15rem;
    line-height: 1.35;
}

.blog .site-main .paging-navigation,
.category .site-main .paging-navigation,
.tag .site-main .paging-navigation,
.blog .site-main .page-header,
.category .site-main .page-header,
.tag .site-main .page-header {
    grid-column: 1 / -1;
}

@media (max-width: 1099px) {
    .blog .site-main,
    .category .site-main,
    .tag .site-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog .site-main,
    .category .site-main,
    .tag .site-main {
        grid-template-columns: 1fr;
    }
}

/* Single post: comfortable reading measure inside the wide container */
.single-post .entry-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.single-post .entry-header {
    max-width: 760px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
 * Info / legal pages & HTML sitemap
 * ------------------------------------------------------------------- */
.page .entry-content h2,
.single-post .entry-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 2em;
}

.page .entry-content h3,
.single-post .entry-content h3 {
    font-size: 1.08rem;
    font-weight: 700;
    margin-top: 1.6em;
}

.svg-page-updated {
    color: var(--svg-muted);
    font-size: 0.85rem;
}

.svg-sitemap ul {
    columns: 2;
    column-gap: 40px;
}

@media (max-width: 768px) {
    .svg-sitemap ul {
        columns: 1;
    }
}

/* ---------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .svg-hero {
        padding: 40px 20px;
    }

    .svg-hero h1 {
        font-size: 1.7rem;
    }

    .svg-trust-bar .svg-trust-inner {
        gap: 14px;
        font-size: 0.75rem;
    }

    .svg-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .svg-props {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .svg-latest.wp-block-latest-posts {
        grid-template-columns: 1fr;
    }

    /* Full-width buy button — the primary action deserves the whole thumb zone */
    .woocommerce div.product form.cart .button {
        width: 100%;
    }

    .woocommerce div.product form.cart div.quantity {
        margin-bottom: 10px;
    }
}