/* CFS PDP Tabs v0.2.1 — loaded only on product pages where the plugin is active. */
body.cfs-pdp-tabs-active {
	--cfs-navy: #001e51;
	--cfs-red: #dd3333;
	--cfs-ink: #1a1f2b;
	--cfs-body: #545454;
	--cfs-mute: #6b7486;
	--cfs-line: #e3e9f2;
	--cfs-tint: #f3f6fb;
	--cfs-ok: #1d7a46;
	--cfs-ok-bg: #e8f5ee;
	--cfs-no: #b42318;
	--cfs-no-bg: #fdecea;
	--cfs-r: 5px;
}

/* ---------- Panel content ---------- */
.cfs-pdp { color: var(--cfs-body); font-size: 15px; line-height: 1.6; }
.cfs-pdp *, .cfs-pdp *::before, .cfs-pdp *::after { box-sizing: border-box; }
.cfs-pdp p { margin: 0 0 12px; }
.cfs-pdp a { color: var(--cfs-navy); text-decoration: underline; text-underline-offset: 2px; }
.cfs-pdp a:hover { color: var(--cfs-red); }
.cfs-pdp ul, .cfs-pdp ol { margin: 0; padding: 0; list-style: none; }
.cfs-pdp ul li, .cfs-pdp ol li { margin: 0; }
.cfs-pdp ul li::marker, .cfs-pdp ol li::marker { content: none; }
.cfs-pdp h3.cfs-pdp__title { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--cfs-ink); margin: 0 0 6px; }
.cfs-pdp h4 { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--cfs-ink); margin: 0 0 10px; }
.cfs-pdp__lede { max-width: 70ch; margin-bottom: 20px !important; }
.cfs-pdp__small { font-size: 13px; color: var(--cfs-mute); }
.cfs-pdp__more { margin-top: 16px !important; font-weight: 600; }
.cfs-pdp__pill { display: inline-block; font-weight: 700; font-size: 14px; color: var(--cfs-navy); background: var(--cfs-tint); border: 1px solid var(--cfs-line); border-radius: 999px; padding: 2px 12px; }
.cfs-pdp__pill.is-solid { background: var(--cfs-navy); border-color: var(--cfs-navy); color: #fff; }

/* Size guide */
.cfs-pdp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cfs-pdp__chips[hidden] { display: none; }
.cfs-pdp button.cfs-pdp__chip { font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--cfs-navy); background: #fff; color: var(--cfs-navy); cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0; }
.cfs-pdp button.cfs-pdp__chip[aria-pressed="true"] { background: var(--cfs-navy); color: #fff; }
.cfs-pdp button.cfs-pdp__chip:focus-visible { outline: 2px solid var(--cfs-red); outline-offset: 2px; }
.cfs-pdp__chart + .cfs-pdp__chart { margin-top: 28px; }
.cfs-pdp__chart[hidden] { display: none; }
.cfs-pdp.has-chips .cfs-pdp__chart-title { display: none; }
.cfs-pdp__offer { font-size: 14px; color: var(--cfs-ink); }
.cfs-pdp__tablebox { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cfs-line); border-radius: var(--cfs-r); }
.cfs-pdp__tablebox:focus-visible { outline: 2px solid var(--cfs-red); outline-offset: 2px; }
.cfs-pdp table.cfs-pdp__table { border-collapse: collapse; width: 100%; min-width: 480px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; border: 0; }
.cfs-pdp__table th, .cfs-pdp__table td { padding: 10px 12px; text-align: center; border: 0; border-bottom: 1px solid var(--cfs-line); white-space: nowrap; background: #fff; color: var(--cfs-ink); }
.cfs-pdp__table thead th { background: var(--cfs-navy); color: #fff; font-weight: 700; }
/* The theme forces table-header text to black; keep it white on navy. */
body.cfs-pdp-tabs-active .cfs-pdp table.cfs-pdp__table thead th { color: #fff !important; background: var(--cfs-navy) !important; }
body.cfs-pdp-tabs-active .cfs-pdp table.cfs-pdp__table thead th.is-off { color: #d9dee7 !important; background: #5f6f8b !important; }
body.cfs-pdp-tabs-active .cfs-pdp table.cfs-pdp__table tbody th { color: var(--cfs-ink) !important; }
.cfs-pdp__table tbody th { text-align: left; background: var(--cfs-tint); font-weight: 600; position: sticky; left: 0; z-index: 1; }
.cfs-pdp__table thead th:first-child { text-align: left; position: sticky; left: 0; z-index: 2; }
.cfs-pdp__table tr:last-child th, .cfs-pdp__table tr:last-child td { border-bottom: 0; }
.cfs-pdp__table td.is-off { color: #a9b1bd; background: repeating-linear-gradient(135deg, #fff 0 6px, #f4f5f7 6px 12px); }
.cfs-pdp__table thead th.is-off { background: #5f6f8b; color: #d9dee7; }
.cfs-pdp__legend { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 !important; font-size: 12px; color: var(--cfs-mute); }
.cfs-pdp__legend span { width: 12px; height: 12px; border: 1px solid #c6cfdd; background: repeating-linear-gradient(135deg, #fff 0 3px, #e3e6eb 3px 6px); }
.cfs-pdp__tip { margin-top: 14px !important; background: var(--cfs-tint); border-left: 3px solid var(--cfs-navy); border-radius: 0 var(--cfs-r) var(--cfs-r) 0; padding: 10px 14px; font-size: 14px; color: var(--cfs-ink); }

/* Delivery */
.cfs-pdp__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 26px !important; }
.cfs-pdp__steps li { position: relative; display: grid; gap: 8px; align-content: start; }
.cfs-pdp__steps li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 46px; right: -8px; height: 2px; background: repeating-linear-gradient(90deg, var(--cfs-navy) 0 6px, transparent 6px 11px); }
.cfs-pdp__dot { width: 38px; height: 38px; border-radius: 50%; background: var(--cfs-navy); color: #fff; display: grid; place-items: center; font-weight: 700; }
.cfs-pdp__steps strong { color: var(--cfs-ink); }
.cfs-pdp__steps p { margin: 2px 0 0; font-size: 14px; }
.cfs-pdp h4.cfs-pdp__sub { font-size: 15px; }
.cfs-pdp__dest { margin-bottom: 16px !important; }
.cfs-pdp__dest li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--cfs-line); font-size: 14px; }
.cfs-pdp__dest-name { font-weight: 600; color: var(--cfs-ink); }
.cfs-pdp__dest-val { text-align: right; color: var(--cfs-ink); font-variant-numeric: tabular-nums; }
.cfs-pdp__track { position: relative; height: 10px; border-radius: 999px; background: var(--cfs-tint); }
.cfs-pdp__track span { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--cfs-navy); }
.cfs-pdp__dest li.is-home .cfs-pdp__track span { background: var(--cfs-red); }
.cfs-pdp__dest li.is-scale { padding: 4px 0 10px; font-size: 11px; color: var(--cfs-mute); }
.cfs-pdp__ticks { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.cfs-pdp__dest li.is-other { grid-template-columns: 150px minmax(0, 1fr); border-bottom: 0; }

/* Returns */
.cfs-pdp__how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px !important; }
.cfs-pdp__how li { background: var(--cfs-tint); border-radius: var(--cfs-r); padding: 14px; display: grid; gap: 4px; align-content: start; }
.cfs-pdp__step-n { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cfs-red); }
.cfs-pdp__how strong { color: var(--cfs-ink); }
.cfs-pdp__how p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.cfs-pdp__alert { border: 1px solid #f3c1bd; background: #fff6f5; border-radius: var(--cfs-r); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; color: var(--cfs-ink); }
.cfs-pdp__alert strong { color: var(--cfs-no); }
.cfs-pdp__yn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cfs-pdp__yn > div { border: 1px solid var(--cfs-line); border-radius: var(--cfs-r); padding: 14px 16px; min-width: 0; }
.cfs-pdp__yn h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.cfs-pdp__yn h4 span { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; }
.cfs-pdp__yes h4 { color: var(--cfs-ok); } .cfs-pdp__yes h4 span { background: var(--cfs-ok-bg); }
.cfs-pdp__no h4 { color: var(--cfs-no); } .cfs-pdp__no h4 span { background: var(--cfs-no-bg); }
.cfs-pdp__yn ul { display: grid; gap: 8px; font-size: 14px; }
.cfs-pdp__yn li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.cfs-pdp__yes li::before { content: "✓"; color: var(--cfs-ok); font-weight: 800; }
.cfs-pdp__no li::before { content: "✕"; color: var(--cfs-no); font-weight: 800; }
.cfs-pdp__no .cfs-pdp__small { margin: 10px 0 0; }
.cfs-pdp dl.cfs-pdp__band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cfs-line); border: 1px solid var(--cfs-line); border-radius: var(--cfs-r); overflow: hidden; margin: 0 0 14px; }
.cfs-pdp__band > div { background: #fff; padding: 12px 14px; font-size: 14px; }
.cfs-pdp__band dt { font-weight: 700; color: var(--cfs-ink); margin: 0 0 2px; }
.cfs-pdp__band dd { margin: 0; }

/* Care */
.cfs-pdp__material { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px !important; }
.cfs-pdp__care { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cfs-pdp__care li { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 14px 6px; border: 1px solid var(--cfs-line); border-radius: var(--cfs-r); font-size: 13px; font-weight: 600; color: var(--cfs-ink); }
.cfs-pdp__care-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--cfs-tint); color: var(--cfs-navy); display: grid; place-items: center; }
/* Ecomus fills SVGs in some contexts; keep these as line icons. */
.cfs-pdp__care-ic svg, .cfs-pdp__care-ic svg * { fill: none !important; stroke: currentColor; }

/* ---------- Description: KFK heading scale ---------- */
body.cfs-pdp-tabs-active .woocommerce-tabs #tab-description h2 { font-size: 20px !important; line-height: 1.3; font-weight: 700; margin: 0 0 12px; }
body.cfs-pdp-tabs-active .woocommerce-tabs #tab-description h3 { font-size: 18px !important; line-height: 1.35; font-weight: 600; margin: 22px 0 8px; color: var(--cfs-ink); }
body.cfs-pdp-tabs-active .woocommerce-tabs #tab-description h4,
body.cfs-pdp-tabs-active .woocommerce-tabs #tab-description h5 { font-size: 16px !important; line-height: 1.35; font-weight: 600; margin: 14px 0 6px; color: var(--cfs-ink); }
body.cfs-pdp-tabs-active .woocommerce-tabs #tab-description :is(h2, h3, h4, h5) :is(strong, b, span) { font-size: inherit !important; font-weight: inherit; }

/* ---------- "Size guide" bar under the size options ---------- */
.cfs-pdp-sizebar { margin: 4px 0 14px; padding: 0; list-style: none; }
.cfs-pdp-sizebar-row > td { padding: 0 0 10px !important; border: 0 !important; }
.cfs-pdp-sizebar a { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--cfs-navy, #001e51); border-radius: 5px; background: var(--cfs-tint, #f3f6fb); color: var(--cfs-navy, #001e51); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; text-transform: none; letter-spacing: 0; }
.cfs-pdp-sizebar a span { text-decoration: underline; text-underline-offset: 3px; }
.cfs-pdp-sizebar a:hover { background: #e6ecf6; color: var(--cfs-navy, #001e51); }
.cfs-pdp-sizebar a:focus-visible { outline: 2px solid var(--cfs-red, #dd3333); outline-offset: 2px; }
.cfs-pdp-sizebar svg { flex: 0 0 auto; }

/* ---------- Phone: KFK-style list of tab names, selected content below ---------- */
@media (max-width: 767px) {
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs { display: block !important; margin: 0 0 18px !important; padding: 0 !important; border: 1px solid var(--cfs-line) !important; border-radius: var(--cfs-r); overflow: hidden; white-space: normal; }
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs::before,
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs::after { display: none !important; }
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs li { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--cfs-line) !important; background: #fff; border-radius: 0; }
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs li:last-child { border-bottom: 0 !important; }
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs li::before,
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs li::after { display: none !important; }
	body.cfs-pdp-tabs-active.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li a,
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs li a { display: flex !important; width: 100% !important; box-sizing: border-box; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 14px 14px 18px !important; margin: 0 !important; border: 0 !important; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cfs-ink) !important; white-space: normal; background: transparent; box-shadow: none; }
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs li a::before { display: none !important; }
	/* Ecomus draws an animated underline with li a::after (it showed as stray dots); replace it with a +/− circle. */
	body.cfs-pdp-tabs-active.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li a::after { content: "+" !important; flex: 0 0 auto; position: static !important; display: inline-grid !important; place-items: center; width: 24px !important; height: 24px !important; box-sizing: border-box; border: 1.5px solid currentColor !important; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; background: none !important; transform: none !important; opacity: 1; transition: none !important; left: auto !important; bottom: auto !important; }
	/* Selected tab: pale blue, red bar, navy text, minus sign. */
	body.cfs-pdp-tabs-active .woocommerce-tabs ul.tabs.wc-tabs li.active { background: var(--cfs-tint) !important; box-shadow: inset 4px 0 0 var(--cfs-red); }
	body.cfs-pdp-tabs-active.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a { color: var(--cfs-navy) !important; }
	body.cfs-pdp-tabs-active.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a::after { content: "\2212" !important; }
	body.cfs-pdp-tabs-active .woocommerce-tabs .woocommerce-Tabs-panel { margin: 0; padding: 0 2px 8px; border: 0; }
	body.cfs-pdp-tabs-active .woocommerce-tabs #tab-description h2 { font-size: 19px !important; }

	.cfs-pdp h3.cfs-pdp__title { font-size: 19px; }
	.cfs-pdp__steps { grid-template-columns: 1fr; gap: 14px; }
	.cfs-pdp__steps li { grid-template-columns: 38px 1fr; column-gap: 12px; }
	.cfs-pdp__steps li .cfs-pdp__dot { grid-row: span 2; }
	.cfs-pdp__steps li:not(:last-child)::after { top: 42px; left: 18px; right: auto; width: 2px; height: calc(100% - 28px); background: repeating-linear-gradient(180deg, var(--cfs-navy) 0 5px, transparent 5px 9px); }
	.cfs-pdp__dest li { grid-template-columns: 96px minmax(0, 1fr) 82px; gap: 8px; }
	.cfs-pdp__dest li.is-other { grid-template-columns: 96px minmax(0, 1fr); }
	.cfs-pdp__dest-val { font-size: 13px; }
	.cfs-pdp__how, .cfs-pdp__yn, .cfs-pdp dl.cfs-pdp__band { grid-template-columns: 1fr; }
	.cfs-pdp__care { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
	.cfs-pdp__care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}