Embed

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

<style>
  .ln-shop {
    font-family: 'DM Sans', sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #f4f2ef;
  }

  .ln-header {
    margin-bottom: 32px;
    border-bottom: 1px solid #d0cec9;
    padding-bottom: 20px;
  }

  .ln-header h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    letter-spacing: 0.04em;
    color: #111;
    line-height: 1;
    margin-bottom: 4px;
  }

  .ln-header p {
    font-size: 13px;
    color: #888;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ln-grid {
    display: grid;
    grid-template-columns: minmax(240px, 400px);
    gap: 24px;
  }

  .ln-card {
    background: #fff;
    border: 1px solid #e0ddd8;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }

  .ln-card:hover {
    border-color: #111;
  }

  .ln-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #eceae6;
    position: relative;
    overflow: hidden;
  }

  .ln-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
  }

  .ln-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #c8521a;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
  }

  .ln-arrows {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
  }

  .ln-arrow {
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
  }

  .ln-arrow:hover { background: #111; }

  .ln-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
  }

  .ln-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.2s ease;
  }

  .ln-dot.active { background: #fff; }

  .ln-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: #f9f8f6;
    border-bottom: 1px solid #e0ddd8;
  }

  .ln-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
  }

  .ln-thumb.active { border-color: #111; }

  .ln-info { padding: 16px; }

  .ln-series {
    font-size: 10px;
    color: #aaa;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .ln-name {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .ln-size-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
  }

  .ln-size-label span {
    font-weight: 500;
    color: #111;
  }

  .ln-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }

  .ln-size {
    border: 1px solid #ddd;
    font-size: 12px;
    color: #666;
    padding: 6px 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    user-select: none;
  }

  .ln-size:hover {
    border-color: #111;
    color: #111;
  }

  .ln-size.selected {
    background: #111;
    color: #fff;
    border-color: #111;
  }

  .ln-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
  }

  .ln-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #111;
  }

  .ln-btn {
    display: inline-block;
    background: #111;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 18px;
    text-decoration: none;
    transition: background 0.2s ease;
    border: none;
    cursor: pointer;
  }

  .ln-btn:hover { background: #c8521a; }

  .ln-btn.disabled {
    background: #ccc;
    cursor: not-allowed;
    pointer-events: none;
  }

  .ln-size-hint {
    font-size: 11px;
    color: #c8521a;
    margin-bottom: 12px;
    display: none;
  }

  .ln-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #d0cec9;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  @media (max-width: 600px) {
    .ln-header h2 { font-size: 36px; }
    .ln-grid { grid-template-columns: 1fr; }
    .ln-info { padding: 12px; }
  }
</style>

<div class="ln-shop">

  <div class="ln-header">
    <h2>Tees</h2>
    <p>Series 1 — Daddy &amp; Daughter Beachin' It &nbsp;·&nbsp; est. 2026</p>
  </div>

  <div class="ln-grid">
    <div class="ln-card">
      <div class="ln-img" id="ln-main-img-wrap">
        <span class="ln-badge">New</span>
        <img id="ln-main-img" src="https://i.ibb.co/Ldd7d2jK/LN01.jpg" alt="LN01 Tee">
        <div class="ln-dots" id="ln-dots"></div>
        <div class="ln-arrows">
          <button class="ln-arrow" onclick="lnPrev()" aria-label="Previous">&#8592;</button>
          <button class="ln-arrow" onclick="lnNext()" aria-label="Next">&#8594;</button>
        </div>
      </div>

      <div class="ln-thumbs" id="ln-thumbs"></div>

      <div class="ln-info">
        <div class="ln-series">Last November · LN01</div>
        <div class="ln-name">Daddy &amp; Daughter Beachin' It Tee — Washed Gray</div>

        <div class="ln-size-label">Size: <span id="ln-selected-size">Select a size</span></div>
        <div class="ln-sizes">
          <div class="ln-size" onclick="lnSelectSize(this, 'S')">S</div>
          <div class="ln-size" onclick="lnSelectSize(this, 'M')">M</div>
          <div class="ln-size" onclick="lnSelectSize(this, 'L')">L</div>
          <div class="ln-size" onclick="lnSelectSize(this, 'XL')">XL</div>
          <div class="ln-size" onclick="lnSelectSize(this, '2XL')">2XL</div>
          <div class="ln-size" onclick="lnSelectSize(this, '3XL')">3XL</div>
        </div>
        <div class="ln-size-hint" id="ln-hint">Please select a size before continuing</div>

        <div class="ln-bottom">
          <span class="ln-price">$45</span>
          <a class="ln-btn" id="ln-shop-btn" href="#" onclick="lnShopNow(event)" target="_blank">Shop Now</a>
        </div>
      </div>
    </div>
  </div>

  <div class="ln-footer">lastnovmbr.com &nbsp;·&nbsp; <a href="https://www.instagram.com/lastnovmbr" target="_blank" style="color:#aaa;text-decoration:none;letter-spacing:0.06em;">@lastnovmbr</a> &nbsp;·&nbsp; newdadfreshstart est. 2026</div>

