/* ========================================================================== * FluentCart Gutenberg: Product Info * Universal Gentleland holographic / glossy skin. * * IMPORTANT: * - Scoped to FluentCart's actual Product Info block wrapper only. * - No product slug, post ID, single-product-page wrapper, or JS dependency. * - Child blocks remain native FluentCart blocks and keep their functionality. * ======================================================================= */ body:not(.wp-admin) .product-info-block-wrapper { --gentleland-product-info-ink: #4a1820; --gentleland-product-info-copy: #654b45; --gentleland-product-info-gold: #b77a31; --gentleland-product-info-gold-light: #f5d78e; --gentleland-product-info-ivory: #fffaf0; position: relative; isolation: isolate; box-sizing: border-box; width: 100%; padding: clamp(22px, 3.2vw, 46px) !important; gap: clamp(26px, 4vw, 58px) !important; border: 1px solid rgba(157, 104, 39, .34); border-radius: 28px; /* * All card-wide foil/glass layers are painted directly into the card. * No full-card pseudo-element is composited above a 3D-transformed card, * which is what previously produced the visible rendering seam. */ background: linear-gradient( 115deg, rgba(255, 255, 255, 0) 8%, rgba(255, 245, 220, .30) 24%, rgba(255, 255, 255, .82) 42%, rgba(205, 255, 239, .48) 53%, rgba(226, 213, 255, .48) 65%, rgba(255, 224, 238, .36) 78%, rgba(255, 255, 255, 0) 94% ), radial-gradient(circle at 18% 12%, rgba(255, 184, 209, .055), rgba(255, 184, 209, 0) 42%), radial-gradient(circle at 78% 16%, rgba(184, 255, 230, .045), rgba(184, 255, 230, 0) 44%), radial-gradient(circle at 82% 82%, rgba(210, 188, 255, .045), rgba(210, 188, 255, 0) 44%), radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 1) 0 11%, rgba(255, 255, 255, 0) 34%), radial-gradient(circle at 90% 12%, rgba(222, 255, 244, .62) 0, rgba(222, 255, 244, 0) 31%), radial-gradient(circle at 86% 90%, rgba(232, 213, 255, .56) 0, rgba(232, 213, 255, 0) 30%), linear-gradient(135deg, rgba(255, 252, 244, .98) 0%, rgba(249, 239, 220, .96) 48%, rgba(255, 249, 239, .98) 100%); background-size: 220% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 0% 50%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-repeat: no-repeat; box-shadow: 0 20px 52px rgba(67, 35, 29, .13), 0 4px 12px rgba(67, 35, 29, .08), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 239, 195, .46); overflow: hidden; transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(0); transform-origin: 50% 50%; transition: transform .42s cubic-bezier(.2, .78, .2, 1), background-position .85s cubic-bezier(.16, .78, .18, 1), box-shadow .42s ease, border-color .42s ease; will-change: transform; } /* Card-wide pseudo layers intentionally disabled: their separate compositing layer caused the seam during 3D tilt. */ body:not(.wp-admin) .product-info-block-wrapper::before, body:not(.wp-admin) .product-info-block-wrapper::after { content: none; } body:not(.wp-admin) .product-info-block-wrapper > .product-info-child-block { position: relative; z-index: 1; min-width: 0; } /* Main visual: retain the product art, but present it like glossy card stock. */ body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-wrapper { position: relative; top: 0; transition: top .42s cubic-bezier(.2, .78, .2, 1); } body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb { position: relative; isolation: isolate; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(145, 94, 31, .42) !important; border-radius: 21px !important; background: rgba(255, 252, 245, .78); box-shadow: 0 15px 30px rgba(56, 31, 29, .16), 0 3px 8px rgba(56, 31, 29, .10), 0 0 0 1px rgba(255, 239, 192, .55), inset 0 1px 0 rgba(255, 255, 255, .9); transition: transform .42s cubic-bezier(.2, .78, .2, 1), box-shadow .42s ease; } body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit; opacity: .30; background: radial-gradient(ellipse 90% 72% at 18% 8%, rgba(255, 255, 255, .52) 0%, rgba(255, 248, 225, .22) 35%, rgba(255, 255, 255, 0) 72%), radial-gradient(ellipse 74% 62% at 82% 86%, rgba(204, 255, 236, .16) 0%, rgba(224, 211, 255, .12) 38%, rgba(255, 255, 255, 0) 74%); background-size: 145% 145%, 135% 135%; background-position: 0% 0%, 100% 100%; background-repeat: no-repeat; transition: opacity .35s ease, background-position .8s cubic-bezier(.2, .78, .2, 1); } body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb .containerZoom, body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb img { border-radius: 20px !important; } /* Thumbnail controls stay functional, but belong visually to the same object. */ body:not(.wp-admin) .product-info-block-wrapper .fct-gallery-thumb-controls { gap: 10px !important; } body:not(.wp-admin) .product-info-block-wrapper .fct-gallery-thumb-control-button { border-color: rgba(143, 96, 37, .26) !important; border-radius: 10px !important; background: rgba(255, 250, 240, .72) !important; box-shadow: 0 3px 9px rgba(71, 41, 30, .07) !important; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important; } body:not(.wp-admin) .product-info-block-wrapper .fct-gallery-thumb-control-button:hover { transform: translateY(-1px); border-color: rgba(183, 122, 49, .58) !important; box-shadow: 0 5px 12px rgba(71, 41, 30, .11) !important; } body:not(.wp-admin) .product-info-block-wrapper .fct-gallery-thumb-control-button.active { border-color: rgba(159, 102, 31, .78) !important; box-shadow: 0 0 0 2px rgba(255, 245, 208, .9), 0 0 0 3px rgba(183, 122, 49, .34), 0 5px 12px rgba(71, 41, 30, .1) !important; } /* Product title: editorial rather than default-commerce. */ body:not(.wp-admin) .product-info-block-wrapper :is(.fct-product-card-title, .fct-product-title) { position: relative; color: var(--gentleland-product-info-ink) !important; } body:not(.wp-admin) .product-info-block-wrapper .fct-product-card-title, body:not(.wp-admin) .product-info-block-wrapper .fct-product-title :is(h1, h2, h3, h4, h5, h6) { margin-top: 0 !important; margin-bottom: 16px !important; color: var(--gentleland-product-info-ink) !important; font-size: clamp(2rem, 3.6vw, 3.45rem) !important; font-weight: 700 !important; line-height: 1.01 !important; letter-spacing: -.035em !important; text-wrap: balance; text-shadow: 0 1px 0 rgba(255, 255, 255, .66); } body:not(.wp-admin) .product-info-block-wrapper .fct-product-card-title::after, body:not(.wp-admin) .product-info-block-wrapper .fct-product-title::after { content: ""; display: block; width: min(124px, 32%); height: 2px; margin-top: 18px; border-radius: 99px; background: linear-gradient(90deg, #8e5724 0%, #f0cd72 48%, rgba(240, 205, 114, 0) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .7); } /* Excerpt: quieter than the title, but with a deliberate glossy-paper panel. */ body:not(.wp-admin) .product-info-block-wrapper :is(.fct-product-card-excerpt, .fct-product-excerpt) { box-sizing: border-box; max-width: 48rem; margin-bottom: 20px !important; padding: 13px 15px 14px 16px; border-left: 2px solid rgba(183, 122, 49, .62); border-radius: 0 12px 12px 0; background: linear-gradient(90deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .14)); color: var(--gentleland-product-info-copy) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42); } body:not(.wp-admin) .product-info-block-wrapper :is(.fct-product-card-excerpt, .fct-product-excerpt) :is(p, div) { margin-top: 0 !important; margin-bottom: 0 !important; color: inherit !important; font-size: clamp(.98rem, 1.25vw, 1.08rem) !important; line-height: 1.62 !important; } /* Price / pricing information becomes a compact piece of metadata. */ body:not(.wp-admin) .product-info-block-wrapper :is(.fct-product-prices, .fct-product-item-price) { width: fit-content; max-width: 100%; margin: 0 0 20px !important; padding: 8px 12px !important; border: 1px solid rgba(159, 103, 34, .28); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(249, 232, 196, .58)); color: var(--gentleland-product-info-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 4px 10px rgba(71, 41, 30, .07); } /* Give the purchasing controls breathing room without changing their established button skin. */ body:not(.wp-admin) .product-info-block-wrapper :is(.fct_buy_section, .fct-buy-section, [class*="buy-section"]) { position: relative; z-index: 3; } /* CSS-only card/parallax response. No JS, so it is deliberately subtle. */ @media (hover: hover) and (pointer: fine) { body:not(.wp-admin) .product-info-block-wrapper:hover { border-color: rgba(168, 110, 40, .48); box-shadow: 0 28px 66px rgba(67, 35, 29, .17), 0 7px 16px rgba(67, 35, 29, .09), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 0 0 1px rgba(255, 239, 195, .58); transform: perspective(1400px) rotateX(.7deg) rotateY(-.9deg) translateY(-3px); background-position: 100% 50%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } body:not(.wp-admin) .product-info-block-wrapper:hover .fct-product-gallery-wrapper { top: -2px; } body:not(.wp-admin) .product-info-block-wrapper:hover .fct-product-gallery-thumb { box-shadow: 0 20px 36px rgba(56, 31, 29, .19), 0 4px 10px rgba(56, 31, 29, .11), 0 0 0 1px rgba(255, 239, 192, .68), inset 0 1px 0 rgba(255, 255, 255, .95); } body:not(.wp-admin) .product-info-block-wrapper:hover .fct-product-gallery-thumb::before { opacity: .42; background-position: 100% 100%, 0% 0%; } } /* FluentCart itself collapses Product Info at 900px; keep the skin comfortable there. */ @media (max-width: 900px) { body:not(.wp-admin) .product-info-block-wrapper { padding: clamp(18px, 4vw, 30px) !important; gap: 24px !important; border-radius: 22px; } body:not(.wp-admin) .product-info-block-wrapper .fct-product-card-title, body:not(.wp-admin) .product-info-block-wrapper .fct-product-title :is(h1, h2, h3, h4, h5, h6) { font-size: clamp(1.9rem, 7vw, 2.75rem) !important; } } @media (max-width: 520px) { body:not(.wp-admin) .product-info-block-wrapper { padding: 15px !important; gap: 19px !important; border-radius: 18px; box-shadow: 0 13px 30px rgba(67, 35, 29, .12), 0 3px 8px rgba(67, 35, 29, .07), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 239, 195, .44); } body:not(.wp-admin) .product-info-block-wrapper::before { opacity: .12; } body:not(.wp-admin) .product-info-block-wrapper::after { opacity: .18; } body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb { border-radius: 15px !important; } body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb .containerZoom, body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb img { border-radius: 14px !important; } body:not(.wp-admin) .product-info-block-wrapper :is(.fct-product-card-excerpt, .fct-product-excerpt) { padding: 11px 12px 12px 13px; } } @media (prefers-reduced-motion: reduce) { body:not(.wp-admin) .product-info-block-wrapper, body:not(.wp-admin) .product-info-block-wrapper::before, body:not(.wp-admin) .product-info-block-wrapper::after, body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-wrapper, body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb, body:not(.wp-admin) .product-info-block-wrapper .fct-product-gallery-thumb::before { transition: none !important; transform: none !important; top: 0 !important; } }