/* ── Locally-hosted fonts (no external calls) ── */
@font-face {
  font-family: 'Barriecito';
  src: local('Barriecito Regular'), local('Barriecito'), url('../font/Barriecito/Barriecito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chelsea Market';
  src: local('Chelsea Market Regular'), local('Chelsea Market'), url('../font/Chelsea_Market/ChelseaMarket-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Indie Flower';
  src: local('Indie Flower Regular'), local('Indie Flower'), url('../font/Indie_Flower/IndieFlower-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ole';
  src: local('Ole Regular'), local('Ole'), url('../font/Ole/Ole-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto Variable'), url('../font/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: local('Roboto Italic'), local('Roboto-Italic'), url('../font/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Syne Mono';
  src: local('Syne Mono Regular'), local('Syne Mono'), url('../font/Syne_Mono/SyneMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Yuji Syuku';
  src: local('Yuji Syuku Regular'), local('Yuji Syuku'), url('../font/Yuji_Syuku/YujiSyuku-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ruritania';
  src: local('Ruritania'), url('../font/Ruritania.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Mende Kikakui';
  src: url('../font/Noto_Sans_Mende_Kikakui/NotoSansMendeKikakui-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Amateur brutalist tremble for image zone */
.tremble {
  animation: tremble 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tremble {
  0% { transform: rotate(-2deg) scale(1.01); }
  10% { transform: rotate(2deg) scale(1.03); }
  20% { transform: rotate(-3deg) scale(0.99); }
  30% { transform: rotate(3deg) scale(1.04); }
  40% { transform: rotate(-2deg) scale(1.01); }
  50% { transform: rotate(2deg) scale(1.03); }
  60% { transform: rotate(-3deg) scale(0.99); }
  70% { transform: rotate(3deg) scale(1.04); }
  80% { transform: rotate(-2deg) scale(1.01); }
  90% { transform: rotate(2deg) scale(1.03); }
  100% { transform: rotate(0deg) scale(1); }
}

.psychedelic-text {
  display: inline-block;
  font-family: 'Syne Mono', monospace;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #ff1c68, #ff8a00, #fffb00, #28ff55, #0afaf2, #3c7bff, #d33dff, #ff1c68);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  animation: rainbow-slide 6s ease-in-out infinite;
  font-family: 'Syne Mono', monospace!important;
}
.psychedelic-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 0.18em;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff1c68, #ff8a00, #fffb00, #28ff55, #0afaf2, #3c7bff, #d33dff, #ff1c68)!important;
  background-size: 200% 100%;
  animation: rainbow-slide 24s ease-in-out infinite;
  font-family: 'Syne Mono', monospace;
}
@keyframes rainbow-slide {
  0% { background-position: 0% 50%; }
  12% { background-position: 25% 50%; }
  25% { background-position: 50% 50%; }
  38% { background-position: 75% 50%; }
  50% { background-position: 100% 50%; }
  62% { background-position: 75% 50%; }
  75% { background-position: 50% 50%; }
  88% { background-position: 25% 50%; }
  100% { background-position: 0% 50%; }
  
}

/* Amateur randomization for pills/swatches/cards */
.hv-pill, .hv-swatch, .hampter-section, .product__left, .product__right {
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s;
}
.hampter-window-panel.window {
  position: relative;
  width: 100%;
  margin: 0 auto 1.5rem;
  border-top: 1px solid #DFDFDF;
  border-left: 1px solid #DFDFDF;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  background: #BFBFBF;
}
.hampter-window-panel.window .frame {
  background: #BFBFBF;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #7F7F7F;
  border-right: 1px solid #7F7F7F;
  padding: 2px;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: fit-content;
}

.scroll-frame-window.hampter-window-panel.window .frame,
.scroll-frame-window.hampter-window-panel.window .scroll-frame-animation,
.scroll-frame-window.hampter-window-panel.window .content {
  padding:unset;
}


.hampter-window-panel.window .title-bar {
  background-color: #7F7F7F;
  padding: 1px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.hampter-window-panel.window .title-bar .title {
  margin-left: 3px;
  flex-grow: 1;
  color: #BFBFBF;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hampter-window-panel.window .title-bar .button {
  padding: 0;
  background: #BFBFBF;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
}
.hampter-window-panel.window .title-bar .button .bevel {
  border-top: 1px solid #DFDFDF;
  border-left: 1px solid #DFDFDF;
  border-bottom: 1px solid #7F7F7F;
  border-right: 1px solid #7F7F7F;
}
.hampter-window-panel.window .title-bar .button.close {
  margin-left: 2px;
}
.hampter-window-panel.window .window-controls {
  display: flex;
  gap: 0.25rem;
}
.hampter-window-panel.window .content-bevel {
  border-top: 1px solid #7F7F7F;
  border-left: 1px solid #7F7F7F;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  flex-grow: 1;
}
.hampter-window-panel.window .content {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #DFDFDF;
  border-right: 1px solid #DFDFDF;
  background-color: #FFFFFF;
  min-height: 1px;
  padding: 1rem;
  overflow: hidden;
}
/* ===========================================================
   HampterShop — Loud & Laughing theme
   Custom styles extracted from the design mockups (theme_hampter).
   The Tailwind utility runtime is loaded from the CDN inside
   _partials/head.tpl together with the tailwind.config script.
   =========================================================== */

:root {
  /* ── Surfaces ── */
  --color-background:         var(--color-background);
  --color-surface:            #f1efd9;
  --color-surface-high:       var(--color-surface-high);
  --color-surface-highest:    #ebe9d4;
  --color-surface-white:      var(--color-surface-white);
  --color-surface-cream:      var(--color-surface-cream);

  /* ── Brand ── */
  --color-primary:            var(--color-primary);
  --color-primary-hover:      var(--color-primary-hover);
  --color-secondary:          #8b5000;
  --color-secondary-container:var(--color-secondary-container);
  --color-accent-hover:       var(--color-accent-hover);

  /* ── State ── */
  --color-error:              var(--color-error);
  --color-error-container:    #ffdad6;

  /* ── Ink (borders, shadows, hard outlines) ── */
  --color-ink:                var(--color-ink);

  /* ── On-color text ── */
  --color-on-background:      var(--color-ink);
  --color-on-surface:         var(--color-ink);
  --color-on-secondary-fixed: #2c1600;
  --color-on-error:           var(--color-surface-white);

  /* ── Tertiary ── */
  --color-tertiary-fixed:     #ffe082;
}

/* ── Text effects ── */
.meme-outline { -webkit-text-stroke: 3px var(--color-ink); paint-order: stroke fill; }
.handdrawn { font-family: 'Indie Flower', cursive; }

/* ── Sketchy borders ── */
.border-sketchy-1 {
  clip-path: polygon(2% 1%, 98% 3%, 100% 97%, 1% 99%);
  border: 5px solid var(--color-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.border-sketchy-2 {
  clip-path: polygon(1% 4%, 97% 1%, 99% 95%, 4% 98%);
  border: 4px solid var(--color-ink);
  border-radius: 10px 40px 15px 30px / 35px 10px 45px 15px;
}
.border-sketchy-3 {
  clip-path: polygon(0% 0%, 100% 5%, 95% 100%, 5% 95%);
  border: 6px solid var(--color-ink);
  border-radius: 40px 20px 50px 10px / 10px 50px 20px 40px;
}
.border-sketchy-4, .border-mega-messy {
  clip-path: polygon(5% 0%, 95% 5%, 100% 90%, 0% 100%);
  border: 5px solid var(--color-ink);
  box-shadow: 8px 10px 0 -2px var(--color-ink);
}
.border-sketchy-5 {
  clip-path: polygon(2% 10%, 98% 2%, 95% 95%, 5% 90%);
  border: 7px solid var(--color-ink);
  border-radius: 2px 4px 1px 6px / 6px 1px 4px 2px;
}
.border-sketchy-rainbow {
  position: relative;
  box-sizing: border-box;
  clip-path: polygon(1% 4%, 97% 1%, 99% 95%, 4% 98%);
  border-radius: 10px 40px 15px 30px / 35px 10px 45px 15px;
  overflow: hidden;
  border: none;
  background: transparent !important;
}
.border-sketchy-rainbow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, #ff1c68, #ff8a00, #fffb00, #28ff55, #0afaf2, #3c7bff, #d33dff, #ff1c68);
  background-size: 200% 100%;
  animation: rainbow-slide 6s ease-in-out infinite;
}
.border-sketchy-rainbow::after {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: -1;
  pointer-events: none;
  clip-path: inherit;
  border-radius: inherit;
  background-color: var(--color-tertiary-fixed) !important;
    background-color: var(--color-tertiary-fixed) !important;
    background-image: url(/themes/theme_hampter/assets/divers/maxwells/cheems_bike.gif);
    background-repeat: no-repeat;
    background-position: 95% 5%;
    background-size: auto 50%;
}
.rough-border {
  clip-path: polygon(1% 2%, 18% 0%, 42% 3%, 75% 0%, 98% 2%, 100% 25%, 97% 55%, 100% 85%, 98% 99%, 70% 97%, 45% 100%, 15% 98%, 1% 97%, 3% 70%, 0% 40%, 2% 10%);
  border-width: 5px;
}
.rough-badge { clip-path: polygon(5% 5%, 95% 0%, 100% 90%, 0% 100%); }
.shaky-border {
  border: 3px solid var(--color-ink);
  border-radius: 2% 98% 3% 97% / 96% 4% 95% 5%;
}
.shaky-border-heavy {
  border: 5px solid var(--color-ink);
  border-radius: 4% 95% 6% 92% / 93% 5% 94% 6%;
}
.shaky-input {
  border: 3px solid var(--color-ink);
  clip-path: polygon(1% 1%, 99% 2%, 98% 98%, 2% 99%);
  transition: transform 0.1s ease-in-out;
}

/* ── Squiggly underline ── */
.squiggly-underline { position: relative; display: inline-block; }
.squiggly-underline::after {
  content: "";
  position: absolute; bottom: -8px; left: 0; width: 100%; height: 10px;
  background: currentColor;
  clip-path: polygon(0% 20%, 5% 80%, 10% 30%, 15% 70%, 20% 25%, 25% 75%, 30% 35%, 35% 65%, 40% 20%, 45% 85%, 50% 30%, 55% 70%, 60% 25%, 65% 80%, 70% 35%, 75% 65%, 80% 20%, 85% 75%, 90% 30%, 95% 80%, 100% 20%, 100% 100%, 0% 100%);
}

/* ── Keyframes ── */
@keyframes shiver {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(2px, -2px) rotate(1deg); }
  50% { transform: translate(-2px, 2px) rotate(-1deg); }
  75% { transform: translate(2px, 2px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes glitch {
  0% { transform: translate(0); text-shadow: 0 0 0 transparent; }
  2% { transform: translate(-3px, 2px); text-shadow: 3px 0 #f00, -3px 0 #00f; }
  4% { transform: translate(3px, -1px); text-shadow: -3px 0 #f00, 3px 0 #00f; }
  6% { transform: translate(0); text-shadow: 0 0 0 transparent; }
  100% { transform: translate(0); text-shadow: 0 0 0 transparent; }
}
@keyframes glitch-scale {
  0%, 100% { transform: scale(1); }
  33% { transform: scale(1.05) skew(1deg); }
  66% { transform: scale(0.98) skew(-1deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-5deg) scale(1.1); }
  50% { transform: rotate(5deg) scale(1.2); }
}

.footer-powered {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
}
.footer-tooltip-link {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  color: inherit;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}
.footer-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.75rem);
  right: 0;
  width: min(300px, 90vw);
  padding: 0.9rem 1rem;
  background: rgba(25, 25, 25, 0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  color: var(--color-surface-white);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
  z-index: 50;
}
.footer-tooltip::before {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 12px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: rgba(25, 25, 25, 0.95);
}
.footer-tooltip-link:hover + .footer-tooltip,
.footer-tooltip-link:focus + .footer-tooltip {
  display: inline-flex;
}
@keyframes float-blobs {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes boiling-line {
  0% { clip-path: polygon(1% 2%, 99% 0, 100% 98%, 2% 100%, 0% 50%); }
  50% { clip-path: polygon(2% 0%, 98% 2%, 99% 95%, 0% 100%, 1% 45%); }
  100% { clip-path: polygon(1% 2%, 99% 0, 100% 98%, 2% 100%, 0% 50%); }
}
@keyframes breathing {
  0%, 100% { transform: scale(1) rotate(2deg); }
  50% { transform: scale(1.03) rotate(3deg); }
}
@keyframes nervous-bounce {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
@keyframes entrance-wobble {
  0% { opacity: 0; transform: translateY(40px) rotate(-3deg); }
  60% { transform: translateY(-5px) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes badge-rotate {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(-15deg) scale(1.1); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

/* ── Blobs ── */
.blob {
  position: absolute; filter: blur(40px); z-index: -1;
  animation: float-blobs 15s infinite alternate ease-in-out;
  opacity: 0.15; transition: background-color 0.5s ease;
}

/* ── Animation utility classes ── */
.animate-shiver { animation: shiver 0.1s infinite; }
.animate-glitch { animation: glitch 3s infinite; }
.hover-shiver:hover { animation: shiver 0.1s infinite; }
/* .hampter-home__card:hover .border-sketchy-1 { border-color: var(--color-secondary-container) !important; }
.hampter-home__card:hover .border-sketchy-2 { border-color: var(--color-secondary-container) !important; }
.hampter-home__card:hover .border-sketchy-3 { border-color: var(--color-secondary-container) !important; }
.hampter-home__card:hover .border-sketchy-4 { border-color: var(--color-secondary-container) !important; }
.hampter-home__card:hover .border-sketchy-5 { border-color: var(--color-secondary-container) !important; } */
.animate-boiling { animation: boiling-line 0.3s infinite step-end; }
.animate-breathing { animation: breathing 4s ease-in-out infinite; }
.animate-nervous { animation: nervous-bounce 1s infinite; }
.animate-badge-pulse { animation: badge-rotate 2s ease-in-out infinite; }
.animate-entrance { animation: entrance-wobble 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.section-hidden { opacity: 0; }
.wiggle-arrow { animation: wiggle 0.5s infinite ease-in-out; display: inline-block; }
.float-slow { animation: float-slow 5s ease-in-out infinite; }

/* ── Product card reveal ── */
.reveal-bounce {
  opacity: 0; transform: translateY(30px) scale(0.95);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-bounce.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ── Buttons ── */
.btn-rough {
  position: relative; border: 5px solid var(--color-ink);
  box-shadow: 8px 8px 0 0 var(--color-ink); transition: all 0.1s;
  clip-path: polygon(1% 2%, 99% 0, 100% 98%, 2% 100%, 0% 50%);
}
.btn-rough:hover {
  animation: glitch-scale 0.2s infinite;
  box-shadow: 2px 2px 0 0 var(--color-ink); transform: translate(6px, 6px);
}
.btn-rough,
.product__add-to-cart-button,
.marker-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn-rough::before,
.product__add-to-cart-button::before,
.marker-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../divers/cahier.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mix-blend-mode: multiply;
}

.btn-rough > *,
.product__add-to-cart-button > *,
.marker-btn > * {
  position: relative;
  z-index: 1;
}
.card-hover-shake:hover {
  animation: shiver 0.15s infinite; transform: scale(1.02) rotate(1deg); z-index: 20;
}
.style-btn-active {
  background-color: var(--color-secondary-container) !important;
  box-shadow: 2px 2px 0 0 var(--color-ink) !important;
  transform: translate(6px, 6px) !important;
}

/* ── Universe patterns (homepage) ── */
.universe-pattern { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; z-index: 0; }
.pattern-hamsters {
  background-color: var(--color-secondary-container);
  background-image: radial-gradient(var(--color-ink) 2px, transparent 2px);
  background-size: 32px 32px;
}
.pattern-gnomes {
  background-color: #4caf50;
  background-image: repeating-linear-gradient(45deg, #2e7d32 0, #2e7d32 2px, transparent 0, transparent 50%);
  background-size: 24px 24px;
}
.pattern-memes {
  background-color: #9c27b0;
  background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
  background-size: 50px 50px;
}
.pattern-chaos {
  background-color: #f44336;
  background-image: conic-gradient(from 0deg at 50% 50%, #000 0deg 90deg, transparent 90deg 360deg);
  background-size: 40px 40px;
}
.hfrise-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--hfrise-color, var(--color-tertiary-fixed));
  background-image: var(--hfrise-image);
  background-repeat: repeat;
  background-size: var(--hfrise-tile-x, 550px) var(--hfrise-tile-y, 550px);
  animation: hfriseDrift var(--hfrise-move-duration, 24s) linear infinite;
}
.hfrise-overlay-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translate(var(--hfrise-overlay-translate-x, 0%), var(--hfrise-overlay-translate-y, -12%));
}
.hfrise-overlay-svg__svg {
  width: 140%;
  height: 160%;
  min-width: 100%;
  min-height: 140%;
  display: block;
  opacity: 0.6;
}
.hfrise-overlay-svg__svg rect {
  rx: 2;
}
.hfrise-overlay-lines {
  animation: hfriseLineScroll 32s linear infinite;
  will-change: transform;
}
@keyframes hfriseLineScroll {
  0% { transform: translateX(0) rotate(18deg); }
  100% { transform: translateX(-100%) rotate(18deg); }
}
@keyframes hfriseDrift {
  from { background-position: 0 0; }
  to   { background-position: var(--hfrise-shift-x, 550px) var(--hfrise-shift-y, 550px); }
}
.universe-label-container {
  display: flex; align-items: center; gap: 24px;
  background: var(--color-surface-white); padding: 12px 32px;
  border: 6px solid var(--color-ink); box-shadow: 10px 10px 0 0 var(--color-ink);
  clip-path: polygon(2% 5%, 98% 0%, 100% 95%, 5% 100%);
}

/* ── Paper texture overlay ── */
.paper-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background-image: var(--hampter-paper-url, none);
  opacity: 0.4; mix-blend-mode: multiply;
}

/* ── PrestaShop-specific overrides to soften the parent template ── */
#header.header,
.hampter-header {
  background: rgba(255,255,255,0.08) !important;
  background-image: radial-gradient(circle, rgba(0,0,0,0.2) 0.5px, transparent 0.5px), linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  background-size: 8px 8px, 100% 100% !important;
  background-repeat: repeat, no-repeat !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: transform 240ms ease;
  will-change: transform;
  backdrop-filter: invert(1) saturate(1.1) !important;
  -webkit-backdrop-filter: invert(1) saturate(1.1) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
#header.header.js-sticky-header,
.hampter-header.sticky,
.hampter-header.js-sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
#header.header.header-hidden,
.hampter-header.header-hidden {
  transform: translateY(-100%);
}
#quest-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* display: flex !important; */
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 1rem !important;
}
#footer {
  position: relative !important;
  z-index: 0 !important;
  background: transparent !important;
  display: block !important;
  visibility: visible !important;
}
#footer::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 50px !important;
    min-width: 500px;
    height: 500px !important;
    min-height: 500px !important;
    background-image: url(/themes/theme_hampter/assets/divers/maxwells/horse_cghorse.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 35% 0% !important;
    background-size: auto 100% !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

@media (max-width: 768px) {
  #footer::after {
     min-width: 250px;
  }
}

.hampter-header, .hampter-footer { display: block; opacity: 1; }
html, body {
  background-color: var(--color-body-bg, var(--color-background));
  background-image: radial-gradient(circle, var(--color-secondary) 0.5px, transparent 0.5px);
  background-size: 20px 20px;
  background-blend-mode: normal;
}
.hampter-wrapper { background: var(--color-page-bg, var(--color-background)); color: var(--color-ink); }
.bg-background { background-color: color-mix(in srgb, var(--color-background) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }

@media (max-width: 480px) {
  .hampter-header {
    padding: 0 !important;
  }
  .hampter-header > div {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .hampter-header .flex.justify-between {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .hampter-header .flex.justify-between .flex.gap-md {
    justify-content: space-between;
    gap: 0px;
  }

  .hampter-header button.material-symbols-outlined,
  .hampter-header a.material-symbols-outlined {
        padding: 0.25rem !important;
        border-width: 3px !important;
        font-size: 1.15rem !important;
  }
  .hampter-header #hampter-cart-toggle {
    width: auto !important;
    height: auto !important;
  }
  .hampter-header .js-cart-badge {
    top: -0.65rem !important;
    right: -0.65rem !important;
    width: 1.3rem !important;
    height: 1.3rem !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 525px) {
  .hampter-header button.material-symbols-outlined,
  .hampter-header a.material-symbols-outlined {
    padding: 0.3rem !important;
    border-width: 3px !important;
    font-size: 1.25rem !important;
  }
  .hampter-header .js-cart-badge {
    top: -0.7rem !important;
    right: -0.7rem !important;
    width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.75rem !important;
  }
  body#index .footer-shader-container {
    background: transparent !important;
  }
  body#index .footer-shader-container .footer-shader-bg {
    background: transparent !important;
  }
  body#index .footer-shader-overlay {
    display: none !important;
  }
}

/* Make the parent-theme HOOK_HOME wrappers blend in if any remain */
.hampter-home-hook .products,
.hampter-home-hook .featured-products,
.hampter-home-hook .product_list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.hero-gnome-frame {
  border-radius: 2rem;
  max-width: 420px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  box-shadow: unset;
  max-width: 35rem!important;
}
.hero-gnome-frame model-viewer {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-gnome-gauge {
  min-width: 260px;
}
.hero-gnome-gauge-track {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
}
.hero-gnome-gauge-track::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    #ff1c68,
    #ff8a00,
    #fffb00,
    #28ff55,
    #0afaf2,
    #3c7bff,
    #d33dff,
    #ff1c68
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.hero-gnome-gauge-fill {
  width: 74%;
  background: linear-gradient(90deg, #ff1c68, #ff8a00, #fffb00, #28ff55, #0afaf2, #3c7bff, #d33dff);
  box-shadow: 0 0 24px rgba(115, 57, 211, 0.25);
}
.hero-gnome-gauge-label,
.hero-gnome-arrow-text {
  color: var(--color-ink);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}
.hero-gnome-gauge-label {
  font-family: 'Chelsea Market', cursive;
}
.hero-gnome-arrow-text {
  font-family: 'Chelsea Market', cursive;
}

@media (max-width: 1024px) {
  .hero-gnome-arrow {
    right: -4rem;
    top: 45%;
  }
}

@media (max-width: 768px) {

  .index_subtitle{
    margin-bottom:unset!important;
    padding-top:20px!important;
  }

  .hero-gnome-frame {
    max-width: min(360px , 35vw)!important;
  }
  .hero-gnome-gauge {
    left: 1rem!important;
    right: auto!important;
    width: calc(100% + 1rem)!important;
    transform: unset!important;
  }
  .hero-gnome-arrow {
        right: 1rem !important;
        top: auto !important;
        bottom: 5rem !important;
        transform: none !important;
  }

  .dwarf3D_wrapper{
    flex-direction:row!important;
    width:100%!important;
        margin-top: -56px;
  }
  .hero-gnome-gauge{
    bottom: 0%!important;
    max-width: max(30vw, 150px)!important;
  }

  .hero-gnome-gauge-label{
    font-size:10px!important;
  }

  .hero-gnome-arrow img{
        width: 3rem!important;
  }

  .hampter-confirmation-footer__message {
    font-size: 0.55rem;
  }

  .hampter-confirmation-hero__title{
        position: absolute;
        left: 50%;
        transform: translate(-50%, 50%);
        bottom: 50%;

  }

  .hampter-confirmation-body{
    padding:unset!important;
  }

  .hampter-confirmation-product-detail{
    min-width: unset!important;
  }

  .hampter-confirmation-card dt{
    font-size: 0.75rem!important;
  }
  .hampter-confirmation-card dd{
    font-size: 0.65rem!important;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important; animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important;
  }
  .animate-entrance { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.visually-hidden-focusable, #emailsubscription_anchor_, .visually-hidden{
    display: none;
}

/* ── Quest cat (bouncing mascot) ── */
@keyframes quest-cat-bounce {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  25%      { transform: translateY(-22px) rotate(4deg); }
  50%      { transform: translateY(0) rotate(-2deg); }
  75%      { transform: translateY(-10px) rotate(6deg); }
}
#quest-cat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 90px;
  height: auto;
  z-index: 90;
  cursor: pointer;
  animation: quest-cat-bounce 1.4s cubic-bezier(.34,1.56,.64,1) infinite;
  filter: drop-shadow(4px 4px 0 var(--color-ink));
  transition: transform 0.15s ease-out;
}
#quest-cat:hover { transform: scale(1.15) rotate(-10deg); }

/* ── Product page interactions (matches pageProduitAvecPanier mockup) ── */
@keyframes boiling {
  0%   { border-radius: 2% 98% 3% 97% / 96% 4% 95% 5%; transform: skew(0deg); }
  33%  { border-radius: 4% 95% 2% 98% / 92% 8% 94% 6%; transform: skew(0.5deg, -0.2deg); }
  66%  { border-radius: 3% 97% 5% 95% / 98% 2% 93% 7%; transform: skew(-0.3deg, 0.4deg); }
  100% { border-radius: 2% 98% 3% 97% / 96% 4% 95% 5%; transform: skew(0deg); }
}
.boiling-border {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  animation: none;
}

.boiling-border::before {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: 0;
  pointer-events: none;
  background-image: url('../divers/contour.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.boiling-border > * {
  position: relative;
  z-index: 1;
}

.hover-tilt:hover { transform: rotate(2deg) scale(1.02); }

@keyframes hover-shake {
  0%   { transform: translate(1px, 1px) rotate(0deg); }
  20%  { transform: translate(-1px, -1px) rotate(-1deg); }
  40%  { transform: translate(-2px, 0px) rotate(1deg); }
  60%  { transform: translate(2px, 1px) rotate(0deg); }
  80%  { transform: translate(1px, -1px) rotate(1deg); }
  100% { transform: translate(-1px, 2px) rotate(-1deg); }
}
.hover-shake:hover { animation: hover-shake 0.15s infinite; }

.glitch-hover:hover {
  box-shadow: -4px 0 0 0 var(--color-primary-hover), 4px 0 0 0 var(--color-secondary-container);
  transform: scale(1.1);
}

.btn-press:active {
  transform: scale(0.9) translate(2px, 2px);
  box-shadow: 1px 1px 0 0 !important;
}

.product__add-to-cart-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--color-background);
  border: 5px solid var(--color-ink);
  border-radius: 1.25rem;
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.12);
}

.product__actions-qty-add {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.product__add-to-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border: 5px solid var(--color-ink);
  border-radius: 0.75rem;
  background: var(--color-secondary-container);
  color: var(--color-ink);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 8px 8px 0 0 var(--color-ink);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.product__add-to-cart-button:hover {
  transform: rotate(0deg) translate(2px, 2px);
  box-shadow: 4px 4px 0 0 var(--color-ink);
  background: var(--color-accent-hover);
}

.product__add-to-cart-button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--color-ink);
}

.product__add-to-cart-button .material-icons {
  font-size: 1.1rem;
}

/* .product-flags {
  position: relative;
}

.product-flags .badge.new {
  position: absolute;
  top: -1rem;
  right: -1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-error);
  color: var(--color-surface-white);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  border: 4px solid var(--color-ink);
  border-radius: 0.75rem;
  transform: rotate(15deg);
  box-shadow: 4px 4px 0 0 var(--color-ink);
  cursor: help;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.product-flags .badge.new:hover {
  transform: rotate(15deg) translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--color-ink);
} */

.breadcrumb__wrapper {
  /* background: var(--color-background);
  border-bottom: 4px solid var(--color-ink); */
      position: absolute;
}
.breadcrumb__wrapper .container {
    padding: 1rem 1rem;
    z-index: 600;
    position: absolute;
    display: flex;
    width: fit-content;
    min-width: 30vw;

}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.875rem 1rem;
  list-style: none;
  background: var(--color-surface-white);
  /* border: 5px solid var(--color-ink); */
  border-radius: 1.25rem;
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.12);
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Barriecito", system-ui!important;
  font-weight: 700;
  color: var(--color-ink);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "→";
  color: var(--color-secondary-container);
  font-weight: 900;
}
.breadcrumb-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.breadcrumb-link:hover,
.breadcrumb-link:focus {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.breadcrumb-item[aria-current="page"] .breadcrumb-link,
.breadcrumb-item[aria-current="page"] > span {
  color: var(--color-primary);
  font-style: italic;
}
@media (max-width: 768px) {
  .breadcrumb {
    padding: 0.75rem 0.85rem;
    gap: 0.5rem;
  }
}

.transition-chaotic { transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

@keyframes entrance-wobble-mockup {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.entrance-wobble {
  animation: entrance-wobble-mockup 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

/* ── Hampter slide-in cart drawer (used in header) ── */
.hampter-cart-drawer {
  position: fixed; top: 0; right: 0;
  height: 100%; width: 100%;
  max-width: 450px;
  background: var(--color-background);
  z-index: 1060;
  border-left: 5px solid var(--color-ink);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  box-shadow: unset;
  overflow-y: auto;
}
.hampter-cart-drawer.is-open { transform: translateX(0);box-shadow: -10px 0 0 0 color-mix(in srgb, var(--color-secondary-container) 50%, transparent); }
.hampter-cart-overlay {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--color-ink) 20%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1055;
  display: none;
}
.hampter-cart-overlay.is-open { display: block; }
body.cart-drawer-open { overflow: hidden; }

@keyframes goblin-wiggle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

.goblin-tab {
  animation: goblin-wiggle 2s infinite ease-in-out;
}

.goblin-tab .goblin-tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.goblin-tab:hover .goblin-tooltip {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════
   PRODUCT PAGE — Hampter Variants (pills & swatches)
════════════════════════════════════════════════════════ */

.hv-wrap { display: flex; flex-direction: column; gap: 18px; }

/* Group header */
.hv-group__hd { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.hv-group__name {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.hv-group__cur { font-size: 13px; color: color-mix(in srgb, var(--color-ink) 40%, transparent); }

/* ── Colour swatches ── */
.hv-swatches { display: flex; gap: 10px; flex-wrap: wrap; }

.hv-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }

.hv-swatch__dot {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--color-ink);
  box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.hv-swatch:hover .hv-swatch__dot {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--color-ink);
}
/* .hv-swatch--on .hv-swatch__dot, */
.hv-swatch:has(input:checked) .hv-swatch__dot {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent;
  outline: 3px solid var(--color-secondary-container);
  outline-offset: 3px;
}
/* .hv-swatch--on .hv-swatch__dot::after, */
.hv-swatch:has(input:checked) .hv-swatch__dot::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900;
  color: var(--color-surface-white);
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
.hv-swatch__lbl { font-size: 11px; font-weight: 600; text-align: center; }

/* ── Pill buttons ── */
.hv-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.hv-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border: 2.5px solid var(--color-ink);
  border-radius: 2px 10px 3px 8px / 8px 3px 10px 2px;
  background: var(--color-surface-white);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
  user-select: none;
  line-height: 1.3;
}
.hv-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-ink);
  background: var(--color-surface-cream);
}
/* .hv-pill--on, */
.hv-pill:has(input:checked) {
  background: var(--color-secondary-container);
  color: var(--color-surface-white);
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent;
}
/* .hv-pill--on:hover, */
.hv-pill:has(input:checked):hover {
  background: var(--color-accent-hover);
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent;
}
.hv-pill__ic { font-size: 17px; line-height: 1; }

.hv-pills--size {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0px;
  max-width: min(980px, 100%);
  margin: 0 auto;
  overflow-x: visible;
}
.hv-pills--size .hv-pill {
  flex: 0 1 auto;
  min-width: unset;
  min-height: 180px;
  background: unset !important;
  border: unset !important;
  box-shadow: unset !important;

}
.hv-pills--count-2 .hv-pill { width: calc((100% - 8px) / 2); }
.hv-pills--count-3 .hv-pill { width: calc((100% - 16px) / 3); }
.hv-pills--count-4 .hv-pill { width: calc((100% - 24px) / 4); }
.hv-pills--count-5 .hv-pill { width: calc((100% - 32px) / 5); }
.hv-pills--count-6 .hv-pill { width: calc((100% - 40px) / 6); }
.hv-pills--count-7 .hv-pill { width: calc((100% - 48px) / 7); }
.hv-pills--count-8 .hv-pill { width: calc((100% - 56px) / 8); }
.hv-pill--cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 500 / 180;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: none;
  background: none;
  overflow: visible;
  transition: transform 0.15s ease;
}
.hv-pill--cat .hv-pill__image {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  object-position: center;
  filter: saturate(1.1) contrast(1.05) drop-shadow(0 0 0 rgba(255, 255, 255, 0.95));
  transition: filter 0.15s ease, transform 0.15s ease;
  transform-origin: center;
}
.hv-pill--cat:hover .hv-pill__image {
  transform: scale(1.01);
filter: drop-shadow(7px 2px 0  var(--color-ink)) 
}
.hv-pill--cat:has(input:checked) .hv-pill__image {
  transform: scale(1.01);
  filter: drop-shadow(10px 3px 0  var(--color-accent-hover));
}
.hv-pill--cat .hv-pill__txt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 900;
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  /* backdrop-filter: blur(2px); */
  mix-blend-mode: difference;
  /* background: rgba(255, 255, 255, 0.12); */
}
.hv-pill--cat:hover {
  transform: translateY(-2px);
}
.hv-size-feedback {
  margin-top: 8px;
  text-align: center;
}
.hv-size-feedback__link {
  color: var(--color-ink);
  text-decoration: underline;
  font-size: 13px;
}
.dumbass-meme-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  pointer-events: none;
}
.dumbass-meme-overlay img {
  max-width: 500px;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: none;
  transition: opacity 0.05s ease, transform 0.05s ease;
}
.dumbass-meme-overlay--hide img {
  opacity: 0;
  transform: scale(1.02);
}
@keyframes dumbass-meme-fade {
  0% { opacity: 0; transform: scale(0.92); }
  16.67% { opacity: 1; transform: scale(1); }
  83.33% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}
.hv-pill--cat:has(input:checked) {
  border-color: var(--color-secondary-container);
  box-shadow: 0 0 0 transparent;
}
.hv-pill--cat:has(input:checked) .hv-pill__txt {
  /* background: rgba(0, 0, 0, 0.18); */
}
/* .hv-pill--cat-s .hv-pill__image { background-image: url('../divers/catsize/catS.png'); }
.hv-pill--cat-m .hv-pill__image { background-image: url('../divers/catsize/catM.png'); }
.hv-pill--cat-l .hv-pill__image { background-image: url('../divers/catsize/catL.png'); }
.hv-pill--cat-xl .hv-pill__image { background-image: url('../divers/catsize/catXL.png'); }
.hv-pill--cat-xxl .hv-pill__image { background-image: url('../divers/catsize/catXXL.png'); } */

/* ════════════════════════════════════════════════════════
   PRODUCT PAGE — Image zone & zoom
════════════════════════════════════════════════════════ */

/* Make the image area show zoom cursor and hint */
.hampter-img-zone { position: relative; }
.hampter-img-zone .carousel-inner {
  background: transparent;
}

.hampter-img-zone .carousel-item,
.hampter-img-zone .carousel-item.active {
  /* background-image: url('../divers/cadre_carré_whitebg.png'); */
  background-image: url('../divers/cadre/cadre7.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: clamp(30px, 6vw, 42px);
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hampter-img-zone .carousel-item picture,
.hampter-img-zone .carousel-item.active picture {
  display: block;
}

.hampter-img-zone .carousel-item img,
.hampter-img-zone .carousel-item.active img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height:550px;
}

@media (max-width: 768px) {
  .hampter-img-zone .carousel-item,
  .hampter-img-zone .carousel-item.active {
    padding: clamp(22px, 7.5vw, 44px);
  }
}

.hampter-img-zone .carousel-item,
.hampter-img-zone .carousel-item picture,
.hampter-img-zone .carousel-item img { cursor: zoom-in; }

/* Zoom hint pill that fades in on hover */
.hampter-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: color-mix(in srgb, var(--color-ink) 78%, transparent);
  color: var(--color-surface-white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 2px 8px 2px 8px / 8px 2px 8px 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
  letter-spacing: 0.04em;
}
.hampter-img-zone:hover .hampter-zoom-hint { opacity: 1; }

/* Make hummingbird's built-in zoom button more prominent */
.hampter-img-zone .product__zoom {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: color-mix(in srgb, var(--color-ink) 75%, transparent) !important;
  color: var(--color-surface-white) !important;
  border: 2px solid rgba(255,255,255,.3) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transition: opacity 0.2s !important;
  z-index: 6 !important;
}
.hampter-img-zone:hover .product__zoom { opacity: 1 !important; }

/* ════════════════════════════════════════════════════════
   PRODUCT PAGE — Trust badges
════════════════════════════════════════════════════════ */

.hv-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  isolation: isolate;
}
.hv-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../divers/contour.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.hv-badge .material-symbols-outlined { font-size: 26px; }

.hampter-section-separator {
  width: min(100%, 480px);
  /* margin: clamp(12px, 2.5vw, 24px) auto; */
  background: transparent;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.hampter-section-separator img {
  display: inline-block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: transparent;
}

.random-product-shell {
  position: relative;
  overflow: hidden;
}
.random-product-shell > .background-mauve {
  position: absolute;
  top: 0;
  left: -150%;
  width: 400%;
  height: 100%;
  z-index: 0;
  background-color: #cbc3f5;

  clip-path: polygon(
    0% 50%, 5% 40%, 10% 50%, 15% 40%, 20% 50%, 25% 40%, 30% 50%,
    35% 40%, 40% 50%, 45% 40%, 50% 50%, 55% 40%, 60% 50%, 65% 40%,
    70% 50%, 75% 40%, 80% 50%, 85% 40%, 90% 50%, 95% 40%, 100% 50%,
    105% 40%, 110% 50%, 115% 40%, 120% 50%, 125% 40%, 130% 50%,
    135% 40%, 140% 50%, 145% 40%, 150% 50%, 155% 40%, 160% 50%,
    165% 40%, 170% 50%, 175% 40%, 180% 50%, 185% 40%, 190% 50%,
    195% 40%, 200% 50%,
    200% 70%, 195% 60%, 190% 70%, 185% 60%, 180% 70%, 175% 60%,
    170% 70%, 165% 60%, 160% 70%, 155% 60%, 150% 70%, 145% 60%,
    140% 70%, 135% 60%, 130% 70%, 125% 60%, 120% 70%, 115% 60%,
    110% 70%, 105% 60%, 100% 70%,
    95% 60%, 90% 70%, 85% 60%, 80% 70%, 75% 60%, 70% 70%,
    65% 60%, 60% 70%, 55% 60%, 50% 70%, 45% 60%, 40% 70%, 35% 60%,
    30% 70%, 25% 60%, 20% 70%, 15% 60%, 10% 70%, 5% 60%, 0% 70%
  );
  animation: background-clip-slide 14s linear infinite;
}
.random-product-shell > .background-mauve::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 55%);
  z-index: 1;
}
.random-product-shell > .background-mauve {
  z-index: 0;
}
.random-product-shell > .background-mauve + .max-w-[1100px] {
  position: relative;
  z-index: 1;
}
.random-product-shell > .background-mauve,
.random-product-shell > .background-mauve + .max-w-[1100px] {
  pointer-events: none;
}
.random-product-shell > .background-mauve ~ * {
  background: transparent !important;
}
@keyframes background-clip-slide {
  0% { transform: translateX(-5%); }
  100% { transform: translateX(5%); }
}

body#index .hampter-section-separator {
  min-width:60vw;
  height: auto;
  margin: 0px auto;
  position: absolute;
  transform: translate(50%, -43%);
}






@media (max-width: 767px) {
  body#index .hampter-section-separator {
    /* position: relative;
    transform: none;
    margin: 0 auto 20px; */
    transform: translate(0%, -43%);
  }

  #hampter-result-shell{
    padding:unset!important;
  }

  #hampter-selector-display{
    background: unset !important;
    border: unset;
  }

  #random-product-widget {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 1rem;
  }
  #random-product-widget .random-product__image {
    flex: 0 0 110px;
    width: 110px;
    max-width: 110px;
    max-height: 110px;
    border-right-width: 0;
    border-bottom-width: 0;
  }
  #random-product-widget .random-product__image img,
  #random-product-widget .random-product__image > div {
    max-height: 110px;
    object-fit: cover;
  }
  #random-product-widget .random-product__info {
    gap: 0.5rem;
    padding: 1rem 0.75rem 0.75rem;
  }
  #random-product-widget .random-product__info h2 {
    font-size: 1.05rem;
    line-height: 1.15;
  }
  #random-product-widget .random-product__info .font-body-md {
    font-size: 0.9rem;
  }
  #random-product-widget .random-product__info .flex {
    width: 100%;
    flex-wrap: wrap;
  }
  #random-product-widget .random-product__info .flex a,
  #random-product-widget .random-product__info .flex button {
    flex: 1 1 100%;
  }

  .clouds-content > .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .clouds-content article {
    transform: none !important;
  }

  @media (min-width: 1024px) {
    .clouds-content > .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  #products-section #hampter-carousel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body#index h1,
  body#index h2,
  body#index h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  }
  body#index .font-headline-lg,
  body#index .text-headline-lg {
    font-size: 1.5rem;
  }
  body#index .font-body-md,
  body#index p,
  body#index .font-label-bold,
  body#index .font-display-meme {
    font-size: 1.25rem;
  }

  body#index h1.font-display-meme{
    
    font-size: 3rem;
  } 

  body#index .btn-rough {
    padding: .25rem .3rem;
    border-width: 2px;
    text-align:center;
  }
  #emergency-goblin-toggle,
  .goblin-tab {
    top: 35vh !important;
    left: 20px !important;
    transform: translate(-70%, -50%) !important;
    padding: 0.2rem !important;
  }
  #emergency-goblin-toggle span,
  .goblin-tab span {
    font-size: 0.65rem !important;
  }

  .hero-gnome-frame{
    height:235px;
    width:235px;
  }

  #index-hero{
    gap: unset!important;
    min-height: unset!important;
  }

  #random-product-widget{
        border: unset;
    background: unset;
    display: flex;
    align-items: center;
    background-color: unset !important;
  }

  #random-product-widget div, 
  #random-product-widget p, 
  #random-product-widget h2{
    font-size : 0.75rem!important;
  }

  h2.psychedelic-text{
        font-size: 1.5rem !important;
        text-align: center !important;
        margin: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
  }

  .scroll-frame-container .scroll-frame-window.hampter-window-panel.window {
    right:1rem!important;
    top:1rem!important;
  }

  .section_product.ps-seenrecently{
    padding-top:25px;
    padding-bottom:25px;
  }

  .breadcrumb-item{
    font-size: 0.8rem;
  }


  .breadcrumb__wrapper .container {
    min-width: 80vw;
  }



  .hampter-img-zone .carousel-item img, .hampter-img-zone .carousel-item.active img {
        min-height: 275px;
  }


  body#product .product__price {
    font-size: 1.0rem;
  }

}

