/*
Theme Name: Olgas Hus
Theme URI: https://olgashus.se
Author: Dash
Author URI: https://dash.se
Description: Ett stillsamt, redaktionellt WooCommerce-tema för butiken Olgas Hus – kläder och inredning i mjuka, neutrala toner. Byggt från Olgas Hus-designen med komplett butiksflöde: startsida, produktlistor, produktsida, varukorg med mini-cart-drawer, kassa, tack-sida, mitt konto, om oss och kontakt. Levereras med en inbyggd demo-importör (11 testprodukter, kategorier, sidor och menyer).
Version: 1.2.4
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: olgas-hus
Tags: e-commerce, woocommerce, custom-colors, custom-menu, featured-images, translation-ready, sticky-post
WC requires at least: 6.0
WC tested up to: 9.4
*/

/* ==========================================================================
   Olgas Hus – Design tokens
   ========================================================================== */
:root {
  --oh-bg:        #FAF8F5;
  --oh-ink:       #221F1C;
  --oh-accent:    #8A6F5C;
  --oh-muted:     #6E655C;
  --oh-muted-2:   #9C9086;
  --oh-body:      #4B443D;
  --oh-body-2:    #5A5249;
  --oh-panel:     #EFEAE3;
  --oh-panel-2:   #EAE4DC;
  --oh-panel-3:   #E4DDD4;
  --oh-line:      #E8E2DA;
  --oh-line-2:    #DDD4C9;
  --oh-line-3:    #D2C9BE;
  --oh-line-4:    #C9BFB4;
  --oh-line-5:    #E0D8CE;
  --oh-on-dark:   #F4EFE9;

  --oh-maxw:      1440px;
  --oh-gutter:    clamp(20px, 4vw, 40px);
  --oh-header-h:  78px;

  --oh-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --oh-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body.olgas-hus {
  margin: 0;
  background: var(--oh-bg);
  color: var(--oh-ink);
  font-family: var(--oh-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.olgas-hus a { color: var(--oh-ink); text-decoration: none; transition: color .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease; }
.olgas-hus a:hover { color: var(--oh-accent); }

.olgas-hus img { max-width: 100%; height: auto; display: block; }

.olgas-hus h1, .olgas-hus h2, .olgas-hus h3, .olgas-hus h4 {
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}

.olgas-hus p { margin: 0 0 1em; }

.olgas-hus input, .olgas-hus button, .olgas-hus select, .olgas-hus textarea { font-family: var(--oh-sans); }

.oh-container { max-width: var(--oh-maxw); margin: 0 auto; padding-left: var(--oh-gutter); padding-right: var(--oh-gutter); }
.oh-narrow  { max-width: 760px;  margin: 0 auto; padding-left: var(--oh-gutter); padding-right: var(--oh-gutter); }
.oh-mid     { max-width: 1100px; margin: 0 auto; padding-left: var(--oh-gutter); padding-right: var(--oh-gutter); }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--oh-ink); color: #fff; padding: 12px 20px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* Utility text styles from the design */
.oh-eyebrow { font-family: var(--oh-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oh-accent); margin: 0 0 18px; }
.oh-tag     { font-family: var(--oh-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.oh-label   { font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.oh-btn,
.olgas-hus .button,
.olgas-hus button.button,
.olgas-hus a.button,
.woocommerce .olgas-hus a.button,
.olgas-hus input[type="submit"] {
  display: inline-block;
  background: var(--oh-ink);
  color: var(--oh-bg);
  border: none;
  border-radius: 0;
  padding: 16px 40px;
  font-family: var(--oh-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background .18s ease, color .18s ease;
}
.oh-btn:hover,
.olgas-hus .button:hover,
.olgas-hus button.button:hover,
.olgas-hus a.button:hover,
.olgas-hus input[type="submit"]:hover { background: var(--oh-accent); color: var(--oh-bg); }

/* Beat WooCommerce's coloured .button.alt / add-to-cart (purple) with the ink button. */
.olgas-hus .button.alt,
.olgas-hus button.button.alt,
.olgas-hus a.button.alt,
.olgas-hus .single_add_to_cart_button,
.olgas-hus #place_order,
.olgas-hus .checkout-button,
.olgas-hus .wc-block-components-button {
  background: var(--oh-ink) !important;
  color: var(--oh-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.olgas-hus .button.alt:hover,
.olgas-hus button.button.alt:hover,
.olgas-hus a.button.alt:hover,
.olgas-hus .single_add_to_cart_button:hover,
.olgas-hus #place_order:hover,
.olgas-hus .checkout-button:hover { background: var(--oh-accent) !important; color: var(--oh-bg) !important; }

.oh-btn--ghost {
  background: transparent;
  color: var(--oh-ink);
  border: 1px solid var(--oh-ink);
}
.oh-btn--ghost:hover { background: var(--oh-ink); color: var(--oh-bg); }

.oh-link-underline {
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  border-bottom: 1px solid var(--oh-line-4); padding-bottom: 4px; white-space: nowrap;
}

/* Form fields */
.olgas-hus input[type="text"],
.olgas-hus input[type="email"],
.olgas-hus input[type="tel"],
.olgas-hus input[type="password"],
.olgas-hus input[type="search"],
.olgas-hus input[type="number"],
.olgas-hus textarea,
.olgas-hus select,
.olgas-hus .oh-field {
  border: 1px solid var(--oh-line-2);
  background: transparent;
  padding: 15px 16px;
  font-size: 17px;
  color: var(--oh-ink);
  border-radius: 0;
  outline: none;
  width: 100%;
  transition: border-color .18s ease;
}
.olgas-hus input:focus, .olgas-hus textarea:focus, .olgas-hus select:focus { border-color: var(--oh-accent); }
.olgas-hus ::placeholder { color: var(--oh-muted-2); opacity: 1; }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.oh-announce {
  background: var(--oh-ink);
  color: var(--oh-on-dark);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 20px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.oh-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--oh-line);
}
.oh-header__inner {
  max-width: var(--oh-maxw); margin: 0 auto;
  padding: 14px var(--oh-gutter);
  min-height: var(--oh-header-h);
  /* 3-column grid keeps the brand/logo perfectly centred regardless of the
     left/right column widths. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px;
}
.oh-header__nav {
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  gap: clamp(12px, 2.2vw, 26px);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: clamp(0.04em, 0.6vw, 0.12em);
  text-transform: uppercase; white-space: nowrap;
  list-style: none; margin: 0; padding: 0;
}
.oh-header__nav a { color: var(--oh-ink); }
.oh-header__nav .current-menu-item > a,
.oh-header__nav .current_page_item > a { color: var(--oh-accent); }
.oh-header__brand {
  justify-self: center; text-align: center;
  font-size: clamp(21px, 2.4vw, 26px);
  letter-spacing: 0.34em; white-space: nowrap; padding-left: 0.34em;
  color: var(--oh-ink);
}
.oh-header__brand--logo { letter-spacing: 0; padding-left: 0; line-height: 0; }
.olgas-hus .oh-header__logo { height: clamp(21px, 2.1vw, 27px); width: auto; max-width: 260px; display: block; }
.olgas-hus .oh-footer__logo { height: 26px; width: auto; max-width: 220px; display: block; }
.oh-header__actions {
  display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
  gap: clamp(12px, 2.2vw, 26px);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: clamp(0.04em, 0.6vw, 0.12em);
  text-transform: uppercase; white-space: nowrap;
  list-style: none; margin: 0; padding: 0;
}
.oh-header__actions a { color: var(--oh-ink); }
.oh-actions-menu { display: contents; list-style: none; margin: 0; padding: 0; }
.oh-actions-menu li { display: contents; }
.oh-cart-link .oh-cart-count::before { content: "("; }
.oh-cart-link .oh-cart-count::after { content: ")"; }

.oh-burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oh-ink); }

/* ==========================================================================
   Mini-cart drawer
   ========================================================================== */
.oh-drawer-overlay {
  position: fixed; inset: 0; z-index: 40; display: none;
}
.oh-drawer-overlay.is-open { display: flex; justify-content: flex-end; }
.oh-drawer-overlay__bg { position: absolute; inset: 0; background: rgba(24, 20, 17, 0.35); }
@keyframes ohSlideIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.oh-drawer {
  position: relative; width: min(420px, 100%); height: 100%;
  background: var(--oh-bg); display: flex; flex-direction: column;
  animation: ohSlideIn 220ms ease-out;
}
.oh-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 28px; border-bottom: 1px solid var(--oh-line);
}
.oh-drawer__head p { margin: 0; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; }
.oh-drawer__close { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oh-muted); background: none; border: none; cursor: pointer; }
.oh-drawer__body { flex: 1; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.oh-drawer__empty { margin: 0; font-size: 17px; color: var(--oh-muted); line-height: 1.7; }
.oh-drawer__foot { border-top: 1px solid var(--oh-line); padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.oh-drawer__total { display: flex; justify-content: space-between; font-size: 17px; }
.oh-drawer__note { margin: 0; font-size: 15px; color: #8A8077; }

.oh-mini-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: start; }
.oh-mini-line__img { aspect-ratio: 3/4; background-color: var(--oh-panel-2); background-size: cover; background-position: center; }
.oh-mini-line__name { margin: 0 0 4px; font-size: 17px; }
.oh-mini-line__price { margin: 0 0 10px; font-size: 16px; color: var(--oh-muted); }
.oh-mini-line__remove { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oh-muted-2); }
/* Neutralise WooCommerce's big red round `a.remove` inside the drawer. */
.olgas-hus .oh-drawer a.remove,
.olgas-hus .oh-mini-line__remove.remove {
  display: inline !important; width: auto !important; height: auto !important;
  font-size: 13px !important; line-height: 1 !important; text-align: right !important;
  color: var(--oh-muted-2) !important; background: none !important; border-radius: 0 !important;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.olgas-hus .oh-drawer a.remove:hover,
.olgas-hus .oh-mini-line__remove.remove:hover { color: var(--oh-accent) !important; background: none !important; }
/* Drawer buttons: keep the ink button's cream text visible. */
.olgas-hus .oh-drawer .oh-btn { color: var(--oh-bg) !important; background: var(--oh-ink) !important; }
.olgas-hus .oh-drawer .oh-btn:hover { background: var(--oh-accent) !important; }

/* qty stepper */
.oh-qty { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--oh-line-2); width: fit-content; height: 46px; padding: 0 14px; background: transparent; }
.olgas-hus .oh-qty button, .olgas-hus .oh-qty .oh-step { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--oh-muted); line-height: 1; padding: 0; width: 16px; text-align: center; }
.olgas-hus .oh-qty__val { width: 26px; min-width: 26px; border: none !important; background: transparent !important; text-align: center; font-size: 15px; color: var(--oh-ink); padding: 0 !important; height: auto; -moz-appearance: textfield; }
.olgas-hus .oh-qty__val::-webkit-outer-spin-button, .olgas-hus .oh-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   Home – Hero
   ========================================================================== */
.oh-hero { position: relative; height: 82vh; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden; }
/* Focus the crop lower so the garments fill the frame (not the wall above). */
.oh-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 75%; z-index: 0; }
/* Gradients MUST sit above the image but below the text (explicit z-index –
   otherwise ::before paints under the image and ::after paints over the text). */
.oh-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20,17,14,0.70), rgba(20,17,14,0.34) 48%, rgba(20,17,14,0.08)); }
.oh-hero::after  { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(20,17,14,0.62), rgba(20,17,14,0.12) 45%, rgba(20,17,14,0) 66%); }
.oh-hero__inner { position: relative; z-index: 2; padding: 0 clamp(20px,5vw,64px) clamp(44px,7vw,72px); max-width: 640px; }
.oh-hero__eyebrow { margin: 0 0 18px; font-family: var(--oh-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #F2EBE3; text-shadow: 0 1px 14px rgba(20,17,14,0.4); }
.oh-hero__title { margin: 0 0 26px; font-size: clamp(40px,7vw,66px); line-height: 1.04; font-weight: 300; letter-spacing: -0.01em; color: var(--oh-bg); text-wrap: pretty; text-shadow: 0 2px 22px rgba(20,17,14,0.45); }
.oh-hero__cta { display: inline-block; background: var(--oh-bg); color: var(--oh-ink); padding: 16px 40px; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
.oh-hero__cta:hover { background: var(--oh-accent); color: var(--oh-bg); }

/* Section rhythm */
.oh-section { max-width: var(--oh-maxw); margin: 0 auto; padding: clamp(64px,9vw,112px) var(--oh-gutter) 0; }
.oh-section--first { padding-top: clamp(56px,8vw,96px); }
.oh-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.oh-section__title { margin: 0; font-size: clamp(28px,3.4vw,34px); font-weight: 300; letter-spacing: 0.02em; }

/* Category tiles */
.oh-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.oh-cat { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--oh-panel-3); }
.oh-cat img { width: 100%; height: 100%; object-fit: cover; }
.oh-cat:hover img { opacity: 0.92; }
.oh-cat__label { position: absolute; left: 32px; bottom: 32px; background: var(--oh-bg); padding: 14px 30px; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oh-ink); }

/* Product grid */
.oh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }

.oh-card { display: block; }
.oh-card__media { position: relative; aspect-ratio: 3/4; margin-bottom: 16px; overflow: hidden; background: var(--oh-panel-2); }
.oh-card__media img { width: 100%; height: 100%; object-fit: cover; }
.oh-card:hover .oh-card__media img { opacity: 0.9; }
.oh-card__badge { position: absolute; top: 14px; left: 14px; background: var(--oh-bg); padding: 6px 12px; font-family: var(--oh-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oh-ink); }
.oh-card__name { margin: 0 0 6px; font-size: 17px; color: var(--oh-ink); font-weight: 400; }
.oh-card__price { margin: 0; font-size: 16px; color: var(--oh-muted); }
.oh-card__price del { color: var(--oh-muted-2); margin-right: 8px; }
.oh-card__price ins { text-decoration: none; }

/* About block */
.oh-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px,5vw,64px); align-items: center; }
.oh-about__img { aspect-ratio: 5/4; background: var(--oh-panel-3); overflow: hidden; }
.oh-about__img img { width: 100%; height: 100%; object-fit: cover; }
.oh-about__body { max-width: 440px; }
.oh-about__body h2 { margin: 0 0 22px; font-size: clamp(30px,4vw,40px); line-height: 1.15; font-weight: 300; }
.oh-about__body p { margin: 0 0 30px; font-size: 18px; line-height: 1.75; color: var(--oh-body); text-wrap: pretty; }

