/* Country Store theme – "Farmhouse" vintage look (2026-10).
   Owner: "we don't want all the bright colors. More dull and vintage looking."
   Loaded after csf.css; applies when <html> has the classes csf-v look-a (set in header.twig). Colours come from the
   Rose Creek Fashions logo picture. Product photos are never re-coloured. */

/* ---------- colours ---------- */
html.look-a {
	--v-accent: #7a3b33;       /* barn red, faded */
	--v-accent-dark: #5e2c26;
	--v-ink: #3b2f2a;          /* dark brown instead of black */
	--v-muted: #6e5f55;
	--v-gold: #b8955e;         /* the logo lettering */
	--v-line: #d6c4a3;
	--v-card: #fffaf0;
	--v-panel: rgba(255, 250, 240, 0.55);
	--v-strip: #4a3a33;
	--v-sale: #7a3b33;
	--v-price: #7a3b33;
	--v-stock: #5f6b4e;        /* sage */
	--v-tile: #5e4536;
	--v-tile-text: #f3ead8;
	--v-script: 'Lobster Two', 'Playfair Display', Georgia, serif;
}

/* ---------- base ---------- */
.csf-v body {
	color: var(--v-ink);
	background: #efe6d3 url('../../../../../image/catalog/csf-theme/vintage/parchment-tile.jpg') repeat;   /* seamless 1024 px tile, sharp at any size */
}
.csf-v h1, .csf-v h2, .csf-v h3, .csf-v h4, .csf-v h5 {
	color: var(--v-ink);
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-variant-numeric: lining-nums;     /* fabric numbers like 19550 stay easy to read */
}
.csf-v .caption h4, .csf-v .csf-card h4, .csf-v .csf-card-name {
	font-family: 'Inter', Arial, sans-serif;
	font-weight: 400;
}
.csf-v a, .csf-v footer a, .csf-v footer h5, .csf-v footer {
	color: var(--v-ink);
}
.csf-v a:hover, .csf-v a:focus, .csf-v #menu .nav > li > a:hover, .csf-v #menu .nav > li.open > a,
.csf-v #menu .nav > li:hover > a, .csf-v #top-links.csf-links a:hover, .csf-v #cart > .btn:hover {
	color: var(--v-accent);
}
.csf-v #menu .nav > li > a, .csf-v #top-links.csf-links a, .csf-v #cart > .btn {
	color: var(--v-ink);
}
.csf-v .dropdown-menu li > a:hover {
	background: var(--v-accent);
}

/* broken wax seal in the right margin, only where the margin is wide enough to stay clear of the page */
@media (min-width: 1500px) {
	.csf-v body::after {
		content: '';
		position: absolute;              /* pressed onto the page: scrolls with it */
		right: 28px;
		top: 360px;
		width: 129px;
		height: 135px;
		background: url('../../../../../image/catalog/csf-theme/vintage/seal.png') center / contain no-repeat;
		pointer-events: none;
		z-index: 0;
	}
}

/* ---------- buttons ---------- */
.csf-v .btn-primary, .csf-v .btn-danger, .csf-v .btn-info, .csf-v .form-group .btn-primary,
.csf-v .form-group .product_button, .csf-v .home_button button, .csf-v #menu .btn-navbar,
.csf-v .top_sale .product-thumb .button-group button, .csf-v .product-list .product-thumb .button-group button {
	background: var(--v-accent);
	border-color: var(--v-accent);
	color: #fff;                      /* links that look like buttons (cart "Checkout") would otherwise get the brown link colour */
}
.csf-v .btn-primary:hover, .csf-v .btn-primary:focus, .csf-v .btn-danger:hover, .csf-v .btn-info:hover,
.csf-v .form-group .product_button:hover {
	color: #fff;
	background: var(--v-accent-dark);
	border-color: var(--v-accent-dark) !important;
}
.csf-v .csf-pill, .csf-v .csf-btn-outline {
	background: transparent;
	border-color: var(--v-ink);
	color: var(--v-ink);
}
.csf-v .csf-pill:hover, .csf-v .csf-btn-outline:hover {
	background: var(--v-ink);
	color: var(--v-card);
}

/* ---------- top strip, header, menu ---------- */
.csf-v #top {
	background: var(--v-strip);
}
.csf-v header, .csf-v #menu {
	background: transparent;
}
.csf-v #logo img {
	height: 64px;
	width: auto;
	max-width: none;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(59, 47, 42, 0.35);
}
.csf-v #search {
	background: var(--v-card);
	border: 1px solid var(--v-line);
}
.csf-v #search input {
	background: transparent;
}

