/* ---------- PRODUCT DETAIL PAGE ---------- */

.wrap {
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.product{
  padding:32px 0 80px;
}

/* ----- Breadcrumb ----- */

.breadcrumb{
  font-size:11px;
  letter-spacing:0.04em;
  color:#9a9a9a;
  margin-bottom:24px;
}

.breadcrumb a{
  color:#9a9a9a;
  text-decoration:none;
}

.breadcrumb a:hover{
  color:#1a1a1a;
}

.crumb-sep{
  margin:0 6px;
}

.crumb-current{
  color:#1a1a1a;
}

/* ----- Grid layout ----- */

.product-grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:64px;
  align-items:start;
}

/* ----- Gallery ----- */

.product-gallery{
  width:100%;
}

.gallery-main{
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  margin-bottom:16px;
}

.gallery-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gallery-thumbs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.gallery-thumb{
  aspect-ratio:1/1;
  overflow:hidden;
}

.gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ----- Product info ----- */

.product-info{
  position:sticky;
  top:32px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
}

.product-info > *{
  width:100%;
  flex-shrink:0;
}

.product-title{
  font-family:"Hanken Grotesk", sans-serif;
  font-weight:500;
  font-size:24px;
  color:#1a1a1a;
  margin-bottom:8px;
  max-width:320px;
}

.product-price{
  font-size:15px;
  color:#1a1a1a;
  margin-bottom:24px;
}

.product-desc{
  font-size:13px;
  line-height:1.7;
  color:#6a6a6a;
  margin-bottom:32px;
  max-width:420px;
}

/* ----- Size / Quantity options ----- */

.option-group{
  position:relative;
  margin-bottom:24px;
}

.option-label{
  display:block;
  font-size:10px;
  letter-spacing:0.08em;
  color:#8a8a8a;
  margin-bottom:12px;
}

.size-guide{
  position:absolute;
  top:0;
  right:0;
  font-size:10px;
  letter-spacing:0.04em;
  color:#8a8a8a;
  text-decoration:underline;
}

.size-options{
  display:flex;
  gap:8px;
}

.size-btn{
  width:36px;
  height:36px;
  border:1px solid #d8d4cd;
  background:#fff;
  font-size:12px;
  color:#1a1a1a;
  cursor:pointer;
}

.size-btn.active{
  background:#1a1a1a;
  color:#fff;
  border-color:#1a1a1a;
}

.size-btn:hover:not(.active){
  border-color:#1a1a1a;
}

.qty-control{
  display:flex;
  align-items:center;
  gap:14px;
}

.qty-btn{
  width:28px;
  height:28px;
  /* border:1px solid #d8d4cd; */
  background:#fff;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  color:#1a1a1a;
}

.qty-value{
  font-size:13px;
  color:#1a1a1a;
  min-width:12px;
  text-align:center;
}

/* ----- Add to bag ----- */

.add-to-bag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Dimensions & Spacing matching the image proportions */
  width: 45%;
  height: 52px;              /* Slightly taller to match the input boxes */
  padding: 0 24px;
  
  /* Colors */
  background: #100604;       /* The very dark, warm-tinted off-black/brown seen in the image */
  color: #ffffff;
  border: none;
  
  /* Typography */
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;           /* Slightly adjusted for legibility */
  font-weight: 500;          /* A bit cleaner than 600 to match the exact weight in the picture */
  letter-spacing: 0.15em;    /* Noticeably wider tracking/letter-spacing in the screenshot */
  text-transform: uppercase;
  
  /* Interactions & Settings */
  cursor: pointer;
  border-radius: 0;          /* Completely sharp corners */
  margin-bottom: 32px;
  transition: background .2s ease;
}

.add-to-bag-btn:hover {
  background: #000000;       /* Shifts to absolute pitch black on hover */
}

/* ----- Accordion ----- */

.accordion{
  border-top:1px solid #e6e2dd;
  width:100%;
}

.accordion:last-child{
  border-bottom:1px solid #e6e2dd;
}

.accordion-trigger{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
  background:none;
  border:none;
  font-size:11px;
  letter-spacing:0.06em;
  color:#1a1a1a;
  cursor:pointer;
}

.accordion-icon{
  font-size:10px;
  transition:transform 0.2s ease;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon{
  transform:rotate(180deg);
}

.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.25s ease;
}

.accordion-panel p{
  font-size:12.5px;
  line-height:1.7;
  color:#6a6a6a;
  padding-bottom:16px;
}

.accordion-panel.open{
  max-height:200px;
}

/* ----- Lifestyle image ----- */

.product-lifestyle{
  margin-top:64px;
  width:100%;
  max-width:420px;
  aspect-ratio:4/5;
  overflow:hidden;
}

.product-lifestyle img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:1100px){
  .product-grid{
    grid-template-columns:1fr 360px;
    gap:40px;
  }
}

@media (max-width:860px){
  .wrap{ padding:0 24px; }
  .product-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .product-info{
    position:static;
  }
  .product-lifestyle{
    max-width:100%;
  }
}

@media (max-width:480px){
  .wrap{ padding:0 16px; }
  .product{ padding:20px 0 56px; }
  .product-title{ font-size:20px; }
  .gallery-thumbs{ gap:10px; }
  .add-to-bag-btn{ padding:13px; }
}