/* =========================================================
   Express Party Supplies (Costumes-Only) — CSS Skeleton
   ---------------------------------------------------------
   Purpose:
   - Lightweight, structure-first CSS (grid + spacing + breakpoints)
   - No brand colors enforced (easy to theme later)
   - Works with the HTML structure previously provided

   Notes:
   - Add your real fonts + colors in :root (Theme Tokens)
   - Keep "component" styles minimal; extend in your main CSS
   ========================================================= */

/* ------------------------------
   Theme Tokens (edit these)
------------------------------ */
:root{
  /* Layout */
  --container-max: 1200px;
  --container-pad: 16px;

  /* Typography */
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: var(--font-body);
  --text: #111;
  --muted: #555;

  /* Surfaces */
  --bg: #fff;
  --surface: #fff;
  --surface-2: #f6f7f8;
  --border: #e5e7eb;

  /* Radii + Shadows */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 20px rgba(0,0,0,.08);
  --shadow-sm: 0 3px 10px rgba(0,0,0,.06);

  /* Spacing scale */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 24px;
  --s6: 32px;
  --s7: 44px;
  --s8: 60px;

  /* Buttons */
  --btn-pad-y: 12px;
  --btn-pad-x: 18px;

  /* Breakpoints (for reference; actual media queries below) */
  /* sm: 480, md: 768, lg: 1024, xl: 1200 */
}

:root{
  /* Fonts (Google Fonts suggested below) */
  --font-head: "DM Serif Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Core */
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f3f4f8;
  --text: #101223;
  --muted: #545a6a;
  --border: #e6e7ef;

  /* Brand (Costumes) */
  --brand: #5b2cff;       /* deep electric purple */
  --brand-2: #1c1f2e;     /* midnight/navy */
  --accent: #ffb020;      /* spotlight amber */
  --success: #17b26a;
  --danger: #ef4444;

  /* Buttons */
  --btn-bg: var(--brand);
  --btn-text: #ffffff;
  --btn-bg-hover: #4a22e6;

  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: var(--brand);
  --btn-secondary-border: rgba(91,44,255,.30);

  /* Radii + shadows */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 16px 40px rgba(16,18,35,.10);
  --shadow-sm: 0 8px 18px rgba(16,18,35,.10);
}

/* ------------------------------
   Base Reset (minimal)
------------------------------ */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

a:hover{ text-decoration: underline; }

.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left: var(--container-pad);
  top: var(--container-pad);
  width:auto; height:auto;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  z-index: 9999;
}

/* ------------------------------
   Container + Section spacing
------------------------------ */
.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.main > section{
  padding: var(--s7) 0;
}
@media (max-width: 767px){
  .main > section{
    padding: var(--s6) 0;
  }
}

/* Section header */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.section-head__title{
  font-family: var(--font-head);
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0;
}
.section-head__subtitle{
  margin: var(--s2) 0 0;
  color: var(--muted);
  max-width: 60ch;
}
.section-head__link{
  white-space: nowrap;
  font-weight: 600;
  opacity: .85;
}
.section-head__link:hover{ opacity: 1; }

