…

/* ============================================================
   HAWAII CARDS — Zubehör-Kategorie · scope #hc-sgl
   Erweitert das Design-System (Tokens/Atoms/Layout/cat-hero aus dem Theme).
   Reuse der #hc-op-Listing-Muster, hier scope-lokal redeklariert.
   Kein Sets-Ribbon — stattdessen Produkt-Grid + Kategorie-Teaser.
   ============================================================ */
#hc-sgl{ --acc:var(--primary); }

/* Eyebrow ohne langen Strich (kein KI-Look) — Brand-Punkt statt Dash */
#hc-sgl .eyebrow{letter-spacing:.22em;}
#hc-sgl .eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--brand-teal);}

/* ---------- HERO (664px, nie abgeschnitten) ---------- */
#hc-sgl .acc-hero{
  position:relative;min-height:664px;display:flex;flex-direction:column;justify-content:center;
  padding:56px 0;margin-bottom:24px;border-bottom:1px solid var(--border-soft);
  background:
    radial-gradient(130% 140% at 90% -20%, color-mix(in srgb,var(--acc) 16%, transparent), transparent 56%),
    radial-gradient(90% 120% at 6% 110%, color-mix(in srgb,var(--accent) 13%, transparent), transparent 55%),
    var(--hero-grad);
  overflow:hidden;
}
#hc-sgl .acc-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ribbon);opacity:.55;}
#hc-sgl .acc-hero > .wrap{width:100%;}
#hc-sgl .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:22px;flex-wrap:wrap;}
#hc-sgl .crumb a:hover{color:var(--primary);}
#hc-sgl .crumb .sep{opacity:.5;}
#hc-sgl .crumb .here{color:var(--muted);}
#hc-sgl .acc-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
#hc-sgl .acc-hero h1{font-size:clamp(34px,5vw,64px);line-height:.98;letter-spacing:-.03em;margin-top:16px;}
/* Headline: Teal-Lead + Orange→Koralle (Brand) — kein langer Gedankenstrich */
#hc-sgl .acc-hero h1 .lead-t{color:var(--brand-teal);}
#hc-sgl .acc-hero h1 .grad{background:linear-gradient(92deg,var(--brand-orange),var(--hot-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-sgl .acc-hero .lead{font-size:17px;color:var(--muted);max-width:52ch;margin:22px 0 28px;line-height:1.62;}
#hc-sgl .acc-quick{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;}
#hc-sgl .acc-quick button{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft);font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--text);transition:.18s var(--ease);}
#hc-sgl .acc-quick button .qd{width:8px;height:8px;border-radius:50%;background:var(--c,var(--primary));flex-shrink:0;}
#hc-sgl .acc-quick button:hover{box-shadow:inset 0 0 0 1.5px var(--primary);transform:translateY(-2px);color:var(--primary);}
#hc-sgl .acc-stats{display:flex;gap:40px;flex-wrap:wrap;}
#hc-sgl .acc-stat b{font-family:var(--font-display);font-weight:800;font-size:34px;display:block;background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-sgl .acc-stat span{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.03em;}