/* menu: a strip of barn-red cloth (faint twill) with cream running stitches along both edges, cream drop-down panel */
.csf-v #menu {
	background:
		repeating-linear-gradient(90deg, rgba(243, 234, 216, 0.8) 0 7px, transparent 7px 12px) left 8px top 5px / calc(100% - 16px) 2px no-repeat,
		repeating-linear-gradient(90deg, rgba(243, 234, 216, 0.8) 0 7px, transparent 7px 12px) left 8px bottom 5px / calc(100% - 16px) 2px no-repeat,
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 5px),
		var(--v-accent);
	border-bottom: 2px solid var(--v-gold);
	border-radius: 3px 3px 0 0;
	padding: 0 6px;
}
.csf-v #menu .nav > li > a, .csf-v #menu .nav > li:first-child > a {
	color: #f3ead8;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 15px;
	padding: 11px 16px;
}
.csf-v #menu .nav > li > a:hover, .csf-v #menu .nav > li.open > a, .csf-v #menu .nav > li:hover > a {
	color: #fff;
	background: rgba(40, 20, 15, 0.25);   /* see-through, so the stitches stay visible */
	box-shadow: inset 0 -3px 0 var(--v-gold);
}
/* "Sale" in the menu: a sewn-on twill label instead of the word (the text stays for screen readers and search engines) */
.csf-v #menu .nav > li > a[href$="/sale-items"], .csf-v #menu .nav > li > a[href*="path=127"] {
	min-width: 104px;
	color: transparent !important;
	text-shadow: none;
	background: url('../../../../../image/catalog/csf-theme/vintage/sale-label.png') center / 86px auto no-repeat;
}
.csf-v #menu .nav > li > a[href$="/sale-items"]:hover, .csf-v #menu .nav > li.open > a[href$="/sale-items"],
.csf-v #menu .nav > li > a[href*="path=127"]:hover, .csf-v #menu .nav > li.open > a[href*="path=127"] {
	background: url('../../../../../image/catalog/csf-theme/vintage/sale-label.png') center / 86px auto no-repeat, rgba(40, 20, 15, 0.25);
}
.csf-v #menu .dropdown-menu {
	/* cream panel with a barn-red running stitch along its bottom edge, like the menu band */
	background:
		repeating-linear-gradient(90deg, rgba(122, 59, 51, 0.75) 0 7px, transparent 7px 12px) left 10px bottom 8px / calc(100% - 20px) 2px no-repeat,
		var(--v-card);
	border-top: 3px solid var(--v-gold);
	box-shadow: 0 12px 18px rgba(59, 47, 42, 0.18);
}
.csf-v .csf-mega-item, .csf-v .csf-mega-item a {
	color: var(--v-ink);
}
.csf-v .csf-mega-item img {
	filter: sepia(0.35) saturate(0.6) contrast(0.95);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(59, 47, 42, 0.25);
}
.csf-v #menu .see-all {
	color: var(--v-accent);
}
.csf-v #menu #category {
	color: #f3ead8;
	padding-left: 10px;
}
.csf-v #menu .btn-navbar, .csf-v #menu .btn-navbar:hover, .csf-v #menu .btn-navbar:focus {
	background: var(--v-accent-dark);
	border-color: var(--v-gold);
}
.csf-v .csf-footer-logo {
	height: 60px;
	width: auto;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(59, 47, 42, 0.35);
}

/* ---------- promo bar: quiet cream band instead of red ---------- */
.csf-v .csf-promo {
	background: var(--v-panel);
	border-top: 1px solid var(--v-gold);
	border-bottom: 1px solid var(--v-gold);
	color: var(--v-ink);
}
.csf-v .csf-promo-item, .csf-v a.csf-promo-item, .csf-v a.csf-promo-item:hover {
	color: var(--v-muted);
}
.csf-v .csf-promo-item strong {
	color: var(--v-ink);
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 15px;
}
.csf-v .csf-promo-item + .csf-promo-item {
	border-left: 1px solid var(--v-line);
}

/* ---------- home banner ---------- */
.csf-v .csf-hero {
	flex-direction: column;
	background: transparent;
}
.csf-v .csf-hero-images img {
	width: 100%;
	border-radius: 4px;
}
.csf-v .csf-hero-text {
	align-items: center;
	text-align: center;
	color: var(--v-muted);
	padding: 14px 20px 4px;
}
.csf-v .csf-hero-text h1 {
	color: var(--v-ink);
	font-family: var(--v-script);
	font-size: 32px;
	font-weight: 700;
	font-style: italic;
}
.csf-v .csf-hero-text p {
	font-size: 15px;
}
html.look-a .csf-hero-images img {
	height: auto;                 /* the whole picture */
}

/* ---------- Shop by Department ---------- */
.csf-v .csf-panel, .csf-v .csf-cat-hero {
	background-color: var(--v-panel);
	border: 1px solid var(--v-line);
}
.csf-v .csf-tile img {
	filter: sepia(0.35) saturate(0.6) contrast(0.95);     /* softens the bright stock pictures */
}
.csf-v .csf-tile span {
	background: var(--v-tile);
	color: var(--v-tile-text);
	font-family: 'Playfair Display', Georgia, serif;
}
.csf-v .csf-tile:hover span {
	background: var(--v-accent);
	color: #fff;
}
.csf-v .csf-cat-hero {
	position: relative;
}
.csf-v .csf-cat-hero::before {       /* softens the category banner photo, like the department pictures */
	content: '';
	position: absolute;
	inset: 0;
	backdrop-filter: sepia(0.35) saturate(0.6) contrast(0.95);
	-webkit-backdrop-filter: sepia(0.35) saturate(0.6) contrast(0.95);
}
.csf-v .csf-cat-hero h1 {
	position: relative;

	background: var(--v-tile);
	color: var(--v-tile-text);
}

