/** Shopify CDN: Minification failed

Line 1422:5 Unexpected "="

**/
.blog_img_text .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
}
.blog_img_text img {
    max-width: 100%;
}
.blog_img_text  .col_6 {
    flex: 0 0 50%;
}
.blog_img_text .content_wrap h2 {
    margin-top: 0;
}
.blog_img_text .row:nth-child(1) .content_wrap,.blog_img_text .row:nth-child(3) .content_wrap,.blog_img_text .row:nth-child(5) .content_wrap {
    margin-right: -6rem;
    position: relative;
    background: rgba(255,255,255,0.9);
    padding: 15px;
} 
.blog_img_text .row:nth-child(2) .content_wrap,.blog_img_text .row:nth-child(4) .content_wrap  {
    margin-left: -6rem;
    position: relative;
    background: rgba(255,255,255,0.9);
    padding: 15px;
}
.blog_img_text .content_wrap p {
    margin-bottom: 0 !important;
}
.blog_img_text .img_box img {
    display: block;
}
.blog_img_text .image_caption {
    text-align: center;
    text-transform: capitalize;
}
.content_wrap1 {
    padding-top: 10px;
}
.blog-article__main img[data-sizes=auto].lazyloaded {
    height: 250px;
    object-fit: cover;
}

.article_image__box {
    width: 45%;
    margin: 0 auto;
}

