/*
Theme Name: Vico 20
Theme URI: https://vico20.it
Author: Vico 20
Description: Custom theme for Vico 20 Italian artisan jewelry e-commerce
Version: 1.3.18
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vico20
Tags: e-commerce, custom-colors, custom-menu
*/

/* ==========================================================================
   CSS RESET (Andy Bell - A More Modern CSS Reset)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-start: 0;
  margin-block-end: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* overflow-x: clip, not hidden. `hidden` on one axis forces the other axis to
   `auto`, which makes body a scroll container — that broke `position: sticky`
   on the header (it scrolled away instead of pinning) and shifted its sticky
   offset to the body scrollport. `clip` still clips horizontal overflow but
   creates no scroll container, so overflow-y stays `visible` and the viewport
   remains the sticky context.

   The `hidden` line before it is a deliberate fallback, not a leftover:
   `clip` needs Chrome 90+ / Firefox 81+ / Safari 16+, and browsers that do not
   understand it drop that declaration and keep `hidden`, so the guard against
   horizontal scrollbars holds everywhere. Only the sticky header degrades on
   those older browsers. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/* ==========================================================================
   DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* Colors */
  --vico20-color-white: #ffffff;
  --vico20-color-cream: #f7f3ee;
  --vico20-color-beige: #ede7df;
  --vico20-color-gold: #b8a88a;
  --vico20-color-text: #333333;
  --vico20-color-text-medium: #666666;
  --vico20-color-text-light: #999999;
  --vico20-color-banner-bg: #4a5548;
  --vico20-color-banner-text: #ffffff;
  --vico20-color-footer-bg: #2c2c2c;
  --vico20-color-footer-text: #cccccc;
  --vico20-color-footer-heading: #ffffff;
  --vico20-color-border: #e0d9d0;
  --vico20-color-grey-light: #f2f2f2;
  --vico20-color-destructive: #c0392b;

  /* Typography */
  --vico20-font-serif: "adobe-caslon-pro", "Georgia", serif;
  --vico20-font-sans: "lato", "Helvetica Neue", "Arial", sans-serif;
  --vico20-text-sm: 13px;
  --vico20-text-base: 18px;
  --vico20-text-lg: 28px;
  --vico20-text-xl: 36px;

  /* Spacing */
  --vico20-space-xs: 4px;
  --vico20-space-sm: 8px;
  --vico20-space-md: 16px;
  --vico20-space-lg: 24px;
  --vico20-space-xl: 32px;
  --vico20-space-2xl: 48px;
  --vico20-space-3xl: 64px;

  /* Layout */
  --vico20-max-width: 1200px;
  --vico20-banner-height: 40px;
  --vico20-header-height-desktop: 72px;
  --vico20-header-height-mobile: 56px;
}

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */

body {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  color: var(--vico20-color-text);
  background-color: var(--vico20-color-white);
  line-height: 1.6;
  padding-top: var(--vico20-banner-height);
}

h1 {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-xl);
  font-weight: 400;
  line-height: 1.2;
}

h2 {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  line-height: 1.2;
}

h3 {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.2;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.vico20-skip-link {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.vico20-skip-link:focus {
  background-color: var(--vico20-color-white);
  clip: auto !important;
  clip-path: none;
  color: var(--vico20-color-text);
  display: block;
  font-size: var(--vico20-text-base);
  height: auto;
  left: 5px;
  line-height: normal;
  padding: var(--vico20-space-md) var(--vico20-space-lg);
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

*:focus-visible {
  outline: 2px solid var(--vico20-color-gold);
  outline-offset: 2px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--vico20-color-white);
  clip: auto !important;
  clip-path: none;
  color: var(--vico20-color-text);
  display: block;
  font-size: var(--vico20-text-base);
  height: auto;
  left: 5px;
  line-height: normal;
  padding: var(--vico20-space-md) var(--vico20-space-lg);
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.vico20-container {
  max-width: var(--vico20-max-width);
  margin-inline: auto;
  padding-inline: var(--vico20-space-md);
}

@media (min-width: 768px) {
  .vico20-container {
    padding-inline: var(--vico20-space-lg);
  }
}

@media (min-width: 1024px) {
  .vico20-container {
    padding-inline: var(--vico20-space-xl);
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BANNER COMPONENT
   ========================================================================== */

.vico20-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--vico20-banner-height);
  background-color: var(--vico20-color-banner-bg);
  color: var(--vico20-color-banner-text);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
}

.vico20-banner__inner {
  text-align: center;
  padding-inline: var(--vico20-space-md);
}

@media (max-width: 767px) {
  .vico20-banner {
    font-size: 9px;
    letter-spacing: 1px;
    height: var(--vico20-banner-height);
    min-height: 0;
  }
}

/* ==========================================================================
   HEADER COMPONENT
   ========================================================================== */

/* The banner is `position: fixed` over the top 40px of the viewport, and the
   sticky context is the viewport (html/body use `overflow-x: clip`, which
   creates no scroll container). Offsetting by the banner height therefore pins
   the header directly beneath the banner instead of sliding under it.

   NOTE: this pairs with `overflow-x: clip` above. If that ever reverts to
   `hidden`, body becomes the scroll container again and this offset
   double-counts `body { padding-top: var(--vico20-banner-height) }`, pushing
   the header 40px too low. */
.vico20-header {
  position: sticky;
  top: var(--vico20-banner-height);
  z-index: 999;
  background-color: var(--vico20-color-white);
  border-bottom: 1px solid var(--vico20-color-border);
}

@media (max-width: 1023px) {
  .vico20-header {
    position: relative;
    top: 0;
  }
}

/* WordPress admin bar — logged-in users only, never customers.

   WP adds `html { margin-top: 32px !important }` for the bar. That pushes the
   document down but not `.vico20-banner`, which is position: fixed and so is
   positioned against the viewport: the banner stayed at the very top, hidden
   behind the admin bar, leaving a 32px strip of bare background between it and
   the header when the page was unscrolled. (Scrolling hid the symptom, because
   the sticky header then pinned to its own offset.)

   Push the banner below the bar so the two stay flush.

   Scoped to >=783px: below that WP switches the bar to 46px AND to
   position: absolute, so it scrolls away — a fixed offset there would close the
   gap at rest only to open one as soon as the page moved. Left alone
   deliberately.

   The header offset is scoped to >=1024px because below that the header is
   position: relative (see the rule above), where a `top` value would displace
   it rather than set a sticky threshold. Between 783px and 1023px the banner
   offset alone is enough: the relative header already flows below html's
   margin. */
@media screen and (min-width: 783px) {
  body.admin-bar .vico20-banner {
    top: 32px;
  }
}

@media screen and (min-width: 1024px) {
  body.admin-bar .vico20-header {
    top: calc(var(--vico20-banner-height) + 32px);
  }
}

.vico20-header__inner {
  max-width: var(--vico20-max-width);
  margin-inline: auto;
  padding-inline: var(--vico20-space-md);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 120px;
  position: relative;
}

/* ==========================================================================
   SPLIT NAVIGATION
   ========================================================================== */

.vico20-header__nav-left,
.vico20-header__nav-right {
  display: flex;
  align-items: center;
  gap: var(--vico20-space-xl);
}

.vico20-nav__list {
  display: flex;
  gap: var(--vico20-space-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vico20-nav__list li a {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 400;
  color: var(--vico20-color-text);
  text-decoration: none;
  line-height: 1;
  padding-block: var(--vico20-space-xs);
  position: relative;
}

.vico20-nav__list li a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--vico20-color-gold);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.vico20-nav__list li a:hover::after,
.vico20-nav__list li.current-menu-item a::after {
  transform: scaleX(1);
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.vico20-header__logo {
  flex: 0 0 auto;
  padding: 0 var(--vico20-space-3xl);
  display: flex;
  align-items: center;
}

.vico20-header__logo a {
  display: block;
}

.vico20-header__logo img {
  height: 100px;
  width: auto;
}

/* ==========================================================================
   MEGA-DROPDOWN (Gioielli)
   ========================================================================== */

.vico20-nav__item--has-mega {
  position: relative;
}

.vico20-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 420px;
  background: var(--vico20-color-white);
  border: 1px solid var(--vico20-color-border);
  padding: var(--vico20-space-2xl) var(--vico20-space-3xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vico20-space-3xl);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.vico20-nav__item--has-mega:hover .vico20-mega-menu,
.vico20-nav__item--has-mega:focus-within .vico20-mega-menu {
  opacity: 1;
  visibility: visible;
}

.vico20-mega-menu__heading {
  font-family: var(--vico20-font-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  color: var(--vico20-color-gold);
  margin-bottom: var(--vico20-space-md);
  padding-bottom: var(--vico20-space-xs);
  border-bottom: 1px solid var(--vico20-color-border);
}

.vico20-mega-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vico20-mega-menu__list li {
  margin-bottom: 2px;
}

.vico20-mega-menu__list li a {
  font-family: var(--vico20-font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--vico20-color-text);
  text-decoration: none;
  display: block;
  padding: 6px 0;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}

.vico20-mega-menu__list li a:hover {
  color: var(--vico20-color-gold);
  padding-left: 4px;
}

/* ==========================================================================
   HEADER ICONS (Login + Cart)
   ========================================================================== */

.vico20-header__icons {
  display: flex;
  align-items: center;
  gap: var(--vico20-space-sm);
  position: absolute;
  right: var(--vico20-space-md);
  top: 50%;
  transform: translateY(-50%);
}

.vico20-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vico20-color-text);
  text-decoration: none;
  position: relative;
  min-width: 36px;
  min-height: 36px;
}

.vico20-header__icon:hover {
  color: var(--vico20-color-gold);
}

.vico20-cart-count {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: var(--vico20-color-gold);
  color: var(--vico20-color-white);
  font-size: 0.65rem;
  font-family: var(--vico20-font-sans);
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
}

.vico20-cart-count--visible {
  display: block;
}

/* Hamburger toggle - hidden on desktop */
.vico20-nav__toggle {
  display: none;
}

/* ==========================================================================
   MOBILE BREAKPOINT
   ========================================================================== */

@media (max-width: 1023px) {
  .vico20-header__nav-left,
  .vico20-header__nav-right,
  .vico20-header__icons {
    display: none;
  }

  .vico20-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: absolute;
    right: var(--vico20-space-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--vico20-space-sm);
    min-width: 44px;
    min-height: 44px;
  }

  .vico20-nav__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--vico20-color-text);
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  .vico20-header__inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding-block: var(--vico20-space-md);
    position: relative;
  }

  .vico20-header__logo {
    padding: 0;
    display: flex;
    align-items: center;
  }

  .vico20-header__logo img {
    height: 70px;
    width: auto;
  }

  .vico20-nav__toggle {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Mobile header: cart icon with count stays visible left of the hamburger */
@media (max-width: 1023px) {
  .vico20-header__icons {
    display: flex;
    right: calc(var(--vico20-space-md) + 44px);
  }

  .vico20-header__icon--login {
    display: none;
  }
}

/* ==========================================================================
   MOBILE OVERLAY
   ========================================================================== */

.vico20-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background-color: var(--vico20-color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0.3s ease-out;
}

.vico20-nav-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.vico20-nav-overlay__close {
  position: absolute;
  top: var(--vico20-space-md);
  right: var(--vico20-space-md);
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vico20-nav-overlay__close-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--vico20-color-text);
  position: absolute;
}

.vico20-nav-overlay__close-bar:first-child {
  transform: rotate(45deg);
}

.vico20-nav-overlay__close-bar:last-child {
  transform: rotate(-45deg);
}

.vico20-nav-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.vico20-nav-overlay__list li {
  margin-bottom: var(--vico20-space-lg);
}

.vico20-nav-overlay__list li a {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  color: var(--vico20-color-text);
  text-decoration: none;
}

/* Mobile Gioielli expand/collapse */
.vico20-nav-overlay__item--has-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vico20-space-xs);
}

.vico20-nav-overlay__expand {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.vico20-nav-overlay__expand[aria-expanded="true"] {
  transform: rotate(180deg);
}

.vico20-nav-overlay__sub-list {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: var(--vico20-space-sm) 0 0;
  display: none;
}

.vico20-nav-overlay__sub-list[aria-hidden="false"] {
  display: block;
}

.vico20-nav-overlay__sub-list li {
  margin-bottom: var(--vico20-space-md);
}

.vico20-nav-overlay__sub-list li a {
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vico20-color-text);
  text-decoration: none;
  font-family: var(--vico20-font-sans);
}

/* Mobile overlay icons */
.vico20-nav-overlay__icons {
  display: flex;
  gap: var(--vico20-space-xl);
  margin-top: var(--vico20-space-lg);
  align-items: center;
}

