/** Shopify CDN: Minification failed

Line 113:0 "pading-top" is not a known CSS property
Line 465:14 Expected identifier but found whitespace
Line 465:15 Unexpected "1px"
Line 465:26 Unexpected "{"
Line 465:36 Expected ":"
Line 474:6 Expected identifier but found whitespace
Line 474:8 Unexpected "{"
Line 474:18 Expected ":"
Line 512:17 Expected identifier but found whitespace
Line 512:19 Unexpected "{"
... and 5 more hidden warnings

**/
.cpb-loader-center:before {
  content: '';
  width: 150px;
  height: 100px;
  background-image: url(https://cdn.shopify.com/s/files/1/0040/2358/2835/files/Growplay_Loading_Screen.gif?v=1726172775);
  background-size: cover;
  background-position: center;
}

.cpb-loader-center svg {
display: none;
}

.purchase-details__buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: white;
  margin: 0;
}   /* Please use this file to customize the styles of the custom product builder */

.cpb-preview-wrapper {
  display: flex;
  align-items: stretch;
  flex-basis: 100%;
  flex-direction: column;
  padding-top: 0px !important;
}

.UeyMu {
  margin-top: 0px;
  margin-bottom: 0px;
}

#product-builder {
  width: 100%;
  position: relative;
  border: none;        

--image-thumbnail-mobile-size: 65px;
--image-thumbnail-desktop-size: 80px;
}
@media (min-width: 1000px) {
#product-builder {
  margin-top: 10px;
}
}

.thumbnail-sticker {
display: none !important;
}

body #product-builder .cpb-layout:not(.cpb-breakpoint-1000) .cpb-preview-container {
padding-top: 0% !important;
  margin-bottom: 0 !important;
}


/* #product-builder .cpb-theme-provider.aloha .cpb-layout:not(.cpb-is-admin) .cpb-panels-tabs li.cpb-active {
  border-bottom: none;
  border-left: 1px solid #D9D9D9;
  border-top: 1px solid #D9D9D9;
  border-right: 1px solid #D9D9D9;
  color: #595858;
  opacity: 1;
  display: none !important;
} */

.cpb-root {
margin-top: 0;
}
.cpb-layout {
padding: 0px 0;
}
.cpb-layout .cpb-preview-container {
margin-top: 0;

}

#product-builder .cpb-layout:not(.cpb-breakpoint-1000) .cpb-preview-container {
  max-width: initial;
  width: 535px;
  padding: 535px 0 0 0;
  flex-basis: initial;
  position: relative;
  margin-bottom: -40px !important;
}

.cpb-panels-container {
  display: flex;
  flex-direction: column;
}

.cpb-product-description {
  order: 1;
  margin-top: 0 !important;
pading-top: 0px !important;
}

.cpb-panel-title {
display: none;
}

.cpb-category-title__inner {
  font-weight: 700;
  margin-top: 5px;
  font-size: 20px;
  letter-spacing: 0.5px;
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(0, 172, 240, 1);
  margin-bottom: 10px;
  color: #333;
  text-transform: uppercase;
}

/* First category shouldn't have extra margin */
.cpb-panel-first .cpb-category-title__inner {
  margin-top: 0;
  background-color: #f8f9fa;
  padding: 12px 15px;
  border-radius: 8px;
  border-bottom: 2px solid #00ACF0;
  text-align: center;
}

/* category multiple - improved thumbnails and spacing */
.cpb-option-type-multiple {
column-gap: 8px;
row-gap: 8px;
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
justify-content: flex-start;
}

/* Improve Out of Stock visibility */
.cpb-option-type-img[data-status="outofstock"]::before,
.cpb-option-type-img[data-outofstock="true"]::before {
content: "Out of Stock";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(235, 87, 87, 0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
border-radius: 8px;
z-index: 2;
letter-spacing: 0.5px;
backdrop-filter: blur(1px);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Add a crossed-out style for out of stock items */
.cpb-option-type-img[data-status="outofstock"],
.cpb-option-type-img[data-outofstock="true"] {
opacity: 0.9;
position: relative;
overflow: hidden;
cursor: not-allowed;
border-color: #e0e0e0 !important;
}

/* Add diagonal strikethrough */
.cpb-option-type-img[data-status="outofstock"]::after,
.cpb-option-type-img[data-outofstock="true"]::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
  45deg,
  rgba(235, 87, 87, 0.1),
  rgba(235, 87, 87, 0.1) 10px,
  transparent 10px,
  transparent 20px
);
z-index: 1;
border-radius: 8px;
}

