/*
 Theme Name:   Blocksy Child
 Description:  A premium custom e-commerce child theme for Blocksy.
 Author:       CreativeThemes
 Template:     blocksy
 Version:      1.0.0
*/

:root {
  --primary-color: #000000;
  --accent-green: #7eb344;
  --text-color: #2d2d2d;
  --light-text: #777777;
  --border-color: #e5e5e5;
}

.product-wrapper {
  max-width: 1260px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.product-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  padding-bottom: 25px;
  align-items: start;
}

@media (min-width: 768px) {
  .product-container { 
    grid-template-columns: 1.05fr 0.95fr; 
  }
}

/* --- IMAGE GALLERY --- */
.product-images { 
  display: flex; 
  gap: 15px; 
}

.thumbnails { 
  display: flex; 
  flex-direction: column; 
  width: 85px; 
  gap: 10px; 
  flex-shrink: 0; 
}

.thumb { 
  width: 100%; 
  aspect-ratio: 3 / 4; 
  border: 1px solid var(--border-color); 
  cursor: pointer; 
  overflow: hidden; 
  background-color: #f9f9f9; 
}

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

.thumb.active { 
  border-color: var(--primary-color); 
}

.main-image-container { 
  flex-grow: 1; 
  position: relative; 
  border: 1px solid var(--border-color); 
  overflow: hidden; 
  background-color: #f9f9f9; 
  cursor: zoom-in; 
  aspect-ratio: 3 / 4; 
}

.main-image-container img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
  transform-origin: center center; 
}

/* --- PRODUCT DETAILS PANEL --- */
.product-details { 
  display: flex; 
  flex-direction: column; 
  max-width: 520px; 
}

.product-nav-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-bottom: 1px solid var(--border-color); 
  padding-bottom: 8px; 
  margin-bottom: 24px; 
}

.breadcrumbs { 
  font-size: 13px; 
  color: var(--light-text); 
}

.breadcrumbs a { 
  color: var(--light-text); 
  text-decoration: none; 
}

.breadcrumbs a:hover { 
  color: var(--accent-green); 
}

.product-nav-arrows a { 
  color: var(--light-text); 
  text-decoration: none; 
  font-size: 13px; 
  margin-left: 10px; 
}

.product-title { 
  font-size: 26px; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  margin-bottom: 14px; 
  color: var(--text-color); 
}

.product-price { 
  font-size: 18px; 
  font-weight: 700; 
  color: var(--text-color); 
  margin-bottom: 24px; 
}

/* --- ATTRIBUTES & VARIATIONS --- */
.attribute-row { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 15px; 
  margin-bottom: 24px; 
}

.option-label { 
  font-size: 13px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  color: var(--text-color); 
}

.color-swatches { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
}

.swatch { 
  width: 22px; 
  height: 22px; 
  border-radius: 50%; 
  border: 1px solid var(--border-color); 
  cursor: pointer; 
  position: relative; 
}

.swatch.active::after { 
  content: ""; 
  position: absolute; 
  top: -3px; 
  left: -3px; 
  right: -3px; 
  bottom: -3px; 
  border: 1px solid var(--primary-color); 
  border-radius: 50%; 
}

.size-selector { 
  display: flex; 
  gap: 6px; 
  align-items: center; 
}

.size-box { 
  min-width: 32px; 
  height: 32px; 
  border: 1px solid var(--border-color); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 12px; 
  cursor: pointer; 
  font-weight: 500; 
  background-color: #ffffff; 
}

.size-box.active { 
  border-color: var(--primary-color); 
  font-weight: 700; 
}

/* --- QUANTITY & CART INTERACTIONS --- */
.cart-actions { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin-bottom: 24px; 
  border-bottom: 1px solid var(--border-color); 
  padding-bottom: 24px; 
}

.quantity-selector { 
  display: flex; 
  border: 1px solid var(--border-color); 
  border-radius: 30px; 
  overflow: hidden; 
  height: 40px; 
  align-items: center; 
  background-color: #ffffff; 
}

.quantity-selector button { 
  background: none; 
  border: none; 
  width: 32px; 
  height: 100%; 
  cursor: pointer; 
  font-size: 14px; 
  color: var(--light-text); 
}

