/*  BASE TYPOGRAPHY  */
body      { font-family: Arial, sans-serif; }

/*  NAVBAR & CART  */
.navbar          { background:#212529; margin-bottom:40px; }
.navbar-brand img{ height:40px; }
.navbar-nav      { margin-left:auto; margin-right:auto; }   /* center menu */
.nav-link        { color:#fff !important; font-size:1rem; margin:0 10px; }

.cart-icon  { font-size:1.8rem; color:#fff; position:relative; }
.cart-badge { background:red; color:#fff; font-size:.9rem; font-weight:bold;
              border-radius:50%; padding:4px 8px; position:absolute;
              top:-10px; right:-15px; }

/*  TABLET LAYOUT  */
@media (max-width:992px){
  .navbar .container{display:flex;align-items:center;justify-content:space-between;}
  .navbar-brand     {order:0;margin-right:auto;}
  .cart-icon        {order:2;margin-left:auto;font-size:1.2rem;}
  .navbar-toggler   {order:1;margin-left:10px;font-size:1.5rem;color:#fff;}
  .navbar-collapse  {order:3;width:100%;flex-grow:1;text-align:center;}
  .navbar-nav       {flex-direction:column;gap:10px;}
  .navbar-nav .nav-link{color:#fff !important;text-align:center;}
}

/* MOBILE LAYOUT  */
@media (max-width:768px){
  .gallery         { flex-direction:row; gap:10px; }
  .thumbnail       { width:60px; height:60px; }
  .main-image img  { max-height:300px; }

  .navbar .container .navbar-toggler{font-size:2rem;color:#fff;}
  .navbar .container .cart-icon    {font-size:2rem;color:#fff;}

  .cart-icon  { position:relative; font-size:1.8rem; }
  .cart-badge { position:absolute; top:-6px; right:-12px; font-size:.9rem;
                padding:3px 6px; background:red; color:#fff; border-radius:50%;
                font-weight:bold; display:flex; align-items:center;
                justify-content:center; min-width:25px; min-height:25px; z-index:10;}

  .navbar-brand img{ width:120px; height:auto; display:block; margin:0 auto; }
  .navbar{ padding:0 10px; }
}

/*  “FLY-TO-CART” ANIMATION  */
.fly-to-cart           { position:absolute; z-index:1000; pointer-events:none;
                         opacity:1; transition:transform 1s ease-in-out,
                                                    opacity 1s ease-in-out; }
.fly-to-cart.fly-end   { transform:translate(calc(100vw - 80px), -20px) scale(.2);
                         opacity:0; }

/*  PRODUCT TABLES  */
.table                { margin-top:20px; width:100%; font-size:.9rem; }
.table th, .table td  { text-align:left; padding:10px; }
.table-striped tbody tr:nth-of-type(odd){ background:#f9f9f9; }
.table-bordered       { border:1px solid #ddd; }
.table th[colspan]    { text-align:center; font-size:1.1rem; font-weight:bold; }

/*  GALLERY  */
.gallery              { display:flex; flex-direction:row; gap:15px;
                         align-items:flex-start; }
.thumbnails           { display:flex; flex-direction:column; gap:10px;
                         overflow:visible; }
.thumbnail            { cursor:pointer; width:70px; height:70px; object-fit:cover;
                         border:2px solid #ddd; border-radius:8px; background:#fff;
                         box-shadow:0 4px 10px rgba(0,0,0,.1);
                         transition:transform .3s, box-shadow .3s, border-color .3s;
                         position:relative; z-index:1; }
.thumbnail.active     { border-color:#000; box-shadow:0 6px 15px rgba(0,0,0,.3);
                         transform:scale(1.05); z-index:2; }
.thumbnail:hover:not(.active){
                         border-color:#0071a1; box-shadow:0 6px 15px rgba(0,0,0,.2);
                         transform:scale(1.05); }

/*  MAIN IMAGE CONTAINER  */
.main-image {
    flex-grow: 1;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: 100%;  /* Ensure the container takes full width */
    height: 400px;  /* Set a fixed height */
    max-width: 500px;  /* Set a fixed maximum width */
    overflow: hidden;  /* Prevent image overflow */
}

/*  MAIN IMAGE CONTENT  */
.main-image img {
    width: 80%;
    height: 80%;
    object-fit: contain;  /* Maintain aspect ratio without stretching the image */
    border-radius: 8px;
}

/* Mobile Layout Adjustments */
@media (max-width: 768px) {
    .main-image {
        height: 300px;  /* Adjust the height on mobile */
        max-width: 100%;  /* Ensure it fills the screen width */
    }

    .main-image img {
        width: 90%;  /* Adjust the image size to fit the container */
        height: auto;  /* Let the height adjust based on aspect ratio */
        object-fit: contain;  /* Maintain the aspect ratio */
    }
}

/*  QUANTITY / PRICE BLOCKS  */
.quantity-input            { display:flex; align-items:center; margin-top:20px; }
.quantity-input button     { background:#ddd; border:1px solid #ccc; padding:5px 10px;
                             cursor:pointer; font-size:1rem; }
.quantity-input button:hover{ background:#ccc; }
.quantity-input input      { width:50px; text-align:center; border:1px solid #ccc;
                             font-size:1rem; padding:5px; margin:0 5px; }

.product-section-title { font-size:1rem; font-weight:bold; margin-top:20px; color:#595959; }
.product-section-value { font-size:.9rem; color:#333; margin-bottom:10px; }

.description-box       { border:2px solid #007bff; padding:15px; margin-top:20px;
                          background:#f9f9f9; border-radius:10px;
                          box-shadow:0 4px 6px rgba(0,0,0,.1); }
.product-details-text  { font-size:16px; color:#333; line-height:1.5; }

/*  BRAND LOGO SIZES  */
.logo-img{ width:120px; height:auto; }
@media (min-width:768px){  .logo-img{ width:150px; } }
@media (min-width:1200px){ .logo-img{ width:200px; } }

/*  FONT AWESOME FALLBACK  */
@font-face{
  font-family:'FontAwesome';
  src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
      url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
      url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
  font-display:swap;
}

.product-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .product-title {
        font-size: 24px;
    }
}