/* components.css — hand-written corrections and the parts gen-component-css.mjs cannot write from measured
   pixels (fluid sizes, JS components). Loaded after components.generated.css. Every rule names the measurement
   it reproduces (inventory/design/components.json or design-tokens.json layout notes). */


/* Footer, e-mail column: its «E» title has margin-bottom 10px on the live, the «T»/«F» titles 0
   (measured 2026-10-15 at 1366×768: e-mail lines at 40/66px from the column top). */
#footer-grid > .mail p.ftitle {
  margin-bottom: 10px;
}

/* Prefooter banner: the live darkens it (img.prefooterbanner { filter: brightness(.8) }, template stylesheet); the
   probes did not record `filter`. */
img.prefooterbanner {
  filter: brightness(0.8);
}
/* …and shows it on the home page only («img.prefooterbanner { display: none }», «.home img.prefooterbanner
   { display: block }»): the probes measured it on the home page, where it is visible */
img.prefooterbanner {
  display: none;
}
.home img.prefooterbanner {
  display: block;
}

/* Footer credit: «.copyrithdiv p { font-size: 14px !important }» on the live (measured 14px at every width); the
   template's p { font-size: 16px } is not ours, so a plain declaration is enough here. */
#footer .copyrithdiv p {
  font-size: 14px;
}

/* Mobile menu shade: a fixed full-screen layer that the live keeps hidden (visibility: hidden) and shows at 0.2
   opacity while the menu is open (Offlajn vertical menu stylesheet). The probes recorded its opacity but not its
   visibility, and its height as px of each viewport: without these lines it covers the page and takes its clicks. */
body > .sm-pusher::after {
  visibility: hidden;
  height: 100%;
}
/* Open mobile menu (Offlajn «full» mode on the live, measured open at 375×812): the page is locked and hidden under
   a white full-screen panel, the list centred vertically through an inline-block helper (.sm-overlay-win::after).
   The live's 0.2 shade stays under the white content, so it is not drawn here. */
body.sm-open {
  overflow: hidden;
}
/* as on the live: the page wrapper becomes a stacking context (z-index 99), so the navbar (z-index 1000 inside it)
   stays under the overlay, which comes later in the document */
body.sm-open > .sm-pusher {
  position: relative;
  z-index: 99;
}
body.sm-open [class^="sm-overlay-"] {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: #fff;
  overflow: hidden;
}
/* vertical centring (the live uses an inline-block helper; flex gives the same position without depending on the
   white space between the elements) */
body.sm-open .sm-overlay-win {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
body.sm-open nav[id^="off-menu_"] {
  display: block;
  width: 100%;
  z-index: 99;
}

/* ------------------------------------------------------------------------------------------------------------------
   ZOO galleries (Unite Gallery). The live's template adjusts the library's layout with these declared values (its
   stylesheet, «All rights reserved»: the values are restated here, Gate 1 Α6); the gallery component was left out
   of the generated CSS because the script lays the tiles out.
   ------------------------------------------------------------------------------------------------------------------ */
/* wider than the 1000px the gallery script sets, and the tiles start at the left of the content */
.ug-gallery-wrapper {
  max-width: 1343px !important;
}
.ug-thumbs-grid {
  left: 0 !important;
}
/* pages with the «granites» class (the Greek granites, menu item page class «products granites») hide the
   «ΤΕΧΝΙΚΑ ΧΑΡΑΚΤΗΡΙΣΤΙΚΑ» heading and the gallery title, as on the live */
/* (!important: the generated rules of these elements carry the page context and an id, so they are more specific) */
.granites .gallery .element-textpro,
.granites .techdesc {
  display: none !important;
}
/* the gallery box below the text, its title, and the hidden captions / lightbox numbers */
.gallery {
  margin-top: 250px;
}
.latomeio .gallery {
  margin-top: 100px;
}
.gallery .uk-margin.element.element-textpro {
  font-size: 20px;
  font-weight: 400 !important;
}
.products .ug-textpanel-title,
.ug-lightbox-numbers {
  font-size: 0 !important;
}
.ug-textpanel-title {
  font-size: 0 !important;
  color: #000 !important;
}
@media screen and (orientation: landscape) and (max-width: 823px) {
  .gallery {
    margin-top: 115px;
  }
}
@media screen and (orientation: portrait) and (max-width: 600px) {
  .gallery .ug-thumbs-grid {
    width: 86vw !important;
  }
  .gallery {
    margin-top: 150px;
  }
  .gallery .uk-margin.element.element-textpro,
  h2.techdesc {
    font-size: 14px !important;
    margin-left: 10px !important;
  }
  .products .unite-gallery {
    margin-left: -8vw !important;
  }
  img.ug-thumb-image {
    left: unset !important;
  }
  .products .ug-gallery-wrapper * {
    width: 100vw !important;
    object-fit: cover;
  }
}
@media screen and (orientation: portrait) and (min-width: 601px) and (max-width: 800px) {
  .products .ug-gallery-wrapper * {
    width: 100vw !important;
    object-fit: cover;
  }
  .products .unite-gallery.ug-gallery-wrapper {
    margin-left: -6vw !important;
  }
}
@media screen and (orientation: portrait) and (max-width: 800px) {
  .products .ug-item-wrapper,
  .products .ug-lightbox-overlay,
  .products .ug-slide-wrapper {
    width: 100vw !important;
  }
  .ug-lightbox-arrow-left,
  .ug-lightbox-arrow-right {
    display: none !important;
  }
}

/* Forms (templates/tpl-form.php): Contact Form 7 in the RSForm look of the live.
   Error state after a submit (assets/js/forms.js sets RSForm's classes), declared values of the live:
   the failing field's message and control in #b94a48; the general error message (p.formRed) stays hidden. */
form#userForm .formValidation > .formError {
  display: block;
  height: 18px;
  margin: 3px 5px 3px 0;
  padding-left: 5px;
  color: #b94a48;
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}
form#userForm input.rsform-error,
form#userForm textarea.rsform-error {
  color: #b94a48;
  border-color: #b94a48;
}
form#userForm input.rsform-error:focus,
form#userForm textarea.rsform-error:focus {
  border-color: #953b39;
  box-shadow: 0 0 6px #d59392;
}
form#userForm p.formRed {
  display: none;
}
/* CF7's own parts: hidden fields, and its tips and status line, which the RSForm messages replace (they stay
   for screen readers in .screen-reader-response; without JavaScript CF7's tips show) */
