.header{

    display: flex;
    align-items: center;
gap: 20px;
margin-top: 5px;
margin-left: auto;
  position: relative;
  overflow: visible;

background-color: #ebebeb;
}
.header img{

    height: 80px;
    width: 100px;
    margin-left: 40px;
    margin-right: 100px ;
}

.login{
    display: flex;
    justify-content:flex-end;
    gap: 20px;
    margin-left: auto;
    margin-right: 30px;
}
.login button{

    background-color:rgb(255, 123, 0);
    border-radius: 20px;
    height: 40px;
    width: 100px;
    color: white;
    border: none;
   right: 50px;
    
}

.headb button{

     background-color: rgb(0, 58, 139);
    border-radius: 20px;
    height: 40px;
    width: 100px;
    color: white;
    border: none;
}
.header input{

    border-radius: 20px;
    background-color: white;
    height: 40px;
    width: 500px;
    padding-left: 20px;
    padding-right: 200px;
    
}
.searchbar{
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 50%;
    align-items: center;
    position: relative;
}

.searchbar img{
    height: 20px;
    width: 35px;
    margin: 0;
    padding: 3px;
    justify-content: center;
    border: none;
}
.searchbar button{
    height: 35px;
    border-radius: 20px;
    width: 40px;
    background-color: white;
    position: absolute;
    left:710px;
    border: none;
}
.cart button{
    background-color: rgb(0, 58, 139);
    border-radius: 20px;
    height: 40px;
    width: 100px;
    color: white;
    border: none;
    margin-left: 70px;
}
.main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fb;
}
.anounce{
display: flex;
    margin: 70px 20px 90px 20px;
    
    width: 80%;
    justify-content: center;
    text-align: center;
    gap: 20px;
    height: 500px;

}
.anounce h2{
    font-size: 3rem;
    color: rgb(37, 37, 143);
    font-family: Arial;
}

.ads{
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.31);
    background-color: white;
    width: 100%;
    text-align: center;
}
.ads img{
    height: 280px;
    width: 100%;
    display: block;
    margin-top: 15px;

}
.ads button{
    background-color: rgb(66, 130, 66);
    border-radius: 10px;
    height: 40px;
    width: 60%;
    margin-top: 20px;
    margin-bottom: 10px;
    border: none;

}

.langc{
   border: none;
    margin-left: 60px;
    margin-right: 30px;
    background-color: #ebebeb;
    display: flex;
}
.fa-solid fa-earth-americas{
    height: 30px;
}
.headb{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.price-tag{
    font-size: 2rem;
    color: #cc5200;
    margin: 0 auto;
    background-color: white;
    width: 35%;
    font-weight:900 ;
    margin-bottom: 8px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.flex{
    display: flex;
    gap: 20px;
    justify-content: center;

}
.flex button{
    width: 20px;
    height: 20px;
  background-color:white;
}
.aboutus{
    margin: 20px 50px 10px 50px;
    align-items: center;
 background-color: #c8d4db;
 padding: 10px;
 padding-bottom: 25px;
}
.btn-abt{
    background-color:  rgb(0, 58, 139);
    border-radius: 10px;
    height: 40px;
    width: 120px;
    color: white;
    margin-bottom: 50px;
    border: none;
  
    text-align: center;
}
.aboutus h2{
    text-align: center;
    margin-top: 40px;
    color: #cc5200;
    margin-bottom: 20px;
}
.aboutus h1{
    text-align: center;
    margin-top: 20px;
    color: #cc5200;
    margin-bottom: 30px;
}
.centerbtn{
    display: flex;
    justify-content: center;
    
}
button {
  cursor: pointer;
}
.flex1{
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginp1{
margin: 60px 40px;
   background-color: white;
    border: 2px solid black;
    height:500px;
    width: 550px;
    background-size:cover;
    background-repeat: no-repeat;
    margin: 20px auto;
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 20px;
   padding: 20px 10px;
   background-color:white ;
   border-radius: 10px;
}
.loginp1 input{
    width: 80%;
    margin: 0 auto;
    height: 50px;
    border: none;
    border-bottom: 1px solid black;
    padding: 8px;
}
.loginp1 button{
    border-radius: 19px;
    width: 80%;
    height: 30px;
    background-color: rgb(0, 58, 139);
    color: white;
    border: none;

}
.loginp1 h5{
    font-size: 1.3rem;
}
.loginp1 h2{
    font-size: 1.7rem;
    color:  rgb(0, 0, 0);
    margin-top: 10px;
    margin-bottom: 30px;
}
.loginph img{
    height: 38%;
    width: 40%;
}
.loginp1 a{
    border-radius: 10px;
    width: 80%;
    height: 30px; }

.loginp1 a button{
    background-color: #161616;
}
.loginp1 input:hover{
color: black;
background-color: rgb(214, 213, 213);

}
    .ads h3{
       font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5rem;
        background-color: white;
        margin-bottom: 13px;
        margin-top: 10px;
    }
.lang1{
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        position: relative;
}
.lang-options{
    display: grid;
    justify-content: center;
    width: 110px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    margin: 0;
    border-radius: 10px;
    z-index: 30;

    
}
.lang-options.hidden {
  display: none;
}
.lang-option{
    color: darkblue;
    width: 70px;
    border-radius: 10px;
}
.add-to-cart:hover{
background-color:  rgb(43, 88, 43);

}
.login button:hover{
    background-color: rgb(179, 87, 2);
}
.cart button:hover{
    background-color:  rgb(0, 39, 95);
}
.headb button:hover{
    background-color: rgb(0, 39, 95);
}

.cards {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  justify-content: center;
  gap: 24px;
  padding: 20px;
}

.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.product-card img {
  height: 250px;
  width: 100%;
  object-fit: cover;
  background-color: #f5f5f5;
  transition: transform 0.3s ease;
}

.product-card:hover img {
  transform: scale(1.04);
}

.product-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 14px 12px 4px;
  text-align: center;
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .price-tag {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff7b00;
  margin: 4px 0 12px;
}

.product-card .add-to-cart {
  width: calc(100% - 24px);
  margin: 0 12px 16px;
  padding: 10px 0;
  background-color: #0a1e3f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.product-card a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.product-card .add-to-cart:hover {
  background-color: #12315f;
}

.product-card .add-to-cart:disabled {
  background-color: #1e7e34;
  cursor: not-allowed;
}
.category-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0a1e3f;
  text-align: center;
  margin: 40px 0 20px;
  position: relative;
  padding-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.category-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #ff7b00;
  border-radius: 2px;
}
.cart-item{
    display: flex;
    align-items: center;
    border: 3px solid black;
    width: 80%;
    margin: 10px auto;
    text-align: left;
    height: 500px;
    margin-bottom: 70px;
  
}
.cart-item-image{  
     width: 100%;
    height: 100%;
    align-items: center;
    margin: 0 ;
    border: 2px solid black;
   
}
.cart-item-image img{
    width: 100%;
    height: 90%;
    align-items: center;
    margin: 0 ;
}
.cart-item-details h1{
    text-align: center;
    font-size:3rem;
    font-weight: 600;
    color:#151718;
    margin-bottom:30px

}
.cart-item-details {
   
    width: 65%;
    height: 100%;
    display: block;
    margin-left: 20px;
}
.price-cart{
    display: flex;
    justify-content: center;
    margin-bottom:auto;
    align-items: center;
    border: 3px solid red;
    font-size: 1.5rem;
    height:110px;
    width: 70%;
    margin: 20px 200px 0px 200px;
    padding:10px;
    text-align: center;
}
.flexn{
    display:flex;
    gap:20px;
    font-size: 1.5rem;
    margin-bottom: 20px;
    align-items: center;
}
.flexn input[type="number"]{
    width: 50px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid black;
    text-align: center;
}
fieldset{
    border: 1.2px solid black;
    width: 98%;
    padding: 20px;
    border-radius: 10px;
    margin-right:auto;
    font-size: 1.2rem;
}
.unitp{
    background-color: rgb(7, 91, 67);
    color: white;
    border:1px solid#151718;
    height:60px;
    width: 170px;
    align-items: center;
    text-align: center;
    padding:auto 5px;
    margin-top: 20px;
    font-size: 2rem;
}
.price-cart p{
    font-size: 2.5rem;
    font-weight: 600;
    margin-left: 40px;
    color:rgb(115, 16, 16)
}
.flex12{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    
}
.flex12 button{
    background-color: rgb(39, 37, 37);
    border-radius: 5px;
    height: 50px;
    color: white;
    border: none;
    margin-left:10px;
    margin-right:20px;
    right: 50px;
    width:5%;
}
.ads a{
    text-decoration: none;
    color:black;
}
.ads a:hover{
    color: rgb(0, 58, 139);
    underline: 1px solid rgb(0, 58, 139);
}
.color-circle{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
}
.categories{
    margin-top:50px;
    width: 70%;
}
.categories h4{
    margin-bottom: 20px;
}
#category-list{
    display: grid;
      grid-template-columns: repeat(4, 1fr);
    margin: 40px ;
    gap: 20px;
    align-items: center;
    justify-content: center;
    
}

.category-card{
     width: 400px;
    height: 400px;
    margin-bottom: 40px;
    border: 2px solid rgb(166, 143, 13);
    padding: 10px;
    background-color: white;
}
.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.bestseller-card {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.bestseller-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(10, 30, 63, 0), rgba(10, 30, 63, 0.86));
  color: #fff;
}

.bestseller-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.bestseller-card-meta {
  font-size: 0.72rem;
  opacity: 0.9;
}
.alert{

    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    color: rgb(9, 75, 9);
}
.cart-size-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-size-help {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #a05a00;
}
.add-to-cart:disabled {
  background-color: #1e7e34; /* darker green */
  color: #eafbea;
  cursor: not-allowed;
  opacity: 1; /* stop the browser from auto-fading it */
}
.empty-cart-state{

    font-family: Arial, Helvetica, sans-serif;
    font-size: 4rem;
    font-weight: 900;
    align-items: center;
margin-top: 100px;
}
.empty-cart-state img{
    height: 600px;
    width: 800px;
}
.footer {
  background-color: #0a1e3f;
  color: #ffffff;
  padding: 50px 60px 0;
  font-family: inherit;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 30px;
}

.footer-col {
  flex: 1;
  min-width: 180px;
}

