/* =========================
   CSS Variables
========================= */
:root {
  --lp-bg: #0f1113;
  --lp-ink: #e7e7e7;
  --lp-accent: #b38b59;
  --text: #ffffff;
  --solid: #2a2c2e;
  --overlay: rgba(0, 0, 0, 0.6);
  --soft: rgba(255, 255, 255, 0.08);
  --danger: #8B0000;
  --price-red: #FF4242;
}

/* =========================
   Custom Font
========================= */
@font-face {
  font-family: 'Lucidity';
  src: url('https://dl.dropboxusercontent.com/scl/fi/1z4121t5757o1qfb64nh4/Lucidity-Expand.ttf?rlkey=l5sh194v3tugaj3asf0vnhwx6&st=zz24z2gp&dl=1') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Global Reset
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================
   Base Styles
========================= */
html,
body {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  overflow-x: hidden;
  font-family: 'CustomFont', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
}

body {
  background-image: url("https://i.imgur.com/4vUOvPX.jpeg");
  padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px)) !important;
  font-family: 'Lucidity', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
}

/* Apply font to all elements */
* {
  font-family: 'Lucidity', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !important;
}

/* Footer contacts - smaller font */
.s-contacts-item,
.s-contacts-item *,
a.s-contacts-item,
footer a[href^="tel:"],
footer a[href^="mailto:"],
.store-footer a {
  font-size: 0.85em !important;
  line-height: 1.4 !important;
}

/* Unlock scroll on loading states */
html.no-scroll,
body.no-scroll,
html.loading,
body.loading {
  overflow: auto !important;
}

html.lp-lock {
  overflow: hidden;
}

/* =========================
   Loading Screen Overrides
========================= */
.page-preloader:not(#lp-screen):not(.lp-keep),
.loading-screen:not(#lp-screen):not(.lp-keep),
.salla-loading-screen:not(#lp-screen):not(.lp-keep),
.loading-overlay.page,
#preloader:not(#lp-screen):not(.lp-keep) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}

/* =========================
   Custom Loading Screen
========================= */
#lp-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--lp-bg);
  display: grid;
  place-items: center;
  transition: opacity 0.5s, visibility 0.5s;
}

body.lp-done #lp-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lp-wrap {
  display: grid;
  gap: 18px;
  place-items: center;
  text-align: center;
}

.lp-logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) inset,
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.lp-bottle {
  width: 44px;
  height: 44px;
  stroke: var(--lp-accent);
  fill: none;
  stroke-width: 2.2;
}

.lp-stroke {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: draw 1.8s ease-in-out infinite;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 160;
    opacity: 0.4;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -160;
    opacity: 0.6;
  }
}

.lp-name {
  font: 600 13px/1.1 ui-sans-serif, system-ui, Segoe UI, Arial;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lp-ink);
  opacity: 0.9;
}

.lp-sub {
  font: 500 11px/1 ui-sans-serif, system-ui;
  color: #b9b9b9;
  opacity: 0.8;
}

.lp-bar {
  width: 180px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.lp-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--lp-accent), #d7c2a1);
  animation: fill 2.2s ease-in-out infinite;
}

@keyframes fill {
  0% { width: 0%; }
  50% { width: 72%; }
  100% { width: 100%; }
}

/* =========================
   Navigation
========================= */
.main-nav-container {
  background-color: transparent;
  border: none;
  box-shadow: none;
  transition: background-color 0.3s ease;
}

#mobile-menu,
body.menu-opened #mobile-menu,
body.mm-ocd-opened #mobile-menu {
  position: relative;
  background-color: transparent !important;
  isolation: isolate;
}

#mobile-menu::before,
body.menu-opened #mobile-menu::before,
body.mm-ocd-opened #mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 17, 19, 0.50) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  pointer-events: none;
}

#mobile-menu,
#mobile-menu *,
#mobile-menu a,
#mobile-menu li,
#mobile-menu div,
body.menu-opened *,
body.mm-ocd-opened * {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* Target the white menu container */
.mm-ocd-opened .mm-ocd,
.menu-opened .mobile-menu,
body.mm-ocd-opened > div,
body.menu-opened > div {
  background-color: transparent !important;
  width: 320px !important;
  max-width: 85vw !important;
  left: auto !important;
  right: 0 !important;
}

.mm-ocd-opened .mm-ocd::before,
.menu-opened .mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 17, 19, 0.50) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  pointer-events: none;
}

i.sicon-menu.text-primary.text-2xl::before {
  color: var(--solid) !important;
}

/* =========================
   Typography - Headings
========================= */
.app-inner :is(h1, h2, h3, h4, h5, h6),
.app-inner :is(h1, h2, h3, h4, h5, h6) span,
.app-inner :is(h1, h2, h3, h4, h5, h6) a {
  color: var(--text) !important;
}

:not(footer) .app-inner :is(h1, h2) {
  background: transparent !important;
  border-radius: 8px;
  display: inline-block;
  padding: 0.2em 0.6em;
}