.vico20-nav-overlay__icon-link {
  display: flex;
  align-items: center;
  gap: var(--vico20-space-xs);
  color: var(--vico20-color-text);
  text-decoration: none;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Scroll lock while the mobile nav overlay is open.

   This is the fallback half of the lock. The page runs Lenis smooth-scroll,
   which intercepts wheel/touch and scrolls programmatically — something CSS
   overflow never blocks — so navigation.js stops Lenis, and these rules cover
   the case where Lenis is absent or failed to load.

   html is the scroll container, not body, so locking body alone did nothing.
   overflow-y rather than the shorthand, so html keeps `overflow-x: clip` and
   does not become a scroll container on the horizontal axis. */
html.vico20-nav-open,
body.vico20-nav-open {
  overflow-y: hidden;
}

/* ==========================================================================
   FOOTER COMPONENT
   ========================================================================== */

.vico20-footer {
  background-color: var(--vico20-color-footer-bg);
  color: var(--vico20-color-footer-text);
  padding-top: var(--vico20-space-3xl);
  padding-bottom: var(--vico20-space-xl);
}

.vico20-footer__logo {
  text-align: center;
  margin-bottom: var(--vico20-space-2xl);
}

.vico20-footer__logo-text {
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  color: var(--vico20-color-footer-heading);
  letter-spacing: 2px;
}

.vico20-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vico20-space-2xl);
  text-align: center;
}

.vico20-footer__heading {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vico20-color-footer-heading);
  margin-bottom: var(--vico20-space-lg);
}

.vico20-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vico20-footer__links li a {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 400;
  color: var(--vico20-color-footer-text);
  text-decoration: none;
  line-height: 1.8;
}

.vico20-footer__links li a:hover {
  color: var(--vico20-color-footer-heading);
}

.vico20-footer__copyright {
  text-align: center;
  padding-top: var(--vico20-space-xl);
  margin-top: var(--vico20-space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  color: var(--vico20-color-text-light);
}

/* Seller details under the copyright: each item stays on one line, the row wraps between items. */
.vico20-footer__legal {
  margin: var(--vico20-space-xs) 0 0;
  line-height: 1.7;
}

.vico20-footer__legal span {
  white-space: nowrap;
}

.vico20-footer__legal a {
  color: inherit;
  text-decoration: none;
}

.vico20-footer__legal a:hover {
  text-decoration: underline;
}

/* Footer responsive */
@media (max-width: 1023px) {
  .vico20-footer__columns {
    gap: var(--vico20-space-lg);
  }
}

@media (max-width: 767px) {
  .vico20-footer__columns {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--vico20-space-xl);
  }
}

/* ==========================================================================
   RESPONSIVE HEADER PADDING
   ========================================================================== */

@media (min-width: 768px) {
  .vico20-header__inner {
    padding-inline: var(--vico20-space-lg);
  }
}

@media (min-width: 1024px) {
  .vico20-header__inner {
    padding-inline: var(--vico20-space-xl);
  }
}

/* ==========================================================================
   Phase 2: Homepage Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO SECTION
   -------------------------------------------------------------------------- */

.vico20-hero {
  width: 100%;
  min-height: 70vh;
  min-height: max(70vh, 600px);
  background-size: cover;
  background-position: center;
  background-color: var(--vico20-color-beige);
}

.vico20-hero__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  background: rgba(0, 0, 0, 0.3);
}

.vico20-hero__content {
  text-align: center;
  max-width: 70%;
  padding: var(--vico20-space-xl) var(--vico20-space-2xl);
}

.vico20-hero__quote {
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-xl);
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  /* Lifts the white quote off the lighter areas of the hero photograph. */
  text-shadow: 2px 2px 24px black;
}

.vico20-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--vico20-space-sm);
  background: var(--vico20-color-gold);
  color: #ffffff;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: var(--vico20-space-md) var(--vico20-space-xl);
  text-decoration: none;
  margin-top: var(--vico20-space-lg);
  border-radius: 50px;
  transition: filter 200ms ease;
}

.vico20-hero__cta:hover {
  filter: brightness(0.9);
}

@media (max-width: 767px) {
  .vico20-hero {
    min-height: 50vh;
  }

  .vico20-hero__content {
    max-width: 100%;
    padding: var(--vico20-space-xl) var(--vico20-space-sm);
  }

  .vico20-hero__quote {
    font-size: var(--vico20-text-lg);
    line-height: 1.4;
  }

  .vico20-hero__cta {
    width: 90%;
    justify-content: center;
    padding: 14px var(--vico20-space-lg);
  }
}

/* --------------------------------------------------------------------------
   FAVORITES SECTION ("I vostri preferiti")
   -------------------------------------------------------------------------- */

.vico20-favorites {
  padding: var(--vico20-space-3xl) 0;
  background-color: var(--vico20-color-white);
}

.vico20-favorites__title {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  font-style: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: var(--vico20-space-xl);
}

/* Favorites carousel — native CSS scroll-snap row (HP-01, D-03). */
.vico20-favorites__scroller {
  display: flex;
  gap: var(--vico20-space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-padding-inline: var(--vico20-space-lg);
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--vico20-space-md);
  align-items: stretch;
}
.vico20-favorites__scroller::-webkit-scrollbar {
  display: none;
}
.vico20-favorites__scroller > .vico20-product-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--vico20-space-lg) * 5)) / 6);
  min-width: 0;
}
.vico20-favorites__scroller:focus-visible {
  outline: 2px solid var(--vico20-color-cream);
  outline-offset: 4px;
}

@media (max-width: 1279px) {
  .vico20-favorites__scroller > .vico20-product-card {
    flex: 0 0 calc((100% - (var(--vico20-space-lg) * 3)) / 4);
  }
}
@media (max-width: 1023px) {
  .vico20-favorites__scroller > .vico20-product-card {
    flex: 0 0 calc((100% - (var(--vico20-space-lg) * 2)) / 3);
  }
}
@media (max-width: 767px) {
  .vico20-favorites__scroller {
    gap: var(--vico20-space-md);
  }
  .vico20-favorites__scroller > .vico20-product-card {
    flex: 0 0 75%; /* ~1.3 cards visible to hint scrollability */
  }
}

/* --------------------------------------------------------------------------
   STORY SECTION (dark lifestyle band)
   -------------------------------------------------------------------------- */

.vico20-story {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  background-color: #2c2c2c;
}

.vico20-story__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.vico20-story__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  background: rgba(0, 0, 0, 0.55);
}

.vico20-story__content {
  text-align: center;
  max-width: 650px;
  padding: var(--vico20-space-3xl) var(--vico20-space-xl);
}

.vico20-story__text {
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  line-height: 1.5;
  margin: 0;
}

.vico20-story__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--vico20-space-sm);
  color: #ffffff;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 12px var(--vico20-space-xl);
  text-decoration: none;
  margin-top: var(--vico20-space-xl);
  border: 1px solid #ffffff;
  border-radius: 50px;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.vico20-story__cta:hover {
  background: #ffffff;
  color: var(--vico20-color-text);
}

/* Reduced motion: hide the video so the section's inline background image shows. */
@media (prefers-reduced-motion: reduce) {
  .vico20-story__video {
    display: none;
  }
}

@media (max-width: 767px) {
  .vico20-story {
    min-height: auto;
  }

  .vico20-story__overlay {
    align-items: stretch;
  }

  .vico20-story__content {
    max-width: none;
    width: 100%;
    padding: var(--vico20-space-2xl) var(--vico20-space-md);
    text-align: left;
  }

  .vico20-story__intro {
    font-size: 18px;
  }

  .vico20-story__body {
    font-size: 15px;
    line-height: 1.7;
  }

  .vico20-story__cta {
    width: auto;
    padding: 12px 28px;
  }
}

/* --------------------------------------------------------------------------
   CATEGORY SECTION (side-by-side layout)
   -------------------------------------------------------------------------- */

.vico20-category-section {
  padding: var(--vico20-space-3xl) 0;
  background-color: var(--vico20-color-white);
}

.vico20-category-section__inner {
  max-width: var(--vico20-max-width);
  margin-inline: auto;
}

.vico20-category-section__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vico20-space-xl);
  align-items: start;
}

.vico20-category-section--mirror .vico20-category-section__layout {
  direction: rtl;
}

.vico20-category-section--mirror .vico20-category-section__layout > * {
  direction: ltr;
}

.vico20-category-section__products {
  display: flex;
  flex-direction: column;
}

.vico20-category-section__title {
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: left;
  margin-bottom: var(--vico20-space-xl);
}

.vico20-category-section__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--vico20-space-xl);
}

.vico20-category-section__title-row .vico20-category-section__title {
  margin-bottom: 0;
}

.vico20-category-section__title-row .vico20-category-section__link {
  margin-top: 0;
  text-align: right;
  white-space: nowrap;
}

.vico20-category-section__grid {
  display: flex;
  flex-direction: column;
  gap: var(--vico20-space-lg);
}

.vico20-category-section__image {
  overflow: hidden;
}

.vico20-category-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vico20-category-section__link {
  display: inline-block;
  margin-top: var(--vico20-space-xl);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  color: var(--vico20-color-text);
  text-decoration: none;
  transition: all 200ms ease;
}

.vico20-category-section__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--vico20-color-gold);
}

@media (max-width: 767px) {
  .vico20-category-section__layout {
    grid-template-columns: 1fr;
  }

  .vico20-category-section--mirror .vico20-category-section__layout {
    direction: ltr;
  }

  .vico20-category-section__image {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   CATEGORY QUICKLINKS (4 tall vertical links)
   -------------------------------------------------------------------------- */

.vico20-quicklinks {
  padding: 40px 0;
}

.vico20-quicklinks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.vico20-quicklinks__item {
  display: block;
  position: relative;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-color: var(--vico20-color-beige);
}

.vico20-quicklinks__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 300ms ease;
}

.vico20-quicklinks__item:hover .vico20-quicklinks__overlay {
  background: rgba(0, 0, 0, 0.5);
}

.vico20-quicklinks__label {
  font-family: var(--vico20-font-serif);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #ffffff;
}

@media (max-width: 1023px) {
  .vico20-quicklinks__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vico20-quicklinks__item {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 767px) {
  .vico20-quicklinks__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vico20-quicklinks__item {
    aspect-ratio: 3 / 4;
  }
}

/* --------------------------------------------------------------------------
   PRODUCT CARD
   -------------------------------------------------------------------------- */

.vico20-product-card {
  background: var(--vico20-color-white);
}

.vico20-product-card__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f7f7f7;
}

.vico20-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.vico20-product-card:hover .vico20-product-card__image img {
  transform: scale(1.3);
}

.vico20-product-card__info {
  padding: var(--vico20-space-md) var(--vico20-space-md) var(--vico20-space-lg);
}

.vico20-product-card__name {
  display: block;
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-base);
  font-weight: 400;
  font-style: italic;
  text-align: center;
  margin-top: var(--vico20-space-md);
  color: var(--vico20-color-text);
}

.vico20-product-card__price {
  display: block;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 400;
  color: var(--vico20-color-text-medium);
  text-align: center;
  margin-top: var(--vico20-space-xs);
}

.vico20-product-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vico20-space-sm);
  background: transparent;
  color: var(--vico20-color-text);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid var(--vico20-color-text);
  padding: 10px 24px;
  margin-top: var(--vico20-space-md);
  border-radius: 50px;
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.vico20-product-card__button:hover {
  background: var(--vico20-color-text);
  color: #ffffff;
}

.vico20-product-card__button:hover .vico20-btn__arrow {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   QUOTE BAND
   -------------------------------------------------------------------------- */

.vico20-quote-band {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: var(--vico20-color-beige);
  margin: 0;
}

.vico20-quote-band__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.vico20-quote-band__text {
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-xl);
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  text-align: center;
  max-width: 600px;
  line-height: 1.3;
  margin: 0;
  padding: 0 var(--vico20-space-md);
}

@media (max-width: 767px) {
  .vico20-quote-band {
    height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vico20-quote-band {
    background-attachment: scroll;
  }
}

/* --------------------------------------------------------------------------
   CATEGORY IMAGE GRID (legacy — kept for backward compatibility)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   COLLECTIONS BANNER (full-width with frame1 background)
   -------------------------------------------------------------------------- */

/* 34.72vw == 500/1440: hold the proportion the band has at the 1440 design
   width, so `background-size: cover` crops the same fraction of the image at
   every viewport width. With a fixed 500px height the box grew wider without
   growing taller, so the visible slice of the image shrank as the viewport
   widened and the gilded frame was clipped top and bottom beyond ~1600px.
   min-height keeps the band at its current 500px up to 1440px. */
.vico20-collections-banner {
  width: 100%;
  height: 34.72vw;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
}

/* min-height: 100% rather than inherit — the band's height now comes from the
   vw rule, so `inherit` would pin the scrim to 500px and leave the lower part
   of a taller band uncovered. */
.vico20-collections-banner__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.vico20-collections-banner__content {
  text-align: center;
  padding: var(--vico20-space-3xl) var(--vico20-space-xl);
}

.vico20-collections-banner__title {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #ffffff;
  margin-bottom: var(--vico20-space-xl);
}

.vico20-collections-banner__title--decorated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vico20-space-lg);
}

.vico20-collections-banner__title--decorated::before,
.vico20-collections-banner__title--decorated::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background-color: #ffffff;
  flex-shrink: 0;
}

.vico20-collections-banner__buttons {
  display: flex;
  gap: var(--vico20-space-xl);
  justify-content: center;
  flex-wrap: wrap;
}

.vico20-collections-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vico20-space-sm);
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 12px var(--vico20-space-2xl);
  border: 1px solid #ffffff;
  border-radius: 50px;
  line-height: 1;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.vico20-collections-banner__btn .btn_textlabel {
  position: relative;
  top: 3px;
}

