/* 20260206002326 - v2 */
.gui,
.gui-block-linklist li a {
  color: #666666;
}

.gui-page-title,
.gui a.gui-bold,
.gui-block-subtitle,
.gui-table thead tr th,
.gui ul.gui-products li .gui-products-title a,
.gui-form label,
.gui-block-title.gui-dark strong,
.gui-block-title.gui-dark strong a,
.gui-content-subtitle {
  color: #000000;
}

.gui-block-inner strong {
  color: #848484;
}

.gui a {
  color: #0a8de9;
}

.gui-input.gui-focus,
.gui-text.gui-focus,
.gui-select.gui-focus {
  border-color: #0a8de9;
  box-shadow: 0 0 2px #0a8de9;
}

.gui-select.gui-focus .gui-handle {
  border-color: #0a8de9;
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
  border-color: #8d8d8d;
}

.gui-block-title {
  color: #333333;
  background-color: #ffffff;
}

.gui-content-title {
  color: #333333;
}

.gui-form .gui-field .gui-description span {
  color: #666666;
}

.gui-block-inner {
  background-color: #f4f4f4;
}

.gui-block-option {
  border-color: #ededed;
  background-color: #f9f9f9;
}

.gui-block-option-block {
  border-color: #ededed;
}

.gui-block-title strong {
  color: #333333;
}

.gui-line,
.gui-cart-sum .gui-line {
  background-color: #cbcbcb;
}

.gui ul.gui-products li {
  border-color: #dcdcdc;
}

.gui-block-subcontent,
.gui-content-subtitle {
  border-color: #dcdcdc;
}

.gui-faq,
.gui-login,
.gui-password,
.gui-register,
.gui-review,
.gui-sitemap,
.gui-block-linklist li,
.gui-table {
  border-color: #dcdcdc;
}

.gui-block-content .gui-table {
  border-color: #ededed;
}

.gui-table thead tr th {
  border-color: #cbcbcb;
  background-color: #f9f9f9;
}

.gui-table tbody tr td {
  border-color: #ededed;
}

.gui a.gui-button-large,
.gui a.gui-button-small {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large.gui-button-action,
.gui a.gui-button-small.gui-button-action {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large:active,
.gui a.gui-button-small:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui-input,
.gui-text,
.gui-select,
.gui-number {
  border-color: #8d8d8d;
  background-color: #ffffff;
}

.gui-select .gui-handle,
.gui-number .gui-handle {
  border-color: #8d8d8d;
}

.gui-number .gui-handle a {
  background-color: #ffffff;
}

.gui-input input,
.gui-number input,
.gui-text textarea,
.gui-select .gui-value {
  color: #000000;
}

.gui-progressbar {
  background-color: #76c61b;
}

/* custom */
/* =====================================================
   Garland Camera – Modern B&H-style UI
   FULL COMBINED STYLESHEET
   Light default + Header Toggle Dark Mode
   ===================================================== */


/* =====================================================
   THEME TOKENS
   ===================================================== */

:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(15,23,42,.12);
  --shadow:0 10px 30px rgba(2,6,23,.10);

  --accent:#d0021b;
  --accent-2:#111827;

  --radius:14px;
  --radius-sm:10px;

  --max:1200px;
  --tap:44px;

  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}


/* =====================================================
   DARK MODE VARIABLES (toggle via html[data-theme="dark"])
   ===================================================== */

html[data-theme="dark"]{
  --bg:#0b1220;
  --panel:#0f172a;
  --text:#e5e7eb;
  --muted:#a3b0c2;
  --border:rgba(226,232,240,.14);
  --shadow:0 14px 40px rgba(0,0,0,.45);

  --accent:#ff2d47;
  --accent-2:#e5e7eb;

  color-scheme:dark;
}


/* =====================================================
   BASE
   ===================================================== */

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

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

a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  color:var(--accent);
}

main,.container,.wrapper{
  max-width:var(--max);
  margin:auto;
}

section{
  padding:22px 0;
}

hr{
  border:0;
  border-top:1px solid var(--border);
}


/* =====================================================
   BUTTONS
   ===================================================== */

button,.btn,.button{
  min-height:var(--tap);
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}

button:hover,.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.btn-primary,.primary{
  background:var(--accent);
  color:#fff;
  border:none;
}


/* =====================================================
   INPUTS
   ===================================================== */

input,select,textarea{
  min-height:var(--tap);
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:10px 14px;
}


/* =====================================================
   HEADER / NAV
   ===================================================== */

header,.site-header,.main-header{
  position:sticky;
  top:0;
  z-index:50;

  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--border);
}

nav a{
  font-weight:700;
  padding:10px 12px;
  border-radius:10px;
}

nav a:hover{
  background:var(--panel);
}

.main-header__dropdown{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}


/* =====================================================
   HERO
   ===================================================== */

.hero,.slideshow{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}


/* =====================================================
   CATEGORY + PRODUCT CARDS
   ===================================================== */

