@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght,YOPQ@100..900,300&display=swap');

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */

:root {
  /* Colors */
  --white: hsl(0, 100%, 100%);
  --black: hsl(0, 0%, 0%);

  --grey-50: hsl(223, 64%, 98%);
  --grey-100: hsl(219, 35%, 92%);
  --grey-300: hsl(221, 22%, 81%);
  --grey-500: hsl(219, 9%, 45%);
  --grey-950: hsl(220, 13%, 13%);

  --orange-300: hsl(26, 100%, 71%);
  --orange-500: hsl(26, 100%, 55%);

  /* Spacing */
  --spacing-100: 0.5rem; /* 8px */
  --spacing-200: 1rem; /* 16px */
  --spacing-300: 1.5rem; /* 24px */
  --spacing-400: 2rem; /* 32px */
  --spacing-500: 2.5rem; /* 40px */
  --spacing-600: 3rem; /* 48px */
  --spacing-700: 3.5rem; /* 56px */
  --spacing-900: 4.5rem; /* 72px */
  --spacing-1000: 5rem; /* 80px */
  --spacing-1200: 6rem; /* 96px */
  --spacing-1300: 6.5rem; /* 104px */

  /* --- Brand & Interactions --- */
  --clr-primary: var(--orange-500); 
  --clr-primary-light: var(--orange-300); 

  /* --- Typography --- */
  --clr-text-heading: var(--grey-950);
  --clr-text-body: var(--grey-500);
  --clr-text-muted: var(--grey-300);
  --clr-text-inverse: var(--white);

  /* --- Surfaces & Layout --- */
  --clr-bg-main: var(--white); 
  --clr-bg-secondary: var(--grey-50);
  --clr-border: var(--grey-100);
  --clr-nav-toggle: var(--grey-500);

  /* --- Spécific --- */
  --clr-backdrop: hsl(0, 0%, 0%, 0.75);

  /* --- Other configs --- */
  --ff-sans: 'Kumbh Sans', sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;

  --gap-desktop: 5rem; /* Common target (80px) */
  --gap-mobile: 1.5rem; /* Minimum for the mobile text (24px) */

  --max-inline-size: 69.375rem; /* 1110px */

  --header-block-size: 4rem;

  /* Z-Index Layering */
  --z-overlay: 500;
  --z-menu: 1000;
  --z-toggle: 9999;

  --site-padding: 1.5rem; /* Common left/right margin */
  --menu-top-spacing: 2.5rem; /* Space requested under the cross (62px mockup) */
  --nav-width: 65%; /* ~250-300px on a standard mobile phone */

  /* Before 608px (38rem), it's 1.5rem. After that, it automatically adjusts to center. */
  --site-gutter: max(1.5rem, (100% - 38rem) / 2);

  /* Exact distance between the edge of the screen and the content */
  --site-boundary: max(clamp(1.5rem, 25vw - 7rem, 5rem), (100% - 38rem) / 2);
  --header-height: 4.5rem; /* To align the links further down */
}

html {
  box-sizing: border-box;
  font-size: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

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

body {
  margin: 0;
  background-color: var(--clr-bg-main);
  color: var(--clr-text-body);
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease-out;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  padding: 0;
  margin: 0;
}

ul, ol {
  list-style: none;
}

img, picture, video, iframe {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

/* =========================================
   FORM ELEMENT RESET
   ========================================= 
*/

input, button, select, textarea {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  background: none;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  outline: none;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
  font-weight: 700;
  color: var(--clr-text-heading);
}

::placeholder {
  color: var(--clr-text-muted);
  opacity: 1;
}

:disabled {
  opacity: 0.6;
}

::selection {
  background-color: transparent;
  color: var(--clr-primary);
}


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

.visually-hidden,
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscroll {
  overflow: hidden;
}

.btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 100%;
  padding-block: 1rem;
  background-color: var(--clr-primary);
  color: var(--clr-text-heading);
  font-weight: 700;
  line-height: 24px;
  border-radius: 10px;
  transition: 
    transform 0.3s ease,
    background-color 0.3s ease,
    opacity 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--clr-primary-light);
  box-shadow: 0 20px 50px hsla(26, 100%, 55%, 0.25);
}

