/** Shopify CDN: Minification failed

Line 11:0 Unexpected "{"
Line 165:0 Unexpected "}"
Line 246:6 Expected ":"
Line 322:0 Unexpected "}"
Line 4245:16 Expected identifier but found whitespace
Line 4245:17 Unexpected "blur("

**/
{
    font-family: sans-serif;
    background-color: #ffffff;
    color: #111111;
    margin: 0;
    padding: 0;
}


/* Global brand polish */
:root{
  --radius:12px;
  --gap:24px;
}
h1{
  font-size:clamp(28px,3.2vw,36px);
}
h2{
  font-size:clamp(22px,2.6vw,28px);
}
body{
  font-size:16px;
  line-height:1.55;
}
img{
  image-rendering:-webkit-optimize-contrast;
}
.product-card img,[class*="look-card"] img{
  aspect-ratio:4/5;
  object-fit:cover;
}

/* Hero section adjustments */
#shopify-section-hero .image-banner,
#shopify-section-hero .image-banner__media{
  max-height:560px;
  border-radius:12px;
  overflow:hidden;
}
#shopify-section-hero .image-banner__media img{
  width:100%;
  height:100%;

  /* Swiper product gallery styles */
.prod-wrap{
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap:32px; align-items:start; max-width:1200px; margin:32px auto; padding:0 16px;
}
@media (max-width: 980px){ .prod-wrap{ grid-template-columns: 1fr; gap:22px; } }

.gallery-swiper { border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.gallery-swiper .swiper-slide{ aspect-ratio: 4 / 5; }
.gallery-swiper img{ width:100%; height:100%; object-fit:cover; display:block; }

.thumbs-swiper{ margin-top:12px; }
.thumbs-swiper .swiper-slide{
  aspect-ratio: 1 / 1; border:1px solid #E9E9EC; border-radius:10px; overflow:hidden; cursor:pointer; opacity:.9;
  transition:.2s ease;
}
.thumbs-swiper .swiper-slide-thumb-active{ border-color:#0C1D37; opacity:1; }
.thumbs-swiper img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Verberg oude “onderste grid” als die nog bestaat */
.product-media-grid, .old-gallery-grid { display:none !important; }

  object-fit:cover;
  aspect-ratio:4/5;
}
#shopify-section-hero .image-banner::after{
  opacity:.08;
}


html {
  scroll-behavior: smooth;
}


/* Product card styling */
.product-card{
  border:1px solid #eaeaea;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  transition:transform .18s,box-shadow .18s;
}
@media (hover:hover){
  .product-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
  }
}

/* Look (Layering Looks) section styling */
#shopify-section-shopdelook .look-grid{
  display:grid;
  gap:24px;
}
@media (min-width:990px){
  #shopify-section-shopdelook .look-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
#shopify-section-shopdelook .look-card{
  border:1px solid #eaeaea;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}
#shopify-section-shopdelook .look-card img{
  aspect-ratio:4/5;
  object-fit:cover;
}

/* Service hub pre-footer */
#shopify-section-servicehub{
  background:#fafafa;
  padding:48px 0;
  border-top:1px solid #eee;
}
#shopify-section-servicehub .multicolumn{
  gap:24px;
}
#shopify-section-servicehub .multicolumn-card{
  border:1px solid #eaeaea;
  border-radius:12px;
  background:#fff;
  padding:16px 18px;
}

/* Mobile-specific USP bar */
@media (max-width:989px){
  #shopify-section-uspbar{
    position:sticky;
    bottom:0;
    background:#fff;
    border-top:1px solid #eaeaea;
    padding:10px 12px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  #shopify-section-uspbar .usp-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 16px;
  }
  #shopify-section-uspbar .whatsapp-wrapper{
    grid-column:1/-1;
  }
}

image-banner::after

#shopify-section-hero
}max-height:560px

image-banner__media
/* Global brand polish */
:root{
  --radius:12px;
  --gap:24px;
}
h1{font-size:clamp(28px,3.2vw,36px)}
h2{font-size:clamp(22px,2.6vw,28px)}
body{font-size:16px;line-height:1.55}
img{image-rendering:-webkit-optimize-contrast}

/* Product card and look card images maintain 4:5 aspect ratio */
.product-card img,[class*="look-card"] img{aspect-ratio:4/5;object-fit:cover}

/* Hero section styling */
#shopify-section-hero .image-banner,
#shopify-section-hero .image-banner__media{max-height:560px;border-radius:12px;overflow:hidden}
#shopify-section-hero .image-banner__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
#shopify-section-hero .image-banner::after{opacity:.10}
@media (max-width:989px){
  #shopify-section-hero .image-banner,
  #shopify-section-hero .image-banner__media{max-height:420px}
}

/* Product cards styling */
.product-card{border:1px solid #eaeaea;border-radius:12px;overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s}
.product-card img{aspect-ratio:4/5;object-fit:cover}
@media (hover:hover){.product-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}}

/* Layering looks grid styling */
#shopify-section-shopdelook .look-grid{display:grid;gap:24px}
@media (min-width:990px){#shopify-section-shopdelook .look-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#shopify-section-shopdelook .look-card{border:1px solid #eaeaea;border-radius:12px;overflow:hidden;background:#fff;box-shadow:none}
#shopify-section-shopdelook .look-card img{aspect-ratio:4/5;object-fit:cover}

/* Pre-footer service hub styling */
#shopify-section-servicehub{background:#fafafa;padding:48px 0;border-top:1px solid #eee}
#shopify-section-servicehub .multicolumn{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
#shopify-section-servicehub .multicolumn-card{border:1px solid #eaeaea;border-radius:12px;background:#fff;padding:16px 18px}
@media (max-width:989px){#shopify-section-servicehub .multicolumn{grid-template-columns:1fr}}
.Global brand polish
o
ne-product .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.product-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.product-image img {
  max-width: 100%;
  border-radius: 12px;
}
.product-info {
  flex: 1;
}
.product-info h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.price {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
/* voeg toe aan winkelmandje knop*/
.btn {
  background-color: black
  color: black
  padding: 1rem 2rem;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  text color: white
  

  
}
.product-usps ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 1.5rem;
}
.product-reviews p {
  margin: 0.5rem 0;
}


/* White shadow fade effect for all sections similar to header */
.shopify-section {
  position: relative;
  overflow: hidden;
}
.shopify-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}

/* Fix mobile overlap between brand-story and next section */
 
/* Customization: Align header navigation links to the left */
header nav ul {
  justify-content: flex-start !important;
  margin-left: 0 !important;
}
@media (max-width: 680px) {
  [id^="brand-story-"] {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
  }
}

/* Hide old Oger hero nav *}

/* Custom Navigation Styles */
.custom-nav {
  width: 100%;
  display: flex;
  justify-content: flex-start; /* alles naar links */
  align-items: center;
  padding: 0.5rem 1rem;
}

.custom-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px; /* ruimte tussen de links */
}

.custom-nav__link {
  text-decoration: none;
  color: inherit; /* neemt tekstkleur van thema over */
  font-weight: 500;
}

.custom-nav__link:hover {
  text-decoration: underline;
}


}

  padding-left: 0;
}
/* Remove left margin and padding on hero menu list items */
.oger-hero-menu li {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Remove left padding on first hero menu link */
.oger-hero-menu li:first-child a {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Shift hero menu further left */
.oger-hero-menu {
  margin-left: -80px !important;
}

/* Remove left padding/margin from nav bar and header wrapper to flush nav left */
.oger-hero-nav-bar {
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

.oger-hero-nav-bar .oger-hero-menu {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.oger-header-wrapper {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 9998;
}
#CartDrawer.is-active + .drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}
 
/* === Cart Drawer — veilige basis === */
#CartDrawer{
  display: none;                 /* dicht = onzichtbaar */
  position: fixed; top: 0; right: 0;
  height: 100%; width: min(420px,100%);
  background: #fff; box-shadow: -4px 0 16px rgba(0,0,0,.15);
  z-index: 9999; overflow: auto;
  font: inherit; color: inherit;
}
#CartDrawer.is-active{ display: block; }

.drawer-overlay{
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.35); z-index: 9998;
}
#CartDrawer.is-active + .drawer-overlay{ display: block; }


/* Ensure cart drawer button text is white like the checkout button */
.drawer__footer .button {
  color: #fff;          /* white text */
  background-color: #000; /* black background – adjust if needed */
}


/* Basic layout inside */
.drawer-inner{ display:flex; flex-direction:column; min-height:100%; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid #eee; }
.drawer-head h2{ margin:0; font-size:18px; font-weight:600; }
.drawer-close{ background:transparent; border:0; font-size:20px; line-height:1; cursor:pointer; }

.drawer-body{ padding:16px; flex:1 1 auto; overflow:auto; }
.drawer-list{ list-style:none; margin:0; padding:0; }
.drawer-line{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #f0f0f0; }
.line-title{ font-weight:600; color:inherit; text-decoration:none; }
.line-variant, .line-qty{ font-size:12px; color:#666; }
.line-right{ text-align:right; }
.line-compare{ font-size:12px; color:#999; text-decoration:line-through; }
.line-price{ font-weight:600; }
.line-remove{ background:none; border:0; color:#222; text-decoration:underline; font-size:12px; cursor:pointer; }

.drawer-foot{ padding:16px; border-top:1px solid #eee; display:grid; gap:10px; }
.foot-row{ display:flex; justify-content:space-between; font-size:14px; }
.foot-note{ margin:0; font-size:12px; color:#666; }
.btn{ display:block; text-align:center; padding:10px 12px; border:1px solid #222; border-radius:6px; color:#222; text-decoration:none; }
.btn-primary{ background:#111; color:#fff; border-color:#111; width: 390 }

/* Scroll blokkeren wanneer open (JS zet deze class op <html>) */
html.overflow-hidden{ overflow: hidden; }






/* ===== Cart Drawer – Italian Luxury ===== */
:root{
  --lux-ivory:#f7f4ee;
  --lux-espresso:#1f1a16;
  --lux-charcoal:#2b2a28;
  --lux-gold:#c7a45b;
  --lux-soft:rgba(31,26,22,.08);
}

/* Container */
#CartDrawer{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: color-mix(in oklab, var(--lux-ivory) 92%, white);
  color:var(--lux-charcoal);
  border-left:1px solid var(--lux-soft);
  box-shadow:-12px 0 30px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
}

/* Header */
#CartDrawer .drawer-head{
  padding:18px 22px;
  border-bottom:1px solid var(--lux-soft);
  display:flex;align-items:center;justify-content:space-between;
}
#CartDrawer .drawer-head h2{
  font-family:"Cormorant Garamond",serif;
  font-weight:600; letter-spacing:.2px; margin:0;
}
#CartDrawer .drawer-close{background:transparent;border:0;opacity:.7;cursor:pointer;padding:8px}
#CartDrawer .drawer-close:hover{opacity:1;transform:translateY(-1px)}

/* Lijst */
#CartDrawer .drawer-body{padding:12px 14px 6px}
#CartDrawer .drawer-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#CartDrawer .line{
  display:grid;grid-template-columns:72px 1fr auto;gap:12px;
  padding:12px;border:1px solid var(--lux-soft);border-radius:14px;background:#fff;
  animation: lux-slide-in .25s ease both;
}
#CartDrawer .line-title{font-weight:600;line-height:1.2;text-decoration:none;color:inherit}
#CartDrawer .line-variant{font-size:12.5px;opacity:.7;margin-top:2px}
#CartDrawer .line-price{font-weight:700;text-align:right}
#CartDrawer .line-compare{font-size:12.5px;opacity:.6;text-decoration:line-through}
#CartDrawer .line-remove{background:transparent;border:0;text-decoration:underline;font-size:12.5px;opacity:.75;cursor:pointer}
#CartDrawer .line-remove:hover{opacity:1}

/* Qty pill (werkt ook zonder JS; post met jouw form) */
#CartDrawer .line-qty{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lux-soft);
  border-radius:999px;padding:6px 10px;font-size:13px;margin-top:8px;
}
#CartDrawer .qty-btn{width:22px;height:22px;border-radius:999px;border:0;background:var(--lux-ivory);cursor:pointer}
#CartDrawer .qty-btn:hover{filter:brightness(.97)}

/* Footer */
#CartDrawer .drawer-foot{margin-top:6px;padding:18px 22px 22px;border-top:1px solid var(--lux-soft)}
#CartDrawer .foot-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
#CartDrawer .foot-row span:first-child{font-family:"Cormorant Garamond",serif}
#CartDrawer .foot-price{font-weight:700;font-size:18px}
#CartDrawer .foot-note{font-size:12.5px;opacity:.75;margin:8px 0 14px}

/* Buttons (alleen in Drawer) */
#CartDrawer .btn{background:var(--lux-espresso);color:#fff;border:1px solid var(--lux-espresso);box-shadow:0 14px 16px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.06)}
#CartDrawer .btn-primary{background:var(--lux-espresso);color:#fff;border:1px solid var(--lux-espresso);box-shadow:0 14px 16px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.06)}

#CartDrawer .btn-primary {
  font-size: 1rem; /* 👈 dit regelt lettergrootte */
  padding: 1rem 2rem;
  border-radius: 10px;
}


#CartDrawer .btn-primary:hover{transform:translateY(-1px)}
#CartDrawer .btn-outline{background:transparent;color:var(--lux-charcoal);border:1px solid var(--lux-soft)}

/* Free shipping progress (optioneel) */
#CartDrawer .progress-wrap{margin:12px 0 16px}
#CartDrawer .progress{height:6px;border-radius:999px;background:#eee;overflow:hidden}
#CartDrawer .progress>span{display:block;height:100%;width:var(--progress,0%);background:linear-gradient(90deg,var(--lux-gold),color-mix(in oklab,var(--lux-gold) 78%, #fff))}

/* Micro-motion */
@keyframes lux-slide-in{from{transform:translateX(12px);opacity:0}to{transform:translateX(0);opacity:1}}

.cart-count-bubble{display:inline-flex;min-width:1.25rem;height:1.25rem;align-items:center;justify-content:center;
font-size:.75rem;border-radius:9999px;padding:0 .3rem;margin-left:.35rem;background:#000;color:#fff}
.hidden{display:none!important}


.hidden { display: none !important; }




/* ====== TALNARO BUTTON STYLING ====== */

/* Productpagina knop */
.product-form__submit,
.btn.btn-primary {
  font-size: 1.0rem;          /* Grotere tekst */
  padding: 1.0rem 1.1rem;       /* Meer ruimte */
  border-radius: 12px;        /* Rondere hoeken */
  width: 100%;                /* Volledige breedte */
  font-weight: 600;           /* Iets vetter lettertype */
  text-transform: uppercase;  /* Luxe uitstraling */
  letter-spacing: 0.5px;
  background-color: #d4af37;  /* Goudachtig tintje */
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgb(0, 0, 0);
  transition: all 0.2s ease-in-out;
}

/* Hover effect */
.product-form__submit:hover,
.btn.btn-primary:hover {
  background-color: #c19b2d;
  transform: scale(1.04);
  box-shadow: 0 6px 15px rgb(0, 0, 0);
}

/* Disabled state (wanneer uitverkocht) */
.product-form__submit[disabled],
.btn.btn-primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;


  
}

#CartDrawer .btn-primary[name="checkout"] {
  text-transform: none !important; /* 🔥 maakt 'Afrekenen' normale tekst */
}



/* ===== TALNARO — Cart Drawer Knop Uitlijning ===== */
#CartDrawer .drawer-foot .btn {
  display: block;
  width: 100%;
  padding: 1rem 2rem;          /* uniforme hoogte */
  font-size: 1.05rem;          /* gelijke tekstgrootte */
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
}

/* Extra consistentie tussen "Naar winkelmand" en "Afrekenen" */
#CartDrawer .drawer-foot .btn-primary,
#CartDrawer .drawer-foot .btn {
  min-height: 52px;            /* vaste hoogte voor symmetrie */
}



/* ===== TALNARO — Cart Drawer Hover Animatie ===== */
#CartDrawer .drawer-foot .btn,
#CartDrawer .drawer-foot .btn-primary {
  transition: all 0.25s ease-in-out;
}

#CartDrawer .drawer-foot .btn:hover,
#CartDrawer .drawer-foot .btn-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}







/* ===== TALNARO TRUST BADGES ===== */
.trust-badges {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.1); /* subtiele lijn boven */
  text-align: center;
  font-size: 0.9rem;
  color: #111;
  font-weight: 500;
}

