/*
* Mishkan CRO 2026-11-12 โ shared stylesheet.
* Loaded after v2.2-design-fixes.css; kept as a real under WP Rocket RUCSS (inc/enqueue.php exclusions).
*
* Convention:
* - One section per story: /* ===== US-0XX ===== *\/
* - Every rule scoped under the per-feature body class body.mtc- (added by inc/cro-1112.php
* only while the feature is on), so the kill switch removes the styling too.
* - RTL logical properties only (margin-inline-start, inset-inline-end, ...), WCAG AA contrast,
* touch targets >= 44px, no horizontal overflow at 390px, honour prefers-reduced-motion.
* - Brand tokens: reuse var(--color-*) from variables.css (navy / gold); no hardcoded new palette.
* - No device sniffing: use media queries (PLP/PDP are Varnish-shared across devices).
*/
/* ===== US-001 co_jsfix ===== */
/* (no styles) */
/* ===== US-002 freeship ===== */
/* One bar markup for drawer / cart / fragment (inc/cro-1112.php mishkan_render_shipping_progress). */
body.mtc-freeship .shipping-progress__fill {
background: linear-gradient(90deg, var(--color-accent-light, #a0894a), var(--color-primary-light, #1B3A5C)) !important;
}
body.mtc-freeship .shipping-progress.is-reached .shipping-progress__fill {
background: var(--color-success, #1A7038) !important;
}
body.mtc-freeship .shipping-progress__text {
display: flex !important;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
color: #3f444d !important;
line-height: 1.4;
}
body.mtc-freeship .shipping-progress__text strong,
body.mtc-freeship .shipping-progress__text strong .woocommerce-Price-amount {
color: var(--color-primary, #00152a);
font-weight: 800;
}
body.mtc-freeship .shipping-progress__icon {
flex: 0 0 auto;
color: var(--color-accent, #735b25);
}
body.mtc-freeship .shipping-progress.is-reached .shipping-progress__text { color: var(--color-success, #1A7038) !important; font-weight: 700 !important; }
body.mtc-freeship .shipping-progress.is-reached .shipping-progress__icon { color: currentColor; }
body.mtc-freeship .shipping-progress[hidden] { display: none !important; }
/* cart page: bar now sits at the top of the items column (inside the form) */
body.mtc-freeship .mishkan-cart .cart-items > .shipping-progress { margin-block: 0 16px !important; }
@media (prefers-reduced-motion: reduce) {
body.mtc-freeship .shipping-progress__fill { transition: none !important; }
}
/* ===== US-002 cart_sticky ===== */
/* Desktop: the summary column already holds total + CTA, so the fixed bar goes away (it overlapped it). */
@media (min-width: 1024px) {
body.mtc-cart-sticky .mt-sticky-checkout { display: none !important; }
body.mtc-cart-sticky.mt-has-sticky-checkout { padding-block-end: 0; }
body.mtc-cart-sticky.mt-has-sticky-checkout .mt-wa { inset-block-end: 20px; }
body.mtc-cart-sticky.mt-has-sticky-checkout .mt-reviews-badge { inset-block-end: 92px !important; }
}
@media (max-width: 1023.98px) {
body.mtc-cart-sticky .mt-sticky-checkout { padding-block-end: env(safe-area-inset-bottom, 0px); }
body.mtc-cart-sticky .mt-sticky-checkout.is-hidden { transform: translateY(110%); visibility: hidden; }
body.mtc-cart-sticky .mt-sticky-checkout__summary {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
column-gap: 8px;
row-gap: 2px;
}
body.mtc-cart-sticky .mt-sticky-checkout__label { grid-column: 1 / -1; }
body.mtc-cart-sticky .mt-sticky-checkout__perk { grid-column: 1 / -1; }
body.mtc-cart-sticky .mt-sticky-checkout__count { white-space: nowrap; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
body.mtc-cart-sticky .mt-sticky-checkout { transition: transform .22s ease, visibility 0s linear .22s; }
body.mtc-cart-sticky .mt-sticky-checkout:not(.is-hidden) { transition: transform .22s ease, visibility 0s linear 0s; }
}
body.mtc-cart-sticky .mt-sticky-checkout__perk {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
margin-block-start: 2px;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
color: #3f444d;
}
body.mtc-cart-sticky .mt-sticky-checkout__perk:empty { display: none; }
body.mtc-cart-sticky .mt-sticky-checkout__perk svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--color-accent, #735b25); }
body.mtc-cart-sticky .mt-sticky-checkout__perk strong,
body.mtc-cart-sticky .mt-sticky-checkout__perk .woocommerce-Price-amount { color: var(--color-primary, #00152a); font-weight: 800; }
body.mtc-cart-sticky .mt-sticky-checkout__perk.is-reached { color: var(--color-success, #1A7038); }
body.mtc-cart-sticky .mt-sticky-checkout__perk.is-reached svg { color: currentColor; }
body.mtc-cart-sticky .mt-sticky-checkout__lock { flex: 0 0 auto; opacity: .9; }
/* ===== US-003 atc_fix ===== */
/*
* Drawer content rules (full theme set, source order) that WP Rocket RUCSS partly strips from cached PLP/home used-CSS (generated with an EMPTY cart, so the
* filled drawer that atc_fix now shows after a card quick-add had no button/total/bar styling). Verbatim copies of
* header.css / cart-checkout.css / animations.css / v1.6 / v1.7-overrides.css rules, in source order, behind
* :where(body.mtc-atc-fix) so specificity is unchanged (later v2.2 / body.mtc-* overrides keep winning).
* Generated by cro_20261112/us003/gen_css.py from a live RUCSS diff.
*/
:where(body.mtc-atc-fix) .shipping-progress { margin: var(--space-2) var(--space-4); padding: var(--space-2) 0; }
:where(body.mtc-atc-fix) .shipping-progress__bar { height: 4px; background: var(--neutral-200); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-1); }
:where(body.mtc-atc-fix) .shipping-progress__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); border-radius: var(--radius-full); transition: width 0.6s; }
:where(body.mtc-atc-fix) .shipping-progress__text { font-size: var(--text-xs); color: var(--neutral-600); text-align: center; margin: 0px; }
:where(body.mtc-atc-fix) .shipping-progress { margin-block-end: var(--space-6); padding: var(--space-4); background: var(--color-bg-secondary, #F5F3EF); border-radius: var(--radius-lg, 12px); text-align: center; }
:where(body.mtc-atc-fix) .shipping-progress__bar { height: 8px; background: var(--color-border, #E5E2DC); border-radius: var(--radius-full, 9999px); overflow: hidden; margin-block-end: var(--space-2); }
:where(body.mtc-atc-fix) .shipping-progress__fill { height: 100%; background: linear-gradient(90deg, var(--color-primary, #1B3A5C), var(--color-accent, #C9A84C)); border-radius: inherit; transition: width 0.5s; }
:where(body.mtc-atc-fix) .shipping-progress__text { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm, 0.875rem); font-weight: 500; color: var(--color-text-secondary); margin: 0px; }
:where(body.mtc-atc-fix) .shipping-progress__text svg { color: var(--color-success, #2D8A4E); }
:where(body.mtc-atc-fix) .shipping-progress__bar-fill { animation: 0.8s ease-out 0s 1 normal none running progressFill; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__buttons .button { display: block; margin: 8px 0px; width: 100%; text-align: center; }
:where(body.mtc-atc-fix) .shipping-progress { background: linear-gradient(135deg, rgb(245, 243, 239) 0%, rgb(235, 240, 245) 100%) !important; border: 1px solid var(--color-border-light, #F0EDE8) !important; border-radius: 16px !important; padding: 16px 20px !important; }
@media (max-width: 768px) { :where(body.mtc-atc-fix) .shipping-progress { border-radius: 12px !important; } }
:where(body.mtc-atc-fix) .mini-cart-dropdown__content { flex: 1 1 0% !important; overflow-y: auto !important; padding: 20px 24px !important; background: rgb(255, 255, 255) !important; scrollbar-width: thin !important; scrollbar-color: var(--color-border, #E5E2DC) transparent !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__empty-message { text-align: center !important; padding: 48px 24px !important; color: #5f6673 !important; /* QA-DRAWER: AA 5.9:1 (was #9ca3af 2.5:1) */ font-size: 1rem !important; line-height: 1.6 !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__empty-message::before { content: "๐" !important; display: block !important; font-size: 3rem !important; margin-bottom: 16px !important; opacity: 0.4 !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart { list-style: none !important; margin: 0px !important; padding: 0px !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item { display: flex !important; align-items: center !important; gap: 16px !important; padding: 16px 0px !important; border-bottom: 1px solid rgba(0, 21, 42, 0.06) !important; position: relative !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item:last-child { border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item img { width: 72px !important; height: 72px !important; object-fit: cover !important; border-radius: 12px !important; flex-shrink: 0 !important; border: 1px solid rgba(0, 21, 42, 0.06) !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item a:not(.remove) { color: var(--color-text-primary, #1a1a2e) !important; text-decoration: none !important; font-weight: 600 !important; font-size: 0.9rem !important; line-height: 1.4 !important; transition: color 0.2s !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--color-accent, #C9A84C) !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item .remove { position: absolute !important; top: 16px !important; left: 0px !important; right: auto !important; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(220, 38, 38, 0.08) !important; color: rgb(220, 38, 38) !important; font-size: 0.85rem !important; transition: 0.2s !important; text-decoration: none !important; }
[dir="rtl"] :where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item .remove { left: 0px !important; right: auto !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart-item .remove:hover { background: rgba(220, 38, 38, 0.15) !important; transform: scale(1.1) !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .quantity { color: var(--color-gray-500, #6b7280) !important; font-size: 0.85rem !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__total { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 24px !important; background: rgba(27, 58, 92, 0.03) !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--color-text-primary, #1a1a2e) !important; border-top: 1px solid rgba(0, 21, 42, 0.08) !important; flex-shrink: 0 !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__total .woocommerce-Price-amount { color: var(--color-primary, #1B3A5C) !important; font-size: 1.15rem !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__buttons { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 16px 24px 24px !important; background: rgb(255, 255, 255) !important; flex-shrink: 0 !important; border-top: 1px solid rgba(0, 21, 42, 0.06) !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__buttons .button { display: block !important; width: 100% !important; margin: 0px !important; padding: 14px 20px !important; font-size: 0.95rem !important; font-weight: 700 !important; border-radius: 12px !important; text-align: center !important; cursor: pointer !important; transition: 0.2s !important; letter-spacing: 0.02em !important; text-decoration: none !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__buttons .button:first-child { background: transparent !important; color: var(--color-primary, #1B3A5C) !important; border: 2px solid var(--color-primary, #1B3A5C) !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__buttons .button:first-child:hover { background: rgba(27, 58, 92, 0.05) !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__buttons .button.checkout { background: linear-gradient(135deg, var(--color-accent, #C9A84C), #d4b65e) !important; color: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; box-shadow: rgba(201, 168, 76, 0.3) 0px 2px 12px !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown .woocommerce-mini-cart__buttons .button.checkout:hover { transform: translateY(-1px) !important; box-shadow: rgba(201, 168, 76, 0.4) 0px 4px 16px !important; }
:where(body.mtc-atc-fix) #mini-cart-dropdown .mini-cart-dropdown__content { padding: 0px; }
:where(body.mtc-atc-fix) #mini-cart-dropdown .woocommerce-mini-cart.mishkan-mini-cart { list-style: none; margin: 0px; padding: 0px; max-height: min(60vh, 520px); overflow-y: auto; }
:where(body.mtc-atc-fix) #mini-cart-dropdown .woocommerce-mini-cart.mishkan-mini-cart::before, :where(body.mtc-atc-fix) #mini-cart-dropdown .woocommerce-mini-cart.mishkan-mini-cart::after { content: none; }
:where(body.mtc-atc-fix) .mini-cart__item { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "thumb body remove"; column-gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid rgba(0, 21, 42, 0.08); margin: 0px; background: rgb(255, 255, 255); position: relative; }
:where(body.mtc-atc-fix) .mini-cart__item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
:where(body.mtc-atc-fix) .mini-cart__item:hover { background: rgba(0, 21, 42, 0.016); }
:where(body.mtc-atc-fix) .mini-cart__thumb { grid-area: thumb; display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: rgb(246, 244, 239); border: 1px solid rgba(0, 21, 42, 0.06); flex-shrink: 0; }
:where(body.mtc-atc-fix) .mini-cart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0px; }
:where(body.mtc-atc-fix) .mini-cart__body { grid-area: body; display: flex; flex-direction: column; gap: 4px; min-width: 0px; }
:where(body.mtc-atc-fix) .mini-cart__name { font-family: var(--font-heading, inherit); font-size: 0.98rem; font-weight: 600; line-height: 1.3; color: var(--color-text-primary, #00152a); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
:where(body.mtc-atc-fix) .mini-cart__name:hover { color: var(--color-accent, #a0894a); text-decoration: none; }
:where(body.mtc-atc-fix) .mini-cart__variation { font-size: 0.78rem; color: rgba(0, 21, 42, 0.6); line-height: 1.35; }
:where(body.mtc-atc-fix) .mini-cart__variation p, :where(body.mtc-atc-fix) .mini-cart__variation dl { margin: 0px; }
:where(body.mtc-atc-fix) .mini-cart__variation dt { font-weight: 600; display: inline; }
:where(body.mtc-atc-fix) .mini-cart__variation dd { display: inline; margin: 0px 0.25em 0px 0px; }
:where(body.mtc-atc-fix) .mini-cart__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.82rem; color: rgba(0, 21, 42, 0.65); margin-top: 2px; }
:where(body.mtc-atc-fix) .mini-cart__meta .mini-cart__qty { font-weight: 600; color: rgba(0, 21, 42, 0.8); }
:where(body.mtc-atc-fix) .mini-cart__meta .mini-cart__dot { color: rgba(0, 21, 42, 0.3); }
:where(body.mtc-atc-fix) .mini-cart__meta .woocommerce-Price-amount { font-weight: 600; }
:where(body.mtc-atc-fix) .mini-cart__line-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(0, 21, 42, 0.08); }
:where(body.mtc-atc-fix) .mini-cart__line-label { font-size: 0.78rem; color: rgba(0, 21, 42, 0.55); font-weight: 500; }
:where(body.mtc-atc-fix) .mini-cart__line-amount { font-family: var(--font-heading, inherit); font-size: 1.05rem; font-weight: 700; color: var(--color-primary, #00152a); direction: ltr; unicode-bidi: isolate; }
:where(body.mtc-atc-fix) .mini-cart__body > .quantity.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
:where(body.mtc-atc-fix) .mini-cart__item .mini-cart__remove.remove.remove_from_cart_button { grid-area: remove; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 21, 42, 0.04); color: rgba(0, 21, 42, 0.55); font-size: 18px; line-height: 26px; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, transform 0.2s; flex-shrink: 0; padding: 0px; margin: 0px; }
:where(body.mtc-atc-fix) .mini-cart__item .mini-cart__remove.remove:hover, :where(body.mtc-atc-fix) .mini-cart__item .mini-cart__remove.remove:focus-visible { background: rgb(192, 57, 43); color: rgb(255, 255, 255); transform: scale(1.08); }
:where(body.mtc-atc-fix) .mini-cart__footer { padding: 16px 18px 18px; background: rgb(250, 248, 243); border-top: 1px solid rgba(0, 21, 42, 0.08); }
:where(body.mtc-atc-fix) .mini-cart__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
:where(body.mtc-atc-fix) .mini-cart__subtotal-label { font-size: 0.95rem; font-weight: 600; color: rgba(0, 21, 42, 0.75); }
:where(body.mtc-atc-fix) .mini-cart__subtotal-amount { font-family: var(--font-heading, inherit); font-size: 1.35rem; font-weight: 800; color: var(--color-primary, #00152a); direction: ltr; unicode-bidi: isolate; }
:where(body.mtc-atc-fix) .mini-cart__note { font-size: 0.78rem; color: rgba(0, 21, 42, 0.55); margin: 0px 0px 12px; }
:where(body.mtc-atc-fix) .mini-cart__buttons { display: flex; flex-direction: column; gap: 8px; margin: 0px; padding: 0px; }
:where(body.mtc-atc-fix) .mini-cart__buttons .button, :where(body.mtc-atc-fix) .mini-cart__buttons .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; font-weight: 700; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s; min-height: 44px; width: 100%; }
:where(body.mtc-atc-fix) .mini-cart__buttons .checkout, :where(body.mtc-atc-fix) .mini-cart__buttons .wc-forward.checkout { background: var(--color-accent, #a0894a); color: rgb(255, 255, 255); border-color: var(--color-accent, #a0894a); order: 1; }
:where(body.mtc-atc-fix) .mini-cart__buttons .checkout:hover, :where(body.mtc-atc-fix) .mini-cart__buttons .checkout:focus-visible { background: rgb(138, 117, 64); border-color: rgb(138, 117, 64); color: rgb(255, 255, 255); }
:where(body.mtc-atc-fix) .mini-cart__buttons .button:not(.checkout) { background: rgb(255, 255, 255); color: var(--color-primary, #00152a); border-color: rgba(0, 21, 42, 0.2); order: 2; }
:where(body.mtc-atc-fix) .mini-cart__buttons .button:not(.checkout):hover, :where(body.mtc-atc-fix) .mini-cart__buttons .button:not(.checkout):focus-visible { background: rgba(0, 21, 42, 0.04); border-color: rgba(0, 21, 42, 0.4); color: var(--color-primary, #00152a); }
:where(body.mtc-atc-fix) .mini-cart__empty { padding: 36px 20px; text-align: center; color: rgba(0, 21, 42, 0.6); font-size: 0.95rem; margin: 0px; }
@media (max-width: 480px) { :where(body.mtc-atc-fix) .mini-cart__item { grid-template-columns: 60px 1fr auto; column-gap: 10px; padding: 12px 14px; } }
@media (max-width: 480px) { :where(body.mtc-atc-fix) .mini-cart__thumb { width: 60px; height: 60px; } }
@media (max-width: 480px) { :where(body.mtc-atc-fix) .mini-cart__footer { padding: 14px; } }
:where(body.mtc-atc-fix) .shipping-progress { background: rgb(255, 255, 255) !important; border: 1px solid rgb(238, 236, 232) !important; border-radius: 14px !important; padding: 18px 24px !important; box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 3px !important; margin-block-end: 24px !important; }
:where(body.mtc-atc-fix) .shipping-progress__bar { height: 6px !important; background: rgb(240, 237, 232) !important; border-radius: 6px !important; }
:where(body.mtc-atc-fix) .shipping-progress__fill { background: linear-gradient(90deg, rgb(45, 138, 78), rgb(59, 165, 94)) !important; border-radius: 6px !important; }
:where(body.mtc-atc-fix) .shipping-progress__text { font-size: 0.88rem !important; font-weight: 600 !important; color: rgb(74, 70, 64) !important; margin-block-start: 8px !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown__content .shipping-progress { padding: 12px 14px !important; margin-block-end: 14px !important; border-radius: 12px !important; }
:where(body.mtc-atc-fix) .mini-cart-dropdown__content .shipping-progress__text { font-size: 0.8rem !important; margin-block-start: 6px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
@media (max-width: 768px) { :where(body.mtc-atc-fix) .shipping-progress { border-radius: 12px !important; padding: 14px 18px !important; } }
/* ===== US-004 plp_sort + plp_toolbar ===== */
/* plp_sort: the select now shows the real order (e.g. 'ืื ืืืจืื ืืืืชืจ'), so a sort glyph at inline-start
tells it is the sort control (the visible 'ืืืื:' prefix moved into the icon). */
body.mtc-plp-sort .shop-toolbar .shop-sort__select {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300152a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2300152a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-position: right 14px center, left 14px center !important;
background-size: 16px 16px, 12px 12px !important;
background-repeat: no-repeat, no-repeat !important;
padding-inline-start: 40px !important;
color: var(--color-primary, #00152a) !important;
font-weight: 600 !important;
}
/* plp_toolbar: the mobile filter trigger lives inside the toolbar (desktop keeps the sidebar). */
body.mtc-plp-toolbar .shop-toolbar__filter { display: none; }
@media (max-width: 767px) {
body.mtc-plp-toolbar #filter-toggle.shop-filter-toggle { display: none !important; }
body.mtc-plp-toolbar .shop-toolbar {
position: sticky;
inset-block-start: var(--mt-header-h, 64px);
z-index: 20;
background: var(--color-surface, #faf7f0);
/* full-bleed backdrop without widening the page (no horizontal overflow) */
box-shadow: 0 0 0 100vmax var(--color-surface, #faf7f0);
clip-path: inset(0 -100vmax);
padding-block: 8px !important;
margin-block-end: 12px !important;
border-block-end: 1px solid rgba(0, 21, 42, .12) !important;
flex-direction: column;
align-items: stretch;
gap: 8px !important;
}
body.mtc-plp-toolbar .shop-toolbar .shop-toolbar__end {
display: flex !important;
flex-wrap: nowrap;
align-items: stretch;
gap: 8px !important;
width: 100%;
order: -1;
justify-content: flex-start !important;
}
body.mtc-plp-toolbar .shop-toolbar .shop-sort {
flex: 3 1 0 !important;
width: auto !important;
min-width: 0;
}
body.mtc-plp-toolbar .shop-toolbar .shop-sort__select {
width: 100% !important;
min-height: 46px !important;
text-overflow: ellipsis;
padding-inline-start: 34px !important;
padding-inline-end: 28px !important;
background-position: right 12px center, left 12px center !important;
}
body.mtc-plp-toolbar .shop-toolbar__filter {
flex: 2 1 0;
min-width: 0;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-block: 0;
padding-inline: 12px;
background: #fff;
color: var(--color-primary, #00152a);
border: 1.5px solid rgba(0, 21, 42, .5);
border-radius: 10px;
font: inherit;
font-size: .9rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
body.mtc-plp-toolbar .shop-toolbar__filter.has-active { border-color: var(--color-primary, #00152a); }
body.mtc-plp-toolbar .shop-toolbar__filter[aria-expanded="true"],
body.mtc-plp-toolbar .shop-toolbar__filter:focus-visible {
background: var(--color-primary, #00152a);
border-color: var(--color-primary, #00152a);
color: #fff;
}
body.mtc-plp-toolbar .shop-toolbar__filter:focus-visible { outline: 2px solid var(--color-accent, #735b25); outline-offset: 2px; }
body.mtc-plp-toolbar .shop-toolbar__filter svg { flex: none; }
body.mtc-plp-toolbar .shop-toolbar__filter-count {
min-width: 22px;
height: 22px;
padding-inline: 6px;
border-radius: 11px;
background: #735b25; /* gold, #fff on it = 5.9:1 */
color: #fff;
font-size: .78rem;
font-weight: 700;
line-height: 22px;
text-align: center;
}
body.mtc-plp-toolbar .shop-toolbar__filter-count[hidden] { display: none; }
/* the view toggle (481-767) stays compact in the same row */
body.mtc-plp-toolbar .shop-toolbar .shop-view-toggle { flex: none; }
/* active-filter chips: one swipeable row so the sticky bar stays short */
body.mtc-plp-toolbar .shop-toolbar .shop-toolbar__start { flex-wrap: nowrap; min-width: 0; }
body.mtc-plp-toolbar .shop-toolbar .active-filters {
flex-wrap: nowrap !important;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
min-width: 0;
}
body.mtc-plp-toolbar .shop-toolbar .active-filters::-webkit-scrollbar { display: none; }
body.mtc-plp-toolbar .shop-toolbar .active-filters > * { flex: none; }
}
@media (hover: hover) and (max-width: 767px) {
body.mtc-plp-toolbar .shop-toolbar__filter:hover { border-color: var(--color-accent, #735b25); }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-plp-toolbar .shop-toolbar__filter { transition: none; }
}
/* ===== US-005 plp_card_v2 ===== */
/* Rating under the title: one gold star + score + (count), one line; empty row reserved on 0-review cards so prices align per grid row. */
body.mtc-plp-card-v2 .product-card .mt-card-rating {
display: flex;
align-items: center;
gap: 4px;
min-block-size: 18px;
margin: 0;
font-family: var(--font-body, inherit);
font-size: 13px;
line-height: 18px;
white-space: nowrap;
overflow: hidden;
font-variant-numeric: tabular-nums;
color: #595c60;
}
body.mtc-plp-card-v2 .product-card .mt-card-rating__star { flex: none; inline-size: 14px; block-size: 14px; color: #b8912f; }
body.mtc-plp-card-v2 .product-card .mt-card-rating__score { font-weight: 700; color: #00152a; }
body.mtc-plp-card-v2 .product-card .mt-card-rating__count { color: #595c60; }
@media (min-width: 768px) {
body.mtc-plp-card-v2 .product-card .mt-card-rating { font-size: 14px; }
}
/* 'ืืื ื-' prefix: quiet label, the amount stays the strong read. */
body.mtc-plp-card-v2 .product-card .product-card__price .price-from {
font-size: .8125rem;
font-weight: 500;
color: #595c60;
margin-inline-end: 4px;
letter-spacing: 0;
}
/* ===== US-006 plp_declutter + pdp_fold ===== */
/* Shared: the a11y handle that cro-1112.js adds on PLP/PDP (mobile only; desktop keeps the plugin toolbar as is). */
.a11y-toolbar .mt-a11y-handle { display: none; }
@media (max-width: 767px) {
body.mtc-plp-declutter .a11y-toolbar.mt-a11y-dock,
body.mtc-pdp-fold .a11y-toolbar.mt-a11y-dock {
display: flex;
flex-direction: column-reverse; /* handle stays put at the bottom, buttons open above it */
align-items: flex-start;
gap: 4px;
}
body.mtc-plp-declutter .a11y-toolbar.mt-a11y-dock:not(.is-open) .a11y-toolbar-list,
body.mtc-pdp-fold .a11y-toolbar.mt-a11y-dock:not(.is-open) .a11y-toolbar-list { display: none; }
body.mtc-plp-declutter .a11y-toolbar .mt-a11y-handle,
body.mtc-pdp-fold .a11y-toolbar .mt-a11y-handle {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0 12px 12px 0; /* tab glued to the physical left edge (inline-end in RTL) */
background: #00152a; /* white icon 17.9:1 */
color: #fff;
box-shadow: 0 4px 14px rgba(0, 21, 42, .22);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.mtc-plp-declutter .a11y-toolbar.is-open .mt-a11y-handle,
body.mtc-pdp-fold .a11y-toolbar.is-open .mt-a11y-handle { background: #735b25; }
body.mtc-plp-declutter .a11y-toolbar .mt-a11y-handle:focus-visible,
body.mtc-pdp-fold .a11y-toolbar .mt-a11y-handle:focus-visible { outline: 3px solid #735b25; outline-offset: 2px; }
body.mtc-plp-declutter .a11y-toolbar.mt-a11y-dock .a11y-toolbar-list,
body.mtc-pdp-fold .a11y-toolbar.mt-a11y-dock .a11y-toolbar-list { box-shadow: 0 4px 14px rgba(0, 21, 42, .18); }
}
/* plp_declutter (shop / categories / search, mobile): cards carry their own real rating (US-005), so the store-wide
reviews pill is not floated over the grid; WhatsApp = 52px circle in the corner; a11y = one 44px tab above it. */
@media (max-width: 767px) {
body.mtc-plp-declutter #cr_floatingtrustbadge,
body.mtc-plp-declutter .cr-floatingbadge,
body.mtc-plp-declutter [class*="cr-floatingbadge"],
html body.mtc-plp-declutter .mt-reviews-badge { display: none !important; }
body.mtc-plp-declutter .mt-wa {
inset-inline-end: 16px;
inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
}
body.mtc-plp-declutter .mt-wa .mt-wa__toggle {
inline-size: 52px;
block-size: 52px;
padding: 0;
gap: 0;
justify-content: center;
border-radius: 50%;
}
body.mtc-plp-declutter .mt-wa .mt-wa__label { display: none; }
html body.mtc-plp-declutter .a11y-toolbar,
html body.mtc-plp-declutter .a11y-toolbar.rtl.default,
html body.mtc-plp-declutter .a11y-toolbar.standard-location {
right: auto;
left: 0;
top: auto;
bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* 16 + 52 WhatsApp + 12 gap */
}
/* the last row's CTAs can scroll clear of the corner widgets */
body.mtc-plp-declutter #products-grid,
body.mtc-plp-declutter .products-grid { padding-block-end: 88px; }
}
/* pdp_fold (single product, mobile): title, price and rating in the first screen. */
@media (max-width: 767px) {
/* breadcrumb -> one 44px "back to " link */
body.mtc-pdp-fold .breadcrumbs { padding-block: 0; }
body.mtc-pdp-fold .breadcrumbs__list { flex-wrap: nowrap; min-inline-size: 0; }
body.mtc-pdp-fold .breadcrumbs__item:not(:nth-last-child(2)) { display: none; }
body.mtc-pdp-fold .breadcrumbs__item:nth-last-child(2) { min-inline-size: 0; }
html[dir="rtl"] body.mtc-pdp-fold .breadcrumbs:not(.category-hero__breadcrumbs) .breadcrumbs__item:nth-last-child(2)::after,
html body.mtc-pdp-fold .breadcrumbs .breadcrumbs__item:nth-last-child(2)::after { content: none; display: none; }
body.mtc-pdp-fold .breadcrumbs .breadcrumbs__item:nth-last-child(2) a {
display: inline-flex;
align-items: center;
gap: 8px;
min-block-size: 44px;
min-inline-size: 0;
max-inline-size: 100%;
color: var(--color-primary, #00152a);
font-weight: 600;
text-decoration: none;
}
body.mtc-pdp-fold .breadcrumbs .breadcrumbs__item:nth-last-child(2) a span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* back chevron at the inline start (points right = back in RTL) */
body.mtc-pdp-fold .breadcrumbs .breadcrumbs__item:nth-last-child(2) a::before {
content: "";
flex: none;
inline-size: 7px;
block-size: 7px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
/* gallery: square, capped by viewport height on short phones (active slide is absolute, v2.2:398) */
body.mtc-pdp-fold .product-gallery__viewport {
aspect-ratio: 1 / 1;
max-block-size: min(52vh, 400px);
max-inline-size: min(52vh, 400px);
margin-inline: auto;
}
body.mtc-pdp-fold .product-gallery__slide img { object-fit: contain; block-size: 100%; }
body.mtc-pdp-fold .product-gallery__main { margin-block-end: 8px; }
body.mtc-pdp-fold .product-gallery__thumbs {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
gap: 8px;
padding-block: 2px;
scrollbar-width: none;
}
body.mtc-pdp-fold .product-gallery__thumbs::-webkit-scrollbar { display: none; }
body.mtc-pdp-fold .single-product-page .product-gallery__thumb,
body.mtc-pdp-fold .product-gallery__thumb { flex: none; inline-size: 48px; block-size: 48px; }
body.mtc-pdp-fold .product-info .product-info__title {
font-size: clamp(1.375rem, 5.5vw, 1.75rem);
line-height: 1.25;
margin-block-end: 10px;
}
/* a11y handle: bottom row next to the WhatsApp circle (left 8..52), off the image and the title/price */
html body.mtc-pdp-fold .a11y-toolbar,
html body.mtc-pdp-fold .a11y-toolbar.rtl.default,
html body.mtc-pdp-fold .a11y-toolbar.standard-location {
right: auto;
left: 60px;
top: auto;
bottom: 20px;
}
body.mtc-pdp-fold .a11y-toolbar .mt-a11y-handle { border-radius: 50%; }
}
@media (max-width: 640px) {
/* move with WhatsApp (-72px) above the sticky add-to-cart bar instead of the generic -80px */
body.mtc-pdp-fold.mt-has-sticky-atc .a11y-toolbar.a11y-toolbar { transform: translateY(-72px) !important; }
}
/* ===== US-007 pdp_rating + pdp_reviews_inline ===== */
/* pdp_rating: hero pill reads '4.9 โ
โ
โ
โ
โ
334 ืืืงืืจืืช ืืืืืชืืช' (label is true: 99% WC-verified, verification required).
The row may wrap under the price on narrow screens instead of truncating. */
body.mtc-pdp-rating .product-info__headline { flex-wrap: wrap; }
body.mtc-pdp-rating .product-info__headline .mt-rating--hero .mt-rating__count-label { display: inline; font-weight: 500; }
body.mtc-pdp-rating .product-info__headline .mt-rating--hero .mt-rating__count strong::before,
body.mtc-pdp-rating .product-info__headline .mt-rating--hero .mt-rating__count strong::after { content: none; }
body.mtc-pdp-rating .product-info__headline .mt-rating--hero { min-height: 44px; }
/* zero-review products: store-level line, clearly the store's */
body.mtc-pdp-rating .mt-store-rating {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 6px;
min-height: 44px;
font-size: .9375rem;
line-height: 1.35;
color: #00152a;
text-decoration: none;
}
body.mtc-pdp-rating .mt-store-rating__star { color: #b8912f; font-size: 1.15em; line-height: 1; }
body.mtc-pdp-rating .mt-store-rating__score { font-weight: 700; }
body.mtc-pdp-rating .mt-store-rating__sep,
body.mtc-pdp-rating .mt-store-rating__text { color: #595c60; }
body.mtc-pdp-rating a.mt-store-rating .mt-store-rating__text { text-decoration: underline; text-decoration-color: rgba(89, 92, 96, .45); text-underline-offset: 3px; }
body.mtc-pdp-rating a.mt-store-rating:hover .mt-store-rating__text { color: #00152a; text-decoration-color: currentColor; }
body.mtc-pdp-rating a.mt-store-rating:focus-visible { outline: 3px solid #735b25; outline-offset: 2px; border-radius: 6px; }
/* shared star meter */
.mt-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 2px; white-space: nowrap; font-size: 1rem; }
.mt-stars__bg { color: #ddd6c6; }
.mt-stars__fg { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; color: #b8912f; }
.mt-stars--lg { font-size: 1.25rem; }
/* pdp_reviews_inline: always-visible reviews (score + bars | 3 latest), full list behind */
body.mtc-pdp-reviews-inline .mt-reviews {
margin-block-start: var(--space-12, 48px);
padding-block-start: var(--space-8, 32px);
border-block-start: 1px solid var(--color-border, #e5e2dc);
scroll-margin-top: 140px;
color: #00152a;
}
body.mtc-pdp-reviews-inline .mt-reviews:focus { outline: none; }
body.mtc-pdp-reviews-inline .mt-reviews__title {
font-family: var(--font-heading);
font-size: var(--text-2xl, 1.5rem);
font-weight: 700;
color: #00152a;
margin: 0 0 var(--space-6, 24px);
text-align: center;
}
body.mtc-pdp-reviews-inline .mt-reviews__grid {
display: grid;
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
gap: 24px 40px;
align-items: start;
}
body.mtc-pdp-reviews-inline .mt-reviews__summary {
position: sticky;
top: 120px;
padding: 24px;
background: #fbf8f1;
border: 1px solid #ece3cf;
border-radius: 16px;
}
body.mtc-pdp-reviews-inline .mt-reviews__score { display: flex; align-items: center; gap: 14px; margin-block-end: 18px; }
body.mtc-pdp-reviews-inline .mt-reviews__avg { font-size: 3rem; font-weight: 800; line-height: 1; color: #00152a; font-variant-numeric: tabular-nums; }
body.mtc-pdp-reviews-inline .mt-reviews__score-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.mtc-pdp-reviews-inline .mt-reviews__based { font-size: .875rem; color: #595c60; line-height: 1.4; }
body.mtc-pdp-reviews-inline .mt-reviews__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.mtc-pdp-reviews-inline .mt-reviews__bar-row {
display: grid;
grid-template-columns: 4.6em minmax(0, 1fr) 2.8em;
align-items: center;
gap: 10px;
margin: 0;
font-size: .875rem;
color: #3d4146;
}
body.mtc-pdp-reviews-inline .mt-reviews__bar { position: relative; display: block; height: 8px; border-radius: 99px; background: #ebe5d6; overflow: hidden; }
body.mtc-pdp-reviews-inline .mt-reviews__bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: #b8912f; }
body.mtc-pdp-reviews-inline .mt-reviews__bar-pct { text-align: end; font-variant-numeric: tabular-nums; color: #595c60; }
body.mtc-pdp-reviews-inline .mt-reviews__sub { font-size: 1.0625rem; font-weight: 700; margin: 0 0 12px; color: #00152a; }
body.mtc-pdp-reviews-inline .mt-reviews ol.mt-reviews__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
body.mtc-pdp-reviews-inline .mt-reviews__about { margin: 0; padding: 0 20px 14px; font-size: .8125rem; color: #595c60; }
body.mtc-pdp-reviews-inline .mt-reviews__about a { color: #00152a; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 6px; }
body.mtc-pdp-reviews-inline .mt-reviews__note { max-width: 46rem; margin: -8px auto 20px; text-align: center; font-size: .9375rem; color: #595c60; line-height: 1.6; }
body.mtc-pdp-reviews-inline .mt-reviews__list--cat { max-width: 52rem; margin-inline: auto !important; }
body.mtc-pdp-reviews-inline .mt-reviews__all { margin-block-start: 24px; }
body.mtc-pdp-reviews-inline .mt-reviews__more {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
max-width: 420px;
margin-inline: auto;
padding: 10px 20px;
border: 1.5px solid #00152a;
border-radius: 999px;
background: #fff;
color: #00152a;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
list-style: none;
transition: background-color .2s ease, color .2s ease;
}
body.mtc-pdp-reviews-inline .mt-reviews__more::-webkit-details-marker { display: none; }
body.mtc-pdp-reviews-inline .mt-reviews__more::after {
content: "";
inline-size: 8px;
block-size: 8px;
border-inline-end: 2px solid currentColor;
border-block-end: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .2s ease;
}
body.mtc-pdp-reviews-inline .mt-reviews__all[open] > .mt-reviews__more::after { transform: translateY(2px) rotate(-135deg); }
body.mtc-pdp-reviews-inline .mt-reviews__more:hover { background: #00152a; color: #fff; }
body.mtc-pdp-reviews-inline .mt-reviews__more:focus-visible { outline: 3px solid #735b25; outline-offset: 3px; }
body.mtc-pdp-reviews-inline .mt-reviews__all-body { margin-block-start: 24px; }
body.mtc-pdp-reviews-inline .mt-reviews__all-body .woocommerce-Reviews-title { font-size: 1.125rem; font-weight: 700; margin: 0 0 16px; }
@media (max-width: 860px) {
body.mtc-pdp-reviews-inline .mt-reviews__grid { grid-template-columns: minmax(0, 1fr); }
body.mtc-pdp-reviews-inline .mt-reviews__summary { position: static; padding: 18px; }
}
@media (max-width: 520px) {
body.mtc-pdp-reviews-inline .mt-reviews__avg { font-size: 2.5rem; }
body.mtc-pdp-reviews-inline .mt-reviews__about { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-pdp-reviews-inline .mt-reviews__more,
body.mtc-pdp-reviews-inline .mt-reviews__more::after { transition: none; }
}
/* US-007: RUCSS used-CSS on zero-review PDPs lacks review-card rules (generated before cards existed there).
cro-1112.css is loaded in full, so mirror v1.7-overrides review-card + verified-badge rules here. */
/* ============================================================
* v1.9.29 โ Premium Review Cards โ targets default WC markup
* via comment_class filter (li.mt-review-card +
* .mt-review-avatar-N + .mt-review-verified).
* ============================================================ */
/* List reset */
#comments ol.commentlist,
.woocommerce #reviews #comments ol.commentlist {
list-style: none !important;
padding: 0 !important;
margin: 0 0 28px 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
/* Card */
li.mt-review-card,
.woocommerce #reviews #comments ol.commentlist li.mt-review-card {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: #fffdf8 !important;
border: 1px solid #e6dcc4 !important;
border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(60, 42, 12, 0.04), 0 6px 18px -12px rgba(60, 42, 12, 0.10) !important;
overflow: hidden !important;
position: relative !important;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
opacity: 0;
transform: translateY(8px);
animation: mtReviewIn .45s ease forwards;
}
li.mt-review-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 2px 4px rgba(60, 42, 12, 0.06), 0 14px 34px -14px rgba(60, 42, 12, 0.18) !important;
border-color: #d9c994 !important;
}
li.mt-review-card:nth-child(1) { animation-delay: .00s; }
li.mt-review-card:nth-child(2) { animation-delay: .06s; }
li.mt-review-card:nth-child(3) { animation-delay: .12s; }
li.mt-review-card:nth-child(4) { animation-delay: .18s; }
li.mt-review-card:nth-child(5) { animation-delay: .24s; }
li.mt-review-card:nth-child(6) { animation-delay: .30s; }
li.mt-review-card:nth-child(7) { animation-delay: .36s; }
li.mt-review-card:nth-child(n+8){ animation-delay: .42s; }
@keyframes mtReviewIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
li.mt-review-card { animation: none !important; opacity: 1 !important; transform: none !important; }
li.mt-review-card:hover { transform: none !important; }
}
/* Gold accent bar on the right (RTL leading edge) */
li.mt-review-card::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 4px !important;
background: linear-gradient(180deg, #f1c44a 0%, #d9a72a 100%) !important;
opacity: .9 !important;
pointer-events: none !important;
}
/* Inner container โ flex with avatar + body */
li.mt-review-card .comment_container {
display: grid !important;
grid-template-columns: 56px 1fr !important;
gap: 14px !important;
padding: 16px 20px 16px 18px !important;
align-items: start !important;
background: transparent !important;
border: 0 !important;
}
@media (max-width: 520px) {
li.mt-review-card .comment_container {
grid-template-columns: 44px 1fr !important;
padding: 14px 16px !important;
gap: 12px !important;
}
}
/* Hide default gravatar โ we inject illustrated via ::before on the container */
li.mt-review-card img.avatar,
li.mt-review-card .comment_container > img.avatar {
display: none !important;
}
/* Illustrated avatar injected as first-grid-cell background */
li.mt-review-card .comment_container::before {
content: "" !important;
display: block !important;
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
background-color: #e9d9bb;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border: 2px solid rgba(217, 167, 42, 0.25) !important;
box-shadow: inset 0 0 0 2px #fff, 0 2px 6px rgba(60, 42, 12, 0.08) !important;
flex-shrink: 0 !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
@media (max-width: 520px) {
li.mt-review-card .comment_container::before {
width: 44px !important;
height: 44px !important;
}
}
/* Make .comment-text take the second grid cell */
li.mt-review-card .comment-text {
grid-column: 2 !important;
grid-row: 1 !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
min-width: 0 !important;
}
li.mt-review-card.mt-review-avatar-0 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-1 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-2 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-3 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-4 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-5 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-6 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-7 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-8 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
li.mt-review-card.mt-review-avatar-9 .comment_container::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Meta row โ stars, name, verified badge, date */
li.mt-review-card .comment-text > .star-rating {
font-size: 17px !important;
margin: 0 0 8px 0 !important;
display: inline-flex !important;
}
li.mt-review-card .comment-text p.meta {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 10px !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-size: 13px !important;
color: #7a6f55 !important;
line-height: 1.4 !important;
}
li.mt-review-card .woocommerce-review__author,
li.mt-review-card .comment-text p.meta > strong {
font-size: 15px !important;
font-weight: 700 !important;
color: #2d2416 !important;
line-height: 1.2 !important;
}
/* Hide separator dashes */
li.mt-review-card .woocommerce-review__dash {
display: none !important;
}
/* Verified owner badge โ premium green pill */
li.mt-review-card .woocommerce-review__verified,
li.mt-review-card em.woocommerce-review__verified {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding-block: 3px !important;
padding-inline-start: 24px !important;
padding-inline-end: 10px !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #edf8ed 0%, #dff2df 100%) !important;
border: 1px solid #b8dfb8 !important;
color: #1f5a2a !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow: 0 1px 2px rgba(31, 90, 42, 0.08) !important;
letter-spacing: -0.01em !important;
font-style: normal !important;
position: relative !important;
}
li.mt-review-card .woocommerce-review__verified::before {
content: "" !important;
position: absolute !important;
inset-inline-start: 7px !important;
top: 50% !important;
width: 14px !important;
height: 14px !important;
transform: translateY(-50%) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
/* Date styling (time tag inside meta) */
li.mt-review-card time,
li.mt-review-card .woocommerce-review__published-date {
font-size: 12.5px !important;
color: #7a6f55 !important;
font-variant-numeric: tabular-nums !important;
}
/* Review body */
li.mt-review-card .description,
li.mt-review-card .description p {
font-size: 14.5px !important;
line-height: 1.75 !important;
color: #3a3124 !important;
margin: 0 0 10px 0 !important;
}
li.mt-review-card .description p:last-child { margin-bottom: 0 !important; }
/* Polished gold stars (brighter) โ applies to review stars & elsewhere */
.mt-star-layer .mt-star-fg path,
li.mt-review-card .mt-star-layer .mt-star-fg path {
fill: #f1c44a !important;
}
.mt-star-layer .mt-star-fg {
filter: drop-shadow(0 0 .5px rgba(217, 167, 42, .35)) drop-shadow(0 1px 0 rgba(180, 120, 20, .25)) !important;
}
/* Reviews heading polish */
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
v2.0.40 โ Verified-purchase badge in review cards
The SVG was rendering at 1160x1160 (no CSS sizing) โ must constrain.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.mt-verified-badge {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 8px;
background: #eaf6ee;
border: 1px solid #c7e7d0;
color: #08653f;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
vertical-align: middle;
width: max-content;
max-width: 100%;
}
.mt-verified-badge__icon {
width: 14px !important;
height: 14px !important;
min-width: 14px;
min-height: 14px;
flex-shrink: 0;
color: #08653f;
display: inline-block;
}
.mt-verified-badge__text {
white-space: nowrap;
line-height: 1;
}
/* Layout the meta row so badge + name + date sit on one line */
.mt-review-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
}
/* ===== US-008 pdp_trust ===== */
/* 'ืืื ืื ืืืืข ืืืื': plain info rows (icon + head + detail), hairline dividers, free-ship gap as a soft tag.
Colours: head #00152a, text #5c5848 (7.0:1 on #fffdf8), link #735b25 (5.6:1), met #1d5e34 on #eef6ef (7.1:1). */
body.mtc-pdp-trust .mt-pdp-trust-wrap {
margin-block-start: 20px;
padding: 6px 16px 4px;
background: #fffdf8;
border: 1px solid rgba(115, 91, 37, .35);
border-radius: 14px;
}
body.mtc-pdp-trust .mt-pdp-trust__title {
margin: 10px 0 2px;
font-family: var(--font-heading, inherit);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.4;
color: #735b25;
}
body.mtc-pdp-trust .mt-pdp-trust {
list-style: none;
margin: 0;
padding: 0;
}
body.mtc-pdp-trust .mt-pdp-trust__row {
display: flex;
align-items: flex-start;
gap: 12px;
min-block-size: 44px;
padding-block: 12px;
margin: 0;
list-style: none;
}
body.mtc-pdp-trust .mt-pdp-trust__row + .mt-pdp-trust__row { border-block-start: 1px solid rgba(115, 91, 37, .18); }
body.mtc-pdp-trust .mt-pdp-trust__ico {
flex: 0 0 36px;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 36px;
block-size: 36px;
border-radius: 999px;
background: #f3ede0;
color: #735b25;
}
body.mtc-pdp-trust .mt-pdp-trust__ico svg { display: block; }
body.mtc-pdp-trust .mt-pdp-trust__body {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
font-size: .875rem;
line-height: 1.5;
}
body.mtc-pdp-trust .mt-pdp-trust__head { font-size: .9375rem; font-weight: 700; color: #00152a; line-height: 1.4; }
body.mtc-pdp-trust .mt-pdp-trust__text { color: #5c5848; overflow-wrap: anywhere; }
body.mtc-pdp-trust .mt-pdp-trust__link {
display: inline-flex;
align-items: center;
gap: 4px;
min-block-size: 44px;
margin-block: -10px -12px;
color: #735b25;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(115, 91, 37, .45);
text-underline-offset: 3px;
}
body.mtc-pdp-trust .mt-pdp-trust__link:hover { color: #00152a; text-decoration-color: currentColor; }
body.mtc-pdp-trust .mt-pdp-trust__link:focus-visible { outline: 3px solid #735b25; outline-offset: 2px; border-radius: 6px; }
body.mtc-pdp-trust .mt-pdp-trust__tel bdi { unicode-bidi: isolate; white-space: nowrap; }
body.mtc-pdp-trust .mt-pdp-freeship {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 6px 0 0;
padding: 5px 10px;
border-radius: 8px;
background: #faf3e1;
color: #00152a;
font-size: .8125rem;
font-weight: 600;
line-height: 1.45;
}
body.mtc-pdp-trust .mt-pdp-freeship[hidden] { display: none; }
body.mtc-pdp-trust .mt-pdp-freeship.is-met { background: #eef6ef; color: #1d5e34; }
body.mtc-pdp-trust .mt-pdp-freeship.is-met::before {
content: "";
inline-size: 12px;
block-size: 7px;
border-left: 2px solid currentColor; /* physical on purpose: a check mark does not mirror in RTL */
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(-45deg);
flex: 0 0 auto;
}
@media (min-width: 768px) {
body.mtc-pdp-trust .mt-pdp-trust-wrap { padding-inline: 18px; }
}
/* Bit chip next to the payment badge image (same 28px card height as the PNG chips) */
body.mtc-pdp-trust .payment-methods-badge:has(.payment-methods-badge__bit) {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
body.mtc-pdp-trust .payment-methods-badge:has(.payment-methods-badge__bit) img:not(.payment-methods-badge__bit) { flex: 0 1 280px; min-inline-size: 0; }
body.mtc-pdp-trust .payment-methods-badge img.payment-methods-badge__bit {
flex: 0 0 auto;
inline-size: auto;
max-inline-size: none;
block-size: 23px;
width: auto;
}
/* ===== US-009 pdp_live_total + pdp_sumcard ===== */
/* Live line total inside the CTA (" ยท โช190") + sticky bar price: no reflow jitter while typing. */
body.mtc-pdp-live-total .mishkan-wizard__cta-price,
body.mtc-pdp-live-total .mt-sticky-atc__price bdi {
font-variant-numeric: tabular-nums;
white-space: nowrap;
unicode-bidi: isolate;
}
body.mtc-pdp-live-total .mishkan-wizard__cta-price { font-weight: 800; }
body.mtc-pdp-live-total .mt-sticky-atc__price bdi { color: #00152a; font-weight: 700; }
/* Price summary card (PAO #product-addons-total, moved right above the wizard nav / ATC row). */
body.mtc-pdp-sumcard #product-addons-total.mt-sumcard { flex: 1 1 100%; inline-size: 100%; }
body.mtc-pdp-sumcard #product-addons-total.mt-sumcard:empty { display: none; }
body.mtc-pdp-sumcard .product-info #product-addons-total .product-addon-totals,
body.mtc-pdp-sumcard #product-addons-total .product-addon-totals {
display: block !important;
margin-block: 14px 0 !important;
padding-block: 12px !important;
padding-inline: 16px !important;
background: #fffdf8 !important;
border: 1px solid #ece5d2;
border-radius: 12px !important;
font-size: 14px !important;
line-height: 1.45;
color: #4a4636;
box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
body.mtc-pdp-sumcard .mishkan-wizard #product-addons-total .product-addon-totals { margin-block: 14px 0 !important; }
body.mtc-pdp-sumcard #product-addons-total .product-addon-totals ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
body.mtc-pdp-sumcard #product-addons-total .product-addon-totals li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin: 0;
padding: 0;
border: 0;
}
body.mtc-pdp-sumcard #product-addons-total .wc-pao-col1 { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
body.mtc-pdp-sumcard #product-addons-total .wc-pao-col1 strong { font-weight: 500; color: #4a4636; }
body.mtc-pdp-sumcard #product-addons-total .wc-pao-col1 .wc-pao-addon-value { font-weight: 700; color: #00152a; }
body.mtc-pdp-sumcard #product-addons-total .wc-pao-col2 {
flex: 0 0 auto;
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: #00152a;
font-weight: 600;
}
body.mtc-pdp-sumcard #product-addons-total .wc-pao-col2 strong { font-weight: 600; }
body.mtc-pdp-sumcard #product-addons-total .wc-pao-subtotal-line {
margin-block-start: 4px;
padding-block-start: 10px;
border-block-start: 1px dashed #d9cfb4;
}
body.mtc-pdp-sumcard #product-addons-total .wc-pao-subtotal-line .price {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
inline-size: 100%;
margin: 0;
font-size: 15px;
font-weight: 800;
color: #00152a;
}
body.mtc-pdp-sumcard #product-addons-total .wc-pao-subtotal-line .amount {
font-size: 18px;
font-weight: 800;
color: #00152a;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Mobile: on regular wizard steps show only the total line; the itemised lines return on the summary step. */
@media (max-width: 767px) {
body.mtc-pdp-sumcard form.cart.mishkan-wizard-has-cta:not(.mishkan-wz-summary) #product-addons-total li:not(.wc-pao-subtotal-line) { display: none; }
body.mtc-pdp-sumcard form.cart.mishkan-wizard-has-cta:not(.mishkan-wz-summary) #product-addons-total .wc-pao-subtotal-line {
margin: 0;
padding: 0;
border: 0;
}
body.mtc-pdp-sumcard form.cart.mishkan-wizard-has-cta:not(.mishkan-wz-summary) #product-addons-total .product-addon-totals { padding-block: 10px !important; margin-block: 12px 0 !important; }
}
/* ===== US-010 pdp_perso โ optional embroidery as one binary choice (Square-style 'No / Yes, add +โชX') ===== */
body.mtc-pdp-perso .mishkan-perso {
display: block;
padding-block-start: 14px !important;
border-block-start: 1px solid var(--color-hairline, #e5e2da);
}
body.mtc-pdp-perso .mishkan-wizard .mishkan-perso { padding-block-start: 0 !important; border-block-start: 0; }
body.mtc-pdp-perso .mishkan-perso__toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
min-inline-size: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.mtc-pdp-perso .mishkan-perso__legend {
display: flex;
align-items: center;
gap: 8px;
padding: 0 0 10px !important;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: #00152a;
}
body.mtc-pdp-perso .mishkan-perso__tag {
padding: 2px 9px;
border-radius: 999px;
background: #f1ede3;
color: #5c5848;
font-size: 12px;
font-weight: 500;
}
body.mtc-pdp-perso .mishkan-wizard .mishkan-perso__legend {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
padding: 0 !important;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
body.mtc-pdp-perso .mishkan-perso__opt {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-block-size: 52px;
padding: 10px 14px !important;
border: 1.5px solid #d9d1bd;
border-radius: 12px;
background: #fff;
color: #00152a;
line-height: 1.3;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.mtc-pdp-perso .mishkan-perso__opt input {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 14px;
inline-size: 1px;
block-size: 1px;
margin: 0 !important;
opacity: 0;
pointer-events: none;
}
body.mtc-pdp-perso .mishkan-perso__dot {
flex: none;
box-sizing: border-box;
inline-size: 20px;
block-size: 20px;
border: 2px solid #6b6658;
border-radius: 50%;
background: #fff;
transition: border-width .15s ease, border-color .15s ease;
}
body.mtc-pdp-perso .mishkan-perso__txt { display: flex; flex-direction: column; min-inline-size: 0; }
body.mtc-pdp-perso .mishkan-perso__main { font-size: 15px; font-weight: 600; }
body.mtc-pdp-perso .mishkan-perso__sub { padding-block-start: 2px !important; font-size: 13px; color: #5c5848; }
body.mtc-pdp-perso .mishkan-perso__opt:has(input:checked) {
border-color: #b88a3a;
background: #f7eed3;
box-shadow: inset 0 0 0 1px #b88a3a;
}
body.mtc-pdp-perso .mishkan-perso__opt:has(input:checked) .mishkan-perso__dot { border: 6px solid #00152a; }
body.mtc-pdp-perso .mishkan-perso__opt:has(input:focus-visible) { outline: 2px solid #00152a; outline-offset: 2px; }
@media (hover: hover) {
body.mtc-pdp-perso .mishkan-perso__opt:hover { border-color: #b88a3a; }
}
body.mtc-pdp-perso .mishkan-perso__body[hidden] { display: none !important; }
body.mtc-pdp-perso .product-info__cart-form .mishkan-perso__body,
body.mtc-pdp-perso .mishkan-perso__body {
margin-block-start: 12px !important;
padding-inline-start: 14px !important;
border-inline-start: 2px solid #e9dcb8 !important;
}
body.mtc-pdp-perso .mishkan-perso.is-open .mishkan-perso__body { animation: mtcPersoIn .2s ease-out; }
@keyframes mtcPersoIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* The wizard hides every add-on name (its H3 shows the step label); inside the folded group each field needs its own. */
body.mtc-pdp-perso .mishkan-wizard .mishkan-perso__body .wc-pao-addon-name,
body.mtc-pdp-perso .mishkan-wizard .mishkan-perso__body .wc-pao-addon > label { display: block !important; }
@media (max-width: 359px) {
body.mtc-pdp-perso .mishkan-perso__toggle { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-pdp-perso .mishkan-perso__opt,
body.mtc-pdp-perso .mishkan-perso__dot { transition: none; }
body.mtc-pdp-perso .mishkan-perso.is-open .mishkan-perso__body { animation: none; }
}
/* ===== US-011 pdp_sticky_v2 ===== */
/* Bar is server-rendered [hidden]; JS reveals it (.is-visible) only after the cart form scrolled away above. */
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc {
transform: translateY(110%);
visibility: hidden;
border-top-color: #d9c38c;
padding-block-end: env(safe-area-inset-bottom, 0px);
transition: transform .28s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .28s;
}
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc.is-visible {
transform: translateY(0);
visibility: visible;
transition: transform .28s cubic-bezier(.22, .8, .24, 1), visibility 0s;
}
/* Two-line CTA: 'ืืืืจืช ืืคืฉืจืืืืช' + 'ืืกืจ: ืืืื' */
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc__cta-text {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.15;
}
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc__cta-sub {
margin-block-start: 2px;
font-size: 12px;
font-weight: 600;
color: #f3e3b5; /* 14:1 on #00152a, 5.1:1 on hover #735b25 */
}
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc__cta[data-mode="choose"],
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc__cta[data-mode="wizard"] {
box-shadow: inset 0 -3px 0 #b8912f;
}
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc__cta:focus-visible {
outline: 3px solid #b8912f;
outline-offset: 2px;
}
/* 'ืืืจื ืืืื' tap: brief gold ring around the sizes */
body.single-product.mtc-pdp-sticky-v2 .mt-attn {
outline: 3px solid #b8912f;
outline-offset: 6px;
border-radius: 10px;
animation: mtcAttn 2s ease-out both;
}
@keyframes mtcAttn {
0%, 55% { outline-color: #b8912f; }
100% { outline-color: rgba(184, 145, 47, 0); }
}
/* Floats (WhatsApp, a11y, reviews badge) are only raised while the bar is actually on screen. */
body.single-product.mtc-pdp-sticky-v2.mt-has-sticky-atc:not(.mt-sticky-atc-shown) .mt-wa,
body.single-product.mtc-pdp-sticky-v2.mt-has-sticky-atc:not(.mt-sticky-atc-shown) .a11y-toolbar.a11y-toolbar,
body.single-product.mtc-pdp-sticky-v2.mt-has-sticky-atc:not(.mt-sticky-atc-shown) .mt-reviews-badge,
body.single-product.mtc-pdp-sticky-v2.mt-has-sticky-atc:not(.mt-sticky-atc-shown) .cr-floatingbadge,
body.single-product.mtc-pdp-sticky-v2.mt-has-sticky-atc:not(.mt-sticky-atc-shown) [class*="cr-floatingbadge"] {
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc,
body.single-product.mtc-pdp-sticky-v2 .mt-sticky-atc.is-visible { transition: none; }
body.single-product.mtc-pdp-sticky-v2 .mt-attn { outline: 0; animation: none; }
}
/* ===== US-012 pdp_fbt: 'ืืฉืืืืื ืฉื ืงื ืื ืืื' (inc/cro-1112.php mishkan_cro_pdp_fbt) ===== */
body.mtc-pdp-fbt .mt-fbt__head { text-align: start; margin-block-end: 1.25rem; }
body.mtc-pdp-fbt .mt-fbt__head .mt-fbt__title { text-align: inherit; }
body.mtc-pdp-fbt .mt-fbt__title { margin-block-end: 0.35rem; }
body.mtc-pdp-fbt .mt-fbt__sub { margin: 0; color: #5c5848; font-size: 0.92rem; }
body.mtc-pdp-fbt .mt-fbt__body {
max-width: 980px;
margin-inline: 0 auto;
background: #fffdf8;
border: 1px solid rgba(115, 91, 37, 0.35);
border-radius: 14px;
overflow: hidden;
}
body.mtc-pdp-fbt .mt-fbt__list { list-style: none; margin: 0; padding: 0; }
body.mtc-pdp-fbt .mt-fbt__row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-block-end: 1px solid rgba(115, 91, 37, 0.18);
transition: background-color 0.15s ease;
}
body.mtc-pdp-fbt .mt-fbt__row:last-child { border-block-end: 0; }
body.mtc-pdp-fbt .mt-fbt__row.is-on { background: #fff8e8; }
body.mtc-pdp-fbt .mt-fbt__pick {
flex: 0 0 44px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
margin: 0;
}
body.mtc-pdp-fbt .mt-fbt__cb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
body.mtc-pdp-fbt .mt-fbt__box {
width: 22px;
height: 22px;
border: 2px solid #735b25;
border-radius: 6px;
background: #fff;
position: relative;
pointer-events: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* check mark: physical borders, rotated, so RTL does not mirror it */
body.mtc-pdp-fbt .mt-fbt__cb:checked + .mt-fbt__box { background: #00152a; border-color: #00152a; }
body.mtc-pdp-fbt .mt-fbt__cb:checked + .mt-fbt__box::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 11px;
border-right: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(45deg);
}
body.mtc-pdp-fbt .mt-fbt__cb:focus-visible + .mt-fbt__box { outline: 3px solid #b8912f; outline-offset: 3px; }
body.mtc-pdp-fbt .mt-fbt__cb:disabled + .mt-fbt__box { opacity: 0.45; }
body.mtc-pdp-fbt .mt-fbt__body:has(.mt-fbt__cb) .mt-fbt__row.is-choose { padding-inline-start: calc(1rem + 44px + 0.75rem); }
body.mtc-pdp-fbt .mt-fbt__thumb {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 10px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(115, 91, 37, 0.18);
}
body.mtc-pdp-fbt .mt-fbt__thumb img,
body.mtc-pdp-fbt .mt-fbt__img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.mtc-pdp-fbt .mt-fbt__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
body.mtc-pdp-fbt .mt-fbt__name {
color: #00152a;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
body.mtc-pdp-fbt .mt-fbt__name:hover { text-decoration: underline; }
body.mtc-pdp-fbt .mt-fbt__name:focus-visible,
body.mtc-pdp-fbt .mt-fbt__choose:focus-visible { outline: 3px solid #b8912f; outline-offset: 2px; border-radius: 4px; }
body.mtc-pdp-fbt .mt-fbt__price { color: #00152a; font-weight: 700; font-size: 0.98rem; }
body.mtc-pdp-fbt .mt-fbt__price del { color: #5c5848; font-weight: 400; margin-inline-end: 0.35rem; }
body.mtc-pdp-fbt .mt-fbt__price ins { text-decoration: none; }
body.mtc-pdp-fbt .mt-fbt__err:empty { display: none; }
body.mtc-pdp-fbt .mt-fbt__err { color: #a61b1b; font-size: 0.88rem; }
body.mtc-pdp-fbt .mt-fbt__err a { color: #a61b1b; text-decoration: underline; }
body.mtc-pdp-fbt .mt-fbt__row.is-added .mt-fbt__price::after {
content: " ยท ื ืืกืฃ ืืกื โ";
color: #1e6b3a;
font-weight: 600;
font-size: 0.88rem;
}
body.mtc-pdp-fbt .mt-fbt__choose {
flex: 0 0 auto;
min-height: 44px;
min-width: 72px;
padding: 0 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid #00152a;
border-radius: 10px;
color: #00152a;
font-weight: 600;
text-decoration: none;
background: #fff;
}
body.mtc-pdp-fbt .mt-fbt__choose:hover { background: #00152a; color: #fff; }
body.mtc-pdp-fbt .mt-fbt__foot {
padding: 1rem;
background: #fff;
border-block-start: 1px solid rgba(115, 91, 37, 0.35);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
body.mtc-pdp-fbt .mt-fbt__total { margin: 0; color: #5c5848; font-size: 0.95rem; text-align: center; }
body.mtc-pdp-fbt .mt-fbt__sum { color: #00152a; font-size: 1.2rem; font-weight: 800; direction: ltr; unicode-bidi: isolate; }
body.mtc-pdp-fbt .mt-fbt__add {
width: 100%;
min-height: 48px;
padding: 0 1.25rem;
border: 0;
border-radius: 10px;
background: #00152a;
color: #fff;
font: inherit;
font-weight: 700;
font-size: 1.02rem;
cursor: pointer;
box-shadow: inset 0 -3px 0 #b8912f;
transition: background-color 0.15s ease;
}
body.mtc-pdp-fbt .mt-fbt__add:hover:not(:disabled) { background: #0a2a4a; }
body.mtc-pdp-fbt .mt-fbt__add:focus-visible { outline: 3px solid #b8912f; outline-offset: 2px; }
body.mtc-pdp-fbt .mt-fbt__add:disabled { background: #e8e4d8; color: #5c5848; box-shadow: none; cursor: not-allowed; }
body.mtc-pdp-fbt .mt-fbt__add.is-loading { cursor: progress; opacity: 0.85; }
body.mtc-pdp-fbt .mt-fbt__msg { margin: 0; text-align: center; color: #1e6b3a; font-weight: 600; font-size: 0.92rem; }
body.mtc-pdp-fbt .mt-fbt__msg:empty { display: none; }
@media (min-width: 768px) {
body.mtc-pdp-fbt .mt-fbt__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
body.mtc-pdp-fbt .mt-fbt__body:not(:has(.mt-fbt__foot)) { grid-template-columns: minmax(0, 1fr); }
body.mtc-pdp-fbt .mt-fbt__row { padding: 0.9rem 1.25rem; gap: 1rem; }
body.mtc-pdp-fbt .mt-fbt__thumb { flex-basis: 72px; width: 72px; height: 72px; }
body.mtc-pdp-fbt .mt-fbt__body:has(.mt-fbt__cb) .mt-fbt__row.is-choose { padding-inline-start: calc(1.25rem + 44px + 1rem); }
body.mtc-pdp-fbt .mt-fbt__foot {
border-block-start: 0;
border-inline-start: 1px solid rgba(115, 91, 37, 0.35);
justify-content: center;
padding: 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
body.mtc-pdp-fbt .mt-fbt__row,
body.mtc-pdp-fbt .mt-fbt__box,
body.mtc-pdp-fbt .mt-fbt__add { transition: none; }
}
/* ===== US-013 drawer_open + drawer_pdp ===== */
/* 'ื ืืกืฃ ืืกื: {name}' confirmation strip at the top of the drawer (first child of .mini-cart-dropdown__content,
outside the fragment target) + highlight of the line that was just added after a PDP form POST. */
body.mtc-drawer-open #mini-cart-dropdown .mt-mc-added {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
margin: 0;
padding-block: 12px;
padding-inline: 18px;
background: #f6f1e3;
border-block-end: 1px solid rgba(184, 145, 47, 0.45);
color: #00152a;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
outline: none !important;
animation: mtMcAdded 0.28s ease-out both;
}
body.mtc-drawer-open #mini-cart-dropdown .mt-mc-added:focus,
body.mtc-drawer-open #mini-cart-dropdown .mt-mc-added:focus-visible {
outline: none !important;
box-shadow: inset 0 -2px 0 #b8912f;
}
body.mtc-drawer-open #mini-cart-dropdown .mt-mc-added__ic {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #00152a;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
}
body.mtc-drawer-open #mini-cart-dropdown .mt-mc-added__tx {
min-width: 0;
overflow-wrap: anywhere;
}
body.mtc-drawer-pdp #mini-cart-dropdown .mini-cart__item.is-just-added {
background: #fbf8ef;
box-shadow: inset -3px 0 0 #b8912f;
}
html[dir="ltr"] body.mtc-drawer-pdp #mini-cart-dropdown .mini-cart__item.is-just-added {
box-shadow: inset 3px 0 0 #b8912f;
}
@keyframes mtMcAdded {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-drawer-open #mini-cart-dropdown .mt-mc-added { animation: none; }
}
/* ===== US-014 drawer_upsell + drawer_footer + drawer_nolazy ===== */
/* drawer_footer: one scroll container (.mini-cart-dropdown__content), no nested list scroll; the footer (subtotal, real
shipping line, 'ืืขืืจ ืืชืฉืืื' / 'ืืกื ืืงื ืืืช', heter iska) is pinned to the bottom of the panel and sticks while the
lines + upsell scroll under it. Flex column so a short cart still has its footer at the bottom. */
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart-dropdown__content {
display: flex !important;
flex-direction: column !important;
padding-block-end: 0 !important;
}
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart-dropdown__content > * { flex-shrink: 0; }
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart-dropdown__content > .widget_shopping_cart_content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
body.mtc-drawer-footer #mini-cart-dropdown .woocommerce-mini-cart.mishkan-mini-cart {
max-height: none !important;
overflow: visible !important;
}
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart__footer {
position: sticky;
inset-block-end: 0;
z-index: 1;
margin-block-start: auto;
margin-inline: -24px;
padding-block: 14px max(16px, env(safe-area-inset-bottom));
padding-inline: 24px;
background: #faf8f3;
border-block-start: 1px solid rgba(0, 21, 42, 0.08);
box-shadow: 0 -6px 16px rgba(0, 21, 42, 0.08);
}
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart__subtotal { margin-block-end: 2px; }
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart__note { margin: 0 0 12px; font-size: 0.82rem; color: #4a4f57; }
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-ship { display: inline-flex; align-items: center; gap: 6px; }
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-ship.is-free { color: #1d6b3c; font-weight: 600; }
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart__buttons {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px;
width: 100% !important;
margin: 0 !important;
border-radius: 12px !important;
font-family: var(--font-ui, 'Heebo', sans-serif);
font-weight: 700 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
text-align: center !important;
text-decoration: none !important;
transform: none !important;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta--pay {
order: 1;
min-height: 52px;
padding: 0 20px !important;
font-size: 1.05rem !important;
background: #00152a !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 6px 16px rgba(0, 21, 42, 0.2) !important;
}
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta--pay svg { color: #d9bc6a; flex: 0 0 auto; }
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta--pay:hover { background: #0d2c4d !important; }
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta--cart {
order: 2;
min-height: 44px;
padding: 0 16px !important;
font-size: 0.95rem !important;
background: #fff !important;
color: #00152a !important;
border: 1px solid rgba(0, 21, 42, 0.28) !important;
box-shadow: none !important;
}
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta--cart:hover { background: #f3f1ec !important; border-color: rgba(0, 21, 42, 0.5) !important; }
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta:focus-visible { outline: 3px solid #b8912f !important; outline-offset: 2px !important; }
body.mtc-drawer-footer #mini-cart-dropdown .mini-cart__footer .mt-heter { margin-block-start: 10px; padding: 8px 10px; }
/* drawer_upsell: 'ืืฉืืื ืืช ืืืืื ื' rows (thumb | name + price + real rating | ืืืกืคื / ืืืืจืช ืืคืฉืจืืืืช). */
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell {
margin-block: 6px 20px;
padding-block-start: 16px;
border-block-start: 1px solid rgba(0, 21, 42, 0.08);
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px !important;
padding: 0;
font-family: var(--font-heading, inherit);
font-size: 1rem;
font-weight: 800;
line-height: 1.3;
color: #00152a;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__title::before {
content: "";
flex: 0 0 18px;
height: 2px;
border-radius: 2px;
background: #b8912f;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__row {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
margin: 0;
padding: 8px;
border: 1px solid rgba(0, 21, 42, 0.09);
border-radius: 12px;
background: #fff;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__thumb { display: block; width: 56px; height: 56px; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__thumb img {
display: block;
width: 56px !important;
height: 56px !important;
max-width: none;
object-fit: cover;
border-radius: 8px;
border: 0;
background: #f3f1ec;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__body { min-width: 0; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.35;
color: #00152a;
text-decoration: none;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__name:hover { text-decoration: underline; text-underline-offset: 3px; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
margin-block-start: 3px;
font-size: 0.85rem;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__price { font-weight: 700; color: #00152a; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__price del { color: #595c60; font-weight: 400; font-size: 0.8em; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__price ins { text-decoration: none; background: none; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__rating { font-size: 0.78rem; color: #595c60; white-space: nowrap; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__star { color: #b8912f; margin-inline-end: 2px; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__add,
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__opts {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0 12px;
border-radius: 10px;
font-family: var(--font-ui, 'Heebo', sans-serif);
font-size: 0.85rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
background: #fff;
color: #00152a !important;
border: 1.5px solid #00152a;
box-shadow: none;
transform: none;
}
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__opts { border: 1px solid rgba(0, 21, 42, 0.3); font-weight: 600; font-size: 0.8rem; padding: 0 10px; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__add:hover { background: #00152a; color: #fbf6e8 !important; border-color: #00152a; transform: none; box-shadow: none; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__opts:hover { background: #f3f1ec; border-color: rgba(0, 21, 42, 0.55); }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__add:focus-visible,
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__opts:focus-visible,
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__name:focus-visible { outline: 3px solid #b8912f; outline-offset: 2px; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__add.is-loading { cursor: progress; opacity: 0.7; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__add.is-added { background: #1d6b3c; border-color: #1d6b3c; color: #fff !important; }
@media (max-width: 400px) {
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__row { gap: 10px; grid-template-columns: 52px minmax(0, 1fr) auto; }
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__thumb,
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__thumb img { width: 52px !important; height: 52px !important; }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-drawer-footer #mini-cart-dropdown .mt-mc-cta,
body.mtc-drawer-upsell #mini-cart-dropdown .mt-mc-upsell__add { transition: none !important; }
}
/* ===== US-015 cart_autoupdate + cart_coupon ===== */
/* Qty changes post themselves (WC cart.js AJAX), so the 'ืขืืื ืขืืื' button is visually hidden but stays in the form
(implicit-submit target, keyboard fallback when enabled). */
body.mtc-cart-autoupdate .cart-actions button.mt-cart-update:not(:focus) {
position: absolute !important; inline-size: 1px !important; block-size: 1px !important; min-height: 0 !important; min-width: 0 !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
body.mtc-cart-autoupdate .mt-cart-live { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body.mtc-cart-autoupdate.woocommerce-cart .woocommerce-cart-form .qty-btn { color: #4a4740; }
body.mtc-cart-autoupdate .woocommerce-cart-form.processing .cart-totals__row--total .cart-totals__value { opacity: .55; transition: opacity .15s; }
/* Coupon rows: neutral label (incl. auto-coupon description), green negative amount + 44px remove target. */
body.mtc-cart-coupon .cart-totals__row--coupon.mt-coupon-row { align-items: center; gap: 12px; }
body.mtc-cart-coupon .mt-coupon-row .cart-totals__label { color: #3d3a35 !important; min-width: 0; overflow-wrap: anywhere; }
body.mtc-cart-coupon .mt-coupon-row .auto-coupon-description {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
margin-block-start: 2px; font-size: .8rem; line-height: 1.4; color: #5f5a52; font-weight: 400;
}
body.mtc-cart-coupon .cart-totals__value--discount {
display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; column-gap: 4px;
flex-shrink: 0; color: #1e7b34 !important; font-weight: 700; white-space: nowrap;
}
body.mtc-cart-coupon .cart-totals__value--discount .woocommerce-Price-amount { color: inherit; }
body.mtc-cart-coupon .cart-totals__value--discount a.woocommerce-remove-coupon {
display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px;
margin-block: -10px; padding-inline: 6px; font-size: .8rem; font-weight: 500; color: #595c60;
text-decoration: underline; text-underline-offset: 3px; border-radius: 6px;
}
body.mtc-cart-coupon .cart-totals__value--discount a.woocommerce-remove-coupon:hover { color: #00152a; }
body.mtc-cart-coupon .cart-totals__value--discount a.woocommerce-remove-coupon:focus-visible { outline: 2px solid #1B3A5C; outline-offset: 2px; }
/* 'ืืกืืช โชX ืืืืื ื ืืื' (real coupon + sale savings only). */
body.mtc-cart-coupon .cart-saved {
display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 10px 14px;
background: #edf7ef; border: 1px solid #cfe8d5; border-radius: 10px;
color: #17692b; font-size: .95rem; font-weight: 600; line-height: 1.35;
}
body.mtc-cart-coupon .cart-saved svg { flex-shrink: 0; }
body.mtc-cart-coupon .cart-saved strong { font-weight: 800; }
body.mtc-cart-coupon .cart-saved .woocommerce-Price-amount { color: inherit; }
/* Collapsed coupon: one quiet row, opens inline (native : click / Enter / Space). */
body.mtc-cart-coupon .cart-coupon-toggle { border-block-start: 1px solid #F0EDE8; margin-block: 4px 0; }
body.mtc-cart-coupon .cart-coupon-toggle__summary {
display: flex; align-items: center; gap: 8px; min-block-size: 48px; padding-block: 4px; cursor: pointer;
list-style: none; color: #1B3A5C; font-size: .95rem; font-weight: 600; border-radius: 8px;
-webkit-tap-highlight-color: transparent;
}
body.mtc-cart-coupon .cart-coupon-toggle__summary::-webkit-details-marker { display: none; }
body.mtc-cart-coupon .cart-coupon-toggle__summary::marker { content: ''; }
body.mtc-cart-coupon .cart-coupon-toggle__summary > svg:first-child { color: #b8912f; flex-shrink: 0; }
body.mtc-cart-coupon .cart-coupon-toggle__summary span { text-decoration: underline; text-decoration-color: rgba(27,58,92,.35); text-underline-offset: 4px; }
body.mtc-cart-coupon .cart-coupon-toggle__summary:hover span { text-decoration-color: currentColor; }
body.mtc-cart-coupon .cart-coupon-toggle__chev { margin-inline-start: auto; flex-shrink: 0; transition: transform .2s ease; }
body.mtc-cart-coupon .cart-coupon-toggle[open] .cart-coupon-toggle__chev { transform: rotate(180deg); }
body.mtc-cart-coupon .cart-coupon-toggle__summary:focus-visible { outline: 2px solid #1B3A5C; outline-offset: 2px; }
body.mtc-cart-coupon .cart-coupon-toggle .cart-coupon { margin: 0 0 12px !important; padding: 12px !important; }
body.mtc-cart-coupon .cart-coupon-toggle .cart-coupon__form { align-items: stretch; }
body.mtc-cart-coupon .cart-coupon-toggle .cart-coupon__form input.form-input { min-block-size: 44px; text-align: start; }
body.mtc-cart-coupon .cart-coupon-toggle .cart-coupon__form .btn { min-block-size: 44px; min-inline-size: 72px; }
body.mtc-cart-coupon .cart-coupon-toggle #coupon_code.has-error { border-color: #b42318 !important; }
body.mtc-cart-coupon .cart-coupon-toggle .coupon-error-notice {
margin: 8px 0 0; color: #b42318; font-size: .875rem; font-weight: 600; line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
body.mtc-cart-coupon .cart-coupon-toggle__chev,
body.mtc-cart-autoupdate .woocommerce-cart-form.processing .cart-totals__row--total .cart-totals__value { transition: none; }
}
/* ===== US-016 cart_upsell ===== */
body.mtc-cart-upsell .mt-cu {
margin-block: 20px 8px;
padding: 16px;
background: #fff;
border: 1px solid #ece5d2;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0, 21, 42, 0.04);
direction: rtl;
min-width: 0;
max-width: 100%;
contain: inline-size; /* the scroll row must never widen the cart grid column */
}
body.mtc-cart-upsell .cart-layout > .cart-items { min-width: 0; }
body.mtc-cart-upsell .mt-cu--gap {
background: linear-gradient(180deg, #fbf6ea 0%, #fff 64px);
border-color: #e3d3a8;
}
body.mtc-cart-upsell .mt-cu__head {
display: flex;
align-items: center;
gap: 10px;
margin-block-end: 12px;
}
body.mtc-cart-upsell .mt-cu__icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #00152a;
color: #e9cf8a;
}
body.mtc-cart-upsell .mt-cu__title {
margin: 0;
font-family: var(--font-ui, 'Heebo', sans-serif);
font-size: 1.05rem;
font-weight: 800;
line-height: 1.35;
color: #00152a;
outline: none;
}
body.mtc-cart-upsell .mt-cu__title:focus-visible { outline: 2px solid #b8912f; outline-offset: 3px; border-radius: 4px; }
body.mtc-cart-upsell .mt-cu__title strong,
body.mtc-cart-upsell .mt-cu__title .woocommerce-Price-amount { color: #735b25; font-weight: 800; }
body.mtc-cart-upsell .mt-cu__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 10px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scroll-padding-inline: 2px;
padding-block-end: 6px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
body.mtc-cart-upsell .mt-cu__item {
position: relative;
flex: 0 0 148px;
min-width: 0;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 8px;
background: #fff;
border: 1px solid #ece5d2;
border-radius: 12px;
transition: border-color .15s, box-shadow .15s;
}
body.mtc-cart-upsell .mt-cu__item:hover { border-color: #b8912f; box-shadow: 0 4px 12px rgba(184, 145, 47, 0.16); }
body.mtc-cart-upsell .mt-cu__thumb {
display: block;
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
background: #f6f1e6;
}
body.mtc-cart-upsell .mt-cu__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
}
body.mtc-cart-upsell .mt-cu__tag {
position: absolute;
inset-block-start: 12px;
inset-inline-start: 12px;
max-width: calc(100% - 24px);
padding: 3px 7px;
border-radius: 999px;
background: #1e6b3a;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.3;
}
body.mtc-cart-upsell .mt-cu__name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
font-size: 0.84rem;
font-weight: 600;
line-height: 1.35;
color: #00152a;
text-decoration: none;
}
body.mtc-cart-upsell .mt-cu__name:hover { color: #735b25; text-decoration: underline; }
body.mtc-cart-upsell .mt-cu__rating { font-size: 0.75rem; color: #595c60; line-height: 1.2; }
body.mtc-cart-upsell .mt-cu__star { color: #b8912f; margin-inline-end: 2px; }
body.mtc-cart-upsell .mt-cu__foot {
margin-block-start: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
body.mtc-cart-upsell .mt-cu__price { min-width: 0; font-size: 0.9rem; font-weight: 700; color: #735b25; line-height: 1.25; }
body.mtc-cart-upsell .mt-cu__price del { color: #595c60; font-weight: 400; font-size: 0.78rem; display: block; }
body.mtc-cart-upsell .mt-cu__price ins { text-decoration: none; }
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus {
flex: 0 0 44px;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 999px !important;
border: 0 !important;
background: #00152a !important;
color: #fff !important;
box-shadow: none !important;
line-height: 1 !important;
text-decoration: none !important;
transition: background .15s;
}
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus:hover { background: #735b25 !important; }
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus:focus-visible { outline: 3px solid #b8912f !important; outline-offset: 2px; }
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus::after { content: none !important; display: none !important; }
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus.loading { pointer-events: none; opacity: .75; }
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus.loading svg { animation: mt-cu-spin .8s linear infinite; }
body.mtc-cart-upsell .mt-cu .added_to_cart { display: none !important; }
@keyframes mt-cu-spin { to { transform: rotate(180deg); } }
@media (min-width: 768px) {
body.mtc-cart-upsell .mt-cu { padding: 18px 20px; }
body.mtc-cart-upsell .mt-cu__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
overflow: visible;
padding-block-end: 0;
}
body.mtc-cart-upsell .mt-cu__item:nth-child(n+5) { display: none; }
body.mtc-cart-upsell .mt-cu__name { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-cart-upsell .mt-cu__item,
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus { transition: none; }
body.mtc-cart-upsell .mt-cu .mishkan-cart-upsell__plus.loading svg { animation: none; }
}
/* ===== US-017 co_header: distraction-free checkout header + reduced footer (body.mt-co-min only on /checkout/, never order-received/order-pay) ===== */
body.mtc-co-header.mt-co-min .site-header--checkout {
background: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 1px solid rgba(0, 21, 42, .1);
box-shadow: 0 1px 0 rgba(184, 145, 47, .35);
transform: none !important;
}
body.mtc-co-header.mt-co-min .mt-coh {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
min-height: 64px;
padding-block: 6px;
}
body.mtc-co-header.mt-co-min .mt-coh__start { justify-self: start; display: flex; align-items: center; }
body.mtc-co-header.mt-co-min .mt-coh__logo { justify-self: center; line-height: 0; }
body.mtc-co-header.mt-co-min .mt-coh__end { justify-self: end; display: flex; align-items: center; gap: 20px; }
body.mtc-co-header.mt-co-min .site-header--checkout .site-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; }
html body.mtc-co-header.mt-co-min .site-header--checkout .site-logo__image { max-height: 48px; width: auto; height: auto; display: block; }
body.mtc-co-header.mt-co-min .mt-coh__ico { flex: none; }
body.mtc-co-header.mt-co-min .mt-coh__back,
body.mtc-co-header.mt-co-min .mt-coh__phone {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
min-width: 44px;
padding-inline: 10px;
margin-inline: -10px;
border-radius: 999px;
color: #00152a;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color .15s ease;
}
body.mtc-co-header.mt-co-min .mt-coh__back .mt-coh__ico--back { color: #735b25; }
body.mtc-co-header.mt-co-min .mt-coh__back:hover,
body.mtc-co-header.mt-co-min .mt-coh__phone:hover { background: #f4efe3; }
body.mtc-co-header.mt-co-min .mt-coh__back:hover span { text-decoration: underline; text-underline-offset: 3px; }
body.mtc-co-header.mt-co-min .site-header--checkout a:focus-visible { outline: 3px solid #b8912f; outline-offset: 2px; }
body.mtc-co-header.mt-co-min .mt-coh__secure {
display: inline-flex;
align-items: center;
gap: 6px;
color: #1e5b34;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
body.mtc-co-header.mt-co-min .mt-coh__phone { direction: rtl; }
body.mtc-co-header.mt-co-min .mt-coh__phone .mt-coh__ico { color: #735b25; }
body.mtc-co-header.mt-co-min .mt-coh__num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* Page chrome on checkout: no breadcrumbs; footer keeps trust row, payments, a11y statement and legal links */
body.mtc-co-header.mt-co-min .breadcrumbs,
body.mtc-co-header.mt-co-min .site-footer .footer-main,
body.mtc-co-header.mt-co-min .site-footer .footer-badge--kashrut,
body.mtc-co-header.mt-co-min .site-footer .footer-badge--israel { display: none !important; }
@media (max-width: 991px) {
/* no fixed mobile search opener on checkout -> drop its 60px body offset (mobile-search-bar.php) and header top (v2.2:19) */
html body.mtc-co-header.mt-co-min { padding-top: 0 !important; }
html body.mtc-co-header.mt-co-min .site-header--checkout { top: 0; }
}
@media (max-width: 767px) {
body.mtc-co-header.mt-co-min .site-header--checkout { position: relative; }
body.mtc-co-header.mt-co-min .mt-coh { min-height: 56px; gap: 8px; padding-block: 4px; }
html body.mtc-co-header.mt-co-min .site-header--checkout .site-logo__image { max-height: 40px; }
body.mtc-co-header.mt-co-min .mt-coh__end { gap: 4px; }
body.mtc-co-header.mt-co-min .mt-coh__back { font-size: 14px; padding-inline: 8px; margin-inline: -8px; gap: 2px; }
body.mtc-co-header.mt-co-min .mt-coh__secure { font-size: 12.5px; gap: 4px; }
body.mtc-co-header.mt-co-min .mt-coh__secure .mt-coh__ico { width: 16px; height: 16px; }
body.mtc-co-header.mt-co-min .mt-coh__end .mt-coh__secure + .mt-coh__phone { padding-inline: 0; margin-inline: 0; border-inline-start: 0; border-radius: 999px; justify-content: center; background: #f4efe3; width: 44px; height: 44px; }
body.mtc-co-header.mt-co-min .mt-coh__num { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 359px) {
body.mtc-co-header.mt-co-min .mt-coh__secure span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-co-header.mt-co-min .mt-coh__back,
body.mtc-co-header.mt-co-min .mt-coh__phone { transition: none; }
}
/* ===== US-018 co_fields: email + phone first; LTR inputs aligned to the RTL form edge, 44px ===== */
body.mtc-co-fields.woocommerce-checkout #billing_email,
body.mtc-co-fields.woocommerce-checkout #billing_phone,
body.mtc-co-fields.woocommerce-checkout #shipping_phone {
direction: ltr;
unicode-bidi: plaintext;
text-align: end;
min-height: 44px;
}
/* address-i18n.js re-applies the locale class (form-row-wide) to the phone row on country change; keep it beside the email. */
@media (min-width: 769px) {
body.mtc-co-fields.woocommerce-checkout #billing_phone_field {
width: 48.5% !important;
float: left;
display: inline-block;
vertical-align: top;
clear: none;
}
body.mtc-co-fields.woocommerce-checkout #billing_first_name_field,
body.mtc-co-fields.woocommerce-checkout .woocommerce-billing-fields .form-row-wide,
body.mtc-co-fields.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide {
clear: both; /* wide rows after a first/last pair otherwise wrap their label words beside the floats */
}
}
body.mtc-co-fields.woocommerce-checkout #billing_email::placeholder,
body.mtc-co-fields.woocommerce-checkout #billing_phone::placeholder,
body.mtc-co-fields.woocommerce-checkout #shipping_phone::placeholder {
direction: ltr;
text-align: end;
}
/* ===== US-019 co_delivery_first: delivery / pickup cards as the first checkout block ===== */
body.mtc-co-delivery-first .mt-co-mode .mt-checkout-mode--top {
display: block !important;
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
body.mtc-co-delivery-first .mt-co-mode .mt-co-mode__title {
display: flex;
align-items: center;
width: 100%;
float: none;
padding-inline: 0;
line-height: 1.3;
}
body.mtc-co-delivery-first .mt-co-mode .mt-co-mode__title .step-number svg { display: block; }
body.mtc-co-delivery-first .mt-mode-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.mtc-co-delivery-first .mt-mode-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 76px;
margin: 0;
padding: 16px;
border: 1.5px solid #d9d5ce;
border-radius: 12px;
background: #fff;
color: #1a1815;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.mtc-co-delivery-first .mt-mode-card:hover { border-color: #c9a84c; }
body.mtc-co-delivery-first .mt-mode-card.is-active,
body.mtc-co-delivery-first .mt-mode-card:has(.mt-mode-card__input:checked) {
border-color: #1b3a5c;
background: #f2f5f9;
box-shadow: 0 0 0 1px #1b3a5c;
}
body.mtc-co-delivery-first .mt-mode-card:has(.mt-mode-card__input:focus-visible) {
outline: 3px solid #1b3a5c;
outline-offset: 2px;
}
/* native radio stays focusable + announced; the drawn circle is decorative */
body.mtc-co-delivery-first .mt-mode-card__input {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
body.mtc-co-delivery-first .mt-mode-card__radio {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-block-start: 2px;
border: 2px solid #807a70;
border-radius: 50%;
background: #fff;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.mtc-co-delivery-first .mt-mode-card.is-active .mt-mode-card__radio,
body.mtc-co-delivery-first .mt-mode-card:has(.mt-mode-card__input:checked) .mt-mode-card__radio {
border-color: #1b3a5c;
box-shadow: inset 0 0 0 4px #fff;
background: #1b3a5c;
}
body.mtc-co-delivery-first .mt-mode-card__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #f6efdc;
color: #1b3a5c;
}
body.mtc-co-delivery-first .mt-mode-card__icon svg { display: block; }
body.mtc-co-delivery-first .mt-mode-card__text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
line-height: 1.35;
}
body.mtc-co-delivery-first .mt-mode-card__title {
color: #1b3a5c;
font-size: 1rem;
font-weight: 700;
}
body.mtc-co-delivery-first .mt-mode-card__meta {
color: #555048;
font-size: .85rem;
}
/* branch select under the cards (pickup only) */
body.mtc-co-delivery-first .mt-co-mode .mt-checkout-branch--top {
margin: 16px 0 0 !important;
padding: 16px !important;
border: 1px solid #ece7dc !important;
border-inline-start: 3px solid #c9a84c !important;
border-radius: 12px !important;
background: #fbf8f1 !important;
}
body.mtc-co-delivery-first .mt-co-mode .mt-checkout-branch--top[hidden] { display: none !important; }
body.mtc-co-delivery-first .mt-co-mode .mt-branch-row { margin: 0 !important; padding: 0; width: 100%; float: none; }
body.mtc-co-delivery-first .mt-co-mode .mt-branch-row label { display: block; }
body.mtc-co-delivery-first .mt-co-mode #mt_pickup_branch_id {
width: 100%;
min-height: 48px;
font-size: 16px;
}
body.mtc-co-delivery-first .mt-co-mode .mt-branch-error {
display: none;
margin-block-start: 6px;
color: #b3261e;
font-size: .85rem;
font-weight: 600;
}
body.mtc-co-delivery-first .mt-co-mode .mt-branch-row.woocommerce-invalid .mt-branch-error { display: block; }
body.mtc-co-delivery-first .mt-co-mode .mt-branch-row.woocommerce-invalid #mt_pickup_branch_id { border-color: #b3261e !important; }
body.mtc-co-delivery-first .mt-co-mode .mt-branch-info {
margin: 8px 0 0 !important;
color: #4a4640;
font-size: .85rem;
line-height: 1.45;
}
body.mtc-co-delivery-first .mt-co-mode .mt-branch-info:empty { display: none; }
/* pickup: no street / apt / postcode, no second shipping address (city stays) */
body.mtc-co-delivery-first.mt-mode-pickup .woocommerce-billing-fields .mt-hide-when-pickup,
body.mtc-co-delivery-first.mt-mode-pickup #shipping-section { display: none !important; }
/* keep the step numbers consecutive while the shipping step is hidden (3 -> 2) */
body.mtc-co-delivery-first.mt-mode-pickup #shipping-section ~ #additional-section .step-number { font-size: 0 !important; }
body.mtc-co-delivery-first.mt-mode-pickup #shipping-section ~ #additional-section .step-number::after { content: "2"; font-size: .85rem; }
@media (max-width: 600px) {
body.mtc-co-delivery-first .mt-mode-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.mtc-co-delivery-first .mt-mode-card { align-items: center; padding: 14px; min-height: 72px; }
body.mtc-co-delivery-first .mt-mode-card__radio { margin-block-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
body.mtc-co-delivery-first .mt-mode-card,
body.mtc-co-delivery-first .mt-mode-card__radio { transition: none; }
}
/* ===== US-020 co_validation: inline field errors + email typo fix (cro-1112.js) ===== */
body.mtc-co-validation .mt-field-error {
display: flex;
align-items: flex-start;
gap: 6px;
color: #b42318; /* 6.0:1 on white, 5.6:1 on the ivory surface */
font-size: 14px;
line-height: 1.45;
font-weight: 500;
margin: 6px 0 0;
margin-block-start: 6px;
text-align: start;
}
body.mtc-co-validation .mt-field-error::before {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-block-start: 2px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.9 3.6h1.8l-.25 6H7.35l-.25-6ZM8 12.6a1.05 1.05 0 1 1 0-2.1 1.05 1.05 0 0 1 0 2.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-.9 3.6h1.8l-.25 6H7.35l-.25-6ZM8 12.6a1.05 1.05 0 1 1 0-2.1 1.05 1.05 0 0 1 0 2.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* beats v2.2-design-fixes.css (body.woocommerce-checkout form.checkout .checkout-forms .form-row :is(...) border !important) */
body.mtc-co-validation.woocommerce-checkout form.checkout .form-row.mt-has-error :is(input.input-text, select, textarea),
body.mtc-co-validation.woocommerce-checkout form.checkout .form-row.mt-has-error .select2-container .select2-selection {
border-color: #b42318 !important;
background: #fffbfa !important;
}
body.mtc-co-validation.woocommerce-checkout form.checkout .form-row.mt-has-error :is(input.input-text, select, textarea):focus {
box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18) !important;
}
body.mtc-co-validation .mt-email-suggest {
margin: 8px 0 0;
}
body.mtc-co-validation .mt-email-suggest__btn {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
min-height: 44px;
max-width: 100%;
padding-block: 8px;
padding-inline: 14px;
border: 1px solid var(--color-hairline, rgba(115, 91, 37, 0.35));
border-radius: 10px;
background: #f7f0e1;
color: var(--color-primary, #00152a);
font: inherit;
font-size: 14px;
line-height: 1.35;
text-align: start;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
body.mtc-co-validation .mt-email-suggest__btn bdi {
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--color-accent, #735b25);
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
body.mtc-co-validation .mt-email-suggest__btn:hover {
background: #efe4cc;
border-color: var(--color-accent, #735b25);
}
body.mtc-co-validation .mt-email-suggest__btn:focus-visible {
outline: 2px solid var(--color-primary, #00152a);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
body.mtc-co-validation .mt-email-suggest__btn { transition: none; }
}
/* ===== US-021 co_sticky + co_floats ===== */
/* Mobile checkout only. >=768px: both new elements stay display:none and nothing else changes. */
.mt-co-summary,
#mt-co-sticky { display: none; }
@media (max-width: 767px) {
/* co_sticky: collapsible summary headed by the total (Target / Skip pattern) */
body.mtc-co-sticky .mt-co-summary {
display: block;
margin: 0 0 16px;
background: #fff;
border: 1px solid #e8dec5;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 21, 42, .06);
overflow: hidden;
}
body.mtc-co-sticky .mt-co-summary__head {
display: flex;
align-items: center;
gap: 10px;
min-block-size: 56px;
padding: 8px 16px;
background: #fbf8f1;
color: #00152a;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.mtc-co-sticky .mt-co-summary__head::-webkit-details-marker { display: none; }
body.mtc-co-sticky .mt-co-summary__head::marker { content: ""; }
body.mtc-co-sticky .mt-co-summary__head:focus-visible { outline: 3px solid #735b25; outline-offset: -3px; }
body.mtc-co-sticky .mt-co-summary__ico { flex: none; color: #735b25; }
body.mtc-co-sticky .mt-co-summary__label { flex: 1 1 auto; min-inline-size: 0; text-decoration: underline; text-decoration-color: rgba(0, 21, 42, .3); text-underline-offset: 3px; }
body.mtc-co-sticky .mt-co-summary__count { color: #4a5260; font-weight: 500; white-space: nowrap; }
body.mtc-co-sticky .mt-co-summary[open] .mt-co-summary__show,
body.mtc-co-sticky .mt-co-summary:not([open]) .mt-co-summary__hide { display: none; }
body.mtc-co-sticky .mt-co-summary__chev { flex: none; color: #4a5260; transition: transform .2s ease; }
body.mtc-co-sticky .mt-co-summary[open] .mt-co-summary__chev { transform: rotate(180deg); }
body.mtc-co-sticky .mt-co-summary__total { flex: none; font-size: 18px; font-weight: 800; color: #00152a; white-space: nowrap; }
body.mtc-co-sticky .mt-co-summary__total .woocommerce-Price-amount,
body.mtc-co-sticky .mt-co-summary__total bdi { font-weight: inherit; color: inherit; }
body.mtc-co-sticky .mt-co-summary__list { margin: 0; padding: 0 16px; list-style: none; border-top: 1px solid #e8dec5; }
body.mtc-co-sticky .mt-co-summary__item {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
margin: 0;
padding-block: 12px;
}
body.mtc-co-sticky .mt-co-summary__item + .mt-co-summary__item { border-top: 1px solid #f0ead9; }
body.mtc-co-sticky .mt-co-summary__thumb {
display: block;
inline-size: 48px;
block-size: 48px;
object-fit: cover;
border: 1px solid #e8dec5;
border-radius: 8px;
background: #fff;
}
body.mtc-co-sticky .mt-co-summary__name { font-size: 14px; line-height: 1.35; color: #1f2937; overflow-wrap: anywhere; }
body.mtc-co-sticky .mt-co-summary__qty { display: block; margin-block-start: 2px; font-size: 13px; color: #4a5260; }
body.mtc-co-sticky .mt-co-summary__price { font-size: 14px; font-weight: 700; color: #00152a; white-space: nowrap; }
body.mtc-co-sticky .mt-co-summary__more {
display: flex;
align-items: center;
min-block-size: 44px;
padding: 0 16px 4px;
border-top: 1px solid #f0ead9;
color: #735b25;
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* co_sticky: bottom bar (total + scroll-to-payment button) */
body.mtc-co-sticky { padding-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); }
body.mtc-co-sticky #mt-co-sticky {
display: block;
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 9980; /* under WhatsApp 9990 / a11y 99999, which sit in its band */
padding-block-end: env(safe-area-inset-bottom, 0px);
background: rgba(255, 253, 248, .98);
border-top: 1px solid #e8dec5;
box-shadow: 0 -8px 24px rgba(0, 21, 42, .12);
direction: rtl;
transition: transform .22s ease, visibility 0s linear 0s;
}
body.mtc-co-sticky #mt-co-sticky.is-hidden,
body.mtc-co-sticky.mt-co-kb #mt-co-sticky {
transform: translateY(110%);
visibility: hidden;
transition: transform .22s ease, visibility 0s linear .22s;
}
body.mtc-co-sticky .mt-co-sticky__inner {
display: flex;
align-items: center;
gap: 10px;
min-block-size: 64px;
padding-block: 8px;
padding-inline: 16px;
}
body.mtc-co-sticky.mtc-co-floats .mt-co-sticky__inner { padding-inline-end: 120px; } /* 16 + 44 WhatsApp + 8 + 44 a11y + 8 */
body.mtc-co-sticky .mt-co-sticky__sum { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; line-height: 1.15; }
body.mtc-co-sticky .mt-co-sticky__label { font-size: 12px; font-weight: 600; color: #4a5260; white-space: nowrap; }
body.mtc-co-sticky .mt-co-sticky__total { font-size: 20px; font-weight: 800; color: #00152a; white-space: nowrap; }
body.mtc-co-sticky .mt-co-sticky__total .woocommerce-Price-amount,
body.mtc-co-sticky .mt-co-sticky__total bdi { font-weight: inherit; color: inherit; }
body.mtc-co-sticky .mt-co-sticky__cta {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-inline-size: 0;
min-block-size: 48px;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, #00152a 0%, #1a3a5f 100%);
color: #fff;
font: inherit;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0, 21, 42, .28);
-webkit-tap-highlight-color: transparent;
}
body.mtc-co-sticky .mt-co-sticky__cta:active { transform: translateY(1px); }
body.mtc-co-sticky .mt-co-sticky__cta:focus-visible { outline: 3px solid #735b25; outline-offset: 3px; }
body.mtc-co-sticky .mt-co-sticky__lock { flex: none; color: #e9d29a; }
body.mtc-co-sticky #payment[tabindex="-1"]:focus { outline: none; }
/* floats left as they were (co_floats off): lift WhatsApp above the bar */
body.mtc-co-sticky:not(.mtc-co-floats) .mt-wa { inset-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* co_floats: WhatsApp 44px circle + a11y 44px handle parked in the bar band (bottom inline-end corner), never over fields */
html:has(> body.mtc-co-floats) { scroll-padding-block-end: 96px; }
body.mtc-co-floats:not(.mtc-co-sticky) { padding-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); }
body.mtc-co-floats .mt-wa {
inset-inline-end: 16px;
inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
}
body.mtc-co-floats .mt-wa .mt-wa__toggle {
inline-size: 44px;
block-size: 44px;
min-inline-size: 44px;
padding: 0;
gap: 0;
justify-content: center;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(7, 94, 84, .35);
}
body.mtc-co-floats .mt-wa .mt-wa__icon { inline-size: 24px; block-size: 24px; }
body.mtc-co-floats .mt-wa .mt-wa__label,
body.mtc-co-floats .mt-wa .mt-wa__pulse { display: none; }
html body.mtc-co-floats .a11y-toolbar,
html body.mtc-co-floats .a11y-toolbar.rtl.default,
html body.mtc-co-floats .a11y-toolbar.standard-location {
right: auto;
left: 68px; /* 16 + 44 WhatsApp + 8 */
top: auto;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
transform: none;
}
body.mtc-co-floats .a11y-toolbar.mt-a11y-dock {
display: flex;
flex-direction: column-reverse; /* handle stays put, the two plugin buttons open above it */
align-items: flex-start;
gap: 4px;
}
body.mtc-co-floats .a11y-toolbar.mt-a11y-dock:not(.is-open) .a11y-toolbar-list { display: none; }
body.mtc-co-floats .a11y-toolbar.mt-a11y-dock .a11y-toolbar-list { box-shadow: 0 4px 14px rgba(0, 21, 42, .18); }
body.mtc-co-floats .a11y-toolbar .mt-a11y-handle {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: #00152a; /* white icon 17.9:1 */
color: #fff;
box-shadow: 0 4px 12px rgba(0, 21, 42, .22);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.mtc-co-floats .a11y-toolbar.is-open .mt-a11y-handle { background: #735b25; }
body.mtc-co-floats .a11y-toolbar .mt-a11y-handle:focus-visible { outline: 3px solid #735b25; outline-offset: 2px; }
/* soft keyboard open: nothing fixed near the focused field */
body.mtc-co-floats.mt-co-kb .mt-wa,
html body.mtc-co-floats.mt-co-kb .a11y-toolbar { visibility: hidden; }
}
@media (max-width: 374px) {
body.mtc-co-sticky .mt-co-sticky__lock { display: none; }
body.mtc-co-sticky .mt-co-sticky__cta { font-size: 15px; padding: 0 10px; }
body.mtc-co-sticky .mt-co-sticky__total { font-size: 18px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
body.mtc-co-sticky #mt-co-sticky,
body.mtc-co-sticky #mt-co-sticky.is-hidden,
body.mtc-co-sticky.mt-co-kb #mt-co-sticky,
body.mtc-co-sticky .mt-co-summary__chev { transition: none; }
}
/* ===== US-022 trust_row ===== */
/* One real-data trust card right under the pay button (cart + checkout). Navy text, gold icons, 44px rows, AA. */
body.mtc-trust-row .mt-trust {
list-style: none;
margin: 14px 0 0;
padding: 2px 14px;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e7e1d4;
border-radius: 12px;
text-align: start;
}
body.mtc-trust-row .mt-trust > .mt-trust__item {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin: 0;
padding: 8px 0;
list-style: none;
font-size: .84rem;
line-height: 1.45;
color: #2b2f38;
}
body.mtc-trust-row .mt-trust > .mt-trust__item::before { content: none; }
body.mtc-trust-row .mt-trust > .mt-trust__item + .mt-trust__item { border-block-start: 1px solid #efeae0; }
body.mtc-trust-row .mt-trust__ico { flex: 0 0 20px; width: 20px; height: 20px; color: #735b25; }
body.mtc-trust-row .mt-trust__txt { flex: 1 1 auto; min-width: 0; }
body.mtc-trust-row .mt-trust__txt strong { color: #00152a; font-weight: 700; }
body.mtc-trust-row .mt-trust__sep { margin-inline: 6px; color: #735b25; }
body.mtc-trust-row .mt-trust__inst { color: #2b2f38; }
body.mtc-trust-row .mt-trust__note { display: block; font-size: .76rem; color: #4a5260; }
body.mtc-trust-row .mt-trust__link {
display: inline-block;
padding-block: 10px;
margin-block: -10px;
color: #00152a;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(115, 91, 37, .55);
text-underline-offset: 3px;
}
body.mtc-trust-row .mt-trust__link:hover { color: #735b25; text-decoration-color: currentColor; }
body.mtc-trust-row .mt-trust__link:focus-visible { outline: 2px solid #735b25; outline-offset: 2px; border-radius: 3px; }
body.mtc-trust-row .mt-trust__link--plain { font-weight: 400; color: #2b2f38; text-decoration-color: rgba(43, 47, 56, .35); }
body.mtc-trust-row .mt-trust__item--ship .mt-trust__txt strong { white-space: nowrap; }
body.mtc-trust-row.mt-mode-pickup .mt-trust__item--ship { display: none; }
/* payment chips (same markup as the footer), compact + flat inside the card */
body.mtc-trust-row .mt-trust .footer-payments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.mtc-trust-row .mt-trust .footer-payments li {
min-width: 0;
height: 26px;
margin: 0;
padding: 0 8px;
border: 1px solid #dcd6c8;
border-radius: 5px;
box-shadow: none;
background: #fff;
}
body.mtc-trust-row .mt-trust .footer-payments li::before { content: none; }
body.mtc-trust-row .mt-trust .footer-payments li span { font-size: .66rem !important; color: #0b1a2e !important; }
@media (max-width: 767px) {
body.mtc-trust-row .mt-trust { padding-inline: 12px; }
body.mtc-trust-row .mt-trust > .mt-trust__item { font-size: .82rem; }
}
/* QA-CO (US-020 follow-up): notices WC injects outside .woocommerce-notices-wrapper on checkout (coupon apply result, submit/gateway errors in .woocommerce-NoticeGroup) were unstyled grey text. */
body.mtc-co-validation.woocommerce-checkout .woocommerce > .woocommerce-error,
body.mtc-co-validation.woocommerce-checkout .woocommerce > .woocommerce-message,
body.mtc-co-validation.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.mtc-co-validation.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-message {
margin: 0 0 16px;
padding: 14px 20px;
border-radius: 12px;
list-style: none;
font-size: .95rem;
font-weight: 600;
line-height: 1.5;
}
body.mtc-co-validation.woocommerce-checkout .woocommerce > .woocommerce-error,
body.mtc-co-validation.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error { background: #fde8e8; border: 1px solid #f5c6c6; color: #9b1c1c; }
body.mtc-co-validation.woocommerce-checkout .woocommerce > .woocommerce-message,
body.mtc-co-validation.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-message { background: #e8f5ed; border: 1px solid #c6e6d0; color: #1e6b3a; }
body.mtc-co-validation.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error li,
body.mtc-co-validation.woocommerce-checkout .woocommerce > .woocommerce-error li { list-style: none; margin: 0; padding: 0; }