/*
Theme Name: Denisurf Storefront
Theme URI: https://denisurf.es/
Description: Denisurf presentation child theme on an unmodified Storefront parent (issue #191, epic #188). Presentation only: business behavior lives in denisurf-core and the other owning plugins; see docs/theme-responsibility-split.md.
Author: Denisurf Architecture & Engineering
Author URI: https://denisurf.es/
Template: storefront
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: denisurf-storefront
Tags: e-commerce, child-theme
*/

/*
 * Presentation deltas over the Storefront parent live here. The parent theme
 * already enqueues this stylesheet as `storefront-child-style` (Storefront
 * `Storefront::child_scripts()`), so no child-side self-enqueue is needed and
 * none is done; adding one would duplicate the stylesheet.
 */

.denisurf-quantity {
	display: inline-flex;
	align-items: stretch;
}

.denisurf-quantity-button {
	background: transparent;
	border: 1px solid currentcolor;
	color: inherit;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	min-width: 2.4em;
	padding: 0.35em 0.6em;
}

.denisurf-quantity-button:disabled {
	cursor: default;
	opacity: 0.4;
}

.denisurf-quantity .qty {
	text-align: center;
}

body.single-product .denisurf-quantity-button,
body.single-product .denisurf-quantity .qty {
	min-width: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #999;
	padding: 0;
	width: 25.6667px;
}

.rtl .denisurf-quantity-button:first-child {
	border-left-width: 0;
	border-right-width: 1px;
}

.rtl .denisurf-quantity-button:last-child {
	border-left-width: 1px;
	border-right-width: 0;
}

/*
 * Global chrome rebuild (issue #193, epic #188): design tokens, top bar,
 * header tools, navigation and search panel over the Storefront
 * parent. Token values mirror design/tokens.json (the authoritative source,
 * docs/token-contract.md) as --denisurf-* custom properties. Breakpoint token
 * values are documented here but cannot be consumed via var() in media
 * features; the media queries below use the same literals.
 */

:root {
	--denisurf-color-primary: #ff6e00;
	--denisurf-color-ink: #1e1e1e;
	--denisurf-color-surface: #ffffff;
	--denisurf-color-primary-strong: #ff7000;
	--denisurf-color-primary-soft: #ff7a00;
	--denisurf-color-primary-hover: #e66f00;
	--denisurf-color-minicart-button: #ed772f;
	--denisurf-color-ink-secondary: #545454;
	--denisurf-color-hairline: #e8e8e8;
	--denisurf-font-family-base: 'Raleway', system-ui, sans-serif;
	--denisurf-font-family-heading: 'Syne', system-ui, sans-serif;
	--denisurf-font-family-header: 'Inter Tight', system-ui, sans-serif;
	--denisurf-font-size-base: 14px;
	--denisurf-font-size-nav: 11px;
	--denisurf-font-size-product-title: 17px;
	--denisurf-line-height-body: 1.6;
	--denisurf-font-weight-strong: 600;
	--denisurf-font-weight-heading: 700;
	--denisurf-space-1: 5px;
	--denisurf-space-2: 10px;
	--denisurf-space-3: 15px;
	--denisurf-space-4: 20px;
	--denisurf-space-5: 30px;
	--denisurf-space-6: 40px;
	--denisurf-space-7: 50px;
	--denisurf-radius-card: 3px;
	--denisurf-radius-pill: 9999px;
	--denisurf-shadow-card: none;
	--denisurf-shadow-overlay: 0 0 11px rgba(0, 0, 0, 0.5);
	/* Breakpoints: 480px / 768px / 1024px (breakpoint-mobile/-tablet/-desktop). */
	--denisurf-content-width: 1680px;
}

/* The original page body uses Raleway 16px/24px; component sizes remain explicit. */

body {
	color: var(--denisurf-color-ink-secondary);
	font-family: var(--denisurf-font-family-base);
	font-size: 16px;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-heading);
	font-weight: var(--denisurf-font-weight-heading);
}

/*
 * Top bar (inc/layout.php): orange band with the promo message left and the
 * per-language top-bar navigation right; mirrors the Shopkeeper #site-top-bar
 * the approved baseline captured (font-size 13px desktop / 12px mobile).
 */

.denisurf-top-bar {
	background: var(--denisurf-color-primary-strong);
	color: var(--denisurf-color-surface);
	font-family: var(--denisurf-font-family-header);
	font-size: 13px;
	line-height: 1.8;
}

.denisurf-top-bar-inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--denisurf-content-width);
	padding: var(--denisurf-space-2) var(--denisurf-space-4);
}

.denisurf-top-bar a,
.topbar-menu a {
	color: var(--denisurf-color-surface);
}

.topbar-menu ul {
	display: flex;
	gap: var(--denisurf-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 479px) {

	.denisurf-top-bar {
		font-size: 12px;
		line-height: 1.4;
	}

	.denisurf-top-bar-inner {
		flex-direction: column;
		padding: var(--denisurf-space-1) var(--denisurf-space-3);
		text-align: center;
	}

	.topbar-menu ul {
		justify-content: center;
	}
}

/*
 * Masthead layout: desktop stacks the centered tool row above the centered
 * logo (the captured chrome order), mobile/tablet keeps a single row with
 * the logo left and the tools right. The primary navigation renders centered
 * underneath, on the page surface with a hairline bottom border.
 */

.site-header {
	background: var(--denisurf-color-surface);
	border-bottom: 1px solid var(--denisurf-color-hairline);
	font-family: var(--denisurf-font-family-header);
}

.site-header .col-full,
.storefront-primary-navigation .col-full {
	max-width: var(--denisurf-content-width);
}

.site-branding {
	margin-bottom: 0;
}

.site-header .site-branding .custom-logo {
	height: auto;
	max-height: var(--denisurf-space-7);
	width: auto;
}

@media (min-width: 1024px) {

	.site-header > .col-full {
		align-items: center;
		display: flex;
		flex-direction: column;
		padding-bottom: var(--denisurf-space-4);
		padding-top: var(--denisurf-space-6);
	}

	.site-header .col-full .site-tools {
		margin-bottom: var(--denisurf-space-5);
		order: 1;
	}

	.site-header .col-full .site-branding {
		margin-bottom: var(--denisurf-space-4);
		order: 2;
	}

	.storefront-primary-navigation .col-full {
		display: flex;
		justify-content: center;
	}
}

@media (max-width: 1023px) {

	.site-header > .col-full {
		align-items: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--denisurf-space-2);
		justify-content: space-between;
		padding-bottom: var(--denisurf-space-2);
		padding-top: var(--denisurf-space-2);
	}

	.site-header .col-full .site-tools {
		margin-left: auto;
	}

	/* The collapsible search panel shares this row's markup; unrevealing it
	 * inside the non-wrapping logo+tools row squeezed the form beside them,
	 * so it takes its own full-width row below the chrome (PR #202 review
	 * follow-up). */

	.site-header .col-full .denisurf-search-panel {
		flex: 1 0 100%;
		order: 1;
	}
}