/* Instagram grid */
.oh-insta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.oh-insta a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--oh-panel-2); }
.oh-insta img { width: 100%; height: 100%; object-fit: cover; }
.oh-insta a:hover img { opacity: 0.9; }

/* Newsletter */
.oh-newsletter { margin-top: clamp(64px,9vw,112px); background: var(--oh-panel); padding: clamp(56px,8vw,88px) var(--oh-gutter); }
.oh-newsletter__inner { max-width: 520px; margin: 0 auto; text-align: center; }
.oh-newsletter h2 { margin: 0 0 14px; font-size: clamp(28px,3.4vw,32px); font-weight: 300; }
.oh-newsletter p { margin: 0 0 32px; font-size: 17px; line-height: 1.7; color: var(--oh-body-2); }
.oh-newsletter__form { display: flex; flex-wrap: wrap; gap: 12px; }
.oh-newsletter__form input { flex: 1 1 220px; }
.oh-newsletter__form button { flex: 1 1 160px; padding: 15px 30px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.oh-footer { border-top: 1px solid var(--oh-line); margin-top: 0; }
.oh-footer__cols {
  max-width: var(--oh-maxw); margin: 0 auto;
  padding: clamp(48px,7vw,72px) var(--oh-gutter) 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px 48px;
}
.oh-footer__brand p:first-child { margin: 0 0 16px; font-size: 20px; letter-spacing: 0.3em; }
.oh-footer__brand p:last-child { margin: 0; font-size: 16px; line-height: 1.8; color: var(--oh-muted); }
.oh-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: var(--oh-muted); }
.oh-footer__col .oh-footer__heading { margin: 0 0 4px; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oh-ink); }
.oh-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.oh-footer__col a { color: var(--oh-muted); }
.oh-footer__col a:hover { color: var(--oh-accent); }
.oh-footer__bar {
  max-width: var(--oh-maxw); margin: 0 auto;
  padding: 0 var(--oh-gutter) 40px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  font-size: 14px; color: var(--oh-muted-2); letter-spacing: 0.06em; white-space: nowrap;
}

