/* =========================================================
   EDIUSFA — 03-COMPONENTS
   Reusable UI components — used across all pages
   -----------------------------------------------------------------
   Source of truth: ediusfa-homepage-final.html (lines 301–714)
   -----------------------------------------------------------------
   NOTE: Playground shell (.ds-*) and demo helper classes are NOT
   included here. They live in 12-playground.css (added in v0.2.0).
   -----------------------------------------------------------------

   @package    EdiusFA
   @subpackage assets/css
   @since      0.1.0
   @version    0.1.0
   ========================================================= */

/* =========================================================
   05 — BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--radius-sm); font-weight:700; font-size:14.5px;
  cursor:pointer; border:1px solid transparent; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn-lg{padding:16px 30px; font-size:15.5px;}
.btn-block{display:flex; width:100%;}

.btn-primary{background:var(--cyan); color:var(--ink-on-accent);}
.btn-primary:hover, .btn-primary.demo-hover{background:var(--cyan-300);}
.btn-primary:active, .btn-primary.demo-active{background:var(--cyan-600); transform:translateY(1px);}
.btn-primary:focus-visible, .btn-primary.demo-focus{outline:2px solid var(--cyan); outline-offset:2px; box-shadow:var(--glow-cyan);}
.btn-primary:disabled{opacity:.4; cursor:not-allowed;}
.btn-primary.demo-loading{opacity:.85; cursor:progress;}

.btn-outline{border-color:var(--line-strong); color:var(--ink); background:transparent;}
.btn-outline:hover, .btn-outline.demo-hover{border-color:var(--cyan); color:var(--cyan);}
.btn-outline:active, .btn-outline.demo-active{background:var(--bg-elevated-2);}
.btn-outline:focus-visible, .btn-outline.demo-focus{outline:2px solid var(--cyan); outline-offset:2px;}
.btn-outline:disabled{opacity:.4; cursor:not-allowed;}
.btn-outline.demo-selected{border-color:var(--cyan); color:var(--cyan); background:rgba(47,217,236,.08);}

.btn-ghost{color:var(--ink-dim); font-size:14px; padding:10px 6px;}
.btn-ghost:hover, .btn-ghost.demo-hover{color:var(--cyan);}
.btn-ghost:focus-visible, .btn-ghost.demo-focus{outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px;}
.btn-ghost:disabled{opacity:.4; cursor:not-allowed;}

.btn-spinner{
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(4,20,26,.3);
  border-top-color:var(--ink-on-accent); animation:dsSpin .7s linear infinite; display:inline-block;
}
@keyframes dsSpin{to{transform:rotate(360deg);}}

.icon-btn{
  width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink-dim);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.icon-btn:hover, .icon-btn.demo-hover{border-color:var(--cyan); color:var(--cyan);}
.icon-btn:focus-visible, .icon-btn.demo-focus{outline:2px solid var(--cyan); outline-offset:2px;}

.count-badge{
  position:absolute; top:-6px; left:-6px; background:var(--amber); color:var(--ink-on-accent);
  font-size:10px; font-weight:700; border-radius:99px; min-width:17px; height:17px;
  display:flex; align-items:center; justify-content:center; padding:0 3px; font-family:var(--font-mono);
}

/* =========================================================
   06 — LINKS
   ========================================================= */
.link{color:var(--cyan); font-weight:600; font-size:14.5px; border-bottom:1px solid transparent; transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);}
.link:hover, .link.demo-hover{border-color:var(--cyan);}
.link:focus-visible, .link.demo-focus{outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px;}

.link-nav{color:var(--ink-dim); font-size:15px; font-weight:500; transition:color var(--dur-fast) var(--ease);}
.link-nav:hover, .link-nav.demo-hover{color:var(--cyan);}
.link-nav.is-active{color:var(--cyan);}

.link-more{font-size:13px; font-weight:700; color:var(--cyan); display:inline-flex; gap:6px; align-items:center;}
.link-more:hover{color:var(--cyan-300);}

/* =========================================================
   07 — INPUTS
   ========================================================= */