/* Maintain smaller size on hover */
.cpb-option-type-img[data-status="outofstock"]:hover,
.cpb-option-type-img[data-outofstock="true"]:hover {
transform: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile-specific out of stock styles */
@media (max-width: 767px) {
.cpb-option-type-img[data-status="outofstock"]::before,
.cpb-option-type-img[data-outofstock="true"]::before {
  font-size: 10px;
}
}

.cpb-option-type-img {
height: var(--image-thumbnail-mobile-size);
width: var(--image-thumbnail-mobile-size);
box-sizing: content-box !important;
line-height: 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e1e1e1 !important;
opacity: 1;
box-shadow: none;
transition: transform 0.3s ease, border-color 0.3s ease;
margin: 0 1px;
}

.cpb-option-type-img:hover {
transform: translateY(-2px);
border-color: #b6b6b6 !important;
}

#product-builder .cpb-theme-provider.alpine-white .cpb-option.cpb-option-type-img.cpb-active {
  border: 3px solid #00ACF0 !important;
  transform: translateY(-2px);
}
#product-builder .cpb-theme-provider.alpine-white .cpb-option.cpb-option-type-img img {
height: var(--image-thumbnail-mobile-size);
width: var(--image-thumbnail-mobile-size);
object-fit: contain;
padding: 2px;
}
@media (min-width: 1000px) {
.cpb-option-type-img,
#product-builder .cpb-theme-provider.alpine-white .cpb-option.cpb-option-type-img img {
  height: var(--image-thumbnail-desktop-size);
  width: var(--image-thumbnail-desktop-size);
  object-fit: contain;
}
}


/* top info */


.cpb-product-title {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  margin: 0;
  letter-spacing: -1px;
  line-height: 1;
}

.cpb-custom-product-title-container .cpb-product-title {
font-weight: 900 !important;
font-size: 2.2rem !important;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 8px;
}
@media (min-width: 1000px) {
.cpb-custom-product-title-container .cpb-product-title {
  font-size: 36px !important;
}
}
.cpb-custom-product-description-container .cpb-product-description {
  margin: 0 !important;
padding-top: 0px !important;
}
.cpb-custom-prices-container {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}
.cpb-custom-product-price {
font-size: 32px;
font-weight: 800;
color: #4d4d4d;
margin-right: 12px;
letter-spacing: -0.5px;
}
.cpb-custom-product-compare-price {
font-size: 18px;
margin-left: 0;
opacity: .8;
text-decoration: line-through;
color: #777;
}
.cpb-custom-savings-container {
  display: flex;
  margin-bottom: 15px;
}
.cpb-custom-product-savings {
  text-transform: uppercase;
  background: #4CAF50;
  padding: 4px 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-flex !important;
}
.cpb-custom-product-savings:empty {
  display: none;
}
#product-builder[data-custom-top-info="true"] .cpb-product-actions-first {
display: none;
}



#product-builder[data-custom-product-price="true"] .cpb-panels-container .cpb-product-price {
display: none;
}


/* actions */
@media (min-width: 1000px) {
.cpb-product-actions {
  max-width: 290px;
}
}

