/* =========================================================
   HORIZON THEME LAYER
   Default light mode with a persistent dark-mode switch.
   This file intentionally loads after each page stylesheet.
   ========================================================= */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --ink:          #f6f7fb;
  --ink-2:        #ffffff;
  --ink-3:        #f1f4f9;
  --ink-4:        #e7ecf5;
  --surface:      #ffffff;
  --border:       rgba(12, 18, 32, 0.10);
  --border-2:     rgba(12, 18, 32, 0.18);
  --accent:       #f0a500;
  --accent-2:     #c98500;
  --accent-dim:   rgba(240, 165, 0, 0.14);
  --accent-glow:  rgba(240, 165, 0, 0.24);
  --red:          #e8192c;
  --red-dim:      rgba(232, 25, 44, 0.10);
  --green:        #16a34a;
  --green-dim:    rgba(22, 163, 74, 0.12);
  --txt-1:        #0b1220;
  --txt-2:        #455066;
  --txt-3:        #788397;
  --txt-inv:      #ffffff;
  --primary:      #f0a500;
  --thirdly:      #2563eb;
  --white:        #ffffff;
  --secondery:    #0b1220;
  --page-bg:
    radial-gradient(circle at 14% 0%, rgba(240, 165, 0, 0.10), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(37, 99, 235, 0.09), transparent 30%),
    linear-gradient(180deg, #fbfcff 0%, #f6f7fb 42%, #eef2f8 100%);
  --card-bg:      rgba(255, 255, 255, 0.92);
  --card-bg-solid:#ffffff;
  --field-bg:     #ffffff;
  --field-border: rgba(12, 18, 32, 0.14);
  --header-bg:    rgba(255, 255, 255, 0.88);
  --header-bg-solid: #ffffff;
  --header-bg-scrolled: rgba(255, 255, 255, 0.70);
  --nav-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,252,0.98));
  --image-bg:     #ffffff;
  --soft-shadow:  0 16px 44px rgba(15, 23, 42, 0.09);
  --hover-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  --shadow-menu:  0 18px 42px rgba(15, 23, 42, 0.18);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink:          #08090d;
  --ink-2:        #0f1117;
  --ink-3:        #161820;
  --ink-4:        #1e2130;
  --surface:      #242840;
  --border:       rgba(255,255,255,0.07);
  --border-2:     rgba(255,255,255,0.13);
  --accent:       #f0a500;
  --accent-2:     #d99200;
  --accent-dim:   rgba(240,165,0,0.12);
  --accent-glow:  rgba(240,165,0,0.22);
  --red:          #e8192c;
  --red-dim:      rgba(232,25,44,0.12);
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,0.10);
  --txt-1:        #f0f1f5;
  --txt-2:        #9399ae;
  --txt-3:        #52576a;
  --txt-inv:      #07080b;
  --primary:      #f0a500;
  --thirdly:      #7ea7ff;
  --white:        #161820;
  --secondery:    #f0f1f5;
  --page-bg:      #08090d;
  --card-bg:      rgba(22, 24, 32, 0.96);
  --card-bg-solid:#161820;
  --field-bg:     #0f1117;
  --field-border: rgba(255,255,255,0.10);
  --header-bg:    rgba(8,9,13,0.96);
  --header-bg-solid: #08090d;
  --header-bg-scrolled: rgba(8,9,13,0.62);
  --nav-panel-bg: linear-gradient(180deg, rgba(22,24,32,0.99), rgba(8,9,13,0.99));
  --image-bg:     #ffffff;
  --soft-shadow:  0 14px 34px rgba(0,0,0,0.24);
  --hover-shadow: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-menu:  0 18px 40px rgba(0,0,0,0.42);
}

html,
body {
  background: var(--page-bg);
}

body {
  color: var(--txt-1);
  transition: background-color var(--t-med), color var(--t-med);
}

/* ===== Theme Toggle ===== */
.theme_toggle_btn {
  min-width: 94px;
  height: 44px;
  border-radius: var(--r);
  background: var(--ink-3);
  border: 1.5px solid var(--border);
  color: var(--txt-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
}

.theme_toggle_btn:hover {
  background: var(--ink-4);
  border-color: var(--border-2);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}

.theme_toggle_text {
  min-width: 33px;
  text-align: left;
}

.theme_toggle_track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.13);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: background var(--t), box-shadow var(--t);
}

