/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */
.container { max-width: 1280px; margin: 0 auto; }
.max-container { margin: 0 auto; max-width: 1100px; }
.mobile-container { max-width: 414px; margin: 0 auto; }
.center-box-500 { max-width: 500px; }

/* --------------------------------------------------------------------------
   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-four { background: var(--button-four); }
.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); }

/* --------------------------------------------------------------------------
   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-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; }
.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; }

/* --------------------------------------------------------------------------
   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-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. Theme layout — header, sidebar, hero (utility extensions)
   -------------------------------------------------------------------------- */
.flex-basis-260 { flex: 0 0 260px; width: 260px; min-width: 260px; }
.flex-basis-320 { flex: 0 0 320px; width: 320px; }
.flex-basis-760 { flex: 0 0 760px; width: 760px; }
.flex-basis-1000 { flex: 0 0 1000px; width: 1000px; flex-shrink: 0; }
.hero-min-h { height: 410px; max-height: 410px; min-height: 410px; }
.h-post-desktop { height: 420px; }
.h-post-mobile { height: 222px; }

/* --------------------------------------------------------------------------
   24. 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); }

/* --------------------------------------------------------------------------
   25. WooCommerce — product loop
   -------------------------------------------------------------------------- */
.product-list:hover .view-more-loop {
   color: #ffffff;
   opacity: 0.8;
}
.loop-title h2,
.loop-title .woocommerce-loop-product__title {
   font-size: 16px;
   color: var(--text-primary);
}

