/*
 * Phone and tablet layer for the Synergy Customer Portal (B-33 mobile pass).
 *
 * Loaded last on every front-end page (functions/mobile.php), after style.css,
 * css/woocommerce.css and WooCommerce's own sheets, so it only has to override
 * what breaks or is too small below desktop widths. Nothing here applies above
 * 1023px: desktop keeps exactly the rules it had.
 *
 * Breakpoints follow the theme: 1023 (tablet: header unfixed, nav centred),
 * 767 (phone: fixed Call/Email bar appears), 639 (phone: nav becomes the
 * Menu drawer). Targets aim for 44px tall touch areas, and form controls use
 * 16px text so iOS Safari does not zoom the page when one is focused.
 */


/* ==========================================================================
   Tablet and phone (up to 1023px)
   ========================================================================== */
@media only screen and (max-width: 1023px) {

	/* ---- Top bar: Shop, cart, name, Log Out as 44px touch targets ---- */
	#upper .upper_actions {gap: 4px;}
	#upper .upper_actions > a {box-sizing: border-box;min-height: 44px;}
	#upper .spm_button.shop {display: inline-flex;align-items: center;padding: 0 14px;}
	#upper .upper_actions__link {display: inline-block;padding: 0 6px;line-height: 44px;}
	#upper .upper_actions__cart {justify-content: center;min-width: 44px;}
	#upper .upper_actions__cart_count {right: 2px;top: 5px;}
	#upper .spm_button.phone_num {display: inline-flex;align-items: center;box-sizing: border-box;min-height: 44px;}

	/* ---- Category chips, product tabs, footer links: 44px touch targets ---- */
	.product_categories li a {display: flex;align-items: center;gap: 0.35em;box-sizing: border-box;min-height: 44px;}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {padding-top: 0.75em;padding-bottom: 0.75em;}
	#footer .social_media a {display: inline-flex;align-items: center;justify-content: center;min-width: 44px;min-height: 44px;margin: 0 0.15em;}
	#sub_footer .copyright a {display: inline-block;padding: 12px 4px;}

	/* ---- Form controls: 44px tall, 16px text (no iOS focus zoom) ---- */
	.synergy-catalog-toolbar__search input[type="search"],
	.synergy-catalog-toolbar__filter select,
	.woocommerce .woocommerce-ordering select {height: 44px;font-size: 16px;}
	.woocommerce .woocommerce-ordering select {box-sizing: border-box;}
	.woocommerce button.button.synergy-catalog-toolbar__submit {height: 44px;font-size: 16px;}
	.synergy-catalog-toolbar__view {height: 46px;}
	.synergy-catalog-toolbar__view-btn {width: 44px;}
	.woocommerce-breadcrumb a {display: inline-block;padding: 4px 0;}
	.woocommerce nav.woocommerce-pagination ul li a,
	.woocommerce nav.woocommerce-pagination ul li span {box-sizing: border-box;min-width: 44px;min-height: 44px;line-height: 1.6;}

	.woocommerce ul.products li.product .synergy-loop-buy .quantity .qty,
	.woocommerce ul.products li.product .synergy-loop-buy .button,
	.woocommerce ul.products li.product > .button {height: 44px;}
	.woocommerce ul.products li.product .synergy-loop-buy .quantity .qty {font-size: 16px;}
	.woocommerce ul.products li.product > .button {display: inline-flex;align-items: center;justify-content: center;box-sizing: border-box;}

	.woocommerce div.product form.cart .quantity input.qty,
	.woocommerce div.product form.cart .button {box-sizing: border-box;height: 44px;}

	/* ---- Catalog list view, tablet: the availability text moves under the
	        name so the name keeps its width (the desktop columns need ~960px) ---- */
	.woocommerce ul.products.synergy-view-list .synergy-list-header,
	.woocommerce ul.products.synergy-view-list li.product {grid-template-columns: 56px minmax(0, 1fr) 110px 220px;grid-template-rows: auto auto auto;row-gap: 2px;}
	.woocommerce ul.products.synergy-view-list .synergy-list-header {grid-template-rows: auto;}
	.woocommerce ul.products.synergy-view-list .synergy-list-header span:nth-child(3) {display: none;}
	.woocommerce ul.products.synergy-view-list li.product a.woocommerce-LoopProduct-link img {grid-row: 1 / 4;align-self: start;}
	.woocommerce ul.products.synergy-view-list li.product .synergy-lead-time {grid-column: 2;grid-row: 3;font-size: 12.5px;}
	.woocommerce ul.products.synergy-view-list li.product .price {grid-column: 3;grid-row: 1 / 4;}
	.woocommerce ul.products.synergy-view-list li.product .synergy-loop-buy,
	.woocommerce ul.products.synergy-view-list li.product > .button {grid-column: 4;grid-row: 1 / 4;}

	/* ---- Block cart / checkout: quantity stepper, remove, Edit links ---- */
	body .wc-block-components-quantity-selector {min-height: 44px;}
	/* Taller only: a wider stepper squeezes its own number box and pushes the
	   line total past the edge of a 375px screen */
	body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {min-height: 44px;}
	body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {min-height: 44px;font-size: 16px;}
	body .wc-block-cart-item__remove-link {display: inline-flex;align-items: center;justify-content: center;min-height: 44px;}
	/* "You may be interested in" under the cart (a product-collection block
	   carrying the plugin's quantity box): box and button side by side, 44px */
	.wc-block-cart .wc-block-product .synergy-loop-buy {display: flex;flex-wrap: wrap;justify-content: center;align-items: stretch;gap: 8px;}
	.wc-block-cart .wc-block-product .synergy-loop-buy .quantity {flex: 0 0 72px;margin: 0;}
	.wc-block-cart .wc-block-product .synergy-loop-buy .qty {width: 72px;height: 44px;box-sizing: border-box;margin: 0;padding: 0 6px;text-align: center;font: inherit;font-size: 16px;background: #fff;border: 1px solid #8c8c8c;border-radius: 6px;}
	.wc-block-cart .wc-block-product .synergy-loop-buy .wp-block-button__link {box-sizing: border-box;min-height: 44px;margin: 0;white-space: nowrap;}
	body .wc-block-components-address-card__edit {display: inline-flex;align-items: center;min-height: 44px;padding: 0 4px;}

	/* ---- My Account menu and order buttons, Place order, notice buttons ---- */
	.woocommerce-account .woocommerce-MyAccount-navigation li a {box-sizing: border-box;min-height: 44px;}
	.woocommerce-account .woocommerce-orders-table__cell-order-number a {display: inline-block;padding: 12px 0;}
	.woocommerce #payment #place_order {min-height: 44px;}
	.woocommerce .woocommerce-message .button,
	.woocommerce .woocommerce-info .button {display: inline-flex;align-items: center;box-sizing: border-box;min-height: 44px;}
	.woocommerce-account .woocommerce-orders-table .button,
	.woocommerce-account .woocommerce-MyAccount-content .order-again .button {display: inline-flex;align-items: center;box-sizing: border-box;min-height: 44px;}
}


/* ==========================================================================
   Tablet only (600px to 1023px)
   ========================================================================== */
@media only screen and (min-width: 600px) and (max-width: 1023px) {

	/* ---- Single product: picture and buying column side by side, not a
	        full-width picture pushing the price below the fold. #content
	        matches WooCommerce's own small-screen rule, which forces 100%. ---- */
	.woocommerce #content div.product div.images {width: 40%;}
	.woocommerce #content div.product div.summary {width: 56%;}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

	/* ---- Block checkout keeps its two columns here, and the Order summary
	        column is ~240px: the line total takes its own line under the
	        item instead of running past the screen edge ---- */
	body .wc-block-components-sidebar .wc-block-components-order-summary-item {flex-wrap: wrap;}
	body .wc-block-components-sidebar .wc-block-components-order-summary-item__description {flex: 1 1 0;min-width: 0;}
	body .wc-block-components-sidebar .wc-block-components-order-summary-item__total-price {flex: 1 0 100%;margin-left: 0;text-align: right;}
}


/* ==========================================================================
   Phone (up to 767px)
   ========================================================================== */
@media only screen and (max-width: 767px) {

	/* ---- Top bar: the phone button stays hidden here, as in style.css; the
	        links wrap to a second row rather than run off the screen (B-32 adds
	        a Pay invoices link), and a long name is cut short ---- */
	#upper .spm_button.phone_num {display: none;}
	#upper .upper_actions {flex-wrap: wrap;justify-content: flex-end;}
	#upper .upper_actions__link {max-width: 40vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

	/* ---- Fixed Call / Email bar: 44px, and the page ends above it ---- */
	body {padding-bottom: 44px !important;}
	#mobile_footer ul li a {padding: 12px 0;}
	#cookie_notice {bottom: 44px;}
	#cookie_notice .spm_button {padding: 0.85em 1.9em;}
	/* Cart and checkout have their own sticky checkout / place-order button at
	   the bottom of the screen; the marketing Call / Email bar sat on top of it. */
	body.woocommerce-cart,
	body.woocommerce-checkout {padding-bottom: 0 !important;}
	.woocommerce-cart #mobile_footer,
	.woocommerce-checkout #mobile_footer {display: none;}

	/* ---- Catalog: category chips scroll sideways in one row instead of
	        stacking five rows above the products ---- */
	.product_categories {margin: 0 -20px 16px;}
	.product_categories ul {flex-wrap: nowrap;overflow-x: auto;padding: 0 20px 4px;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
	.product_categories ul::-webkit-scrollbar {display: none;}
	.product_categories li {flex: 0 0 auto;}
	.product_categories li a {white-space: nowrap;}

	/* ---- Catalog toolbar: [search][Search] / [category] / [availability][layout] ---- */
	.synergy-catalog-toolbar {gap: 8px;}
	.synergy-catalog-toolbar__search {flex: 1 1 150px;min-width: 0;}
	.synergy-catalog-toolbar__category {flex: 1 1 100%;}
	.synergy-catalog-toolbar__filter {flex: 1 1 auto;min-width: 0;}
	.synergy-catalog-toolbar__filter select {width: 100%;min-width: 0;}
	.woocommerce .woocommerce-ordering,
	.woocommerce .woocommerce-ordering select {width: 100%;}

	/* ---- Catalog list view, phone: picture | name + price on top, then
	        SKU, availability and a full-width quantity + Add to cart row ---- */
	.woocommerce ul.products.synergy-view-list .synergy-list-header {display: none;}
	.woocommerce ul.products.synergy-view-list li.product {grid-template-columns: 56px minmax(0, 1fr) auto;grid-template-rows: auto;column-gap: 12px;row-gap: 4px;align-items: start;padding: 12px;}
	.woocommerce ul.products.synergy-view-list li.product a.woocommerce-LoopProduct-link img {grid-column: 1;grid-row: 1 / 5;}
	.woocommerce ul.products.synergy-view-list li.product .woocommerce-loop-product__title {grid-column: 2;grid-row: 1;-webkit-line-clamp: 3;}
	.woocommerce ul.products.synergy-view-list li.product .price {grid-column: 3;grid-row: 1;font-size: 16px;}
	.woocommerce ul.products.synergy-view-list li.product .price .synergy-price-on-request {max-width: 7em;text-align: right;}
	.woocommerce ul.products.synergy-view-list li.product .sku {grid-column: 2 / 4;grid-row: 2;}
	.woocommerce ul.products.synergy-view-list li.product .synergy-lead-time {grid-column: 2 / 4;grid-row: 3;}
	.woocommerce ul.products.synergy-view-list li.product .synergy-loop-buy,
	.woocommerce ul.products.synergy-view-list li.product > .button {grid-column: 2 / 4;grid-row: 4;margin-top: 6px;}

	/* ---- Single product: tabs as one sideways-scrolling row of
	        44px buttons instead of WooCommerce's wrapped folder tabs ---- */
	.woocommerce div.product .woocommerce-tabs ul.tabs {display: flex;gap: 6px;margin: 0 -20px 16px;padding: 0 20px 4px;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
	.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {display: none;}
	.woocommerce div.product .woocommerce-tabs ul.tabs::before,
	.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
	.woocommerce div.product .woocommerce-tabs ul.tabs li::after {display: none;}
	.woocommerce div.product .woocommerce-tabs ul.tabs li {flex: 0 0 auto;margin: 0;padding: 0;border: 0;border-radius: 10px;}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {display: flex;align-items: center;min-height: 44px;padding: 0 16px;box-sizing: border-box;white-space: nowrap;}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active {background-color: var(--spm-color-blue);}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {color: #fff;}

	/* ---- Notices with a button (View cart, Confirm email address): the text
	        first, the button under it, instead of the button floated into it ---- */
	.woocommerce .woocommerce-message:has(> .button),
	.woocommerce .woocommerce-info:has(> .button) {display: flex;flex-direction: column;align-items: flex-start;gap: 10px;}
	.woocommerce .woocommerce-message > .button,
	.woocommerce .woocommerce-info > .button {float: none;margin: 0;}

	/* ---- My Account: the menu as a two-column grid, not seven stacked rows ---- */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {display: grid;grid-template-columns: 1fr 1fr;gap: 6px;}
	.woocommerce-account .woocommerce-MyAccount-navigation li {margin: 0;}
	.woocommerce-account .woocommerce-MyAccount-navigation li a {display: flex;align-items: center;box-sizing: border-box;min-height: 44px;height: 100%;padding: 0.4em 0.9em;font-size: 15px;line-height: 1.2;}

	/* ---- Orders table: WooCommerce's small-screen sheet hides the row header,
	        which is the order number; show it like the other cells, and set
	        each order apart ---- */
	.woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number {display: flex;align-items: center;justify-content: space-between;padding-top: 0;padding-bottom: 0;}
	.woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number::before {content: attr(data-title) ": ";font-weight: 700;}
	.woocommerce table.my_account_orders tbody tr + tr {border-top: 8px solid var(--spm-color-background-grey);}
	.woocommerce table.my_account_orders td.woocommerce-orders-table__cell-order-actions::before {display: none;}
	.woocommerce table.my_account_orders td.woocommerce-orders-table__cell-order-actions {display: flex;flex-wrap: wrap;justify-content: flex-end;gap: 8px;}
	.woocommerce table.my_account_orders td.woocommerce-orders-table__cell-order-actions .button {margin: 0;}

	/* ---- Order received: the order facts as a two-column list instead of
	        floated items with dangling dashed dividers ---- */
	.woocommerce ul.order_details {display: grid;grid-template-columns: 1fr 1fr;gap: 14px 16px;margin: 0 0 2em;padding: 0;}
	.woocommerce ul.order_details::before,
	.woocommerce ul.order_details::after {display: none;}
	.woocommerce ul.order_details li {float: none;min-width: 0;margin: 0;padding: 0;border: 0;overflow-wrap: anywhere;}
	.woocommerce ul.order_details li.email,
	.woocommerce ul.order_details li.method {grid-column: 1 / -1;}
}


/* ==========================================================================
   Narrow phone (up to 639px): the nav is the Menu drawer
   ========================================================================== */
@media only screen and (max-width: 639px) {

	/* ---- Header: Menu button and a smaller logo on one row (~65px)
	        instead of stacked (~180px), so content starts above the fold ---- */
	#upper .wrap {padding: 4px 12px;}
	#header .wrap {display: flex;align-items: center;justify-content: space-between;padding: 6px 16px 6px 4px;}
	#header #responsive_menu_button {position: relative;top: auto;display: flex;align-items: center;min-height: 44px;padding: 0 12px 0 45px;}
	#header .logo {width: 150px;height: 49px;margin: 0;background-size: 150px 49px;}

	/* ---- Menu drawer: 44px rows ---- */
	#responsive_menu .top_bar .close {min-height: 44px;}
	#responsive_menu .top_bar {padding-top: 0;padding-bottom: 0;}
	#responsive_menu .menu > li > a {padding: 12px 20px;}
	#responsive_menu .sub-menu > li > a {padding-top: 12px;padding-bottom: 12px;}
	#responsive_menu .social_media a {display: inline-flex;align-items: center;justify-content: center;min-width: 44px;min-height: 44px;}
}