/* ---------- section headings, rows, prices ---------- */
.csf-v .csf-red, .csf-v .csf-note {
	color: var(--v-accent);
}
html.look-a .csf-section h2, html.look-a .csf-section-head h3 {
	font-family: var(--v-script);
	font-style: italic;
	font-size: 28px;
	color: var(--v-accent);
}
.csf-v .home_heading .nav.nav-tabs a, .csf-v .home_heading h3, .csf-v .toponsale_heading > h3 {
	border-bottom-color: var(--v-gold) !important;
}
.csf-v .csf-circle img {
	border: 3px solid var(--v-card);
	box-shadow: 0 1px 4px rgba(59, 47, 42, 0.25);
}
.csf-v .product-thumb .image, .csf-v .csf-card-img, .csf-v .thumbnails .thumbnail {
	background: var(--v-card);
}
.csf-v .price, .csf-v .price_stock h2.pull-left {
	color: var(--v-price);
}
.csf-v .price-new {
	color: var(--v-sale);
}
.csf-v .price-old, .csf-v .csf-card .price-old, .csf-v .product-thumb .price-old, .csf-v .home_button .price .price-old {
	color: #85776c;                   /* struck-out old price, still readable */
}
.csf-v .price_stock p.pull-right {
	color: var(--v-stock);
}

/* ---------- product page ---------- */
.csf-v .product_heading {
	font-size: 28px;
}
.csf-v .product_wish .btn {
	background: var(--v-card);
	border-color: var(--v-line);
	color: var(--v-ink);
}
.csf-v .product_wish .btn:hover {
	color: var(--v-accent);
	border-color: var(--v-accent);
}
.csf-v .csf-nav {
	background: var(--v-card);
	color: var(--v-ink);
}
.csf-v .csf-nav:hover, .csf-v .csf-nav:focus {
	background: var(--v-accent);
	color: #fff;
}
.csf-v .csf-tabs {
	border-bottom: 2px solid var(--v-line);
}
.csf-v .csf-tabs > li > a {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--v-muted);
}
.csf-v .csf-tabs > li.active > a, .csf-v .csf-tabs > li.active > a:hover, .csf-v .csf-tabs > li.active > a:focus {
	color: var(--v-ink);
	border-bottom-color: var(--v-gold);
}
.csf-v .csf-pickup-note {
	border-left-color: var(--v-accent);
	background: var(--v-panel);
}

/* ---------- checkout steps, account boxes, wells ---------- */
.csf-v .panel, .csf-v .panel-default > .panel-heading, .csf-v .well, .csf-v .list-group-item {
	background-color: var(--v-card);
	border-color: var(--v-line);
}
.csf-v .panel-default > .panel-heading + .panel-collapse > .panel-body {
	border-top-color: var(--v-line);
}

/* ---------- pagination (Bootstrap blue on hover) ---------- */
.csf-v .pagination > li > a, .csf-v .pagination > li > span {
	color: var(--v-ink);
	background: var(--v-card);
	border-color: var(--v-line);
}
.csf-v .pagination > li > a:hover, .csf-v .pagination > li > a:focus {
	color: #fff;
	background: var(--v-accent);
	border-color: var(--v-accent);
}
.csf-v .pagination > .active > span, .csf-v .pagination > .active > span:hover {
	color: #fff;
	background: var(--v-ink);
	border-color: var(--v-ink);
}

/* ---------- Fabric Finder add-on (theme-independent; only its colour variables are set here) ---------- */
.csf-v .csf-ff {
	--csf-ff-accent: var(--v-accent);
	--csf-ff-line: var(--v-line);
	--csf-ff-bg: var(--v-panel);
	--csf-ff-chip: var(--v-card);
	--csf-ff-text: var(--v-ink);
}
.csf-v .csf-ff-title {
	font-family: 'Playfair Display', Georgia, serif;
}
/* while a finder choice is on, go straight to the results: hide the category banner, sub-category tiles and the
   New Arrivals row on that page */
#content:has(.csf-ff-item.on) .csf-cat-hero,
#content:has(.csf-ff-item.on) > .csf-panel,
#content:has(.csf-ff-item.on) > .csf-section {
	display: none;
}

/* ---------- checkout: no promo bar (Phone Orders / Partial Yards / Huge Sale) – nothing to lead people away ---------- */
body:has(#collapse-checkout-confirm) .csf-promo {
	display: none;
}

/* ---------- footer ---------- */
.csf-v footer {
	background: var(--v-panel);
	border-top: 1px solid var(--v-gold);
}

@media (max-width: 767px) {
	.csf-v #menu .nav > li > a[href$="/sale-items"], .csf-v #menu .nav > li > a[href*="path=127"] {
		background-position: left 14px center;
	}
	.csf-v #logo img {
		height: 48px;
	}
	.csf-v .csf-promo-item + .csf-promo-item {
		border-left: none;
		border-top: 1px solid var(--v-line);
	}
}