/******************************************************************
  Template Name: Male Fashion
  Description: Male Fashion - ecommerce teplate
  Author: Colorib
  Author URI: https://www.colorib.com/
  Version: 1.0
  Created: Colorib 
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Intagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: var(--font-body);
	font-weight: var(--font-body-weight);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--color-dark);
	font-weight: var(--font-heading-weight);
	font-family: var(--font-heading);
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: var(--font-body);
	color: var(--color-text);
	font-weight: var(--font-body-weight);
	line-height: 25px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: var(--color-white);
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 45px;
	text-align: center;
}

.section-title span {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	display: block;
}

.section-title h2 {
	color: var(--color-dark);
	font-weight: 700;
	line-height: 46px;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
	background: #ffffff;
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(204, 204, 204, 1) 62%, rgba(255, 255, 255, 1) 100%);
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	text-transform: uppercase;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	color: var(--btn-primary-color);
	background: var(--btn-primary-bg);
	border-radius: var(--btn-radius);
	letter-spacing: var(--btn-letter-spacing);
	transition: background var(--btn-transition);
}

.site-btn {
	font-size: var(--btn-font-size);
	color: var(--btn-primary-color);
	background: var(--btn-primary-bg);
	font-weight: var(--btn-font-weight);
	border: none;
	border-radius: var(--btn-radius);
	text-transform: uppercase;
	display: inline-block;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	transition: background var(--btn-transition);
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: var(--color-loader-bg);
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid var(--color-loader-a);
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid var(--color-loader-b);
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid var(--color-loader-a);
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid var(--color-loader-a);
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid var(--color-loader-b);
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid var(--color-loader-a);
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: 0 0;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header {
	background: var(--header-bg);
}

.header__top {
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-border-color);
	padding: 10px 0;
}

.header__top__left p {
	color: var(--header-text);
	margin-bottom: 0;
}

.header__top__right {
	text-align: right;
}

.header__top__links {
	display: inline-block;
	margin-right: 25px;
}

.header__top__links a {
	color: var(--header-text);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-right: 28px;
	display: inline-block;
}

.header__top__links a:last-child {
	margin-right: 0;
}

.header__top__hover {
	display: inline-block;
	position: relative;
}

.header__top__hover:hover ul {
	top: 24px;
	opacity: 1;
	visibility: visible;
}

.header__top__hover span {
	color: var(--header-text);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	display: inline-block;
	cursor: pointer;
}

.header__top__hover span i {
	font-size: 20px;
	position: relative;
	top: 3px;
	right: 2px;
}

.header__top__hover ul {
	background: var(--color-white);
	display: inline-block;
	padding: 2px 0;
	position: absolute;
	left: 0;
	top: 44px;
	opacity: 0;
	visibility: hidden;
	z-index: 3;
	-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__top__hover ul li {
	list-style: none;
	font-size: 13px;
	color: var(--color-dark);
	padding: 2px 15px;
	cursor: pointer;
}

.header__logo {
	display: flex;
	align-items: center;
	min-height: var(--header-height);
}

.header__logo a {
	display: inline-block;
}

/* Capped to the header-height token so an admin dropping in a differently
   sized logo file can't silently grow the whole header — it just scales
   down to fit, and .header__logo's flex centering keeps it vertically
   centered regardless of its actual aspect ratio. */
.header__logo img {
	max-height: calc(var(--header-height) - 40px);
	width: auto;
}

.header__menu {
	text-align: center;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--header-height);
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 45px;
	position: relative;
}

.header__menu ul li.active a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover .dropdown {
	top: 32px;
	opacity: 1;
	visibility: visible;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 56px;
	width: 150px;
	background: var(--color-dark);
	text-align: left;
	padding: 5px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: var(--color-white);
	font-weight: 400;
	padding: 5px 20px;
	text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 18px;
	color: var(--header-text);
	display: block;
	font-weight: 600;
	position: relative;
	padding: 3px 0;
}

.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-primary);
	content: "";
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.header__nav__option {
	text-align: right;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: var(--header-height);
}

.header__nav__option a {
	display: inline-block;
	margin-right: 26px;
	position: relative;
}

.header__nav__option img {
	filter: var(--header-icon-filter);
}

.header__nav__option a span {
	color: var(--header-text);
	font-size: 11px;
	position: absolute;
	left: 5px;
	top: 8px;
}

.header__nav__option a:last-child {
	margin-right: 0;
}

.header__nav__option .price {
	font-size: 15px;
	color: var(--color-dark);
	font-weight: 700;
	display: inline-block;
	margin-left: -20px;
	position: relative;
	top: 3px;
}

/* Cart links (header, offcanvas sidebar, mobile shortcut) use a real cart
   glyph instead of the template's bag-shaped PNG, with the count badge
   drawn as a small bubble so it stays legible over the icon's open lines. */
.cart-icon-link i {
	font-size: 20px;
	color: var(--header-text);
	line-height: 1;
}

.header__nav__option a.cart-icon-link span[data-cart-badge],
.offcanvas__nav__option a.cart-icon-link span[data-cart-badge] {
	left: auto;
	top: -8px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	padding: 0 3px;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
	border-radius: 50%;
	text-align: center;
}

.offcanvas__nav__option a.cart-icon-link span[data-cart-badge] {
	background: var(--color-dark);
}

.offcanvas-menu-wrapper {
	display: none;
}

.canvas__open {
	display: none;
}

.mobile-cart-shortcut {
	display: none;
}

/*---------------------
  Hero
-----------------------*/

.hero__slider.owl-carousel .owl-item.active .hero__text h6 {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text p {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-nav button {
	font-size: 36px;
	color: var(--color-white);
	text-shadow: var(--text-shadow-soft);
	position: absolute;
	left: 75px;
	top: 50%;
	margin-top: -18px;
	line-height: 29px;
	z-index: 2;
}

.hero__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 75px;
}

/* Fully commercial site now, not corporate — the hero is a strip that gets
   you to the products, not a full-viewport statement. Vertically centered
   via flex (rather than the old fixed padding-top, tuned for the old
   800px-tall box) so the text column stays centered at any viewport height
   the 60vh box ends up resolving to. */
.hero__items {
	position: relative;
	height: 60vh;
	min-height: 420px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Dark scrim behind the text column — combined with the text-shadow tokens
   below, this guarantees the hero copy stays readable no matter how light,
   dark or busy the slide's photo (or video, see .hero__video) is. Fades out
   toward the right so the image itself still shows through clearly. */
.hero__items:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, var(--overlay-scrim-strong) 0%, var(--overlay-scrim-soft) 55%, rgba(0, 0, 0, 0) 100%);
}

/* Optional per-slide background video (templates/data.php $site['hero_videos'],
   rendered in index.php): sits above the scrim's z-index base but the .container
   above raises text further still, so video < scrim-visually-behind-text is
   avoided by simply stacking video under the text column, above the plain
   background image it plays over. Left out of the DOM entirely when a slide
   has no video src, so the existing set-bg image is the whole background. */
/* Racing stripes behind the text column: two hard-edged diagonal bands (110deg
   — a slight forward lean, like a racing livery) confined to the left side of
   the slide where .hero__text sits. Painted after (so visually on top of)
   the scrim above, but still below .container's z-index:2 text. Width is
   capped so the stripes stay a graphic accent behind the copy rather than
   crossing into the photo on the right. */
.hero__items:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 48%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(110deg,
		transparent 0%, transparent 34%,
		var(--hero-stripe-gray) 34%, var(--hero-stripe-gray) 52%,
		transparent 52%, transparent 60%,
		var(--color-primary) 60%, var(--color-primary) 65%,
		transparent 65%, transparent 100%);
	opacity: 0.9;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero__items .container {
	position: relative;
	z-index: 2;
}

