/* Medx Elementor Toolkit — shared design tokens & widget styles */
.medx-eyebrow,
.medx-hero-slider,
.medx-category-section,
.medx-bestsellers-section,
.medx-brands-section,
.medx-contact-form-wrap {
	--ink: #123328;
	--ink-soft: #3d5b50;
	--pine: #1f4d3d;
	--pine-dark: #0f2c22;
	--pine-mid: #2c6650;
	--mint-100: #e6f1ea;
	--mint-200: #d3e6db;
	--amber: #e2a73b;
	--line: rgba(18, 51, 40, 0.12);
	font-family: 'Inter', sans-serif;
	box-sizing: border-box;
}
.medx-eyebrow {
	font-family: 'Space Mono', monospace;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	font-weight: 700;
	color: var(--pine-mid);
}
.medx-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.medx-section-head h2 { font-family: 'Fraunces', serif; font-size: clamp(24px, 3vw, 34px); margin: 8px 0 6px; color: var(--pine-dark); }
.medx-section-head p { color: var(--ink-soft); font-size: 14px; max-width: 460px; }
.medx-link-arrow { font-weight: 700; font-size: 14px; color: var(--pine); border-bottom: 2px solid var(--amber); padding-bottom: 3px; white-space: nowrap; }

/* ---- Hero Slider ---- */
.medx-hero-slider { position: relative; overflow: hidden; }
.medx-slide { position: relative; display: flex; align-items: center; background-size: cover; background-position: center; padding: 60px 40px; }
.medx-slide-image-only { padding: 0; display: block; min-height: inherit; }
.medx-slide-image-only a, .medx-slide-image-only img { display: block; width: 100%; height: 100%; object-fit: cover; }
.medx-slide-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, #123328 15%, rgba(31,77,61,.85) 45%, rgba(44,102,80,.5) 100%); }
.medx-slide-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; width: 100%; max-width: 1280px; margin: 0 auto; }
.medx-slide-eyebrow { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; display: block; }
.medx-slide-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 48px; margin: 14px 0; line-height: 1.1; }
.medx-slide-desc { font-size: 16px; line-height: 1.6; max-width: 440px; }
.medx-slide-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.medx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: 100px; font-weight: 700; font-size: 14.5px; transition: all .22s ease; border: 1.5px solid transparent; text-decoration: none; }
.medx-btn-primary { background: var(--amber); color: var(--pine-dark); }
.medx-btn-outline { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.06); }
.medx-slide-art { position: relative; display: flex; align-items: center; justify-content: center; }
.medx-slide-art img { max-width: 100%; border-radius: 16px; }
.medx-badge { position: absolute; top: -20px; left: -20px; background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.32); border-radius: 20px; padding: 10px 15px; text-align: center; color: #fff; z-index: 3; }
.medx-badge strong { font-family: 'Fraunces', serif; font-size: 18px; display: block; color: var(--amber); }
.medx-badge span { font-size: 12.5px; display: block; margin-top: 8px; max-width: 170px; }
.medx-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); cursor: pointer; }
.medx-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
.medx-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer; transition: all .25s; }
.medx-dot.is-active { width: 26px; border-radius: 6px; }
@media (max-width: 767px) {
	.medx-slide-inner { grid-template-columns: 1fr; text-align: center; }
	.medx-slide-actions { justify-content: center; }
	.medx-slide-title { font-size: 30px; }
	.medx-arrow { display: none; }
	.medx-badge { position: static; margin: 0 auto 16px; }
}