.footer-col h4 {
  color: #ff7b00;
  font-size: 1rem;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-subheading {
  margin-top: 24px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-col ul li a:hover {
  color: #ff7b00;
}

/* Brand block */
.footer-brand {
  min-width: 220px;
}

.footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 12px;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-socials img {
  width: 22px;
  height: 22px;
  
}

.footer-socials img:hover {
  opacity: 1;
}

/* Contact */
.footer-contact p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  margin: 6px 0;
}

.footer-contact p i {
  color: #ff7b00;
  width: 18px;
  margin-right: 6px;
}

.footer-shipping {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.footer-shipping img {
  height: 36px;
  width: auto;
  background-color: white;
  border-radius: 4px;
  padding: 4px 8px;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal {
  display: flex;
  gap: 10px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-legal a:hover {
  color: #ff7b00;
}

/* Mobile */
@media (max-width: 768px) {
  .footer {
    padding: 28px 16px 0;
  }
  .footer-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 14px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .footer-col {
    min-width: 0;
  }
  .footer-logo {
    height: 30px;
    margin-bottom: 8px;
  }
  .footer-tagline {
    margin-bottom: 10px;
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .footer-col h4 {
    margin-bottom: 8px;
    font-size: 0.82rem;
  }
  .footer-subheading {
    margin-top: 14px;
  }
  .footer-col ul li {
    margin-bottom: 5px;
  }
  .footer-col ul li a,
  .footer-contact p {
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .footer-contact p {
    margin: 4px 0;
  }
  .footer-contact p i {
    width: 14px;
    margin-right: 4px;
  }
  .footer-socials {
    gap: 8px;
  }
  .footer-socials img {
    width: 18px;
    height: 18px;
  }
  .footer-shipping {
    gap: 6px;
    margin-top: 8px;
  }
  .footer-shipping img {
    height: 24px;
    padding: 2px 4px;
  }
  .footer-bottom {
    padding: 10px 0 12px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
    font-size: 0.75rem;
  }
}
.cart-summary {
  max-width: 820px;
  margin: 30px auto;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
}

.cart-summary h3 {
  color: #0a1e3f;
  margin-bottom: 16px;
  font-size: 1.3rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 12px;
}

.summary-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a1e3f;
  border-top: 1px solid #eaeaea;
  padding-top: 12px;
  margin-top: 4px;
}

.summary-total span:last-child {
  color: #ff7b00;
}

.checkout-btn {
  width: 100%;
  padding: 12px 0;
  margin-top: 10px;
  background-color: #0a1e3f;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.checkout-btn:hover {
  background-color: #12315f;
}
.checkout-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 0 20px;
  flex-wrap: wrap;
}

.checkout-form {
  flex: 1;
  min-width: 320px;
  max-width: 500px;
}

.form-section {
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-section h4 {
  color: #0a1e3f;
  margin-bottom: 16px;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.checkout-form label {
  display: block;
  font-size: 0.85rem;
  color: #444;
  margin-bottom: 6px;
  margin-top: 14px;
}

.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.checkout-form input:focus,
.checkout-form select:focus {
  outline: none;
  border-color: #ff7b00;
}

.delivery-options {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.delivery-option {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  font-size: 0.85rem;
  margin: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.delivery-option input {
  display: none;
}

.delivery-option:has(input:checked) {
  border-color: #0a1e3f;
  background-color: #eef2f8;
  font-weight: 600;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #0a1e3f;
  border-radius: 8px;
  padding: 14px;
  background-color: #eef2f8;
  font-weight: 600;
  color: #0a1e3f;
}

.payment-option i:first-child {
  color: #ff7b00;
  font-size: 1.1rem;
}

.payment-option i:last-child {
  margin-left: auto;
  color: #1e7e34;
}

.checkout-summary {
  width: 320px;
  height: fit-content;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background-color: #fff;
}

.checkout-summary h3 {
  color: #0a1e3f;
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.checkout-item img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 6px;
}

.checkout-item-info p {
  font-size: 0.85rem;
  margin: 0;
  color: #1a1a1a;
}

.checkout-item-info span {
  font-size: 0.8rem;
  color: #ff7b00;
  font-weight: 600;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #444;
  margin: 12px 0;
}

.summary-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a1e3f;
  border-top: 1px solid #eaeaea;
  padding-top: 12px;
}

.summary-total span:last-child {
  color: #ff7b00;
}

.place-order-btn {
  width: 100%;
  padding: 12px 0;
  margin-top: 10px;
  background-color: #0a1e3f;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.place-order-btn:hover {
  background-color: #12315f;
}

.cod-note {
  font-size: 0.75rem;
  color: #777;
  text-align: center;
  margin-top: 10px;
}

.order-confirmed {
  max-width: 400px;
  margin: 80px auto;
  text-align: center;
  padding: 30px;
}

.order-confirmed i {
  font-size: 3rem;
  color: #1e7e34;
  margin-bottom: 16px;
}

.order-confirmed h2 {
  color: #0a1e3f;
  margin-bottom: 10px;
}

.order-confirmed p {
  color: #666;
  margin-bottom: 20px;
}

.hidden {
  display: none;
}

.admin-page {
  background-color: #f5f7fb;
  color: #1a1a1a;
  font-family: Arial, Helvetica, sans-serif;
}

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  background-color: #ebebeb;
  border-bottom: 1px solid #d8d8d8;
}

.admin-topbar img {
  width: 90px;
  height: 70px;
  object-fit: contain;
}

.admin-topbar h1 {
  color: #0a1e3f;
  font-size: 1.6rem;
}

.admin-topbar p,
.admin-muted {
  color: #666;
  font-size: 0.85rem;
}

.admin-shell {
  max-width: 1200px;
  margin: 28px auto;
  padding: 0 20px;
}

.admin-panel {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-panel h2 {
  color: #0a1e3f;
  margin-bottom: 16px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 20px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.admin-stat {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.admin-stat span {
  display: block;
  color: #666;
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.admin-stat strong {
  color: #ff7b00;
  font-size: 1.5rem;
}

.admin-form {
  display: grid;
  gap: 10px;
}

.admin-form input,
.admin-form textarea,
.admin-table select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
}

.admin-form button,
.admin-secondary,
.admin-mini {
  background-color: #0a1e3f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
}

.admin-secondary {
  background-color: #444;
}

.admin-mini {
  padding: 7px 10px;
  margin: 2px;
}

.admin-mini.danger {
  background-color: #9b1c1c;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: #0a1e3f;
  font-size: 0.85rem;
}

.admin-table span,
.admin-log-list span {
  color: #666;
  font-size: 0.8rem;
}

.admin-log-list p,
#admin-performance p {
  border-bottom: 1px solid #eeeeee;
  padding: 8px 0;
}

.admin-upload-list {
  display: grid;
  gap: 10px;
}

.admin-upload-item {
  display: grid;
  grid-template-columns: 70px 1fr 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.admin-upload-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.product-gallery {
  display: flex;
  flex-direction: column;
  width: 45%;
  max-width: 550px;
}

.product-gallery img#product-main-image {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.variant-color {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  padding: 8px;
}

.variant-color.selected {
  border-color: #0a1e3f;
  background-color: #eef2f8;
  font-weight: 700;
}

.order-tracking {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px;
}

.order-tracking h1 {
  color: #ff7b00;
  text-align: center;
  margin-bottom: 20px;
}

.tracked-order {
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
}

@media (max-width: 850px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-upload-item {
    grid-template-columns: 1fr;
  }
}
/* Append to style.css */

.variant-table td, .variant-table th {
  padding: 8px 10px;
}

.variant-table input[type="number"] {
  width: 90px;
}

.variant-row-disabled {
  opacity: 0.55;
}

.stock-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 6px;
}

.stock-badge.stock-ok {
  background-color: #d6f0dc;
  color: #1e7e34;
}

.stock-badge.stock-low {
  background-color: #fdecc8;
  color: #a05a00;
}

.stock-badge.stock-out {
  background-color: #f7d7d7;
  color: #9b1c1c;
}

.admin-margin {
  font-size: 0.85rem;
  color: #1e7e34;
  font-weight: 600;
  margin: 4px 0 10px;
}

.admin-margin.margin-negative {
  color: #9b1c1c;
}
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.size-chip {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}
.size-chip.selected {
  border-color: #0a1e3f;
  background-color: #eef2f8;
  font-weight: 700;
}
.size-chip.out-of-stock {
  color: #aaa;
  text-decoration: line-through;
  background-color: #f5f5f5;
  cursor: not-allowed;
}
.detailcart{
  justify-content: right;
}
.product-full-details {
  position: relative;
  padding-top: 20px;
}

.detail-cart-float {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 50;

}
.detail-cart-float button{   background-color: rgb(0, 58, 139);
    border-radius: 20px;
    height: 40px;
    width: 100px;
    color: white;
    border: none;
    margin-left: 70px;}

.product-colors-display {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* =========================
   Production UI polish pass
   ========================= */
:root {
  --fk-blue: #0a1e3f;
  --fk-blue-soft: #12315f;
  --fk-orange: #ff7b00;
  --fk-green: #1e7e34;
  --fk-bg: #f6f7fb;
  --fk-surface: #ffffff;
  --fk-border: #e5e7eb;
  --fk-text: #111827;
  --fk-muted: #6b7280;
  --fk-shadow: 0 18px 40px rgba(10, 30, 63, 0.10);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--fk-bg);
  color: var(--fk-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 84px;
  padding: 10px clamp(16px, 4vw, 56px);
  margin: 0;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--fk-border);
  box-shadow: 0 8px 24px rgba(10, 30, 63, 0.07);
  backdrop-filter: blur(12px);
}

.header a:first-child {
  display: inline-flex;
  align-items: center;
}

.header img {
  width: 96px;
  height: 62px;
  margin: 0;
  object-fit: contain;
}

.headb {
  display: flex;
  align-items: center;
  gap: 10px;
}

.headb button,
.cart button,
.login button,
.btn-abt,
.checkout-btn,
.place-order-btn,
.admin-form button,
.admin-secondary,
.admin-mini {
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.headb button,
.cart button {
  width: auto;
  min-width: 104px;
  height: 42px;
  padding: 0 16px;
  margin: 0;
  background: var(--fk-blue);
  color: #fff;
}

.headb button:hover,
.cart button:hover,
.checkout-btn:hover,
.place-order-btn:hover,
.admin-form button:hover,
.admin-secondary:hover,
.admin-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(10, 30, 63, 0.16);
}

.searchbar {
  flex: 1;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

.header input,
.searchbar input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--fk-border);
  border-radius: 999px;
  background: #fff;
}

.searchbar button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--fk-border);
  border-radius: 50%;
  background: #fff;
  color: var(--fk-blue);
}

.cart {
  margin-left: auto;
}

.lang1 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  margin-left: 8px;
}

.langc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 52px;
  padding: 0 12px;
  height: 42px;
  border: 1px solid var(--fk-border);
  border-radius: 999px;
  background: #fff;
  color: var(--fk-blue);
  box-shadow: 0 4px 12px rgba(10, 30, 63, 0.06);
}

body:not(.admin-page) .header {
  direction: ltr;
}

body:not(.admin-page) .lang1 {
  margin-left: 8px;
  margin-right: 0;
}

body:not(.admin-page) .lang-options {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
}

.main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 15px 18px;
}

.anounce {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  height: auto;
  margin: 18px 0 48px;
}

.ads {
  overflow: hidden;
  border: 1px solid var(--fk-border);
  border-radius: 14px;
  background: var(--fk-surface);
  box-shadow: var(--fk-shadow);
}

.ads img {
  width: 100%;
  height: 360px;
  margin: 0;
  object-fit: cover;
}

.ads h2 {
  color: var(--fk-blue);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

.ads h3 {
  margin: 16px 18px 4px;
  font-size: 1.15rem;
  color: var(--fk-text);
}

.ads h6 {
  width: auto;
  margin: 4px 18px 14px;
  background: transparent;
  color: #cc5200;
  font-size: 1.45rem;
}

.ads button,
.product-card .add-to-cart {
  width: calc(100% - 36px);
  height: 44px;
  margin: 0 18px 18px;
  border-radius: 10px;
  background: var(--fk-blue);
  color: #fff;
}

.categories {
  width: 100%;
  margin: 34px 0;
}

#category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.category-card {
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--fk-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(10, 30, 63, 0.08);
}

.cards {
  max-width: 1220px;
  margin: 0 auto;
  padding: 34px 18px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.product-card {
  width: 100%;
  border: 1px solid var(--fk-border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(10, 30, 63, 0.08);
}

.product-card img {
  height: 260px;
}

.product-full-details {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(320px, 1fr);
  gap: 32px;
  max-width: 1180px;
  min-height: auto;
  height: auto;
  margin: 34px auto;
  padding: 24px;
  border: 1px solid var(--fk-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--fk-shadow);
}

.product-gallery {
  width: 100%;
  max-width: none;
}

.product-gallery img#product-main-image {
  height: min(560px, 70vh);
  border-radius: 14px;
  object-fit: cover;
}

.cart-item-details {
  width: auto;
  height: auto;
  margin: 0;
}

.cart-item-details h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
}

.flexn {
  flex-wrap: wrap;
  font-size: 1rem;
  gap: 12px;
}

.price-cart {
  width: 100%;
  height: auto;
  margin: 18px 0;
  border: 1px solid var(--fk-border);
  border-radius: 14px;
  background: #fff8f1;
}

.price-cart p {
  font-size: 1.8rem;
  color: var(--fk-orange);
}

.buttons1 {
  margin-top: 24px;
  flex-wrap: wrap;
}

.buttons1 button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--fk-blue);
  color: #fff;
}
.button1 a{
  margin-right: 20px;
}
.cart-page,
.checkout-page {
  text-align: center;
}

