/* Load after the main theme and WooCommerce styles. Keep archive layouts consistent across shop and category URLs. */
@media (max-width: 1000px) {
	/* Related-product recommendations remain two-up on narrow tablets and phones. */
	html body .kf-pdp div.product .related ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		width: 100% !important;
	}
	html body .kf-pdp div.product .related ul.products > li.product {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}
	.kf-shop { display: block !important; width: 100%; }
	.kf-shop > .kf-results { display: block; width: 100%; min-width: 0; }
	.kf-shop .kf-results ul.products {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-auto-flow: row;
		align-items: stretch;
		gap: 14px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.kf-shop .kf-results ul.products > li.product {
		display: flex !important;
		flex-direction: column !important;
		align-self: stretch !important;
		justify-self: stretch !important;
		grid-column: auto !important;
		box-sizing: border-box !important;
		width: 100% !important;
		inline-size: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}
	.kf-shop .kf-results ul.products > li.product > a.woocommerce-LoopProduct-link { display: block; width: 100%; min-width: 0; }

	/* Compact toolbar and an off-canvas filter drawer instead of a long filter column in the page flow. */
	.kf-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
	.kf-bar .woocommerce-result-count { order: 0; flex: 1 0 100%; margin: 0; }
	.kf-ftoggle { order: 1; display: inline-flex !important; visibility: visible !important; flex: 1 1 0; min-width: 0; min-height: 46px; align-items: center; justify-content: center; gap: 8px; }
	.kf-bar .woocommerce-ordering { order: 2; flex: 1 1 0; min-width: 0; margin: 0; }
	.kf-bar .woocommerce-ordering select { width: 100%; min-width: 0; min-height: 46px; overflow: hidden; text-overflow: ellipsis; }
	.kf-shop > #kf-filters {
		position: fixed !important;
		top: 0; bottom: 0; left: 0; z-index: 10001;
		display: flex !important; flex-direction: column;
		width: min(88vw, 380px); height: 100vh; height: 100dvh;
		max-height: 100vh; max-height: 100dvh;
		margin: 0; padding: 0; overflow: hidden;
		background: var(--cream);
		transform: translateX(-102%); visibility: hidden;
		transition: transform .24s ease, visibility 0s linear .24s;
		box-shadow: 6px 0 30px rgba(0,0,0,.18);
	}
	body.kf-fopen .kf-shop > #kf-filters { transform: none; visibility: visible; transition: transform .24s ease; }
	.kf-shop .kf-fdrawer-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: 58px; padding: calc(6px + env(safe-area-inset-top)) 18px 6px; background: #fff; border-bottom: 1px solid var(--line); }
	.kf-shop .kf-fbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 18px 24px; }
	.kf-shop .kf-fbody .kf-fh { display: none; }
	.kf-shop .kf-fdrawer-foot { display: flex; flex: 0 0 auto; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
	.kf-shop .kf-fdrawer-foot .kf-btn { flex: 1; min-height: 48px; text-align: center; }
	.kf-shop .kf-fover { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(10,20,40,.5); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
	body.kf-fopen .kf-shop .kf-fover { opacity: 1; pointer-events: auto; }
	body.kf-fopen, body.kf-menuopen { overflow: hidden; }
	.kf-shop .kf-filters details { padding: 10px 0; }
	.kf-shop .kf-filters summary { min-height: 40px; align-items: center; }
	.kf-shop .kf-filters ul { max-height: none; overflow: visible; }
}

@media (max-width: 760px) {
	/* Match site chrome to the full mobile viewport even if older nested content styles constrain a wrapper. */
	html, body { width: 100%; max-width: 100%; }
	body { overflow-x: hidden; }
	.kf-top, .kf-head, .kf-foot { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; }
	.kf-head .in, .kf-foot .in { width: 100%; max-width: 1200px; }
	.kf-pdp { width: 100%; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; }
	/* A consistent mobile header and no wrapped contact strip. */
	.kf-top { white-space: nowrap; overflow: hidden; font-size: 9px; letter-spacing: .07em; }
	.kf-top span:last-child { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
	.kf-head .in { min-width: 0; }
	.kf-logo { flex: 0 1 auto; min-width: 0; }
	.kf-icons { flex: 0 0 auto; }
	.kf-shophero .in { padding-top: 18px; padding-bottom: 22px; }
	.kf-shophero h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.06; }
	.kf-shophero p { font-size: 17px; line-height: 1.4; }

	/* All product URLs use one stacked gallery/summary layout on phones. */
	.kf-pdp div.product { display: flex !important; flex-direction: column !important; align-items: stretch; gap: 18px; }
	.kf-pdp div.product > div.images,
	.kf-pdp div.product > div.summary { float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; }
	.kf-pdp div.product div.images .woocommerce-product-gallery__image img,
	.kf-pdp div.product div.images .woocommerce-product-gallery__image--placeholder img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
	.kf-pdp div.product .product_title { font-size: clamp(27px, 7vw, 34px); line-height: 1.08; }
	.kf-pdp div.product .summary > * { max-width: 100%; }
	.kf-pdp div.product form.variations_form .variations { width: 100%; }
	.kf-pdp div.product form.variations_form .kf-pills:not(.kf-color-pills) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.kf-pdp div.product form.variations_form .kf-pills.kf-length-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kf-pdp div.product form.variations_form .kf-pills:not(.kf-color-pills) button { width: 100%; min-width: 0; min-height: 46px; padding: 8px 5px; }
	.kf-pdp div.product form.cart .single_add_to_cart_button,
	.kf-pdp div.product form.cart .kf-buynow { min-height: 50px; }
	.kf-pdp div.product .woocommerce-tabs ul.tabs { max-width: 100%; }
	.kf-pdp div.product .related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

	/* Keep home-page sections readable without changing the desktop composition. */
	/* Keep every rotating home hero panel the same height on phones. */
	.kf-slide { min-height: 450px; padding: 34px 16px 60px; }
	.kf-slide h1 { font-size: clamp(31px, 8vw, 42px); line-height: 1.08; }
	.kf-slide p { font-size: 17px; line-height: 1.42; }
	.kf-collage { display: none; }
	.kf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.kf-tiles .kf-tile img { width: 100%; height: auto; aspect-ratio: 1 / .78; object-fit: cover; }
	.kf-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}

@media (max-width: 640px) {
	.kf-shop .kf-results ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	.kf-shop .kf-results ul.products > li.product { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; }
	.kf-shop .kf-results ul.products > li.product > a.woocommerce-LoopProduct-link { width: 100% !important; }
	.kf-shop .kf-results ul.products li.product a img,
	.kf-shop .kf-results ul.products li.product .kf-swatch { display: block; width: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; }
	.kf-shop .kf-results ul.products li.product .woocommerce-loop-product__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 3.6em; font-size: 16px; line-height: 1.2; padding: 9px 9px 2px; }
	.kf-shop .kf-results ul.products li.product .kf-brand { min-height: 2.5em; padding: 0 9px; font-size: 12px; }
	.kf-shop .kf-results ul.products li.product .price { padding: 6px 42px 9px 9px; font-size: 14px; line-height: 1.35; overflow-wrap: normal; word-break: normal; }
	.kf-shop .kf-results ul.products li.product .kf-ppm { display: inline-block; white-space: nowrap !important; }
	.kf-shop .kf-results ul.products li.product .kf-bag { width: 34px; height: 34px; right: 8px; bottom: 8px; }
	.kf-shop .kf-results ul.products li.product .kf-badges { left: 6px; top: 6px; gap: 3px; max-width: calc(100% - 12px); flex-wrap: wrap; }
	.kf-shop .kf-results ul.products li.product .kf-badges span { font-size: 9px; padding: 3px 6px; letter-spacing: .1em; }
	.kf-filters .count { min-width: 2.4em; }
}


