/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 4.3
*/

/* ==========================================================================
   Sjømatbilen redesign — global foundations (direction 1a "Fiskehandleren")
   Colours and typography are set in Theme Options; this file covers the two
   things Theme Options cannot express: the extra Archivo weights and radius 0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Kept as custom properties so component work later references names, not hexes.
   -------------------------------------------------------------------------- */
:root {
  --sjm-teal:        #0E2B2B;  /* primary: header/footer, buttons, headings */
  --sjm-teal-hover:  #17403E;
  --sjm-amber:       #C7671A;  /* numerals, progress fill, stars, mobile CTA */
  --sjm-rust:        #9C4A16;  /* kr/kg, inline links */
  --sjm-sale:        #A8321C;  /* "SPAR KR" badge */
  --sjm-green:       #1F6B4A;  /* checkmarks, free delivery */
  --sjm-sand:        #E0B183;  /* eyebrow on dark */
  --sjm-cream:       #F7F3EC;  /* alternate section background */
  --sjm-cream-tint:  #F3EFE6;  /* search field, image placeholder */
  --sjm-border:      #E9E3D6;
  --sjm-border-mid:  #E2DACB;
  --sjm-border-input:#CFC8B9;
  --sjm-divider:     #EDE7DA;

  --sjm-ink:         #0E2B2B;
  --sjm-body:        #4A5C59;
  --sjm-muted:       #5C6B68;
  --sjm-light:       #7A8B88;
  --sjm-on-dark:     #B9CCC6;
}

/* --------------------------------------------------------------------------
   2. Archivo 500 and 700
   Archivo is a variable font: Google serves one file per unicode subset for
   every weight, and Kirki has already downloaded those three files for the
   400/600 declarations. These rules point the missing weights at the same
   local files — no extra download, and still zero external requests.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/fonts/archivo/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/fonts/archivo/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/fonts/archivo/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/fonts/archivo/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader is display only and never bold or italic in this design. */
h1, h2, h3, h4, h5, h6,
.heading-font {
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   3. Border radius: 0 everywhere
   Flatsome's own "Default Button Radius" option cannot express this — it skips
   its CSS when the value is '0px' and falls back to the theme default, so the
   reset has to live here.
   The design's only round things are status dots, the cart count badge and
   radio buttons, so those are excluded rather than reset.
   -------------------------------------------------------------------------- */
button,
input,
select,
textarea,
.button,
.btn,
input[type="submit"],
input[type="button"],
.box-image, .box-text,
.col-inner,
.badge-inner,
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.product-small.box, .product-images, .woocommerce-product-gallery__image,
.nav-dropdown, .header-search-form, .searchform input,
.tabbed-content .nav > li > a,
.shop-container img, .box-image img {
  border-radius: 0 !important;
}

/* Things that stay round on purpose. */
input[type="radio"],
input[type="checkbox"],
.cart-count,
.status-dot,
.is-round,
.circle,
.avatar,
.slider-nav-circle .flickity-prev-next-button {
  border-radius: 50% !important;
}
input[type="checkbox"] { border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   4. Buttons — flat, no shadow, teal with the specified hover
   -------------------------------------------------------------------------- */
.button, button, input[type="submit"] {
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
}
.button.primary:not(.is-outline),
button.primary:not(.is-outline) {
  background-color: var(--sjm-teal);
  border-color: var(--sjm-teal);
}
.button.primary:not(.is-outline):hover,
button.primary:not(.is-outline):hover {
  background-color: var(--sjm-teal-hover);
  border-color: var(--sjm-teal-hover);
}

/* No transforms or scaling on hover — the design is explicit about this. */
.box-image img,
.product-small img,
.has-hover:hover .box-image img {
  transform: none !important;
}

/* --------------------------------------------------------------------------
   5. Body copy
   -------------------------------------------------------------------------- */
body {
  color: var(--sjm-body);
  -webkit-font-smoothing: antialiased;
}
p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   6. Redesign components
   -------------------------------------------------------------------------- */

/* Pack size, kr/kg and portion lines */
.sjm-price-meta {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
}
.sjm-pack {
  font-weight: 600;
  color: var(--sjm-ink);
  white-space: nowrap;
}
.sjm-sep {
  color: var(--sjm-light);
  margin: 0 2px;
}
.sjm-kilo-price {
  font-weight: 600;
  color: var(--sjm-rust);
  white-space: nowrap;
}
.sjm-portions {
  display: block;
  font-size: 13px;
  color: var(--sjm-muted);
}

/* --------------------------------------------------------------------------
   7. The canonical product card
   Used identically on the home page, catalogue and cross-sell rows.
   -------------------------------------------------------------------------- */
.sjm-card .col-inner { background: none; }
.sjm-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--sjm-border);
  transition: border-color .12s ease;
}
.sjm-card:hover .sjm-card__inner { border-color: var(--sjm-teal); }

.sjm-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--sjm-cream-tint);
  overflow: hidden;
}
.sjm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sjm-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--sjm-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 9px;
}
.sjm-card__badge.is-oos { background: var(--sjm-light); }