.vico20-collections-banner__btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
  .vico20-collections-banner {
    min-height: 350px;
  }

  .vico20-collections-banner__buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   PHOTO BAND
   -------------------------------------------------------------------------- */

.vico20-photo-band {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center;
  background-color: var(--vico20-color-beige);
}

@media (max-width: 1023px) {
  .vico20-photo-band {
    height: 350px;
  }
}

@media (max-width: 767px) {
  .vico20-photo-band {
    height: 250px;
  }
}

/* --------------------------------------------------------------------------
   NEWSLETTER
   -------------------------------------------------------------------------- */

.vico20-newsletter {
  background-color: var(--vico20-color-white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vico20-newsletter__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--vico20-space-3xl) var(--vico20-space-md);
}

.vico20-newsletter__heading {
  font-family: var(--vico20-font-serif);
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  font-style: italic;
  text-align: center;
  color: var(--vico20-color-text);
}

.vico20-newsletter__subheading {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  color: var(--vico20-color-text-medium);
  text-align: center;
  margin-top: var(--vico20-space-sm);
}

.vico20-newsletter__form {
  margin-top: var(--vico20-space-xl);
}

.vico20-newsletter__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vico20-space-md);
}

.vico20-newsletter__row + .vico20-newsletter__row {
  margin-top: var(--vico20-space-md);
}

.vico20-newsletter__input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--vico20-color-border);
  border-radius: 0;
  padding: 0 var(--vico20-space-md);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  color: var(--vico20-color-text);
  background: var(--vico20-color-white);
  box-sizing: border-box;
}

.vico20-newsletter__input::placeholder {
  color: var(--vico20-color-text-light);
}

.vico20-newsletter__input:focus {
  border-color: var(--vico20-color-gold);
  outline: none;
}

.vico20-newsletter__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--vico20-space-sm);
  margin-top: var(--vico20-space-md);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  color: var(--vico20-color-text-medium);
  cursor: pointer;
}

.vico20-newsletter__privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid var(--vico20-color-border);
  border-radius: 0;
  appearance: none;
  background: #ffffff;
  -webkit-appearance: none;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.vico20-newsletter__privacy input[type="checkbox"]:checked {
  background: var(--vico20-color-gold);
  border-color: var(--vico20-color-gold);
}

.vico20-newsletter__privacy input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.vico20-newsletter__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vico20-space-sm);
  width: 100%;
  height: 48px;
  /* NOTE: Gold (#B8A88A) with white text has contrast ratio ~2.4:1, below WCAG AA. Implemented per prototype design. */
  background: var(--vico20-color-gold);
  color: #ffffff;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: none;
  border-radius: 50px;
  margin-top: var(--vico20-space-lg);
  cursor: pointer;
  transition: filter 200ms ease;
}

.vico20-newsletter__submit:hover {
  filter: brightness(0.9);
}

.vico20-newsletter__message {
  margin-top: var(--vico20-spacing-md, 1rem);
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
}

.vico20-newsletter__message--success {
  color: #2e7d32;
  background-color: rgba(46, 125, 50, 0.1);
}

.vico20-newsletter__message--error {
  color: #c62828;
  background-color: rgba(198, 40, 40, 0.1);
}

@media (max-width: 767px) {
  .vico20-newsletter__row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   GLOBAL BUTTON ARROW (pill buttons with animated arrow)
   -------------------------------------------------------------------------- */

.vico20-btn__arrow {
  display: inline-block;
  width: 12px;
  height: auto;
  transition: transform 200ms ease;
  vertical-align: middle;
  align-self: center;
}


.vico20-btn__arrow--white {
  filter: brightness(0) invert(1);
}

.vico20-btn:hover .vico20-btn__arrow {
  transform: translateX(4px);
}

/* On story CTA hover (bg goes white), arrow should turn dark */
.vico20-story__cta:hover .vico20-btn__arrow--white {
  filter: none;
}

/* --------------------------------------------------------------------------
   PRODUCT CARD: HORIZONTAL LAYOUT (category sections)
   -------------------------------------------------------------------------- */

.vico20-category-section .vico20-product-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vico20-space-md);
  align-items: center;
}

.vico20-category-section .vico20-product-card__image {
  aspect-ratio: 1 / 1;
}

.vico20-category-section .vico20-product-card__info {
  padding: 0;
  text-align: left;
}

.vico20-category-section .vico20-product-card__name {
  text-align: left;
  font-size: 1.55rem;
}

.vico20-category-section .vico20-product-card__price {
  text-align: left;
}

.vico20-category-section .vico20-product-card__button {
  width: auto;
  display: inline-flex;
  padding: 10px var(--vico20-space-lg);
  align-self: flex-start;
}

/* Match product stack height to lifestyle image */
.vico20-category-section__layout {
  align-items: stretch;
}

.vico20-category-section__products {
  justify-content: space-between;
}

.vico20-category-section__grid {
  flex: 1;
}

@media (max-width: 767px) {
  .vico20-category-section .vico20-product-card {
    grid-template-columns: 1fr;
  }

  .vico20-category-section .vico20-product-card__info {
    text-align: center;
  }

  .vico20-category-section .vico20-product-card__name,
  .vico20-category-section .vico20-product-card__price {
    text-align: center;
  }

  .vico20-category-section .vico20-product-card__button {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Phase 2: REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vico20-product-card__image img {
    transition: none;
  }

  .vico20-product-card:hover .vico20-product-card__image img {
    transform: none;
  }

  .vico20-quicklinks__overlay,
  .vico20-collections-banner__btn {
    transition: none;
  }

  .vico20-btn__arrow {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Phase 2: FOCUS STATES
   -------------------------------------------------------------------------- */

.vico20-hero__cta:focus-visible,
.vico20-product-card__button:focus-visible,
.vico20-category-section__link:focus-visible,
.vico20-quicklinks__item:focus-visible,
.vico20-collections-banner__btn:focus-visible,
.vico20-story__cta:focus-visible,
.vico20-newsletter__input:focus-visible,
.vico20-newsletter__submit:focus-visible {
  outline: 2px solid var(--vico20-color-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   Phase 3: Product Infrastructure
   ========================================================================== */

/* --------------------------------------------------------------------------
   PRODUCT GRID (archive / collection / category pages)
   -------------------------------------------------------------------------- */

.vico20-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vico20-space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.vico20-product-grid .vico20-product-card__button {
  width: auto;
}

@media (max-width: 1023px) {
  .vico20-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vico20-space-md);
  }
}

@media (max-width: 767px) {
  .vico20-product-grid {
    grid-template-columns: 1fr;
    gap: var(--vico20-space-md);
  }
}

/* --------------------------------------------------------------------------
   WOOCOMMERCE PRICE HTML OVERRIDES
   -------------------------------------------------------------------------- */

.vico20-product-card__price .woocommerce-Price-amount,
.vico20-product-card__price .woocommerce-Price-currencySymbol {
  font: inherit;
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   PRODUCT CARD: LINK RESET (dynamic card uses <a> elements)
   -------------------------------------------------------------------------- */

a.vico20-product-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

a.vico20-product-card__name {
  text-decoration: none;
  color: inherit;
}

a.vico20-product-card__button {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Phase 3: REDUCED MOTION (product card image hover)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vico20-product-card__image img {
    transition: none;
  }

  .vico20-product-card:hover .vico20-product-card__image img {
    transform: none;
  }
}

/* ==========================================================================
   Phase 3: Product Detail Page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product Detail Layout
   -------------------------------------------------------------------------- */

.vico20-product-detail {
  padding-top: var(--vico20-space-2xl);
  padding-bottom: var(--vico20-space-3xl);
}

.vico20-product-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vico20-space-xl);
}

@media (min-width: 1024px) {
  .vico20-product-detail__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--vico20-space-2xl);
  }
}

/* Grid items default to min-width: auto, so a column can never shrink below
   its content's min-content width. The variation gallery is shrink-to-fit
   (.woo-variation-product-gallery is display: inline-block; float: left) and
   its thumbnails are width: 100%, so min-content resolved circularly and blew
   the first track out to ~26,000px, pushing the page into horizontal scroll.
   min-width: 0 lets the 1fr tracks do their job. */
.vico20-product-detail__image,
.vico20-product-detail__info {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Product Image
   -------------------------------------------------------------------------- */

.vico20-product-detail__image {
  background: var(--vico20-color-white);
}

.vico20-product-detail__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* --------------------------------------------------------------------------
   Product Info
   -------------------------------------------------------------------------- */

.vico20-product-detail__name {
  font-family: var(--vico20-font-serif);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-md);
}

.vico20-product-detail__price {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-lg);
  display: block;
}

.vico20-product-detail__description {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--vico20-color-text);
  line-height: 1.6;
  margin-bottom: var(--vico20-space-xl);
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.vico20-accordion__item {
  border-bottom: 1px solid var(--vico20-color-border);
}

.vico20-accordion__item:first-child {
  border-top: 1px solid var(--vico20-color-border);
}

.vico20-accordion__summary {
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vico20-color-text);
  padding: var(--vico20-space-md) 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.vico20-accordion__summary::-webkit-details-marker {
  display: none;
}

.vico20-accordion__chevron {
  width: 12px;
  height: 12px;
  color: var(--vico20-color-text-medium);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

details[open] .vico20-accordion__chevron {
  transform: rotate(180deg);
}

.vico20-accordion__content {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--vico20-color-text-medium);
  padding: 0 0 var(--vico20-space-md) 0;
}

/* ==========================================================================
   Single Product — Variation Form & Summary Column Rhythm (Phase 9 G4 fix)
   ========================================================================== */

/* Space between the variations table and the single_variation_wrap (price + add-to-cart area). */
.vico20-product-detail__info .variations_form .variations {
  margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
  display: block;
  width: 100%;
}

/* Break out of table layout — render as stacked blocks at full width. */
.vico20-product-detail__info .variations_form .variations tbody {
  display: block;
  width: 100%;
}

.vico20-product-detail__info .variations_form .variations tr {
  display: block;
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

.vico20-product-detail__info .variations_form .variations th.label,
.vico20-product-detail__info .variations_form .variations td.value {
  display: block;
  width: 100%;
}

.vico20-product-detail__info .variations_form .variations tr:last-child {
  margin-bottom: 0;
}

/* G11/G12 — Variation labels match accordion typography. */
.vico20-product-detail__info .variations_form .variations th.label {
  font-family: var(--vico20-font-sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  padding: 0 0 var(--vico20-space-xs, 0.25rem) 0;
  font-weight: 600;
  color: var(--vico20-color-text-medium);
}

.vico20-product-detail__info .variations_form .variations td.value {
  padding: 0;
}

/* Variation dropdowns — native <select>, styled to match .vico20-accordion.

   Choices.js used to wrap these selects. It was removed because WooCommerce's
   add-to-cart-variation.js rebuilds the <option> nodes on every change
   (VariationForm.onUpdateAttributes -> current_attr_select.html(...)), which
   left Choices.js holding references to detached elements. A chosen option
   therefore never reached the live <select>, its value stayed empty and no
   variation could be selected. Styling the native control keeps WooCommerce
   as the sole owner of the <select> and of its disabled-option state.

   Prefixed with `.woocommerce .product` (0,6,2) so it out-specifies
   `.woocommerce div.product form.cart .variations select` (0,4,3), which Woo
   uses to set its own chevron, padding-right: 3em and margin-right: 1em. The
   product wrapper is emitted unconditionally by woocommerce/single-product.php,
   so this selector always matches. */
.woocommerce
  .product
  .vico20-product-detail__info
  .variations_form
  .variations
  td.value
  select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--vico20-color-border);
  border-radius: 0;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6560' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,4 6,8 10,4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
  cursor: pointer;
}

/* Placeholder ("Scegli un'opzione") sits at half strength, as the Choices
   trigger did. Where color-mix() is unsupported the declaration is dropped
   and the placeholder simply renders at full text colour. */
.vico20-product-detail__info
  .variations_form
  .variations
  td.value
  select:has(option[value=""]:checked) {
  color: color-mix(in srgb, var(--vico20-color-text) 50%, transparent);
}

/* Focus ring for a11y — matches the previous .is-focused treatment. */
.vico20-product-detail__info
  .variations_form
  .variations
  td.value
  select:focus-visible {
  outline: 2px solid var(--vico20-color-text);
  outline-offset: 2px;
}

/* Options WooCommerce marks unavailable for the current combination. */
.vico20-product-detail__info
  .variations_form
  .variations
  td.value
  select
  option:disabled {
  color: var(--vico20-color-text-medium);
}

/* --------------------------------------------------------------------------
   WooCommerce div.product overrides

   The product wrapper in woocommerce/single-product.php makes WooCommerce's
   `.woocommerce div.product ...` rules live. Most are inert here — floats
   inside a flex container, border-width with no border-style, and selects
   already out-specified by the rules above. Four of them do land on the design
   and are neutralised below. The leading `.woocommerce .product` is needed to
   out-specify `.woocommerce div.product form.cart ...` (0,4,2).
   -------------------------------------------------------------------------- */

