/* All rules prefixed html.gf-flip-on — class set only when GF_FLIP_MODE allows */
/* Grinder flip card for native theme cards. Every rule is scoped to .gf-card (except the Free Shipping badge match). */
html.gf-flip-on .gf-card .card-figure{position:relative;margin:0 0 14px}
/* t1719/1720: equal-height .productGrid already stretches .card; make gf-card a column so leftover height can sit under checks (not stretch text). */
html.gf-flip-on .gf-card{display:flex;flex-direction:column}
html.gf-flip-on .gf-card .flip3d{flex:0 0 auto}
html.gf-flip-on .gf-card .card-figcaption,html.gf-flip-on .gf-card .card-buttons{display:none!important}
/* Chip sits over the photo top-left (approved); photo fills the same square box as live. */
html.gf-flip-on .gf-card .c2-flipbtn{position:absolute;top:1px;left:0;z-index:3;background:#fff;border:1px solid #c9ced6;color:#3560AD;font-family:inherit;font-size:10px;font-weight:500;letter-spacing:.02em;border-radius:3px;padding:2px 4px;cursor:pointer;margin:0;line-height:1.5;text-transform:none;min-height:0;-webkit-appearance:none;appearance:none}
/* Front checks */
html.gf-flip-on .gf-card .pv-feat{list-style:none;margin:6px 0 8px;padding:0;text-align:left;min-height:58px;flex:1 1 auto;display:flex;flex-direction:column}
/* t1716u: short centered 1px #222 under front checks only (no upper line, no full-width, no image border). */
html.gf-flip-on .gf-card .pv-feat::after{content:"";flex:1 1 auto;min-height:6px;width:100%;align-self:stretch;box-sizing:border-box;border-bottom:1px solid #222;pointer-events:none;transform:translateY(21px)}
html.gf-flip-on .gf-card .pv-feat li{display:flex;align-items:center;gap:6px;margin:0 0 3px;font-size:13px;line-height:1.35;color:#545454}
html.gf-flip-on .gf-card .pv-feat svg{flex:0 0 13px;width:13px;height:13px}
/* 3D flip */
html.gf-flip-on .gf-card .flip3d{perspective:800px;position:relative}
html.gf-flip-on .gf-card .pop-area{position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .5s ease}
html.gf-flip-on .gf-card .face-front{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(0deg)}
html.gf-flip-on .gf-card.gf-flipped .pop-area{transform:rotateY(180deg)}
/* After the flip animation ends, drop the 3D transforms so the back text is rasterized flat (no glyph-spacing artifacts). Same visual result. */
html.gf-flip-on .gf-card.gf-settled .pop-area{transform:none;transition:none}
html.gf-flip-on .gf-card.gf-settled .popx{transform:none}
html.gf-flip-on .gf-card.gf-settled .face-front{visibility:hidden}
@media (prefers-reduced-motion:reduce){
html.gf-flip-on .gf-card .pop-area{transition:none;transform:none!important}
html.gf-flip-on .gf-card .popx{transform:none!important;opacity:0;pointer-events:none;transition:opacity .2s}
html.gf-flip-on .gf-card.gf-flipped .popx{opacity:1;pointer-events:auto}
html.gf-flip-on .gf-card.gf-flipped .face-front{visibility:hidden}
}
/* Back panel */
html.gf-flip-on .gf-card .popx{display:flex;position:absolute;left:0;top:0;right:0;bottom:-15px;z-index:20;box-sizing:border-box;background:#fff;border-radius:10px;box-shadow:0 6px 22px rgba(31,50,100,.16);flex-direction:column;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;border:1px solid #e3e6ec;border-left:6px solid #3560AD;padding:17px 10px 12px 12px;margin:0;overflow:hidden;cursor:pointer;font-weight:400;text-align:left;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
html.gf-flip-on .gf-card:not(.gf-flipped) .popx{pointer-events:none}
html.gf-flip-on .gf-card .popx-k{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:#3560AD;margin-bottom:6px}
html.gf-flip-on .gf-card .popx-name{font-weight:700;color:#1F2123;font-size:20px;line-height:1.15}
html.gf-flip-on .gf-card .popx-rule{width:30px;height:2px;background:#B23916;margin:8px 0 10px}
html.gf-flip-on .gf-card .popx-pill{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;text-align:center;background:#3560AD;color:#fff;font-size:9.5px;font-weight:700;border-radius:999px;height:17px;box-sizing:border-box;padding:0 calc(7px + .04em) 0 calc(7px - .04em);margin:0 0 9px;line-height:1;white-space:nowrap}
html.gf-flip-on .gf-card .popx .f3t{margin:0;color:#4a4d52;line-height:1.45;font-size:15.25px;flex:1 1 0;min-height:0;overflow:hidden}
html.gf-flip-on .gf-card .popx-band{margin-top:9px}
@media (max-width:550px){html.gf-flip-on .gf-card .popx-cg .popx-row{--vfm:11px;--lfm:7.5px}}
html.gf-flip-on .gf-card .popx-icons{display:flex;padding-bottom:4px;--T:16px}
html.gf-flip-on .gf-card .popx-icons>div:not(.popx-sep){text-align:center;line-height:0;min-width:0}
html.gf-flip-on .gf-card .popx-icw{display:inline-block;height:var(--T);overflow:visible;vertical-align:top}
html.gf-flip-on .gf-card .popx-ic{display:block;width:auto;max-width:none}
html.gf-flip-on .gf-card .popx-ic--svg{height:var(--T);width:var(--T)}
html.gf-flip-on .gf-card .popx-row{display:flex;justify-content:space-between;border-top:1px solid #e3e6ec;padding-top:8px;--vf:15.5px;--vfm:12.5px;--lf:9px;--lfm:8px}
html.gf-flip-on .gf-card .popx-spec{text-align:center;padding:0 3px;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;align-items:center}
html.gf-flip-on .gf-card .popx-row>.popx-spec,html.gf-flip-on .gf-card .popx-icons>div:not(.popx-sep){flex:29 1 0}
html.gf-flip-on .gf-card .popx-row>.popx-spec:nth-child(3),html.gf-flip-on .gf-card .popx-icons>div:nth-child(3){flex:42 1 0}
html.gf-flip-on .gf-card .popx-hang{position:absolute}
html.gf-flip-on .gf-card .popx-sep{width:1px;background:#e3e6ec}
html.gf-flip-on .gf-card .popx-v{font-family:inherit;font-size:var(--vf);height:18px;display:flex;align-items:flex-end;justify-content:center;font-weight:600;color:#3560AD;line-height:1;white-space:nowrap}
html.gf-flip-on .gf-card .popx-v--w span{font-size:calc(1em*.95)}
html.gf-flip-on .gf-card .popx-lab{font-size:var(--lf);white-space:nowrap;letter-spacing:.02em;text-transform:uppercase;color:#595959;line-height:1.3;margin-top:2px;position:relative}
@media (max-width:550px){
html.gf-flip-on .gf-card .popx{padding:10px 5px 7px 6px;bottom:-21px}
html.gf-flip-on .gf-card .popx-k{font-size:9px;letter-spacing:.14em;margin-bottom:4px}
html.gf-flip-on .gf-card .popx-name{font-size:14.5px}
html.gf-flip-on .gf-card .popx-rule{width:24px;margin:5px 0 6px}
html.gf-flip-on .gf-card .popx-pill{font-size:8px;height:14px;padding:0 calc(5px + .04em) 0 calc(5px - .04em);margin:0 0 6px}
html.gf-flip-on .gf-card .popx .f3t{font-size:10.25px}
html.gf-flip-on .gf-card .popx-band{margin-top:6px}
html.gf-flip-on .gf-card .popx-icons{padding-bottom:2px;--T:11.5px}
html.gf-flip-on .gf-card .popx-row{padding-top:4px}
html.gf-flip-on .gf-card .popx-v{font-size:var(--vfm);height:12.5px}
html.gf-flip-on .gf-card .popx-v--w span{position:relative;top:.5px;font-size:calc(1em*.95*var(--fsm,1))}
html.gf-flip-on .gf-card .popx-lab{font-size:var(--lfm);letter-spacing:-.01em;margin-top:4.5px}
}
html.gf-flip-on .gf-card.gf-flipped .sale-flag-side,html.gf-flip-on .gf-card.gf-flipped .sale-flag-sash,html.gf-flip-on .gf-card.gf-flipped .c2-flipbtn{visibility:hidden;transition:visibility 0s .25s}
html.gf-flip-on .gf-card .card-text--summary{display:none}
/* Free Shipping / custom badge: ALL theme cards (site-wide continuity). Matches live grid computed styles measured 2026-10-21:
#5e5e5e, white Source Sans Pro 400, radius 0, flush top-right; desktop 10px/15px, padding 5px; mobile (<=767px) 8px/12px, padding 3px. */
html.gf-flip-on .card-figure .sale-flag-side--custom{top:0;right:0;left:auto;bottom:auto;height:auto;width:auto;border-radius:0;background:#5e5e5e;color:#fff;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:normal;text-transform:none;font-size:10px;line-height:15px;padding:5px;margin:0 0 2px 0}
html.gf-flip-on .card-figure .sale-flag-side--custom .sale-text{font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit;padding:0;margin:0}
html.gf-flip-on .card-figure .sale-flag-side--custom{top:-15px;right:-13px}
html.gf-flip-on .card-figure:has(> .sale-flag-side--custom){overflow:visible}
html.gf-flip-on .card-figure:has(> .sale-flag-side--custom) .card-img-container{overflow:hidden}
@media (max-width:767px){html.gf-flip-on .card-figure .sale-flag-side--custom{font-size:8px;line-height:12px;padding:3px;top:-8px;right:-6px}}
/* Stacked badges built by gf-flip.js (live: container flush at card corner, each badge block, right-aligned, 2px apart). */
html.gf-flip-on .card-figure .gf-badges{position:absolute;z-index:10;top:-15px;right:-15px;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
html.gf-flip-on .card-figure .gf-badge{display:block;background:#5e5e5e;color:#fff;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:normal;text-transform:none;font-size:10px;line-height:15px;padding:5px;margin:0 2px 2px 0;border-radius:0;white-space:nowrap}
html.gf-flip-on .card-figure:has(> .gf-badges){overflow:visible}
@media (max-width:767px){html.gf-flip-on .card-figure .gf-badges{top:-8px;right:-8px}html.gf-flip-on .card-figure .gf-badge{font-size:8px;line-height:12px;padding:3px}}
/* Mobile Flip-for-Details chip = Free Shipping badge type metrics (same file badge rules; measured continuity 2026-10-21 / recovery fragment): font-size:8px; line-height:12px; padding:3px. Desktop chip unchanged (10px). t1699u. */
@media (max-width:767px){html.gf-flip-on .gf-card .c2-flipbtn{font-size:8px;line-height:12px;padding:2px 3px;font-weight:700}}
/* Mobile: SM prima-card-title-strip mobile guard excludes .gf-card/[data-gf="1"].
Flip enhance adds those classes, so second gallery img becomes visible/tappable (theme .card-image~.card-image).
Re-apply same hide for flip cards under preview scope only. Desktop hover untouched. t1700u. */
@media (hover:none),(pointer:coarse){
html.gf-flip-on article.card.gf-card .card-img-container .card-image:first-of-type,html.gf-flip-on article.card[data-gf="1"] .card-img-container .card-image:first-of-type{opacity:1!important;visibility:visible!important}
html.gf-flip-on article.card.gf-card .card-img-container .card-image~.card-image,html.gf-flip-on article.card[data-gf="1"] .card-img-container .card-image~.card-image{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}
html.gf-flip-on .gf-card.gf-flipped .gf-badges{visibility:hidden;transition:visibility 0s .25s}
/* Card text, ALL theme cards (site-wide continuity with the live grid, measured 2026-10-21):
body padding-top 14px; brand ABOVE title 12px/18px #000 mb 10px; title 18px/22.5px #1F2123 mb 5px (link 28.8px);
price box mb 7px; price 18px/27px weight 600 #1F2123. */
html.gf-flip-on article.card .card-body{display:flex;flex-direction:column;padding-top:14px}
html.gf-flip-on article.card .card-body>.card-text--brand{order:-1}
html.gf-flip-on article.card .card-text--brand{font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;color:#000;letter-spacing:normal;text-transform:none;line-height:18px;margin:0 0 10px}
html.gf-flip-on article.card .card-title{font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-size:18px;font-weight:400;color:#1F2123;letter-spacing:normal;text-transform:none;line-height:22.5px;margin:0 0 5px}
html.gf-flip-on article.card .card-title a{font-size:18px;font-weight:400;color:#1F2123;letter-spacing:normal;text-transform:none;line-height:28.8px}
html.gf-flip-on article.card .card-text--price{margin:0 0 7px;line-height:27px}
html.gf-flip-on article.card .card-text--price .price--main,html.gf-flip-on article.card .card-text--price .price--withoutTax{font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-size:18px;line-height:27px;font-weight:600;color:#1F2123}
/* Flip card front: figure then brand then title inside the flipping face; same gaps as live. */
html.gf-flip-on article.card.gf-card .card-body{padding-top:0;flex:1 1 auto;min-height:0}
/* Best For pill: equal total padding; text nudged .04em left (B left side bearing + faux-bold 700 spill right) and .03em down so the ink is optically centered. Center on cap height (metric-independent across iOS/Android/desktop) where supported */
@supports (text-box:trim-both cap alphabetic){
@supports (text-box:trim-both cap alphabetic){html.gf-flip-on .gf-card .popx-pill{display:block;width:fit-content;height:auto;text-box:trim-both cap alphabetic;padding:calc((17px - 1cap)/2 + .03em) calc(7px + .04em) calc((17px - 1cap)/2 - .03em) calc(7px - .04em)}@media (max-width:550px){html.gf-flip-on .gf-card .popx-pill{padding:calc((14px - 1cap)/2 + .03em) calc(5px + .04em) calc((14px - 1cap)/2 - .03em) calc(5px - .04em)}}}
}
/* ===== Radical aesthetic overlays (t1725–t1727) — front layout only; back/popx rules above retained ===== */
/* Card shell */
html.gf-flip-on article.card.gf-card{
border:1px solid #e3e6ec!important;border-radius:12px!important;background:#fff!important;
box-shadow:none!important;padding:12px 12px 0!important;box-sizing:border-box;
display:flex!important;flex-direction:column!important;height:100%;
overflow:hidden;
}
/* Hide emptied card-body — beat SM article.card .card-body{display:flex!important} */
html.gf-flip-on article.card.gf-card .card-body{display:none!important;padding:0!important;flex:0!important;min-height:0!important}
html.gf-flip-on article.card.gf-card .card-figcaption,
html.gf-flip-on article.card.gf-card .card-buttons,
html.gf-flip-on article.card.gf-card .quickview,
html.gf-flip-on article.card.gf-card [data-button-type="quickview"]{display:none!important}
/* Flip shell grows; footer pins to bottom */
html.gf-flip-on article.card.gf-card .flip3d{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
html.gf-flip-on article.card.gf-card .pop-area{flex:1 1 auto;min-height:200px}
html.gf-flip-on article.card.gf-card .face-front{
display:flex;flex-direction:column;flex:1 1 auto;background:#fff;
}
/* popx covers face-front only (price now inside front; do not extend into footer) */
html.gf-flip-on article.card.gf-card .popx{bottom:0!important;border-radius:8px}
/* Head: brand left, badges right */
html.gf-flip-on article.card.gf-card .gf-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;
margin:0 0 6px;min-height:22px;
}
html.gf-flip-on article.card.gf-card .gf-head .card-text--brand,
html.gf-flip-on article.card.gf-card .face-front > .card-text--brand{
margin:0!important;padding:0!important;flex:1 1 auto;
font-size:12px!important;font-weight:600!important;line-height:1.3!important;color:#5a5f66!important;
}
html.gf-flip-on article.card.gf-card .gf-badges-top{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:0 1 auto;max-width:65%}
html.gf-flip-on article.card.gf-card .gf-badge{
display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;
font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;
background:#eef3fb;color:#3560AD;border:1px solid #c9d7ef;
}
html.gf-flip-on article.card.gf-card .gf-badge--water{background:#eef8f4;color:#1a7a5c;border-color:#b7dfd0}
html.gf-flip-on article.card.gf-card .gf-badge--install{background:#eef3fb;color:#3560AD}
html.gf-flip-on article.card.gf-card .gf-badge--outlet,
html.gf-flip-on article.card.gf-card .gf-badge--sale{background:#f8e9e9;color:#a33;border-color:#e8c4c4}
html.gf-flip-on article.card.gf-card .gf-badge .gf-drop{flex:0 0 auto}
/* Title ABOVE photo — beat SM article.card .card-title {font-weight:400;font-size:18px} */
html.gf-flip-on article.card.gf-card .face-front > .card-title,
html.gf-flip-on article.card.gf-card .face-front > .card-title.furniture{
display:block!important;order:unset!important;
margin:0 0 8px!important;padding:0!important;
font-size:15px!important;font-weight:700!important;line-height:1.25!important;color:#1F2123!important;
text-align:left!important;
}
html.gf-flip-on article.card.gf-card .face-front > .card-title a{
font-size:15px!important;font-weight:700!important;line-height:1.25!important;color:#1F2123!important;
text-decoration:none!important;
}
/* Photo */
html.gf-flip-on article.card.gf-card .card-figure{
position:relative!important;margin:0 0 8px!important;flex:0 0 auto;
display:flex!important;align-items:center;justify-content:center;min-height:150px;
}
html.gf-flip-on article.card.gf-card .card-image img,
html.gf-flip-on article.card.gf-card .card-img-container img{
max-height:180px;width:auto;max-width:100%;object-fit:contain;margin:0 auto;
}
/* Legacy corner badge box unused on radical fronts */
html.gf-flip-on article.card.gf-card .card-figure > .gf-badges{display:none!important}
/* Flip control lives in footer only — hide any stray chip */
html.gf-flip-on article.card.gf-card .c2-flipbtn{display:none!important}
/* Price under photo — keep SM-readable nodes; slight aesthetic nudge, still beats nothing critical */
html.gf-flip-on article.card.gf-card .face-front > .card-text--price{
margin:0 0 8px!important;line-height:1.3!important;
}
html.gf-flip-on article.card.gf-card .face-front > .card-text--price .price--main,
html.gf-flip-on article.card.gf-card .face-front > .card-text--price .price--withoutTax{
font-size:15px!important;font-weight:700!important;
}
/* Checks: outlined circle already in CHECK svg; kill t1723 midpoint separator */
html.gf-flip-on article.card.gf-card .pv-feat{
list-style:none!important;margin:0 0 10px!important;padding:0!important;min-height:0!important;
display:flex!important;flex-direction:column!important;gap:6px!important;flex:0 0 auto!important;
}
html.gf-flip-on article.card.gf-card .pv-feat::after{content:none!important;display:none!important;border:0!important;transform:none!important;flex:none!important;min-height:0!important;width:0!important}
html.gf-flip-on article.card.gf-card .pv-feat li{
display:flex!important;align-items:flex-start!important;gap:8px!important;margin:0!important;
font-size:12.5px!important;line-height:1.35!important;color:#2a2e33!important;font-weight:500!important;
}
html.gf-flip-on article.card.gf-card .pv-feat li svg{flex:0 0 16px;width:16px!important;height:16px!important;margin-top:1px}
/* Grey footer */
html.gf-flip-on article.card.gf-card .gf-footer{
margin-top:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
gap:8px;flex-wrap:wrap;background:#eef0f3!important;
margin-left:-12px!important;margin-right:-12px!important;
padding:10px 12px!important;border-top:1px solid #e3e6ec;min-height:44px;box-sizing:border-box;
position:relative;z-index:5;
}
html.gf-flip-on article.card.gf-card .gf-ship{
display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#4a4f57;line-height:1.2;
}
html.gf-flip-on article.card.gf-card .gf-ship .gf-truck{flex:0 0 auto;color:#4a4f57}
html.gf-flip-on article.card.gf-card .gf-ship--empty{visibility:hidden}
html.gf-flip-on article.card.gf-card .gf-flip-footer{
appearance:none;-webkit-appearance:none;border:0;background:transparent;
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:700;color:#3560AD;cursor:pointer;padding:4px 0;line-height:1.2;font-family:inherit;
}
html.gf-flip-on article.card.gf-card .gf-flip-footer:hover,
html.gf-flip-on article.card.gf-card .gf-flip-footer:focus{color:#274a8a;outline:none}
html.gf-flip-on article.card.gf-card.gf-flipped .gf-badges-top{visibility:hidden;transition:visibility 0s .25s}
@media (max-width:550px){
html.gf-flip-on article.card.gf-card{padding:10px 10px 0!important;border-radius:10px!important}
html.gf-flip-on article.card.gf-card .face-front > .card-title,
html.gf-flip-on article.card.gf-card .face-front > .card-title a{font-size:14px!important}
html.gf-flip-on article.card.gf-card .card-image img,
html.gf-flip-on article.card.gf-card .card-img-container img{max-height:150px}
html.gf-flip-on article.card.gf-card .gf-footer{margin-left:-10px!important;margin-right:-10px!important;padding:9px 10px!important}
html.gf-flip-on article.card.gf-card .gf-badge{font-size:10px;padding:2px 6px}
}