@charset "utf-8";

:root {
  --bg-color: #eee;
  --font-color: #000000;
  --white: #ffffff;
  --main-clr: #3B4CCA;
  --second-clr: #101958;
  --second-clr-line: #080D36;
  --red: #E04F5F;
  --form-gray: #a4a0a5;
}

@font-face { font-family: "Basic-Regular"; src: url("../assets/fonts/Mukta-Regular.ttf"); }
@font-face { font-family: "Basic-Medium"; src: url("../assets/fonts/Mukta-Medium.ttf"); }
@font-face { font-family: "Basic-Bold"; src: url("../assets/fonts/Mukta-Bold.ttf"); }

/* CSS Document */
html, body { height: 100%; }
body { padding: 0; margin: 0; color: var(--font-color); font-family: 'Basic-Regular', sans-serif; font-size: 16px; background: var(--bg-color); }

body>div.packet { height: auto; }
*, :after, :before { box-sizing: border-box; }

/* -------- BASIC CSS -------- */
h1 { font-size: 2.75em; color: var(--second-clr); text-transform: uppercase; margin: 0; padding: 0; line-height: 1em; }
h1, h2, h3, h4 { font-family: 'Basic-Bold', sans-serif; }
h5, h6 { font-family: 'Basic-Medium', sans-serif; }
h2 { font-size: 2.75em; color: var(--second-clr); text-transform: uppercase; margin: 0; padding: 0; line-height: 1em; }
h3 { font-size: 1.75em; margin: 8px 0 6px 0; padding: 0; }
h4 { font-size: 1.5em; padding: 0; margin: 26px 0 6px 0; }
h5 { font-size: 1em; padding: 0; margin: 8px 0 6px 0; }
h6 { font-size: 1em; }

a { color: var(--font-color); text-decoration: underline; }
a:hover { text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none;  }

iframe { width: 100% !important; }

button { transition: 0.4s all ease !important; }
button:hover { background: var(--bg-color) !important; color: var(--font-color) !important; }

.cleaner { clear: left; }
.align-center { text-align: center; }
.separator { border-right: 1px solid var(--second-clr-line); padding-right: 16px; margin-right: 16px; }
.noscroll { overflow: hidden; }
.bigger-info { font-size: 1.5em; font-family: 'Basic-Medium', sans-serif; }

/* -------- LAYOUT -------- */
.packet { position: relative; min-height: 100%; height: 100%; margin: 0; padding: 0; }
.head { position: relative; width: 100%; height: 100px; background: var(--main-clr); color: var(--white); box-sizing: border-box; font-family: 'Basic-Medium', sans-serif; }

.main-body { position: relative; width: 100%; min-height: 200px; margin: 0; padding: 0 0 330px 0; }
.content { background: var(--white); padding: 20px; }
.footer { position: absolute; bottom: 0; width: 100%; background: var(--second-clr); color: var(--white); }

.wrapper-in, .content-in, .footer-in { box-sizing: border-box; max-width: 1280px; min-height: 10px; margin: 0 auto; padding: 0 10px;  }
.footer-in { position: relative; padding: 14px 10px; height: 330px; }
.wrapper-in { position: relative; }

.main-column-content { margin-top: 10px; }
.main-column { max-width: 950px !important; }

@media screen and (min-width: 981px) {
	.nav-mobile, .nav-mobile-sortiment, .nav-mobile-main { display: none !important; }
}

/* -------- PAGE -------- */
.content ul { list-style-image: url(../assets/ico/dot-blue.svg); padding-left: 16px; }

table:not(.cart) { border-collapse: collapse; width: 100%; }
table:not(.cart) tr td { border-bottom: 1px solid var(--second-clr); line-height: 2.25em; }
.td-item { width: 30%; font-family: 'Basic-Medium', sans-serif; }

/* -------- BUTTONS -------- */
.button-blue, .button-orange { display: inline; border-radius: 4px; padding: 6px 20px; text-decoration: none; text-transform: uppercase; cursor: pointer; font-family: 'Basic-Medium', sans-serif; }
.button-blue, .button-blue:hover { background: var(--second-clr); color: var(--white); }
.button-orange { background: var(--main-clr); color: var(--white); }
.button-center { display: block !important; width: 200px !important; margin: 0 auto !important; text-align: center; }

