/**
 * ===========================================================================
 * UNIVERSAL CSS + BOOTSTRAP SYSTEM (GOLDEN CIRCLE — PRIMARY DESIGN AUTHORITY)
 * ===========================================================================
 *
 * WHY (Purpose)
 * - style.css is the SINGLE source of primary UI intent (Desktop-first).
 * - media.css exists only to adapt the same intent for other devices.
 * - Prevent random scaling, guessing, or redesign during responsiveness.
 *
 * The goal is CONSISTENCY of intent, not pixel equality across devices.
 *
 *
 * HOW (Implementation & Governance)
 *
 * 1. DESIGN AUTHORITY
 *    - style.css represents the PRIMARY DESIGN reference.
 *    - Primary design is evaluated at:
 *      • 1440px (Large Desktop)
 *
 *    - All sizes defined here (font, spacing, components) represent:
 *      • visual hierarchy
 *      • brand emphasis
 *      • intended density
 *
 *
 * 2. RESPONSIVE EXTENSION (media.css ALIGNMENT)
 *    - media.css does NOT redesign.
 *    - media.css only ADAPTS values from style.css.
 *
 *    Allowed adaptations:
 *    - font-size reduction
 *    - vertical spacing reduction
 *    - visibility refinement (hide secondary elements)
 *
 *    Forbidden adaptations:
 *    - changing layout logic
 *    - redefining grid behavior
 *    - increasing sizes beyond style.css
 *
 *
 * 3. BOOTSTRAP CONTRACT
 *    - Bootstrap handles:
 *      • grid
 *      • breakpoints
 *      • base responsiveness
 *
 *    - Bootstrap classes are READ-ONLY.
 *    - Custom UI must NEVER override Bootstrap behavior.
 *
 *
 * 4. TOKEN & CLASS DISCIPLINE
 *    - Tokens (:root) define VALUES only.
 *    - Custom classes define USAGE of those values.
 *    - All custom classes MUST use "_" prefix.
 *
 *
 * WHAT (Structure & Screen Strategy)
 *
 * - Screen Presets (Industry Standard):
 *   • ≥1440px : Primary Design Reference
 *   • ≥1200px : Desktop
 *   • ≥992px  : Laptop
 *   • ≥768px  : Tablet
 *   • <768px  : Mobile
 *
 * - style.css:
 *   • Defines primary font sizes, spacing, components (desktop intent)
 *
 * - media.css:
 *   • Derives reduced values for tablet & mobile
 *   • Preserves hierarchy defined in style.css
 *
 *
 * ALLOWED
 * - _btn_primary, _card, _section, _section_inner, _text_muted
 * - rem units for spacing & typography
 *
 * FORBIDDEN
 * - Overriding Bootstrap classes
 * - Defining responsive logic in style.css
 * - Redesigning components inside media.css
 * - Color-named or device-named classes
 *
 *
 * GOLDEN RULE (DO NOT BREAK)
 * - style.css defines INTENT (1440px truth).
 * - media.css adapts INTENT, never redefines it.
 * - Bootstrap enforces structure.
 * - Custom classes express identity, not layout authority.
 * ===========================================================================
 */

/* -----------------------
   GLOBAL BASE
   ----------------------- */
@import 'variables.css';

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

body {
    margin: 0;
    font-family: var(--font_base);
    background: var(--theme_color_primary_dark);
    color: var(--theme_contrast_light);
}

/* -----------------------
      TYPOGRAPHY (LIGHT TOUCH)
      ----------------------- */

h1,
h2,
h3 {
    font-weight: 600;
    color: var(--theme_contrast_light);
    font-family: var(--font_heading);
}

/* -----------------------
      SECTIONS (RHYTHM)
      ----------------------- */

._section {
    width: 100%;
}

._section_bg {
    background: var(--theme_color_primary);
}

._section_bg_dark {
    background: var(--theme_color_primary_dark);
}

._section_inner {
    padding-left: var(--theme_horizontal_padding);
    padding-right: var(--theme_horizontal_padding);
}

._section_content_padding {
    padding-top: var(--theme_vertical_padding);
    padding-bottom: var(--theme_vertical_padding);
}

._header_section_inner {
    padding-left: var(--theme_header_horizontal_padding);
    padding-right: var(--theme_header_horizontal_padding);
}

._header_section_content_padding {
    padding-top: 0;
    padding-bottom: 0;
}

