/* =========================================================
   DataFireFly — shared stylesheet
   ========================================================= */

:root{
  /* brand */
  --amber: oklch(0.82 0.16 75);
  --amber-soft: oklch(0.9 0.12 78);
  --amber-deep: oklch(0.68 0.17 60);
  --cool: oklch(0.65 0.12 230);

  /* light mode (default) */
  --bg: oklch(0.985 0.004 85);
  --bg-2: oklch(0.96 0.006 85);
  --bg-3: oklch(0.93 0.008 85);
  --ink: oklch(0.18 0.03 265);
  --ink-2: oklch(0.32 0.02 265);
  --ink-3: oklch(0.52 0.015 265);
  --line: oklch(0.88 0.008 260);
  --card: #ffffff;
  --chip: oklch(0.94 0.008 85);
  --glow: oklch(0.82 0.16 75 / 0.18);
  --shadow: 0 1px 2px rgba(22,25,45,.05), 0 8px 24px -8px rgba(22,25,45,.08);
  --shadow-lg: 0 2px 4px rgba(22,25,45,.06), 0 24px 48px -12px rgba(22,25,45,.18);
}

[data-theme="dark"]{
  --bg: oklch(0.16 0.03 265);
  --bg-2: oklch(0.2 0.035 265);
  --bg-3: oklch(0.24 0.04 265);
  --ink: oklch(0.97 0.01 85);
  --ink-2: oklch(0.85 0.015 85);
  --ink-3: oklch(0.65 0.02 260);
  --line: oklch(0.28 0.03 265);
  --card: oklch(0.21 0.035 265);
  --chip: oklch(0.24 0.04 265);
  --glow: oklch(0.82 0.16 75 / 0.22);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s ease, color .5s ease;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
img{max-width:100%; display:block}

.df-serif{font-family:"Instrument Serif", "Times New Roman", serif; font-weight:400; letter-spacing:-.01em}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace}

/* layout */
.df-wrap{max-width:1280px; margin:0 auto; padding:0 32px}
.df-wrap-wide{max-width:1440px; margin:0 auto; padding:0 32px}

/* top announcement bar */
.df-topbar{
  background:var(--ink); color:var(--bg);
  font-size:12.5px; letter-spacing:.02em;
  padding:10px 24px; display:flex; justify-content:center; align-items:center; gap:10px;
}
.df-topbar .dot{width:6px; height:6px; border-radius:99px; background:var(--amber); box-shadow:0 0 8px var(--amber)}

/* nav */
.df-nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px);
  background:color-mix(in oklch, var(--bg) 75%, transparent);
  border-bottom:1px solid var(--line);
}
.df-nav-inner{display:flex; align-items:center; gap:24px; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-.01em}
.logo-mark{
  width:28px; height:28px; border-radius:8px; position:relative;
  background:radial-gradient(circle at 30% 30%, var(--amber-soft), var(--amber-deep) 70%);
  box-shadow:0 0 14px var(--glow), inset 0 -4px 8px rgba(0,0,0,.15);
}
.logo-mark::after{
  content:""; position:absolute; inset:6px; border-radius:6px;
  background:radial-gradient(circle at 30% 30%, #fff9, transparent 55%);
}
.df-nav-links{display:flex; gap:4px; margin-left:8px}
.df-nav-links a{
  padding:8px 12px; border-radius:8px; font-size:14px; color:var(--ink-2); font-weight:500;
  transition:background .15s, color .15s;
}
.df-nav-links a:hover{background:var(--bg-2); color:var(--ink)}
.df-nav-search{
  flex:1; max-width:420px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; color:var(--ink-3);
  transition:border-color .15s, background .15s;
}
.df-nav-search:focus-within{border-color:var(--amber); background:var(--card); color:var(--ink)}
.df-nav-search input{
  flex:1; border:0; outline:none; background:transparent; color:var(--ink);
  font:inherit; font-size:14px;
}
.df-nav-search kbd{
  font-family:inherit; font-size:11px; padding:2px 6px; border-radius:5px;
  background:var(--bg-3); border:1px solid var(--line); color:var(--ink-3);
}
.df-nav-actions{display:flex; align-items:center; gap:6px}
.df-icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:9px; color:var(--ink-2); position:relative;
  transition:background .15s, color .15s;
}
.df-icon-btn:hover{background:var(--bg-2); color:var(--ink)}
.df-cart-badge{
  position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--amber); color:#1a1506; font-size:10px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg);
}

/* buttons */
.df-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:10px; font-weight:600; font-size:14px;
  transition:transform .1s, background .15s, box-shadow .2s, color .15s;
}
.df-btn:active{transform:translateY(1px)}
.df-btn-primary{background:var(--amber); color:#1a1506; box-shadow:0 6px 20px -8px var(--amber-deep)}
.df-btn-primary:hover{background:var(--amber-soft); box-shadow:0 8px 28px -6px var(--amber-deep)}
.df-btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.df-btn-ghost:hover{background:var(--bg-2); border-color:var(--ink-3)}
.df-btn-dark{background:var(--ink); color:var(--bg)}
.df-btn-dark:hover{background:var(--ink-2)}

/* section */
section{padding:80px 0}
.df-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); display:inline-flex; align-items:center; gap:8px;
}
.df-eyebrow::before{content:""; width:22px; height:1px; background:var(--ink-3)}
h1,h2,h3{margin:0; letter-spacing:-.02em}
.df-h-xl{font-size:clamp(44px, 6vw, 88px); line-height:.98; font-weight:500}
.df-h-lg{font-size:clamp(36px, 4vw, 56px); line-height:1.04; font-weight:600}
.df-h-md{font-size:clamp(22px, 2vw, 28px); line-height:1.2; font-weight:600}
.df-lede{font-size:18px; line-height:1.55; color:var(--ink-2); max-width:60ch}

/* =========================================================
   SAFE VARIANT
   ========================================================= */

.hero-safe{
  padding:80px 0 40px; position:relative; overflow:hidden;
}
.df-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}
.hero-safe h1 em{font-style:italic; color:var(--amber-deep)}
.hero-safe h1 .df-firefly{display:inline-block; position:relative}
.hero-safe h1 .df-firefly::after{
  content:""; position:absolute; right:-14px; top:6%; width:12px; height:12px; border-radius:99px;
  background:var(--amber); box-shadow:0 0 20px var(--amber), 0 0 40px var(--amber);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.35; transform:scale(.75)}
}
.hero-bullets{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.df-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:99px; background:var(--chip);
  font-size:12.5px; color:var(--ink-2); font-weight:500;
  border:1px solid var(--line);
}
.df-chip.active{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.df-chip .k{width:6px; height:6px; border-radius:99px}
.df-hero-cta{display:flex; gap:10px; margin-top:32px; flex-wrap:wrap}
.hero-meta{margin-top:28px; display:flex; gap:28px; color:var(--ink-3); font-size:13px}
.hero-meta strong{color:var(--ink); font-weight:600}

/* hero visual (safe): module cards stacked */
.df-hero-stack{
  position:relative; aspect-ratio: 1 / 1.02; width:100%; max-width:540px; margin-left:auto;
}
.df-hero-card{
  position:absolute; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:18px; box-shadow:var(--shadow-lg);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.df-hero-card .head{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.df-hero-card .swatch{
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
}
.df-hero-card .title{font-weight:600; font-size:14px}
.df-hero-card .sub{font-size:12px; color:var(--ink-3)}
.df-hero-card .bar{height:6px; background:var(--bg-2); border-radius:99px; margin-top:10px; overflow:hidden}
.df-hero-card .bar>i{display:block; height:100%; background:var(--amber); border-radius:99px}
.df-hero-card .foot{display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12.5px}
.df-hero-card .price{font-weight:700; font-size:15px}

.df-hero-card.c1{top:0; left:0; width:62%; transform:rotate(-3deg)}
.df-hero-card.c2{top:18%; right:0; width:58%; transform:rotate(2deg); background:var(--ink); color:var(--bg); border-color:var(--ink)}
.df-hero-card.c2 .bar{background:rgba(255,255,255,.1)}
.df-hero-card.c2 .sub{color:rgba(255,255,255,.6)}
.df-hero-card.c3{bottom:2%; left:8%; width:70%; transform:rotate(-1.2deg)}
.df-hero-stack:hover .c1{transform:rotate(-4deg) translate(-6px,-4px)}
.df-hero-stack:hover .c2{transform:rotate(3deg) translate(6px,-4px)}
.df-hero-stack:hover .c3{transform:rotate(-.5deg) translate(0,4px)}

.df-hero-fly{
  position:absolute; width:8px; height:8px; border-radius:99px; background:var(--amber);
  box-shadow:0 0 16px var(--amber), 0 0 32px var(--amber);
  animation:fly 9s ease-in-out infinite;
}
.df-hero-fly.f2{animation-delay:-3s; animation-duration:11s; width:6px; height:6px}
.df-hero-fly.f3{animation-delay:-6s; animation-duration:13s}
@keyframes fly{
  0%{transform:translate(10%, 80%); opacity:.2}
  25%{transform:translate(80%, 20%); opacity:1}
  50%{transform:translate(30%, 40%); opacity:.4}
  75%{transform:translate(90%, 90%); opacity:1}
  100%{transform:translate(10%, 80%); opacity:.2}
}

/* logos strip */
.df-logos{padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.df-logos-inner{display:flex; align-items:center; gap:36px; flex-wrap:wrap; justify-content:space-between}
.df-logos-label{font-size:12px; color:var(--ink-3); font-weight:500}
.df-logos-row{display:flex; gap:36px; align-items:center; flex-wrap:wrap; opacity:.75}
.df-logo-tile{
  font-family:"Instrument Serif", serif; font-size:22px; color:var(--ink-2);
  display:flex; align-items:center; gap:8px;
}
.df-logo-tile .mk{
  width:20px; height:20px; border-radius:5px; background:var(--ink-2);
  display:grid; place-items:center; color:var(--bg); font-size:11px; font-weight:700; font-family:"Inter", sans-serif;
}

/* platform cards */
.df-platforms-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:40px}
@media(max-width:900px){.df-platforms-row{grid-template-columns:1fr}}
.df-platform-card{
  border:1px solid var(--line); border-radius:16px; padding:28px;
  background:var(--card); position:relative; overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  text-decoration:none; color:inherit;
  display:block;
}
.df-platform-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--amber-soft)}
.df-platform-card .df-platform-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:99px; background:var(--chip); color:var(--ink-2);
  position:static;
}
.df-platform-card h3{font-size:26px; margin:18px 0 6px; font-weight:600; letter-spacing:-.02em}
.df-platform-card p{color:var(--ink-3); font-size:14px; margin:0}
.df-platform-card .df-platform-foot{
  display:flex; align-items:center; justify-content:space-between; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-2);
}
.df-platform-card .df-arrow{
  width:32px; height:32px; border-radius:99px; display:grid; place-items:center;
  background:var(--ink); color:var(--bg); transition:transform .2s;
}
.df-platform-card:hover .df-arrow{transform:translateX(4px)}
.df-platform-card .df-streak{
  position:absolute; inset:auto -30% -60% auto; width:280px; height:280px; border-radius:999px;
  background:radial-gradient(circle, var(--glow), transparent 65%);
  pointer-events:none;
}

/* featured modules */
.df-section-head{display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap}
.df-section-head .tabs{display:flex; gap:4px; background:var(--bg-2); padding:4px; border-radius:12px; border:1px solid var(--line)}
.df-section-head .tabs button{
  padding:7px 13px; border-radius:8px; font-size:13px; font-weight:500; color:var(--ink-2);
  transition:background .15s, color .15s;
}
.df-section-head .tabs button.active{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

.df-module-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.df-module{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; display:flex; flex-direction:column; gap:12px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  cursor:pointer; position:relative;
}
.df-module:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--amber-soft)}
.df-module .thumb{
  height:120px; border-radius:10px; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg-3) 8px 9px);
  display:grid; place-items:center;
}
.df-module .thumb .df-glyph{
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  display:grid; place-items:center; color:#1a1506; font-weight:700;
  box-shadow:0 8px 24px -8px var(--amber-deep), 0 0 0 6px var(--card);
}
.df-module .df-plat{
  position:absolute; top:10px; right:10px; font-size:10px; padding:3px 7px;
  background:var(--card); border:1px solid var(--line); border-radius:99px; color:var(--ink-2);
  font-weight:600; letter-spacing:.02em;
}
.df-module .title{font-size:14.5px; font-weight:600; line-height:1.25}
.df-module .desc{font-size:12.5px; color:var(--ink-3); line-height:1.45; flex:1}
.df-module .row{display:flex; justify-content:space-between; align-items:center; margin-top:2px}
.df-module .df-stars{color:var(--amber-deep); font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px}
.df-module .price{font-weight:700; font-size:15px}
.df-module .price small{font-weight:500; color:var(--ink-3); font-size:11px; margin-left:4px}
.df-module .add{
  position:absolute; top:10px; left:10px;
  width:28px; height:28px; border-radius:99px; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; opacity:0; transition:opacity .2s, transform .2s;
  transform:translateY(-4px);
}
.df-module:hover .add{opacity:1; transform:translateY(0)}

/* Homepage categories grid */
.df-home-cat-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-top:32px}
@media(max-width:1100px){.df-home-cat-grid{grid-template-columns:repeat(4, 1fr)}}
@media(max-width:760px){.df-home-cat-grid{grid-template-columns:repeat(3, 1fr)}}
@media(max-width:480px){.df-home-cat-grid{grid-template-columns:repeat(2, 1fr)}}
.df-home-cat{
  aspect-ratio:1/.9; border:1px solid var(--line); border-radius:14px;
  padding:16px; background:var(--card); display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .2s, background .2s, border-color .2s;
  cursor:pointer; text-decoration:none; color:inherit;
}
.df-home-cat:hover{transform:translateY(-2px); background:var(--bg-2); border-color:var(--amber-soft)}
.df-home-cat-ico{
  width:34px; height:34px; border-radius:9px; background:var(--bg-2);
  display:grid; place-items:center; color:var(--ink); font-size:18px;
  font-family:"Instrument Serif", serif;
}
.df-home-cat-body{margin-top:auto}
.df-home-cat-name{font-weight:600; font-size:13.5px; line-height:1.25; color:var(--ink)}
.df-home-cat-count{font-size:11.5px; color:var(--ink-3); margin-top:3px}

/* testimonials */
.df-test-section{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.df-test-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; margin-top:40px}
.df-test{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:28px; display:flex; flex-direction:column; gap:18px;
}
.df-test.is-big{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.df-test.is-big .df-test-name, .df-test.is-big .df-test-role{color:rgba(255,255,255,.7)}
.df-test .quote{font-family:"Instrument Serif", serif; font-size:24px; line-height:1.25; letter-spacing:-.01em}
.df-test.is-big .df-test-quote{font-size:32px}
.df-test .who{display:flex; align-items:center; gap:12px; margin-top:auto}
.df-test .avatar{
  width:40px; height:40px; border-radius:99px;
  background:linear-gradient(135deg, var(--amber), var(--cool));
  font-weight:700; display:grid; place-items:center; color:#1a1506; font-size:14px;
}
.df-test .name{font-weight:600; font-size:14px; color:var(--ink)}
.df-test .role{font-size:12.5px; color:var(--ink-3)}

/* blog */
.df-blog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:32px}
.df-post{
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;
  cursor:pointer;
}
.df-post:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.df-post .cover{
  aspect-ratio:16/9;
  background:
    repeating-linear-gradient(45deg, var(--bg-2) 0 10px, var(--bg-3) 10px 11px);
  position:relative;
}
.df-post .cover::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 30%, var(--glow), transparent 55%);
}
.df-post .body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.df-post .df-cat-tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-deep); font-weight:600}
.df-post h3{font-size:19px; font-weight:600}
.df-post .meta{font-size:12.5px; color:var(--ink-3); margin-top:auto}

/* =========================================================
   FAQ — unified accordion
   Works for both structures:
     - <div class="df-faq-item">  with <button class="df-faq-q"> (homepage)
     - <details class="df-faq-item"><summary class="df-faq-q">   (product/category)
   Answer reveals via height:auto (no clipping), transitions handled with
   grid-template-rows: 0fr -> 1fr which is animatable.
   ========================================================= */

/* Grid layout for pages that split FAQ into an intro column + list */
.df-faq-grid{display:grid; grid-template-columns:1fr 1.5fr; gap:60px; align-items:start}
@media(max-width:860px){.df-faq-grid{grid-template-columns:1fr; gap:32px}}

.df-faq-list{display:flex; flex-direction:column; gap:0}

.df-faq-item{
	border-top:1px solid var(--line);
	padding:0;
	/* Remove default details marker arrow on WebKit & Firefox */
}
.df-faq-item:last-child{border-bottom:1px solid var(--line)}
.df-faq-item > summary::-webkit-details-marker,
.df-faq-item > summary::marker{display:none; content:""}

/* Question row — works whether tag is <summary> or <button> */
.df-faq-q{
	display:flex; justify-content:space-between; align-items:center; gap:16px;
	font-weight:600; font-size:15.5px; line-height:1.4;
	cursor:pointer; width:100%; text-align:left;
	padding:18px 0;
	background:transparent; border:0; color:inherit;
	font-family:inherit;
	list-style:none; /* hides the default triangle on <summary> in Firefox */
}
.df-faq-q:hover{color:var(--amber-deep)}
.df-faq-q:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:4px}

/* Plus / minus icon */
.df-faq-q .df-plus,
.df-faq-item summary .df-plus{
	width:28px; height:28px; border-radius:99px;
	background:var(--bg-2); color:var(--ink-2);
	display:grid; place-items:center;
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:16px; font-weight:500; line-height:1;
	transition:transform .25s ease, background .2s ease, color .2s ease;
	flex:none;
}
/* Open state rotates the + into an × */
.df-faq-item.open .df-faq-q .df-plus,
.df-faq-item[open] > .df-faq-q .df-plus,
.df-faq-item[open] > summary .df-plus{
	transform:rotate(45deg);
	background:var(--amber);
	color:var(--ink);
}

/* Answer — HARD RULE: no max-height clipping. Natural height always. */
.df-faq-a{
	color:var(--ink-2);
	font-size:14.5px;
	line-height:1.65;
	padding:0 0 18px;
	max-width:720px;
}
.df-faq-a p{margin:0 0 12px}
.df-faq-a p:last-child{margin-bottom:0}
.df-faq-a a{color:var(--amber-deep); text-decoration:underline}

/* Div-based (JS-driven) accordion:
   .df-faq-a is hidden by default; .open reveals it */
div.df-faq-item > .df-faq-a{display:none}
div.df-faq-item.open > .df-faq-a{display:block}

/* <details>-based accordion handles this natively — nothing more to do */

/* newsletter */
.df-news{
  background:var(--ink); color:var(--bg); border-radius:24px;
  padding:60px 56px; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  position:relative; overflow:hidden;
}
.df-news::before{
  content:""; position:absolute; inset:auto -10% -50% -10%; height:400px;
  background:radial-gradient(ellipse at center, var(--glow), transparent 60%);
}
.df-news h2{font-size:40px; line-height:1.05; font-weight:500; position:relative}
.df-news h2 em{color:var(--amber); font-style:italic; font-family:"Instrument Serif", serif}
.df-news p{color:rgba(255,255,255,.65); margin-top:12px; position:relative}
.df-news form{
  position:relative; display:flex; gap:8px; background:rgba(255,255,255,.08);
  padding:6px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
}
.df-news input{
  flex:1; background:transparent; border:0; outline:none; color:var(--bg);
  padding:12px 14px; font:inherit; font-size:14px;
}
.df-news input::placeholder{color:rgba(255,255,255,.4)}