.hero__text h6 {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 28px;
	position: relative;
	top: 100px;
	opacity: 0;
	text-shadow: var(--text-shadow-soft);
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.hero__text h2 {
	color: var(--color-white);
	font-size: 48px;
	font-weight: 700;
	line-height: 58px;
	margin-bottom: 30px;
	position: relative;
	top: 100px;
	opacity: 0;
	text-shadow: var(--text-shadow-strong);
	-webkit-transition: all, 0.6s;
	-o-transition: all, 0.6s;
	transition: all, 0.6s;
}

.hero__text p {
	color: var(--color-white);
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 35px;
	position: relative;
	top: 100px;
	opacity: 0;
	text-shadow: var(--text-shadow-soft);
	-webkit-transition: all, 0.9s;
	-o-transition: all, 0.9s;
	transition: all, 0.9s;
}

.hero__text .primary-btn {
	position: relative;
	top: 100px;
	opacity: 0;
	-webkit-transition: all, 1.1s;
	-o-transition: all, 1.1s;
	transition: all, 1.1s;
}

.hero__text .primary-btn span {
	font-size: 20px;
	position: relative;
	top: 4px;
	font-weight: 700;
}

.hero__social {
	margin-top: 24px;
}

.hero__social a {
	font-size: 16px;
	color: var(--color-white);
	text-shadow: var(--text-shadow-soft);
	display: inline-block;
	margin-right: 32px;
}

.hero__social a:last-child {
	margin-right: 0;
}

/*---------------------
  About pitch (index.php, between Hero and Info)
-----------------------*/

/* The site is fully commercial now, not corporate — the pitch/highlights
   copy doesn't belong on the homepage. Kept in the markup (and data.php)
   instead of removed in case it's wanted back for another page later. */
.about-pitch {
	display: none;
}

.about-pitch__pic img {
	width: 100%;
	border-radius: 4px;
}

/* Bootstrap stacks the .col-lg-6 image/text columns below lg (992px) with no
   vertical gap of their own — without this the text runs straight against
   the bottom edge of the photo above it. */
@media (max-width: 991px) {
	.about-pitch__pic {
		margin-bottom: 30px;
	}
}

.about-pitch__text h2 {
	margin-bottom: 20px;
}

.about-pitch__text p {
	margin-bottom: 20px;
}

.about-pitch__highlights {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}

.about-pitch__highlights li {
	margin-bottom: 10px;
	color: var(--color-text);
}

.about-pitch__highlights li i {
	color: var(--color-success);
	margin-right: 10px;
}

/*---------------------
  Info (index.php "Información útil")
-----------------------*/

/* .info.spad (two classes) beats the plain .spad rule's specificity
   regardless of stylesheet order, so this always wins without touching
   .spad itself (shared by every other section on the site). Tight padding
   on purpose — this section sits directly under the now-60vh hero and is
   meant to read as a continuation of it, not a separate block. */
.info.spad {
	padding-top:25px;
	padding-bottom: 0;
}

.info .section-title {
	display: none;
}

.info {
	background: var(--color-light-bg);
	background-image: url('../img/banner/bg-pattern.jpg');
}

.info__item {
	text-align: center;
	margin-bottom: 30px;
}

.info__item i {
	display: block;
	font-size: 36px;
	color: var(--btn-accent-color);
	margin-bottom: 18px;
}

.info__item h4 {
	color: var(--color-white);
	font-weight: 700;
	margin-bottom: 10px;
}

.info__item p {
	margin-bottom: 0;
	color: var(--color-white);
}

/*---------------------
  Hero search (index.php, just above "Ofertas destacadas") — the highest-
  visual-weight search field on the site: full-width band, oversized input,
  bold placeholder. Posts straight to product.php's existing ?q= filter
  (filterProductsByQuery() in templates/data.php), same as every other
  search entry point on the site.
-----------------------*/

.hero-search {
	padding: 55px 0 15px;
}

.hero-search__form {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}

.hero-search__form input {
	width: 100%;
	height: 68px;
	font-size: 20px;
	font-weight: 700;
	color: var(--input-color);
	background: var(--input-bg);
	border: 2px solid var(--input-border-color);
	border-radius: var(--input-radius);
	padding: 0 68px 0 28px;
}

.hero-search__form input:focus {
	outline: none;
	border-color: var(--color-primary);
}

.hero-search__form input::placeholder {
	color: var(--color-text-muted);
	font-weight: 600;
}

.hero-search__form button {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 68px;
	border: none;
	border-radius: 0 var(--input-radius) var(--input-radius) 0;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 24px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.hero-search__form button:hover {
	opacity: 0.88;
}

/*---------------------
  Product carousel (index.php "Ofertas destacadas" / "Últimos ingresos") —
  render_product_card() from templates/data.php, called with colClass
  'swiper-slide' so each card is a plain Swiper slide instead of a
  Bootstrap grid column.
-----------------------*/

.product-carousel {
	overflow: hidden;
}

/* Room below the slides for the pagination dots. */
.product-carousel__swiper {
	padding-bottom: 45px;
}

.product-carousel__swiper .swiper-wrapper {
	align-items: stretch;
}

.product-carousel__swiper .swiper-slide {
	height: auto;
}

.product-carousel__swiper .swiper-slide .product__item {
	height: 100%;
	margin-bottom: 0;
}

.product-carousel .swiper-button-next,
.product-carousel .swiper-button-prev {
	color: var(--color-dark);
}

.product-carousel .swiper-button-next:after,
.product-carousel .swiper-button-prev:after {
	font-size: 22px;
}

.product-carousel .swiper-pagination-bullet-active {
	background: var(--color-primary);
}

/*---------------------
  Showcase (index.php, replaces the old static "Banner" tiles) — a photo
  band with a categories carousel and, below it, a smaller brands carousel.
  Both are Swiper instances (js/index-home.js); see templates/data.php for
  the 'showcase_*' config and the per-category/-brand 'image' fallback.
-----------------------*/

.showcase {
	position: relative;
	padding: 100px 0;
	background-color: var(--showcase-bg-color, var(--color-dark));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.showcase__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.showcase .container {
	position: relative;
	z-index: 1;
}

.section-title--showcase span {
	color: var(--color-primary);
}

.section-title--showcase h2 {
	color: var(--color-white);
	text-shadow: var(--text-shadow-soft);
}

.showcase__categories {
	margin-bottom: 40px;
}

.showcase__brands .swiper {
	padding-bottom: 45px;
}

/* Categories can grow to a lot of items (every "linea" in the backend), and
   Swiper's bullet pagination doesn't wrap — past a handful of slides the
   dots just overflow the container width. Arrows (kept) are enough
   navigation here, so the dots are dropped entirely rather than capped. */
.showcase__categories .swiper {
	padding-bottom: 0;
}

.showcase__categories .swiper-pagination {
	display: none;
}

.showcase__card {
	display: block;
	text-align: center;
	color: var(--color-white);
}

.showcase__card__pic {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 0px;
	overflow: hidden;
	margin-bottom: 14px;
	background: var(--color-dark-alt);
}

.showcase__card__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.showcase__card:hover .showcase__card__pic img {
	transform: scale(1.08);
}

.showcase__card__label {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	text-shadow: var(--text-shadow-soft);
}

.showcase__brand {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	border-radius: 0px;
	padding: 14px;
}

.showcase__brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.75;
	transition: all 0.3s ease;
}

.showcase__brand:hover img {
	filter: none;
	opacity: 1;
}

.showcase .swiper-button-next,
.showcase .swiper-button-prev {
	color: var(--color-white);
}

.showcase .swiper-pagination-bullet {
	background: var(--color-white);
	opacity: 0.6;
}

.showcase .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--color-primary);
}

/*---------------------
  Filter pills (product.php) — small circular category/brand shortcuts above
  the product grid, in addition to the sidebar accordion filters. Plain CSS
  horizontal scroll strip (no carousel JS/library — see .pill-row below), so
  every category/marca is always reachable regardless of how many there are.
-----------------------*/

.filter-pills {
	padding: 40px 0 10px;
}

.filter-pills__block + .filter-pills__block {
	margin-top: 30px;
}

.filter-pills__title {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
}

/* A "wise height" fixed row: tall enough for one line of pills (64px photo +
   label), short enough that a long list of marcas/lineas scrolls sideways
   instead of pushing the page down. Native overflow-x scroll — works with
   touch swipe, trackpad, shift+wheel and a mouse-drag scrollbar alike,
   without any JS. scroll-snap keeps a swipe landing on a whole pill. */
