/* =====================================================
   FONTS — declared here so Vue Meta cannot remove them
   ===================================================== */
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 300;
  src: url(../assets/fonts/Graphik-Light-6eb7eb438a1c281588a00e33c0cd6ff810104a008e919d12cd5539246cd155c0.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 400;
  src: url(../assets/fonts/Graphik-Regular-6eb7eb438a1c281588a00e33c0cd6ff810104a008e919d12cd5539246cd155c0.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 500;
  src: url(../assets/fonts/Graphik-Medium-5fd909dd3f1e69b75730c488c9521aab339e2dc212700677cea7415cfad679d1.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 700;
  src: url(../assets/fonts/Graphik-SemiBold-26cb6703bb88f7695cf2cadce90296046a609e2e6ed2082046c16c6c4114b940.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'NantesWeb';
  font-style: normal;
  font-weight: 300;
  src: url(../assets/fonts/NantesWeb-Light-b2c12fb16a8838bea7ecdb861ff5f59fb94fe474b3e04c9e960cb90f9f440d2d.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'NantesWeb';
  font-style: normal;
  font-weight: 400;
  src: url(../assets/fonts/NantesWeb-Regular-4c1df7aff4e740098a000ba1fbe66a49e059f1c459875a686949715dcd3c40e0.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'NantesWeb';
  font-style: normal;
  font-weight: 600;
  src: url(../assets/fonts/NantesWeb-SemiBold-a5e64920793015c90a90e649f44a07873a5834ccd020056f32145b0994f4e179.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'NantesWeb';
  font-style: italic;
  font-weight: 600;
  src: url(../assets/fonts/NantesWeb-SemiBoldItalic-7a1da53bdba6a4bfd4a3426be4c7e92c05d45e8c35cc715df284004ec55717b8.woff2) format('woff2');
}

/* =====================================================
   responsive.css — Poshmark Design
   Strategy:
     index.html has TWO headers:
       .header--mobile  (real mobile HTML from iPhone UA fetch)
       .header--desktop (original desktop HTML)
     Media queries switch which is visible.

   poshmark_feed.html is native mobile HTML — only needs
   upscaling for tablet/desktop viewports.

   Breakpoints (viewport width, not device width):
     ≤ 480px   phones
     ≤ 768px   tablets portrait
     > 768px   desktop
   ===================================================== */

/* ── GLOBAL ── */
*, *::before, *::after { box-sizing: border-box; }
body  { overflow-x: hidden; }
img   { max-width: 100%; height: auto; }

/* ── Side-nav new structure fixes ── */
.header__side-nav__submenu { border-bottom: 1px solid #f2f2f2; }
.header__side-nav__submenu .toggle__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  height: 46px;
  font-size: 16px;
  color: #404040;
}
.header__side-nav__submenu a.d--fl { padding: 0 12px; height: 46px; display: flex; align-items: center; text-decoration: none; color: #717171; }
.header__side-nav__submenu h4.header__side-nav__submenu--header { font-size: 16px; font-weight: 400; color: #717171; margin: 0; }
/* Section labels: Shop, About */
.header__side-nav__toggle__list__item--header-label { font-size: 12px !important; text-transform: uppercase; color: #999 !important; font-weight: 500; background: #f5f5f5; padding: 8px 12px; display: block; }
.header__side-nav__submenu--header.header__side-nav__toggle__list__item--header-label { color: #999 !important; }
.header__side-nav__toggle__list__item--header { font-size: 12px; text-transform: uppercase; color: #999; font-weight: 500; padding: 8px 12px 4px; }
.toggle__switch { font-size: 20px; color: #999; line-height: 1; width: 24px; text-align: center; }
.toggle__switch.plus::after  { content: '+'; }
.toggle__switch.minus::after { content: '−'; }
.toggle__switch.plus, .toggle__switch.minus { display: flex; align-items: center; justify-content: center; }
.header__side-nav__toggle__list__item--link a.header__side-nav__toggle__list__item--link {
  display: block; padding: 0 12px 0 24px; height: 40px; line-height: 40px;
  color: #717171; font-size: 14px; text-decoration: none;
}
.header__side-nav__toggle__list__item--link a.header__side-nav__toggle__list__item--link:hover { background: #f8f5f3; }
/* Experience switcher */
.experience-switcher { padding: 10px 12px; border-bottom: 1px solid #f2f2f2; }
.experience-switcher__title { font-size: 11px; color: #999; font-weight: 500; letter-spacing: 0.5px; margin: 0 0 6px; }
.dropdown__selector--select-tag { font-size: 16px; color: #404040; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.dropdown__selector--select-tag::after { content: ' ▾'; font-size: 12px; }
.experiences-switcher__dropdown__menu { background: #fff; border: 1px solid #e6e2df; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12); position: absolute; z-index: 1020; min-width: 160px; margin-top: 4px; padding: 4px 0; }
.experiences-switcher__dropdown__menu.hide { display: none; }
.experiences-switcher__dropdown__menu .dropdown__link { display: block; padding: 10px 16px; font-size: 14px; color: #404040; text-decoration: none; }
.experiences-switcher__dropdown__menu .dropdown__link:hover { background: #f8f5f3; }
/* App banner */
.header__side-nav__get-app { background: #d8d8d8; display: flex; align-items: center; padding: 10px 12px; gap: 12px; list-style: none; margin: 0; }
.header__side-nav__get-app .pm-icon { width: 40px; border-radius: 8px; }
.header__side-nav__get-app li:nth-child(2) { flex: 1; font-size: 13px; font-weight: 500; }
.header__side-nav__get-app .btn--primary { white-space: nowrap; font-size: 13px; padding: 8px 14px; border-radius: 4px; background: #5a2530; color: #fff; text-decoration: none; font-weight: 600; }

/* Edit Profile link — sits inline after View My Closet without this fix */
.header__account-info__dropdown__header .tc--black-v2 {
  display: block;
  padding: 6px 12px 6px 52px;
  font-size: 13px;
  color: #121212;
  text-decoration: none;
  margin-top: 2px;
}


/* ════════════════════════════════════════════════
   1. HEADER SWITCHING  (index.html)
   ════════════════════════════════════════════════ */

/* Desktop default: show desktop header, hide mobile */
.header--mobile  { display: none !important; }
.header--desktop { display: block; }

/* ≤ 768px: swap to mobile header */
@media (max-width: 768px) {
  .header--mobile  { display: block !important; }
  .header--desktop { display: none  !important; }
}


/* ════════════════════════════════════════════════
   2. MOBILE HEADER internals (viewport-width fix)
   The embedded CSS uses max-device-width: 767px
   (deprecated). We re-declare the same rules using
   max-width: 768px so DevTools / modern browsers work.
   ════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Override the min-width:768px that causes horizontal scroll */
  .header--fixed        { min-width: auto !important; }
  .header--scrollable   { min-width: auto !important; }

  /* Side-nav: hidden by default (collapsed off-screen) */
  .header__side-nav {
    position: fixed;
    z-index: 1010;
    min-width: 80%;
    height: calc(100% - 52px);
    overflow-y: auto;
    top: 52px;
    transform: translate3d(0, 0, 0);
    transition: transform 0.2s;
    -webkit-overflow-scrolling: touch;
    background: #fff;
  }

  .header__side-nav.collapsed {
    transform: translate3d(-100%, 0, 0);
  }

  /* Icon list — show on mobile */
  .header__icon-list {
    margin: 0 8px 0 auto;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
  }

  .header__icon-list__item {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #e6e2df;
    height: 50px;
    padding: 0 4px;
  }

  .header__icon-list__item:last-child { border-right: 0; }

  .header__icon-list__item--account { width: 50px; }
  .header__icon-list__item--search  { width: 44px; }

  /* Mobile search box — below header */
  .header__search-box--mobile {
    position: fixed;
    top: 51px;
    left: 0;
    width: 100%;
    z-index: 1009;
    background: #fff;
  }
}

@media (max-width: 480px) {
  .header__side-nav { min-width: 85%; }
}

/* Side-nav content styles (viewport-width based, replaces device-width rules) */
@media (max-width: 768px) {
  /* Toggle rows */
  .header__side-nav__toggle {
    border-bottom: 1px solid #f2f2f2;
    color: #404040;
  }
  .header__side-nav__toggle--header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    height: 46px;
    font-size: 16px;
    color: #404040;
    text-decoration: none;
  }
  .header__side-nav__toggle--header:hover { background: #f8f5f3; }

  .toggle__switch {
    margin-right: 0.9em;
    font-weight: 500;
    color: #999;
  }

  /* Submenu list */
  .header__side-nav__toggle__list { margin: 0; padding: 0; list-style: none; }
  .header__side-nav__toggle__list.hide { display: none; }
  .header__side-nav__toggle__list__item { border-top: 1px solid #f2f2f2; }
  .header__side-nav__toggle__list__item--link {
    display: block;
    padding: 0 0 0 2em;
    height: 40px;
    line-height: 40px;
    color: #717171;
    text-decoration: none;
    font-size: 14px;
  }
  .header__side-nav__toggle__list__item--link:hover { background: #f8f5f3; }

  /* Get App section */
  .header__side-nav__get-app {
    display: flex;
    align-items: center;
    background: #d8d8d8;
    padding: 10px 12px;
    list-style: none;
    margin: 0;
  }
  .header__side-nav__get-app .pm-icon {
    width: 40px;
    border-radius: 8px;
  }

  /* Stars */
  .header__side-nav__stars { position: relative; display: inline-block; unicode-bidi: bidi-override; }
  .header__side-nav__stars-top  { position: absolute; z-index: 1; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
  .header__side-nav__stars-top span  { color: #e6aa5a; }
  .header__side-nav__stars-bottom    { color: #c5c5c5; }
}


/* ════════════════════════════════════════════════
   3. MARKETING PAGE CONTENT (index.html)
   ════════════════════════════════════════════════ */

/* Hero blobs — clip overflow */
.pm-tw-hero { overflow: hidden; position: relative; }

/* ≤ 900px: existing embedded CSS collapses grid to 1 col.
   Add centering. */
@media (max-width: 900px) {
  .pm-tw-hero__content { text-align: center; }
  .pm-tw-hero__ctas    { justify-content: center; }
  .pm-tw-hero__phone   { justify-content: center; }
}

/* ≤ 768px: tablet */
@media (max-width: 768px) {
  .pm-tw-hero             { padding: 24px 16px 48px !important; }
  .pm-tw-hero__headline   { font-size: 32px !important; line-height: 1.2 !important; }
  .pm-tw-hero__sub        { font-size: 15px !important; }
  .pm-tw-hero__main-photo { max-width: 300px !important; }

  /* Hero inner: override the fixed padding */
  .pm-tw-hero__inner { padding: 32px 20px !important; border-radius: 20px !important; }
  /* Logos: stack line by line on tablets too */
  .pm-tw-logos { flex-direction: column; align-items: flex-start; gap: 6px; }

  .pm-tw-features .pm-tw-container,
  .pm-tw-how .pm-tw-container     { padding: 40px 20px !important; }
  .pm-tw-connect                  { padding: 56px 0 !important; }
  .pm-tw-faq                      { padding: 56px 0 !important; }
  .pm-tw-connect__inner           { align-items: center; gap: 48px; }
  .pm-tw-connect__card            { margin: 0 auto; width: 100%; max-width: 380px; }
  .pm-tw-connect__left            { text-align: center; }
  .pm-tw-guide-btn                { margin: 0 auto; }
  .pm-tw-guide__list              { text-align: left; }
  .pm-tw-guide__list li           { align-items: flex-start; }
  .pm-tw-container                { padding: 0 16px !important; }
}

/* ≤ 480px: phone */
@media (max-width: 480px) {
  .pm-tw-hero             { padding: 20px 12px 40px !important; }
  .pm-tw-hero__headline   { font-size: 26px !important; }
  .pm-tw-hero__sub        { font-size: 14px !important; }
  .pm-tw-hero__main-photo { max-width: 240px !important; }
  .pm-tw-hero__ctas       { flex-direction: column; align-items: center; gap: 10px !important; }
  .pm-tw-hero__cta        { width: 100%; max-width: 280px; text-align: center; justify-content: center; }

  /* Hero inner: tightest padding on small phones */
  .pm-tw-hero__inner  { padding: 24px 16px !important; border-radius: 18px !important; }
  .pm-tw-hero__main-photo { max-width: 270px !important; }
  /* Logos: stack line by line */
  .pm-tw-logos        { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .pm-tw-logos__x     { font-size: 14px !important; }
  .pm-tw-logos__pm    { height: 36px !important; width: auto !important; }
  .pm-tw-logos__tw img { height: 36px !important; width: auto !important; }

  .pm-tw-features .pm-tw-container,
  .pm-tw-how .pm-tw-container { padding: 32px 16px !important; }
  .pm-tw-connect              { padding: 40px 0 !important; }
  .pm-tw-faq                  { padding: 40px 0 !important; }
  .pm-tw-faq__q               { font-size: 14px !important; }
  .pm-tw-faq__a               { font-size: 13px !important; }
  .pm-tw-container            { padding: 0 12px !important; }

  /* Connect section */
  .pm-tw-connect__inner { gap: 24px !important; }
  .pm-tw-connect__card  { max-width: 100% !important; }

  /* Slider */
  .pm-tw-slider__arrow        { width: 36px !important; height: 36px !important; }
  .pm-tw-slider__dot          { width: 10px !important; height: 10px !important; }
  .pm-tw-slider__caption      { padding: 16px 12px 12px !important; }
  .pm-tw-slider__caption-text { font-size: 14px !important; line-height: 1.5 !important; }

  /* QR modal — fit within phone viewport */
  .pm-tw-qr-modal__box {
    width: calc(100vw - 32px) !important;
    max-width: 340px !important;
    padding: 20px 16px !important;
  }

  /* Chat widget — tighter edge offset, panel stays above button */
  .pm-chat        { right: 12px !important; bottom: 16px !important; }
  .pm-chat__panel { width: calc(100vw - 32px) !important; max-width: 340px; bottom: 68px !important; }
}


/* ════════════════════════════════════════════════
   4. FOOTER  (all pages)
   ════════════════════════════════════════════════ */

@media (max-width: 768px) {
  footer { padding-bottom: 48px !important; }

  .group-list {
    display: block !important;
    width: 100%    !important;
    min-width: auto !important;
    margin: 0 0 12px 0 !important;
    padding: 0 16px;
  }

  .footer-content  { padding: 24px 0; }
  .footer-connect  { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .store-icon      { margin: 0 8px 12px !important; }
  .footer-terms-privacy-links { width: 95% !important; }
}

@media (max-width: 480px) {
  footer { padding-bottom: 32px !important; }

  .footer-terms-privacy-links { font-size: 11px !important; padding: 16px 0 !important; }
  .social-icons   { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .social-icons i { margin-right: 0 !important; }
  .store-icon--big { height: 36px !important; width: 124px !important; margin-right: 0 !important; }
}


/* ════════════════════════════════════════════════
   5. FEED PAGE UPSCALING (poshmark_feed.html)
   Base = mobile; scale up for wider screens
   ════════════════════════════════════════════════ */

@media (min-width: 769px) {
  /* Override min-width set in embedded CSS */
  .header--fixed         { min-width: auto !important; }
  .header--scrollable    { min-width: auto !important; }

  /* Fix profile icon vertical alignment: switch ul to flexbox so align-items works */
  .header--desktop .header__account-info-list {
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Fix profile dropdown width and text truncation */
  .header__account-info__dropdown {
    min-width: 220px !important;
    max-width: 280px !important;
  }
  .header__account-info__dropdown .dropdown__link {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Wider layout for feed content */
  .feed-page .main__column { padding: 0 24px; max-width: 1200px; margin: 0 auto; }

  /* Show 2-col feed grid on desktop for mobile HTML */
  .feed__grid-layout--4-grid > div:nth-child(odd)  { float: left;  width: 49.6%; }
  .feed__grid-layout--4-grid > div:nth-child(even) { float: right; width: 49.6%; }
}