/* SAFE Anti-FOUC CSS scoped to body.tepp-standard-layout */ @media (max-width: 849px) { body.tepp-standard-layout .product_title.tepp-mobile-title, body.tepp-standard-layout .product_title.show-product-images-mobile, body.tepp-standard-layout .summary-before .product_title, body.tepp-standard-layout .tepp-desktop-header-top { display: none !important; } } body.tepp-standard-layout .summary-before .product_meta, body.tepp-standard-layout .tepp-fast-stars { display: none !important; } body.tepp-standard-layout div[itemprop="description"], body.tepp-standard-layout .woocommerce-product-details__short-description { display: none !important; } body.tepp-standard-layout .price, body.tepp-standard-layout p.price, body.tepp-standard-layout .product-price { display: none !important; } body.tepp-standard-layout form.cart { display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } body.tepp-standard-layout .wpo-options-container { order: 1 !important; margin-bottom: 24px; } body.tepp-standard-layout .tepp-injected-bottom { order: 2 !important; } body.tepp-standard-layout .tepp-bulk-price-row { order: 3 !important; } /* Native Add to Basket styling */ body.tepp-standard-layout button[name="add-to-cart"] { width: 100% !important; height: 64px !important; background-color: #303E4D !important; color: white !important; border-radius: 16px !important; font-size: 18px !important; font-weight: 700 !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 10px 0 !important; order: 5 !important; } body.tepp-standard-layout button[name="add-to-cart"]:hover { background-color: #1e293b !important; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; } .tepp-standard-layout button[name="add-to-cart"]::before { content: "" !important; display: inline-block !important; width: 20px !important; height: 20px !important; margin-right: 8px !important; background-image: url("data:image/svg+xml,%3Csvg fill=\'none\' stroke=\'white\' viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\'%3E%3C/path%3E%3C/svg%3E") !important; background-size: cover !important; } /* Hide theme-injected icons to prevent overlapping */ .tepp-standard-layout button[name="add-to-cart"]::after { display: none !important; content: none !important; } /* HIDE NATIVE SAMPLE BUTTON */ .single_add_sample_to_cart_button, .single_add_sample_to_cart_button_ngl { display: none !important; } .tepp-standard-layout button[name="add-to-cart"] svg, .tepp-standard-layout button[name="add-to-cart"] span { display: none !important; } .tepp-standard-layout button[name="add-to-cart"].added::before { background-image: url("data:image/svg+xml,%3Csvg fill=\'none\' stroke=\'white\' viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'3\' d=\'M5 13l4 4L19 7\'%3E%3C/path%3E%3C/svg%3E") !important; } /* Let their AJAX plugin change the background to green via its native classes like .added or .loading */ body.tepp-standard-layout button[name="add-to-cart"].added, body.tepp-standard-layout button[name="add-to-cart"].rvvup-added { background-color: #16a34a !important; /* Tailwind green-600 */ } body.tepp-standard-layout .wpo-totals-container { order: 6 !important; } body.tepp-standard-layout .woocommerce-variation-add-to-cart { display: flex !important; flex-direction: column !important; } body.tepp-standard-layout .woocommerce-product-gallery { display: none !important; } body.tepp-standard-layout .woocommerce-tabs.wc-tabs-wrapper { display: none !important; } body.tepp-standard-layout .tiered-pricing-wrapper { display: none !important; } body.tepp-standard-layout #tepp-modal-table-container .tiered-pricing-wrapper { display: block !important; } /* Customise With Print Banner */ body.tepp-standard-layout .tepp-print-banner-wrapper { margin: 0 auto 32px auto; max-width: 1280px; padding: 0 24px; } body.tepp-standard-layout .tepp-print-banner { background: linear-gradient(135deg, #FF4F5E 0%, #e11d48 100%); border-radius: 16px; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 10px 25px -5px rgba(255, 79, 94, 0.3); flex-wrap: wrap; gap: 24px; } body.tepp-standard-layout .tepp-print-banner-left { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; /* allows text to wrap on small screens */ } body.tepp-standard-layout .tepp-print-banner-icon { background: rgba(255,255,255,0.2); padding: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); flex-shrink: 0; } body.tepp-standard-layout .tepp-print-banner-icon img { width: 40px; height: 40px; filter: brightness(0) invert(1); } body.tepp-standard-layout .tepp-print-banner h3 { margin: 0 0 6px 0; color: #ffffff; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; font-family: inherit; } body.tepp-standard-layout .tepp-print-banner p { margin: 0; color: rgba(255,255,255,0.9); font-size: 16px; font-family: inherit; line-height: 1.4; } body.tepp-standard-layout .tepp-print-banner-btn { background: #ffffff; color: #e11d48; border: none; padding: 16px 32px; border-radius: 999px; font-weight: 700; font-size: 16px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1); white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; flex-shrink: 0; } body.tepp-standard-layout .tepp-print-banner-btn svg { width: 22px; height: 22px; stroke-width: 2.5px; } /* Mobile Responsive adjustments */ @media (max-width: 767px) { body.tepp-standard-layout .tepp-print-banner-wrapper { padding: 0 16px; margin-bottom: 24px; } body.tepp-standard-layout .tepp-print-banner { padding: 20px; flex-direction: column; align-items: stretch; gap: 16px; text-align: center; } body.tepp-standard-layout .tepp-print-banner-left { flex-direction: column; gap: 12px; text-align: center; } body.tepp-standard-layout .tepp-print-banner-icon { padding: 12px; } body.tepp-standard-layout .tepp-print-banner-icon img { width: 32px; height: 32px; } body.tepp-standard-layout .tepp-print-banner h3 { font-size: 20px; } body.tepp-standard-layout .tepp-print-banner p { font-size: 14px; } body.tepp-standard-layout .tepp-print-banner-btn { width: 100%; padding: 14px 20px; } } .wpo-field label, .wpo-image-button, .wpo-image-label, .wpo-choice-label, .wpo-choice-name { overflow: visible !important; } .wpo-image-buttons, .wpo-image-buttons-below, .wpo-radios, .wpo-options-container, .wpo-field { overflow: visible !important; } .wpo-field input[type="radio"] + label img, .wpo-field input[type="checkbox"] + label img, .wpo-image-button img { border-radius: 10px 10px 0 0 !important; } .wpo-image-wrap img { border-radius: 10px 10px 0 0 !important; } .wpo-image-button, .wpo-radio { position: relative; z-index: 1; } .wpo-image-button:hover, .wpo-radio:hover, .wpo-field label:hover { z-index: 9999999 !important; } /* PURE CSS TOOLTIPS FOR FOLD OPTIONS */ /* Restrict hover to just the i icon */ label[aria-label^="No Crease"] .wpo-image-text, label[aria-label^="Single Fold"] .wpo-image-text, label[aria-label^="Double Fold"] .wpo-image-text, label[aria-label^="Gate Fold"] .wpo-image-text { pointer-events: none; position: relative !important; border-radius: 0 0 10px 10px !important; } /* Ensure border radius for selected states inside wpo-image-wrap */ .wpo-image-text { border-radius: 0 0 10px 10px !important; } /* The Icon */ label[aria-label^="No Crease"] .wpo-image-label::after, label[aria-label^="Single Fold"] .wpo-image-label::after, label[aria-label^="Double Fold"] .wpo-image-label::after, label[aria-label^="Gate Fold"] .wpo-image-label::after { pointer-events: auto; /* Enable hover ONLY on the icon */ content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -3px; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2394a3b8\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; cursor: help; transition: all 0.2s; } label[aria-label^="No Crease"] .wpo-image-label:hover::after, label[aria-label^="Single Fold"] .wpo-image-label:hover::after, label[aria-label^="Double Fold"] .wpo-image-label:hover::after, label[aria-label^="Gate Fold"] .wpo-image-label:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23475569\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); } /* The Tooltip Box */ label[aria-label^="No Crease"] .wpo-image-text::before, label[aria-label^="Single Fold"] .wpo-image-text::before, label[aria-label^="Double Fold"] .wpo-image-text::before, label[aria-label^="Gate Fold"] .wpo-image-text::before { position: absolute; z-index: 9999999; bottom: 100%; left: 50%; transform: translateX(calc(-50% + 35px)) translateY(-10px); width: 250px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; font-weight: 500; white-space: pre-wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Content Strings */ label[aria-label^="No Crease"] .wpo-image-text::before { content: "This will be supplied as a flat sheet, with no creases."; } label[aria-label^="Single Fold"] .wpo-image-text::before { content: "We will crease the centre of the sheet to turn it into a greetings card, and supply it to you un-folded."; } label[aria-label^="Double Fold"] .wpo-image-text::before { content: "We will add two creases, with one side slightly shorter so you can fold one half inside the other half. This will be supplied unfolded."; } label[aria-label^="Gate Fold"] .wpo-image-text::before { content: "We will add two creases, both of equal distance from the centre of the card, so you can fold both sides to meet perfectly in the middle. This will be supplied unfolded."; } /* The Arrow */ label[aria-label^="No Crease"] .wpo-image-text::after, label[aria-label^="Single Fold"] .wpo-image-text::after, label[aria-label^="Double Fold"] .wpo-image-text::after, label[aria-label^="Gate Fold"] .wpo-image-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: 29px; transform: translateY(-4px); border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; z-index: 9999999; } /* Hover Actions */ label[aria-label^="No Crease"] .wpo-image-text:hover::before, label[aria-label^="Single Fold"] .wpo-image-text:hover::before, label[aria-label^="Double Fold"] .wpo-image-text:hover::before, label[aria-label^="Gate Fold"] .wpo-image-text:hover::before { opacity: 1; visibility: visible; transform: translateX(calc(-50% + 35px)) translateY(-2px); } label[aria-label^="No Crease"] .wpo-image-text:hover::after, label[aria-label^="Single Fold"] .wpo-image-text:hover::after, label[aria-label^="Double Fold"] .wpo-image-text:hover::after, label[aria-label^="Gate Fold"] .wpo-image-text:hover::after { opacity: 1; visibility: visible; transform: translateY(10px); } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } /* Remove 2-3px extra gap */ form.cart .clear, .clear, form.cart::after { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } form.cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .tepp-mobile-header-top { display: none; } @media (min-width: 850px) { .tepp-redesign-gallery-wrapper { margin-top: -14px; } } @media (max-width: 849px) { .tepp-mobile-header-top { display: block !important; } /* Hide the default theme mobile titles AND our custom desktop header in the right column */ .product_title.tepp-mobile-title, .product_title.show-product-images-mobile, .summary-before .product_title, .tepp-desktop-header-top { display: none !important; } .tepp-bulk-price-row { flex-direction: column !important; align-items: center !important; gap: 12px !important; justify-content: center !important; } .tepp-bulk-price-row > span { margin-left: 0 !important; text-align: center !important; } } .wpo-field label, .wpo-image-button, .wpo-image-label, .wpo-choice-label, .wpo-choice-name { overflow: visible !important; } .wpo-image-buttons, .wpo-image-buttons-below, .wpo-radios, .wpo-options-container, .wpo-field { overflow: visible !important; } .wpo-field input[type="radio"] + label img, .wpo-field input[type="checkbox"] + label img, .wpo-image-button img { border-radius: 10px 10px 0 0 !important; } .wpo-image-wrap img { border-radius: 10px 10px 0 0 !important; } .wpo-image-button, .wpo-radio { position: relative; z-index: 1; } .wpo-image-button:hover, .wpo-radio:hover, .wpo-field label:hover { z-index: 9999999 !important; } /* PURE CSS TOOLTIPS FOR FOLD OPTIONS */ /* Restrict hover to just the i icon */ label[aria-label^="No Crease"] .wpo-image-text, label[aria-label^="Single Fold"] .wpo-image-text, label[aria-label^="Double Fold"] .wpo-image-text, label[aria-label^="Gate Fold"] .wpo-image-text { pointer-events: none; position: relative !important; border-radius: 0 0 10px 10px !important; } /* Ensure border radius for selected states inside wpo-image-wrap */ .wpo-image-text { border-radius: 0 0 10px 10px !important; } /* The Icon */ label[aria-label^="No Crease"] .wpo-image-label::after, label[aria-label^="Single Fold"] .wpo-image-label::after, label[aria-label^="Double Fold"] .wpo-image-label::after, label[aria-label^="Gate Fold"] .wpo-image-label::after { pointer-events: auto; /* Enable hover ONLY on the icon */ content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -3px; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2394a3b8\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; cursor: help; transition: all 0.2s; } label[aria-label^="No Crease"] .wpo-image-label:hover::after, label[aria-label^="Single Fold"] .wpo-image-label:hover::after, label[aria-label^="Double Fold"] .wpo-image-label:hover::after, label[aria-label^="Gate Fold"] .wpo-image-label:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23475569\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); } /* The Tooltip Box */ label[aria-label^="No Crease"] .wpo-image-text::before, label[aria-label^="Single Fold"] .wpo-image-text::before, label[aria-label^="Double Fold"] .wpo-image-text::before, label[aria-label^="Gate Fold"] .wpo-image-text::before { position: absolute; z-index: 9999999; bottom: 100%; left: 50%; transform: translateX(calc(-50% + 35px)) translateY(-10px); width: 250px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; font-weight: 500; white-space: pre-wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Content Strings */ label[aria-label^="No Crease"] .wpo-image-text::before { content: "This will be supplied as a flat sheet, with no creases."; } label[aria-label^="Single Fold"] .wpo-image-text::before { content: "We will crease the centre of the sheet to turn it into a greetings card, and supply it to you un-folded."; } label[aria-label^="Double Fold"] .wpo-image-text::before { content: "We will add two creases, with one side slightly shorter so you can fold one half inside the other half. This will be supplied unfolded."; } label[aria-label^="Gate Fold"] .wpo-image-text::before { content: "We will add two creases, both of equal distance from the centre of the card, so you can fold both sides to meet perfectly in the middle. This will be supplied unfolded."; } /* The Arrow */ label[aria-label^="No Crease"] .wpo-image-text::after, label[aria-label^="Single Fold"] .wpo-image-text::after, label[aria-label^="Double Fold"] .wpo-image-text::after, label[aria-label^="Gate Fold"] .wpo-image-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: 29px; transform: translateY(-4px); border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; z-index: 9999999; } /* Hover Actions */ label[aria-label^="No Crease"] .wpo-image-text:hover::before, label[aria-label^="Single Fold"] .wpo-image-text:hover::before, label[aria-label^="Double Fold"] .wpo-image-text:hover::before, label[aria-label^="Gate Fold"] .wpo-image-text:hover::before { opacity: 1; visibility: visible; transform: translateX(calc(-50% + 35px)) translateY(-2px); } label[aria-label^="No Crease"] .wpo-image-text:hover::after, label[aria-label^="Single Fold"] .wpo-image-text:hover::after, label[aria-label^="Double Fold"] .wpo-image-text:hover::after, label[aria-label^="Gate Fold"] .wpo-image-text:hover::after { opacity: 1; visibility: visible; transform: translateY(10px); } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } /* Remove 2-3px extra gap */ form.cart .clear, .clear, form.cart::after { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } form.cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide the ugly native SKU floating above the images and rogue injected star blocks */ .summary-before .product_meta, .tepp-fast-stars { display: none !important; } .tepp-main-image-wrapper:hover img { transform: scale(2); } @media (min-width: 850px) { /* Force Porto theme column wrappers to 60/40 split by beating their specificity */ body.single-product .product-summary-wrap > .row > .summary-before { max-width: 60% !important; flex: 0 0 60% !important; width: 60% !important; padding-right: 40px !important; } body.single-product .product-summary-wrap > .row > .summary.entry-summary { max-width: 40% !important; flex: 0 0 40% !important; width: 40% !important; } } .wpo-field label, .wpo-image-button, .wpo-image-label, .wpo-choice-label, .wpo-choice-name { overflow: visible !important; } .wpo-image-buttons, .wpo-image-buttons-below, .wpo-radios, .wpo-options-container, .wpo-field { overflow: visible !important; } .wpo-field input[type="radio"] + label img, .wpo-field input[type="checkbox"] + label img, .wpo-image-button img { border-radius: 10px 10px 0 0 !important; } .wpo-image-wrap img { border-radius: 10px 10px 0 0 !important; } .wpo-image-button, .wpo-radio { position: relative; z-index: 1; } .wpo-image-button:hover, .wpo-radio:hover, .wpo-field label:hover { z-index: 9999999 !important; } /* PURE CSS TOOLTIPS FOR FOLD OPTIONS */ /* Restrict hover to just the i icon */ label[aria-label^="No Crease"] .wpo-image-text, label[aria-label^="Single Fold"] .wpo-image-text, label[aria-label^="Double Fold"] .wpo-image-text, label[aria-label^="Gate Fold"] .wpo-image-text { pointer-events: none; position: relative !important; border-radius: 0 0 10px 10px !important; } /* Ensure border radius for selected states inside wpo-image-wrap */ .wpo-image-text { border-radius: 0 0 10px 10px !important; } /* The Icon */ label[aria-label^="No Crease"] .wpo-image-label::after, label[aria-label^="Single Fold"] .wpo-image-label::after, label[aria-label^="Double Fold"] .wpo-image-label::after, label[aria-label^="Gate Fold"] .wpo-image-label::after { pointer-events: auto; /* Enable hover ONLY on the icon */ content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -3px; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2394a3b8\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; cursor: help; transition: all 0.2s; } label[aria-label^="No Crease"] .wpo-image-label:hover::after, label[aria-label^="Single Fold"] .wpo-image-label:hover::after, label[aria-label^="Double Fold"] .wpo-image-label:hover::after, label[aria-label^="Gate Fold"] .wpo-image-label:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23475569\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); } /* The Tooltip Box */ label[aria-label^="No Crease"] .wpo-image-text::before, label[aria-label^="Single Fold"] .wpo-image-text::before, label[aria-label^="Double Fold"] .wpo-image-text::before, label[aria-label^="Gate Fold"] .wpo-image-text::before { position: absolute; z-index: 9999999; bottom: 100%; left: 50%; transform: translateX(calc(-50% + 35px)) translateY(-10px); width: 250px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; font-weight: 500; white-space: pre-wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Content Strings */ label[aria-label^="No Crease"] .wpo-image-text::before { content: "This will be supplied as a flat sheet, with no creases."; } label[aria-label^="Single Fold"] .wpo-image-text::before { content: "We will crease the centre of the sheet to turn it into a greetings card, and supply it to you un-folded."; } label[aria-label^="Double Fold"] .wpo-image-text::before { content: "We will add two creases, with one side slightly shorter so you can fold one half inside the other half. This will be supplied unfolded."; } label[aria-label^="Gate Fold"] .wpo-image-text::before { content: "We will add two creases, both of equal distance from the centre of the card, so you can fold both sides to meet perfectly in the middle. This will be supplied unfolded."; } /* The Arrow */ label[aria-label^="No Crease"] .wpo-image-text::after, label[aria-label^="Single Fold"] .wpo-image-text::after, label[aria-label^="Double Fold"] .wpo-image-text::after, label[aria-label^="Gate Fold"] .wpo-image-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: 29px; transform: translateY(-4px); border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; z-index: 9999999; } /* Hover Actions */ label[aria-label^="No Crease"] .wpo-image-text:hover::before, label[aria-label^="Single Fold"] .wpo-image-text:hover::before, label[aria-label^="Double Fold"] .wpo-image-text:hover::before, label[aria-label^="Gate Fold"] .wpo-image-text:hover::before { opacity: 1; visibility: visible; transform: translateX(calc(-50% + 35px)) translateY(-2px); } label[aria-label^="No Crease"] .wpo-image-text:hover::after, label[aria-label^="Single Fold"] .wpo-image-text:hover::after, label[aria-label^="Double Fold"] .wpo-image-text:hover::after, label[aria-label^="Gate Fold"] .wpo-image-text:hover::after { opacity: 1; visibility: visible; transform: translateY(10px); } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } /* Remove 2-3px extra gap */ form.cart .clear, .clear, form.cart::after { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } form.cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .tepp-price-override bdi, .tepp-price-override span.amount { font-size: 14px !important; font-weight: 700 !important; color: #111827 !important; background: transparent !important; } .tepp-price-override del bdi { font-size: 12px !important; color: #9ca3af !important; text-decoration: line-through !important; margin-right: 6px !important; } form.cart { display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } /* HIDE ALL RANDOM PLUGINS INJECTED INTO THE FORM EXCEPT QUANTITY, TIERED PRICING, WPO CONFIG STEP, AND INJECTED BOTTOM ELEMENTS */ form.cart > *:not(.quantity):not(.tiered-pricing-wrapper):not(.wpo-wrapper):not(#wpo-wrapper):not([class*="wpo"]):not([id*="wpo"]):not(.tepp-injected-bottom):not(button[name="add-to-cart"]) { display: none !important; } /* Neutralize hidden margin causing space issues */ #duplicateForm-2 { margin-top: 0 !important; } .tepp-action-btn-sample { display: flex !important; width: 100% !important; background: #f3f4f6 !important; color: #4b5563 !important; font-weight: 700 !important; font-size: 1.125rem !important; border-radius: 16px !important; border: none !important; padding: 16px 32px !important; margin: 0 !important; align-items: center !important; justify-content: center !important; cursor: pointer; transition: all 0.2s ease !important; } .tepp-action-btn-sample:hover { background-color: #e5e7eb !important; color: #111827 !important; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; } .tepp-sample-added { background-color: #16a34a !important; color: white !important; pointer-events: none !important; } .tepp-sample-disabled { background-color: #f1f5f9 !important; color: #94a3b8 !important; pointer-events: none !important; border-color: #e2e8f0 !important; box-shadow: none !important; } .tepp-animated-border-btn { width: 100% !important; color: white !important; font-weight: 700 !important; padding: 16px 32px !important; border-radius: 16px !important; font-size: 1.125rem !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; margin: 0 !important; transition: all 0.2s ease !important; position: relative; overflow: hidden; background-color: #d1d5db !important; /* Base border color when the tail isn't there */ transform: translateZ(0); /* Force hardware acceleration on the button itself */ } .tepp-animated-border-btn:hover { transform: translateY(-2px) translateZ(0); box-shadow: 0 10px 15px -3px rgba(255, 79, 94, 0.3), 0 4px 6px -2px rgba(255, 79, 94, 0.15) !important; } .tepp-animated-border-btn::after { transition: background-color 0.2s ease; } .tepp-animated-border-btn:hover::after { background-color: #e11d48 !important; /* Darker red/pink on hover */ } @keyframes tepp-spin-gradient { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .tepp-animated-border-btn::before { content: ''; position: absolute; top: 50%; left: 50%; /* Make it a perfect square larger than the button */ width: 1000px; height: 1000px; /* Use negative margins for centering to avoid translate recalculations on load */ margin-top: -500px; margin-left: -500px; /* Fades around like a clock, with a softer, less vivid rainbow tail */ background: conic-gradient( from 0deg, transparent 0%, transparent 40%, #e57373 50%, #ffb74d 60%, #fff176 70%, #81c784 80%, #64b5f6 90%, #ba68c8 100% ); animation: tepp-spin-gradient 6s linear infinite; z-index: 0; will-change: transform; backface-visibility: hidden; } .tepp-animated-border-btn::after { content: ''; position: absolute; /* 4px border */ top: 4px; left: 4px; right: 4px; bottom: 4px; background-color: #FF4F5E; border-radius: 12px; /* 16px - 4px */ z-index: 1; } /* Hide the wrapper in the form flow initially, JS moves it to modal */ .tiered-pricing-wrapper { display: none; width: 100% !important; margin: 0 !important; } /* World Class Modal Table Styling */ #tepp-modal-table-container .tiered-pricing-wrapper { display: block; } /* Container */ #tepp-modal-table-container table.tiered-pricing-table { display: flex !important; flex-direction: column; gap: 8px; border: none !important; background: transparent !important; margin: 0 !important; width: 100% !important; border-collapse: separate !important; } /* Thead */ #tepp-modal-table-container table.tiered-pricing-table thead { display: block !important; margin-bottom: 4px; } #tepp-modal-table-container table.tiered-pricing-table thead tr { display: grid !important; grid-template-columns: 1fr 1fr !important; padding: 0 16px !important; border: none !important; background: transparent !important; } #tepp-modal-table-container table.tiered-pricing-table th { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #64748b !important; padding: 0 !important; border: none !important; background: transparent !important; text-align: right !important; font-weight: 700 !important; } #tepp-modal-table-container table.tiered-pricing-table th:first-child { text-align: left !important; } #tepp-modal-table-container table.tiered-pricing-table th:last-child { color: #f59e0b !important; } #tepp-modal-table-container table.tiered-pricing-table th .fading-effect { animation: none !important; color: inherit !important; } /* Tbody */ #tepp-modal-table-container table.tiered-pricing-table tbody { display: flex !important; flex-direction: column !important; gap: 8px !important; } /* Row Cards */ #tepp-modal-table-container table.tiered-pricing-table tr { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: center !important; border-radius: 12px !important; border: 1px solid #e2e8f0 !important; background: #ffffff !important; padding: 16px !important; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.02) !important; transition: all 0.2s ease !important; cursor: pointer !important; } #tepp-modal-table-container table.tiered-pricing-table tr:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 16px -4px rgba(0,0,0,0.05) !important; border-color: #cbd5e1 !important; background: #f8fafc !important; } #tepp-modal-table-container table.tiered-pricing-table tr.tiered-pricing--active { border-color: #60a5fa !important; background: #f1f5f9 !important; box-shadow: 0 0 0 2px rgba(96,165,250,0.2) !important; } /* Cells */ #tepp-modal-table-container table.tiered-pricing-table td { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 0 !important; border: none !important; background: transparent !important; text-align: right !important; font-size: 15px !important; font-weight: 600 !important; color: #334155 !important; line-height: 1.4 !important; } #tepp-modal-table-container table.tiered-pricing-table td:first-child { text-align: left !important; font-size: 16px !important; font-weight: 800 !important; color: #0f172a !important; } /* Highlights for Special Discount Tiers */ #tepp-modal-table-container table.tiered-pricing-table tr:has(del) { background: #fff7ed !important; border-color: #fdba74 !important; } #tepp-modal-table-container table.tiered-pricing-table tr:has(del):hover { background: #ffedd5 !important; border-color: #fb923c !important; } #tepp-modal-table-container table.tiered-pricing-table td del { font-size: 12px !important; color: #94a3b8 !important; text-decoration: line-through !important; margin-bottom: 2px !important; } #tepp-modal-table-container table.tiered-pricing-table td strong { font-size: 16px !important; font-weight: 800 !important; color: #ea580c !important; } /* Suffix */ #tepp-modal-table-container table.tiered-pricing-table td .woocommerce-price-suffix { font-size: 11px !important; font-weight: 500 !important; color: #94a3b8 !important; margin-left: 4px !important; } /* EXACT Quantity Box Styling - Make it look like the mockup */ .tepp-cart-box .quantity { order: -1 !important; width: 100% !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border: 2px solid #e5e7eb !important; border-radius: 12px !important; padding: 0 16px !important; height: 56px !important; background: #ffffff !important; } .tepp-cart-box .quantity input.qty { border: none !important; background: transparent !important; text-align: center !important; font-weight: 700 !important; font-size: 18px !important; width: 100% !important; color: #111827 !important; -moz-appearance: textfield !important; box-shadow: none !important; padding: 0 !important; } .tepp-cart-box .quantity input.qty:focus { outline: none !important; border: none !important; box-shadow: none !important; } .tepp-cart-box .quantity input.qty::-webkit-outer-spin-button, .tepp-cart-box .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* HIDE Native theme buttons completely */ .tepp-cart-box .quantity .minus, .tepp-cart-box .quantity .plus { display: none !important; } /* Make left column sticky exactly where it starts (zero upward movement) */ body.single-product .product-summary-wrap > .row { display: flex; align-items: flex-start; } @media (min-width: 992px) { body.single-product .product-summary-wrap > .row > .summary-before { position: sticky !important; top: 38px !important; align-self: flex-start; margin-top: 0 !important; z-index: 10; } } /* Kill Porto's JS sticky so it doesn't fight our zero-movement sticky */ body.single-product .summary-before .sticky-wrapper, body.single-product .summary-before .product-media { position: static !important; top: auto !important; transform: none !important; height: auto !important; width: 100% !important; } /* Remove bottom margins from theme columns to tighten the grey background */ body.single-product .product-summary-wrap > .row > .summary-before, body.single-product .product-summary-wrap > .row > .summary.entry-summary { margin-bottom: 0 !important; } /* Full width grey background behind top section */ body.single-product .product-summary-wrap { position: relative; padding-top: 34px; /* Moved columns up 20px more */ padding-bottom: 15px; /* Added 15px back to the bottom */ margin-bottom: 32px; /* Add margin to push the Everything section down slightly if needed, or leave normal */ margin-top: -32px; z-index: 1; /* Ensure child elements sit above pseudo-element */ } body.single-product .product-summary-wrap::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; z-index: -1; } /* PURE CSS visually injected Minus and Plus */ .tepp-cart-box .quantity::before { content: '\2212'; position: absolute; left: 20px; font-size: 18px; color: #9ca3af; cursor: pointer; pointer-events: none; z-index: 10; font-weight: 400; } .tepp-cart-box .quantity::after { content: '\002B'; position: absolute; right: 20px; font-size: 18px; color: #9ca3af; cursor: pointer; pointer-events: none; z-index: 10; font-weight: 400; } /* Ensure input padding doesn't overlap CSS icons */ .tepp-cart-box .quantity input.qty { border: none !important; background: transparent !important; text-align: center !important; font-weight: 800 !important; font-size: 18px !important; width: 100% !important; color: #111827 !important; -moz-appearance: textfield !important; box-shadow: none !important; padding: 0 40px !important; cursor: pointer; height: 100% !important; } .tepp-cart-box .quantity input.qty:focus { outline: none !important; border: none !important; box-shadow: none !important; } .tepp-cart-box .quantity input.qty::-webkit-outer-spin-button, .tepp-cart-box .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } @keyframes teppSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .wpo-field label, .wpo-image-button, .wpo-image-label, .wpo-choice-label, .wpo-choice-name { overflow: visible !important; } .wpo-image-buttons, .wpo-image-buttons-below, .wpo-radios, .wpo-options-container, .wpo-field { overflow: visible !important; } .wpo-field input[type="radio"] + label img, .wpo-field input[type="checkbox"] + label img, .wpo-image-button img { border-radius: 10px 10px 0 0 !important; } .wpo-image-wrap img { border-radius: 10px 10px 0 0 !important; } .wpo-image-button, .wpo-radio { position: relative; z-index: 1; } .wpo-image-button:hover, .wpo-radio:hover, .wpo-field label:hover { z-index: 9999999 !important; } /* PURE CSS TOOLTIPS FOR FOLD OPTIONS */ /* Restrict hover to just the i icon */ label[aria-label^="No Crease"] .wpo-image-text, label[aria-label^="Single Fold"] .wpo-image-text, label[aria-label^="Double Fold"] .wpo-image-text, label[aria-label^="Gate Fold"] .wpo-image-text { pointer-events: none; position: relative !important; border-radius: 0 0 10px 10px !important; } /* Ensure border radius for selected states inside wpo-image-wrap */ .wpo-image-text { border-radius: 0 0 10px 10px !important; } /* The Icon */ label[aria-label^="No Crease"] .wpo-image-label::after, label[aria-label^="Single Fold"] .wpo-image-label::after, label[aria-label^="Double Fold"] .wpo-image-label::after, label[aria-label^="Gate Fold"] .wpo-image-label::after { pointer-events: auto; /* Enable hover ONLY on the icon */ content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -3px; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2394a3b8\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; cursor: help; transition: all 0.2s; } label[aria-label^="No Crease"] .wpo-image-label:hover::after, label[aria-label^="Single Fold"] .wpo-image-label:hover::after, label[aria-label^="Double Fold"] .wpo-image-label:hover::after, label[aria-label^="Gate Fold"] .wpo-image-label:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23475569\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); } /* The Tooltip Box */ label[aria-label^="No Crease"] .wpo-image-text::before, label[aria-label^="Single Fold"] .wpo-image-text::before, label[aria-label^="Double Fold"] .wpo-image-text::before, label[aria-label^="Gate Fold"] .wpo-image-text::before { position: absolute; z-index: 9999999; bottom: 100%; left: 50%; transform: translateX(calc(-50% + 35px)) translateY(-10px); width: 250px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; font-weight: 500; white-space: pre-wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Content Strings */ label[aria-label^="No Crease"] .wpo-image-text::before { content: "This will be supplied as a flat sheet, with no creases."; } label[aria-label^="Single Fold"] .wpo-image-text::before { content: "We will crease the centre of the sheet to turn it into a greetings card, and supply it to you un-folded."; } label[aria-label^="Double Fold"] .wpo-image-text::before { content: "We will add two creases, with one side slightly shorter so you can fold one half inside the other half. This will be supplied unfolded."; } label[aria-label^="Gate Fold"] .wpo-image-text::before { content: "We will add two creases, both of equal distance from the centre of the card, so you can fold both sides to meet perfectly in the middle. This will be supplied unfolded."; } /* The Arrow */ label[aria-label^="No Crease"] .wpo-image-text::after, label[aria-label^="Single Fold"] .wpo-image-text::after, label[aria-label^="Double Fold"] .wpo-image-text::after, label[aria-label^="Gate Fold"] .wpo-image-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: 29px; transform: translateY(-4px); border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; z-index: 9999999; } /* Hover Actions */ label[aria-label^="No Crease"] .wpo-image-text:hover::before, label[aria-label^="Single Fold"] .wpo-image-text:hover::before, label[aria-label^="Double Fold"] .wpo-image-text:hover::before, label[aria-label^="Gate Fold"] .wpo-image-text:hover::before { opacity: 1; visibility: visible; transform: translateX(calc(-50% + 35px)) translateY(-2px); } label[aria-label^="No Crease"] .wpo-image-text:hover::after, label[aria-label^="Single Fold"] .wpo-image-text:hover::after, label[aria-label^="Double Fold"] .wpo-image-text:hover::after, label[aria-label^="Gate Fold"] .wpo-image-text:hover::after { opacity: 1; visibility: visible; transform: translateY(10px); } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } /* Remove 2-3px extra gap */ form.cart .clear, .clear, form.cart::after { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } form.cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Remove the old margin-bottom off the last row of specs */ #tepp-modal-table-container ~ .tepp-tw-scope .tepp-tw-scope { margin-top: 0 !important; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .tepp-tw-scope > div { grid-template-columns: 1fr !important; } } .wpo-field label, .wpo-image-button, .wpo-image-label, .wpo-choice-label, .wpo-choice-name { overflow: visible !important; } .wpo-image-buttons, .wpo-image-buttons-below, .wpo-radios, .wpo-options-container, .wpo-field { overflow: visible !important; } .wpo-field input[type="radio"] + label img, .wpo-field input[type="checkbox"] + label img, .wpo-image-button img { border-radius: 10px 10px 0 0 !important; } .wpo-image-wrap img { border-radius: 10px 10px 0 0 !important; } .wpo-image-button, .wpo-radio { position: relative; z-index: 1; } .wpo-image-button:hover, .wpo-radio:hover, .wpo-field label:hover { z-index: 9999999 !important; } /* PURE CSS TOOLTIPS FOR FOLD OPTIONS */ /* Restrict hover to just the i icon */ label[aria-label^="No Crease"] .wpo-image-text, label[aria-label^="Single Fold"] .wpo-image-text, label[aria-label^="Double Fold"] .wpo-image-text, label[aria-label^="Gate Fold"] .wpo-image-text { pointer-events: none; position: relative !important; border-radius: 0 0 10px 10px !important; } /* Ensure border radius for selected states inside wpo-image-wrap */ .wpo-image-text { border-radius: 0 0 10px 10px !important; } /* The Icon */ label[aria-label^="No Crease"] .wpo-image-label::after, label[aria-label^="Single Fold"] .wpo-image-label::after, label[aria-label^="Double Fold"] .wpo-image-label::after, label[aria-label^="Gate Fold"] .wpo-image-label::after { pointer-events: auto; /* Enable hover ONLY on the icon */ content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -3px; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2394a3b8\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; cursor: help; transition: all 0.2s; } label[aria-label^="No Crease"] .wpo-image-label:hover::after, label[aria-label^="Single Fold"] .wpo-image-label:hover::after, label[aria-label^="Double Fold"] .wpo-image-label:hover::after, label[aria-label^="Gate Fold"] .wpo-image-label:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23475569\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); } /* The Tooltip Box */ label[aria-label^="No Crease"] .wpo-image-text::before, label[aria-label^="Single Fold"] .wpo-image-text::before, label[aria-label^="Double Fold"] .wpo-image-text::before, label[aria-label^="Gate Fold"] .wpo-image-text::before { position: absolute; z-index: 9999999; bottom: 100%; left: 50%; transform: translateX(calc(-50% + 35px)) translateY(-10px); width: 250px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; font-weight: 500; white-space: pre-wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Content Strings */ label[aria-label^="No Crease"] .wpo-image-text::before { content: "This will be supplied as a flat sheet, with no creases."; } label[aria-label^="Single Fold"] .wpo-image-text::before { content: "We will crease the centre of the sheet to turn it into a greetings card, and supply it to you un-folded."; } label[aria-label^="Double Fold"] .wpo-image-text::before { content: "We will add two creases, with one side slightly shorter so you can fold one half inside the other half. This will be supplied unfolded."; } label[aria-label^="Gate Fold"] .wpo-image-text::before { content: "We will add two creases, both of equal distance from the centre of the card, so you can fold both sides to meet perfectly in the middle. This will be supplied unfolded."; } /* The Arrow */ label[aria-label^="No Crease"] .wpo-image-text::after, label[aria-label^="Single Fold"] .wpo-image-text::after, label[aria-label^="Double Fold"] .wpo-image-text::after, label[aria-label^="Gate Fold"] .wpo-image-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: 29px; transform: translateY(-4px); border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; z-index: 9999999; } /* Hover Actions */ label[aria-label^="No Crease"] .wpo-image-text:hover::before, label[aria-label^="Single Fold"] .wpo-image-text:hover::before, label[aria-label^="Double Fold"] .wpo-image-text:hover::before, label[aria-label^="Gate Fold"] .wpo-image-text:hover::before { opacity: 1; visibility: visible; transform: translateX(calc(-50% + 35px)) translateY(-2px); } label[aria-label^="No Crease"] .wpo-image-text:hover::after, label[aria-label^="Single Fold"] .wpo-image-text:hover::after, label[aria-label^="Double Fold"] .wpo-image-text:hover::after, label[aria-label^="Gate Fold"] .wpo-image-text:hover::after { opacity: 1; visibility: visible; transform: translateY(10px); } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } /* Remove 2-3px extra gap */ form.cart .clear, .clear, form.cart::after { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } form.cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } @keyframes teppModalPop { 0% { opacity: 0; transform: scale(0.95) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } #tepp-sg-w:focus, #tepp-sg-h:focus { border: 3px solid #354357 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; } #tepp-sg-check-btn:hover { background: #1e293b !important; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .tepp-sg-grid { grid-template-columns: 1fr; } @media (min-width: 768px) { .tepp-sg-grid { grid-template-columns: 320px 1fr; } } .wpo-field label, .wpo-image-button, .wpo-image-label, .wpo-choice-label, .wpo-choice-name { overflow: visible !important; } .wpo-image-buttons, .wpo-image-buttons-below, .wpo-radios, .wpo-options-container, .wpo-field { overflow: visible !important; } .wpo-field input[type="radio"] + label img, .wpo-field input[type="checkbox"] + label img, .wpo-image-button img { border-radius: 10px 10px 0 0 !important; } .wpo-image-wrap img { border-radius: 10px 10px 0 0 !important; } .wpo-image-button, .wpo-radio { position: relative; z-index: 1; } .wpo-image-button:hover, .wpo-radio:hover, .wpo-field label:hover { z-index: 9999999 !important; } /* PURE CSS TOOLTIPS FOR FOLD OPTIONS */ /* Restrict hover to just the i icon */ label[aria-label^="No Crease"] .wpo-image-text, label[aria-label^="Single Fold"] .wpo-image-text, label[aria-label^="Double Fold"] .wpo-image-text, label[aria-label^="Gate Fold"] .wpo-image-text { pointer-events: none; position: relative !important; border-radius: 0 0 10px 10px !important; } /* Ensure border radius for selected states inside wpo-image-wrap */ .wpo-image-text { border-radius: 0 0 10px 10px !important; } /* The Icon */ label[aria-label^="No Crease"] .wpo-image-label::after, label[aria-label^="Single Fold"] .wpo-image-label::after, label[aria-label^="Double Fold"] .wpo-image-label::after, label[aria-label^="Gate Fold"] .wpo-image-label::after { pointer-events: auto; /* Enable hover ONLY on the icon */ content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -3px; background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2394a3b8\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; cursor: help; transition: all 0.2s; } label[aria-label^="No Crease"] .wpo-image-label:hover::after, label[aria-label^="Single Fold"] .wpo-image-label:hover::after, label[aria-label^="Double Fold"] .wpo-image-label:hover::after, label[aria-label^="Gate Fold"] .wpo-image-label:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23475569\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\'/%3E%3C/svg%3E"); } /* The Tooltip Box */ label[aria-label^="No Crease"] .wpo-image-text::before, label[aria-label^="Single Fold"] .wpo-image-text::before, label[aria-label^="Double Fold"] .wpo-image-text::before, label[aria-label^="Gate Fold"] .wpo-image-text::before { position: absolute; z-index: 9999999; bottom: 100%; left: 50%; transform: translateX(calc(-50% + 35px)) translateY(-10px); width: 250px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; font-weight: 500; white-space: pre-wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Content Strings */ label[aria-label^="No Crease"] .wpo-image-text::before { content: "This will be supplied as a flat sheet, with no creases."; } label[aria-label^="Single Fold"] .wpo-image-text::before { content: "We will crease the centre of the sheet to turn it into a greetings card, and supply it to you un-folded."; } label[aria-label^="Double Fold"] .wpo-image-text::before { content: "We will add two creases, with one side slightly shorter so you can fold one half inside the other half. This will be supplied unfolded."; } label[aria-label^="Gate Fold"] .wpo-image-text::before { content: "We will add two creases, both of equal distance from the centre of the card, so you can fold both sides to meet perfectly in the middle. This will be supplied unfolded."; } /* The Arrow */ label[aria-label^="No Crease"] .wpo-image-text::after, label[aria-label^="Single Fold"] .wpo-image-text::after, label[aria-label^="Double Fold"] .wpo-image-text::after, label[aria-label^="Gate Fold"] .wpo-image-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: 29px; transform: translateY(-4px); border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; z-index: 9999999; } /* Hover Actions */ label[aria-label^="No Crease"] .wpo-image-text:hover::before, label[aria-label^="Single Fold"] .wpo-image-text:hover::before, label[aria-label^="Double Fold"] .wpo-image-text:hover::before, label[aria-label^="Gate Fold"] .wpo-image-text:hover::before { opacity: 1; visibility: visible; transform: translateX(calc(-50% + 35px)) translateY(-2px); } label[aria-label^="No Crease"] .wpo-image-text:hover::after, label[aria-label^="Single Fold"] .wpo-image-text:hover::after, label[aria-label^="Double Fold"] .wpo-image-text:hover::after, label[aria-label^="Gate Fold"] .wpo-image-text:hover::after { opacity: 1; visibility: visible; transform: translateY(10px); } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } div.quantity { margin-bottom: 0 !important; } .quantity input { margin-bottom: 0 !important; } /* Remove 2-3px extra gap */ form.cart .clear, .clear, form.cart::after { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } form.cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide RVVUP components to prevent spacing issues */ rvvup-express-payments, #rvvup-modal-express, .rvvup-modal { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Dynamic grid columns based on child count */ #tepp-modal-table-container table.tiered-pricing-table:has(th:nth-child(3)) thead tr, #tepp-modal-table-container table.tiered-pricing-table:has(td:nth-child(3)) tr { grid-template-columns: 1fr 1fr 1fr !important; }