/**
 * German Market Guarantee Label — shared display corrections.
 *
 * Loaded on single products and on the checkout. The dead-space correction is
 * a property of the artwork, so it is written once against German Market's own
 * wrapper and applies wherever the nested label is rendered; the rules below it
 * are specific to the checkout's order summary.
 */

/**
 * Pull the label's own dead space out of the layout.
 *
 * The artwork sits inside a 368.5-unit viewBox but the ink only runs from 35.86
 * to 360.03 — 9.73% empty on the left, 2.3% on the right, taken by the white
 * rect.cls-4 backing plate. Scaling to 100/87.97 and shifting left by 9.73% of
 * that lands the visible edge flush with the text beside it. Percentages rather
 * than a fixed offset, because the SVG is fluid.
 */
.german-market-guarantee-label-output-nested .german-market-guarantee-label-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* Clips the white overhang the negative margin pulls outside the box, so the
     label's white card never bleeds over the background behind it. */
  overflow: hidden;
}

.german-market-guarantee-label-output-nested .german-market-guarantee-label-trigger svg {
  display: block;
  width: 113.68%;
  /* German Market prints style="max-width:100%" on the svg itself, which would
     clamp the scale-up above; an inline style only yields to !important. */
  max-width: none !important;
  height: auto;
  margin-left: -11.06%;
}

/* Single product: the label would otherwise run the full width of the summary
   column. */
.single-product .german-market-guarantee-label-output-nested {
  max-width: 235px;
}

/**
 * Checkout order summary.
 *
 * The slot carries the optical nudge rather than the svg: the trigger clips its
 * own overflow, so pulling the svg further left would cut the ink off.
 */
.kawai-garan-label-slot {
  width: calc(100% + 0.375rem);
  margin-top: 0.25rem;
  margin-left: -0.375rem;
}

/* German Market ships the nested label with margin-top: 14px, far too much
   stacked under a summary line. */
.kawai-garan-label-slot .german-market-guarantee-label-output {
  max-width: 100%;
  margin-top: 0;
}

/**
 * Checkout column gutter.
 *
 * WooCommerce reserves 4.5283% to the right of the form column and 2.26% to the
 * left of the sidebar — 53px + 26px at a 1170px layout, a 79px gutter. Halved.
 *
 * Note this widens the form, not the order summary: the columns are a fixed
 * 65/35 split, so the padding only changes where each column's content starts.
 */
.wc-block-components-sidebar-layout .wc-block-components-main {
  padding-right: 1.5rem;
}

/**
 * Hide the product short description in the order summary.
 *
 * The Checkout block has a native "Disable product descriptions" toggle on its
 * Cart items inner block, which drops the node entirely — but that lives in the
 * page content and would have to be set again on every environment. Doing it
 * here keeps it with the theme.
 */
.wc-block-checkout .wc-block-components-product-metadata__description {
  display: none;
}

/**
 * Legal guarantee overlay.
 *
 * The dialog is German Market's own markup and takes their styling; only the
 * trigger and the hash helper need anything here.
 */
:root {
  /* The theme has no blue: $primary is the kawai red. Kept as a token so the
     pill is one edit away from any other colour. */
  /* EU flag blue (Pantone Reflex Blue). */
  --kawai-legal-guarantee-pill: #003399;
  --kawai-legal-guarantee-pill-hover: #00266f;
}

/* Sits at the right-hand end of the breadcrumb bar. Floated rather than made a
   flex item, so the breadcrumb trail's own inline layout is left alone. */
.kawaiBreadcrumb .kawai-legal-guarantee-archive-note {
  float: right;
  margin: 0;
}

.kawaiBreadcrumb .container::after {
  content: '';
  display: table;
  clear: both;
}

/* The button carries German Market's trigger class so their delegated handler
   opens the dialog and returns focus here on close — but their frontend.css
   resets that class with `background: transparent !important; padding: 0
   !important; width: 100%`, so the pill has to answer in kind. The wrapper is
   in the selector to out-specify that rule whichever order the two
   stylesheets happen to load in. */
.kawai-legal-guarantee-archive-note .kawai-legal-guarantee-trigger {
  display: inline-block !important;
  width: auto !important;
  /* px, not rem: the theme drops the root font-size to 10.4px between 768 and
     1199, which shrank a rem-based pill to 7.8px text in a 15px box. */
  padding: 3px 10px !important;
  border: 0;
  border-radius: 4px;
  background: var(--kawai-legal-guarantee-pill) !important;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.kawai-legal-guarantee-archive-note .kawai-legal-guarantee-trigger:hover,
.kawai-legal-guarantee-archive-note .kawai-legal-guarantee-trigger:focus-visible {
  background: var(--kawai-legal-guarantee-pill-hover) !important;
  color: #fff;
  text-decoration: none;
}

/**
 * Hold the page still while the overlay is open.
 *
 * German Market locks scrolling with `body { overflow: hidden }`, which
 * collapses the scroll position to the top — the page was jumping on open and
 * staying there after close. Pinning the body at its current offset keeps it
 * where the customer left it; legal-guarantee-overlay.js sets and clears `top`.
 */
body.kawai-scroll-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* Present only so German Market has an element to read the dialog id from and
   to return focus to when the overlay is opened from the fragment alone. */
.kawai-legal-guarantee-hash-trigger {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.kawai-legal-guarantee-modal .german-market-guarantee-label-dialog-title {
  margin-top: 0;
  font-size: 1.25rem;
}


/* Mobile: the breadcrumb trail already fills the row, so the pill drops onto
   its own line at the left rather than floating against the trail. */
@media only screen and (max-width: 767px) {
  .kawaiBreadcrumb .kawai-legal-guarantee-archive-note {
    display: block;
    float: none;
    margin-top: 12px;
  }
}