body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Crossfade and movement */
.nav-bar.main,
.nav-bar.collapsible {
  transition: opacity 200ms ease, transform 300ms ease, background-color 200ms ease, border-color 200ms ease;
  will-change: opacity, transform;
}

/* Start with collapsible hidden, main visible */
.nav-bar.main { opacity: 1; }
.nav-bar.collapsible { opacity: 0; transform: translateY(0%); }

/* Restyle near end of hero */
.nav-bar.collapsible.is-sooty {
  background-color: var(--sooty, #111);
  border-color: var(--sooty, #111);
}
  
  html { font-size: 1rem; }
  @media screen and (max-width:1600px) { html { font-size: calc(0.34318555008210183rem + 0.6568144499178982vw); } }
  @media screen and (max-width:991px) { html { font-size: 0.75rem; } }
  @media screen and (max-width:767px) { html { font-size: 0.65rem; } }

[hide-on-load] {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}
[hide-on-load].show {
  opacity: 1 !important;
}
/* ==============================
   FONT-FACE DECLARATIONS
============================== */
@font-face {
  font-family: 'Josefin Sans Bold';
  src: url('/wp-content/themes/studiograde-child/fonts/JosefinSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Josefin Sans Semibold';
  src: url('/wp-content/themes/studiograde-child/fonts/JosefinSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Josefin Sans Regular';
  src: url('/wp-content/themes/studiograde-child/fonts/JosefinSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: '01 Aeternus Nano Variable Vf';
  src: url('/wp-content/themes/studiograde-child/fonts/01-Aeternus-Nano-Variable-Vf.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Ad banner marquee active at ≤ 991px (Webflow tablet & smaller) */
.ad-banner { overflow: hidden; display: flex; }
.banner-smaller-breakpoint { will-change: transform; transform: translateX(100%); }

@media (max-width: 991px) {
  .banner-smaller-breakpoint {
    animation: banner-marquee 50s linear infinite;
  }
}

@keyframes banner-marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

/* Optional accessibility: disable animation when user prefers reduced motion */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .banner-smaller-breakpoint { animation: none; transform: translateX(0); }
}

/* ==============================
   DROPDOWN MENU & NAVIGATION
============================== */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
body.menu-open {
  overflow: hidden;
  touch-action: none;
}
.dropdown-menu {
  top: 0;
  right: 0;
  width: 100vw;
  max-height: 100vh;
  min-height: 100svh;
  position: fixed;
  will-change: transform;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 9999;
}
.dropdown-menu.active {
  pointer-events: auto;
}
[dropdown-animate] {
  opacity: 0;
  transform: translateX(-40px);
}
.dropdown-shop-all {
  overflow: hidden;
  transform-origin: top;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.drop-down-row {
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 0.3s ease;
}
.drop-down-row.fade-out {
  opacity: 0;
}
.nav-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sooty);
  opacity: 0;
  display: none;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.nav-bg-overlay.visible {
  display: flex;
  opacity: 1;
}
/* ==============================
   CUSTOM COMPONENTS
============================== */
.accordion-content-wrapper.few-items {
  display: flex;
  flex-direction: column;
  gap: 3vh;
}
.close-menu-icon {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.image-feature {
  transform: scale(1);
}

/* Add this to your CSS file for optimized image loading */

/* Smooth image fade-in on load */
.item-image,
.hero-section-background-image,
.category-card img {
  transition: opacity 0.3s ease-in, filter 0.3s ease-in;
}

/* Loading state for images */
.item-image.is-loading {
  opacity: 0;
  filter: blur(10px);
}

/* Aspect ratio containers to prevent layout shift */
.item-image-container.blog {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.5 / 2.8;
}

.item-image-container.blog::before {
  content: '';
  display: block;
  padding-top: 66.67%; /* 3:2 aspect ratio */
}

.item-image-container.blog .item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero images - prevent layout shift */
.hero-section {
  position: relative;
}

.hero-section-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product card images */
.item-image-container.blog.space-after {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mallow-root);
  aspect-ratio: 3 / 3.2;
}

.item-image-container.blog.space-after .item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lazy loading blur effect */
img[loading="lazy"]:not([src]) {
  filter: blur(10px);
  opacity: 0;
}

/* Instagram images */
.instagram-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.instagram-image .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Category images */
.item-link.full-size .item-image-container {
  position: relative;
  overflow: hidden;
}

.item-link.full-size .item-image-container::before {
  content: '';
  display: block;
  padding-top: 75%; /* 4:3 aspect ratio */
}

.item-link.full-size .item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prevent cumulative layout shift (CLS) */
img {
  content-visibility: auto;
}

/* Progressive image loading */
@supports (content-visibility: auto) {
  img {
    content-visibility: auto;
  }
}
/* ==============================
   RESPONSIVE — TABLET PORTRAIT ONLY
============================== */
@media (min-width: 1024px) and (max-width: 1440px) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
  .hero-slider-container,
  .slider-instance,
  .hero-section {
    max-height: 40vh;
    min-height: 40svh;
  }
  .hero-section-container {
    margin-top: 1vh !important;
  }
  .dropdown-shop-all {
    transform: translateY(4.2vh) !important;
  }
  .main-headline {
    font-size: 6vh;
  }
  .item-name,
  .item-name.smaller {
    font-size: 2.5vh;
  }
  .nav-links {
    z-index: 2;
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }
  .text-field.newsletter-version {
    width: auto;
  }
  .round-button {
    width: 6vmin;
    height: 6vmin;
  }
  .arrow-icon {
    width: 1.7vmin;
    height: 1.7vmin;
  }
  body {
    font-size: 1.5vw;
  }
  .suscribe {
    grid-column-gap: 1vh;
  }
  .underline-container {
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
}
/* ==============================
   RESPONSIVE — TABLET LANDSCAPE ONLY
============================== */
@media (min-width: 1024px) and (max-width: 1440px) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
  .dropdown-shop-all {
    transform: translateY(8.5vh) !important;
  }
  .logo-back {
    width: 15vh;
  }
  .navbar-icon-right,
  .social-link,
  .arrow-icon {
    width: 2.2vh;
    height: 2.2vh;
  }
  .plus-icon-container,
  .product-colour-outline {
   width: 3.2vh;
    height: 3.2vh; 
  }
  .instagram-image {
    width: 30vh;
  }
  .item-name,
  .item-name.smaller {
  font-size: 3.5vh !important;
  }
  .item-name.smaller.left {
    font-size: 4.2vh !important;
  }
  .item-name.footer-version {
    font-size: 3.5vh !important;
  }
  .body-copy {
    font-size: 2vh !important;
  }
  .review-title {
    font-size: 5vh;
  }
  .review-text {
    width: 42%;
    font-size: 2.8vh;
  }
  .sub-title {
    font-size: 2.6vh !important;
  }
  .sub-title.smaller {
    font-size: 1.5vh !important;
  }
  .sub-title.smaller.space-before {
    margin-top: 2vh;
    font-size: 2vh !important;
  }
  .instagram-follow {
    font-size: 1.6vh;
    letter-spacing: 0.35vh;
  }
  .nav-bar {
    padding-top: 3vh;
    padding-bottom: 3vh;
  }
  .nav-link,
  .underline-container.smaller {
    font-size: 1.3vh;
  }
  .article-date {
    margin-bottom: 1.2vh;
    font-size: 1.5vh;
  }
  .drop-down-link,
  .feature-dropdown-text,
  .button-text {
    font-size: 1.5vh;
    letter-spacing: 0.15vh;
  }
  .underline-button {
    font-size: 3vh;
  }  
  .main-headline {
    font-size: 10vh;
  }
  .main-headline.hero-version {
    font-size: 18vh;
  }
  .main-headline.banner {
    font-size: 4.5vh;
  }
  .main-headline.tighter-mobile-newsletter,
  .main-headline.tighter-mobile-newsletter.instagram-link {
    font-size: 8vh !important;
    margin-bottom: 1vh !important;
  }
  .category-text {
    font-size: 6.5vh;
  }
  .ad-banner {
    padding-top: 1vh;
    padding-bottom: 0.2vh;
  }
  .outlined-button-hero,
  .outlined-button {
    padding: 2.5vh 5vh;
  }
  .submit-button,
  .standard-button {
    padding-top: 2.5vh;
    padding-bottom: 2.5vh;
  }
  .text-field {
    padding-top: 3.2vh;
    padding-bottom: 3.3vh;
    font-size: 2.2vh;
  }
  .small-cap-title {
    font-size: 1.2vh;
    letter-spacing: 0.2vh;
  }
  .feature-banner {
    height: 40vh;
  }
  .item-link.french-puce.left {
    padding: 1.1vh !important;
    grid-column-gap: 2vh !important;
    grid-row-gap: 2vh !important;
  }
  [items-container] {
    grid-column-gap: 2.2vh !important;
    grid-row-gap: 2.2vh !important;
  }
  .logo-footer {
    width: 23vh;
  }
  .underline-container,
  .underline-container.smaller {
    grid-column-gap: 0.6vh;
    grid-row-gap: 0.6vh;
    font-size: 1.4vh;
  }
  .underline-container.smaller.shop-all {
    font-size: 1vh;
  }
  .drop-down-row,
  .dropdown-feature-link {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }
  .round-button {
  width: 8vh !important;
  height: 8vh !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  }
  .text-field.newsletter-version {
    width: auto;
  }
  .round-button {
    width: 6vmin;
    height: 6vmin;
  }
  .arrow-icon {
    width: 2.3vmin;
    height: 2.3vmin;
  }
  .hero-section-container {
    margin-top: 5vh !important;
  }

  .nav-links {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }
}
/* ==============================
   RESPONSIVE — FOLDABLE PHONE PORTRAIT ONLY
============================== */  
@media (max-width: 344px) and (min-height: 882px) and (orientation: portrait) {
  .right-nav {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }
  .navbar-icon-right {
  width: 2.7vh;
  height: 2.7vh;
}
  .menu-bars {
  width: 4vh;
  height: 4vh;
}
  .logo-back {
  width: 17vh;
}
}

.horizontal-scroll-container {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
}
.selector {
  background-color: transparent;
  transition: background-color 0.3s ease;
  cursor: pointer;
  z-index: 2;
}
.selector.active {
  background-color: white;
}
.progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
}
.progress-fg {
  stroke: white;
  fill: none;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0s, opacity 0.3s ease;
  opacity: 1;
}
[animate-in] {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}
.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}
[fade-in] {
  opacity: 0;
  transform: translateY(5%);
  will-change: opacity, transform;
}
.items-container.blog {
  overflow-anchor: none;
  overflow-clip-margin: content-box;
  overflow-y: clip;
}
[truncate-text] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  word-break: break-word;
  line-break: loose;
  text-overflow: ellipsis;
}
.custom-toast {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5%);
  transition: all 0.3s ease;
  display: none;
}
.custom-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  display: flex;
}
.page-wrapper.toast-active {
  filter: blur(1vh);
  transition: filter 0.4s ease;
}
/* ===== DESKTOP ONLY STYLES ===== */
@media screen and (min-width: 991px) {
  [move-item] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }

  .slider-head {
    transition: transform 0.4s ease;
  }

  [next-button]:disabled,
  [previous-button]:disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
  }

  [move-item]:first-child {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }

  [fade-in-next] {
    opacity: 0;
    transform: translateY(3%);
    will-change: opacity, transform;
    visibility: hidden;
  }

  .fade-in-next-visible {
    opacity: 1 !important;
    transform: translateY(0%) !important;
    transition: opacity 1s ease, transform 1s ease;
  }

  /* Aspect ratio containers to prevent layout shift */
  .item-image-container.blog {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 3.2;
  }

  .dropdown-menu {
  top: -1vh !important;
  }
}