/* ---- ic-chrome.css ---- */
/* ICANCROCHET — header, footer, landing rhythm
   -------------------------------------------------------------------------- */

:root {
	--ic-pink: #e00189;
	--ic-ink: #33202b;
	--ic-soft: #7a6570;
	--ic-line: #f3d9e6;
	--ic-tint: #fff5fa;
}

/* --------------------------------------------------------------- header */

.ast-primary-header-bar.ast-primary-header {
	border-bottom: 1px solid var(--ic-line);
}

.ast-primary-header-bar .site-primary-header-wrap {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* The wordmark is inside the logo image; the text title is a duplicate. */
.site-header .ast-site-title-wrap {
	display: none !important;
}

.site-header .custom-logo-link img,
.site-header .site-logo-img img {
	width: auto !important;
	max-width: none !important;
	height: 60px !important;
	max-height: 60px !important;
	display: block;
}

.ast-primary-header-bar .main-navigation ul li a,
.ast-primary-header-bar .main-header-menu > li > a {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1px;
	padding-left: 14px;
	padding-right: 14px;
}

.ast-primary-header-bar .main-header-menu > li > a:hover,
.ast-primary-header-bar .main-header-menu > .current-menu-item > a {
	color: var(--ic-pink);
}

@media (max-width: 1200px) {
	.site-header .custom-logo-link img,
	.site-header .site-logo-img img {
		height: 52px !important;
		max-height: 52px !important;
	}

	.ast-primary-header-bar .main-navigation ul li a {
		font-size: 14.5px;
		padding-left: 11px;
		padding-right: 11px;
	}
}

@media (max-width: 921px) {
	.ast-primary-header-bar .site-primary-header-wrap,
	#ast-mobile-header .site-primary-header-wrap {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.site-header .custom-logo-link img,
	.site-header .site-logo-img img {
		height: 46px !important;
		max-height: 46px !important;
	}
}

@media (max-width: 420px) {
	.site-header .custom-logo-link img,
	.site-header .site-logo-img img {
		height: 40px !important;
		max-height: 40px !important;
	}
}

/* The promo strip should read as one line, not a paragraph, on small screens. */
.ic-announce {
	padding: 9px 14px;
	font-size: 13px;
	line-height: 1.35;
}

@media (max-width: 480px) {
	.ic-announce {
		font-size: 12px;
		padding: 8px 12px;
	}
}

/* --------------------------------------------------------------- footer */

.ic-ft {
	background: #fff;
	border-top: 1px solid var(--ic-line);
	margin-top: 0;
}

.ic-ft-in {
	max-width: 1140px;
	margin: 0 auto;
	padding: 44px 24px 30px;
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
	gap: 34px;
	align-items: start;
}

.ic-ft-logo {
	display: inline-block;
	line-height: 0;
	margin-bottom: 14px;
}

.ic-ft-logo img {
	height: 48px;
	width: auto;
	display: block;
}

.ic-ft-word {
	font-size: 22px;
	font-weight: 800;
	color: var(--ic-pink);
	line-height: 1;
}

.ic-ft-tag {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ic-soft);
	max-width: 34em;
}

.ic-ft-mail {
	margin: 0;
	font-size: 14px;
}

.ic-ft-mail a {
	color: var(--ic-pink);
	font-weight: 600;
	text-decoration: none;
}

.ic-ft-mail a:hover {
	text-decoration: underline;
}

.ic-ft-h {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ic-ink);
}

.ic-ft-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ic-ft-col li {
	margin: 0 0 9px;
}

.ic-ft-col a,
.ic-ft-col .ic-cc-open-link {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ic-soft);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}

.ic-ft-col a:hover,
.ic-ft-col .ic-cc-open-link:hover {
	color: var(--ic-pink);
}

.ic-ft-pay .ic-pay-marks,
.ic-ft-pay .ic-co-marks {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 10px;
	justify-content: flex-start;
}

.ic-ft-pay img,
.ic-ft-pay svg {
	height: 26px;
	width: auto;
}

.ic-ft-ssl {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ic-soft);
}

.ic-ft-base {
	border-top: 1px solid var(--ic-line);
	background: var(--ic-tint);
}

.ic-ft-base p {
	max-width: 1140px;
	margin: 0 auto;
	padding: 15px 24px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ic-soft);
	text-align: center;
}

