/*
Theme Name: Glasche
Description: Monochrome catalog theme for Glasche.
Template: storefront
Version: 1.0
*/

:root{
  --gl-black:#000;
  --gl-white:#fff;
  --gl-ink:#111;
  --gl-gray:#8b8b90;
  --gl-gray-dark:#4a4a4e;
  --gl-silver:#c9c9ce;
  /* Line icons only. A hairline stroke of pure black reads heavier than text of
     the same colour — there is no antialiased edge to soften it — so the icon
     ink sits one step lighter than --gl-ink to match the weight of the labels
     beside it. Still far darker than --gl-gray-dark, which a 1.15px stroke
     would let disappear. */
  --gl-icon:#36363b;
  --gl-line:rgba(0,0,0,.10);
  --gl-hairline:var(--gl-line);   /* older rules refer to this name */

  --gl-gutter:clamp(14px,3vw,34px);
  --gl-section:clamp(28px,5vw,72px);
  --gl-mark-h:clamp(28px,2.2vw,40px);
  --gl-mark-gap:clamp(11px,0.9vw,16px);

  /* The drawn wordmark, used as a mask so one file serves both colourways —
     see "WORDMARK" below. Ratio is the asset's viewBox (250/105), not its ink
     bounds; `contain` fits the viewBox, so matching it means the box the mask
     is painted into has no slack for the glyphs to drift inside. */
  --gl-wordmark:url(assets/wordmark.svg);
  --gl-wordmark-ar:2.381;

  /* Fluid type scale.
     These are deliberately NOT applied by changing the root font-size. Storefront's
     layout grid is em-based (.col-full max-width, its paddings, and the negative
     margins WooCommerce Blocks derives from them), so moving the root rescales the
     parent's whole container system — which pulled the block checkout ~172px off the
     left edge. Scaling the theme's own type directly leaves that grid untouched. */
  --gl-fs-micro:clamp(9.6px,0.18vw + 9.1px,11.6px);   /* eyebrow / meta caps      */
  --gl-fs-nav:clamp(10.2px,0.2vw + 9.6px,12.4px);     /* nav, filters, legal      */
  --gl-fs-body:clamp(14px,0.22vw + 13.3px,16.5px);    /* running copy, fields     */
  --gl-fs-lead:clamp(15px,0.4vw + 13.7px,19px);       /* single-product price     */
  --gl-fs-title:clamp(17px,0.7vw + 14.8px,23px);      /* product title            */
}

body{
  background:var(--gl-white);
  color:var(--gl-ink);
  font-family:'Inter',-apple-system,sans-serif;
  font-size:var(--gl-fs-body);
}

/* ============ LANDING SPLASH ============ */
body.glasche-landing{
  background:var(--gl-black);
  color:var(--gl-white);
  margin:0;
}
.landing{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:56px;
  padding:40px 24px;
  text-align:center;
}
/* The ink mark is the loud element here, so the wordmark steps down to a
   supporting scale. Two things this size would fight each other. */
.landing__logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Clear space below the mark: brush tips need air, so ~22% of mark height. */
  gap:clamp(22px,4.4vh,44px);
}
.landing__ink{
  display:block;
  width:auto;
  height:clamp(104px,24vh,208px);
  /* Optical, not mathematical: the gesture's mass sits left of the bounding
     box centre, so nudge right to make it read as centred. */
  transform:translateX(2.5%);
}
/* Wordmark and tagline are one unit — they belong to the identity block,
   not orphaned below the calls to action. */
.landing__words{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.landing__mark{
  margin:0;
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:clamp(1.25rem,3.2vw,2.1rem);
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--gl-white);
}
.landing__nav{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
}
.landing__btn{
  display:inline-block;
  border:1px solid var(--gl-white);
  color:var(--gl-white);
  padding:15px 30px;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.landing__btn:hover,
.landing__btn:focus{
  background:var(--gl-white);
  color:var(--gl-black);
}
.landing__tag{
  margin:0;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gl-silver);
}

/* ============ HEADER ============ */
#masthead{
  background:var(--gl-white);
  border-bottom:1px solid var(--gl-line);
  padding:18px 0 14px;
  position:sticky;
  top:0;
  z-index:99;
}
#masthead .col-full{
  max-width:none;
  padding-left:20px;
  padding-right:20px;
}
.site-title{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin:0;
}
.site-title a{ color:var(--gl-black); }
.site-description{
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
.main-navigation ul li a,
.site-header-cart .cart-contents{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-black);
}
.main-navigation ul li a:hover,
.site-header-cart .cart-contents:hover{ color:var(--gl-gray); }
.site-header .widget_product_search input[type="search"]{
  border:1px solid var(--gl-line);
  border-radius:0;
  background:var(--gl-white);
  font-size:.72rem;
  letter-spacing:.08em;
}

/* ============ FOCUS ============ */
/* Storefront paints `outline:2px solid #7f54b3` on every :focus, so a plain mouse
   click leaves a purple ring behind — a circle on the round controls. Drop it for
   pointer input and keep a black ring for keyboard users via :focus-visible.
   The WooCommerce field rules further down still win (they carry !important), so
   form inputs keep their hairline-darkening focus treatment. */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus{ outline:none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--gl-black);
  outline-offset:2px;
}

/* No grey flash on tap outside the areas Storefront already covers. */
html{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

/* ============ TYPE ============ */
h1,h2,h3,h4{
  font-family:'Inter',sans-serif;
  font-weight:500;
  color:var(--gl-black);
  letter-spacing:.02em;
}
.woocommerce-products-header__title,
.page-title{
  font-size:.8rem !important;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-align:center;
}

/* ============ CATALOG: full-bleed hairline grid ============ */
.woocommerce-page .site-content{ padding-top:0; }
.woocommerce-products-header{ padding:0 !important; margin:0 !important; }
.woocommerce-breadcrumb,
.storefront-breadcrumb{ display:none !important; }
/* Full-bleed only on catalog listings, never on single product / cart / checkout. */
.post-type-archive-product .content-area,
.tax-product_cat .content-area,
.post-type-archive-product .site-main,
.tax-product_cat .site-main{ margin-bottom:0 !important; }
.post-type-archive-product .site-content .col-full,
.tax-product_cat .site-content .col-full{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

ul.products::before, ul.products::after,
.wc-block-grid__products::before, .wc-block-grid__products::after{
  content:none !important;
  display:none !important;
}

ul.products,
.wc-block-grid__products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:0 !important;
  margin:0 0 0 calc(50% - 50vw) !important;
  padding:0 !important;
  width:100vw !important;
  max-width:100vw !important;
  list-style:none;
  border-top:1px solid var(--gl-line);
}

ul.products li.product,
li.wc-block-grid__product{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;
  border-right:1px solid var(--gl-line);
  border-bottom:1px solid var(--gl-line);
  border-left:0 !important;
  border-top:0 !important;
  text-align:left !important;
  position:relative;
  display:block;
}

ul.products li.product a.woocommerce-loop-product__link{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "image image"
    "title price";
  align-items:baseline;
  text-decoration:none;
  color:var(--gl-black);
}

ul.products li.product img,
.wc-block-grid__product-image img{
  grid-area:image;
  display:block;
  width:100%;
  height:auto;
  margin:0 !important;
  border-radius:0 !important;
  aspect-ratio:4/5;
  object-fit:cover;
  background:#f4f4f6;
  transition:opacity .35s ease;
}
ul.products li.product:hover img{ opacity:.82; }

/* ---- multi-angle hover stack ---- */
ul.products li.product .gl-media{
  grid-area:image;
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#f4f4f6;
}
.gl-media__frame{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.gl-media__frame.is-active{ opacity:1; }
ul.products li.product .gl-media__frame img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
  margin:0 !important;
  aspect-ratio:auto !important;
}

.gl-media__nav{
  position:absolute;
  top:0;
  bottom:0;
  width:64px;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease;
  z-index:2;
}
.gl-media__nav--prev{ left:0; }
.gl-media__nav--next{ right:0; }
.gl-media__nav::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:11px;
  height:11px;
  margin-top:-6px;
  border-top:1.5px solid var(--gl-black);
  border-right:1.5px solid var(--gl-black);
}
.gl-media__nav--next::after{ transform:translate(-70%,-50%) rotate(45deg); }
.gl-media__nav--prev::after{ transform:translate(-30%,-50%) rotate(-135deg); }
.gl-media:hover .gl-media__nav{ opacity:1; }
.gl-media__nav:hover::after{ border-color:var(--gl-gray); }

.gl-media__dots{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  display:flex;
  justify-content:center;
  gap:6px;
  opacity:0;
  transition:opacity .25s ease;
  z-index:2;
  pointer-events:none;
}
.gl-media:hover .gl-media__dots{ opacity:1; }
.gl-media__dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(0,0,0,.22);
  transition:background .25s ease;
}
.gl-media__dot.is-active{ background:var(--gl-black); }

/* the stack replaces the plain <img>, so don't dim it on hover */
ul.products li.product:hover .gl-media img{ opacity:1; }

@media (hover:none){
  .gl-media__nav{ opacity:1; }
  .gl-media__dots{ opacity:1; }
}

ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title{
  grid-area:title;
  font-size:.68rem !important;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gl-black);
  margin:0 !important;
  padding:16px 18px 18px 20px !important;
}

ul.products li.product .price,
.wc-block-grid__product-price{
  grid-area:price;
  font-size:.68rem !important;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--gl-gray-dark);
  margin:0 !important;
  padding:16px 20px 18px 0 !important;
  text-align:right;
  white-space:nowrap;
}
ul.products li.product .price del{ color:var(--gl-silver); margin-right:6px; }
ul.products li.product .price ins{ text-decoration:none; }

/* Germanized appends the PAngV notices (VAT + shipping-costs link) as siblings of
   the product link, so they fall outside the card's own grid. Pull them back in as
   one quiet line under the title/price row.

   The block-grid card (wp:woocommerce/product-new and friends) is a grid itself, so
   there the two notices get auto-placed into the leftover "title" and "price" tracks
   — one hard against each border, ignoring the 20px inset the row above uses. Span
   them across both tracks so they inherit the same padding as the catalog card. */
ul.products li.product .wc-gzd-additional-info,
li.wc-block-grid__product .wc-gzd-additional-info{
  margin:0 !important;
  padding:0 20px 16px !important;
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gl-gray);
  line-height:1.5;
}
li.wc-block-grid__product .wc-gzd-additional-info{
  grid-column:1 / -1;
}
ul.products li.product .wc-gzd-additional-info.tax-info,
li.wc-block-grid__product .wc-gzd-additional-info.tax-info{
  padding-top:0 !important;
  margin-top:-8px !important;
}
ul.products li.product .wc-gzd-additional-info a,
li.wc-block-grid__product .wc-gzd-additional-info a{
  color:var(--gl-gray);
  text-decoration:underline;
  text-underline-offset:2px;
}
ul.products li.product .wc-gzd-additional-info a:hover,
li.wc-block-grid__product .wc-gzd-additional-info a:hover{ color:var(--gl-black); }

ul.products li.product .onsale,
.wc-block-grid__product-onsale{
  border-radius:0;
  background:var(--gl-black);
  color:var(--gl-white);
  border:0;
  font-size:.56rem;
  font-weight:500;
  letter-spacing:.14em;
  padding:6px 10px;
  min-height:0;
  min-width:0;
  top:0; left:0; right:auto;
}