.checkout-logo-link {
  display: inline-flex;
  margin: 26px auto 12px;
}

.checkout-logo-link img {
  width: 150px;
  height: 70px;
  object-fit: contain;
}

.confirm-title {
  display: block;
  margin: 28px auto;
  color: var(--fk-orange);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  text-align: center;
}

.cart-item {
  width: min(1040px, calc(100% - 28px));
  height: auto;
  min-height: 360px;
  margin: 18px auto;
  border: 1px solid var(--fk-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--fk-shadow);
}

.cart-item-image {
  width: 38%;
  border: 0;
}

.cart-item select,
.cart-item input[type="number"],
.checkout-form input,
.checkout-form select,
.admin-form input,
.admin-form textarea,
.admin-table select,
.admin-table textarea {
  border: 1px solid var(--fk-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.flex12 button {
  width: auto;
  min-width: 48px;
  margin: 0 10px 0 0;
  border-radius: 10px;
}

.cart-summary,
.checkout-summary,
.form-section,
.admin-panel {
  border: 1px solid var(--fk-border);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(10, 30, 63, 0.08);
}

.checkout-wrapper {
  align-items: flex-start;
  max-width: 1120px;
  gap: 24px;
}

.checkout-form {
  max-width: 620px;
}

.checkout-summary {
  position: sticky;
  top: 104px;
  width: 360px;
}

.order-confirmed {
  background: #fff;
  border: 1px solid var(--fk-border);
  border-radius: 18px;
  box-shadow: var(--fk-shadow);
}

.empty-cart-state {
  margin: 60px auto;
  font-size: clamp(1.8rem, 6vw, 3rem);
}

.empty-cart-state img {
  width: min(620px, 90vw);
  height: auto;
}

.aboutus {
  max-width: 920px;
  margin: 40px auto 22px;
  padding: 32px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--fk-shadow);
}



.aboutus p {
  color: #374151;
  margin-bottom: 18px;
}

.footer {
  margin-top: 50px;
}

.admin-page {
  background: #f4f6fa;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.admin-shell {
  max-width: 1280px;
}

.admin-grid {
  grid-template-columns: minmax(340px, 0.95fr) minmax(320px, 1.05fr);
}

.admin-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-stat {
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(10, 30, 63, 0.07);
}

.admin-form-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  min-width: 760px;
}

.admin-upload-item {
  border: 1px solid var(--fk-border);
  border-radius: 12px;
  padding: 10px;
  background: #fbfcff;
}

.order-tracking {
  background: #fff;
  border: 1px solid var(--fk-border);
  border-radius: 18px;
  box-shadow: var(--fk-shadow);
  padding: 28px;
}

@media (max-width: 980px) {
  .header {
    flex-wrap: wrap;
  }

  .searchbar {
    order: 4;
    flex-basis: 100%;
    max-width: none;
  }

  .anounce,
  .product-full-details,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
    width: min(620px, 100%);
  }

  .cart-item {
    flex-direction: column;
  }

  .cart-item-image,
  .cart-item-details {
    width: 100%;
  }

  .cart-item-image img {
    min-height: auto;
    height: 320px;
  }
}

@media (max-width: 640px) {
  .header {
    justify-content: center;
    padding: 10px 14px;
  }

  .headb,
  .cart {
    width: 100%;
    justify-content: center;
    margin: 0;
  }

  .headb button,
  .cart button {
    min-width: 0;
    flex: 1;
  }

  .anounce {
    margin-top: 16px;
  }

  .ads img,
  .product-card img {
    height: 240px;
  }

  #category-list,
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product-full-details,
  .aboutus,
  .order-tracking {
    margin: 18px 12px;
    padding: 16px;
  }

  .product-gallery img#product-main-image {
    height: 360px;
  }

  .cart-item-details h1 {
    font-size: 1.7rem;
  }

  .price-cart {
    flex-direction: column;
    gap: 4px;
  }

  .price-cart p {
    margin-left: 0;
  }

  .checkout-wrapper {
    padding: 0 12px;
  }

  .delivery-options,
  .admin-form-split,
  .admin-form-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .footer {
    padding: 36px 20px 0;
  }

  .admin-shell {
    padding: 0 12px;
  }

  .admin-topbar {
    align-items: flex-start;
    padding: 14px;
  }

  .admin-topbar img {
    width: 72px;
    height: 54px;
  }
}

/* =========================
   Customer storefront final polish
   ========================= */
body:not(.admin-page) {
  color: #10213f;
  background:
    radial-gradient(circle at top left, rgba(245, 130, 32, 0.11), transparent 34rem),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
}

body:not(.admin-page) .header {
  width: min(1180px, calc(100% - 28px));
  min-height: 78px;
  margin: 14px auto 0;
  padding: 10px 18px;
  gap: 14px;
  border: 1px solid rgba(14, 35, 68, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(14, 35, 68, 0.1);
  backdrop-filter: blur(16px);
}

body:not(.admin-page) .header img {
  width: 92px;
  height: 62px;
  object-fit: contain;
}

body:not(.admin-page) .headb {
  gap: 8px;
}

body:not(.admin-page) .headb button,
body:not(.admin-page) .cart button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #10213f;
  background: #f3f6fa;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body:not(.admin-page) .headb button:hover,
body:not(.admin-page) .cart button:hover {
  transform: translateY(-2px);
  color: #fff;
  background: linear-gradient(135deg, #f58220, #ff9f45);
  box-shadow: 0 12px 24px rgba(245, 130, 32, 0.26);
}

body:not(.admin-page) .searchbar {
  min-width: min(390px, 100%);
  border: 1px solid rgba(14, 35, 68, 0.1);
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body:not(.admin-page) .searchbar input {
  color: #10213f;
  font-size: 0.98rem;
}

body:not(.admin-page) .searchbar:focus-within {
  border-color: rgba(245, 130, 32, 0.55);
  box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.12);
}

body:not(.admin-page) .main,
body:not(.admin-page) .products-page,
body:not(.admin-page) .cart-page,
body:not(.admin-page) .checkout-page {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
}

body:not(.admin-page) .anounce {
  align-items: stretch;
  gap: 22px;
  margin: 34px auto 28px;
}

body:not(.admin-page) .ads,
body:not(.admin-page) .product-card,
body:not(.admin-page) .cart-item,
body:not(.admin-page) .checkout-summary,
body:not(.admin-page) .checkout-form,
body:not(.admin-page) .aboutus,
body:not(.admin-page) .order-tracking {
  border: 1px solid rgba(14, 35, 68, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 45px rgba(14, 35, 68, 0.1);
}

body:not(.admin-page) .ads {
  display: grid;
  overflow: hidden;
  min-height: 100%;
}

body:not(.admin-page) .ads img {
  width: 100%;
  height: clamp(230px, 28vw, 340px);
  padding: 14px;
  margin: 0;
  object-fit: contain !important;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.92), rgba(239, 244, 250, 0.78)),
    linear-gradient(135deg, #f6f8fb, #e9eef5);
}

body:not(.admin-page) .ads .buy,
body:not(.admin-page) .product-card .buy {
  width: calc(100% - 28px);
  margin: 12px auto 16px;
  border-radius: 999px;
}

body:not(.admin-page) .cards,
body:not(.admin-page) #product-list {
  width: min(1180px, calc(100% - 28px));
  margin: 28px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  align-items: stretch;
}

body:not(.admin-page) .product-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body:not(.admin-page) .product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 130, 32, 0.26);
  box-shadow: 0 22px 54px rgba(14, 35, 68, 0.14);
}

body:not(.admin-page) .product-card img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  padding: 14px;
  object-fit: contain !important;
  background:
    radial-gradient(circle at center, #ffffff 0%, #f5f7fb 54%, #e9eef5 100%);
}

body:not(.admin-page) .product-card h3,
body:not(.admin-page) .product-card p,
body:not(.admin-page) .ads h3,
body:not(.admin-page) .ads p {
  padding-inline: 16px;
}

body:not(.admin-page) .product-card h3,
body:not(.admin-page) .ads h3 {
  color: #10213f;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.25;
}

body:not(.admin-page) .product-card .price,
body:not(.admin-page) .ads .price,
body:not(.admin-page) .price1 {
  color: #f58220;
  font-weight: 900;
}

body:not(.admin-page) #category-list,
body:not(.admin-page) .category-grid {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

body:not(.admin-page) .category-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(14, 35, 68, 0.1);
}

body:not(.admin-page) .bestseller-card {
  position: relative;
  text-decoration: none;
  color: inherit;
}

body:not(.admin-page) .bestseller-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(10, 30, 63, 0), rgba(10, 30, 63, 0.86));
  color: #fff;
}

body:not(.admin-page) .bestseller-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

body:not(.admin-page) .bestseller-card-meta {
  font-size: 0.72rem;
  opacity: 0.9;
}

body:not(.admin-page) .product-full-details {
  width: min(1180px, calc(100% - 28px));
  gap: 32px;
  align-items: start;
  margin: 34px auto;
}

body:not(.admin-page) .product-gallery {
  position: sticky;
  top: 112px;
  width: 100%;
}

body:not(.admin-page) .product-gallery img#product-main-image {
  width: 100%;
  height: auto !important;
  max-height: 680px;
  aspect-ratio: 4 / 5;
  padding: 18px;
  object-fit: contain !important;
  border-radius: 24px;
  background:
    radial-gradient(circle at center, #ffffff 0%, #f7f9fc 55%, #edf2f7 100%);
}

body:not(.admin-page) .cart-item {
  min-height: 0;
  align-items: stretch;
}

body:not(.admin-page) .cart-item-image {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #fff, #f0f4f8);
}

body:not(.admin-page) .cart-item-image img {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  padding: 16px;
  object-fit: contain !important;
}

body:not(.admin-page) .checkout-item img {
  width: 58px;
  height: 58px;
  padding: 5px;
  object-fit: contain !important;
  background: #f4f7fb;
  border-radius: 12px;
}

body:not(.admin-page) .buy,
body:not(.admin-page) .buttons1 button,
body:not(.admin-page) .checkout-form button,
body:not(.admin-page) .add-line-btn {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f58220, #ff9f45);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(245, 130, 32, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body:not(.admin-page) .buy:hover,
body:not(.admin-page) .buttons1 button:hover,
body:not(.admin-page) .checkout-form button:hover,
body:not(.admin-page) .add-line-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(245, 130, 32, 0.32);
}

body:not(.admin-page) .footer {
  border-top-left-radius: 34px;
  border-top-right-radius: 34px;
  background: linear-gradient(135deg, #081936, #102a52);
}

@media (max-width: 980px) {
  body:not(.admin-page) .header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    width: calc(100% - 20px);
    padding: 10px;
  }

  body:not(.admin-page) .searchbar {
    grid-column: 1 / -1;
    order: 5;
    width: 100%;
  }

  body:not(.admin-page) .anounce,
  body:not(.admin-page) .product-full-details {
    grid-template-columns: 1fr;
  }

  body:not(.admin-page) .product-gallery {
    position: static;
  }

  body:not(.admin-page) .checkout-wrapper {
    grid-template-columns: 1fr;
    width: min(720px, calc(100% - 24px));
    padding: 0;
  }

  body:not(.admin-page) .checkout-form,
  body:not(.admin-page) .checkout-summary {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  body:not(.admin-page) .header {
    grid-template-columns: 1fr;
    justify-items: center;
    border-radius: 18px;
  }

  body:not(.admin-page) .headb,
  body:not(.admin-page) .cart {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.admin-page) .cart {
    grid-template-columns: 1fr;
  }

  body:not(.admin-page) .headb button,
  body:not(.admin-page) .cart button {
    width: 100%;
    padding-inline: 10px;
    font-size: 0.9rem;
  }

  body:not(.admin-page) .main,
  body:not(.admin-page) .products-page,
  body:not(.admin-page) .cart-page,
  body:not(.admin-page) .checkout-page,
  body:not(.admin-page) .cards,
  body:not(.admin-page) #product-list,
  body:not(.admin-page) .product-full-details,
  body:not(.admin-page) #category-list,
  body:not(.admin-page) .category-grid {
    width: calc(100% - 20px);
  }

  body:not(.admin-page) .cards,
  body:not(.admin-page) #product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body:not(.admin-page) .product-card {
    border-radius: 16px;
  }

  body:not(.admin-page) .product-card img {
    padding: 9px;
  }

  body:not(.admin-page) .product-card h3,
  body:not(.admin-page) .product-card p {
    padding-inline: 11px;
  }

  body:not(.admin-page) .product-card .buy {
    width: calc(100% - 18px);
    min-height: 40px;
    margin: 8px auto 12px;
    font-size: 0.86rem;
  }

  body:not(.admin-page) .ads img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  body:not(.admin-page) .product-gallery img#product-main-image {
    max-height: none;
    aspect-ratio: 1 / 1;
    padding: 12px;
  }

  body:not(.admin-page) .product-thumbnails {
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body:not(.admin-page) .cart-item {
    width: calc(100% - 20px);
    border-radius: 18px;
  }

  body:not(.admin-page) .cart-item-image,
  body:not(.admin-page) .cart-item-details {
    width: 100%;
  }

  body:not(.admin-page) .cart-item-image img {
    aspect-ratio: 4 / 3;
  }

  body:not(.admin-page) .checkout-wrapper {
    width: calc(100% - 20px);
  }

  body:not(.admin-page) .checkout-form,
  body:not(.admin-page) .checkout-summary,
  body:not(.admin-page) .aboutus,
  body:not(.admin-page) .order-tracking {
    border-radius: 18px;
    padding: 16px;
  }
}

