/** Shopify CDN: Minification failed Line 1787:0 Unexpected "<" Line 1887:0 Unexpected "<" **/ /* ========================================================= YARKO — PRODUCT PAGE STRUCTURE & CONTROLS --------------------------------------------------------- CLEAN MASTER VERSION ========================================================= */ /* ========================================================= 0. YARKO COLOR VARIABLES --------------------------------------------------------- ADJUST HERE: Change colors ONLY here. ========================================================= */ :root { /* ========================================================= YARKO COLORS ADJUST HERE ========================================================= */ --yarko-red: #DA0D1E; --yarko-blue: #084973; --yarko-yellow: #F9D64A; --yarko-orange: #F3620F; --yarko-black: #020100; --yarko-paper: #FDFFFC; --yarko-amber: #E7A72C; /* ========================================================= DESKTOP CLAMP CONTROLS --------------------------------------------------------- These automatically scale between screen sizes. ========================================================= */ /* Product title */ --yarko-title-size: clamp(38px, 3.2vw, 50px); /* Product price */ --yarko-price-size: clamp(22px, 2vw, 30px); /* Product description */ --yarko-description-size: clamp(12px, 1vw, 14px); /* Variant labels */ --yarko-variant-label-size: clamp(13px, 1vw, 15px); /* Variant button text */ --yarko-variant-first-font: clamp(12px, 1vw, 14px); --yarko-variant-second-font: clamp(11px, 0.9vw, 13px); /* Add to cart / action buttons */ --yarko-action-font: clamp(13px, 1.1vw, 16px); /* Recommendation heading */ --yarko-recommendation-heading: clamp(20px, 2vw, 26px); /* Recommendation title */ --yarko-recommendation-title: clamp(13px, 1.2vw, 16px); /* Recommendation price */ --yarko-recommendation-price: clamp(12px, 1vw, 15px); /* ========================================================= DESKTOP VARIANT CONTROLS ========================================================= */ --yarko-variant-gap-desktop: 14px; --yarko-variant-row-gap-desktop: 14px; --yarko-first-button-height: 72px; --yarko-first-button-min-width: 120px; --yarko-first-button-padding-x: 30px; --yarko-second-button-height: 44px; --yarko-second-button-min-width: 44px; --yarko-second-button-padding-x: 16px; /* ========================================================= DESKTOP QUANTITY CONTROLS DO NOT CHANGE THE BUTTON CLASSES ========================================================= */ --yarko-quantity-width: 200px; --yarko-quantity-height: 100px; --yarko-quantity-button-width: 58px; --yarko-quantity-button-height: 70px; --yarko-quantity-icon-size: 20px; --yarko-quantity-number-size: 22px; /* ========================================================= MOBILE CLAMP CONTROLS --------------------------------------------------------- THESE ARE SEPARATE FROM DESKTOP. Change these without affecting desktop. ========================================================= */ /* Mobile product title */ --yarko-mobile-title-size: clamp(28px, 8vw, 42px); /* Mobile price */ --yarko-mobile-price-size: clamp(18px, 5vw, 30px); /* Mobile description */ --yarko-mobile-description-size: clamp(11px, 3.2vw, 14px); /* Mobile variant labels */ --yarko-mobile-variant-label-size: clamp(11px, 3.2vw, 15px); /* Mobile variant text */ --yarko-mobile-first-font: clamp(9px, 2.8vw, 12px); --yarko-mobile-second-font: clamp(9px, 2.8vw, 12px); /* Mobile action buttons */ --yarko-mobile-action-font: clamp(12px, 3.5vw, 15px); /* Mobile recommendation heading */ --yarko-mobile-recommendation-heading: clamp(16px, 5vw, 24px); /* Mobile recommendation title */ --yarko-mobile-recommendation-title: clamp(12px, 3.5vw, 15px); /* Mobile recommendation price */ --yarko-mobile-recommendation-price: clamp(11px, 3vw, 14px); /* ========================================================= MOBILE VARIANT CONTROLS ========================================================= */ --yarko-variant-gap-mobile: 10px; --yarko-variant-row-gap-mobile: 10px; --yarko-mobile-first-height: clamp(55px, 17vw, 70px); --yarko-mobile-first-min-width: clamp(80px, 25vw, 100px); --yarko-mobile-first-padding-x: clamp(15px, 7vw, 30px); --yarko-mobile-second-height: clamp(38px, 12vw, 44px); --yarko-mobile-second-min-width: clamp(38px, 12vw, 44px); --yarko-mobile-second-padding-x: clamp(10px, 4vw, 16px); /* ========================================================= MOBILE QUANTITY --------------------------------------------------------- KEPT SEPARATE SO YOU CAN ADJUST IT. ========================================================= */ --yarko-mobile-quantity-width: clamp(160px, 55vw, 200px); --yarko-mobile-quantity-height: clamp(75px, 25vw, 100px); --yarko-mobile-quantity-button-width: clamp(45px, 16vw, 58px); --yarko-mobile-quantity-button-height: clamp(55px, 20vw, 70px); --yarko-mobile-quantity-icon-size: clamp(18px, 5vw, 22px); --yarko-mobile-quantity-number-size: clamp(18px, 6vw, 22px); } /* ========================================================= 1. GLOBAL PAGE BACKGROUND ========================================================= */ html, body { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .product-information, .template-product .product-information, product-recommendations { background-color: var(--yarko-orange) !important; background-image: none !important; max-width: 100% !important; overflow-x: hidden !important; } /* ========================================================= 2. DESKTOP PRODUCT GRID --------------------------------------------------------- ADJUST HERE: 45% / 55% controls image/details width. ========================================================= */ @media screen and (min-width: 750px) { .product-information__grid { align-items: start !important; width: 100% !important; max-width: 100% !important; } /* IMAGE LEFT / DETAILS RIGHT */ .product-information__grid:not(.product-information--media-none).product-information--media-left { grid-template-columns: 45% 55% !important; } /* IMAGE RIGHT / DETAILS LEFT */ .product-information__grid:not(.product-information--media-none).product-information--media-right { grid-template-columns: 55% 45% !important; } .product-information__media { align-self: start !important; width: 100% !important; } /* ======================================================= PRODUCT DETAILS ------------------------------------------------------- ADJUST HERE: Padding controls the space around product details. ======================================================= */ .product-information__grid .product-details, .product-details { position: relative !important; width: 100% !important; max-width: 100% !important; align-self: start !important; margin: 0 !important; padding: 10px 24px !important; box-sizing: border-box !important; } } /* ========================================================= 3. PRODUCT TITLE ========================================================= */ .product-information .product-details h1, .product-information .product-details .h1, .product-information .product-details product-title, .product-information .product-details .product-title { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 50px !important; line-height: 2 !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; -webkit-text-stroke: 2px var(--yarko-black) !important; paint-order: stroke fill !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: 4px 4px 0 var(--yarko-blue), 7px 7px 0 var(--yarko-red) !important; margin-top: 0 !important; margin-bottom: 16px !important; display: block !important; width: 100% !important; } /* ========================================================= 4. PRODUCT PRICE ========================================================= */ .product-information .product-details product-price, .product-information .product-details .price { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 30px !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; -webkit-text-stroke: 2px var(--yarko-black) !important; paint-order: stroke fill !important; text-transform: uppercase !important; text-shadow: 3px 3px 0 var(--yarko-black) !important; letter-spacing: 2px !important; margin-bottom: 20px !important; display: block !important; } .product-information .product-details product-price span, .product-information .product-details .price span { font-family: "Powerful", "Arial Black", sans-serif !important; color: inherit !important; -webkit-text-fill-color: inherit !important; -webkit-text-stroke: inherit !important; font-size: inherit !important; } /* ========================================================= 5. PRODUCT DESCRIPTION ========================================================= */ .product-information .product-details .text-block, .product-information .product-details .rte { font-family: "Bungee", "Arial Black", sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; text-transform: uppercase !important; margin-bottom: 20px !important; } /* ========================================================= 6. VARIANT PICKER ========================================================= */ .product-information variant-radios, .product-information variant-selects, .product-information .variant-picker { width: 100% !important; max-width: 100% !important; display: block !important; margin-bottom: 16px !important; } /* ========================================================= 7. VARIANT GROUPS ========================================================= */ .product-information .variant-picker__option, .product-information .variant-option, .product-information variant-radios > fieldset, .product-information variant-selects > fieldset { display: block !important; width: 100% !important; max-width: 100% !important; border: none !important; padding: 0 !important; margin: 0 0 14px 0 !important; } /* ========================================================= 8. VARIANT LABEL ========================================================= */ .product-information .variant-option legend, .product-information .variant-picker fieldset > legend, .product-information .select__label { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 15px !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; -webkit-text-stroke: 1px var(--yarko-black) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 12px !important; display: block !important; width: 100% !important; } /* ========================================================= 9. VARIANT GRID CONTROLLER --------------------------------------------------------- ADJUST HERE: These control spacing between buttons. ========================================================= */ .product-information .variant-option__button-wrapper, .product-information .variant-picker fieldset { display: flex !important; flex-wrap: wrap !important; column-gap: var(--yarko-variant-gap-desktop) !important; row-gap: var(--yarko-variant-row-gap-desktop) !important; border: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; align-items: flex-start !important; justify-content: flex-start !important; } /* ========================================================= 10. DEFAULT VARIANT BUTTON ========================================================= */ .product-information .variant-option__button-label, .product-information .variant-picker input + label { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 8px 16px !important; font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 13px !important; line-height: 1.1 !important; text-transform: uppercase !important; background-color: var(--yarko-amber) !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; border: 3px solid var(--yarko-black) !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; border-radius: 0 !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; cursor: pointer !important; margin: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } /* ========================================================= 11. VARIANT BUTTON TEXT ========================================================= */ .product-information .variant-option__button-label__text, .product-information .variant-picker input + label * { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 13px !important; line-height: 1.1 !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; white-space: nowrap !important; } /* ========================================================= 12. FIRST VARIANT — DESKTOP ========================================================= */ .product-information .variant-picker fieldset:first-of-type .variant-option__button-label, .product-information .variant-picker fieldset:first-of-type input + label { width: auto !important; max-width: max-content !important; min-width: var(--yarko-first-button-min-width) !important; height: var(--yarko-first-button-height) !important; min-height: var(--yarko-first-button-height) !important; padding: 14px var(--yarko-first-button-padding-x) !important; font-size: var(--yarko-first-button-font-size) !important; line-height: 1.1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; background-color: var(--yarko-amber) !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; border: 3px solid var(--yarko-black) !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; } /* ========================================================= 13. FIRST VARIANT TEXT ========================================================= */ .product-information .variant-picker fieldset:first-of-type .variant-option__button-label__text, .product-information .variant-picker fieldset:first-of-type input + label * { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: var(--yarko-first-button-font-size) !important; line-height: 1.1 !important; white-space: nowrap !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; } /* ========================================================= 14. SECOND VARIANT — DESKTOP ========================================================= */ .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label, .product-information .variant-picker fieldset:nth-of-type(2) input + label { width: auto !important; max-width: max-content !important; min-width: var(--yarko-second-button-min-width) !important; height: var(--yarko-second-button-height) !important; min-height: var(--yarko-second-button-height) !important; padding: 8px var(--yarko-second-button-padding-x) !important; font-size: var(--yarko-second-button-font-size) !important; line-height: 1.1 !important; flex: 0 0 auto !important; background-color: var(--yarko-amber) !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; } /* ========================================================= 15. SECOND VARIANT TEXT ========================================================= */ .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label__text, .product-information .variant-picker fieldset:nth-of-type(2) input + label * { font-size: var(--yarko-second-button-font-size) !important; line-height: 1 !important; white-space: nowrap !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; } /* ========================================================= 16. SELECTED VARIANT ========================================================= */ .product-information .variant-option__button-label:has(input:checked), .product-information .variant-picker input:checked + label { background-color: var(--yarko-blue) !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; border: 3px solid var(--yarko-black) !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; opacity: 1 !important; width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } /* ========================================================= 17. SELECTED TEXT ========================================================= */ .product-information .variant-option__button-label:has(input:checked) .variant-option__button-label__text, .product-information .variant-picker input:checked + label * { color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; background: transparent !important; opacity: 1 !important; } /* ========================================================= 18. FIRST VARIANT — SELECTED ========================================================= */ .product-information .variant-picker fieldset:first-of-type .variant-option__button-label:has(input:checked), .product-information .variant-picker fieldset:first-of-type input:checked + label { background-color: var(--yarko-blue) !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; border: 3px solid var(--yarko-black) !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; min-width: var(--yarko-first-button-min-width) !important; height: var(--yarko-first-button-height) !important; min-height: var(--yarko-first-button-height) !important; padding: 14px var(--yarko-first-button-padding-x) !important; } /* ========================================================= 19. FIRST VARIANT SELECTED TEXT ========================================================= */ .product-information .variant-picker fieldset:first-of-type .variant-option__button-label:has(input:checked) .variant-option__button-label__text, .product-information .variant-picker fieldset:first-of-type input:checked + label * { color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; font-size: var(--yarko-first-button-font-size) !important; background: transparent !important; } /* ========================================================= 20. SECOND VARIANT — SELECTED ========================================================= */ .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label:has(input:checked), .product-information .variant-picker fieldset:nth-of-type(2) input:checked + label { background-color: var(--yarko-blue) !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; border: 3px solid var(--yarko-black) !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; min-width: var(--yarko-second-button-min-width) !important; height: var(--yarko-second-button-height) !important; min-height: var(--yarko-second-button-height) !important; padding: 8px var(--yarko-second-button-padding-x) !important; } /* ========================================================= 21. SECOND VARIANT SELECTED TEXT ========================================================= */ .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label:has(input:checked) .variant-option__button-label__text, .product-information .variant-picker fieldset:nth-of-type(2) input:checked + label * { color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; font-size: var(--yarko-second-button-font-size) !important; background: transparent !important; } /* ========================================================= 22. QUANTITY SELECTOR --------------------------------------------------------- ADJUST HERE: Main quantity box size. ========================================================= */ .product-details quantity-selector, .product-details .quantity-selector, .template-product .quantity-selector { width: var(--yarko-quantity-width) !important; min-width: var(--yarko-quantity-width) !important; height: var(--yarko-quantity-height) !important; min-height: var(--yarko-quantity-height) !important; background-color: var(--yarko-yellow) !important; border: 5px solid var(--yarko-black) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 var(--yarko-black) !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 8px !important; margin-bottom: 20px !important; box-sizing: border-box !important; overflow: visible !important; } /* ========================================================= 23. QUANTITY NUMBER --------------------------------------------------------- FIXED: Your old CSS accidentally had min-height:702px. ========================================================= */ .product-details quantity-selector input[type="number"], .product-details .quantity-selector input[type="number"], .template-product .quantity-selector input[type="number"] { width: 70px !important; min-width: 70px !important; height: 70px !important; min-height: 70px !important; line-height: 70px !important; font-family: "Powerful", "Arial Black", sans-serif !important; font-size: var(--yarko-quantity-number-size) !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; text-align: center !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; appearance: textfield !important; } /* Remove browser number arrows */ .product-details quantity-selector input[type="number"]::-webkit-inner-spin-button, .product-details quantity-selector input[type="number"]::-webkit-outer-spin-button, .product-details .quantity-selector input[type="number"]::-webkit-inner-spin-button, .product-details .quantity-selector input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; } /* ========================================================= YARKO — FORCE MINUS BUTTON ICON ========================================================= */ .product-details button.quantity-minus, .product-details quantity-selector button.quantity-minus, .product-details .quantity-selector button.quantity-minus { position: relative !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; font-family: "Arial Black", Arial, sans-serif !important; font-size: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; } /* Draw the minus symbol */ .product-details button.quantity-minus::after, .product-details quantity-selector button.quantity-minus::after, .product-details .quantity-selector button.quantity-minus::after { content: "−" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 32px !important; font-weight: 900 !important; line-height: 1 !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 999 !important; } /* ========================================================= 25. QUANTITY SVG — HIDE BROKEN SHOPIFY ICON --------------------------------------------------------- We are intentionally hiding Shopify's SVG because your theme is not displaying it correctly. ========================================================= */ .product-details quantity-selector button svg, .product-details .quantity-selector button svg, .product-details quantity-selector button svg *, .product-details .quantity-selector button svg * { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ========================================================= 26. QUANTITY TEXT ICON FALLBACK --------------------------------------------------------- IMPORTANT: This creates visible + / - symbols using the button itself instead of Shopify's SVG. BLUE = requested icon color. ========================================================= */ .product-details quantity-selector button.quantity-minus::before, .product-details .quantity-selector button.quantity-minus::before, .product-details quantity-selector .quantity-minus::before, .product-details .quantity-selector .quantity-minus::before { content: "−" !important; display: block !important; font-family: "Powerful", "Arial Black", sans-serif !important; font-size: var(--yarko-quantity-icon-size) !important; font-weight: 900 !important; line-height: 1 !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; visibility: visible !important; opacity: 1 !important; } .product-details quantity-selector button.quantity-plus::before, .product-details .quantity-selector button.quantity-plus::before, .product-details quantity-selector .quantity-plus::before, .product-details .quantity-selector .quantity-plus::before { content: "+" !important; display: block !important; font-family: "Powerful", "Arial Black", sans-serif !important; font-size: var(--yarko-quantity-icon-size) !important; font-weight: 900 !important; line-height: 1 !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; visibility: visible !important; opacity: 1 !important; } /* ========================================================= 27. EXTRA QUANTITY FALLBACK --------------------------------------------------------- Some Shopify themes don't use .quantity-plus or .quantity-minus. This catches buttons based on their position. ========================================================= */ .product-details quantity-selector > button:first-child::before, .product-details .quantity-selector > button:first-child::before { content: "−" !important; font-family: "Powerful", "Arial Black", sans-serif !important; font-size: var(--yarko-quantity-icon-size) !important; font-weight: 900 !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; display: block !important; } .product-details quantity-selector > button:last-child::before, .product-details .quantity-selector > button:last-child::before { content: "+" !important; font-family: "Powerful", "Arial Black", sans-serif !important; font-size: var(--yarko-quantity-icon-size) !important; font-weight: 900 !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; display: block !important; } /* ========================================================= 28. ACTION BUTTONS --------------------------------------------------------- */ .product-information .product-details button, .product-information .product-details .button, .product-information .product-details .add-to-cart-button { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 16px !important; text-transform: uppercase !important; background: var(--yarko-red) !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; border: 4px solid var(--yarko-black) !important; box-shadow: 5px 5px 0 var(--yarko-black) !important; padding: 12px 20px !important; cursor: pointer !important; margin-top: 10px !important; border-radius: 0 !important; } /* ========================================================= 29. REMOVE STICKY ADD-TO-CART ========================================================= */ .sticky-add-to-cart, .sticky-add-to-cart-bar, .sticky-cart, .sticky-cart-bar, .sticky-product-form, .product-form--sticky, .product-information__sticky, .product-information-sticky, .product-sticky-add-to-cart, [data-sticky-add-to-cart], [data-sticky-product-form], [data-product-sticky], [data-sticky="true"], [class*="sticky-add-to-cart"], [class*="sticky_product"], [class*="sticky-product"], [class*="product-sticky"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: static !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; } /* ========================================================= 30. PRODUCT RECOMMENDATIONS — HEADINGS ========================================================= */ product-recommendations .section-resource-list__content, product-recommendations [class*="heading"], product-recommendations [class*="title"], product-recommendations h2, product-recommendations h3 { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 26px !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; -webkit-text-stroke: 2px var(--yarko-black) !important; paint-order: stroke fill !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: 2px 2px 0 var(--yarko-blue) !important; text-align: center !important; } /* ========================================================= 31. RECOMMENDATION CARDS ========================================================= */ product-recommendations .resource-list__item, product-recommendations [class*="product-card"] { background: var(--yarko-blue) !important; border: 4px solid var(--yarko-black) !important; box-shadow: 5px 5px 0 var(--yarko-black) !important; border-radius: 0 !important; } /* ========================================================= 32. RECOMMENDATION CARD TITLE ========================================================= */ product-recommendations [class*="product-card"] [class*="title"] { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 16px !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; text-transform: uppercase !important; padding: 8px !important; } /* ========================================================= 33. RECOMMENDATION CARD PRICE ========================================================= */ product-recommendations [class*="product-card"] [class*="price"] { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: 15px !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; padding: 0 8px 8px 8px !important; } /* ========================================================= 34. HIDE RECOMMENDATION QUICK-ADD ========================================================= */ product-recommendations button, product-recommendations .button, product-recommendations [class*="quick-add"] { display: none !important; } /* ========================================================= YARKO — DESKTOP RESPONSIVE CLAMP --------------------------------------------------------- DESKTOP ONLY ========================================================= */ @media screen and (min-width: 750px) { /* PRODUCT TITLE */ .product-information .product-details h1, .product-information .product-details .h1, .product-information .product-details product-title, .product-information .product-details .product-title { font-size: var(--yarko-title-size) !important; } /* PRODUCT PRICE */ .product-information .product-details product-price, .product-information .product-details .price { font-size: var(--yarko-price-size) !important; } /* DESCRIPTION */ .product-information .product-details .text-block, .product-information .product-details .rte { font-size: var(--yarko-description-size) !important; } /* VARIANT LABEL */ .product-information .variant-option legend, .product-information .variant-picker fieldset > legend, .product-information .select__label { font-size: var(--yarko-variant-label-size) !important; } /* FIRST VARIANT */ .product-information .variant-picker fieldset:first-of-type .variant-option__button-label, .product-information .variant-picker fieldset:first-of-type input + label { font-size: var(--yarko-variant-first-font) !important; } .product-information .variant-picker fieldset:first-of-type .variant-option__button-label__text, .product-information .variant-picker fieldset:first-of-type input + label * { font-size: var(--yarko-variant-first-font) !important; } /* SECOND VARIANT */ .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label, .product-information .variant-picker fieldset:nth-of-type(2) input + label { font-size: var(--yarko-variant-second-font) !important; } .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label__text, .product-information .variant-picker fieldset:nth-of-type(2) input + label * { font-size: var(--yarko-variant-second-font) !important; } /* ACTION BUTTONS */ .product-information .product-details button, .product-information .product-details .button, .product-information .product-details .add-to-cart-button { font-size: var(--yarko-action-font) !important; } /* RECOMMENDATIONS */ product-recommendations .section-resource-list__content, product-recommendations [class*="heading"], product-recommendations [class*="title"], product-recommendations h2, product-recommendations h3 { font-size: var(--yarko-recommendation-heading) !important; } product-recommendations [class*="product-card"] [class*="title"] { font-size: var(--yarko-recommendation-title) !important; } product-recommendations [class*="product-card"] [class*="price"] { font-size: var(--yarko-recommendation-price) !important; } } /* ========================================================= 35. MOBILE CONTROLS ========================================================= */ @media screen and (max-width: 749px) { /* ======================================================= MOBILE RECOMMENDATION HEADING ======================================================= */ product-recommendations .section-resource-list__content, product-recommendations [class*="heading"], product-recommendations h2, product-recommendations h3 { font-size: var(--yarko-mobile-recommendation-heading) !important; } /* ======================================================= MOBILE PRODUCT BUTTONS ======================================================= */ .product-information .product-details button, .product-information .product-details .button, .add-to-cart-button { font-size: 14px !important; padding: 8px 14px !important; border-width: 3px !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; } /* ======================================================= MOBILE QUANTITY BOX ------------------------------------------------------- CENTER FIX: Centers the actual quantity controls, not just the box. ======================================================= */ .product-details quantity-selector, .product-details .quantity-selector, .template-product .quantity-selector { width: var(--yarko-mobile-quantity-width) !important; min-width: var(--yarko-mobile-quantity-width) !important; max-width: var(--yarko-mobile-quantity-width) !important; height: var(--yarko-mobile-quantity-height) !important; min-height: var(--yarko-mobile-quantity-height) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* ======================================================= MOBILE QUANTITY BUTTONS ------------------------------------------------------- CENTER FIX: Keeps − / number / + centered as one group. ======================================================= */ .product-details quantity-selector button, .product-details .quantity-selector button, .product-details .quantity-minus, .product-details .quantity-plus { width: var(--yarko-mobile-quantity-button-width) !important; min-width: var(--yarko-mobile-quantity-button-width) !important; height: var(--yarko-mobile-quantity-button-height) !important; min-height: var(--yarko-mobile-quantity-button-height) !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 var(--yarko-mobile-quantity-button-width) !important; } /* ======================================================= MOBILE QUANTITY NUMBER ------------------------------------------------------- Keeps the number exactly in the middle of − and +. ======================================================= */ /* ======================================================= MOBILE QUANTITY NUMBER ======================================================= */ .product-details quantity-selector input[type="number"], .product-details .quantity-selector input[type="number"] { width: 70px !important; min-width: 70px !important; height: 70px !important; min-height: 70px !important; line-height: 70px !important; font-size: var(--yarko-mobile-quantity-number-size) !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; text-align: center !important; padding: 0 !important; margin: 0 !important; flex: 0 0 70px !important; box-sizing: border-box !important; } /* ======================================================= MOBILE VARIANT GRID ======================================================= */ .product-information .variant-option__button-wrapper, .product-information .variant-picker fieldset { column-gap: var(--yarko-variant-gap-mobile) !important; row-gap: var(--yarko-variant-row-gap-mobile) !important; } /* ======================================================= MOBILE FIRST VARIANT ======================================================= */ .product-information .variant-picker fieldset:first-of-type .variant-option__button-label, .product-information .variant-picker fieldset:first-of-type input + label { width: auto !important; max-width: max-content !important; min-width: var(--yarko-mobile-first-min-width) !important; height: var(--yarko-mobile-first-height) !important; min-height: var(--yarko-mobile-first-height) !important; padding: 10px var(--yarko-mobile-first-padding-x) !important; font-size: var(--yarko-mobile-first-font-size) !important; line-height: 1.1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; } /* MOBILE FIRST TEXT */ .product-information .variant-picker fieldset:first-of-type .variant-option__button-label__text, .product-information .variant-picker fieldset:first-of-type input + label * { font-family: "Powerful", "Arial Black", sans-serif !important; font-size: var(--yarko-mobile-first-font-size) !important; line-height: 1.1 !important; white-space: nowrap !important; color: var(--yarko-blue) !important; -webkit-text-fill-color: var(--yarko-blue) !important; } /* MOBILE FIRST SELECTED */ .product-information .variant-picker fieldset:first-of-type input:checked + label, .product-information .variant-picker fieldset:first-of-type .variant-option__button-label:has(input:checked) { background-color: var(--yarko-blue) !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; border: 3px solid var(--yarko-black) !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; min-width: var(--yarko-mobile-first-min-width) !important; height: var(--yarko-mobile-first-height) !important; min-height: var(--yarko-mobile-first-height) !important; padding: 10px var(--yarko-mobile-first-padding-x) !important; } /* ======================================================= MOBILE SECOND VARIANT ======================================================= */ .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label, .product-information .variant-picker fieldset:nth-of-type(2) input + label { width: auto !important; max-width: max-content !important; min-width: var(--yarko-mobile-second-min-width) !important; height: var(--yarko-mobile-second-height) !important; min-height: var(--yarko-mobile-second-height) !important; padding: 10px var(--yarko-mobile-second-padding-x) !important; font-size: var(--yarko-mobile-second-font-size) !important; line-height: 1 !important; flex: 0 0 auto !important; } /* MOBILE SECOND SELECTED */ .product-information .variant-picker fieldset:nth-of-type(2) input:checked + label, .product-information .variant-picker fieldset:nth-of-type(2) .variant-option__button-label:has(input:checked) { background-color: var(--yarko-blue) !important; color: var(--yarko-yellow) !important; -webkit-text-fill-color: var(--yarko-yellow) !important; border: 3px solid var(--yarko-black) !important; box-shadow: 3px 3px 0 var(--yarko-black) !important; min-width: var(--yarko-mobile-second-min-width) !important; height: var(--yarko-mobile-second-height) !important; min-height: var(--yarko-mobile-second-height) !important; padding: 8px var(--yarko-mobile-second-padding-x) !important; } /* ======================================================= MOBILE RECOMMENDATION CARDS ======================================================= */ product-recommendations .resource-list__item { border-width: 3px !important; box-shadow: 4px 4px 0 var(--yarko-black) !important; } } /* ========================================================= YARKO — ZOOMED GALLERY REMOVE THUMBNAIL NAVIGATION ========================================================= */ .dialog-zoomed-gallery__dialog .dialog-thumbnails-list { display: none !important; } /* ========================================================= YARKO — MOBILE ZOOM VIEWER ========================================================= */ @media screen and (max-width: 749px) { .dialog-zoomed-gallery__dialog { width: 100vw !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .dialog-zoomed-gallery { width: 100% !important; height: 100% !important; display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-x !important; } .dialog-zoomed-gallery::-webkit-scrollbar { display: none !important; } .dialog-zoomed-gallery > li { flex: 0 0 100% !important; width: 100% !important; height: 100% !important; scroll-snap-align: center !important; touch-action: pan-x !important; } } /* ========================================================= 36. FINAL STICKY CART SAFETY LOCK --------------------------------------------------------- STICKY ADD-TO-CART IS COMPLETELY REMOVED. ========================================================= */ @media screen and (min-width: 1px) { .sticky-add-to-cart, .sticky-add-to-cart-bar, .sticky-cart, .sticky-cart-bar, .sticky-product-form, .product-form--sticky, .product-information__sticky, .product-information-sticky, .product-sticky-add-to-cart, [data-sticky-add-to-cart], [data-sticky-product-form], [data-product-sticky], [data-sticky="true"], [class*="sticky-add-to-cart"], [class*="sticky_product"], [class*="sticky-product"], [class*="product-sticky"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; } } /* ========================================================= YARKO — PRODUCT MEDIA CARD ========================================================= */ .product-information__media { width: 100% !important; background: var(--yarko-paper) !important; border: 5px solid var(--yarko-black) !important; box-shadow: 8px 8px 0 var(--yarko-black) !important; padding: 16px !important; box-sizing: border-box !important; position: relative !important; } /* Keep the gallery clean inside the card */ .product-information__media .product-media-gallery, .product-information__media media-gallery, .product-information__media slideshow-component { width: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Keep product images contained */ .product-information__media img { width: 100% !important; height: auto !important; object-fit: contain !important; background: transparent !important; } marquee-component .marquee__repeated-items, marquee-component .marquee__repeated-items * { font-family: 'Powerful' !important; text-transform: uppercase !important; } .gps rfm-marquee, .gps rfm-child, .gps rfm-marquee * { font-family: 'Powerful' !important text-transform: uppercase !important }