/* Takao product cards (grid only) */
:root{
  --takao-sale-red:#e53935;
  --takao-price-green:#1b8f3a;
  --takao-btn-yellow:#f2c200;
  --takao-border:#d9d9d9;
  --takao-shadow: 0 2px 10px rgba(0,0,0,.08);
  --takao-radius: 10px;
}

.product-small.box.takao-pcard{
  background:#fff !important;
  border:1px solid var(--takao-border) !important;
  border-radius: var(--takao-radius) !important;
  box-shadow: var(--takao-shadow) !important;
  overflow:hidden;
  padding:0 !important;
}

/* image */
.product-small.box.takao-pcard .box-image{
  padding:14px 14px 6px 14px;
}
.product-small.box.takao-pcard .box-image img{
  max-height: 210px;
  object-fit: contain;
}

/* text area */
.product-small.box.takao-pcard .box-text{
  padding: 10px 14px 14px 14px !important;
  text-align:left !important;
}
.product-small.box.takao-pcard .category{
  font-size:12px !important;
  letter-spacing:.3px;
  opacity:.75;
  margin-bottom: 6px !important;
}
.product-small.box.takao-pcard .name{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  margin: 0 0 8px 0 !important;
}
.product-small.box.takao-pcard .name a{
  color:#000 !important;
}

/* ratings */
.product-small.box.takao-pcard .star-rating{
  margin: 6px 0 6px 0 !important;
}

/* price */
.product-small.box.takao-pcard .price-wrapper{
  margin: 0 0 10px 0 !important;
}
.product-small.box.takao-pcard .price{
  font-size: 16px !important;
  font-weight: 800 !important;
}
.product-small.box.takao-pcard .price del{
  color:#b08b74 !important;
  opacity:1 !important;
  font-weight:600 !important;
  margin-right:8px;
}
.product-small.box.takao-pcard .price ins{
  color: var(--takao-price-green) !important;
  font-weight: 900 !important;
  text-decoration:none !important;
}

