/* Product page — professional look */
:root {
    --max-width: 1200px;
    --gap: 10px;
    --accent: #0b74de;
    --muted: #6b7280;
    --card-bg: #ffffff;
    --shadow: 0 6px 18px rgba(0,0,0,0.5);
    --radius: 8px;
}

* {
    box-sizing: border-box; /* العرض المحسوب يشمل الحواف والحشو */
}

/* Page container */
.container { max-width: var(--max-width); margin: 28px auto; padding: 0 16px; box-sizing: border-box; }

/* Simple responsive row/cols (works with existing .col-7/.col-5) */
/*.row { display:flex; gap:var(--gap); align-items:flex-start; flex-wrap:wrap; }
.col-7 {
    flex: 0 0 58%;
    max-width: 58%;
    row-gap: 0;
    
    display: flex;
    flex-direction: column;
    gap: 0;
}
.col-5 { flex: 0 0 42%; max-width:42%; }

*/

@media (max-width: 900px) 
{
  .col-7, .col-5 { flex: 0 0 100%; max-width:100%; }
  .col-7 { order: 1; }
  .col-5 { order: 2; margin-top: 12px; }
}

/* Card and gallery */
.slider-for, .slider-nav {
    margin:5px;
}
.slider-for .slick-slide,
.slider-nav .slick-slide { outline: none; }

/* Main product image */
.product-image {
    width: 500px;
    max-height: 400px;
    height: auto;
    display: block;
    object-fit: contain;
    padding: 10px;

    border-radius: 10px;
    border: 10px solid transparent; /* إطار مخفي افتراضياً */
    transition: transform .12s ease, border-color .12s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Thumbnails */
.slider-nav {
  margin-top: 12px;
  margin-bottom: 0;
  /* optional small top spacing if you want a tiny gap: padding-top: 6px; */
}
.slider-nav .slick-slide {
  margin: 0;           /* remove slick's default horizontal margin */
}
.slider-nav .product-thumb-container {
  padding: 0;          /* remove container padding that creates extra spacing */
}
.slider-nav .slick-list,
.slider-nav .slick-track {
  margin: 0;
  padding: 0;
}
/* ensure thumbnails are block-level so no inline white-space causes gaps */
.slider-nav .product-thumb {
  display: block;
}
.product-thumb {
    width: 100px;
    height: 100px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 3px solid transparent; /* إطار مخفي افتراضياً */
    transition: transform .12s ease, border-color .12s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: block;
}
.slick-current .product-thumb,
.product-thumb:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}


/* Product detail column */
h1 { font-size: 1.75rem; margin: 0 0 8px; color: #0f172a; font-weight:600; text-align:center;}
.product-meta { color: var(--muted); margin-bottom: 12px; font-size: .95rem; }
.product-description { line-height:1.6; color:#111827; margin-bottom:18px; }

/* Price and CTA */
.price { font-size: 1.5rem; color: #111827; margin-bottom: 18px; font-weight:700; }
.price .old { text-decoration: line-through; color: crimson; font-weight:500; font-size:1rem; margin-right:8px; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight:600;
  box-shadow: 0 6px 16px rgba(11,116,222,0.12);
}
.btn-primary:active { transform: translateY(1px); }

/* Small utilities */
.read-more { color: var(--accent); cursor:pointer; text-decoration:underline; }

/* Accessibility */
.product-image[alt=""] { outline: 2px solid transparent; }






.slider-1 {
    max-height: 80%;
    margin: 20px auto;
    max-width: 100%; /* لا تخرج عن حدود المربع */
    display: block;
}

.slider-2 {
    max-height: 20%;
    margin: 10px auto;
    max-width: 90%; /* لا تخرج عن حدود المربع */
    display: block;
    border-radius: 22px;
    border: 1px;
}

.slick-slide {
    margin: 0px 5px;
}

    .slick-slide img {
        width: 100%;
        height: 100%;
    }

.slick-prev:before,
.slick-next:before {
    color: transparent;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .3;
}

.slick-active {
    opacity: .6;
}

.slick-current {
    opacity: 1;
}

.Attributes, .product-qty {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background-color: lightgray;
}

    .product-qty input, #SelectedValue {
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }