/* LENCECO retail refresh — clean, conversion-focused, original brand styling */
:root {
  --lce-blue: #123d5a;
  --lce-blue-2: #0b2c42;
  --lce-cream: #ffffff !important;
  --lce-gold: #a98643;
  --lce-gold-light: #d4af37;
  --lce-line: #e8e8e8;
  --lce-ink: #171717;
  --lce-muted: #64645f;
  --paper: #ffffff !important;
  --ivory: #ffffff !important;
  --ivory-2: #ffffff !important;
  --cream: #ffffff !important;
}
body { background: #ffffff !important; color: var(--lce-ink); }

/* PURE WHITE CARDS ACROSS THE ENTIRE APPLICATION */
.product-card,
.product-card__media,
.product-card__media img,
.folder-card,
.folder-card__body,
.store-card,
.admin-card,
.modal-card,
.radio-card label,
.zn-shape-card,
.zn-style-card,
.zn-how-card,
.zn-lens-card,
.pdp-media,
.pdp-gallery,
.pdp-main,
.pdp-thumbs,
.pdp-thumbs button,
.pdp-thumbs img,
.pdp-scrubber,
.pdp-lens-package,
.cart-item,
.checkout-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.zn-style-card,
.zn-how-card {
  border: 1px solid #ededed !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.035) !important;
}

.zn-style-card img {
  filter: none !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  background: transparent !important;
}

.zn-bg-minimalist,
.zn-bg-oversized,
.zn-bg-sunset,
.zn-bg-vintage,
.zn-bg-summer,
.zn-how-yellow,
.zn-how-lime,
.zn-how-blue,
.zn-how-peach,
.zn-how-pink {
  background: #ffffff !important;
}

.product-card {
  position: relative;
  background: #ffffff !important;
  border: 1px solid #ebe9e4 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(20,30,35,.045) !important;
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, border-color .2s ease !important;
  padding-bottom: 10px;
  content-visibility: auto;
  contain-intrinsic-size: 380px;
}
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(20,35,45,.09) !important;
  border-color: #cec9bd !important;
}
.product-card__media {
  background: #ffffff !important;
  border-bottom: 1px solid #f2f2f0;
  overflow: hidden;
}
.product-card__media img {
  background: #ffffff !important;
  object-fit: contain !important;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.product-card:hover .product-card__media img {
  will-change: transform;
}
.pc-badge{background:var(--lce-blue)!important;color:#fff!important;border-radius:3px!important;padding:6px 9px!important;font-weight:600!important;letter-spacing:.08em!important}
.pc-wish{background:rgba(255,255,255,.94)!important;border:1px solid #dedbd2!important;box-shadow:0 2px 10px rgba(0,0,0,.07)!important}
.product-card h3,.product-card h2{font-family:Jost,Arial,sans-serif!important;font-weight:500!important;letter-spacing:.02em!important}.product-card .price{font-weight:600!important;color:#101010!important}
.lce-rating{display:flex;align-items:center;gap:6px;margin:2px 14px 8px;color:#e58b19;font:500 12px/1.2 Jost,Arial,sans-serif;letter-spacing:.04em}.lce-rating span{color:#6b6b66;font-size:11px}
.lce-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#dedbd3;margin:30px 0 0;border-top:1px solid #dedbd3;border-bottom:1px solid #dedbd3}.lce-benefit{background:#ffffff;padding:18px 14px;text-align:center;font:500 11px/1.45 Jost,Arial,sans-serif;letter-spacing:.06em}.lce-benefit b{display:block;color:var(--lce-blue);font-size:13px;margin-bottom:3px}
.btn--gold{background:var(--lce-blue)!important;border-color:var(--lce-blue)!important}.btn--gold:hover{background:var(--lce-blue-2)!important}.btn--outline:hover{border-color:var(--lce-blue)!important;color:var(--lce-blue)!important}
.pdp-media,.pdp-gallery,.pdp-main,.pdp-thumbs,.pdp-thumbs button{background:#ffffff!important;background-color:#ffffff!important}.pdp-thumbs img{object-fit:contain!important;background:#ffffff!important}.pdp-info{background:#fff}.pdp-info h1{line-height:1.08!important}.pdp-price{font-weight:600!important}
footer,.site-footer{background:#0b2231!important;color:#fff!important}

@media(max-width:800px){
  .lce-announcement{height:30px;font-size:9px;letter-spacing:.07em}
  .header-inner{min-height:60px!important}
  .shop-toolbar{top:60px}
  .grid-products{gap:14px 10px!important}
  .product-card{border-radius:7px!important}
  .lce-rating{margin-left:10px;margin-right:10px}
  .lce-benefits{grid-template-columns:1fr 1fr}
  .lce-benefit{padding:14px 8px}
  .hero-banner-section,.hero{min-height:unset!important}
}

/* ========================================================================= */
/* 1. 3D Studio & Empty Placeholder Removal (No Blank Boxes Allowed)         */
/* ========================================================================= */
.hl-strip,
.gl3d-canvas,
.gl3d-stage,
.stage-shell,
section:has(.gl3d-canvas),
section:has(.stage-shell),
section:has(a[href="/studio"]),
.film-empty,
.sm-ph,
svg[aria-label*="photography pending"],
.face-placeholder {
  display: none !important;
}

/* Remove any container that has no valid image or banner */
.hl-cell:empty,
.product-card:empty,
.folder-card:empty,
.empty-box-hidden {
  display: none !important;
}

/* ========================================================================= */
/* 2. HD Clarity & Smooth Performance Optimization                          */
/* ========================================================================= */
img {
  max-width: 100%;
  content-visibility: auto;
}

.product-card__media img,
.pdp-media img,
.pdp-gallery img,
.pdp-thumbs img {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  transition: transform .3s ease !important;
}

.product-card:hover .product-card__media img,
.lce-hl-card:hover img {
  transform: scale(1.03);
}

/* ========================================================================= */
/* 3. Luxury Highlights Carousel & Slider Underneath                         */
/* ========================================================================= */
.lce-hl-wrapper {
  position: relative;
  max-width: 1300px;
  margin: 10px auto 40px;
  padding: 0 20px;
}

.lce-hl-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px 4px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lce-hl-track::-webkit-scrollbar {
  display: none;
}

.lce-hl-card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 300px;
  max-width: 440px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #16130f;
  border: 1px solid rgba(201, 163, 92, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  scroll-snap-align: start;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  cursor: pointer;
}

.lce-hl-card:hover {
  transform: translateY(-6px);
  border-color: #c9a35c;
  box-shadow: 0 16px 40px rgba(201, 163, 92, 0.25);
}

.lce-hl-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: #110e0b;
}

.lce-hl-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lce-hl-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(18, 61, 90, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 600 10.5px/1 Jost, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 2;
}

.lce-hl-content {
  padding: 16px 18px 20px;
  background: linear-gradient(180deg, #1d1813 0%, #16130f 100%);
  border-top: 1px solid rgba(201, 163, 92, 0.2);
}

.lce-hl-tag {
  color: #c9a35c;
  font: 500 11px/1.2 Jost, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.lce-hl-title {
  color: #efe9df;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 6px;
}

.lce-hl-desc {
  color: #a89f91;
  font: 400 13px/1.5 Jost, sans-serif;
  margin: 0 0 14px;
}

.lce-hl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c9a35c;
  font: 600 12px/1 Jost, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap .25s ease, color .25s ease;
}
.lce-hl-card:hover .lce-hl-btn {
  color: #f3dfb2;
  gap: 12px;
}

/* Slider Controls: Arrows & Navigation Dots */
.lce-hl-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
}

.lce-hl-nav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #c9a35c;
  background: rgba(22, 19, 15, 0.85);
  backdrop-filter: blur(10px);
  color: #c9a35c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all .25s ease;
}
.lce-hl-nav:hover {
  background: #c9a35c;
  color: #16130f;
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(201, 163, 92, 0.4);
}

.lce-hl-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lce-hl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(201, 163, 92, 0.3);
  border: 1px solid #c9a35c;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lce-hl-dot.active {
  width: 28px;
  border-radius: 10px;
  background: #c9a35c;
  box-shadow: 0 0 10px rgba(201, 163, 92, 0.5);
}

@media(max-width: 900px) {
  .lce-hl-card {
    flex: 0 0 calc(50% - 10px);
    min-width: 260px;
  }
}

@media(max-width: 600px) {
  .lce-hl-card {
    flex: 0 0 85%;
    min-width: 250px;
  }
  .lce-hl-wrapper {
    padding: 0 12px;
  }
}

/* ========================================================================= */
/* 4. Film Section — Full Frame & Gemini Logo Removal via Scale Crop         */
/* ========================================================================= */
#film {
  background: #0e0c0a;
  padding: 60px 0 70px;
}

.film-stage {
  position: relative;
  width: 100%;
  max-width: 550px;
  height: 650px;
  margin: 0 auto 28px;
  border-radius: 16px;
  overflow: hidden !important;
  background: #110e0b;
  border: 1px solid rgba(201, 163, 92, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(201, 163, 92, 0.15);
}

.film-vid {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* Scale up by 1.28 and shift upward by 4% to completely crop out bottom Gemini watermark */
  transform: scale(1.28) translateY(-4%) !important;
  transform-origin: center 15% !important;
  display: block !important;
}

.film-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 700px;
  margin: 0 auto;
}

.film-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(22, 19, 15, 0.9);
  border: 1px solid rgba(201, 163, 92, 0.4);
  color: #c9a35c;
  font: 600 11px/1 Jost, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all .25s ease;
}

.film-chip:hover,
.film-chip.on {
  background: #c9a35c;
  color: #16130f;
  border-color: #c9a35c;
  box-shadow: 0 4px 18px rgba(201, 163, 92, 0.35);
}

.film-note {
  width: 100%;
  text-align: center;
  color: #8c8374;
  font: 500 10.5px/1.4 Jost, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 14px;
}

@media (max-width: 680px) {
  .film-stage {
    max-width: 100%;
    height: 520px;
    border-radius: 12px;
  }
  .film-vid {
    transform: scale(1.30) translateY(-4%) !important;
    transform-origin: center 15% !important;
  }
}



/* ========================================================================= */
/* UNIVERSAL PURE WHITE BACKGROUND FOR ALL PRODUCTS & MEDIA                   */
/* ========================================================================= */
body, #root, main, .pdp, .pdp-media, .pdp-gallery, .pdp-main, .pdp-main > *, 
.pdp-thumbs, .pdp-thumbs button, .pdp-thumbs button img, .sm-wrap, .sm-wrap img,
.product-card, .product-card__media, .product-card__media img,
.product-grid, .grid-products, .shop-grid, .section--flush-top,
.pdp-360-container, .scrubber-bar, .scrubber-dots {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.pdp-thumbs button {
  border: 1px solid #eeeeee !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 4px !important;
}

.pdp-thumbs button.sel {
  border-color: #123d5a !important;
  box-shadow: 0 0 0 2px #123d5a !important;
}

.product-card__media,
.pc-ratio {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pdp-main img,
.product-card__media img,
.product-card__media .sm-wrap img,
.pdp-thumbs img,
.pdp-thumbs button img,
.pdp-thumbs .sm-wrap img {
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto !important;
  background: #ffffff !important;
}

/* Ensure DIRECT FRONT FRAME is ALWAYS the visible hero frame on product cards */
.pc-angle2 {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.product-card:hover .pc-angle2,
.product-card:focus-within .pc-angle2,
.product-card:active .pc-angle2 {
  display: none !important;
  opacity: 0 !important;
}

.product-card .product-card__media img {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card:hover .product-card__media img {
  transform: scale(1.04) translateZ(0) !important;
}