.field-group{display:flex; flex-direction:column; gap:8px; width:100%;}
.field-label{font-size:13px; font-weight:600; color:var(--ink-dim);}
.input, .textarea{
  background:var(--bg-elevated-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:14.5px; color:var(--ink); width:100%; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder{color:var(--ink-faint);}
.input:hover{border-color:var(--line-strong);}
.input:focus, .input.demo-focus{border-color:var(--cyan); outline:none; box-shadow:var(--glow-cyan);}
.input:disabled{opacity:.45; cursor:not-allowed;}
.input.has-error{border-color:var(--danger); box-shadow:var(--glow-danger);}
.field-hint{font-size:12px; color:var(--ink-faint);}
.field-hint.is-error{color:var(--danger);}
.textarea{resize:vertical; min-height:80px;}

.input-icon-wrap{position:relative; display:flex; align-items:center;}
.input-icon-wrap svg{position:absolute; inset-inline-start:14px; color:var(--ink-faint); pointer-events:none;}
.input-icon-wrap .input{padding-inline-start:40px;}

/* =========================================================
   08 — SEARCH BAR
   ========================================================= */
.searchbar{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-elevated-2); border:1.5px solid var(--line-strong);
  border-radius:var(--radius-full); padding:12px 16px; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.searchbar svg{color:var(--ink-faint); flex-shrink:0;}
.searchbar input{background:none; border:none; outline:none; color:var(--ink); font-size:14.5px; width:100%;}
.searchbar input::placeholder{color:var(--ink-faint);}
.searchbar:focus-within, .searchbar.demo-focus{border-color:var(--cyan); box-shadow:var(--glow-cyan);}
.search-clear{color:var(--ink-faint); font-size:13px; flex-shrink:0;}
.search-clear:hover{color:var(--danger);}

.search-suggest{padding:6px 0;}
.search-suggest li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; font-size:13.5px; color:var(--ink-dim); cursor:pointer;}
.search-suggest li b{color:var(--cyan); font-weight:700;}
.search-suggest li:hover, .search-suggest li.is-active{background:var(--bg-elevated-2); color:var(--ink);}

/* =========================================================
   09 — SELECT
   ========================================================= */
.select-wrap{position:relative; display:flex; align-items:center; width:100%;}
.select{
  appearance:none; -webkit-appearance:none; width:100%;
  background:var(--bg-elevated-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:12px 40px 12px 14px; font-size:14px; color:var(--ink); transition:border-color var(--dur-fast) var(--ease);
}
.select:focus{outline:none; border-color:var(--cyan);}
.select-wrap.demo-focus .select{border-color:var(--cyan); box-shadow:var(--glow-cyan);}
.select-chevron{position:absolute; inset-inline-start:14px; color:var(--ink-faint); pointer-events:none;}
.select:disabled{cursor:not-allowed;}

/* =========================================================
   10/11 — CHECKBOX / RADIO
   ========================================================= */
.checkbox, .radio{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-dim); cursor:pointer; user-select:none;}
.checkbox input, .radio input{position:absolute; opacity:0; width:0; height:0;}
.checkbox-box{
  width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line-strong); background:var(--bg-elevated-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.checkbox-box::after{content:""; width:5px; height:9px; border:solid var(--ink-on-accent); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform var(--dur-fast) var(--ease); margin-top:-2px;}
.checkbox input:checked + .checkbox-box{background:var(--cyan); border-color:var(--cyan);}
.checkbox input:checked + .checkbox-box::after{transform:rotate(45deg) scale(1);}
.checkbox:hover .checkbox-box, .checkbox.demo-hover .checkbox-box{border-color:var(--cyan);}
.checkbox input.demo-focus-ring + .checkbox-box{outline:2px solid var(--cyan); outline-offset:2px;}
.checkbox.is-disabled{opacity:.4; cursor:not-allowed;}

.radio-dot{
  width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--bg-elevated-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color var(--dur-fast) var(--ease);
}
.radio-dot::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--cyan); transform:scale(0); transition:transform var(--dur-fast) var(--ease);}
.radio input:checked + .radio-dot{border-color:var(--cyan);}
.radio input:checked + .radio-dot::after{transform:scale(1);}
.radio:hover .radio-dot, .radio.demo-hover .radio-dot{border-color:var(--cyan);}
.radio input.demo-focus-ring + .radio-dot{outline:2px solid var(--cyan); outline-offset:2px;}
.radio.is-disabled{opacity:.4; cursor:not-allowed;}

/* =========================================================
   12 — BADGES
   ========================================================= */