.trust-badges span {
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.3px;
}

.trust-badges span::before {
  content: "✔ ";
  color: var(--lux-gold, #d4af37); /* goudtint zoals Talnaro */
}





/* ===== TALNARO TRUST BADGES — LUXURY AURA EDITION ===== */
.trust-badges {
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  font-size: 0.95rem;
  color: #111;
  font-weight: 500;
  line-height: 1.6;
  opacity: 0;
  animation: talnaroFadeIn 0.9s ease forwards;
}

.trust-badges span {
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.35px;
  position: relative;
}

.trust-badges span::before {
  content: "✔ ";
  color: var(--lux-gold, #d4af37);
  font-weight: 600;
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.35));
  animation: talnaroGlow 2.5s ease-in-out infinite alternate;
}

/* === Luxe glow animaties === */
@keyframes talnaroFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes talnaroGlow {
  from { filter: drop-shadow(0 0 2px rgba(212,175,55,0.25)); }
  to { filter: drop-shadow(0 0 6px rgba(212,175,55,0.5)); }
}






/* ===== TALNARO TRUST BADGES — GOLD SHIMMER AURA EDITION ===== */
.trust-badges {
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  font-size: 0.95rem;
  color: #111;
  font-weight: 500;
  line-height: 1.6;
  opacity: 0;
  animation: talnaroFadeIn 0.9s ease forwards;
}

.trust-badges span {
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.35px;
  position: relative;
  overflow: hidden;
}

/* Gouden vinkje met shimmer */
.trust-badges span::before {
  content: "✔ ";
  color: var(--lux-gold, #d4af37);
  font-weight: 600;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 5px rgba(212,175,55,0.35));
  animation: talnaroGlow 2.5s ease-in-out infinite alternate;
}

/* Shimmer glans die langzaam over de tekst glijdt */
.trust-badges span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: talnaroShimmer 5s ease-in-out infinite;
  z-index: 1;
}

/* ===== Animaties ===== */
@keyframes talnaroFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes talnaroGlow {
  from { filter: drop-shadow(0 0 2px rgba(212,175,55,0.25)); }
  to { filter: drop-shadow(0 0 7px rgba(212,175,55,0.5)); }
}

@keyframes talnaroShimmer {
  0% { left: -120%; }
  50% { left: 120%; }
  100% { left: 120%; }
}













/* ===== TALNARO TRUST BADGES — MOBILE OPTIMIZED GOLD AURA ===== */
.trust-badges {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
  font-size: 0.9rem;
  color: #111;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0;
  animation: talnaroFadeIn 1s ease forwards;
}

.trust-badges span {
  display: block;
  margin-bottom: 0.35rem;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

/* Gouden vinkje met zachte pulsering */
.trust-badges span::before {
  content: "✔ ";
  color: var(--lux-gold, #d4af37);
  font-weight: 600;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 3px rgba(212,175,55,0.25));
  animation: talnaroGlowMobile 3.5s ease-in-out infinite alternate;
}

/* Lichtglans, subtieler op mobiel */
.trust-badges span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: talnaroShimmerMobile 7s ease-in-out infinite;
  z-index: 1;
}

/* ===== Animaties ===== */
@keyframes talnaroFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes talnaroGlowMobile {
  from { filter: drop-shadow(0 0 2px rgba(212,175,55,0.2)); }
  to { filter: drop-shadow(0 0 6px rgba(212,175,55,0.4)); }
}

@keyframes talnaroShimmerMobile {
  0% { left: -150%; }
  60% { left: 120%; }
  100% { left: 120%; }
}

/* Responsieve optimalisatie */
@media (max-width: 768px) {
  .trust-badges {
    font-size: 0.85rem;
    padding-top: 0.8rem;
    margin-top: 1.2rem;
  }
  .trust-badges span {
    margin-bottom: 0.3rem;
  }
}

/* ===== TALNARO TRUST BADGES — HOVER SHIMMER LUXE VARIANT ===== */
.trust-badges.hover-style span::after {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Glow en shimmer alleen bij hover/tap */
.trust-badges.hover-style span:hover::before,
.trust-badges.hover-style span:active::before {
  animation: talnaroGlowHover 2s ease-in-out infinite alternate;
}

.trust-badges.hover-style span:hover::after,
.trust-badges.hover-style span:active::after {
  opacity: 1;
  animation: talnaroShimmerHover 3.5s ease-in-out;
}

/* Gouden aura bij hover */
@keyframes talnaroGlowHover {
  from { filter: drop-shadow(0 0 3px rgba(212,175,55,0.3)); }
  to { filter: drop-shadow(0 0 10px rgba(212,175,55,0.55)); }
}

/* Snellere shimmer bij aanraken */
@keyframes talnaroShimmerHover {
  0% { left: -120%; }
  50% { left: 120%; }
  100% { left: 120%; }
}










/* ===== TALNARO TRUST BADGES — GOLD FADE HOVER EFFECT ===== */
.trust-badges.hover-style {
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.5s ease, box-shadow 0.5s ease;
  background: transparent;
}

.trust-badges.hover-style:hover {
  background: linear-gradient(to top, rgba(212, 175, 55, 0.08), rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
  border-radius: 10px;
}

/* Mobiel tap (active) versie */
.trust-badges.hover-style:active {
  background: linear-gradient(to top, rgba(212, 175, 55, 0.12), rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.35);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}


/* ===== TALNARO TRUST BADGES — FADE-IN AURA ENTRY ===== */
.trust-badges.hover-style {
  opacity: 0;
  transform: translateY(8px);
  animation: talnaroFadeIn 1.2s ease-out forwards;
}

@keyframes talnaroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: drop-shadow(0 0 0 rgba(212,175,55,0));
  }
  60% {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.25));
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(212,175,55,0.15));
  }
}

/* Subtiele glanspulse die blijft ademen */
.trust-badges.hover-style span {
  animation: talnaroGlowPulse 6s ease-in-out infinite;
}

@keyframes talnaroGlowPulse {
  0%, 100% {
    text-shadow: 0 0 0px rgba(212,175,55,0.25);
  }
  50% {
    text-shadow: 0 0 8px rgba(212,175,55,0.4);
  }
}






/* ===== TALNARO TRUST BADGES — GOLD SHIMMER LINE ===== */
.trust-badges.hover-style::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212,175,55,0) 0%,
    rgba(212,175,55,0.4) 25%,
    rgba(212,175,55,0.8) 50%,
    rgba(212,175,55,0.4) 75%,
    rgba(212,175,55,0) 100%
  );
  background-size: 200% auto;
  animation: talnaroShimmer 4s linear infinite;
  border-radius: 1px;
  opacity: 0.85;
}

@keyframes talnaroShimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}





/* ===== TALNARO TRUST BADGES — GOLD TEXT REFLECTION (CINEMATIC DELAY) ===== */
.trust-badges.hover-style span {
  position: relative;
  display: inline-block;
  color: #d4af37;
  background: linear-gradient(
    180deg,
    #d4af37 0%,
    #b8942c 40%,
    #f2d875 70%,
    #d4af37 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 2px rgba(212,175,55,0.25));
  animation: talnaroTextReveal 1.2s ease-out 0.3s both;
}

@keyframes talnaroTextReveal {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subtiele moving gold reflection met vertraging */
.trust-badges.hover-style span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.6) 50%,
    transparent 100%
  );
  animation: talnaroReflection 5s ease-in-out infinite;
  animation-delay: 0.5s;
  pointer-events: none;
}

@keyframes talnaroReflection {
  0% { left: -100%; opacity: 0; }
  30% { opacity: 1; }
  50% { left: 100%; opacity: 0.8; }
  70% { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}






/* ===== TALNARO ADD-TO-CART — GOLD AURA HOVER ===== */
.product-form__submit,
.btn.btn-primary {
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(to bottom, #d4af37, #c19b2d);
  color: #fff;
  border: none;
  border-radius: 12px;
  transition: all 0.35s ease;
  box-shadow: 0 4px 14px rgba(212,175,55,0.25);
}

.product-form__submit:hover,
.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212,175,55,0.45);
}

/* Glanzende gouden reflectie op hover */
.product-form__submit::after,
.btn.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transition: all 0.6s ease;
  animation: talnaroBtnShimmer 4.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes talnaroBtnShimmer {
  0% { left: -120%; opacity: 0; }
  40% { opacity: 1; }
  60% { left: 120%; opacity: 0.8; }
  100% { left: 200%; opacity: 0; }
}

/* Subtiele glow bij aanraken (mobiel) */
.product-form__submit:active,
.btn.btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 0 20px rgba(212,175,55,0.5);
  transition: all 0.15s ease;
}




/* ===== TALNARO CHECKOUT BUTTON — SIGNATURE GOLD SHIMMER ===== */
#CartDrawer .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #d4af37, #c19b2d);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(212,175,55,0.25);
  transition: all 0.35s ease;
}

#CartDrawer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212,175,55,0.45);
}

/* Gouden shimmer animatie */
#CartDrawer .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: talnaroCheckoutShimmer 4.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes talnaroCheckoutShimmer {
  0% { left: -120%; opacity: 0; }
  40% { opacity: 1; }
  60% { left: 120%; opacity: 0.8; }
  100% { left: 200%; opacity: 0; }
}

/* Actieve glow bij click */
#CartDrawer .btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 0 20px rgba(212,175,55,0.5);
  transition: all 0.15s ease;
}



/* ===== TALNARO CHECKOUT BUTTON — SIGNATURE GOLD SHIMMER ===== */
#CartDrawer .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #d4af37, #c19b2d);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(212,175,55,0.25);
  transition: all 0.35s ease;
}

#CartDrawer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212,175,55,0.45);
}

/* Gouden shimmer animatie */
#CartDrawer .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: talnaroCheckoutShimmer 4.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes talnaroCheckoutShimmer {
  0% { left: -120%; opacity: 0; }
  40% { opacity: 1; }
  60% { left: 120%; opacity: 0.8; }
  100% { left: 200%; opacity: 0; }
}

/* Actieve glow bij click */
#CartDrawer .btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 0 20px rgba(212,175,55,0.5);
  transition: all 0.15s ease;
}








/* ===== TALNARO CART PAGE — SIGNATURE GOLD LINE ===== */
.cart__footer .cart__checkout,
.cart__footer .cart__update,
.cart__footer .cart__continue {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #d4af37, #c19b2d);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(212,175,55,0.25);
  transition: all 0.35s ease;
}

/* Hover shimmer */
.cart__footer .cart__checkout:hover,
.cart__footer .cart__update:hover,
.cart__footer .cart__continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212,175,55,0.45);
}

/* Reflectie shimmer */
.cart__footer .cart__checkout::after,
.cart__footer .cart__update::after,
.cart__footer .cart__continue::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: talnaroCartShimmer 4.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes talnaroCartShimmer {
  0% { left: -120%; opacity: 0; }
  40% { opacity: 1; }
  60% { left: 120%; opacity: 0.8; }
  100% { left: 200%; opacity: 0; }
}

/* Klik glow */
.cart__footer .cart__checkout:active,
.cart__footer .cart__update:active,
.cart__footer .cart__continue:active {
  transform: scale(0.98);
  box-shadow: 0 0 20px rgba(212,175,55,0.5);
  transition: all 0.15s ease;
}




/* ===== TALNARO CART DRAWER — GOLDEN FOOTER GLOW ===== */
#CartDrawer .drawer-foot {
  position: relative;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Subtiele gouden fade aan de onderkant */
#CartDrawer .drawer-foot::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 24px;
  background: linear-gradient(to top, rgba(212,175,55,0.25), transparent);
  pointer-events: none;
  filter: blur(4px);
  opacity: 0.9;
}

/* Trust badges gold aura versterkt bij hover */
#CartDrawer .trust-badges span:hover {
  color: #d4af37;
  text-shadow: 0 0 6px rgba(212,175,55,0.5);
  transition: all 0.3s ease;
}

/* Smooth transition bij open/close */
#CartDrawer {
  transition: all 0.45s ease-in-out;
  box-shadow: -6px 0 22px rgba(0,0,0,0.08);
}





/* ===== TALNARO CART DRAWER — UNIVERSAL SMOOTH OPEN FIX ===== */
#CartDrawer {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.45s ease-out;
  visibility: hidden;
}

/* Universele triggers (werkt met elk theme.js of AJAX-cart script) */
#CartDrawer[aria-modal="true"],
#CartDrawer[open],
#CartDrawer.is-active,
#CartDrawer.active,
#CartDrawer.is-visible,
#CartDrawer[style*="display: block"],
#CartDrawer[style*="display:block"] {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/* Drawer content fade-in */
#CartDrawer .drawer-inner {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.55s ease-out 0.1s;
}

#CartDrawer[aria-modal="true"] .drawer-inner,
#CartDrawer[open] .drawer-inner,
#CartDrawer.is-active .drawer-inner,
#CartDrawer.active .drawer-inner,
#CartDrawer.is-visible .drawer-inner,
#CartDrawer[style*="display: block"] .drawer-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Footer en trust badges elegant opkomst-effect */
#CartDrawer .drawer-foot,
#CartDrawer .trust-badges {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.6s ease-out 0.25s;
}

#CartDrawer[aria-modal="true"] .drawer-foot,
#CartDrawer[aria-modal="true"] .trust-badges,
#CartDrawer.is-active .drawer-foot,
#CartDrawer.is-active .trust-badges,
#CartDrawer[style*="display: block"] .drawer-foot,
#CartDrawer[style*="display: block"] .trust-badges {
  opacity: 1;
  transform: translateY(0);
}















/* ===== TALNARO CART DRAWER — SMOOTH FAST LUXE ANIMATION ===== */
#CartDrawer {
  opacity: 0;
  transform: translateX(35px);
  transition: all 0.38s cubic-bezier(0.25, 0.1, 0.25, 1);
  visibility: hidden;
}

/* Universele triggers (werkt met elk script of theme.js) */
#CartDrawer[aria-modal="true"],
#CartDrawer[open],
#CartDrawer.is-active,
#CartDrawer.active,
#CartDrawer.is-visible,
#CartDrawer[style*="display: block"],
#CartDrawer[style*="display:block"] {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/* Drawer content — subtiel fade & lift */
#CartDrawer .drawer-inner {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.45s ease-out 0.05s;
}

#CartDrawer[aria-modal="true"] .drawer-inner,
#CartDrawer[open] .drawer-inner,
#CartDrawer.is-active .drawer-inner,
#CartDrawer.active .drawer-inner,
#CartDrawer.is-visible .drawer-inner,
#CartDrawer[style*="display: block"] .drawer-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Footer + trust badges lichte vertraging voor flow */
#CartDrawer .drawer-foot,
#CartDrawer .trust-badges {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.45s ease-out 0.2s;
}

#CartDrawer[aria-modal="true"] .drawer-foot,
#CartDrawer[aria-modal="true"] .trust-badges,
#CartDrawer.is-active .drawer-foot,
#CartDrawer.is-active .trust-badges,
#CartDrawer[style*="display: block"] .drawer-foot,
#CartDrawer[style*="display: block"] .trust-badges {
  opacity: 1;
  transform: translateY(0);
}










/* ===== TALNARO CART DRAWER OVERLAY — LUXE SYNCHRONIZED FADE ===== */
.drawer-overlay {
  opacity: 0;
  background: rgba(0, 0, 0, 0.25); /* zachte schaduw over de site */
  backdrop-filter: blur(2px); /* subtiele diepte */
  transition: opacity 0.38s cubic-bezier(0.25, 0.1, 0.25, 1);
  visibility: hidden;
}

#CartDrawer[aria-modal="true"] + .drawer-overlay,
#CartDrawer.is-active + .drawer-overlay,
#CartDrawer.active + .drawer-overlay,
#CartDrawer.is-visible + .drawer-overlay,
#CartDrawer[style*="display: block"] + .drawer-overlay {
  opacity: 1;
  visibility: visible;
}