/*
 * Primary navigation (parent markup untouched): uppercase Inter Tight items,
 * centered under the header, soft-orange hover, white card submenus.
 */

.main-navigation ul li a {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-header);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1px;
	text-transform: uppercase;
	white-space: nowrap;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.focus > a {
	color: var(--denisurf-color-primary-soft);
}

@media (min-width: 768px) {

	.main-navigation ul.menu,
	.main-navigation ul.nav-menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--denisurf-space-1);
		justify-content: center;
		row-gap: var(--denisurf-space-1);
	}

	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		padding: var(--denisurf-space-1) var(--denisurf-space-3);
	}

	.main-navigation ul.menu ul li a,
	.main-navigation ul.nav-menu ul li a {
		color: #000;
		font-family: var(--denisurf-font-family-base);
		font-size: 11px;
		letter-spacing: normal;
		font-weight: 400;
		padding: var(--denisurf-space-1) var(--denisurf-space-3);
		text-transform: none;
		white-space: normal;
	}

	.main-navigation ul ul li:hover > a,
	.main-navigation ul ul li a:hover {
		color: var(--denisurf-color-primary-soft);
	}

	.main-navigation ul ul {
		background: var(--denisurf-color-surface);
		border-radius: var(--denisurf-radius-card);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
		min-width: 200px;
		padding: var(--denisurf-space-2) 0;
	}
}

/* stylelint-disable no-descending-specificity -- chrome overrides intentionally layer over the parent's
 * equally-generic navigation selectors in a different order than specificity ranks. */
/*
 * Tool row (inc/layout.php): 18px icons in the soft orange, darker orange on
 * hover with the captured scale transition, superscript counters.
 */