/* hero visual — floating product cluster (no real photos: tinted tiles) */
#hc-sgl .acc-hero-visual{position:relative;height:420px;}
#hc-sgl .acc-hero-visual .hero-glow{position:absolute;inset:-8% -4%;background:radial-gradient(circle at 55% 45%, color-mix(in srgb,var(--acc) 38%, transparent), transparent 62%);filter:blur(34px);z-index:0;}
#hc-sgl .float-tile{position:absolute;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 30px 60px -28px rgba(0,0,0,.5),inset 0 0 0 1px var(--border-soft);display:flex;flex-direction:column;gap:8px;padding:18px;}
#hc-sgl .float-tile .ft-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);}
#hc-sgl .float-tile b{font-size:14px;}
#hc-sgl .float-tile span{font-size:12px;color:var(--muted);}
#hc-sgl .float-tile.f1{left:4%;top:6%;width:210px;animation:accfloat 7s var(--ease) infinite;}
#hc-sgl .float-tile.f2{right:2%;top:30%;width:230px;animation:accfloat 8.5s var(--ease) infinite .5s;}
#hc-sgl .float-tile.f3{left:16%;bottom:4%;width:220px;animation:accfloat 7.8s var(--ease) infinite 1s;}
@keyframes accfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){#hc-sgl .float-tile{animation:none!important;}}

/* ---------- LISTING (sidebar + grid) ---------- */
#hc-sgl .acc-listing{display:grid;grid-template-columns:286px 1fr;gap:32px;padding:8px 0 70px;align-items:start;}
#hc-sgl .acc-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px;}
#hc-sgl .sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 4px;}
#hc-sgl .sidebar-head h3{font-family:var(--font-display);font-weight:800;font-size:17px;}
#hc-sgl .sidebar-head .reset-all{font-size:12.5px;font-weight:700;color:var(--primary);}
#hc-sgl .sidebar-head .reset-all:hover{text-decoration:underline;text-underline-offset:2px;}

/* search box */
#hc-sgl .acc-searchbox{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--border-soft);padding:0 6px 0 16px;height:46px;}
#hc-sgl .acc-searchbox:focus-within{box-shadow:inset 0 0 0 1.5px var(--primary);}
#hc-sgl .acc-searchbox input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:14.5px;}
#hc-sgl .acc-searchbox input::placeholder{color:var(--dim);}
#hc-sgl .acc-searchbox svg{color:var(--dim);flex-shrink:0;}

/* filter groups (collapsed by default) */
#hc-sgl .filter-group{background:var(--surface);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;}
#hc-sgl .filter-group-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;text-align:left;transition:.15s;}
#hc-sgl .filter-group-head:hover{background:var(--card-hi);}
#hc-sgl .filter-group-head .fg-title{display:flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--text);}
#hc-sgl .filter-group-head .fg-on{font-size:10.5px;font-weight:800;color:var(--primary-ink);background:var(--primary);border-radius:var(--r-pill);min-width:18px;height:18px;padding:0 6px;display:none;place-items:center;}
#hc-sgl .filter-group-head .fg-on.show{display:grid;}
#hc-sgl .filter-group-head .fg-chev{color:var(--dim);transition:transform .25s var(--ease);flex-shrink:0;}
#hc-sgl .filter-group.is-collapsed .fg-chev{transform:rotate(-90deg);}
#hc-sgl .filter-group-body{padding:2px 18px 16px;}
#hc-sgl .filter-group.is-collapsed .filter-group-body{display:none;}
#hc-sgl .f-opt{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14px;color:var(--text);cursor:pointer;line-height:1.3;}
#hc-sgl .f-opt input{position:absolute;opacity:0;width:0;height:0;}
#hc-sgl .f-opt .mark{width:19px;height:19px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--border);flex-shrink:0;display:grid;place-items:center;transition:.15s;}
#hc-sgl .f-opt.radio .mark{border-radius:50%;}
#hc-sgl .f-opt input:checked + .mark{background:var(--primary);box-shadow:none;}
#hc-sgl .f-opt:not(.radio) input:checked + .mark::after{content:"✓";color:var(--primary-ink);font-size:12px;font-weight:800;}
#hc-sgl .f-opt.radio input:checked + .mark::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--primary-ink);}
#hc-sgl .f-opt .cnt{margin-left:auto;font-size:12px;color:var(--dim);font-feature-settings:"tnum";}
#hc-sgl .f-opt:hover .mark{box-shadow:inset 0 0 0 1.5px var(--primary);}

/* toolbar */
#hc-sgl .acc-main{min-width:0;}
#hc-sgl .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
#hc-sgl .results-count{font-size:14.5px;color:var(--muted);white-space:nowrap;}
#hc-sgl .results-count b{font-family:var(--font-display);font-weight:800;color:var(--text);font-size:17px;}
#hc-sgl .toolbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
#hc-sgl .sortish{position:relative;}
#hc-sgl .sortish select{appearance:none;-webkit-appearance:none;font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft);border:none;border-radius:var(--r-pill);padding:11px 38px 11px 16px;cursor:pointer;outline:none;}
#hc-sgl .sortish select:focus{box-shadow:inset 0 0 0 1.5px var(--primary);}
#hc-sgl .sortish svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--dim);}
#hc-sgl .view-toggle{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--border-soft);}
#hc-sgl .view-toggle button{width:38px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--dim);transition:.15s;}
#hc-sgl .view-toggle button:hover{color:var(--text);}
#hc-sgl .view-toggle button.is-on{background:var(--primary);color:var(--primary-ink);}

/* active chips */
#hc-sgl .active-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
#hc-sgl .active-chips:empty{display:none;}
#hc-sgl .a-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 13px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font-size:12.5px;font-weight:600;color:var(--text);}
#hc-sgl .a-chip .chip-clear{width:18px;height:18px;border-radius:50%;background:var(--card-hi);display:grid;place-items:center;color:var(--muted);transition:.15s;flex-shrink:0;}
#hc-sgl .a-chip .chip-clear:hover{background:var(--hot-2);color:#fff;}
#hc-sgl .a-chip.clear-all{background:transparent;box-shadow:none;color:var(--primary);font-weight:700;padding:7px 6px;}
#hc-sgl .a-chip.clear-all:hover{text-decoration:underline;text-underline-offset:2px;}

/* grid + cards */
#hc-sgl .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
#hc-sgl .grid.cols-3{grid-template-columns:repeat(3,1fr);}
#hc-sgl .prod{background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
#hc-sgl .prod:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--primary), 0 30px 60px -30px rgba(0,0,0,.5);}
#hc-sgl .prod .pim{position:relative;aspect-ratio:1/1;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;}
#hc-sgl .prod .pim .holo{width:64%;}
#hc-sgl .prod .pim .prod-thumb{width:72%;aspect-ratio:4/5;border-radius:var(--r-md);background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 26%,var(--surface)),var(--surface-2));box-shadow:inset 0 0 0 1px var(--border-soft);display:grid;place-items:center;text-align:center;padding:14px;}
#hc-sgl .prod .pim .prod-thumb span{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
#hc-sgl .prod .pim .badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:3;}
#hc-sgl .prod .pim .wish{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--text);z-index:3;box-shadow:inset 0 0 0 1px var(--border-soft);transition:.2s;}
#hc-sgl .prod .pim .wish:hover{color:var(--hot-2);}
#hc-sgl .prod .pb{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1;}
#hc-sgl .prod .pb .cat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);}
#hc-sgl .prod .pb .nm{font-family:var(--font-body);font-weight:600;font-size:14.5px;line-height:1.35;color:var(--text);min-height:2.6em;}
#hc-sgl .prod .pb .meta-row{display:flex;align-items:center;gap:8px;}
#hc-sgl .prod .pb .stocknote{font-size:11.5px;font-weight:700;color:var(--hot-2);}
#hc-sgl .prod .pb .rowend{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;}
#hc-sgl .prod .price{font-family:var(--font-display);font-weight:800;font-size:20px;}
#hc-sgl .prod .was{font-size:12.5px;color:var(--dim);text-decoration:line-through;margin-left:6px;}
#hc-sgl .prod .add{width:42px;height:42px;border-radius:12px;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;flex-shrink:0;transition:.2s;box-shadow:var(--glow);}
#hc-sgl .prod .add:hover{transform:scale(1.08) rotate(-6deg);}
#hc-sgl .prod .heart.is-on{color:var(--hot-2);}

/* list view */
#hc-sgl .grid.is-list{grid-template-columns:1fr;gap:12px;}
#hc-sgl .grid.is-list .prod{flex-direction:row;align-items:stretch;}
#hc-sgl .grid.is-list .prod .pim{width:150px;aspect-ratio:auto;flex-shrink:0;}
#hc-sgl .grid.is-list .prod .pb{flex:1;}
#hc-sgl .grid.is-list .prod .nm{min-height:0;font-size:15.5px;}

/* empty state */
#hc-sgl .grid-empty{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:64px 20px;background:var(--surface);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);}
#hc-sgl .grid-empty.show{display:flex;}
#hc-sgl .grid-empty .ge-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--card-hi);color:var(--dim);}
#hc-sgl .grid-empty h4{font-size:20px;}
#hc-sgl .grid-empty p{font-size:14px;color:var(--muted);max-width:38ch;}

/* ---------- KATEGORIE-TEASER (Querverlinkung) ---------- */
#hc-sgl .acc-teasers{padding:54px 0 10px;border-top:1px solid var(--border-soft);}
#hc-sgl .teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;}
#hc-sgl .teaser{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r-xl);background:var(--card);box-shadow:inset 0 0 0 1px var(--border-soft);text-decoration:none;color:inherit;transition:.22s var(--ease);overflow:hidden;--tc:var(--primary);}
#hc-sgl .teaser:nth-child(even){--tc:var(--accent);}
#hc-sgl .teaser:nth-child(3n){--tc:var(--brand-teal);}
#hc-sgl .teaser::after{content:"";position:absolute;inset:0 0 auto auto;width:130px;height:130px;background:radial-gradient(circle at 80% 10%, color-mix(in srgb,var(--tc) 24%,transparent), transparent 65%);pointer-events:none;}
#hc-sgl .teaser:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--tc), 0 30px 60px -34px var(--tc);}
#hc-sgl .teaser .tic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 16%,transparent);color:var(--tc);position:relative;z-index:1;}
#hc-sgl .teaser h3{font-family:var(--font-display);font-weight:800;font-size:20px;position:relative;z-index:1;}
#hc-sgl .teaser p{font-size:13.5px;color:var(--muted);line-height:1.55;position:relative;z-index:1;}
#hc-sgl .teaser .tlink{margin-top:auto;font-weight:700;font-size:13.5px;color:var(--tc);display:inline-flex;align-items:center;gap:7px;position:relative;z-index:1;}
#hc-sgl .teaser:hover .tlink svg{transform:translateX(4px);}
#hc-sgl .teaser .tlink svg{transition:transform .2s var(--ease);}

/* ---------- SEO BLOCK ---------- */
#hc-sgl .acc-seo{padding:48px 0 10px;}
#hc-sgl .acc-seo .seo-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start;}
#hc-sgl .acc-seo .seo-text p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:16px;}
#hc-sgl .acc-seo .seo-text p strong{color:var(--text);font-weight:700;}
#hc-sgl .acc-seo .seo-text a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
#hc-sgl .acc-seo .seo-cols{display:grid;gap:24px;}
#hc-sgl .acc-seo .seo-col h5{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;}
#hc-sgl .acc-seo .seo-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;}
#hc-sgl .acc-seo .seo-col a:hover{color:var(--primary);}

/* ---------- MOBILE DRAWER ---------- */
#hc-sgl .filter-drawer-btn{display:none;}
#hc-sgl .drawer-backdrop{display:none;}
#hc-sgl .drawer-head{display:none;}
#hc-sgl .drawer-apply{display:none;}
@media (max-width:1100px){
  #hc-sgl .acc-listing{grid-template-columns:1fr;}
  #hc-sgl .acc-sidebar{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(380px,90vw);z-index:210;background:var(--bg);background-image:var(--bg-grad);padding:18px 18px 96px;overflow-y:auto;transform:translateX(102%);transition:transform .34s var(--ease);box-shadow:-30px 0 80px -30px rgba(0,0,0,.6);gap:12px;}
  #hc-sgl .acc-sidebar.open{transform:none;}
  #hc-sgl .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  #hc-sgl .drawer-head h3{font-family:var(--font-display);font-weight:800;font-size:20px;}
  #hc-sgl .drawer-close{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft);color:var(--text);}
  #hc-sgl .drawer-apply{display:block;position:sticky;bottom:0;margin:14px -18px -96px;padding:16px 18px calc(16px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--border-soft);}
  #hc-sgl .sidebar-head{display:none;}
  #hc-sgl .acc-sidebar .acc-searchbox{display:none;}
  #hc-sgl .filter-drawer-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-bottom:18px;position:relative;padding:14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--border);font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--text);}
  #hc-sgl .filter-drawer-btn .fd-badge{min-width:22px;height:22px;border-radius:var(--r-pill);background:var(--primary);color:var(--primary-ink);font-size:12px;font-weight:800;display:none;place-items:center;padding:0 6px;}
  #hc-sgl .filter-drawer-btn .fd-badge.show{display:grid;}
  #hc-sgl .drawer-backdrop{position:fixed;inset:0;z-index:200;background:rgba(4,10,16,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.3s;}
  #hc-sgl .drawer-backdrop.show{opacity:1;visibility:visible;}
  #hc-sgl .grid{grid-template-columns:repeat(3,1fr);}
  #hc-sgl .acc-hero-grid{grid-template-columns:1fr;gap:30px;}
  #hc-sgl .acc-hero-visual{height:340px;order:-1;}
  #hc-sgl .teaser-grid{grid-template-columns:1fr;}
  #hc-sgl .acc-seo .seo-wrap{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:760px){
  #hc-sgl .grid{grid-template-columns:repeat(2,1fr);}
  #hc-sgl .grid.cols-3,#hc-sgl .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  #hc-sgl .view-toggle [data-acc-view="cols-4"]{display:none;}
  #hc-sgl .acc-stats{gap:24px;}
}
@media (max-width:540px){
  #hc-sgl .acc-hero{min-height:0;padding:40px 0;}
  #hc-sgl .acc-stats{gap:16px;}
  #hc-sgl .grid:not(.is-list){grid-template-columns:1fr 1fr;gap:12px;}
  #hc-sgl .toolbar-right{width:100%;}
  #hc-sgl .sortish select{flex:1;width:100%;}
  #hc-sgl .float-tile{display:none;}
}