/*
MBBS Adda — shop skin
Loaded by the MBBS Adda Shop Style plugin, which enqueues it after
WooCommerce's own stylesheets so these rules always land last.
*/


/* ─────────────────────────────────────────────
   0. WHAT ASTRA'S GRID CSS LEAVES OUT
   ───────────────────────────────────────────── */

/* The gallery and its thumbnails are ordered lists. Without the
   slider CSS the browser draws them as 1. 2. 3. 4. down the page. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images ol,
.woocommerce div.product div.images ul,
.woocommerce div.product .flex-control-nav{
  list-style:none !important; margin-left:0 !important; padding-left:0 !important;
  counter-reset:none !important;
}
.woocommerce div.product div.images ol li,
.woocommerce div.product div.images ul li,
.woocommerce div.product .flex-control-nav li{
  list-style:none !important; display:inline-block; margin:0;
}
.woocommerce div.product div.images ol li::marker,
.woocommerce div.product div.images ul li::marker,
.woocommerce div.product .flex-control-nav li::marker{ content:none !important }

/* With no slider running, every gallery frame is laid out one under
   the other. Show the first and hide the rest; the thumbnails below
   remain the way to see the others. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{
  display:block; position:relative;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper
  > .woocommerce-product-gallery__image:not(:first-child){
  display:none;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  width:100%; height:auto; display:block;
}
.woocommerce div.product .flex-viewport{ max-height:none !important }

/* The tabs are a <ul>; without the tab CSS they are bullets in a column. */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex !important; flex-wrap:wrap; gap:0;
  list-style:none !important; padding:0 !important;
  border-bottom:1px solid var(--wc-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  list-style:none !important; display:block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::marker{ content:none !important }
.woocommerce div.product .woocommerce-tabs .panel{ padding-top:20px }

/* Astra's grid file also drops the two-column split on desktop. */
@media (min-width:993px){
  .woocommerce div.product{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 4% }
  .woocommerce div.product div.images{ flex:0 0 44%; margin:0 !important }
  .woocommerce div.product div.summary{ flex:1 1 0; margin:0 !important }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells{ flex:0 0 100%; margin-top:44px }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.woocommerce, .woocommerce-page {
  --wc-ink:#0B1220; --wc-ink2:#3D4A5C; --wc-ink3:#6B7A90; --wc-ink4:#9AA7B8;
  --wc-line:#E8ECF1; --wc-line-d:#D7DEE8; --wc-surf:#F7F9FC; --wc-surf2:#F1F5F9;
  --wc-teal:#0D9488; --wc-teal-d:#0B7A72; --wc-teal-l:#EFFBF9;
  --wc-flame:#E2622B;
  --wc-f:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wc-r:14px; --wc-pill:999px;
  font-family:var(--wc-f);
  color:var(--wc-ink);
}
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3,
.woocommerce button,.woocommerce input,.woocommerce select,.woocommerce textarea{
  font-family:var(--wc-f);
}

/* ─────────────────────────────────────────────
   1. SHOP GRID
   Two columns on a phone. One column per screen turns a
   fourteen-book series into a very long scroll.
   ───────────────────────────────────────────── */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
  margin:0 0 32px !important;
  padding:0 !important;
  list-style:none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none !important}
.woocommerce ul.products li.product{
  width:100% !important; margin:0 !important; float:none !important;
  background:#fff; border:1px solid var(--wc-line); border-radius:var(--wc-r);
  overflow:hidden; display:flex; flex-direction:column;
  padding:0 !important;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px); border-color:var(--wc-line-d);
  box-shadow:0 12px 30px rgba(11,18,32,.09);
}
.woocommerce ul.products li.product a img{
  width:100% !important; aspect-ratio:3/4; object-fit:cover;
  margin:0 !important; border-radius:0 !important; display:block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:15px !important; font-weight:600 !important; line-height:1.4 !important;
  color:var(--wc-ink) !important; padding:14px 14px 0 !important; margin:0 !important;
  /* Full titles run to five lines and shove the price off the card. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title{
  padding:14px 14px 0 !important; font-size:15px !important;
}
.woocommerce ul.products li.product .price{
  display:block; padding:8px 14px 0 !important; margin:0 !important;
  font-size:17px !important; font-weight:600 !important; color:var(--wc-ink) !important;
}
.woocommerce ul.products li.product .price del{
  font-size:13px !important; color:var(--wc-ink4) !important; font-weight:400 !important;
  margin-right:6px; opacity:1 !important;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none !important; font-weight:600 !important; color:var(--wc-teal-d) !important;
}
.woocommerce ul.products li.product .button{
  margin:12px 14px 16px !important; width:calc(100% - 28px);
}
.woocommerce span.onsale{
  background:var(--wc-flame) !important; color:#fff !important;
  border-radius:var(--wc-pill) !important; font-family:var(--wc-f);
  font-size:11px !important; font-weight:600 !important; letter-spacing:.04em;
  padding:5px 12px !important; min-width:0 !important; min-height:0 !important;
  line-height:1.5 !important; top:10px !important; left:10px !important; right:auto !important;
  margin:0 !important;
}

/* ─────────────────────────────────────────────
   2. SINGLE PRODUCT
   The gallery was running the full width of the screen at its
   natural height, so the page opened on a cover and the buying
   controls were three swipes down.
   ───────────────────────────────────────────── */
.woocommerce div.product{ margin-bottom:40px }
.woocommerce div.product div.images{ margin-bottom:22px !important }
.woocommerce div.product div.images img{
  border-radius:12px; border:1px solid var(--wc-line); background:#fff;
}
@media (min-width:781px){
  .woocommerce div.product div.images{ width:44% !important }
  .woocommerce div.product div.summary{ width:52% !important }
}
@media (max-width:780px){
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary{ width:100% !important; float:none !important }
  /* A cover is portrait; letting it size itself fills the screen. */
  .woocommerce div.product div.images .woocommerce-product-gallery__image img{
    max-height:60vh; width:auto !important; margin:0 auto; object-fit:contain;
  }
}

/* thumbnails: a row under the cover, not a tall column beside it */
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex !important; flex-wrap:wrap; gap:8px; margin:12px 0 0 !important; padding:0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  width:auto !important; float:none !important; margin:0 !important; list-style:none;
}
.woocommerce div.product div.images .flex-control-thumbs li img{
  width:62px !important; height:62px; object-fit:cover; border-radius:9px;
  border:1px solid var(--wc-line); opacity:.65; transition:opacity .15s, border-color .15s;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover{
  opacity:1; border-color:var(--wc-teal);
}

.woocommerce div.product .product_title{
  font-size:clamp(21px,3.4vw,30px) !important; font-weight:600 !important;
  line-height:1.28 !important; letter-spacing:-.02em; color:var(--wc-ink) !important;
  margin:0 0 12px !important; padding:0 !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-size:26px !important; font-weight:600 !important; color:var(--wc-ink) !important;
  margin:0 0 18px !important; letter-spacing:-.02em; line-height:1.2;
}
.woocommerce div.product p.price del{
  font-size:17px !important; color:var(--wc-ink4) !important; font-weight:400 !important;
  margin-right:8px; opacity:1 !important;
}
.woocommerce div.product p.price ins{
  text-decoration:none !important; color:var(--wc-teal-d) !important; font-weight:600 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:15.5px; line-height:1.75; color:var(--wc-ink2); margin-bottom:22px;
}
.woocommerce div.product .woocommerce-product-details__short-description ul{
  padding-left:0; list-style:none; margin:12px 0;
}
.woocommerce div.product .woocommerce-product-details__short-description li{
  margin:9px 0; line-height:1.65;
}

/* the buying row: quantity and button side by side, not stacked and clipped */
.woocommerce div.product form.cart{
  display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;
  margin:0 0 22px !important; padding:18px 0 0; border-top:1px solid var(--wc-line);
}
.woocommerce div.product form.cart div.quantity{
  margin:0 !important; float:none !important; display:flex;
}
.woocommerce .quantity input.qty{
  width:78px !important; height:52px; border:1px solid var(--wc-line-d) !important;
  border-radius:12px !important; font-size:16px; font-weight:600; text-align:center;
  color:var(--wc-ink); background:#fff; padding:0 !important;
}
.woocommerce div.product form.cart .button{
  flex:1 1 200px; min-height:52px;
}

/* product meta */
.woocommerce div.product .product_meta{
  font-size:13px; color:var(--wc-ink4); border-top:1px solid var(--wc-line);
  padding-top:16px; line-height:2;
}
.woocommerce div.product .product_meta > span{ display:block }
.woocommerce div.product .product_meta a{ color:var(--wc-ink2); text-decoration:none }
.woocommerce div.product .product_meta a:hover{ color:var(--wc-teal-d) }

/* tabs and related */
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0 !important; margin:0 0 20px !important }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-color:var(--wc-line) !important }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  margin:0 22px 0 0 !important; padding:0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none !important }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-size:14px !important; font-weight:600 !important; color:var(--wc-ink4) !important;
  padding:12px 0 !important; border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--wc-ink) !important; border-bottom-color:var(--wc-teal);
}
.woocommerce div.product .woocommerce-tabs .panel{
  font-size:15.5px; line-height:1.75; color:var(--wc-ink2);
}
.woocommerce .related > h2, .woocommerce .upsells > h2,
.woocommerce-page .cross-sells > h2{
  font-size:22px !important; font-weight:600 !important; letter-spacing:-.02em;
  margin:0 0 20px !important;
}

