/* frontend\public\assets\css\components.css */


/* =========================================================
   SECTION 01 — BUTTONS: Primary (Ice Blue / Premium)
   ========================================================= */

   .btn-gold{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
  
    background: linear-gradient(135deg,
      var(--gold-1) 0%,
      var(--gold-2) 28%,
      var(--gold-3) 62%,
      var(--gold-2) 100%
    );
  
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
      0 16px 38px var(--gold-glow),
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -10px 18px rgba(0,0,0,.24);
  
    color: rgba(8,12,16,.92);
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
  }
  
  .btn-gold:hover{
    transform: translateY(-1px);
    box-shadow:
      0 20px 52px var(--gold-glow-strong),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -12px 20px rgba(0,0,0,.26);
    filter: saturate(.95) contrast(1.01);
    opacity: 1;
  }
  
  .btn-gold:active{
    transform: translateY(0px);
    box-shadow:
      0 12px 30px rgba(64,185,235,.14),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -14px 22px rgba(0,0,0,.30);
  }
  
  .btn-gold::after{
    content:"";
    position:absolute;
    top:-80%;
    left:-40%;
    width:70%;
    height:260%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.20) 45%,
      rgba(255,255,255,.08) 55%,
      transparent 100%
    );
    transform: rotate(18deg);
    transition: left .75s ease;
    opacity:.60;
    pointer-events:none;
    filter: blur(.15px);
  }
  
  .btn-gold:hover::after{ left:120%; }
  
  
  /* =========================================================
     SECTION 02 — BUTTONS: Ghost / Outline (Premium Ice Blue)
     ========================================================= */
  
  .btn-gold:focus-visible,
  .btn-ghost:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px rgba(64,185,235,.14),
      0 0 0 1px rgba(216,245,255,.18);
  }
  
  .btn-ghost{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
  
    background:
      linear-gradient(180deg, rgba(255,255,255,.022), rgba(64,185,235,.018));
    backdrop-filter: blur(12px);
  
    border: 1px solid rgba(64,185,235,.32);
    color: rgba(255,255,255,.84);
  
    box-shadow:
      0 10px 28px rgba(0,0,0,.36),
      inset 0 1px 0 rgba(255,255,255,.05);
  
    transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  }
  
  .btn-ghost:hover{
    transform: translateY(-1px);
    border-color: rgba(216,245,255,.45);
    box-shadow:
      0 16px 40px rgba(0,0,0,.46),
      0 0 0 1px rgba(64,185,235,.10),
      0 0 18px rgba(64,185,235,.08),
      inset 0 1px 0 rgba(255,255,255,.06);
    opacity: 1;
  }
  
  .btn-ghost::before,
  .btn-ghost::after{
    content:"";
    position:absolute;
    left:10%;
    width:80%;
    height:1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(216,245,255,.52),
      rgba(64,185,235,.20),
      transparent
    );
    opacity:0;
    transition: opacity .25s ease;
    pointer-events:none;
  }
  .btn-ghost::before{ top:8px; }
  .btn-ghost::after{ bottom:8px; }
  .btn-ghost:hover::before,
  .btn-ghost:hover::after{ opacity:1; }
  
  
  /* =========================================================
     SECTION 03 — TOPBAR (Premium Compact on Scroll)
     ========================================================= */
  
  .topbar{
    background: rgba(7,6,7,var(--topbarOverlay));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
  
    transition: background .22s ease, backdrop-filter .22s ease, border-color .22s ease;
    will-change: background, backdrop-filter, border-color;
  }
  
  .topbar .topbar-row{
    transition: padding .22s ease;
    will-change: padding;
  }
  
  /* Optional: wirkt bei dir sehr edel, weil die Typo “atmet” */
  .topbar .serif{
    transition: opacity .22s ease;
  }
  
  /* Compact State */
  .topbar.is-compact{
    background: rgba(7,6,7,.86);
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(255,255,255,.10);
  }
  
  .topbar.is-compact .topbar-row{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  @media (max-width: 640px){
    .topbar.is-compact .topbar-row{
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }
  }
  
  /* Optional: Nav im Compact minimal ruhiger */
  .topbar.is-compact .nav-underline{
    color: rgba(255,255,255,.68);
  }
  .topbar.is-compact .nav-underline:hover{
    color: rgba(255,255,255,.92);
  }
  
  
  
  /* =========================================================
     SECTION 04 — NAV LINK UNDERLINE
     ========================================================= */
  
  :where(.nav-underline){
    position: relative;
    display: inline-block;
    padding: 6px 0;
    color: rgba(255,255,255,.74);
    transition: color .2s ease;
  }
  .nav-underline:hover{ color: rgba(255,255,255,.95); }
  
  .nav-underline::after,
  .nav-underline::before{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
      rgba(64,185,235,0),
      rgba(64,185,235,1),
      rgba(64,185,235,0)
    );
    transform: scaleX(0);
    transition: transform .35s ease;
  }
  .nav-underline::after{
    bottom: -6px;
    transform-origin: right;
  }
  .nav-underline::before{
    top: -6px;
    transform-origin: left;
  }
  .nav-underline:hover::after,
  .nav-underline:hover::before{
    transform: scaleX(1);
  }
  
  
  /* =========================================================
     SECTION 04.1 — NAV DROPDOWN (NEU)
     ========================================================= */
  
  .nav-item{
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  
  .nav-trigger{
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  
  .nav-caret{
    font-size: 11px;
    line-height: 1;
    opacity: .60;
    transform: translateY(-1px);
    transition: opacity .2s ease, transform .2s ease;
  }
  
  .nav-item:hover .nav-caret,
  .nav-item:focus-within .nav-caret{
    opacity: .90;
    transform: translateY(0px);
  }
  
  .nav-dropdown{
    position: absolute;
    top: calc(100% + 14px);
    left: -10px;
    min-width: 240px;
  
    padding: 12px 10px;
    border-radius: 18px;
  
    background: rgba(7,6,7,.90);
    backdrop-filter: blur(16px);
  
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
      0 26px 80px rgba(0,0,0,.65),
      0 0 0 1px rgba(64,185,235,.05),
      0 0 22px rgba(64,185,235,.04);
  
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .22s ease;
    z-index: 60;
  }
  
  .nav-dropdown--wide{
    min-width: 280px;
  }
  
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .nav-dd-item{
    display: flex;
    align-items: center;
    width: 100%;
  
    padding: 10px 12px;
    border-radius: 14px;
  
    color: rgba(255,255,255,.78);
    text-decoration: none;
  
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }
  
  .nav-dd-item:hover{
    background: rgba(64,185,235,.035);
    color: rgba(255,255,255,.94);
    transform: translateX(2px);
  }
  
  .nav-dd-item:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px rgba(64,185,235,.14),
      0 0 0 1px rgba(216,245,255,.12);
  }
  
  .nav-dd-sep{
    height: 1px;
    margin: 8px 10px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  }
  
  .nav-dd-label{
    padding: 8px 12px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: rgba(255,255,255,.50);
  }
  
  
  /* Hover-Bridge: hält das Dropdown offen, wenn man von Link ins Menü fährt */
  .nav-item::after{
    content:"";
    position:absolute;
    left:-12px;
    right:-12px;
    top:100%;
    height:18px;
    background: transparent;
    /* pointer-events bleibt bewusst aktiv (default), damit Hover greift */
  }
  
  
  /* =========================================================
     SECTION 04.2 — ICON BUTTON (Wishlist) (NEU)
     ========================================================= */
  
  :where(.icon-btn){
    position: relative;
    align-items: center;
    justify-content: center;
  
    width: 44px;
    height: 44px;
  
    border-radius: 18px;
    background: rgba(255,255,255,.02);
    backdrop-filter: blur(12px);
  
    border: 1px solid rgba(64,185,235,.30);
    color: rgba(255,255,255,.78);
  
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.05);
  
    transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, color .2s ease;
    text-decoration: none;
  }
  
  .icon-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(216,245,255,.46);
    color: rgba(255,255,255,.92);
    box-shadow:
      0 16px 44px rgba(0,0,0,.45),
      0 0 0 1px rgba(64,185,235,.10),
      0 0 18px rgba(64,185,235,.07),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  
  .icon-btn:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px rgba(64,185,235,.14),
      0 0 0 1px rgba(216,245,255,.18);
  }
  
  .icon-heart{
    width: 18px;
    height: 18px;
    display: block;
  }
  
  
  /* =========================================================
     SECTION 05 — LUXE CARDS (boxenlos + holographic hover)
     ========================================================= */
  
  .luxe-card{
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 26px;
  
    padding: 36px 36px;
    min-height: 240px;
  
    /* boxenlos (default): keine sichtbare Box */
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
  
    text-decoration: none;
    transform: translateZ(0);
    transition:
      transform .28s ease,
      box-shadow .32s ease,
      background .28s ease,
      border-color .28s ease;
  }
  
  /* Glow Layer (dein <span class="luxe-card__bg">) */
  .luxe-card__bg{
    position: absolute;
    inset: -2px;
    z-index: 0;
    pointer-events: none;
  
    /* subtiler Ice-Blue Hauch */
    background:
      radial-gradient(circle at 18% 22%, rgba(64,185,235,.08), transparent 60%),
      radial-gradient(circle at 82% 28%, rgba(216,245,255,.05), transparent 65%),
      radial-gradient(circle at 55% 115%, rgba(255,255,255,.02), transparent 70%);
  
    /* Standard: kaum sichtbar */
    opacity: .30;
    transform: scale(1.01);
    filter: blur(6px);
  
    transition: opacity .35s ease, transform .45s ease, filter .45s ease;
  }
  
  /* Holographic sweep (der “durchlaufende” Effekt beim Hover) */
  .luxe-card::before{
    content:"";
    position:absolute;
    top:-60%;
    left:-70%;
    width:240%;
    height:240%;
    z-index: 1;
    pointer-events:none;
  
    background: linear-gradient(
      0deg,
      transparent,
      transparent 34%,
      rgba(216,245,255,.12),
      rgba(64,185,235,.08),
      transparent 70%
    );
  
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .45s ease, transform .65s ease;
    mix-blend-mode: screen;
  }
  
  /* Content über Glow + Sweep */
  .luxe-card__top,
  .luxe-title,
  .luxe-desc,
  .luxe-cta{
    position: relative;
    z-index: 2;
  }
  
  .luxe-card__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
  }
  
  .luxe-kicker{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .32em;
    color: rgba(255,255,255,.60);
  }
  
  .luxe-title{
    margin-top: 8px;
    font-family: "Playfair Display", ui-serif, Georgia, serif;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255,255,255,.92);
  }
  
  .luxe-desc{
    margin-top: 12px;
    max-width: 48ch;
    color: rgba(255,255,255,.68);
    line-height: 1.75;
    font-size: 15px;
  }
  
  .luxe-cta{
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255,255,255,.80);
  }
  
  /* Minimaler CTA (kein Gradient-Pill) */
  .luxe-pill{
    color: rgba(255,255,255,.84);
    border-bottom: 1px solid rgba(64,185,235,.26);
    padding-bottom: 2px;
    transition: color .25s ease, border-color .25s ease;
  }
  
  .luxe-arrow{
    color: rgba(64,185,235,.82);
    opacity: .72;
    transform: translateX(0);
    transition: transform .22s ease, color .22s ease, opacity .22s ease;
  }
  
  /* Hover */
  .luxe-card:hover{
    transform: translateY(-4px);
  
    /* fast unsichtbar, nur ein Hauch */
    background: rgba(255,255,255,.008);
    border-color: rgba(64,185,235,.10);
  
    box-shadow:
      0 22px 70px rgba(0,0,0,.68),
      0 10px 28px rgba(64,185,235,.028),
      inset 0 1px 0 rgba(255,255,255,.035);
  }
  
  .luxe-card:hover .luxe-card__bg{
    /* Hover: sichtbar, aber classy */
    opacity: .52;
    transform: scale(1.04);
    filter: blur(9px);
  }
  
  .luxe-card:hover::before{
    opacity: 1;
    transform: rotate(-45deg) translateY(38%);
  }
  
  .luxe-card:hover .luxe-pill{
    color: rgba(216,245,255,.92);
    border-color: rgba(64,185,235,.42);
  }
  
  .luxe-card:hover .luxe-arrow{
    opacity: .92;
    transform: translateX(4px);
    color: rgba(216,245,255,.90);
  }
  
  /* Focus */
  .luxe-card:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px rgba(64,185,235,.14),
      0 0 0 1px rgba(216,245,255,.12),
      0 26px 80px rgba(0,0,0,.62);
  }
  
  /* Responsive */
  @media (max-width: 640px){
    .luxe-card{
      padding: 26px 24px;
      min-height: 210px;
      border-radius: 22px;
    }
    .luxe-title{ font-size: 30px; }
  }
  
  
  /* =========================================================
     SECTION — ICON BUTTON (für Mobile Controls)
     ========================================================= */
  
  :where(.icon-btn){
    position: relative;
    align-items: center;
    justify-content: center;
  
    width: 44px;
    height: 44px;
  
    border-radius: 18px;
    background: rgba(255,255,255,.02);
    backdrop-filter: blur(12px);
  
    border: 1px solid rgba(64,185,235,.30);
    color: rgba(255,255,255,.78);
  
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.05);
  
    transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, color .2s ease;
    text-decoration: none;
  }
  
  .icon-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(216,245,255,.46);
    color: rgba(255,255,255,.92);
    box-shadow:
      0 16px 44px rgba(0,0,0,.45),
      0 0 0 1px rgba(64,185,235,.10),
      0 0 18px rgba(64,185,235,.07),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  
  .icon-btn:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px rgba(64,185,235,.14),
      0 0 0 1px rgba(216,245,255,.18);
  }
  
  .icon-burger, .icon-close{
    width: 20px;
    height: 20px;
    display: block;
  }
  
  /* Tailwind sr-only fallback (falls du es nicht drin hast) */
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }
  
  /* =========================================================
     SECTION — MOBILE NAV (Off-canvas)
     ========================================================= */
  
  .nav-overlay{
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s ease;
  }
  
  .nav-overlay.is-open{
    opacity: 1;
  }
  
  .mobile-nav{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(92vw, 420px);
  
    z-index: 80;
  
    background: rgba(7,6,7,.92);
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: -30px 0 90px rgba(0,0,0,.70);
  
    transform: translateX(100%);
    transition: transform .26s ease;
  
    display: flex;
    flex-direction: column;
  }
  
  .mobile-nav.is-open{
    transform: translateX(0);
  }
  
  .mobile-nav__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  
    padding: 18px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  
  .mobile-nav__title{
    font-size: 18px;
    letter-spacing: .14em;
    color: rgba(255,255,255,.90);
  }
  
  .mobile-nav__sub{
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
  }
  
  .mobile-nav__body{
    padding: 10px 12px 14px;
    overflow: auto;
  }
  
  .mnav-link{
    display: block;
    padding: 12px 12px;
    border-radius: 16px;
    text-decoration: none;
  
    color: rgba(255,255,255,.80);
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }
  
  .mnav-link:hover{
    background: rgba(64,185,235,.035);
    color: rgba(255,255,255,.92);
    transform: translateX(2px);
  }
  
  .mnav-link--top{
    margin-top: 8px;
  }
  
  .mnav-acc{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    padding: 12px 12px;
    border-radius: 16px;
  
    background: transparent;
    border: 0;
    cursor: pointer;
  
    color: rgba(255,255,255,.82);
    font: inherit;
    text-align: left;
  
    transition: background .18s ease, color .18s ease;
  }
  
  .mnav-acc:hover{
    background: rgba(64,185,235,.03);
    color: rgba(255,255,255,.92);
  }
  
  .mnav-caret{
    opacity: .70;
    transition: transform .18s ease, opacity .18s ease;
  }
  
  .mnav-acc[aria-expanded="true"] .mnav-caret{
    transform: rotate(180deg);
    opacity: .95;
  }
  
  .mnav-panel{
    padding: 2px 6px 10px 14px;
  }
  
  .mnav-sep{
    height: 1px;
    margin: 10px 12px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  }
  
  .mnav-label{
    padding: 6px 12px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: rgba(255,255,255,.50);
  }
  
  .mobile-nav__foot{
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  
  
  /* --- Force: Wishlist nur Desktop (unter md = weg) --- */
  .wishlist-desktop { display: none !important; }
  
  @media (min-width: 48rem) { /* md */
    .wishlist-desktop { display: inline-flex !important; }
  }
  
  
  /* =========================================================
     TOPBAR: Mobile Burger sauber rechts + Icon zentriert
     ========================================================= */
  @media (max-width: 767px){
  
    /* Mobile Layout: nur Brand links + Actions rechts (Nav ist ja hidden) */
    header.topbar .topbar-row{
      grid-template-columns: 1fr auto !important;
      gap: 12px !important;
    }
  
    /* Actions-Block (dein rechter Container) wirklich nach ganz rechts */
    header.topbar .topbar-row > div{
      justify-self: end !important;
    }
  
    /* Burger-Button als perfekte runde Pill + Zentrierung */
    header.topbar .icon-btn{
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
  
      width: 46px;         /* Stellschraube */
      height: 46px;        /* Stellschraube */
      padding: 0 !important;
  
      border-radius: 999px !important;
      line-height: 0 !important; /* verhindert Off-Center durch Line-Box */
    }
  
    /* SVG im Button exakt zentrieren/skalieren */
    header.topbar .icon-btn svg{
      display: block;
      width: 20px;         /* Stellschraube */
      height: 20px;        /* Stellschraube */
    }
  }
  
  /* =========================================================
     MOBILE NAV: Close (X) zentriert in der Pill
     ========================================================= */
  .mobile-nav__head .icon-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  
    width: 46px;          /* identisch zum Burger */
    height: 46px;
    padding: 0 !important;
  
    border-radius: 999px !important;
    line-height: 0 !important;
  }
  
  .mobile-nav__head .icon-btn svg{
    display: block;
    width: 18px;          /* X wirkt optisch besser etwas kleiner */
    height: 18px;
  }
  
  
  
  /* =========================================================
     MOBILE: Warenkorb-Dropdown als zentrierte Card (statt rechts)
     ========================================================= */
  @media (max-width: 768px){
  
    /* Das Dropdown NICHT mehr als "rechts angedocktes" Menü */
    #cartDropdown.cart-menu{
      position: fixed !important;
  
      /* zentrieren */
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%) !important;
  
      /* unter der Topbar */
      top: 84px !important;
  
      /* Größe + Scroll */
      width: min(520px, 92vw) !important;
      max-height: calc(100vh - 110px) !important;
      overflow: auto !important;
  
      z-index: 70 !important;
    }
  
    /* Optional: damit die Card nicht am Rand klebt */
    #cartDropdown.cart-menu{
      border-radius: 26px;
    }
  
    /* Close-Button "×" sauber mittig */
    .cart-close{
      display: grid !important;
      place-items: center !important;
      line-height: 1 !important;
    }
  }
  
  /* =========================================================
     Icon-Buttons (Burger + X) immer perfekt mittig in der Pill
     ========================================================= */
  .icon-btn{
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
  }
  
  .icon-btn svg{
    display: block !important;
  }
  
  
  @media (min-width: 768px){
    #navToggle{ display: none !important; }
  }