/* ==========================================================================
   Sjúkást — shop

   Covers the five surfaces Breakdance used to own: shop archive, single
   product, cart, checkout and My Account. Loaded only on those pages, after
   woocommerce-general, by sjukast_woo_styles() in inc/woocommerce.php.

   On specificity: WooCommerce writes rules like

     .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price

   which is (0,3,2) — :where() contributes nothing, so it is three classes and
   two elements. Selectors here are written to match or beat that, and the
   load-order dependency settles ties. No !important except where WooCommerce
   itself uses it (the cart remove ×).

   Palette: black and white with a single green accent. Headings and UI labels
   are Barlow Condensed, body copy and inputs Open Sans, prices Barlow.
   ========================================================================== */

:root {
  --shop-font-condensed: "Barlow Condensed", Arial, Helvetica, sans-serif;
  --shop-font-barlow: "Barlow", Arial, Helvetica, sans-serif;
  --shop-font-sans: "Open Sans", Arial, Helvetica, sans-serif;

  --shop-black: #000;
  --shop-white: #fff;
  --shop-ink: #1a1a1a;
  --shop-muted: #6b7280;

  --shop-green: #00a078;
  --shop-green-dark: #00805f;
  --shop-green-tint: #e5f5f0;

  --shop-rule: #e5e5e5;
  --shop-panel: #f7f7f7;
  --shop-input-border: #d4d4d4;

  --shop-radius: 3px;
  --shop-max-width: 1200px;
  --shop-gutter: 20px;

  /* The theme header is position:fixed at 90px; templates that open with a
     heading rather than a banner clear it themselves. */
  --shop-header-clearance: 90px;
}

/* ==========================================================================
   1. Page chrome
   ========================================================================== */

.shop-archive__inner,
.shop-page__inner,
.shop-single__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--shop-max-width);
  margin: 0 auto;
  padding: 0 var(--shop-gutter);
}

.shop-archive__header,
.shop-page__header {
  margin-top: calc(var(--shop-header-clearance) + 64px);
  margin-bottom: 48px;
}

.shop-archive__header {
  margin-bottom: 64px;
}

.shop-archive__title,
.shop-page__title {
  margin: 0;
  font-family: var(--shop-font-condensed);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
}

/* The archive heading is the Woo page title ("Verslun"); Breakdance had it in
   capitals. Cart, checkout and account carry their own capitalisation from
   sjukast_shop_page_heading(), two of the three mixed case. */
.shop-archive__title {
  text-transform: uppercase;
}

.shop-page__body {
  margin-bottom: 120px;
}

@media (max-width: 767px) {
  .shop-archive__title,
  .shop-page__title {
    font-size: 40px;
  }

  .shop-archive__header,
  .shop-page__header {
    margin-top: calc(var(--shop-header-clearance) + 40px);
    margin-bottom: 36px;
  }

  .shop-page__body {
    margin-bottom: 72px;
  }
}

/* ==========================================================================
   2. Shop archive

   woocommerce-layout.css floats li.product at width:22.05%, which inside a
   grid container shrinks each card to a fifth of its cell. The reset below is
   written at (0,3,2) to match WooCommerce's own weight.
   ========================================================================== */

.shop-archive ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 34px;
  margin: 0 0 100px;
  padding: 0;
  list-style: none;
}

/* WooCommerce clears its floats with pseudo-elements; as grid items they
   become phantom cells. */
.shop-archive ul.products::before,
.shop-archive ul.products::after {
  content: none;
  display: none;
}

/* The attribute selector is deliberate. woocommerce-layout.css and
   woocommerce-smallscreen.css both size the cards through
     ul.products[class*="columns-"] li.product
   which is (0,4,2) — the [class*=] counts as a class. Without it here the
   theme rule is (0,3,2) and loses, leaving the cards floated at 48% (22% on
   desktop) inside their grid cells. */
.shop-archive ul.products li.product,
.shop-archive ul.products[class*="columns-"] li.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
  text-align: center;
}

.shop-archive ul.products li.product a.shop-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: var(--shop-black);
  text-decoration: none;
}