.article_image__box a {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article_content .has-padding-top {
    margin: 0;
    padding: 0;
}
.article_content,.article_content > h2 {
    margin-top: 0;
}
.btn_img {
    position: relative;
    max-width: 500px;
}
.btn_img img {
    display: block;
    transition: transform 8s cubic-bezier(.25,.46,.45,.94);
}
.btn_img {
    overflow: hidden;
}
.btn_img:hover img {
    transform: scale(1.2);
}
.btn_img .bottom_content{
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 9;
  background: rgba(255,255,255,.9);
  padding: 8px 16px;
}
.btn_img h2 {
    margin: 0;
}
.btn_img .bottom_content p{
    margin-bottom: 0;
    display: block;
} 
.bottom_sec:hover a {
    color: #333333;
}
.banner_chronic {
    position: relative;
}
.banner_chronic img {
    display: none;
    width: 100%;
    filter: brightness(0.7);
}
.banner_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.banner_content h1 {
    color: #fff;
    margin: 0;
    padding: 0;
}
.banner_img {
    background-image: url(/cdn/shop/files/Zeitholz_-37_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 75vh;
}
.chronic_wrap .bottom_content {
    right: 20px;
    bottom: 20px;
    top: unset !important;
    text-align: center;
}
.chronic_wrap .middle_content p {
    margin-bottom: 0;
}
.zticky-sidebar{
  position: unset;
}
.chronic_wrap .chronicals_posts {
    display: flex;
    gap: 15px;
    margin: 30px 0;
    justify-content: center;
    align-items: center;
}

/* Upsells */
.upsells_wrap {
    margin-bottom: 22px;
}
.upsells {
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr; */
    gap: 20px;
    display: flex;
}
.upsell {
    display: flex;
    flex-wrap: wrap;
    width: 22%;
}
.upsell__image {
    width: 100%;
}
.upsell__image img {
    width: 100%;
    border: 1px solid #eee;
    display: block;
}
.upsell__title {
    margin: 8px 0;
}
.upsell__price {
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    line-height: 15px;
}

.upsells_heading h3 {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 17px;
}

.upsell__details{
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}

.upsells input[type="checkbox"] {
  cursor: pointer;
  appearance: none;
  background-color: #fff;
  margin: 0;
  display: inline-grid;
  place-content: center;
  border: 1px solid #000;
  padding: 0px;
  width: 16px;
  height: 16px;
  transform: translateY(0px);
  transition: all .2s ease-in-out;
}
.upsells input[type="checkbox"]:checked{
  border: 1px solid #00a0b0;
}
.upsells input[type=checkbox]::before {
    content: "";
    position: absolute;
    background: #ffffff;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: center;
    transition: all .2s ease-in-out;
}
.upsells input[type="checkbox"]:checked::before {
  transform: scale(1);
  background: #00a0b0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4IDYiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zLjExMSA0LjQxTDcuMTk2LjMyNGwuNjMuNjI5TDMuMTEgNS42NjcuMjgzIDIuODM4LjkxIDIuMjFsMi4yIDIuMnoiPjwvcGF0aD48L3N2Zz4=);
  background-size: 8px 6px;
  background-repeat: no-repeat;
  background-position: center;
}
.upsells input[type=checkbox]:checked + label {
    color: #00a0b0;
}
/*** atc btn ***/
button.add_to_cart .text{
  display: inline;
  width: auto;
}

/* Spring Landing Page */
.page-spring-sale .button {
    background: #226737 !important;
    border-color: #226737 !important;
    color: #fff !important;
}
.page-spring-sale .button:hover {
    background: #226737 !important;
    border-color: #226737 !important;
}
.page-spring-sale .add_to_cart {
    background: #226737;
    border-color: #226737;
}
.page-spring-sale .add_to_cart:hover {
    background: #226737;
    border-color: #226737;
}

/* Product Page Badges */
.trust_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5.5px;
    margin: 10px 0;
    align-items: center;
    justify-content: center;
}
.pdp_badge {
    flex: 1;
    text-align: center;
    max-width: 64px;
}
.Trust_badge_heading {
    text-align: center;
}
.Trust_badge_heading h2 {
    text-transform: capitalize;
    font-weight: 600;
}
button.shopify-payment-button__more-options {
    display: none;
}

/* Contact page */

.contact_iconn svg {
    stroke-width: 1;
    stroke: #000;
}

.contact_icons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.after-text.section {
    max-width: 580px;
    margin-top: 20px;
}

.form__title.section {
    max-width: 580px;
    margin-top: 20px;
}

.customer_service--container h2 {
    font-weight: 600;
}

.contact_iconn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact_iconn h6 {
    margin: 0;
    font-weight: 400;
}

.form_title h6 {
    font-weight: 400;
}

/* Footer */

.footer_contact--icons svg {
    stroke-width: 1px;
    stroke: #fff;
    fill: #fff;
}

.contact_icons svg {
    stroke-width: 1px;
    stroke: #fff;
}


/*** collection page image change on hover ***/

.product-wrap .image_on_hover .reveal {
    position: relative;
}
.product-wrap .image_on_hover .hidden{
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.product-wrap .image_on_hover .hidden{
    display: block !important;
    visibility: visible !important;
}
.product-wrap .image_on_hover .hidden{
    display: none;
    visibility: hidden;
}
.product-wrap .image_on_hover:hover .hidden{
    z-index: 100000;
    opacity: 1;  
}

/*** New Collection Page ***/

.section-wider {
    max-width: 1440px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.collection-new h2.title, .collection-women-collection h2.title, .collection-men-collection h2.title {
    text-align: center;
}

p.collection_subhead {
    font-size: 21px;
    font-weight: 500;
    color: #333333;
    font-style: normal;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Collection Banner */
.collection header.banner {
    display: none;
}

.product-list .thumbnail img, .slider-gallery .thumbnail img {
    max-height: unset;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/4;
}

.custom_col_featured--image img {
    width: 100%;
    max-width: initial;
}

/* Pages */

.page_image__box {
    width: 26%;
    margin: 0 auto;
}

/* Home Page */

.gallery-cell a.product-info__caption {
    text-align: left;
}


.image-with-text__image-column .image-element__wrap img {
    object-fit: cover;
    aspect-ratio: 3/2;
}

.payment_interest {
    display: none;
}

/* Product Page Gallery */

.gallery_on_desktop {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 15px;
    margin-bottom: 40px;
}

.gallery_on_desktop .gallery-cell {
    width: 48%;
}

.gallery_on_mobile {
    display: none;
}  
 
.product-info-sticky {
    position: sticky;
    top: 0;
    align-self: flex-start;
}

section.section-product-banner {
    max-width: 1380px;
    width: 95%;
    margin-left: auto; 
    margin-right: auto;
}

.product-info__caption .product-details .title {
    font-size: 22px;
    font-family: Oswald, sans-serif;
    letter-spacing: unset;
    color: #2A3A30;
    text-align: left;
    margin: 10px 0;
    height: unset;
    font-weight: 300;
}

.sale, .thumbnail .sale {
    text-align: left;
}

.thumbnail .sale span.money {
    font-size: 16px;
}

.thumbnail .price span.money {
    font-size: 16px;
    color: #000;
}

.thumbnail .price, .thumbnail .title {
    text-align: left;
}

/*** Header ***/

/* .promo-banner-2 {
    background: #F58549; 
} */

#header .dropdown {
  overflow: auto;
  max-height: calc(100vh - 140px);
}

#mobile_menu li a {
  padding-top: 11px;
  padding-bottom: 11px;
}

@media screen and (max-width: 375px) {
  #mobile_menu li a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #header .dropdown {
    max-height: 88vh;
  }
}

@media screen and (max-width: 992px) {
.blog_img_text .col_6 {
    flex: 0 0 100%;
    width: 100%;
}
.blog_img_text .row .content_wrap {
    margin: -3rem auto !important;
    padding: 15px !important;
    width: calc(100% - 20px);
}
.blog_img_text .img_box img {
    width: 100%;
}
.blog_img_text .row:nth-child(1),.blog_img_text .row:nth-child(3),.blog_img_text .row:nth-child(5) {
    flex-direction: column-reverse;
}
.blog_img_text .row {
    margin-bottom: 4rem;
}
.blog_img_text .row .content_wrap {
    margin: unset !important;
    padding: 15px 0 !important;
    width: calc(100% - 20px);
}
.blog_img_text .row:nth-child(2) .content_wrap, .blog_img_text .row:nth-child(4) .content_wrap {
    margin-left: unset;
    position: relative;
    background: rgba(255,255,255,.9);
}   

.after-text.section {
    max-width: 700px;
    padding: 0 15px;
} 

.form__title.section {
     max-width: 700px;
    padding: 0 15px;
}        
}

@media screen and (max-width: 768px) { 
.chronic_wrap .chronicals_posts {
    flex-wrap: wrap;
}  

.after-text.section {
    max-width: 700px;
    padding: 0 15px;
}  

.gallery_on_desktop {
    display: none;
}  

.gallery_on_mobile {
    display: block;
}  
  
}


@media screen and (max-width: 767px) {
.banner_img {
    height: 40vh;
} 
.blog_img_text .row .content_wrap {
    padding: 0 0 15px!important;
} 
.trsut_badges {
    margin: 10px 0 30px;
}   
.gallery_on_mobile .product_gallery {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.mob_pdtop_zero{
  padding-top: 0 !important;
} 
}


@media screen and (max-width: 480px) {
.trust_badges {
    margin: 10px 0 30px;
}

.article_image__box {
    width: 100%;
} 

.collection .equal-columns--outside-trim .small-down--one-half {
    width: calc(100% - (20px - (20px / 2)));
}  

.product-info__caption .product-details .title {
    font-size: 16px;
}  

.image-with-text__image-column .image-element__wrap img {
    object-fit: cover;
    aspect-ratio: 1/1;
}  

.first_img_gap {
    margin-bottom: 20px;
    margin-top: 30px;
}

.upsells {
    flex-wrap: wrap;
}  

.upsell {
    width: 46%;
}  
  
}

/* The .material-wrapper class is used to create a flex container that centers its children horizontally and aligns them to the start of the container vertically. It applies a margin around the container and sets the font for all child elements. */
.material-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 20px;
  font-family: Arial, sans-serif;
}

/* The .material-box class defines the size and appearance of the material info box. It ensures the box is square, adds spacing inside and outside the box, applies a border and shadow for depth, and centers its children both horizontally and vertically. */
.material-box {
  width: 300px; /* Fixed width for the box, can be adjusted as needed */
  height: 300px; /* Fixed height to maintain a square shape */
  margin-right: 20px; /* Spacing to the right of the box */
  padding: 20px; /* Spacing inside the box */
  border: 1px solid #ccc; /* Border around the box */
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* Shadow effect for depth */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The .material-description class is designed for the detailed description area beside the material box. It allows the text block to grow to fill the space, applies internal spacing, sets a maximum width, and justifies the text. */
.material-description {
  flex-grow: 1; /* Allows the description to grow to fill available space */
  padding: 20px; /* Spacing inside the description area */
  text-align: justify; /* Justifies the text for better readability */
  max-width: 600px; /* Sets a maximum width for the description */
}

/* These styles apply to the headings within the .material-box and .material-description classes. They set the color, size, and bottom margin for the headings. */
.material-box h2, .material-description h2 {
  color: #333; /* Dark color for the text */
  margin-bottom: 10px; /* Spacing below the heading */
}

/* These styles apply to the paragraph text within the .material-box and .material-description classes. They set the font size, text color, and bottom margin for the paragraphs. */
.material-box p, .material-description p {
  font-size: 16px; /* Size of the text */
  color: #666; /* Gray color for the text */
  margin-bottom: 10px; /* Spacing below the paragraph */
}

/* This style applies to images within the .material-box class. It makes sure the image does not exceed the box size and maintains its aspect ratio without distortion. */
.material-box img {
  max-width: 100%; /* Ensures the image is not wider than the box */
  max-height: 100%; /* Ensures the image is not taller than the box */
  object-fit: contain; /* Ensures the image maintains its aspect ratio */
}

/* Grid container for material items with responsive columns and spacing */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Define 4 equal columns */
  gap: 20px;
  padding: 20px;
  background-color: #f4f4f4;
}

/* Individual material item styling with centered content and a subtle shadow */
.material-item {
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

/* Target empty material items and hide them */
.material-item:empty {
  display: none;
}

/* This targets the first material item if it is the only child */
.materials-grid > .material-item:only-child {
  grid-column: span 4; /* Makes the only item span all 4 columns */
}

/* Hover effect for material items to lift off the page */
.material-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Full-width images within material items, maintaining their aspect ratio */
.material-image {
  width: 100%;
  height: 250px !important; /* Set a fixed height or as per your design requirement */
  object-fit: cover; /* This will crop the image to fill the container */
  object-position: center; /* This will center the image within the container */

  
}

/* Material name styling with padding and bold text */
.material-name {
  padding: 10px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;  
}

/* Material name styling for the movement type */
.material-name p {
  background-color: #fff;
  color: #333;
  font-size: 12px;
  font-weight: normal;
  text-transform: none;  
}

/* Media query for mobile devices */
@media screen and (max-width: 600px) {
  .material-wrapper {
    flex-direction: column;
    align-items: stretch; /* Changed from center to stretch to ensure full width */
  }

   .materials-grid {
    /* On mobile, use a single column layout */
    grid-template-columns: 1fr;
  }

  .material-box, .material-description {
    width: 100%; /* Ensure the box takes full width */
    height: auto; /* Adjust the height if necessary */
    margin-right: 0; /* Remove any horizontal margin */
    margin-bottom: 20px; /* Add bottom margin for spacing if needed */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }

  .material-box img {
    width: 100%;
    height: auto; /* Adjust if you have a specific height in mind */
    object-fit: cover; /* Cover can crop the image, so use 'contain' if you want to fit the whole image */
  }
}

.description {
  font-size: 18px !important; /* Our texts are too small in the copy. */
}

/* The .material-wrapper class is used to create a flex container that centers its children horizontally and aligns them to the start of the container vertically. It applies a margin around the container and sets the font for all child elements. */
.team-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 20px;
  font-family: Arial, sans-serif;
}

/* Grid container for material items with responsive columns and spacing */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Define 3 equal columns */
  gap: 20px;
  padding: 20px;
  background-color: #f4f4f4;
}