[class*="category"] a,
.product-card{
  display:block;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:.15s ease;
}

[class*="category"] a:hover,
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.price{
  font-weight:900;
}


/* =====================================================
   FOOTER  (auto dark + thinner + 2-column categories)
   ===================================================== */

footer,.main-footer{
  background:var(--bg);
  color:var(--muted);
  border-top:1px solid var(--border);
  padding:28px 0; /* thinner */
}

.main-footer__link{
  color:var(--text);
  opacity:.9;
}
.main-footer__link:hover{
  color:var(--accent);
}

.main-footer__content{
  gap:28px;
}

.main-footer__colophon{
  padding:14px 0;
  border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 95%,transparent);
}


/* categories → 2 columns */
.main-footer ul{
  columns:2;
  column-gap:24px;
}
.main-footer li{
  break-inside:avoid;
  margin-bottom:6px;
}


/* social */
.main-footer__social-btn{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:999px;
  padding:8px;
}
.main-footer__social-btn:hover{
  box-shadow:var(--shadow);
}


/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:900px){

  section{
    padding:16px 0;
  }

  nav a{
    padding:12px 14px;
  }

  .hero{
    border-radius:var(--radius-sm);
  }
}


/* =====================================================
   ===============================================
   HEADER DARK MODE FIX  ⭐ IMPORTANT
   fixes your “text not white” problem
   MUST BE LAST
   ===============================================
   ===================================================== */

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .site-header{
  background:var(--panel);
  color:var(--text);
}

/* force header text + icons light */
html[data-theme="dark"] .main-header *,
html[data-theme="dark"] .main-header svg{
  color:var(--text) !important;
  fill:currentColor !important;
}

/* hover accent */
html[data-theme="dark"] .main-header a:hover{
  color:var(--accent) !important;
}

/* dropdowns */
html[data-theme="dark"] .main-header__dropdown{
  background:var(--panel) !important;
  border-color:var(--border) !important;
}

/* search */
html[data-theme="dark"] .main-header__search-form,
html[data-theme="dark"] input{
  background:var(--panel) !important;
  color:var(--text) !important;
}

/* cart bubble */
html[data-theme="dark"] .counter{
  background:var(--accent);
  color:#0b1220;
}

/* fix Lightspeed gray text */
html[data-theme="dark"] .color-contrast-medium,
html[data-theme="dark"] .text-black{
  color:var(--text) !important;
}

/* =====================================================
   MOBILE MENU / HAMBURGER DARK MODE FIX
   Add this BELOW your current last block
   ===================================================== */