.shop-archive ul.products li.product .shop-card__media {
  width: 100%;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--shop-panel);
}

.shop-archive ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  transition: transform 400ms ease;
}

.shop-archive ul.products li.product:hover img {
  transform: scale(1.03);
}

.shop-archive ul.products li.product h2.shop-card__title,
.shop-archive ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--shop-font-condensed);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
}

.shop-archive ul.products li.product .shop-card__price,
.shop-archive ul.products li.product .price,
.shop-archive ul.products li.product .price .woocommerce-Price-amount,
.shop-archive ul.products li.product .price .woocommerce-Price-amount bdi {
  display: block;
  margin: 0;
  color: var(--shop-black);
  font-family: var(--shop-font-barlow);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

.shop-archive ul.products li.product .price del,
.shop-archive ul.products li.product .price del bdi {
  color: var(--shop-muted);
  font-size: inherit;
}

.shop-archive ul.products li.product a.button {
  margin-top: 14px;
  white-space: nowrap;
}

.shop-archive ul.products li.product a.added_to_cart {
  margin-top: 8px;
  font-family: var(--shop-font-sans);
  font-size: 12px;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .shop-archive ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 28px;
  }
}

@media (max-width: 767px) {
  .shop-archive ul.products {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-bottom: 60px;
  }

  /* woocommerce-smallscreen.css re-floats the cards at 48% below 768px. */
  .shop-archive ul.products li.product,
  .shop-archive ul.products[class*="columns-"] li.product {
    width: auto;
    margin: 0;
    float: none;
  }
}

/* ==========================================================================
   3. Single product
   ========================================================================== */

.shop-single__inner {
  padding-top: 132px;
  padding-bottom: 180px;
}

@media (max-width: 767px) {
  .shop-single__inner {
    padding-top: calc(var(--shop-header-clearance) + 24px);
    padding-bottom: 90px;
  }
}