</div>

<script>
  var lnImages = [
    "https://i.ibb.co/Ldd7d2jK/LN01.jpg",
    "https://i.ibb.co/g8d60hg/LN01-Back.jpg",
    "https://i.ibb.co/vCvYmkbD/LN01-Front.jpg"
  ];

  var lnCurrent = 0;
  var lnChosenSize = null;
  var stripeBase = "https://buy.stripe.com/aFa28qb6Dfag4xr0E948001";

  var dotsEl = document.getElementById('ln-dots');
  var thumbsEl = document.getElementById('ln-thumbs');
  var mainImg = document.getElementById('ln-main-img');

  lnImages.forEach(function(src, i) {
    var dot = document.createElement('button');
    dot.className = 'ln-dot' + (i === 0 ? ' active' : '');
    dot.setAttribute('aria-label', 'Image ' + (i + 1));
    dot.onclick = function() { lnGoTo(i); };
    dotsEl.appendChild(dot);

    var thumb = document.createElement('img');
    thumb.src = src;
    thumb.className = 'ln-thumb' + (i === 0 ? ' active' : '');
    thumb.alt = 'View ' + (i + 1);
    thumb.onclick = function() { lnGoTo(i); };
    thumbsEl.appendChild(thumb);
  });

  function lnGoTo(index) {
    lnCurrent = index;
    mainImg.style.opacity = '0';
    setTimeout(function() {
      mainImg.src = lnImages[lnCurrent];
      mainImg.style.opacity = '1';
    }, 150);
    document.querySelectorAll('.ln-dot').forEach(function(d, i) {
      d.className = 'ln-dot' + (i === lnCurrent ? ' active' : '');
    });
    document.querySelectorAll('.ln-thumb').forEach(function(t, i) {
      t.className = 'ln-thumb' + (i === lnCurrent ? ' active' : '');
    });
  }

  function lnNext() { lnGoTo((lnCurrent + 1) % lnImages.length); }
  function lnPrev() { lnGoTo((lnCurrent - 1 + lnImages.length) % lnImages.length); }

  function lnSelectSize(el, size) {
    document.querySelectorAll('.ln-size').forEach(function(s) {
      s.classList.remove('selected');
    });
    el.classList.add('selected');
    lnChosenSize = size;
    document.getElementById('ln-selected-size').textContent = size;
    document.getElementById('ln-hint').style.display = 'none';
  }

  function lnShopNow(e) {
    e.preventDefault();
    if (!lnChosenSize) {
      document.getElementById('ln-hint').style.display = 'block';
      return;
    }
    window.open(stripeBase, '_blank');
  }
</script>

Last November

Last November is a transitional lifestyle brand and resource hub dedicated to the "New Era" father. It serves men navigating the shift from marriage to single fatherhood, specifically those who are committed to being present parents but feel socially or emotionally displaced. It is a brand rooted in resilience, modern fatherhood, and holistic rebuilding.