/* footer */
footer{padding:64px 0 32px; border-top:1px solid var(--line); background:var(--bg-2)}
.df-foot-grid{display:grid; grid-template-columns:1.2fr repeat(4, 1fr); gap:40px}
.df-foot-brand{display:flex; flex-direction:column; gap:16px; max-width:320px}
.df-foot-about{font-size:13.5px; color:var(--ink-3); line-height:1.6; margin:0}
.df-foot-socials{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.df-social-btn{
  width:36px; height:36px; border-radius:10px;
  background:var(--bg-3); color:var(--ink-2);
  display:grid; place-items:center;
  transition:background .15s, color .15s, transform .15s;
  text-decoration:none;
}
.df-social-btn:hover{background:var(--ink); color:var(--bg); transform:translateY(-2px)}
.df-social-btn svg{width:16px; height:16px; display:block}
.df-foot-col h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; font-weight:600}
.df-foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.df-foot-col a{font-size:14px; color:var(--ink-2)}
.df-foot-col a:hover{color:var(--ink)}
.df-foot-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink-3);
}

/* =========================================================
   BOLD VARIANT — constellation
   ========================================================= */

.df-bold-body{background:#0a0e1c; color:oklch(0.96 0.01 85); --bg:#0a0e1c; --card:#0f1527; --line:#1b2238; --ink:oklch(0.96 0.01 85); --ink-2:oklch(0.82 0.02 85); --ink-3:oklch(0.6 0.02 260); --bg-2:#0f1527; --bg-3:#141b31; --chip:#141b31}
.df-bold-body[data-bold-theme="light"]{background:oklch(0.98 0.01 85); color:oklch(0.18 0.03 265); --bg:oklch(0.98 0.01 85); --card:#fff; --line:oklch(0.88 0.008 260); --ink:oklch(0.18 0.03 265); --ink-2:oklch(0.32 0.02 265); --ink-3:oklch(0.52 0.015 265); --bg-2:oklch(0.96 0.006 85); --bg-3:oklch(0.93 0.008 85); --chip:oklch(0.94 0.008 85)}

/* constellation hero */
.df-const-hero{
  position:relative; min-height:92vh; overflow:hidden;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse 70% 50% at 20% 110%, oklch(0.3 0.12 265 / .4), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 10%, oklch(0.82 0.16 75 / .12), transparent 60%);
}
.df-bold-body[data-bold-theme="light"] .df-const-hero{
  background:
    radial-gradient(ellipse 70% 50% at 20% 110%, oklch(0.82 0.16 75 / .1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 10%, oklch(0.7 0.12 230 / .12), transparent 60%);
}
.df-const-hero .df-wrap{position:relative; z-index:2; width:100%}
.df-const-hero h1{
  font-family:"Instrument Serif", serif; font-weight:400;
  font-size:clamp(56px, 9vw, 140px); line-height:.92; letter-spacing:-.03em;
  max-width:14ch;
}
.df-const-hero h1 em{font-style:italic; color:var(--amber)}
.df-const-hero h1 .stamp{
  display:inline-block; padding:2px 18px; border:2px solid var(--amber);
  border-radius:99px; color:var(--amber); font-size:.62em; vertical-align:middle;
  font-family:"Inter", sans-serif; font-weight:500; letter-spacing:-.01em;
  transform:translateY(-.15em);
}

.df-const-sub{
  margin-top:28px; font-size:18px; color:var(--ink-2); max-width:50ch;
}
.df-const-cta{margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.df-const-stats{
  display:flex; gap:48px; margin-top:80px;
  border-top:1px solid var(--line); padding-top:28px;
}
.df-const-stats .stat .n{font-family:"Instrument Serif", serif; font-size:48px; line-height:1; color:var(--amber)}
.df-const-stats .stat .l{font-size:13px; color:var(--ink-3); margin-top:6px}

/* firefly canvas */
.fly-canvas{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 15%, rgba(255,255,255,.1) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 55%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 85%, rgba(255,255,255,.08) 0 1px, transparent 2px);
}
.df-bold-body[data-bold-theme="light"] .fly-canvas{
  background-image:
    radial-gradient(circle at 15% 25%, rgba(0,0,0,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(0,0,0,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 15%, rgba(0,0,0,.1) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 55%, rgba(0,0,0,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 85%, rgba(0,0,0,.08) 0 1px, transparent 2px);
}
.fly{
  position:absolute; width:10px; height:10px; border-radius:99px;
  background:var(--amber);
  box-shadow:0 0 14px var(--amber), 0 0 30px var(--amber), 0 0 60px var(--amber);
  animation:float 8s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1); opacity:1}
  25%{transform:translate(40px,-30px) scale(1.1); opacity:.7}
  50%{transform:translate(-20px,-60px) scale(.85); opacity:1}
  75%{transform:translate(30px,20px) scale(1.05); opacity:.5}
}

/* module node — the bold card */
.node-section{
  padding:120px 0; background:var(--bg);
  border-top:1px solid var(--line);
}
.node-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:56px; gap:24px; flex-wrap:wrap}
.node-head h2{font-family:"Instrument Serif", serif; font-weight:400; font-size:clamp(40px, 5vw, 72px); line-height:1; max-width:14ch}
.node-head h2 em{color:var(--amber); font-style:italic}
.node-controls{display:flex; gap:10px; align-items:center}
.pill{
  padding:9px 14px; border-radius:99px; font-size:13px; font-weight:500;
  border:1px solid var(--line); color:var(--ink-2); background:var(--card);
  transition:all .15s;
}
.pill.active, .pill:hover{background:var(--amber); color:#1a1506; border-color:var(--amber)}

.node-grid{
  display:grid; grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:160px; gap:14px;
}
.node{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:22px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden; cursor:pointer;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.node:hover{transform:translateY(-4px); border-color:var(--amber); box-shadow:0 30px 60px -20px rgba(0,0,0,.4), 0 0 40px var(--glow)}
.node .plat-tag{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.node h3{font-family:"Instrument Serif", serif; font-weight:400; font-size:28px; line-height:1.05; margin-top:8px; letter-spacing:-.02em}
.node .desc{font-size:13px; color:var(--ink-3); margin-top:8px}
.node .foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto}
.node .price{font-weight:700; font-size:18px}
.node .df-dot-bg{
  position:absolute; inset:auto -20% -40% auto; width:220px; height:220px; border-radius:999px;
  background:radial-gradient(circle, var(--glow), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.node:hover .df-dot-bg{opacity:1}
.node .spark{
  position:absolute; top:22px; right:22px; width:10px; height:10px; border-radius:99px;
  background:var(--amber); box-shadow:0 0 10px var(--amber), 0 0 24px var(--amber);
  opacity:.4;
}
.node:hover .spark{opacity:1; animation:blink 1.2s ease-in-out infinite}

/* grid area assignments — editorial irregular layout */
.node.n1{grid-column:span 5; grid-row:span 2}
.node.n2{grid-column:span 4}
.node.n3{grid-column:span 3}
.node.n4{grid-column:span 4}
.node.n5{grid-column:span 3}
.node.n6{grid-column:span 4; grid-row:span 2}
.node.n7{grid-column:span 4}
.node.n8{grid-column:span 4}

/* bold testimonials — ribbon */
.ribbon-section{padding:120px 0; position:relative; overflow:hidden; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ribbon-head{text-align:center; margin-bottom:56px}
.ribbon-head h2{font-family:"Instrument Serif", serif; font-size:clamp(40px, 5vw, 64px); font-weight:400; line-height:1.05}
.ribbon-head h2 em{color:var(--amber); font-style:italic}
.ribbon{display:flex; gap:24px; animation:scroll 40s linear infinite; width:max-content}
.ribbon-wrap{overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ribbon-card{
  flex:none; width:420px; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:32px; display:flex; flex-direction:column; gap:24px;
}
.ribbon-card .q{font-family:"Instrument Serif", serif; font-size:24px; line-height:1.3}

/* bold categories as word cloud */
.wc-section{padding:120px 0; background:var(--bg); text-align:center; border-top:1px solid var(--line)}
.wc-eyebrow{margin-bottom:24px; justify-content:center}
.wc-head{font-family:"Instrument Serif", serif; font-weight:400; font-size:clamp(36px, 5vw, 56px); line-height:1.1; max-width:20ch; margin:0 auto 48px}
.wc-list{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:980px; margin:0 auto}
.wc{
  padding:14px 22px; border-radius:99px; border:1px solid var(--line);
  background:var(--card); font-size:16px; font-weight:500; cursor:pointer;
  transition:all .2s; display:inline-flex; align-items:center; gap:10px;
}
.wc:hover{background:var(--amber); color:#1a1506; border-color:var(--amber); transform:scale(1.05)}
.wc .n{font-size:12px; color:var(--ink-3); font-weight:400}
.wc:hover .n{color:#1a1506; opacity:.7}
/* bold platform — three-panel */
.triptych{
  display:grid; grid-template-columns:repeat(3, 1fr); min-height:420px;
  border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--card);
}
.tri-panel{
  padding:40px; display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  position:relative; cursor:pointer; transition:background .3s;
  border-right:1px solid var(--line);
}
.tri-panel:last-child{border-right:0}
.tri-panel:hover{background:var(--bg-2)}
.tri-panel h3{font-family:"Instrument Serif", serif; font-weight:400; font-size:56px; line-height:.95; letter-spacing:-.02em}
.tri-panel .num{
  position:absolute; top:24px; right:28px; font-family:"JetBrains Mono", monospace;
  font-size:12px; color:var(--ink-3); letter-spacing:.1em;
}
.tri-panel .tri-stats{display:flex; gap:24px; font-size:12.5px; color:var(--ink-3)}
.tri-panel .tri-stats b{color:var(--ink); font-size:22px; font-weight:500; font-family:"Instrument Serif", serif; display:block}
.tri-panel .tri-cta{
  display:inline-flex; align-items:center; gap:10px; font-weight:500; color:var(--amber); font-size:14px;
}
.tri-panel:hover .tri-cta{text-decoration:underline; text-underline-offset:4px}

/* bold newsletter — full viewport firefly */
.df-bold-news{
  padding:140px 0; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at center, oklch(0.3 0.12 265 / .4), transparent 60%),
    var(--bg);
}
.df-bold-body[data-bold-theme="light"] .df-bold-news{
  background:
    radial-gradient(ellipse at center, oklch(0.82 0.16 75 / .15), transparent 60%),
    var(--bg);
}
.df-bold-news h2{font-family:"Instrument Serif", serif; font-weight:400; font-size:clamp(48px, 7vw, 96px); line-height:1; max-width:18ch; margin:0 auto}
.df-bold-news h2 em{color:var(--amber); font-style:italic}
.df-bold-news p{color:var(--ink-2); font-size:18px; max-width:50ch; margin:24px auto 40px}
.df-bold-news form{display:flex; gap:8px; max-width:480px; margin:0 auto; padding:6px; border:1px solid var(--line); border-radius:99px; background:var(--card)}
.df-bold-news input{flex:1; border:0; outline:none; background:transparent; color:var(--ink); padding:12px 18px; font:inherit; font-size:14px}

/* bold faq */
.df-bold-faq{padding:120px 0; border-top:1px solid var(--line)}

/* cart drawer */
.df-cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:440px; max-width:100vw;
  background:var(--card); border-left:1px solid var(--line); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.7,.2,1);
  z-index:90; display:flex; flex-direction:column;
}
.df-cart-drawer.open{transform:translateX(0)}
.df-cart-backdrop{
  position:fixed; inset:0; background:rgba(10,14,28,.4); z-index:89;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.df-cart-backdrop.open{opacity:1; pointer-events:auto}
.df-cart-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px; border-bottom:1px solid var(--line);
}
.df-cart-head h3{font-size:18px; font-weight:600}
.df-cart-items{flex:1; overflow-y:auto; padding:12px 24px}
.df-cart-item{
  display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);
}
.df-cart-item:last-child{border-bottom:0}
.df-cart-item .th{
  width:56px; height:56px; border-radius:10px; flex:none;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  display:grid; place-items:center; color:#1a1506; font-weight:700;
}
.df-cart-item .info{flex:1; min-width:0}
.df-cart-item .title{font-size:14px; font-weight:600; line-height:1.3}
.df-cart-item .sub{font-size:12px; color:var(--ink-3); margin-top:2px}
.df-cart-item .row{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.df-cart-item .qty{
  display:flex; align-items:center; gap:8px; background:var(--bg-2); border-radius:8px; padding:2px;
}
.df-cart-item .qty button{width:22px; height:22px; border-radius:6px; font-size:13px; color:var(--ink-2)}
.df-cart-item .qty button:hover{background:var(--card)}
.df-cart-item .qty span{font-size:13px; font-weight:600; min-width:18px; text-align:center}
.df-cart-item .price{font-weight:700; font-size:14px}
.df-cart-foot{padding:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
.df-cart-foot .total{display:flex; justify-content:space-between; font-weight:600; font-size:16px}
.df-cart-foot .df-btn{justify-content:center}
.df-cart-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--ink-3); font-size:14px; text-align:center; padding:40px;
}

/* quick view */
.qv-backdrop{
  position:fixed; inset:0; background:rgba(10,14,28,.6); z-index:95;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.qv-backdrop.open{opacity:1; pointer-events:auto}
.qv{
  width:720px; max-width:94vw; max-height:86vh; overflow-y:auto;
  background:var(--card); border-radius:20px; border:1px solid var(--line);
  transform:scale(.96); transition:transform .25s;
}
.qv-backdrop.open .qv{transform:scale(1)}
.qv-top{
  height:200px; border-radius:20px 20px 0 0; position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, oklch(0.2 0.04 265), oklch(0.3 0.08 265));
}
.qv-top .glow{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 40%, var(--glow), transparent 60%);
}
.qv-top h2{
  position:absolute; left:28px; bottom:24px; color:#fff;
  font-family:"Instrument Serif", serif; font-size:38px; font-weight:400; line-height:1;
}
.qv-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:99px; background:rgba(255,255,255,.15); color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); z-index:2}
.qv-close:hover{background:rgba(255,255,255,.25)}
.qv-body{padding:28px; display:grid; grid-template-columns:1fr 200px; gap:24px}
.qv-body .desc{font-size:15px; color:var(--ink-2); line-height:1.55}
.qv-body .df-feats{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.qv-body .df-feat{display:flex; gap:10px; font-size:13.5px; color:var(--ink-2)}
.qv-body .df-feat .c{color:var(--amber-deep); font-weight:700}
.qv-buy{border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px; align-self:start}
.qv-buy .p{font-weight:700; font-size:28px; font-family:"Instrument Serif", serif}
.qv-buy small{color:var(--ink-3); font-size:12px}

/* tweaks panel */
.tweaks-panel{
  position:fixed; bottom:20px; right:20px; z-index:80;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:14px; min-width:260px;
  font-family:"Inter", sans-serif; transform:translateY(0); transition:transform .3s, opacity .3s;
}
.tweaks-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.tweaks-head h4{font-size:13px; font-weight:600; margin:0; letter-spacing:.02em}
.tweaks-head .close{color:var(--ink-3); font-size:18px}
.tweak-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:13px; gap:12px}
.tweak-row label{color:var(--ink-2)}
.seg{display:flex; background:var(--bg-2); border-radius:8px; padding:2px; gap:2px; border:1px solid var(--line)}
.seg button{padding:5px 10px; border-radius:6px; font-size:12px; font-weight:500; color:var(--ink-2)}
.seg button.active{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

/* toast */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:12px;
  font-size:14px; font-weight:500; z-index:100; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg); opacity:0; transition:all .25s;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.toast .dot{width:8px; height:8px; border-radius:99px; background:var(--amber)}

/* responsive */
@media (max-width:1100px){
  .df-module-grid{grid-template-columns:repeat(3, 1fr)}
  .df-cat-grid{grid-template-columns:repeat(4, 1fr)}
  .df-foot-grid{grid-template-columns:1.2fr repeat(2, 1fr)}
  .node-grid{grid-auto-rows:140px}
}
@media (max-width:820px){
  .df-hero-grid{grid-template-columns:1fr; gap:40px}
  .df-hero-stack{max-width:420px; margin:0 auto}
  .platform-row{grid-template-columns:1fr}
  .triptych{grid-template-columns:1fr}
  .tri-panel{border-right:0; border-bottom:1px solid var(--line)}
  .df-module-grid{grid-template-columns:repeat(2,1fr)}
  .df-test-grid, .df-blog-grid{grid-template-columns:1fr}
  .df-cat-grid{grid-template-columns:repeat(3, 1fr)}
  .df-news{grid-template-columns:1fr; padding:44px 28px}
  .df-faq-grid{grid-template-columns:1fr; gap:24px}
  .df-foot-grid{grid-template-columns:1fr 1fr}
  .node-grid{grid-template-columns:repeat(6,1fr)}
  .node{grid-column:span 3 !important; grid-row:span 1 !important}
  .df-nav-links,.df-nav-search{display:none}
  section{padding:60px 0}
}

/* =========================================================
   DataFirefly — theme additions
   (built on top of _base.css; covers WooCommerce, forms,
   breadcrumbs, pagination, 404, prose, admin-bar offsets)
   ========================================================= */

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:8px 14px;background:var(--ink);color:var(--bg);z-index:9999;border-radius:8px}

/* Admin-bar offset */
body.admin-bar .df-topbar{top:32px}
body.admin-bar .df-nav{top:0}
@media(max-width:782px){body.admin-bar .df-topbar{top:46px}}

/* Prose — default content styling for pages and posts */
.df-prose{color:var(--ink);font-size:17px;line-height:1.7}
.df-prose > * + *{margin-top:1.2em}
.df-prose h1,.df-prose h2,.df-prose h3{font-family:'Instrument Serif',Georgia,serif;line-height:1.15;font-weight:400;color:var(--ink)}
.df-prose h1{font-size:44px}
.df-prose h2{font-size:34px;margin-top:1.6em}
.df-prose h3{font-size:26px;margin-top:1.4em}
.df-prose a{color:var(--amber-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.df-prose a:hover{color:var(--amber)}
.df-prose blockquote{border-left:3px solid var(--amber);padding:2px 0 2px 18px;font-style:italic;color:var(--ink-2)}
.df-prose code{background:var(--chip);padding:2px 6px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.9em}
.df-prose pre{background:var(--bg-3);padding:16px 20px;border-radius:12px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.55}
.df-prose pre code{background:transparent;padding:0}
.df-prose img{max-width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow)}
.df-prose ul,.df-prose ol{padding-left:1.4em}
.df-prose li + li{margin-top:.4em}
.df-prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* Page header (non-home) */
.df-page-header{padding:48px 0 32px;border-bottom:1px solid var(--line);margin-bottom:40px}
.df-page-header h1{margin-top:8px}
.df-page-single,.df-post-single{padding-top:32px;padding-bottom:72px}

/* Breadcrumbs */
.df-breadcrumbs{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--ink-3);margin-bottom:20px;flex-wrap:wrap}
.df-breadcrumbs a{color:var(--ink-3);text-decoration:none}
.df-breadcrumbs a:hover{color:var(--ink)}
.df-breadcrumbs .sep{opacity:.5}

/* Pagination */
.df-pagination{display:flex;gap:6px;justify-content:center;margin:48px 0}
.df-pagination a,.df-pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:10px;font-weight:500;font-size:14px;color:var(--ink);text-decoration:none}
.df-pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.df-pagination a:hover{border-color:var(--amber-deep)}