.cpb-product-actions .row {
width: 100% !important;
}
.cpb-product-actions-container {
width: 100% !important;
}
.cpb-actions-btn {
  width: 100%;
  color: #ffffff !important;
  justify-content: center !important;
  background: linear-gradient(to right, #00ACF0, #0095d9) !important;
  border: none !important;
  height: 58px !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease-out;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  display: block;
  text-align: center;
  z-index: 2;
  max-width: 100%;
}

.cpb-actions-btn:hover {
  background: linear-gradient(to right, #0095d9, #008cc7) !important;
  box-shadow: none !important;
  transform: none;
}

.cpb-actions-btn:active {
  transform: none;
  box-shadow: none !important;
}

.cpb-add-to-cart-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: buttonPulse 2.5s ease-in-out 1s infinite;
width: 100%;
max-width: 100%;
}

.cpb-add-to-cart-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
transform: translateX(-100%);
transition: transform 0.7s ease;
}

.cpb-add-to-cart-button:hover::before {
transform: translateX(100%);
}

.cpb-add-to-cart-button::after {
content: "→";
position: absolute;
right: 25px;
opacity: 0;
transform: translateX(-15px);
transition: all 0.3s ease;
pointer-events: none;
}

.cpb-add-to-cart-button:hover::after {
opacity: 1;
transform: translateX(0);
}

.cpb-add-to-cart-button > i {
display: none;
}

.cpb-quantity {
margin-bottom: 0;
}
.cpb-quantity-label {
  display: none;
}
.cpb-quantity-actions {
  width: 100%;
}
.cpb-quantity-button {
  width: 44px;
  height: 44px;
  border: none;
  font-size: 25px !important;
  color: grey;
}
.cpb-quantity-button-decrease {
  order: -1;
}
.cpb-quantity-value {
  flex-grow: 1;
  text-align: center;
  border: none;
  border-top: thin solid #d8d8d8;
  border-bottom: thin solid #d8d8d8;
  min-height: 44px;
}

/*.hGgwWl {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
} */

.clickable-image {
    cursor: pointer;

.accordion dt,
.faq-accordion dt {
border-bottom: 1px solid {{ settings.border_color }};
position: relative;
}
.accordion dt a,
.accordion dt button,
.faq-accordion dt a,
.faq-accordion dt button {
background: none;
border: 0;
color: {{ settings.regular_color }};
cursor: pointer;
display: block;
font-size: 1.2rem;
padding: 20px 20px 20px 40px;
text-align: left;
width: 100%;
transition: background-color 0.2s linear;
}
.accordion dt .accordion [aria-expanded=true] small,
.accordion dt .accordion-style--carets[aria-expanded=true] .icon,
.faq-accordion dt .accordion [aria-expanded=true] small,
.faq-accordion dt .accordion-style--carets[aria-expanded=true] .icon {
transform: translateY(-60%) rotate(180deg);
}
.accordion dt small,
.accordion dt .icon,
.faq-accordion dt small,
.faq-accordion dt .icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s linear;
}
.accordion dt .accordion-style--plus_and_minus .icon,
.faq-accordion dt .accordion-style--plus_and_minus .icon {
display: none;
}
.accordion dt .accordion-style--plus_and_minus .icon.icon--active,
.faq-accordion dt .accordion-style--plus_and_minus .icon.icon--active {
display: block;
}

.accordion dt a[aria-expanded=true],
.accordion dt a:hover,
.faq-accordion dt button[aria-expanded=true],
.faq-accordion dt button:hover {
background-color: {{ settings.heading_color | color_modify: 'alpha', 0.03 }};
}

.accordion dd,
.faq-accordion dd {
display: none;
padding: 20px 20px 20px 40px;
}

.faq-accordion dt .icon {
color: {{ settings.link_color }};
}

.accordion dt:first-of-type small,
.accordion dt:first-of-type [aria-expanded=true] small {
transform: translateY(-60%) rotate(270deg);
}
.accordion dt:first-of-type [aria-expanded=false] small {
transform: translateY(-60%) rotate(180deg);
}

.accordion dd {
margin-left: 0;
display: none;
}
.accordion dd[aria-hidden=false] {
display: block;
}

.accordion dt a small.right {
font-family: "Arial";
/* Force font family to ensure accordion carets are displayed on iOS devices */
}

.accordion dd:not([aria-hidden=true]):first-of-type {
display: block;
}

.accordion [aria-expanded=false] small {
transform: translateY(-60%) rotate(180deg);
}