:not(footer) .app-inner :is(h1, h2, h3, h4, h5, h6) a {
  color: inherit !important;
  text-decoration: none;
}

/* Section titles */
.section-title,
.section-title *,
.s-section-title,
.s-section-title *,
.s-slider-block__title,
.s-slider-block__title *,
.s-slider-block__title-right,
.s-slider-block__title-right *,
.s-products-block__header h2,
.s-products-block__header h2 *,
.s-products-list__title,
.s-products-list__title * {
  color: var(--text) !important;
}

div.s-slider-block__title > div.s-slider-block__title-right {
  color: var(--solid);
}

/* =========================
   Breadcrumb
========================= */
salla-breadcrumb,
.s-breadcrumb-wrapper {
  background: transparent !important;
}

.s-breadcrumb-wrapper .s-breadcrumb-item {
  background: transparent !important;
  border-radius: 8px;
  color: var(--text) !important;
  display: inline-block;
  padding: 0.2em 0.6em;
}

.s-breadcrumb-wrapper .s-breadcrumb-item a {
  background: transparent !important;
  color: inherit !important;
  text-decoration: none;
}

salla-breadcrumb .s-breadcrumb-separator,
.s-breadcrumb-wrapper .s-breadcrumb-separator {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* =========================
   Articles & Text Elements
========================= */
article.article--main.pb-1 {
  position: relative;
  border-radius: 10px;
  color: var(--text);
  padding: 15px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  isolation: isolate;
}

article.article--main.pb-1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 44, 46, 0.75);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  pointer-events: none;
}

.text-gray-500 {
  background: transparent !important;
  border-radius: 5px;
  color: var(--text) !important;
  padding: 5px 10px;
}

/* =========================
   Product Cards
========================= */
.s-product-card-content {
  background-color: var(--solid) !important;
  border-radius: 10px;
}

.s-product-card-content-main > h3 > a {
  color: var(--text);
}

.s-product-card-content-sub > div > h4 {
  color: var(--price-red) !important;
}

.s-product-card-sale-price > span,
.s-product-card-sale-price > span *,
.s-product-card-sale-price del {
  color: var(--text) !important;
  opacity: 1 !important;
  text-decoration-color: var(--text) !important;
}

.s-product-card-sale-price > span .sicon-sar::before {
  color: var(--text) !important;
}

/* =========================
   Product Form / Buy Box
========================= */
form.form.product-form {
  background-color: var(--solid) !important;
  border: 1px solid var(--solid) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
}

form.form.product-form .bg-white,
form.form.product-form .bg-gray-50,
form.form.product-form .bg-blue-50 {
  background-color: var(--solid) !important;
}

form.form.product-form,
form.form.product-form * {
  color: var(--text) !important;
}

form.form.product-form .quantity,
form.form.product-form .quantity *,
form.form.product-form input,
form.form.product-form select {
  background-color: var(--soft) !important;
  border: 1px solid var(--solid) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
}

form.form.product-form button[type="submit"],
form.form.product-form .btn,
.btn-add-to-cart {
  background-color: var(--solid) !important;
  border: 1px solid var(--solid) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

form.form.product-form button[type="submit"]:hover,
.btn-add-to-cart:hover {
  filter: brightness(1.05);
}

/* Ensure cart buttons are visible */
salla-button.s-button-wrap,
.s-button-wrap[type="submit"],
.s-add-product-button-main salla-button,
section.sticky-product-bar salla-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================
   Prices
========================= */
:not(footer) .app-inner h2.total-price {
  background: transparent !important;
}

form.form.product-form h2.total-price,
h2.total-price.text-red-800 {
  color: var(--price-red) !important;
}

h2.total-price .sicon-sar::before {
  color: var(--price-red) !important;
}

div.flex.whitespace-nowrap.gap-4.items-center > div.space-x-2.rtl\:space-x-reverse.whitespace-nowrap > h4 {
  background: transparent !important;
  color: var(--price-red) !important;
}

div.flex.whitespace-nowrap.gap-4.items-center > div.space-x-2.rtl\:space-x-reverse.whitespace-nowrap > h4 .sicon-sar::before {
  color: var(--price-red) !important;
}

/* Glass effect for price container */
div.flex.whitespace-nowrap.gap-4.items-center > div.space-x-2.rtl\:space-x-reverse.whitespace-nowrap {
  position: relative;
  padding: 10px 15px;
  border-radius: 10px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  isolation: isolate;
}

div.flex.whitespace-nowrap.gap-4.items-center > div.space-x-2.rtl\:space-x-reverse.whitespace-nowrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 44, 46, 0.35);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  pointer-events: none;
}

/* =========================
   Sticky Buy Bar (Glass Effect)
========================= */
/* Main sticky bar */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none {
  position: fixed !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(1100px, 100vw) !important;
  margin: 0 !important;
  padding: 20px !important;
  border-radius: 12px 12px 0 0 !important;
  z-index: 99999 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  isolation: isolate;
}

/* Glass effect layer */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 44, 46, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  pointer-events: none;
}

