/* Site-wide brand tokens — unscoped (not gated behind a body class) since
   these should apply everywhere, not just the shop-branded pages below. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap");

:root {
	--primary: #006a3d;
	--primary-color: #006a3d;
	--btn-primary: #006a3d;
}

.btn-primary:hover,
.btn.btn-primary:hover {
	background-color: #00522e !important;
	border-color: #00522e !important;
}

h1, h2, h3, h4,
.page-header,
.section-title,
.navbar-brand span,
.hero-title {
	font-family: "Manrope", sans-serif;
}

.navbar-brand img {
	max-width: 220px !important;
	max-height: 40px !important;
}

body.super-chencho-webshop-page {
	--sc-web-primary: #006a3d;
	--sc-web-primary-2: #00522e;
	--sc-web-primary-soft: #e3f2ea;
	--sc-web-primary-tint: #70db9b;
	--sc-web-secondary: #fdbb29;
	--sc-web-secondary-soft: #fff3d6;
	--sc-web-berry: #7c3a55;
	--sc-web-ink: #1a1c1e;
	--sc-web-muted: #3e4a41;
	--sc-web-subtle: #6e7a70;
	--sc-web-line: #d6ded9;
	--sc-web-line-soft: rgba(110, 122, 112, 0.18);
	--sc-web-bg: #f9f9fc;
	--sc-web-surface: #ffffff;
	--sc-web-surface-low: #f3f3f6;
	--sc-web-surface-high: #e8e8ea;
	color: var(--sc-web-ink);
	font-family: "Inter", sans-serif;
	/* NOTE: a second body.super-chencho-webshop-page rule further down this
	   file (search for --sc-web-primary: #005c35) redeclares background with
	   !important and wins for that property — the actual background lives
	   there, not here. Kept here only for the color tokens. */
	background: linear-gradient(180deg, rgba(249, 249, 252, 0.98) 0%, rgba(249, 249, 252, 0.98) 58%, rgba(243, 243, 246, 0.94) 100%);
}

body.super-chencho-webshop-page h1,
body.super-chencho-webshop-page h2,
body.super-chencho-webshop-page h3,
body.super-chencho-webshop-page h4,
body.super-chencho-webshop-page .page-header,
body.super-chencho-webshop-page .section-title,
body.super-chencho-webshop-page .hero-title {
	font-family: "Manrope", sans-serif;
}

/* Home page blocks (Hero / Section with CTA / Product Category Cards) —
   these ship with Frappe's generic website styling, so the brand color
   needs the same !important treatment used for the shop pages above. */
/* add_container is off for this block (so the photo runs edge-to-edge),
   which also means Frappe won't wrap the content in its usual .container —
   pad the inner .hero div ourselves so the text isn't flush against the
   viewport edge. */
body.super-chencho-webshop-page section[data-section-template="Hero"] {
	background:
		linear-gradient(90deg, rgba(20, 24, 21, 0.35) 0%, rgba(20, 24, 21, 0.12) 55%, rgba(20, 24, 21, 0.05) 100%),
		url("/assets/super_chencho_core/img/login-market.png") no-repeat center center !important;
	background-size: cover !important;
	min-height: 480px;
}