/* -----------------------
      SURFACE / CARD
      ----------------------- */

._card {
    background: var(--theme_color_primary_dark);
    border-radius: var(--theme_radius_md);
    border: 1px solid var(--theme_border_color);
}

._card_wrapper {
    background: var(--theme_color_primary);
    border-radius: var(--theme_radius_lg);
    padding: 2rem;
}

/* -----------------------
      BASE UTILITY CLASSES
      ----------------------- */

/* Divider Base */
._divider {
    height: 1px;
    background: var(--theme_color_secondary);
    margin: 0.5rem 0;
}

._divider_hr {
    border-color: var(--theme_color_secondary);
    border-width: 1px;
    margin: 1rem 0;
}

/* Text Description Base (Extendable) */
._text_description {
    font-size: var(--text_size_base);
    margin: 0;
}

._text_description_bold {
    font-weight: var(--text_weight_semibold);
    color: var(--theme_color_secondary);
}

._text_description_normal {
    font-weight: var(--text_weight_normal);
    color: var(--ink_white);
}

._text_description_sm {
    font-size: var(--text_size_sm);
    color: var(--theme_color_secondary);
}

._text_description_xs {
    font-size: 12px;
    color: var(--theme_color_secondary);
}

._text_description_xs_bold {
    font-size: 12px;
    font-weight: var(--text_weight_semibold);
    color: var(--theme_color_secondary);
}

._text_description_muted {
    color: var(--theme_text_muted);
}

._text_description_bold_muted {
    font-weight: var(--text_weight_semibold);
    color: var(--theme_text_muted);
}

._text_white {
    color: var(--ink_white);
}

/* Link Base (Extendable) */
._link_base {
    font-size: var(--text_size_sm);
    font-weight: var(--text_weight_medium);
    text-decoration: none;
    transition: var(--theme_transition_fast);
}

