/*
 * Catania Calzature — global components (every page): tokens aliases, base, buttons, forms, notices, header, menus,
 * mini cart, footer, breadcrumbs, product card, rails. Mobile first; breakpoints 640 / 1024 / 1280 px.
 * Colours, fonts and sizes come from theme.json presets.
 */

/* ---------- Tokens (short aliases of the theme.json presets) ---------- */
:root {
	--c-primary: var(--wp--preset--color--primary);
	--c-primary-700: var(--wp--preset--color--primary-700);
	--c-primary-50: var(--wp--preset--color--primary-50);
	--c-accent: var(--wp--preset--color--accent);
	--c-accent-700: var(--wp--preset--color--accent-700);
	--c-accent-50: var(--wp--preset--color--accent-50);
	--c-ink: var(--wp--preset--color--ink);
	--c-text: var(--wp--preset--color--text);
	--c-muted: var(--wp--preset--color--muted);
	--c-line: var(--wp--preset--color--line);
	--c-line-strong: var(--wp--preset--color--line-strong);
	--c-soft: var(--wp--preset--color--soft);
	--c-success: var(--wp--preset--color--success);
	--c-success-50: var(--wp--preset--color--success-50);
	--c-warning: var(--wp--preset--color--warning);
	--c-warning-50: var(--wp--preset--color--warning-50);
	--c-danger: var(--wp--preset--color--danger);
	--c-danger-50: var(--wp--preset--color--danger-50);
	--f-head: var(--wp--preset--font-family--heading);
	--f-body: var(--wp--preset--font-family--body);
	--r-sm: 0px;
	--r-md: 0px;
	--r-lg: 0px;
	--r-pill: 999px;
	--c-paper: var(--wp--preset--color--paper);
	--track: .12em; /* Uppercase labels, buttons, navigation. */
	--shadow-1: var(--wp--preset--shadow--sm);
	--shadow-2: var(--wp--preset--shadow--lg);
	--gutter: var(--wp--preset--spacing--gutter);
	--wide: var(--wp--style--global--wide-size, 1440px);
	--tap: 48px;
	--header-h: 0px;
}