.badge{
  display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:4px 9px;
  border-radius:6px; font-family:var(--font-sans);
}
.badge-new{background:var(--cyan); color:var(--ink-on-accent);}
.badge-sale{background:var(--danger); color:#fff;}
.badge-free{background:var(--success); color:#04231A;}
.badge-hot{background:var(--amber); color:var(--ink-on-accent);}
.badge-neutral{background:rgba(6,9,14,.55); color:#fff; font-family:var(--font-mono); font-weight:600;}

.track-tag{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-dim);
  border:1px solid var(--line-strong); display:inline-block; padding:3px 10px; border-radius:6px;
}

/* =========================================================
   12b — STATE CHIP
   -----------------------------------------------------------------
   Small uppercase mono label, used on the Design System showcase
   page and on cards/demos where a quick "state" annotation is
   needed (e.g. HOVER, ACTIVE, LOADING). Also useful for future
   pages that show item status (e.g. published, draft, archived).
   ========================================================= */
.state-chip{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--bg-elevated-2); border:1px solid var(--line);
  padding:3px 8px; border-radius:99px;
}

/* =========================================================
   13 — PRICE
   ========================================================= */
.price-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:1px;}
.price{font-family:var(--font-mono); font-weight:700; color:var(--ink); font-size:15.5px;}
.price small{color:var(--ink-faint); font-weight:400; font-size:11.5px; font-family:var(--font-sans);}
.price-old{font-size:11.5px; color:var(--ink-faint); text-decoration:line-through; font-weight:500; font-family:var(--font-mono);}
.price-free{color:var(--success);}
.price-sale{color:var(--amber);}

/* =========================================================
   14 — RATING
   ========================================================= */
.stars{color:var(--amber); letter-spacing:2px; font-size:14px;}
.star-off{color:var(--line-strong);}
.rating-count{color:var(--ink-faint); font-size:11.5px; margin-inline-start:6px; letter-spacing:0;}
.stars-empty{color:var(--ink-faint); font-size:13px;}

/* =========================================================
   15/16 — PRODUCT CARD
   ========================================================= */
.prod-card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; transition:transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
  position:relative;
}
.prod-card:hover, .prod-card.demo-hover{transform:translateY(-4px); border-color:var(--line-cyan); box-shadow:var(--shadow-md);}
.prod-thumb{
  height:150px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.prod-thumb.g1{background:linear-gradient(120deg, var(--amber-600), #2c1e09, var(--amber-500), #1a1206); background-size:280% 280%; background-position:0% 50%;}
.prod-thumb.g2{background:linear-gradient(120deg, var(--cyan-700), #0d2426, var(--cyan-600), #071417); background-size:280% 280%; background-position:0% 50%;}
.prod-thumb.g3{background:linear-gradient(120deg, var(--danger-dim), #2c1018, var(--danger), #1a0a10); background-size:280% 280%; background-position:0% 50%;}
.prod-thumb.g4{background:linear-gradient(120deg, var(--cyan-900), var(--amber-900), var(--cyan-700), var(--amber-600)); background-size:280% 280%; background-position:0% 50%;}
.prod-thumb .badge{position:absolute; top:10px; inset-inline-start:10px; z-index:2;}

/* ---------- Featured image (sits on top of the gradient fallback) ---------- */
.prod-thumb-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  z-index:0; /* gradient bg is the painting context, img sits above it but below badge/play/preview-bar (which are z-index:2) */
}

/* ---------- Envato-style hover video preview ---------- */
@media (hover:hover){
  .prod-thumb{transition:background-position .3s ease;}
  .prod-card:hover .prod-thumb{animation:thumbPreviewPan 2.6s ease-in-out infinite alternate;}
  @keyframes thumbPreviewPan{ from{background-position:0% 25%;} to{background-position:100% 75%;} }

  .prod-thumb::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px);
    transition:opacity .2s ease;
  }
  .prod-card:hover .prod-thumb::before{opacity:1;}

  .prod-thumb .play{transition:opacity .2s ease, transform .2s ease;}
  .prod-card:hover .prod-thumb .play{opacity:0; transform:scale(.7);}
}

.thumb-preview-bar{
  position:absolute; bottom:0; inset-inline:0; height:3px; background:rgba(255,255,255,.2); z-index:2;
  opacity:0; transition:opacity .2s ease;
}
@media (hover:hover){ .prod-card:hover .prod-thumb .thumb-preview-bar{opacity:1;} }
.thumb-preview-fill{height:100%; width:0%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
@media (hover:hover){
  .prod-card:hover .prod-thumb .thumb-preview-fill{animation:thumbPreviewFill 2.6s linear infinite;}
  @keyframes thumbPreviewFill{ from{width:0%;} to{width:100%;} }
}

.play{
  width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.4); position:relative; z-index:2;
  border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; color:#fff;
}
.prod-body{padding:16px;}
.prod-body h4{font-size:14.5px; font-weight:700; margin-bottom:8px; min-height:42px; line-height:1.45;}
.prod-meta{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-faint); margin-bottom:12px;}
.prod-foot{display:flex; justify-content:space-between; align-items:center;}
.add-btn{
  width:34px; height:34px; border-radius:8px; background:var(--cyan); color:var(--ink-on-accent);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.add-btn:hover, .add-btn.demo-hover{background:var(--cyan-300); transform:scale(1.06);}

.skeleton-block{background:linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-sunken) 37%, var(--bg-elevated-2) 63%); background-size:400% 100%; animation:dsShimmer 1.6s ease-in-out infinite;}
.skeleton-line{border-radius:5px; background:linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-sunken) 37%, var(--bg-elevated-2) 63%); background-size:400% 100%; animation:dsShimmer 1.6s ease-in-out infinite;}
@keyframes dsShimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =========================================================
   16b — FEATURE CARD
   -----------------------------------------------------------------
   Used by the "Why EdiusFA" homepage section and likely re-used
   on future pages (about, services, ...). Original HTML referenced
   .feature-card but did not declare its base rule. Filling the gap
   here keeps the visual intent (icon + title + paragraph on an
   elevated card with hover lift) so the section renders correctly.
   ========================================================= */