/* Individual material item styling with centered content and a subtle shadow */
.team-item {
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease;
}


/* The .material-box class defines the size and appearance of the material info box. It ensures the box is square, adds spacing inside and outside the box, applies a border and shadow for depth, and centers its children both horizontally and vertically. */
.team-box {
  width: 400px; /* Fixed width for the box, can be adjusted as needed */
  height: 400px; /* Fixed height to maintain a square shape */
  margin-right: 20px; /* Spacing to the right of the box */
  padding: 20px; /* Spacing inside the box */
  border: 1px solid #ccc; /* Border around the box */
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* Shadow effect for depth */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Full-width images within material items, maintaining their aspect ratio */
.team-image {
  width: 100%;
  height: 300px !important; /* Set a fixed height or as per your design requirement */
  object-fit: cover; /* This will crop the image to fill the container */
  object-position: center; /* This will center the image within the container */

  
}

/* Material name styling with padding and bold text */
.team-name {
  padding: 10px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;  
}

/* Media query for mobile devices */
@media screen and (max-width: 600px) {
  .team-wrapper {
    flex-direction: column;
    align-items: stretch; /* Changed from center to stretch to ensure full width */
  }

   .team-grid {
    /* On mobile, use a single column layout */
    grid-template-columns: 1fr;
  }

  .team-box, .team-description {
    width: 100%; /* Ensure the box takes full width */
    height: auto; /* Adjust the height if necessary */
    margin-right: 0; /* Remove any horizontal margin */
    margin-bottom: 20px; /* Add bottom margin for spacing if needed */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }

  .team-box img {
    width: 100%;
    height: auto; /* Adjust if you have a specific height in mind */
    object-fit: cover; /* Cover can crop the image, so use 'contain' if you want to fit the whole image */
  }
} 

/* Zeitholz TOC Styles */

/* Container Styling */
.zeitholz-toc-inner {
    background-color: #f2f2f2;
    padding: 20px;
    margin-bottom: 30px;
}

.zeitholz-toc-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Title Styling */
.zeitholz-toc-title {
    background-image: linear-gradient(-60deg, transparent, transparent 35px, #F58549 35px);
    color: #000;
    font-weight: 600;
    font-size: 1.375rem;
    letter-spacing: 0.1em;
    line-height: 1.39;
    padding: 12px 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    top: -10px;
    border-radius: 5px;
}

/* TOC Links Styling */
.zeitholz-toc-links ul {
    list-style: none;
    padding-left: 0;
}

.zeitholz-toc-link {
    margin-bottom: 10px;
}

.zeitholz-toc-link a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: color 0.3s;
}

.zeitholz-toc-link a:hover,
.zeitholz-toc-link a:focus {
    color: #F58549;
    text-decoration: underline;
}

/* Nested TOC Styling */
.zeitholz-toc-links ul ul {
    margin-left: 20px;
    margin-top: 10px;
}

.zeitholz-toc-links ul ul .zeitholz-toc-link a {
    font-size: 0.95rem;
}

/* Responsive Design */
@media (min-width: 621px) {
    .zeitholz-toc-inner {
        padding: 30px;
    }
    
    .zeitholz-toc-title {
        font-size: 1.5rem;
        padding: 18px 25px;
    }
}

@media (min-width: 781px) {
    .zeitholz-toc-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

    /* Styles for the engravings gallery grid layout */
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 15px;
        padding: 20px;
    }

    /* Individual gallery items with hover effects */
    .gallery-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        border-radius: 0px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

    .gallery-item img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.1);
    }

    .gallery-item .hover-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
        text-align: center; 
        font-style: italic; 
        color: #ffffff; 
        padding: 8px 10px 12px;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .gallery-item:hover .hover-text {
        opacity: 1;
    }

    /* Styles specific to the engravings gallery modal */
    .engraving-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .engraving-modal-content {
        position: relative;
        max-width: 800px;
        max-height: 800px;
        width: 100%;
        height: auto;
    }

    .engraving-modal-content img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        border-radius: 8px;
    }

    .engraving-modal-content .link {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .engraving-modal-content .link a {
        display: inline-block;
        color: #004d00;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        padding: 12px 24px;
        background: rgba(255, 255, 255, 0.8);
        border: 2px solid #004d00;
        border-radius: 5px;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .engraving-modal-content .link a:hover {
        background: rgba(0, 77, 0, 0.8);
        color: #fff;
    }

    .zh-more-engraving { margin-top: 28px; }
    .zh-more-engraving h2 { margin-bottom: 6px; }
    .zh-more-engraving-grid { margin-top: 10px; }
    .zh-engraving-note { margin-top: 10px; font-size: 0.95rem; }
    .zh-engraving-note ul { margin: 0; padding-left: 18px; }
    .zh-engraving-note li { margin: 4px 0; }

/*** Styles for Accessories Highlight Section ***/

  /* Section Titles */
  .ah-title {
    font-family: Oswald, sans-serif;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  .ah-subtitle {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 2rem;
  }

  /* Grid Layout */
  .ah-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    margin: 3rem 0;
    min-height: 700px;
  }

  /* Tiles */
  .ah-tile {
    position: relative;
    display: block;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-size 0.5s ease;
    text-transform: none;
  }
  .ah-tile:hover {
    background-size: 110% auto;
  }

  /* Tile Variants */
  .ah-hero {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .ah-small {
    grid-column: 2;
  }

  /* Labels */
  .ah-label {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    font-family: Oswald, sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0, 160, 176, 0.8);
    padding: 4px 30px;
    color: #fff;
    line-height: 1.2;
    border: none;
  }
  .ah-label-large {
    font-size: 28px;
    padding: 6px 40px;
  }

  /* Responsive: stack on tablet/mobile */
  @media (max-width: 1024px) {
    .ah-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, minmax(200px, auto));
      min-height: auto;
    }
    .ah-hero,
    .ah-small {
      grid-column: 1;
    }
    .ah-hero {
      grid-row: 1;
    }
    .ah-small:nth-of-type(2) { grid-row: 2; }
    .ah-small:nth-of-type(3) { grid-row: 3; }
  }

  @media (max-width: 640px) {
    .ah-label {
      font-size: 20px;
      padding: 4px 20px;
    }
    .ah-label-large {
      font-size: 24px;
      padding: 6px 30px;
    }
  }

