/* Tag Detail Page (v1.0.0)
   Scope prefix: .tdx-
   Dark-first, light adaptive. Accessible, modern, performant.
   ------------------------------------------------------------------ */

/* ROOT TOKENS */
.tdx-page-root {
  --tdx-font: 'Inter', system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --tdx-fg: var(--cl-text,#e2e8f0);
  --tdx-fg-sub: var(--cl-text-sub,#94a3b8);
  --tdx-fg-dim: var(--cl-text-dim,#64748b);
  --tdx-bg: var(--z-bg-deep);
  --tdx-bg-alt:#141b24;
  --tdx-bg-soft:#1b2633;
  --tdx-glass-a:rgba(255,255,255,.04);
  --tdx-glass-b:rgba(255,255,255,.07);
  --tdx-border:rgba(255,255,255,.09);
  --tdx-border-strong:rgba(255,255,255,.18);
  --tdx-accent:var(--z-accent-light);
  --tdx-accent-rgb:255,187,51;
  --tdx-accent-grad:linear-gradient(90deg,var(--z-accent-light),#ffd166);
  --tdx-radius-xs:4px;
  --tdx-radius-sm:6px;
  --tdx-radius:12px;
  --tdx-radius-lg:20px;
  --tdx-radius-xl:30px;
  --tdx-radius-pill:999px;
  --tdx-shadow-sm:0 2px 4px -2px rgba(0,0,0,.5),0 6px 14px -4px rgba(0,0,0,.45);
  --tdx-shadow:0 8px 28px -8px rgba(0,0,0,.6),0 16px 40px -12px rgba(0,0,0,.55);
  --tdx-shadow-glow:0 0 0 1px rgba(var(--tdx-accent-rgb),.45),0 0 22px -2px rgba(var(--tdx-accent-rgb),.65);
  --tdx-speed:.65s;
  --tdx-speed-fast:.35s;
  --tdx-ease:cubic-bezier(.65,.05,.36,1);
  --tdx-ease-out:cubic-bezier(.16,.84,.44,1);
  font-family:var(--tdx-font);
  color:var(--tdx-fg);
  -webkit-font-smoothing:antialiased;
}

[data-theme="light"] .tdx-page-root {
  --tdx-bg:var(--z-text);
  --tdx-bg-alt:#ffffff;
  --tdx-bg-soft:#eef3f8;
  --tdx-glass-a:rgba(0,0,0,.05);
  --tdx-glass-b:rgba(0,0,0,.08);
  --tdx-border:rgba(0,0,0,.08);
  --tdx-border-strong:rgba(0,0,0,.2);
  --tdx-fg:var(--z-surface-1);
  --tdx-fg-sub:var(--z-text-muted);
  --tdx-fg-dim:var(--z-text-muted);
  --tdx-shadow-sm:0 2px 5px -2px rgba(0,0,0,.12),0 7px 18px -8px rgba(0,0,0,.15);
  --tdx-shadow:0 12px 34px -12px rgba(0,0,0,.18),0 20px 40px -16px rgba(0,0,0,.16);
}

/* UTILITY CONTAINER */
.tdx-container {
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 1.25rem;
  position:relative;
}

/* HERO */
.tdx-hero {
  position:relative;
  padding:4.8rem 0 3.4rem;
  background:
    radial-gradient(circle at 30% 25%,rgba(var(--tdx-accent-rgb),.15),transparent 55%),
    linear-gradient(145deg,var(--tdx-bg-alt),var(--tdx-bg) 60%);
  overflow:hidden;
  isolation:isolate;
}
.tdx-hero__bg{position:absolute;inset:0;pointer-events:none;z-index:-1;}
.tdx-hero__layer{position:absolute;inset:0;}
.tdx-hero__layer--grid{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:140px 140px;
  mask:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.2));
}
[data-theme="light"] .tdx-hero__layer--grid{
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);
}
.tdx-hero__layer--gradient{
  background:
    radial-gradient(circle at 80% 70%,rgba(56,189,248,.25),transparent 65%);
  mix-blend-mode:overlay;
}

.tdx-hero__inner{display:flex;flex-direction:column;gap:2.2rem;}
.tdx-hero__head{max-width:780px;display:flex;flex-direction:column;gap:1.2rem;}

.tdx-hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem .9rem;
  background:linear-gradient(135deg,var(--tdx-glass-a),var(--tdx-glass-b));
  border:1px solid var(--tdx-border);
  border-radius:var(--tdx-radius-pill);
  font:600 .58rem/1 var(--tdx-font);
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.tdx-hero__badge i{color:var(--tdx-accent);font-size:.85rem;}
.tdx-hero__title{
  margin:0;
  font-size:clamp(2.3rem,4.7vw,3.65rem);
  line-height:1.05;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(90deg,#fff,#dbe6f3);
  -webkit-background-clip:text;color:transparent;
  display:flex;flex-wrap:wrap;gap:.75rem;
}
[data-theme="light"] .tdx-hero__title{
  background:linear-gradient(90deg,var(--z-surface-1),var(--z-surface-3));
  -webkit-background-clip:text;
}
.tdx-hero__hash{
  background:var(--tdx-accent-grad);
  -webkit-background-clip:text;
  color:transparent;
}
.tdx-hero__subtitle{
  margin:0;font-size:1.02rem;line-height:1.55;
  color:var(--tdx-fg-sub);font-weight:500;max-width:680px;
}

/* HERO STATS */
.tdx-hero__stats{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.4rem;}
.tdx-stat{
  display:flex;align-items:center;gap:.85rem;
  background:linear-gradient(135deg,var(--tdx-glass-a),var(--tdx-glass-b));
  border:1px solid var(--tdx-border);
  padding:.9rem 1.05rem;
  border-radius:var(--tdx-radius-lg);
  min-width:170px;
  position:relative;overflow:hidden;
  backdrop-filter:blur(8px);transition:.45s var(--tdx-ease-out);
}
.tdx-stat::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(var(--tdx-accent-rgb),.15),transparent 60%);
  opacity:0;transition:opacity var(--tdx-speed-fast) var(--tdx-ease-out);
}
.tdx-stat:hover::before{opacity:1;}
.tdx-stat__icon{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(var(--tdx-accent-rgb),.2),rgba(var(--tdx-accent-rgb),.05));
  color:var(--tdx-accent);font-size:1.05rem;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.55);
}
[data-theme="light"] .tdx-stat__icon{
  background:linear-gradient(135deg,rgba(var(--tdx-accent-rgb),.28),rgba(var(--tdx-accent-rgb),.1));
}
.tdx-stat__body{display:flex;flex-direction:column;gap:.15rem;}
.tdx-stat__value{
  font-size:1.38rem;font-weight:700;letter-spacing:.5px;
  color:var(--tdx-fg);
}
.tdx-stat__value--time{font-size:.95rem;line-height:1.25;}
.tdx-stat__label{
  font:600 .58rem/1 var(--tdx-font);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--tdx-fg-dim);
}

