/*
Theme Name: Inner Circle
Theme URI: https://inner-circle-techno.com
Author: Marek Maurer / Inner Circle
Author URI: https://inner-circle-techno.com
Description: Child-Theme für Inner Circle Fashion Shop. Dunkel, edgy, brand-konform. Techno-Fashion ohne Cringe.
Version: 1.4.6
Requires at least: 6.0
Requires PHP: 8.1
Template: blocksy
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inner-circle-child
*/

/* ============================================================
   1. FONTS - Self-Hosted (DSGVO, no Google CDN)
   ============================================================ */

@font-face {
  font-family: "UnifrakturMaguntia";
  src: url("assets/fonts/unifrakturmaguntia-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Headline - Antry Sans (Regular + Italic). The Italic is used for
 * the shirt-claim "Trust the noise." in the hero; Regular for all
 * other H1/H2/H3. Antry Sans only ships Regular here, so we declare
 * the 100–600 range against the same file - browsers match weights
 * in that range to this file without synthetic bold. Italic ditto. */
@font-face {
  font-family: "Antry Sans";
  src: url("assets/fonts/antry-sans-400.woff2") format("woff2");
  font-weight: 100 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Antry Sans";
  src: url("assets/fonts/antry-sans-400-italic.woff2") format("woff2");
  font-weight: 100 600;
  font-style: italic;
  font-display: swap;
}

/* Body - Alte Haas Grotesk (Regular + Bold). Range-match so the
 * existing font-weight: 500 declarations sprinkled through the CSS
 * stay legal without us hunting them all down. */
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("assets/fonts/alte-haas-grotesk-400.woff2") format("woff2");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("assets/fonts/alte-haas-grotesk-700.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {
  /* Color palette - strict, monochrome, with single toxic accent */
  --ic-black:        #050505;
  --ic-off-black:    #0d0d0e;
  --ic-asphalt:      #1a1a1b;
  --ic-asphalt-2:    #2a2a2c;
  --ic-fog:          #3a3a3d;
  --ic-bone:         #d8d4cc;
  --ic-bone-bright:  #ebe7df;
  --ic-silver:       #9b9a93;
  --ic-accent:       #7a0a0a;       /* Inner Circle blood red - the only chromatic accent */
  --ic-accent-hot:   #a31515;       /* Hover/active intensification, still bloody not bright */
  --ic-error:        #c44a4a;
  --ic-success:      #6e9a4d;

  /* Type - brand fonts per Marek's spec.
   * Antry Sans = headlines (Italic only for the hero claim).
   * Alte Haas Grotesk = body. UnifrakturMaguntia = wordmark.
   * Alte Haas sits inside the headline stack as digit-fallback:
   * the free Antry Sans cripples 0-9 (all map to one glyph), so
   * the subset deliberately strips digits, browser uses Alte Haas
   * for them. Mixed-font numerals look subtle, way better than blanks. */
  --ic-font-display:  "UnifrakturMaguntia", "Cloister Black", serif;
  --ic-font-headline: "Antry Sans", "Alte Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ic-font-body:     "Alte Haas Grotesk", system-ui, -apple-system, sans-serif;
  --ic-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --ic-fs-hero:  clamp(3rem, 8vw, 7rem);
  --ic-fs-h1:    clamp(2rem, 5vw, 3.5rem);
  --ic-fs-h2:    clamp(1.5rem, 3vw, 2.25rem);
  --ic-fs-h3:    1.25rem;
  --ic-fs-body:  1rem;
  --ic-fs-small: 0.8125rem;
  --ic-fs-micro: 0.6875rem;

  --ic-lh-tight: 1.05;
  --ic-lh-snug:  1.3;
  --ic-lh-body:  1.55;

  /* Spacing scale */
  --ic-gap-xs: 0.5rem;
  --ic-gap-s:  1rem;
  --ic-gap-m:  2rem;
  --ic-gap-l:  4rem;
  --ic-gap-xl: 8rem;

  /* Control height - single source of truth for every interactive box that
   * has to line up on one row: quantity -/+ buttons, the quantity input, the
   * add-to-cart button, the sticky-bar button and the express-pay buttons
   * (Stripe's express element is configured to the same 44px). Changing this
   * one value re-aligns the whole product/cart action row. */
  --ic-control-h: 2.75rem;   /* 44px */

  /* Motion */
  --ic-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ic-dur-fast: 180ms;
  --ic-dur:      300ms;
  --ic-dur-slow: 600ms;

  /* Layout — three-tier token system.
     Single source of truth for content widths. Every section across
     every page uses --ic-w-wide as its outer container; readable text
     blocks inside use --ic-w-narrow and stay LEFT-aligned to the
     section edge (one continuous vertical line per page). */
  --ic-w-narrow: 720px;   /* Reading copy, forms, eyebrow text */
  --ic-w-medium: 1080px;  /* Editorial bodies, product-feature inner */
  --ic-w-wide:   1440px;  /* Section container, header, hero, grids */

  --ic-max-w: var(--ic-w-wide);    /* legacy alias for older JS/CSS refs */
  --ic-gutter: clamp(1rem, 3vw, 2.5rem);
  --ic-page-pad: clamp(1.25rem, 3vw, 2.5rem);
}

/* ============================================================
   2b. BLOCKSY PALETTE REMAP - kill the stock blue
   ------------------------------------------------------------
   Blocksy has no `colorPalette` theme_mod set, so
   inc/classes/colors.php falls back to its stock blue defaults
   (#2872fa / #1559ed / #3A4F66 / #192a3d + four near-whites)
   and prints them into <style id="ct-main-styles-inline-css">.

   That is where every remaining blue element on the site came
   from: the active product-tab bar, the search-overlay submit
   button, the keyboard focus ring, the current item in the
   mobile menu, the review-form button. Slot 5 (#e1e8ed) also
   draws the product-tab rule, the .ct-product-divider lines and
   the whole attribute table - near-white hairlines on a black
   page.

   The Blocksy <style> sits AFTER this stylesheet in the head on
   every page (child <link> / Autoptimize bundle first, inline
   dynamic CSS after), so a plain `:root {}` here would LOSE the
   tie. `:root:root` scores (0,2,0) and beats Blocksy's (0,1,0)
   regardless of source order.

   Mirrored in the `colorPalette` theme_mod so the Customizer
   agrees with the stylesheet - keep the two in sync.
   ============================================================ */

:root:root {
  --theme-palette-color-1: #7a0a0a !important;  /* was #2872fa - button/badge/pagination FILLS, selection */
  --theme-palette-color-2: #a31515 !important;  /* was #1559ed - hover layer */
  --theme-palette-color-3: #9b9a93 !important;  /* was #3A4F66 - secondary text, account nav, back-to-top */
  --theme-palette-color-4: #ebe7df !important;  /* was #192a3d - --theme-headings-color (was near-invisible navy) */
  --theme-palette-color-5: #2a2a2c !important;  /* was #e1e8ed - --theme-border-color: tab rule, dividers, tables */
  --theme-palette-color-6: #0d0d0e !important;  /* was #f2f5f7 - footer bg, pre/code bg */
  --theme-palette-color-7: #1a1a1b !important;  /* was #FAFBFC - unreferenced by shipped Blocksy CSS */
  --theme-palette-color-8: #050505 !important;  /* was #ffffff - header rows, cards, sidebar, search dropdown */

  /* Semantics Blocksy derives from the palette that invert on a dark surface
   * once slots 4 and 8 are flipped - slot 8 is a BACKGROUND for the account
   * nav's active row but a TEXT colour for its label. Pin them explicitly. */
  --theme-icon-hover-color: var(--ic-bone-bright) !important;
  --dropdown-background-color: var(--ic-off-black) !important;
  --account-nav-text-active-color: var(--ic-bone-bright) !important;
  --account-nav-divider-color: var(--ic-asphalt-2) !important;  /* default rgba(0,0,0,.05) is invisible on black */

  /* Active-state text. Feeds `ul.tabs li.active a` and
   * `nav li[class*=current-menu-] > .ct-menu-link`. Unpinned it falls back to
   * --theme-link-hover-color = slot 2 = 2.60:1 on black. */
  --theme-link-active-color: var(--ic-bone-bright) !important;

  /* CONTRAST GUARDS. All of these resolved through the palette and would be
   * unreadable on black once slots 1/5 carry brand tones:
   *   #7a0a0a on #050505 = 1.82:1, #a31515 = 2.60:1, #2a2a2c = 1.42:1
   * WCAG 2.2 SC 1.4.11 wants >= 3:1 for a UI component boundary, and these
   * are exactly the controls a customer must SEE to finish a checkout - so
   * they get bone/silver, never the accent. */
  --theme-form-field-border-focus-color: var(--ic-bone-bright) !important;      /* text-input focus border */
  --theme-form-selection-field-initial-color: var(--ic-silver) !important;      /* unchecked radio/checkbox ring - 7.2:1 */
  --theme-form-selection-field-active-color: var(--ic-bone-bright) !important;  /* checked payment-method radio */
}

/* Blocksy sets --tab-background on the tabs element itself (specificity
 * 0,2,1), so the :root pin above cannot reach it. The 3px bar under the
 * active product tab is the ONLY active-tab indicator - all tab labels are
 * already bone - so it has to stay clearly visible. */
html .woocommerce-tabs[data-type] .tabs,
html .woocommerce-tabs .tabs {
  --tab-background: var(--ic-bone-bright);
}

html .woocommerce-tabs ul.tabs li.active a,
html .woocommerce-tabs ul.tabs li.active > a {
  color: var(--ic-bone-bright) !important;
}

/* The header sub-menu link colour is stored in the Customizer as "palette 8",
 * which is now black-on-black. Blocksy's selector has five parts and this
 * stylesheet loads first, so prefix with `html` to outrank it. */
html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
  --theme-link-initial-color: var(--ic-bone);
}

/* Focus ring: slot 2 is blood red, which does not carry enough contrast
 * against the black page to be a reliable keyboard affordance. Use the same
 * bone outline the custom checkboxes already use, brand-wide. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ic-bone-bright) !important;
  outline-offset: 2px !important;
}

/* Mobile off-canvas: the current menu item was distinguished by colour alone
 * (slot 2). At 2.60:1 on black that no longer reads, so carry it with weight
 * and a rule instead - same treatment the desktop nav already uses. */
#offcanvas nav li[class*="current-menu-"] > .ct-menu-link,
nav.mobile-menu li[class*="current-menu-"] > .ct-menu-link {
  color: var(--ic-bone-bright) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* ---- Blues that do NOT come from the Blocksy palette ---- */

/* WP core skip link ("Zum Inhalt springen") - the first Tab stop on every
 * page, hardcoded to #21759b in Blocksy's bundle. */
.screen-reader-text:focus,
a.skip-link.screen-reader-text:focus {
  color: var(--ic-bone-bright) !important;
  background-color: var(--ic-off-black) !important;
  box-shadow: 0 0 0 1px var(--ic-asphalt-2) !important;
}

/* WooCommerce Blocks info notice: the banner body is already recoloured
 * further down, but the icon disc and border stayed WP-admin blue. */
.wc-block-components-notice-banner.is-info {
  border-color: var(--ic-asphalt-2) !important;
}
.wc-block-components-notice-banner.is-info > svg {
  background-color: var(--ic-silver) !important;
}

/* ============================================================
   3. BASE - Overrides on Blocksy parent
   ============================================================ */

html {
  background: var(--ic-black) !important;
}

body,
body.wp-singular,
body.woocommerce,
body.woocommerce-page,
body.wp-theme-blocksy,
body.wp-child-theme-inner-circle-child {
  background: var(--ic-black) !important;
  color: var(--ic-bone);
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-body);
  line-height: var(--ic-lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Blocksy wraps content in .ct-container - force dark across all layers */
.ct-main-container,
.ct-site-container,
#main,
.entry-content,
.site-content,
.wp-site-blocks,
.ct-container,
.ct-sidebar,
.ct-page-wrapper {
  background: var(--ic-black) !important;
  color: var(--ic-bone);
}

/* Grain overlay - analog film feel, mix-blend at 4% opacity */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  opacity: 0.045;
  background-image: url("assets/images/grain.svg");
  background-size: 240px 240px;
}

::selection {
  background: var(--ic-accent-hot);
  color: var(--ic-bone-bright);
}

a {
  color: var(--ic-bone-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease);
}

a:hover {
  border-bottom-color: var(--ic-bone-bright);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--ic-font-headline);
  color: var(--ic-bone-bright);
  font-weight: 500;
  line-height: var(--ic-lh-tight);
  letter-spacing: -0.01em;
}

h1, .has-fs-h1 { font-size: var(--ic-fs-h1); }
h2, .has-fs-h2 { font-size: var(--ic-fs-h2); }
h3, .has-fs-h3 { font-size: var(--ic-fs-h3); }

.ic-display {
  font-family: var(--ic-font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
}

.ic-mono,
code, kbd, samp, pre {
  font-family: var(--ic-font-mono);
  font-feature-settings: "calt", "ss01";
  letter-spacing: 0;
}

/* ============================================================
   4. UTILITIES
   ============================================================ */

.ic-tracked      { letter-spacing: 0.18em; text-transform: uppercase; }
.ic-tracked-loose{ letter-spacing: 0.32em; text-transform: uppercase; }
.ic-fog          { color: var(--ic-fog); }
.ic-silver       { color: var(--ic-silver); }
.ic-bone-bright  { color: var(--ic-bone-bright); }
.ic-accent       { color: var(--ic-accent); }
.ic-bg-asphalt   { background: var(--ic-asphalt); }
.ic-bg-off-black { background: var(--ic-off-black); }
.ic-border       { border: 1px solid var(--ic-asphalt-2); }

.ic-divider {
  height: 1px;
  background: var(--ic-asphalt-2);
  border: 0;
  margin: var(--ic-gap-m) 0;
}

/* ============================================================
   5. HEADER - minimal, off-black, no logo overload
   ============================================================ */

.ct-header {
  background: rgba(5, 5, 5, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ic-asphalt);
}

/* Header - applied GLOBALLY (was .home only, caused a visible "jump" when
 * navigating from home to a subpage because subpages reverted to Blocksy's
 * in-flow opaque header). Now every page gets: fixed position over a dark
 * body, transparent background, gradient overlay behind it. Subpages get
 * their main content pushed down via padding-top further below. */
.ct-header,
header.ct-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 100;
}

/* Header row aligned with the SAME constrained-box logic as Hero/PF/Events
 * sections - global so logo + nav sit at the same x on every page. */
.ct-header [data-row="middle"] {
  max-width: var(--ic-w-wide) !important;
  margin-inline: auto !important;
  padding-left: var(--ic-page-pad) !important;
  padding-right: var(--ic-page-pad) !important;
}

.ct-header > div[data-device] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Body gradient overlay behind the header - global so every page has the
 * same depth under the fixed header. Slightly softer on subpages where the
 * background is already solid dark; stronger on home where it overlays the
 * hero image. .ic-header-stuck (added by JS on scroll) intensifies. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0.98) 0%,
    rgba(5, 5, 5, 0.85) 35%,
    rgba(5, 5, 5, 0.45) 70%,
    rgba(5, 5, 5, 0)    100%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  transition: opacity var(--ic-dur, 200ms) var(--ic-ease);
}
body.home::before { opacity: 0.95; }
html.ic-header-stuck body::before { opacity: 1; }

/* Kill any leftover ::after from older sticky state */
.ct-header::after { content: none !important; }

/* Global dark body - was previously Blocksy's f8f9fb on subpages, which
 * fought the fixed transparent header. Now solid throughout. */
body {
  background-color: var(--ic-black) !important;
  color: var(--ic-bone);
}

/* Subpages need padding-top to clear the fixed header. Home doesn't -
 * the hero starts at viewport top and the header overlays the cover image.
 * Blocksy already exposes --header-height via its inline styles. */
body:not(.home) #main,
body:not(.home) .ct-main-container,
body:not(.home) main.site-main {
  padding-top: var(--header-height, 120px);
}

@media (max-width: 999px) {
  body:not(.home) #main,
  body:not(.home) .ct-main-container,
  body:not(.home) main.site-main {
    padding-top: var(--header-height, 70px);
  }
}

/* Blocksy injects an inner [data-row] with bg:white - neutralize at every level */
.ct-header [data-row],
.ct-header [data-row="middle"],
.ct-header [data-row="top"],
.ct-header [data-row="bottom"],
.ct-header > div,
.ct-header .ct-container,
.ct-header .ct-container-fluid,
.ct-header [data-device] {
  background: transparent !important;
}

.ct-header [data-row] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Header logo: Inner Circle blackletter monogram SVG as background-image.
   The white SVG has fixed fill="#FFFFFF" so it renders crisp + solid (the
   mask approach was anti-aliased thin strokes that looked dim).
   Source is portrait, 33.6 x 72.17 (~0.4656:1) - so height drives the box
   here and the width is derived from the ratio; background-size: contain
   keeps the glyph inside it. */
.ct-header [data-id="logo"] .ct-header-text-logo,
.ct-header [data-id="logo"] .site-title a {
  --ic-logo-h: clamp(34px, 3.4vw, 44px);
  display: inline-block !important;
  height: var(--ic-logo-h) !important;
  width: calc(var(--ic-logo-h) * 0.46557) !important;
  /* kills the baseline descender gap under the inline-block - without it the
     .site-title wrapper stays taller than the mark and inflates the header */
  vertical-align: middle;
  background: url('assets/logo/inner-circle-monogram-white.svg') no-repeat left center / contain;
  border-bottom: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  position: relative;
  z-index: 101;
  transition: opacity var(--ic-dur-fast) var(--ic-ease);
}

.ct-header [data-id="logo"] .ct-header-text-logo:hover,
.ct-header [data-id="logo"] .site-title a:hover {
  opacity: 0.85;
}

/* Menu items: brand color in all states, no blue */
.ct-header [data-id="menu"] a,
.main-navigation a,
header .menu a,
header li.menu-item a {
  color: var(--ic-bone) !important;
  font-family: var(--ic-font-headline) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  font-weight: 500 !important;
}

.ct-header [data-id="menu"] a:hover,
.ct-header [data-id="menu"] .current-menu-item > a,
.ct-header [data-id="menu"] .current_page_item > a,
header .menu .current-menu-item > a {
  color: var(--ic-bone-bright) !important;
}

.ct-header [data-id="menu"] .current-menu-item > a::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--ic-bone-bright);
  margin-top: 4px;
  width: 100%;
}

/* Search trigger icon */
.ct-header [data-id="search"] svg,
.ct-search-trigger svg {
  fill: var(--ic-bone);
  width: 16px;
  height: 16px;
}

/* Cart icon */
.ct-header [data-id="cart"] svg,
.ct-cart-content svg {
  fill: var(--ic-bone);
  width: 18px;
  height: 18px;
}

.ct-header .site-title,
.ct-header .ct-header-text-logo {
  font-family: var(--ic-font-display);
  font-size: 1.4rem;
  color: var(--ic-bone-bright);
  font-weight: 400;
}

.ct-header nav a {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-bone);
  border-bottom: none;
}

.ct-header nav a:hover {
  color: var(--ic-bone-bright);
}

/* Cart count chip - single toxic accent, sparingly used */
.ct-cart-content .ct-cart-items-count,
.ct-icon-cart [data-count],
.cart-contents .count {
  background: var(--ic-accent);
  color: var(--ic-black);
  font-family: var(--ic-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
}

/* ============================================================
   6. HERO - full bleed, dark, editorial
   ============================================================ */

.ic-hero {
  position: relative;
  min-height: 80svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--ic-gap-m) var(--ic-gutter);
  overflow: hidden;
}

@media (max-width: 768px) {
  .ic-hero { min-height: 88svh; }
}

.ic-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ic-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.6) contrast(1.05);
}

.ic-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,5,5,0.4) 0%,
    rgba(5,5,5,0.7) 60%,
    rgba(5,5,5,0.95) 100%
  );
}

.ic-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ic-hero__wordmark {
  font-family: var(--ic-font-display);
  font-size: 1.25rem;
  color: var(--ic-bone-bright);
  opacity: 0.7;
}

.ic-hero__meta {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.18em;
  color: var(--ic-silver);
  text-transform: uppercase;
}

.ic-hero__claim {
  align-self: end;
  max-width: 22ch;
}

.ic-hero__claim h1 {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-hero);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ic-bone-bright);
  margin: 0;
}

.ic-hero__claim h1 em {
  font-family: var(--ic-font-display);
  font-style: normal;
  font-weight: 400;
}

.ic-hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--ic-gap-m);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

/* Hero CTA row: two buttons side-by-side (Shop / Nights), wrap on mobile. */
.ic-hero__ctas {
  gap: var(--ic-gap-s) !important;
  align-items: center;
}

.ic-hero__cta {
  display: inline-block;
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border: 1px solid;
  border-radius: 0;
  text-decoration: none;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease),
              transform var(--ic-dur-fast) var(--ic-ease);
}

