@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
	2.1 Brand tokens
	2.2 Buttons
3. Header
	3.1 Header - Logo
	3.2 Header - Main Navigation
	3.3 Header - Search
		3.3.1 Search autocomplete
	3.4 Header - Shopping
	3.5 Header - Burger
4. Home
	4.1 Home Slider
5. Menu
6. Promo
7. New Arrivals
	7.1 Product Cards
8. Extra
	8.1 Brand Statement
9. Gallery
10. Testimonials
	10.1 Service promises
11. Newsletter
12. Footer
13. Why Choose Us
14. About Page (about.html)
15. Shop by Style
16. Product Sliders (built by jg-custom.js)
17. Login
18. Product Detail (product-card-detail.html)
19. Wishlist / table pages
	19.1 Cart card quantity stepper
20. Checkout
21. Thank you / order confirmation
22. Festive Banner
23. Notify Me modal
24. Past orders
25. Policy and story pages

Note: this file loads on every store page (after each page's own CSS),
so homepage-only rules use homepage-only classes and product-card rules
are scoped to .products_container.

******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
@font-face
{
	font-family: 'Lucida';
	src: url('../fonts/lucida_bright_regular.ttf')  format('truetype');
	font-display: swap;
}
@font-face
{
	font-family: 'Lucida';
	src: url('../fonts/lucida_bright_demi.ttf')  format('truetype');
	font-weight: 700;
	font-display: swap;
}
@font-face
{
	font-family: 'Beyond';
	src: url('../fonts/beyond_the_mountains.otf')  format('opentype'),
		 url('../fonts/beyond_the_mountains.ttf')  format('truetype');
	font-display: swap;
}

/*********************************
2. Body and some general stuff
*********************************/

/*********************************
2.1 Brand tokens
*********************************/

:root
{
	/* The theme's existing colours */
	--brand-bg: #fdf7e7;			/* page + header cream (also the logo's background) */
	--brand-bg-alt: #f6eedb;		/* deeper cream for alternating sections */
	--brand-surface: #ffffff;
	--brand-primary: #937c6f;		/* taupe accent */
	--brand-primary-dark: #7a6559;	/* taupe for small text and buttons (AA contrast) */
	--brand-primary-light: #c9b8ab;	/* taupe on dark backgrounds */
	--brand-text: #2f2f2f;
	--brand-heading: #232323;
	--brand-muted: #6b625c;			/* secondary text (the old #929191 failed contrast on cream) */
	--brand-light: #e0e3e4;
	--brand-border: rgba(47, 47, 47, 0.12);
	--brand-teal: #12666a;			/* logo teal - focus rings only */

	--font-display: 'Lucida', Georgia, serif;
	--font-body: 'Open Sans', sans-serif;

	--header-height: 84px;
	--section-space: 96px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--shadow-soft: 0 12px 32px rgba(47, 47, 47, 0.08);
}

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	background: var(--brand-bg);
	color: var(--brand-text);
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.8;
	font-weight: 400;
	color: var(--brand-muted);
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px var(--brand-primary);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: var(--brand-primary-dark);
}
p a:hover
{
	color: #FFFFFF;
	background: var(--brand-primary-dark);
}
p a:hover::after
{
	opacity: 0.2;
}
a:focus-visible,
button:focus-visible,
input:focus-visible
{
	outline: 2px solid var(--brand-teal);
	outline-offset: 3px;
}
::selection
{
	background: rgba(147, 124, 111, 0.28);
	color: var(--brand-heading);
}
p::selection
{

}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection
{

}
.form-control
{
	color: var(--brand-text);
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.nopadding
{
	padding: 0px !important;
}
.section_title_container
{

}
.section_title_container::after
{
	content: '';
	display: block;
	width: 44px;
	height: 1px;
	margin: 24px auto 0;
	background: var(--brand-primary);
}
.section_subtitle
{
	font-size: 12px;
	font-weight: 600;
	color: var(--brand-primary-dark);
	text-transform: uppercase;
	letter-spacing: 0.28em;
}
.section_title
{
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-heading);
	margin-top: 12px;
	margin-bottom: 0;
}

/*********************************
2.2 Buttons
*********************************/

.button
{
	width: max-content;
	min-width: 160px;
	max-width: 100%;
	height: 50px;
	background: var(--brand-primary-dark);
	text-align: center;
	transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.button a
{
	display: block;
	padding: 0 34px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #FFFFFF;
	letter-spacing: 0.2em;
	line-height: 50px;
	white-space: nowrap;
	transition: color 250ms var(--ease);
}
.button:hover
{
	background: var(--brand-heading);
}
.button:hover a
{
	color: #FFFFFF;
}
.button_light
{
	background: #FFFFFF;
}
.button_light a
{
	color: var(--brand-heading);
}
.button_light:hover
{
	background: var(--brand-primary);
}
.button_light:hover a
{
	color: #FFFFFF;
}
.button_outline
{
	background: transparent;
	border: 1px solid var(--brand-heading);
}
.button_outline a
{
	color: var(--brand-heading);
	line-height: 48px;
}
.button_outline:hover
{
	background: var(--brand-heading);
}
.button_outline:hover a
{
	color: #FFFFFF;
}

/*********************************
3. Header
*********************************/

.header
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	z-index: 100;
	padding-left: 40px;
	padding-right: 40px;
	background: var(--brand-bg);
	border-bottom: 1px solid var(--brand-border);
	transition: height 300ms var(--ease), box-shadow 300ms var(--ease);
}
.header.scrolled
{
	height: 68px;
	box-shadow: 0 8px 28px rgba(47, 47, 47, 0.08);
}
.header_inner
{
	width: 100%;
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
}

/*********************************
3.1 Header - Logo
*********************************/

.logo a
{
	display: block;
	font-family: var(--font-display);
	font-size: 30px;
	line-height: 1;
	color: var(--brand-heading);
}
/* The logo file has a solid cream background; "darken" melts it into the cream behind it */
.logo img,
.footer_logo img
{
	mix-blend-mode: darken;
}
.logo img
{
	display: block;
	width: auto;
	height: 64px;
	transition: height 300ms var(--ease);
}
.header.scrolled .logo img
{
	height: 52px;
}

/*********************************
3.2 Header - Main Navigation
*********************************/

/* Each page's own stylesheet (categories.css, product.css...) repeats the template header
   rules and loads first, so the old offsets are reset here explicitly. */
.main_nav
{
	padding-left: 56px;
	transform: none;
}
.main_nav ul li
{
	display: inline-block;
	position: relative;
	margin-right: 34px;
}
.main_nav ul li:last-child
{
	margin-right: 0;
}
.main_nav ul li a
{
	display: inline-block;
	position: relative;
	padding: 8px 0;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--brand-text);
	font-weight: 600;
	letter-spacing: 0.16em;
	white-space: nowrap;
	transition: color 200ms ease;
}
.main_nav ul li a::after
{
	content: '';
	position: absolute;
	left: 0;
	right: 0.16em;
	bottom: 2px;
	height: 1px;
	background: var(--brand-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms var(--ease);
}
.main_nav ul li a:hover
{
	color: var(--brand-primary-dark);
}
.main_nav ul li a:hover::after,
.main_nav ul li a:focus-visible::after
{
	transform: scaleX(1);
}

/* Shop dropdown - Shopivana fills .menu-categories with the store's categories */
.main_nav .menu-categories
{
	position: absolute;
	top: 100%;
	left: -24px;
	min-width: 220px;
	margin-top: 12px;
	padding: 10px 0;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	box-shadow: var(--shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 250ms;
	z-index: 10;
}
.main_nav .menu-categories::before
{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -13px;
	height: 13px;
}
.main_nav .menu-categories:empty
{
	display: none;
}
.main_nav ul li:hover > .menu-categories,
.main_nav ul li:focus-within > .menu-categories
{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Shopivana builds this list at runtime: .menu-categories gets a <ul class="dropdown
   category-links">, every category is an <li>, and a category that has children carries its
   own <ul class="submenu"> plus a raquo <span class="caret"> inside the link. Nothing had
   ever styled .submenu, so those children were simply listed underneath their parent - which
   is why the panel read as one long flat column with no hierarchy in it. */

.main_nav .menu-categories .category-links
{
	margin: 0;
	padding: 0;
	list-style: none;
}
.main_nav .menu-categories li
{
	display: block;
	position: relative;	/* the anchor its own flyout is positioned against */
	margin-right: 0;
}
.main_nav .menu-categories li a
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 24px;
	letter-spacing: 0.12em;
	white-space: nowrap;
}
.main_nav .menu-categories li a::after
{
	display: none;
}
/* the row stays lit while the pointer is away in its child panel, because that panel is
   inside this li - so li:hover is still true */
.main_nav .menu-categories li:hover > a,
.main_nav .menu-categories li:focus-within > a
{
	background: var(--brand-bg);
}
.main_nav .menu-categories .caret
{
	margin-left: 18px;
	padding-left: 0 !important;	/* the markup puts Bootstrap's .pl-2 on this span */
	font-size: 13px;
	line-height: 1;
	color: var(--brand-primary);
	-webkit-transition: -webkit-transform 200ms var(--ease);
	transition: transform 200ms var(--ease);
}
.main_nav .menu-categories li:hover > a .caret
{
	-webkit-transform: translateX(3px);
	transform: translateX(3px);
}

/* The child panel, opening against the right edge of the parent list. left: 100% lands on
   the parent panel's inner edge, so the two touch and the pointer can cross without the
   hover dropping. top: -11px is the parent panel's own padding plus its border, which lines
   the first child row up with the row being hovered. */

.main_nav .menu-categories .submenu
{
	position: absolute;
	top: -11px;
	left: 100%;
	min-width: 210px;
	max-height: calc(100vh - 160px);
	margin: 0;
	padding: 10px 0;
	overflow-y: auto;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	box-shadow: var(--shadow-soft);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateX(-6px);
	transform: translateX(-6px);
	-webkit-transition: opacity 180ms var(--ease), -webkit-transform 180ms var(--ease);
	transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
	z-index: 2;
}
.main_nav .menu-categories li:hover > .submenu,
.main_nav .menu-categories li:focus-within > .submenu
{
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

/*********************************
3.3 Header - Search
*********************************/

.search
{
	display: inline-block;
	width: 220px;
	transform: none;
}
.search_input
{
	width: 100%;
	height: 40px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: 0;
	outline: none;
	padding-left: 16px;
	padding-right: 44px;
	font-size: 13px;
	color: var(--brand-text);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 200ms ease;
}
.search_input::placeholder
{
	color: var(--brand-muted);
	opacity: 1;
}
.search_input:focus
{
	border-color: var(--brand-primary);
}
.search_button
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 4px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--brand-text);
	cursor: pointer;
}
.search_button:focus:not(:focus-visible)
{
	outline: none;
}
.search_button img,
.search_button svg
{
	width: 16px;
	height: 16px;
	max-width: 100%;
	opacity: 0.75;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.search_button:hover img,
.search_button:hover svg
{
	opacity: 1;
}

/*********************************
3.3.1 Search autocomplete
*********************************/

/* Shopivana builds the suggestion list itself and nothing styled it, so it dropped into
   the page as a column of unstyled text over the hero. It is a bare
   <div class="autocomplete-items"> of bare <div>s, each holding the product name with the
   matched letters in <strong> and a hidden input carrying the permalink; the keyboard
   arrows move a .autocomplete-active class down the list. It is appended to the search
   input's parent, and it reuses the same id for every search box on the page, so
   everything here is matched by class. */

.search form
{
	position: relative;
}
.autocomplete-items
{
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 20;
	max-height: 320px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	box-shadow: var(--shadow-soft);
	text-align: left;
}
.autocomplete-items > div
{
	padding: 10px 14px;
	border-bottom: 1px solid var(--brand-border);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--brand-text);
	cursor: pointer;
	-webkit-transition: background 150ms ease, color 150ms ease;
	transition: background 150ms ease, color 150ms ease;
}
.autocomplete-items > div:last-child
{
	border-bottom: none;
}
.autocomplete-items > div:hover,
.autocomplete-items > div.autocomplete-active
{
	background: var(--brand-bg-alt);
	color: var(--brand-heading);
}
.autocomplete-items strong
{
	font-weight: 700;
	color: var(--brand-primary-dark);
}
/* The header box is only 220px, which wraps almost every product name onto two lines.
   The list hangs off its right edge instead, where there is room. */
.header_search .autocomplete-items
{
	left: auto;
	width: 320px;
}
.autocomplete-items input
{
	display: none;
}

/*********************************
3.4 Header - Shopping
*********************************/

.header_content
{
	display: flex;
	align-items: center;
}
.shopping
{
	display: flex;
	align-items: center;
	margin-left: 22px;
	padding-right: 0;
	transform: none;
}
.shopping a
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: 4px;
	color: var(--brand-heading);
	transition: color 200ms ease;
}
.shopping a:last-child
{
	margin-right: 0;
}
.shopping a:hover
{
	color: var(--brand-primary-dark);
}
.cart,
.star,
.avatar
{
	display: flex;
	align-items: center;
	justify-content: center;
}
.cart img,
.star img,
.avatar img,
.shopping svg
{
	width: 22px;
	height: 22px;
	transition: opacity 200ms ease;
}
.shopping a:hover img
{
	opacity: 0.6;
}
.cart_num_container,
.star_num_container
{
	position: absolute;
	top: -7px;
	left: auto;
	right: -9px;
	width: 18px;
	height: 18px;
	background: var(--brand-primary-dark);
	border: 2px solid var(--brand-bg);
	border-radius: 50%;
}
.cart_num_inner,
.star_num_inner
{
	width: 100%;
	height: 100%;
}
.cart_num,
.star_num
{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
}