@media (max-width: 1000px) {
	.ic-ft-in {
		grid-template-columns: 1fr 1fr;
		gap: 30px 28px;
		padding: 38px 22px 26px;
	}

	.ic-ft-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.ic-ft-in {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 30px 18px 24px;
		text-align: center;
	}

	.ic-ft-tag {
		margin-left: auto;
		margin-right: auto;
	}

	.ic-ft-col ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 18px;
	}

	.ic-ft-col li {
		margin: 0;
	}

	.ic-ft-pay .ic-pay-marks,
	.ic-ft-pay .ic-co-marks {
		justify-content: center;
	}
}

/* ------------------------------------------- landing rhythm + characters */

/* Elementor sizes these blocks to their content, which left-aligns them
   inside a wider column. Centring the box centres the artwork without
   stretching it. */
.ic-landing .e-con-inner > .e-con {
	margin-left: auto !important;
	margin-right: auto !important;
}

.ic-landing .e-con-inner > .e-con > .e-con {
	margin-left: auto !important;
	margin-right: auto !important;
}

.ic-landing img {
	height: auto;
}

/* No page should scroll sideways. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

.ic-landing,
.ic-landing .elementor-widget-container {
	max-width: 100%;
}

/* ------------------------------------- header links: no blue anywhere ---- */
/* Astra prints its own menu colours in an inline block after this file, so
   the brand colour has to be marked important to win. Header links now match
   the footer exactly: ink by default, brand pink on hover, on focus, and for
   the page you are currently on. */
.ast-primary-header-bar .main-header-menu > li > a:hover,
.ast-primary-header-bar .main-header-menu > li > a:focus,
.ast-primary-header-bar .main-header-menu > li > a:active,
.ast-primary-header-bar .main-header-menu > li.current-menu-item > a,
.ast-primary-header-bar .main-header-menu > li.current_page_item > a,
.ast-primary-header-bar .main-header-menu > li.current-menu-ancestor > a,
#ast-desktop-header .main-header-menu .menu-link:hover,
#ast-desktop-header .main-header-menu .menu-link:focus,
#ast-desktop-header .main-header-menu .menu-link:active,
#ast-desktop-header .main-header-menu .current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu .current_page_item > .menu-link,
#ast-desktop-header .main-header-menu .current-menu-ancestor > .menu-link,
.site-header .main-header-menu a:hover,
.site-header .main-header-menu .current-menu-item > a,
.site-header .main-header-menu .current_page_item > a {
	color: var(--ic-pink) !important;
}

/* the label sits in its own span, so let it take the colour above */
.site-header .main-header-menu a:hover .menu-text,
.site-header .main-header-menu .current-menu-item > a .menu-text,
.site-header .main-header-menu .current_page_item > a .menu-text,
#ast-desktop-header .main-header-menu .menu-link:hover .menu-text,
#ast-desktop-header .main-header-menu .current-menu-item > .menu-link .menu-text {
	color: inherit !important;
}
/* The theme underlines whichever page you are on. The colour already says
   which one it is, so the line is noise. */
.site-header .main-header-menu a,
.site-header .main-header-menu a:hover,
.site-header .main-header-menu a:focus,
.site-header .main-header-menu a:active,
.site-header .main-header-menu .current-menu-item > a,
.site-header .main-header-menu .current_page_item > a,
.site-header .main-header-menu .current-menu-ancestor > a,
#ast-desktop-header .main-header-menu .menu-link,
#ast-desktop-header .main-header-menu .menu-link:hover,
#ast-desktop-header .main-header-menu .menu-link:focus,
#ast-desktop-header .main-header-menu .current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu .current_page_item > .menu-link {
	/* no underline under the current page */
	text-decoration: none !important;
}
/* ---- ic-polish.css ---- */
/* ICANCROCHET - announcement bar, price row, focus states, image ground
   -------------------------------------------------------------------------- */

/* ------------------------------------------------- announcement bar */
/* Matches the Shopify bar: a solid brand strip with bold, generously
   spaced white text - never an underlined link. */
.ic-announce {
	background: #e00189;
	color: #fff;
	text-align: center;
	padding: 15px 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
}

.ic-announce a,
.ic-announce a:hover,
.ic-announce a:focus,
.ic-announce a:visited {
	color: #fff;
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	display: inline-block;
	max-width: 1100px;
}

@media (max-width: 921px) {
	.ic-announce {
		padding: 13px 20px;
		font-size: 15px;
	}
}

@media (max-width: 600px) {
	.ic-announce {
		padding: 12px 26px;
		font-size: 14.5px;
		line-height: 1.45;
	}
}

