/* ═══════════════════════════════════════════════════════════════
   SHENOVA · Stories CSS
   File: css/stories.css
   Import AFTER style.css in every page that shows the navbar.
═══════════════════════════════════════════════════════════════ */

/* ── Tokens (inherits from main :root, adds story-specific) ── */
:root {
  --story-gold          : #b8956a;
  --story-gold2         : #d4b896;
  --story-cream         : #faf7f2;
  --story-ink           : #0d0c0b;
  --story-glass         : rgba(255,255,255,0.07);
  --story-glass-border  : rgba(255,255,255,0.12);
  --story-progress-bg   : rgba(255,255,255,0.22);
  --story-progress-fill : rgba(255,255,255,0.92);
  --story-dur           : 6000;   /* ms — JS reads this via getComputedStyle */
}

/* ════════════════════════════════════════════════
   1 · NAVBAR STORY BUBBLE
════════════════════════════════════════════════ */

.story-bubble-wrap {
  display      : inline-flex;
  align-items  : center;
  justify-content: center;
  position     : relative;
  cursor       : pointer;
  flex-shrink  : 0;
}

/* Gradient ring — the "Instagram-style" glowing border */
.story-bubble {
  width         : 36px;
  height        : 36px;
  border-radius : 50%;
  position      : relative;
  display       : flex;
  align-items   : center;
  justify-content: center;
  background    : linear-gradient(
    135deg,
    var(--story-gold),
    var(--story-gold2),
    #e8c99a,
    var(--story-gold)
  );
  background-size: 300% 300%;
  animation     : storyRingRotate 3s linear infinite;
  transition    : transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.story-bubble:hover {
  transform: scale(1.12);
}

/* Inner white "gap" circle */
.story-bubble::before {
  content       : '';
  position      : absolute;
  inset         : 2.5px;
  border-radius : 50%;
  background    : var(--story-ink);
  z-index       : 1;
}

/* Inner avatar / icon */
.story-bubble-inner {
  position      : absolute;
  inset         : 5px;
  border-radius : 50%;
  background    : linear-gradient(135deg, #1a1814, #2a2620);
  z-index       : 2;
  display       : flex;
  align-items   : center;
  justify-content: center;
  overflow      : hidden;
}

.story-bubble-inner svg {
  color   : var(--story-gold);
  opacity : 0.9;
}

/* "S" letter mark as fallback */
.story-bubble-mark {
  font-family   : "Cormorant Garamond", Georgia, serif;
  font-size     : 11px;
  font-weight   : 300;
  letter-spacing: 0.05em;
  color         : var(--story-gold);
  line-height   : 1;
}

/* Pulsing glow when stories exist */
.story-bubble-wrap.has-stories .story-bubble {
  box-shadow:
    0 0 0 0   rgba(184,149,106, 0.5),
    0 0 16px  rgba(184,149,106, 0.28);
  animation:
    storyRingRotate 3s linear infinite,
    storyGlowPulse  2.6s ease-in-out infinite;
}

/* New-story indicator dot */
.story-new-dot {
  position      : absolute;
  top           : 0;
  right         : 0;
  width         : 9px;
  height        : 9px;
  background    : linear-gradient(135deg, var(--story-gold), #f0c87a);
  border-radius : 50%;
  border        : 1.5px solid var(--story-ink);
  z-index       : 10;
  animation     : storyDotPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

.story-bubble-wrap:not(.has-stories) .story-new-dot {
  display: none;
}

/* Tooltip label */
.story-tooltip {
  position      : absolute;
  bottom        : -28px;
  left          : 50%;
  transform     : translateX(-50%);
  white-space   : nowrap;
  font-family   : "DM Sans", sans-serif;
  font-size     : 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.45);
  pointer-events: none;
  opacity       : 0;
  transition    : opacity 0.25s;
}

.story-bubble-wrap:hover .story-tooltip {
  opacity: 1;
}

/* ── Keyframes ──────────────────────────────────── */
@keyframes storyRingRotate {
  0%   { background-position: 0%   50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0%   50% }
}

@keyframes storyGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,149,106,0.5), 0 0 16px rgba(184,149,106,0.28) }
  50%       { box-shadow: 0 0 0 5px rgba(184,149,106,0),  0 0 24px rgba(184,149,106,0.42) }
}

