/*
Theme Name: Storefront Designlab
Theme URI: https://designlab.dk
Description: Child theme of Storefront for designlab.dk. A bold, playful gift-shop look and layout pattern inspired by radbag.dk (Firebox/Radbag): a benefits strip, a big hero banner, rounded "shop now" buttons, punchy sale badges, and an icon-driven category grid. All copy, colours and images are designlab's own — nothing is copied from radbag.dk, only the general layout patterns.
Author: Claude (for designlab.dk)
Template: storefront
Version: 1.0.0
Text Domain: storefront-designlab
*/

/* -----------------------------------------------------------------------
   0. DESIGN TOKENS
   Edit these to match designlab's brand. Everything below references
   these variables, so re-colouring the whole theme is a one-place edit.
----------------------------------------------------------------------- */
:root {
	--dl-primary: #ff3b7f;       /* main accent (buttons, badges, links) */
	--dl-primary-dark: #d81b60;  /* hover state */
	--dl-secondary: #1b1f3b;     /* dark navy — headings, footer */
	--dl-accent-yellow: #ffd23f; /* sale badges / highlights */
	--dl-bg: #ffffff;            /* page background */
	--dl-card-bg: #ffffff;
	--dl-border-radius: 14px;
	--dl-border-radius-pill: 999px;
	--dl-shadow: 0 6px 20px rgba(27, 31, 59, 0.08);
	--dl-font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

body {
	background: var(--dl-bg);
	color: var(--dl-secondary);
}

h1, h2, h3, h4, .site-title, .storefront-primary-navigation {
	font-family: var(--dl-font-heading);
}

a {
	color: var(--dl-primary);
}
a:hover {
	color: var(--dl-primary-dark);
}

/* -----------------------------------------------------------------------
   1. TOP BENEFITS STRIP
   A slim bar above the header, e.g. "Fri fragt over 499 kr | 100 dages
   returret | Sikker betaling" — the same job radbag's top strip does.
----------------------------------------------------------------------- */
.dl-benefits-strip {
	background: var(--dl-secondary);
	color: #fff;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}
.dl-benefits-strip .dl-benefits-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
	padding: 8px 16px;
}
.dl-benefits-strip .dl-benefit-item {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.dl-benefits-strip .dl-benefit-item svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* -----------------------------------------------------------------------
   2. HEADER — compact, coolshop.dk-style single band: logo, centered
   search field, and account/cart icons close together, with a slim menu
   row directly underneath (minimal gap, whole header shorter overall).
   !important is used on the core layout properties below because
   Storefront's own header CSS uses higher-specificity selectors (ID-based)
   that otherwise win over plain class selectors and silently break this
   layout back into stacked rows.
----------------------------------------------------------------------- */
.site-header {
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	padding: 0;
	overflow: visible;
	position: relative;
}
.site-header .col-full {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 0.75rem 1rem;
	padding: 12px 0;
	overflow: visible;
}
.site-header .site-search .search-toggle,
.site-header .handheld-navigation {
	color: var(--dl-secondary);
}
.site-branding {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	float: none !important;
}
.site-branding img {
	max-height: 42px;
	width: auto;
}

/* Search field — same line as the logo, centered in the row. */
.dl-header-search {
	order: 2;
	display: flex;
	align-items: center;
	flex: 1 1 260px;
	min-width: 0;
	max-width: 420px;
	margin: 0 auto !important;
	align-self: center;
}
.dl-header-search .dl-search-form {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
}
.dl-header-search input.search-field {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	border: 1px solid #e6e6ec;
	background: #f7f7fa;
	border-radius: var(--dl-border-radius-pill) 0 0 var(--dl-border-radius-pill);
	padding: 10px 18px;
	font-size: 0.9rem;
	height: 42px;
	box-sizing: border-box;
	/* Removes the native browser search icon some browsers draw inside
	   <input type="search">; harmless to keep even though the field now
	   uses type="text". */
	-webkit-appearance: none;
	appearance: none;
}
.dl-header-search input.search-field::-webkit-search-decoration,
.dl-header-search input.search-field::-webkit-search-cancel-button,
.dl-header-search input.search-field::-webkit-search-results-button,
.dl-header-search input.search-field::-webkit-search-results-decoration {
	display: none;
}
.dl-header-search button {
	border: none;
	background: var(--dl-primary);
	color: #fff;
	padding: 0 20px;
	margin: 0;
	border-radius: 0 var(--dl-border-radius-pill) var(--dl-border-radius-pill) 0;
	cursor: pointer;
	flex: 0 0 auto;
	height: 42px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}
/* Storefront's own search-icon toggle is replaced by the bar above */
.site-header .search-toggle {
	display: none;
}

/* Nav row: Storefront wraps the menu and the mini-cart together in
   .primary-navigation-wrapper — that wrapper is block-level by default,
   which is why the menu and the cart were stacking on separate lines.
   Forcing it to flex puts them on the same line, cart on the right. */
.primary-navigation-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: nowrap !important;
	border-top: 1px solid #f0f0f4;
	padding: 2px 0;
}
#site-navigation.main-navigation {
	border-top: none;
	min-height: auto;
	margin-top: 0;
	flex: 1 1 auto;
	min-width: 0;
}
#site-navigation.main-navigation ul.menu,
#site-navigation.main-navigation ul.menu > li {
	margin: 0;
}
#site-navigation.main-navigation ul.menu > li > a,
#site-navigation.main-navigation ul li > a {
	padding: 7px 12px;
	font-size: 0.9rem;
	line-height: 1.2;
	white-space: nowrap;
}

