/*
Theme Name: Askim Child
Theme URI: https://demo.ovanap.dev/askim-wp/
Description: GeneratePress child theme for Din Salong Askim. 1:1 conversion of the approved
             static DC/React demo. Design tokens are lifted verbatim from the demo's root
             wrapper CSS custom properties (see DESIGN-TOKENS.md). No values invented.
Author: Ovanap
Template: generatepress
Version: 0.1.1
Text Domain: askim-child
*/

/* =========================================================================
   1. DESIGN TOKENS  — verbatim from the demo root wrapper (DESIGN-TOKENS.md)
   ========================================================================= */
:root {
  /* Colors */
  --accent:      #1E7A6E; /* primary teal (brand, links, CTAs) */
  --accent-deep: #155A50; /* darker teal (hover, gradients) */
  --ink:         #21302C; /* primary text / dark buttons */
  --muted:       #5E6A64; /* secondary / muted text */
  --bg:          #F4F2EC; /* page background (cream) */
  --card:        #FBFAF5; /* card / warm-white surface */
  --sand:        #E4E8E2; /* sand border / divider surface */
  --teal-dark:   #143C37; /* deep teal (dark sections, footer) */
  --line:        rgba(33,48,44,.13); /* hairline borders */

  /* Additional literal colors used inline in the demo */
  --white:       #FFF;
  --tint-green:  #EAF1ED; /* light green surface / tint */
  --teal-light:  #7FC9B8; /* light teal accent (icons, highlights) */
  --near-black:  #0F1B18; /* deep sections */
  --error:       #B3261E; /* form validation */

  /* Typography */
  --head: 'Marcellus', Georgia, serif;         /* headings / display */
  --sub:  'Tenor Sans', Georgia, serif;         /* eyebrow labels / subheads */
  --body: 'Mulish', system-ui, sans-serif;      /* body / UI */

  /* Layout */
  --container: 1240px;
  --pad-x: clamp(18px, 4vw, 40px);

  /* Radius */
  --r-pill: 50%;
  --r-card: 3px;
  --r-btn:  2px;
  --r-img:  4px;
  --r-lg:   10px;

  /* Shadows (warm teal-tinted) */
  --shadow-nav:  0 18px 30px -22px rgba(20,60,55,.5);
  --shadow-drop: 0 16px 40px -20px rgba(20,60,55,.5);
  --shadow-card: 0 22px 44px -28px rgba(20,60,55,.55);
  --shadow-hero: 0 30px 60px -38px rgba(20,60,55,.5);
}

/* =========================================================================
   2. BASE RESET  — from the demo's shared <style> block (verbatim)
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
input { font-family: var(--body); }
::selection { background: var(--accent); color: #fff; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* =========================================================================
   3. MOBILE NAV  — pure-CSS checkbox toggle (verbatim, breakpoint 880px)
   ========================================================================= */
.dsa-burger { display: none; }
.dsa-menu-cb { display: none; }

@media (max-width: 880px) {
  .dsa-nav {
    display: none !important;
    position: absolute !important;
    top: 100%; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 6px 20px 14px;
    box-shadow: var(--shadow-nav);
  }
  .dsa-menu-cb:checked ~ .dsa-nav { display: flex !important; }
  .dsa-nav a { padding: 14px 2px !important; width: 100%; }
  .dsa-burger { display: flex; }
  .dsa-search { display: none; }
}

details[open] .dsa-chev { transform: rotate(180deg); }
.dsa-revtrack::-webkit-scrollbar { display: none; }

/* =========================================================================
   4. KEYFRAMES  — verbatim from the demo shared block
   ========================================================================= */
