/* =========================================================
   SINO PLANT — PORTRAIT KIOSK DISPLAY

   Purpose:
   - Large portrait touch displays only
   - Normal desktop / tablet / mobile remain unchanged
   - 1080px-wide kiosk: 3-column product layout
   - Very large kiosk viewport: 4-column product layout
   ========================================================= */

@media screen
and (min-width: 771px)
and (max-width: 2300px)
and (min-height: 1500px)
and (orientation: portrait) {

	:root {
		--sino-kiosk-gutter: clamp(28px, 3vw, 60px);
		--sino-kiosk-gap: clamp(22px, 2vw, 34px);
		--sino-kiosk-yellow: #fecd08;
		--sino-kiosk-black: #0d0d0d;
	}


	/* =====================================================
	   1. GLOBAL KIOSK PAGE
	   ===================================================== */

	html,
	body {
		width: 100% !important;
		max-width: none !important;
		min-height: 100% !important;
		overflow-x: hidden !important;
	}

	/* =====================================================
	   2. SITE WRAPPER
	   ===================================================== */

	.site-container {
		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		max-width: none !important;

		min-height: 100vh !important;
		min-height: 100dvh !important;

		margin: 0 !important;
	}


	/* =====================================================
	   3. LARGE KIOSK HEADER
	   ===================================================== */

	.header-container {
		width: 100% !important;
		max-width: none !important;

		height: auto !important;
		min-height: 220px !important;

		padding: 0 !important;

		background: #000000 !important;

		overflow: visible !important;
		box-sizing: border-box !important;
	}


	.header {
		width: 100% !important;
		max-width: none !important;

		min-height: 200px !important;
		height: auto !important;

		margin: 0 !important;
		padding: 0 !important;

		box-sizing: border-box !important;
	}


	/*
	 * The real header contents live inside nav.
	 * This is the important difference from the previous kiosk CSS.
	 */
	.header > nav {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;

		width: 100% !important;
		min-height: 200px !important;

		padding-left: var(--sino-kiosk-gutter) !important;
		padding-right: var(--sino-kiosk-gutter) !important;

		box-sizing: border-box !important;
	}


	/* =====================================================
	   4. KIOSK LOGO
	   ===================================================== */

	.header .top-logo {
		display: block !important;

		flex: 0 0 auto !important;

		margin: 0 clamp(24px, 3vw, 50px) 0 0 !important;
		padding: 0 !important;

		position: relative !important;
		left: auto !important;
		top: auto !important;

		transform: none !important;
	}


	.header .top-logo img {
		display: block !important;

		width: clamp(190px, 19vw, 270px) !important;
		max-width: none !important;
		height: auto !important;

		margin: 0 !important;
	}


	/* =====================================================
	   5. DESKTOP NAVIGATION
	   ===================================================== */

	.header .navigation {
		display: flex !important;
		flex: 1 1 auto !important;
		align-items: center !important;

		min-width: 0 !important;
		min-height: 0 !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	.header .nav {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;

		width: auto !important;

		min-height: 0 !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	.header .navlink {
		display: flex !important;
		align-items: center !important;

		width: auto !important;

		top: 0 !important;

		padding-left: clamp(9px, 1.15vw, 18px) !important;
		padding-right: clamp(9px, 1.15vw, 18px) !important;

		font-size: clamp(18px, 1.55vw, 24px) !important;
		line-height: 1 !important;

		box-sizing: border-box !important;
	}


	.header .navlink > a {
		display: flex !important;
		align-items: center !important;

		width: auto !important;

		min-height: 76px !important;

		padding-top: 0 !important;
		padding-bottom: 0 !important;

		white-space: nowrap !important;

		box-sizing: border-box !important;
	}


	/* =====================================================
	   6. HEADER SEARCH / CART TOUCH TARGETS
	   ===================================================== */

	.header .search-button-holder,
	.header .cart-button-holder {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		flex: 0 0 auto !important;

		min-width: 64px !important;
		min-height: 64px !important;

		margin: 0 !important;

		top: auto !important;
	}


	.header .search-button-holder .fa,
	.header .cart-button-holder .fa {
		font-size: 26px !important;
	}


	/* =====================================================
	   7. PRODUCT DROPDOWN — KIOSK TOUCH SIZE
	   ===================================================== */

	.header .navlinkdropdown,
	.header .navlinkdropdown-submenu {
		min-width: 340px !important;

		padding: 12px !important;
	}


	.header .navlinkdropdownlink,
	.header .navlinkdropdown-submenu .navlinkdropdown-item > a {
		min-height: 54px !important;

		padding: 13px 15px !important;

		font-size: 15px !important;
		line-height: 1.3 !important;
	}


	.header-yellow-line {
		height: 12px !important;
	}


	/* =====================================================
	   8. REMOVE THE THEME'S 1300PX CONTENT CAPS
	   ===================================================== */

	.content-container,
	.main-content,
	.content,
	.site-main,
	.container,
	.front-slide-show,
	.custom-carousel-wrapper,
	.custom-carousel-container {
		width: 100% !important;
		max-width: none !important;

		box-sizing: border-box !important;
	}


	.content-container {
		flex: 1 0 auto !important;

		margin: 0 !important;

		background: #ffffff !important;
	}


	.main-content {
		margin: 0 !important;
	}


	.content {
		margin: 0 !important;

		padding-top: clamp(30px, 2.5vw, 48px) !important;
		padding-left: var(--sino-kiosk-gutter) !important;
		padding-right: var(--sino-kiosk-gutter) !important;
		padding-bottom: 110px !important;
	}


	.container {
		padding-left: var(--sino-kiosk-gutter) !important;
		padding-right: var(--sino-kiosk-gutter) !important;
	}


	/* =====================================================
	   9. HOMEPAGE HERO
	   ===================================================== */

	.front-slide-show {
		margin-left: 0 !important;
		margin-right: 0 !important;

		border-radius: 0 !important;

		aspect-ratio: 11 / 4 !important;
	}


	.front-slide-control {
		min-width: 74px !important;
		min-height: 74px !important;
	}


	.front-slide-pager {
		bottom: 20px !important;

		gap: 16px !important;
	}


	.front-slide-pager span {
		width: 18px !important;
		height: 18px !important;

		border-radius: 50% !important;
	}


	/* =====================================================
	   10. CATALOGUE / SEARCH / RELATED GRID
	   ===================================================== */

	.site-main > ul.products.columns-4,
	ul.products.columns-4:not(.site-main > ul.products),
	ul.products.search-results-products {
		display: grid !important;

		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

		gap: 32px 26px !important;

		width: 100% !important;

		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
	}


	/* =====================================================
	   11. PRODUCT CARDS
	   ===================================================== */

	.site-main > ul.products.columns-4 > li.product,
	ul.products.columns-4:not(.site-main > ul.products) > li.product,
	ul.products.search-results-products > li.product {
		border-radius: 18px !important;

		box-shadow:
			0 10px 30px rgba(0, 0, 0, 0.07) !important;
	}


	/* =====================================================
	   12. PRODUCT CARD TITLES
	   ===================================================== */

	.site-main > ul.products.columns-4 > li.product
	.woocommerce-loop-product__title,

	ul.products.columns-4:not(.site-main > ul.products)
	> li.product h2.woocommerce-loop-product__title,

	ul.products.search-results-products
	.woocommerce-loop-product__title {

		min-height: 82px !important;

		padding: 20px 20px 6px !important;

		font-size: 21px !important;
		line-height: 1.3 !important;
	}


	/* =====================================================
	   13. ARCHIVE PRODUCT IMAGES
	   ===================================================== */

	.site-main > ul.products.columns-4
	> li.product
	.woocommerce-LoopProduct-link
	> img {

		height: 260px !important;

		padding: 10px !important;
	}


	/* =====================================================
	   14. RELATED PRODUCT IMAGES
	   ===================================================== */

	ul.products.columns-4:not(.site-main > ul.products)
	> li.product
	> a.woocommerce-LoopProduct-link
	> img {

		height: 280px !important;

		padding: 10px !important;
	}


	/* =====================================================
	   15. SEARCH PRODUCT IMAGES
	   ===================================================== */

	ul.products.search-results-products
	.catalogue-image-wrapper {

		height: 260px !important;

		padding: 10px !important;
	}


	/* =====================================================
	   16. PRODUCT SKU
	   ===================================================== */

	.site-main > ul.products.columns-4
	> li.product
	.sino-product-card__sku,

	ul.products.columns-4:not(.site-main > ul.products)
	> li.product p.product-sku {

		font-size: 13px !important;
		line-height: 1.4 !important;
	}


	.site-main > ul.products.columns-4
	> li.product
	.sino-product-card__sku {

		margin-left: 20px !important;
		margin-right: 20px !important;
		margin-bottom: 10px !important;
	}


	/* =====================================================
	   17. PRODUCT PRICES
	   ===================================================== */

	.site-main > ul.products.columns-4
	> li.product
	.price,

	ul.products.columns-4:not(.site-main > ul.products)
	> li.product span.price,

	ul.products.search-results-products
	.price {

		padding: 16px 20px !important;

		font-size: 14px !important;
		line-height: 1.5 !important;
	}


	.site-main > ul.products.columns-4
	> li.product
	.price .ex-tax-amount,

	ul.products.columns-4:not(.site-main > ul.products)
	> li.product span.price
	> .ex-tax-amount,

	ul.products.search-results-products
	.price .ex-tax-amount {

		font-size: 18px !important;
	}


	.site-main > ul.products.columns-4
	> li.product
	.price .ex-tax-amount .amount,

	ul.products.columns-4:not(.site-main > ul.products)
	> li.product span.price
	> .ex-tax-amount .amount,

	ul.products.search-results-products
	.price .ex-tax-amount .amount {

		font-size: 28px !important;
	}


	/* =====================================================
	   18. SEE MORE BUTTONS
	   ===================================================== */

	.site-main > ul.products.columns-4
	> li.product
	.woocommerce-LoopProduct-link::after,

	ul.products.columns-4:not(.site-main > ul.products)
	> li.product
	> a.woocommerce-LoopProduct-link::after,

	ul.products.search-results-products
	> li.product
	> .woocommerce-LoopProduct-link::after {

		min-height: 62px !important;

		margin: 0 20px 20px !important;
		padding: 17px 22px !important;

		border-radius: 10px !important;

		font-size: 14px !important;
	}


	/* =====================================================
	   19. SALE BADGE
	   ===================================================== */

	.site-main > ul.products.columns-4
	> li.product
	.onsale {

		top: 14px !important;
		right: 14px !important;

		padding: 9px 12px !important;

		font-size: 12px !important;
	}


	/* =====================================================
	   20. PRODUCT CATEGORY CARDS
	   ===================================================== */

	.site-main > ul.products.columns-4
	> li.product-category {

		border-radius: 18px !important;
	}


	.site-main > ul.products.columns-4
	> li.product-category
	> a
	> img {

		width: 100% !important;
		height: auto !important;

		aspect-ratio: 300 / 158 !important;

		object-fit: cover !important;
	}


	.site-main > ul.products.columns-4
	> li.product-category
	.woocommerce-loop-category__title {

		min-height: 82px !important;

		padding: 14px 64px 14px 20px !important;

		font-size: 21px !important;
		line-height: 1.25 !important;
	}


	.site-main > ul.products.columns-4
	> li.product-category
	.woocommerce-loop-category__title::after {

		right: 20px !important;

		font-size: 40px !important;
	}


	/* =====================================================
	   21. TRENDING PRODUCTS CAROUSEL
	   ===================================================== */

	.custom-carousel-wrapper {
		margin-top: 40px !important;
		margin-bottom: 100px !important;
	}


	.custom-carousel-container {
		overflow: hidden !important;
	}


	.custom-carousel-track {
		gap: 22px !important;
	}


	.carousel-card {
		flex: 0 0 calc((100% - 44px) / 3) !important;

		min-height: 380px !important;
		max-height: none !important;

		padding: 18px !important;

		border-radius: 16px !important;
	}


	.carousel-card img {
		max-height: 230px !important;

		object-fit: contain !important;
	}


	.carousel-product-title {
		font-size: 21px !important;
	}


	.carousel-product-price {
		font-size: 16px !important;
	}


	.carousel-arrow {
		min-width: 70px !important;
		min-height: 70px !important;

		padding: 0 !important;

		font-size: 30px !important;
	}


	/* =====================================================
	   22. SHOP PAGE CUSTOM SECTIONS
	   ===================================================== */

	.sino-catalogue-intro,
	.sino-featured-categories,
	.sino-browse-categories-heading,
	.search-page {

		width: 100% !important;
		max-width: none !important;

		box-sizing: border-box !important;
	}


	/* =====================================================
	   23. GENERAL KIOSK TYPOGRAPHY
	   ===================================================== */

	.content h1,
	.search-page > h1 {
		font-size: clamp(38px, 3.2vw, 52px) !important;
		line-height: 1.1 !important;
	}


	/* =====================================================
	   24. FORMS / WOOCOMMERCE TOUCH TARGETS
	   ===================================================== */

	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce input[type="submit"],
	.form_contact input[type="submit"],
	.enquiry_form_2022 input[type="submit"] {

		min-height: 60px !important;

		padding-left: 26px !important;
		padding-right: 26px !important;

		font-size: 18px !important;
	}


	/* =====================================================
	   25. FOOTER POSITION
	   ===================================================== */

	.site-container > .policy-navigation,
	.site-container > .footer {
		flex: 0 0 auto !important;
	}

}



/* =========================================================
   VERY LARGE PORTRAIT KIOSKS

   For displays where the browser really exposes roughly
   1500–2300 CSS pixels of width rather than using DPR scaling.
   ========================================================= */

@media screen
and (min-width: 1500px)
and (max-width: 2300px)
and (min-height: 2200px)
and (orientation: portrait) {

	.site-main > ul.products.columns-4,
	ul.products.columns-4:not(.site-main > ul.products),
	ul.products.search-results-products {

		grid-template-columns:
			repeat(4, minmax(0, 1fr)) !important;

		gap: 36px 30px !important;
	}


	.site-main > ul.products.columns-4
	> li.product
	.woocommerce-LoopProduct-link
	> img {

		height: 320px !important;
	}


	ul.products.columns-4:not(.site-main > ul.products)
	> li.product
	> a.woocommerce-LoopProduct-link
	> img {

		height: 340px !important;
	}


	ul.products.search-results-products
	.catalogue-image-wrapper {

		height: 320px !important;
	}


	.carousel-card {
		flex: 0 0 calc((100% - 72px) / 4) !important;
	}

}

/* =========================================================
   KIOSK REFINEMENT: CENTRED HEADER + FULL-WIDTH INNER PAGES
   Keep this block after the existing kiosk media queries.
   ========================================================= */

@media screen
and (min-width: 771px)
and (max-width: 2300px)
and (min-height: 1500px)
and (orientation: portrait) {

    /* Centre the logo, navigation and header controls as a group. */
    .header > nav {
        justify-content: center !important;
    }

    /* Stop this wrapper consuming all the spare header width. */
    .header .navigation {
        flex: 0 1 auto !important;
        width: auto !important;
        justify-content: center !important;
    }

    .header .nav {
        justify-content: center !important;
    }

    /* Full-width page wrappers, inside the existing kiosk gutters. */
    .content-container .about-page,
    .content-container .contact-page-wrapper,
    .content-container .where-find-page-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Remove the About page's separate inner section width limits. */
    .about-page .about-hero,
    .about-page .about-hero__inner,
    .about-page .about-counters,
    .about-page .counter-wrapper,
    .about-page .about-why-choose,
    .about-page .about-customer-journey,
    .about-page .about-us-sections,
    .about-page .about-blog-section,
    .about-page .container {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* The outer .content already supplies the kiosk side gutters.
       Remove additional section gutters, not padding inside cards. */
    .about-page .about-hero,
    .about-page .about-why-choose,
    .about-page .about-customer-journey,
    .about-page .about-us-sections,
    .about-page .about-blog-section,
    .about-page .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Expand Contact sections and the form shell.
       Keep branch-card grids and form-field layouts unchanged. */
    .content-container .contact-page-intro,
    .content-container .contact-page-details-container,
    .content-container .form_contact,
    .content-container .form_contact form#form_contact {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}