/*
Theme Name: Chargershargerpk
Theme URI: https://chargershargerpk.com
Author: Digitators Zone
Author URI: https://digitatorszone.com
Description: Premium 3D-inspired charging & cable e-commerce theme for Chargershargerpk. Fully editable from wp-admin (Customizer, Menus, Widgets) with WooCommerce support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chargershargerpk
Tags: e-commerce, woocommerce, custom-colors, custom-menu, custom-logo, translation-ready
*/

/* ==========================================================================
   Voltage 3D System — Design Tokens (mirrors WordPress Customizer settings)
   These CSS custom properties are ALSO written inline in header.php so that
   values changed in Customizer (Appearance > Customize > Voltage 3D Colors)
   apply instantly without editing this file.
   ========================================================================== */
:root {
    --color-surface: #fbf8ff;
    --color-surface-dim: #dad9e3;
    --color-surface-bright: #fbf8ff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f4f2fd;
    --color-surface-container: #eeedf7;
    --color-surface-container-high: #e8e7f1;
    --color-surface-container-highest: #e3e1ec;
    --color-on-surface: #1a1b22;
    --color-on-surface-variant: #4e4632;
    --color-inverse-surface: #2f3038;
    --color-inverse-on-surface: #f1effa;
    --color-outline: #807660;
    --color-outline-variant: #d2c5ab;
    --color-surface-tint: #755b00;
    --color-primary: #755b00;
    --color-on-primary: #ffffff;
    --color-primary-container: #f7c300;
    --color-on-primary-container: #695100;
    --color-inverse-primary: #f3c000;
    --color-secondary: #5f5e5e;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #e2dfde;
    --color-on-secondary-container: #636262;
    --color-tertiary: #5d5e60;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #c9cacb;
    --color-on-tertiary-container: #535556;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-primary-fixed: #ffdf90;
    --color-primary-fixed-dim: #f3c000;
    --color-on-primary-fixed: #241a00;
    --color-on-primary-fixed-variant: #584400;
    --color-secondary-fixed: #e5e2e1;
    --color-secondary-fixed-dim: #c8c6c5;
    --color-on-secondary-fixed: #1c1b1b;
    --color-on-secondary-fixed-variant: #474746;
    --color-tertiary-fixed: #e2e2e3;
    --color-tertiary-fixed-dim: #c6c6c7;
    --color-on-tertiary-fixed: #1a1c1d;
    --color-on-tertiary-fixed-variant: #454748;
    --color-background: #fbf8ff;
    --color-on-background: #1a1b22;
    --color-surface-variant: #e3e1ec;

    --font-headline: 'Hanken Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-label: 'Geist', sans-serif;

    --radius-default: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    --space-margin-mobile: 16px;
    --space-base: 8px;
    --space-gutter: 24px;
    --space-stack-sm: 12px;
    --space-stack-md: 24px;
    --space-stack-lg: 48px;
    --container-max: 1280px;
}

* { box-sizing: border-box; }

html, body {
    background: var(--color-background);
    color: var(--color-on-background);
    font-family: var(--font-body);
    scroll-behavior: smooth;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
::selection { background: var(--color-primary-container); color: var(--color-on-primary-container); }

.container-max { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-gutter); padding-right: var(--space-gutter); }

/* Glass panel */
.glass-panel {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Tilt card (JS driven, see assets/js/theme.js) */
.tilt-card { transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; }

/* 3D button */
.three-d-button {
    box-shadow: 0 6px 0 var(--color-on-primary-fixed-variant, #584400);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.three-d-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--color-on-primary-fixed-variant, #584400); }

.btn-depth {
    box-shadow: 0 4px 0 rgba(0,0,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-depth:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); }

/* Hero entrance animation */
@keyframes hero-entrance {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-hero-entrance { animation: hero-entrance 0.8s ease forwards; }
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }

.shimmer-bg { position: relative; overflow: hidden; }

/* Header shrink-on-scroll */
.site-header { transition: all .3s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.08); }

/* Utility grid helpers used by templates */
.grid-bento { display: grid; gap: var(--space-gutter); }
@media (min-width: 768px) {
    .grid-bento { grid-template-columns: repeat(12, minmax(0,1fr)); }
    .col-span-8 { grid-column: span 8 / span 8; }
    .col-span-4 { grid-column: span 4 / span 4; }
}

/* Product card */
.product-card { background: #fff; border-radius: 1.5rem; padding: 1.5rem; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.product-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,.08); }

/* WooCommerce overrides so WC markup matches Voltage 3D System */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { padding: 1.5rem; background:#fff; border-radius:1.5rem; border:1px solid rgba(0,0,0,.05); }
.woocommerce span.onsale { background: var(--color-error); border-radius: var(--radius-default); }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce-page a.button, .woocommerce-page button.button {
    background: var(--color-on-background) !important;
    color: #fff !important;
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .9rem 1.6rem !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background: var(--color-primary-container) !important;
    color: var(--color-on-primary-container) !important;
}
.woocommerce ul.products li.product .price { color: var(--color-on-background); font-family: var(--font-headline); font-weight: 700; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-primary); }

/* Skip link accessibility */
.skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 1rem; z-index: 9999; }
.skip-link:focus { left: 1rem; top: 1rem; }