/* =========================================================
   GOKRIPADHAM
   ROOT / GLOBAL CSS
   Inspired by Client Prototype
   ========================================================= */


/* =========================================================
   1. GOOGLE FONTS
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

@import url("https://fonts.cdnfonts.com/css/satoshi");


/* =========================================================
   2. ROOT VARIABLES
   ========================================================= */

:root {

    /* -----------------------------
       Brand Colors
    ----------------------------- */

    --primary: #e17224;
    --primary-dark: #a56211;
    --primary-light: #fff2de;

        /* Brand */
    --secondary: #294B18;
    --secondary-dark: #1C350F;
    --secondary-light: #5F7A3A;

    --transparent: #88888800;

    /* -----------------------------
       Main Colors
    ----------------------------- */

    --white: #ffffff;
    --black: #000000;

    --heading: #0D1224;
    --text: #6E707A;
    --text-light: #8b8d96;

    /* -----------------------------
       Backgrounds
    ----------------------------- */

    --body-bg: #ffffff;
    --bg: #F3F7FB;
    --bg-light: #F6FBFF;
    --bg-cream: #fffaf1;

    /* -----------------------------
       Borders
    ----------------------------- */

    --border: #D4DCFF;
    --border-light: #E0E8E7;
    --border-dark: #D4DCED;

    /* -----------------------------
       Status Colors
    ----------------------------- */

    --success: #3f5f3b;
    --success-light: #edf7ed;

    --warning: #d99a27;
    --warning-light: #fff7df;

    --danger: #d64545;
    --danger-light: #fff0f0;

    /* -----------------------------
       Typography
    ----------------------------- */

    --font-body: "Satoshi", sans-serif;
    --font-heading: "Space Grotesk", sans-serif;

    /* -----------------------------
       Font Sizes
    ----------------------------- */

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;

    --fs-h6: 16px;
    --fs-h5: 18px;
    --fs-h4: 22px;
    --fs-h3: 28px;
    --fs-h2: 42px;
    --fs-h1: 56px;

    /* -----------------------------
       Font Weights
    ----------------------------- */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* -----------------------------
       Line Heights
    ----------------------------- */

    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;

    /* -----------------------------
       Border Radius
    ----------------------------- */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-pill: 999px;

    /* -----------------------------
       Shadows
    ----------------------------- */

    --shadow-sm:
        0 1px 6px rgba(0, 0, 0, 0.08);

    --shadow-md:
        0 1px 14px rgba(0, 0, 0, 0.13);

    --shadow-lg:
        0 10px 35px rgba(0, 0, 0, 0.12);

    --shadow-card:
        0 4px 20px rgba(0, 0, 0, 0.08);

    /* -----------------------------
       Container
    ----------------------------- */

    --container-width: 1320px;
    --container-padding: 20px;

    /* -----------------------------
       Spacing
    ----------------------------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-15: 60px;
    --space-20: 80px;
    --space-25: 100px;

    /* -----------------------------
       Animation
    ----------------------------- */

    --transition-fast: 0.2s ease;
    --transition: 0.4s ease;
    --transition-slow: 0.6s ease;

    /* -----------------------------
       Z-Index System
    ----------------------------- */

    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 500;
    --z-overlay: 900;
    --z-sidebar: 2000;
    --z-modal: 1100;
    --z-toast: 1200;

}


/* =========================================================
   3. GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    font-size: 16px;
}


body {
    margin: 0;
    padding: 0;

    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);

    color: var(--text);
    background-color: var(--body-bg);

    overflow-x: hidden;
}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;

    font-family: var(--font-heading);
    font-weight: var(--fw-bold);

    color: var(--heading);
    line-height: var(--lh-heading);
}


h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
}


h2 {
    font-size: var(--fs-h2);
}


h3 {
    font-size: var(--fs-h3);
}


h4 {
    font-size: var(--fs-h4);
}


h5 {
    font-size: var(--fs-h5);
}


h6 {
    font-size: var(--fs-h6);
}


p {
    margin: 0;
}


small {
    font-size: var(--fs-sm);
}


/* =========================================================
   5. LINKS
   ========================================================= */

a {
    color: var(--heading);
    text-decoration: none;
    cursor: pointer;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition);
}


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


/* =========================================================
   6. LISTS
   ========================================================= */

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* =========================================================
   7. IMAGES
   ========================================================= */

img {
    max-width: 100%;
    height: auto;
    display: block;
}


svg {
    display: block;
    max-width: 100%;
}


/* =========================================================
   8. BUTTONS
   ========================================================= */

button {
    margin: 0;
    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    font: inherit;
    color: inherit;

    cursor: pointer;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}


/* =========================================================
   9. FORM ELEMENTS
   ========================================================= */

input,
textarea,
select {
    width: 100%;

    font-family: var(--font-body);
    font-size: var(--fs-md);

    border: 1px solid var(--border-light);
    outline: none;

    background: var(--white);
    color: var(--heading);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(225, 114, 36, 0.10);
}


input::placeholder,
textarea::placeholder {
    color: var(--text-light);
}


/* =========================================================
   10. CONTAINER
   ========================================================= */