.woocommerce
  .product
  .vico20-product-detail__info
  .variations_form
  .variations {
  margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

.woocommerce .product .vico20-product-detail__info .variations_form .variations th,
.woocommerce .product .vico20-product-detail__info .variations_form .variations td {
  line-height: inherit;
  vertical-align: middle;
}

/* Woo bolds the inner <label>; the theme styles the wrapping <th class="label">,
   so let the label take its weight from the th. Only font-weight is reverted —
   a broader reset (e.g. `font: inherit`) would also overwrite the label's
   line-height and shift the row. */
.woocommerce
  .product
  .vico20-product-detail__info
  .variations_form
  .variations
  th.label
  label {
  font-weight: inherit;
}

/* Woo also resizes the reset link (0.83em). Its `visibility: hidden` is kept
   deliberately — WooCommerce's JS toggles it, so the link is now correctly
   hidden until a variation is chosen. */
.woocommerce
  .product
  .vico20-product-detail__info
  .variations_form
  .reset_variations {
  font-size: 0.75rem;
}

/* The "Reset variations" link that Woo injects — push it down slightly.
   It only becomes visible once a variation is selected, so it needs an
   explicit colour: without one it falls back to the UA default blue. */
.vico20-product-detail__info .variations_form .reset_variations {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--20, 0.5rem);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vico20-color-text-medium);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Single variation wrap holds the resolved price + stock + add-to-cart. */
.vico20-product-detail__info .variations_form .single_variation_wrap {
  margin-top: var(--wp--preset--spacing--50, 1.5rem);
}

.vico20-product-detail__info .variations_form .single_variation {
  margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

/* Woocommerce-variation-price is the resolved variation price shown once a full selection is made. */
.vico20-product-detail__info .variations_form .woocommerce-variation-price {
  font-size: 1.25rem;
  margin: 0;
}

/* Ensure the existing add-to-cart wrap (quantity + button) gets room above it when it's
   inside the variations_form single_variation_wrap context. */
.vico20-product-detail__info
  .variations_form
  .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: var(--wp--preset--spacing--30, 0.75rem);
  margin-top: var(--wp--preset--spacing--40, 1rem);
}

.vico20-product-detail__info
  .variations_form
  .woocommerce-variation-add-to-cart
  .quantity {
  margin: 0;
}

.vico20-product-detail__info
  .variations_form
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button {
  margin: 0;
}

/* ==========================================================================
   Single Product — Woo Gallery Wrapper (Phase 9 G6 fix)
   ========================================================================== */

/* Reset Woo's default inline float/width shenanigans — we control layout via the
   grandparent .vico20-product-detail__layout grid. */
.vico20-product-detail__image .woocommerce-product-gallery {
  width: 100%;
  float: none;
  margin: 0;
  opacity: 1;
}

/* WC woocommerce-layout.css sets `.woocommerce #content div.product div.images`
   to float:left / width:48%. Its specificity (1,3,2, because header.php wraps the
   page in main#content) beats the wrapper rule above. This override makes the
   native WC gallery (used without Woo Variation Gallery, since 1.3.2) fill the
   column. */
.woocommerce #content div.product .vico20-product-detail__image div.images {
  width: 100%;
  float: none;
}

/* The Variation Gallery (WVG) plugin's wrapper. Its desktop max-width comes from
   add_theme_support('woo_variation_gallery', width 100) in inc/woocommerce.php;
   this also overrides the plugin's fixed 720px / 320px widths at <=992px and
   <=480px so the gallery fills the stacked column on tablets too. */
.vico20-product-detail__image .woo-variation-product-gallery {
  width: 100%;
}

.vico20-product-detail__image .woocommerce-product-gallery__wrapper {
  width: 100%;
  margin: 0;
}

.vico20-product-detail__image .woocommerce-product-gallery__image {
  width: 100%;
}

/* The actual image: full-width container, natural aspect, crisp rendering.
   No upscale blur because Woo emits the `woocommerce_single` size by default,
   which is 800px wide per vico20_woocommerce_support (inc/woocommerce.php). */
.vico20-product-detail__image .woocommerce-product-gallery__image {
  overflow: hidden;
}

.vico20-product-detail__image .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  image-rendering: auto;
  transition: transform 300ms ease;
  transform-origin: 0 0;
}

.vico20-product-detail__image .woocommerce-product-gallery__image.is-zoomed img {
  transition: none;
}

/* Zoom cursor affordance on the main image (the JS zoom is already wired via
   add_theme_support('wc-product-gallery-zoom') in inc/woocommerce.php). */
.vico20-product-detail__image .woocommerce-product-gallery__image a,
.vico20-product-detail__image .woocommerce-product-gallery__image img {
  cursor: zoom-in;
}

/* Zoom overlay lens sizing — Woo's zoom plugin injects .zoomImg; constrain to wrapper. */
.vico20-product-detail__image .woocommerce-product-gallery img.zoomImg {
  background-color: var(--wp--preset--color--base, #fff);
}

/* Hide the trigger button Woo adds (usually the magnifying-glass in the corner) — the
   whole image is the click target, no need for the extra UI. The second selector is
   the Variation Gallery (WVG) plugin's equivalent magnifier trigger. */
.vico20-product-detail__image .woocommerce-product-gallery__trigger,
.vico20-product-detail__image .woo-variation-gallery-trigger {
  display: none;
}

/* --------------------------------------------------------------------------
   Add-to-Cart Button (Product Detail)
   -------------------------------------------------------------------------- */

.vico20-product-detail__add-to-cart-wrap {
  margin-top: var(--vico20-space-xl);
}

.vico20-product-detail__add-to-cart-wrap .single_add_to_cart_button {
  background: transparent;
  border: 1px solid var(--vico20-color-text);
  border-radius: 50px;
  padding: 16px 48px;
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--vico20-color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.vico20-product-detail__add-to-cart-wrap .single_add_to_cart_button:hover {
  background: var(--vico20-color-text);
  color: var(--vico20-color-white);
}

.vico20-product-detail__add-to-cart-wrap .quantity {
  display: none;
}

/* --------------------------------------------------------------------------
   Wishlist
   -------------------------------------------------------------------------- */

.vico20-product-detail__wishlist {
  margin-top: var(--vico20-space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--vico20-color-text-medium);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.vico20-product-detail__wishlist svg {
  width: 16px;
  height: 16px;
  stroke: var(--vico20-color-text-medium);
  fill: none;
  transition: fill 200ms ease;
}

.vico20-product-detail__wishlist:hover svg {
  fill: var(--vico20-color-gold);
}

.vico20-product-detail__wishlist:hover {
  color: var(--vico20-color-text);
}

/* --------------------------------------------------------------------------
   Shipping Links
   -------------------------------------------------------------------------- */

.vico20-product-detail__shipping {
  margin-top: var(--vico20-space-lg);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.vico20-product-detail__shipping a {
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vico20-color-text-medium);
  text-decoration: none;
}

.vico20-product-detail__shipping a:hover {
  color: var(--vico20-color-text);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Packaging Photo Band
   -------------------------------------------------------------------------- */

.vico20-photo-band--packaging {
  height: 250px;
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .vico20-photo-band--packaging {
    height: 350px;
  }
}

@media (min-width: 1024px) {
  .vico20-photo-band--packaging {
    height: 500px;
  }
}

/* --------------------------------------------------------------------------
   Related Products
   -------------------------------------------------------------------------- */

.vico20-related-products {
  padding: var(--vico20-space-3xl) 0;
  background: var(--vico20-color-white);
}

.vico20-related-products__heading {
  font-family: var(--vico20-font-sans);
  font-size: 24px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: var(--vico20-space-2xl);
  color: var(--vico20-color-text);
}

.vico20-related-products__grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--vico20-space-lg);
}

.vico20-related-products__grid .vico20-product-card {
  min-width: 280px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .vico20-related-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .vico20-related-products__grid .vico20-product-card {
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .vico20-related-products__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Product Error State
   -------------------------------------------------------------------------- */

.vico20-product-error {
  text-align: center;
  padding: var(--vico20-space-3xl) var(--vico20-space-md);
}

.vico20-product-error__heading {
  font-family: var(--vico20-font-serif);
  font-size: 28px;
  font-style: italic;
  margin-bottom: var(--vico20-space-md);
}

.vico20-product-error__body {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  color: var(--vico20-color-text-medium);
  margin-bottom: var(--vico20-space-xl);
}

.vico20-product-error__cta {
  background: transparent;
  border: 1px solid var(--vico20-color-text);
  border-radius: 50px;
  padding: 16px 48px;
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--vico20-color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.vico20-product-error__cta:hover {
  background: var(--vico20-color-text);
  color: var(--vico20-color-white);
}

/* --------------------------------------------------------------------------
   Focus States (Product Detail)
   -------------------------------------------------------------------------- */

.vico20-accordion__summary:focus-visible {
  outline: 2px solid var(--vico20-color-gold);
  outline-offset: 2px;
}

.vico20-product-detail__wishlist:focus-visible {
  outline: 2px solid var(--vico20-color-gold);
  outline-offset: 2px;
}

.vico20-product-detail__add-to-cart-wrap
  .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--vico20-color-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced Motion (Product Detail)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vico20-accordion__chevron {
    transition: none;
  }

  .vico20-product-detail__wishlist svg {
    transition: none;
  }

  .vico20-product-detail__add-to-cart-wrap .single_add_to_cart_button {
    transition: none;
  }

  .vico20-product-error__cta {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive: Mobile < 1024px (Product Detail)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .vico20-product-detail__info {
    text-align: center;
  }

  .vico20-product-detail__description {
    text-align: left;
  }

  .vico20-product-detail__accordion {
    text-align: left;
  }

  .vico20-accordion__summary {
    text-align: left;
  }

  .vico20-product-detail__shipping {
    align-items: flex-start;
  }
}

/* ==========================================================================
   Phase 4: Inner Pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Collection Hero (.vico20-collection-hero)
   -------------------------------------------------------------------------- */

.vico20-collection-hero {
  position: relative;
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-color: var(--vico20-color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vico20-collection-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.vico20-collection-hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--vico20-font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vico20-color-white);
  margin: 0;
}

@media (max-width: 1023px) {
  .vico20-collection-hero {
    height: 300px;
  }
  .vico20-collection-hero__title {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .vico20-collection-hero {
    height: 200px;
  }
  .vico20-collection-hero__title {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Collection Description (.vico20-collection-description)
   -------------------------------------------------------------------------- */

.vico20-collection-description {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: var(--vico20-space-2xl);
  padding-bottom: var(--vico20-space-xl);
  padding-left: var(--vico20-space-md);
  padding-right: var(--vico20-space-md);
}

.vico20-collection-description__inner {
  max-width: 800px;
  margin: 0 ;
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--vico20-color-text);
}

/* --------------------------------------------------------------------------
   Filter Tabs (.vico20-filter-tabs)
   -------------------------------------------------------------------------- */

.vico20-filter-tabs {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: var(--vico20-space-xl);
  padding-bottom: var(--vico20-space-lg);
  padding-left: var(--vico20-space-md);
  padding-right: var(--vico20-space-md);
}

.vico20-filter-tabs__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vico20-space-sm);
}

.vico20-filter-tabs__label {
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vico20-color-text);
  margin-right: var(--vico20-space-lg);
}

.vico20-filter-tabs__button {
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vico20-color-text-medium);
  background: transparent;
  border: none;
  padding: var(--vico20-space-sm) var(--vico20-space-md);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

.vico20-filter-tabs__button:hover {
  color: var(--vico20-color-text);
  border-bottom-color: var(--vico20-color-text);
}

.vico20-filter-tabs__button[aria-selected="true"] {
  color: var(--vico20-color-text);
  font-weight: 700;
  border-bottom-color: var(--vico20-color-text);
}

.vico20-filter-tabs__button:focus-visible {
  outline: 2px solid var(--vico20-color-gold);
  outline-offset: 2px;
}

.vico20-filter-tabs__button:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Product Grid: Collection Context
   -------------------------------------------------------------------------- */

.vico20-product-grid[role="tabpanel"] {
  padding-bottom: var(--vico20-space-3xl);
}

/* --------------------------------------------------------------------------
   Empty State (.vico20-container[role="status"])
   -------------------------------------------------------------------------- */

.vico20-container[role="status"] {
  text-align: center;
  padding-top: var(--vico20-space-3xl);
  padding-bottom: var(--vico20-space-3xl);
}

.vico20-container[role="status"] h2 {
  font-family: var(--vico20-font-serif);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  color: var(--vico20-color-text);
}

.vico20-container[role="status"] p {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  color: var(--vico20-color-text-medium);
  margin-top: var(--vico20-space-md);
}

/* --------------------------------------------------------------------------
   Reduced Motion (Phase 4)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vico20-filter-tabs__button {
    transition-duration: 0ms;
  }
}

/* --------------------------------------------------------------------------
   Category Heading (.vico20-category-heading)
   -------------------------------------------------------------------------- */

.vico20-category-hero {
  position: relative;
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-color: var(--vico20-color-beige);
  margin-bottom: var(--vico20-space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vico20-category-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.vico20-category-hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--vico20-font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vico20-color-white);
  margin: 0;
}

@media (max-width: 1023px) {
  .vico20-category-hero {
    height: 200px;
  }
  .vico20-category-hero__title {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .vico20-category-hero {
    height: 150px;
  }
  .vico20-category-hero__title {
    font-size: 1.5rem;
  }
}

/* Legacy selectors kept for backwards compat if referenced elsewhere */
.vico20-category-heading {
  display: none;
}

.vico20-category-photo-band {
  display: none;
}

/* --------------------------------------------------------------------------
   Featured Product Grid (.vico20-product-grid--featured)
   -------------------------------------------------------------------------- */

.vico20-product-grid--featured {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vico20-space-lg);
  grid-auto-flow: dense;
}

.vico20-product-card--featured {
  grid-column: span 2;
  grid-row: span 2;
  background-color: #f7f7f7;
}

.vico20-product-card--featured .vico20-product-card__image {
  flex: 1 1 auto;
}

.vico20-product-card--featured .vico20-product-card__image img {
  object-fit: cover;
  padding: 0;
}

.vico20-product-card--featured .vico20-product-card__info {
  background-color: #f7f7f7;
}

.vico20-product-card--featured .vico20-product-card__image-wrapper {
  aspect-ratio: 1 / 1;
}

@media (max-width: 1023px) {
  .vico20-product-grid--featured {
    grid-template-columns: repeat(2, 1fr);
  }

  .vico20-product-card--featured {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .vico20-product-grid--featured {
    grid-template-columns: 1fr;
  }

  .vico20-product-card--featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* --------------------------------------------------------------------------
   Category Quote Banner (.vico20-category-quote)
   -------------------------------------------------------------------------- */

.vico20-category-quote {
  width: 100%;
  background-color: var(--vico20-color-cream);
}

.vico20-category-quote__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--vico20-space-3xl) var(--vico20-space-lg);
}

.vico20-category-quote__text {
  font-family: var(--vico20-font-serif);
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  color: var(--vico20-color-text);
  line-height: 1.3;
  display: flex;
  align-items: center;
  padding-right: var(--vico20-space-2xl);
}

.vico20-category-quote__text blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

.vico20-category-quote__image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 1023px) {
  .vico20-category-quote__inner {
    padding: var(--vico20-space-2xl) var(--vico20-space-lg);
  }
}

@media (max-width: 767px) {
  .vico20-category-quote__inner {
    grid-template-columns: 1fr;
  }

  .vico20-category-quote__text {
    padding-right: 0;
    padding-bottom: var(--vico20-space-xl);
  }

  .vico20-category-quote__image {
    height: 250px;
  }
}

/* --------------------------------------------------------------------------
   Editorial Content (.vico20-editorial-content)
   -------------------------------------------------------------------------- */

.vico20-editorial-content__header {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--vico20-space-3xl) var(--vico20-space-lg) 0;
}

/* Hide H1 when first child is a cover block (e.g. Su di Noi) */
.vico20-editorial-content__body
  > .wp-block-cover:first-child
  ~ .vico20-editorial-content__header {
  display: none;
}

.page-id-25 .vico20-editorial-content__header {
  display: none;
}

.vico20-editorial-content__body {
  /* No max-width — allows full-width blocks (cover, pullquote) to break out */
}

/* Text pages (legal pages, Contatti) need breathing room before the newsletter
   band; pages ending in a full-width block or their own spacer keep theirs. */
.vico20-editorial-content__body:not(
    :has(
        > .alignfull:last-child,
        > .wp-block-cover:last-child,
        > .wp-block-spacer:last-child
      )
  ) {
  padding-bottom: var(--vico20-space-3xl);
}

.vico20-editorial-content__body
  > *:not(.alignfull):not(.alignwide):not(.wp-block-cover):not(
    .wp-block-pullquote
  ) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vico20-space-lg);
  padding-right: var(--vico20-space-lg);
}