@media (min-width: 1280px) {
  #products-section #hampter-carousel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ════════════════════════════════════════════════════════
   PRODUCT PAGE — Bottom tabs
════════════════════════════════════════════════════════ */

.hampter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 3px solid var(--color-ink);
  margin-bottom: 0;
}

.hampter-tab-btn {
  padding: 10px 22px;
  border: 2.5px solid var(--color-ink);
  border-bottom: none;
  background: var(--color-surface-highest);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  margin-bottom: -3px;
  transition: background 0.12s, transform 0.12s;
  border-radius: 4px 8px 0 0 / 8px 4px 0 0;
  position: relative;
  color: var(--color-ink);
}
.hampter-tab-btn + .hampter-tab-btn { border-left: none; }
.hampter-tab-btn:not(.is-active):hover {
  background: color-mix(in srgb, var(--color-secondary-container) 30%, var(--color-surface-white));
  transform: translateY(-2px);
}
.hampter-tab-btn.is-active {
  background: var(--color-surface-white);
  border-bottom: 3px solid var(--color-surface-white);
  z-index: 1;
}

.hampter-tab-pane { display: none; }
.hampter-tab-pane.is-active {
  display: block;
  border: 2.5px solid var(--color-ink);
  border-top: none;
  background: var(--color-surface-white);
  animation: entrance-wobble-mockup 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Reviews tab — clean up productcomments module output */
.hampter-reviews { padding: 8px; }
.hampter-reviews .productcomments-reviews { border: none !important; padding: 0 !important; }
.hampter-reviews .comment-infos { font-size: 12px; }

/* ════════════════════════════════════════════════════════
   PRODUCT PAGE — Recommended / Same category sections
════════════════════════════════════════════════════════ */

.hampter-section {
  position: relative;
  background: var(--color-surface-high);
  border: 3px solid var(--color-ink);
  border-radius: 6px 14px 8px 12px / 12px 8px 14px 6px;
  box-shadow: 6px 6px 0 var(--color-ink);
  padding: 24px;
}

.hampter-section + .hampter-section { margin-top: 32px; }

.hampter-section__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: -36px 0 20px 0;
  padding: 6px 18px;
  background: var(--color-secondary-container);
  color: var(--color-ink);
  border: 3px solid var(--color-ink);
  border-radius: 4px 10px 4px 10px / 10px 4px 10px 4px;
  box-shadow: 4px 4px 0 var(--color-ink);
  transform: rotate(-1.5deg);
}
.hampter-section__title .material-symbols-outlined {
  font-size: 24px;
}