.feature-card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px; display:flex; flex-direction:column; gap:10px;
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.feature-card:hover{border-color:var(--line-cyan); transform:translateY(-3px);}
.feature-card svg{color:var(--cyan);}
.feature-card h4{font-size:14.5px; font-weight:700; color:var(--ink);}
.feature-card p{font-size:13px; color:var(--ink-dim); line-height:1.7;}

/* =========================================================
   17 — CATEGORY CARD
   ========================================================= */
.cat-card{
  position:relative; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 10px; text-align:center; transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.cat-card:hover, .cat-card.demo-hover{transform:translateY(-3px); border-color:var(--line-cyan);}
.cat-card:focus-visible, .cat-card.demo-focus{outline:2px solid var(--cyan); outline-offset:2px;}
.cat-card.demo-selected{border-color:var(--cyan); background:rgba(47,217,236,.06);}
.cat-emoji{font-size:1.9rem; margin-bottom:6px;}
.cat-name{font-size:14px; font-weight:700; color:var(--ink);}
.cat-count{font-size:11.5px; color:var(--ink-faint);}

.cat-track-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  background:var(--bg-elevated); border:1px solid var(--line); padding:24px;
}
.cat-track-card::before{content:""; position:absolute; top:0; inset-inline-start:0; inset-inline-end:0; height:3px;}
.cat-track-card.t1::before{background:var(--cyan);}
.cat-track-card.t2::before{background:var(--amber);}
.cat-track-card.t3::before{background:var(--success);}
.cat-track-card h3{font-size:17px; margin:12px 0 6px;}
.cat-track-card p{color:var(--ink-dim); font-size:13.5px; margin-bottom:14px;}

/* =========================================================
   17b — CHIP STRIP (horizontal chip row)
   -----------------------------------------------------------------
   Used by the archive page (cat-header) for quick sub-category
   selection and by the Design System showcase page. The chip
   strip itself is a horizontal scroll container; the .cat-chip
   children are pill-shaped toggles.
   ========================================================= */
.chip-strip{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px;}
.cat-chip{
  flex-shrink:0; font-size:12.5px; color:var(--ink-dim); background:var(--bg-elevated); border:1px solid var(--line);
  padding:8px 15px; border-radius:99px; white-space:nowrap; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cat-chip.is-active{background:var(--cyan); color:var(--ink-on-accent); border-color:var(--cyan);}
.cat-chip:hover, .cat-chip.demo-hover{border-color:var(--cyan); color:var(--cyan);}

/* =========================================================
   18 — ARTICLE CARD
   ========================================================= */
.article-card{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);}
.article-card:hover, .article-card.demo-hover{border-color:var(--line-cyan); transform:translateY(-3px);}
.article-thumb{height:100px; background:linear-gradient(135deg, var(--bg-elevated-2), var(--bg-sunken)); display:flex; align-items:center; padding:0 18px;}
.article-date{font-family:var(--font-mono); font-size:20px; color:var(--cyan); font-weight:700;}
.article-date span{display:block; font-size:11px; color:var(--ink-faint); font-family:var(--font-sans);}
.article-body{padding:16px;}
.article-body h4{font-size:14.5px; margin-bottom:10px; line-height:1.5;}
.article-card-row{display:flex; align-items:center; gap:12px; padding:12px;}
.article-thumb-sm{width:60px; height:60px; border-radius:9px; background:linear-gradient(135deg, var(--bg-elevated-2), var(--bg-sunken)); flex-shrink:0;}

