/* Giày Dép — Premium Light Glass Design System
 * Visual layer only. The MASTER SOURCE layout / DOM / feature engine is preserved.
 */
body.glass-ui{
  --background:#f4f8ff;
  --surface-soft:#e7f0ff;
  --accent:#156cff;
  --accent-2:#8db7ff;
  --text-primary:#0d1830;
  --glass-base:#ffffff;
  --glass-soft-base:#ffffff;
  --glass-border-color:#ffffff;
  --glass-opacity:72%;
  --glass-soft-opacity:45%;
  --glass-blur:28px;
  --glass-soft-blur:20px;
  --glass-saturation:145%;
  --glass-border-alpha:.82;
  --glass-border-opacity:82%;
  --glass-shadow-alpha:.10;
  --glass-shadow-nav-alpha:.08;
  --glass-shadow-soft-alpha:.06;
  --radius-card:28px;
  --radius-control:15px;
  --accent-ink:#ffffff;

  --glass-surface:color-mix(in srgb,var(--glass-base) var(--glass-opacity),transparent);
  --glass-surface-soft:color-mix(in srgb,var(--glass-soft-base) var(--glass-soft-opacity),transparent);
  --border-glass:color-mix(in srgb,var(--glass-border-color) var(--glass-border-opacity),transparent);
  --border-soft:color-mix(in srgb,var(--text-primary) 9%,transparent);
  --text-secondary:color-mix(in srgb,var(--text-primary) 66%,#ffffff 34%);
  --text-muted:color-mix(in srgb,var(--text-primary) 48%,#ffffff 52%);
  --glass-shadow:0 24px 70px rgba(17,35,70,var(--glass-shadow-alpha));
  --glass-shadow-float:0 16px 45px rgba(20,35,60,calc(var(--glass-shadow-alpha) + .03));
  --glass-shadow-nav:0 12px 34px rgba(20,35,60,var(--glass-shadow-nav-alpha));
  --radius-large:calc(var(--radius-card) + 8px);

  /* Bridge existing MASTER SOURCE tokens into the Glass system. */
  --blue:var(--accent);
  --blue-hover:color-mix(in srgb,var(--accent) 86%,#000 14%);
  --ink:var(--text-primary);
  --text:var(--text-secondary);
  --muted:var(--text-muted);
  --bg:var(--background);
  --panel:var(--glass-surface);
  --line:var(--border-soft);
  --radius:var(--radius-card);
  --shadow:var(--glass-shadow);
  --shadow-hover:0 28px 78px rgba(17,35,70,calc(var(--glass-shadow-alpha) + .035));

  color:var(--text-secondary);
  background:
    radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--accent) 13%,transparent) 0 18%,transparent 38%),
    radial-gradient(circle at 90% 4%,color-mix(in srgb,var(--accent-2) 18%,transparent) 0 16%,transparent 42%),
    linear-gradient(180deg,var(--background),#fff 46%,var(--background) 100%);
  background-attachment:fixed;
}

/* 12 required presets. */
body.glass-ui.palette-ice{--background:#f4f8ff;--surface-soft:#e7f0ff;--accent:#156cff;--accent-2:#8db7ff;--text-primary:#0d1830;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-aurora{--background:#f7f4ff;--surface-soft:#ece4ff;--accent:#7a52ff;--accent-2:#ff8fd5;--text-primary:#25194b;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-mint{--background:#f2fbf7;--surface-soft:#ddf4e8;--accent:#31a978;--accent-2:#8ad7b7;--text-primary:#153c2f;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-cyan{--background:#f1fbff;--surface-soft:#dff5ff;--accent:#089bd5;--accent-2:#67d9ef;--text-primary:#103646;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-champagne{--background:#fbf8f1;--surface-soft:#eee5d3;--accent:#ad8352;--accent-2:#e1bd8b;--text-primary:#3a2b1e;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-coral{--background:#fff5f2;--surface-soft:#ffe1da;--accent:#ff6c55;--accent-2:#ffac8d;--text-primary:#4a251e;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-rose{--background:#fff6fa;--surface-soft:#fce3ef;--accent:#da5f92;--accent-2:#f1a0c1;--text-primary:#4a1e32;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-cobalt{--background:#f3f6ff;--surface-soft:#dfe6ff;--accent:#3c5be8;--accent-2:#8ba0ff;--text-primary:#17214a;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-lemon{--background:#fbfceb;--surface-soft:#f1f4cb;--accent:#98aa2b;--accent-2:#ccd96f;--text-primary:#2f3513;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#182000}
body.glass-ui.palette-silver{--background:#f6f7f8;--surface-soft:#e8ebef;--accent:#687386;--accent-2:#b3bbc6;--text-primary:#202631;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-sky{--background:#f3faff;--surface-soft:#e0f1ff;--accent:#3187d8;--accent-2:#8fc9f4;--text-primary:#163759;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}
body.glass-ui.palette-peach{--background:#fff8f3;--surface-soft:#ffeadc;--accent:#e88a4b;--accent-2:#ffc19a;--text-primary:#472b1c;--glass-base:#ffffff;--glass-soft-base:#ffffff;--glass-border-color:#ffffff;--accent-ink:#fff}

body.glass-ui ::selection{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--text-primary)}
body.glass-ui a:focus-visible,
body.glass-ui button:focus-visible,
body.glass-ui input:focus-visible,
body.glass-ui select:focus-visible,
body.glass-ui textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px}

/* Navigation glass */
body.glass-ui .applebar{
  background:color-mix(in srgb,var(--glass-base) 82%,transparent);
  border-bottom:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-saturation));
  backdrop-filter:blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-saturation));
  box-shadow:var(--glass-shadow-nav);
}
body.glass-ui .applebar .navitem>a,
body.glass-ui .navlinks>.menu-item>a{color:var(--text-secondary);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
body.glass-ui .applebar .navitem.active>a,
body.glass-ui .applebar .navitem>a:hover,
body.glass-ui .navlinks>.menu-item.current-menu-item>a,
body.glass-ui .navlinks>.menu-item.current-menu-ancestor>a,
body.glass-ui .navlinks>.menu-item>a:hover{background:var(--glass-surface-soft);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-glass)}
body.glass-ui .applebar .navicon{color:var(--text-primary);background:var(--glass-surface-soft);border:1px solid var(--border-glass)}
body.glass-ui .applebar .navicon:hover{background:color-mix(in srgb,var(--accent) 12%,var(--glass-surface));color:var(--accent)}
body.glass-ui .navlinks .sub-menu,
body.glass-ui .dropdown{
  background:color-mix(in srgb,var(--glass-base) 84%,transparent);
  border:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-saturation));
  backdrop-filter:blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-saturation));
  box-shadow:var(--glass-shadow-float);
}
body.glass-ui .navlinks .sub-menu a:hover,
body.glass-ui .dropdown a:hover{background:color-mix(in srgb,var(--accent) 9%,var(--glass-surface-soft));color:var(--accent)}
body.glass-ui .submenu-toggle{color:var(--text-secondary)}