/*********************************
3.5 Header - Burger
*********************************/

.burger_container
{
	position: relative;
	top: auto;
	right: auto;
	transform: none;
	width: 24px;
	height: 16px;
	margin-left: 24px;
	cursor: pointer;
}
.burger_container div
{
	width: 100%;
	height: 2px;
	background: var(--brand-heading);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	pointer-events: none;
}
.burger_container:hover div
{
	background: var(--brand-primary);
}

/*********************************
4. Home
*********************************/

/* Other pages (shop, product, contact) reuse .home as their page banner and size it
   in their own CSS, so the homepage hero height lives on .home_slider_container. */
.home
{
	width: 100%;
}

/*********************************
4.1 Home Slider
*********************************/

.home_slider_container
{
	width: 100%;
	height: 86vh;
	min-height: 540px;
	max-height: 860px;
	margin-top: var(--header-height);
	/* Warm placeholder for the moment before the slide photos paint: with the overlay
	   above it this reads as a loading image rather than an empty black block. */
	background: var(--brand-bg-alt);
	overflow: hidden;
}
/* Fetched early so the first slide's photo is ready when the hero paints */
.home_slider_preload
{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.home_slider_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	/* The photos are about 2.5:1 and the hero is nearer 2:1, so cover always trims the
	   sides. --slide-focus on the slide decides which part survives the trim. */
	background-position: var(--slide-focus, 50%) center;
}
/* Shade only the side the copy is on, fading out well before the jewellery. --slide-shade
   sets how dark it starts: the two bright, low-contrast photos need more than the warm one. */
.home_slider_background::after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		linear-gradient(90deg,
			rgba(35, 28, 24, var(--slide-shade, 0.62)) 0%,
			rgba(35, 28, 24, calc(var(--slide-shade, 0.62) * 0.42)) 40%,
			rgba(35, 28, 24, 0) 68%),
		linear-gradient(0deg, rgba(35, 28, 24, 0.34) 0%, rgba(35, 28, 24, 0) 42%);
}
.home_slider_content
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	/* The photo is full-bleed but the copy used to follow the centred 1170px container, so on
	   a wide screen it drifted inwards and met the jewellery. It now keeps a steady margin
	   from the left edge instead, which is what the composition of all three photos wants. */
	padding: 0 clamp(24px, 6vw, 135px) 120px;
	z-index: 10;
	pointer-events: none;      /* the shade and copy must not block the slider's own drag */
}
.home_slider_content_inner
{
	/* narrow enough to stay clear of the jewellery; a slide whose photo leaves less room
	   can set --slide-copy-width for itself */
	max-width: var(--slide-copy-width, 520px);
	pointer-events: auto;
}

/* Where the copy sits vertically. Default is the bottom; these two are per slide. */

.home_slider_copy_middle .home_slider_content
{
	justify-content: center;
	padding-bottom: 60px;
}
.home_slider_copy_top .home_slider_content
{
	justify-content: flex-start;
	padding-top: 92px;
	padding-bottom: 60px;
}
.home_slider_title
{
	font-family: var(--font-display);
	/* carries its own soft shadow, which keeps the white readable on the pale photos
	   without having to darken the picture any further */
	text-shadow: 0 2px 20px rgba(28, 20, 16, 0.5);
	font-size: 72px;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	margin-top: 18px;
}
.home_slider_subtitle
{
	text-shadow: 0 1px 12px rgba(28, 20, 16, 0.55);
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	white-space: nowrap;
}
.home_slider_subtitle::before
{
	content: '';
	width: 36px;
	height: 1px;
	margin-right: 14px;
	background: currentColor;
}
.home_slider_button
{
	margin-top: 34px;
}
/* Slides whose photo has the jewellery on the left carry their copy on the right. None of
   the three photos need it today - all three have the jewellery on the right - but it is
   here for whatever replaces them. */
.home_slider_item_right .home_slider_background::after
{
	background:
		linear-gradient(270deg,
			rgba(35, 28, 24, var(--slide-shade, 0.62)) 0%,
			rgba(35, 28, 24, calc(var(--slide-shade, 0.62) * 0.42)) 40%,
			rgba(35, 28, 24, 0) 68%),
		linear-gradient(0deg, rgba(35, 28, 24, 0.34) 0%, rgba(35, 28, 24, 0) 42%);
}
.home_slider_item_right .home_slider_content
{
	align-items: flex-end;
	padding-right: 110px;
}
.home_slider_item_right .home_slider_content_inner
{
	margin-left: auto;
	text-align: right;
}
.home_slider_item_right .home_slider_subtitle::before
{
	order: 1;
	margin-right: 0;
	margin-left: 14px;
}
.home_slider_item_right .home_slider_button
{
	margin-left: auto;
}
/* Slide copy rises in when its slide becomes active (only once Owl is running) */
.home_slider.owl-loaded .home_slider_content_inner
{
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms var(--ease) 350ms, transform 700ms var(--ease) 350ms;
}
.home_slider.owl-loaded .owl-item.active .home_slider_content_inner
{
	opacity: 1;
	transform: translateY(0);
}
.home_slider_next
{
	position: absolute;
	top: 50%;
	right: 40px;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	background: rgba(35, 28, 24, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 10;
	border-radius: 50%;
	cursor: pointer;
	transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.home_slider_next:hover
{
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}
.home_slider_dots_container
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
/* dots sit the same distance in from their edge as the copy does from its own */
.home_slider_dots_container .container
{
	max-width: none;
	padding: 0 clamp(24px, 6vw, 135px);
}
.home_slider_dots
{
	display: inline-block;
	position: absolute;
	top: -60px;
	right: 15px;
}
.home_slider_dots ul
{
	display: inline-block;
}
.home_slider_dots ul li
{
	display: inline-block;
	position: relative;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.65);
	margin-right: 10px;
	cursor: pointer;
	transition: color 250ms ease;
}
.home_slider_dots ul li.active,
.home_slider_dots ul li:hover
{
	color: #FFFFFF;
}
.home_slider_dots ul li:last-child
{
	margin-right: 0;
}
.home_slider_custom_dot div
{
	display: inline-block;
	width: 0px;
	height: 1px;
	background: #FFFFFF;
	vertical-align: middle;
	transition: width 400ms var(--ease);
	margin-left: 8px;
}
.home_slider_custom_dot.active div
{
	width: 48px;
}
.home_slider .owl-dots
{
	display: none !important;
}

/*********************************
5. Menu
*********************************/

.menu
{
	position: fixed;
	top: 0;
	right: -440px;
	width: 400px;
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	background: var(--brand-bg);
	z-index: 101;
	padding: 96px 40px 48px;
	overflow-y: auto;
}
.menu.active
{
	right: 0;
	box-shadow: -24px 0 60px rgba(35, 28, 24, 0.18);
}
.menu_close_container
{
	position: absolute;
	top: 34px;
	right: 40px;
	width: 20px;
	height: 20px;
	transform-origin: center center;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	cursor: pointer;
}
.menu_close
{
	width: 100%;
	height: 100%;
	transform-style: preserve-3D;
}
.menu_close div
{
	width: 100%;
	height: 2px;
	background: var(--brand-heading);
	top: 9px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close div:last-of-type
{
	-webkit-transform: rotate(90deg) translateX(-2px);
	-moz-transform: rotate(90deg) translateX(-2px);
	-ms-transform: rotate(90deg) translateX(-2px);
	-o-transform: rotate(90deg) translateX(-2px);
	transform: rotate(90deg) translateX(-2px);
	transform-origin: center;
}
.menu_close:hover div
{
	background: var(--brand-primary);
}
.menu .logo
{
	position: absolute;
	top: 20px;
	left: 40px;
	margin: 0;
}
.menu .logo img
{
	height: 56px;
}
.menu_nav
{
	width: 100%;
}
.menu_nav ul li
{
	margin-bottom: 0;
	border-bottom: 1px solid var(--brand-border);
}
.menu_nav ul li a
{
	display: block;
	padding: 14px 0;
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: capitalize;
	color: var(--brand-heading);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_nav ul li a:hover
{
	color: var(--brand-primary-dark);
}
.menu .search
{
	width: 100%;
	margin-bottom: 28px;
}
.menu .search_input
{
	height: 46px;
}
/* Backdrop behind the open menu (element added in header.html). Clicking it closes
   the menu through custom.js, because it has no .menu_mm class. */
.menu_backdrop
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: rgba(35, 28, 24, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease, visibility 400ms ease;
}
.menu.active + .menu_backdrop
{
	opacity: 1;
	visibility: visible;
}

/*********************************
6. Promo
*********************************/

.promo
{
	padding-top: var(--section-space);
}
.promo_container
{
	margin-top: 48px;
}
.promo_item
{
	width: 100%;
}
.promo_image
{
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--brand-bg-alt);
}
.promo_image a
{
	display: block;
	height: 100%;
}
.promo_image img
{
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease);
}
.promo_item:hover .promo_image img
{
	transform: scale(1.05);
}
.promo_link
{
	position: absolute;
	left: 24px;
	bottom: 24px;
	max-width: calc(100% - 48px);
	background: var(--brand-bg);
	text-align: left;
	transition: background 300ms var(--ease);
}
.promo_link a
{
	display: flex;
	align-items: center;
	padding: 14px 22px;
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.3;
	color: var(--brand-heading);
	transition: color 300ms var(--ease);
}
.promo_link a::after
{
	content: '\2192';
	margin-left: 14px;
	font-family: var(--font-body);
	font-size: 16px;
	transition: transform 300ms var(--ease);
}
.promo_item:hover .promo_link
{
	background: var(--brand-heading);
}
.promo_item:hover .promo_link a
{
	color: var(--brand-bg);
}
.promo_item:hover .promo_link a::after
{
	transform: translateX(4px);
}
.promo_content
{
	position: absolute;
	top: 43.6%;
	z-index: 1;
}
.promo_content_1
{
	right: 0;
	text-align: right;
	padding-right: 14px;
}
.promo_content_2
{
	left: 0;
	width: 100%;
	text-align: center;
	background: rgba(35, 35, 35, 0.63);
	padding-bottom: 9px;
	padding-top: 2px;
}
.promo_content_3
{
	top: 30%;
	left: 15px;
	background: #232323;
	padding-left: 10px;
	text-align: right;
	padding-right: 22px;
	padding-top: 39px;
	padding-bottom: 41px;
}
.promo_title
{
	font-family: 'Lucida', serif;
	font-size: 30px;
	color: #FFFFFF;
}
.promo_subtitle
{
	font-size: 14px;
	color: #FFFFFF;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: -3px;
}
.promo_content_3 .promo_subtitle
{
	text-transform: none;
	font-weight: 400;
	font-style: italic;
}

/*********************************
7. New Arrivals
*********************************/

.arrivals
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background: var(--brand-bg-alt);
	margin-top: var(--section-space);
}
.arrivals_button
{
	display: flex;
	justify-content: center;
	margin-top: 56px;
}
.products_container
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 28px;
	margin-top: 48px;
	margin-left: 0;
	margin-right: 0;
}
/* Shop page: its .products wrapper (categories.css) already pads the top */
.products .products_container
{
	margin-top: 0;
}
/* Grid cell: .product_col (homepage card) or .product itself (shop page card).
   Resets the Bootstrap column sizing the card templates carry. */