.ic-hero__cta--primary {
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  border-color: var(--ic-bone-bright);
}

.ic-hero__cta--primary:hover {
  background: var(--ic-accent);
  color: var(--ic-bone-bright);
  border-color: var(--ic-accent);
  transform: translateY(-1px);
}

.ic-hero__cta--primary:active {
  background: var(--ic-accent-hot);
  border-color: var(--ic-accent-hot);
}

.ic-hero__cta--secondary {
  background: transparent;
  color: var(--ic-bone-bright);
  border-color: var(--ic-bone-bright);
}

.ic-hero__cta--secondary:hover {
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  transform: translateY(-1px);
}

/* ============================================================
   7. BUTTONS - sharp, no glow, slight shift on hover
   ============================================================ */

.wp-block-button__link,
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  border: 1px solid var(--ic-bone-bright);
  border-radius: 0;
  padding: 0.9rem 1.4rem;
  transition: transform var(--ic-dur-fast) var(--ic-ease),
              background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease);
  cursor: pointer;
}

.wp-block-button__link:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-1px);
  background: var(--ic-accent);
  color: var(--ic-bone-bright);
  border-color: var(--ic-accent);
}

.wp-block-button__link:active,
.button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
  background: var(--ic-accent-hot);
  border-color: var(--ic-accent-hot);
  color: var(--ic-bone-bright);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.button.is-outline {
  background: transparent;
  color: var(--ic-bone-bright);
  border-color: var(--ic-asphalt-2);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--ic-bone-bright);
  background: transparent;
  color: var(--ic-bone-bright);
}

/* ============================================================
   8. WOOCOMMERCE - global overrides
   ============================================================ */

.woocommerce ul.products,
.wc-block-grid__products,
.wp-block-woocommerce-product-collection .wc-block-product-template {
  gap: var(--ic-gap-m);
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: var(--ic-off-black);
  padding: var(--ic-gap-s);
  transition: background var(--ic-dur) var(--ic-ease);
}

.woocommerce ul.products li.product:hover {
  background: var(--ic-asphalt);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wc-block-components-product-name {
  font-family: var(--ic-font-headline);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ic-bone-bright);
  margin: var(--ic-gap-s) 0 0.25rem;
}

.woocommerce ul.products li.product .price,
.wc-block-components-product-price,
.wc-block-grid__product-price {
  font-family: var(--ic-font-mono);
  color: var(--ic-bone);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.04em;
}

/* Hide WooCommerce stock-out star ratings (rarely fashion-appropriate) */
.woocommerce ul.products li.product .star-rating { display: none; }

/* SOLD OUT - replace add-to-cart with crossed-out display word */
.woocommerce ul.products li.product.outofstock .button {
  background: transparent;
  border: none;
  color: var(--ic-fog);
  font-family: var(--ic-font-display);
  font-size: 1.5rem;
  text-decoration: line-through;
  text-transform: lowercase;
  letter-spacing: 0;
  pointer-events: none;
}

.woocommerce ul.products li.product.outofstock .button::before { content: "sold"; }
.woocommerce ul.products li.product.outofstock .button > * { display: none; }

/* Product Detail Page */

.single-product .product .summary {
  background: var(--ic-off-black);
  padding: var(--ic-gap-m);
}

.single-product .product .product_title {
  font-family: var(--ic-font-headline);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ic-bone-bright);
  margin: 0 0 0.5rem;
}

.single-product .product .price {
  font-family: var(--ic-font-mono);
  font-size: 1.5rem;
  color: var(--ic-bone-bright);
  letter-spacing: 0;
  margin: var(--ic-gap-s) 0;
}

/* Variation size buttons - CFVSW plugin namespace */
.cfvsw-swatches-container {
  gap: 8px !important;
  margin: var(--ic-gap-s) 0 !important;
}

.cfvsw-swatches-option,
.cfvsw-swatches-option.cfvsw-label-option {
  background: transparent !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  color: var(--ic-bone) !important;
  font-family: var(--ic-font-mono) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-width: 3rem !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--ic-dur-fast) var(--ic-ease);
  cursor: pointer;
}

.cfvsw-swatches-option .cfvsw-swatch-inner {
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}

.cfvsw-swatches-option:hover {
  border-color: var(--ic-bone-bright) !important;
  color: var(--ic-bone-bright) !important;
}

.cfvsw-swatches-option.cfvsw-selected-swatch,
.cfvsw-swatches-option.cfvsw-selected-swatch .cfvsw-swatch-inner {
  background: var(--ic-bone-bright) !important;
  color: var(--ic-black) !important;
  border-color: var(--ic-bone-bright) !important;
}

.cfvsw-swatches-option.cfvsw-disable-swatch,
.cfvsw-swatches-option[class*="disable"] {
  opacity: 0.25 !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
}

/* Hide the default WC select dropdown that CFVSW replaces */
.cfvsw-hidden-select,
.variations select {
  display: none !important;
}

/* Variation table - remove default WC table styles */
.variations,
.variations tr,
.variations td,
.variations th {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.variations .label {
  display: none;
}

/* Reset link wrapper from old plugin (kept for backwards compat) */
.variable-items-wrapper .variable-item {
  background: transparent !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  color: var(--ic-bone) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Add-to-cart button - keep "Zahlungspflichtig bestellen" legally required text intact,
   but use plain "In den Warenkorb" wording via theme i18n filter (functions.php).
   No fixed width here - the flex parent on .woocommerce-variation-add-to-cart sizes it,
   and on simple products .quantity is missing so the button takes its full flex row.

   Height: Blocksy puts min-height:55px on .button, which beat our unflagged
   `height: 2.75rem` and made the CTA 11px taller than the 44px -/+ boxes next
   to it. Pin height AND min-height to --ic-control-h, drop the vertical padding
   to 0 and set line-height:1 so the box is exactly the token height. */
.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
  font-size: 1rem !important;
  padding: 0 1.4rem !important;
  letter-spacing: 0.18em !important;
  background: var(--ic-bone-bright) !important;
  color: var(--ic-black) !important;
  border: 1px solid var(--ic-bone-bright) !important;
  border-radius: 0 !important;
  font-family: var(--ic-font-headline) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  height: var(--ic-control-h) !important;
  min-height: var(--ic-control-h) !important;
  line-height: 1 !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.single_add_to_cart_button:hover {
  background: var(--ic-accent) !important;
  border-color: var(--ic-accent) !important;
  color: var(--ic-bone-bright) !important;
}

.single_add_to_cart_button:active {
  background: var(--ic-accent-hot) !important;
  border-color: var(--ic-accent-hot) !important;
}

/* Disabled state (no size selected yet) - keep readable but dim */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed,
.single_add_to_cart_button:disabled {
  background: var(--ic-asphalt-2) !important;
  color: var(--ic-fog) !important;
  border-color: var(--ic-asphalt-2) !important;
  cursor: not-allowed;
}

/* Quantity widget - tidy flex row with visible gaps between -, input, +.
 * Handles all three render shapes in the wild:
 *   - Blocksy: <span class="ct-decrease"></span><span class="ct-increase"></span>
 *     (positioned absolute on top of the input by default - we reset)
 *   - WC default: <button class="minus">-</button><button class="plus">+</button>
 *   - Custom: <button class="qty-button">...
 * Force flex order so the visual sequence is always [- input +]. */

.quantity,
.single-product .quantity,
.woocommerce .quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: relative;
  /* Blocksy pins the wrapper to 40px, so the 44px controls inside spilled
   * 2px top and bottom. Put the wrapper on the same token. */
  height: var(--ic-control-h) !important;
}

.quantity .ct-decrease,
.quantity .ct-increase,
.quantity .qty-button,
.quantity button.minus,
.quantity button.plus,
.ct-quantity-buttons button {
  position: static !important;
  background: transparent !important;
  border: 1px solid var(--ic-fog) !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-mono) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  width: var(--ic-control-h) !important;
  min-width: var(--ic-control-h) !important;
  height: var(--ic-control-h) !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  transition: border-color var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease);
}

/* Blocksy's ct-decrease/ct-increase are empty spans - draw the glyph via
 * pseudo-content so they're recognisable as buttons. */
.quantity .ct-decrease::before { content: "−"; }
.quantity .ct-increase::before { content: "+"; }

/* Visual order: minus | input | plus.  DOM order varies, so we set flex
 * order on each element explicitly. */
.quantity .ct-decrease,
.quantity button.minus,
.quantity .qty-button.minus { order: 1; }

.quantity input.qty,
.quantity input[type="number"] { order: 2; }

.quantity .ct-increase,
.quantity button.plus,
.quantity .qty-button.plus { order: 3; }

/* Hide Blocksy's screen-reader label from layout, keep accessible. */
.quantity > label.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.quantity .qty-button:hover,
.quantity .ct-decrease:hover,
.quantity .ct-increase:hover,
.quantity button.minus:hover,
.quantity button.plus:hover {
  border-color: var(--ic-bone-bright) !important;
  color: var(--ic-bone-bright) !important;
}

/* On variable single-product pages the actual quantity+button row is
 * inside Blocksy's .ct-cart-actions wrapper (deep inside .single_variation_wrap
 * > .woocommerce-variation-add-to-cart). That wrapper renders as a 260px
 * inline-block by default - we expand it to fill its container and lay out
 * quantity + claim button as a single flex row. */
.single-product .single_variation_wrap { display: block; width: 100%; }
.single-product .woocommerce-variation-add-to-cart { display: block; width: 100%; }

.single-product .ct-cart-actions,
.woocommerce .ct-cart-actions {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  gap: var(--ic-gap-s) !important;
  width: 100% !important;
  flex: 0 0 auto !important;
}

.single-product .ct-cart-actions .quantity,
.single-product .ct-cart-actions .quantity[data-type="type-2"] {
  flex: 0 0 auto !important;
  width: auto !important;
  --quantity-width: auto;
}
.single-product .ct-cart-actions .single_add_to_cart_button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Narrow viewports: "In den Warenkorb" is a much longer label than the old
 * "Claim →" and does not survive sharing a 343px row with the -/+ widget.
 * Let the row wrap and give the CTA its own full-width line underneath. */
@media (max-width: 600px) {
  .single-product .ct-cart-actions,
  .single-product form.cart:not(.variations_form) {
    flex-wrap: wrap !important;
    row-gap: var(--ic-gap-s) !important;
  }

  .single-product .ct-cart-actions .single_add_to_cart_button,
  .single-product form.cart:not(.variations_form) .single_add_to_cart_button {
    flex: 1 0 100% !important;
  }
}

/* Fallback for non-variable products (no .single_variation_wrap) */
.single-product form.cart:not(.variations_form) {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  gap: var(--ic-gap-s) !important;
}

.single-product form.cart:not(.variations_form) .quantity { flex: 0 0 auto !important; }
.single-product form.cart:not(.variations_form) .single_add_to_cart_button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Quantity input - bone-bright text, visible border, mono numerals.
 * Slightly higher specificity to win against Blocksy's input[type=number]
 * which was making the digit blend into the dark surface. */
.quantity input[type="number"],
.quantity input.qty,
.single-product .quantity input.qty,
.woocommerce .quantity input.qty {
  background: var(--ic-black) !important;
  border: 1px solid var(--ic-fog) !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-mono) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  height: var(--ic-control-h) !important;
  text-align: center !important;
  padding: 0 !important;
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Product meta (SKU, category) */
.product_meta {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin-top: var(--ic-gap-m);
  padding-top: var(--ic-gap-s);
  border-top: 1px solid var(--ic-asphalt-2);
}

.product_meta a { color: var(--ic-bone); }

/* Hide WooCommerce default tabs heading (we render meta inline) */
.woocommerce-tabs .wc-tabs li a {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Stock status */
.stock.in-stock {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-success);
}
.stock.out-of-stock {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-error);
}

/* Germanized notices - Kleinunternehmer hint, delivery time */
.gzd-shipping-costs-info,
.gzd-tax-info,
.wc-gzd-additional-info,
.woocommerce-gzd-legal-checkbox-text {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.08em;
  color: var(--ic-silver);
}

.delivery-time-info,
.wc-gzd-delivery-time {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

/* Cart & Checkout - slim down */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: 1px solid var(--ic-asphalt);
}

/* Brand-typed table headers - was inheriting Blocksy's dark-blue heading color
 * which read as near-invisible "PRODUKT / ZWISCHENSUMME" against the off-black
 * background. Force bone-bright and lift specificity to win the cascade. */
.woocommerce-cart table.cart thead th,
.woocommerce-cart table.cart th,
.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout-review-order-table th,
table.shop_table thead th,
table.shop_table th {
  background: var(--ic-asphalt) !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: var(--ic-gap-s) !important;
  font-weight: 500 !important;
}

.woocommerce-cart table.cart td,
.woocommerce-checkout-review-order-table td,
table.shop_table td {
  background: var(--ic-off-black) !important;
  border-top: 1px solid var(--ic-asphalt) !important;
  padding: var(--ic-gap-s) !important;
  color: var(--ic-bone) !important;
}

/* Subtotal / Total rows shared the same row-color hack from Blocksy that
 * filled the LABEL cell with --asphalt while the VALUE cell stayed off-black,
 * giving the row a visually-split look. Force both halves to one tone and
 * mark the total row bolder + bone-bright for hierarchy. */
.woocommerce-cart table.cart tfoot th,
.woocommerce-cart table.cart tfoot td,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td,
table.shop_table tfoot th,
table.shop_table tfoot td {
  background: var(--ic-asphalt) !important;
  color: var(--ic-bone) !important;
  font-family: var(--ic-font-mono) !important;
  border-top: 1px solid var(--ic-fog) !important;
  padding: var(--ic-gap-s) !important;
}

.woocommerce-cart table.cart tfoot .order-total th,
.woocommerce-cart table.cart tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td,
table.shop_table tfoot .order-total th,
table.shop_table tfoot .order-total td {
  background: var(--ic-asphalt-2) !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-headline) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

.woocommerce-cart table.cart tfoot .order-total .amount,
.woocommerce-checkout-review-order-table tfoot .order-total .amount {
  color: var(--ic-bone-bright) !important;
  font-weight: 500 !important;
}

/* Cart quantity input - was rendering invisible (black text on near-black bg
 * because Blocksy targets [type=number] before our base block does). High-
 * specificity override + visible border + mono numerals. */
.woocommerce-cart table.cart .quantity input.qty,
.woocommerce-cart table.cart input[type="number"].qty,
.woocommerce table.cart input.qty {
  background: var(--ic-black) !important;
  border: 1px solid var(--ic-fog) !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-mono) !important;
  font-size: 1rem !important;
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  height: var(--ic-control-h) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  border-radius: 0 !important;
  padding: 0 !important;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Cart +/− buttons + input share the --ic-control-h token (44px) */
.woocommerce-cart .quantity,
.woocommerce-cart .quantity[data-type="type-2"] {
  --quantity-width: auto;
  width: auto !important;
  align-items: center !important;
}
.woocommerce-cart .quantity .ct-decrease,
.woocommerce-cart .quantity .ct-increase {
  height: var(--ic-control-h) !important;
  width: var(--ic-control-h) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kill the spinner up/down inside number inputs - we have - / + buttons */
.woocommerce-cart table.cart input.qty::-webkit-outer-spin-button,
.woocommerce-cart table.cart input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Fallback only - Blocksy currently renders .ct-decrease/.ct-increase spans
 * in the cart row (styled above). These button shapes come from WooCommerce
 * core / other quantity plugins; kept on the same token so a markup switch
 * cannot reintroduce a mismatched row height. */
.woocommerce-cart .quantity .qty-button,
.woocommerce-cart .quantity button.minus,
.woocommerce-cart .quantity button.plus,
.woocommerce-cart .ct-quantity-buttons button {
  background: transparent !important;
  border: 1px solid var(--ic-fog) !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-mono) !important;
  font-size: 1.1rem !important;
  width: var(--ic-control-h) !important;
  height: var(--ic-control-h) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

.woocommerce-cart .quantity .qty-button:hover {
  border-color: var(--ic-bone-bright) !important;
  color: var(--ic-bone-bright) !important;
}

/* Cart action buttons row - "Coupon" + "Update cart" sat in a default-styled
 * row. Make them sit on one line, less visually loud. The Update button is
 * disabled until something changes; keep it ghosted accordingly. */
.woocommerce-cart .coupon input[type="text"],
.woocommerce-cart .coupon input#coupon_code {
  background: var(--ic-black) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-mono) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.04em !important;
  padding: 0 1rem !important;
  height: 3rem !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.woocommerce-cart .button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] {
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 0 1.4rem !important;
  height: 3rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled],
.woocommerce-cart .button[disabled] {
  background: transparent !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  color: var(--ic-fog) !important;
  cursor: not-allowed;
}

/* Cart totals panel (right column on /cart/).
 * Blocksy frames it with `border: var(--cart-totals-border)` = 2px solid
 * var(--theme-border-color), which resolves to its near-white palette tone and
 * reads as the loudest edge on the page. Drop the frame entirely and separate
 * the panel from the page by TONE instead: one step up from the black page
 * background, matching the off-black used by the cart table cells. */
.ct-woocommerce-cart-form .cart_totals,
.woocommerce-cart .cart_totals {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ic-off-black);
  padding: var(--ic-gap-m) !important;
}

/* Blocksy nudges the cart table down by 7px at >=690px to optically align its
 * first row with the totals panel heading. With the frame gone the two columns
 * have to start on the exact same line, so the nudge has to go. */
@media (min-width: 690px) {
  .ct-woocommerce-cart-form .woocommerce-cart-form table:first-child {
    margin-top: 0 !important;
  }
}

/* Cart "Sendung" panel + collateral right column - tighter typography,
 * remove the loud heading inheritance from Blocksy. */
.cart_totals h2,
.cart-collaterals h2 {
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ic-bone-bright) !important;
  border-bottom: 1px solid var(--ic-asphalt-2);
  padding-bottom: var(--ic-gap-s);
  margin-bottom: var(--ic-gap-s);
}

/* Off-canvas cart (Blocksy native) */
.ct-cart-content {
  background: var(--ic-off-black);
  color: var(--ic-bone);
}

/* ============================================================
   8.5  RADIO + CHECKBOX - kill browser-default blue
   ============================================================
   Blocksy + Woo + Germanized all leave radio/checkbox styling
   to the browser, which renders Mac/Win's native chrome blue.
   On a fully dark/red brand surface those blue dots are the
   single loudest off-brand element in the checkout. Custom-
   draw both with bone outline + blood-red fill on check.

   Pattern: hide the native control via appearance:none, draw
   the box from the element itself, draw the checkmark/dot
   via a pseudo using mask so we get crisp edges at any size. */

input[type="radio"],
.wc-block-components-radio-control__input,
.woocommerce-checkout input[type="radio"],
.woocommerce-cart input[type="radio"],
.shipping_method,
.payment_methods input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1px solid var(--ic-fog) !important;
  border-radius: 50% !important;
  background: var(--ic-black) !important;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin: 0 0.5rem 0 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: border-color var(--ic-dur-fast) var(--ic-ease);
}

input[type="radio"]:hover,
.payment_methods input[type="radio"]:hover {
  border-color: var(--ic-bone) !important;
}

input[type="radio"]:checked,
.payment_methods input[type="radio"]:checked {
  border-color: var(--ic-accent-hot) !important;
  background: var(--ic-black) !important;
}

input[type="radio"]:checked::after,
.payment_methods input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ic-accent-hot);
  transform: translate(-50%, -50%);
}

input[type="radio"]:focus-visible {
  outline: 2px solid var(--ic-bone-bright);
  outline-offset: 2px;
}

input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-cart input[type="checkbox"],
.wc-block-components-checkbox__input,
.wc-gzd-legal-checkbox input[type="checkbox"],
.woocommerce-gzd-legal-checkbox input[type="checkbox"],
input.gzd-legal-checkbox,
input#legal,
input[name^="legal_"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1px solid var(--ic-fog) !important;
  border-radius: 0 !important;
  background: var(--ic-black) !important;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin: 0 0.5rem 0 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  flex-shrink: 0 !important; /* IC-FIX square checkbox - never squeezed by label text */
  min-height: 18px !important; /* IC-FIX guard vs generic .form-row min-height:3rem */
  transition: border-color var(--ic-dur-fast) var(--ic-ease),
              background var(--ic-dur-fast) var(--ic-ease);
}

input[type="checkbox"]:hover,
.wc-gzd-legal-checkbox input[type="checkbox"]:hover { border-color: var(--ic-bone) !important; }