.shop-product__back {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--shop-black);
  font-family: var(--shop-font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.shop-single .shop-product__back:hover {
  color: var(--shop-green);
  text-decoration: none;
}

.shop-product__back-icon {
  display: flex;
  width: 15px;
  height: 15px;
}

.shop-product__back-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.shop-product__columns {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

@media (max-width: 1119px) {
  .shop-product__columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 1023px) {
  .shop-product__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* The gallery carries both .woocommerce-product-gallery and .images, and
   WooCommerce sizes it with
     .woocommerce:where(...) div.product div.images { width: 48%; float: left }
   at (0,3,2). A plain .shop-product__col--media .woocommerce-product-gallery
   is (0,2,0) and loses, which left the photo at 48% of its column with the
   rest of the column empty. These match WooCommerce's weight and then some. */
.shop-single .shop-product.product div.images,
.shop-single .shop-product.product div.woocommerce-product-gallery,
.shop-single div.product div.woocommerce-product-gallery,
.shop-product__col--media .woocommerce-product-gallery {
  width: 100%;
  max-width: 500px;
  margin: 0;
  padding: 0;
  float: none;
}

.shop-single .shop-product.product div.images img,
.shop-product__col--media .woocommerce-product-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.shop-product__col--media .woocommerce-product-gallery__wrapper {
  margin: 0;
}

/* Single-image products have no thumbnail strip; nothing should reserve space
   for one. */
.shop-product__col--media .flex-control-thumbs:empty {
  display: none;
}

.shop-product__col--media .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.shop-product__col--media .flex-control-thumbs li {
  flex: 0 0 calc(20% - 8px);
  width: auto;
  margin: 0;
}

.shop-product__col--media .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.6;
  transition: opacity 200ms ease;
}

.shop-product__col--media .flex-control-thumbs img.flex-active,
.shop-product__col--media .flex-control-thumbs img:hover {
  opacity: 1;
}

/* Same problem on the summary side: WooCommerce floats it at width 48%. */
.shop-single .shop-product.product div.summary,
.shop-single div.product div.summary,
.shop-product__col--summary .summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  float: none;
}

.shop-product__title {
  margin: 0;
  font-family: var(--shop-font-condensed);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .shop-product__title {
    font-size: 32px;
  }
}

.shop-single div.product p.price,
.shop-single div.product p.price .woocommerce-Price-amount,
.shop-single div.product p.price .woocommerce-Price-amount bdi,
.shop-single div.product span.price,
.shop-single div.product span.price bdi {
  margin: 0;
  color: var(--shop-black);
  font-family: var(--shop-font-barlow);
  font-size: 25px;
  font-weight: 600;
}

.shop-single div.product p.price del,
.shop-single div.product p.price del bdi {
  color: var(--shop-muted);
  font-size: inherit;
}

/* Breakdance's divider drew nothing — the colour it referenced was never
   defined, which invalidated the border and left only its top margin. Given
   the rest of the page now has a considered rhythm, it is drawn properly. */
.shop-product__divider {
  width: 100%;
  height: 0;
  margin: 22px 0 4px;
  border: 0;
  border-top: 1px solid var(--shop-rule);
}

.shop-product__description-label {
  margin: 0;
  font-family: var(--shop-font-condensed);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-product__description {
  margin: 0 0 14px;
  color: var(--shop-ink);
  font-family: var(--shop-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

.shop-product__description p:last-child {
  margin-bottom: 0;
}

.shop-single .shop-product__description a {
  color: var(--shop-green);
  text-decoration: underline;
}

.shop-single .shop-product__description a:hover {
  color: var(--shop-green-dark);
}

.shop-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 10px 0 0;
}

.shop-product form.cart .quantity {
  margin: 0;
}

.shop-product form.cart .quantity input.qty {
  box-sizing: border-box;
  width: 85px;
  height: 48px;
  padding: 0 8px;
  border: 1px solid var(--shop-input-border);
  border-radius: var(--shop-radius);
  background: var(--shop-white);
  color: var(--shop-ink);
  font-family: var(--shop-font-sans);
  font-size: 14px;
  text-align: center;
}

.shop-product .stock {
  display: none;
}

/* ==========================================================================
   4. Cart

   WooCommerce's default puts the cart form full width with the totals floated
   underneath. Items left, totals in a panel beside them reads better and keeps
   the total in view while quantities change.
   ========================================================================== */

/* Scoped to the cart by its body class — checkout and My Account share this
   wrapper and lay themselves out differently.

   WooCommerce puts a .woocommerce-notices-wrapper first inside .woocommerce,
   even when empty. As a grid item it claims the first cell and pushes the form
   into the second, so it has to span the full row. */
body.woocommerce-cart .shop-page__body > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

body.woocommerce-cart .shop-page__body > .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-cart .shop-page__body > .woocommerce > .cart-empty,
body.woocommerce-cart .shop-page__body > .woocommerce > .return-to-shop {
  grid-column: 1 / -1;
  margin: 0;
}

/* An empty notices wrapper should not add a gap of its own. */
body.woocommerce-cart .shop-page__body > .woocommerce > .woocommerce-notices-wrapper:empty {
  display: none;
}

@media (max-width: 1023px) {
  body.woocommerce-cart .shop-page__body > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

.shop-page .woocommerce-cart-form {
  margin: 0;
}

/* Strip the table chrome — WooCommerce's bordered box reads like a spreadsheet.
   A single rule under each line is enough structure. */
.shop-page table.shop_table.woocommerce-cart-form__contents {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}

.shop-page table.woocommerce-cart-form__contents thead th {
  padding: 0 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--shop-rule);
  background: transparent;
  color: var(--shop-muted);
  font-family: var(--shop-font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.shop-page table.woocommerce-cart-form__contents tbody td {
  padding: 20px 12px;
  border: 0;
  border-bottom: 1px solid var(--shop-rule);
  background: transparent;
  vertical-align: middle;
}

.shop-page table.woocommerce-cart-form__contents td.product-remove {
  width: 36px;
  padding-left: 0;
  padding-right: 0;
}

.shop-page table.woocommerce-cart-form__contents td.product-thumbnail {
  width: 96px;
}

.shop-page .woocommerce-cart-form__contents .attachment-woocommerce_thumbnail,
.shop-page td.product-thumbnail img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--shop-radius);
}

.shop-page td.product-name a {
  color: var(--shop-black);
  font-family: var(--shop-font-condensed);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

.shop-page td.product-name a:hover {
  color: var(--shop-green);
}

.shop-page table.woocommerce-cart-form__contents .woocommerce-Price-amount bdi {
  color: var(--shop-ink);
  font-family: var(--shop-font-barlow);
  font-size: 15px;
  font-weight: 600;
}

.shop-page td.product-subtotal .woocommerce-Price-amount bdi {
  color: var(--shop-black);
}

.shop-page dl.variation dt,
.shop-page dl.variation dd {
  color: var(--shop-muted);
  font-family: var(--shop-font-sans);
  font-size: 13px;
  font-weight: 400;
}

.shop-page td.product-quantity input.qty,
.shop-page .quantity input.qty {
  box-sizing: border-box;
  width: 72px;
  height: 42px;
  padding: 0 6px;
  border: 1px solid var(--shop-input-border);
  border-radius: var(--shop-radius);
  color: var(--shop-ink);
  font-family: var(--shop-font-sans);
  font-size: 14px;
  text-align: center;
}

/* Coupon / update row — switched off in the builder, and the coupon form is
   disabled in PHP. */
.shop-page td.actions {
  display: none;
}

/* The × that removes a line. WooCommerce ships it as color:red !important with
   a red fill on hover, so matching that weight is the only way to take it
   over. Quiet at rest; green when you are about to click it. */
.shop-page td.product-remove a.remove,
.shop-page a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent !important;
  color: #9aa0a6 !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
}

.shop-page td.product-remove a.remove:hover,
.shop-page a.remove:hover,
.shop-page td.product-remove a.remove:focus,
.shop-page a.remove:focus {
  background: var(--shop-green-tint) !important;
  color: var(--shop-green) !important;
}

/* Totals panel */

.shop-page .cart-collaterals {
  width: 100%;
  margin: 0;
  float: none;
}

.shop-page .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
  padding: 28px;
  border: 1px solid var(--shop-rule);
  border-radius: 4px;
  background: var(--shop-panel);
}

.shop-page .cart_totals h2 {
  margin: 0 0 18px;
  font-family: var(--shop-font-condensed);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.shop-page .cart_totals table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

.shop-page .cart-collaterals table tr {
  border: 0;
}

.shop-page .cart-collaterals table th,
.shop-page .cart-collaterals table td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--shop-rule);
  background: transparent;
  vertical-align: top;
  text-align: left;
}

.shop-page .cart_totals .shop_table tr:not(:last-child) th {
  color: var(--shop-muted);
  font-family: var(--shop-font-condensed);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-page .cart-collaterals table tr:not(.order-total) .woocommerce-Price-amount bdi {
  font-family: var(--shop-font-barlow);
  font-size: 15px;
  font-weight: 600;
}

.shop-page .cart-collaterals table tr.order-total th,
.shop-page .cart-collaterals table tr:last-child th {
  padding-top: 16px;
  border-bottom: 0;
  color: var(--shop-black);
  font-family: var(--shop-font-condensed);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.shop-page .cart-collaterals table tr.order-total td,
.shop-page .cart-collaterals table tr:last-child td {
  padding-top: 16px;
  border-bottom: 0;
}

.shop-page .cart-collaterals table tr.order-total .woocommerce-Price-amount bdi {
  color: var(--shop-black);
  font-family: var(--shop-font-barlow);
  font-size: 20px;
  font-weight: 700;
}

/* Shipping choices — WooCommerce renders a bare ul with cramped lines. */
.shop-page #shipping_method,
.shop-page ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-page #shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--shop-font-sans);
  font-size: 13px;
  line-height: 1.4;
}

.shop-page #shipping_method li:last-child {
  margin-bottom: 0;
}

.shop-page #shipping_method li input {
  flex: 0 0 auto;
  margin: 2px 0 0;
}

