@media (max-width: 767px) {
	ul.products.columns-2, ul.products.columns-3, ul.products.columns-4, ul.products.columns-5, ul.products.columns-6 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


/* =========================================================================
   Agriris – samme bilde-styling i shop-grid (arkiv/kategori/forside) og på
   selve produktsiden (hovedbilde + miniatyrbilder).

   Lim inn i: Tilpasning (Customizer) → Ekstra CSS (Additional CSS)
   — global CSS, virker på ALLE Woo-sider (ikke bare forsiden-blokken).

   Design-tokens matcher det som allerede er brukt i forside-/produktside-
   HTML-blokkene (--brand:#2D8B5F, --radius:20px).
   ========================================================================= */

:root{
  --agr-img-brand: #2D8B5F;
  --agr-img-brand-dark: #22713C;
  --agr-img-radius: 20px;       /* store bilder: shop-kort + hovedbilde */
  --agr-img-radius-sm: 10px;    /* små bilder: miniatyrer */
  --agr-img-shadow: 0 10px 26px -14px rgba(17,17,17,.28);
}

/* -------------------------------------------------------------------
   1) SHOP-GRID (arkiv-/kategori-siden /shop/, IKKE bare forsiden)
   Astra pakker hvert produktkort som .astra-shop-thumbnail-wrap
   + .astra-shop-summary-wrap (ikke én lenke rundt alt).
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--agr-img-radius);
  background:#F4F6F4;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img.attachment-woocommerce_thumbnail{
  width:100% !important;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  margin:0 !important;
  border-radius:0 !important;
  transition:transform .4s ease;
}
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img.attachment-woocommerce_thumbnail{
  transform:scale(1.05);
}
.woocommerce ul.products li.product mark.onsale{
  border-radius:999px;
  background:var(--agr-img-brand) !important;
}

/* -------------------------------------------------------------------
   2) PRODUKTSIDE – hovedbilde (galleriet øverst)
   Astra/Woo bruker ofte det ubeskårne "full"-bildet her, som kan ha
   et annet sideforhold enn det kvadratiske shop-bildet. Vi tvinger
   samme kvadrat + cover-beskjæring, slik at produktet fyller rammen
   likt uansett hvor det vises.
   ------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery{
  border-radius:var(--agr-img-radius);
  overflow:hidden;
  box-shadow:var(--agr-img-shadow);
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image{
  border-radius:var(--agr-img-radius);
  overflow:hidden;
  background:#F4F6F4;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img.wp-post-image{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  margin:0 !important;
}

/* -------------------------------------------------------------------
   3) PRODUKTSIDE – miniatyrbilder under/ved siden av hovedbildet
   ------------------------------------------------------------------- */
.woocommerce div.product .ast-single-product-thumbnails,
.woocommerce div.product .woocommerce-product-gallery-thumbnails__wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.woocommerce div.product .ast-woocommerce-product-gallery__image{
  border-radius:var(--agr-img-radius-sm);
  overflow:hidden;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color .2s ease, transform .2s ease;
}
.woocommerce div.product .ast-woocommerce-product-gallery__image:hover{
  transform:translateY(-2px);
}
/* Aktivt/valgt miniatyrbilde får et grønt merke i tråd med profilfargen */
.woocommerce div.product .ast-woocommerce-product-gallery__image.flex-active-slide{
  border-color:var(--agr-img-brand);
}
.woocommerce div.product .ast-woocommerce-product-gallery__image img{
  width:100% !important;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  margin:0 !important;
  border-radius:0 !important;
}

/* -------------------------------------------------------------------
   4) Relaterte produkter / "Du liker kanskje også" nederst på
   produktsiden bruker samme .products-loop-markup som shop-grid,
   så punkt 1 dekker allerede disse — ingen egne regler nødvendig.
   ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   5) CHECKOUT (og cart) – skjul kort-beskrivelsen WooCommerce Blocks
   automatisk viser under produktnavnet i "Order summary". Dette er en
   innebygd oppførsel i selve WooCommerce Checkout-blokken (ikke noe
   Astra styrer), så det krever ingen bytte til klassisk shortcode-
   checkout — én global CSS-regel er alt som trengs. Verifisert direkte
   på live checkout med produkt i handlekurven.

   OBS: bruk den SMALE klassen under (kun selve beskrivelsesteksten).
   .wc-block-components-order-summary-item__description er en bredere
   wrapper som også inneholder produktnavnet — treffer du den ved en
   feil, forsvinner tittelen også (som skjedde i første forsøk).
   ------------------------------------------------------------------- */
.wc-block-components-product-metadata__description{
  display:none !important;
}