/*
Theme Name: Shopvane
Theme URI: https://saifbrand.com/shopvane/
Author: SaifBrand
Author URI: https://saifbrand.com/
Description: Shopvane is a fast, lightweight multipurpose WooCommerce theme for book stores, fashion boutiques and general online shops. It ships with a full-width hero slider, four product card styles, category tiles, editorial banners, a sticky mobile bottom bar and an app-like mobile experience, all built with hand-written CSS - no page builder markup and no jQuery, so pages stay small and fast. Every colour, font, layout and button label is editable from the Customizer with live preview, and every page works with both the default WordPress block editor and Elementor.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shopvane
Tags: e-commerce, blog, one-column, two-columns, right-sidebar, left-sidebar, custom-colors, custom-logo, custom-menu, featured-images, block-patterns, block-styles, full-width-template, editor-style, footer-widgets, sticky-post, theme-options, threaded-comments, translation-ready, rtl-language-support, wide-blocks

Shopvane is distributed under the terms of the GNU GPL v2 or later.

This theme bundles no third-party code. Resources bundled with the theme and
their licences are listed in readme.txt.
*/

/* =========================================================================
   1. Design tokens
   Every token below can be overwritten from the Customizer. The values here
   are only the fallbacks used before any customisation is saved, so the theme
   still looks finished on a brand new install.
   ========================================================================= */

:root {
	/* Brand */
	--sv-primary: #0f766e;
	--sv-primary-hover: #115e59;
	--sv-primary-contrast: #ffffff;
	--sv-ink: #16181d;
	--sv-accent: #d92d20;

	/* Text */
	--sv-text: #1f2328;
	--sv-text-muted: #6b7280;
	--sv-text-light: #9aa1ab;
	--sv-heading: #16181d;
	--sv-link: var(--sv-primary);
	--sv-link-hover: var(--sv-primary-hover);

	/* Surfaces */
	--sv-body-bg: #ffffff;
	--sv-surface: #f7f7f5;
	--sv-surface-2: #eeefec;
	--sv-border: #e6e8eb;
	--sv-border-strong: #d3d7dd;

	/* Type */
	--sv-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--sv-font-heading: var(--sv-font-body);
	--sv-font-size: 16px;
	--sv-line-height: 1.7;
	--sv-heading-weight: 700;
	--sv-heading-line-height: 1.25;
	--sv-heading-spacing: 0em;
	--sv-heading-transform: none;

	/* Layout */
	--sv-container: 1240px;
	--sv-container-narrow: 780px;
	--sv-gutter: 20px;
	--sv-section-space: 64px;
	--sv-radius: 10px;
	--sv-radius-sm: 6px;
	--sv-radius-pill: 999px;

	/* Elevation */
	--sv-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
	--sv-shadow: 0 4px 16px rgba(16, 24, 40, .08);
	--sv-shadow-lg: 0 18px 48px rgba(16, 24, 40, .14);

	/* Controls */
	--sv-btn-radius: 8px;
	--sv-btn-padding-y: 12px;
	--sv-btn-padding-x: 22px;
	--sv-btn-weight: 600;
	--sv-btn-transform: none;
	--sv-btn-spacing: 0em;

	/* Motion - respected by every transition in the theme */
	--sv-ease: cubic-bezier(.22, .61, .36, 1);
	--sv-speed: .25s;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sv-speed: 0s;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   2. Reset
   Small on purpose. Only the rules that actually change something are here;
   anything a modern browser already does correctly is left alone.
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchors (funnel pages jump to #checkout) must clear the sticky header. */
	scroll-padding-top: var(--sv-scroll-offset, 24px);
}

body {
	margin: 0;
	background: var(--sv-body-bg);
	color: var(--sv-text);
	font-family: var(--sv-font-body);
	font-size: var(--sv-font-size);
	line-height: var(--sv-line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--sv-heading);
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-heading-weight);
	line-height: var(--sv-heading-line-height);
	letter-spacing: var(--sv-heading-spacing);
	text-transform: var(--sv-heading-transform);
	overflow-wrap: break-word;
}