.accordion [aria-expanded=true] small {
transform: translateY(-60%) rotate(270deg);
}

/*
.hhhKbi {
   margin-top: 0px !important; 
   margin-bottom: 0px !important; 
}
*/

/* Add a subtle bounce animation on page load for the CTA button */
@keyframes buttonPulse {
  0% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 172, 240, 0.25); }
  5% { transform: scale(1.03); box-shadow: 0 6px 18px rgba(0, 172, 240, 0.4); }
  10% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 172, 240, 0.25); }
  100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 172, 240, 0.25); }
}

.cpb-product-actions {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.cpb-product-actions-container {
  width: 100% !important;
  position: relative;
  display: block;
  overflow: visible;
}

.cpb-actions-row {
  position: relative;
  width: 100% !important;
  overflow: visible;
}

/* More comprehensive fix for button hover area issues */

/* Reset the hover area for all elements in the actions area */
.cpb-product-actions,
.cpb-product-actions *,
.cpb-product-actions-container,
.cpb-actions-row,
.row,
.cpb-add-to-cart-button {
  cursor: default !important; /* Reset cursor for all elements */
}

/* Only show pointer cursor on actual buttons */
.cpb-actions-btn {
  cursor: pointer !important;
  position: relative;
  z-index: 2; /* Ensure button stays on top */
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

/* More aggressive fix for container elements */
.cpb-product-actions {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}

.cpb-product-actions-container {
  width: 100% !important;
  position: relative;
  display: block;
  overflow: hidden; /* Hide overflow */
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}

.row, 
.cpb-actions-row {
  position: relative;
  width: 100% !important;
  overflow: hidden; /* Hide overflow */
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Ensure button container is properly contained */
.cpb-add-to-cart-button-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix button animation that might be extending clickable area */
@keyframes buttonPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Ensure the button's pseudo-elements don't extend clickable area */
.cpb-add-to-cart-button::before,
.cpb-add-to-cart-button::after {
  pointer-events: none !important; /* Prevent hover on pseudo-elements */
}

/* Complete reset of cursor behavior throughout the entire action area */
.cpb-actions-btn {
  width: 100%;
  color: #ffffff !important;
  justify-content: center !important;
  background: linear-gradient(to right, #00ACF0, #0095d9) !important;
  border: none !important;
  height: 58px !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease-out;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  display: block; /* Changed back to block from inline-block */
  text-align: center;
  z-index: 2;
  max-width: 100%;
}

/* Fix for the cursor issue - extreme version */
body,
#product-builder,
.cpb-layout,
.cpb-panels-container,
.cpb-product-actions,
.cpb-product-actions-container,
.cpb-actions-row,
.row {
  cursor: default !important;
}

.cpb-product-actions * {
  cursor: default !important;
}

.cpb-actions-btn {
  cursor: pointer !important;
}

/* Force the button to be a block-level element without any side effects */
.cpb-product-actions-container {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Target any parent element that might be causing the issue */
.cpb-product-actions:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/* NUCLEAR OPTION for cursor issue */

/* First, reset ALL cursors on the page */
#product-builder *:not(.cpb-actions-btn) {
  cursor: default !important;
}

/* Create an overlay to block cursor interactions to the right of the button */
.cpb-product-actions {
  position: relative !important;
}

/* Create a blocking element that prevents cursor interactions outside the button */
.cpb-product-actions:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
}

/* Create invisible barriers around the action areas */
.cpb-product-actions:before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100vw; /* Extend to the edge of viewport */
  height: 100%;
  cursor: default !important;
  z-index: 1000;
  pointer-events: auto; /* This will capture cursor events */
}

/* Completely rebuild the button with isolating techniques */
.cpb-actions-btn {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transform: translateZ(0) !important; /* Force GPU rendering */
  isolation: isolate !important; /* CSS isolation */
  color: #ffffff !important;
  background: linear-gradient(to right, #00ACF0, #0095d9) !important;
  border: none !important;
  height: 58px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  transition: all 0.25s ease-out !important;
}

/* Add containment property to every container element */
.cpb-product-actions,
.cpb-product-actions-container,
.cpb-actions-row,
.row {
  contain: layout style paint !important; /* Modern CSS containment */
  isolation: isolate !important;
  overflow: hidden !important;
  max-width: 100% !important;
  position: relative !important;
}

/* Reset any hover effects that might extend */
.cpb-add-to-cart-button::before, 
.cpb-add-to-cart-button::after {
  display: none !important; /* Completely disable any pseudo elements */
}

/* Add direct pointer-events manipulation */
.cpb-actions-btn {
  pointer-events: auto !important;
}

body:not(.cpb-actions-btn),
#product-builder:not(.cpb-actions-btn),
.cpb-layout:not(.cpb-actions-btn),
.cpb-panels-container:not(.cpb-actions-btn),
.cpb-product-actions *:not(.cpb-actions-btn) {
  pointer-events: none !important;
}

/* Re-enable pointer events only within the button */
.cpb-actions-btn * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Mobile Styles - More aggressive fixes based on screenshot */
@media (max-width: 767px) {
/* Product Title */
.cpb-custom-product-title-container .cpb-product-title {
  font-size: 24px !important;
  margin-bottom: 5px;
  line-height: 1.2;
}

/* Pricing */
.cpb-custom-product-price {
  font-size: 28px;
}

.cpb-custom-product-compare-price {
  font-size: 16px;
}

/* Category titles */
.cpb-category-title__inner {
  font-size: 18px;
  margin-top: 25px;
  text-align: center;
  padding-bottom: 10px;
}

.cpb-panel-first .cpb-category-title__inner {
  padding: 10px;
  background-color: #f8f9fa;
}

/* Fix thumbnail grid - more aggressive approach */
.cpb-option-type-multiple {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  justify-content: start !important;
  width: 100% !important;
  margin-bottom: 15px !important;
}

/* Adjust thumbnail size */
.cpb-option-type-img {
  height: auto !important;
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  box-sizing: border-box !important;
  border-width: 1px !important;
  margin: 0 !important;
}

#product-builder .cpb-theme-provider.alpine-white .cpb-option.cpb-option-type-img img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Reset variables that might be causing issues */
:root {
  --image-thumbnail-mobile-size: auto !important;
}

/* Preview container */
#product-builder .cpb-layout:not(.cpb-breakpoint-1000) .cpb-preview-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 100% !important; /* Square aspect ratio */
  margin-bottom: 0 !important;
}

/* Increase button size for better tapping */
.cpb-actions-btn {
  height: 54px !important;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(0, 172, 240, 0.3) !important;
}

/* Overall container layout */
.cpb-preview-wrapper {
  padding: 0 !important;
}

.cpb-panels-container {
  padding: 0 15px !important;
}

/* Add to Cart button positioning */
.cpb-product-actions {
  position: sticky !important;
  bottom: 0 !important;
  padding: 12px 15px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  z-index: 100 !important;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1) !important;
  margin: 0 -15px !important;
  width: 100vw !important;
}

.cpb-product-actions::before {
  font-size: 13px;
  margin-bottom: 6px;
}
}

/* Small phones - even more adjustments */
@media (max-width: 375px) {
.cpb-option-type-multiple {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.cpb-custom-product-title-container .cpb-product-title {
  font-size: 22px !important;
}

.cpb-panels-container {
  padding: 0 10px !important;
}

.cpb-product-actions {
  margin: 0 -10px !important;
}
}

/* Direct targeting of thumbnail container with maximum specificity */
@media screen and (max-width: 767px) {
/* Fix the main container padding */
.cpb-panels-container {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-bottom: 70px !important; /* Space for fixed button */
}

/* Ensure panels have proper padding */
.cpb-panel {
  padding: 0 15px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix the thumbnail grid to use full width */
html body #product-builder .cpb-option-type-multiple,
#product-builder .cpb-option-type-multiple,
.cpb-option-type-multiple {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Direct thumbnail targeting */
html body #product-builder .cpb-option-type-img,
#product-builder .cpb-option-type-img,
.cpb-option-type-img {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-width: 1px !important;
  margin: 0 !important;
}

/* Force thumbnail images to cover properly */
.cpb-option-type-img img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Ensure full-width add to cart button */
.cpb-product-actions {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  padding: 10px 15px !important;
  background: white !important;
  z-index: 9999 !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Button styling */
.cpb-actions-btn {
  width: 100% !important;
  height: 50px !important;
  margin: 0 auto !important;
  display: block !important;
}
}

/* Extra small devices */
@media screen and (max-width: 375px) {
html body #product-builder .cpb-theme-provider .cpb-layout .cpb-panels-container .cpb-option-type-multiple,
body #product-builder .cpb-option-type-multiple,
#product-builder .cpb-option-type-multiple,
.cpb-option-type-multiple {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
}

/* Add !important to key style properties that might be overridden */
#product-builder .cpb-layout:not(.cpb-breakpoint-1000) .cpb-preview-container {
width: 100% !important;
max-width: 100% !important;
}

/* iPhone-specific fixes */
@media screen and (max-width: 767px) {
/* Target the body and panels container to remove any possible padding */
body, html, #shopify-section-product-template, .shopify-section {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Force full width container on mobile */
#product-builder, 
.cpb-panels-container,
.cpb-panel,
.cpb-category,
.cpb-category-content {
  width: 100vw !important;
  max-width: 100vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* Override any parent container margins or paddings */
#product-builder {
  margin: 0 -15px !important;
  width: calc(100% + 30px) !important;
}

/* Only apply padding to the content that needs it, not the grid container */
.cpb-panel {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Reset grid container padding but keep it full width */
.cpb-option-type-multiple {
  width: 100% !important;
  margin: 0 0 15px 0 !important;
  padding: 0 10px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* Extra fix specifically for iPhone */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  .cpb-panel, 
  .cpb-option-type-multiple {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
}

/* Klarna On-Site Messaging Widget Styles */
.cpb-klarna-container {
  margin: 12px 0;
  padding: 0;
  width: 100%;
}

/* Ensure all Klarna placement elements are properly displayed */
.cpb-klarna-container klarna-placement {
  display: block !important;
  max-width: 100%;
  width: 100%;
  margin: 5px 0;
}

/* Fallback div styling */
.cpb-klarna-container .klarna-onsite-messaging {
  display: block !important;
  max-width: 100%;
  width: 100%;
  margin: 5px 0;
}

/* Target the actual Klarna widget container from the HTML */
.cpb-klarna-container .container,
.cpb-klarna-container [data-testid="top-strip-promotion-auto-size"] {
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  border-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Target the specific Klarna placement element */
.cpb-klarna-container klarna-placement-top-strip-promotion-auto-size {
  background: none !important;
  background-color: transparent !important;
}

/* Target the wrapper div that has the background */
.cpb-klarna-container .loaded.top-strip-promotion-auto-size {
  background: none !important;
  background-color: transparent !important;
}

/* Override any conflicting styles that might affect Klarna widgets */
.cpb-klarna-container * {
  box-sizing: border-box;
}

/* Ensure Klarna widgets are visible and not hidden by theme styles */
.cpb-klarna-container [data-key] {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Make sure Klarna's injected content displays properly */
.cpb-klarna-container iframe {
  max-width: 100% !important;
  width: 100% !important;
}

/* Hide empty placements that don't load */
.cpb-klarna-container klarna-placement:empty {
  display: none;
}

.cpb-klarna-container .klarna-onsite-messaging:empty {
  display: none;
}

/* Force left alignment on the message paragraph */
.cpb-klarna-container p[part="osm-message"] {
  text-align: left !important;
  margin: 0 !important;
}

/* Target the container div specifically */
.cpb-klarna-container div[part="osm-container"] {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cpb-klarna-container {
    margin: 8px 0;
  }
}

/* Additional fallback styles for Klarna elements */
klarna-placement,
.klarna-onsite-messaging {
  min-height: 20px;
  display: block;
}

/* Ensure proper spacing in the product builder */
.cpb-custom-prices-container + .cpb-klarna-container {
  margin-top: 12px;
}