.btn-primary:active {
  transform: scale(0.98);
}

.shake {
  animation: shake 0.4s ease-in-out;
}

/* =========================================
   LAYOUT
   ========================================= 
*/

.layout {
  padding: 0;
  inline-size: 100%;
  max-inline-size: 68.75rem; /* 1100px */
  display: block;
  min-block-size: 100dvh;
  margin-inline: auto;
}

.primary-header {
  padding: 1.25rem 1.5rem 1.25rem;
  block-size: var(--header-block-size);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-inner {
  display: flex;
  align-items: center; 
  justify-content: space-between;

  inline-size: 100%;
  block-size: 100%; 

  position: static;
  block-size: auto;
  }

.primary-header__logo {
  flex-shrink: 0;
}

.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s step-end;
}

.overlay[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out, visibility 0.3s step-start;
}

/* cf. primary-navigation media queries */

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-inline-start: auto;
}

.header-actions img {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
}

.cart-toggle {
  padding: 0;
  position: relative;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-body);
  background: transparent;
  border: none;
  cursor: pointer;

  aspect-ratio: 1 / 1;
  transition: color 0.3s ease;
  anchor-name: --cart-btn;
}

.cart-toggle svg, 
.cart-toggle img {
  display: block;
  transform: translateY(2px); 
}

.cart-toggle path {
  transition: fill 0.3s ease;
}

.cart-toggle:hover path {
  fill: var(--clr-text-heading);
}

.cart-count {
  position: absolute;
  padding: 0.1rem 0.4rem;
  min-inline-size: 1.2rem;
  inset-block-start: 0.375rem; /* Top */
  inset-inline-end: 0.125rem;  /* Right */
  
  color: var(--white);
  background-color: var(--clr-primary);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: 6.5px;

  align-items: center;
  justify-content: center;

  pointer-events: none;
  display: none;
}