/* ---- Category grid ---- */
.medx-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.medx-cat-card { --medx-accent: #1f4d3d; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; text-align: center; padding-bottom: 16px; text-decoration: none; display: block; transition: all .25s; overflow: hidden; }
.medx-cat-card:hover { transform: translateY(-6px); border-color: var(--medx-accent); box-shadow: 0 10px 30px rgba(15,44,34,.1); }
.medx-cat-thumb { aspect-ratio: 1/.82; background: var(--mint-100); overflow: hidden; }
.medx-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.medx-cat-info { padding: 18px 12px 0; }
.medx-cat-info strong { font-size: 13.5px; color: var(--pine-dark); display: block; }
.medx-cat-info em { font-style: normal; font-size: 11px; color: var(--ink-soft); display: block; margin-top: 4px; }
@media (max-width: 767px) { .medx-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---- Products (best sellers) ---- */
.medx-product-scroller { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.medx-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* flex-grow:1 lets cards stretch to fill leftover row space when there aren't enough
   products to need scrolling; flex-shrink:0 + basis stop them shrinking once there ARE
   enough to overflow, so the horizontal scroller still kicks in normally. max-width caps
   how wide a card can stretch on very wide screens with just 2-3 products. */
.medx-product-card { flex: 1 0 250px; max-width: 340px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow .25s, transform .25s; display: flex; flex-direction: column; }
.medx-product-grid .medx-product-card { flex: none; width: auto; max-width: none; }
.medx-product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15,44,34,.1); }
.medx-product-media { display: block; height: 210px; background: #f4f9f6; position: relative; overflow: hidden; flex: none; }
.medx-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.medx-product-card:hover .medx-product-media img { transform: scale(1.05); }
.medx-tag { position: absolute; top: 12px; left: 12px; background: #c23b3b; color: #fff; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 100px; }
.medx-product-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.medx-product-brand { font-size: 11px; color: var(--pine-mid); font-weight: 700; text-transform: uppercase; }
.medx-product-name-link { display: block; text-decoration: none; color: inherit; }
.medx-product-name { font-size: 14.5px; font-weight: 700; color: var(--pine-dark); margin-top: 5px; min-height: 38px; }
.medx-product-pack { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.medx-stars { color: var(--amber); font-size: 12px; margin-top: 8px; }
.medx-stars span { color: var(--ink-soft); margin-left: 4px; }
.medx-price-row { margin-top: 10px; }
.medx-price { font-size: 17px; font-weight: 800; }

/* Footer (quantity + add to cart) pinned to the bottom of every card regardless of title length */
.medx-product-footer { margin-top: auto; padding-top: 14px; }

.medx-cart-widget { display: flex; flex-direction: column; gap: 10px; }
.medx-qty-stepper { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; height: 40px; }
.medx-qty-btn { flex: 0 0 34px; background: #fbfaf6; border: none; font-size: 16px; font-weight: 700; cursor: pointer; color: var(--ink); transition: background .15s; }
.medx-qty-btn:hover { background: var(--mint-100); }
.medx-qty-input { flex: 1; min-width: 0; border: none; text-align: center; font-size: 14px; font-weight: 700; -moz-appearance: textfield; }
.medx-qty-input::-webkit-outer-spin-button, .medx-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.medx-add-btn { width: 100%; padding: 10px; border-radius: 10px; border: 1.5px solid var(--pine); background: transparent; color: var(--pine); font-weight: 700; font-size: 13px; text-align: center; display: block; text-decoration: none; cursor: pointer; transition: all .2s; }
.medx-add-btn:hover { background: var(--pine); color: #fff; }
.medx-add-btn.is-loading { opacity: .7; cursor: wait; }
.medx-view-cart-btn { width: 100%; padding: 10px; border-radius: 10px; background: var(--pine); color: #fff; font-weight: 700; font-size: 13px; text-align: center; text-decoration: none; display: none; align-items: center; justify-content: center; gap: 6px; transition: background .2s; }

/* ---- Fixed responsive breakpoints for both layouts (independent of admin's desktop setting) ----
   >=768px (tablet & desktop): admin's chosen column count / fixed card basis, grows to fill space
   480-767px: exactly 2 cards visible, grows to fill space if fewer than 2 products
   <480px: exactly 1 card visible ---- */
@media (max-width: 767px) {
	.medx-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
	.medx-product-scroller { gap: 14px; }
	.medx-product-scroller .medx-product-card { flex: 1 0 calc(50% - 7px) !important; max-width: calc(50% - 7px); }
}
@media (max-width: 480px) {
	.medx-product-grid { grid-template-columns: 1fr !important; }
	.medx-product-scroller .medx-product-card { flex: 1 0 92% !important; max-width: 92%; }
}

/* ---- Ingredients / chip cloud ---- */
.medx-chip-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.medx-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 12px; background: #fff; border: 1px solid var(--line); border-radius: 100px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; transition: all .2s; }
.medx-chip-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--mint-100); display: flex; align-items: center; justify-content: center; color: var(--pine); flex: none; }
.medx-chip-dot svg { width: 15px; height: 15px; }
.medx-chip-label { min-width: 0; }

/* ---- Promo banner ---- */
.medx-promo-banner { width: 100%; }
.medx-promo-inner { display: block; position: relative; overflow: hidden; transition: box-shadow .25s; }
.medx-promo-img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s ease; }

/* ---- Brands ---- */
.medx-brand-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 10px; text-decoration: none; color: var(--pine-dark); font-family: 'Fraunces', serif; font-weight: 600; font-size: 13px; height: 112px; transition: all .25s; }
.medx-brand-badge:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(15,44,34,.08); }
.medx-brand-badge .sw { width: 44px; height: 44px; border-radius: 50%; background: var(--mint-100); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.medx-brand-badge .sw img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---- Testimonials ---- */
.medx-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.medx-testi-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.medx-testi-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; }
.medx-testi-card p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.medx-testi-person { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.medx-testi-avatar, .medx-testi-avatar-img { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; object-fit: cover; }
.medx-testi-avatar { background: var(--mint-100); color: var(--pine); }
.medx-testi-person strong { font-size: 13.5px; display: block; }
.medx-testi-person span { font-size: 12px; }
@media (max-width: 767px) { .medx-testi-grid { grid-template-columns: 1fr; } }

/* Carousel mode */
.medx-testi-swiper-wrap { position: relative; padding: 0 8px; }
.medx-testi-swiper { overflow: hidden; }
.medx-testi-swiper .swiper-slide { height: auto; }
.medx-testi-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.medx-testi-arrow.prev { left: -8px; }
.medx-testi-arrow.next { right: -8px; }
.medx-testi-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.medx-testi-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer; transition: all .25s; }
.medx-testi-dot.is-active { width: 22px; border-radius: 6px; }
@media (max-width: 600px) { .medx-testi-arrow { display: none; } }

/* ---- Contact form ---- */
.medx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.medx-form-group { display: flex; flex-direction: column; gap: 7px; }
.medx-form-group.full { grid-column: 1 / -1; }
.medx-form-group label { font-size: 12.5px; font-weight: 700; color: var(--pine-dark); }
.medx-form-group input, .medx-form-group select, .medx-form-group textarea { border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 14px; outline: none; width: 100%; transition: border-color .2s; }
.medx-form-group textarea { min-height: 110px; resize: vertical; }
.medx-field-error { font-size: 12px; min-height: 14px; display: block; }
.medx-form-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }
.medx-form-actions { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.medx-submit-btn { padding: 15px 28px; border-radius: 100px; font-weight: 700; font-size: 14.5px; border: none; cursor: pointer; }
.medx-submit-btn.is-loading { opacity: .6; cursor: wait; }
.medx-form-success, .medx-form-generic-error { display: none; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.medx-form-success { color: var(--pine-mid); }
.medx-form-generic-error { color: #c23b3b; }
.medx-form-success.show, .medx-form-generic-error.show { display: flex; }
@media (max-width: 600px) { .medx-form-row { grid-template-columns: 1fr; } }

/* ---- Newsletter ---- */
.medx-newsletter-panel { padding: 48px 44px; border-radius: 26px; }
.medx-newsletter-panel h3 { font-family: 'Fraunces', serif; font-size: 26px; margin: 8px 0 6px; max-width: 340px; }
.medx-newsletter-panel p { font-size: 14px; color: var(--ink-soft); max-width: 340px; margin: 0 0 22px; }
.medx-newsletter-form { display: flex; gap: 10px; max-width: 380px; }
.medx-newsletter-form input { flex: 1; padding: 13px 16px; border: 1.5px solid rgba(18,51,40,.18); font-size: 13.5px; outline: none; background: #fff; }
.medx-newsletter-btn { padding: 13px 24px; font-weight: 700; font-size: 13.5px; border: none; cursor: pointer; }
.medx-newsletter-message { font-size: 13px; margin-top: 10px; display: none; font-weight: 600; }
.medx-newsletter-message.show { display: block; }
.medx-newsletter-message.success { color: var(--pine-mid); }
.medx-newsletter-message.error { color: #c23b3b; }
@media (max-width: 600px) { .medx-newsletter-form { flex-direction: column; } .medx-newsletter-panel { padding: 32px 24px; } }