.site-tools ul {
	align-items: center;
	display: flex;
	gap: var(--denisurf-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-tools .tools_button,
.site-tools li.shopping-bag-button a.cart-contents {
	background: none;
	border: 0;
	color: var(--denisurf-color-primary-soft);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 0;
}

/* The Elementor kit paints button hover as a solid orange gradient. Header tool buttons stay unfilled, like the account link beside them. */
.site-tools button.tools_button:hover,
.site-tools button.tools_button:focus,
.site-tools button.tools_button:active {
	background-color: transparent;
	background-image: none;
}

.site-tools a:hover,
.site-tools button:hover,
.site-tools li.shopping-bag-button a.cart-contents:hover {
	color: var(--denisurf-color-primary-hover);
}

.site-tools .denisurf-icon {
	transition: color 0.2s ease, transform 0.2s ease;
}

.site-tools a:hover .denisurf-icon,
.site-tools button:hover .denisurf-icon {
	transform: scale(1.08);
}

.site-tools .wishlist_items_number,
.site-tools .cart-contents .count {
	color: var(--denisurf-color-primary-soft);
	font-size: var(--denisurf-font-size-nav);
	margin-left: 2px;
	vertical-align: super;
}

/* The parent renders a Font Awesome bag glyph and hides the link on small
 * screens; both are replaced by the child's own icon markup. The parent also
 * sizes .site-header-cart as a top-level header column (21.739% width,
 * right float) with a 100%-wide dropdown — reset both inside the compact
 * .site-tools row and give the dropdown an explicit usable width (PR #202
 * review follow-up). */

.site-tools .site-header-cart {
	float: none;
	width: auto;
}

.site-tools .site-header-cart .cart-contents {
	display: inline-flex;
	padding: 0;
}

.site-tools .site-header-cart .cart-contents::after {
	content: none;
}

.site-tools .site-header-cart .widget_shopping_cart {
	left: auto;
	right: 0;
	width: min(380px, calc(100vw - 32px));
 background: var(--denisurf-color-surface);
 color: var(--denisurf-color-ink);
 max-height: calc(100dvh - 120px);
 overflow-y: auto;
 overscroll-behavior: contain;
 z-index: 1001;

}

/* Mini-cart dropdown (parent hover/focus engine, Denisurf palette). */

.site-header-cart .widget_shopping_cart {
	border-radius: var(--denisurf-radius-card);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.site-header-cart .widget_shopping_cart a.button,
.site-header-cart .widget_shopping_cart .buttons a {
	background: var(--denisurf-color-minicart-button);
	border-color: var(--denisurf-color-minicart-button);
	color: var(--denisurf-color-surface);
	font-weight: var(--denisurf-font-weight-strong);
}

.site-header-cart .widget_shopping_cart a.button:hover,
.site-header-cart .widget_shopping_cart .buttons a:hover {
	background: var(--denisurf-color-primary-hover);
	border-color: var(--denisurf-color-primary-hover);
	color: var(--denisurf-color-surface);
}

/* Compact cart receipt: preserve the product image, name, quantity and actions. */

.site-tools .site-header-cart .widget_shopping_cart .product_list_widget {
 margin: 0;
 padding: 20px;
}
.site-tools .site-header-cart .widget_shopping_cart .mini_cart_item {
 position: relative;
 min-height: 96px;
 padding: 16px 32px 16px 0;
 border-bottom: 1px solid var(--denisurf-color-hairline);
 overflow-wrap: anywhere;
}
.site-tools .site-header-cart .widget_shopping_cart .mini_cart_item > a:where(:not(.remove)) {
 display: block;
 font-family: var(--denisurf-font-family-heading);
 font-size: var(--denisurf-font-size-product-title);
 font-weight: var(--denisurf-font-weight-strong);
 line-height: 1.4;
 color: var(--denisurf-color-ink);
}
.site-tools .site-header-cart .widget_shopping_cart .mini_cart_item img {
 float: left;
 width: 64px;
 height: 64px;
 object-fit: contain;
 margin: 0 16px 8px 0;
}
.site-tools .site-header-cart .widget_shopping_cart :where(.mini_cart_item) .quantity {
 display: block;
 margin: 8px 0 0 80px;
 color: var(--denisurf-color-ink-secondary);
}
.site-tools .site-header-cart .widget_shopping_cart .mini_cart_item .remove {
 left: auto;
 right: -8px;
 top: 12px;
 width: 32px;
 height: 32px;
 line-height: 32px;
}
.site-tools .site-header-cart .widget_shopping_cart .total {
 padding: 16px 20px;
 margin: 0;
 border-top: 0;
}
.site-tools .site-header-cart .widget_shopping_cart .buttons {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
 padding: 0 20px 20px;
 margin: 0;
}
.site-tools .site-header-cart .widget_shopping_cart .buttons a {
 float: none;
 width: 100%;
 margin: 0;
 min-height: 44px;
 text-align: center;
}

/* Elementor's WooCommerce template can also supply header cart fragments. */
.site-tools .widget_shopping_cart .elementor-menu-cart__products {
 padding: 20px;
 margin: 0;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product {
 display: grid;
 grid-template-columns: 64px minmax(0, 1fr) 72px;
 gap: 8px 12px;
 padding: 16px 0;
 border-bottom: 1px solid var(--denisurf-color-hairline);
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-image {
 grid-row: 1;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-image img {
 width: 64px;
 height: 64px;
 object-fit: contain;
 margin: 0;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-name {
 text-align: left;
 align-self: start;
 font-family: var(--denisurf-font-family-heading);
 font-size: var(--denisurf-font-size-product-title);
 font-weight: var(--denisurf-font-weight-strong);
 line-height: 1.4;
 overflow-wrap: anywhere;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-price {
 grid-column: 3;
 grid-row: 1;
 align-self: center;
 color: var(--denisurf-color-ink-secondary);
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-remove {
 grid-column: 3;
 grid-row: 1;
 justify-self: end;
 margin-top: -12px;
 position: relative;
 width: 32px;
 height: 32px;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-remove a {
 display: block;
 width: 32px;
 height: 32px;
 position: absolute;
 inset: 0;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-remove a:first-child {
 display: none;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__product-remove a:last-child::before {
 content: '×';
 display: block;
 font-size: 24px;
 line-height: 32px;
 text-align: center;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__subtotal {
 text-align: center;
 padding: 16px 20px;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__footer-buttons {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
 padding: 0 20px 20px;
}
.site-tools .widget_shopping_cart .elementor-menu-cart__footer-buttons a {
 display: block;
 padding: 12px;
 min-height: 44px;
 text-align: center;
 background: var(--denisurf-color-minicart-button);
 color: var(--denisurf-color-surface);
 font-weight: var(--denisurf-font-weight-strong);
}

/*
 * Handheld menu (parent behavior: the menu toggle swaps .main-navigation to
 * .toggled and the parent reveals .handheld-navigation below 768px). The
 * migration assigns the main menu to both the primary and handheld
 * locations, so the child must NOT additionally reveal .primary-navigation
 * on handheld — doing so showed two copies of the navigation (PR #202 review
 * follow-up); the parent's handheld container owns the mobile menu.
 */

button.menu-toggle {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-header);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}
/* stylelint-enable no-descending-specificity */

/*
 * Collapsible search panel (js/header-tools.js): centered WooCommerce
 * product search, revealed under the header chrome.
 */

.denisurf-search-panel,
.denisurf-search-panel * {
	box-sizing: border-box;
}

.denisurf-search-panel:not([hidden]) {
	background: var(--denisurf-color-surface);
	display: flex;
	flex-direction: column;
	inset: 0;
	position: fixed;
	z-index: 1100;
}

.denisurf-search-scrim {
	display: none;
}

.denisurf-search-dialog {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	width: 100%;
}

.denisurf-search-toolbar {
	align-items: center;
	background: var(--denisurf-color-surface);
	border-bottom: 1px solid var(--denisurf-color-hairline);
	display: flex;
	gap: 10px;
	padding: 12px 14px;
}

.denisurf-search-back,
.denisurf-search-cancel,
.denisurf-search-clear {
	background: transparent;
	border: 0;
	color: var(--denisurf-color-ink-secondary);
	cursor: pointer;
	font-family: var(--denisurf-font-family-header);
	padding: 4px;
}

.denisurf-search-cancel {
	font-size: 14px;
	font-weight: 500;
}

.denisurf-search-field {
	align-items: center;
	background: color-mix(in srgb, var(--denisurf-color-ink) 6%, var(--denisurf-color-surface));
	border-radius: 12px;
	display: flex;
	flex: 1;
	min-width: 0;
	position: relative;
}

.denisurf-search-glyph {
	align-items: center;
	color: var(--denisurf-color-ink-secondary);
	display: flex;
	inset-inline-start: 12px;
	pointer-events: none;
	position: absolute;
}

.denisurf-search-panel .woocommerce-product-search {
	display: block;
	flex: 1;
	margin: 0;
	min-width: 0;
}

.denisurf-search-panel .search-field {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-header);
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	min-height: 40px;
	padding: 8px 36px;
	width: 100%;
}

.denisurf-search-panel .search-field:focus {
	background: var(--denisurf-color-surface);
	border-color: var(--denisurf-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--denisurf-color-primary) 20%, transparent);
	outline: 0;
}

.denisurf-search-panel .woocommerce-product-search button {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.denisurf-search-clear:not([hidden]) {
	align-items: center;
	border-radius: 999px;
	display: flex;
	inset-inline-end: 8px;
	position: absolute;
}

.denisurf-search-panel .denisurf-search-clear:hover,
.denisurf-search-panel .denisurf-search-clear:focus,
.denisurf-search-panel .denisurf-search-clear:active,
.denisurf-search-panel .denisurf-search-back:hover,
.denisurf-search-panel .denisurf-search-back:focus,
.denisurf-search-panel .denisurf-search-cancel:hover,
.denisurf-search-panel .denisurf-search-cancel:focus {
	background-color: transparent;
	background-image: none;
}

.denisurf-search-body:not([hidden]) {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.denisurf-search-meta {
	align-items: center;
	border-bottom: 1px solid var(--denisurf-color-hairline);
	display: flex;
	justify-content: space-between;
	padding: 8px 16px;
}

.denisurf-search-kicker {
	color: var(--denisurf-color-ink-secondary);
	font-family: var(--denisurf-font-family-header);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.denisurf-search-count,
.denisurf-search-status {
	color: var(--denisurf-color-ink-secondary);
	font-family: var(--denisurf-font-family-base);
	font-size: 12px;
	margin: 0;
}

.denisurf-search-status {
	padding: 16px;
}

.denisurf-search-list {
	list-style: none;
	margin: 0;
	overflow: auto;
	padding: 0;
}

.denisurf-search-list li + li {
	border-top: 1px solid var(--denisurf-color-hairline);
}

.denisurf-search-hit {
	align-items: center;
	color: inherit;
	display: flex;
	gap: 14px;
	padding: 12px 16px;
	text-decoration: none;
}

.denisurf-search-hit.is-active,
.denisurf-search-hit:hover {
	background: color-mix(in srgb, var(--denisurf-color-ink) 4%, var(--denisurf-color-surface));
}

.denisurf-search-thumb {
	align-items: center;
	background: color-mix(in srgb, var(--denisurf-color-ink) 4%, var(--denisurf-color-surface));
	border: 1px solid var(--denisurf-color-hairline);
	border-radius: 8px;
	display: flex;
	flex: 0 0 auto;
	height: 56px;
	justify-content: center;
	overflow: hidden;
	width: 56px;
}

.denisurf-search-thumb-image {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.denisurf-search-copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.denisurf-search-name {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-header);
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.denisurf-search-hit:hover .denisurf-search-name,
.denisurf-search-hit.is-active .denisurf-search-name {
	color: var(--denisurf-color-primary);
}

.denisurf-search-category {
	color: var(--denisurf-color-ink-secondary);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.denisurf-search-price {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-header);
	font-size: 14px;
	font-weight: 700;
	margin-inline-start: auto;
	white-space: nowrap;
}

.denisurf-search-view-all {
	background: color-mix(in srgb, var(--denisurf-color-ink) 6%, var(--denisurf-color-surface));
	border-radius: 12px;
	color: var(--denisurf-color-ink);
	display: flex;
	font-family: var(--denisurf-font-family-header);
	font-size: 14px;
	font-weight: 600;
	justify-content: center;
	margin: 16px 16px 128px;
	padding: 12px 16px;
	text-decoration: none;
}

@media (min-width: 768px) {
	.denisurf-search-panel:not([hidden]) {
		align-items: center;
		background: transparent;
		justify-content: flex-start;
		padding: 7rem 16px 32px;
	}

	.denisurf-search-scrim {
		backdrop-filter: blur(8px);
		background: rgb(30 30 30 / 45%);
		border: 0;
		cursor: pointer;
		display: block;
		inset: 0;
		padding: 0;
		position: absolute;
	}

	/* The Elementor kit paints button hover as a solid orange gradient. This layer covers the page, so that fill would replace the dimmed page. */
	.denisurf-search-panel .denisurf-search-scrim:hover,
	.denisurf-search-panel .denisurf-search-scrim:focus,
	.denisurf-search-panel .denisurf-search-scrim:active {
		background-color: rgb(30 30 30 / 45%);
		background-image: none;
	}

	.denisurf-search-dialog {
		background: var(--denisurf-color-surface);
		border: 1px solid var(--denisurf-color-hairline);
		border-radius: 16px;
		box-shadow: 0 25px 50px -12px rgb(30 30 30 / 25%);
		flex: 0 1 auto;
		max-width: 36rem;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}

	.denisurf-search-back,
	.denisurf-search-cancel {
		display: none;
	}

	.denisurf-search-toolbar {
		border-bottom: 1px solid var(--denisurf-color-hairline);
		padding: 14px;
	}

	.denisurf-search-field {
		background: var(--denisurf-color-surface);
	}

	.denisurf-search-glyph {
		color: var(--denisurf-color-primary);
	}

	.denisurf-search-panel .search-field {
		border: 2px solid var(--denisurf-color-primary);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--denisurf-color-primary) 20%, transparent);
		min-height: 48px;
	}

	.denisurf-search-list {
		max-height: 420px;
	}

	.denisurf-search-thumb {
		height: 48px;
		width: 48px;
	}

	.denisurf-search-view-all {
		background: color-mix(in srgb, var(--denisurf-color-ink) 4%, var(--denisurf-color-surface));
		border-radius: 0;
		color: var(--denisurf-color-primary);
		font-size: 12px;
		font-weight: 700;
		margin: 0;
	}
}

/* Restore the theme button typography inherited by the consent tab. */
body .cmplz-manage-consent {
	font-family: Syne, -apple-system, BlinkMacSystemFont, Arial, Helvetica, "Helvetica Neue", Verdana, sans-serif;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
}

/*
 * Homepage / Elementor content parity (issue #194, epic #188).
 *
 * The homepage and its per-language trees are Elementor-built (the
 * elementor_header_footer page template; layout and content stay stored in
 * Elementor — this theme never rebuilds them). The Shopkeeper parent styled
 * those pages full-bleed with its own typography scale; the Storefront parent
 * boxes page content in .col-full and applies its own heading scale. These
 * rules restore the captured baseline look for Elementor-rendered pages only
 * (scoped to the elementor-template-full-width body class Elementor prints):
 * full-bleed content width, the Shopkeeper body text metrics and heading
 * scale (Shopkeeper customizer values, captured 2026-10-10 with the #190
 * baseline). Elementor widget-level typography keeps winning by specificity,
 * exactly as it did under Shopkeeper. Catalogue/product typography is #195.
 */

body.elementor-template-full-width {
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 1023px) {
	body:where(.elementor-template-full-width) :where(.elementor) p {
		font-size: 14px;
		line-height: 1.5;
	}
}

body.elementor-template-full-width .site-content .col-full {
	margin: 0;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

body:where(.elementor-template-full-width) :where(.elementor) h1,
body:where(.elementor-template-full-width) :where(.elementor) h2,
body:where(.elementor-template-full-width) :where(.elementor) h3,
body:where(.elementor-template-full-width) :where(.elementor) h4,
body:where(.elementor-template-full-width) :where(.elementor) h5,
body:where(.elementor-template-full-width) :where(.elementor) h6 {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-heading);
	font-weight: var(--denisurf-font-weight-strong);
	letter-spacing: normal;
	line-height: 1;
}

/* :where() keeps these at bare element specificity (the level the Shopkeeper
 * heading rules lived at): parent-theme heading rules lose, while any
 * Elementor widget/plugin class rule (e.g. the CTA widget's own
 * .elementor-cta__title{font-size:23px}) still wins, as it did before. */
body:where(.elementor-template-full-width) :where(.elementor) h1 { font-size: 30.797px; }
body:where(.elementor-template-full-width) :where(.elementor) h2 { font-size: 23.101px; }
body:where(.elementor-template-full-width) :where(.elementor) h3 { font-size: 17.329px; }
body:where(.elementor-template-full-width) :where(.elementor) h4 { font-size: 13px; }
body:where(.elementor-template-full-width) :where(.elementor) h5 { font-size: 9.75px; }

@media (min-width: 768px) {

	body:where(.elementor-template-full-width) :where(.elementor) h1 { font-size: 54.487px; }
	body:where(.elementor-template-full-width) :where(.elementor) h2 { font-size: 40.871px; }
	body:where(.elementor-template-full-width) :where(.elementor) h3 { font-size: 30.659px; }
	body:where(.elementor-template-full-width) :where(.elementor) h4 { font-size: 23px; }
	body:where(.elementor-template-full-width) :where(.elementor) h5 { font-size: 17.25px; }
}

/* The CTA widget titles carry no Elementor line-height; Shopkeeper rendered
 * them at line-height 1.13 and body copy at a 20px paragraph rhythm. */
body:where(.elementor-template-full-width) :where(.elementor) .elementor-cta__title {
	line-height: 1.13;
}

body:where(.elementor-template-full-width) :where(.elementor) p {
	margin-bottom: 20px;
}


@media (max-width: 767px) {
	body:where(.elementor-template-full-width) :where(.elementor) .elementor-cta__title {
		line-height: 1.33333;
	}

	body:where(.elementor-template-full-width) :where(.elementor) p {
		margin-bottom: 10px;
	}
}


/*
 * Catalogue and product page rebuild (issue #195, epic #188): the Shopkeeper
 * archive presentation the approved baseline captured — 4-column grid with
 * 25px gutters, toolbar (filter left, ordering + result count right),
 * off-canvas filter drawer, infinite scroll loader, and the centered
 * single-product layout with the orange add-to-cart. Values come from the
 * --denisurf-* tokens; media queries use the token breakpoint literals.
 */

/* Archive content width: the captured .row geometry (1200px column grid
 * centered inside the wider chrome container). */

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
.woocommerce .site-content .col-full,
/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
.woocommerce-page .site-content .col-full {
	box-sizing: border-box;
	max-width: 1366px;
	padding-left: 68px;
	padding-right: 68px;
}

/* Full-width archive content: the filter drawer replaces the inline sidebar
 * (right-sidebar classes are removed) — scoped to the archive body class so
 * single product, cart, checkout, account and product-search pages keep the
 * parent's two-column layout with their own #secondary sidebar. */

.denisurf-storefront-archive .content-area {
	float: none;
	width: 100%;
}

/*
 * Archive toolbar (.storefront-sorting): filter button left, ordering select
 * and result count right, one 26px row with the captured spacing.
 */

body.denisurf-storefront-archive .storefront-sorting {
	align-items: center;
	line-height: 24px;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--denisurf-font-family-header);
	font-size: 12px;
	gap: var(--denisurf-space-3);
	justify-content: flex-end;
	margin-bottom: 35px;
}

.storefront-sorting .woocommerce-notices-wrapper:empty {
	display: none;
}

.denisurf-filter-toggle {
	align-items: center;
	background: none;
	border: 0;
	color: var(--denisurf-color-ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	margin-right: auto;
	padding: 0;
	text-transform: uppercase;
}

.denisurf-filter-toggle:hover {
	color: var(--denisurf-color-primary-soft);
}

.storefront-sorting .woocommerce-ordering {
	margin: 0;
}

.storefront-sorting .orderby {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--denisurf-color-ink);
	border-radius: 0;
	color: var(--denisurf-color-ink);
	cursor: pointer;
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	height: 26px;
	line-height: 24px;
	padding: 0;
	width: 222px;
}

.storefront-sorting .woocommerce-result-count {
	color: #999;
	float: none;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: normal;
	font-family: var(--denisurf-font-family-heading);
	line-height: 24px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

/* Archive pagination: visible for no-JS visitors; the infinite-scroll
 * body class hides it once the loader takes over. */

body.denisurf-infinite-scroll .storefront-sorting .woocommerce-pagination {
	display: none;
}

body.denisurf-infinite-loading ul.products::after {
	/* Loader pulse below the grid while the next page fetches. */
	animation: denisurf-loader-pulse 0.9s ease-in-out infinite alternate;
	background: var(--denisurf-color-primary-soft);
	border-radius: 50%;
	content: "";
	display: block;
	height: 12px;
	margin: 0 auto var(--denisurf-space-4);
	width: 12px;
}

@keyframes denisurf-loader-pulse {

	from {
		opacity: 0.35;
	}

	to {
		opacity: 1;
	}
}

/*
 * Product grid: 4 columns, 25px gutters — the captured
 * Shopkeeper geometry over the parent's percentage columns.
 */

body.woocommerce .site-main ul.products {
	display: block;
	margin: 0;
}

body.woocommerce .site-main ul.products li.product {
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	float: left;
	margin: 0 25px 25px 0;
	padding: 0;
	position: relative;
	width: calc((100% - 75px) / 4);
}

body.woocommerce .site-main ul.products li.product.last,
body.woocommerce .site-main ul.products li.product:nth-child(4n) {
	margin-right: 0;
}

body.woocommerce .site-main ul.products li.product.first,
body.woocommerce .site-main ul.products li.product:nth-child(4n + 1) {
	clear: both;
}

/*
 * Product card: image with hover second image, badges, left-aligned title
 * and price (captured typography: title 17px regular, price 13px/600).
 */

body.woocommerce .site-main ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	position: relative;
}

/* Positioned thumbnail wrapper (inc/woocommerce.php priorities 7/11): the
 * thumbnail link has its own frame, so the alternate image and badges
 * stay constrained to the media rather than the title or commerce row
 * (PR #202 review follow-up). */

body.woocommerce .site-main ul.products li.product .denisurf-loop-media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	display: block;
	position: relative;
}
body.single-product div.product .woocommerce-product-gallery .flex-viewport img {
	box-sizing: border-box;
	padding-left: 1px;
}

body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	opacity: 1;
}

body.woocommerce .site-main ul.products li.product img {
	display: block;
	margin: 0;
	transition: opacity 0.3s ease;
}

.denisurf-loop-second {
		bottom: 0;
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.3s ease;
}

body.woocommerce .site-main ul.products li.product .denisurf-loop-media img {
	border-radius: 0;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

body.woocommerce .site-main ul.products li.product .denisurf-loop-media > picture,
body.woocommerce .site-main ul.products li.product .denisurf-loop-second picture {
	height: 100%;
	width: 100%;
}

body.woocommerce .site-main ul.products li.product .denisurf-loop-second img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

body.woocommerce .site-main ul.products li.product:is(:hover, :focus-within) .denisurf-loop-second {
	opacity: 1;
}



body.woocommerce .site-main ul.products li.product:is(:hover, :focus-within) .denisurf-loop-media:has(.denisurf-loop-second) > img,
body.woocommerce .site-main ul.products li.product:is(:hover, :focus-within) .denisurf-loop-media:has(.denisurf-loop-second) > picture img {
	opacity: 0;
}

.denisurf-loop-badge {
	border-radius: var(--denisurf-radius-card);
	color: var(--denisurf-color-surface);
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	left: var(--denisurf-space-3);
	line-height: 1.5;
	max-width: calc(100% - 30px);
	padding: 2px 8px;
	position: absolute;
	text-transform: uppercase;
	top: var(--denisurf-space-3);
	z-index: 8;
}

.denisurf-loop-badge--stock {
	background: var(--denisurf-color-ink);
	top: var(--denisurf-space-3);
}

.denisurf-loop-badge--new {
	background: var(--denisurf-color-primary-strong);
}

.denisurf-loop-badge--stock + .denisurf-loop-badge--new {
	top: 40px;
}

body.woocommerce .site-main ul.products li.product .woocommerce-loop-product__title,
body.woocommerce .site-main ul.products li.product h2 {
	color: var(--denisurf-color-ink);
	display: inline-block;
	font-family: var(--denisurf-font-family-base);
	font-size: var(--denisurf-font-size-product-title);
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	padding: 17px 0 0;
	text-align: left;
	transition: color 0.3s ease;
}

body.woocommerce .site-main ul.products li.product .price {
	color: var(--denisurf-color-ink-secondary);
	display: block;
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	line-height: 1.5;
	min-height: 33px;
	font-weight: 600;
	margin: 0;
	padding-top: 4px;
}

body.woocommerce .site-main ul.products li.product .price del {
	color: var(--denisurf-color-ink-secondary);
	opacity: 0.55;
}

body.woocommerce .site-main ul.products li.product .price ins {
	background: none;
	font-weight: 600;
	padding: 0;
}

body.woocommerce .site-main ul.products li.product .price ins .amount {
	color: var(--denisurf-color-primary);
}

/* Price and action share their own row; hovering cannot cover the title. */
.denisurf-product-media {
	position: relative;
}


.denisurf-loop-actions {
	display: grid;
	overflow: hidden;
}

body.woocommerce .site-main ul.products li.product .denisurf-loop-actions .button {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--denisurf-color-primary);
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	font-weight: 600;
	line-height: 19.5px;
	margin: 0;
	min-height: 33px;
	padding: 4px 0 0;
	position: static;
	text-align: left;
	text-transform: uppercase;
}

body.woocommerce .site-main ul.products li.product .denisurf-loop-actions .button:hover {
	color: var(--denisurf-color-primary-hover);
}

.denisurf-product-media .ds-wishlist--overlay {
	bottom: 15px;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, 10px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 9;
}

ul.products li.product:is(:hover, :focus-within) .denisurf-product-media .ds-wishlist--overlay,
.denisurf-product-media .ds-wishlist--overlay.ds-in-wishlist {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.denisurf-product-media .ds-wishlist--overlay .ds-wishlist__button {
	background: #fff;
	border-radius: 9999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	color: #777;
	flex-basis: 66px;
	height: 42px;
	width: 66px;
}

.denisurf-product-media .ds-wishlist--overlay .ds-wishlist__button::before {
	content: '\e905';
	font-family: 'Denisurf Header Icons', sans-serif;
	font-size: 18px;
	font-weight: 400;
}

.denisurf-product-media .ds-wishlist__button:focus-visible {
	outline: 2px solid var(--denisurf-color-primary);
	outline-offset: 3px;
}

.denisurf-product-media .ds-wishlist--overlay:hover .ds-wishlist__button {
	color: var(--denisurf-color-primary);
}

.denisurf-product-media .ds-wishlist--overlay .ds-wishlist__button[aria-pressed="true"] {
	background: #fff;
	color: var(--denisurf-color-primary);
}

.denisurf-product-media .ds-wishlist--overlay .ds-wishlist__button[aria-pressed="true"]::before {
	content: '\e904';
}

@media (hover: hover) and (pointer: fine) {
	.denisurf-loop-actions:has(.price) > .price,
	.denisurf-loop-actions:has(.price) > .button {
		grid-area: 1 / 1;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.denisurf-loop-actions:has(.price) > .button {
		opacity: 0;
		transform: translateY(100%);
	}

	ul.products li.product:is(:hover, :focus-within) .denisurf-loop-actions:has(.price) > .price {
		opacity: 0;
		transform: translateY(-100%);
	}

	ul.products li.product:is(:hover, :focus-within) .denisurf-loop-actions:has(.price) > .button {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (hover: none) {
	.denisurf-product-media .ds-wishlist--overlay {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.denisurf-loop-media img,
	.denisurf-loop-second,
	.denisurf-loop-actions > .price,
	.denisurf-loop-actions > .button,
	.denisurf-product-media .ds-wishlist--overlay {
		transition: none;
	}
}

body.woocommerce .site-main ul.products li.product .star-rating {
	display: none;
}

/* Archive header: centered category title, no description banner gaps. */

.woocommerce-products-header {
	margin-bottom: var(--denisurf-space-3);
	text-align: center;
}

/* Preserve the archive heading as the large centered page title. */

.woocommerce-products-header .woocommerce-products-header__title {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-heading);
	font-size: 72.611px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	margin: 0 0 28px;
	text-transform: uppercase;
}

/* Product search only: a compact results line so Filtrar sits with the heading.
 * Category archives keep the large centered title above. */

body.search .woocommerce-products-header .woocommerce-products-header__title {
	color: var(--denisurf-color-ink-secondary);
	font-family: var(--denisurf-font-family-header);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin: 0;
	text-align: left;
	text-transform: uppercase;
}

.woocommerce-products-header .term-description p {
	margin: 0 auto var(--denisurf-space-3);
	max-width: 50%;
}

/*
 * Off-canvas filter drawer (js/shop-archive.js): fixed left drawer with the
 * catalog widgets, dimmed overlay behind it.
 */

.denisurf-filter-overlay[hidden],
.denisurf-filter-drawer[hidden] {
	display: none;
}

.denisurf-filter-overlay {
	background: rgba(30, 30, 30, 0.5);
	bottom: 0;
	height: 100vh;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100vw;
	z-index: 998;
}

.denisurf-filter-drawer {
	background: var(--denisurf-color-surface);
	bottom: 0;
	box-shadow: var(--denisurf-shadow-overlay);
	height: 100vh;
	left: 0;
	max-width: 85vw;
	overflow-y: auto;
	position: fixed;
	top: 0;
	width: 320px;
	z-index: 999;
}

.denisurf-filter-drawer-inner {
	padding: var(--denisurf-space-4);
	position: relative;
}

.denisurf-filter-close {
	background: none;
	border: 0;
	color: var(--denisurf-color-ink-secondary);
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	padding: var(--denisurf-space-2);
	position: absolute;
	right: 0;
	top: 0;
}

.denisurf-filter-drawer .widget {
	border-bottom: 1px solid var(--denisurf-color-hairline);
	font-size: 13px;
	margin: 0 0 var(--denisurf-space-3);
	padding: 0 0 var(--denisurf-space-3);
}

.denisurf-filter-drawer .widget-title {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-header);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 var(--denisurf-space-2);
}

.denisurf-filter-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
.denisurf-filter-drawer ul li a {
	color: var(--denisurf-color-ink-secondary);
	font-size: 13px;
}

.denisurf-filter-drawer .price_slider .ui-slider-handle {
	background: var(--denisurf-color-primary);
}

/*
 * Single product (captured default layout): centered 900px column, image
 * left 50% with an 75px gap, summary right; Syne title, orange price,
 * orange add-to-cart with the quantity stepper, description tabs, 4-up
 * related products.
 */

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product .site-content .col-full {
	box-sizing: border-box;
	max-width: 1121px;
	padding-left: 68px;
	padding-right: 68px;
}

body.single-product .content-area {
	margin-top: 85px;
	float: none;
	margin-right: 0;
	width: 100%;
}

body.single-product div.product {
	position: relative;
}

body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .images {
	display: flex;
	margin-bottom: var(--denisurf-space-5);
	margin-right: calc(8.3333% + 20px);
	width: calc(50% - 10px);
}

body.single-product div.product .summary {
	padding-top: 21px;
	float: right;
	margin-bottom: var(--denisurf-space-5);
	width: calc(41.6667% - 11.6667px);
}

body.single-product div.product .product_title {
	color: var(--denisurf-color-ink);
	font-family: var(--denisurf-font-family-heading);
	font-size: 40.8716px;
	font-weight: 600;
	line-height: 1.13;
	margin-bottom: 21px;
}

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product div.product p.price {
	font-family: var(--denisurf-font-family-heading);
	line-height: 1.5;
	margin: 0 0 20px;
	color: var(--denisurf-color-ink);
	font-size: 22px;
	font-weight: 600;
}

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product div.product .price del {
	color: var(--denisurf-color-ink-secondary);
	opacity: 0.55;
}

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product div.product .price ins {
	background: none;
}

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product div.product .price ins .amount,
/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product div.product p.price .amount {
	color: var(--denisurf-color-primary);
}

body.single-product div.product div.summary form.cart {
	border-bottom: 0;
	margin-bottom: 30px;
	padding: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product div.product form.cart .button,
.woocommerce #respond input#submit,
/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--denisurf-color-primary);
	border-radius: var(--denisurf-radius-card);
	color: var(--denisurf-color-surface);
	font-family: var(--denisurf-font-family-header);
	font-weight: var(--denisurf-font-weight-strong);
	padding: 0.7em 1.6em;
}

body.single-product div.product form.cart .single_add_to_cart_button {
	font-family: var(--denisurf-font-family-heading);
	font-weight: 700;
	line-height: 1.4;
	width: 220px;
	font-size: 13px;
	text-transform: uppercase;
	border-radius: 0;
	padding: 18px 16px 15px;
}

body.single-product div.product form.cart .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--denisurf-color-primary-hover);
	color: var(--denisurf-color-surface);
}

body.single-product div.product table.variations,
body.single-product div.product .variations {
	border: 0;
	margin-bottom: var(--denisurf-space-2);
}

body.single-product div.product table.variations th.label {
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	padding-right: var(--denisurf-space-2);

	text-transform: uppercase;
	margin-bottom: 5px;
}

body.single-product div.product form.cart table.variations select {
	font-family: var(--denisurf-font-family-base);
	height: 40px;
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--denisurf-color-hairline);
	border-radius: var(--denisurf-radius-card);
	font-size: 14px;
	padding: 8px 42px 8px 8px;
}

body.single-product div.product form.cart .reset_variations {
	color: var(--denisurf-color-primary);
	display: inline-block;
	font-family: var(--denisurf-font-family-heading);
	font-size: 10px;
	font-weight: var(--denisurf-font-weight-strong);
	line-height: 1.4;
	margin: 0;
	padding: var(--denisurf-space-4) 0 0;
	text-transform: uppercase;
}

body.single-product div.product form.cart .reset_variations::before {
	content: none;
	display: none;
	margin: 0;
}

body.single-product div.product form.cart .reset_variations:hover,
body.single-product div.product form.cart .reset_variations:focus {
	color: var(--denisurf-color-primary);
	opacity: 1;
}

body.single-product div.product .single_variation_wrap .woocommerce-variation-price {
	margin-bottom: var(--denisurf-space-2);
}

body.single-product div.product .product_meta {
	font-family: var(--denisurf-font-family-heading);
	font-weight: 600;
	border-top: 0;
	color: #999;
	font-size: 10px;
	padding-top: var(--denisurf-space-2);
	line-height: 2.2;
	text-transform: uppercase;
}

body.single-product div.product .product_meta > span {
	display: block;
}

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */


/* Tabs: description-only header row with the captured underline. */

body.single-product div.product .woocommerce-tabs ul.tabs {
	border: 0;
	float: none;
	width: 100%;
	text-align: center;
	margin: 0 0 50px;
	padding: 0;
}

body.single-product div.product .woocommerce-tabs ul.tabs li {
	display: inline-block;
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 var(--denisurf-space-3) -1px 0;
	padding: 0;
}

body.single-product div.product .woocommerce-tabs ul.tabs li::after,
body.single-product div.product .woocommerce-tabs ul.tabs li::before {
	display: none;
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
	line-height: 1.5;
	color: var(--denisurf-color-ink-secondary);
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	font-weight: 700;
	padding: 18px 0 5px;
	text-transform: uppercase;
}

body.single-product div.product .woocommerce-tabs ul.tabs li.active {
	border-top: 3px solid var(--denisurf-color-primary);
	color: var(--denisurf-color-ink);
}

/* Related / upsell products: the same card grid, 4 columns, section title. */

/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product .related.products > h2,
/* stylelint-disable-next-line no-descending-specificity -- child selector intentionally layers over the parent Storefront selector it follows. */
body.single-product .upsells.products > h2 {
	font-size: 13px;
	font-family: var(--denisurf-font-family-heading);
	font-weight: 600;
	line-height: 1.13;
	text-transform: uppercase;
	margin-bottom: 45px;
	text-align: center;
}

body.single-product div.product .woocommerce-tabs .panel {
	max-width: 650px;
	font-size: 16px;
	line-height: 24px;
	float: none;
	width: 66.6667%;
	margin: 0 auto 100px;
}

body.single-product div.product .woocommerce-tabs .panel p {
	margin: 0 0 20px;
}
body.single-product div.product .woocommerce-tabs .panel hr {
	margin: 20px 0;
}
body.single-product div.product .woocommerce-tabs {
	padding: 80px 0 0;
}

body.single-product div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	align-self: flex-start;
	margin: 0;
	max-height: 488px;
	overflow: auto;
	order: 1;
	padding-right: 10px;
	width: 16%;
}

body.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
	float: none;
	width: 100%;
	margin: 0 0 10px;
}

body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	display: none;
}

body.single-product div.product .woocommerce-product-gallery .flex-viewport {
	width: 84%;
	order: 2;
	margin-left: 0;
}

body.single-product div.product .related ul.products li.product {
	clear: none;
	width: calc((100% - 75px) / 4);
	text-align: left;
}



body.single-product div.product form.cart .quantity {
	display: flex;
	align-items: center;
	width: 77px;
	height: 50px;
	margin-right: 23px;
}

body.single-product .ds-wishlist--single {
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	text-transform: uppercase;
}
body.single-product .ds-wishlist--single .ds-wishlist__button::before {
	content: '\2661';
	font-size: 20px;
	margin-right: 10px;
	vertical-align: middle;
}





body.single-product #page div.product .product_meta a {
	color: #999;
	text-decoration: none;
}

body.denisurf-storefront-archive .site-content .col-full {
	margin: 0;
	max-width: none;
	padding: 0 60px;
}
body.denisurf-storefront-archive .woocommerce-products-header {
	display: flow-root;
	padding: 85px 0 0;
	margin-bottom: 42px;
}

body.search.denisurf-storefront-archive .woocommerce-products-header {
	margin-bottom: 12px;
	padding-top: 28px;
	text-align: left;
}
body.denisurf-storefront-archive .storefront-sorting .woocommerce-ordering {
	order: 3;
	float: none;
}
body.denisurf-storefront-archive .storefront-sorting .woocommerce-result-count {
	order: 2;
}
body.denisurf-storefront-archive .storefront-sorting .orderby {
	border: 0;
	text-transform: uppercase;
}
body.denisurf-infinite-scroll .storefront-sorting:last-child {
	display: none;
}

body.single-product div.product table.variations th,
body.single-product div.product table.variations td {
	display: block;
	background: transparent;
	padding: 0;
	text-align: left;
}

body.single-product div.product table.variations td.value {
	margin-bottom: 15px;
}

body.single-product div.product .related ul.products li.product:nth-child(4n) {
	margin-right: 0;
}

body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 0.3;
}

@media (max-width: 1023px) {
	body.single-product .site-content .col-full {
		max-width: none;
		padding: 0 60px;
		margin: 0;
	}
	body.single-product .content-area {
		margin-top: 0;
	}
	body.single-product div.product .woocommerce-product-gallery,
	body.single-product div.product .images,
	body.single-product div.product .summary {
		display: block;
		float: none;
		width: 100%;
		margin-right: 0;
	}
	body.single-product div.product .product_title {
		font-size: 23.101px;
		margin-bottom: 30px;
	}
	body.single-product div.product .woocommerce-product-gallery .flex-viewport {
		margin-bottom: 0;		width: 100%;
		margin-left: 0;
	}
	body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
		flex-wrap: wrap;
		margin: 0 -5px;
		padding: 5px 0 0;
		align-self: flex-start;
		max-height: none;
		padding-right: 0;
		position: static;
		width: calc(100% + 10px);
		display: flex;
		gap: 0;
	}
	body.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
		flex: 0 0 25%;
		width: 25%;
		padding: 0 5px;
		margin: 0;
	}
	body.single-product div.product .woocommerce-tabs .panel {
	max-width: 650px;
		width: 100%;
		margin-bottom: 60px;
		font-size: 14px;
		line-height: 21px;
	}
	body.single-product div.product .woocommerce-product-gallery {
		margin-bottom: 89px;
	}
	body.single-product div.product .woocommerce-product-gallery .flex-viewport img {
		padding-left: 0;
	}
	body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
		opacity: 1;
	}
	body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
		opacity: 0.3;
	}
	body.single-product div.product .related.products > h2 {
		text-align: left;
	}


	body.single-product div.product .summary {
		padding-top: 0;
	}
	body.single-product div.product p.price {
		margin: 0;
		padding-bottom: 15px;
	}
	body.single-product div.product .product_meta {
		padding: 20px 0;
		border-block: 1px solid #eee;
	}
	body.single-product div.product .woocommerce-tabs ul.tabs li a {
		padding: 5px 0;
	}

	body.single-product div.product form.cart:not(.variations_form) {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	body.single-product div.product form.cart:not(.variations_form) .quantity {
		order: 0;
		margin-right: 15px;
	}
	body.single-product div.product form.cart:not(.variations_form) .ds-wishlist--single {
		order: 1;
		margin: 0;
	}
	body.single-product div.product form.cart:not(.variations_form) .single_add_to_cart_button {
		order: 2;
	}
}

@media (max-width: 767px) {

	body.woocommerce .site-main ul.products li.product {
		margin-right: var(--denisurf-space-2);
		margin-bottom: var(--denisurf-space-2);
		padding-bottom: var(--denisurf-space-2);
		width: calc((100% - 10px) / 2);
	}

	body.woocommerce .site-main ul.products li.product:nth-child(2n) {
		margin-right: 0;
	}

	body.woocommerce .site-main ul.products li.product:nth-child(n + 1) {
		clear: none;
	}

	body.woocommerce .site-main ul.products li.product:nth-child(2n + 1) {
		clear: both;
	}

	body.woocommerce .site-main ul.products li.product .woocommerce-loop-product__title,
	body.woocommerce .site-main ul.products li.product h2 {
		font-size: 13px;
	}

	body.single-product div.product .woocommerce-product-gallery,
	body.single-product div.product .images,
	body.single-product div.product .summary {
		float: none;
		margin-right: 0;
		width: 100%;
	}
	body.single-product .site-content .col-full {
		padding: 0;
		margin: 0;
	}
	body.single-product div.product .related ul.products li.product {
		width: calc((100% - 10px) / 2);
	}
	body.denisurf-storefront-archive .site-content .col-full {
		padding: 0 30px;
		margin: 0;
	}
	body.denisurf-storefront-archive .woocommerce-products-header__title {
		font-size: 41.041px;
		line-height: 1.33333;
	}

	body.single-product div.product form.cart:not(.variations_form) .single_add_to_cart_button {
		order: 1;
	}
	body.single-product div.product form.cart:not(.variations_form) .ds-wishlist--single {
		order: 2;
		width: 100%;
	}

	body.single-product div.product .summary {
		padding: 0 30px;
		box-sizing: border-box;
	}
	body.single-product div.product .product_title {
		margin-bottom: 21px;
	}
	body.single-product div.product .woocommerce-tabs {
		padding: 40px 30px 0;
	}
	body.single-product div.product .related {
		padding: 0 30px;
	}
}

body.error404 #page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.error404 #content,
body.error404 #content > .col-full,
body.error404 #primary,
body.error404 #main,
body.error404 .error-404 {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
}

.error-404 {
	text-align: center;
}

.error-404 .page-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: none;
	padding: 24px 0 72px;
}

