/* Clever Cart - frontend base styles */

.ccart-page { width: 100%; }
.ccart-page img { max-width: 100%; height: auto; }

/* Rows & columns */
.ccart-part .ccart-row,
.ccart-page-content .ccart-row {
	display: grid;
	gap: 24px;
	align-items: center;
}
.ccart-row-cols-1 { grid-template-columns: 1fr; }
.ccart-row-cols-2 { grid-template-columns: 1fr 1fr; }
.ccart-row-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ccart-row-cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Column Settings > Width: custom track list via CSS variable; the phone
   breakpoint's stacking rules below still override this. */
.ccart-row.ccart-row-customcols { grid-template-columns: var(--ccart-cols); }

/* Row vertical alignment (Row Settings > Vertical Alignment).
   Middle is the default; Stretch makes every column the same height. */
.ccart-row.ccart-valign-top { align-items: start; }
.ccart-row.ccart-valign-bottom { align-items: end; }
.ccart-row.ccart-valign-stretch { align-items: stretch; }

/* In a stretched row the columns become flex stacks so their content (and
   any element backgrounds) can fill the full column height. */
.ccart-valign-stretch .ccart-col {
	display: flex;
	flex-direction: column;
}
.ccart-valign-stretch .ccart-col > :only-child { flex: 1 1 auto; }

/* Per-element vertical alignment (Spacing & Background > Vertical
   Alignment). A column containing such an element stretches to the full
   row height; the element's inline auto margins then position it.
   Elements without an alignment keep sitting centered. */