/* Basket — same line as the menu, same font-size (0.9rem), with a bit
   more breathing room between the "X vare" text and the basket icon. */
.site-header-cart,
.site-header .header-cart-wrapper {
	display: flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	margin-left: 0;
	font-size: 0.9rem;
	white-space: nowrap;
}
.site-header-cart .amount,
.site-header-cart a {
	font-size: inherit;
}
.site-header-cart a.cart-contents {
	display: flex !important;
	align-items: center;
	gap: 8px;
}

@media (max-width: 992px) {
	.dl-header-search {
		flex-basis: 180px;
		max-width: 260px;
	}
	#site-navigation.main-navigation ul.menu > li > a,
	#site-navigation.main-navigation ul li > a {
		padding: 7px 8px;
		font-size: 0.85rem;
	}
}

@media (max-width: 768px) {
	.site-header .col-full {
		flex-wrap: wrap !important;
	}
	.dl-header-search {
		order: 4;
		flex: 1 1 100%;
		max-width: none;
		width: 100%;
		margin: 4px 0 0 !important;
	}
	.primary-navigation-wrapper {
		flex-wrap: wrap !important;
	}
}

/* -----------------------------------------------------------------------
   3. HERO BANNER
   Full-width bold banner with a big rounded CTA, like radbag's homepage
   hero. Rendered via the [dl_hero] shortcode or the front-page hook.
----------------------------------------------------------------------- */
.dl-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	margin: 0 0 3rem;
	background: linear-gradient(120deg, var(--dl-primary) 0%, #ff8a65 100%);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	color: #fff;
	border-radius: 0 0 28px 28px;
}
.dl-hero .dl-hero-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 2.5rem;
}
.dl-hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 0.75rem;
	color: #fff;
}
.dl-hero p {
	font-size: 1.15rem;
	max-width: 32ch;
	margin: 0 0 1.5rem;
	opacity: 0.95;
}
.dl-hero .dl-btn {
	background: var(--dl-secondary);
}

/* -----------------------------------------------------------------------
   4. BUTTONS — big, rounded, punchy
----------------------------------------------------------------------- */
.dl-btn,
.storefront-primary-navigation ul li > a.dl-btn,
button.dl-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--dl-primary);
	color: #fff !important;
	font-weight: 700;
	text-transform: none;
	border: none;
	border-radius: var(--dl-border-radius-pill);
	padding: 0.85em 1.8em;
	transition: transform 0.15s ease, background 0.15s ease;
}
.dl-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
	background: var(--dl-primary-dark);
	transform: translateY(-2px);
	color: #fff !important;
}
.woocommerce a.added_to_cart {
	border-radius: var(--dl-border-radius-pill);
}

/* -----------------------------------------------------------------------
   5. SALE / PERSONALISABLE-STYLE BADGES
   Radbag leans hard on bold "-30%" and "Personalisable" tags over the
   product image. Recreate the same punch with WooCommerce's own badge.
----------------------------------------------------------------------- */
.woocommerce span.onsale,
ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	background: var(--dl-accent-yellow);
	color: var(--dl-secondary);
	font-weight: 800;
	font-size: 0.85rem;
	padding: 6px 10px;
	border-radius: var(--dl-border-radius-pill);
	box-shadow: var(--dl-shadow);
}
.dl-badge-tag {
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--dl-secondary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--dl-border-radius-pill);
	z-index: 2;
}

/* -----------------------------------------------------------------------
   5b. FULL-WIDTH CONTENT (sidebar hidden everywhere except the blog)
----------------------------------------------------------------------- */
body.dl-full-width .content-area,
body.dl-full-width #primary {
	width: 100% !important;
	float: none !important;
	margin-right: 0 !important;
}
body.dl-full-width .col-full {
	max-width: 1400px;
}