/* 404 */
.df-404{padding:120px 0;text-align:center}
.df-404-inner{max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}
.df-404 form{display:flex;gap:8px;width:100%;max-width:360px}
.df-404 form input{flex:1;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.df-404 form button{padding:12px 20px;border:0;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:600;cursor:pointer}

/* Search form (sidebar/404) */
.df-search-form{display:flex;gap:8px}
.df-search-form input{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.df-search-form button{padding:10px 18px;border:0;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:600;cursor:pointer}

/* Sidebar */
.df-sidebar{padding:24px;background:var(--bg-2);border:1px solid var(--line);border-radius:16px}
.df-sidebar .widget + .widget{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.df-sidebar h2.widget-title{font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:0 0 12px}

/* Comments */
.df-comments{padding:48px 0;max-width:760px}
.df-comment-list{list-style:none;padding:0}
.df-comment-list li{padding:20px 0;border-bottom:1px solid var(--line)}

/* Tag list on single posts */
.df-tags{margin-top:32px;display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-3);font-size:13px}

/* Newsletter form states */
.df-news-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.df-news-form input[type=email]{flex:1 1 260px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:15px}
.df-news-form input[type=email]:focus{outline:none;border-color:var(--amber-deep);box-shadow:0 0 0 3px var(--glow)}
.df-news-status{width:100%;margin-top:6px;font-size:13px;color:var(--ink-3)}
.df-news-status.is-ok{color:#0a7f4c}
.df-news-status.is-err{color:#c9342d}

/* Theme toggle — swap moon/sun icons */
html[data-theme="light"] [data-df-theme-toggle] .df-icon-sun{display:none}
html[data-theme="dark"]  [data-df-theme-toggle] .df-icon-moon{display:none}

/* Language switcher */
.df-lang-switch{position:relative}
.df-lang-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;text-transform:uppercase}
.df-lang-btn:hover{border-color:var(--amber-deep)}
.df-lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow-lg);min-width:140px;display:none;z-index:10}
.df-lang-switch.is-open .df-lang-menu{display:block}
.df-lang-menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
.df-lang-menu a:hover{background:var(--bg-2)}
.df-lang-menu a.is-active{background:var(--amber);color:#1a1207;font-weight:600}

/* Cart button badge */
.df-cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);text-decoration:none;font-weight:500}
.df-cart-btn:hover{border-color:var(--amber-deep)}
.df-cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:var(--amber);color:#1a1207;font-size:11px;font-weight:700}

/* ---------- WooCommerce ---------- */
.df-shop{padding:32px 0 80px}
.df-shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 32px;padding:16px 20px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap}
.df-shop-toolbar .woocommerce-result-count{margin:0;color:var(--ink-3);font-size:14px}
.df-shop-toolbar .woocommerce-ordering select{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:14px}