/* ==========================================================================
   Generic page / breadcrumb
   ========================================================================== */
.oh-breadcrumb { margin: 0 0 20px; font-family: var(--oh-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oh-muted-2); }
.oh-breadcrumb a { color: var(--oh-muted-2); }
.oh-breadcrumb a:hover { color: var(--oh-accent); }

.oh-page { padding-top: clamp(40px,6vw,72px); padding-bottom: clamp(64px,9vw,112px); }
.oh-page__title { margin: 0 0 36px; font-size: clamp(32px,4.6vw,46px); font-weight: 300; }
.oh-page__content { font-size: 18px; line-height: 1.8; color: var(--oh-body); }
.oh-page__content h2 { font-size: clamp(26px,3vw,30px); margin: 1.6em 0 0.6em; color: var(--oh-ink); }
.oh-page__content h3 { font-size: 21px; font-weight: 400; margin: 1.4em 0 0.4em; color: var(--oh-ink); }
.oh-page__content a { border-bottom: 1px solid var(--oh-line-4); }

/* Page hero (Om oss) */
.oh-pagehero { position: relative; height: 46vh; min-height: 320px; display: flex; align-items: flex-end; overflow: hidden; }
.oh-pagehero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oh-pagehero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,17,14,0.55), rgba(20,17,14,0.05)); }
.oh-pagehero h1 { position: relative; margin: 0; padding: 0 clamp(20px,5vw,64px) clamp(36px,5vw,56px); font-size: clamp(34px,5vw,50px); font-weight: 300; color: var(--oh-bg); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .oh-header__inner { display: flex; flex-wrap: nowrap; justify-content: space-between; }
  .oh-header__nav { display: none; }
  .oh-burger { display: inline-block; }
  .oh-header__brand { justify-self: auto; flex: 1 1 auto; text-align: center; }
  .oh-header__actions { flex: 0 0 auto; }
  .oh-mobile-nav { display: none; }
  .oh-mobile-nav.is-open { display: block; border-top: 1px solid var(--oh-line); }
  .oh-mobile-nav ul { list-style: none; margin: 0; padding: 12px var(--oh-gutter) 20px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
}
@media (min-width: 861px) {
  .oh-mobile-nav { display: none !important; }
}

/* ==========================================================================
   WooCommerce – shared
   ========================================================================== */
.oh-woo { padding-top: clamp(28px, 4vw, 48px); }
.woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments {
  list-style: none; margin: 0 0 24px; padding: 16px 20px;
  background: var(--oh-panel); border-left: 2px solid var(--oh-accent);
  font-size: 16px; color: var(--oh-ink);
}
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { float: right; padding: 8px 18px; }
.woocommerce form .form-row { margin: 0 0 14px; }
.woocommerce .woocommerce-result-count, .woocommerce .price .amount { color: inherit; }
mark { background: transparent; color: var(--oh-accent); font-weight: 400; }

/* Product list (archive) */
.oh-list__title { margin: 0 0 10px; font-size: clamp(34px, 5vw, 48px); font-weight: 300; }
.oh-list__count { margin: 0 0 28px; font-size: 17px; color: var(--oh-muted); }
.oh-woo-toolbar { display: flex; justify-content: flex-end; margin-bottom: 28px; }
.oh-woo-toolbar .woocommerce-ordering select,
.oh-woo-toolbar select.orderby { border: 1px solid var(--oh-line-2); background: transparent; padding: 10px 14px; font-size: 15px; letter-spacing: 0.06em; }
.oh-grid--list { margin-bottom: 48px; }
.woocommerce-pagination ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 24px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: inline-block; padding: 10px 15px; border: 1px solid var(--oh-line-2); font-size: 16px; }
.woocommerce-pagination .current { background: var(--oh-ink); color: var(--oh-bg); border-color: var(--oh-ink); }