.vico20-editorial-content .wp-block-cover__inner-container {
  padding-left: var(--vico20-space-3xl);
  padding-right: var(--vico20-space-3xl);
}

.vico20-editorial-content .wp-block-cover p {
  font-family: var(--vico20-font-serif) !important;
  font-size: 2.2rem !important;
  font-style: italic !important;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .vico20-editorial-content .wp-block-cover p {
    font-size: 1.2rem !important;
    line-height: 1.5;
  }

  .vico20-editorial-content .wp-block-cover__inner-container {
    padding-left: var(--vico20-space-lg);
    padding-right: var(--vico20-space-lg);
  }
}

.vico20-editorial-content__title {
  font-family: var(--vico20-font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-xl);
}

/* --------------------------------------------------------------------------
   Gutenberg Block Styles (scoped to .vico20-editorial-content)
   -------------------------------------------------------------------------- */

.vico20-editorial-content .wp-block-paragraph {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-lg);
}

.vico20-editorial-content .wp-block-heading h2,
.vico20-editorial-content h2.wp-block-heading {
  font-family: var(--vico20-font-serif) !important;
  font-size: var(--vico20-text-lg) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-md);
  margin-top: var(--vico20-space-2xl);
}

.vico20-editorial-content .wp-block-columns .wp-block-column {
  padding-left: var(--vico20-space-lg);
  padding-right: var(--vico20-space-lg);
}

.vico20-editorial-content .wp-block-heading h3 {
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-md);
  margin-top: var(--vico20-space-xl);
}

.vico20-editorial-content .wp-block-image {
  width: 100%;
  margin-bottom: var(--vico20-space-xl);
}

.vico20-editorial-content .wp-block-image figcaption {
  font-family: var(--vico20-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--vico20-color-text-medium);
  text-align: center;
  margin-top: var(--vico20-space-sm);
}

.vico20-editorial-content .wp-block-quote {
  font-family: var(--vico20-font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  font-style: italic;
  color: var(--vico20-color-text);
  border-left: none;
  padding: var(--vico20-space-3xl) 0;
  margin: var(--vico20-space-2xl) 0;
  text-align: center;
  max-width: none;
}

.vico20-editorial-content .wp-block-quote p {
  font-family: var(--vico20-font-serif);
  font-size: 1.8rem;
  font-style: italic;
  line-height: 1.5;
}

.vico20-editorial-content .wp-block-list {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-lg);
  padding-left: var(--vico20-space-lg);
}

.vico20-editorial-content .wp-block-separator {
  border-top: 1px solid var(--vico20-color-border);
  border-bottom: none;
  margin: var(--vico20-space-2xl) auto;
  max-width: 200px;
}

.vico20-editorial-content .wp-block-gallery {
  gap: var(--vico20-space-md);
  margin-bottom: var(--vico20-space-xl);
}

.vico20-editorial-content .wp-block-cover {
  width: 100%;
  min-height: 400px;
}

.vico20-editorial-content .wp-block-pullquote {
  border: none;
  padding: var(--vico20-space-3xl) 0;
  margin: var(--vico20-space-2xl) 0;
  text-align: center;
}

.vico20-editorial-content .wp-block-pullquote blockquote,
.vico20-editorial-content .wp-block-pullquote p {
  font-family: var(--vico20-font-serif) !important;
  font-size: 1.8rem !important;
  font-style: italic !important;
  line-height: 1.5;
  color: var(--vico20-color-text);
  border: none;
  margin: 0;
  padding: 0;
}

.vico20-editorial-content .wp-block-columns {
  gap: var(--vico20-space-lg);
  margin-bottom: var(--vico20-space-xl);
}

/* --------------------------------------------------------------------------
   Blog Archive — Masonry Grid (.vico20-blog-archive)
   -------------------------------------------------------------------------- */

.vico20-blog-archive {
  max-width: var(--vico20-max-width);
  margin: 0 auto;
  padding: var(--vico20-space-3xl) var(--vico20-space-lg);
}

.vico20-blog-archive__title {
  font-family: var(--vico20-font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-2xl);
}

.vico20-blog-archive__grid {
  columns: 3;
  column-gap: var(--vico20-space-lg);
}

.vico20-blog-archive__card {
  break-inside: avoid;
  margin-bottom: var(--vico20-space-lg);
  background: var(--vico20-color-white);
}

.vico20-blog-archive__card-image {
  width: 100%;
  display: block;
}

.vico20-blog-archive__card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.vico20-blog-archive__card-body {
  padding: var(--vico20-space-md) 0;
}

.vico20-blog-archive__card-title {
  font-family: var(--vico20-font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-xs);
}

.vico20-blog-archive__card-title a {
  color: inherit;
  text-decoration: none;
}

.vico20-blog-archive__card-title a:hover {
  color: var(--vico20-color-gold);
}

.vico20-blog-archive__card-excerpt {
  font-family: var(--vico20-font-sans);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--vico20-color-text);
}

@media (max-width: 1023px) {
  .vico20-blog-archive__grid {
    columns: 2;
  }
}

@media (max-width: 767px) {
  .vico20-blog-archive__grid {
    columns: 1;
  }
}

/* --------------------------------------------------------------------------
   Single Post (.vico20-single-post)
   -------------------------------------------------------------------------- */

.vico20-single-post__hero {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
}

.vico20-single-post__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vico20-single-post__content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--vico20-space-2xl) var(--vico20-space-lg);
}

.vico20-single-post__title {
  font-family: var(--vico20-font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-lg);
}

.vico20-single-post__body {
  font-family: var(--vico20-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--vico20-color-text);
}

.vico20-single-post__body p {
  margin-bottom: var(--vico20-space-lg);
}

/* ==========================================================================
   Phase 5: Commerce Flow — Cart & Checkout
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1  Cart Page (.woocommerce-cart)
   -------------------------------------------------------------------------- */

/* WooCommerce page width containment — D-08, D-09 (CSS-only, no template override).
   Constrains cart, checkout, and account pages to the same max-width grid as other pages. */
.woocommerce-cart .vico20-editorial-content__body,
.woocommerce-checkout .vico20-editorial-content__body,
.woocommerce-account .vico20-editorial-content__body {
	max-width: var(--vico20-max-width);
	margin-inline: auto;
	padding-inline: var(--vico20-space-md);
}

@media (min-width: 768px) {
	.woocommerce-cart .vico20-editorial-content__body,
	.woocommerce-checkout .vico20-editorial-content__body,
	.woocommerce-account .vico20-editorial-content__body {
		padding-inline: var(--vico20-space-lg);
	}
}

@media (min-width: 1024px) {
	.woocommerce-cart .vico20-editorial-content__body,
	.woocommerce-checkout .vico20-editorial-content__body,
	.woocommerce-account .vico20-editorial-content__body {
		padding-inline: var(--vico20-space-xl);
	}
}

.woocommerce table.shop_table {
  border-collapse: collapse;
  border-color: var(--vico20-color-border);
  font-family: var(--vico20-font-sans);
  width: 100%;
}

.woocommerce table.shop_table th {
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--vico20-color-text);
  border-bottom: 1px solid var(--vico20-color-border);
  padding: var(--vico20-space-md);
}

.woocommerce table.shop_table td {
  font-size: var(--vico20-text-base);
  font-family: var(--vico20-font-sans);
  color: var(--vico20-color-text);
  border-bottom: 1px solid var(--vico20-color-border);
  padding: var(--vico20-space-md);
  vertical-align: middle;
}

.woocommerce table.shop_table .product-name a {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  color: var(--vico20-color-text);
  text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
  color: var(--vico20-color-text-medium);
}

/* Block cart: product name link (same treatment as the classic cart above). */
.wc-block-cart a.wc-block-components-product-name {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  color: var(--vico20-color-text);
  text-decoration: none;
}

.wc-block-cart a.wc-block-components-product-name:hover {
  color: var(--vico20-color-text-medium);
}

.woocommerce table.shop_table img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0;
}

.woocommerce table.shop_table .product-remove a {
  color: var(--vico20-color-text-medium);
  font-size: 18px;
}

.woocommerce .cart_totals h2 {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-lg);
}

.woocommerce .cart_totals .shop_table {
  border-color: var(--vico20-color-border);
}

.woocommerce .quantity .qty {
  width: 60px;
  text-align: center;
  border: 1px solid var(--vico20-color-border);
  border-radius: 0;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  padding: var(--vico20-space-sm);
}

/* --------------------------------------------------------------------------
   5.2  WooCommerce Buttons — Outlined Pill Style
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border: 1px solid var(--vico20-color-text);
  border-radius: 50px;
  background: transparent;
  color: var(--vico20-color-text);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease;
  text-decoration: none;
  line-height: 1;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--vico20-color-text);
  color: var(--vico20-color-white);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border: 1px solid var(--vico20-color-text);
  border-radius: 50px;
  background: var(--vico20-color-text);
  color: var(--vico20-color-white);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease;
  text-decoration: none;
  line-height: 1;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
  background: transparent;
  color: var(--vico20-color-text);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled:hover,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   5.3  Checkout Page (.woocommerce-checkout)
   -------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout h3#order_review_heading {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-lg);
}

.woocommerce-checkout .form-row label {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-xs);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  color: var(--vico20-color-text);
  border: 1px solid var(--vico20-color-border);
  border-radius: 0;
  padding: var(--vico20-space-sm) var(--vico20-space-md);
  background: var(--vico20-color-white);
  width: 100%;
  transition: border-color 200ms ease;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--vico20-color-text);
  outline: none;
}

.woocommerce-checkout #payment {
  background: var(--vico20-color-cream);
  border-radius: 0;
  padding: var(--vico20-space-lg);
}

.woocommerce-checkout #payment .payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vico20-space-lg) 0;
  border-bottom: 1px solid var(--vico20-color-border);
}

.woocommerce-checkout #payment .payment_methods li {
  padding: var(--vico20-space-md) 0;
  border-top: 1px solid var(--vico20-color-border);
}

.woocommerce-checkout #payment .payment_methods li label {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  color: var(--vico20-color-text);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5.4  WooCommerce Notices
   -------------------------------------------------------------------------- */