.wpcf7 form#userForm .hidden-fields-container,
.wpcf7.js form#userForm .wpcf7-not-valid-tip,
.wpcf7 form#userForm .wpcf7-response-output {
  display: none !important;
}
.wpcf7 form#userForm.failed .wpcf7-response-output,
.wpcf7 form#userForm.aborted .wpcf7-response-output,
.wpcf7 form#userForm.spam .wpcf7-response-output {
  display: block !important;
  margin: 0 0 20px;
}
/* The «Accept» label of the contact form: the live places it with top: -22px against the bottom: 60px of every
   label (declared values), so its height follows from the block (25px), not the 31px measured on the other labels */
form#userForm .rsform-block-iagree .formControlLabel {
  top: -22px;
  height: auto;
}
/* The SUBMIT block takes the width of its button on the live (en «SUBMIT» 85px, el «ΑΠΟΣΤΟΛΗ» 114px): the
   generator measured the English one as a constant */
@media (min-width: 651px) {
  form#userForm .rsform-block-submit {
    width: auto;
  }
}
/* The lines either side of a ZOO item title sit at its middle on the live (declared top: 50%, bottom auto): the
   generator wrote the computed px of one-line titles, which a two-line title (Volakas Marble<br> BOOKMATCH) breaks */
#flax-component .yoo-zoo > h1.item-main-title::before,
#flax-component .yoo-zoo > h1.item-main-title::after {
  top: 50% !important;
  bottom: auto !important;
}
/* Text fields of the forms: 100% of their column at every width, as the live declares (.contact .formResponsive
   input[type=text], textarea { width: 100% }); the generator wrote the px measured on the contact form's half column
   at the sampled widths (768, 1024, ≥1601), which the full-width unsubscribe form does not have */
.contact form#userForm input.rsform-input-box,
.contact form#userForm textarea.rsform-text-box {
  width: 100%;
}
/* News text: the last of several paragraphs keeps the 10px of «p + p» (live: Verona Fair 2019). The generator
   measured «p:last-child» on the reference news item, whose single paragraph is first and last (margin-top 0) */
.tm-noblog:not(.products):not(.about):not(.pages) #flax-component .yoo-zoo:has(> .description) > ul.uk-list li > p + p:last-child {
  margin-top: 10px;
}
/* The stone image is stretched, not cropped, on landscape screens up to 1024px (live: «object-fit: fill» with its
   height 70vw). object-fit is not among the properties probed at the breakpoint edges, so the generator kept the
   «cover» of the nearest full capture */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  .products #flax-component .yoo-zoo:has(> .description) > div.item-main-image.uk-align-medium-left img {
    object-fit: fill;
  }
}
/* Stone specification lines: 1px #DFDFDF under each paragraph at every width (live, no media condition); the edge
   probes record border-bottom-width but not its style, so under 361px the generated CSS lost the line */
.products #flax-component .yoo-zoo:has(> .description) > .description p {
  border-bottom: 1px solid #dfdfdf;
}
/* «Read more» chevron of the news cards: the live masks the 14px dark square of .uk-button-link::before with an
   arrow image (mask-size 100% 105%, no-repeat, declared values); our own arrow shape, inline */