body.super-chencho-webshop-page section[data-section-template="Hero"] .hero {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Frosted card behind the hero copy — guarantees legibility regardless of
   what part of the photo sits behind the text, instead of relying only on
   the section-wide gradient above. */
body.super-chencho-webshop-page section[data-section-template="Hero"] .hero-content {
	background: rgba(249, 249, 252, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 16px;
	padding: 32px 40px;
	max-width: 620px;
	display: inline-block;
}

/* Hero button styling for this page now lives entirely in the
   .sc-storefront-home rules further down (pill-shaped 999px radius here vs
   10px there - both !important, both matching with equal specificity, so
   whichever loaded last silently won and the two buttons ended up sized/
   shaped inconsistently depending on which sub-property each block still
   happened to touch). Removed rather than reconciled: nothing else needs
   this class combination, since .hero-buttons only ever renders on /home,
   where body always also carries sc-storefront-home. */

body.super-chencho-webshop-page .section-cta {
	background-color: var(--sc-web-primary-soft) !important;
}

body.super-chencho-webshop-page .section-cta .action a {
	color: var(--sc-web-primary-2) !important;
	font-weight: 700;
}

body.super-chencho-webshop-page .section-cta .action a:hover {
	color: var(--sc-web-primary) !important;
}

body.super-chencho-webshop-page .product-category-section .card {
	border: 1px solid var(--sc-web-line-soft) !important;
	border-radius: var(--product-card-radius, 16px) !important;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

body.super-chencho-webshop-page .product-category-section .card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(0, 106, 61, 0.12);
}

body.super-chencho-webshop-page .navbar,
body.super-chencho-webshop-page .web-navbar,
body.super-chencho-webshop-page header.navbar {
	background: rgba(255, 255, 255, 0.94) !important;
	border-bottom: 1px solid rgba(216, 222, 211, 0.86) !important;
	box-shadow: 0 6px 18px rgba(25, 28, 29, 0.05);
	backdrop-filter: blur(12px);
}

body.super-chencho-webshop-page .navbar-brand,
body.super-chencho-webshop-page .navbar a,
body.super-chencho-webshop-page .web-navbar a {
	color: var(--sc-web-muted) !important;
	font-weight: 600;
}

body.super-chencho-webshop-page .navbar-brand,
body.super-chencho-webshop-page .navbar .active,
body.super-chencho-webshop-page .navbar .nav-link.active,
body.super-chencho-webshop-page .web-navbar .active {
	color: var(--sc-web-primary) !important;
}

body.super-chencho-webshop-page .navbar .active,
body.super-chencho-webshop-page .navbar .nav-link.active,
body.super-chencho-webshop-page .web-navbar .active {
	border-color: var(--sc-web-primary) !important;
}

body.super-chencho-webshop-page main,
body.super-chencho-webshop-page .page-content,
body.super-chencho-webshop-page .page-content-wrapper,
body.super-chencho-webshop-page .container {
	letter-spacing: 0;
}

body.super-chencho-webshop-page .page-title,
body.super-chencho-webshop-page .page-header h1,
body.super-chencho-webshop-page h1 {
	color: var(--sc-web-primary);
	font-weight: 800;
	letter-spacing: 0;
}

body.super-chencho-webshop-page h2,
body.super-chencho-webshop-page h3,
body.super-chencho-webshop-page h4,
body.super-chencho-webshop-page .item-title,
body.super-chencho-webshop-page .card-title {
	color: var(--sc-web-ink);
	font-weight: 700;
	letter-spacing: 0;
}

body.super-chencho-webshop-page .breadcrumb,
body.super-chencho-webshop-page .text-muted,
body.super-chencho-webshop-page .item-subtitle,
body.super-chencho-webshop-page .product-category,
body.super-chencho-webshop-page .small {
	color: var(--sc-web-subtle) !important;
}

body.super-chencho-webshop-page a {
	color: var(--sc-web-primary-2);
}

body.super-chencho-webshop-page a:hover {
	color: var(--sc-web-primary);
}

body.super-chencho-webshop-page .btn-primary,
body.super-chencho-webshop-page .btn.btn-primary,
body.super-chencho-webshop-page .cart-btn,
body.super-chencho-webshop-page .add-to-cart-btn {
	background: var(--sc-web-primary-2) !important;
	border-color: var(--sc-web-primary-2) !important;
	color: #ffffff !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 18px rgba(21, 66, 18, 0.16);
	font-weight: 700;
}

body.super-chencho-webshop-page .btn-primary:hover,
body.super-chencho-webshop-page .btn.btn-primary:hover,
body.super-chencho-webshop-page .cart-btn:hover,
body.super-chencho-webshop-page .add-to-cart-btn:hover {
	background: var(--sc-web-primary) !important;
	border-color: var(--sc-web-primary) !important;
	box-shadow: 0 10px 22px rgba(21, 66, 18, 0.22);
}

body.super-chencho-webshop-page .btn-default,
body.super-chencho-webshop-page .btn-secondary,
body.super-chencho-webshop-page .btn-light {
	border-color: var(--sc-web-line-soft) !important;
	color: var(--sc-web-primary) !important;
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 999px !important;
	font-weight: 650;
}

body.super-chencho-webshop-page input[type="search"],
body.super-chencho-webshop-page input[type="text"],
body.super-chencho-webshop-page input[type="email"],
body.super-chencho-webshop-page .form-control,
body.super-chencho-webshop-page .awesomplete > input {
	background: var(--sc-web-surface) !important;
	border: 1px solid var(--sc-web-line-soft) !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 14px rgba(25, 28, 29, 0.035);
	color: var(--sc-web-ink) !important;
}

/* Pill shape reserved for actual search bars (navbar/toolbar search) — a
   plain form field (email, subject, message) reads better as a normal
   lightly-rounded input, and a textarea/select with a 999px radius looks
   broken either way. */
body.super-chencho-webshop-page input[type="search"],
body.super-chencho-webshop-page .awesomplete > input {
	border-radius: 999px !important;
}

body.super-chencho-webshop-page input[type="search"]:focus,
body.super-chencho-webshop-page input[type="text"]:focus,
body.super-chencho-webshop-page input[type="email"]:focus,
body.super-chencho-webshop-page .form-control:focus,
body.super-chencho-webshop-page .awesomplete > input:focus {
	border-color: rgba(45, 90, 39, 0.46) !important;
	box-shadow: 0 0 0 3px rgba(161, 212, 148, 0.28) !important;
}

body.super-chencho-webshop-page .page-card,
body.super-chencho-webshop-page .card,
body.super-chencho-webshop-page .web-list-item,
body.super-chencho-webshop-page .product-card {
	background: rgba(255, 255, 255, 0.88) !important;
	border: 1px solid var(--sc-web-line-soft) !important;
	border-radius: var(--product-card-radius, 16px) !important;
	box-shadow: 0 10px 24px rgba(25, 28, 29, 0.055);
}

body.super-chencho-webshop-page .product-card {
	overflow: hidden;
	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		border-color 160ms ease;
}

body.super-chencho-webshop-page .product-card:hover {
	transform: translateY(-2px);
	border-color: rgba(45, 90, 39, 0.32) !important;
	box-shadow: 0 16px 34px rgba(21, 66, 18, 0.11);
}

/* .item-card is the grid column wrapper around the real .card in webshop's
   product listing — it must stay unstyled or every product shows a double
   border/shadow (outer wrapper + inner card). */
body.super-chencho-webshop-page .item-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body.super-chencho-webshop-page .product-card img,
body.super-chencho-webshop-page .item-card img,
body.super-chencho-webshop-page .product-image img,
body.super-chencho-webshop-page .website-image-lazy {
	background: var(--sc-web-surface-low);
	border-radius: 6px;
}

body.super-chencho-webshop-page .badge,
body.super-chencho-webshop-page .indicator-pill,
body.super-chencho-webshop-page .list-group-item.active {
	background: var(--sc-web-secondary-soft) !important;
	color: #5b4300 !important;
	border: 1px solid rgba(253, 192, 3, 0.42) !important;
}

body.super-chencho-webshop-page .sidebar-column,
body.super-chencho-webshop-page .web-sidebar,
body.super-chencho-webshop-page .filter-options,
body.super-chencho-webshop-page .filter-section {
	color: var(--sc-web-muted);
}

body.super-chencho-webshop-page .pagination .page-link,
body.super-chencho-webshop-page .page-link {
	border-color: var(--sc-web-line-soft) !important;
	color: var(--sc-web-primary-2) !important;
	background: rgba(255, 255, 255, 0.86) !important;
}

body.super-chencho-webshop-page .pagination .active .page-link,
body.super-chencho-webshop-page .page-item.active .page-link {
	background: var(--sc-web-primary-2) !important;
	border-color: var(--sc-web-primary-2) !important;
	color: #ffffff !important;
}

body.super-chencho-webshop-page .web-footer {
	background: var(--sc-web-surface-low) !important;
	color: var(--sc-web-muted) !important;
	border-top: 1px solid var(--sc-web-line);
}

body.super-chencho-webshop-page .web-footer a,
body.super-chencho-webshop-page .web-footer .footer-link {
	color: var(--sc-web-primary-2) !important;
}

body.super-chencho-webshop-page .web-footer a:hover,
body.super-chencho-webshop-page .web-footer .footer-link:hover {
	color: var(--sc-web-primary) !important;
}

body.super-chencho-webshop-page .web-footer .footer-powered a {
	color: var(--sc-web-subtle) !important;
}

@media (max-width: 767px) {
	body.super-chencho-webshop-page .page-card,
	body.super-chencho-webshop-page .card,
	body.super-chencho-webshop-page .web-list-item,
	body.super-chencho-webshop-page .product-card {
		border-radius: var(--product-card-radius, 16px) !important;
	}
}

/* Product catalog layout polish — scoped to the catalog pages specifically
   (by id, not the shared body class) so it doesn't cap unrelated pages like
   /home, which needs its Hero section to run edge-to-edge. */
#page-all-products .page-content-wrapper,
#page-all-products .page-content,
[data-doctype="Item Group"] .page-content-wrapper,
[data-doctype="Item Group"] .page-content,
body.super-chencho-webshop-page main > .container {
	max-width: 1280px;
	margin-inline: auto;
}

body.super-chencho-webshop-page .shop-container,
body.super-chencho-webshop-page .website-list,
body.super-chencho-webshop-page .products,
body.super-chencho-webshop-page .item-group-content {
	gap: 18px;
}

body.super-chencho-webshop-page .product-card,
body.super-chencho-webshop-page .item-card {
	min-height: 340px;
	display: flex;
	flex-direction: column;
}

body.super-chencho-webshop-page .product-card .card-body,
body.super-chencho-webshop-page .item-card .card-body,
body.super-chencho-webshop-page .web-list-item .card-body {
	padding: 18px;
}

body.super-chencho-webshop-page .product-image,
body.super-chencho-webshop-page .item-image {
	min-height: 190px;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, var(--sc-web-surface-low), #ffffff);
	border-radius: 8px;
}

body.super-chencho-webshop-page .product-card img,
body.super-chencho-webshop-page .item-card img,
body.super-chencho-webshop-page .product-image img,
body.super-chencho-webshop-page .website-image-lazy {
	max-height: 220px;
	width: 100%;
	object-fit: contain;
	padding: 14px;
}

body.super-chencho-webshop-page .product-card .item-title,
body.super-chencho-webshop-page .item-card .item-title,
body.super-chencho-webshop-page .product-card .card-title,
body.super-chencho-webshop-page .item-card .card-title {
	font-size: 0.98rem;
	line-height: 1.35;
	min-height: 2.6em;
}

body.super-chencho-webshop-page .sidebar-column,
body.super-chencho-webshop-page .web-sidebar {
	padding-top: 8px;
}

body.super-chencho-webshop-page .search-bar,
body.super-chencho-webshop-page .product-search {
	margin-bottom: 18px;
}

/* Icon injected via webshop_branding.js to replace the plain letter
   abbreviation webshop's "Product Category Cards" block shows when an
   Item Group has no image. */
.sc-category-icon-circle {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(17, 43, 66, 0.08), 0 1px 4px rgba(17, 43, 66, 0.1);
	--icon-stroke: var(--sc-web-primary, #006a3d);
}

.sc-category-icon-circle .icon {
	width: 32px;
	height: 32px;
	stroke-width: 2px;
}

/* frappe's website bundle has a bare ".icon { stroke: var(--text-light) }"
   rule (scss/website/portal.scss) that applies on every website page and
   hardcodes every single icon to a flat neutral gray, completely bypassing
   the --icon-stroke custom property desk buttons/pages use to tint icons by
   context (e.g. white on an active green button, or brand green next to a
   form label). Re-establish that mechanism once for the whole storefront —
   already had to patch this per-instance twice (view toggler, contact form
   labels) before generalizing it here. Falls back to currentColor so icons
   that don't bother setting --icon-stroke still just match their own text
   color instead of the imposed gray. */
body.super-chencho-webshop-page .icon {
	stroke: var(--icon-stroke, currentColor);
}

/* Icon injected via webshop_branding.js to replace the plain gray box +
   single-letter fallback webshop shows for products with no image
   (.no-image / .no-image-list / .no-image-item), so an incomplete catalog
   entry still looks intentional next to real product photos. */
.no-image,
.no-image-list,
.no-image-item {
	background: linear-gradient(180deg, var(--sc-web-surface-low, #f4f8f2), #ffffff) !important;
}

.sc-product-icon-circle {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(17, 43, 66, 0.08), 0 1px 4px rgba(17, 43, 66, 0.1);
	--icon-stroke: var(--sc-web-primary, #006a3d);
}

.sc-product-icon-circle .icon {
	width: 28px;
	height: 28px;
	stroke-width: 1.8px;
}

/* Filters sidebar collapsed by webshop_branding.js's hideEmptyFiltersSidebar()
   when Webshop Settings has no filterable fields/attributes configured — an
   empty "Filters" card next to the grid otherwise looks unfinished. */
body.super-chencho-webshop-page .sc-filters-hidden {
	display: none !important;
}

/* Add to Cart / Explore buttons on the product listing are hidden until
   hover by default — make them always visible for easier discovery. */
body.super-chencho-webshop-page .btn-add-to-cart-list,
body.super-chencho-webshop-page .btn-explore-variants {
	visibility: visible !important;
}

/* Filters sidebar — plain unstyled list by default, turn it into a proper
   card so it doesn't look broken/empty next to the product grid. */
body.super-chencho-webshop-page .filters-section {
	background: #fff !important;
	border: 1px solid var(--sc-web-line-soft) !important;
	border-radius: 16px !important;
	padding: 20px !important;
}

body.super-chencho-webshop-page .filters-section .title-section {
	border-bottom: 1px solid var(--sc-web-line);
	padding-bottom: 8px;
}

body.super-chencho-webshop-page .filters-section .filters-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--sc-web-ink);
}

body.super-chencho-webshop-page .filters-section .clear-filters {
	color: var(--sc-web-primary-2) !important;
	font-weight: 600;
}

body.super-chencho-webshop-page .filters-section .filter-block {
	border-bottom: 1px solid var(--sc-web-line);
	padding-bottom: 12px !important;
	margin-bottom: 12px !important;
}

body.super-chencho-webshop-page .filters-section .filter-block:last-child {
	border-bottom: none;
}

body.super-chencho-webshop-page .filters-section input[type="checkbox"],
body.super-chencho-webshop-page .filters-section input[type="radio"] {
	accent-color: var(--sc-web-primary-2);
}

/* View-toggle (list/grid) buttons in the toolbar. */
body.super-chencho-webshop-page #toggle-view .btn {
	border-radius: 999px !important;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body.super-chencho-webshop-page #toggle-view .btn-primary {
	background-color: var(--sc-web-primary-2) !important;
	border-color: var(--sc-web-primary-2) !important;
}

/* Pagination Prev/Next buttons. */
body.super-chencho-webshop-page .btn-prev,
body.super-chencho-webshop-page .btn-next {
	border-radius: 999px !important;
	padding: 0.5rem 1.25rem !important;
}

/* "No products found" / empty cart state. */
body.super-chencho-webshop-page .cart-empty.frappe-card {
	background: #fff !important;
	border: 1px solid var(--sc-web-line-soft) !important;
	border-radius: 16px !important;
}

body.super-chencho-webshop-page .cart-empty-state img {
	opacity: 0.6;
	max-width: 140px;
}

/* "Section with Features" ("¿Por qué comprar con nosotros?") — turn the
   plain text columns into cards, and make room for the icon injected by
   webshop_branding.js (that block's template only supports an uploaded
   image, not an icon, so we add one via DOM patch instead). */
body.super-chencho-webshop-page .section-feature {
	background: #fff;
	border: 1px solid var(--sc-web-line-soft);
	border-radius: 16px;
	padding: 28px 24px;
	box-shadow: 0 10px 24px rgba(25, 28, 29, 0.05);
	text-align: center;
	align-items: center;
}

.sc-feature-icon-circle {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: var(--sc-web-primary-2, #00522e);
	--icon-stroke: #ffffff;
	margin: 0 auto 1.25rem;
}

.sc-feature-icon-circle .icon {
	width: 26px;
	height: 26px;
	stroke-width: 2px;
	stroke: #ffffff !important;
	color: #ffffff !important;
}

/* Native <select> loses its arrow once .form-control's rounded/border
   styling resets its appearance — add one back so it reads as a dropdown
   (affects e.g. the "General/.../..." subject field on /contact). */
body.super-chencho-webshop-page select.form-control {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	/* the generic .form-control rule above sets the `background` shorthand
	   with !important, which resets background-image to none — every
	   sub-property here needs its own !important to survive that. */
	background-color: var(--sc-web-surface) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7a70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 16px !important;
	padding-right: 42px !important;
}


/* Super Chencho storefront refresh - keep this block last so it gently
   overrides older shop styling without touching ERPNext/Webshop templates. */
body.super-chencho-webshop-page {
	--sc-web-primary: #005c35;
	--sc-web-primary-2: #003f28;
	--sc-web-primary-soft: #e8f4ec;
	--sc-web-secondary: #f4b740;
	--sc-web-ink: #14251b;
	--sc-web-muted: #405348;
	--sc-web-subtle: #738278;
	--sc-web-line: rgba(26, 71, 46, 0.14);
	--sc-web-line-soft: rgba(26, 71, 46, 0.11);
	--sc-web-bg: #f5f8f3;
	--sc-web-surface-low: #f7faf6;
	/* A flat 3-stop gradient here used to fully override the other rule's
	   radial "blobs" (this one wins: same specificity, later in the file).
	   On short pages (e.g. /contact, mostly empty below a small card) that
	   made everything past the first screenful look flat and blank. Bring
	   the blobs back, spread across more of the viewport, and pin them with
	   background-attachment so they stay visible regardless of page height
	   or scroll position instead of being anchored to the body's own
	   (variable) height. */
	background:
		linear-gradient(180deg, #f7faf6 0%, #f2f7f0 52%, #eef5ec 100%),
		radial-gradient(circle at 10% 4%, rgba(112, 219, 155, 0.38), transparent 42%),
		radial-gradient(circle at 94% 12%, rgba(244, 183, 64, 0.32), transparent 38%),
		radial-gradient(circle at 86% 72%, rgba(112, 219, 155, 0.3), transparent 40%),
		radial-gradient(circle at 2% 66%, rgba(244, 183, 64, 0.26), transparent 36%)
		!important;
	background-attachment: fixed !important;
}

body.super-chencho-webshop-page .navbar,
body.super-chencho-webshop-page .web-navbar,
body.super-chencho-webshop-page header.navbar {
	background: rgba(255, 255, 255, 0.96) !important;
	box-shadow: 0 8px 24px rgba(20, 37, 27, 0.06);
}

body.super-chencho-webshop-page section[data-section-template="Hero"],
body.super-chencho-webshop-page .sc-home-hero,
body.super-chencho-webshop-page .hero-section,
body.super-chencho-webshop-page .webshop-hero {
	background:
		linear-gradient(135deg, rgba(0, 50, 32, 0.98), rgba(0, 86, 49, 0.94) 56%, rgba(19, 105, 58, 0.9)) !important;
	color: #fff !important;
	border-radius: 10px !important;
	box-shadow: 0 22px 52px rgba(0, 63, 40, 0.18);
}

body.super-chencho-webshop-page section[data-section-template="Hero"] .hero-content {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-radius: 0 !important;
	padding: 42px 44px !important;
	max-width: 720px !important;
	box-shadow: none !important;
}

body.super-chencho-webshop-page section[data-section-template="Hero"] h1,
body.super-chencho-webshop-page section[data-section-template="Hero"] h2,
body.super-chencho-webshop-page section[data-section-template="Hero"] p,
body.super-chencho-webshop-page .sc-home-hero h1,
body.super-chencho-webshop-page .sc-home-hero h2,
body.super-chencho-webshop-page .hero-section h1,
body.super-chencho-webshop-page .hero-section h2,
body.super-chencho-webshop-page .webshop-hero h1,
body.super-chencho-webshop-page .webshop-hero h2 {
	color: #fff !important;
}

#page-all-products .page-content-wrapper,
#page-all-products .page-content,
[data-doctype="Item Group"] .page-content-wrapper,
[data-doctype="Item Group"] .page-content,
body.super-chencho-webshop-page main > .container {
	max-width: 1160px;
}

/* Breathing room before the footer — the product grid/empty-state card
   otherwise sits flush against it with no visual separation. */
body.super-chencho-webshop-page:not(.sc-storefront-home) main {
	padding-bottom: 56px;
}

/* Icons injected via webshop_branding.js's applyStorefrontFooterIcons() for
   the standard (non-/home) footer, so it doesn't read as a bare list of
   text links. */
body.super-chencho-webshop-page .footer-link .sc-footer-icon,
body.super-chencho-webshop-page .footer-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 6px;
	vertical-align: -3px;
	--icon-stroke: currentColor;
	opacity: 0.85;
}

body.super-chencho-webshop-page .footer-info-line {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

body.super-chencho-webshop-page .filters-section {
	background: rgba(255, 255, 255, 0.86) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

body.super-chencho-webshop-page .product-card,
body.super-chencho-webshop-page .item-card {
	min-height: 300px;
}

body.super-chencho-webshop-page .product-card,
body.super-chencho-webshop-page .card.product-card,
body.super-chencho-webshop-page .web-list-item {
	border-radius: 10px !important;
	box-shadow: 0 12px 28px rgba(20, 37, 27, 0.07) !important;
}

body.super-chencho-webshop-page .product-image,
body.super-chencho-webshop-page .item-image {
	min-height: 170px;
	background:
		linear-gradient(180deg, #fbfdfb, #f4f8f2) !important;
	border-radius: 8px;
}

body.super-chencho-webshop-page .product-card img,
body.super-chencho-webshop-page .item-card img,
body.super-chencho-webshop-page .product-image img,
body.super-chencho-webshop-page .website-image-lazy {
	max-height: 190px;
	padding: 10px;
}

body.super-chencho-webshop-page .web-footer {
	min-height: 96px;
	padding: 28px 0 !important;
	background: #073b27 !important;
	color: rgba(255, 255, 255, 0.74) !important;
	/* body is display:flex with a viewport-capped height on these pages;
	   without this the footer (flex-shrink:1 by default) shrinks below its
	   own content's height and the overflow (copyright/address/powered-by
	   lines) spills out past the green background onto the page below. Same
	   root cause already fixed for .sc-storefront-home's footer, just never
	   applied to the rest of the storefront pages. */
	flex-shrink: 0;
}

body.super-chencho-webshop-page .web-footer a,
body.super-chencho-webshop-page .web-footer .footer-link,
body.super-chencho-webshop-page .web-footer .footer-powered a {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* frappe's own ".footer-info { color: #7c7c7c }" targets the copyright/hours
   block directly, so it wins over the plain inheritance from .web-footer's
   color above (a rule that only sets color on .web-footer itself has no
   power over a descendant that has its own, even weaker, color rule) —
   the address/hours line was rendering in a fixed gray that barely showed
   up against the dark green. Target it directly instead. */
body.super-chencho-webshop-page .web-footer .footer-info,
body.super-chencho-webshop-page .web-footer .footer-info-line,
body.super-chencho-webshop-page .web-footer .footer-powered {
	color: rgba(255, 255, 255, 0.74) !important;
}

/* Storefront home — intentionally scoped to /home so the catalog keeps its
   denser commerce layout while the landing page gets a clear editorial flow. */
body.sc-storefront-home {
	--sc-home-width: 1180px;
	--sc-home-gutter: clamp(18px, 4vw, 40px);
	--sc-home-radius: 22px;
	background: #f6f8f4 !important;
}

body.sc-storefront-home .page-content-wrapper,
body.sc-storefront-home .page-content,
body.sc-storefront-home main {
	overflow: visible;
}

body.sc-storefront-home .page-content-wrapper > .container,
body.sc-storefront-home .page-content > .container {
	max-width: none !important;
	padding: 0 !important;
}

body.sc-storefront-home section[data-section-template="Hero"] {
	position: relative;
	width: min(calc(100% - (var(--sc-home-gutter) * 2)), var(--sc-home-width));
	min-height: 520px;
	margin: 26px auto 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sc-home-radius) !important;
	background:
		linear-gradient(90deg, rgba(5, 47, 31, 0.94) 0%, rgba(5, 47, 31, 0.8) 42%, rgba(5, 47, 31, 0.22) 74%, rgba(5, 47, 31, 0.08) 100%),
		url("/assets/super_chencho_core/img/login-market.png") center 52% / cover no-repeat !important;
	box-shadow: 0 24px 60px rgba(16, 53, 34, 0.18);
}

body.sc-storefront-home section[data-section-template="Hero"]::after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 42%;
	height: 5px;
	background: var(--sc-web-secondary);
	content: "";
}

body.sc-storefront-home section[data-section-template="Hero"] .hero {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	min-height: 520px;
	max-width: none;
	padding: clamp(46px, 7vw, 82px);
	align-items: center;
}

body.sc-storefront-home section[data-section-template="Hero"] .hero-content {
	display: block !important;
	width: min(100%, 650px);
	max-width: 650px !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: #fff;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.sc-storefront-home .sc-home-eyebrow {
	display: inline-flex;
	padding: 8px 12px;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.94);
	background: rgba(255, 255, 255, 0.1);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

body.sc-storefront-home .sc-home-eyebrow .icon {
	width: 16px;
	height: 16px;
	color: #fff;
	stroke: #fff;
	--icon-stroke: #fff;
}

body.sc-storefront-home section[data-section-template="Hero"] h1,
body.sc-storefront-home section[data-section-template="Hero"] h2,
body.sc-storefront-home section[data-section-template="Hero"] .hero-title {
	max-width: 620px;
	margin: 20px 0 16px;
	color: #fff !important;
	font-size: clamp(38px, 5vw, 62px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

body.sc-storefront-home section[data-section-template="Hero"] p,
body.sc-storefront-home section[data-section-template="Hero"] .hero-subtitle {
	max-width: 570px;
	margin: 0;
	color: rgba(255, 255, 255, 0.84) !important;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.65;
}

body.sc-storefront-home .hero-buttons {
	display: flex;
	margin-top: 28px;
	flex-wrap: wrap;
	gap: 12px;
}

body.sc-storefront-home .hero-buttons .btn {
	display: inline-flex;
	min-height: 48px;
	padding: 0 22px;
	align-items: center;
	justify-content: center;
	border-radius: 10px !important;
	font-size: 15px;
	font-weight: 750;
	box-shadow: none;
}

body.sc-storefront-home .hero-buttons .btn-dark {
	border-color: #fff !important;
	color: var(--sc-web-primary-2) !important;
	background: #fff !important;
}

body.sc-storefront-home .hero-buttons .btn-dark:hover {
	border-color: #f2f6f1 !important;
	background: #f2f6f1 !important;
	transform: translateY(-1px);
}

body.sc-storefront-home .hero-buttons .btn-light {
	border-color: rgba(255, 255, 255, 0.38) !important;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

body.sc-storefront-home .hero-buttons .btn-light:hover {
	border-color: rgba(255, 255, 255, 0.62) !important;
	background: rgba(255, 255, 255, 0.15) !important;
}

body.sc-storefront-home .sc-home-assurances {
	display: flex;
	margin-top: 34px;
	flex-wrap: wrap;
	gap: 10px 22px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	font-weight: 650;
}

body.sc-storefront-home .sc-home-assurances span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

body.sc-storefront-home .sc-home-assurances .icon {
	width: 15px;
	height: 15px;
	color: #fff;
	stroke: #fff;
	--icon-stroke: #fff;
}

body.sc-storefront-home section:not([data-section-template="Hero"]) > .container,
body.sc-storefront-home .sc-home-categories,
body.sc-storefront-home .sc-home-benefits,
body.sc-storefront-home .sc-home-cta {
	width: min(calc(100% - (var(--sc-home-gutter) * 2)), var(--sc-home-width));
	max-width: var(--sc-home-width) !important;
	margin-inline: auto;
}

body.sc-storefront-home section:not([data-section-template="Hero"]) {
	padding-block: clamp(58px, 7vw, 88px) !important;
}

body.sc-storefront-home section:not([data-section-template="Hero"]) + section:not([data-section-template="Hero"]) {
	padding-top: 0 !important;
}

body.sc-storefront-home .section-title,
body.sc-storefront-home section:not([data-section-template="Hero"]):not(.sc-home-cta-section) h2 {
	margin-bottom: 10px;
	color: var(--sc-web-ink) !important;
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-align: left;
}

body.sc-storefront-home section:not([data-section-template="Hero"]):not(.sc-home-cta-section) .section-description,
body.sc-storefront-home section:not([data-section-template="Hero"]):not(.sc-home-cta-section) .subtitle {
	max-width: 620px;
	margin-bottom: 30px;
	color: var(--sc-web-subtle) !important;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

/* This app's own responsive grid for the category cards - webshop's
   current template markup wraps them in .card-grid (see
   webshop/webshop/web_template/product_category_cards/product_category_cards.html),
   not the Bootstrap .row/.col classes these rules were originally written
   for. Left unmatched, the page fell back to webshop's own .card-grid
   default (repeat(auto-fit, minmax(120px, 1fr)) - see webshop_cart.scss),
   which on a narrow phone only fits 2 cramped columns and clips longer
   category names like "Golosinas y Snacks". */
body.sc-storefront-home .product-category-section .card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

body.sc-storefront-home .product-category-section .card {
	height: 100%;
	min-height: 220px;
	overflow: hidden;
	border: 1px solid var(--sc-web-line) !important;
	border-radius: 14px !important;
	background: #fff !important;
	box-shadow: 0 8px 22px rgba(20, 37, 27, 0.055) !important;
}

body.sc-storefront-home .product-category-section .card:hover {
	border-color: rgba(0, 92, 53, 0.3) !important;
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(20, 73, 46, 0.11) !important;
}

body.sc-storefront-home .product-category-section .placeholder-div,
body.sc-storefront-home .product-category-section .card-img-top {
	height: 150px !important;
	background: linear-gradient(145deg, #f1f7f1, #f8faf7) !important;
}

body.sc-storefront-home .sc-category-icon-circle {
	width: 62px;
	height: 62px;
	border: 1px solid rgba(0, 92, 53, 0.1);
	color: var(--sc-web-primary);
	background: #fff;
	box-shadow: 0 8px 20px rgba(20, 73, 46, 0.08);
}

body.sc-storefront-home .product-category-section .card-body {
	display: flex;
	min-height: 68px;
	padding: 16px 18px !important;
	align-items: center;
	color: var(--sc-web-ink);
	font-size: 15px;
	font-weight: 750;
}

body.sc-storefront-home .sc-home-benefits {
	padding: clamp(34px, 5vw, 54px) !important;
	border: 1px solid var(--sc-web-line);
	border-radius: var(--sc-home-radius);
	background: #eef5ed;
}

body.sc-storefront-home .sc-home-benefits .row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 30px 0 0;
}

body.sc-storefront-home .sc-home-benefits .row > [class*="col"] {
	width: auto;
	max-width: none;
	padding: 0;
}

body.sc-storefront-home .section-feature {
	height: 100%;
	padding: 26px 24px;
	align-items: flex-start;
	border: 1px solid rgba(0, 92, 53, 0.1);
	border-radius: 14px;
	text-align: left;
	box-shadow: none;
}

body.sc-storefront-home .sc-feature-icon-circle {
	width: 46px;
	height: 46px;
	margin: 0 0 20px;
	border-radius: 12px;
	background: var(--sc-web-primary-2);
}

body.sc-storefront-home .section-feature .feature-title {
	color: var(--sc-web-ink);
	font-size: 18px;
	font-weight: 800;
}

body.sc-storefront-home .section-feature .feature-content {
	color: var(--sc-web-subtle);
	font-size: 14px;
	line-height: 1.65;
}

body.sc-storefront-home .sc-home-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 5vw, 56px) !important;
	border-radius: var(--sc-home-radius);
	color: #fff;
	background: var(--sc-web-primary-2) !important;
}

body.sc-storefront-home .sc-home-cta::after {
	position: absolute;
	top: -90px;
	right: -50px;
	width: 260px;
	height: 260px;
	border: 55px solid rgba(255, 255, 255, 0.055);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

body.sc-storefront-home .sc-home-cta h2,
body.sc-storefront-home .sc-home-cta .section-title,
body.sc-storefront-home .sc-home-cta p,
body.sc-storefront-home .sc-home-cta .subtitle {
	position: relative;
	z-index: 1;
	color: #fff !important;
}

body.sc-storefront-home .sc-home-cta .action,
body.sc-storefront-home .sc-home-cta .cta-button {
	position: relative;
	z-index: 1;
}

body.sc-storefront-home .sc-home-cta .action a,
body.sc-storefront-home .sc-home-cta .btn {
	display: inline-flex;
	min-height: 48px;
	padding: 0 22px;
	align-items: center;
	border-radius: 10px !important;
	color: var(--sc-web-primary-2) !important;
	background: #fff !important;
	font-weight: 800;
}

body.sc-storefront-home .web-footer {
	margin-top: clamp(64px, 8vw, 100px);
}

@media (max-width: 900px) {
	body.sc-storefront-home section[data-section-template="Hero"],
	body.sc-storefront-home section[data-section-template="Hero"] .hero {
		min-height: 500px;
	}

	body.sc-storefront-home section[data-section-template="Hero"] {
		background:
			linear-gradient(90deg, rgba(5, 47, 31, 0.94), rgba(5, 47, 31, 0.68)),
			url("/assets/super_chencho_core/img/login-market.png") 64% center / cover no-repeat !important;
	}

	body.sc-storefront-home .product-category-section .card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	body.sc-storefront-home {
		--sc-home-gutter: 14px;
		--sc-home-radius: 16px;
	}

	body.sc-storefront-home section[data-section-template="Hero"] {
		min-height: 540px;
		margin-top: 14px;
	}

	body.sc-storefront-home section[data-section-template="Hero"] .hero {
		min-height: 540px;
		padding: 40px 24px;
		align-items: flex-end;
	}

	body.sc-storefront-home section[data-section-template="Hero"] h1,
	body.sc-storefront-home section[data-section-template="Hero"] h2,
	body.sc-storefront-home section[data-section-template="Hero"] .hero-title {
		font-size: clamp(34px, 10vw, 46px);
	}

	body.sc-storefront-home .sc-home-assurances {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.sc-storefront-home .sc-home-benefits .row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	body.sc-storefront-home .product-category-section .card-grid {
		grid-template-columns: 1fr;
	}

	/* !important on all three: a later, unconditional rule further down
	   this same file (the "full-width home composition" layer) also sets
	   .card's min-height (240px, for the desktop 4-up grid) with no media
	   guard of its own, so on its own this block's plain 104px/grid values
	   lose that fight below 480px and the card falls back to a tall
	   stacked box with a large empty gap under the icon. */
	body.sc-storefront-home .product-category-section .card {
		display: grid !important;
		min-height: 104px !important;
		grid-template-columns: 104px 1fr !important;
	}

	body.sc-storefront-home .product-category-section .placeholder-div,
	body.sc-storefront-home .product-category-section .card-img-top {
		height: 104px !important;
	}

	body.sc-storefront-home .hero-buttons {
		display: grid;
		grid-template-columns: 1fr;
	}

	body.sc-storefront-home .hero-buttons .btn {
		width: 100%;
	}

	body.sc-storefront-home .sc-home-assurances {
		grid-template-columns: 1fr;
	}

	body.sc-storefront-home .sc-home-benefits,
	body.sc-storefront-home .sc-home-cta {
		padding: 28px 22px !important;
	}
}

/* Full-width home composition. This final layer deliberately removes the
   boxed presentation from the previous iteration while keeping readable
   content measures inside each full-width band. */
body.sc-storefront-home {
	--sc-home-width: 1320px;
	--sc-home-gutter: clamp(20px, 5vw, 72px);
	background: #fff !important;
}

body.sc-storefront-home section[data-section-template="Hero"] {
	width: 100% !important;
	max-width: none !important;
	min-height: clamp(560px, 72vh, 720px);
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.sc-storefront-home section[data-section-template="Hero"] .hero {
	width: min(100%, var(--sc-home-width));
	min-height: clamp(560px, 72vh, 720px);
	margin-inline: auto;
	padding-inline: var(--sc-home-gutter);
}

body.sc-storefront-home section:not([data-section-template="Hero"]) {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(72px, 8vw, 112px) 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

body.sc-storefront-home section:not([data-section-template="Hero"]) + section:not([data-section-template="Hero"]) {
	padding-top: clamp(72px, 8vw, 112px) !important;
}

body.sc-storefront-home section:not([data-section-template="Hero"]) > .container {
	width: min(100%, var(--sc-home-width)) !important;
	max-width: var(--sc-home-width) !important;
	margin-inline: auto !important;
	padding-inline: var(--sc-home-gutter) !important;
}

body.sc-storefront-home .sc-home-categories,
body.sc-storefront-home .sc-home-benefits,
body.sc-storefront-home .sc-home-cta {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

body.sc-storefront-home .sc-home-categories-section {
	color: #17251d !important;
	background: #fff !important;
}

body.sc-storefront-home .sc-home-benefits-section,
body.sc-storefront-home section.sc-home-benefits {
	color: #17251d !important;
	background: #eef5ed !important;
}

body.sc-storefront-home .sc-home-cta-section,
body.sc-storefront-home section.sc-home-cta {
	color: #fff !important;
	background: #06452d !important;
}

body.sc-storefront-home .sc-home-benefits:not(section),
body.sc-storefront-home .sc-home-cta:not(section) {
	padding: 0 !important;
	background: transparent !important;
}

body.sc-storefront-home .sc-home-categories .section-title,
body.sc-storefront-home .sc-home-categories h2,
body.sc-storefront-home .sc-home-benefits .section-title,
body.sc-storefront-home .sc-home-benefits h2 {
	color: #17251d !important;
	opacity: 1 !important;
}

body.sc-storefront-home .sc-home-categories .section-description,
body.sc-storefront-home .sc-home-categories .subtitle,
body.sc-storefront-home .sc-home-categories p,
body.sc-storefront-home .sc-home-benefits .section-description,
body.sc-storefront-home .sc-home-benefits .subtitle {
	color: #526159 !important;
	opacity: 1 !important;
}

body.sc-storefront-home .sc-home-benefits .row {
	margin-top: 34px;
}

body.sc-storefront-home .section-feature {
	border: 0 !important;
	border-left: 3px solid rgba(0, 92, 53, 0.22) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.sc-storefront-home .section-feature .feature-title,
body.sc-storefront-home .section-feature h3,
body.sc-storefront-home .section-feature h4 {
	color: #17251d !important;
	opacity: 1 !important;
}

body.sc-storefront-home .section-feature .feature-content,
body.sc-storefront-home .section-feature p {
	color: #526159 !important;
	opacity: 1 !important;
}

body.sc-storefront-home .sc-home-cta h1,
body.sc-storefront-home .sc-home-cta h2,
body.sc-storefront-home .sc-home-cta h3,
body.sc-storefront-home .sc-home-cta .section-title,
body.sc-storefront-home .sc-home-cta p,
body.sc-storefront-home .sc-home-cta .subtitle,
body.sc-storefront-home .sc-home-cta .section-description {
	color: #fff !important;
	opacity: 1 !important;
}

body.sc-storefront-home .sc-home-cta .subtitle,
body.sc-storefront-home .sc-home-cta .section-description,
body.sc-storefront-home .sc-home-cta p {
	color: rgba(255, 255, 255, 0.82) !important;
}

body.sc-storefront-home .sc-home-cta::after {
	display: none;
}

body.sc-storefront-home .product-category-section .card-grid {
	gap: clamp(14px, 2vw, 24px);
}

body.sc-storefront-home .product-category-section .card {
	min-height: 240px;
	border-color: rgba(22, 71, 45, 0.14) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

body.sc-storefront-home .product-category-section .card:hover {
	box-shadow: 0 16px 36px rgba(20, 73, 46, 0.1) !important;
}

@media (max-width: 720px) {
	body.sc-storefront-home {
		--sc-home-gutter: 20px;
	}

	body.sc-storefront-home section[data-section-template="Hero"],
	body.sc-storefront-home section[data-section-template="Hero"] .hero {
		min-height: 620px;
	}

	body.sc-storefront-home section:not([data-section-template="Hero"]) {
		padding-block: 64px !important;
	}
}

/* Home CTA and footer — replaces Frappe's split footer rows with a single,
   aligned information architecture. */
body.sc-storefront-home .section-cta,
body.sc-storefront-home .section-cta h1,
body.sc-storefront-home .section-cta h2,
body.sc-storefront-home .section-cta h3,
body.sc-storefront-home .section-cta .section-title {
	color: #fff !important;
	opacity: 1 !important;
}

body.sc-storefront-home .section-cta p,
body.sc-storefront-home .section-cta .subtitle,
body.sc-storefront-home .section-cta .section-description {
	color: rgba(255, 255, 255, 0.84) !important;
	opacity: 1 !important;
}

body.sc-storefront-home .sc-home-cta-section,
body.sc-storefront-home section.sc-home-cta {
	padding-block: clamp(72px, 8vw, 104px) !important;
}

body.sc-storefront-home .section-cta h2,
body.sc-storefront-home .section-cta .section-title {
	margin-bottom: 14px;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

body.sc-storefront-home .section-cta p,
body.sc-storefront-home .section-cta .subtitle {
	margin-bottom: 28px;
	font-size: 17px;
	line-height: 1.6;
}

body.sc-storefront-home .section-cta .action a,
body.sc-storefront-home .section-cta .btn {
	display: inline-flex;
	min-height: 50px;
	padding: 0 22px;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 10px !important;
	color: #06452d !important;
	background: #fff !important;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

body.sc-storefront-home .web-footer {
	min-height: 0;
	flex-shrink: 0;
	margin-top: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.78) !important;
	background: #043622 !important;
}

body.sc-storefront-home .sc-home-footer__inner {
	width: min(100%, var(--sc-home-width));
	margin-inline: auto;
	padding-inline: var(--sc-home-gutter);
}

body.sc-storefront-home .sc-home-footer__main {
	display: grid;
	grid-template-columns: minmax(260px, 1.35fr) minmax(180px, 0.7fr) minmax(280px, 1fr);
	gap: clamp(40px, 7vw, 96px);
	padding: 64px 0 52px;
	align-items: start;
}

body.sc-storefront-home .sc-home-footer__brand {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 14px;
	color: #fff !important;
	text-decoration: none;
}

body.sc-storefront-home .sc-home-footer__brand img {
	width: 52px !important;
	height: 52px !important;
	flex: 0 0 52px;
	object-fit: contain;
	border-radius: 12px;
	background: #fff;
}

body.sc-storefront-home .sc-home-footer__brand span,
body.sc-storefront-home .sc-home-footer__brand strong,
body.sc-storefront-home .sc-home-footer__brand small {
	display: block;
}

body.sc-storefront-home .sc-home-footer__brand strong {
	color: #fff;
	font-family: "Manrope", sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

body.sc-storefront-home .sc-home-footer__brand small {
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.64);
	font-size: 13px;
	line-height: 1.4;
}

body.sc-storefront-home .sc-home-footer__nav,
body.sc-storefront-home .sc-home-footer__contact {
	display: grid;
	gap: 13px;
}

body.sc-storefront-home .sc-home-footer__nav > strong,
body.sc-storefront-home .sc-home-footer__contact > strong {
	margin-bottom: 5px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.sc-storefront-home .sc-home-footer__nav a,
body.sc-storefront-home .sc-home-footer__contact a,
body.sc-storefront-home .sc-home-footer__contact p {
	display: inline-flex;
	width: fit-content;
	margin: 0;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.74) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}

body.sc-storefront-home .sc-home-footer__nav a:hover,
body.sc-storefront-home .sc-home-footer__contact a:hover {
	color: #fff !important;
}

body.sc-storefront-home .sc-home-footer__nav .icon,
body.sc-storefront-home .sc-home-footer__contact .icon {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	color: currentColor;
	stroke: currentColor;
	--icon-stroke: currentColor;
}

body.sc-storefront-home .sc-home-footer__bottom {
	display: flex;
	padding: 22px 0 28px;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.52);
	font-size: 12px;
	font-weight: 600;
}

@media (max-width: 820px) {
	body.sc-storefront-home .sc-home-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: 42px 32px;
	}

	body.sc-storefront-home .sc-home-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 540px) {
	body.sc-storefront-home .sc-home-footer__main {
		grid-template-columns: 1fr;
		gap: 34px;
		padding: 48px 0 38px;
	}

	body.sc-storefront-home .sc-home-footer__brand {
		grid-column: auto;
	}

	body.sc-storefront-home .sc-home-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}
}

/* /contact page — frappe's own www/contact.html is a bare, unstyled
   Bootstrap form (no card, no field labels, huge empty column next to it
   since this site has no address_title configured). Wrapped into a card and
   labeled via webshop_branding.js's enhanceContactForm() since the template
   itself is vendored and can't be edited directly. */
body.super-chencho-webshop-page .contact-content {
	max-width: 640px;
}

body.super-chencho-webshop-page .sc-contact-subtitle {
	color: var(--sc-web-muted);
	font-size: 1.05rem;
	margin-top: -8px;
	margin-bottom: 28px;
}

body.super-chencho-webshop-page .sc-contact-card {
	background: #fff;
	border: 1px solid var(--sc-web-line-soft);
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 20px 45px rgba(20, 37, 27, 0.08);
}

body.super-chencho-webshop-page .sc-contact-card .form-group {
	margin-bottom: 22px;
}

body.super-chencho-webshop-page .sc-contact-card .form-group:last-child {
	margin-bottom: 0;
}

body.super-chencho-webshop-page .sc-field-label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--sc-web-ink);
	margin-bottom: 8px;
	--icon-stroke: var(--sc-web-primary-2);
}

/* frappe's base icon rule is "margin: 0 auto" (meant to center an icon
   inside a tightly-fit wrapper). .sc-field-label is a full-width flex row,
   not a tight wrapper, so that auto margin ate all the free space and
   shoved the icon+text over to the right edge instead of hugging the left
   like a normal label. */
body.super-chencho-webshop-page .sc-field-label .icon {
	margin: 0;
	flex-shrink: 0;
}

body.super-chencho-webshop-page .sc-contact-card .form-control {
	border: 1px solid var(--sc-web-line-soft);
	border-radius: 10px;
	padding: 10px 14px;
	height: auto;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.super-chencho-webshop-page .sc-contact-card .form-control:focus {
	border-color: var(--sc-web-primary-2);
	box-shadow: 0 0 0 3px var(--sc-web-primary-soft);
	outline: none;
}

body.super-chencho-webshop-page .sc-contact-card .btn-send {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 26px;
}

body.super-chencho-webshop-page .sc-contact-card .sc-btn-icon {
	display: inline-flex;
	--icon-stroke: #fff;
}

/* Frappe's stock 404 is intentionally minimal. Make it useful for operators
   who land here from a bad badge/link by taking them straight back to Desk. */
body.sc-not-found-page {
	--sc-404-primary: #005c35;
	--sc-404-ink: #20362d;
	--sc-404-muted: #6b7770;
	background:
		radial-gradient(circle at 50% 18%, rgba(0, 106, 61, 0.1), transparent 34%),
		linear-gradient(180deg, #f7fbf8 0%, #ffffff 58%, #f4f7f5 100%) !important;
}

body.sc-not-found-page .error-page {
	min-height: calc(100vh - 2rem);
	display: grid;
	place-items: center;
	padding: 32px 18px;
	text-align: center;
}

body.sc-not-found-page .error-page > div {
	width: min(100%, 460px);
	padding: 34px 32px 32px;
	border: 1px solid rgba(0, 92, 53, 0.13);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 24px 70px rgba(24, 49, 36, 0.12);
}

body.sc-not-found-page .error-page h4 {
	margin: 0;
	color: var(--sc-404-ink);
	font-family: "Manrope", sans-serif;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0;
}

body.sc-not-found-page .error-page h4::before {
	content: "?";
	display: grid;
	width: 52px;
	height: 52px;
	margin: 0 auto 18px;
	place-items: center;
	border-radius: 16px;
	background: #e6f4ec;
	color: var(--sc-404-primary);
	font-size: 26px;
	font-weight: 800;
}

body.sc-not-found-page .sc-404-message {
	max-width: 340px;
	margin: 14px auto 24px;
	color: var(--sc-404-muted);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}

body.sc-not-found-page .sc-404-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

body.sc-not-found-page .sc-404-desk-button,
body.sc-not-found-page .sc-404-home-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 10px !important;
	font-weight: 800;
	text-decoration: none !important;
}

body.sc-not-found-page .sc-404-desk-button {
	padding: 10px 20px;
	background: var(--sc-404-primary) !important;
	border-color: var(--sc-404-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 12px 24px rgba(0, 92, 53, 0.2);
}

body.sc-not-found-page .sc-404-desk-button .icon {
	margin: 0;
	--icon-stroke: #ffffff;
	stroke: #ffffff;
}

body.sc-not-found-page .sc-404-home-button {
	padding: 10px 16px;
	border: 1px solid rgba(0, 92, 53, 0.14) !important;
	background: #f3f8f5 !important;
	color: var(--sc-404-primary) !important;
}

@media (max-width: 520px) {
	body.sc-not-found-page .error-page > div {
		padding: 30px 22px 26px;
		border-radius: 20px;
	}

	body.sc-not-found-page .sc-404-actions {
		align-items: stretch;
		flex-direction: column;
	}
}