/**
 * TechPoint Storefront — mobile app layout.
 *
 * Enqueued with media="(max-width: <breakpoint>px)", so none of this applies
 * above the breakpoint. Everything the layout adds carries class tp-m and is
 * hidden by an inline `.tp-m{display:none}`; the rules here show it on phones.
 * Colours, radius, columns and badge text arrive as custom properties from
 * TP_Mobile::inline_css(), so this file is the same for every setting.
 */

/* ---- App feel ---------------------------------------------------------- */
body.tp-m-on { -webkit-tap-highlight-color: transparent; padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important; }
body.tp-m-on a, body.tp-m-on button { touch-action: manipulation; }
/* iOS zooms into any field under 16px and never zooms back out. */
body.tp-m-on input:not([type="checkbox"]):not([type="radio"]), body.tp-m-on select, body.tp-m-on textarea { font-size: 16px !important; }
html.tp-m-locked, html.tp-m-locked body { overflow: hidden !important; }
.tp-m-tab, .tp-m-bar button, .tp-m-bar a, .tp-m-chipbtn, .tp-m-cat, .tp-m-chip { transition: transform .12s ease; }
.tp-m-tab:active, .tp-m-bar button:active, .tp-m-bar a:active, .tp-m-chipbtn:active, .tp-m-cat:active, .tp-m-chip:active { transform: scale(.95); }

/* WoodMart styles every <button> (uppercase, square, centred, its own font).
   Our controls set their own look, so they reset those few properties. */
body.tp-m-on .tp-m button { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none; }
body.tp-m-on .tp-m-rail-item, body.tp-m-on .tp-m-sort-item { text-align: left !important; justify-content: flex-start; white-space: normal !important; overflow-wrap: anywhere; border-radius: 0 !important; }
body.tp-m-on .tp-m-chipbtn { border-radius: 999px !important; }
body.tp-m-on .tp-m-bar button { border-radius: var(--tp-m-radius) !important; }

/* Flat catalogue: one grid of category tiles. */
.tp-m-cats-flat { padding: 14px 12px 24px; }
.tp-m-cats-flat .tp-m-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; }
.tp-m-cats-flat .tp-m-cat-img { width: 56px; height: 56px; border-radius: 16px; }
.tp-m-cat-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; }

/* ---- Theme furniture the layout replaces -------------------------------- */
body.tp-m-on .wd-toolbar,
body.tp-m-on .tp-wa-fab,
body.tp-m-on .scrollToTop,
body.tp-m-on .tp-mobile-search { display: none !important; }
body.tp-m-hide-topbar .whb-top-bar { display: none !important; }

/* ---- Header: [logo][ search ............ ][cart] ------------------------ */
body.tp-m-has-searchbar .whb-general-header .wd-header-mobile-nav { display: none !important; }
body.tp-m-has-searchbar .whb-general-header .whb-mobile-left:not(:has(> :not(.wd-header-mobile-nav))) { display: none !important; }
body.tp-m-has-searchbar .whb-general-header .whb-mobile-center { flex: 1 1 auto !important; display: flex !important; align-items: center; justify-content: flex-start !important; gap: 10px; min-width: 0; }
body.tp-m-has-searchbar .whb-general-header .whb-mobile-center .wd-logo { flex: 0 0 auto; }
body.tp-m-has-searchbar .whb-general-header .whb-mobile-center .wd-logo img { max-width: 94px !important; max-height: 36px !important; width: auto !important; height: auto !important; }
body.tp-m-has-searchbar .whb-general-header .whb-mobile-right { flex: 0 0 auto !important; }
/* Product pages: a back arrow before the logo (moved in like the search bar). */
body.tp-m-on .tp-m-headback { display: flex; flex: 0 0 auto; order: -1; width: 36px; height: 40px; margin-left: -6px; }
body.tp-m-on .tp-m-headback svg { width: 24px; height: 24px; }
/* The bar is moved in while the header is still being parsed, so it can land before the logo. */
body.tp-m-on .tp-m-searchbar { display: block; flex: 1 1 auto; min-width: 0; order: 1; }
.tp-m-searchfield { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: #f2f3f5; color: #8a8f98 !important; font-size: 14px; text-decoration: none !important; transition: height .15s ease; }
.tp-m-searchfield svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tp-m-primary); }
.tp-m-searchfield span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.tp-m-scrolled .tp-m-searchfield { height: 36px; }