.theme_toggle_knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
  transition: transform var(--t-med), background var(--t);
}

html[data-theme="dark"] .theme_toggle_track {
  background: rgba(240, 165, 0, 0.20);
  box-shadow: inset 0 0 0 1px rgba(240, 165, 0, 0.18);
}

html[data-theme="dark"] .theme_toggle_knob {
  transform: translateX(14px);
  background: #f0f1f5;
}

html[data-theme="light"] .top_hero_brand::after {
  opacity: 0.28;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .top_hero_brand_word {
  color: #111827;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.86),
    0 8px 24px rgba(15, 23, 42, 0.10);
}

/* ===== Shared Shell ===== */
.site_header {
  background: var(--header-bg);
  border-bottom-color: var(--border);
}

body.page_index2.header_scrolled .site_header {
  background: var(--header-bg-scrolled);
  border-bottom-color: var(--border);
  box-shadow: var(--soft-shadow);
}

body.page_index2.cart_is_open .site_header {
  background: var(--header-bg-solid);
}

.fastNav,
footer {
  background: var(--ink-2);
  border-color: var(--border);
}

.side_nav,
.translate_menu,
.side_nav .side_nav_sub {
  background: var(--nav-panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-menu);
}

.top_hero_search_center input,
.side_nav_search,
.translate_btn,
.top_hero_link,
.top_hero_cart_btn,
.side_nav_close,
.cart_drawer_close {
  background: var(--ink-3);
  border-color: var(--border);
  color: var(--txt-1);
}

.top_hero_search_center input:focus,
.side_nav_search:focus-within,
.translate_btn:hover,
.translate_wrap.is_open .translate_btn,
.top_hero_link:hover,
.top_hero_cart_btn:hover,
.side_nav_close:hover {
  background: var(--ink-4);
  border-color: var(--border-2);
}

html[data-theme="light"] .top_hero_cart_btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #07111f;
}

.translate_option:hover,
.side_nav_btn:hover,
.side_nav_item:hover,
.side_nav_sub_item:hover,
.side_nav_sub_btn:hover,
.side_nav_has_sub.nav_open > .side_nav_btn {
  background: rgba(37, 99, 235, 0.07);
  border-color: var(--border);
}

html[data-theme="dark"] .translate_option:hover,
html[data-theme="dark"] .side_nav_btn:hover,
html[data-theme="dark"] .side_nav_item:hover,
html[data-theme="dark"] .side_nav_sub_item:hover,
html[data-theme="dark"] .side_nav_sub_btn:hover,
html[data-theme="dark"] .side_nav_has_sub.nav_open > .side_nav_btn {
  background: rgba(255,255,255,0.04);
}

/* ===== Cards & Product Lists ===== */
.hero_banner_section,
.p_card,
.cat_head,
.cat_filters,
.search_head,
.search_bar,
.search_filters,
.search_info,
.search_empty,
.checkout_head,
.ck_card,
.pdp_gallery,
.pdp_info,
.pdp_tabs,
.pdp_hi,
.pdp_feat,
.pdp_trust_item,
.pdp_bullets div,
.ship_card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: var(--soft-shadow);
}

.p_card:hover,
.cat_filters:hover,
.search_filters:hover {
  box-shadow: var(--hover-shadow);
}


html[data-theme="light"] .hero_banner_eyebrow {
  background: var(--accent);
  border: 0;
  color: #07111f;
  box-shadow: 0 8px 22px rgba(240,165,0,0.20);
}

html[data-theme="light"] .hero_banner_title {
  color: #ffffff;
  text-shadow:
    0 2px 20px rgba(0,0,0,0.55),
    0 14px 34px rgba(2, 6, 23, 0.32);
}

html[data-theme="light"] .hero_banner_desc {
  color: rgba(255,255,255,0.82);
  text-shadow: 0 2px 14px rgba(0,0,0,0.42);
}

html[data-theme="light"] .hero_banner_btn {
  color: #07111f;
  box-shadow: 0 10px 24px rgba(240,165,0,0.24);
}