.hampter-section__body { }

/* Force inner product lists into a clean grid */
.hampter-section .products,
.hampter-section .product_list,
.hampter-section .productscategory_list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cancel any module-level heading inside same-category section, we render our own */
.hampter-same-cat > h2,
.hampter-same-cat > .products-section-title,
.hampter-same-cat .productscategory_block h2 {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 18px;
  display: inline-block;
  padding: 6px 18px;
  background: var(--color-ink);
  color: var(--color-surface-white);
  border-radius: 4px 10px 4px 10px / 10px 4px 10px 4px;
  transform: rotate(-1deg);
}

/* Legacy alias kept for safety */
.hampter-similar { }
.hampter-similar .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

/* ════════════════════════════════════════════════════════
   PRODUCT PAGE — Responsive tweaks
════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hampter-tab-btn { padding: 8px 14px; font-size: 11px; }
  .hv-pill { padding: 5px 12px; font-size: 12px; }
  .hv-swatch__dot { width: 36px; height: 36px; }
}


.visually-hidden,.hv-group__hd, .product__thumbnails, .product-images-modal, #mainproductimageswitcher-debug, .product-actions__quantity,.ps-sharebuttons, .product__tax-label{
  display: none !important;
}


.product__add-to-cart-container {
    display: unset;
    flex-direction: column;
    gap: 1rem;
    padding: unset;
    background: unset;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
}

.hampter-cart-image-btn {
  width: min(100%, 340px);
  max-width: 100%;
  height: 88px;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
  transition: transform 100ms ease;
}

.hampter-cart-image-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hampter-cart-image-btn:hover {
  transform: translateY(-1px);
}

.hampter-cart-image-btn:active,
.hampter-cart-image-btn.is-pressed {
  transform: translateY(2px) scale(0.99);
}

.hampter-cart-image-btn:disabled,
.hampter-cart-image-btn[aria-disabled='true'] {
  opacity: 0.95;
  cursor: not-allowed;
}

.breadcrumb-item,.font-handdrawn{
    font-family: "Barriecito", system-ui!important;
}

.breadcrumb{
      box-shadow: 2px 2px 0 0 rgb(0 0 0 / .12);
}

.hampter-home__card{
      box-shadow: unset!important;
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      transition: box-shadow 0.2s ease;
}
.hampter-home__card:hover {
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}


.hampter-home__card .hampter-home__price-panel img{
  image-rendering: pixelated;
}


.hampter-home__card .hampter-home__price-panel {
      position: absolute;
      /* right: 1rem;
      bottom: 50%; */
      z-index: 20;
      transform: perspective(400px) rotateX(6deg) rotate(6deg);
      transform-origin: left bottom;
      width: auto;
      max-width: 35%;
      min-width: 5.5rem;
        /* right: -0.35rem; */
        bottom: 30%;
        right: 0.65rem;
      
}
.hampter-home__card .hampter-home__price-panel.hampter-home__price-panel--mirror {
      transform: perspective(400px) rotateX(6deg) rotate(-6deg);
}