.df-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.df-product-grid li.df-product{list-style:none;padding:0;margin:0}
.df-product-grid .df-product{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;transition:.25s ease;display:flex;flex-direction:column}
.df-product-grid .df-product:hover{border-color:var(--amber-deep);transform:translateY(-2px);box-shadow:var(--shadow)}
.df-product-grid .df-product > a{text-decoration:none;color:inherit;display:block}
.df-product-grid .df-product img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.df-product-grid .woocommerce-loop-product__title{font-size:16px;font-weight:600;margin:10px 0 4px;color:var(--ink)}
.df-product-grid .df-platform-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--chip);border-radius:999px;font-size:11px;font-weight:600;color:var(--ink-2);margin:10px 0 0;text-transform:uppercase;letter-spacing:.05em}
.df-product-grid .df-price{color:var(--amber-deep);font-weight:700;display:block;margin-top:8px}
.df-product-grid .df-price del{color:var(--ink-3);font-weight:400;margin-right:6px}
.df-product-grid .button,.df-product-grid .added_to_cart{display:inline-block;margin-top:12px;padding:8px 14px;background:var(--ink);color:var(--bg);border:0;border-radius:10px;font-weight:600;font-size:13px;text-decoration:none;cursor:pointer}
.df-product-grid .onsale{position:absolute;top:10px;right:10px;background:var(--amber);color:#1a1207;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:700}

/* Single product */
.woocommerce div.product{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
@media(max-width:820px){.woocommerce div.product{grid-template-columns:1fr}}
.woocommerce div.product .images img{border-radius:16px;border:1px solid var(--line)}
.woocommerce div.product .product_title{font-family:'Instrument Serif',Georgia,serif;font-size:42px;line-height:1.1;margin:0 0 16px;font-weight:400;color:var(--ink)}
.woocommerce div.product p.price{font-size:30px;font-weight:700;color:var(--amber-deep);margin:8px 0 20px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2);line-height:1.7;font-size:16px}
.woocommerce div.product form.cart{margin-top:28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity input{width:64px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.woocommerce div.product form.cart .button{padding:14px 24px;background:var(--amber);color:#1a1207;border:0;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer}
.woocommerce div.product form.cart .button:hover{background:var(--amber-deep);color:#fff}
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:40px;border-top:1px solid var(--line);padding-top:32px}
.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:24px;padding:0;margin:0 0 24px;border-bottom:1px solid var(--line)}
.woocommerce-tabs ul.tabs li{margin:0;padding:0}
.woocommerce-tabs ul.tabs li a{display:block;padding:12px 0;color:var(--ink-3);text-decoration:none;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--amber)}

/* Cart & Checkout */
.woocommerce-cart .df-cart,.woocommerce-checkout .df-checkout{padding:32px 0 80px}
.woocommerce-cart table.shop_table,.woocommerce table.shop_table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:16px;text-align:left;border-bottom:1px solid var(--line)}
.woocommerce table.shop_table th{background:var(--bg-2);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.woocommerce table.shop_table tbody tr:last-child td{border-bottom:0}
.woocommerce-cart .cart-collaterals,.woocommerce-checkout #order_review{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:24px}
.woocommerce-checkout form .form-row{margin-bottom:14px}
.woocommerce-checkout form .form-row label{display:block;font-weight:500;font-size:13px;margin-bottom:6px;color:var(--ink-2)}
.woocommerce-checkout form input[type=text],.woocommerce-checkout form input[type=email],.woocommerce-checkout form input[type=tel],.woocommerce-checkout form textarea,.woocommerce-checkout form select{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:15px}
.woocommerce-checkout form input:focus{outline:none;border-color:var(--amber-deep);box-shadow:0 0 0 3px var(--glow)}
.woocommerce-checkout .button[type=submit]{padding:14px 24px;background:var(--amber);color:#1a1207;border:0;border-radius:12px;font-weight:700;cursor:pointer;font-size:15px}

/* Notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;padding:14px 18px;margin-bottom:18px;font-size:14px;list-style:none}
.woocommerce-error{border-left-color:#c9342d}
.woocommerce-message{border-left-color:#0a7f4c}

/* My Account */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:32px 0}
@media(max-width:820px){.woocommerce-account .woocommerce{grid-template-columns:1fr}}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-navigation ul li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation ul li a{display:block;padding:12px 16px;color:var(--ink);text-decoration:none;font-weight:500}
.woocommerce-MyAccount-navigation ul li.is-active a{background:var(--amber);color:#1a1207}

.df-cart-empty-note{padding:60px 20px;text-align:center;color:var(--ink-3);font-size:17px;background:var(--bg-2);border:1px dashed var(--line);border-radius:16px;margin:24px 0}

/* Blog page header on single-post */
.df-post-header .df-cat-tag{margin-bottom:12px;display:inline-block}
.df-post-cover img{width:100%;height:auto;border-radius:20px;display:block;margin-bottom:32px}
.df-post-content{max-width:760px}
/* =============================================================
   DataFirefly — Product & Category page styles
   (Appended to theme.css at build time)
   ============================================================= */

/* ---- Breadcrumbs ---------------------------------------------- */
.df-crumbs{
	display:flex; align-items:center; gap:10px; font-size:13px;
	color:var(--ink-3); margin-bottom:14px; flex-wrap:wrap;
}
.df-crumbs a:hover{ color:var(--ink) }
.df-crumbs .df-sep,
.df-crumbs .sep{ opacity:.5 }
.df-crumbs .df-here,
.df-crumbs .here{ color:var(--ink); font-weight:500 }

/* =============================================================
   PRODUCT PAGE
   ============================================================= */

.df-product-page{ display:block }

/* ---- Hero ----------------------------------------------------- */
.df-prod-hero{ padding:56px 0 40px }
.df-prod-grid{
	display:grid; grid-template-columns:1.15fr .85fr; gap:60px;
	align-items:start; margin-top:24px;
}
.df-prod-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px }
.df-prod-title{
	font-family:"Instrument Serif", serif; font-weight:400;
	font-size:clamp(40px, 5vw, 64px); line-height:1.02; letter-spacing:-.02em;
	margin:0;
}
.df-prod-title em{ color:var(--amber-deep); font-style:italic }
.df-prod-tag,
.df-prod-tagline{
	font-size:26px; line-height:1.3; color:var(--ink-2);
	font-style:italic; margin-top:18px;
	font-family:"Instrument Serif", serif;
}
.df-prod-hero-p{
	font-size:16px; line-height:1.65; color:var(--ink-2);
	margin-top:20px; max-width:60ch;
}
.df-prod-tech{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px }
.df-prod-tech-chip{
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:11.5px; padding:5px 10px; border-radius:6px;
	background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2);
}
.df-prod-cta{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap }
.df-prod-reassure{
	display:flex; gap:20px; margin-top:18px; flex-wrap:wrap;
	color:var(--ink-3); font-size:13px;
}
.df-prod-reassure span{ display:inline-flex; align-items:center; gap:6px }
.df-prod-reassure svg{ color:var(--amber-deep); flex:none }

/* ---- Preview window ------------------------------------------- */
.df-prod-preview{ position:sticky; top:80px }
.df-pp-window{
	background:var(--card); border:1px solid var(--line); border-radius:16px;
	overflow:hidden; box-shadow:var(--shadow-lg); position:relative;
}
.df-pp-bar{
	display:flex; align-items:center; gap:10px; padding:10px 14px;
	border-bottom:1px solid var(--line); background:var(--bg-2);
}
.df-pp-dots{ display:flex; gap:5px }
.df-pp-dots i{ width:9px; height:9px; border-radius:99px; background:var(--line); display:block }
.df-pp-dots i:nth-child(1){ background:oklch(0.72 0.18 25) }
.df-pp-dots i:nth-child(2){ background:oklch(0.82 0.16 85) }
.df-pp-dots i:nth-child(3){ background:oklch(0.72 0.15 145) }
.df-pp-url{
	flex:1; font-size:11.5px; color:var(--ink-3); text-align:center;
	font-family:"JetBrains Mono", ui-monospace, monospace;
	overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.df-pp-stage{ padding:32px 28px; position:relative; min-height:320px }
.df-pp-image{ width:100%; height:auto; display:block; border-radius:8px }
.df-pp-glyph{
	width:64px; height:64px; border-radius:16px;
	background:linear-gradient(135deg, var(--amber), var(--amber-deep));
	color:#1a1506; font-weight:700; font-size:18px;
	display:grid; place-items:center; margin-bottom:20px;
	box-shadow:0 12px 30px -10px var(--amber-deep);
	font-family:"Instrument Serif", serif;
}
.df-pp-lines{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px }
.df-pp-line{ height:10px; border-radius:4px; background:var(--bg-2) }
.df-pp-line:nth-child(1){ width:70% }
.df-pp-line:nth-child(2){ width:90% }
.df-pp-line:nth-child(3){ width:55% }
.df-pp-row{ display:flex; gap:10px; margin-bottom:18px }
.df-pp-field{
	flex:1; height:38px; border-radius:8px;
	border:1px solid var(--line); background:var(--bg-2);
}
.df-pp-field.short{ flex:.5 }
.df-pp-cta{
	padding:12px 16px; border-radius:10px;
	background:var(--ink); color:var(--bg);
	font-weight:600; text-align:center; font-size:14px;
}
.df-pp-fly{
	position:absolute; width:8px; height:8px; border-radius:99px;
	background:var(--amber);
	box-shadow:0 0 14px var(--amber), 0 0 28px var(--amber);
	animation:df-blink 2.2s ease-in-out infinite;
}
.df-pp-caption{
	font-size:11px; color:var(--ink-3); text-align:center; margin-top:12px;
}

@keyframes df-blink{
	0%,100%{ opacity:.25 }
	50%{ opacity:1 }
}

/* ---- Sticky tabs ---------------------------------------------- */
.df-prod-tabs{
	position:sticky; top:61px; z-index:20;
	background:color-mix(in oklch, var(--bg) 85%, transparent);
	backdrop-filter:blur(12px);
	border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.df-prod-tabs-inner{ display:flex; gap:4px; overflow-x:auto }
.df-prod-tab{
	padding:16px 18px; font-size:14px; font-weight:500; color:var(--ink-3);
	border-bottom:2px solid transparent; white-space:nowrap;
	display:inline-flex; align-items:center; gap:8px; cursor:pointer;
	text-decoration:none;
}
.df-prod-tab:hover{ color:var(--ink) }
.df-prod-tab.is-active,
.df-prod-tab.on{ color:var(--ink); border-color:var(--amber) }
.df-prod-tab .df-c,
.df-prod-tab .c{
	font-size:11px; padding:2px 6px;
	background:var(--bg-2); border-radius:99px; color:var(--ink-3);
}

/* ---- Panel layout --------------------------------------------- */
.df-prod-layout{
	display:grid; grid-template-columns:1fr 320px; gap:48px;
	padding:56px 0; align-items:start;
}
.df-prod-panel{ min-width:0 }
.df-prod-panel[hidden]{ display:none }
.df-panel-head{ margin-bottom:32px }
.df-panel-head h2{ margin-top:12px }
.df-panel-head em{ font-style:italic; color:var(--amber-deep) }
.df-panel-head-row{
	display:flex; justify-content:space-between; align-items:flex-end;
	gap:24px; flex-wrap:wrap;
}

.df-section-head{ margin-bottom:24px; max-width:780px }
.df-section-head em{ font-style:italic; color:var(--amber-deep) }

/* ---- Overview highlights -------------------------------------- */
.df-hl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.df-hl{
	background:var(--card); border:1px solid var(--line);
	border-radius:14px; padding:24px;
}
.df-hl-n{
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:12px; color:var(--amber-deep);
	font-weight:600; letter-spacing:.1em;
}
.df-hl h3{ font-size:18px; margin-top:10px; font-weight:600 }
.df-hl p{ font-size:14px; color:var(--ink-3); margin-top:8px; line-height:1.55 }

/* ---- Long SEO description ------------------------------------- */
.df-prod-long{
	margin-top:64px; padding-top:48px; border-top:1px solid var(--line);
	display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:56px;
	align-items:start;
}
.df-prod-long-head{ grid-column:1 / -1; max-width:780px }
.df-prod-long-head em{ font-style:italic; color:var(--amber-deep) }
.df-prod-long-body{ display:flex; flex-direction:column; gap:36px; min-width:0 }
.df-ld-sec{
	display:grid; grid-template-columns:56px 1fr; gap:20px;
	padding:24px 0; border-bottom:1px dashed var(--line);
}
.df-ld-sec:last-child{ border-bottom:none }
.df-ld-n{
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:12px; color:var(--amber-deep);
	letter-spacing:.06em; font-weight:600; padding-top:6px;
}
.df-ld-sec h3{
	font-size:22px; font-weight:600; line-height:1.25;
	margin:0 0 10px; letter-spacing:-0.01em;
}
.df-ld-sec p{
	margin:0; font-size:16px; line-height:1.75; color:var(--ink-2);
	text-wrap:pretty; max-width:680px;
}
.df-prod-long-toc{
	position:sticky; top:140px; padding:20px 22px;
	background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
	font-size:13px;
}
.df-prod-long-toc ul{
	list-style:none; margin:0; padding:0;
	display:flex; flex-direction:column; gap:10px;
}
.df-prod-long-toc li{
	display:flex; gap:10px; color:var(--ink-2); line-height:1.4;
	padding-bottom:10px; border-bottom:1px solid var(--line);
}
.df-prod-long-toc li:last-child{ border-bottom:none; padding-bottom:0 }
.df-prod-long-toc li .df-mono,
.df-prod-long-toc li .mono{
	font-family:"JetBrains Mono", ui-monospace, monospace;
	color:var(--amber-deep); font-weight:600; flex:none;
}
.df-prod-long-toc a{ color:inherit }
.df-prod-long-toc a:hover{ color:var(--ink) }

/* ---- Features (two columns) ----------------------------------- */
.df-feat-cols{ columns:2; gap:40px }
.df-feat-li{
	display:flex; gap:10px; padding:10px 0;
	border-bottom:1px solid var(--line);
	break-inside:avoid; font-size:14px; line-height:1.5;
}
.df-feat-li:last-child{ border-bottom:none }
.df-feat-c{ color:var(--amber-deep); flex:none; margin-top:2px }

/* ---- Changelog ------------------------------------------------- */
.df-cl-filters{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap }
.df-tab-mini{
	padding:6px 12px; border-radius:7px; font-size:13px;
	color:var(--ink-3); font-weight:500; cursor:pointer;
	border:none; background:transparent;
}
.df-tab-mini:hover{ color:var(--ink) }
.df-tab-mini.is-active,
.df-tab-mini.on{
	background:var(--card); color:var(--ink); box-shadow:var(--shadow);
}

.df-cl-timeline{ margin-top:32px }
.df-cl-entry{
	display:grid; grid-template-columns:20px 1fr; gap:20px;
	padding-bottom:28px;
}
.df-cl-entry[hidden]{ display:none }
.df-cl-rail{
	position:relative; display:flex; flex-direction:column;
	align-items:center; padding-top:6px;
}
.df-cl-dot{
	width:12px; height:12px; border-radius:99px;
	background:var(--amber);
	box-shadow:0 0 0 4px var(--bg), 0 0 12px var(--amber);
	flex:none;
}
.df-cl-dot.df-cl-fix,
.df-cl-dot.fix{
	background:var(--cool);
	box-shadow:0 0 0 4px var(--bg), 0 0 8px var(--cool);
}
.df-cl-dot.df-cl-major,
.df-cl-dot.major{
	background:oklch(0.65 0.18 340);
	box-shadow:0 0 0 4px var(--bg), 0 0 12px oklch(0.65 0.18 340);
}
.df-cl-line{
	flex:1; width:1px; background:var(--line);
	margin-top:8px; min-height:40px;
}
.df-cl-body{
	background:var(--card); border:1px solid var(--line);
	border-radius:12px; padding:20px 22px;
}
.df-cl-head{
	display:flex; align-items:center; gap:12px;
	flex-wrap:wrap; margin-bottom:12px;
}
.df-cl-tag{
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
	padding:3px 9px; border-radius:99px; font-weight:600;
}
.df-cl-tag.df-cl-feature,
.df-cl-feature{ background:oklch(0.92 0.1 85); color:oklch(0.35 0.1 60) }
.df-cl-tag.df-cl-fix,
.df-cl-fix{ background:oklch(0.92 0.05 230); color:oklch(0.35 0.1 240) }
.df-cl-tag.df-cl-major,
.df-cl-major{ background:oklch(0.92 0.08 340); color:oklch(0.35 0.12 340) }
[data-theme="dark"] .df-cl-feature{ background:oklch(0.32 0.1 60); color:oklch(0.88 0.1 85) }
[data-theme="dark"] .df-cl-fix{ background:oklch(0.28 0.08 240); color:oklch(0.82 0.08 230) }
[data-theme="dark"] .df-cl-major{ background:oklch(0.3 0.1 340); color:oklch(0.88 0.1 340) }
.df-cl-v{
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:16px; font-weight:700; color:var(--ink);
}
.df-cl-date{ font-size:12.5px; color:var(--ink-3); margin-left:auto }
.df-cl-notes{
	margin:0; padding-left:20px;
	font-size:14px; line-height:1.65; color:var(--ink-2);
}
.df-cl-notes li{ margin-bottom:4px }

.df-cl-foot{
	display:flex; justify-content:space-between; align-items:center;
	gap:16px; padding:20px 22px; margin-top:20px;
	background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
	flex-wrap:wrap;
}
.df-cl-subscribe{ display:flex; gap:6px }
.df-cl-subscribe input{
	border:1px solid var(--line); border-radius:8px;
	background:var(--card); padding:8px 12px;
	font:inherit; font-size:13px; outline:none;
	min-width:200px; color:var(--ink);
}
.df-cl-subscribe input:focus{ border-color:var(--amber) }

/* ---- Specs ---------------------------------------------------- */
.df-specs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.df-spec-card{
	background:var(--card); border:1px solid var(--line);
	border-radius:14px; padding:24px;
}
.df-spec-card h4{
	font-size:12px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--ink-3); margin:0 0 16px; font-weight:600;
}
.df-spec-card dl{
	margin:0; display:grid;
	grid-template-columns:auto 1fr; gap:12px 24px;
}
.df-spec-card dt{ color:var(--ink-3); font-size:13px }
.df-spec-card dd{ margin:0; font-size:13.5px; font-weight:500 }

.df-compat{
	list-style:none; margin:0; padding:0;
	display:flex; flex-direction:column; gap:10px;
}
.df-compat li{
	display:flex; align-items:center; gap:10px; font-size:13.5px;
}
.df-compat .df-c{
	width:22px; height:22px; border-radius:99px;
	display:grid; place-items:center; flex:none;
}
.df-compat li.is-ok .df-c,
.df-compat li.ok .df-c{
	background:oklch(0.9 0.08 145); color:oklch(0.35 0.15 145);
}
.df-compat li.is-no .df-c,
.df-compat li.no .df-c{
	background:oklch(0.92 0.05 25); color:oklch(0.45 0.15 25);
}
[data-theme="dark"] .df-compat li.is-ok .df-c{ background:oklch(0.3 0.1 145); color:oklch(0.85 0.1 145) }
[data-theme="dark"] .df-compat li.is-no .df-c{ background:oklch(0.3 0.08 25); color:oklch(0.85 0.1 25) }
.df-compat li.is-no,
.df-compat li.no{ color:var(--ink-3) }

.df-spec-links{
	display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;
}

/* ---- Reviews -------------------------------------------------- */
.df-rv-summary{
	display:grid; grid-template-columns:1fr 2fr auto; gap:40px;
	padding:28px; background:var(--card);
	border:1px solid var(--line); border-radius:14px;
	margin-bottom:24px; align-items:center;
}
.df-rv-big{ text-align:center }
.df-rv-avg{
	font-family:"Instrument Serif", serif;
	font-size:64px; line-height:1; color:var(--ink); font-weight:400;
}
.df-rv-stars{
	color:var(--amber-deep); font-size:16px;
	margin-top:4px; letter-spacing:2px;
}
.df-rv-count{ font-size:12px; color:var(--ink-3); margin-top:6px }
.df-rv-dist{ display:flex; flex-direction:column; gap:8px }
.df-rv-row{
	display:grid; grid-template-columns:24px 1fr 36px;
	align-items:center; gap:12px;
	font-size:12px; color:var(--ink-3);
}
.df-rv-bar{
	height:8px; background:var(--bg-2);
	border-radius:99px; overflow:hidden;
}
.df-rv-bar i{
	display:block; height:100%;
	background:var(--amber); border-radius:99px;
}

.df-rv-list{ display:flex; flex-direction:column; gap:14px }
.df-rv{
	background:var(--card); border:1px solid var(--line);
	border-radius:14px; padding:22px;
}
.df-rv-head{
	display:flex; justify-content:space-between;
	align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:12px;
}
.df-rv-who{ display:flex; align-items:center; gap:12px }
.df-rv-av{
	width:36px; height:36px; border-radius:99px;
	background:linear-gradient(135deg, var(--amber), var(--cool));
	color:#1a1506; font-weight:700;
	display:grid; place-items:center; font-size:13px;
	font-family:"Instrument Serif", serif;
}
.df-rv-name{ font-size:14px; font-weight:600 }
.df-rv-verif{
	font-size:10px; padding:1px 6px; border-radius:5px;
	background:oklch(0.9 0.08 145); color:oklch(0.35 0.15 145);
	margin-left:6px; font-weight:600;
}
[data-theme="dark"] .df-rv-verif{ background:oklch(0.3 0.1 145); color:oklch(0.85 0.1 145) }
.df-rv-date{ font-size:12px; color:var(--ink-3); margin-top:2px }
.df-rv-r{
	color:var(--amber-deep); letter-spacing:2px; font-size:14px;
}
.df-rv p{
	margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6;
}

.df-rv-write{ margin-top:14px }
.df-rv-form-wrap{
	margin-top:14px; padding:22px;
	background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.df-rv-form-wrap[hidden]{ display:none }

/* ---- Sticky buy sidebar --------------------------------------- */
.df-sticky-buy{
	position:sticky; top:120px;
	background:var(--card); border:1px solid var(--line);
	border-radius:16px; padding:22px;
	display:flex; flex-direction:column; gap:12px;
	box-shadow:var(--shadow);
}
.df-sb-price{
	display:flex; justify-content:space-between; align-items:center;
}
.df-sb-amount{
	font-family:"Instrument Serif", serif;
	font-size:40px; line-height:1; font-weight:400;
}
.df-sb-sub{ font-size:12px; color:var(--ink-3); margin-top:2px }
.df-sb-off{ text-align:right; font-size:11px; color:var(--ink-3) }
.df-sb-code{
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:13px; font-weight:700; color:var(--amber-deep);
	background:oklch(0.95 0.08 85);
	padding:2px 8px; border-radius:5px;
	margin-top:3px; display:inline-block;
}
[data-theme="dark"] .df-sb-code{ background:oklch(0.3 0.08 60) }
.df-sb-list{
	list-style:none; margin:12px 0 0; padding:12px 0 0;
	border-top:1px solid var(--line);
	display:flex; flex-direction:column; gap:8px;
}
.df-sb-list li{
	display:flex; align-items:center; gap:8px;
	font-size:12.5px; color:var(--ink-2);
}
.df-sb-list svg{ color:var(--amber-deep); flex:none }

/* ---- Product utility ------------------------------------------ */
.df-empty-note{
	font-size:14px; color:var(--ink-3); font-style:italic;
	padding:24px; text-align:center;
	border:1px dashed var(--line); border-radius:12px;
}

/* ---- Product responsive --------------------------------------- */
@media (max-width:1100px){
	.df-prod-grid{ grid-template-columns:1fr; gap:40px }
	.df-prod-preview{ position:static }
	.df-prod-layout{ grid-template-columns:1fr }
	.df-sticky-buy{ position:static }
	.df-hl-grid{ grid-template-columns:1fr }
	.df-feat-cols{ columns:1 }
	.df-specs-grid{ grid-template-columns:1fr }
	.df-rv-summary{ grid-template-columns:1fr; gap:24px }
}
@media (max-width:900px){
	.df-prod-long{ grid-template-columns:1fr; gap:32px }
	.df-prod-long-toc{ position:static }
}

/* =============================================================
   CATEGORY / ARCHIVE PAGE
   ============================================================= */

.df-cat-page{ display:block }

/* ---- Category hero -------------------------------------------- */
.df-cat-hero{ padding:56px 0 40px }
.df-cat-hero-grid{
	display:grid; grid-template-columns:1.4fr .8fr;
	gap:60px; align-items:end;
}
.df-cat-hero h1,
.df-cat-hero .df-cat-title{
	font-family:"Instrument Serif", serif; font-weight:400;
	font-size:clamp(48px, 6vw, 84px); line-height:1; letter-spacing:-.02em;
	margin:0;
}
.df-cat-hero h1 em,
.df-cat-hero .df-cat-title em{ font-style:italic; color:var(--amber-deep) }
.df-cat-tagline{
	font-size:24px; color:var(--ink-2); margin-top:20px;
	font-style:italic; line-height:1.3;
	font-family:"Instrument Serif", serif;
}
.df-cat-blurb{
	font-size:15px; color:var(--ink-3);
	line-height:1.6; margin-top:16px; max-width:60ch;
}
.df-cat-hero-side{
	display:flex; flex-direction:column; gap:20px;
	border-left:1px solid var(--line); padding-left:40px;
}
.df-cat-stat{ display:flex; gap:16px; align-items:baseline }
.df-cat-stat .df-n,
.df-cat-stat .n{
	font-family:"Instrument Serif", serif;
	font-size:48px; line-height:1; color:var(--amber-deep);
	min-width:110px; font-weight:400;
}
.df-cat-stat .df-l,
.df-cat-stat .l{ font-size:13px; color:var(--ink-3) }

/* ---- Category rail (all categories) --------------------------- */
.df-cat-rail{
	border-top:1px solid var(--line); border-bottom:1px solid var(--line);
	background:var(--bg-2); overflow-x:auto;
}
.df-cat-rail-inner{
	display:flex; gap:6px; padding:12px 0; white-space:nowrap;
}
.df-cat-pill{
	display:inline-flex; align-items:center; gap:8px;
	padding:8px 14px; border-radius:99px;
	font-size:13px; color:var(--ink-2); font-weight:500;
	transition:background .15s, color .15s;
	border:1px solid transparent; flex:none;
	text-decoration:none;
}
.df-cat-pill:hover{ background:var(--card); color:var(--ink) }
.df-cat-pill.is-active,
.df-cat-pill.active{
	background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.df-cat-pill .df-gl,
.df-cat-pill .gl{ font-size:14px; opacity:.8 }
.df-cat-pill .df-ct,
.df-cat-pill .ct{ font-size:11px; opacity:.6; font-weight:500 }

/* ---- Main layout ---------------------------------------------- */
.df-cat-list-wrap{ padding:48px 0 80px }
.df-cat-grid-layout{
	display:grid; grid-template-columns:260px 1fr;
	gap:40px; align-items:start;
}

/* ---- Sidebar filters ------------------------------------------ */
.df-side{
	position:sticky; top:80px;
	display:flex; flex-direction:column; gap:24px;
}
.df-side-block h4{
	font-size:12px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--ink-3); margin:0 0 10px; font-weight:600;
}
.df-side-list{ display:flex; flex-direction:column; gap:2px }
.df-side-opt{
	display:flex; align-items:center; gap:10px;
	padding:8px 10px; border-radius:8px;
	font-size:13.5px; color:var(--ink-2); cursor:pointer;
	transition:background .15s, color .15s;
}
.df-side-opt:hover{ background:var(--bg-2); color:var(--ink) }
.df-side-opt.is-on,
.df-side-opt.on{
	background:var(--bg-2); color:var(--ink); font-weight:500;
}
.df-side-opt input{ accent-color:var(--amber-deep); margin:0 }
.df-side-opt .df-count{
	margin-left:auto; font-size:11px; color:var(--ink-3); font-weight:500;
}

/* ---- List toolbar --------------------------------------------- */
.df-list-toolbar{
	display:flex; justify-content:space-between; align-items:center;
	margin-bottom:20px; padding-bottom:14px;
	border-bottom:1px solid var(--line);
	flex-wrap:wrap; gap:12px;
}
.df-list-count{ font-size:13px; color:var(--ink-3) }
.df-list-count strong{ color:var(--ink); font-weight:600 }
.df-list-actions{ display:flex; gap:12px; align-items:center }
.df-select{
	padding:8px 12px; border-radius:8px;
	border:1px solid var(--line); background:var(--card);
	color:var(--ink); font:inherit; font-size:13px;
	cursor:pointer; min-width:160px;
}
.df-select:focus{ outline:none; border-color:var(--amber) }

.df-seg{
	display:flex; background:var(--bg-2);
	border:1px solid var(--line); border-radius:8px;
	padding:2px; gap:2px;
}
.df-seg button{
	padding:6px 10px; border-radius:6px;
	font-size:13px; color:var(--ink-2); font-weight:500;
	background:transparent; border:none; cursor:pointer;
}
.df-seg button.is-active,
.df-seg button.active{
	background:var(--card); color:var(--ink); box-shadow:var(--shadow);
}

/* ---- Module rows (category list) ------------------------------ */
.df-mrow-list{ display:flex; flex-direction:column; gap:12px }
.df-mrow{
	display:grid; grid-template-columns:120px 1fr 200px;
	gap:24px; align-items:center;
	padding:22px; background:var(--card);
	border:1px solid var(--line); border-radius:14px;
	transition:border-color .2s, box-shadow .2s, transform .2s;
	text-decoration:none; color:inherit;
}
.df-mrow:hover{
	border-color:var(--amber-soft);
	box-shadow:var(--shadow-lg); transform:translateY(-2px);
}
.df-mrow-thumb{
	height:96px; border-radius:10px; position:relative;
	background:repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg-3, var(--bg-2)) 8px 9px);
	display:grid; place-items:center; overflow:hidden;
}
.df-mrow-thumb img{
	width:100%; height:100%; object-fit:cover; display:block;
}
.df-mrow-glyph{
	width:48px; height:48px; border-radius:12px;
	font-family:"Instrument Serif", serif;
	font-weight:400; font-size:14px; color:#1a1506;
	background:linear-gradient(135deg, var(--amber), var(--amber-deep));
	display:grid; place-items:center;
	box-shadow:0 8px 20px -6px var(--amber-deep);
}
.df-mrow-plat{
	position:absolute; top:6px; right:6px;
	font-size:10px; padding:2px 6px;
	background:var(--card); border:1px solid var(--line);
	border-radius:99px; color:var(--ink-2); font-weight:600;
}
.df-mrow-body{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.df-mrow-head{
	display:flex; justify-content:space-between;
	align-items:baseline; gap:12px; flex-wrap:wrap;
}
.df-mrow-head h3{
	font-size:18px; font-weight:600; letter-spacing:-.01em; margin:0;
}
.df-mrow-stars{
	font-size:12.5px; color:var(--amber-deep);
	font-weight:600; white-space:nowrap;
}
.df-mrow-desc{
	font-size:14px; color:var(--ink-3); margin:0; line-height:1.5;
}
.df-mrow-tags{
	display:flex; gap:6px; flex-wrap:wrap; margin-top:2px;
}
.df-mrow-tags .df-chip,
.df-mrow-tags .chip{ font-size:11px; padding:4px 9px }
.df-mrow-buy{
	display:flex; flex-direction:column; gap:8px; align-items:stretch;
}
.df-mrow-price{
	font-family:"Instrument Serif", serif;
	font-size:24px; font-weight:400;
	text-align:right;
}

/* ---- Grid view (toggle) --------------------------------------- */
.df-mrow-list.is-grid{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
	gap:14px;
}
.df-mrow-list.is-grid .df-mrow{
	grid-template-columns:1fr; gap:14px;
	padding:16px; align-items:stretch;
}
.df-mrow-list.is-grid .df-mrow-thumb{ height:140px }
.df-mrow-list.is-grid .df-mrow-price{ text-align:left }

/* ---- Pager ---------------------------------------------------- */
.df-pager{
	display:flex; gap:6px; justify-content:center;
	margin-top:32px; align-items:center; flex-wrap:wrap;
}
.df-pager button,
.df-pager a,
.df-pager .page-numbers{
	min-width:36px; height:36px; padding:0 10px;
	border-radius:8px; border:1px solid var(--line);
	background:var(--card); color:var(--ink-2);
	font-weight:500; font-size:13px;
	display:inline-flex; align-items:center; justify-content:center;
	text-decoration:none;
}
.df-pager a:hover,
.df-pager button:hover:not(:disabled){
	background:var(--bg-2); color:var(--ink);
}
.df-pager .page-numbers.current,
.df-pager button.is-active,
.df-pager button.active{
	background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.df-pager button:disabled{ opacity:.4; cursor:not-allowed }
.df-pager .dots{ border:none; background:transparent }

/* ---- Empty state ---------------------------------------------- */
.df-empty{
	padding:80px 20px; text-align:center;
	border:1px dashed var(--line); border-radius:16px;
	display:flex; flex-direction:column; align-items:center; gap:10px;
}
.df-empty-mark{ font-size:40px; color:var(--ink-3); opacity:.5 }
.df-empty h3{ font-size:18px; font-weight:600 }
.df-empty p{ color:var(--ink-3); font-size:14px }

/* ---- Related categories --------------------------------------- */
.df-related{
	display:grid; grid-template-columns:repeat(2,1fr);
	gap:14px; margin-top:14px;
}
.df-rel{
	display:flex; align-items:center; gap:16px;
	padding:20px 22px; background:var(--card);
	border:1px solid var(--line); border-radius:14px;
	transition:transform .2s, border-color .2s;
	text-align:left; text-decoration:none; color:inherit;
}
.df-rel:hover{
	transform:translateY(-2px); border-color:var(--amber-soft);
}
.df-rel-gl{
	width:44px; height:44px; border-radius:10px;
	background:var(--bg-2);
	display:grid; place-items:center; font-size:20px;
	color:var(--ink-2); flex:none;
	font-family:"Instrument Serif", serif;
}
.df-rel-name{ font-weight:600; font-size:15px }
.df-rel-sub{
	font-size:12.5px; color:var(--ink-3);
	margin-top:2px; line-height:1.4;
}

/* ---- Category FAQ band ---------------------------------------- */
.df-cat-faq{ padding:60px 0; border-top:1px solid var(--line) }

/* ---- Category responsive -------------------------------------- */
@media (max-width:1100px){
	.df-cat-grid-layout{ grid-template-columns:1fr }
	.df-side{
		position:static;
		display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
	}
	.df-cat-hero-grid{ grid-template-columns:1fr; gap:32px }
	.df-cat-hero-side{
		border-left:0; padding-left:0;
		border-top:1px solid var(--line); padding-top:24px;
		flex-direction:row; flex-wrap:wrap;
	}
	.df-mrow{ grid-template-columns:100px 1fr; gap:16px }
	.df-mrow-buy{
		grid-column:1 / -1; flex-direction:row;
		justify-content:space-between; align-items:center;
	}
	.df-mrow-price{ text-align:left }
	.df-related{ grid-template-columns:1fr }
}
@media (max-width:700px){
	.df-side{ grid-template-columns:1fr }
	.df-cat-stat .df-n,
	.df-cat-stat .n{ font-size:36px; min-width:80px }
}


/* =========================================================
   Product page styles (ported from product-styles.css)
   ========================================================= */

/* Product page styles */

.df-crumbs{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); margin-bottom:14px}
.df-crumbs a:hover{color:var(--ink)}
.df-crumbs .df-sep{opacity:.5}
.df-crumbs .df-here{color:var(--ink); font-weight:500}

.df-prod-hero{padding:56px 0 40px}
.df-prod-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start; margin-top:24px}
.df-prod-badges{display:flex; gap:8px; flex-wrap:wrap}
.df-prod-tag{font-size:26px; line-height:1.3; color:var(--ink-2); font-style:italic; margin-top:18px}
.df-prod-tech{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px}
.df-prod-tech-chip{
  font-size:11.5px; padding:5px 10px; border-radius:6px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2);
}
.df-prod-cta{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap}
.df-prod-reassure{display:flex; gap:20px; margin-top:18px; flex-wrap:wrap; color:var(--ink-3); font-size:13px}
.df-prod-reassure span{display:inline-flex; align-items:center; gap:6px}
.df-prod-reassure svg{color:var(--amber-deep)}

/* preview window */
.df-prod-preview{position:sticky; top:80px}
.df-pp-window{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-lg); position:relative;
}
.df-pp-bar{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--bg-2);
}
.df-pp-dots{display:flex; gap:5px}
.df-pp-dots i{width:9px; height:9px; border-radius:99px; background:var(--line); display:block}
.df-pp-dots i:nth-child(1){background:oklch(0.72 0.18 25)}
.df-pp-dots i:nth-child(2){background:oklch(0.82 0.16 85)}
.df-pp-dots i:nth-child(3){background:oklch(0.72 0.15 145)}
.df-pp-url{flex:1; font-size:11.5px; color:var(--ink-3); text-align:center}
.df-pp-stage{padding:32px 28px; position:relative}
.df-pp-glyph{
  width:64px; height:64px; border-radius:16px;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  color:#1a1506; font-weight:700; font-size:18px;
  display:grid; place-items:center; margin-bottom:20px;
  box-shadow:0 12px 30px -10px var(--amber-deep);
}
.df-pp-lines{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.df-pp-line{height:10px; border-radius:4px; background:var(--bg-2)}
.df-pp-row{display:flex; gap:10px; margin-bottom:18px}
.df-pp-field{flex:1; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--bg-2)}
.df-pp-field.short{flex:.5}
.df-pp-cta{
  padding:12px 16px; border-radius:10px; background:var(--ink); color:var(--bg);
  font-weight:600; text-align:center; font-size:14px;
}
.df-pp-fly{
  position:absolute; width:8px; height:8px; border-radius:99px; background:var(--amber);
  box-shadow:0 0 14px var(--amber), 0 0 28px var(--amber);
  animation:blink 2.2s ease-in-out infinite;
}
.df-pp-caption{font-size:11px; color:var(--ink-3); text-align:center; margin-top:12px}