._link_accent {
    color: var(--theme_color_accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

._link_accent:hover {
    color: var(--ink_white);
    text-decoration: underline;
}

._link_base_secondary {
    color: var(--theme_color_secondary);
}

._link_base_secondary:hover {
    color: var(--ink_white);
    text-decoration: underline;
}

/* Title Base (Extendable) */
._title {
    font-weight: var(--text_weight_semibold);
    margin: 0;
}

._title_md {
    font-size: 20px;
}

._title_lg {
    font-size: 24px;
}

._title_white {
    color: var(--ink_white);
}

._title_secondary {
    color: var(--theme_color_secondary);
}

._title_mb {
    margin-bottom: 1rem;
}

/* Typography Base (Extendable) */
._text_name {
    font-weight: var(--text_weight_semibold);
    margin: 0 0 0.5rem 0;
}

._text_name_sm {
    font-size: var(--text_size_base);
    color: var(--theme_color_secondary);
}

._text_name_md {
    font-size: var(--text_size_md);
    color: var(--ink_white);
}

._text_name_lg {
    font-size: var(--text_size_lg);
    color: var(--ink_white);
}

/* Price Display Base (Using Variables) */
._price {
    font-weight: var(--text_weight_semibold);
    color: var(--theme_color_secondary);
}

._price_sm {
    font-size: var(--text_size_base);
}

._price_md {
    font-size: var(--text_size_md);
    color: var(--ink_white);
}

/* Price Label/Value Base (Using Variables) */
._price_label {
    font-size: var(--text_size_base);
    font-weight: var(--text_weight_normal);
    color: var(--ink_white);
}

._price_value {
    font-size: var(--text_size_base);
    font-weight: var(--text_weight_normal);
    color: var(--ink_white);
    text-align: right;
}

._price_label_lg {
    font-size: var(--text_size_lg);
    font-weight: var(--text_weight_bold);
    color: var(--theme_color_secondary);
}

._price_value_lg {
    font-size: var(--text_size_lg);
    font-weight: var(--text_weight_bold);
    color: var(--theme_color_secondary);
}

._price_label_lg_white {
    color: var(--ink_white);
}

._price_value_lg_white {
    color: var(--ink_white);
}

._price_breakdown_box {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    background: var(--ink_white);
    border-radius: var(--theme_radius_md);
}

._price_breakdown_box ._text_description {
    color: var(--theme_contrast_dark);
}

._price_xl {
    font-size: 28px;
    font-weight: var(--text_weight_bold);
    color: var(--ink_white);
}

/* Image Base (Contained Images) */
._image_contained {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

/* Card Base (Non-Core Components Only) */
._card_base {
    background: var(--theme_color_primary);
    border-radius: var(--theme_radius_md);
    padding: 1.5rem;
}

._card_base._card_base_compact {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

._card_base_lg {
    border-radius: var(--theme_radius_lg);
    padding: 2rem;
}

._card_base_no_padding {
    padding: 0;
}

._card_base_sticky {
    position: sticky;
    top: 100px;
}

._card_base_fixed_height {
    height: 400px;
    display: flex;
    flex-direction: column;
}

/* Image Wrapper Base (Non-Core Components Only) */
._image_wrapper_base {
    background: var(--theme_color_primary);
    border-radius: var(--theme_radius_sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

._image_wrapper_xs {
    width: 80px;
    height: 80px;
}

._image_wrapper_sm {
    width: 80px;
    height: 200px;
}

._image_wrapper_md {
    width: 116px;
    height: 150px;
}

._image_wrapper_dark_bg {
    background: var(--theme_color_primary_dark);
}

/* -----------------------
      BUTTONS (OWN SYSTEM)
      ----------------------- */

._btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--theme_radius_md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

._btn_primary {
    background: var(--theme_color_primary_light);
    color: var(--ink_white);
    font-size: 18px;
    padding: 13px 26px;
    position: relative;
    border-radius: 10px;
    transition: var(--theme_transition_fast);
}

._btn_primary:hover {
    background: var(--ink_white);
    color: var(--theme_color_primary_light);
}

._btn_primary_sm {
    background: var(--theme_color_primary_light);
    color: var(--ink_white);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 26px;
    position: relative;
    border-radius: 10px;
    transition: var(--theme_transition_fast);
}

._btn_primary_sm:hover {
    background: var(--ink_white);
    color: var(--theme_color_primary_light);
}

/* Primary Button Size Variants - Only padding adjustments */
._btn_primary_xl {
    padding: 17.5px 32px;
    height: 55px;
}

._btn_primary_lg {
    padding: 11px 28px;
    height: 40px;
}

._btn_primary_md {
    padding: 8px 24px;
    height: 32px;
}

._btn_primary_xs {
    padding: 5px 20px;
    height: 24px;
}

._btn_secondary {
    background: var(--ink_white);
    color: var(--theme_color_primary_light);
    transition: var(--theme_transition_fast);
}

._btn_secondary:hover {
    background: var(--theme_color_primary_light);
    color: var(--ink_white);
}

._btn_secondary_border {
    border: 1px solid var(--ink_white);
    color: var(--ink_white);
    transition: var(--theme_transition_fast);
}

._btn_secondary_border:hover {
    background: var(--ink_white);
    color: var(--theme_color_primary_light);
}

._btn_secondary_border_sm {
    font-size: 14px;
    padding: 6px 16px;
}

._btn_secondary_lg {
    padding: 11px 28px;
    height: 40px;
}
/* -----------------------
      TEXT HELPERS (MINIMAL)
      ----------------------- */

._text_muted {
    color: var(--ink_gray);
}

._text_inverse {
    color: var(--theme_contrast_light);
}

._text_body {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
}

/* -----------------------
      IMAGES
      ----------------------- */

._image_cover {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
}

/* -----------------------
      FORM BASE
      ----------------------- */

._input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--theme_radius_sm);
    border: 1px solid var(--theme_border_color);
}

._navbar {
    padding: 12px 0px;
}

._header_logo_image {
    max-height: 55px;
    width: auto;
    max-width: 100%;
}

._navbar ._nav_item {
    padding: 0 10px;
}

._navbar ._nav_divider {
    color: var(--theme_color_secondary);
    font-weight: 500;
    font-size: 14px;
}

._navbar ._nav_link {
    color: var(--ink_white);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}

._navbar ._nav_link.active,
._navbar ._nav_link:hover {
    color: var(--theme_color_secondary);
}

._navbar ._nav_link:focus {
    color: var(--ink_white);
}

._navbar ._dropdown_menu {
    background: var(--theme_color_primary_dark);
    padding: 10px 0px;
    box-shadow: none;
    border: none;
}

._navbar ._dropdown_item {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    margin-bottom: 5px;
    border-radius: var(--theme_radius_sm);
}

._navbar ._dropdown_link {
    border-radius: var(--theme_radius_sm);
    padding: 8px 12px;
    color: var(--theme_color_secondary);
    display: block;
}

._navbar ._dropdown_item:hover {
    background: var(--theme_color_secondary);
}

._navbar ._dropdown_link:hover {
    color: var(--theme_color_primary);
    background: var(--theme_color_secondary);
}

._section_title {
    font-size: 48px;
    font-weight: 400;
    color: var(--theme_color_secondary);
}

._section_subtitle {
    font-size: 36px;
    font-weight: 400;
    color: var(--theme_color_secondary);
}

._no_products_message {
    font-size: 24px;
    color: var(--theme_text_muted, #666);
    text-align: center;
    width: 100%;
    display: block;
}


._text_paragraph {
    font-size: 16px;
    font-weight: 400;
    color: var(--theme_color_secondary);
}

._banner_wrapper {
    position: relative;
    min-height: 430px;
    padding: 0.5rem 12rem;
}

._banner_title_small {
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--theme_text_muted);
}

._banner_title_large {
    font-size: 140px;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--theme_color_secondary);
}

._banner_image_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

._banner_image_wrapper img {
    max-height: 600px;
    width: auto;
    max-width: 328px;
}

._banner_content_wrapper {
    position: relative;
    z-index: 2;
}

._special_section_title {
    font-size: 74px;
    font-weight: 500;
    line-height: 1.2;
}

._home_text_paragraph {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

._special_image_wrapper {
    max-height: 500px;
    position: relative;
    padding: 0px 1rem 0px 4rem;
}

._special_image_wrapper img {
    width: auto;
    height: 500px;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

._about_grapes_image_wrapper {
    position: relative;
}

._about_grapes_image_sub_wrapper {
    position: relative;
}

._about_grapes_image_sub_wrapper ._about_grapes_image img {
    position: absolute;
    transform: rotate(-55deg);
    top: -6rem;
    left: -3rem;
    height: 600px;
    width: auto;
}

._about_grapes_image_sub_wrapper ._about_grapes_image_shadow img {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    height: 1000px;
    width: auto;
    opacity: 0.5;
}

._product_cards_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 305px);
    gap: 1.5rem;
    justify-content: space-between;
}

._product_card_wrapper {
    width: 305px;
    max-width: 305px;
    height: auto;
    position: relative;
}

._product_card_link {
    text-decoration: none;
    color: inherit;
    display: block;
}

._product_card_link:hover {
    text-decoration: none;
}

._product_card_link:hover ._product_card_image {
    transform: scale(1.2);
}

._product_title_link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

._product_title_link:hover {
    text-decoration: none;
}

._product_title_link:hover ._product_title {
    color: var(--ink_white);
    transition: color var(--theme_transition_fast);
}

._product_title {
    font-size: 20px;
    font-weight: 600;
    padding: 6px 0px;
    margin-bottom: 0px;
    cursor: pointer;
}
._product_price
{
    font-size: 24px;
    font-weight: 800;
    padding: 6px 0px; 
    margin-bottom: 0px;
}

._product_price_packaging_label_dot {
    font-size: 6px;
    vertical-align: middle;
    margin: 0 4px;
}
._product_card_image_wrapper {
    width: 100%;
    height: 380px;
    background-color: var(--theme_color_primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

._product_card_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--theme_transition_fast);
}

/* -----------------------
      PRODUCT FILTER
      ----------------------- */

._product_filter_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: relative;
    margin-top: 1rem;
    border-bottom: 1px solid var(--theme_text_muted);
}

._product_filter_item {
    position: relative;
    cursor: pointer;
    padding-bottom: 1rem;
    text-decoration: none;
    display: inline-block;
}

._product_filter_item_label {
    color: var(--theme_color_secondary);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
}

._product_filter_item.active ._product_filter_item_label {
    font-weight: 700;
    color: var(--ink_white);
}

._product_filter_item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--ink_white);
    z-index: 1;
}