@media (max-width: 420px) {
  body:not(.admin-page) .cards,
  body:not(.admin-page) #product-list {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Customer visual fixes from QA screenshots
   ========================= */
body:not(.admin-page) * {
  box-sizing: border-box;
}

body:not(.admin-page) .header {
  display: grid !important;
  grid-template-columns: auto auto minmax(280px, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
  overflow: visible;
}

body:not(.admin-page) .header > a:first-child {
  justify-self: start;
}

body:not(.admin-page) .header > .headb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

body:not(.admin-page) .header > .headb a {
  display: inline-flex;
  text-decoration: none;
}

body:not(.admin-page) .searchbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 3px;
  gap: 4px;
  justify-self: stretch;
}

body:not(.admin-page) .searchbar input,
body:not(.admin-page) .header input {
  min-width: 0;
  width: 100% !important;
  padding: 0 14px !important;
}

body:not(.admin-page) .searchbar button {
  display: inline-grid;
  place-items: center;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, #f58220, #ff9f45) !important;
  box-shadow: 0 8px 18px rgba(245, 130, 32, 0.24);
}

body:not(.admin-page) .cart {
  justify-self: end;
  margin-left: 0 !important;
}

body:not(.admin-page) .cart a {
  display: inline-flex;
  text-decoration: none;
}

body:not(.admin-page) .cart button {
  white-space: nowrap;
}

body:not(.admin-page) .category-section {
  width: 100%;
  margin: 0 0 38px;
}

body:not(.admin-page) .category-title {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 0 10px 14px;
  color: #071f45;
  font-size: clamp(1.15rem, 1.9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: normal;
}

body:not(.admin-page) .category-title::after {
  width: 76px;
  height: 4px;
  border-radius: 999px;
  background: #ff7b00;
}

body:not(.admin-page) .cards,
body:not(.admin-page) #product-list {
  display: block;
}

body:not(.admin-page) .category-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 280px)) !important;
  justify-content: center !important;
  gap: 26px;
  align-items: stretch;
  width: 100%;
}

body:not(.admin-page) .product-card {
  display: grid !important;
  grid-template-rows: auto auto auto;
  align-content: start;
  min-height: 438px;
  border-radius: 22px !important;
  overflow: hidden;
}

