/* Veratina Storefront
   The theme styles every <button> as a green pill with padding and a hover state.
   The Mini Cart is made of buttons, so the resets below use !important on purpose. */

:root {
	--vk-green: var(--e-global-color-primary, #009245);
	--vk-ink: var(--e-global-color-secondary, #26272B);
	--vk-text: var(--e-global-color-text, #66635C);
	--vk-line: #DCD8D0;
}

/* ---------- Header icon ---------- */
.vk-mini-cart { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; }
.vk-mini-cart .wc-block-mini-cart { position: relative; }
.vk-mini-cart .wc-block-mini-cart__button,
.vk-mini-cart .wc-block-mini-cart__button:hover,
.vk-mini-cart .wc-block-mini-cart__button:focus {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	fill: currentColor !important;
	line-height: 1 !important;
	transition: opacity .15s ease;
}
.vk-mini-cart .wc-block-mini-cart__button:hover { opacity: .65; }
.vk-mini-cart .wc-block-mini-cart__button:focus-visible { outline: 2px solid var(--vk-green); outline-offset: 3px; }
.vk-mini-cart .wc-block-mini-cart__icon { width: 26px !important; height: 26px !important; }
.vk-mini-cart .wc-block-mini-cart__amount { display: none !important; }

/* Small count bubble pinned to the top-right of the icon */
.vk-mini-cart .wc-block-mini-cart__badge {
	position: absolute !important;
	left: auto !important;
	right: -6px !important;
	top: -4px !important;
	margin: 0 !important;
	transform: none !important;
	min-width: 16px !important;
	height: 16px !important;
	padding: 0 4px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 16px !important;
	border-radius: 999px !important;
	background: var(--vk-green) !important;
	color: #fff !important;
}

/* ---------- Drawer ---------- */
.wc-block-mini-cart__drawer { font-family: inherit; color: var(--vk-ink); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-size: 1.3em !important;
	font-weight: 700;
	color: var(--vk-ink);
	line-height: 1.2;
}

/* Close button: plain icon, no pill. Every box property is pinned on hover and focus
   so the theme's button:hover rule cannot change its size or shift it. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:active {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	width: 40px !important;
	height: 40px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 8px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline-offset: 2px;
	transform: none !important;
	line-height: 1 !important;
	font-size: 16px !important;
	color: var(--vk-ink) !important;
	fill: currentColor !important;
	transition: opacity .15s ease;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover { opacity: .65; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg { width: 24px; height: 24px; display: block; }

/* Line items: fixed image column so text can never sit on top of the picture */
.wc-block-mini-cart__drawer table.wc-block-cart-items { table-layout: fixed; width: 100%; border-collapse: collapse; }
.wc-block-mini-cart__drawer .wc-block-cart-items__row { border-bottom: 1px solid var(--vk-line); }
.wc-block-mini-cart__drawer .wc-block-cart-items__row td { display: table-cell !important; vertical-align: top !important; padding: 14px 0 !important; border: 0 !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image { width: 72px !important; padding-right: 14px !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img:not([hidden]) { width: 72px !important; height: 72px !important; max-width: none !important; object-fit: cover; border-radius: 8px; display: block; position: static !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img[hidden] { display: none !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__product { width: auto !important; padding-right: 12px !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__total { width: 84px !important; text-align: right !important; white-space: nowrap; font-weight: 700; }
.wc-block-mini-cart__drawer .wc-block-components-product-name { color: var(--vk-ink) !important; font-weight: 700; text-decoration: none; }
.wc-block-mini-cart__drawer .wc-block-components-product-details { font-size: .85em; color: var(--vk-text); }
/* Unit price under the name duplicates the line total on the right; show it once. */
.wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-cart-item__prices { display: none !important; }

/* Quantity stepper and remove link: plain controls, not pills */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector button,
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector button:hover {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	color: var(--vk-ink) !important;
	box-shadow: none !important;
	font-size: 1em !important;
}
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector { border: 1px solid var(--vk-line); border-radius: 8px; }
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link,
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover {
	background: transparent !important; border: 0 !important; padding: 0 !important; min-height: 0 !important;
	color: var(--vk-text) !important; font-size: .85em !important; text-decoration: underline; box-shadow: none !important;
}

/* Footer buttons */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal { color: var(--vk-ink); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions button {
	border-radius: 999px !important;
	padding: 14px 20px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	transition: opacity .15s ease;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover {
	background: #fff !important;
	border: 2px solid var(--vk-ink) !important;
	color: var(--vk-ink) !important;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
	background: var(--vk-green) !important;
	border: 2px solid var(--vk-green) !important;
	color: #fff !important;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions button:hover { opacity: .85; }

/* Empty state "Start shopping" */
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a:hover {
	background: var(--vk-green) !important; border-color: var(--vk-green) !important; color: #fff !important; border-radius: 999px !important;
}

/* ---------- Product page add button states ---------- */
.single_add_to_cart_button.is-adding { opacity: .7; }
.single_add_to_cart_button.is-added  { background: var(--vk-green) !important; border-color: var(--vk-green) !important; }
.vk-add-error { margin: 10px 0 0; color: #A73B29; font-size: .92em; }

/* ---------- Checkout login modal ---------- */
.vk-login {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(440px, calc(100vw - 32px));
	width: 100%;
}
.vk-login::backdrop { background: rgba(38, 39, 43, .55); }
.vk-login *, .vk-login *::before, .vk-login *::after { box-sizing: border-box; }
.vk-login [hidden] { display: none !important; }
.vk-login__panel {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 28px 28px 22px;
	box-shadow: 0 24px 60px -24px rgba(0,0,0,.45);
	font-family: inherit;
	color: var(--vk-ink);
}
.vk-login__title { margin: 0 0 2px; font-size: 24px !important; font-weight: 700; color: var(--vk-ink); line-height: 1.1; letter-spacing: 0; text-transform: none; }
.vk-login__sub { margin: 0 0 9px; color: var(--vk-text); font-size: .95em; }
.vk-login__close, .vk-login__close:hover {
	position: absolute !important; top: 12px !important; right: 12px !important;
	width: 40px !important; height: 40px !important; min-height: 0 !important; padding: 8px !important; margin: 0 !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	color: var(--vk-ink) !important; line-height: 1 !important; transform: none !important;
}
.vk-login__close:hover { opacity: .65; }

.vk-login__tabs { display: flex; gap: 6px; padding: 4px; background: #F1EFEA; border-radius: 999px; margin-bottom: 18px; }
.vk-login__tab, .vk-login__tab:hover {
	flex: 1; padding: 10px 12px !important; min-height: 0 !important;
	border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
	color: var(--vk-text) !important; font: inherit !important; font-size: .88em !important; font-weight: 600 !important; cursor: pointer;
	white-space: nowrap; line-height: 1.2 !important;
}
.vk-login__tab.is-active, .vk-login__tab.is-active:hover { background: #fff !important; color: var(--vk-ink) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; }

.vk-login__form { display: flex; flex-direction: column; gap: 6px; }
.vk-login__form label { font-size: .85em; font-weight: 600; color: var(--vk-ink); margin-top: 6px; }
.vk-login__form input {
	width: 100%; padding: 12px 14px; font: inherit; color: var(--vk-ink);
	border: 1px solid var(--vk-line); border-radius: 10px; background: #fff;
}
.vk-login__form input:focus { outline: 2px solid var(--vk-green); outline-offset: 1px; border-color: var(--vk-green); }
.vk-login__help { margin: 0 0 6px; font-size: .9em; color: var(--vk-text); line-height: 1.45; }
.vk-login__submit, .vk-login__submit:hover {
	margin-top: 12px; padding: 14px 20px !important; min-height: 0 !important;
	border-radius: 999px !important; border: 2px solid var(--vk-green) !important;
	background: var(--vk-green) !important; color: #fff !important;
	font: inherit !important; font-weight: 700 !important; cursor: pointer; transition: opacity .15s ease;
}
.vk-login__submit:hover { opacity: .88; }
.vk-login__submit:disabled { opacity: .6; cursor: default; }
.vk-login__link, .vk-login__link:hover, .vk-login__link:focus, .vk-login__link:active {
	display: block !important; width: auto !important; align-self: flex-start;
	margin: 10px 0 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important; transform: none !important;
	color: var(--vk-text) !important; font: inherit !important; font-size: .88em !important; line-height: 1.4 !important; letter-spacing: 0 !important;
	text-decoration: underline; text-align: left !important; cursor: pointer;
}
.vk-login__notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; font-size: .92em; line-height: 1.45; }
.vk-login__notice.is-ok { background: #EEF6F0; color: #1F5A38; }
.vk-login__notice.is-error { background: #FBEAE7; color: #8A2E20; }
.vk-login__guest, .vk-login__guest:hover, .vk-login__guest:focus, .vk-login__guest:active {
	display: block !important; width: 100% !important;
	margin: 16px 0 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important; transform: none !important;
	color: var(--vk-text) !important; font: inherit !important; font-size: .88em !important; line-height: 1.4 !important; letter-spacing: 0 !important;
	text-decoration: underline; text-align: center !important; cursor: pointer;
}
.vk-login__link:hover, .vk-login__guest:hover { opacity: .7; }