/* ─────────────────────────────────────────────
   3. BUTTONS
   The default blue is the theme's, not the brand's, and it was
   the loudest thing on the page.
   ───────────────────────────────────────────── */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce-page a.button, .woocommerce-page button.button{
  background:var(--wc-teal) !important; color:#fff !important;
  font-family:var(--wc-f) !important; font-size:15px !important; font-weight:600 !important;
  line-height:1.4 !important; letter-spacing:0 !important; text-transform:none !important;
  padding:14px 24px !important; border:0 !important; border-radius:var(--wc-pill) !important;
  box-shadow:0 4px 14px rgba(13,148,136,.22) !important;
  transition:background .16s, transform .16s, box-shadow .16s !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  text-align:center; white-space:normal;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover{
  background:var(--wc-teal-d) !important; color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(13,148,136,.28) !important;
}
.woocommerce a.button.added_to_cart{
  background:#fff !important; color:var(--wc-teal-d) !important;
  border:1.5px solid var(--wc-teal) !important; box-shadow:none !important;
  margin:0 14px 16px !important;
}
.woocommerce .button.disabled, .woocommerce button.button:disabled{
  opacity:.45 !important; box-shadow:none !important;
}

/* ─────────────────────────────────────────────
   4. NOTICES, BREADCRUMB, CART, CHECKOUT
   ───────────────────────────────────────────── */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-top:0 !important; border-left:3px solid var(--wc-teal) !important;
  background:var(--wc-teal-l) !important; color:var(--wc-ink2) !important;
  border-radius:0 12px 12px 0 !important; font-size:14.5px; line-height:1.6;
  padding:15px 18px 15px 20px !important; display:flex; align-items:center;
  gap:12px; flex-wrap:wrap;
}
.woocommerce .woocommerce-error{
  border-left-color:#DC2626 !important; background:#FEF2F2 !important;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before{ display:none !important }
.woocommerce .woocommerce-message .button{ margin-left:auto }

.woocommerce .woocommerce-breadcrumb{
  font-size:12.5px !important; color:var(--wc-ink4) !important;
  margin:0 0 18px !important; padding:0 !important;
}
.woocommerce .woocommerce-breadcrumb a{ color:var(--wc-ink3) !important }
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--wc-teal-d) !important }

