/*
 * Detailshop – designgrunnlag, opplinjering mot konseptet.
 *
 * Fila er delt i klart merkede seksjoner, slik at én av dem kan fjernes uten
 * å røre resten:
 *   1. Designtokens (--ds-*) som resten av oppgraderingen bygger på.
 *   2. Avrunding av kanter, og varm off-white bakgrunn med hvite kort oppå.
 *   3. Produktfliser: hele produktet synlig i bildet.
 *
 * Typografi (Barlow / Barlow Condensed) ligger bevisst utenfor.
 *
 * Lastes etter «flatsome-style» (barnetemaets style.css) via inc/design.php,
 * så disse reglene vinner uten !important.
 */

:root {
  /* Blått – identisk med Flatsome sin --fs-color-primary i dag. */
  --ds-blue: #006699;
  --ds-blue-2: #3d9bc7;
  --ds-blue-soft: #8fc3dc;
  --ds-blue-bg: #e5f0f6;
  --ds-blue-bg-border: #c4dcea;
  --ds-blue-ink: #00517a;
  --ds-blue-hover: #005580;

  /* Tekst */
  --ds-ink: #222;
  --ds-body: #3a3a3a;
  --ds-muted: #77746e;
  --ds-muted-2: #98958f;

  /* Flater og linjer */
  --ds-bg: #fafaf8;
  --ds-surface: #fff;
  --ds-beige: #f1efeb;
  --ds-line: #e6e4e0;
  --ds-line-2: #e8e6e1;
  --ds-line-soft: #f0eee9;
  --ds-line-input: #d8d5cf;

  /* Signalfarger */
  --ds-green: #1d7a3f;
  --ds-orange: #b3661a;
  --ds-gold: #c19016;

  /* Form */
  --ds-radius: 12px;
  --ds-radius-sm: 8px;
  --ds-radius-tile: 10px;
  --ds-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --ds-shadow-hover: 0 4px 14px rgba(0, 0, 0, .08);
}

/* ---------- 4. Varm bakgrunn ----------
 * Flatsome maler ikke bakgrunnen selv, så body slår gjennom. Innholdsflatene
 * under får hvitt tilbake, slik at det oppstår kontrast mellom side og kort.
 */

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

/*
 * Flatsome maler #wrapper og #main grå (#ededed) via Customizer-CSS, som
 * ligger over body. Vi overstyrer her i stedet for i theme_mods, så
 * designoppsettet i Customizer står urørt og endringen kan angres ved å
 * slette denne regelen. Merk: Customizer viser fortsatt #ededed.
 *
 * «body» foran er ikke pynt: Customizer-reglene står i en inline <style> som
 * skrives ut ETTER dette stilarket, og har samme spesifisitet (#main = 1,0,0).
 * Ved å ta med body (1,0,1) vinner vi på spesifisitet i stedet for !important.
 */
body #wrapper,
body #main,
body #main.dark {
  background-color: var(--ds-bg);
}

/* ---------- 1. Avrunding ---------- */

/* Knapper. Flatsome bruker .button på både <a>, <button> og <input>. */
.button,
button,
input[type="submit"],
input[type="button"],
.woocommerce .button,
.wc-proceed-to-checkout .checkout-button,
.single_add_to_cart_button {
  border-radius: var(--ds-radius-sm);
}

/* Runde («circle») og ikonknapper skal fortsatt være runde – ikke overstyr. */
.button.is-circle,
.button.icon.circle,
.is-circle,
.icon.circle {
  border-radius: 999px;
}

/* Skjemafelt – var 3px, altså nesten skarpe ved siden av 8px-knappene. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.select2-container .select2-selection {
  border-radius: var(--ds-radius-sm);
}

/* Hovedsøkefeltet eies av AJAX Search for WooCommerce, med en langt sterkere
   selektor (0,3,1) enn den generiske over – derfor gjentatt eksplisitt. */
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  border-radius: var(--ds-radius-sm);
}

/* Produktfliser.
 *
 * Flatsome lager allerede kortflaten selv: rutenettet har klassen «has-shadow»,
 * som gir .col-inner hvit bakgrunn og en liten skygge. Vi bygger videre på DEN
 * flaten framfor å legge et kort nummer to rundt .product-small.box – ellers
 * får man dobbel ramme.
 *
 * Selve fliseredesignen (fast bildehøyde, merke-eyebrow) kommer som eget steg;
 * her handler det bare om form og kontrast mot den varme bakgrunnen. */
.product-small.col > .col-inner {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-tile);
  overflow: hidden;
  box-shadow: var(--ds-shadow);
  /* Kolonnene strekkes allerede av flex-raden; dette gjør at selve kortet
     fyller høyden, så kort med to-linjers tittel ikke blir høyere enn resten. */
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.product-small.col > .col-inner:hover {
  border-color: var(--ds-blue-soft);
  box-shadow: var(--ds-shadow-hover);
}

