/*
Theme Name: ConradGuns
Theme URI: https://conradguns.com
Author: 2A Web Hosting
Author URI: https://2awebhosting.com
Description: Custom WooCommerce theme for ConradGuns, an FFL/07 firearms dealer in Imperial, MO.
Version: 1.4.27
Requires at least: 7.0
Tested up to: 7.0.2
Requires PHP: 7.4
WC requires at least: 10.0
WC tested up to: 11.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: conradguns
Tags: woocommerce, ecommerce, light-theme, tactical, firearms, customizer
*/

/* ── Global ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; }

/* Baseline responsive-image reset. Without this, WooCommerce's product
   gallery image renders at its native attachment pixel width (often
   600-1024px) with no CSS constraint, which on mobile drags its CSS Grid
   column wider than the viewport (grid items default to stretching to
   fit an unconstrained image's intrinsic size). Since body has
   overflow-x:clip above, that overflow doesn't scroll -- it gets silently
   cropped, cutting off the image and everything to its right (including
   text lines) on phones. */
img { max-width: 100% !important; height: auto; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--cg-body-bg);
    color: var(--cg-text);
    margin: 0; padding: 0;
    overflow-x: clip;
}

a { color: var(--cg-link); }
a:hover { color: var(--cg-link-hover); }

/* ── Announcement Bar ───────────────────────────────────────── */
.cg-announce {
    background: var(--cg-announce-bg);
    color: var(--cg-announce-text);
    text-align: center;
    padding: 0.5rem 2.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
}
.cg-announce-close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem;
}
.cg-announce-close:hover { opacity: 1; }

/* ── Header ─────────────────────────────────────────────────── */
.cg-header {
    background: var(--cg-header-bg);
    border-bottom: 1px solid var(--cg-header-border);
    position: sticky; top: 0; z-index: 1000;
}
.cg-header-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex; justify-content: space-between; align-items: center;
}
.cg-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; gap: 0.5rem; }
.cg-logo img { height: 50px; width: auto; object-fit: contain; }
.cg-logo-text { color: var(--cg-nav-text); font-weight: 900; font-size: 1.4rem; font-style: italic; }

.cg-nav { display: flex; gap: 1.75rem; align-items: center; }
.cg-nav-link {
    color: var(--cg-nav-text);
    text-decoration: none; text-transform: uppercase;
    font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em;
    transition: color 0.2s;
}
.cg-nav-link:hover  { color: var(--cg-nav-hover); }
.cg-nav-link.active { color: var(--cg-nav-active); }

.cg-cart-icon { color: var(--cg-icon); text-decoration: none; font-size: 1.1rem; }
.cg-cart-icon:hover { color: var(--cg-icon-hover); }

.cg-search-btn {
    background: none; border: none; cursor: pointer;
    color: var(--cg-icon); padding: 4px;
    display: flex; align-items: center; transition: color 0.2s;
}
.cg-search-btn:hover { color: var(--cg-icon-hover); }

