/*
Theme Name: Blankets
Template: flatsome
Version: 1.2.85
Description: Flatsome child theme carrying the store's own skin: orange/teal palette, Poppins, rounded corners, uppercase headings.
Author: Custom
Text Domain: blankets
*/

/* Brand tokens.
   The palette itself lives in Flatsome's theme options (seeded on activation,
   see inc/seed.php) and reaches this file through Flatsome's own CSS variables
   such as --fs-color-primary. Only what Flatsome has no option for is declared
   here, so a color never has two sources of truth. */
:root {
	--brand-cream: #fffaf2;
	--brand-ink: #181818;
	--brand-purple: #654895;
	--brand-muted: #666;
	--brand-radius: 12px;
	--brand-button-radius: 10px;
	--brand-gold: #f5c451;
}

/* Typography. One scale, declared once.

   Type runs off CSS variables: base 17px / 1.3 / 0.025em / weight 400, headers
   weight 600 / line-height 1.2 / spacing 0em, with a 34px header base that scales
   each level (h1 .85, h2 .63, h3 .57, h4 .55). Those values are literal in this
   file: it is the only home of the type scale.

   Only section row titles carry the orange accent. Tile labels, art-style card
   titles and stat numbers are black, because making every heading orange reads
   as harsh on a full page. */
body {
	color: #000;
	font-family: Poppins, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.025em;
}