.shop-page #shipping_method li label {
  margin: 0;
  font-family: var(--shop-font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.shop-page .woocommerce-shipping-destination {
  margin: 12px 0 0;
  color: var(--shop-muted);
  font-family: var(--shop-font-sans);
  font-size: 12px;
  line-height: 1.5;
}

/* "Reikna sendingarkostnað" — a secondary action inside the totals panel, so
   it matches the shipping options rather than the panel's headings. */
.shop-page .shipping-calculator-button,
.shop-page a.shipping-calculator-button,
.shop-page table a.shipping-calculator-button {
  display: inline-block;
  margin-top: 8px;
  color: var(--shop-green);
  font-family: var(--shop-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
}

.shop-page a.shipping-calculator-button:hover {
  color: var(--shop-green-dark);
}

.shop-page .shipping-calculator-form {
  margin-top: 12px;
}

.shop-page .shipping-calculator-form .form-row {
  margin-bottom: 12px;
}

.shop-page .wc-proceed-to-checkout {
  padding: 20px 0 0;
}

/* Empty cart */

.shop-page .cart-empty {
  margin: 0 0 20px;
  font-family: var(--shop-font-sans);
  font-size: 15px;
}

/* ==========================================================================
   5. Checkout

   Details on the left, order summary in a panel on the right that stays in
   view while the form is filled in.
   ========================================================================== */

.shop-page form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas:
    "details  review-heading"
    "details  review";
  gap: 0 56px;
  align-items: start;
}

.shop-page form.checkout #customer_details {
  grid-area: details;
}