.cg-mobile-controls { display: none; align-items: center; gap: 1rem; }
.cg-hamburger { background: none; border: none; cursor: pointer; padding: 4px; display: flex; flex-direction: column; gap: 5px; }
.cg-hamburger span { display: block; width: 24px; height: 2px; background: var(--cg-nav-text); border-radius: 2px; transition: all 0.3s; }
.cg-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cg-hamburger.open span:nth-child(2) { opacity: 0; }
.cg-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Search Overlay ─────────────────────────────────────────── */
.cg-search-overlay {
    position: fixed; inset: 0;
    background: var(--cg-search-overlay);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.cg-search-overlay.open { opacity: 1; visibility: visible; }
.cg-search-overlay-inner { width: 100%; max-width: 720px; padding: 2rem; position: relative; text-align: center; }
.cg-search-close {
    position: absolute; top: -2rem; right: 2rem;
    background: none; border: none; cursor: pointer;
    color: var(--cg-muted); padding: 0.5rem; display: flex; align-items: center; transition: color 0.2s;
}
.cg-search-close:hover { color: var(--cg-search-label); }
.cg-search-label { color: var(--cg-search-label); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 1.5rem 0; }
.cg-search-input-wrap {
    display: flex; align-items: center;
    background: var(--cg-search-input-bg);
    border: 2px solid var(--cg-search-input-border);
    border-radius: 0.75rem; overflow: hidden; transition: border-color 0.2s;
}
.cg-search-input-wrap:focus-within { border-color: var(--cg-search-focus); }
.cg-search-input {
    flex: 1; background: transparent; border: none;
    color: var(--cg-search-text);
    font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; font-family: inherit;
    padding: 1rem 1.25rem; outline: none; min-width: 0;
}
.cg-search-input::placeholder { color: #444; }
.cg-search-submit {
    background: none; border: none; color: var(--cg-muted); cursor: pointer;
    padding: 1rem 1.25rem; display: flex; align-items: center; transition: color 0.2s;
}
.cg-search-submit:hover { color: var(--cg-search-label); }
.cg-search-hint { color: #555; font-size: 0.8rem; margin: 1rem 0 0 0; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── WooCommerce Product Grid ───────────────────────────────── */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
}
@media (max-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px)  { .woocommerce ul.products { grid-template-columns: 1fr !important; } }

/* Product card — no box, outline on hover only */
.woocommerce ul.products li.product {
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}
.woocommerce ul.products li.product:hover {
    border-color: var(--cg-prod-card-hover) !important;
    box-shadow: 0 6px 24px rgba(176,141,87,0.2) !important;
    transform: translateY(-3px) !important;
    background: transparent !important;
}
.woocommerce ul.products li.product img {
    width: 100% !important; height: auto !important;
    max-height: 220px !important; object-fit: contain !important;
    border-radius: 0.25rem !important; margin-bottom: 0.75rem !important;
    background: transparent !important; border: none !important; padding: 0 !important;
}.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    color: var(--cg-prod-title) !important; font-size: 0.95rem !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    margin: 0 0 0.5rem 0 !important; line-height: 1.3 !important;
}
.woocommerce ul.products li.product a { text-decoration: none !important; }
.woocommerce ul.products li.product a:hover h2 { color: var(--cg-accent) !important; }
.woocommerce ul.products li.product .price {
    color: var(--cg-prod-price) !important; font-size: 1.1rem !important;
    font-weight: 900 !important; margin: 0.5rem 0 1rem 0 !important; display: block !important;
}
.woocommerce ul.products li.product .price del { opacity: 0.5 !important; font-size: 0.9rem !important; }
.woocommerce ul.products li.product .star-rating { margin: 0 auto 0.5rem auto !important; }

/* Add to Cart */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    background: var(--cg-btn-bg) !important; color: var(--cg-btn-text) !important;
    border: none !important; padding: 0.75rem 1.25rem !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    border-radius: 0.375rem !important; width: 100% !important;
    transition: background 0.2s !important; display: inline-block !important;
    text-align: center !important; text-decoration: none !important;
    font-size: 0.85rem !important; cursor: pointer !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background: var(--cg-btn-hover) !important;
}

/* ── Sale Badge ─────────────────────────────────────────────── */
.woocommerce span.onsale {
    background: var(--cg-accent) !important; color: var(--cg-accent-text) !important;
    border-radius: 3px !important; padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important; font-weight: 900 !important; text-transform: uppercase !important;
    position: absolute !important; top: 1rem !important; left: 1rem !important;
    z-index: 10 !important; letter-spacing: 0.05em !important;
    min-height: auto !important; min-width: auto !important; line-height: 1.4 !important;
}

/* Gallery wrapper needs relative positioning for badge */
.woocommerce div.product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery { position: relative !important; }
.woocommerce-product-gallery__wrapper { position: relative !important; }

/* Main gallery image */
.woocommerce-product-gallery__wrapper {
    margin: 0 !important;
}
.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0.5rem !important;
}

/* Ensure variations form and add to cart always visible */
.woocommerce div.product .summary .variations_form,
.woocommerce div.product .summary form.cart,
.woocommerce div.product .summary .woocommerce-variation-add-to-cart,
.woocommerce div.product .summary .single_variation_wrap,
.woocommerce div.product .summary table.variations,
.woocommerce div.product .summary .single_add_to_cart_button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.woocommerce div.product .summary table.variations { display: table !important; }
.woocommerce div.product .summary form.cart { display: flex !important; flex-wrap: wrap !important; gap: 0.75rem !important; }

/* Thumbnail strip — horizontal row below main image */
.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0.75rem 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.flex-control-thumbs li {
    width: calc(12.5% - 0.5rem) !important;
    min-width: 60px !important;
    margin: 0 !important;
    counter-increment: none !important;
    padding: 0 !important;
}
.flex-control-thumbs li::before,
.flex-control-thumbs li::marker { display: none !important; content: none !important; }
.flex-control-thumbs li img {
    width: 100% !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 0.25rem !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: border-color 0.2s !important;
}
.flex-control-thumbs li img:hover,
.flex-control-thumbs li img.flex-active {
    border-color: var(--cg-accent) !important;
}