/* Hero intro and controls */
body.glass-ui .masthead-luxe h1,
body.glass-ui .section-head h2,
body.glass-ui .page-head h1,
body.glass-ui .article h1,
body.glass-ui .article h2,
body.glass-ui .sidebar-title,
body.glass-ui .group-card h3{color:var(--text-primary)}
body.glass-ui .masthead-luxe h1 span{color:var(--text-muted)}
body.glass-ui .masthead-luxe .eyebrow,
body.glass-ui .masthead-luxe p,
body.glass-ui .excerpt,
body.glass-ui .archive-description,
body.glass-ui .article .lead,
body.glass-ui .article p{color:var(--text-secondary)}
body.glass-ui .masthead-luxe .primary,
body.glass-ui .primary,
body.glass-ui .group-card a,
body.glass-ui .promo a,
body.glass-ui .search-form-inline button{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 23%,transparent);border:1px solid color-mix(in srgb,var(--accent) 72%,#fff 28%)}
body.glass-ui .masthead-luxe .primary:hover,
body.glass-ui .primary:hover,
body.glass-ui .group-card a:hover,
body.glass-ui .promo a:hover{filter:brightness(1.035);transform:translateY(-1px)}
body.glass-ui .masthead-luxe .secondary{
  color:var(--accent);
  background:var(--glass-surface-soft);
  border:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-soft-blur)) saturate(130%);
  backdrop-filter:blur(var(--glass-soft-blur)) saturate(130%);
  box-shadow:0 10px 30px rgba(17,35,70,var(--glass-shadow-soft-alpha));
}