.shop-page form.checkout #order_review_heading {
  grid-area: review-heading;
}

.shop-page form.checkout #order_review {
  grid-area: review;
}

@media (max-width: 1023px) {
  .shop-page form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "details"
      "review-heading"
      "review";
    gap: 40px 0;
  }
}

/* WooCommerce splits billing / additional into two floated halves. Note that
   #customer_details *is* the .col2-set — the columns are its direct children,
   not descendants of a nested wrapper. Stacked, so the form is one readable
   column beside the order summary rather than three columns across. */
.shop-page #customer_details,
.shop-page #customer_details > .col-1,
.shop-page #customer_details > .col-2 {
  width: 100%;
  float: none;
  margin: 0;
}

.shop-page #customer_details > .col-2 {
  margin-top: 36px;
}

/* "Ship to a different address" is a checkbox heading, not a section title. */
.shop-page #ship-to-different-address {
  margin: 0 0 16px;
  font-family: var(--shop-font-condensed);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.shop-page #ship-to-different-address label,
.shop-page #ship-to-different-address span {
  display: inline;
  margin: 0;
  font-family: var(--shop-font-condensed);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.shop-page .woocommerce-billing-fields h3,
.shop-page .woocommerce-additional-fields h3,
.shop-page #order_review_heading,
.shop-page .woocommerce-column__title,
.shop-page .woocommerce-MyAccount-content h2,
.shop-page .woocommerce-Address-title h3,
.shop-page form.checkout h3 {
  margin: 0 0 20px;
  font-family: var(--shop-font-condensed);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.shop-page #order_review {
  padding: 28px;
  border: 1px solid var(--shop-rule);
  border-radius: 4px;
  background: var(--shop-panel);
}

.shop-page #order_review table.shop_table {
  width: 100%;
  margin: 0 0 8px;
  border: 0;
  border-collapse: collapse;
}

.shop-page #order_review table.shop_table th,
.shop-page #order_review table.shop_table td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--shop-rule);
  background: transparent;
  text-align: left;
}

.shop-page #order_review table.shop_table thead th {
  color: var(--shop-muted);
  font-family: var(--shop-font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop-page #order_review table.shop_table tfoot tr:last-child th,
.shop-page #order_review table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
  color: var(--shop-black);
  font-family: var(--shop-font-condensed);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.shop-page #payment {
  margin-top: 8px;
  border-radius: 4px;
  background: transparent;
}

.shop-page #payment ul.payment_methods {
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--shop-rule);
  list-style: none;
}

.shop-page #payment ul.payment_methods li {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--shop-font-sans);
  font-size: 14px;
}

.shop-page #payment ul.payment_methods li label {
  display: inline;
  margin: 0;
  font-family: var(--shop-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.shop-page #payment div.payment_box {
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--shop-rule);
  border-radius: var(--shop-radius);
  background: var(--shop-white);
  color: var(--shop-ink);
  font-family: var(--shop-font-sans);
  font-size: 13px;
  line-height: 1.5;
}