/* ------------------------------------------------------- price row */
/* Price, compare-at price and the discount badge stay on one line at every
   width; the type scales down rather than wrapping. */
.ic-price {
	display: flex !important;
	align-items: baseline;
	flex-wrap: nowrap !important;
	gap: clamp(6px, 1.4vw, 12px);
	min-width: 0;
}

.ic-price .ic-price-now {
	flex: 0 1 auto;
	white-space: nowrap;
	font-size: clamp(23px, 4.4vw, 34px);
	line-height: 1.15;
}

.ic-price .ic-price-was {
	flex: 0 1 auto;
	white-space: nowrap;
	font-size: clamp(13px, 2.3vw, 17px);
}

.ic-price .ic-badge-off {
	flex: 0 0 auto;
	white-space: nowrap;
	align-self: center;
	font-size: clamp(9.5px, 1.7vw, 12px);
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 999px;
	background: #fff0f7;
	color: #e00189;
	border: 1px solid #f6cfe3;
}

@media (max-width: 380px) {
	.ic-price {
		gap: 5px;
	}

	.ic-price .ic-badge-off {
		padding: 4px 7px;
	}
}

/* --------------------------------------------- image loading ground */
/* Lazy images reserve their box before the file arrives. Left alone the
   pink page background shows through that box, which reads as a flash on
   load and as an empty gap while scrolling. A white ground inside the
   reserved box removes both without hiding anything. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
	background: #fff;
}

.woocommerce-product-gallery__image {
	border-radius: 10px;
	overflow: hidden;
}

.ic-landing .elementor-widget-image,
.ic-landing .elementor-widget-image .elementor-widget-container,
.ic-landing .e-hosted-video {
	background: #fff;
}

.ic-landing .elementor-widget-image img {
	display: block;
	background: #fff;
}

/* --------------------------------------------------- focus states */
/* The site uses no blue. Replace every browser default with the brand
   ring - visible for keyboard users, invisible on a mouse click. */
.icr-more,
.icr-write-btn,
.icr-bar-row,
.icr-shot,
.icrc-slide,
.icr-card,
.ic-btn,
.ic-sticky-btn,
.single_add_to_cart_button,
.ic-cc-open-link {
	-webkit-tap-highlight-color: transparent;
}

.icr-more:focus,
.icr-write-btn:focus,
.icr-bar-row:focus,
.icr-shot:focus,
.icrc-slide:focus,
.icr-card:focus,
.single_add_to_cart_button:focus,
.ic-cc-open-link:focus {
	outline: none;
	box-shadow: none;
}

.icr-more:focus-visible,
.icr-write-btn:focus-visible,
.icr-bar-row:focus-visible,
.icr-shot:focus-visible,
.icrc-slide:focus-visible,
.icr-card:focus-visible,
.single_add_to_cart_button:focus-visible,
.ic-cc-open-link:focus-visible,
.ic-ft a:focus-visible,
.ic-fx-back:focus-visible {
	outline: 3px solid rgba(224, 1, 137, .45);
	outline-offset: 2px;
	border-radius: 8px;
}

.icr-more:active,
.icr-more:focus,
.icr-more:hover {
	background: #e00189;
	color: #fff;
	border-color: #e00189;
}

.icr-shot,
.icr-shot img,
.icrc-slide,
.icrc-thumb,
.icr-card img {
	border: 0;
	outline-color: rgba(224, 1, 137, .45);
}

.icr-shot:focus img,
.icr-shot:active img,
.icr-card a:focus img {
	background: transparent;
	box-shadow: none;
}

::selection {
	background: rgba(224, 1, 137, .18);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: #e00189 !important;
	box-shadow: 0 0 0 3px rgba(224, 1, 137, .14) !important;
}