/* Keep mobile site chrome and product content on the same viewport width. */
@media (max-width: 760px) {
	.kf-pdp div.product .woocommerce-tabs ul.tabs { display: none !important; }
	.kf-pdp .kf-mobile-product-accordions { width: 100%; margin-top: 8px; border-top: 1px solid var(--line); }
	.kf-pdp .kf-product-accordion { border-bottom: 1px solid var(--line); background: transparent; }
	.kf-pdp .kf-product-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 14px 2px; color: var(--navy); cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
	.kf-pdp .kf-product-accordion > summary::-webkit-details-marker { display: none; }
	.kf-pdp .kf-product-accordion > summary::after { content: "+"; color: var(--gold); font-size: 20px; font-weight: 400; line-height: 1; }
	.kf-pdp .kf-product-accordion[open] > summary::after { content: "−"; }
	.kf-pdp .kf-product-accordion .woocommerce-Tabs-panel { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 2px 18px !important; }
	.kf-pdp .kf-product-accordion .woocommerce-Tabs-panel > :first-child { margin-top: 0; }
  body > .kf-top, body > .kf-head, body > .kf-foot {
    width: 100vw !important; max-width: 100vw !important;
    margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .kf-wrap, .kf-pdp { min-width: 0 !important; box-sizing: border-box !important; }
}


/* v1.1.16: correct product selector (WooCommerce's .woocommerce class is on body). */
@media (max-width: 760px) {
  .kf-pdp, .kf-pdp * { min-width: 0; }
  .kf-pdp { width: 100% !important; max-width: 100% !important; overflow-x: clip; }
  .kf-pdp div.product,
  .kf-pdp div.product > div.images,
  .kf-pdp div.product > div.summary {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin: 0 !important; float: none !important;
  }
  .kf-pdp div.product .product_title {
    white-space: normal !important; overflow-wrap: anywhere; max-width: 100% !important;
    font-size: clamp(27px, 7vw, 34px) !important; line-height: 1.08;
  }
  .kf-pdp div.product .summary > *,
  .kf-pdp div.product form.cart,
  .kf-pdp div.product form.variations_form,
  .kf-pdp div.product .single_variation_wrap { min-width: 0 !important; max-width: 100% !important; }
  .kf-pdp div.product form.variations_form .variations { width: 100% !important; max-width: 100% !important; }
  .kf-pdp div.product form.variations_form .kf-pills:not(.kf-color-pills) {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .kf-pdp div.product form.variations_form .kf-pills:not(.kf-color-pills) button {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    flex: initial !important; padding: 8px 5px !important; overflow-wrap: anywhere;
  }
  .kf-pdp div.product .woocommerce-variation-add-to-cart,
  .kf-pdp div.product form.cart:not(.variations_form) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    flex-wrap: wrap !important;
  }
  .kf-pdp div.product .single_add_to_cart_button,
  .kf-pdp div.product .kf-buynow { min-width: 0 !important; max-width: 100% !important; }
}


/* Use the same 2-up mobile catalogue cards on shop, category, and filtered archive URLs. */
@media (max-width: 760px) {
  body.woocommerce.archive ul.products,
  body.woocommerce-page.archive ul.products,
  body.tax-product_cat ul.products,
  .kf-shop .kf-results ul.products {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important; align-items: stretch !important; gap: 12px !important;
    width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important;
  }
  body.woocommerce.archive ul.products > li.product,
  body.woocommerce-page.archive ul.products > li.product,
  body.tax-product_cat ul.products > li.product,
  .kf-shop .kf-results ul.products > li.product {
    display: flex !important; flex-direction: column !important; grid-column: auto !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin: 0 !important; float: none !important; clear: none !important;
  }
  body.woocommerce.archive ul.products > li.product img,
  body.woocommerce-page.archive ul.products > li.product img,
  body.tax-product_cat ul.products > li.product img,
  .kf-shop .kf-results ul.products > li.product img {
    display: block !important; width: 100% !important; aspect-ratio: 1 / 1; object-fit: cover;
  }
  .kf-shop, .kf-shop > .kf-results, .kf-shop .kf-bar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .kf-shop .kf-results ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    min-height: 3.6em; font-size: 16px; line-height: 1.2;
  }
}