/* wc-block-grid variant (homepage-style blocks) */
li.wc-block-grid__product{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "image image"
    "title price";
  align-items:baseline;
}
li.wc-block-grid__product > a.wc-block-grid__product-link{ display:contents; }
.wc-block-grid__product-image{ grid-area:image; margin:0; }
.wc-block-grid__product-add-to-cart{ display:none !important; }

/* ============ Catalog filter row ============ */
.glasche-filters{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  padding:26px 20px 30px;
}
.glasche-filters__link{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.glasche-filters__link:hover{ color:var(--gl-black); }
.glasche-filters__link.is-active{
  color:var(--gl-black);
  border-bottom-color:var(--gl-black);
}
.glasche-filters__sep{ color:var(--gl-silver); font-size:.68rem; }

/* ============ Catalog toolbar ============ */
.woocommerce-notices-wrapper:empty{ display:none; }
.storefront-sorting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  padding:0 20px 22px;
  border:0;
}
/* Storefront clearfixes this row with ::before/::after. In a flex container those
   become two zero-width flex *items*, and space-between then hands them two of the
   three gaps — which is what held the toolbar inside a centred ~756px band while
   the filter row and the product grid either side of it ran edge to edge. */
.storefront-sorting::before,
.storefront-sorting::after{ display:none; }
/* Storefront floats these; as flex items they need explicit sizing or the
   result count wraps underneath the select instead of beside it. */
.storefront-sorting > *{ float:none !important; margin:0 !important; }
.storefront-sorting .woocommerce-result-count{ flex:0 1 auto; }
.storefront-sorting .woocommerce-ordering{ flex:0 0 auto; }
.woocommerce-result-count{
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray);
}

/* --- sort disclosure --- */
/* The control is a <details>; see woocommerce/loop/orderby.php for why the native
   select was dropped. Everything below is the catalog's own vocabulary — micro
   caps, hairlines, no radius, underline for state — so it reads as the right-hand
   end of the filter row above it rather than as a form field. */
.gl-sort{ position:relative; }
.gl-sort__trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  /* Firefox draws the marker from list-style; Chrome from the pseudo-element.
     display:inline-flex alone already drops it in Chrome, but both are stated
     so the trigger cannot regrow a triangle if that display value changes. */
  list-style:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  font-size:var(--gl-fs-micro);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray);
  white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
.gl-sort__trigger::-webkit-details-marker{ display:none; }
.gl-sort__value{ color:var(--gl-black); }
.gl-sort__trigger:hover,
.gl-sort[open] .gl-sort__trigger{
  color:var(--gl-black);
  border-bottom-color:var(--gl-black);
}
.gl-sort__trigger:focus-visible{ outline:2px solid var(--gl-black); outline-offset:4px; }

/* Two hairlines rather than a glyph: an arrow character would arrive at the
   font's own weight and sit off the cap height of tracked micro caps. */
.gl-sort__caret{
  width:5px;
  height:5px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease;
}
.gl-sort[open] .gl-sort__caret{ transform:translateY(1px) rotate(-135deg); }

.gl-sort__list{
  position:absolute;
  z-index:60;
  top:calc(100% + 12px);
  left:0;
  min-width:100%;
  margin:0;
  padding:16px 22px 18px;
  list-style:none;
  background:var(--gl-white);
  border:1px solid var(--gl-line);
  display:flex;
  flex-direction:column;
  gap:11px;
  /* An animation, not a transition: <details> removes the panel from the box
     tree when closed, so there is no from-state for a transition to run out of. */
  animation:gl-sort-in .18s ease both;
}
@keyframes gl-sort-in{
  from{ opacity:0; transform:translateY(-6px); }
}
.gl-sort__item{ margin:0; }
.gl-sort__option{
  display:block;
  width:fit-content;
  font-size:var(--gl-fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray);
  text-decoration:none;
  white-space:nowrap;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.gl-sort__option:hover{ color:var(--gl-black); }
.gl-sort__option.is-active{
  color:var(--gl-black);
  border-bottom-color:var(--gl-black);
}
@media (prefers-reduced-motion: reduce){
  .gl-sort__list{ animation:none; }
  .gl-sort__caret{ transition:none; }
}

/* An ordering select the template override does not render — the catalog sorting
   block, say — still needs pulling back to toolbar type. The WooCommerce field
   rules further down carry !important and come later, so this needs both the
   extra class and the flag to win. */
.storefront-sorting .woocommerce-ordering select{
  font-size:var(--gl-fs-micro) !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray) !important;
  border:1px solid var(--gl-line) !important;
  border-radius:0;
  background:var(--gl-white) !important;
  padding:8px 12px;
}

.woocommerce-breadcrumb{
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  padding:0 20px;
}
.woocommerce-breadcrumb a{ color:var(--gl-gray); }
.woocommerce-pagination ul.page-numbers{ border:0; }
.woocommerce-pagination .page-numbers li .page-numbers{
  border:1px solid var(--gl-line);
  border-radius:0;
  font-size:.7rem;
  color:var(--gl-black);
  background:var(--gl-white);
}
.woocommerce-pagination .page-numbers li .page-numbers.current{
  background:var(--gl-black);
  color:var(--gl-white);
}

/* ============ Buttons ============ */
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.wp-block-button__link{
  background:var(--gl-black) !important;
  color:var(--gl-white) !important;
  border:1px solid var(--gl-black) !important;
  border-radius:0 !important;
  font-size:.7rem !important;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:14px 28px !important;
  transition:background .2s ease,color .2s ease;
}
button:hover, .button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wp-block-button__link:hover{
  background:var(--gl-white) !important;
  color:var(--gl-black) !important;
}

/* ============ Single product ============ */

/* Buffer under the header.
   `.woocommerce-page .site-content{padding-top:0}` further up is there so the
   catalog's full-bleed hairline grid can start hard against the header rule, but
   it is scoped to the whole shop — and the catalog is the only template that
   pays its own way afterwards, via the 26px on .glasche-filters. Cart, account
   and checkout are covered by the margin on their page title; the single product
   opens straight onto div.product with nothing above it, so the title and the
   gallery were landing on the header's bottom border.

   Same specificity as the rule it overrides (0,2,0), so this has to stay below
   it in the file. The floor is the catalog's own 26px, which keeps the listing
   and the detail page reading as one rhythm on phones, and it opens up from
   there since a wide viewport puts the header further from the eye. */
.single-product .site-content{ padding-top:clamp(26px,3.4vw,48px); }

.single-product div.product .product_title{
  font-size:1.1rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.single-product div.product .price{
  font-size:.9rem;
  color:var(--gl-gray-dark);
  letter-spacing:.06em;
}
.single-product div.product img{ border-radius:0; }

/* Storefront clears the gallery/summary floats with `overflow:hidden`, which also
   makes this box clip anything that reaches past the content column — so the
   full-bleed related-products rail below was being cut off ~40px short of the
   viewport on each side, and once it became a scroller that clipped strip was
   unreachable. flow-root contains the same floats without the clipping. Same
   specificity as Storefront's rule, and this sheet loads after it. */
.single-product div.product{
  display:flow-root;
  overflow:visible;
}

/* flexslider clone slides bleed outside the gallery without this */
.woocommerce-product-gallery{ overflow:hidden; }
.woocommerce-tabs ul.tabs li{ border-radius:0; }

/* ============ Notices ============ */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments{
  background:#f4f4f6 !important;
  color:var(--gl-ink) !important;
  border-top:2px solid var(--gl-black) !important;
  border-radius:0;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{ color:var(--gl-black) !important; }

/* ============ Footer ============ */
#colophon{
  background:var(--gl-white);
  border-top:1px solid var(--gl-line);
  color:var(--gl-gray);
}
#colophon, #colophon a{
  font-size:.66rem;
  letter-spacing:.14em;
  color:var(--gl-gray);
}

/* ============ Responsive ============ */
/* The catalog column count is no longer stepped here — see ADAPTIVE CATALOG GRID below,
   which derives it from the tile's preferred width so every viewport in between is
   handled rather than just the two breakpoints. */
@media (max-width:600px){
  .landing{ gap:40px; }
  .storefront-sorting{ flex-direction:column; align-items:center; gap:12px; text-align:center; }
  /* An absolutely placed panel anchored to a centred trigger has nothing to stop
     it running off the right edge on a narrow screen, so at this width the list
     drops into the flow instead — it sits directly above the grid, where pushing
     the page down costs nothing. */
  .gl-sort{ width:100%; }
  .gl-sort__trigger{ justify-content:center; }
  .gl-sort__list{
    position:static;
    align-items:center;
    margin-top:12px;
    padding-left:0;
    padding-right:0;
    border-left:0;
    border-right:0;
  }
  .storefront-sorting .woocommerce-ordering select{ width:100%; }
}

/* Storefront's mobile menu toggle must not inherit the filled button style. */
.menu-toggle,
.menu-toggle:hover{
  background:transparent !important;
  color:var(--gl-black) !important;
  border:1px solid var(--gl-line) !important;
  padding:10px 16px 10px 40px !important;
}

/* ---------- legal links (footer + landing) ---------- */
.glasche-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 26px;
  padding:26px 20px;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.glasche-legal a{
  color:var(--gl-gray);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.glasche-legal a:hover,
.glasche-legal a:focus-visible{
  color:var(--gl-black);
  border-bottom-color:var(--gl-black);
}

/* On the black landing splash the bar sits on dark ground. */
.glasche-landing .glasche-legal{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
}
.glasche-landing .glasche-legal a{ color:rgba(255,255,255,.45); }
.glasche-landing .glasche-legal a:hover,
.glasche-landing .glasche-legal a:focus-visible{
  color:#fff;
  border-bottom-color:#fff;
}

/* Legal pages are long-form reading, not catalog.
   Cart, checkout and account use the same default page template, so this measure was
   also squeezing them to ~707px. Their WooCommerce blocks are `alignwide` and break out
   of whatever box they are given, so the narrow measure did not clip them — it shifted
   them, leaving the whole cart sitting ~194px left of the page centre. Exclude the shop
   screens; they are interfaces, not prose. */
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account).page-template-default .entry-content{ max-width:68ch; }
.page-template-default .entry-content h2{ margin-top:2em; }
.page-template-default .entry-content table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.page-template-default .entry-content th,
.page-template-default .entry-content td{
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid var(--gl-hairline);
}