/* -------- GRIDS -------- */
.grid-body { display: grid; grid-template-columns: 280px auto; column-gap: 30px; margin-top: 20px; margin-bottom: 40px; }

.grid-50, .grid-25, .grid-33 { display: grid; margin-bottom: 32px; }
.grid-50 { grid-template-columns: repeat(2, 1fr); column-gap: 2%; row-gap: 1.25em; }
.grid-33 { grid-template-columns: repeat(3, 1fr); column-gap: 2%; row-gap: 1.25em; }

.grid-product { display: grid; grid-template-columns: 43% 55%; column-gap: 2%; margin-bottom: 40px; }
.grid-product .unit { width: 100%; background: var(--white); padding: 16px 26px; }

/* -------- GRID - PRUDUCT LIST -------- */
.grid-25 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-25 .unit { position: relative; padding: 14px 6px 70px 6px; background: var(--white); }

.grid-25 .unit h5 { margin-bottom: 0 !important; }
.grid-25 .unit img { max-height: 110px; width: auto; margin-bottom: 8px; }
.grid-25 .unit a { text-decoration: none; }
.grid-image { width: 100%; text-align: center; }
.grid-price { position: absolute; bottom: 26px; color: var(--main-clr); font-size: 1.5em; font-family: 'Basic-Medium', sans-serif; }
.grid-availability { position: absolute; bottom: 6px; color: var(--second-clr); text-transform: uppercase; font-size: 0.9em; }