.shop-page #payment div.payment_box::before {
  display: none;
}

.shop-page #payment .form-row.place-order {
  margin: 0;
  padding: 20px 0 0;
}

.shop-page #payment .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 14px;
  font-family: var(--shop-font-sans);
  font-size: 13px;
  line-height: 1.5;
}

/* ==========================================================================
   6. My Account
   ========================================================================== */

/* Logged out, the page is a single login form — give it a panel rather than
   leaving it stretched across the full width. */
.shop-page .woocommerce-form-login,
.shop-page form.woocommerce-form-login {
  max-width: 520px;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--shop-rule);
  border-radius: 4px;
  background: var(--shop-panel);
}

.shop-page .woocommerce-form-login .form-row {
  margin-bottom: 18px;
  padding: 0;
}

.shop-page .woocommerce-form-login .form-row-first,
.shop-page .woocommerce-form-login .form-row-last {
  width: 100%;
  float: none;
}

.shop-page .woocommerce-form-login__rememberme {
  display: inline-block;
  margin: 0 0 14px;
  font-family: var(--shop-font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.shop-page .woocommerce-LostPassword {
  margin: 14px 0 0;
  font-family: var(--shop-font-sans);
  font-size: 13px;
}

/* Logged in: navigation beside content. */
.shop-page .woocommerce-MyAccount-navigation {
  width: 240px;
  float: left;
  margin-right: 48px;
}

.shop-page .woocommerce-MyAccount-content {
  width: calc(100% - 288px);
  float: left;
  font-family: var(--shop-font-sans);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .shop-page .woocommerce-MyAccount-navigation,
  .shop-page .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    margin-right: 0;
  }

  .shop-page .woocommerce-MyAccount-content {
    margin-top: 28px;
  }
}

.shop-page nav.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  border: 1px solid var(--shop-rule);
  border-radius: 4px;
  overflow: hidden;
  list-style: none;
}

.shop-page nav.woocommerce-MyAccount-navigation ul li {
  margin: 0;
  border-bottom: 1px solid var(--shop-rule);
}

.shop-page nav.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: 0;
}

.shop-page nav.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 14px 18px;
  color: var(--shop-black);
  font-family: var(--shop-font-condensed);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.shop-page nav.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--shop-green-tint);
  color: var(--shop-green-dark);
}

.shop-page nav.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--shop-green);
  color: var(--shop-white);
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

.shop-page form .form-row {
  margin: 0 0 18px;
  padding: 0;
}

.shop-page form .form-row label,
.shop-page .woocommerce form .form-row label,
.shop-page .woocommerce-MyAccount-content label {
  display: block;
  margin-bottom: 7px;
  color: var(--shop-ink);
  font-family: var(--shop-font-condensed);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Inline labels — checkboxes and radios read as sentences, not field names. */
.shop-page form .form-row label.checkbox,
.shop-page form .form-row label.woocommerce-form__label-for-checkbox,
.shop-page .woocommerce-form__label-for-checkbox span {
  display: inline;
  margin: 0;
  font-family: var(--shop-font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.shop-page .woocommerce form .form-row input.input-text,
.shop-page .woocommerce form .form-row textarea,
.shop-page .woocommerce form .form-row select,
.shop-page form .form-row input.input-text,
.shop-page form .form-row textarea,
.shop-page form .form-row select,
.shop-page .select2-container .select2-selection--single {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--shop-input-border);
  border-radius: var(--shop-radius);
  background: var(--shop-white);
  color: var(--shop-ink);
  font-family: var(--shop-font-sans);
  font-size: 14px;
  line-height: 1.4;
}

.shop-page .woocommerce form .form-row textarea,
.shop-page form .form-row textarea {
  min-height: 110px;
  resize: vertical;
}

.shop-page .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
}

.shop-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 11px;
  right: 8px;
}

.shop-page input:focus,
.shop-page textarea:focus,
.shop-page select:focus,
.shop-page .woocommerce form .form-row input.input-text:focus {
  border-color: var(--shop-green);
  outline: 0;
  box-shadow: 0 0 0 2px var(--shop-green-tint);
}