/* ---------- language switcher ---------- */
.glasche-lang{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.glasche-lang a{
  color:var(--gl-gray);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.glasche-lang a:hover,
.glasche-lang a:focus-visible{ color:var(--gl-black); }
.glasche-lang a.is-current{
  color:var(--gl-black);
  border-bottom-color:var(--gl-black);
}
.glasche-lang__sep{ color:var(--gl-silver); }

/* Header placement: right-hand column, between the search box and the cart total.
   Right-aligned to the same edge as both, so it holds its place whatever the cart total
   widens to. */
/* Superseded by the single-row header: the switcher is now a flex child of
   .gl-head__end, stacked under the cart. Absolute positioning here would lift it
   back out of that column and drop it on top of the cart. */
#masthead .gl-head__end .glasche-lang{
  position:static;
  right:auto;
  bottom:auto;
  justify-content:flex-end;
}
#masthead .col-full{ position:relative; }

/* Below the search breakpoint the header stacks, so let it flow instead. */
@media (max-width:768px){
  #masthead .glasche-lang{ position:static; margin-top:10px; }
}

/* Landing splash: pale on black, above the legal bar. */
.glasche-lang--landing{
  position:absolute;
  top:28px;
  right:28px;
}
.glasche-lang--landing a{ color:rgba(255,255,255,.5); }
.glasche-lang--landing a:hover,
.glasche-lang--landing a:focus-visible{ color:#fff; }
.glasche-lang--landing a.is-current{
  color:#fff;
  border-bottom-color:#fff;
}
.glasche-lang--landing .glasche-lang__sep{ color:rgba(255,255,255,.3); }

/* ---------- header lockup: ink mark + wordmark ---------- */
.gl-lockup{ margin:0; }
.gl-lockup__link{
  display:inline-flex;
  align-items:center;
  /* Clear space between mark and word ~0.4x mark height — the dry-brush tips
     read as noise if the type crowds them. */
  gap:var(--gl-mark-gap);
  text-decoration:none;
}
/* Storefront ships `.site-header .site-branding img{max-width:230px;height:auto}` behind
   @media(min-width:768px). That is specificity 0,2,1 and silently beat a plain
   `.gl-lockup__mark`, so from the tablet breakpoint up the mark fell back to its intrinsic
   1087x1482 and grew to 230x314 — a third of the viewport. Match its weight to win.

   Height is fluid: the floor is the spec's ~32px limit for the solid version (below that the
   flying-white edges close up), and it scales with the viewport so the lockup tracks the
   wordmark instead of drifting apart from it on large screens. */
.site-header .site-branding .gl-lockup__mark,
.gl-lockup__mark{
  display:block;
  width:auto;
  max-width:none;
  height:var(--gl-mark-h);
  flex:none;
}
.gl-lockup__word{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:.24em;
  /* No text-indent here. Indenting by one letter-space is the trick for optically
     re-centring *centred* tracked-out text (it cancels the trailing space on the
     last glyph). This lockup is left-aligned, so the same indent just pushes the
     wordmark off the tagline's left edge — 5.5px of visible misalignment. */
  text-transform:uppercase;
  color:var(--gl-black);
  line-height:1;
}
.gl-lockup__link:hover .gl-lockup__word{ color:var(--gl-gray-dark); }
.gl-lockup__link:focus-visible{ outline:2px solid var(--gl-black); outline-offset:4px; }

/* The description already sits under the wordmark; align it to the type, not to the mark,
   so the left edge of the text column stays true. Derived from the mark metrics rather than
   hardcoded, so the two cannot drift apart as the lockup scales. */
#masthead .site-description{
  margin-left:calc(var(--gl-mark-h) * 0.735 + var(--gl-mark-gap));
}

@media (max-width:600px){
  .gl-lockup__word{ font-size:.95rem; letter-spacing:.2em; text-indent:.2em; }
}

@media (prefers-reduced-motion: no-preference){
  .gl-lockup__word{ transition:color .2s ease; }
}

/* ============================================================================
   WORDMARK
   "Glasche" is a drawn logotype, not Inter tracked out, so the three places the
   name is set — the landing splash, the header brand, and the site-title lockup
   — paint assets/wordmark.svg instead.

   It is applied as a mask rather than an <img> for two reasons. The shop header
   needs it black and the landing splash needs it white, and a mask takes its
   colour from CSS, so one file covers both instead of the two-variant split the
   ink mark carries. And the colour is still a colour, so `currentColor` keeps
   the existing hover transition on the lockup working — an <img> could only have
   faded its opacity.

   The markup is untouched: each element still contains the real site name from
   bloginfo(), pushed out of its own box rather than removed, so the name is
   still announced, still indexed, and still what a text-only reader gets.

   Every geometric rule is inside @supports on purpose. Without mask support the
   background would print as a solid rectangle of currentColor where the word
   belongs; falling back to the typeset word is a far better failure, and that is
   what a browser that skips this block gets, unchanged.
   ========================================================================== */
.landing__mark{
  /* Matched to the width the typeset word held (~218px at 1280), so the splash's
     vertical rhythm and the tagline beneath it are undisturbed. */
  --gl-word-h:clamp(54px,8.6vw,92px);
}
.gl-head__word,
.gl-lockup__word{
  /* Tied to the ink mark rather than to a font size: the two halves of the
     lockup then scale on one curve and cannot drift apart. Slightly taller than
     the mark because the wordmark's box includes the l-ascender and the
     G-descender, so only ~60% of it is ink. */
  --gl-word-h:calc(var(--gl-mark-h) * 1.15);
}

@supports ((-webkit-mask-image:none) or (mask-image:none)){
  .landing__mark,
  .gl-head__word,
  .gl-lockup__word{
    display:block;
    flex:none;
    width:calc(var(--gl-word-h) * var(--gl-wordmark-ar));
    height:var(--gl-word-h);
    background-color:currentColor;
    -webkit-mask:var(--gl-wordmark) no-repeat center/contain;
    mask:var(--gl-wordmark) no-repeat center/contain;
    /* Image replacement. text-indent rather than font-size:0 or a clip rect:
       the glyphs stay rendered at full size and simply start one full box-width
       to the right of a box that hides its overflow. */
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
  }
}

/* ============================================================================
   HEADER NAVIGATION ROW
   Storefront gives the nav links ~19px of vertical padding and nothing else, so the
   row sat flush against the branding block above (0px) and only 15px off the bottom
   divider — reading as if it belonged to the section above it. Space it deliberately
   and symmetrically instead.
   ========================================================================== */
.storefront-primary-navigation{
  margin-top:clamp(10px,1.1vw,18px);
  border-top:1px solid var(--gl-line);
}
#masthead .main-navigation ul li a,
#masthead .site-header-cart .cart-contents{
  padding-top:clamp(14px,1.4vw,20px) !important;
  padding-bottom:clamp(14px,1.4vw,20px) !important;
}
/* The cart is a floated sibling of the nav, so it needs the same rhythm to sit on
   the same baseline. */
#masthead .site-header-cart{ margin:0; }

/* ============================================================================
   ADAPTIVE CATALOG GRID
   The grid was pinned to 3 / 2 / 1 columns at two hard breakpoints, so it ignored
   everything between them — a 2560px display got the same three enormous tiles as a
   1280px one, and a 700px tablet got two 350px tiles. Track the viewport instead:
   the tile has a preferred size and the column count follows from it.
   ========================================================================== */
ul.products,
.wc-block-grid__products{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(260px,29vw,440px)),1fr)) !important;
}

/* ============================================================================
   RELATED / UP-SELLS — horizontal rail
   These lists inherit the catalog grid above, which is right for a page whose only
   job is the grid but wrong at the foot of a product page: on a phone the related
   tiles stacked into full-width blocks and buried the footer under ~1700px of
   scrolling. A suggestion strip should read as one line you push sideways, so the
   list becomes a flex rail that overflows instead of wrapping.

   `flex:1 0 <tile>` is what keeps this from being a regression on desktop: the
   basis tracks the catalog's tile size, and the grow factor lets a short list
   stretch to fill the full-bleed width exactly as the grid's 1fr tracks do today.
   Only when the tiles no longer fit does the rail start scrolling — the narrower
   the viewport, the more of the next tile peeks past the edge, which is the
   affordance that says it moves. max-width caps the stretch so three products on a
   2560px display don't inflate into 850px slabs.

   The floor is 240px rather than the catalog's 260px so that three tiles clear an
   iPad in portrait: at 768px the wider floor overflowed by 12px, which sliced a
   sliver off the third card for no gain. 720px of tiles fits, and they grow to
   256px to fill it.
   ========================================================================== */
.related.products > ul.products,
.up-sells.products > ul.products,
.upsells.products > ul.products{
  display:flex !important;
  flex-wrap:nowrap !important;
  grid-template-columns:none !important;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* The rail is full-bleed, so a scrollbar would draw a grey line across the page
     edge on the platforms that reserve space for one. The peeking tile carries the
     affordance instead. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.related.products > ul.products::-webkit-scrollbar,
.up-sells.products > ul.products::-webkit-scrollbar,
.upsells.products > ul.products::-webkit-scrollbar{
  width:0;
  height:0;
}

.related.products > ul.products > li.product,
.up-sells.products > ul.products > li.product,
.upsells.products > ul.products > li.product{
  flex:1 0 clamp(240px,29vw,440px) !important;
  max-width:clamp(440px,34vw,620px) !important;
  scroll-snap-align:start;
}

/* ============================================================================
   FORMS — simple, monochrome, delicate
   Storefront fills inputs with #f2f2f2 and an inset bevel; WooCommerce Blocks draws a
   4px-radius box with an 80%-opacity near-black border. Both fight the hairline
   monochrome the rest of the theme is built from. Reduce every field to a single
   hairline that darkens on focus.
   ========================================================================== */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="url"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="tel"],