h1 { font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; }

p, ul, ol, dl, pre, table, blockquote, figure, address {
	margin: 0 0 1.15em;
}

:where(p, li, dd):last-child {
	margin-bottom: 0;
}

a {
	color: var(--sv-link);
	text-decoration: none;
	transition: color var(--sv-speed) var(--sv-ease);
}

a:hover,
a:focus {
	color: var(--sv-link-hover);
}

/* Content links stay underlined - inside prose an underline is the only
   reliable affordance once a theme colour happens to be low contrast. */
.sv-prose a:not(.sv-btn):not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

img, svg, video, iframe, canvas, embed, object {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

img[width][height] {
	height: auto;
}

/* No global fill here on purpose.

   A CSS declaration always beats an SVG presentation attribute, so a rule like
   "svg { fill: currentColor }" silently overrides the fill="none" that every
   outline icon in inc/icons.php sets - turning the whole line-icon set into
   solid blobs. Each icon carries its own fill and stroke attributes instead. */

figure {
	margin-inline: 0;
}

blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-inline-start: 3px solid var(--sv-primary);
	color: var(--sv-heading);
	font-size: 1.08em;
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .92em;
}

code {
	padding: .15em .4em;
	border-radius: 4px;
	background: var(--sv-surface-2);
}

pre {
	padding: 18px;
	overflow: auto;
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	line-height: 1.55;
}

hr {
	height: 0;
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--sv-border);
}

table {
	width: 100%;
	border-collapse: collapse;
	text-align: start;
}

th, td {
	padding: 10px 12px;
	border: 1px solid var(--sv-border);
}

th {
	background: var(--sv-surface);
	font-weight: 600;
}

/* =========================================================================
   3. Forms and buttons
   ========================================================================= */

input, select, textarea, button {
	font: inherit;
	color: inherit;
}

/* :where() gives these zero specificity on purpose.

   Written plainly, the selector below scores higher than a component rule like
   ".single-product form.cart .quantity input.qty", because each :not(...)
   contributes its argument's specificity - five attribute selectors is a lot.
   The result was that the base "width: 100%" beat the 74px quantity box and
   stretched it across the whole column. Wrapping the match in :where() keeps the
   defaults but lets any component rule win without needing !important. */
:where(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])),
:where(select),
:where(textarea) {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-body-bg);
	color: var(--sv-text);
	transition: border-color var(--sv-speed) var(--sv-ease), box-shadow var(--sv-speed) var(--sv-ease);
}

:where(input, select, textarea):focus {
	outline: 0;
	border-color: var(--sv-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-primary) 18%, transparent);
}

textarea {
	min-height: 150px;
	resize: vertical;
}

label {
	display: inline-block;
	margin-bottom: 6px;
	font-size: .9rem;
	font-weight: 600;
}

::placeholder {
	color: var(--sv-text-light);
	opacity: 1;
}

.sv-btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--sv-btn-padding-y) var(--sv-btn-padding-x);
	border: 1px solid transparent;
	border-radius: var(--sv-btn-radius);
	background: var(--sv-primary);
	color: var(--sv-primary-contrast);
	font-weight: var(--sv-btn-weight);
	font-size: .95rem;
	line-height: 1.35;
	letter-spacing: var(--sv-btn-spacing);
	text-transform: var(--sv-btn-transform);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--sv-speed) var(--sv-ease), color var(--sv-speed) var(--sv-ease),
		border-color var(--sv-speed) var(--sv-ease), transform var(--sv-speed) var(--sv-ease),
		box-shadow var(--sv-speed) var(--sv-ease);
}

.sv-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--sv-primary-hover);
	color: var(--sv-primary-contrast);
	transform: translateY(-1px);
	box-shadow: var(--sv-shadow-sm);
}

.sv-btn:disabled,
button:disabled,
.sv-btn.is-disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.sv-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--sv-primary);
}