.shop-page .required,
.shop-page abbr.required {
  border: 0;
  color: #b81c23;
  text-decoration: none;
}

.shop-page input[type="radio"],
.shop-page input[type="checkbox"],
.shop-single input[type="radio"],
.shop-single input[type="checkbox"] {
  accent-color: var(--shop-green);
}

.shop-page .select2-container--default .select2-results__option--highlighted[aria-selected],
.shop-page .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--shop-green);
  color: var(--shop-white);
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.shop-page .wc-proceed-to-checkout a.button,
.shop-page .wc-proceed-to-checkout a.checkout-button,
.shop-page a.button.alt,
.shop-page button.button.alt,
.shop-page input.button.alt,
.shop-page #place_order.button,
.shop-page button#place_order,
.shop-page a.button.wc-forward,
.shop-page button.button,
.shop-page a.button,
.shop-page input.button,
.shop-page .woocommerce-button.button,
.shop-archive ul.products li.product a.button,
.shop-single .woocommerce-message a.button,
.shop-single .woocommerce-info a.button {
  display: inline-block;
  width: auto;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--shop-radius);
  background: var(--shop-black);
  background-color: var(--shop-black);
  color: var(--shop-white);
  font-family: var(--shop-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease;
}

.shop-page .wc-proceed-to-checkout a.button:hover,
.shop-page .wc-proceed-to-checkout a.checkout-button:hover,
.shop-page a.button.alt:hover,
.shop-page button.button.alt:hover,
.shop-page input.button.alt:hover,
.shop-page #place_order.button:hover,
.shop-page button#place_order:hover,
.shop-page a.button.wc-forward:hover,
.shop-page button.button:hover,
.shop-page a.button:hover,
.shop-page input.button:hover,
.shop-page .woocommerce-button.button:hover,
.shop-archive ul.products li.product a.button:hover,
.shop-single .woocommerce-message a.button:hover,
.shop-single .woocommerce-info a.button:hover {
  background: var(--shop-green);
  background-color: var(--shop-green);
  color: var(--shop-white);
}

/* The two primary actions run the full width of their panel. */
.shop-page .wc-proceed-to-checkout a.checkout-button,
.shop-page #place_order,
.shop-page button#place_order {
  display: block;
  width: 100%;
  padding: 17px 26px;
  text-align: center;
}

/* Smaller button on the grid cards. */
.shop-archive ul.products li.product a.button {
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 500;
}

/* Single product add to cart. */
.shop-product button.single_add_to_cart_button,
.shop-product button.single_add_to_cart_button.button,
.shop-product button.single_add_to_cart_button.alt {
  height: 48px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--shop-radius);
  background: var(--shop-black);
  background-color: var(--shop-black);
  color: var(--shop-white);
  font-family: var(--shop-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 250ms ease;
}

.shop-product button.single_add_to_cart_button:hover,
.shop-product button.single_add_to_cart_button.button:hover,
.shop-product button.single_add_to_cart_button.alt:hover {
  background: var(--shop-green);
  background-color: var(--shop-green);
  color: var(--shop-white);
}

/* ==========================================================================
   9. Notices

   WooCommerce ships a purple accent on .woocommerce-info and its own green on
   .woocommerce-message. Both become the brand green; errors keep red, because
   a failed payment should not look like a success.

   The ::before glyph is suppressed. WooCommerce draws it from its own icon
   font, which is not loaded here, so it rendered as an empty tofu box sitting
   on top of the first word. Breakdance hid these icons too.
   ========================================================================== */

.shop-single .woocommerce-message,
.shop-single .woocommerce-info,
.shop-single .woocommerce-error,
.shop-page .woocommerce-message,
.shop-page .woocommerce-info,
.shop-page .woocommerce-error,
.shop-archive .woocommerce-message,
.shop-archive .woocommerce-info,
.shop-archive .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 18px 24px;
  border: 0;
  border-top: 3px solid var(--shop-green);
  border-radius: 4px;
  background: var(--shop-green-tint);
  color: var(--shop-ink);
  font-family: var(--shop-font-sans);
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}