.p_media,
.pdp_main,
.pdp_thumb,
.ck_item_img,
.search_grid.is_list .p_media {
  background: var(--image-bg);
  border-color: var(--border);
}

.p_media::after {
  background: linear-gradient(to bottom, transparent 58%, rgba(15, 23, 42, 0.10) 100%);
}

html[data-theme="dark"] .p_media::after {
  background: linear-gradient(to bottom, transparent 55%, rgba(8,9,13,0.3) 100%);
}

.p_title,
.section_title,
.cat_title,
.cat_filters_head b,
.search_title,
.search_filters_head b,
.pdp_title,
.pdp_feat span,
.pdp_rating .rate,
.checkout_title,
.ck_card_head h2,
.ck_delivery_title,
.ck_ship_top b,
.ck_item_name,
.ck_total_row,
.ck_field label,
.ck_ship_content,
.checkout_secure {
  color: var(--txt-1);
}

.p_brand,
.cat_sub,
.cat_sort label,
.search_sub,
.search_info_left,
.search_sort label,
.search_form i,
.pdp_sku,
.pdp_desc,
.ship_card p,
.checkout_sub,
.ck_hint,
.ck_terms,
.ck_note .ck_note_line,
.ck_ship_content p,
.ck_total_row .muted,
.ck_item_meta {
  color: var(--txt-2);
}

.p_price .old,
.cat_sep,
.search_sep,
.pdp_price .old,
.pdp_hi span,
.pdp_trust_item span {
  color: var(--txt-3);
}

.p_btn.souldout {
  background: var(--ink-4);
  color: var(--txt-3);
  border-color: var(--border);
}

html[data-theme="light"] .p_btn.buy_now {
  background: var(--green);
  color: #ffffff;
  border-color: rgba(22, 163, 74, 0.34);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.17);
}

html[data-theme="light"] .p_btn.buy_now:hover {
  background: #12813c;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.24);
}

/* Keep add-to-cart gold; only Acheter becomes green in white mode. */
html[data-theme="light"] .p_btn.add {
  background: var(--accent);
  color: #07111f;
}

html[data-theme="dark"] .p_btn.add,
html[data-theme="dark"] .p_btn.buy_now {
  background: var(--accent);
  color: var(--txt-inv);
}

/* ===== Forms, Filters, Checkout ===== */
.cat_sort,
.cat_sort select,
.cat_filter_btn,
.search_sort,
.search_sort select,
.search_filter_btn,
.search_view_btn,
.search_form,
.ck_delivery_box,
.ck_field input,
.ck_field select,
.ck_field textarea,
.ck_ship_option,
.ck_remove,
.ck_qty,
.ck_item,
.ck_note .ck_note_line,
.pdp_q_field input,
.pdp_q_field select,
.pdp_q_field textarea,
.pdp_q_ship_opt,
.qty {
  background: var(--field-bg);
  border-color: var(--field-border);
  color: var(--txt-1);
}

.search_form input,
.cat_sort select,
.search_sort select,
.ck_field input,
.ck_field select,
.ck_field textarea,
.ck_qty_input,
.pdp_q_field input,
.pdp_q_field select,
.pdp_q_field textarea,
.qty_input {
  color: var(--txt-1);
}

.search_form input::placeholder,
.ck_field input::placeholder,
.ck_field textarea::placeholder,
.pdp_q_field input::placeholder,
.pdp_q_field textarea::placeholder {
  color: var(--txt-3);
}

.cat_sort select:focus,
.search_sort select:focus,
.search_form:focus-within,
.ck_field input:focus,
.ck_field select:focus,
.ck_field textarea:focus,
.pdp_q_field input:focus,
.pdp_q_field select:focus,
.pdp_q_field textarea:focus {
  background: var(--ink-2);
  border-color: rgba(240,165,0,0.42);
  box-shadow: 0 0 0 3px rgba(240,165,0,0.10);
}

.ck_totals,
.pdp_q_summary {
  border-top-color: var(--border);
}

.ck_place_btn,
.pdp_quick_submit,
.cart_checkout_btn,
.search_submit {
  background: var(--accent);
  color: #07111f;
}

/* Product quick order: dark mode keeps the original light card, light mode uses a dark standout card. */
html[data-theme="dark"] .pdp_quick_order {
  background: #ffffff;
  border-color: rgba(12, 18, 32, 0.10);
  box-shadow: var(--soft-shadow);
}