.animate-pop {
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.cart-popover {
  padding: 0;
  inset-block-start: 4.5rem;
  inset-block-end: auto; 
  inset-inline-end: 0.5rem;
  inset-inline-start: auto;
  margin-inline: 0;

  margin-block: 0;
  inline-size: calc(100vw - 1rem);
  max-inline-size: 22.5rem;
  min-block-size: 16rem;

  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(29, 32, 38, 0.1);
  border: none;

  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    overlay 0.3s allow-discrete,
    display 0.3s allow-discrete;
}

.cart-title {
  padding: 1.5rem 0.75rem;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 24px;
  border-block-end: 1px solid var(--clr-border);
}

.cart-content {
  padding: 1.5rem;
}

.empty-msg {
  color: var(--clr-text-body);
  font-weight: var(--fw-bold);
  text-align: center;
  margin-block-start: 3.5rem;
  margin-block-end: 3rem;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cart-item-thumbnail {
  inline-size: 3.125rem;
  block-size: 3.125rem;
  border-radius: 4px;
  object-fit: cover;
}

.cart-item-details {
  flex: 1; 
  min-inline-size: 0; 
  inline-size: 100%;
  color: #69707D;
  line-height: 1.5;
  container-type: inline-size;
}

.cart-item-details p {
  font-size: clamp(0.85rem, 7cqi, 1rem);
}

.cart-total-price {
  position: relative;
  top: 0.125rem;
  font-weight: 700;
  color: #1D2026;
  margin-inline-start: 0.5rem;
}

.cart-delete-btn {
  margin-inline-start: auto;
}

.cart-delete-btn svg path {
  fill: var(--clr-text-muted);
  transition: fill 0.3s ease;
}

.cart-delete-btn:hover svg path {
  fill: var(--clr-text-heading);
}

/* Checkout button */
.btn-checkout {
  margin-block-start: 1.5rem;
  padding-block: 1rem;
}

.cart-popover:popover-open {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .cart-popover:popover-open {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.cart-popover::backdrop {
  background: transparent;
}


/* =========================================
   CAROUSEL
   ========================================= */

.product-gallery {
  padding-inline: 0;
}

.slider-container {
  position: relative;
  overflow: hidden;
  transform: translateZ(0); 
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: -webkit-radial-gradient(white, black);
}

.slider-track {
  inline-size: 100%;
  display: flex;

  overflow-x: auto;

  scroll-snap-type: none;
  scroll-behavior: auto;

  /* -webkit-overflow-scrolling: touch; */
  -webkit-overflow-scrolling: auto;

  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}

/* --- (Images) --- */
.slider-slide {
  flex: 0 0 100%; 
  inline-size: 100%;
  scroll-snap-align: start; 
  position: relative;
}

.slider-track:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-track img {
  inline-size: 100%;
  block-size: 18.75rem;

  object-fit: cover;
  object-position: center;

  border-radius: 0;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  transition:
    height 0.4s ease-in-out,
    border-radius 0.4s ease-in-out;
}

.slider-track, 
.slider-slide, 
.slider-slide img {
  border-radius: 0;
}

.slider-controls {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;

  z-index: 10;
  pointer-events: none;
}

/* --- BUTTONS --- */
.slider-btn {
  position: static;
  transform: none;
  margin: 0;
  padding: 0;

  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--clr-bg-main);

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: var(--clr-text-heading);

  pointer-events: auto;
}

.slider-btn svg {
  display: block;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), stroke 0.2s ease;
}

.slider-btn.prev svg {
  transform: translateX(-2px);
}

/* Base (-2px) + Animation (-2px) = -4px */
.slider-btn.prev:hover svg {
  transform: translateX(-4px);
}

/* (0px) + Animation (2px) = 2px */
.slider-btn.next:hover svg {
  transform: translateX(2px);
}

.slider-btn:hover svg path {
  stroke: var(--clr-primary);
}

/* --- DOTS (Indicators) --- */
.slider-indicators {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  padding: 0.35rem 0.8rem;
  margin: 0;
  transform: translateX(-50%);
  z-index: 20;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;

  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);

  border-radius: 2rem;
}

.dot {
  padding: 0;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  background-color: white;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: 
    background-color 0.2s ease, 
    transform 0.2s ease;
}

.dot.is-active {
  background-color: var(--clr-primary);
  box-shadow: 0 0 10px rgba(255, 125, 26, 0.5);
  transform: scale(1.2);
}

.dot:not(.is-active):hover {
  background-color: var(--clr-primary-light);
}

.thumbnails-container {
  display: none;
}

/* =========================================
   PRODUCT INFO
   ========================================= */
.product-info {
  padding-block-start: 1.5rem;
  padding-inline: 1.5rem;
}

.company-name {
  color: var(--clr-text-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.85px;
}

.product-title {
  padding-block-start: var(--spacing-200);
  color: var(--clr-text-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 32px;
}

.product-description {
  padding-block-start: var(--spacing-200);
  color: var(--clr-text-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 26px;
}

.price-wrapper {
  padding-block-start: var(--spacing-400);
  display: flex;
  justify-content: space-between;
}

.price-group {
  block-size: var(--spacing-400);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.price-current {
  align-self: flex-end;
  color: var(--clr-text-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.price-discount {
  align-self: flex-start;
  padding: 0.375rem 0.625rem;
  color: var(--clr-text-inverse);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  background-color: var(--black);
  border-radius: 6px;
}

.price-original {
  font-size: 1rem;
  font-weight: 700;
  line-height: 26px;
  text-decoration: line-through;
}

.product-actions {
  padding-block-start: var(--spacing-400);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quantity-control {
  padding: 0;
  block-size: 3.5rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background-color: var(--clr-bg-secondary);
  border-radius: 10px;
}

/* --- BUTTONS +/- --- */
.quantity-btn {
  block-size: 100%;
  inline-size: 3.5rem;

  border: none;
  background: transparent;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  transition: opacity 0.2s ease-out;
}

.quantity-btn:hover {
  opacity: 0.6;
}

.quantity-btn img,
.quantity-btn svg {
  pointer-events: none;
}

.quantity-btn:disabled {
  opacity: 0.3;
}

.quantity-input {
  inline-size: 100%;
  justify-self: center;
  text-align: center;
  font-weight: 700;
  color: var(--clr-text-heading);
}

.add-to-cart-btn {
  padding-block: 1rem;
  gap: 1rem;
}

.add-to-cart-btn svg {
  inline-size: 1.0625rem;
  block-size: 1rem;
  fill: currentColor;
  flex-shrink: 0;
}

.limit-warning-container {
  min-block-size: 1.5rem;
  margin-block-start: 1rem;
  display: grid;
  align-items: center;
}

.limit-warning {
  color: hsl(0, 89%, 57%);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

.limit-warning.is-visible {
  opacity: 1;
}

.limit-warning.shake {
  animation: shake 0.4s ease-in-out;
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (width < 64em) {
  .primary-header {
    inline-size: 100%;
    padding-inline: var(--site-boundary);
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .header-inner {
    justify-content: space-between;
    align-items: center;
    inline-size: 100%;
  }

  .primary-navigation {
    position: fixed;
    inset: 0 auto 0 0;
    inline-size: clamp(18.75rem, 40vi, 28.125rem);
    block-size: 100dvh; 
    padding-inline: var(--site-boundary) 1.5rem;
    padding-block-start: calc(2rem + 1.5rem + var(--menu-top-spacing));
    
    background-color: var(--clr-bg-main);
    
    /* z-index: 999; */
    z-index: var(--z-menu);
    overflow-x: hidden;
    overflow-y: auto; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
    white-space: nowrap;
    
    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .primary-navigation[data-visible="true"] {
    transform: translateX(0%);
  }

  .primary-navigation__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--clr-text-heading);
  }

  .primary-navigation__link {
    font-size: 1.125rem;
    line-height: 26px;
  }

  .primary-navigation__link:hover {
    color: var(--clr-primary-light);
  }

  .primary-navigation__item.active  .primary-navigation__link {
    color: var(--clr-text-heading);
  }

  .nav-toggle {
    position: relative;
    padding: 0;
    margin-inline-end: 1rem;
    margin-block-start: 0.25rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
    cursor: pointer;
    z-index: var(--z-toggle, 9999);
  }

  .nav-toggle:active {
    opacity: 0.5;
    transition: opacity 0.1s ease;
  }

  .nav-toggle__box {
    inline-size: 1rem;
    block-size: 1rem;
    display: inline-block;
    position: relative;
    vertical-align: middle;
  }

  .nav-toggle__inner {
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-toggle__inner,
  .nav-toggle__inner::before,
  .nav-toggle__inner::after {
    position: absolute;
    left: 0;
    inline-size: 100%;
    block-size: 0.15625rem;
  
    background-color: var(--clr-nav-toggle);
   
    transform-origin: center;
    transition:
      transform 0.3s ease-in-out,
      top 0.3s ease-in-out,
      bottom 0.3s ease-in-out,
      background-color 0.3s ease-in-out;
    }

  .nav-toggle:hover .nav-toggle__inner,
  .nav-toggle:hover .nav-toggle__inner::before,
  .nav-toggle:hover .nav-toggle__inner::after {
    background-color: var(--clr-text-heading);
  }

  .nav-toggle__inner::before,
  .nav-toggle__inner::after {
    content: '';
    transform: rotate(0deg);
  }

  .nav-toggle__inner::before {
    top: -0.375rem;
  }

  .nav-toggle__inner::after {
    bottom: -0.375rem;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__inner {
    transform: translateY(-50%);
    background-color: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__inner::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__inner::after {
    bottom: 0;
    transform: rotate(-45deg);
  }
}


@media (width >= 32.5em) { /* = 520px */
  .layout {
    padding-inline: clamp(1.5rem, 25vw - 7rem, 5rem);
  }

  .primary-header,
  .product-gallery,
  .product-info {
    padding-inline: 0; 
    margin-inline: auto;
    max-inline-size: 38rem; 
    inline-size: 100%;
  }

  .product-gallery {
    align-self: center;
  }

  .slider-container {
    position: relative;
    inline-size: 100%;
    margin-inline: auto;
    
    border-radius: 15px;
    overflow: hidden;

    transform: translateZ(0); 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
  }

  .slider-track {
    cursor: default;
  }

  .slider-track img {
    border-radius: 0;
    object-fit: cover;
  }

  /* Product info */
  .product-actions {
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
  }

  .quantity-control {
    flex: 1;
  }

  .add-to-cart-btn {
    flex: 1;
  }
}

@media (width >= 48em) { /* = 768px */
  .primary-header {
    padding-block-start: 1.75rem;
    padding-block-end: 2rem;
    block-size: auto;
    border-block-end: 1px solid var(--grey-100);
  }

  .primary-navigation {
    padding-block-start: calc(var(--header-height) + var(--menu-top-spacing, 2.5rem));
  }

  .product-gallery {
    padding-block-start: 3rem;
  }

  .header-actions {
    gap: 3rem;
  }

  .header-actions img {
    inline-size: 3.125rem;
    block-size: 3.125rem;
  }

  .cart-popover {
    inset: auto;
    margin-inline: 0;
    margin-block-start: 1.25rem;

    position-anchor: --cart-btn;

    inset-block-start: anchor(bottom);
    inset-inline-end: calc(anchor(end) - 6.125rem);
  }

  /* Carousel */
  .slider-track img {
    block-size: 18.125rem;
  }

  .product-info {
    padding-block-start: 3rem;
  }

  .company-name {
    font-size: 0.8125rem;
    letter-spacing: 2px;
  }

  .product-title {
    padding-block-start: var(--spacing-300);
    font-size: 2.75rem;
    line-height: 48px;
  }

  .product-description {
    padding-block-start: var(--spacing-300);
    font-size: 1rem;
  }

  .price-wrapper {
    padding-block-start: var(--spacing-300);
    flex-direction: column;
    gap: 0.5rem;
  }

  .product-actions {
    padding-block-start: var(--spacing-300);
  }
}


@media (width >= 64em) {
  .layout {
    max-inline-size: calc(68.75rem + 6rem);
    padding-inline: 3rem;
    align-items: center;
  }

  .primary-header,
  .product-info,
  .product-gallery {
    max-inline-size: 100%; 
    margin-inline: 0;
    padding-inline: 0;
  }

  /* HEADER */
  .primary-header {
    position: relative;
    display: block;
    padding-block-start: 1.75rem;
    padding-block-end: 2rem;
    block-size: auto;
    border-bottom: 1px solid var(--clr-border);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    inline-size: 100%; 
  }
  
  /* Nav reset */
  .primary-navigation {
    padding: 0;
    margin-inline-start: 3.5rem;
    display: block;
    position: static;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    z-index: auto;
  }

  .primary-navigation__list {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
  }

  .primary-navigation__item:last-child .primary-navigation__link::after {
    right: -5rem;
  }

  .primary-navigation__item:first-child .primary-navigation__link::after {
    left: -5rem; 
  }

  .primary-navigation__link {
    display: block;
    position: relative;
    block-size: 100%;
    font-size: 0.9375rem;
    line-height: 26px;
    z-index: 20;
    transition: color 0.3s, opacity 0.2s;
  }

  /* OPTIONAL */
  /* .primary-navigation__link::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -2rem;
    left: -1rem; 
    right: -1rem;

    background: transparent;
    z-index: 10;
  } */

  .primary-navigation__item {
    transition: color 0.3s ease-out;
  }

  .primary-navigation__item:not(.active) .primary-navigation__link:hover {
    /* opacity: 0.7; */
    color: var(--clr-text-heading);
  }

  /* Magic line */
  .active-indicator {
    position: absolute;
    bottom: 0; 
    left: 0;
    
    inline-size: 0;
    block-size: 0.25rem;
    background-color: var(--clr-primary);
    border-radius: 2px 2px 0 0;

    transform: translateX(0);
    opacity: 0;
    
    transition: 
      transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
      inline-size 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
      opacity 0.3s ease;

    pointer-events: none;
    z-index: 10;
  }

  .nav-toggle,
  .overlay {
    display: none;
  }

  /* ACTIONS (Commun) */
  .header-actions {
    margin-inline-start: auto;

    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vi, 3rem);
  }

  .header-actions img {
    transition: border-color 0.3s ease;
  }

  .header-actions img:hover {
    border-color: var(--clr-primary);
  }

  .cart-popover {
    inset-inline-end: calc(anchor(end) - 6.25rem);
  }

  .product-grid {
    margin-block-start: 6rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 10vw, 8rem);
  }

  .product-gallery {
    padding-block-start: 0;
    inline-size: 28rem;
    max-inline-size: 28rem;
    justify-self: end;
  }

  .slider-container {
    position: relative;
    inline-size: 100%;
    max-inline-size: 28rem;
    margin-inline: auto;

    border-radius: 15px;
    overflow: hidden;

    transform: translateZ(0); 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
  }

  .slider-track {
    cursor: default;
  }

  .slider-track img {
    inline-size: 28rem;
    block-size: 27.8125rem;

    object-fit: cover;
    object-position: center;
    
    border-radius: 0;
    
    cursor: pointer;
    pointer-events: auto;
    transition: block-size 0.4s ease-in-out;
  }

  
  .slider-slide[data-index="0"] img {
    object-position: 50% 60%;
  }

  .slider-slide[data-index="1"] img {
    object-position: 50% 10%;
  }

  .slider-slide[data-index="2"] img {
    object-position: 50% 20%;
  }

  .slider-slide[data-index="3"] img {
    object-position: 50% 35%;
  }

  .slider-controls,
  .slider-indicators {
    display: none;
  }

  /* thumbnails */
  .thumbnails-container {
    display: flex;
    justify-content: space-between;
    margin-block-start: 2rem;

    overflow-x: auto;
    scroll-behavior: auto !important;
    scrollbar-width: none; 
    -ms-overflow-style: none;

    white-space: nowrap;
  }

  .thumbnails-container::-webkit-scrollbar {
    display: none; 
  }

  .lightbox-thumbnails {
  scrollbar-width: none; 
  -ms-overflow-style: none;
  }

  .lightbox-thumbnails::-webkit-scrollbar {
    display: none;
  }

  .thumbnail {
    inline-size: 5.875rem;
    block-size: 5.875rem;
    background-color: var(--white);
    outline: none;
    border: 3px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease-in-out;
  }

  .thumbnail img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border: none; 
    border-radius: 0;
    transition: opacity 0.3s ease;
  }

  .thumbnail:hover img {
    opacity: 0.7;
  }

  .thumbnail.active img {
    opacity: 0.35;
    border-color: var(--clr-primary);
  }

  .thumbnail.active {
    border-color: var(--clr-primary);
  }

  .thumbnail:focus {
    outline: none;
  }

  .thumbnail.active:focus {
    border-color: var(--clr-primary);
  }

  .thumbnail:focus img {
    border-color: var(--clr-primary);
  }

  .thumbnail:focus, 
  .slider-btn:focus, 
  .dot:focus {
    outline: none;
  }

  .slider-btn:focus-visible, 
  .dot:focus-visible {
    outline: 3px solid var(--clr-primary);
    outline-offset: 4px;
    border-radius: 5px;
  }

  .thumbnail:focus-visible {
    outline: 3px solid var(--clr-primary);
    outline-offset: -4px; 
  }

  .prev:focus-visible,
  .next:focus-visible {
    outline: 3px solid var(--clr-primary);
  }

  .product-info {
    padding-block-start: 0;
    max-inline-size: 27.8125rem; /* = 445px */
    /* inline-size: 27.8125rem; */
    inline-size: 100%;
    justify-self: start;
  }

  .company-name {
    line-height: 16px;
  }

  .product-description,
  .price-wrapper,
  .product-actions {
    padding-block-start: var(--spacing-400);
  }

  .price-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .price-original {
    margin-inline-start: 0;
  }

  /* Product info */
  .product-actions {
    gap: 1rem;
  }

  .quantity-control {
    flex-basis: 9.8125rem;
  }

  .add-to-cart-btn {
    flex-basis: 17rem;
  }

 /* ============================================================
   LIGHTBOX
   ============================================================ */

  .lightbox {
    padding: 0;
    inline-size: 34.375rem;
    border: none;
    background: transparent;
    overflow: visible;
    
    opacity: 0;
    transform: scale(0.9);
    
    transition: 
      opacity 0.3s ease,
      transform 0.3s ease,
      display 0.3s allow-discrete,
      overlay 0.3s allow-discrete;
    } 

  .lightbox[open] {
    display: grid;
    pointer-events: auto;
    
    opacity: 1;
    transform: scale(1);
    animation: zoomElasticSubtle 0.45s ease-out backwards;
  }

  @starting-style {
    .lightbox[open] {
      opacity: 0;
    }
  }

/* ============================================================
   BACKDROP
   ============================================================ */

  .lightbox::backdrop {
    background-color: rgb(0 0 0 / 75%);
    opacity: 0;
    
    transition: 
      opacity 0.3s ease,
      display 0.3s allow-discrete,
      overlay 0.3s allow-discrete;
  }

  .lightbox[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .lightbox[open]::backdrop {
      opacity: 0;
    }
  }

  .lightbox-close {
    justify-self: end;
    color: var(--white);
    transition: color 0.2s ease;
  }

  .lightbox-close:hover {
    color: var(--orange-500);
  }

  .lightbox-close:focus-visible {
    outline: 2px solid var(--clr-primary, #FF7D1A);
    outline-offset: 4px; 
  }

  .lightbox-inner {
    display: grid;
  }

  .lightbox-carousel {
    padding-block-start: 1.5rem;
    display: grid;
    align-items: center;
  }

  .slider-btn {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    z-index: 99;
  }

  .slider-btn.prev {
    justify-self: start;
    margin-inline: -28px;
  }
    
  .slider-btn.next {
    justify-self: end;
    margin-inline: -1.75rem;
  }
    
  .lightbox-carousel > * {
    grid-area: 1 / -1;
  }

  .lightbox-main-img {
    border-radius: 15px;
  }

  .lightbox-thumbnails {
    padding-block-start: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
  }

  .lightbox-thumbnails .thumbnail {
    inline-size: 5.875rem;
    block-size: 5.875rem;
  }

  .lightbox-thumbnails .thumbnail img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .lightbox::backdrop {
    background-color: hsl(0 0% 0% / 0.75);
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
}


/* ANIMATIONS */
@keyframes zoomElasticSubtle {
  0% {
    opacity: 0;
    transform: scale(0.8); 
  }
 
  50% {
    opacity: 1;
    transform: scale(1.02); 
  }
 
  75% {
    transform: scale(0.995);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes popIn {
  0% {
      transform: scale(0);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}


@media (prefers-reduced-motion: reduce) {
  .slider-track img {
    transition: none !important;
  }
}