body {
   background-color: #EEEEEE;
   color: #000;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 400;
   font-style: normal;
   cursor: default;
   line-height: 1.5;
}

/* --------------------------------------------------------------------------
   1. CSS custom properties (colors, weights, borders)
   -------------------------------------------------------------------------- */
:root {
   --font-weight-100: 100;
   --font-weight-200: 200;
   --font-weight-300: 300;
   --font-weight-400: 400;
   --font-weight-500: 500;
   --font-weight-600: 600;
   --font-weight-700: 700;
   --font-weight-800: 800;
   --font-weight-900: 900;
   --border-menu: #f0f3f5;
   --bg-primary: #02643c;
   --bg-secondary: #e0ffcc;
   --bg-light: #efffe5;
   --border: #02643c;
   --button-primary: #02643c;
   --button-secondary: #374151;
   --text-primary: #02643c;
   --text-secondary: #6b7280;
   --bg-dark: #191919;
   --bg-white: #fff;
   --bg-black: #000;
   --bg-grey: #F0F2F8;
   --text-white: #fff;
   --text-black: #000;
   --text-grey: #9c9c9c;
}

/* --------------------------------------------------------------------------
   2. Layout — page containers
   -------------------------------------------------------------------------- */
/* Width + centering only — do not add py-*, flex, bg, etc. here; wrap inside a child. */
.container { width: 1080px; margin: 0 auto; }
.max-container { margin: 0 auto; max-width: 1100px; }
.mobile-container { max-width: 414px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   3. Display & visibility
   -------------------------------------------------------------------------- */
.clear { clear: both !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* --------------------------------------------------------------------------
   4. Floats (legacy)
   -------------------------------------------------------------------------- */
.float-left { float: left; }
.float-right { float: right; }
.left { float: left !important; }
.right { float: right !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* --------------------------------------------------------------------------
   5. Backgrounds
   -------------------------------------------------------------------------- */
.bg-white { background: var(--bg-white); }
.bg-black { background: var(--bg-black); }
.bg-grey { background: var(--bg-grey); }
.bg-dark { background-color: var(--bg-dark); }
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-light { background: var(--bg-light); }
/* Alias used in mobile menu */
.bg-transparent { background: #ffffff66; }
.bg-none { background: transparent !important; }
.white-svg:hover { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   6. Text color
   -------------------------------------------------------------------------- */
.text-white { color: var(--text-white); }
.text-black { color: var(--text-black); }
.text-grey { color: var(--text-grey); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-white-muted { color: rgba(255, 255, 255, 0.75); }
.text-warning { color: #b45309; }
.text-danger { color: #b91c1c; }

/* --------------------------------------------------------------------------
   7. Button presets
   -------------------------------------------------------------------------- */
.button-primary { background: var(--bg-black); color: var(--text-white); padding: 15px 25px; }
.button-outline-white { color: var(--text-white); padding: 15px 25px; border: 2px solid white; }
.button-outline-black { color: var(--text-black); padding: 15px 25px; border: 2px solid black; }

/* --------------------------------------------------------------------------
   8. Border width & sides
   -------------------------------------------------------------------------- */
.border-none { border: none !important; }
.border-b-menu { border-bottom: 1px solid var(--border-menu); }
.border-1 { border: 1px solid var(--border); }
.border-2 { border: 2px solid var(--border); }
.border-2-white { border: 2px solid var(--text-white); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.border-r { border-right: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   9. Border radius
   -------------------------------------------------------------------------- */
.border-radius-0 { border-radius: 0px !important; }
.border-radius-4 { border-radius: 4px; }
.border-radius-5 { border-radius: 5px; }
.border-radius-6 { border-radius: 6px; }
.border-radius-7 { border-radius: 7px; }
.border-radius-8 { border-radius: 8px; }
.border-radius-9 { border-radius: 9px; }
.border-radius-10 { border-radius: 10px; }
.border-radius-100 { border-radius: 100px; }

/* --------------------------------------------------------------------------
   10. Sizing — width, max-width, min-width, height
   -------------------------------------------------------------------------- */
.width-full { width: 100%; }
.width-100 { width: 100%; }
.width-50 { width: 50%; }
.max-w-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.max-w-400 { max-width: 400px; }
.max-box-500 { max-width: 500px; }
.min-box-500 { min-width: 500px; }
.max-box-600 { max-width: 600px; }
.min-box-600 { min-width: 600px; }
.min-w-100 { min-width: 100px; }
.min-w-36 { min-width: 36px; }
.min-h-36 { min-height: 36px; }
.height-full { height: 100vh; }
.height-100 { height: 100%; }
.height-50 { height: 50%; }
.width-height-50 { width: 50px; height: 50px; }
.width-fixed-350 { flex: 0 0 350px; width: 350px; max-width: 350px; min-width: 350px; }
/* --------------------------------------------------------------------------
   11. Padding
   -------------------------------------------------------------------------- */
.p-0 { padding: 0px !important; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-50 { padding-top: 50px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-50 { padding-bottom: 50px; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-12 { padding-left: 12px; }
.pl-20 { padding-left: 20px; }
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-12 { padding-right: 12px; }
.pr-20 { padding-right: 20px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-14 { padding-left: 14px; padding-right: 14px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-14 { padding-top: 14px; padding-bottom: 14px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }

/* --------------------------------------------------------------------------
   12. Margin
   -------------------------------------------------------------------------- */
.m-0 { margin: 0px !important; }
.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }
.m-40 { margin: 40px; }
.m-50 { margin: 50px; }
.mt-1 { margin-top: 1px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-1 { margin-bottom: 1px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-20 { margin-left: 20px; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   13. Typography — alignment, transform, size, weight, line-height
   -------------------------------------------------------------------------- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-10 { font-size: 10px; }
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }
.text-18 {font-size: 18px;}
.text-20 { font-size: 20px; }
.text-22 { font-size: 22px; }
.text-24 { font-size: 24px; }
.text-26 { font-size: 26px; }
.text-28 { font-size: 28px; }
.text-30 { font-size: 30px; }
.text-32 { font-size: 32px; }
.text-34 { font-size: 34px; }
.text-36 { font-size: 36px; }
.text-38 { font-size: 38px; }

.weight-100 { font-weight: var(--font-weight-100); }
.weight-200 { font-weight: var(--font-weight-200); }
.weight-300 { font-weight: var(--font-weight-300); }
.weight-400 { font-weight: var(--font-weight-400); }
.weight-500 { font-weight: var(--font-weight-500); }
.weight-600 { font-weight: var(--font-weight-600); }
.weight-700 { font-weight: var(--font-weight-700); }
.weight-800 { font-weight: var(--font-weight-800); }
.weight-900 { font-weight: var(--font-weight-900); }
.leading-none { line-height: 1; }
.leading-snug { line-height: 1.35; }
.space-nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   14. Flexbox
   -------------------------------------------------------------------------- */
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-start { justify-content: flex-start; }
.justify-items-center { justify-items: center; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.align-space-between { align-content: space-between; }

/* --------------------------------------------------------------------------
   15. Grid
   -------------------------------------------------------------------------- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.gap-1 { gap: 1px; }
.gap-5 { gap: 5px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }

.gap-y-5 { row-gap: 5px; }
.gap-y-10 { row-gap: 10px; }
.gap-y-15 { row-gap: 15px; }
.gap-y-20 { row-gap: 20px; }
.gap-y-30 { row-gap: 30px; }
/* --------------------------------------------------------------------------
   16. Positioning & transforms
   -------------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-50 { top: 50%; }
.bottom-50 { bottom: 50%; }
.left-50 { left: 50%; }
.right-50 { right: 50%; }
.transform-center { transform: translate(-50%, -50%); }
.transform-0 { transform: translate(0, 0); }
.translate-x-50 { transform: translateX(-50%); }
.translate-y-50 { transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   17. Overflow & transitions
   -------------------------------------------------------------------------- */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: background-color 0.3s ease, color 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }

/* --------------------------------------------------------------------------
   18. Cursor
   -------------------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* --------------------------------------------------------------------------
   19. Z-index
   -------------------------------------------------------------------------- */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }
.z-99999 { z-index: 99999; }

/* --------------------------------------------------------------------------
   20. Scrollbar (hide)
   -------------------------------------------------------------------------- */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   21. Images & objects
   -------------------------------------------------------------------------- */
.img-cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.cart-badge-24 {
   width: 24px;
   height: 24px;
}

/* --------------------------------------------------------------------------
   22. Line clamp
   -------------------------------------------------------------------------- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }

/* --------------------------------------------------------------------------
   23. Dark mode switcher (wpnm) + dark theme overrides
   -------------------------------------------------------------------------- */
.wpnm-button-inner-left:before,
.wpnm-button-inner-left:after { box-sizing: border-box; margin: 0; padding: 0; transition: .2s ease-in-out; outline: none; }
.wpnm-button .wpnm-button-inner-left:before { content: ''; display: block; position: absolute; z-index: 1; height: 20px; width: 20px; margin: 4px; border-radius: 100%; right: 22px; bottom: 0px; background: #FFB200; transform: rotate(-45deg); box-shadow: 0 0 .625em #fff; }
.wpnm-button .wpnm-button-inner-left:after { content: ''; display: inline-block; width: 50px; height: 28px; border-radius: 100px; background: rgba(255,255,255,0.15); vertical-align: middle; border: 2px solid var(--border); }
.wpnm-button { border: none; background: none; padding: 0; }
.dark-mode-active .wpnm-button-inner-left:before { right: 6px; box-shadow: 4px 4px 0 0 #eee; background: transparent; }
.dark-mode-active .wpnm-button-inner-left:after { background: #000; border: .125em solid var(--border); }
.dark-mode { background: #505050; }
.dark-mode .bg-white { background: #303030; color: #ececec; }
.dark-mode .bg-grey { background: #3e3e3e; color: #ececec; }
.dark-mode .bg-dark-mode { background: #505050; color: white; border: 1px solid var(--border); }
.dark-mode a,
.dark-mode .text-black { color: white; }
.dark-mode .svg-icon { filter: brightness(0) saturate(100%) invert(1); }

/* --------------------------------------------------------------------------
   24. Loading spinner
   -------------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
   display: inline-block;
   width: 24px;
   height: 24px;
   border: 3px solid var(--border-menu);
   border-top-color: var(--bg-primary);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
}