body:not(.admin-page) .product-card a {
  display: grid !important;
  grid-template-rows: 282px auto;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

body:not(.admin-page) .product-card img {
  width: 100%;
  height: 282px !important;
  aspect-ratio: auto;
  padding: 18px;
  object-fit: contain !important;
  transform: none !important;
}

body:not(.admin-page) .product-card:hover img {
  transform: none !important;
}

body:not(.admin-page) .product-card h3 {
  display: -webkit-box;
  min-height: 58px;
  margin: 0;
  padding: 18px 16px 4px;
  overflow: hidden;
  color: #071f45;
  font-size: 1.08rem;
  line-height: 1.25;
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body:not(.admin-page) .product-card .price-tag {
  width: 100%;
  margin: 0;
  padding: 8px 16px 14px;
  color: #ff7300;
  font-size: 1.16rem;
  line-height: 1.1;
  text-align: center;
  background: #fff;
}

body:not(.admin-page) .product-card .add-to-cart {
  align-self: end;
  width: calc(100% - 32px);
  min-height: 44px;
  margin: 0 16px 18px;
}

body:not(.admin-page) .anounce {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.admin-page) .ads {
  display: grid;
  grid-template-rows: auto minmax(300px, auto) auto auto auto;
  text-align: center;
}

body:not(.admin-page) .ads h2 {
  margin: 0;
  padding: 18px 18px 10px;
  background: #fff;
}

body:not(.admin-page) .ads img {
  height: 360px !important;
  padding: 18px;
  object-fit: contain !important;
}

body:not(.admin-page) .product-full-details {
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  padding: 24px;
  overflow: visible;
}

body:not(.admin-page) .product-full-details .cart-item-image.product-gallery {
  width: 100% !important;
  min-width: 0;
  background: #f3f6fa;
  border-radius: 22px;
}

body:not(.admin-page) .product-full-details .cart-item-details {
  width: 100% !important;
  min-width: 0;
  padding: 0;
  text-align: left;
}

body:not(.admin-page) .product-full-details .cart-item-details h1 {
  margin: 0 0 22px;
  color: #111827;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.98;
  text-align: center;
  overflow-wrap: anywhere;
}

body:not(.admin-page) .product-full-details fieldset,
body:not(.admin-page) .cart-page .cart-item fieldset {
  width: 100%;
  margin: 18px 0;
  padding: 22px;
  border: 1px solid rgba(15, 35, 65, 0.16);
  border-radius: 14px;
}

body:not(.admin-page) .cart-page .cart-container {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
}

body:not(.admin-page) .cart-page .cart-item {
  display: grid !important;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  width: 100%;
  min-height: 0;
  margin: 18px 0 24px;
  overflow: hidden;
}

body:not(.admin-page) .cart-page .cart-item-image {
  width: 100% !important;
  min-width: 0;
}

body:not(.admin-page) .cart-page .cart-item-image img {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 520px;
  aspect-ratio: 4 / 5;
  padding: 22px;
  object-fit: contain !important;
}

body:not(.admin-page) .cart-page .cart-item-details {
  width: 100% !important;
  min-width: 0;
  padding: 24px 28px;
  text-align: left;
}

body:not(.admin-page) .cart-page .cart-item-details h1 {
  margin: 0 0 22px;
  color: #111827;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

body:not(.admin-page) .flexn {
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}

body:not(.admin-page) .unitp h6 {
  width: max-content;
  max-width: 100%;
  margin: 8px 0 20px;
  padding: 10px 22px;
  border-radius: 0;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.25;
}

body:not(.admin-page) .flex12 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

body:not(.admin-page) .price-cart {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: min(100%, 420px);
  margin: 0;
  padding: 16px 20px;
  border-radius: 16px;
}

body:not(.admin-page) .price-cart h4,
body:not(.admin-page) .price-cart p {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  line-height: 1.1;
}

body:not(.admin-page) .add-line-btn,
body:not(.admin-page) .remove-btn {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  margin: 0 !important;
  border-radius: 16px !important;
}

@media (max-width: 1100px) {
  body:not(.admin-page) .header {
    grid-template-columns: auto 1fr auto;
  }

  body:not(.admin-page) .searchbar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  body:not(.admin-page) .header {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  body:not(.admin-page) .header > a:first-child,
  body:not(.admin-page) .cart {
    justify-self: center;
  }

  body:not(.admin-page) .header > .headb {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body:not(.admin-page) .header > .headb a,
  body:not(.admin-page) .header > .headb button {
    width: 100%;
  }

  body:not(.admin-page) .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body:not(.admin-page) .category-title {
    font-size: clamp(1rem, 5vw, 1.35rem);
    letter-spacing: 0.04em;
    white-space: normal;
  }

  body:not(.admin-page) .product-card {
    min-height: 360px;
  }

  body:not(.admin-page) .product-card a {
    grid-template-rows: 210px auto;
  }

  body:not(.admin-page) .product-card img {
    height: 210px !important;
    padding: 10px;
  }

  body:not(.admin-page) .product-card h3 {
    min-height: 54px;
    padding: 14px 10px 4px;
    font-size: 0.98rem;
  }

  body:not(.admin-page) .anounce {
    grid-template-columns: 1fr;
  }

  body:not(.admin-page) .ads img {
    height: 280px !important;
  }

  body:not(.admin-page) .product-full-details,
  body:not(.admin-page) .cart-page .cart-item {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  body:not(.admin-page) .cart-page .cart-item-details {
    padding: 18px 4px 4px;
  }

  body:not(.admin-page) .product-full-details .cart-item-details h1,
  body:not(.admin-page) .cart-page .cart-item-details h1 {
    font-size: clamp(1.65rem, 9vw, 2.4rem);
  }

  body:not(.admin-page) .price-cart {
    min-width: 0;
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 440px) {
  body:not(.admin-page) .category-grid {
    grid-template-columns: 1fr;
  }
}

.color-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.color-swatch:hover {
  transform: scale(1.08);
}

.color-swatch.selected {
  border-color: #0a1e3f;
  box-shadow: 0 0 0 2px #ff7b00;
}

.product-sizes-display {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.size-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  background-color: #f9f9f9;
}

.size-chip-out {
  color: #aaa;
  text-decoration: line-through;
  background-color: #f1f1f1;
  border-color: #eee;
}

/* Final header search/cart separation fix */
body:not(.admin-page) .header {
  grid-template-columns: auto auto minmax(260px, 1fr) max-content !important;
  column-gap: 16px !important;
}

body:not(.admin-page) .searchbar {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 58px !important;
  padding: 4px 62px 4px 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
}

body:not(.admin-page) .searchbar input,
body:not(.admin-page) .header .searchbar input {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  outline: none !important;
}

body:not(.admin-page) .searchbar button,
body:not(.admin-page) #search-btn {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  left: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
}

body:not(.admin-page) .cart {
  min-width: max-content !important;
  padding-left: 2px !important;
}

body:not(.admin-page) .cart button,
body:not(.admin-page) #cart-btn {
  min-width: 122px !important;
  width: max-content !important;
  padding: 0 18px !important;
}

@media (max-width: 1100px) {
  body:not(.admin-page) .header {
    grid-template-columns: auto 1fr max-content !important;
  }

  body:not(.admin-page) .searchbar {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 760px) {
  body:not(.admin-page) .header {
    grid-template-columns: 1fr !important;
  }

  body:not(.admin-page) .cart,
  body:not(.admin-page) .cart a,
  body:not(.admin-page) .cart button,
  body:not(.admin-page) #cart-btn {
    width: 100% !important;
  }
}

/* Final cart/detail/product-color polish */
body:not(.admin-page) .product-full-details {
  grid-template-columns: minmax(280px, 440px) minmax(360px, 1fr) !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  padding: 22px !important;
  gap: 28px !important;
}

body:not(.admin-page) .product-full-details .product-gallery {
  position: static !important;
  display: grid !important;
  gap: 12px !important;
  align-self: start !important;
  overflow: hidden !important;
}

body:not(.admin-page) .product-gallery img#product-main-image {
  height: 520px !important;
  max-height: 62vh !important;
  aspect-ratio: auto !important;
  padding: 14px !important;
  object-fit: contain !important;
}

body:not(.admin-page) .product-colors-display {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body:not(.admin-page) .color-swatch {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 2px solid #d7deea !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 8px 16px rgba(10, 30, 63, 0.08) !important;
}

body:not(.admin-page) .color-swatch img {
  display: none !important;
}

body:not(.admin-page) .swatch-color-dot {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(10, 30, 63, 0.16) !important;
  border-radius: 999px !important;
  background: var(--swatch-color, #d1d5db) !important;
}

body:not(.admin-page) .color-swatch.selected {
  border-color: #ff7b00 !important;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.18) !important;
}

body:not(.admin-page) .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body:not(.admin-page).cart-page {
  background: linear-gradient(180deg, #f8fafc, #eef3f8) !important;
}

body:not(.admin-page) .cart-page .cart-container,
body.cart-page:not(.admin-page) .cart-container {
  width: min(1050px, calc(100% - 28px)) !important;
  margin: 0 auto !important;
}

body.cart-page:not(.admin-page) .cart-item {
  display: grid !important;
  grid-template-columns: minmax(0, 35%) minmax(0, 65%) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 18px auto 24px !important;
  border: 1px solid rgba(10, 30, 63, 0.1) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(10, 30, 63, 0.1) !important;
}

body.cart-page:not(.admin-page) .cart-item-details {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 24px 28px !important;
  text-align: left !important;
}

body.cart-page:not(.admin-page) .cart-item-details h1 {
  margin: 0 0 8px !important;
  color: #101827 !important;
  font-size: clamp(1.65rem, 3vw, 2.45rem) !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration-thickness: 3px !important;
}

body.cart-page:not(.admin-page) .cart-item fieldset {
  margin: 8px 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(10, 30, 63, 0.14) !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
}

body.cart-page:not(.admin-page) .unitp {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.cart-page:not(.admin-page) .unitp h6 {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(6, 95, 70, 0.16) !important;
  border-radius: 999px !important;
  color: #065f46 !important;
  background: #ecfdf5 !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
}

body.cart-page:not(.admin-page) .flex12 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px 56px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

body.cart-page:not(.admin-page) .price-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(245, 130, 32, 0.18) !important;
  border-radius: 16px !important;
  background: #fff7ed !important;
}

body.cart-page:not(.admin-page) .price-cart h4,
body.cart-page:not(.admin-page) .price-cart p {
  margin: 0 !important;
  color: #071f45 !important;
  font-size: clamp(1.05rem, 2vw, 1.45rem) !important;
  line-height: 1.05 !important;
}

body.cart-page:not(.admin-page) .price-cart p {
  color: #ff7300 !important;
  font-weight: 900 !important;
}

body.cart-page:not(.admin-page) .add-line-btn,
body.cart-page:not(.admin-page) .remove-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 16px !important;
}

@media (max-width: 900px) {
  body:not(.admin-page) .product-full-details {
    grid-template-columns: 1fr !important;
  }

  body.cart-page:not(.admin-page) .cart-item {
    grid-template-columns: 1fr !important;
  }

  body.cart-page:not(.admin-page) .cart-item-image img {
    height: 300px !important;
  }
}

@media (max-width: 560px) {
  body:not(.admin-page) .product-gallery img#product-main-image {
    height: 360px !important;
    max-height: none !important;
  }

  body.cart-page:not(.admin-page) .cart-item-details {
    padding: 18px !important;
  }

  body.cart-page:not(.admin-page) .flex12 {
    grid-template-columns: 1fr 52px 52px !important;
  }

  body.cart-page:not(.admin-page) .price-cart {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}
/* Fix: header sticking/oversized on mobile */
@media (max-width: 760px) {
  body:not(.admin-page) .header {
    position: static !important;
    min-height: auto !important;
    padding: 8px 12px !important;
    row-gap: 8px !important;
    backdrop-filter: none !important;
  }

  body:not(.admin-page) .header img {
    width: 70px !important;
    height: 48px !important;
  }

  body:not(.admin-page) .searchbar {
    height: 44px !important;
  }

  body:not(.admin-page) .searchbar input,
  body:not(.admin-page) .header .searchbar input {
    height: 36px !important;
  }

  body:not(.admin-page) .searchbar button,
  body:not(.admin-page) #search-btn {
    width: 36px !important;
    height: 36px !important;
  }

  body:not(.admin-page) .header > .headb button,
  body:not(.admin-page) .cart button,
  body:not(.admin-page) #cart-btn {
    height: 38px !important;
    font-size: 0.85rem !important;
  }
}
/* Fix: floating cart button + button stacking on product detail page (mobile) */
@media (max-width: 760px) {
  .detail-cart-float {
    display: none !important;
  }

  .buttons1 {
    margin-left: 0 !important;
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 16px !important;
  }

 

  .buttons1 button {
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
}
.unitp p {
  font-weight: 700;
  margin: 0;
}
.login-page {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.login-page img {
  margin-top: 30px;
  height: 70px;
  width: 150px;
  margin-bottom: 40px;
}

.login-page .loginph {
  align-items: center;
  margin-left: 20px;
  width: 40%;
  margin-top: 20px;
}

.login-page .loginph h1 {
  color: rgb(255, 123, 0);
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 30px;
}

.login-page .loginph h5 {
  color: rgb(0, 58, 139);
  font-size: 1.7rem;
  text-align: left;
  margin-left: 50px;
}

.login-page #login-error {
  color: #9b1c1c;
  font-size: 0.9rem;
  min-height: 20px;
  margin: 0 auto;
}
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 30px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 26px rgba(37, 211, 102, 0.5);
}

@media (max-width: 640px) {
  /* 1. Set the container to align all icons horizontally */
  @media (max-width: 640px) {
  /* Replace .social-links with your container's class name */
  .social-links {
    display: flex !important;
    align-items: center !important; /* Forces vertical centering across all icons */
    gap: 10px;                       /* Controls spacing between icons */
  }
}

  /* 2. Make WhatsApp match the exact size and flow of the other social icons */
  .whatsapp-float {
    position: static !important; /* Removes absolute/fixed positioning */
    width: 24px !important;       /* Matches standard FB/Insta icon size */
    height: 24px !important;
    font-size: 24px !important;   /* Matches icon font size */
    background: transparent !important; /* Removes the giant green circle background */
    box-shadow: none !important;
    transform: translateY(-3px) !important;
  }

  /* Target the icon inside if you want it green, or leave it to inherit social link styles */
  .whatsapp-float i {
    color: #25D366; /* Keeps the WhatsApp green color on the icon */
    font-size: 24px;
  }
 footer, .footer {
    width: 100vw !important;           /* Force full viewport width */
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;              /* Move center to middle of screen */
    right: 50% !important;
    margin-left: -50vw !important;     /* Pull flush to left screen edge */
    margin-right: -50vw !important;    /* Pull flush to right screen edge */
    box-sizing: border-box !important;
  }

  /* Prevent horizontal scrolling if body overflow isn't hidden */
  body {
    overflow-x: hidden !important;
  }
}

/* Product detail header + language picker alignment */
body.product-page .header {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  box-sizing: border-box;
}

body.product-page .header img {
  margin: 0 !important;
}

body.product-page .lang1 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.product-page .lang-options {
  right: auto;
  left: 0;
}

body:not(.admin-page) .langc {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 52px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 1px solid rgba(10, 30, 63, 0.14) !important;
  border-radius: 999px !important;
  background: var(--fk-blue, #0a1e3f) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(10, 30, 63, 0.12) !important;
  font-weight: 600 !important;
}

body:not(.admin-page) .langc i {
  color: currentColor !important;
}

body:not(.admin-page) .langc:hover {
  background: #12315f !important;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  body.product-page .header {
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  body.product-page .header img {
    width: 70px !important;
    height: 48px !important;
  }

  body.product-page .langc {
    min-height: 38px !important;
    padding: 0 12px !important;
  }
}

body.cart-page:not(.admin-page) .cart-item-image {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 10px !important;
  background:
    radial-gradient(circle at center, #fff, #f4f7fb) !important;
}

body.cart-page:not(.admin-page) .cart-item-main-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  align-self: stretch !important;
}

body.cart-page:not(.admin-page) .cart-item-thumbnails {
  display: flex !important;
  gap: 10px !important;
  align-self: end !important;
  padding: 0 4px 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;        /* Prevents it from extending beyond the left column */
  box-sizing: border-box !important;   /* Ensures padding is included inside max-width */
  width: 100% !important;
}
body.cart-page:not(.admin-page) .cart-item-thumbnails > * {
  flex-shrink: 0 !important;         /* Keeps thumbnails uniform so you can scroll horizontally */
}
body.cart-page:not(.admin-page) .cart-item-thumb {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  padding: 0 !important;                /* REMOVED PADDING so the image reaches edges */
  border: 1px solid rgba(10, 30, 63, 0.14) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px rgba(10, 30, 63, 0.06) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  overflow: hidden !important;          /* Clip image to rounded box corners */
  display: block !important;
}
body.cart-page:not(.admin-page) .cart-item-thumb > * {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.cart-page:not(.admin-page) .cart-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;         /* Fills the whole box nicely without distortion */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
}
body.cart-page:not(.admin-page) .cart-item-thumb.selected {
  border-color: #ff7b00 !important;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.16) !important;
}

body.cart-page:not(.admin-page) .cart-item-thumb:hover,
body.cart-page:not(.admin-page) .cart-item-thumb:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(245, 130, 32, 0.46) !important;
  outline: none;
}

@media (max-width: 560px) {
  body.cart-page:not(.admin-page) .cart-item-thumb {
    flex-basis: 66px !important;
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
  }
}

/* Header + language menu polish */
body:not(.admin-page) .header {
  display: grid !important;
  grid-template-columns: auto auto minmax(240px, 1fr) auto auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
}

body:not(.admin-page) .header > a:first-child {
  order: 1;
}

body:not(.admin-page) .header > .headb {
  order: 2;
}

body:not(.admin-page) .searchbar {
  order: 3;
  width: 100% !important;
  min-width: min(320px, 100%) !important;
  max-width: none !important;
  justify-self: stretch !important;
}

body:not(.admin-page) .lang1 {
  order: 4;
  margin-left: 0 !important;
  justify-self: start !important;
}

body:not(.admin-page) .cart {
  order: 5;
  margin-left: 0 !important;
  justify-self: end !important;
}

body:not(.admin-page) .lang1 {
  position: relative;
  overflow: visible;
}

body:not(.admin-page) .langc {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 52px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 1px solid rgba(10, 30, 63, 0.14) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
  color: var(--fk-blue) !important;
  box-shadow: 0 8px 20px rgba(10, 30, 63, 0.08) !important;
  font-weight: 600 !important;
}

body:not(.admin-page) .langc:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
}

body:not(.admin-page) .lang-options {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 156px;
  padding: 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(10, 30, 63, 0.12);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(10, 30, 63, 0.16);
  z-index: 40;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

body:not(.admin-page) .lang-options.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
}

body:not(.admin-page) .lang-options:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body:not(.admin-page) .lang-option {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fk-blue);
  font-size: 0.92rem;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

body:not(.admin-page) .lang-option:hover,
body:not(.admin-page) .lang-option:focus-visible {
  background: #f5f7fb;
  color: #f58220;
  transform: translateX(2px);
  outline: none;
}

@media (max-width: 760px) {
  body:not(.admin-page) .header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body:not(.admin-page) .header > a:first-child {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  body:not(.admin-page) .lang1 {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  body:not(.admin-page) .searchbar {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 4px !important;
  }

  body:not(.admin-page) .headb {
    order: 4 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  body:not(.admin-page) .cart {
    order: 5 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
  }

  body:not(.admin-page) .langc {
    min-height: 40px !important;
    padding: 0 12px !important;
  }

  body:not(.admin-page) .lang-options {
    right: 0;
    left: auto;
  }
}

/* Final visual tightening for cards, cart, and mobile chrome */
body:not(.admin-page) .product-card {
  overflow: hidden !important;
}

body:not(.admin-page) .product-card a {
  display: grid !important;
  grid-template-rows: 304px auto !important;
}

body:not(.admin-page) .product-card img {
  height: 304px !important;
  padding: 10px !important;
}

body:not(.admin-page) .product-card h3 {
  margin: 10px 12px 4px !important;
  min-height: 48px !important;
}

body:not(.admin-page) .product-card .price-tag {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 6px 12px 10px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

body.cart-page:not(.admin-page) .cart-item {
  grid-template-columns: minmax(0, 35%) minmax(0, 65%) !important;
}

@media (max-width: 760px) {
  body:not(.admin-page) .header {
    min-height: auto !important;
    padding: 6px 10px !important;
    row-gap: 6px !important;
  }

  body:not(.admin-page) .header img {
    width: 64px !important;
    height: 42px !important;
  }

  body:not(.admin-page) .searchbar {
    height: 40px !important;
  }

  body:not(.admin-page) .searchbar input,
  body:not(.admin-page) .header .searchbar input {
    height: 34px !important;
  }

  body:not(.admin-page) .searchbar button,
  body:not(.admin-page) #search-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  body:not(.admin-page) .headb button,
  body:not(.admin-page) .cart button,
  body:not(.admin-page) #cart-btn {
    height: 36px !important;
  }

  body:not(.admin-page) .product-card a {
    grid-template-rows: 224px auto !important;
  }

  body:not(.admin-page) .product-card img {
    height: 224px !important;
    padding: 8px !important;
  }

  body:not(.admin-page) .product-card h3 {
    min-height: 44px !important;
    margin: 8px 10px 4px !important;
    font-size: 0.96rem !important;
  }

  body:not(.admin-page) .product-card .price-tag {
    min-height: 46px !important;
    padding: 4px 10px 8px !important;
    font-size: 1rem !important;
  }

  body.cart-page:not(.admin-page) .cart-item {
    grid-template-columns: 1fr !important;
  }

  body:not(.admin-page) #category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
  }

  body:not(.admin-page) .category-card {
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(10, 30, 63, 0.07);
  }

  body:not(.admin-page) .footer {
    padding: 30px 14px 0 !important;
  }

  body:not(.admin-page) .footer-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
  }

  body:not(.admin-page) .footer-brand {
    grid-column: 1 / -1 !important;
  }

  body:not(.admin-page) .footer-brand,
  body:not(.admin-page) .footer-col {
    min-width: 0 !important;
    width: 100% !important;
  }

  body:not(.admin-page) .footer-logo {
    height: 32px !important;
    margin-bottom: 10px !important;
  }

  body:not(.admin-page) .footer-col h4 {
    margin-bottom: 10px !important;
    font-size: 0.86rem !important;
  }

  body:not(.admin-page) .footer-col ul li {
    margin-bottom: 6px !important;
  }

  body:not(.admin-page) .footer-col ul li a,
  body:not(.admin-page) .footer-contact p,
  body:not(.admin-page) .footer-tagline {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  body:not(.admin-page) .footer-socials {
    gap: 10px !important;
  }

  body:not(.admin-page) .footer-socials img {
    width: 18px !important;
    height: 18px !important;
  }

  body:not(.admin-page) .footer-shipping {
    gap: 8px !important;
  }

  body:not(.admin-page) .footer-shipping img {
    height: 26px !important;
    padding: 2px 5px !important;
  }

  body:not(.admin-page) .footer-bottom {
    padding: 10px 0 12px !important;
    font-size: 0.78rem !important;
  }
}

@media (max-width: 560px) {
  body:not(.admin-page) .category-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body:not(.admin-page) #category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
  }

  body:not(.admin-page) .category-card {
    border-radius: 11px;
  }

  body:not(.admin-page) .product-card {
    border-radius: 12px !important;
  }

  body:not(.admin-page) .product-card a {
    grid-template-rows: 184px auto !important;
  }

  body:not(.admin-page) .product-card img {
    height: 184px !important;
    padding: 8px !important;
  }

  body:not(.admin-page) .product-card h3 {
    min-height: 40px !important;
    margin: 8px 10px 3px !important;
    font-size: 0.9rem !important;
  }

  body:not(.admin-page) .product-card .price-tag {
    min-height: 42px !important;
    padding: 4px 10px 8px !important;
    font-size: 0.92rem !important;
  }

  body:not(.admin-page) .footer {
    padding: 24px 12px 0 !important;
  }
}

/* Product detail thumbnail rail */
body:not(.admin-page) .product-full-details .product-thumbnails {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  padding: 2px 2px 4px !important;
  margin-top: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  justify-content: flex-start;
}

body:not(.admin-page) .product-full-details .product-thumb-btn {
  flex: 0 0 112px !important;
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  padding: 0 !important;
  border: 1px solid rgba(10, 30, 63, 0.12) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff, #f6f8fc) !important;
  box-shadow: 0 8px 18px rgba(10, 30, 63, 0.08) !important;
  overflow: hidden !important;
  scroll-snap-align: start;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

body:not(.admin-page) .product-full-details .product-thumb-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  background: #eef3f8 !important;
}

body:not(.admin-page) .product-full-details .product-thumb-btn:hover,
body:not(.admin-page) .product-full-details .product-thumb-btn:focus-visible {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(245, 130, 32, 0.5) !important;
  box-shadow: 0 12px 24px rgba(245, 130, 32, 0.14) !important;
  outline: none;
}

body:not(.admin-page) .product-full-details .product-thumb-btn.selected {
  border-color: #ff7b00 !important;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.16), 0 12px 24px rgba(10, 30, 63, 0.12) !important;
}

body:not(.admin-page) .product-full-details .product-thumb-btn.selected .product-thumb-image {
  transform: scale(0.99);
}

@media (max-width: 560px) {
  body:not(.admin-page) .product-full-details .product-thumbnails {
    gap: 10px !important;
    padding-bottom: 4px !important;
  }

  body:not(.admin-page) .product-full-details .product-thumb-btn {
    flex-basis: 84px !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }
}
.trust-bar {
  width: 90%;
  max-width: 900px;
  margin: 10px auto 10px;
  padding: 18px 20px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trust-tagline {
  font-size: 1.4rem;
  color: #0a1e3f;
  margin: 0 0 10px;
  font-weight: 800;
  line-height: 1.4;
}

.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 14px;
}

.trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: transparent;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #888;
  white-space: nowrap;
}

.trust-badge i {
  color: #ff7b00;
  font-size: 0.95rem;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .trust-bar {
    padding: 14px 12px;
    border-radius: 12px;
  }
  .trust-tagline {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .trust-badges {
    gap: 8px;
  }
  .trust-badge {
    font-size: 0.5rem;
    gap: 3px;
  }
  .trust-badge i {
    font-size: 0.6rem;
  }
}
@media (max-width: 600px) {
  .anounce {
    margin: 15px 10px 20px 10px;
    height: auto;
    gap: 10px;
  }

  .trust-bar {
    margin: 10px auto 15px;
  }

  .main {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    margin-top: 0;
  }

  .header img {
    margin: 0;
    height: 50px;
    width: 65px;
  }

  hr {
    margin: 4px 0;
    border: none;
    height: 1px;
    background-color: #ddd;
  }

  .trust-bar {
    margin: 8px auto 12px;
  }
}
categories bestsellers-section h4{
  text-align: center;
}
/* Bestsellers + Categories: unified showcase section */
.showcase-section {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto 20px;
  padding: 0 18px;
}

.showcase-section h4 {
  position: relative;
  margin: 0 0 28px;
  padding-bottom: 12px;
  color: #0a1e3f;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.showcase-section h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background-color: #ff7b00;
}

.bestsellers-section {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--fk-border);
  padding-bottom: 20px;
}

.categories-section {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--fk-border);
  padding-top: 20px;
}

@media (max-width: 760px) {
  .bestsellers-section {
    padding-top: 24px;
    margin-top: 20px;
  }
  .categories-section {
    padding-bottom: 24px;
    margin-bottom: 20px;
  }
  .showcase-section h4 {
    font-size: clamp(1.15rem, 5vw, 1.4rem);
    margin-bottom: 18px;
  }
}

/* Force #category-list to always match .category-grid's numbers —
   there are several older #category-list rules earlier in this file
   (higher specificity via ID) that were fighting .category-grid and
   causing bestsellers/categories to have different gaps/columns.
   Appending this last, with !important, guarantees they stay identical. */
body:not(.admin-page) #category-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 280px)) !important;
  gap: 26px !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  body:not(.admin-page) #category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
  }
}