@keyframes storyDotPop {
  from { transform: scale(0) }
  to   { transform: scale(1) }
}

/* ════════════════════════════════════════════════
   2 · FULLSCREEN STORY VIEWER
════════════════════════════════════════════════ */

.story-viewer {
  position  : fixed;
  inset     : 0;
  z-index   : 99999;
  display   : flex;
  align-items   : center;
  justify-content: center;

  /* Hidden by default */
  opacity        : 0;
  visibility     : hidden;
  pointer-events : none;
  transition     : opacity 0.45s cubic-bezier(0.16,1,0.3,1),
                   visibility 0.45s;
}

.story-viewer.open {
  opacity        : 1;
  visibility     : visible;
  pointer-events : all;
}

/* Dark blurred backdrop */
.story-backdrop {
  position  : absolute;
  inset     : 0;
  background: rgba(8, 7, 6, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  cursor    : pointer;
}

/* ── Story card container ─────────────────────── */
.story-card {
  position      : relative;
  width         : min(420px, 100vw);
  height        : min(746px, 100dvh);
  border-radius : 20px;
  overflow      : hidden;
  background    : #111;
  box-shadow    :
    0 40px 120px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.06);
  transform     : scale(0.88) translateY(24px);
  transition    : transform 0.5s cubic-bezier(0.16,1,0.3,1);
  z-index       : 2;
}

.story-viewer.open .story-card {
  transform: scale(1) translateY(0);
}

/* On mobile use full screen */
@media (max-width: 480px) {
  .story-card {
    width         : 100vw;
    height        : 100dvh;
    border-radius : 0;
    box-shadow    : none;
  }
}

/* ── Media layer ──────────────────────────────── */
.story-media {
  position: absolute;
  inset    : 0;
  width    : 100%;
  height   : 100%;
  object-fit: cover;
  display  : block;
  transition: opacity 0.35s ease;
}

.story-media.video-story {
  object-fit: cover;
}

/* Cinematic grain overlay */
.story-grain {
  position       : absolute;
  inset          : 0;
  z-index        : 1;
  pointer-events : none;
  opacity        : 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
  animation: storyGrain 0.4s steps(2) infinite;
}

@keyframes storyGrain {
  0%  { background-position: 0 0 }
  25% { background-position: -8% 6% }
  50% { background-position: 6% -4% }
  75% { background-position: -3% 12% }
}

/* Dark gradient overlays (top + bottom) */
.story-overlay-top {
  position   : absolute;
  top        : 0; left: 0; right: 0;
  height     : 200px;
  background : linear-gradient(180deg, rgba(0,0,0,0.72) 0%, transparent 100%);
  z-index    : 2;
  pointer-events: none;
}

.story-overlay-bot {
  position   : absolute;
  bottom     : 0; left: 0; right: 0;
  height     : 260px;
  background : linear-gradient(0deg, rgba(0,0,0,0.86) 0%, transparent 100%);
  z-index    : 2;
  pointer-events: none;
}

/* ── Progress bars ────────────────────────────── */
.story-progress-wrap {
  position    : absolute;
  top         : 16px;
  left        : 14px;
  right       : 14px;
  z-index     : 10;
  display     : flex;
  gap         : 4px;
  align-items : center;
}

.story-progress-bar {
  flex           : 1;
  height         : 2px;
  background     : var(--story-progress-bg);
  border-radius  : 2px;
  overflow       : hidden;
  position       : relative;
}

.story-progress-fill {
  position       : absolute;
  top: 0; left: 0; bottom: 0;
  background     : var(--story-progress-fill);
  border-radius  : 2px;
  width          : 0%;
  transition     : width 0.05s linear;
}

/* Past stories — fully filled */
.story-progress-bar.done .story-progress-fill {
  width: 100%;
  transition: none;
}

/* Active story — width is set dynamically by JS via requestAnimationFrame */