input[type="checkbox"]:checked,
.wc-gzd-legal-checkbox input[type="checkbox"]:checked,
.wc-gzd-checkbox-placeholder input[type="checkbox"]:checked,
.checkbox-legal input[type="checkbox"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-cart input[type="checkbox"]:checked,
input.gzd-legal-checkbox:checked,
input[name^="legal_"]:checked,
input[name="legal"]:checked,
input[name="terms"]:checked {
  background-color: var(--ic-accent-hot) !important;
  background-image: none !important;
  border-color: var(--ic-accent-hot) !important;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--ic-bone-bright);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Germanized's "legal"/"data-*" checkboxes are inside .checkbox-legal labels
 * and inside .wc-gzd-checkbox-placeholder wrappers. Germanized renders its
 * OWN visual checkmark via plugin CSS; layering our ::after on top doubled
 * the tick. Suppress the ::after on those specifically and let the box-
 * background change be the only visual cue (the accent-hot fill is clear). */
.wc-gzd-checkbox-placeholder input[type="checkbox"]:checked::after,
.checkbox-legal input[type="checkbox"]:checked::after,
input[name="legal"]:checked::after,
input[name^="legal_"]:checked::after,
input[name="terms"]:checked::after { content: none !important; }

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ic-bone-bright);
  outline-offset: 2px;
}

/* Blocksy wraps the right-column order summary in .ct-order-review with a
 * pale 2px solid border (#e1e8ed) intended for light themes. On the dark
 * brand surface it reads as the loudest element on the page. Strip it. */
.woocommerce-checkout .ct-order-review,
.woocommerce-checkout div.ct-order-review {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Germanized legal-checkbox wrapper - a quiet tone panel so the required AGB
 * box reads as one block, with checkbox + label aligned. Includes the
 * .wc-gzd-checkbox-placeholder-legal wrapper which is what Germanized actually
 * renders on Woo's classic checkout.
 * No border: the background step already separates the panel, and the outline
 * stacked visually with the place-order button right below it. */
.wc-gzd-legal-checkbox,
.woocommerce-gzd-legal-checkbox,
.gzd-legal-checkbox-text,
.wc-gzd-checkbox-placeholder-legal,
.wc-gzd-checkbox-placeholder {
  background: var(--ic-asphalt) !important;
  border: 0 !important;
  padding: var(--ic-gap-s) !important;
  margin: var(--ic-gap-s) 0 !important;
  color: var(--ic-bone) !important;
}

/* Germanized also emits empty placeholders it may fill later via JS
 * (…-data-download / -data-service / -data-age). With the panel styling above
 * they would render as blank grey bars and, once filled, resize the page.
 * Collapse them completely while they hold nothing. */
.wc-gzd-checkbox-placeholder:empty {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The placeholder contains <p class="form-row checkbox-legal"> with the
 * label inside. Reset margins so the panel padding does the spacing job. */
.wc-gzd-checkbox-placeholder-legal .form-row,
.wc-gzd-checkbox-placeholder-legal p.form-row {
  margin: 0 !important;
  padding: 0 !important;
}

.wc-gzd-checkbox-placeholder-legal label {
  display: block !important;
  color: var(--ic-bone) !important;
  font-family: var(--ic-font-body) !important;
  font-size: var(--ic-fs-small) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.wc-gzd-checkbox-placeholder-legal input[type="checkbox"] {
  float: left;
  margin: 0.25rem 0.6rem 0 0 !important;
}

/* The required "*" marker. Germanized emits it as a SIBLING of the sentence
 * span, both inside the <label> (templates/checkout/terms.php). */
.wc-gzd-checkbox-placeholder-legal .required,
.wc-gzd-checkbox-placeholder-legal abbr.required {
  float: none !important;
  display: inline !important;
  margin-left: 0.25rem;
}

/* `display` MUST stay `inline` here. With display:block the sentence span
 * closes its line box and the trailing "&nbsp;*" is pushed into an anonymous
 * block of its own - which is why the red asterisk sat on its own line at
 * every viewport width. Do not "restore" block.
 * (The residual template whitespace between </span> and &nbsp; is stripped
 * server-side in functions.php §4.8 - CSS cannot suppress that break.) */
.wc-gzd-legal-checkbox label,
.woocommerce-gzd-legal-checkbox label,
.gzd-legal-checkbox-text label,
.woocommerce-gzd-legal-checkbox-text {
  color: var(--ic-bone) !important;
  font-family: var(--ic-font-body) !important;
  font-size: var(--ic-fs-small) !important;
  line-height: 1.55 !important;
  display: inline !important;
  margin: 0 !important;
}

/* Inline checkbox before the AGB sentence - float it left and indent the
 * text so the sentence wraps as a single block rather than dropping every
 * inline span onto its own line (which is what flex layout was doing). */
.wc-gzd-legal-checkbox input[type="checkbox"],
.woocommerce-gzd-legal-checkbox input[type="checkbox"] {
  float: left;
  margin: 0.25rem 0.5rem 0 0 !important;
}

.wc-gzd-legal-checkbox label::after,
.woocommerce-gzd-legal-checkbox label::after {
  content: "";
  display: block;
  clear: both;
}

.wc-gzd-legal-checkbox a,
.woocommerce-gzd-legal-checkbox a,
.gzd-legal-checkbox-text a {
  color: var(--ic-bone-bright) !important;
  text-decoration: underline;
  text-decoration-color: var(--ic-accent-hot);
}

.wc-gzd-legal-checkbox a:hover,
.woocommerce-gzd-legal-checkbox a:hover,
.gzd-legal-checkbox-text a:hover {
  color: var(--ic-accent-hot) !important;
}

/* Note: previously attempted to flex-reorder #order_review children to push
 * the AGB block above the place-order button. Backed out because Germanized's
 * AGB text uses inline spans/links that broke into single-word columns under
 * flex parent, and the order:N reorder put #payment ahead of the cart table.
 * Leaving DOM order as-is. AGB checkbox is just styled in place. */

/* Required-field asterisk - use accent red (consistent with Pflichtfeld signal) */
.required,
.woocommerce form .form-row .required,
abbr.required {
  color: var(--ic-accent-hot) !important;
  text-decoration: none !important;
  border: none !important;
}

/* ============================================================
   8.6  CHECKOUT PAGE - z-index, layout, friction reduction
   ============================================================ */

/* Right column needs to clear the fixed header. Was getting clipped at top
 * by the body::before gradient overlay, making "Deine Bestellung" headline
 * sit half-behind a dark gradient band. Push the sticky/scroll start below
 * the header band by adding a safety pad. */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review {
  position: relative;
  z-index: 1;
}

/* Order summary right column - no frame; the cell-level backgrounds inside
 * the table already give visual structure. Heading is just typography. */
body.woocommerce-checkout #order_review_heading {
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ic-bone-bright) !important;
  padding: 0 !important;
  margin: 0 0 var(--ic-gap-s) !important;
  background: transparent !important;
  border: 0 !important;
}

body.woocommerce-checkout #order_review {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Checkout shipping panel - hide redundant "Versandkosten berechnen" link
 * (we already render the shipping methods inline above, the link reloads
 * the same calc UI). Removes a dead-end click. */
.woocommerce-shipping-calculator {
  display: none !important;
}

/* "Sendung" -> we'd rather call it Versand visually. Override via attribute
 * selector on the table heading where Woo writes "Sendung". */
.woocommerce-shipping-totals th[data-title]::first-line { font-size: 0; }
.woocommerce-shipping-totals th {
  font-family: var(--ic-font-mono) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ic-bone-bright) !important;
}

/* Place-order button (was implicit "Jetzt kaufen" / "Zahlungspflichtig bestellen")
 * - stretch to full width, lift to primary visual weight, blood-red on hover. */
#place_order,
.woocommerce-checkout #place_order,
button#place_order {
  width: 100% !important;
  display: block !important;
  font-size: 1rem !important;
  padding: 1.15rem 1.4rem !important;
  letter-spacing: 0.18em !important;
  font-family: var(--ic-font-headline) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  background: var(--ic-bone-bright) !important;
  color: var(--ic-black) !important;
  border: 1px solid var(--ic-bone-bright) !important;
  border-radius: 0 !important;
  margin-top: var(--ic-gap-s) !important;
  cursor: pointer;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease),
              transform var(--ic-dur-fast) var(--ic-ease);
}

#place_order:hover {
  background: var(--ic-accent) !important;
  border-color: var(--ic-accent) !important;
  color: var(--ic-bone-bright) !important;
  transform: translateY(-1px);
}

#place_order:active {
  background: var(--ic-accent-hot) !important;
  border-color: var(--ic-accent-hot) !important;
}

/* Payment method panels - kill Woo's pale-grey box, dark+border instead */
.woocommerce-checkout #payment,
.woocommerce-checkout ul.payment_methods,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout .wc_payment_method {
  background: transparent !important;
  color: var(--ic-bone) !important;
}

.woocommerce-checkout ul.payment_methods {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--ic-gap-s) !important;
  list-style: none;
}

.woocommerce-checkout ul.payment_methods li {
  background: var(--ic-black) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  padding: var(--ic-gap-s) !important;
  margin: 0 0 0.5rem !important;
  transition: border-color var(--ic-dur-fast) var(--ic-ease);
}

.woocommerce-checkout ul.payment_methods li:has(input:checked) {
  border-color: var(--ic-accent-hot) !important;
}

.woocommerce-checkout ul.payment_methods li label {
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ic-bone-bright) !important;
  cursor: pointer;
  margin: 0 !important;
}

.woocommerce-checkout #payment .payment_box {
  margin-top: 0.75rem !important;
  padding: 0.75rem 0 0 1.6rem !important;
  border-top: 1px dashed var(--ic-asphalt-2);
  color: var(--ic-bone) !important;
  font-size: var(--ic-fs-small);
  line-height: 1.6;
}

.woocommerce-checkout #payment .payment_box::before {
  display: none !important;
}

.woocommerce-checkout #payment .payment_box * {
  color: var(--ic-bone) !important;
}

/* Order review table inside the checkout - thumbnail visible, no padding crunch */
.woocommerce-checkout-review-order-table .product-thumbnail img,
.woocommerce-checkout-review-order-table img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  background: var(--ic-asphalt);
  margin-right: var(--ic-gap-s);
}

.woocommerce-checkout-review-order-table .product-name {
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small);
  letter-spacing: 0.04em;
  color: var(--ic-bone-bright) !important;
}

.woocommerce-checkout-review-order-table .product-name strong {
  font-weight: 500;
  color: var(--ic-fog) !important;
  margin-left: 0.5rem;
}

/* Form rows - tighten labels, lift contrast, use space efficiently */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .form-row-wide label {
  font-family: var(--ic-font-mono) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.08em !important;
  color: var(--ic-bone) !important;
  margin-bottom: 0.4rem !important;
  display: block;
}

.woocommerce-checkout .form-row input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-selection {
  background: var(--ic-black) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  border-radius: 0 !important;
  color: var(--ic-bone-bright) !important;
  font-family: var(--ic-font-body) !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem !important;
  min-height: 3rem !important;
}

.woocommerce-checkout .select2-selection__rendered {
  color: var(--ic-bone-bright) !important;
  line-height: 1.6 !important;
  padding: 0 !important;
}

.woocommerce-checkout .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 0.5rem !important;
}

.woocommerce-checkout .select2-selection__arrow b {
  border-color: var(--ic-fog) transparent transparent transparent !important;
}

/* Select2 dropdown surface (when open) */
.select2-dropdown {
  background: var(--ic-off-black) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  border-radius: 0 !important;
  color: var(--ic-bone-bright) !important;
}

.select2-results__option {
  background: var(--ic-off-black) !important;
  color: var(--ic-bone) !important;
  padding: 0.6rem 1rem !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ic-asphalt-2) !important;
  color: var(--ic-bone-bright) !important;
}

.select2-search--dropdown .select2-search__field {
  background: var(--ic-black) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  color: var(--ic-bone-bright) !important;
}

/* Section headings on checkout - "Rechnungsdaten" etc - branded */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ic-bone-bright) !important;
  margin: 0 0 var(--ic-gap-s) !important;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ic-asphalt-2);
}

/* Order notes textarea - same dark surface */
#order_comments,
.woocommerce-checkout textarea#order_comments {
  min-height: 5rem !important;
  resize: vertical;
}

/* Terms & conditions row - move from buried-in-summary to right above place
 * order button by visual emphasis. Highlight the checkbox label so the
 * AGB-link contrast is sufficient. */
.woocommerce-terms-and-conditions-wrapper,
.wc-terms-and-conditions {
  background: var(--ic-asphalt) !important;
  padding: var(--ic-gap-s) !important;
  margin: var(--ic-gap-s) 0 !important;
  border: 1px solid var(--ic-asphalt-2);
}

.woocommerce-terms-and-conditions-wrapper label,
.wc-terms-and-conditions label,
.form-row.terms label {
  color: var(--ic-bone) !important;
  font-family: var(--ic-font-body) !important;
  font-size: var(--ic-fs-small) !important;
  line-height: 1.5 !important;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.woocommerce-terms-and-conditions-wrapper a,
.wc-terms-and-conditions a {
  color: var(--ic-bone-bright) !important;
  text-decoration: underline;
  text-decoration-color: var(--ic-accent-hot);
}

.woocommerce-terms-and-conditions-wrapper a:hover,
.wc-terms-and-conditions a:hover {
  color: var(--ic-accent-hot) !important;
}

/* Notices on cart/checkout - error/info/success */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice,
.wc-block-components-notice-banner {
  background: var(--ic-off-black) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  border-left-width: 3px !important;
  color: var(--ic-bone) !important;
  padding: var(--ic-gap-s) var(--ic-gap-m) !important;
  border-radius: 0 !important;
  font-family: var(--ic-font-body) !important;
  font-size: var(--ic-fs-small) !important;
  list-style: none !important;
}

.woocommerce-error { border-left-color: var(--ic-accent-hot) !important; }
.woocommerce-message { border-left-color: var(--ic-success) !important; }
.woocommerce-info { border-left-color: var(--ic-bone) !important; }

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
  color: var(--ic-bone-bright) !important;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  display: none !important;
}

/* "Added to cart" message after Claim - was inheriting Woo's default block
 * with a grey "Warenkorb anzeigen" link-button. Brand-style the inline CTA.
 * Covers BOTH the inline AJAX-injected link (a.added_to_cart.wc-forward,
 * sits right next to the add-to-cart button) AND the banner variant inside
 * .woocommerce-message. */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message a.wc-forward,
a.added_to_cart,
a.added_to_cart.wc-forward,
.single-product a.added_to_cart {
  background: transparent !important;
  border: 1px solid var(--ic-bone-bright) !important;
  color: var(--ic-bone-bright) !important;
  padding: 0 1rem !important;
  height: 2.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ic-font-headline) !important;
  font-size: var(--ic-fs-small) !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ic-bone-bright) !important;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease);
}

.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
a.added_to_cart:hover,
a.added_to_cart.wc-forward:hover {
  background: var(--ic-bone-bright) !important;
  color: var(--ic-black) !important;
  border-color: var(--ic-bone-bright) !important;
}

/* Cart-empty notice - centre, more breathing room */
.cart-empty.woocommerce-info {
  text-align: center;
  padding: var(--ic-gap-l) var(--ic-gap-s) !important;
  font-family: var(--ic-font-headline);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Return-to-shop button inside cart-empty state */
.return-to-shop .button,
.wc-empty-cart-message ~ .return-to-shop .button {
  margin-top: var(--ic-gap-s);
}

/* ============================================================
   8.6.5  HEADER CART LINK (injected via JS in wp_footer)
   ============================================================
   Sits to the right of the header menu, count chip in blood-red
   when there's anything in the cart. Pure CSS - no icon font. */

.ic-header-cart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem;
  margin-left: var(--ic-gap-s);
  padding: 0.4rem 0;
  font-family: var(--ic-font-headline);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-bone) !important;
  border-bottom: none !important;
  cursor: pointer;
  transition: color var(--ic-dur-fast) var(--ic-ease);
}

.ic-header-cart:hover { color: var(--ic-bone-bright) !important; }

.ic-header-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  background: var(--ic-accent-hot);
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0;
  line-height: 1;
}

.ic-header-cart[data-count="0"] .ic-header-cart__count {
  background: transparent;
  color: var(--ic-fog);
  border: 1px solid var(--ic-asphalt-2);
}

/* ============================================================
   8.65  TRUST STRIP + FREE-SHIP PROGRESS
   ============================================================
   Sits above the cart/checkout content. Plain text, mono, fog tone.
   Three pipes for that "Inner Circle press-stamp" feel without ever
   becoming a generic e-commerce shipping bar. Wraps on mobile. */

.ic-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ic-gap-s) var(--ic-gap-m);
  align-items: center;
  justify-content: center;
  padding: 0.85rem var(--ic-gap-s);
  border-top: 1px solid var(--ic-asphalt);
  border-bottom: 1px solid var(--ic-asphalt);
  margin-bottom: var(--ic-gap-m);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

.ic-trust-strip__item {
  position: relative;
  padding: 0 var(--ic-gap-s);
}

.ic-trust-strip__item + .ic-trust-strip__item::before {
  content: "/";
  position: absolute;
  left: calc(-1 * var(--ic-gap-s) / 2);
  color: var(--ic-fog);
}

@media (max-width: 640px) {
  .ic-trust-strip { gap: 0.5rem var(--ic-gap-s); padding: 0.75rem 0.6rem; }
  .ic-trust-strip__item { font-size: 0.625rem; padding: 0 0.4rem; }
  .ic-trust-strip__item + .ic-trust-strip__item::before { left: -3px; }
}

/* Free-ship progress - shown above the cart table when threshold > 0 and
 * subtotal still below it. Reached state collapses bar, shows single line. */

.ic-free-ship {
  margin: 0 0 var(--ic-gap-m);
  padding: 0.85rem var(--ic-gap-s);
  background: var(--ic-off-black);
  border: 1px solid var(--ic-asphalt-2);
}

.ic-free-ship__label {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.04em;
  color: var(--ic-bone);
  margin-bottom: 0.55rem;
}

.ic-free-ship__label strong {
  color: var(--ic-bone-bright);
  font-weight: 500;
}

.ic-free-ship__bar {
  height: 4px;
  background: var(--ic-asphalt-2);
  position: relative;
  overflow: hidden;
}

.ic-free-ship__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ic-accent-hot);
  transition: width var(--ic-dur) var(--ic-ease);
}

.ic-free-ship--reached {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
  text-align: center;
  border-color: var(--ic-accent-hot);
}

/* ============================================================
   8.66  CART DRAWER (off-canvas, side-panel)
   ============================================================ */

/* Shell: full-viewport overlay catcher + sliding panel on the right.
   Hardware-accelerated (transform + opacity only). Closed state has
   pointer-events:none so it never blocks interaction. */
.ic-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.ic-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity var(--ic-dur) var(--ic-ease);
  cursor: pointer;
}

.ic-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(440px, 86vw);
  background: var(--ic-off-black);
  border-left: 1px solid var(--ic-asphalt-2);
  transform: translateX(100%);
  transition: transform var(--ic-dur) var(--ic-ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ic-cart-drawer[data-state="open"] {
  pointer-events: auto;
}

.ic-cart-drawer[data-state="open"] .ic-cart-drawer__overlay {
  opacity: 1;
}

.ic-cart-drawer[data-state="open"] .ic-cart-drawer__panel {
  transform: translateX(0);
}

/* Body scroll-lock when drawer is open. We don't use position:fixed
   on body because that scrolls back to top on close - overflow:hidden
   keeps the scroll position. */
body.ic-cart-drawer-open {
  overflow: hidden;
}

/* The refreshable inner block.
   This is what WooCommerce swaps via the standard fragment-refresh
   path - mini-cart.php sets the doubled-up class
   (.widget_shopping_cart_content + .ic-cart-drawer__refresh).
   It needs to be a flex column so the items list grows + the
   footer sticks to the bottom. */
.ic-cart-drawer__refresh {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Head: title + close-X */
.ic-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ic-gap-s) var(--ic-gap-s);
  border-bottom: 1px solid var(--ic-asphalt);
  flex: 0 0 auto;
}

.ic-cart-drawer__title {
  font-family: var(--ic-font-headline);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
}

.ic-cart-drawer__count {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.06em;
  color: var(--ic-bone);
  margin-left: 0.4rem;
}

.ic-cart-drawer__close {
  background: transparent;
  border: 0;
  color: var(--ic-bone);
  font-size: 1.75rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: color var(--ic-dur-fast) var(--ic-ease);
}

.ic-cart-drawer__close:hover,
.ic-cart-drawer__close:focus-visible {
  color: var(--ic-bone-bright);
  outline: none;
}

/* Free-ship progress - compact drawer variant. Same idea as the
   .ic-free-ship block (~line 2044) but tighter padding + no margin-bottom. */
.ic-cart-drawer__free-ship {
  padding: 0.75rem var(--ic-gap-s);
  background: var(--ic-asphalt);
  border-bottom: 1px solid var(--ic-asphalt-2);
  flex: 0 0 auto;
}

.ic-cart-drawer__free-ship-label {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ic-bone);
  margin-bottom: 0.5rem;
}

