/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* White links class */
.white-links a,
.white-links a:visited {
    color: #ffffff;
}

.white-links a:hover {
    color: rgba(255,255,255,0.8);
}

/* Product carousel: reduced gap on mobile.
   --gap is set inline on .w-grid (style="--gap:1rem"), so targeting .w-grid
   itself from a stylesheet cannot win the cascade (inline style beats it).
   Impreza consumes var(--gap) on the CHILDREN: .w-grid-list (negative margin)
   and .w-grid-item (padding). Those children only INHERIT --gap from the
   parent, so setting --gap directly on them overrides the inherited inline
   1rem — a directly-set value always beats an inherited one. No !important. */
@media (max-width: 600px) {
  .w-grid.type_carousel .w-grid-list,
  .w-grid.type_carousel .w-grid-item {
    --gap: 0.5rem;
  }
}

/* Horizontal wrapper: keep vwrappers centered on mobile when stacked */
@media (max-width: 600px) {
  .w-hwrapper.stack_on_mobiles > .w-vwrapper.align_center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ------------------------------------------------------------------
   Category row: 2-column grid on mobile (2+2+2)

   WHY earlier width overrides failed:
   Impreza prints its design-options CSS in an inline <style> block in
   <head> (id="us-design-options-css") that loads AFTER this child
   stylesheet's <link>. Both Impreza and the child used the SAME
   single-class selector ".us_custom_56ea86bb" with !important. When
   specificity AND importance tie, the LAST one in source order wins —
   so Impreza's "width:1366px !important" always beat the child rule.
   Grid/flex/--gap worked because Impreza never sets those, so there
   was no competing declaration.

   FIX: use a compound selector (.w-hwrapper.us_custom_56ea86bb = two
   classes) which has HIGHER specificity than Impreza's single-class
   rule. Higher specificity wins regardless of source order. Same
   technique is applied to the fixed-width 243px children, which are
   the real cause of horizontal overflow on small phones.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  /* Container: 2-col grid, fit viewport with ~1rem breathing room.
     grid-auto-rows:1fr is the KEY fix for both "equal height" and
     "vertical centering": it forces every implicit row to the same
     height (= the tallest row). Without it each row sizes to its own
     content, so (a) the three rows had different heights and (b) the
     boxes hugged their content, leaving NO vertical slack for
     justify-content:center to act on — which is why earlier
     justify-content overrides looked like they "did nothing". They
     were winning the cascade; there was simply nothing to center. */
  .w-hwrapper.us_custom_56ea86bb {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr !important;
    gap: 1.5rem;
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  /* Each vwrapper FILLS its equal-height cell (height:100%, not auto),
     then centers its content on both axes. height:100% resolves
     against the 1fr grid track, giving real vertical space to center
     within. */
  .w-hwrapper.us_custom_56ea86bb > .w-vwrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0.75rem !important;
  }

  /* Impreza's .w-vwrapper.valign_bottom{justify-content:flex-end} has
     NO !important and only 2-class specificity, so this 4-class +
     !important rule already beats it. Kept explicit for clarity. */
  .w-hwrapper.us_custom_56ea86bb > .w-vwrapper.valign_bottom {
    justify-content: center !important;
  }

  /* The trailing .ult-spacer is a 3rd flex child (after image+title)
     that takes a gap margin and pulls the visual center upward.
     Remove it on mobile so image+title center cleanly. */
  .w-hwrapper.us_custom_56ea86bb > .w-vwrapper > .ult-spacer {
    display: none !important;
  }

  /* Box 1's image is .align_none (no auto margins) — force horizontal
     centering so it lines up with the others. */
  .w-hwrapper.us_custom_56ea86bb > .w-vwrapper > .w-image {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile: keep search field permanently open */
@media (max-width: 600px) {
  .ush_search_2.w-search.layout_fullwidth .w-search-form {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
  }
  .ush_search_2.w-search.layout_fullwidth .w-form-row-field {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
  }
  .ush_search_2 .w-search-open,
  .ush_search_2 .w-search-close {
    display: none !important;
  }

  /* Skjul header-søket mens mobilmenyen er åpen, slik at det ikke
     legger seg over menypunktene. Behold plassen for å unngå layout-hopp. */
  #page-header:has(.ush_menu_1 .w-nav-control.active) .ush_search_2 {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   Hjerter – Takk for bestillingen (order confirmation page)
   Seksjon: .hjerter-thankyou
   ========================================================== */

/* Fjern standard WC-luft på denne siden */
.woocommerce-order-received .l-section,
.woocommerce-order-received .l-section-h {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Den faste headeren ligger over innholdet; reserver riktig høyde. */
.woocommerce-order-received .l-main {
	padding-top: 159px !important;
}

@media (max-width: 900px) {
	.woocommerce-order-received .l-main {
		padding-top: 200px !important;
	}
}

/* Reserve dersom en Vipps-hurtigknapp legges inn etter sideinnlasting. */
.hjerter-approved-forhandler .vipps-express-checkout,
.hjerter-approved-forhandler .vipps_buy_now_wrapper,
.hjerter-approved-forhandler .wc-block-button-vipps {
	display: none !important;
}

/* Handlekurven skal gå direkte til vanlig checkout uten Vipps-hurtigkasse/skillelinje. */
.woocommerce-cart .wc-block-components-express-payment--cart,
.woocommerce-cart .wc-block-components-express-payment-continue-rule--cart {
	display: none !important;
}

/* Forhandlere bruker kun Faktura og skal ikke se tom hurtigkasse i checkout. */
.hjerter-approved-forhandler .wc-block-components-express-payment--checkout,
.hjerter-approved-forhandler .wc-block-components-express-payment-continue-rule--checkout {
	display: none !important;
}

/* ---- Banner-bilde ---- */
.hjerter-thankyou__banner {
	width: 100%;
	height: 340px;
	background: url('/wp-content/uploads/2026/06/AdobeStock_306870300-1-1.jpg') center center / cover no-repeat;
}

@media (max-width: 768px) {
	.hjerter-thankyou__banner {
		height: 200px;
	}
}

/* ---- Confirmation hero ---- */
.hjerter-thankyou__hero {
	max-width: 860px;
	margin: 0 auto;
	padding: 64px 24px 72px;
	text-align: center;
}

.hjerter-thankyou__heart {
	display: block;
	font-size: 40px;
	color: #D15854;
	line-height: 1;
	margin-bottom: 20px;
}

.hjerter-thankyou__heading {
	font-size: 52px !important;
	font-weight: 400 !important;
	color: #d3524b !important;
	line-height: 1.15 !important;
	margin-bottom: 24px !important;
}

@media (max-width: 768px) {
	.hjerter-thankyou__heading {
		font-size: 34px !important;
	}
}

.hjerter-thankyou__text {
	font-size: 18px;
	color: #000000;
	line-height: 1.65;
	max-width: 700px;
	margin: 0 auto 40px;
}

.hjerter-thankyou__text a {
	color: #d3524b;
	text-decoration: underline;
}

/* ---- Order details ---- */
.hjerter-thankyou__details {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 40px;
	border-top: 1px solid #e3e7f0;
	padding-top: 32px;
}

.hjerter-thankyou__details li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 0 16px;
}

.hjerter-thankyou__detail-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #a8a8a8;
}

.hjerter-thankyou__details strong {
	font-size: 15px;
	color: #1e2b50;
}

@media (max-width: 600px) {
	.hjerter-thankyou__details {
		flex-direction: column;
		gap: 0;
	}
	.hjerter-thankyou__details li {
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #e3e7f0;
		width: 100%;
	}
}

/* ---- Nyhetsbrev-seksjon ---- */
.hjerter-thankyou__newsletter {
	background: #d3524b;
	padding: 64px 24px;
}

.hjerter-thankyou__newsletter-inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

@media (max-width: 768px) {
	.hjerter-thankyou__newsletter-inner {
		flex-direction: column;
		text-align: center;
	}
}

.hjerter-thankyou__newsletter-heart {
	display: block;
	font-size: 28px;
	color: #D15854;
	margin-bottom: 8px;
}

.hjerter-thankyou__newsletter-heading {
	font-size: 44px !important;
	font-weight: 700 !important;
	color: #FFDEDB !important;
	line-height: 1.1 !important;
	margin: 0 0 8px !important;
}

@media (max-width: 768px) {
	.hjerter-thankyou__newsletter-heading {
		font-size: 30px !important;
	}
}

.hjerter-thankyou__newsletter-text {
	font-size: 15px;
	font-weight: 300;
	color: #ffffff;
	margin: 0;
}

.hjerter-thankyou__newsletter-form {
	flex-shrink: 0;
	width: 100%;
	max-width: 460px;
}

.hjerter-thankyou__newsletter-row {
	display: flex;
	gap: 0;
	border-radius: 4px;
	overflow: hidden;
}

.hjerter-thankyou__newsletter-email {
	flex: 1;
	padding: 14px 18px;
	font-size: 15px;
	border: none;
	outline: none;
	color: #1e2b50;
	background: #ffffff;
	font-family: inherit;
}

.hjerter-thankyou__newsletter-email::placeholder {
	color: #a8a8a8;
}

.hjerter-thankyou__newsletter-btn {
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: #D15854;
	border: none;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	transition: background 0.2s;
}

.hjerter-thankyou__newsletter-btn:hover {
	background: #b84845;
}

@media (max-width: 480px) {
	.hjerter-thankyou__newsletter-row {
		flex-direction: column;
	}
	.hjerter-thankyou__newsletter-btn {
		width: 100%;
	}
}

/* ---- Sosiale medier ---- */
.hjerter-thankyou__social {
	text-align: center;
	padding: 48px 24px;
	background: #ffffff;
}

.hjerter-thankyou__social p {
	font-size: 18px;
	color: #000000;
	margin: 0;
}

.hjerter-thankyou__social a {
	color: #d3524b;
	text-decoration: underline;
}

.hjerter-thankyou__social a:hover {
	color: #D15854;
}

/* ---- Inspirasjonsgalleri ---- */
.hjerter-thankyou__gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	width: 100%;
}

.hjerter-thankyou__gallery-item {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
}

.hjerter-thankyou__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.hjerter-thankyou__gallery-item:hover img {
	transform: scale(1.04);
}

@media (max-width: 600px) {
	.hjerter-thankyou__gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}