.shop-single .woocommerce-message::before,
.shop-single .woocommerce-info::before,
.shop-single .woocommerce-error::before,
.shop-page .woocommerce-message::before,
.shop-page .woocommerce-info::before,
.shop-page .woocommerce-error::before,
.shop-archive .woocommerce-message::before,
.shop-archive .woocommerce-info::before,
.shop-archive .woocommerce-error::before {
  content: none;
  display: none;
}

.shop-single .woocommerce-message .button,
.shop-page .woocommerce-message .button {
  margin-left: auto;
}

.shop-single .woocommerce-error,
.shop-page .woocommerce-error,
.shop-archive .woocommerce-error {
  border-top-color: #b81c23;
  background: #fdf1f1;
}

/* ==========================================================================
   10. No purple, no blue

   Once Breakdance stopped suppressing woocommerce.css, two palettes surfaced
   on these pages: WooCommerce's purple (#7f54b3, #a46497) and olive (#958e09),
   and the theme's Bootstrap blue. Links on shop surfaces are green.
   ========================================================================== */

.shop-archive a:not(.button):not(.shop-card__link),
.shop-single a:not(.button):not(.shop-product__back),
.shop-page a:not(.button):not(.checkout-button):not(.remove) {
  color: var(--shop-green);
}

.shop-archive a:not(.button):not(.shop-card__link):hover,
.shop-single a:not(.button):not(.shop-product__back):hover,
.shop-page a:not(.button):not(.checkout-button):not(.remove):hover {
  color: var(--shop-green-dark);
}

.shop-archive .shop-card__title,
.shop-archive .shop-card__link {
  color: var(--shop-black);
}

.shop-archive span.onsale,
.shop-single span.onsale {
  min-width: auto;
  min-height: auto;
  padding: 5px 10px;
  border-radius: 2px;
  background: var(--shop-green);
  color: var(--shop-white);
  font-family: var(--shop-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.shop-archive .star-rating span::before,
.shop-single .star-rating span::before,
.shop-archive .star-rating::before,
.shop-single .star-rating::before {
  color: var(--shop-green);
}

.shop-page .blockUI.blockOverlay::before,
.shop-page .loader::before {
  border-top-color: var(--shop-green) !important;
}

/* ==========================================================================
   11. Small screens

   woocommerce-smallscreen.css reflows the cart table into stacked rows with
   data-title labels below 768px. Keep that, but match the type.
   ========================================================================== */

@media (max-width: 767px) {
  .shop-page table.shop_table.woocommerce-cart-form__contents tbody tr {
    display: block;
    margin-bottom: 24px;
    border: 1px solid var(--shop-rule);
    border-radius: 4px;
    overflow: hidden;
  }

  .shop-page table.shop_table.woocommerce-cart-form__contents tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--shop-rule);
    text-align: right;
  }

  .shop-page table.shop_table.woocommerce-cart-form__contents tbody td::before {
    float: left;
    color: var(--shop-muted);
    font-family: var(--shop-font-condensed);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* woocommerce-smallscreen.css turns every cell into a block with
     .woocommerce table.shop_table_responsive tr td — (0,2,3), which outranks
     the (0,2,1) that hides the coupon/update row on desktop, so "Uppfæra
     körfu" reappeared on phones. */
  .shop-page table.shop_table_responsive tr td.actions,
  .shop-page table.woocommerce-cart-form__contents tr td.actions {
    display: none;
  }

  /* The remove × otherwise gets a full-height row of its own at the top of
     each card. Keep it as a slim strip, aligned right. */
  .shop-page table.shop_table_responsive tr td.product-remove,
  .shop-page table.woocommerce-cart-form__contents tr td.product-remove {
    display: flex;
    justify-content: flex-end;
    width: auto;
    padding: 8px 12px;
    background: var(--shop-panel);
    text-align: right;
  }

  .shop-page table.shop_table_responsive tr td.product-remove::before {
    content: none;
  }

  .shop-page .cart-collaterals .cart_totals,
  .shop-page #order_review {
    padding: 22px;
  }
}