.quantity-selector input { 
  width: 35px; 
  border: none; 
  text-align: center; 
  font-size: 14px; 
  font-weight: 600; 
  outline: none; 
}

.btn-add-to-cart { 
  background-color: var(--primary-color); 
  color: #ffffff; 
  border: none; 
  border-radius: 30px; 
  padding: 0 40px; 
  font-size: 12px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 0.8px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 40px; 
  transition: opacity 0.2s ease; 
}

.btn-add-to-cart:hover { 
  opacity: 0.85; 
}

/* --- METADATA --- */
.product-meta-section { 
  font-size: 13px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 15px; 
}

.meta-items { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
}

.meta-items p { 
  margin-bottom: 0; 
  color: var(--light-text); 
}

.meta-items span { 
  color: var(--text-color); 
}

/* --- TABS SYSTEM --- */
.product-tabs-container { 
  margin-top: 30px; 
  border-top: 1px solid var(--border-color); 
  padding-top: 24px; 
}

.tabs-nav { 
  display: flex; 
  justify-content: flex-start; 
  align-items: center; 
  gap: 35px; 
  margin-bottom: 12px; 
}

.tab-btn { 
  background: none; 
  border: none; 
  font-size: 13px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  padding: 5px 0; 
  color: #999999; 
  cursor: pointer; 
  position: relative; 
  transition: color 0.2s; 
}

.tab-btn.active { 
  color: var(--text-color); 
}

.tab-btn.active::after { 
  content: ""; 
  position: absolute; 
  bottom: -13px; 
  left: 0; 
  right: 0; 
  height: 2px; 
  background-color: var(--primary-color); 
  z-index: 2; 
}

.tabs-separator-line { 
  height: 1px; 
  background-color: var(--border-color); 
  width: 100%; 
  margin-bottom: 20px; 
}

.tab-panel { 
  display: none; 
  font-size: 14px; 
  color: #555555; 
  line-height: 1.6; 
  animation: fadeIn 0.3s ease; 
}

.tab-panel.active { 
  display: block; 
}

@keyframes fadeIn { 
  from { opacity: 0; } 
  to { opacity: 1; } 
}

.tab-panel p { 
  margin-bottom: 12px; 
}

.tab-panel ul { 
  list-style: none; 
  margin-top: 10px; 
}

.tab-panel ul li { 
  position: relative; 
  padding-left: 15px; 
  margin-bottom: 6px; 
}

.tab-panel ul li::before { 
  content: ">"; 
  position: absolute; 
  left: 0; 
  color: #aaa; 
  font-size: 11px; 
}

.spec-table { 
  width: 100%; 
  border-collapse: collapse; 
  margin-top: 5px; 
}

.spec-row { 
  display: flex; 
  padding: 10px 0; 
  border-bottom: 1px solid var(--border-color); 
}

.spec-row:last-child { 
  border-bottom: none; 
}

.spec-label { 
  font-weight: 600; 
  color: var(--text-color); 
  width: 120px; 
  flex-shrink: 0; 
}

.spec-value { 
  color: #555555; 
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 767px) {
  .product-images { 
    flex-direction: column-reverse; 
  }
  .thumbnails { 
    flex-direction: row; 
    width: 100%; 
    gap: 8px; 
  }
  .thumb { 
    height: auto; 
    aspect-ratio: 3/4; 
  }
  .attribute-row { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
    margin-bottom: 16px; 
  }
  .cart-actions { 
    flex-direction: column; 
    align-items: flex-start; 
  }
  .quantity-selector { 
    width: 100%; 
    justify-content: space-between; 
  }
  .btn-add-to-cart { 
    width: 100%; 
  }
  .tabs-nav { 
    gap: 20px; 
  }
  
  /* Ensure the quantity number is visible, centered, and black */
.quantity-selector input {
  color: #2d2d2d !important;
  background-color: #343443 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 40px !important;
  height: 100% !important;
  line-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important; /* Removes default spinner arrows */
}

/* Removes up/down chrome arrows to keep our custom +/- clean */
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
  
}