/* Image-led cards keep their source composition; only material framing changes. */
body.glass-ui .feat{border:1px solid color-mix(in srgb,#fff 70%,transparent);box-shadow:var(--glass-shadow);border-radius:var(--radius-card)}
body.glass-ui .feat .cat{background:color-mix(in srgb,#fff 18%,transparent);border:1px solid color-mix(in srgb,#fff 32%,transparent);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}

/* Primary glass surfaces */
body.glass-ui .column-card,
body.glass-ui .review-item,
body.glass-ui .deal,
body.glass-ui .group-card,
body.glass-ui .archive-card,
body.glass-ui .sidebar-box,
body.glass-ui .promo,
body.glass-ui .page-article,
body.glass-ui .slider3-card,
body.glass-ui .related-12 article,
body.glass-ui .related>div,
body.glass-ui .split{
  background:var(--glass-surface);
  border:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius-card);
}
body.glass-ui .column-card,
body.glass-ui .review-item,
body.glass-ui .deal,
body.glass-ui .archive-card,
body.glass-ui .slider3-card,
body.glass-ui .related-12 article,
body.glass-ui .related>div{overflow:hidden}
body.glass-ui .column-card:hover,
body.glass-ui .review-item:hover,
body.glass-ui .deal:hover,
body.glass-ui .archive-card:hover,
body.glass-ui .slider3-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 78px rgba(17,35,70,calc(var(--glass-shadow-alpha) + .04));
  border-color:color-mix(in srgb,#fff 94%,var(--accent) 6%);
}
body.glass-ui .column-card img,
body.glass-ui .review-item img,
body.glass-ui .deal img,
body.glass-ui .archive-card img,
body.glass-ui .slider3-card img{transition:transform .38s ease,filter .38s ease}
body.glass-ui .column-card:hover img,
body.glass-ui .review-item:hover img,
body.glass-ui .deal:hover img,
body.glass-ui .archive-card:hover img,
body.glass-ui .slider3-card:hover img{transform:scale(1.018)}

/* Soft glass / non-nested support surfaces */
body.glass-ui .section-head .tabs,
body.glass-ui .social,
body.glass-ui .page-numbers,
body.glass-ui .slider3-controls button,
body.glass-ui .mobile-header-search input,
body.glass-ui .search-form-inline input{
  background:var(--glass-surface-soft);
  border:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-soft-blur)) saturate(130%);
  backdrop-filter:blur(var(--glass-soft-blur)) saturate(130%);
  box-shadow:0 10px 32px rgba(17,35,70,var(--glass-shadow-soft-alpha));
}
body.glass-ui .section-head .tabs a{color:var(--text-muted)}
body.glass-ui .section-head .tabs a.active{background:color-mix(in srgb,var(--glass-base) 86%,transparent);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-glass)}
body.glass-ui .mini-list{border-top-color:var(--border-soft)}
body.glass-ui .mini-row{border-bottom-color:var(--border-soft)}
body.glass-ui .mini-row h4,
body.glass-ui .review-item h3,
body.glass-ui .deal h4,
body.glass-ui .archive-card h2,
body.glass-ui .slider3-card h3,
body.glass-ui .related h4{color:var(--text-primary)}
body.glass-ui .mini-row time,
body.glass-ui .review-item .meta,
body.glass-ui .deal time,
body.glass-ui .article-meta{color:var(--text-muted)}
body.glass-ui .kicker,
body.glass-ui .feed-item .cat,
body.glass-ui .entry-content a,
body.glass-ui .breadcrumbs a:hover{color:var(--accent)}

/* Former dark keynote block becomes a premium light glass panel without changing layout. */
body.glass-ui .split{border-radius:var(--radius-large);color:var(--text-secondary)}
body.glass-ui .split .section-head h2{color:var(--text-primary)}
body.glass-ui .unpacked-list,
body.glass-ui .weather{
  background:color-mix(in srgb,var(--surface-soft) 54%,transparent);
  border:1px solid var(--border-glass);
  color:var(--text-primary);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 72%,transparent);
}
body.glass-ui .unpacked-list{border-radius:calc(var(--radius-card) - 2px)}
body.glass-ui .unpacked-list .mini-row{border-color:var(--border-soft)}
body.glass-ui .unpacked-list .mini-row h4,
body.glass-ui .unpacked-list .mini-row time,
body.glass-ui .weather h4,
body.glass-ui .weather .city,
body.glass-ui .weather .desc,
body.glass-ui .forecast span,
body.glass-ui .forecast b{color:var(--text-secondary)}
body.glass-ui .weather .temp{color:var(--text-primary)}
body.glass-ui .weather:before{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%)}
body.glass-ui .forecast{border-top-color:var(--border-soft)}

