/* Mister Berry — storefront styles */
.search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid #e5e0da; border-top: 0;
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 20px rgba(0,0,0,.12);
  max-height: 420px; overflow-y: auto;
}
.search-results a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  text-decoration: none; color: inherit; border-bottom: 1px solid #f0eeec;
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover { background: #faf6f7; }
.search-results img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  flex: 0 0 40px;
}
.search-results span { font-size: 13.5px; }
.search-results .sr-price { margin-left: auto; flex: 0 0 auto; color: #d63384; font-weight: 600; }

:root {
  --brand: #d63384;
  --brand-dark: #a61e64;
  --ink: #2b2b2b;
  --muted: #777;
  --line: #e8e8e8;
  --bg-soft: #faf6f8;
  --whatsapp: #25d366;
}

/* NOTE: no global element resets here — the original theme CSS (theme.css)
   owns base typography, links, header/footer and .container. This file only
   styles the app's own functional pages via its own class names. */

/* ---------- Buttons (fallback only where theme CSS lacks coverage; the
   theme's own .btn/.button styling wins when present) ---------- */
.btn-whatsapp { display: inline-block; background: var(--whatsapp) !important; color: #fff !important; padding: 12px 26px; border-radius: 6px; font-weight: 600; }
.btn-whatsapp:hover { background: #1da851 !important; }
.mb-btn, a.mb-btn { display: inline-block; background: var(--brand); color: #fff; border: 0; cursor: pointer; padding: 11px 26px; font-size: 15px; font-weight: 600; }
.mb-btn:hover { background: var(--brand-dark); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Sections ---------- */
.section { padding: 44px 16px; }
.section-title { font-size: 26px; margin-bottom: 24px; text-align: center; }
.section-more { text-align: center; margin-top: 24px; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.category-tile { background: var(--bg-soft); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; transition: transform .15s; }
.category-tile:hover { transform: translateY(-3px); }
.category-name { font-weight: 700; color: var(--ink); }
.category-count { color: var(--muted); font-size: 13px; }

/* ---------- Product grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.product-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: box-shadow .2s; display: flex; flex-direction: column; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.product-card-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-soft); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.img-placeholder { display: flex; align-items: center; justify-content: center; font-size: 48px; height: 100%; }
.img-placeholder.big { font-size: 120px; aspect-ratio: 1; background: var(--bg-soft); border-radius: 12px; }
.badge-sale { position: absolute; top: 10px; left: 10px; background: var(--brand); color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.product-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card-title { font-size: 15px; font-weight: 600; }
.product-card-title a { color: var(--ink); }
.product-card-price { color: var(--brand); font-weight: 700; }
.product-card-price del { color: var(--muted); font-weight: 400; margin-right: 6px; }
.product-card-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Shop layout ---------- */
.page-header { padding: 24px 0 8px; }
.page-header h1 { font-size: 30px; }
.result-count { color: var(--muted); font-size: 14px; }
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 16px 0 48px; }
.shop-sidebar h3 { margin-bottom: 12px; }
.cat-list li { border-bottom: 1px solid var(--line); }
.cat-list a { display: block; padding: 8px 4px; color: var(--ink); font-size: 14px; }
.cat-list a span { color: var(--muted); font-size: 12px; }
.cat-list li.active a { color: var(--brand); font-weight: 700; }
.shop-toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.orderby { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin: 32px 0; flex-wrap: wrap; }
.page-num { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.page-num.current { background: var(--brand); color: #fff; border-color: var(--brand); }

.breadcrumb { font-size: 13px; color: var(--muted); padding: 16px 0 4px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }

/* ---------- Product page ---------- */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 20px 0; }
.product-gallery img#main-product-img { border-radius: 12px; width: 100%; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumbs .thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.gallery-thumbs .thumb.active { border-color: var(--brand); }
.product-info h1 { font-size: 28px; margin-bottom: 10px; }
.product-price { font-size: 26px; color: var(--brand); font-weight: 800; margin-bottom: 8px; }
.product-price del { color: var(--muted); font-weight: 400; font-size: 18px; margin-right: 8px; }
.product-price ins { text-decoration: none; }
.stock { font-size: 14px; margin-bottom: 14px; }
.in-stock { color: #1a9c46; }
.out-of-stock { color: #cc2b2b; }
.product-excerpt { color: var(--muted); margin-bottom: 18px; }
.option-row { margin-bottom: 14px; }
.option-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.option-row select, .option-row input { width: 100%; max-width: 340px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.product-actions { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.product-meta { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.product-description { padding: 24px 0; border-top: 1px solid var(--line); }
.product-description h2 { margin-bottom: 12px; }

/* ---------- Cart ---------- */
.cart-page { padding: 24px 16px 48px; }
.cart-page h1 { margin-bottom: 20px; }
.cart-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; padding: 10px; border-bottom: 2px solid var(--line); font-size: 13px; text-transform: uppercase; color: var(--muted); }
.cart-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cart-qty { width: 64px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; text-align: center; }
/* scoped + neutralised against the theme's global button/input styling, same
   pattern as the cross-sell cards' .cs-qtybox below */
.cart-qtybox { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: #fff; }
.cart-qtybox .cart-qty { -webkit-appearance: none; appearance: none; width: 36px; border: none; border-radius: 0; padding: 0; height: 34px; background: none; }
.cart-qtybox .cart-qty:focus { outline: none; }
.cart-qtybox button { -webkit-appearance: none; appearance: none; border: none; background: none; width: 30px; height: 34px;
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0; margin: 0; box-shadow: none; }
.cart-qtybox button:hover { background: #faf0f2; color: #cb4550; }

/* mobile: stacked card rows, centered product image, no horizontal scroll */
@media (max-width: 767px) {
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr {
    border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
    position: relative;
  }
  .cart-table td { border-bottom: 0; padding: 4px 0; }
  .cart-img { display: block; text-align: center; padding: 0 0 10px !important; }
  .cart-img img { width: 96px; height: 96px; margin: 0 auto; }
  .cart-name { font-weight: 600; padding-right: 34px !important; }
  .cart-table td[data-label]::before {
    content: attr(data-label); font-weight: 600; font-size: 11px; text-transform: uppercase;
    color: var(--muted); margin-right: 8px;
  }
  .cart-table td[data-label] { display: flex; align-items: center; justify-content: space-between; }
  .cart-remove-cell { position: absolute; top: 10px; right: 12px; padding: 0 !important; width: auto; }
}
.cart-remove { background: none; border: 0; font-size: 22px; color: #cc2b2b; cursor: pointer; }
.cart-summary { background: var(--bg-soft); border-radius: 12px; padding: 22px; }
.cart-summary h3 { margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; font-weight: 700; padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.cart-summary .note { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.cart-empty { text-align: center; padding: 60px 0; }
.cart-empty p { margin-bottom: 16px; color: var(--muted); }

/* ---------- Checkout ---------- */
.checkout-page { padding: 24px 16px 48px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; }
.checkout-form h3 { margin: 22px 0 12px; font-size: 18px; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.form-row label .req { color: #cc2b2b; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.form-row textarea { min-height: 80px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.order-review { background: var(--bg-soft); border-radius: 12px; padding: 22px; }
.order-review h3 { margin-bottom: 14px; }
.review-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.review-line.total { font-weight: 800; font-size: 16px; border-bottom: 0; }
.review-item-opts { font-size: 12px; color: var(--muted); }
.field-error { color: #cc2b2b; font-size: 12px; margin-top: 3px; }
.form-error-box { background: #fdecec; color: #a33; border: 1px solid #f5c2c2; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }

/* ---------- Account ---------- */
.account-page { padding: 24px 16px 48px; }
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.account-nav li a { display: block; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.account-nav li a:hover, .account-nav li.active a { color: var(--brand); }
.auth-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; }
.auth-form { border: 1px solid var(--line); border-radius: 12px; padding: 26px; }
.auth-form h2 { margin-bottom: 16px; }
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th, .orders-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.status-pill { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; background: var(--bg-soft); }
.status-completed { background: #e2f6e9; color: #1a9c46; }
.status-processing { background: #e7f0fd; color: #2463c4; }
.status-pending, .status-on-hold { background: #fdf3e2; color: #b07817; }
.status-cancelled, .status-failed { background: #fdecec; color: #a33; }

/* ---------- Blog ---------- */
.blog-page { padding: 24px 16px 48px; }
.blog-page h1 { margin-bottom: 24px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.blog-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* only the cover thumb — never meta avatars */
.blog-card .blog-card-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-card .blog-card-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.blog-card-body { padding: 18px; }
.blog-card h2 { font-size: 18px; margin-bottom: 6px; }
.blog-card h2 a { color: var(--ink); }
.blog-card time { font-size: 12px; color: var(--muted); }
.blog-card p { font-size: 14px; color: var(--muted); margin: 8px 0; }
.read-more { font-weight: 600; font-size: 14px; }
.post-hero { border-radius: 12px; margin: 16px 0; }
.blog-single time { color: var(--muted); font-size: 14px; }

/* ---------- Content pages ---------- */
.content-page { padding: 8px 16px 48px; max-width: 860px; }
.content-page h1 { margin-bottom: 18px; }
.entry-content p { margin-bottom: 14px; }
.entry-content h2, .entry-content h3 { margin: 22px 0 10px; }
.entry-content ul, .entry-content ol { margin: 0 0 14px 22px; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content img { border-radius: 10px; margin: 12px 0; }

/* ---------- Misc ---------- */
.error-page { text-align: center; padding: 80px 16px; }
.error-page h1 { font-size: 90px; color: var(--brand); }
.error-page p { margin-bottom: 20px; color: var(--muted); }
.error-page .btn { margin: 0 6px; }

.toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 10px; z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 14px; }
.toast.success { background: #1a9c46; }
.toast.error { background: #cc2b2b; }

#app.loading { opacity: .4; pointer-events: none; transition: opacity .15s; }

/* ---------- Footer ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; }
  .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding-left: 16px; }
  .mobile-toggle { display: block; }
  .header-search input { width: 120px; }
  .product-layout, .cart-layout, .checkout-layout, .shop-layout, .account-layout, .auth-forms { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .form-2col { grid-template-columns: 1fr; }
}

/* ---------- Theme-parity fallbacks (only fill gaps; match live design) ---------- */
/* Woodmart lazy-load blur is removed by theme JS we don't run — show images crisp */
img.wd-lazy-load, img.wd-lazy-blur { filter: none !important; opacity: 1 !important; }

/* Footer: 4 columns like live (bootstrap-style classes from the theme markup) */
.footer-container .row { display: flex; flex-wrap: wrap; }
.footer-column { padding: 0 15px; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
@media (max-width: 991px) { .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-3 { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 575px) { .col-12 { flex: 0 0 100%; max-width: 100%; } .col-lg-3, .col-sm-6 { flex: 0 0 100%; max-width: 100%; } }

/* Footer bottom (copyright) centered like live */
.copyrights-wrapper.copyrights-centered { text-align: center; }
.copyrights-wrapper.copyrights-centered .wd-grid, 
.copyrights-wrapper .container { justify-content: center; text-align: center; }

/* Topbar phone/mail: icon + text on one line, vertically centered */
.whb-top-bar .wd-header-text { display: flex; align-items: center; }
.whb-top-bar .wd-header-text img { display: inline-block; vertical-align: middle; }
.whb-top-bar .wd-header-text a { display: inline-flex; align-items: center; gap: 6px; }

/* Header logo: live uses inline max-width:160px on the img itself — don't constrain further */
.whb-header .wd-logo img { width: auto; }

/* ---------- Login/Register modal (collapse-style popup) ---------- */
.mb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10000; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; }
.mb-modal-overlay.open { display: flex; }
.mb-modal { background: #fff; border-radius: 10px; max-width: 480px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: mbModalIn .25s ease; position: relative; }
@keyframes mbModalIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.mb-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #888; z-index: 2; }
.mb-modal-close:hover { color: var(--brand, #d63384); }
.mb-modal-body { padding: 30px 28px; }
.mb-modal-body .page-title { display: none; }
.mb-modal-tabs { display: flex; border-bottom: 1px solid #eee; margin-bottom: 22px; }
.mb-modal-tab { flex: 1; text-align: center; padding: 12px; font-weight: 700; cursor: pointer; color: #888; border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; font-size: 15px; }
.mb-modal-tab.active { color: var(--brand, #d63384); border-bottom-color: var(--brand, #d63384); }
.mb-modal-pane { display: none; }
.mb-modal-pane.active { display: block; }
.mb-modal-loading { text-align: center; padding: 30px; color: #888; }

/* Wishlist heart button on product cards (functional wishlist system) */
.product-grid-item .product-element-top { position: relative; }
.mb-wish-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: #e11d63;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .15s, background .15s;
}
.mb-wish-btn:hover { transform: scale(1.12); }
.mb-wish-btn.active { background: #e11d63; color: #fff; }
.mb-wish-btn.active svg { fill: #fff; }

/* ===== Single product: only what the used-CSS bundle doesn't cover ===== */
/* main image — compact square box, whole image shown (no crop) */
.single-product-page .woocommerce-product-gallery__wrapper{position:relative;overflow:hidden;cursor:zoom-in;margin:0;
  width:100%;max-width:420px;aspect-ratio:1;border:1px solid #f0e7e9;border-radius:14px;background:#faf6f7;
  display:flex;align-items:center;justify-content:center}
.single-product-page .woocommerce-product-gallery__image{width:100%;height:100%}
.single-product-page .woocommerce-product-gallery__image a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.single-product-page #main-product-img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  object-fit:contain;transition:transform .18s ease-out;transform-origin:center center}
.single-product-page .woocommerce-product-gallery__wrapper.zooming #main-product-img{transform:scale(2)}
.single-product-page .img-placeholder.big{font-size:96px;display:grid;place-items:center}
/* share buttons (inline SVG — theme icon font isn't loaded here) */
.mb-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.mb-share-label{font-weight:600;font-size:13px;color:#7a6b70;margin-right:2px}
.mb-share-icon{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#f4eef0;color:var(--c,#cb4550);transition:background .15s,color .15s,transform .15s}
.mb-share-icon svg{width:17px;height:17px}
.mb-share-icon:hover{background:var(--c,#cb4550);color:#fff;transform:translateY(-2px)}
/* gallery thumbnails — horizontal strip BELOW the large image */
.single-product-page .wd-thumbs-bottom{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.single-product-page .wd-thumbs-bottom .wd-gthumb{flex:0 0 auto;width:78px;height:78px;padding:0;
  border:2px solid #ececec;border-radius:8px;overflow:hidden;cursor:pointer;background:#fff}
.single-product-page .wd-thumbs-bottom .wd-gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.single-product-page .wd-thumbs-bottom .wd-gthumb.active,
.single-product-page .wd-thumbs-bottom .wd-gthumb:hover{border-color:#cb4550}
@media(max-width:782px){.single-product-page .wd-thumbs-bottom{flex-wrap:nowrap;overflow-x:auto}}
/* our custom cake-option selects (fallback styling) */
.single-product-page [class$="-field"]{margin-bottom:14px}
.single-product-page [class$="-field"]>label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
/* accordion tabs via <details> */
.single-product-page .wd-accordion-item{border-bottom:1px solid #ececec}
.single-product-page .wd-accordion-title{list-style:none;cursor:pointer;padding:18px 4px;font-size:18px;font-weight:700;position:relative}
.single-product-page .wd-accordion-title::-webkit-details-marker{display:none}
.single-product-page .wd-accordion-title::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#cb4550;font-size:22px}
.single-product-page .wd-accordion-item[open] .wd-accordion-title::after{content:"\2013"}
/* our <details> accordion — smooth height animation (JS-driven), overriding the
   theme's product.css (.wd-accordion-content{display:none}, needs a .wd-active
   class its JS never adds) and the product_cat-flower rule hiding items 2-4. */
.single-product-page .wd-accordion-item{display:block!important}
.single-product-page .wd-accordion-content{display:block!important;opacity:1!important;line-height:1.7;
  max-height:0;overflow:hidden;padding:0 4px;transition:max-height .32s ease,padding .32s ease}
.single-product-page .wd-accordion-item[open] .wd-accordion-content{padding:4px 4px 26px}
/* ask on whatsapp button */
.wd-ask-price{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:11px 22px;border-radius:8px;font-weight:600;text-decoration:none;margin-top:14px}
.wd-ask-price:hover{filter:brightness(1.05);color:#fff}

/* ===== Interactive product cards + scroll-reveal (additive, keeps Woodmart layout) ===== */
.products .product-grid-item{transition:opacity .32s ease, transform .42s cubic-bezier(.2,.9,.3,1.35)}
.products .product-grid-item .product-wrapper{transition:box-shadow .28s ease, transform .28s ease; border-radius:14px; padding-bottom:6px}
.products .product-grid-item:hover .product-wrapper{box-shadow:0 18px 38px rgba(51,39,42,.14); transform:translateY(-6px)}
.products .product-grid-item .product-image-link{display:block; overflow:hidden; border-radius:12px}
.products .product-grid-item .product-image-link img{transition:transform .55s cubic-bezier(.2,.8,.25,1); will-change:transform}
.products .product-grid-item:hover .product-image-link img{transform:scale(1.09)}
.products .product-grid-item .wd-entities-title a{transition:color .18s}
.products .product-grid-item:hover .wd-entities-title a{color:#cb4550}
.products .product-grid-item .onsale{transition:transform .2s}
.products .product-grid-item:hover .onsale{transform:scale(1.06)}
/* scroll reveal — hidden state only added by JS, so no-JS shows everything */
.products .product-grid-item.mb-reveal{opacity:0; transform:scale(.6); transform-origin:center center}
.products .product-grid-item.mb-reveal.mb-in{opacity:1; transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .products .product-grid-item.mb-reveal{opacity:1!important;transform:none!important}
  .products .product-grid-item .product-image-link img{transition:none}
}

/* ===== Fix Woodmart lazy-blur flicker (theme lazy JS doesn't finish in this clone) ===== */
img.wd-lazy-load, img.wd-lazy-blur, .wd-lazy-load, .wd-lazy-blur{
  filter:none!important; opacity:1!important; animation:none!important; transition:none!important;
  transform:none!important; background:none!important;
}

/* ===== Clean navigation-focused footer (docs/Technical-issues requirement) ===== */
.mb-footer-clean{padding:44px 0 20px}
.mb-foot-brand img{margin-bottom:14px}
.mb-foot-brand p{color:#8a8078;font-size:13.5px;line-height:1.6;margin:0 0 14px}
.mb-foot-rating{display:flex;align-items:center;gap:6px;font-size:13px;color:#8a8078;margin-bottom:16px}
.mb-foot-stars{color:#fbbc05;letter-spacing:1px}
.mb-foot-rating strong{color:#cec7c3}
.mb-foot-social{display:flex;gap:10px}
.mb-foot-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .15s}
.mb-foot-social a:hover{background:#cb4550}
.mb-foot-social img{width:34px;height:34px}
.mb-foot-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 18px;color:inherit}
.mb-foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.mb-foot-list a{color:inherit;opacity:.78;font-size:13.5px;text-decoration:none;transition:opacity .15s,color .15s}
.mb-foot-list a:hover{opacity:1;color:#cb4550}
.mb-foot-locations li{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.mb-foot-locations strong{font-size:13.5px}
.mb-foot-locations span{font-size:12.5px;opacity:.72;line-height:1.5}
.mb-foot-locations a{font-size:13px;color:#cb4550!important;opacity:1;font-weight:600}

/* ---------- category title band with CMS feature-image background ---------- */
.mb-title-bg{background-size:cover;background-position:center;position:relative}
.mb-title-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(28,14,18,.45),rgba(28,14,18,.55))}
.mb-title-bg .container{position:relative;z-index:1}
.mb-title-bg .entry-title{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.mb-title-bg .woocommerce-breadcrumb,.mb-title-bg .woocommerce-breadcrumb a,
.mb-title-bg .woocommerce-breadcrumb .breadcrumb-last{color:#fff!important;opacity:.92}
/* breadcrumb inside a centered title band */
.page-title .woocommerce-breadcrumb{justify-content:center;display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

/* ---------- breadcrumbs always on their own line, under the title ---------- */
.page-title .entry-title{display:block}
.page-title .woocommerce-breadcrumb{display:flex!important;width:100%;flex-wrap:wrap;justify-content:center;gap:4px;margin:8px 0 0}
.summary .woocommerce-breadcrumb{display:flex!important;width:100%;flex-wrap:wrap;gap:4px;margin:2px 0 12px}
.blog-single .woocommerce-breadcrumb{display:flex!important;width:100%;flex-wrap:wrap;gap:4px;margin:4px 0 14px}
.content-page > .breadcrumb, .content-page h1 + .breadcrumb{display:flex;width:100%;flex-wrap:wrap;gap:4px;margin:4px 0 16px}

/* ---------- numbered pagination (CMS: no infinite scroll) ---------- */
.pagination.wd-pagination{display:flex;gap:6px;justify-content:center;align-items:center;margin:34px 0;flex-wrap:wrap}
.pagination .page-num{min-width:40px;text-align:center;padding:9px 13px;border:1px solid var(--line);border-radius:9px;
  color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.pagination .page-num:hover{background:#fbeaef;border-color:#e7b7c2;color:#b23a55}
.pagination .page-num.current{background:#cb4550;color:#fff;border-color:#cb4550}
.pagination .page-nav{font-size:18px;line-height:1;padding:8px 14px}
.pagination .page-dots{padding:0 4px;color:#9a8f92}

/* ---------- product cards: uniform square images everywhere ---------- */
.product-grid-item .product-image-link img{
  width:100%!important;aspect-ratio:1/1;height:auto!important;object-fit:cover;display:block}
.product-grid-item .product-image-link .img-placeholder{
  display:grid;place-items:center;aspect-ratio:1/1;width:100%;font-size:56px;background:#faf6f7}

/* ============ slide-in mini-cart drawer ============ */
.mb-cart-overlay{position:fixed;inset:0;background:rgba(30,20,24,.42);opacity:0;z-index:100000;
  transition:opacity .3s ease}
.mb-cart-overlay.open{opacity:1}
.mb-cart-drawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:#fff;
  z-index:100001;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:-10px 0 40px rgba(51,39,42,.18)}
.mb-cart-drawer.open{transform:translateX(0)}
.mb-cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid #f0e6e8;flex:0 0 auto}
.mb-cart-head h2{margin:0;font-size:18px;font-weight:800;color:#33272a}
.mb-cart-head-count{color:#cb4550;font-weight:700}
.mb-cart-close{border:none;background:none;font-size:30px;line-height:1;color:#9a8f92;cursor:pointer;padding:0 4px}
.mb-cart-close:hover{color:#cb4550}
.mb-cart-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 20px}
.mb-cart-loading{padding:40px 0;text-align:center;color:#9a8f92}
.mb-cart-empty{padding:50px 20px;text-align:center;color:#9a8f92;display:flex;flex-direction:column;align-items:center;gap:14px}
.mb-cart-empty svg{color:#e0cdd2}
.mb-cart-shop{display:inline-block;background:linear-gradient(135deg,#cb4550,#e05a6d);color:#fff;
  font-weight:700;padding:11px 24px;border-radius:40px;text-decoration:none}
.mb-cart-line{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid #f4ecee;position:relative}
.mb-cart-thumb{flex:0 0 64px;width:64px;height:64px;border-radius:10px;overflow:hidden;background:#faf6f7;display:block}
.mb-cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mb-cart-info{flex:1 1 auto;min-width:0;padding-right:18px}
.mb-cart-title{display:block;font-size:14px;font-weight:700;color:#33272a;text-decoration:none;line-height:1.3}
.mb-cart-title:hover{color:#cb4550}
.mb-cart-opts{margin:4px 0 0;display:flex;flex-direction:column;gap:1px}
.mb-cart-opts span{font-size:11.5px;color:#9a8f92}
.mb-cart-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.mb-cart-qtybox{display:inline-flex;align-items:center;border:1px solid #e6dcdf;border-radius:30px;overflow:hidden}
.mb-cart-qtybox button{border:none;background:none;width:28px;height:30px;font-size:16px;cursor:pointer;color:#5a4b52}
.mb-cart-qtybox button:hover{background:#faf0f2;color:#cb4550}
.mb-cart-qty{width:34px;height:30px;border:none;text-align:center;font-size:13.5px;color:#33272a;padding:0}
.mb-cart-qty:focus{outline:none}
.mb-cart-price{font-size:14px;font-weight:800;color:#33272a;white-space:nowrap}
.mb-cart-del{position:absolute;top:14px;right:0;border:none;background:none;font-size:20px;line-height:1;
  color:#c7b9bd;cursor:pointer;padding:0 2px}
.mb-cart-del:hover{color:#cb4550}
.mb-cart-foot{flex:0 0 auto;border-top:1px solid #f0e6e8;padding:16px 20px 20px}
/* the theme bundle overrides the UA [hidden]{display:none} rule, leaving
   hidden footers/summaries visible — restore it for our own components */
.mb-cart-foot[hidden],.mb-acc-summary[hidden],.mb-cart-overlay[hidden]{display:none!important}
.mb-cart-subtotal{display:flex;align-items:center;justify-content:space-between;font-size:15px;color:#33272a}
.mb-cart-subtotal strong{font-size:19px;font-weight:800}
.mb-cart-note{margin:4px 0 12px;font-size:11.5px;color:#9a8f92}
.mb-cart-checkout{display:block;text-align:center;background:linear-gradient(135deg,#cb4550,#e05a6d);color:#fff;
  font-weight:700;font-size:15px;padding:14px;border-radius:40px;text-decoration:none;
  box-shadow:0 8px 20px rgba(203,69,80,.3);transition:transform .18s,box-shadow .18s}
.mb-cart-checkout:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(203,69,80,.4)}
.mb-cart-viewcart{display:block;text-align:center;margin-top:10px;font-size:13.5px;font-weight:600;
  color:#9a8f92;text-decoration:none}
.mb-cart-viewcart:hover{color:#cb4550}
@media(max-width:480px){
  .mb-cart-drawer{width:100%;max-width:100%}
  .mb-cart-head h2{font-size:16px}
}

/* ============ Mobile / responsive polish ============ */

/* Top bar on mobile: phone on the LEFT, nav (About/Contact) on the RIGHT.
   (Theme hides the bar + its columns via .whb-visible-lg — reveal both.) */
@media(max-width:1024px){
  .whb-top-bar.whb-hidden-mobile{display:block!important;background:var(--brand)!important}
  .whb-top-bar .whb-top-bar-inner{display:flex!important;align-items:center;justify-content:space-between;
    gap:10px;padding:7px 14px;flex-wrap:nowrap}
  .whb-top-bar,.whb-top-bar a,.whb-top-bar .wd-header-text,.whb-top-bar .nav-link-text{color:#fff!important}
  .whb-top-bar .whb-col-center,.whb-top-bar .whb-empty-column{display:none!important}
  /* left = phone only (hide the mailto line) */
  .whb-top-bar .whb-col-left.whb-visible-lg{display:flex!important;align-items:center;min-width:0;flex:1 1 auto;padding:0!important}
  .whb-top-bar .whb-col-left .wd-header-text{margin:0!important;padding:0!important;min-width:0}
  .whb-top-bar .whb-col-left .wd-header-text:has(a[href^="mailto:"]){display:none!important}
  .whb-top-bar .whb-col-left .wd-header-text a{font-size:12px!important;display:block;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* right = top-bar nav links */
  .whb-top-bar .whb-col-right.whb-visible-lg{display:flex!important;align-items:center;flex:0 0 auto;padding:0!important}
  .whb-top-bar .whb-col-right .wd-nav{display:flex!important;flex-direction:row;gap:14px;margin:0;padding:0}
  .whb-top-bar .whb-col-right .wd-nav > li{margin:0!important;padding:0!important}
  /* keep only the first two links (About Us, Contact Us) — drop the rest */
  .whb-top-bar .whb-col-right .wd-nav > li:nth-child(n+3){display:none!important}
  .whb-top-bar .whb-col-right .wd-nav a{font-size:12px!important;padding:0!important;white-space:nowrap}
  .whb-top-bar .whb-col-right .wd-nav .sub-menu,
  .whb-top-bar .whb-col-right .wd-dropdown,
  .whb-top-bar .whb-col-right .wd-nav-arrow{display:none!important}
}
@media(max-width:400px){
  .whb-top-bar .whb-col-left .wd-header-text a,
  .whb-top-bar .whb-col-right .wd-nav a{font-size:11px!important}
  .whb-top-bar .whb-col-right .wd-nav{gap:10px}
}

/* Global: never let a page scroll/crop sideways on mobile */
@media(max-width:991px){
  html,body{overflow-x:hidden;max-width:100%}
  .website-wrapper,.main-page-wrapper,#app,.main-page-wrapper > main{overflow-x:clip;max-width:100%}
  .container{max-width:100%}
}

/* Product grids: always 2-up on phones (never 1-up), compact card */
@media(max-width:575px){
  .products .product-grid-item,
  .products .product-grid-item.col-6,
  .products .product-grid-item.col-lg-3,
  .products .product-grid-item.col-sm-6,
  .mb-hs-track .product-grid-item{flex:0 0 50%!important;max-width:50%!important}
  .products.wd-spacing-20{--wd-col-gap:10px}
  .products .product-grid-item .product-wrapper{padding-bottom:6px;border-radius:12px;margin:0 6px 12px}
  .product-grid-item .wd-entities-title{font-size:12.5px;line-height:1.3;margin:8px 6px 2px}
  .product-grid-item .wd-entities-title a{font-size:12.5px}
  .product-grid-item .price{font-size:13px;padding:0 6px}
  .product-grid-item .price .woocommerce-Price-currencySymbol{font-size:11px}
  .product-grid-item .wd-add-btn a,.product-grid-item .add-to-cart-loop{font-size:11px;padding:7px 10px}
  .product-grid-item .mb-wish-btn{width:30px;height:30px}
  .product-grid-item .product-label.onsale{font-size:10px;padding:2px 7px}
}

/* Single product page: clean, stacked, user-friendly on mobile */
/* Single product page — on mobile, drop the Bootstrap grid entirely and lay
   the whole thing out as one clean full-width column with a real side gap.
   (The nested .row negative margins were pulling content off the left edge.) */
@media(max-width:991px){
  /* real breathing room on the sides */
  .single-product-page{overflow-x:clip}
  .content-layout-wrapper.row{margin-left:0!important;margin-right:0!important}
  .single-product-page .row{margin-left:0!important;margin-right:0!important}
  .site-content.shop-content-area{padding-left:0!important;padding-right:0!important}
  .single-product-page [class*="col-"]{
    flex:0 0 100%!important;max-width:100%!important;width:100%!important;
    padding-left:0!important;padding-right:0!important}
  .single-product-page .product-image-summary-inner{display:flex;flex-direction:column;row-gap:22px}
  .single-product-page img{max-width:100%;height:auto}
  .single-product-page .wd-gallery-thumbs,.single-product-page .woocommerce-tabs,
  .single-product-page .summary-inner{max-width:100%}
}
@media(max-width:767px){
  /* the outer container provides the left/right gap */
  .single-product-page{margin:0 auto}
  body:has(.single-product-page) .main-page-wrapper > main > .container,
  .container:has(.single-product-page){padding-left:16px!important;padding-right:16px!important}
  .single-product-page .product-images-inner{max-width:460px;margin:0 auto}
  .single-product-page .woocommerce-product-gallery__image img{border-radius:14px}
  .single-product-page .wd-gallery-thumbs{gap:8px;flex-wrap:wrap;justify-content:center}
  .single-product-page .wd-gallery-thumbs .wd-gthumb{width:62px;height:62px;flex:0 0 auto;padding:0;border-radius:8px;overflow:hidden}
  .single-product-page .wd-gallery-thumbs .wd-gthumb img{width:100%;height:100%;object-fit:cover}
  .single-product-page .summary{text-align:left}
  .single-product-page .summary .product_title,.single-product-page .summary h1{font-size:23px;line-height:1.25}
  .single-product-page .summary .mb-price{font-size:20px}
  .single-product-page form.cart,.single-product-page .single_variation_wrap,
  .single-product-page .woocommerce-variation-add-to-cart{width:100%}
  .single-product-page .single_add_to_cart_button{width:100%;justify-content:center;padding:14px;font-size:15px}
  .single-product-page .quantity{margin:0 0 10px}
  .single-product-page .variations,.single-product-page .variations tbody,
  .single-product-page .variations tr,.single-product-page .variations td,
  .single-product-page .variations th{display:block;width:100%;text-align:left}
  .single-product-page .mb-copt select,.single-product-page .mb-copt input[type=text],
  .single-product-page select,.single-product-page input[type=text]{font-size:16px;max-width:100%} /* no iOS zoom */
  .single-product-page .wd-accordion-title{font-size:15px}
  .single-product-page .mb-share-icons{flex-wrap:wrap}
  /* review form: keep name/email boxes inside the screen, full width, no crop */
  .single-product-page #reviews{margin:0!important;flex-direction:column}
  .single-product-page #reviews .col-lg-6{padding:0!important}
  .single-product-page #review_form_wrapper,.single-product-page .comment-form,
  .single-product-page .comment-form-author-email{width:100%;max-width:100%}
  .single-product-page .comment-form-author-email{display:grid!important;grid-template-columns:1fr;gap:12px;margin-left:10px}
  .single-product-page .comment-form input,.single-product-page .comment-form textarea,
  .single-product-page .comment-form select{box-sizing:border-box;width:100%;max-width:100%;font-size:16px}
  .single-product-page .comment-form p{margin-left:0;margin-right:0}
}
@media(max-width:480px){
  .single-product-page .summary .product_title,.single-product-page .summary h1{font-size:20px}
  .single-product-page .summary .mb-price{font-size:18px}
  .single-product-page .wd-gallery-thumbs .wd-gthumb{width:54px;height:54px}
}

/* Single product price — own class (not WooCommerce's ".price"). The theme's
   JS/CSS hooks ".price" broadly (variation form, sticky bar, quick-view,
   hide-larger-price…) and was hiding/emptying it after load; escaping the
   class name the same way we escaped .cart/.variations avoids all of that. */
.mb-price{display:block!important;visibility:visible!important;opacity:1!important;
  margin:14px 0 4px;font-size:26px;font-weight:800;color:#cb4550;line-height:1.2}
.mb-price-was{display:inline-block;color:#9a8f92;font-weight:400;font-size:17px;
  text-decoration:line-through;margin-right:10px}
.mb-price-now{display:inline-block!important}

/* ============ "added to cart" popup ============ */
.mb-added-pop{position:fixed;top:22px;left:50%;z-index:100001;display:flex;align-items:center;gap:13px;
  padding:13px 20px 13px 15px;background:#fff;border-radius:14px;border:1px solid #eef0f2;
  box-shadow:0 16px 44px rgba(30,25,28,.22);
  transform:translate(-50%,-24px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.2,.9,.25,1),opacity .3s ease}
.mb-added-pop.show{transform:translate(-50%,0) scale(1);opacity:1}
.mb-added-ring{flex:0 0 auto;width:38px;height:38px;display:block}
.mb-added-ring svg{width:38px;height:38px}
.mb-added-circle{fill:none;stroke:#2e9e5b;stroke-width:3;
  stroke-dasharray:150;stroke-dashoffset:150;transform-origin:50% 50%;transform:rotate(-90deg)}
.mb-added-tick{fill:none;stroke:#2e9e5b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40}
.mb-added-pop.animate .mb-added-circle{animation:mbAddedCircle .5s ease forwards}
.mb-added-pop.animate .mb-added-tick{animation:mbAddedTick .35s .32s ease forwards}
.mb-added-pop.animate .mb-added-ring{animation:mbAddedPulse .5s .3s ease}
@keyframes mbAddedCircle{to{stroke-dashoffset:0}}
@keyframes mbAddedTick{to{stroke-dashoffset:0}}
@keyframes mbAddedPulse{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.mb-added-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mb-added-txt strong{font-size:14.5px;font-weight:800;color:#26202a}
.mb-added-name{font-size:12.5px;color:#8a7c80;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-added-name:empty{display:none}
@media(max-width:600px){.mb-added-pop{top:14px;padding:11px 16px 11px 12px}.mb-added-name{max-width:150px}}
@media(prefers-color-scheme:dark){
  .mb-added-pop{background:#2a2430;border-color:#3a3340}
  .mb-added-txt strong{color:#f4eef0}.mb-added-name{color:#b8a9ae}
}

/* ============ accessories upsell modal ============ */
.mb-acc-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(40,25,30,.55);opacity:0;transition:opacity .25s ease}
.mb-acc-overlay[hidden]{display:none}
.mb-acc-overlay.open{opacity:1}
.mb-acc-modal{position:relative;width:100%;max-width:940px;max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(40,25,30,.35);
  transform:translateY(16px) scale(.98);transition:transform .25s ease}
.mb-acc-overlay.open .mb-acc-modal{transform:none}
.mb-acc-close{position:absolute;top:12px;right:14px;z-index:2;width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(0,0,0,.06);color:#33272a;font-size:22px;line-height:1;cursor:pointer;transition:background .2s}
.mb-acc-close:hover{background:rgba(0,0,0,.12)}

.mb-acc-head{padding:16px 46px 14px;text-align:center;background:linear-gradient(180deg,#fff5f6,#fff)}
.mb-acc-head h2{margin:0;font-size:17px;font-weight:800;color:#33272a;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tab bar: [‹] scrollable underline tabs [›] */
.mb-acc-tabsbar{display:flex;align-items:stretch;border-bottom:1px solid #f0e7e9;padding:0 6px}
.mb-acc-tabs{display:flex;gap:2px;overflow-x:auto;flex:1 1 auto;min-width:0;scrollbar-width:none;
  scroll-behavior:smooth}
.mb-acc-tabs::-webkit-scrollbar{display:none}
/* underline tab, not a filled button; never shrinks so all items stay readable */
.mb-acc-tab{flex:0 0 auto;border:0;background:none;color:#6d5f64;border-bottom:2px solid transparent;
  padding:11px 12px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:color .15s,border-color .15s}
.mb-acc-tab:hover{color:#cb4550}
.mb-acc-tab.active{color:#cb4550;border-bottom-color:#cb4550}
/* tab scroll arrows (shown only when the strip overflows) */
.mb-acc-tarrow{flex:0 0 auto;border:0;background:#fff;color:#cb4550;cursor:pointer;padding:0 6px;
  display:flex;align-items:center;justify-content:center}
.mb-acc-tarrow[hidden]{display:none!important}
.mb-acc-tprev{box-shadow:8px 0 8px -6px rgba(0,0,0,.12)}
.mb-acc-tnext{box-shadow:-8px 0 8px -6px rgba(0,0,0,.12)}

.mb-acc-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 20px;background:#fbf8f8}
.mb-acc-loading,.mb-acc-empty{padding:40px 10px;text-align:center;color:#9a8f92;font-size:14px}
.mb-acc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.mb-acc-card{display:flex;flex-direction:column;background:#fff;border:1px solid #f0e7e9;border-radius:10px;
  padding:7px;text-align:center;transition:box-shadow .2s,transform .2s}
.mb-acc-card:hover{box-shadow:0 8px 22px rgba(203,69,80,.12);transform:translateY(-2px)}
.mb-acc-thumb{width:100%;aspect-ratio:1/1;border-radius:7px;overflow:hidden;background:#faf3f4;
  display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.mb-acc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mb-acc-ph{font-size:26px;opacity:.5}
.mb-acc-name{font-size:11.5px;font-weight:600;color:#33272a;line-height:1.25;min-height:2.5em;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb-acc-price{font-size:12px;font-weight:800;color:#cb4550;margin:2px 0 6px}
.mb-acc-add{margin-top:auto;border:1px solid #cb4550;background:#fff;color:#cb4550;border-radius:7px;
  padding:6px 0;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s}
.mb-acc-add:hover{background:#cb4550;color:#fff}
.mb-acc-add.added{background:#e7f6ec;border-color:#bfe6cd;color:#2e9e5b;cursor:default}
.mb-acc-add:disabled{opacity:.7;cursor:default}

/* live cart breakdown — inline in the footer, aligned with the buttons */
.mb-acc-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:#6d5f64}
.mb-acc-sumpart b{color:#33272a;font-weight:700}
.mb-acc-sumsep{color:#d8c8cc}
.mb-acc-sumtotal{color:#33272a}
.mb-acc-sumtotal b{color:#cb4550;font-weight:800}

.mb-acc-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:14px 22px;border-top:1px solid #f0e7e9;background:#fff}
.mb-acc-actions{display:flex;gap:12px;align-items:center;flex:0 0 auto}
.mb-acc-skip{border:none;background:none;color:#8a7c80;font-size:13.5px;font-weight:600;cursor:pointer;
  text-decoration:underline}
.mb-acc-skip:hover{color:#33272a}
.mb-acc-continue{border:none;background:#cb4550;color:#fff;border-radius:10px;padding:12px 22px;
  font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.mb-acc-continue:hover{background:#b23a44}

@media(max-width:600px){
  .mb-acc-overlay{padding:0;align-items:flex-end}
  .mb-acc-modal{max-width:none;max-height:92vh;border-radius:18px 18px 0 0}
  .mb-acc-overlay.open .mb-acc-modal{transform:none}
  .mb-acc-modal{transform:translateY(30px)}
  .mb-acc-head{padding:14px 44px 12px 16px}
  /* smaller + wrap so the whole header shows (no ellipsis) on mobile */
  .mb-acc-head h2{font-size:14px;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip}
  .mb-acc-body{padding:12px 12px}
  .mb-acc-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .mb-acc-card{padding:5px;border-radius:9px}
  .mb-acc-thumb{margin-bottom:5px}
  .mb-acc-ph{font-size:22px}
  .mb-acc-name{font-size:10.5px;min-height:2.3em;line-height:1.2}
  .mb-acc-price{font-size:11px;margin:1px 0 5px}
  .mb-acc-add{padding:5px 0;font-size:11px;border-radius:6px}
  .mb-acc-continue{padding:11px 16px;font-size:13.5px}
  .mb-acc-foot{flex-direction:column;align-items:stretch;gap:10px}
  .mb-acc-summary{justify-content:center}
  .mb-acc-actions{justify-content:space-between}
}
@media(min-width:601px) and (max-width:820px){
  .mb-acc-grid{grid-template-columns:repeat(4,1fr)}
}

/* cart-drawer "make it extra special" opener */
.mb-cart-extra{display:block;width:100%;margin-bottom:10px;border:1px dashed #cb4550;background:#fff5f6;
  color:#cb4550;border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:background .2s}
.mb-cart-extra:hover{background:#fde7ea}

/* highlighted primary CTA (Proceed to Checkout / Payment) — brand bg + pulsing glow */
.mb-cta-pulse{background:linear-gradient(135deg,#cb4550,#e05a6d)!important;color:#fff!important;border:0!important;
  animation:mbCtaPulse 1.7s ease-in-out infinite}
.mb-cta-pulse:hover{background:linear-gradient(135deg,#b93c46,#d24f62)!important;color:#fff!important}
@keyframes mbCtaPulse{
  0%,100%{box-shadow:0 8px 20px rgba(203,69,80,.35),0 0 0 0 rgba(203,69,80,.5)}
  50%{box-shadow:0 12px 28px rgba(203,69,80,.5),0 0 0 12px rgba(203,69,80,0)}
}
.mb-cta-pulse:disabled{animation:none}
@media(prefers-reduced-motion:reduce){.mb-cta-pulse{animation:none}}

/* =========================================================================
   Sticky header — professional / attractive glossy polish
   In `whb-sticky-real` mode the theme fixes `.whb-main-header` and adds
   `whb-sticked` to the header (a `.whb-clone` is used for the scroll variant).
   Frost that fixed bar so page content blurs through it on scroll.
   ========================================================================= */
/* Frost must go on the fixed+transformed element itself. In hide-on-scroll
   mode that's the `.whb-clone`; in plain sticky-real mode it's `.whb-main-header`.
   (A transformed ancestor would empty the backdrop, so never target an inner row.) */
.whb-sticked .whb-main-header,
.whb-clone{
  background:rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:saturate(160%) blur(22px);
  backdrop-filter:saturate(160%) blur(22px);
  box-shadow:0 8px 30px rgba(51,39,42,.12)!important;
  border-bottom:1px solid rgba(255,255,255,.4);
}
/* inner rows must be translucent or they paint over the blur */
.whb-sticked .whb-general-header,
.whb-clone .whb-general-header{background:transparent!important}
.whb-sticked .whb-header-bottom,
.whb-clone .whb-header-bottom{background:rgba(203,69,80,.55)!important;box-shadow:none!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* compact logo while stuck for a tighter bar */
.whb-sticked .site-logo img,
.whb-clone .site-logo img{max-width:118px!important;transition:max-width .2s ease}
/* glossy: search pill goes translucent glass inside the sticky bar */
.whb-sticked .wd-header-search-form .searchform,
.whb-clone .wd-header-search-form .searchform{
  background:rgba(255,255,255,.30)!important;border-color:rgba(255,255,255,.5)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.whb-sticked .wd-header-search-form .searchform:focus-within,
.whb-clone .wd-header-search-form .searchform:focus-within{
  background:rgba(255,255,255,.9)!important;border-color:#cb4550!important}

/* --- Search: modern pill with brand submit + focus ring (both static + sticky) --- */
.wd-header-search-form .searchform{
  display:flex!important;align-items:stretch;background:#f6f1f2;border:1.5px solid #ece3e5;
  border-radius:30px;overflow:hidden;min-width:300px;box-shadow:none!important;
  transition:border-color .18s,box-shadow .18s,background .18s}
.wd-header-search-form .searchform:focus-within{
  border-color:#cb4550;background:#fff;box-shadow:0 0 0 3px rgba(203,69,80,.12)}
.wd-header-search-form .searchform .s{
  flex:1;min-width:0;border:0!important;height:44px!important;font-size:14px;color:#33272a;box-shadow:none!important;
  padding:0 18px 0 44px!important;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a99ea2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center!important}
.wd-header-search-form .searchform .s:focus{outline:none!important}
.wd-header-search-form .searchform .s::placeholder{color:#a99ea2}
.wd-header-search-form .searchform .searchsubmit{
  position:static!important;flex:0 0 auto;width:auto!important;
  border:0!important;background:#cb4550!important;color:#fff!important;
  padding:0 22px!important;height:44px;display:flex;align-items:center;
  font-weight:600;font-size:13px!important;line-height:1;cursor:pointer;border-radius:0!important;
  transition:background .15s}
.wd-header-search-form .searchform .searchsubmit:hover{background:#b23a44!important}
.wd-header-search-form .searchform .searchsubmit span{color:#fff!important;font-size:13px!important}
.wd-header-search-form .searchform .searchsubmit:before,
.wd-header-search-form .searchform .searchsubmit:after{display:none!important;content:none!important}
/* theme reserves right padding for the old absolute icon — not needed now */
.wd-header-search-form .searchform .s{padding-right:18px!important}

/* --- Header tools (account / wishlist / cart): smooth hover, brand accent --- */
.whb-col-right .wd-tools-element>a{
  border-radius:12px;padding:6px 8px;transition:color .15s,background .15s,transform .15s}
.whb-col-right .wd-tools-element>a:hover{background:rgba(203,69,80,.07)}
.whb-col-right .wd-tools-element:hover .wd-tools-icon,
.whb-col-right .wd-tools-element:hover .wd-tools-text{color:#cb4550}
.wd-header-cart .wd-cart-subtotal{font-weight:700;color:#33272a}