/* Remove solid backgrounds inside sticky bar */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none :is(.bg-white, .bg-gray-50, .bg-blue-50) {
  background: transparent !important;
}

/* Quantity controls */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .s-quantity-input-container {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px;
}

div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .s-quantity-input-input,
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none .s-quantity-input-input {
  background: transparent !important;
  color: #fff !important;
}

div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .s-quantity-input-button {
  background: transparent !important;
  color: #fff !important;
}

/* Buttons */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .s-button-element {
  background: var(--solid) !important;
  border: 1px solid var(--solid) !important;
  color: #fff !important;
}

div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .s-fast-checkout-button {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

/* Generic sticky bar styles */
section.sticky-product-bar {
  background: rgba(42, 44, 46, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  color: #fff !important;
}

section.sticky-product-bar.bg-white {
  background: rgba(42, 44, 46, 0.55) !important;
}

section.sticky-product-bar :is(.bg-white, .bg-gray-50, .bg-blue-50) {
  background: transparent !important;
}

section.sticky-product-bar .sticky-product-bar__quantity .form-label {
  color: #fff !important;
}

section.sticky-product-bar .s-quantity-input-container {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px;
}

section.sticky-product-bar .s-quantity-input-input {
  background: transparent !important;
  color: #fff !important;
}

section.sticky-product-bar .s-quantity-input-button {
  background: transparent !important;
  color: #fff !important;
}

section.sticky-product-bar .s-button-element {
  background: var(--solid) !important;
  border: 1px solid var(--solid) !important;
  color: #fff !important;
}

section.sticky-product-bar .s-fast-checkout-button {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

/* =========================
   Cart & Header Icons
========================= */
/* Cart page items styling */
section.cart-item.bg-white.p-5,
.cart-item,
.s-cart-item {
  position: relative;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--text) !important;
  isolation: isolate;
}

section.cart-item.bg-white.p-5::before,
.cart-item::before,
.s-cart-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 44, 46, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  pointer-events: none;
}

section.cart-item.bg-white.p-5 *,
.cart-item *,
.s-cart-item * {
  color: var(--text) !important;
}

/* Cart quantity inputs */
.s-quantity-input-input,
input.s-quantity-input-input {
  background-color: var(--soft) !important;
  border: 1px solid var(--solid) !important;
  color: var(--text) !important;
}

/* Cart summary box */
.s-cart-summary,
section.bg-white.p-5.rounded-md.mb-5,
.cart-summary,
div.bg-white.p-5.rounded-md {
  position: relative;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text) !important;
  isolation: isolate;
}

.s-cart-summary::before,
section.bg-white.p-5.rounded-md.mb-5::before,
.cart-summary::before,
div.bg-white.p-5.rounded-md::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 44, 46, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  pointer-events: none;
}

.s-cart-summary *,
section.bg-white.p-5.rounded-md.mb-5 *,
.cart-summary *,
div.bg-white.p-5.rounded-md * {
  color: var(--text) !important;
}

/* Cart buttons */
button.s-button-element,
.s-button-solid,
.s-button-wide,
button.s-button-btn {
  background-color: var(--solid) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--text) !important;
}

button.s-button-element:hover,
.s-button-solid:hover {
  filter: brightness(1.1);
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.s-cart-summary-total {
  background-color: var(--solid) !important;
  border-radius: 8px;
  color: var(--text) !important;
  display: inline-block;
  padding: 6px 12px;
}

.s-cart-summary-total .sicon-sar::before {
  color: var(--text) !important;
}

.header-btn__icon.sicon-shopping-bag::before,
i.sicon-shopping-bag::before,
.header-btn__icon.sicon-user-circle::before,
i.sicon-user-circle::before {
  background-color: var(--solid) !important;
  border-radius: 50%;
  color: var(--text) !important;
  font-size: 20px;
  padding: 6px;
}

/* =========================
   Footer
========================= */
footer,
.site-footer,
.s-footer,
.footer,
section.s-footer,
section.bg-white.s-footer {
  position: relative;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  margin: 0 !important;
  isolation: isolate;
}

footer::before,
.site-footer::before,
.s-footer::before,
section.s-footer::before,
section.bg-white.s-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 44, 46, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  pointer-events: none;
}

footer *,
.site-footer *,
.s-footer *,
.footer * {
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--text) !important;
}

/* =========================
   Utility Classes
========================= */
div.s-comments.s-comments-product {
  display: none;
}

/* Hide the flex section sticky bar */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove border from product form */
div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form.form.product-form {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* =========================
   Mobile Responsive
========================= */
@media (max-width: 768px) {
  html,
  body {
    -webkit-overflow-scrolling: touch;
    background-attachment: scroll !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  body {
    background-image: url("https://i.imgur.com/H27sL4Q.png");
    font-size: 14px;
    padding: 10px;
  }

  section.sticky-product-bar {
    background: rgba(42, 44, 46, 0.48) !important;
  }

  div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > form > section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none::before {
    background: rgba(42, 44, 46, 0.48);
  }
}