/*product photos and info section*/


/* Product Gallery (Photos) */
.product-gallery {
  flex: 1;
  max-width: 705px;
}

.main-image {
  width: 100%;
  height: 320px;
  object-fit: contain;
  margin-bottom: 10px;
}

.brand-logo {
  margin: 1rem 0;
}

div.brand-logo img{
    max-width: 156px;
    max-height: 36px;
}


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

.image-counter {
  font-size: 0.9em;
  display: flex;
}

.nav-arrows {
  display: flex;
  gap: 10px;
}

.nav-arrows button {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  padding: 5px;
  color: #444;
}

.thumbnail-row {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 5px;
}

.thumbnail-row::-webkit-scrollbar {
  display: none;
}

.thumbnail-row img {
  width: 140px;
  height: 108px;
  object-fit: contain;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s, opacity 0.3s;
  opacity: 0.75;
}

.thumbnail-row img:hover {
  opacity: 1;
}

.thumbnail-row img.active {
  border-color: #d8800562;
  opacity: 1;
}

/* Product Card (Info) */
.product-card-info {
  flex: 1;
  max-width: 480px;
  padding: 20px;
}

.stock svg {
  display: flex;
  align-items: center;
}

.title {
  font-weight: bold;
  font-size: 1.125rem;
  margin: 1.125rem 0;
}


.description {
  font-size: 1rem;
  margin: 1.125rem 0;
}

.stock {

  font-size: 1rem;
  margin: 1.25rem 0;
  display: flex;
  gap: .4rem;
  align-items: center;
}

.stock-info {
  display: flex;
  gap: .5rem;
  font-weight: bold;
  align-items: baseline;
}

span.delivery-info {
  font-size: 1rem;
}

.price {
  font-size: 1.5rem;
  font-weight: bold;

}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 1.125rem;
}

select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M6.05031 6.21221L6.02777 6.23475L5.67421 5.8812L1.14652 1.35351L0.792969 0.999953L1.50008 0.292847L1.85363 0.6464L6.02833 4.82111L10.225 0.624427L10.5786 0.270874L11.2857 0.977981L10.9321 1.33153L6.40443 5.85923L6.05031 6.21221Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

select:focus {
  border-color: #f3800e61;
  outline: none;
  box-shadow: 0 0 0 2px #f3800e61;
}

.form-group {
  position: relative;
}


select,
input[type="number"] {
  width: 100%;
  border-radius: 4px;
}

.counter {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: fit-content;
  padding: 5px 10px;
}

.counter button {
  background: none;
  border: none;
  font-size: 1.2em;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #000;
}

.counter button:hover {
  background-color: #f8f8f8;
  color: #f08e34;
  border-radius: 4px;
  transform: scale(1.1);
}



.cart-item__increment button {
  background: none;
  border: none;
  font-size: 1.2em;
  padding: 5px 10px;
  cursor: pointer;
}

.cart-item__count {
  border: none;
  width: 30px;
  text-align: center;
  font-size: 1em;
  display: inline-block;
}

.add-to-cart {
  background-color: #f39c12;
  color: white;
  border: none;
  padding: 12px;
  width: 100%;
  font-size: 1em;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
}

.add-to-cart:hover {
  background-color: #d87f05;
}

.footer-box {
  margin-top: 4rem;
  padding: 20px;
  background-color: rgba(240, 142, 52, 0.2);
  border-radius: 4px;
  font-size: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.footer-box a {

  display: flex;
  margin-top: 10px;
  text-decoration: underline;
  align-items: center;
  gap: 8px;
}


.footer-box a:hover {
  text-decoration: underline;
}


.nav-arrows button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.nav-arrows button:hover {
  transform: scale(1.15);
}

.nav-arrows button:hover svg path {
  fill: #f39c12;
  /* Orange on hover */
}

.product-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 2.5rem 0;
  overflow: visible;
}

.back-text {
  display: flex;
  align-items: center;
}

a.back-arrow {
  margin-right: 1rem;
  transition: transform 0.2s ease, filter 0.2s ease;
}

a.back-arrow:hover {
  transform: scale(1.15);

}

.back-arrow:hover svg path {
  fill: #f3800e;
}



.product.section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  padding: 0 1rem !important;
}

.price-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.5rem 0rem;
}

.price-toggle .switch {
  width: 45px;
  height: 19px;
}



.price-toggle .slider::before {
  height: 15px;
  width: 15px;
}

.price-toggle .slider::before {
  position: absolute;
  content: "";
  right: 2px;
  left: auto;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}


input:checked+.price-toggle.slider::before {
  transform: translateX(-24px);
}

input:checked+.price-toggle.slider {
  background-color: #F08E34;
}



.primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {

  .container,
  .product.section {
    flex-direction: column;
    align-items: center;
  }

  .product-gallery,
  .product-card {
    max-width: 100%;
    padding: 0 1rem;
  }

  .main-image {
    height: auto;
    max-height: 300px;
    object-fit: contain;
  }

  .top-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
  }

  .thumbnail-row {
    gap: 8px;
    padding-bottom: 8px;
  }

  .thumbnail-row img {
    width: 90px;
    height: 70px;
  }

  .product-title {
    font-size: 1.5rem;
    -webkit-line-clamp: unset;
    -webkit-box-orient: vertical;
  }

  .footer-box {
    font-size: 1rem;
    padding: 16px;
  }


  .nav-arrows {
    gap: 6px;
  }

  a.gray-badge,
  p {
    font-size: 1rem;
  }

  .price-toggle {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}