.products_container > *
{
	display: flex;
	flex-direction: column;
	flex: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
.product
{

}
.product_image
{
	width: 100%;
}
.product_image img {
    max-width: 100%;
    object-fit: cover;
}
.rating
{
	margin-top: 24px;
}
.rating i
{
	font-size: 10px;
	margin-right: 1px;
	color: #e0e3e4;
}
.rating i:last-child
{
	margin-right: 0px;
}
.rating_1 i:first-child{color: #f5c06f;}
.rating_2 i:first-child{color: #f5c06f;}
.rating_2 i:nth-child(2){color: #f5c06f;}
.rating_3 i:first-child{color: #f5c06f;}
.rating_3 i:nth-child(2){color: #f5c06f;}
.rating_3 i:nth-child(3){color: #f5c06f;}
.rating_4 i:first-child{color: #f5c06f;}
.rating_4 i:nth-child(2){color: #f5c06f;}
.rating_4 i:nth-child(3){color: #f5c06f;}
.rating_4 i:nth-child(4){color: #f5c06f;}
.rating_5 i:first-child{color: #f5c06f;}
.rating_5 i:nth-child(2){color: #f5c06f;}
.rating_5 i:nth-child(3){color: #f5c06f;}
.rating_5 i:nth-child(4){color: #f5c06f;}
.rating_5 i:nth-child(5){color: #f5c06f;}
.product_content
{
	margin-top: 7px;
}
.product_info
{
	float: left;
}
.product_name a
{
	font-size: 16px;
	font-weight: 600;
	color: #232323;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.product_name a:hover
{
	color: #937c6f;
}
.product_price
{
	font-size: 24px;
	font-weight: 600;
	color: #8a8a8a;
	margin-top: 0px;
}
.product_options
{
	float: right;
	transform: translateY(11px);
}
.product_option
{
	width: 37px;
	height: 37px;
	cursor: pointer;
}
.product_buy
{
	display: inline-block;
	background: #937c6f;
	vertical-align: middle;
	margin-right: 4px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.product_buy img
{
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 23px;
	height: 23px;
}
.product_buy:hover
{
	background: #2f2f2f;
}
.product_fav
{
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	font-weight: 600;
	color: #232323;
	background: #e0e3e4;
	line-height: 37px;
	text-align: center;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.product_fav:hover
{
	color: #FFFFFF;
	background: #232323;
}

/* Product detail page: product.css sets line-height 0.75, which overlaps two-line titles */
.product_content .product_name
{
	line-height: 1.25;
}

/*********************************
7.1 Product Cards
*********************************/

/* The card markup comes from Shopivana's card templates, so everything here is
   CSS-only and scoped to product grids (the product detail page reuses these
   class names outside .products_container and keeps its own look). */

.products_container .product
{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	position: relative;
}
.products_container .product_image
{
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--brand-bg);
}
.products_container .product_image img
{
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	min-height: 0;
	object-fit: cover;
	transition: transform 800ms var(--ease);
}
.products_container .product_image img[src=""]
{
	visibility: hidden;
}
.products_container .product:hover .product_image img
{
	transform: scale(1.05);
}
.products_container .product_content
{
	position: static;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin-top: 16px;
}
.products_container .product_content::before,
.products_container .product_content::after
{
	display: none;
}
.products_container .product_info,
.products_container .product_name
{
	float: none;
	position: static;
}
.products_container .product_name a
{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--brand-heading);
}
/* Makes the whole card (image included) open the product page */
.products_container .product_name a::after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.products_container .product:hover .product_name a
{
	color: var(--brand-primary-dark);
}
.products_container .product_price
{
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--brand-primary-dark);
}
.products_container .product_price del,
.products_container .product_price s,
.products_container .product_price strike,
.products_container .product_price_old
{
	margin-left: 6px;
	font-size: 13px;
	font-weight: 400;
	color: var(--brand-muted);
	text-decoration: line-through;
}
.products_container .product_price_old:empty
{
	display: none;
}
.products_container .product_category
{
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-primary-dark);
}
.products_container .product_category:empty
{
	display: none;
}
.products_container .product_options
{
	float: none;
	position: static;
	transform: none;
	display: block;
	margin-top: auto;
	padding-top: 16px;
}
.products_container .product_notify + .product_cart
{
	margin-top: 8px;
}
.products_container .product_option
{
	position: relative;
	z-index: 2;
}
.products_container .product_buy
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var(--brand-heading);
	border-radius: 0;
	color: var(--brand-heading);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 250ms var(--ease), color 250ms var(--ease);
}

.products_container .product_buy img
{
	position: static;
	transform: none;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	filter: brightness(0);
	transition: filter 250ms var(--ease);
}
.products_container .product_buy:hover
{
	background: var(--brand-heading);
	color: #FFFFFF;
}
.products_container .product_buy:hover img
{
	filter: none;
}
.products_container .product_fav
{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--brand-heading);
	font-size: 15px;
	line-height: 38px;
	box-shadow: 0 2px 10px rgba(35, 28, 24, 0.12);
	transition: background 250ms var(--ease), color 250ms var(--ease);
}
/* Outline heart at rest, filled on hover (Font Awesome 4 glyphs) */
.products_container .product_fav .fa-heart::before
{
	content: '\f08a';
}
.products_container .product_fav:hover
{
	background: var(--brand-heading);
	color: #FFFFFF;
}
.products_container .product_fav:hover .fa-heart::before
{
	content: '\f004';
}
/* Shopivana adds .active to the icon of products already in the wishlist */
.products_container .product_fav.active
{
	color: var(--brand-primary-dark);
}
.products_container .product_fav.active .fa-heart::before
{
	content: '\f004';
}
/* Accessible name for the icon-only wishlist button */
.products_container .product_fav::after
{
	content: 'Add to wishlist';
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Quantity stepper: Shopivana swaps it in for the add-to-cart button once the product
   is in the cart (it shows this wrapper with jQuery, hence the flex row inside).
   Not scoped, because the product detail card reuses it. */
.product_qty_inner
{
	display: flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--brand-heading);
}
.product_qty_button
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 100%;
	flex: 0 0 auto;
	color: var(--brand-heading);
	font-size: 11px;
	cursor: pointer;
	transition: background 200ms var(--ease), color 200ms var(--ease);
}
.product_qty_button:hover
{
	background: var(--brand-heading);
	color: #FFFFFF;
}
.product_qty_input
{
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0 4px;
	border: none;
	outline: none;
	background: transparent;
	text-align: center;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-heading);
}

/* Out of stock (only rendered when "show out of stock" is on in Shopivana) */
.product_notify_button
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var(--brand-border);
	color: var(--brand-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease);
}
.product_notify_button:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}

/*********************************
8. Extra
*********************************/

.extra
{
	width: 100%;
	padding-left: 62px;
	padding-right: 62px;
}
.extra_promo
{
	width: calc((100% - 30px) / 2);
	height: 616px;
	float: left;
}
.extra_promo_image
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.extra_promo_1
{
	margin-right: 30px;
	padding-top: 43px;
	padding-left: 45px;
	padding-bottom: 46px;
	padding-right: 45px;
}
.extra_1_content
{
	max-width: 425px;
	height: 100%;
	background: rgba(35, 35, 35, 0.95);
	border: solid 2px #937c6f;
	padding-left: 40px;
	padding-right: 40px;
}
.extra_1_price
{
	font-family: 'Beyond', sans-serif;
	font-size: 72px;
	color: #FFFFFF;
	line-height: 0.75;
}
.extra_1_price span
{
	font-size: 18px;
}
.extra_1_title
{
	font-family: 'Lucida', serif;
	font-size: 30px;
	color: #937c6f;
	margin-top: 39px;
}
.extra_1_text
{
	font-size: 12px;
	color: #aeaeae;
	margin-top: 26px;
	line-height: 2;
}
.extra_1_button
{
	margin-top: 39px;
}
.extra_promo_2
{
	border: solid 2px #937c6f;
	padding-top: 43px;
	padding-bottom: 46px;
}
.extra_2_content
{
	max-width: 408px;
	height: 100%;
	background: transparent;
	padding-top: 27px;
	padding-left: 37px;
	padding-right: 37px;
}
.extra_2_title
{
	transform: translateX(20px);
}
.extra_2_center
{
	font-family: 'Lucida', serif;
	font-size: 200px;
	color: #937c6f;
	line-height: 0.75;
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-ms-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	transform: rotate(-12deg);
}
.extra_2_top
{
	position: absolute;
	left: -50px;
	top: -32px;
	font-family: 'Beyond', sans-serif;
	font-size: 72px;
	line-height: 0.75;
	color: #232323;
}
.extra_2_bottom
{
	position: absolute;
	left: -43px;
	bottom: -28px;
	font-family: 'Beyond', sans-serif;
	font-size: 72px;
	line-height: 0.75;
	color: #232323;
}
.extra_2_text
{
	font-size: 12px;
	color: #aeaeae;
	margin-top: 83px;
	line-height: 2;
}
.extra_2_button
{
	margin-top: 36px;
}

/*********************************
8.1 Brand Statement
*********************************/

.statement
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background: var(--brand-text);
}
.statement_row
{
	align-items: center;
}
.statement_image
{
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--brand-heading);
}
.statement_image img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.statement_content
{
	padding-left: 56px;
}
.statement .section_subtitle
{
	color: var(--brand-primary-light);
}
.statement_title
{
	margin: 20px 0 0;
	font-family: var(--font-display);
	font-size: 46px;
	line-height: 1.2;
	color: var(--brand-bg);
}
.statement_title::before
{
	content: '\201C';
	display: block;
	height: 44px;
	font-size: 96px;
	line-height: 1;
	color: var(--brand-primary);
}
.statement_button
{
	margin-top: 40px;
}

/*********************************
9. Gallery
*********************************/

/* The template gallery was a full-bleed stock photo with #wish hashtags over it. It now
   shows real catalogue photos, and clicking one opens the theme's lightbox. The strip is
   built by custom.js (initGallery); the :not(.owl-loaded) rules keep it looking like a
   strip rather than six stacked photos if that file has not been uploaded yet. */

.gallery
{
	width: 100%;
	padding: var(--section-space) 44px;
	background: var(--brand-bg-alt);
}
.gallery_slider_container
{
	margin-top: 44px;
}
.gallery_item a
{
	display: block;
	position: relative;
	overflow: hidden;
	outline: none;
	background: var(--brand-bg);
}
.gallery_item img
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	-webkit-transition: -webkit-transform 600ms var(--ease);
	transition: transform 600ms var(--ease);
}
.gallery_item a:hover img,
.gallery_item a:focus-visible img
{
	-webkit-transform: scale(1.06);
	transform: scale(1.06);
}
.gallery_button
{
	margin: 44px auto 0;
}

/* Before custom.js has turned it into a carousel */
.gallery_slider:not(.owl-loaded)
{
	display: flex;
	overflow: hidden;
}
.gallery_slider:not(.owl-loaded) .gallery_item
{
	flex: 0 0 calc((100% - 110px) / 6);
	margin-right: 22px;
}

/*********************************
10. Testimonials
*********************************/

.testimonials
{
	width: 100%;
	padding: var(--section-space) 0;
}
.test_slider_container
{
	margin-top: 44px;
}
/* Each slide in the markup already carries .owl-item, and Owl wraps it in one of its own.
   The inner copy inherits Owl's float and shrink-wraps, pushing the slide off centre. */
.test_slider .owl-stage > .owl-item > .owl-item
{
	float: none;
	width: 100%;
}
.test_text
{
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--font-display);
	font-size: 22px;
	font-style: italic;
	line-height: 1.7;
	color: var(--brand-text);
}
.test_content
{
	margin-top: 26px;
}
.test_image
{
	width: 72px;
	height: 72px;
	margin: 0 auto 14px;
	border-radius: 50%;
	overflow: hidden;
}
.test_image img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.test_name
{
	margin-top: 0;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--brand-heading);
}
.test_title
{
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brand-primary-dark);
}

/* Draft state. The three slides ship as placeholders, and these rules make that obvious
   on screen so nobody reads them as customer reviews. Remove class="test_placeholder"
   and class="test_placeholder_name" from a slide once real words are in it. */

.test_placeholder
{
	display: inline-block;
	padding: 20px 26px;
	border: 1px dashed var(--brand-primary-light);
	font-family: var(--font-body);
	font-size: 15px;
	font-style: normal;
	line-height: 1.7;
	color: var(--brand-muted);
}
.test_placeholder::before
{
	display: block;
	margin-bottom: 8px;
	content: "Placeholder";
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brand-primary-dark);
}
.test_placeholder_name
{
	color: var(--brand-muted);
}

/* Before custom.js has turned it into a carousel */
.test_slider:not(.owl-loaded) > .owl-item:not(:first-child)
{
	display: none;
}

/*********************************
10.1 Service promises
*********************************/

/* Reuses the .options markup the theme ships on the cart and checkout pages, but those
   styles live in cart.css / checkout.css, which the homepage does not load. */

.options_bar
{
	padding: 52px 0;
	background: var(--brand-surface);
	border-top: 1px solid var(--brand-border);
	border-bottom: 1px solid var(--brand-border);
}
.options_item
{
	min-height: 48px;
}
.option_image
{
	flex: 0 0 auto;
	width: 42px;
	margin-right: 18px;
	line-height: 0;
}
.option_image img
{
	max-width: 100%;
	height: auto;
}
.option_content
{
	flex: 1 1 auto;
	min-width: 0;
}
.option_title
{
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--brand-heading);
}
.option_subtitle
{
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--brand-muted);
}

/*********************************
11. Newsletter
*********************************/