h1, h2, h3, h4, h5, h6, .heading-font {
	font-family: Poppins, sans-serif;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Header size scale, 0.85 / 0.63 / 0.57 / 0.55 of the 34px base
   (`--typeHeaderSize`). Only h1-h4 are sized; h5/h6 keep Flatsome defaults. */
h1 { font-size: 28.9px; }
h2 { font-size: 21.42px; }
h3 { font-size: 19.38px; }
h4 { font-size: 18.7px; }

/* Product card text is ink. The card title sits inside
   a link, so it needs its own colour rather than inheriting the link colour. */
.product-small .name,
.product-small .woocommerce-loop-product__title,
.product-small .product-title,
.woocommerce-LoopProduct-link,
.woocommerce-loop-product__link {
	color: var(--brand-ink);
}

/* The card title is plain body type, not a heading: 17px / 400 / 0.025em, no
   uppercase, clamped to two lines. The clamp uses max-height because the title is
   a flex/grid item, where Chrome blockifies display:-webkit-box and disables
   -webkit-line-clamp. */
.product-small p.name,
.product-small p.woocommerce-loop-product__title,
.product-small p.product-title {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.025em;
	text-transform: none;
	max-height: 2.6em;
	overflow: hidden;
}

/* Product image radius: 10px. */
.product-small .box-image,
.product-small .box-image img {
	border-radius: 10px;
}

/* The card's second mockup swaps in on hover with no dissolve.

   Flatsome prints the gallery's second image as `img.show-on-hover` over the
   cover and fades it in, because the `product_hover` theme mod is
   `fade_in_back`. The fade is 0.6s, set by Flatsome's
   `.has-hover [class*="image-"] img` rule, which outranks its own
   `.show-on-hover` rule.

   The dissolve paints two differently composed mockups at once, which reads as
   motion on every card the pointer crosses. The swap itself stays: the cover is
   still the first image and the back image still appears on hover, in one
   frame. Only the timing is removed, so the opacity states above stay the
   single home of the behaviour. */
.product-small .box-image img.show-on-hover {
	transition: none;
}

/* Sale badge: 10px bold uppercase, square left corner, 2px right. */
.badge-container .badge,
.product-small .onsale,
.woocommerce span.onsale {
	display: inline-block;
	line-height: 1;
	padding: 5px 7px;
	border-radius: 0 2px 2px 0;
	background-color: #fa3900;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.product-small .price,
.product-small .price span {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.025em;
}

/* Accent colour on the section headings. They render inside a [ux_text]
   wrapper (div.text). */
.ux-text h1, .ux-text h2, .ux-text h3,
div.text h1, div.text h2, div.text h3 {
	color: var(--fs-color-primary);
}

/* Exceptions. Utility and explainer headings are not orange: the art-style intro
   is near-black, and the how-to/reviews headings are the secondary purple. These
   come after the base rule above and use an extra class so they always win. */
div.text.text-ink h1, div.text.text-ink h2, div.text.text-ink h3 {
	color: var(--brand-ink);
}

/* The art-style intro is not a section header. It is a large,
   non-uppercase display line: clamp(20px, 6vw, 44px) at 1.08. */
div.text.text-ink h2 {
	font-size: clamp(20px, 6vw, 44px);
	line-height: 1.08 !important;
	text-transform: none;
}

div.text.text-purple h1, div.text.text-purple h2, div.text.text-purple h3 {
	color: var(--brand-purple);
}

/* Stat figures (catalogue counts and average rating) are data, not headings, so
   they render as a paragraph styled like the section headings but in ink. The
   section heading itself still gets the orange accent from div.text h2. */
.stat-figure {
	color: var(--brand-ink);
	font-size: 28.9px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Product-row and section titles stay orange, at 0.85 x the 34px header base.
   Flatsome lays the title out as a flex row, so it is centred with
   justify-content. */
.section-title,
.section-title span {
	color: var(--fs-color-primary);
	font-size: 28.9px;
}

.section-title {
	justify-content: center;
}

/* Section headings inside [ux_text] render as h2, so they get the same 28.9px
   size. */
div.text h2,
.ux-text h2 {
	font-size: 28.9px;
}

/* Headings inside dark or overlay sections stay light for contrast. */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .section-title, .dark .section-title span,
.banner h1, .banner h2, .banner h3, .banner h4, .banner h5, .banner h6 {
	color: inherit;
}

/* Buttons: bold and uppercase, with the original 10px corner. */
.button {
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--brand-button-radius);
}

/* Rounded corners (12px) on cards, images, boxes and form fields. */
img,
.wp-caption,
.box-image,
.product-small .box-image,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border-radius: var(--brand-radius);
}

/* Banner background images stay square. Flatsome paints every .banner with the
   primary colour as a fallback, so the global image radius above used to expose
   that colour as an orange triangle in each corner. */
.banner .banner-bg img {
	border-radius: 0;
}

/* Homepage promo trio: one wide banner left, two stacked right. The copy is HTML
   over the art, so sizes and colours live here rather than in the image. Flatsome
   prints its own banner CSS after this file, hence the !important on line-height:
   the global heading rule forces 1.2 there, and a display line needs tighter.

   Heights are set here, not as ux_banner attributes: a plain shortcode only emits
   Flatsome's default breakpoint, so `height="430px" height__md="340px"` rendered
   430px at every width. Left and right columns stay in step: 430 = 210 + 10 + 210,
   340 = 220 + 10 + 220 is off by the gap, so the right stack is 165px per banner
   at tablet and the row keeps one baseline. */
.promo-hero .banner {
	border-radius: var(--brand-radius);
	overflow: hidden;
}

/* The homepage's one heading, above the trio. The type comes from the global h1
   rule (Poppins 600, 28.9px, uppercase); this only sets the gap to the banners. */
.promo-hero .home-heading {
	margin: 0 0 6px;
}

.promo-hero .promo-hero__main {
	padding-top: 430px;
}

.promo-hero .promo-hero__small {
	padding-top: 210px;
}

/* ux_banner without a height attribute prints an invisible height-fix image that
   reserves the art's 2:1 height on top of that padding, doubling the row. Hide
   it: the padding above is the single source of every banner height. */
.promo-hero .height-fix {
	display: none;
}

.promo-hero .promo-kicker {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.promo-hero .promo-title {
	margin: 0 0 16px;
	font-size: 54px;
	font-weight: 600;
	line-height: 1.02 !important;
	letter-spacing: 0;
	text-transform: none;
}

/* The two stacked banners are half the width, so their copy steps down. */
.promo-hero .promo-hero__small .promo-title {
	margin-bottom: 10px;
	font-size: 20px;
}

.promo-hero .promo-hero__small .promo-kicker {
	margin-bottom: 4px;
	font-size: 10px;
	letter-spacing: 0.06em;
}

/* Ink on the pale mint art, white on the dark crimson art. The tone class is
   set on the same element as the banner class, so it has to be named here. */
.promo-hero .promo-hero__ink,
.promo-hero .promo-hero__ink .promo-title,
.promo-hero .promo-hero__ink .promo-kicker {
	color: var(--brand-ink);
}

.promo-hero .promo-hero__light,
.promo-hero .promo-hero__light .promo-title,
.promo-hero .promo-hero__light .promo-kicker {
	color: #fff;
}

.promo-hero .promo-cta {
	margin: 0;
	font-size: 15px;
	padding: 10px 26px;
}

/* Flatsome sizes a button from its parent, and the banner text box carries a
   small res-text base, so the CTA needs its own size or it renders tiny. */
.promo-hero .promo-hero__small .promo-cta {
	font-size: 11px;
	padding: 8px 16px;
	letter-spacing: 0.04em;
}

/* The button sits inside the paragraph wpautop adds, whose em margin is sized
   from that same small base. Drop it so the copy block stays compact; the
   headline paragraph above keeps its own bottom margin. */
.promo-hero .text-inner p:last-child {
	margin-bottom: 0;
}

@media (max-width: 849px) {
	/* Full-width columns, so the banners keep a wide strip: 340 = 165 + 10 + 165. */
	.promo-hero .promo-hero__main {
		padding-top: 340px;
	}

	.promo-hero .promo-hero__small {
		padding-top: 165px;
	}

	.promo-hero .promo-title {
		font-size: 38px;
	}

	.promo-hero .promo-hero__small .promo-title {
		font-size: 26px;
	}
}

@media (max-width: 549px) {
	.promo-hero .promo-hero__main {
		padding-top: 260px;
	}

	.promo-hero .promo-hero__small {
		padding-top: 170px;
	}

	.promo-hero .promo-title {
		font-size: 30px;
		margin-bottom: 10px;
	}

	.promo-hero .promo-hero__small .promo-title {
		font-size: 20px;
	}
}

/* Cream band helper. The homepage seed applies this where the original design
   used the cream background. */
.brand-cream {
	background-color: var(--brand-cream);
}

.brand-cream .section {
	background-color: transparent;
}

/* Top bar carries the announcement. Flatsome defaults to dark text, which is
   low contrast on the orange brand bar, so force white like the old theme. */
.header-top,
.header-top a,
.header-top .html_topbar_left,
.header-top .nav > li > a {
	color: #fff;
}

/* Bottom nav bar: 18px, weight 400, no uppercase, 0.025em tracking, black.
   Flatsome's nav defaults to a smaller bold uppercase style, so every property is
   set explicitly here. The row can wrap until the menu labels are shortened. */
.header-bottom .nav > li > a {
	font-family: Poppins, sans-serif;
	font-size: 18px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.025em;
	color: #000;
}

/* Small uppercase label used above section headings: 12px, extra-bold, wide
   letter spacing, orange. */
.eyebrow {
	color: var(--fs-color-primary) !important;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .07em;
}

/* Tile and card labels. The category tile caption is now a span and the art-style
   card title is an h3, so both are pinned to ink to keep their earlier look. */
.collection-item__title,
.ux-image-box h1, .ux-image-box h2, .ux-image-box h3,
.box-image-box h4, .box-text h4 {
	color: var(--brand-ink);
}

/* Category tile caption: block, weight 700, base body size, no uppercase. */
.collection-item__title {
	display: block;
	margin-top: 5px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0.025em;
	color: #000;
}

/* Category tile cover is square. The seed writes image_radius="0" and a square
   product photo; this also crops to 1:1 and clears the global 12px image radius. */
.box:has(.collection-item__title) .box-image,
.box:has(.collection-item__title) .box-image img {
	border-radius: 0;
}

.box:has(.collection-item__title) .box-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* How-To step images are square, cropped to 1:1. */
.box:has(.step-title) .box-image,
.box:has(.step-title) .box-image img {
	border-radius: 0;
}

.box:has(.step-title) .box-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* How-To step label. No heading there: it is a paragraph styled to match the h4
   it replaced. */
.box-text .step-title {
	color: var(--brand-ink);
	font-size: 18.7px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 20px 0;
}

/* ---------------------------------------------------------------------------
   Shared components.
   Buttons, inputs, the footer and the back-to-top control: one value per
   component, mapped onto Flatsome's own classes.
   --------------------------------------------------------------------------- */

/* Buttons: 19px / 700 / uppercase / 1.42 / 11px 25px / 10px. */
.button,
button.button,
input[type="submit"],
input[type="button"] {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.42;
	padding: 11px 25px;
	border-radius: 10px;
}

/* Circle icon buttons are square on both axes. Flatsome sizes them from
   line-height and clears only their horizontal padding, so the text-button
   padding above stretches the share row, the zoom button and the back-to-top
   button into tall ovals. Fixing both axes here keeps every icon-only circle
   round; text buttons with an icon keep their own padding. */
.button.icon.circle,
.button.icon.round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	padding: 0;
	line-height: 1;
}

/* Flatsome nudges every button glyph up 1.5px to sit it on a text baseline.
   These buttons centre the glyph with flex instead, so that nudge only lifts
   it off centre. */
.button.icon.circle > i,
.button.icon.round > i {
	top: 0;
}

/* Stars are gold on this shop.
   Flatsome paints every `.star-rating` with the secondary teal, in two rules: the
   plain one and a `.woocommerce-page` one. Both selectors are repeated here so
   this later sheet wins without `!important`. One rule colours the stars on cards,
   on the product page and in the reviews tab. */
.star-rating:before,
.woocommerce-page .star-rating:before,
.woocommerce-page .star-rating span:before,
.star-rating span:before {
	color: var(--brand-gold);
}

/* Product card pricing. Every product in the catalogue is on sale, and a variable
   product's card prints one range instead of an `<ins>`, so the range itself is
   the sale price and carries the sale red. A struck original stays grey. */
.product-small .price,
.product-small .price span {
	color: #fa3900;
}

.product-small .price del,
.product-small .price del span {
	color: #858585;
}

.product-small .price ins,
.product-small .price ins span {
	color: #fa3900;
}

/* Art-style card: title 15px/1.15, description 13px muted. The art cards
   are the only left-aligned image boxes, so they are scoped by .text-left to
   leave the centred How-To / category boxes alone. */
.box-text.text-left .box-text-inner h3 {
	font-size: 15px;
	line-height: 1.15;
	color: #000;
}

.box-text.text-left .box-text-inner h3 ~ p {
	font-size: 13px;
	line-height: 1.3;
	color: var(--brand-muted);
}

/* Art-style card container: bordered, rounded, soft shadow, square thumbnail,
   padded copy. */
.box:has(.box-text.text-left) {
	border: 1px solid #e8e8e1;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(55, 40, 24, 0.08);
}

.box:has(.box-text.text-left) .box-image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.box-text.text-left .box-text-inner {
	padding: 11px 10px 12px;
}

/* Inputs: 17px / 8px 10px padding / 1px #e8e8e1 border / square. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.input-text {
	font-size: 17px;
	padding: 8px 10px;
	border: 1px solid #e8e8e1;
	border-radius: 0;
}

/* Footer: four builder columns on #f9f9fb, then a centred copyright bar.
   The columns come from the "Footer" UX Block, so these rules style builder
   elements (`row`, `ux_menu`, `follow`, `ux_payment_icons`) instead of a PHP
   footer template. */
.footer-wrapper,
.absolute-footer {
	background-color: #f9f9fb;
	color: #000;
}

.footer-wrapper {
	font-size: 16px;
}

.footer-wrapper a,
.absolute-footer a {
	color: #000;
}

/* Row wrapper: 70px above the first column and 40px below. */
.footer-wrapper .footer-cols {
	max-width: 1280px;
	margin: 0 auto;
	padding: 70px 0 40px;
}

/* Column titles are menu-title elements (a div), not headings: 19px bold
   sentence case. Flatsome's default is 0.8em uppercase with a 3.125em min-height,
   which reads as a form label. */
.footer-wrapper .ux-menu-title {
	min-height: 0;
	margin: 0 0 26px;
	padding: 0;
	color: #000;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

/* Link rows: 18px on a 42px rhythm, with Flatsome's separator border removed. */
.footer-wrapper .ux-menu-link__link {
	min-height: 0;
	padding: 9px 0;
	border: 0;
	color: #000;
	font-size: 18px;
	line-height: 1.3;
}

.footer-wrapper .ux-menu-link__link:hover {
	color: #000;
	opacity: 0.7;
}

/* Contact column: address lines use the same 18px type as the link columns. */
.footer-wrapper .footer-cols p {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.45;
}

/* Blocks in a column (menu, text, socials) keep 18px apart. */
.footer-wrapper .footer-cols .col-inner > * + * {
	margin-top: 18px;
}

/* Social glyphs are one row of plain black icons, not Flatsome's outlined
   buttons. */
.footer-wrapper .social-icons {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #000;
	font-size: 1em;
}

.footer-wrapper .social-icons a {
	display: inline-flex;
	color: #000;
}

.footer-wrapper .social-icons i {
	font-size: 22px;
}

/* `[follow]` orders icons by its own priority, so pin the order here instead of
   in the shortcode: Instagram, Facebook, Twitter, TikTok. */
.footer-wrapper .follow-icons .instagram { order: 1; }
.footer-wrapper .follow-icons .facebook  { order: 2; }
.footer-wrapper .follow-icons .twitter   { order: 3; }
.footer-wrapper .follow-icons .tiktok    { order: 4; }

/* Payment badges: the seven colour marks are inline SVG at 38x24. Seven of those
   plus gaps need 296px, which the default 15px right padding on a 3/12 column
   does not leave, so this column drops its right padding. */
.footer-wrapper .footer-payments-col {
	padding-right: 0;
}

.footer-wrapper .footer-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.footer-wrapper .footer-payments__badge {
	display: block;
	flex: 0 0 auto;
}

.footer-wrapper .footer-payments__badge svg {
	display: block;
	width: 38px;
	height: 24px;
}

/* Bottom bar: hairline divider and a centred grey copyright. Flatsome floats
   `.footer-primary` left, and no custom footer block needs the float. */
.absolute-footer {
	padding: 28px 0;
	border-top: 1px solid #ececec;
}

.absolute-footer .footer-primary {
	float: none;
}

.absolute-footer .copyright-footer {
	color: var(--brand-muted);
	font-size: 15px;
	text-align: center;
}

/* Back to top: orange rounded square with the chevron centred.
   Flatsome's `.is-outline` leaves it transparent with a 2px border. */
#top-link.back-to-top {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	right: 42px;
	bottom: 42px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background-color: var(--fs-color-primary);
	/* Flatsome's `.button.is-outline` forces `color: currentColor !important`,
	   which would inherit the footer's black and draw a black chevron on the
	   orange square. */
	color: #fff !important;
	line-height: 1;
	box-shadow: none;
}

#top-link.back-to-top i {
	font-size: 26px;
}