/* Mobile: bestsellers/categories — always 2 per row, smaller cards */
@media (max-width: 640px) {
  /* 1. Remove side margins from main container so content spans full width */
  main.main {
    padding-left: 8px !important;
    padding-right: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. Expand the section wrappers */
  .showcase-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* 3. Make the grid stretch 2-columns wide with minimal gaps */
  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 wide columns */
    gap: 10px !important;                             /* Tight space between cards */
    padding: 0 !important;
    width: 100% !important;
  }

  /* 4. Force cards and their generated images to fill 100% of the column width */
  .category-grid > div,
  .category-grid .card,
  .category-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .bestsellers-section #bestsellers-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 equal columns */
    gap: 10px !important;                             /* Matches category gap */
    width: 100% !important;
    padding: 0 !important;
  }

  /* Force individual bestseller cards to stretch fully inside their column */
  .bestsellers-section #bestsellers-list > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Overrides any min-width forcing them onto 1 line */
    box-sizing: border-box !important;
  }
 
}

@media (max-width: 420px) {
  body:not(.admin-page) #bestsellers-list,
  body:not(.admin-page) #category-list {
    gap: 10px !important;
  }
}

/* Mobile: shrink the oversized announcement/ads cards */
/* Mobile: narrower announcement/ads cards, photo fills the frame, centered price */
/* Mobile: narrower announcement/ads cards, photo fills the frame, centered price */
@media (max-width: 760px) {
  body:not(.admin-page) .anounce {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 18px auto !important;
  }

  body:not(.admin-page) .ads {
    grid-template-rows: auto minmax(200px, auto) auto auto !important;
    max-width: 380px;
    margin: 0 auto;
  }

 body:not(.admin-page) .ads img {
    height: 220px !important;
    padding: 10px !important;
    object-fit: contain !important;
    background:
      radial-gradient(circle at center, rgba(255, 255, 255, 0.92), rgba(239, 244, 250, 0.78)),
      linear-gradient(135deg, #f6f8fb, #e9eef5) !important;
  }

  body:not(.admin-page) .ads h2 {
    padding: 10px 14px 6px !important;
    font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
  }

  body:not(.admin-page) .ads h3 {
    margin: 8px 14px 2px !important;
    font-size: 0.95rem !important;
  }

  body:not(.admin-page) .ads .price-tag {
    display: block !important;
    width: auto !important;
    margin: 6px auto 10px !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  body:not(.admin-page) .ads {
    max-width: 320px;
  }

  body:not(.admin-page) .ads img {
    height: 190px !important;
    padding: 8px !important;
  }
}
/* Mobile bottom nav: hidden by default (desktop) */
.mobile-bottom-nav {
  display: none;
}

/* Mobile: simplify header, move cart to a bottom nav bar */
@media (max-width: 760px) {
  body:not(.admin-page):not(.login-page) {
    padding-bottom: 68px;
  }

  body:not(.admin-page) .header .cart,
  body:not(.admin-page) .header .searchbar {
    display: none !important;
  }

  body:not(.admin-page) .header {
    min-height: auto !important;
    padding: 8px 14px !important;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #ffffff;
    border-top: 1px solid var(--fk-border);
    box-shadow: 0 -8px 20px rgba(10, 30, 63, 0.1);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    padding: 6px 0;
    color: #10213f;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .mobile-nav-item i {
    font-size: 1.3rem;
    color: #0a1e3f;
  }

  .mobile-cart-badge {
    position: absolute;
    top: 0;
    right: 24%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff7b00;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  /* 1. Reduce side padding on the main outer sections/containers */
  .container, 
  .wrapper, 
  section, 
  .main-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. Stretch the grid containers and reduce gap between cards */
  .grid, 
  .categories-grid, 
  .bestsellers-grid,
  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 equal columns */
    gap: 10px !important;                             /* Tightens space between cards */
    padding: 0 5px !important;                         /* Minimal container padding */
    width: 100% !important;
  }

  /* 3. Make individual cards fill 100% of their grid column */
  .card, 
  .category-card, 
  .product-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
@media screen and (max-width: 640px) {

  /* ===================================================
     1. HOMEPAGE GRIDS (Bestsellers & Categories)
     =================================================== */
  main.main,
  .showcase-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bestsellers-section #bestsellers-list,
  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .bestsellers-section #bestsellers-list > *,
  .category-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ===================================================
     2. PRODUCT DETAILS PAGE (Mobile Cleanup)
     =================================================== */
  
}
/* =========================================================
   PRODUCT DETAIL CARD (FULL BLOCK FIX)
   ========================================================= */

/* Main wrapper card layout */
/* =========================================================
   THUMBNAILS & RESPONSIVE BUTTON FIX
   ========================================================= */

/* 1. THUMBNAILS: Centered with exact 5px gap */
.product-thumbnails {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important; /* Centers them together in the middle */
  align-items: center !important;
  gap: 5px !important;                 /* Tight 5px spacing */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-thumbnails img,
.product-thumbnails .thumbnail {
  width: 65px;
  height: 65px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 !important;
}

div.buttons1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 20px !important;
}

/* Make both buttons fit naturally on desktop */
div.buttons1 button,
div.buttons1 a,
div.buttons1 a button {
  white-space: nowrap !important;
  height: 46px !important;
  padding: 0 28px !important;
  min-width: 190px !important;
  font-size: 1rem !important;
}

/* 3. MOBILE ONLY: Hide "Return to Store", make "Add to Cart" full width */
/* =========================
   Product detail page — mobile (gallery, thumbnails, CTA)
   ========================= */
@media (max-width: 760px) {

  /* Gallery wrapper: no nested box/frame, image sits directly in the page */
  body:not(.admin-page) .product-full-details .cart-item-image.product-gallery,
  body:not(.admin-page) .product-gallery {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Main photo: full width, single rounded edge, clean crop */
  body:not(.admin-page) .product-gallery img#product-main-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    border: 1px solid rgba(10, 30, 63, 0.08) !important;
    display: block !important;
  }

  /* Thumbnails: simple squares, left-aligned, scrollable */
  body:not(.admin-page) .product-full-details .product-thumbnails {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
  }

  body:not(.admin-page) .product-full-details .product-thumb-btn {
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    padding: 0 !important;
    border: 1.5px solid rgba(10, 30, 63, 0.12) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body:not(.admin-page) .product-full-details .product-thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  body:not(.admin-page) .product-full-details .product-thumb-btn.selected {
    border-color: #ff7b00 !important;
    box-shadow: 0 0 0 2px rgba(255, 123, 0, 0.18) !important;
  }

  /* Outer card padding tightened so photo reads edge-to-edge */
  body:not(.admin-page) .product-full-details {
    padding: 14px !important;
    gap: 18px !important;
  }

  /* Hide "Return to Store" link only — keep Add to Cart + Buy Now, side by side */
  
  div.buttons1 {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  div.buttons1 .add-to-cart,
  div.buttons1 .buy-now-btn {
    flex: 1 1 0 !important;
    width: auto !important;
  }
}
/* =========================
   Product detail page redesign
   ========================= */

.pdp-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #eef2f8;
  color: #0a1e3f;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.admin-page) .product-full-details .pdp-title {
  margin: 0 0 20px !important;
  color: #10213f !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-decoration: none !important;
}

.pdp-variant-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fk-border);
  border-radius: 16px;
  background: #fbfcff;
  padding: 4px 18px;
  margin-bottom: 18px;
}

.pdp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
}

.pdp-row + .pdp-row {
  border-top: 1px solid rgba(10, 30, 63, 0.08);
}

.pdp-row h4 {
  flex: 0 0 auto;
  color: #10213f;
  font-size: 0.92rem;
  font-weight: 700;
}

/* Swatches: bigger dot, thinner ring */
.color-swatch {
  width: 38px !important;
  height: 38px !important;
  border: 1.5px solid #d7deea !important;
}

.swatch-color-dot {
  width: 28px !important;
  height: 28px !important;
}

.color-swatch.selected {
  border-color: #ff7b00 !important;
  box-shadow: 0 0 0 2px rgba(255, 123, 0, 0.16) !important;
}

/* Size chips: real button affordance */
.product-sizes-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.size-chip {
  min-width: 44px;
  padding: 9px 14px;
  border: 1.5px solid #d7deea;
  border-radius: 10px;
  background: #fff;
  color: #10213f;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.size-chip:hover:not(:disabled) {
  border-color: rgba(245, 130, 32, 0.5);
  transform: translateY(-1px);
}

.size-chip.selected {
  background: #0a1e3f;
  border-color: #0a1e3f;
  color: #fff;
}

.size-chip-out,
.size-chip:disabled {
  color: #b3b9c4;
  background: #f5f6f8;
  border-color: #eceff3;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Quantity stepper */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #d7deea;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.qty-btn {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #0a1e3f;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.qty-btn:hover {
  background: #f3f6fa;
}

.qty-stepper input {
  width: 42px;
  height: 38px;
  border: 0;
  border-left: 1px solid #eceff3;
  border-right: 1px solid #eceff3;
  text-align: center;
  font-weight: 700;
  color: #10213f;
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Price / CTA block */
.pdp-purchase-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--fk-border);
}