/* Teksten trenger litt luft inn mot kortkanten. */
.product-small.box .box-text {
  padding: 12px 14px 16px;
}

/* Knappen skal ligge på samme linje i hele raden.
 *
 * Kortene er like høye (height:100% over), men kjeden .col-inner → .box →
 * .box-text er display:block, så innholdet flyter bare nedover. Kort med
 * prisintervall («149,25kr – 524,25kr») eller tre-linjers tittel skyver da
 * knappen helt ned mot kanten, mens naboene har 40+ px luft under sin – raden
 * ser ujevn ut, og de tetteste kortene ser klemte ut.
 *
 * Ved å gjøre kjeden til en flex-kolonne og gi knappen margin-top:auto havner
 * den nederst i ALLE kort, med samme avstand til kanten (box-text sin
 * bunnpadding). Tittelfeltet absorberer høydeforskjellen i stedet. */
.product-small.col > .col-inner {
  display: flex;
  flex-direction: column;
}

.product-small.col > .col-inner > .product-small.box {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-small.box > .box-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* NØDVENDIG følgefiks til flex-kjeden over – ikke fjern.
 *
 * Flatsome gir .box-image `margin: 0 auto`. I den opprinnelige blokk-konteksten
 * er det uskyldig. Som flex-item betyr auto-margin i TVERRAKSEN at elementet
 * ikke strekkes av align-items:stretch – det krymper til innholdet i stedet.
 * Innholdet er <img> med width:100%, som måles mot forelderen. Da oppstår en
 * sirkel: boksen er 0 px bred fordi bildet er 0 px bredt fordi boksen er 0 px.
 *
 * Resultatet var at produktfliser utenfor hovedrutenettet – relaterte produkter,
 * kryssalg, kategorisider – sto med 20 px brede bildefelt (bare paddingen), og
 * at bildene aldri i det hele tatt ble lastet ned: nettleseren så et element uten
 * bredde og hoppet over det.
 *
 * Eksplisitt bredde bryter sirkelen. align-self:stretch gjør det IKKE, fordi
 * auto-marginer vinner over stretch. */
.product-small.box > .box-image {
  width: 100%;
}

.product-small.box > .box-text > .add-to-cart-button {
  margin-top: auto;
  /* Egen luft over knappen, så den ikke klistrer seg til prisen på kort der
     tittelfeltet spiser opp all slakk. */
  padding-top: 10px;
}

/* Øvrige bokser og flater */
.box-image,
.blog-post-inner .box-image,
.slider .box-image {
  border-radius: var(--ds-radius-sm);
}

/* WooCommerce-meldinger, faner og paneler */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.cart_totals,
.cross-sells,
.shop_table,
.checkout_coupon,
.woocommerce-checkout #payment {
  border-radius: var(--ds-radius);
}

/* Bilder i innhold */
.entry-content img,
.wp-block-image img,
.attachment-woocommerce_thumbnail {
  border-radius: var(--ds-radius-sm);
}

/* Kategoribokser.
 *
 * .banner / .banner-inner er bevisst utelatt: de brukes også til fullbredde-
 * seksjoner på forsiden, der avrundede hjørner og overflow:hidden ville sett
 * feil ut og kunne klippe innhold som skal stikke utenfor. Tas eventuelt som
 * en egen, målrettet regel når forsiden bygges om. */
.box-category .box-image {
  border-radius: var(--ds-radius-tile);
  overflow: hidden;
}

/* Nedtrekkskurven og søkeresultater.
 * .nav-dropdown er utelatt fordi megamenyen er satt til min-width:100vw i
 * style.css – avrunding på en fullbreddeflate ser feil ut. */
#cart-popup .cart-popup-inner,
.searchform-wrapper .live-search-results {
  border-radius: var(--ds-radius);
}

/* ---------- Produktfliser: innhold (steg 2) ----------
 *
 * Flatsome viser produktbildene med object-fit:cover i en kvadratisk boks.
 * Det fungerer for livsstilsfoto, men Detailshop selger flasker, kanner og
 * dunker fotografert stående – de får toppen og bunnen klippet vekk. «contain»
 * viser hele produktet, og den hvite flaten bak gjør at pakkshots med hvit
 * bakgrunn går umerkelig i ett med kortet.
 */

.product-small.box .box-image {
  background: var(--ds-surface);
}

.product-small.box .box-image img {
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

/* NB: teksten over produkttittelen (.product-cat) er KATEGORIEN, ikke merket.
 * Den skal være tilbaketrukket – svart på 80 % opasitet, slik Flatsome gjør det
 * som standard. Ikke gi den farge eller vekt: den skal ikke konkurrere med
 * produktnavnet. Konseptets blå versal-etikett er et merkenavn, som er noe
 * annet, og hører ikke hjemme her. */