.ccart-col-valign {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* In a Stretch (equal height) row the element's box always fills the
   column - the auto margins resolve to zero - and Vertical Alignment
   positions the CONTENT inside the stretched box instead. */
.ccart-valign-stretch .ccart-col > .ccart-el-valign-top,
.ccart-valign-stretch .ccart-col > .ccart-el-valign-middle,
.ccart-valign-stretch .ccart-col > .ccart-el-valign-bottom {
	display: flex;
	flex-direction: column;
}
.ccart-valign-stretch .ccart-col > .ccart-el-valign-top { justify-content: flex-start; }
.ccart-valign-stretch .ccart-col > .ccart-el-valign-middle { justify-content: center; }
.ccart-valign-stretch .ccart-col > .ccart-el-valign-bottom { justify-content: flex-end; }

/* Buttons */
.ccart-btn-front {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	transition: opacity .15s, background .15s;
}
.ccart-btn-front-solid { background: #2e7d52; color: #fff; }
.ccart-btn-front-solid:hover { background: #266845; color: #fff; }
.ccart-btn-front-outline { background: transparent; color: #2e7d52; border: 2px solid #2e7d52; }
.ccart-btn-front-outline:hover { background: #2e7d52; color: #fff; }

/* Navigation menu */
.ccart-el-menu ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ccart-el-menu a { text-decoration: none; color: inherit; font-weight: 500; }
.ccart-el-menu a:hover { text-decoration: underline; }

/* Search */
.ccart-el-search input[type="search"] {
	padding: 9px 14px;
	border: 1px solid #c9c9cf;
	border-radius: 6px;
	min-width: 200px;
	font-size: 14px;
}

/* Cart icon */
.ccart-el-cart { font-size: 22px; cursor: pointer; }

/* Logo */
.ccart-el-logo { display: inline-block; line-height: 0; }

/* Divider */
.ccart-el-divider { border: 0; border-top: 1px solid #dcdcde; margin: 10px 0; }

/* Product grid */
.ccart-el-product-grid { display: grid; gap: 24px; }
.ccart-pg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ccart-pg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ccart-pg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ccart-pg-item {
	border: 1px solid #e6e6ea;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .15s, transform .15s;
}
.ccart-pg-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.ccart-pg-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ccart-pg-item .ccart-pg-noimg { width: 100%; aspect-ratio: 1 / 1; background: #f0f0f1; }
.ccart-pg-info { padding: 12px 14px 16px; }
.ccart-pg-name { font-weight: 600; margin: 0 0 4px; }
.ccart-pg-price { color: #2e7d52; font-weight: 700; margin: 0; }

/* Featured product(s): cards sit side by side and wrap */
.ccart-el-featured {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.ccart-el-featured img { border-radius: 10px; }

/* Display Category cards sit side by side and wrap */
.ccart-el-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* YouTube video: fills its column at a 16:9 ratio */
.ccart-el-youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
}
.ccart-el-youtube iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Google Maps: fills its column; the element's Map Height setting renders
   as the iframe's min-height, so the map is always at least that tall and
   grows taller to match a bigger neighboring column in Stretch rows. */
.ccart-el-gmap {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.ccart-el-gmap iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ccart-valign-stretch .ccart-el-gmap { height: 100%; display: flex; }
.ccart-valign-stretch .ccart-el-gmap iframe { flex: 1 1 auto; }

/* Responsive */
@media (max-width: 782px) {
	.ccart-part .ccart-row,
	.ccart-page-content .ccart-row {
		grid-template-columns: 1fr;
	}
	/* Header rows stay on one line so the logo and menu button share a row. */
	.ccart-part-header .ccart-row-cols-2 { grid-template-columns: auto 1fr; }
	.ccart-part-header .ccart-row-cols-3 { grid-template-columns: auto 1fr auto; }
	.ccart-part-header .ccart-row-cols-4 { grid-template-columns: auto 1fr auto auto; }
	.ccart-el-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.ccart-el-menu ul { gap: 14px; }

	/* Featured Product and Display Category cards: two side by side on
	   phones and small tablets instead of one per row. The .ccart-page
	   ancestor outranks the desktop 260px card sizing rule further down. */
	.ccart-page .ccart-el-featured .ccart-pg-item,
	.ccart-page .ccart-el-categories .ccart-el-category {
		width: calc(50% - 12px);
		max-width: none;
		box-sizing: border-box;
	}
}
@media (max-width: 480px) {
	.ccart-el-product-grid { grid-template-columns: 1fr !important; }
}

/* Display Category card */
.ccart-el-category {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e6e6ea;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	max-width: 260px;
	width: 100%;
	transition: box-shadow .15s, transform .15s;
}
.ccart-el-category:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.ccart-el-category img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ccart-el-category .ccart-cat-noimg { display: block; width: 100%; aspect-ratio: 1 / 1; background: #f0f0f1; }
.ccart-el-category .ccart-cat-name {
	display: block;
	padding: 12px 14px;
	font-weight: 600;
	text-align: center;
}

/* Category listing view */
.ccart-category-listing { padding: 30px 0; }
.ccart-category-listing-title { margin: 0 0 24px; }
.ccart-category-empty { color: #6b6f76; }

/* Lazy loading sentinel */
.ccart-lazy-sentinel {
	display: flex;
	justify-content: center;
	padding: 26px 0 10px;
	min-height: 30px;
}
.ccart-lazy-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid #e0e0e4;
	border-top-color: #2e7d52;
	border-radius: 50%;
	opacity: 0;
	transition: opacity .2s;
}
.ccart-lazy-sentinel.loading .ccart-lazy-spinner {
	opacity: 1;
	animation: ccart-spin .7s linear infinite;
}
@keyframes ccart-spin { to { transform: rotate(360deg); } }

/* Category listing search: input with an attached Search button */
.ccart-listing-search { margin-bottom: 22px; }
.ccart-search-group {
	display: flex;
	width: 100%;
	max-width: 420px;
}
.ccart-listing-search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	max-width: none;
	padding: 11px 16px;
	border: 1px solid #c9c9cf;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	font-size: 15px;
	box-sizing: border-box;
}
.ccart-listing-search-input:focus {
	outline: none;
	border-color: #2e7d52;
	box-shadow: 0 0 0 3px rgba(46,125,82,.15);
}
.ccart-listing-search-btn {
	padding: 11px 22px;
	border: 1px solid #2e7d52;
	border-radius: 0 8px 8px 0;
	background: #2e7d52;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s;
}
.ccart-listing-search-btn:hover { opacity: .9; }

/* Centered rows */
.ccart-row-center { justify-items: center; text-align: center; }
.ccart-row-center .ccart-col { display: flex; flex-direction: column; align-items: center; }

/* In a centered row the Featured Product / Display Category wrappers can
   clamp to full width (their cards' natural width exceeds the container),
   so center the cards inside the wrapper too. */
.ccart-row-center .ccart-el-featured,
.ccart-row-center .ccart-el-categories {
	width: 100%;
	justify-content: center;
}

/* Featured product card sizing */
.ccart-el-featured .ccart-pg-item { max-width: 260px; width: 100%; }
.ccart-row-center .ccart-el-featured .ccart-pg-item { margin: 0 auto; }

/* Mobile navigation menu */
.ccart-menu-mobile { display: none; position: relative; }
.ccart-menu-toggle {
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	line-height: 0;
	display: inline-block;
}
.ccart-menu-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	min-width: 210px;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	border-radius: 10px;
	box-shadow: 0 8px 26px rgba(0,0,0,.16);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	text-align: left;
}
/* The dropdown is also a ul inside .ccart-el-menu, so it would inherit the
   desktop menu's inline-flex layout, which shrinks each li to its text and
   keeps hover backgrounds from spanning the panel. Force a block list. */
.ccart-el-menu ul.ccart-menu-dropdown {
	display: block;
	gap: 0;
}
.ccart-el-menu ul.ccart-menu-dropdown li {
	display: block;
	width: 100%;
}
.ccart-el-menu ul.ccart-menu-dropdown a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}
.ccart-menu-dropdown.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ccart-dd-right { right: 0; }
.ccart-dd-left { left: 0; }
.ccart-dd-center { left: 50%; transform: translate(-50%, -10px); }
.ccart-dd-center.open { transform: translate(-50%, 0); }
.ccart-menu-dropdown li { margin: 0; }
.ccart-menu-dropdown a {
	display: block;
	padding: 11px 18px;
	text-decoration: none;
	font-weight: 500;
	transition: background .15s;
}

@media (max-width: 1024px) {
	.ccart-el-menu .ccart-menu-desktop { display: none; }
	.ccart-menu-mobile { display: block; }

	/* The drop down stretches the full width of the screen. Position is
	   fixed to the viewport; frontend.js sets `top` just below the button.
	   Options are display:block, so the hover/press background stretches
	   across the screen too. */
	.ccart-menu-dropdown,
	.ccart-dd-left,
	.ccart-dd-right,
	.ccart-dd-center {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		min-width: 0;
		border-radius: 0;
		box-sizing: border-box;
		transform: translateY(-10px);
	}
	.ccart-menu-dropdown.open,
	.ccart-dd-center.open {
		transform: translateY(0);
	}
}

/* -------------------------------------------------------------------------
 * 1.11.0: product page, View Cart elements, cart dialog, and cart table.
 * ---------------------------------------------------------------------- */

/* Product cards are now links to their product page. */
a.ccart-pg-item { display: block; text-decoration: none; color: inherit; }
a.ccart-pg-item:hover { color: inherit; }

/* Product Template elements */
.ccart-el-product-image img { max-width: 100%; height: auto; border-radius: 10px; }
.ccart-el-product-name { margin: 0 0 10px; }
.ccart-el-product-price { font-size: 24px; font-weight: 700; color: #2e7d52; margin: 0 0 14px; }
.ccart-el-product-description { line-height: 1.6; margin: 0 0 16px; }
.ccart-el-add-to-cart .ccart-add-to-cart { cursor: pointer; font-size: 16px; }

/* Fallback product layout (used until the Product Template is built) */
.ccart-product-fallback { padding: 30px 20px; max-width: 1000px; margin: 0 auto; }
.ccart-product-fallback .ccart-pg-noimg { width: 100%; aspect-ratio: 1 / 1; background: #f0f0f1; border-radius: 10px; }

/* View Cart Icon element */
.ccart-el-view-cart-icon {
	position: relative;
	display: inline-block;
	font-size: 22px;
	text-decoration: none;
	line-height: 1;
}
.ccart-el-cart { position: relative; display: inline-block; line-height: 1; }
.ccart-cart-count {
	position: absolute;
	top: -8px;
	right: -12px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #2e7d52;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-family: inherit;
}
.ccart-cart-count[hidden] { display: none; }

/* "Added to cart" dialog */
.ccart-cart-dialog-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ccart-cart-dialog {
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	padding: 34px 30px 28px;
	max-width: 440px;
	width: 100%;
	text-align: center;
}
.ccart-cart-dialog-close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: #8c8f94;
	cursor: pointer;
	padding: 4px;
}
.ccart-cart-dialog-close:hover { color: #1d2327; }
.ccart-cart-dialog-check {
	width: 48px;
	height: 48px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #e6f4ec;
	color: #2e7d52;
	font-size: 26px;
	line-height: 48px;
}
.ccart-cart-dialog-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.ccart-cart-dialog-sub { margin: 0 0 20px; color: #50575e; }
.ccart-cart-dialog-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* View Cart page: cart contents */
.ccart-cart-area { max-width: 1000px; margin: 0 auto; padding: 30px 20px; }
.ccart-cart-loading { text-align: center; color: #50575e; padding: 30px 0; }
.ccart-cart-empty { text-align: center; padding: 40px 0; }
.ccart-cart-empty p { font-size: 17px; margin: 0 0 18px; }
.ccart-cart-table-wrap { overflow-x: auto; }
.ccart-cart-table { width: 100%; border-collapse: collapse; }
.ccart-cart-table th {
	text-align: left;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #50575e;
	padding: 10px 12px;
	border-bottom: 2px solid #e0e0e0;
}
.ccart-cart-table td { padding: 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
.ccart-cart-col-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.ccart-cart-noimg { display: block; width: 64px; height: 64px; background: #f0f0f1; border-radius: 8px; }
.ccart-cart-col-name { font-weight: 600; }
.ccart-cart-col-qty { white-space: nowrap; }
.ccart-cart-qty-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
.ccart-cart-qty-btn:hover { background: #f0f0f1; }
.ccart-cart-qty { display: inline-block; min-width: 30px; text-align: center; font-weight: 600; }
.ccart-cart-col-total { font-weight: 700; }
.ccart-cart-remove {
	border: 0;
	background: transparent;
	color: #b32d2e;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
}
.ccart-cart-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 2px solid #e0e0e0;
}
.ccart-cart-subtotal { font-size: 18px; }

@media (max-width: 600px) {
	.ccart-cart-table th:nth-child(3),
	.ccart-cart-table td.ccart-cart-col-price { display: none; }
	.ccart-cart-dialog-actions .ccart-btn-front { width: 100%; }
}

/* -------------------------------------------------------------------------
 * 1.12.0: checkout totals, coupon codes, Pay Now, payment notices.
 * ---------------------------------------------------------------------- */

.ccart-checkout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 2px solid #e0e0e0;
}
.ccart-checkout-left { flex: 1 1 340px; min-width: 280px; }
.ccart-checkout-totals {
	flex: 0 1 360px;
	min-width: 280px;
	margin-left: auto;
	background: #fafafa;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: 18px 20px;
}
.ccart-total-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	font-size: 15px;
}
.ccart-total-row.ccart-total-coupon span:last-child { color: #b32d2e; font-weight: 600; }
.ccart-total-row.ccart-total-sub {
	border-top: 1px solid #e0e0e0;
	margin-top: 6px;
	padding-top: 12px;
	font-weight: 600;
}
.ccart-total-row.ccart-total-due {
	border-top: 2px solid #d0d0d0;
	margin-top: 6px;
	padding-top: 12px;
	font-size: 18px;
	font-weight: 700;
}
.ccart-pay-now {
	display: block;
	width: 100%;
	margin-top: 14px;
	font-size: 16px;
	cursor: pointer;
	border: 0;
}
.ccart-pay-now:disabled { opacity: .55; cursor: not-allowed; }
.ccart-pay-error {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fcf0f1;
	border: 1px solid #f0b8bb;
	color: #8a1f21;
	font-size: 14px;
}
.ccart-pay-error[hidden] { display: none; }

/* Coupon Code */
.ccart-coupon-note { margin: 0 0 8px; color: #50575e; font-size: 13px; }
.ccart-coupon-messages:empty { display: none; }
.ccart-coupon-message {
	margin: 0 0 8px;
	padding: 9px 12px;
	border-radius: 8px;
	background: #fcf6e8;
	border: 1px solid #eccf8e;
	color: #6d5410;
	font-size: 14px;
}
.ccart-coupon-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ccart-coupon-label { font-weight: 600; }
.ccart-coupon-row input {
	flex: 1;
	min-width: 160px;
	padding: 9px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 14px;
}
.ccart-coupon-row .ccart-btn-front { cursor: pointer; }
.ccart-coupon-applied { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ccart-coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	background: #e6f4ec;
	border: 1px solid #bfe0cd;
	border-radius: 8px;
	font-size: 14px;
	width: fit-content;
	max-width: 100%;
}
.ccart-coupon-chip-code { font-weight: 700; color: #2e7d52; }
.ccart-coupon-chip-detail { color: #3c534a; }
.ccart-coupon-remove {
	border: 0;
	background: transparent;
	color: #b32d2e;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 2px;
}
.ccart-cart-continue { display: inline-block; margin-top: 16px; color: #2e7d52; text-decoration: none; font-weight: 600; }
.ccart-cart-continue:hover { text-decoration: underline; }

/* Payment return notices */
.ccart-cart-area-notice {
	max-width: 1000px;
	margin: 24px auto 0;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 15px;
}
.ccart-pay-notice-success { background: #e6f4ec; border: 1px solid #bfe0cd; color: #205a3b; }
.ccart-pay-notice-info { background: #f0f4f8; border: 1px solid #c8d4e0; color: #33475b; }
.ccart-pay-notice-error { background: #fcf0f1; border: 1px solid #f0b8bb; color: #8a1f21; }

@media (max-width: 782px) {
	.ccart-checkout { flex-direction: column; }
	.ccart-checkout-totals { width: 100%; flex-basis: auto; margin-left: 0; }
}