/* ----------------------------------------------------------------
	Canvas: Pottery Shop
-----------------------------------------------------------------*/


:root {
	/* Dark - Defult */
	--cnvs-themecolor: #F8F6EE;
	--cnvs-themecolor-rgb: 248, 246, 238;
	--cnvs-body-font: tenon, sans-serif;
	--cnvs-secondary-font: abril-display, serif;
}

::selection {
	background: #444 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.menu-link {
	font-weight: 400;
}

:not(.is-expanded-menu) .primary-menu.order-5 {
	border-top: var(--cnvs-primary-menu-submenu-border);
}

.slider-scroll .list-group-item {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff !important;
	color: #212529;
	border: 0;
	width: 100%;
	padding: 40px;
	margin: 0;
}

.slider-scroll .list-group-item .text-anim {
	opacity: 0;
	transform: translateY(-20px);
	--text-anim-duration: .3s;
	transition-property: opacity, transform;
	transition-duration: var(--text-anim-duration);
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: var(--text-anim-delay , 0s);
}

.slider-scroll .list-group-item.active .text-anim {
	opacity: 1;
	transform: translateY(0px);
}

.slider-scroll .list-group-content > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.img-cover {
	display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.section {
	background-color: #F8F6EE;
}

.container-fluid {
	padding: 0 8vw;
}


.dark .top-cart-content {
	background-color: var(--cnvs-themecolor);
}

.dark .top-cart-title {
	border-bottom-color: rgba(0,0,0,0.1);
}

.dark .top-cart-item:not(:first-child),
.dark .top-cart-action {
	border-top-color: rgba(0,0,0,0.1);
}

.dark .top-cart-item-image:not(:hover) {
	border-color: rgba(0,0,0,0.1);
}

.dark .top-cart-item-desc a {
	color: #111;
}

.dark .top-cart-item-desc a:hover {
	color: #000;
}

.dark .top-cart-item-price,
.dark .top-cart-item-quantity {
	color: #111;
}

.mfp-fade.mfp-bg.mfp-ready {
	opacity: .3;
}


@media (min-width: 992px) {

	#header + .include-header.include-topbar {
		margin-top: calc( -80px - 2px - 53px ); /*  (Header-height - border-size - topbar-height) */
	}

	.menu-link {
		font-weight: 400;

	}

	.header-misc .menu-link {
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: 0.75rem;
		font-weight: 600;
	}

}

/* ----------------------------------------------------------------
	ADDITIVE — what the CMS needs and a flat file cannot have

	Everything above this line is the design's own stylesheet, ported
	unchanged. Below are only the surfaces WordPress draws and the
	reference does not: the store's cart, checkout and product pages,
	the journal archive and single, and the states a live menu has.
	Values come from the design's own tokens, never from new ones.
-----------------------------------------------------------------*/

/* The design draws its bar over the hero only, where the cream theme colour
   is the legible hover and current state. Every other view renders the same
   bar on white, so those states follow the theme's own contrast scale there. */
.shop-2 #header:not(.dark) {
	--cnvs-primary-menu-hover-color: var(--cnvs-contrast-900);
}

/* Product single, cart, checkout and the catalogue archives: the design's
   button, price and heading vocabulary applied to the controls WooCommerce
   renders. `.button` styling is the theme's; only the family is named here. */
.shop-2 .product-title h3 a,
.shop-2 .product_title,
.shop-2 .woocommerce-loop-product__title {
	font-family: var(--cnvs-body-font);
	font-weight: 400;
}

.shop-2 .single_add_to_cart_button,
.shop-2 .shop-2-cart a.button,
.shop-2 .shop-2-cart button.button,
.shop-2 .shop-2-checkout #place_order,
.shop-2 .shop-2-checkout button.button {
	font-weight: 400;
}

.shop-2 .shop-2-cart .order-total .amount,
.shop-2 .shop-2-checkout .order-total .amount {
	font-weight: 600;
}

/* The journal: the archive cards and the single article take the design's own
   measure and its secondary display face for the headline. */
.shop-2 .entry-title h2,
.shop-2 .entry-title h3,
.shop-2 .entry-title h4 {
	font-weight: 400;
}

.shop-2 .single-post .entry-title h1,
.shop-2 .page-title h1 {
	font-family: var(--cnvs-secondary-font);
	font-weight: 400;
}

/* The design gives no rule for the theme's `.entry` card shadow, and a shadow
   under a flat, cream-banded layout reads as a different design. */
.shop-2 .entry,
.shop-2 .single .entry {
	box-shadow: none;
}

/* WordPress writes the file's own width and height on every image it renders
   from the media library. The theme undoes that for an editor image and for a
   featured image, each keyed on its own marker class; an image rendered from
   the catalogue carries neither, and this design's product card has no framed
   `.product-image` box for the store's own rule to reach. Stated at :where()
   weight, so any design rule still wins. */
.shop-2 :where(img[class*="size-"]) {
	height: auto;
}

/* The catalogue pages show every product, not the three photographs the
   reference hand-picked, so their pictures arrive at whatever proportions they
   were uploaded at and a row of cards would not line up. The store's own
   picture shape (Theme Options -> Shop -> Catalogue) is applied by a rule
   scoped to the `.product-image` box this design's card does not have, so the
   card image is given the same two properties directly. Scoped to the
   catalogue grid, so the reference's own product band keeps its pictures at
   their natural proportions. */
.shop-2 .shop-2-catalogue > div > a > img {
	aspect-ratio: var(--cnvs-product-card-ratio, auto);
	object-fit: var(--cnvs-product-card-fit, cover);
}