/* -----------------------
      COLLECTION IMAGES
      ----------------------- */

._collection_image_wrapper {
    margin-bottom: 0;
}

._collection_image_item {
    width: 100%;
}

._collection_image {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* -----------------------
      FOOTER
      ----------------------- */

._footer {
    background: var(--theme_contrast_dark);
    width: 100%;
}
._footer_section_padding {
    padding-top: var(--theme_footer_vertical_padding_top);
    padding-bottom: var(--theme_footer_vertical_padding_bottom);
}
._footer_main {
    background: var(--theme_contrast_dark);
}

._footer_logos_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

._footer_logo_image {
    width: auto;
    height: auto;
    max-height: 100px;
}

._footer_nav_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

._footer_nav_link {
    color: var(--theme_color_secondary);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

._footer_nav_link:hover {
    color: var(--ink_white);
}

._footer_bottom {
    background: var(--ink_black);
}

._footer_copyright_wrapper {
    padding: 1.5rem 0;
}

._footer_copyright_border {
    display: none;
}

._footer_copyright_text {
    color: var(--theme_color_secondary);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    margin: 0;
}

/* -----------------------
      SIGNUP FORM
      ----------------------- */

._form_wrapper {
    padding: var(--theme_form_padding);
    margin: 2rem auto;
    max-width: 440px;
    width: 100%;
}

._form_title {
    font-size: 20px;
    font-weight: 600;
    color: var(--theme_color_secondary);
    margin-bottom: 0.5rem;
}

._form_description {
    font-size: 14px;
    font-weight: 400;
    color: var(--theme_color_secondary);
    margin-bottom: 1.5rem;
}

._form_group {
    margin-bottom: 1.5rem;
}

._form_label {
    display: block;
    color: var(--theme_color_secondary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

._form_required {
    color: var(--ink_white);
}

._form_input,
._form_select {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--theme_color_primary);
    border: 1px solid var(--theme_border_color_light);
    border-radius: var(--theme_radius_md);
    color: var(--theme_color_secondary);
    font-size: 16px;
    box-shadow: none;
    outline: none;
}

._form_input:-webkit-autofill,
._form_input:-webkit-autofill:hover,
._form_input:-webkit-autofill:focus,
._form_input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--theme_color_primary) inset !important;
    -webkit-text-fill-color: var(--theme_color_secondary) !important;
    box-shadow: 0 0 0 30px var(--theme_color_primary) inset !important;
}

._form_input::placeholder,
._form_select::placeholder {
    color: var(--theme_color_secondary);
}

._form_select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

._form_select option {
    background: var(--theme_color_primary_dark);
    color: var(--ink_white);
}

._form_error {
    color: var(--theme_color_accent);
    font-size: 12px;
    margin-top: 0.25rem;
}

._form_button_wrapper {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

._form_button_wrapper ._form_button {
    flex: 1;
    margin-top: 0;
    margin-bottom: 0;
}

._form_button {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

._form_signin_link {
    text-align: center;
    color: var(--theme_color_secondary);
    font-size: 14px;
    margin: 0;
}

._form_signin_link_text {
    color: var(--ink_white);
    text-decoration: underline;
}


._form_resend_link {
    color: var(--ink_white);
    font-size: 14px;
    text-decoration: none;
}

._form_resend_link:hover {
    text-decoration: underline;
}

._form_password_wrapper {
    position: relative;
    width: 100%;
}

._form_password_input {
    padding-right: 45px;
}

._form_password_toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--theme_color_secondary);
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

._form_password_toggle:hover {
    color: var(--ink_white);
}

._form_password_toggle i {
    font-size: 16px;
}

/* -----------------------
      FORM ILLUSTRATION
      ----------------------- */

._form_illustration_wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

._form_illustration {
    color: var(--ink_white);
}

._form_illustration img {
    width: auto;
    height: 250px;
}

/* -----------------------
      OTP VERIFICATION
      ----------------------- */

._otp_inputs_wrapper {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

._otp_input {
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    background-color: var(--theme_color_primary);
    border: 1px solid var(--theme_border_color_light);
    border-radius: var(--theme_radius_md);
    color: var(--ink_white);
    box-shadow: none;
    outline: none;
}

._otp_input:focus {
    border-color: var(--theme_color_accent);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

/* -----------------------
      PROFILE MENU
      ----------------------- */

._profile_menu_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

._profile_menu_item {
    margin-bottom: 0.5rem;
}

._profile_menu_item_logout {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--theme_border_color_light);
}

._profile_menu_link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--theme_color_secondary);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--theme_radius_md);
}