/* Luxe exit-effect */
.drawer-overlay[data-drawer-close]:hover {
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.25s ease-in-out;
}







/* ===== TALNARO CART DRAWER — LUXE OPEN & CLOSE FLOW ===== */
#CartDrawer {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
  visibility: hidden;
  will-change: opacity, transform;
}

/* Active/open state */
#CartDrawer[aria-modal="true"],
#CartDrawer[open],
#CartDrawer.is-active,
#CartDrawer.active,
#CartDrawer.is-visible,
#CartDrawer[style*="display: block"] {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/* Smooth close (animates out instead of snapping) */
#CartDrawer.closing {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.4s ease-in;
}

/* Fade-in inner content */
#CartDrawer .drawer-inner {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.45s ease-out 0.05s;
}
#CartDrawer[aria-modal="true"] .drawer-inner,
#CartDrawer.is-active .drawer-inner,
#CartDrawer[open] .drawer-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Footer + trust badges */
#CartDrawer .drawer-foot,
#CartDrawer .trust-badges {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.45s ease-out 0.2s;
}
#CartDrawer[aria-modal="true"] .drawer-foot,
#CartDrawer.is-active .drawer-foot,
#CartDrawer[open] .drawer-foot,
#CartDrawer[aria-modal="true"] .trust-badges,
#CartDrawer.is-active .trust-badges,
#CartDrawer[open] .trust-badges {
  opacity: 1;
  transform: translateY(0);
}

/* Overlay fade sync */
.drawer-overlay {
  opacity: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  transition: opacity 0.38s cubic-bezier(0.25, 0.1, 0.25, 1);
  visibility: hidden;
}
#CartDrawer[aria-modal="true"] + .drawer-overlay,
#CartDrawer.is-active + .drawer-overlay,
#CartDrawer.active + .drawer-overlay,
#CartDrawer.is-visible + .drawer-overlay,
#CartDrawer[style*="display: block"] + .drawer-overlay {
  opacity: 1;
  visibility: visible;
}

/* Luxe exit hover */
.drawer-overlay[data-drawer-close]:hover {
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.25s ease-in-out;
}





/* ===== TALNARO CART DRAWER — LUXE BOUNCE EASING ===== */

/* Nieuwe keyframes voor zachte bounce */
@keyframes drawerBounceIn {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  70% {
    transform: translateX(-4px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes drawerBounceOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-4px);
    opacity: 1;
  }
  100% {
    transform: translateX(40px);
    opacity: 0;
  }
}

/* Injecteer de animaties in de bestaande flow */
#CartDrawer {
  opacity: 0;
  transform: translateX(40px);
  visibility: hidden;
  will-change: transform, opacity;
  transition: none !important;
}

/* Wanneer geopend — met bounce-in */
#CartDrawer[aria-modal="true"],
#CartDrawer[open],
#CartDrawer.is-active,
#CartDrawer.active,
#CartDrawer.is-visible,
#CartDrawer[style*="display: block"] {
  visibility: visible;
  animation: drawerBounceIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Wanneer gesloten — met bounce-out */
#CartDrawer.closing {
  animation: drawerBounceOut 0.45s ease-in forwards;
}

/* Overlay blijft synchroon */
.drawer-overlay {
  opacity: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
  visibility: hidden;
}

#CartDrawer[aria-modal="true"] + .drawer-overlay,
#CartDrawer.is-active + .drawer-overlay,
#CartDrawer.is-visible + .drawer-overlay {
  opacity: 1;
  visibility: visible;
}












/* ===== TALNARO CART DRAWER — LUXE MOBILE SWIPE FEEL ===== */

/* Basis voor touch interaction */
@keyframes drawerSwipeOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(-6px);
    opacity: 0.95;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Simuleer swipe-close via data-attribuut of class */
#CartDrawer.swiping,
#CartDrawer[data-swipe="closing"] {
  animation: drawerSwipeOut 0.45s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  pointer-events: none;
}

/* Overlay blijft in sync met swipe */
#CartDrawer.swiping + .drawer-overlay,
#CartDrawer[data-swipe="closing"] + .drawer-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out;
}

/* Prevent content jump tijdens swipe */
body.drawer-active,
html.drawer-active {
  overflow: hidden;
  touch-action: none;
}

/* Zachte bounce als drawer stopt met swipen */
#CartDrawer.swipe-released {
  animation: drawerBounceIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}






/* ===== TALNARO CART DRAWER — GOLD AURA EDGE ===== */
#CartDrawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background: #fff;
  box-shadow:
    -6px 0 18px rgba(0, 0, 0, 0.08),
    -1px 0 8px rgba(212, 175, 55, 0.25); /* gouden aura */
  border-left: 1px solid rgba(212, 175, 55, 0.1);
  transition: box-shadow 0.4s ease-in-out, transform 0.45s ease-out;
  will-change: transform, opacity;
  z-index: 9999;
}

/* Subtiel gouden rand-highlight */
#CartDrawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(212,175,55,0.6),
    rgba(212,175,55,0.15),
    rgba(212,175,55,0.6)
  );
  filter: blur(3px);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Bij hover of open — glow sterker */
#CartDrawer:hover::before,
#CartDrawer.is-active::before,
#CartDrawer[aria-modal="true"]::before {
  opacity: 0.7;
  filter: blur(4px);
}

/* Responsief balans — minder intens op mobiel */
@media (max-width: 768px) {
  #CartDrawer {
    box-shadow:
      -3px 0 10px rgba(0, 0, 0, 0.06),
      -1px 0 6px rgba(212, 175, 55, 0.15);
  }
  #CartDrawer::before {
    opacity: 0.35;
    filter: blur(2px);
  }
}




/* ===== TALNARO CART PAGE — GOLD AURA FOOTER ===== */
.cart__footer {
  position: relative;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding: 2rem 1.5rem;
  box-shadow:
    0 -4px 16px rgba(0,0,0,0.05),
    0 -2px 8px rgba(212,175,55,0.25); /* gouden aura */
  z-index: 10;
}

/* Gouden randlijn boven footer */
.cart__footer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    rgba(212,175,55,0.55),
    rgba(212,175,55,0.2),
    rgba(212,175,55,0.55)
  );
  filter: blur(3px);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Hover of focus versterkt de glow */
.cart__footer:hover::before {
  opacity: 0.8;
  filter: blur(4px);
}

/* Knoppen in de footer behouden hun shimmer */
.cart__footer .cart__checkout,
.cart__footer .cart__update,
.cart__footer .cart__continue {
  position: relative;
  background: linear-gradient(to bottom, #d4af37, #c19b2d);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(212,175,55,0.25);
  transition: all 0.35s ease;
}

.cart__footer .cart__checkout:hover,
.cart__footer .cart__update:hover,
.cart__footer .cart__continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212,175,55,0.45);
}

/* Subtieler op mobiel */
@media (max-width: 768px) {
  .cart__footer {
    box-shadow:
      0 -3px 12px rgba(0,0,0,0.04),
      0 -2px 6px rgba(212,175,55,0.15);
  }
  .cart__footer::before {
    opacity: 0.4;
    filter: blur(2px);
  }
}







/* ===== TALNARO CART ITEMS — SMOOTH FADE-IN ===== */

/* Keyframes (zelfde tempo & curve als footer) */
@keyframes cartItemFadeIn {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in voor elk product in de winkelmand */
.cart__items,
.cart__line-item,
.cart-items,
.cart-item {
  opacity: 0;
  transform: translateY(20px);
  animation: cartItemFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--item-index, 0) * 0.07s);
  will-change: opacity, transform;
}

/* Optionele gouden rand subtiel tijdens animatie */
.cart-item {
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  position: relative;
}

.cart-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cart-item:hover::before {
  opacity: 0.8;
}

/* Subtieler effect op mobiel */
@media (max-width: 768px) {
  .cart__line-item,
  .cart-item {
    animation-duration: 0.6s;
    transform: translateY(15px);
  }
}






/* ===== TALNARO CART DRAWER – LUXE FADE-IN & GOLD AURA ===== */

/* Keyframes voor fade-in van items in drawer */
@keyframes drawerItemFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Elk item in drawer zacht laten binnenkomen */
#CartDrawer .drawer-line {
  opacity: 0;
  transform: translateY(16px);
  animation: drawerItemFadeIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--line-index, 0) * 0.06s);
  will-change: opacity, transform;
}

/* Gouden rand aura bij hover */
#CartDrawer .drawer-line {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#CartDrawer .drawer-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212,175,55,0.15);
}

#CartDrawer .drawer-line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.18);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#CartDrawer .drawer-line:hover::before {
  opacity: 1;
}

/* Fade-in voor footer (consistent met cart page) */
@keyframes drawerFooterFadeIn {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#CartDrawer .drawer-foot {
  animation: drawerFooterFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  opacity: 0;
  transform: translateY(25px);
}

/* Trust badges in drawer ook vloeiend laten opkomen */
#CartDrawer .trust-badges {
  opacity: 0;
  transform: translateY(12px);
  animation: drawerFooterFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* Mobiel: kortere animatie, minder offset */
@media (max-width: 768px) {
  #CartDrawer .drawer-line {
    animation-duration: 0.55s;
    transform: translateY(12px);
  }
  #CartDrawer .drawer-foot {
    animation-duration: 0.6s;
  }
}



/* ===== TALNARO DRAWER FADE-OUT ANIMATION ===== */

/* Keyframes voor fade-out */
@keyframes drawerFadeOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* Wanneer de drawer sluit — voeg class .is-closing toe via JS */
#CartDrawer.is-closing {
  animation: drawerFadeOut 0.4s ease forwards;
  pointer-events: none;
}

/* Overlay fade-out */
.drawer-overlay.is-closing {
  animation: fadeOutOverlay 0.3s ease forwards;
}

@keyframes fadeOutOverlay {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Zorg dat fade-out consistent werkt met fade-in */
#CartDrawer {
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}








/* ===== TALNARO DRAWER GOLD SHIMMER EFFECT ===== */

/* Shimmer animatie */
@keyframes goldShimmer {
  0% {
    opacity: 0;
    transform: translateX(-30%) skewX(-15deg);
  }
  40% {
    opacity: 1;
    transform: translateX(20%) skewX(-15deg);
  }
  100% {
    opacity: 0;
    transform: translateX(80%) skewX(-15deg);
  }
}

/* Gouden glanslaag over de drawer bij sluiten */
#CartDrawer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(212,175,55,0.15) 45%,
    rgba(212,175,55,0.25) 50%,
    rgba(212,175,55,0.15) 55%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Activeer shimmer bij sluitanimatie */
#CartDrawer.is-closing::after {
  animation: goldShimmer 0.5s ease forwards;
  opacity: 1;
}

/* Extra diepte bij sluiting */
#CartDrawer.is-closing {
  box-shadow: -6px 0 20px rgba(212,175,55,0.12);
  filter: brightness(1.02);
}



/* ===== TALNARO DRAWER GOLD SHIMMER OPEN EFFECT ===== */

/* Shimmer bij openen (tegengestelde richting) */
@keyframes goldShimmerOpen {
  0% {
    opacity: 0;
    transform: translateX(-80%) skewX(-15deg);
  }
  40% {
    opacity: 1;
    transform: translateX(-20%) skewX(-15deg);
  }
  100% {
    opacity: 0;
    transform: translateX(30%) skewX(-15deg);
  }
}

/* Activeer shimmer bij openen */
#CartDrawer.is-active::after {
  animation: goldShimmerOpen 0.6s ease forwards;
  opacity: 1;
}

/* Subtiele lichtversterking bij openen */
#CartDrawer.is-active {
  box-shadow: -8px 0 25px rgba(212,175,55,0.1), 0 0 20px rgba(212,175,55,0.06);
  filter: brightness(1.03);
}















/* ===== TALNARO TRUST BADGES — GOLD AFTERGLOW ON OPEN ===== */

/* Keyframes voor lichte gouden gloed */
@keyframes trustBadgeGlow {
  0% {
    opacity: 0;
    transform: translateY(10px);
    text-shadow: none;
  }
  60% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 8px rgba(212,175,55,0.25);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(212,175,55,0);
  }
}

/* Activeer glow bij openen van drawer */
#CartDrawer.is-active .trust-badges span {
  animation: trustBadgeGlow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--badge-index, 0) * 0.1s);
  display: block;
}

/* Elk vinkje glanst even extra goud */
#CartDrawer.is-active .trust-badges span::before {
  animation: trustBadgeGlow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  color: var(--lux-gold, #d4af37);
}

/* Consistente spacing & smooth look */
#CartDrawer .trust-badges {
  transition: opacity 0.3s ease, transform 0.3s ease;
  letter-spacing: 0.3px;
}

/* Op mobiel iets kortere glow */
@media (max-width: 768px) {
  #CartDrawer.is-active .trust-badges span {
    animation-duration: 0.6s;
  }
}





/* ===== TALNARO DRAWER — GOLDEN AURORA BACKDROP ===== */

/* Aurora achtergrondlaag */
#CartDrawer::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(
    circle at right,
    rgba(212,175,55,0.08) 0%,
    rgba(212,175,55,0.03) 40%,
    transparent 80%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.6s ease;
}

/* Fade-in aurora bij openen */
#CartDrawer.is-active::before {
  opacity: 1;
  animation: auroraFadeIn 0.8s ease forwards;
}

/* Fade-out aurora bij sluiten */
#CartDrawer.is-closing::before {
  opacity: 0;
  animation: auroraFadeOut 0.6s ease forwards;
}

/* Subtiele ademende animatie (licht pulserend goud) */
@keyframes auroraFadeIn {
  0% {
    opacity: 0;
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes auroraFadeOut {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(12px);
  }
}

/* Extra luxe gevoel — zacht glanzende rand */
#CartDrawer {
  backdrop-filter: blur(10px) saturate(120%);
  border-left: 1px solid rgba(212,175,55,0.1);
}



/* ===== TALNARO DRAWER — GOLD REFLECTION ===== */

/* Verticale reflectieglans langs de rand */
@keyframes goldReflection {
  0% {
    opacity: 0;
    transform: translateY(100%) scaleX(0.8);
  }
  40% {
    opacity: 1;
    transform: translateY(30%) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40%) scaleX(1.1);
  }
}

#CartDrawer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(
    to left,
    rgba(255,255,255,0) 0%,
    rgba(212,175,55,0.18) 45%,
    rgba(255,255,255,0.1) 80%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  z-index: 3;
}

/* Activeer reflectie bij openen */
#CartDrawer.is-active::after {
  animation: goldReflection 1s ease forwards;
  opacity: 1;
}

/* Luxe afwerking bij hover (drawer rand iets helderder) */
#CartDrawer:hover {
  box-shadow: -10px 0 28px rgba(212,175,55,0.12);
  border-left-color: rgba(212,175,55,0.2);
}

/* Mobiel — kortere reflectie, zachter */
@media (max-width: 768px) {
  #CartDrawer::after {
    width: 60px;
    filter: blur(4px);
  }
  #CartDrawer.is-active::after {
    animation-duration: 0.8s;
  }
}





/* =========================================
   🟡 TALNARO CART MOTION SUITE (v1.0)
   Drawer ✦ Aurora ✦ Gold Shimmer ✦ Trust Glow ✦ Reflection
   ========================================= */

/* === Base Fade-In Animation === */
@keyframes drawerItemFadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  70% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
#CartDrawer .drawer-line {
  opacity: 0;
  transform: translateY(16px);
  animation: drawerItemFadeIn 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: calc(var(--line-index, 0) * 0.06s);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
#CartDrawer .drawer-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212,175,55,0.15);
}
#CartDrawer .drawer-line::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.18);
  opacity: 0; transition: opacity .4s ease;
}
#CartDrawer .drawer-line:hover::before { opacity: 1; }