.newsletter
{
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
}
.newsletter_content
{
	width: 100%;
	padding-top: 104px;
	padding-bottom: 104px;
	overflow: hidden;
}
.newsletter_image
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.newsletter_image::after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(35, 28, 24, 0.58);
}
.newsletter .section_subtitle,
.newsletter .section_title
{
	color: #FFFFFF;
}
.newsletter .section_subtitle
{
	color: rgba(255, 255, 255, 0.85);
}
.newsletter .section_title_container::after
{
	background: var(--brand-primary-light);
}
.newsletter_container
{
	margin-top: 40px;
}
.newsletter_form_container
{
	max-width: 580px;
	margin: 0 auto;
}
.newsletter_form_container form
{
	display: flex;
}
.newsletter_input
{
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 54px;
	background: #FFFFFF;
	padding-left: 22px;
	padding-right: 16px;
	border: none;
	border-radius: 0;
	outline: none;
	font-size: 14px;
	color: var(--brand-text);
}
.newsletter_input:focus-visible
{
	outline: 2px solid var(--brand-primary-light);
	outline-offset: 2px;
}
.newsletter_input::-webkit-input-placeholder
{
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal;
	color: var(--brand-muted) !important;
}
.newsletter_input:-moz-placeholder
{
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal;
	color: var(--brand-muted) !important;
}
.newsletter_input::-moz-placeholder
{
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal;
	color: var(--brand-muted) !important;
}
.newsletter_input:-ms-input-placeholder
{
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal;
	color: var(--brand-muted) !important;
}
.newsletter_input::input-placeholder
{
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal;
	color: var(--brand-muted) !important;
}
.newsletter_button
{
	position: relative;
	top: auto;
	right: auto;
	flex: 0 0 auto;
	width: auto;
	height: 54px;
	margin: 0;
	padding: 0 34px;
	background: var(--brand-primary-dark);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: none;
	outline: none;
	cursor: pointer;
	transition: background 250ms var(--ease);
}
.newsletter_button:hover
{
	background: var(--brand-heading);
	color: #FFFFFF;
}
.newsletter_text
{
	font-size: 13px;
	font-style: italic;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	margin-top: 18px;
}

/*********************************
12. Footer
*********************************/

.footer
{
	padding-top: 80px;
	background: var(--brand-bg);
}
.footer_logo a
{
	display: inline-block;
	font-family: var(--font-display);
	font-size: 40px;
	line-height: 1;
	color: var(--brand-heading);
}
.footer_logo img
{
	display: block;
	width: 104px;
	height: auto;
}
.footer_about
{
	max-width: 560px;
	margin: 18px auto 0;
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.6;
	color: var(--brand-muted);
}
.footer_nav
{
	margin-top: 32px;
}
.footer_nav ul li
{
	display: inline-block;
	margin-right: 34px;
}
.footer_nav ul li:last-child
{
	margin-right: 0;
}
.footer_nav ul li a
{
	font-size: 12px;
	text-transform: uppercase;
	color: var(--brand-heading);
	font-weight: 600;
	letter-spacing: 0.16em;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_nav ul li a:hover
{
	color: var(--brand-primary-dark);
}
.footer_social
{
	margin-top: 32px;
}
.footer_social ul li
{
	display: inline-block;
	margin-right: 24px;
}
.footer_social ul li:last-child
{
	margin-right: 0;
}
.footer_social ul li a i
{
	font-size: 18px;
	color: var(--brand-primary-dark);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_social ul li a i:hover
{
	color: var(--brand-heading);
}
.footer_secure
{
	margin-top: 28px;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--brand-muted);
}
.footer_secure i
{
	margin-right: 6px;
	color: var(--brand-primary-dark);
}
.copyright
{
	margin-top: 44px;
	padding-top: 24px;
	padding-bottom: 24px;
	border-top: 1px solid var(--brand-border);
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--brand-muted);
}
.copyright a
{
	color: var(--brand-heading);
}
.copyright a:hover
{
	color: var(--brand-primary-dark);
}

/*********************************
13. Why Choose Us
*********************************/

/* A <style> block in homepage section #296308 also sets padding and icon sizes with
   single-class selectors; these selectors are one step more specific so they win. */

section.our-services-area
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}
.our-services-area .row
{
	align-items: center;
}
.our-services-area .image-area
{
	margin-right: 24px;
}
.our-services-area .image-area::before
{
	content: '';
	position: absolute;
	top: 24px;
	left: 24px;
	right: -24px;
	bottom: -24px;
	border: 1px solid var(--brand-primary);
}
section.our-services-area .image-area img
{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.our-services-area .section-heading h2
{
	margin: 0;
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-heading);
}
.our-services-area .section-heading p
{
	margin: 12px 0 20px;
	font-size: 16px;
	line-height: 1.85;
	color: var(--brand-muted);
}
.our-services-area .single-service-area
{
	padding-top: 18px;
	padding-bottom: 18px;
	border-top: 1px solid var(--brand-border);
}
.our-services-area .single-service-area:last-child
{
	border-bottom: 1px solid var(--brand-border);
}
.our-services-area .service-icon
{
	flex: 0 0 auto;
	margin-right: 20px;
	padding-bottom: 0;
}
.our-services-area .service-icon img
{
	display: block;
	width: 52px;
	height: 52px;
	object-fit: contain;
}
.our-services-area .service-content h5
{
	margin: 0;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--brand-heading);
}

/*********************************
14. About Page
*********************************/

/* Used by about.html. Self-contained (its own breakpoints are at the end of this
   section) and it reuses the shared .section_title / .section_subtitle / .button
   components, so it also works if the About page loads without a page stylesheet. */

.about_hero
{
	display: flex;
	align-items: flex-end;
	min-height: 440px;
	margin-top: var(--header-height);
	padding-top: 72px;
	padding-bottom: 64px;
	overflow: hidden;
	background: var(--brand-text);
}
.about_hero_image
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.about_hero_image::after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		linear-gradient(90deg, rgba(35, 28, 24, 0.68) 0%, rgba(35, 28, 24, 0.3) 52%, rgba(35, 28, 24, 0.05) 80%),
		linear-gradient(0deg, rgba(35, 28, 24, 0.4) 0%, rgba(35, 28, 24, 0) 50%);
}
.about_hero_content
{
	max-width: 720px;
}
.about_hero .section_subtitle
{
	color: rgba(255, 255, 255, 0.85);
}
.about_hero_title
{
	margin: 14px 0 0;
	font-family: var(--font-display);
	font-size: 54px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #FFFFFF;
}
.about_breadcrumbs
{
	margin-top: 20px;
}
.about_breadcrumbs ul li
{
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}
.about_breadcrumbs ul li::after
{
	content: '/';
	margin: 0 10px;
	opacity: 0.6;
}
.about_breadcrumbs ul li:last-child::after
{
	display: none;
}
.about_breadcrumbs ul li a
{
	color: inherit;
	transition: color 200ms ease;
}
.about_breadcrumbs ul li a:hover
{
	color: #FFFFFF;
}

/* Story */

.about_story
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}
.about_story_row,
.about_collection_row
{
	align-items: center;
}
.about_story_image
{
	aspect-ratio: 1 / 1;
	background: var(--brand-bg-alt);
}
.about_collection_image
{
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--brand-bg-alt);
}
.about_story_image::before
{
	content: '';
	position: absolute;
	top: 22px;
	left: 22px;
	right: -22px;
	bottom: -22px;
	border: 1px solid var(--brand-primary);
}
.about_story_image img,
.about_collection_image img
{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about_story_content
{
	padding-left: 56px;
}
.about_lead
{
	margin-top: 22px;
	font-family: var(--font-display);
	font-size: 23px;
	line-height: 1.55;
	color: var(--brand-heading);
}
.about_story_content p + p,
.about_collection_content p
{
	margin-top: 16px;
}
.about_story_button
{
	margin-top: 34px;
}

/* Figures and founder - between the story and the values */

/* The figures sit on a white band with hairlines, the same treatment as the homepage's
   options bar, so the page's bands read as one system. */

.about_figures_band
{
	background: var(--brand-surface);
	border-top: 1px solid var(--brand-border);
	border-bottom: 1px solid var(--brand-border);
}
.about_figures
{
	display: flex;
	margin: 0;
	padding: 44px 0;
}
.about_figure
{
	flex: 1 1 0;
	min-width: 0;
	padding: 0 24px;
	text-align: center;
}
.about_figure + .about_figure
{
	border-left: 1px solid var(--brand-border);
}
.about_figure_value
{
	display: block;
	font-family: var(--font-display);
	font-size: 46px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--brand-heading);
}
.about_figure_label
{
	display: block;
	margin-top: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-muted);
}

.about_founder
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}
.about_founder_content
{
	max-width: 760px;
	margin: 0 auto;
}
.about_founder_content .section_title
{
	margin-top: 14px;
}
.about_founder_content .about_lead
{
	margin-top: 20px;
}
.about_founder_content p + p
{
	margin-top: 16px;
}

/* Audience (between the collection and the new arrivals) and impact (between the new
   arrivals and the closing call to action) */

.about_audience
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background: var(--brand-surface);
}
.about_audience_row
{
	align-items: center;
}
.about_audience_title
{
	text-align: left;
}
.about_audience_title::after
{
	content: '';
	display: block;
	width: 44px;
	height: 1px;
	margin: 24px 0 0;
	background: var(--brand-primary);
}
.about_audience_text p + p
{
	margin-top: 16px;
}

.about_impact
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background: var(--brand-bg);
}
.about_impact_content
{
	max-width: 760px;
	margin: 44px auto 0;
}
.about_impact_content p + p
{
	margin-top: 16px;
}
.about_impact_content .about_impact_closing
{
	margin-top: 40px;
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.45;
	color: var(--brand-heading);
}
.about_impact_closing::before
{
	content: '';
	display: block;
	width: 44px;
	height: 1px;
	margin: 0 auto 28px;
	background: var(--brand-primary);
}
/* Values */

.about_values
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background: var(--brand-bg-alt);
}
.about_values_row
{
	margin-top: 48px;
}
.about_value
{
	height: 100%;
	padding: 0 16px;
	text-align: center;
}
.about_value_icon img
{
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto;
	object-fit: contain;
}
.about_value_title
{
	margin: 20px 0 0;
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--brand-heading);
}

@media only screen and (min-width: 768px)
{
	.about_value_col + .about_value_col .about_value
	{
		border-left: 1px solid var(--brand-border);
	}
}

/* Collection */

.about_collection
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}
.about_collection_content
{
	padding-right: 56px;
}
/* Chips themselves are styled in "15. Shop by style" */
.about_chips
{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}
.about_collection_button
{
	margin-top: 32px;
}

/* New arrivals */

.about_products
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background: var(--brand-bg-alt);
}

/* Closing call to action */

.about_cta
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
	background: var(--brand-text);
	text-align: center;
}
.about_cta .section_subtitle
{
	color: var(--brand-primary-light);
}
.about_cta_title
{
	margin: 16px 0 0;
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-bg);
}
.about_cta_buttons
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
}
.about_cta .button_outline
{
	border-color: rgba(255, 255, 255, 0.55);
}
.about_cta .button_outline a
{
	color: #FFFFFF;
}
.about_cta .button_outline:hover
{
	background: #FFFFFF;
}
.about_cta .button_outline:hover a
{
	color: var(--brand-heading);
}
.about_cta_note
{
	margin-top: 28px;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.72);
}
.about_cta_note i
{
	margin-right: 6px;
	color: var(--brand-primary-light);
}

/* About page - breakpoints */

@media only screen and (max-width: 991px)
{
	.about_hero
	{
		min-height: 360px;
		padding-top: 56px;
		padding-bottom: 48px;
	}
	.about_hero_title
	{
		font-size: 40px;
	}
	.about_story_content
	{
		padding-left: 0;
	}
	.about_collection_content
	{
		padding-right: 0;
	}
	.about_story_col + .about_story_col,
	.about_collection_col + .about_collection_col
	{
		margin-top: 44px;
	}
	.about_story_image
	{
		max-width: 520px;
	}
	.about_story_image::before
	{
		top: 16px;
		left: 16px;
		right: -16px;
		bottom: -16px;
	}
	/* Keep a full row of three: the fourth card would sit alone */
	.about_products .products_container > :nth-child(n+4)
	{
		display: none;
	}
	.about_cta_title
	{
		font-size: 32px;
	}
	.about_audience_text
	{
		margin-top: 28px;
	}
	/* three figures stay in a row here, with the number a little smaller */
	.about_figure_value
	{
		font-size: 40px;
	}
	.about_figure
	{
		padding: 0 16px;
	}
}

@media only screen and (max-width: 767px)
{
	.about_values_row
	{
		margin-top: 36px;
	}
	.about_value_col + .about_value_col
	{
		margin-top: 36px;
	}
	/* three figures do not fit across a phone, so they become rows with the number on the left */
	.about_figures
	{
		flex-direction: column;
		padding: 4px 0;
	}
	.about_figure
	{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		padding: 20px 0;
		text-align: left;
	}
	.about_figure + .about_figure
	{
		border-left: none;
		border-top: 1px solid var(--brand-border);
	}
	.about_figure_value
	{
		font-size: 36px;
	}
	.about_figure_label
	{
		margin-top: 0;
		text-align: right;
	}
	.about_products .products_container > :nth-child(n+4)
	{
		display: flex;
	}
}

@media only screen and (max-width: 575px)
{
	.about_hero
	{
		min-height: 300px;
	}
	.about_impact_content .about_impact_closing
	{
		margin-top: 32px;
		font-size: 22px;
	}
	.about_audience_text .about_lead
	{
		font-size: 20px;
	}
	.about_hero_title
	{
		font-size: 32px;
	}
	.about_lead
	{
		font-size: 20px;
	}
	.about_story_image::before
	{
		display: none;
	}
	.about_cta_title
	{
		font-size: 26px;
	}
	.about_cta_buttons .button
	{
		width: 100%;
	}
}

/*********************************
15. Shop by Style
*********************************/

/* The chip row under the hero, and the same chips on the About page. Each one runs a
   Shopivana search (/products?search=...). */