.product-list-box {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.onsale {
    background: #c70000;
    color: white;
    font-weight: 700;
}

/* Single product: price + ratings flex row (see themex_shop_single_product_open_price_rating_row) */
.single-product-price-rating .woocommerce-product-rating,
.single-product-price-rating p.price {
	margin-bottom: 0;
}

/* Unified product stars: loop, single summary, review rows, wc_get_rating_html (widgets) */
.themex-star-rating-wrap {
   display: inline-block;
   line-height: 1;
   vertical-align: middle;
}
.themex-star-rating {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   line-height: 1;
   font-size: 18px;
   font-weight: 700;
}
.themex-star-rating__slot {
   position: relative;
   display: inline-block;
   width: 1em;
   height: 1em;
   overflow: hidden;
   flex-shrink: 0;
}
.themex-star-rating__slot-bg,
.themex-star-rating__slot-fill {
   position: absolute;
   left: 0;
   top: 0;
   line-height: 1;
   height: 1em;
   width: 1em;
   font-size: 1em;
   overflow: hidden;
}
.themex-star-rating__slot-bg {
   color: var(--bg-grey, #e5e7eb);
   z-index: 0;
}
.themex-star-rating__slot-fill {
   color: #e6a800;
   z-index: 1;
   white-space: nowrap;
   width: auto;
   min-width: 0;
   max-width: 100%;
}




/* Review form — clickable stars (hidden input submits to WooCommerce) */
.review-rating-field--error .review-rating-stars {
   outline: 2px solid #c00;
   outline-offset: 4px;
   border-radius: 4px;
}
.review-rating-stars__btn {
   -webkit-tap-highlight-color: transparent;
   padding: 5px;
   margin: 0;
   border: none;
   background: #ffffff00;
   cursor: pointer;
   line-height: 1;
   transition: transform 0.12s ease, background-color 0.15s ease;
}
.review-rating-stars__btn:hover {
   background-color: rgba(0, 0, 0, 0.04);
}
.review-rating-stars__btn:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
}
.review-rating-stars__btn:active {
   transform: scale(0.92);
}
.review-rating-stars__glyph {
   display: block;
   font-size: 42px;
   width: 50px;
   height: 50px;
   border: 1px solid #02643c;
   line-height: 1;
   color: var(--border, #d0d0d0);
   transition: color 0.15s ease, transform 0.12s ease;
}
.review-rating-stars__btn--lit .review-rating-stars__glyph {
   color: #e6a800;
   text-shadow: 0 0 0.5px rgba(230, 168, 0, 0.4);
}

/* Product review list — letter avatar */
.themex-shop-review__avatar {
   width: 48px;
   height: 48px;
   min-width: 48px;
   flex-shrink: 0;
   border-radius: 10px;
   background: #000;
   color: #fff;
}

/* ==========================================================================
   26. Cookie consent (CMP)
   Do not combine .hidden with .flex here (flex wins in the cascade).
   ========================================================================== */
.themex_shop-cc--hidden { display: none !important; }
.themex_shop-cc-banner { box-sizing: border-box; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); }
.themex_shop-cc-banner__inner { box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); }
.themex_shop-cc-banner__policy { text-decoration: underline; }
.themex_shop-cc-modal { box-sizing: border-box; }
.themex_shop-cc-modal__backdrop { background: rgba(0, 0, 0, 0.45); }
.themex_shop-cc-modal__panel { max-height: 90vh; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); }
.themex_shop-cc-modal__list { list-style: none; }
.dark-mode .themex_shop-cc-btn--ghost { color: #ececec; border-color: #666; }

/* --------------------------------------------------------------------------
   27. Lists & comments (unstyled / threaded)
   -------------------------------------------------------------------------- */
.list-none { list-style: none; }
.comment-list .children { list-style: none; margin: 10px 0 0 0; padding-left: 20px; }

/* --------------------------------------------------------------------------
   28. Mobile app banner
   (.flex can override [hidden] without !important — force hide when dismissed)
   -------------------------------------------------------------------------- */
#themex-mobile-app-banner[hidden],
#themex-mobile-app-banner.is-app-banner-dismissed { display: none !important; }
.themex-mobile-app-banner__close { position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; }

/* --------------------------------------------------------------------------
   29. Interaction — pointer-events & user-select
   -------------------------------------------------------------------------- */
.pointer-events-none { pointer-events: none; }
.select-none { -webkit-user-select: none; user-select: none; }

/* --------------------------------------------------------------------------
   30. Shop catalog — infinite scroll (loader + fallback pagination)
   -------------------------------------------------------------------------- */
.themex-shop-infinite-scroll {
   position: relative;
}

.themex-shop-infinite-scroll.is-js .themex-shop-infinite-scroll__fallback-nav {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.themex-shop-infinite-scroll__sentinel {
   height: 1px;
   width: 100%;
   pointer-events: none;
}

.themex-shop-infinite-scroll__loader {
   align-items: center;
   justify-content: center;
   gap: 12px;
   min-height: 52px;
   color: var(--text-secondary);
}

.themex-shop-infinite-scroll__loader:not([hidden]) {
   display: flex;
}

.themex-shop-infinite-scroll__loader[hidden] {
   display: none !important;
}

.themex-shop-infinite-scroll__spinner {
   flex-shrink: 0;
   width: 22px;
   height: 22px;
   border: 2px solid rgba(17, 24, 39, 0.12);
   border-top-color: var(--button-primary, #bd1f1f);
   border-radius: 50%;
   animation: themex-shop-infinite-spin 0.75s linear infinite;
}

.themex-shop-infinite-scroll__text {
   font-size: 0.95rem;
   animation: themex-shop-infinite-pulse 1.1s ease-in-out infinite;
}

@keyframes themex-shop-infinite-spin {
   to {
      transform: rotate(360deg);
   }
}

@keyframes themex-shop-infinite-pulse {
   0%,
   100% {
      opacity: 0.5;
   }
   50% {
      opacity: 1;
   }
}


.product-list .loop-rating {
    border-top-right-radius: 10px;
}

.product-list .loop-rating:before {
 position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  left: 0;
  z-index: 1;
  bottom: 100%;
  background-color: white;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0 0C0.626888 13.2313 7.08457 20.1093 20 19.9987H0V0Z' fill='white'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
}

.product-list .loop-rating:after {
position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  left: 100%;
  z-index: 1;
  bottom: 0;
  background-color: white;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0 0C0.626888 13.2313 7.08457 20.1093 20 19.9987H0V0Z' fill='white'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
}

/* --------------------------------------------------------------------------
   Mobile cart — card layout (.themex-cart-page--mobile)
   -------------------------------------------------------------------------- */
.themex-cart-page--mobile .themex-cart-mobile__card {
   background: var(--bg-white, #fff);
   border: 1px solid var(--border-menu, #f0f3f5);
   border-radius: 14px;
   padding: 14px 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.themex-cart-mobile__thumb {
   width: 80px;
   height: 80px;
   border-radius: 10px;
   overflow: hidden;
   background: var(--bg-grey, #f0f2f8);
   display: flex;
   align-items: center;
   justify-content: center;
}

.themex-cart-mobile__thumb img,
.themex-cart-mobile__thumb .attachment-woocommerce_thumbnail {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.themex-cart-mobile__remove {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 36px;
   min-height: 36px;
   font-size: 22px;
   line-height: 1;
   color: var(--text-secondary);
   text-decoration: none;
   border-radius: 8px;
}

.themex-cart-mobile__remove:hover,
.themex-cart-mobile__remove:focus {
   color: #b91c1c;
   background: rgba(185, 28, 28, 0.08);
}

.themex-cart-mobile__qty .quantity {
   display: inline-flex;
   align-items: center;
}

.themex-cart-mobile__qty select.qty,
.themex-cart-mobile__qty .qty {
   min-height: 44px;
   min-width: 72px;
   padding: 6px 10px;
   border-radius: 8px;
   border: 1px solid var(--border-menu, #f0f3f5);
}

.themex-cart-mobile__title a {
   color: inherit;
   text-decoration: none;
}

.themex-cart-mobile__title a:hover {
   text-decoration: underline;
}

.themex-cart-page--mobile .themex-cart-mobile__actions .button[name='update_cart'] {
   border-radius: 10px;
}

.themex-cart-page--mobile .themex-cart-mobile__actions .coupon {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
}

.themex-cart-page--mobile .themex-cart-mobile__actions .coupon input.input-text {
   min-height: 44px;
   border-radius: 8px;
   width: 100%;
   box-sizing: border-box;
}

/* Cart totals panel */
.woocommerce-cart .themex-cart-totals-panel {
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
   border-color: var(--border-menu, #f0f3f5);
}

.woocommerce-cart .themex-cart-totals-panel .shop_table tr {
   border-bottom: 1px solid var(--border-menu, #f0f3f5);
}

.woocommerce-cart .themex-cart-totals-panel .shop_table tr:last-child {
   border-bottom: none;
}

.woocommerce-cart .themex-cart-totals-panel .order-total th,
.woocommerce-cart .themex-cart-totals-panel .order-total td {
   font-size: 1.1rem;
   padding-top: 12px;
}

/* Extra clearance above fixed app bottom nav on cart */
body.has-app-bottom-nav.woocommerce-cart #main-content,
body.has-app-bottom-nav.woocommerce-cart main#main.site-main {
   padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}