/* ==========================================================================
   WooCommerce – single product (matches "isProduct")
   ========================================================================== */
.single-product .oh-woo, .single-product #oh-main { padding-top: clamp(28px, 4vw, 48px); }
/* Mobile: everything stacks. */
.single-product div.product { display: block; }
.single-product div.product .oh-gallery { margin: 0 0 32px; }
.single-product div.product .summary { margin: 0; }
/* Desktop: two equal columns (gallery | summary), related full-width below. */
@media (min-width: 860px) {
  .single-product div.product {
    display: grid;
    /* minmax(0,…) stops the gallery image from blowing its track out past its
       share; the summary track is a touch wider for a roomier text column. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    column-gap: clamp(28px, 5vw, 64px);
    row-gap: clamp(48px, 7vw, 80px);
    align-items: start;
  }
  .single-product div.product > .oh-gallery { grid-column: 1; margin: 0; }
  /* Summary fills its half-column (wider metadata), sticky within the product row.
     width:100% overrides WooCommerce core's `.summary { width:48% }`. */
  .single-product div.product > .summary { grid-column: 2; position: sticky; top: 110px; max-width: none; width: 100% !important; float: none !important; }
}
.single-product div.product > .oh-gallery { width: 100% !important; float: none !important; }

/* Static stacked gallery (matches the design: big 4:5 image + two 1:1 thumbs). */
.oh-gallery { display: grid; gap: 16px; }
.oh-gallery__main { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--oh-panel-2); }
.oh-gallery__zoom { display: block; width: 100%; height: 100%; }
.oh-gallery__zoomicon { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--oh-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--oh-ink); }
.oh-gallery__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oh-gallery__thumb { aspect-ratio: 1; overflow: hidden; background: var(--oh-panel-3); }
/* Higher specificity than `.olgas-hus img { height:auto }` so images fill the box. */
.olgas-hus .oh-gallery__main .oh-gallery__img,
.olgas-hus .oh-gallery__thumb .oh-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-product .product_title { margin: 0 0 12px; font-size: clamp(30px, 4vw, 42px); font-weight: 300; line-height: 1.15; }
.single-product .summary .price,
.single-product .summary .price .amount,
.single-product .summary .price bdi { margin: 0 0 28px; font-size: 21px; color: var(--oh-ink) !important; font-weight: 400; }
.single-product .summary .price del { color: var(--oh-muted-2); margin-right: 8px; }
.single-product .summary .price ins { text-decoration: none; }
.single-product .woocommerce-product-details__short-description { margin: 0 0 32px; font-size: 18px; line-height: 1.75; color: var(--oh-body); }
.single-product .woocommerce-product-details__short-description p { margin: 0 0 1em; }