/* Remove any ordered list numbering from gallery */
.woocommerce-product-gallery ol,
.woocommerce-product-gallery ul { list-style: none !important; counter-reset: none !important; }
.woocommerce-product-gallery ol li::before { display: none !important; content: none !important; }

/* ── Single Product ─────────────────────────────────────────── */
/* Force two-column layout */
.single-product div.product,
.woocommerce div.product.single-product,
.woocommerce div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 3rem !important;
    align-items: start !important;
    margin-bottom: 3rem !important;
    flex-wrap: unset !important;
}
.single-product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    overflow: hidden !important;
}
/* WooCommerce's Flexslider gallery (wc-product-gallery-slider theme
   support) sets its own inline pixel widths via JS on its internal slide
   track, sized to however wide it calculates the container at init time.
   If that JS runs before our CSS grid has settled the column's actual
   width -- a timing difference seen on iOS Safari but not Chrome/Android
   -- the slide track can compute a wider-than-screen size. Flexslider's
   carousel positioning relies on that inner track legitimately being
   wider than what's visible (it's clipped and scrolled via transforms),
   so we don't touch the inner track/slides -- capping those would break
   the slide math. Instead the outer .woocommerce-product-gallery
   container above is clipped with overflow:hidden + max-width:100%,
   which contains any oversized inner track without affecting how the
   slider itself positions slides. */
.single-product .summary.entry-summary,
.woocommerce div.product .summary.entry-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
}
/* Tabs span full width below */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product #reviews,
.single-product .woocommerce-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}
/* Widened from 768px: at exactly/near 768px (landscape tablets, foldables,
   and some DevTools mobile-emulation presets) the two-column layout has
   too little room per column and looks cramped/cut off. 900px gives it
   margin so anything tablet-sized-or-smaller gets the single-column
   stacked layout instead of a squeezed two-column one.

   IMPORTANT: this used to only reset grid-column to 1 for the gallery and
   summary, leaving BOTH still pinned to grid-row:1 from the desktop rules
   above -- meaning on mobile they occupied the exact same grid cell and
   overlapped each other, which made the title/price/Add to Cart summary
   effectively disappear behind/under the gallery image. This is the real
   root cause of the "cut off" mobile reports -- not just image sizing.
   Explicit distinct grid-row values below (1/2/3) give each section its
   own row so they stack normally: image, then summary, then tabs. */
@media (max-width: 900px) {
    .single-product div.product,
    .woocommerce div.product.single-product,
    .woocommerce div.product {
        display: block !important;
        grid-template-columns: unset !important;
    }
    .single-product .woocommerce-product-gallery,
    .woocommerce div.product .woocommerce-product-gallery {
        width: 100% !important;
        float: none !important;
        margin-bottom: 2rem !important;
    }
    .single-product .summary.entry-summary,
    .woocommerce div.product .summary.entry-summary {
        width: 100% !important;
        float: none !important;
        display: block !important;
        visibility: visible !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }
    .woocommerce div.product .woocommerce-tabs { width: 100% !important; }
}

