/* =========================================================
   AURORALINK — WooCommerce shop/product/cart/checkout styling.
   Reuses the exact design tokens (colors, radii, shadows, fonts)
   defined in main.css's :root, so the store looks like one
   continuous site instead of a bolted-on plugin page.
   ========================================================= */

.woo-shell{ padding:34px 0 90px; }

/* --------------------------- Breadcrumb --------------------------- */
.al-breadcrumb-row{ margin-bottom:22px; }
.al-woo-breadcrumb{ font-size:13.5px; color:var(--ink-500); }
.al-woo-breadcrumb a{ color:var(--ink-500); }
.al-woo-breadcrumb a:hover{ color:var(--navy-900); }
.al-woo-breadcrumb .sep{ margin:0 4px; color:var(--border-strong); }

/* --------------------------- Page titles --------------------------- */
.woo-shell .page-title,
.woocommerce-products-header__title{
  font-family:var(--font-display); font-weight:700; color:var(--navy-900);
  font-size:clamp(26px,3.4vw,38px); margin-bottom:8px;
}
.woocommerce-result-count,
.woocommerce-ordering{ font-size:14px; color:var(--ink-500); }
.woocommerce-ordering select{
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:8px 12px;
  font-family:var(--font-body); background:var(--surface); color:var(--ink-700);
}

/* --------------------------- Notices --------------------------- */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews{
  list-style:none; margin:0 0 22px; padding:16px 20px; border-radius:var(--radius-md);
  background:var(--bg-alt); border:1px solid var(--border); color:var(--ink-700);
  font-size:14.5px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.woocommerce-message{ border-left:4px solid var(--success-500); }
.woocommerce-error{ border-left:4px solid #e0505a; }
.woocommerce-info{ border-left:4px solid var(--blue-500); }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button{ margin-left:auto; }

/* --------------------------- Buttons (reuse .btn look) --------------------------- */
.woo-shell .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; font-family:var(--font-display); font-weight:600; font-size:15px; padding:14px 26px;
  border-radius:var(--radius-full); border:1.5px solid transparent; cursor:pointer;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); color:var(--navy-950) !important;
  box-shadow:var(--shadow-gold); transition:transform .18s ease, box-shadow .18s ease;
}
.woo-shell .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(245,180,0,.65);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
}
.woo-shell .button.alt,
.woocommerce #payment #place_order{
  background:var(--grad-navy); color:#fff !important; box-shadow:var(--shadow-md);
}
.woo-shell .button.alt:hover,
.woocommerce #payment #place_order:hover{ box-shadow:var(--shadow-glow); }
.woo-shell .button:disabled,
.woo-shell .button.disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* --------------------------- Shop loop (product grid) --------------------------- */
/* The !important layer here is deliberate belt-and-suspenders: WooCommerce
   (or a caching/minify plugin bundling an older copy of its own core
   stylesheet) can otherwise leave a stray float/percentage-width rule on
   li.product that fights this grid — forcing width/float/margin back to
   sane values here means the card grid can't silently break regardless of
   what else is loaded on the page. */
ul.products{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:28px;
  list-style:none !important; margin:0 !important; padding:0 !important; width:100%;
}
ul.products li.product{
  position:relative !important; float:none !important; width:100% !important; margin:0 !important;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align:left; clear:none !important;
}
ul.products li.product:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold-400); }
ul.products li.product a{ display:block; color:inherit; text-decoration:none; }
ul.products li.product a img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
/* A slim navy/gold accent bar along the top edge of every card — the same
   "course" visual signature used elsewhere on the site (step badges,
   price-group icons), so the shop grid reads as part of one system
   instead of a bolted-on plugin page. */
ul.products li.product::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
  background:var(--grad-gold);
}
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display); font-weight:700; font-size:18.5px; color:var(--navy-900);
  margin:20px 22px 8px; line-height:1.3; overflow-wrap:break-word; word-break:break-word;
}
/* Own branded "no photo" artwork (assets/img/product-placeholder.svg, hooked
   in via woocommerce_placeholder_img_src in inc/woocommerce.php) — its 4:3
   canvas already matches the card photo area exactly, so it just needs to
   fill the box cleanly like a real product photo would. */