/* === Drawer Footer Fade === */
@keyframes drawerFooterFadeIn {
  0% { opacity: 0; transform: translateY(25px); }
  100% { opacity: 1; transform: translateY(0); }
}
#CartDrawer .drawer-foot {
  animation: drawerFooterFadeIn .8s cubic-bezier(0.22,1,0.36,1) .2s forwards;
  opacity: 0; transform: translateY(25px);
}

/* === Trust Badges Gold Glow === */
@keyframes trustBadgeGlow {
  0% { opacity: 0; transform: translateY(10px); text-shadow: none; }
  60% { opacity: 1; transform: translateY(0); text-shadow: 0 0 8px rgba(212,175,55,.25); }
  100% { opacity: 1; transform: translateY(0); text-shadow: none; }
}
#CartDrawer.is-active .trust-badges span {
  animation: trustBadgeGlow .8s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: calc(var(--badge-index,0) * .1s);
  display: block;
}
#CartDrawer.is-active .trust-badges span::before {
  animation: trustBadgeGlow 1s cubic-bezier(0.22,1,0.36,1) forwards;
  color: var(--lux-gold,#d4af37);
}

/* === Drawer Fade-Out === */
@keyframes drawerFadeOut {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(30px); }
}
#CartDrawer.is-closing {
  animation: drawerFadeOut .4s ease forwards;
  pointer-events: none;
  box-shadow: -6px 0 20px rgba(212,175,55,0.12);
  filter: brightness(1.02);
}
.drawer-overlay.is-closing {
  animation: fadeOutOverlay .3s ease forwards;
}
@keyframes fadeOutOverlay {
  0% { opacity: 1; } 100% { opacity: 0; }
}

/* === Gold Shimmer (Open & Close) === */
@keyframes goldShimmerOpen {
  0% { opacity: 0; transform: translateX(-80%) skewX(-15deg); }
  40% { opacity: 1; transform: translateX(-20%) skewX(-15deg); }
  100% { opacity: 0; transform: translateX(30%) skewX(-15deg); }
}
@keyframes goldShimmerClose {
  0% { opacity: 0; transform: translateX(-30%) skewX(-15deg); }
  40% { opacity: 1; transform: translateX(20%) skewX(-15deg); }
  100% { opacity: 0; transform: translateX(80%) skewX(-15deg); }
}
#CartDrawer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(212,175,55,0.15) 45%, rgba(212,175,55,0.25) 50%, rgba(212,175,55,0.15) 55%, transparent 100%);
  opacity: 0; pointer-events: none; z-index: 3;
}
#CartDrawer.is-active::after { animation: goldShimmerOpen .6s ease forwards; opacity: 1; }
#CartDrawer.is-closing::after { animation: goldShimmerClose .5s ease forwards; opacity: 1; }

/* === Aurora Background Glow === */
#CartDrawer::before {
  content: "";
  position: fixed; top: 0; right: 0;
  width: 100vw; height: 100vh;
  background: radial-gradient(circle at right, rgba(212,175,55,.08) 0%, rgba(212,175,55,.03) 40%, transparent 80%);
  opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity .6s ease;
}
@keyframes auroraFadeIn { 0%{opacity:0;filter:blur(12px);}100%{opacity:1;filter:blur(0);} }
@keyframes auroraFadeOut{ 0%{opacity:1;filter:blur(0);}100%{opacity:0;filter:blur(12px);} }
#CartDrawer.is-active::before{ opacity:1; animation:auroraFadeIn .8s ease forwards; }
#CartDrawer.is-closing::before{ opacity:0; animation:auroraFadeOut .6s ease forwards; }

/* === Vertical Gold Reflection === */
@keyframes goldReflection {
  0% { opacity: 0; transform: translateY(100%) scaleX(.8); }
  40% { opacity: 1; transform: translateY(30%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-40%) scaleX(1.1); }
}
#CartDrawer::after {
  background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(212,175,55,.18) 45%, rgba(255,255,255,.1) 80%, rgba(255,255,255,0) 100%);
  filter: blur(6px);
}
#CartDrawer.is-active::after { animation: goldReflection 1s ease forwards; opacity: 1; }

/* === Base Aesthetic Polish === */
#CartDrawer {
  backdrop-filter: blur(10px) saturate(120%);
  border-left: 1px solid rgba(212,175,55,0.1);
  box-shadow: -8px 0 25px rgba(212,175,55,0.1), 0 0 20px rgba(212,175,55,0.06);
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
#CartDrawer:hover {
  box-shadow: -10px 0 28px rgba(212,175,55,0.12);
  border-left-color: rgba(212,175,55,0.2);
}

/* === Mobile Adjustments === */
@media (max-width:768px){
  #CartDrawer .drawer-line{animation-duration:.55s;transform:translateY(12px);}
  #CartDrawer .drawer-foot{animation-duration:.6s;}
  #CartDrawer::after{width:60px;filter:blur(4px);}
  #CartDrawer.is-active::after{animation-duration:.8s;}
  #CartDrawer.is-active .trust-badges span{animation-duration:.6s;}
}





.drawer-line.is-fading {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}










/* === TALNARO FIX — Verwijderknop klikbaar maken (desktop + mobile) === */
.line-remove {
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  cursor: pointer;
  color: #7b7b7b;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.25s ease, transform 0.25s ease;
}

.line-remove:hover {
  color: var(--lux-gold, #d4af37);
  transform: translateX(3px);
}

.drawer-line-right {
  position: relative;
  z-index: 10; /* lager dan remove-button zodat die erboven ligt */
  pointer-events: none;
}

.drawer-line-right * {
  pointer-events: auto; /* maakt prijs wél klikbaar */
}


#CartDrawer.is-active {
  backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.15);
  transition: all 0.45s ease;
}

.btn.btn-primary:hover {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

.drawer-line {
  opacity: 0;
  transform: translateX(10px);
  animation: fadeInLine 0.4s ease forwards;
}
@keyframes fadeInLine {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.drawer-foot {
  position: relative;
}
.drawer-foot::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 25px;
  background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);
}





/* ===========================================
   🪩 TALNARO DRAWER LUXE+ — cinematic edition
   =========================================== */

/* --- Drawer Aura & Depth --- */
#CartDrawer.is-active {
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  transition: all 0.45s ease;
}

/* --- Soft fade on open --- */
#CartDrawer {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#CartDrawer.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* --- Product line cinematic intro --- */
.drawer-line {
  opacity: 0;
  transform: translateX(12px);
  animation: fadeInLine 0.5s ease forwards;
}
@keyframes fadeInLine {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Footer Gradient Transition --- */
.drawer-foot {
  position: relative;
  overflow: hidden;
}
.drawer-foot::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);
  pointer-events: none;
}

/* --- Button hover: soft gold glow --- */
.btn.btn-primary:hover {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

/* --- Remove button motion --- */
.line-remove {
  position: relative;
  z-index: 20;
  color: #666;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  pointer-events: auto !important;
}
.line-remove:hover {
  color: var(--lux-gold, #d4af37);
  transform: translateX(3px);
}
.line-remove:active {
  opacity: 0.6;
  transform: scale(0.95) translateX(2px);
  color: var(--lux-gold, #d4af37);
}

/* --- Fade out animation when removing --- */
.drawer-line.is-fading {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}




/* ===========================================
   ✨ TALNARO CLOSING GLOW — cinematic fade-out
   =========================================== */

/* Glow overlay tijdens sluiten */
#CartDrawer.is-closing {
  animation: drawerCloseFade 0.45s ease forwards;
}

@keyframes drawerCloseFade {
  0% {
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 10px rgba(212,175,55,0.3));
    transform: translateX(0);
  }
  70% {
    opacity: 0.5;
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(212,175,55,0.25));
    transform: translateX(10px);
  }
  100% {
    opacity: 0;
    transform: translateX(30px);
    filter: brightness(0.8);
  }
}

/* Zorg dat overlay meewerkt */
.drawer-overlay.is-closing {
  opacity: 0 !important;
  transition: opacity 0.45s ease;
}



/* ===========================================
   ✨ TALNARO OPENING GLOW — luxury fade-in
   =========================================== */

#CartDrawer.is-active {
  animation: drawerOpenGlow 0.6s ease forwards;
}

@keyframes drawerOpenGlow {
  0% {
    opacity: 0;
    transform: translateX(40px);
    filter: brightness(0.9);
    box-shadow: -6px 0 0 rgba(212,175,55,0);
  }
  40% {
    opacity: 0.8;
    transform: translateX(10px);
    filter: brightness(1.15);
    box-shadow: -8px 0 18px rgba(212,175,55,0.2);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: brightness(1);
    box-shadow: -8px 0 24px rgba(0,0,0,0.18);
  }
}







.drawer-line {
  animation: itemSlideIn 0.4s ease both;
}
@keyframes itemSlideIn {
  from {opacity:0; transform:translateX(10px);}
  to {opacity:1; transform:translateX(0);}
}



#CartDrawer .btn-primary:hover {
  box-shadow: 0 0 14px rgba(212,175,55,0.4), inset 0 0 4px rgba(255,255,255,0.2);
  background: linear-gradient(90deg,#c9a63c,#e8d070);
}



#CartDrawer {
  box-shadow: -14px 0 30px rgba(0,0,0,0.18), inset 0 0 20px rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}









/* === FIX: Hover / klik glitch bij overlay of verwijderknop === */
.drawer-overlay {
  pointer-events: none !important;
}

.drawer-close,
.line-remove {
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

.drawer-close:hover,
.line-remove:hover {
  transform: none !important; /* voorkomt hover-loop */
}




.drawer-overlay {
  transition: opacity 0.4s ease;
  transform: none !important;
}












/* === TALNARO PRODUCT GRID – Lusso Notte Edition === */
.sic-grid {
  display: grid;
  gap: 2rem;
  padding: 1.2rem 0;
  background: #f8f5f2;
}

.sic-card {
  position: relative;
  background: #141414;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
  transition: all 0.35s ease;
}

.sic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.sic-card__imagewrap {
  position: relative;
  overflow: hidden;
}

.sic-card__image {
  width: 100%;
  display: block;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.sic-card:hover .sic-card__image {
  transform: scale(1.07);
  filter: brightness(1.12);
}

.sic-card__meta {
  padding: 1.3rem;
  text-align: center;
  background: linear-gradient(to bottom, #141414 0%, #1a1a1a 100%);
}

.sic-card__meta h3,
.sic-card__meta .price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  color: #fff;
}

.sic-card__meta h3 {
  font-size: 1.15rem;
  letter-spacing: 0.4px;
  margin-bottom: 0.4rem;
}

.sic-card__meta .price {
  color: #d4af37;
  font-weight: 500;
  font-size: 1.05rem;
}

/* Gouden gloed bij hover */
.sic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(212,175,55,0.25), transparent 80%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sic-card:hover::after {
  opacity: 1;
}

/* === Mobile refinement === */
@media (max-width: 768px) {
  .sic-grid {
    gap: 1.6rem;
    padding: 0.8rem;
  }

  .sic-card {
    border-radius: 16px;
  }

  .sic-card__meta h3 {
    font-size: 1.05rem;
  }

  .sic-card__meta .price {
    font-size: 0.95rem;
  }
}








/* === TALNARO MICRO-GLOW EFFECT === */
@keyframes talnaroGlow {
  0% {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25), inset 0 0 0 rgba(212, 175, 55, 0);
  }
  50% {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3), inset 0 0 8px rgba(212, 175, 55, 0.15);
  }
  100% {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25), inset 0 0 0 rgba(212, 175, 55, 0);
  }
}

.sic-card:hover {
  animation: talnaroGlow 1.8s ease-in-out infinite;
}

/* Optioneel: iets zachter maken voor mobiel */
@media (max-width: 768px) {
  .sic-card:hover {
    animation: talnaroGlow 2.4s ease-in-out infinite;
  }
}







/* === TALNARO REFLECTION SWEEP === */
.sic-card {
  position: relative;
  overflow: hidden;
}

.sic-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sic-card:hover::before {
  opacity: 1;
  animation: talnaroSweep 1.8s ease forwards;
}

@keyframes talnaroSweep {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}








/* === TALNARO SCROLL ENTRANCE ANIMATION === */
.sic-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.sic-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtielere timing voor mobiel */
@media (max-width: 768px) {
  .sic-card {
    transition: opacity 1s ease, transform 1s ease;
  }
}







/* === FAILSAFE: kaarten zichtbaar bij laadtijd vertraging === */
.sic-card {
  opacity: 1;
  transform: none;
}

body.js-enabled .sic-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

body.js-enabled .sic-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}




/* === TALNARO GOLD SHIMMER ON PRICE HOVER === */
.sic-card__meta .price {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #d4af37, #fff6c7, #d4af37);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1s ease;
}

.sic-card:hover .sic-card__meta .price {
  background-position: -200%;
}






/* === TALNARO CART BUTTON MICRO-FEEDBACK === */
button[name="add"], 
.sic-card button[name="add"], 
button[type="submit"].btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}

button[name="add"]:active,
.sic-card button[name="add"]:active,
button[type="submit"].btn:active {
  transform: scale(0.96);
}


button[name="add"].is-added::after,
.sic-card button[name="add"].is-added::after,
button[type="submit"].btn.is-added::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(212,175,55,0.25), transparent 70%);
  animation: cartPulse 0.6s ease forwards;
    pointer-events: none;

}

@keyframes cartPulse {
  0% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  70% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}








/* === FIX: Knoppen weer klikbaar in productcards === */
.sic-card::after {
  pointer-events: none !important;
}
.sic-card__meta,
.sic-card button {
  position: relative;
  z-index: 5;
}











/* === TALNARO PRODUCT GRID — LUSSO HYBRID EDITION === */
.sic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.4rem, 2vw, 2.4rem);
  padding: 2rem 1rem 3rem;
  background: #faf8f3;
}

/* Kaarten – diepe luxe look */
.sic-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.12); /* zachte goudrand */
  transition: all 0.4s ease;
  transform: translateY(0);
}

/* Hover – blur aura & diepte */
.sic-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.sic-card__imagewrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(212,175,55,0.1);
}

.sic-card__image {
  width: 100%;
  display: block;
  transition: transform 0.7s ease, filter 0.7s ease;
  filter: brightness(0.96);
}

.sic-card:hover .sic-card__image {
  transform: scale(1.06);
  filter: brightness(1.08) blur(1px);
}

/* Subtiele witte gloed bij hover */
.sic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.sic-card:hover::after {
  opacity: 1;
}

/* Meta styling — tijdloze editorial spacing */
.sic-card__meta {
  padding: 1.4rem 1rem 1.6rem;
  text-align: center;
  background: linear-gradient(to bottom, #fff 85%, #faf8f3);
}

.sic-card__meta h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.35px;
  color: #111;
  margin-bottom: 0.35rem;
}

.sic-card__meta .price {
  color: var(--lux-gold, #d4af37);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Editorial asymmetrie – mini hoogte variatie */
.sic-card:nth-child(3n) {
  transform: translateY(6px);
}
.sic-card:nth-child(2n) {
  transform: translateY(-4px);
}

/* Zachte fade-in bij scroll */
.sic-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.sic-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}










/* === TALNARO PRODUCT GRID – LUSSO HYBRID (STABLE) === */
.sic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.4rem, 2vw, 2.4rem);
  padding: 2rem 1rem 3rem;
  background: #faf8f3;
}

/* Luxe productkaarten */
.sic-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: all 0.35s ease;
  opacity: 1;
  transform: none;
}

.sic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

/* Afbeeldingen */
.sic-card__imagewrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(212,175,55,0.1);
}

.sic-card__image {
  width: 100%;
  display: block;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(0.95);
}

.sic-card:hover .sic-card__image {
  transform: scale(1.05);
  filter: brightness(1.08) blur(1px);
}

/* Zachte witte gloed bij hover */
.sic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.sic-card:hover::after {
  opacity: 1;
}

/* Meta content */
.sic-card__meta {
  padding: 1.3rem 1rem 1.5rem;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff 85%, #faf8f3);
}

.sic-card__meta h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #111;
  margin-bottom: 0.4rem;
}

.sic-card__meta .price {
  color: var(--lux-gold, #d4af37);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Gouden aura effect */
.sic-card:hover {
  border-color: rgba(212,175,55,0.35);
}

/* Fade-in bij scroll (stabieler) */
.sic-card {
  opacity: 0;
  transform: translateY(20px);
}
.sic-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.19,1,0.22,1);
}