/* Tabs */
.df-prod-tabs{position:sticky; top:61px; background:color-mix(in oklch, var(--bg) 85%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); z-index:20}
.df-prod-tabs-inner{display:flex; gap:4px; overflow-x:auto}
.df-prod-tab{
  padding:16px 18px; font-size:14px; font-weight:500; color:var(--ink-3);
  border-bottom:2px solid transparent; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.df-prod-tab:hover{color:var(--ink)}
.df-prod-tab.on{color:var(--ink); border-color:var(--amber)}
.df-prod-tab .df-c{font-size:11px; padding:2px 6px; background:var(--bg-2); border-radius:99px; color:var(--ink-3)}

/* Panel layout */
.df-prod-layout{display:grid; grid-template-columns:1fr 320px; gap:48px; padding:56px 0; align-items:start}
.df-prod-panel{min-width:0}
.df-panel-head{margin-bottom:32px}
.df-panel-head h2{margin-top:12px}
.df-panel-head em{font-style:italic; color:var(--amber-deep)}

/* Overview highlights */
.df-hl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.df-hl{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px;
}
.df-hl-n{font-size:12px; color:var(--amber-deep); font-weight:600; letter-spacing:.1em}
.df-hl h3{font-size:18px; margin-top:10px; font-weight:600}
.df-hl p{font-size:14px; color:var(--ink-3); margin-top:8px; line-height:1.55}

/* Long SEO description */
.df-prod-long{
  margin-top:64px; padding-top:48px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:56px;
  align-items:start;
}
.df-prod-long-head{grid-column:1 / -1; max-width:780px}
.df-prod-long-head em{font-style:italic; color:var(--amber-deep)}
.df-prod-long-body{display:flex; flex-direction:column; gap:36px; min-width:0}
.df-ld-sec{
  display:grid; grid-template-columns:56px 1fr; gap:20px;
  padding:24px 0; border-bottom:1px dashed var(--line);
}
.df-ld-sec:last-child{border-bottom:none}
.df-ld-n{
  font-size:12px; color:var(--amber-deep); letter-spacing:.06em; font-weight:600;
  padding-top:6px;
}
.df-ld-sec h3{
  font-size:22px; font-weight:600; line-height:1.25; margin:0 0 10px;
  letter-spacing:-0.01em;
}
.df-ld-sec p{
  margin:0; font-size:16px; line-height:1.75; color:var(--ink-2);
  text-wrap:pretty; max-width:680px;
}
.df-prod-long-toc{
  position:sticky; top:140px; padding:20px 22px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  font-size:13px;
}
.df-prod-long-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.df-prod-long-toc li{
  display:flex; gap:10px; color:var(--ink-2); line-height:1.4;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.df-prod-long-toc li:last-child{border-bottom:none; padding-bottom:0}
.df-prod-long-toc li .df-mono{color:var(--amber-deep); font-weight:600; flex:none}

@media (max-width:900px){
  .df-prod-long{grid-template-columns:1fr; gap:32px}
  .df-prod-long-toc{position:static}
}

.df-feat-cols{columns:2; gap:40px}
.df-feat-li{
  display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);
  break-inside:avoid; font-size:14px; line-height:1.5;
}
.df-feat-c{color:var(--amber-deep); flex:none; margin-top:2px}

/* Changelog */
.df-tab-mini{padding:6px 12px; border-radius:7px; font-size:13px; color:var(--ink-3); font-weight:500}
.df-tab-mini.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

.cl-timeline{margin-top:32px}
.df-cl-entry{display:grid; grid-template-columns:20px 1fr; gap:20px; padding-bottom:28px}
.cl-rail{position:relative; display:flex; flex-direction:column; align-items:center; padding-top:6px}
.df-cl-dot{width:12px; height:12px; border-radius:99px; background:var(--amber); box-shadow:0 0 0 4px var(--bg), 0 0 12px var(--amber); flex:none}
.df-cl-dot.fix{background:var(--cool); box-shadow:0 0 0 4px var(--bg), 0 0 8px var(--cool)}
.df-cl-dot.major{background:oklch(0.65 0.18 340); box-shadow:0 0 0 4px var(--bg), 0 0 12px oklch(0.65 0.18 340)}
.cl-line{flex:1; width:1px; background:var(--line); margin-top:8px; min-height:40px}
.df-cl-body{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px}
.df-cl-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.df-cl-tag{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; font-weight:600;
}
.df-cl-feature{background:oklch(0.92 0.1 85); color:oklch(0.35 0.1 60)}
.df-cl-fix{background:oklch(0.92 0.05 230); color:oklch(0.35 0.1 240)}
.df-cl-major{background:oklch(0.92 0.08 340); color:oklch(0.35 0.12 340)}
[data-theme="dark"] .df-cl-feature{background:oklch(0.32 0.1 60); color:oklch(0.88 0.1 85)}
[data-theme="dark"] .df-cl-fix{background:oklch(0.28 0.08 240); color:oklch(0.82 0.08 230)}
[data-theme="dark"] .df-cl-major{background:oklch(0.3 0.1 340); color:oklch(0.88 0.1 340)}
.df-cl-v{font-size:16px; font-weight:700; color:var(--ink)}
.df-cl-date{font-size:12.5px; color:var(--ink-3); margin-left:auto}
.df-cl-notes{margin:0; padding-left:20px; font-size:14px; line-height:1.65; color:var(--ink-2)}
.df-cl-notes li{margin-bottom:4px}

.df-cl-foot{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 22px; margin-top:20px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  flex-wrap:wrap;
}
.df-cl-subscribe{display:flex; gap:6px}
.df-cl-subscribe input{
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  padding:8px 12px; font:inherit; font-size:13px; outline:none; min-width:200px; color:var(--ink);
}
.df-cl-subscribe input:focus{border-color:var(--amber)}

/* Specs */
.df-specs-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.df-spec-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px}
.df-spec-card h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; font-weight:600}
.df-spec-card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:12px 24px}
.df-spec-card dt{color:var(--ink-3); font-size:13px}
.df-spec-card dd{margin:0; font-size:13.5px; font-weight:500}
.df-compat{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.df-compat li{display:flex; align-items:center; gap:10px; font-size:13.5px}
.df-compat .df-c{width:22px; height:22px; border-radius:99px; display:grid; place-items:center; flex:none}
.df-compat li.ok .df-c{background:oklch(0.9 0.08 145); color:oklch(0.35 0.15 145)}
.df-compat li.no .df-c{background:oklch(0.92 0.05 25); color:oklch(0.45 0.15 25)}
[data-theme="dark"] .df-compat li.ok .df-c{background:oklch(0.3 0.1 145); color:oklch(0.85 0.1 145)}
[data-theme="dark"] .df-compat li.no .df-c{background:oklch(0.3 0.08 25); color:oklch(0.85 0.1 25)}
.df-compat li.no{color:var(--ink-3)}

/* Reviews */
.df-rv-summary{
  display:grid; grid-template-columns:1fr 2fr auto; gap:40px;
  padding:28px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  margin-bottom:24px; align-items:center;
}
.df-rv-big{text-align:center}
.df-rv-avg{font-size:64px; line-height:1; color:var(--ink)}
.df-rv-stars{color:var(--amber-deep); font-size:16px; margin-top:4px; letter-spacing:2px}
.df-rv-count{font-size:12px; color:var(--ink-3); margin-top:6px}
.df-rv-dist{display:flex; flex-direction:column; gap:8px}
.df-rv-row{display:grid; grid-template-columns:24px 1fr 36px; align-items:center; gap:12px; font-size:12px; color:var(--ink-3)}
.df-rv-bar{height:8px; background:var(--bg-2); border-radius:99px; overflow:hidden}
.df-rv-bar i{display:block; height:100%; background:var(--amber); border-radius:99px}

.df-rv-list{display:flex; flex-direction:column; gap:14px}
.df-rv{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px}
.df-rv-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.df-rv-who{display:flex; align-items:center; gap:12px}
.df-rv-av{width:36px; height:36px; border-radius:99px; background:linear-gradient(135deg, var(--amber), var(--cool)); color:#1a1506; font-weight:700; display:grid; place-items:center; font-size:13px}
.df-rv-name{font-size:14px; font-weight:600}
.df-rv-verif{font-size:10px; padding:1px 6px; border-radius:5px; background:oklch(0.9 0.08 145); color:oklch(0.35 0.15 145); margin-left:6px; font-weight:600}
[data-theme="dark"] .df-rv-verif{background:oklch(0.3 0.1 145); color:oklch(0.85 0.1 145)}
.df-rv-date{font-size:12px; color:var(--ink-3); margin-top:2px}
.df-rv-r{color:var(--amber-deep); letter-spacing:2px; font-size:14px}
.df-rv p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6}

/* Sticky buy */
.df-sticky-buy{
  position:sticky; top:120px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow);
}
.df-sb-price{display:flex; justify-content:space-between; align-items:center}
.df-sb-amount{font-size:40px; line-height:1}
.df-sb-sub{font-size:12px; color:var(--ink-3); margin-top:2px}
.df-sb-off{text-align:right; font-size:11px; color:var(--ink-3)}
.df-sb-code{
  font-family:"JetBrains Mono", monospace; font-size:13px; font-weight:700; color:var(--amber-deep);
  background:oklch(0.95 0.08 85); padding:2px 8px; border-radius:5px; margin-top:3px; display:inline-block;
}
[data-theme="dark"] .df-sb-code{background:oklch(0.3 0.08 60)}
.df-sb-list{list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.df-sb-list li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2)}
.df-sb-list svg{color:var(--amber-deep); flex:none}

@media (max-width:1100px){
  .df-prod-grid{grid-template-columns:1fr; gap:40px}
  .df-prod-preview{position:static}
  .df-prod-layout{grid-template-columns:1fr}
  .df-sticky-buy{position:static}
  .df-hl-grid{grid-template-columns:1fr}
  .df-feat-cols{columns:1}
  .df-specs-grid{grid-template-columns:1fr}
  .df-rv-summary{grid-template-columns:1fr; gap:24px}
}


/* =========================================================
   Category page styles (ported from category-styles.css)
   ========================================================= */

/* =========================================================
   Category page — additional styles (appended)
   ========================================================= */

.df-crumbs{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); margin-bottom:14px}
.df-crumbs a:hover{color:var(--ink)}
.df-crumbs .df-sep{opacity:.5}
.df-crumbs .df-here{color:var(--ink); font-weight:500}

/* Safe hero */
.df-cat-hero{padding:56px 0 40px}
.df-cat-hero-grid{display:grid; grid-template-columns:1.4fr .8fr; gap:60px; align-items:end}
.df-cat-hero h1 em{font-style:italic; color:var(--amber-deep)}
.df-cat-tagline{font-size:24px; color:var(--ink-2); margin-top:20px; font-style:italic; line-height:1.3}
.df-cat-hero-side{display:flex; flex-direction:column; gap:20px; border-left:1px solid var(--line); padding-left:40px}
.df-cat-stat{display:flex; gap:16px; align-items:baseline}
.df-cat-stat .n{font-size:48px; line-height:1; color:var(--amber-deep); font-family:"Instrument Serif",serif; min-width:110px}
.df-cat-stat .l{font-size:13px; color:var(--ink-3)}

/* Category rail (safe) */
.df-cat-rail{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); overflow-x:auto}
.df-cat-rail-inner{display:flex; gap:6px; padding:12px 0; white-space:nowrap}
.df-cat-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:99px; font-size:13px; color:var(--ink-2); font-weight:500;
  transition:background .15s, color .15s; border:1px solid transparent;
  flex:none;
}
.df-cat-pill:hover{background:var(--card); color:var(--ink)}
.df-cat-pill.df-active{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.df-cat-pill .df-cat-pill-gl{font-size:14px; opacity:.8}
.df-cat-pill .df-cat-pill-ct{font-size:11px; opacity:.6; font-weight:500}

/* Safe list */
.df-cat-list-wrap{padding:48px 0 80px}
.df-cat-grid-layout{display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start}

.df-side{position:sticky; top:80px; display:flex; flex-direction:column; gap:24px}
.df-side-block h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; font-weight:600}
.df-side-list{display:flex; flex-direction:column; gap:2px}
.df-side-opt{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  font-size:13.5px; color:var(--ink-2); cursor:pointer;
  transition:background .15s, color .15s;
}
.df-side-opt:hover{background:var(--bg-2); color:var(--ink)}
.df-side-opt.on{background:var(--bg-2); color:var(--ink); font-weight:500}
.df-side-opt input{accent-color:var(--amber-deep); margin:0}

.list-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; gap:12px;
}
.df-select{
  padding:8px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; font-size:13px; cursor:pointer;
  min-width:160px;
}
.df-select:focus{outline:none; border-color:var(--amber)}

.df-seg{display:flex; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:2px; gap:2px}
.df-seg button{padding:6px 10px; border-radius:6px; font-size:13px; color:var(--ink-2); font-weight:500}
.df-seg button.df-active{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

.df-mrow-list{display:flex; flex-direction:column; gap:12px}
.df-mrow{
  display:grid; grid-template-columns:120px 1fr 200px; gap:24px; align-items:center;
  padding:22px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.df-mrow:hover{border-color:var(--amber-soft); box-shadow:var(--shadow-lg); transform:translateY(-2px)}
.df-mrow-thumb{
  height:96px; border-radius:10px; position:relative;
  background:repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg-3) 8px 9px);
  display:grid; place-items:center; overflow:hidden;
}
.df-mrow-glyph{
  width:48px; height:48px; border-radius:12px; font-weight:700; font-size:14px; color:#1a1506;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  display:grid; place-items:center; box-shadow:0 8px 20px -6px var(--amber-deep);
}
.df-mrow-plat{
  position:absolute; top:6px; right:6px; font-size:10px; padding:2px 6px;
  background:var(--card); border:1px solid var(--line); border-radius:99px; color:var(--ink-2); font-weight:600;
}
.df-mrow-body{display:flex; flex-direction:column; gap:8px; min-width:0}
.df-mrow-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.df-mrow-head h3{font-size:18px; font-weight:600; letter-spacing:-.01em}
.df-mrow-stars{font-size:12.5px; color:var(--amber-deep); font-weight:600; white-space:nowrap}
.df-mrow-desc{font-size:14px; color:var(--ink-3); margin:0; line-height:1.5}
.df-mrow-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.df-mrow-tags .df-chip{font-size:11px; padding:4px 9px}
.df-mrow-buy{display:flex; flex-direction:column; gap:8px; align-items:stretch}
.df-mrow-price{font-size:24px; font-weight:700; text-align:right; font-family:"Instrument Serif",serif}

.df-pager{display:flex; gap:6px; justify-content:center; margin-top:32px; align-items:center}
.df-pager button{
  min-width:36px; height:36px; padding:0 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-weight:500; font-size:13px;
}
.df-pager button:hover:not(:disabled){background:var(--bg-2); color:var(--ink)}
.df-pager button.df-active{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.df-pager button:disabled{opacity:.4; cursor:not-allowed}

.df-empty{
  padding:80px 20px; text-align:center; border:1px dashed var(--line); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.df-empty-mark{font-size:40px; color:var(--ink-3); opacity:.5}
.df-empty h3{font-size:18px; font-weight:600}
.df-empty p{color:var(--ink-3); font-size:14px}

/* Related categories (safe) */
.df-related{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px}
.df-rel{
  display:flex; align-items:center; gap:16px; padding:20px 22px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  transition:transform .2s, border-color .2s; text-align:left;
}
.df-rel:hover{transform:translateY(-2px); border-color:var(--amber-soft)}
.df-rel-gl{
  width:44px; height:44px; border-radius:10px; background:var(--bg-2);
  display:grid; place-items:center; font-size:20px; color:var(--ink-2); flex:none;
}
.df-rel-name{font-weight:600; font-size:15px}
.df-rel-sub{font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.4}

/* ================ BOLD ================ */
.cat-hero-bold{
  position:relative; overflow:hidden; padding:80px 0 100px;
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, oklch(0.3 0.12 265 / .3), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 90%, oklch(0.82 0.16 75 / .14), transparent 60%);
}
.bold-body[data-bold-theme="light"] .cat-hero-bold{
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, oklch(0.82 0.16 75 / .1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 90%, oklch(0.7 0.12 230 / .12), transparent 60%);
}

.bold-h-title{display:flex; align-items:flex-start; gap:28px; margin-top:18px}
.bold-h-title .idx{
  font-size:clamp(56px, 7vw, 96px); line-height:.95; color:var(--amber);
  font-weight:400; letter-spacing:-.03em;
}
.bold-h-title .idx span{font-size:.5em; color:var(--ink-3); margin-left:6px}
.bold-h-title h1{
  font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(56px, 8vw, 120px); line-height:.95; letter-spacing:-.03em;
  flex:1;
}
.bold-h-title .q-mark{color:var(--amber); font-style:italic}

.bold-h-sub{display:grid; grid-template-columns:1fr 1.1fr; gap:60px; margin-top:40px; align-items:end}
.bold-h-sub .tag{font-size:32px; font-weight:400; line-height:1.15; color:var(--ink); max-width:14ch}
.bold-h-sub .tag em{color:var(--amber); font-style:italic}

.bold-stats{display:flex; gap:48px; margin-top:60px; border-top:1px solid var(--line); padding-top:28px}
.bold-stats .bs .n{font-family:"Instrument Serif",serif; font-size:56px; line-height:1; color:var(--amber); font-weight:400}
.bold-stats .bs .l{font-size:13px; color:var(--ink-3); margin-top:6px}

/* ticker */
.cat-ticker-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; background:var(--bg-2);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cat-ticker{display:flex; gap:28px; padding:16px 0; white-space:nowrap; animation:scroll 80s linear infinite; width:max-content}
.ticker-item{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); font-weight:500;
  padding:4px 8px; border-radius:8px;
}
.ticker-item:hover{color:var(--ink); background:var(--card)}
.ticker-item.on{color:var(--amber); font-weight:600}
.ticker-item .g{font-size:16px; opacity:.7}
.ticker-item .df-c{font-size:11px; color:var(--ink-3)}

