/*
Theme Name: hakolawood child
Theme URI: https://hakolawood.example
Author: hakolawood
Description: Child theme of Kadence for the hakolawood webshop. Nordic-minimal: white-dominant, single coral accent, Inter, hairline borders. Holds the brand tokens and any custom CSS; design settings live in the Customizer.
Version: 1.7.18
Template: kadence
Text Domain: hakolawood-child
*/

/* ===== Brand tokens — from the hakolawood design brief (additive; safe alongside Customizer settings) ===== */
:root {
  --color-coral:        #D85959;
  --color-coral-deep:   #C0463F;
  --color-coral-tint:   #F3E5E1;
  --color-ink:          #1C1B1A;
  --color-charcoal:     #4A4744;
  --color-warm-grey:    #8A847E;
  --color-line:         #E4DFD9;
  --color-linen:        #ECE5DA;
  --color-paper:        #FAF7F3;
  --color-white:        #FFFFFF;
  --color-success:      #5B8C6E;
  --color-error:        #B23A35;
  --color-warning:      #C99A3C;
  --color-info:         #4A7A96;

  --radius-xs:   2px;   /* small chips, status tags */
  --radius-sm:   4px;   /* buttons, inputs, selects, category pills */
  --radius-md:   5px;   /* cards, form/product panels */
  --radius-lg:   8px;   /* feature / large cards */
  --radius-pill: 6px;   /* badges, sale flash, count bubbles — soft rounded rects */
  --border-hairline: 0.5px solid var(--color-line);

  --section-y: 120px;   /* design system: sections breathe at 120px vertical padding */

  --hw-font: 'Manrope', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===== Manrope — self-hosted variable UI typeface (OFL, from Google Fonts) ===== */
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Montserrat 300 — self-hosted (OFL); used only for the lowercase
   wordmark. Was loaded from Google Fonts; self-hosted to drop the external
   request + the GDPR IP leak to Google. ===== */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Apply Manrope to UI / body / headings / form controls / buttons (incl. WooCommerce).
   The logo + footer wordmarks and the Kadence site-title stay on Montserrat via their own
   rules / Customizer, so they are intentionally not targeted here. */
body,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.button, .wp-block-button__link, .kb-button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button,
.wc-block-components-button {
  font-family: var(--hw-font);
}

/* ===== Corner-radius scale mapped onto Kadence + WooCommerce surfaces =====
   buttons / inputs / selects → sm (4px) */
input, select, textarea,
.button, .wp-block-button__link, .kb-button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button,
.wc-block-components-button, .wc-block-components-text-input input {
  border-radius: var(--radius-sm);
}
/* cards / panels → md (5px) */
.woocommerce ul.products li.product, .wc-block-grid__product,
.wp-block-woocommerce-product-template li.product, .kt-blocks-info-box-link-wrap {
  border-radius: var(--radius-md);
}
/* sale flash / badges / count bubbles → pill (6px, soft rect — not a full circle) */
.woocommerce span.onsale, .wc-block-components-product-sale-badge {
  border-radius: var(--radius-pill);
}

/* ===== Brand type scale (Inter) — from the brand sheet.
   Display 46 / Light 300 · Heading 32 / 400 · Title 22 / Medium 500 · Body 16 / 400 · Caption 13 / 400.
   Targets default-styled content (legal pages, 404, search). The home page, header and footer set
   their own sizes on their own classes; inline block sizes always win, so this only fills in
   content that has no explicit size. ===== */
.entry-content.single-content { font-size: 16px; line-height: 1.7; }
.entry-content.single-content h1 { font-size: 46px; font-weight: 300; line-height: 1.15; }
.entry-content.single-content h2 { font-size: 32px; font-weight: 400; line-height: 1.2; }
.entry-content.single-content h3 { font-size: 22px; font-weight: 500; line-height: 1.3; }
.entry-content.single-content h4 { font-size: 16px; font-weight: 500; }
.entry-content.single-content p,
.entry-content.single-content li { font-size: 16px; }
.entry-content.single-content figcaption,
.entry-content.single-content small { font-size: 13px; }

/* ===== Legal pages (terms, privacy, refund, legal notice — EN + FI) =====
   Narrower reading width (1290 is too wide for body text), smaller headings,
   and extra top spacing. Targeted via the .hw-legal body class added in
   functions.php by slug, so it applies to every legal page in both languages. */
.hw-legal .content-container.site-container { max-width: 820px; }
.hw-legal .entry-content.single-content { margin-top: 44px; margin-bottom: 44px; }
.hw-legal .entry-content.single-content h1 { font-size: 32px; }
.hw-legal .entry-content.single-content h2 { font-size: 24px; }
.hw-legal .entry-content a[href^="#"] { text-decoration: none; }
.hw-legal .entry-content a[href^="#"]:hover { text-decoration: none; color: var(--color-coral-deep); }
/* Legal-page tables — brand sheet: hairline Line borders, Paper header, ink text, no bold. */
.hw-legal .wp-block-table table { width: 100%; border-collapse: collapse; }
.hw-legal .wp-block-table th,
.hw-legal .wp-block-table td { border: 1px solid var(--color-line); padding: 10px 12px; text-align: left; vertical-align: top; font-size: 16px; }
.hw-legal .wp-block-table th { background: var(--color-paper); color: var(--color-ink); font-weight: 500; }

/* ===== WooCommerce store pages — section breathing room below the sticky header =====
   Shop, Cart, Checkout and My account render flush under the custom sticky header.
   The design system says content sections breathe at 120px vertical padding (--section-y),
   so give the WooCommerce content area that top/bottom rhythm. Scoped to body.woocommerce-page
   (present on the shop archive, cart, checkout and account), so legal pages (.hw-legal sets its
   own 44px) and ordinary pages are unaffected. */
body.woocommerce-page .content-area {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* ===== Empty cart — swap WooCommerce's default "sad face" icon for our cart icon =====
   The empty WooCommerce Cart block draws a frowning-face icon above "Your cart is
   currently empty!" via a CSS mask on the heading's ::before. Override the mask with
   the same line cart icon used in the header (Lucide-style shopping-cart). Colour is
   inherited (currentColor / background-color), so it stays on-brand automatically. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjgiIGN5PSIyMSIgcj0iMSIvPjxjaXJjbGUgY3g9IjE5IiBjeT0iMjEiIHI9IjEiLz48cGF0aCBkPSJNMi4wNSAyLjA1aDJsMi42NiAxMi40MmEyIDIgMCAwIDAgMiAxLjU4aDkuNzhhMiAyIDAgMCAwIDEuOTUtMS41N2wxLjY1LTcuNDNINS4xMiIvPjwvc3ZnPg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjgiIGN5PSIyMSIgcj0iMSIvPjxjaXJjbGUgY3g9IjE5IiBjeT0iMjEiIHI9IjEiLz48cGF0aCBkPSJNMi4wNSAyLjA1aDJsMi42NiAxMi40MmEyIDIgMCAwIDAgMiAxLjU4aDkuNzhhMiAyIDAgMCAwIDEuOTUtMS41N2wxLjY1LTcuNDNINS4xMiIvPjwvc3ZnPg==);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* WooCommerce sizes this icon in em (5em), so it scales off the big heading and
     turns enormous. Pin it to a fixed, icon-appropriate size instead. */
  width: 80px;
  height: 80px;
  margin: 0 auto 28px;
}