/* Match colour and length selectors: shared four-column desktop and two-column phone grid. */
.kf-pdp div.product form.variations_form .kf-pills.kf-color-pills,
.kf-pdp div.product form.variations_form .kf-pills.kf-length-pills {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important; max-width: 100% !important; gap: 10px !important;
}
.kf-pdp div.product form.variations_form .kf-pills.kf-color-pills button,
.kf-pdp div.product form.variations_form .kf-pills.kf-length-pills button {
  display: flex !important; align-items: center; justify-content: center;
  box-sizing: border-box; width: 100% !important; min-width: 0 !important;
  max-width: 100% !important; margin: 0 !important;
}

/* Keep the catalogue in place while its product and filter fragments update. */
.kf-shop.kf-is-filtering .kf-results { opacity: .55; pointer-events: none; transition: opacity .16s ease; }
.kf-pdp div.product form.variations_form .kf-pills.kf-color-pills button.kf-color-option {
  justify-content: flex-start; gap: 9px;
}
@media (max-width: 760px) {
  .kf-pdp div.product form.variations_form .kf-pills.kf-color-pills,
  .kf-pdp div.product form.variations_form .kf-pills.kf-length-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
  }
}


/* Tighten line spacing when longer color names wrap onto two lines. */
.kf-pdp div.product form.variations_form .kf-pills.kf-color-pills button.kf-color-option {
  min-height: 54px !important; height: auto !important; padding: 8px 10px !important;
  line-height: 1.1 !important; gap: 8px !important;
}
.kf-pdp div.product form.variations_form .kf-pills.kf-color-pills button.kf-color-option .kf-color-name {
  display: block; min-width: 0; line-height: 1.1 !important;
  overflow-wrap: normal; word-break: normal;
}
@media (max-width: 760px) {
  .kf-pdp div.product form.variations_form .kf-pills.kf-color-pills button.kf-color-option {
    min-height: 48px !important; padding: 7px 8px !important; gap: 7px !important; font-size: 14px;
  }
}