._profile_menu_link:hover {
    background: var(--theme_color_primary_dark);
    color: var(--ink_white);
}

._profile_menu_item_active ._profile_menu_link {
    background: var(--theme_color_primary_dark);
    color: var(--ink_white);
}

._profile_menu_form {
    display: block;
    width: 100%;
}

._profile_menu_link_logout {
    color: var(--theme_color_accent);
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

._profile_menu_link_logout:hover {
    color: var(--ink_white);
    background: var(--theme_color_accent);
}

/* -----------------------
      MODAL
      ----------------------- */

._modal_content {
    background: var(--theme_color_primary);
    border-radius: var(--theme_radius_lg);
    border: none;
}

._modal_header {
    border-bottom: 1px solid var(--theme_border_color_light);
    padding: 2rem 2rem 1.5rem;
}

._modal_close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

._modal_close:hover {
    opacity: 1;
}

._modal_body {
    padding: 1.5rem 2rem 2rem;
}

/* -----------------------
      PROFILE CONTENT
      ----------------------- */

._profile_content_wrapper {
    padding-left: 2rem;
}

._profile_section_card {
    height: 100%;
}

._profile_detail_item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

._profile_address_item {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--theme_border_color_light);
}

._profile_address_item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

._profile_address_actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

._profile_address_action_separator {
    color: var(--theme_text_muted);
    font-size: 14px;
}