@media (max-width: 767px){
  .section-head{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------
   Topbar
------------------------------ */
.topbar{
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
}
.topbar__inner{
  display:flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
}
.topbar__left,
.topbar__right{
  display:flex;
  gap: var(--s4);
  list-style:none;
  padding: 0;
  margin: 0;
}
.topbar__item{
  display:flex;
  gap: var(--s1);
  align-items:center;
  color: var(--muted);
}
@media (max-width: 1023px){
  .topbar__right{ display:none; }
}
@media (max-width: 767px){
  .topbar__left{
    gap: var(--s3);
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------
   Header
------------------------------ */
.header{
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.header__inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: var(--s4);
  padding: var(--s4) 0;
}
.header__logo{
  display:flex;
  align-items:center;
  gap: var(--s2);
}
.header__logo img{
  max-height: 44px;
  width:auto;
}
.header__menu-btn{
  display:none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor:pointer;
}
.header__search{
  display:flex;
  align-items:center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
  background: #fff;
}
.header__search input{
  width: 100%;
  border: 0;
  outline: none;
  padding: 12px 14px;
  font-size: 1rem;
}
.header__search button{
  border: 0;
  background: transparent;
  padding: 0 14px;
  cursor:pointer;
}
.header__actions{
  display:flex;
  gap: var(--s3);
  align-items:center;
}
.header__action{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 4px;
  font-size: .85rem;
  color: var(--muted);
}
.header__cart-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .72rem;
  color: var(--text);
  background: var(--surface-2);
}

@media (max-width: 1023px){
  .header__inner{
    grid-template-columns: auto 1fr auto;
  }
}
@media (max-width: 767px){
  .header__menu-btn{ display:inline-flex; }
  .header__actions .header__action-label{ display:none; }
  .header__inner{
    grid-template-columns: auto 1fr auto;
    gap: var(--s3);
  }
  .header__search{
    grid-column: 1 / -1;
    order: 10;
  }
}

/* ------------------------------
   Navigation
------------------------------ */
.nav{
  background: var(--surface);
}
.nav__inner{
  position: relative;
}
.nav__list{
  display:flex;
  align-items:center;
  gap: var(--s4);
  list-style:none;
  padding: 0;
  margin: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.nav__item{
  position: relative;
}
.nav__link{
  display:inline-flex;
  padding: 14px 6px;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
}
.nav__item--highlight .nav__link{
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--surface-2);
}

.nav__dropdown{
  display:none;
  position:absolute;
  left: 0;
  top: 100%;
  min-width: 620px;
  max-width: 820px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
  z-index: 100;
}
.nav__item--has-dropdown:hover .nav__dropdown{
  display:block;
}
.nav__dropdown-cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.nav__heading{
  margin: 0 0 var(--s2);
  font-size: 1rem;
}
.nav__sublist{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: var(--s2);
}
.nav__sublist a{
  color: var(--muted);
}
.nav__sublist a:hover{
  color: var(--text);
}

@media (max-width: 1023px){
  /* keep dropdown disabled for skeleton; implement click-to-open via JS */
  .nav__item--has-dropdown:hover .nav__dropdown{ display:none; }
  .nav__dropdown{
    position: static;
    min-width: auto;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    padding: var(--s4) 0;
    border-left: 0;
    border-right: 0;
  }
  .nav__dropdown-cols{
    grid-template-columns: 1fr;
  }
}

/* ------------------------------
   Announcement strip
------------------------------ */
.announce{
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: var(--s4) 0 !important;
}
.announce__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--s3);
}
.announce__text{ margin: 0; color: var(--muted); }
.announce__cta{
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 767px){
  .announce__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------
   Buttons
------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
}
.btn:hover{ box-shadow: var(--shadow-sm); }
.btn--primary{
  /* set your brand color here later */
}
.btn--secondary{
  background: var(--surface-2);
}
.btn--ghost{
  background: transparent;
}
.btn--small{
  padding: 10px 12px;
  font-size: .92rem;
}

/* ------------------------------
   Hero
------------------------------ */
.hero{ padding-top: var(--s6) !important; }
.hero__inner{ }
.hero__slider{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.hero__slide{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  min-height: 360px;
}
.hero__media{
  position: relative;
  overflow: hidden;
}
.hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__content{
  padding: var(--s6);
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: var(--s3);
}
.hero__title{
  font-family: var(--font-head);
  font-size: 2.1rem;
  line-height: 1.1;
  margin: 0;
}
.hero__subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 52ch;
}
.hero__actions{
  display:flex;
  gap: var(--s3);
  flex-wrap: wrap;
}
.hero__badges{
  list-style:none;
  padding: 0;
  margin: var(--s3) 0 0;
  display:flex;
  gap: var(--s3);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .92rem;
}

.hero__prev,
.hero__next{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor:pointer;
}
.hero__prev{ left: var(--s3); }
.hero__next{ right: var(--s3); }

.hero__dots{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--s3);
  display:flex;
  gap: 8px;
}
.hero__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  cursor:pointer;
}
.hero__dot.is-active{ background: #fff; }

@media (max-width: 1023px){
  .hero__slide{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__content{ padding: var(--s5); }
  .hero__media{ height: 280px; }
}
@media (max-width: 480px){
  .hero__title{ font-size: 1.7rem; }
  .hero__content{ padding: var(--s4); }
}

/* ------------------------------
   Tiles (Trending / Seasonal)
------------------------------ */
.tiles__grid{
  display:grid;
  gap: var(--s4);
}
.tiles__grid--3{
  grid-template-columns: repeat(3, 1fr);
}
.tiles__grid--5{
  grid-template-columns: repeat(5, 1fr);
}

.tile{
  display:block;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.tile:hover{
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.tile img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.tile__content{
  padding: var(--s4);
}
.tile__title{
  margin: 0 0 var(--s1);
  font-size: 1.05rem;
}
.tile__text{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

@media (max-width: 1023px){
  .tiles__grid--5{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
  .tiles__grid--3{ grid-template-columns: 1fr; }
  .tiles__grid--5{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .tiles__grid--5{ grid-template-columns: 1fr; }
}

/* ------------------------------
   Ranges grid (2 rows style)
------------------------------ */
.ranges__grid{
  display:grid;
  gap: var(--s4);
  grid-template-columns: repeat(3, 1fr);
}
.range{
  display:grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--surface);
}
.range img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.range__content{
  padding: var(--s4);
}
.range__title{
  margin: 0 0 var(--s1);
  font-size: 1.05rem;
}
.range__text{
  margin: 0;
  color: var(--muted);
}

@media (max-width: 1023px){
  .ranges__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
  .ranges__grid{ grid-template-columns: 1fr; }
}

/* ------------------------------
   Themes (4 tiles)
------------------------------ */
.themes__grid{
  display:grid;
  gap: var(--s4);
}
.themes__grid--4{
  grid-template-columns: repeat(4, 1fr);
}
.theme{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--surface);
}
.theme img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.theme__title{
  margin: 0;
  padding: var(--s4);
  font-size: 1rem;
}
@media (max-width: 1023px){
  .themes__grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .themes__grid--4{ grid-template-columns: 1fr; }
}

/* ------------------------------
   Products Grid
------------------------------ */
.product-grid{
  display:grid;
  gap: var(--s4);
  grid-template-columns: repeat(4, 1fr);
}

.product-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--surface);
  display:flex;
  flex-direction: column;
  min-height: 100%;
}
.product-card__media{
  position: relative;
  display:block;
  background: var(--surface-2);
}
.product-card__media img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.badge{
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .8rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
}
.product-card__body{
  padding: var(--s4);
  display:flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1;
}
.product-card__title{
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}
.product-card__rating{
  color: var(--muted);
  font-size: .9rem;
}
.product-card__price{
  display:flex;
  gap: var(--s2);
  align-items: baseline;
}
.price--was{
  color: var(--muted);
  text-decoration: line-through;
}
.price--now{
  font-weight: 800;
}
.product-card__actions{
  margin-top: auto;
  display:flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

@media (max-width: 1200px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .product-grid{ grid-template-columns: 1fr; }
}

/* ------------------------------
   Content Block (SEO)
------------------------------ */
.content-block{
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.content-block__inner{
  display:grid;
  gap: var(--s5);
}
.content-block__title{
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
}
.content-block__intro{
  margin: var(--s2) 0 0;
  color: var(--muted);
  max-width: 70ch;
}
.content-block__grid{
  display:grid;
  gap: var(--s4);
  grid-template-columns: repeat(4, 1fr);
}
.content-block__item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
}
.content-block__item h3{
  margin: 0 0 var(--s2);
  font-size: 1.05rem;
}
.content-block__item p{
  margin: 0;
  color: var(--muted);
}
.content-block__cta{
  display:flex;
  gap: var(--s3);
  flex-wrap: wrap;
}

@media (max-width: 1023px){
  .content-block__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .content-block__grid{ grid-template-columns: 1fr; }
}

/* ------------------------------
   FAQ (Accordion)
------------------------------ */
.faq__list{
  display:grid;
  gap: var(--s3);
  max-width: 900px;
}
.faq__item{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
  overflow:hidden;
}
.faq__q{
  cursor:pointer;
  padding: var(--s4);
  font-weight: 800;
  list-style: none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__a{
  padding: 0 var(--s4) var(--s4);
  color: var(--muted);
}

/* ------------------------------
   Reviews
------------------------------ */
.reviews__grid{
  display:grid;
  gap: var(--s4);
  grid-template-columns: repeat(3, 1fr);
}
.review{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s5);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.review__text{ margin: 0 0 var(--s3); }
.review__meta{ margin: 0 0 var(--s2); color: var(--muted); }
.review__stars{ margin: 0; color: var(--muted); }

@media (max-width: 1023px){
  .reviews__grid{ grid-template-columns: 1fr; }
}

/* ------------------------------
   Trust Icons Row
------------------------------ */
.trust{
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust__grid{
  display:grid;
  gap: var(--s4);
  grid-template-columns: repeat(4, 1fr);
}
.trust__item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
}
.trust__title{ margin: 0 0 var(--s1); font-size: 1rem; }
.trust__text{ margin: 0; color: var(--muted); font-size: .95rem; }

@media (max-width: 1023px){
  .trust__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .trust__grid{ grid-template-columns: 1fr; }
}

/* ------------------------------
   Newsletter
------------------------------ */
.newsletter{
  padding: var(--s6) 0 !important;
}
.newsletter__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s5);
  align-items:center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s6);
}
.newsletter__content h2{
  margin: 0 0 var(--s2);
  font-size: 1.5rem;
}
.newsletter__content p{
  margin: 0;
  color: var(--muted);
}
.newsletter__form{
  display:flex;
  gap: var(--s2);
}
.newsletter__form input{
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 14px;
  outline: none;
}
@media (max-width: 1023px){
  .newsletter__inner{ grid-template-columns: 1fr; }
  .newsletter__form{ flex-direction: column; }
  .newsletter__form input,
  .newsletter__form button{ width: 100%; }
}

/* ------------------------------
   Footer
------------------------------ */
.footer{
  background: #0b0c0f; /* neutral dark base; change to your theme */
  color: #fff;
}
.footer a{ color: rgba(255,255,255,.88); }
.footer a:hover{ color:#fff; }

.footer__top{
  padding: var(--s8) 0 var(--s6);
}
.footer__cols{
  display:grid;
  gap: var(--s6);
  grid-template-columns: repeat(4, 1fr);
}
.footer__heading{
  margin: 0 0 var(--s3);
  font-size: 1rem;
}
.footer__list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: var(--s2);
}
.footer__payments{
  display:flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}
.footer__payments img{
  background: rgba(255,255,255,.08);
  padding: 6px 8px;
  border-radius: 8px;
}

.footer__bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: var(--s4) 0;
}
.footer__bottom-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--s3);
  color: rgba(255,255,255,.78);
  font-size: .92rem;
}
.footer__social{
  display:flex;
  gap: var(--s3);
}