.sjm-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 20px;
  flex: 1;
}
.sjm-card__eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sjm-light);
}
.sjm-card__name {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.sjm-card__name a { color: var(--sjm-ink); }
.sjm-card__name a:hover { color: var(--sjm-teal-hover); }

.sjm-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.sjm-stars { color: var(--sjm-amber); font-size: 14px; letter-spacing: .05em; }
.sjm-card__reviews { color: var(--sjm-light); }

/* The pack-size pair — the piece stock Flatsome cannot express */
.sjm-card__sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sjm-card__sizes:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.sjm-card__size {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  background: #fff;
  border: 1px solid var(--sjm-border-mid);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  transition: border-color .12s ease, background-color .12s ease;
}
.sjm-card__size:hover { border-color: var(--sjm-teal); }
.sjm-card__size.is-selected {
  border: 1.5px solid var(--sjm-teal);
  background: var(--sjm-cream);
}
.sjm-card__size-label { font-size: 14px; font-weight: 600; color: var(--sjm-ink); }
.sjm-card__size-price { font-size: 12px; color: var(--sjm-muted); }

.sjm-card__single-size {
  font-size: 14px;
  font-weight: 600;
  color: var(--sjm-ink);
}

.sjm-card__pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.sjm-card__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--sjm-ink);
  line-height: 1;
}
.sjm-card__kilo {
  font-size: 14px;
  font-weight: 600;
  color: var(--sjm-rust);
}
.sjm-card__portions { font-size: 13px; color: var(--sjm-muted); }

.sjm-card__add.button {
  width: 100%;
  margin: 0;
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  min-height: 0;
  height: auto;
}

/* --------------------------------------------------------------------------
   8. Home page sections
   -------------------------------------------------------------------------- */
.sjm-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--sjm-sand);
  margin-bottom: 14px;
}
.sjm-eyebrow--dark { color: var(--sjm-rust); }
.sjm-eyebrow--sand { color: var(--sjm-sand); }

.sjm-hero-title {
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.03;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}
.sjm-hero-lead {
  font-size: 19px;
  line-height: 1.55;
  color: #D3E0DB;
  max-width: 520px;
  margin: 0 0 26px;
}
.sjm-hero-box .sjm-postcode { margin-top: 4px; }

.sjm-section-title {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--sjm-ink);
  text-wrap: balance;
}
.sjm-section-sub {
  color: var(--sjm-muted);
  font-size: 16px;
  margin: 0;
}
.sjm-on-dark { color: #fff !important; }
.sjm-on-dark-body { color: var(--sjm-on-dark); font-size: 17px; line-height: 1.6; }

/* Trust bar */
.sjm-trustbar .sjm-trust-t {
  font-size: 15px;
  font-weight: 700;
  color: var(--sjm-ink);
  margin: 0 0 3px;
}
.sjm-trustbar .sjm-trust-d {
  font-size: 13.5px;
  color: var(--sjm-muted);
  margin: 0;
  max-width: none;
}

/* Tick lists */
.sjm-ticklist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sjm-ticklist li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  color: var(--sjm-body);
}
.sjm-ticklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sjm-green);
  font-weight: 700;
}

/* Delivery facts on the dark band */
.sjm-fact-n {
  font-family: 'Newsreader', serif;
  font-size: 44px;
  line-height: 1;
  color: var(--sjm-sand);
  margin: 0 0 6px;
}
.sjm-fact-l {
  font-size: 14px;
  color: var(--sjm-on-dark);
  margin: 0;
  max-width: none;
}

/* How it works */
.sjm-step-n {
  font-family: 'Newsreader', serif;
  font-size: 52px;
  line-height: 1;
  color: var(--sjm-amber);
  margin: 0 0 8px;
}
.sjm-step-t {
  font-family: 'Archivo', sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: 0;
}

@media (max-width: 48em) {
  .sjm-hero-lead { font-size: 16px; }
  .sjm-fact-n { font-size: 34px; }
  .sjm-step-n { font-size: 40px; }
}

/* --------------------------------------------------------------------------
   9. Product page
   -------------------------------------------------------------------------- */
.sjm-sizes { margin: 0 0 20px; }
.sjm-sizes__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sjm-light);
  margin: 0 0 10px;
}
.sjm-sizes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.sjm-size {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 13px;
  background: #fff;
  border: 1px solid var(--sjm-border-mid);
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
  transition: border-color .12s ease, background-color .12s ease;
}
.sjm-size:hover { border-color: var(--sjm-teal); }
.sjm-size.is-selected {
  border: 2px solid var(--sjm-teal);
  background: var(--sjm-cream);
  padding: 13px 13px 12px;
}
.sjm-size__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.sjm-size__label { font-size: 19px; font-weight: 600; color: var(--sjm-ink); }
.sjm-size__kilo  { font-size: 13px; font-weight: 600; color: var(--sjm-rust); }
.sjm-size__price { font-size: 22px; font-weight: 700; color: var(--sjm-ink); }
.sjm-size__meta  { font-size: 13px; color: var(--sjm-muted); }