.uk-button-link::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 14l7-7-7-7-1 1 6 6-6 6z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 14l7-7-7-7-1 1 6 6-6 6z'/%3E%3C/svg%3E") no-repeat;
  -webkit-mask-size: 100% 105%;
  mask-size: 100% 105%;
  transition: right 0.25s;
}
/* Form fields: the dark blue 2px underline at every width (live: «.contact .formResponsive input[type=text],
   .contact .formResponsive textarea { border-bottom: 2px solid #142954 !important }»); the edge probes record the
   top border's colour only, so under 361px the generated CSS fell back to grey */
.contact form#userForm input.rsform-input-box,
.contact form#userForm textarea.rsform-text-box {
  border-bottom: 2px solid #142954 !important;
}

/* Home, section 2, «CONTACT US»: the hover animation of the two frames. The live declares
   «a.ds-button::after, a.ds-button::before { transition: .3s }» and, on hover, «::before { height: 29px; top: -2% }»,
   «::after { width: 198px; left: 0; height: 29px }» (template stylesheet); the probes do not hover pseudo-elements.
   Values as computed on the live at 1366×768 (2026-10-20): ::before top -0.59375px / bottom -2.40625px,
   ::after left 0 / right -2px / bottom -2.109375px. */
#section2 a.ds-button::before,
#section2 a.ds-button::after {
  transition: 0.3s;
}
/* The generated state rules carry the probes' computed «margin: 0» for :hover/:focus/:active; the live declares
   «margin: 0 auto» and no state changes it. With 0 the button jumped to the left on hover, left the pointer and
   flickered between the two states, so the hover never showed. */
#section2 a.ds-button:hover,
#section2 a.ds-button:focus,
#section2 a.ds-button:active {
  margin-right: auto;
  margin-left: auto;
}
#section2 a.ds-button:hover::before {
  top: -0.59375px;
  bottom: -2.40625px;
}
#section2 a.ds-button:hover::after {
  left: 0;
  right: -2px;
  bottom: -2.109375px;
}

/* Home, section 1, «sectionlink» arrows: the live declares «a.sectionlink:after, a.sectionlink:hover:after
   { … transition: .3s }», «:after { right: 0 }», «:hover:after { right: -10px }» and no «left»; the generated rule
   carries the measured «left: 162px», which pinned the arrow. Colour on hover as computed on the live at 1366×768. */
#section1 a.sectionlink::after {
  left: auto;
  transition: 0.3s;
}
#section1 a.sectionlink:hover::after {
  right: -10px;
  color: rgb(47, 54, 59);
}

/* Stone lists (/marbles, /granites): on hover the title draws a rotated square frame. The probes do not hover
   pseudo-elements; values declared by the live (template stylesheet), per its media queries. */
.products .product-uikit-granites .uk-nbfc h3 a:hover::after,
.products .product-uikit-marbles .uk-nbfc h3 a:hover::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: 52px;
  top: 50px;
  border: 2px solid #fff;
  color: #fff;
  transform: rotate(45deg);
  transition: 0.3s;
}
@media screen and (orientation: landscape) and (max-width: 1280px) {
  .products .product-uikit-granites .uk-nbfc h3 a:hover::after,
  .products .product-uikit-marbles .uk-nbfc h3 a:hover::after {
    left: 35px;
    top: 35px;
  }
}
@media screen and (orientation: landscape) and (min-width: 1025px) and (max-width: 1280px) {
  .products .product-uikit-granites .uk-nbfc h3 a:hover::after,
  .products .product-uikit-marbles .uk-nbfc h3 a:hover::after {
    width: 170px;
    height: 170px;
    left: 41px;
    top: 39px;
  }
}
@media screen and (orientation: landscape) and (max-width: 823px) {
  .products .product-uikit-granites .uk-nbfc h3 a:hover::after,
  .products .product-uikit-marbles .uk-nbfc h3 a:hover::after {
    width: 106px;
    height: 106px;
    left: 24px;
    top: 24px;
  }
}
@media screen and (orientation: portrait) and (min-width: 601px) and (max-width: 800px) {
  .products .product-uikit-granites .uk-nbfc h3 a:hover::after,
  .products .product-uikit-marbles .uk-nbfc h3 a:hover::after {
    width: 110px;
    height: 110px;
    left: 23px;
    top: 23px;
  }
}
@media screen and (orientation: portrait) and (max-width: 600px) {
  .products .product-uikit-granites .uk-nbfc h3 a:hover::after,
  .products .product-uikit-marbles .uk-nbfc h3 a:hover::after {
    width: 91px;
    height: 91px;
    left: 23px;
    top: 23px;
    display: none;
  }
}