/* ===== WooCommerce cart — mobile layout (<=600px) =====
   On a phone the empty cart drifted off-centre with the heading clipping: the
   default "New in store" product grid (4 columns) and the alignwide cart block
   force the content column wider than the viewport, so centred content centres
   in that overflow. Cap everything to the screen width, make product grids 2-up,
   shrink the empty-cart icon, and ease the section padding (120px is a lot on mobile). */
@media (max-width: 600px) {
  body.woocommerce-page .content-area { padding-top: 72px; padding-bottom: 72px; }
  body.woocommerce-page .content-area :where(.alignwide, .alignfull, .wp-block-woocommerce-cart, .wc-block-grid, .wc-block-grid__products) { max-width: 100%; }
  .wc-block-cart__empty-cart__title { font-size: 24px; line-height: 1.25; }
  .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { width: 56px; height: 56px; margin-bottom: 20px; }
  /* product grids 2-up on mobile (covers both CSS-grid and flex layouts) */
  .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
  .wc-block-grid__product { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ===== My Account — hide the gravatar, promote the customer name to a heading =====
   Kadence shows a gravatar + display name above the account menu. Hide the avatar
   image (keep the name). Kadence already indents the avatar container by
   calc(1em + 4px), which matches the menu links exactly
   (link = margin-left:-1px + border-left:5px + padding-left:1em = 1em + 4px), so
   leave the container alone — the only issue was .kadence-customer-name's
   padding-left:50px (room for the now-hidden avatar). Zero just that so the name
   lines up with the menu text (not the indicator line). Then style it as a brand
   Title (22 / Medium 500 / ink). Body-qualified to outrank Kadence's 4-class rule. */
.kadence-account-avatar .kadence-customer-image { display: none; }
body.woocommerce-account .account-navigation-wrap .kadence-account-avatar .kadence-customer-name {
  padding-left: 0;
  font-size: 22px;          /* design system: Title */
  font-weight: 500;         /* Medium — brand max weight, no bold */
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0 0 12px;
}

/* WooCommerce empty-state notices: BOTH WooCommerce core and Kadence float the
   action button right — Kadence's `.woocommerce .woocommerce-info .button{float:right}`
   has the same 3-class specificity as ours and loads later, so it wins a plain tie.
   `!important` on float + margin is therefore required to drop the button onto its
   own line, left-aligned (e.g. "Browse products" on an empty Orders list). */
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-error .button {
  float: none !important;
  clear: both;
  display: block;
  width: fit-content;
  margin: 14px 0 0 !important;
}

/* ===== Custom CSS (add overrides below) ===== */

/* Paytrail block-checkout payment box: show the payment-method logo strip in
   place of the description text. WooCommerce blocks render the gateway
   description as plain text (no HTML), so we keep a short accessible label as
   the description, hide it, and paint the wide SVG (≈3.7:1) as a background
   that scales to the box width — never overflowing on mobile or desktop. */
.paytrail-static-container .paytrail-description{
  display:block; width:100%; max-width:340px;
  aspect-ratio:1485.46 / 400;
  background:url(/wp-content/themes/hakolawood-child/assets/img/payment-logos.svg) left center / contain no-repeat;
  color:transparent; font-size:0; line-height:0; margin:6px 0 2px;
}
/* ~15% larger on desktop (mobile stays box-width limited) */
@media (min-width:768px){
  .paytrail-static-container .paytrail-description{ max-width:391px; }
}

/* ===== Cart & Checkout — lift text to the design body size (16px) =====
   The WooCommerce Cart & Checkout blocks size almost all of their text off the
   "small" font preset, which Kadence sets to 14px — a size that isn't in our
   type scale (body 16 · sm 15 · caption 13). Redefine the small preset to 16px
   within the two block wrappers only, so the whole cart/checkout flow reads at
   body size. Scoped to .wc-block-cart/.wc-block-checkout — nothing else on the
   site is affected. */
.wp-block-woocommerce-cart, .wc-block-cart,
.wp-block-woocommerce-checkout, .wc-block-checkout {
  --wp--preset--font-size--small: 16px;
}

/* Order summary de-duplicates the line price: WooCommerce prints the per-unit
   price under the item name AND the line total on the right — identical at
   qty 1, so it reads as a duplicate. Hide the per-unit line; the correct line
   total stays on the right at any quantity (safe for standard products too). */
.wc-block-components-order-summary-item__individual-prices { display: none; }

/* Order summary: the right-aligned amounts sat tight against the box's right
   edge. WooCommerce insets the line items (.order-summary) and the totals rows
   (.totals-item) each by 16px from separate containers — bump BOTH to the same
   value so they line up AND clear the border comfortably. (Padding only one
   would misalign the item price from the subtotal/total.) */
.wc-block-checkout .wc-block-components-order-summary,
.wc-block-checkout .wc-block-components-totals-item { padding-right: 24px; }

/* Per-line "quantity × price" row added by assets/js/checkout-summary.js.
   Quantity indented to sit under the product properties; price right-aligned
   with the Subtotal/Total (the order-summary's own 24px right inset). */
.hw-line-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0 4px 72px; font-size:14px;
}
.hw-line-total .hw-line-qty{ color:#8A847E; }
.hw-line-total .hw-line-price{ font-weight:500; color:#1C1B1A; }