/* ─── Zeitholz hybrid CTA ───────────────────────────────────────────── */

.cta-button{
  background-color:#18632E;
  color:#FFFFFF;
  border:none;
  border-radius:6px;
  font-size:16px;
  font-weight:600;
  padding:16px 32px;          /* symmetrical top/bottom */
  display:inline-flex;        /* enables flex centring */
  align-items:center;         /* vertical centring */
  justify-content:center;     /* horizontal centring */
  cursor:pointer;

  /* smooth micro-animation */
  transition:
    background-color .15s ease,
    transform         .15s ease,
    box-shadow        .15s ease;
}

/* ensure nested <a> keeps the button’s colour */
.cta-button a{
  color:inherit;
  text-decoration:none;
}

/* Hover / mouse-focus state */
.cta-button:hover,
.cta-button:focus{
  background-color:#249143;      /* +8 % lightness on hover */
  transform:translateY(-2px);    /* subtle “lift” */
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* Keyboard-only focus ring (accessibility) */
.cta-button:focus-visible{
  outline:2px solid rgba(255,255,255,.40);
  outline-offset:2px;
}

/* Pressed / active */
.cta-button:active{
  transform:scale(.97);
  box-shadow:0 2px 4px rgba(0,0,0,.12);
}

/* Optional micro-copy under the button */
.cta-microcopy{
  display:block;
  margin-top:8px;
  margin-bottom:14px;
  font-size:14px;
  color:#4A4A4A;                 /* body-text grey */
  text-align:center;
}

  /* Force white text on the CTA in all link states */
.cta-button,
.cta-button:link,
.cta-button:visited,
.cta-button:hover,
.cta-button:active,
.cta-button:focus {
  color:#FFFFFF !important;   /* !important guards against global a{} rules */
  text-decoration:none;       /* keeps underline off if your theme adds it */
}

/* Style for the tables within our blog articles */
.blog-table{
  margin:20px auto;
}


/* ====== Materials page (scoped) ====== */
/* Wrap page markup in: <div class="zh-materials"> ... </div> */
.zh-materials {
  --ink: #1c1c1c;
  --muted: #666;
  --bg: #fafafa;
  --card: #fff;
  --shadow: 0 12px 28px rgba(0,0,0,.08);
  --radius: 18px;
  color: var(--ink);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height: 1.55;
}

/* Container */
.zh-materials__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
}