/* Once the size cards are live the native dropdown is redundant. It stays in
   the DOM because WooCommerce's variation script drives off it — hiding it
   visually rather than removing it keeps price updates and validation intact. */
.variations_form.sjm-has-size-cards .variations { display: none; }
.variations_form.sjm-has-size-cards .woocommerce-variation-price { display: none; }

/* The single add-to-cart button is the page's primary action: teal, not accent. */
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt {
  background-color: var(--sjm-teal) !important;
  border-color: var(--sjm-teal) !important;
  color: #fff !important;
  font-weight: 600;
}
.single_add_to_cart_button.button:hover,
.single_add_to_cart_button.button.alt:hover {
  background-color: var(--sjm-teal-hover) !important;
  border-color: var(--sjm-teal-hover) !important;
}

/* Delivery promise under add-to-cart */
.sjm-promise {
  background: var(--sjm-cream);
  border: 1px solid var(--sjm-border);
  padding: 16px 18px;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sjm-promise__line {
  margin: 0;
  font-size: 14px;
  color: var(--sjm-body);
  padding-left: 22px;
  position: relative;
  max-width: none;
}
.sjm-promise__line::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sjm-green);
}

/* Spec table */
.sjm-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--sjm-border);
  border: 1px solid var(--sjm-border);
  margin: 24px 0;
}
.sjm-spec {
  background: #fff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sjm-spec__k {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--sjm-light);
}
.sjm-spec__v { font-size: 15px; color: var(--sjm-ink); }

@media (max-width: 48em) {
  .sjm-specs { grid-template-columns: 1fr 1fr; }
  .sjm-size__label { font-size: 17px; }
  .sjm-size__price { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   10. Cart line-item detail
   -------------------------------------------------------------------------- */
.sjm-line-meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--sjm-muted);
}

/* Box progress panel on the cart */
.sjm-box-progress {
  background: var(--sjm-cream);
  border: 1px solid var(--sjm-border);
  padding: 22px 24px;
  margin-bottom: 26px;
}
.sjm-box-progress__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sjm-box-progress__kg {
  font-family: 'Newsreader', serif;
  font-size: 40px;
  line-height: 1;
  color: var(--sjm-ink);
}
.sjm-box-progress__of {
  font-size: 15px;
  color: var(--sjm-muted);
  margin-left: 6px;
}
.sjm-box-progress__status {
  font-size: 14px;
  font-weight: 600;
  color: var(--sjm-rust);
  text-align: right;
}
.sjm-box-progress__track {
  height: 8px;
  background: var(--sjm-divider);
  overflow: hidden;
}
.sjm-box-progress__fill {
  height: 100%;
  background: var(--sjm-amber);
  transition: width .25s ease;
}
.sjm-box-progress__rule {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--sjm-muted);
}

/* Cart weight badge next to the cart icon */
.sjm-cart-kg {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  opacity: .8;
  margin-left: 6px;
}

/* Postcode check */
.sjm-postcode {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--sjm-border);
  padding: 22px 24px;
  max-width: 560px;
}
.sjm-postcode__title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 16px;
  color: var(--sjm-ink);
}
.sjm-postcode__sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--sjm-muted);
}
.sjm-postcode__form {
  display: flex;
  gap: 10px;
  margin: 0;
}
.sjm-postcode__input {
  flex: 0 0 120px;
  height: 48px;
  margin: 0;
  border: 1px solid var(--sjm-border-input);
  background: #fff;
  padding: 0 14px;
  font-size: 16px;
  letter-spacing: .08em;
}
.sjm-postcode__button {
  height: 48px;
  margin: 0;
  flex: 0 0 auto;
}
.sjm-postcode__result {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--sjm-border);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sjm-body);
}
.sjm-postcode__result.is-ok::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sjm-green);
  margin-right: 9px;
  vertical-align: middle;
}

/* Delivery promise at checkout — a statement, not a choice */
.sjm-delivery-promise {
  margin: 26px 0;
  background: var(--sjm-cream);
  border: 1px solid var(--sjm-border);
  padding: 20px 22px;
}
.sjm-delivery-promise h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.sjm-delivery-promise__lead {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--sjm-body);
}
.sjm-delivery-promise__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sjm-delivery-promise__list li {
  font-size: 14px;
  color: var(--sjm-muted);
  padding-left: 22px;
  position: relative;
}
.sjm-delivery-promise__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sjm-green);
  font-weight: 700;
}

@media only screen and (max-width: 48em) {
/*************** MOBILE ONLY CSS  ***************/
  body { font-size: 15px; }

  .sjm-box-progress { padding: 18px; }
  .sjm-box-progress__kg { font-size: 30px; }
  .sjm-box-progress__status { text-align: left; }
  .sjm-postcode { padding: 18px; }
  .sjm-postcode__form { flex-wrap: wrap; }
  .sjm-postcode__input { flex: 1 1 100%; }
  .sjm-postcode__button { flex: 1 1 100%; }
}