@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//otkaty.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.6.0") format("woff2");
}

:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 15px;
	--wd-title-font: "League Spartan", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "League Spartan", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "League Spartan", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 14px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: rgb(95,232,71);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(17,70,57);
	--btn-accented-bgcolor-hover: rgb(15,64,52);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://otkaty.com/wp-content/uploads/2021/10/coffee-popup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
	--wd-popup-padding: 15px;
}
.page-title-default {
	background-color: rgb(17,70,57);
	background-image: url(https://otkaty.com/wp-content/uploads/2021/10/coffee-page-title.jpg);
	background-size: cover;
	background-position: center center;
}
.footer-container {
	background-color: rgb(17,17,17);
	background-image: none;
}
.page .main-page-wrapper {
	background-color: rgb(243,243,243);
	background-image: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1239px) {
.platform-Windows .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 1222px) {
html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700;900&family=Share+Tech+Mono&display=swap');

/* 2) Global tokens */
:root{
  --otk-bg: #050708;
  --otk-panel: rgba(10, 12, 16, 0.72);
  --otk-line: rgba(110,255,255,0.14);
  --otk-line2: rgba(110,255,255,0.24);
  --otk-accent: #6ff;
  --otk-accent2: #ff63ff;

  --otk-text: rgba(255,255,255,0.92);
  --otk-muted: rgba(255,255,255,0.66);

  --otk-radius: 16px;

  --otk-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --otk-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* 3) Apply global fonts + base colors */
html, body{
  font-family: var(--otk-sans) !important;
  color: var(--otk-text);
  background: var(--otk-bg) !important;
}

/* Make sure common wrappers are transparent so the bg shows */
#page, .website-wrapper, .main-page-wrapper, .site-content, .content-area, .page-wrapper{
  background: transparent !important;
}

/* 4) Global typography */
h1,h2,h3,h4,h5,h6{
  color: #fff !important;
  letter-spacing: -0.02em;
  text-shadow: 0 0 18px rgba(110,255,255,0.08);
}
p, li, span, label, .woocommerce, .entry-content{
  color: var(--otk-text);
}
small, .text-muted, .wd-text, .meta, .posted-on, .comment-meta, .woocommerce-breadcrumb{
  color: var(--otk-muted) !important;
}

/* Links */
a{
  color: rgba(110,255,255,0.92);
  text-decoration: none;
  transition: opacity .18s ease, text-shadow .18s ease;
}
a:hover{
  opacity: 0.95;
  text-shadow: 0 0 14px rgba(110,255,255,0.25);
}

/* 5) Cards / boxes styling (WoodMart + Woo) */
.wd-box, .wd-scroll-content, .wd-dropdown, .wd-dropdown-menu,
.product, .product-grid-item, .wd-product,
.widget, .sidebar-container .widget,
.woocommerce-cart-form, .woocommerce-checkout, .cart_totals, .woocommerce-info,
.wd-wishlist-item, .my_account_orders, .woocommerce-MyAccount-content,
.elementor-widget-container, .wp-block-group, .wp-block-columns, .wp-block-column{
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(110,255,255,0.12) !important;
  border-radius: var(--otk-radius) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 70px rgba(110,255,255,0.06);
}

/* 6) Header / footer (keep readable + premium) */
header, .whb-header, .wd-header, .sticky-header{
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(110,255,255,0.14);
}
footer, .footer-container, .wd-footer{
  background: rgba(0,0,0,0.35) !important;
  border-top: 1px solid rgba(110,255,255,0.12);
}

/* 7) Buttons (Woo + WoodMart + Elementor) */
button,
input[type="button"],
input[type="submit"],
.wd-button,
.btn,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  font-family: var(--otk-sans) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(110,255,255,0.30) !important;
  background: rgba(0,0,0,0.35) !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wd-button:hover,
.btn:hover,
.button:hover{
  transform: translateY(-1px);
  border-color: rgba(110,255,255,0.60) !important;
  box-shadow: 0 0 28px rgba(110,255,255,0.12) !important;
}

/* Primary button look */
.wd-button.wd-button-primary,
.button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt{
  background: linear-gradient(180deg, rgba(110,255,255,0.18), rgba(0,0,0,0.35)) !important;
  border-color: rgba(110,255,255,0.55) !important;
}

/* 8) Inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select{
  background: rgba(0,0,0,0.35) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(110,255,255,0.18) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px);
}
input::placeholder, textarea::placeholder{
  color: rgba(255,255,255,0.45) !important;
}

/* 9) OTKATY global background layers (container) */
body::before,
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Glow layer */
body::before{
  background:
    radial-gradient(1200px 800px at 80% 10%, rgba(110,255,255,0.12), transparent 55%),
    radial-gradient(900px 700px at 25% 90%, rgba(255,99,255,0.09), transparent 55%),
    radial-gradient(700px 400px at 15% 20%, rgba(110,255,255,0.06), transparent 60%);
  opacity: 1;
}

/* Scanlines + subtle vignette */
body::after{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 3px,
      transparent 6px
    ),
    radial-gradient(1200px 700px at 50% 50%, transparent 55%, rgba(0,0,0,0.35) 100%);
  opacity: 0.18;
}

/* 10) Grid layer injected by JS will use this class */
.otk-global-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.48;
  background-image:
    linear-gradient(rgba(110,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,255,255,0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(700px) rotateX(62deg);
  transform-origin: top;
  filter: blur(0.1px);
}

/* Noise layer injected by JS */
.otk-global-noise{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* Ensure site content stays ABOVE the background layers */
#page, .website-wrapper, .main-page-wrapper, header, footer, main, .site-content{
  position: relative;
  z-index: 5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body::after{ opacity: 0.12; }
}