.woocommerce-message {
  border-top-color: var(--vico20-color-text);
  background: var(--vico20-color-cream);
  color: var(--vico20-color-text);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
}

.woocommerce-error {
  border-top-color: var(--vico20-color-destructive);
}

.woocommerce-info {
  border-top-color: var(--vico20-color-text-medium);
}

/* Theme notices under the header (vico20_output_notices) */
.vico20-notices {
  display: flex;
  flex-direction: column;
  gap: var(--vico20-space-sm);
  margin-top: var(--vico20-space-md);
}

.vico20-notice {
  display: flex;
  align-items: center;
  gap: var(--vico20-space-md);
  padding: var(--vico20-space-md) var(--vico20-space-lg);
  background: var(--vico20-color-cream);
  border: 1px solid var(--vico20-color-border);
  border-left: 3px solid var(--vico20-color-gold);
  color: var(--vico20-color-text);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
}

.vico20-notice--error {
  border-left-color: var(--vico20-color-destructive);
}

.vico20-notice__body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vico20-space-sm) var(--vico20-space-md);
}

.vico20-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vico20-space-sm);
}

.vico20-notice__btn,
.vico20-notice a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--vico20-color-text);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  border: 1px solid var(--vico20-color-text);
  border-radius: 50px;
  padding: 10px 24px;
  white-space: nowrap;
}

.vico20-notice__btn:hover,
.vico20-notice a.button:hover {
  background: var(--vico20-color-text);
  color: var(--vico20-color-white);
}

.vico20-notice__btn--primary {
  background: var(--vico20-color-text);
  color: var(--vico20-color-white);
}

.vico20-notice__btn--primary:hover {
  background: var(--vico20-color-gold);
  border-color: var(--vico20-color-gold);
}

.vico20-notice__close {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  background: none;
  border: none;
  color: var(--vico20-color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.vico20-notice__close:hover {
  color: var(--vico20-color-gold);
}

@media (max-width: 767px) {
  .vico20-notice {
    align-items: flex-start;
    padding: var(--vico20-space-md);
  }

  .vico20-notice__actions {
    width: 100%;
  }

  .vico20-notice__btn {
    flex: 1 1 auto;
    padding: 10px 16px;
    letter-spacing: 1px;
  }
}

/* --------------------------------------------------------------------------
   5.5  Coupon Section
   -------------------------------------------------------------------------- */

.woocommerce .coupon .input-text {
  border: 1px solid var(--vico20-color-border);
  border-radius: 0;
  padding: var(--vico20-space-sm) var(--vico20-space-md);
  font-family: var(--vico20-font-sans);
}

/* --------------------------------------------------------------------------
   5.6  Shipping Delivery Messaging
   -------------------------------------------------------------------------- */

.vico20-shipping-delivery {
  display: block;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  color: var(--vico20-color-text-medium);
  font-style: italic;
  margin-top: var(--vico20-space-xs);
}

/* --------------------------------------------------------------------------
   5.7  Focus States
   -------------------------------------------------------------------------- */

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  box-shadow: 0 0 0 2px var(--vico20-color-gold);
  border-color: var(--vico20-color-gold);
  outline: none;
}

/* --------------------------------------------------------------------------
   5.8  Responsive — Mobile Cart & Checkout
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .woocommerce table.shop_table thead {
    display: none;
  }

  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td {
    display: block;
    width: 100%;
  }

  .woocommerce table.shop_table tr {
    margin-bottom: var(--vico20-space-md);
    padding-bottom: var(--vico20-space-md);
    border-bottom: 1px solid var(--vico20-color-border);
  }

  .woocommerce table.shop_table td {
    border-bottom: none;
    padding: var(--vico20-space-xs) var(--vico20-space-md);
    text-align: left;
  }

  /* Label only cells that carry data-title: the order details table has none,
     which used to leave a stray ": " in front of every cell. */
  .woocommerce table.shop_table td[data-title]::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--vico20-text-sm);
    letter-spacing: 1px;
  }

  .woocommerce table.shop_table td.product-thumbnail::before,
  .woocommerce table.shop_table td.product-remove::before {
    content: none;
  }

  /* Order details (order received, My account > order) stays a two-column
     table instead of collapsing into stacked blocks. */
  .woocommerce table.woocommerce-table--order-details thead {
    display: table-header-group;
  }

  .woocommerce table.woocommerce-table--order-details tbody {
    display: table-row-group;
  }

  .woocommerce table.woocommerce-table--order-details tfoot {
    display: table-footer-group;
  }

  .woocommerce table.woocommerce-table--order-details tr {
    display: table-row;
    margin: 0;
    padding: 0;
  }

  .woocommerce table.woocommerce-table--order-details th,
  .woocommerce table.woocommerce-table--order-details td {
    display: table-cell;
    width: auto;
    padding: var(--vico20-space-sm) var(--vico20-space-md);
    border-bottom: 1px solid var(--vico20-color-border);
  }

  .woocommerce table.woocommerce-table--order-details td:last-child,
  .woocommerce table.woocommerce-table--order-details thead th:last-child {
    text-align: right;
  }

  .woocommerce table.woocommerce-table--order-details .wc-item-meta {
    padding-left: 0;
    margin: var(--vico20-space-xs) 0 0;
  }

  .woocommerce table.shop_table img {
    width: 60px;
    height: 60px;
  }

  .woocommerce .cart_totals {
    width: 100%;
    float: none;
  }

  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
    margin-bottom: var(--vico20-space-lg);
  }

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: 100%;
    float: none;
  }
}

/* ==========================================================================
   Phase 5: Wishlist (YITH WooCommerce Wishlist)
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.9  Wishlist — Product Detail Button
   -------------------------------------------------------------------------- */

.vico20-product-detail__wishlist-wrap {
  text-align: center;
  margin-top: var(--vico20-space-md);
}

.vico20-product-detail__wishlist-wrap .yith-wcwl-add-to-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vico20-product-detail__wishlist-wrap .yith-wcwl-add-button a,
.vico20-product-detail__wishlist-wrap .yith-wcwl-wishlistexistsbrowse a,
.vico20-product-detail__wishlist-wrap .yith-wcwl-wishlistaddedbrowse a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  color: var(--vico20-color-text-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.vico20-product-detail__wishlist-wrap .yith-wcwl-add-button a:hover,
.vico20-product-detail__wishlist-wrap .yith-wcwl-wishlistexistsbrowse a:hover,
.vico20-product-detail__wishlist-wrap .yith-wcwl-wishlistaddedbrowse a:hover {
  color: var(--vico20-color-text);
}

.vico20-product-detail__wishlist-wrap .yith-wcwl-icon {
  width: 16px;
  height: 16px;
  color: var(--vico20-color-text-medium);
  transition: color 200ms ease;
  fill: none;
  stroke: currentColor;
}

.vico20-product-detail__wishlist-wrap a:hover .yith-wcwl-icon {
  color: var(--vico20-color-gold);
  fill: var(--vico20-color-gold);
}

/* YITH feedback messages */
.yith-wcwl-add-to-wishlist .feedback {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  color: var(--vico20-color-text-medium);
}

/* --------------------------------------------------------------------------
   5.10  Wishlist — Wishlist Page Table
   -------------------------------------------------------------------------- */

.woocommerce table.wishlist_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  color: var(--vico20-color-text);
}

.woocommerce table.wishlist_table th,
.woocommerce table.wishlist_table td {
  padding: var(--vico20-space-sm) var(--vico20-space-md);
  border-bottom: 1px solid var(--vico20-color-border);
  text-align: left;
  vertical-align: middle;
}

.woocommerce table.wishlist_table thead th {
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--vico20-color-text-medium);
  font-weight: 400;
}

.woocommerce table.wishlist_table .product-name a {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  color: var(--vico20-color-text);
  text-decoration: none;
}

.woocommerce table.wishlist_table .product-name a:hover {
  color: var(--vico20-color-gold);
}

.woocommerce table.wishlist_table .product-add-to-cart a {
  display: inline-block;
  padding: var(--vico20-space-xs) var(--vico20-space-lg);
  border: 1px solid var(--vico20-color-text);
  border-radius: 30px;
  background: transparent;
  color: var(--vico20-color-text);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.woocommerce table.wishlist_table .product-add-to-cart a:hover {
  background-color: var(--vico20-color-text);
  color: var(--vico20-color-white, #fff);
}

.woocommerce table.wishlist_table .product-remove a {
  color: var(--vico20-color-text-medium);
  font-size: 18px;
  text-decoration: none;
}

.woocommerce table.wishlist_table .product-remove a:hover {
  color: var(--vico20-color-text);
}

.woocommerce table.wishlist_table img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   5.11  Wishlist — Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .woocommerce table.wishlist_table thead {
    display: none;
  }

  .woocommerce table.wishlist_table tbody,
  .woocommerce table.wishlist_table tr,
  .woocommerce table.wishlist_table td {
    display: block;
    width: 100%;
  }

  .woocommerce table.wishlist_table tr {
    margin-bottom: var(--vico20-space-md);
    padding-bottom: var(--vico20-space-md);
    border-bottom: 1px solid var(--vico20-color-border);
  }

  .woocommerce table.wishlist_table td {
    border-bottom: none;
    padding: var(--vico20-space-xs) var(--vico20-space-md);
    text-align: left;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vico20-product-detail__wishlist-wrap .yith-wcwl-add-button a,
  .vico20-product-detail__wishlist-wrap .yith-wcwl-wishlistexistsbrowse a,
  .vico20-product-detail__wishlist-wrap .yith-wcwl-wishlistaddedbrowse a,
  .vico20-product-detail__wishlist-wrap .yith-wcwl-icon {
    transition: none;
  }
}

/* ==========================================================================
   5.12  Payment Gateways
   ========================================================================== */

.woocommerce-checkout #payment .payment_methods li label img {
  max-height: 28px;
  vertical-align: middle;
  margin-left: var(--vico20-space-sm);
}

.woocommerce-checkout #payment .payment_method_stripe label,
.woocommerce-checkout #payment .payment_method_ppcp-gateway label,
.woocommerce-checkout #payment .payment_method_stripe_klarna label {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-base);
  color: var(--vico20-color-text);
}

.woocommerce-checkout #payment .payment_box {
  background: var(--vico20-color-white);
  color: var(--vico20-color-text-medium);
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  padding: var(--vico20-space-md);
  border-radius: 0;
}

.woocommerce-checkout #payment .payment_box p {
  margin: 0;
  font-size: var(--vico20-text-sm);
}

.woocommerce-checkout #payment .wc-stripe-elements-field {
  border: 1px solid var(--vico20-color-border);
  padding: var(--vico20-space-sm) var(--vico20-space-md);
  background: var(--vico20-color-white);
}

.wc-stripe-test-mode-notice {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  color: var(--vico20-color-text-medium);
  background: var(--vico20-color-cream);
  padding: var(--vico20-space-sm) var(--vico20-space-md);
  margin-bottom: var(--vico20-space-md);
}

/* ==========================================================================
   === Phase 07.1: Homepage Visual Polish ===
   Closes LAY-01..04 and applies the 28 D-decisions in 07.1-CONTEXT.md.
   ========================================================================== */

/* Shared terrazzo background token (newsletter + footer + future consumers).
   Filename matches newsletter.php line 32. */
:root {
  --vico20-terrazzo-bg: url("assets/images/homepage/simple-white-stone-wall-background.webp");
}

/* (1) Hero quote larger — D-02 (~25% step up). */
.vico20-hero__quote {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
}

/* (3) Story section — left-anchored layout with scrim — D-07, D-09. */
.vico20-story {
  background-size: cover;
  background-position: center center;
}
.vico20-story__overlay {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.vico20-story__content {
  width: min(55%, 40rem);
  margin: 0;
  margin-inline-start: max(var(--vico20-space-lg), calc((100vw - var(--vico20-max-width)) / 2 + var(--vico20-space-md)));
  padding: var(--vico20-space-2xl) var(--vico20-space-xl) var(--vico20-space-2xl) 0;
  text-align: left;
}
.vico20-story__intro {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.4;
  color: #ffffff;
  margin: 0 0 var(--vico20-space-md) 0;
}
.vico20-story__body {
  font-family: var(--vico20-font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  color: #ffffff;
  margin: 0 0 var(--vico20-space-lg) 0;
}

/* (4) Category section title row — full-width, never mirrors — D-12. */
.vico20-category-section__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--vico20-space-xl);
  width: 100%;
}
.vico20-category-section--mirror .vico20-category-section__title-row {
  flex-direction: row;
}
.vico20-category-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--vico20-space-sm);
}

/* (5) Category quicklink grid — gutters + container — D-14, D-15. */
.vico20-quicklinks > .vico20-container {
  padding-inline: var(--vico20-space-lg);
}
.vico20-quicklinks__grid {
  gap: var(--vico20-space-md);
}

/* (6) Global button vertical alignment — D-16 (Phase 8.3: + justify-content, line-height). */
.vico20-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vico20-space-sm);
  line-height: 1;
}
a.vico20-collections-banner__btn.vico20-btn {
  align-items: baseline;
}

