:root{
  --app-bg:#f6f6f7;
  --card-bg:#fff;
  --text:#111;
  --muted:#8b8b8b;
  --line:#e7e7ea;

  --radius:18px;
  --shadow: 0 8px 24px rgba(0,0,0,.04);

  --header-h: 64px;
  --tabs-h: 54px;
  --bottom-h: 110px;

  --max-phone: 430px;
  --max-feed-desktop: 620px; /* center column like Threads */
}

/* base */
html,body{height:100%;}
body{background:var(--app-bg); color:var(--text);}

/* app container */
.app{
  width:100%;
  min-height:100vh;
  background:var(--app-bg);
}

/* centered content width on tablet/desktop */
.shell{
  width:100%;
  margin:0 auto;
  max-width: var(--max-phone);
}

/* fixed header + tabs */
.app-header{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(var(--max-phone), 100%);
  z-index:50;
  background: rgba(246,246,247,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.top-tabs{
  border-top:1px solid transparent;
  border-bottom:1px solid var(--line);
}

.tabs-btn{
  border:0;
  background:transparent;
  padding:.9rem .25rem;
  width:100%;
  font-weight:700;
  color:#b0b0b0;
  position:relative;
}
.tabs-btn.active{color:var(--text);}
.tabs-btn.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:#111;
  border-radius:2px;
}

/* scroll area */
.content{
  padding-top: calc(var(--header-h) + var(--tabs-h));
  padding-bottom: var(--bottom-h);
}

/* post / card */
.post{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* media */
.media-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.media{
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  background:#ddd;
  border:1px solid var(--line);
}
.media img{width:100%;height:100%;object-fit:cover;display:block;}

.avatar{
  width:40px;height:40px;border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* ------------------------------------------
   RESPONSIVE LAYOUT (phone / tablet / desktop)
   Drop-in replacement for the blocks below.
------------------------------------------ */

/* Global helpers (safe defaults) */
.shell { padding-left: 12px; padding-right: 12px; }
.content { padding-left: 0; padding-right: 0; }

/* Ensure bottom nav behaves like an app bar */
.app-bottom-nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(var(--max-phone), 100%);
  z-index:60;
  background: rgba(246,246,247,.94);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
}

/* If your bottom nav already has inner padding, this won't hurt */
.app-bottom-nav .container-fluid,
.app-bottom-nav .app-container{
  padding-left:12px;
  padding-right:12px;
}

/* ------------------------------------------
   PHONE (edge-to-edge feed)
   - feed cards go full width
   - keep bottom nav sticky
------------------------------------------ */
@media (max-width: 575.98px){
  :root{
    --max-phone: 100%;
  }

  .shell{
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }

  .app-header{
    width:100%;
    border-radius:0;
  }

  /* Keep page content from touching the edges unless it's the feed cards */
  .content{
    padding-left:12px;
    padding-right:12px;
  }

  /* Feed cards: edge-to-edge */
  .post{
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
    margin-left:-12px;   /* cancels content padding */
    margin-right:-12px;  /* cancels content padding */
  }
  .post + .post{border-top:0;}

  .media{border-radius:14px;}

  .app-bottom-nav{
    width:100%;
    border-radius:0;
  }
}

/* ------------------------------------------
   TABLET (cards + margins like your iPad screenshots)
   - centered column
   - cards breathe
------------------------------------------ */
@media (min-width: 576px) and (max-width: 991.98px){
  .shell{
    max-width: 520px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .app-header{
    width:min(520px, 100%);
    border-radius:18px;
  }

  .content{
    padding-left:0;
    padding-right:0;
  }

  .post{
    margin-bottom:14px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .app-bottom-nav{
    width:min(520px, 100%);
    border-radius:18px;
  }
}

/* ------------------------------------------
   DESKTOP
   - centered
   - optional 2-col mode (feed/search) via .is-2col on <body> or .app
------------------------------------------ */
@media (min-width: 992px){
  .shell{
    max-width: 980px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .app-header{
    width:min(980px, 100%);
    border-radius:18px;
  }

  .content{
    padding-left:0;
    padding-right:0;
  }

  .app-bottom-nav{
    width:min(980px, 100%);
    border-radius:18px;
  }

  /* Default: keep the “Threads-like” single column feel */
  .feed-col{
    max-width: var(--max-feed-desktop);
    margin: 0 auto;
  }

  /*
    Optional 2-col:
    Add class "is-2col" on <body> (or on .app) AND wrap your page like:
      <div class="desktop-grid">
        <div class="feed-col">...</div>
        <aside class="side-col">...</aside>
      </div>

    If you don’t add these wrappers/classes, nothing changes.
  */
  body.is-2col .desktop-grid,
  .app.is-2col .desktop-grid{
    display:grid;
    grid-template-columns: minmax(0, var(--max-feed-desktop)) 320px;
    gap: 18px;
    align-items:start;
    max-width: 980px;
    margin: 0 auto;
  }

  body.is-2col .side-col,
  .app.is-2col .side-col{
    position: sticky;
    top: calc(var(--header-h) + var(--tabs-h) + 16px);
  }
}


/* --- Drop LP Wireframe --- */
.countdown-bar{
  position:sticky;
  top: calc(var(--header-h) + var(--tabs-h));
  z-index:40;
  background:#111;
  color:#fff;
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 12px 0 12px;
}

.drop-hero{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

.drop-h1{
  font-size:1.25rem;
  font-weight:900;
  margin:0 0 4px;
}

.drop-sub{
  color:var(--muted);
  margin:0;
}

/* Carousel */
.prod-strip{
  display:flex;
  gap:14px;
  overflow:auto;
  padding: 10px 2px 6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.prod-strip::-webkit-scrollbar{ height:8px; }
.prod-strip::-webkit-scrollbar-thumb{ background:#ddd; border-radius:999px; }

.prod-card{
  scroll-snap-align:center;
  flex: 0 0 240px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:12px;
  position:relative;
}
.prod-card.is-primary{
  flex-basis: 300px;
  transform: translateY(-4px);
}

.mock-frame{
  width:100%;
  height: 280px;
  border-radius:18px;
  background:#f0f0f1;
  border:1px solid var(--line);
  overflow:hidden;

  /* this centers any proportion image */
  display:flex;
  align-items:center;
  justify-content:center;
}
.mock-frame img{
  width:100%;
  height:100%;
  object-fit:contain;      /* IMPORTANT: no crop */
  object-position:center;  /* center both ways */
  display:block;
  padding:10px;            /* makes tall PNGs look nicer */
}

.prod-title{
  font-weight:900;
  margin:10px 0 2px;
}
.prod-meta{
  color:var(--muted);
  font-size:.9rem;
  margin:0;
}

.add-btn{
  position:absolute;
  right:12px;
  top: 252px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:900;
  line-height:1;
}

.bundle-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.bundle-btn{
  flex:1;
  border:0;
  border-radius:999px;
  padding:14px 16px;
  font-weight:900;
  background:#61d100;
  color:#fff;
  text-align:center;
}
.diamond-btn{
  flex:1;
  border:0;
  border-radius:999px;
  padding:14px 16px;
  font-weight:900;
  background:#0d6efd;
  color:#fff;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.diamond-btn img{
  width:34px;
  height:34px;
  object-fit:contain;
}

.cart-box{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

.fab-listen{
  position:fixed;
  right:18px;
  bottom: calc(var(--bottom-h) + 18px);
  z-index:80;
  width:56px;
  height:56px;
  border-radius:999px;
  border:0;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px rgba(0,0,0,.2);
}
.fab-listen.hide{ display:none; }

.share-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.share-row button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
}