.styles_bar
{
	padding-top: 30px;
}
.styles_list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.style_chip
{
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border: 1px solid var(--brand-border);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--brand-text);
	transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease);
}
.style_chip:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: var(--brand-bg);
}
.style_chip_all
{
	border-color: var(--brand-primary);
	color: var(--brand-primary-dark);
}

@media only screen and (max-width: 767px)
{
	/* Swipeable row rather than a wrapped block */
	.styles_list
	{
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: -15px;
		margin-right: -15px;
		padding: 0 15px 4px;
	}
	.styles_list::-webkit-scrollbar
	{
		display: none;
	}
}

/*********************************
16. Product Sliders
*********************************/

/* Sections whose products are filtered by jg-custom.js (for example "Jhumkas").
   They stay hidden until the script has filtered them, so a section never shows
   the wrong products if the script is missing; an empty one removes itself. */

.product_section
{
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}
[data-jg-section]
{
	display: none;
}
[data-jg-section].jg_ready
{
	display: block;
}

/* Slider mode: undo the grid, let Owl lay the cards out */
.products_container.products_slider
{
	display: block;
	gap: 0;
}
.products_container.products_slider > *
{
	display: block;
	/* also clears flex-direction: column from the grid rule above, which would
	   otherwise stack the arrows and dots */
	flex-direction: row;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
.products_slider .owl-stage
{
	display: flex;
	align-items: stretch;
}
.products_slider .owl-item
{
	display: flex;
	flex: 0 0 auto;
	float: none;
}
.products_slider .owl-item > *
{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.products_slider .owl-nav
{
	position: absolute;
	top: -78px;
	right: 0;
	display: flex;
	gap: 8px;
}
/* Owl 2.2 builds its arrows and dots as <div>, not <button> */
.products_slider .owl-nav .owl-prev,
.products_slider .owl-nav .owl-next
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1px solid var(--brand-border);
	border-radius: 50%;
	color: var(--brand-heading);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}
.products_slider .owl-nav .owl-prev:hover,
.products_slider .owl-nav .owl-next:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}
.products_slider .owl-nav .disabled
{
	opacity: 0.35;
	cursor: default;
}
.products_slider .owl-nav .disabled:hover
{
	background: transparent;
	border-color: var(--brand-border);
	color: var(--brand-heading);
}
.products_slider .owl-dots
{
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}
.products_slider .owl-dots .owl-dot
{
	padding: 6px 0;
	background: transparent;
	border: none;
	cursor: pointer;
}
.products_slider .owl-dots .owl-dot span
{
	display: block;
	width: 24px;
	height: 2px;
	background: rgba(47, 47, 47, 0.2);
	transition: background 250ms var(--ease);
}
.products_slider .owl-dots .owl-dot.active span
{
	background: var(--brand-primary-dark);
}
.our-services-area .services_button
{
	margin-top: 34px;
}

@media only screen and (max-width: 767px)
{
	.products_slider .owl-nav
	{
		display: none;
	}
	.products_slider .owl-dots
	{
		margin-top: 22px;
	}
}

/*********************************
17. Login
*********************************/

/* The login section only had Bootstrap defaults (full-width 38px input, plain heading),
   so it is given the same card, fields and buttons as the rest of the site. The markup
   is Shopivana's and is left alone: .login-div is step one, .login-password-div is
   step two and stays hidden (d-none) until the e-mail is accepted. */

.login_part_form
{
	max-width: 520px;
	margin: 0 auto 96px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	box-shadow: var(--shadow-soft);
}
.login_part_form_iner
{
	padding: 48px 44px;
}
.login_part_form h3
{
	margin: 0;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-heading);
}
.login_part_form h3 + p
{
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
	color: var(--brand-muted) !important;	/* beats Bootstrap's .text-muted, which is !important */
}
.login_part_form .contact_form
{
	margin-top: 30px;
}
.login_part_form .form-group
{
	margin-bottom: 16px;
}

/* Fields */

.login_part_form .form-control
{
	height: 50px;
	padding: 0 18px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--brand-text);
	transition: border-color 200ms ease;
}
.login_part_form .form-control:focus
{
	border-color: var(--brand-primary);
	box-shadow: none;
}
.login_part_form .form-control::placeholder
{
	color: var(--brand-muted);
	opacity: 1;
}
.login_part_form .f-label
{
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.login_part_form .f-label sup
{
	margin-left: 2px;
	color: var(--brand-primary-dark);
}

/* Buttons - .review_form_button is shared with the contact page's form */

.review_form_button
{
	width: auto;		/* contact.css pins it to 179px, too narrow for its own label */
	min-width: 179px;
	height: 50px;
	padding: 0 32px;
	background: var(--brand-primary-dark);
	border: 1px solid var(--brand-primary-dark);
	border-radius: 0;
	color: #FFFFFF;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;	/* "Send message" on the contact form must stay on one line */
	cursor: pointer;
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}
.review_form_button:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}
.login_part_form .review_form_button
{
	width: 100%;
	margin-top: 4px;
}
.login_part_form .get-password-div
{
	margin-bottom: 0;
}

/* Step two: password */

.login_part_form .login-password-div
{
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--brand-border);
}
.login_part_form .form-group.d-flex
{
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 0;
}
.login_part_form .form-group.d-flex .review_form_button
{
	flex: 1 1 0;		/* equal halves rather than sizing to their labels */
	width: auto;
	min-width: 0;
	padding: 0 16px;
	margin-top: 0;
}
.login_part_form .site-btn-sm
{
	background: transparent;
	border-color: var(--brand-border);
	color: var(--brand-text);
}
.login_part_form .site-btn-sm:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}
.login_part_form .login-password-countdown
{
	flex: 1 1 100%;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--brand-muted);
}
.login_part_form .login-password-countdown:empty
{
	display: none;
}

@media only screen and (max-width: 575px)
{
	.login_part_form
	{
		margin-bottom: 64px;
	}
	.login_part_form_iner
	{
		padding: 34px 22px;
	}
	.login_part_form h3
	{
		font-size: 22px;
	}
	.login_part_form .form-group.d-flex .review_form_button
	{
		flex: 1 1 100%;
	}
}

/*********************************
18. Product Detail
*********************************/

/* Goes with product-card-detail.html. product.css styles this page first, so these
   rules (loaded after it) take over; the quantity stepper and Notify Me button are
   the shared ones from 7.1. */

.product_row
{
	align-items: flex-start;
	margin-top: 56px;
}
.current_page ul li,
.current_page ul li a
{
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.current_page ul li a:hover
{
	color: var(--brand-heading);
}

/* Gallery */

.product_image_large
{
	overflow: hidden;
	background: var(--brand-bg-alt);
}
.product_image_large img
{
	display: block;
	width: 100%;
	min-height: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.product_image_thumbnails
{
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}
.product_image_thumbnail
{
	display: block;
	width: 88px;
	height: 88px;
	margin-right: 0;
	overflow: hidden;
	background: var(--brand-bg-alt);
	border: 1px solid transparent;
	transition: border-color 200ms var(--ease);
}
.product_image_thumbnail img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product_image_thumbnail:hover,
.product_image_thumbnail.active
{
	border-color: var(--brand-primary);
}

/* Details column */

.product_content .product_sku
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.product_content .product_sku::before
{
	content: 'SKU ';
}
.product_content .product_sku:empty
{
	display: none;
}
.product_content .product_name
{
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--brand-heading);
}
.product_content .product_price
{
	margin-top: 12px;
	font-size: 24px;
	font-weight: 600;
	color: var(--brand-primary-dark);
}
.product_content .product_price_old
{
	margin-left: 8px;
	font-size: 16px;
	font-weight: 400;
	color: var(--brand-muted);
	text-decoration: line-through;
}
.product_content .product_price_old:empty
{
	display: none;
}
.in_stock_container
{
	margin-top: 18px;
}
.in_stock_container span
{
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--brand-muted);
}
.product_content .product_short_description
{
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--brand-muted);
}
.product_content .product_short_description:empty
{
	display: none;
}
.product_text
{
	margin-top: 26px;
}
.product_text p
{
	font-size: 15px;
	line-height: 1.85;
	color: var(--brand-muted);
}
/* The measurements block, between the short description and the variant chooser.
   Shopivana stores the lines in one text field, so pre-line is what keeps them on separate
   lines if custom.js has not loaded; when it has, the paragraph becomes .product_specs. */
.product_specs_block
{
	margin-top: 26px;
}
.product_specs_label
{
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.product_specs_block > p
{
	margin: 0;
	white-space: pre-line;
	font-size: 15px;
	line-height: 1.85;
	color: var(--brand-muted);
}

/* custom.js turns a "Weight - 23 gm" style description into this table */
.product_specs
{
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	/* fixed layout keeps the two columns in the same place from product to product, and
	   stops a long value dragging the table wider than the card */
	table-layout: fixed;
}
.product_specs th,
.product_specs td
{
	padding: 12px 0;
	border-bottom: 1px solid var(--brand-border);
	font-size: 14px;
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.product_specs tr:first-child th,
.product_specs tr:first-child td
{
	border-top: 1px solid var(--brand-border);
}
.product_specs th
{
	width: 40%;
	padding-right: 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
	line-height: 1.7;
}
.product_specs td
{
	font-weight: 500;
	color: var(--brand-text);
}

/* Variants (Shopivana renders .size__btn buttons or .color__checkbox swatches) */

.product_variants
{
	margin-top: 28px;
}
.product_variants:empty
{
	display: none;
}
.product_variants .size__btn,
.product_variants .color__checkbox
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.product_variants label
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-text);
	cursor: pointer;
	transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.product_variants label input
{
	display: none;
}
.product_variants label:hover
{
	border-color: var(--brand-heading);
}
.product_variants label.active
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}
/* Shopivana wraps each variant title in a bare <li>, which the browser bullets */
.product_variants li
{
	display: block;
	list-style: none;
	margin: 0;
}
.product_variants li > span
{
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.product_variants .color__checkbox label
{
	min-width: 0;
	width: auto;
	height: auto;
	padding: 0;
	border: none;
	background: none;
}
.product_variants .checkmark
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--brand-border);
	border-radius: 0;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-text);
	transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
/* Named options carry an inline background of #f2f2f2, so overriding it needs !important.
   Real colour swatches keep their own inline colour and are only ringed when selected. */
.product_variants .checkmark[style*="#f2f2f2"]
{
	background-color: var(--brand-surface) !important;
}
.product_variants label:hover .checkmark
{
	border-color: var(--brand-heading);
}
.product_variants label.active .checkmark
{
	border-color: var(--brand-heading);
	box-shadow: inset 0 0 0 1px var(--brand-heading);
}
.product_variants label.active .checkmark[style*="#f2f2f2"]
{
	background-color: var(--brand-heading) !important;
	color: #FFFFFF;
	box-shadow: none;
}

/* Buy row */

.product_notify
{
	margin-top: 30px;
	max-width: 420px;
}
.product_actions
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
}
.product_actions .product_qty
{
	flex: 0 0 auto;
	width: 140px;
}
.product_content .aButton
{
	flex: 1 1 200px;
	width: auto;
	height: 52px;
	margin-top: 0;
	padding: 0 30px;
	background: var(--brand-primary-dark);
	font-weight: 600;
	line-height: 52px;
}
.product_content .aButton:hover
{
	background: var(--brand-heading);
	color: #FFFFFF;
}
.product_wishlist_button
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--brand-border);
	color: var(--brand-heading);
	font-size: 16px;
	cursor: pointer;
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}
.product_wishlist_button .fa-heart::before
{
	content: '\f08a';
}
.product_wishlist_button:hover
{
	border-color: var(--brand-heading);
}
.product_wishlist_button.active
{
	color: var(--brand-primary-dark);
	border-color: var(--brand-primary);
}
.product_wishlist_button.active .fa-heart::before
{
	content: '\f004';
}

/* Share */

.product_share
{
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--brand-border);
}
.product_share_label
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.product_share a
{
	font-size: 17px;
	line-height: 1;
	color: var(--brand-muted);
	transition: color 200ms ease;
}
.product_share a:hover
{
	color: var(--brand-heading);
}

@media only screen and (max-width: 991px)
{
	.product_row
	{
		margin-top: 36px;
	}
	.product_content
	{
		margin-top: 40px;
	}
	.product_content .product_name
	{
		font-size: 28px;
	}
}

@media only screen and (max-width: 575px)
{
	.product_image_thumbnail
	{
		width: 68px;
		height: 68px;
	}
	.product_content .product_name
	{
		font-size: 24px;
	}
	.product_actions .product_qty,
	.product_content .aButton
	{
		flex: 1 1 100%;
		width: 100%;
	}
}

/*********************************
19. Wishlist / table pages
*********************************/

/* The wishlist (and any page built on the same breadcrumb + table markup) had no styles
   of its own, so it fell back to raw Bootstrap. HTML is untouched; these rules target the
   page's own classes and Shopivana's hooks, so they hold whatever the row template outputs. */

