/* Product page */
  .note-bar{font-size:12px; color:#111; text-align:center; padding:10px 8px; border-bottom:1px solid var(--ring)}
  .container{max-width:1100px; margin:0 auto; padding:24px var(--container-pad) 56px}
  .product{
    margin: 10px 0px;
    display:grid; gap:24px;
    grid-template-columns: 1fr;
  }
  .media{
    width:100%;  overflow:hidden; background:#fff;
  }
  .media img{width:100%; height:auto; display:block; object-fit:contain}
  .summary{
    padding: 0px 15px;
  }
  .summary .brand-name{font-size:12px; letter-spacing:.04em; color:#6b7280; text-transform:uppercase; margin-bottom:8px}
  .summary h1{font-size:24px; line-height:1.2; margin:0 0 8px}
  .price-row{display:flex; align-items:center; gap:10px; margin:8px 0 14px}
  .price{font-weight:800}
  .pill{font-size:12px; padding:4px 8px; background:#f1f1f1; border-radius:999px; color:#111}
  .size-wrap{margin:18px 0 10px}
  .label{font-size:13px; color:#111; margin-bottom:8px}
  .sizes{display:flex; gap:10px; flex-wrap:wrap}
  .size-btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:34px; min-width:46px; padding:0 10px; border-radius:999px; border:1px solid #d1d5db;
    background:#fff; cursor:pointer; font-weight:600;
  }
  .size-btn[aria-pressed="true"]{border-color:#111}
  .size-btn:disabled{opacity:.4; cursor:not-allowed}

  .qty-row{display:flex; align-items:left; flex-direction: column; gap:12px; margin:16px 0 20px}
  .qty{display:inline-grid; grid-template-columns: 36px 44px 36px; border:1px solid #d1d5db; width: fit-content; overflow:hidden}
  .qty button{border:0; background:#f7f7f7; height:38px; font-size:18px; cursor:pointer}
  .qty input{width:44px; height:38px; text-align:center; border:0; outline:0; font-weight:700}

  .cta-col{display:flex;flex-direction: column; gap: 10px; align-items: center;justify-content: center;}
  .btn{height:44px;
    width: 400px;
     font-weight:600; letter-spacing:.01em; cursor:pointer}
  .btn-outline{background:#fff; border:1px solid #d1d5db}
  .btn-outline[disabled]{opacity:.6; cursor:not-allowed}
  .btn-solid{background:#000; color:#fff; border:1px solid #000}

  .details{margin-top:22px; color:#111}
  .details ul{margin:0; padding-left:18px}
  .details li{margin:8px 0}

  .legal{margin-top:36px; font-size:12px; color:#111; text-align:center}


  /* Responsive columns */
  @media (min-width:768px){
    :root{ --icon-box:56px; --icon-size:26px; --logo-h:26px; --container-pad:24px }
    .nav{height:64px}
    .product{grid-template-columns: 1.1fr .9fr; align-items:start}
  }
  @media (min-width:1024px){
    :root{ --icon-box:64px; --icon-size:28px; --logo-h:30px; --container-pad:28px }
    .nav{height:72px}
    .summary h1{font-size:28px}
  }


  .cart-item { display:flex; align-items:center; gap:.8rem; padding:.8rem; background:#1111110d; border:1px solid #1a1a1a; border-radius:.6rem; margin-bottom:.8rem; }
.cart-item img { width:3rem; height:3rem; object-fit:cover; border-radius:.4rem; filter:grayscale(100%); }
.cart-item-info { flex:1; }
.cart-item-name { font-weight:600; font-size:.8rem; color:#000; margin-bottom:2px; }
.cart-item-meta { font-size:.75rem; color:#606060; }

.cart-qty { display:flex; align-items:center; gap:.4rem; }
.cart-qty button { width:26px; height:26px; border:1px solid #ddd; background:#fff; border-radius:6px; cursor:pointer; }
.cart-qty input { width:42px; height:26px; text-align:center; border:1px solid #ddd; border-radius:6px; }
.cart-row-right { text-align:right; }
.remove-item-btn { border:none; background:transparent; padding:.25rem; cursor:pointer; opacity:.7; }
.remove-item-btn:hover { opacity:1; }

.size-btn.active { border-color:#111; }

/* Slide-down toast */
.toast{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -120%); /* hidden above viewport */
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0;
  z-index: 9999;

  /* box look */
  display: inline-flex;              /* keep icon + text on one line */
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);

  background: #000;                  /* black box */
  color: #fff;                       /* white text */
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;               /* prevent wrapping */
  min-height: 36px;                  /* prevents “dot” look even if short text */
}

/* white checkmark icon */
.toast::before{
  content: "✔";
  font-weight: 800;
  display: inline-block;
  transform: translateY(1px);        /* optical alignment */
  color: #fff;                       /* white check */
}

.toast.show{
  transform: translate(-50%, 0);     /* slide into view */
  opacity: 1;
}

/* Ensure variant classes don't override black */
.toast.success,
.toast.error{
  background: #000;                  /* keep black regardless of variant */
  color: #fff;
}

/* Reduce motion if user prefers it */
@media (prefers-reduced-motion: reduce){
  .toast{ transition: none; }
}