/* Responsive layout: the base styles are the phone design. This file widens it for tablet and desktop. */

/* ---------- tablet (600-899px): fluid width, 3-up grids, product page in two columns ---------- */
@media (min-width:600px) and (max-width:899px){
	body{background:var(--bg)}
	.app{max-width:none;margin:0!important;background:none;box-shadow:none;border-radius:0;overflow:visible}
	.hdr,.bar{padding-left:24px;padding-right:24px}
	.hero{margin-left:24px;margin-right:24px;padding:40px 36px 28px}
	.hero h1{font-size:46px}
	.stage{margin-left:auto;margin-right:auto;max-width:520px}
	.k-sbox,.trust,.sh,.news,.pad,.grid,.scroll,.k-chips,.info,.sub,.again-note,.k-count,.team,.ah{margin-left:24px;margin-right:24px}
	.sh,.scroll,.k-chips,.grid{padding-left:0;padding-right:0}
	.sh,.scroll,.k-chips,.grid,.news,.pad,.info,.team{width:auto}
	.grid{grid-template-columns:repeat(3,1fr);gap:16px}
	.news{grid-template-columns:1fr 1fr;padding:0;gap:16px}
	.scroll:has(.lead){display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;gap:14px}
	.lead{width:auto}
	.k-product{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;padding-top:8px}
	.k-product-img{margin:12px 0 0 24px}
	.k-product-body{padding:20px 24px 0 0}
	.k-product h1{font-size:32px}
	.k-related .sh,.k-related .grid{margin-left:24px;margin-right:24px}
	.k-content{max-width:680px;margin-left:auto;margin-right:auto}
	.nav{width:min(560px,calc(100% - 24px))}
	.ah{aspect-ratio:16/8}
	.ah img{object-position:50% 40%}
	.ah h2{font-size:34px}
	.pad{padding-left:0;padding-right:0}
}

