/**
 * dex.css — LYKON custom styles
 * Load after Tailwind; use for overrides & patterns not covered by utilities.
 */

:root {
  --lykon-cream: #fdf8ee;
  --lykon-brown: #3e2723;
  --lykon-navy: #1a237e;
  --lykon-accent-blue: #28248e;
  --lykon-red: #cb5101;
  --lykon-red-dark: #a84301;
  --lykon-gold: #c5a028;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Focus: clearer keyboard outline for links & buttons */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lykon-navy);
  outline-offset: 3px;
}

/* Optional: container max width helper */
.lykon-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.hero {
  background: linear-gradient(135deg, #fef9e7 0%, #fdf3d0 60%, #fce8a8 100%);
}

/* Hero background fade slider (index hero) */
.hero-bg-slider .hero-bg-slide {
  will-change: opacity;
}

/* Hero left headline — true italic (Montserrat ital loaded) */
.hero-heading {
  font-style: italic;
  text-shadow: 5px 5px 5px #c9ab45;
}

/* Made to delight — banner headline: heavier display weight + slight depth */
.delight-headline {
  letter-spacing: 0.045em;
  word-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 12px rgba(62, 39, 35, 0.08);
}

/* Typewriter caret */
.hero-tw-cursor {
  display: none;
  margin-left: 0.08em;
  width: 0;
  height: 0.72em;
  vertical-align: -0.08em;
  border-right: 0.11em solid currentColor;
  animation: hero-tw-blink 0.65s step-end infinite;
}

.hero-tw-cursor--on {
  display: inline-block;
}

.hero-tw-cursor--para {
  height: 1em;
  border-right-width: 2px;
}

.hero-tw-text,
.hero-tw-para-text {
  display: inline;
}

@keyframes hero-tw-blink {
  50% {
    border-color: transparent;
  }
}

/* Counting-style reveal: each character pops in like a tick */
.hero-tw-char {
  display: inline-block;
  animation: hero-tw-count 0.2s cubic-bezier(0.33, 1.45, 0.64, 1) both;
}

.hero-tw-char--para {
  animation-name: hero-tw-count-para;
  animation-duration: 0.14s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes hero-tw-count {
  0% {
    transform: translateY(0.4em) scale(0.25);
    opacity: 0;
    filter: blur(3px);
  }
  55% {
    transform: translateY(-0.08em) scale(1.12);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes hero-tw-count-para {
  0% {
    transform: translateY(0.2em) scale(0.85);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.productsbg {
  background: #e9d9a6;
}

/* Desktop nav — keep all items on one line (FR labels) */
.lykon-nav-desk a {
  white-space: nowrap;
}

/* Header CTA — same width in EN / FR */
.lykon-header-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13rem;
  max-width: 13rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .lykon-header-cta {
    width: 14rem;
    max-width: 14rem;
  }
}

/* Header language select */
.lykon-lang-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231A237E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
  min-width: 6.5rem;
}

@media (min-width: 1280px) {
  .lykon-lang-select {
    min-width: 7.25rem;
  }
}

.lykon-lang-select--mobile-header {
  min-width: 5.5rem;
  background-position: right 0.45rem center;
  background-size: 0.875rem;
}

@media (min-width: 768px) {
  .lykon-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Hero product cards — pack fills vertical showcase (rotated 90deg) */
.hero-pack-card {
  overflow: visible;
}

.hero-pack-card-inner {
  overflow: visible;
}

.hero-pack-showcase-slot {
  min-height: 8.75rem;
}

.hero-pack-showcase {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  container-type: size;
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 8.25rem;
  max-height: 13.5rem;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  transform-origin: center bottom;
  transition: transform 0.5s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.hero-pack-showcase::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2%;
  z-index: 0;
  width: 68%;
  height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.2) 0%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

.hero-pack-showcase-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border:2px dotted rgba(255, 255, 255, 0.82);
  border-radius: 0.75rem;
  box-sizing: border-box;
  padding: 20px 12px;
}

.hero-pack-showcase img {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  /* After rotate(90deg): width→visual height, height→visual width */
  max-width: 74cqh;
  max-height: 100cqw;
  object-fit: contain;
  object-position: center;
  border: none;
  border-radius: 0;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 10px 18px rgba(62, 39, 35, 0.3));
  transform: rotate(90deg) scale(1.14);
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.34, 1.15, 0.64, 1);
}

[data-hero-pack-role='center'] .hero-pack-showcase img {
  transform: rotate(90deg) scale(1.22);
}

@supports not (width: 1cqh) {
  .hero-pack-showcase img {
    max-width: 92%;
    max-height: 92%;
  }
}

[data-hero-pack-role='left'] .hero-pack-showcase,
[data-hero-pack-role='right'] .hero-pack-showcase {
  min-height: 7.5rem;
  max-height: 12rem;
  transform: scale(0.96);
}

[data-hero-pack-role='center'] .hero-pack-showcase {
  min-height: 9rem;
  max-height: 14.5rem;
  transform: translateY(-3px) scale(1.02);
}

@media (min-width: 768px) {
  .hero-pack-showcase-slot {
    min-height: 10rem;
  }

  .hero-pack-showcase {
    min-height: 9.5rem;
    max-height: 15rem;
  }

  .hero-pack-showcase img {
    transform: rotate(90deg) scale(1.18);
  }

  [data-hero-pack-role='center'] .hero-pack-showcase {
    min-height: 10.25rem;
    max-height: 16rem;
  }

  [data-hero-pack-role='center'] .hero-pack-showcase img {
    transform: rotate(90deg) scale(1.26);
  }
}

@media (min-width: 1024px) {
  .hero-pack-showcase {
    max-height: 15.5rem;
  }

  .hero-pack-showcase img {
    transform: rotate(90deg) scale(1.2);
  }

  [data-hero-pack-role='center'] .hero-pack-showcase {
    max-height: 17rem;
  }

  [data-hero-pack-role='center'] .hero-pack-showcase img {
    transform: rotate(90deg) scale(1.28);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-pack-card:hover .hero-pack-showcase img {
    transform: rotate(90deg) scale(1.17);
  }

  [data-hero-pack-role='center'].hero-pack-card:hover .hero-pack-showcase img {
    transform: rotate(90deg) scale(1.25);
  }

  [data-hero-pack-role='center'].hero-pack-card:hover .hero-pack-showcase {
    transform: translateY(-4px) scale(1.02);
  }
}

/* Our biscuits collection — equal-size cards + pack image */
.product-carousel-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 min(20rem, calc(100% - 0.75rem));
  width: min(20rem, calc(100% - 0.75rem));
  max-width: 100%;
  min-width: 0;
  min-height: 21.5rem;
}

.product-carousel-card .product-slider-pack {
  width: 9.25rem;
  max-width: min(9.25rem, 88%);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 3 / 5;
  flex-shrink: 0;
}

.product-carousel-card > h3 {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-carousel-card > p {
  flex: 1 1 auto;
  min-height: 2.875rem;
}

.product-carousel-card > button {
  margin-top: auto;
  align-self: center;
}

@media (min-width: 640px) {
  .product-carousel-card {
    flex: 0 0 220px;
    width: 220px;
    max-width: none;
    min-height: 26.5rem;
  }

  .product-carousel-card .product-slider-pack {
    width: 9.875rem;
    max-width: 9.875rem;
  }
}

@media (min-width: 768px) {
  .product-carousel-card {
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    min-height: 27.5rem;
  }

  .product-carousel-card .product-slider-pack {
    width: 10.5rem;
    max-width: 10.5rem;
  }
}

/* Our biscuits collection — slider pack photo (HD crop, pack silhouette) */
.product-slider-pack {
  position: relative;
  overflow: hidden;
  border-radius: 0.875rem;
  /*box-shadow:
    0 10px 28px rgba(44, 24, 16, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);*/
}

.product-slider-pack::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /*background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, transparent 35%, transparent 70%, rgba(0, 0, 0, 0.12) 100%);*/
  border-radius: inherit;
}

.product-slider-pack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.product-slider-pack--catalog {
  background-color:#e9d9a6;
}

.product-slider-pack--catalog img {
  object-fit: contain;
  object-position: center;
  padding: 0.35rem;
}

@media (prefers-reduced-motion: no-preference) {
  .product-slider-pack:hover img {
    transform: scale(1.06);
  }
}

/* Mobile nav: Products accordion chevron */
.nav-products-mobile-chevron {
  transition: transform 0.2s ease;
}

details.nav-products-mobile[open] .nav-products-mobile-chevron {
  transform: rotate(180deg);
}

/* Products catalogue — sticky category strip below site header */
.products-catalog-page .products-catalog-nav {
  top: 3.35rem;
}
@media (min-width: 768px) {
  .products-catalog-page .products-catalog-nav {
    top: 3.65rem;
  }
}
@media (min-width: 1024px) {
  .products-catalog-page .products-catalog-nav {
    top:5.2rem;
  }
}

/* Products catalogue — uniform product image area */
.products-catalog-page .catalog-product-img-wrap {display: flex;align-items: center;justify-content: center;width: 100%;height: 200px;flex-shrink: 0;padding: 1rem;background-color:#fff9f1;}
.products-catalog-page .catalog-product-img {display: block;width: 100%;height: 100%;max-width: 100%;max-height: 100%;object-fit: cover;object-position: center;transition: transform 0.3s ease;}
.products-catalog-page .group:hover .catalog-product-img {transform: scale(1.03);}
/* PDP related slider — clip overflow; min-width:0 so track does not widen the page */
[data-related-carousel] {max-width: 100%;overflow: hidden;}
[data-related-track] {position: relative;display: flex;flex-wrap: nowrap;align-items: stretch;min-width: 0;max-width: 100%;box-sizing: border-box;-webkit-overflow-scrolling: touch;}
.related-pdp-slide {box-sizing: border-box;flex: 0 0 11.5rem;width: 11.5rem;}
.footbottom{background: rgb(255 255 255 / 49%);padding: 10px 25px;font-size: 13px;border-radius: 50px;}


@media (min-width: 640px) {
.related-pdp-slide {flex: 0 0 13rem;width: 13rem;}
}

/* Product detail — fullscreen image zoom overlay (plain div, not <dialog>).
   Closed state uses a dedicated class so nothing renders in document flow above the footer. */
#pdp-lightbox.pdp-lightbox--closed {display: none !important;visibility: hidden;pointer-events: none;}
#pdp-lightbox:not(.pdp-lightbox--closed) {display: flex !important;flex-direction: column;position: fixed;inset: 0;z-index: 99999;margin: 0;width: 100%;max-width: 100%;height: 100%;max-height: 100dvh;border: none;padding: 0;background: rgb(18 14 12 / 0.97);color: #fff;box-sizing: border-box;visibility: visible;pointer-events: auto;}
.pdp-lightbox__stage {overflow: hidden;overscroll-behavior: contain;touch-action: none;cursor: grab;}
.pdp-lightbox__stage.is-panning {cursor: grabbing;}
.pdp-lightbox__img {transform-origin: center center;will-change: transform;max-width: 100%;cursor: grab;-webkit-user-drag: none;user-select: none;}
.pdp-lightbox__stage.is-panning .pdp-lightbox__img {cursor: grabbing;}

/* Product detail page: belt-and-suspenders against stray horizontal overflow */
body.product-detail-page {
overflow-x: clip;
}
@supports not (overflow: clip) {
body.product-detail-page {
overflow-x: hidden;
}
}


@media (max-width: 768px) {
.tea-cup{ display:none!important;}
.copy1{ font-size:12px;}
.slider-top{ padding-top:50px;}
.footbottom {padding: 10px 10px;border-radius: 0;margin: 0 -30px;}

}

/* Media page — product feature (full pack visible, no crop) */
.media-story-section {background: linear-gradient(180deg, #ffffff 0%, #fdf8ee 100%);}
.media-story-figure__img-wrap {overflow: visible;}
.media-story-figure__img {display: block;height: auto;}