/* SECTION TITLES */
.tdx-section-head{display:flex;flex-direction:column;gap:.9rem;margin:0 0 1.4rem;}
.tdx-section-title{
  margin:0;font:700 .72rem/1 var(--tdx-font);
  letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.65rem;
  color:var(--tdx-fg-dim);
}
.tdx-section-title__icon{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--tdx-glass-a),var(--tdx-glass-b));
  border:1px solid var(--tdx-border);
  border-radius:14px;
  display:grid;place-items:center;
  color:var(--tdx-accent);font-size:.9rem;
  box-shadow:var(--tdx-shadow-sm);
}

/* PRODUCTS SECTION */
.tdx-products{background:var(--tdx-bg-alt);padding:3rem 0 3.4rem;position:relative;}
.tdx-product-grid{
  display:grid;
  gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  transition:opacity .4s var(--tdx-ease-out);
}
.tdx-product-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(145deg,var(--tdx-bg-soft),var(--tdx-bg));
  border:1px solid var(--tdx-border);
  border-radius:var(--tdx-radius-lg);
  min-height:260px;overflow:hidden;
  box-shadow:var(--tdx-shadow-sm);
  transition:.6s var(--tdx-ease);
  isolation:isolate;
}
.tdx-product-card__link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;padding:.95rem .95rem 1.15rem;gap:.85rem;z-index:2;position:relative;}
.tdx-product-card__media{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--tdx-radius-sm);
  overflow:hidden;
  background:linear-gradient(135deg,var(--tdx-glass-a),var(--tdx-glass-b));
  border:1px solid var(--tdx-border);
}
.tdx-product-card__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--tdx-ease);
}
.tdx-product-card__fallback{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.45rem;color:var(--tdx-fg-dim);font-size:1.4rem;
}
.tdx-product-card__fallback-text{font:600 .6rem/1 var(--tdx-font);letter-spacing:.15em;text-transform:uppercase;}
.tdx-product-card__body{display:flex;flex-direction:column;gap:.65rem;margin-top:auto;}
.tdx-product-card__title{
  margin:0;font:700 .9rem/1.25 var(--tdx-font);
  letter-spacing:.3px;
  color:var(--tdx-fg);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tdx-product-card__meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tdx-fg-dim);
}
.tdx-product-card__price{
  background:linear-gradient(135deg,var(--tdx-accent-grad),#ffa533);
  -webkit-background-clip:text;color:transparent;
  font-weight:700;letter-spacing:.5px;
}
.tdx-product-card__fx{
  position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}
.tdx-product-card__glow{
  position:absolute;width:200%;height:200%;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,rgba(var(--tdx-accent-rgb),0),rgba(var(--tdx-accent-rgb),.3),rgba(var(--tdx-accent-rgb),0) 70%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .7s var(--tdx-ease);
  filter:blur(18px);
}

.tdx-product-card:hover,
.tdx-product-card:focus-within{
  transform:translateY(-6px);
  border-color:rgba(var(--tdx-accent-rgb),.55);
  box-shadow:var(--tdx-shadow),0 0 0 1px rgba(var(--tdx-accent-rgb),.4);
}
.tdx-product-card:hover .tdx-product-card__img,
.tdx-product-card:focus-within .tdx-product-card__img{transform:scale(1.08);}
.tdx-product-card:hover .tdx-product-card__glow,
.tdx-product-card:focus-within .tdx-product-card__glow{opacity:1;}
.tdx-product-card:focus-within{outline:none;box-shadow:var(--tdx-shadow-glow),0 8px 26px -8px rgba(var(--tdx-accent-rgb),.55);}

/* EMPTY STATE */
.tdx-empty{
  margin:3.2rem auto 0;max-width:540px;text-align:center;
  background:linear-gradient(145deg,var(--tdx-bg-soft),var(--tdx-bg));
  border:1px dashed var(--tdx-border);
  border-radius:var(--tdx-radius-xl);
  padding:2.6rem 2.2rem 2.8rem;
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;position:relative;overflow:hidden;
}
.tdx-empty::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 20%,rgba(var(--tdx-accent-rgb),.25),transparent 60%);
  opacity:.35;
}
.tdx-empty__icon{
  width:70px;height:70px;border-radius:22px;
  background:linear-gradient(135deg,rgba(var(--tdx-accent-rgb),.18),rgba(var(--tdx-accent-rgb),.06));
  border:1px solid rgba(var(--tdx-accent-rgb),.4);
  display:grid;place-items:center;color:var(--tdx-accent);font-size:1.7rem;
  box-shadow:0 4px 20px -6px rgba(var(--tdx-accent-rgb),.5);
}
.tdx-empty__title{
  margin:0;font:700 1.4rem/1.2 var(--tdx-font);
  background:var(--tdx-accent-grad);-webkit-background-clip:text;
  color:transparent;
}
.tdx-empty__text{margin:0;font-size:.92rem;line-height:1.55;color:var(--tdx-fg-sub);}
.tdx-empty__action{
  display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,var(--tdx-accent-grad),#ffa533);
  border:none;color:#1f2933;
  font:600 .72rem/1 var(--tdx-font);letter-spacing:.18em;text-transform:uppercase;
  padding:1rem 1.35rem;border-radius:var(--tdx-radius-pill);
  cursor:pointer;box-shadow:0 8px 24px -8px rgba(var(--tdx-accent-rgb),.6);
  transition:.55s var(--tdx-ease-out);
  text-decoration:none;
}
.tdx-empty__action:hover{transform:translateY(-4px);box-shadow:0 12px 30px -10px rgba(var(--tdx-accent-rgb),.7),0 0 0 1px rgba(var(--tdx-accent-rgb),.55);}