/* Latest list intentionally remains editorial, not boxed. */
body.glass-ui .feed-item{border-bottom-color:var(--border-soft)}
body.glass-ui .feed-item h3{color:var(--text-primary)}
body.glass-ui .feed-item p{color:var(--text-secondary)}
body.glass-ui .feed-item .meta{color:var(--text-muted)}

/* Sidebar promo follows the same material language instead of black fill. */
body.glass-ui .promo{color:var(--text-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,var(--glass-surface)),color-mix(in srgb,var(--accent-2) 13%,var(--glass-surface)))}
body.glass-ui .promo p{color:var(--text-secondary)}

/* Breadcrumb, pagination, active/selected states */
body.glass-ui .breadcrumbs,
body.glass-ui .breadcrumbs li,
body.glass-ui .breadcrumbs [aria-current="page"] span{color:var(--text-muted)}
body.glass-ui .breadcrumbs a{color:var(--text-secondary)}
body.glass-ui .breadcrumbs li+li::before{color:color-mix(in srgb,var(--text-primary) 24%,transparent)}
body.glass-ui .page-numbers{color:var(--text-secondary);border-radius:999px}
body.glass-ui .page-numbers:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,#fff 72%)}
body.glass-ui .page-numbers.current{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 20%,transparent)}

/* Inputs / search / modal */
body.glass-ui input,
body.glass-ui textarea,
body.glass-ui select{color:var(--text-primary);caret-color:var(--accent)}
body.glass-ui input::placeholder,
body.glass-ui textarea::placeholder{color:var(--text-muted);opacity:.86}
body.glass-ui .mobile-header-search input:focus,
body.glass-ui .search-form-inline input:focus{background:color-mix(in srgb,var(--glass-base) 84%,transparent);border-color:color-mix(in srgb,var(--accent) 38%,#fff 62%);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 11%,transparent)}
body.glass-ui .searchlayer{
  background:color-mix(in srgb,var(--background) 74%,transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
body.glass-ui .searchclose{color:var(--text-primary)}
body.glass-ui .search-form-inline button{border-radius:var(--radius-control)}

/* Footer becomes one calm glass band while preserving the existing grid. */
body.glass-ui .footer{
  background:color-mix(in srgb,var(--glass-base) 54%,transparent);
  color:var(--text-secondary);
  border-top:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-soft-blur)) saturate(130%);
  backdrop-filter:blur(var(--glass-soft-blur)) saturate(130%);
}
body.glass-ui .footer p,
body.glass-ui .footer a,
body.glass-ui .copyright{color:var(--text-muted)}
body.glass-ui .footer h4{color:var(--text-primary)}
body.glass-ui .footer a:hover{color:var(--accent)}
body.glass-ui .copyright{border-top-color:var(--border-soft)}

/* Radius mapping — sizes remain unchanged; only material radius token is centralized. */
body.glass-ui .column-card,
body.glass-ui .review-item,
body.glass-ui .deal,
body.glass-ui .group-card,
body.glass-ui .archive-card,
body.glass-ui .sidebar-box,
body.glass-ui .promo,
body.glass-ui .page-article,
body.glass-ui .slider3-card{border-radius:var(--radius-card)}
body.glass-ui button,
body.glass-ui input,
body.glass-ui select,
body.glass-ui textarea{border-radius:var(--radius-control)}
body.glass-ui .mini-row img,
body.glass-ui .feed-item img{border-radius:calc(var(--radius-control) - 1px)}

/* Graceful fallback: opaque surfaces when backdrop-filter is unavailable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.glass-ui .applebar,
  body.glass-ui .navlinks .sub-menu,
  body.glass-ui .dropdown,
  body.glass-ui .column-card,
  body.glass-ui .review-item,
  body.glass-ui .deal,
  body.glass-ui .group-card,
  body.glass-ui .archive-card,
  body.glass-ui .sidebar-box,
  body.glass-ui .promo,
  body.glass-ui .page-article,
  body.glass-ui .slider3-card,
  body.glass-ui .related-12 article,
  body.glass-ui .related>div,
  body.glass-ui .split,
  body.glass-ui .footer{background:color-mix(in srgb,var(--background) 12%,#fff 88%)}
  body.glass-ui .section-head .tabs,
  body.glass-ui .social,
  body.glass-ui .page-numbers,
  body.glass-ui .slider3-controls button,
  body.glass-ui .mobile-header-search input,
  body.glass-ui .search-form-inline input{background:color-mix(in srgb,var(--background) 8%,#fff 92%)}
}