.hampter-home__card .hampter-home__price-panel.hampter-home__price-panel--mirror .hampter-home__price-text {
    transform: translateY(.1rem) rotate(-8deg);
    bottom: 50%;
}

.hampter-home__card .hampter-home__price-panel.hampter-home__price-panel--mirror .hampter-home__price-bg {
      transform: scaleX(-1);
}
.hampter-home__card .hampter-home__price-panel .hampter-home__price-bg {
      display: block;
      width: 100%;
      height: auto;
      height:85px;
      width:85px;
          filter: brightness(1.25) grayscale(0.4);
}
.hampter-home__card .hampter-home__price-text {
      position: absolute;
      left: 18%;
      bottom: 46%;
      display: inline-block;
      font-family: 'Chelsea Market', cursive;
      font-size: clamp(1rem, 1.3vw, 1.5rem);
      color: #111;
      line-height: 1;
      transform: translateY(0.1rem) rotate(12deg);
      text-shadow: 0 1px 0 rgba(255,255,255,0.7);
      letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .hampter-home__card .hampter-home__price-panel {

    bottom: 18%;
    right: 0.5rem;
  }

  .hampter-home__card .hampter-home__price-text {
    font-size: clamp(0.65rem, 1.2vw, 0.9rem);
    left: 16%;
    bottom: 44%;
  }
}