.ic-cart-drawer__free-ship-label strong {
  color: var(--ic-bone-bright);
  font-weight: 500;
}

.ic-cart-drawer__free-ship-bar {
  height: 3px;
  background: var(--ic-off-black);
  position: relative;
  overflow: hidden;
}

.ic-cart-drawer__free-ship-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ic-accent-hot);
  transition: width var(--ic-dur) var(--ic-ease);
}

.ic-cart-drawer__free-ship--reached {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
  text-align: center;
  background: transparent;
  border-bottom: 1px solid var(--ic-asphalt-2);
}

/* Delivery reassurance line */
.ic-cart-drawer__delivery {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ic-silver);
  padding: 0.6rem var(--ic-gap-s);
  border-bottom: 1px solid var(--ic-asphalt);
  flex: 0 0 auto;
}

/* Items list - the scrollable middle track */
.ic-cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.ic-cart-drawer__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--ic-gap-s);
  padding: var(--ic-gap-s);
  border-bottom: 1px solid var(--ic-asphalt);
  transition: opacity var(--ic-dur-fast) var(--ic-ease);
}

.ic-cart-drawer__item[aria-busy="true"] {
  opacity: 0.55;
}

.ic-cart-drawer__thumb {
  width: 72px;
  height: 72px;
  background: var(--ic-asphalt);
  overflow: hidden;
}

.ic-cart-drawer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ic-cart-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.ic-cart-drawer__name {
  font-family: var(--ic-font-headline);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
  line-height: var(--ic-lh-snug);
}

.ic-cart-drawer__name a {
  color: inherit;
  text-decoration: none;
}

.ic-cart-drawer__name a:hover {
  color: var(--ic-bone);
}

.ic-cart-drawer__meta {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

.ic-cart-drawer__meta p {
  margin: 0;
}

.ic-cart-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-gap-s);
  margin-top: 0.25rem;
}

.ic-cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ic-asphalt-2);
  background: var(--ic-off-black);
}

.ic-cart-drawer__qty-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--ic-bone);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--ic-dur-fast) var(--ic-ease), background var(--ic-dur-fast) var(--ic-ease);
}

.ic-cart-drawer__qty-btn:hover {
  color: var(--ic-bone-bright);
  background: var(--ic-asphalt);
}

.ic-cart-drawer__qty-val {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  color: var(--ic-bone-bright);
  min-width: 1.75rem;
  text-align: center;
}

.ic-cart-drawer__subtotal {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  color: var(--ic-bone-bright);
  white-space: nowrap;
}

.ic-cart-drawer__actions {
  display: flex;
  justify-content: flex-end;
}

.ic-cart-drawer__remove {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic-silver);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--ic-dur-fast) var(--ic-ease);
}

.ic-cart-drawer__remove:hover,
.ic-cart-drawer__remove:focus-visible {
  color: var(--ic-accent-hot);
  outline: none;
}

/* Footer: subtotal + checkout button. Sticks to the bottom of the
   panel. Border-top separates it visually from the scrollable list. */
.ic-cart-drawer__foot {
  padding: var(--ic-gap-s);
  border-top: 1px solid var(--ic-asphalt);
  background: var(--ic-off-black);
  flex: 0 0 auto;
}

.ic-cart-drawer__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ic-gap-s);
  margin-bottom: var(--ic-gap-s);
}

.ic-cart-drawer__totals-label {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

.ic-cart-drawer__totals-val {
  font-family: var(--ic-font-headline);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--ic-bone-bright);
}

.ic-cart-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Deliberately one step taller than the 44px row controls - it is the only
   * primary action in the drawer. Pinned so Blocksy's .button min-height
   * cannot drift it. */
  min-height: calc(var(--ic-control-h) + 0.5rem);
  padding: 0 var(--ic-gap-s);
  line-height: 1;
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  font-family: var(--ic-font-headline);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--ic-dur-fast) var(--ic-ease), color var(--ic-dur-fast) var(--ic-ease);
}

.ic-cart-drawer__checkout:hover,
.ic-cart-drawer__checkout:focus-visible {
  background: var(--ic-accent-hot);
  color: var(--ic-bone-bright);
  outline: none;
}

/* Empty state */
.ic-cart-drawer__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ic-gap-s);
  padding: var(--ic-gap-m) var(--ic-gap-s);
  text-align: center;
}

.ic-cart-drawer__empty-title {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
  margin: 0;
}

.ic-cart-drawer__empty-sub {
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-small);
  color: var(--ic-silver);
  margin: 0;
}

.ic-cart-drawer__empty-cta {
  display: inline-block;
  margin-top: var(--ic-gap-s);
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--ic-bone-bright);
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--ic-dur-fast) var(--ic-ease), color var(--ic-dur-fast) var(--ic-ease);
}

.ic-cart-drawer__empty-cta:hover,
.ic-cart-drawer__empty-cta:focus-visible {
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  outline: none;
}

/* Mobile - widen panel, tighten padding */
@media (max-width: 640px) {
  .ic-cart-drawer__panel {
    width: 92vw;
  }
  .ic-cart-drawer__head,
  .ic-cart-drawer__foot,
  .ic-cart-drawer__item {
    padding: 0.85rem 0.85rem;
  }
  .ic-cart-drawer__free-ship,
  .ic-cart-drawer__delivery {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}

/* Reduced-motion: cut transitions */
@media (prefers-reduced-motion: reduce) {
  .ic-cart-drawer__overlay,
  .ic-cart-drawer__panel,
  .ic-cart-drawer__free-ship-fill {
    transition: none;
  }
}

/* ============================================================
   8.7  THANK-YOU + ORDER-RECEIVED PAGE
   ============================================================ */

.woocommerce-order-received .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--ic-font-headline);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ic-bone-bright);
  margin: var(--ic-gap-m) 0 var(--ic-gap-s);
}

.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ic-gap-s);
  padding: 0;
  margin: var(--ic-gap-m) 0;
  border: 1px solid var(--ic-asphalt-2);
}

.woocommerce-order .woocommerce-order-overview li {
  background: var(--ic-off-black);
  padding: var(--ic-gap-s);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-silver);
  border-right: 1px solid var(--ic-asphalt-2);
}

.woocommerce-order .woocommerce-order-overview li:last-child { border-right: 0; }

.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  font-family: var(--ic-font-headline);
  font-size: 1rem;
  color: var(--ic-bone-bright);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.3rem;
}

/* ============================================================
   9. FORMS - checkout, contact
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select,
.wc-block-components-text-input input,
.wc-block-components-textarea {
  background: var(--ic-black);
  border: 1px solid var(--ic-asphalt-2);
  border-radius: 0;
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  transition: border-color var(--ic-dur-fast) var(--ic-ease);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ic-bone-bright);
}

label, .wc-block-components-checkout-step__title {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.08em;
  color: var(--ic-bone);
}

/* ============================================================
   10. FOOTER
   ============================================================ */

.ct-footer,
.ct-footer [data-row],
.ct-footer [data-row="middle"],
.ct-footer [data-row="top"],
.ct-footer [data-row="bottom"],
.ct-footer > div,
.ct-footer .ct-container,
.ct-footer .ct-container-fluid {
  background: var(--ic-black) !important;
}

.ct-footer {
  border-top: 1px solid var(--ic-asphalt);
  padding: var(--ic-gap-l) var(--ic-gutter) var(--ic-gap-m);
}

/* Footer copyright: tight, mono, fog color */
.ct-footer [data-id="copyright"],
.ct-footer .site-info,
.ct-footer .copyright-text {
  font-family: var(--ic-font-mono) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ic-fog) !important;
  text-align: center;
  border-bottom: none;
}

.ct-footer [data-id="copyright"] a,
.ct-footer .site-info a {
  color: var(--ic-silver) !important;
  border-bottom: none;
}

.ct-footer [data-id="copyright"] a:hover {
  color: var(--ic-bone) !important;
}

.ct-footer .widget-title,
.ct-footer h3 {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin-bottom: var(--ic-gap-s);
}

.ct-footer ul li a {
  font-family: var(--ic-font-body);
  color: var(--ic-bone);
  font-size: var(--ic-fs-small);
  border-bottom: none;
}

.ct-footer ul li a:hover {
  color: var(--ic-bone-bright);
}

.ic-footer-tagline {
  font-family: var(--ic-font-display);
  font-size: 0.95rem;
  color: var(--ic-fog);
  text-align: center;
  padding-top: var(--ic-gap-m);
  border-top: 1px solid var(--ic-asphalt);
  margin-top: var(--ic-gap-m);
  letter-spacing: 0;
}

/* ============================================================
   11. EDITORIAL PATTERNS - Manifest, etc.
   ============================================================ */

/* Section wrapper: full container width (1440), spacing only.
   Reading width is applied to .ic-readable children below. */
.ic-editorial {
  padding: var(--ic-gap-l) var(--ic-page-pad);
}

.ic-editorial p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ic-bone);
  margin-bottom: 1.2em;
}

/* ----- .ic-readable — globale Reading-Utility -----
   Linksbündiger schmaler Text-Block. Steckt drinnen in einer
   1440px-Section und teilt deren LINKEN Edge — so entsteht eine
   durchgehende vertikale Flucht über alle Pages, unabhängig
   von der Reading-Breite. */
.ic-readable,
.ic-readable.wp-block-group {
  max-width: var(--ic-w-narrow);
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Editorial-Reading-Variante: leicht schmaler für längere Texte
   (Manifest), behält dasselbe linksbündige Verhalten. */
.ic-editorial > .ic-readable {
  max-width: 60ch;
}

/* Drop-cap removed by request - was breaking reading flow on Manifest. */

.ic-editorial blockquote {
  border-left: 2px solid var(--ic-accent);
  padding-left: var(--ic-gap-m);
  margin: var(--ic-gap-m) 0;
  font-family: var(--ic-font-headline);
  font-size: 1.5rem;
  color: var(--ic-bone-bright);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ic-marginalia {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

/* ============================================================
   12. COOKIE BANNER (Real Cookie Banner) - restyle subtly
   ============================================================ */

.rcb-banner-body-container {
  background: var(--ic-off-black) !important;
  color: var(--ic-bone) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  border-radius: 0 !important;
  font-family: var(--ic-font-body) !important;
}

.rcb-banner-body-container button {
  border-radius: 0 !important;
  font-family: var(--ic-font-headline) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   11.5  PRODUCT FEATURE (home) - editorial spotlight
   ============================================================ */

.ic-product-feature {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: var(--ic-gap-xl) 0 !important;
  background: var(--ic-black) !important;
  border-top: 1px solid var(--ic-asphalt);
  border-bottom: 1px solid var(--ic-asphalt);
}

.ic-product-feature__inner {
  max-width: var(--ic-w-wide);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ic-page-pad);
}

/* Pattern has WP layout:constrained,contentSize:1280px which caps EVERY
   direct child at 1280px + auto-centers it (eyebrow pushed to x=320).
   Override so children fill pf__inner's content area instead. */
.ic-product-feature__inner > :where(:not(.alignleft):not(.alignright)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.ic-product-feature__eyebrow {
  margin: 0 0 var(--ic-gap-l) !important;
  color: var(--ic-silver) !important;
}

.ic-product-feature__row {
  gap: var(--ic-gap-l) !important;
  align-items: center;
}

.ic-product-feature__media {
  position: relative;
}

.ic-product-feature__img {
  margin: 0;
}

.ic-product-feature__img img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--ic-off-black);
  transition: transform var(--ic-dur) var(--ic-ease);
}

.ic-product-feature__img a:hover img {
  transform: scale(1.01);
}

.ic-product-feature__copy {
  padding-inline: var(--ic-gap-s);
}

.ic-product-feature__copy h2 {
  margin: 0 0 var(--ic-gap-m) !important;
}

.ic-product-feature__copy p {
  margin: 0 0 var(--ic-gap-m) !important;
}

.ic-product-feature__meta {
  display: flex !important;
  gap: var(--ic-gap-m) !important;
  flex-wrap: wrap;
  margin-bottom: var(--ic-gap-l) !important;
  padding-top: var(--ic-gap-s);
  border-top: 1px solid var(--ic-asphalt-2);
}

.ic-product-feature__meta p {
  margin: 0 !important;
  color: var(--ic-silver) !important;
}

.ic-product-feature__cta {
  margin: 0 !important;
}

.ic-product-feature__cta-link {
  font-family: var(--ic-font-headline);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-bone-bright) !important;
  border-bottom: 1px solid var(--ic-bone-bright);
  padding-bottom: 4px;
  display: inline-block;
  transition: color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-product-feature__cta-link:hover {
  color: var(--ic-accent) !important;
  border-bottom-color: var(--ic-accent);
}

@media (max-width: 900px) {
  .ic-product-feature {
    padding: var(--ic-gap-l) var(--ic-gutter) !important;
  }
  .ic-product-feature__row {
    flex-direction: column !important;
  }
  .ic-product-feature__media,
  .ic-product-feature__copy {
    flex-basis: auto !important;
    width: 100% !important;
    padding: 0;
  }
}

/* ============================================================
   11.55  SECTION HEAD - shared eyebrow + title + see-all link
   Used by ic-section--events-preview, ic-section--roster-preview.
   Eyebrow/title hug the left, "see all" inline mono link to right.
   ============================================================ */

.ic-section {
  width: 100%;
  margin-inline: auto;
}

.ic-section__head {
  align-items: flex-end !important;
  gap: var(--ic-gap-m) !important;
  border-bottom: 1px solid var(--ic-asphalt);
  padding-bottom: var(--ic-gap-s);
  margin-bottom: 0;
}

.ic-section__title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ic-section__title > * {
  margin: 0 !important;
}

.ic-section__seeall {
  margin: 0 !important;
  color: var(--ic-silver);
}

.ic-section__seeall a {
  color: var(--ic-silver) !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-section__seeall a:hover {
  color: var(--ic-bone-bright) !important;
  border-bottom-color: var(--ic-bone-bright);
}

@media (max-width: 640px) {
  .ic-section__head {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .ic-section__seeall {
    align-self: flex-start;
  }
}

/* Hero position eyebrow (Hamburg Based Techno Collective). Sits above
 * the italic "Trust the noise" claim, mono, all caps, dim silver. */
.ic-hero__position {
  margin-bottom: var(--ic-gap-s) !important;
}

/* ============================================================
   11.6  EVENTS / NIGHTS TEASER - Xceed-ready slot
   ============================================================ */

.ic-events {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: var(--ic-gap-l) 0 !important;
  background: var(--ic-off-black);
}

.ic-events__inner {
  max-width: var(--ic-w-wide);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ic-page-pad);
  text-align: center;
}

.ic-events__inner > :where(:not(.alignleft):not(.alignright)) {
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ic-events__eyebrow {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin: 0 0 var(--ic-gap-s) !important;
}

.ic-events__title {
  font-family: var(--ic-font-headline);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--ic-bone-bright);
  margin: 0 0 var(--ic-gap-s);
  letter-spacing: -0.01em;
}

.ic-events__sub {
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-small);
  color: var(--ic-bone);
  margin: 0 0 var(--ic-gap-m);
}

.ic-events__cta {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
  border-bottom: 1px solid var(--ic-bone-bright);
  padding-bottom: 4px;
}
.ic-events__cta:hover {
  color: var(--ic-accent);
  border-bottom-color: var(--ic-accent);
}

/* ------------------------------------------------------------
   /tickets/ page - Xceed-fed events grid (server-side rendered)
   ------------------------------------------------------------ */

.ic-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ic-gap-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Feature grid - upcoming events, one card per row, prominent */
.ic-events-grid--feature {
  grid-template-columns: 1fr;
  gap: var(--ic-gap-l);
}

/* Feature card layout - two-col: visual block left, info right.
 * Visual is either an editorial date display (no image) or a real cover
 * image (manual events with featured image). Text/title never overlays
 * the image, so cover graphics with their own text remain readable.
 *
 * Specificity note: compound selector (.ic-event-card.ic-event-card--feature)
 * is required to override .ic-event-card's `display: flex` which lives later
 * in this stylesheet. */
.ic-event-card.ic-event-card--feature {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ic-off-black);
  border: 1px solid var(--ic-asphalt);
  transition: border-color var(--ic-dur-med) var(--ic-ease);
}

.ic-event-card.ic-event-card--feature:hover {
  border-color: var(--ic-asphalt-2);
  transform: none;
}

/* Left visual block - either image or date display */
.ic-event-card__visual {
  position: relative;
  background: var(--ic-asphalt);
  min-height: 240px;
  overflow: hidden;
}

.ic-event-card__visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
  transition: filter var(--ic-dur-med) var(--ic-ease);
}

.ic-event-card--feature:hover .ic-event-card__visual-img {
  filter: saturate(1) contrast(1.08);
}

/* Editorial date display - shows when no cover image. Functions as the
 * visual anchor: weekday + time on top, big day + month centerpiece,
 * year as quiet footer. All in brand typography. */
.ic-event-card__date-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--ic-gap-m);
  background: linear-gradient(135deg, var(--ic-asphalt-2) 0%, var(--ic-asphalt) 100%);
}

.ic-event-card__date-display-weekday {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  color: var(--ic-silver);
  text-transform: uppercase;
  margin-bottom: var(--ic-gap-xs);
}

.ic-event-card__date-display-daymonth {
  font-family: var(--ic-font-headline);
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 0.95;
  color: var(--ic-bone-bright);
  letter-spacing: -0.02em;
}

.ic-event-card__date-display-year {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.2em;
  color: var(--ic-silver);
  margin-top: var(--ic-gap-xs);
}

/* Right info block - title + meta + lineup + cta */
.ic-event-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--ic-gap-s);
  padding: var(--ic-gap-l) var(--ic-gap-m);
  justify-content: center;
}

.ic-event-card--feature .ic-event-card__date {
  margin: 0;
}

.ic-event-card--feature .ic-event-card__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  margin: 0;
}

.ic-event-card--feature .ic-event-card__meta {
  margin: 0;
  font-size: 0.95rem;
}

.ic-event-card--feature .ic-event-card__lineup {
  margin: 0;
}

.ic-event-card--feature .ic-event-card__cta {
  margin-top: var(--ic-gap-xs);
}

/* Mobile - stack visual + info vertically */
@media (max-width: 720px) {
  .ic-event-card--feature {
    grid-template-columns: 1fr;
  }
  .ic-event-card__visual {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .ic-event-card__date-display {
    padding: var(--ic-gap-s) var(--ic-gap-m);
  }
}

.ic-event-card {
  background: var(--ic-off-black);
  border: 1px solid var(--ic-asphalt);
  padding: var(--ic-gap-s);
  display: flex;
  flex-direction: column;
  gap: var(--ic-gap-xs);
  transition: border-color var(--ic-dur-med) var(--ic-ease),
              transform var(--ic-dur-med) var(--ic-ease);
}

.ic-event-card:hover {
  border-color: var(--ic-asphalt-2);
  transform: translateY(-2px);
}

.ic-event-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ic-asphalt);
  margin: calc(-1 * var(--ic-gap-s)) calc(-1 * var(--ic-gap-s)) 0;
}

.ic-event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.05);
  transition: filter var(--ic-dur-med) var(--ic-ease);
}

.ic-event-card:hover .ic-event-card__image img {
  filter: saturate(1) contrast(1.1);
}

.ic-event-card__date {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin: var(--ic-gap-s) 0 0;
}

.ic-event-card__title {
  font-family: var(--ic-font-headline);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ic-bone-bright);
  letter-spacing: -0.01em;
  margin: 0;
}

.ic-event-card__meta {
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-small);
  color: var(--ic-bone);
  margin: 0;
}

.ic-event-card__lineup {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.12em;
  color: var(--ic-silver);
  margin: 0;
  line-height: 1.4;
}

.ic-event-card__cta {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--ic-bone);
  color: var(--ic-bone-bright);
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-event-card__cta:hover {
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  border-color: var(--ic-bone-bright);
}

.ic-event-card[data-past="true"] {
  opacity: 0.5;
  transition: opacity var(--ic-dur-med) var(--ic-ease);
}

.ic-event-card[data-past="true"]:hover {
  opacity: 0.85;
  transform: translateY(0);
  border-color: var(--ic-asphalt);
}

/* Empty state - no upcoming nights */
.ic-events-empty {
  text-align: center;
  padding: var(--ic-gap-xl) var(--ic-gap-m);
  border: 1px dashed var(--ic-asphalt-2);
  background: var(--ic-off-black);
}

.ic-events-empty p {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin: 0;
}

.ic-events-empty__sub {
  margin-top: var(--ic-gap-xs) !important;
  color: var(--ic-fog) !important;
  letter-spacing: 0.12em !important;
}

/* Past archive section */
.ic-events-archive {
  margin-top: var(--ic-gap-xl);
  padding-top: var(--ic-gap-l);
  border-top: 1px solid var(--ic-asphalt);
}

.ic-events-archive__title {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-fog);
  margin: 0 0 var(--ic-gap-m);
}