#top-link.back-to-top.active,
#top-link.back-to-top:hover {
	background-color: var(--fs-color-primary);
	color: #fff !important;
	opacity: 1;
}

/* Phones: the four columns stack, so the section padding shrinks with them. */
@media (max-width: 849px) {
	.footer-wrapper .footer-cols {
		padding: 40px 15px 10px;
	}

	#top-link.back-to-top {
		right: 20px;
		bottom: 20px;
		width: 52px;
		height: 52px;
		border-radius: 14px;
	}
}

/* Section rows: 40px below each section header. */
.section-title,
.section-title-container {
	margin-bottom: 40px;
}

/* ---------------------------------------------------------------------------
   Single product page.
   The sale price is red with the struck original grey, the gallery image square,
   the add-to-cart button brand orange and the sale badge sale red. Flatsome
   defaults differ, so each is set here.
   --------------------------------------------------------------------------- */

.single-product .price,
.single-product .price span {
	color: #6e6e6e;
}

.single-product .price ins,
.single-product .price ins span {
	color: #fa3900;
}

.single-product .price del,
.single-product .price del span {
	color: #858585;
}

/* Add to cart uses the primary orange, not Flatsome's teal "alt" button. */
.single-product .single_add_to_cart_button,
.single-product .button.alt {
	background-color: var(--fs-color-primary) !important;
	color: #fff;
}