/* ── Header (avatar + brand + close) ─────────── */
.story-header {
  position   : absolute;
  top        : 36px;
  left       : 14px;
  right      : 14px;
  z-index    : 10;
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.story-avatar {
  width         : 34px;
  height        : 34px;
  border-radius : 50%;
  border        : 1.5px solid rgba(255,255,255,0.25);
  background    : linear-gradient(135deg, #1a1814, #2a2620);
  display       : flex;
  align-items   : center;
  justify-content: center;
  flex-shrink   : 0;
}

.story-avatar-mark {
  font-family   : "Cormorant Garamond", Georgia, serif;
  font-size     : 13px;
  font-weight   : 300;
  letter-spacing: 0.04em;
  color         : var(--story-gold);
}

.story-brand-info {
  flex: 1;
  min-width: 0;
}

.story-brand-name {
  font-family   : "Cormorant Garamond", Georgia, serif;
  font-size     : 14px;
  font-weight   : 300;
  letter-spacing: 0.38em;
  color         : rgba(255,255,255,0.92);
  line-height   : 1;
  margin-bottom : 3px;
}

.story-time-ago {
  font-family   : "DM Sans", sans-serif;
  font-size     : 10px;
  letter-spacing: 0.12em;
  color         : rgba(255,255,255,0.36);
  text-transform: uppercase;
}

/* Controls: mute + close */
.story-controls {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-shrink: 0;
}

.story-ctrl-btn {
  width         : 34px;
  height        : 34px;
  border-radius : 50%;
  border        : 1px solid rgba(255,255,255,0.14);
  background    : rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  display       : flex;
  align-items   : center;
  justify-content: center;
  cursor        : pointer;
  transition    : background 0.2s, transform 0.2s;
  flex-shrink   : 0;
}

.story-ctrl-btn:hover {
  background : rgba(255,255,255,0.16);
  transform  : scale(1.08);
}

.story-ctrl-btn svg {
  color: rgba(255,255,255,0.85);
}

/* ── Tap zones (invisible hit areas) ─────────── */
.story-tap-prev,
.story-tap-next {
  position      : absolute;
  top           : 0;
  bottom        : 0;
  width         : 38%;
  z-index       : 8;
  cursor        : pointer;
}

.story-tap-prev { left: 0; }
.story-tap-next { right: 0; }

/* ── Caption + CTA ────────────────────────────── */
.story-caption-wrap {
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;
  z-index   : 10;
  padding   : 0 20px 28px;
}

.story-caption {
  font-family   : "Cormorant Garamond", Georgia, serif;
  font-size     : clamp(16px, 4vw, 22px);
  font-weight   : 300;
  font-style    : italic;
  letter-spacing: 0.02em;
  line-height   : 1.4;
  color         : rgba(255,255,255,0.92);
  margin-bottom : 14px;
  text-shadow   : 0 2px 12px rgba(0,0,0,0.5);
}

.story-cta-btn {
  display       : inline-flex;
  align-items   : center;
  gap           : 8px;
  padding       : 11px 22px;
  background    : rgba(255,255,255,0.10);
  border        : 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(16px);
  border-radius : 50px;
  font-family   : "DM Sans", sans-serif;
  font-size     : 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.92);
  text-decoration: none;
  cursor        : pointer;
  transition    : background 0.28s, border-color 0.28s, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

.story-cta-btn:hover {
  background   : rgba(184,149,106,0.22);
  border-color : rgba(184,149,106,0.5);
  transform    : scale(1.04);
  color        : #fff;
}

.story-cta-btn svg {
  color: var(--story-gold);
  flex-shrink: 0;
}

/* ── Story count indicator ────────────────────── */
.story-counter {
  position      : absolute;
  bottom        : 28px;
  right         : 20px;
  z-index       : 10;
  font-family   : "DM Sans", sans-serif;
  font-size     : 9.5px;
  letter-spacing: 0.22em;
  color         : rgba(255,255,255,0.3);
  text-transform: uppercase;
}

/* ── Empty / loading states ───────────────────── */
.story-loading {
  position        : absolute;
  inset           : 0;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 16px;
  z-index         : 20;
  background      : rgba(10,9,8,0.6);
}

.story-spinner {
  width         : 36px;
  height        : 36px;
  border        : 1.5px solid rgba(255,255,255,0.12);
  border-top    : 1.5px solid var(--story-gold);
  border-radius : 50%;
  animation     : storySpinner 0.9s linear infinite;
}

@keyframes storySpinner {
  to { transform: rotate(360deg); }
}

.story-loading-text {
  font-family   : "DM Sans", sans-serif;
  font-size     : 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.28);
}

/* ── No-stories state ─────────────────────────── */
.story-empty {
  position       : absolute;
  inset          : 0;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  z-index        : 20;
}

.story-empty-icon {
  font-family   : "Cormorant Garamond", Georgia, serif;
  font-size     : 52px;
  font-weight   : 300;
  letter-spacing: 0.38em;
  color         : rgba(255,255,255,0.10);
}

.story-empty-text {
  font-family   : "DM Sans", sans-serif;
  font-size     : 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.22);
}

