/*
 * Phone layout for the deli theme.
 *
 * Loaded by deli_scripts() with media="(max-width: 767px)", so none of this
 * applies on desktop or tablet; those keep the original fixed 960px layout
 * from style.css. Rules here only undo fixed widths and restack columns.
 */

/* ---------- Let the page fit the screen ---------- */

html,
body {
	overflow-x: hidden;
}

/* style.css gives every full-width section min-width: 1024px. */
#featured, #kvalitet, #her-finner-du-oss, #verdensmat,
#page-meta, #page, #blogg, #page-delikitchen, #page-singleestate,
#page-products, #single-page-product, footer {
	min-width: 0;
}

.wrapper,
.f-wrapper,
.container {
	width: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

/* Nothing may be wider than its container. */
#page *, #page-meta *, #featured *, #single-page-product *, #page-products *, footer * {
	max-width: 100%;
}

img {
	height: auto;
}

/* Bootstrap-2 grid: stack the columns. */
.row {
	margin-left: 0;
}

[class*="span"] {
	float: none;
	width: 100%;
	margin-left: 0;
}

/* ---------- Header and menu ---------- */

#header {
	position: relative;
	height: auto;
	/* The desktop band image is drawn for an 89px bar; use a plain bar here. */
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

#header-shadow {
	display: none;
}

#header nav {
	width: auto;
}

#header nav ul {
	position: static;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 8px 8px 10px;
}

/* Logo on its own row above the links. */
#header nav ul li:has(h1) {
	order: -1;
	width: 100%;
	text-align: center;
	padding: 0;
}

#header h1 {
	top: 0;
}

#header nav ul li {
	padding: 6px 10px;
}

#header nav ul li a,
#header nav ul li.facebook a {
	font-size: 11pt;
	line-height: 1.4;
}

/* The header no longer overlaps the page, so drop the gap left for it. */
#page-meta {
	margin-top: 0;
}

#page-meta h3 {
	font-size: 14pt;
	line-height: 20pt;
}

/* ---------- Front page ---------- */

#featured {
	padding-top: 24px;
	padding-bottom: 40px;
}

/* The white box is a 960px background image on desktop; draw it with CSS. */
#featured #fbg {
	width: auto;
	height: auto;
	margin: 0 12px;
	padding: 4px 12px 16px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

#featured #fbg h3 {
	display: none;
}

#featured #feature-1,
#featured #feature-2 {
	float: none;
	width: auto;
	height: auto;
	margin: 12px 0 0;
}

#feature-1 img.wp-post-image,
#feature-2 img.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

#feature-1 img.wp-post-image {
	aspect-ratio: 615 / 280;
}

#feature-2 img.wp-post-image {
	aspect-ratio: 315 / 280;
}

#instagram-badge {
	float: none;
	display: block;
	position: static;
	margin: 20px auto 0;
}

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

/* Same 550x260 top crop as desktop, scaled to the screen. */
#single-page-product .main-product-image {
	width: 100%;
	height: auto;
	aspect-ratio: 550 / 260;
	box-sizing: border-box;
}

#single-page-product .main-product-image .imgholder,
#single-page-product .main-product-image img {
	width: 100%;
	max-width: none;
	height: 100%;
}

#single-page-product .main-product-image img {
	object-fit: cover;
	object-position: top;
}

/* "Hvis du liker ... vil du også like disse!" has a fixed 250px height. */
#single-page-product .related {
	height: auto;
	top: 0;
	margin-top: 20px;
}

/* Product cards (related products and product grids). */
.product-list {
	height: auto;
	margin-bottom: 20px;
}

/* The title is shifted up over the photo, so its row needs no height. */
.product-list li:not(.product-image) {
	height: 0;
}

.product-list li.product-image {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	box-sizing: border-box;
}

.product-list li.product-image a {
	display: block;
	height: 100%;
}

.product-list li.product-image img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* ---------- Store list (Våre butikker) ---------- */

#locations .row {
	gap: 0 16px;
}

#locations .locations.span4 {
	width: 100%;
	margin-bottom: 8px;
}

#locations .location-image {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
}

#locations .location-image {
	box-sizing: border-box;
}

#locations .location-image a {
	display: block;
	height: 100%;
}

#locations .location-image img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

#locations h3 {
	padding-top: 40px;
}

/* Two stores per row on larger phones and in landscape. */
@media (min-width: 560px) {
	#locations .locations.span4 {
		width: calc(50% - 8px);
	}
}

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

footer {
	padding-top: 30px;
	padding-bottom: 40px;
}

footer h3 {
	padding: 24px 0 10px;
	font-size: 10pt;
	color: #a19e95;
}

footer .sitemap li,
footer .mailto p {
	margin-bottom: 6px;
}

footer .copyright p {
	font-size: 12px;
	line-height: 16px;
	color: #8a8a8a;
}

footer .logo {
	margin-top: 30px;
}

footer .copyright {
	margin-top: 12px;
}