.pdp-purchase-block .flex12 {
  margin-bottom: 12px;
}

.pdp-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5768;
}

.pdp-trust-row i {
  color: #ff7b00;
  margin-right: 4px;
}

.pdp-purchase-block .admin-muted {
  margin-bottom: 14px;
}

@media (max-width: 760px) {
  .pdp-row {
    justify-content: space-between;
  }

  .product-sizes-display {
    justify-content: flex-start;
  }
}
body:not(.admin-page) .buttons1 button.buy-now-btn {
  background: linear-gradient(135deg, #1e7e34, #2fa84f) !important;
  box-shadow: 0 14px 28px rgba(30, 126, 52, 0.24) !important;
}

body:not(.admin-page) .buttons1 button.buy-now-btn:hover {
  box-shadow: 0 18px 34px rgba(30, 126, 52, 0.32) !important;
}
/* =========================================================
   Cart page — variant card (color / size / qty), PDP-style
   ========================================================= */

body.cart-page:not(.admin-page) .pdp-variant-card {
  margin: 4px 0 18px !important;
  padding: 4px 16px !important;
  border: 1px solid rgba(10, 30, 63, 0.12) !important;
  border-radius: 14px !important;
  background: #fbfcff !important;
}

body.cart-page:not(.admin-page) .pdp-row {
  padding: 14px 0 !important;
}

body.cart-page:not(.admin-page) .pdp-row h4 {
  color: #10213f !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

/* Pill-style selects */
body.cart-page:not(.admin-page) .cart-color-select,
body.cart-page:not(.admin-page) .cart-size-select {
  min-width: 160px !important;
  padding: 9px 14px !important;
  border: 1.5px solid #d7deea !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #10213f !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease;
}

body.cart-page:not(.admin-page) .cart-color-select:hover,
body.cart-page:not(.admin-page) .cart-size-select:hover:not(:disabled) {
  border-color: rgba(245, 130, 32, 0.5) !important;
}

body.cart-page:not(.admin-page) .cart-color-select:focus,
body.cart-page:not(.admin-page) .cart-size-select:focus {
  outline: none !important;
  border-color: #ff7b00 !important;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.14) !important;
}

body.cart-page:not(.admin-page) .cart-size-select:disabled {
  background: #f5f6f8 !important;
  color: #b3b9c4 !important;
  border-color: #eceff3 !important;
  cursor: not-allowed !important;
}

body.cart-page:not(.admin-page) .cart-size-block {
  align-items: flex-end !important;
  gap: 6px !important;
}

body.cart-page:not(.admin-page) .cart-size-help {
  margin: 0 !important;
}

/* Quantity stepper — hide native number spin arrows */
body.cart-page:not(.admin-page) .item-qty {
  -moz-appearance: textfield !important;
}

body.cart-page:not(.admin-page) .item-qty::-webkit-outer-spin-button,
body.cart-page:not(.admin-page) .item-qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

@media (max-width: 560px) {
  body.cart-page:not(.admin-page) .pdp-variant-card {
    padding: 2px 14px !important;
  }

  body.cart-page:not(.admin-page) .pdp-row {
    padding: 12px 0 !important;
  }

  body.cart-page:not(.admin-page) .cart-color-select,
  body.cart-page:not(.admin-page) .cart-size-select {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}
/* =========================================================
   Cart page — step title + add/remove line buttons (final polish)
   ========================================================= */

/* "1. Confirm Your Order" — badge-style step heading, PDP-eyebrow vibe */
body.cart-page:not(.admin-page) .confirm-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: max-content !important;
  max-width: calc(100% - 28px) !important;
  margin: 30px auto 22px !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0a1e3f, #12315f) !important;
  color: #fff !important;
  font-size: clamp(1.1rem, 3vw, 1.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 14px 32px rgba(10, 30, 63, 0.22) !important;
}

@media (max-width: 560px) {
  body.cart-page:not(.admin-page) .confirm-title {
    padding: 10px 20px !important;
    margin: 22px auto 16px !important;
  }
}

/* Add-line (+) button — orange, matches PDP CTA gradient */
body.cart-page:not(.admin-page) .add-line-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: linear-gradient(135deg, #f58220, #ff9f45) !important;
  color: #fff !important;
  font-size: 1.2rem !important;
  box-shadow: 0 12px 24px rgba(245, 130, 32, 0.26) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

body.cart-page:not(.admin-page) .add-line-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(245, 130, 32, 0.34) !important;
}

/* Remove (trash) button — dark, distinct from the add action */
body.cart-page:not(.admin-page) .remove-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid rgba(155, 28, 28, 0.18) !important;
  background: #fff5f5 !important;
  color: #9b1c1c !important;
  font-size: 1.1rem !important;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.cart-page:not(.admin-page) .remove-btn:hover {
  transform: translateY(-2px) !important;
  background: #9b1c1c !important;
  color: #fff !important;
  box-shadow: 0 14px 26px rgba(155, 28, 28, 0.28) !important;
}
/* Cart eyebrow badge: stop grid from stretching it full-width */
body.cart-page:not(.admin-page) .cart-item-details .pdp-eyebrow {
  justify-self: start !important;
  width: max-content !important;
}
.admin-category-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--fk-border);
  border-radius: 12px;
  background: #fbfcff;
}
.admin-category-row img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.admin-category-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.admin-category-name {
  font-weight: 700;
  color: #0a1e3f;
}

/* Delivery company cards on checkout */
.delivery-company-block {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--fk-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.delivery-company-block h5 {
  margin: 0 0 4px;
  color: #0a1e3f;
  font-size: 1rem;
  font-weight: 800;
}

.delivery-company-help {
  margin: 0 0 14px;
  color: #6b7280;
  font-size: 0.92rem;
}

.delivery-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.delivery-company-card {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}

.delivery-company-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.delivery-company-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 14px 16px;
  border: 1.5px solid #d9e3f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(10, 30, 63, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.delivery-company-card:hover .delivery-company-card-inner {
  transform: translateY(-1px);
  border-color: #94a9d6;
  box-shadow: 0 12px 28px rgba(10, 30, 63, 0.1);
}

.delivery-company-card img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
}

.delivery-company-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.delivery-company-card-text strong {
  color: #0a1e3f;
  font-size: 0.98rem;
  line-height: 1.2;
}

.delivery-company-card-text span {
  color: #5f6f8c;
  font-size: 0.9rem;
}

.delivery-company-card .fa-circle-check {
  color: #c7d2e8;
  font-size: 1.15rem;
  transition: color 0.18s ease, transform 0.18s ease;
}

.delivery-company-card.selected .delivery-company-card-inner {
  border-color: #f58220;
  box-shadow: 0 14px 28px rgba(245, 130, 32, 0.14);
}