/* ---- Bottom nav ---------------------------------------------------------- */
body.tp-m-on .tp-m-nav {
	display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 390;
	background: #fff; border-top: 1px solid rgba(0,0,0,.07); box-shadow: 0 -2px 14px rgba(0,0,0,.06);
	padding: 2px 0 env(safe-area-inset-bottom);
}
body.tp-m-has-bar .tp-m-nav { display: none; }
.tp-m-tab { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: #6b7280 !important; font-size: 11px; font-weight: 500; line-height: 1.1; text-decoration: none !important; }
.tp-m-tab svg { width: 24px; height: 24px; }
.tp-m-tab.is-active { color: var(--tp-m-primary) !important; font-weight: 700; }
.tp-m-tab-whatsapp svg { fill: #25D366; stroke: none; }
/* Between other tabs WhatsApp is the raised centre button, as on wonderkids.pk (owner, 2026-10-09). */
.tp-m-tab-whatsapp.is-raised svg { box-sizing: content-box; width: 26px; height: 26px; margin-top: -24px; padding: 12px; border: 4px solid #fff; border-radius: 50%; background: #25D366; fill: #fff; box-shadow: 0 4px 12px rgba(37,211,102,.35); }
.tp-m-tab-whatsapp.is-raised .tp-m-tab-label { color: #1da851; font-weight: 700; }
body.tp-m-no-labels .tp-m-tab-label { display: none; }
.tp-m-badge { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E53935; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.tp-m-badge[data-count="0"] { display: none; }

/* ---- Action bars (product, checkout) ------------------------------------ */
body.tp-m-on .tp-m-bar {
	display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 390; gap: 8px; align-items: center;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -2px 14px rgba(0,0,0,.08);
}
.tp-m-bar button, .tp-m-bar-oos { flex: 1 1 0; height: 48px; min-height: 0; margin: 0; padding: 0 8px; border: 0; border-radius: var(--tp-m-radius); color: #fff !important; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1; }
body.tp-m-on .tp-m-bar .tp-m-bar-add, body.tp-m-on .tp-m-bar .tp-m-bar-buy { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.tp-m-bar-add svg, .tp-m-bar-buy svg { flex: 0 0 auto; width: 19px; height: 19px; stroke-width: 2; }
/* Under 370px everything steps down a size and WhatsApp takes a little more
   of the row, so its label still fits down to a 320px phone. */
@media (max-width: 369px) {
	body.tp-m-on .tp-m-bar .tp-m-bar-add, body.tp-m-on .tp-m-bar .tp-m-bar-buy { padding: 0 4px; font-size: 14px; }
	body.tp-m-on .tp-m-buybar .tp-m-bar-wa { flex-grow: 1.3; gap: 5px; padding: 0 6px; font-size: 14px; }
}
.tp-m-bar-add { background: var(--tp-m-primary) !important; }
.tp-m-bar-buy { background: var(--tp-m-buy) !important; }
.tp-m-bar-oos { display: flex; align-items: center; justify-content: center; background: #c4c7cc; }
/* [ WhatsApp ] [ Add to Cart ] [ Buy Now ], as on wonderkids.pk (owner,
   2026-10-10): the page's own buy row in the same colours, WhatsApp first and
   given the extra width for its icon and label. */
.tp-m-bar-wa { flex: 1.15 1 0; min-width: 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: var(--tp-m-radius); background: #25D366; color: #fff !important; font-size: 15px; font-weight: 800; text-decoration: none !important; white-space: nowrap; }
.tp-m-bar-wa svg { flex: 0 0 auto; width: 22px; height: 22px; fill: currentColor; }
.tp-m-bar-wa-label { overflow: hidden; text-overflow: ellipsis; }
body.tp-m-on .tp-m-buybar button { min-width: 0; }
.tp-m-bar-total { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-m-bar-total small { color: #6b7280; font-size: 12px; }
.tp-m-bar-total strong { color: var(--tp-m-buy); font-size: 18px; font-weight: 800; white-space: nowrap; }
.tp-m-checkoutbar button { flex: 0 0 55%; }
/* Product page: the tabs show while any of the page's own buttons is on
   screen; above or below them mobile.js sets html.tp-m-bar-on and the buy bar
   slides up in the tabs' place. Without JS the page keeps buttons and tabs. */
body.tp-m-has-buybar .tp-m-buybar { visibility: hidden; transform: translateY(110%); transition: transform .2s ease, visibility 0s linear .2s; }
html.tp-m-bar-on body.tp-m-has-buybar .tp-m-buybar { visibility: visible; transform: none; transition: transform .2s ease; }
html.tp-m-bar-on body.tp-m-has-buybar .tp-m-nav { display: none; }
@media (prefers-reduced-motion: reduce) { body.tp-m-has-buybar .tp-m-buybar { transition: none; } }

/* The in-page buttons, big: quantity, then Add to Cart | Buy Now, then a
   full-width Order via WhatsApp. */
body.tp-m-on.single-product .summary form.cart:has(> a.tp-buy-now),
body.tp-m-on.single-product .summary form.cart .woocommerce-variation-add-to-cart:has(> a.tp-buy-now) { grid-template-columns: 1fr 1fr; gap: 10px !important; }
body.tp-m-on.single-product .summary form.cart:has(> a.tp-buy-now) > .quantity,
body.tp-m-on.single-product .summary form.cart .woocommerce-variation-add-to-cart:has(> a.tp-buy-now) > .quantity { grid-column: 1 / -1; justify-self: start; }
body.tp-m-on.single-product .summary form.cart .single_add_to_cart_button,
body.tp-m-on.single-product .summary form.cart a.tp-buy-now,
body.tp-m-on.single-product .summary form.cart a.tp-whatsapp-buy { min-height: 52px !important; padding: 0 6px !important; border-radius: var(--tp-m-radius) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; white-space: nowrap; min-width: 0; }
body.tp-m-on.single-product .summary form.cart .single_add_to_cart_button { background: var(--tp-m-primary) !important; color: #fff !important; }
body.tp-m-on.single-product .summary form.cart a.tp-whatsapp-buy { grid-column: 1 / -1 !important; flex: 0 0 100% !important; width: 100% !important; max-width: none !important; gap: 10px; font-size: 16px !important; }
body.tp-m-on.single-product .summary form.cart a.tp-whatsapp-buy svg { width: 24px; height: 24px; }
body.tp-m-on.single-product .summary form.cart .quantity,
body.tp-m-on.single-product .summary form.cart .quantity input.qty { min-height: 44px !important; }

/* ---- Sheets (categories, search, sort) ---------------------------------- */
.tp-m-sheet.is-open { display: flex !important; flex-direction: column; position: fixed; inset: 0; z-index: 100000; background: #fff; animation: tp-m-up .22s ease-out; }
@keyframes tp-m-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tp-m-sheet.is-open { animation: none; } .tp-m-tab:active, .tp-m-bar button:active { transform: none; } }
.tp-m-sheet-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px 14px; border-bottom: 1px solid #eef0f2; }
.tp-m-sheet-title { flex: 1 1 auto; font-size: 17px; font-weight: 700; color: #111; }
/* A dark filled circle: the pale grey one was easy to miss (owner, 2026-10-09). */
body.tp-m-on .tp-m .tp-m-close { flex: 0 0 40px; width: 40px; height: 40px; min-height: 0; padding: 0 0 2px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50% !important; background: #111 !important; color: #fff !important; font-size: 30px; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.tp-m-close svg { width: 24px; height: 24px; }
.tp-m-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Categories */
.tp-m-cats-search { flex: 0 0 auto; position: relative; margin: 0; padding: 10px 12px; border-bottom: 1px solid #eef0f2; }
.tp-m-cats-search svg { position: absolute; left: 26px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--tp-m-primary); pointer-events: none; }
body.tp-m-on .tp-m-cats-search input[type="search"] { box-sizing: border-box; width: 100%; height: 42px; padding: 0 16px 0 42px; border: 1px solid #e5e7eb; border-radius: 999px; background: #f5f6f8; }
.tp-m-cats-none { margin: 0; padding: 14px 16px 0; color: #6b7280; font-size: 14px; }
.tp-m-cats-none[hidden], .tp-m-cat[hidden], .tp-m-cats-rail li[hidden] { display: none !important; }
.tp-m-cats-shop { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eef0f2; color: #111 !important; font-weight: 700; font-size: 14px; }
.tp-m-cats-body { flex: 1 1 auto; display: flex; min-height: 0; }
.tp-m-cats-rail { flex: 0 0 110px; margin: 0 !important; padding: 0 !important; list-style: none; background: #f5f6f8; overflow-y: auto; overscroll-behavior: contain; }
.tp-m-cats-rail li { margin: 0 !important; list-style: none; }
.tp-m-rail-item { display: block; width: 100%; min-height: 0; padding: 14px 10px; border: 0; border-left: 3px solid transparent; background: transparent !important; color: #444 !important; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: left; text-transform: none; letter-spacing: 0; }
.tp-m-rail-item.is-active { background: #fff !important; border-left-color: var(--tp-m-primary); color: var(--tp-m-primary) !important; font-weight: 700; }
.tp-m-cats-panels { flex: 1 1 auto; padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
.tp-m-cats-panel { display: none; }
.tp-m-cats-panel.is-active { display: block; }
.tp-m-cats-all { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 11px 12px; border-radius: var(--tp-m-radius); background: #f1f6fe; color: var(--tp-m-primary) !important; font-size: 14px; font-weight: 700; }
.tp-m-cats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.tp-m-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #333 !important; font-size: 12px; line-height: 1.25; text-align: center; }
.tp-m-cat-img { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #f1f3f6; color: var(--tp-m-primary); font-size: 20px; font-weight: 700; }
.tp-m-cat-img img { width: 100%; height: 100%; object-fit: cover; }

/* Search */
.tp-m-sheet.tp-m-search.has-live .tp-m-search-form { display: none; }
.tp-m-search-form { margin: 0; padding: 10px 12px 0; }
.tp-m-search-form input[type="search"] { box-sizing: border-box; width: 100%; height: 42px; padding: 0 16px; border: 1px solid #e5e7eb; border-radius: 999px; background: #f5f6f8; }
.tp-m-search-live { padding: 10px 12px 0; }
.tp-m-search-live:empty { display: none; }
.tp-m-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 12px; }
.tp-m-chips-title { flex: 0 0 100%; margin-bottom: 2px; color: #6b7280; font-size: 13px; font-weight: 700; }
.tp-m-chip { padding: 8px 14px; border-radius: 999px; background: #f2f3f5; color: #333 !important; font-size: 13px; }

/* Sort: a bottom sheet over the page rather than full screen. */
.tp-m-sortsheet.is-open { top: auto; max-height: 75vh; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom); }
.tp-m-sort-item { display: block; width: 100%; min-height: 0; padding: 16px; border: 0; border-bottom: 1px solid #f0f1f3; background: #fff !important; color: #333 !important; font-size: 15px; font-weight: 500; text-align: left; text-transform: none; letter-spacing: 0; }
.tp-m-sort-item.is-active { color: var(--tp-m-primary) !important; font-weight: 700; }

/* Filter: price ranges and a min–max pair, Clear | Show results pinned at the bottom. */
.tp-m-filtersheet .tp-m-filter-form { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.tp-m-filter-title { margin: 0; padding: 16px 16px 0; color: #111; font-size: 15px; font-weight: 700; }
.tp-m-price-chips { padding: 10px 16px 4px; }
body.tp-m-on .tp-m-price-chips .tp-m-chip { min-height: 0; margin: 0; border: 0; border-radius: 999px !important; font-size: 13px; font-weight: 500; line-height: 1.2; }
body.tp-m-on .tp-m-price-chips .tp-m-chip.is-active { background: var(--tp-m-primary) !important; color: #fff !important; }
.tp-m-price-range { display: flex; align-items: center; gap: 10px; padding: 8px 16px 16px; color: #9ca3af; }
body.tp-m-on .tp-m-price-range input { box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: var(--tp-m-radius); background: #f5f6f8; }
.tp-m-filter-cats { border-top: 1px solid #eef0f2; }
.tp-m-filter-actions { flex: 0 0 auto; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #eef0f2; }
.tp-m-filter-actions .tp-m-chipbtn { flex: 0 0 34%; height: 48px; }
body.tp-m-on .tp-m-filter-apply { flex: 1 1 auto; height: 48px; min-height: 0; margin: 0; border: 0; border-radius: var(--tp-m-radius) !important; background: var(--tp-m-primary) !important; color: #fff !important; font-size: 15px; font-weight: 700; }

/* ---- Shop and category grids -------------------------------------------- */
body.tp-m-on .tp-m-shopbar { display: flex; gap: 8px; position: sticky; top: 0; z-index: 30; margin: 0 0 10px; padding: 8px 0; background: #fff; }
.tp-m-chipbtn { flex: 1 1 0; height: 40px; min-height: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid #e5e7eb !important; border-radius: 999px; background: #fff !important; color: #333 !important; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.tp-m-chipbtn svg { width: 18px; height: 18px; }
.tp-m-chipbtn[hidden], body.tp-m-on .tp-m-shopbar[hidden] { display: none; }
/* The theme's own sort dropdown and filter button stay in the DOM for the chips to drive. */
body.tp-m-on .tp-m-shopbar ~ * .woocommerce-ordering,
body.tp-m-on .shop-loop-head .woocommerce-ordering,
body.tp-m-on .shop-loop-head .wd-show-sidebar-btn { display: none !important; }

body.tp-m-on .products.wd-grid-g,
body.tp-m-on .wd-products.wd-grid-g { --wd-col-xs: var(--tp-m-cols) !important; --wd-col-sm: var(--tp-m-cols) !important; --wd-col-md: var(--tp-m-cols) !important; --wd-col: var(--tp-m-cols) !important; --wd-gap-xs: 8px !important; --wd-gap-sm: 8px !important; --wd-gap: 8px !important; }
body.tp-m-on .wd-product .product-wrapper { padding: 0 0 10px !important; overflow: hidden; border-radius: var(--tp-m-radius); background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.07); }
body.tp-m-on .wd-product .product-element-top { position: relative; margin-bottom: 8px !important; border-radius: 0; }
body.tp-m-on .wd-product .wd-entities-title { min-height: 2.7em; margin: 0 8px 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px !important; line-height: 1.35 !important; text-align: left; }
body.tp-m-on .wd-product .price { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0 8px !important; font-size: 15px !important; text-align: left; }
body.tp-m-on .wd-product .price ins, body.tp-m-on .wd-product .price > .amount { color: var(--tp-m-primary) !important; font-weight: 800; text-decoration: none; }
body.tp-m-on .wd-product .price del { color: #9ca3af; font-size: 12px; }
/* Tapping the card opens the product, as in every shopping app. */
body.tp-m-on .wd-product .tp-actions,
body.tp-m-on .wd-product .wd-add-btn,
body.tp-m-on .wd-product .wd-buttons,
body.tp-m-on .wd-product .wd-product-cats,
body.tp-m-on .wd-product .wd-product-brands,
body.tp-m-on .wd-product .wd-product-countdown { display: none !important; }
body.tp-m-on .product-labels { top: 6px !important; left: 6px !important; }
body.tp-m-on .product-labels .onsale { min-height: 0; padding: 3px 6px; border-radius: 4px; background: var(--tp-m-buy) !important; color: #fff !important; font-size: 11px; font-weight: 700; }
body.tp-m-no-discount .product-labels .onsale { display: none !important; }
body.tp-m-on .wd-product .product-element-top::after { content: var(--tp-m-badge); position: absolute; left: 6px; bottom: 6px; z-index: 2; padding: 2px 6px; border-radius: 4px; background: rgba(17,24,39,.78); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .2px; pointer-events: none; }

/* ---- Product page ------------------------------------------------------- */
body.tp-m-gallery.single-product .product-images { margin-left: -15px; margin-right: -15px; }
body.tp-m-gallery.single-product .wd-gallery-thumb { display: none !important; }
body.tp-m-gallery.single-product .wd-gallery-images { position: relative; }
body.tp-m-on .tp-m-gallery-count { display: block; position: absolute; right: 12px; bottom: 12px; z-index: 5; padding: 3px 10px; border-radius: 999px; background: rgba(17,24,39,.6); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
body.tp-m-on .tp-m-gallery-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.tp-m-gallery-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.22); transition: width .15s ease; }
.tp-m-gallery-dots i.is-active { width: 16px; background: var(--tp-m-primary); }
/* Price first, then the title, as Daraz reads. */
body.tp-m-on.single-product .summary-inner { display: flex; flex-direction: column; }
body.tp-m-on.single-product .summary-inner > .price { order: -2; }
body.tp-m-on.single-product .summary-inner > .product_title { order: -1; }
body.tp-m-on.single-product .summary-inner > .price { margin-bottom: 6px !important; color: var(--tp-m-primary) !important; font-size: 26px !important; font-weight: 800; }
body.tp-m-on.single-product .summary-inner > .price del { color: #9ca3af; font-size: 15px; font-weight: 400; }
body.tp-m-on.single-product .product_title { font-size: 18px !important; line-height: 1.35 !important; }
body.tp-m-on .tp-m-delivery { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; padding: 10px 12px; border-radius: var(--tp-m-radius); background: #f1f6fe; color: #1f2937; font-size: 13px; font-weight: 600; }
body.tp-m-on .tp-m-delivery svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--tp-m-primary); }

/* ---- Cart (WooCommerce Cart block) -------------------------------------- */
body.tp-m-on .wc-block-cart__submit-button { min-height: 50px; border-radius: var(--tp-m-radius) !important; background: var(--tp-m-buy) !important; color: #fff !important; font-weight: 700; }
body.tp-m-on .wc-block-cart__submit-container--sticky { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; z-index: 390; }
body.tp-m-on .wc-block-cart-items__row { border-radius: var(--tp-m-radius); }

/* The Cart block's sticky button would sit on top of the tabs. */
body.tp-m-on:not(.tp-m-has-bar) .wc-block-cart__submit-container--sticky { bottom: calc(58px + env(safe-area-inset-bottom)) !important; padding-bottom: 16px !important; }

/* ---- Cart / checkout: back-arrow bar in place of the site header -------- */
body.tp-m-has-appbar { padding-top: 54px !important; }
body.tp-m-has-appbar .whb-header,
body.tp-m-has-appbar .wd-page-title { display: none !important; }
body.tp-m-on .tp-m-appbar { display: flex; position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 400; align-items: center; gap: 2px; height: 54px; padding: 0 8px 0 4px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.07); }
.tp-m-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #111 !important; }
.tp-m-back svg { width: 24px; height: 24px; }
.tp-m-appbar-title { color: #111; font-size: 17px; font-weight: 700; }

/* ---- Checkout (classic) ------------------------------------------------- */
body.tp-m-on.woocommerce-checkout .form-row .input-text,
body.tp-m-on.woocommerce-checkout .form-row select,
body.tp-m-on.woocommerce-checkout .select2-container .select2-selection { min-height: 48px; border-radius: var(--tp-m-radius) !important; }
body.tp-m-on.woocommerce-checkout #place_order { min-height: 52px; border-radius: var(--tp-m-radius) !important; background: var(--tp-m-buy) !important; }
body.tp-m-on.woocommerce-checkout #order_review_heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
body.tp-m-on.woocommerce-checkout #order_review_heading::after { content: "▾"; font-size: 14px; transition: transform .15s ease; }
body.tp-m-on.woocommerce-checkout.tp-m-review-closed #order_review_heading::after { transform: rotate(-90deg); }
body.tp-m-on.woocommerce-checkout.tp-m-review-closed .woocommerce-checkout-review-order-table { display: none; }

/* ---- Home: category row instead of the desktop hero slider ------------- */
/* The hero is a desktop banner; on a phone it crops the picture, fades the
   text and pushes the first product ~400px down. */
/* mobile.js puts the category row first, so the slider is then its next sibling. */
body.tp-m-on.home .wd-content-area > article > .wp-block-wd-slider:first-child,
body.tp-m-on.home .wd-content-area > article > .tp-m-homecats + .wp-block-wd-slider { display: none !important; }
body.tp-m-on .tp-m-homecats { display: flex; gap: 6px; margin: 4px -15px 18px; padding: 4px 15px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tp-m-homecats::-webkit-scrollbar { display: none; }
.tp-m-homecats .tp-m-cat { flex: 0 0 72px; scroll-snap-align: start; font-size: 11.5px; }
.tp-m-homecats .tp-m-cat-img { width: 60px; height: 60px; border-radius: 16px; }

/* ---- Listing/account/cart titles: one slim row, not a black banner ----- */
body.tp-m-on .wd-page-title { padding: 10px 0 !important; min-height: 0 !important; background: #fff !important; }
body.tp-m-on .wd-page-title .wd-page-title-bg { display: none !important; }
body.tp-m-on .wd-page-title .container { display: block !important; padding-top: 0 !important; padding-bottom: 0 !important; text-align: left !important; }
body.tp-m-on .wd-page-title .wd-title-wrapp { width: 100%; }
/* WoodMart pads the content under a page title for the tall banner. */
body.tp-m-on .wd-page-title ~ .wd-content-layout,
body.tp-m-on .wd-page-title ~ main { padding-top: 6px !important; }
body.tp-m-on .wd-page-title .wd-title-wrapp { justify-content: flex-start !important; gap: 4px; text-align: left !important; }
body.tp-m-on .wd-page-title .title,
body.tp-m-on .wd-page-title .entry-title { margin: 0 !important; color: #111 !important; font-size: 19px !important; line-height: 1.3 !important; text-align: left; text-transform: none; }
body.tp-m-on .wd-page-title .wd-back-btn { --wd-action-color: #111; color: #111; }
body.tp-m-on .wd-page-title .wd-breadcrumbs { display: none !important; }
/* The title already names the page; keep the result count, drop the crumbs. */
body.tp-m-on .shop-loop-head .wd-breadcrumbs { display: none !important; }
body.tp-m-on .shop-loop-head { margin-bottom: 6px !important; }

/* ---- Product page clutter -------------------------------------------- */
body.tp-m-on.single-product .wd-products-nav,
body.tp-m-on.single-product .product-share { display: none !important; }
body.tp-m-no-reviews .wd-accordion-item:has(.tab-title-reviews),
body.tp-m-no-reviews .wc-tabs #tab-title-reviews,
body.tp-m-no-reviews .wc-tabs .reviews_tab { display: none !important; }

/* ---- Header account icon (when Account is not a bottom tab) ------------ */
body.tp-m-on .tp-m-headacct { display: flex; align-items: center; justify-content: center; width: 38px; height: 40px; color: #333 !important; }
.tp-m-headacct svg { width: 24px; height: 24px; }

/* ---- My Account dashboard: greeting + tiles ------------------------------ */
body.tp-m-on .tp-m-acct { display: block; }
body.tp-m-on.woocommerce-account:has(.tp-m-acct) .woocommerce-MyAccount-navigation,
body.tp-m-on.woocommerce-account:has(.tp-m-acct) .wd-my-account-sidebar,
body.tp-m-on .woocommerce-MyAccount-content:has(.tp-m-acct) > p,
body.tp-m-on .woocommerce-MyAccount-content:has(.tp-m-acct) .wd-my-account-links { display: none !important; }
/* The page title already says "My account". */
body.tp-m-on.woocommerce-account .wd-my-account-sidebar .woocommerce-MyAccount-title { display: none !important; }
.tp-m-acct-hi { margin: 4px 0 14px !important; font-size: 20px; font-weight: 800; color: #111; }
.tp-m-acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-m-acct-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--tp-m-radius); background: #f5f7fb; color: #111 !important; text-decoration: none !important; }
.tp-m-acct-tile svg { width: 26px; height: 26px; margin-bottom: 4px; color: var(--tp-m-primary); }
.tp-m-acct-tile strong { font-size: 15px; }
.tp-m-acct-tile span { font-size: 12px; color: #6b7280; }
.tp-m-acct-tile.is-wa svg { fill: #25D366; stroke: none; }
.tp-m-acct-out { display: block; margin: 18px 0 6px; padding: 12px; border: 1px solid #e5e7eb; border-radius: var(--tp-m-radius); text-align: center; color: #b91c1c !important; font-weight: 600; }
/* Sub-pages (Orders, Addresses…): the menu as a sideways chip row, not a tall list. */
body.tp-m-on.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; gap: 8px; overflow-x: auto; margin: 0 -15px 14px !important; padding: 0 15px 6px !important; scrollbar-width: none; }
body.tp-m-on.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; margin: 0 !important; border: 0 !important; }
body.tp-m-on.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 8px 14px !important; border-radius: 999px; background: #f2f3f5; color: #333 !important; font-size: 13px; white-space: nowrap; }
body.tp-m-on.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--tp-m-primary); color: #fff !important; }