/*
Theme Name: Skyline Shop
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Firebrand Agency
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.3.0.1745438378
Updated: 2025-04-23 19:59:38

*/
.mockup-container {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}
.mockup-container img {
  position: absolute;
}
.mockup-container .image {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.mockup-container.vertical .floater,
.mockup-container.vertical .no-frame {
  height: 84.5%;
  width: 63%;
}
.mockup-container.vertical .standard-no-mat {
  width: 56.5%;
  height: 73.6%;
}
.mockup-container.vertical .standard-mat {
  width: 42.4%;
  height: 60.4%;
}
.mockup-container.square .floater,
.mockup-container.square .no-frame {
  height: 84%;
  width: 84%;
}
.mockup-container.square .standard-no-mat {
  width: 75.8%;
  height: 75.8%;
}
.mockup-container.square .standard-mat {
  width: 58.7%;
  height: 58.7%;
}
.mockup-container.horizontal .floater,
.mockup-container.horizontal .no-frame {
  width: 85%;
  height: 63%;
}
.mockup-container.horizontal .standard-no-mat {
  width: 71.7%;
  height: 57%;
}
.mockup-container.horizontal .standard-mat {
  width: 58.5%;
  height: 43.7%;
}

/* 
.mockup-container {
  width: 100% !important;
  position: relative;
}

.mockup-container .image {
  height: 100%;
  width: 100%;
}

.mockup-container .frame {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: contain;
  width: 100%;
  display: none;
  z-index: 1000;
}

.mockup-container.active .frame {
  display: block;
}

.mockup-container .material {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  display: none;
  z-index: 100;
} */
.variations select option[value="none"] {
  display: none;
}

.variations #pa_mat option[value="none"] {
  display: block;
}

.variations_form .single_add_to_cart_button {
  display: none !important;
}

/* .pa_frame-color_none,
.pa_hardware_none {
  display: none;
} */
.attribute_pa_mat {
  display: flex;
}

.thwvsf-rad-li .checkmark {
  background-color: white !important;
}

.thwvsf-rad-li .th-container .checkmark:after {
  background: #0073aa !important;
}

.sl-variations {
  display: flex;
}
.sl-variations .add-to-cart {
  max-width: 200px;
  border-radius: 0 !important;
  color: white !important;
  font-size: 16px !important;
  padding: 10px 20px !important;
  border: none;
  text-transform: capitalize;
  background-color: #027b8b !important;
}

#frame-toggle-holder {
  display: flex;
  gap: 10px;
}
#frame-toggle-holder button.frame-toggle {
  flex: 1;
  border-radius: 0 !important;
  color: white !important;
  font-size: 16px !important;
  padding: 10px 20px;
  border: none;
  text-transform: capitalize;
  background-color: #027b8b !important;
}
#frame-toggle-holder button.frame-toggle > .dashicons {
  display: none;
}
#frame-toggle-holder button.frame-toggle.add-frame {
  background-color: #028b3f !important;
}

#frame-selection {
  background-color: #f0f4f8;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 14px;
}
#frame-selection .select2-selection {
  background-color: white;
}

#main-selection {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sl-variations .text-label {
  padding-bottom: 8px;
}

.variations-image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.variations-image-grid input {
  display: none;
}
.variations-image-grid label {
  cursor: pointer;
}
.variations-image-grid label.checked {
  outline: 5px solid #027b8b;
  outline-offset: -5px;
}

.sl-variations button#clear-all {
  padding: 6px 20px !important;
  width: 100%;
  max-width: 150px;
  font-size: 12px;
  border-radius: 12px;
  background-color: rgb(202, 202, 202);
  border: none;
  color: black;
}
.sl-variations button#clear-all:hover {
  background-color: grey;
  color: white;
}

/*# sourceMappingURL=style.css.map */