/* Category page custom styles */
.category-filter-stub .font-label-bold {
  text-transform: uppercase;
}
.category-filter-stub input[type="checkbox"] {
  accent-color: var(--color-secondary-container);
}
.product-miniature {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.product-miniature .marker-btn {
  width: 100%;
}
.product-miniature .product-miniature__image-container {
  min-height: 240px;
}
.product-miniature .product-miniature__image-link img {
  object-fit: cover;
}

.category-page-shell {
  min-height: 100vh;
  background-color: var(--color-background);
  background-image: radial-gradient(var(--color-primary) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

#center-column {
  min-width: 100vw;
}

#products {
  max-width: 85vw;
  margin: auto;
}

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

.abuse-goblin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 105;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.abuse-goblin-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.abuse-goblin-panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(560px, 92vw);
  z-index: 110;
  transform: translateX(-105%);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  background: rgba(255, 255, 255, 0.97);
  /* border-right: 4px solid var(--color-ink); */
  border-right: unset;
  box-shadow: unset;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.abuse-goblin-panel.visible {
  transform: translateX(0);
  pointer-events: auto;
}

.abuse-goblin-panel__inner {
  position: relative;
  padding: 24px 18px 24px;
  overflow-y: auto;
  height: 100%;
}

.abuse-goblin-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 3px solid var(--color-ink);
  background: var(--color-error, var(--color-error));
  color: var(--color-surface-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.abuse-goblin-panel__close:hover {
  transform: rotate(8deg);
}

.category-description-panel {
  border-radius: 24px;
  background: var(--color-surface-high);
}

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9998;
  display: none;
}

.settings-overlay.visible {
  display: block;
}

.settings-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 95vw);
  height: 100vh;
  padding: 24px;
  z-index: 9999;
  align-items: flex-start;
  justify-content: flex-start;
  background: color-mix(in srgb, var(--color-background) 95%, transparent);
  overflow-y: auto;
}