.delivery-company-card.selected .fa-circle-check {
  color: #f58220;
  transform: scale(1.05);
}

.delivery-company-empty {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f7fb;
  color: #667085;
  font-size: 0.95rem;
  border: 1px dashed #d7deea;
}

@media (max-width: 560px) {
  .delivery-company-block {
    padding: 14px;
  }

  .delivery-company-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Buy Now landing page (buyproduct.html)
   Append this block to the END of style.css, REPLACING the
   previous "Buy Now landing page" block if you already added
   one. No separate buyproduct.css file.
   ========================================================= */

/* Bulletproof "hidden" — must always win over any component's own
   `display` rule (this was the cause of the loading card staying
   visible: .hidden and .product-full-details had equal specificity,
   and .product-full-details happened to come later in the file). */
.hidden {
  display: none !important;
}

body.buy-now-page {
  background:
    radial-gradient(circle at top left, rgba(245, 130, 32, 0.11), transparent 34rem),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
}

.buyproduct-shell {
  width: min(720px, calc(100% - 28px));
  margin: 0 auto;
  padding: 6px 0 60px;
}

.buyproduct-state {
  display: grid;
  place-items: center;
  min-height: 50vh;
}

.buyproduct-state-card {
  width: min(560px, 100%);
  padding: 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--fk-border);
  box-shadow: var(--fk-shadow);
  text-align: center;
}

.buyproduct-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2f8;
  color: #0a1e3f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.buyproduct-state-card h1 {
  margin: 0 0 10px;
  color: #10213f;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.buyproduct-state-card p {
  margin: 0;
  color: #5c687d;
}

.buyproduct-error .buyproduct-state-card a {
  color: #ff7b00;
  font-weight: 800;
}

.buy-price-display {
  justify-content: flex-start;
  gap: 16px;
  margin: 4px 0 18px;
  width: auto;
}

.buy-price-display .item-total {
  font-size: 2.1rem;
}

.buy-mini-trust {
  justify-content: space-between;
  margin: 18px 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--fk-border);
}

.buy-mini-summary {
  margin: 4px 0 16px;
  padding: 10px 16px;
  border: 1px solid var(--fk-border);
  border-radius: 14px;
  background: #f8fafc;
}

.buy-mini-summary .summary-row {
  margin: 8px 0;
  font-size: 0.85rem;
}

.buy-mini-summary .summary-total {
  border-top: 1px solid var(--fk-border);
  padding-top: 8px;
  margin-top: 4px;
}

.landing-order-btn {
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7b00 0%, #f59e0b 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(255, 123, 0, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.landing-order-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 36px rgba(255, 123, 0, 0.3);
}

.landing-order-btn:disabled {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

/* Pill-style color/size selects — same look as the cart page,
   just not scoped to body.cart-page so it also applies here. */
body.buy-now-page .cart-color-select,
body.buy-now-page .cart-size-select {
  min-width: 160px;
  padding: 9px 14px;
  border: 1.5px solid #d7deea;
  border-radius: 10px;
  background: #fff;
  color: #10213f;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

body.buy-now-page .cart-color-select:hover,
body.buy-now-page .cart-size-select:hover {
  border-color: rgba(245, 130, 32, 0.5);
}

body.buy-now-page .cart-color-select:focus,
body.buy-now-page .cart-size-select:focus {
  outline: none;
  border-color: #ff7b00;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.14);
}

/* Desktop-only fix (mobile already collapses to 1 column via the
   site's existing max-width:900px/760px rules — untouched here).
   The selector below is intentionally more specific than the
   ".product-full-details { grid-template-columns: ... !important }"
   rule earlier in the file, which is what was causing the desktop
   overlap: same !important, but that rule had higher specificity
   than my previous override, so it kept winning. */
@media (min-width: 901px) {
  .buyproduct-shell {
    width: min(900px, calc(100% - 28px));
  }
 body.buy-now-page .checkout-form {
    max-width: none;
    width: 100%;
  }
  body.buy-now-page .product-full-details.buy-landing {
    grid-template-columns: 1fr !important;
    max-width: 900px !important;
    margin: 30px auto 50px !important;
    padding: 36px !important;
    gap: 22px !important;
  }

  body.buy-now-page .buy-landing .product-gallery {
    position: static !important;
    top: auto !important;
  }

  body.buy-now-page .buy-landing .product-gallery img#product-main-image {
    height: 520px !important;
    max-height: 60vh !important;
  }
}
@media (max-width: 760px) {
  body.buy-now-page .checkout-form {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}
@media (max-width: 760px) {
  body.buy-now-page {
    background: #fff;
  }

  .buyproduct-shell {
    width: 100%;
    padding: 0 0 40px;
  }

  body.buy-now-page .product-full-details.buy-landing {
    width: 100%;
    max-width: none;
    margin: 14px 0 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}
/* Reserve space for the async-loaded Trend/Newest cards to prevent CLS */
body:not(.admin-page) .ads {
  min-height: 420px;
}

@media (max-width: 760px) {
  body:not(.admin-page) .ads {
    min-height: 380px;
  }
}

@media (max-width: 420px) {
  body:not(.admin-page) .ads {
    min-height: 340px;
  }
}
/* =========================================================
   Admin panel — full polish pass (desktop + mobile)
   ========================================================= */

.admin-page {
  background: linear-gradient(180deg, #f4f6fb 0%, #eef1f8 100%);
}

/* ---------- Topbar ---------- */
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--fk-border);
  box-shadow: 0 6px 18px rgba(10, 30, 63, 0.06);
}

.admin-topbar img {
  width: 76px;
  height: 56px;
  border-radius: 10px;
  background: #fff;
}

.admin-topbar h1 {
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

.admin-topbar p {
  margin-top: 2px;
}

.admin-topbar #admin-logout {
  margin-left: auto;
  background: #fff;
  color: var(--fk-blue);
  border: 1px solid var(--fk-border);
}

.admin-topbar #admin-logout:hover {
  background: #fdecec;
  color: #9b1c1c;
  border-color: rgba(155, 28, 28, 0.25);
}

/* ---------- Login card ---------- */
.admin-login-panel {
  max-width: 420px;
  margin: 60px auto;
  text-align: center;
  border-top: 4px solid var(--fk-orange);
}

.admin-login-panel h2 {
  color: var(--fk-blue);
  margin-bottom: 18px;
  font-size: 1.4rem;
}

.admin-login-panel label {
  text-align: left;
}

.admin-login-panel button[type="submit"] {
  margin-top: 6px;
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
}

/* ---------- Shell / section rhythm ---------- */
.admin-shell {
  padding-top: 8px;
}

.admin-panel {
  position: relative;
  padding: 22px 24px;
}

.admin-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid #f0f2f7;
}

/* ---------- Stat cards ---------- */
.admin-stat {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(10, 30, 63, 0.1);
}

.admin-stat span {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #8a93a6;
}

.admin-stat strong {
  font-size: 1.35rem;
}

/* ---------- Form fields ---------- */
.admin-form label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fk-blue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 6px;
}

.admin-form input,
.admin-form textarea,
.admin-table select {
  font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-table select:focus {
  outline: none;
  border-color: var(--fk-orange);
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.14);
}

.admin-form input[type="file"] {
  padding: 8px;
  background: #fbfcff;
}

.admin-form > button[type="submit"] {
  margin-top: 10px;
  padding: 13px;
  font-size: 0.95rem;
  background: linear-gradient(135deg, var(--fk-blue), var(--fk-blue-soft));
}

.admin-form > button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(10, 30, 63, 0.22);
}

#product-reset {
  width: 100%;
}

/* ---------- Buttons ---------- */
.admin-mini,
.admin-secondary {
  font-size: 0.8rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.admin-mini:hover,
.admin-secondary:hover {
  transform: translateY(-1px);
}

.admin-mini.danger:hover {
  background-color: #7c1515;
}

/* ---------- Uploaded photos list ---------- */
.admin-upload-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid var(--fk-border);
}

.admin-upload-item input[readonly] {
  background: #f4f6fa;
  color: #7a8296;
}

/* ---------- Variant grid table ---------- */
.variant-table {
  border-collapse: separate;
  border-spacing: 0;
}

.variant-table thead th {
  background: #f7f9fc;
  color: var(--fk-blue);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.variant-table tbody tr:nth-child(even) {
  background: #fafbfd;
}

.variant-table tbody tr:hover {
  background: #f2f6ff;
}

/* ---------- Products / Orders tables ---------- */
.admin-table tbody tr:hover {
  background: #f7f9ff;
}

.admin-table td,
.admin-table th {
  font-size: 0.88rem;
}

.admin-table select[data-order-status] {
  padding: 7px 8px;
  font-size: 0.82rem;
  min-width: 120px;
}

.order-item-line {
  font-size: 0.82rem;
  margin-bottom: 3px;
}

.order-item-line span {
  color: #8a93a6;
}

/* Sticky header + scroll containment for long tables (progressive enhancement) */
.admin-panel:has(#orders-table) .admin-table-wrap,
.admin-panel:has(#products-table) .admin-table-wrap {
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--fk-border);
  border-radius: 10px;
}

.admin-panel:has(#orders-table) .admin-table thead th,
.admin-panel:has(#products-table) .admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f9fc;
}

/* Nicer horizontal-scroll affordance on touch devices */
.admin-table-wrap {
  scrollbar-width: thin;
}

.admin-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.admin-table-wrap::-webkit-scrollbar-thumb {
  background: #d6dceb;
  border-radius: 999px;
}

/* ---------- Category photo rows ---------- */
.admin-category-row img {
  border: 1px solid var(--fk-border);
}

.admin-category-fields input {
  font-size: 0.85rem;
}

/* ---------- Low stock + audit log lists ---------- */
#low-stock-panel p,
#audit-logs p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.88rem;
}

#audit-logs p span {
  margin-left: auto;
  font-size: 0.75rem;
}

/* =========================================================
   Mobile breakpoints
   ========================================================= */

@media (max-width: 1024px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-topbar {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .admin-topbar img {
    width: 60px;
    height: 44px;
  }

  .admin-topbar h1 {
    font-size: 1.05rem;
  }

  .admin-topbar #admin-logout {
    margin-left: 0;
    width: 100%;
    order: 3;
  }

  .admin-shell {
    margin: 16px auto;
    padding: 0 12px;
  }

  .admin-panel {
    padding: 16px;
    border-radius: 14px;
  }

  .admin-panel h2 {
    font-size: 1.02rem;
  }

  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .admin-stat {
    padding: 12px;
  }

  .admin-stat strong {
    font-size: 1.1rem;
  }

  .admin-upload-item {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "img color"
      "path path"
      "primary primary"
      "remove remove";
    row-gap: 6px;
  }

  .admin-upload-item img { grid-area: img; }
  .admin-upload-item input[data-image-path] { grid-area: path; }
  .admin-upload-item input[data-image-color] { grid-area: color; }
  .admin-upload-item label { grid-area: primary; }
  .admin-upload-item button { grid-area: remove; }

  .admin-category-row {
    flex-wrap: wrap;
  }

  .admin-category-fields {
    flex: 1 1 100%;
    order: 3;
  }

  .admin-panel:has(#orders-table) .admin-table-wrap,
  .admin-panel:has(#products-table) .admin-table-wrap {
    max-height: 440px;
  }
}

@media (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr 1fr;
  }

  .admin-table {
    min-width: 640px;
  }

  #audit-logs p span {
    margin-left: 0;
    width: 100%;
  }
}

/* Reserve space on the homepage so async cards do not shove content around. */
body:not(.admin-page) .anounce {
  min-height: 520px;
}

body:not(.admin-page) .ads {
  min-height: 520px;
}

body:not(.admin-page) #bestsellers-list,
body:not(.admin-page) #category-list {
  min-height: 280px;
}

@media (max-width: 760px) {
  body:not(.admin-page) .anounce {
    min-height: 940px;
  }

  body:not(.admin-page) .ads {
    min-height: 440px;
  }

  body:not(.admin-page) #bestsellers-list,
  body:not(.admin-page) #category-list {
    min-height: 620px;
  }
}