@import "tailwindcss" theme(static);
@source "../views/";
@source "../../app/";

@import './font.css';
@import './animate.css';
@import './wp.css';

@import './header.css';

/* Woocommerce */
@import './woocommerce/app.css';

@import "../../public_html/wp/wp-includes/css/dist/block-library/common.css";
@import "../../public_html/wp/wp-includes/blocks/cover/style.css";
@import "../../public_html/wp/wp-includes/blocks/group/style.css";
@import "../../public_html/wp/wp-includes/blocks/button/style.css";
@import "../../public_html/wp/wp-includes/blocks/columns/style.css";

@import 'intl-tel-input/build/css/intlTelInput.css';

@font-face {
    font-family: "Cormorant Garamond";
    src: url('../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-stretch: normal 100%;
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-stretch: normal 100%;
    font-display: swap;
}

@layer base {
  .e-content a {
    @apply text-blue-600 hover:underline;
  }
}

@theme {
  --color-transparent: transparent; /* Transparent */
	--color-white: #FFFFFF; /* White */
	--color-black: #000000; /* Black */

  --color-pearl: #E6E1D8; /* Primary */
  --color-beige: #B5AA95;
  --color-latte: #F2EFEA;
  --color-carbon: #1B1B19;

  --color-muted: hsl(37, 15%, 85%);
  --color-muted-foreground: hsl(35, 10%, 45%);

  --text-2xs: clamp(0.75rem,  calc(0.7rem + 0.30vw), 0.875rem);   /* 12–14px → 14px */
  --text-xs:  clamp(0.875rem, calc(0.8rem + 0.35vw), 1rem);       /* 14–16px → 16px */
  --text-sm:  clamp(1rem,     calc(0.9rem + 0.45vw), 1.125rem);   /* 16–18px → 18px */
  --text-md:  clamp(1.25rem,  calc(1rem + 0.65vw),   1.375rem);   /* 20–22px → 22px */
  --text-base: clamp(1.25rem,  calc(1rem + 0.65vw),   1.375rem);   /* 20–22px → 22px */
  
  --text-lg:  clamp(1.625rem, calc(1rem + 0.95vw),   1.875rem);   /* 26–30px → 28px */
  --text-xl:  clamp(1.875rem, calc(1rem + 1.15vw),   2.25rem);    /* 30–36px → 32px */
  --text-2xl: clamp(2.125rem, calc(1rem + 1.35vw),   2.75rem);    /* 34–44px → 36px */
  --text-3xl: clamp(2.5rem,   calc(1rem + 1.75vw),   3.125rem);   /* 40–50px → 44px */

  --font-family-primary: "Cormorant Garamond", serif;
  --font-family-secondary: Lato, sans-serif;
}

:root {
	--primary-color: var(--color-pearl);
	--text-color-primary: var(--color-carbon);

  --swiper-navigation-color: var(--color-carbon);
  --swiper-navigation-size: auto !important;
}

body {
	padding: 0 !important;
  @apply bg-pearl text-carbon;
}

x-cloak {
	display: none;
}

.swiper-container, .swiper-container-related-products {
	overflow-x: hidden;
}

section:has([data-swiper]) {
  @apply overflow-hidden;
}

html.is-scroll-locked {
  overscroll-behavior: none;
}

html {
  scrollbar-gutter: stable;
}

ul li::marker {
  color: #CFC4B5;
  font-size: 1.5rem;
}

/* ------------------------------------------------------------------
   Base: NORMALIZZA tutte le frecce Swiper
------------------------------------------------------------------ */
.swiper-button-next::after,
.swiper-button-prev::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;

  border-radius: 9999px;

  color: rgb(49 46 43);

  /* liquid glass */
  background:
    linear-gradient(to bottom,
      rgb(255 255 255 / 0.55),
      rgb(255 255 255 / 0.18) 35%,
      rgb(255 255 255 / 0.10)
    ),
    linear-gradient(135deg,
      rgb(255 255 255 / 0.18),
      rgb(255 255 255 / 0) 55%
    );

  border: 1px solid rgb(255 255 255 / 0.35);

  box-shadow:
    0 12px 28px rgb(0 0 0 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.45);

  transform: translateZ(0);
}

/* ------------------------------------------------------------------
   Backdrop filter (Chrome + Safari)
------------------------------------------------------------------ */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .swiper-button-next::after,
  .swiper-button-prev::after {
    -webkit-backdrop-filter: blur(8px) saturate(1) brightness(1);
    backdrop-filter: blur(8px) saturate(1) brightness(1);
  }
}