/* Gallery: big image + thumbnail grid */
.single-product .woocommerce-product-gallery { opacity: 1 !important; } /* don't wait on flexslider JS */
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery .flex-viewport { margin-bottom: 16px; }
.woocommerce-product-gallery__image img { width: 100%; display: block; }
.flex-control-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; margin: 0; padding: 0; }
.flex-control-thumbs li { margin: 0; }
.flex-control-thumbs img { width: 100%; cursor: pointer; opacity: 0.75; transition: opacity .18s ease; }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery__trigger { top: 14px; right: 14px; }

/* Variation pills */
.single-product .variations { border: 0; margin: 0 0 8px; width: 100%; }
.single-product .variations tr { display: block; margin-bottom: 20px; }
.single-product .variations th, .single-product .variations td { display: block; padding: 0; text-align: left; }
.single-product .variations .label label { margin: 0 0 12px; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; }
.oh-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.oh-pill {
  flex: 0 0 auto;
  border: 1px solid var(--oh-line-2); padding: 12px 22px; font-size: 14px;
  min-width: 44px; line-height: 1; text-align: center; cursor: pointer; background: transparent; color: var(--oh-ink);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.oh-pill:hover { border-color: var(--oh-accent); }
.oh-pill.is-active { background: var(--oh-ink); color: var(--oh-bg); border-color: var(--oh-ink); }
.single-product .variations select { border: 1px solid var(--oh-line-2); background: transparent; padding: 12px 16px; font-size: 16px; }
.single-product .variations_button { margin-top: 8px; }
.single-product .reset_variations { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oh-muted-2); margin-left: 4px; }
.woocommerce-variation-price { margin-bottom: 18px; font-size: 20px; }
.woocommerce-variation-availability { margin-bottom: 12px; font-size: 16px; color: var(--oh-muted); }