@media (max-width: 1023px){
  .footer__cols{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
  .footer__cols{ grid-template-columns: 1fr; }
  .footer__bottom-inner{
    flex-direction: column;
    align-items:flex-start;
  }
}

/* ------------------------------
   Icon placeholders
------------------------------ */
.icon{ display:inline-block; width: 18px; height: 18px; }
.icon--menu::before{ content:"≡"; }
.icon--search::before{ content:"⌕"; }
.icon--truck::before{ content:"🚚"; }
.icon--returns::before{ content:"↩"; }
.icon--support::before{ content:"💬"; }
.icon--user::before{ content:"👤"; }
.icon--cart::before{ content:"🛒"; }
.icon--tag::before{ content:"🏷"; }
.icon--secure::before{ content:"🔒"; }


.btn--primary{
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: rgba(0,0,0,0);
}
.btn--primary:hover{
  background: var(--btn-bg-hover);
}

.btn--secondary{
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover{
  box-shadow: var(--shadow-sm);
}

.header{ background: var(--surface); }
.nav{
  background: var(--brand-2);
}
.nav__link{
  color: rgba(255,255,255,.92);
}
.nav__link:hover{
  color: #fff;
  text-decoration: none;
}
.nav__item--highlight .nav__link{
  background: var(--accent);
  border-color: rgba(0,0,0,0);
  color: #111;
}