/* Fallback faces sized like Jost and Marcellus, so the text keeps its place while the web fonts load (CLS). */
@font-face { font-family: "Jost Fallback"; src: local("Arial"); size-adjust: 96%; ascent-override: 110%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: "Marcellus Fallback"; src: local("Georgia"); size-adjust: 98%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { background: var(--c-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.cc-locked { overflow: hidden; }
img, video { max-width: 100%; height: auto; }
/* Focus ring in ink (16:1 on paper). */
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.screen-reader-text:focus { z-index: 100000; top: 8px; left: 8px; width: auto; height: auto; padding: 10px 14px; clip: auto; clip-path: none; border-radius: var(--r-sm); background: var(--c-ink); color: #fff; }
.skip-link:focus { position: fixed !important; }
.cc-container { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.cc-muted { color: var(--c-muted); }
/* Links inside running text are underlined, so they are not told apart by colour alone (owner, 21/10: every text
   link underlined, so it is clear it can be clicked): every paragraph of the page's content (not header and footer). */
:where(main p, main dd, .cc-acc__links, .wp-block-post-content p, .wp-block-post-content :is(.wp-block-list, .cc-prose ul, .cc-prose ol) > li, .wp-block-post-content summary + *, .woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text, .cc-muted, .wc-block-components-notice-banner__content, .woocommerce-MyAccount-content p, .cc-ty p, .cc-shop-head__intro) a:not(.wp-block-button__link):not(.button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.i { flex: none; width: 22px; height: 22px; vertical-align: middle; }
/* Space between the header and the first element of every page (breadcrumbs or title); the home hero starts at the
   header. */
.cc-main { padding-top: clamp(14px, 2vw, 22px); padding-bottom: var(--wp--preset--spacing--section); }
.cc-main.cc-home { padding-top: 0; }
.cc-main > :first-child { margin-top: 0; }
/* Product photos: supplier images often sit on an almost-white box (253–254) inside the white canvas, which shows as a
   faint rectangle on white cards. A 2% lift turns those near-whites into white; colours are practically unchanged. */
.cc-card__img, .cc-gallery__slide img, .cc-gallery__thumb img, .cc-search__item img,
.wc-block-mini-cart__drawer .wc-block-cart-item__image img, .woocommerce-cart-form .product-thumbnail img, .cc-co-item__thumb img,
.cc-subcat__img img { filter: brightness(1.02); }
.cc-linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.cc-linklike:hover { text-decoration: underline; }
.cc-prose { color: var(--c-text); line-height: 1.65; }
.cc-prose > * + * { margin-top: 1em; }
.cc-prose h2, .cc-prose h3 { margin-top: 1.6em; }
.cc-prose ul, .cc-prose ol { padding-left: 1.2em; }
.cc-prose li + li { margin-top: .35em; }

/* ---------- Buttons ---------- */
.cc-btn,
.woocommerce .button, .woocommerce-page .button, a.button, button.button, input.button,
.wp-element-button, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--tap); padding: 0 24px;
	border: 1px solid transparent; border-radius: 0;
	background: var(--c-primary); color: #fff;
	font: 500 13px/1.2 var(--f-body); letter-spacing: var(--track); text-transform: uppercase; text-align: center; white-space: normal; text-decoration: none !important;
	cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.cc-btn:hover, .woocommerce .button:hover, a.button:hover, button.button:hover, .wp-element-button:hover, .wp-block-button__link:hover { background: var(--c-primary-700); color: #fff; }
.cc-btn .i, .button .i, .wp-element-button .i { width: 20px; height: 20px; }
.cc-btn--primary { background: var(--c-primary); color: #fff; }
.cc-btn--outline, .is-style-outline > .wp-block-button__link, .woocommerce .button.cc-btn--outline {
	border-color: var(--c-line-strong); background: #fff; color: var(--c-ink);
}
.cc-btn--outline:hover, .is-style-outline > .wp-block-button__link:hover { border-color: var(--c-ink); background: #fff; color: var(--c-ink); }
.cc-btn--ghost { background: transparent; color: var(--c-primary); }
.cc-btn--ghost:hover { background: transparent; color: var(--c-ink); text-decoration: underline !important; text-underline-offset: 4px; }
.cc-btn--whatsapp { background: #1f7a4a; color: #fff; }
.cc-btn--whatsapp:hover { background: #18613b; }
.cc-btn--sm { min-height: 40px; padding: 0 16px; font-size: 12px; }
.cc-btn--lg { min-height: 52px; font-size: 13px; }
.cc-btn--block { width: 100%; }
.button.alt, .woocommerce .button.alt { background: var(--c-primary); color: #fff; }
.button:disabled, .button.disabled, .cc-btn:disabled { border-color: var(--c-line); background: var(--c-line) !important; color: var(--c-text) !important; cursor: not-allowed; }
.button.loading { opacity: .7; pointer-events: none; }
.cc-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 0; background: none; color: var(--c-ink); font: inherit; text-decoration: none !important; cursor: pointer; }
.cc-icon-btn:hover { background: transparent; color: var(--c-ink); opacity: .7; }

/* ---------- Chips, badges ---------- */
.cc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cc-chips--scroll { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; }
.cc-chips--scroll::-webkit-scrollbar { display: none; }
.cc-chips__label { color: var(--c-muted); font-size: 14px; white-space: nowrap; }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 0; background: #fff; color: var(--c-ink); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none !important; }
.cc-chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.cc-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 0; font: 500 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.cc-badge--sale { background: var(--c-accent); color: #fff; }

/* ---------- Prices, availability, colour dots ---------- */
.cc-price, .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: var(--c-ink); font: 500 15px/1.25 var(--f-body); font-variant-numeric: tabular-nums; }
.cc-price del ~ ins, .price del ~ ins { color: var(--c-accent); }
.cc-price del, .price del { order: 2; color: var(--c-muted); font: 400 13px var(--f-body); text-decoration: line-through; }
.cc-price ins, .price ins { order: 1; background: none; text-decoration: none; }
/* Sale prices printed by plugins outside ".price" (mini cart…): same look. */
ins:has(> .woocommerce-Price-amount) { background: none; text-decoration: none; }
del:has(> .woocommerce-Price-amount) { margin-right: 4px; color: var(--c-muted); font-weight: 400; }
.cc-price .woocommerce-Price-amount, .price .woocommerce-Price-amount { white-space: nowrap; }
.cc-price:empty, .price:empty { display: none; } /* Sold-out variable products have no price to show. */
.cc-avail { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; }
.cc-avail__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cc-avail--in { color: var(--c-success); }
.cc-avail--bo { color: var(--c-warning); }
.cc-avail--out { color: var(--c-muted); }
/* "Spedito in 24/48 h" (product page, cart): a small square badge; on order and sold out in their own tones. */
.cc-ship-badge { display: inline-flex; align-items: center; justify-self: start; gap: 6px; width: fit-content; margin: 4px 0 0; padding: 4px 8px; border-radius: 0; background: var(--c-primary-50); color: var(--c-ink); font-size: 12px; font-weight: 500; letter-spacing: .04em; line-height: 1.3; white-space: nowrap; }
.cc-ship-badge[hidden] { display: none; }
.cc-ship-badge .i, .cc-delivery .cc-ship-badge .i { flex: none; width: 14px; height: 14px; margin: 0; color: currentColor; }
.cc-ship-badge--bo { background: var(--c-warning-50); color: var(--c-warning); }
.cc-ship-badge--out { background: var(--c-soft); color: var(--c-muted); }
.cc-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cc-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); background-size: cover; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%); }
.cc-dots__more { color: var(--c-muted); font-size: 12px; line-height: 14px; }

/* ---------- Forms (WooCommerce, WPForms, comments, search) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"],
select, textarea, .input-text {
	width: 100%; min-height: 48px; padding: 12px 14px;
	border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff; color: var(--c-ink);
	font: 400 16px/1.3 var(--f-body); transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 110px; resize: vertical; }
select { padding-right: 40px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
input:focus, select:focus, textarea:focus, .input-text:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 1px var(--c-primary); }
::placeholder { color: var(--c-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--c-primary); vertical-align: -4px; }
/* Checkboxes and radios from the keyboard: a clear 2 px ring (the 1 px shadow of text fields is too faint on them). */
input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; box-shadow: none; }
label { color: var(--c-ink); font-size: 13px; font-weight: 500; }
/* Search fields with a magnifier (brands, filters): icon inside on the left, the text always starts after it. */
.cc-field-search { position: relative; display: block; margin: 0; }
.cc-field-search > .i { position: absolute; top: 50%; left: 14px; z-index: 1; width: 20px; height: 20px; color: var(--c-muted); transform: translateY(-50%); pointer-events: none; }
.cc-field-search > input:is([type="search"], [type="text"]) { padding-left: 44px; background-color: #fff; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.form-row { margin: 0 0 14px; padding: 0; }
.form-row label { display: block; margin-bottom: 6px; }
.form-row .required { color: var(--c-danger); text-decoration: none; border: 0; }
.form-row .optional { color: var(--c-muted); font-weight: 400; }
/* As in the approved design: optional fields say "(facoltativo)", required ones carry no asterisk (they are
   aria-required for assistive technology). The asterisk of the terms checkbox stays. */
.form-row > label:not(.woocommerce-form__label-for-checkbox) > .required { display: none; }
.form-row.woocommerce-invalid input.input-text, .form-row.woocommerce-invalid select { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); }
.form-row.woocommerce-validated input.input-text { border-color: var(--c-line-strong); }
.woocommerce-form__label-for-checkbox, .woocommerce-form__label-checkbox { display: inline-flex !important; align-items: flex-start; gap: 10px; font-weight: 400; line-height: 1.4; cursor: pointer; }
.woocommerce-input-wrapper { display: block; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; }
@media (min-width: 640px) {
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; display: inline-block; width: calc(50% - 6px); vertical-align: top; }
	.woocommerce form .form-row-first { margin-right: 12px; }
}

/* Show/hide password (button added by WooCommerce's script inside .password-input). */
.password-input { position: relative; display: block; }
.password-input input { padding-right: 52px; }
.show-password-input { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--c-muted); cursor: pointer; transform: translateY(-50%); }
.show-password-input:hover { color: var(--c-ink); }
.show-password-input::after { content: ""; width: 22px; height: 22px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.show-password-input.display-password::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-2.6 3.5M6.6 6.6C3.8 8.4 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M3 3l18 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-2.6 3.5M6.6 6.6C3.8 8.4 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M3 3l18 18'/%3E%3C/svg%3E"); }

/* Login forms (account page, woocommerce/global/form-login.php): "Ricordami" and "Password dimenticata?" on one line. */
.woocommerce-form-login .form-row { margin-bottom: 14px; }
.cc-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 18px; font-size: 14px; }
.cc-auth__row .woocommerce-form__label-for-checkbox { font-size: 14px; }
.cc-auth__lost { font-size: 14px; font-weight: 600; }

/* Floating labels (text fields of WooCommerce forms, class added in inc/woocommerce/cart-checkout.php). */
.form-row.cc-float { position: relative; }
.form-row.cc-float > label { position: absolute; top: 15px; left: 15px; z-index: 1; max-width: calc(100% - 30px); margin: 0; overflow: hidden; color: var(--c-muted); font-size: 15px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transition: top .15s, font-size .15s; }
.form-row.cc-float .input-text { padding-top: 22px; padding-bottom: 6px; }
.form-row.cc-float textarea.input-text { padding-top: 26px; }
.form-row.cc-float:focus-within > label,
.form-row.cc-float:has(.input-text:not(:placeholder-shown)) > label,
.form-row.cc-float:has(.input-text:-webkit-autofill) > label { top: 6px; font-size: 12px; }
.form-row.cc-float .input-text::placeholder { color: transparent; }
.form-row.cc-float:focus-within .input-text::placeholder { color: var(--c-muted); } /* Hints like "Via/Piazza e numero civico" while typing. */
.form-row.cc-float .description { margin-top: 6px; color: var(--c-muted); font-size: 13px; }

/* selectWoo (country and province in checkout, account addresses) like the other fields. */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single { height: 48px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff; }
.select2-container .select2-selection--single .select2-selection__rendered { padding: 0 40px 0 14px; color: var(--c-ink); font-size: 16px; line-height: 46px; }
.select2-container .select2-selection--single .select2-selection__arrow { top: 11px; right: 10px; }
.select2-container--focus .select2-selection--single, .select2-container--open .select2-selection--single { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.select2-dropdown { border-color: var(--c-line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-2); }
.select2-search--dropdown .select2-search__field { min-height: 40px; border-radius: 0; }
.select2-results__option { padding: 8px 12px; font-size: 15px; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--c-primary); }
/* Select fields with the label inside, like the floating labels of the text fields. */
.form-row:has(.select2-container), .form-row:has(> .woocommerce-input-wrapper > select) { position: relative; }
.form-row:has(.select2-container) > label, .form-row:has(> .woocommerce-input-wrapper > select) > label { position: absolute; top: 6px; left: 15px; z-index: 2; margin: 0; color: var(--c-muted); font-size: 12px; font-weight: 400; pointer-events: none; }
/* Same height as the text fields next to it (22px + 6px padding, 1.3 line, border): Paese and Provincia line up with CAP and Città. */
.form-row:has(.select2-container) .select2-selection--single { height: auto; }
.form-row:has(.select2-container) .select2-selection__rendered { padding-top: 22px; padding-bottom: 6px; line-height: 1.3; }
.form-row:has(.select2-container) .select2-selection__arrow { top: 12px; }
.form-row:has(> .woocommerce-input-wrapper > select) select { padding-top: 20px; padding-bottom: 4px; }
/* An empty Provincia: selectWoo's placeholder is a single space, which makes no line, and the box was 30px high next
   to fields of 51px. The line stays, and until a province is chosen the label sits inside like the one of an empty
   text field, rising when the menu is focused or open (owner, 2026-10-21). */
.form-row:has(.select2-container) .select2-selection__rendered { min-height: calc(1.3em + 28px); } /* border-box: the 22px + 6px padding are inside. */
.form-row:has(.select2-selection__placeholder):not(:focus-within):not(:has(.select2-container--open)) > label { top: 15px; font-size: 15px; }

/* WPForms (classic markup): same fields as the rest of the site. */
.wpforms-container { margin: 0 0 24px; }
.wpforms-container .wpforms-field { padding: 0 0 14px !important; }
.wpforms-container .wpforms-field-label { margin-bottom: 6px !important; color: var(--c-ink) !important; font-size: 13px !important; font-weight: 500 !important; }
.wpforms-container .wpforms-field-sublabel { color: var(--c-muted) !important; font-size: 12px !important; }
.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container textarea.wpforms-field-medium { max-width: 100% !important; }
.wpforms-container input[type], .wpforms-container select, .wpforms-container textarea { height: auto !important; min-height: 48px; border-radius: var(--r-sm) !important; font-size: 16px !important; }
.wpforms-container .wpforms-required-label { color: var(--c-danger) !important; }
.wpforms-container .wpforms-submit { min-height: var(--tap) !important; padding: 0 28px !important; border: 0 !important; border-radius: 0 !important; background: var(--c-primary) !important; color: #fff !important; font: 500 13px var(--f-body) !important; letter-spacing: var(--track) !important; text-transform: uppercase !important; }
.wpforms-container .wpforms-submit:hover { background: var(--c-primary-700) !important; }
.wpforms-container textarea { min-height: 128px !important; }
@media (max-width: 639px) { .wpforms-container .wpforms-submit { width: 100%; } }
.wpforms-container label.wpforms-error, .wpforms-container .wpforms-error { color: var(--c-danger) !important; font-size: 13px !important; }
.wpforms-confirmation-container-full { padding: 16px 18px !important; border: 1px solid #bfe3cc !important; border-radius: var(--r-md) !important; background: var(--c-success-50) !important; color: var(--c-ink) !important; }

/* ---------- Messages ----------
   One component for every message: WooCommerce notices (block notices in block themes), classic notices printed by
   plugins and snippets, the theme's own boxes. Soft background, thin border, icon and text in the tone's colour.
   Tones: success (green), info (blue), warning (amber: notices printed with the data attribute cc-tone="warning",
   e.g. the "solo in Italia" product rules), error (red). Errors of a single field or of the coupon code sit under
   the field as a short red line with an icon. The selectors start with "body" to stay above WooCommerce's own notice
   styles, which the block cart/checkout stylesheets also load. */
body :is(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
	--tone: var(--c-ink); --tone-bg: #fff; --tone-line: var(--c-line); --tone-ink: var(--c-ink);
	display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px !important;
	border: 1px solid var(--tone-line); border-radius: var(--r-md); background: var(--tone-bg); color: var(--tone-ink);
	font-size: 14px; font-weight: 500; line-height: 1.45; list-style: none;
}
body :is(.wc-block-components-notice-banner.is-success, .woocommerce-message) { --tone: var(--c-success); --tone-bg: var(--c-success-50); --tone-line: #bfe3cc; --tone-ink: #14532d; }
body :is(.wc-block-components-notice-banner.is-error, .woocommerce-error) { --tone: var(--c-danger); --tone-bg: var(--c-danger-50); --tone-line: #f4c7c3; --tone-ink: #8f1d15; }
body :is(.wc-block-components-notice-banner.is-warning, .wc-block-components-notice-banner[data-cc-tone="warning"]) { --tone: var(--c-warning); --tone-bg: var(--c-warning-50); --tone-line: #f1d9a7; --tone-ink: var(--c-warning); }
body :is(.wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-error, .wc-block-components-notice-banner.is-info, .wc-block-components-notice-banner.is-warning) { border-color: var(--tone-line); background: var(--tone-bg); }
body .wc-block-components-notice-banner[class] > svg { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 0; background: none; fill: var(--tone); }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content { flex: 1; min-width: 0; align-self: center; padding: 0; }
body .wc-block-components-notice-banner__content a:not(.wc-forward):not(.button), body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; font-weight: 700; }
/* Lists of errors (checkout): one line per problem, each a link to its field. */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content :is(ul, ol) { margin: 4px 0 0; padding-left: 18px; }
body .wc-block-components-notice-banner__content li { margin: 2px 0; }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary { margin: 0; font-weight: 600; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; min-height: 36px; margin-left: auto; padding: 0 12px; border: 1px solid var(--tone-line); background: #fff; color: var(--c-ink); font-size: 14px; }
/* "Vai al carrello" and similar links (WooCommerce puts them before the text): under the text on phones, at the end of
 * the line from 640px. */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward { float: none; min-height: 0; margin: 0; padding: 0 !important; border: 0; background: none !important; color: inherit !important; font-size: 14px; font-weight: 700; text-decoration: underline; opacity: 1; }
.wc-block-components-notice-banner__content:has(> .wc-forward) { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
@media (min-width: 640px) {
	.wc-block-components-notice-banner__content:has(> .wc-forward) { display: block; }
	body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward { float: right; margin: 0 0 0 16px; }
}
.woocommerce-error li { list-style: none; }
.woocommerce-notices-wrapper:empty { display: none; }
/* WooCommerce moves the focus to new messages (for screen readers): no focus ring around a message box. */
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup, .wc-block-components-notice-banner, .woocommerce-error, .woocommerce-message, .woocommerce-info, .wc-block-store-notices)[tabindex="-1"]:focus,
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup, .wc-block-store-notices):focus { outline: none; }
/* Errors under a field and under the coupon code. */
.checkout-inline-error-message, .coupon-error-notice { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--c-danger); font-size: 13px; font-weight: 500; line-height: 1.4; }
.checkout-inline-error-message::before, .coupon-error-notice::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a9.5 9.5 0 1 0 0 19 9.5 9.5 0 0 0 0-19zm-1 5h2v6.5h-2zm0 8.5h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a9.5 9.5 0 1 0 0 19 9.5 9.5 0 0 0 0-19zm-1 5h2v6.5h-2zm0 8.5h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
#coupon_code.has-error { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); }

/* ---------- Site header ---------- */
/* Sticky header: the service bar scrolls away (top = minus its height, set by site.js), the logo row with the
   search stays (always the same, on phones too). */
.cc-site-header { position: sticky; top: calc(-1 * var(--topbar-h, 0px)); z-index: 40; background: var(--c-paper); }
.admin-bar .cc-site-header { top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--topbar-h, 0px)); }
/* What is in the sticky header is always on screen: giving it the focus must not scroll the page. Without this the
   html scroll padding (header height) made the browser scroll up to "uncover" it — e.g. by 370 px when WooCommerce
   gives the cart button the focus back as the side cart closes, or when the phone menu closes. */
.cc-site-header * { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }
.cc-topbar { background: var(--c-ink); color: var(--c-paper); font-size: 12px; letter-spacing: .04em; }
.cc-topbar__in { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 34px; }
.cc-topbar__sep { opacity: .5; }
/* Service message: one line; when it does not fit, site.js adds a copy and it scrolls in a loop. */
.cc-topbar__msg { display: flex; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; }
.cc-topbar__item { display: inline-flex; flex: none; align-items: center; gap: 8px; }
.cc-topbar__msg.is-moving { flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.cc-topbar__msg.is-moving > .cc-topbar__item { padding-right: 56px; animation: cc-ticker var(--cc-ticker-time, 12s) linear infinite; }
.cc-topbar__msg.is-moving:is(:hover, :active, :focus) > .cc-topbar__item { animation-play-state: paused; }
.cc-topbar__msg:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@keyframes cc-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.cc-topbar__item { flex: 0 1 auto; min-width: 0; }
	.cc-topbar__item > span { overflow: hidden; text-overflow: ellipsis; }
}
.cc-topbar__msg .i, .cc-topbar__links .i { flex: none; width: 16px; height: 16px; }
.cc-topbar__links { display: none; gap: 20px; margin: 0; padding: 0; list-style: none; }
.cc-topbar__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-paper); font-weight: 500; text-decoration: none; }
.cc-topbar__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cc-header { border-bottom: 1px solid var(--c-line); background: var(--c-paper); }
.cc-header__row { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "menu logo actions" "search search search"; align-items: center; column-gap: 8px; padding-top: 8px; padding-bottom: 10px; }
.cc-header__menu { grid-area: menu; justify-self: start; margin-left: -10px; }
.cc-logo { grid-area: logo; display: block; line-height: 0; }
.cc-logo img { width: auto; height: 32px; }
.cc-header__actions { grid-area: actions; justify-self: end; display: flex; align-items: center; margin-right: -8px; }
/* Labels of icon buttons on phones: hidden from view, still read by screen readers (the link keeps its name). */
.cc-header__actions .cc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Search with instant results. */
.cc-search { position: relative; grid-area: search; display: flex; align-items: center; margin: 8px 0 0; }
.cc-search__icon { position: absolute; left: 12px; width: 20px; height: 20px; color: var(--c-ink); pointer-events: none; }
.cc-search__input { height: 44px !important; min-height: 44px; padding: 0 40px !important; border: 1px solid var(--c-line) !important; border-radius: 0 !important; background: #fff !important; font-size: 16px; }
.cc-search__input:focus { border-color: var(--c-ink) !important; background: #fff !important; box-shadow: none !important; }
.cc-search__input::-webkit-search-cancel-button { display: none; }
.cc-search__clear { position: absolute; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--c-muted); cursor: pointer; }
.cc-search__clear .i { width: 18px; height: 18px; }
.cc-search__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; max-height: min(70vh, 560px); overflow: auto; padding: 8px; border: 1px solid var(--c-line); border-radius: 0; background: #fff; box-shadow: 0 0 40px rgb(0 0 0 / 12%); }
.cc-search__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 0; color: var(--c-ink); text-decoration: none !important; }
.cc-search__item:hover, .cc-search__item[aria-selected="true"] { background: var(--c-soft); color: var(--c-ink); }
.cc-search__item img { flex: none; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--c-line); border-radius: 0; background: #fff; }
.cc-search__name { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.cc-search__price { display: block; color: var(--c-muted); font-size: 13px; }
.cc-search__price del { margin-left: 4px; }
.cc-search__empty { margin: 0; padding: 10px 8px; color: var(--c-muted); font-size: 14px; }
.cc-search__all { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 12px 8px 6px; border-top: 1px solid var(--c-line); color: var(--c-ink); font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; text-decoration: none !important; }
.cc-search__all .i { width: 18px; height: 18px; }

/* Department bar: computers only. From 1024px also the service links in the dark bar, the search on the left of the
   logo row (logo in the centre) and the labels next to the header icons. */
.cc-catnav { display: none; }
@media (min-width: 1024px) {
	.cc-topbar__in { justify-content: space-between; }
	.cc-topbar__links { display: flex; }
	.cc-header__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "search logo actions"; column-gap: 32px; padding-top: 16px; padding-bottom: 16px; }
	.cc-header__menu { display: none; }
	.cc-logo img { height: 44px; }
	.cc-search { justify-self: start; width: 100%; max-width: 340px; margin: 0; }
	.cc-search__panel { right: auto; width: min(560px, 90vw); }
	.cc-header__actions { gap: 4px; }
	.cc-header:not(.cc-header--minimal) .cc-header__actions .cc-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
	.cc-header:not(.cc-header--minimal) .cc-header__account .cc-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Long first names. */
	.cc-header__actions .cc-icon-btn { padding: 0 10px; }
	.cc-catnav { display: block; border-top: 1px solid var(--c-line); }
	.cc-catnav__list { display: flex; justify-content: center; gap: clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
	.cc-catnav__item { display: flex; align-items: center; }
	.cc-catnav__link { display: block; padding: 14px 0 12px; border-bottom: 1px solid transparent; color: var(--c-ink); font-size: 13px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; text-decoration: none !important; transition: border-color .15s; }
	.cc-catnav__link:hover, .cc-catnav__item.is-open > .cc-catnav__link, .cc-catnav__link[aria-current] { border-bottom-color: var(--c-ink); color: var(--c-ink); }
	.cc-catnav__link.is-sale { color: var(--c-accent); }
	.cc-catnav__link.is-sale:hover, .cc-catnav__link.is-sale[aria-current] { border-bottom-color: var(--c-accent); color: var(--c-accent); }
	/* The arrow next to a department opens its panel from the keyboard; the mouse opens it by pointing at the name. */
	.cc-catnav__toggle { display: grid; place-items: center; width: 22px; height: 28px; margin-left: 2px; padding: 0; border: 0; background: none; color: var(--c-muted); cursor: pointer; }
	.cc-catnav__toggle .i { width: 14px; height: 14px; transition: transform .2s; }
	.cc-catnav__toggle[aria-expanded="true"] .i { transform: rotate(180deg); }
	/* Department panel: full width under the bar; link columns, top brands, one photo. */
	.cc-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 45; max-height: calc(100vh - var(--header-h, 0px)); max-height: calc(100dvh - var(--header-h, 0px)); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: #fff; box-shadow: 0 24px 40px -24px rgb(0 0 0 / 18%); }
	.cc-mega__in { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; padding-top: 32px; padding-bottom: 36px; }
	.cc-mega__in:not(:has(.cc-mega__feature)) { grid-template-columns: minmax(0, 1fr); }
	.cc-mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 32px; }
	.cc-mega__title { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
	.cc-mega__title a { color: var(--c-ink); text-decoration: none; }
	.cc-mega__links { margin: 0; padding: 0; list-style: none; }
	.cc-mega__links li { margin: 0 0 7px; }
	.cc-mega__links a { color: var(--c-text); font-size: 14px; text-decoration: none; }
	.cc-mega__links a:hover, .cc-mega__title a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
	.cc-mega__all { display: inline-block; margin-top: 4px; color: var(--c-ink) !important; font-size: 12px !important; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
	.cc-mega__col--brands { padding-left: 32px; border-left: 1px solid var(--c-line); }
	.cc-mega__feature { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-soft); }
	.cc-mega__feature img { width: 100%; height: 100%; object-fit: cover; }
	.cc-mega__feature span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(transparent, rgb(0 0 0 / 45%)); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
}
.cc-menu__row.is-sale { color: var(--c-accent); }
.cc-header { position: relative; }

/* ---------- Drawer (mobile menu) ---------- */
.cc-drawer { position: fixed; inset: 0 auto 0 0; width: min(360px, 84vw); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; box-shadow: 0 0 40px rgb(0 0 0 / 12%); color: var(--c-text); }
.cc-drawer[open] { display: flex; flex-direction: column; animation: cc-slide-in .22s ease; }
.cc-drawer::backdrop { background: rgb(31 30 28 / 45%); }
@keyframes cc-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc-drawer[open] { animation: none; } }
.cc-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 8px 10px 8px 20px; border-bottom: 1px solid var(--c-line); }
.cc-logo--drawer img { height: 30px; }
/* Phone menu: the main list, and one page per department that slides in from the right ("‹ Menu" goes back). */
.cc-menu__views { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cc-menu__view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); background: #fff; transform: translateX(100%); transition: transform .26s ease, visibility 0s .26s; visibility: hidden; }
.cc-menu__view.is-active { transform: none; visibility: visible; transition: transform .26s ease; }
.cc-menu__view.is-behind { transform: translateX(-24%); visibility: visible; transition: transform .26s ease; }
@media (prefers-reduced-motion: reduce) { .cc-menu__view, .cc-menu__view.is-active, .cc-menu__view.is-behind { transition: none; } }
/* Rows: Shop, the departments (their pages slide in), Marchi, Saldi. */
.cc-menu__list { margin: 0; padding: 0; list-style: none; }
.cc-menu__list > li + li { border-top: 1px solid var(--c-line); }
.cc-menu__list + .cc-menu__list { margin-top: 18px; }
.cc-menu__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; color: var(--c-ink); font: 500 14px/1.3 var(--f-body); letter-spacing: .08em; text-align: left; text-transform: uppercase; text-decoration: none !important; cursor: pointer; }
.cc-menu__group { border-top: 1px solid var(--c-line); }
.cc-menu__group > summary { list-style: none; }
.cc-menu__group > summary::-webkit-details-marker { display: none; }
.cc-menu__group > summary .i { transition: transform .2s; }
.cc-menu__group[open] > summary .i { transform: rotate(180deg); }
.cc-menu__sub { padding: 0 0 8px 12px; }
.cc-menu__sub .cc-menu__row { min-height: 44px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.cc-menu__sub > li + li { border-top: 0; }
.cc-menu__row > span { flex: 1; }
.cc-menu__row > .i:last-child { flex: none; width: 20px; height: 20px; color: var(--c-muted); }
/* Department page: "Tutto …" underlined. */
.cc-menu__row--all > span { text-decoration: underline; text-underline-offset: 4px; }
.cc-menu__top { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; margin: 0 -20px 4px; padding: 6px 20px 6px 10px; border-bottom: 1px solid var(--c-line); background: #fff; }
.cc-menu__back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 4px; border: 0; border-radius: 0; background: none; color: var(--c-ink); font: 500 12px var(--f-body); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
.cc-menu__back .i { width: 20px; height: 20px; }
.cc-menu__title { flex: 1; margin: 0; padding-right: 74px; color: var(--c-ink); font: 400 20px var(--f-head); text-align: center; }

/* ---------- Header cart ----------
   WooCommerce's Mini-Cart; on the cart and checkout pages a link with the same markup (Catania\header_cart()). The
   rules do not rely on WooCommerce's Mini-Cart stylesheet, which those two pages do not load. */
.cc-minicart .wc-block-mini-cart__button { display: inline-flex; align-items: center; gap: 12px; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 0; background: none; color: var(--c-ink); font: inherit; line-height: 1; text-decoration: none !important; cursor: pointer; }
.cc-minicart .wc-block-mini-cart__button:hover { background: transparent; color: var(--c-ink); opacity: .7; }
.cc-minicart .wc-block-mini-cart__quantity-badge { position: relative; display: flex; }
.cc-minicart .wc-block-mini-cart__icon { display: block; width: 24px; height: 24px; margin: 0; }
.cc-minicart .wc-block-mini-cart__badge { position: absolute; top: -8px; left: 12px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; height: 20px; margin: 0; padding: 0 5px; border: 2px solid var(--c-paper); border-radius: 99px; background: var(--c-ink) !important; color: #fff !important; font: 500 10px/1 var(--f-body); transform: none; }

/* ---------- Footer ---------- */
.cc-site-footer { margin-top: 0; }
.cc-footer { border-top: 1px solid var(--c-line); background: var(--c-soft); font-size: 14px; }
/* Services strip: phones 2 × 2 with the icon above and short centred lines (nothing wraps from 320 px up);
   computers one row, icon beside the text. */
.cc-usp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-block: 0; padding-block: 22px; font-size: 13px; list-style: none; }
.cc-usp li { display: grid; justify-items: center; gap: 6px; color: var(--c-ink); line-height: 1.35; text-align: center; }
.cc-usp li span { display: grid; text-wrap: balance; }
@media (min-width: 640px) {
	.cc-usp li { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
}
.cc-usp .i { margin-top: 1px; color: var(--c-ink); }
.cc-usp strong { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
/* Logo, a line about the shop and the store address (first column on computers). */
.cc-footer__brand { padding: 24px 0 8px; }
.cc-footer__brand p { margin: 12px 0 0; color: var(--c-text); line-height: 1.5; }
.cc-logo--footer img { height: 40px; }
.cc-footer__main { border-top: 1px solid var(--c-line); }
/* Link groups: accordions on phones (one line each), open columns from 768px (site.js keeps them open there). */
.cc-footer__cols { display: grid; padding-top: 4px; padding-bottom: 8px; }
.cc-footer__col { border-bottom: 1px solid var(--c-line); }
.cc-footer__col:last-child { border-bottom: 0; }
.cc-footer__sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; list-style: none; cursor: pointer; }
.cc-footer__sum::-webkit-details-marker { display: none; }
.cc-footer__sum .i { width: 20px; height: 20px; color: var(--c-muted); transition: transform .2s; }
.cc-footer__col[open] > .cc-footer__sum .i { transform: rotate(180deg); }
.cc-footer__body { padding-bottom: 16px; }
/* Phones, before site.js closes the groups (html.cc-js is set in <head>): shown closed already, so the footer does
   not shrink under the reader's eyes on short pages. */
@media (max-width: 767px) {
	.cc-js .cc-footer__col:not([data-cc-ready]) > .cc-footer__body { display: none; }
	.cc-js .cc-footer__col:not([data-cc-ready]) > .cc-footer__sum .i { transform: none; }
}
.cc-footer__title { margin: 0; color: var(--c-ink); font-family: var(--f-body); font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
.cc-footer__shop { display: grid; margin: 0 0 8px; }
.cc-footer__shop a { color: var(--c-text); }
.cc-footer__hours { display: grid; gap: 2px; margin: 0 0 8px; color: var(--c-muted); }
.cc-footer__hours > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.cc-footer__hours dt { color: var(--c-ink); }
.cc-footer__hours dt::after { content: ":"; }
.cc-footer__hours dd { margin: 0; }

.cc-footer__links { margin: 0; padding: 0; list-style: none; }
.cc-footer__links li { margin: 7px 0; }
.cc-footer__links a, .cc-footer__links .cc-linklike { color: var(--c-text); font-size: 14px; }
.cc-footer__contacts a { display: inline-flex; align-items: center; gap: 8px; }
.cc-footer__contacts .i { width: 18px; height: 18px; color: var(--c-ink); }
.cc-footer__bottom { border-top: 1px solid var(--c-line); }
.cc-footer__bottom-in { display: grid; gap: 12px; padding-top: 16px; padding-bottom: 24px; }
.cc-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* GTranslate language selector ("dropdown with flags", footer): the site's font, field border and radius. Its list
   (before the selected language in the markup, opened by GTranslate's script) floats above the selected language
   instead of pushing the footer down. */
.cc-footer__lang .gtranslate_wrapper .gt_switcher { position: relative; overflow: visible; width: 172px; font-family: var(--f-body); line-height: normal; }
.cc-footer__lang .gtranslate_wrapper .gt_switcher a { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cc-footer__lang .gtranslate_wrapper .gt_switcher a img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; opacity: 1; }
.cc-footer__lang .gtranslate_wrapper .gt_switcher .gt_selected { border-radius: 0; background: #fff; }
.cc-footer__lang .gtranslate_wrapper .gt_switcher .gt_selected a { box-sizing: border-box; width: 100%; min-height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--c-line-strong); border-radius: 0; color: var(--c-ink); font-weight: 600; }
.cc-footer__lang .gtranslate_wrapper .gt_switcher .gt_option { position: absolute; bottom: 100%; left: 0; z-index: 50; box-sizing: border-box; width: auto; min-width: 100%; max-height: 260px; overflow-y: auto; margin-bottom: -1px; border: 1px solid var(--c-line-strong); border-radius: 0; background: #fff; box-shadow: 0 -6px 18px rgb(31 30 28 / 10%); }
.cc-footer__lang .gtranslate_wrapper .gt_switcher .gt_option[style*="height: 0"] { border-width: 0; box-shadow: none; }
.cc-footer__lang .gtranslate_wrapper .gt_switcher .gt_option a { padding: 8px 12px; color: var(--c-ink); }
.cc-footer__lang .gtranslate_wrapper .gt_switcher .gt_option a:hover { background: var(--c-soft); }
/* Payment marks: white badges of one size with the brand inside (its size set in the markup); bank transfer and cash
   on delivery, which have no logo, as an icon and a word in the same badge. */
.cc-paymarks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cc-paymarks li { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 42px; height: 26px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 0; background: #fff; color: var(--c-ink); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.cc-paymarks img { display: block; }
.cc-paymarks .i { flex: none; width: 15px; height: 15px; margin-right: 5px; color: var(--c-ink); }
.cc-footer__legal { margin: 0; color: var(--c-muted); font-size: 12px; }
.cc-footer--minimal { padding-block: 20px 28px; }
.cc-footer--minimal .cc-footer__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; }
.cc-footer--minimal .cc-footer__links li { margin: 0; }
@media (min-width: 768px) {
	.cc-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 36px; padding-bottom: 36px; }
	.cc-footer__brand { grid-column: 1 / -1; padding: 0; }
	.cc-footer__col { border-bottom: 0; }
	.cc-footer__sum { min-height: 0; margin-bottom: 10px; cursor: default; pointer-events: none; }
	.cc-footer__sum .i { display: none; }
	.cc-footer__body { padding-bottom: 0; }
}
@media (min-width: 1024px) {
	.cc-usp { grid-template-columns: repeat(4, 1fr); }
	.cc-footer__cols { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
	.cc-footer__brand { grid-column: auto; max-width: 300px; }
	.cc-footer__bottom-in { grid-template-columns: auto 1fr; align-items: center; }
	.cc-paymarks { justify-content: flex-end; }
	.cc-footer__legal { grid-column: 1 / -1; }
}

/* ---------- Minimal header (checkout): logo and the cart (icon and number of items; its label only for screen
   readers, also on computers). It scrolls away with the page: the whole height goes to the form, and the order
   summary of computers sticks to the top of the window without anything over it. ---------- */
.cc-site-header--minimal { position: static; }
.cc-header--minimal { border-bottom: 1px solid var(--c-line); }
.cc-header--minimal .cc-header__row { grid-template-columns: 1fr auto; grid-template-areas: "logo actions"; padding-top: 12px; padding-bottom: 12px; }
.cc-header--minimal .cc-logo { justify-self: start; }
.cc-header--minimal .cc-header__actions { justify-self: end; }

/* ---------- Breadcrumbs: one line everywhere; if the trail is too long the current page is shortened, then the
   line scrolls sideways ---------- */
.cc-crumbs { margin: 0 0 12px; font-size: 12px; letter-spacing: .02em; }
/* One line that scrolls sideways when longer than the screen (long product names on phones): nothing is cut. */
.cc-crumbs ol { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; list-style: none; white-space: nowrap; scrollbar-width: none; }
.cc-crumbs ol::-webkit-scrollbar { display: none; }
.cc-crumbs li { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--c-muted); }
.cc-crumbs li + li::before { content: "/"; color: var(--c-line-strong); }
.cc-crumbs a { color: var(--c-muted); text-decoration: none; }
.cc-crumbs a:hover { color: var(--c-ink); text-decoration: underline; }

/* ---------- Product card ---------- */
.cc-card { position: relative; display: flex; flex-direction: column; height: 100%; background: transparent; }
.cc-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.cc-card__img-link { position: absolute; inset: 0; display: block; }
.cc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6%; object-fit: contain; transition: opacity .3s; }
/* Second photo (the first of the gallery): shown instead of the main one under the mouse. */
.cc-card__img--alt { opacity: 0; }
@media (hover: hover) {
	.cc-card:hover .cc-card__img--alt { opacity: 1; }
	.cc-card:hover .cc-card__img:not(.cc-card__img--alt):has(~ .cc-card__img--alt) { opacity: 0; }
}
.cc-card__badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; pointer-events: none; }
.cc-card__body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 2px 6px; }
.cc-card__brand { margin: 0; color: var(--c-ink); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.cc-card__title { display: -webkit-box; min-height: 2.8em; margin: 0; overflow: hidden; color: var(--c-muted); font: 400 13px/1.4 var(--f-body); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-card__title a { color: inherit; text-decoration: none; }
.cc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cc-card .cc-price { margin-top: 2px; font-size: 14px; }
.cc-card.is-out .cc-card__img-link { opacity: .5; } /* Sold out: the photo faded (on the link, so the second photo stays hidden). */
@keyframes cc-spin { to { transform: rotate(360deg); } }
/* The cart counter in the header pops when its number grows (site.js). */
.wc-block-mini-cart__badge.is-bumped { animation: cc-pop .45s ease; }
@keyframes cc-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* Grids (WooCommerce Product Collection and classic loops). */
.cc-grid .wc-block-product-template, ul.products.cc-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 4px; margin: 0; padding: 0; list-style: none; }
.cc-grid .wc-block-product, ul.products.cc-grid > li { position: relative; width: auto !important; margin: 0 !important; padding: 0; list-style: none; }
@media (min-width: 640px) { .cc-grid .wc-block-product-template, ul.products.cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 12px; } }
@media (min-width: 1280px) { .cc-grid .wc-block-product-template, ul.products.cc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 16px; } }
/* Section heads (content pages). */
.cc-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cc-section__title { margin: 0 0 16px; font-size: var(--wp--preset--font-size--xxl); font-weight: 400; }
.cc-section__head .cc-section__title { margin: 0; }
.cc-section__more { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; }
.cc-section__more a { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cc-section__more a:hover { text-decoration-thickness: 2px; }
/* Small uppercase line above a title. */
.cc-eyebrow { margin: 0 0 10px; color: var(--c-muted); font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }

/* Ticks lists. */
.cc-ticks, .is-style-ticks { margin: 0; padding: 0; list-style: none; }
.cc-ticks li { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; }
.is-style-ticks li { position: relative; margin: 6px 0; padding-left: 26px; }
.cc-ticks .i { width: 18px; height: 18px; margin-top: 2px; color: var(--c-ink); }
.is-style-ticks li::before { content: ""; position: absolute; top: .2em; left: 0; width: 18px; height: 18px; background: var(--c-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Empty states, help box. */
/* Empty state (Catania\empty_state()): a grey box as wide as its column, left-aligned like the page — one line in
   bold on what is missing, one line on what to do, the real ways forward (departments, a search box). No icons, no
   generic buttons; the page keeps its own title above. */
.cc-empty { box-sizing: border-box; width: 100%; padding: 22px 24px; border-radius: 0; background: var(--c-soft); }
.cc-empty > * { margin: 0; }
.cc-empty__title { color: var(--c-ink); font-size: 17px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.cc-empty__text { max-width: 72ch; margin-top: 4px !important; color: var(--c-text); font-size: 15px; line-height: 1.5; }
.cc-empty__chips { margin-top: 14px !important; }
.cc-empty__chips .cc-chip { border-color: transparent; background: #fff; }
.cc-empty__chips .cc-chip:hover { border-color: var(--c-line-strong); }

/* WooCommerce's own "empty cart" line: the box already says it. */
.cc-empty .cart-empty.woocommerce-info, .cc-empty .wc-block-components-notice-banner { display: none; }
/* Empty cart page: a tall box, its content in the middle. */
.cc-cart-empty .cc-empty { display: grid; align-content: center; justify-items: center; min-height: clamp(280px, 42vh, 420px); padding: 40px 24px; text-align: center; }
.cc-cart-empty .cc-empty__text { margin-inline: auto; }
.cc-cart-empty .cc-empty__chips { justify-content: center; margin-top: 22px !important; }
/* Help box: heading, three equal contact cards (one per line on phones, three in a row from 640 px), hours under them. */
.cc-help { display: grid; gap: 18px; margin-top: 48px; padding: 24px 20px; border-radius: 0; background: var(--c-soft); }
.cc-help p { margin: 0; }
.cc-help__title { margin: 0 0 4px; color: var(--c-ink); font: 400 24px/1.2 var(--f-head); }
.cc-help__text { color: var(--c-text); font-size: 15px; line-height: 1.5; }
.cc-help__ways { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cc-help__way { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 14px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); text-decoration: none !important; transition: border-color .15s; }
.cc-help__way:hover { border-color: var(--c-ink); color: var(--c-ink); }
.cc-help__way > .i { flex: none; width: 22px; height: 22px; }
.cc-help__way--whatsapp > .i { color: #1f7a4a; }
.cc-help__way-text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.cc-help__way-text strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cc-help__way-text span { overflow: hidden; color: var(--c-muted); font-size: 13px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.cc-help__way .cc-help__go { flex: none; width: 16px; height: 16px; color: var(--c-muted); transition: transform .15s; }
.cc-help__way:hover .cc-help__go { transform: translateX(2px); color: var(--c-ink); }
.cc-help__hours { display: flex; align-items: flex-start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 13px; line-height: 1.5; }
.cc-help__hours .i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.cc-help__hours strong { color: var(--c-ink); font-weight: 600; }
@media (min-width: 640px) {
	.cc-help { padding: 28px; }
	.cc-help__ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cc-help__go { transition: none; } }

/* Block style variations. */
.wp-block-group.is-style-card { padding: 22px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; }
.wp-block-group.is-style-soft { padding: 22px; border-radius: var(--r-lg); background: var(--c-soft); }

.wp-block-group.is-style-help { padding: 22px; border-radius: 0; background: var(--c-soft); }

/* Motion. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } /* Loading spinners would flicker. */
}

/* Block theme root: the theme controls the space between header, content and footer. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > .cc-site-footer { margin-block-start: 0; }

/* Quantity stepper (product page, cart). */
.cc-qty { display: inline-flex; align-items: center; height: 52px; border: 1px solid var(--c-line-strong); border-radius: 0; background: #fff; }
.cc-qty__btn { display: grid; place-items: center; width: 40px; height: 100%; padding: 0; border: 0; background: none; color: var(--c-ink); cursor: pointer; }
.cc-qty__btn .i { width: 18px; height: 18px; }
.cc-qty .qty { width: 40px; min-height: 0; height: 100%; padding: 0; border: 0 !important; background: transparent; box-shadow: none !important; font-weight: 500; text-align: center; -moz-appearance: textfield; }

.cc-qty .qty::-webkit-outer-spin-button, .cc-qty .qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }



/* CookieYes: the optional "revisit consent" button (off on the live site) stays clear of the cart drawer and of the
 * product page buy bar. */
body:has(.wc-block-components-drawer__screen-overlay--with-slide-in) .cky-btn-revisit-wrapper { display: none; }