.settings-drawer.open {
  display: flex !important;
}

.settings-panel {
  width: 100%;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 2px dashed var(--color-ink);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.settings-section__title {
  font-family: var(--font-display-meme, 'Barriecito', cursive);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .04em;
}

.settings-section input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary, var(--color-primary));
}

.hampter-reduce-motion *,
.hampter-reduce-motion *::before,
.hampter-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

.goblin-btn {
  gap: 0.75rem;
  border-radius: 18px;
  text-transform: uppercase;
}

.rotate-click {
  animation: rotate-click 0.3s ease-in-out;
}

@keyframes rotate-click {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.category-page-shell .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.category-page-shell .product-miniature {
  background: var(--color-surface-white);
  border: 4px solid var(--color-ink);
  border-radius: 24px;
  box-shadow: 10px 10px 0 0 var(--color-ink);
}

.category-page-shell .marker-btn,
.category-page-shell .btn-rough {
  border-radius: 18px;
}

.category-page-shell .category-description-panel,
.category-page-shell .settings-panel,
.category-page-shell .goblin-btn {
  box-shadow: 8px 8px 0 rgba(0,0,0,1);
}

body#category #search_filters_wrapper,
body#category #ps-categorytree,
body#category #ps-facetedsearch,
body#category #left-column {
  display: none!important;
}