/* bold toolbar */
.bold-list-section{padding:80px 0 100px}
.bold-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-bottom:40px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.bt-filters{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.bt-sep{width:1px; height:20px; background:var(--line); margin:0 6px}

/* bento grid */
.bento{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; grid-auto-rows:200px;
}
.bento-card{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px;
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  position:relative; overflow:hidden; cursor:pointer;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.bento-card:hover{transform:translateY(-4px); border-color:var(--amber); box-shadow:0 24px 60px -24px rgba(0,0,0,.4), 0 0 30px var(--glow)}
.bento-card .spark{
  position:absolute; top:20px; right:20px; width:8px; height:8px; border-radius:99px;
  background:var(--amber); box-shadow:0 0 10px var(--amber), 0 0 24px var(--amber); opacity:.4;
}
.bento-card:hover .spark{opacity:1; animation:blink 1.2s ease-in-out infinite}
.bento-card .bc-top{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.bento-card .bc-rating{color:var(--amber-deep); letter-spacing:0}
.bento-card .bc-mid h3{font-family:"Instrument Serif",serif; font-size:30px; font-weight:400; letter-spacing:-.02em; line-height:1.05; margin-bottom:10px}
.bento-card .bc-mid p{font-size:14px; color:var(--ink-3); line-height:1.5; margin:0}
.bento-card .bc-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto}
.bento-card .bc-price{font-family:"Instrument Serif",serif; font-weight:400; font-size:24px; color:var(--ink)}

/* bento rhythm */
.bento-card.k1{grid-column:span 3; grid-row:span 2}
.bento-card.k2{grid-column:span 3}
.bento-card.k3{grid-column:span 3}
.bento-card.k4{grid-column:span 2}
.bento-card.k5{grid-column:span 2}
.bento-card.k6{grid-column:span 2; grid-row:span 2}
.bento-card.k7{grid-column:span 2}
.bento-card.k8{grid-column:span 2}
.bento-card.k9{grid-column:span 2}
.bento-card.k10{grid-column:span 3}

.bold-pager{justify-content:space-between; max-width:360px; margin:48px auto 0}

/* responsive */
@media (max-width:1100px){
  .df-cat-grid-layout{grid-template-columns:1fr}
  .df-side{position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
  .df-cat-hero-grid{grid-template-columns:1fr; gap:32px}
  .df-cat-hero-side{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:24px; flex-direction:row; flex-wrap:wrap}
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento-card.k1{grid-column:span 4}
  .bento-card.k6{grid-column:span 2}
  .df-mrow{grid-template-columns:100px 1fr; gap:16px}
  .df-mrow-buy{grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center}
  .df-mrow-price{text-align:left}
  .df-related{grid-template-columns:1fr}
  .bold-h-sub{grid-template-columns:1fr; gap:24px}
}
@media (max-width:700px){
  .bento{grid-template-columns:1fr 1fr}
  .bento-card[class*="k"]{grid-column:span 2 !important; grid-row:span 1 !important}
  .df-side{grid-template-columns:1fr}
  .bold-h-title{flex-direction:column; gap:8px}
}

/* =========================================================
   Additional glue for template-specific class names
   ========================================================= */

/* Prod tab counter that our templates use */
.df-prod-tab-c{font-family:"JetBrains Mono",monospace;font-size:11px;padding:2px 6px;background:var(--bg-2);border-radius:99px;color:var(--ink-3);margin-left:6px}
.df-prod-tab.is-active .df-prod-tab-c{background:var(--amber);color:#fff}

/* Prod body layout wrapper */
.df-prod-body{padding:40px 32px 80px}
.df-prod-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
@media(max-width:980px){.df-prod-layout{grid-template-columns:1fr}}
.df-prod-main{min-width:0}
.df-prod-aside{position:sticky;top:80px;align-self:start}
@media(max-width:980px){.df-prod-aside{position:static}}
.df-prod-section{padding:40px 0;border-bottom:1px solid var(--line)}
.df-prod-section:last-child{border-bottom:0}
.df-prod-panel{scroll-margin-top:100px}
.df-prod-panel[hidden]{display:none}
.df-prod-panel.is-active{display:block}

/* Panel head */
.df-prod-panel-head{margin-bottom:28px}
.df-prod-panel-head h2{margin:10px 0 0;font-size:clamp(28px,3.3vw,44px);line-height:1.1}

/* Long description responsive layout */
.df-prod-long{margin-top:60px}
.df-prod-long-head{margin-bottom:32px}
.df-prod-long-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;align-items:start}
@media(max-width:900px){.df-prod-long-layout{grid-template-columns:1fr}}
.df-prod-long-toc{position:sticky;top:120px;padding:18px 0;border-left:1px solid var(--line);padding-left:20px}
.df-prod-long-toc .df-toc-label{margin-bottom:10px}
.df-prod-long-toc ul{list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.5}
.df-prod-long-toc li{margin:0 0 8px}
.df-prod-long-toc a{display:flex;gap:10px;color:var(--ink-3);text-decoration:none;transition:color .15s}
.df-prod-long-toc a:hover,.df-prod-long-toc a.is-active{color:var(--ink)}
.df-prod-long-toc a.is-active{font-weight:600}
.df-prod-long-toc a span{color:var(--amber-deep);flex:none;min-width:22px}

/* Changelog filter pills */
.df-cl-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.df-cl-filter{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:4px}
.df-cl-f{padding:7px 12px;background:transparent;border:0;border-radius:7px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.df-cl-f:hover{color:var(--ink)}
.df-cl-f.is-active{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}

/* Sticky buy card (supplement) */
.df-sticky-buy{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg)}
.df-sb-price{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.df-sb-amount{font-size:40px;line-height:1;color:var(--ink)}
.df-sb-sub{font-size:12px;color:var(--ink-3);margin-top:6px}
.df-sb-off{text-align:right;color:var(--amber-deep);font-size:11.5px}
.df-sb-code{font-family:"JetBrains Mono",monospace;font-size:14px;background:color-mix(in oklch,var(--amber-soft) 40%,transparent);color:var(--amber-deep);padding:3px 8px;border-radius:6px;margin-top:4px;display:inline-block;font-weight:600;letter-spacing:.04em}
.df-sb-form{margin-bottom:10px}
.df-sb-add,.df-sb-demo{width:100%;justify-content:center}
.df-sb-demo{margin-bottom:16px}
.df-sb-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--ink-2);padding-top:14px;border-top:1px solid var(--line)}
.df-sb-list li{display:flex;align-items:center;gap:10px}
.df-sb-list svg{color:var(--amber-deep);flex:none}

/* Hero preview card enhancements for the template */
.df-prod-preview{position:relative}
.df-pp-image{width:100%;border-radius:10px;display:block}

/* Chips inside hero */
.df-prod-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.df-chip-platform{display:inline-flex;align-items:center;gap:6px}
.df-platform-dot{width:8px;height:8px;border-radius:99px;display:inline-block}

/* Prod badges (tech chips) */
.df-prod-badges{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0}
.df-prod-badge{font-size:11px;padding:5px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;color:var(--ink-2);letter-spacing:.02em}

/* Reassure list */
.df-prod-reassure{list-style:none;padding:0;margin:20px 0 0;display:flex;gap:22px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.df-prod-reassure li{display:flex;align-items:center;gap:6px}
.df-prod-reassure svg{color:var(--amber-deep)}

/* Category sidebar styling glue */
.df-side-block{padding:20px 0;border-bottom:1px solid var(--line)}
.df-side-block:last-child{border-bottom:0}
.df-side-block h4{margin:0 0 12px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.df-side-list{display:flex;flex-direction:column;gap:6px}
.df-side-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.df-side-opt:hover{background:var(--bg-2);color:var(--ink)}
.df-side-opt.is-on{background:color-mix(in oklch,var(--amber-soft) 30%,transparent);color:var(--ink);font-weight:500}
.df-side-opt input{accent-color:var(--amber-deep)}

/* Category grid layout */
.df-cat-grid-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:980px){.df-cat-grid-layout{grid-template-columns:1fr}}
.df-cat-side{position:sticky;top:80px;align-self:start}
@media(max-width:980px){.df-cat-side{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}}

/* Category toolbar */
.df-cat-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.df-cat-count b{font-weight:700}
.df-cat-sort{display:flex;gap:10px;align-items:center;font-size:13px}
.df-cat-sort select{padding:7px 28px 7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:13px;color:var(--ink);cursor:pointer;font-family:inherit}
.df-cat-view-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--card)}
.df-cat-view-seg button{padding:6px 10px;border:0;background:transparent;border-radius:6px;font-size:14px;color:var(--ink-3);cursor:pointer}
.df-cat-view-seg button.is-active{background:var(--bg-2);color:var(--ink)}

/* Category empty + related glue */
.df-cat-empty{padding:60px 20px;text-align:center;background:var(--bg-2);border-radius:16px;border:1px dashed var(--line)}
.df-cat-empty-mark{font-size:40px;color:var(--ink-3);margin-bottom:14px}
.df-cat-empty h3{margin:0 0 6px;font-size:20px}
.df-cat-empty p{margin:0 0 18px;color:var(--ink-3)}

.df-related-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
@media(max-width:700px){.df-related-cats{grid-template-columns:1fr}}
.df-rel-cat{display:flex;align-items:center;gap:16px;padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:transform .2s,border-color .2s;text-decoration:none;color:inherit}
.df-rel-cat:hover{transform:translateY(-2px);border-color:var(--amber-soft)}
.df-rel-body{flex:1}
.df-rel-name{font-weight:600;font-size:15px}
.df-rel-sub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.df-rel-arrow{width:30px;height:30px;background:var(--ink);color:var(--bg);border-radius:99px;display:grid;place-items:center;flex:none}

/* Category hero */
.df-cat-hero{padding:56px 0 36px;border-bottom:1px solid var(--line)}
.df-cat-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;margin-top:24px}
@media(max-width:900px){.df-cat-hero-grid{grid-template-columns:1fr;gap:32px;align-items:start}}
.df-cat-hero-side{display:flex;gap:36px;border-left:1px solid var(--line);padding-left:40px}
@media(max-width:900px){.df-cat-hero-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px;flex-wrap:wrap}}
.df-cat-stat-n{font-size:32px;line-height:1;color:var(--amber-deep)}
.df-cat-stat-l{font-size:12.5px;color:var(--ink-3);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

/* Category pill rail */
.df-cat-rail{border-bottom:1px solid var(--line);background:var(--bg-2);overflow-x:auto}
.df-cat-rail-inner{display:flex;gap:8px;padding:14px 32px;white-space:nowrap}
.df-cat-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--ink-2);text-decoration:none;transition:all .15s;flex:none}
.df-cat-pill:hover{border-color:var(--amber-soft);color:var(--ink)}
.df-cat-pill.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.df-cat-pill-gl{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;background:var(--bg-2);font-family:"Instrument Serif",serif;font-size:13px;color:var(--amber-deep)}
.df-cat-pill.is-active .df-cat-pill-gl{background:var(--amber);color:var(--ink)}
.df-cat-pill-ct{font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:1px 6px;background:var(--bg-2);border-radius:99px;color:var(--ink-3)}
.df-cat-pill.is-active .df-cat-pill-ct{background:color-mix(in oklch,var(--amber) 70%,transparent);color:var(--ink)}
.df-cat-list-wrap{padding:40px 32px 60px}

/* Category mrow glue */
.df-mrow-list{display:flex;flex-direction:column;gap:16px}
.df-mrow{display:grid;grid-template-columns:140px minmax(0,1fr) 180px;gap:22px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;transition:transform .15s,border-color .15s,box-shadow .15s;align-items:center}
.df-mrow:hover{border-color:var(--amber-soft);transform:translateY(-1px);box-shadow:var(--shadow)}
.df-mrow-thumb{position:relative;width:140px;height:100px;background:var(--bg-2);border-radius:10px;display:grid;place-items:center;overflow:hidden}
.df-mrow-thumb img{width:100%;height:100%;object-fit:cover}
.df-mrow-glyph{font-family:"Instrument Serif",serif;font-size:36px;color:var(--amber-deep)}
.df-mrow-plat{position:absolute;top:8px;right:8px;background:var(--ink);color:var(--bg);font-family:"JetBrains Mono",monospace;font-size:10px;padding:2px 6px;border-radius:4px}
.df-mrow-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.df-mrow-head h3{margin:0;font-size:17px;font-weight:600}
.df-mrow-stars{font-size:12px;color:var(--amber-deep);flex:none}
.df-mrow-desc{margin:4px 0 10px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.df-mrow-tags{display:flex;gap:6px;flex-wrap:wrap}
.df-mrow-buy{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:right}
.df-mrow-price{font-size:22px;font-weight:700;font-family:"Instrument Serif",serif;margin-bottom:4px}
.df-mrow-details{font-size:12px;justify-content:center}
@media(max-width:760px){
	.df-mrow{grid-template-columns:100px 1fr;gap:14px}
	.df-mrow-buy{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;text-align:left}
	.df-mrow-price{margin:0}
}

/* Category FAQ band wrapper (FAQ item styles come from the unified block) */
.df-cat-faq-band{padding:60px 32px 100px;border-top:1px solid var(--line);margin-top:40px}

/* Breadcrumbs helper */
.df-crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);margin-bottom:20px;flex-wrap:wrap}
.df-crumbs a{color:var(--ink-3);text-decoration:none}
.df-crumbs a:hover{color:var(--ink)}
.df-crumbs .df-sep{color:var(--ink-3);opacity:.5}
.df-crumbs .df-here{color:var(--ink);font-weight:500}

/* Sticky tabs visual state */
.df-prod-tabs.is-stuck{box-shadow:var(--shadow)}

/* Helper: muted text */
.df-muted{color:var(--ink-3);font-weight:400}

/* Stats (inline) */
.df-stars{color:var(--amber-deep);font-size:13px;font-weight:600}

/* Firefly dots in hero */
.df-pp-fly{position:absolute;width:6px;height:6px;border-radius:99px;background:var(--amber);box-shadow:0 0 12px var(--amber),0 0 20px var(--amber-soft);animation:df-fly 4s ease-in-out infinite}
.df-pp-fly.df-f2{animation-delay:-2s}
@keyframes df-fly{0%,100%{transform:translate(0,0);opacity:.6}50%{transform:translate(10px,-15px);opacity:1}}


/* =========================================================
   Checkout page styles (ported from checkout-styles.css)
   ========================================================= */

/* Checkout page styles */

.df-k-wrap{padding:28px 0 80px}
.df-k-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:36px; border-bottom:1px solid var(--line);
}
.df-k-brand{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; letter-spacing:-.01em}
.df-k-steps{display:flex; gap:20px; align-items:center}
.df-k-step{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3)}
.df-k-step .dot{width:8px; height:8px; border-radius:99px; background:var(--line)}
.df-k-step.on{color:var(--ink); font-weight:500}
.df-k-step.on .dot{background:var(--amber); box-shadow:0 0 0 3px oklch(0.9 0.12 78 / .2)}
.df-k-exit{font-size:13px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px}
.df-k-exit:hover{color:var(--ink)}

.df-k-grid{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:56px; align-items:start}

/* sections */
.df-k-sec{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:28px 30px; margin-bottom:18px;
}
.df-k-sec-head{display:grid; grid-template-columns:40px 1fr auto; gap:16px; align-items:center; margin-bottom:22px}
.df-k-sec-n{
  width:34px; height:34px; border-radius:99px;
  background:var(--bg-2); border:1px solid var(--line);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--amber-deep);
}
.df-k-sec-head h2{font-size:22px; font-weight:500; letter-spacing:-.015em}
.df-k-sec-head p{font-size:13.5px; color:var(--ink-3); margin-top:2px}
.df-k-secure{
  font-size:11px; padding:5px 10px; border-radius:99px;
  background:oklch(0.94 0.05 145); color:oklch(0.4 0.15 145); font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
}
[data-theme="dark"] .df-k-secure{background:oklch(0.28 0.1 145); color:oklch(0.85 0.1 145)}

/* fields */
.df-k-fields{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.df-k-field{display:flex; flex-direction:column; gap:6px; min-width:0}
.df-k-w-full{grid-column:1 / -1}
.df-k-lbl{font-size:12.5px; color:var(--ink-2); font-weight:500}
.df-k-req{color:var(--amber-deep); margin-left:3px}
.df-k-field input, .df-k-field select{
  padding:11px 14px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink);
  border-radius:10px; font:inherit; font-size:14px; outline:none;
  transition:border-color .15s, background .15s;
}
.df-k-field input:focus, .df-k-field select:focus{border-color:var(--amber); background:var(--card)}
.df-k-field input.df-err{border-color:oklch(0.65 0.2 25); background:oklch(0.97 0.03 25)}
[data-theme="dark"] .df-k-field input.df-err{background:oklch(0.25 0.08 25)}
.df-k-err{font-size:11.5px; color:oklch(0.55 0.2 25); font-weight:500}
.df-k-hint{font-size:12px; color:var(--ink-3); line-height:1.4}
.df-k-vat{position:relative}
.df-k-vat-ok{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:oklch(0.4 0.15 145); font-weight:500; margin-top:6px;
}
[data-theme="dark"] .df-k-vat-ok{color:oklch(0.78 0.12 145)}
.df-k-vat-ok svg{flex:none}

.df-k-check{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:8px 0; font-size:13.5px; color:var(--ink-2); line-height:1.5;
}
.df-k-check input{margin-top:2px; accent-color:var(--amber-deep); flex:none}
.df-k-check a{color:var(--ink); text-decoration:underline}

/* Addon card */
.df-k-addon{
  display:grid; grid-template-columns:22px 1fr; gap:14px; cursor:pointer;
  padding:20px 22px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-2); transition:border-color .15s, background .15s;
}
.df-k-addon:hover{border-color:var(--amber-soft)}
.df-k-addon.on{border-color:var(--amber); background:oklch(0.97 0.04 85)}
[data-theme="dark"] .df-k-addon.on{background:oklch(0.22 0.05 60)}
.df-k-addon input{margin-top:4px; accent-color:var(--amber-deep)}
.df-k-addon-head{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.df-k-addon-head h4{font-size:15px; font-weight:600}
.df-k-addon-price{font-size:13px; color:var(--amber-deep); font-weight:600; font-family:"JetBrains Mono",monospace}
.df-k-addon-body p{font-size:13px; color:var(--ink-3); margin-top:6px; line-height:1.5}

/* Payment tabs */
.df-k-pay-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.df-k-pay-tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:14px 16px; border:1px solid var(--line); background:var(--bg-2);
  border-radius:10px; font-size:13.5px; font-weight:500; cursor:pointer; text-align:left;
  transition:border-color .15s, background .15s;
}
.df-k-pay-tab:hover{border-color:var(--amber-soft)}
.df-k-pay-tab.on{border-color:var(--ink); background:var(--card); box-shadow:0 0 0 3px oklch(0.9 0.12 78 / .15)}
.df-k-pay-logo{
  font-size:11px; padding:2px 7px; border-radius:5px;
  background:var(--ink); color:var(--bg); font-weight:700; letter-spacing:-.01em;
  font-family:"JetBrains Mono",monospace;
}
.df-k-pay-sub{font-size:11px; color:var(--ink-3); font-weight:400}

.df-k-card-wrap{position:relative}
.df-k-card-brands{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:flex; gap:4px;
}
.df-k-card-brands i{
  font-size:9.5px; padding:2px 5px; border:1px solid var(--line); border-radius:4px;
  font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--ink-3); font-style:normal;
}

.df-k-pay-redirect{
  padding:16px 18px; margin-top:14px;
  background:oklch(0.95 0.04 85); border:1px dashed var(--amber); border-radius:10px;
  font-size:13.5px; color:var(--ink-2); line-height:1.5;
}
[data-theme="dark"] .df-k-pay-redirect{background:oklch(0.22 0.06 60)}

/* Submit */
.df-k-submit{margin-top:28px}
.df-k-submit-btn{
  width:100%; justify-content:center; font-size:15px; padding:16px 20px !important;
  margin-top:12px;
}
.df-k-submit-btn:disabled{opacity:.5; cursor:not-allowed}
.df-k-submit-fine{font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:14px; line-height:1.5}

/* Summary */
.df-k-summary{position:sticky; top:100px}
.df-k-sum-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px 26px; box-shadow:var(--shadow);
}
.df-k-sum-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.df-k-sum-head h3{font-size:17px; font-weight:600}
.df-k-sum-head .mono{font-size:12px; color:var(--ink-3)}

