/* =========================================================
FXNook Marketplace Tools - product page layout.
Loaded only on licensed products using the FXNook layout.
Borrows the theme font; sets spacing, colour and shape.
========================================================= */
.fxnpp {
--fx-green: var(--fxn-green, #9DCC4C);
--fx-green-dark: var(--fxn-green-deep, #4A7515);
--fx-green-soft: var(--fxn-green-tint, #F2F8E6);
--fx-ink: var(--fxn-ink, #231F20);
--fx-text: var(--fxn-text, #4A4546);
--fx-muted: var(--fxn-muted, #6B6667);
--fx-line: var(--fxn-line, #E7E5E2);
--fx-bg: var(--fxn-surface, #F7F7F4);
--fx-radius: 16px;
--fx-shadow: 0 1px 2px rgba(35, 31, 32, .04), 0 12px 32px rgba(35, 31, 32, .07);
color: var(--fx-text);
padding-block: 8px 40px;
}
.fxnpp *,
.fxnpp *::before,
.fxnpp *::after { box-sizing: border-box; }
.fxnpp .fxnpp-i { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.fxnpp-muted { color: var(--fx-muted); }
/* ---------- breadcrumb ---------- */
.fxnpp-crumbs { margin: 0 0 18px; }
.fxnpp-crumbs .woocommerce-breadcrumb { margin: 0; font-size: 13px; color: var(--fx-muted); }
.fxnpp-crumbs .woocommerce-breadcrumb a { color: var(--fx-muted); }
.fxnpp-crumbs .woocommerce-breadcrumb a:hover { color: var(--fx-green-dark); }
/* ---------- grid ---------- */
.fxnpp-grid {
display: grid;
grid-template-columns: 330px minmax(0, 1fr) 380px;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"gallery summary buy"
"media summary buy"
"details details buy";
gap: 0 28px;
align-items: start;
}
.fxnpp-gallery { grid-area: gallery; position: relative; min-width: 0; }
.fxnpp-summary { grid-area: summary; min-width: 0; }
.fxnpp-details { grid-area: details; min-width: 0; margin-top: 8px; }
.fxnpp-media { grid-area: media; min-width: 0; margin-top: 10px; }
/* No space left under the image by the theme's gallery. */
.fxnpp-gallery .woocommerce-product-gallery,
.fxnpp-gallery .product-images,
.fxnpp-gallery .wd-gallery-images,
.fxnpp-gallery .woocommerce-product-gallery__wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.fxnpp-gallery .product-images-inner { margin-bottom: 0; }
/* The strip sits under the (now smaller) image: shorter tiles, two visible. */
.fxnpp-media .fxnmc { --fxnmc-h: 92px; margin: 0; }
.fxnpp-media .fxnmc-track { gap: 10px; padding-bottom: 8px; }
.fxnpp-media .fxnmc-nav { width: 32px; height: 32px; font-size: 22px; line-height: 28px; }
.fxnpp-media .fxnmc .fxnmc-viewport .fxnmc-nav--prev { left: -8px; right: auto; }
.fxnpp-media .fxnmc .fxnmc-viewport .fxnmc-nav--next { right: -8px; left: auto; }
.fxnpp-media .fxnmc-play { width: 44px; height: 31px; }
.fxnpp-media .fxnbt-card { margin-top: 12px; }
/* ---------- risk and policies ---------- */
.fxnpp-risk {
position: relative;
margin: 12px 0 0;
}
.fxnpp-risk__head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 8px;
border: 1px solid #f3dfb8;
border-radius: 12px;
background: #fffaf0;
cursor: pointer;
list-style: none;
user-select: none;
}
.fxnpp-risk__head::-webkit-details-marker { display: none; }
.fxnpp-risk__head::marker { content: ""; }
.fxnpp-risk__head strong { font-size: 13px; color: #7a4d00; }
.fxnpp-risk__head:hover { background: #fff5e0; }
.fxnpp-risk__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #fdecc8; color: #a15c00; flex: 0 0 auto; }
.fxnpp-risk__icon .fxnpp-i { width: 14px; height: 14px; }
.fxnpp-risk__more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #a15c00; }
.fxnpp-risk__more::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.fxnpp-risk[open] .fxnpp-risk__more::after { transform: rotate(-135deg) translateY(-1px); }
.fxnpp-risk[open] .fxnpp-risk__head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Floats over what is below: opening it never changes the page height. */
.fxnpp-risk__pop {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 30;
padding: 12px 14px 14px;
border: 1px solid #f3dfb8;
border-top: 0;
border-radius: 0 0 12px 12px;
background: #fffaf0;
box-shadow: 0 14px 30px rgba(35, 31, 32, .14);
}
.fxnpp-risk__pop p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #6b5a3a; }
.fxnpp-risk__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.fxnpp-risk__links:empty { display: none; }
.fxnpp-risk__links a {
padding: 6px 11px;
border-radius: 999px;
border: 1px solid #ead9b6;
background: #fff;
color: #7a4d00 !important;
font-size: 12px;
font-weight: 700;
text-decoration: none !important;
}
.fxnpp-risk__links a:hover { background: #fdecc8; }
.fxnpp-gallery { align-self: start; }
.fxnpp-buy { align-self: start; }
.fxnpp-buy { grid-area: buy; min-width: 0; position: sticky; top: 110px; }
/* ---------- gallery ---------- */
.fxnpp-gallery .woocommerce-product-gallery {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.fxnpp-gallery .woocommerce-product-gallery__wrapper,
.fxnpp-gallery .wd-carousel-inner,
.fxnpp-gallery .product-images-inner {
border-radius: var(--fx-radius);
overflow: hidden;
}
.fxnpp-gallery img { border-radius: 12px; }
/*
* "Best seller", on the image opposite the platform tag.
*
* Has to read on any cover - black box art or a white screenshot - so it is
* a solid fire gradient (never see-through) inside a white edge and a soft
* dark shadow: the edge separates it from dark images, the shadow from
* light ones. A slow shine and a flickering flame give it some life; both
* stop for visitors who ask for less motion.
*/
.fxnpp-imgtag {
position: absolute;
top: 14px;
right: 14px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px 5px 8px;
border-radius: 8px;
background: linear-gradient(135deg, #FF8A1F 0%, #F2541B 45%, #D92B2B 100%);
color: #fff;
font-size: 12.5px;
font-weight: 800;
letter-spacing: .02em;
line-height: 1.2;
text-shadow: 0 1px 1px rgba(120, 20, 0, .45);
box-shadow:
0 0 0 2px rgba(255, 255, 255, .92),
0 6px 16px rgba(35, 31, 32, .35),
0 0 18px rgba(242, 84, 27, .45);
overflow: hidden;
pointer-events: none;
animation: fxnpp-glow 2.6s ease-in-out infinite;
}
.fxnpp-imgtag .fxnpp-i {
width: 14px;
height: 14px;
color: #FFE27A;
filter: drop-shadow(0 0 3px rgba(255, 214, 90, .8));
transform-origin: 50% 85%;
animation: fxnpp-flame 1.4s ease-in-out infinite;
}
/* The shine: a soft white band that sweeps across every few seconds. */
.fxnpp-imgtag::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 45%;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
transform: skewX(-18deg);
animation: fxnpp-shine 3.6s ease-in-out infinite;
}
@keyframes fxnpp-shine {
0%, 62% { left: -60%; }
100% { left: 130%; }
}
@keyframes fxnpp-flame {
0%, 100% { transform: scale(1) rotate(-3deg); }
50% { transform: scale(1.15) rotate(3deg); }
}
@keyframes fxnpp-glow {
0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 6px 16px rgba(35, 31, 32, .35), 0 0 12px rgba(242, 84, 27, .35); }
50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 6px 16px rgba(35, 31, 32, .35), 0 0 22px rgba(242, 84, 27, .65); }
}
@media (prefers-reduced-motion: reduce) {
.fxnpp-imgtag,
.fxnpp-imgtag .fxnpp-i,
.fxnpp-imgtag::after { animation: none; }
.fxnpp-imgtag::after { display: none; }
}
/*
* The column under the gallery. The summary beside it is usually taller;
* a grid spreads that extra height over every row it spans, which opened a
* gap under the image and another under the strip. Now the image row keeps
* its own height, and the screenshot strip grows (script in product-page.php)
* to use the room that is left, up to a sensible size.
*/
@media (min-width: 1181px) {
.fxnpp-grid { grid-template-rows: auto 1fr auto; }
.fxnpp-media { align-self: start; margin-top: 12px; }
}
.fxnpp-platform {
position: absolute;
top: 14px;
left: 14px;
z-index: 5;
padding: 5px 12px;
border-radius: 8px;
background: var(--fx-green);
color: var(--fxn-ink, #231F20);
font-size: 12.5px;
font-weight: 800;
letter-spacing: .04em;
box-shadow: 0 4px 12px rgba(157, 204, 76, .35);
pointer-events: none;
}
/* ---------- summary ---------- */
.fxnpp-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
margin: 0 0 10px;
font-size: clamp(26px, 2.4vw, 34px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
color: var(--fx-ink);
}
.fxnpp-title .fxnmt-version {
font-size: 14px;
font-weight: 700;
color: var(--fx-muted);
background: var(--fx-bg);
border: 1px solid var(--fx-line);
padding: 3px 9px;
border-radius: 999px;
margin: 0;
vertical-align: middle;
}
.fxnpp-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin: 0 0 16px;
font-size: 14px;
}
.fxnpp-byline__item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--fx-text);
text-decoration: none;
}
.fxnpp-byline__item .fxnpp-i { width: 16px; height: 16px; color: var(--fx-green-dark); }
/* Demo trials sit beside the sales count, and read quieter than it: interest,
not money. */
.fxnpp-byline__item--trials { color: var(--fx-muted, #6B6667); cursor: help; }
.fxnpp-byline__item--trials .fxnpp-i { color: var(--fx-muted, #6B6667); }
.fxnpp-byline a { color: var(--fx-green-dark); font-weight: 700; text-decoration: none; }
.fxnpp-byline a:hover { text-decoration: underline; }
.fxnpp-rating { color: var(--fx-text) !important; font-weight: 400 !important; }
.fxnpp-rating strong { color: var(--fx-ink); }
.fxnpp-stars {
--fxnpp-star-size: 16px;
position: relative;
display: inline-block;
width: calc(var(--fxnpp-star-size) * 5);
height: var(--fxnpp-star-size);
background: linear-gradient(90deg, #f5b301 calc(var(--fxnpp-rating) / 5 * 100%), var(--fxn-line, #E7E5E2) 0);
-webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / var(--fxnpp-star-size) var(--fxnpp-star-size) repeat-x;
mask: url("data:image/svg+xml;utf8,") 0 0 / var(--fxnpp-star-size) var(--fxnpp-star-size) repeat-x;
}
/* ---------- badges ---------- */
.fxnpp-badges {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
padding: 0;
}
.fxnpp-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 6px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
background: var(--fx-green-soft);
color: var(--fxn-green-deep, #4A7515);
border: 1px solid var(--fxn-green-line, #D9EBBB);
}
.fxnpp-badge .fxnpp-i { width: 15px; height: 15px; }
.fxnpp-badge--star { background: #fff7e0; color: #9a6400; border-color: #f6e0a6; }
.fxnpp-badge--fire { background: #fff0ea; color: #b4441a; border-color: #f7d2c2; }
/* ---------- the FXNook trust seal ---------- */
.fxnpp-badges > .fxnpp-seal {
position: relative;
gap: 9px;
padding: 4px 12px 4px 5px;
border: 1px solid var(--fxn-green-deep, #4A7515);
background: linear-gradient(135deg, var(--fxn-green-deep, #4A7515) 0%, var(--fxn-green-deep, #4A7515) 100%);
color: #fff;
box-shadow: 0 2px 6px rgba(74, 117, 21, .25), 0 6px 16px rgba(74, 117, 21, .18), inset 0 1px 0 rgba(255, 255, 255, .28);
cursor: help;
}
.fxnpp-badges > .fxnpp-seal:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(74, 117, 21, .35); }
.fxnpp-seal__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: var(--fxn-green-deep, #4A7515);
box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
flex: 0 0 auto;
}
.fxnpp-seal__icon .fxnpp-i { width: 17px; height: 17px; }
.fxnpp-seal__text { display: flex; flex-direction: column; line-height: 1.1; }
.fxnpp-seal__kicker { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.fxnpp-seal__label { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; }
.fxnpp-seal__tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 2px;
border-radius: 50%;
background: rgba(255, 255, 255, .22);
font-size: 10px;
font-weight: 900;
line-height: 1;
}
/* a thin divider between trust badges and performance badges */
.fxnpp-badges > .fxnpp-badges__sep {
width: 1px;
align-self: stretch;
margin: 4px 2px;
padding: 0;
border: 0;
background: var(--fxn-line, #E7E5E2);
list-style: none;
}
/* badges added by other plugins bring their own pill */
.fxnpp-badges > .fxnpp-badge--plain { padding: 0; border: 0; background: none; }
/* ---------- excerpt + highlights ---------- */
.fxnpp-excerpt { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--fx-text); }
.fxnpp-excerpt p:last-child { margin-bottom: 0; }
.fxnpp-highlights {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin: 0 0 26px;
padding: 0;
}
.fxnpp-highlight {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 14px;
border: 1px solid var(--fx-line);
border-radius: 12px;
background: #fff;
}
.fxnpp-highlight__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-bottom: 8px;
border-radius: 10px;
background: var(--fx-green-soft);
color: var(--fx-green-dark);
}
.fxnpp-highlight__label { font-size: 12px; color: var(--fx-muted); }
.fxnpp-highlight__value { font-size: 14px; font-weight: 800; color: var(--fx-ink); word-break: break-word; }
/* ---------- what's new ---------- */
.fxnpp-whatsnew {
margin: 0 0 24px;
padding: 18px 20px;
border: 1px solid var(--fxn-green-line, #D9EBBB);
border-radius: 14px;
background: linear-gradient(180deg, var(--fxn-green-tint, #F2F8E6) 0%, #fff 100%);
}
.fxnpp-whatsnew__head { display: flex; align-items: center; gap: 12px; }
.fxnpp-whatsnew__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--fx-green);
color: var(--fxn-ink, #231F20);
flex: 0 0 auto;
}
.fxnpp-whatsnew__icon .fxnpp-i { width: 20px; height: 20px; }
.fxnpp-whatsnew__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 16px;
font-weight: 800;
color: var(--fx-ink);
}
.fxnpp-whatsnew__ver {
padding: 2px 9px;
border-radius: 999px;
background: var(--fx-green-soft);
color: var(--fxn-green-deep, #4A7515);
font-size: 12.5px;
font-weight: 800;
}
.fxnpp-whatsnew__date { margin: 2px 0 0; font-size: 13px; color: var(--fx-muted); }
.fxnpp-whatsnew__note { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--fx-text); }
.fxnpp-whatsnew__note p { margin: 0 0 6px; }
.fxnpp-whatsnew__note p:last-child { margin: 0; }
.fxnpp-whatsnew__all {
display: inline-block;
margin-top: 10px;
font-size: 13.5px;
font-weight: 700;
color: var(--fx-green-dark);
text-decoration: none;
}
.fxnpp-whatsnew__all:hover { text-decoration: underline; }
/* ---------- tabs ---------- */
.fxnpp-tabs .woocommerce-tabs { margin: 0; padding: 0; border: 0; }
.fxnpp-tabs .wc-tabs,
.fxnpp-tabs .tabs.wc-tabs {
display: flex !important;
flex-wrap: wrap;
gap: 4px;
margin: 0 0 22px !important;
padding: 6px !important;
list-style: none;
background: var(--fx-bg);
border: 1px solid var(--fx-line) !important;
border-radius: 14px;
}
.fxnpp-tabs .wc-tabs::before,
.fxnpp-tabs .wc-tabs::after { display: none !important; }
.fxnpp-tabs .wc-tabs li {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
border-radius: 10px;
}
.fxnpp-tabs .wc-tabs li::before,
.fxnpp-tabs .wc-tabs li::after { display: none !important; }
.fxnpp-tabs .wc-tabs li a {
display: block;
padding: 9px 16px !important;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
color: var(--fx-muted) !important;
text-decoration: none;
}
.fxnpp-tabs .wc-tabs li a:hover { color: var(--fx-ink) !important; }
.fxnpp-tabs .wc-tabs li.active a {
background: #fff;
color: var(--fx-green-dark) !important;
box-shadow: 0 1px 3px rgba(35, 31, 32, .08);
}
.fxnpp-tabs .woocommerce-Tabs-panel { margin: 0; padding: 0; font-size: 15px; line-height: 1.75; }
.fxnpp-tabs .woocommerce-Tabs-panel > h2:first-child { font-size: 20px; font-weight: 800; color: var(--fx-ink); margin: 0 0 12px; }
/* ---------- buy box ---------- */
.fxnpp-buy__card {
background: #fff;
border: 1px solid var(--fx-line);
border-radius: 20px;
box-shadow: var(--fx-shadow);
padding: 22px;
}
.fxnpp-price { margin: 0 0 16px; }
.fxnpp-price .price {
margin: 0 !important;
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1.1;
color: var(--fx-green-dark) !important;
}
.fxnpp-price .price .woocommerce-Price-amount { color: inherit; }
/* The licensing buy box sits inside our card: drop its own frame. */
.fxnpp-buy .fxn-buybox {
max-width: none;
margin: 0 0 16px;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.fxnpp-buy .fxn-plans {
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
.fxnpp-buy .fxn-plan__box { padding: 10px 11px 9px; }
.fxnpp-buy .fxn-plan__price { font-size: 16px; }
@media (max-width: 360px) {
.fxnpp-buy .fxn-plans { grid-template-columns: 1fr; }
}
.fxnpp-buy form.cart {
display: grid !important;
gap: 10px;
margin: 0 !important;
}
.fxnpp-buy form.cart .quantity { display: none !important; }
.fxnpp-buy .single_add_to_cart_button {
width: auto !important;
min-width: 200px;
max-width: 100%;
min-height: 44px;
margin: 4px 0 0 !important;
padding: 0 26px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: .01em;
text-transform: none !important;
}
.fxnpp-buy .single_add_to_cart_button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--fx-green) !important;
border: 0 !important;
color: var(--fxn-ink, #231F20) !important;
box-shadow: 0 8px 20px rgba(157, 204, 76, .28);
}
.fxnpp-buy .single_add_to_cart_button:hover { background: var(--fxn-green-hover, #8BBB3B) !important; }
/* A small lightning bolt before "Buy now". */
.fxnpp-buy .single_add_to_cart_button::before {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* The theme's second button is not used on licensed products. */
.fxnpp-buy #wd-add-to-cart { display: none !important; }
/* Trust row */
.fxnpp-trust {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 18px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--fx-line);
}
.fxnpp-trust li {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin: 0;
text-align: center;
font-size: 11.5px;
line-height: 1.35;
color: var(--fx-muted);
}
.fxnpp-trust .fxnpp-i { width: 22px; height: 22px; color: var(--fx-green-dark); margin-bottom: 4px; }
.fxnpp-trust strong { color: var(--fx-ink); font-size: 12px; }
/* At a glance */
.fxnpp-glance { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--fx-line); }
.fxnpp-glance .fxnook-specs-wrap {
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
border-radius: 0;
}
.fxnpp-glance .fxnook-specs-wrap h3 { margin: 0 0 6px; font-size: 15px; }
.fxnpp-glance .fxnook-specs-wrap h3 .badge { display: none; }
.fxnpp-glance .fxnook-specs-table td { padding: 8px 0; font-size: 13.5px; }
.fxnpp-glance .fxnook-specs-table tr:last-child td { border-bottom: 1px solid var(--fxn-surface, #F7F7F4); }
.fxnpp-updated {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 8px 0 0;
font-size: 13.5px;
}
.fxnpp-updated span { color: var(--fxn-muted, #6B6667); font-weight: 600; }
.fxnpp-updated strong { color: var(--fx-ink); font-weight: 600; }
/* ---------- strip + share ---------- */
.fxnpp-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 30px;
margin: 44px 0 0;
padding: 22px 0;
border-top: 1px solid var(--fx-line);
border-bottom: 1px solid var(--fx-line);
}
.fxnpp-strip__list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 18px 34px;
margin: 0;
padding: 0;
}
.fxnpp-strip__list li { display: flex; align-items: center; gap: 12px; margin: 0; }
.fxnpp-strip__list .fxnpp-i {
width: 40px;
height: 40px;
padding: 9px;
border-radius: 50%;
background: var(--fx-green-soft);
color: var(--fx-green-dark);
}
.fxnpp-strip__list strong { display: block; color: var(--fx-ink); font-size: 14px; }
.fxnpp-strip__list span { display: block; color: var(--fx-muted); font-size: 12.5px; }
.fxnpp-share { display: flex; align-items: center; gap: 6px; }
.fxnpp-share > span { margin-right: 6px; font-weight: 700; color: var(--fx-ink); }
.fxnpp-share a,
.fxnpp-share button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--fx-line);
background: #fff;
color: var(--fx-ink);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.fxnpp-share a:hover,
.fxnpp-share button:hover { background: var(--fx-green); border-color: var(--fx-green); color: var(--fxn-ink, #231F20); }
.fxnpp-share .fxnpp-i { width: 16px; height: 16px; }
.fxnpp-copy.is-done { background: var(--fx-green); border-color: var(--fx-green); color: var(--fxn-ink, #231F20); }
.fxnpp-related { margin-top: 40px; }
/* ---------- responsive ---------- */
@media (max-width: 1180px) {
.fxnpp-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
"gallery buy"
"media buy"
"summary summary"
"details details";
gap: 20px 28px;
}
.fxnpp-buy { position: static; }
.fxnpp-media .fxnmc { --fxnmc-h: 130px; }
}
@media (max-width: 768px) {
.fxnpp-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"gallery"
"summary"
"buy"
"media"
"details";
gap: 22px;
}
.fxnpp-buy__card { padding: 18px; border-radius: 16px; }
.fxnpp-strip { flex-direction: column; align-items: flex-start; }
.fxnpp-trust { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
.fxnpp-trust { grid-template-columns: 1fr; text-align: left; }
.fxnpp-trust li { flex-direction: row; text-align: left; gap: 10px; }
.fxnpp-trust .fxnpp-i { margin: 0; }
}
/*
* The theme's own title bar ("GMGS PRO" + breadcrumb) repeats the product
* title and breadcrumb this layout already shows. Two s is also bad for
* search engines, and on a phone the bar cost 150px above the product. This
* file only loads on products that use the FXNook layout.
*/
.single-product .wd-page-title.page-title { display: none; }
/* A vendor's Heading 1 in the description: a clear heading, smaller than the product title. */
.fxnpp-tabs .woocommerce-Tabs-panel h1,
.fxnpp .woocommerce-Tabs-panel--description h1 {
margin: 0 0 14px;
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 700;
line-height: 1.25;
color: var(--fx-ink, #231F20);
}
.fxnpp-tabs .woocommerce-Tabs-panel h1:not(:first-child) { margin-top: 28px; }
/* WooCommerce messages above the product (the theme hides its own on this layout). */
.fxnpp-notices { margin: 0 0 18px; }
.fxnpp-notices:empty { display: none; }
.fxnpp-notices .woocommerce-error,
.fxnpp-notices .woocommerce-message,
.fxnpp-notices .woocommerce-info {
margin: 0 0 10px;
padding: 14px 18px;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
list-style: none;
}
.fxnpp-notices .woocommerce-error { background: #FDECEA; color: #8C2018; border: 1px solid #F3C6C1; }
.fxnpp-notices .woocommerce-message { background: var(--fx-green-tint, #F2F8E6); color: var(--fx-ink, #231F20); border: 1px solid #D6E7B4; }
.fxnpp-notices .woocommerce-info { background: #F4F6F8; color: var(--fx-ink, #231F20); border: 1px solid #DFE3E8; }
.fxnpp-notices li { margin: 0; }