/* === TALNARO FIX: toon kaarten standaard === */
.sic-card {
  opacity: 1 !important;
  transform: none !important;
}





/* === TALNARO FIX: herstel normale productvorm === */
.sic-card {
  width: 100%;
  height: auto;
  max-width: 360px;
  margin: 0 auto;
}

.sic-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.sic-card__imagewrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.sic-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
  filter: none !important;
}

/* Zorg dat hover en blur subtiel blijven */
.sic-card:hover .sic-card__image {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* Reset eventuele schaduwen van experimenten */
.sic-card::after {
  background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent 70%);
  opacity: 0;
}










/* === TALNARO DARK LUSSO EDITION === */
.sic-grid {
  background: #f7f3ed;
}

.sic-card {
  background: #111;
  border: 1px solid rgba(212,175,55,0.25);
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.sic-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  border-color: rgba(212,175,55,0.45);
}

.sic-card__meta {
  background: linear-gradient(to bottom, #1a1a1a 90%, #111);
  text-align: center;
  padding: 1.3rem 1rem 1.6rem;
}

.sic-card__meta h3 {
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.sic-card__meta .price {
  color: #d4af37;
  font-weight: 500;
  font-size: 1.05rem;
}

.sic-card__imagewrap {
  border-bottom: 1px solid rgba(212,175,55,0.2);
}

.sic-card__image {
  filter: brightness(0.92);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.sic-card:hover .sic-card__image {
  transform: scale(1.05);
  filter: brightness(1);
}

/* Subtiele gouden gloed */
.sic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(212,175,55,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.sic-card:hover::after {
  opacity: 1;
}













/* === TALNARO GLOW-FADE EFFECT === */
@keyframes luxGlow {
  0% {
    box-shadow: 0 0 0 rgba(212,175,55,0);
  }
  50% {
    box-shadow: 0 0 25px rgba(212,175,55,0.35);
  }
  100% {
    box-shadow: 0 0 0 rgba(212,175,55,0);
  }
}

/* Activeer glow bij hover */
.sic-card:hover {
  animation: luxGlow 2.8s ease-in-out infinite;
}

/* Zachte overgang voor afbeelding */
.sic-card__image {
  transition: transform 0.8s ease, filter 0.8s ease, opacity 0.8s ease;
}
.sic-card:hover .sic-card__image {
  transform: scale(1.06);
  filter: brightness(1.08) saturate(1.05);
  opacity: 0.97;
}

/* Extra subtiele highlight-rand */
.sic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.sic-card:hover::before {
  opacity: 1;
}








/* === TALNARO LUSSO INFO BAR === */
.sic-card__infobar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.92);
  color: #f5f2e9;
  font-size: 0.85rem;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.4px;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
  transition: all 0.45s ease;
  border-top: 1px solid rgba(212,175,55,0.3);
  backdrop-filter: blur(4px);
}

.sic-card:hover .sic-card__infobar {
  height: 2.4rem;
  opacity: 1;
}

/* optioneel: licht gouden shimmer bij hover */
.sic-card__infobar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(212,175,55,0) 0%,
    rgba(212,175,55,0.15) 50%,
    rgba(212,175,55,0) 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
}
.sic-card:hover .sic-card__infobar::before {
  opacity: 1;
}







.sic-card__infobar {
  background: rgba(0, 0, 0, 0.85);
  color: #f8f4e8;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease-in-out;
}

.sic-card:hover .sic-card__infobar {
  background: linear-gradient(90deg, rgba(0,0,0,0.95), rgba(40,30,0,0.95));
  color: #ffde87;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
  transform: translateY(-2px);
}











@keyframes goldPulse {
  0% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
    color: #ffde87;
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
    color: #ffeaa7;
  }
  100% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
    color: #ffde87;
  }
}

.sic-card__infobar {
  animation: goldPulse 4.5s ease-in-out infinite;
}












@keyframes goldPulse {
  0% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
    color: #ffde87;
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
    color: #ffeaa7;
  }
  100% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
    color: #ffde87;
  }
}

.sic-card__infobar {
  background: rgba(0, 0, 0, 0.85);
  color: #f8f4e8;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(4px);
  animation: goldPulse 5s ease-in-out infinite;
  transition: all 0.4s ease-in-out;
}

.sic-card:hover .sic-card__infobar {
  background: linear-gradient(90deg, rgba(0,0,0,0.95), rgba(40,30,0,0.95));
  color: #ffde87;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.6);
  animation-duration: 2.5s;
}













@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(3px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(5px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.sic-card__infobar {
  animation: goldPulse 5s ease-in-out infinite, fadeUp 1.2s ease-out;
}









@keyframes cardFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(8px);
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.sic-card {
  opacity: 0;
  transform: translateY(30px);
  animation: cardFadeUp 1.2s ease-out forwards;
}






@keyframes smoothLift {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sic-card {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s ease-out;
}

.sic-card.is-visible {
  animation: smoothLift 0.8s ease-out forwards;
}

/* Stagger effect */
.sic-card:nth-child(1) { animation-delay: 0.1s; }
.sic-card:nth-child(2) { animation-delay: 0.25s; }
.sic-card:nth-child(3) { animation-delay: 0.4s; }
.sic-card:nth-child(4) { animation-delay: 0.55s; }





.sic-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.15);
  transition: border 0.4s ease, box-shadow 0.4s ease;
}

.sic-card:hover {
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),
              inset 0 0 20px rgba(255, 215, 0, 0.05);
}








.sic-card img {
  transition: transform 1s ease, filter 0.6s ease;
}

.sic-card:hover img {
  transform: scale(1.05);
  filter: brightness(1.03) contrast(1.05);
}







.sic-card__infobar {
  background: linear-gradient(90deg, rgba(160,130,50,0.25), rgba(255,215,0,0.2), rgba(160,130,50,0.25));
  background-size: 200% auto;
  animation: shimmerMove 6s linear infinite;
  border-radius: 6px;
  padding: 4px 8px;
}

@keyframes shimmerMove {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}













/* === GOLDEN SICILIAN CARD v2 === */
/* Designed for Talanaro — understated luxury */

/* Base Card */
.sic-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 16px;
  transition: border 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  background: #0f0f0f; /* diep zwart met warme toon */
}

.sic-card:hover {
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),
              inset 0 0 20px rgba(255, 215, 0, 0.05);
  transform: translateY(-4px);
}

/* Product Image Subtle Zoom */
.sic-card img {
  transition: transform 1s ease, filter 0.6s ease;
}

.sic-card:hover img {
  transform: scale(1.05);
  filter: brightness(1.03) contrast(1.05);
}

/* Smooth Lift Scroll-In (already active, included for completeness) */
@keyframes smoothLift {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

.sic-card {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s ease-out;
}

.sic-card.is-visible {
  animation: smoothLift 0.8s ease-out forwards;
}

/* Stagger Delay */
.sic-card:nth-child(1) { animation-delay: 0.1s; }
.sic-card:nth-child(2) { animation-delay: 0.25s; }
.sic-card:nth-child(3) { animation-delay: 0.4s; }
.sic-card:nth-child(4) { animation-delay: 0.55s; }

/* Infobar - golden shimmer */
.sic-card__infobar {
  background: linear-gradient(90deg, rgba(160,130,50,0.25), rgba(255,215,0,0.2), rgba(160,130,50,0.25));
  background-size: 200% auto;
  animation: shimmerMove 6s linear infinite;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  color: #f1e8c9;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.4px;
}

@keyframes shimmerMove {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Button consistency inside card */
.sic-card button[name="add"],
.sic-card button[type="submit"] {
  background: linear-gradient(to bottom, #d8b66e, #b8913b);
  color: #000;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.sic-card button[name="add"]:hover,
.sic-card button[type="submit"]:hover {
  background: linear-gradient(to bottom, #e5c77e, #c99e44);
  transform: translateY(-1px);
}












/* === IMAGE-ONLY HOVER EFFECT === */

/* Basisinstellingen */
.sic-card {
  position: relative;
  overflow: hidden;
}

.sic-card__infobar {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; /* voorkomt klikblokkade */
}

/* Alleen hover op afbeelding activeert infobar */
.sic-card:hover img {
  transform: scale(1.05);
  filter: brightness(1.03) contrast(1.05);
}

.sic-card:hover .sic-card__infobar {
  opacity: 1;
  transform: translateY(0);
}

/* MAAR – als je over de knop zweeft, blijft alles stabiel */
.sic-card button[name="add"]:hover ~ .sic-card__infobar,
.sic-card button[type="submit"]:hover ~ .sic-card__infobar {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

/* Luxe afwerking – schaduw en rust */
.sic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15),
              inset 0 0 15px rgba(255,215,0,0.05);
}

.sic-card button[name="add"],
.sic-card button[type="submit"] {
  position: relative;
  z-index: 3;
}




/* --- FIX: toon infobar alleen bij hover op afbeelding, niet bij hover op knop --- */

/* Eerst standaard verbergen */
.sic-card__infobar {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

/* Alleen actief als je over het afbeeldingsdeel van de kaart hovert */
.sic-card:hover:not(:has(button:hover)) .sic-card__infobar {
  opacity: 1;
  transform: translateY(0);
}

/* Extra zekerheid: als knop wordt gehovert, infobar blijft weg */
.sic-card:has(button:hover) .sic-card__infobar {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: none !important;
}








/* === TALNARO Drawer Ultra Luxe v1.0 === */

/* Fade-in animatie bij openen */
@keyframes drawerFadeIn {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

.cart-drawer,
#CartDrawer {
  background: #0f0f0f !important;
  color: #fff !important;
  animation: drawerFadeIn 0.5s ease-out forwards;
  box-shadow: -4px 0 40px rgba(0,0,0,0.3);
  border-left: 1px solid rgba(255, 215, 0, 0.15);
}

/* Binnenruimte */
.drawer-inner {
  padding: 1.6rem 1.4rem;
}

/* Titel en header */
.drawer-head h2 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: #f5d47a;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 1.2rem;
}

.drawer-close {
  color: #f5d47a;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.drawer-close:hover {
  opacity: 1;
}

/* Productregels */
.drawer-list li {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 12px 0;
}

.line-title a {
  color: #fff !important;
  font-weight: 400;
  transition: color 0.3s;
}

.line-title a:hover {
  color: #f5d47a !important;
}

.line-price, .line-compare {
  color: #f5d47a;
  font-weight: 500;
}

/* Subtotaal & footnote */
.drawer-foot {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 1rem;
  padding-top: 1.2rem;
}

.foot-row span {
  font-size: 1rem;
  color: #fff;
}

.foot-price {
  color: #f5d47a;
  font-weight: 600;
}

/* Button (afrekenen) */
.btn.btn-primary,
button[name="checkout"] {
  background: linear-gradient(180deg, #f8d778, #d6ad41);
  color: #000;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 15px rgba(255, 215, 0, 0.25);
}

.btn.btn-primary:hover,
button[name="checkout"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 25px rgba(255, 215, 0, 0.4);
}

/* Kleine badges of service tekst */
.trust-badges span {
  color: #f5d47a;
  font-weight: 400;
  font-size: 0.9rem;
  display: block;
  margin-top: 4px;
}

/* Scrollbar luxe stijl */
.cart-drawer::-webkit-scrollbar {
  width: 8px;
}
.cart-drawer::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f5d47a, #caa741);
  border-radius: 4px;
}
.cart-drawer::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}


.drawer-foot {
  background: linear-gradient(to top, rgba(15,15,15,1), rgba(30,30,30,0.95));
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  box-shadow: 0 -4px 15px rgba(0,0,0,0.4);
}





/* Subtiele gouden gloedlijn boven de afrekenknop */
button[name="checkout"]::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f5d47a, transparent);
  animation: shimmerLine 2.5s infinite linear;
  opacity: 0.6;
}

@keyframes shimmerLine {
  0% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(0%); }
  100% { opacity: 0; transform: translateX(100%); }
}












/* === Gouden pulse boven de Afrekenen-knop === */
button[name="checkout"] {
  position: relative;
  overflow: hidden;
}

/* Subtiele lichtlijn die over de knop glijdt */
button[name="checkout"]::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 212, 122, 0.8),
    rgba(255, 215, 0, 0.9),
    transparent
  );
  animation: shimmerLine 3.5s infinite ease-in-out;
  opacity: 0.7;
  filter: blur(1px);
}

/* Gouden pulse in de achtergrond van de knop zelf */
button[name="checkout"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(245, 212, 122, 0.15), transparent 60%);
  animation: goldPulse 4s infinite ease-in-out;
  pointer-events: none;
}