.df-k-items{display:flex; flex-direction:column; gap:16px; margin-bottom:20px}
.df-k-item{display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:flex-start}
.df-k-item-thumb{
  width:48px; height:48px; border-radius:10px; position:relative;
  background:repeating-linear-gradient(135deg, var(--bg-2) 0 6px, var(--bg-3) 6px 7px);
  display:grid; place-items:center; overflow:hidden;
}
.df-k-item-thumb .df-glyph{
  width:32px; height:32px; border-radius:7px; font-size:10px; font-weight:700; color:#1a1506;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  display:grid; place-items:center;
}
.df-k-item-thumb .df-plat{
  position:absolute; top:2px; right:2px; font-size:8px; padding:1px 3px;
  background:var(--card); border-radius:3px; color:var(--ink-3); font-weight:600;
}
.df-k-item-name{font-size:14px; font-weight:600; letter-spacing:-.005em; line-height:1.3}
.df-k-item-meta{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.df-k-item-qty{display:flex; align-items:center; gap:4px; margin-top:8px}
.df-k-item-qty button{
  width:22px; height:22px; border-radius:6px; background:var(--bg-2); border:1px solid var(--line);
  font-size:14px; line-height:1; color:var(--ink-2); display:grid; place-items:center;
}
.df-k-item-qty button:hover{background:var(--card); color:var(--ink)}
.df-k-item-qty span{font-size:12.5px; min-width:20px; text-align:center; font-weight:500}
.df-k-item-x{
  margin-left:10px; font-size:11px; color:var(--ink-3); text-decoration:underline; background:none !important;
  border:none !important; width:auto !important; padding:0 !important;
}
.df-k-item-x:hover{color:oklch(0.55 0.2 25)}
.df-k-item-price{font-size:14px; font-weight:600; text-align:right; white-space:nowrap; padding-top:2px}

/* Promo */
.df-k-promo{display:flex; gap:6px; margin-top:4px}
.df-k-promo input{
  flex:1; padding:10px 12px; border:1px dashed var(--line); background:var(--bg-2);
  color:var(--ink); border-radius:8px; font:inherit; font-size:13px; outline:none; min-width:0;
  letter-spacing:.05em; text-transform:uppercase;
}
.df-k-promo input:focus{border-color:var(--amber); border-style:solid}
.df-k-promo .btn{padding:10px 16px; font-size:13px}

.df-k-promo-applied{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; margin-top:8px;
  background:oklch(0.94 0.06 145); border:1px solid oklch(0.85 0.1 145); border-radius:8px;
  font-size:12.5px; color:oklch(0.35 0.15 145);
}
[data-theme="dark"] .df-k-promo-applied{background:oklch(0.26 0.08 145); color:oklch(0.88 0.1 145); border-color:oklch(0.4 0.1 145)}
.df-k-promo-applied button{font-size:11px; color:inherit; opacity:.7; text-decoration:underline}
.df-k-promo-applied button:hover{opacity:1}
.df-k-promo-applied svg{display:inline; margin-right:4px; vertical-align:-3px}

/* Totals */
.df-k-totals{margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.df-k-totals > div{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; color:var(--ink-2)}
.df-k-totals dt{color:var(--ink-3)}
.df-k-totals dd{margin:0; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink)}
.df-k-totals .df-disc dd{color:oklch(0.5 0.15 145)}
[data-theme="dark"] .df-k-totals .df-disc dd{color:oklch(0.78 0.12 145)}
.df-k-totals .total{padding-top:12px; margin-top:4px; border-top:1px solid var(--line); font-size:16px}
.df-k-totals .total dt{color:var(--ink); font-weight:600}
.df-k-totals .total dd{font-size:30px; font-weight:400; line-height:1}

/* Trust */
.df-k-trust{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.df-k-trust-item{display:flex; gap:12px; align-items:flex-start}
.df-k-trust-i{
  width:32px; height:32px; border-radius:8px; background:oklch(0.94 0.05 145); color:oklch(0.4 0.15 145);
  display:grid; place-items:center; flex:none; font-size:14px;
}
[data-theme="dark"] .df-k-trust-i{background:oklch(0.28 0.1 145); color:oklch(0.85 0.1 145)}
.df-k-trust-item b{font-size:13px; display:block; margin-bottom:4px}
.df-k-trust-item p{font-size:12px; color:var(--ink-3); line-height:1.5; margin:0}

/* Empty */
.df-k-empty{padding:80px 32px 120px; text-align:center}
.df-k-empty-mark{font-size:64px; color:var(--ink-3); opacity:.4}
.df-k-empty em{font-style:italic; color:var(--amber-deep)}

/* Thank you */
.df-k-thanks{padding:48px 0 40px}
.df-k-thanks-hero{text-align:center; padding:40px 20px 80px; position:relative}
.df-k-check-big{
  width:80px; height:80px; border-radius:99px; margin:0 auto 24px;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  color:#1a1506; display:grid; place-items:center;
  box-shadow:0 12px 40px -10px var(--amber-deep), 0 0 60px oklch(0.85 0.15 80 / .3);
  animation:popIn .6s cubic-bezier(.2,.8,.3,1.1);
}
.df-k-check-big svg{width:32px; height:32px; stroke-width:3}
@keyframes popIn{
  0%{transform:scale(0) rotate(-20deg); opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1) rotate(0); opacity:1}
}
.df-k-thanks-hero em{font-style:italic; color:var(--amber-deep)}
.df-k-order-meta{display:inline-flex; gap:16px; align-items:center; margin-top:28px; padding:10px 20px; background:var(--bg-2); border:1px solid var(--line); border-radius:99px; font-size:12.5px; color:var(--ink-3); flex-wrap:wrap}
.df-k-order-meta b{color:var(--ink)}

/* Downloads */
.df-k-downloads{margin-bottom:60px}
.df-k-dl-head{margin-bottom:20px}
.df-k-dl-list{display:flex; flex-direction:column; gap:10px}
.df-k-dl-item{
  display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 22px;
}
.df-k-dl-thumb{
  width:48px; height:48px; border-radius:10px;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  color:#1a1506; font-weight:700; display:grid; place-items:center;
}
.df-k-dl-name{font-size:15px; font-weight:600}
.df-k-dl-key{font-size:11px; color:var(--ink-3); margin-top:4px; letter-spacing:.05em}
.df-k-dl-actions{display:flex; gap:8px}

/* Upsell */
.df-k-upsell{
  display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:center;
  padding:40px 44px; margin-bottom:60px;
  background:
    radial-gradient(ellipse 60% 50% at 85% 50%, oklch(0.82 0.16 75 / .12), transparent 70%),
    var(--card);
  border:1px solid var(--amber-soft); border-radius:20px;
  box-shadow:0 20px 60px -20px oklch(0.7 0.15 60 / .25);
}
.df-k-upsell em{font-style:italic; color:var(--amber-deep)}
.df-k-upsell-tag{
  display:inline-block; font-size:10.5px; padding:4px 10px; border-radius:99px;
  background:oklch(0.92 0.08 25); color:oklch(0.45 0.15 25); font-weight:700; letter-spacing:.08em;
}
[data-theme="dark"] .df-k-upsell-tag{background:oklch(0.3 0.12 25); color:oklch(0.88 0.1 25)}
.df-k-upsell-why{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13.5px}
.df-k-upsell-why li{display:flex; gap:8px; align-items:center; color:var(--ink-2)}
.df-k-upsell-why svg{color:var(--amber-deep); flex:none}
.df-k-upsell-cta{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap}
.df-k-upsell-price-was{display:flex; gap:10px; align-items:center; font-size:12px; color:var(--ink-3); margin-top:14px}
.df-k-upsell-strike{width:40px; height:1px; background:var(--ink-3); opacity:.4}

.df-k-upsell-card{
  background:var(--bg); border:1px solid var(--line); border-radius:16px;
  padding:28px 24px; text-align:center;
  transform:rotate(-1.5deg); transition:transform .3s;
}
.df-k-upsell-card:hover{transform:rotate(0)}
.df-k-upsell-glyph{
  width:72px; height:72px; border-radius:16px; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--amber), var(--amber-deep));
  color:#1a1506; font-weight:700; font-size:20px; display:grid; place-items:center;
  box-shadow:0 16px 40px -10px var(--amber-deep);
}
.df-k-upsell-name{font-size:18px; font-weight:600}
.df-k-upsell-plat{font-size:12px; color:var(--ink-3); margin-top:4px}
.df-k-upsell-stars{font-size:13px; color:var(--amber-deep); font-weight:600; margin-top:10px}

.df-k-upsell-done{
  padding:16px 20px; margin-bottom:60px;
  background:oklch(0.94 0.06 145); border:1px solid oklch(0.85 0.1 145); border-radius:12px;
  font-size:14px; color:oklch(0.35 0.15 145); display:flex; align-items:center; gap:8px;
}
[data-theme="dark"] .df-k-upsell-done{background:oklch(0.26 0.08 145); color:oklch(0.88 0.1 145); border-color:oklch(0.4 0.1 145)}
.df-k-upsell-done svg{color:inherit}