html[data-theme="dark"] .pdp_quick_head h3,
html[data-theme="dark"] .pdp_quick_head p,
html[data-theme="dark"] .pdp_q_field label,
html[data-theme="dark"] .pdp_q_ship_opt span,
html[data-theme="dark"] .pdp_q_sum_row {
  color: #0b1220;
}

html[data-theme="dark"] .pdp_q_field input,
html[data-theme="dark"] .pdp_q_field select,
html[data-theme="dark"] .pdp_q_field textarea,
html[data-theme="dark"] .pdp_q_ship_opt {
  background: #ffffff;
  color: #0b1220;
  border-color: rgba(12, 18, 32, 0.14);
}

html[data-theme="light"] .pdp_quick_order {
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(8, 13, 24, 0.98));
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
}

html[data-theme="light"] .pdp_quick_head h3,
html[data-theme="light"] .pdp_q_field label,
html[data-theme="light"] .pdp_q_ship_opt span,
html[data-theme="light"] .pdp_q_sum_row {
  color: #f8fafc;
}

html[data-theme="light"] .pdp_quick_head p {
  color: #cbd5e1;
}

html[data-theme="light"] .pdp_q_field input,
html[data-theme="light"] .pdp_q_field select,
html[data-theme="light"] .pdp_q_field textarea {
  background: rgba(255,255,255,0.96);
  color: #0b1220;
  border-color: rgba(255,255,255,0.18);
}

html[data-theme="light"] .pdp_q_field input::placeholder,
html[data-theme="light"] .pdp_q_field textarea::placeholder {
  color: #64748b;
}

html[data-theme="light"] .pdp_q_field input:focus,
html[data-theme="light"] .pdp_q_field select:focus,
html[data-theme="light"] .pdp_q_field textarea:focus {
  background: #ffffff;
  border-color: rgba(240,165,0,0.48);
  box-shadow: 0 0 0 3px rgba(240,165,0,0.16);
}

html[data-theme="light"] .pdp_q_ship_opt {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: #f8fafc;
}

html[data-theme="light"] .pdp_q_ship_opt b,
html[data-theme="light"] .pdp_q_sum_row strong,
html[data-theme="light"] .pdp_q_sum_row.total strong,
html[data-theme="light"] .pdp_q_sum_row.total span {
  color: #f0a500;
}

/* ===== Cart Drawer ===== */
.cart_drawer {
  background: var(--ink-2);
  border-left-color: var(--border);
}

.cart_item {
  background: var(--card-bg);
  border-color: var(--border);
}

.cart_item_media,
.cart_qty {
  background: var(--ink);
  border-color: var(--border);
}

.cart_remove {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--txt-2);
}

html[data-theme="light"] .cart_remove {
  background: #ffffff;
}

/* ===== Scrollbars ===== */
.side_nav_scroll,
.side_nav_sub,
.cart_drawer_body {
  scrollbar-color: rgba(240,165,0,0.42) transparent;
}

.side_nav_scroll::-webkit-scrollbar,
.side_nav_sub::-webkit-scrollbar,
.cart_drawer_body::-webkit-scrollbar {
  width: 8px;
}

.side_nav_scroll::-webkit-scrollbar-track,
.side_nav_sub::-webkit-scrollbar-track,
.cart_drawer_body::-webkit-scrollbar-track {
  background: transparent;
}

.side_nav_scroll::-webkit-scrollbar-thumb,
.side_nav_sub::-webkit-scrollbar-thumb,
.cart_drawer_body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(240,165,0,0.70), rgba(37,99,235,0.34));
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

/* ===== Responsive Header ===== */
@media (max-width: 768px) {
  .top_hero {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  }

  .theme_toggle_btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
  }

  .theme_toggle_text {
    display: none;
  }
}

@media (max-width: 380px) {
  .top_hero {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  }

  .theme_toggle_btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
  }

  .theme_toggle_track {
    width: 30px;
  }

  html[data-theme="dark"] .theme_toggle_knob {
    transform: translateX(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme_toggle_btn,
  .theme_toggle_track,
  .theme_toggle_knob,
  body {
    transition: none !important;
  }
}