/* Stock status */
.woocommerce div.product p.stock { font-size: 0.85rem !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
p.stock.in-stock { color: #5A7A52 !important; }
p.stock.out-of-stock { color: #A0453A !important; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--cg-text) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 0.85rem !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cg-accent) !important; }
.woocommerce div.product .woocommerce-tabs .panel h2 { color: var(--cg-text) !important; font-weight: 900 !important; text-transform: uppercase !important; font-size: 0.9rem !important; margin-bottom: 1.5rem !important; }
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel td,
.woocommerce div.product .woocommerce-tabs .panel th { color: var(--cg-text) !important; }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text p { color: var(--cg-text) !important; }
.woocommerce #reviews #reply-title, .woocommerce #reviews label { color: var(--cg-text) !important; }
.woocommerce #reviews .stars a { color: var(--cg-accent) !important; text-decoration: none !important; }
.comment-form-rating .stars { display: flex !important; gap: 0.5rem !important; }

.woocommerce div.product { background: transparent !important; }
.woocommerce div.product .quantity {
    display: flex !important; align-items: center !important;
    background: var(--cg-input-bg) !important; border: 1px solid var(--cg-input-border) !important;
    border-radius: 0.375rem !important; overflow: hidden !important;
}
.woocommerce div.product .quantity .qty {
    width: 70px !important; background: transparent !important; border: none !important;
    color: var(--cg-input-text) !important; font-size: 1rem !important; font-weight: 700 !important;
    text-align: center !important; padding: 0.75rem !important;
}
.woocommerce div.product .quantity .minus,
.woocommerce div.product .quantity .plus {
    background: transparent !important; border: none !important; color: var(--cg-text) !important;
    font-size: 1.25rem !important; width: 36px !important; height: 44px !important;
    cursor: pointer !important; transition: all 0.2s !important;
}
.woocommerce div.product .quantity .minus:hover,
.woocommerce div.product .quantity .plus:hover {
    background: rgba(0,0,0,0.05) !important; color: var(--cg-accent) !important;
}
.woocommerce div.product form.cart .button {
    background: var(--cg-btn-bg) !important; color: var(--cg-btn-text) !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    border-radius: 0.375rem !important; border: none !important; cursor: pointer !important;
}
.woocommerce div.product form.cart .button:hover { background: var(--cg-btn-hover) !important; }

/* ── Cart ───────────────────────────────────────────────────── */
.cart_totals {
    background: var(--cg-light-card-bg) !important; border-radius: 0.5rem !important;
    padding: 2rem !important; border: 1px solid var(--cg-light-card-border) !important;
}
.cart_totals h2                              { color: var(--cg-text) !important; }
.cart_totals th, .cart_totals td             { color: var(--cg-text) !important; border-color: var(--cg-light-card-border) !important; }
.cart_totals .order-total th,
.cart_totals .order-total td                 { color: var(--cg-text) !important; font-weight: 900 !important; }
.cart_totals .order-total .amount            { color: var(--cg-prod-price) !important; }

/* ── Star Ratings ───────────────────────────────────────────── */
.woocommerce .star-rating { overflow: hidden; position: relative; height: 1.2em; line-height: 1.2; font-size: 1em; width: 6em; }
.woocommerce .star-rating::before { content: "★★★★★"; color: #ccc; float: left; top: 0; left: 0; position: absolute; letter-spacing: 0.1em; }
.woocommerce .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.woocommerce .star-rating span::before { content: "★★★★★"; top: 0; position: absolute; left: 0; color: #fbbf24; letter-spacing: 0.1em; }

/* ── Pagination ─────────────────────────────────────────────── */
.woocommerce-pagination, .woocommerce-pagination ul.page-numbers, .woocommerce-pagination ul.page-numbers li {
    list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important;
}
.woocommerce-pagination { text-align: center; padding: 3rem 0 2rem; width: 100%; clear: both; }
.woocommerce-pagination ul.page-numbers { display: inline-flex; justify-content: center; gap: 6px; }
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    display: inline-block; padding: 10px 18px;
    background: var(--cg-page-bg); color: var(--cg-page-text) !important;
    border: none; font-weight: 700; font-size: 0.85rem; text-transform: uppercase;
    text-decoration: none; transition: background 0.2s; border-radius: 3px; line-height: 1;
}
.woocommerce-pagination ul.page-numbers li a:hover { background: var(--cg-page-hover); }
.woocommerce-pagination ul.page-numbers li span.current { background: var(--cg-page-active); cursor: default; }

/* ── Mobile Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
    .cg-header-inner { padding: 0.75rem 1rem; }
    .cg-nav .cg-nav-link, .cg-nav .cg-cart-icon, .cg-nav .cg-search-btn { display: none; }
    .cg-mobile-controls { display: flex; }
    .cg-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--cg-header-bg); border-top: 1px solid var(--cg-header-border);
        flex-direction: column; gap: 0; padding: 0.5rem 0; z-index: 999;
    }
    .cg-nav.open { display: flex; }
    .cg-nav .cg-nav-link { display: block; padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--cg-header-border); font-size: 0.9rem; color: var(--cg-nav-text); }
    .cg-nav .cg-cart-icon { display: none !important; }
}
@media (max-width: 768px) {
    body { overflow-x: hidden; }
    .cg-partnered-grid { grid-template-columns: 1fr 1fr !important; }
    .cg-footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; text-align: center !important; }
    .cg-footer-grid .cg-footer-social { text-align: center !important; }
    .cg-footer-grid .cg-footer-social a { margin: 0 0.25rem 0.5rem !important; }
    .cg-product-grid { grid-template-columns: 1fr !important; }
    form.cart { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; }
    form.cart .quantity { width: 100% !important; }
    form.cart .single_add_to_cart_button {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
        position: relative !important;
        z-index: 2 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}
@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
    .cg-partnered-grid { grid-template-columns: 1fr !important; }
}

/* ── Dark Mode toggle ──────────────────────────────────────────
   Inverts the whole rendered page rather than a second hand-built
   palette, so it automatically follows whatever colors are set in
   the Customizer. Images/logo/icons get a second (canceling) invert
   so photos still look normal instead of like film negatives. */
html.cg-dark-mode {
    filter: invert(1) hue-rotate(180deg);
    background: #fff;
}
html.cg-dark-mode img,
html.cg-dark-mode svg,
html.cg-dark-mode video,
html.cg-dark-mode iframe,
html.cg-dark-mode picture {
    filter: invert(1) hue-rotate(180deg);
}
.cg-footer-social { text-align: right; }

/* ── Widgets ── */
.cg-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; }
.cg-sidebar .cg-widget { background: var(--cg-light-card-bg); border: 1px solid var(--cg-light-card-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1.5rem; color: var(--cg-text); font-size: 0.9rem; line-height: 1.6; }
.cg-widget-title { margin: 0 0 1rem; font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cg-text); border-bottom: 2px solid var(--cg-accent); padding-bottom: 0.5rem; }
.cg-widget ul { list-style: none; margin: 0; padding: 0; }
.cg-widget li { padding: 0.35rem 0; }
.cg-widget a { color: var(--cg-link); text-decoration: none; }
.cg-widget a:hover { color: var(--cg-link-hover); text-decoration: underline; }
.cg-widget input[type="search"], .cg-widget input[type="text"], .cg-widget input[type="email"], .cg-widget select, .cg-widget textarea { width: 100%; box-sizing: border-box; background: var(--cg-input-bg); border: 1px solid var(--cg-input-border); color: var(--cg-input-text); border-radius: 0.375rem; padding: 0.6rem 0.8rem; font-family: inherit; }
.cg-widget input[type="submit"], .cg-widget button, .cg-widget .wp-block-search__button { background: var(--cg-btn-bg); color: var(--cg-btn-text); border: none; border-radius: 0.375rem; padding: 0.6rem 1rem; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; }
.cg-footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cg-footer-border); }
.cg-footer-widgets .cg-widget { color: var(--cg-footer-text); font-size: 0.85rem; }
.cg-footer-widgets .cg-widget-title { color: var(--cg-dark-heading); border-bottom-color: var(--cg-footer-border); }
.cg-footer-widgets .cg-widget a { color: var(--cg-footer-link); }
.cg-footer-widgets .cg-widget a:hover { color: var(--cg-footer-link-hover); }
.cg-shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
.cg-widget .product-categories .count { color: var(--cg-muted); }
.cg-widget .widget_price_filter .ui-slider, .cg-widget .wc-block-components-price-slider__range-input-wrapper { background: var(--cg-light-card-border); }
@media (min-width: 1201px) { .cg-has-shop-sidebar .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 900px) { .cg-with-sidebar, .cg-shop-layout { grid-template-columns: 1fr; } }
/* Logo swap: header uses the inverted (light) logo in night mode; the footer
   is dark in day mode, so it shows the inverted logo by day and the normal one by night. */
.cg-logo-dark, .cg-footer-logo-night { display: none !important; }
html.cg-dark-mode .cg-logo-light { display: none !important; }
html.cg-dark-mode .cg-logo-dark { display: block !important; }
html.cg-dark-mode .cg-footer-logo-day { display: none !important; }
html.cg-dark-mode .cg-footer-logo-night { display: block !important; }
/* The toggle button itself stays put -- otherwise clicking it once
   would flip its own color and it'd look broken/inverted itself. */
html.cg-dark-mode #cg-dark-toggle {
    filter: invert(1) hue-rotate(180deg);
}
/* Credit card logos (Visa/Mastercard/Amex/Discover) must always show
   their real brand colors, dark mode or not -- explicit rule, not
   just relying on the generic "img" counter-invert above, so this
   stays true even if that generic rule ever changes. */
html.cg-dark-mode .cg-no-invert {
    filter: invert(1) hue-rotate(180deg);
}