/* -----------------------
      PRODUCT FILTER SIDEBAR
      ----------------------- */


/* Sticky filter sidebar for product index */
._filter_sidebar_wrapper {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow: hidden;
}

/* -----------------------
      SCROLLABLE WRAPPER (Global Reusable)
      ----------------------- */

._scrollable_wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--theme_color_primary_light) var(--theme_color_primary_dark);
}

/* Custom scrollbar styling for scrollable wrapper */
._scrollable_wrapper::-webkit-scrollbar {
    width: 8px;
}

._scrollable_wrapper::-webkit-scrollbar-track {
    background: var(--theme_color_primary_dark);
    border-radius: 4px;
}

._scrollable_wrapper::-webkit-scrollbar-thumb {
    background: var(--theme_color_primary_light);
    border-radius: 4px;
    transition: var(--theme_transition_fast);
}

._scrollable_wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--theme_color_secondary);
}

/* Filter specific - uses global scrollable with max-height */
._filter_scrollable_wrapper {
    max-height: calc(100vh - 100px);
}

/* Address list specific - uses global scrollable with max-height */
._address_list_scrollable {
    max-height: 300px;
}

._filter_card {
    margin-bottom: 1.5rem;
    overflow: hidden;
}

._filter_card_title {
    font-size: 20px;
    font-weight: 600;
    color: var(--theme_color_secondary);
    background: var(--theme_color_primary_light);
    padding: 1rem 1.5rem;
    margin: 0;
}

._filter_card ._filter_options {
    padding: 1.5rem;
}

._filter_options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

._filter_checkbox_item,
._filter_radio_item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


._filter_checkbox_item input[type="checkbox"],
._filter_radio_item input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--theme_color_primary_light);
}

._filter_checkbox_label,
._filter_radio_label {
    font-size: 16px;
    font-weight: 400;
    color: var(--theme_color_secondary);
    margin: 0;
    cursor: pointer;
}

._filter_checkbox_label_active {
    color: var(--theme_color_primary_light);
    font-weight: 600;
}

/* -----------------------
      ADDRESS CARD SELECTION
      ----------------------- */

._address_card_wrapper {
    display: block;
    cursor: pointer;
    margin: 0;
}

._address_card_wrapper ._filter_radio_item {
    align-items: flex-start;
    gap: 0;
}

._address_card_wrapper ._filter_radio_item input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

._card_base._address_card {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

._address_card {
    flex: 1;
    border: 2px solid transparent;
    transition: border-color var(--theme_transition_fast);
    cursor: pointer;
}

._address_card:hover {
    border-color: var(--theme_color_primary_light);
}

._address_card_selected {
    border-color: var(--theme_color_primary_light);
    border-width: 2px;
}

/* Address list specific - uses global scrollable with max-height */
._address_list_scrollable {
    max-height: 300px;
}

/* -----------------------
      PRODUCT DETAIL
      ----------------------- */

._product_detail_image_wrapper {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

._product_detail_thumbnails {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

._product_detail_thumbnail_item {
    width: 80px;
    height: 80px;
    background: var(--theme_color_primary);
    border-radius: var(--theme_radius_md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
}

._product_detail_thumbnail_item:hover {
    border-color: var(--theme_color_primary_light);
}

._product_detail_thumbnail_item.active {
    border-color: var(--theme_color_primary_light);
    border-width: 2px;
}

._product_detail_thumbnail_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

._product_detail_main_image_wrapper {
    flex: 1;
    background: transparent;
    border-radius: var(--theme_radius_lg);
    padding: 0px 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

._product_detail_main_image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
}

._product_detail_quantity_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--ink_white);
    border-radius: var(--theme_radius_md);
    padding: 16px 8px;
    width: 100px;
    box-sizing: border-box;
}

._product_detail_quantity_btn {
    height: 24px;
    width: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--theme_color_primary);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme_color_primary);
    cursor: pointer;
    transition: var(--theme_transition_fast);
    padding: 0;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}