.pill-row {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	height: 108px;
	padding: 4px 4px 14px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.pill-row::-webkit-scrollbar {
	height: 6px;
}

.pill-row::-webkit-scrollbar-thumb {
	background: var(--color-light-bg);
	border-radius: 3px;
}

.pill-item {
	flex: 0 0 auto;
	width: 72px;
	scroll-snap-align: start;
	display: block;
	text-align: center;
	color: var(--color-dark);
}

.pill-item__pic {
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	margin: 0 auto 8px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--color-light-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.pill-item__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pill-item:hover .pill-item__pic {
	transform: scale(1.06);
}

.pill-item.active .pill-item__pic {
	border: 10px solid var(--color-primary);
}

.pill-item__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pill-item.active .pill-item__label {
	color: var(--color-primary);
}

.blog {
	padding-bottom: 55px;
}

/*---------------------
  Categories
-----------------------*/

.categories {
	background: var(--color-light-bg);
	overflow: hidden;
	padding-top: 150px;
	padding-bottom: 125px;
}

.categories__text {
	padding-top: 40px;
	position: relative;
	z-index: 1;
}

.categories__text:before {
	position: absolute;
	left: -485px;
	top: 0;
	height: 300px;
	width: 600px;
	background: var(--color-white);
	z-index: -1;
	content: "";
}

.categories__text h2 {
	color: var(--color-text-muted);
	line-height: 72px;
	font-size: 34px;
}

.categories__text h2 span {
	font-weight: 700;
	color: var(--color-dark);
}

.categories__hot__deal {
	position: relative;
	z-index: 5;
}

.categories__hot__deal img {
	min-width: 100%;
}

.hot__deal__sticker {
	height: 100px;
	width: 100px;
	background: var(--color-dark);
	border-radius: 50%;
	padding-top: 22px;
	text-align: center;
	position: absolute;
	right: 0;
	top: -36px;
}

.hot__deal__sticker span {
	display: block;
	font-size: 15px;
	color: var(--color-white);
	margin-bottom: 4px;
}

.hot__deal__sticker h5 {
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
}

.categories__deal__countdown span {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	display: block;
}

.categories__deal__countdown h2 {
	color: var(--color-dark);
	font-weight: 700;
	line-height: 46px;
	margin-bottom: 25px;
}

.categories__deal__countdown .categories__deal__countdown__timer {
	margin-bottom: 20px;
	overflow: hidden;
	margin-left: -30px;
}

.categories__deal__countdown .categories__deal__countdown__timer .cd-item {
	width: 25%;
	float: left;
	margin-bottom: 25px;
	text-align: center;
	position: relative;
}

.categories__deal__countdown .categories__deal__countdown__timer .cd-item:after {
	position: absolute;
	right: 0;
	top: 7px;
	content: ":";
	font-size: 24px;
	font-weight: 700;
	color: var(--color-text);
}

.categories__deal__countdown .categories__deal__countdown__timer .cd-item:last-child:after {
	display: none;
}

.categories__deal__countdown .categories__deal__countdown__timer .cd-item span {
	color: var(--color-dark);
	font-weight: 700;
	display: block;
	font-size: 36px;
}

.categories__deal__countdown .categories__deal__countdown__timer .cd-item p {
	margin-bottom: 0;
}

/*---------------------
  Instagram
-----------------------*/

.instagram {
	padding-bottom: 0;
}

.instagram__pic__item {
	width: 33.33%;
	float: left;
	height: 261px;
	background-position: center center;
}

.instagram__text {
	padding-top: 130px;
}

.instagram__text h2 {
	color: var(--color-dark);
	font-weight: 700;
	margin-bottom: 30px;
}

.instagram__text p {
	margin-bottom: 65px;
}

.instagram__text h3 {
	color: var(--color-primary);
	font-weight: 700;
}

/*---------------------
  Product
-----------------------*/

.product__item {
	position: relative;
	overflow: hidden;
	margin-bottom: 40px;
	border: 1px solid #ddd;
  padding: 10px;
  background: white;
  box-shadow: 0 0 3px #bbb;
}

/* Full-card click target to detail.php — sits below the interactive quick-add/
   view icons and the add-cart link (both raised to z-index: 2) so they stay
   clickable, but covers every other pixel of the card. */
.product__item__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Subtle rubro/categoria tag shown above the product name on every card. */
.product__item__category {
	display: block;
	color: var(--color-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.product__item.sale .product__item__pic .label {
	color: var(--color-white);
	background: var(--color-dark);
}

.product__item.sale .product__item__text .rating i {
	color: #f7941d;
}

.product__item.sale .product__item__text .rating i:nth-last-child(1) {
	color: var(--color-text-muted);
}

.product__item:hover .product__item__pic .product__hover {
	right: 20px;
	opacity: 1;
}

.product__item:hover .product__item__text .product__color__select {
	opacity: 1;
}

.product__item__pic {
	height: 260px;
	position: relative;
	background-position: center center;
}

.product__item__pic .label {
	color: var(--color-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	display: inline-block;
	padding: 4px 15px 2px;
	background: var(--color-white);
	position: absolute;
	left: 0;
	top: 20px;
}

.product__item__pic .product__hover {
	position: absolute;
	right: -200px;
	top: 20px;
	z-index: 2;
	-webkit-transition: all, 0.8s;
	-o-transition: all, 0.8s;
	transition: all, 0.8s;
}

.product__item__pic .product__hover li {
	list-style: none;
	margin-bottom: 10px;
	position: relative;
}

.product__item__pic .product__hover li:hover span {
	opacity: 1;
	visibility: visible;
}

.product__item__pic .product__hover li span {
	color: var(--color-white);
	background: var(--color-dark);
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	position: absolute;
	left: -78px;
	top: 5px;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.product__item__pic .product__hover li span:after {
	position: absolute;
	right: -2px;
	top: 5px;
	height: 15px;
	width: 15px;
	background: var(--color-dark);
	content: "";
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: -1;
}

.product__item__pic .product__hover li img {
	background: var(--color-white);
	padding: 10px;
	display: inline-block;
}

.product__item__text {
	padding-top: 25px;
	position: relative;
}

.product__item__text a {
	font-size: 13px;
	color: var(--btn-accent-color);
	font-weight: var(--btn-font-weight);
	display: inline-block;
	position: relative;
	z-index: 2;
	margin-bottom: 8px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.product__item__text h6 {
	color: var(--color-dark);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 5px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.product__item__text .rating {
	margin-bottom: 6px;
}

.product__item__text .rating i {
	font-size: 14px;
	color: var(--color-text-muted);
	margin-right: -5px;
}

.product__item__text h5 {
	color: var(--color-dark-alt);
	font-weight: 700;
}

.product__item__text .product__color__select {
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 0;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.product__item__text .product__color__select label {
	display: inline-block;
	height: 12px;
	width: 12px;
	background: #5e64d1;
	border-radius: 50%;
	margin-bottom: 0;
	margin-right: 5px;
	position: relative;
	cursor: pointer;
}

.product__item__text .product__color__select label.black {
	background: #404a47;
}

.product__item__text .product__color__select label.grey {
	background: #d5a667;
}

.product__item__text .product__color__select label.active:after {
	opacity: 1;
}

.product__item__text .product__color__select label:after {
	position: absolute;
	left: -3px;
	top: -3px;
	height: 18px;
	width: 18px;
	border: 1px solid #b9b9b9;
	content: "";
	border-radius: 50%;
	opacity: 0;
}

.product__item__text .product__color__select label input {
	position: absolute;
	visibility: hidden;
}

/* Product cards render 2-up on phones (see the col-6 grid classes in
   templates/data.php's render_product_card() and its callers) — trim the
   image height and text sizes so a pair of narrow cards stays readable
   instead of looking stretched. Applies to every card grid: index.php,
   product.php and detail.php's "productos relacionados". */
@media (max-width: 575px) {
	.product__item__pic {
		height: 160px;
	}

	.product__item__text {
		padding-top: 15px;
	}

	.product__item__text h6 {
		font-size: 13px;
	}

	.product__item__text a {
		font-size: 12px;
	}

	.product__item__text h5 {
		font-size: 14px;
	}
}

/*---------------------
  Shop
-----------------------*/

.shop__sidebar {
	padding-right: 20px;
}

.shop__sidebar__search {
	margin-bottom: 45px;
}

.shop__sidebar__search form {
	position: relative;
}

/* Bigger/bolder than the shared --input-* tokens (left alone since those
   back every other input site-wide — contact, checkout, etc.) — this is the
   one field shoppers actually type a product name into, so it should read
   as the most prominent control in the sidebar. */
.shop__sidebar__search form input {
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	color: var(--input-color);
	background: var(--input-bg);
	padding-left: 24px;
	padding-right: 54px;
	border: var(--input-border-width) solid var(--input-border-color);
	border-radius: var(--input-radius);
	height: 58px;
}

.shop__sidebar__search form input:focus {
	outline: none;
	border-color: var(--input-focus-border-color);
}

.shop__sidebar__search form input::-webkit-input-placeholder {
	color: var(--color-text-muted);
}

.shop__sidebar__search form input::-moz-placeholder {
	color: var(--color-text-muted);
}

.shop__sidebar__search form input:-ms-input-placeholder {
	color: var(--color-text-muted);
}

.shop__sidebar__search form input::-ms-input-placeholder {
	color: var(--color-text-muted);
}

.shop__sidebar__search form input::placeholder {
	color: var(--color-text-muted);
}

.shop__sidebar__search form button {
	color: var(--color-text-muted);
	font-size: 20px;
	border: none;
	background: transparent;
	position: absolute;
	right: 0;
	padding: 0 18px;
	top: 0;
	height: 100%;
}

.shop__sidebar__accordion .card {
	border: none;
	border-radius: 0;
	margin-bottom: 25px;
}

.shop__sidebar__accordion .card:last-child {
	margin-bottom: 0;
}

.shop__sidebar__accordion .card:last-child .card-body {
	padding-bottom: 0;
	border-bottom: none;
}

.shop__sidebar__accordion .card-body {
	padding: 0;
	padding-top: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-border);
}

.shop__sidebar__accordion .card-heading {
	cursor: pointer;
	padding: 10px;
	position: relative;
}

.shop__sidebar__accordion .card-heading a {
	color: var(--color-dark);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	display: block;
}

.shop__sidebar__categories ul,
.shop__sidebar__price ul,
.shop__sidebar__brand ul {
	height: 225px;
}

.shop__sidebar__categories ul li,
.shop__sidebar__price ul li,
.shop__sidebar__brand ul li {
	list-style: none;
}

.shop__sidebar__categories ul li a,
.shop__sidebar__price ul li a,
.shop__sidebar__brand ul li a {
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 32px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.shop__sidebar__categories ul li a:hover,
.shop__sidebar__price ul li a:hover,
.shop__sidebar__brand ul li a:hover {
	color: var(--color-dark);
}

/* Categorías / Marcas filters: full-width, centered rows with generous
   padding and zebra striping so each option reads as a distinct, easy
   tap/click target instead of a cramped inline text list. */
.shop__sidebar__categories ul {
	height: 280px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.shop__sidebar__categories ul li {
	width: 100%;
}

.shop__sidebar__categories ul li:nth-child(odd) {
	background: rgba(0, 0, 0, 0.035);
}

.shop__sidebar__categories ul li a {
	display: block;
	width: 100%;
	text-align: center;
	padding: 12px 15px;
	line-height: 1.4;
}

.shop__sidebar__categories ul li.active a {
	color: var(--color-primary);
	font-weight: 700;
}

.shop__sidebar__brand ul {
	height: auto;
}

.shop__sidebar__price ul {
	height: auto;
}

.shop__sidebar__size {
	padding-top: 15px;
}

.shop__sidebar__size label {
	color: var(--color-dark);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	border: 1px solid var(--color-border);
	padding: 6px 25px;
	margin-bottom: 10px;
	margin-right: 5px;
	cursor: pointer;
}

.shop__sidebar__size label.active {
	background: var(--color-dark);
	color: var(--color-white);
	border-color: var(--color-dark);
}

.shop__sidebar__size label input {
	position: absolute;
	visibility: hidden;
}

.shop__sidebar__color {
	padding-top: 15px;
}

.shop__sidebar__color label {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	position: relative;
	margin-right: 10px;
	display: inline-block;
	margin-bottom: 10px;
	cursor: pointer;
}

.shop__sidebar__color label.c-1 {
	background: #0b090c;
}

.shop__sidebar__color label.c-2 {
	background: #20315f;
}

.shop__sidebar__color label.c-3 {
	background: #f1af4d;
}

.shop__sidebar__color label.c-4 {
	background: #636068;
}

.shop__sidebar__color label.c-5 {
	background: #57594d;
}

.shop__sidebar__color label.c-6 {
	background: #e8bac4;
}

.shop__sidebar__color label.c-7 {
	background: #d6c1d7;
}

.shop__sidebar__color label.c-8 {
	background: #ed1c24;
}

.shop__sidebar__color label.c-9 {
	background: var(--color-white);
}

.shop__sidebar__color label:after {
	position: absolute;
	left: -3px;
	top: -3px;
	height: 36px;
	width: 36px;
	border: 1px solid var(--color-border);
	content: "";
	border-radius: 50%;
}

.shop__sidebar__color label input {
	position: absolute;
	visibility: hidden;
}

.shop__sidebar__tags {
	padding-top: 15px;
}

.shop__sidebar__tags a {
	color: #404040;
	font-size: 13px;
	font-weight: 700;
	background: #f1f5f8;
	padding: 5px 18px;
	display: inline-block;
	text-transform: uppercase;
	margin-right: 6px;
	margin-bottom: 10px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.shop__sidebar__tags a:hover {
	background: var(--color-dark);
	color: var(--color-white);
}

.shop__sidebar__accordion .card-heading a:after,
.shop__sidebar__accordion .card-heading>a.active[aria-expanded=false]:after {
	content: "";
	font-family: "FontAwesome";
	font-size: 24px;
	font-weight: 700;
	color: var(--color-dark);
	position: absolute;
	right: 10px;
	top: 10px;
	line-height: 20px;
}

.shop__sidebar__accordion .card-heading.active a:after {
	content: "";
	font-family: "FontAwesome";
	font-size: 24px;
	font-weight: 700;
	color: var(--color-dark);
	position: absolute;
	right: 10px;
	top: 10px;
	line-height: 20px;
}

.shop__product__option {
	margin-bottom: 45px;
}

.shop__product__option p {
	color: var(--color-dark);
	margin-bottom: 0;
}

.shop__product__option__right {
	text-align: right;
}

.shop__product__option__right p {
	display: inline-block;
	margin-bottom: 0;
}

.shop__product__option__right .nice-select {
	float: none;
	display: inline-block;
	padding: 0;
	line-height: 26px;
	height: auto;
	border: none;
	padding-right: 28px;
}

.shop__product__option__right .nice-select:after {
	border-bottom: 1.5px solid var(--color-dark);
	border-right: 1.5px solid var(--color-dark);
	height: 8px;
	right: 12px;
	width: 8px;
}

.shop__product__option__right .nice-select span {
	color: var(--color-dark);
	font-size: 15px;
	font-weight: 700;
}

.shop__product__option__right .nice-select .list {
	border-radius: 0;
}

.product__pagination {
	padding-top: 25px;
	text-align: center;
}

.product__pagination a {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-dark);
	height: 30px;
	width: 30px;
	border: 1px solid transparent;
	border-radius: 50%;
	line-height: 30px;
	text-align: center;
}

.product__pagination a.active {
	border-color: var(--color-dark);
}

.product__pagination a:hover {
	border-color: var(--color-dark);
}

.product__pagination span {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-dark);
	padding-left: 10px;
	padding-right: 15px;
}

/*---------------------
  Cta (index.php "¿Querés hacer un pedido?")
-----------------------*/

.cta {
	/* --cta-bg-color/--cta-bg-image are set inline per-page from
	   $site['cta_bg_color']/['cta_bg_image'] (index.php); the dark wash
	   keeps the white text readable whether or not an image is set, and
	   falls back to a flat --color-primary background with none of it
	   configured. min-height (instead of the .spad utility's padding) keeps
	   the banner a deliberate size no matter how short the configured
	   title/text end up being, and the flex centering keeps its content
	   vertically centered inside that height.
	   cta_bg_image (index.php) sets background-image directly as an inline
	   style, not through a --custom-property read via var() here -- a
	   relative url() inside a custom property resolves against THIS
	   stylesheet's own location (css/), not the page, so it 404'd against
	   css/img/... instead of img/.... background-color still comes through
	   var() since plain colors aren't affected by that. The dark wash is a
	   separate ::before layer on top of whichever one actually painted. */
	position: relative;
	overflow: hidden;
	min-height: 340px;
	display: flex;
	align-items: center;
	padding: 60px 0;
	background-color: var(--cta-bg-color, var(--color-primary));
	background-size: cover;
	background-position: center;
}

.cta:before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.cta .container {
	position: relative;
	z-index: 1;
}

.cta h2 {
	color: var(--color-white);
	margin-bottom: 15px;
}

.cta p {
	color: var(--color-white);
	margin-bottom: 0;
}

.cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 15px;
}

@media (max-width: 991px) {
	.cta__buttons {
		justify-content: flex-start;
		margin-top: 20px;
	}
}

.site-btn--outline {
	background: transparent;
	border: var(--btn-border-width) solid var(--color-white);
}

/*---------------------
  Testimonial carousel (index.php "reseñas") — reuses .testimonial/
  .testimonial__text/.testimonial__author from the about.html two-column
  layout, but centered and full-width instead of half-width with a photo.
-----------------------*/

.testimonial--carousel .testimonial__text {
	padding: 20px 20px 10px;
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}

.testimonial--carousel .testimonial__author {
	float: none;
	display: inline-block;
}

.testimonial--carousel .testimonial__author__text {
	padding-top: 0;
	text-align: left;
}

/*---------------------
  Shop
-----------------------*/

.product__details__pic {
	text-align: center;
	background: var(--color-light-bg);
	padding: 40px 0 60px;
	margin-bottom: 100px;
}

.product__details__pic .nav-tabs {
	border-bottom: none;
	width: 105px;
}

.product__details__pic .nav-tabs .nav-item {
	margin-bottom: 10px;
}

.product__details__pic .nav-tabs .nav-item:last-child {
	margin-bottom: 0;
}

.product__details__pic .nav-tabs .nav-item .nav-link {
	padding: 0;
	display: block;
}

.product__details__pic .nav-tabs .nav-item .nav-link .product__thumb__pic {
	height: 120px;
	width: 95px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.product__details__pic .nav-tabs .nav-item .nav-link .product__thumb__pic i {
	height: 56px;
	width: 56px;
	border: 4px solid var(--color-white);
	border-radius: 50%;
	font-size: 20px;
	color: var(--color-white);
	line-height: 48px;
	display: inline-block;
	text-align: center;
}

.product__details__pic .nav-tabs .nav-item.show .nav-link,
.product__details__pic .nav-tabs .nav-link.active {
	background-color: transparent;
	border-color: transparent;
}

.product__details__breadcrumb {
	margin-bottom: 30px;
}

.product__details__breadcrumb a {
	font-size: 15px;
	color: var(--color-dark);
	margin-right: 18px;
	display: inline-block;
	position: relative;
}

.product__details__breadcrumb a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "";
	font-family: "FontAwesome";
}

.product__details__breadcrumb span {
	font-size: 15px;
	color: var(--color-text-muted);
	display: inline-block;
}

.product__details__pic__item {
	position: relative;
}

.product__details__pic__item a {
	height: 56px;
	width: 56px;
	border: 4px solid var(--color-white);
	border-radius: 50%;
	font-size: 20px;
	color: var(--color-white);
	line-height: 48px;
	text-align: center;
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -28px;
	margin-left: -28px;
}

.product__details__text {
	text-align: center;
}

.product__details__text h4 {
	color: var(--color-dark);
	font-weight: 700;
	margin-bottom: 10px;
}

.product__details__text .rating {
	margin-bottom: 20px;
}

.product__details__text .rating i {
	font-size: 15px;
	color: #f7941d;
	display: inline-block;
	margin-right: -5px;
}

.product__details__text .rating span {
	display: inline-block;
	color: var(--color-text);
	margin-left: 5px;
}

.product__details__text h3 {
	color: var(--color-dark-alt);
	font-weight: 700;
	margin-bottom: 16px;
}

.product__details__text h3 span {
	color: var(--color-text-muted);
	font-size: 20px;
	font-weight: 400;
	margin-left: 10px;
	text-decoration: line-through;
}

/* Dual pricing (detail.php only) — "Precio lista" (List1) vs "Contado /
   Transferencia" (List2), the latter shown bigger with a green savings
   badge computed from the two. See $hasDualPricing in detail.php. */
.product__details__pricing {
	margin-bottom: 16px;
}

.product__details__pricing__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.product__details__pricing__row + .product__details__pricing__row {
	margin-top: 6px;
}

.product__details__pricing__label {
	color: var(--color-text-muted);
	font-size: 14px;
}

.product__details__pricing__value {
	color: var(--color-text-muted);
	font-size: 16px;
	font-weight: 600;
}

.product__details__pricing__row--cash .product__details__pricing__label {
	color: var(--color-dark);
	font-weight: 600;
	font-size: 15px;
}

.product__details__pricing__value--big {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-dark-alt);
	font-size: 34px;
	font-weight: 700;
}

.product__details__discount-badge {
	color: var(--color-white);
	background: var(--color-success);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 999px;
}

.product__details__text p {
	margin-bottom: 35px;
}

.product__details__option {
	margin-bottom: 30px;
}

.product__details__option__size {
	display: inline-block;
	margin-right: 50px;
}

.product__details__option__size span {
	color: var(--color-dark);
	display: inline-block;
	margin-right: 10px;
}

.product__details__option__size label {
	color: var(--color-dark);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	border: 1px solid var(--color-border);
	padding: 6px 15px;
	margin-bottom: 0;
	margin-right: 5px;
	cursor: pointer;
}

.product__details__option__size label.active {
	background: var(--color-dark);
	color: var(--color-white);
	border-color: var(--color-dark);
}

.product__details__option__size label input {
	position: absolute;
	visibility: hidden;
}

.product__details__option__color {
	display: inline-block;
	position: relative;
	top: 10px;
}

.product__details__option__color span {
	color: var(--color-dark);
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: -9px;
}

.product__details__option__color label {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	position: relative;
	margin-right: 10px;
	margin-bottom: 0;
	display: inline-block;
	cursor: pointer;
}

.product__details__option__color label.c-1 {
	background: #0b090c;
}

.product__details__option__color label.c-2 {
	background: #20315f;
}

.product__details__option__color label.c-3 {
	background: #f1af4d;
}

.product__details__option__color label.c-4 {
	background: #ed1c24;
}

.product__details__option__color label.c-9 {
	background: var(--color-white);
}

.product__details__option__color label:after {
	position: absolute;
	left: -3px;
	top: -3px;
	height: 36px;
	width: 36px;
	border: 1px solid var(--color-border);
	content: "";
	border-radius: 50%;
}

.product__details__option__color label input {
	position: absolute;
	visibility: hidden;
}

.product__details__cart__option {
	margin-bottom: 25px;
}

.product__details__cart__option .quantity {
	display: inline-block;
	margin-right: 20px;
}

.product__details__cart__option .quantity .pro-qty {
	width: 100px;
	height: 40px;
	border: var(--input-border-width) solid var(--input-border-color);
	position: relative;
}

.product__details__cart__option .quantity .pro-qty input {
	color: var(--color-dark-alt);
	font-size: 15px;
	font-weight: 700;
	width: 70px;
	height: 100%;
	text-align: center;
	border: none;
}

.product__details__cart__option .quantity .pro-qty .qtybtn {
	font-size: 18px;
	color: var(--color-dark-alt);
	position: absolute;
	right: 15px;
	top: 3px;
	height: 10px;
	width: 10px;
	cursor: pointer;
	font-weight: 600;
}

.product__details__cart__option .quantity .pro-qty .qtybtn.inc {
	top: 16px;
}

.product__details__btns__option {
	margin-bottom: 40px;
}

.product__details__btns__option a {
	display: inline-block;
	font-size: 13px;
	color: var(--color-text);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	margin-right: 20px;
}

.product__details__btns__option a:last-child {
	margin-right: 0;
}

.product__details__last__option h5 {
	color: var(--color-dark);
	font-weight: 700;
	font-size: 20px;
	position: relative;
	margin-bottom: 26px;
}

.product__details__last__option h5 span {
	background: var(--color-white);
	padding: 0 30px;
}

.product__details__last__option h5:before {
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	height: 1px;
	width: 460px;
	background: var(--color-border);
	content: "";
	z-index: -1;
	margin: 0 auto;
}

.product__details__last__option ul {
	padding-top: 40px;
}

.product__details__last__option ul li {
	list-style: none;
	font-size: 15px;
	color: var(--color-dark);
	font-weight: 700;
	line-height: 30px;
}

.product__details__last__option ul li span {
	font-weight: 400;
	color: var(--color-text-muted);
}

.product__details__last__option ul li a {
	color: inherit;
	text-decoration: none;
}

.product__details__last__option ul li a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.product__details__tab {
	padding-top: 60px;
}

.product__details__tab .nav-tabs {
	border-bottom: 1px solid var(--color-border);
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.product__details__tab .nav-tabs .nav-item {
	margin-right: 50px;
}

.product__details__tab .nav-tabs .nav-item:last-child {
	margin-right: 0;
}

.product__details__tab .nav-tabs .nav-item .nav-link {
	font-size: 20px;
	color: var(--color-text-muted);
	padding: 0;
	border: none;
	font-weight: 700;
	padding-bottom: 10px;
	border-bottom: 2px solid transparent;
}

.product__details__tab .nav-tabs .nav-item .nav-link.active {
	border-bottom: 2px solid var(--color-primary);
}

.product__details__tab__content {
	padding-top: 35px;
}

.note {
	color: var(--color-dark);
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	margin-bottom: 25px;
}

.product__details__tab__content__item {
	margin-bottom: 30px;
}

.product__details__tab__content__item:last-child {
	margin-bottom: 0;
}

.product__details__tab__content__item h5 {
	color: var(--color-dark);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
}

.product__details__tab__content__item p {
	margin-bottom: 0;
}

/*---------------------
  Related
-----------------------*/

.related {
	padding-bottom: 55px;
}

.related-title {
	color: var(--color-dark);
	font-weight: 700;
	margin-bottom: 45px;
	text-align: center;
}

/*---------------------
  Footer
-----------------------*/

.footer {
	background: var(--color-dark);
	padding-top: 70px;
}

.footer__about {
	margin-bottom: 30px;
}

.footer__about .footer__logo {
	margin-bottom: 30px;
}

.footer__about .footer__logo a {
	display: inline-block;
}

.footer__about p {
	color: var(--color-text-muted);
	margin-bottom: 30px;
}

.footer__widget {
	margin-bottom: 30px;
}

.footer__widget h6 {
	color: var(--color-white);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.footer__widget ul li {
	line-height: 36px;
	list-style: none;
}

.footer__widget ul li a,
.footer__widget ul li {
	color: var(--color-text-muted);
	font-size: 15px;
}

.footer__widget .footer__newslatter p {
	color: var(--color-text-muted);
}

.footer__widget .footer__newslatter form {
	position: relative;
}

.footer__widget .footer__newslatter form input {
	width: 100%;
	font-size: 15px;
	color: var(--color-text);
	background: transparent;
	border: none;
	padding: 15px 0;
	border-bottom: 2px solid var(--color-white);
}

.footer__widget .footer__newslatter form input::-webkit-input-placeholder {
	color: var(--color-text);
}

.footer__widget .footer__newslatter form input::-moz-placeholder {
	color: var(--color-text);
}

.footer__widget .footer__newslatter form input:-ms-input-placeholder {
	color: var(--color-text);
}

.footer__widget .footer__newslatter form input::-ms-input-placeholder {
	color: var(--color-text);
}

.footer__widget .footer__newslatter form input::placeholder {
	color: var(--color-text);
}

.footer__widget .footer__newslatter form button {
	color: var(--color-text-muted);
	font-size: 16px;
	position: absolute;
	right: 5px;
	top: 0;
	height: 100%;
	background: transparent;
	border: none;
}

.footer__map {
	margin-top: 20px;
	margin-bottom: 10px;
	border-radius: 4px;
	overflow: hidden;
}

.footer__map iframe {
	display: block;
}

.footer__map--placeholder {
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px dashed rgba(255, 255, 255, 0.15);
	color: var(--color-text-muted);
	font-size: 14px;
	text-align: center;
	padding: 0 20px;
}

.footer__map--placeholder i {
	font-size: 20px;
	color: var(--color-primary);
}

.footer__copyright__text {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 0;
	margin-top: 40px;
}

.footer__copyright__text p {
	color: var(--color-text-muted);
	margin-bottom: 0;
}

.footer__copyright__text p i {
	color: var(--color-primary);
}

.footer__copyright__text p a {
	color: var(--color-primary);
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	/* $site['breadcrumb_bg'] is set as a plain inline background-image
	   (templates/page_hero.php), not through a --custom-property read via
	   var() here -- a relative url() inside a custom property resolves
	   against THIS stylesheet's own location (css/), not the page, so it
	   404'd against css/img/... instead of img/.... background-color still
	   comes through var() since plain colors aren't affected by that, and
	   shows through as a flat dark fallback whenever no image is set.
	   The dark scrim is a separate ::before layer on top of whichever one
	   actually painted. */
	position: relative;
	overflow: hidden;
	background-color: var(--color-dark);
	background-size: cover;
	background-position: center;
	padding: 40px 0;
}

.breadcrumb-option:before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay-scrim-strong);
}

.breadcrumb-option .container {
	position: relative;
	z-index: 1;
}

.breadcrumb__text h4 {
	color: var(--color-white);
	font-weight: 700;
	margin-bottom: 8px;
	text-shadow: var(--text-shadow-strong);
}

.breadcrumb__links a {
	font-size: 15px;
	color: var(--color-white);
	margin-right: 18px;
	display: inline-block;
	position: relative;
	text-shadow: var(--text-shadow-soft);
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "";
	font-family: "FontAwesome";
}

.breadcrumb__links span {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
	display: inline-block;
	text-shadow: var(--text-shadow-soft);
}

/*---------------------
  Breadcrumb Blog
-----------------------*/

.breadcrumb-blog {
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 350px;
}

.breadcrumb-blog h2 {
	color: var(--color-white);
	font-size: 60px;
	font-weight: 700;
}

/*---------------------
  About
-----------------------*/

.about {
	padding-bottom: 70px;
}

.about__pic {
	margin-bottom: 35px;
}

.about__pic img {
	min-width: 100%;
}

.about__item {
	margin-bottom: 30px;
}

.about__item h4 {
	color: var(--color-dark);
	font-weight: 700;
	margin-bottom: 10px;
}

.about__item p {
	margin-bottom: 0;
}

/*---------------------
  Testimonial
-----------------------*/

.testimonial {
	background: var(--color-light-bg);
}

.testimonial__text {
	text-align: center;
	padding: 130px 150px 175px;
}

.testimonial__text span {
	color: var(--color-primary);
	font-size: 72px;
}

.testimonial__text p {
	color: var(--color-dark);
	font-size: 20px;
	font-style: italic;
	line-height: 30px;
	padding-top: 12px;
	margin-bottom: 25px;
}

.testimonial__author {
	display: inline-block;
}

.testimonial__author__pic {
	float: left;
	margin-right: 20px;
}

.testimonial__author__pic img {
	height: 60px;
	width: 60px;
	border-radius: 50%;
}

.testimonial__author__text {
	overflow: hidden;
	padding-top: 3px;
}

.testimonial__author__text h5 {
	color: var(--color-dark);
	font-weight: 700;
	margin-bottom: 5px;
}

.testimonial__author__text p {
	color: var(--color-text-muted);
	margin-bottom: 0 !important;
	padding-top: 0;
}

.testimonial__pic {
	height: 600px;
}

/*---------------------
  Counter
-----------------------*/

.counter {
	padding-bottom: 0;
}

.counter .container {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 70px;
}

.counter__item {
	margin-bottom: 30px;
	overflow: hidden;
}

.counter__item .counter__item__number {
	float: left;
	margin-right: 15px;
}

.counter__item .counter__item__number h2 {
	color: var(--color-dark);
	font-weight: 700;
	font-size: 60px;
	line-height: 50px;
	display: inline-block;
}

.counter__item .counter__item__number strong {
	color: var(--color-dark);
	font-weight: 700;
	font-size: 60px;
	line-height: 50px;
	display: inline-block;
}

.counter__item span {
	display: block;
	color: var(--color-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 25px;
	overflow: hidden;
}

/*---------------------
  Testimonial
-----------------------*/

.team {
	padding-bottom: 70px;
}

.team__item {
	margin-bottom: 30px;
}

.team__item img {
	min-width: 100%;
	margin-bottom: 25px;
}

.team__item h4 {
	color: var(--color-dark);
	font-weight: 700;
	margin-bottom: 8px;
}

.team__item span {
	font-size: 15px;
	display: block;
	color: var(--color-text-muted);
}

/*---------------------
  Clients
-----------------------*/

.clients {
	padding-top: 0;
	padding-bottom: 25px;
}

.client__item {
	display: block;
	margin-bottom: 75px;
	text-align: center;
}

/*---------------------
  Shopping Cart
-----------------------*/

.shopping__cart__table {
	margin-bottom: 30px;
}

.shopping__cart__table table {
	width: 100%;
}

.shopping__cart__table table thead {
	border-bottom: 1px solid #f2f2f2;
}

.shopping__cart__table table thead tr th {
	color: var(--color-dark);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	padding-bottom: 25px;
}

.shopping__cart__table table tbody tr {
	border-bottom: 1px solid #f2f2f2;
}

.shopping__cart__table table tbody tr td {
	padding-bottom: 30px;
	padding-top: 30px;
}

.shopping__cart__table table tbody tr td.product__cart__item {
	width: 400px;
}

.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__pic {
	float: left;
	margin-right: 30px;
}

.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__text {
	overflow: hidden;
	padding-top: 21px;
}

.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__text h6 {
	color: var(--color-dark);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 10px;
}

.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__text h5 {
	color: var(--color-dark-alt);
	font-weight: 700;
}

.shopping__cart__table table tbody tr td.quantity__item {
	width: 175px;
}

.shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty-2 {
	width: 80px;
}

.shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty-2 input {
	width: 50px;
	border: none;
	text-align: center;
	color: var(--color-dark);
	font-size: 16px;
}

.shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty-2 .qtybtn {
	font-size: 16px;
	color: #888888;
	width: 10px;
	cursor: pointer;
}

.shopping__cart__table table tbody tr td.cart__price {
	color: var(--color-dark);
	font-size: 18px;
	font-weight: 700;
	width: 140px;
}

.shopping__cart__table table tbody tr td.cart__close i {
	font-size: 18px;
	color: var(--color-dark);
	height: 40px;
	width: 40px;
	background: var(--color-light-bg);
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
}

.continue__btn.update__btn {
	text-align: right;
}

.continue__btn.update__btn a {
	color: var(--color-white);
	background: var(--color-dark);
	border-color: var(--color-dark);
}

.continue__btn.update__btn a i {
	margin-right: 5px;
}

.continue__btn a {
	color: var(--color-dark);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 1px solid var(--color-border-alt);
	padding: 14px 35px;
	display: inline-block;
}

.cart__discount {
	margin-bottom: 60px;
}

.cart__discount h6 {
	color: var(--color-dark);
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 35px;
}

.cart__discount form {
	position: relative;
}

.cart__discount form input {
	font-size: var(--input-font-size);
	color: var(--input-color);
	height: 50px;
	width: 100%;
	border: var(--input-border-width) solid var(--color-border-alt);
	padding-left: var(--input-padding-x);
}

.cart__discount form input:focus {
	outline: none;
	border-color: var(--input-focus-border-color);
}

.cart__discount form input::-webkit-input-placeholder {
	color: var(--color-text-muted);
}

.cart__discount form input::-moz-placeholder {
	color: var(--color-text-muted);
}

.cart__discount form input:-ms-input-placeholder {
	color: var(--color-text-muted);
}

.cart__discount form input::-ms-input-placeholder {
	color: var(--color-text-muted);
}

.cart__discount form input::placeholder {
	color: var(--color-text-muted);
}

.cart__discount form button {
	font-size: var(--input-font-size);
	color: var(--btn-primary-color);
	font-weight: var(--btn-font-weight);
	letter-spacing: 2px;
	text-transform: uppercase;
	background: var(--btn-primary-bg);
	padding: 0 30px;
	border: none;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
}

.cart__total {
	background: var(--color-light-bg);
	padding: 35px 40px 40px;
}

.cart__total h6 {
	color: var(--color-dark);
	text-transform: uppercase;
	margin-bottom: 12px;
}

.cart__total ul {
	margin-bottom: 25px;
}

.cart__total ul li {
	list-style: none;
	font-size: 16px;
	color: var(--color-heading-alt);
	line-height: 40px;
	overflow: hidden;
}

.cart__total ul li span {
	font-weight: 700;
	color: var(--color-primary);
	float: right;
}

.cart__total .primary-btn {
	display: block;
	padding: 12px 10px;
	text-align: center;
	letter-spacing: 2px;
}

/* cart.php's real markup uses Bootstrap's own button/input classes (it
   mirrors views/tienda/cart.php) rather than the .primary-btn/.site-btn/
   .shop__sidebar__search markup above, so Bootstrap's stock blue never
   picks up this theme's tokens on its own. These overrides re-point every
   Bootstrap button/input cart.php and detail.php actually use back to the
   same button/input/color tokens as the rest of the storefront. */
.btn-primary {
	color: var(--btn-primary-color);
	background-color: var(--btn-primary-bg);
	border-color: var(--btn-primary-bg);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	color: var(--btn-primary-color);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline-primary {
	color: var(--btn-accent-color);
	border-color: var(--btn-accent-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
	color: var(--btn-primary-color);
	background-color: var(--btn-accent-color);
	border-color: var(--btn-accent-color);
}

.btn-outline-danger {
	color: var(--color-danger);
	border-color: var(--color-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active {
	color: var(--btn-primary-color);
	background-color: var(--color-danger);
	border-color: var(--color-danger);
}

.text-primary {
	color: var(--btn-accent-color) !important;
}

.text-danger {
	color: var(--color-danger) !important;
}

.text-success {
	color: var(--color-success) !important;
}

.text-warning {
	color: var(--color-warning) !important;
}

.text-info {
	color: var(--color-info) !important;
}

.form-control {
	color: var(--input-color);
	background-color: var(--input-bg);
	border: var(--input-border-width) solid var(--input-border-color);
	border-radius: var(--input-radius);
}

.btn-sm,
.btn-group-sm > .btn {
	padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
	font-size: var(--btn-sm-font-size);
	border-radius: var(--btn-icon-radius);
}

.form-control:focus {
	color: var(--input-color);
	background-color: var(--input-bg);
	border-color: var(--input-focus-border-color);
	box-shadow: none;
}

/*---------------------
  Checkout
-----------------------*/

.coupon__code {
	color: var(--color-dark-alt);
	font-size: 14px;
	border-top: 2px solid #77b527;
	background: #f5f5f5;
	padding: 23px 30px 18px;
	margin-bottom: 50px;
}

.coupon__code span {
	margin-right: 15px;
}

.coupon__code a {
	color: var(--color-dark-alt);
}

.checkout__title {
	color: var(--color-dark);
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-border-alt);
	padding-bottom: 25px;
	margin-bottom: 30px;
}

.checkout__input {
	margin-bottom: 6px;
}

.checkout__input p {
	color: var(--color-dark);
	margin-bottom: 12px;
}

.checkout__input p span {
	color: var(--color-primary);
}

.checkout__input input {
	height: 50px;
	width: 100%;
	border: var(--input-border-width) solid var(--color-border-alt);
	font-size: var(--input-font-size);
	color: var(--input-color);
	padding-left: var(--input-padding-x);
	margin-bottom: 20px;
}

.checkout__input input:focus {
	outline: none;
	border-color: var(--input-focus-border-color);
}

.checkout__input input::-webkit-input-placeholder {
	color: var(--color-text-muted);
}

.checkout__input input::-moz-placeholder {
	color: var(--color-text-muted);
}

.checkout__input input:-ms-input-placeholder {
	color: var(--color-text-muted);
}

.checkout__input input::-ms-input-placeholder {
	color: var(--color-text-muted);
}

.checkout__input input::placeholder {
	color: var(--color-text-muted);
}

.checkout__input__checkbox label {
	font-size: 15px;
	color: var(--color-dark-alt);
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	margin-bottom: 16px;
	display: block;
}

.checkout__input__checkbox label input {
	position: absolute;
	visibility: hidden;
}

.checkout__input__checkbox label input:checked~.checkmark {
	border-color: var(--color-primary);
}

.checkout__input__checkbox label input:checked~.checkmark:after {
	opacity: 1;
}

.checkout__input__checkbox label .checkmark {
	position: absolute;
	left: 0;
	top: 3px;
	height: 14px;
	width: 14px;
	border: 1.5px solid #d7d7d7;
	content: "";
	border-radius: 2px;
}

.checkout__input__checkbox label .checkmark:after {
	position: absolute;
	left: 1px;
	top: -3px;
	width: 14px;
	height: 7px;
	border: solid var(--color-primary);
	border-width: 1.5px 1.5px 0px 0px;
	-webkit-transform: rotate(127deg);
	-ms-transform: rotate(127deg);
	transform: rotate(127deg);
	content: "";
	opacity: 0;
}

.checkout__input__checkbox p {
	color: var(--color-dark-alt);
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 22px;
}

.checkout__order {
	background: var(--color-light-bg);
	padding: 30px;
}

.checkout__order .order__title {
	color: var(--color-dark);
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 25px;
	margin-bottom: 30px;
}

.checkout__order p {
	color: var(--color-heading-alt);
	font-size: 16px;
	line-height: 28px;
}

.checkout__order .site-btn {
	width: 100%;
	margin-top: 8px;
}

.checkout__order__products {
	font-size: 16px;
	color: var(--color-dark);
	overflow: hidden;
	margin-bottom: 18px;
}

.checkout__order__products span {
	float: right;
}

.checkout__total__products {
	margin-bottom: 20px;
}

.checkout__total__products li {
	font-size: 16px;
	color: var(--color-heading-alt);
	list-style: none;
	line-height: 26px;
	overflow: hidden;
	margin-bottom: 15px;
}

.checkout__total__products li:last-child {
	margin-bottom: 0;
}

.checkout__total__products li span {
	color: var(--color-dark);
	float: right;
}

.checkout__total__all {
	border-top: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
	padding: 15px 0;
	margin-bottom: 26px;
}

.checkout__total__all li {
	list-style: none;
	font-size: 16px;
	color: var(--color-dark);
	line-height: 40px;
	overflow: hidden;
}

.checkout__total__all li span {
	color: var(--color-primary);
	font-weight: 700;
	float: right;
}

/*---------------------
    Blog
-----------------------*/

.blog {
	padding-bottom: 55px;
}

.latest {
	padding-bottom: 55px;
}

.blog__item {
	margin-bottom: 45px;
}

.blog__item:hover a::after {
	width: 40px;
	background: var(--color-primary);
}

.blog__item:hover .blog__item__text {
	-webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.05);
	box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.05);
}

.blog__item__pic {
	height: 270px;
}

.blog__item__text {
	padding: 30px 30px 25px;
	margin: 0 30px;
	margin-top: -35px;
	background: var(--color-white);
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__item__text span {
	color: var(--color-text);
	font-size: 13px;
	display: block;
	margin-bottom: 10px;
}

.blog__item__text span img {
	margin-right: 6px;
}

.blog__item__text h5 {
	color: var(--color-dark-alt);
	font-weight: 700;
	line-height: 28px;
	margin-bottom: 10px;
}

.blog__item__text a {
	display: inline-block;
	color: var(--color-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	padding: 3px 0;
	position: relative;
}

.blog__item__text a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-dark);
	content: "";
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar__item {
	text-align: center;
	margin-bottom: 65px;
}

.blog__sidebar__item:last-child {
	margin-bottom: 0;
}

.blog__sidebar__item form input {
	height: 50px;
	font-size: 15px;
	color: var(--color-heading-alt);
	padding-left: 20px;
	border: 1px solid var(--color-border-alt);
	width: 100%;
	margin-bottom: 20px;
}

.blog__sidebar__item form input::-webkit-input-placeholder {
	color: var(--color-heading-alt);
}

.blog__sidebar__item form input::-moz-placeholder {
	color: var(--color-heading-alt);
}

.blog__sidebar__item form input:-ms-input-placeholder {
	color: var(--color-heading-alt);
}

.blog__sidebar__item form input::-ms-input-placeholder {
	color: var(--color-heading-alt);
}

.blog__sidebar__item form input::placeholder {
	color: var(--color-heading-alt);
}

.blog__sidebar__title {
	text-align: center;
	margin-bottom: 35px;
}

.blog__sidebar__title h4 {
	color: var(--color-dark);
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
}

.blog__sidebar__title h4::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 70px;
	background: var(--color-border-alt);
	content: "";
	margin: 0 auto;
}

.blog__sidebar__social a {
	display: inline-block;
	font-size: 18px;
	color: var(--color-dark);
	width: 50px;
	height: 50px;
	background: #f2f2f2;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	margin-right: 6px;
}

.blog__sidebar__social a:last-child {
	margin-right: 6px;
}

.recent__item {
	display: block;
	overflow: hidden;
	margin-bottom: 25px;
	text-align: left;
}

.recent__item__pic {
	float: left;
	margin-right: 25px;
}

.recent__item__text {
	overflow: hidden;
}

.recent__item__text h6 {
	color: var(--color-dark);
	line-height: 21px;
	font-weight: 700;
}

.recent__item__text span {
	font-size: 13px;
	color: #888888;
}

/*---------------------
  Blog Hero
-----------------------*/

.blog-hero {
	background: var(--color-light-bg);
	padding-top: 125px;
	padding-bottom: 190px;
}

.blog__hero__text h2 {
	color: var(--color-dark);
	font-size: 42px;
	font-weight: 700;
	line-height: 50px;
	margin-bottom: 18px;
}

.blog__hero__text ul li {
	list-style: none;
	font-size: 15px;
	color: var(--color-text);
	display: inline-block;
	margin-right: 40px;
	position: relative;
}

.blog__hero__text ul li:after {
	position: absolute;
	right: -25px;
	top: 0;
	content: "|";
}

.blog__hero__text ul li:last-child {
	margin-right: 0;
}

.blog__hero__text ul li:last-child:after {
	display: none;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
	margin-top: -115px;
	padding-top: 0;
}

.blog__details__content {
	position: relative;
}

.blog__details__pic {
	margin-bottom: 60px;
}

.blog__details__pic img {
	min-width: 100%;
	border-radius: 5px;
}

.blog__details__share {
	text-align: center;
	position: absolute;
	left: -120px;
	top: 0;
}

.blog__details__share span {
	color: var(--color-dark);
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 700;
	display: block;
	margin-bottom: 30px;
}

.blog__details__share ul li {
	list-style: none;
	margin-bottom: 15px;
}

.blog__details__share ul li a {
	color: var(--color-white);
	font-size: 18px;
	height: 46px;
	display: inline-block;
	width: 46px;
	border-radius: 50%;
	line-height: 46px;
	text-align: center;
	background: #4267b2;
}

.blog__details__share ul li a.twitter {
	background: #1da1f2;
}

.blog__details__share ul li a.youtube {
	background: #fe0003;
}

.blog__details__share ul li a.linkedin {
	background: #0173b2;
}

.blog__details__text {
	margin-bottom: 50px;
}

.blog__details__text p {
	font-size: 18px;
	line-height: 34px;
}

.blog__details__text p:last-child {
	margin-bottom: 0;
}

.blog__details__quote {
	background: var(--color-light-bg);
	padding: 50px 40px 35px;
	border-radius: 5px;
	position: relative;
	margin-bottom: 45px;
}

.blog__details__quote i {
	font-size: 16px;
	color: var(--color-white);
	height: 50px;
	width: 50px;
	background: var(--color-primary);
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 40px;
	top: -25px;
}

.blog__details__quote p {
	color: var(--color-dark);
	font-size: 18px;
	font-weight: 600;
	font-style: italic;
	margin-bottom: 20px;
}

.blog__details__quote h6 {
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
}

.blog__details__option {
	border-top: 1px solid var(--color-border);
	padding-top: 15px;
	margin-bottom: 70px;
}

.blog__details__author__pic {
	display: inline-block;
	margin-right: 15px;
}

.blog__details__author__pic img {
	height: 46px;
	width: 46px;
	border-radius: 50%;
}

.blog__details__author__text {
	display: inline-block;
}

.blog__details__author__text h5 {
	color: var(--color-dark);
	font-weight: 700;
}

.blog__details__tags {
	text-align: right;
}

.blog__details__tags a {
	display: inline-block;
	color: var(--color-dark);
	font-weight: 700;
	margin-right: 10px;
}

.blog__details__tags a:last-child {
	margin-right: 0;
}

.blog__details__btns {
	margin-bottom: 40px;
}

.blog__details__btns__item {
	display: block;
	border: 1px solid #ebebeb;
	padding: 25px 30px 30px;
	margin-bottom: 30px;
}

.blog__details__btns__item.blog__details__btns__item--next {
	text-align: right;
}

.blog__details__btns__item.blog__details__btns__item--next p span {
	margin-right: 0;
	margin-left: 5px;
}

.blog__details__btns__item p {
	color: var(--color-text-muted);
	margin-bottom: 10px;
}

.blog__details__btns__item p span {
	font-size: 20px;
	position: relative;
	top: 4px;
	margin-right: 5px;
}

.blog__details__btns__item h5 {
	color: var(--color-dark);
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
}

.blog__details__comment h4 {
	color: #333333;
	font-weight: 700;
	margin-bottom: 35px;
	text-align: center;
}

.blog__details__comment form input {
	height: 50px;
	width: 100%;
	border: 1px solid var(--color-border-alt);
	padding-left: 20px;
	font-size: 15px;
	color: var(--color-text-muted);
	margin-bottom: 30px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__details__comment form input::-webkit-input-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form input::-moz-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form input:-ms-input-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form input::-ms-input-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form input::placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form input:focus {
	border-color: #000000;
}

.blog__details__comment form textarea {
	height: 120px;
	width: 100%;
	border: 1px solid var(--color-border-alt);
	padding-left: 20px;
	padding-top: 12px;
	font-size: 15px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
	resize: none;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__details__comment form textarea::-webkit-input-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form textarea::-moz-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form textarea:-ms-input-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form textarea::-ms-input-placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form textarea::placeholder {
	color: var(--color-text-muted);
}

.blog__details__comment form textarea:focus {
	border-color: #000000;
}

.blog__details__comment form button {
	letter-spacing: 4px;
	padding: 14px 35px;
}

/*---------------------
  Map
-----------------------*/

.map {
	height: 500px;
}

.map iframe {
	width: 100%;
}

/*---------------------
  Contact
-----------------------*/

.contact__text .section-title {
	text-align: left;
	margin-bottom: 40px;
}

.contact__text .section-title h2 {
	font-size: 48px;
	margin-bottom: 18px;
}

.contact__text .section-title p {
	color: #707070;
	line-height: 26px;
	margin-bottom: 0;
}

.contact__text ul li {
	list-style: none;
	margin-bottom: 26px;
}

.contact__text ul li:last-child {
	margin-bottom: 0;
}

.contact__text ul li h4 {
	color: var(--color-dark);
	font-weight: 700;
	margin-bottom: 8px;
}

.contact__text ul li p {
	line-height: 27px;
	margin-bottom: 0;
}

.contact__form input {
	height: 50px;
	width: 100%;
	border: 1px solid var(--color-border-alt);
	padding-left: 20px;
	font-size: 15px;
	color: var(--color-text-muted);
	margin-bottom: 30px;
}

.contact__form input::-webkit-input-placeholder {
	color: var(--color-text-muted);
}

.contact__form input::-moz-placeholder {
	color: var(--color-text-muted);
}

.contact__form input:-ms-input-placeholder {
	color: var(--color-text-muted);
}

.contact__form input::-ms-input-placeholder {
	color: var(--color-text-muted);
}

.contact__form input::placeholder {
	color: var(--color-text-muted);
}

.contact__form textarea {
	height: 150px;
	width: 100%;
	border: 1px solid var(--color-border-alt);
	padding-left: 20px;
	padding-top: 12px;
	font-size: 15px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
	resize: none;
}

.contact__form textarea::-webkit-input-placeholder {
	color: var(--color-text-muted);
}

.contact__form textarea::-moz-placeholder {
	color: var(--color-text-muted);
}

.contact__form textarea:-ms-input-placeholder {
	color: var(--color-text-muted);
}

.contact__form textarea::-ms-input-placeholder {
	color: var(--color-text-muted);
}

.contact__form textarea::placeholder {
	color: var(--color-text-muted);
}

.contact__form button {
	letter-spacing: 4px;
	padding: 14px 35px;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.categories__text h2 {
		font-size: 26px;
	}
	.header__menu ul li {
		margin-right: 38px;
	}
	.hero__slider.owl-carousel .owl-nav button {
		left: 2px;
	}
	.hero__slider.owl-carousel .owl-nav button.owl-next {
		right: 2px;
	}
	.testimonial__text {
		padding: 130px 45px 175px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header__menu ul li {
		margin-right: 10px;
	}
	.header__nav__option a {
		margin-right: 10px;
	}
	.header__nav__option .price {
		margin-left: 0;
	}
	.hero__slider.owl-carousel .owl-nav button {
		left: 2px;
	}
	.hero__slider.owl-carousel .owl-nav button.owl-next {
		right: 2px;
	}
	.categories__text {
		margin-bottom: 40px;
	}
	.categories__hot__deal {
		margin-bottom: 40px;
	}
	.instagram__text {
		padding-top: 70px;
	}
	.shop__sidebar {
		padding-right: 0;
		padding-top: 40px;
	}
	.cart__discount {
		margin-top: 40px;
	}
	.testimonial__text {
		padding: 100px 105px 100px;
	}
	.blog__details__share {
		position: relative;
		left: 0;
		margin-bottom: 18px;
	}
	.blog__details__share span {
		margin-bottom: 14px;
		margin-right: 0;
	}
	.blog__details__share ul li {
		margin-bottom: 15px;
		display: inline-block;
		margin-right: 10px;
	}
	.blog__details__share ul li:last-child {
		margin-right: 0;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	/* Below md (768px) the text column (col-md-8 and up) collapses to full
	   width, so the 48%-wide scrim/stripes tuned for the desktop left-column
	   layout leave the second half of the text sitting directly on the raw
	   photo, unreadable. Stretch both to cover the full slide on mobile. */
	.hero__items:before {
		background: linear-gradient(180deg, var(--overlay-scrim-strong) 0%, var(--overlay-scrim-soft) 60%, var(--overlay-scrim-soft) 100%);
	}
	.hero__items:after {
		width: 100%;
		background: linear-gradient(110deg,
			transparent 0%, transparent 34%,
			var(--hero-stripe-gray) 34%, var(--hero-stripe-gray) 52%,
			transparent 52%, transparent 60%,
			var(--color-primary) 60%, var(--color-primary) 65%,
			transparent 65%, transparent 100%);
	}
	.header__logo {
		min-height: var(--header-height-mobile);
	}
	.header__logo img {
		max-height: calc(var(--header-height-mobile) - 20px);
	}
	.canvas__open {
		display: block;
		font-size: 22px;
		color: var(--header-text);
		height: 35px;
		width: 35px;
		line-height: 35px;
		text-align: center;
		border: var(--btn-border-width) solid var(--header-text);
		border-radius: var(--btn-icon-radius);
		cursor: pointer;
		position: absolute;
		right: 15px;
		/* Vertically centered against the mobile header-height token instead
		   of a hardcoded top offset, so it stays centered regardless of the
		   logo's actual size — half of the button's own 35px height. */
		top: calc(var(--header-height-mobile) / 2 - 17.5px);
	}
	/* .header__nav__option (search + cart) is hidden on mobile below, so the
	   cart would otherwise be reachable only after opening the offcanvas
	   sidebar. Mirror canvas__open's button styling and sit just left of it
	   so the cart stays reachable in one tap. */
	.mobile-cart-shortcut {
		display: block;
		position: absolute;
		right: 60px;
		top: calc(var(--header-height-mobile) / 2 - 17.5px);
		height: 35px;
		width: 35px;
		line-height: 35px;
		text-align: center;
		border: var(--btn-border-width) solid var(--header-text);
		border-radius: var(--btn-icon-radius);
		cursor: pointer;
	}
	.mobile-cart-shortcut i {
		font-size: 16px;
		color: var(--header-text);
		line-height: 35px;
	}
	.mobile-cart-shortcut span[data-cart-badge] {
		position: absolute;
		top: -8px;
		right: -8px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		padding: 0 3px;
		background: var(--color-dark);
		color: var(--color-white);
		font-size: 11px;
		font-weight: 700;
		border-radius: 50%;
		text-align: center;
	}
	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}
	.offcanvas-menu-overlay.active {
		visibility: visible;
	}
	.offcanvas-menu-wrapper {
		position: fixed;
		left: -300px;
		width: 300px;
		height: 100%;
		background: var(--offcanvas-bg);
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}
	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}
	.offcanvas__menu {
		display: none;
	}
	.slicknav_btn {
		display: none;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: var(--offcanvas-text);
		font-weight: 600;
	}
	.slicknav_nav .slicknav_arrow {
		color: var(--offcanvas-text);
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: var(--color-primary);
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: var(--color-primary);
	}
	.slicknav_nav {
		display: block !important;
	}
	.offcanvas__option {
		text-align: center;
		margin-bottom: 30px;
	}
	.offcanvas__links {
		display: inline-block;
		margin-right: 25px;
	}
	.offcanvas__links a {
		color: var(--offcanvas-text);
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 2px;
		margin-right: 16px;
		display: inline-block;
		font-weight: 600;
	}
	.offcanvas__links a:last-child {
		margin-right: 0;
	}
	.offcanvas__top__hover {
		display: inline-block;
		position: relative;
	}
	.offcanvas__top__hover:hover ul {
		top: 24px;
		opacity: 1;
		visibility: visible;
	}
	.offcanvas__top__hover span {
		color: var(--color-dark);
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 2px;
		display: inline-block;
		cursor: pointer;
		font-weight: 600;
	}
	.offcanvas__top__hover span i {
		font-size: 20px;
		position: relative;
		top: 3px;
		right: 2px;
	}
	.offcanvas__top__hover ul {
		background: var(--color-dark);
		display: inline-block;
		padding: 2px 0;
		position: absolute;
		left: 0;
		top: 44px;
		opacity: 0;
		visibility: hidden;
		z-index: 3;
		-webkit-transition: all, 0.3s;
		-o-transition: all, 0.3s;
		transition: all, 0.3s;
	}
	.offcanvas__top__hover ul li {
		list-style: none;
		font-size: 13px;
		color: var(--color-white);
		padding: 2px 15px;
		cursor: pointer;
	}
	.offcanvas__nav__option {
		text-align: center;
		margin-bottom: 25px;
	}
	.offcanvas__nav__option a {
		display: inline-block;
		margin-right: 26px;
		position: relative;
	}
	.offcanvas__nav__option img {
		filter: var(--header-icon-filter);
	}
	.offcanvas__nav__option a span {
		color: var(--offcanvas-text);
		font-size: 11px;
		position: absolute;
		left: 5px;
		top: 8px;
	}
	.offcanvas__nav__option a:last-child {
		margin-right: 0;
	}
	.offcanvas__nav__option .price {
		font-size: 15px;
		color: var(--color-dark);
		font-weight: 700;
		display: inline-block;
		margin-left: -20px;
		position: relative;
		top: 3px;
	}
	.offcanvas__text p {
		color: var(--offcanvas-text-muted);
		margin-bottom: 0;
	}
	.header__top {
		display: none;
	}
	.header .container {
		position: relative;
	}
	.header__menu {
		display: none;
	}
	.header__nav__option {
		display: none;
	}
	.search-model-form input {
		width: 100%;
		font-size: 24px;
	}
	.hero__slider.owl-carousel .owl-nav button {
		left: 15px;
		top: 80%;
	}
	.hero__slider.owl-carousel .owl-nav button.owl-next {
		left: 75px;
		right: 0;
	}
	.categories__text {
		margin-bottom: 40px;
	}
	.categories__hot__deal {
		margin-bottom: 40px;
	}
	.instagram__text {
		padding-top: 70px;
	}
	.instagram__pic__item {
		width: 50%;
	}
	.shop__product__option__right {
		text-align: left;
		padding-top: 20px;
	}
	.shop__sidebar {
		padding-right: 0;
		margin-bottom: 40px;
	}
	.testimonial__text {
		padding: 100px 40px 100px;
	}
	.product__details__breadcrumb {
		text-align: left;
	}
	.product__details__pic .nav-tabs {
		width: auto;
		margin-bottom: 40px;
	}
	.product__details__pic .nav-tabs .nav-item {
		margin-bottom: 0;
		margin-right: 10px;
	}
	.product__details__option__size {
		display: block;
		margin-right: 0;
		margin-bottom: 25px;
	}
	.product__details__last__option h5:before {
		width: 440px;
	}
	.product__details__tab .nav-tabs .nav-item {
		margin-bottom: 15px;
	}
	.shopping__cart__table {
		overflow-y: auto;
	}
	.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__pic {
		float: none;
		margin-right: 0;
	}
	.continue__btn {
		text-align: center;
	}
	.continue__btn.update__btn {
		text-align: center;
		margin-top: 20px;
	}
	.cart__discount {
		margin-top: 40px;
	}
	.checkout__order {
		margin-top: 20px;
	}
	.blog__details__share {
		position: relative;
		left: 0;
		margin-bottom: 18px;
	}
	.blog__details__share span {
		margin-bottom: 14px;
		margin-right: 0;
	}
	.blog__details__share ul li {
		margin-bottom: 15px;
		display: inline-block;
		margin-right: 10px;
	}
	.blog__details__share ul li:last-child {
		margin-right: 0;
	}
	.blog__details__author {
		text-align: center;
		margin-bottom: 20px;
	}
	.blog__details__tags {
		text-align: center;
	}
	.contact__text {
		margin-bottom: 40px;
	}
	.hero__social {
		margin-top: 18px;
	}
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.cart__total {
		padding: 35px 30px 40px;
	}
	.hero__items {
		/* Flex-centered (see the base rule above), so this floor just keeps
		   the box from getting too cramped on very short phone viewports —
		   it no longer needs to double as a text-height accommodator the
		   way the old padding-top layout did. */
		min-height: 380px;
	}
	.hero__text h2 {
		font-size: 36px;
		line-height: 48px;
	}
	.hero__social {
		margin-top: 14px;
	}
	.categories__deal__countdown .categories__deal__countdown__timer {
		margin-left: 0;
	}
	.instagram__pic__item {
		width: 100%;
	}
	.testimonial__text {
		padding: 60px 40px 60px;
	}
	.product__details__pic .nav-tabs .nav-item .nav-link .product__thumb__pic {
		width: 100%;
	}
	.product__details__pic .nav-tabs .nav-item {
		margin-bottom: 10px;
		width: calc(33.33% - 10px);
	}
	.product__details__last__option h5:before {
		width: 280px;
	}
	.product__details__cart__option .quantity {
		margin-right: 0;
		margin-bottom: 15px;
	}
	.product__details__last__option h5 span {
		font-size: 16px;
	}
	.blog__hero__text h2 {
		font-size: 36px;
	}
	.categories__text h2 {
		font-size: 30px;
		line-height: 55px;
	}
	.categories__text:before {
		height: 250px;
	}
}