/* =========================================================
   19 — BREADCRUMB
   ========================================================= */
/* 19 — Breadcrumb (Design System exact + RTL-safe) */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--ink-faint);
  flex-wrap:wrap;
  direction:rtl;
  flex-direction:row;
  justify-content:flex-start;
  text-align:right;
}
.breadcrumb a{color:var(--ink-dim);display:inline-flex;align-items:center;gap:6px;transition:color .15s ease;flex-direction:row;}
.breadcrumb a:hover,.breadcrumb a.demo-hover{color:var(--cyan);}
.breadcrumb a svg{flex-shrink:0;}
.crumb-sep{color:var(--ink-faint);user-select:none;display:inline-block;}
.crumb-current{color:var(--ink);font-weight:500;}
.pdp-breadcrumb-bar{padding:14px 0;border-bottom:1px solid var(--line);direction:rtl;}
.pdp-breadcrumb-bar .breadcrumb{margin:0;}
.pdp-breadcrumb-bar .pdp-container{direction:rtl;}

/* =========================================================
   20 — TABS
   ========================================================= */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap;}
.tab{
  padding:11px 6px; font-size:14px; font-weight:600; color:var(--ink-faint);
  border-bottom:2px solid transparent; margin-inline-end:20px; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab:hover, .tab.demo-hover{color:var(--ink);}
.tab.is-active{color:var(--cyan); border-color:var(--cyan);}
.tab:disabled{opacity:.35; cursor:not-allowed;}
.tab-count{color:var(--ink-faint); font-size:11px;}
.tab-panel{font-size:14.5px;}

/* =========================================================
   21 — ACCORDION
   ========================================================= */
.accordion{display:flex; flex-direction:column; gap:10px; max-width:640px;}
.accordion-item{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;}
.accordion-header{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; font-size:14.5px; font-weight:700; color:var(--ink); text-align:start;
}
.accordion-header:hover, .accordion-header.demo-hover{color:var(--cyan);}
.accordion-icon{color:var(--ink-faint); transition:transform var(--dur-fast) var(--ease); flex-shrink:0;}
.accordion-item.is-open .accordion-icon{transform:rotate(180deg); color:var(--cyan);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease);}
.accordion-item.is-open .accordion-panel{max-height:200px;}
.accordion-panel p{padding:0 18px 16px; color:var(--ink-dim); font-size:13.5px;}

/* =========================================================
   22 — FILTER UI
   ========================================================= */