/* PAGINATION */
.tdx-pagination{margin:2.6rem 0 0;display:flex;justify-content:center;}
.tdx-pagination__list{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;flex-wrap:wrap;}
.tdx-page-btn{
  min-width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tdx-glass-a),var(--tdx-glass-b));
  border:1px solid var(--tdx-border);
  color:var(--tdx-fg-dim);text-decoration:none;
  font:600 .7rem/1 var(--tdx-font);letter-spacing:.12em;text-transform:uppercase;
  position:relative;overflow:hidden;
  transition:.45s var(--tdx-ease-out);
}
.tdx-page-btn:hover{color:var(--tdx-fg);border-color:rgba(var(--tdx-accent-rgb),.5);}
.tdx-page-btn.is-active{
  background:linear-gradient(135deg,rgba(var(--tdx-accent-rgb),.25),rgba(var(--tdx-accent-rgb),.08));
  color:var(--tdx-accent);
  border-color:rgba(var(--tdx-accent-rgb),.6);
  box-shadow:0 0 0 1px rgba(var(--tdx-accent-rgb),.5);
  cursor:default;
}
.tdx-page-btn--nav i{font-size:.85rem;}

/* RELATED COLLECTIONS */
.tdx-related{background:var(--tdx-bg);padding:3.1rem 0 3.6rem;position:relative;border-top:1px solid var(--tdx-border);}
.tdx-related__head{display:flex;flex-direction:column;gap:.75rem;margin:0 0 1.5rem;}
.tdx-related__subtitle{margin:0;font-size:.9rem;color:var(--tdx-fg-sub);max-width:700px;line-height:1.5;font-weight:500;}
.tdx-related-grid{
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.tdx-related-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(145deg,var(--tdx-bg-soft),var(--tdx-bg));
  border:1px solid var(--tdx-border);
  border-radius:var(--tdx-radius-lg);
  min-height:230px;overflow:hidden;
  transition:.6s var(--tdx-ease);
  box-shadow:var(--tdx-shadow-sm);
  isolation:isolate;
}
.tdx-related-card__link{display:flex;flex-direction:column;flex:1;padding:.95rem .95rem 1.15rem;text-decoration:none;color:inherit;gap:.85rem;}
.tdx-related-card__media{
  position:relative;aspect-ratio:4/3;
  border-radius:var(--tdx-radius-sm);
  overflow:hidden;
  background:linear-gradient(135deg,var(--tdx-glass-a),var(--tdx-glass-b));
  border:1px solid var(--tdx-border);
}
.tdx-related-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--tdx-ease);}
.tdx-related-card__fallback{width:100%;height:100%;display:grid;place-items:center;color:var(--tdx-fg-dim);font-size:1.4rem;}
.tdx-related-card__body{display:flex;flex-direction:column;gap:.55rem;margin-top:auto;}
.tdx-related-card__title{
  margin:0;font:700 .9rem/1.25 var(--tdx-font);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  letter-spacing:.3px;color:var(--tdx-fg);
}
.tdx-related-card__meta{display:flex;justify-content:space-between;align-items:center;font:600 .58rem/1 var(--tdx-font);letter-spacing:.15em;text-transform:uppercase;color:var(--tdx-fg-dim);}
.tdx-related-card__items{font-weight:700;letter-spacing:.5px;}
.tdx-related-card__views i{color:var(--tdx-accent);margin-right:.3rem;}
.tdx-related-card__fx{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.tdx-related-card__glow{
  position:absolute;width:220%;height:220%;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,rgba(var(--tdx-accent-rgb),0),rgba(var(--tdx-accent-rgb),.32),rgba(var(--tdx-accent-rgb),0) 70%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .7s var(--tdx-ease);
  filter:blur(20px);
}

.tdx-related-card:hover,
.tdx-related-card:focus-within{
  transform:translateY(-6px);
  border-color:rgba(var(--tdx-accent-rgb),.55);
  box-shadow:var(--tdx-shadow),0 0 0 1px rgba(var(--tdx-accent-rgb),.4);
}
.tdx-related-card:hover .tdx-related-card__img,
.tdx-related-card:focus-within .tdx-related-card__img{transform:scale(1.08);}
.tdx-related-card:hover .tdx-related-card__glow,
.tdx-related-card:focus-within .tdx-related-card__glow{opacity:1;}
.tdx-related-card:focus-within{outline:none;box-shadow:var(--tdx-shadow-glow),0 8px 26px -8px rgba(var(--tdx-accent-rgb),.55);}

/* COLOR VARIANTS */
.tdx-related-card--blue{--tdx-hue:210;}
.tdx-related-card--purple{--tdx-hue:265;}
.tdx-related-card--emerald{--tdx-hue:155;}
.tdx-related-card--orange{--tdx-hue:30;}
.tdx-related-card--rose{--tdx-hue:340;}
.tdx-related-card--indigo{--tdx-hue:230;}
.tdx-related-card--teal{--tdx-hue:175;}
.tdx-related-card--amber{--tdx-hue:44;}

.tdx-related-card[class*="tdx-related-card--"]{
  background:
    linear-gradient(145deg,
      hsl(var(--tdx-hue) 60% 18% / .55),
      hsl(var(--tdx-hue) 60% 10% / .4) 55%,
      var(--tdx-bg) 95%);
  border-color:hsl(var(--tdx-hue) 65% 65% / .25);
}
[data-theme="light"] .tdx-related-card[class*="tdx-related-card--"]{
  background:
    linear-gradient(145deg,
      hsl(var(--tdx-hue) 80% 94% / .9),
      hsl(var(--tdx-hue) 80% 88% / .85) 55%,
      #fff 100%);
  border-color:hsl(var(--tdx-hue) 65% 55% / .35);
}

/* INTERACTION + ACCESSIBILITY */
.tdx-page-root button,
.tdx-page-root a,
.tdx-product-card,
.tdx-related-card,
.tdx-page-btn{-webkit-tap-highlight-color:transparent;}
.tdx-page-root :focus-visible{
  outline:2px solid rgba(var(--tdx-accent-rgb),.75);
  outline-offset:2px;
  box-shadow:var(--tdx-shadow-glow);
}

/* RESPONSIVE */
@media (max-width:1024px){
  .tdx-hero{padding:4.2rem 0 3rem;}
  .tdx-product-card{min-height:250px;}
}
@media (max-width:860px){
  .tdx-hero__title{font-size:clamp(2.05rem,6vw,3.05rem);}
  .tdx-product-grid{gap:.95rem;}
  .tdx-related-grid{gap:1rem;}
}
@media (max-width:640px){
  .tdx-hero{padding:3.6rem 0 2.6rem;}
  .tdx-hero__stats .tdx-stat{flex:1 1 calc(50% - .6rem);min-width:unset;}
  .tdx-product-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
  .tdx-related-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
  .tdx-product-card__title{font-size:.82rem;}
}
@media (max-width:460px){
  .tdx-product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .tdx-related-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
  .tdx-empty{padding:2.3rem 1.5rem 2.5rem;}
  .tdx-page-btn{min-width:40px;height:40px;}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .tdx-product-card,
  .tdx-related-card,
  .tdx-product-card__img,
  .tdx-related-card__img,
  .tdx-product-card__glow,
  .tdx-related-card__glow{transition:none !important;animation:none !important;}
}

/* HIGH CONTRAST */
@media (prefers-contrast:more){
  .tdx-product-card,
  .tdx-related-card,
  .tdx-stat,
  .tdx-page-btn{border-color:var(--tdx-border-strong);}
}

/* PRINT */
@media print{
  .tdx-hero,
  .tdx-product-card__glow,
  .tdx-related-card__glow,
  .tdx-page-btn,
  .tdx-related,
  .tdx-empty{box-shadow:none !important;background:#fff !important;}
}