.breadcrumb-area
{
	padding-top: var(--header-height);
}
.top-breadcrumb-area
{
	min-height: 150px;
	padding: 36px 20px;
	background-color: var(--brand-bg-alt);
	/* the markup carries an inline background image from another store's folder */
	background-image: none !important;
	text-align: center;
}
.top-breadcrumb-area h2
{
	margin: 0;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-heading);
}
.breadcrumb-area .breadcrumb
{
	margin: 0;
	padding: 18px 0;
	background: transparent;
	border-radius: 0;
}
.breadcrumb-area .breadcrumb-item,
.breadcrumb-area .breadcrumb-item a
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.breadcrumb-area .breadcrumb-item a:hover
{
	color: var(--brand-heading);
}
.breadcrumb-area .breadcrumb-item.active
{
	color: var(--brand-heading);
}

/* Table */

.cart-area
{
	padding-top: 16px;	/* the markup already carries Bootstrap's mt-5 on the inner row */
	padding-bottom: var(--section-space);
}
.site-blocks-table table
{
	width: 100%;
	margin: 0;
	border: none;
	border-collapse: collapse;
}
.site-blocks-table table th,
.site-blocks-table table td
{
	padding: 18px 16px;
	border: none;
	border-bottom: 1px solid var(--brand-border);
	vertical-align: middle;
}
.site-blocks-table table thead th
{
	border-bottom: 1px solid var(--brand-heading);
	background: transparent;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.site-blocks-table table tbody tr:hover
{
	background: var(--brand-bg-alt);
}
.site-blocks-table table td img
{
	display: inline-block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	background: var(--brand-bg-alt);
}
.site-blocks-table table td.product-name a,
.site-blocks-table table td a:not([class])
{
	font-size: 15px;
	font-weight: 600;
	color: var(--brand-heading);
	transition: color 200ms ease;
}
.site-blocks-table table td.product-name a:hover,
.site-blocks-table table td a:not([class]):hover
{
	color: var(--brand-primary-dark);
}
.site-blocks-table table td.product-price
{
	font-size: 15px;
	font-weight: 600;
	color: var(--brand-primary-dark);
	white-space: nowrap;
}

/* Buttons inside the table, whatever class the card template gives them */

.site-blocks-table table td .btn,
.site-blocks-table table td button,
.site-blocks-table table td .product-add-to-cart-button,
.site-blocks-table table td .site-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 22px;
	background: var(--brand-primary-dark);
	border: 1px solid var(--brand-primary-dark);
	border-radius: 0;
	color: #FFFFFF;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}
.site-blocks-table table td .btn:hover,
.site-blocks-table table td button:hover,
.site-blocks-table table td .product-add-to-cart-button:hover,
.site-blocks-table table td .site-btn:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}

/* Remove control (last column) */

.site-blocks-table table td.product-remove a,
.site-blocks-table table td .product-button-remove,
.site-blocks-table table td:last-child a:not(.btn):not(.site-btn):not(.product-add-to-cart-button)
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--brand-border);
	border-radius: 50%;
	background: transparent;
	color: var(--brand-muted);
	font-size: 12px;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.site-blocks-table table td.product-remove a:hover,
.site-blocks-table table td .product-button-remove:hover,
.site-blocks-table table td:last-child a:not(.btn):not(.site-btn):not(.product-add-to-cart-button):hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}

/* Empty state */

.wishlist-empty-div h4,
.checkout-empty-div h4,
.cart-empty-div h4,
.order-empty-div h4,
.list-empty-div h4
{
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-heading);
}
.wishlist-empty-div p,
.checkout-empty-div p,
.cart-empty-div p,
.order-empty-div p,
.list-empty-div p
{
	margin-top: 12px;
	color: var(--brand-muted);
}
.wishlist-empty-div .site-btn,
.checkout-empty-div .site-btn,
.cart-empty-div .site-btn,
.order-empty-div .site-btn,
.list-empty-div .site-btn,
.wishlist-empty-div .btn,
.checkout-empty-div .btn,
.cart-empty-div .btn,
.order-empty-div .btn,
.list-empty-div .btn
{
	height: 50px;
	margin-top: 22px;
	padding: 0 34px;
	background: var(--brand-primary-dark);
	border: 1px solid var(--brand-primary-dark);
	border-radius: 0;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.wishlist-empty-div .site-btn:hover,
.checkout-empty-div .site-btn:hover,
.cart-empty-div .site-btn:hover,
.order-empty-div .site-btn:hover,
.list-empty-div .site-btn:hover,
.wishlist-empty-div .btn:hover,
.checkout-empty-div .btn:hover,
.cart-empty-div .btn:hover,
.order-empty-div .btn:hover,
.list-empty-div .btn:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
}

@media only screen and (max-width: 767px)
{
	/* Let the table scroll sideways instead of squeezing the columns */
	.site-blocks-table
	{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.site-blocks-table table
	{
		min-width: 620px;
	}
	.site-blocks-table table th,
	.site-blocks-table table td
	{
		padding: 14px 12px;
	}
	.site-blocks-table table td img
	{
		width: 72px;
		height: 72px;
	}
	.top-breadcrumb-area
	{
		min-height: 110px;
		padding: 26px 16px;
	}
	.top-breadcrumb-area h2
	{
		font-size: 24px;
	}
	.cart-area
	{
		padding-top: 36px;
	}
}

/*********************************
19.1 Cart card quantity stepper
*********************************/

/* The stepper on a cart card is Shopivana's .quantity wrapper holding .qty-minus, .qty-text
   and .qty-plus. Nothing in the theme styles those names - the theme's own cart stepper is
   .product_quantity - so the text box fell back to the browser default: about 165px wide
   with the default border, which pushed the price and total out of line.

   It is sized to the stepper customers already use on the product card and the product page
   (44px tall, dark outline), at 124px wide, which is also the width of the theme's own cart
   stepper. Scoped to .cart_product, so no other control on the site is touched.

   Shopivana shows and hides the wrapper with jQuery, which sets or clears an inline display.
   None of these rules set display on the wrapper's own box beyond the flex layout, so the
   hidden state still wins until the item is in the cart. */

.cart_product .quantity
{
	display: flex;
	align-items: stretch;
	flex: 0 0 124px;
	width: 124px;
	height: 44px;
	/* the theme's price and total columns centre their text, so with nothing between them the
	   stepper sat flush against the total on a phone */
	margin: 0 12px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-heading);
	overflow: hidden;
}
.cart_product .quantity .qty-minus,
.cart_product .quantity .qty-plus
{
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 100%;
	color: var(--brand-heading);
	font-size: 11px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: background 200ms var(--ease), color 200ms var(--ease);
	transition: background 200ms var(--ease), color 200ms var(--ease);
}
.cart_product .quantity .qty-minus:hover,
.cart_product .quantity .qty-plus:hover
{
	background: var(--brand-heading);
	color: #FFFFFF;
}
.cart_product .quantity .qty-text
{
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 4px;
	background: transparent;
	border: none;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--brand-heading);
	text-align: center;
}
/* Keyboard focus stays visible. The ring sits inside the box, because the wrapper clips
   anything that falls outside it. */
.cart_product .quantity .qty-text:focus-visible
{
	outline: 2px solid var(--brand-teal);
	outline-offset: -4px;
}

/*********************************
20. Checkout
*********************************/

/* checkout.css gives this page a white background, 57px fields with a grey border and a
   64px gap above every block. main_styles.css loads after it, so everything here is an
   override rather than a second layer. The markup keeps every Shopivana hook: the
   checkout script shows and hides these blocks itself depending on what the store has
   switched on (COD, coupons, reward points, courier rates, pickup points). */

.checkout
{
	padding-top: 16px;
	padding-bottom: var(--section-space);
	background: var(--brand-bg);
}
.checkout_card
{
	margin-bottom: 26px;
	padding: 36px 34px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
}
.checkout_title
{
	margin-bottom: 26px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-heading);
}

/* Fields */

.checkout .checkout_form_container
{
	margin-top: 0;
}
.checkout_field
{
	margin-bottom: 18px;
}
.checkout_field label,
.checkout_notes label,
.checkout_extra_fields label
{
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.checkout_field label span
{
	color: var(--brand-primary-dark);
}
.checkout_field label .optional
{
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--brand-muted);
}
.checkout .checkout_input,
.checkout .custom-select,
.checkout .form-control,
.checkout_extra_fields input,
.checkout_extra_fields select
{
	width: 100%;
	height: 50px;
	margin-bottom: 0;
	padding: 0 16px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--brand-text);
	outline: none;
	-webkit-transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
	transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.checkout .checkout_input + .checkout_input,
.checkout .custom-select + .checkout_input
{
	margin-top: 12px;
}
.checkout .checkout_input:focus,
.checkout .custom-select:focus,
.checkout .form-control:focus,
.checkout .checkout_comment:focus,
.checkout_extra_fields input:focus,
.checkout_extra_fields select:focus
{
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 3px rgba(147, 124, 111, 0.12);
}

/* checkout.css paints placeholders as 600-weight near-black, which reads as a filled value */

.checkout .checkout_input::placeholder,
.checkout .checkout_comment::placeholder
{
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--brand-muted) !important;
	opacity: 1;
}
.checkout .checkout_input::-webkit-input-placeholder,
.checkout .checkout_comment::-webkit-input-placeholder
{
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--brand-muted) !important;
}

/* Validation. Shopivana adds .error to the field it stops on; the message below it is
   hidden until then. :has keeps that in CSS - without support the field still turns red. */

.checkout .checkout_input.error,
.checkout .custom-select.error,
.checkout .form-control.error,
.checkout_extra_fields .error
{
	border-color: #b43b2c;
	box-shadow: none;
}
.checkout .error-msg
{
	display: none;
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #b43b2c;
}
.checkout_field:has(.error) .error-msg
{
	display: block;
}
.checkout_field:has(.error) label
{
	color: #b43b2c;
}

/* The city select becomes a select2 widget when a courier is configured, and select2's
   own stylesheet loads after this file */

.checkout .select2-container
{
	width: 100% !important;
}
.checkout .select2-container--default .select2-selection--single
{
	height: 50px !important;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border) !important;
	border-radius: 0 !important;
}
.checkout .select2-container--default .select2-selection--single .select2-selection__rendered
{
	padding-left: 16px;
	line-height: 48px !important;
	color: var(--brand-text);
}
.checkout .select2-container--default .select2-selection--single .select2-selection__arrow
{
	height: 48px !important;
}

/* The phone field becomes an intl-tel-input when SMS verification is switched on */

.checkout .iti
{
	width: 100%;
}

/* Checkboxes */

.checkout_check
{
	display: flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}
.checkout_card > .checkout_check
{
	margin-top: 8px;
}
.checkout_check input[type="checkbox"]
{
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--brand-primary-dark);
	cursor: pointer;
}
.checkout_check span
{
	margin-left: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--brand-muted);
}
.checkout_check span b
{
	color: var(--brand-heading);
}
.checkout_extra_fields:empty
{
	display: none;
}
.checkout_extra_fields
{
	margin-top: 4px;
}

/* Shipping rates and pickup points - Shopivana injects .form-check rows into these */

.checkout_options .form-check
{
	position: relative;
	margin-bottom: 10px;
	padding: 14px 16px 14px 44px;
	border: 1px solid var(--brand-border);
	font-size: 13px;
	line-height: 1.6;
	color: var(--brand-text);
}
.checkout_options .form-check:last-child
{
	margin-bottom: 0;
}
.checkout_options .form-check input[type="radio"]
{
	position: absolute;
	top: 17px;
	left: 16px;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--brand-primary-dark);
}
.checkout_options .form-check b
{
	color: var(--brand-heading);
}
.checkout_options .form-check i
{
	font-size: 12px;
	font-style: normal;
	color: var(--brand-muted);
}
/* the injected label is empty - stretch it so the whole box selects the option */
.checkout_options .form-check .form-check-label
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	cursor: pointer;
}

/* Payment options */

.payment_option_row
{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 16px;
	border: 1px solid var(--brand-border);
	cursor: pointer;
	-webkit-transition: border-color 200ms var(--ease);
	transition: border-color 200ms var(--ease);
}
.payment_option_row:last-child
{
	margin-bottom: 0;
}
.payment_option_row:hover
{
	border-color: var(--brand-primary);
}
.payment_option_row label
{
	flex: 1 1 auto;
	margin: 0 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-heading);
	cursor: pointer;
}
.checkout .regular_radio
{
	flex: 0 0 16px;
	border-color: var(--brand-border);
}
.checkout .regular_radio:checked
{
	border-color: var(--brand-primary-dark);
}
.checkout .regular_radio:checked::after
{
	width: 8px;
	height: 8px;
	background: var(--brand-primary-dark);
}

/* Order summary */

.checkout .cart_details
{
	width: 100%;
	margin-top: 0;
	padding: 36px 34px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
}
.coupon_box
{
	margin-bottom: 22px;
}
.coupon_row
{
	display: flex;
}
.coupon_input
{
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-right: none;
	font-size: 13px;
	color: var(--brand-text);
	outline: none;
}
.coupon_input:focus
{
	border-color: var(--brand-primary);
}
.coupon_button
{
	flex: 0 0 auto;
	height: 46px;
	padding: 0 22px;
	background: var(--brand-primary-dark);
	border: 1px solid var(--brand-primary-dark);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-transition: background 250ms var(--ease), border-color 250ms var(--ease);
	transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.coupon_button:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
}
.coupon_list_link
{
	display: inline-block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-primary-dark);
	border-bottom: 1px solid var(--brand-primary-light);
}
.coupon_list_link:hover
{
	color: var(--brand-heading);
}
.coupon_message
{
	display: block;
	margin-top: 8px;
	font-size: 12px;
	overflow: hidden;
}
.coupon_message:empty
{
	display: none;
}
.points_box
{
	margin-bottom: 22px;
	padding: 14px 16px;
	background: var(--brand-bg-alt);
	border: 1px solid var(--brand-border);
}

