/* The product page (studio #64). Nothing of its own: every rule below is a component of heinzschiebel.com
   on the site's tokens - the case layer's words (eyebrow, name, lines, doors: case.css), the doors and
   their group hover (work.css, the closing), the about's ink on paper, the thaw. Where the site's
   component stands on the dark, here it stands on the paper, so its white is the ink; that is the only
   translation. */
.woocommerce-product-gallery,.product_title,.reset_variations,table.variations,.woocommerce-variation-price,.woocommerce-variation,.woocommerce-tabs,.related,.hero-section,.woocommerce-product-details__short-description,.product_meta,.ct-product-divider{display:none !important}
.product-entry-wrapper{display:block !important;max-width:none !important;width:auto !important;padding:0 !important;margin:0 !important}
.summary{width:auto !important;max-width:none !important;margin:0 !important}
#main-container,.site-main{padding:0 !important;margin:0 !important}
#main [class*="ct-container"]{max-width:none !important;width:100% !important;padding:0 !important}
body{color:var(--text-on-paper);font-family:var(--font-body)}

.hsp-stage{display:grid;grid-template-columns:50vw minmax(0,1fr);min-height:100vh;min-height:100dvh}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* the photograph is one thing on this page and on the checkout: it stays while the rest changes */
.hsp-photo{view-transition-name:hs-photo;position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--ground-dark)}
.hsp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.82)}
.hsp-side{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hero-rule-top) + var(--section-air)) var(--about-indent) var(--section-air) var(--case-column-gap);max-width:calc(var(--case-essay-width) + var(--about-indent) + var(--case-column-gap))}
/* .case-eyebrow, .case-name, .case-line */
.hsp-eyebrow{font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);line-height:var(--eyebrow-line-height);text-transform:uppercase;
  color:rgb(from var(--text-on-paper) r g b / var(--client-name-alpha));margin:0 0 var(--case-eyebrow-gap)}
.hsp-name{color:inherit !important;font-family:var(--closing-headline-font);font-weight:var(--closing-headline-weight);font-size:var(--closing-headline-size);line-height:var(--closing-headline-line-height);letter-spacing:0;margin:0 0 var(--case-name-gap)}
.hsp-line{font-size:var(--body-default-size);line-height:var(--body-default-line-height);font-weight:var(--body-default-weight);margin:0}
.hsp-line + .hsp-line{margin-top:var(--case-line-gap)}

/* the hours are a door: words with their hairline, the price at the line's other end */
.hsp-hours{position:relative;z-index:10;margin:var(--case-doors-air) 0 0}
.hsp-hours-line{all:unset;position:relative;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;width:100%;padding-bottom:var(--door-line-gap);
  font-family:var(--font-body) !important;font-size:var(--body-default-size);line-height:var(--body-default-line-height);font-weight:var(--body-default-weight);
  border-bottom:var(--hairline) solid rgb(from var(--text-on-paper) r g b / var(--door-line-alpha))}
.hsp-hours-line .hsp-amount::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.7em;border-right:var(--hairline) solid currentColor;border-bottom:var(--hairline) solid currentColor;
  transform:translateY(-.22em) rotate(45deg)}
/* the twin select carries the keyboard's focus but opacity:0 hides any ring drawn on it, so the ring
   is drawn on the line it sits over instead - only while the select itself is keyboard-focused */