.filter-panel{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; max-width:340px; display:flex; flex-direction:column; gap:24px;}
.filter-group{display:flex; flex-direction:column; gap:12px;}
.filter-title{font-size:12.5px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.03em;}
.range-slider{width:100%; accent-color:var(--cyan);}
.range-values{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint);}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.filter-chip{
  display:inline-flex; align-items:center; gap:6px; background:rgba(47,217,236,.1); color:var(--cyan);
  border:1px solid var(--line-cyan); font-size:12.5px; padding:5px 6px 5px 12px; border-radius:99px;
}
.filter-chip button{color:var(--cyan); font-size:11px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.filter-chip button:hover{background:var(--cyan); color:var(--ink-on-accent);}
.chip-clear{font-size:12px; color:var(--ink-faint); text-decoration:underline;}
.chip-clear:hover{color:var(--danger);}

/* =========================================================
   23 — PAGINATION
   ========================================================= */
.pagination{display:inline-flex; align-items:center; gap:6px;}
.page-item{
  min-width:36px; height:36px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--line);
  color:var(--ink-dim); font-family:var(--font-mono); font-size:13px; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.page-item:hover, .page-item.demo-hover{border-color:var(--cyan); color:var(--cyan);}
.page-item.is-active{background:var(--cyan); color:var(--ink-on-accent); border-color:var(--cyan);}
.page-item:disabled{opacity:.35; cursor:not-allowed;}
.page-ellipsis{color:var(--ink-faint); font-family:var(--font-mono); padding:0 4px;}

/* =========================================================
   24 — MODAL
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:var(--z-modal);
  opacity:0; pointer-events:none; transition:opacity var(--dur-med) var(--ease);
}
.modal-overlay.is-open{opacity:1; pointer-events:auto;}
.modal-overlay.is-static{position:absolute; opacity:1; pointer-events:auto; backdrop-filter:none; background:rgba(6,9,14,.5); padding:14px;}
.modal{
  background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  width:420px; max-width:92vw; box-shadow:var(--shadow-lg); transform:scale(.96); transition:transform var(--dur-med) var(--ease);
}
.modal-overlay.is-open .modal{transform:scale(1);}
.modal.is-static{transform:scale(1); width:100%;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line);}
.modal-head h4{font-size:14.5px; font-weight:700;}
.modal-close{width:28px; height:28px; border-radius:8px; color:var(--ink-faint); display:flex; align-items:center; justify-content:center;}
.modal-close:hover{background:var(--bg-elevated-2); color:var(--danger);}
.modal-body{padding:18px;}
.modal-video{aspect-ratio:16/9; background:linear-gradient(135deg, var(--cyan-900), var(--amber-900)); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;}
.modal-foot{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-top:1px solid var(--line);}

/* =========================================================
   25 — TOAST
   ========================================================= */
.toast-container{position:fixed; bottom:24px; inset-inline-end:24px; display:flex; flex-direction:column; gap:10px; z-index:var(--z-toast);}
.toast{
  display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:var(--radius-sm);
  background:var(--bg-elevated); border:1px solid var(--line-strong); box-shadow:var(--shadow-md); font-size:13.5px; max-width:340px;
  animation:dsToastIn .25s var(--ease);
}
@keyframes dsToastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.toast.is-static{animation:none; position:relative;}
.toast-success{border-inline-start:3px solid var(--success); color:var(--ink);}
.toast-success svg{color:var(--success);}
.toast-danger{border-inline-start:3px solid var(--danger); color:var(--ink);}
.toast-danger svg{color:var(--danger);}
.toast-info{border-inline-start:3px solid var(--cyan); color:var(--ink);}
.toast-info svg{color:var(--cyan);}

/* =========================================================
   26 — TOOLTIP
   ========================================================= */
.tooltip-wrap{position:relative; display:inline-flex;}
.tooltip-wrap::after{
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--bg-sunken); border:1px solid var(--line-strong); color:var(--ink); font-size:11.5px;
  padding:6px 10px; border-radius:7px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index:var(--z-tooltip); box-shadow:var(--shadow-sm);
}
.tooltip-wrap:hover::after, .tooltip-wrap:focus-within::after, .tooltip-wrap.demo-tooltip-open::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* =========================================================
   LAYOUT — .pdp-container
   -----------------------------------------------------------------
   Main content container used on every page (hero, sections,
   footer). Max-width 1320px with horizontal padding; collapses
   to 18px padding on mobile.
   ========================================================= */
.pdp-container{max-width:1320px; margin:0 auto; padding:0 40px;}
@media (max-width:900px){ .pdp-container{padding:0 18px;} }

/* =========================================================
   GLOBAL ANIMATIONS
   -----------------------------------------------------------------
   dsPulse — blinking REC indicator (header utility bar + hero
   visual head). Originally nested in the playground topbar block
   but used across multiple composites; promoted to global scope.
   ========================================================= */
@keyframes dsPulse{0%,100%{opacity:1;}50%{opacity:.25;}}

/* =========================================================
   AVATAR — base rule for .review-avatar
   -----------------------------------------------------------------
   Original HTML only sized .review-avatar in specific contexts
   (spotlight-foot 44px, testi-list-item 32px). Without a base
   shape/background the avatars would render as inline text. This
   rule fills the gap so the testimonials look as the prototype
   intended (circular gradient avatar with centered initial).
   ========================================================= */
.review-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--cyan-700), var(--amber-600));
  color:#fff; font-weight:700; border-radius:50%; flex-shrink:0;
  font-family:var(--font-sans);
}

.prod-thumb.no-img{background:#161F30;}
.prod-thumb.no-img:empty,.prod-thumb:not(:has(img)){min-height:120px;}