/* ------------------------------------------------- mobile CTA row */
@media (max-width: 921px) {
	.woocommerce div.product form.cart,
	.woocommerce div.product form.cart .button,
	.single_add_to_cart_button {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		display: block;
		text-align: center;
		float: none !important;
	}

	.woocommerce div.product form.cart .quantity {
		display: none;
	}

	.ic-landing .elementor-widget-button .elementor-button-wrapper {
		text-align: center;
	}

	.ic-landing .elementor-widget-button .elementor-button {
		display: inline-flex;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------- FAQ icons */
.elementor-toggle .elementor-toggle-icon {
	transition: transform .22s ease;
}

.elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon-closed {
	display: none;
}

/* --------------------------------------------- buttons never run past the edge */
/* .ic-btn carries white-space:nowrap, which is right for short labels and wrong
   for a long one on a phone: the button grew to 484px inside a 390px screen and
   the label was simply cut off. Long labels now wrap instead. */

a.ic-btn,
button.ic-btn {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 640px) {

	a.ic-btn,
	button.ic-btn {
		white-space: normal;
		line-height: 1.3;
	}

	.ic-howto-cta a.ic-btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 14px 18px;
		font-size: 15px;
	}
}
/* ---- ic-header.css ---- */
/* ICANCROCHET - header layout matched to the original Shopify store
   Desktop: logo centred, navigation centred beneath it.
   Mobile:  hamburger left, logo centred.
   -------------------------------------------------------------------------- */

/* ----------------------------------------------------------- desktop */
#ast-desktop-header .ast-builder-grid-row {
	grid-template-columns: 1fr !important;
	row-gap: 12px;
	justify-items: center;
}

#ast-desktop-header .site-header-primary-section-left,
#ast-desktop-header .site-header-primary-section-right {
	width: 100%;
	justify-content: center !important;
}

#ast-desktop-header .site-branding {
	justify-content: center;
}

#ast-desktop-header .ast-primary-header-bar .site-primary-header-wrap {
	padding-top: 22px;
	padding-bottom: 16px;
}

.site-header #ast-desktop-header .custom-logo-link img,
.site-header #ast-desktop-header .site-logo-img img {
	height: 92px !important;
	max-height: 92px !important;
	width: auto !important;
	max-width: none !important;
}

#ast-desktop-header .main-header-menu {
	justify-content: center;
}

#ast-desktop-header .main-header-menu > li > a {
	font-size: 17px;
	font-weight: 600;
	padding: 6px 22px;
	line-height: 1.4;
}

#ast-desktop-header .main-header-menu > .current-menu-item > a,
#ast-desktop-header .main-header-menu > .current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1.5px;
}

@media (max-width: 1200px) {
	.site-header #ast-desktop-header .custom-logo-link img,
	.site-header #ast-desktop-header .site-logo-img img {
		height: 80px !important;
		max-height: 80px !important;
	}

	#ast-desktop-header .main-header-menu > li > a {
		font-size: 16px;
		padding: 6px 16px;
	}
}

/* ------------------------------------------------------------ mobile */
#ast-mobile-header .ast-builder-grid-row {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	min-height: 66px;
	grid-template-columns: none !important;
}

#ast-mobile-header .site-header-primary-section-right {
	order: -1;
	flex: 0 0 auto;
}

#ast-mobile-header .site-header-primary-section-left {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	pointer-events: auto;
}

.site-header #ast-mobile-header .custom-logo-link img,
.site-header #ast-mobile-header .site-logo-img img {
	height: 62px !important;
	max-height: 62px !important;
	width: auto !important;
	max-width: none !important;
}

#ast-mobile-header .menu-toggle,
#ast-mobile-header .ast-mobile-menu-trigger-fill,
#ast-mobile-header .ast-mobile-menu-trigger-minimal {
	background: transparent !important;
	border: 0 !important;
	color: #33202b !important;
	padding: 10px 6px !important;
	box-shadow: none !important;
}

#ast-mobile-header .menu-toggle svg,
#ast-mobile-header .menu-toggle .ast-mobile-svg {
	width: 30px;
	height: 30px;
	fill: #33202b;
}

@media (max-width: 420px) {
	.site-header #ast-mobile-header .custom-logo-link img,
	.site-header #ast-mobile-header .site-logo-img img {
		height: 54px !important;
		max-height: 54px !important;
	}

	#ast-mobile-header .ast-builder-grid-row {
		min-height: 58px;
	}
}

/* ------------------------------------------------- the mobile drawer */
#ast-mobile-header .main-header-bar-navigation {
	background: #fff;
}

#ast-mobile-header .main-header-bar-navigation .main-header-menu {
	border-top: 1px solid #f0e3ea;
}

#ast-mobile-header .main-header-bar-navigation .menu-item {
	border-bottom: 1px solid #f4eaf0;
}

#ast-mobile-header .main-header-bar-navigation .menu-item > a {
	display: block;
	padding: 19px 24px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: #33202b;
	background: #fff;
}

#ast-mobile-header .main-header-bar-navigation .menu-item > a:hover,
#ast-mobile-header .main-header-bar-navigation .current-menu-item > a,
#ast-mobile-header .main-header-bar-navigation .current_page_item > a {
	background: #f4f1f2;
	color: #33202b;
}