/* accessorycheckbox - refreshed professional styling */

/*
  Full-width placement:
  The module is usually hooked into the right column, but our JS moves
  #accessories-checkbox-module to #accessories-fullwidth-anchor.
*/
.accessorycheckbox-fullwidth{
  width: 100%;
  clear: both;
  margin-top: 18px;
}

div.accessory-heading{
  font-size: 16px;
  font-weight: 700;
  color: #111;
  padding: 6px 2px;
  margin-bottom: 6px;
}

div.accessorycheckbox{
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  margin-bottom: 14px;
}

.acc-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #ededed;
}

.acc-row:last-child{ border-bottom: 0; }

.acc-check{ width: 18px; flex: 0 0 18px; }

.acc-img img{
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.acc-name{
  flex: 1;
  font-weight: 600;
  line-height: 1.2;
}

.acc-name a{ color: #111; text-decoration: none; }
.acc-name a:hover{ text-decoration: underline; }

.acc-price{
  font-weight: 700;
  white-space: nowrap;
  margin-left: 6px;
}

.acc-qty{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.acc-qty-input{
  width: 58px;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
}

.acc-qty-btn{
  width: 34px;
  height: 34px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.acc-qty-btn:hover{ border-color: #bdbdbd; }

.acc-row .acc-qty-btn:disabled,
.acc-row .acc-qty-input:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

a.hidden, input.hidden{display:none;}


/* ===== Layout fixes: use full available width (PrestaShop theme wrappers can constrain modules) ===== */
.multi-accessories{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box;
}

.multi-accessories *{ box-sizing: border-box; }

/* Force common product-page containers to allow full-width module */
#product .product-additional-info .multi-accessories,
#product .product-actions .multi-accessories,
#product .product-information .multi-accessories,
#product .product-additional-info div.accessorycheckbox,
#product .product-actions div.accessorycheckbox,
#product .product-information div.accessorycheckbox{
  width: 100% !important;
  max-width: 100% !important;
}

/* If the theme centers modules with auto margins, neutralize it */
.multi-accessories, .multi-accessories div.accessorycheckbox{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== Optional: two-column list on desktop to reduce page length ===== */
@media (min-width: 992px){
  .multi-accessories div.accessorycheckbox{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
  .multi-accessories .acc-row{
    padding: 10px 0;
  }
}


/* ===== Force left alignment inside themes that center module blocks ===== */
#product .multi-accessories{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
#product .multi-accessories div.accessorycheckbox{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* Cart recommendations: put qty stepper under the item (not to the right) */
.accessories-cart-recommendations .acc-row{
  flex-wrap: wrap;
}
.accessories-cart-recommendations .acc-qty{
  flex: 0 0 100%;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.accessories-cart-recommendations .acc-price{
  margin-left: auto;
}

/* Cart recommendations: put qty stepper under the item (not to the right) */
.accessorycheckbox-cart .acc-row{
  flex-wrap: wrap;
}
.accessorycheckbox-cart .acc-qty{
  flex: 0 0 100%;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.accessorycheckbox-cart .acc-price{
  margin-left: auto;
}

/* --- Cart recommendations: thin borders around each accessory card --- */
.accessorycheckbox-cart .accessorycheckbox .acc-row{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  padding: 10px;
  margin: 0; /* grid gap handles spacing */
  background: #fff;
  border-bottom: none; /* override older divider line */
}

/* --- Cart recommendations: darken qty stepper --- */
.accessorycheckbox-cart .acc-qty-btn{
  border-color: rgba(0,0,0,0.35);
  background: #f3f3f3;
  color: #111;
}
.accessorycheckbox-cart .acc-qty-input{
  border-color: rgba(0,0,0,0.35);
  background: #fff;
  color: #111;
}
.accessorycheckbox-cart .acc-qty-btn:hover{
  border-color: rgba(0,0,0,0.55);
}