.hsp-hours-line:has(.hsp-twin:focus-visible){outline:2px solid var(--accent-fire);outline-offset:6px}
@supports not selector(:has(a)){.hsp-hours-line:focus-within{outline:2px solid var(--accent-fire);outline-offset:6px}}
/* the caption under the line, in the site's small face (his word of 2026-09-19) */
.hsp-caption{margin:var(--case-line-gap) 0 0;font-size:var(--small-size);font-weight:var(--small-weight);line-height:var(--line-height-150);letter-spacing:var(--small-tracking);color:rgb(from var(--text-on-paper) r g b / var(--client-name-alpha))}
/* the system's own list: the select is there and takes the press, it is only not seen */
.hsp-twin{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;font-size:16px}
/* .doors / .door: to buy is a door, and the conversation is the one beside it */
.hsp-doors{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--doors-gap);margin-top:var(--case-doors-air)}
.hsp-doors .door,.hsp-doors .single_add_to_cart_button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-block;white-space:nowrap;
  font-family:var(--font-body) !important;font-size:var(--body-default-size) !important;line-height:var(--body-default-line-height) !important;font-weight:var(--body-default-weight) !important;color:var(--text-on-paper) !important;
  background:none !important;padding:0 0 var(--door-line-gap) !important;min-height:0 !important;border-radius:0 !important;letter-spacing:0 !important;text-transform:none !important;
  transition:opacity var(--hover-line-duration) var(--hover-line-easing),filter var(--hover-line-duration) var(--hover-line-easing),transform var(--hover-line-duration) var(--hover-line-easing)}
.hsp-doors .door::after,.hsp-doors .single_add_to_cart_button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hairline);background:rgb(from var(--text-on-paper) r g b / var(--door-line-alpha))}
.hsp-doors:has(:is(.door,.single_add_to_cart_button):hover) :is(.door,.single_add_to_cart_button){opacity:var(--doors-dim-alpha);filter:blur(var(--doors-dim-blur))}
.hsp-doors:has(:is(.door,.single_add_to_cart_button):hover) :is(.door,.single_add_to_cart_button):hover,.hsp-doors :is(.door,.single_add_to_cart_button):focus-visible{opacity:1;filter:none;transform:translateX(var(--pointer-step))}
/* all:unset above took the door's own outline with it */
.hsp-doors .door:focus-visible,.hsp-doors .single_add_to_cart_button:focus-visible{outline:2px solid var(--accent-fire) !important;outline-offset:6px !important}
.hsp-doors form.cart,.hsp-doors .product-entry-wrapper,.hsp-doors .summary,.hsp-doors .single_variation_wrap,.hsp-doors .woocommerce-variation-add-to-cart{display:contents !important}
.hsp-doors .quantity,.hsp-doors .ct-cart-actions>*:not(.single_add_to_cart_button){display:none !important}
.hsp-doors .ct-cart-actions{display:contents !important}

/* the thaw, the site's own amounts; the photograph develops under it */
@media (prefers-reduced-motion:no-preference){
  .hsp-thaw{opacity:0;filter:blur(var(--thaw-blur));transform:translateY(var(--thaw-rise));animation:hsp-thaw .9s var(--hover-line-easing) forwards;animation-delay:calc(.25s + var(--i) * .14s)}
  .hsp-photo img{animation:hsp-develop 1.8s var(--hover-line-easing) both}
  @keyframes hsp-thaw{to{opacity:1;filter:none;transform:none}}
  @keyframes hsp-develop{from{opacity:0;transform:scale(1.06);filter:brightness(.4) blur(6px)}to{opacity:1;transform:none;filter:brightness(.82)}}
}
@media (max-width:1023px) and (min-width:768px){.hsp-stage{grid-template-columns:42vw minmax(0,1fr)}}
@media (max-width:767px){
  .hsp-stage{grid-template-columns:1fr;min-height:0}
  .hsp-photo{position:relative;height:56vh;height:56dvh}
  .hsp-side{padding:var(--section-air) var(--page-margin);max-width:none}
}
/* his word of 2026-09-19: one screen, the foot in it, nothing to scroll - wherever the photograph holds
   its half. The phone keeps its stack and scrolls. */
@media (min-width:768px){
  body.hs-product .hs-head{position:fixed}
  body.hs-product .hs-foot{position:fixed;left:0;right:0;bottom:0}
  body.hs-product #main{min-height:0 !important}
  /* the photograph runs under the fixed foot, so no number has to know the foot's height; only the
     words keep clear of it, generously */
  .hsp-stage{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .hsp-photo{height:auto;position:relative}
  .hsp-side{overflow-y:auto;padding-bottom:calc(var(--section-air) + 84px)}
}