/* Lichtgolf beweegt subtiel horizontaal */
@keyframes shimmerLine {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    transform: translateX(0%);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Gouden ademhalingseffect */
@keyframes goldPulse {
  0% { opacity: 0.05; }
  50% { opacity: 0.18; }
  100% { opacity: 0.05; }
}






/* === Luxe achtergronddiepte bij open drawer === */
.drawer-overlay {
  backdrop-filter: blur(10px) brightness(0.6);
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.6s ease-in-out;
  pointer-events: none;
}

.cart-drawer[open] ~ .drawer-overlay,
.drawer-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Zachte fade-in animatie voor overlay */
@keyframes drawerFade {
  from {
    opacity: 0;
    backdrop-filter: blur(0px) brightness(1);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(10px) brightness(0.6);
  }
}

.drawer-overlay {
  animation: drawerFade 0.6s ease forwards;
}










backdrop-filter: blur(12px) brightness(0.7);
background: rgba(0, 0, 0, 0.35);








/* === Luxe hover zoom + depth blur op productfoto === */
.sic-card img {
  transition: all 0.6s ease;
  transform: scale(1);
  filter: brightness(0.98) contrast(1.05);
  border-radius: 10px;
}

.sic-card:hover img {
  transform: scale(1.045);
  filter: brightness(1.05) contrast(1.1) saturate(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Subtiele achtergrondblur achter foto */
.sic-card:hover {
  backdrop-filter: blur(3px);
  transition: backdrop-filter 0.4s ease;
}





















.usp-bar {
  background: linear-gradient(to top, #1a1a1a, #2b2b2b);
  color: #f5d47a;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(245, 212, 74, 0.2);
  border-bottom: 1px solid rgba(245, 212, 74, 0.2);
  box-shadow: 0 -4px 15px rgba(0,0,0,0.3);
}
.usp-bar svg {
  color: #f5d47a;
}








.usp-bar {
  background: linear-gradient(to top, #fdfcf9, #f6f1e7);
  color: #222;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-top: 1px solid #e6d8b6;
  border-bottom: 1px solid #e6d8b6;
}
.usp-bar svg {
  color: #d1b45a;
}









/* ✨ LUCE ITALIANA USP-BAR ✨ */
.usp-bar {
  background: linear-gradient(to top, #fdfbf6, #f7f3e8);
  color: #1a1a1a;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-top: 1px solid #e6d8b6;
  border-bottom: 1px solid #e6d8b6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.usp-bar svg {
  color: #d1b45a;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Subtiele hover voor icoontjes */
.usp-bar span:hover svg {
  color: #bfa14a;
  transform: scale(1.15);
}

/* Optionele text highlight bij hover */
.usp-bar span:hover {
  color: #2b2b2b;
}



/* ☀️ LUCE ITALIANA – Fade-in animatie USP bar */
@keyframes softRise {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.usp-bar {
  animation: softRise 0.9s ease-out forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

/* Bonus – subtiele gouden glans bij hover op de hele bar */
.usp-bar:hover {
  box-shadow: 0 4px 18px rgba(209, 180, 90, 0.25);
  transition: box-shadow 0.4s ease;
}







/* ✨ Luxe text-hover animatie voor USP-bar items */
.usp-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.35s ease;
}

.usp-bar span:hover {
  color: #bfa14a;
  letter-spacing: 0.4px;
  transform: translateY(-1px);
  text-shadow: 0 0 8px rgba(191, 161, 74, 0.25);
}

/* Icoontjes subtiel meebewegen */
.usp-bar span:hover svg {
  transform: scale(1.15) rotate(-3deg);
  color: #f5d47a;
}










/* 📱 Luxe Italiaanse USP-bar – Mobiel optimalisatie */
@media (max-width: 768px) {
  .usp-bar {
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
    text-align: center;
    box-shadow: none;
    border-radius: 0;
  }

  .usp-bar span {
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    justify-content: center;
  }

  .usp-bar span:hover {
    transform: none;
    letter-spacing: 0.3px;
  }

  .usp-bar svg {
    transform: scale(1.05);
  }

  .usp-bar span:hover svg {
    transform: scale(1.1);
  }
}










/* 💫 Gouden “sotto linea” hover accent voor USP-bar */
.usp-bar span {
  position: relative;
}

.usp-bar span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) scaleX(0);
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, #c7a947, #f5d47a);
  border-radius: 2px;
  opacity: 0;
  transition: all 0.4s ease;
}

.usp-bar span:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* Mobiel: iets kleinere lijn */
@media (max-width: 768px) {
  .usp-bar span::after {
    width: 16px;
    bottom: -2px;
  }
}









/* ☀️ Gouden zonnestraal–glow animatie over de USP-bar */
.usp-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.usp-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(212,175,55,0) 0%,
    rgba(212,175,55,0.35) 50%,
    rgba(212,175,55,0) 100%
  );
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.usp-bar:hover::before {
  animation: sunlightSweep 1.8s ease-out forwards;
  opacity: 1;
}

@keyframes sunlightSweep {
  0% { left: -100%; opacity: 0.2; }
  50% { left: 50%; opacity: 0.5; }
  100% { left: 130%; opacity: 0; }
}














/* 💻 Alleen zonnestraal-glow op desktop, niet op mobiel */
@media (max-width: 768px) {
  .usp-bar::before {
    display: none !important;
  }
}














/* 🇮🇹 TALNARO USP-BAR – refined Italian layout */
.usp-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.8rem;
  padding: 1.2rem 0;
  background: #111; /* Diep espresso zwart */
  color: #f6f4ef;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.usp-bar span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.usp-bar span:hover {
  color: var(--lux-gold, #d4af37);
}

.usp-bar span::before {
  font-size: 1.1rem;
  color: var(--lux-gold, #d4af37);
  opacity: 0.9;
  transform: translateY(1px);
}

/* Mobile refinement */
@media (max-width: 768px) {
  .usp-bar {
    gap: 1.4rem;
    font-size: 0.95rem;
    padding: 0.9rem 0;
  }
}
















/* ✨ TALNARO USP-bar – zwart + gouden text */
.usp-bar {
  background: #0d0d0d; /* diep luxe zwart */
  color: #d4af37; /* elegant goud */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.8rem;
  padding: 1.2rem 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.usp-bar span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  color: #d4af37;
  transition: color 0.3s ease, transform 0.3s ease;
}

.usp-bar span:hover {
  color: #f5d26e;
  transform: translateY(-1px);
}

.usp-bar svg {
  color: #d4af37;
  opacity: 0.9;
}

/* Mobiel */
@media (max-width: 768px) {
  .usp-bar {
    gap: 1.2rem;
    font-size: 0.95rem;
    padding: 0.9rem 0;
  }
}






/* 🏆 Forceer gouden tekst op de USP-bar */
.usp-bar,
.usp-bar span,
.usp-bar * {
  color: #d4af37 !important;
}

.usp-bar svg {
  color: #d4af37 !important;
}










/* 💎 TALNARO USP ICON STIJL */
.usp-bar span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  margin-right: 6px;
  color: #d4af37;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Icon toewijzingen */
.usp-bar span:has(svg):before {
  content: "";
}

/* Specifieke iconen per USP */
.usp-bar span:nth-child(1)::before { content: "\f553"; } /* ster voor 'fit & maatadvies' */
.usp-bar span:nth-child(2)::before { content: "\f553"; } /* stoffenrol / handwerk vibe */
.usp-bar span:nth-child(3)::before { content: "\f48b"; } /* truckje voor verzending */
.usp-bar span:nth-child(4)::before { content: "\f1d8"; } /* WhatsApp-achtig chat icoon */

/* Hover effect */
.usp-bar span:hover::before {
  color: #f5d26e;
  transform: scale(1.1);
}














/* 🇮🇹 TALNARO – Luxe gouden iconen voor USP bar */
.usp-bar span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #d4af37 !important;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Voeg iconen toe vóór de tekst */
.usp-bar span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  color: #d4af37;
  transition: transform 0.3s ease, color 0.3s ease;
  font-size: 1.05rem;
  margin-right: 6px;
}

/* ✂️ Fit & maatadvies */
.usp-bar span:nth-child(1)::before {
  content: "\f553"; /* fa-cut */
}

/* 🧵 Italiaanse stoffen */
.usp-bar span:nth-child(2)::before {
  content: "\f5fd"; /* fa-fill-drip = naaigereedschap look */
}

/* 🚚 Gratis versturen */
.usp-bar span:nth-child(3)::before {
  content: "\f48b"; /* fa-shipping-fast */
}

/* 💬 Chat via WhatsApp */
.usp-bar span:nth-child(4)::before {
  content: "\f4ad"; /* fa-comment-dots */
}

/* Hover effect met subtiele glow */
.usp-bar span:hover {
  color: #f5d26e !important;
  transform: translateY(-1px);
}

.usp-bar span:hover::before {
  color: #f5d26e;
  transform: scale(1.15);
}






/* 🌅 Gouden zonlichtlijn boven de zwarte USP-bar */
.usp-bar {
  position: relative;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(10, 10, 10, 1));
  box-shadow: 0 -2px 15px rgba(212, 175, 55, 0.25);
  z-index: 10;
}

/* De gouden glanslijn */
.usp-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(245, 210, 110, 0) 0%,
    rgba(245, 210, 110, 0.8) 45%,
    rgba(245, 210, 110, 0.8) 55%,
    rgba(245, 210, 110, 0) 100%
  );
  filter: blur(0.5px);
  animation: glowSweep 5s ease-in-out infinite;
}

/* Animatie voor subtiel heen-en-weer licht */
@keyframes glowSweep {
  0%, 100% {
    opacity: 0.6;
    transform: translateX(-10%);
  }
  50% {
    opacity: 1;
    transform: translateX(10%);
  }
}












/* ✨ Subtiele gouden reflectie onder de USP-bar */
.usp-bar::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 20px;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 210, 110, 0.35) 0%,
    rgba(245, 210, 110, 0.1) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}











/* 🌟 Subtiele gouden reactie bij hover over de hele USP-bar */
.usp-bar {
  transition: box-shadow 0.6s ease, background 0.6s ease;
}

/* Wanneer iemand met de muis over de bar gaat */
.usp-bar:hover {
  background: linear-gradient(to bottom, rgba(10, 10, 10, 1), rgba(20, 20, 20, 1));
  box-shadow:
    0 -2px 20px rgba(245, 210, 110, 0.25),
    0 4px 20px rgba(245, 210, 110, 0.2);
}

/* Laat ook de gouden lijn subtiel oplichten bij hover */
.usp-bar:hover::before {
  opacity: 1;
  filter: blur(1px);
  animation-duration: 3s;
}

/* Laat de reflectie iets feller worden */
.usp-bar:hover::after {
  opacity: 0.9;
  transform: scale(1.02);
  filter: blur(6px);
  transition: all 0.6s ease;
}













/* ☀️ Talnaro – Soft Sunrise Fade bij paginalaad */
@keyframes talnaroSunrise {
  0% {
    opacity: 0;
    transform: translateY(12px);
    box-shadow: 0 -2px 0 rgba(245, 210, 110, 0);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 -2px 15px rgba(245, 210, 110, 0.25);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 -2px 20px rgba(245, 210, 110, 0.35);
  }
}

.usp-bar {
  animation: talnaroSunrise 1.4s ease-out forwards;
  animation-delay: 0.2s;
  opacity: 0; /* Start transparant */
}
















/* 🎯 TALNARO – Perfecte centrering en spacing voor USP-bar */
.usp-bar {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(245, 210, 110, 0.25);
  border-bottom: 1px solid rgba(245, 210, 110, 0.25);
}

/* Icoontjes en tekst netjes gecentreerd */
.usp-bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--lux-gold, #f5d26e);
  letter-spacing: 0.3px;
}

/* Zorgt voor juiste afstand tussen header en USP-bar */
header + .usp-bar {
  margin-top: 0;
  border-top: none;
}

/* Mobiel: compacter en stackend */
@media (max-width: 768px) {
  .usp-bar {
    flex-direction: column;
    gap: 0.8rem;
    padding: 10px 16px;
  }
  .usp-bar span {
    font-size: 0.9rem;
  }
}





/* ✨ TALNARO – Luxe glide-in animatie voor USP’s */
@keyframes talnaroGlideIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.usp-bar span {
  opacity: 0;
  animation: talnaroGlideIn 0.8s ease-out forwards;
}

/* Elke USP komt iets later in beeld */
.usp-bar span:nth-child(1) {
  animation-delay: 0.4s;
}
.usp-bar span:nth-child(2) {
  animation-delay: 0.7s;
}
.usp-bar span:nth-child(3) {
  animation-delay: 1s;
}













/* 🌟 TALNARO – Subtiele gold-flash highlight bij binnenkomst */
@keyframes talnaroGoldFlash {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(2) drop-shadow(0 0 6px rgba(245, 210, 110, 0.6));
  }
  100% {
    filter: brightness(1);
  }
}

/* Voeg highlight toe aan icoontjes in de USP-bar */
.usp-bar span svg {
  animation: talnaroGoldFlash 1.2s ease-out;
  animation-delay: var(--delay, 0.4s);
}

/* Elk icoon krijgt zijn eigen vertraging voor natuurlijke timing */
.usp-bar span:nth-child(1) svg {
  --delay: 0.5s;
}
.usp-bar span:nth-child(2) svg {
  --delay: 0.8s;
}
.usp-bar span:nth-child(3) svg {
  --delay: 1.1s;
}











/* 🌅 TALNARO – Luxe overgang tussen header en USP-bar */
header {
  position: relative;
  z-index: 5;
}

/* Subtiele gouden lijn die licht pulseert */
header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0) 0%,
    rgba(212, 175, 55, 0.8) 50%,
    rgba(212, 175, 55, 0) 100%
  );
  animation: talnaroGlowPulse 4s ease-in-out infinite;
  opacity: 0.85;
}

/* Pulserende gouden gloed */
@keyframes talnaroGlowPulse {
  0%, 100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 3px rgba(245, 210, 110, 0.3));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(245, 210, 110, 0.6));
  }
}





/* 🔆 Scroll dim voor gouden lijn */
header::after {
  opacity: var(--gold-line-opacity, 1);
  transition: opacity 0.3s ease-out;
}















/* ✨ TALNARO – Reverse shimmer bij scroll omhoog */
header.is-shimmering::after {
  animation: talnaroGoldFlash 0.9s ease-in-out;
}

@keyframes talnaroGoldFlash {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(245, 210, 110, 0));
  }
  50% {
    filter: brightness(2) drop-shadow(0 0 6px rgba(245, 210, 110, 0.8));
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(245, 210, 110, 0));
  }
}














