html{
  position: relative;
}

body{
  position: relative;
  background: transparent;
}

/* Background image layer */
body::before{
  content: "";
  position: fixed;
  top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
  z-index: -3;

  background-image: url("/static/assets/ce_logo_shape.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  transform: translateZ(0);
}

/* Blur + dark glass overlay */
body::after{
  content: "";
  position: fixed;
  top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
  z-index: -2;

  backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Animated grain texture layer */
html::before{
  content: "";
  position: fixed;
  top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
  z-index: -1;
  pointer-events: none;

  /* SVG noise tile (lightweight) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 260px 260px;

  opacity: 0.10;                 /* intensity */
  mix-blend-mode: soft-light;    /* luxe film grain */
  filter: contrast(120%) brightness(110%);

  animation: grainShift 7s steps(10) infinite;
}

@keyframes grainShift{
  0%   { transform: translate3d(0,0,0); }
  10%  { transform: translate3d(-2%, -2%, 0); }
  20%  { transform: translate3d(-4%,  2%, 0); }
  30%  { transform: translate3d( 2%, -4%, 0); }
  40%  { transform: translate3d(-2%,  6%, 0); }
  50%  { transform: translate3d(-6%,  2%, 0); }
  60%  { transform: translate3d( 6%,  0%, 0); }
  70%  { transform: translate3d( 0%,  6%, 0); }
  80%  { transform: translate3d(-6%,  0%, 0); }
  90%  { transform: translate3d( 2%, -6%, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* Make key surfaces slightly translucent so background shows through */
.hero{
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.card.bg-dark{
  background-color: rgba(18,18,18,0.85) !important;
  backdrop-filter: blur(2px);
}

.modal-content{
  background-color: rgba(10,10,10,0.95);
}


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@300;400;700&display=swap');
:root {
  --nav-height: 50px;
  --gold: #d7c07a;
  --gold-70: rgba(215, 192, 122, 0.75);
  --gold-grad: linear-gradient(90deg, #b8994c, #e6d294, #b8994c);
}
body { font-family:'Lato',sans-serif; color:#e8e8e8; background:#0d0d0d; }
.brand { font-family:'Playfair Display',serif; letter-spacing:.5px; color: var(--gold) !important; }

.brand-logo {
  height: clamp(40px, 4vw, 70px);
  width: auto;
  /* max-width: min(200px, 38vw); */
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35));
}

/* Slightly more compact navbar spacing */
.navbar {
  padding-top: .45rem;
  padding-bottom: .45rem;
}

.text-gold { color: var(--gold) !important; } .text-gold-70{ color: var(--gold-70) !important; }
.border-gold{ border-color: var(--gold) !important; }
.bg-black { background:#0d0d0d !important; }
.bg-dark  { background:#151515 !important; }
.hero{
  min-height: 33vh;
    background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55));
  border-bottom: 1px solid var(--gold);
  display:flex; align-items:center;
}

.product{ transition: transform .25s ease, box-shadow .25s ease; }
.product:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.5) }
.product-img{ object-fit: cover; height: 300px; background: #111; }
.code-badge{
  display:inline-block; padding:.15rem .5rem; font-weight:700; letter-spacing:.08rem;
  color:#0d0d0d; background: var(--gold-grad); border-radius: 999px;
}
.form-control.border-gold{ border:1px solid var(--gold); }
.form-control:focus{ box-shadow: 0 0 0 .2rem rgba(215,192,122,.25); border-color: var(--gold); }
.modal-dark .modal-content{ background:#0f0f0f; color:#eee; border:1px solid var(--gold); }
.modal-dark .modal-header{ border-bottom-color: var(--gold-70); }
.modal-dark .btn-close{ filter: invert(1) grayscale(100%); }
.viewer-img{ max-height: 80vh; width: 100%; object-fit: contain; background:#000; }
footer{ background:#0d0d0d; }

/* Buttons */
.btn-outline-gold{
  --bs-btn-color: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-bg: rgba(215,192,122,0.12);
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(215,192,122,0.18);
  --bs-btn-active-border-color: var(--gold);
  --bs-btn-active-color: #fff;
}

/* Section titles */
.section-title{ font-family:'Playfair Display', serif; letter-spacing:.02rem; }

/* Product detail */
.detail-img-wrap{
  background:#111;
  border: 1px solid rgba(215,192,122,0.35);
  border-radius: 12px;
  padding: 12px;
}
.detail-img{
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display:block;
}


/* Sticky collections nav */
.sticky-collections{
  position: sticky;
  top: var(--nav-height);
    /* below navbar */
  z-index: 1020;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(8px);
}

/* Section chips */
.chip{
  display:inline-block;
  padding:.35rem .7rem;
  border: 1px solid rgba(215,192,122,0.45);
  border-radius: 999px;
  color: var(--gold);
  text-decoration: none;
  font-size: .95rem;
}
.chip:hover{
  background: rgba(215,192,122,0.10);
  color: #fff;
}

/* QR image */
.qr-img{
  width: 180px;
  height: 180px;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

/* Cart */
.cart-thumb{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(215,192,122,0.35);
}
.qty-control{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.qty-control .qty-input{
  width: 78px;
  text-align:center;
}

.reels-row{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.reel-card{
  flex: 0 0 auto;
  border-radius: 14px;
  padding: 10px;
  scroll-snap-align: start;
  min-width: 280px;
    max-height: fit-content;
}
/* Team */
.team-avatar{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(215,192,122,0.35);
  background: #111;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.team-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.team-initials{
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .06rem;
}
.footer-social a:hover{ color:#fff; }

/* Cart icon micro-interactions */
@keyframes cart-shake {

  0%,
  100% {
    transform: translateX(0) rotate(0);
  }

  20% {
    transform: translateX(-2px) rotate(-4deg);
  }

  40% {
    transform: translateX(2px) rotate(4deg);
  }

  60% {
    transform: translateX(-2px) rotate(-3deg);
  }

  80% {
    transform: translateX(2px) rotate(3deg);
  }
}

@keyframes cart-bounce {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.12);
  }

  55% {
    transform: scale(0.96);
  }

  75% {
    transform: scale(1.04);
  }

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

.cart-link svg {
  transform-origin: center;
  will-change: transform;
}

.cart-link:hover svg,
.cart-link:focus-visible svg {
  animation: cart-shake 420ms ease-in-out;
}

.cart-link.is-bouncing svg,
.cart-link[aria-current="page"] svg {
  animation: cart-bounce 520ms cubic-bezier(.22, 1.2, .36, 1);
}

@media (prefers-reduced-motion: reduce) {

  .cart-link:hover svg,
  .cart-link:focus-visible svg,
  .cart-link.is-bouncing svg,
  .cart-link[aria-current="page"] svg {
    animation: none !important;
  }
}
/* Navbar expandable search */
.nav-actions {
  gap: .25rem;
}

.nav-search {
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* Navbar expandable search (centered) */
.nav-search-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: calc(100% - 190px);
  /* leaves room for cart+toggler on right */
  z-index: 2;
}

.nav-search-trigger {
  appearance: none;
  border: 1px solid rgba(215, 192, 122, 0.35);
  background: rgba(13, 13, 13, 0.55);
  color: var(--gold);
  padding: .28rem .6rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
}

.nav-search-trigger:hover,
.nav-search-trigger:focus-visible {
  color: #fff;
  background: rgba(215, 192, 122, 0.10);
  border-color: rgba(215, 192, 122, 0.7);
  outline: none;
}

.nav-search-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  /* thinner silhouette */
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-search-label {
  font-weight: 600;
  letter-spacing: .02rem;
  font-size: .95rem;
  color: currentColor;
}

.nav-search-form {
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: width 190ms ease, opacity 130ms ease;
}

.nav-search.is-open .nav-search-form {
  width: min(360px, 62vw);
  opacity: 1;
  pointer-events: auto;
}

/* When expanded, hide the label text so only icon + input remain */
.nav-search.is-open .nav-search-label {
  display: none;
}

.nav-search-input {
  height: 34px;
  padding: .25rem .7rem;
  background: rgba(13, 13, 13, 0.70);
  color: var(--gold);
  /* gold letters */
  border-radius: 999px;
}

.nav-search-input::placeholder {
  color: rgba(215, 192, 122, 0.70);
}

/* Navbar search: force black input (override Bootstrap + autofill) */
.nav-search .nav-search-input.form-control {
  background-color: rgba(13, 13, 13, 0.85) !important;
  color: var(--gold) !important;
  caret-color: var(--gold);
  border-color: rgba(215, 192, 122, 0.55) !important;
}

.nav-search .nav-search-input.form-control:focus {
  background-color: rgba(13, 13, 13, 0.92) !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 .2rem rgba(215, 192, 122, .18) !important;
}

/* Chrome/Safari autofill can force a light background */
.nav-search .nav-search-input.form-control:-webkit-autofill,
.nav-search .nav-search-input.form-control:-webkit-autofill:hover,
.nav-search .nav-search-input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--gold) !important;
  box-shadow: 0 0 0px 1000px rgba(13, 13, 13, 0.92) inset !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(13, 13, 13, 0.92) inset !important;
  transition: background-color 9999s ease-out 0s;
}

@media (max-width: 420px) {
  .nav-search-label {
    display: none;
  }

  /* keeps center clean on very small screens */
  .nav-search-center {
    max-width: calc(100% - 160px);
  }
}

/* Gold scrollbar (site-wide)
   NOTE: On macOS Safari with "Show scroll bars: Automatically", scrollbars are overlay and may not show custom colors.
   For consistent styling in Safari: System Settings → Appearance → Show scroll bars → Always.
*/
:root {
  scrollbar-color: var(--gold) #0d0d0d;
  /* Firefox */
  scrollbar-width: thin;
  /* Firefox */
}

/* WebKit (Chrome/Safari/Edge) - target html/body explicitly for Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: rgba(13, 13, 13, 0.95);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: rgba(215, 192, 122, 0.92);
  /* stronger gold */
  border-radius: 999px;
  border: 1px solid rgba(13, 13, 13, 0.85);
  /* lighter than before so gold shows on thin overlay */
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: rgba(215, 192, 122, 1);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: rgba(13, 13, 13, 0.95);
}