/* ==========================================================================
   shop.yanaflowers.co.uk - theme
   Black header / white page / monochrome palette, matching the v2 site.
   Layout classes are the ones the templates use (bootstrap 3 grid underneath).
   ========================================================================== */

:root {
	--yf-black:   #000000;
	--yf-ink:     #111111;   /* body text, buttons */
	--yf-grey:    #666666;   /* secondary text */
	--yf-light:   #999999;   /* muted text */
	--yf-line:    #e5e5e5;   /* borders */
	--yf-panel:   #f6f6f6;   /* light panels (minicart) */
	--yf-white:   #ffffff;
	--yf-danger:  #b3261e;
}

/* ---------- Base ---------- */
html { background: var(--yf-white); }
body {
	background: var(--yf-white);
	color: var(--yf-ink);
	font: 400 14px/1.6 'Montserrat', Arial, sans-serif;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--yf-ink); }
a:hover, a:focus { color: var(--yf-black); text-decoration: underline; }

h1, h2, h3, h4 { font-family: 'Montserrat', Arial, sans-serif; color: var(--yf-ink); font-weight: 600; letter-spacing: .02em; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

.clear { clear: both; }
.toggle { display: none; }

/* ---------- Icon font (fontello) ---------- */
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?87110543');
  src: url('../font/fontello.eot?87110543#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?87110543') format('woff'),
       url('../font/fontello.ttf?87110543') format('truetype'),
       url('../font/fontello.svg?87110543#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?87110543#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-search:before { content: '\e800'; } /* '?' */
.icon-mail:before { content: '\e801'; } /* '?' */
.icon-mail-alt:before { content: '\e802'; } /* '?' */
.icon-ok:before { content: '\e803'; } /* '?' */
.icon-cancel:before { content: '\e804'; } /* '?' */
.icon-angle-left:before { content: '\e805'; } /* '?' */
.icon-angle-right:before { content: '\e806'; } /* '?' */
.icon-angle-up:before { content: '\e807'; } /* '?' */
.icon-angle-down:before { content: '\e808'; } /* '?' */
.icon-down-open:before { content: '\e809'; } /* '?' */
.icon-left-open:before { content: '\e80a'; } /* '?' */
.icon-right-open:before { content: '\e80b'; } /* '?' */
.icon-up-open:before { content: '\e80c'; } /* '?' */
.icon-down-big:before { content: '\e80d'; } /* '?' */
.icon-left-big:before { content: '\e80e'; } /* '?' */
.icon-right-big:before { content: '\e80f'; } /* '?' */
.icon-up-big:before { content: '\e810'; } /* '?' */
.icon-spin5:before { content: '\e811'; } /* '?' */
.icon-paypal:before { content: '\e812'; } /* '?' */
.icon-basket:before { content: '\e813'; } /* '?' */
.icon-phone:before { content: '\e814'; } /* '?' */
.icon-down-open-big:before { content: '\e815'; } /* '?' */
.icon-left-open-big:before { content: '\e816'; } /* '?' */
.icon-right-open-big:before { content: '\e817'; } /* '?' */
.icon-up-open-big:before { content: '\e818'; } /* '?' */
.icon-basket-1:before { content: '\e819'; } /* '?' */
.icon-ok-1:before { content: '\e81a'; } /* '?' */
.icon-cancel-1:before { content: '\e81b'; } /* '?' */
.icon-ok-2:before { content: '\e81c'; } /* '?' */
.icon-cancel-2:before { content: '\e81d'; } /* '?' */
.icon-progress-0:before { content: '\e81e'; } /* '?' */
.icon-lock:before { content: '\e81f'; } /* '?' */
.icon-phone-1:before { content: '\e820'; } /* '?' */
.icon-plus:before { content: '\e821'; } /* '?' */
.icon-cancel-circle:before { content: '\e822'; } /* '?' */
.icon-trash:before { content: '\e823'; } /* '?' */
.icon-basket-2:before { content: '\e824'; } /* '?' */
.icon-basket-alt:before { content: '\e825'; } /* '?' */


/* ---------- Header ---------- */
.navbar-default {
	background: var(--yf-black);
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
	min-height: 0;
}
.nav-container { position: relative; padding-top: 14px; padding-bottom: 14px; }
.logo { float: left; }
.navbar-brand { height: auto; padding: 0 !important; margin: 0 !important; display: block; }
.navbar-brand > img { display: block; height: 96px; width: auto; }
.navbar-brand > img:hover { opacity: .85; }

.navbar-contact {
	float: right;
	text-align: right;
	padding: 22px 0 0 0;
	font: 500 13px/1.5 'Montserrat', sans-serif;
	letter-spacing: .04em;
}
.navbar-contact a {
	display: block;
	color: var(--yf-white) !important;
	text-decoration: none;
	padding: 4px 0;
}
.navbar-contact a:hover { color: #cccccc !important; text-decoration: none; }
.navbar-contact a i { color: #bbbbbb; }
.navbar-contact .navbar-cart { display: none; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
	background: none;
	border-radius: 0;
	border-bottom: 1px solid var(--yf-line);
	margin: 10px 0 20px;
	padding: 10px 0;
	color: var(--yf-light);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.breadcrumb a { color: var(--yf-ink); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Category listing ---------- */
.cat-content { margin: 20px 0; padding: 0; }
.cat-content ul { display: block; margin: 0 10px; padding: 0 0 20px 0; width: 100%; }
.cat-content ul li {
	border: 1px solid var(--yf-line);
	border-radius: 2px;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	list-style: none;
	margin: 0 15px 15px 0;
	padding: 0;
	width: 200px;
	text-align: center;
	background: var(--yf-white);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cat-content ul li:hover { border-color: var(--yf-ink); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.cat-content ul li a {
	color: var(--yf-ink);
	display: block;
	height: 200px;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-align: center;
	text-decoration: none;
}
.cat-content ul li a .title {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	display: table;
	background: rgba(0,0,0,.4);
	transition: background .3s ease;
}
.cat-content ul li a:hover .title { background: rgba(0,0,0,.15); }
.cat-content ul li a .title-inner {
	color: var(--yf-white);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	display: table-cell;
	vertical-align: middle;
	padding: 0 10px;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.cat-content ul li img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Product listing ---------- */
.product-content { margin: 20px 0; padding: 0; }
.product-content ul { display: block; margin: 0 10px; padding: 20px 0; width: 100%; }
.product-content ul li {
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	list-style: none;
	margin: 0 15px 15px 0;
	min-height: 200px;
	padding: 10px 0 12px;
	text-align: center;
	width: 190px;
	border: 1px solid var(--yf-line);
	border-radius: 2px;
	background: var(--yf-white);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.product-content ul li:hover { border-color: var(--yf-ink); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.product-content ul li a { text-decoration: none; color: var(--yf-ink); text-align: center; display: block; }
.product-content ul li img { max-width: 100%; }
.product-content ul li .name { height: 40px; display: block; padding: 6px 8px 0; font-size: 12px; line-height: 1.4; overflow: hidden; }
.product-content ul li .productListPrice { display: block; font-weight: 600; font-size: 13px; color: var(--yf-ink); margin-top: 4px; }
.product-content ul li p { margin: 0; display: block; white-space: nowrap; overflow: hidden; }
.pure-button { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--yf-grey) !important; }
.pure-button:hover { color: var(--yf-ink) !important; }

/* ---------- Product detail ---------- */
#product-detail-content img { border: 1px solid var(--yf-line); border-radius: 2px; float: left; max-width: 100%; }
#product-detail-content h1 {
	border-top: 1px solid var(--yf-line);
	border-bottom: 1px solid var(--yf-line);
	padding: 12px 0;
	display: inline-block;
	font-size: 24px;
	width: 60%;
	margin-top: 0;
}
#product-detail-content .productDetailPriceWrapper { display: inline-block; float: right; margin: 0 0 20px 0; width: 35%; text-align: right; }
#product-detail-content .productDetailPrice {
	/* black circular price badge with a thin inner white ring (echoes the logo frame) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--yf-black);
	color: var(--yf-white);
	box-shadow: inset 0 0 0 4px var(--yf-black), inset 0 0 0 5px rgba(255,255,255,.55);
	font: 600 18px/1 'Montserrat', Arial, sans-serif;
	letter-spacing: .01em;
	white-space: nowrap;
}
#product-detail-content .productDetailDescription { float: none; color: var(--yf-grey); }
#product-detail-content .productDetailButtons { display: block; float: left; width: 100%; margin: 20px 0; }
/* price options: all choices visible as selectable chips (radio buttons) */
.price-options-label { font-weight: 600; margin: 10px 0 8px; }
.price-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.price-option { position: relative; margin: 0; cursor: pointer; font-weight: 400; }
.price-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.price-option span { display: block; text-align: center; }
.price-option .price-option-name {
	min-width: 110px;
	padding: 10px 16px 2px;
	border: 1px solid #cfcfcf; border-bottom: 0;
	border-radius: 2px 2px 0 0;
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--yf-grey);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.price-option .price-option-price {
	padding: 2px 16px 10px;
	border: 1px solid #cfcfcf; border-top: 0;
	border-radius: 0 0 2px 2px;
	font-size: 15px; font-weight: 600; color: var(--yf-ink);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.price-option:hover span { border-color: var(--yf-ink); }
.price-option input:checked ~ span { background: var(--yf-ink); border-color: var(--yf-ink); color: var(--yf-white); }
.price-option input:focus-visible ~ span { outline: 2px solid var(--yf-ink); outline-offset: 2px; }

/* ---------- Page spacing ---------- */
body > .container { padding-top: 10px; }
#frmCart { padding-top: 20px; }
.container > .row > .col-md-12 > h1:first-child,
.container > .row > .col-sm-12 > fieldset > legend h1 { margin-top: 20px; }

/* ---------- Sold out ---------- */
.pd-thumb { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.is-sold-out .pd-thumb img { filter: grayscale(100%); opacity: .5; }
.sold-out-band {
	position: absolute; left: -12px; right: -12px; top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,.92);
	border-top: 1px solid var(--yf-ink);
	border-bottom: 1px solid var(--yf-ink);
	color: var(--yf-ink);
	text-align: center;
	font: 600 11px/1 'Montserrat', sans-serif;
	letter-spacing: .3em;
	text-transform: uppercase;
	padding: 9px 0 9px .3em;     /* extra left pad balances the trailing letter-spacing */
	pointer-events: none;
}
.product-content ul li.is-sold-out .productListPrice { color: var(--yf-light); font-weight: 500; }
.product-content ul li.is-sold-out:hover { border-color: var(--yf-line); box-shadow: none; }

#product-detail-content .pd-thumb { float: left; }
#product-detail-content .pd-thumb img { float: none; }
#product-detail-content .sold-out-band { left: 0; right: 0; font-size: 15px; padding: 16px 0 16px .3em; }
#product-detail-content.is-sold-out .productDetailPrice { background: #bdbdbd; box-shadow: inset 0 0 0 4px #bdbdbd, inset 0 0 0 5px rgba(255,255,255,.7); }
.sold-out-note { clear: both; border-top: 1px solid var(--yf-line); padding: 16px 0 0; margin: 10px 0 20px; color: var(--yf-grey); }
.sold-out-note p { margin-bottom: 14px; }

/* ---------- Checkout upsell modal ---------- */
#upsellModal .modal-content {
	border-radius: 2px; border: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25);
	/* header and footer stay put, only the product grid scrolls - keeps "Continue" in view on phones */
	display: flex; flex-direction: column; max-height: calc(100vh - 60px);
}
#upsellModal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#upsellModal .modal-header { border-bottom: 1px solid var(--yf-line); padding: 20px 24px 14px; text-align: center; }
#upsellModal .modal-title { font-size: 20px; margin: 0 0 4px; letter-spacing: .04em; }
#upsellModal .upsell-intro { margin: 0; color: var(--yf-grey); font-size: 13px; }
#upsellModal .modal-body { padding: 20px 24px; }
.upsell-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.upsell-item {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	border: 1px solid var(--yf-line); border-radius: 2px; padding: 12px 10px;
	transition: border-color .15s ease;
}
.upsell-item img { width: 100%; height: 120px; object-fit: contain; margin-bottom: 8px; }
.upsell-item .upsell-name { font-size: 12px; line-height: 1.35; min-height: 32px; }
.upsell-item .upsell-price { font-weight: 600; margin: 4px 0 10px; }
.upsell-item .upsell-add { width: 100%; margin-top: auto; }
.upsell-item.is-added { border-color: var(--yf-ink); }
.upsell-item .upsell-add.is-added, .upsell-item .upsell-add.is-added:disabled { background: var(--yf-ink); color: var(--yf-white); border-color: var(--yf-ink); opacity: 1; }
/* added items: hovering / focusing the button offers "Remove" */
.upsell-add .upsell-remove-label { display: none; }
.upsell-add.is-added:hover .upsell-added-label, .upsell-add.is-added:focus-visible .upsell-added-label { display: none; }
.upsell-add.is-added:hover .upsell-remove-label, .upsell-add.is-added:focus-visible .upsell-remove-label { display: inline; }
.upsell-add.is-added:hover, .upsell-add.is-added:focus-visible { background: var(--yf-white) !important; color: var(--yf-danger) !important; border-color: var(--yf-danger) !important; }
/* touch screens have no hover: show a small hint under added items instead */
.upsell-tap-hint { display: none; font-size: 10px; color: var(--yf-light); margin-top: 4px; letter-spacing: .04em; }
@media (hover: none) {
	.upsell-item.is-added .upsell-tap-hint { display: block; }
	.upsell-add.is-added:hover { background: var(--yf-ink) !important; color: var(--yf-white) !important; border-color: var(--yf-ink) !important; }
	.upsell-add.is-added:hover .upsell-added-label { display: inline; }
	.upsell-add.is-added:hover .upsell-remove-label { display: none; }
}
#upsellModal .modal-footer { border-top: 1px solid var(--yf-line); padding: 14px 24px; }
#upsellModal .upsell-subtotal { float: left; line-height: 40px; font-size: 13px; color: var(--yf-grey); }
@media (max-width: 767px) {
	#upsellModal .modal-dialog { margin: 10px; }
	#upsellModal .modal-content { max-height: calc(100vh - 20px); }
	#upsellModal .modal-header { padding: 14px 16px 10px; }
	#upsellModal .modal-title { font-size: 17px; }
	#upsellModal .modal-body { padding: 12px 16px; }
	#upsellModal .modal-footer { padding: 10px 16px; }
	.upsell-list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.upsell-item img { height: 100px; }
	#upsellModal .modal-footer .btn { width: 100%; margin: 6px 0 0 !important; }
	#upsellModal .upsell-subtotal { float: none; display: block; line-height: 1.4; text-align: center; margin-bottom: 4px; }
}

/* ---------- Mini cart ---------- */
#minicart { background: var(--yf-panel); border: 1px solid var(--yf-line); border-radius: 2px; list-style: none; margin-bottom: 20px; padding: 10px; }
#minicart a { color: var(--yf-ink); }
#minicart .miniCartTotal { color: var(--yf-ink); }

/* ---------- Cart / checkout ---------- */
#frmCart h3 { border-bottom: 1px solid var(--yf-line); margin: 0 10% 20px; padding: 0 0 15px; text-align: center; }
#cart .product-row td { vertical-align: middle; }
.help-block { font-size: 80%; color: var(--yf-light); }
.payment .radio + .radio { padding: 5px 0 0 0; }
.paypal-logo, .stripe-logo { max-height: 30px; padding: 0 0 0 10px; }
.terms { border-top: 1px solid var(--yf-line); padding: 10px 0 0 0; }
.terms label { font-weight: 400; }
.no-paypal { font-size: 11px; font-style: italic; }
fieldset legend { border-bottom: 1px solid var(--yf-line); }
.table > thead > tr > th { border-bottom: 2px solid var(--yf-ink); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.table > tbody > tr > td, .table > tfoot > tr > td { border-top: 1px solid var(--yf-line); }

.form-control { border-radius: 2px; border-color: #cfcfcf; box-shadow: none; }
.form-control:focus { border-color: var(--yf-ink); box-shadow: none; }
.input-group-addon { background: var(--yf-panel); border-color: #cfcfcf; border-radius: 2px; }
.control-label { font-weight: 500; }

/* ---------- Buttons (bootstrap 3 hooks) ---------- */
.button-row input, .button-row button { margin: 30px 0; }
.btn { border-radius: 2px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; padding: 10px 18px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn-sm { padding: 5px 10px; font-size: 11px; }

.btn-success, .btn-info, .btn-primary {
	color: var(--yf-white);
	background-color: var(--yf-ink);
	border: 2px solid var(--yf-ink);
}
.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active,
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	color: var(--yf-white);
	background-color: #333333;
	border-color: #333333;
}
.btn-default {
	color: var(--yf-ink);
	background-color: var(--yf-white);
	border: 2px solid var(--yf-ink);
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
	color: var(--yf-white);
	background-color: var(--yf-ink);
	border-color: var(--yf-ink);
}
.btn-danger {
	color: var(--yf-danger);
	background-color: var(--yf-white);
	border: 2px solid var(--yf-danger);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { color: var(--yf-white); background-color: var(--yf-danger); border-color: var(--yf-danger); }

/* "Pay with Card" button on the Stripe confirmation page */
.stripe-button-el, .stripe-button-el span {
	background: var(--yf-ink) !important;
	background-image: none !important;
	color: var(--yf-white) !important;
	text-shadow: none !important;
	box-shadow: none !important;
	border-radius: 2px !important;
	font-family: 'Montserrat', Arial, sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 12px !important;
}
.stripe-button-el span { padding: 0 24px !important; height: 44px !important; line-height: 44px !important; }
.stripe-button-el:hover, .stripe-button-el:hover span { background: #333333 !important; }

.alert { border-radius: 2px; }

/* ---------- Footer ---------- */
#footer-content {
	background: var(--yf-black);
	color: #bbbbbb;
	margin-top: 60px;
	padding: 40px 0 30px;
	font-size: 12px;
	letter-spacing: .02em;
}
#footer-content a { color: var(--yf-white); text-decoration: none; }
#footer-content a:hover { text-decoration: underline; }
#footer-content ul { margin: 0; padding: 0; }
#footer-content ul li { display: inline; list-style: none; padding: 0 2px 0 0; }
#footer-content p { margin: 0; padding: 0; float: right; text-align: right; }
#footer-content address { clear: right; display: block; float: right; text-align: right; color: #999999; }
#footer-content .card-payments-wrapper { text-align: center; }
#footer-content .card-payments-footer { max-width: 220px; margin-top: -14px; }
#footer-content .paypal-payments-footer { max-width: 62px; margin: -14px 0 0 10px; }
#footer-content .site-credit { margin: 30px 0 0 0; padding: 20px 0 0; float: none !important; text-align: center !important; color: #777777; border-top: 1px solid #222222; }
#footer-content .site-credit a { color: #999999; }

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
	.navbar-brand > img { height: 80px; }
	#minicart { margin-top: 15px; }
	.navbar-contact { padding-top: 14px; }
	#footer-content .footer-links { text-align: center; }
	#footer-content .footer-legal { text-align: center; }
	#footer-content .footer-legal p { float: none; text-align: center; }
	#footer-content .footer-legal address { float: none; text-align: center; }
	#footer-content .card-payments-footer { margin: 10px 0; }
	#footer-content .paypal-payments-footer { margin: 10px 0; }
}

@media (max-width: 768px) {
	.navbar-brand > img { height: 70px; }
	.navbar-contact { padding-top: 10px; font-size: 12px; }
	#product-detail-content img { float: none; display: block; margin: 0 auto 20px; }
	#product-detail-content .pd-thumb { float: none; display: block; width: fit-content; margin: 0 auto 20px; }
	#product-detail-content .pd-thumb img { margin: 0; }
}

@media (max-width: 600px) {
	.navbar-contact a { display: inline-block; font-size: 20px; padding: 12px 8px; }
	.navbar-contact a i { color: var(--yf-white); }
	.navbar-contact .navbar-cart { display: inline-block; }
	span.phone-txt { display: none; }
}

@media (max-width: 480px) {
	.navbar-brand > img { height: 60px; }
	.navbar-contact { padding-top: 4px; }
	.navbar-contact a { font-size: 18px; padding: 10px 6px; }

	.breadcrumb { font-size: 11px; }

	.cat-content ul {
		display: flex; flex-wrap: wrap; justify-content: space-between;
		padding: 0; margin: 0; list-style: none; gap: 1rem;
	}
	.cat-content ul li { margin: 0; flex: 0 0 calc(50% - .5rem); width: auto; }
	.cat-content ul li img { width: 100%; height: 100%; object-fit: cover; }
	.cat-content ul li a { height: 160px; }
	.cat-content ul li a .title-inner { font-size: 13px; }

	.product-content ul {
		display: flex; flex-wrap: wrap; justify-content: space-between;
		padding: 0; margin: 0; list-style: none; gap: 1rem;
	}
	.product-content ul li { margin: 0; flex: 0 0 calc(50% - .5rem); width: auto; }

	#product-detail-content h1 { width: 100%; font-size: 22px; }
	#product-detail-content .productDetailPriceWrapper { width: 100%; text-align: left; margin: 0 0 10px 0; float: none; }
	#product-detail-content .productDetailPrice { width: 86px; height: 86px; font-size: 15px; }
	.productDetailButtons .btn { margin: 0 0 12px 0; width: 100%; }
	#product-detail-content img { max-width: 100%; }

	#footer-content ul { text-align: center; }
	#footer-content p { float: none; margin: 20px 0 0 0; padding: 0; text-align: center; }
	#footer-content address { float: none; text-align: center; }
	#footer-content .card-payments-wrapper { text-align: center; }
}

@media (max-width: 360px) {
	.cat-content ul li a { height: 130px; }
}