.woocommerce table.shop_table{
  border:1px solid var(--wc-line) !important; border-radius:var(--wc-r) !important;
  border-collapse:separate !important; font-size:15px; overflow:hidden;
}
.woocommerce table.shop_table th{
  font-size:12px !important; text-transform:uppercase; letter-spacing:.05em;
  color:var(--wc-ink3) !important; background:var(--wc-surf); font-weight:600 !important;
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th{
  padding:14px 16px !important; border-color:var(--wc-line) !important;
}
.woocommerce-cart table.cart img{ width:64px; border-radius:9px }
.woocommerce .cart_totals h2, .woocommerce-checkout h3{
  font-size:19px !important; font-weight:600 !important; letter-spacing:-.015em;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single{
  border:1px solid var(--wc-line-d) !important; border-radius:11px !important;
  padding:13px 14px !important; font-size:16px !important; font-family:var(--wc-f) !important;
  color:var(--wc-ink) !important; background:#fff !important; height:auto !important;
  box-shadow:none !important;
}
.woocommerce form .form-row label{
  font-size:13.5px; font-weight:500; color:var(--wc-ink2); margin-bottom:6px;
}
.woocommerce-checkout #payment{
  background:var(--wc-surf) !important; border-radius:var(--wc-r) !important;
  border:1px solid var(--wc-line);
}
.woocommerce-checkout #payment div.payment_box{
  background:#fff !important; border:1px solid var(--wc-line); border-radius:11px;
  font-size:14px; color:var(--wc-ink2);
}
.woocommerce-checkout #payment div.payment_box::before{ display:none !important }
.woocommerce #payment #place_order{ width:100%; margin-top:8px }