.woocommerce-page textarea,
.woocommerce-page select,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-blocks-components-select__select,
.wc-block-components-textarea{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid var(--gl-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--gl-ink) !important;
  font-family:'Inter',-apple-system,sans-serif;
  font-size:.86rem !important;
  letter-spacing:.03em;
  transition:border-color .18s ease;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-page input:focus,
.woocommerce-page textarea:focus,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus{
  border-bottom-color:var(--gl-black) !important;
  outline:none !important;
  box-shadow:none !important;
}
::placeholder{ color:var(--gl-silver); opacity:1; }

/* Field labels take the same micro-type as the rest of the interface. */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.wc-blocks-components-select__label,
.woocommerce-form-login label,
.woocommerce-address-fields label{
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  margin-bottom:2px;
}
/* The required marker is the only colour left on an otherwise monochrome page. */
.required,
.woocommerce .required,
.wc-block-components-label__required,
abbr.required{
  color:var(--gl-gray) !important;
  border:0 !important;
  text-decoration:none !important;
}

/* Blocks checkout uses a floating label inside the box; with the box gone the label
   has to travel against the hairline instead of the old 4px-radius frame. */
.wc-block-components-text-input{ padding-top:0; }
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-blocks-components-select__select{
  padding:1.45em 0 .55em !important;
  height:auto !important;
}
.wc-block-components-text-input label{
  left:0 !important;
  font-size:.86rem;
  letter-spacing:.02em;
  color:var(--gl-gray);
}
.wc-block-components-text-input.is-active label{
  font-size:.62rem !important;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  transform:translateY(-.15em) !important;
}
.wc-blocks-components-select{ padding-top:0; }
.wc-blocks-components-select__container{ background:transparent !important; border:0 !important; border-radius:0 !important; }

/* Password reveal: the blanket button rule turned this into a 72x48 black slab
   welded to the field. It is an affordance inside the input, not a button. */
.woocommerce .show-password-input,
.woocommerce button.show-password-input,
.wc-block-components-button--text,
button.wc-block-components-show-password{
  background:transparent !important;
  color:var(--gl-gray) !important;
  border:0 !important;
  padding:0 6px !important;
  min-height:0 !important;
  font-size:.7rem !important;
  letter-spacing:0 !important;
}
.woocommerce .show-password-input:hover{ color:var(--gl-black) !important; }
.woocommerce .password-input{ display:block; position:relative; }
.woocommerce .show-password-input{ position:absolute; right:0; top:50%; transform:translateY(-50%); }

/* Checkboxes and radios: hairline squares, no fill, no radius. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.wc-block-components-checkbox__input{
  accent-color:var(--gl-black);
  width:14px; height:14px;
  border-radius:0;
}

/* ============================================================================
   CHECKOUT + ACCOUNT TYPE REGISTER
   These screens shipped with WooCommerce's own scale (39px page title, 30px h2,
   23px step titles) against a catalog built on 11px letterspaced caps — two
   different design languages on the same site. Bring them into one.
   ========================================================================== */
.woocommerce-account .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-account .page-title,
.woocommerce-checkout .page-title{
  font-size:.8rem !important;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-align:center;
}
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.woocommerce-account h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.cart_totals h2,
.cross-sells h2{
  font-size:.72rem !important;
  font-weight:600 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  color:var(--gl-black) !important;
}
.wc-block-components-checkout-step__description,
.woocommerce-account .woocommerce-MyAccount-content p{
  font-size:.8rem;
  color:var(--gl-gray-dark);
}
/* Guest-checkout reassurance, added as a paragraph block inside the contact step.
   It follows Blocks' own "Du bestellst gerade als Gast." line, so it reads as the
   explanation to that statement rather than a second notice competing with it. */
.gl-guest-note{
  margin:6px 0 0 !important;
  font-size:.72rem;
  line-height:1.65;
  color:var(--gl-gray);
  max-width:46ch;
}
/* Blocks draws a numbered circle beside each step; it reads as a badge against
   the flat monochrome. */
.wc-block-components-checkout-step__heading-content{ color:var(--gl-gray); }

/* Account navigation as quiet type, matching the footer legal row. */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation ul li a{
  display:block;
  padding:9px 0;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  text-decoration:none;
  border-bottom:1px solid var(--gl-line);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover{ color:var(--gl-black); }

/* The login card sits in a narrow measure rather than stretched across the page. */
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{
  max-width:34rem;
  margin-left:auto;
  margin-right:auto;
}
.woocommerce form.login,
.woocommerce form.register{
  border:0 !important;
  border-top:1px solid var(--gl-line) !important;
  border-radius:0 !important;
  padding:clamp(22px,3vw,34px) 0 0 !important;
  margin:0 !important;
}
.woocommerce-form-login__rememberme{
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
.woocommerce-LostPassword a{
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
.woocommerce-LostPassword a:hover{ color:var(--gl-black); }

/* ============================================================================
   VIEWPORT-RATIO GUARDS
   A sticky header is fine on a tall screen and hostile on a short one: on a
   landscape phone the two-row masthead was 676px against a 375px viewport — 180%
   of the screen, permanently pinned. Release it when there is no height to spare.
   ========================================================================== */
@media (max-height:560px){
  #masthead{ position:static; }
}
@media (max-width:768px) and (orientation:landscape){
  #masthead{ position:static; padding-top:10px; padding-bottom:8px; }
  .storefront-primary-navigation{ margin-top:6px; }
}

/* ============================================================================
   FLUID TYPE APPLICATION
   Every size below was a fixed rem pinned to a 16px root, so a 2560px display and a
   1280px one rendered identical 10.5px caps. These re-express the same scale as
   viewport-tracking clamps. Layout-affecting em values are left alone on purpose —
   see the note in :root.
   ========================================================================== */
.main-navigation ul li a,
.site-header-cart .cart-contents,
.glasche-filters__link,
.glasche-filters__sep,
.glasche-legal,
.glasche-lang,
#colophon,
#colophon a{
  font-size:var(--gl-fs-nav);
}
/* The ordering control is not in this list: it was never reached from here. The
   WooCommerce field rules below match the same select at equal specificity and
   come later, which is what rendered it at running-copy size next to an 11px
   result count. It is sized in the catalog toolbar section instead. */
.site-description,
.woocommerce-result-count,
.woocommerce-breadcrumb,
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
ul.products li.product .price,
.wc-block-grid__product-price{
  font-size:var(--gl-fs-micro) !important;
}
ul.products li.product .wc-gzd-additional-info,
li.wc-block-grid__product .wc-gzd-additional-info{
  font-size:calc(var(--gl-fs-micro) * 0.9);
}
.woocommerce-products-header__title,
.page-title,
.woocommerce-account .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title{
  font-size:var(--gl-fs-nav) !important;
}
.gl-lockup__word{
  font-size:var(--gl-fs-title);
}
.single-product div.product .product_title{ font-size:var(--gl-fs-title); }
.single-product div.product .price{ font-size:var(--gl-fs-lead); }
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.wp-block-button__link{
  font-size:var(--gl-fs-nav) !important;
}
/* Forms read at running-copy size; their labels take the micro caps. */
.woocommerce input, .woocommerce textarea, .woocommerce select,
.woocommerce-page input, .woocommerce-page textarea, .woocommerce-page select,
.wc-block-components-text-input input,
.wc-blocks-components-select__select{
  font-size:var(--gl-fs-body) !important;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.wc-blocks-components-select__label,
.woocommerce-form-login label,
.woocommerce-address-fields label,
.wc-block-components-text-input.is-active label{
  font-size:var(--gl-fs-micro) !important;
}
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.woocommerce-account h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.cart_totals h2,
.cross-sells h2{
  font-size:var(--gl-fs-nav) !important;
}

/* ============================================================================
   BLOCK CHECKOUT — container + summary
   ========================================================================== */
/* The checkout is an `alignwide` block whose symmetric negative margins are what let it
   escape Storefront's ~706px content column and reach the two-column width — WooCommerce
   Blocks drops to a single column below roughly 700px of *container* width, so those
   margins must not be cancelled. Only the gutter is corrected: the breakout left content
   12px off the viewport edge while the header keeps 20px. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{
  padding-left:var(--gl-gutter) !important;
  padding-right:var(--gl-gutter) !important;
  box-sizing:border-box;
}

/* Summary column: hairlines, square corners, no fills. */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block{
  border-radius:0 !important;
  border-color:var(--gl-line) !important;
  background:transparent !important;
}
.wc-block-components-order-summary-item{ background:transparent !important; }
.wc-block-components-order-summary-item__image img{ border-radius:0 !important; }

/* The summary's own headings sat at 23px against 11px catalog caps. */
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-totals-item__label{
  font-size:var(--gl-fs-nav) !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
/* Totals rows are data, not headings — keep them readable and lower case. */
.wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label{
  font-weight:400 !important;
  letter-spacing:.1em !important;
  color:var(--gl-gray-dark) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount{
  font-size:var(--gl-fs-body) !important;
  letter-spacing:.04em;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:var(--gl-fs-lead) !important;
  font-weight:500 !important;
}
.wc-block-components-order-summary-item__quantity{
  background:var(--gl-black) !important;
  color:var(--gl-white) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
/* The place-order button is the one deliberate black mass on the page. */
.wc-block-components-checkout-place-order-button{
  border-radius:0 !important;
  letter-spacing:.16em;
}

/* ============================================================================
   WP-LOGIN — brand pass
   Enqueued from functions.php on login_enqueue_scripts. wp-login.php gets no theme
   styling from WordPress, so the shop's own door was stock admin blue.
   ========================================================================== */
body.login{
  background:var(--gl-white);
  font-family:'Inter',-apple-system,sans-serif;
}
body.login #login{ width:min(92vw,340px); padding:8vh 0 0; }
body.login h1 a{
  background-image:var(--gl-login-mark) !important;
  background-size:contain !important;
  background-position:center !important;
  width:auto !important;
  height:clamp(44px,7vh,64px) !important;
  margin-bottom:26px;
}
body.login form{
  background:transparent;
  border:0;
  border-top:1px solid var(--gl-line);
  border-radius:0;
  box-shadow:none;
  padding:26px 0 0;
}
body.login label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"]{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--gl-line);
  border-radius:0;
  box-shadow:none;
  padding:8px 0;
  font-size:15px;
  color:var(--gl-ink);
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus{
  border-bottom-color:var(--gl-black);
  box-shadow:none;
  outline:none;
}
body.login .button-primary{
  background:var(--gl-black) !important;
  border:1px solid var(--gl-black) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  color:var(--gl-white) !important;
  font-size:11px !important;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:12px 24px !important;
  height:auto !important;
  width:100%;
  transition:background .2s ease,color .2s ease;
}
body.login .button-primary:hover{
  background:var(--gl-white) !important;
  color:var(--gl-black) !important;
}
body.login .wp-pwd .button{
  background:transparent !important;
  border:0 !important;
  color:var(--gl-gray) !important;
  box-shadow:none !important;
  width:auto;
}
body.login #nav,
body.login #backtoblog{ padding:12px 0 0; text-align:left; }
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-link{
  font-size:11px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray) !important;
}
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-link:hover{ color:var(--gl-black) !important; }
body.login .language-switcher{ margin-top:18px; }
body.login .language-switcher select{
  border:1px solid var(--gl-line);
  border-radius:0;
  box-shadow:none;
}
body.login .language-switcher .button{
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
  border-radius:0 !important;
  color:var(--gl-gray) !important;
  box-shadow:none !important;
}

/* ============================================================================
   PAGE HEADER RHYTHM (cart / checkout / account / legal pages)
   The entry header sat flush against the masthead's bottom hairline (0px) while the
   content below it started 99px later, so the title read as belonging to the header
   bar rather than to the page. Space it equally above and below, and give it enough
   size to hold the top of the page.
   ========================================================================== */
:root{
  --gl-fs-page:clamp(13px,0.42vw + 11.6px,17px);
  --gl-page-air:clamp(30px,4.6vw,68px);
}
/* Storefront ships `.entry-header{padding-bottom:2.618em}` with equal specificity and a
   later source order, which is where the lopsided 0-above / 99-below came from. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header,
.page-template-default .entry-header{
  padding:var(--gl-page-air) 0 !important;
  margin:0 !important;
}
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.page-template-default .entry-title,
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title,
.woocommerce-account .page-title{
  font-size:var(--gl-fs-page) !important;
  font-weight:600;
  letter-spacing:.26em;
  text-indent:.26em;          /* optical centring for the tracked caps */
  text-transform:uppercase;
  text-align:center;
  margin:0 !important;
}
/* The blocks below carry their own leading margin, which is what made the gap under
   the title three times the gap above it. */
.woocommerce-cart .entry-content > *:first-child,
.woocommerce-checkout .entry-content > *:first-child,
.woocommerce-account .entry-content > *:first-child,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content{
  margin-top:0 !important;
  padding-top:0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart,
.wp-block-woocommerce-checkout .wc-block-checkout{ margin-top:0 !important; }

/* ============================================================================
   BLOCK UI CONTROLS ARE NOT BRAND BUTTONS
   The blanket button rule (black fill, 14px/28px padding, tracked caps) is meant for
   calls to action. WooCommerce Blocks also renders quantity steppers, remove links and
   accordion toggles as <button>, so each became a 58x50 black slab overflowing its own
   107x52 stepper frame. Return them to plain controls.
   ========================================================================== */
.wc-block-components-quantity-selector__button,
.wc-block-cart-item__remove-link,
.wc-block-components-panel__button,
.wc-block-components-totals-coupon-link,
.wc-block-components-address-card__edit,
.wc-block-components-checkout-step__description-button,
button.wc-block-components-button.wc-block-components-button--text{
  background:transparent !important;
  color:var(--gl-gray) !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  min-height:0 !important;
  min-width:0 !important;
  height:auto !important;
  font-size:var(--gl-fs-micro) !important;
  font-weight:400 !important;
  letter-spacing:.1em !important;
  text-transform:none !important;
  box-shadow:none !important;
}
.wc-block-components-quantity-selector__button:hover,
.wc-block-cart-item__remove-link:hover,
.wc-block-components-panel__button:hover{
  background:transparent !important;
  color:var(--gl-black) !important;
}
/* The stepper is a single hairline frame with three equal cells. */
.wc-block-components-quantity-selector{
  border:1px solid var(--gl-line) !important;
  border-radius:0 !important;
  width:auto !important;
  min-width:0 !important;
  display:inline-grid !important;
  grid-template-columns:2.2em 2.6em 2.2em;
  align-items:stretch;
}
.wc-block-components-quantity-selector__button{
  font-size:var(--gl-fs-body) !important;
  line-height:1 !important;
  padding:.5em 0 !important;
  cursor:pointer;
}
.wc-block-components-quantity-selector__input{
  background:transparent !important;
  border:0 !important;
  border-left:1px solid var(--gl-line) !important;
  border-right:1px solid var(--gl-line) !important;
  border-radius:0 !important;
  text-align:center;
  font-size:var(--gl-fs-body) !important;
  padding:.5em 0 !important;
  min-width:0 !important;
}
.wc-block-components-panel__button{
  font-size:var(--gl-fs-body) !important;
  color:var(--gl-ink) !important;
  text-align:left;
  width:100%;
}
.wc-block-cart-item__remove-link{
  text-decoration:underline !important;
  text-underline-offset:2px;
  /* The block sizes this control for a 24px glyph: a word needs its own width,
     and must not break in two beside the stepper. */
  width:auto !important;
  height:auto !important;
  white-space:nowrap;
  align-self:center;
}

/* The line under a cart row is drawn per cell, and the row is a grid with a
   column gap — so it arrives as three disconnected segments with holes where the
   gaps are, which reads as a rendering fault rather than a rule. Dropped
   outright: the rows are already separated by their own generous padding, and
   the totals below have real full-width rules of their own to divide against. */
.wc-block-cart-items__row > td{ border-bottom:0 !important; }

/* Woo Blocks reduced the remove control to a bare bin glyph. It is the only
   control in the row that destroys something, so it should say so in words.
   The glyph is hidden by stylesheet rather than filtered out in PHP because the
   cart is client-rendered React — no server-side hook survives a re-render, a
   rule does. The word itself is a custom property set in PHP (see "cart remove
   label" in functions.php): ::after content is invisible to TranslatePress,
   which walks text nodes in the output buffer, so hard-coding it here would
   leave an English shopper reading "Entfernen". */
.wc-block-cart-item__remove-link svg{ display:none !important; }
.wc-block-cart-item__remove-link::after{
  content:var(--gl-remove-label,"Entfernen");
  /* Explicit, because the button carries no other in-flow content once the
     glyph is hidden: without a display of its own the pseudo generates no box
     and the word never paints. */
  display:inline !important;
}

/* A word is some 35px wider than the glyph it replaced, and that was enough to
   push the row's min-content past a 375px viewport and clip the line total off
   the right edge. Allowed to wrap instead: on a phone the label drops below the
   stepper, on anything wider the two stay on one line. */
.wc-block-cart-item__quantity{ flex-wrap:wrap; row-gap:10px; }

/* The landing template positions the switcher against the viewport, but the
   admin bar is fixed on top of it for logged-in users — offset by its height
   so the shop owner sees the same layout a visitor does. */
body.admin-bar .glasche-lang--landing{ top:calc(28px + 46px); }
@media screen and (min-width:783px){
  body.admin-bar .glasche-lang--landing{ top:calc(28px + 32px); }
}

/* Cart/checkout submit buttons come through as .wc-block-components-button, which the
   blanket rule does not reach — they landed on WooCommerce's #333 with an underline. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-button:not(.wc-block-components-button--text){
  background:var(--gl-black) !important;
  color:var(--gl-white) !important;
  border:1px solid var(--gl-black) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  font-size:var(--gl-fs-nav) !important;
  font-weight:500 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  padding:14px 28px !important;
  transition:background .2s ease,color .2s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-button:not(.wc-block-components-button--text):hover{
  background:var(--gl-white) !important;
  color:var(--gl-black) !important;
}
.wc-block-components-button__text{ text-decoration:none !important; }

/* Storefront's "bearbeiten" post edit link is admin chrome leaking into the storefront. */
.woocommerce-cart .edit-link,
.woocommerce-checkout .edit-link,
.woocommerce-account .edit-link{ display:none; }

/* Login form rhythm: WordPress stacks the submit directly under the "remember me" row,
   which reads as one block once the field chrome is gone. */
body.login form .forgetmenot{ margin-bottom:20px; display:block; }
body.login form .submit{ margin-top:4px; }
body.login form p{ margin-bottom:18px; }
body.login form label{ display:block; margin-bottom:2px; line-height:1.6; }
body.login .wp-pwd{ position:relative; }
body.login .wp-pwd .button.wp-hide-pw{
  position:absolute; right:0; bottom:6px; padding:0 !important; height:auto;
}
/* Same rhythm on the storefront login form. */
.woocommerce form.login .woocommerce-form-login__rememberme{ display:block; margin-bottom:20px; }
.woocommerce form.login .woocommerce-form-login__submit{ margin-top:0; }
.woocommerce form.login .form-row{ margin-bottom:20px; padding:0; }
.woocommerce-LostPassword{ margin-top:18px; }

/* ============================================================================
   SINGLE PRODUCT
   ========================================================================== */
/* WooCommerce colours stock messages green/orange/red. In a monochrome shop the only
   thing that should carry colour is a genuine error, so availability reads as type. */
.woocommerce div.product .stock,
.woocommerce div.product .stock.in-stock,
.woocommerce div.product .stock.available-on-backorder{
  color:var(--gl-gray-dark) !important;
  font-size:var(--gl-fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.woocommerce div.product .stock.out-of-stock{ color:var(--gl-ink) !important; }
/* Germanized/Woo prepend an emoji-ish icon to the stock line. */
.woocommerce div.product .stock::before{ display:none !important; }

/* Quantity field and add-to-cart sit on one baseline: the field is a hairline, the
   button is the solid mass. */
.woocommerce div.product form.cart{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
.woocommerce div.product form.cart .quantity{ margin:0; display:flex; }
.woocommerce div.product form.cart .quantity input.qty{
  width:4.5em;
  text-align:center;
  padding:0 0 0 .2em !important;
  border-bottom:1px solid var(--gl-line) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button{ margin:0; }

/* The post edit link is admin chrome; it has no place in the storefront. */
.single-product .edit-link,
.post-edit-link{ display:none; }

/* Product meta as quiet type rather than default body copy. */
.woocommerce div.product .product_meta{
  font-size:var(--gl-fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray);
  border-top:1px solid var(--gl-line);
  padding-top:18px;
}
.woocommerce div.product .product_meta a{ color:var(--gl-gray-dark); }
.woocommerce div.product .product_meta a:hover{ color:var(--gl-black); }

/* Germanized's PAngV line under the price is legally required text, not body copy —
   give it the same quiet register it has in the catalog grid. */
.woocommerce div.product .wc-gzd-additional-info{
  font-size:var(--gl-fs-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gl-gray);
  margin-bottom:6px;
}
.woocommerce div.product .wc-gzd-additional-info a{
  color:var(--gl-gray);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Storefront's prev/next product previews park their thumbnails at left:-45px and
   right:-45px so they can slide in on hover. Against this layout they simply sit there
   half-clipped at both page edges, reading as broken bleed. Navigation here is the
   filter row and the grid, so the peeking previews are removed rather than restyled. */
.storefront-product-pagination{ display:none; }

/* ============================================================
   HEADER — single justified row + full-bleed panel
   Modelled on machtvollstudio.com: top-level items sit on equal
   fractions of the full width instead of clustering left, and the
   panel below reuses the identical grid so its columns line up
   with the item that opened them.
   ============================================================ */
:root{
  --gl-head-pad:clamp(14px,2.2vw,26px);
  --gl-head-col:minmax(0,1fr);
}

#masthead{ padding:0; }
#masthead .col-full{ max-width:none; padding:0; }

.gl-head{
  position:relative;
  background:var(--gl-white);
}
.gl-head__row{
  /* Equal GAPS with both ends flush, rather than equal tracks.
     Fixed tracks make every item start on the same rhythm, but the final item
     then floats short of the right edge unless it happens to be exactly one
     track wide. space-between distributes the slack identically between every
     pair, so the run reads evenly and still lands hard on both margins. */
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--gl-head-pad);
  padding:14px var(--gl-head-pad) 12px;
}

/* --- brand --- */
.gl-head__brand{
  display:inline-flex;
  align-items:center;
  gap:var(--gl-mark-gap);
  text-decoration:none;
  min-width:0;
}
.gl-head__mark{
  display:block;
  width:auto;
  max-width:none;
  height:var(--gl-mark-h);
  flex:none;
}
.gl-head__word{
  font-weight:600;
  font-size:var(--gl-fs-nav);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gl-black);
  white-space:nowrap;
}

/* --- top-level items --- */
.gl-head__slot{ display:flex; align-items:center; min-height:var(--gl-mark-h); }
.gl-head__trigger,
.gl-head__link,
.gl-head__cart{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:var(--gl-fs-nav);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gl-black);
  text-decoration:none;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  line-height:1.1;
}
/* Storefront's global button rule paints every <button> with a dark fill. Its
   parent stylesheet loads after the child's, so this needs !important rather
   than specificity — same treatment .menu-toggle already needs. */
.gl-head__trigger,
.gl-head__trigger:hover,
.gl-head__trigger:focus{
  background:transparent !important;
  color:var(--gl-black) !important;
  border:0 !important;
  padding:0 !important;
  text-shadow:none !important;
  font-weight:600 !important;
}

.gl-head__trigger:hover,
.gl-head__link:hover,
.gl-head__cart:hover{ color:var(--gl-gray) !important; }
.gl-head__trigger:focus-visible,
.gl-head__link:focus-visible,
.gl-head__cart:focus-visible{ outline:2px solid var(--gl-black); outline-offset:4px; }

/* --- right cluster: cart, language stacked beneath --- */
.gl-head__end{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  min-height:var(--gl-mark-h);
  justify-content:center;
}
.gl-head__lang{ font-size:var(--gl-fs-micro); }

/* --- panel --- */
.gl-head__panel{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:var(--gl-white);
  border-top:1px solid var(--gl-line);
  border-bottom:1px solid var(--gl-line);
  z-index:120;
  /* visibility (not display or [hidden]) so the panel can transition, while
     still being pulled out of the accessibility tree and tab order when shut. */
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.gl-head.is-open .gl-head__panel{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}
.gl-head__panel-grid{
  display:grid;
  /* First two tracks are measured from the live row by header-panel.js, so the
     catalog column starts exactly under "Shop" even though the row's positions
     are content-dependent. Equal thirds is the no-JS fallback. */
  grid-template-columns:var(--gl-panel-c1,1fr) var(--gl-panel-c2,1fr) 1fr;
  /* No column gap: the measured track widths already encode the exact left edge
     of each column, so a gap would push every one of them out by its own width. */
  gap:0;
  padding:26px var(--gl-head-pad) 34px;
}
.gl-head__col{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.gl-head__panel-link{
  font-size:var(--gl-fs-nav);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-black);
  text-decoration:none;
  width:fit-content;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.gl-head__panel-link:hover,
.gl-head__panel-link:focus-visible{ border-bottom-color:var(--gl-black); }

.gl-head__search input[type="search"]{
  width:100%;
  max-width:230px;
  border:0;
  border-bottom:1px solid var(--gl-line);
  border-radius:0;
  background:transparent;
  padding:5px 0;
  font-family:'Inter',sans-serif;
  font-size:var(--gl-fs-nav);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.gl-head__search input[type="search"]:focus{
  outline:0;
  border-bottom-color:var(--gl-black);
}

@media (prefers-reduced-motion: reduce){
  .gl-head__panel{ transition:none; }
}

/* ============================================================
   MOBILE HEADER — compact bar + left slide-in drawer
   Also modelled on machtvollstudio.com's phone layout: six even
   tracks cannot survive a 375px screen, and letting the row wrap
   onto three lines spent ~110px before any content appeared. The
   reference keeps a single ~50px bar with the brand left and an
   icon cluster right, and moves the navigation into a full-height
   panel whose items are set right-aligned in large caps.
   ============================================================ */

/* Desktop: the phone cluster and the panel do not exist at all. */
.gl-head__actions,
.gl-drawer,
.gl-drawer__scrim{ display:none; }

/* Scroll lock for the open drawer.
   Only <body> is locked, never <html>. body's overflow propagates up to the
   viewport, which stops the page scrolling without making any element a scroll
   container. Locking <html> instead makes *it* the scroller, and the sticky
   header then resolves top:46px against a box that already starts 46px down —
   WordPress's admin-bar margin — so the bar jumps down by its own offset the
   moment the drawer opens. Outside the media query on purpose: the class is
   only ever set by the toggle, which exists only on phones — and confined to
   that breakpoint anyway, so a class left behind by a viewport that grew past
   the drawer can never lock a desktop page that has no way to unlock it. */
@media (max-width:782px){
  html.gl-drawer-lock body{ overflow:hidden; }
}

@media (max-width:782px){

  /* The row items are only hidden once .gl-js confirms the toggle is running.
     Without JS the burger does nothing, so the old wrapping row stays — every
     link is still reachable, just laid out the way it was before. */
  .gl-head__row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:clamp(16px,4.6vw,30px);
    row-gap:10px;
    padding-bottom:12px;
  }
  .gl-head__brand{ flex:0 0 100%; }
  .gl-head__slot{ flex:0 0 auto; }
  .gl-head__panel-grid{ grid-template-columns:1fr 1fr; }
  .gl-head__col[aria-hidden="true"]{ display:none; }

  /* #masthead has asked to be sticky since the theme was written, but it never
     was: Storefront guards against horizontal overflow with
     `.site{overflow-x:hidden}`, and `hidden` on one axis forces the other to
     `auto` — which quietly makes #page a scroll container. A sticky element
     sticks inside its nearest scrolling ancestor, and #page is exactly as tall
     as its content and so never scrolls, so the header just rode away with the
     page. `clip` states the same overflow intent without creating a scroll box.
     Scoped to phones: this is the breakpoint the compact bar was designed for,
     and the desktop header is left exactly as it has been behaving.
     Browsers without overflow:clip also keep today's behaviour. */
  .gl-js .site{
    overflow-x:clip;
    overflow-y:visible;
  }

  /* Only the stacking context is new here — the sticky itself comes from the
     base rule above. The bar has to out-rank the drawer it contains so the
     close mark stays put exactly where the burger was.

     This also re-asserts sticky over the short-viewport guard further up, which
     released the header on landscape phones because the old two-row masthead
     was 676px tall there. At 50px that reasoning no longer applies. */
  .gl-js #masthead{
    position:sticky;
    /* top:0 for logged-in users too: WordPress only *fixes* the admin bar above
       783px, and at this width it is absolutely positioned and scrolls away with
       the page — so reserving 46px for it would leave a band of content sliding
       past in the gap above the header. */
    top:0;
    z-index:240;
  }

  .gl-js .gl-head__row{
    flex-wrap:nowrap;
    justify-content:space-between;
    min-height:50px;
    /* The icon has 10px of slack inside its 44px target, so the row is pulled in
       by that much on the right — the glyph then lands on the same margin as the
       brand instead of floating short of it, while the target stays full size. */
    padding:3px max(4px,calc(var(--gl-head-pad) - 10px)) 3px var(--gl-head-pad);
    /* Opaque and above the drawer: the panel scrolls under the bar, and the
       close button stays put exactly where the burger was. */
    position:relative;
    z-index:3;
    background:var(--gl-white);
  }
  .gl-js .gl-head__slot,
  .gl-js .gl-head__panel{ display:none; }

  .gl-js .gl-head__brand{ flex:0 1 auto; }
  .gl-js .gl-head__mark{ height:26px; }
  /* The mark is pinned to 26px here rather than following --gl-mark-h, so the
     wordmark has to be re-derived from that number or the lockup's two halves
     stop tracking each other on phones. font-size is the no-mask fallback. */
  .gl-js .gl-head__word{ --gl-word-h:calc(26px * 1.15); font-size:var(--gl-fs-nav); }

  /* --- icon cluster --- */
  .gl-js .gl-head__actions{
    display:flex;
    align-items:center;
    flex:none;
  }
  /* Storefront paints every <button> as a dark filled pill, and its parent
     stylesheet loads after the child's — so these need !important rather than
     specificity, the same treatment .gl-head__trigger already needs. */
  .gl-head__action,
  .gl-head__burger{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:44px !important;
    height:44px !important;
    min-width:0;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    color:var(--gl-icon) !important;
    box-shadow:none !important;
    text-shadow:none !important;
    line-height:1 !important;
    cursor:pointer;
    position:relative;
  }
  .gl-head__burger:hover,
  .gl-head__burger:focus{
    background:none !important;
    color:var(--gl-icon) !important;
    border:0 !important;
  }
  .gl-head__action svg{ width:24px; height:24px; display:block; }
  .gl-head__burger svg{ width:22px; height:auto; display:block; }
  .gl-head__action:focus-visible,
  .gl-head__burger:focus-visible{ outline:2px solid var(--gl-black); outline-offset:-4px; }

  .gl-head__badge{
    position:absolute;
    top:4px;
    right:4px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--gl-black);
    color:var(--gl-white);
    font-size:11px;
    line-height:18px;
    text-align:center;
    font-weight:600;
    letter-spacing:0;
  }

  /* One button, two glyphs: the burger becomes the close mark in place. */
  .gl-head__burger-close{ display:none; }
  .gl-head.is-drawer-open .gl-head__burger-open{ display:none; }
  .gl-head.is-drawer-open .gl-head__burger-close{ display:block; }

  /* --- drawer --- */
  .gl-js .gl-drawer{
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:min(95vw,420px);
    height:100dvh;
    z-index:2;
    background:var(--gl-white);
    overflow-y:auto;
    /* Keeps a flick at the end of the list from scrolling the page behind. */
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    /* visibility rather than display so the slide can transition, while the
       links stay out of the tab order and the accessibility tree when shut. */
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .24s ease, visibility 0s linear .24s;
  }
  .gl-head.is-drawer-open .gl-drawer{
    transform:none;
    visibility:visible;
    transition:transform .24s ease, visibility 0s;
  }

  .gl-js .gl-drawer__scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:1;
    background:rgba(0,0,0,.15);
    opacity:0;
    visibility:hidden;
    transition:opacity .24s ease, visibility 0s linear .24s;
  }
  .gl-head.is-drawer-open .gl-drawer__scrim{
    opacity:1;
    visibility:visible;
    transition:opacity .24s ease, visibility 0s;
  }

  .gl-drawer__menu{
    list-style:none;
    margin:0;
    /* Clears the bar sitting above it, so the first item starts just below the
       close mark rather than behind it. How far down the bar actually sits
       depends on the admin bar and on how far the page has been scrolled when
       the drawer opens, so the toggle measures it and writes --gl-drawer-top;
       the literal is only the value for a bare, unscrolled header. */
    padding:calc(var(--gl-drawer-top,50px) + 16px) var(--gl-head-pad) 48px;
    display:flex;
    flex-direction:column;
  }

  .gl-drawer__row{
    /* Staggered entrance, one step per item, driven by --gl-i from the markup. */
    opacity:0;
    transform:translateX(-16px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .gl-head.is-drawer-open .gl-drawer__row{
    opacity:1;
    transform:none;
    transition-delay:calc(var(--gl-i,0) * 45ms);
  }

  .gl-drawer__group{ display:block; }
  .gl-drawer__group > summary{ list-style:none; cursor:pointer; }
  .gl-drawer__group > summary::-webkit-details-marker{ display:none; }

  .gl-drawer__item{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    padding:6px 0;
    font-weight:600;
    font-size:clamp(19px,5.2vw,26px);
    line-height:1.35;
    letter-spacing:.2em;
    text-transform:uppercase;
    text-align:right;
    color:var(--gl-black);
    text-decoration:none;
  }
  /* Letter-spacing is painted after the last glyph too, so right-aligned caps
     stop short of the margin by one space. Pulling it back restores the edge. */
  .gl-drawer__item > span:first-child{ margin-right:-.2em; }
  .gl-drawer__item:hover{ color:var(--gl-gray); }

  .gl-drawer__sign{
    flex:none;
    display:flex;
    align-items:center;
    color:var(--gl-icon);
  }
  .gl-drawer__sign svg{ width:14px; height:14px; display:block; }
  /* Collapsing the upright stroke turns the plus into a minus. */
  .gl-sign__v{
    transform-origin:center;
    transition:transform .2s ease, opacity .2s ease;
  }
  .gl-drawer__group[open] .gl-sign__v{ transform:scaleY(0); opacity:0; }

  .gl-drawer__sub{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
    padding:8px 0 14px;
  }
  .gl-drawer__child{
    font-size:clamp(11px,3vw,13px);
    line-height:1.5;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-align:right;
    color:var(--gl-gray-dark);
    text-decoration:none;
    padding:4px 0;
    margin-right:-.16em;
  }
  .gl-drawer__child.is-current,
  .gl-drawer__child:hover{ color:var(--gl-black); }

  /* Held short of the full width: a rule running the whole panel would cut
     across the right-aligned column and read as a divider rather than a field. */
  .gl-drawer__search{ width:min(100%,220px); margin-top:8px; }
  .gl-drawer__search input[type="search"]{
    width:100%;
    border:0;
    border-bottom:1px solid var(--gl-line);
    border-radius:0;
    background:transparent;
    padding:6px 0;
    font-family:'Inter',sans-serif;
    font-size:clamp(11px,3vw,13px);
    letter-spacing:.12em;
    text-transform:uppercase;
    text-align:right;
  }
  .gl-drawer__search input[type="search"]:focus{
    outline:0;
    border-bottom-color:var(--gl-black);
  }
}

@media (max-width:782px) and (prefers-reduced-motion: reduce){
  .gl-drawer,
  .gl-drawer__scrim,
  .gl-drawer__row,
  .gl-sign__v{ transition:none; }
  .gl-head.is-drawer-open .gl-drawer__row{ transition-delay:0s; }
}


/* --- Archiv --- */
.gl-archive{ padding-top:clamp(28px,5vw,64px); }
.gl-archive__head{
  max-width:56ch;
  margin:0 auto clamp(26px,4vw,48px);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.gl-archive__title{
  margin:0;
  font-size:var(--gl-fs-nav) !important;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.gl-archive__note{
  margin:0;
  font-size:var(--gl-fs-body);
  line-height:1.6;
  color:var(--gl-gray-dark);
}
.gl-archive__empty{ text-align:center; color:var(--gl-gray); }

/* Archived pieces are a record, not stock: greyed back, and lifting to full
   strength on hover so the images stay browsable. */
.gl-archive__item .gl-media{ filter:grayscale(1); opacity:.72; transition:opacity .3s ease, filter .3s ease; }
.gl-archive__item:hover .gl-media{ filter:grayscale(0); opacity:1; }
.gl-archive__item .woocommerce-loop-product__link{
  grid-template-areas:
    "image image"
    "title status" !important;
}
.gl-archive__status{
  grid-area:status;
  justify-self:end;
  align-self:baseline;
  font-size:var(--gl-fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  padding:16px 20px 18px 0;
  white-space:nowrap;
}

/* --- single-row header: uniform rhythm --- */
.gl-head__row > *{ min-width:0; }
.gl-head__slot{ min-height:0; }
/* The switcher is an inline row item here, not the absolutely placed element
   the older header used. */
#masthead .gl-head__slot .glasche-lang{
  position:static;
  right:auto;
  bottom:auto;
  justify-content:flex-start;
}

/* ============================================================================
   EMPTY CART
   WooCommerce Blocks illustrates this state: an 80px black frowning face above a
   sentence-case exclamation, a dotted rule, and a 32px recommendation heading —
   the largest type on the site, nearly twice the page title directly above it.
   The theme already has an empty state (.gl-archive__empty): a quiet grey line,
   centred, no picture. The cart follows it, and the recommendation heading drops
   into the same tracked-caps section register as the rest of the shop.
   ========================================================================== */
/* The face is a mask-image on ::before, so it survives any rule on the element. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{ display:none !important; }

.wc-block-cart__empty-cart__title{
  font-size:var(--gl-fs-body) !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  line-height:1.6;
  color:var(--gl-gray) !important;
  text-align:center;
  margin:clamp(6px,1vw,16px) 0 0 !important;
}

/* Guest prompt (see glasche's render_block filter). Set below the message it
   qualifies: the sentence stays grey with it, and only the link carries ink. */
.gl-cart-empty__login{
  margin:clamp(10px,1.2vw,16px) 0 0 !important;
  text-align:center;
  font-size:var(--gl-fs-nav);
  line-height:1.6;
  color:var(--gl-gray);
}
.gl-cart-empty__login a{
  color:var(--gl-black);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.gl-cart-empty__login a:hover{ color:var(--gl-gray); }

/* The grid draws its own full-bleed hairline along its top edge, which is already
   the break between the message and the recommendations — the dotted rule was a
   second divider on top of it, in a decorative style the theme uses nowhere. */
.wp-block-woocommerce-empty-cart-block > .wp-block-separator{ display:none !important; }

/* Same register as the other section titles (.cross-sells h2 and friends), and
   spaced to belong to the grid beneath it rather than to the message above. */
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title){
  font-size:var(--gl-fs-nav) !important;
  font-weight:600 !important;
  letter-spacing:.24em !important;
  text-indent:.24em;          /* optical centring for the tracked caps */
  text-transform:uppercase !important;
  text-align:center !important;
  color:var(--gl-black) !important;
  margin:var(--gl-section) 0 clamp(16px,1.8vw,26px) !important;
}

/* ============================================================================
   ACCOUNT — login, registration, and the account area itself
   The screens behind the customer's own door were the last ones still wearing
   WooCommerce's default furniture: two side-by-side form columns with framed
   boxes, a 30% sidebar of four links beside the one table the page exists for,
   and a table that turned into an unreadable grid on a phone. They are rebuilt
   here on the same parts as the catalog — hairlines, tracked caps, no fills.
   ========================================================================== */

/* ---- login / registration card ---- */

/* Supersedes the narrow-measure rule further up: the card is now the element that
   holds the measure, and the forms inside it fill it. Same specificity, later file
   position, which is what decides it. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.gl-auth{
  max-width:31rem;
  margin:0 auto;
  padding-bottom:var(--gl-section);
}

/* Clipped, not display:none — a hidden input takes no focus, and the tabs would then
   be reachable with a mouse only. */
.gl-auth__radio{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.gl-auth__tabs{
  display:flex;
  gap:clamp(18px,3vw,34px);
  justify-content:center;
  border-bottom:1px solid var(--gl-line);
}
.gl-auth__tab{
  font-size:var(--gl-fs-nav);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  cursor:pointer;
  padding:0 2px 12px;
  /* Rides over the container's own rule so the active underline replaces that
     segment of it rather than doubling it. */
  margin-bottom:-1px;
  border-bottom:1px solid transparent;
  transition:color .18s ease;
}
.gl-auth__tab:hover{ color:var(--gl-black); }
#gl-auth-login:checked ~ .gl-auth__tabs [for="gl-auth-login"],
#gl-auth-register:checked ~ .gl-auth__tabs [for="gl-auth-register"]{
  color:var(--gl-black);
  border-bottom-color:var(--gl-black);
}
/* The focus ring belongs on the label, since the input it would otherwise draw
   around is one clipped pixel. */
#gl-auth-login:focus-visible ~ .gl-auth__tabs [for="gl-auth-login"],
#gl-auth-register:focus-visible ~ .gl-auth__tabs [for="gl-auth-register"]{
  outline:1px solid var(--gl-black);
  outline-offset:4px;
}

.gl-auth__panel{ display:none; }
#gl-auth-login:checked ~ .gl-auth__panel--login,
#gl-auth-register:checked ~ .gl-auth__panel--register,
.gl-auth--login-only .gl-auth__panel--login{ display:block; }

.gl-auth__heading{
  font-size:var(--gl-fs-nav) !important;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 6px;
}

/* The card already draws the rule under the tabs; the template's own top border
   would be a second one 20px below it. */
.gl-auth .woocommerce-form-login,
.gl-auth .woocommerce-form-register,
.woocommerce .gl-auth form.login,
.woocommerce .gl-auth form.register{
  border:0 !important;
  padding:clamp(20px,2.6vw,30px) 0 0 !important;
  margin:0 !important;
}
.gl-auth .form-row{ margin-bottom:clamp(14px,1.6vw,20px); }

.gl-auth__note{
  margin:clamp(20px,2.6vw,30px) 0 0;
  font-size:var(--gl-fs-body);
  line-height:1.65;
  color:var(--gl-gray-dark);
}
/* Inside a form the note is an intro to the fields below it rather than a caption on
   the panel above, so the margin moves to the other side. */
.gl-auth__form .gl-auth__note{ margin:0 0 clamp(20px,2.6vw,30px); }

/* Lost-password and reset-password are served straight from the account page with no
   card around them, so they need the measure the login card would have given them. */
.woocommerce-account .woocommerce-ResetPassword{
  max-width:31rem;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:var(--gl-section);
}

/* Checkbox and button share a baseline instead of stacking, which is what let the
   login card run three rows longer than the fields it contains. */
.gl-auth__submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 20px;
  margin-top:clamp(18px,2.4vw,26px) !important;
}
.gl-auth__submit-row .button{ margin:0; }

.gl-auth .woocommerce-LostPassword{
  margin:16px 0 0;
  text-align:center;
}

/* The third door out of the login card: back to the checkout without an account.
   Set apart from the card so it does not read as a third tab. */
.gl-auth__guest{
  margin:clamp(24px,3vw,34px) 0 0;
  padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--gl-line);
  text-align:center;
}
.gl-auth__guest a{
  font-size:var(--gl-fs-nav);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  text-decoration:none;
  border-bottom:1px solid var(--gl-line);
  padding-bottom:2px;
}
.gl-auth__guest a:hover{ color:var(--gl-black); border-bottom-color:var(--gl-black); }

/* ---- the account area ---- */

/* Storefront floats the navigation into a 23% sidebar and the content into the rest.
   With four links in the sidebar that split spent a quarter of the page on a list and
   squeezed the order table — which is the page — into the remainder. Stack them. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float:none;
  width:100%;
  margin:0;
}
.gl-account{
  max-width:60rem;
  margin:0 auto;
  padding-bottom:var(--gl-section);
}
.gl-account__who{
  margin:0 0 clamp(14px,1.8vw,20px);
  text-align:center;
  font-size:var(--gl-fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
.gl-account__email{
  color:var(--gl-black);
  text-transform:none;
  letter-spacing:.04em;
}

/* Navigation as the catalog's filter row: centred, tracked caps, active underlined.
   Overrides the vertical list styling in the CHECKOUT + ACCOUNT block above. */
.gl-account__nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--gl-line);
  margin-bottom:clamp(24px,3vw,38px);
}
/* Storefront draws the sidebar version of this list as stacked rows, each with its
   own 5%-black rule and one across the top. In a single centred row those become a
   hairline above the tabs and a second one under each label, three parallel lines
   around one word — so the list keeps only the rule the nav itself carries.

   Four class names deep on each side because WooCommerce's own sheet reaches these
   through `.hentry .entry-content …`, which outranks anything shorter. */
.woocommerce-account .gl-account .gl-account__nav.woocommerce-MyAccount-navigation ul,
.woocommerce-account .gl-account .gl-account__nav ul li.woocommerce-MyAccount-navigation-link{ border:0; }
.gl-account__nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(16px,2.6vw,32px);
  list-style:none;
  margin:0;
  padding:0;
}
.gl-account__nav ul li{ margin:0; }
.woocommerce-account .gl-account__nav ul li a{
  display:block;
  padding:0 2px 12px;
  font-size:var(--gl-fs-nav);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  text-decoration:none;
  border:0;
  border-bottom:1px solid transparent;
  margin-bottom:-1px;
  transition:color .18s ease;
}
/* Storefront hangs a Font Awesome glyph off each account link — a basket, a house, a
   person. They were legible as bullets down a sidebar; in a row of tracked caps they
   are three unrelated pictograms sitting between the words. */
.woocommerce-account .gl-account__nav ul li a::before,
.woocommerce-account .gl-account__nav ul li a::after{ content:none !important; }
.woocommerce-account .gl-account__nav ul li a:hover{ color:var(--gl-black); }
.woocommerce-account .gl-account__nav ul li.is-active a{
  color:var(--gl-black);
  border-bottom-color:var(--gl-black);
}

/* Logout is not a section of the account, so it sits outside the row rather than
   fourth in it — one position further from the tab a customer actually wanted. */
/* Three class names deep because Storefront underlines every link inside
   .entry-content, and a single class cannot outrank that selector. */
.woocommerce-account .gl-account__nav .gl-account__logout{
  position:absolute;
  right:0;
  bottom:12px;
  font-size:var(--gl-fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-silver);
  text-decoration:none;
}
.woocommerce-account .gl-account__nav .gl-account__logout:hover{ color:var(--gl-black); }
/* No room beside the tabs on a phone; it goes under them, still set apart. */
@media (max-width:600px){
  .gl-account__nav{ flex-direction:column; gap:4px; }
  .woocommerce-account .gl-account__nav .gl-account__logout{
    position:static;
    padding:0 0 12px;
  }

  /* Storefront floats the notice's call to action right, and WooCommerce writes that
     button *before* the sentence in the markup — so once the float collapses on a
     narrow screen, both of the account's standing notices read as a button with an
     afterthought underneath. The column puts them back in reading order; the text is
     an anonymous flex item and keeps the default order of 0, so only the button needs
     moving. Scoped to the account content: the same float behaves elsewhere, and this
     is the page that is nothing but notices for a new customer. */
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button{
    order:1;
    float:none !important;
    width:100%;
    margin:14px 0 0 !important;
    box-sizing:border-box;
    text-align:center;
  }
}

.gl-account__content{ font-size:var(--gl-fs-body); }
.woocommerce-account .gl-account__content p{ line-height:1.7; }
.gl-account__hint{
  display:block;
  margin-top:4px;
  font-size:var(--gl-fs-micro);
  letter-spacing:.04em;
  text-transform:none;
  color:var(--gl-gray);
  font-style:normal;
}
label .gl-account__hint{ display:inline; margin:0; }

/* A read-only field, drawn as one: the address on the line where a value goes, and
   the reason it cannot be typed over directly underneath it. Giving it the input's
   hairline would have promised an input. */
.gl-account__static{
  margin-bottom:clamp(18px,2.2vw,26px);
  padding-bottom:clamp(14px,1.8vw,20px);
  border-bottom:1px solid var(--gl-line);
}
.gl-account__static-label{
  display:block;
  font-size:var(--gl-fs-micro);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  margin-bottom:4px;
}
.gl-account__static-value{
  display:block;
  font-size:var(--gl-fs-body);
  color:var(--gl-ink);
  letter-spacing:.03em;
  padding:.35em 0;
}
.gl-account__static-note{
  display:block;
  margin-top:2px;
  font-size:var(--gl-fs-micro);
  line-height:1.7;
  color:var(--gl-gray);
  max-width:52ch;
}
.gl-account__static-note a{ color:var(--gl-black); text-decoration:underline; text-underline-offset:2px; }

.gl-account__fieldset{
  margin:clamp(26px,3vw,38px) 0 0;
  padding:clamp(20px,2.4vw,28px) 0 0;
  border:0;
  border-top:1px solid var(--gl-line);
}
.gl-account__fieldset legend{
  padding:0;
  font-size:var(--gl-fs-nav);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gl-black);
}
.gl-account__submit-row{ margin-top:clamp(24px,3vw,34px); }
.gl-account__form .form-row{ margin-bottom:clamp(14px,1.6vw,20px); }

/* ---- orders table ---- */

/* Hairline rows, no zebra, no cell borders — the same rule the catalog grid is drawn
   with, so the two pages read as one shop. */
.woocommerce-account .woocommerce-orders-table{
  width:100%;
  border:0;
  border-collapse:collapse;
  margin:0;
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td{
  border:0;
  border-bottom:1px solid var(--gl-line);
  padding:16px 12px 16px 0;
  background:transparent;
  text-align:left;
  vertical-align:middle;
  font-size:var(--gl-fs-body);
}
.woocommerce-account .woocommerce-orders-table thead th{
  padding-top:0;
  font-size:var(--gl-fs-micro);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a{
  color:var(--gl-black);
  text-decoration:none;
  border-bottom:1px solid var(--gl-line);
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover{ border-bottom-color:var(--gl-black); }
/* The row already links to the order through its number; a filled black slab per row
   turns a quiet list into a column of buttons. Left-aligned with the column heading —
   Storefront left-aligns every cell in a shop_table and the header would otherwise sit
   over an empty stretch with its actions pushed to the far edge. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{
  background:transparent !important;
  color:var(--gl-gray) !important;
  border:0 !important;
  border-bottom:1px solid var(--gl-line) !important;
  padding:2px 0 !important;
  margin:0 20px 0 0;
  font-size:var(--gl-fs-micro) !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover{
  color:var(--gl-black) !important;
  border-bottom-color:var(--gl-black) !important;
}

/* Below the width where five columns can hold their labels, each order becomes a
   block with its column name in front of the value. Storefront ships a version of
   this via shop_table_responsive; it keeps the table borders and the striping, both
   of which are the wrong furniture here. */
@media (max-width:768px){
  .woocommerce-account .woocommerce-orders-table thead{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
  }
  .woocommerce-account .woocommerce-orders-table,
  .woocommerce-account .woocommerce-orders-table tbody,
  .woocommerce-account .woocommerce-orders-table tr,
  .woocommerce-account .woocommerce-orders-table th,
  .woocommerce-account .woocommerce-orders-table td{
    display:block;
    width:auto;
  }
  .woocommerce-account .woocommerce-orders-table tr{
    padding:clamp(14px,3vw,20px) 0;
    border-bottom:1px solid var(--gl-line);
  }
  .woocommerce-account .woocommerce-orders-table th,
  .woocommerce-account .woocommerce-orders-table td{
    border:0;
    padding:3px 0;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px 14px;
  }
  /* A fixed label column rather than space-between: the total cell is "48,00 €" plus
     " für 2 Artikel" and the actions cell is two links, and pushing to both edges
     tore each of those apart into two things that looked unrelated. A common left
     edge for the values holds the card together instead. */
  .woocommerce-account .woocommerce-orders-table td::before,
  .woocommerce-account .woocommerce-orders-table th::before{
    content:attr(data-title);
    flex:0 0 auto;
    min-width:8.5em;
    font-size:var(--gl-fs-micro);
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gl-gray);
  }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button{ margin:0; }
}

/* The empty-orders state and the "confirm your address" prompt are both
   .woocommerce-info, and the NOTICES block above already styles that class site-wide
   with !important. Restyling them here would only half-win — the padding would come
   from this rule and the fill from that one — so they are deliberately left alone and
   read as every other notice on the shop does. */

/* ---- a single order ---- */

/* The order view is the one account screen still wearing WooCommerce's furniture:
   striped rows, a purple product link and an italic address. Same hairline treatment
   as the order list, so opening an order does not look like leaving the shop. */
.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account .woocommerce-table--order-details tbody tr,
.woocommerce-account .woocommerce-table--order-details tfoot tr{
  background:transparent;
  border:0;
}
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td{
  background:transparent !important;
  border:0;
  border-bottom:1px solid var(--gl-line);
  padding:14px 12px 14px 0;
  font-size:var(--gl-fs-body);
}
.woocommerce-account .woocommerce-table--order-details thead th{
  padding-top:0;
  font-size:var(--gl-fs-micro);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
.woocommerce-account .woocommerce-table--order-details tfoot th{
  font-weight:500;
  color:var(--gl-gray-dark);
}
.woocommerce-account .woocommerce-table--order-details a{
  color:var(--gl-black);
  text-decoration:none;
  border-bottom:1px solid var(--gl-line);
}
.woocommerce-account .woocommerce-table--order-details a:hover{ border-bottom-color:var(--gl-black); }
/* …except the invoice action, which is a real button and stays one. */
.woocommerce-account .woocommerce-table--order-details a.button{ border-bottom:0; }

.woocommerce-account .woocommerce-customer-details address{
  font-style:normal;
  line-height:1.8;
  border:0;
  padding:0;
  border-radius:0;
  color:var(--gl-gray-dark);
}

/* ---- addresses ---- */
.woocommerce-account .woocommerce-Addresses{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(20px,3vw,40px);
  margin:0;
}
/* WooCommerce sizes these as floated 41%-wide columns of a two-column set. Inside a
   grid the float is inert but the percentage is not — it shrank each address to 41% of
   its own track, so the header could not fit its title and its edit link on one line.
   Four class names to outrank `.col2-set.addresses .col-1`. */
.woocommerce-account .gl-account .woocommerce-Addresses .woocommerce-Address{ width:auto; float:none; }
.woocommerce-account .woocommerce-Address address{
  font-style:normal;
  line-height:1.8;
  color:var(--gl-gray-dark);
}
/* Title and its edit link on one line, split to the two edges, over the hairline that
   opens the block — the same header shape the account tabs use. */
/* Same trap as the catalog toolbar above: Storefront clearfixes .title with
   ::before/::after, and in a flex row those become two extra items that space-between
   feeds two of its three gaps — indenting the heading and stopping the link short of
   the right edge by an identical amount. */
.woocommerce-account .woocommerce-Addresses header.woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Addresses header.woocommerce-Address-title::after{ display:none; }
.woocommerce-account .woocommerce-Address-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--gl-line);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  margin:0;
  font-size:var(--gl-fs-nav) !important;
  font-weight:600 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
}
/* Storefront pushes the link text off-screen and paints a Font Awesome pencil in its
   place. The template now supplies a short visible label, so the glyph and the
   off-screen trick both have to go or the label lands 9999px to the left. */
.woocommerce-account .woocommerce-Address-title .edit{
  text-indent:0;
  overflow:visible;
  width:auto;
  height:auto;
  flex:none;
  font-size:var(--gl-fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  text-decoration:none;
  /* No rule of its own: the header already draws one directly beneath it, and two
     hairlines a pixel apart read as a rendering fault rather than as emphasis. */
  border:0;
}
.woocommerce-account .woocommerce-Address-title .edit::before,
.woocommerce-account .woocommerce-Address-title .edit::after{ content:none !important; }
.woocommerce-account .woocommerce-Address-title .edit:hover{ color:var(--gl-black); }
.woocommerce-account .gl-account__lead{ margin-bottom:clamp(22px,3vw,32px); color:var(--gl-gray-dark); }

/* ============================================================================
   CHECKOUT ENTRY
   The panel that asks, once, whether the shopper wants an account or wants to be
   left alone. It stands where the checkout form will be, so it is sized to be read
   in one glance rather than to fill the page.
   ========================================================================== */
.gl-entry{
  max-width:52rem;
  margin:0 auto clamp(28px,4vw,52px);
  padding:0 var(--gl-gutter);
}
.gl-entry__title{
  font-size:var(--gl-fs-nav) !important;
  font-weight:600;
  letter-spacing:.24em;
  text-indent:.24em;              /* optical centring for the tracked caps */
  text-transform:uppercase;
  text-align:center;
  margin:0 0 clamp(22px,3vw,34px);
}
.gl-entry__options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(22px,3vw,44px);
}
.gl-entry__option{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--gl-line);
}
.gl-entry__option-title{
  font-size:var(--gl-fs-nav) !important;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 8px;
}
.gl-entry__option-text{
  margin:0 0 clamp(16px,2vw,22px);
  font-size:var(--gl-fs-body);
  line-height:1.7;
  color:var(--gl-gray-dark);
  max-width:34ch;
}
/* Pushes the actions to a common baseline across both columns, so the two buttons
   line up even when one description wraps to a third line. */
.gl-entry__actions{
  margin-top:auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 22px;
}
.gl-entry__button{ margin:0; }
.gl-entry__link{
  font-size:var(--gl-fs-nav);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gl-gray);
  text-decoration:none;
  border-bottom:1px solid var(--gl-line);
  padding-bottom:2px;
}
.gl-entry__link:hover{ color:var(--gl-black); border-bottom-color:var(--gl-black); }

/* What is left of the panel after a choice: one line, so the shopper who picked
   "guest" by reflex can still change their mind without hunting for a link. */
.gl-entry__chosen{
  margin:0;
  padding-bottom:clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--gl-line);
  text-align:center;
  font-size:var(--gl-fs-nav);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gl-gray);
}
.gl-entry__chosen a{
  color:var(--gl-black);
  text-decoration:none;
  border-bottom:1px solid var(--gl-line);
  margin-left:10px;
}
.gl-entry__chosen a:hover{ border-bottom-color:var(--gl-black); }

/* The gate itself. Scoped to html.gl-js so a browser that never runs the script is
   never shown a checkout it cannot un-hide, and to .gl-has-entry so no other page
   carrying a checkout block is affected. The `hidden` attribute is what keeps the
   collapsed line out of the way until then — no second rule needed for it.

   Written as :not(.gl-entry-done) rather than as a hide/show pair on purpose: the
   checkout block is WooCommerce's own sidebar-layout flex container, and "showing"
   it again would mean guessing that display value and hard-coding it here. Ceasing
   to hide it cannot guess wrong. */
.gl-js:not(.gl-entry-done) body.gl-has-entry .wp-block-woocommerce-checkout{ display:none; }
.gl-js.gl-entry-done body.gl-has-entry .gl-entry__ask{ display:none; }