@keyframes dsaZoom   { from { transform: scale(1.001); } to { transform: scale(1.1); } }
@keyframes dsaScroll { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(7px); opacity: 1; } }
@keyframes dsaFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dsaGreenShift  { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes dsaGreenBreath { 0%,100% { opacity: .4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(4%); } }

/* =========================================================================
   5. COMPONENT STYLES
   Structural inline styles from the demo are preserved in the templates;
   the demo's `style-hover=""` attributes (a DC-runtime feature) are
   reproduced here as real :hover rules.
   ========================================================================= */

/* WordPress core global-styles ships `html :where([style*="border-color"]){border-style:solid}`
   to support the editor's border-color control. It matches ANY element whose inline
   style merely contains the text "border-color" — including the demo's
   `transition:border-color`/`transition:...border-color...` — and then paints a 3px
   `medium` border on sides that only set border-bottom (e.g. the nav links → dark box).
   Neutralize it. Elements that truly want a border set border-style inline (via the
   `border:Npx solid` shorthand), which still wins over this rule. Specificity
   html+body beats WP's `html :where(...)`. */
html body :where([style*="border-color"]) { border-style: none; }

/* Header nav links — hover: accent underline (demo style-hover). */
.dsa-navlink { border-bottom-style: solid; } /* keep the 1px bottom the inline style declares */
.dsa-navlink:hover { border-bottom: 1px solid var(--accent) !important; }

/* Header icon buttons (search, cart) — hover: accent color + border. */
.dsa-iconbtn:hover { color: var(--accent); border-color: var(--accent); }

/* Reset GeneratePress's default button padding/font (10px 20px / 17px) bleeding
   onto the demo's fixed-size icon buttons (search/cart/burger/review arrows),
   which centre an icon via flexbox and set their own dimensions. */
.dsa-iconbtn, .dsa-burger, .dsa-revnav button { padding: 0; font-size: inherit; }

/* Search autocomplete result rows. */
[data-ak-search-results] a:hover { background: var(--tint-green); }

/* Primary CTA ("Bestill time") — hover: deep accent. */
.dsa-cta:hover { background: var(--accent-deep); }

/* Footer links — hover: white. */
.dsa-foot-link:hover { color: #fff; }

/* GeneratePress's dynamic CSS sets `a:hover,a:focus,a:active{color:var(--contrast)}`
   (= #222 dark) on every link without its own hover. On the demo's dark sections
   (e.g. the green Kontakt CTA before the footer) that turns light links dark and
   unreadable. The demo's plain links don't change color on hover — so keep the
   inherited color. Specific hovers (.dsa-foot-link #fff, .dsa-navlink underline,
   style-hover JS, CTA buttons) have their own higher-specificity rules and still win. */
body a:hover, body a:focus, body a:active { color: inherit; }

/* =========================================================================
   WooCommerce re-theme — replace default purple with the brand tokens.
   We kept woocommerce-general for cart/checkout structure and only re-color it.
   ========================================================================= */
:root {
  --wc-green:   #1E7A6E;
  --wc-red:     #B3261E;
  --wc-orange:  #155A50;
  --wc-primary: #1E7A6E;
  --wc-primary-text: #ffffff;
  --wc-secondary: #EAF1ED;
  --wc-highlight: #1E7A6E;
  --wc-content-bg: #ffffff;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt, .wc-block-components-button {
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px 28px;
  transition: background .25s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background: var(--accent-deep);
  color: #fff;
}
.woocommerce .cart_totals,
.woocommerce table.shop_table { border-color: var(--line); }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-top-color: var(--accent); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--accent); }
.woocommerce-store-notice, .woocommerce span.onsale { background: var(--accent); }

/* Icon SVGs must not be squished by flexbox. On mobile the review carousel's
   heading row got tight and the prev/next buttons shrank, squashing their
   chevron SVGs to ~4px wide (they looked like empty dots, not arrows). */
svg { flex-shrink: 0; }
.dsa-revnav { flex: none; }
.dsa-revnav button { flex: none; }

/* Mobile product carousel: the front-page product grid becomes a swipeable,
   scroll-snapping horizontal carousel (so it isn't a tall stacked column). */
@media (max-width: 760px) {
  .dsa-prodgrid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -18px;
    margin-right: -18px;
    padding: 4px 18px 10px;
  }
  .dsa-prodgrid::-webkit-scrollbar { display: none; }
  .dsa-prodgrid > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* =========================================================================
   Cart & Checkout — styled to the Askim design (tokens), inside .ak-cart.
   ========================================================================= */
.ak-cart .woocommerce { font-family: var(--body); color: var(--ink); }

/* Cart: full-width items table + totals card aligned right below it (single
   column avoids squishing the 6-column table). */
.ak-cart .cart-collaterals { width: 100%; margin-top: clamp(24px,3vw,40px); }
.ak-cart .cart-collaterals .cart_totals { width: 100%; max-width: 460px; margin-left: auto; float: none; }