.label, .label-sale { position: absolute; padding: 0 10px; font-size: 0.8em; text-transform: uppercase; font-family: 'Basic-Medium', sans-serif; color: var(--white); }
.label { left: 6px; }
.label-sale { background: #c00; right: 6px; top: 6px; }

/* -------- HEAD -------- */
.fake-line { position: absolute; right: 0; top: 0; background: var(--second-clr); height: 30px; width: 50%; }

.head a, .footer a { color: var(--white); text-decoration: none; }
.head a:hover, .footer a:hover { text-decoration: underline; }

.head-logo { width: 300px; float: left; }
.head-logo a { display: block; margin-left: -10px; height: 100px; max-width: 200px; background: url(../assets/logo.svg); background-position: 0 center; background-repeat: no-repeat; background-size: contain; transition: all .3s ease-in-out; }
.head-logo a:hover { transform: scale(1.05); }

.head-contact-line { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; position: absolute; right: 0; left: 320px; height: 30px; border-radius: 0 0 0 28px; background: var(--second-clr); line-height: 30px; padding-left: 26px; padding-right: 10px; font-size: 0.9em; }
.head-menu { flex: 75%; }
.head-option { flex: 25%; justify-content: flex-end; display: flex; }
.head-lang, .head-currency { position: relative; }
.head-menu img { margin-left: 6px; transition: all .2s ease-in-out; }
.head-menu img { height: 18px; width: auto; vertical-align: middle; }
.head-menu img:hover { transform: scale(1.05); }
.menu-txt { margin-right: 16px; }

.current-value { display: flex; align-items: center; height: 30px; cursor: pointer; justify-content: flex-end; }
.lang-flag { margin-right: 3px; text-transform: uppercase; }

.lang-menu-dropdown, .currency-menu-dropdown { display: none; position: absolute; right: 0; top: 30px; background: var(--white); width: 80px; border-radius: 4px; z-index: 100; padding: 10px 8px; text-transform: uppercase; }
.lang-menu-dropdown a, .currency-menu-dropdown a { display: block; text-decoration: none; line-height: 2em; color: var(--font-color); }
.lang-menu-dropdown a:hover, .currency-menu-dropdown a:hover { color: var(--font-color); text-decoration: underline; }
.lang-menu-dropdown a img, .lang-flag img { height: 18px; width: auto; margin-right: 8px; vertical-align: middle; }

.head-second-line { display: flex; align-items: center; height: 100px; margin-left: 320px; padding-top: 30px; box-sizing: border-box; }
.head-search { flex: 80%; }
.head-search form { display: flex; margin: 0 auto; width: 60%; }
.head-search form input { flex: 1; border-radius: 4px 0 0 4px; margin-right: 0; }
.head-search form button { flex: 0.25; border-radius: 0 4px 4px 0; margin-left: -4px; }

.head-cart { flex: 20%; justify-content: flex-end; display: flex; align-items: center; column-gap: 10px; font-size: 0.9em; line-height: 1.3em; text-align: right; }
.product-cart-button { display: block; height: 40px; width: 40px; background: var(--white); border-radius: 4px; }
.product-cart-button span { display: block; width: 40px; height: 40px; background: url(../assets/ico/cart-outline.svg); background-position: center; background-size: auto 18px; background-repeat: no-repeat; }
.head-cart span { color: var(--white); text-transform: uppercase; font-family: 'Basic-Medium', sans-serif; }

/* -------- NAV SORTIMENT -------- */
.nav-sortiment-head { background: var(--second-clr); color: var(--white); line-height: 2.5em; border-radius: 20px 20px 0 0; }
.nav-sortiment-head span, .product-nav-line-sortiment span { display: inline-block; background: url(../assets/ico/list-flat.svg); background-repeat: no-repeat; background-size: 24px auto; background-position: center left; padding-left: 32px; margin-left: 10px; text-transform: uppercase; font-family: 'Basic-Medium', sans-serif; }

nav { margin: 0; padding: 0; list-style: none; background: var(--white); }
nav li { line-height: 2.5em; border-bottom: 1px solid var(--bg-color); }
nav li:hover { background: var(--bg-color); }
nav li a { display: block; text-decoration: none; padding: 0 16px 0 20px; margin-left: 16px; background: url("../assets/ico/plus-square-solid.svg"); background-repeat: no-repeat; background-size: 0.75em; background-position: left center; }
nav li ul li { background: var(--white); }
nav li ul li a { font-size: 0.9em; color: var(--font-color) !important; padding: 0 16px 0 16px; margin-left: 22px; background: url("../assets/ico/angle-right-solid.svg") !important; background-repeat: no-repeat !important; background-size: 0.6em !important; background-position: left center !important; }

.cat-active { border-bottom: none !important; background: var(--main-clr); }
.cat-active:hover { background: var(--main-clr) !important; }
.cat-active a { background: url("../assets/ico/minus-square-solid.svg"); background-repeat: no-repeat; background-size: 0.75em; background-position: left center; color: var(--white); }

.selected { background: var(--bg-color); }
.selected a { color: var(--font-color) !important; }

/* -------- HOMEPAGE -------- */
.banner img { width: 100% !important; border-radius: 20px; }
.main-banner { margin-bottom: 1.25em; }

/* -------- ALERST -------- */
.alert-success, .alert-warning { width: 100%; padding: 10px 15px; margin-bottom: 16px; }
.alert-success { background: #e9f6d8; color: var(--font-color); }
.alert-warning { background: #f6d8d8; color: var(--font-color); }

/* -------- FORMS -------- */
form input, form button, form select, form textarea, button { border: none; outline: none; padding: 10px 8px; }
form button, button { cursor: pointer; background: var(--second-clr); color: var(--white); font-family: 'Basic-Medium', sans-serif; border-radius: 4px;  }

.content form label, label { display: block; padding: 14px 0 2px 0; font-size: 0.85em; font-family: 'Basic-Medium', sans-serif; text-transform: uppercase;  }
.content form input[type="text"], .content form input[type="email"], .content form textarea, .content form select { width: 100%; border: 1px solid var(--bg-color) !important; box-sizing: inherit; cursor: pointer; border-radius: 4px; margin: 0; }
.content form button, .content button { padding: 6px 16px; margin-top: 10px; font-size: 1em; font-family: inherit; }

button.orange { padding: 6px 56px; background: var(--main-clr); text-transform: uppercase; font-size: 1.1em; }

.form-grid-50 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2%; }

/* -------- FORM - CHECKBOX -------- */
.checkbox-wrapper { --s: 24px; --gap: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); margin: 14px 0 4px 0; }
.checkbox-wrapper span { flex: 1 1 0; min-width: 0; word-break: break-word; }
.user-checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: var(--s); height: var(--s); margin: 0; border: 1px solid var(--form-gray); border-radius: 4px; background: var(--white); cursor: pointer; flex: 0 0 var(--s); }
.user-checkbox:checked{ background: var(--second-clr); border-color: var(--second-clr); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: 70%; }