/* Quantity stepper is one 51px capsule. Flatsome sizes the row from its ±
   buttons and leaves the number field at its own content height, so the white
   field stopped short of the pill and its square border cut the outline.
   Height 100% makes the field fill the row between the two buttons. */
.quantity input.qty {
	height: 100%;
}

/* Product gallery images are square. */
.single-product .woocommerce-product-gallery img,
.single-product .product-gallery img,
.single-product .product-images img {
	border-radius: 0;
}

/* Sale badge shows the sale red, not Flatsome's secondary colour. */
.badge-container .badge .badge-inner {
	background-color: #fa3900 !important;
	color: #fff !important;
	border-radius: 0 2px 2px 0;
}

/* Size pills.
   WooCommerce prints the size as a dropdown; inc/woocommerce.php prints these
   pills in front of it. The dropdown keeps the value and never paints, so the
   pills are only a view. The chosen size takes the brand orange like the
   add-to-cart button, because it is the one decision the page asks for; the
   others stay outlined so the row does not compete with the button below it. */
.blankets-size__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.blankets-size__option {
	min-width: 88px;
	height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	background-color: #fff;
	color: #181818;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.025em;
	text-transform: none;
	cursor: pointer;
}

.blankets-size__option:hover,
.blankets-size__option:focus-visible {
	border-color: var(--fs-color-primary);
	color: var(--fs-color-primary);
}