/* ── Transition fade between stories ─────────── */
.story-media-fade {
  animation: storyFadeIn 0.35s ease both;
}

@keyframes storyFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* ════════════════════════════════════════════════
   3 · ADMIN STORIES PANEL (inside dashboard.html)
════════════════════════════════════════════════ */

.story-admin-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap                  : 16px;
  margin-top           : 8px;
}

.story-admin-card {
  position      : relative;
  border-radius : 16px;
  overflow      : hidden;
  background    : var(--ink2, #1a1814);
  aspect-ratio  : 9/16;
  cursor        : grab;
  transition    : transform 0.28s, box-shadow 0.28s;
  user-select   : none;
}

.story-admin-card:hover {
  transform : scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
}

.story-admin-card.dragging {
  opacity   : 0.5;
  cursor    : grabbing;
  transform : scale(0.96);
}

.story-admin-card.drag-over {
  box-shadow: 0 0 0 2px var(--gold, #9a7c4e);
}

.story-admin-thumb {
  width         : 100%;
  height        : 100%;
  object-fit    : cover;
  display       : block;
}

/* Expired overlay */
.story-admin-card.expired::after {
  content        : 'EXPIRED';
  position       : absolute;
  inset          : 0;
  background     : rgba(10,9,8,0.72);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : "DM Sans", sans-serif;
  font-size      : 10px;
  letter-spacing : 0.28em;
  color          : rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
}

.story-admin-overlay {
  position   : absolute;
  bottom     : 0;
  left       : 0;
  right      : 0;
  padding    : 30px 10px 10px;
  background : linear-gradient(0deg, rgba(0,0,0,0.88) 0%, transparent 100%);
  z-index    : 2;
}

.story-admin-expiry {
  font-family   : "DM Sans", sans-serif;
  font-size     : 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.45);
  margin-bottom : 6px;
}

.story-admin-caption {
  font-family   : "Cormorant Garamond", Georgia, serif;
  font-size     : 12px;
  font-style    : italic;
  color         : rgba(255,255,255,0.75);
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
  margin-bottom : 8px;
}

.story-admin-actions {
  display : flex;
  gap     : 6px;
}

.story-admin-btn {
  flex          : 1;
  padding       : 6px 0;
  font-family   : "DM Sans", sans-serif;
  font-size     : 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border        : 1px solid rgba(255,255,255,0.14);
  background    : rgba(255,255,255,0.06);
  color         : rgba(255,255,255,0.7);
  border-radius : 8px;
  cursor        : pointer;
  transition    : background 0.2s;
}

.story-admin-btn:hover {
  background: rgba(255,255,255,0.14);
}

.story-admin-btn.danger:hover {
  background  : rgba(180,35,24,0.3);
  border-color: rgba(180,35,24,0.4);
  color       : #fca5a5;
}

/* Story type badge */
.story-type-badge {
  position      : absolute;
  top           : 10px;
  left          : 10px;
  z-index       : 3;
  padding       : 4px 8px;
  background    : rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border-radius : 6px;
  font-family   : "DM Sans", sans-serif;
  font-size     : 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.65);
}

/* Upload form for stories */
.story-upload-zone {
  border        : 1.5px dashed rgba(154,124,78,0.35);
  border-radius : 16px;
  padding       : 36px 24px;
  text-align    : center;
  cursor        : pointer;
  transition    : border-color 0.25s, background 0.25s;
  position      : relative;
  overflow      : hidden;
}

.story-upload-zone:hover,
.story-upload-zone.dragover {
  border-color: rgba(154,124,78,0.7);
  background  : rgba(154,124,78,0.04);
}

.story-upload-zone input[type="file"] {
  position      : absolute;
  inset         : 0;
  opacity       : 0;
  cursor        : pointer;
  width         : 100%;
  height        : 100%;
}