/* Cart items table -> clean token rows. */
.ak-cart table.shop_table { border: 1px solid var(--line); border-radius: var(--r-card); border-collapse: separate; border-spacing: 0; background: var(--card); width: 100%; overflow: hidden; }
.ak-cart table.shop_table th { font-family: var(--body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--line); background: transparent; }
.ak-cart table.shop_table td { padding: 18px 14px; border-top: 1px solid var(--line); vertical-align: middle; background: transparent; }
.ak-cart table.shop_table tr:first-child td { border-top: none; }
.ak-cart .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }
.ak-cart td.product-name a { font-family: var(--head); font-size: 17px; color: var(--ink); }
.ak-cart td.product-name a:hover { color: var(--accent); }
.ak-cart .product-price, .ak-cart .product-subtotal { font-family: var(--head); color: var(--ink); }
.ak-cart a.remove { color: var(--muted) !important; font-size: 20px; line-height: 1; }
.ak-cart a.remove:hover { color: var(--error) !important; background: transparent !important; }
.ak-cart .quantity input.qty { width: 62px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 2px; background: #fff; text-align: center; font-size: 15px; }

/* Desktop: replace the auto-layout 6-column table (which dumped all slack into a
   692px empty "remove" column and, once the actions td went display:flex, lost
   its colspan) with an explicit CSS grid. × sits right next to the thumbnail;
   the coupon/actions row spans the full table width. */
@media (min-width: 769px) {
  .ak-cart .woocommerce-cart-form table.shop_table { display: block; padding: 4px clamp(16px,1.6vw,24px); }
  .ak-cart table.shop_table thead,
  .ak-cart table.shop_table tbody { display: block; }
  .ak-cart table.shop_table thead tr,
  .ak-cart table.shop_table tr.cart_item {
    display: grid;
    grid-template-columns: 30px 88px minmax(0,1fr) 110px 128px 110px;
    align-items: center;
    gap: 18px;
  }
  .ak-cart table.shop_table thead th { padding: 15px 0; border: none; }
  .ak-cart table.shop_table td { display: flex; align-items: center; padding: 18px 0; border: none; }
  .ak-cart table.shop_table thead tr { border-bottom: 1px solid var(--line); }
  .ak-cart table.shop_table tr.cart_item + tr.cart_item { border-top: 1px solid var(--line); }
  .ak-cart td.product-remove { justify-content: center; }
  .ak-cart .product-price, .ak-cart .product-subtotal { font-family: var(--head); }
  /* Actions row: it's a plain <tr> (no .cart_item) — make it block so the td
     spans the whole width instead of collapsing to one grid column. */
  .ak-cart table.shop_table tbody tr:not(.cart_item) { display: block; border-top: 1px solid var(--line); }
  .ak-cart td.actions { border: none !important; padding: 22px 0 8px !important; }
}

/* Mobile: stack the cart table rows into cards (Woo shop_table_responsive) so
   the 6-column table doesn't overflow. */
@media (max-width: 768px) {
  .ak-cart table.shop_table_responsive,
  .ak-cart table.shop_table_responsive tbody { display: block; width: 100%; }
  .ak-cart table.shop_table_responsive thead { display: none; }
  .ak-cart table.shop_table_responsive tr { display: block; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 14px; background: var(--card); overflow: hidden; }
  .ak-cart table.shop_table_responsive td { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; border-top: 1px solid var(--line); padding: 12px 14px; min-width: 0; }
  .ak-cart table.shop_table_responsive td > * { min-width: 0; }
  .ak-cart table.shop_table_responsive td::before { content: attr(data-title); flex: none; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; }
  .ak-cart table.shop_table_responsive td.product-remove { justify-content: flex-end; border-top: none; }
  .ak-cart table.shop_table_responsive td.product-remove::before { content: none; }
  .ak-cart table.shop_table_responsive td.product-thumbnail { justify-content: center; }
  .ak-cart table.shop_table_responsive td.product-thumbnail::before { content: none; }
  .ak-cart table.shop_table_responsive td.product-thumbnail img { width: 96px; height: 96px; }
  .ak-cart table.shop_table_responsive td.product-name { text-align: right; }
  .ak-cart table.shop_table_responsive td.actions { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; }
  .ak-cart td.actions .coupon { flex-direction: column; flex: 0 0 auto !important; align-items: stretch; }
  .ak-cart td.actions .coupon .input-text,
  .ak-cart td.actions .coupon input#coupon_code { width: 100%; flex: 0 0 auto !important; height: auto; }
  .ak-cart td.actions button { width: 100%; }
  .ak-cart td.actions button[name="update_cart"] { margin-left: 0; }
  /* Bigger tap target for the remove × on mobile. */
  .ak-cart td.product-remove a.remove { padding: 6px 10px; font-size: 24px; }
  .ak-cart .cart-collaterals .cart_totals { max-width: none; }
}

/* Coupon + update row. Higher specificity than Woo's `.woocommerce table.cart
   td.actions` so its float layout (which overlapped the buttons at ~1024px) is
   fully replaced by a clean flex row. */
.ak-cart table.cart td.actions,
.ak-cart td.actions {
  display: flex !important; flex-wrap: wrap; gap: 12px; align-items: stretch;
  padding-top: 22px; text-align: left;
}
.ak-cart td.actions .coupon {
  display: flex; gap: 10px; flex: 1 1 320px; min-width: 0; float: none !important;
}
.ak-cart td.actions .coupon .input-text,
.ak-cart td.actions .coupon input#coupon_code {
  flex: 1 1 auto; min-width: 0; width: auto; float: none !important;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font-size: 14px;
}
/* Both action buttons: token green, one line, consistent height, no faded look. */
.ak-cart td.actions button {
  float: none !important; margin: 0; flex: none; white-space: nowrap; opacity: 1 !important;
  background: var(--accent) !important; color: #fff !important; border: none !important;
  font-family: var(--body); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: 14px 22px !important; border-radius: 2px; cursor: pointer; line-height: 1.1; transition: background .25s;
}
.ak-cart td.actions button:hover { background: var(--accent-deep) !important; }
.ak-cart td.actions button[name="update_cart"] { margin-left: auto; }