.blankets-size__option:focus-visible {
	outline: 2px solid var(--fs-color-primary);
	outline-offset: 2px;
}

.blankets-size__option.is-selected {
	border-color: var(--fs-color-primary);
	background-color: var(--fs-color-primary);
	color: #fff;
}

/* A size the current combination cannot reach stays visible but unclickable,
   so the row keeps its width and the shopper still sees the choice exists. */
.blankets-size__option:disabled {
	border-color: #dcdcdc;
	background-color: #fff;
	color: #181818;
	opacity: 0.4;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* The native dropdown keeps its place in the form and its value, but never
   paints. `hidden` alone loses to Flatsome's own rules for `.variations select`. */
.blankets-size__native {
	display: none !important;
}

/* Proof under the product title: the rating and the marketing bar.
   inc/woocommerce.php replaces WooCommerce's stars-only block, so the stars, the
   average and the count read as one line, and a product with no rated review
   prints only the bar. */
.blankets-proof {
	margin: 0 0 16px;
}

.blankets-proof__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	color: #181818;
	text-decoration: none;
}

.blankets-proof__rating:hover,
.blankets-proof__rating:focus {
	color: #181818;
	text-decoration: none;
}

/* Flatsome gives .star-rating a .5em vertical margin and auto side margins; the
   stars sit flush against the figures in this row instead. */
.blankets-proof__rating .star-rating {
	margin: 0;
	font-size: 18px;
}

.blankets-proof__average {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

.blankets-proof__count {
	color: var(--brand-muted);
	font-size: 16px;
	line-height: 1;
}

.blankets-proof__bar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 7px 14px;
	border-radius: 8px;
	background-color: #fdf1ea;
	color: #181818;
	font-size: 15px;
	line-height: 1.3;
}

.blankets-proof__bar strong {
	font-weight: 700;
}

/* One price, under the title.
   The size range Flatsome prints there is hidden: with a size auto-selected the
   chosen size's price is the truthful one, and `assets/js/product-price.js` moves
   that live block into the same slot. Flatsome styled the block for life inside
   the form — small, with a dashed rule above it — so those two are undone here. */
.single-product .price.product-page-price {
	margin: 0;
	font-size: 1.5em;
}

/* The script hides this one once it moves the live block in, so the shop shows
   one price at a time and the HTML still carries a price before any script runs. */
.single-product .price.product-page-price.is-replaced {
	display: none;
}

.single-product .blankets-availability {
	margin: 4px 0 14px;
	font-size: 0.8em;
}

.single-product .blankets-availability.is-in-stock {
	color: #2f7d32;
}

.single-product .price-wrapper .single_variation {
	margin: 0;
}

.single-product .price-wrapper .woocommerce-variation-price {
	border-top: 0;
	padding: 0;
	font-size: 1.5em;
}

.single-product .price-wrapper .woocommerce-variation-price .price {
	margin: 0;
}

/* Availability text keeps its own size under the price. */
.single-product .price-wrapper .woocommerce-variation-availability {
	font-size: 0.8em;
}

/* Card rating: the stars, the average and the review count above the price.
   WooCommerce prints stars alone in the loop, so inc/woocommerce.php replaces that
   call with a block carrying the figures. The stars keep the site's teal, which is
   the colour Flatsome gives every `.star-rating` on the site. */
.blankets-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin: 4px 0 2px;
	text-decoration: none;
}

.blankets-card-rating:hover {
	text-decoration: none;
}

/* The card's own spacing takes over: Flatsome centres the stars and gives them a
   .5em margin, which reads as a gap under the title. */
.blankets-card-rating .star-rating {
	margin: 0;
	font-size: 15px;
}