/* ☀️ TALNARO – Sunlight return effect bij omhoog scrollen */
header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  background: radial-gradient(circle at top center, rgba(245, 210, 110, 0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease-out;
  z-index: 2;
}

header.is-shimmering::before {
  opacity: 1;
  animation: sunlightGlow 1.2s ease-in-out;
}

@keyframes sunlightGlow {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}
















/* 🌅 TALNARO – Sun Scent Fade Overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255, 230, 180, 0.15), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
}

body.is-goldlit::after {
  opacity: 1;
  animation: goldSunset 1.5s ease-in-out;
}

@keyframes goldSunset {
  0% {
    opacity: 0;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.08);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}









/* ✨ TALNARO PRODUCT PAGE – Golden Return integration */
.product-template::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 25%, rgba(255, 225, 150, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
}

.product-template.is-goldlit::after {
  opacity: 1;
  animation: goldSunsetProduct 1.5s ease-in-out;
}

@keyframes goldSunsetProduct {
  0% {
    opacity: 0;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.07);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

/* Extra: subtiele gold-line shimmer boven product header */
.product-template header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  pointer-events: none;
  background: radial-gradient(circle at top center, rgba(230, 190, 90, 0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease-out;
  z-index: 2;
}

.product-template.is-shimmering header::before {
  opacity: 1;
  animation: sunlightGlow 1.2s ease-in-out;
}









/* ✨ TALNARO PRODUCT PAGE – Golden Return integration */
.product-template::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 25%, rgba(255, 225, 150, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
}

.product-template.is-goldlit::after {
  opacity: 1;
  animation: goldSunsetProduct 1.5s ease-in-out;
}

@keyframes goldSunsetProduct {
  0% {
    opacity: 0;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.07);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

/* Extra: subtiele gold-line shimmer boven product header */
.product-template header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  pointer-events: none;
  background: radial-gradient(circle at top center, rgba(230, 190, 90, 0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease-out;
  z-index: 2;
}

.product-template.is-shimmering header::before {
  opacity: 1;
  animation: sunlightGlow 1.2s ease-in-out;
}









/* Shop the Look – luxe styling */
.shop-the-look {
  background-color: #f8f6f2; /* warme, crèmekleurige achtergrond */
  padding: 4rem 2rem;
}

.shop-the-look__item {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.shop-the-look__dot.tap-area {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4b886, #b1955d); /* zachte goudtint */
  border: none;
}

.shop-the-look__product {
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  padding: 1rem;
}

.shop-the-look__product-vendor,
.shop-the-look__product-title {
  font-weight: 600;
  color: #2c2c2c;
}

.shop-the-look__product-link {
  background: #b1955d;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.shop-the-look__product-link:hover {
  background: #d4b886;
}

/* Navigatie */
.shop-the-look__arrow.prev-next-button {
  background: transparent;
  border: 2px solid #b1955d;
  color: #b1955d;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}
















/* ✨ TALNARO SHOP DE LOOK BUTTON STIJL */
.btn.btn--pill {
  background: linear-gradient(180deg, #f5d47a, #caa741);
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.btn.btn--pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
  background: linear-gradient(180deg, #ffe8a3, #e6c45f);
  color: #000;
}












/* ✨ Luxe hover glow op "Shop deze look" knop */
.btn.btn--pill:hover {
  background: linear-gradient(180deg, #ffeaa0, #d6b24e);
  color: #000;
  box-shadow: 0 0 25px rgba(245, 212, 122, 0.6);
  transform: translateY(-2px);
  transition: all 0.3s ease-in-out;
}












/* ✨ Luxe hover glow op "Shop deze look" knop */
.btn.btn--pill:hover {
  background: linear-gradient(180deg, #ffeaa0, #d6b24e);
  color: #000;
  box-shadow: 0 0 25px rgba(245, 212, 122, 0.6);
  transform: translateY(-2px);
  transition: all 0.3s ease-in-out;
}












/* 💨 Luxe lift effect voor de look-cards */
.card {
  transition: all 0.4s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 18px;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(245, 212, 122, 0.25);
}









/* 🎬 Smooth fade-in animatie bij scroll voor de look-cards */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card.fade-init {
  opacity: 0;
  transform: translateY(25px);
}

.card.is-visible {
  animation: fadeInUp 0.8s ease-out forwards;
}


.card.is-visible {
  animation: fadeInUp 0.8s ease-out forwards;
}









/* 🎞️ Luxe staggered fade-in timing */
.card.is-visible {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 1;
}

.card.is-visible:nth-child(1) {
  animation-delay: 0.1s;
}

.card.is-visible:nth-child(2) {
  animation-delay: 0.25s;
}

.card.is-visible:nth-child(3) {
  animation-delay: 0.4s;
}

.card.is-visible:nth-child(4) {
  animation-delay: 0.55s;
}

.card.is-visible:nth-child(5) {
  animation-delay: 0.7s;
}

.card.is-visible:nth-child(6) {
  animation-delay: 0.85s;
}











/* 🇮🇹 Fatto in Sicilia badge voor Shop de Look cards */
.card::before {
  content: "Fatto in Sicilia";
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, rgba(245,212,71,0.95), rgba(202,167,65,0.95));
  color: #1a1a1a;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 5px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.6s ease;
  z-index: 5;
}

.card.is-visible::before {
  opacity: 1;
  transform: translateY(0);
}






/* 🇮🇹 Fatto in Sicilia badge – juiste targeting */
.sicilia-looks-grid .card__media::before {
  content: "🇮🇹  Fatto in Sicilia";
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, rgba(245,212,71,0.95), rgba(202,167,65,0.95));
  color: #1a1a1a;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.8s ease;
  z-index: 5;
}

.sicilia-looks-grid .card.is-visible .card__media::before {
  opacity: 1;
  transform: translateY(0);
}





/* === Hero scroll indicator === */
.scroll-indicator {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  animation: fadeDown 2s ease-in-out infinite;
  opacity: 0.8;
}

.scroll-indicator svg {
  width: 26px;
  height: 26px;
  fill: #ffffff;
}

@keyframes fadeDown {
  0% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.6; }
}

@media (min-width: 1025px) {
  .scroll-indicator {
    display: none;
  }
}














/* === Parallax hero movement === */
.oger-hero-image-wrapper {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.2s ease-out;
}

.hero-mobile-image {
  transform: scale(1.05);
  transition: transform 0.3s ease-out;
}

/* Parallax effect bij scroll */
@media (min-width: 768px) {
  .oger-hero-image-wrapper.parallax-active img {
    transform: translateY(calc(var(--scroll) * 0.2)) scale(1.05);
  }
}





















/* === Light Parallax op mobiel === */
@media (max-width: 767px) {
  .oger-hero-image-wrapper.parallax-active img {
    transform: translateY(calc(var(--scroll) * 0.05)) scale(1.02);
    transition: transform 0.2s ease-out;
  }
}













/* ==========================
   T A L N A R O  –  U P S E L L S
   Luxe Siciliaanse stijl
========================== */

.talnaro-upsells {
  background: #0b0b0b;
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 25px 0;
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.4);
  max-width: 430px;        /* KLEINER → beter voor de add-to-cart ruimte */
}

.talnaro-upsells h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  text-align: center;
  margin-bottom: 14px;
  color: #f6d774;
  font-weight: 700;
}

/* Grid */
.talnaro-upsell-item {
  display: grid;
  grid-template-columns: 55px 1fr 95px;
  gap: 14px;
  align-items: center;
  padding: 14px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: .25s ease;
}

.talnaro-upsell-item:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,215,0,0.4);
  transform: translateY(-2px);
}

/* Icon */
.talnaro-upsell-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Text */
.talnaro-upsell-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.talnaro-upsell-dsc {
  font-size: 14px;
  color: #d7d7d7;
  line-height: 1.35;
}

.talnaro-upsell-price {
  margin-top: 6px;
  font-weight: 600;
  color: #f6d774;
  font-size: 15px;
}

/* Button */
.talnaro-upsell-btn {
  background: linear-gradient(90deg, #f2d27c, #d4af37);
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 25px;
  cursor: pointer;
  transition: .25s ease;
  color: #000;
  white-space: nowrap;
}

.talnaro-upsell-btn:hover {
  background: linear-gradient(90deg, #ffe7a8, #f2c94c);
  transform: translateY(-2px);
}

/* Mobile improvements */
@media(max-width: 600px) {
  .talnaro-upsells { 
    max-width: 100%;
    padding: 16px;
  }

  .talnaro-upsell-item {
    grid-template-columns: 45px 1fr 80px;
  }

  .talnaro-upsell-title { font-size: 16px; }
}




.talnaro-upsell-icon {
  width: 38px;
  height: 38px;
  background-image: url("/mnt/data/A_pair_of_vector-based_digital_icons_are_set_again.png");
  background-size: 200% 100%; /* we splitsen het sheet in twee delen */
  background-repeat: no-repeat;
  border-radius: 10px;
}



.talnaro-upsell-icon.shield {
  background-position: left center;
}







.talnaro-upsell-icon.spray {
  background-position: right center;
}







/* CONTAINER van het icoon */
.talnaro-upsell-icon {
  width: 48px;
  height: 48px;
  background-size: 200% auto;   /* twee icons naast elkaar */
  background-repeat: no-repeat;
  background-position: left center;
  border-radius: 8px;
}

.talnaro-upsell-icon {
  width: 42px;
  height: 42px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Shield */
.talnaro-upsell-icon.shield {
  background-image: url('{{ "upsell-icons.png" | asset_url }}');
  background-position: 0px center;
}

/* Spray */
.talnaro-upsell-icon.spray {
  background-image: url('{{ "upsell-icons.png" | asset_url }}');
  background-position: -100px center; /* OF wat nodig is */
}


/* Shield = links */
.talnaro-upsell-icon.shield {
  background-position: left center;
}

/* Spray = rechts */
.talnaro-upsell-icon.spray {
  background-position: right center;
}






.talnaro-upsell-icon.shield {
  width: 42px;
  height: 42px;
  background-image: url('{{ "shield.png" | asset_url }}');
  background-size: contain;
  background-repeat: no-repeat;
}

.talnaro-upsell-icon.spray {
  width: 42px;
  height: 42px;
  background-image: url('{{ "spray.png" | asset_url }}');
  background-size: contain;
  background-repeat: no-repeat;
}










.talnaro-upsell-icon.shield {
  width: 42px;
  height: 42px;
  background-image: url('{{ "shield.png" | asset_url }}');
  background-size: contain;
  background-repeat: no-repeat;
}

.talnaro-upsell-icon.spray {
  width: 42px;
  height: 42px;
  background-image: url('{{ "spray.png" | asset_url }}');
  background-size: contain;
  background-repeat: no-repeat;
}















/* --- Upsell container --- */
.talnaro-upsell-box {
  margin-top: 25px;
  padding: 25px;
  border-radius: 18px;
  background: #fff8e6;
  border: 1px solid #e6d3a7;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.talnaro-upsell-title {
  font-family: 'Georgia', serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 0.3px;
  color: #3a2f1d;
}

/* --- één upsell item --- */
.talnaro-upsell-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid #e8dcbc;
}

.talnaro-upsell-item:last-child {
  border-bottom: none;
}

/* ICONS — beide uit dezelfde sprite */
.talnaro-upsell-icon {
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: transparent;
}

/* Shield = links van sprite */
.talnaro-upsell-icon.shield {
  object-position: left center;
}

/* Spray = rechts van sprite */
.talnaro-upsell-icon.spray {
  object-position: right center;
}

/* Text styling */
.talnaro-upsell-text {
  flex: 1;
}

.talnaro-upsell-item-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 3px;
  color: #3a2f1d;
}

.talnaro-upsell-dsc {
  font-size: 13px;
  color: #6a5f4a;
}

.talnaro-upsell-price {
  margin-top: 4px;
  font-weight: 700;
  color: #c69b3b;
}

/* Button */
.talnaro-upsell-btn {
  background: linear-gradient(90deg, #d4b169, #e3c98e);
  padding: 10px 16px;
  border-radius: 30px;
  color: #222;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}

.talnaro-upsell-btn:hover {
  background: linear-gradient(90deg, #caa55c, #dec083);
}












.talnaro-upsell-icon {
  width: 42px;
  height: 42px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Shield */
.talnaro-upsell-icon.shield {
  background-image: url('{{ "shield.png" | asset_url }}');
}

/* Spray */
.talnaro-upsell-icon.spray {
  background-image: url('{{ "spray.png" | asset_url }}');
}




















 

























/* ---------------- UPSSELL STYLING ---------------- */

.talnaro-upsell-box {
  background: #f8eacb;
  border: 1px solid #e6d7b1;
  padding: 25px;
  border-radius: 14px;
  margin-top: 20px;
}

.talnaro-upsell-title {
  font-size: 22px;
  font-weight: 700;
  color: #3a2f1d;
  margin-bottom: 20px;
}

.talnaro-upsell-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
}

.talnaro-upsell-divider {
  height: 1px;
  width: 100%;
  background: #ddcaa6;
  margin: 10px 0;
}

.talnaro-upsell-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
}

.talnaro-upsell-text {
  flex: 1;
}

.talnaro-upsell-item-title {
  font-size: 17px;
  font-weight: 600;
  color: #2f2517;
}

.talnaro-upsell-dsc {
  font-size: 13px;
  color: #6a5f4a;
  margin-top: 4px;
}

.talnaro-upsell-price {
  font-weight: 700;
  font-size: 15px;
  margin-top: 6px;
  color: #c89b3b;
}

.talnaro-upsell-btn {
  background: linear-gradient(90deg, #d4b169, #e3c98e);
  padding: 9px 16px;
  border-radius: 30px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  color: #222;
  transition: 0.2s;
}

.talnaro-upsell-btn:hover {
  background: linear-gradient(90deg, #ca9c55, #dec083);
}












/* ================================
   MOBILE UPSSELL FIX (max 480px)
   ================================ */
@media (max-width: 480px) {

  .talnaro-upsell-box {
      padding: 18px !important;
      margin-top: 15px !important;
  }

  .talnaro-upsell-item {
      align-items: flex-start !important;
      gap: 12px !important;
      padding: 10px 0 !important;
  }

  .talnaro-upsell-icon img {
      width: 34px !important;
      height: 34px !important;
      border-radius: 6px !important;
  }

  .talnaro-upsell-text {
      flex: 1;
      margin-top: 0px !important;
  }

  .talnaro-upsell-item-title {
      font-size: 16px !important;
      line-height: 1.2 !important;
      margin-bottom: 3px !important;
  }

  .talnaro-upsell-dsc {
      font-size: 12px !important;
      line-height: 1.35 !important;
      margin-bottom: 5px !important;
      max-width: 95%;
  }

  .talnaro-upsell-price {
      font-size: 14px !important;
      margin-top: 2px !important;
  }

  .talnaro-upsell-btn {
      padding: 7px 13px !important;
      font-size: 13px !important;
      border-radius: 20px !important;
      white-space: nowrap;
  }

  .talnaro-upsell-divider {
      margin: 12px 0 !important;
  }
}














/* ==== MOBILE UPSSELL FIX ==== */
@media screen and (max-width: 768px) {

  .talnaro-upsell-box {
    padding: 18px;
    margin-top: 15px;
  }

  .talnaro-upsell-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
  }

  .talnaro-upsell-icon img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px;
  }

  .talnaro-upsell-text {
    width: 100%;
    margin-left: 0;
  }

  .talnaro-upsell-item-title {
    font-size: 20px;
    line-height: 1.25;
  }

  .talnaro-upsell-dsc {
    font-size: 15px;
    line-height: 1.35;
  }

  .talnaro-upsell-price {
    margin-top: 6px;
    font-size: 17px;
  }

  .talnaro-upsell-form {
    width: 100%;
  }

  .talnaro-upsell-btn {
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 14px 0;
    border-radius: 40px;
  }
}







/* ==== ULTRA LUXE TALNARO MOBILE UPSSELL STYLING ==== */
@media screen and (max-width: 768px) {

  /* Kaart-style */
  .talnaro-upsell-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: #f5e8cf;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  /* Tik feedback */
  .talnaro-upsell-item:active {
    transform: scale(0.98);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  }

  .talnaro-upsell-icon img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(255,214,125,0.5);
  }

  /* Tekst */
  .talnaro-upsell-text {
    width: 100%;
  }

  .talnaro-upsell-item-title {
    font-size: 21px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.3px;
  }

  .talnaro-upsell-dsc {
    font-size: 15.5px;
    line-height: 1.38;
    opacity: 0.9;
  }

  .talnaro-upsell-price {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    color: #c6933b !important;
  }

  /* Toevoegen button */
  .talnaro-upsell-btn {
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 15px 0;
    border-radius: 40px;
    background: linear-gradient(90deg, #d4b169, #e4c98c);
    color: #222;
    font-weight: 600;
    border: none;
    transition: background .2s ease, transform .15s ease;
    box-shadow: 0 4px 12px rgba(212,177,105,0.25);
  }

  .talnaro-upsell-btn:active {
    transform: scale(0.97);
    background: linear-gradient(90deg, #caa55c, #dec083);
  }
}






/* ====================================================== */
/* ==============  TALNARO FULL LUXURY PACK  ============ */
/* ====================================================== */

/* ---------- Fade-in animation ---------- */
@keyframes talnaroFade {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.talnaro-upsell-item {
  animation: talnaroFade .5s ease forwards;
}

/* ---------- Deluxe background texture ---------- */
.talnaro-upsell-box {
  background: linear-gradient(180deg, #f6e9d0, #f3e3c5);
  border: 1px solid #ebd9b4;
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ---------- Golden divider ---------- */
.talnaro-upsell-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(200,150,60,0.3), rgba(200,150,60,0.6), rgba(200,150,60,0.3));
  margin: 18px 0;
  border-radius: 2px;
}

/* ---------- Icon pulse glow on hover ---------- */
.talnaro-upsell-icon img {
  transition: transform .25s ease, box-shadow .25s ease;
}

.talnaro-upsell-icon img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255,210,120,0.6);
}

/* ---------- Button hover/push effect ---------- */
.talnaro-upsell-btn {
  transition: transform .15s ease, box-shadow .20s ease;
}

.talnaro-upsell-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 14px rgba(210,180,110,.35);
}

.talnaro-upsell-btn:active {
  transform: scale(0.97);
}

/* ---------- Desktop layout polish ---------- */
@media screen and (min-width: 769px) {
  .talnaro-upsell-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 18px;
    border-radius: 16px;
    gap: 20px;
    background: #f5e8d0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    transition: box-shadow .25s ease, transform .25s ease;
  }

  .talnaro-upsell-item:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    transform: translateY(-3px);
  }

  .talnaro-upsell-text {
    max-width: 62%;
  }

  .talnaro-upsell-icon img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 12px;
  }

  .talnaro-upsell-item-title {
    font-size: 22px;
    line-height: 1.3;
  }
}

/* ---------- Mobile EXTREME LUXE layout ---------- */
@media screen and (max-width: 768px) {
  .talnaro-upsell-item {
    flex-direction: column;
    align-items: flex-start;
    background: #f5e8cf;
    gap: 14px;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .talnaro-upsell-item:active {
    transform: scale(.98);
  }

  .talnaro-upsell-icon img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px;
    box-shadow: 0 0 14px rgba(255,214,125,.45);
  }

  .talnaro-upsell-item-title {
    font-size: 21px;
  }

  .talnaro-upsell-dsc {
    font-size: 15.5px;
    opacity: 0.9;
  }

  .talnaro-upsell-btn {
    width: 100%;
    font-size: 18px;
    padding: 14px 0;
  }
}











/* ================================
   TALNARO UPSSELL — ULTRA LUXE CSS PACK
   ================================ */

.talnaro-upsell-box {
  background: linear-gradient(180deg, #f6e8cf, #f3e3c5);
  border: 1px solid rgba(215,185,120,0.55);
  padding: 28px;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  animation: talnaroFade .6s ease forwards;
}

/* Fade-in */
@keyframes talnaroFade {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Floating gold dust */
.talnaro-upsell-box::before,
.talnaro-upsell-box::after {
  content:"";
  position: absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  pointer-events: none;
  background: radial-gradient(rgba(255,225,150,0.15), transparent 70%);
  animation: talnaroFloat 12s linear infinite;
  mix-blend-mode: screen;
}

@keyframes talnaroFloat {
  0% { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(0,-10%) rotate(360deg); }
}

/* Divider */
.talnaro-upsell-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #d1b273, transparent);
  margin: 22px 0;
  border-radius: 2px;
}

/* Upsell item */
.talnaro-upsell-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-radius: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: talnaroFade .55s ease forwards;
}

/* Hover lift */
.talnaro-upsell-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* 3D tilt effect */
.talnaro-upsell-item:hover .talnaro-upsell-icon img {
  transform: perspective(600px) rotateY(8deg) scale(1.07);
}

/* Icon styling */
.talnaro-upsell-icon img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 0 18px rgba(255,210,120,0.55);
}

/* Title */
.talnaro-upsell-item-title {
  font-size: 22px;
  font-weight: 700;
  color: #322514;
  margin-bottom: 6px;
}

/* Description */
.talnaro-upsell-dsc {
  font-size: 15px;
  opacity: 0.88;
  line-height: 1.4;
  max-width: 90%;
}

/* Price */
.talnaro-upsell-price {
  color: #c39a3c;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
}

/* Button */
.talnaro-upsell-btn {
  background: linear-gradient(90deg,#d6b46c,#e9d091);
  padding: 12px 22px;
  border-radius: 50px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 17px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(212,180,110,0.28);
  white-space: nowrap;
}

.talnaro-upsell-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(212,180,110,0.4);
}

.talnaro-upsell-btn:active {
  transform: scale(.96);
}














/* MOBILE ULTRA LUXE */
@media(max-width:768px){

  .talnaro-upsell-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    border-radius: 20px;
    background: #f7e7cc;
  }

  .talnaro-upsell-icon img {
    width: 70px;
    height: 70px;
  }

  .talnaro-upsell-item-title {
    font-size: 21px;
  }

  .talnaro-upsell-btn {
    width: 100%;
    font-size: 18px;
    padding: 15px 0;
  }

  .talnaro-upsell-price {
    font-size: 18px;
  }
}









@media(min-width:769px){
  .talnaro-upsell-text{
    max-width: 60%;
  }
}





/* ---------- GOLDEN SHIMMER OVER THE WHOLE UPSELL ---------- */
.talnaro-upsell-box {
  position: relative;
  overflow: hidden;
}

.talnaro-upsell-box::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -50%;
  width: 200%;
  height: 300%;
  background: radial-gradient(circle, rgba(255,230,170,0.18) 0%, transparent 70%);
  animation: talnaroShimmer 18s infinite linear;
  pointer-events: none;
  mix-blend-mode: screen;
}

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