/* qty + button */
.product-small.box.takao-pcard .takao-qtywrap{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.product-small.box.takao-pcard .takao-qty{
  display:inline-flex;
  align-items:center;
  gap:0;
  width: 128px;
}
.product-small.box.takao-pcard .takao-qty-btn{
  width: 34px;
  height: 34px;
  border:1px solid #cfcfcf;
  background:#e6e6e6;
  color:#222;
  font-weight:800;
  line-height: 32px;
  cursor:pointer;
}
.product-small.box.takao-pcard .takao-qty-btn:first-child{
  border-radius: 6px 0 0 6px;
}
.product-small.box.takao-pcard .takao-qty-btn:last-child{
  border-radius: 0 6px 6px 0;
}
.product-small.box.takao-pcard .takao-qty-input{
  width: 60px !important;
  height: 34px !important;
  border-top:1px solid #cfcfcf !important;
  border-bottom:1px solid #cfcfcf !important;
  border-left:0 !important;
  border-right:0 !important;
  text-align:center !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  background:#fff !important;
}

/* add to cart button */
.product-small.box.takao-pcard a.takao-addtocart.button{
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
  height: 42px;
  background: var(--takao-btn-yellow) !important;
  border-color: var(--takao-btn-yellow) !important;
  color:#fff !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  text-transform:none !important;
}
.product-small.box.takao-pcard a.takao-addtocart.button:hover{
  filter: brightness(.97);
}

/* sale badge */
.product-small.box.takao-pcard .badge-container{
  top: 10px !important;
  left: 10px !important;
}
.product-small.box.takao-pcard .badge{
  border-radius: 6px !important;
  overflow:hidden;
}
.product-small.box.takao-pcard .badge .badge-inner{
  background: var(--takao-sale-red) !important;
  color:#fff !important;
  padding: 6px 10px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-transform:none !important;
}

/* If the theme outputs WooCommerce's default <span class="onsale"> ... */
.product-small.box.takao-pcard span.onsale{
  position:absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: var(--takao-sale-red) !important;
  color:#fff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  text-transform:none !important;
  box-shadow: none !important;
}


/* Sale % badge (takao-sale-pct) in Flatsome grids where badge-container is OUTSIDE the card (e.g. homepage) */
.product-small.col .badge-container,
.col-inner > .badge-container{
  top: 10px !important;
  left: 10px !important;
}

.badge-container > span.onsale.takao-sale-pct,
.badge-container span.onsale.takao-sale-pct{
  display:inline-block !important;
  background: var(--takao-sale-red) !important;
  color:#fff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-transform:none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
}

/* Hide "New" / "HOT" callout badges */
.badge.callout,
.badge.callout .badge-inner,
.badge-inner.callout-new-b,
.badge-inner.callout-hot-b,
.badge-inner.new-bubble,
.badge-inner.hot-bubble{
  display:none !important;
}

/* Override Flatsome's circle badge shape (if present) */
.product-small.box.takao-pcard .badge.badge-circle,
.product-small.box.takao-pcard .badge.badge-circle .badge-inner{
  border-radius: 6px !important;
}

/* Hide Flatsome hover tools for grid cards (optional) */
.product-small.box.takao-pcard .image-tools,
.product-small.box.takao-pcard .image-tools-top{
  display:none !important;
}

/* Mobile */
@media (max-width: 549px){
  .products .product-small .box-image,
  .woocommerce .products .product-small .box-image{ height: 180px; }

  /* keep spacing tighter on mobile */
  .product-small.box.takao-pcard .box-text{ padding: 10px 12px 12px 12px !important; }
}

/* =========================================================
   FIX v4: equal-height feel, centered meta, nicer title, solid qty layout
   ========================================================= */
.product-small.box.takao-pcard .box-text{
  display:flex !important;
  flex-direction:column !important;
  height:100%;
}
.product-small.box.takao-pcard .box-text-products{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Title: less bold + clamp to 3 lines with ellipsis */
.product-small.box.takao-pcard .name.product-title,
.product-small.box.takao-pcard .name.product-title a{
  font-weight:600 !important;
}
.product-small.box.takao-pcard .name.product-title a{
  line-height:1.25 !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.product-small.box.takao-pcard .title-wrapper{
  width:100%;
  text-align:left;
  min-height:3.75em; /* ~3 lines */
}

/* Center rating + price */
.product-small.box.takao-pcard .star-rating{
  margin-left:auto !important;
  margin-right:auto !important;
}
.product-small.box.takao-pcard .price-wrapper,
.product-small.box.takao-pcard .price{
  text-align:center !important;
  justify-content:center;
}
.product-small.box.takao-pcard .price del{
  margin-right:10px;
}

/* Quantity: keep in one line, not broken */
.product-small.box.takao-pcard .takao-qty-wrap{
  width:100%;
  display:flex !important;
  justify-content:center !important;
  margin:12px 0 14px !important;
}
.product-small.box.takao-pcard .takao-qty{
  display:inline-flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:0 !important;
  max-width: 220px;
  width: 100%;
}
.product-small.box.takao-pcard .takao-qty,
.product-small.box.takao-pcard .takao-qty *{
  box-sizing:border-box;
}
.product-small.box.takao-pcard .takao-qty button{
  flex:0 0 42px !important;
  width:42px !important;
  height:42px !important;
  line-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.product-small.box.takao-pcard .takao-qty input.qty{
  flex:0 0 72px !important;
  width:72px !important;
  min-width:72px !important;
  height:42px !important;
  line-height:42px !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
}

/* Add to cart pinned bottom */
.product-small.box.takao-pcard a.takao-addtocart.button{
  margin-top:auto !important;
}

/* --- v5: equal height grid + aligned rows --- */

/* Make Flatsome grid columns stretch equally */
.woocommerce .products.row,
.woocommerce-page .products.row,
.products.row { align-items: stretch; }

.woocommerce .products .product-small,
.woocommerce-page .products .product-small { display: flex; }

.woocommerce .products .product-small .col-inner,
.woocommerce-page .products .product-small .col-inner { display:flex; flex:1; height:100%; }

.woocommerce .products .product-small .col-inner > .box,
.woocommerce-page .products .product-small .col-inner > .box { flex:1; display:flex; flex-direction:column; height:100%; }

/* Card body: keep bottom actions aligned */
.product-small.box.takao-pcard .box-text{
  display:flex;
  flex-direction:column;
  flex:1;
}

.product-small.box.takao-pcard .box-text .title-wrapper{
  /* Reserve space for: category + up to 3 title lines */
  /* v7.1: giảm khoảng trống khi rating bị tắt */
  min-height: 5.2em;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.product-small.box.takao-pcard .name.product-title{
  font-weight:600 !important; /* less bold */
}

/* 3-line clamp with ellipsis */
.product-small.box.takao-pcard .name.product-title a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  line-height:1.35;
  max-height:4.05em; /* 1.35 * 3 */
}

/* Center + reserve height so prices line up */
.product-small.box.takao-pcard .price-wrapper{
  /* v7.1: gọn hơn */
  min-height: 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.product-small.box.takao-pcard .price-wrapper .price,
.product-small.box.takao-pcard .price-wrapper .price span{
  text-align:center;
}
.product-small.box.takao-pcard .star-rating{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Actions at bottom (qty + button aligned) */
.product-small.box.takao-pcard .takao-actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  justify-content:flex-end;
  min-height: 132px;
}

/* Quantity: keep in one row, no wrap */
.product-small.box.takao-pcard .takao-qtywrap,
.product-small.box.takao-pcard .takao-qty-wrap{
  display:flex !important;
  justify-content:center;
}

.product-small.box.takao-pcard .takao-qty{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center;
  align-items:center;
  gap:0;
  width:100%;
}

.product-small.box.takao-pcard .takao-qty-btn{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  line-height:40px !important;
}

.product-small.box.takao-pcard .takao-qty-input{
  width:72px !important;
  min-width:72px !important;
  height:40px !important;
  line-height:40px !important;
  margin:0 !important;
  text-align:center !important;
}

/* Button always same height */
.product-small.box.takao-pcard .takao-addtocart{
  height:44px;
  line-height:44px;
}

/* =========================
   v6 fixes: equal height + alignment + qty/button
   ========================= */

/* =========================
   v8.1: hard equal-height alignment
   - Same image height without distortion
   - Reserve rows for title/price/cart so everything lines up
   ========================= */

/* Fixed image slot (centered, keep ratio) */

/* Fixed image frame: top-anchored, no distortion.
   - Frame has fixed height.
   - Image is pinned to TOP.
   - If image is too tall => bottom is clipped (overflow hidden).
   - Width stays within the frame (no horizontal overflow). */
.products .product-small .box-image,
.woocommerce .products .product-small .box-image{
  height: 220px;
  overflow: hidden;
  display: block;
  position: relative;
}

/* Make inner wrappers fill the frame */
.products .product-small .box-image > a,
.woocommerce .products .product-small .box-image > a,
.products .product-small .box-image .image-fade_in_back,
.woocommerce .products .product-small .box-image .image-fade_in_back{
  width: 100%;
  height: 100%;
  display: block;
}

/* Pin image to TOP, keep aspect ratio (no stretch) */
.products .product-small .box-image img,
.woocommerce .products .product-small .box-image img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  display: block !important;
  margin: 0 auto !important; /* keep centered horizontally if there's extra space */
  object-fit: unset !important;
  object-position: top center !important;
}


/* Reserve a consistent height for title (3 lines) so price aligns */
.products .product-small p.name.product-title,
.woocommerce .products .product-small p.name.product-title{
  min-height: calc(1.35em * 3) !important;
}

/* Price row: fixed height so cards with/without <del> still line up */
.products .product-small .price-wrapper,
.woocommerce .products .product-small .price-wrapper{
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cart area: reserve space and pin to bottom */
.products .product-small .takao-loop-cart,
.woocommerce .products .product-small .takao-loop-cart,
.products .product-small form.cart,
.woocommerce .products .product-small form.cart{
  margin-top: auto;
  min-height: 110px;
}

/* Ensure each product card stretches equally in normal grid */
.products .product-small,
.woocommerce .products .product-small{ height:100%; }

.products .product-small .box,
.woocommerce .products .product-small .box{
  height:100%;
  display:flex;
  flex-direction:column;
}

.products .product-small .box-text,
.woocommerce .products .product-small .box-text{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Title: lighter + clamp to 3 lines with ellipsis + reserve same height */
.products .product-small p.name.product-title,
.woocommerce .products .product-small p.name.product-title{
  font-weight:600;
  line-height:1.35;
  margin-bottom:6px;
  /* v7.1: chỉ reserve 2 dòng để giảm khoảng trống; vẫn clamp tối đa 3 dòng */
  min-height: calc(1.35em * 2);
  max-height: calc(1.35em * 3);
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.products .product-small .price-wrapper,
.woocommerce .products .product-small .price-wrapper{
  text-align:center;
  /* v7.1: sát hơn với tiêu đề */
  margin-top:2px;
}

.products .product-small .star-rating,
.woocommerce .products .product-small .star-rating{
  margin-left:auto !important;
  margin-right:auto !important;
  float:none !important;
}

/* v7.1: ẩn rating trên card (bạn đã tắt rating) */
.products .product-small .star-rating,
.woocommerce .products .product-small .star-rating{
  display:none !important;
}

/* Push qty + button to the bottom so all align */
.products .product-small .takao-loop-cart,
.woocommerce .products .product-small .takao-loop-cart{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

/* Quantity (support both our custom markup and common +/- plugins) */
.products .product-small .takao-qty,
.products .product-small .quantity,
.woocommerce .products .product-small .takao-qty,
.woocommerce .products .product-small .quantity{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:0 !important;
  width:100%;
}

.products .product-small .takao-qty-btn,
.products .product-small .quantity .minus,
.products .product-small .quantity .plus,
.woocommerce .products .product-small .takao-qty-btn,
.woocommerce .products .product-small .quantity .minus,
.woocommerce .products .product-small .quantity .plus{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  line-height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid #d0d0d0 !important;
  background:#e7e7e7 !important;
  cursor:pointer;
  box-sizing:border-box;
}

/* Middle input */
.products .product-small .takao-qty-input,
.products .product-small .quantity input.qty,
.woocommerce .products .product-small .takao-qty-input,
.woocommerce .products .product-small .quantity input.qty{
  width:72px !important;
  min-width:72px !important;
  height:40px !important;
  line-height:40px !important;
  text-align:center !important;
  margin:0 !important;
  border-top:1px solid #d0d0d0 !important;
  border-bottom:1px solid #d0d0d0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  box-sizing:border-box;
}

/* Remove gaps + make a single joined control */
.products .product-small .takao-qty-btn:first-child,
.products .product-small .quantity .minus,
.woocommerce .products .product-small .takao-qty-btn:first-child,
.woocommerce .products .product-small .quantity .minus{
  border-radius:6px 0 0 6px !important;
}

.products .product-small .takao-qty-btn:last-child,
.products .product-small .quantity .plus,
.woocommerce .products .product-small .takao-qty-btn:last-child,
.woocommerce .products .product-small .quantity .plus{
  border-radius:0 6px 6px 0 !important;
}

/* Button: always visible + full width */
.products .product-small .takao-addtocart,
.woocommerce .products .product-small .takao-addtocart,
.products .product-small a.button,
.products .product-small button.button,
.woocommerce .products .product-small a.button,
.woocommerce .products .product-small button.button{
  width:100% !important;
  display:block !important;
  white-space:normal !important;
}

/* Make sure nothing clips the button */
.products .product-small .box-text,
.woocommerce .products .product-small .box-text{
  overflow:visible !important;
}

/* Translate Add to cart label (grid only) */
.products .product-small a.add_to_cart_button,
.products .product-small button.add_to_cart_button,
.woocommerce .products .product-small a.add_to_cart_button,
.woocommerce .products .product-small button.add_to_cart_button{
  text-transform:none !important;
}

/* =========================
   v7: robust layout fixes for other grids/blocks
   - Always show our button when present
   - Keep minus/input/plus joined (no gaps)
   - Center the qty block
   ========================= */

/* Ensure our custom loop cart block is centered and stacked */
.takao-loop-cart,
.takao-qtywrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
}

/* Hide default add-to-cart buttons only after JS confirms our custom UI exists */
.takao-has-custom-cart a.add_to_cart_button:not(.takao-addtocart),
.takao-has-custom-cart button.add_to_cart_button:not(.takao-addtocart){
  display:none !important;
}

/* Quantity group: joined control, centered */
.takao-loop-cart .takao-qty,
.takao-qtywrap .takao-qty,
.takao-simple-hasqty .quantity{
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:0 !important;
}

.takao-loop-cart .takao-qty-btn,
.takao-qtywrap .takao-qty-btn,
.takao-simple-hasqty .quantity .minus,
.takao-simple-hasqty .quantity .plus{
  margin:0 !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  line-height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid #d0d0d0 !important;
  background:#e7e7e7 !important;
  box-sizing:border-box;
}

.takao-loop-cart .takao-qty-input,
.takao-qtywrap .takao-qty-input,
.takao-simple-hasqty .quantity input.qty{
  margin:0 !important;
  width:72px !important;
  min-width:72px !important;
  height:40px !important;
  line-height:40px !important;
  text-align:center !important;
  border-top:1px solid #d0d0d0 !important;
  border-bottom:1px solid #d0d0d0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  box-sizing:border-box;
}

/* Rounded corners for the joined control */
.takao-loop-cart .takao-qty-btn:first-child,
.takao-qtywrap .takao-qty-btn:first-child,
.takao-simple-hasqty .quantity .minus{
  border-radius:6px 0 0 6px !important;
}

.takao-loop-cart .takao-qty-btn:last-child,
.takao-qtywrap .takao-qty-btn:last-child,
.takao-simple-hasqty .quantity .plus{
  border-radius:0 6px 6px 0 !important;
}

/* Make sure the - button sits flush with the input (some themes add margins/padding) */
.takao-simple-hasqty .quantity{
  float:none !important;
}

/* Our custom add-to-cart button: match the yellow style even outside Flatsome cards */
a.takao-addtocart.button,
a.takao-addtocart{
  width:100% !important;
  max-width: 100%;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:44px !important;
  line-height:44px !important;
  background: var(--takao-btn-yellow) !important;
  border-color: var(--takao-btn-yellow) !important;
  color:#fff !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  text-transform:none !important;
}

/* =========================
   v1_sale_fix: force sale % badge style globally
   ========================= */

/* Ensure product cards are a positioning context for absolute sale labels */
.product-small.box{ position: relative; }

/* Move badge container to near top-left (all product cards) */
.product-small.box .badge-container{
  top: 10px !important;
  left: 10px !important;
}

/* Make Flatsome badge wrappers rectangular (if still used) */
.product-small.box .badge,
.product-small.box .badge.badge-circle,
.product-small.box .badge.badge-circle .badge-inner{
  border-radius: 6px !important;
}

/* If Flatsome renders a badge wrapper, neutralize its own background so our span can own the look */
.product-small.box .badge .badge-inner{
  background: transparent !important;
  padding: 0 !important;
}

/* Strong style for our percentage sale label */
.woocommerce span.onsale.takao-sale-pct,
.product-small.box span.onsale.takao-sale-pct,
.product-small.box .badge-container span.onsale.takao-sale-pct{
  display: inline-block !important;
  background: var(--takao-sale-red) !important;
  color: #fff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

/* When WooCommerce outputs the sale label directly (not inside Flatsome badge wrapper) */
.product-small.box > span.onsale.takao-sale-pct,
.product-small.box .box-image > span.onsale.takao-sale-pct{
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 50 !important;
}

/* Show wishlist tools again */
.product-small.box.takao-pcard .image-tools,
.product-small.box.takao-pcard .image-tools-top{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Optional: hide Quick View only (giữ lại icon tim) */
.product-small.box.takao-pcard .image-tools .quick-view,
.product-small.box.takao-pcard .image-tools-top .quick-view{
  display:none !important;
}