/* Add to cart row – qty box + button, same height, side by side. */
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; align-items: stretch; }
.single-product form.cart.variations_form { display: block; }
/* !important beats WooCommerce's variation JS which sets inline display:block. */
.single-product .woocommerce-variation-add-to-cart { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: 8px; }
.single-product form.cart .quantity.oh-qty { height: 56px; padding: 0 18px; gap: 16px; flex: 0 0 auto; }
.single-product form.cart .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 200px; height: 56px; padding: 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.single-product .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { opacity: 0.4; cursor: not-allowed; }

/* Trust lines */
.oh-trust { border-top: 1px solid var(--oh-line); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: var(--oh-muted); line-height: 1.6; }

/* Tabs + related */
.woocommerce-tabs { margin-top: clamp(48px, 7vw, 80px); grid-column: 1 / -1; }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 28px; padding: 0 0 0; margin: 0 0 28px; border-bottom: 1px solid var(--oh-line); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: 0 0 16px; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oh-muted); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--oh-ink); border-bottom-color: var(--oh-ink); }
.woocommerce-tabs .panel { font-size: 18px; line-height: 1.8; color: var(--oh-body); }
.woocommerce-tabs .panel h2 { font-size: 22px; font-weight: 400; }
/* Related is now a full-width section below div.product (moved out via hook). */
.related.products, .up-sells.products { clear: both; margin-top: clamp(48px, 7vw, 80px); }
.related.products > h2, .up-sells.products > h2 { margin: 0 0 32px; font-size: clamp(26px, 3.2vw, 32px); font-weight: 300; }
/* Force our grid over WooCommerce's default ul.products flex/li-width styling. */
.olgas-hus .related.products ul.products,
.olgas-hus .up-sells.products ul.products,
.olgas-hus ul.products.columns-4 {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .olgas-hus .related.products ul.products,
  .olgas-hus .up-sells.products ul.products,
  .olgas-hus ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
}
/* Reset WooCommerce's per-item width/float on whatever the loop item is. */
.olgas-hus .related.products ul.products > *,
.olgas-hus .up-sells.products ul.products > * { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }
/* WooCommerce adds ::before/::after clearfix on ul.products; in a grid they
   become empty grid cells that push the first card to column 2. Remove them. */
