/* =======================================================================
   SINGLE‑PRODUCT LAYOUT & CORE WRAPPER
   (works on every theme that uses standard WooCommerce hooks)
======================================================================= */
body.single-product div.product {
  max-width: 1100px;               /* consistency across themes */
  margin: 40px auto;
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* gallery | summary */
  gap: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* —— Mobile: stack gallery over summary —— */
@media (max-width: 768px) {
  body.single-product div.product {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 20px;
  }
}
/* =======================================================================
    MY ACCOUNT FORM
======================================================================= */
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  width: 300px;
  margin: 0 auto;
}
/* =======================================================================
   HOME, SHOP, SINGLE, PRODUCT DESIGN
======================================================================= */
/* Product Grid Container */
.content-live article{
}
.content-live article h2{
  margin:20px 0 0 0;
  color: #000000;
  text-align: center;

}
.content-live article form.custom-form{
    margin: 0 auto;
}
.woocommerce {
  margin: 0 auto;
}
ul.products {
    display: flex;
    flex-wrap:wrap;
    gap: px;
    padding: 10px;
    list-style: none;
    justify-content: center;
}

/* Product Card */
ul.products li.product, .woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid #eee;
    margin: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    width: 150px;
    height: 230px;
    transition: transform 0.2s ease-in-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

ul.products li.product:hover {
        animation: fadeIn 1s ease;
    box-shadow: 0px 2px 8px #ff5613;
}

/* Product Image */
ul.products li.product img, .woocommerce ul.products li.product a img {
    width: 140px;
    height: 140px;
    margin: auto;
    padding: 10px 5px;
    border-radius: 10px;
    object-fit: cover;
}

/* Sale Tag */
ul.products li.product .onsale {
    position: absolute;
    background: #bcff1b;
    color: #000000;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    top: 10px;
    left: 10px;
    border-radius: 20px 20px 0 20px;
}
.woocommerce ul.products li.product .onsale{
  position: absolute;
    background: #bcff1b;
    margin: 5px 110px ;
    color: #000000;
    padding: 3px 5px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 25px 25px 0px 25px;
}

/* Product Title */
ul.products li.product h2.woocommerce-loop-product__title, 
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    padding: 5px 0 5px 10px;
    margin: 0;
    line-height: 0.3em;
}

/* Price */
ul.products li.product .price, .woocommerce ul.products li.product .price  {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
    padding: 5px 0px;
    font-size: 13px;
    color: #222;
}

ul.products li.product .price del, .woocommerce ul.products li.product .price del {
    color: #7c7c7c;
    margin-right: 6px;
    padding: 5px 0px;
    font-size: 12px;
}
ul.products li.product .price del span bdi{
  display: flex;
}

ul.products li.product .price ins {
    color: #088212;
    font-weight: bold;
    text-decoration: none;
}
ul.products li.product .price ins span bdi{
  display: flex;
}
/* Add to Cart Button */
ul.products li.product .add_to_cart_button, .woocommerce ul.products li.product .button {
    display: block;
    background-color: #ff6b2b;
    color: #fbffc5;
    text-align: center;
    margin: 2px 30px;
    padding: 5px 0;
    border-radius: 25px;
    text-decoration: none;
    transition: background 0.3s ease;
    font-weight: 600;
    font-size: 12px;
}

ul.products li.product .add_to_cart_button:hover {
    background-color: #fa5204;
}
.woocommerce a.added_to_cart, ul.products li.product a.added_to_cart{
  display: none;
}
/* =======================================================================
   PRODUCT GALLERY
======================================================================= */

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){

}
.woocommerce div.product div.images img {
  object-fit: contain;
  height: 400px;
}


