/* FYOOL single product — matches template/fyool-product-final.html */ .fy-product-page img{max-width:100%;display:block} .fy-product-page button{font-family:'Barlow',sans-serif} /* ─ Product layout (gallery left, purchase panel right) ─────────── */ .fy-product-main{ max-width:1280px; margin:0 auto; padding:48px 40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:'media summary'; gap:64px; align-items:start; } .fy-product-main__media{ grid-area:media; min-width:0; position:relative; } .fy-product-main .fy-product-summary{ grid-area:summary; min-width:0; } /* Override WooCommerce default floats/flex on .product if present */ .fy-single-product div.product, .fy-product-page div.product{ display:block; } .fy-single-product div.product::before, .fy-single-product div.product::after, .fy-product-page div.product::before, .fy-product-page div.product::after{ display:none; } /* WC woocommerce-layout.css applies float:right; width:48% via a (0,3,2)=32 specificity selector — beat it with !important on the three conflicting props */ .fy-product-main .fy-product-summary.entry-summary{ float:none !important; width:100% !important; max-width:none !important; clear:none !important; min-width:0; } /* ─ Gallery ─────────────────────────────────────────────────────── */ .fy-gallery{position:sticky;top:88px} .fy-gallery-main{border-radius:16px;overflow:hidden;background:var(--surface);margin-bottom:12px;position:relative} /* Prev/next arrows over the image (desktop + mobile) so it reads as swipeable. */ .fy-gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--text);box-shadow:0 2px 10px rgba(15,23,42,.15);cursor:pointer;transition:background .2s,box-shadow .2s,transform .15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .fy-gallery-arrow:hover{background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.22)} .fy-gallery-arrow:active{transform:translateY(-50%) scale(.92)} .fy-gallery-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .fy-gallery-arrow--prev{left:12px} .fy-gallery-arrow--next{right:12px} .fy-gallery-arrow svg{display:block} /* Desktop: stacked slides, only the active one visible (crossfade). */ .fy-gallery-track{position:relative;aspect-ratio:1/1} .fy-gallery-slide{position:absolute;inset:0;opacity:0;transition:opacity .3s ease} .fy-gallery-slide.active{opacity:1} .fy-gallery-img{width:100%;height:100%;object-fit:cover} .fy-flavor-strip{height:5px;border-radius:3px;margin-bottom:12px} .fy-gallery-dots{display:none;justify-content:center;gap:7px;margin-bottom:12px} .fy-gallery-dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:var(--border);cursor:pointer;transition:background .2s,transform .2s} .fy-gallery-dot.active{background:var(--blue);transform:scale(1.25)} .fy-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .fy-thumb{aspect-ratio:1/1;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .2s;background:var(--surface);padding:0;display:block;width:100%} .fy-thumb.active{border-color:var(--blue)} .fy-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none} /* ─ Product info ─────────────────────────────────────────────────── */ .fy-pinfo{} .fy-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:6px} .fy-breadcrumb a{color:var(--muted);transition:color .2s} .fy-breadcrumb a:hover{color:var(--blue)} .fy-pi-tag{display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);border:1px solid #BBF7D0;color:#15803D;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;margin-bottom:12px} .fy-pi-flavor{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px} .fy-pi-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:40px;line-height:1.05;letter-spacing:-1px;margin-bottom:10px;color:var(--text)} .fy-pi-stars{display:flex;align-items:center;gap:8px;margin-bottom:18px} .fy-pi-stars-val{color:#FFD700;font-size:16px;letter-spacing:1px} .fy-pi-stars-count{font-size:13px;color:var(--muted)} .fy-pi-stars-count a{color:var(--blue);font-weight:600} .fy-pi-short{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:24px;max-width:440px} /* ─ Claims ───────────────────────────────────────────────────────── */ .fy-claims-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px;margin-bottom:24px} .fy-claim-p{background:#fff;border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;display:flex;align-items:center;gap:4px} .fy-claim-p.g{background:var(--green-soft);border-color:#BBF7D0;color:#15803D} .fy-claim-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0} /* ─ Flavor selector ─────────────────────────────────────────────── */ .fy-product-attrs{display:none;flex-wrap:wrap;gap:10px 18px;margin:0 0 20px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px} .fy-product-attr{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:0} .fy-product-attr__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0} .fy-product-attr__value{font-size:13px;font-weight:600;color:var(--text);margin:0} .fy-flavor-opts--variations .fy-flavor-opt{text-decoration:none;border:none;font:inherit;cursor:pointer} .fy-flavor-opts--variations .fy-flavor-opt[aria-checked="true"],.fy-flavor-opts--variations .fy-flavor-opt.active{border-color:var(--blue);background:var(--blue-soft)} .fy-sel-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .fy-pack-opts--1{grid-template-columns:1fr} .fy-pack-opts--2{grid-template-columns:repeat(2,1fr)} .fy-flavor-opts{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap} nav.fy-flavor-opts{padding:0;margin:0 0 24px;border:0;background:transparent} .fy-flavor-opt{display:flex;align-items:center;gap:7px;border:2px solid var(--border);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;background:#fff} .fy-flavor-opt.active{border-color:var(--blue);background:var(--blue-soft)} .fy-flavor-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} /* ─ Pack selector ────────────────────────────────────────────────── */ .fy-pack-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px} .fy-pack-opt{border:2px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center;cursor:pointer;transition:all .2s;background:#fff;position:relative} a.fy-pack-opt{display:block;text-decoration:none;color:inherit} .fy-pack-opt.active{border-color:var(--blue);background:var(--blue-soft)} .fy-pack-opt:hover:not(.active){border-color:#aaa} .fy-pack-count{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;color:var(--text)} .fy-pack-sticks{font-size:11px;color:var(--muted);margin-top:1px} .fy-pack-save{font-size:11px;font-weight:700;color:var(--green);margin-top:4px} .fy-pack-pop{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;letter-spacing:.5px} /* ─ Price ────────────────────────────────────────────────────────── */ .fy-price-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:20px} .fy-price-main{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:38px;line-height:1;color:var(--text)} .fy-price-orig{font-size:18px;color:var(--muted);text-decoration:line-through;font-weight:400;padding-bottom:4px} .fy-price-stick{background:var(--blue-soft);border:1px solid #BFDBFE;border-radius:8px;padding:5px 12px;margin-left:auto;text-align:center} .fy-ps-val{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:var(--blue);line-height:1} .fy-ps-lbl{font-size:9px;font-weight:700;color:#93C5FD;letter-spacing:.5px;text-transform:uppercase} /* ─ Gift progress ────────────────────────────────────────────────── */ .fy-gift-progress{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:20px} .fy-gp-header{display:flex;align-items:center;gap:8px;margin-bottom:8px} .fy-gp-icon{font-size:18px;flex-shrink:0} .fy-gp-text{font-size:13px;font-weight:600;color:var(--text);flex:1} .fy-gp-bar-wrap{background:var(--border);border-radius:6px;height:6px;overflow:hidden;margin-bottom:6px} .fy-gp-bar{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .5s ease} .fy-gp-hint{font-size:11px;color:var(--muted);line-height:1.45} /* ─ Bottle section ───────────────────────────────────────────────── */ .fy-bottle-section{border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:20px;transition:border-color .2s} .fy-bottle-section.has-free{border-color:#BBF7D0;background:#F9FFF9} .fy-bottle-section.has-6{border-color:#BFDBFE;background:#F0F9FF} .fy-bs-header{display:flex;align-items:center;gap:10px;margin-bottom:12px} .fy-bs-badge-free{background:var(--green);color:#052e16;font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;letter-spacing:.5px} .fy-bs-badge-paid{background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px} .fy-bs-badge-gift{background:linear-gradient(90deg,var(--blue),var(--green));color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px} .fy-bs-title{font-size:14px;font-weight:700;color:var(--text)} .fy-bs-desc{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5} .fy-bottle-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .fy-bopt{border:2px solid var(--border);border-radius:12px;padding:12px 8px 14px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;text-align:center} .fy-bopt.selected{border-color:var(--blue);background:var(--blue-soft)} .fy-bopt-img{width:64px;height:72px;object-fit:contain;display:block;flex-shrink:0} .fy-bopt-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s} .fy-bopt.selected .fy-bopt-radio{border-color:var(--blue);background:var(--blue)} .fy-bopt.selected .fy-bopt-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff} .fy-bopt-info{display:flex;flex-direction:column;align-items:center} .fy-bopt-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.2} .fy-bopt-price{font-size:11px;color:var(--muted);margin-top:1px} .fy-bopt-price.free{color:#15803D;font-weight:700} /* ─ ATC button ───────────────────────────────────────────────────── */ .fy-atc-btn{width:100%;background:linear-gradient(90deg,var(--blue),#1477D2);color:#fff;padding:16px;border-radius:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:1px;text-transform:uppercase;transition:opacity .2s,transform .15s;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:10px} .fy-atc-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)} .fy-atc-btn:disabled,.fy-sc-btn:disabled{opacity:.55;cursor:not-allowed;transform:none} /* Inline add-to-cart failure, in place of a modal alert. Matches the error notice styling used elsewhere in the theme. */ .fy-atc-error{margin:-6px 0 14px;padding:10px 14px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#991b1b;font-size:13px;line-height:1.5} .fy-atc-error[hidden]{display:none} /* ─ Default-mode native WooCommerce add-to-cart (qty + button) ─────── */ .fy-default-purchase{margin-bottom:14px} .fy-default-purchase form.cart{display:flex;align-items:stretch;gap:12px;margin:0} .fy-default-purchase .quantity{flex:0 0 auto;display:inline-flex;align-items:stretch;border:2px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;transition:border-color .2s} .fy-default-purchase .quantity:focus-within{border-color:var(--blue)} .fy-default-purchase .quantity .qty{width:54px;min-height:54px;text-align:center;border:none;border-radius:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;color:var(--text);background:#fff;-moz-appearance:textfield} .fy-default-purchase .quantity .qty::-webkit-outer-spin-button, .fy-default-purchase .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .fy-default-purchase .quantity .qty:focus{outline:none} /* -/+ stepper buttons injected around the qty input (mix box etc.). */ .fy-default-purchase .fy-qty-step{flex:0 0 auto;width:42px;min-height:54px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:#fff;color:var(--muted);cursor:pointer;transition:background .2s,color .2s} .fy-default-purchase .fy-qty-step--minus{border-right:1.5px solid var(--border)} .fy-default-purchase .fy-qty-step--plus{border-left:1.5px solid var(--border)} .fy-default-purchase .fy-qty-step:hover:not(:disabled){background:var(--blue-soft);color:var(--blue)} .fy-default-purchase .fy-qty-step:disabled{opacity:.4;cursor:not-allowed} .fy-default-purchase .fy-qty-step svg{display:block} /* Style the native button to match .fy-atc-btn (dimensions + gradient + icon). WooCommerce / theme rules set button.button{display:block}; override with a higher-specificity selector + !important on display so the flex layout (and thus the ::before icon box) takes effect. */ .fy-single-product--default .fy-default-purchase .single_add_to_cart_button{flex:1 1 auto;display:inline-flex !important;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:16px 24px;background:linear-gradient(90deg,var(--blue),#1477D2);color:#fff;border:none;border-radius:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:1px;text-transform:uppercase;line-height:1;cursor:pointer;transition:opacity .2s,transform .15s} .fy-single-product--default .fy-default-purchase .single_add_to_cart_button::before{content:"";display:inline-block;width:20px;height:20px;flex:0 0 auto;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E")} .fy-single-product--default .fy-default-purchase .single_add_to_cart_button:hover{opacity:.9;transform:translateY(-1px)} .fy-single-product--default .fy-default-purchase .single_add_to_cart_button:disabled{opacity:.55;cursor:not-allowed;transform:none} .fy-single-product--default .fy-default-purchase .single_add_to_cart_button.loading{opacity:.7} .fy-default-purchase .woocommerce-variation-add-to-cart{display:flex;align-items:stretch;gap:12px} /* ─ WooCommerce notices on product pages (add-to-cart message / errors) ─ Self-contained styling (WC's own font-icon ::before is hidden and the layout is flex) so any WC notice that surfaces on a product page — success message, validation / stock errors, the JS-off add-to-cart fallback — matches the theme instead of WC's default look. */ .single-product .woocommerce-notices-wrapper{max-width:1280px;margin:0 auto;padding:24px 40px 0} .single-product .woocommerce-notices-wrapper:empty{padding:0} .single-product .woocommerce-message, .single-product .woocommerce-info, .single-product .woocommerce-error{display:flex;align-items:center;gap:12px;border:1px solid #bfdbfe;border-radius:12px;background:var(--blue-soft,#eff6ff);color:var(--text);padding:14px 18px;margin:0 0 16px;font-size:14px;font-weight:500;list-style:none} .single-product .woocommerce-error{border-color:#fecaca;background:#fef2f2;color:#991b1b;flex-direction:column;align-items:flex-start} .single-product .woocommerce-error li{margin:0} /* Hide WC's font-icon glyph; supply our own leading check icon instead. */ .single-product .woocommerce-message::before, .single-product .woocommerce-info::before, .single-product .woocommerce-error::before{content:none !important} .single-product .woocommerce-message::after, .single-product .woocommerce-info::after{content:"";order:-1;flex:0 0 auto;width:20px;height:20px;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E90FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")} /* "View cart" button inside the added-to-cart message */ .single-product .woocommerce-message a.button, .single-product .woocommerce-message a.wc-forward{margin-left:auto;flex:0 0 auto;background:linear-gradient(90deg,var(--blue),#1677d2);color:#fff;border:none;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:8px 16px;line-height:1.3;text-decoration:none;transition:opacity .2s} .single-product .woocommerce-message a.button:hover, .single-product .woocommerce-message a.wc-forward:hover{opacity:.9;color:#fff} /* ─ Trust badges ─────────────────────────────────────────────────── */ .fy-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:28px} .fy-tbadge{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center} .fy-tbadge-icon{font-size:18px;margin-bottom:4px} .fy-tbadge-text{font-size:10px;font-weight:600;color:var(--muted);line-height:1.3} /* ─ Guarantee ────────────────────────────────────────────────────── */ .fy-guarantee{background:var(--green-soft);border:1px solid #BBF7D0;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:28px} .fy-guarantee-text{font-size:13px;color:#15803D;font-weight:500;line-height:1.5} .fy-guarantee-text strong{font-weight:700} /* ─ Below-fold sections ─────────────────────────────────────────── */ .fy-below{max-width:1280px;margin:0 auto;padding:0 40px 80px} .fy-section-gap{height:64px} .fy-sec-label{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:10px} .fy-sec-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:40px;line-height:1.05;letter-spacing:-1px;margin-bottom:8px;color:var(--text)} .fy-sec-sub{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:36px} .fy-sec-sub--tight{margin-bottom:24px} /* Benefits */ .fy-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .fy-benefit-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;transition:box-shadow .2s} .fy-benefit-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.07)} /* Icon sits inline next to the name */ .fy-bc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px} .fy-bc-icon{font-size:24px;line-height:1;flex:0 0 auto} .fy-bc-desc{font-size:13px;color:var(--muted);line-height:1.6} /* High-specificity name rule beats the .fy-woo-main .woocommerce h3 cart/ checkout heading style that bleeds into product content (single products render inside the .fy-woo-main > .woocommerce wrapper). */ .fy-product-page .fy-benefit-card .fy-bc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;line-height:1.2;letter-spacing:normal;margin:0;color:var(--text)} /* When to use */ .fy-when-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px} .fy-when-card{display:flex;flex-direction:column;background:var(--dark);border-radius:14px;overflow:hidden;transition:transform .25s} .fy-when-card:hover{transform:translateY(-3px)} .fy-when-img{height:140px;flex:0 0 auto;overflow:hidden;position:relative} .fy-when-img img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .4s} .fy-when-card:hover .fy-when-img img{transform:scale(1.05)} .fy-when-body{flex:1 1 auto;padding:14px 16px} .fy-when-desc{font-size:12px;color:#fff;line-height:1.55;margin:0} /* High-specificity title rule — see note above; without it the title renders 24px dark (invisible on the dark card) with an 18px margin, bloating the body. */ .fy-product-page .fy-when-card .fy-when-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;line-height:1.2;letter-spacing:normal;color:#fff;margin:0 0 5px} /* Ingredients */ .fy-ing-tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap} .fy-itab{background:var(--surface);border:1.5px solid var(--border);color:var(--muted);font-size:13px;font-weight:600;padding:7px 18px;border-radius:8px;cursor:pointer;transition:all .2s} .fy-itab.active{background:#0F1E3A;color:#fff;border-color:#0F1E3A} .fy-ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .fy-ing-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s} .fy-ing-card:hover{border-color:#CBD5E1} .fy-ing-card summary{padding:16px 18px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;transition:background .2s} .fy-ing-card summary:hover,.fy-ing-card[open] summary{background:var(--surface)} .fy-ing-sym{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;color:var(--blue);width:40px;flex-shrink:0} .fy-ing-name{flex:1;color:var(--text)} .fy-ing-chev{font-size:12px;color:var(--muted);transition:transform .25s;flex-shrink:0} .fy-ing-card[open] .fy-ing-chev{transform:rotate(180deg)} .fy-ing-body{padding:0 18px 16px 70px;font-size:13px;color:var(--muted);line-height:1.65} /* Comparison */ .fy-comp-table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)} .fy-comp-table th{background:#0F1E3A;color:#fff;padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;text-align:left} .fy-comp-table th:not(:first-child){text-align:center} .fy-comp-fyool-hd{color:#7EC8FF} .fy-comp-note{font-size:12px;color:var(--muted);margin-top:10px} .fy-comp-table td{padding:11px 16px;font-size:13px;border-bottom:1px solid var(--border);text-align:center} .fy-comp-table td:first-child{text-align:left;font-weight:500;color:var(--text)} .fy-comp-table tr:last-child td{border-bottom:none} .fy-comp-table tr:nth-child(even) td{background:var(--surface)} .fy-comp-table td.fy-fyool{color:var(--blue);font-weight:700} .fy-comp-hl{background:var(--blue-soft)!important} .fy-check{color:var(--green);font-size:14px} .fy-cross{color:#EF4444;font-size:14px} /* Reviews */ .fy-reviews-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px} .fy-rev-score{display:flex;align-items:center;gap:16px} .fy-rev-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:56px;line-height:1;color:var(--text)} .fy-rev-stars{color:#FFD700;font-size:18px;letter-spacing:1px;margin-bottom:3px} .fy-rev-count{font-size:13px;color:var(--muted)} .fy-rfeatured{background:var(--dark);border-radius:14px;padding:28px;margin-bottom:20px;position:relative;overflow:hidden} .fy-rf-q{font-size:72px;line-height:.8;font-family:Georgia,serif;color:rgba(30,144,255,.1);position:absolute;top:12px;left:20px;pointer-events:none} .fy-rf-text{font-size:16px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:18px;position:relative;z-index:1} .fy-rf-auth{display:flex;align-items:center;gap:12px} .fy-rf-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--green));display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:#fff;flex-shrink:0} .fy-rf-name{font-size:14px;font-weight:600;color:#fff} .fy-rf-meta{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px} .fy-rf-rstars{color:#FFD700;font-size:12px;margin-top:2px} .fy-rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .fy-rcard{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;transition:box-shadow .2s} .fy-rcard:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)} .fy-rcard-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px} .fy-rav{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--green));display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:#fff;flex-shrink:0} .fy-rname{font-size:13px;font-weight:600;color:var(--text)} .fy-rdate{font-size:11px;color:var(--muted)} .fy-rstars{color:#FFD700;font-size:12px;margin-bottom:7px} .fy-rtext{font-size:13px;color:#374151;line-height:1.6} .fy-rplatform{font-size:10px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:5px} .fy-gg{width:10px;height:10px;background:conic-gradient(#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75%);border-radius:50%} /* ─ Reviews plugin (wprevpro template) — matched to the built-in section ── */ /* Rendered alongside the FYOOL reviews grid for comparison; these rules map the plugin's template-6 tokens onto FYOOL's review-card colour coding so both blocks read the same. Scoped to .fy-reviews-plugin only. */ .fy-reviews-plugin{margin-top:0} /* Reviews is the first below-fold section; the product summary above already provides spacing, so drop the large leading section gap. */ .fy-below #fy-reviews.fy-section-gap{height:0} /* Span the full content width, like every other below-fold section (the plugin insets its banner with a 20px side margin by default). */ .fy-reviews-plugin .wprev_banner_outer{margin-left:0!important;margin-right:0!important} /* Card box — match .fy-rcard (border, radius, hover shadow). */ .fy-reviews-plugin .indrevdiv, .fy-reviews-plugin .wprev_preview_bg1_T6, .fy-reviews-plugin .wpproslider_t6_DIV_2{background:#fff;border:1px solid var(--border);border-radius:12px;transition:box-shadow .2s} .fy-reviews-plugin .wpproslider_t6_DIV_2:hover, .fy-reviews-plugin .indrevdiv:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)} .fy-reviews-plugin .wprev_banner_outer{border:1px solid var(--border);border-radius:12px} /* Name — 13px / 600, like .fy-rname. */ .fy-reviews-plugin .wpproslider_t6_DIV_2_top{color:var(--text);font-weight:600;font-size:13px} /* Review body — 13px / 1.6, like .fy-rtext. */ .fy-reviews-plugin .wpproslider_t6_DIV_4, .fy-reviews-plugin .wprev_preview_tcolor2_T6{color:#374151;font-size:13px;line-height:1.6} /* Date — 11px muted, like .fy-rdate (overrides the shared tcolor rule). */ .fy-reviews-plugin .wpproslider_t6_SPAN_6{color:var(--muted);font-size:11px} /* Accents on the FYOOL palette (plugin sets some colours inline → !important). */ .fy-reviews-plugin .wprevpro_bnrevus_btn{background:linear-gradient(90deg,var(--blue),#1677D2)!important;color:#fff!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important;transition:opacity .2s} .fy-reviews-plugin .wprevpro_bnrevus_btn:hover{opacity:.88} .fy-reviews-plugin .wprev_banner_top_source.cursel{color:var(--blue)!important;border-bottom-color:var(--blue)!important} .fy-reviews-plugin .wprevpro_btn_show_rdpop{color:var(--blue)!important;cursor:pointer} .fy-reviews-plugin .wprevpro_btn_show_rdpop:hover{color:#1677D2!important;text-decoration:underline} /* Star rating on FYOOL gold (matches .fy-rstars). */ .fy-reviews-plugin .svg-wprsp-star-full, .fy-reviews-plugin .svg-wprsp-star{background-color:#FFD700!important} /* Verified badge tinted FYOOL green. */ .fy-reviews-plugin .svg-wprsp-verified{background-color:var(--green)!important} /* Other Flavors block reuses the shared homepage/shop product card (.fy-pgrid / .fy-pcard) — see template-parts/product/section-related.php. */ /* ─ Sticky mobile cart ──────────────────────────────────────────── */ .fy-sticky-cart{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:12px 20px;z-index:150;box-shadow:0 -4px 20px rgba(0,0,0,.1)} .fy-sc-inner{display:flex;align-items:center;gap:12px;max-width:600px;margin:0 auto} .fy-sc-info{flex:1} .fy-sc-name{font-size:13px;font-weight:700;color:var(--text)} .fy-sc-price{font-size:12px;color:var(--muted)} .fy-sc-btn{background:linear-gradient(90deg,var(--blue),#1477D2);color:#fff;padding:12px 24px;border-radius:10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap} /* ─ Responsive ──────────────────────────────────────────────────── */ @media(max-width:1024px){ .fy-product-main{ grid-template-columns:1fr; grid-template-areas:'media' 'summary'; gap:28px; padding:28px 24px; } .fy-gallery{position:static;top:auto} .fy-gallery-track{aspect-ratio:16/10} .fy-below{padding:0 24px 60px} .fy-benefits-grid{grid-template-columns:repeat(2,1fr)} .fy-when-grid{grid-template-columns:repeat(2,1fr)} .fy-ing-grid{grid-template-columns:repeat(2,1fr)} .fy-rgrid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .fy-product-main{ grid-template-columns:1fr; grid-template-areas:'media' 'summary'; gap:0; padding:0; } .fy-product-main__media{border-bottom:1px solid var(--border)} .fy-gallery{position:static;top:auto;border-bottom:none} .fy-gallery-main{border-radius:0;margin-bottom:0} /* Mobile: horizontal swipe carousel of all slides. */ .fy-gallery-track{aspect-ratio:auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .fy-gallery-track::-webkit-scrollbar{display:none} .fy-gallery-slide{position:static;flex:0 0 100%;opacity:1;scroll-snap-align:center;aspect-ratio:4/3} .fy-flavor-strip{margin:0;border-radius:0;height:4px} .fy-gallery-dots{display:flex;padding:10px 0 0} .fy-thumbs{display:none} .fy-pinfo{padding:20px 16px 16px} .fy-breadcrumb{display:none} .fy-pi-name{font-size:30px} .fy-flavor-opts{flex-wrap:wrap;gap:6px} .fy-pack-opts{gap:6px} .fy-pack-opt{padding:10px 6px} .fy-pack-count{font-size:17px} .fy-price-row{flex-wrap:wrap;gap:8px} .fy-price-main{font-size:32px} .fy-bottle-opts{grid-template-columns:1fr 1fr} .fy-bottle-section.has-6 .fy-bottle-opts{grid-template-columns:repeat(3,1fr)} .fy-bottle-section.has-6 .fy-bopt-img{width:56px;height:62px} .fy-bopt-name{font-size:12px} /* YITH pack blocks — mirrors bottle-section mobile rules */ .fy-wapo-pack-block.fy-wapo-pack-active .yith-wapo-addon ul, .fy-wapo-pack-block.fy-wapo-pack-active .yith-wapo-options{grid-template-columns:1fr 1fr} .fy-wapo-pack-block.fy-wapo-pack-active[data-fy-pack="6"] .yith-wapo-addon ul, .fy-wapo-pack-block.fy-wapo-pack-active[data-fy-pack="6"] .yith-wapo-options{grid-template-columns:repeat(3,1fr)} .fy-wapo-pack-block.fy-wapo-pack-active[data-fy-pack="6"] .yith-wapo-option-image{width:56px;height:62px} .yith-wapo-option-name{font-size:12px} .fy-atc-btn{font-size:17px;padding:14px} .fy-single-product--default .fy-default-purchase .single_add_to_cart_button{font-size:17px;min-height:50px;padding:14px 16px} .fy-default-purchase .quantity .qty{width:64px;min-height:50px;font-size:18px} .fy-trust-row{grid-template-columns:repeat(2,1fr);gap:6px} .fy-tbadge{padding:8px 6px} .fy-below{padding:0 16px 100px} .fy-section-gap{height:44px} .fy-sec-title{font-size:30px} /* Tighten heading-to-content spacing on mobile so it stays clearly smaller than the between-section gap (keeps the section hierarchy readable). */ .fy-sec-sub{margin-bottom:22px} .fy-benefits-grid{grid-template-columns:1fr} .fy-when-grid{grid-template-columns:1fr 1fr;margin-top:22px} .fy-ing-grid{grid-template-columns:1fr;gap:8px} .fy-ing-tabs{flex-wrap:wrap;gap:6px;margin-bottom:20px} /* Slimmer ingredient cards on mobile: tighter rows, smaller symbol. */ .fy-ing-card summary{padding:10px 14px;gap:12px;font-size:13px} .fy-ing-sym{font-size:20px;width:30px} .fy-ing-chev{font-size:10px} .fy-ing-body{padding:0 14px 12px 56px;font-size:12px;line-height:1.55} .fy-comp-table{font-size:11px} .fy-comp-table th,.fy-comp-table td{padding:8px} .fy-rgrid{grid-template-columns:1fr} .fy-reviews-top{flex-direction:column;align-items:flex-start;gap:12px} .fy-rfeatured{padding:20px} .fy-sticky-cart{display:block} } @media(max-width:400px){ .fy-when-grid{grid-template-columns:1fr} } /* ─── WooCommerce hook zones (plugins, tabs, variation form bridge) ─── */ .fy-product-summary > .woocommerce-notices-wrapper { margin-bottom: 16px; } .fy-product-summary .woocommerce-message, .fy-product-summary .woocommerce-info, .fy-product-summary .woocommerce-error { margin-bottom: 12px; } .fy-wc-sale-flash { position: absolute; top: 14px; left: 14px; z-index: 2; } /* Override WC's .woocommerce span.onsale (specificity 0,2,1=21). Use an explicit span + parent chain to win at (0,3,1)=31. */ .woocommerce .fy-wc-sale-flash span.onsale { display: inline-block !important; position: static !important; background: var(--blue) !important; background-color: var(--blue) !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; padding: 4px 12px !important; border-radius: 20px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; line-height: 1.4 !important; min-height: unset !important; min-width: unset !important; width: auto !important; height: auto !important; top: auto !important; left: auto !important; margin: 0 !important; z-index: 2 !important; } .fy-gallery { position: relative; } /* * The bridge form is fully visible — YITH WAPO renders its addon blocks here. * WC native form UI (button, qty, variations) is hidden so only the bottle * blocks are shown. Fyool's own ATC button handles the actual submission. */ .fy-wc-add-to-cart-bridge { display: block; } /* Hide everything WC renders except YITH WAPO addon blocks. IMPORTANT: target only the WC-native .quantity (direct child of form.cart) — YITH WAPO also uses `.quantity` inside its product/number addon options (e.g. .yith-wapo-option .quantity input.input-number) and those must stay visible so users can pick per-flavor quantities on the bundle page. */ .fy-wc-add-to-cart-bridge .single_add_to_cart_button, .fy-wc-add-to-cart-bridge button[type="submit"], .fy-wc-add-to-cart-bridge form.cart > .quantity, .fy-wc-add-to-cart-bridge .variations, .fy-wc-add-to-cart-bridge .woocommerce-variation-add-to-cart, .fy-wc-add-to-cart-bridge .woocommerce-variation-description, .fy-wc-add-to-cart-bridge .woocommerce-variation-price, .fy-wc-add-to-cart-bridge .woocommerce-variation-availability, .fy-wc-add-to-cart-bridge .reset_variations, .fy-wc-add-to-cart-bridge .woocommerce-notices-wrapper, .fy-wc-add-to-cart-bridge p.price, .fy-wc-add-to-cart-bridge .wc-block-components-notice-banner { display: none !important; } /* Re-assert visibility on YITH WAPO quantity controls in case the cascade suppressed them. Covers both the type=number addon (.input-number) and the type=product per-option qty (.wapo-product-qty). */ .fy-wc-add-to-cart-bridge .yith-wapo-block .yith-wapo-option .quantity, .fy-wc-add-to-cart-bridge .yith-wapo-block .yith-wapo-option .input-number, .fy-wc-add-to-cart-bridge .yith-wapo-block .yith-wapo-option .option-add-to-cart .quantity { display: inline-flex !important; align-items: center; max-width: 96px; } .fy-wc-add-to-cart-bridge .yith-wapo-block .yith-wapo-option .input-number input, .fy-wc-add-to-cart-bridge .yith-wapo-block .yith-wapo-option input.wapo-product-qty, .fy-wc-add-to-cart-bridge .yith-wapo-block .yith-wapo-option .quantity input { display: inline-block !important; } .fy-wc-product-meta { margin-top: 16px; font-size: 13px; color: var(--muted); } .fy-wc-product-meta .product_meta > span { display: block; margin-bottom: 6px; } /* * WooCommerce after_single_product_summary hook zone. * The hook still fires so plugins can attach — we just hide the default * WC product-data tabs (Additional information / Description / Reviews) * because our custom below-fold sections already surface that content. * Upsells and related products are handled by section-related.php. */ .fy-wc-after-summary { display: none; /* tabs + upsells hidden; custom sections replace them */ } .fy-wc-rating .star-rating { margin: 0 6px 0 0; } .fy-wc-breadcrumb a { color: var(--muted); font-size: 13px; } .fy-wc-breadcrumb a:hover { color: var(--blue); } /* ───────────────────────────────────────────────────────────────────────────── * YITH WAPO bottle-addon blocks — styled to match .fy-bottle-section * * JS (syncWapoPackBlock) adds: * • .fy-wapo-pack-block — on every pack block (hidden by default) * • .fy-wapo-pack-active — only on the block matching the selected pack * • data-fy-pack="1|3|6" — used for per-pack tint + badge text * * YITH WAPO Premium ≥ 4.x class reference: * .yith-wapo-container top-level wrapper * .yith-wapo-block each addon group block * .yith-wapo-addon-title group heading text * .yith-wapo-addon addon type wrapper (id = yith-wapo-addon-N) * .yith-wapo-option individual option
  • * .yith-wapo-option-label