/* result count and sorting */
.woocommerce .woocommerce-result-count{ font-size:13.5px; color:var(--wc-ink4) }
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--wc-line-d); border-radius:10px; padding:10px 12px;
  font-family:var(--wc-f); font-size:14px; color:var(--wc-ink2); background:#fff;
}

/* ─────────────────────────────────────────────
   5. PHONES
   ───────────────────────────────────────────── */
@media (max-width:600px){
  .woocommerce ul.products{ grid-template-columns:1fr 1fr; gap:12px }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:13.5px !important; padding:11px 11px 0 !important;
  }
  .woocommerce ul.products li.product .price{ font-size:15px !important; padding:6px 11px 0 !important }
  .woocommerce ul.products li.product .price del{ font-size:11.5px !important; display:block; margin:0 }
  .woocommerce ul.products li.product .button{
    margin:10px 11px 12px !important; width:calc(100% - 22px);
    padding:11px 12px !important; font-size:13px !important;
  }
  .woocommerce a.button.added_to_cart{ margin:0 11px 12px !important; font-size:12.5px !important }
  .woocommerce div.product .product_title{ font-size:20px !important }
  .woocommerce div.product p.price{ font-size:23px !important }
  .woocommerce div.product form.cart .button{ flex:1 1 100%; }
  .woocommerce table.shop_table td, .woocommerce table.shop_table th{ padding:11px 12px !important }
  .woocommerce div.product .woocommerce-tabs ul.tabs li{ margin-right:16px !important }
}

/* ─────────────────────────────────────────────
   6. Theme-proofing
   Themes style bare button elements with their own accent, often
   with enough specificity to outrank a single class. The rules
   above already carry !important; this catches the focus and
   active states they set separately.
   ───────────────────────────────────────────── */
.woocommerce .button:focus, .woocommerce .button:active,
.woocommerce-page .button:focus, .woocommerce-page .button:active{
  background:var(--wc-teal-d) !important; color:#fff !important;
  outline:none !important; box-shadow:none !important;
}
.woocommerce .button:focus-visible{
  outline:3px solid rgba(13,148,136,.42) !important; outline-offset:2px !important;
}