/* Events page wrapper - background + spacing harmony */
.ic-events-page {
  min-height: 60vh;
}

.ic-events-page__intro {
  margin-bottom: var(--ic-gap-l);
}

/* Slim inline note - replaces the bulky framed empty-state box.
 * Used when no upcoming events exist but past archive is present,
 * so visual focus stays on the actual content (past nights). */
.ic-events-inline-note {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-fog);
  text-align: center;
  margin: var(--ic-gap-m) 0;
  padding: var(--ic-gap-s) 0;
  border-top: 1px solid var(--ic-asphalt);
  border-bottom: 1px solid var(--ic-asphalt);
}

@media (max-width: 720px) {
  .ic-events-grid {
    grid-template-columns: 1fr;
    gap: var(--ic-gap-s);
  }
  .ic-event-card__title {
    font-size: 1.15rem;
  }
}

/* Homepage events grid (3-up cards + "Alle Events ansehen" button).
   The .ic-section--events-strip wrapper supplies full-bleed bg + centering;
   here we lay the upcoming cards out as a clean 3-column grid (collapsing to
   2 then 1) and add the see-all button below. Compound selectors
   (.ic-events-home .ic-events-grid--home) win over the auto-fill base. */
.ic-events-home {
  display: flex;
  flex-direction: column;
  gap: var(--ic-gap-m);
}
.ic-events-home > .ic-eyebrow { margin: 0; }
.ic-events-home .ic-events-grid--home {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ic-events-home__empty {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin: 0;
}
.ic-events-home__seeall {
  align-self: flex-start;
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--ic-bone);
  color: var(--ic-bone-bright);
  text-decoration: none;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}
.ic-events-home__seeall:hover {
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  border-color: var(--ic-bone-bright);
}
@media (max-width: 900px) {
  .ic-events-home .ic-events-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ic-events-home .ic-events-grid--home { grid-template-columns: 1fr; }
}

/* ============================================================
   11.7  HOMEPAGE HIERARCHY - Drop centerpiece + utility strips
   Fashion-brand weighting: the shirt is the visual anchor,
   events + roster sit as compact bands above and below.
   ============================================================ */

/* Shared: home patterns escape the constrained layout */
.ic-section--drop,
.ic-section--events-strip,
.ic-section--roster-strip {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ----- 11.7.1  DROP centerpiece (IC Justizia editorial) ----- */

.ic-section--drop {
  background: var(--ic-black) !important;
  padding: var(--ic-gap-xl) var(--ic-page-pad) !important;
}

/* Bypass WP constrained-layout child cap, then re-center via inner */
.ic-section--drop > :where(:not(.alignleft):not(.alignright)) {
  max-width: var(--ic-w-wide);
  width: 100%;
  margin-inline: auto;
}

.ic-drop__row {
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: center;
}

.ic-drop__media {
  position: relative;
}

.ic-drop__img {
  margin: 0;
}

.ic-drop__img img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--ic-off-black);
  transition: transform var(--ic-dur-slow) var(--ic-ease);
}

.ic-drop__img a:hover img {
  transform: scale(1.015);
}

.ic-drop__copy {
  padding-inline: var(--ic-gap-s);
}

.ic-drop__copy > * {
  margin: 0 0 var(--ic-gap-m) !important;
}

.ic-drop__copy > *:last-child {
  margin-bottom: 0 !important;
}

.ic-drop__badge {
  color: var(--ic-accent) !important;
  margin-bottom: var(--ic-gap-s) !important;
}

.ic-drop__name {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: var(--ic-gap-s) !important;
}

.ic-drop__tagline {
  font-style: italic;
  color: var(--ic-silver) !important;
  margin-bottom: var(--ic-gap-m) !important;
}

.ic-drop__copy-text {
  color: var(--ic-bone) !important;
}

.ic-drop__meta {
  display: flex !important;
  gap: var(--ic-gap-m) !important;
  flex-wrap: wrap;
  padding-top: var(--ic-gap-s);
  border-top: 1px solid var(--ic-asphalt-2);
  margin-bottom: var(--ic-gap-l) !important;
}

.ic-drop__meta p {
  margin: 0 !important;
}

.ic-drop__cta {
  margin: 0 !important;
}

.ic-drop__cta-link {
  font-family: var(--ic-font-headline);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-bone-bright) !important;
  border-bottom: 1px solid var(--ic-bone-bright);
  padding-bottom: 6px;
  display: inline-block;
  transition: color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-drop__cta-link:hover {
  color: var(--ic-accent) !important;
  border-bottom-color: var(--ic-accent);
}

@media (max-width: 900px) {
  .ic-section--drop {
    padding: var(--ic-gap-l) var(--ic-gutter) !important;
  }
  .ic-drop__row {
    flex-direction: column !important;
  }
  .ic-drop__media,
  .ic-drop__copy {
    flex-basis: auto !important;
    width: 100% !important;
    padding: 0;
  }
  .ic-drop__name {
    font-size: clamp(2.4rem, 9vw, 3.6rem) !important;
  }
}

/* ----- 11.7.2  EVENTS strip (tour-plan band) ----- */

.ic-section--events-strip {
  background: var(--ic-black) !important;
  padding: var(--ic-gap-l) var(--ic-page-pad) !important;
}

.ic-section--events-strip > :where(:not(.alignleft):not(.alignright)) {
  max-width: var(--ic-w-wide);
  width: 100%;
  margin-inline: auto;
}

.ic-events-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ic-events-strip__label {
  color: var(--ic-silver);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  flex-shrink: 0;
}

.ic-events-strip__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  flex: 1;
}

.ic-events-strip__item {
  margin: 0 !important;
  padding: 0 !important;
}

.ic-events-strip__item a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  color: var(--ic-bone-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-events-strip__item a:hover {
  border-bottom-color: var(--ic-bone-bright);
}

.ic-events-strip__sep {
  color: var(--ic-fog);
  margin: 0 0.25em;
}

.ic-events-strip__date {
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-headline);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ic-events-strip__venue {
  color: var(--ic-bone);
}

.ic-events-strip__city {
  color: var(--ic-silver);
}

.ic-events-strip__empty {
  margin: 0;
  color: var(--ic-silver);
  flex: 1;
  font-size: var(--ic-fs-small);
  letter-spacing: 0.16em;
  text-transform: none;
  font-style: italic;
}

.ic-events-strip__seeall {
  color: var(--ic-silver);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-decoration: none;
  flex-shrink: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-events-strip__seeall:hover {
  color: var(--ic-bone-bright);
  border-bottom-color: var(--ic-bone-bright);
}

@media (max-width: 720px) {
  .ic-section--events-strip {
    padding: var(--ic-gap-m) var(--ic-gutter) !important;
  }
  .ic-events-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ic-gap-s);
  }
  .ic-events-strip__list {
    flex-direction: column;
    gap: var(--ic-gap-xs);
  }
  .ic-events-strip__date {
    font-size: 1.1rem;
  }
}

/* ----- 11.7.3  ROSTER credit-strip (starring credits) ----- */

.ic-section--roster-strip {
  background: var(--ic-black) !important;
  padding: var(--ic-gap-l) var(--ic-page-pad) !important;
}

.ic-section--roster-strip > :where(:not(.alignleft):not(.alignright)) {
  max-width: var(--ic-w-wide);
  width: 100%;
  margin-inline: auto;
}

.ic-roster-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.ic-roster-strip__label {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
  flex-shrink: 0;
}

.ic-roster-strip__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  flex: 1;
}

.ic-roster-strip__item {
  margin: 0 !important;
  padding: 0 !important;
}

.ic-roster-strip__item a {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  color: var(--ic-bone-bright);
  text-decoration: none;
  font-family: var(--ic-font-headline);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  transition: opacity var(--ic-dur-fast) var(--ic-ease);
}

.ic-roster-strip__item:hover a {
  opacity: 0.75;
}

.ic-roster-strip__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ic-off-black);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--ic-asphalt-2);
}

.ic-roster-strip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ic-roster-strip__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ic-font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--ic-silver);
}

.ic-roster-strip__item[data-role="founder"] .ic-roster-strip__avatar {
  border-color: var(--ic-accent);
}

.ic-roster-strip__name {
  white-space: nowrap;
}

.ic-roster-strip__seeall {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-silver);
  text-decoration: none;
  flex-shrink: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-roster-strip__seeall:hover {
  color: var(--ic-bone-bright);
  border-bottom-color: var(--ic-bone-bright);
}

@media (max-width: 720px) {
  .ic-section--roster-strip {
    padding: var(--ic-gap-m) var(--ic-gutter) !important;
  }
  .ic-roster-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ic-gap-s);
  }
  .ic-roster-strip__list {
    width: 100%;
    gap: var(--ic-gap-s);
  }
  .ic-roster-strip__avatar {
    width: 48px;
    height: 48px;
  }
  .ic-roster-strip__item a {
    font-size: 1.05rem;
  }
}

/* ============================================================
   12.5  PAGE STRUCTURE - hide page headers + Woo grid + breadcrumbs
   ============================================================ */

/* Kill "Home" / "Shop" page titles + breadcrumb wrappers globally on home, shop, archives */
.home .entry-header,
.home .ct-page-title-container,
.page-template-default .entry-header,
.archive .entry-header,
.archive .ct-page-title-container,
.post-type-archive-product .entry-header,
.post-type-archive-product .ct-page-title-container,
.woocommerce-shop .entry-header,
.woocommerce-shop .ct-page-title-container,
.woocommerce-shop .page-title-wrap,
.woocommerce-shop .woocommerce-products-header,
.woocommerce .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb,
.single-product .entry-header > .ct-breadcrumbs,
.ct-breadcrumbs {
  display: none !important;
}

/* ============================================================
   HOME - Full-bleed escape: Blocksy wraps content in
   .ct-container-full > article > .hero-section.is-width-constrained
       > .entry-header (page-title)
       > .entry-content.is-layout-constrained
   Each layer constrains width via --theme-block-max-width.
   WP's .is-layout-constrained > * caps children at content-size.
   We strip ALL of that on the home page so patterns can go 100vw.
   ============================================================ */

.home .ct-main-container,
.home #main,
.home .ct-container,
.home .ct-container-full,
.home .ct-container-narrow,
.home article.post,
.home .hero-section,
.home .hero-section.is-width-constrained,
.home .entry-content,
.home .entry-content.is-layout-constrained,
.home .wp-block-post-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Strip WP is-layout-constrained child-width clamp on home */
.home .entry-content > :where(:not(.alignleft):not(.alignright)),
.home .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Hide the auto-injected "Home" page-title block above the hero */
.home .entry-header,
.home .page-title-wrap,
.home .hero-section .entry-header,
.home article > .entry-header,
.home .ct-page-title-container {
  display: none !important;
}

.home .entry-content > * + * {
  margin-top: 0 !important;
}

/* Hero - runs edge-to-edge from viewport top, transparent header overlays */
.ic-hero {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: var(--ic-black) !important;
  position: relative;
  overflow: hidden;
}

.ic-hero .wp-block-cover {
  /* Aspirational 80svh, but with a px floor so short browser windows
     don't clip the headline. max-height removed - let content grow
     beyond 80svh if a user has a tiny viewport. */
  min-height: max(620px, 80svh) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: none;
}

/* Override WP's `is-position-bottom-left` so the inner-container sits at
   the bottom (golden-ratio lower-third) WITHOUT stretching to full cover
   height. Use higher specificity than .wp-block-cover.is-position-bottom-left. */
.ic-hero .wp-block-cover.is-position-bottom-left,
.ic-hero .wp-block-cover {
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

@media (max-width: 768px) {
  .ic-hero .wp-block-cover {
    min-height: max(580px, 88svh) !important;
  }
}

/* High-specificity selector - WP injects a rule with 0,4,0 specificity
   chaining .has-custom-content-position twice + .is-position-bottom-left.
   We need to win that cascade. Selector below is 0,5,0 = ic-hero +
   has-custom-content-position x2 + is-position-bottom-left + inner-container. */
.ic-hero .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container {
  /* Anchor the wrapper to the bottom of the cover so content lands in the
     LOWER third. Going via absolute positioning avoids the flex stretch
     that WP/Blocksy apply to fill the cover. */
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-width: var(--ic-w-wide) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding: 1.5rem var(--ic-page-pad) clamp(2.5rem, 6vh, 5rem) !important;
}

@media (max-width: 768px) {
  .ic-hero .wp-block-cover__inner-container {
    padding: 1rem var(--ic-page-pad) clamp(2rem, 5vh, 4rem) !important;
  }
}

/* Image background: mid-dark filter - pulls down the blue club-light cast
   but keeps the photo readable (was previously crushed to near-black). */
.ic-hero .wp-block-cover__image-background,
.ic-hero .wp-block-cover img.wp-block-cover__image-background {
  filter: brightness(0.78) contrast(1.06) saturate(0.5) !important;
}

/* Cover dim overlay - soft, so the photo stays visible at mid-tone */
.ic-hero .wp-block-cover__background {
  opacity: 0.5 !important;
  background-color: #050505 !important;
}

/* Manifest editorial pattern - center within container, dark bg */
.ic-editorial,
.wp-block-group.ic-manifest {
  background: var(--ic-black);
}

/* Patterns that inherit the home full-bleed: keep them within reading width */
.home main > * + *,
.home .wp-site-blocks > * + * {
  margin-top: 0 !important;
}

/* WC shop archive: 3-col grid, generous gap */
.woocommerce ul.products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--ic-gap-m) !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
@media (max-width: 900px) {
  .woocommerce ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  .woocommerce ul.products,
  .wc-block-grid__products {
    grid-template-columns: 1fr !important;
  }
}

/* WC shop result count + sort dropdown styling */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

.woocommerce .woocommerce-ordering select {
  background: var(--ic-black) !important;
  color: var(--ic-bone-bright) !important;
  border: 1px solid var(--ic-asphalt-2) !important;
  border-radius: 0 !important;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
}

/* PDP layout: dark gallery column + product summary panel */
.single-product .product .woocommerce-product-gallery {
  background: var(--ic-off-black);
}
.single-product .product .woocommerce-product-gallery img {
  background: var(--ic-off-black);
}

/* PDP — preserved styles from removed single-product.php template wrapper */
.single-product .product_meta > span {
  display: block;
  margin-bottom: 0.4rem;
}
.single-product .woocommerce-product-gallery__image img {
  background: var(--ic-asphalt);
}
.single-product .breadcrumb,
.single-product .woocommerce-breadcrumb {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin-bottom: var(--ic-gap-m);
}
.single-product .price del { color: var(--ic-fog); }
.single-product .price ins {
  text-decoration: none;
  color: var(--ic-bone-bright);
}

/* Product images sit against off-black, not bright stock */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img {
  background: var(--ic-off-black);
}

/* Footer copyright cleanup - strip Blocksy default credit, allow our override to breathe */
.ct-footer [data-id="copyright"] {
  font-family: var(--ic-font-mono) !important;
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-fog) !important;
  text-align: center;
}
.ct-footer [data-id="copyright"] a {
  color: var(--ic-silver) !important;
  border-bottom: none;
}

/* Coming-Soon teaser pattern - neutralize any remnant rendering as a hard kill */
.ic-coming-soon,
.wp-block-pattern.is-pattern-inner-circle-coming-soon {
  display: none !important;
}

/* ============================================================
   13. MOBILE TWEAKS
   ============================================================ */

@media (max-width: 768px) {
  .ic-hero__top,
  .ic-hero__bottom {
    flex-direction: column;
    gap: var(--ic-gap-s);
    align-items: flex-start;
  }

  .single-product .product .summary {
    padding: var(--ic-gap-s);
  }

  .woocommerce ul.products[class*="columns-"] li.product {
    width: 100%;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ============================================================
   N. MOBILE OFFCANVAS MENU - Milchglas + Single Close Button
   ============================================================
   Blocksy renders BOTH a header-trigger (hamburger that animates
   to an X via Blocksy CSS) AND a .ct-toggle-close inside the
   panel. When the panel is open they overlap visually. The
   trigger sets aria-expanded="true" while the panel is open -
   we hide the trigger in that state so only the panel's close
   button remains. The panel itself gets a frosted-glass effect:
   low-alpha dark + backdrop-filter blur so the hero/page bleeds
   through, on-brand and far less "card on top" than the default
   0.98-alpha slab. */
.ct-header-trigger[aria-expanded="true"] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

[data-header*="type-1"] #offcanvas .ct-panel-inner,
#offcanvas .ct-panel-inner {
  background-color: rgba(5, 5, 5, 0.55) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Some browsers strip backdrop-filter behind certain stacking -
   ensure the panel itself doesn't have an opaque bg on the wrapper */
#offcanvas.ct-panel { background-color: transparent !important; }

/* Style the close X to fit the dark palette (Blocksy default uses
   inherited link color which can look off). */
#offcanvas .ct-toggle-close {
  color: var(--ic-bone-bright) !important;
  opacity: 0.9;
}
#offcanvas .ct-toggle-close:hover { opacity: 1; }

/* Mobile-menu items: tighter tracking, brand mono-accent on hover */
#offcanvas .mobile-menu .ct-menu-link {
  font-family: var(--ic-font-headline) !important;
  letter-spacing: 0.04em;
}
#offcanvas .mobile-menu .ct-menu-link:hover {
  color: var(--ic-accent) !important;
}

/* ============================================================
   O. ROSTER PAGE - hero, grid, forms
   ============================================================
   Editorial-dark booking/agency page. Grid placeholders read as
   "in progress" - not "empty" - and both forms (bookings + DJ
   apply) submit to hi@ via the admin-post.php POST handler. */

.ic-eyebrow {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin: 0 0 0.75rem;
}
.ic-eyebrow--silver { color: var(--ic-fog); }

.ic-roster-hero {
  color: var(--ic-bone);
}
.ic-roster-hero h1 { margin-block: 0.5rem 1.25rem; }

/* Grid section */
.ic-roster-grid-section {
  background: var(--ic-black);
  padding: var(--ic-gap-m) var(--ic-page-pad);
  max-width: var(--ic-w-wide);
  margin-inline: auto;
  border-top: 1px solid var(--ic-asphalt);
  border-bottom: 1px solid var(--ic-asphalt);
}
.ic-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ic-gap-s);
  margin-top: var(--ic-gap-s);
}
.ic-roster-card {
  background: #0a0a0b;
  border: 1px solid var(--ic-asphalt);
  padding: var(--ic-gap-s);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color var(--ic-dur-fast) var(--ic-ease),
              transform var(--ic-dur-fast) var(--ic-ease);
}
.ic-roster-card:hover {
  border-color: var(--ic-asphalt-2);
  transform: translateY(-1px);
}
.ic-roster-card__photo {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, #111 0 50%, transparent 50% 100%) 0 0 / 12px 12px,
    #0a0a0b;
  background-blend-mode: overlay;
  border: 1px solid var(--ic-asphalt);
  margin-bottom: 0.5rem;
  position: relative;
}
.ic-roster-card__photo::after {
  content: "TBA";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.3em;
  color: var(--ic-fog);
}
.ic-roster-card__name {
  font-family: var(--ic-font-headline);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ic-bone-bright);
  margin: 0;
  letter-spacing: -0.01em;
}
.ic-roster-card__meta {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin: 0;
}
.ic-roster-card--placeholder .ic-roster-card__name { color: var(--ic-fog); }

/* Forms */
.ic-roster-form-section { color: var(--ic-bone); }
.ic-roster-form-section h2 { margin-block: 0.5rem 0.75rem; }
.ic-roster-form-section p { margin-block-end: 1.25rem; }

.ic-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ic-gap-s);
  margin-top: 1.5rem;
}
.ic-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ic-form__row--full { grid-column: 1 / -1; }
.ic-form__row > span {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-silver);
}
.ic-form input[type="text"],
.ic-form input[type="email"],
.ic-form input[type="url"],
.ic-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ic-asphalt-2);
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-body);
  font-size: 1rem;
  padding: 0.55rem 0;
  border-radius: 0;
  transition: border-color var(--ic-dur-fast) var(--ic-ease);
}
.ic-form input:focus,
.ic-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--ic-bone-bright);
}
.ic-form textarea { resize: vertical; min-height: 5rem; }

/* Select ("Du bist" on the collab form) - match the underlined input look,
   strip native chrome, draw our own silver chevron. */
.ic-form select {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--ic-asphalt-2);
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-body);
  font-size: 1rem;
  padding: 0.55rem 1.6rem 0.55rem 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239b9a93' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 0.7rem;
  transition: border-color var(--ic-dur-fast) var(--ic-ease);
}
.ic-form select:focus { outline: 0; border-bottom-color: var(--ic-bone-bright); }
.ic-form select option { background: var(--ic-off-black); color: var(--ic-bone-bright); }

.ic-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.ic-form__submit {
  grid-column: 1 / -1;
  justify-self: flex-start;
  margin-top: 1rem;
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  border: 1px solid var(--ic-bone-bright);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}
.ic-form__submit:hover {
  background: transparent;
  color: var(--ic-bone-bright);
  border-color: var(--ic-bone-bright);
}