.sv-btn--outline:hover {
	background: var(--sv-primary);
	border-color: var(--sv-primary);
	color: var(--sv-primary-contrast);
}

.sv-btn--ink {
	background: var(--sv-ink);
	color: #fff;
}

.sv-btn--ink:hover {
	background: color-mix(in srgb, var(--sv-ink) 82%, #fff);
	color: #fff;
}

.sv-btn--light {
	background: #fff;
	color: var(--sv-ink);
}

.sv-btn--light:hover {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.sv-btn--sm {
	padding: 8px 14px;
	font-size: .85rem;
}

.sv-btn--block {
	width: 100%;
}

/* Icon-only control (cart, search, drawer toggle). Fixed square so a long
   translated label can never stretch it out of the header row. */
.sv-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--sv-radius-sm);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--sv-speed) var(--sv-ease), color var(--sv-speed) var(--sv-ease);
}

.sv-icon-btn:hover,
.sv-icon-btn:focus-visible {
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
	transform: none;
	box-shadow: none;
}

.sv-icon-btn svg {
	width: 22px;
	height: 22px;
}

/* =========================================================================
   4. Accessibility
   ========================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sv-primary);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	inset-inline-start: 8px;
	width: auto;
	height: auto;
	padding: 14px 22px;
	clip: auto;
	clip-path: none;
	border-radius: var(--sv-radius-sm);
	background: var(--sv-body-bg);
	box-shadow: var(--sv-shadow);
	color: var(--sv-primary);
	font-weight: 700;
	text-decoration: none;
}

/* =========================================================================
   5. Layout primitives
   ========================================================================= */

.sv-container {
	width: 100%;
	max-width: var(--sv-container);
	margin-inline: auto;
	padding-inline: var(--sv-gutter);
}

.sv-container--narrow {
	max-width: var(--sv-container-narrow);
}

.sv-container--wide {
	max-width: min(1600px, 100%);
}

.sv-section {
	padding-block: var(--sv-section-space);
}

.sv-section--tight {
	padding-block: calc(var(--sv-section-space) * .6);
}

.sv-section--surface {
	background: var(--sv-surface);
}

.sv-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sv-content {
	flex: 1 0 auto;
}

.sv-layout {
	display: grid;
	gap: 40px;
	align-items: start;
}

@media (min-width: 992px) {
	.sv-layout--right-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.sv-layout--left-sidebar {
		grid-template-columns: 320px minmax(0, 1fr);
	}

	.sv-layout--left-sidebar .sv-main {
		order: 2;
	}
}

.sv-grid {
	display: grid;
	gap: var(--sv-grid-gap, 24px);
	grid-template-columns: repeat(var(--sv-cols-mobile, 1), minmax(0, 1fr));
}

@media (min-width: 640px) {
	.sv-grid { grid-template-columns: repeat(var(--sv-cols-tablet, 2), minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	.sv-grid { grid-template-columns: repeat(var(--sv-cols, 3), minmax(0, 1fr)); }
}

/* =========================================================================
   6. Alignment support for the block editor
   ========================================================================= */

.alignleft {
	float: left;
	margin: .3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: .3em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
	text-align: center;
}

.sv-prose > .alignwide {
	width: min(var(--sv-container), 100%);
	max-width: none;
	margin-inline: auto;
}

.sv-prose > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.sv-prose > * {
	margin-block: 0 1.15em;
}

.sv-prose > *:last-child {
	margin-bottom: 0;
}

.sticky,
.bypostauthor {
	display: block;
}

.wp-caption,
.gallery-caption {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	margin-top: .6em;
	color: var(--sv-text-muted);
	font-size: .85rem;
	text-align: center;
}

/* Utilities used by templates and patterns. */
.sv-text-center { text-align: center; }
.sv-mt-0 { margin-top: 0; }
.sv-mb-0 { margin-bottom: 0; }
.sv-hide { display: none !important; }

@media (max-width: 767px) {
	.sv-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.sv-hide-desktop { display: none !important; }
}