/* ---------- desktop (900px+): real website layout ---------- */
@media (min-width:900px){
	body{background:var(--bg)}
	.app{max-width:none;margin:0!important;background:none;box-shadow:none;border-radius:0;overflow:visible;padding-bottom:48px}
	.app>*{width:min(1180px,calc(100% - 64px));margin-left:auto!important;margin-right:auto!important}

	/* top bar spans the whole window; the nav pill sits in its middle */
	.hdr,.bar{width:100%!important;max-width:none;padding-left:max(32px,calc((100% - 1180px)/2));padding-right:max(32px,calc((100% - 1180px)/2));min-height:68px}
	.hdr img{width:46px;height:46px}
	.nav,.woocommerce-checkout:not(.woocommerce-order-received) .nav{display:grid!important;top:10px;bottom:auto;width:auto;grid-template-columns:repeat(4,auto);gap:4px;padding:6px;border-radius:99px;z-index:45}
	.nav a{flex-direction:row;gap:8px;padding:10px 20px;border-radius:99px;font-size:15px}
	.nav svg{width:20px;height:20px}

	/* section rhythm: content aligns to the container edge */
	section{margin-top:44px}
	.sh,.news,.pad,.grid,.scroll,.k-chips{padding-left:0;padding-right:0}
	.sh h2{font-size:28px}
	.sub,.again-note,.k-count{margin-left:0;margin-right:0;padding-left:0;padding-right:0}

	/* home hero: text left, product stage right */
	.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:center;padding:56px 64px;margin-top:20px!important;border-radius:36px;min-height:480px}
	.hero>*:not(.stage){grid-column:1;justify-self:start}
	.hero h1{font-size:58px;max-width:12ch}
	.hero p{font-size:21px;max-width:32ch}
	.btn{font-size:19px}
	.stage{grid-column:2;grid-row:1 / span 4;height:300px;margin:0 28px 0 0;transform:scale(1.18);transform-origin:center}
	.k-sbox{max-width:none;height:60px;margin-top:22px!important}
	.trust{grid-template-columns:repeat(3,1fr);margin-top:20px!important}
	.trust div{font-size:16px;padding:16px 18px}

	/* categories become a grid instead of a swipe row */
	.scroll:has(.cat){display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));overflow:visible;gap:14px}
	.cat{width:auto}
	.cat b{min-height:0;margin-bottom:2px}
	.card.h{width:210px}
	.grid,.k-shop-grid{grid-template-columns:repeat(4,1fr);gap:18px}
	.cb h3{font-size:15px}

	/* contact + about */
	.info:not(.k-link-card){display:grid;grid-template-columns:repeat(3,1fr);margin-left:0;margin-right:0;padding:8px 24px;gap:0 24px}
	.info:not(.k-link-card) .it{border-bottom:0}
	.k-link-card{margin-left:0}
	.ah{aspect-ratio:21/9;margin-top:20px!important;border-radius:36px}
	.ah img{object-position:50% 38%}
	.ah h2{font-size:44px;max-width:20ch}
	.ah .tx{left:48px;right:48px;bottom:40px}
	.news{grid-template-columns:repeat(3,1fr);gap:18px}
	.scroll:has(.lead){display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;gap:18px}
	.lead{width:auto}
	.mis{padding:32px 40px;columns:2;column-gap:48px}
	.mis p{break-inside:avoid;margin-bottom:12px}
	.team{aspect-ratio:21/9;margin-left:0;margin-right:0}

	/* shop */
	.k-search{max-width:640px;margin-left:0!important}
	.k-chips{flex-wrap:wrap;overflow:visible}
	.k-count{margin:14px 0}
	.k-pagination{margin-top:28px}

	/* product page: image left, details right */
	.k-product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:24px}
	.k-product-img{margin:0;border-radius:32px}
	.k-product-body{padding:8px 0 0}
	.k-product h1{font-size:40px}
	.k-product-price{font-size:36px}

	/* narrow centre column for account, cart, order status */
	.woocommerce-account .app>.k-content,.woocommerce-cart .app>.k-content,.woocommerce-order-received .app>.k-content,.k-content:not(.k-shop){width:min(760px,calc(100% - 64px))}
	.k-content{padding-left:0;padding-right:0}
	.k-steps,.k-steps-l,.k-blk,.k-code,.k-track,.k-tip,.k-card,.k-cart .k-sum,.cart-collaterals,.woocommerce-order-details,.woocommerce-customer-details{margin-left:0;margin-right:0}
	.k-ready,.k-order{margin-left:0;margin-right:0}

	.k-empty-cart{max-width:560px;margin-left:auto;margin-right:auto}

	/* signed-in account: vertical menu on the left, content on the right */
	.woocommerce-account.logged-in .app>.k-content{width:min(1000px,calc(100% - 64px))}
	.woocommerce-account.logged-in .k-entry>.woocommerce{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:36px;align-items:start}
	.woocommerce-account.logged-in .k-entry>.woocommerce>.woocommerce-notices-wrapper{grid-column:1 / -1}
	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{grid-column:1;grid-row:2}
	.woocommerce-account.logged-in .woocommerce-MyAccount-content{grid-column:2;grid-row:2;min-width:0}
	.woocommerce-account .woocommerce-MyAccount-navigation{position:sticky;top:90px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:10px}
	.woocommerce-account .woocommerce-MyAccount-navigation ul{flex-direction:column;overflow:visible;gap:4px;margin:0}
	.woocommerce-account .woocommerce-MyAccount-navigation li a{border-radius:12px;padding:12px 16px;box-shadow:none;background:none;font-size:15px}
	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--blue);color:#fff}
	.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:#EEF3FB}
	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover{background:var(--blue)}

	/* cart: items on the left, totals card on the right */
	.woocommerce-cart .app>.k-content{width:min(1080px,calc(100% - 64px))}
	.woocommerce-cart .k-entry>.woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:32px;align-items:start}
	.woocommerce-cart .k-entry>.woocommerce>.woocommerce-notices-wrapper,.woocommerce-cart .k-entry>.woocommerce>.k-steps,.woocommerce-cart .k-entry>.woocommerce>.k-steps-l{grid-column:1 / -1}
	.woocommerce-cart .k-cart{grid-column:1;grid-row:4}
	.woocommerce-cart .cart-collaterals{grid-column:2;grid-row:4;position:sticky;top:90px;margin-top:18px;padding:20px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
	.woocommerce-cart .cart_totals{float:none!important;width:100%!important}
	.woocommerce-cart .cart_totals h2{margin-top:0}

	/* checkout: details on the left, summary + payment on the right */
	.woocommerce-checkout:not(.woocommerce-order-received) .app>.k-content{width:min(1080px,calc(100% - 64px))}
	.k-checkout{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:40px;align-items:start}
	.k-checkout>.k-blk{grid-column:1}
	.k-checkout>#order_review{grid-column:2;grid-row:1 / span 3;position:sticky;top:90px}
	.k-checkout .k-blk{margin-left:0;margin-right:0}
	.k-dock{position:static;transform:none;width:auto;margin-top:18px;padding:16px 0 0;background:none;box-shadow:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
	.woocommerce-checkout:not(.woocommerce-order-received) .app,.woocommerce-cart .app{padding-bottom:48px}
}

/* very wide screens: slightly larger container */
@media (min-width:1440px){
	.app>*{width:min(1240px,calc(100% - 96px))}
	.hdr,.bar{padding-left:max(48px,calc((100% - 1240px)/2));padding-right:max(48px,calc((100% - 1240px)/2))}
}