/* ---------- Floating golden dust ---------- */
.talnaro-upsell-box::before {
  content: "";
  position: absolute;
  width: 180%;
  height: 180%;
  left: -40%;
  top: -40%;
  background: radial-gradient(rgba(255,215,140,0.10), transparent 70%);
  animation: talnaroGoldFloat 22s infinite linear;
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: overlay;
}

@keyframes talnaroGoldFloat {
  0% { transform: rotate(0deg) translate(0,0); }
  100% { transform: rotate(360deg) translate(0,-15%); }
}











/* ---------- Section breathing effect ---------- */
.talnaro-upsell-item {
  animation: talnaroFade .6s ease forwards, talnaroBreath 6s ease-in-out infinite;
}

@keyframes talnaroBreath {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}










/* ---------- ICON ANIMATION ---------- */
.talnaro-upsell-icon img {
  transition: transform .4s ease, box-shadow .4s ease;
  box-shadow: 0 0 18px rgba(255,210,120,0.55);
  border-radius: 14px;
}

.talnaro-upsell-item:hover .talnaro-upsell-icon img {
  transform: perspective(600px) rotateY(10deg) scale(1.08);
  box-shadow: 0 0 25px rgba(255,215,140,0.75);
}









/* Title fade */
.talnaro-upsell-item-title {
  animation: fadeStagger 0.6s ease forwards;
  animation-delay: .15s;
}

/* Description fade */
.talnaro-upsell-dsc {
  animation: fadeStagger 0.6s ease forwards;
  animation-delay: .3s;
}

/* Price fade */
.talnaro-upsell-price {
  animation: fadeStagger 0.6s ease forwards;
  animation-delay: .45s;
}

@keyframes fadeStagger {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}








/* ---------- Button bounce ---------- */
.talnaro-upsell-btn {
  transition: transform .2s ease, box-shadow .3s ease;
  box-shadow: 0 6px 16px rgba(210,170,90,0.3);
}

.talnaro-upsell-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(210,170,90,.45);
}

.talnaro-upsell-btn:active {
  transform: scale(0.95);
}






@media(min-width: 769px){

  .talnaro-upsell-item {
    padding: 24px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg,#f7e8cd,#f3ddc0);
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
    transition: transform .3s, box-shadow .3s;
  }

  .talnaro-upsell-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
  }

  .talnaro-upsell-icon img {
    width: 65px;
    height: 65px;
  }
}










@media(max-width: 768px){

  .talnaro-upsell-item {
    flex-direction: column;
    background: #f8e7cb;
    padding: 22px;
    border-radius: 20px;
    gap: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }

  .talnaro-upsell-icon img {
    width: 74px;
    height: 74px;
    border-radius: 16px;
  }

  .talnaro-upsell-btn {
    width: 100%;
    font-size: 18px;
    padding: 16px 0;
  }
}







/* GOLDEN AURA SHADOW */
.talnaro-upsell-item {
  position: relative;
}

.talnaro-upsell-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 0 0 32px rgba(255, 215, 130, 0.28);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.talnaro-upsell-item:hover::after {
  opacity: 1;
}











/* MINI SPARKLES */
.talnaro-upsell-item::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  top: -20px;
  right: -20px;
  background-image:
    radial-gradient(circle, rgba(255,230,160,0.9) 0%, transparent 70%),
    radial-gradient(circle, rgba(255,200,130,0.8) 0%, transparent 75%),
    radial-gradient(circle, rgba(255,240,190,0.8) 0%, transparent 80%);
  background-size: 6px 6px, 4px 4px, 3px 3px;
  background-position: 10px 20px, 30px 40px, 50px 10px;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
  transition: opacity .4s ease;
}

.talnaro-upsell-item:hover::before {
  opacity: 1;
}






/* LIQUID GOLD BUTTON */
.talnaro-upsell-btn {
  position: relative;
  overflow: hidden;
}

.talnaro-upsell-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 250%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,245,210,0.8) 40%,
    rgba(255,230,160,0.9) 50%,
    rgba(255,245,210,0.8) 60%,
    transparent 100%);
  opacity: 0.55;
  transform: skewX(-20deg);
  animation: liquidGold 3.2s infinite linear;
  pointer-events: none;
}

@keyframes liquidGold {
  0% { left: -150%; }
  100% { left: 150%; }
}











/* PULSING ICONS */
.talnaro-upsell-icon img {
  animation: iconPulse 5s ease-in-out infinite;
}

@keyframes iconPulse {
  0% { transform: scale(1); box-shadow: 0 0 18px rgba(255,210,120,0.45); }
  50% { transform: scale(1.04); box-shadow: 0 0 28px rgba(255,215,150,0.7); }
  100% { transform: scale(1); box-shadow: 0 0 18px rgba(255,210,120,0.45); }
}










/* GOLDEN BORDER SHIMMER */
.talnaro-upsell-item {
  position: relative;
  border: 1px solid rgba(255, 215, 150, 0.25);
  overflow: hidden;
}

.talnaro-upsell-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(255,225,170,0.15),
    rgba(255,245,210,0.2),
    rgba(255,230,170,0.3),
    rgba(255,245,210,0.2),
    rgba(255,225,170,0.15)
  );
  background-size: 400% 400%;
  animation: borderShimmer 6s ease-in-out infinite;
  z-index: -1;
}

@keyframes borderShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}










/* FLOATING GOLD ORB */
.talnaro-upsell-item::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle,
    rgba(255, 230, 170, 0.55) 0%,
    rgba(255, 210, 120, 0.15) 40%,
    transparent 70%
  );
  border-radius: 50%;
  top: -40px;
  left: -40px;
  filter: blur(12px);
  animation: orbFloat 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes orbFloat {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(30px,20px); }
  100% { transform: translate(0,0); }
}





/* GOLDEN GRADIENT TITLES */
.talnaro-upsell-title {
  background: linear-gradient(
    90deg,
    #d4b47a 0%,
    #f7e6b2 25%,
    #fff7d5 50%,
    #f3d692 75%,
    #d4b47a 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  color: transparent;
  animation: goldTitle 5s linear infinite;
}

@keyframes goldTitle {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}










/* SUBTLE ICON ROTATION */
.talnaro-upsell-icon img {
  animation: rotateIcon 12s ease-in-out infinite;
  transform-origin: center;
}

@keyframes rotateIcon {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(4deg) scale(1.03); }
  100% { transform: rotate(0deg) scale(1); }
}









/* GOLDEN PARTICLES BACKGROUND */
.talnaro-upsell-section {
  position: relative;
}

.talnaro-upsell-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,230,170,0.6) 0%, transparent 70%),
    radial-gradient(circle, rgba(255,200,130,0.45) 0%, transparent 80%),
    radial-gradient(circle, rgba(255,240,190,0.4) 0%, transparent 75%);
  background-size: 180px 180px, 140px 140px, 100px 100px;
  background-position: 20% 30%, 70% 60%, 40% 80%;
  animation: talnaroParticles 20s infinite ease-in-out alternate;
  pointer-events: none;
  opacity: 0.25;
  filter: blur(8px);
}

@keyframes talnaroParticles {
  0%   { background-position: 20% 30%, 70% 60%, 40% 80%; }
  50%  { background-position: 25% 35%, 68% 58%, 42% 82%; }
  100% { background-position: 22% 32%, 72% 63%, 38% 78%; }
}




/* SCROLL FADE-IN */
.talnaro-upsell-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
}

.talnaro-upsell-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}









/* STICKY MOBILE UPSELL */
@media (max-width: 768px) {
  .talnaro-upsell-section {
    position: sticky;
    bottom: 0;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,220,150,0.25);
    box-shadow: 0 -8px 22px rgba(0,0,0,0.45);
  }

  .talnaro-upsell-item {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}












/* 3D PARALLAX TILT */
.talnaro-upsell-item {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  perspective: 900px;
}

.talnaro-upsell-item:hover {
  transform: rotateX(6deg) rotateY(-6deg);
}

.talnaro-upsell-icon img {
  transition: transform .4s ease;
  transform: translateZ(22px);
}





/* GOLD DUST MIST */
.talnaro-upsell-item {
  position: relative;
  overflow: hidden;
}

.talnaro-upsell-item::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 180%;
  height: 180%;
  background: radial-gradient(
    circle,
    rgba(255,240,200,0.25) 0%,
    rgba(255,220,160,0.18) 30%,
    rgba(255,210,120,0.1) 45%,
    transparent 80%
  );
  filter: blur(30px);
  opacity: 0.35;
  animation: goldMistMove 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes goldMistMove {
  0%   { transform: translate(-10px, -10px) scale(1); }
  50%  { transform: translate(30px, 20px) scale(1.1); }
  100% { transform: translate(-5px, -15px) scale(1); }
}









/* GLOW TOUCH EFFECT */
.talnaro-upsell-item:hover {
  box-shadow:
    0 0 28px rgba(255,215,140,0.25),
    inset 0 0 18px rgba(255,230,170,0.15);
}

.talnaro-upsell-item:active {
  box-shadow:
    0 0 38px rgba(255,230,150,0.35),
    inset 0 0 24px rgba(255,235,180,0.25);
  transform: scale(0.99);
}







/* BUTTON LAVA PRESS */
.talnaro-upsell-btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.talnaro-upsell-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255,240,190,0.9) 0%,
    rgba(255,220,150,0.5) 35%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0);
  transition: transform .4s cubic-bezier(.17,.67,.35,1.4), opacity .4s ease-out;
  pointer-events: none;
}

.talnaro-upsell-btn:active::after {
  transform: scale(2.4);
  opacity: 0.5;
}













/* FLOATING SICILIAN LIGHT STREAKS */
.talnaro-upsell-item::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 2px;
  right: -80px;
  top: 40%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,230,150,0.8),
    transparent
  );
  opacity: 0.6;
  filter: blur(2px);
  animation: streakMove 5s linear infinite;
  pointer-events: none;
}

@keyframes streakMove {
  0%   { transform: translateX(0) rotate(12deg); }
  100% { transform: translateX(-260px) rotate(12deg); }
}






/* GOLDEN FOG BACKGROUND */
.talnaro-upsell-section {
  position: relative;
  overflow: hidden;
}

.talnaro-upsell-section::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    circle,
    rgba(255,230,170,0.18) 0%,
    rgba(255,210,120,0.12) 35%,
    rgba(255,190,110,0.06) 55%,
    transparent 80%
  );
  filter: blur(45px);
  animation: talnaroFog 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes talnaroFog {
  0%   { transform: translate(-20px, -10px) scale(1); }
  50%  { transform: translate(20px, 25px) scale(1.1); }
  100% { transform: translate(-15px, -20px) scale(1); }
}













/* ELECTRIC MICRO SHOCKS */
.talnaro-upsell-item:hover {
  box-shadow:
    0 0 24px rgba(255,220,160,0.35),
    0 0 40px rgba(255,240,200,0.25),
    inset 0 0 22px rgba(255,230,180,0.18);
}

.talnaro-upsell-item:hover::before {
  filter: blur(26px);
  opacity: 0.45;
}








/* SOFT MOONLIGHT OVERLAY */
.talnaro-upsell-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 70% 20%,
    rgba(255,255,255,0.08),
    transparent 70%
  );
  opacity: 0.4;
  mix-blend-mode: soft-light;
  animation: moonlightMove 14s linear infinite;
}

@keyframes moonlightMove {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(15px,10px); }
  100% { transform: translate(0,0); }
}










/* CINEMATIC ZOOM ENTRANCE */
.talnaro-upsell-item {
  opacity: 0;
  transform: scale(0.92) translateY(18px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22,.61,.36,1);
}

.talnaro-upsell-item.loaded {
  opacity: 1;
  transform: scale(1) translateY(0);
}









/* GOLDEN NEBULA FOG */
.talnaro-upsell-section {
  position: relative;
  overflow: hidden;
}

.talnaro-upsell-section::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -40%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255,240,200,0.22) 0%,
    rgba(255,215,160,0.16) 35%,
    rgba(220,160,100,0.1) 60%,
    transparent 90%
  );
  filter: blur(60px);
  animation: nebulaFog 25s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.35;
}

@keyframes nebulaFog {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,60px) scale(1.15); }
  100% { transform: translate(-20px,-20px) scale(1); }
}









/* SICILIAN WINE GLOW */
.talnaro-upsell-item {
  background: linear-gradient(
    145deg,
    rgba(50,0,0,0.55),
    rgba(80,10,10,0.45),
    rgba(20,0,0,0.65)
  );
  border: 1px solid rgba(255,210,150,0.22);
  box-shadow:
    0 0 22px rgba(255,180,140,0.25),
    inset 0 0 25px rgba(80,0,0,0.25);
}







/* FLOATING MICRO STARS */
.talnaro-upsell-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,240,190,0.9) 0%, transparent 60%),
    radial-gradient(circle, rgba(255,220,150,0.9) 0%, transparent 65%),
    radial-gradient(circle, rgba(255,240,200,0.85) 0%, transparent 70%);
  background-size: 4px 4px, 3px 3px, 2px 2px;
  background-position: 
    20% 40%,
    60% 70%,
    80% 30%;
  animation: microStars 12s linear infinite;
  opacity: 0.33;
  pointer-events: none;
}

@keyframes microStars {
  0%   { background-position: 20% 40%, 60% 70%, 80% 30%; }
  100% { background-position: 25% 45%, 63% 73%, 82% 28%; }
}







/* MARBLE ENGRAVED TEXT */
.talnaro-upsell-title {
  font-weight: 600;
  background: 
    url('{{ "marble-texture.png" | asset_url }}') repeat;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  letter-spacing: 0.03em;
  text-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    0px -1px 1px rgba(255,255,255,0.2);
  filter: contrast(1.1);
}






/* ========== MOBILE UPSSELL ICON FIX (PHONE SIZE) ========== */
@media (max-width: 480px) {
  .talnaro-upsell-icon,
  .talnaro-upsell-icon img {
    width: 34px !important;
    height: 34px !important;
  }

  /* Icon netjes centreren */
  .talnaro-upsell-item {
    gap: 12px !important;
  }

  /* Tekst iets smaller zodat alles mooi past */
  .talnaro-upsell-text {
    margin-left: 4px !important;
  }
}