.woocommerce div.product div.images.woocommerce-product-gallery{
  width: 400px;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  width: 80px;
}
.woocommerce div.product div.images ol.flex-control-nav li img{
  height: 80px;
  width: 80px;
}
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery figure {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.woocommerce-product-gallery__wrapper img {
  width: 100%; height: auto; object-fit: cover;
  transition: transform .35s ease;
}
.woocommerce-product-gallery__wrapper img:hover {
  transform: scale(1.03);
}

/* SALE FLASH badge in gallery corner */
.woocommerce span.onsale {
  position: absolute; top: 15px; left: 15px;
  background: #e63946; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 6px 10px; border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* =======================================================================
   PRODUCT SUMMARY (title, price, button, etc.)
======================================================================= */
/* PRODUCT SUMMARY*/
.woocommerce-page div.product div.summary { display: flex; flex-direction: column; gap: 18px;width: 100%; }

.product_title {
  font-size: 28px; line-height: 1.25;
  margin: 0; font-weight: 700; color: #222;
}
/* PRODUCT SUMMARY (quantity, button)*/
.woocommerce div.quantity input.input-text{
  height: 36px;
}
.product_meta .sku_wrapper, .product_meta .posted_in, .product_meta .tagged_as{
  display: flex;
  align-items: center;
}
/* PRODUCT SUMMARY (meta sku, category, tags)*/
.product_meta .sku_wrapper span.sku{
  margin: 0 0 0 10px;
  font-weight: bold;
}
/* PRODUCT SUMMARY (rating)*/
.woocommerce-product-rating {
  display: flex; align-items: center; gap: 8px;
}
.woocommerce-product-rating .star-rating { font-size: 15px; color: #f8b400; }
.woocommerce-review-link { font-size: 14px; color: #0073aa; }

/* PRODUCT SUMMARY (price)*/
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price{

}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price del span bdi{
  display: flex;
  align-items: center;
  color: #222;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price ins span bdi{
    display: flex;
  align-items: center;
  color: #ce0000;
}
.price { font-size: 24px; font-weight: 700; color: #e63946; }
.price del { font-size: 17px; color: #999; margin-right: 8px; }
.price ins { text-decoration: none; }

/* Short description */
.entry-summary .woocommerce-product-details__short-description {
  font-size: 16px; color: #555; line-height: 1.6;
}

/* Quantity + Add‑to‑cart row */
.single_add_to_cart_button {
  background: #0073aa;
  color: #fff;
  padding: 14px 28px;
  border: none; border-radius: 8px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background .25s ease, transform .15s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.single_add_to_cart_button:hover { background: #005177; transform: translateY(-1px); }
.woocommerce div.quantity { margin-right: 12px; }
.woocommerce div.quantity input {
  height: 46px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 16px; text-align: center; width: 75px;
}

/* Product meta (SKU, categories, tags) */
.product_meta { font-size: 14px; color: #666; }
.product_meta span { display: block; margin-top: 4px; }
.product_meta a { color: #0073aa; }

/* Share buttons (if theme/plugin inserts) */
.entry-summary .product-sharing {
  margin-top: 12px;
}

/* =======================================================================
   TABS (description / additional info / reviews)
======================================================================= */
.woocommerce-tabs {
  margin: 50px 0 0;
  border-top: 1px solid #eee;
  padding-top: 30px;
}
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap;
  list-style: none; margin: 0 0 25px; padding: 0;
  border-bottom: 2px solid #eee;
}
.woocommerce-tabs ul.tabs li {
  margin: 0 20px 0 0; position: relative;
}
.woocommerce-tabs ul.tabs li a {
  padding: 10px 0; display: block;
  font-weight: 600; font-size: 15px; color: #555;
  transition: color .2s ease;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li:hover a { color: #0073aa; }
.woocommerce-tabs ul.tabs li.active::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 2px; background: #0073aa;
}

/* Tab panels */
.woocommerce-tabs .panel {
  animation: fadeIn .3s ease;
  font-size: 15px; color: #444; line-height: 1.6;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* =======================================================================
   RELATED & UP‑SELL PRODUCTS
======================================================================= */
.related.products,
.upsells.products {
  margin-top: 60px;
}
.related.products h2,
.upsells.products h2 {
  font-size: 24px; font-weight: 700;
  margin-bottom: 25px; text-align: center;
  color: #222;
}
/* Flex grid for related items */
.related ul.products,
.upsells ul.products {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 25px;
}
.related ul.products li.product,
.upsells ul.products li.product {
  width: 200px; padding: 15px;
  border: 1px solid #eee; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .25s ease;
}
.related ul.products li.product:hover,
.upsells ul.products li.product:hover { transform: translateY(-4px); }

/* =======================================================================
   NOTICES & BREADCRUMBS
======================================================================= */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: 8px;
  padding: 15px 20px;
  font-size: 14px;
}

.woocommerce-breadcrumb {
  font-size: 13px;
  margin-bottom: 20px;
}

/* =======================================================================
   LIGHTER MOBILE ADJUSTMENTS (optional tweaks)
======================================================================= */
@media (max-width: 480px) {
  .product_title       { font-size: 24px; }
  .price               { font-size: 20px; }
  .single_add_to_cart_button { width: 100%; }
  .woocommerce div.quantity { width: 100%; margin: 0 0 10px 0; }
  body.single-product div.product { padding: 15px; }
}

/* =======================================================================
    IF USER LOGING (login page design)
======================================================================= */
.woocommerce{


}
.woocommerce-account .woocommerce-MyAccount-navigation {
  margin: 20px 200px 100px 50px;
  width: 202px;
  background-color: #ffb7a3;
  height: 302px;
  border-radius: 15px;
  box-shadow: 0px 2px 8px #fd232390;

}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style-type: none;
  width: 195px;
  height: 295px;
  margin: 2.6px auto;
  border-radius: 15px;
  background-color: #ffffffe8;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
 margin: 10px 0 0 5px;
  color: #ad4005;
  display: inline-block;
  border-radius: 25px;
  transition: all ease 0.3s;
  &:hover{
    margin: 10px 0 0 15px;
    border-left: 3px solid #ae0303;
    border-right: 3px solid #0000009d;
    color: #ff2f2f;
    background-color: #ffffff;
  }

}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:first-child{
  margin-top: 20px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul a {
  margin:8px 20px;
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 600px;
  margin: 20px  200px 0 0;
}

.woocommerce-account .woocommerce-MyAccount-content p{
  color: #088212;
}
.woocommerce-account .woocommerce-MyAccount-content p a{
  color: #007fce;
  margin: 10px 0px;
  padding: 5px 10px;
  border-radius: 25px;
  color: #ad4005;
  transition: all ease 0.3s;
  &:hover{
    margin: 10px 15px;
    border-left: 3px solid #ae0303;
    color: #ff2f2f;
    background-color: #ffffff;
  }
}

/* =======================================================================
   Next and preview page button design
======================================================================= */
.pagination{
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination .page-numbers{
    margin: 5px;
    color: green;
    padding: 3px 5px;
    border: 1px solid #240046;
    border-radius: 5px;
}
.pagination .page-numbers:active{
    color: #fd384f;
}
.pagination .page-numbers:focus{
    color: #fd3840;
}
.page-numbers.current {
  background: #3498db;
  color: #fff;
  border-radius: 5px;
  padding: 5px 8px;
}
/* =======================================================================
   All login button design
======================================================================= */