/* -----------------------------------------------------------------------
   6. PRODUCT CARDS — 4 per row, bigger square images, lighter chrome
----------------------------------------------------------------------- */
ul.products li.product {
	position: relative;
	background: var(--dl-card-bg);
	border-radius: var(--dl-border-radius);
	padding: 0 0 18px;
	overflow: hidden;
	box-shadow: var(--dl-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(27, 31, 59, 0.14);
}
/* Large, edge-to-edge, square product image */
ul.products li.product a img,
ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--dl-border-radius) var(--dl-border-radius) 0 0;
	margin-bottom: 0.75rem;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price {
	padding: 0 14px;
}
ul.products li.product .woocommerce-loop-product__title {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--dl-secondary);
	margin: 0 0 4px;
}
ul.products li.product .price {
	color: var(--dl-primary);
	font-weight: 400;
}
ul.products li.product .price del {
	color: #9aa0b4;
	opacity: 1;
	font-weight: 400;
}
/* Storefront's default 4-column gutter is a bit tight for bigger images */
ul.products {
	gap: 1.5rem 1.75rem;
}

/* Stock status row — small coloured dot + text, sized to match
   coolshop.dk's compact stock-status line under the price. */
ul.products li.product .dl-stock-status {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 0;
	font-size: 0.75rem;
	color: #6b7085;
	line-height: 1;
}
.dl-stock-status .dl-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}
.dl-stock-status .dl-dot-green {
	background: #2e7d32;
}
.dl-stock-status .dl-dot-red {
	background: #d32f2f;
}
.dl-stock-status .dl-stock-text {
	font-weight: 600;
	color: var(--dl-secondary);
	margin-right: 10px;
}
.dl-stock-status .dl-freeshipping-text {
	color: #6b7085;
}

/* -----------------------------------------------------------------------
   7. CATEGORY GRID / ICON TILES
   Rounded tiles with an icon + name, echoing radbag's "Who's it for /
   What's the occasion" mega-menu tiles and designlab's own category grid.
----------------------------------------------------------------------- */
.dl-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.25rem;
	margin: 2.5rem 0;
}
.dl-category-grid .dl-category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	background: var(--dl-card-bg);
	border-radius: var(--dl-border-radius);
	padding: 1.5rem 1rem;
	box-shadow: var(--dl-shadow);
	text-decoration: none;
	color: var(--dl-secondary) !important;
	font-weight: 700;
	transition: transform 0.15s ease;
}
.dl-category-grid .dl-category-tile:hover {
	transform: translateY(-4px);
}
.dl-category-grid .dl-category-tile img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
}

/* -----------------------------------------------------------------------
   8. "WHY SHOP WITH US" BENEFIT COLUMNS
----------------------------------------------------------------------- */
.dl-benefit-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	margin: 3rem 0;
	text-align: center;
}
.dl-benefit-columns .dl-benefit-col h3 {
	color: var(--dl-secondary);
	margin: 0.75rem 0 0.4rem;
}
.dl-benefit-columns .dl-benefit-col .dl-icon-circle {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 59, 127, 0.1);
	color: var(--dl-primary);
	border-radius: 50%;
	font-size: 1.6rem;
}

/* -----------------------------------------------------------------------
   9. FOOTER
----------------------------------------------------------------------- */
#colophon.site-footer {
	background: var(--dl-secondary);
	color: #d8dae6;
}
#colophon.site-footer a {
	color: #fff;
}
#colophon .widget-title {
	color: #fff;
	font-weight: 700;
}

/* -----------------------------------------------------------------------
   11. FOCUS / TAP STATES — removes the purple outline/flash some
   browsers show on click (Chrome/Safari's default focus ring, and
   Android's default -webkit-tap-highlight-color, both replaced with a
   subtle brand-coloured ring instead of being left to browser defaults).
----------------------------------------------------------------------- */
.dl-header-search input.search-field,
.dl-header-search button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.dl-btn {
	-webkit-tap-highlight-color: transparent;
}
.dl-header-search input.search-field:focus {
	outline: none;
	border-color: var(--dl-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 59, 127, 0.18);
}
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce #respond input#submit:focus,
.woocommerce input.button:focus,
.dl-btn:focus,
.dl-header-search button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 59, 127, 0.35);
}

/* -----------------------------------------------------------------------
   12. REVIEW / TESTIMONIAL QUOTE SHORTCODE — remove the boxed border.
   Generic selectors covering common testimonial/review plugin markup;
   if a quote box still shows a border after this, tell me the exact
   class name from the browser inspector and I'll target it precisely.
----------------------------------------------------------------------- */
.testimonial,
.testimonials,
.wp-block-quote,
blockquote,
.sc_testimonial,
.review-quote,
.quote-box,
.reviews-shortcode,
[class*="testimonial"] {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}
/* -----------------------------------------------------------------------
   10. RESPONSIVE TWEAKS
----------------------------------------------------------------------- */
@media (max-width: 768px) {
	.dl-hero { min-height: 300px; border-radius: 0 0 20px 20px; }
	.dl-benefits-strip .dl-benefits-inner { gap: 1rem; font-size: 0.72rem; }
}