.story-upload-icon {
  width         : 44px;
  height        : 44px;
  border-radius : 50%;
  border        : 1px solid rgba(154,124,78,0.3);
  background    : rgba(154,124,78,0.06);
  display       : flex;
  align-items   : center;
  justify-content: center;
  margin        : 0 auto 14px;
  color         : var(--gold, #9a7c4e);
}

.story-upload-label {
  font-family   : "DM Sans", sans-serif;
  font-size     : 12px;
  color         : var(--muted, #8a8279);
}

.story-upload-label strong {
  color: var(--ink, #0c0b09);
}

/* Story preview in upload form */
.story-preview-thumb {
  width         : 80px;
  aspect-ratio  : 9/16;
  object-fit    : cover;
  border-radius : 8px;
  margin        : 8px 4px 0;
}

/* Edit story modal */
.story-edit-modal {
  position   : fixed;
  inset      : 0;
  z-index    : 9999;
  background : rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display    : none;
  align-items: center;
  justify-content: center;
  padding    : 20px;
}

.story-edit-modal.show {
  display: flex;
}

.story-edit-box {
  background    : var(--cream, #faf8f4);
  border-radius : 20px;
  padding       : 28px;
  width         : min(480px, 100%);
  max-height    : 90dvh;
  overflow-y    : auto;
}

.story-edit-head {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 20px;
}

.story-edit-head h3 {
  font-family   : "Cormorant Garamond", Georgia, serif;
  font-size     : 28px;
  font-weight   : 300;
}

/* Drag-to-reorder instruction */
.story-reorder-hint {
  font-family   : "DM Sans", sans-serif;
  font-size     : 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color         : var(--muted, #8a8279);
  margin-bottom : 12px;
}

/* ════════════════════════════════════════════════
   4 · RESPONSIVE ADJUSTMENTS
════════════════════════════════════════════════ */

/* Smaller bubble on very narrow navbars */
@media (max-width: 360px) {
  .story-bubble {
    width : 30px;
    height: 30px;
  }
  .story-bubble::before {
    inset: 2px;
  }
  .story-bubble-inner {
    inset: 4px;
  }
}

/* Mobile viewer — ensure no bounce on iOS */
@media (max-width: 480px) {
  .story-viewer {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }
  .story-card {
    border-radius: 0;
  }
}

@media(max-width:768px){

  .nav-left{
    gap:8px !important;
  }

  .story-bubble-wrap{
    margin-left:8px !important;
  }

  .story-bubble{
    width:46px !important;
    height:46px !important;
  }

  .story-bubble-mark{
    font-size:17px !important;
  }

  /* IMPORTANT */
  .menu-toggle,
  .hamburger,
  .mobile-menu-btn{

    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    z-index:99999 !important;
  }

}
.navbar{
  justify-content:space-between !important;
}

.nav-right{
  gap:12px !important;
}
/* =========================================
   FINAL STORY FIX
========================================= */

.story-bubble-wrap{

  position:relative !important;

  z-index:20 !important;

  pointer-events:auto !important;
}

.story-bubble{

  position:relative !important;

  z-index:20 !important;
}

/* IMPORTANT */
.story-viewer{
  z-index:999999 !important;
}

/* CART / DRAWER / MENU ABOVE STORY */

.cart-drawer,
.cart-sidebar,
.mobile-menu,
.drawer,
.sidebar,
.nav-menu{

  z-index:9999999 !important;
}

/* CLOSE BUTTON FIX */

.cart-close,
.close-cart,
.drawer-close,
.close-btn{

  position:relative !important;

  z-index:99999999 !important;

  pointer-events:auto !important;
}

/* MOBILE NAV FIX */

@media(max-width:768px){

  .navbar,
  .nav-wrapper,
  .nav-container{

    overflow:visible !important;
  }

  .story-bubble-wrap{
    margin-left:10px !important;
  }

  .story-bubble{

    width:46px !important;
    height:46px !important;
  }

  .story-bubble-mark{
    font-size:17px !important;
  }

  /* HAMBURGER FORCE SHOW */

  .menu-toggle,
  .hamburger,
  .mobile-menu-btn,
  .nav-toggle{

    display:flex !important;

    visibility:visible !important;

    opacity:1 !important;

    z-index:999999 !important;

    position:relative !important;
  }

}
/* FORCE MOBILE HAMBURGER */

@media(max-width:768px){

  button[aria-label="Menu"],
  .menu-btn,
  .menu-toggle,
  .hamburger,
  .hamburger-menu,
  .mobile-menu-btn,
  .nav-toggle,
  .toggle-menu,
  .mobile-toggle{

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    opacity:1 !important;
    visibility:visible !important;

    width:42px !important;
    height:42px !important;

    position:relative !important;
    z-index:999999 !important;
  }

  /* 3 lines create manually if hidden */

  .menu-toggle::before,
  .menu-toggle::after,
  .hamburger::before,
  .hamburger::after{

    content:'' !important;

    position:absolute !important;

    width:18px !important;
    height:2px !important;

    background:#fff !important;
  }

}
/* FIX HAMBURGER ICON */

.hamburger,
.lux-hamburger{

  width:42px !important;
  height:42px !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  background:transparent !important;
  border:none !important;

  cursor:pointer !important;

  position:relative !important;
  z-index:999999 !important;
}

/* THE 2 LINES */

.hamburger span,
.lux-hamburger span{

  display:block !important;

  width:18px !important;
  height:1.8px !important;

  background:#fff !important;

  border-radius:999px !important;

  opacity:1 !important;
  visibility:visible !important;

  transition:all .3s ease !important;
}

/* MOBILE */

@media(max-width:768px){

  .hamburger,
  .lux-hamburger{

    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .hamburger span,
  .lux-hamburger span{

    background:#fff !important;
  }

}
.story-logo-img{

  width:72% !important;
  height:72% !important;

  object-fit:contain !important;

  border-radius:50% !important;

  filter:
  brightness(1.08)
  contrast(1.05);

  transform:scale(1.02);
}
.story-logo-img{

  width:94% !important;
  height:94% !important;

  object-fit:contain !important;

  border-radius:50% !important;

  filter:
  brightness(1.08)
  contrast(1.05);

  transform:scale(1.08) !important;
}
/* DESKTOP = HIDE */
@media(min-width:769px){

  .hamburger,
  .lux-hamburger{

    display:none !important;
  }

}

/* MOBILE = SHOW */
@media(max-width:768px){

  .hamburger,
  .lux-hamburger{

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    width:42px !important;
    height:42px !important;

    opacity:1 !important;
    visibility:visible !important;

    background:transparent !important;
    border:none !important;

    position:relative !important;
    z-index:999999 !important;
  }

  .hamburger span,
  .lux-hamburger span{

    display:block !important;

    width:18px !important;
    height:2px !important;

    background:#fff !important;

    border-radius:999px !important;

    opacity:1 !important;
    visibility:visible !important;
  }

}
/* =========================
   MOBILE NAVBAR FIX
========================= */

@media (max-width: 768px) {

  .nav-container{

    padding: 18px 16px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;
  }

  .nav-left{

    flex:1 !important;
    min-width:0 !important;
  }

  .brand-logo{

    font-size:2rem !important;
    letter-spacing:7px !important;

    white-space:nowrap !important;
  }

  .nav-right{

    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    flex-shrink:0 !important;
  }

  .nav-icons{

    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* STORY BUBBLE */

  .story-bubble{

    width:54px !important;
    height:54px !important;

    flex-shrink:0 !important;
  }

  .story-bubble-inner{

    width:44px !important;
    height:44px !important;
  }

  /* ICON BUTTONS */

  .lux-icon-btn{

    width:34px !important;
    height:34px !important;

    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex-shrink:0 !important;
  }

  .lux-icon-btn svg{

    width:17px !important;
    height:17px !important;
  }

  /* CART COUNT */

  .cart-count{

    top:-4px !important;
    right:-4px !important;

    min-width:16px !important;
    height:16px !important;

    font-size:9px !important;
  }

  /* HAMBURGER */

  .hamburger,
  .lux-hamburger{

    display:flex !important;

    width:34px !important;
    height:34px !important;

    align-items:center !important;
    justify-content:center !important;

    flex-direction:column !important;

    gap:4px !important;

    background:transparent !important;
    border:none !important;

    flex-shrink:0 !important;

    opacity:1 !important;
    visibility:visible !important;
  }

  .hamburger span,
  .lux-hamburger span{

    width:18px !important;
    height:2px !important;

    background:#fff !important;

    border-radius:999px !important;

    display:block !important;
  }

  /* HIDE ABOUT */

  .nav-link-sm{

    display:none !important;
  }

}