/* Items in the order, rendered by the product-card-checkout template */

.checkout .cart_total
{
	width: 100%;
	margin-top: 0;
}
.cart_total_head
{
	padding-bottom: 10px;
	border-bottom: 1px solid var(--brand-heading);
}
.cart_total_head .cart_total_title,
.cart_total_head .cart_total_price
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.cart_items_list
{
	max-height: 320px;
	overflow-y: auto;
}
.cart_items_list > *
{
	display: flex;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--brand-border);
	font-size: 13px;
	color: var(--brand-text);
}
.cart_items_list img
{
	width: 54px;
	height: 54px;
	margin-right: 12px;
	object-fit: cover;
	background: var(--brand-bg-alt);
}
.cart_items_list .cart_total_title
{
	font-size: 13px;
	line-height: 1.5;
	color: var(--brand-text);
}
.cart_items_list .cart_total_price
{
	padding-left: 12px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--brand-primary-dark);
}

/* Totals */

.checkout .cart_total ul
{
	width: 100%;
	margin-top: 18px;
	border: none;
}
.checkout .cart_total ul li
{
	width: 100%;
	height: auto;
	padding: 9px 0;
	border: none;
	font-size: 13px;
	color: var(--brand-text);
}
.checkout .cart_total ul li .cart_total_title
{
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.checkout .cart_total ul li .cart_total_price
{
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--brand-heading);
}
.checkout .cart_total ul li.total_line_off .cart_total_price
{
	color: #2e7d32;
}
/* a coupon and reward points come off the total, so the line reads as a deduction */
.checkout .cart_total ul li.total_line_off .cart_total_price:not(:empty)::before
{
	content: "\2212\00A0";
}

/* Shopivana only fills a line when the store actually charges it. :has drops the blank
   rows; a browser without it just shows the row with an empty value. The !important is
   there to beat Bootstrap's .d-flex, which the row markup also carries. */
.checkout .cart_total ul li.total_line:has(.cart_total_price:empty)
{
	display: none !important;
}

.checkout .cart_total ul li.total_row
{
	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--brand-heading);
}
.checkout .cart_total ul li.total_row .cart_total_title
{
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: 0.06em;
	color: var(--brand-heading);
}
.checkout .cart_total ul li.total_row .cart_total_price
{
	font-size: 22px;
	font-weight: 600;
	color: var(--brand-primary-dark);
}

/* Notes and attachment */

.checkout_notes
{
	margin-top: 24px;
}
.checkout .checkout_comment
{
	width: 100%;
	height: 96px;
	padding: 14px 16px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--brand-text);
	outline: none;
	resize: vertical;
}
.attach_file
{
	position: relative;
	display: inline-block;
	margin: 12px 0 0;
	cursor: pointer;
}
.attach_file_label
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-primary-dark);
	border-bottom: 1px solid var(--brand-primary-light);
}
.attach_file input[type="file"]
{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.attach_file:focus-within .attach_file_label
{
	outline: 2px solid var(--brand-teal);
	outline-offset: 3px;
}

/* Place order */

.checkout .cart_total_button
{
	width: 100%;
	height: 52px;
	margin-top: 24px;
	background: var(--brand-primary-dark);
	border: 1px solid var(--brand-primary-dark);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
}
.checkout .cart_total_button:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}

/* Coupon list modal (Shopivana adds it after the footer on every page) */

.apply-coupon-model
{
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: 0;
}
.apply-coupon-model .modal-header,
.apply-coupon-model .modal-footer
{
	border-color: var(--brand-border);
}
.apply-coupon-model .modal-title
{
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--brand-heading);
}
.apply-coupon-model .coupon-box
{
	padding: 14px 0;
	border-bottom: 1px solid var(--brand-border);
}
.apply-coupon-model .coupon-name
{
	font-size: 14px;
	color: var(--brand-heading);
}
.apply-coupon-model .coupon-description
{
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.6;
}
.apply-coupon-model .apply-btn
{
	height: 46px;
	padding: 0 30px;
	background: var(--brand-primary-dark);
	border: 1px solid var(--brand-primary-dark);
	border-radius: 0;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.apply-coupon-model .apply-btn:hover
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}

@media only screen and (max-width: 991px)
{
	.checkout .cart_details
	{
		margin-top: 0;
	}
}
@media only screen and (max-width: 767px)
{
	.checkout_card,
	.checkout .cart_details
	{
		padding: 26px 20px;
	}
	.checkout_title
	{
		margin-bottom: 20px;
		font-size: 19px;
	}
	.checkout .checkout_input,
	.checkout .custom-select,
	.checkout .form-control
	{
		height: 46px;
	}
	.cart_items_list
	{
		max-height: none;
	}
}

/*********************************
21. Thank you / order confirmation
*********************************/

/* None of this page's classes were defined anywhere in the theme - .site-btn,
   .shop-cart, .spad, .cart-table, .summary-table, .cart_product_img - so it fell back
   to browser defaults. The section markup is untouched. */

/* The site button. Undefined until now, which is why it rendered as a grey system
   button here and on the cart / wishlist empty screens. */

.site-btn
{
	display: inline-block;
	height: 50px;
	padding: 0 34px;
	background: var(--brand-primary-dark);
	border: 1px solid var(--brand-primary-dark);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 48px;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
	-webkit-transition: background 250ms var(--ease), border-color 250ms var(--ease);
	transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.site-btn:hover,
.site-btn:focus
{
	background: var(--brand-heading);
	border-color: var(--brand-heading);
	color: #FFFFFF;
}

/* Page banner.
   The section points the parallax at images/contact.jpg - the template's red trainers
   photo - and titles the page "Contact". Until both are corrected in the section itself,
   the banner is shown as the cream band the other inner pages use. Delete this block to
   bring the photo back. */

body:has(.success-order-div) .parallax-mirror
{
	display: none !important;
}
body:has(.success-order-div) .home_background
{
	display: none;
}
body:has(.success-order-div) .home
{
	padding-top: var(--header-height);
	background: var(--brand-bg-alt);
}
body:has(.success-order-div) .home_container
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 150px;
	padding: 36px 20px;
}
body:has(.success-order-div) .home_content
{
	position: static;
	top: auto;
	text-align: center;
}
body:has(.success-order-div) .home_title
{
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-heading);
}
body:has(.success-order-div) .breadcrumbs
{
	margin-top: 12px;
}
body:has(.success-order-div) .breadcrumbs ul li,
body:has(.success-order-div) .breadcrumbs ul li a
{
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
body:has(.success-order-div) .breadcrumbs ul li a:hover
{
	color: var(--brand-heading);
}

/* Confirmation message */

.shop-cart.spad
{
	padding-top: 56px;
	padding-bottom: var(--section-space);
}
.success-order-div h4,
.failed-order-div h4
{
	margin: 0;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-heading);
}
.success-order-div h4 + p,
.failed-order-div h4 + p
{
	margin-top: 14px;
}
.success-order-div p,
.failed-order-div p
{
	font-size: 15px;
	color: var(--brand-muted);
}
.success-order-div .order-number
{
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--brand-heading);
}
.success-order-div .order-email-status,
.failed-order-div .payment-failed-error
{
	font-size: 13px;
}
.success-order-div .site-btn,
.failed-order-div .site-btn
{
	margin-top: 22px;
}

/* Items ordered + summary, as one card */

.success-order-div .cart-items-div
{
	margin-left: 0;
	margin-right: 0;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
}
.success-order-div .cart-items-div > div
{
	padding-top: 32px;
	padding-bottom: 32px;
}
.success-order-div .cart-items-div h2
{
	font-family: var(--font-display) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-heading);
}

/* Bootstrap's .table-responsive belongs on a wrapper, not on the table: on the table it
   makes it display:block, so the rows shrink-wrap into the left-hand third of the panel.
   Put back a table here and let the panel scroll instead on small screens. */

.success-order-div .cart-table
{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.success-order-div .cart-table table
{
	display: table;
	width: 100%;
	margin: 18px 0 0;
}
.success-order-div .cart-table td
{
	padding: 16px 0;
	border: none;
	border-bottom: 1px solid var(--brand-border);
	vertical-align: middle;
}
.success-order-div .cart-table tr:last-child td
{
	border-bottom: none;
}
.success-order-div .cart-table .cart_product_img a
{
	display: inline-block;
	vertical-align: middle;
}
.success-order-div .cart-table .cart_product_img img
{
	width: 76px;
	height: 76px;
	object-fit: cover;
	background: var(--brand-bg-alt);
}
.success-order-div .cart-table .cart_product_img h5
{
	display: inline-block;
	max-width: calc(100% - 100px);
	margin: 0 0 0 16px;
	vertical-align: middle;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--brand-heading);
}
.success-order-div .cart-table .price
{
	width: 1%;
	padding-left: 16px;
	text-align: right;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-primary-dark);
}

/* Summary */

.summary-table
{
	margin-bottom: 0;
}
.summary-table td
{
	padding: 9px 0;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.summary-table td.value
{
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--brand-heading);
}
.summary-table .order-points,
.summary-table .order-discount-amount
{
	color: #2e7d32;
}
/* both come off the total, so the line reads as a deduction */
.summary-table .order-points:not(:empty)::before,
.summary-table .order-discount-amount:not(:empty)::before
{
	content: "\2212\00A0";
}
.summary-table .order-amount
{
	font-family: var(--font-display);
	font-size: 26px !important;	/* the cell carries an inline font-size: 1.5em */
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--brand-primary-dark);
}
.summary-table tr:has(> .order-amount) td
{
	border-top: 1px solid var(--brand-heading);
}
.summary-table tr:has(> .order-amount) > td:first-child
{
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: 0.06em;
	color: var(--brand-heading);
}
.success-order-div hr
{
	margin: 22px 0;
	border-color: var(--brand-border);
}

@media only screen and (max-width: 991px)
{
	.success-order-div .cart-items-div > div
	{
		border-right: none !important;	/* the inline divider only makes sense side by side */
	}
	.success-order-div .cart-items-div > div:first-child
	{
		padding-bottom: 0;
	}
	.success-order-div .cart-items-div > div + div
	{
		padding-top: 0;
		border-top: 1px solid var(--brand-border);
		margin-top: 24px;
	}
}
@media only screen and (max-width: 767px)
{
	.shop-cart.spad
	{
		padding-top: 40px;
	}
	body:has(.success-order-div) .home
	{
		height: auto;	/* contact_responsive.css pins it to 372px under 575px */
	}
	body:has(.success-order-div) .home_container
	{
		min-height: 110px;
		padding: 26px 16px;
	}
	body:has(.success-order-div) .home_title
	{
		font-size: 24px;
	}
	/* let the name wrap instead of making a two-column table scroll sideways */
	.success-order-div .cart-table .cart_product_img img
	{
		width: 64px;
		height: 64px;
	}
	.success-order-div .cart-table .cart_product_img h5
	{
		max-width: calc(100% - 84px);
		margin-left: 12px;
		font-size: 13px;
	}
	.success-order-div .cart-table .price
	{
		padding-left: 12px;
		font-size: 13px;
	}
	.site-btn
	{
		padding: 0 26px;
		font-size: 11px;
		letter-spacing: 0.16em;
	}
}

/*********************************
22. Festive Banner
*********************************/

/* A full-bleed band between the Jhumkas slider and Why Choose Us.

   The homepage uses the .festive_banner version: artwork only, with every word of the offer
   inside the picture. The type-led rules below it still work - swap the markup back if you
   ever want a banner with no image, or need one while an offer is being redesigned. */

/* Type-led version (no image) */

.festive
{
	position: relative;
	width: 100%;
	padding: 76px 30px;
	overflow: hidden;
}
/* a soft warm glow behind the type, so the flat band still has some depth */
.festive::after
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 900px;
	height: 900px;
	max-width: 140%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(253, 247, 231, 0.16) 0%, rgba(253, 247, 231, 0) 62%);
	content: "";
	pointer-events: none;
}
.festive_image
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
    
}
/* only dims the band when a photo has actually been put behind it */
.festive_image[style]::after
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(35, 35, 35, 0.52);
	content: "";
}
.festive_content
{
	position: relative;
	z-index: 1;
}
.festive_subtitle
{
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--brand-primary-light);
}
.festive_title
{
	margin: 14px 0 0;
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: #FFFFFF;
}
.festive_text
{
	max-width: 520px;
	margin: 16px auto 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}
.festive_button
{
	margin: 32px auto 0;
}

/* Artwork-only version - the homepage uses this one. It comes after the type rules so these
   overrides win over .festive's own padding and glow.

   The artwork is 2.54:1. Running edge to edge it stood 567px tall on a 1440 screen and
   dominated everything around it. It is now held to 1140px - the same width as every other
   section's content, so it lines up with the headings above and below - which makes it a
   449px banner with normal section spacing around it. Still the largest single thing on that
   part of the page, but no longer the whole screen.

   The 15px corner is yours; it is the only rounded surface on the site, so it is kept in one
   place here rather than repeated. */