/* ──────────────────────────────────────────────────────────────
   Runtime theme-color overrides
   The Tailwind CDN bakes the original hex colors into the
   generated utility classes, so to allow live theming via the
   settings drawer we override the relevant utilities to use
   CSS custom properties. Defaults match the original palette.
   Opacity modifiers (bg-primary/50 etc.) are supported via
   --tw-bg-opacity / --tw-text-opacity / --tw-border-opacity.
   ────────────────────────────────────────────────────────────── */

/* Tailwind opacity variables — controlled by the settings drawer */
:root {
  --tw-bg-opacity:     1;
  --tw-text-opacity:   1;
  --tw-border-opacity: 1;
}

.bg-primary       { background-color: color-mix(in srgb, var(--color-primary) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }
.text-primary     { color: color-mix(in srgb, var(--color-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important; }
.border-primary   { border-color: color-mix(in srgb, var(--color-primary) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; }
.fill-primary     { fill: var(--color-primary) !important; }
.stroke-primary   { stroke: var(--color-primary) !important; }
.ring-primary     { --tw-ring-color: var(--color-primary) !important; }
.shadow-primary   { --tw-shadow-color: var(--color-primary) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.from-primary     { --tw-gradient-from: var(--color-primary) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(0 63 135 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-primary       { --tw-gradient-to: var(--color-primary) var(--tw-gradient-to-position) !important; }
.via-primary      { --tw-gradient-to: rgb(0 63 135 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--color-primary) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.accent-primary   { accent-color: var(--color-primary) !important; }
.outline-primary  { outline-color: var(--color-primary) !important; }
.caret-primary    { caret-color: var(--color-primary) !important; }
.decoration-primary { text-decoration-color: var(--color-primary) !important; }
.divide-primary > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-primary) !important; }
.placeholder-primary::placeholder { color: var(--color-primary) !important; }

.bg-secondary     { background-color: color-mix(in srgb, var(--color-secondary) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }
.text-secondary   { color: color-mix(in srgb, var(--color-secondary) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important; }
.border-secondary { border-color: color-mix(in srgb, var(--color-secondary) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; }
.fill-secondary   { fill: var(--color-secondary) !important; }
.stroke-secondary { stroke: var(--color-secondary) !important; }
.ring-secondary   { --tw-ring-color: var(--color-secondary) !important; }
.shadow-secondary { --tw-shadow-color: var(--color-secondary) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.from-secondary   { --tw-gradient-from: var(--color-secondary) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(139 80 0 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-secondary     { --tw-gradient-to: var(--color-secondary) var(--tw-gradient-to-position) !important; }
.via-secondary    { --tw-gradient-to: rgb(139 80 0 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--color-secondary) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.accent-secondary { accent-color: var(--color-secondary) !important; }
.outline-secondary { outline-color: var(--color-secondary) !important; }
.caret-secondary  { caret-color: var(--color-secondary) !important; }
.decoration-secondary { text-decoration-color: var(--color-secondary) !important; }
.divide-secondary > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-secondary) !important; }
.placeholder-secondary::placeholder { color: var(--color-secondary) !important; }

/* Hover variants for the most common cases used by the theme */
.hover\:text-primary:hover   { color: var(--color-primary) !important; }
.hover\:bg-primary:hover     { background-color: color-mix(in srgb, var(--color-primary) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }
.hover\:text-secondary:hover { color: var(--color-secondary) !important; }
.hover\:bg-secondary:hover   { background-color: color-mix(in srgb, var(--color-secondary) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }
.bg-tertiary-fixed   { background-color: color-mix(in srgb, var(--color-tertiary-fixed) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }
.text-tertiary-fixed { color: color-mix(in srgb, var(--color-tertiary-fixed) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important; }
.bg-on-background    { background-color: color-mix(in srgb, var(--color-ink) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }
.text-on-background  { color: color-mix(in srgb, var(--color-ink) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important; }
.bg-surface          { background-color: color-mix(in srgb, var(--color-surface) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; }
.group:hover .group-hover\:text-primary   { color: var(--color-primary) !important; }
.group:hover .group-hover\:text-secondary { color: var(--color-secondary) !important; }



/* ── Goblin close button ── */
#abuse-goblin-close {
  border: unset;
}

/* ── Indie Flower font utility ── */
.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-mende-kikakui-regular {
  font-family: "Noto Sans Mende Kikakui", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.hampter-horoscope-philosophie {
  font-family: "Noto Sans Mende Kikakui", sans-serif !important;
}

#hampter-horoscope-random-phrase {
  font-family: "Noto Sans Mende Kikakui", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ── Bootstrap compat: toast-container uses .position-fixed which Bootstrap
   normally provides. Without Bootstrap loaded, it falls back to static flow
   and takes up space. Force it fixed here. ── */
.toast-container.position-fixed,
#js-toast-container {
  position: fixed !important;
  top: 0;
  right: 0;
  z-index: 1100;
  pointer-events: none;
}
.toast-container.position-fixed .toast,
#js-toast-container .toast {
  pointer-events: auto;
}

/* Color-picker styling inside the settings drawer */
.settings-color-input {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 32px;
  border: 3px solid var(--color-ink);
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
}
.settings-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.settings-color-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.settings-color-input::-moz-color-swatch { border: none; border-radius: 2px; }

/* ════════════════════════════════════════════════════════
   SUBWAY SURFER easter egg — toast + fullscreen popup
════════════════════════════════════════════════════════ */
@keyframes subway-toast-in {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#subway-surfer-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 99999;
  animation: subway-toast-in 0.5s cubic-bezier(.34,1.56,.64,1) both;
  max-width: min(520px, 95vw);
  width: 100%;
}
.subway-surfer-toast__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--color-ink);
  color: var(--color-surface-white);
  border: 4px solid var(--color-secondary-container);
  border-radius: 4px 20px 4px 20px / 20px 4px 20px 4px;
  box-shadow: 8px 8px 0 var(--color-secondary-container);
  font-family: 'Roboto', sans-serif;
}
.subway-surfer-toast__msg {
  flex: 1 1 200px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}
#subway-surfer-cta {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--color-secondary-container);
  color: var(--color-ink);
  border: 3px solid var(--color-surface-white);
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  #subway-surfer-toast {
    left: auto;
    right: 16px;
    bottom: 16px;
    transform: none;
    width: auto;
    max-width: calc(100% - 32px);
  }
  .subway-surfer-toast__inner {
    gap: 8px;
    padding: 10px 12px;
    border-width: 3px;
    box-shadow: 6px 6px 0 var(--color-secondary-container);
  }
  .subway-surfer-toast__msg {
    flex: 1 1 150px;
    font-size: 0.75rem;
    line-height: 1.25;
  }
  #subway-surfer-cta {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-width: 2px;
  }
}
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--color-surface-white);
  transition: transform .1s, box-shadow .1s;
}
#subway-surfer-cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-surface-white);
}
#subway-surfer-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--color-surface-white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 4px;
}
#subway-surfer-dismiss:hover { opacity: 1; }

#subway-surfer-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.subway-surfer-popup {
  position: relative;
  width: min(900px, 96vw);
  height: min(600px, 92vh);
  display: flex;
  flex-direction: column;
  border: 5px solid var(--color-secondary-container);
  box-shadow: 12px 12px 0 var(--color-secondary-container);
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.subway-surfer-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 6px 14px;
  background: var(--color-error);
  color: var(--color-surface-white);
  border: 3px solid var(--color-surface-white);
  border-radius: 4px;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
}
.subway-surfer-popup__frame {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
}

#product #notifications{
  display:none;
}



/* ========================== panneaux prices  ========================*/

/* Container styling to keep everything perfectly aligned horizontally */
.hampter-home__price-text {
    display: inline-flex;
    align-items: baseline; /* Aligns the bottoms of the numbers naturally */
    font-weight: bold;
}

/* Euros (Main Number) */
.hampter-home__price-text .price-euros {
    font-size: 1.6rem; /* Make this whatever base size you want */
    line-height: 1;
}

/* The Comma */
.hampter-home__price-text .price-separator {
    font-size: 1.6rem;
    line-height: 1;
}

/* Cents (The Smaller Part) */
.hampter-home__price-text .price-cents {
    font-size: 1.3rem; /* Significantly smaller than the euros */
    align-self: flex-start; /* Positions the cents at the top of the price */
    position: relative;
    top: 0.1em; /* Micro-adjusts the height if needed */
    line-height: 1;
    margin-left: 1px;
}

.hampter-same-cat{
  background: unset!important;
}

body#checkout .emergency-goblin-toggle{
  display:none!important;
}

.recently-seen-card .hampter-home__price-text{
  display: none!important;
}

.relative_hampter-home__card-container .hampter-add-form{
  display:none;
}

.ps-seenrecently .recently-seen-price-panel,
.hampter-same-cat .recently-seen-price-panel,
.hampter-same-cat .hampter-home__price-panel,
.hampter-same-cat .addcart_form{
  display:none;
}

.ps-seenrecently .font-display-meme span,
.hampter-same-cat .font-display-meme span{
      background-image: url(/themes/theme_hampter/assets/divers/cadre/fond_titre.png);
    background: fill;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: unset;
    clip-path: unset;
    background-color: unset;
    background-opacity: 0.8;
}

.ps-seenrecently,
.hampter-section.hampter-same-cat {
  position: relative;
  overflow: hidden;
}

.ps-seenrecently::before,
.hampter-section.hampter-same-cat::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background-image: url('/themes/theme_hampter/assets/divers/bg_miscs/hamster_doodles1.png'); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.3;
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
}

.ps-seenrecently > *,
.hampter-section.hampter-same-cat > * {
  position: relative;
  z-index: 1;
}

.hampter-product .product__container {
  padding: 0 6vw;
}

@media (max-width: 767px) {
  body#product .hampter-product .product__container {
    min-height: 100vh;
    position: relative;
  }

  body#product .hampter-product .product__container::after {
    content: unset;
    display: unset;
    width: unset;
    height: unset;
  }

  .hampter-mod{
        padding: 0px 30px;
  }

  .hampter-home_price-panel-parent{
        transform: scale(0.65) translateX(2.65rem);
  }

  h2.font-display-meme{
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
  }

  #discover-hampter-btn{
    margin: auto;
    padding: 10px 45px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 1.15rem;
  }

    .hampter-confirmation-privacy-box{
    min-width:unset!important;
    max-width:unset!important;
  }
  
  .hampter-confirmation-body::before {
    z-index: 15!important;
    opacity: 0.6!important;
  }

}