.olgas-hus ul.products::before,
.olgas-hus ul.products::after { content: none !important; display: none !important; }

/* Fallback styling if any default Woo loop <li.product> slips through */
ul.products li.product a img { margin: 0 0 16px; }
ul.products li.product .woocommerce-loop-product__title { font-size: 17px; font-weight: 400; padding: 0; margin: 0 0 6px; }
ul.products li.product .price { color: var(--oh-muted); font-size: 16px; }
ul.products li.product .button, ul.products li.product .added_to_cart { display: none; }

/* ==========================================================================
   WooCommerce – cart (matches "isCart")
   ========================================================================== */
.oh-cart { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.oh-cart__title { margin-bottom: 44px; }
.oh-cart__lines { display: flex; flex-direction: column; gap: 28px; margin: 0; }
.oh-cart-line { display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding-bottom: 28px; border-bottom: 1px solid var(--oh-line); }
.oh-cart-line__img { aspect-ratio: 3/4; background-color: var(--oh-panel-2); background-size: cover; background-position: center; display: block; }
.oh-cart-line__body { display: flex; flex-direction: column; gap: 10px; }
.oh-cart-line__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.oh-cart-line__name { margin: 0; font-size: 19px; }
.oh-cart-line__sum { margin: 0; font-size: 18px; }
.oh-cart-line__meta { margin: 0; font-size: 16px; color: var(--oh-muted); }
.oh-cart-line__controls { display: flex; align-items: center; gap: 20px; margin-top: 6px; }
.oh-cart-line__controls .oh-qty { border: 1px solid var(--oh-line-5); padding: 9px 14px; }
.oh-cart-line__controls .oh-qty__val { width: 40px; border: none; background: transparent; text-align: center; -moz-appearance: textfield; }
.oh-cart-line__controls .oh-qty__val::-webkit-outer-spin-button, .oh-cart-line__controls .oh-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oh-cart-line__remove { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oh-muted-2); }
.oh-cart__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.oh-cart__coupon { display: flex; gap: 10px; flex: 1 1 240px; }
.oh-cart__coupon input { flex: 1; }
.oh-cart__summary { background: var(--oh-panel); padding: clamp(24px, 3vw, 34px); }
.oh-summary__label { margin: 0 0 22px; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; }
.oh-cart-totals .oh-tot-row { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; padding: 8px 0; }
.oh-cart-totals .oh-tot-row--total { font-size: 19px; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--oh-line-2); }
.oh-cart-totals .oh-tot-row--coupon { color: var(--oh-accent); }
.oh-cart-totals .wc-proceed-to-checkout { margin-top: 24px; padding: 0; }
.oh-cart-totals .checkout-button { display: block; width: 100%; }
.oh-cart-empty { border: 1px solid var(--oh-line); padding: clamp(32px, 6vw, 64px); text-align: center; }
.oh-cart-empty p { margin: 0 0 26px; font-size: 18px; color: var(--oh-muted); }

/* ==========================================================================
   WooCommerce – checkout (matches "isCheckout")
   ========================================================================== */