.festive_banner
{
	--festive-radius: 15px;
	/* the sections either side already carry their own spacing, so this one only needs
	   side gutters - any vertical padding here lands on top of theirs and reads as a hole */
	padding: 0 20px;
	background: var(--brand-bg);
}
.festive_banner::after
{
	content: none;
}
.festive_banner .festive_link
{
	display: block;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	border-radius: var(--festive-radius);
	/* holds the banner's shape while the image loads, so nothing below it jumps */
	aspect-ratio: 1997 / 787;
	background: var(--brand-bg-alt);
	overflow: hidden;
}
.festive_banner img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--festive-radius);
}

/*********************************
23. Notify Me modal
*********************************/

/* Shopivana injects #NotifyModal into every page and gives its four fields the class
   .checkout-input - with a hyphen. Nothing defines that class: not Bootstrap, not
   product.css, not this file. It looks like a slip for the theme's .checkout_input (with an
   underscore), which only lives in checkout.css, and the product page never loads that. With
   no rule at all the fields fall back to the browser's default input width of about twenty
   characters, which is the narrow column in the middle of a 500px modal.

   Every other modal on the store (review, return/cancel, coupon list) uses Bootstrap's
   .form-control, which already carries width: 100%. This one is the odd one out, so
   everything below stays inside #NotifyModal and no shared class is touched. */

/* The markup carries .modal-dialog-centered, but this theme ships a Bootstrap old enough
   that the class does not exist in its stylesheet - the modal has never actually been
   centred, it just sat 30px from the top. The centring is supplied here instead, the same
   way Bootstrap does it, and the 60px / 20px are its own top and bottom margins. */
#NotifyModal .modal-dialog
{
	display: flex;
	align-items: center;
	min-height: calc(100% - 60px);
	width: calc(100% - 32px);
	max-width: 560px;
	/* vertical margin is left to Bootstrap; only the horizontal centring is taken over */
	margin-left: auto;
	margin-right: auto;
}
#NotifyModal .modal-content
{
	width: 100%;		/* it is a flex item now, so it would otherwise shrink to its content */
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: 4px;
	box-shadow: var(--shadow-soft);
}

/* Header */

#NotifyModal .modal-header
{
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid var(--brand-border);
}
#NotifyModal .modal-title
{
	font-family: var(--font-body);
	font-size: 12px !important;	/* the markup sets 1rem inline on this element */
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-heading);
}
#NotifyModal .modal-header .close
{
	margin: 0;
	padding: 0 4px;
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	color: var(--brand-muted);
	opacity: 1;
	text-shadow: none;
}
#NotifyModal .modal-header .close:hover
{
	color: var(--brand-heading);
}

/* Fields. The body keeps Bootstrap's .p-4 (24px), which is already the right gutter. */

#NotifyModal .form-group
{
	margin-bottom: 14px;
}
#NotifyModal .form-group:last-child
{
	margin-bottom: 0;
}
#NotifyModal .checkout-input
{
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 16px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--brand-text);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
	transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
#NotifyModal textarea.checkout-input
{
	/* the markup sets height:100px and padding-top:10px inline, so min-height is what
	   actually decides the box and padding-bottom is set here to balance it */
	min-height: 110px;
	padding-bottom: 12px;
	line-height: 1.6;
	resize: vertical;
}
#NotifyModal .checkout-input:focus
{
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 3px rgba(147, 124, 111, 0.12);
}
#NotifyModal .checkout-input::placeholder
{
	color: var(--brand-muted);
	opacity: 1;
}
#NotifyModal .checkout-input::-webkit-input-placeholder
{
	color: var(--brand-muted);
}

/* Footer */

#NotifyModal .modal-footer
{
	padding: 16px 24px;
	border-top: 1px solid var(--brand-border);
}
#NotifyModal .modal-footer a
{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
#NotifyModal .modal-footer .site-btn
{
	height: 46px;
	padding: 0 30px;
	line-height: 44px;
}

@media only screen and (max-width: 575px)
{
	#NotifyModal .modal-dialog
	{
		min-height: calc(100% - 20px);	/* Bootstrap drops to a 10px margin down here */
	}
	#NotifyModal .modal-header,
	#NotifyModal .modal-footer
	{
		padding: 14px 18px;
	}
	#NotifyModal .modal-body
	{
		padding: 18px !important;	/* beats Bootstrap's .p-4 utility, which is !important */
	}
	#NotifyModal .checkout-input
	{
		height: 46px;
		padding: 0 14px;
	}
	#NotifyModal .modal-footer .site-btn
	{
		padding: 0 22px;
		font-size: 11px;
		letter-spacing: 0.14em;
	}
}

/*********************************
24. Past orders
*********************************/

/* Shopivana's own markup, untouched. Nothing in the theme styled this page, so it arrived as
   raw Bootstrap: gridlined table, bright blue and red pill buttons, default type.

   Everything is scoped to .past-orders-div, which Shopivana puts on both of the page's rows.
   Note for anyone editing this later: the row's .order-list-repeater class is renamed to
   .order-list-row-N for each rendered row, so nothing here may depend on it. The per-cell
   hooks (.order-no, .order-date, .order-total, .order-status, .order-bill and the rest) do
   survive, and those are what is used below. */

/* The section already carries an inline margin-top of 150px, which clears the fixed header
   on its own - section 21's padding would otherwise stack another 56px on top of it. */
.shop-cart.spad:has(.past-orders-div)
{
	padding-top: 0;
}
.past-orders-div h2
{
	font-family: var(--font-display) !important;	/* the markup sets 1.2rem/600 inline */
	font-size: 22px !important;
	font-weight: 400 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-heading);
}
.past-orders-div .reward-points-earned-div
{
	margin-bottom: 0;
	font-size: 13px;
	color: var(--brand-muted);
}
.past-orders-div .reward-points-earned
{
	font-weight: 600;
	color: var(--brand-primary-dark);
}

/* Table */

.past-orders-div .cart-table
{
	margin-top: 22px;
}
.past-orders-div table.table
{
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
.past-orders-div table.table thead th
{
	padding: 0 16px 12px;
	border: none;
	border-bottom: 1px solid var(--brand-heading);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-muted);
	vertical-align: bottom;
}
.past-orders-div table.table tbody td
{
	padding: 18px 16px;
	border: none;
	border-bottom: 1px solid var(--brand-border);
	font-size: 14px;
	color: var(--brand-text);
	vertical-align: middle;
}
.past-orders-div table.table thead th:first-child,
.past-orders-div table.table tbody td:first-child
{
	padding-left: 0;
}
.past-orders-div table.table thead th:last-child,
.past-orders-div table.table tbody td:last-child
{
	padding-right: 0;
}
.past-orders-div table.table tbody tr:hover
{
	background: var(--brand-bg-alt);
}
.past-orders-div .order-no
{
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--brand-heading);
}
.past-orders-div .order-date
{
	white-space: nowrap;
	color: var(--brand-muted);
}
.past-orders-div .order-total
{
	font-weight: 600;
	white-space: nowrap;
	color: var(--brand-primary-dark);
}
.past-orders-div .order-remark
{
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-style: normal;
	line-height: 1.5;
	color: var(--brand-muted);
}

/* Status. Shopivana picks one of exactly four Bootstrap badge classes from the order status,
   so each is toned down to a tinted chip rather than a saturated pill - the colour still
   carries the meaning, it just stops shouting over the rest of the page. */

.past-orders-div .badge
{
	display: inline-block;
	padding: 6px 12px;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}
.past-orders-div .badge:empty
{
	display: none;
}
.past-orders-div .badge-info
{
	background: rgba(18, 102, 106, 0.10);
	color: var(--brand-teal);
}
.past-orders-div .badge-success
{
	background: rgba(46, 125, 50, 0.10);
	color: #2e7d32;
}
.past-orders-div .badge-warning
{
	background: rgba(150, 103, 23, 0.12);
	color: #8a5d12;
}
.past-orders-div .badge-danger
{
	background: rgba(180, 59, 44, 0.10);
	color: #b43b2c;
}

/* Row actions. Shopivana hides the ones that do not apply with .d-none, which is !important,
   so the display below never fights it. */

.past-orders-div td .btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 16px;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: none;
	-webkit-transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
	transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.past-orders-div td .btn:last-child
{
	margin-right: 0 !important;	/* the markup puts Bootstrap's .mr-2 on every button */
}
/* the buttons carry .mb-2, which leaves a gap under the last row of them */
.past-orders-div td .justify-content-between
{
	margin-bottom: -8px;
}
.past-orders-div .order-review,
.past-orders-div .order-bill
{
	background: transparent;
	border: 1px solid var(--brand-border);
	color: var(--brand-heading);
}
.past-orders-div .order-review:hover,
.past-orders-div .order-bill:hover
{
	background: var(--brand-primary-dark);
	border-color: var(--brand-primary-dark);
	color: #FFFFFF;
}
.past-orders-div .order-cancel,
.past-orders-div .order-return
{
	background: transparent;
	border: 1px solid rgba(180, 59, 44, 0.35);
	color: #b43b2c;
}
.past-orders-div .order-cancel:hover,
.past-orders-div .order-return:hover
{
	background: #b43b2c;
	border-color: #b43b2c;
	color: #FFFFFF;
}

@media only screen and (max-width: 991px)
{
	/* five columns stop fitting; the panel scrolls rather than crushing the action buttons */
	.past-orders-div .cart-table
	{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.past-orders-div table.table
	{
		min-width: 720px;
	}
}
@media only screen and (max-width: 767px)
{
	.past-orders-div h2
	{
		font-size: 19px !important;
	}
	.past-orders-div .reward-points-earned-div
	{
		font-size: 12px;
	}
	.past-orders-div table.table tbody td
	{
		padding: 14px 12px;
	}
}

/*********************************
25. Policy and story pages
*********************************/

/* Privacy Policy, Return & Refund Policy, Terms & Conditions, Shipping Policy and The Heart of
   JhumkaGali. The Heart page uses the About page's hero (section 14), so the two match. The other
   pages share .policy_hero and .policy_body. */

.policy_hero
{
	margin-top: var(--header-height);
	padding: 48px 20px;
	background: var(--brand-bg-alt);
	text-align: center;
}
.policy_title
{
	margin: 0;
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-heading);
}
.policy_breadcrumbs
{
	margin-top: 18px;
}
.policy_breadcrumbs ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}
.policy_breadcrumbs ul li
{
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
}
.policy_breadcrumbs ul li::after
{
	content: '/';
	margin: 0 10px;
	opacity: 0.6;
}
.policy_breadcrumbs ul li:last-child::after
{
	display: none;
}
.policy_breadcrumbs ul li a
{
	color: inherit;
	transition: color 200ms ease;
}
.policy_breadcrumbs ul li a:hover
{
	color: var(--brand-heading);
}

.policy_body
{
	max-width: 760px;
	margin: 0 auto;
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}
.policy_body h2
{
	margin: 48px 0 14px;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--brand-heading);
}
.policy_body h3
{
	margin: 30px 0 10px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-primary-dark);
}
.policy_body p
{
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.85;
	color: var(--brand-text);
}
.policy_body .policy_lead
{
	margin-bottom: 12px;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.55;
	color: var(--brand-heading);
}
.policy_list
{
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.policy_list li
{
	position: relative;
	margin-top: 8px;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--brand-text);
}
.policy_list li::before
{
	content: '';
	position: absolute;
	left: 0;
	top: 13px;
	width: 14px;
	height: 1px;
	background: var(--brand-primary);
}
.policy_contact
{
	margin: 0 0 22px;
	padding: 20px 26px;
	border-left: 2px solid var(--brand-primary);
	background: var(--brand-surface);
	font-style: normal;
	font-size: 15px;
	line-height: 1.9;
	color: var(--brand-text);
}
.policy_body .policy_note
{
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--brand-border);
	font-size: 14px;
	color: var(--brand-muted);
}

/* The Heart page */

.policy_story .policy_lead
{
	margin-bottom: 8px;
	font-size: 26px;
	line-height: 1.5;
	text-align: center;
}
.policy_story h3
{
	margin-top: 34px;
}

/* Footer: policy links, under the main footer links */

.footer_policies
{
	margin-top: 26px;
}
.footer_policies ul
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer_policies ul li a
{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-muted);
	transition: color 200ms ease;
}
.footer_policies ul li a:hover
{
	color: var(--brand-heading);
}

@media only screen and (max-width: 767px)
{
	.policy_hero
	{
		padding: 32px 16px;
	}
	.policy_title
	{
		font-size: 28px;
	}
	.policy_body
	{
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.policy_body h2
	{
		margin-top: 40px;
		font-size: 22px;
	}
	.policy_body p,
	.policy_list li
	{
		font-size: 15px;
	}
	.policy_body .policy_lead
	{
		font-size: 20px;
	}
	.policy_story .policy_lead
	{
		font-size: 22px;
	}
	.policy_contact
	{
		padding: 18px 20px;
	}
}

/*********************************
Reduced motion
*********************************/

@media (prefers-reduced-motion: reduce)
{
	*,
	*::before,
	*::after
	{
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}