/* Root CSS Variables: Define primary, secondary, and accent colors for easy customization */
:root {
    --primary: #2d3142; /* Dark blue/gray, used for main buttons, active links, and icons */
    --secondary: #adacb5; /* Light gray/blue, used for subtle backgrounds or text */
    --accent: #d8d5db; /* Very light gray/purple, used for background accents in categories/features */
}

/* Base Body Styles: Sets the default font for the entire website */
body {
    font-family: 'Poppins', sans-serif; /* Poppins is a modern, clean sans-serif font */
}

/* Modal Backdrop Filter: Applies a blur effect to the background when a modal is open */
.modal {
    backdrop-filter: blur(5px); /* Blurs the content behind the modal for focus */
}

/* Input Focus Outline Reset: Removes the default browser outline on input focus */
input:focus {
    outline: none; /* Provides a cleaner look, relies on Tailwind's focus styles if applied */
}

/* Remixicon Default Content: Ensures Remixicon icons display correctly by setting their content property */
/* This is a fallback and might not be strictly necessary if Remixicon is loaded correctly,
   but it ensures consistency. */
:where([class^="ri-"])::before {
    content: "\f3c2"; /* Placeholder Unicode character; actual icon is determined by specific class */
}

/* Hide Number Input Spin Buttons: Removes the up/down arrows from number input fields in WebKit browsers */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Hides the default spinner buttons */
    margin: 0; /* Removes any default margin that might appear */
}

/* Custom Switch Styles (if used, not explicitly in provided HTML but good to keep if needed) */
/* This block defines the structure and appearance of a custom toggle switch. */
.custom-switch {
    position: relative; /* Establishes positioning context for child elements */
    display: inline-block; /* Allows the switch to sit inline with text */
    width: 48px; /* Width of the switch container */
    height: 24px; /* Height of the switch container */
}

/* Hide Default Checkbox Input: Makes the native checkbox invisible while keeping its functionality */
.custom-switch input {
    opacity: 0; /* Makes the input completely transparent */
    width: 0; /* Removes its width */
    height: 0; /* Removes its height */
}

/* Slider Background: Styles the track of the toggle switch */
.slider {
    position: absolute; /* Positions the slider relative to its parent (.custom-switch) */
    cursor: pointer; /* Changes cursor to a pointer to indicate interactivity */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Default background color when off */
    transition: .4s; /* Smooth transition for background color and slider movement */
    border-radius: 24px; /* Creates a rounded pill shape for the track */
}

/* Slider Knob: Styles the draggable circle (knob) on the switch */
.slider:before {
    position: absolute; /* Positions the knob relative to the slider track */
    content: ""; /* Required for ::before pseudo-elements */
    height: 18px; /* Height of the knob */
    width: 18px; /* Width of the knob */
    left: 3px; /* Initial position from the left */
    bottom: 3px; /* Initial position from the bottom */
    background-color: white; /* Color of the knob */
    transition: .4s; /* Smooth transition for knob movement */
    border-radius: 50%; /* Makes the knob perfectly circular */
}

/* Slider Active State: Styles when the switch is checked (on) */
input:checked + .slider {
    background-color: var(--primary); /* Changes background color to primary when checked */
}

/* Slider Knob Movement: Moves the knob to the right when the switch is checked */
input:checked + .slider:before {
    transform: translateX(24px); /* Moves the knob horizontally */
}

/* Utility for line clamping product descriptions */
/* This class ensures that text content is truncated with an ellipsis after a certain number of lines. */
.line-clamp-2 {
    display: -webkit-box; /* Required for WebKit browsers to apply line clamping */
    -webkit-line-clamp: 2; /* Limits the text to 2 lines */
    -webkit-box-orient: vertical; /* Specifies the orientation of the box */
    overflow: hidden; /* Hides any overflowing content */
}