/* Next steps */
.df-k-next{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px}
.df-k-next-item{
  padding:28px; background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.df-k-next-n{
  font-size:48px; line-height:1; color:var(--amber-deep); margin-bottom:14px; font-weight:400;
}
.df-k-next-item h4{font-size:16px; font-weight:600; margin-bottom:8px}
.df-k-next-item p{font-size:13.5px; color:var(--ink-3); line-height:1.55; margin:0}

/* Responsive */
@media (max-width:1100px){
  .df-k-grid{grid-template-columns:1fr; gap:32px}
  .df-k-summary{position:static}
  .df-k-upsell{grid-template-columns:1fr; padding:30px}
  .df-k-upsell-card{display:none}
  .df-k-pay-tabs{grid-template-columns:repeat(2,1fr)}
  .df-k-next{grid-template-columns:1fr}
}
@media (max-width:700px){
  .df-k-fields{grid-template-columns:1fr}
  .df-k-steps{display:none}
  .df-k-dl-item{grid-template-columns:1fr; gap:12px}
  .df-k-dl-actions{grid-column:1 / -1}
  .df-k-pay-tabs{grid-template-columns:1fr}
}

/* =========================================================
   Checkout / cart / thankyou — template-specific glue
   ========================================================= */

/* Brand mark in checkout header */
.df-logo-mark{
	width:24px;height:24px;border-radius:6px;position:relative;
	background:radial-gradient(circle at 30% 30%,var(--amber-soft),var(--amber-deep) 70%);
	box-shadow:0 0 10px color-mix(in oklch,var(--amber) 60%,transparent),inset 0 -3px 6px rgba(0,0,0,.15);
}
.df-logo-mark::after{
	content:"";position:absolute;inset:5px;border-radius:4px;
	background:radial-gradient(circle at 30% 30%,#fff9,transparent 55%);
}

/* Totals layout */
.df-k-totals{margin:20px 0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.df-k-totals > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.df-k-totals dt{margin:0;color:var(--ink-2);font-weight:500;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.df-k-totals dd{margin:0;font-weight:500;color:var(--ink);font-family:"JetBrains Mono",monospace;font-size:13.5px}
.df-k-totals .df-total{padding-top:14px;border-top:1px solid var(--line);margin-top:6px;align-items:center}
.df-k-totals .df-total dt{font-size:15px;color:var(--ink);font-weight:600}
.df-k-totals .df-total dd{font-size:28px;font-weight:400;font-family:"Instrument Serif",serif}
.df-k-disc dt{color:var(--amber-deep)}
.df-k-disc dd{color:var(--amber-deep)}

/* Promo applied row */
.df-k-promo-applied{
	display:flex;justify-content:space-between;align-items:center;gap:10px;
	padding:10px 14px;margin:8px 0;
	background:oklch(0.96 0.05 145 / .6);border:1px solid oklch(0.85 0.12 145);
	border-radius:10px;font-size:13px;color:oklch(0.35 0.15 145);
}
.df-k-promo-applied span{display:inline-flex;align-items:center;gap:6px}
.df-k-promo-applied a{color:oklch(0.35 0.15 145);font-size:12px;text-decoration:underline}
[data-theme="dark"] .df-k-promo-applied{background:oklch(0.25 0.08 145 / .4);color:oklch(0.85 0.12 145);border-color:oklch(0.4 0.12 145)}
[data-theme="dark"] .df-k-promo-applied a{color:oklch(0.85 0.12 145)}

/* WC review-order table — rendered inside .df-k-review, hide the default table styling */
.df-k-review .shop_table{width:100%;border-collapse:collapse}
.df-k-review .shop_table th,.df-k-review .shop_table td{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.df-k-review .shop_table tfoot th{font-weight:600;color:var(--ink-2)}
.df-k-review #payment{margin-top:16px}
.df-k-review #payment ul.payment_methods{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.df-k-review #payment .payment_box{background:var(--bg-2);padding:14px;border-radius:8px;margin-top:6px;font-size:13px;color:var(--ink-2)}
.df-k-review #payment label{font-weight:500;font-size:14px;display:flex;align-items:center;gap:10px;cursor:pointer}
/* #place_order lives inside .df-k-submit now — use its own styling there */

/* Give WC's billing form fields the design look */
.df-k-sec-billing .form-row,.df-k-sec-contact .form-row{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.df-k-sec-billing .form-row label,.df-k-sec-contact .form-row label{font-size:12.5px;color:var(--ink-2);font-weight:500}
.df-k-sec-billing .form-row input,.df-k-sec-billing .form-row select,.df-k-sec-billing .form-row textarea,
.df-k-sec-contact .form-row input,.df-k-sec-contact .form-row select,.df-k-sec-contact .form-row textarea{
	width:100%;padding:11px 14px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
	border-radius:10px;font:inherit;font-size:14px;outline:none;transition:border-color .15s,background .15s;
}
.df-k-sec-billing .form-row input:focus,.df-k-sec-contact .form-row input:focus,
.df-k-sec-billing .form-row select:focus,.df-k-sec-contact .form-row select:focus{border-color:var(--amber);background:var(--card)}
.df-k-sec-billing .form-row-wide,.df-k-sec-billing .form-row-last,.df-k-sec-billing .form-row-first{grid-column:span 1}
.df-k-sec-billing .form-row.form-row-wide,.df-k-sec-contact .form-row-wide{grid-column:1 / -1}
.df-k-sec-billing .form-row.address-field,.df-k-sec-billing .form-row#billing_address_1_field,.df-k-sec-billing .form-row#billing_email_field,
.df-k-sec-billing .form-row#billing_company_field,.df-k-sec-billing .form-row#billing_country_field{grid-column:1 / -1}
.df-k-sec-billing .required{color:var(--amber-deep);margin-left:3px}
.df-k-sec-billing .select2-selection{
	padding:6px 10px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
	border-radius:10px;font-size:14px;min-height:44px;
}
.df-k-sec-billing .select2-selection__rendered{line-height:30px}

/* Shipping toggle */
.df-k-shipping-toggle{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}

/* Cart page layout */
.df-k-cart-page{padding:40px 0 80px}
.df-k-cart-head{max-width:820px;margin:0 auto 40px;text-align:center}
.df-k-cart-title{margin:12px 0}
.df-k-cart-lede{margin:16px auto 0;max-width:600px}
.df-k-cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start}
@media(max-width:900px){.df-k-cart-grid{grid-template-columns:1fr;gap:32px}}
.df-k-cart-actions{display:flex;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.df-k-co-btn{width:100%;justify-content:center;margin-top:8px}
.df-k-reassure{margin-top:16px}

/* Cart qty controls */
.df-k-qty-down,.df-k-qty-up{
	width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--card);
	font-size:14px;cursor:pointer;color:var(--ink-2);transition:all .15s;
}
.df-k-qty-down:hover,.df-k-qty-up:hover{background:var(--bg-2);color:var(--ink)}
.df-k-qty-in{width:44px;text-align:center;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 0;font-size:13px;color:var(--ink);font-family:"JetBrains Mono",monospace}

/* Thank-you supplements */
.df-k-thanks{padding:60px 0 100px}
.df-k-thanks-hero{text-align:center;max-width:780px;margin:0 auto}
.df-k-thanks-title{margin:16px 0 0;font-size:clamp(44px,5.5vw,72px)}
.df-k-thanks-lede{margin:18px auto 0;max-width:640px}
.df-k-order-note{
	margin:24px auto 0;max-width:560px;font-style:italic;color:var(--ink-2);
	padding:16px 20px;background:var(--bg-2);border-left:3px solid var(--amber);border-radius:0 10px 10px 0;font-size:14px;
}
.df-k-check-big{
	width:72px;height:72px;border-radius:99px;
	background:oklch(0.9 0.15 145);color:oklch(0.35 0.18 145);
	display:grid;place-items:center;margin:0 auto 20px;
	box-shadow:0 0 0 8px oklch(0.95 0.1 145 / .6);
}
.df-k-check-big svg{width:40px;height:40px;stroke-width:3}
[data-theme="dark"] .df-k-check-big{background:oklch(0.32 0.15 145);color:oklch(0.9 0.15 145);box-shadow:0 0 0 8px oklch(0.22 0.1 145 / .6)}
.df-k-thanks-foot{display:flex;justify-content:center;gap:14px;padding:40px 0 20px;flex-wrap:wrap}
.df-k-upsell-off{color:var(--amber-deep)}
.df-k-upsell-title{margin:14px 0 0}
.df-k-upsell-desc{margin:14px 0 0;font-size:16px}
.df-k-dl-title{margin-top:10px}

/* Empty cart supplements */
.df-k-empty{padding:80px 32px 100px}
.df-k-empty-head{text-align:center;margin-bottom:48px}
.df-k-empty-title{margin:18px 0 0}
.df-k-empty-lede{margin:14px auto 0;max-width:520px}
.df-k-empty-grid{margin-top:40px}
.df-k-empty-cta{text-align:center;margin-top:48px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* Responsive grid for the main checkout */
@media(max-width:980px){.df-k-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:620px){.df-k-fields{grid-template-columns:1fr}}

/* Ensure WC messages look clean on these pages */
.woocommerce-notices-wrapper{max-width:1200px;margin:0 auto 20px;padding:0 32px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
	padding:14px 18px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);font-size:14px;
	margin:0 0 12px;display:flex;align-items:center;gap:10px;
}
.woocommerce-message{border-color:oklch(0.85 0.12 145);background:oklch(0.97 0.05 145 / .4);color:oklch(0.35 0.15 145)}
.woocommerce-error{border-color:oklch(0.75 0.2 25);background:oklch(0.97 0.04 25 / .5);color:oklch(0.5 0.2 25)}
.woocommerce-error li{list-style:none}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;font-size:13px}

/* =========================================================
   Side cart drawer
   ========================================================= */

/* Defensive: fixed to viewport with explicit dimensions so no parent
   transform / overflow / positioning context can break the layout. */
.df-cart-drawer,
.df-cart-drawer-overlay,
.df-cart-drawer-panel{box-sizing:border-box}

.df-cart-drawer{
	position:fixed !important;
	top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
	width:100vw; height:100vh;
	z-index:99999;
	pointer-events:none;opacity:0;
	transition:opacity .24s ease;
	/* Reset — no margin/padding could push it off */
	margin:0; padding:0;
	/* Ensure we are our own positioning context */
	transform:none; filter:none;
}
.df-cart-drawer.is-open{opacity:1;pointer-events:auto}

.df-cart-drawer-overlay{
	position:absolute;
	top:0;right:0;bottom:0;left:0;
	width:100%; height:100%;
	background:rgba(10,10,15,.55);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	opacity:0;transition:opacity .24s ease;
}
.df-cart-drawer.is-open .df-cart-drawer-overlay{opacity:1}

.df-cart-drawer-panel{
	position:absolute;
	top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
	height:100% !important;
	width:420px;
	max-width:100%;
	background:var(--card,#fff);
	box-shadow:-24px 0 60px -12px rgba(0,0,0,.25);
	display:flex;flex-direction:column;
	transform:translateX(100%);
	transition:transform .3s cubic-bezier(.22,.61,.36,1);
	border-left:1px solid var(--line);
	margin:0; padding:0;
}
.df-cart-drawer.is-open .df-cart-drawer-panel{transform:translateX(0)}

.df-cart-drawer-head{
	display:flex;justify-content:space-between;align-items:center;
	padding:22px 26px;border-bottom:1px solid var(--line);
	flex:none;
}
.df-cart-drawer-head h3{margin:0;font-size:26px;font-weight:400;letter-spacing:-.01em}
.df-cart-drawer-x{
	width:36px;height:36px;border-radius:10px;border:0;background:var(--bg-2);
	font-size:24px;line-height:1;color:var(--ink-2);cursor:pointer;
	transition:background .15s,color .15s;
}
.df-cart-drawer-x:hover{background:var(--line);color:var(--ink)}

.df-cart-drawer-body-wrap{
	flex:1;overflow-y:auto;display:flex;flex-direction:column;
}

.df-cart-drawer-items{
	list-style:none;padding:0;margin:0;flex:1;
}
.df-cart-drawer-item{
	display:grid;grid-template-columns:64px 1fr auto;gap:14px;
	padding:16px 26px;border-bottom:1px solid var(--line);
	align-items:center;position:relative;
}
.df-cart-drawer-thumb{
	position:relative;width:64px;height:64px;border-radius:10px;
	background:var(--bg-2);overflow:hidden;
	display:grid;place-items:center;
}
.df-cart-drawer-thumb img{width:100%;height:100%;object-fit:cover}
.df-cart-drawer-thumb .df-glyph{font-family:"Instrument Serif",serif;font-size:24px;color:var(--amber-deep)}
.df-cart-drawer-thumb .df-plat{
	position:absolute;top:4px;right:4px;
	background:var(--ink);color:var(--bg);
	font-family:"JetBrains Mono",monospace;font-size:9px;padding:1px 4px;border-radius:3px;
}
.df-cart-drawer-body{min-width:0}
.df-cart-drawer-name{
	font-size:14px;font-weight:500;line-height:1.3;
	overflow:hidden;text-overflow:ellipsis;
}
.df-cart-drawer-name a{color:inherit;text-decoration:none}
.df-cart-drawer-name a:hover{color:var(--amber-deep)}
.df-cart-drawer-meta{
	font-size:12.5px;color:var(--ink-3);margin-top:4px;
	font-family:"JetBrains Mono",monospace;
}
.df-cart-drawer-remove{
	position:absolute;top:10px;right:20px;
	width:22px;height:22px;border-radius:99px;
	background:var(--bg-2);color:var(--ink-3);
	display:grid;place-items:center;font-size:16px;line-height:1;
	text-decoration:none;transition:all .15s;
}
.df-cart-drawer-remove:hover{background:oklch(0.95 0.08 25);color:oklch(0.5 0.2 25)}

.df-cart-drawer-foot{
	flex:none;padding:20px 26px 28px;border-top:1px solid var(--line);
	background:var(--bg-2);
}
.df-cart-drawer-subtotal{
	display:flex;justify-content:space-between;align-items:baseline;
	font-size:14px;margin-bottom:14px;
}
.df-cart-drawer-subtotal strong{
	font-size:22px;font-weight:400;font-family:"Instrument Serif",serif;
	color:var(--ink);
}
.df-cart-drawer-buttons{display:flex;flex-direction:column;gap:8px}
.df-cart-drawer-view,.df-cart-drawer-checkout{width:100%;justify-content:center}

.df-cart-drawer-empty{
	padding:60px 26px;text-align:center;flex:1;
	display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
}
.df-cart-drawer-empty-mark{font-size:46px;color:var(--ink-3);line-height:1}
.df-cart-drawer-empty-label{margin:0;color:var(--ink-2);font-size:15px}

/* Loading state during AJAX */
.df-cart-drawer.is-loading .df-cart-drawer-body-wrap{opacity:.5;pointer-events:none}
/* widget_shopping_cart_content is the wrapper WC refreshes via fragments — it's
   the same element as .df-cart-drawer-body-wrap, so its styling flows from there. */

/* Prevent body scroll while drawer is open */
body.df-cart-open{overflow:hidden}

@media(max-width:520px){
	.df-cart-drawer-panel{width:100%}
}

/* =========================================================
   Search results page
   ========================================================= */

.df-search-page{padding-bottom:80px}

/* Hero */
.df-search-hero{
	padding:56px 0 40px;
	border-bottom:1px solid var(--line);
	background:linear-gradient(180deg,var(--bg-2),var(--bg));
}
.df-search-hero .df-eyebrow{display:block;margin-bottom:10px}
.df-search-title{
	font-size:clamp(36px,5vw,64px);
	line-height:1.05;letter-spacing:-.015em;
	margin:0 0 14px;max-width:820px;
}
.df-search-lede{max-width:620px;margin:0 0 28px}

/* Big search form */
.df-search-form-big{
	display:flex;align-items:center;gap:10px;
	max-width:680px;
	background:var(--card);
	border:1px solid var(--line);border-radius:14px;
	padding:8px 8px 8px 16px;
	box-shadow:var(--shadow);
	margin-bottom:22px;
}
.df-search-form-big svg{color:var(--ink-3);flex:none}
.df-search-form-big input[type=search]{
	flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
	font:inherit;font-size:15px;padding:10px 8px;outline:none;
}
.df-search-form-big input[type=search]::placeholder{color:var(--ink-3)}
.df-search-form-big .df-btn{flex:none;padding:10px 18px}

/* Type filter pills */
.df-search-filters{
	display:flex;gap:8px;flex-wrap:wrap;
	padding-top:6px;
}
.df-search-filter{
	display:inline-flex;align-items:center;padding:7px 14px;
	border-radius:99px;background:var(--card);
	border:1px solid var(--line);
	font-size:13px;font-weight:500;color:var(--ink-2);
	text-decoration:none;transition:all .15s;
}
.df-search-filter:hover{border-color:var(--amber-soft);color:var(--ink)}
.df-search-filter.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Body layout */
.df-search-body{padding-top:40px;display:flex;flex-direction:column;gap:56px}

/* Each result group */
.df-search-group{}
.df-search-group-head{margin-bottom:20px}
.df-search-group-head h2{margin:6px 0 0;font-size:clamp(28px,3vw,40px);line-height:1.1}
.df-search-modules{margin-top:10px}

/* Article / page list rows */
.df-search-list{display:flex;flex-direction:column;gap:14px}
.df-search-row{
	display:grid;grid-template-columns:160px 1fr 40px;gap:22px;
	padding:20px 22px;
	background:var(--card);border:1px solid var(--line);border-radius:14px;
	text-decoration:none;color:inherit;align-items:center;
	transition:transform .15s,border-color .15s,box-shadow .15s;
}
.df-search-row:hover{transform:translateY(-1px);border-color:var(--amber-soft);box-shadow:var(--shadow)}
.df-search-row-compact{grid-template-columns:1fr 40px}
.df-search-row-thumb{
	width:160px;height:108px;border-radius:10px;
	background:var(--bg-2);overflow:hidden;
	display:grid;place-items:center;
}
.df-search-row-thumb img{width:100%;height:100%;object-fit:cover}
.df-search-row-thumb .df-glyph{font-family:"Instrument Serif",serif;font-size:44px;color:var(--amber-deep)}
.df-search-row-body{min-width:0}
.df-search-row-meta{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.df-search-row-title{margin:0 0 6px;font-size:18px;font-weight:600;line-height:1.3}
.df-search-row-excerpt{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.df-search-row-arrow{
	width:36px;height:36px;border-radius:99px;
	background:var(--bg-2);color:var(--ink-2);
	display:grid;place-items:center;flex:none;
	transition:background .15s,color .15s;
}
.df-search-row:hover .df-search-row-arrow{background:var(--ink);color:var(--bg)}

/* Empty state */
.df-search-empty{
	max-width:820px;margin:20px auto 0;text-align:center;
	padding:40px 20px 20px;
}
.df-search-empty-mark{font-size:56px;color:var(--ink-3);line-height:1;margin-bottom:18px}
.df-search-empty h2{margin:0 0 14px;font-size:clamp(32px,4vw,48px);line-height:1.1}
.df-search-empty-lede{margin:0 auto 36px;max-width:520px}

.df-search-suggest{margin-top:32px;text-align:left}
.df-search-suggest-label{margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase}
.df-search-suggest-pills{display:flex;gap:8px;flex-wrap:wrap}

/* Responsive */
@media(max-width:760px){
	.df-search-row{grid-template-columns:110px 1fr 32px;gap:14px;padding:14px}
	.df-search-row-thumb{width:110px;height:80px}
	.df-search-row-thumb .df-glyph{font-size:30px}
	.df-search-row-title{font-size:16px}
	.df-search-form-big{flex-wrap:wrap;padding:8px}
	.df-search-form-big .df-btn{width:100%;justify-content:center}
}

/* =========================================================
   WooCommerce reset — minimal styling for WC elements
   that used to be handled by the default WC stylesheets we disabled
   ========================================================= */

/* Screen-reader-only helper (WC uses this heavily) */
.screen-reader-text{
	position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Star ratings — WC renders .star-rating with a span whose width = rating percent.
   Use plain Unicode stars so we don't need WC's star.woff font. */
.star-rating{
	overflow:hidden;position:relative;height:1em;line-height:1;
	font-size:15px;width:5.4em;letter-spacing:.15em;
	color:var(--amber-deep);
}
.star-rating::before{content:"\2606\2606\2606\2606\2606";opacity:.35;float:left;top:0;left:0;position:absolute}
.star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em;white-space:nowrap}
.star-rating span::before{content:"\2605\2605\2605\2605\2605";top:0;position:absolute;left:0;color:var(--amber-deep)}

/* Sale badge */
.onsale{
	position:absolute;top:12px;left:12px;z-index:2;
	background:var(--amber);color:var(--ink);
	font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
	letter-spacing:.04em;text-transform:uppercase;
	padding:4px 10px;border-radius:99px;
}

/* Price: sale price formatting (del = old price, ins = new) */
.df-price ins,ins.df-price,.woocommerce-Price-amount{text-decoration:none;background:transparent}
.df-price del,del.df-price{opacity:.55;margin-right:8px}
.df-price ins{color:var(--amber-deep);font-weight:600}

/* Woocommerce notices (we already have a base style — harden it) */
.woocommerce-notices-wrapper{margin:0 0 20px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
	list-style:none;padding:14px 18px;border-radius:10px;
	border:1px solid var(--line);background:var(--bg-2);
	font-size:14px;margin:0 0 12px;
	display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{
	font-family:"JetBrains Mono",monospace;font-weight:700;flex:none;font-size:13px;
}
.woocommerce-message{
	border-color:oklch(0.85 0.12 145);background:oklch(0.97 0.05 145 / .5);color:oklch(0.3 0.15 145);
}
.woocommerce-message::before{content:"✓";color:oklch(0.35 0.15 145)}
.woocommerce-info{border-color:oklch(0.8 0.12 230);background:oklch(0.96 0.05 230 / .5);color:oklch(0.35 0.15 230)}
.woocommerce-info::before{content:"i";font-style:italic}
.woocommerce-error{border-color:oklch(0.75 0.2 25);background:oklch(0.97 0.04 25 / .6);color:oklch(0.45 0.2 25)}
.woocommerce-error li{list-style:none}
.woocommerce-error::before{content:"!"}
.woocommerce-message .button,.woocommerce-info .button{
	margin-left:auto;font-size:13px;padding:6px 12px;background:transparent;
	border:1px solid currentColor;border-radius:8px;color:inherit;text-decoration:none;
}
.woocommerce-NoticeGroup{margin-bottom:20px}

/* WC form-rows — make them behave like our grid fields (cart/checkout) */
.woocommerce form .form-row{margin:0;padding:0}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
	padding:11px 14px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
	border-radius:10px;font:inherit;font-size:14px;outline:none;
	transition:border-color .15s,background .15s;width:100%;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--amber);background:var(--card)}
.woocommerce form .form-row.woocommerce-validated input{border-color:oklch(0.8 0.1 145)}
.woocommerce form .form-row.woocommerce-invalid input{border-color:oklch(0.7 0.18 25)}
.woocommerce form .form-row label{font-size:12.5px;color:var(--ink-2);font-weight:500;margin-bottom:6px;display:block}
.woocommerce form .form-row .required{color:var(--amber-deep);margin-left:3px}

/* Quantity input on single product / cart */
.quantity{display:inline-flex;align-items:center;gap:6px}
.quantity input[type=number]{
	width:60px;text-align:center;padding:8px 6px;
	border:1px solid var(--line);background:var(--card);border-radius:8px;
	font:inherit;font-size:14px;color:var(--ink);
	font-family:"JetBrains Mono",monospace;
}
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Woo buttons default — map to our amber button */
.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button,.woocommerce-page a.button,.woocommerce-page input.button{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	padding:11px 20px;background:var(--ink);color:var(--bg);
	border:0;border-radius:10px;font:inherit;font-size:14px;font-weight:500;
	text-decoration:none;cursor:pointer;transition:transform .15s,background .15s;
}
.woocommerce button.button:hover,.woocommerce a.button:hover,.woocommerce input.button:hover{
	transform:translateY(-1px);background:var(--ink-2);
}
.woocommerce button.button.alt,.woocommerce a.button.alt,.woocommerce input.button.alt,
.woocommerce button.button.wp-element-button{
	background:var(--amber);color:var(--ink);font-weight:600;
}
.woocommerce button.button.alt:hover,.woocommerce a.button.alt:hover,.woocommerce input.button.alt:hover{
	background:var(--amber-deep);color:var(--bg);
}
.woocommerce .button.disabled,.woocommerce button.button:disabled{
	opacity:.55;cursor:not-allowed;transform:none;
}

/* WC Tables (order/account) */
.woocommerce table.shop_table{
	width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.woocommerce table.shop_table th{
	text-align:left;padding:12px 14px;background:var(--bg-2);
	font-size:12px;text-transform:uppercase;letter-spacing:.04em;
	color:var(--ink-3);font-weight:600;
}
.woocommerce table.shop_table td{padding:14px;border-top:1px solid var(--line);font-size:14px}
.woocommerce table.shop_table tfoot th,.woocommerce table.shop_table tfoot td{background:var(--bg-2);font-weight:500;color:var(--ink)}
.woocommerce-orders-table__cell-order-actions{text-align:right}

/* My account navigation */
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.woocommerce-MyAccount-navigation li a{
	display:block;padding:10px 14px;border-radius:8px;
	color:var(--ink-2);text-decoration:none;font-size:14px;
	transition:background .15s,color .15s;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a{background:var(--bg-2);color:var(--ink);font-weight:500}
.woocommerce-MyAccount-content{padding-left:24px}
@media(max-width:760px){.woocommerce-MyAccount-content{padding-left:0;margin-top:20px}}

/* Select2 — the checkout country picker */
.select2-container--default .select2-selection--single{
	height:auto;padding:4px 8px;border:1px solid var(--line) !important;
	background:var(--bg-2) !important;border-radius:10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	color:var(--ink);line-height:34px;padding-left:6px;
}
.select2-dropdown{border-color:var(--line);background:var(--card);border-radius:10px;overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--amber);color:var(--ink)}

/* Remove WC's default product loop title/rating wrappers — we use our own grid cards */
.woocommerce ul.products li.product{background:transparent;border:0;padding:0;margin:0;list-style:none}
.woocommerce ul.products li.product a{text-decoration:none}

/* Hide WC's default .woocommerce-result-count / .woocommerce-ordering — our taxonomy template has its own */
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering,
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering{display:none}

/* =========================================================
   Search autosuggest dropdown
   ========================================================= */

.df-nav-search-wrap,
.df-search-form-wrap{
	position:relative;
	flex:1;
	min-width:0;
}
.df-search-form-wrap{max-width:680px}

.df-suggest-panel{
	position:absolute;
	top:calc(100% + 8px);
	left:0;
	right:0;
	z-index:50;
	background:var(--card);
	border:1px solid var(--line);
	border-radius:14px;
	box-shadow:0 8px 32px -8px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.04);
	overflow:hidden;
	max-height:min(560px, 70vh);
	overflow-y:auto;
	padding:6px 0;
	/* Mount animation */
	animation:dfSuggestIn .18s ease-out;
}
@keyframes dfSuggestIn{
	from{opacity:0;transform:translateY(-4px)}
	to{opacity:1;transform:translateY(0)}
}

.df-suggest-panel[hidden]{display:none}

/* Group label */
.df-suggest-group-label{
	padding:10px 16px 6px;
	font-family:"JetBrains Mono", ui-monospace, monospace;
	font-size:10.5px;font-weight:600;
	color:var(--ink-3);
	text-transform:uppercase;letter-spacing:.08em;
}
.df-suggest-group-label:not(:first-child){margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}

/* Row */
.df-suggest-row{
	display:flex;align-items:center;gap:12px;
	padding:10px 16px;
	text-decoration:none;color:inherit;
	transition:background .1s;
	cursor:pointer;
}
.df-suggest-row:hover,
.df-suggest-row.is-active,
.df-suggest-row:focus{
	background:var(--bg-2);
	outline:none;
}

/* Thumb */
.df-suggest-thumb{
	position:relative;flex:none;
	width:44px;height:44px;border-radius:8px;
	background:var(--bg-2);
	overflow:hidden;
	display:grid;place-items:center;
}
.df-suggest-thumb img{width:100%;height:100%;object-fit:cover}
.df-suggest-thumb .df-glyph{
	font-family:"Instrument Serif", serif;
	font-size:20px;color:var(--amber-deep);
}
.df-suggest-thumb .df-plat{
	position:absolute;top:2px;right:2px;
	background:var(--ink);color:var(--bg);
	font-family:"JetBrains Mono",monospace;font-size:9px;padding:1px 4px;border-radius:3px;line-height:1;
}
.df-suggest-thumb-sm{width:36px;height:36px}
.df-suggest-thumb-sm .df-glyph{font-size:16px}

/* Category glyph */
.df-suggest-cat-gl{
	flex:none;width:44px;height:44px;border-radius:10px;
	background:linear-gradient(135deg, var(--amber-soft), var(--amber-deep));
	color:var(--ink);
	display:grid;place-items:center;
	font-family:"Instrument Serif",serif;font-size:18px;font-weight:500;
}

/* Body */
.df-suggest-body{flex:1;min-width:0}
.df-suggest-title{
	font-size:14px;font-weight:500;line-height:1.3;
	color:var(--ink);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.df-suggest-title mark{
	background:transparent;
	color:var(--amber-deep);
	font-weight:700;
	padding:0;
}
.df-suggest-meta{
	display:flex;gap:10px;
	font-size:12px;color:var(--ink-3);
	margin-top:3px;
	line-height:1.2;
}
.df-suggest-meta span{display:inline-flex;align-items:center}
.df-suggest-rating{color:var(--amber-deep);font-weight:500}

/* Price */
.df-suggest-price{
	flex:none;
	font-family:"JetBrains Mono",monospace;
	font-size:13px;font-weight:600;
	color:var(--ink);
}
.df-suggest-price .woocommerce-Price-amount{color:inherit}

/* Footer "See all" */
.df-suggest-footer{
	display:block;
	padding:14px 16px;
	border-top:1px solid var(--line);
	background:var(--bg-2);
	text-align:center;
	font-size:13px;font-weight:500;
	color:var(--amber-deep);
	text-decoration:none;
	margin-top:4px;
}
.df-suggest-footer:hover{
	background:color-mix(in oklch, var(--amber) 12%, var(--bg-2));
	color:var(--amber-deep);
}

/* Empty state */
.df-suggest-empty{
	padding:28px 20px;
	text-align:center;
	color:var(--ink-3);
	font-size:13px;
}

/* Loading dots */
.df-suggest-loading{
	display:flex;justify-content:center;align-items:center;gap:6px;
	padding:24px;
}
.df-suggest-loading span{
	width:6px;height:6px;border-radius:50%;
	background:var(--amber-deep);
	animation:dfSuggestPulse 1s ease-in-out infinite;
}
.df-suggest-loading span:nth-child(2){animation-delay:.15s}
.df-suggest-loading span:nth-child(3){animation-delay:.3s}
@keyframes dfSuggestPulse{
	0%,80%,100%{opacity:.3;transform:scale(.85)}
	40%{opacity:1;transform:scale(1)}
}

/* Header variant: the input lives inside .df-nav-search which already has a
   background & border — the panel needs to align with it. */
.df-nav-search-wrap{
	max-width:420px;
}
.df-nav-search-wrap .df-suggest-panel{top:calc(100% + 6px)}

/* Mobile: make the panel full-width of viewport by breaking out of the nav
   container if needed. */
@media(max-width:640px){
	.df-nav-search-wrap{position:static}
	.df-nav-search-wrap .df-suggest-panel{
		position:fixed;
		top:64px;left:8px;right:8px;
		max-height:70vh;
	}
	.df-suggest-title{white-space:normal}
	.df-suggest-price{display:none}
}