.ic-form__legal {
  grid-column: 1 / -1;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.08em;
  color: var(--ic-fog);
  margin: 0.5rem 0 0;
}
.ic-form__legal a { color: var(--ic-silver); text-decoration: underline; }
.ic-form__legal a:hover { color: var(--ic-bone-bright); }

.ic-form-notice {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  margin: 1.25rem 0 0;
  border: 1px solid;
}
.ic-form-notice--ok  { color: var(--ic-bone-bright); border-color: var(--ic-asphalt-2); }
.ic-form-notice--err { color: #e8867a; border-color: rgba(232, 134, 122, 0.4); }

@media (max-width: 640px) {
  .ic-form { grid-template-columns: 1fr; }
}

/* ============================================================
   P. ROSTER GRID v2 - Strobe Cards + Single Artist
   ============================================================
   Layered on top of the v1 styles in section O. The v1 ::after
   "TBA" placeholder is suppressed for real cards; only the
   no-photo fallback (showing initials) keeps the dark plate.
   Effects: halftone-on-rest, full-colour-on-hover, drop-style
   numbering, BPM overlay, founder accent strip, tonight pulse.
   All animation gated by prefers-reduced-motion. */

/* Hide the legacy "TBA" placeholder when a real card is rendered. */
.ic-roster-card .ic-roster-card__photo::after { content: none; }

/* Card v2 - link wraps the whole thing, no underline shenanigans. */
.ic-roster-card { position: relative; overflow: hidden; padding: 0; }
.ic-roster-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--ic-gap-s);
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.ic-roster-card__link:hover,
.ic-roster-card__link:focus-visible { color: inherit; text-decoration: none; }
.ic-roster-card__link:focus-visible {
  outline: 2px solid var(--ic-accent-hot);
  outline-offset: -2px;
}

/* Drop-style number - top-right, mono, fog */
.ic-roster-card__number {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  color: var(--ic-fog);
  z-index: 2;
  pointer-events: none;
}

/* Photo container: replace the v1 hatched fallback, prep for img + overlays */
.ic-roster-card__photo {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--ic-asphalt);
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
  background: var(--ic-off-black);
}
.ic-roster-card__photo .ic-roster-card__img,
.ic-roster-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.18) brightness(0.82);
  transition:
    filter var(--ic-dur) var(--ic-ease),
    transform var(--ic-dur) var(--ic-ease);
}
.ic-roster-card:hover .ic-roster-card__img,
.ic-roster-card:focus-within .ic-roster-card__img {
  filter: grayscale(0) contrast(1.05) brightness(1);
  transform: scale(1.025);
}

/* No-photo fallback - show initials big and quiet */
.ic-roster-card__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ic-font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--ic-fog);
  letter-spacing: 0.04em;
  background:
    repeating-linear-gradient(135deg, #0d0d0e 0 8px, #050505 8px 16px);
}

/* BPM overlay - bottom-left of photo, fade in on hover */
.ic-roster-card__bpm {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
  background: rgba(5, 5, 5, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.5rem;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--ic-dur) var(--ic-ease),
    transform var(--ic-dur) var(--ic-ease);
  z-index: 2;
}
.ic-roster-card:hover .ic-roster-card__bpm,
.ic-roster-card:focus-within .ic-roster-card__bpm {
  opacity: 1;
  transform: translateY(0);
}

/* Role caption (small mono above the name) */
.ic-roster-card__role {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-fog);
  margin: 0;
}

/* Tonight badge - top-left, pulsing red dot */
.ic-roster-card__tonight {
  position: absolute;
  top: 0.65rem;
  left: 0.85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  background: rgba(122, 10, 10, 0.18);
  border: 1px solid rgba(163, 21, 21, 0.55);
  font-family: var(--ic-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
}
.ic-roster-card__tonight-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ic-accent-hot);
  box-shadow: 0 0 0 0 rgba(163, 21, 21, 0.7);
  animation: ic-tonight-pulse 1.8s var(--ic-ease) infinite;
}
@keyframes ic-tonight-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(163, 21, 21, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(163, 21, 21, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(163, 21, 21, 0);   }
}

/* Founder accent - subtle blood-red left strip, same card size as residents */
.ic-roster-card--founder { border-left: 2px solid var(--ic-accent); }

/* Hover border flash - subtle strobe, fades back */
.ic-roster-card {
  transition:
    border-color var(--ic-dur-fast) var(--ic-ease),
    transform    var(--ic-dur-fast) var(--ic-ease);
}
.ic-roster-card:hover {
  border-color: var(--ic-accent-hot);
  transform: translateY(-1px);
}
.ic-roster-card--founder:hover { border-left-color: var(--ic-accent-hot); }

/* Glitch slice on hover - subtle horizontal shear via ::before */
.ic-roster-card__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 40%, rgba(122, 10, 10, 0.18) 41% 43%, transparent 44% 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--ic-dur-fast) var(--ic-ease);
}
.ic-roster-card:hover .ic-roster-card__photo::before { opacity: 1; }

/* Grid: tighter min on mobile, generous gutters on desktop */
.ic-roster-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ic-gap-s);
}
@media (min-width: 1100px) { .ic-roster-grid { gap: var(--ic-gap-m); } }

/* Zwei Karten pro Reihe, solange das auto-fill oben es nicht selbst
   schafft. Einspaltig nahm eine Karte 60% der Bildschirmhoehe ein -
   man sah pro Scrollposition genau einen DJ.
   Die 680px sind gerechnet, nicht geraten: auto-fill braucht fuer zwei
   Spalten 2x260px + 1rem gap = 536px Inhaltsbreite, die erst ab ca.
   653px Viewport zusammenkommt. Ein Breakpoint bei 480px liess genau
   dazwischen ein einspaltiges Fenster offen. */
@media (max-width: 680px) {
  .ic-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kompaktere Innenmasse - nur auf echten Handybreiten, wo die Karte
   unter ~180px faellt. Auf dem Tablet bleiben die Standardmasse. */
@media (max-width: 480px) {
  .ic-roster-grid { gap: 0.6rem; }
  .ic-roster-card__link { padding: 0.6rem; gap: 0.3rem; }
  .ic-roster-card__photo { margin-bottom: 0.35rem; }
  .ic-roster-card__name { font-size: 0.95rem; }
  .ic-roster-card__number { top: 0.45rem; right: 0.55rem; }
  .ic-roster-card__tonight {
    top: 0.45rem;
    left: 0.55rem;
    padding: 0.18rem 0.4rem;
    gap: 0.3rem;
  }
}

/* Empty state (no artists published) */
.ic-roster-empty {
  padding: var(--ic-gap-m) var(--ic-page-pad);
  text-align: left;
}
.ic-roster-empty__sub {
  font-family: var(--ic-font-body);
  color: var(--ic-silver);
  margin: 0;
}

/* Reduced motion: kill movement, keep colour change */
@media (prefers-reduced-motion: reduce) {
  .ic-roster-card__img { transform: none !important; }
  .ic-roster-card__tonight-dot { animation: none !important; }
  .ic-roster-card__photo::before { display: none; }
}

/* ============================================================
   Q. SINGLE ARTIST PAGE - /artist/{slug}/
   ============================================================
   Hero (photo + meta panel), bio, mix embed, connected events,
   socials, back-link. Every section after the hero is optional. */

.ic-artist-single {
  background: var(--ic-black);
  color: var(--ic-bone);
  padding: var(--ic-gap-m) var(--ic-page-pad) var(--ic-gap-l);
  max-width: var(--ic-w-wide);
  margin-inline: auto;
}
.ic-artist-single > section + section { margin-top: var(--ic-gap-l); }

/* Hero - 2 columns desktop, stacked mobile */
.ic-artist-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--ic-gap-m);
  align-items: stretch;
}
@media (max-width: 900px) {
  .ic-artist-hero { grid-template-columns: 1fr; }
}

.ic-artist-hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ic-off-black);
  border: 1px solid var(--ic-asphalt);
}
.ic-artist-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) contrast(1.06);
}
.ic-artist-hero__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ic-font-display);
  font-size: clamp(4rem, 12vw, 9rem);
  color: var(--ic-fog);
  background: repeating-linear-gradient(135deg, #0d0d0e 0 10px, #050505 10px 20px);
}
.ic-artist-hero__tonight {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  background: rgba(5, 5, 5, 0.7);
  border: 1px solid rgba(163, 21, 21, 0.5);
  font-family: var(--ic-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-bone-bright);
  text-decoration: none;
}
.ic-artist-hero__tonight:hover {
  color: var(--ic-bone-bright);
  background: rgba(122, 10, 10, 0.25);
}

.ic-artist-hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.ic-artist-hero__name {
  font-family: var(--ic-font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ic-fs-hero);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ic-bone-bright);
  margin: 0;
}
.ic-artist-hero__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-silver);
}
.ic-artist-hero__meta li { position: relative; padding-right: 1.2rem; }
.ic-artist-hero__meta li::after {
  content: "·";
  position: absolute;
  right: 0;
  color: var(--ic-fog);
}
.ic-artist-hero__meta li:last-child { padding-right: 0; }
.ic-artist-hero__meta li:last-child::after { content: none; }

.ic-artist-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0.5rem 0 0;
}
.ic-artist-cta {
  display: inline-block;
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--ic-bone-bright);
  text-decoration: none;
  transition:
    background var(--ic-dur-fast) var(--ic-ease),
    color      var(--ic-dur-fast) var(--ic-ease);
}
.ic-artist-cta--primary {
  background: var(--ic-bone-bright);
  color: var(--ic-black);
}
.ic-artist-cta--primary:hover {
  background: transparent;
  color: var(--ic-bone-bright);
}
.ic-artist-cta--secondary {
  background: transparent;
  color: var(--ic-bone);
  border-color: var(--ic-asphalt-2);
}
.ic-artist-cta--secondary:hover {
  color: var(--ic-bone-bright);
  border-color: var(--ic-bone-bright);
}

/* Bio */
.ic-artist-bio { max-width: var(--ic-w-narrow); }
.ic-artist-bio__body {
  font-family: var(--ic-font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ic-bone);
}
.ic-artist-bio__body p { margin: 0 0 1rem; }
.ic-artist-bio__body p:last-child { margin-bottom: 0; }
.ic-artist-bio__body a { color: var(--ic-bone-bright); text-decoration: underline; }

/* Mix embed */
.ic-artist-mix { max-width: var(--ic-w-medium); }
.ic-artist-mix__player {
  border: 1px solid var(--ic-asphalt);
  background: var(--ic-off-black);
}
.ic-artist-sc-iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Connected events - reuses .ic-events-grid from xceed styles */
.ic-artist-events { max-width: var(--ic-w-wide); }
.ic-artist-events .ic-eyebrow { margin-bottom: var(--ic-gap-s); }

/* Socials */
.ic-artist-socials__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--ic-gap-xs);
}
.ic-artist-social {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--ic-asphalt-2);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-bone);
  text-decoration: none;
  transition:
    border-color var(--ic-dur-fast) var(--ic-ease),
    color        var(--ic-dur-fast) var(--ic-ease);
}
.ic-artist-social:hover {
  border-color: var(--ic-bone-bright);
  color: var(--ic-bone-bright);
}
.ic-artist-social__icon {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-grid;
  place-items: center;
  background: var(--ic-asphalt);
  color: var(--ic-bone-bright);
  font-weight: 700;
  font-size: 0.6rem;
}

/* Per-artist booking form (single artist page). Reuses .ic-form styling. */
.ic-artist-booking {
  max-width: var(--ic-w-narrow);
  scroll-margin-top: 6rem; /* clear the fixed header on #artist-booking jumps */
}
.ic-artist-booking__title {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-h2);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ic-bone-bright);
  margin: 0.5rem 0 0.75rem;
}
.ic-artist-booking__sub {
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-body);
  line-height: var(--ic-lh-body);
  color: var(--ic-bone);
  margin: 0;
}

/* Back-link footer */
.ic-artist-back {
  padding-top: var(--ic-gap-m);
  border-top: 1px solid var(--ic-asphalt);
}
.ic-artist-back__link {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-silver);
  text-decoration: none;
}
.ic-artist-back__link:hover { color: var(--ic-bone-bright); }

/* ============================================================
   R. HEADLINE FAMILY = ITALIC BY DEFAULT (brand-wide)
   ============================================================
   "Trust the noise." sets the tone: italic Antry Sans is the
   brand voice for every claim-style heading. Mono headings
   (eyebrows, labels) keep roman - they're a different register. */

.wp-block-heading.has-headline-font-family,
h1.has-headline-font-family,
h2.has-headline-font-family,
h3.has-headline-font-family,
h4.has-headline-font-family,
h5.has-headline-font-family,
h6.has-headline-font-family {
  font-style: italic;
  font-weight: 400;
}

/* Mono-family headings explicitly stay roman (no italic mono shipped) */
.wp-block-heading.has-mono-font-family { font-style: normal; }

/* ============================================================
   S. SHOP ARCHIVE - declutter the overview
   ============================================================
   functions.php (section 3.5) strips the result count + sort
   dropdown server-side. Blocksy still emits the now-empty
   .woo-listing-top wrapper, so collapse it to avoid a gap.
   Belt-and-suspenders: also hide the elements directly in case
   another integration re-injects them. */

.woo-listing-top {
  display: none;
}

.woocommerce-result-count,
.woocommerce-ordering {
  display: none !important;
}

/* Footer legal price notice (§19 + Endpreise zzgl. Versandkosten).
   Sits under the brand copyright in Blocksy's ct-footer. Muted,
   normal-case for readability, sprechender Link inherits colour. */
.ic-footer-legal {
  display: block;
  margin-top: 0.7em;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #6f6e68;
}
.ic-footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ic-footer-legal a:hover { color: var(--ic-bone-bright, #ebe7df); }

/* ============================================================
   T. SINGLE EVENT — per-night landing page (single-ic_event.php)
   ============================================================
   Hosts the Xceed-checkout iframe + tracking-ready hero CTA.
   Layout mirrors .ic-artist-single's section rhythm so the rest
   of the site reads as one design language. */

.ic-event-single {
  background: var(--ic-black);
  color: var(--ic-bone);
}

/* ---- Hero ------------------------------------------------------ */
.ic-event-hero {
  position: relative;
  min-height: clamp(260px, 40vh, 420px);
  display: grid;
  place-items: center;
  padding: var(--ic-gap-m, 3rem) var(--ic-page-pad, 1.5rem);
  background-color: var(--ic-asphalt);
  background-image: var(--ic-event-hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.ic-event-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.35) 0%, rgba(5,5,5,0.75) 100%);
  z-index: 0;
}
.ic-event-hero__overlay {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ic-event-hero__date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0 auto 1.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ic-bone-bright);
  font-family: var(--ic-font-mono);
  color: var(--ic-bone-bright);
  letter-spacing: 0.18em;
}
.ic-event-hero__date-weekday { font-size: var(--ic-fs-micro); }
.ic-event-hero__date-daymonth {
  font-family: var(--ic-font-headline);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.08em;
  line-height: 1;
}
.ic-event-hero__date-time { font-size: var(--ic-fs-micro); }

.ic-event-hero__title {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-h1);
  line-height: var(--ic-lh-tight);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  color: var(--ic-bone-bright);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.ic-event-hero__meta {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-bone);
  margin: 0 0 2rem;
}
.ic-event-hero__sep { opacity: 0.5; margin: 0 0.5rem; }

.ic-event-hero__cta {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  background: var(--ic-accent);
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ic-accent);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.ic-event-hero__cta:hover {
  background: var(--ic-accent-hot);
  transform: translateY(-1px);
}
.ic-event-hero__cta--past {
  background: transparent;
  border-color: var(--ic-fog);
  color: var(--ic-silver);
  cursor: not-allowed;
}

/* ---- About / Lineup ------------------------------------------ */
.ic-event-about,
.ic-event-lineup,
.ic-event-recap {
  max-width: var(--ic-w-prose, 720px);
  margin: 0 auto;
  padding: var(--ic-gap-m, 3rem) var(--ic-page-pad, 1.5rem);
}
.ic-event-about__body {
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-body);
  line-height: 1.7;
  color: var(--ic-bone);
}
.ic-event-about__body p { margin: 0 0 1em; }

.ic-event-lineup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.ic-event-lineup__item {
  font-family: var(--ic-font-headline);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.03em;
  color: var(--ic-bone-bright);
}
.ic-event-lineup__item::after {
  content: " /";
  color: var(--ic-fog);
  margin-left: 0.5rem;
}
.ic-event-lineup__item:last-child::after { content: ""; }

/* ---- Recap (past-event variant) ------------------------------ */
.ic-event-recap { text-align: center; }
.ic-event-recap__text {
  color: var(--ic-silver);
  font-family: var(--ic-font-body);
}

/* ---- Checkout iframe ----------------------------------------- */
.ic-event-checkout {
  max-width: var(--ic-w-wide, 1200px);
  margin: 0 auto;
  padding: var(--ic-gap-m, 3rem) var(--ic-page-pad, 1.5rem);
}
.ic-event-checkout__frame {
  position: relative;
  width: 100%;
  /* Fixed min-height for the Xceed checkout flow. xceed.me's UI is
     reasonably tall — anything under 800px clips the lineup + tier list
     under "show more". Tested at 900px across viewports. */
  min-height: 900px;
  background: var(--ic-asphalt);
  border: 1px solid var(--ic-asphalt-2);
}
.ic-event-checkout__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 900px;
  border: 0;
  background: var(--ic-asphalt);
}
.ic-event-checkout__fallback {
  padding: 2rem;
  text-align: center;
  color: var(--ic-bone);
}
.ic-event-checkout__fallback a,
.ic-event-checkout__hint a {
  color: var(--ic-bone-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ic-event-checkout__hint {
  margin: 1rem 0 0;
  text-align: center;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

/* ---- Related nights ------------------------------------------ */
.ic-event-related {
  max-width: var(--ic-w-wide, 1200px);
  margin: 0 auto;
  padding: var(--ic-gap-m, 3rem) var(--ic-page-pad, 1.5rem);
}

/* ---- Back link ----------------------------------------------- */
.ic-event-back {
  text-align: center;
  padding: var(--ic-gap-m, 3rem) var(--ic-page-pad, 1.5rem) calc(var(--ic-gap-l, 4rem));
}
.ic-event-back__link {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-silver);
  text-decoration: none;
}
.ic-event-back__link:hover { color: var(--ic-bone-bright); }

/* ---- Past-event visual tweaks -------------------------------- */
.ic-event-single[data-past="true"] .ic-event-hero::before {
  background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.9) 100%);
}
.ic-event-single[data-past="true"] .ic-event-hero__title { color: var(--ic-bone); }

/* ---- Mobile -------------------------------------------------- */
@media (max-width: 640px) {
  .ic-event-hero { min-height: clamp(220px, 34vh, 360px); }
  .ic-event-checkout__frame,
  .ic-event-checkout__iframe { min-height: 1100px; }
  .ic-event-hero__cta { width: 100%; max-width: 320px; }
}

/* ============================================================
   Q. FOOTER NEWSLETTER + CHECKOUT OPT-IN
   ============================================================
   Lives on the #050505 footer; uses bone/silver brand palette.
   Form posts to admin-post.php (action=ic_newsletter), see
   inc/newsletter-brevo.php. The .ic-form-notice classes from
   section P are reused for the status banner above the form. */

.ic-newsletter {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.ic-newsletter input[type="email"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ic-asphalt-2);
  color: var(--ic-bone-bright);
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-small);
  padding: 0.55rem 0;
  border-radius: 0;
  transition: border-color var(--ic-dur-fast) var(--ic-ease);
}
.ic-newsletter input[type="email"]::placeholder { color: var(--ic-fog); }
.ic-newsletter input[type="email"]:focus {
  outline: 0;
  border-bottom-color: var(--ic-bone-bright);
}
.ic-newsletter button[type="submit"] {
  align-self: flex-start;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ic-bone-bright);
  border: 1px solid var(--ic-asphalt-2);
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease);
}
.ic-newsletter button[type="submit"]:hover {
  background: var(--ic-asphalt);
  border-color: var(--ic-bone-bright);
}
.ic-nl-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ic-fog);
}
.ic-nl-consent input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--ic-bone-bright);
  flex-shrink: 0;
}
.ic-nl-consent a {
  color: var(--ic-silver);
  text-decoration: underline;
}
.ic-nl-consent a:hover { color: var(--ic-bone-bright); }

/* Checkout newsletter opt-in: subtle weight tweak so the label
   reads as a question, not as a legal clause. Form-row colours
   inherit from Blocksy's checkout theme. */
.ic-checkout-newsletter .ic-checkout-newsletter-label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Confirmation modal: site-wide success popup when the Brevo DOI redirect
   lands on ?nl=confirmed. Same overlay aesthetic as the cart drawer (section
   8.x); rendered in wp_footer by ic_newsletter_confirm_modal(). z-index sits
   above the cart drawer (1000); the grain overlay (9999) is pointer-events:
   none so it only textures, never blocks. */