/*product information with downloading files*/


.product-info-section {
  max-width: 600px;
}

.file-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: white;
}

.file-name {
  font-size: 1rem;
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.file-actions input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: black;
}

.download-icon {
  font-size: 1.25rem;
  color: #000;
  text-decoration: none;
}

.download-icon:hover {
  color: #f08e34;
}

.file-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.file-buttons button {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.download-selected {
  background-color: #f08e34;
  color: white;
  border: none;
}

.download-selected:hover {
  background-color: #d97706;
}

.download-all {
  background-color: white;
  border: 1px solid #ccc;
  color: #333;
}

.download-all:hover {
  border-color: #f08e34;
  color: #f08e34;
}

.section h2 {
  margin-bottom: 3.75rem;
}

.main-image img {
  width: 500px;
  height: auto;
}

.thumbnail-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.thumbnail {
  cursor: pointer;
  border: 2px solid transparent;
}

.thumbnail.active {
  border-color: orange;
}

form#add-to-cart button.add-to-cart-btn {
  margin-top: 2rem;
}

form#add-to-cart button.add-to-cart-btn.disabled {
  opacity: .3;
  filter: grayscale(60%);
  pointer-events: none;
}

form#add-to-cart {

  gap: 20px;
  margin: 20px 0px;
}

form#add-to-cart .form-row {
  margin-bottom: 0px;
}

form#add-to-cart .form-row .counter {
  min-width: 125px;
}

button.disabled {
  background-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed !important;
  border: none;
  opacity: 0.6;
  pointer-events: none;
}


.product.section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.product-gallery {
  flex: 1;
  min-width: 400px;
}

.brk-product-page-info {
  flex: 1;
  max-width: 600px;
  align-content: end;
}


.matrix-dimensions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.matrix-dimensions .form-group {
  display: flex;
  flex-direction: column;
}

.matrix-dimensions label {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.matrix-dimensions select {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  width: 100%;
}



.in-stock.green-accept::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.0839844 1.5C0.0839844 1.08579 0.419771 0.75 0.833984 0.75H19.1673C19.5815 0.75 19.9173 1.08579 19.9173 1.5V5.66667C19.9173 6.08088 19.5815 6.41667 19.1673 6.41667H18.2506V16.4998C18.2506 16.914 17.9148 17.2498 17.5006 17.2498H2.50061C2.0864 17.2498 1.75061 16.914 1.75061 16.4998V6.41667H0.833984C0.419771 6.41667 0.0839844 6.08088 0.0839844 5.66667V1.5ZM17.5006 4.9165L17.5165 4.91667H18.4173V2.25H1.58398V4.91667H2.48477L2.50061 4.9165L2.51645 4.91667H17.4848L17.5006 4.9165ZM16.7506 6.41667H3.25061V15.7498H16.7506V6.41667ZM8.33398 8.25C7.91977 8.25 7.58398 8.58579 7.58398 9C7.58398 9.41421 7.91977 9.75 8.33398 9.75H11.6673C12.0815 9.75 12.4173 9.41421 12.4173 9C12.4173 8.58579 12.0815 8.25 11.6673 8.25H8.33398Z" fill="%23F08E34"/></svg>');
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.in-stock.red-error::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.41602 9.99984C2.41602 5.81168 5.81119 2.4165 9.99935 2.4165C14.1875 2.4165 17.5827 5.81168 17.5827 9.99984C17.5827 14.188 14.1875 17.5832 9.99935 17.5832C5.81119 17.5832 2.41602 14.188 2.41602 9.99984ZM9.99935 0.916504C4.98276 0.916504 0.916016 4.98325 0.916016 9.99984C0.916016 15.0164 4.98276 19.0832 9.99935 19.0832C15.0159 19.0832 19.0827 15.0164 19.0827 9.99984C19.0827 4.98325 15.0159 0.916504 9.99935 0.916504ZM10.7494 4.99988C10.7494 4.58566 10.4136 4.24988 9.99936 4.24988C9.58515 4.24988 9.24936 4.58566 9.24936 4.99988V9.99988C9.24936 10.284 9.40986 10.5437 9.66395 10.6707L12.9973 12.3374C13.3678 12.5226 13.8183 12.3724 14.0035 12.002C14.1888 11.6315 14.0386 11.181 13.6681 10.9957L10.7494 9.53635V4.99988Z" fill="%23F08E34"/></svg>');
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}


.in-stock.red-error {
  color: #d63a3ab9 !important;
  font-weight: bold;
}

.in-stock.green-accept {
  color: #008000a6 !important;
  font-weight: bold;
}

/* Overlay Viewer thumbnails */

.image-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.image-viewer-overlay.active {
  display: flex;
}

.image-viewer-overlay .viewer-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}

.image-viewer-overlay .viewer-nav,
.image-viewer-overlay .viewer-close {
  position: absolute;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  user-select: none;
}

.image-viewer-overlay .viewer-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.image-viewer-overlay .viewer-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.image-viewer-overlay .viewer-close {
  top: 20px;
  right: 20px;
  font-size: 28px;
  width: 44px;
  height: 44px;
}


/*discount style*/

.hidden {
  display: none;
}


.price-block {
  font-size: 18px;
  margin: 10px 0;
}

.old-price {
  text-decoration: line-through;
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.new-price {
  color: #d57f30;
  font-weight: bold;
  font-size: 1.5rem;
}