._product_detail_quantity_btn span {
    font-size: 14px;
    margin-top: -2px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
._product_detail_quantity_btn:hover {
    background: var(--theme_color_primary_dark);
    color: var(--ink_white);
    border-color: var(--theme_color_primary_dark);
}

._product_detail_quantity_input {
    flex: 1;
    min-width: 0;
    max-width: 30px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme_color_primary);
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

._product_detail_quantity_input::-webkit-outer-spin-button,
._product_detail_quantity_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}


/* _section_divider replaced by _divider_hr */

._product_detail_section {
    margin-bottom: 2rem;
}


/* -----------------------
      PRODUCT DETAILS TABLE
      ----------------------- */

._product_details_table {
    width: auto;
    max-width: 66.666%;
    border-collapse: collapse;
    border: none;
}

._product_details_table tr {
    border: none;
}

._product_details_table td {
    padding: 0.5rem 0;
    font-size: 14px;
    color: var(--theme_color_secondary);
    border: none;
    vertical-align: top;
}

._product_details_table td:first-child {
    font-weight: 500;
    padding-right: 2rem;
    white-space: nowrap;
}

._product_details_table td:last-child {
    font-weight: 700;
    text-align: left;
    color: var(--ink_white);
}

/* -----------------------
      RATINGS & REVIEWS
      ----------------------- */

._rating_summary_card {
    background: var(--theme_color_primary_light);
    text-align: center;
}


._rating_summary_score {
    font-size: 48px;
    font-weight: 700;
    color: var(--ink_white);
    margin-bottom: 0.5rem;
}

._rating_stars {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    color: #FFD700;
    font-size: 20px;
}

._rating_stars_sm {
    display: flex;
    gap: 0.25rem;
    color: var(--ink_white);
    font-size: 14px;
}
._rating_stars_sm i {
    color: var(--theme_color_secondary);
    font-size: 20px;
}


._review_card_bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

/* Height and flex properties moved to base class usage */


/* -----------------------
      CART PAGE
      ----------------------- */


._cart_table_wrapper {
    /* background: var(--theme_color_primary); */
    border-radius: var(--theme_radius_lg);
    margin-bottom: 2rem;
}

._cart_table_wrapper .table-responsive {
    overflow-x: auto;
}

._cart_table_wrapper .table,
._cart_table_wrapper ._cart_table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink_white);
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--ink_white) !important;
    --bs-body-bg: transparent !important;
}

._cart_table_wrapper .table thead,
._cart_table_wrapper .table tbody,
._cart_table_wrapper .table tr {
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
}

._cart_table thead th,
._cart_table_header {
    font-size: 20px;
    font-weight: 400;
    color: var(--theme_color_secondary);
    padding: 1rem 0;
    border-bottom: 1px solid var(--theme_border_color_light);
    text-align: left;
    border-top: none;
}

._cart_table tbody tr,
._cart_table_row {
    border-bottom: 1px solid var(--theme_border_color_light);
}

._cart_table tbody tr:last-child,
._cart_table_row:last-child {
    border-bottom: none;
}

._cart_table td,
._cart_table_cell {
    padding: 1.5rem 0;
    vertical-align: middle;
    border-top: none;
}

._cart_table_footer_row {
    border-top: 1px solid var(--theme_border_color_light);
}

._cart_table_footer_cell {
    vertical-align: middle;
    border-top: none;
    background-color: var(--theme_color_primary) !important;

}
._cart_table_footer_cell:first-child {
    padding-left: 8px !important;
}
/* _cart_footer_text replaced by _text_description_sm */

/* -----------------------
   TOASTR NOTIFICATION
   ----------------------- */
#toast-container.toast-top-right {
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

#toast-container > div {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#toast-container > .toast-success {
    background-color: var(--theme_color_primary_light) !important;
}

._product_price_packaging_label_dot {
    font-size:12px !important;
    font-weight: 600;
    margin: 0 1rem;
}