.ic-nl-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.ic-nl-modal[data-state="open"] { pointer-events: auto; }

.ic-nl-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--ic-dur) var(--ic-ease);
  cursor: pointer;
}
.ic-nl-modal[data-state="open"] .ic-nl-modal__overlay { opacity: 1; }

.ic-nl-modal__card {
  position: relative;
  width: min(440px, 100%);
  background: var(--ic-off-black);
  border: 1px solid var(--ic-asphalt-2);
  padding: 2.75rem 2rem 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--ic-dur) var(--ic-ease),
              transform var(--ic-dur) var(--ic-ease);
}
.ic-nl-modal[data-state="open"] .ic-nl-modal__card {
  opacity: 1;
  transform: none;
}

.ic-nl-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  background: none;
  border: 0;
  color: var(--ic-fog);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  transition: color var(--ic-dur-fast) var(--ic-ease);
}
.ic-nl-modal__close:hover { color: var(--ic-bone-bright); }

.ic-nl-modal__mark {
  display: inline-flex;
  margin-bottom: 1.25rem;
}

.ic-nl-modal__eyebrow {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-silver);
  margin: 0 0 0.75rem;
}

.ic-nl-modal__title {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-h2);
  line-height: var(--ic-lh-tight);
  color: var(--ic-bone-bright);
  margin: 0 0 0.85rem;
}

.ic-nl-modal__body {
  font-family: var(--ic-font-body);
  font-size: var(--ic-fs-small);
  line-height: var(--ic-lh-body);
  color: var(--ic-bone);
  margin: 0 auto 1.75rem;
  max-width: 34ch;
}

.ic-nl-modal__cta {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  border: 1px solid var(--ic-bone-bright);
  padding: 0.8rem 1.8rem;
  cursor: pointer;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease);
}
.ic-nl-modal__cta:hover {
  background: transparent;
  color: var(--ic-bone-bright);
}

body.ic-nl-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ic-nl-modal__overlay,
  .ic-nl-modal__card { transition: none; }
  .ic-nl-modal__card { transform: none; }
}

/* Rich footer band injected above Blocksy's ct-footer copyright row via the
   blocksy:footer:before action (functions.php §9.1, ic_render_footer_blocks).
   Full-width #050505 band; .ct-container aligns it with the copyright row.
   CSS grid (not the markup's inline flex-basis %s) so column gaps never make
   the 4th column wrap. Link styles scoped to nav lists so the form's consent
   link keeps its section-Q styling. */
.ic-footer-blocks {
  background: var(--ic-black);
  padding: 3.5rem 0 2.25rem;
}
.ic-footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.ic-footer-cols .wp-block-column { margin: 0; min-width: 0; }
.ic-footer-blocks h3 { margin: 0 0 1rem; }
.ic-footer-blocks ul { list-style: none; margin: 0; padding: 0; }
.ic-footer-blocks li { margin: 0.45rem 0; }
.ic-footer-blocks ul a {
  color: var(--ic-silver);
  text-decoration: none;
  transition: color var(--ic-dur-fast) var(--ic-ease);
}
.ic-footer-blocks ul a:hover { color: var(--ic-bone-bright); }
.ic-footer-legal-nav {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.16em;
  color: var(--ic-fog);
  margin: 2.75rem 0 0;
}
.ic-footer-legal-nav a {
  color: var(--ic-fog);
  text-decoration: none;
  transition: color var(--ic-dur-fast) var(--ic-ease);
}
.ic-footer-legal-nav a:hover { color: var(--ic-bone-bright); }

@media (max-width: 880px) {
  .ic-footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
}
@media (max-width: 560px) {
  .ic-footer-blocks { padding: 2.5rem 0 1.75rem; }
  .ic-footer-cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   8.67  STICKY ADD-TO-CART BAR (single product, all viewports)
   ============================================================ */
/* Marek: the add-to-cart action must stay reachable without scrolling, on
   mobile AND desktop. Fixed bottom bar on single-product pages, revealed by
   ic-sticky-atc.js (IntersectionObserver on the real form.cart) whenever the
   real button scrolls out of view. The bar's button proxies the real button,
   so AJAX/POST adds, variation handling and the cart drawer keep working.
   z-index sits below the header (100) and the cart drawer (1000). */
.ic-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--ic-off-black);
  border-top: 1px solid var(--ic-asphalt-2);
  transform: translateY(100%);
  transition: transform var(--ic-dur) var(--ic-ease);
  pointer-events: none;
}

.ic-sticky-atc[data-state="shown"] {
  transform: translateY(0);
  pointer-events: auto;
}

.ic-sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: var(--ic-gap-s);
  max-width: var(--ic-w-wide);
  margin: 0 auto;
  padding: 0.75rem var(--ic-page-pad);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); /* iOS home indicator */
}

.ic-sticky-atc__info {
  display: flex;
  flex-direction: column;
  min-width: 0;            /* allow the title to truncate */
  flex: 1 1 auto;
}

.ic-sticky-atc__title {
  font-family: var(--ic-font-headline);
  font-size: var(--ic-fs-small);
  color: var(--ic-bone-bright);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-sticky-atc__price {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  color: var(--ic-silver);
}
.ic-sticky-atc__price del { opacity: 0.55; margin-right: 0.4em; }
.ic-sticky-atc__price ins { text-decoration: none; color: var(--ic-bone-bright); }

.ic-sticky-atc__btn {
  flex: 0 0 auto;
  background: var(--ic-bone-bright);
  color: var(--ic-black);
  border: 1px solid var(--ic-bone-bright);
  border-radius: 0;
  font-family: var(--ic-font-headline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  padding: 0 1.4rem;
  height: var(--ic-control-h);
  min-height: var(--ic-control-h);
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ic-dur-fast) var(--ic-ease),
              border-color var(--ic-dur-fast) var(--ic-ease),
              color var(--ic-dur-fast) var(--ic-ease);
}
.ic-sticky-atc__btn:hover {
  background: var(--ic-accent);
  border-color: var(--ic-accent);
  color: var(--ic-bone-bright);
}
.ic-sticky-atc__btn:active {
  background: var(--ic-accent-hot);
  border-color: var(--ic-accent-hot);
}

/* Brief shake when a size must be picked first (variable product). */
.ic-sticky-atc--hint .ic-sticky-atc__btn {
  animation: ic-sticky-atc-pulse 0.6s var(--ic-ease);
}
@keyframes ic-sticky-atc-pulse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

@media (max-width: 480px) {
  .ic-sticky-atc__inner { gap: var(--ic-gap-xs); }
  .ic-sticky-atc__btn { padding: 0 1.1rem; font-size: 0.8rem; letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-sticky-atc { transition: none; }
  .ic-sticky-atc--hint .ic-sticky-atc__btn { animation: none; }
}



/* ============================================================
   IC-FIX-HANGING-INDENT  2026-05-31  Checkout checkbox layout
   ------------------------------------------------------------
   Supersedes the float-based AGB rules (~L1493-1514): long label
   text slid UNDER the floated box and the required <abbr>* dropped
   onto its own line. Fix = give the row a left gutter (padding-left),
   place the checkbox into that gutter with position:absolute, keep
   the label inline so the trailing * stays at the end of the
   sentence. NO flex (flex broke Germanized inline label text into
   single-word columns - see note ~L1559-1563).
   Targets the two active checkout checkboxes: Germanized AGB +
   newsletter opt-in.
   ============================================================ */
.wc-gzd-checkbox-placeholder-legal p.form-row,
.wc-gzd-checkbox-placeholder-legal .checkbox-legal,
p.form-row.ic-checkout-newsletter,
.ic-checkout-newsletter {
  position: relative !important;
  padding-left: 1.7rem !important;
}
.wc-gzd-checkbox-placeholder-legal label,
.ic-checkout-newsletter label,
.ic-checkout-newsletter .ic-checkout-newsletter-label {
  display: inline !important;
  float: none !important;
}
.wc-gzd-checkbox-placeholder-legal input[type="checkbox"],
.ic-checkout-newsletter input[type="checkbox"] {
  position: absolute !important;
  left: 0 !important;
  top: 0.2rem !important;
  float: none !important;
  margin: 0 !important;
}
.wc-gzd-checkbox-placeholder-legal .required,
.wc-gzd-checkbox-placeholder-legal abbr.required {
  position: static !important;
  float: none !important;
  display: inline !important;
  margin-left: 0.25rem !important;
}
/* end IC-FIX-HANGING-INDENT */


/* ============================================================
   8.68  EXPRESS-PAY - product page
   ------------------------------------------------------------
   Was: six full-width stacked buttons under the CTA - Apple Pay
   and Google Pay (black), Amazon Pay (yellow), Stripe Link
   (green), PayPal (gold), SEPA (white). A rainbow block taller
   than the product copy above it.

   Now: a hairline divider, then Apple Pay | Google Pay side by
   side, and one black PayPal button underneath. Amazon Pay,
   Link and SEPA are removed server-side in
   inc/payment-buttons.php - they render inside Stripe/PayPal
   iframes and cannot be recoloured, only dropped.

   Stripe's own CSS is what forced the stack:
     #wc-stripe-express-checkout-element{display:flex;flex-wrap:wrap;gap:10px}
     #wc-stripe-express-checkout-element>div{flex:1;min-width:260px}
   The min-width:260px is the culprit.

   Two traps: the container carries an INLINE
   "margin-top:1em;clear:both;display:none". Inline beats any
   stylesheet, so margin needs !important - but `display` must
   NOT get !important, because that inline `none` is the guard
   that keeps an empty container from flashing before Stripe
   reveals it.
   ============================================================ */

.ic-express-divider {
  display: none;
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem 0 0.9rem;
  font-family: var(--ic-font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

.ic-express-divider::before,
.ic-express-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ic-asphalt-2);
}

/* Only show the divider once something has actually mounted - if both SDKs
 * fail it stays hidden instead of leaving a stray line under the CTA.
 * ic-async-slots.js is the judge here, not CSS: Stripe keeps an ~8px stub
 * iframe mounted for wallets the browser cannot offer, so neither "has a
 * child" nor "has an iframe" distinguishes a real button from a dead one.
 * The script tests iframe HEIGHT and reports via the html classes. */
html.ic-slot-xpress-ready .ic-express-divider,
html.ic-slot-paypal-ready .ic-express-divider {
  display: flex;
}

/* Collapse the express row on the product page when it holds only stubs, so
 * an unavailable wallet leaves no orphan gap above the PayPal row. */
html.ic-slot-xpress-empty .single-product #wc-stripe-express-checkout-element,
html.ic-slot-xpress-empty.single-product #wc-stripe-express-checkout-element {
  min-height: 0;
  margin: 0 !important;
}
html.ic-slot-xpress-empty #wc-stripe-express-checkout-element > div {
  min-height: 0 !important;
}

/* Apple Pay | Google Pay in one row. flex-grow keeps a single wallet
 * (Safari-only / Chrome-only visitors) full width instead of half-empty. */
.single-product #wc-stripe-express-checkout-element {
  gap: 0.5rem;
  justify-content: flex-start;
  margin-top: 0 !important;   /* beats the inline margin-top:1em */
  margin-bottom: 0.5rem;
}

.single-product #wc-stripe-express-checkout-element > div {
  min-width: 0 !important;
  flex: 1 1 calc(50% - 0.25rem) !important;
}

@media (max-width: 480px) {
  .single-product #wc-stripe-express-checkout-element > div {
    flex-basis: 100% !important;
  }
}

/* PayPal row: full width, no SDK margins. min-height is not guessed - it is
 * the style.height=44 we hand the SDK in inc/payment-buttons.php, so the slot
 * is reserved before the iframe arrives and nothing shifts. */
.single-product .ppc-button-wrapper {
  margin: 0 0 0.5rem;
  max-width: none;
}

.single-product #ppc-button-ppcp-gateway {
  min-height: var(--ic-control-h);
}


/* ============================================================
   8.69  ASYNC PAYMENT SLOTS - CLS fix (/cart/ + /checkout/)
   ------------------------------------------------------------
   Several blocks are empty in the server HTML and only filled
   after first paint, pushing everything below them down:

     #wc-stripe-express-checkout-element           Stripe wallets
     #wc-stripe-express-checkout-button-separator  "- ODER -"
     .ppcp-messages                                PayPal Pay Later
     .ppc-button-wrapper                           PayPal buttons
     .wc-stripe-upe-element                        Stripe card field

   On /checkout/ the express element is the FIRST child of
   .ct-customer-details, so its arrival moved the entire form.

   Measured end states (live, 390px and 1280px):
     Stripe wallet button   48px  (get_button_height(), NOT the
                                   44 in the plugin settings)
     wallet gap             10px
     PayPal smart button    45px + 14px per funding source
     Pay-Later banner       25px (one line)
     Stripe card field     130px (constant 336-499px wide)

   The express block's height was the one unknown: the plugin
   lets wallets wrap (min-width:260px), so it is 48px at desktop
   width, 106px at phone width, 164px with three wallets. Rather
   than guess, we make it INVARIANT - one row, nowrap, scroll on
   overflow. Then it is always exactly 48px and the reservation
   is derived, not estimated.

   ic-async-slots.js adds html.ic-slot-<key>-ready (drop the
   skeleton) and html.ic-slot-<key>-empty (release the
   reservation, so a slot that never fills leaves no hole).
   ============================================================ */

body.woocommerce-cart,
body.woocommerce-checkout {
  --ic-xpress-h:   48px;
  --ic-xpress-gap: 10px;
  --ic-pp-btn-h:   45px;
  --ic-pp-gap:     14px;
  --ic-pp-count:   2;     /* PayPal + Später Bezahlen (DE) */
  --ic-pp-h:       calc(var(--ic-pp-count) * var(--ic-pp-btn-h)
                      + (var(--ic-pp-count) - 1) * var(--ic-pp-gap));
  --ic-paylater-h: 25px;
  --ic-upe-h:      130px;
}

/* Very narrow phones wrap the Pay-Later banner onto two lines. */
@media (max-width: 359px) {
  body.woocommerce-cart,
  body.woocommerce-checkout { --ic-paylater-h: 44px; }
}

/* 1) Stripe express: one row, always exactly --ic-xpress-h */
body.woocommerce-cart #wc-stripe-express-checkout-element,
body.woocommerce-checkout #wc-stripe-express-checkout-element {
  display: flex !important;        /* overrides the inline display:none */
  flex-wrap: nowrap !important;    /* overrides the plugin's wrap */
  gap: var(--ic-xpress-gap);
  align-items: stretch;
  justify-content: flex-start;
  min-height: var(--ic-xpress-h);
  margin-top: 1rem !important;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.woocommerce-cart #wc-stripe-express-checkout-element::-webkit-scrollbar,
body.woocommerce-checkout #wc-stripe-express-checkout-element::-webkit-scrollbar {
  display: none;
}

/* Equal shares, never intrinsic width. `flex: 1 0 auto` let Apple Pay claim
 * its content width and pushed Google Pay out of the narrow cart column
 * (hidden scrollbar, so it just looked chopped off). `1 1 0` + min-width:0
 * makes every wallet exactly 1/n of the row, so the line always fits. */
body.woocommerce-cart #wc-stripe-express-checkout-element > div,
body.woocommerce-checkout #wc-stripe-express-checkout-element > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;         /* instead of the plugin's 260px */
  min-height: var(--ic-xpress-h);
}

/* Release the reservation if nothing mounted within the grace period.
 * Deliberately NOT display:none - an earlier version hid the container here
 * and permanently swallowed wallets that mounted late on a slow connection.
 * Collapsing to zero height is enough: the row takes no space while empty
 * and grows the moment Stripe fills it, which is a shift we can live with
 * because by then the customer is already reading the page. */
html.ic-slot-xpress-empty body.woocommerce-cart #wc-stripe-express-checkout-element,
html.ic-slot-xpress-empty body.woocommerce-checkout #wc-stripe-express-checkout-element {
  min-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0;
}

/* The per-wallet children carry their own reservation, so releasing only the
 * container would leave a 48px hole made of empty Stripe stubs. */
html.ic-slot-xpress-empty #wc-stripe-express-checkout-element > div {
  min-height: 0 !important;
}

/* A wallet the visitor's browser cannot offer keeps its Stripe child mounted
 * with a ~8px stub iframe inside it. `flex: 1 1 0` above would still hand
 * that stub an equal share of the row, so Chrome showed a half-width Google
 * Pay button next to an empty half where Apple Pay would have been (Safari
 * the mirror image). ic-async-slots.js tags the dead children - but only
 * once a sibling has really rendered, so a row that is still loading is
 * never touched. Collapsing them hands the whole row to the live wallet.
 *
 * The `html` prefix is load-bearing: it outranks the 50/50 product-page rule
 * in 8.68, which is `!important` at the same specificity as this one.
 *
 * This is deliberately one-way. At zero width Stripe cannot paint a button
 * into the child any more, so the two guards in the JS - a live sibling, and
 * a 6s grace on top of a wallet probe that settles in about a second - are
 * what keep it from ever swallowing a payment method. */
html #wc-stripe-express-checkout-element > div.ic-wallet-dead {
  flex: 0 0 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* 2) Separator: fixed geometry instead of a JS reveal, and on the same
 *    hairline typography as the product page. It used to appear on its own
 *    while the wallets were still 0px, leaving a stray "- ODER -". */
body.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
  display: block !important;
  height: 1.5rem;
  line-height: 1.5rem;
  margin: 1.25rem 0 !important;
  text-align: center;
  font-family: var(--ic-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

/* The separator is ours to hide - it is pure decoration, so collapsing it
 * when no wallet showed up cannot cost anyone a payment method. */
html.ic-slot-xpress-empty body.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
  display: none !important;
  margin: 0 !important;
}

/* 3) PayPal smart buttons - reserve on /cart/ only. On /checkout/ Stripe is
 *    preselected and the wrapper stays 0px; it only grows after the customer
 *    picks PayPal, which is post-input and does not count towards CLS. */
body.woocommerce-cart .ppc-button-wrapper {
  min-height: var(--ic-pp-h);
}
html.ic-slot-paypal-empty body.woocommerce-cart .ppc-button-wrapper {
  min-height: 0;
}

/* 4) Pay-Later banner */
body.woocommerce-cart .ppcp-messages,
body.woocommerce-checkout .ppcp-messages {
  min-height: var(--ic-paylater-h);
}
html.ic-slot-paylater-empty .ppcp-messages {
  min-height: 0;
}

/* 5) Stripe card field */
body.woocommerce-checkout .wc-stripe-upe-element {
  min-height: var(--ic-upe-h);
}
html.ic-slot-upe-empty body.woocommerce-checkout .wc-stripe-upe-element {
  min-height: 0;
}

/* NO skeleton / shimmer here on purpose.
 * A first version animated the reserved slots so they would read as
 * "loading". That was a mistake: when a wallet is unavailable the slot never
 * fills, and an infinitely shimmering grey box is indistinguishable from a
 * page that hangs - it turned a silent, harmless empty reservation into a
 * visible defect. Reserved space is supposed to be invisible. Leave it dark
 * and still; the whole point is that the customer never notices it. */
/* end ASYNC PAYMENT SLOTS */

/* ---------------------------------------------------------------------------
 * ARTISTS & RESIDENTS (14.08.2026)
 *
 * Zwei Bausteine: die Social-Zeile auf der Resident-Karte und die
 * Artists-Liste, die aus den Xceed-Line-ups kommt.
 *
 * Die Social-Links liegen bewusst NEBEN dem Karten-Link, nicht darin -
 * verschachtelte <a> sind ungueltiges HTML. Deshalb sitzt die Zeile
 * absolut ueber der Karte und faengt ihre eigenen Klicks ab.
 * ------------------------------------------------------------------------ */

.ic-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;
}

.ic-roster-card {
  position: relative;
}

.ic-roster-card__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.ic-roster-card__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--ic-asphalt-2);
  color: var(--ic-silver);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ic-roster-card__social:hover,
.ic-roster-card__social:focus-visible {
  color: var(--ic-bone-bright);
  border-color: var(--ic-bone-bright);
}

/* Artists-Liste */

.ic-guests {
  padding: 0 var(--ic-gap-m, 1.5rem);
  max-width: 1440px;
  margin-inline: auto;
}

.ic-guests__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--ic-gap-s, 1rem) 0 0;
  padding: 0;
  list-style: none;
}

.ic-guests__item {
  margin: 0;
}

.ic-guests__link,
.ic-guests__item > .ic-guests__name {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ic-asphalt-2);
  color: var(--ic-bone);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ic-guests__link:hover,
.ic-guests__link:focus-visible {
  color: var(--ic-bone-bright);
  border-color: var(--ic-bone-bright);
  background-color: rgba(255, 255, 255, 0.03);
}