form label.error{ flex-basis: 100%; order: 99; margin-left: calc(var(--s) + var(--gap)); pointer-events: none; font-family: 'Basic-Regular', sans-serif; color: #ff0000; text-transform: none; padding-top: 6px; }

/* -------- RADIO BUTTON -------- */
.radio-section { display: flex; justify-content: center; }
.radio-list { width: 100%; }
.radio-item [type="radio"] { display: none; }
.radio-item label { display: flex !important; align-items: center; margin-top: 0 !important; margin-bottom: 10px !important; border: 1px solid var(--bg-color); border-radius: 4px; cursor: pointer; white-space: nowrap; position: relative;  font-family: 'Basic-Regular', sans-serif; text-transform: none; }
.form-cart .radio-item label:after, .form-cart .radio-item label:before { content: ""; position: absolute; border-radius: 50%; }
.form-cart .radio-item label:after { height: 19px; width: 19px; border: 2px solid var(--second-clr); left: 19px; top: calc(50% - 9px); }
.form-cart .radio-item label:before { background: var(--second-clr); height: 19px; width: 19px; left: 19px; top: calc(50% - 9px); opacity: 0; visibility: hidden; } 
.radio-item [type="radio"]:checked ~ label { border-color: var(--second-clr); }
.radio-item [type="radio"]:checked ~ label::before { opacity: 1; visibility: visible; }

/* -------- FOOTER -------- */
.footer h3 { padding-top: 0; margin-top: 0; text-transform: uppercase; }
.footer-contact { margin-bottom: 26px; }
.footer .mail { background: url(../assets/ico/email-outline.svg); }
.footer .phone { background: url(../assets/ico/phone-outline.svg); }
.footer .mail, .footer .phone { display: inline-block; padding-left: 24px; background-repeat: no-repeat; background-position: center left; background-size: auto 16px; }
.footer-menu { margin-top: 6px; margin-bottom: 18px; }

.footer form { display: flex; width: 100%; }
.footer form input { flex: 1.5; border-radius: 4px 0 0 4px !important; }
.footer form button { flex: 1; border-radius: 0 4px 4px 0 !important; background: var(--main-clr); color: var(--white); }

.copy { width: 100%; margin-top: 28px; text-align: center; text-transform: uppercase; }
.potrebujesweb-logo { background-image: url("https://data.potrebujesweb.cz/img/logo/2024POTREBUJESWEB-logo.svg"); width: 100%; height: 42px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-top: 8px; }
.potrebujesweb-logo span { display: none; }

/* -------- PRODUCT -------- */
.product-nav-line { width: 100%; margin: 20px 0; background: var(--white); color: var(--second-clr); font-family: 'Basic-Medium', sans-serif; font-size: 1.1em; line-height: 2.25em; }
.product-nav-line-sortiment { width: 280px; background: var(--second-clr); color: var(--white); float: left; text-transform: uppercase; text-align: center; }
.product-nav-line ul li { display: inline; margin-left: 24px; padding-left: 36px; background: url(../assets/ico/chevron-right-solid.svg); background-repeat: no-repeat; background-position: center left; background-size: auto 24px; }
.product-nav-line ul li:first-child { background: none !important; padding-left: 0; }
.product-nav-line ul li a { color: var(--second-clr); }

.grid-product p { margin: 10px 0 6px 0; padding: 0; }
.grid-product a { color: var(--second-clr); text-transform: uppercase; }
.grid-product img { width: 80%; height: auto; }
.grid-product .unit:first-child { text-align: center; }

.product-availability { border-top: 1px solid var(--bg-color); border-bottom: 1px solid var(--bg-color); padding: 12px 0; margin: 28px 0 0 0; font-family: 'Basic-Medium', sans-serif; text-transform: uppercase; }
.product-availability-icon { padding-left: 28px; background-repeat: no-repeat !important; background-position: center left !important; background-size: 20px auto !important; }
.product-price { font-family: 'Basic-Medium', sans-serif; margin: 28px 0; }
.product-price span { color: var(--main-clr); font-size: 2.25em; line-height: 1em; }

.p-available { color: #18a301; }
.p-unavailable { color: #f44336; }

/* -------- LIST -------- */
.list-filter { margin: 30px 0 20px 0; }
.list-filter div { margin-bottom: 12px; }
.filter-type { display: inline-block; width: 100px; font-family: 'Basic-Medium', sans-serif; }
.checkbox-group { display: flex; column-gap: 20px; flex-wrap: wrap; }

.user-select { border: 1px solid var(--form-gray); padding: 4px 48px 4px 8px; font-family: 'Basic-Medium', sans-serif; background: url(../assets/ico/arrow-down.svg) right 6px top 10px/16px no-repeat, linear-gradient(to left, var(--white) 26px, var(--white) 36px); outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 4px; font-size: 1em; }

/* -------- CART -------- */
.cart-nav { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2%; margin: 0 0 26px 0; }
.cart-nav a { display: block; padding: 10px 2px; border: 1px solid var(--bg-color); text-align: center; text-decoration: none; font-family: 'Basic-Medium', sans-serif; font-size: 0.9em; }
.cart-nav .active { background: var(--bg-color); }

.cart { width: 100%; line-height: 1.5em; border-collapse: collapse; }
.cart tr { height: 70px; border-bottom: 1px solid var(--bg-color); }
.cart-item-image { width: 7%; }
.cart-item-image img { max-height: 30px; max-width: 40px; }
.cart-item { width: 53%; font-family: 'Basic-Medium', sans-serif; }
.cart-item span, .cart-item-mobile span { display: block; font-size: 0.75em; }
.cart-item-quantity { width: 20%; }
.cart-item-price { width: 16%; text-align: right; }
.cart-item-del { width: 4%; text-align: right; padding-top: 8px; }
.cart-item-del img { width: 20px; height: 20px; cursor: pointer; }
.cart-item-mobile { display: none; }

.cart-sum { width: 100%; text-align: right; font-family: 'Basic-Medium', sans-serif; margin-top: 26px; }
.cart-sum span { display: inline-block; padding-left: 10px; font-size: 2em; font-family: 'Basic-Medium', sans-serif; }

.quantity { display: inline-block; border: 1px solid var(--bg-color); padding: 0 38px; position: relative; vertical-align: middle; }
.quantity input[type="number"] { display: inline-block; border: 0; height: 38px; width: 38px; margin: 0; padding: 0; text-align: center; -moz-appearance: textfield; }
.quantity input[type="number"]::-webkit-outer-spin-button, .quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.increase, .decrease { cursor: pointer; height: 38px; width: 38px; position: absolute; }
.increase { border-left: 1px solid var(--bg-color); left: auto; right: 0; top: 0; }
.decrease { border-right: 1px solid var(--bg-color); left: 0; auto: 0; top: 0; }
.increase:before, .decrease:before { font-size: 0.9em; height: 100%; width: 100%; position: absolute; top: 0; left: 0; line-height: 38px; text-align: center; }
.increase:before { content: "+"; }
.decrease:before { content: "-"; }

.cart-button { display: flex; margin-top: 26px; }
.cart-button button { margin-left: auto; text-transform: uppercase; }
.cart-button button span { display: block; font-size: 0.75em; line-height: 1.5em; } 

.title-transport { background-image: url("../assets/ico/truck.svg"); }
.title-payment { background-image: url("../assets/ico/payment.svg"); }
.title-transport, .title-payment { background-repeat: no-repeat; background-size: auto 24px; background-position: left center; padding-left: 36px; }

.choice-price { width: 100%; text-align: right; font-family: 'Basic-Medium', sans-serif; color: var(--second-clr); }
.form-cart .radio-item label { padding: 10px 10px 10px 60px !important; }
.form-cart .radio-item label div:first-child { max-width: 200px; }

.logo-service { display: block; height: 20px; vertical-align: middle; margin-bottom: 6px; }

.grid-cart h4 { padding-top: 0; margin-top: 0; }

.sum { width: 100%; }
table.sum tr td { line-height: 1.75em !important; padding: 6px 0; border-bottom: 1px solid var(--bg-color); }
.sum-item { width: 70%; }
.sum-quantity { width: 10%; text-align: center; }
.sum-price { width: 20%; text-align: right; }

.cartOriginalPrice { display: block; font-size: 0.75em; color: var(--red); margin-top: -10px; text-decoration: line-through; }

/* -------- PAGINACE -------- */
#pagination { margin: 20px 0; }
#pagination .page-link { display: inline-block; padding: 3px 12px; margin: 0 3px; border: 1px solid var(--form-gray); cursor: pointer; border-radius: 4px; transition: background 0.2s; }
#pagination .page-link:first-child { margin-left: 0 !important; }
#pagination .page-link.active { background: var(--second-clr);; color: var(--white); cursor: default; }
#pagination .ellipsis { display: inline-block; padding: 6px 12px; color: var(--form-gray); }

/* -------- RESPONSIVITY -------- */
@media screen and (max-width: 1124px) {
	.grid-25 { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 980px) {
	.main-body { padding: 0 0 840px 0; }
	.footer-in { height: 840px; }
	
	.head-contact-line, .fake-line, .head-search, .nav-column, .product-nav-line-sortiment { display: none; }
	.head { height: 60px; }
	.head-logo, .head-second-line { width: 50%; float: left; }
	.head-second-line { height: 60px; margin-left: 0; padding-top: 0; }
	.head-logo a { height: 60px; }
	.head-cart { width: 100%; }
	
	.nav-mobile { display: flex; height: 40px; width: 100%; background: var(--second-clr); }
	.nav-mobile-left, .nav-mobile-right { flex: 50%; padding: 0 10px; box-sizing: border-box; color: var(--white); font-family: 'Basic-Medium', sans-serif; line-height: 40px; text-transform: uppercase; }
	.nav-mobile-right { position: relative; }	
	.nav-mobile-left span, .nav-mobile-right span { background-repeat: no-repeat !important; background-size: 24px auto; background-position: center left; cursor: pointer; }
	.nav-mobile-left span { background: url(../assets/ico/list-flat.svg); padding-left: 32px; }
	span.menu-close, span.menu-show { position: absolute; right: 10px; top: 8px; display: block; width: 24px; height: 24px;  }
	span.menu-show { background: url(../assets/ico/menu-solid.svg); }
	span.menu-close { display: none; background: url(../assets/ico/cross-solid.svg); }
	
	.nav-mobile-sortiment, .nav-mobile-main { display: none; }
	
	.nav-mobile-main { position: absolute; left: 0; right: 0; height: 100%; z-index: 100; background: var(--second-clr); color: var(--white); text-align: center; }
	.nav-mobile-main ul, .nav-mobile-currency { border-bottom: 1px solid var(--second-clr-line); margin-bottom: 20px; }
	.nav-mobile-main ul li { background: none; border-bottom: none; padding: 0 0 10px 0; }
	.nav-mobile-main a { color: var(--white) !important; text-decoration: none; }
	.nav-mobile-main a:hover { color: var(--white) !important; }	
	
	.nav-mobile-contact, .nav-mobile-option { display: flex; justify-content: center; gap: 10px; }
	.nav-mobile-option, .nav-mobile-currency { padding-bottom: 20px; }
	.nav-mobile-contact img, .nav-mobile-option img { height: 30px; width: auto; }
	
	.grid-body, .grid-33 { grid-template-columns: repeat(1, 1fr); column-gap: 0; }
	.main-column { max-width: 100% !important; width: 100% !important; }	

	.product-nav-line ul li { margin-left: 6px; padding-left: 20px; }
}

@media screen and (max-width: 860px) {	
	.grid-product { grid-template-columns: repeat(1, 1fr); column-gap: 0; }
}

@media screen and (max-width: 680px) {
	.grid-50, .cart-nav, .form-grid-50 { grid-template-columns: repeat(1, 1fr); column-gap: 0; }
	.grid-25 { grid-template-columns: repeat(2, 1fr); }
	
	.cart-item, .cart-item-image { display: none; }
	.cart-item-quantity { width: 50%; }
	.cart-item-price { width: 42%; }
	.cart-item-del { width: 8%; }
	.cart-item-mobile { display: table-cell !important; border-bottom: none !important; font-family: 'Basic-Medium', sans-serif; }
}

@media screen and (max-width: 480px) {
	.grid-25 { grid-template-columns: repeat(1, 1fr); column-gap: 0; }
}