html[data-theme="dark"] .main-header__nav,
html[data-theme="dark"] .main-header__nav .bg,
html[data-theme="dark"] .main-header__nav .main-header__dropdown,
html[data-theme="dark"] .main-header__nav .dropdown__menu,
html[data-theme="dark"] .main-header__nav .submenu,
html[data-theme="dark"] .main-header__nav [class*="dropdown"]{
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* mobile nav links inside dropdown/drawer */
html[data-theme="dark"] .main-header__nav a,
html[data-theme="dark"] .main-header__nav .main-header__link,
html[data-theme="dark"] .main-header__nav .main-header__dropdown-link{
  color: var(--text) !important;
}

/* hamburger icon lines / menu icon */
html[data-theme="dark"] .anim-menu-btn,
html[data-theme="dark"] .anim-menu-btn__icon,
html[data-theme="dark"] .anim-menu-btn__icon::before,
html[data-theme="dark"] .anim-menu-btn__icon::after{
  color: var(--text) !important;
  background-color: currentColor !important;
}

/* if your theme uses borders/separators in the mobile menu */
html[data-theme="dark"] .main-header__nav .separator,
html[data-theme="dark"] .main-header__nav hr{
  border-color: var(--border) !important;
}

/* =====================================================
   MOBILE MENU “OVERALL PANEL” DARK MODE FIX
   Put this at the VERY BOTTOM
   ===================================================== */

/* the whole nav area that opens on mobile */
html[data-theme="dark"] .main-header__nav,
html[data-theme="dark"] .main-header__nav-grid,
html[data-theme="dark"] .main-header__nav .container,
html[data-theme="dark"] .main-header__nav [class*="nav-grid"],
html[data-theme="dark"] .main-header__nav [class*="nav"]{
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* the mobile menu list wrapper (often the big light block) */
html[data-theme="dark"] .main-header__list--mobile-items,
html[data-theme="dark"] .main-header__list--mobile-items > li,
html[data-theme="dark"] .main-header__list--mobile-items ul{
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* if theme uses generic “bg” classes inside the opened menu */
html[data-theme="dark"] .main-header__nav .bg,
html[data-theme="dark"] .main-header__nav .bg-white,
html[data-theme="dark"] .main-header__nav [style*="background:#fff"],
html[data-theme="dark"] .main-header__nav [style*="background: #fff"],
html[data-theme="dark"] .main-header__nav [style*="background:white"],
html[data-theme="dark"] .main-header__nav [style*="background: white"]{
  background: var(--panel) !important;
}

/* separators/borders in the menu */
html[data-theme="dark"] .main-header__nav li,
html[data-theme="dark"] .main-header__nav .main-header__item,
html[data-theme="dark"] .main-header__nav .main-header__dropdown-item{
  border-color: var(--border) !important;
}

/* some themes put a backdrop overlay behind the mobile menu */
html[data-theme="dark"] .js-main-header::before,
html[data-theme="dark"] .main-header::before,
html[data-theme="dark"] .overlay,
html[data-theme="dark"] .backdrop{
  background: rgba(0,0,0,.55) !important;
}

/* =====================================================
   DARK MODE: HAMBURGER BUTTON (anim-menu-btn) FIX
   Put this at the VERY BOTTOM
   ===================================================== */

html[data-theme="dark"] .anim-menu-btn,
html[data-theme="dark"] .main-header__nav-control,
html[data-theme="dark"] .js-anim-menu-btn{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* Make sure the hamburger/close icon uses currentColor */
html[data-theme="dark"] .anim-menu-btn__icon,
html[data-theme="dark"] .main-header__nav-control i,
html[data-theme="dark"] .js-anim-menu-btn i{
  color: var(--text) !important;
}

/* If the icon is drawn with pseudo-elements, force them too */
html[data-theme="dark"] .anim-menu-btn__icon::before,
html[data-theme="dark"] .anim-menu-btn__icon::after,
html[data-theme="dark"] .main-header__nav-control::before,
html[data-theme="dark"] .main-header__nav-control::after{
  background: var(--text) !important;
}

/* Optional: nicer hover in dark mode */
html[data-theme="dark"] .anim-menu-btn:hover,
html[data-theme="dark"] .main-header__nav-control:hover,
html[data-theme="dark"] .js-anim-menu-btn:hover{
  box-shadow: var(--shadow) !important;
}

/* =====================================================
   DARK MODE: CART / BAG ICON FIX
   (prevents white square + restores icon contrast)
   MUST BE LAST
   ===================================================== */

/* cart button container */
html[data-theme="dark"] .main-header__link--icon,
html[data-theme="dark"] .main-header__mobile-btn[aria-controls="cartDrawer"]{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* the bag svg itself */
html[data-theme="dark"] .main-header__link--icon svg,
html[data-theme="dark"] .main-header__mobile-btn svg{
  stroke: currentColor !important;
  fill: none !important;
  color: var(--text) !important;
}

/* hover */
html[data-theme="dark"] .main-header__link--icon:hover,
html[data-theme="dark"] .main-header__mobile-btn:hover{
  box-shadow: var(--shadow) !important;
}

/* cart counter bubble */
html[data-theme="dark"] .counter{
  background: var(--accent) !important;
  color: #0b1220 !important;
  border: none !important;
}

/* =====================================================
   DARK MODE: POPUP CART / DRAWER (#cartDrawer)
   MUST BE LAST
   ===================================================== */

html[data-theme="dark"] #cartDrawer,
html[data-theme="dark"] .dr-cart{
  color: var(--text);
}

/* Drawer panel */
html[data-theme="dark"] #cartDrawer .drawer__content{
  background: var(--panel) !important;
  color: var(--text) !important;
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Any theme utility classes that force light backgrounds */
html[data-theme="dark"] #cartDrawer .bg,
html[data-theme="dark"] #cartDrawer .bg-white{
  background: var(--panel) !important;
}

/* Header + footer inside drawer */
html[data-theme="dark"] #cartDrawer header,
html[data-theme="dark"] #cartDrawer footer{
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Close button + icons */
html[data-theme="dark"] #cartDrawer button,
html[data-theme="dark"] #cartDrawer .drawer__close-btn{
  background: transparent !important;
  color: var(--text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #cartDrawer svg{
  color: var(--text) !important;
  stroke: currentColor !important;
}

/* Product rows */
html[data-theme="dark"] #cartDrawer .dr-cart__product{
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] #cartDrawer .dr-cart__product:last-child{
  border-bottom: 0;
}

/* Muted text inside cart (variants, "empty", etc.) */
html[data-theme="dark"] #cartDrawer .color-contrast-medium,
html[data-theme="dark"] #cartDrawer .text-contrast-medium,
html[data-theme="dark"] #cartDrawer .text-muted{
  color: var(--muted) !important;
}

/* Links in cart */
html[data-theme="dark"] #cartDrawer a{
  color: var(--text);
}
html[data-theme="dark"] #cartDrawer a:hover{
  color: var(--accent);
}

/* Buttons inside drawer */
html[data-theme="dark"] #cartDrawer .btn{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] #cartDrawer .btn--primary,
html[data-theme="dark"] #cartDrawer .btn-primary{
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Payment icons area */
html[data-theme="dark"] #cartDrawer img{
  filter: brightness(.92) contrast(1.05);
}