/* Wie oft jemand bei uns gespielt hat - leise, aber es erzaehlt die Historie. */
.ic-guests__count {
  color: var(--ic-silver);
  font-size: var(--ic-fs-micro);
}

.ic-guests__note {
  margin-top: var(--ic-gap-s, 1rem);
  color: var(--ic-silver);
  font-size: var(--ic-fs-micro);
  font-family: var(--ic-font-mono);
  letter-spacing: 0.06em;
}
/* end ARTISTS & RESIDENTS */

/* ---------------------------------------------------------------------------
 * SESSIONS-BAND (14.08.2026)
 *
 * Liveset-Links auf der Startseite. Bewusst reine Textlinks: ein YouTube-
 * Embed oder auch nur das Vorschaubild von img.youtube.com waere ein
 * Drittanbieter-Request und damit ein Fall fuer Consent und Datenschutz-
 * erklaerung. Solange die ein Platzhalter ist, wird nur verlinkt.
 * ------------------------------------------------------------------------ */

.ic-sessions__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: var(--ic-gap-s, 1rem) 0 0;
  padding: 0;
  list-style: none;
}

.ic-sessions__item {
  margin: 0;
}

.ic-sessions__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--ic-asphalt-2);
  color: var(--ic-bone);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ic-sessions__link:hover,
.ic-sessions__link:focus-visible {
  color: var(--ic-bone-bright);
  border-color: var(--ic-bone-bright);
  background-color: rgba(255, 255, 255, 0.03);
}

.ic-sessions__kicker {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

.ic-sessions__name {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-small);
  letter-spacing: 0.08em;
}

.ic-sessions__cue {
  font-size: 0.7em;
  color: var(--ic-silver);
}

.ic-sessions__link:hover .ic-sessions__cue {
  color: var(--ic-bone-bright);
}

.ic-sessions__channel {
  margin-top: var(--ic-gap-s, 1rem);
}

.ic-sessions__channel a {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ic-silver);
  text-decoration: none;
  border-bottom: 1px solid var(--ic-asphalt-2);
  padding-bottom: 0.25em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ic-sessions__channel a:hover,
.ic-sessions__channel a:focus-visible {
  color: var(--ic-bone-bright);
  border-color: var(--ic-bone-bright);
}
/* end SESSIONS-BAND */

/* ---------------------------------------------------------------------------
 * KORREKTUREN 14.08.2026 (Marek)
 * ------------------------------------------------------------------------ */

/* 1. Footer klebte am linken Rand. Die Polsterung sitzt auf dem .ct-container
      im Footer-Band, NICHT auf .ic-footer-blocks: die Copyright-/Rechtszeile
      liegt im selben Container, so bleiben Logo und Rechtszeile buendig. */
.ic-footer-blocks > .ct-container {
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* 2. Social-Icons statt Buchstabenkuerzel.
      Die Glyphen erben ueber currentColor den Hover-Zustand des Links. */
.ic-social-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ic-roster-card__social {
  min-width: 2.4rem;
  padding: 0.42rem 0.55rem;
  letter-spacing: normal;
}

.ic-artist-social__icon svg {
  width: 1rem;
  height: 1rem;
}

/* 3. Die Preis-Haltung unter dem Preis der Produktseite. Leise gesetzt -
      sie soll ueberzeugen, nicht anschreien. */
.ic-creed {
  margin: 0.9rem 0 1.2rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--ic-accent, #7a0a0a);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ic-bone);
  font-size: var(--ic-fs-small);
  line-height: 1.5;
  max-width: 46ch;
}

.ic-creed strong {
  display: block;
  color: var(--ic-bone-bright);
  font-weight: 400;
  font-family: var(--ic-font-headline);
  font-style: italic;
  font-size: 1.15em;
  margin-bottom: 0.25rem;
}

/* 4. Mobilmenue: die Eintraege waren auf Telefonen kaum groesser als
      Fliesstext. Blocksy setzt die Groesse per Inline-Variable, deshalb
      !important - sonst gewinnt der Customizer-Wert. */
#offcanvas .mobile-menu .ct-menu-link {
  font-size: clamp(1.5rem, 7vw, 2.15rem) !important;
  line-height: 1.15 !important;
  padding-block: 0.5rem !important;
}

#offcanvas .mobile-menu > li {
  margin-block: 0.15rem;
}
/* end KORREKTUREN 14.08.2026 */

/* ---------------------------------------------------------------------------
 * MOBIL-KORREKTUREN 15.08.2026 (Marek, Sichtprüfung am iPhone)
 * ------------------------------------------------------------------------ */

/* 1. FOOTER: Inhalte klebten am linken Rand.
 *
 * Die Polsterung vom 14.08. blieb wirkungslos, weil Zeile ~4061 auf der
 * Startseite JEDEM .ct-container `padding: 0 !important` verpasst - damit die
 * Sektionen dort randlos laufen koennen. Diese Regel hier ist eine Stufe
 * spezifischer (.home .ic-footer-blocks > .ct-container) und gewinnt deshalb,
 * ohne den Full-Bleed der Sektionen anzufassen. */
.ic-footer-blocks > .ct-container,
.home .ic-footer-blocks > .ct-container {
  padding-inline: clamp(1.25rem, 5vw, 3.5rem) !important;
  box-sizing: border-box;
}

/* Auf dem Handy zweispaltig statt vier Bloecke untereinander: Marke und
 * Newsletter brauchen die volle Breite, Shop und Service stehen nebeneinander. */
@media (max-width: 560px) {
  .ic-footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.9rem 1.5rem;
  }
  .ic-footer-cols > .wp-block-column:nth-child(1),
  .ic-footer-cols > .wp-block-column:nth-child(4) {
    grid-column: 1 / -1;
  }
}

/* 2. + 3. ABSTAENDE MOBIL
 *
 * Die Sektionen holen ihre Polsterung aus Inline-Styles der Block-Markup
 * (var:preset|spacing|50). Inline schlaegt Stylesheet, deshalb !important -
 * anders ist das ohne Umbau jedes Patterns nicht zu erreichen. */
@media (max-width: 780px) {

  /* Kopfbereich -> erstes Element: der Abstand war fuer einen Handy-Viewport
     fast eine halbe Bildschirmhoehe. */
  .ic-roster-hero,
  .entry-content > section:first-child {
    padding-top: 1.9rem !important;
  }

  .ic-hero {
    padding-top: 1rem;
    min-height: 78svh;
  }

  /* Element-Name -> Headline. Die Eyebrow-Zeile sitzt jetzt dichter an der
     Ueberschrift, damit beide als eine Einheit lesen. */
  .ic-eyebrow,
  .ic-hero__position {
    margin-bottom: 0.3rem !important;
  }

  .ic-eyebrow + .wp-block-heading,
  .ic-hero__position + .wp-block-heading,
  .ic-eyebrow + h1,
  .ic-eyebrow + h2 {
    margin-top: 0 !important;
  }

  .ic-roster-hero h1 {
    margin-block: 0.1rem 0.9rem;
  }
}

/* 4. TRENNLINIEN zwischen den Startseiten-Elementen.
 *
 * Ueber den Geschwister-Selektor, damit die erste Sektion (Hero) keine
 * Linie ueber sich bekommt. Wo eine Sektion bereits eine Inline-Border
 * mitbringt (Sessions-Band), ist der Wert identisch - keine Dopplung. */
.home .entry-content > section + section {
  border-top: 1px solid var(--ic-asphalt-2);
}
/* end MOBIL-KORREKTUREN 15.08.2026 */

/* ---------------------------------------------------------------------------
 * NACHBESSERUNGEN 16.08.2026 - alle drei Werte am lokalen Spiegel gemessen,
 * nicht geschaetzt (Staging liegt hinter Basic-Auth, deshalb Spiegel).
 * ------------------------------------------------------------------------ */

/* 1. HEADER -> HERO: der Abstand kam nicht vom Hero.
 *
 * Gemessene Kette auf 390px Breite, Unterseiten:
 *   70px   #main          - Freiraum fuer den FIXEN Header (Child-Theme)
 *   50px   .ct-container-full - Blocksy-Grundpolsterung
 *   30px   .ic-roster-hero    - meine Regel vom 15.08.
 *   = Text begann bei y=190
 *
 * Die 70px muessen bleiben, sonst rutscht der Inhalt unter den fixen Header.
 * Die 50px Blocksy-Polsterung sind auf dem Handy reine Dekoration und fliegen
 * raus; die Hero-Polsterung geht von 1.9rem auf 1.25rem.
 *   -> Text beginnt jetzt bei y=130, also 60px hoeher. Gemessen, nicht geraten. */
@media (max-width: 780px) {
  body:not(.home) .ct-container-full {
    padding-top: 0 !important;
  }
  .ic-roster-hero,
  .entry-content > section:first-child {
    padding-top: 1.25rem !important;
  }
}

/* 2. DOPPELTE TRENNLINIEN auf der Startseite.
 *
 * events-strip und roster-strip bringen aus ihrer Block-Markup INLINE je eine
 * obere UND eine untere Linie mit. An zwei Grenzen trafen dadurch zwei
 * Hairlines aufeinander (24px Abstand, klar sichtbar):
 *   events-strip unten + roster-strip oben
 *   roster-strip unten + sessions oben
 *
 * Statt die Patterns umzubauen wird hier die Regel vereinheitlicht: keine
 * unteren Linien, eine obere Linie je Uebergang. `!important` ist noetig,
 * weil die Borders inline stehen - eine !important-Regel im Stylesheet
 * schlaegt einen einfachen Inline-Wert. Nebeneffekt: alle Linien haben
 * jetzt dieselbe Farbe (vorher #1a1a1b vs. --ic-asphalt-2). */
.home .entry-content > section {
  border-bottom: 0 !important;
}
.home .entry-content > section + section {
  border-top: 1px solid var(--ic-asphalt-2) !important;
}

/* 3. NEWSLETTER im Footer als Kasten, analog zu den Event-Karten
 *    (gemessen: background #0d0d0e, 1px solid #1a1a1b, 16px Innenabstand). */
.ic-footer-col-newsletter {
  background: var(--ic-off-black, #0d0d0e);
  border: 1px solid var(--ic-asphalt-2);
  padding: clamp(1rem, 3.5vw, 1.4rem);
  align-self: start;
}

/* Der Absenden-Knopf war ein transparenter Rahmen zwischen lauter
   transparenten Rahmen. Als einzige farbige Flaeche im Footer ist er
   eindeutig die Hauptaktion. */
.ic-footer-col-newsletter .ic-newsletter button,
.ic-footer-col-newsletter .ic-newsletter [type="submit"] {
  background: var(--ic-accent) !important;
  border-color: var(--ic-accent) !important;
  color: var(--ic-bone-bright) !important;
}
.ic-footer-col-newsletter .ic-newsletter button:hover,
.ic-footer-col-newsletter .ic-newsletter [type="submit"]:hover {
  background: var(--ic-accent-hot, var(--ic-accent)) !important;
  border-color: var(--ic-accent-hot, var(--ic-accent)) !important;
}
/* end NACHBESSERUNGEN 16.08.2026 */

/* ---------------------------------------------------------------------------
 * EVENT-FEATURE-KARTE, MOBIL ZERSCHOSSEN (gefunden + gemessen 16.08.2026)
 *
 * Die Mobil-Regel gab es laengst:
 *     @media (max-width:720px){ .ic-event-card--feature { grid-template-columns:1fr } }
 * Sie hat nur nie gegriffen. Die Basisregel heisst
 *     .ic-event-card.ic-event-card--feature { grid-template-columns: minmax(0,320px) minmax(0,1fr) }
 * also ZWEI Klassen gegen eine - und Media Queries erhoehen die Spezifitaet
 * nicht. Folge bei 390px Breite: Spalte 1 nahm 309px, Spalte 2 blieb bei 0px.
 * Der Textteil wurde auf 64px Breite gequetscht, die Karte 1923px hoch.
 *
 * Gemessen nach dem Fix: Karte 311x516, Textspalte 309px breit.
 *
 * Kein !important noetig - gleiche Spezifitaet, aber spaeter in der Datei.
 * ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  .ic-event-card.ic-event-card--feature {
    grid-template-columns: 1fr;
  }
}
/* end EVENT-FEATURE-KARTE */

/* ---------------------------------------------------------------------------
 * XCEED-CHECKOUT MOBIL KUERZEN (16.08.2026)
 *
 * Gemessen an der echten Xceed-Seite bei 390px Breite:
 *   Gesamthoehe der Seite      3454 px
 *   "Tickets ab 13,99 EUR"     bei y = 784
 *   darueber: Xceed-Kopfzeile, grosses Coverbild, Genre-Tags
 *   zusaetzlich: Xceed blendet im iframe SEIN EIGENES Cookie-Banner ein
 *
 * Die bisherigen 1100px auf dem Handy haben daran nichts verbessert - die
 * Fremdseite scrollt intern ohnehin, der Rahmen war nur ein sehr langes
 * Loch in der Seite. 620px zeigen Kopf und Einstieg, der Rest bleibt
 * scrollbar. Wichtiger als der Rahmen ist auf dem Handy der Ausweg:
 * der Direktlink wird deshalb zum vollbreiten Knopf.
 * ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  .ic-event-checkout__frame,
  .ic-event-checkout__iframe {
    min-height: 620px;
  }

  .ic-event-checkout {
    padding-inline: var(--ic-page-pad, 1.25rem);
  }

  /* Aus dem Beisatz wird die Hauptaktion. */
  .ic-event-checkout__hint {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    text-align: center;
  }

  .ic-event-checkout__hint a {
    display: block;
    padding: 0.95rem 1.2rem;
    border: 1px solid var(--ic-bone-bright);
    color: var(--ic-bone-bright);
    font-family: var(--ic-font-mono);
    font-size: var(--ic-fs-small);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .ic-event-checkout__hint a:hover,
  .ic-event-checkout__hint a:focus-visible {
    background: var(--ic-bone-bright);
    color: var(--ic-black);
  }
}
/* end XCEED-CHECKOUT MOBIL */

/* ---------------------------------------------------------------------------
 * EVENTBILDER DURCHGEHEND 1:1 (16.08.2026)
 *
 * Vorher: Feature-Karte 16/10 (mobil) bzw. freie Hoehe (Desktop), normale
 * Karte 4/3. Xceed liefert die Cover teils quadratisch (DØPAIR 2000x2000),
 * teils im Querformat - in einem 16/10-Rahmen wirkte das Quadrat zu klein.
 * Ein Rahmenformat fuer alles.
 *
 * Beide Bildflaechen liegen frueher in der Datei, gleiche Spezifitaet -
 * die spaetere Position hier gewinnt, kein !important noetig.
 * ------------------------------------------------------------------------ */
.ic-event-card__visual {
  aspect-ratio: 1 / 1;
  min-height: 0;
  align-self: start;
}

.ic-event-card__image {
  aspect-ratio: 1 / 1;
}

@media (max-width: 720px) {
  .ic-event-card__visual {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}
/* end EVENTBILDER 1:1 */

/* ---------------------------------------------------------------------------
 * ARTIST-PORTRAIT KLEINER (17.08.2026)
 *
 * Gemessen vorher (iframe-Sonde ueber 7 Breiten): das Portrait nahm mobil
 * ~90 % der Breite ein, bei 768px war es 722x902 px - hoeher als der
 * Bildschirm. Auf 1440px 680x850 px, also ein Plakat statt eines Portraits.
 *
 * Gedeckelt wird die SPALTE, nicht nur das Bild: ein reines max-width am
 * Foto haette rechts davon eine Luecke gelassen, weil die Gridspalte
 * weiterhin 1.05fr breit gewesen waere.
 *
 * Nachher: mobil 300x375 (44 % der Viewporthoehe), ab 1024px 380x475.
 * ------------------------------------------------------------------------ */
.ic-artist-hero {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}

.ic-artist-hero__photo {
  max-width: 380px;
  width: 100%;
}

@media (max-width: 1023px) {
  .ic-artist-hero {
    grid-template-columns: 1fr;
  }
  .ic-artist-hero__photo {
    max-width: 300px;
  }
}
/* end ARTIST-PORTRAIT */

/* ---------------------------------------------------------------------------
 * BOOKING UEBER EINE AGENTUR (17.08.2026)
 * Ersetzt auf der Artist-Seite das eigene Anfrageformular, sobald am Artist
 * eine Booking-URL hinterlegt ist.
 * ------------------------------------------------------------------------ */
.ic-artist-booking__agency {
  max-width: 60ch;
  margin: 0 0 var(--ic-gap-s, 1rem);
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--ic-accent);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ic-bone);
  font-size: var(--ic-fs-body);
  line-height: 1.55;
}

.ic-artist-booking__ctas {
  margin: 0;
}
/* end BOOKING UEBER EINE AGENTUR */

/* Agentur-Hinweis auf der Resident-Karte (17.08.2026).
   Damit ein Booker es sieht, BEVOR er das allgemeine Formular ausfuellt. */
.ic-roster-card__agency {
  margin: 0.35rem 0 0;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic-accent-hot);
}
/* end Agentur-Hinweis */

/* ---------------------------------------------------------------------------
 * AGENCY (17.08.2026)
 * Uebersicht mit Kachelraster + Leistungs-Unterseiten mit Anfrageformular.
 * ------------------------------------------------------------------------ */

.ic-agency-section {
  max-width: 100%;
}

/* Kachelraster der Leistungen */
.ic-agency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--ic-asphalt-2);
  border: 1px solid var(--ic-asphalt-2);
}

.ic-agency-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 1.35rem 1.35rem;
  background: var(--ic-off-black);
  color: var(--ic-bone);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.ic-agency-card:hover,
.ic-agency-card:focus-visible {
  background: #111112;
  color: var(--ic-bone-bright);
}

.ic-agency-card__num {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.22em;
  color: var(--ic-accent-hot);
}

.ic-agency-card__title {
  margin: 0;
  font-family: var(--ic-font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--ic-bone-bright);
}

.ic-agency-card__text {
  margin: 0;
  font-size: var(--ic-fs-small);
  line-height: 1.5;
  color: var(--ic-silver);
}

.ic-agency-card__cue {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ic-silver);
}

.ic-agency-card:hover .ic-agency-card__cue { color: var(--ic-bone-bright); }

/* "Was du bekommst"-Liste */
.ic-agency-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.ic-agency-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ic-bone);
  line-height: 1.55;
}

.ic-agency-list li::before {
  content: "/";
  position: absolute;
  left: 0;
  color: var(--ic-accent-hot);
  font-family: var(--ic-font-mono);
}

.ic-agency-list strong { color: var(--ic-bone-bright); font-weight: 400; }

/* Anfrageformular je Leistung */
.ic-agency-form {
  border-top: 1px solid var(--ic-asphalt-2);
  padding-top: var(--ic-gap-m, 2rem);
}

.ic-agency-form__title {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--ic-font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--ic-bone-bright);
}

.ic-agency-form__sub {
  margin: 0 0 var(--ic-gap-s, 1.25rem);
  max-width: 55ch;
  color: var(--ic-silver);
  font-size: var(--ic-fs-small);
  line-height: 1.55;
}

.ic-form__row em {
  font-style: normal;
  color: var(--ic-silver);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 560px) {
  .ic-agency-grid { grid-template-columns: 1fr; }
}
/* end AGENCY */

/* ---------------------------------------------------------------------------
 * AGENCY - Korrekturen nach Sichtprüfung (17.08.2026)
 * Alle Werte an /artists/ gemessen, nicht geschätzt.
 * ------------------------------------------------------------------------ */

/* 1. Abstand Eyebrow -> Headline.
 *
 * Gemessen: auf /artists/ hat die H1 `margin-top: 8px`, auf den Agency-Seiten
 * waren es 154px. Grund: der Roster-Hero hat eine eigene Regel
 * (.ic-roster-hero h1 { margin-block: .5rem 1.25rem }), meine Überschriften
 * nicht - dort greift WordPress' Block-Abstand. Gleiche Werte wie die
 * Referenz, damit beide Seiten denselben Rhythmus haben. */
.ic-agency-section h1 {
  margin-block: 0.5rem 1.25rem;
}

/* 2. Kacheln zweispaltig (vorher auto-fill, bei 1280px vier Spalten). */
.ic-agency-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3. Schriftgrößen auf die CI-Token statt auf Zufallswerte.
 *    Der Listenpunkt lag auf 16px (Browser-Default), der Fließtext der
 *    Seiten nutzt aber das fluide body-Token (15.72px bei 1280). */
.ic-agency-list li {
  font-size: var(--wp--preset--font-size--body, 1rem);
}

.ic-agency-card__title {
  font-size: var(--wp--preset--font-size--medium, 1.2rem);
}

/* 4. Auf schmalen Schirmen bleibt es einspaltig. */
@media (max-width: 720px) {
  .ic-agency-grid { grid-template-columns: 1fr; }
}
/* end AGENCY-Korrekturen */