.woocommerce-checkout .oh-woo h1, .woocommerce-checkout #oh-main > h1 { margin: 0 0 44px; font-size: clamp(34px, 5vw, 48px); font-weight: 300; }
.woocommerce-checkout form.checkout { display: block; }
@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    column-gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
  .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }
}
.woocommerce-checkout #customer_details { gap: 20px; }
.woocommerce-checkout h3, .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout #order_review_heading {
  font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; margin: 0 0 18px;
}
.woocommerce-checkout .col2-set, .woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: 100%; float: none; }
.woocommerce form .form-row label { display: block; font-size: 15px; color: var(--oh-muted); margin-bottom: 6px; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
#order_review { background: var(--oh-panel); padding: clamp(24px, 3vw, 34px); }
#order_review .shop_table { width: 100%; border-collapse: collapse; }
#order_review .shop_table th, #order_review .shop_table td { padding: 10px 0; text-align: left; font-weight: 400; font-size: 17px; border: 0; }
#order_review .shop_table td { text-align: right; }
#order_review .order-total th, #order_review .order-total td { font-size: 20px; padding-top: 18px; border-top: 1px solid var(--oh-line-2); }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; margin-top: 20px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 20px; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.woocommerce-checkout #payment ul.payment_methods li { border: 1px solid var(--oh-line-2); padding: 17px 20px; font-size: 17px; }
.woocommerce-checkout #payment div.payment_box { background: transparent; margin: 12px 0 0; padding: 0; font-size: 16px; color: var(--oh-muted); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 0; margin-top: 12px; }
.woocommerce-checkout #place_order { width: 100%; padding: 18px; }
/* Checkout polish – calmer defaults closer to the design mockup. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info { background: var(--oh-panel); border-left: 2px solid var(--oh-accent); padding: 14px 18px; font-size: 14px; }
.woocommerce form .form-row label .required, .woocommerce form .form-row .required { color: var(--oh-muted-2); text-decoration: none; border: 0; }
.woocommerce-checkout #order_review_heading { margin-top: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table { font-size: 16px; margin-bottom: 20px; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 400; margin: 0; display: inline; }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { margin-right: 10px; }
.woocommerce-checkout #payment .wc_payment_method > label { display: flex; align-items: center; }
.woocommerce-checkout form.checkout .col2-set { display: flex; flex-direction: column; gap: 20px; }

/* ==========================================================================
   WooCommerce – thank you (matches "isThanks")
   ========================================================================== */
.oh-thanks { max-width: 760px; margin: 0 auto; text-align: center; }
.oh-thanks__title { margin: 0 0 20px; font-size: clamp(34px, 5vw, 48px); font-weight: 300; line-height: 1.15; }
.oh-thanks__lead { margin: 0 0 40px; font-size: 18px; line-height: 1.75; color: var(--oh-body); }
.oh-thanks .woocommerce-order-overview, .oh-thanks .woocommerce-table { text-align: left; }
.oh-thanks .woocommerce-order-details, .oh-thanks .woocommerce-customer-details { margin-top: 40px; text-align: left; }
.oh-thanks table.shop_table { width: 100%; border-collapse: collapse; margin-top: 16px; border: 1px solid var(--oh-line); }
.oh-thanks table.shop_table th, .oh-thanks table.shop_table td { padding: 14px 18px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--oh-line); }
.oh-thanks .woocommerce-order-overview { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; border: 1px solid var(--oh-line); margin: 0 0 8px; }
.oh-thanks .woocommerce-order-overview li { font-size: 16px; color: var(--oh-muted); border: 0; }
.oh-thanks .woocommerce-order-overview li strong { display: block; color: var(--oh-ink); font-weight: 400; margin-top: 4px; }
.oh-thanks__actions { margin-top: 40px; }

/* ==========================================================================
   WooCommerce – my account (matches "isKonto")
   ========================================================================== */
.woocommerce-account .oh-woo h1, .woocommerce-account #oh-main > h1 { margin: 0 0 44px; font-size: clamp(34px, 5vw, 48px); font-weight: 300; }
.woocommerce-account .woocommerce { display: block; }
.woocommerce-account:not(.logged-in) .u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 5vw, 56px); align-items: start; }
.woocommerce-account .col-1, .woocommerce-account .col-2 { width: 100%; float: none; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { border: 1px solid var(--oh-line); padding: clamp(24px, 3vw, 34px); }
.woocommerce-account h2 { font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; margin: 0 0 22px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 8px 20px; border-bottom: 1px solid var(--oh-line); padding-bottom: 20px; }
.woocommerce-account .woocommerce-MyAccount-navigation a { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oh-muted); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--oh-ink); }
.woocommerce-account .woocommerce-MyAccount-content { font-size: 18px; line-height: 1.7; color: var(--oh-body); }
.woocommerce-account table.shop_table, .woocommerce-account table.account-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { padding: 16px 12px; text-align: left; border-bottom: 1px solid var(--oh-line); font-weight: 400; font-size: 17px; }
.woocommerce-account .woocommerce-Button, .woocommerce-account .button { margin-top: 8px; }

/* Forms inside account/checkout */
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #b3564b; }
.select2-container--default .select2-selection--single { border: 1px solid var(--oh-line-2); border-radius: 0; height: 50px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; padding-left: 16px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

@media (max-width: 640px) {
  .oh-cart-line { grid-template-columns: 84px 1fr; gap: 16px; }
  .single-product div.product .summary { position: static; }
}