.zh-materials a { color: inherit; text-decoration: none; }

/* Hero */
.zh-materials__hero {
  position: relative;
  height: 58vh;
  min-height: 420px;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: 8px 0 22px;
}
.zh-materials__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url('/cdn/shop/files/walnussholz.jpg?v=1702031835') center/cover no-repeat;
  filter: contrast(1.05) brightness(.8);
}
.zh-materials__hero-inner { position: relative; z-index: 1; padding: 0 16px; text-align: center; }
.zh-materials__hero-title { font-size: clamp(28px, 4vw, 44px); margin: 0 0 10px; }
.zh-materials__hero-sub { max-width: 760px; margin: 0 auto 16px; color: #f2f2f2; }

/* Buttons */
.zh-materials__pill {
  display: inline-block;
  background: #ffffffde;
  color: #111;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow);
  margin: 4px;
  transition: transform .18s ease;
}
.zh-materials__pill:hover,
.zh-materials__pill:focus { transform: translateY(-2px); }

/* Intro / section headings */
.zh-materials__lede { max-width: 860px; margin: 8px auto 10px; }
.zh-materials__lede p { margin: 0 0 10px; }
.zh-materials__section { margin: 28px 0; }
.zh-materials__section-title { font-size: clamp(22px, 3vw, 28px); margin: 0 0 8px; }
.zh-materials__section-sub { color: var(--muted); margin-top: -2px; }

/* Filter chips (visual only) */
.zh-materials__chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.zh-materials__chip { border: 1px solid #e8e8e8; padding: 6px 10px; border-radius: 999px; background: #fff; font-size: .9rem; }

/* Woods grid: 3 per row desktop, 2 tablet, 1 mobile */
.zh-materials__grid--woods { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width:1000px){ .zh-materials__grid--woods { grid-template-columns: repeat(3,1fr); } }
@media (min-width:640px) and (max-width:999.98px){ .zh-materials__grid--woods { grid-template-columns: repeat(2,1fr); } }
@media (max-width:639.98px){ .zh-materials__grid--woods { grid-template-columns: 1fr; } }

/* Generic grid (movements/straps) */
.zh-materials__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }

/* Cards (larger media to show grain) */
.zh-materials__card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.zh-materials__card:hover,
.zh-materials__card:focus-within { transform: translateY(-3px); }
.zh-materials__card-media { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.zh-materials__card-body { padding: 10px 12px; }
.zh-materials__card-title { font-weight: 800; letter-spacing: .6px; }
.zh-materials__card-meta { color: var(--muted); font-size: .95rem; margin-top: 2px; }

/* Straps media (kept separate for future tweaks) */
.zh-materials__strap-media { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Comparator (simple table) */
.zh-materials__compare { background: #f4f4f4; border-radius: 18px; padding: 16px; }
.zh-materials__table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.zh-materials__table th,
.zh-materials__table td {
  background: #fff; padding: 10px 12px; border-radius: 10px; font-size: .95rem;
}
.zh-materials__table th { font-weight: 700; }

/* Basic focus states */
.zh-materials__card a:focus,
.zh-materials__pill:focus { outline: 2px solid rgba(20,20,20,.25); outline-offset: -2px; }

/* === Materials cards: restore visual style & override theme link color === */

/* Make the whole card (anchor) behave like a block card */
.zh-materials .zh-materials__card {
  display: block;
  text-decoration: none;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Kill theme link color inside cards; inherit our neutral ink */
.zh-materials .zh-materials__card, 
.zh-materials .zh-materials__card * {
  color: var(--ink) !important;
}

/* Image: big and prominent, rounded with the card */
.zh-materials .zh-materials__card-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Caption panel: tight padding, white, readable hierarchy */
.zh-materials .zh-materials__card-body {
  background: #fff;
  padding: 12px 14px;
}

.zh-materials .zh-materials__card-title {
  font-weight: 800;
  letter-spacing: .6px;
  font-size: 1.05rem;
  line-height: 1.2;
  text-transform: none; /* keep as entered; your content is uppercase already */
}

.zh-materials .zh-materials__card-meta {
  margin-top: 4px;
  font-size: .95rem;
  color: var(--muted);
}

/* Tighter gaps between cards to emphasize texture visuals */
.zh-materials .zh-materials__grid--woods { gap: 12px; }

/* Hover feel similar to the first screenshot */
.zh-materials .zh-materials__card:hover,
.zh-materials .zh-materials__card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}

/* Prevent theme link underline/color on hover inside the card */
.zh-materials .zh-materials__card:hover .zh-materials__card-title,
.zh-materials .zh-materials__card:focus .zh-materials__card-title {
  text-decoration: none;
  color: var(--ink);
}


<!-- ===== Enhanced FAQ Section (Zeitholz) ===== -->
  /* Container */
  .zh-faq{margin:2rem 0 3rem}
  .zh-faq h2{letter-spacing:.02em;margin-bottom:.75rem}
  .zh-faq-intro{color:#555;margin-bottom:1.25rem}

  /* Accordions */
  .zh-faq details{
    border:1px solid #e6e6e6;
    border-radius:14px;
    background:#fff;
    margin:10px 0;
    overflow:hidden;
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  .zh-faq details[open]{box-shadow:0 6px 16px rgba(0,0,0,.06);border-color:#dcdcdc}

  /* Question row */
  .zh-faq summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:.75rem;
    padding:1rem 1.1rem;
    font-weight:600; letter-spacing:.01em;
  }
  .zh-faq summary::-webkit-details-marker{display:none}
  .zh-faq .qicon{
    width:28px;height:28px;flex:0 0 28px;
    border-radius:9px; 
    background:#f2f6f3; /* nature-leaning neutral */
    display:grid; place-items:center;
    font-size:.9rem; font-weight:700; color:#2d6a4f;
  }
  .zh-faq .chev{
    margin-left:auto; transition:transform .2s ease; opacity:.6
  }
  .zh-faq details[open] .chev{transform:rotate(180deg); opacity:.9}

  /* Answer card */
  .zh-faq .answer{padding:0 1.1rem 1.1rem; color:#333; line-height:1.6}
  .zh-faq .answer p{margin:.6rem 0}
  .zh-faq .answer ul{margin:.5rem 0 .25rem 1.25rem}
  .zh-faq a{text-decoration:underline; text-underline-offset:2px}

  /* Small badges (optional cues like Warranty / Timing) */
  .zh-faq .badge{
    font-size:.72rem; font-weight:600; letter-spacing:.02em;
    background:#eef7ff; color:#0b61a4;
    border-radius:999px; padding:.2rem .5rem; margin-left:.35rem;
  }

  /* Section anchor spacing fix for sticky headers (if used) */
  #faq{scroll-margin-top:80px}

    /* Optional: lightweight layout polish for the step images */
  .zh-order-steps ol{counter-reset: step}
  .zh-order-steps li{margin:1rem 0 1.25rem; line-height:1.6}
  .zh-step-figure{margin:.6rem 0 0}
  .zh-step-figure img{width:100%; height:auto; border-radius:12px}
  .zh-step-figure figcaption{font-size:.9rem; color:#666; margin-top:.35rem}