/* Cart totals -> card. */
.ak-cart .cart_totals { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px,2.4vw,30px); }
.ak-cart .cart_totals h2 { font-family: var(--head); font-weight: 400; font-size: clamp(20px,2.4vw,26px); margin: 0 0 18px; }
.ak-cart .cart_totals table { width: 100%; border: none; }
.ak-cart .cart_totals th, .ak-cart .cart_totals td { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; font-size: 14.5px; }
.ak-cart .cart_totals tr:first-child th, .ak-cart .cart_totals tr:first-child td { border-top: none; }
.ak-cart .cart_totals td { text-align: right; font-family: var(--head); color: var(--ink); }
.ak-cart .cart_totals .order-total th, .ak-cart .cart_totals .order-total td { font-size: 17px; }
.ak-cart .wc-proceed-to-checkout { padding-top: 18px; }
.ak-cart .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; width: 100%; }

/* Checkout form fields -> token inputs. */
.ak-cart .col2-set .col-1, .ak-cart .col2-set .col-2 { width: 100%; float: none; }
.ak-cart h3 { font-family: var(--head); font-weight: 400; font-size: clamp(20px,2.4vw,26px); }
.ak-cart .form-row label { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block; }
.ak-cart .woocommerce form .form-row input.input-text,
.ak-cart input.input-text, .ak-cart textarea, .ak-cart select, .ak-cart .select2-selection {
  padding: 13px 14px !important; border: 1px solid var(--line) !important; border-radius: 3px !important; background: #fff !important; font-size: 15px !important; color: var(--ink) !important;
}
@media (min-width: 900px) {
  /* Float layout so the billing form (left) and the order/payment box (right)
     top-align — the heading + review stack on the right starting level with the
     top of the form, with no empty gap. */
  .ak-cart form.checkout::after { content: ''; display: table; clear: both; }
  .ak-cart form.checkout #customer_details { float: left; width: 57%; }
  .ak-cart form.checkout #order_review_heading { float: right; width: 38%; margin-top: 0; }
  .ak-cart form.checkout #order_review { float: right; width: 38%; clear: right; }
  .ak-cart form.checkout .col2-set .col-1,
  .ak-cart form.checkout .col2-set .col-2 { float: none; width: 100%; }
}
/* Billing name / postcode-city on one row each. */
.ak-cart form .form-row-first { float: left; width: 48%; }
.ak-cart form .form-row-last { float: right; width: 48%; }
.ak-cart form .form-row-wide { clear: both; width: 100%; }
.ak-cart #customer_details .woocommerce-billing-fields__field-wrapper::after { content: ''; display: table; clear: both; }
.ak-cart #order_review { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(18px,2.2vw,26px); }
.ak-cart #payment { background: transparent; border-radius: 3px; }
.ak-cart #payment ul.payment_methods { border: 1px solid var(--line); border-radius: 3px; background: #fff; }
/* Re-theme the default lavender payment-method description box + its pointer. */
.ak-cart #payment div.payment_box { background: var(--tint-green); color: var(--ink); }
.ak-cart #payment div.payment_box::before { border-bottom-color: var(--tint-green) !important; }
.ak-cart #payment .wc_payment_method > label { color: var(--ink); }