.blankets-card-rating__average {
	color: #181818;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

.blankets-card-rating__count {
	color: var(--brand-muted);
	font-size: 15px;
	line-height: 1;
}

/* Cart checkout and checkout-page place-order buttons use the brand orange.
   Flatsome colours .button.alt with the secondary teal; these WC buttons need it.
   The WooCommerce Checkout *block* renders its own button, covered below. */
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.wc-block-components-button {
	background-color: var(--fs-color-primary) !important;
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Cart actions: one height for both buttons

   Flatsome's `.is-outline` sets `line-height: 2.19em` while a plain `.button`
   keeps 1.42em, the outline carries a 2px border, and the arrow sits in a span
   3.4px taller than the text line. The pair rendered 68px and 51px tall. Both are
   flex boxes with the same height, padding and line-height here, so the arrow
   cannot stretch one of them.
   --------------------------------------------------------------------------- */
.woocommerce-cart .button-continue-shopping.is-outline,
.woocommerce-cart .cart button[name="update_cart"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 51px;
	padding: 0 25px;
	border-width: 1px;
	line-height: 1.42;
}

/* ---------------------------------------------------------------------------
   Review photo wall

   Two rows of customer photos scrolling in opposite directions. Cards use
   `object-fit: contain`, not `cover`: the photos are phone snapshots of different
   shapes, and a cover crop cut the blanket out of several of them.

   Each row holds the same cards twice and slides by exactly 50% of its own width,
   which is the length of one copy, so the loop has no visible jump. The duplicate
   copy is `aria-hidden` so screen readers and tab order see each card once.
   --------------------------------------------------------------------------- */
.blankets-wall {
	overflow: hidden;
	margin-bottom: 30px;
}

/* No gap on the track and padding inside each group: that keeps two copies
   exactly equal in width, which the 50% translate depends on. */
.blankets-wall__row {
	display: flex;
	width: max-content;
	margin-bottom: 20px;
	will-change: transform;
}

.blankets-wall__group {
	display: flex;
	gap: 20px;
	padding-right: 20px;
}

.blankets-wall__row--left {
	animation: blankets-wall-left 70s linear infinite;
}

.blankets-wall__row--right {
	animation: blankets-wall-right 84s linear infinite;
}

/* Reading a card means the wall stops moving. */
.blankets-wall:hover .blankets-wall__row,
.blankets-wall:focus-within .blankets-wall__row {
	animation-play-state: paused;
}

@keyframes blankets-wall-left {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes blankets-wall-right {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.blankets-wall__card {
	flex: 0 0 240px;
	margin: 0;
	overflow: hidden;
	background: #f2f2f2;
	border-radius: 12px;
}

.blankets-wall__photo {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: contain;
	background: #f2f2f2;
}

.blankets-wall__name {
	padding: 10px 14px 12px;
	background: #e9e9e9;
	color: var(--brand-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

/* Motion off when the visitor asked for it: the rows become scrollable strips. */
@media (prefers-reduced-motion: reduce) {
	.blankets-wall {
		overflow-x: auto;
	}

	.blankets-wall__row {
		animation: none;
	}

	.blankets-wall__group[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 549px) {
	.blankets-wall__card {
		flex-basis: 170px;
		border-radius: 10px;
	}

	.blankets-wall__photo {
		height: 212px;
	}

	.blankets-wall__name {
		padding: 8px 10px 10px;
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------------------
   Policy pages (Terms, Privacy, Shipping, Returns, FAQs).

   These pages use Flatsome's default page template, which prints no title, so
   the H1 comes from the page content. The measure is capped at 820px: the
   container is 1280px, which is too wide for legal copy.
--------------------------------------------------------------------------- */
.page-wrapper {
	padding: 40px 0 60px;
}

.page-wrapper .col-inner {
	max-width: 820px;
}

.page-wrapper .page-heading {
	margin: 0 0 24px;
	font-size: 34px;
	font-weight: 600;
}

.page-wrapper h3 {
	margin: 34px 0 12px;
	font-size: 21px;
	font-weight: 600;
}

.page-wrapper h4 {
	margin: 26px 0 8px;
	font-size: 18px;
	font-weight: 600;
}

.page-wrapper p,
.page-wrapper li {
	font-size: 17px;
	line-height: 1.6;
}

.page-wrapper p {
	margin: 0 0 16px;
}

.page-wrapper ul,
.page-wrapper ol {
	margin: 0 0 18px 22px;
	padding: 0;
	list-style: disc;
}

.page-wrapper ol {
	list-style: decimal;
}

.page-wrapper li {
	margin-bottom: 8px;
}

.page-wrapper table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 16px;
}

.page-wrapper th,
.page-wrapper td {
	padding: 10px 12px;
	border: 1px solid #ececec;
	text-align: left;
	vertical-align: top;
}

.page-wrapper th {
	background-color: #f9f9fb;
	font-weight: 600;
}

.page-wrapper code {
	padding: 1px 5px;
	border-radius: 4px;
	background-color: #f4f4f4;
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Happy Customers (page-happy-customers.php).

   The layout: a summary of what the shop scores, a strip of the photos the
   reviews carry, the sort control, then the cards, each under the product it was
   written about. The geometry — a 1200px column with 16px side padding, a 350px
   score column and a 467px histogram, a 14px bar track, 80px strip photos, 96px
   card photos and ten reviews per page — and the type that carries the brand:
   Poppins at 17px on a 1.3 line, the orange accent, gold stars, the 10px corner
   and the 34px page title.

   Every rule is scoped to `.blankets-customers` on purpose. The policy block above
   sets a 17px/1.6 measure on every `.page-wrapper` paragraph and list item, and
   those selectors would otherwise win.
--------------------------------------------------------------------------- */

/* The page's own column. The policy block caps every `.page-wrapper .col-inner` at
   820px, so opening back up to 1200px needs the extra class. */
.page-wrapper .col-inner.blankets-customers {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* The summary row: the score column and the distribution, centred. Both stack
   below 989px, this theme's two-column breakpoint. */
.blankets-customers .blankets-reviews__summary {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0 0 24px;
}

.blankets-customers .blankets-reviews__score-column {
	flex: 0 1 350px;
}

/* The score line: the stars and the figure on one line at one size, then the count
   under it. Neither part is bold. */
.blankets-customers .blankets-reviews__score {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--brand-muted);
}

.blankets-customers .blankets-reviews__based,
.blankets-customers .blankets-reviews__empty,
.blankets-customers .blankets-review-list__empty {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--brand-muted);
}

/* One star implementation at two sizes: 20px in the score line and on a card,
   14px in the histogram. A lit star is gold; an unlit one is the same gold drawn
   hollow, never a grey star. */
.blankets-customers .blankets-rating__star {
	display: block;
	width: 20px;
	height: 20px;
	color: var(--brand-gold);
}

.blankets-customers .blankets-rating__star svg {
	display: block;
	width: 100%;
	height: 100%;
}

.blankets-customers .blankets-rating__star:not(.is-on) svg {
	fill: none;
	stroke: currentColor;
}

.blankets-customers .blankets-reviews__stars {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.blankets-customers .blankets-reviews__stars--empty {
	gap: 6px;
}

/* The distribution. Each row is content-sized and centred inside its column, not
   stretched to the column's width. */
.blankets-customers .blankets-reviews__bars {
	flex: 1 1 467px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blankets-customers .blankets-reviews__bar-row {
	display: flex;
	align-items: center;
	width: fit-content;
	margin: 0 auto 10px;
	font-size: 13px;
	line-height: 14px;
	color: var(--brand-muted);
}

.blankets-customers .blankets-reviews__bar-label {
	display: inline-flex;
	flex: 0 0 84px;
	gap: 3px;
}

.blankets-customers .blankets-reviews__bar-label .blankets-rating__star {
	width: 14px;
	height: 14px;
}

.blankets-customers .blankets-reviews__bar-track {
	flex: 0 0 140px;
	height: 14px;
	margin: 0 24px;
	border-radius: 4px;
	background: #ececec;
	overflow: hidden;
}

.blankets-customers .blankets-reviews__bar-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--fs-color-primary);
}

.blankets-customers .blankets-reviews__bar-count {
	flex: 0 0 24px;
	color: var(--brand-muted);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 989px) {
	.blankets-customers .blankets-reviews__summary {
		flex-wrap: wrap;
	}

	.blankets-customers .blankets-reviews__score-column,
	.blankets-customers .blankets-reviews__bars {
		flex: 1 1 100%;
		min-width: 0;
	}

	.blankets-customers .blankets-reviews__bars {
		margin-top: 16px;
	}

	/* The row's parts are 84 + 24 + 140 + 24 + 24 = 296px, which does not fit a
	   phone's column. Left alone the row keeps that width — `min-width: auto` on a
	   flex item is its content width — and breaks out through the padding. The row
	   takes the column's width and the track gives up its fixed 140px. */
	.blankets-customers .blankets-reviews__bar-row {
		width: auto;
	}

	.blankets-customers .blankets-reviews__bar-track {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* The photo strip: every photo the shop's reviews carry, as 80px squares. The
   title stays a heading, so it keeps this theme's weight and capitals; only its
   size and colour are set here. */
.blankets-customers .blankets-photo-strip {
	margin: 0 0 28px;
}

.blankets-customers .blankets-photo-strip__title {
	margin: 0 0 8px;
	font-size: 17px;
	color: var(--brand-ink);
}

.blankets-customers .blankets-photo-strip__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blankets-customers .blankets-photo-strip__list li {
	margin: 0;
}

.blankets-customers .blankets-photo-strip__list img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--brand-button-radius);
}

/* The sort control: a 40px select beside a 40px Apply. The caret is drawn rather
   than the browser's, and takes no pointer events so a click on it opens the
   select underneath. */
.blankets-customers .blankets-reviews__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.blankets-customers .blankets-reviews__sort-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.blankets-customers .blankets-caret {
	position: absolute;
	right: 14px;
	width: 10px;
	height: 6px;
	color: var(--brand-ink);
	pointer-events: none;
}

.blankets-customers .blankets-reviews__sort select {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	min-height: 40px;
	padding: 0 34px 0 12px;
	border: 1px solid #dcdcdc;
	border-radius: var(--brand-button-radius);
	background: #fff;
	color: var(--brand-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
}

/* This theme's button tier at the control's own 40px box. The margin has to be
   zeroed: Flatsome carries `margin: 0 15px 15px 0` on `button`, which would make
   the row 15px taller than the controls in it. */
.blankets-customers .blankets-reviews__sort-submit {
	margin: 0;
	padding: 0 20px;
	min-height: 40px;
	line-height: 40px;
	border: 0;
	border-radius: var(--brand-button-radius);
	background-color: var(--fs-color-primary);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

/* The list: one card per review, each under the product it was written about. */
.blankets-customers .blankets-review-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blankets-customers .blankets-review {
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid #ececec;
}

.blankets-customers .blankets-review__product {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.3;
}

.blankets-customers .blankets-review__about {
	margin-right: 4px;
	color: var(--brand-muted);
}

/* The card's two header rows: the stars with the date on the right, then the
   reviewer's initial beside the name. */
.blankets-customers .blankets-review-card__header {
	margin: 0 0 10px;
}

.blankets-customers .blankets-review-card__rating {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 8px;
}

.blankets-customers .blankets-review-card__stars {
	display: inline-flex;
	gap: 4px;
}

.blankets-customers .blankets-review-card__date {
	color: var(--brand-muted);
	font-size: 13px;
	line-height: 1.3;
}

.blankets-customers .blankets-review-card__who {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The initial badge. The imported reviews carry a name but no email, so a gravatar
   would be the same grey placeholder figure on every card; the name's first letter
   in the brand orange says who wrote it instead. */
.blankets-customers .blankets-review-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border: 1px solid #ececec;
	border-radius: 50%;
	background-color: var(--brand-cream);
	color: var(--fs-color-primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.blankets-customers .blankets-review-card__author {
	color: var(--brand-ink);
	font-size: 17px;
	line-height: 1.3;
}

.blankets-customers .blankets-review-card__body {
	color: var(--brand-muted);
	font-size: 17px;
	line-height: 1.3;
}

.blankets-customers .blankets-review-card__body p {
	margin: 0;
	line-height: 1.3;
}

/* An imported review's first paragraph is its title, and a title is bold and
   stands apart only when a body follows it: a review with no title is one
   paragraph and stays plain body copy. Weight 600 is this theme's heading weight,
   so the title is bold without shouting; the colour stays the body's muted grey. */
.blankets-customers .blankets-review-card__body p:first-child:not(:last-child) {
	margin: 0 0 8px;
	font-weight: 600;
}

.blankets-customers .blankets-review__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.blankets-customers .blankets-review__photos li {
	margin: 0;
}

.blankets-customers .blankets-review__photos img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--brand-button-radius);
}

/* Pagination, plain: no boxes, the page you are on in the accent colour. */
.blankets-customers .blankets-pagination {
	margin-top: 28px;
}

.blankets-customers .blankets-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blankets-customers .blankets-pagination li {
	display: inline;
	margin: 0;
}

.blankets-customers .blankets-pagination a,
.blankets-customers .blankets-pagination span {
	display: inline-block;
	padding: 3px 2px;
	color: var(--brand-ink);
	font-size: 17px;
	line-height: 1.3;
	text-decoration: none;
}

.blankets-customers .blankets-pagination a:hover,
.blankets-customers .blankets-pagination a:focus {
	color: var(--fs-color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.blankets-customers .blankets-pagination .current {
	color: var(--fs-color-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Header logo. The theme prints `assets/img/logo.png` itself, so Flatsome's
   `#logo img` rules never reach it. The file is 720×200, 3.6:1, so the height
   follows the width: 232 px wide draws 64 px tall inside the 90 px bar.
   Flatsome reserves `logo_width` (232) for `#logo`; the stuck and mobile bars are
   shorter than 90 px, so those size by height instead. The class sits on the
   image itself, so the page loader, which prints the logo outside `#logo`, gets
   the same size. The background is keyed out of the artwork, so the global
   `img` radius is dropped: nothing is left for it to round. */
.brand-logo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.stuck .brand-logo {
	width: auto;
	height: 48px;
}

@media (max-width: 849px) {
	.brand-logo {
		width: auto;
		height: 46px;
	}
}

/* Touch targets.
   Measured at 360 px on 2026-10-23: the promo CTA, the footer links, the shop
   toolbar's filter button and sort select, the gallery arrows and the size pills
   all landed under the 48 px a thumb needs. Each keeps its own type and colour;
   only the box grows. Prose links (breadcrumbs, product titles, the star row) stay
   as they are: they sit inline with space around them, and padding them to 48 px
   would space out paragraphs instead of targets. */
.promo-hero .promo-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	white-space: nowrap;
}

.footer-wrapper .ux-menu-link__link {
	min-height: 48px;
}

.filter-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

.woocommerce-ordering select,
.woocommerce-ordering .orderby {
	min-height: 48px;
}

.woocommerce-product-gallery .flickity-button,
.product-images .flickity-button {
	min-width: 48px;
}

.blankets-size__option {
	height: 48px;
}

/* The quantity stepper is one capsule whose two ± segments were 27 px wide. The
   winning width comes from a sheet this file cannot out-order (Flatsome's shop
   build, measured: `min-width: 24px`), so the rule carries !important, the same
   workaround the heading and button rules use. */
.ux-quantity__button {
	min-width: 48px !important;
}

.woocommerce-tabs .tabs a {
	display: flex;
	align-items: center;
	min-height: 48px;
}

/* Pagination numbers are 36 px boxes and the row has room for 48. Flatsome pins
   their width, so this sets both axes. */
.nav-pagination .page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-width: 48px;
	min-height: 48px;
}