body#product #center-column{
  padding-left: unset;
  padding-right: unset;
  padding-bottom:unset;
  padding-top:10px;
}

body{
      max-width: 100vw;
    overflow-x: hidden;

}

.index_subtitle {
      font-size: 1.35rem;

}

#hampter-cart-toggle{
    position: relative;
    overflow: visible;
}

.checkout-steps__list, .hampter-intro-card{
  display:none;
}


.hamster-speaker-widget { z-index: 1100; position: fixed ; }

body#product .product__price{
    font-size: 1.5rem!important;
    font-weight: 700!important;
    letter-spacing: 0.02em!important;
}

#product #center-column{
  padding-top: 0!important;
}


#product .product-hero-top{
  padding-top: 60px!important;
}


 /* .product__right *, .product__left *{    max-height: 80vh;} */

.product__right .carousel-item img{
  max-height: 65vh;
}
.product__right .carousel-inner{
    display: flex;
    align-items: center;
    justify-content: center;

}

.product__left {
  margin: auto;
}

.section_product:first-child{
  margin-top: 20vh;;
}

.section_product {
  background-color: var(--color-background)!important;
}

@media (max-width: 525px) {


    body#index .font-body-md,
  body#index p,
  body#index .font-label-bold,
  body#index .font-display-meme {
    font-size: 0.95rem;
  }

  .font-display-meme.squiggly_underline {
    font-size: 1.2rem;
  }

    body#index h1.font-display-meme{
    font-size: 2.6rem;
  } 

    .hero-gnome-gauge-label{
    font-size:8px;
  }

  #hampter-confirmation-dog img{
      max-width: 285px;
      margin: auto;
  }

}

body#order-confirmation #subway-surfer-toast{
  
  display:none!important;
}

#hampter-horoscope-month{
      border: 3px black solid;
    box-shadow: 5px 5px var(--color-primary);
    font-family: 'Barriecito';

}

.hampter-window-panel.window .content{
  max-height:85vh!important;
  overflow-y: scroll!important;
}