/* (7) Collezioni background position — D-17. */
.vico20-collections-banner {
  background-position: center 55%;
}

/* (8) Collezioni triangular side accents — D-18 (clip-path technique). */
.vico20-collections-banner__title--decorated::before,
.vico20-collections-banner__title--decorated::after {
  content: "";
  display: block;
  width: 170px;
  height: 2px;
  background-color: #ffffff;
  flex-shrink: 0;
}
.vico20-collections-banner__title--decorated::before {
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}
.vico20-collections-banner__title--decorated::after {
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

/* (9) Newsletter — translucent warm-white overlay — D-22. */
.vico20-newsletter {
  position: relative;
}
.vico20-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 1;
}
.vico20-newsletter__inner {
  position: relative;
  z-index: 2;
}

/* (10) Footer — dark terrazzo background — D-23, D-24. */
.vico20-footer {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    var(--vico20-terrazzo-bg);
  background-size: cover;
  background-position: center center;
  color: #f5f1ea;
}
.vico20-footer__heading,
.vico20-footer__logo-text,
.vico20-footer__copyright {
  color: #f5f1ea;
}
.vico20-footer__links li a {
  color: #e8e2d6;
}
.vico20-footer__links li a:hover {
  color: #ffffff;
}

/* "Gestisci cookie": a button (opens the Complianz banner) that looks like the footer links. */
.vico20-footer__links .vico20-footer__cookie-btn {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.8;
  text-align: left;
  color: #e8e2d6;
  cursor: pointer;
}

.vico20-footer__links .vico20-footer__cookie-btn:hover {
  color: #ffffff;
}

.vico20-footer__links .vico20-footer__cookie-btn:focus-visible {
  outline: 2px solid var(--vico20-color-gold);
  outline-offset: 2px;
}

/* (11) Animated arrow — global pattern w/ reduced-motion guard — D-19, D-21. */
.vico20-btn__arrow,
.vico20-category-section__arrow {
  transition: transform 200ms ease;
  will-change: transform;
}
.vico20-btn:hover .vico20-btn__arrow,
.vico20-btn:focus-visible .vico20-btn__arrow,
.vico20-category-section__link:hover .vico20-category-section__arrow,
.vico20-category-section__link:focus-visible .vico20-category-section__arrow {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .vico20-btn__arrow,
  .vico20-category-section__arrow {
    transition: none;
  }
  .vico20-btn:hover .vico20-btn__arrow,
  .vico20-btn:focus-visible .vico20-btn__arrow,
  .vico20-category-section__link:hover .vico20-category-section__arrow,
  .vico20-category-section__link:focus-visible .vico20-category-section__arrow {
    transform: none;
  }
}

/* (2) Favorites title — Lato Light — D-03 (approved: kit bip1msh exposes weight 300). */
.vico20-favorites__title {
  font-family: "lato", sans-serif;
  font-weight: 300;
}

/* ==========================================================================
   PHASE 8 — MISSING HOMEPAGE SECTIONS (HP-01..04)
   ========================================================================== */

/* --------------------------------------------------------------------------
   REGALI SECTION (HP-02) — D-08..D-13
   -------------------------------------------------------------------------- */

.vico20-regali {
  padding: var(--vico20-space-3xl) 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Dark veil over the terrazzo background so the white title reads (v1.3.15). */
.vico20-regali::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.vico20-regali__inner {
  position: relative;
  z-index: 1;
}

.vico20-regali__title {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  text-transform: uppercase;
  text-align: left;
  margin: 0 0 var(--vico20-space-xl) 0;
  color: #fff;
}

.vico20-regali__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vico20-space-lg);
}

@media (max-width: 1023px) {
  .vico20-regali__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .vico20-regali {
    padding: var(--vico20-space-xl) 0;
  }
  .vico20-regali__grid {
    display: flex;
    gap: var(--vico20-space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--vico20-space-md);
  }
  .vico20-regali__grid::-webkit-scrollbar {
    display: none;
  }
  .vico20-regali__grid > .vico20-product-card {
    scroll-snap-align: start;
    flex: 0 0 75%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   RACCONTI SECTION (HP-03) — D-14..D-20
   -------------------------------------------------------------------------- */

.vico20-racconti {
  padding: var(--vico20-space-3xl) 0;
  background-color: var(--vico20-color-white);
}

.vico20-racconti__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vico20-space-lg);
  margin-bottom: var(--vico20-space-xl);
}

.vico20-racconti__title {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  letter-spacing: 2px;
  margin: 0;
  color: #2c2c2c;
}

.vico20-racconti__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2c2c2c;
  text-decoration: none;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm, 14px);
  letter-spacing: 1px;
}

.vico20-racconti__arrow {
  width: 12px;
  height: 16px;
  flex-shrink: 0;
}

.vico20-racconti__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vico20-space-lg);
}

.vico20-racconti__card {
  display: flex;
  flex-direction: column;
  gap: var(--vico20-space-md);
  text-decoration: none;
  color: #2c2c2c;
}

.vico20-racconti__card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--vico20-color-beige);
}

.vico20-racconti__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vico20-racconti__card-title {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  font-size: var(--vico20-text-md, 18px);
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}

.vico20-racconti__card-excerpt {
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm, 14px);
  line-height: 1.5;
  margin: 0;
  color: #555;
}

@media (max-width: 1023px) {
  .vico20-racconti__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .vico20-racconti__grid {
    grid-template-columns: 1fr;
  }
  .vico20-racconti__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vico20-space-sm);
  }
}

/* --------------------------------------------------------------------------
   LOOKBOOK SECTION (HP-04) — D-21..D-25
   -------------------------------------------------------------------------- */

.vico20-lookbook {
  padding: var(--vico20-space-3xl) 0;
  background-color: var(--vico20-color-white);
}

.vico20-lookbook__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vico20-space-lg);
  margin-bottom: var(--vico20-space-xl);
}

.vico20-lookbook__title {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--vico20-text-lg);
  font-weight: 400;
  letter-spacing: 2px;
  margin: 0;
  color: #2c2c2c;
}

.vico20-lookbook__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2c2c2c;
  text-decoration: none;
  font-family: var(--vico20-font-sans);
  font-size: var(--vico20-text-sm, 14px);
  letter-spacing: 1px;
}

.vico20-lookbook__arrow {
  width: 12px;
  height: 16px;
  flex-shrink: 0;
}

.vico20-lookbook__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--vico20-space-md);
}

.vico20-lookbook__placeholder {
  aspect-ratio: 1 / 1;
  background-color: var(--vico20-color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8a994;
}

.vico20-lookbook__placeholder-icon {
  width: 32px;
  height: 32px;
}

@media (max-width: 1023px) {
  .vico20-lookbook__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .vico20-lookbook__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .vico20-lookbook__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vico20-space-sm);
  }
}

/* --------------------------------------------------------------------------
   LOOKBOOK — Smash Balloon Instagram feed restyled as the lookbook grid.
   Feed 1 settings (20 posts, 4 cols, header, buttons) are left untouched in
   the plugin; everything is overridden here, scoped to the lookbook section.
   The plugin sets an inline gap on #sbi_images and an inline height on
   .sbi_photo via JS, hence the !important on those two properties.
   -------------------------------------------------------------------------- */

.vico20-lookbook .sb_instagram_header,
.vico20-lookbook #sb_instagram.vico20-lookbook__feed #sbi_load,
.vico20-lookbook #sbi_mod_error {
  display: none;
}

.vico20-lookbook #sb_instagram.vico20-lookbook__feed {
  padding: 0;
}

.vico20-lookbook #sb_instagram.vico20-lookbook__feed #sbi_images {
  grid-template-columns: repeat(6, 1fr);
  gap: var(--vico20-space-md) !important;
  padding: 0;
}

.vico20-lookbook #sb_instagram.vico20-lookbook__feed #sbi_images .sbi_item:nth-child(n+7) {
  display: none;
}

.vico20-lookbook #sb_instagram.vico20-lookbook__feed .sbi_photo {
  aspect-ratio: 1 / 1;
  height: auto !important;
  background-color: var(--vico20-color-beige);
  overflow: hidden;
}

.vico20-lookbook #sb_instagram.vico20-lookbook__feed .sbi_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .vico20-lookbook #sb_instagram.vico20-lookbook__feed #sbi_images {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .vico20-lookbook #sb_instagram.vico20-lookbook__feed #sbi_images {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   ANIMATED ARROW — extend global rule to Racconti + Lookbook links (HP-03/04)
   The base rule lives ~line 3209. This appends the new selectors to the
   same transition + hover-translate + reduced-motion pattern.
   -------------------------------------------------------------------------- */

.vico20-racconti__arrow,
.vico20-lookbook__arrow {
  transition: transform 200ms ease;
  will-change: transform;
}
.vico20-racconti__link:hover .vico20-racconti__arrow,
.vico20-racconti__link:focus-visible .vico20-racconti__arrow,
.vico20-lookbook__link:hover .vico20-lookbook__arrow,
.vico20-lookbook__link:focus-visible .vico20-lookbook__arrow {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .vico20-racconti__arrow,
  .vico20-lookbook__arrow {
    transition: none;
  }
  .vico20-racconti__link:hover .vico20-racconti__arrow,
  .vico20-racconti__link:focus-visible .vico20-racconti__arrow,
  .vico20-lookbook__link:hover .vico20-lookbook__arrow,
  .vico20-lookbook__link:focus-visible .vico20-lookbook__arrow {
    transform: none;
  }
}

/* ==========================================================================
   PHASE 8.3 — UAT FIXES (gaps 1, 2, 3)
   ========================================================================== */

/* Gap 2b — product card flex column so ACQUISTA pins to the bottom edge
   and rows align even when titles wrap to 2 lines. */
.vico20-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vico20-product-card__info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
a.vico20-product-card__button.vico20-btn {
  margin-top: 15px;
}
.vico20-product-card__button {
  margin-top: auto;
  align-self: center;
}

/* Gap 3 — global arrow SVG size override (8px wide on every homepage link/button arrow). */
.vico20-btn__arrow,
.vico20-category-section__arrow,
.vico20-racconti__arrow,
.vico20-lookbook__arrow {
  width: 8px;
  height: auto;
  display: block;
}

/* Gap 1 — favorites carousel nav buttons (mouse-only desktop affordance). */
.vico20-favorites__viewport {
  position: relative;
}
.vico20-favorites__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: none;
  background: none;
  color: var(--vico20-color-text);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 200ms ease;
}
.vico20-favorites__nav::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--vico20-color-text);
  border-bottom: 2px solid var(--vico20-color-text);
}
.vico20-favorites__nav--prev::before {
  transform: rotate(135deg);
}
.vico20-favorites__nav--next::before {
  transform: rotate(-45deg);
}
.vico20-favorites__nav--prev {
  left: -38px;
  top: 90px;
}
.vico20-favorites__nav--next {
  right: -38px;
  top: 90px;
}
.vico20-favorites__nav:hover,
.vico20-favorites__nav:focus-visible {
  opacity: 0.6;
  outline: none;
}
.vico20-favorites__nav[disabled] {
  opacity: 0.3;
  cursor: default;
}
@media (max-width: 767px) {
  .vico20-favorites__nav {
    display: none; /* mobile uses native touch scroll-snap */
  }
}

/* ==========================================================================
   Shop Layout — Sidebar + Grid
   ========================================================================== */

.vico20-shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0;
}

@media (max-width: 1023px) {
  .vico20-shop-layout {
    grid-template-columns: 1fr;
  }
}

/* Sidebar Filters */
.vico20-sidebar-filters__toggle {
  display: none;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: 1px solid var(--vico20-color-text);
  font-family: "lato", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}

@media (max-width: 1023px) {
  .vico20-sidebar-filters__toggle {
    display: block;
  }
  .vico20-sidebar-filters__panel {
    display: none;
  }
  .vico20-sidebar-filters__panel--open {
    display: block;
  }
}

.vico20-sidebar-filters__group {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.vico20-sidebar-filters__heading {
  font-family: "lato", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--vico20-color-text);
}

.vico20-sidebar-filters__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-family: "lato", sans-serif;
  font-size: 0.9rem;
  color: var(--vico20-color-text);
  cursor: pointer;
}

.vico20-sidebar-filters__count {
  color: var(--vico20-color-text-light);
  font-size: 0.8rem;
}

.vico20-sidebar-filters__checkbox {
  accent-color: var(--vico20-color-gold);
}

/* --------------------------------------------------------------------------
   Regali Page (.vico20-regali-page)
   -------------------------------------------------------------------------- */

.vico20-regali-page {
  padding: var(--vico20-space-3xl) 0;
}

.vico20-regali-page__title {
  font-family: var(--vico20-font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-md);
}

.vico20-regali-page__intro {
  font-family: var(--vico20-font-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--vico20-color-text);
  max-width: 600px;
  margin-bottom: var(--vico20-space-3xl);
}

/* No occasion has products: the page padding alone closes the page */
.vico20-regali-page--empty .vico20-regali-page__intro {
  margin-bottom: 0;
}

.vico20-regali-section {
  margin-bottom: var(--vico20-space-3xl);
}

.vico20-regali-section__heading {
  font-family: var(--vico20-font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  font-style: italic;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-xl);
  padding-bottom: var(--vico20-space-sm);
  border-bottom: 1px solid var(--vico20-color-border);
}