/* Empty cart + order-received spacing. */
.ak-cart .cart-empty { font-size: 16px; color: var(--muted); }
.ak-cart .woocommerce-order p, .ak-cart .woocommerce-thankyou-order-received { font-size: 16px; }

/* Blog single post body — editorial prose in the Askim type system. */
.ak-post-body { color: var(--ink); font-size: 16.5px; line-height: 1.8; }
.ak-post-body p { margin: 0 0 1.4em; color: var(--muted); }
.ak-post-body h2 { font-family: var(--head); font-weight: 400; font-size: clamp(22px,2.4vw,30px); line-height: 1.2; color: var(--ink); margin: 1.8em 0 .6em; }
.ak-post-body h3 { font-family: var(--head); font-weight: 400; font-size: clamp(19px,2vw,24px); color: var(--ink); margin: 1.6em 0 .5em; }
.ak-post-body a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.ak-post-body ul, .ak-post-body ol { color: var(--muted); margin: 0 0 1.4em; padding-left: 1.3em; line-height: 1.8; }
.ak-post-body img { border-radius: 4px; margin: 1em 0; }
.ak-post-body blockquote { border-left: 2px solid var(--accent); margin: 1.6em 0; padding: 4px 0 4px 20px; font-family: var(--head); font-size: 20px; color: var(--ink); }

/* Gallery masonry (demo .dsa-grid): CSS columns, responsive. */
.dsa-grid { column-count: 3; }
@media (max-width: 940px) { .dsa-grid { column-count: 2; } }
@media (max-width: 620px) { .dsa-grid { column-count: 1; } }

/* GeneratePress resets: the demo shell replaces GP's masthead/containers, so
   neutralize GP's default content spacing that would otherwise offset our
   full-width sections. Our own sections carry their exact max-width/padding. */
#dsa-main { display: block; }
.dsa-root .entry-content > *:first-child { margin-top: 0; }

/* Legal pages (personvern / salgsbetingelser / cookies) — readable prose. */
.ak-legal { max-width: 820px; margin: 0 auto; padding: clamp(34px,4vw,64px) clamp(18px,4vw,40px) clamp(56px,7vw,96px); color: var(--ink); font-size: 16px; line-height: 1.8; }
.ak-legal p { margin: 0 0 1.3em; color: var(--muted); }
.ak-legal h2 { font-family: var(--head); font-weight: 400; font-size: clamp(21px,2.3vw,28px); color: var(--ink); margin: 1.7em 0 .5em; }
.ak-legal ul { color: var(--muted); margin: 0 0 1.3em; padding-left: 1.3em; line-height: 1.8; }
.ak-legal ul li { margin-bottom: .4em; }
.ak-legal a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.ak-legal strong { color: var(--ink); }

/* Footer legal links row. */
.ak-foot-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.ak-foot-legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Cart totals isolation.
   The totals table carries the same .shop_table / .shop_table_responsive
   classes as the items table, so the items-table desktop grid (td{display:flex})
   and the mobile responsive rules (td{display:flex} + td::before{data-title})
   leaked into it — doubling the "Delsum/Totalt" labels and crowding the amount
   and "(inkl. kr .. MVA)" on top of each other. Force the totals back to a plain
   two-column table at every width. Selectors carry an extra class so they beat
   the leaking `.ak-cart table.shop_table(_responsive) td` rules on specificity.
   -------------------------------------------------------------------------- */
.ak-cart .cart_totals table.shop_table { display: table !important; width: 100%; }
.ak-cart .cart_totals table.shop_table tr { display: table-row !important; }
.ak-cart .cart_totals table.shop_table th,
.ak-cart .cart_totals table.shop_table td {
  display: table-cell !important;
  padding: 12px 0 !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  vertical-align: baseline;
  text-transform: none;
}
.ak-cart .cart_totals table.shop_table tr:first-child th,
.ak-cart .cart_totals table.shop_table tr:first-child td { border-top: none !important; }
.ak-cart .cart_totals table.shop_table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.ak-cart .cart_totals table.shop_table td { text-align: right; font-family: var(--head); color: var(--ink); }
.ak-cart .cart_totals table.shop_table td::before { content: none !important; }
.ak-cart .cart_totals .order-total th,
.ak-cart .cart_totals .order-total td { font-size: 17px; }
.ak-cart .cart_totals .includes_tax { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 4px; }