ul.products li.product img[src*="product-placeholder"],
.woocommerce-product-gallery img[src*="product-placeholder"]{
  object-fit:cover;
}
ul.products li.product .price{
  font-family:var(--font-display); font-weight:700; color:var(--navy-900); font-size:21px;
  margin:0 22px 6px; display:block;
}
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .price del{ color:var(--ink-400); font-weight:400; font-size:14px; margin-right:6px; }
/* Homepage "Kurser & lektioner" cards (front-page.php) reuse the theme's
   generic .price class (bold, 22px, display font) as their wrapper — but
   that class was written for a plain price string, not WooCommerce's own
   price_html markup, which can add a struck-through <del> original price
   next to the <ins> sale price. Scoped here (not in main.css, since this
   only matters where real WooCommerce price_html is echoed) so the old
   price reads as de-emphasized instead of inheriting the same bold size. */
.course-card .price del{ color:var(--ink-400); font-weight:400; font-size:14px; margin-right:6px; text-decoration:line-through; }
.course-card .price ins{ text-decoration:none; }
/* A short one-line hint under the price so every card explains itself at a
   glance, without relying on the (often generic) WooCommerce short
   description ever being filled in. */
ul.products li.product .al-card-hint{
  display:block; margin:0 22px 16px; font-size:13px; color:var(--ink-500);
}
ul.products li.product .button{
  margin:0 22px 22px; width:calc(100% - 44px); padding:13px 20px; font-size:14.5px; font-weight:700;
}
ul.products li.product .onsale{
  position:absolute; top:16px; left:16px; z-index:3; background:var(--grad-navy); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.03em; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--radius-full); box-shadow:var(--shadow-md);
}
ul.products li.product .star-rating{ margin:0 22px 6px; }

@media (max-width:900px){ ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ ul.products{ grid-template-columns:1fr; } }

/* --------------------------- Single product --------------------------- */
.single-product .product{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }

.woocommerce-product-gallery{ position:relative; }
.woocommerce-product-gallery__wrapper{
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--bg-alt);
}
.woocommerce-product-gallery img{ width:100%; display:block; object-fit:cover; }
.flex-control-thumbs{ display:flex; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.flex-control-thumbs li{ width:74px; }
.flex-control-thumbs img{
  border-radius:var(--radius-sm); border:2px solid transparent; cursor:pointer; opacity:.7; transition:opacity .15s ease, border-color .15s ease;
}
.flex-control-thumbs img:hover, .flex-control-thumbs .flex-active-slide img{ opacity:1; border-color:var(--blue-500); }

.summary.entry-summary .product_title{
  font-family:var(--font-display); font-weight:700; color:var(--navy-900);
  font-size:clamp(26px,3.2vw,36px); line-height:1.15; margin-bottom:12px;
}
.summary.entry-summary .price{
  font-family:var(--font-display); font-weight:700; color:var(--navy-900); font-size:30px;
  display:block; margin-bottom:18px;
}
.summary.entry-summary .price del{ font-size:18px; color:var(--ink-400); font-weight:400; margin-right:10px; }
.summary.entry-summary .price ins{ text-decoration:none; }
.summary.entry-summary .woocommerce-product-details__short-description{
  color:var(--ink-600); font-size:15.5px; line-height:1.7; margin-bottom:24px;
}
.summary.entry-summary .woocommerce-product-details__short-description ul{ padding-left:0; list-style:none; }
.summary.entry-summary .woocommerce-product-details__short-description li{
  display:flex; gap:9px; align-items:flex-start; margin-bottom:8px;
}
.summary.entry-summary .woocommerce-product-details__short-description li::before{
  content:""; width:8px; height:8px; margin-top:7px; flex-shrink:0; border-radius:50%;
  background:var(--grad-accent);
}

form.cart{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.quantity{ display:inline-flex; }
.quantity .qty{
  width:78px; padding:13px 14px; border:1.5px solid var(--border-strong); border-radius:var(--radius-full);
  font-family:var(--font-display); font-weight:600; text-align:center; color:var(--navy-900); background:var(--surface);
}
.single_add_to_cart_button{ flex-shrink:0; }

.woocommerce-variation-price .price{ font-size:22px !important; margin-bottom:0 !important; }
table.variations{ margin-bottom:18px; width:100%; }
table.variations td, table.variations th{ padding:8px 0; font-size:14px; }
table.variations select{
  border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 14px;
  font-family:var(--font-body); background:var(--surface); min-width:180px;
}

.product_meta{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); font-size:13.5px; color:var(--ink-500); }
.product_meta a{ color:var(--blue-500); }

/* under-button Klarna reminder */
.al-atc-pay-note{
  display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 16px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:13.5px; color:var(--ink-600); width:100%;
}

/* --------------------------- Tabs --------------------------- */
.woocommerce-tabs{ margin-top:56px; }
.woocommerce-tabs ul.tabs{
  display:flex; gap:6px; list-style:none; margin:0 0 -1px; padding:0; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.woocommerce-tabs ul.tabs li{ margin:0; }
.woocommerce-tabs ul.tabs li a{
  display:block; padding:14px 22px; font-family:var(--font-display); font-weight:600; font-size:14.5px;
  color:var(--ink-500); border-radius:var(--radius-sm) var(--radius-sm) 0 0; text-decoration:none;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--navy-900); background:var(--bg-alt); box-shadow:inset 0 -3px 0 var(--blue-500); }
.woocommerce-tabs .panel{
  padding:32px 4px; color:var(--ink-600); font-size:15px; line-height:1.75;
  border-bottom:1px solid var(--border);
}
.woocommerce-tabs .panel h2{ font-family:var(--font-display); font-weight:700; color:var(--navy-900); font-size:22px; margin-bottom:14px; }

/* --------------------------- Related products --------------------------- */
.related.products{ margin-top:64px; padding-top:48px; border-top:1px solid var(--border); }
.related.products > h2{
  font-family:var(--font-display); font-weight:700; color:var(--navy-900);
  font-size:clamp(22px,2.6vw,28px); margin-bottom:6px;
}
.related.products > h2::after{
  content:""; display:block; width:56px; height:4px; margin-top:14px; margin-bottom:22px;
  border-radius:var(--radius-full); background:var(--grad-gold);
}

/* --------------------------- Payment trust strip (end of product page) --------------------------- */
.al-pay-strip{
  margin-top:60px; padding:44px 0 4px; border-top:1px solid var(--border);
}
.al-pay-strip-inner{
  background:linear-gradient(150deg,var(--navy-950),var(--navy-800));
  border-radius:var(--radius-xl); padding:40px 44px; color:#fff; position:relative; overflow:hidden;
}
.al-pay-strip-inner::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 85% 15%, rgba(47,111,237,.35), transparent 55%),
             radial-gradient(circle at 10% 90%, rgba(245,180,0,.18), transparent 50%);
}
.al-pay-strip-head, .al-pay-badges, .al-pay-strip-facts{ position:relative; z-index:1; }
.al-pay-strip-head h3{ font-family:var(--font-display); font-weight:700; font-size:24px; margin-bottom:6px; color:#fff; }
.al-pay-strip-head p{ color:#c3cfe8; font-size:15px; max-width:520px; }
.al-pay-badges{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:26px 0; }
.al-pay-mini{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.18); font-family:var(--font-display); font-weight:600; font-size:13.5px; color:#dfe7f7;
}
.al-pay-mini .icon{ width:15px; height:15px; }
.al-pay-strip-facts{ display:flex; flex-wrap:wrap; gap:22px; list-style:none; margin:0; padding:20px 0 0; border-top:1px solid rgba(255,255,255,.12); }
.al-pay-strip-facts li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#dfe7f7; }
.al-pay-strip-facts .icon{ width:16px; height:16px; color:var(--gold-400); }

/* --------------------------- Klarna badge (brand-recognizable pill, not a traced logo file) --------------------------- */
.al-klarna-badge{
  display:inline-flex; align-items:center; gap:8px; background:#ffb3c7; color:#0b051a;
  border-radius:var(--radius-full); padding:10px 18px 10px 12px; font-family:var(--font-display); font-weight:700;
  box-shadow:0 10px 24px -10px rgba(255,179,199,.7);
}
.al-klarna-badge-mark{
  display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  background:#0b051a; color:#ffb3c7; font-size:14px; font-weight:800;
}
.al-klarna-badge-word{ font-size:16px; letter-spacing:-.01em; }
.al-klarna-badge--sm{ padding:7px 14px 7px 8px; }
.al-klarna-badge--sm .al-klarna-badge-mark{ width:19px; height:19px; font-size:11px; }
.al-klarna-badge--sm .al-klarna-badge-word{ font-size:13.5px; }

@media (max-width:900px){
  .single-product .product{ grid-template-columns:1fr; gap:32px; }
  .al-pay-strip-inner{ padding:32px 24px; }
}
@media (max-width:600px){
  form.cart{ flex-direction:column; align-items:stretch; }
  .single_add_to_cart_button{ width:100%; }
  .al-pay-badges{ flex-direction:column; align-items:flex-start; }
}

/* --------------------------- Cart page --------------------------- */
.woocommerce-cart table.shop_table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.woocommerce-cart table.shop_table th{ background:var(--grad-navy); color:#fff; font-family:var(--font-display); font-weight:600; font-size:13px; text-align:left; padding:16px 18px; }
.woocommerce-cart table.shop_table td{ padding:16px 18px; border-top:1px solid var(--border); font-size:14.5px; color:var(--ink-600); }
.woocommerce-cart table.shop_table td.product-name a{ font-family:var(--font-display); font-weight:600; color:var(--navy-900); }
.woocommerce-cart table.shop_table td.product-remove a{ color:#e0505a; font-size:20px; }
.cart-collaterals .cart_totals{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 28px; margin-top:26px;
}
.cart-collaterals .cart_totals h2{ font-family:var(--font-display); font-weight:700; color:var(--navy-900); font-size:20px; margin-bottom:14px; }
.cart_totals table{ width:100%; }
.cart_totals table th, .cart_totals table td{ padding:10px 0; font-size:14.5px; }
.cart_totals .order-total .amount{ font-family:var(--font-display); font-weight:700; color:var(--navy-900); font-size:20px; }
.wc-proceed-to-checkout .checkout-button{ width:100%; text-align:center; }
.woocommerce-shipping-calculator .shipping-calculator-form{ margin-top:12px; }
.coupon{ display:flex; gap:10px; flex-wrap:wrap; }
.coupon .input-text{ padding:12px 16px; border:1.5px solid var(--border-strong); border-radius:var(--radius-full); }

@media (max-width:700px){
  .woocommerce-cart table.shop_table thead{ display:none; }
  .woocommerce-cart table.shop_table tr{ display:block; padding:14px 0; border-top:1px solid var(--border); }
  .woocommerce-cart table.shop_table td{ display:flex; justify-content:space-between; gap:12px; border-top:none; padding:6px 18px; }
}

/* --------------------------- Checkout page --------------------------- */
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details{ display:block; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading{
  font-family:var(--font-display); font-weight:700; color:var(--navy-900); font-size:20px; margin:0 0 16px;
}
.woocommerce form .form-row{ margin-bottom:14px; }
.woocommerce form .form-row label{ font-size:13.5px; font-weight:600; color:var(--ink-700); margin-bottom:6px; display:block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--border-strong); border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:15px; color:var(--navy-900); background:var(--surface);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{ outline:2.5px solid var(--blue-500); outline-offset:1px; border-color:var(--blue-500); }
#order_review{ background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 28px; margin-top:22px; }
.woocommerce-checkout-review-order-table{ width:100%; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td{ padding:10px 0; font-size:14.5px; }
#payment{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); margin-top:8px; }
#payment .wc_payment_methods{ list-style:none; margin:0; padding:18px; }
#payment .wc_payment_method{ padding:12px 4px; border-bottom:1px solid var(--border); }
#payment .wc_payment_method:last-child{ border-bottom:none; }
#payment .payment_box{ padding:14px 4px 4px; font-size:13.5px; color:var(--ink-500); }
#place_order{ width:100%; }

/* --------------------------- Checkout/Cart BLOCKS (modern WooCommerce) --------------------------- */
/* Everything above this point styles the CLASSIC [woocommerce_checkout]/
   [woocommerce_cart] shortcode templates. Newer WooCommerce installs
   default new Kassa/Varukorg pages to the block-based Checkout/Cart
   instead — completely different markup (wc-block-* classes) that none
   of the classic rules above ever touch, so a checkout built that way
   was rendering with zero theme styling.

   IMPORTANT — read before touching layout (width/display/grid/flex) in
   this section: WooCommerce Blocks already ships a COMPLETE, correct,
   responsive two-column layout for both Kassa and Varukorg, built on
   its own ".wc-block-components-sidebar-layout" wrapper:
     - desktop: display:flex on the wrapper, with ".wc-block-components-main"
       at width:65% and ".wc-block-components-sidebar" at width:35%
       (their padding-right/padding-left percentages ARE the gutter
       between them — the two numbers are designed to sum to 100%).
     - mobile (a real "@media (max-width:699px)" rule WooCommerce ships,
       not a JS-added class): the wrapper switches to
       flex-direction:column and both children reset to width:100%.
   A prior version of this file added a competing
   "@media (min-width:900px){ display:grid; grid-template-columns:1.6fr 1fr }"
   rule here, guessed from a hand-built markup mockup rather than the
   real production DOM. Because WooCommerce's own sidebar-layout element
   ALSO happens to carry a generic "wc-block-checkout" class (in
   addition to its real "wc-block-components-sidebar-layout" class),
   that guessed rule matched it too — turning it into a CSS Grid
   container out from under WooCommerce's own flex children. Those
   children still had their explicit width:65%/35% from WooCommerce's
   CSS, but a percentage width on a grid item resolves against its own
   grid TRACK, not the full row — so instead of 65%/35% of the whole
   checkout, they became 65%/35% of an already-fractional grid column,
   squeezing the real content (the "Kontaktinformation" heading, the
   order-summary price list, etc.) down to ~300px/~100px on a live
   production checkout and forcing text to wrap and even render one
   character per line. Confirmed live on the real Kassa page (view-source
   DOM), not guessed — do not reintroduce a custom display:grid/flex
   override on ".wc-block-checkout"/"[class*=\"checkout__container\"]";
   theme only via the real ".wc-block-components-sidebar-layout" /
   ".wc-block-components-main" / ".wc-block-components-sidebar" class
   names below, and only for things WooCommerce's own CSS doesn't
   already set (background, border, spacing inside each card) — never
   width/display/flex-direction on the wrapper itself.

   Separately: inside the order-summary sidebar, price/quantity text
   could still wrap one character per line if a descendant's default
   flex/grid min-width ("auto", i.e. "never shrink below your content's
   natural size") ever gets force-shrunk by an ancestor. Setting
   min-width:0 on every descendant is the standard, safe guard for that;
   it doesn't change how anything looks normally, it just stops that
   specific shrink-to-nothing failure. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{
  max-width:100%;
}
.wp-block-woocommerce-checkout *,
.wp-block-woocommerce-cart *{
  min-width:0;
}
.wp-block-woocommerce-checkout [class*="formatted-money-amount"],
.wp-block-woocommerce-checkout [class*="totals-item__value"],
.wp-block-woocommerce-checkout [class*="product-price"],
.wp-block-woocommerce-checkout [class*="order-summary-item__total-price"],
.wp-block-woocommerce-cart [class*="formatted-money-amount"],
.wp-block-woocommerce-cart [class*="totals-item__value"],
.wp-block-woocommerce-cart [class*="product-price"]{
  white-space:nowrap;
}
.wp-block-woocommerce-checkout [class*="sidebar"],
.wp-block-woocommerce-cart [class*="sidebar"]{
  overflow:visible;
}

/* --------------------------- Checkout BLOCKS — visual organization ---------------------------
 * Beyond the crash-fix above, this gives the Checkout Blocks page the
 * same "card" visual language as the rest of the theme (white panels,
 * var(--border), var(--radius-lg)) instead of WooCommerce's own bare
 * default styling — clearer separation between "your details" (left,
 * one card per step) and "order summary" (right sidebar), consistent
 * spacing, and buttons/inputs that match every other form on the site.
 * Selectors mix WooCommerce Blocks' well-established class names with
 * [class*="…"] substring hedges for the handful that vary slightly by
 * WooCommerce version, same defensive approach as the fix above.
 *
 * IMPORTANT — the ":not([class*=\"__\"])" guard below is load-bearing,
 * confirmed against the real live Kassa DOM: WooCommerce Blocks uses
 * BEM naming, where "__" always marks a SUB-part of a block (e.g. the
 * step fieldset is "wc-block-components-checkout-step", and it directly
 * *contains* "…checkout-step__heading", "…checkout-step__heading-content"
 * (an icon/edit-button slot) and "…checkout-step__content" as children).
 * A substring selector like [class*="checkout-step"] with no "__" guard
 * (an earlier version of this file only excluded "__title"/"__description")
 * also matches those inner wrapper/slot elements — turning an empty
 * icon-slot span into a second, wrongly-bordered/shadowed "card" that
 * visually overlapped the real step heading text on the live checkout.
 * Excluding every class containing "__" reliably keeps this rule scoped
 * to just the base block element, since only the block's OWN class ever
 * omits "__" — do not narrow this back down to only __title/__description. */
.wp-block-woocommerce-checkout{
  padding-top:8px;
}
.wc-block-checkout__main,
.wp-block-woocommerce-checkout [class*="checkout__main"]{
  display:flex; flex-direction:column; gap:20px;
}
.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout [class*="checkout-step"]:not([class*="__"]){
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 26px 26px;
  box-shadow:var(--shadow-sm);
}
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout [class*="checkout-step__title"]{
  font-family:var(--font-display);
  color:var(--navy-900);
  font-size:18px;
}
.wc-block-components-checkout-step__description,
.wp-block-woocommerce-checkout [class*="checkout-step__description"]{
  color:var(--ink-500);
  font-size:13.5px;
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wp-block-woocommerce-checkout [class*="text-input"] input,
.wp-block-woocommerce-checkout select{
  border:1.5px solid var(--border-strong) !important;
  border-radius:var(--radius-md) !important;
  font-family:var(--font-body) !important;
}
.wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout [class*="text-input"] input:focus{
  outline:2.5px solid var(--blue-500);
  outline-offset:1px;
}
.wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout [class*="radio-control__option"]{
  border-radius:var(--radius-md) !important;
}

/* Order-summary sidebar — same muted "receipt" panel treatment the
 * classic #order_review box already uses elsewhere on the site. */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout [class*="checkout__sidebar"]{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 26px;
  align-self:flex-start;
}
/* Exact class only (no wildcard hedge) — confirmed against the real
 * live Kassa DOM. WooCommerce's own sub-parts here ("…-order-summary-item",
 * "…-order-summary-item__image", etc.) use a mix of "-" and "__"
 * inconsistently, so a [class*="order-summary"] wildcard (even guarded
 * with :not([class*="__"])) still matches "…-order-summary-item" (no
 * "__" in that particular name) and would strip its background/border/
 * padding too, cramping each product row in the summary. Matching only
 * the exact block class avoids that entirely. */
.wc-block-components-order-summary{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}
/* Per-item UNIT-price caption (e.g. the small "760.00kr" shown under the
 * product name in the order-summary/cart rows) rendering OUTSIDE the
 * sidebar card, spilling into the page background to the right — confirmed
 * live on the real Kassa page (a real order in the cart, not a guessed
 * markup). Root cause: this caption span carries THREE classes —
 * "wc-block-components-order-summary-item__individual-prices" (checkout) /
 * it sits inside a "wc-block-cart-item__prices" wrapper (cart page),
 * "wc-block-components-product-price", AND a bare "price" class. Elsewhere
 * in this theme (course cards, single-product pages, price tables) ".price"
 * is our OWN generic utility class, defined in main.css as big/bold/navy
 * (display font, 700 weight, 22px) for standalone price tags — but
 * WooCommerce Blocks' markup ALSO happens to use the literal class "price"
 * on this small caption, so our unscoped ".price" rule collides with it and
 * inflates a small receipt-line caption up to a 22px bold heading. That
 * single oversized span forces its ancestor
 * (".wc-block-components-order-summary__content", which WooCommerce renders
 * as "display:table" and therefore sizes to fit its content instead of
 * shrinking to the sidebar's width) wider than the ~220-280px sidebar
 * column, and since ".wp-block-woocommerce-checkout [class*=\"sidebar\"]"
 * above is intentionally overflow:visible (needed for a different, already-
 * documented fix), the excess simply renders past the card's right edge
 * instead of being clipped or wrapped.
 * IMPORTANT — the selector below is deliberately narrow, confirmed against
 * the real live DOM on both Kassa and Varukorg: a naive
 * "[class*=\"product-price\"]" (matching on that class alone) ALSO matches
 * the prominent per-row LINE-TOTAL price (".wc-block-components-order-
 * summary-item__total-price" on checkout, the cart's "…__total-price-and-
 * sale-badge-wrapper" column on the cart page) — that one uses the exact
 * same "price wc-block-components-product-price" classes and must stay
 * large/bold. Scoping to "[class*=\"individual-prices\"]" (checkout) and to
 * descendants of "[class*=\"cart-item__prices\"]" (cart) reaches ONLY the
 * small unit-price caption, never the line total.
 * Fix: reset this element back down to WooCommerce's OWN intended look for
 * it — confirmed via WooCommerce's bundled plugin CSS, which styles a bare
 * ".price" at font-weight:400, ~0.857em (small/muted), never bold/large.
 * Do not widen this selector back to a bare "[class*=\"product-price\"]" —
 * that reintroduces the overflow AND wrongly shrinks the line-total price. */
.wp-block-woocommerce-checkout [class*="individual-prices"],
.wp-block-woocommerce-cart [class*="cart-item__prices"] [class*="product-price"]{
  font-family:inherit !important;
  font-weight:400 !important;
  font-size:13px !important;
  color:var(--ink-500) !important;
}
/* The fix above alone was NOT enough with a real multi-item cart (confirmed
 * live: added "30 körlektioner" + "Digitalt teoripaket" x2 + the on-sale
 * "Erbjudande" bundle to a real order) — the per-row LINE-TOTAL price (the
 * bold "20,250.00kr"/"12,900.00kr" on the right of each row, plus its
 * "Spara X kr" sale badge) can itself need more width than the ~220px
 * sidebar column has once amounts get into the thousands, or a sale badge
 * is present. That total-price element sits in the same flex row as the
 * product name ("wc-block-components-order-summary-item", display:flex,
 * nowrap by default), competing for the row's width — when the price text
 * doesn't fit its shrunk flex share, the theme's own "white-space:nowrap"
 * rule above (needed elsewhere to stop 1-character-per-line wrapping) made
 * it spill sideways instead of wrapping, visually overlapping the product
 * name and/or poking out past the card's right edge.
 * Fix: let the row wrap (flex-wrap:wrap) and force the total-price onto its
 * OWN full-width line below the name (flex:0 0 100%, right-aligned) instead
 * of competing for horizontal space beside it. This matches a standard
 * "receipt" layout (name+qty on one line, price below/right) and — unlike
 * the min-width:max-content approach tried and rejected during testing —
 * actually keeps the whole row within the sidebar's width no matter how
 * large the amount or how long the sale badge text is, confirmed against
 * the real live 3-item/4-quantity cart above (rows measured pixel-for-pixel
 * flush with the card's right edge, no overlap, no spill). */
.wc-block-components-order-summary-item,
.wp-block-woocommerce-checkout [class*="order-summary-item"]:not([class*="__"]){
  flex-wrap:wrap !important;
}
.wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout [class*="order-summary-item__total-price"]{
  flex:0 0 100% !important;
  max-width:100% !important;
  text-align:right !important;
  margin-top:2px !important;
}
.wc-block-components-totals-item,
.wp-block-woocommerce-checkout [class*="totals-item"]:not([class*="__"]){
  padding:10px 0 !important;
  border-bottom:1px solid var(--border);
}
.wc-block-components-totals-item:last-child,
.wp-block-woocommerce-checkout [class*="totals-item"]:not([class*="__"]):last-child{
  border-bottom:none;
}

/* Place-order button — same gold CTA every other page uses. */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout [class*="place-order-button"]:not([class*="__"]){
  background:var(--grad-gold) !important;
  color:var(--navy-950) !important;
  border:none !important;
  border-radius:var(--radius-full) !important;
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  box-shadow:var(--shadow-gold);
}

/* NOTE: no custom display:grid/flex-direction/width rule for the
 * two-column layout belongs here — see the long comment above, near
 * "IMPORTANT — read before touching layout", for why. WooCommerce
 * Blocks' own ".wc-block-components-sidebar-layout" (flex, 65%/35%
 * desktop, stacks to 100%/100% under 699px) already does this
 * correctly on both Kassa and Varukorg. */

/* --------------------------- My account --------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block; padding:12px 16px; border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:600; color:var(--ink-600); font-size:14.5px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--bg-alt); color:var(--navy-900); }
.woocommerce-account .woocommerce-MyAccount-content{ margin-top:22px; }
@media (min-width:800px){
  .woocommerce-account .woocommerce-MyAccount-navigation{ float:left; width:220px; }
  .woocommerce-account .woocommerce-MyAccount-content{ margin-left:250px; margin-top:0; }
}