@media (max-width: 1023px) {
  .vico20-regali-section .vico20-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .vico20-regali-section .vico20-product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Load More Button */
.vico20-load-more {
  text-align: center;
  padding: 2rem 0 3rem;
}

.vico20-load-more__button {
  font-family: var(--vico20-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  background: transparent;
  border: 1px solid var(--vico20-color-text);
  border-radius: 50px;
  padding: 14px 40px;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}

.vico20-load-more__button:hover {
  background: var(--vico20-color-text);
  color: var(--vico20-color-white);
}

.vico20-load-more__button:hover .vico20-btn__arrow {
  filter: brightness(0) invert(1);
}

/* Shop Hero */
.vico20-shop-hero {
  position: relative;
  width: 100%;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--vico20-color-white);
}

.vico20-shop-hero--no-image {
  background-color: var(--vico20-color-cream);
  color: var(--vico20-color-text);
  min-height: 180px;
}

.vico20-shop-hero--no-image .vico20-shop-hero__title {
  color: var(--vico20-color-text);
}

.vico20-shop-hero--no-image .vico20-shop-hero__description {
  color: var(--vico20-color-text-medium);
}

.vico20-shop-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.vico20-shop-hero__content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 2rem;
}

.vico20-shop-hero__title {
  font-family: var(--vico20-font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  color: var(--vico20-color-white);
}

.vico20-shop-hero__description {
  font-family: "lato", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--vico20-color-white);
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT
   ========================================================================== */

.woocommerce-account .vico20-editorial-content__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--vico20-space-2xl) var(--vico20-space-lg);
}

.woocommerce-account .woocommerce {
  display: flex;
  gap: var(--vico20-space-2xl);
}

/* Navigation sidebar */
.woocommerce-MyAccount-navigation {
  flex-shrink: 0;
  width: 240px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px;
  font-family: var(--vico20-font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vico20-color-text-medium);
  text-decoration: none;
  border-bottom: 1px solid #e8e8e8;
  transition: color 200ms ease, background 200ms ease;
}

.woocommerce-MyAccount-navigation ul li:first-child a {
  border-top: 1px solid #e8e8e8;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--vico20-color-text);
  background: var(--vico20-color-beige);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  color: var(--vico20-color-text);
  font-weight: 600;
  background: var(--vico20-color-grey-light);
}

.woocommerce-MyAccount-navigation ul li.is-active a:hover,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a:hover {
  background: var(--vico20-color-grey-light);
}

/* Main content area */
.woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
}

.woocommerce-MyAccount-content > p {
  font-family: var(--vico20-font-sans);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-md);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--vico20-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--vico20-color-text);
  margin-bottom: var(--vico20-space-lg);
  margin-top: var(--vico20-space-xl);
}

.woocommerce-MyAccount-content h2:first-child,
.woocommerce-MyAccount-content h3:first-child {
  margin-top: 0;
}

/* Forms — edit account, edit address */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-address-fields {
  max-width: 560px;
}

.woocommerce-MyAccount-content .form-row {
  margin-bottom: var(--vico20-space-md);
}

.woocommerce-MyAccount-content .form-row label {
  display: block;
  font-family: var(--vico20-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  margin-bottom: 6px;
}

.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--vico20-font-sans);
  font-size: 0.9rem;
  color: var(--vico20-color-text);
  border: 1px solid #d0ccc7;
  border-radius: 0;
  background: #fff;
  transition: border-color 200ms ease;
}

.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-MyAccount-content .form-row textarea:focus {
  outline: none;
  border-color: var(--vico20-color-text);
}

.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vico20-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vico20-color-white);
  background: var(--vico20-color-text);
  border: 1px solid var(--vico20-color-text);
  border-radius: 50px;
  padding: 14px 36px;
  cursor: pointer;
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease;
  margin-top: var(--vico20-space-md);
}

.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .button:hover {
  background: transparent;
  color: var(--vico20-color-text);
}

/* Orders table */
.woocommerce-MyAccount-content .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vico20-font-sans);
  font-size: 0.85rem;
}

.woocommerce-MyAccount-content .woocommerce-orders-table th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vico20-color-text-medium);
  padding: 12px 16px;
  border-bottom: 2px solid #e8e8e8;
  text-align: left;
}

.woocommerce-MyAccount-content .woocommerce-orders-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0ece8;
  color: var(--vico20-color-text);
  vertical-align: middle;
}

.woocommerce-MyAccount-content .woocommerce-orders-table td .button {
  font-size: 0.65rem;
  padding: 8px 20px;
  margin-top: 0;
}

/* Address cards */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: flex;
  align-items: flex-start;
  gap: var(--vico20-space-xl);
}

/* Remove WC clearfix pseudo-elements so they are not flex items */
.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after {
  content: none;
  display: none;
}

/* Override WC .col2-set .col-1/.col-2 float + 48% width */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-content .woocommerce-Address header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vico20-space-sm);
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: var(--vico20-space-sm);
  margin-bottom: var(--vico20-space-md);
}

.woocommerce-MyAccount-content .woocommerce-Address header h2,
.woocommerce-MyAccount-content .woocommerce-Address header h3 {
  margin: 0;
  font-family: var(--vico20-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vico20-color-text);
  text-transform: none;
  letter-spacing: normal;
}

.woocommerce-MyAccount-content .woocommerce-Address header .edit {
  font-family: var(--vico20-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vico20-color-text-medium);
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}

.woocommerce-MyAccount-content .woocommerce-Address header .edit:hover {
  color: var(--vico20-color-text);
}

.woocommerce-MyAccount-content .woocommerce-Address address {
  font-family: var(--vico20-font-sans);
  font-size: 0.9rem;
  line-height: 1.8;
  font-style: normal;
  color: var(--vico20-color-text);
}

/* Login / Register form */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--vico20-space-xl);
}

.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
  margin-bottom: var(--vico20-space-md);
}

.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
  display: block;
  font-family: var(--vico20-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vico20-color-text);
  margin-bottom: 6px;
}

.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="password"],
.woocommerce-account .woocommerce-form-login input[type="email"],
.woocommerce-account .woocommerce-form-register input[type="text"],
.woocommerce-account .woocommerce-form-register input[type="password"],
.woocommerce-account .woocommerce-form-register input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--vico20-font-sans);
  font-size: 0.9rem;
  border: 1px solid #d0ccc7;
  border-radius: 0;
  background: #fff;
}

.woocommerce-account .woocommerce-form-login input:focus,
.woocommerce-account .woocommerce-form-register input:focus {
  outline: none;
  border-color: var(--vico20-color-text);
}

.woocommerce-account .woocommerce-form-login button[type="submit"],
.woocommerce-account .woocommerce-form-register button[type="submit"] {
  width: 100%;
  justify-content: center;
}

/* Notices */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
  font-family: var(--vico20-font-sans);
  font-size: 0.85rem;
  padding: 14px 20px 14px 3.5em;
  margin-bottom: var(--vico20-space-lg);
  border-radius: 0;
}

/* Responsive */
@media (max-width: 767px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
    gap: var(--vico20-space-lg);
  }

  .woocommerce-MyAccount-navigation {
    width: 100%;
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }

  .woocommerce-MyAccount-navigation ul li a {
    padding: 10px 14px;
    font-size: 0.7rem;
    border-bottom: none;
    border-right: 1px solid #e8e8e8;
  }

  .woocommerce-MyAccount-navigation ul li:first-child a {
    border-top: none;
  }

  .woocommerce-MyAccount-content .woocommerce-Addresses {
    flex-direction: column;
    gap: var(--vico20-space-lg);
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   My Account — Logged-out (login + register two-column layout)
   -------------------------------------------------------------------------- */

/* Center the two-column login/register wrapper. Scoped to :not(.logged-in)
   so logged-in dashboard layout at line 4807 is unaffected. */
.woocommerce-account:not(.logged-in) #customer_login {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: var(--vico20-space-2xl);
  align-items: flex-start;
}

.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
  flex: 1 1 0;
  min-width: 0;
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-ResetPassword {
  max-width: 900px;
  margin: 0 auto;
}

/* Mobile — stack the two columns full-width, preserve centered container. */
@media (max-width: 767px) {
  .woocommerce-account:not(.logged-in) #customer_login {
    flex-direction: column;
    gap: var(--vico20-space-xl);
    padding-inline: var(--vico20-space-md);
  }

  .woocommerce-account:not(.logged-in) #customer_login .u-column1,
  .woocommerce-account:not(.logged-in) #customer_login .u-column2 {
    width: 100%;
  }
}

/* ==========================================================================
   GRAVITY FORMS — Contatti page styling
   ========================================================================== */

.gform_wrapper.gravity-theme {
  --gf-ctrl-border-color: #c4a265;
  --gf-ctrl-border-color-focus: #b8860b;
  --gf-ctrl-radius: 0;
}

.gform_wrapper.gravity-theme .gfield_label {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333;
}

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme textarea {
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  border: 1px solid #c4a265;
  padding: 12px 16px;
  background: #fafaf8;
  transition: border-color 0.2s ease;
}

.gform_wrapper.gravity-theme input[type="text"]:focus,
.gform_wrapper.gravity-theme input[type="email"]:focus,
.gform_wrapper.gravity-theme textarea:focus {
  border-color: #b8860b;
  outline: none;
  box-shadow: 0 0 0 1px #b8860b;
}

.gform_wrapper.gravity-theme textarea {
  min-height: 150px;
  resize: vertical;
}

.gform_wrapper.gravity-theme .gform_button,
.gform_wrapper.gravity-theme input[type="submit"],
.gform_wrapper.gform-theme .gform_button,
.gform_wrapper.gform-theme input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--vico20-space-sm) !important;
  font-family: var(--vico20-font-sans) !important;
  font-size: var(--vico20-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--vico20-color-text) !important;
  border: 1px solid var(--vico20-color-text) !important;
  border-radius: 50px !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  transition:
    background 200ms ease,
    color 200ms ease !important;
}

.gform_wrapper.gravity-theme .gform_button:hover,
.gform_wrapper.gravity-theme input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_button:hover,
.gform_wrapper.gform-theme input[type="submit"]:hover {
  background: var(--vico20-color-text) !important;
  color: var(--vico20-color-white) !important;
}

.gform_wrapper.gravity-theme .gform_confirmation_message {
  font-family: "Lato", sans-serif;
  color: #333;
  padding: 20px;
  background: #f7f7f7;
  border-left: 3px solid #c4a265;
}

/* --------------------------------------------------------------------------
   Search results (search.php) — non-product results list
   -------------------------------------------------------------------------- */

.vico20-search-results {
  list-style: none;
  margin: var(--vico20-space-xl) 0 0;
  padding: 0;
}

.vico20-search-results li {
  padding-block: var(--vico20-space-md);
  border-bottom: 1px solid var(--vico20-color-border);
}

.vico20-search-results h2 {
  font-family: var(--vico20-font-serif);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 var(--vico20-space-xs);
}

.vico20-search-results a {
  color: var(--vico20-color-text);
  text-decoration: none;
}

.vico20-search-results a:hover {
  color: var(--vico20-color-text-medium);
}

/* ==========================================================================
   Product card — two-line name, price + button aligned on every grid row
   Shared by every theme card (home, shop + "Carica altri", categories,
   collections, related, Regali, search) and mirrored on the block cart
   cross-sells ("Potrebbe interessarti") and the YITH wishlist table.
   ========================================================================== */

/* Name: at most two lines with ellipsis, fixed two-line height so the
   blocks below start at the same height whether the name takes 1 or 2 lines. */
.vico20-product-card__name,
.wc-block-cart .wc-block-product .wp-block-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  height: calc(2 * 1.2em);
}

/* Block cross-sells use Lato, whose descenders sit lower than Caslon's: add a
   fraction of height (not line-height) so the second line's "p"/"g" aren't
   clipped. The inner link is inline-block in WooCommerce, which the clamp
   can't break into lines — make it inline so the ellipsis shows. */
.wc-block-cart .wc-block-product .wp-block-post-title {
  height: calc(2 * 1.2em + 0.15em);
}

.wc-block-cart .wc-block-product .wp-block-post-title a {
  display: inline;
}

/* Wishlist is a table: clamp only, no fixed height (rows align on their own). */
.woocommerce table.wishlist_table .product-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* "€ 181,78 IVA inclusa" stays on one line. */
.vico20-product-card__price,
.wc-block-cart .wc-block-product .wc-block-components-product-price,
.woocommerce table.wishlist_table .product-price {
  white-space: nowrap;
}

/* Safety net: price + button pinned to the bottom of the card. The card and
   its __info are already flex columns (Phase 8.3 block above). */
.vico20-product-card__buy {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.wc-block-cart .wc-block-product {
  display: flex;
  flex-direction: column;
}

.wc-block-cart .wc-block-product .wp-block-woocommerce-product-price {
  margin-top: auto;
}

/* ==========================================================================
   Order received ("Ordine ricevuto", classic thankyou.php)
   WooCommerce stacks its blocks with no gap: space the thank-you line from the
   order summary, and each heading from the table or box it introduces.
   ========================================================================== */

.woocommerce-order .woocommerce-thankyou-order-received {
  margin-bottom: var(--vico20-space-lg);
}

.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
  margin-bottom: var(--vico20-space-md);
}