.error-404 .page-header {
	margin: 0;
}

.error-404 .error-banner {
	padding: 5px 0 30px;
}

.error-404 .error-banner::before {
	content: '\e92d';
	display: block;
	color: var(--denisurf-color-ink);
	font-family: 'Denisurf Header Icons', sans-serif;
	font-size: 180px;
	font-style: normal;
	font-weight: 400;
	line-height: 220px;
}

.error-404 .page-title {
	margin: 0 0 23px;
	font-family: var(--denisurf-font-family-heading);
	font-size: 3.75rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-transform: none;
}

.error-404 .error-404-text {
	margin: 0;
	color: var(--denisurf-color-ink-secondary);
	font-size: 1.5rem;
	line-height: 1.4;
}

.error-404 .denisurf-404-home {
	margin: 35px 0 0;
}

.error-404 .denisurf-404-home .button {
	display: inline-block;
	background: var(--denisurf-color-primary);
	border: 0;
	border-radius: var(--denisurf-radius-card);
	color: var(--denisurf-color-surface);
	font-family: var(--denisurf-font-family-heading);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	padding: 16px 22px;
	text-decoration: none;
	text-transform: uppercase;
}

.error-404 .denisurf-404-home .button:hover,
.error-404 .denisurf-404-home .button:focus {
	background: var(--denisurf-color-primary-hover);
	color: var(--denisurf-color-surface);
}

@media (max-width: 767px) {
	.error-404 .error-banner::before {
		font-size: 120px;
		line-height: 140px;
	}

	.error-404 .page-title {
		font-size: 2.25rem;
	}

	.error-404 .error-404-text {
		font-size: 1.125rem;
	}
}