.container {
    width: 100%;
    max-width: var(--container-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}


/* =========================================================
   11. SECTION
   ========================================================= */

.section {
    width: 100%;
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}


.section-title {
    margin-bottom: var(--space-10);
}


.section-subtitle {
    margin-bottom: var(--space-3);

    color: var(--primary-dark);

    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}


/* =========================================================
   12. COMMON BUTTON
   ========================================================= */

.btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;
    padding: 14px 28px;

    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: var(--fs-md);
    font-weight: var(--fw-bold);

    text-align: center;

    overflow: hidden;

    transition:
        transform var(--transition),
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.btn:hover {
    transform: translateY(-2px);
}


/* Primary */

.btn-primary {
    background-color: var(--black);
    color: var(--white);
}


.btn-primary:hover {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: var(--shadow-md);
}


/* Secondary */

.btn-secondary {
    background-color: var(--primary);
    color: var(--white);
}


.btn-secondary:hover {
    background-color: var(--primary-dark);
    color: var(--white);
}


/* Outline */

.btn-outline {
    background-color: transparent;
    border-color: var(--primary);

    color: var(--primary);
}


.btn-outline:hover {
    background-color: var(--primary);
    color: var(--white);
}


/* =========================================================
   13. PRODUCT CARD FOUNDATION
   ========================================================= */

.product-card {
    position: relative;

    background-color: var(--white);

    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
    border-color: transparent;
}


.product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    transition: transform var(--transition-slow);
}


.product-card:hover img {
    transform: scale(1.04);
}


/* =========================================================
   14. BADGES
   ========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 10px;

    border-radius: var(--radius-pill);

    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}


.badge-sale {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}


.badge-success {
    background-color: var(--success-light);
    color: var(--success);
}


.badge-warning {
    background-color: var(--warning-light);
    color: var(--warning);
}


.badge-danger {
    background-color: var(--danger-light);
    color: var(--danger);
}


/* =========================================================
   15. RATING
   ========================================================= */

.rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    color: var(--warning);
}


.rating i {
    font-size: 14px;
}


/* =========================================================
   16. VISIBILITY HELPERS
   ========================================================= */

.hidden {
    display: none !important;
}


.visible {
    display: block !important;
}


.invisible {
    visibility: hidden !important;
}


/* =========================================================
   17. FLEX HELPERS
   ========================================================= */

.flex {
    display: flex;
}


.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.flex-column {
    display: flex;
    flex-direction: column;
}


.align-center {
    align-items: center;
}


.justify-center {
    justify-content: center;
}


/* =========================================================
   18. TEXT HELPERS
   ========================================================= */

.text-center {
    text-align: center;
}


.text-left {
    text-align: left;
}


.text-right {
    text-align: right;
}


.text-primary {
    color: var(--primary);
}


.text-muted {
    color: var(--text-light);
}


.text-success {
    color: var(--success);
}


.text-danger {
    color: var(--danger);
}


/* =========================================================
   19. OVERLAY
   Useful for:
   - Cart sidebar
   - Login modal
   - Signup modal
   - Mobile menu
   ========================================================= */

.overlay {
    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transition),
        visibility var(--transition);

    z-index: var(--z-overlay);
}


.overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   20. MODAL FOUNDATION
   ========================================================= */

.modal {
    position: fixed;

    top: 50%;
    left: 50%;

    width: min(500px, calc(100% - 30px));

    max-height: 90vh;

    overflow-y: auto;

    background: var(--white);

    border-radius: var(--radius-xl);

    transform: translate(-50%, -45%) scale(0.96);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);

    z-index: var(--z-modal);
}


.modal.active {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, -50%) scale(1);
}


/* =========================================================
   21. CART SIDEBAR FOUNDATION
   ========================================================= */

.cart-sidebar {
    position: fixed;

    top: 0;
    right: 0;

    width: min(430px, 100%);

    height: 100vh;

    background: var(--white);

    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.12);

    transform: translateX(100%);

    transition: transform var(--transition);

    z-index: var(--z-sidebar);

    display: flex;
    flex-direction: column;
}


.cart-sidebar.active {
    transform: translateX(0);
}


/* =========================================================
   22. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: var(--bg);
}


::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius-pill);
}


::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}


/* =========================================================
   23. SELECTION
   ========================================================= */

::selection {
    background: var(--primary);
    color: var(--white);
}


/* =========================================================
   24. RESPONSIVE TYPOGRAPHY
   ========================================================= */

@media (max-width: 1199px) {

    :root {
        --fs-h1: 48px;
        --fs-h2: 38px;
    }

}


@media (max-width: 991px) {

    :root {
        --fs-h1: 42px;
        --fs-h2: 34px;
    }

    .section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

}


@media (max-width: 767px) {

    :root {
        --fs-h1: 36px;
        --fs-h2: 30px;
        --fs-h3: 24px;
    }

    .container {
        --container-padding: 16px;
    }

    .section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

}


@media (max-width: 575px) {

    :root {
        --fs-h1: 32px;
        --fs-h2: 28px;
        --fs-h3: 22px;
    }

    .btn {
        min-height: 44px;
        padding: 12px 22px;
        font-size: var(--fs-sm);
    }

}


/* =========================================================
   25. REDUCED MOTION
   Accessibility + future animations
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}