/* Center length choices as a group under the centered SELECT LENGTH caption. */
.kf-pdp div.product form.variations_form .kf-pills.kf-length-pills {
  grid-template-columns: repeat(auto-fit, minmax(160px, 200px)) !important;
  justify-content: center !important;
}
@media (max-width: 760px) {
  .kf-pdp div.product form.variations_form .kf-pills.kf-length-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
  }
}


/* Product typography requested: title and initial price -2px; selected total +1px. */
.kf-pdp div.product .product_title {
  font-size: clamp(28px, calc(3.6vw - 2px), 42px) !important;
}
.kf-pdp div.product p.price,
.kf-pdp div.product .summary > p.price { font-size: 28px !important; }
.kf-pdp div.product .woocommerce-variation-price .price { font-size: 19px !important; }
@media (max-width: 760px) {
  .kf-pdp div.product .product_title { font-size: clamp(25px, calc(7vw - 2px), 32px) !important; }
  .kf-pdp div.product p.price,
  .kf-pdp div.product .summary > p.price { font-size: 24px !important; }
  .kf-pdp div.product .woocommerce-variation-price .price { font-size: 19px !important; }
}


/* Match option-block column widths and use option-sized variation captions. */
.kf-pdp div.product form.cart .variations label,
.kf-pdp div.product form.cart .variations th label {
  font-size: 1em !important; line-height: 1.2 !important;
}
.kf-pdp div.product form.variations_form .kf-pills.kf-color-pills,
.kf-pdp div.product form.variations_form .kf-pills.kf-length-pills {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important; max-width: 100% !important; gap: 10px !important;
  justify-content: stretch !important;
}
.kf-pdp div.product form.variations_form .kf-pills.kf-color-pills button,
.kf-pdp div.product form.variations_form .kf-pills.kf-length-pills button {
  width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  box-sizing: border-box !important; margin: 0 !important;
}
@media (max-width: 760px) {
  .kf-pdp div.product form.variations_form .kf-pills.kf-color-pills,
  .kf-pdp div.product form.variations_form .kf-pills.kf-length-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
  }
}

/* Compact product reassurance strip on phones. */
@media (max-width: 760px) {
  .kf-pdp .kf-assure {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 8px !important;
    margin: 14px 0 18px !important;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .kf-pdp .kf-assure > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .kf-pdp .kf-assure svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .kf-pdp .kf-assure b {
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
  }
  .kf-pdp .kf-assure small {
    display: block;
    font-size: 9px;
    line-height: 1.25;
  }
}
