.thumb-btn {
width: 158px;
height: 141px;
border: 1px solid #e2e8f0;
border-radius: 4px;
padding: 4px;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 4px 0px #00000033;
}
.thumb-btn.active {
border-color: #0d8abc;
}
.thumb-btn img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Main Product Image Container */
.main-img-container {
border: 1px solid #f0f0f0;
border-radius: 4px;
position: relative;
background-color: #fff;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* #main-product-image previously relied only on Bootstrap's own .img-fluid
(max-width:100%; height:auto) -- that only ever constrains WIDTH, so a
tall/portrait product photo (nothing stops a seller uploading one) could
render taller than .main-img-container's own height and visually spill
out the top/bottom, since the container had no overflow:hidden either.
object-fit: contain makes every product's main image
fit the exact same fixed area above regardless of its real dimensions --
letterboxed if its aspect ratio isn't a perfect match, never cropped,
never overflowing. This ID selector's specificity is enough to win over
.img-fluid's own height:auto without needing !important. */
#main-product-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.action-icon-btn {
position: absolute;
width: 40px;
height: 40px;
border-radius: 4px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
cursor: pointer;
border: 1px solid #00000033;
}
button.action-icon-btn.top-0.end-0.m-3 {
border: 0px;
box-shadow: none;
}
/* Primary Accent Colors & Buttons */
.btn-buy-now {
background-color: #1ba0d7;
color: #fff;
font-weight: 500;
border: none;
border-radius: 0px;
}
.btn-buy-now:hover {
background-color: #158bbd;
color: #fff;
}
.btn-add-cart {
border: 1px solid #cbd5e1;
color: #334155;
font-weight: 500;
background-color: #fff;
border-radius: 0px;
}
.btn-add-cart:hover {
background-color: #f8fafc;
}
/* WooCommerce's own real add-to-cart form (woocommerce/content-single-product.php
calls woocommerce_template_single_add_to_cart() directly, not a
hand-built form) -- the mockup's static .btn-add-cart class was never on
a real button, WC's own is `.single_add_to_cart_button`. Buy Now (this
theme's own injected button) is placed first visually via `order`
regardless of DOM position -- it's
injected via the `woocommerce_after_add_to_cart_button` hook, so it
always renders AFTER the real Add to Cart button in markup. Any OTHER
button a plugin adds to this same hook (e.g. Dokan Store Support's "Get
Support" product-page button) is de-emphasized onto its own full-width
row below, rather than fighting the two primary actions for visual
weight. */
form.cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
/* WooCommerce's own default CSS gives form.cart a :before/:after clearfix
pair (content:" "; display:table), needed only for its own default
float-based layout. Once this form is flex (above), those two generated
boxes become real flex items themselves instead of disappearing --
`gap: 12px` then adds a gap on either side of them same as any other
item, which is exactly the empty space that showed up before the Buy Now
button (the leading :before pseudo-element plus its gap). Neither is
needed with flex (nothing here still floats), so both are removed
outright. */
form.cart::before,
form.cart::after {
content: none !important;
display: none !important;
}
form.cart .quantity {
order: 0;
margin: 0;
}
form.cart .quantity .qty {
height: 50px;
border: 1px solid #469BC2;
border-radius: 0;
}
form.cart .btn-buy-now {
order: 1;
flex: 1 1 0;
min-width: 120px;
}
form.cart .single_add_to_cart_button {
order: 2;
flex: 1 1 0;
min-width: 120px;
min-height: 50px;
padding: .5rem 1rem;
border: 1px solid #469BC2;
border-radius: 0;
background-color: #fff;
color: #334155;
font-weight: 700;
}
form.cart .single_add_to_cart_button:hover {
background-color: #f8fafc;
}
form.cart > button:not(.single_add_to_cart_button):not(.btn-buy-now) {
order: 3;
flex: 1 1 100%;
background: transparent;
border: 1px solid #cbd5e1;
color: #334155;
font-size: 14px;
padding: 8px 16px;
}
/* woocommerce-simple-auctions' own "Place a Bid" form (auction-bid-form.php,
rendered via woocommerce_auction_bid_form()).
Its default markup is a bare +/- pair, a plain qty
text field, and a submit button that otherwise falls into the generic
catch-all button rule above (full-width, unstyled, dropped onto its own
row). Restyled to the same bordered #469BC2/square-corner language as the
add-to-cart controls above, with the Bid button sitting directly beside
the bid-amount stepper instead of below it. `.auction_form.cart` still
gets the shared `form.cart` flex/gap rules above -- only what needs to
differ (stretch alignment, the stepper's own layout, and un-doing the
catch-all button rule) is redeclared here. */
.auction_form.cart {
align-items: stretch;
}
.auction_form.cart .quantity.buttons_added {
order: 0;
flex: 1 1 220px;
display: flex;
align-items: stretch;
height: 50px;
margin: 0;
border: 1px solid #469BC2;
overflow: hidden;
}
.auction_form.cart .quantity.buttons_added .minus-bid,
.auction_form.cart .quantity.buttons_added .plus-bid {
flex: 0 0 42px;
-webkit-appearance: none;
appearance: none;
border: none;
background: #fff;
color: #469BC2;
font-size: 18px;
font-weight: 700;
line-height: 1;
box-shadow: none;
cursor: pointer;
}
.auction_form.cart .quantity.buttons_added .minus-bid:hover,
.auction_form.cart .quantity.buttons_added .plus-bid:hover {
background: #f5fbff;
}
.auction_form.cart .quantity.buttons_added .qty.bid {
flex: 1 1 auto;
width: auto !important;
height: 100%;
border: none;
border-left: 1px solid #469BC2;
border-right: 1px solid #469BC2;
border-radius: 0;
text-align: center;
font-size: 16px;
font-weight: 500;
color: rgba(22, 22, 29, .7);
box-shadow: none;
}
.auction_form.cart .quantity.buttons_added .qty.bid:focus {
outline: none;
}
form.auction_form.cart button.bid_button {
order: 1;
flex: 1 1 140px;
min-width: 140px;
height: 50px;
padding: 0 24px;
background-color: #1997D1 !important;
border: 1px solid #469BC2 !important;
border-radius: 0;
color: #fff !important;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background-color .2s ease;
}
form.auction_form.cart button.bid_button:hover {
background-color: #158bbd !important;
}
/* woocommerce-simple-auctions' own instant-purchase form for an auction
product (single-product/add-to-cart/auction.php, `